/* =========================================================
   Generate NFC 2.1.0 — Professional App UI
   Strong visual layer loaded after portal.css + portal-v2.css.
========================================================= */
:root{
  --gnfc-app-navy:#161d2d;
  --gnfc-app-navy-2:#222b3f;
  --gnfc-app-bg:#f2f4f8;
  --gnfc-app-card:#ffffff;
  --gnfc-app-text:#182033;
  --gnfc-app-muted:#778196;
  --gnfc-app-line:#e5e9f0;
  --gnfc-app-orange:#ff6b00;
  --gnfc-app-orange-soft:#fff2e9;
  --gnfc-app-blue:#5b6cff;
  --gnfc-app-green:#16a36b;
}

/* ===== Dashboard shell: intentionally obvious redesign ===== */
@media (min-width:821px){
  .gnfc-portal-shell:not(.is-editor-mode){
    grid-template-columns:250px minmax(0,1fr)!important;
    background:var(--gnfc-app-bg)!important;
    border:1px solid #dfe4ec!important;
    border-radius:24px!important;
    box-shadow:0 22px 64px rgba(24,32,51,.10)!important;
    overflow:hidden!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-sidebar{
    background:linear-gradient(180deg,var(--gnfc-app-navy) 0%,#111725 100%)!important;
    color:#fff!important;
    border-right:0!important;
    padding:26px 18px 20px!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-brand{padding:0 10px 30px!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-brand-mark{
    width:42px!important;height:42px!important;border-radius:13px!important;
    background:linear-gradient(145deg,#ff812b,#ff6500)!important;
    box-shadow:0 10px 24px rgba(255,107,0,.28)!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-brand strong{color:#fff!important;font-size:15px!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-brand small{color:#9da8ba!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-menu-label{color:#6f7b90!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-menu a{
    min-height:46px!important;border-radius:12px!important;color:#aeb8c8!important;padding:0 12px!important;
    font-size:12px!important;font-weight:650!important;transition:.16s ease!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-menu a:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-menu a.is-active{
    color:#fff!important;background:linear-gradient(90deg,rgba(255,107,0,.22),rgba(255,107,0,.07))!important;
    box-shadow:inset 3px 0 0 var(--gnfc-app-orange)!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-menu-icon{color:currentColor!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-sidebar-bottom{border-top:1px solid rgba(255,255,255,.08)!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-profile{color:#fff!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-profile:hover,
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-profile.is-active{background:rgba(255,255,255,.05)!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-avatar{background:#2a3449!important;color:#fff!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-profile small{color:#91a0b5!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-logout{color:#ffb5a6!important}

  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-topbar{
    min-height:78px!important;background:#fff!important;padding:14px 28px!important;border-bottom:1px solid var(--gnfc-app-line)!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-topbar strong{color:var(--gnfc-app-text)!important;font-size:19px!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-portal-main{background:var(--gnfc-app-bg)!important;padding:26px 28px 34px!important}
}

/* ===== Summary dashboard cards ===== */
.gnfc-dashboard-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.gnfc-dashboard-summary article{display:flex;align-items:center;gap:12px;min-height:86px;padding:16px;border:1px solid var(--gnfc-app-line);border-radius:17px;background:#fff;box-shadow:0 7px 20px rgba(24,32,51,.045)}
.gnfc-dashboard-summary article>div{display:flex;flex-direction:column;gap:3px}.gnfc-dashboard-summary small{font-size:12px;color:var(--gnfc-app-muted);font-weight:650}.gnfc-dashboard-summary strong{font-family:Montserrat,sans-serif;font-size:22px;line-height:1;color:var(--gnfc-app-text)}
.gnfc-summary-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:13px;font-weight:800;font-size:15px}.gnfc-summary-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.gnfc-summary-icon.is-project{background:#eef1ff;color:#5b6cff}.gnfc-summary-icon.is-view{background:#fff2e9;color:#ff6b00}.gnfc-summary-icon.is-custom{background:#eaf8f2;color:#15935d}.gnfc-summary-icon.is-progress{background:#eef7ff;color:#2f80c9}

/* ===== Project cards ===== */
.gnfc-product-card{border:1px solid #e1e6ee!important;border-radius:18px!important;box-shadow:0 8px 22px rgba(24,32,51,.045)!important}
.gnfc-product-card:hover{border-color:#cfd6e2!important;box-shadow:0 15px 32px rgba(24,32,51,.075)!important}
.gnfc-product-visual{background:linear-gradient(145deg,#f8fafc,#eef2f7)!important;border:1px solid #edf0f4!important}
.gnfc-product-meta span.is-order{background:#eef1ff!important;color:#5364dd!important}
.gnfc-product-actions .gnfc-btn.is-primary{background:linear-gradient(135deg,#ff7a1a,#ff6500)!important;border:0!important}
.gnfc-product-actions .gnfc-btn.is-primary:hover{filter:brightness(.96)}

/* ===== Progress customer page ===== */
.gnfc-order-list{display:grid;gap:14px}.gnfc-order-card{background:#fff;border:1px solid var(--gnfc-app-line);border-radius:19px;padding:18px;box-shadow:0 8px 24px rgba(24,32,51,.045)}
.gnfc-order-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.gnfc-order-identity{display:flex;align-items:center;gap:12px;min-width:0}.gnfc-order-logo{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border:1px solid #e9edf3;border-radius:14px;background:#f8fafc;color:#8791a0;font-weight:800;overflow:hidden}.gnfc-order-logo img{max-width:80%;max-height:80%;object-fit:contain}.gnfc-order-identity small{display:block;color:#8a94a5;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.gnfc-order-identity h3{margin:3px 0 0;font-size:15px;line-height:1.35}.gnfc-order-status{padding:7px 10px;border-radius:999px;background:#f1f3f6;color:#7a8392;font-size:12px;font-weight:800;white-space:nowrap}.gnfc-order-status.is-active{background:#fff2e9;color:#d65b00}
.gnfc-order-progress-row{margin-top:18px}.gnfc-order-progress-row>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#7a8494}.gnfc-order-progress-row strong{font-family:Montserrat,sans-serif;font-size:14px;color:#253047}.gnfc-order-progress-track{height:8px!important;margin-top:8px;border-radius:99px;background:#edf0f4;overflow:hidden}.gnfc-order-progress-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff7a1a,#ff6500)}
.gnfc-production-progress{margin-top:14px;padding:12px 13px;border:1px solid #e8edf3;border-radius:13px;background:#f8fafc}.gnfc-production-progress>span{font-size:12px;color:#667085}.gnfc-production-progress>strong{float:right;font-size:12px}.gnfc-production-progress>div{clear:both;height:6px;margin-top:8px;border-radius:99px;background:#e7ebf0;overflow:hidden}.gnfc-production-progress i{display:block;height:100%;border-radius:99px;background:#5b6cff}
.gnfc-order-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:22px 0 8px;position:relative}.gnfc-order-timeline:before{content:"";position:absolute;left:7%;right:7%;top:10px;height:2px;background:#e7ebf0}.gnfc-order-timeline>div{position:relative;z-index:1;text-align:center}.gnfc-order-timeline>div>span{width:21px;height:21px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;background:#eef1f5;border:2px solid #fff;box-shadow:0 0 0 1px #dde3eb;color:#fff;font-size:12px}.gnfc-order-timeline>div.is-done>span{background:#1baa72;box-shadow:0 0 0 1px #1baa72}.gnfc-order-timeline>div.is-current>span{background:#ff6b00;box-shadow:0 0 0 4px #fff1e7}.gnfc-order-timeline small{font-size:12px;color:#8a94a4}.gnfc-order-timeline>div.is-done small,.gnfc-order-timeline>div.is-current small{color:#344054;font-weight:700}
.gnfc-order-note{margin-top:14px;padding:12px 14px;border-radius:13px;background:#f7f8fb}.gnfc-order-note strong{font-size:12px}.gnfc-order-note p{margin:5px 0 0;font-size:12px;line-height:1.6;color:#677184}.gnfc-order-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.gnfc-order-actions .gnfc-btn{min-height:34px;padding:0 11px}.gnfc-tracking-chip{padding:8px 10px;border-radius:10px;background:#eef1ff;color:#5364dd;font-size:12px;font-weight:700}.gnfc-order-updated{display:block;margin-top:11px;color:#98a1ae;font-size:12px}

/* ===== Account/reporting ===== */
.gnfc-account-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.gnfc-account-metrics article{padding:16px;border:1px solid var(--gnfc-app-line);border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(24,32,51,.04)}.gnfc-account-metrics span,.gnfc-account-metrics small{display:block;color:#7c8798;font-size:12px}.gnfc-account-metrics strong{display:block;margin:6px 0 4px;font-family:Montserrat,sans-serif;font-size:22px;color:#1e293b}.gnfc-account-metrics small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnfc-view-report-card{margin-top:16px;border:1px solid var(--gnfc-app-line);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 7px 20px rgba(24,32,51,.04)}.gnfc-view-report-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid #edf0f4}.gnfc-view-report-head span{font-size:12px;color:#ff6b00;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.gnfc-view-report-head h2{margin:3px 0 0;font-size:15px}.gnfc-view-report-head>small{font-size:12px;color:#8a94a4}.gnfc-view-report-list>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid #f0f2f5}.gnfc-view-report-list>div:last-child{border-bottom:0}.gnfc-view-report-list span strong,.gnfc-view-report-list span small{display:block}.gnfc-view-report-list span strong{font-size:12px}.gnfc-view-report-list span small{margin-top:3px;font-size:12px;color:#8a94a4}.gnfc-view-report-list b{font-family:Montserrat,sans-serif;font-size:14px;white-space:nowrap}.gnfc-view-report-list em{font-family:Roboto,sans-serif;font-size:12px;font-style:normal;color:#8a94a4}.gnfc-view-report-empty{padding:18px}

/* ===== Editor visual + interaction refinements ===== */
.gnfc-portal-shell.is-editor-mode .gnfc-editor-control-panel{border-color:#e3e8ef!important;box-shadow:0 9px 24px rgba(24,32,51,.045)!important}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-phone{scroll-behavior:smooth;scroll-padding-top:44px;scroll-padding-bottom:54px}
.gnfc-portal-shell.is-editor-mode .gnfc-preview-content{padding-bottom:60px!important}
.gnfc-editor-section-focus{outline:2px solid rgba(255,107,0,.75);outline-offset:5px;border-radius:12px;animation:gnfcEditorSectionPulse .8s ease-out 1}
@keyframes gnfcEditorSectionPulse{0%{background:rgba(255,107,0,.13)}100%{background:transparent}}

/* No hover/active background on the Edit Cerita navigation: text/icon only. */
.gnfc-mobile-editor-tabs button,
.gnfc-mobile-editor-tabs button:hover,
.gnfc-mobile-editor-tabs button:focus,
.gnfc-mobile-editor-tabs button.is-active{background:transparent!important;box-shadow:none!important}
.gnfc-mobile-editor-tabs button:hover{color:#4e596b!important}
.gnfc-mobile-editor-tabs button.is-active{color:var(--gnfc-app-orange)!important}

/* Make external media in editor preview act as an editor target instead of an embedded player. */
@media(max-width:820px){
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-personal-media{position:relative;cursor:pointer}
  .gnfc-portal-shell.is-editor-mode .gnfc-preview-personal-media>*{pointer-events:none}
}

/* ===== Mobile: app-like, obvious visual difference ===== */
@media(max-width:820px){
  .gnfc-portal-shell:not(.is-editor-mode){background:var(--gnfc-app-bg)!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-topbar{
    background:linear-gradient(135deg,#182033 0%,#242e45 100%)!important;
    border:0!important;box-shadow:0 8px 22px rgba(24,32,51,.14)!important;
  }
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-app-topbar strong,
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-topbar-title{color:#fff!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-search{background:#fff!important;border-color:rgba(255,255,255,.15)!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-help{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.14)!important;color:#fff!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-view-switch{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.12)!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-view-switch button{color:#c3ccda!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-project-view-switch button.is-active{background:#fff!important;color:#ff6b00!important}
  .gnfc-portal-shell:not(.is-editor-mode) .gnfc-portal-main{padding-top:18px!important;background:var(--gnfc-app-bg)!important}
  .gnfc-dashboard-summary{display:flex;overflow-x:auto;gap:10px;margin:0 -14px 14px;padding:0 14px 4px;scrollbar-width:none}.gnfc-dashboard-summary::-webkit-scrollbar{display:none}.gnfc-dashboard-summary article{min-width:145px;min-height:76px;padding:13px;border-radius:15px;box-shadow:none}.gnfc-summary-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}.gnfc-dashboard-summary strong{font-size:18px}
  .gnfc-product-card{border-radius:17px!important;box-shadow:0 5px 14px rgba(24,32,51,.04)!important}
  .gnfc-mobile-nav{grid-template-columns:repeat(4,1fr)!important;left:8px!important;right:8px!important;height:66px!important;border-radius:18px!important}
  .gnfc-mobile-nav a{min-width:0!important}.gnfc-mobile-nav a.is-active{background:transparent!important;color:#ff6b00!important}.gnfc-mobile-nav a small{font-size:12px!important}
  .gnfc-order-card{padding:14px;border-radius:16px;box-shadow:none}.gnfc-order-card-head{align-items:flex-start}.gnfc-order-status{font-size:12px}.gnfc-order-timeline{overflow-x:auto;grid-template-columns:repeat(6,70px);justify-content:flex-start;margin-left:-6px;margin-right:-6px;padding:0 6px 5px;scrollbar-width:none}.gnfc-order-timeline::-webkit-scrollbar{display:none}.gnfc-order-timeline:before{left:40px;right:40px}.gnfc-account-metrics{grid-template-columns:1fr 1fr;gap:9px}.gnfc-account-metrics article{padding:13px;box-shadow:none}.gnfc-account-metrics strong{font-size:18px}.gnfc-view-report-head{display:block}.gnfc-view-report-head>small{display:block;margin-top:5px}.gnfc-view-report-list>div{padding:11px 13px}.gnfc-view-report-list span{min-width:0}.gnfc-view-report-list span strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:430px){
  .gnfc-product-grid.is-list .gnfc-product-card{grid-template-columns:68px minmax(0,1fr) 84px!important}
  .gnfc-order-card-head{display:block}.gnfc-order-status{display:inline-flex;margin-top:9px}
}

/* Keep the explicit Cari action requested on mobile. */
@media(max-width:820px){
  .gnfc-project-search-submit{display:inline-flex!important;align-items:center;justify-content:center;height:28px!important;padding:0 8px!important;border-radius:8px!important;background:#ff6b00!important;color:#fff!important;font-size:12px!important;box-shadow:none!important}
  .gnfc-project-search{padding-right:4px!important}
}