/* 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.
   --primary / --sidebar-bg / --body-bg / --text are overwritten at runtime
   by ThemeService from the resolved tenant branding (see theme.js). */

:root{
  --sidebar-w:260px;
  --sidebar-bg:#151c2c;
  --sidebar-bg-2:#1b2438;
  --sidebar-hover:#232e47;
  --sidebar-text:#aab4c8;
  --sidebar-text-active:#ffffff;
  --primary:#2757e8;
  --primary-dark:#1c41b8;
  --primary-light:#eaf0ff;
  --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 ===== */
#sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  z-index:1030; display:flex; flex-direction:column;
  transition:width .2s ease, transform .2s ease;
}
#sidebar.collapsed{width:74px;}
.brand{
  height:60px; display:flex; align-items:center; gap:10px; padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.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;}
#sidebar.collapsed .brand-text{display:none;}

.sidebar-search{padding:12px 14px;flex-shrink:0; position:relative;}
.sidebar-search input{
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#dfe3ee;
  border-radius:8px; font-size:12.5px; padding:7px 10px 7px 30px;
}
.sidebar-search input::placeholder{color:#6d7690;}
.sidebar-search input:focus{outline:none; border-color:var(--primary);}
.sidebar-search .bi{position:absolute; margin:9px 0 0 10px; color:#6d7690; font-size:12px;}
#sidebar.collapsed .sidebar-search{display:none;}

.nav-scroll{overflow-y:auto; overflow-x:hidden; flex:1; padding:4px 10px 20px;}
.nav-section-label{color:#5b6480; font-size:10.5px; font-weight:700; letter-spacing:1px; padding:18px 12px 8px;}
#sidebar.collapsed .nav-section-label{display:none;}
.sidebar-empty{padding:14px 12px; color:#6d7690; font-size:12px;}

.snav-item{margin-bottom:2px;}
.snav-link{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px;
  color:var(--sidebar-text); font-size:13.2px; font-weight:500; cursor:pointer; white-space:nowrap;
  position:relative; border:none; background:none; width:100%; text-align:left;
}
.snav-link .bi{font-size:15px; width:18px; text-align:center; flex-shrink:0;}
/* Custom uploaded SVG icons — width/height here are only the fallback for
   the rare case the inline style attribute (set per-item by
   NavigationItemView.RenderIcon from Item.IconSizePx, itself sourced from
   Module.IconSizePx via Module Manager, server-validated 16-40px) fails to
   apply; the inline style is what actually wins in every normal render.
   Still object-fit:contain (aspect ratio preserved, never cropped), no
   filter/mask/color override of any kind so the SVG's own colors render
   exactly as uploaded. Never a per-module hardcoded value in this file. */
.snav-icon-svg{width:24px; height:24px; object-fit:contain; flex-shrink:0;}
.snav-link .badge-count{margin-left:auto; font-size:10px; padding:2px 6px;}
.snav-link .chev{margin-left:auto; font-size:10px; transition:transform .15s; flex-shrink:0;}
.snav-item.open > .snav-link .chev{transform:rotate(90deg);}
.snav-link:hover{background:var(--sidebar-hover); color:#fff;}
.snav-item.active > .snav-link{background:var(--sidebar-hover); color:#fff;}
.snav-item.active > .snav-link::before{
  content:''; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; background:var(--primary); border-radius:2px;
}
.snav-link.disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
.snav-children{position:relative; max-height:0; overflow:hidden; transition:max-height .18s ease;}
.snav-item.open > .snav-children{max-height:2000px;}
/* Tree connector — vertical line down the child group, short horizontal tick
   per child. --tree-x/--tree-tick-end are set per nesting level (see
   NavigationItemView.ChildrenTreeStyle) purely from recursion depth, so this
   same pair of rules draws the connector correctly for any module, any child
   count, and any nesting depth — nothing here is module-specific. Hidden
   automatically while collapsed via the max-height:0/overflow:hidden above.
   2px/rgba(.32) chosen over the original 1px/rgba(.12) for legibility against
   the dark sidebar without being a bright distraction. */
.snav-children::before{
  content:''; position:absolute; left:var(--tree-x, 24px); top:0; bottom:0;
  width:2px; background:rgba(255,255,255,.32); border-radius:1px;
}
.snav-child{
  position:relative;
  display:block; padding:7px 12px 7px 44px; font-size:12.6px; color:#8a93ab; border-radius:7px; cursor:pointer;
  text-decoration:none;
}
.snav-child::before{
  content:''; position:absolute; left:var(--tree-x, 24px); top:50%;
  width:calc(var(--tree-tick-end, 38px) - var(--tree-x, 24px)); height:2px; background:rgba(255,255,255,.32); border-radius:1px;
}
.snav-child:hover{color:#fff; background:var(--sidebar-hover);}
.snav-child.active{color:#fff; background:var(--primary); font-weight:600;}
.snav-child.disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
#sidebar.collapsed .snav-link span.label, #sidebar.collapsed .snav-children, #sidebar.collapsed .chev{display:none;}
#sidebar.collapsed .snav-link{justify-content:center;}

.sidebar-foot{padding:12px 16px; border-top:1px solid rgba(255,255,255,.06); flex-shrink:0;}
.owner-chip{display:flex; align-items:center; gap:9px;}
.owner-avatar{width:32px;height:32px;border-radius:8px;background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}
.owner-chip .oc-name{color:#fff;font-size:12.5px;font-weight:600;}
.owner-chip .oc-role{color:#7a839c;font-size:10.5px;}
#sidebar.collapsed .owner-chip .oc-text{display:none;}

/* 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;}
#main.collapsed{margin-left:74px;}

#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){
  #sidebar{transform:translateX(-100%);}
  #sidebar.mobile-open{transform:translateX(0);}
  #main{margin-left:0 !important;}
  #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"] .snav-link, [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;}