/* NAFAS KEWANGAN 2.0 | Full responsive portal redesign, desktop/mobile at 100% zoom. */
:root {--nk-navy:#071d34;--nk-deep:#092f4e;--nk-teal:#009c91;--nk-teal2:#087e95;--nk-surface:#fff;--nk-bg:#f2f7fb;--nk-text:#0b2c45;--nk-muted:#607e96;--nk-stroke:#d9e8f1;--nk-radius:18px;--nk-softshadow:0 14px 36px rgba(15,52,81,.055)}
[hidden]{display:none!important}
html{min-width:320px}
body{min-width:320px}
:focus-visible{outline:3px solid #06b3a6!important;outline-offset:3px}
.skip-link{position:fixed;z-index:200;top:-200px;left:12px;background:#fff;color:#0b2c45;padding:12px 18px;border-radius:8px}
.skip-link:focus{top:8px}
.nk-icon{width:19px;height:19px;flex:0 0 19px;vertical-align:middle}
body.admin-page,body.customer-page,body.partner-page{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.55;background:var(--nk-bg);color:var(--nk-text)}
body.admin-page input,body.customer-page input,body.partner-page input,body.admin-page select,body.customer-page select,body.partner-page select,body.admin-page textarea,body.customer-page textarea,body.partner-page textarea{font-size:16px;min-height:46px}
.dashboard-layout{display:grid;grid-template-columns:254px minmax(0,1fr);min-height:100dvh;width:100%;align-items:stretch}
.sidebar{background:linear-gradient(170deg,#061c34 0%,#092b47 85%,#051a30 100%);padding:23px 14px 15px;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:40}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 5px 26px}
.sidebar .brand{margin:0;min-height:53px;max-width:185px}
.sidebar .brand-image{width:185px;max-width:100%;height:auto}
.sidebar-caption{color:#92b9c8;margin:0 12px 12px;font-size:11px;letter-spacing:.16em}
.side-nav{gap:6px}
.side-nav .nav-item{min-height:45px;padding:11px 13px;color:#d0e2ed;font-weight:650;font-size:13px;line-height:1.35;border-radius:11px;gap:12px;transition:background .15s,color .15s}
.side-nav .nav-item .nk-icon{width:18px;height:18px;flex-basis:18px;color:#b2d0e0}
.side-nav .nav-item:hover,.side-nav .nav-item.current{color:#fff;background:linear-gradient(105deg,#0b6a8c,#06a698);text-decoration:none}
.side-nav .nav-item:hover .nk-icon,.side-nav .nav-item.current .nk-icon{color:#fff}
.side-footer{margin-top:auto;padding:17px 10px 2px;border-top:1px solid #9bc1ce24;color:#cbe5e9}
.side-footer a{display:flex;align-items:center;gap:5px;margin-top:9px;color:#b7d5e3;text-decoration:none;min-height:32px}
.side-footer .nk-icon{width:16px;height:16px;transform:rotate(180deg)}
.sidebar-close{display:none}
.main-shell{min-width:0;max-width:100%;display:flex;flex-direction:column}
.app-top{position:sticky;top:0;z-index:21;min-height:72px;height:auto;padding:10px clamp(20px,3.1vw,46px);background:#fff;border-bottom:1px solid var(--nk-stroke);box-shadow:0 2px 10px rgba(20,60,90,.025);gap:14px}
.app-breadcrumb{font-size:12px;font-weight:750;color:#4e718a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-breadcrumb span{color:#aac4d4}
.app-user{gap:12px;flex:0 0 auto}
.app-user strong{font-size:12px;color:#1a4057;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-user .lang-switch{border:1px solid #e0edf3;border-radius:13px}
.app-user .lang-switch a{min-height:30px;display:grid;place-items:center}
.app-user .logout{display:inline-flex;align-items:center;gap:7px;min-height:38px;border-radius:10px;color:#1f4660;font-weight:650}
.logout .nk-icon{width:16px;height:16px}
.notification-shortcut{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e0edf3;border-radius:11px;color:#0d5c70;background:#f7fafc}
.notification-shortcut:hover{background:#eaf8f5;text-decoration:none}
.mobile-menu{display:none}.sidebar-backdrop{display:none}
.content{width:100%;max-width:1480px;padding:clamp(22px,3.5vw,44px) clamp(20px,3.2vw,50px) 70px;margin:0 auto;min-width:0}
.page-heading{margin:0 0 24px}
.page-heading .eyebrow{font-size:11px;letter-spacing:.16em;font-weight:850}
.page-heading h1{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:850;font-size:clamp(30px,3.1vw,45px);line-height:1.12;letter-spacing:-.045em;margin:10px 0 10px;color:#0b2e49}
.page-heading>p{font-size:14px;line-height:1.55;max-width:900px;margin:0;color:#68859a}
.admin-page .panel,.customer-page .panel,.partner-page .panel{border-radius:var(--nk-radius);padding:clamp(19px,2vw,27px);border:1px solid var(--nk-stroke);box-shadow:var(--nk-softshadow);background:var(--nk-surface);min-width:0;margin-bottom:18px}
.panel h3{font-size:18px;color:#0d3654;font-weight:800}
.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.stat{padding:21px;min-height:135px;border-radius:17px;border:1px solid var(--nk-stroke);box-shadow:var(--nk-softshadow)}
.stat small{font-size:12px;letter-spacing:.01em;color:#6f8da3;font-weight:750}
.stat strong{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(24px,2.2vw,32px);color:#0b3e5c;font-weight:850;margin:12px 0 5px;overflow-wrap:anywhere}
.stat.highlight{background:linear-gradient(115deg,#0b6386,#079c95)}
.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.quick-links a{min-height:44px;display:flex;align-items:center;font-size:14px}
.notice{font-size:14px;line-height:1.6;border-radius:13px}
.table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.table-scroll table{font-size:13px;min-width:650px}
.table-scroll th{color:#627f99;font-weight:850;font-size:11px;letter-spacing:.1em;padding:15px 12px}
.table-scroll td{padding:14px 12px;overflow-wrap:anywhere}
.table-scroll tr:hover td{background:#f8fbfd}
.table-scroll .button-row{min-width:180px}
.button-row form{max-width:100%}
.button-row .btn{white-space:normal}
.admin-page .btn,.customer-page .btn,.partner-page .btn{min-height:42px;font-size:13px;border-radius:10px;box-shadow:none;letter-spacing:.01em}
.admin-page .btn .nk-icon{width:16px;height:16px;flex-basis:16px}
.search-line{display:flex;gap:10px}
.search-line input{min-width:0}
.search-line .btn{flex:0 0 auto}
/* Dedicated settings page */
.admin-info-note{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;margin-bottom:18px;background:#fff8e9;border-color:#f0d9a1}
.admin-info-note .nk-icon{color:#b17b13;margin-top:2px}
.settings-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.settings-columns .settings-card{margin-bottom:0}
.settings-card{display:flex;flex-direction:column;gap:0}
.settings-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:23px}
.settings-section-icon{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:#dff7f2;color:#008f80;display:grid;place-items:center}
.settings-section-icon .nk-icon{width:22px;height:22px;flex-basis:22px}
.settings-card-head h2{font-size:19px;line-height:1.25;font-weight:850;letter-spacing:-.015em;color:#0b2d46;margin:0 0 5px}
.settings-card-head p{font-size:12px;color:#668399;line-height:1.5;margin:0}
.settings-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.settings-form label{font-size:12px;line-height:1.45;gap:7px;color:#153c55;font-weight:750;min-width:0}
.settings-form input:not([type=checkbox]),.settings-form select{background:#f3f8fc;border:1px solid #ccdfeb;color:#113b56;min-height:46px;padding:10px 13px;border-radius:10px;font-size:15px;font-weight:500;min-width:0;width:100%}
.settings-form input:not([type=checkbox]):focus,.settings-form select:focus{background:#fff}
.settings-fields{display:grid;grid-template-columns:1fr;gap:15px;min-width:0}
.settings-fields.two-fields{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.field-help{font-size:11px;color:#66859b;font-weight:500;line-height:1.5}
.password-wrap{display:flex;position:relative;min-width:0}
.password-wrap input{padding-right:48px!important}
.password-toggle{position:absolute;top:2px;bottom:2px;right:3px;min-width:43px;border:0;background:transparent;color:#416b83;display:grid;place-items:center;border-radius:9px}
.password-toggle:hover{background:#e9f3f8}
.settings-toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important;min-height:39px;font-size:13px!important;cursor:pointer}
.settings-toggle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.toggle-track{width:39px;height:23px;flex:0 0 39px;border-radius:99px;background:#b7cad6;position:relative;transition:background .16s}
.toggle-track:before{content:"";width:17px;height:17px;border-radius:50%;background:#fff;position:absolute;left:3px;top:3px;box-shadow:0 1px 3px #0002;transition:transform .16s}
.settings-toggle input:checked+.toggle-track{background:#04a99c}
.settings-toggle input:checked+.toggle-track:before{transform:translateX(16px)}
.settings-toggle input:focus-visible+.toggle-track{outline:3px solid #06b3a6;outline-offset:3px}
.settings-actions{display:flex;flex-wrap:wrap;gap:9px}
.settings-actions .btn{white-space:normal;text-align:center}
.settings-guide{display:flex;align-items:flex-start;gap:9px;background:#eef8fb;color:#53738a;font-size:12px;line-height:1.55;border-radius:12px;padding:13px;margin-top:18px}
.settings-guide span .nk-icon{width:16px;height:16px;color:#128b93}
.settings-guide a{white-space:nowrap}
.check-result{font-size:12px;min-height:0;margin:0;color:#1f6770}
.smtp-test-form{border-top:1px solid var(--nk-stroke);margin-top:22px;padding-top:20px}
.smtp-test-form .btn{align-self:start}
.settings-status{margin-top:18px}
.settings-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #edf3f8;padding-top:17px}
.status-metric{padding:5px 18px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--nk-stroke);min-width:0}
.status-metric:first-child{padding-left:0}
.status-metric:last-child{border:0}
.status-metric small{font-size:11px;color:#627f99;font-weight:750}
.status-metric strong{font-size:13px;font-weight:850;color:#153c56;overflow-wrap:anywhere}
.status-detail{color:#748da0;font-size:11px}
.state-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border-radius:40px;padding:6px 12px;font-size:12px;font-weight:900}
.state-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state-on{color:#08764e;background:#dff7e9}
.state-off{color:#715e55;background:#eff2f4}
.settings-security-note{margin-top:22px;background:#eef8fc;border-radius:12px;padding:13px 15px;display:flex;align-items:flex-start;gap:9px;font-size:12px;color:#496b83;line-height:1.5}
.settings-security-note .nk-icon{color:#168b9c}
/* Works in all existing portals, not admin alone. */
@media(max-width:1190px){.dashboard-layout{grid-template-columns:225px minmax(0,1fr)}.sidebar .brand-image{width:171px}.content{padding-inline:25px}.settings-columns{grid-template-columns:1fr}.settings-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.status-metric:nth-child(2){border-right:0}.status-metric:nth-child(3){padding-left:0}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){
 .dashboard-layout{display:block}
 .sidebar{width:min(300px,86vw);height:100dvh;max-height:100dvh;position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .22s ease;visibility:hidden;box-shadow:20px 0 40px #001c3544;z-index:60}
 .sidebar.open{transform:translateX(0);visibility:visible}
 .sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:rgba(6,22,39,.58);z-index:55}
 .sidebar-close{display:grid;place-items:center;width:40px;height:40px;background:#ffffff14;border:1px solid #ffffff29;border-radius:10px;color:#fff;flex:0 0 auto}
 .mobile-menu{display:grid;place-items:center;min-width:43px;min-height:43px;border-radius:11px;border:1px solid #dbe9f0;background:#f0f7fa;color:#0c4860;flex:0 0 auto}
 .mobile-menu .nk-icon{width:21px;height:21px}
 .app-top{min-height:65px;padding:8px 16px;gap:10px}
 .app-breadcrumb{display:block;max-width:calc(100vw - 310px);font-size:11px}
 .app-user{margin-left:auto;gap:8px}
 .app-user .user-name{max-width:84px}
 .app-user .logout{padding:7px 10px;min-height:36px}
 .content{padding:25px 16px 56px}
 .page-heading h1{font-size:clamp(27px,6vw,36px)}
 .two-col{grid-template-columns:1fr}
 .settings-columns{grid-template-columns:1fr}
 .settings-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .settings-guide a{white-space:normal}
}
@media(max-width:620px){
 .app-top{gap:6px}
 .app-breadcrumb{display:none}
 .notification-shortcut{width:34px;height:36px;border:0;background:transparent}
 .app-user .lang-switch a{font-size:11px;min-height:28px;padding:4px 7px}
 .app-user .user-name{max-width:72px;font-size:11px}
 .app-user .logout{padding:7px;min-width:38px;min-height:38px;justify-content:center}
 .app-user .logout span{display:none}
 .content{padding:20px 13px 50px}
 .page-heading h1{font-size:clamp(26px,7vw,32px)}
 .page-heading>p{font-size:13px}
 .admin-page .panel,.customer-page .panel,.partner-page .panel{padding:17px;border-radius:15px}
 .settings-card-head h2{font-size:18px}
 .settings-fields.two-fields{grid-template-columns:1fr}
 .settings-actions{flex-direction:column;align-items:stretch}
 .settings-actions .btn,.smtp-test-form .btn{width:100%;justify-content:center}
 .stats{gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat{padding:15px;min-height:120px}
 .stat small{font-size:11px}
 .stat strong{font-size:clamp(20px,5vw,27px)}
 .status-metric{padding:5px 10px}
 .status-metric strong{font-size:12px}
 /* Tables become accessible labelled cards, no forced page horizontal scrolling. */
 .table-scroll{overflow:visible}
 .table-scroll table{display:block;min-width:0;width:100%}
 .table-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .table-scroll tbody{display:block;width:100%}
 .table-scroll tr{display:block;padding:10px 13px;background:#f8fbfd;border:1px solid #e0ebf2;border-radius:13px;margin-bottom:10px}
 .table-scroll tr.table-empty{padding:12px}
 .table-scroll td{display:grid;grid-template-columns:minmax(78px,.34fr) minmax(0,1fr);gap:10px;align-items:start;overflow-wrap:anywhere;padding:9px 0;border-bottom:1px solid #e4edf3}
 .table-scroll td:last-child{border:0}
 .table-scroll td:before{content:attr(data-label);color:#66879d;text-transform:uppercase;font-size:10px;letter-spacing:.04em;font-weight:800}
 .table-scroll tr.table-empty td{display:block}
 .table-scroll tr.table-empty td:before{display:none}
 .table-scroll td .button-row{min-width:0}
 .search-line{flex-direction:column}
 .search-line .btn{width:100%}
 .form-grid,.calculator{grid-template-columns:1fr}
 .topbar .brand-image{width:min(170px,42vw)}
}
@media(max-width:370px){.app-user .user-name{display:none}.status-metric{padding-inline:8px}.stats{grid-template-columns:1fr 1fr}.stat{padding:12px}.stat strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.sidebar,.toggle-track,.toggle-track:before,.side-nav .nav-item{transition:none!important}}

@media(max-width:800px){body.nav-open{overflow:hidden}}

/* Final mobile polish: the new NAFAS logo remains visible even when nav is closed. */
.mobile-brand{display:none}
.settings-guide{display:block}
.settings-guide span{display:inline-flex;vertical-align:middle;margin-right:5px}
.settings-guide a{display:inline;overflow-wrap:anywhere}
@media(max-width:800px){
 .mobile-brand{display:inline-flex;align-items:center;min-width:0;flex:0 1 120px}
 .mobile-brand img{width:clamp(88px,12vw,117px);height:auto;display:block;max-width:100%}
 .app-breadcrumb{display:none}
}
@media(max-width:620px){
 .app-user .user-name{display:none}
 .mobile-brand{flex:0 1 103px}
 .mobile-brand img{width:100%}
}
@media(max-width:370px){.notification-shortcut{display:none}}