/* ZonPay Finance Client — visual skin.
   Ported verbatim from ZonPay_Finance_Owner_Portal_3.html (the Owner Portal's
   master design reference) per the UI/UX Master Rule: the Finance Client must
   look and feel like the same product as the Owner Portal. Do not diverge
   from these tokens/classes without updating the reference first.
   2026-10-17: the owner replaced the shell/dashboard look with a TAXIDO-
   style reference (deep-green sidebar, full-width active row, circular KPI
   icons) - see the "DASHBOARD SHELL" block at the end of this file. Default
   tokens above changed accordingly; tenant branding still overrides them.
   --primary / --sidebar-bg / --body-bg / --text are overwritten at runtime
   by ThemeService from the resolved tenant branding (see theme.js). */

:root{
  /* Sidebar tokens (values from the owner's TAXIDO reference) */
  --sidebar-w:255px;
  --sidebar-w-collapsed:120px;
  --sidebar-bg:linear-gradient(178.98deg,#199675 -453.29%,#212121 91.53%);
  --sb-font:'Inter',sans-serif;
  --sb-accent:var(--primary);
  --sb-text:#ffffff;
  --sb-title:rgba(255,255,255,.7);
  --sb-sub-text:rgba(255,255,255,.55);
  --sb-divider:rgba(255,255,255,.2);
  --sb-hover:rgba(255,255,255,.09);
  --sb-control:#3b4442;
  --sb-connector:#676767;
  --primary:#199675;
  --primary-dark:#13765c;
  --primary-light:#e8f5f0;
  --success:#17a34a;
  --success-light:#e7f8ee;
  --warning:#e08a1c;
  --warning-light:#fdf1e0;
  --danger:#dc2b2b;
  --danger-light:#fce9e9;
  --info:#0891b2;
  --info-light:#e3f6fa;
  --body-bg:#f3f5f9;
  --card-bg:#ffffff;
  --border:#e6e9f0;
  --text:#1c2333;
  --text-muted:#7a8296;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 4px 14px rgba(16,24,40,.08);
}
*{box-sizing:border-box;}
html, body{height:100%; margin:0; padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--body-bg);
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{text-decoration:none; color:var(--primary);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#c7cede;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ===== SIDEBAR =====
   The only sidebar rules in this file (SidebarComponent + NavigationItemView).
   Values reproduce the owner's TAXIDO reference (measured from its live
   stylesheet and the screen recording, 2026-10-17): Inter, Remix-style line
   icons at 18px, 14px/400 labels with .5px tracking, 13px/600 uppercase
   section titles over a 20%-white divider, 3px accent border + 33% accent
   tint for the active/open row, 2px connector + 19px ticks for submenus.
   Colors are tokens (see :root), so tenant branding still applies:
   --sidebar-bg <- branding SidebarColor, --sb-accent <- branding PrimaryColor. */
#sidebar{
  position:fixed; top:0; left:0; bottom:0; z-index:1030;
  width:var(--sidebar-w); display:flex; flex-direction:column;
  background:var(--sidebar-bg); box-shadow:0 4px 35px rgba(32,93,238,.07);
  font-family:var(--sb-font); color:var(--sb-text);
  transition:width .3s, transform .2s ease;
}

/* Header: tenant logo + company name, collapse toggle */
#sidebar .sb-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; border-bottom:1px solid var(--sb-divider); flex-shrink:0;}
#sidebar .sb-brand{display:flex; align-items:center; gap:10px; min-width:0; color:var(--sb-text); text-decoration:none;}
#sidebar .sb-logo{display:block; width:144px; height:28px; object-fit:contain; object-position:left center; flex-shrink:0;}
#sidebar .sb-mark{width:32px; height:32px; border-radius:5px; background:var(--sb-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;}
#sidebar .sb-toggle{width:38px; height:38px; border-radius:5px; border:none; background:var(--sb-control); color:var(--sb-text); align-items:center; justify-content:center; font-size:18px; flex-shrink:0; cursor:pointer;}

/* Search */
#sidebar .sidebar-search{position:relative; padding-inline:15px; margin-block:20px; flex-shrink:0;}
#sidebar .sidebar-search input{width:100%; padding:10px 10px 10px 36px; border:none; border-radius:6px; background-color:var(--sb-control); color:var(--sb-text); font-family:inherit; font-size:14px; line-height:1.5;}
#sidebar .sidebar-search input::placeholder{color:rgba(255,255,255,.9);}
#sidebar .sidebar-search input:focus{background-color:var(--sb-control); color:var(--sb-text); box-shadow:0 0 0 2px color-mix(in srgb, var(--sb-accent) 55%, transparent); outline:none;}
#sidebar .sidebar-search .bi{position:absolute; top:50%; left:25px; transform:translateY(-50%); color:var(--sb-text); font-size:16px; line-height:1; pointer-events:none;}

/* Scrolling menu */
#sidebar .nav-scroll{flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:40px;}
#sidebar .nav-scroll::-webkit-scrollbar{width:5px;}
#sidebar .nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28); border-radius:5px;}
#sidebar .nav-scroll::-webkit-scrollbar-track{background:transparent;}
@supports not selector(::-webkit-scrollbar){ #sidebar .nav-scroll{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent;} }
#sidebar .nav-section-label{position:relative; padding:24px 0 5px 14px; margin-bottom:10px; font-size:13px; font-weight:600; line-height:1.5; letter-spacing:1px; text-transform:uppercase; color:var(--sb-title);}
#sidebar .nav-section-label:first-child{padding-top:0;}
#sidebar .nav-section-label::before{content:''; position:absolute; bottom:0; left:48%; width:calc(100% - 40px); height:1px; background:var(--sb-divider); transform:translateX(-50%);}
#sidebar .sidebar-empty{padding:8px 15px; color:var(--sb-sub-text); font-size:14px;}

/* Top-level rows */
#sidebar .snav-item{position:relative;}
#sidebar .snav-link{display:flex; align-items:center; gap:6px; width:100%; padding:8px 15px; border:none; background:none; color:var(--sb-text); font-size:14px; font-weight:400; letter-spacing:.5px; line-height:1.5; text-align:left; text-decoration:none; white-space:nowrap; cursor:pointer; transition:.3s;}
#sidebar .snav-link > i:first-child{font-size:18px; line-height:1.5; width:18px; text-align:center; flex-shrink:0; color:var(--sb-text);}
#sidebar .snav-link .snav-icon-svg{width:18px; height:18px; object-fit:contain; flex-shrink:0;}
#sidebar .snav-link .label{line-height:1; overflow:hidden; text-overflow:ellipsis;}
#sidebar .snav-link .chev{margin-left:auto; font-size:14px; line-height:1; color:var(--sb-text); transition:transform .2s ease; flex-shrink:0;}
#sidebar .snav-item:hover > .snav-link{background-color:var(--sb-hover);}
#sidebar .snav-item.active > .snav-link, #sidebar .snav-item.open > .snav-link{font-weight:500; border-left:3px solid var(--sb-accent); background-color:color-mix(in srgb, var(--sb-accent) 33%, transparent);}
#sidebar .snav-item.open > .snav-link .chev{transform:rotate(90deg);}
#sidebar .snav-link.disabled, #sidebar .snav-child.disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
#sidebar .snav-link:focus-visible, #sidebar .snav-child:focus-visible, #sidebar .sb-toggle:focus-visible{outline:2px solid #fff; outline-offset:-2px;}

/* Submenus: 2px connector + 19px tick per child */
#sidebar .snav-children{position:relative; margin:6px 0 0 25px; animation:sb-open .3s ease forwards;}
#sidebar .snav-children .snav-children{margin-left:28px;}
#sidebar .snav-children::before{content:''; position:absolute; left:0; top:0; height:100%; border-left:2px solid var(--sb-connector);}
#sidebar .snav-child{position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 12px; padding:6px 16px; border-radius:4px; color:var(--sb-sub-text); font-size:14px; letter-spacing:.7px; line-height:1.5; text-decoration:none; cursor:pointer; transition:all .2s ease;}
#sidebar .snav-child::before{content:''; position:absolute; left:-11px; top:50%; width:19px; transform:translateY(-50%); border-bottom:2px solid var(--sb-connector);}
#sidebar .snav-child:hover{font-weight:500; transform:translateX(2px); color:var(--sb-sub-text);}
#sidebar .snav-child.active{color:var(--sb-text); font-weight:500;}
#sidebar .snav-child .chev{font-size:13px; transition:transform .2s ease;}
#sidebar .snav-child .chev.chev-open{transform:rotate(90deg);}
@keyframes sb-open{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}

/* Desktop collapsed rail (120px) — expands over the page on hover, like the reference */
@media (min-width:992px){
  #sidebar.collapsed{width:var(--sidebar-w-collapsed);}
  #sidebar.collapsed:hover{width:var(--sidebar-w);}
  #sidebar.collapsed:not(:hover) .sb-top{justify-content:center;}
  #sidebar.collapsed:not(:hover) .sb-logo{width:84px; object-position:center;}
  #sidebar.collapsed:not(:hover) .sb-toggle,
  #sidebar.collapsed:not(:hover) .sidebar-search,
  #sidebar.collapsed:not(:hover) .nav-section-label,
  #sidebar.collapsed:not(:hover) .snav-link .label,
  #sidebar.collapsed:not(:hover) .snav-link .chev,
  #sidebar.collapsed:not(:hover) .snav-link .nav-badge,
  #sidebar.collapsed:not(:hover) .snav-children{display:none !important;}
  #sidebar.collapsed:not(:hover) .snav-link{justify-content:center;}
  #main.collapsed{margin-left:var(--sidebar-w-collapsed);}
}

/* Mobile / tablet: off-canvas drawer */
@media (max-width:991.98px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.mobile-open{transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35);}
  #main{margin-left:0 !important;}
}
.sidebar-backdrop{position:fixed; inset:0; background:rgba(10,20,16,.45); z-index:1029;}

/* Shared brand mark/text (LoginLayout, TenantBrandMark) */
.brand-mark{
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#5b8bff);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0;
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;}
.brand-text{color:#fff;font-weight:700;font-size:15.5px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;}
.brand-text small{display:block;color:#8891a8;font-weight:500;font-size:10.5px;letter-spacing:.6px;}

/* Nav badges (dynamic states the static reference doesn't demo, styled with the same tokens) */
.nav-badge{font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:20px; margin-left:6px; letter-spacing:.2px;}
.nav-badge-beta{background:var(--info-light); color:var(--info);}
.nav-badge-soon{background:#232e47; color:#8a93ab;}
.nav-badge-counter{background:var(--danger); color:#fff;}
.nav-favorite{margin-left:auto; color:#f0b23c; font-size:12px;}

/* ===== MAIN ===== */
#main{margin-left:var(--sidebar-w); transition:margin-left .2s ease; min-height:100vh; display:flex; flex-direction:column;}

#topbar{
  height:60px; background:var(--card-bg); border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 20px; gap:14px; position:sticky; top:0; z-index:1020;
}
#topbar .tb-brand{padding-right:14px; border-right:1px solid var(--border); flex-shrink:0;}
.dg th.sortable{cursor:pointer; user-select:none; white-space:nowrap;}
.dg th.sortable:hover{color:var(--primary);}
#topbar .tb-search{position:relative; width:340px;}
#topbar .tb-search input{width:100%; border-radius:8px; background:#f4f6fa; border:1px solid var(--border); font-size:13px; padding:8px 12px 8px 34px;}
#topbar .tb-search input:focus{outline:none; border-color:var(--primary);}
#topbar .tb-search .bi{position:absolute; left:12px; top:9px; color:var(--text-muted); font-size:14px;}
#topbar .tb-search kbd{position:absolute; right:8px; top:6px; font-size:10px; background:#eceff5; color:#8a93ab; border-radius:4px; padding:2px 5px;}
.tb-icon-btn{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#4b5468;
  background:transparent; border:none; font-size:16px; position:relative; cursor:pointer;
}
.tb-icon-btn:hover{background:#f1f3f8;}
.tb-icon-btn .dot{position:absolute; top:6px; right:7px; width:8px;height:8px;background:var(--danger); border-radius:50%; border:2px solid #fff;}
.tb-profile{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 8px 5px 5px;border-radius:8px; border:none; background:none; position:relative;}
.tb-profile:hover{background:#f1f3f8;}
.tb-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#6d93ff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex-shrink:0;}

#content{padding:20px 24px 60px; flex:1;}
.crumb-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.crumb-row .breadcrumb{margin:0; font-size:12.5px;}
.page-title{font-size:20px; font-weight:700; margin:2px 0 0;}
.page-sub{font-size:12.5px; color:var(--text-muted); margin-top:2px;}

/* ===== CARDS / KPIs ===== */
.kpi-card{background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); height:100%;}
.kpi-top{display:flex; justify-content:space-between; align-items:flex-start;}
.kpi-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.kpi-label{color:var(--text-muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;}
.kpi-value{font-size:24px; font-weight:800; margin-top:4px;}
.kpi-delta{font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px; margin-top:6px;}
.up{color:var(--success);} .down{color:var(--danger);}

.card{border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--card-bg); color:var(--text);}
.card-head{padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.card-head h6{margin:0; font-weight:700; font-size:14px;}
.card-head .sub{font-size:11.5px; color:var(--text-muted); font-weight:500;}
.card-body-p{padding:18px;}

/* ===== BUTTONS ===== */
.btn{font-size:13px; font-weight:600; border-radius:8px; padding:7px 14px;}
.btn-sm{font-size:12px; padding:5px 10px;}
.btn-primary{background:var(--primary); border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark); border-color:var(--primary-dark);}
.btn-outline-secondary{color:#4b5468; border-color:var(--border);}
.btn-light-icon{background:#f4f6fa; border:1px solid var(--border); color:#4b5468;}

/* ===== TABLE ===== */
.table-toolbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--border);}
.table-toolbar .flex-fill-search{position:relative; min-width:220px;}
.table-toolbar .flex-fill-search input{padding-left:32px; font-size:12.5px;}
.table-toolbar .flex-fill-search .bi{position:absolute; left:10px; top:8px; font-size:13px; color:var(--text-muted);}
.form-select-sm, .form-control-sm{border-radius:7px; font-size:12.5px;}
.dg-wrap{overflow-x:auto;}
table.dg{width:100%; border-collapse:collapse; font-size:12.8px;}
table.dg thead th{
  background:#f7f8fb; color:#5b6478; text-transform:uppercase; font-size:10.7px; letter-spacing:.4px;
  font-weight:700; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0;
}
table.dg tbody td{padding:11px 14px; border-bottom:1px solid #f0f1f6; vertical-align:middle; white-space:nowrap;}
table.dg tbody tr:hover{background:#f9fafc;}
.dg-cell-primary{font-weight:600; color:var(--text);}
.dg-cell-sub{color:var(--text-muted); font-size:11.5px;}
.avatar-mini{width:28px;height:28px;border-radius:7px;background:var(--primary-light);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;}

.badge-status{font-size:10.8px; font-weight:700; padding:4px 9px; border-radius:20px; letter-spacing:.2px;}
.bs-active{background:var(--success-light); color:var(--success);}
.bs-trial{background:var(--info-light); color:var(--info);}
.bs-suspended{background:var(--danger-light); color:var(--danger);}
.bs-pending{background:var(--warning-light); color:var(--warning);}
.bs-expired{background:#f1f2f6; color:#6b7280;}
.bs-draft{background:#f1f2f6; color:#6b7280;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
.icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#5b6478;font-size:13px; cursor:pointer;}
.icon-btn:hover{background:#f4f6fa; color:var(--primary);}

.table-footer{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; flex-wrap:wrap; gap:10px;}
.pg-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:#fff;font-size:12px;color:#4b5468;}
.pg-btn.active{background:var(--primary); color:#fff; border-color:var(--primary);}

/* Empty / Loading / Error states */
.state-box{padding:60px 20px; text-align:center;}
.state-box .state-icon{width:64px;height:64px;border-radius:16px;background:#f1f3f8;display:flex;align-items:center;justify-content:center;font-size:28px;color:#9aa2b8;margin:0 auto 16px;}
.state-box h6{font-weight:700; margin-bottom:4px;}
.state-box p{color:var(--text-muted); font-size:12.8px; max-width:360px; margin:0 auto 16px;}
.skel{background:linear-gradient(90deg,#eef0f5 25%,#f6f7fa 37%,#eef0f5 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:6px;}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Wizard */
.stepper{display:flex; align-items:center; margin-bottom:26px;}
.step{display:flex; align-items:center; gap:10px; flex:1;}
.step-circle{width:32px;height:32px;border-radius:50%;background:#eef0f6;color:#8a93ab;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; border:2px solid #eef0f6;}
.step.active .step-circle{background:var(--primary); color:#fff; border-color:var(--primary);}
.step.done .step-circle{background:var(--success); color:#fff; border-color:var(--success);}
.step-label{font-size:12.5px; font-weight:600; color:#8a93ab;}
.step.active .step-label, .step.done .step-label{color:var(--text);}
.step-line{flex:1; height:2px; background:#eef0f6; margin:0 6px;}

/* Tabs */
.zn-tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); padding:0 4px; overflow-x:auto;}
.zn-tab{padding:11px 16px; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.zn-tab.active{color:var(--primary); border-color:var(--primary);}

/* Form */
.form-label{font-size:12.3px; font-weight:600; color:#3c4457; margin-bottom:5px;}
.form-hint{font-size:11px; color:var(--text-muted); margin-top:4px;}
.form-control, .form-select{border-radius:8px; border-color:var(--border); font-size:13px; padding:8px 11px;}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);}
.section-title{font-size:13.5px; font-weight:700; margin:22px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.upload-drop{border:1.5px dashed var(--border); border-radius:10px; padding:26px; text-align:center; background:#fafbfd; cursor:pointer;}
.upload-drop:hover{border-color:var(--primary); background:var(--primary-light);}

/* Toast */
.toast-wrap{position:fixed; bottom:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:10px;}
.zn-toast{background:#1c2333; color:#fff; padding:12px 16px; border-radius:9px; font-size:12.8px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-md); min-width:260px; animation:slideIn .2s ease;}
@keyframes slideIn{from{transform:translateX(30px); opacity:0} to{transform:translateX(0); opacity:1}}
.zn-toast.success{border-left:3px solid var(--success);}
.zn-toast.error{border-left:3px solid var(--danger);}

/* Progress bars for monitoring */
.mini-gauge{height:8px; border-radius:5px; background:#eef0f6; overflow:hidden;}
.mini-gauge > div{height:100%; border-radius:5px;}

.help-fab{
  position:fixed; bottom:24px; right:24px; width:48px; height:48px; border-radius:50%;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:var(--shadow-md); cursor:pointer; z-index:1500; border:none;
}

.qa-btn{border:1px dashed var(--border); border-radius:9px; padding:10px 12px; font-size:12px; font-weight:600; color:#4b5468; background:#fff; display:flex; align-items:center; gap:8px; width:100%;}
.qa-btn:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-light);}

.pricing-card{border:1px solid var(--border); border-radius:12px; padding:22px; background:#fff; height:100%; position:relative;}
.pricing-card.popular{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);}
.pricing-card .ribbon{position:absolute; top:-11px; left:22px; background:var(--primary); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:20px;}

@media (max-width: 992px){
  #topbar .tb-search{width:180px;}
}
.progress-thin{height:6px; border-radius:5px;}

/* ===== DARK MODE ===== */
[data-theme="dark"]{--body-bg:#12151f; --card-bg:#1a1f2e; --border:#2a3040; --text:#e6e9f2; --text-muted:#8a93ab;}
[data-theme="dark"] #topbar{background:#161b28; border-color:#2a3040;}
[data-theme="dark"] #topbar .tb-search input{background:#1f2534; color:#e6e9f2; border-color:#2a3040;}
[data-theme="dark"] table.dg thead th{background:#1f2534; color:#8a93ab;}
[data-theme="dark"] table.dg tbody td{border-color:#232a3a;}
[data-theme="dark"] table.dg tbody tr:hover{background:#1f2534;}
[data-theme="dark"] .bg-white{color:inherit;}
[data-theme="dark"] .state-box .state-icon, [data-theme="dark"] .step-circle{background:#232a3a;}
/* Bootstrap's own utility/form classes carry fixed light-mode colors
   (e.g. .text-muted at rgba(33,37,41,.75)) that don't read var(--text-muted)
   at all — without these overrides body copy on dark cards is nearly
   unreadable even though every ZonPay-authored class already does. */
[data-theme="dark"] .text-muted{color:var(--text-muted) !important;}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select{background:#1f2534; color:var(--text); border-color:var(--border);}
[data-theme="dark"] .form-control::placeholder{color:#6d7690;}
[data-theme="dark"] .breadcrumb-item.active{color:var(--text-muted);}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before{color:var(--text-muted);}

/* ===== DROPDOWN PANELS (user menu / favorites & recent) ===== */
/* Not demonstrated in the static reference (its profile/bell icons are non-functional),
   built from the same card/border/shadow tokens so it reads as part of the same system. */
.dropdown{position:relative;}
.dropdown-panel{
  position:absolute; right:0; top:calc(100% + 6px); min-width:240px; max-width:320px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-md); z-index:1040; overflow:hidden;
}
.dropdown-panel-header{padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); border-bottom:1px solid var(--border);}
.dropdown-panel-header:not(:first-child){border-top:1px solid var(--border);}
.dropdown-panel-item{display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12.8px; color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dropdown-panel-item:hover{background:#f4f6fa;}
[data-theme="dark"] .dropdown-panel-item:hover{background:#1f2534;}
.dropdown-panel-name{font-weight:600;}
.dropdown-panel-sub{font-size:11.5px; color:var(--text-muted);}
.dropdown-panel-empty{padding:14px; font-size:12px; color:var(--text-muted); text-align:center;}

/* ===== TOAST STACKING OVERRIDE =====
   Blazored.Toast ships its own CSS-isolated .blazored-toast-container rule
   (z-index:999, position:fixed, top:2rem for TopRight) — lower than both
   #sidebar (z-index:1030) and #topbar (z-index:1020, 60px tall), so every
   toast's top ~28px painted underneath the sticky header, clipping it.
   Equal-specificity class selector loaded after Blazored's stylesheet
   (see _Layout.cshtml) would normally win on cascade order alone, but
   !important guarantees it regardless of future <link> reordering. */
.blazored-toast-container{z-index:100001 !important;}

/* ===== LOADING OVERLAY ===== */
.loading-overlay{position:fixed; inset:0; background:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; z-index:100000;}
[data-theme="dark"] .loading-overlay{background:rgba(18,21,31,.6);}
.spinner{width:42px; height:42px; border:4px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay-gif{max-width:160px; max-height:160px; width:auto; height:auto; object-fit:contain;}

/* ===== MODAL / DIALOGS (confirm, session timeout) ===== */
.modal-backdrop-zp{position:fixed; inset:0; background:rgba(16,24,40,.45); display:flex; align-items:center; justify-content:center; z-index:90000;}
.modal-card{background:var(--card-bg); border-radius:var(--radius); padding:22px; max-width:420px; width:90%; box-shadow:var(--shadow-md);}
.modal-card-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

/* ===== FULL-PAGE STATES (server down / offline / error pages) ===== */
.fullscreen-overlay{position:fixed; inset:0; background:var(--body-bg); display:flex; align-items:center; justify-content:center; z-index:100000;}

/* ===== FOOTER ===== */
.app-footer{padding:14px 24px; border-top:1px solid var(--border); background:var(--card-bg); font-size:11.5px; color:var(--text-muted); display:flex; gap:16px; flex-wrap:wrap;}

@media (max-width: 768px){
  .app-footer{flex-direction:column; gap:4px;}
}

/* ===== CUSTOMER ONBOARDING FORM — dense, flat, fieldset/legend style
   reproducing the reference NBFC "Add New Borrower" screen as closely as
   possible: no cards, no shadows, no generous whitespace, small compact
   controls, plain (non-sticky, non-boxed) action buttons. ===== */
.onboard-actions{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:14px 0 4px;
}

/* Flat page container — no card shell, no shadow, no border: the reference
   screen has no visible boundary around the whole form, just the individual
   fieldset boxes. */
.onboard-flat{background:var(--card-bg); padding:2px 0;}

/* Wider modal variant for embedding larger forms (Create Guarantor) without
   touching .modal-card's existing confirm-dialog/lookup-dialog sizing. */
.modal-card-lg{max-width:900px; max-height:88vh; overflow-y:auto;}

.coming-soon-card{padding:10px 0 2px; text-align:center; color:var(--text-muted);}

/* ===== LEGEND-STYLE FORM SECTIONS (matches the reference NBFC onboarding
   layout: bordered fieldset boxes with a title overlapping the top border,
   dense/compact spacing, small enterprise-style controls). ===== */
.legend-box{border:1px solid var(--border); border-radius:2px; padding:16px 14px 10px; margin-bottom:14px; position:relative;}
.legend-title{position:absolute; top:-9px; left:10px; background:var(--card-bg); padding:0 6px; font-size:12.5px; font-weight:700; color:var(--info);}
.legend-title .nav-badge{margin-left:6px;}
.legend-row{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:10px;}
.legend-row:last-child{margin-bottom:0;}
.legend-field{flex:1 1 220px; min-width:180px;}
.legend-field label{font-size:11.8px; font-weight:600; color:#3c4457; margin-bottom:3px; display:block;}
.legend-field label .req{color:var(--danger); margin-left:2px;}
.legend-field .form-control, .legend-field .form-select{width:100%; font-size:12.3px; padding:5px 8px; border-radius:3px; min-height:30px;}
.legend-field .form-control[disabled], .legend-field .form-select[disabled]{background:#f4f6fa; color:var(--text-muted); cursor:not-allowed;}
[data-theme="dark"] .legend-field .form-control[disabled], [data-theme="dark"] .legend-field .form-select[disabled]{background:#1b2130;}
.legend-field textarea.form-control{font-size:12.3px; padding:5px 8px;}

.upload-box{width:120px; height:120px; border:1px solid var(--border); border-radius:3px; background:#f7f8fb; display:flex; align-items:center; justify-content:center; color:#b7bccb; font-size:22px; margin-bottom:5px;}
.upload-box.upload-box-sm{width:120px; height:50px;}
[data-theme="dark"] .upload-box{background:#1b2130;}
.upload-label{font-size:11px; font-weight:600; color:var(--text-muted); margin-bottom:4px;}
.upload-file-row{display:flex; align-items:center; gap:6px; margin-bottom:12px;}
.upload-file-row .btn{opacity:.6; cursor:not-allowed; font-size:11px; padding:3px 8px;}
.upload-file-row .file-name{font-size:10.8px; color:var(--text-muted);}

.onboard-sidebar{width:150px; flex-shrink:0;}
.onboard-main{flex:1; min-width:0;}
.onboard-split{display:flex; gap:16px; align-items:flex-start;}
@media (max-width: 900px){
  .onboard-split{flex-direction:column;}
  .onboard-sidebar{width:100%; display:flex; gap:14px; flex-wrap:wrap;}
}

/* ===== COMPANY MASTER — sticky sub-header + two-column card grid =====
   z-index:900 stays below #topbar(1020)/dropdown-panel(1040)/toast(100001)
   but above plain page content (default stacking), so it sticks just under
   the main topbar as a long form scrolls. */
.cm-sticky-header{
  position:sticky; top:60px; z-index:900; background:var(--body-bg);
  padding:10px 0; margin-bottom:14px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.cm-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start;}
@media (max-width:900px){.cm-grid{grid-template-columns:1fr;}}

/* ===== Blazor error UI ===== */
#blazor-error-ui {
    background: var(--warning-light);
    color: var(--text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 100001;
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== CALENDAR GRID (Holiday Master; reusable — CalendarGrid.razor owns
   layout only, callers style their own cell content) ===== */
.cal-grid{border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.cal-grid-header{display:grid; grid-template-columns:repeat(7,1fr); background:var(--info);}
.cal-grid-header-cell{padding:8px 4px; text-align:center; font-size:10px; font-weight:700; color:#fff; letter-spacing:.3px;}
.cal-grid-body{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-grid-cell{min-height:66px; border:1px solid var(--border); box-sizing:border-box;}
.cal-grid-cell-empty{background:#f9fafc;}
.cal-day{height:100%; padding:6px; box-sizing:border-box;}
.cal-day-holiday{background:var(--danger-light);}
.cal-day-number{font-size:12.5px; font-weight:600; color:var(--text);}
.cal-day-link{margin-top:6px; font-size:11px; color:var(--primary); cursor:pointer; display:flex; align-items:center; gap:3px;}
.cal-day-link:hover{text-decoration:underline;}
.cal-day-holiday .cal-day-link{color:var(--danger);}
[data-theme="dark"] .cal-grid-cell-empty{background:#1b2130;}

/* ===== WHATSAPP INBOX — 3-column enterprise conversation workspace =====
   No fixed pixel widths on the shell itself (minmax()/1fr only) so it
   always uses the full available width; each column scrolls internally
   rather than the page growing unbounded. */
.wai-shell{display:grid; grid-template-columns:minmax(280px,320px) 1fr minmax(300px,340px); gap:14px; height:calc(100vh - 230px); min-height:520px;}
.wai-col{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; min-width:0; min-height:0;}
.wai-col-head{padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0;}
.wai-col-body{flex:1; overflow-y:auto; min-height:0;}

.wai-convo{display:flex; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border);}
.wai-convo:hover{background:var(--body-bg);}
.wai-convo.active{background:var(--primary-light);}
.wai-avatar{width:36px; height:36px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0;}
.wai-convo-body{flex:1; min-width:0;}
.wai-name{font-weight:600; font-size:12.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;}
.wai-time{font-size:10.5px; color:var(--text-muted); flex-shrink:0;}
.wai-preview{font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px;}

.wai-chat{position:relative;}
.wai-messages{padding:14px; background:var(--body-bg);}
.wai-date-divider{text-align:center; margin:10px 0;}
.wai-date-divider span{font-size:10px; font-weight:700; color:var(--text-muted); background:var(--card-bg); border:1px solid var(--border); border-radius:20px; padding:3px 10px;}
.wai-msg{display:flex; flex-direction:column; max-width:70%; margin-bottom:10px;}
.wai-msg.in{align-items:flex-start; margin-right:auto;}
.wai-msg.out{align-items:flex-end; margin-left:auto;}
.wai-bubble{padding:8px 12px; border-radius:12px; font-size:12.8px; white-space:pre-wrap; word-break:break-word;}
.wai-msg.in .wai-bubble{background:var(--card-bg); border:1px solid var(--border); border-top-left-radius:2px;}
.wai-msg.out .wai-bubble{background:var(--primary-light); color:var(--text); border-top-right-radius:2px;}
.wai-meta{font-size:10px; color:var(--text-muted); margin-top:3px; display:flex; align-items:center;}
.wai-composer{padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0;}
.wai-contact.wai-empty{visibility:hidden;}

@media (max-width:1100px){
  .wai-shell{grid-template-columns:minmax(260px,300px) 1fr;}
  .wai-contact{position:fixed; top:0; right:0; bottom:0; width:320px; max-width:90vw; z-index:1050; border-radius:0; box-shadow:-4px 0 16px rgba(0,0,0,.15); display:none;}
  .wai-contact.wai-open{display:flex;}
}
@media (max-width:760px){
  .wai-shell{display:block; height:auto;}
  .wai-list, .wai-chat{height:calc(100vh - 230px); min-height:420px; margin-bottom:0;}
  .wai-list.wai-hide, .wai-chat.wai-hide{display:none;}
}
[data-theme="dark"] .wai-convo.active{background:#1f2a4a;}
[data-theme="dark"] .wai-messages{background:#10131c;}


/* Owner-branding dark-theme logo: TenantBrandMark / sidebar render both
   variants; only the one matching the active theme is shown. */
img.zp-logo-dark { display: none; }
[data-theme="dark"] img.zp-logo-light { display: none; }
[data-theme="dark"] img.zp-logo-dark { display: inline-block; }

/* ===== DASHBOARD SHELL (TAXIDO-style reference, 2026-10-17) =====
   Topbar + dashboard (sidebar rules live only in the SIDEBAR section). Every
   color reads a token, so tenant branding (--primary from theme.js) applies. */
body{background:var(--body-bg);}

#topbar{height:68px; padding:0 22px; gap:12px; border-bottom:none; box-shadow:0 1px 0 var(--border);}
#topbar .tb-icon-btn{width:40px; height:40px; border-radius:50%; background:#f2f4f3; color:#2c3a35;}
#topbar .tb-icon-btn:hover{background:var(--primary-light); color:var(--primary);}
.tb-pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:6px;}
.tb-pill .bi-circle-fill{font-size:8px;}
.tb-pill-ok{background:var(--primary-light); color:var(--primary);}
.tb-pill-bad{background:var(--danger-light); color:var(--danger);}
#topbar .tb-avatar{border-radius:50%; width:38px; height:38px; background:var(--primary);}
[data-theme="dark"] #topbar .tb-icon-btn{background:#232a3a; color:#d7dce8;}

#content{padding:22px 24px 40px;}
.app-footer{padding:16px 24px; border-top:none; box-shadow:0 -1px 0 var(--border); font-size:12.5px;}

/* Dashboard */
.zd{display:flex; flex-direction:column; gap:20px;}
.zd-hello{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.zd-hello h1{font-size:20px; font-weight:700; margin:0 0 4px; color:var(--text);}
.zd-hello p{margin:0; font-size:13px; color:var(--text-muted);}
.zd-sort{display:flex; align-items:center; gap:10px; background:var(--card-bg); padding:8px 10px 8px 16px; border-radius:8px; box-shadow:var(--shadow);}
.zd-sort label{font-size:13px; color:var(--text-muted); white-space:nowrap;}
.zd-sort .form-select{min-width:150px; border:none; background-color:#f4f6f5; font-size:13.5px; padding-top:7px; padding-bottom:7px;}
.zd-refresh{width:34px; height:34px; border-radius:6px; border:none; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center;}
.zd-refresh:disabled{opacity:.6;}
.zd-spin{display:inline-block; animation:zdspin 1s linear infinite;}
@keyframes zdspin{to{transform:rotate(360deg);}}

.zd-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.zd-kpis-c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.zd-kpis-c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.zd-kpis-c5{grid-template-columns:repeat(5,minmax(0,1fr));}
.zd-kpi{--tone:#199473; --tone-bg:rgba(25,148,115,.12); position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-height:124px; padding:22px 24px; background:var(--card-bg); border-radius:10px; box-shadow:var(--shadow); color:var(--text); transition:box-shadow .15s, transform .15s;}
.zd-kpi:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.zd-kpi::before, .zd-kpi::after{content:''; position:absolute; border-radius:50%; background:var(--tone-bg); pointer-events:none;}
.zd-kpi::before{width:190px; height:190px; right:-74px; top:50%; transform:translateY(-50%); opacity:.55;}
.zd-kpi::after{width:132px; height:132px; right:-30px; top:50%; transform:translateY(-50%);}
.zd-tone-green{--tone:var(--primary); --tone-bg:color-mix(in srgb, var(--primary) 14%, transparent);}
.zd-tone-yellow{--tone:#f2b336; --tone-bg:rgba(242,179,54,.16);}
.zd-tone-orange{--tone:#f2804a; --tone-bg:rgba(242,128,74,.15);}
.zd-tone-gray{--tone:#6b7a8f; --tone-bg:rgba(107,122,143,.15);}
.zd-kpi-body{flex:1; min-width:0; position:relative; z-index:1;}
.zd-kpi-value{font-size:24px; font-weight:600; line-height:1.15; color:var(--text); word-break:break-word;}
.zd-kpi-label{font-size:15px; font-weight:600; margin-top:10px; color:var(--text);}
.zd-kpi-sub{display:inline-block; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--tone); background:var(--tone-bg); padding:2px 8px; border-radius:4px;}
.zd-kpi-icon{position:relative; z-index:1; width:60px; height:60px; border-radius:50%; background:var(--tone); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;}

.zd-row{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:16px; align-items:stretch;}
.zd-row-8-4{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);}
.zd-row-6-6{grid-template-columns:repeat(2,minmax(0,1fr));}
.zd-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.zd-tile{background:var(--card-bg); border-radius:10px; box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:18px;}
.zd-tile-top{display:flex; gap:16px; align-items:flex-start;}
.zd-tile-icon{width:58px; height:58px; border-radius:8px; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;}
.zd-tile-label{font-size:15px; color:var(--text-muted);}
.zd-tile-value{font-size:22px; font-weight:600; color:var(--text); margin-top:2px;}
.zd-tile-link{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:6px; background:color-mix(in srgb, var(--primary) 7%, transparent); color:var(--primary); font-weight:600; font-size:14px; text-decoration:none;}
.zd-tile-link:hover{background:var(--primary-light); color:var(--primary-dark);}

.zd-card{border:none; border-radius:10px; overflow:hidden; display:flex; flex-direction:column;}
.zd-card-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:18px 20px 10px;}
.zd-card-head h6{margin:0; font-size:17px; font-weight:600; color:var(--text);}
.zd-accent{color:var(--primary);}
.zd-muted{font-size:12px; color:var(--text-muted);}
.zd-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--primary); margin-right:6px;}
.zd-viewall{font-size:13px; color:var(--text-muted); text-decoration:none;}
.zd-viewall:hover{color:var(--primary);}
.zd-chart{position:relative; height:300px; padding:6px 18px 16px;}
.zd-donut-wrap{position:relative; height:190px; margin:8px 20px 4px;}
.zd-donut-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; font-size:12.5px; color:var(--text-muted);}
.zd-donut-center b{font-size:18px; color:var(--text);}
.zd-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; padding:6px 16px 18px; font-size:12px; color:var(--text);}
.zd-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px;}
.zd-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:36px 16px; color:var(--text-muted); font-size:13px; text-align:center;}
.zd-empty .bi{font-size:28px; opacity:.6;}

.zd-tabs{display:flex; gap:22px; padding:0 20px; border-bottom:1px solid var(--border); overflow-x:auto;}
.zd-tabs button{border:none; background:none; padding:10px 2px; font-size:14px; color:var(--text-muted); border-bottom:2px solid transparent; white-space:nowrap;}
.zd-tabs button.active{color:var(--primary); border-bottom-color:var(--primary); font-weight:600;}
.zd-table{width:100%; border-collapse:collapse; font-size:13px;}
.zd-table thead th{background:#f6f8f7; color:var(--text); font-weight:600; padding:11px 20px; white-space:nowrap;}
.zd-table tbody td{padding:12px 20px; border-top:1px solid var(--border); vertical-align:middle; color:var(--text);}
.zd-person{display:flex; align-items:center; gap:10px; min-width:0;}
.zd-name{font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;}
.zd-avatar{width:34px; height:34px; border-radius:50%; background:#eef1f0; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0;}
.zd-code{display:inline-block; padding:3px 9px; border-radius:4px; background:var(--primary-light); color:var(--primary); font-weight:600; font-size:12px; white-space:nowrap;}
.zd-badge{display:inline-block; padding:4px 10px; border-radius:4px; font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap;}
.zd-badge-green{background:var(--primary);}
.zd-badge-yellow{background:#e9a520;}
.zd-badge-red{background:var(--danger);}
.zd-badge-gray{background:#6b7a8f;}
.zd-activity{list-style:none; margin:0; padding:4px 20px 14px;}
.zd-activity li{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:13px;}
.zd-activity li:first-child{border-top:none;}
.zd-info-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.zd-info-body{padding:4px 20px 18px;}
.zd-line{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border); font-size:13px;}
.zd-line:first-child{border-top:none;}

[data-theme="dark"] .zd-sort .form-select{background-color:#1f2534;}
[data-theme="dark"] .zd-table thead th{background:#1f2534;}
[data-theme="dark"] .zd-avatar{background:#232a3a;}

@media (max-width:1399px){ .zd-kpis, .zd-kpis-c5{grid-template-columns:repeat(3,minmax(0,1fr));} .zd-kpis-c2{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:1199px){
  .zd-row, .zd-row-8-4{grid-template-columns:minmax(0,1fr);}
  .zd-kpis, .zd-kpis-c3, .zd-kpis-c5{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:991.98px){
  .zd-row-6-6{grid-template-columns:minmax(0,1fr);}
  .zd-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:575.98px){
  #content{padding:16px 12px 32px;}
  #topbar{padding:0 12px; gap:6px;}
  #topbar .tb-icon-btn{width:36px; height:36px;}
  .zd-kpis, .zd-kpis-c2, .zd-kpis-c3, .zd-kpis-c5, .zd-tiles{grid-template-columns:minmax(0,1fr);}
  .zd-kpi{min-height:104px; padding:18px;}
  .zd-sort{width:100%;}
  .zd-sort .form-select{flex:1; min-width:0;}
  .zd-table thead th, .zd-table tbody td{padding:10px 12px;}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT PAGES — the FinanceClient page design system (owner's form/detail
   reference screenshots, 2026-10-19). Guide: docs/FINANCECLIENT-UI-STANDARDS.md

   • Values live in the --zc-* tokens below; change a token, not a page.
   • Scope: page content only — every selector is :where(#content:not(:has(.zd))),
     which (a) excludes the dashboard (.zd root) and (b) adds no specificity,
     so a deliberate page-specific rule still wins. The sidebar and topbar sit
     outside #content and are never matched. Do not add unscoped rules here.
   • Colours come from the theme tokens (--primary, --text, --border, …), so
     tenant branding and dark mode keep working.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --zc-font-xs:12px;            /* meta, help text, table footers       */
  --zc-font-sm:12.5px;          /* badges, small notes                  */
  --zc-font:13.5px;             /* body, labels, controls, table cells  */
  --zc-font-title:14px;         /* section headings                     */
  --zc-font-card-title:15px;    /* card / page headers                  */
  --zc-weight-label:500;
  --zc-weight-title:600;
  --zc-control-h:34px;
  --zc-control-px:12px;
  --zc-radius:6px;
  --zc-radius-sm:4px;
  --zc-card-px:24px;
  --zc-card-py:20px;
  --zc-gap-x:16px;              /* between fields in a row              */
  --zc-gap-y:22px;              /* between field rows                   */
  --zc-label-gap:8px;           /* label → control                      */
  --zc-section-gap:28px;        /* space above a section heading        */
  --zc-cell-py:11px;
  --zc-cell-px:16px;
  --zc-placeholder:#9aa1ad;
  --zc-band:color-mix(in srgb, var(--body-bg) 75%, var(--card-bg));   /* footer bands, table heads, tab strips */
  --zc-row-hover:color-mix(in srgb, var(--body-bg) 55%, var(--card-bg));
}

/* ── Cards & page structure ───────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .card{border-radius:var(--zc-radius); box-shadow:none;}
:where(#content:not(:has(.zd))) .card-body-p{padding:var(--zc-card-py) var(--zc-card-px);}
:where(#content:not(:has(.zd))) .card-head{padding:16px var(--zc-card-px);}
:where(#content:not(:has(.zd))) .card-head h6{font-size:var(--zc-font-card-title); font-weight:var(--zc-weight-title);}
:where(#content:not(:has(.zd))) .card-head .sub{font-size:var(--zc-font-sm); font-weight:400; margin-top:2px;}
/* A card body whose first row is "title + actions" renders that row as the card header. */
:where(#content:not(:has(.zd))) .card-body-p > .d-flex:first-child:has(> .section-title){margin:calc(var(--zc-card-py) * -1) calc(var(--zc-card-px) * -1) var(--zc-card-py) !important; padding:16px var(--zc-card-px); border-bottom:1px solid var(--border); gap:8px; flex-wrap:wrap;}
:where(#content:not(:has(.zd))) .card-body-p > .d-flex:first-child > .section-title{border-bottom:0; padding-bottom:0; font-size:var(--zc-font-card-title);}
:where(#content:not(:has(.zd))) .section-title{font-size:var(--zc-font-title); font-weight:var(--zc-weight-title); color:var(--text); margin:var(--zc-section-gap) 0 20px; padding-bottom:10px;}
:where(#content:not(:has(.zd))) .zc-page-title{font-size:var(--zc-font-card-title); font-weight:var(--zc-weight-title); margin:0;}
:where(#content:not(:has(.zd))) .zc-page-sub{font-size:var(--zc-font-sm); color:var(--text-muted); margin:2px 0 0;}
:where(#content:not(:has(.zd))) .zc-card-footer,
:where(#content:not(:has(.zd))) .card .d-flex.p-3[style*="border-top"]{background:var(--zc-band); padding:14px var(--zc-card-px) !important; border-radius:0 0 var(--zc-radius) var(--zc-radius);}
:where(#content:not(:has(.zd))) .zc-card-footer{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--border);}

/* ── Text helpers (replace inline font sizes) ─────────────────────────── */
:where(#content:not(:has(.zd))) .zc-note{font-size:var(--zc-font-sm); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .zc-meta{font-size:var(--zc-font-xs); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .zc-body{font-size:var(--zc-font);}
:where(#content:not(:has(.zd))) .zc-card-title{font-size:var(--zc-font-card-title); font-weight:var(--zc-weight-title);}

/* ── Forms ────────────────────────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .form-label{font-size:var(--zc-font); font-weight:var(--zc-weight-label); color:var(--text); margin-bottom:var(--zc-label-gap);}
:where(#content:not(:has(.zd))) .form-label.mb-1{margin-bottom:var(--zc-label-gap) !important;}
:where(#content:not(:has(.zd))) .zc-help{position:relative; display:inline-flex; vertical-align:-2px; margin-left:4px; color:var(--text-muted); font-size:13px; cursor:help; outline:none;}
/* Hint tooltip (reference: dark bubble to the right of the "?"). Text comes
   from data-tip and is rendered by CSS as text — never as markup. */
:where(#content:not(:has(.zd))) .zc-help[data-tip]:hover::after,
:where(#content:not(:has(.zd))) .zc-help[data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); top:auto; transform:translateX(-50%); z-index:90020; width:max-content; max-width:260px; padding:8px 12px; border-radius:var(--zc-radius); background:#1f2633; color:#fff; font-size:var(--zc-font-sm); font-weight:400; line-height:1.45; white-space:normal; text-align:center; box-shadow:0 4px 14px rgba(16,24,40,.18);}
:where(#content:not(:has(.zd))) .zc-help[data-tip]:hover::before,
:where(#content:not(:has(.zd))) .zc-help[data-tip]:focus-visible::before{content:""; position:absolute; left:50%; bottom:calc(100% - 4px); top:auto; transform:translateX(-50%); z-index:90021; border:6px solid transparent; border-top-color:#1f2633;}
:where(#content:not(:has(.zd))) .zc-help:focus-visible{color:var(--primary);}
:where(#content:not(:has(.zd))) .form-control,
:where(#content:not(:has(.zd))) .form-select,
:where(#content:not(:has(.zd))) .form-control-sm,
:where(#content:not(:has(.zd))) .form-select-sm{font-size:var(--zc-font); line-height:1.5; padding:6px var(--zc-control-px); border-radius:var(--zc-radius); min-height:var(--zc-control-h);}
:where(#content:not(:has(.zd))) .form-select,
:where(#content:not(:has(.zd))) .form-select-sm{padding-right:34px; background-position:right 12px center;}
:where(#content:not(:has(.zd))) textarea.form-control{min-height:76px;}
:where(#content:not(:has(.zd))) input[type=file].form-control{padding:4px 6px; line-height:24px;}
:where(#content:not(:has(.zd))) input[type=file].form-control::file-selector-button{border:0; border-radius:var(--zc-radius-sm); background:var(--zc-band); color:var(--text); padding:3px 12px; margin-right:10px; font-size:var(--zc-font-sm); font-weight:500;}
:where(#content:not(:has(.zd))) .form-control::placeholder{color:var(--zc-placeholder);}
:where(#content:not(:has(.zd))) .form-control:disabled,
:where(#content:not(:has(.zd))) .form-select:disabled{background-color:var(--zc-band); color:var(--text-muted); cursor:not-allowed; opacity:1;}
:where(#content:not(:has(.zd))) .input-group-text{font-size:var(--zc-font); background:var(--zc-band); border-color:var(--border); color:var(--text-muted);}
/* States: hover on editable fields; read-only values tinted like disabled but readable. */
:where(#content:not(:has(.zd))) .form-control:hover:not(:disabled):not([readonly]):not(:focus),
:where(#content:not(:has(.zd))) .form-select:hover:not(:disabled):not(:focus){border-color:color-mix(in srgb, var(--border) 55%, var(--text-muted));}
:where(#content:not(:has(.zd))) .form-control[readonly]:not(:disabled){background-color:var(--zc-band);}
:where(#content:not(:has(.zd))) textarea.form-control{resize:vertical;}
/* Checkboxes, radios, switches: one size, brand colour, label aligned. */
:where(#content:not(:has(.zd))) .form-check{display:flex; align-items:center; gap:8px; min-height:24px; padding-left:0;}
:where(#content:not(:has(.zd))) .form-check.form-check-inline{display:inline-flex; margin-right:16px;}
:where(#content:not(:has(.zd))) .form-check .form-check-input{float:none; margin:0; flex-shrink:0;}
:where(#content:not(:has(.zd))) .form-check-input{width:16px; height:16px; border-color:color-mix(in srgb, var(--border) 50%, var(--text-muted)); cursor:pointer;}
:where(#content:not(:has(.zd))) .form-switch .form-check-input{width:32px; border-radius:16px;}
:where(#content:not(:has(.zd))) .form-check-input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light);}
:where(#content:not(:has(.zd))) .form-check-label{cursor:pointer;}
:where(#content:not(:has(.zd))) .input-group-sm > .form-control,
:where(#content:not(:has(.zd))) .input-group-sm > .form-select,
:where(#content:not(:has(.zd))) .input-group-sm > .input-group-text,
:where(#content:not(:has(.zd))) .input-group-sm > .btn{font-size:var(--zc-font); min-height:var(--zc-control-h);}
:where(#content:not(:has(.zd))) .form-text{font-size:var(--zc-font-xs); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .invalid-feedback,
:where(#content:not(:has(.zd))) .validation-message{font-size:var(--zc-font-xs); color:var(--danger);}
:where(#content:not(:has(.zd))) .form-check-label{font-size:var(--zc-font);}
:where(#content:not(:has(.zd))) .form-check-input:checked{background-color:var(--primary); border-color:var(--primary);}
:where(#content:not(:has(.zd))) .row.g-2,
:where(#content:not(:has(.zd))) .row.g-3{--bs-gutter-x:var(--zc-gap-x); --bs-gutter-y:var(--zc-gap-y);}
/* Compact "legend" forms (Customer, Company Master, Savings settings, Aadhaar,
   print editor) follow the same control size and type as every other form. */
:where(#content:not(:has(.zd))) .legend-field .form-control,
:where(#content:not(:has(.zd))) .legend-field .form-select{font-size:var(--zc-font); padding:6px var(--zc-control-px); border-radius:var(--zc-radius); min-height:var(--zc-control-h);}
:where(#content:not(:has(.zd))) .legend-field textarea.form-control{font-size:var(--zc-font);}
:where(#content:not(:has(.zd))) .legend-field label{font-size:var(--zc-font); font-weight:var(--zc-weight-label); color:var(--text); margin-bottom:6px;}
:where(#content:not(:has(.zd))) .legend-box{border-radius:var(--zc-radius); padding:20px 16px 14px;}
:where(#content:not(:has(.zd))) .legend-title{font-size:var(--zc-font-title); font-weight:var(--zc-weight-title);}

/* ── Document Builder editor ─────────────────────────────────────── */
:where(#content:not(:has(.zd))) .dbx-head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px 16px; margin-bottom:12px;}
:where(#content:not(:has(.zd))) .dbx-actions{display:flex; flex-wrap:wrap; gap:6px;}
:where(#content:not(:has(.zd))) .dbx-tabs{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; border-bottom:1px solid var(--border);}
:where(#content:not(:has(.zd))) .dbx-tab{border:0; background:none; padding:8px 14px; font-size:var(--zc-font); color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px;}
:where(#content:not(:has(.zd))) .dbx-tab.active{color:var(--primary); border-bottom-color:var(--primary); font-weight:var(--zc-weight-title);}
:where(#content:not(:has(.zd))) .dbx-section-head{display:flex; align-items:center; gap:8px; padding:8px 12px;}
:where(#content:not(:has(.zd))) .dbx-section-head .btn-link{text-decoration:none; color:var(--text);}
:where(#content:not(:has(.zd))) .dbx-hidden{opacity:.65;}
:where(#content:not(:has(.zd))) .dbx-checks{display:flex; flex-wrap:wrap; gap:6px 18px;}
:where(#content:not(:has(.zd))) .dbx-clause{border:1px solid var(--border); border-radius:var(--zc-radius); padding:8px 10px; background:var(--zc-band);}
:where(#content:not(:has(.zd))) .dbx-grid td{vertical-align:middle;}
:where(#content:not(:has(.zd))) .dbx-grid .zc-ss{min-width:200px;}

/* ── No Objection Certificate panel (LoanNocPanel) ─────────────────── */
:where(#content:not(:has(.zd))) .zc-noc-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--zc-radius); background:var(--zc-band);}
:where(#content:not(:has(.zd))) .zc-noc-text{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--zc-font); color:var(--text); min-width:0;}
:where(#content:not(:has(.zd))) .zc-noc-actions{display:flex; flex-wrap:wrap; gap:8px;}
:where(#content:not(:has(.zd))) .zc-noc-reasons{margin:8px 0 0; padding-left:20px; font-size:var(--zc-font-sm); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .zc-noc-note{margin-top:8px; font-size:var(--zc-font-sm); color:var(--text-muted);}

/* ── Searchable select (SearchSelect component) ───────────────────────── */
:where(#content:not(:has(.zd))) .zc-ss{position:relative; min-width:0;}
:where(#content:not(:has(.zd))) .zc-ss-control{position:relative;}
:where(#content:not(:has(.zd))) .zc-ss-control .form-control{padding-right:56px; text-overflow:ellipsis;}
:where(#content:not(:has(.zd))) .zc-ss-chevron{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-muted); pointer-events:none;}
:where(#content:not(:has(.zd))) .zc-ss-clear{position:absolute; right:30px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--text-muted); font-size:11px; padding:4px; line-height:1; border-radius:var(--zc-radius-sm);}
:where(#content:not(:has(.zd))) .zc-ss-clear:hover{color:var(--danger); background:var(--zc-band);}
:where(#content:not(:has(.zd))) .zc-ss-list{position:absolute; z-index:90010; /* above page dialogs (90000) */ box-sizing:border-box; top:calc(100% + 4px); left:0; right:0; max-height:264px; overflow-y:auto; margin:0; padding:4px; list-style:none; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--zc-radius); box-shadow:0 8px 24px rgba(16,24,40,.12);}
:where(#content:not(:has(.zd))) .zc-ss-option{display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:var(--zc-radius-sm); font-size:var(--zc-font); color:var(--text); cursor:pointer; overflow-wrap:anywhere;}
:where(#content:not(:has(.zd))) .zc-ss-option:hover{background:color-mix(in srgb, var(--zc-band) 60%, var(--card-bg));}
:where(#content:not(:has(.zd))) .zc-ss-option.active{background:var(--zc-band);}
:where(#content:not(:has(.zd))) .zc-ss-control .form-control:disabled ~ .zc-ss-chevron{opacity:.45;}
:where(#content:not(:has(.zd))) .zc-ss-option.selected{color:var(--primary); font-weight:500;}
:where(#content:not(:has(.zd))) .zc-ss-option mark{padding:0; background:color-mix(in srgb, var(--warning) 28%, transparent); color:inherit;}
:where(#content:not(:has(.zd))) .zc-ss-detail{color:var(--text-muted); font-size:var(--zc-font-xs); white-space:nowrap;}
:where(#content:not(:has(.zd))) .zc-ss-state{padding:8px 10px; font-size:var(--zc-font-sm); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .zc-ss-error{color:var(--danger); display:flex; align-items:center; justify-content:space-between; gap:8px;}
:where(#content:not(:has(.zd))) .zc-ss-retry{padding:0 4px; font-size:var(--zc-font-sm); font-weight:600; text-decoration:none;}

/* ── Buttons ──────────────────────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .btn{font-weight:500; border-radius:var(--zc-radius);}
:where(#content:not(:has(.zd))) .icon-btn{width:30px; height:30px; border-radius:var(--zc-radius); background:var(--card-bg);}
:where(#content:not(:has(.zd))) .icon-btn:hover{background:var(--zc-band);}

/* ── Index pages: toolbar, table, footer, pagination ──────────────────── */
:where(#content:not(:has(.zd))) .table-toolbar{padding:14px var(--zc-card-px); gap:10px;}
:where(#content:not(:has(.zd))) .table-toolbar .form-control,
:where(#content:not(:has(.zd))) .table-toolbar .form-select{min-height:var(--zc-control-h);}
:where(#content:not(:has(.zd))) .table-toolbar .flex-fill-search input{font-size:var(--zc-font);}
:where(#content:not(:has(.zd))) table.dg,
:where(#content:not(:has(.zd))) .table{font-size:var(--zc-font);}
:where(#content:not(:has(.zd))) table.dg thead th,
:where(#content:not(:has(.zd))) .table > thead th{background:var(--zc-band); color:var(--text); text-transform:none; letter-spacing:0; font-size:13px; font-weight:var(--zc-weight-title); padding:var(--zc-cell-py) var(--zc-cell-px);}
:where(#content:not(:has(.zd))) table.dg tbody td,
:where(#content:not(:has(.zd))) .table > tbody td{padding:var(--zc-cell-py) var(--zc-cell-px); border-bottom:1px solid var(--border);}
:where(#content:not(:has(.zd))) table.dg tbody tr:hover{background:var(--zc-row-hover);}
:where(#content:not(:has(.zd))) .dg-cell-sub{font-size:var(--zc-font-xs);}
:where(#content:not(:has(.zd))) .table-footer{padding:12px var(--zc-card-px); font-size:var(--zc-font-xs); color:var(--text-muted);}
:where(#content:not(:has(.zd))) .pg-btn{width:32px; height:32px; border-radius:var(--zc-radius); background:var(--card-bg); color:var(--text);}
:where(#content:not(:has(.zd))) .pg-btn:disabled{opacity:.45; cursor:not-allowed;}

/* ── Status, alerts, states ───────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .badge-status{font-size:var(--zc-font-sm); font-weight:500; letter-spacing:0; padding:3px 8px; border-radius:var(--zc-radius-sm);}
:where(#content:not(:has(.zd))) .badge{font-weight:500; border-radius:var(--zc-radius-sm);}
:where(#content:not(:has(.zd))) .alert{font-size:var(--zc-font); border-radius:var(--zc-radius); padding:10px 14px;}
:where(#content:not(:has(.zd))) .state-box{padding:48px 20px;}
:where(#content:not(:has(.zd))) .state-box .state-icon{border-radius:var(--zc-radius);}
:where(#content:not(:has(.zd))) .state-box h6{font-size:var(--zc-font-title); font-weight:var(--zc-weight-title);}
:where(#content:not(:has(.zd))) .state-box p{font-size:var(--zc-font);}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .nav-tabs,
:where(#content:not(:has(.zd))) .zc-tabs{display:flex; flex-wrap:wrap; border:1px solid var(--border); border-radius:var(--zc-radius); background:var(--zc-band); padding:3px; gap:2px;}
:where(#content:not(:has(.zd))) .nav-tabs .nav-link,
:where(#content:not(:has(.zd))) .zc-tabs > button{flex:1 1 auto; border:1px solid transparent; border-radius:var(--zc-radius-sm); background:transparent; color:var(--text-muted); font-size:var(--zc-font); font-weight:500; padding:7px 14px;}
:where(#content:not(:has(.zd))) .nav-tabs .nav-link.active,
:where(#content:not(:has(.zd))) .zc-tabs > button.active{background:var(--card-bg); border-color:var(--border); color:var(--text);}

/* ── Timeline (detail pages) ──────────────────────────────────────────── */
:where(#content:not(:has(.zd))) .zc-timeline{list-style:none; margin:0; padding:0 0 0 16px; border-left:2px solid var(--border);}
:where(#content:not(:has(.zd))) .zc-timeline > li{position:relative; padding:0 0 14px;}
:where(#content:not(:has(.zd))) .zc-timeline > li::before{content:""; position:absolute; left:-22px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--success);}

/* ── Dialogs opened from content pages ────────────────────────────────── */
/* Page dialogs are rendered inside #content, so the form rules above already
   apply to their fields; only the card shape needs aligning. */
:where(#content:not(:has(.zd))) .modal-card{border-radius:var(--zc-radius);}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 767.98px){
  /* Side-by-side legend boxes (e.g. Customer form) stack instead of overflowing. */
  :where(#content:not(:has(.zd))) .legend-row{flex-wrap:wrap !important;}
  :where(#content:not(:has(.zd))) .legend-row > .legend-box{flex:1 1 100% !important; min-width:0;}
  :where(#content:not(:has(.zd))) .card-body-p{padding:16px;}
  :where(#content:not(:has(.zd))) .card-body-p > .d-flex:first-child:has(> .section-title){margin:-16px -16px 16px !important; padding:14px 16px;}
}

/* ── Company Master: platform-managed sections + ZonPay support notice ── */
:root{--cm-support-bg:#b91c1c; --cm-support-text:#ffffff;}   /* red-700: white text passes WCAG AA (6.5:1) */
:root{--cm-locked-bg:color-mix(in srgb, var(--text-muted) 15%, var(--card-bg)); --cm-locked-text:color-mix(in srgb, var(--text) 62%, var(--text-muted)); --cm-locked-border:color-mix(in srgb, var(--border) 75%, var(--text-muted));}
/* Locked (Managed by ZonPay) sections: grey, muted, no caret, no blue "editing" focus ring. Still focusable and copyable for keyboard / screen-reader users. */
:where(#content:not(:has(.zd))) .cm-locked .form-control[readonly]{background-color:var(--cm-locked-bg); color:var(--cm-locked-text); border-color:var(--cm-locked-border); cursor:default; caret-color:transparent; resize:none; box-shadow:none;}
:where(#content:not(:has(.zd))) .cm-locked .form-control[readonly]:hover{border-color:var(--cm-locked-border);}
:where(#content:not(:has(.zd))) .cm-locked .form-control[readonly]:focus, :where(#content:not(:has(.zd))) .cm-locked .form-control[readonly]:focus-visible{background-color:var(--cm-locked-bg); border-color:var(--cm-locked-border); box-shadow:none; outline:2px solid color-mix(in srgb, var(--text-muted) 45%, transparent); outline-offset:1px;}
:where(#content:not(:has(.zd))) .cm-locked .upload-box{background:var(--cm-locked-bg); border-color:var(--cm-locked-border); cursor:default;}
:where(#content:not(:has(.zd))) .cm-locked label, :where(#content:not(:has(.zd))) .cm-locked .upload-label{cursor:default;}
:where(#content:not(:has(.zd))) .cm-managed{margin-left:6px; font-size:10.5px; font-weight:600; color:var(--text-muted); white-space:nowrap;}
:where(#content:not(:has(.zd))) .cm-managed .bi{font-size:9.5px;}
:where(#content:not(:has(.zd))) fieldset.cm-editable{border:0; margin:0; padding:0; min-width:0;}
:where(#content:not(:has(.zd))) .cm-support{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:4px 0 8px; padding:7px 12px; border-radius:6px;
  background:var(--cm-support-bg); color:var(--cm-support-text); font-size:12px; line-height:1.4;}
:where(#content:not(:has(.zd))) .cm-support-lead{font-weight:700;}
:where(#content:not(:has(.zd))) .cm-support a{color:var(--cm-support-text); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; overflow-wrap:anywhere;}
:where(#content:not(:has(.zd))) .cm-support a:hover, :where(#content:not(:has(.zd))) .cm-support a:focus-visible{color:var(--cm-support-text); text-decoration-thickness:2px;}
:where(#content:not(:has(.zd))) .cm-support a:focus-visible{outline:2px solid var(--cm-support-text); outline-offset:2px; border-radius:2px;}
:where(#content:not(:has(.zd))) .cm-support .bi{font-size:11px; margin-right:3px;}
@media (max-width:576px){ :where(#content:not(:has(.zd))) .cm-support{flex-direction:column; align-items:flex-start;} :where(#content:not(:has(.zd))) .cm-support a{white-space:normal;} }

/* ── Support: ticket list rows and conversation thread ── */
:where(#content:not(:has(.zd))) .sup-row{cursor:pointer;}
:where(#content:not(:has(.zd))) .sup-row:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
:where(#content:not(:has(.zd))) .sup-thread{display:flex; flex-direction:column; gap:12px;}
:where(#content:not(:has(.zd))) .sup-msg{border:1px solid var(--border); border-radius:var(--zc-radius); padding:12px 14px; max-width:860px; background:var(--card-bg);}
:where(#content:not(:has(.zd))) .sup-msg-own{align-self:flex-end; background:color-mix(in srgb, var(--primary) 6%, var(--card-bg)); border-color:color-mix(in srgb, var(--primary) 25%, var(--border));}
:where(#content:not(:has(.zd))) .sup-msg-agent{align-self:flex-start;}
:where(#content:not(:has(.zd))) .sup-msg-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-bottom:6px;}
:where(#content:not(:has(.zd))) .sup-msg-body{white-space:pre-wrap; overflow-wrap:anywhere;}
:where(#content:not(:has(.zd))) .sup-event{align-self:center; text-align:center;}

/* Required Documents picker (loan scheme form) */
:where(#content:not(:has(.zd))) .zc-rdp-chips{display:flex; flex-wrap:wrap; gap:6px; min-height:38px; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--card-bg, transparent);}
:where(#content:not(:has(.zd))) .zc-rdp-invalid .zc-rdp-chips{border-color:var(--bs-danger, #dc3545);}
:where(#content:not(:has(.zd))) .zc-rdp-chip{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:12px; background:var(--primary-soft, rgba(13,110,253,.12)); color:var(--text, inherit); font-size:13px;}
:where(#content:not(:has(.zd))) .zc-rdp-chip-inactive{opacity:.7; font-style:italic;}
:where(#content:not(:has(.zd))) .zc-rdp-chip-x{border:0; background:transparent; color:inherit; padding:0 2px; line-height:1; cursor:pointer;}
:where(#content:not(:has(.zd))) .zc-rdp-placeholder{color:var(--text-muted); font-size:13px; align-self:center;}
:where(#content:not(:has(.zd))) .zc-rdp{position:relative;}
:where(#content:not(:has(.zd))) .zc-rdp-chips{align-items:center;}
:where(#content:not(:has(.zd))) .zc-rdp-toggle{order:99; margin-left:auto; border:0; background:transparent; color:var(--text-muted); padding:2px 6px; line-height:1; cursor:pointer;}
:where(#content:not(:has(.zd))) .zc-rdp-placeholder{cursor:pointer;}
:where(#content:not(:has(.zd))) .zc-rdp-open .zc-rdp-chips{border-color:var(--primary);}
:where(#content:not(:has(.zd))) .zc-rdp-panel{position:absolute; z-index:90010; /* same layer as SearchSelect lists */ box-sizing:border-box; top:calc(100% + 4px); left:0; right:0; padding:8px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--zc-radius); box-shadow:0 8px 24px rgba(16,24,40,.12);}
:where(#content:not(:has(.zd))) .zc-rdp-list{max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:6px;}
:where(#content:not(:has(.zd))) .zc-rdp-option{display:flex; align-items:center; margin:0; padding:6px 10px; cursor:pointer; font-size:14px;}
:where(#content:not(:has(.zd))) .zc-rdp-option:hover, :where(#content:not(:has(.zd))) .zc-rdp-option.selected{background:var(--hover-bg, rgba(0,0,0,.04));}
:where(#content:not(:has(.zd))) .zc-rdp-state{padding:6px 10px; color:var(--text-muted); font-size:13px;}

/* ── RC Verification (Vehicle Loan Requisition) ───────────────────────────
   Action bar, status notes and the verified-details card. Built only on theme tokens, so dark mode follows. */
:where(#content:not(:has(.zd))) .zc-rc{border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); padding:14px 16px; margin:8px 0 14px;}
:where(#content:not(:has(.zd))) .zc-rc-head{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; color:var(--text); margin-bottom:10px;}
:where(#content:not(:has(.zd))) .zc-rc-head .bi{color:var(--primary); font-size:16px;}
:where(#content:not(:has(.zd))) .zc-rc-action{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; min-height:31px;}
:where(#content:not(:has(.zd))) .zc-rc-btn{display:inline-flex; align-items:center; gap:7px; padding:6px 16px; font-size:13px; font-weight:600; border-radius:8px;
  color:#fff; background:var(--primary); border:1px solid var(--primary); box-shadow:var(--shadow); transition:background .15s, box-shadow .15s, transform .05s;}
:where(#content:not(:has(.zd))) .zc-rc-btn:hover:not(:disabled){background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; box-shadow:var(--shadow-md);}
:where(#content:not(:has(.zd))) .zc-rc-btn:active:not(:disabled){transform:translateY(1px);}
:where(#content:not(:has(.zd))) .zc-rc-btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
:where(#content:not(:has(.zd))) .zc-rc-btn:disabled{opacity:.6; cursor:not-allowed; color:#fff;}
:where(#content:not(:has(.zd))) .zc-rc-btn.secondary{color:var(--primary); background:var(--card-bg); border-color:var(--primary);}
:where(#content:not(:has(.zd))) .zc-rc-btn.secondary:hover:not(:disabled){color:#fff;}
:where(#content:not(:has(.zd))) .zc-rc-charge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted);}
:where(#content:not(:has(.zd))) .zc-rc-charge strong{color:var(--text); font-weight:600;}
:where(#content:not(:has(.zd))) .zc-rc-note{display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:9px 12px; border-radius:8px; font-size:12.8px; line-height:1.45; border:1px solid var(--border);}
:where(#content:not(:has(.zd))) .zc-rc-note .bi{font-size:15px; line-height:1.2; flex-shrink:0;}
:where(#content:not(:has(.zd))) .zc-rc-note.success{border-color:color-mix(in srgb, var(--success) 35%, var(--border)); background:color-mix(in srgb, var(--success) 9%, var(--card-bg)); color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-note.success .bi{color:var(--success);}
:where(#content:not(:has(.zd))) .zc-rc-note.error{border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); background:color-mix(in srgb, var(--danger) 8%, var(--card-bg)); color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-note.error .bi{color:var(--danger);}
:where(#content:not(:has(.zd))) .zc-rc-note.info{background:color-mix(in srgb, var(--info) 7%, var(--card-bg)); color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-note.info .bi{color:var(--info);}
:where(#content:not(:has(.zd))) .zc-rc-note.warn{border-color:color-mix(in srgb, var(--warning) 40%, var(--border)); background:color-mix(in srgb, var(--warning) 9%, var(--card-bg)); color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-note.warn .bi{color:var(--warning);}
:where(#content:not(:has(.zd))) .zc-rc-conflict{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px;}
:where(#content:not(:has(.zd))) .zc-rc-tag{display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:1px 7px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:1px;
  color:var(--success); background:color-mix(in srgb, var(--success) 12%, var(--card-bg));}
:where(#content:not(:has(.zd))) .zc-rc-tag.source{color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--card-bg));}
:where(#content:not(:has(.zd))) .zc-rc-tag.pending{color:var(--text-muted); background:color-mix(in srgb, var(--text-muted) 12%, var(--card-bg));}
:where(#content:not(:has(.zd))) .zc-rc-details{margin-top:12px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
:where(#content:not(:has(.zd))) .zc-rc-details-toggle{display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border:0; text-align:left;
  background:color-mix(in srgb, var(--body-bg) 70%, var(--card-bg)); color:var(--text); font-size:13px; font-weight:600;}
:where(#content:not(:has(.zd))) .zc-rc-details-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
:where(#content:not(:has(.zd))) .zc-rc-details-toggle .bi-chevron-down{transition:transform .15s;}
:where(#content:not(:has(.zd))) .zc-rc-details-toggle[aria-expanded="true"] .bi-chevron-down{transform:rotate(180deg);}
:where(#content:not(:has(.zd))) .zc-rc-details-body{padding:4px 14px 14px;}
:where(#content:not(:has(.zd))) .zc-rc-group-title{display:flex; align-items:center; gap:7px; margin:14px 0 8px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-group-title .bi{color:var(--primary); font-size:14px;}
/* RC Details: high-contrast inputs on the card background. Colours come from the theme tokens (near-black --text on the
   white light theme, light text in dark mode); border and placeholder are mixed from --text so they stay visible in both. */
:where(#content:not(:has(.zd))) .zc-rc-details-body{--zc-rc-input-border:color-mix(in srgb, var(--text) 38%, var(--card-bg)); color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-field-label{display:block; margin-bottom:3px; font-size:12px; font-weight:600; color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-req{color:var(--danger); font-weight:700; margin-left:2px;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-control,
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-select{min-height:31px; padding:5px 10px; font-size:13px; line-height:1.4; color:var(--text); background-color:var(--card-bg);
  border:1px solid var(--zc-rc-input-border); border-radius:var(--zc-radius, 6px); box-shadow:none;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-select option{color:var(--text); background-color:var(--card-bg);}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-control::placeholder{color:color-mix(in srgb, var(--text) 72%, var(--card-bg)); opacity:1;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-control:focus,
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-select:focus{border-color:var(--primary); outline:2px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset:0; box-shadow:none;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-control:disabled,
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-select:disabled{background-color:color-mix(in srgb, var(--body-bg) 60%, var(--card-bg)); color:var(--text); opacity:1;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-control.is-invalid,
:where(#content:not(:has(.zd))) .zc-rc-details-body .form-select.is-invalid{border-color:var(--danger);}
:where(#content:not(:has(.zd))) .zc-rc-details-body .invalid-feedback{color:var(--danger); font-weight:500;}
:where(#content:not(:has(.zd))) .zc-rc-details-body .zc-note{color:var(--text);}
:where(#content:not(:has(.zd))) .zc-rc-details .zc-rc-tag.pending{color:var(--text); background:color-mix(in srgb, var(--text) 10%, var(--card-bg));}