@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Client registration wizard */
.client-registration-page .form-step { display: none; animation: registrationFadeIn .3s ease-in; }
.client-registration-page .form-step.active { display: block; }
.client-registration-page .is-invalid { border: 2px solid #dc3545 !important; background-color: #fff0f0; }
.client-registration-page .card { border: 0; border-radius: 15px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.client-registration-page .card-header { background: linear-gradient(110deg,var(--reg-primary,#0f3399),var(--reg-dark,#001284)); border-radius: 15px 15px 0 0; padding: 20px; }
.client-registration-page .card-header { display: block; text-align: center; }
.client-registration-page .card-header h3 { color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: .2rem !important; }
.client-registration-page .card-header p { color: rgba(255,255,255,.85); font-size: .95rem; }
.client-registration-page h5 { font-size: 1.05rem; }
.client-registration-page label, .client-registration-page .step { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.client-registration-page label { font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--text-body); }
.client-registration-page .form-control { border-radius: 8px; margin-bottom: 15px; padding: 12px; }
.client-registration-page .btn { border-radius: 8px; padding: 10px 20px; font-weight: 600; }
.client-registration-page .main-content { background: linear-gradient(135deg,#f7f9fd 0%,var(--reg-tint,#e2e7f4) 100%); min-height: 100vh; }
.client-registration-page .step-indicator { display: flex; justify-content: center; margin-bottom: 30px; }
.client-registration-page .step { width: 30px; height: 30px; border-radius: 50%; background: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px; font-weight: 700; transition: all .3s ease; }
.client-registration-page .step.active { background: var(--reg-primary,#0f3399); color: #fff; box-shadow: 0 0 0 4px rgba(var(--reg-primary-rgb,15,51,153),.15); }
.client-registration-page .step.completed { background: var(--reg-accent-text,#25a073); color: #fff; }
/* Theme colours replace the Bootstrap teal/green on the application form. */
.client-registration-page .text-info { color: var(--reg-primary,#0f3399) !important; }
.client-registration-page a.text-info:hover { color: var(--reg-dark,#001284) !important; }
.client-registration-page .btn-info { background: var(--reg-primary,#0f3399) !important; border-color: var(--reg-primary,#0f3399) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--reg-primary-rgb,15,51,153),.25); }
.client-registration-page .btn-info:hover, .client-registration-page .btn-info:focus { background: var(--reg-dark,#001284) !important; border-color: var(--reg-dark,#001284) !important; }
.client-registration-page .btn-success { background: var(--reg-accent,#20d959) !important; border-color: var(--reg-accent,#20d959) !important; color: var(--reg-dark,#001284) !important; }
.client-registration-page .btn-success:hover, .client-registration-page .btn-success:focus { filter: brightness(.94); }
.client-registration-page .btn-secondary { background: #fff !important; border: 1.5px solid var(--reg-primary,#0f3399) !important; color: var(--reg-primary,#0f3399) !important; }
.client-registration-page .btn-secondary:hover { background: var(--reg-tint,#e2e7f4) !important; }
.client-registration-page .form-control:focus, .client-registration-page .form-select:focus { border-color: var(--reg-primary,#0f3399) !important; box-shadow: 0 0 0 3px rgba(var(--reg-primary-rgb,15,51,153),.15) !important; }
.client-registration-page .form-check-input:checked { background-color: var(--reg-primary,#0f3399); border-color: var(--reg-primary,#0f3399); }
.client-registration-page .signature-wrapper { width: 100%; height: 150px; position: relative; overflow: hidden; background: #fff; border: 2px solid #dee2e6; border-radius: 8px; }
.client-registration-page #signature-pad { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.client-registration-page .signature-status { margin-top: .4rem; font-size: .875rem; }
.client-registration-page .signature-status.signed { color: #198754; }
.client-registration-page .signature-status.empty { color: #6c757d; }
@keyframes registrationFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --primary:          #123299;
  --primary-dark:     #0d2475;
  --primary-mid:      #1a3eb8;
  --primary-light:    rgba(18,50,153,.14);
  --primary-xlight:   rgba(18,50,153,.06);
  --secondary:        #20D959;
  --secondary-dark:   #17b849;
  --secondary-mid:    #1cc94f;
  --secondary-light:  rgba(32,217,89,.14);
  --secondary-xlight: rgba(32,217,89,.06);
  --success:          #16a34a;
  --success-bg:       #f0fdf4;
  --danger:           #dc2626;
  --danger-bg:        #fef2f2;
  --warning:          #d97706;
  --warning-bg:       #fffbeb;
  --info:             #2563eb;
  --info-bg:          #eff6ff;
  --purple:           #7c3aed;
  --purple-bg:        #f5f3ff;
  --teal:             #0d9488;
  --teal-bg:          #f0fdfa;
  --orange:           #ea580c;
  --orange-bg:        #fff7ed;
  --pink:             #db2777;
  --pink-bg:          #fdf2f8;
  --white:            #ffffff;
  --body-bg:          #f5f7fc;
  --sidebar-bg:       #123299;
  --text-dark:        #0f172a;
  --text-body:        #334155;
  --text-secondary:   #64748b;
  --text-muted:       #94a3b8;
  --border:           #e2e8f0;
  --border-light:     #f1f5f9;
  --sidebar-w:        256px;
  --topbar-h:         62px;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --shadow-xs: 0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 2px 8px rgba(18,50,153,.08),0 1px 3px rgba(15,23,42,.05);
  --shadow:    0 4px 20px rgba(18,50,153,.10),0 2px 6px rgba(15,23,42,.05);
  --shadow-md: 0 8px 30px rgba(18,50,153,.13),0 3px 8px rgba(15,23,42,.07);
  --shadow-lg: 0 16px 48px rgba(18,50,153,.16);
  --t: all .2s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--body-bg);color:var(--text-body);min-height:100vh;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--border-light)}::-webkit-scrollbar-thumb{background:#c7d2e8;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}
h1,h2,h3,h4,h5,h6{font-family:'Outfit',sans-serif;font-weight:700;font-size:12px; color:var(--text-dark);line-height:1.25}
p{color:var(--text-body)}
a{color:var(--primary);text-decoration:none;transition:var(--t)}
a:hover{color:var(--primary-mid)}
img{max-width:100%;display:block}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:1000;overflow:hidden;transition:var(--t);box-shadow:4px 0 24px rgba(18,50,153,.2)}
.sidebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(0deg,rgba(0,0,0,.16),transparent);pointer-events:none;z-index:0}

.sidebar-logo{padding:0 1.2rem;height:var(--topbar-h);display:flex;align-items:center;gap:.7rem;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;position:relative;z-index:1}
.sidebar-logo img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.14);padding:4px}
.sidebar-logo .brand-text{font-family:'Outfit',sans-serif;font-size:1.18rem;font-weight:900;color:#fff;letter-spacing:-.02em}
.sidebar-logo .brand-text span{color:var(--secondary)}

.sidebar-user{padding:.82rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.65rem;flex-shrink:0;position:relative;z-index:1}
.s-avatar{width:36px;height:36px;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:.8rem;color:#fff;flex-shrink:0;box-shadow:0 0 0 3px rgba(32,217,89,.28)}
.s-name{font-size:.81rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
.s-role{font-size:.65rem;color:rgba(255,255,255,.48);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}

.sidebar-nav{flex:1;padding:.4rem .72rem;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1}
.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}

.nav-group{font-size:var(--sb-group-size,17px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;color:rgba(255,255,255,.55);padding:.88rem .72rem .3rem}

.nav-link{display:flex;align-items:center;gap:.66rem;padding:.57rem .8rem;border-radius:8px;color:rgba(255,255,255,.66);font-size:var(--sb-link-size,12px);font-weight:500;cursor:pointer;transition:var(--t);position:relative;margin-bottom:1px;text-decoration:none}
.nav-link:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-link.active{background:rgba(255,255,255,.15);color:#fff;font-weight:700}
.nav-link.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--secondary);border-radius:0 3px 3px 0}
.nav-link .ni{width:18px;text-align:center;font-size:.88rem;flex-shrink:0;opacity:.74}
.nav-link.active .ni,.nav-link:hover .ni{opacity:1}
.nav-pill{margin-left:auto;background:var(--secondary);color:#fff;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:20px;min-width:18px;text-align:center}
.nav-pill.red{background:var(--danger)}

.sidebar-footer{padding:.62rem .72rem;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0;position:relative;z-index:1}
.sidebar-footer .nav-link{color:rgba(255,255,255,.48)}
.sidebar-footer .nav-link:hover{background:rgba(220,38,38,.18);color:#fca5a5}

/* ── LAYOUT ────────────────────────────────────────────────── */
.main-wrapper{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;background:var(--body-bg)}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;z-index:900;box-shadow:var(--shadow-xs);gap:1rem}
.topbar-left{display:flex;align-items:center;gap:.82rem;flex:1;min-width:0}
.hamburger{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);display:none;align-items:center;justify-content:center;cursor:pointer;transition:var(--t);flex-shrink:0}
.hamburger:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary)}
.topbar-title{font-family:'Outfit',sans-serif;font-size:.96rem;font-weight:800;color:var(--text-dark)}
.topbar-sub{font-size:.7rem;color:var(--text-muted);margin-top:1px}
.topbar-search{display:flex;align-items:center;gap:.48rem;background:var(--body-bg);border:1.5px solid var(--border);border-radius:8px;padding:.37rem .72rem;transition:var(--t);min-width:200px}
.topbar-search:focus-within{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px var(--primary-xlight)}
.topbar-search input{background:transparent;border:none;outline:none;color:var(--text-dark);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;width:100%}
.topbar-search input::placeholder{color:var(--text-muted)}
.topbar-search i{color:var(--text-muted);font-size:.78rem;flex-shrink:0}
.topbar-right{display:flex;align-items:center;gap:.38rem;flex-shrink:0}
.t-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t);position:relative;text-decoration:none;font-size:.87rem}
.t-btn:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary)}
.t-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid var(--white)}
.t-avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:.76rem;font-weight:800;cursor:pointer;border:2px solid var(--primary-light);transition:var(--t)}
.t-avatar:hover{box-shadow:0 0 0 3px var(--primary-light)}

/* ── PAGE ──────────────────────────────────────────────────── */
.page-content{flex:1;padding:1.4rem 1.5rem}
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.4rem}
.page-header .title{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text-dark)}
.page-header .sub{font-size:.74rem;color:var(--text-muted);margin-top:2px}

/* ── STATS GRID — 4 PER ROW ────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.stats-grid.g3{grid-template-columns:repeat(3,1fr)}
.stats-grid.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1250px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.stats-grid,.stats-grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats-grid,.stats-grid.g3,.stats-grid.g2{grid-template-columns:1fr 1fr;gap:.65rem}}

/* ── STAT CARD ─────────────────────────────────────────────── */
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.1rem .95rem;position:relative;overflow:hidden;transition:var(--t);text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--shadow-xs)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--primary-light)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3.5px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.stat-card.c-blue::before   {background:var(--primary)}
.stat-card.c-green::before  {background:var(--secondary)}
.stat-card.c-red::before    {background:var(--danger)}
.stat-card.c-orange::before {background:var(--warning)}
.stat-card.c-purple::before {background:var(--purple)}
.stat-card.c-teal::before   {background:var(--teal)}
.stat-card.c-pink::before   {background:var(--pink)}
.stat-card.c-indigo::before {background:var(--info)}

.stat-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.8rem}
.stat-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0}
.stat-ico.c-blue   {background:var(--primary-xlight);color:var(--primary)}
.stat-ico.c-green  {background:var(--secondary-xlight);color:var(--secondary-dark)}
.stat-ico.c-red    {background:var(--danger-bg);color:var(--danger)}
.stat-ico.c-orange {background:var(--orange-bg);color:var(--orange)}
.stat-ico.c-purple {background:var(--purple-bg);color:var(--purple)}
.stat-ico.c-teal   {background:var(--teal-bg);color:var(--teal)}
.stat-ico.c-pink   {background:var(--pink-bg);color:var(--pink)}
.stat-ico.c-indigo {background:var(--info-bg);color:var(--info)}

.stat-badge{font-size:.64rem;font-weight:700;display:flex;align-items:center;gap:.2rem;padding:2px 7px;border-radius:20px}
.stat-badge.up  {background:var(--secondary-light);color:var(--success)}
.stat-badge.down{background:var(--danger-bg);color:var(--danger)}
.stat-badge.flat{background:var(--border-light);color:var(--text-muted)}

.stat-value{font-family:'Outfit',sans-serif;font-size:1.42rem;font-weight:800;color:var(--text-dark);line-height:1.1;margin-bottom:.2rem}
.stat-value.sm{font-size:1.08rem}
.stat-label{font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.045em}
.stat-foot{margin-top:.65rem;padding-top:.6rem;border-top:1px solid var(--border-light);font-size:.69rem;color:var(--text-muted);display:flex;align-items:center;gap:.3rem}

/* ── CARD ──────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden}
.card-header{padding:.98rem 1.35rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;background:var(--white)}
.card-title{font-family:'Outfit',sans-serif;font-size:.91rem;font-weight:800;color:var(--text-dark);display:flex;align-items:center;gap:.42rem}
.card-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0}
.card-dot.green{background:var(--secondary)}
.card-sub{font-size:.73rem;color:var(--text-muted);margin-top:2px}
.card-body{padding:1.35rem}
.card-body.no-pad{padding:0}

/* ── TABLE ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.842rem}
.table thead tr{border-bottom:1.5px solid var(--border);background:var(--body-bg)}
.table thead th{padding:.76rem 1rem;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);white-space:nowrap;text-align:left}
.table tbody tr{border-bottom:1px solid var(--border-light);transition:background .14s}
.table tbody tr:last-child{border-bottom:none}
.table tbody tr:hover{background:var(--primary-xlight)}
.table tbody td{padding:.8rem 1rem;color:var(--text-body);vertical-align:middle}
.td-dark{color:var(--text-dark)!important;font-weight:600}
.cell-user{display:flex;align-items:center;gap:.58rem}
.cell-av{width:29px;height:29px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:800;flex-shrink:0}
.cell-name{font-size:.842rem;font-weight:600;color:var(--text-dark)}
.cell-sub{font-size:.72rem;color:var(--text-muted);margin-top:1px}

/* ── PAGINATION ────────────────────────────────────────────── */
.pag-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;padding:.82rem 1.35rem;border-top:1px solid var(--border);background:var(--white)}
.pag-info{font-size:.73rem;color:var(--text-muted)}
.pagination{display:flex;align-items:center;gap:.26rem}
.pg-btn{min-width:32px;height:32px;border-radius:7px;border:1.5px solid var(--border);background:var(--white);color:var(--text-secondary);font-size:.76rem;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t);padding:0 6px;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;white-space:nowrap}
.pg-btn:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary)}
.pg-btn.act{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(18,50,153,.22)}
.pg-btn.dis{opacity:.38;cursor:not-allowed;pointer-events:none}
.pg-dots{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.76rem}

/* DataTables pagination overrides */
.dataTables_wrapper .dataTables_paginate{padding:.82rem 1.35rem!important;border-top:1px solid var(--border)!important;display:flex!important;align-items:center!important;gap:.26rem;background:var(--white)}
.dataTables_wrapper .dataTables_paginate .paginate_button{min-width:32px!important;height:32px!important;border-radius:7px!important;border:1.5px solid var(--border)!important;background:var(--white)!important;color:var(--text-secondary)!important;font-size:.76rem!important;font-weight:600!important;padding:0 6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer;transition:var(--t)!important;margin:0!important;box-shadow:none!important;line-height:1!important}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--primary-xlight)!important;border-color:var(--primary-light)!important;color:var(--primary)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;box-shadow:0 2px 8px rgba(18,50,153,.22)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{opacity:.38!important;cursor:not-allowed!important;background:var(--white)!important;border-color:var(--border)!important;color:var(--text-muted)!important}
.dataTables_wrapper .dataTables_filter{padding:.88rem 1.35rem .35rem!important}
.dataTables_wrapper .dataTables_filter label{color:var(--text-muted)!important;font-size:.77rem!important;display:flex!important;align-items:center!important;gap:.5rem}
.dataTables_wrapper .dataTables_filter input{border:1.5px solid var(--border)!important;border-radius:8px!important;padding:.4rem .72rem!important;font-size:.82rem!important;color:var(--text-dark)!important;outline:none!important;background:var(--body-bg)!important;transition:var(--t)!important;font-family:'Plus Jakarta Sans',sans-serif!important}
.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--primary)!important;background:var(--white)!important;box-shadow:0 0 0 3px var(--primary-xlight)!important}
.dataTables_wrapper .dataTables_length{padding:.88rem 1.35rem .35rem!important}
.dataTables_wrapper .dataTables_length label{color:var(--text-muted)!important;font-size:.77rem!important}
.dataTables_wrapper .dataTables_length select{border:1.5px solid var(--border)!important;border-radius:7px!important;padding:.33rem .5rem!important;font-size:.8rem!important;color:var(--text-dark)!important;background:var(--body-bg)!important}
.dataTables_wrapper .dataTables_info{padding:.82rem 1.35rem!important;font-size:.73rem!important;color:var(--text-muted)!important}
.dt-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.88rem 1.35rem .3rem;border-bottom:1px solid var(--border-light)}

/* ── BADGES ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.22rem;padding:.22rem .62rem;border-radius:20px;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-danger {background:var(--danger-bg);color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-info   {background:var(--info-bg);color:var(--info)}
.badge-primary{background:var(--primary-xlight);color:var(--primary)}
.badge-green  {background:var(--secondary-light);color:var(--secondary-dark)}
.badge-purple {background:var(--purple-bg);color:var(--purple)}
.badge-muted  {background:var(--border-light);color:var(--text-muted)}

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group{margin-bottom:1.05rem}
.form-label{display:block;font-size:.75rem;font-weight:600;color:var(--text-body);margin-bottom:.36rem;text-transform:uppercase;letter-spacing:.045em}
.form-control,.form-select{width:100%;padding:.56rem .86rem;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text-dark);font-family:'Plus Jakarta Sans',sans-serif;font-size:.872rem;transition:var(--t);outline:none;line-height:1.5}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-xlight)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:80px}
.input-group{display:flex}
.input-group .form-control{border-radius:var(--r) 0 0 var(--r);flex:1;border-right:none}
.input-group-text{padding:0 .86rem;background:var(--body-bg);border:1.5px solid var(--border);border-radius:0 var(--r) var(--r) 0;color:var(--text-muted);font-size:.87rem;display:flex;align-items:center}
.form-help{font-size:.71rem;color:var(--text-muted);margin-top:.27rem}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.53rem 1.08rem;border-radius:var(--r);font-family:'Plus Jakarta Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:var(--t);border:none;outline:none;white-space:nowrap;text-decoration:none;line-height:1.4;letter-spacing:.01em}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(18,50,153,.22)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 16px rgba(18,50,153,.3);transform:translateY(-1px);color:#fff}
.btn-secondary{background:var(--secondary);color:#fff;box-shadow:0 2px 8px rgba(32,217,89,.22)}
.btn-secondary:hover{background:var(--secondary-dark);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-success{background:var(--secondary-light);color:var(--success);border:1.5px solid rgba(32,217,89,.3)}
.btn-success:hover{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1.5px solid rgba(220,38,38,.2)}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-warning{background:var(--warning-bg);color:var(--warning);border:1.5px solid rgba(217,119,6,.2)}
.btn-warning:hover{background:var(--warning);color:#fff}
.btn-info{background:var(--info-bg);color:var(--info);border:1.5px solid rgba(37,99,235,.2)}
.btn-info:hover{background:var(--info);color:#fff}
.btn-ghost{background:var(--white);color:var(--text-secondary);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary)}
.btn-sm{padding:.33rem .76rem;font-size:.77rem;border-radius:var(--r-sm)}
.btn-lg{padding:.7rem 1.5rem;font-size:.935rem}
.btn-icon{width:31px;height:31px;padding:0;border-radius:var(--r-sm)}
.btn-icon-sm{width:27px;height:27px;padding:0;border-radius:6px;font-size:.76rem}

/* ── MODALS ────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(3px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:translateY(14px) scale(.98);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-box.md{max-width:860px}
.modal-box.lg{max-width:1060px}
.modal-header{padding:1.05rem 1.35rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1;border-radius:var(--r-xl) var(--r-xl) 0 0}
.modal-title{font-family:'Outfit',sans-serif;font-size:.93rem;font-weight:800;color:var(--text-dark);display:flex;align-items:center;gap:.42rem}
.modal-ico{width:30px;height:30px;border-radius:7px;background:var(--primary-xlight);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.modal-close{width:30px;height:30px;border-radius:7px;border:1.5px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--t);display:flex;align-items:center;justify-content:center;font-size:.88rem}
.modal-close:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.modal-body{padding:1.35rem}
.modal-footer{padding:.88rem 1.35rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:.62rem;background:var(--body-bg);border-radius:0 0 var(--r-xl) var(--r-xl)}
.ajax-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:2.5rem;color:var(--text-muted);font-size:.83rem}
.spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .62s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── TOASTS ────────────────────────────────────────────────── */
.toast-container{position:fixed;top:1.2rem;right:1.2rem;z-index:9999;display:flex;flex-direction:column;gap:.42rem}
.toast{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:.76rem 1.02rem;display:flex;align-items:center;gap:.68rem;min-width:255px;max-width:380px;box-shadow:var(--shadow-md);animation:toastIn .26s ease,toastOut .26s ease 3.7s forwards}
.toast.t-success{border-left:3.5px solid var(--secondary)}.toast.t-danger{border-left:3.5px solid var(--danger)}.toast.t-warning{border-left:3.5px solid var(--warning)}.toast.t-info{border-left:3.5px solid var(--primary)}
.toast-ico{font-size:.98rem;flex-shrink:0}
.toast.t-success .toast-ico{color:var(--success)}.toast.t-danger .toast-ico{color:var(--danger)}.toast.t-warning .toast-ico{color:var(--warning)}.toast.t-info .toast-ico{color:var(--primary)}
.toast-msg{font-size:.836rem;color:var(--text-dark);font-weight:500;flex:1}
@keyframes toastIn{from{transform:translateX(50px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{from{opacity:1}to{opacity:0;pointer-events:none}}

/* ── DETAIL GRID ───────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.detail-item{background:var(--body-bg);border:1px solid var(--border);border-radius:8px;padding:.63rem .86rem}
.detail-item .lbl{font-size:.64rem;text-transform:uppercase;letter-spacing:.065em;color:var(--text-muted);margin-bottom:.18rem}
.detail-item .val{font-size:.872rem;font-weight:600;color:var(--text-dark)}
.detail-item.full{grid-column:1/-1}

/* ── PROGRESS ──────────────────────────────────────────────── */
.progress-wrap{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .5s ease}
.progress-fill.blue {background:linear-gradient(90deg,var(--primary),var(--primary-mid))}
.progress-fill.green{background:linear-gradient(90deg,var(--secondary-dark),var(--secondary))}
.progress-fill.red  {background:linear-gradient(90deg,var(--danger),#f87171)}

/* ── TIMELINE ──────────────────────────────────────────────── */
.timeline{position:relative;padding-left:1.5rem}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1rem}
.timeline-item::before{content:'';position:absolute;left:-1.25rem;top:4px;width:10px;height:10px;border-radius:50%;background:var(--secondary);border:2.5px solid var(--white);box-shadow:0 0 0 2px var(--secondary-light)}
.tl-date{font-size:.7rem;color:var(--text-muted);margin-bottom:.17rem}
.tl-amount{font-size:.88rem;font-weight:700;color:var(--success)}

/* ── NOTIFICATIONS ─────────────────────────────────────────── */
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:316px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;z-index:9999}
.notif-head{padding:.8rem 1.08rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-head-title{font-family:'Outfit',sans-serif;font-size:.87rem;font-weight:800;color:var(--text-dark)}
.notif-item{padding:.7rem 1.08rem;border-bottom:1px solid var(--border-light);transition:var(--t);cursor:pointer}
.notif-item:hover{background:var(--primary-xlight)}
.notif-item.unread{border-left:2.5px solid var(--secondary);background:var(--secondary-xlight)}
.notif-item-title{font-size:.81rem;font-weight:600;color:var(--text-dark)}
.notif-item-msg{font-size:.73rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.notif-item-time{font-size:.66rem;color:var(--primary);margin-top:2px}
.notif-foot{padding:.6rem;text-align:center;border-top:1px solid var(--border)}
.notif-foot a{font-size:.77rem;color:var(--primary);font-weight:600}

/* ── PILLS ─────────────────────────────────────────────────── */
.pills{display:flex;gap:.33rem;flex-wrap:wrap}
.pill{padding:.29rem .82rem;border-radius:20px;font-size:.74rem;font-weight:600;cursor:pointer;transition:var(--t);border:1.5px solid var(--border);background:var(--white);color:var(--text-secondary);text-decoration:none;display:inline-flex;align-items:center;gap:.26rem}
.pill:hover{border-color:var(--primary-light);color:var(--primary);background:var(--primary-xlight)}
.pill.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px rgba(18,50,153,.17)}

/* ── ACTION BTN ────────────────────────────────────────────── */
.action-btn{display:flex;align-items:center;gap:.7rem;padding:.6rem .86rem;border-radius:9px;border:1.5px solid var(--border);background:var(--white);color:var(--text-body);font-size:.84rem;font-weight:500;cursor:pointer;transition:var(--t);text-decoration:none;width:100%}
.action-btn:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary)}
.action-btn .a-ico{width:32px;height:32px;border-radius:8px;background:var(--primary-xlight);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0;transition:var(--t)}
.action-btn:hover .a-ico{background:var(--primary);color:#fff}

/* ── PENDING CARD ──────────────────────────────────────────── */
.pending-card{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--warning);border-radius:var(--r-lg);padding:1.02rem 1.28rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.72rem;box-shadow:var(--shadow-xs);transition:var(--t);margin-bottom:.68rem}
.pending-card:hover{box-shadow:var(--shadow);border-left-color:var(--primary)}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state{text-align:center;padding:3.2rem 1rem}
.empty-state i{font-size:2.1rem;color:var(--text-muted);opacity:.28;display:block;margin-bottom:.82rem}
.empty-state h3{font-size:.93rem;color:var(--text-secondary);margin-bottom:.28rem}
.empty-state p{font-size:.81rem;color:var(--text-muted)}

/* ── ALERT ─────────────────────────────────────────────────── */
.alert{padding:.75rem 1.08rem;border-radius:var(--r);display:flex;align-items:center;gap:.62rem;font-size:.842rem;font-weight:500;border:1px solid transparent;margin-bottom:1rem}
.alert-danger {background:var(--danger-bg);color:var(--danger);border-color:rgba(220,38,38,.14)}
.alert-success{background:var(--success-bg);color:var(--success);border-color:rgba(22,163,74,.14)}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:rgba(217,119,6,.14)}
.alert-info   {background:var(--info-bg);color:var(--info);border-color:rgba(37,99,235,.14)}

/* ── DROPDOWN ──────────────────────────────────────────────── */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);min-width:168px;padding:.33rem;box-shadow:var(--shadow-md);z-index:100;opacity:0;pointer-events:none;transform:translateY(-6px);transition:var(--t)}
.dropdown.open .dropdown-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:.52rem;padding:.5rem .7rem;border-radius:7px;color:var(--text-body);font-size:.836rem;cursor:pointer;transition:var(--t);text-decoration:none}
.dropdown-item:hover{background:var(--primary-xlight);color:var(--primary)}
.dropdown-item.danger:hover{background:var(--danger-bg);color:var(--danger)}
.dropdown-divider{border:none;border-top:1px solid var(--border);margin:.28rem 0}

/* ── LOGIN ─────────────────────────────────────────────────── */
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-brand{background:var(--primary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;position:relative;overflow:hidden}
.login-brand::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.06) 0%,transparent 55%),radial-gradient(ellipse at 72% 82%,rgba(32,217,89,.08) 0%,transparent 50%);pointer-events:none}
.login-brand-inner{position:relative;text-align:center;max-width:380px}
.login-logo-box{width:78px;height:78px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:1.95rem;color:var(--secondary);margin:0 auto 1.7rem}
.login-brand-inner h1{font-size:2.05rem;font-weight:900;color:#fff;margin-bottom:.7rem;letter-spacing:-.03em}
.login-brand-inner h1 span{color:var(--secondary)}
.login-brand-inner p{color:rgba(255,255,255,.58);font-size:.88rem;line-height:1.72}
.brand-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-top:2.4rem}
.brand-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.86rem;text-align:center}
.brand-stat-val{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:800;color:var(--secondary);display:block}
.brand-stat-lbl{font-size:.66rem;color:rgba(255,255,255,.48);margin-top:2px;text-transform:uppercase;letter-spacing:.065em}
.login-form-panel{background:var(--body-bg);display:flex;align-items:center;justify-content:center;padding:2.5rem}
.login-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.4rem 2.1rem;width:100%;max-width:415px;box-shadow:var(--shadow-md)}
.login-card h2{font-family:'Outfit',sans-serif;font-size:1.52rem;font-weight:900;color:var(--text-dark);margin-bottom:.28rem}
.login-card .sub{color:var(--text-muted);font-size:.83rem;margin-bottom:1.75rem}
.login-submit{width:100%;padding:.7rem;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-family:'Outfit',sans-serif;font-size:.97rem;font-weight:800;cursor:pointer;transition:var(--t);box-shadow:0 3px 12px rgba(18,50,153,.22)}
.login-submit:hover{background:var(--primary-dark);box-shadow:0 5px 20px rgba(18,50,153,.32);transform:translateY(-1px)}

/* ── UTILS ─────────────────────────────────────────────────── */
.text-primary {color:var(--primary)!important}
.text-green   {color:var(--success)!important}
.text-success {color:var(--success)!important}
.text-danger  {color:var(--danger)!important}
.text-warning {color:var(--warning)!important}
.text-info    {color:var(--info)!important}
.text-muted   {color:var(--text-muted)!important}
.text-dark    {color:var(--text-dark)!important}
.text-right{text-align:right}.text-center{text-align:center}.text-left{text-align:left}
.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-xs{font-size:.67rem}.fs-sm{font-size:.78rem}
.d-flex{display:flex}.d-none{display:none!important}.d-block{display:block}
.align-center{align-items:center}.align-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}
.flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.flex-1{flex:1;min-width:0}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.35rem}
.w-100{width:100%}.ms-auto{margin-left:auto}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.5rem}
.p-0{padding:0!important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1024px){.sidebar{transform:translateX(-100%);box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}.main-wrapper{margin-left:0}.hamburger{display:flex}.grid-3{grid-template-columns:1fr 1fr}.login-page{grid-template-columns:1fr}.login-brand{display:none}}
@media(max-width:640px){.page-content{padding:1rem}.stats-grid{grid-template-columns:1fr 1fr;gap:.65rem}.detail-grid{grid-template-columns:1fr}.grid-2,.grid-3{grid-template-columns:1fr}.modal-box{max-height:95vh}.topbar-search{display:none!important}}
/* =========================================================
   CLIENTS PAGE
========================================================= */

.clients-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1rem;
}

.clients-card{
    border:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(15,23,42,.06);
}

.clients-toolbar{
    background:#fff;
    border-bottom:1px solid #eef2f7;
    padding:1rem;
}

.clients-search-form{
    max-width:760px;
}

.client-table-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.clients-table{
    min-width:1180px;
    margin-bottom:0;
}

.clients-table thead th{
    background:#f8fafc;
    color:#334155;
    font-size:.76rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
    border-bottom:1px solid #e5e7eb;
}

.clients-table td{
    vertical-align:middle;
    white-space:nowrap;
}

.text-truncate-cell{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.action-buttons{
    display:flex;
    gap:.35rem;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
}

.clients-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding:1rem;
    background:#fff;
    border-top:1px solid #eef2f7;
}

.pagination-info{
    font-size:.9rem;
    color:#64748b;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){
    .clients-stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:576px){

    .clients-stats-grid{
        grid-template-columns:1fr;
    }

    .clients-pagination{
        align-items:flex-start;
        flex-direction:column;
    }

    .clients-table{
        min-width:1000px;
    }
}
/* ================================================================
   loanPro.css — Loan view page styles
   Depends on the global design-token variables defined in main CSS
================================================================ */

/* ── PAGE SHELL ─────────────────────────────────────────────── */
.loan-view-page {
    background: var(--body-bg);
    min-height: 100vh;
}

/* ── HERO BANNER ────────────────────────────────────────────── */
.loan-hero {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    margin-bottom: 1.25rem;
}

.loan-hero-title {
    margin: 0;
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
}

.loan-hero-subtitle {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
}

.loan-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    letter-spacing: .02em;
}

/* ── TAB NAVIGATION ─────────────────────────────────────────── */
.loan-tabs-wrapper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: .85rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1.25rem;
    /* hide scrollbar but keep scrollability */
    scrollbar-width: none;
}
.loan-tabs-wrapper::-webkit-scrollbar { display: none; }

.loan-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .65rem;
    width: max-content;
    min-width: 100%;
}

.loan-tabs .nav-item {
    flex: 0 0 auto;
}

.loan-tabs .nav-link {
    white-space: nowrap;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 14px;
    padding: .78rem 1rem;
    font-size: .84rem;
    font-weight: 700;
    transition: all .2s ease;
    cursor: pointer;
}

.loan-tabs .nav-link:hover {
    background: #eff6ff;
    color: var(--primary);
    border-color: var(--primary-light);
}

.loan-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(18, 50, 153, .25);
}

/* ── TAB CONTENT CARD ───────────────────────────────────────── */
.loan-tab-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    overflow: hidden;
}

.loan-tab-header {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.loan-tab-header h5 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 900;
    font-size: .95rem;
}

.loan-tab-header p {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── KPI GRID ───────────────────────────────────────────────── */
.loan-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.loan-kpi {
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    background: #fff;
    border-radius: 16px;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    transition: box-shadow .2s;
}
.loan-kpi:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.loan-kpi.success { border-left-color: var(--success); }
.loan-kpi.warning { border-left-color: var(--warning); }
.loan-kpi.danger  { border-left-color: var(--danger); }

.loan-kpi-label {
    margin: 0 0 .35rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.loan-kpi-value {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.22rem;
    font-weight: 900;
}

/* ── INFO GRID ──────────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: 1.25rem;
}

.info-item {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: .95rem 1rem;
    background: #f8fafc;
}

.info-label {
    display: block;
    color: var(--text-muted);
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .3rem;
}

.info-value {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 700;
}

/* ── PAYMENT TABLE ──────────────────────────────────────────── */
.loan-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.loan-table thead th {
    background: #f8fafc;
    color: #334155;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .45px;
    font-weight: 800;
    border-bottom: 1px solid #e5e7eb;
    padding: .9rem 1.1rem;
    white-space: nowrap;
}

.loan-table tbody td {
    padding: .88rem 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: .86rem;
    color: var(--text-body);
}

.loan-table tbody tr:last-child td {
    border-bottom: none;
}

.loan-table tbody tr:hover td {
    background: #f8fafc;
}

/* ── PAYMENT FORM ───────────────────────────────────────────── */
.payment-form-box {
    padding: 1.25rem 1.4rem;
}

.payment-input {
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid #dbe2ea;
    padding: 0 .9rem;
    font-size: .9rem;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.payment-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-xlight);
}

/* ── SOFT BADGES ────────────────────────────────────────────── */
.badge-soft-success   { background: #dcfce7; color: #166534; }
.badge-soft-primary   { background: #dbeafe; color: #1e40af; }
.badge-soft-warning   { background: #fef3c7; color: #92400e; }
.badge-soft-danger    { background: #fee2e2; color: #991b1b; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.loan-empty-state {
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
}
.loan-empty-state i {
    font-size: 2rem;
    margin-bottom: .75rem;
    display: block;
    opacity: .35;
}
.loan-empty-state p {
    margin: 0;
    font-size: .875rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .loan-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .loan-kpi-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }

    .loan-hero-title {
        font-size: 1.1rem;
    }
}

/* ================================================================
   CLIENTS PAGE FINAL FIXES
   Use these classes in clients.php instead of inline CSS.
================================================================ */

.clients-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

.clients-card{
  border:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(15,23,42,.06);
}

.clients-toolbar{
  background:var(--white);
  border-bottom:1px solid #eef2f7;
  padding:1rem;
}

.clients-search-form{
  max-width:760px;
  width:100%;
}

.client-table-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.clients-table{
  min-width:1180px;
  margin-bottom:0;
}

.clients-table thead th{
  background:#f8fafc;
  color:#334155;
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  border-bottom:1px solid #e5e7eb;
}

.clients-table td{
  vertical-align:middle;
  white-space:nowrap;
}

.text-truncate-cell,
.client-business-cell{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.action-buttons{
  display:flex;
  gap:.35rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap;
}

.clients-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1rem;
  background:var(--white);
  border-top:1px solid #eef2f7;
}

.pagination-info{
  font-size:.9rem;
  color:#64748b;
}

.modal-box.xl{
  max-width:1180px;
}

.modal-error-box{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#be123c;
  border-radius:12px;
  padding:1rem;
}

.client-modal-partial,
.modal-partial,
[data-modal-content]{
  width:100%;
}

#clientModalBody .card,
.modal-body .card{
  box-shadow:none;
}

@media(max-width:1200px){
  .clients-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:576px){
  .clients-stats-grid{
    grid-template-columns:1fr;
  }

  .clients-pagination{
    align-items:flex-start;
    flex-direction:column;
  }

  .clients-table{
    min-width:1000px;
  }
}

/* ===== STAT CARDS GRID ===== */
.stats-row {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.stats-col {
    padding: 10px;
    width: 25%;
}

@media (max-width: 992px) {
    .stats-col { width: 50%; }
}

@media (max-width: 576px) {
    .stats-col { width: 100%; }
}

/* ===== STAT CARD ===== */
.stat-card {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.06);
    position: relative;
    height: 100%;
    padding: 18px;
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
}

.border-primary-band::before { background: #0d6efd; }
.border-success-band::before { background: #198754; }
.border-warning-band::before { background: #f59e0b; }
.border-dark-band::before { background: #111827; }

.stat-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.stat-label {
    font-size: .75rem;
    font-weight: 700;
    color: #6b7280;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

/* ===== PAGINATION ===== */
.pagination .page-link {
    border-radius: 8px;
    margin: 0 3px;
    color: #344767;
}

.pagination .active .page-link {
    background: linear-gradient(45deg,#4facfe,#00f2fe);
    border: none;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    opacity: 0.5;
}
/* ── PAGE SHELL ─────────────────────────────────────────────── */
.loan-view-page {
    background: var(--body-bg);
    min-height: 100vh;
}
 
/* ── HERO BANNER ────────────────────────────────────────────── */
.loan-hero {
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    color: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    margin-bottom: 1.25rem;
}
 
.loan-hero-title {
    margin: 0;
    color: #fff;
    font-weight: 900;
    font-size: 1.3rem;
}
 
.loan-hero-subtitle {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
}
 
.loan-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    letter-spacing: .02em;
}
 
/* ── TAB NAVIGATION ─────────────────────────────────────────── */
.loan-tabs-wrapper {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: .85rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1.25rem;
    /* hide scrollbar but keep scrollability */
    scrollbar-width: none;
}
.loan-tabs-wrapper::-webkit-scrollbar { display: none; }
 
.loan-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .65rem;
    width: max-content;
    min-width: 100%;
}
 
.loan-tabs .nav-item {
    flex: 0 0 auto;
}
 
.loan-tabs .nav-link {
    white-space: nowrap;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    border-radius: 14px;
    padding: .78rem 1rem;
    font-size: .84rem;
    font-weight: 700;
    transition: all .2s ease;
    cursor: pointer;
}
 
.loan-tabs .nav-link:hover {
    background: #eff6ff;
    color: var(--primary);
    border-color: var(--primary-light);
}
 
.loan-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(18, 50, 153, .25);
}
 
/* ── TAB PANE VISIBILITY (overrides any global display rules) ── */
/*
   Bootstrap sets .tab-pane { display: block } and relies on
   .fade opacity + JS .show class. If the global stylesheet
   overrides display, panes all appear at once.
   These rules enforce correct hide/show regardless of load order.
*/
#loanTabsContent .tab-pane {
    display: none !important;
    opacity: 0;
    transition: opacity .18s ease;
}
 
#loanTabsContent .tab-pane.active {
    display: block !important;
}
 
#loanTabsContent .tab-pane.show {
    opacity: 1;
}
 
/* ── TAB CONTENT CARD ───────────────────────────────────────── */
.loan-tab-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    overflow: hidden;
}
 
.loan-tab-header {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #eef2f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
 
.loan-tab-header h5 {
    margin: 0;
    color: var(--text-dark);
    font-weight: 900;
    font-size: .95rem;
}
 
.loan-tab-header p {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .82rem;
}
 
/* ── KPI GRID ───────────────────────────────────────────────── */
.loan-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}
 
.loan-kpi {
    border: 1px solid var(--border);
    border-left: 5px solid var(--primary);
    background: #fff;
    border-radius: 16px;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    transition: box-shadow .2s;
}
.loan-kpi:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
 
.loan-kpi.success { border-left-color: var(--success); }
.loan-kpi.warning { border-left-color: var(--warning); }
.loan-kpi.danger  { border-left-color: var(--danger); }
 
.loan-kpi-label {
    margin: 0 0 .35rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
 
.loan-kpi-value {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.22rem;
    font-weight: 900;
}
 
/* ── INFO GRID ──────────────────────────────────────────────── */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: 1.25rem;
}
 
.info-item {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: .95rem 1rem;
    background: #f8fafc;
}
 
.info-label {
    display: block;
    color: var(--text-muted);
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .3rem;
}
 
.info-value {
    color: var(--text-dark);
    font-size: .9rem;
    font-weight: 700;
}
 
/* ── PAYMENT TABLE ──────────────────────────────────────────── */
.loan-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
 
.loan-table thead th {
    background: #f8fafc;
    color: #334155;
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .45px;
    font-weight: 800;
    border-bottom: 1px solid #e5e7eb;
    padding: .9rem 1.1rem;
    white-space: nowrap;
}
 
.loan-table tbody td {
    padding: .88rem 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: .86rem;
    color: var(--text-body);
}
 
.loan-table tbody tr:last-child td {
    border-bottom: none;
}
 
.loan-table tbody tr:hover td {
    background: #f8fafc;
}
 
/* ── PAYMENT FORM ───────────────────────────────────────────── */
.payment-form-box {
    padding: 1.25rem 1.4rem;
}
 
.payment-input {
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid #dbe2ea;
    padding: 0 .9rem;
    font-size: .9rem;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
 
.payment-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-xlight);
}
 
/* ── SOFT BADGES ────────────────────────────────────────────── */
.badge-soft-success   { background: #dcfce7; color: #166534; }
.badge-soft-primary   { background: #dbeafe; color: #1e40af; }
.badge-soft-warning   { background: #fef3c7; color: #92400e; }
.badge-soft-danger    { background: #fee2e2; color: #991b1b; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
 
/* ── EMPTY STATE ────────────────────────────────────────────── */
.loan-empty-state {
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
}
.loan-empty-state i {
    font-size: 2rem;
    margin-bottom: .75rem;
    display: block;
    opacity: .35;
}
.loan-empty-state p {
    margin: 0;
    font-size: .875rem;
}
 
/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .loan-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
 
@media (max-width: 767px) {
    .loan-kpi-grid,
    .info-grid {
        grid-template-columns: 1fr;
    }
 
    .loan-hero-title {
        font-size: 1.1rem;
    }
}

/* =========================================================
   CLIENT PROFILE PAGE
========================================================= */

.client-profile-page{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:1.25rem;
    align-items:start;
}

.client-profile-sidebar,
.client-profile-content{
    min-width:0;
}

/* =========================================================
   MAIN CARDS
========================================================= */

.client-main-card,
.profile-tab-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}

.client-main-card{
    padding:1.5rem;
    position:sticky;
    top:1rem;
    text-align:center;
}

/* =========================================================
   AVATAR
========================================================= */

.client-avatar-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:1rem;
}

.client-avatar-img,
.client-avatar-fallback{
    width:105px;
    height:105px;
    border-radius:50%;
}

.client-avatar-img{
    object-fit:cover;
    border:4px solid #eef2ff;
    background:#f8fafc;
}

.client-avatar-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#ffffff;
    font-size:2rem;
    font-weight:800;
    letter-spacing:1px;
    box-shadow:0 8px 24px rgba(37,99,235,.2);
}

/* =========================================================
   PROFILE TEXT
========================================================= */

.client-main-card h3{
    font-size:1.15rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:.2rem;
}

.client-main-card p{
    font-size:.82rem;
    color:#64748b;
    margin-bottom:1rem;
}

/* =========================================================
   STATUS BADGES
========================================================= */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    padding:.45rem .75rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:700;
    border:none;
    white-space:nowrap;
}

.badge-success{
    background:#dcfce7;
    color:#166534;
}

.badge-danger{
    background:#fee2e2;
    color:#991b1b;
}

.badge-primary{
    background:#dbeafe;
    color:#1d4ed8;
}

.badge-warning{
    background:#fef3c7;
    color:#92400e;
}

.badge-muted{
    background:#f1f5f9;
    color:#475569;
}

/* =========================================================
   MINI STATS
========================================================= */

.profile-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.7rem;
    margin:1.25rem 0;
}

.profile-mini-grid div{
    border:1px solid #e5e7eb;
    background:#f8fafc;
    border-radius:14px;
    padding:.9rem .45rem;
}

.profile-mini-grid strong{
    display:block;
    font-size:.88rem;
    color:#0f172a;
    margin-bottom:.15rem;
    font-weight:800;
}

.profile-mini-grid span{
    display:block;
    font-size:.68rem;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.4px;
}

/* =========================================================
   HORIZONTAL TABS
========================================================= */

.profile-tabs-horizontal{
    display:flex;
    gap:.65rem;
    padding:1rem;
    border-bottom:1px solid #e5e7eb;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:thin;
}

.profile-tabs-horizontal::-webkit-scrollbar{
    height:6px;
}

.profile-tabs-horizontal::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:20px;
}

.profile-tab-btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border:1px solid #dbe3ec;
    background:#ffffff;
    color:#475569;
    border-radius:14px;
    padding:.72rem 1rem;
    font-size:.82rem;
    font-weight:700;
    cursor:pointer;
    transition:all .25s ease;
    flex-shrink:0;
}

.profile-tab-btn i{
    font-size:.78rem;
}

.profile-tab-btn:hover{
    background:#eff6ff;
    color:#2563eb;
    border-color:#bfdbfe;
}

.profile-tab-btn.active{
    background:#2563eb;
    color:#ffffff;
    border-color:#2563eb;
    box-shadow:0 6px 18px rgba(37,99,235,.2);
}

/* =========================================================
   TAB CONTENT
========================================================= */

.profile-tab-content{
    padding:1.4rem;
}

.profile-tab-pane{
    display:none;
    animation:fadeIn .25s ease;
}

.profile-tab-pane.active{
    display:block;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(4px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* =========================================================
   SECTION TITLES
========================================================= */

.profile-section-title{
    margin-bottom:1.15rem;
}

.profile-section-title h4{
    font-size:1rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:.2rem;
}

.profile-section-title p{
    color:#64748b;
    font-size:.82rem;
    margin:0;
}

/* =========================================================
   DETAILS GRID
========================================================= */

.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.detail-item{
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#ffffff;
    padding:1rem;
}

.detail-item .lbl{
    font-size:.72rem;
    font-weight:700;
    color:#64748b;
    text-transform:uppercase;
    margin-bottom:.35rem;
    letter-spacing:.5px;
}

.detail-item .val{
    font-size:.92rem;
    font-weight:700;
    color:#0f172a;
    word-break:break-word;
}

/* =========================================================
   DOCUMENTS
========================================================= */

.profile-doc-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.client-doc-card{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#ffffff;
    padding:1rem;
    transition:.2s ease;
}

.client-doc-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.doc-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2563eb;
    font-size:1rem;
    flex-shrink:0;
}

.doc-icon.muted{
    background:#f1f5f9;
    color:#64748b;
}

.client-doc-card strong{
    display:block;
    font-size:.88rem;
    margin-bottom:.3rem;
    color:#0f172a;
}

.client-doc-card p{
    margin:0 0 .7rem;
    color:#64748b;
    font-size:.76rem;
}

/* =========================================================
   TABLES
========================================================= */

.client-table-scroll{
    overflow-x:auto;
    width:100%;
}

.clients-table{
    width:100%;
    min-width:1000px;
    border-collapse:separate;
    border-spacing:0;
}

.clients-table thead th{
    position:sticky;
    top:0;
    z-index:1;
    background:#f8fafc;
    color:#475569;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.4px;
    border-bottom:1px solid #e5e7eb;
    padding:.9rem .85rem;
    font-weight:800;
}

.clients-table tbody td{
    padding:.9rem .85rem;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
    font-size:.85rem;
    color:#0f172a;
    background:#ffffff;
}

.clients-table tbody tr:hover td{
    background:#f8fbff;
}

/* =========================================================
   STAT CARDS
========================================================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1rem;
}

.stat-card{
    background:#ffffff;
    border-radius:18px;
    border:1px solid #e5e7eb;
    padding:1.15rem;
    box-shadow:0 3px 12px rgba(15,23,42,.04);
}

.stat-value{
    font-size:1.15rem;
    font-weight:900;
    color:#0f172a;
    margin-bottom:.35rem;
}

.stat-value.sm{
    font-size:1.4rem;
}

.stat-label{
    color:#64748b;
    font-size:.8rem;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    border:none;
    border-radius:12px;
    padding:.75rem 1rem;
    font-weight:700;
    font-size:.82rem;
    cursor:pointer;
    text-decoration:none;
    transition:.2s ease;
}

.btn-primary{
    background:#2563eb;
    color:#ffffff;
}

.btn-primary:hover{
    background:#1d4ed8;
}

.btn-danger{
    background:#dc2626;
    color:#ffffff;
}

.btn-success{
    background:#16a34a;
    color:#ffffff;
}

.btn-ghost{
    background:#ffffff;
    border:1px solid #dbe3ec;
    color:#334155;
}

.btn-outline{
    border:1px solid #cbd5e1;
    background:#ffffff;
    color:#334155;
}

.btn:hover{
    transform:translateY(-1px);
}

/* =========================================================
   FORM CONTROLS
========================================================= */

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-label{
    font-size:.76rem;
    font-weight:700;
    color:#475569;
    margin-bottom:.45rem;
}

.form-control{
    width:100%;
    border:1px solid #dbe3ec;
    border-radius:12px;
    background:#ffffff;
    padding:.8rem .95rem;
    font-size:.86rem;
    transition:.2s ease;
}

.form-control:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state{
    padding:2.5rem 1rem;
    text-align:center;
}

.empty-state i{
    font-size:2rem;
    color:#94a3b8;
    margin-bottom:.7rem;
}

.empty-state h3{
    font-size:1rem;
    color:#0f172a;
    margin-bottom:.25rem;
}

.empty-state p{
    color:#64748b;
    font-size:.82rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){
    .client-profile-page{
        grid-template-columns:1fr;
    }

    .client-main-card{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){

    .detail-grid,
    .profile-doc-grid,
    .grid-2,
    .stats-grid{
        grid-template-columns:1fr;
    }

    .profile-mini-grid{
        grid-template-columns:1fr;
    }

    .profile-tab-content{
        padding:1rem;
    }

    .profile-tabs-horizontal{
        padding:.8rem;
    }
}


/* =========================================================
   FINAL PROFESSIONAL OVERRIDES
   Clients, Client Profile, Loan Tabs, Reports, Reusable Modals
========================================================= */

:root{
    --modal-sm:450px;
    --modal-md:700px;
    --modal-lg:700px;
    --modal-xl:900px;
    --modal-full:1400px;
}

/* ---------- reusable grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}

/* ---------- reusable table scrolling ---------- */
.table-responsive,.table-wrap,.client-table-scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

.clients-table,.loans-report-table{
    min-width:1180px;
    width:100%;
    margin-bottom:0;
}

.clients-table thead th,.loans-report-table thead th{
    background:#f8fafc;
    color:#334155;
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
    border-bottom:1px solid #e5e7eb;
    padding:.9rem .85rem;
}

.clients-table tbody td,.loans-report-table tbody td{
    vertical-align:middle;
    white-space:nowrap;
    padding:.9rem .85rem;
    border-bottom:1px solid #eef2f7;
}

.clients-table tbody tr:hover td,.loans-report-table tbody tr:hover td{
    background:#f8fbff;
}

.text-truncate-cell,.client-business-cell{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------- clients page ---------- */
.clients-stats-grid,.loans-report-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1rem;
}

.clients-card{
    border:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(15,23,42,.06);
    background:#fff;
}

.clients-toolbar{
    background:#fff;
    border-bottom:1px solid #eef2f7;
    padding:1rem;
}

.clients-search-form{
    max-width:760px;
    width:100%;
}

.clients-search-form.w-100{
    max-width:100%;
}

.action-buttons{
    display:flex;
    gap:.35rem;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:nowrap;
}

.clients-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding:1rem;
    background:#fff;
    border-top:1px solid #eef2f7;
}

.pagination-info{
    font-size:.86rem;
    color:#64748b;
}

/* ---------- stat cards with left border band ---------- */
.stat-card.stat-left,.stat-card.border-band{
    border-left:5px solid var(--primary);
}

.stat-card.stat-left.c-blue,.stat-card.border-primary-band{border-left-color:var(--primary);}
.stat-card.stat-left.c-green,.stat-card.border-success-band{border-left-color:var(--success);}
.stat-card.stat-left.c-red,.stat-card.border-danger-band{border-left-color:var(--danger);}
.stat-card.stat-left.c-orange,.stat-card.border-warning-band{border-left-color:var(--warning);}
.stat-card.stat-left.c-indigo{border-left-color:var(--info);}

/* ---------- custom modal system ---------- */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(4px);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:all .2s ease;
}

.modal-overlay.open{
    opacity:1;
    visibility:visible;
    pointer-events:all;
}

.modal-box{
    width:100%;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(15,23,42,.25);
    transform:translateY(12px) scale(.98);
    transition:all .2s ease;
    display:flex;
    flex-direction:column;
    max-height:92vh;
    border:1px solid #e5e7eb;
}

.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-box.sm{max-width:var(--modal-sm);}
.modal-box.md{max-width:var(--modal-md);}
.modal-box.lg{max-width:var(--modal-lg);}
.modal-box.xl{max-width:var(--modal-xl);}
.modal-box.full{max-width:var(--modal-full);}

.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1rem 1.25rem;
    border-bottom:1px solid #eef2f7;
    background:#fff;
    flex-shrink:0;
}

.modal-title{
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:800;
    color:#0f172a;
}

.modal-ico{
    width:40px;
    height:40px;
    border-radius:12px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-close{
    width:36px;
    height:36px;
    border:none;
    border-radius:10px;
    background:#f8fafc;
    cursor:pointer;
    transition:all .2s ease;
    color:#64748b;
}

.modal-close:hover{
    background:#fee2e2;
    color:#dc2626;
}

.modal-body{
    padding:1.25rem;
    overflow-y:auto;
    background:#f8fafc;
    flex:1;
}

.modal-footer{
    padding:1rem 1.25rem;
    border-top:1px solid #eef2f7;
    background:#fff;
    display:flex;
    justify-content:flex-end;
    gap:.5rem;
    flex-shrink:0;
}

.modal-error-box{
    background:#fff1f2;
    border:1px solid #fecdd3;
    color:#be123c;
    border-radius:12px;
    padding:1rem;
}

/* ---------- professional client profile page ---------- */
.client-profile-page{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:1.25rem;
    align-items:start;
}

.client-profile-sidebar,.client-profile-content{min-width:0;}

.client-main-card,.profile-tab-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    box-shadow:0 4px 14px rgba(15,23,42,.05);
}

.client-main-card{
    padding:1.5rem;
    position:sticky;
    top:1rem;
    text-align:center;
}

.client-avatar-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:1rem;
}

.client-avatar-img,.client-avatar-fallback{
    width:105px;
    height:105px;
    border-radius:50%;
}

.client-avatar-img{
    object-fit:cover;
    border:4px solid #eef2ff;
    background:#f8fafc;
}

.client-avatar-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-mid));
    color:#fff;
    font-size:2rem;
    font-weight:900;
    letter-spacing:1px;
    box-shadow:0 8px 24px rgba(37,99,235,.2);
}

.client-main-card h3{
    font-size:1.15rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:.2rem;
}

.client-main-card p{
    font-size:.82rem;
    color:#64748b;
    margin-bottom:1rem;
}

.profile-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.7rem;
    margin:1.25rem 0;
}

.profile-mini-grid div{
    border:1px solid #e5e7eb;
    background:#f8fafc;
    border-radius:14px;
    padding:.9rem .45rem;
}

.profile-mini-grid strong{
    display:block;
    font-size:.88rem;
    color:#0f172a;
    margin-bottom:.15rem;
    font-weight:800;
}

.profile-mini-grid span{
    display:block;
    font-size:.68rem;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.profile-tabs-horizontal{
    display:flex;
    gap:.65rem;
    padding:1rem;
    border-bottom:1px solid #e5e7eb;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:thin;
}

.profile-tabs-horizontal::-webkit-scrollbar{height:6px;}
.profile-tabs-horizontal::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:20px;}

.profile-tab-btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    border:1px solid #dbe3ec;
    background:#fff;
    color:#475569;
    border-radius:14px;
    padding:.72rem 1rem;
    font-size:.82rem;
    font-weight:700;
    cursor:pointer;
    transition:all .25s ease;
    flex-shrink:0;
}

.profile-tab-btn:hover{
    background:#eff6ff;
    color:#2563eb;
    border-color:#bfdbfe;
}

.profile-tab-btn.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 6px 18px rgba(37,99,235,.2);
}

.profile-tab-content{padding:1.4rem;}

.profile-tab-pane{
    display:none;
    animation:fadeIn .25s ease;
}

.profile-tab-pane.active{display:block;}

@keyframes fadeIn{
    from{opacity:0;transform:translateY(4px);}
    to{opacity:1;transform:none;}
}

.profile-section-title{margin-bottom:1.15rem;}

.profile-section-title h4{
    font-size:1rem;
    font-weight:800;
    color:#0f172a;
    margin-bottom:.2rem;
}

.profile-section-title p{
    color:#64748b;
    font-size:.82rem;
    margin:0;
}

.detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.detail-item{
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    padding:1rem;
}

.detail-item .lbl{
    font-size:.72rem;
    font-weight:700;
    color:#64748b;
    text-transform:uppercase;
    margin-bottom:.35rem;
    letter-spacing:.5px;
}

.detail-item .val{
    font-size:.92rem;
    font-weight:700;
    color:#0f172a;
    word-break:break-word;
}

.profile-doc-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.client-doc-card{
    display:flex;
    gap:.9rem;
    align-items:flex-start;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    padding:1rem;
    transition:.2s ease;
}

.client-doc-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.doc-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eff6ff;
    color:#2563eb;
    font-size:1rem;
    flex-shrink:0;
}

.doc-icon.muted{
    background:#f1f5f9;
    color:#64748b;
}

.client-doc-card strong{
    display:block;
    font-size:.88rem;
    margin-bottom:.3rem;
    color:#0f172a;
}

.client-doc-card p{
    margin:0 0 .7rem;
    color:#64748b;
    font-size:.76rem;
}

/* ---------- loan tabs ---------- */
.loan-tabs-wrapper{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:.85rem;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    overflow-x:auto;
    overflow-y:hidden;
    margin-bottom:1.25rem;
    scrollbar-width:none;
}

.loan-tabs-wrapper::-webkit-scrollbar{display:none;}

.loan-tabs{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:.65rem;
    width:max-content;
    min-width:100%;
}

.loan-tabs .nav-item{flex:0 0 auto;}

.loan-tabs .nav-link{
    white-space:nowrap;
    border:1px solid #e2e8f0;
    background:#fff;
    color:#475569;
    border-radius:14px;
    padding:.78rem 1rem;
    font-size:.84rem;
    font-weight:700;
    transition:all .2s ease;
    cursor:pointer;
}

.loan-tabs .nav-link:hover{
    background:#eff6ff;
    color:var(--primary);
    border-color:var(--primary-light);
}

.loan-tabs .nav-link.active{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    border-color:transparent;
    box-shadow:0 10px 24px rgba(18,50,153,.25);
}

#loanTabsContent .tab-pane{
    display:none !important;
    opacity:0;
    transition:opacity .18s ease;
}

#loanTabsContent .tab-pane.active{
    display:block !important;
}

#loanTabsContent .tab-pane.show{
    opacity:1;
}

.loan-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
    padding:1.25rem;
}

.loan-kpi{
    border:1px solid var(--border);
    border-left:5px solid var(--primary);
    background:#fff;
    border-radius:16px;
    padding:1.05rem 1.1rem;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
}

/* ---------- final responsive ---------- */
@media(max-width:1200px){
    .clients-stats-grid,.loans-report-stats,.loan-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:1100px){
    .client-profile-page{
        grid-template-columns:1fr;
    }

    .client-main-card{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){
    .detail-grid,.profile-doc-grid,.grid-2,.grid-3,.stats-grid,.clients-stats-grid,.loans-report-stats,.loan-kpi-grid{
        grid-template-columns:1fr;
    }

    .profile-mini-grid{
        grid-template-columns:1fr;
    }

    .profile-tab-content{
        padding:1rem;
    }

    .profile-tabs-horizontal{
        padding:.8rem;
    }

    .clients-table,.loans-report-table{
        min-width:1000px;
    }
}

@media(max-width:576px){
    .clients-pagination{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* ═══ BOOKS HISTORY TAB (view_client.php) ═════════════════════ */
.books-sort-link{
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    white-space:nowrap;
}
.books-sort-link:hover{color:#2563eb;}
.books-page-size{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin:0;
    font-size:.85rem;
    color:#64748b;
    font-weight:600;
}
.books-page-size select{
    width:auto;
    min-width:80px;
    padding:.35rem .55rem;
    height:auto;
}
.books-pag-info{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}
.books-filter-actions{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
}
.books-filters-toggle{
    cursor:pointer;
    user-select:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    width:100%;
    background:none;
    border:none;
    padding:0;
    text-align:left;
    color:inherit;
    font:inherit;
}
.books-filters-toggle .books-filters-chevron{
    transition:transform .2s ease;
    color:#64748b;
}
.books-filters-toggle[aria-expanded="false"] .books-filters-chevron{
    transform:rotate(-90deg);
}
.books-entries-table{
    table-layout:fixed;
    width:100%;
    min-width:0 !important;
}
.books-entries-table thead th,
.books-entries-table tbody td{
    white-space:normal;
    vertical-align:middle;
    word-break:break-word;
}
.books-entries-table .col-type,
.books-entries-table .col-qty,
.books-entries-table .col-unit,
.books-entries-table .col-amount,
.books-entries-table .col-status{
    width:11%;
    text-align:center;
}
.books-entries-table .col-date{width:13%;white-space:nowrap;}
.books-entries-table .col-item{width:32%;}
.books-entries-table .col-type .badge,
.books-entries-table .col-status .badge{justify-content:center;}
.books-entries-table .col-type .books-sort-link,
.books-entries-table .col-qty .books-sort-link,
.books-entries-table .col-unit .books-sort-link,
.books-entries-table .col-amount .books-sort-link,
.books-entries-table .col-status .books-sort-link{
    justify-content:center;
    width:100%;
}
.books-entries-table .books-sort-link{white-space:normal;}
.books-entries-table .amount-in{color:#16a34a;}
.books-entries-table .amount-out{color:#ea580c;}
.books-entries-table .badge-warning{
    background:#ffedd5;
    color:#c2410c;
}

/* The books tab control is a link, not a button, so it reloads with filters. */
a.profile-tab-btn{text-decoration:none;}

/* ═══ BOOKS HISTORY REPORT (books_history.php) ════════════════ */
.report-page{padding:1rem;}
.report-page .title{
    font-size:1.35rem;
    font-weight:800;
    color:#111827;
}
.report-page .sub{
    color:#64748b;
    font-size:.9rem;
}
.report-page .empty-state{
    padding:2rem;
    text-align:center;
    color:#64748b;
}
.report-page .empty-state i{
    font-size:1.75rem;
    margin-bottom:.5rem;
    display:block;
}
.report-page .fw-700{font-weight:700;}
.report-page .text-success{color:#16a34a;}
.report-page .text-danger{color:#dc2626;}
.books-filter-actions-end{align-items:flex-end;}
#tbl-books-history th.col-num,
#tbl-books-history td.col-num{
    width:48px;
    max-width:48px;
    text-align:center;
    white-space:nowrap;
    padding-left:.5rem;
    padding-right:.5rem;
}

/* Books History tab: title + Export PDF aligned like Reports page-header */
.books-section-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}
.books-section-title .btn-danger{
    background:#dc2626;
    color:#fff;
    border:none;
    flex-shrink:0;
}
.books-section-title .btn-danger:hover{
    background:#b91c1c;
    color:#fff;
}

/* ═══ CLIENT BOOKS DASHBOARD (books.php) ═══════════════════════ */
.cadence-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.4rem;
    padding:.75rem 1rem;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-xs);
}
.cadence-selector{
    display:flex;
    gap:0;
    border:1.5px solid var(--border);
    border-radius:8px;
    overflow:hidden;
}
.cadence-btn{
    padding:.45rem 1rem;
    font-size:.82rem;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--white);
    text-decoration:none;
    border-right:1px solid var(--border);
    transition:var(--t);
    white-space:nowrap;
}
.cadence-btn:last-child{border-right:none;}
.cadence-btn:hover{background:var(--primary-xlight);color:var(--primary);}
.cadence-btn.active{
    background:var(--primary);
    color:#fff;
}

.period-nav{
    display:flex;
    align-items:center;
    gap:.65rem;
}
.period-label{
    font-family:'Outfit',sans-serif;
    font-size:.95rem;
    font-weight:700;
    color:var(--text-dark);
    min-width:140px;
    text-align:center;
}
.period-nav-btn{
    width:32px;height:32px;
    border-radius:6px;
    border:1.5px solid var(--border);
    background:var(--white);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-secondary);
    text-decoration:none;
    transition:var(--t);
    cursor:pointer;
    font-size:.78rem;
}
.period-nav-btn:hover{background:var(--primary-xlight);border-color:var(--primary-light);color:var(--primary);}
.period-nav-btn.dis{opacity:.4;cursor:default;pointer-events:none;}

.surplus-card .stat-value{font-size:1.6rem;}
.stat-note{font-size:.72rem;margin-top:.25rem;font-style:italic;}

.amount-positive{color:#16a34a;}
.amount-negative{color:#dc2626;}

.reconciliation-note{
    font-size:.78rem;
    color:var(--text-muted);
    margin-bottom:1rem;
}
.reconciliation-note i{color:var(--secondary);margin-right:.3rem;}

.data-state-empty{
    text-align:center;
    padding:3rem 1.5rem;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    color:var(--text-muted);
}
.data-state-empty i{font-size:2.2rem;display:block;margin-bottom:.75rem;color:var(--border);}
.data-state-empty h3{font-size:1rem;font-weight:700;color:var(--text-secondary);margin:0 0 .35rem;}
.data-state-empty p{font-size:.85rem;margin:0;}

@media(max-width:768px){
    .cadence-bar{flex-direction:column;align-items:stretch;}
    .cadence-selector{width:100%;justify-content:stretch;}
    .cadence-btn{flex:1;text-align:center;padding:.45rem .5rem;font-size:.75rem;}
    .period-nav{justify-content:center;}
    .period-label{min-width:auto;}
}
@media(max-width:480px){
    .surplus-card .stat-value{font-size:1.3rem;}
}

/* ── Collapsible sidebar groups ───────────────────────────── */
.nav-section{margin-bottom:2px}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:none;border:0;border-radius:6px;cursor:pointer;font-family:inherit;text-align:left;transition:var(--t)}
.nav-group-toggle:hover,.nav-group-toggle:focus-visible{color:rgba(255,255,255,.75);background:rgba(255,255,255,.05);outline:none}
.nav-group-toggle .chev{font-size:.7em;transition:transform .22s ease}
.nav-group-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-group-toggle .nav-pill{margin-left:auto;margin-right:.35rem}
.nav-group-toggle[aria-expanded="true"] .nav-pill{display:none}
.nav-items{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.nav-items>div{overflow:hidden;min-height:0}
.nav-section.open .nav-items{grid-template-rows:1fr}
@media(prefers-reduced-motion:reduce){.nav-items,.nav-group-toggle .chev{transition:none}}

/* ── Website CMS admin ────────────────────────────────────── */
.cms-row{display:flex;align-items:center;gap:1rem;padding:.85rem 1.35rem;border-bottom:1px solid var(--border-light)}
.cms-row:last-child{border-bottom:0}
.cms-row.is-hidden{opacity:.55}
.cms-thumb{width:64px;height:44px;flex-shrink:0;border-radius:8px;background:var(--primary-xlight);color:var(--primary);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1rem}
.cms-thumb img{width:100%;height:100%;object-fit:cover}
.cms-row-main{flex:1;min-width:0}
.cms-row-title{font-weight:700;color:var(--text-dark);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cms-row-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.75rem;color:var(--text-muted)}
.cms-row-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.cms-row-actions form{margin:0}
.cms-segment{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.cms-segment label{display:flex;align-items:center;gap:.35rem;padding:.42rem .9rem;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--text-body);border-right:1px solid var(--border);margin:0}
.cms-segment label:last-child{border-right:0}
.cms-segment input{position:absolute;opacity:0;pointer-events:none}
.cms-segment label:has(input:checked){background:var(--primary);color:#fff}
.cms-segment label:has(input:focus-visible){box-shadow:inset 0 0 0 2px var(--primary-light)}
.cms-check{display:flex;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;color:var(--text-body);cursor:pointer;margin-top:.4rem}
.cms-advanced{border:1px dashed var(--border);border-radius:var(--r);padding:.6rem .9rem;margin-bottom:1rem}
.cms-advanced summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--text-body)}
.cms-media-current{display:flex;align-items:center;gap:.7rem;padding:.5rem;margin-bottom:.6rem;border:1px solid var(--border);border-radius:var(--r);background:var(--body-bg);font-size:.75rem;color:var(--text-muted);word-break:break-all}
.cms-media-current img,.cms-media-current video{width:84px;height:52px;object-fit:cover;border-radius:6px;flex-shrink:0}
.cms-media-current i{width:84px;text-align:center;font-size:1.3rem;color:var(--primary)}
.cms-brand-preview{display:flex;align-items:center;justify-content:center;height:110px;margin-bottom:.6rem;border:1px dashed var(--border);border-radius:var(--r);background:repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 0 0/16px 16px}
.cms-brand-preview img{max-height:80px;max-width:80%;object-fit:contain}
.cms-brand-preview.small{height:72px}
.cms-brand-preview.small img{max-height:40px}
.cms-font-sample{padding:1rem 1.1rem;border-radius:var(--r);background:var(--body-bg);border:1px solid var(--border)}
.cms-font-sample [data-font-sample="heading"]{font-size:1.45rem;font-weight:700;color:var(--primary);line-height:1.2;margin-bottom:.5rem}
.cms-font-sample p{margin:0;font-size:.92rem}
@media(max-width:640px){.cms-row{flex-wrap:wrap}.cms-row-actions{width:100%;justify-content:flex-end}}

/* ── CMS tabs ─────────────────────────────────────────────── */
.cms-tabs{display:flex;gap:.25rem;border-bottom:1.5px solid var(--border);margin:-.35rem 0 1.1rem;overflow-x:auto;scrollbar-width:none}
.cms-tabs::-webkit-scrollbar{display:none}
.cms-tabs [role="tab"]{display:flex;align-items:center;gap:.4rem;padding:.6rem .95rem;border:0;background:none;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:var(--t)}
.cms-tabs [role="tab"]:hover{color:var(--text-dark)}
.cms-tabs [role="tab"][aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.cms-tabs [role="tab"]:focus-visible{outline:2px solid var(--primary-light);outline-offset:-2px;border-radius:6px 6px 0 0}
.cms-tabs [role="tab"].has-error{color:var(--danger)}
.cms-tab-panel[hidden]{display:none}
.modal-box .modal-body{min-height:340px}
.cms-color-row{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--border-light)}
.cms-color-row:last-of-type{border-bottom:0}
.cms-color-row input[type="color"]{width:46px;height:38px;padding:2px;border:1.5px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;flex-shrink:0}
.cms-color-row .cms-color-hex{width:96px;font-family:monospace;text-transform:lowercase;flex-shrink:0}
.cms-color-row strong{display:block;font-size:.85rem;color:var(--text-dark)}
.cms-color-row small{display:block;font-size:.74rem;color:var(--text-muted)}
.cms-theme-preview{border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.cms-theme-preview .tp-strip{height:10px}
.cms-theme-preview .tp-hero{padding:1.1rem 1.2rem;color:#fff}
.cms-theme-preview .tp-hero b{display:block;font-size:1.05rem;margin-bottom:.6rem}
.cms-theme-preview .tp-btn{display:inline-block;padding:.35rem .8rem;border-radius:3px;font-size:.75rem;font-weight:700}
.cms-theme-preview .tp-body{padding:1rem 1.2rem;background:#fff}
.cms-theme-preview .tp-body b{display:block;font-size:1rem;line-height:1.3}
.cms-range{display:flex;align-items:center;gap:.8rem}
.cms-range input[type="range"]{flex:1;accent-color:var(--primary)}
.cms-range output{min-width:52px;text-align:right;font-weight:700;color:var(--text-dark);font-size:.85rem}
.cms-sidebar-sample{background:var(--sidebar-bg);border-radius:var(--r);padding:.4rem .72rem .8rem;align-self:start}
.cms-sidebar-sample .nav-link{cursor:default}
.cms-hf-preview{border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cms-hf-preview .hf-header{display:flex;align-items:center;gap:1.2rem;padding:.9rem 1.1rem;background:#fff;color:var(--hf-dark);border-bottom:1px solid var(--border-light);flex-wrap:wrap}
.cms-hf-preview .hf-logo{font-weight:700;font-size:15px;text-transform:none;font-family:inherit;color:var(--hf-primary)}
.cms-hf-preview .hf-links{display:flex;gap:1.1rem;flex:1}
.cms-hf-preview .hf-cta{background:var(--hf-primary);color:#fff;padding:.45rem .8rem;border-radius:3px;font-weight:700}
.cms-hf-preview .hf-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem;background:var(--hf-dark);color:rgba(255,255,255,.78)}
.cms-details{display:grid;grid-template-columns:130px 1fr;gap:.55rem 1rem;margin:0 0 1rem;font-size:.86rem}
.cms-details dt{font-weight:700;color:var(--text-muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.cms-details dd{margin:0;color:var(--text-dark);word-break:break-word}
.cms-message{white-space:pre-wrap;background:var(--body-bg);border:1px solid var(--border);border-radius:var(--r);padding:1rem;font-size:.88rem;color:var(--text-body)}
.cms-tabs a[role="tab"]{text-decoration:none}
.cms-hf-preview .hf-logo{display:inline-flex;align-items:center;gap:8px}
.cms-hf-preview .hf-logo img{height:26px;width:auto;max-width:110px;object-fit:contain}
.cms-hf-preview .hf-footer .hf-logo{color:#fff;font-weight:700;text-transform:none}
.cms-hf-preview [data-mode="logo"]>span,.cms-hf-preview [data-mode="name"]>img{display:none}
.cms-brand-preview.is-dark{background:var(--preview-bg,#001284)}