/* SmartPay360 — brand theme from the SP logo: logo blue (#0061DC) on white, deep blue chrome, sky highlights. */
:root{
  --sp-navy:#003C8F; --sp-navy-2:#0052BD; --sp-blue:#0061DC; --sp-blue-2:#3D8BFF; --sp-blue-dk:#004FB4; --sp-sky:#8EC5FF; --sp-tint:#EAF2FE;
  --sp-gold:#FFFFFF; --sp-gold-2:#F5C518; --sp-amber:#F59E0B;
  --sp-bg:#F3F6FB; --sp-surface:#FFFFFF; --sp-text:#1E2633; --sp-muted:#6B7685; --sp-line:#E3E7ED;
  --bs-primary:#0061DC; --bs-primary-rgb:0,97,220; --bs-link-color:#0061DC; --bs-link-color-rgb:0,97,220; --bs-link-hover-color:#004FB4; --bs-link-hover-color-rgb:0,79,180; --bs-body-font-family:'Manrope',system-ui,sans-serif; --bs-body-color:var(--sp-text);
  --sidebar-w:240px; --rail-w:64px;
}
body{background:var(--sp-bg);font-family:'Manrope',system-ui,sans-serif;font-size:14px;color:var(--sp-text)}
h1,h2,h3,h4,.brand{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.01em}
.num,.mono,td.num,th.num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.btn-primary{--bs-btn-bg:var(--sp-blue);--bs-btn-border-color:var(--sp-blue);--bs-btn-hover-bg:var(--sp-blue-dk);--bs-btn-hover-border-color:var(--sp-blue-dk);--bs-btn-active-bg:#00429A;--bs-btn-active-border-color:#00429A;--bs-btn-disabled-bg:var(--sp-blue);--bs-btn-disabled-border-color:var(--sp-blue)}
.btn-outline-primary{--bs-btn-color:var(--sp-blue);--bs-btn-border-color:var(--sp-blue);--bs-btn-hover-bg:var(--sp-blue);--bs-btn-hover-border-color:var(--sp-blue);--bs-btn-active-bg:var(--sp-blue-dk);--bs-btn-active-border-color:var(--sp-blue-dk)}
.form-control:focus,.form-select:focus{border-color:#7FB2F5;box-shadow:0 0 0 .2rem rgba(0,99,220,.18)}
.form-check-input:checked{background-color:var(--sp-blue);border-color:var(--sp-blue)}
.text-primary{color:var(--sp-blue)!important}.bg-primary{background-color:var(--sp-blue)!important}
.nav-pills .nav-link.active{background:var(--sp-blue)}.page-link{color:var(--sp-blue)}.active>.page-link,.page-link.active{background:var(--sp-blue);border-color:var(--sp-blue)}
.app{display:flex;min-height:100vh}
.brand-mark{display:inline-block;flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--sp-blue) url(sp-mark.png) center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.brand b{color:var(--sp-blue);font-weight:inherit}
.sidebar .brand b{color:var(--sp-sky)}
.topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:12px;background:var(--sp-surface);border-bottom:1px solid var(--sp-line);padding:10px 22px}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--sp-bg);border-radius:8px;padding:6px 10px;flex:1;max-width:520px}
.topbar-search input{border:0;background:transparent;outline:none;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.page-head h1{font-size:22px;margin:0}
.page-head .sub{color:var(--sp-muted);font-size:13px}
.card{border:1px solid var(--sp-line);border-radius:12px;box-shadow:none}
.card-header{background:transparent;border-bottom:1px solid var(--sp-line);font-weight:600}
.table{--bs-table-bg:transparent;margin:0}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--sp-muted);font-weight:600;border-bottom:1px solid var(--sp-line);white-space:nowrap}
.table td{vertical-align:middle}
.table-hover tbody tr:hover{--bs-table-hover-bg:#EEF4FD}
.kpi{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:12px;padding:14px 16px;height:100%;text-decoration:none;color:inherit;display:block}
.kpi .label{font-size:12px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.05em}
.kpi .value{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:500;margin-top:4px}
.kpi.accent{border-left:4px solid var(--sp-blue)}
.filters{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:12px;padding:12px;margin-bottom:14px}
.badge-status{font-weight:600;font-size:11px}
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background:radial-gradient(1200px 600px at 50% -10%,rgba(61,139,255,.45),transparent 60%),linear-gradient(165deg,var(--sp-blue) 0%,var(--sp-navy-2) 45%,var(--sp-navy) 100%)}
.auth-logo{display:block;width:84px;height:84px;margin:0 auto 10px;border-radius:50%;box-shadow:0 8px 24px rgba(0,40,100,.35)}
.auth-card{box-shadow:0 18px 50px rgba(2,22,56,.35)}
.auth-card .brand{justify-content:center}
.auth-card{width:100%;max-width:400px;background:#fff;border-radius:14px;padding:28px}
.auth-card .brand{display:flex;align-items:center;gap:10px;font-size:20px}
.auth-wrap>.small{color:#c9dcf7!important}
.pin-input{font-family:'IBM Plex Mono',monospace;font-size:26px;letter-spacing:.5em;text-align:center}
.form-label{font-weight:600;font-size:13px}
@media print{.sidebar,.topbar,.no-print,.btn{display:none!important}.main{margin:0}.content{padding:0}body{background:#fff}.card{border:0}}
.kpi-link:hover{border-color:var(--sp-blue);box-shadow:0 2px 10px rgba(0,99,220,.10)}
.kpi .hint{font-size:12px;color:var(--sp-muted);margin-top:2px}
.kpi-danger{border-left:4px solid #dc3545}.kpi-warning{border-left:4px solid var(--sp-amber)}.kpi-success{border-left:4px solid #198754}
.sparkbars{display:flex;align-items:flex-end;gap:4px;height:70px}
.sparkbars .bar{flex:1;background:var(--sp-blue-2);opacity:.55;border-radius:3px 3px 0 0;min-height:2px}
.sparkbars .bar:last-child{background:var(--sp-blue);opacity:1}

/* ---------------------------------------------------------------- shell: sidebar + full-width content */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#0061DC 0%,var(--sp-navy) 100%);color:#cfdcf0;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:1040;transition:width .18s,transform .2s}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:12px 10px 6px 12px}
.sidebar .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:18px;white-space:nowrap;overflow:hidden}
.rail-toggle{border:0;background:transparent;color:#9fb0c6;width:30px;height:30px;border-radius:8px;align-items:center;justify-content:center}
.rail-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-filter{display:flex;align-items:center;gap:8px;margin:6px 10px 8px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.07);color:#9fb0c6}
.nav-filter input{border:0;background:transparent;color:#fff;outline:none;width:100%;font-size:13px}
.nav-filter input::placeholder{color:#8698b1}
.nav-groups{flex:1;overflow-y:auto;padding:2px 8px 24px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.sidebar .nav-link{display:flex;align-items:center;gap:10px;color:#d7dfea;border-radius:8px;padding:6px 10px;font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-link span{overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar .nav-link.active{background:var(--sp-blue);color:#fff;box-shadow:inset 3px 0 0 #fff}
.nav-home{margin-bottom:4px}
.nav-group-head{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:#e9eef5;padding:8px 10px;border-radius:8px;font-weight:600;font-size:13.5px;text-align:left;white-space:nowrap}
.nav-group-head:hover{background:rgba(255,255,255,.06)}
.nav-group-head .chev{margin-left:auto;font-size:11px;color:#8698b1;transition:transform .15s}
.nav-group.open>.nav-group-head .chev{transform:rotate(180deg)}
.nav-group.has-active>.nav-group-head{color:var(--sp-gold)}
.nav-group-body{display:none;padding:2px 0 6px 14px;margin-left:12px;border-left:1px solid rgba(255,255,255,.1)}
.nav-group.open>.nav-group-body{display:block}
.nav-group-body .nav-link .bi{font-size:13px;opacity:.8}
.nav-empty{color:#8698b1;padding:8px 10px}
.sidebar.filtering .nav-group-body{display:block}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;transition:margin-left .18s}
.content{padding:clamp(12px,1.6vw,26px);width:100%;max-width:none}
.sidebar-backdrop{display:none}
/* collapsed rail (desktop) */
.sidebar-rail .sidebar{width:var(--rail-w)}
.sidebar-rail .main{margin-left:var(--rail-w)}
.sidebar-rail .sidebar .brand-text,.sidebar-rail .nav-filter,.sidebar-rail .sidebar .nav-link span,.sidebar-rail .sidebar .nav-group-head span,.sidebar-rail .sidebar .nav-group-head .chev,.sidebar-rail .sidebar .nav-group-body{display:none!important}
.sidebar-rail .sidebar-top{flex-direction:column;gap:6px;padding:12px 0 8px}
.sidebar-rail .nav-groups{padding:2px 8px}
.sidebar-rail .nav-link,.sidebar-rail .nav-group-head{justify-content:center;padding:9px 0}
.sidebar-rail .nav-group-head .bi:first-child,.sidebar-rail .nav-link .bi{font-size:17px}
/* phones and tablets: off-canvas menu */
@media (max-width:991px){
  .sidebar{transform:translateX(-100%);width:min(300px,86vw)!important;box-shadow:0 0 30px rgba(0,0,0,.25)}
  .sidebar.open{transform:none}
  .sidebar.open+.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,48,84,.35);z-index:1035}
  .main,.sidebar-rail .main{margin-left:0}
  .sidebar-rail .sidebar .brand-text,.sidebar-rail .nav-filter,.sidebar-rail .sidebar .nav-link span,.sidebar-rail .sidebar .nav-group-head span,.sidebar-rail .sidebar .nav-group-head .chev{display:revert!important}
  .topbar{padding:10px 14px}
}
@media (min-width:1800px){body{font-size:15px}}
/* split view: details beside a live document preview */
.doc-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:1200px){.doc-split{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)}}
.doc-preview{position:sticky;top:72px}
.doc-preview .frame{height:calc(100vh - 170px);min-height:480px;background:#525659;border-radius:0 0 12px 12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.doc-preview iframe,.doc-preview embed{width:100%;height:100%;border:0;background:#fff}
.doc-preview img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.doc-preview .empty{color:#d7dce2;text-align:center;padding:24px}
@media (max-width:1199px){.doc-preview{position:static}.doc-preview .frame{height:70vh}}

/* ---------------------------------------------------------------- 3.2: hover-reveal menu, notifications, mobile */
/* Desktop: a menu group opens as a panel beside the menu (pointing or clicking), not as a list inside it. The menu
   itself keeps its width (full or icon rail); phones and tablets keep the slide-in menu with groups that expand. */
@media (min-width:992px){
  .sidebar-rail .nav-group.open>.nav-group-body{display:none}
  .nav-group.fly>.nav-group-head{background:rgba(255,255,255,.1);color:#fff}
  .nav-group.fly>.nav-group-body{display:block!important;position:fixed;width:264px;max-height:calc(100vh - 16px);overflow-y:auto;margin:0;padding:4px 6px 8px;border:0;
    background:var(--sp-navy-2);border-radius:10px;box-shadow:0 14px 36px rgba(8,24,44,.4);z-index:1060;scrollbar-width:thin}
  .nav-group.fly>.nav-group-body::before{content:attr(data-label);display:block;padding:9px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9fb0c6}
  .sidebar.filtering .nav-group>.nav-group-body{display:block}
  .sidebar-rail .nav-group.fly .nav-group-body .nav-link span{display:revert!important}
  .sidebar-rail .nav-group.fly .nav-group-body .nav-link{justify-content:flex-start;padding:7px 10px}
  .sidebar-rail .nav-group.fly .nav-group-body .nav-link .bi{font-size:13px}
}
.rail-toggle .pin-on{display:none}
html:not(.sidebar-rail) .rail-toggle .pin-on{display:inline;color:var(--sp-gold)}
html:not(.sidebar-rail) .rail-toggle .pin-off{display:none}
.sidebar-rail .nav-group.has-active>.nav-group-head{background:rgba(255,255,255,.08)}
/* top bar */
.user-btn{display:inline-flex;align-items:center;gap:8px}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sp-blue);color:#fff;font-weight:700;font-size:12px}
.notif-btn{width:36px;height:32px;display:inline-grid;place-items:center}
.notif-count{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#dc3545;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;border:2px solid #fff}
.notif-menu{width:min(380px,94vw);overflow:hidden;border-radius:12px;border:1px solid var(--sp-line);box-shadow:0 12px 32px rgba(15,48,84,.16)}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--sp-line)}
.notif-list{max-height:min(420px,60vh);overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:10px 14px;color:inherit;text-decoration:none;border-bottom:1px solid var(--sp-line)}
.notif-item:hover{background:var(--sp-bg)}
.notif-item .ni{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e8f1fb;color:var(--sp-blue)}
.notif-item.unread{background:#f7fbff}
.notif-item.unread .nt{font-weight:700}
.notif-item .nb{font-size:12.5px;color:var(--sp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-item .nw{font-size:11.5px;color:var(--sp-muted)}
.notif-empty{padding:22px;text-align:center;color:var(--sp-muted)}
.notif-all{display:block;text-align:center;padding:9px;font-weight:600;text-decoration:none}
/* page loading bar */
.page-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--sp-blue),var(--sp-blue-2));z-index:2000;transition:width .4s ease,opacity .3s}
.page-progress.go{width:70%}
/* tables: sticky headers, readable rows */
.table thead th{position:sticky;top:0;background:#fff;z-index:1;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--sp-muted);font-weight:600}
.table-responsive{max-height:none}
/* phones */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1045;display:flex;background:#fff;border-top:1px solid var(--sp-line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(15,48,84,.06)}
.bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;border:0;background:transparent;color:var(--sp-muted);font-size:11px;text-decoration:none;border-radius:10px}
.bottom-nav .bi{font-size:20px}
.bottom-nav .active{color:var(--sp-blue)}
.bottom-nav .notif-count{top:-4px;right:-10px}
@media (max-width:991px){
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .topbar{gap:8px}
  .topbar-search{min-width:0}
  .page-head{align-items:flex-start}
  .page-head h1{font-size:19px}
  .kpi .value{font-size:18px}
  input.form-control,select.form-select,textarea.form-control{font-size:16px}   /* no zoom-on-focus on iPhone */
  .btn{min-height:36px}
  .card-header{padding:.6rem .85rem}
}
/* Phones: list tables become compact two-line rows (built by app.js); the table stays for wider screens. */
.mlist{display:none}
@media (max-width:640px){
  table.has-mlist{display:none}
  .table-responsive:has(table.has-mlist){overflow:visible}
  .mlist{display:block;margin:0}
  .mrow{display:block;position:relative;padding:9px 12px;border-bottom:1px solid var(--sp-line);color:inherit;text-decoration:none;background:#fff}
  .mrow:last-child{border-bottom:0}
  a.mrow:active,.mrow.tap:active{background:var(--sp-bg)}
  .mrow .l1,.mrow .l2{display:flex;align-items:baseline;gap:8px;min-width:0}
  .mrow .l1 .p{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mrow .l1 .p a{color:inherit;text-decoration:none}
  .mrow .l1 .amt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;white-space:nowrap}
  .mrow .l2{margin-top:1px;font-size:13px}
  .mrow .l2 .s{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-text)}
  .mrow .l2 .s a{color:inherit;text-decoration:none}
  .mrow .l2 .badge{font-size:10.5px}
  .mrow .l3{font-size:12px;color:var(--sp-muted);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
  .mrow .l3 b{font-weight:600;color:#556274}
  .mrow .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .mrow .acts .btn{min-height:30px;padding:2px 10px;font-size:12.5px}
  .mrow.has-link{padding-right:28px}
  .mrow.has-link::after{content:"\F285";font-family:"bootstrap-icons";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#b3bdc9;font-size:13px}
  .mrow.total{background:var(--sp-bg);font-weight:600}
  .mrow.empty{color:var(--sp-muted);text-align:center;padding:16px}
  .card>.mlist,.card .table-responsive>.mlist{border-radius:0 0 12px 12px;overflow:hidden}
}
@media print{.bottom-nav,.notif,.page-progress{display:none!important}}

/* ---------------------------------------------------------------- phone menu sheet (Create circles + Go to tiles) */
.msheet{position:fixed;inset:0;z-index:1060}
.msheet-backdrop{position:absolute;inset:0;background:rgba(15,30,50,.45);opacity:0;transition:opacity .2s}
.msheet.show .msheet-backdrop{opacity:1}
.msheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;padding:6px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(15,48,84,.2)}
.msheet.show .msheet-panel{transform:none}
.msheet-grab{width:42px;height:5px;border-radius:3px;background:#d5dbe3;margin:4px auto 8px}
.msheet-head{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.msheet-head h2{font-size:20px;margin:0;flex:1}
.msheet-x,.msheet-back{border:0;background:transparent;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--sp-text)}
.msheet-x:active,.msheet-back:active{background:var(--sp-bg)}
.msheet-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-muted);margin:14px 0 10px}
.qa-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.qa-row::-webkit-scrollbar{display:none}
.qa{flex:0 0 auto;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--sp-text)}
.qa-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;box-shadow:0 4px 12px rgba(15,48,84,.18)}
.qa:active .qa-dot{transform:scale(.94)}
.qa-l{font-size:12.5px;text-align:center;line-height:1.2}
.t-blue{background:#2196F3}.t-sky{background:#0d8bd1}.t-navy{background:#003C8F}.t-green{background:#1f9d55}
.t-pink{background:#d63384}.t-gold{background:#F5C518;color:#003C8F}.t-teal{background:#0aa2a5}.t-violet{background:#6f42c1}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:360px){.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:86px;padding:12px 4px;min-width:0;overflow-wrap:anywhere;hyphens:auto;border:1px solid var(--sp-line);border-radius:14px;background:#fff;color:var(--sp-text);text-decoration:none;font-size:12.5px;line-height:1.2;text-align:center;box-shadow:0 1px 2px rgba(15,48,84,.04)}
.tile .bi{font-size:22px;color:#4a5a70}
.tile span{max-width:100%;font-size:12px}
.tile:active{background:var(--sp-bg)}
.tile.active{border-color:var(--sp-blue);background:#eef6ff}
.tile.active .bi{color:var(--sp-blue)}
body.sheet-open{overflow:hidden}
@media (min-width:992px){.msheet{display:none!important}}
/* phone filter bar + filter sheet */
.fbar{display:flex;gap:8px;margin:0 0 8px}
.fbar .form-control{flex:1;min-width:0;height:40px;border-radius:10px}
.fbtn{position:relative;height:40px;min-width:44px;border-radius:10px;border:1px solid var(--sp-line);background:#fff;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.fcount{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--sp-blue);color:#fff;font-size:11px;font-weight:700;line-height:18px;padding:0 5px}
.fchips{display:flex;gap:6px;overflow-x:auto;margin:0 0 10px;padding-bottom:2px;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;font-size:12px;padding:4px 10px;border-radius:14px;background:#e8f1fb;color:#0b4f8a;white-space:nowrap;text-decoration:none}
.fchip.clear{background:transparent;color:var(--sp-muted);text-decoration:underline}
.fsheet .msheet-panel{display:flex;flex-direction:column;padding-bottom:0}
.fsheet-body{flex:1;overflow-y:auto;padding-bottom:8px}
.fsheet-body .in-sheet{border:0;box-shadow:none;background:transparent;margin:0!important}
.fsheet-body .in-sheet.card>.card-body,.fsheet-body .in-sheet .card-body{padding:0}
.fsheet-body form.filters>[class*=col]{flex:0 0 100%;max-width:100%;width:100%}
.fsheet-foot{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--sp-line)}
.fsheet-foot .btn{height:44px;display:flex;align-items:center;justify-content:center}
.fsheet-lbl{font-size:12px;color:var(--sp-muted);margin:0 0 3px 2px;text-transform:capitalize}
/* phones: status tabs scroll sideways in one row */
@media (max-width:767px){
  .content .nav-pills,.content .nav-tabs{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap;margin-left:-4px;margin-right:-4px;padding:0 4px 2px}
  .content .nav-pills::-webkit-scrollbar,.content .nav-tabs::-webkit-scrollbar{display:none}
  .content .nav-pills .nav-link{border-radius:16px;background:#fff;border:1px solid var(--sp-line);margin-right:6px;padding:4px 12px!important}
  .content .nav-pills .nav-link.active{background:var(--sp-blue);border-color:var(--sp-blue)}
  .page-head>.d-flex,.page-head>div:last-child{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}

/* ---------------------------------------------------------------- navigation: back, module bar, quick switcher */
.topwrap{position:sticky;top:0;z-index:1020}
.topwrap .topbar{position:static}
.btn-back{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:9px;background:var(--sp-bg);color:var(--sp-text);text-decoration:none;font-size:18px}
.btn-back:hover,.btn-back:focus-visible{background:#e6ebf2;color:var(--sp-navy)}
.modbar{display:flex;align-items:stretch;gap:12px;height:44px;padding:0 22px;background:var(--sp-surface);border-bottom:1px solid var(--sp-line)}
.modbar-title{display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid var(--sp-line);font-family:'Archivo',system-ui,sans-serif;font-weight:700;color:var(--sp-navy);white-space:nowrap}
.modbar-scroll{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.modbar-scroll::-webkit-scrollbar{display:none}
.modbar-link{display:flex;align-items:center;padding:0 12px;white-space:nowrap;color:var(--sp-muted);text-decoration:none;font-weight:600;font-size:13px;border-bottom:2px solid transparent;margin-bottom:-1px}
.modbar-link:hover{color:var(--sp-text)}
.modbar-link.active{color:var(--sp-blue);border-bottom-color:var(--sp-blue)}
.qs-btn{align-items:center;gap:8px;border:1px solid var(--sp-line);background:var(--sp-surface);border-radius:8px;padding:5px 8px 5px 10px;color:var(--sp-muted);font-size:13px;white-space:nowrap}
.qs-btn:hover{color:var(--sp-text);border-color:#cfd6df}
.qs-btn kbd,.qs kbd{background:var(--sp-bg);color:var(--sp-muted);border:1px solid var(--sp-line);border-radius:5px;padding:0 5px;font-size:11px;font-family:'IBM Plex Mono',monospace;box-shadow:none}
.qs{position:fixed;inset:0;z-index:1090;display:flex;justify-content:center;align-items:flex-start;padding:10vh 12px 12px}
.qs[hidden]{display:none}
.qs-backdrop{position:absolute;inset:0;background:rgba(15,48,84,.38)}
.qs-panel{position:relative;width:min(600px,100%);background:var(--sp-surface);border-radius:14px;box-shadow:0 24px 60px rgba(15,48,84,.28);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.qs-input{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sp-line);font-size:18px;color:var(--sp-muted)}
.qs-input input{flex:1;border:0;outline:none;font-size:16px;background:transparent;color:var(--sp-text)}
.qs-list{overflow-y:auto;padding:6px}
.qs-sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);padding:10px 10px 4px;font-weight:600}
.qs-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--sp-text);text-decoration:none}
.qs-item i{color:var(--sp-muted);width:18px;text-align:center}
.qs-item .g{margin-left:auto;font-size:12px;color:var(--sp-muted);white-space:nowrap}
.qs-item.on,.qs-item:hover{background:var(--sp-tint);color:var(--sp-navy)}
.qs-item.on i{color:var(--sp-blue)}
.qs-empty{padding:18px;color:var(--sp-muted);text-align:center}
.qs-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--sp-line);font-size:12px;color:var(--sp-muted);flex-wrap:wrap}
@media (max-width:991.98px){.modbar{padding:0 10px;height:42px}.modbar-title{display:none}.btn-back{width:34px;height:34px}}
@media print{.modbar,.btn-back,.qs-btn,.qs{display:none!important}.topwrap{position:static}}

/* module bar arrows (only when the tabs overflow) */
.modbar{gap:6px}
.modbar-title{margin-right:6px}
.modbar-arrow{flex:0 0 auto;align-self:center;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--sp-line);border-radius:8px;background:var(--sp-surface);color:var(--sp-text);padding:0}
.modbar-arrow:hover{background:var(--sp-bg);color:var(--sp-blue)}
.modbar-arrow[hidden]{display:none}
.modbar-scroll.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.modbar-scroll.no-fade-r:not(.fade-l){-webkit-mask-image:none;mask-image:none}
.modbar-scroll.fade-l.no-fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.modbar-scroll{scroll-behavior:smooth}

/* ---------------------------------------------------------------- phones: less text (app.js "phones: less text") */
.clamp-more{display:none}
@media (max-width:640px){
  .page-head{margin-bottom:10px;gap:8px}
  .page-head.ph-inline{flex-wrap:nowrap;align-items:flex-start}
  .page-head.ph-inline>div:first-child{flex:1;min-width:0}
  .page-head .btn-icon{min-width:36px;padding-left:8px;padding-right:8px}
  .clamp{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}
  .clamp-1{-webkit-line-clamp:1}.clamp-2{-webkit-line-clamp:2}
  .clamp.clamp-open{-webkit-line-clamp:unset;display:block}
  .clamp-more{display:inline;border:0;background:none;padding:0 0 0 2px;margin:0;color:var(--sp-blue);font-size:12px;font-weight:600;line-height:1.2}
  .clamp-self{cursor:pointer}
  .alert{padding:.55rem .75rem;font-size:13px}
  /* KPI tiles as a list */
  .kpi-stack{--bs-gutter-x:0;--bs-gutter-y:0;gap:0!important;margin-left:0;margin-right:0}
  .kpi-stack:not(.row){display:flex!important;flex-direction:column}
  .kpi-stack>[class*=col]{flex:0 0 100%;max-width:100%;width:100%;padding:0;margin:0}
  .kpi-stack .kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:center;border-radius:0;border-bottom-width:0;padding:9px 14px;height:auto}
  .kpi-stack>:first-child .kpi,.kpi-stack>.kpi:first-child{border-radius:12px 12px 0 0}
  .kpi-stack>:last-child .kpi,.kpi-stack>.kpi:last-child,.kpi-stack>:nth-last-child(2):has(+.kpi-allclear) .kpi{border-radius:0 0 12px 12px;border-bottom-width:1px}
  .kpi-stack>:only-child .kpi,.kpi-stack>.kpi:only-child{border-radius:12px}
  .kpi-stack .kpi>.label{grid-column:1;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;color:var(--sp-text);line-height:1.25}
  .kpi-stack .kpi>.value{grid-column:2;grid-row:1/span 3;align-self:center;font-size:16px;margin:0;text-align:right!important;white-space:nowrap}
  .kpi-stack .kpi>:not(.label):not(.value){grid-column:1;font-size:12px;margin:0}
  .kpi-stack .kpi>.rms-d{justify-self:start}
  .kpi-stack .kpi-danger,.kpi-stack .kpi-warning,.kpi-stack .kpi-success,.kpi-stack .kpi.accent{border-left-width:4px}
  .kpi-stack .kpi-zero{display:none}
  .kpi-stack.show-zero .kpi-zero{display:block}
  .kpi-allclear{display:flex;align-items:center;gap:6px;width:100%;border:1px solid var(--sp-line);border-top:0;border-radius:0 0 12px 12px;background:#f7fbf8;color:#1f6b45;font-size:13px;padding:9px 14px;text-align:left}
  .kpi-allclear span{margin-left:auto;color:var(--sp-blue);font-weight:600}
  .kpi-stack:has(.kpi-allclear) .kpi{border-radius:0!important;border-bottom-width:0!important}
  .kpi-stack:has(.kpi-allclear)>:first-child .kpi{border-radius:12px 12px 0 0!important}
  .kpi-stack.row:has(.kpi-allclear){margin-bottom:16px!important}
}
/* 3.19 icon rail with names: each section's name sits under its icon (desktop). */
@media (min-width:992px){
  :root{--rail-w:92px}
  .sidebar-rail .nav-groups>.nav-link,.sidebar-rail .nav-group-head{flex-direction:column;gap:0;padding:8px 2px}
  .sidebar-rail .nav-groups>.nav-link>span,.sidebar-rail .nav-group-head>span{display:block!important;font-size:10.5px;line-height:1.15;white-space:normal;text-align:center;margin-top:3px;font-weight:600;overflow:visible}
  .sidebar-rail .nav-groups{padding:2px 4px}
}

/* ---------------------------------------------------------------- dashboard (3.28) */
.dash-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-muted);font-weight:600}
.dash-big{font-family:'IBM Plex Mono',monospace;font-size:clamp(28px,3.2vw,40px);font-weight:500;color:var(--sp-navy);line-height:1.15;margin-top:2px}
.dash-mini{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px 20px;font-size:12px}
.dash-mini span{display:block;color:var(--sp-muted)}.dash-mini b{font-size:15px;font-weight:500;text-align:left;display:block}
.chg{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.chg-vs{font-weight:500;opacity:.8}
.chg-good{background:#e7f6ee;color:#11733f}.chg-bad{background:#fdecea;color:#b42318}.chg-flat{background:#eef1f5;color:#4b5565}
.dash-branches .chg{padding:1px 6px;font-size:11.5px}
.dash-chart{width:100%;height:136px;margin-top:14px;overflow:visible}
.dash-chart polyline{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dash-chart .l-week{stroke:#9fb3cc;stroke-dasharray:5 5;stroke-width:2}
.dash-chart .l-today{stroke:var(--sp-blue)}
.dash-chart text{font-size:11px;fill:var(--sp-muted);font-family:'Manrope',sans-serif}
.dash-legend{font-size:12px;color:var(--sp-muted);display:flex;align-items:center;gap:6px}
.dash-legend span{display:inline-block;width:18px;height:0;border-top:3px solid var(--sp-blue)}.dash-legend .k-week{border-top:2px dashed #9fb3cc}
.dash-act .list-group-item{padding:10px 16px}
.dash-count{min-width:52px;text-align:center;font-size:18px;font-weight:600;color:var(--sp-blue);background:var(--sp-tint);border-radius:10px;padding:6px 8px}
.dash-done{font-size:34px;color:#198754;line-height:1}
.dash-group .card-header{display:flex;align-items:center;gap:8px}
.dash-row{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:start;padding:10px 14px}
.dash-dot{width:8px;height:8px;border-radius:50%;background:#c9d4e3;margin-top:6px}.dash-dot.d-red{background:#dc3545}.dash-dot.d-amber{background:var(--sp-amber)}
.dash-lbl{font-size:13px;font-weight:500;line-height:1.3}.dash-lbl small{display:block;color:var(--sp-muted);font-weight:400;font-size:12px;margin-top:2px}
.dash-val{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.dash-val b{font-size:15px;font-weight:500}
.dash-val .chg{font-size:11px;padding:1px 6px}.dash-val .chg-vs{display:none}
.dash-clear{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:12px;padding:10px 14px;font-size:12.5px}
.dash-clear-h{font-weight:700;color:#198754;margin-right:6px}
.dash-clear a{color:#33608f;background:#f1f6fc;border-radius:999px;padding:3px 10px;text-decoration:none}
.dash-clear a::before{content:'✓ ';color:#198754}
.dash-clear a:hover{background:var(--sp-tint)}

/* ---------------------------------------------------------------- credits footer (Gustolix) */
.main{display:flex;flex-direction:column;min-height:100vh}
.main>.content{flex:1}
.app-foot{position:sticky;bottom:0;z-index:1010;display:flex;justify-content:space-between;align-items:center;gap:12px;height:26px;padding:0 clamp(12px,1.6vw,26px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-top:1px solid var(--sp-line);font-size:11.5px;color:var(--sp-muted);white-space:nowrap;overflow:hidden}
.app-foot-l{overflow:hidden;text-overflow:ellipsis}
.gx{display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:12px;color:#0A84E8;margin:0 2px 0 4px;letter-spacing:-.02em}
.gx i{font-style:normal;color:#E6B800;font-weight:800}
.gx-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:700;color:#E8173A;letter-spacing:.01em;margin-right:3px}
.auth-credit{font-size:12px;color:#c9dcf7}
.auth-credit .gx i{color:#FFE14D}.auth-credit .gx{color:#7CC4FF}.auth-credit .gx-name{color:#FF5C77}
@media (max-width:991.98px){.app-foot{position:static;margin-bottom:calc(58px + env(safe-area-inset-bottom));height:auto;padding:6px 12px;flex-wrap:wrap;white-space:normal;justify-content:center}
  .content{padding-bottom:12px}}
@media print{.app-foot{display:none!important}}
.dash-chart{height:120px;margin-top:16px}
.dash-axis{position:relative;height:16px;font-size:11px;color:var(--sp-muted);margin-top:2px}
.dash-axis span{position:absolute;transform:translateX(-50%)}.dash-axis span:first-child{transform:none}

/* items supplied pop-up (invoice page) */
.rms-items-modal{max-width:min(1400px,96vw)}
@media (max-width:575.98px){.rms-items-modal{margin:.5rem;max-width:none}}
#itemsModal .modal-header .nav-link{white-space:nowrap;padding:.25rem .7rem}

/* ---------------------------------------------------------------- 3.37: sidebar — workspace, pinned, recent, counts, user */
.ws{display:flex;align-items:center;gap:10px;margin:4px 10px 6px;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;min-width:0}
.ws:hover{background:rgba(255,255,255,.1);color:#fff}
.ws-logo{flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:#fff;color:var(--sp-navy);display:grid;place-items:center;font:800 13px/1 'Archivo',sans-serif;overflow:hidden}
.ws-logo img{width:100%;height:100%;object-fit:contain;padding:2px}
.ws-b{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ws-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-sub{font-size:11.5px;color:#9fb0c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-lic{display:inline-block;border-radius:20px;padding:0 7px;font-weight:600;font-size:11px}
.ws-lic.info{background:rgba(142,197,255,.18);color:#bfe0ff}.ws-lic.warn{background:rgba(245,158,11,.22);color:#ffd68a}.ws-lic.danger{background:rgba(239,68,68,.25);color:#ffc2c2}
.nav-kbd{font:600 10.5px/1 'IBM Plex Mono',monospace;color:#8698b1;border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:2px 5px;background:transparent}
.nav-sec{margin:2px 0 6px}
.nav-sec-h{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 3px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7f93ad}
.nav-sec-h .bi{font-size:10px;margin-right:3px}
.nav-pins .nav-sec-h .bi{color:var(--sp-gold-2)}
.nav-fold{border:0;background:transparent;color:#7f93ad;padding:0 2px;line-height:1}
.nav-fold:hover{color:#fff}
.nav-item{position:relative}
.nav-item .nav-link{padding-right:30px}
.nav-star{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#6f84a0;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:11px;opacity:0;transition:opacity .12s}
.nav-item:hover .nav-star,.nav-star:focus-visible,.nav-star.on{opacity:1}
.nav-star:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-star.on{color:var(--sp-gold-2)}
.nav-count,.nav-gcount{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:10px;background:#EF4444;color:#fff;font:700 10.5px/1.5 'Manrope',sans-serif;text-align:center}
.nav-gcount{margin-right:6px}
.nav-item .nav-count{margin-right:2px}
.nav-link:has(.nav-count:not([hidden])) span{flex:1}
.sidebar.filtering .nav-sec,.sidebar.filtering .nav-all-h{display:none!important}
.sidebar-foot{display:flex;align-items:center;gap:9px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08);color:#e9eef5}
.sidebar-foot .avatar{flex:0 0 30px;width:30px;height:30px;font-size:13px;background:rgba(255,255,255,.14)}
.sf-b{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.sf-n{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-r{font-size:11.5px;color:#8fa3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-btn{color:#9fb0c6;width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.sf-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-rail .ws{justify-content:center;margin:4px 8px 8px;padding:6px 0;background:transparent;border-color:transparent}
.sidebar-rail .ws-b,.sidebar-rail .nav-sec-h,.sidebar-rail .nav-recent,.sidebar-rail .nav-star,.sidebar-rail .sf-b,.sidebar-rail .sf-btn,.sidebar-rail .nav-count,.sidebar-rail .nav-kbd{display:none!important}
.sidebar-rail .nav-pins{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:6px}
.sidebar-rail .nav-gcount{position:absolute;margin:0;transform:translate(10px,-9px);min-width:16px;padding:0 4px;font-size:9.5px}
.sidebar-rail .nav-group-head{position:relative}
.sidebar-rail .sidebar-foot{justify-content:center;padding:10px 0}
@media (max-width:991px){.sidebar-rail .ws-b,.sidebar-rail .nav-sec-h,.sidebar-rail .nav-recent,.sidebar-rail .sf-b,.sidebar-rail .sf-btn{display:revert!important}.nav-star{opacity:1}}

/* licence strip under the top bar */
.lic-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:10px;padding:8px 12px;margin-bottom:14px;font-size:13.5px}
.lic-strip.warn{background:#FFF6E5;color:#7A4B00;border:1px solid #FBD38D}.lic-strip.danger{background:#FDECEC;color:#8E1B1B;border:1px solid #F5B5B5}.lic-strip.info{background:var(--sp-tint);color:#123a6b;border:1px solid #cfe0fb}
.lic-strip a{font-weight:700}

/* ---------------------------------------------------------------- setup wizard */
.setup-body{background:radial-gradient(1200px 600px at 50% -10%,rgba(61,139,255,.35),transparent 60%),linear-gradient(165deg,var(--sp-blue) 0%,var(--sp-navy-2) 45%,var(--sp-navy) 100%);min-height:100vh}
.setup-wrap{max-width:1040px;margin:0 auto;padding:22px 16px 30px;display:flex;flex-direction:column;align-items:stretch}
.setup-top{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:16px}
.setup-top .brand{display:flex;align-items:center;gap:10px;font-size:19px;color:#fff}
.setup-top .brand b{color:var(--sp-sky)}
.setup-top-r{font-size:13px;color:#cfe0f7}
.setup-flash{max-width:1040px}
.setup-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(2,22,56,.35);display:grid;grid-template-columns:230px minmax(0,1fr);overflow:hidden}
.setup-card.setup-inline{box-shadow:none;border:1px solid var(--sp-line)}
.setup-narrow{display:block;max-width:460px;margin:6vh auto 0;padding:28px}
.setup-steps{list-style:none;margin:0;padding:22px 12px;background:#F6F8FC;border-right:1px solid var(--sp-line);counter-reset:s}
.setup-steps li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--sp-muted);text-decoration:none;font-weight:600}
.setup-steps li a:hover{background:#EDF2FA;color:var(--sp-text)}
.setup-steps .n{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #C9D3E1;font-size:12px;background:#fff}
.setup-steps li.done .n{background:#E7F6EC;border-color:#9AD5AE;color:#15803D}
.setup-steps li.cur a{background:#fff;color:var(--sp-text);box-shadow:0 1px 3px rgba(16,40,80,.08)}
.setup-steps li.cur .n{background:var(--sp-blue);border-color:var(--sp-blue);color:#fff}
.setup-body-form{padding:26px 28px 20px;display:flex;flex-direction:column;min-height:520px}
.setup-h{font-size:21px;margin:0 0 4px}
.setup-p{color:var(--sp-muted);margin-bottom:18px;max-width:640px}
.setup-foot{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--sp-line);margin-top:24px}
.setup-logo{display:flex;gap:12px;align-items:flex-start}
.setup-logo .pv{flex:0 0 72px;width:72px;height:72px;border-radius:12px;border:1px dashed #C9D3E1;display:grid;place-items:center;color:#9AA7B8;font-size:24px;overflow:hidden;background:#fff}
.setup-logo .pv img{width:100%;height:100%;object-fit:contain}
.setup-colors{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.setup-colors .sw{position:relative;cursor:pointer}
.setup-colors .sw input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.setup-colors .sw span,.setup-colors .sw input[type=color]{display:block;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);border:0;padding:0;cursor:pointer}
.setup-colors .sw input[type=radio]:checked+span,.setup-colors .sw-custom input[type=radio]:checked~input[type=color]{outline:3px solid var(--sp-text);outline-offset:2px}
.setup-colors .sw input[type=color]{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.setup-q{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:14px 0;border-top:1px solid var(--sp-line)}
.setup-q .seg{display:flex;gap:6px;flex:0 0 auto}
.setup-q .seg .btn{min-width:62px}
.setup-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.setup-mod{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--sp-line);border-radius:12px;padding:12px;cursor:pointer;transition:border-color .12s,background .12s}
.setup-mod:hover{border-color:#B9C8DD}
.setup-mod input{margin-top:3px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--sp-blue)}
.setup-mod:has(input:checked){border-color:var(--sp-blue);background:var(--sp-tint)}
.setup-mod .b{display:flex;flex-direction:column;gap:2px}
.setup-mod .t{font-weight:700}
.setup-mod .d{font-size:12.5px;color:var(--sp-muted)}
.setup-mod .lk{font-size:11.5px;color:#8A6D00;font-weight:600}
.setup-mod.locked{opacity:.6;cursor:not-allowed;background:#FAFBFD}
.setup-br td{vertical-align:middle}
.setup-addon{border:1px solid var(--sp-line);border-radius:12px;padding:14px;margin-bottom:12px}
.setup-addon .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
@media (max-width:767px){.setup-card{grid-template-columns:1fr}.setup-steps{display:flex;overflow-x:auto;gap:4px;padding:10px;border-right:0;border-bottom:1px solid var(--sp-line)}.setup-steps li a{white-space:nowrap;padding:6px 8px}.setup-steps .t{display:none}.setup-steps li.cur .t{display:inline}.setup-body-form{padding:18px 16px;min-height:0}.setup-q{flex-direction:column;gap:8px}}

/* ---------------------------------------------------------------- licence page */
.lic-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-radius:14px;padding:20px 22px;margin-bottom:16px;color:#fff;background:linear-gradient(135deg,var(--sp-navy-2),var(--sp-navy))}
.lic-hero.lic-success{background:linear-gradient(135deg,#0E7A4B,#064E3B)}.lic-hero.lic-warning{background:linear-gradient(135deg,#B45309,#7C2D12)}.lic-hero.lic-danger{background:linear-gradient(135deg,#B91C1C,#7F1D1D)}
.lic-plan{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.lic-client{font:800 24px/1.2 'Archivo',sans-serif}
.lic-meta{font-size:13px;opacity:.8;margin-top:2px}
.lic-days{text-align:right}.lic-days .n{font:800 40px/1 'Archivo',sans-serif}.lic-days .l{font-size:13px;opacity:.85}
.lic-mods{list-style:none;margin:0;padding:0}
.lic-mods li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--sp-line)}
.lic-mods li:last-child{border-bottom:0}
.lic-mods .ic{color:#16A34A;font-size:18px}.lic-mods li.out .ic{color:#9AA7B8}
.lic-mods .b{display:flex;flex-direction:column;flex:1;min-width:0}.lic-mods .b span{font-size:12.5px;color:var(--sp-muted)}
.lic-mods .st{font-size:12px;font-weight:600;color:var(--sp-muted);white-space:nowrap}
.lic-mods li.out b{color:var(--sp-muted)}
.auth-logo-client{border-radius:16px;background:#fff;object-fit:contain;padding:8px;width:96px;height:96px}
.auth-co{text-align:center;font:700 16px/1.3 'Archivo',sans-serif;margin:-2px 0 14px;color:var(--sp-text)}

/* ---------------------------------------------------------------- 3.38: SmartPay360 logo theme — logo blue #0061DC and white */
.sidebar{background:linear-gradient(180deg,#0061DC 0%,#0059CC 55%,#004EB6 100%);color:#fff}
.sidebar .brand,.sidebar .brand b{color:#fff}
.brand-mark{background-color:#0061DC;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.sidebar .nav-link{color:rgba(255,255,255,.9)}
.sidebar .nav-link .bi{opacity:.95}
.sidebar .nav-link:hover,.nav-group-head:hover{background:rgba(255,255,255,.14);color:#fff}
.sidebar .nav-link.active{background:#fff;color:#0061DC;font-weight:700;box-shadow:0 2px 8px rgba(0,40,110,.25)}
.sidebar .nav-link.active .bi{color:#0061DC;opacity:1}
.nav-group-head{color:#fff}
.nav-group-head .chev,.nav-empty{color:rgba(255,255,255,.7)}
.nav-group.has-active>.nav-group-head{color:#fff;background:rgba(255,255,255,.12)}
.nav-group-body{border-left-color:rgba(255,255,255,.25)}
.nav-filter{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.nav-filter input::placeholder{color:rgba(255,255,255,.72)}
.nav-kbd{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.4)}
.nav-sec-h,.nav-fold{color:rgba(255,255,255,.75)}
.nav-pins .nav-sec-h .bi,.nav-star.on{color:#fff}
.nav-star{color:rgba(255,255,255,.65)}
.nav-star:hover{background:rgba(255,255,255,.18)}
.nav-count,.nav-gcount{background:#fff;color:#0061DC}
.sidebar .nav-link.active .nav-count{background:#0061DC;color:#fff}
.ws{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.ws:hover{background:rgba(255,255,255,.2)}
.ws-logo{color:#0061DC}
.ws-sub,.sf-r{color:rgba(255,255,255,.78)}
.ws-lic.info{background:rgba(255,255,255,.22);color:#fff}.ws-lic.warn{background:#FFE7B3;color:#7A4B00}.ws-lic.danger{background:#FFD5D5;color:#8E1B1B}
.sidebar-foot{border-top-color:rgba(255,255,255,.2);color:#fff}
.sidebar-foot .avatar{background:#fff;color:#0061DC}
.sf-btn{color:rgba(255,255,255,.85)}.sf-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.rail-toggle{color:rgba(255,255,255,.85)}
html:not(.sidebar-rail) .rail-toggle .pin-on{color:#fff}
@media (min-width:992px){
  .nav-group.fly>.nav-group-head{background:rgba(255,255,255,.18);color:#fff}
  .nav-group.fly>.nav-group-body{background:#0057C8;border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 40px rgba(0,40,110,.35)}
  .nav-group.fly>.nav-group-body::before{color:rgba(255,255,255,.75)}
}
.sidebar-rail .nav-pins{border-bottom-color:rgba(255,255,255,.22)}
.auth-wrap,.setup-body{background:radial-gradient(900px 500px at 50% -10%,rgba(255,255,255,.18),transparent 60%),linear-gradient(165deg,#0061DC 0%,#0059CC 55%,#004EB6 100%)}
.setup-top .brand b{color:#fff}

/* ---------------------------------------------------------------- 3.38.1: collapsible sidebar
   Open (default): groups fold open / closed in place. Collapsed: icons only, a group pops out beside the menu. */
.nav-group-body{overflow:hidden}
.nav-group.open>.nav-group-body{animation:navOpen .16s ease-out}
@keyframes navOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sf-collapse{margin-left:2px;border:0;background:rgba(255,255,255,.14);color:#fff;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;transition:background .12s}
.sf-collapse:hover{background:rgba(255,255,255,.26)}
.sf-collapse .bi{transition:transform .18s}
.sidebar-rail .sf-collapse .bi{transform:rotate(180deg)}
.sidebar-rail .sidebar-foot{flex-direction:column;gap:8px}
.sidebar-rail .sidebar-foot .sf-collapse{display:grid!important;margin:0}
@media (max-width:991px){.sf-collapse{display:none}}

/* ---------------------------------------------------------------- 3.39: idle warning */
.idle-warn{position:fixed;inset:0;z-index:2000;background:rgba(0,40,110,.35);display:grid;place-items:center;padding:16px;animation:navOpen .15s ease-out}
.idle-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,40,110,.35);padding:24px;max-width:380px;width:100%;text-align:center}
.idle-ic{width:52px;height:52px;border-radius:50%;background:var(--sp-tint);color:var(--sp-blue);display:grid;place-items:center;font-size:24px;margin:0 auto 10px}
.idle-t{font:700 19px/1.3 'Archivo',sans-serif;margin-bottom:4px}.idle-d{color:var(--sp-muted);margin-bottom:16px}
.idle-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}