@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');

/* ── 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:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.3);padding:.88rem .72rem .25rem}

.nav-link{display:flex;align-items:center;gap:.66rem;padding:.57rem .8rem;border-radius:8px;color:rgba(255,255,255,.66);font-size:.836rem;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;
    }
}