/* ═══════════════════════════════════════════════
   TALEEM SaaS — Design System
   Navy #1B2A4A · Gold #C9A84C · Cream #F8F5EF · Teal #2A7B7B
   Lora (headings) · DM Sans (body)
═══════════════════════════════════════════════ */
:root{
  --navy:#1B2A4A; --navy-d:#111d35; --navy-l:#243356;
  --gold:#C9A84C; --gold-l:#e2c677; --gold-pale:#fdf6e3;
  --teal:#2A7B7B; --teal-l:#3a9a9a;
  --green:#22c55e; --green-pale:rgba(34,197,94,.1);
  --red:#ef4444;   --red-pale:rgba(239,68,68,.08);
  --orange:#f97316;
  --purple:#7c3aed; --purple-pale:rgba(124,58,237,.1);
  --cream:#F8F5EF; --cream-d:#EDE8DF;
  --white:#fff; --border:#E5DDD0;
  --muted:#6B7280; --muted-l:#9CA3AF;
  --sidebar-w:258px; --topbar-h:60px;
  --r:10px; --r-sm:7px;
  --sh-sm:0 1px 4px rgba(27,42,74,.07);
  --sh:0 4px 16px rgba(27,42,74,.10);
  --sh-lg:0 8px 32px rgba(27,42,74,.15);
  --tx:.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;font-size:15px;background:var(--cream);color:var(--navy);overflow-x:hidden;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Lora',serif;font-weight:600;color:var(--navy);line-height:1.3}
a{color:var(--navy);text-decoration:none;transition:var(--tx)}
a:hover{color:var(--gold)}
.fw-600{font-weight:600}.fw-700{font-weight:700}
.text-xs{font-size:12px}.muted{color:var(--muted)}
.navy-text{color:var(--navy)}.gold-text{color:var(--gold)}
.teal-text{color:var(--teal)}.orange-text{color:var(--orange)}

/* ── LOGIN ──────────────────────────────────────── */
.body-login{background:var(--cream);min-height:100vh}
.login-wrap{display:flex;min-height:100vh}

.login-left{
  width:420px;flex-shrink:0;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  padding:40px;position:relative;overflow:hidden;
}
.login-left::before{content:'';position:absolute;top:-100px;right:-100px;width:320px;height:320px;border-radius:50%;background:rgba(201,168,76,.07)}
.login-left::after{content:'';position:absolute;bottom:-80px;left:-80px;width:260px;height:260px;border-radius:50%;background:rgba(42,123,123,.09)}
.ll-inner{position:relative;z-index:1;width:100%}

.ll-brand{margin-bottom:48px}
.ll-logo{width:58px;height:58px;background:linear-gradient(135deg,var(--gold),var(--gold-l));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--navy);box-shadow:0 6px 20px rgba(201,168,76,.35);margin-bottom:16px}
.ll-logo.sm{width:42px;height:42px;font-size:18px;border-radius:10px;margin-bottom:0;flex-shrink:0}
.ll-name{font-family:'Lora',serif;font-size:30px;font-weight:700;color:#fff;margin-bottom:4px}
.ll-tag{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:10px}
.ll-saas-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(201,168,76,.15);color:var(--gold-l);border:1px solid rgba(201,168,76,.25);padding:3px 10px;border-radius:20px}

.ll-features{margin-bottom:40px}
.ll-feat{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.ll-feat-icon{width:38px;height:38px;border-radius:9px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.18);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--gold-l);flex-shrink:0}
.ll-feat strong{display:block;font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}
.ll-feat span{font-size:12px;color:rgba(255,255,255,.42)}
.ll-foot{font-size:11px;color:rgba(255,255,255,.28)}

.login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.login-card{width:100%;max-width:410px;background:#fff;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh-lg);padding:38px 36px}
.login-card-header{margin-bottom:26px}
.lc-logo{margin-bottom:14px}
.lc-title{font-size:24px;margin-bottom:5px}
.lc-sub{font-size:13px;color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:400}
.lc-foot{text-align:center;margin-top:22px;font-size:11px;color:var(--muted-l)}

/* fields */
.t-field{margin-bottom:18px}
.t-label{font-size:13px;font-weight:500;color:var(--navy);margin-bottom:5px;display:block}
.t-label.mb-0{margin-bottom:0}
.t-input-wrap{position:relative}
.t-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-l);font-size:13px;pointer-events:none;z-index:2}
.t-input{border:1.5px solid var(--border)!important;border-radius:var(--r-sm)!important;padding:10px 14px 10px 38px!important;font-family:'DM Sans',sans-serif!important;font-size:14px!important;width:100%;outline:none;transition:var(--tx)!important;background:#fff!important}
.t-input:focus{border-color:var(--navy)!important;box-shadow:0 0 0 3px rgba(27,42,74,.08)!important}
.t-input-form{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:9px 13px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--navy);transition:var(--tx)}
.t-input-form:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.08);outline:none}
.ps-icon{padding-left:36px!important}
.t-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted-l);cursor:pointer;font-size:13px;transition:var(--tx);padding:4px}
.t-eye:hover{color:var(--navy)}
.t-err{font-size:12px;color:var(--red);margin-top:4px;display:block}
.t-check-label{font-size:13px;color:var(--muted)}
.t-forgot{font-size:13px;color:var(--gold);font-weight:500}
.t-forgot:hover{color:var(--gold-l)}
.form-check-input:checked{background-color:var(--navy);border-color:var(--navy)}
.required{color:var(--red)}

.t-btn-login{background:var(--navy);color:#fff;border:none;padding:12px 24px;border-radius:var(--r-sm);font-size:15px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:var(--tx);display:flex;align-items:center;justify-content:center}
.t-btn-login:hover{background:var(--navy-d);box-shadow:0 4px 14px rgba(27,42,74,.28);transform:translateY(-1px)}
.t-btn-login:disabled{opacity:.75;transform:none}

.t-alert{padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.t-alert.danger{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.18);color:var(--red)}

/* ── SIDEBAR ─────────────────────────────────────── */
.t-sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--navy);display:flex;flex-direction:column;z-index:1000;overflow-y:auto;overflow-x:hidden;transition:transform .27s cubic-bezier(.4,0,.2,1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.t-sidebar::-webkit-scrollbar{width:3px}
.t-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}

.t-brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.t-brand-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold-l));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--navy);box-shadow:0 4px 10px rgba(201,168,76,.28);flex-shrink:0}
.t-brand-name{font-family:'Lora',serif;font-size:18px;font-weight:700;color:#fff;line-height:1}
.t-brand-sub{font-size:10px;color:rgba(255,255,255,.38);margin-top:2px}
.sa-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:rgba(201,168,76,.15);color:var(--gold-l);border:1px solid rgba(201,168,76,.22);padding:2px 7px;border-radius:20px}

.t-nav{flex:1;padding:12px 0}
.t-nav-label{font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.26);padding:13px 18px 4px}
.t-nav ul{list-style:none}
.t-nav ul li a{display:flex;align-items:center;gap:11px;padding:9px 18px;color:rgba(255,255,255,.58);font-size:13.5px;position:relative;transition:var(--tx)}
.t-nav ul li a:hover,.t-nav ul li.active a{color:#fff;background:rgba(255,255,255,.06)}
.t-nav ul li.active a{color:var(--gold-l);background:rgba(201,168,76,.1);font-weight:500}
.t-nav ul li.active a::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;background:var(--gold);border-radius:0 3px 3px 0}
.t-nav ul li a i{width:17px;text-align:center;font-size:13px;flex-shrink:0}
.t-nav ul li a span{flex:1}
.soon{font-size:9px;font-weight:600;background:rgba(201,168,76,.13);color:var(--gold-l);padding:2px 6px;border-radius:20px;border:1px solid rgba(201,168,76,.18);font-style:normal}

.t-sidebar-foot{padding:13px 18px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:9px;flex-shrink:0}
.t-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-l));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.t-avatar.sm{width:28px;height:28px;font-size:11px}
.t-foot-info{flex:1;overflow:hidden}
.t-foot-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-foot-role{font-size:10px;color:rgba(255,255,255,.35)}
.t-logout{color:rgba(255,255,255,.28);font-size:15px;padding:5px;border-radius:6px;transition:var(--tx);flex-shrink:0}
.t-logout:hover{color:#ff6b6b;background:rgba(255,107,107,.1)}

/* ── MAIN ────────────────────────────────────────── */
.t-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.36);z-index:999;backdrop-filter:blur(2px)}
.t-overlay.show{display:block}
.t-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .27s cubic-bezier(.4,0,.2,1)}

.t-topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:100;box-shadow:var(--sh-sm)}
.t-topbar-left{display:flex;align-items:center;gap:13px}
.t-toggle{width:34px;height:34px;background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--tx)}
.t-toggle:hover{background:var(--cream);color:var(--navy)}
.breadcrumb{font-size:13px;margin:0}
.breadcrumb-item a{color:var(--muted)}
.breadcrumb-item a:hover{color:var(--gold)}
.breadcrumb-item.active{color:var(--navy);font-weight:500}
.breadcrumb-item+.breadcrumb-item::before{color:var(--muted-l)}

.t-topbar-right{display:flex;align-items:center;gap:8px}
.t-company-pill{font-size:12px;color:var(--muted);background:var(--cream);border:1px solid var(--border);padding:5px 12px;border-radius:20px;align-items:center;gap:6px}
.t-user-btn{display:flex;align-items:center;gap:7px;cursor:pointer;padding:5px 8px;border-radius:var(--r-sm);transition:var(--tx)}
.t-user-btn:hover{background:var(--cream)}
.t-uname{font-size:13px;font-weight:500;color:var(--navy)}
.t-dd{border:1px solid var(--border)!important;border-radius:var(--r-sm)!important;box-shadow:var(--sh)!important;min-width:180px!important;padding:6px!important}
.t-dd-head{padding:10px 12px 8px;border-bottom:1px solid var(--border)}
.t-dd-head .fw-600{font-size:13px}
.t-dd-head .text-xs{font-size:11px;color:var(--muted)}
.t-dd-item{font-size:13px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;color:var(--navy)}
.t-dd-item i{width:14px;color:var(--muted)}
.t-dd-item.danger{color:var(--red)}
.t-dd-item.danger i{color:var(--red)}

.t-content{flex:1;padding:24px 24px 12px}
.t-footer{padding:12px 24px;text-align:center;font-size:12px;color:var(--muted-l);border-top:1px solid var(--border);background:#fff}

/* ── PAGE HEADER ─────────────────────────────────── */
.pg-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.pg-title{font-size:21px;margin-bottom:3px}
.pg-sub{font-size:13px;color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:400}
.pg-actions{display:flex;gap:8px;align-items:center}

/* ── BUTTONS ─────────────────────────────────────── */
.t-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-sm);font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;transition:var(--tx)}
.t-btn.primary{background:var(--navy);color:#fff}
.t-btn.primary:hover{background:var(--navy-d);box-shadow:0 4px 12px rgba(27,42,74,.22);color:#fff}
.t-btn.outline{background:transparent;color:var(--navy);border:1.5px solid var(--border)}
.t-btn.outline:hover{border-color:var(--navy);background:var(--cream);color:var(--navy)}
.t-btn.sm{padding:6px 13px;font-size:12px}

/* ── STAT CARDS ──────────────────────────────────── */
.stat-card{background:#fff;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh-sm);padding:18px 20px;transition:var(--tx);position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.stat-card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.stat-card:hover::after{transform:scaleX(1)}
.stat-card.highlight{border-color:rgba(201,168,76,.3);background:var(--gold-pale)}
.stat-ico{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;margin-bottom:12px}
.stat-ico.sm{width:36px;height:36px;font-size:15px;margin-bottom:0}
.stat-ico.navy{background:rgba(27,42,74,.09);color:var(--navy)}
.stat-ico.gold{background:rgba(201,168,76,.12);color:var(--gold)}
.stat-ico.teal{background:rgba(42,123,123,.1);color:var(--teal)}
.stat-ico.green{background:var(--green-pale);color:var(--green)}
.stat-ico.purple{background:var(--purple-pale);color:var(--purple)}
.stat-ico.grey{background:rgba(107,114,128,.1);color:var(--muted)}
.stat-val{font-family:'Lora',serif;font-size:24px;font-weight:700;color:var(--navy);line-height:1;margin-bottom:3px}
.stat-lbl{font-size:12px;color:var(--muted);margin-bottom:2px}
.stat-sub{font-size:11px;font-weight:500}
.stat-sub.green{color:var(--green)}
.stat-sub.orange{color:var(--orange)}

/* ── CARDS ───────────────────────────────────────── */
.t-card{background:#fff;border-radius:var(--r);border:1px solid var(--border);box-shadow:var(--sh-sm);overflow:hidden}
.t-card-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.t-card-head h5{font-size:14px;font-weight:600;margin:0;display:flex;align-items:center;gap:7px}
.t-card-head h5 i{color:var(--gold)}
.t-card-body{padding:18px 20px}
.t-card-body.p-0{padding:0}

/* ── TABLES ──────────────────────────────────────── */
.t-table{border-collapse:collapse;width:100%}
.t-table thead th{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--border)!important;padding:12px 14px!important;background:var(--cream)!important}
.t-table tbody td{padding:11px 14px!important;vertical-align:middle;font-size:13.5px;border-bottom:1px solid var(--cream-d,#EDE8DF)!important}
.t-table tbody tr:hover{background:var(--gold-pale)}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:5px 11px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--navy)}
.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,42,74,.08);outline:none}
.dataTables_wrapper .dataTables_filter label,.dataTables_wrapper .dataTables_length label{font-size:13px;color:var(--muted)}
.dataTables_wrapper .dataTables_info{font-size:12px;color:var(--muted);margin-top:12px}
.dataTables_wrapper .dataTables_paginate{margin-top:12px}
.dataTables_wrapper .paginate_button{border-radius:var(--r-sm)!important;font-size:12px!important;padding:4px 9px!important}
.dataTables_wrapper .paginate_button.current,.dataTables_wrapper .paginate_button.current:hover{background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important}
.dataTables_wrapper .dom{margin-bottom:10px}

/* ── ROW ELEMENTS ─────────────────────────────────── */
.t-row-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.t-row-av.navy{background:linear-gradient(135deg,var(--navy),var(--navy-l))}
.t-row-av.teal{background:linear-gradient(135deg,var(--teal),var(--teal-l))}
.t-row-av.gold{background:linear-gradient(135deg,var(--gold),var(--gold-l));color:var(--navy)}
.t-row-av.grey{background:#ccc}

.t-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.t-badge.green{background:var(--green-pale);color:#16a34a;border:1px solid rgba(34,197,94,.2)}
.t-badge.red{background:var(--red-pale);color:var(--red);border:1px solid rgba(239,68,68,.18)}

.t-tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500}
.t-tag.teal{background:rgba(42,123,123,.1);color:var(--teal);border:1px solid rgba(42,123,123,.2)}

.t-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:20px;font-size:13px}
.t-chip.navy{background:rgba(27,42,74,.07);border:1px solid rgba(27,42,74,.12);color:var(--navy)}
.t-chip.green{background:var(--green-pale);border:1px solid rgba(34,197,94,.2);color:#16a34a}
.t-chip.red{background:var(--red-pale);border:1px solid rgba(239,68,68,.18);color:var(--red)}
.t-chip.gold{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.22);color:#8a6a10}

.t-act{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:var(--tx)}
.t-act.edit:hover{border-color:var(--teal);color:var(--teal);background:rgba(42,123,123,.07)}
.t-act.deact:hover{border-color:var(--red);color:var(--red);background:var(--red-pale)}
.t-act.restore:hover{border-color:var(--green);color:var(--green);background:var(--green-pale)}

/* ── MODAL ───────────────────────────────────────── */
.t-modal{border:none;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg)}
.t-modal .modal-header{background:var(--navy);border-bottom:none;padding:14px 20px}
.t-modal .modal-header h5,.t-modal .modal-title{color:#fff;font-size:14px;font-family:'Lora',serif}
.t-modal .modal-header .btn-close{filter:invert(1) brightness(2);opacity:.6}
.t-modal .modal-body{padding:22px 20px;background:#fff}
.t-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.t-loading{text-align:center;padding:40px 0}

/* ── TOAST ───────────────────────────────────────── */
#gToast{border-radius:var(--r-sm)}
#gToast.ok{background:var(--navy)}
#gToast.err{background:var(--red)}
#gToast .toast-body{color:#fff;font-size:13px}

/* ── SELECT2 ─────────────────────────────────────── */
.select2-container--bootstrap-5 .select2-selection{border:1.5px solid var(--border)!important;border-radius:var(--r-sm)!important;font-family:'DM Sans',sans-serif!important;font-size:14px!important;min-height:38px!important}
.select2-container--bootstrap-5.select2-container--focus .select2-selection{border-color:var(--navy)!important;box-shadow:0 0 0 3px rgba(27,42,74,.08)!important}
.select2-container--bootstrap-5 .select2-dropdown{border:1.5px solid var(--border)!important;border-radius:var(--r-sm)!important;box-shadow:var(--sh)!important;font-family:'DM Sans',sans-serif!important;font-size:13px!important}
.select2-container--bootstrap-5 .select2-results__option--highlighted{background:var(--navy)!important}

/* ── MISC COMPONENTS ─────────────────────────────── */
.t-info-list{list-style:none}
.t-info-list li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--cream-d,#EDE8DF);font-size:13px}
.t-info-list li:last-child{border-bottom:none}
.t-info-list li span{color:var(--muted);display:flex;align-items:center}
.t-info-list li strong{color:var(--navy)}

.t-quick-btn{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--cream);border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--navy);font-size:13px;font-weight:500;transition:var(--tx)}
.t-quick-btn:hover{border-color:var(--navy);background:var(--gold-pale);color:var(--navy)}

.plan-row{margin-bottom:18px}
.t-progress{height:6px;background:var(--cream-d,#EDE8DF);border-radius:3px;overflow:hidden}
.t-progress-bar{height:100%;border-radius:3px;transition:width .4s ease}
.t-progress-bar.gold{background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.t-divider{border-top:1px solid var(--border);margin:16px 0}

.plan-pill{display:flex;align-items:center;gap:8px;background:var(--gold-pale);border:1px solid rgba(201,168,76,.25);padding:8px 16px;border-radius:20px;font-size:13px;color:var(--navy)}
.plan-pill i{color:var(--gold)}
.plan-usage{font-size:11px;color:var(--muted);margin-left:4px}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:991.98px){
  .t-sidebar{transform:translateX(calc(var(--sidebar-w)*-1))}
  .t-sidebar.open{transform:translateX(0);box-shadow:var(--sh-lg)}
  .t-main{margin-left:0}
  .t-content{padding:18px 14px 10px}
  .login-left{display:none}
  .login-right{padding:20px 14px}
  .login-card{padding:26px 20px}
}
@media(max-width:575.98px){
  .t-content{padding:14px 10px 8px}
  .pg-header{flex-direction:column;align-items:flex-start}
  .stat-val{font-size:20px}
}


/* ═══════════════════════════════════════════════
   PLAN PAGE — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Plan Feature Cards ───────────────────────── */
.plan-feature-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: var(--tx);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .plan-feature-card:hover {
        box-shadow: var(--sh);
        transform: translateY(-2px);
        border-color: rgba(201,168,76,.4);
    }

    .plan-feature-card.inactive {
        opacity: .65;
        filter: grayscale(.4);
    }

.pfc-head {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-l) 100%);
}

.pfc-icon {
    width: 40px;
    height: 40px;
    background: rgba(201,168,76,.2);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--gold-l);
    flex-shrink: 0;
}

.pfc-title-wrap {
    flex: 1;
    overflow: hidden;
}

.pfc-name {
    font-family: 'Lora', serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.pfc-price {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

    .pfc-price strong {
        font-size: 15px;
        font-weight: 700;
        color: var(--gold-l);
    }

    .pfc-price span {
        font-size: 11px;
    }

.pfc-limits {
    padding: 14px 20px;
    flex: 1;
}

.pfc-limit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--cream-d, #EDE8DF);
    font-size: 13px;
}

    .pfc-limit:last-child {
        border-bottom: none;
    }

    .pfc-limit i {
        width: 16px;
        text-align: center;
        color: var(--muted-l);
        font-size: 13px;
        flex-shrink: 0;
    }

    .pfc-limit span {
        flex: 1;
        color: var(--muted);
    }

    .pfc-limit strong {
        color: var(--navy);
        font-weight: 600;
    }

    .pfc-limit.highlight-row {
        background: var(--gold-pale);
        margin: 0 -20px;
        padding: 8px 20px;
    }

        .pfc-limit.highlight-row i {
            color: var(--gold);
        }

.pfc-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--cream);
    display: flex;
    gap: 8px;
}

    .pfc-foot .t-btn {
        flex: 1;
        justify-content: center;
    }

.t-btn.deact-btn {
    background: rgba(239,68,68,.08);
    color: var(--red);
    border: 1.5px solid rgba(239,68,68,.2);
}

    .t-btn.deact-btn:hover {
        background: rgba(239,68,68,.14);
        border-color: var(--red);
    }

.t-btn.restore-btn {
    background: rgba(34,197,94,.08);
    color: #16a34a;
    border: 1.5px solid rgba(34,197,94,.2);
}

    .t-btn.restore-btn:hover {
        background: rgba(34,197,94,.14);
        border-color: var(--green);
    }

/* ── Live Preview Box (inside form) ───────────── */
.plan-preview-box {
    border: 1.5px dashed var(--gold);
    border-radius: var(--r-sm);
    background: var(--gold-pale);
    padding: 14px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.ppb-name {
    font-family: 'Lora', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}

.ppb-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
}

.ppb-limits {
    font-size: 12px;
    color: var(--muted);
}

/* ── Empty State ──────────────────────────────── */
.t-empty-state {
    text-align: center;
    padding: 60px 24px;
    background: #fff;
    border: 1.5px dashed var(--border);
    border-radius: var(--r);
}

    .t-empty-state i {
        font-size: 40px;
        color: var(--gold);
        margin-bottom: 16px;
        display: block;
        opacity: .6;
    }

    .t-empty-state h5 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .t-empty-state p {
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 20px;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }


/* ═══════════════════════════════════════════════
   PLATFORM USERS PAGE — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── User Avatars ─────────────────────────────── */
.pu-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

    .pu-avatar.sa {
        background: linear-gradient(135deg, var(--gold), var(--gold-l));
        color: var(--navy);
    }

    .pu-avatar.ad {
        background: linear-gradient(135deg, var(--navy), var(--navy-l));
    }

    .pu-avatar.us {
        background: linear-gradient(135deg, var(--teal), var(--teal-l));
    }

/* ── Role Badges ──────────────────────────────── */
.pu-role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
}

    .pu-role-badge.sa {
        background: rgba(201,168,76,.12);
        color: #8a6a10;
        border: 1px solid rgba(201,168,76,.28);
    }

    .pu-role-badge.ad {
        background: rgba(27,42,74,.08);
        color: var(--navy);
        border: 1px solid rgba(27,42,74,.15);
    }

    .pu-role-badge.us {
        background: rgba(42,123,123,.1);
        color: var(--teal);
        border: 1px solid rgba(42,123,123,.2);
    }

/* ── Username pill ────────────────────────────── */
.pu-username {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: var(--cream);
    color: var(--navy);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 5px;
}

/* ── "You" badge ──────────────────────────────── */
.pu-me-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: rgba(42,123,123,.12);
    color: var(--teal);
    border: 1px solid rgba(42,123,123,.22);
    padding: 1px 6px;
    border-radius: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ── Login count pill ─────────────────────────── */
.pu-login-count {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    background: var(--cream);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
}

/* ── Key action button ────────────────────────── */
.t-act.key:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201,168,76,.09);
}

/* ── Filter chips (table header) ─────────────── */
.pu-filter-wrap {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.pu-filter {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
}

    .pu-filter:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .pu-filter.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }

/* ── Password strength bar ────────────────────── */
.pwd-strength-wrap {
}

.pwd-strength-bar {
    height: 6px;
    background: var(--cream-d, #EDE8DF);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.pwd-strength-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease, background .3s ease;
    width: 0;
}

/* ── Reset password info box ──────────────────── */
.pu-reset-info {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gold-pale);
    border: 1.5px solid rgba(201,168,76,.3);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin-bottom: 6px;
}

    .pu-reset-info i {
        font-size: 22px;
        color: var(--gold);
        flex-shrink: 0;
    }

/* ═══════════════════════════════════════════════
   AREA PAGE — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Area dot marker ──────────────────────────── */
.area-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(42,123,123,.15);
}

/* ── Delete action button ─────────────────────── */
.t-act.delete:hover {
    border-color: var(--red);
    color: var(--red);
    background: var(--red-pale);
}

/* ── Tips list ────────────────────────────────── */
.area-tips {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .area-tips li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
    }

        .area-tips li i {
            color: var(--teal);
            font-size: 11px;
            margin-top: 2px;
            flex-shrink: 0;
        }



/* ═══════════════════════════════════════════════
   CHALLAN MASTER PAGE — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Year filter pills ────────────────────────── */
.cm-year-btn {
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    transition: var(--tx);
    text-decoration: none;
}

    .cm-year-btn:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .cm-year-btn.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }

/* ── Challan cards ────────────────────────────── */
.cm-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: var(--tx);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .cm-card:hover {
        box-shadow: var(--sh);
        transform: translateY(-2px);
    }

    .cm-card.overdue {
        border-color: rgba(249,115,22,.35);
        background: #fffaf5;
    }

    .cm-card.expired {
        opacity: .6;
        filter: grayscale(.3);
    }

.cm-card-head {
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-l) 100%);
}

.cm-month-badge {
}

.cm-month-name {
    font-family: 'Lora', serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.cm-month-year {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}

.cm-dates {
    padding: 14px 18px;
    flex: 1;
}

.cm-date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--cream-d, #EDE8DF);
    font-size: 13px;
}

    .cm-date-item:last-child {
        border-bottom: none;
    }

.cm-date-label {
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

    .cm-date-label i {
        width: 14px;
        text-align: center;
        color: var(--muted-l);
    }

.cm-date-val {
    font-weight: 600;
    color: var(--navy);
    font-size: 13px;
}

    .cm-date-val.overdue-text {
        color: var(--orange) !important;
    }

.cm-progress-wrap {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--cream);
}

.t-progress-bar.green {
    background: linear-gradient(90deg, var(--green), #16a34a);
}

.cm-no-collections {
    padding: 10px 18px;
    font-size: 12px;
    color: var(--muted-l);
    border-top: 1px solid var(--border);
    background: var(--cream);
    display: flex;
    align-items: center;
    gap: 7px;
}

    .cm-no-collections i {
        color: var(--muted-l);
    }

.cm-card-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    background: #fff;
}

    .cm-card-foot .t-btn {
        flex: 1;
        justify-content: center;
    }

/* ── Missing month pills ──────────────────────── */
.cm-missing-month {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1.5px dashed var(--border);
    background: var(--cream);
    color: var(--muted);
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
}

    .cm-missing-month:hover {
        border-color: var(--navy);
        border-style: solid;
        color: var(--navy);
        background: var(--gold-pale);
    }

    .cm-missing-month i {
        font-size: 10px;
    }

/* ── Form preview box ─────────────────────────── */
.cm-form-preview {
    background: var(--gold-pale);
    border: 1.5px dashed var(--gold);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}


/* ═══════════════════════════════════════════════
   ATTENDANCE PAGES — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Empty & Loading states ───────────────────── */
.att-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--muted);
}

    .att-empty i {
        font-size: 38px;
        color: var(--muted-l);
        display: block;
        margin-bottom: 14px;
        opacity: .6;
    }

    .att-empty p {
        font-size: 14px;
        line-height: 1.7;
    }

.att-loading {
    text-align: center;
    padding: 48px 24px;
}

    .att-loading p {
        margin-top: 12px;
        font-size: 13px;
        color: var(--muted);
    }

/* ── Already-marked notice ────────────────────── */
.att-marked-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.3);
    border-radius: var(--r-sm);
    padding: 10px 16px;
    font-size: 13px;
    color: #8a6a10;
    margin-bottom: 14px;
}

    .att-marked-notice i {
        color: var(--gold);
        font-size: 15px;
        flex-shrink: 0;
    }

/* ── Student list (Mark page) ─────────────────── */
.att-student-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.att-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    transition: var(--tx);
    flex-wrap: wrap;
}

    .att-row:hover {
        border-color: rgba(27,42,74,.2);
        background: var(--cream);
    }

.att-row-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
}

.att-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-l));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.att-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.att-row-actions {
    display: flex;
    gap: 6px;
}

.att-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
    color: var(--muted);
}

    .att-toggle-btn.present.active {
        background: rgba(34,197,94,.1);
        border-color: rgba(34,197,94,.35);
        color: #16a34a;
    }

    .att-toggle-btn.absent.active {
        background: rgba(239,68,68,.09);
        border-color: rgba(239,68,68,.3);
        color: var(--red);
    }

    .att-toggle-btn:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

.att-row-remark {
    flex: 1;
    min-width: 140px;
}

    .att-row-remark .t-input-form {
        font-size: 12px;
        padding: 6px 10px;
    }

/* ── Summary box (filter panel) ───────────────── */
.att-summary-box {
    margin-top: 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.att-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

    .att-sum-row:last-child {
        border-bottom: none;
    }

    .att-sum-row strong {
        font-weight: 700;
        color: var(--navy);
        font-size: 15px;
    }

    .att-sum-row.green strong {
        color: var(--green);
    }

    .att-sum-row.red strong {
        color: var(--red);
    }

    .att-sum-row i {
        margin-right: 6px;
    }

/* ── Report matrix table ──────────────────────── */
.att-report-scroll {
    overflow-x: auto;
    padding: 0 0 8px 0;
}

.att-matrix-table {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 100%;
}

    .att-matrix-table thead th {
        background: var(--navy) !important;
        color: rgba(255,255,255,.85) !important;
        padding: 9px 6px !important;
        text-align: center;
        border: 1px solid rgba(255,255,255,.1) !important;
        white-space: nowrap;
        font-size: 11px !important;
        letter-spacing: .3px;
        text-transform: none !important;
    }

        .att-matrix-table thead th.att-mat-name {
            text-align: left;
            padding: 9px 12px !important;
            min-width: 140px;
        }

        .att-matrix-table thead th.weekend {
            background: rgba(107,114,128,.4) !important;
        }

.att-day-name {
    font-size: 9px;
    opacity: .65;
    margin-top: 1px;
}

.att-mat-num {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    padding: 8px 6px !important;
}

.att-mat-name-cell {
    padding: 8px 12px !important;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

.att-mat-grno {
    padding: 8px 8px !important;
    color: var(--muted);
    font-size: 11px;
}

.att-mat-day {
    text-align: center;
    min-width: 32px;
}

.att-mat-stat {
    text-align: center;
    min-width: 38px;
}

.att-cell {
    text-align: center;
    padding: 6px 4px !important;
    font-weight: 600;
    font-size: 11px;
    border: 1px solid var(--cream-d, #EDE8DF) !important;
}

    .att-cell.present {
        background: rgba(34,197,94,.12);
        color: #16a34a;
    }

    .att-cell.absent {
        background: rgba(239,68,68,.1);
        color: var(--red);
    }

    .att-cell.unmarked {
        background: var(--cream);
        color: var(--muted-l);
    }

.att-cell-total {
    text-align: center;
    padding: 6px 4px !important;
    font-weight: 700;
    font-size: 12px;
    color: var(--navy);
    background: var(--gold-pale);
    border: 1px solid var(--cream-d, #EDE8DF) !important;
}

.att-mat-stat-cell {
    text-align: center;
    padding: 6px 6px !important;
    border: 1px solid var(--cream-d, #EDE8DF) !important;
}

.present-stat {
    color: #16a34a;
    font-weight: 700;
    background: rgba(34,197,94,.06);
}

.absent-stat {
    color: var(--red);
    font-weight: 700;
    background: rgba(239,68,68,.06);
}

.att-total-row td {
    background: var(--cream) !important;
    border-top: 2px solid var(--border) !important;
    font-weight: 600;
    font-size: 12px;
}

.att-pct-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

    .att-pct-badge.high {
        background: rgba(34,197,94,.12);
        color: #16a34a;
    }

    .att-pct-badge.mid {
        background: rgba(234,179,8,.12);
        color: #854d0e;
    }

    .att-pct-badge.low {
        background: rgba(239,68,68,.1);
        color: var(--red);
    }

    .att-pct-badge:not(.high):not(.mid):not(.low) {
        background: var(--cream);
        color: var(--muted);
    }

/* ── Print styles ─────────────────────────────── */
@media print {
    .t-sidebar, .t-topbar, .t-footer,
    .pg-actions, #loadReportBtn, #printBtn,
    .t-card:first-child {
        display: none !important;
    }

    .t-main {
        margin-left: 0 !important;
    }

    .t-content {
        padding: 0 !important;
    }

    .att-report-scroll {
        overflow: visible !important;
    }

    .att-matrix-table {
        font-size: 10px;
    }
}


/* ═══════════════════════════════════════════════
   ROLES, PERMISSIONS & TENANT USERS
   append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Role Cards ───────────────────────────────── */
.role-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: var(--tx);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .role-card:hover {
        box-shadow: var(--sh);
        transform: translateY(-2px);
    }

.role-card-head {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.role-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, var(--navy), var(--navy-l));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.role-card-title {
    flex: 1;
}

.role-stats {
    padding: 12px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.role-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

    .role-stat i {
        width: 14px;
        text-align: center;
        color: var(--muted-l);
        font-size: 12px;
    }

    .role-stat.warn {
        color: var(--orange);
    }

        .role-stat.warn i {
            color: var(--orange);
        }

.role-warn-tag {
    font-size: 10px;
    font-weight: 600;
    background: rgba(249,115,22,.1);
    color: var(--orange);
    border: 1px solid rgba(249,115,22,.22);
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 4px;
}

.role-card-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--cream);
    display: flex;
    gap: 7px;
}

    .role-card-foot .t-btn {
        flex: 1;
        justify-content: center;
    }

/* ── Permission Page ──────────────────────────── */
.perm-role-list {
    list-style: none;
}

.perm-role-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: var(--tx);
}

    .perm-role-item:last-child {
        border-bottom: none;
    }

    .perm-role-item:hover {
        background: var(--cream);
    }

    .perm-role-item.active {
        background: rgba(27,42,74,.05);
        border-left: 3px solid var(--navy);
    }

.perm-role-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-l));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.perm-role-arrow {
    font-size: 11px;
    color: var(--muted-l);
}

.flex-1 {
    flex: 1;
}

.perm-placeholder {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}

    .perm-placeholder i {
        font-size: 32px;
        color: var(--muted-l);
        display: block;
        margin-bottom: 12px;
        opacity: .5;
    }

    .perm-placeholder p {
        font-size: 14px;
    }

/* ── Permission Assignment Partial ───────────── */
.perm-assign-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.perm-assign-info {
    font-size: 13px;
    color: var(--muted);
}

.perm-assign-count {
    display: inline-block;
    margin-left: 10px;
    background: rgba(27,42,74,.07);
    color: var(--navy);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.perm-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.perm-group {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.perm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}

.perm-group-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 7px;
}

    .perm-group-title i {
        color: var(--gold);
    }

.perm-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.perm-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    transition: var(--tx);
    user-select: none;
}

    .perm-item:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .perm-item.checked {
        background: rgba(27,42,74,.07);
        border-color: var(--navy);
        color: var(--navy);
    }

    .perm-item input[type=checkbox] {
        display: none;
    }

.perm-assigned-ico {
    font-size: 11px;
    color: var(--teal);
    display: none;
}

.perm-item.checked .perm-assigned-ico {
    display: inline;
}

.perm-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Seed SQL block */
.perm-seed-details {
    text-align: left;
    margin-top: 8px;
}

    .perm-seed-details summary {
        cursor: pointer;
        display: inline-flex;
    }

.perm-seed-sql {
    background: var(--navy);
    color: rgba(255,255,255,.85);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    font-size: 11.5px;
    margin-top: 10px;
    overflow-x: auto;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* ── Tenant User Form — Role Checkboxes ───────── */
.tu-role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.tu-role-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    transition: var(--tx);
    user-select: none;
}

    .tu-role-check:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

    .tu-role-check.checked {
        background: rgba(27,42,74,.07);
        border-color: var(--navy);
        color: var(--navy);
    }

    .tu-role-check input[type=checkbox] {
        display: none;
    }

    .tu-role-check i {
        font-size: 12px;
    }


/* ═══════════════════════════════════════════════
   FEE COLLECTION PAGE — append to bottom of site.css
═══════════════════════════════════════════════ */

/* ── Empty / hint state ───────────────────────── */
.col-hint {
    text-align: center;
    padding: 60px 24px;
    color: var(--muted);
}

    .col-hint i {
        font-size: 36px;
        color: var(--muted-l);
        display: block;
        margin-bottom: 12px;
        opacity: .5;
    }

    .col-hint p {
        font-size: 14px;
    }

/* ── Student profile grid ─────────────────────── */
.col-profile-body {
    padding: 16px 20px !important;
}

.col-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 20px;
}

.col-profile-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--cream-d, #EDE8DF);
}

.col-pf-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted-l);
}

.col-pf-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
}

.col-status-present {
    color: var(--green);
    font-weight: 700;
}

.col-status-left {
    color: var(--red);
    font-weight: 700;
}

/* ── Collection table ─────────────────────────── */
.col-table {
    border-collapse: collapse;
    font-size: 13px;
}

    .col-table thead th {
        background: var(--cream) !important;
        color: var(--muted) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .6px;
        text-transform: uppercase;
        padding: 10px 14px !important;
        border-bottom: 2px solid var(--border) !important;
        white-space: nowrap;
    }

    .col-table tbody td {
        padding: 10px 14px !important;
        vertical-align: middle;
        border-bottom: 1px solid var(--cream-d, #EDE8DF) !important;
    }

    .col-table tbody tr:hover {
        background: var(--gold-pale);
    }

/* ── Status badge in table ────────────────────── */
.col-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

    .col-status-badge.paid {
        background: rgba(34,197,94,.1);
        color: #16a34a;
        border: 1px solid rgba(34,197,94,.2);
    }

    .col-status-badge.unpaid,
    .col-status-badge.pending {
        background: rgba(239,68,68,.09);
        color: var(--red);
        border: 1px solid rgba(239,68,68,.18);
    }

    .col-status-badge.partial {
        background: rgba(249,115,22,.1);
        color: #ea580c;
        border: 1px solid rgba(249,115,22,.22);
    }

/* ── Edit button (orange pill) ────────────────── */
.col-edit-btn {
    background: var(--gold);
    color: var(--navy);
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .col-edit-btn:hover {
        background: var(--gold-light);
    }

/* ── Receivable footer bar ────────────────────── */
.col-receivable-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--cream);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.col-receiving-btn {
    background: var(--green);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
    display: inline-flex;
    align-items: center;
}

    .col-receiving-btn:hover {
        background: #16a34a;
        box-shadow: 0 3px 10px rgba(34,197,94,.3);
    }

.col-total-box {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    min-width: 90px;
    text-align: center;
}

.col-new-amount-btn {
    background: var(--teal);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tx);
    font-family: 'DM Sans', sans-serif;
    display: inline-flex;
    align-items: center;
}

    .col-new-amount-btn:hover {
        background: var(--teal-l);
    }

.col-more-btn {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.col-more-menu {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--sh) !important;
    min-width: 160px;
}

/* ── Receiving modal styles ───────────────────── */
.rcv-student-title {
    font-family: 'Lora', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border);
}

.rcv-fifo-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--gold-pale);
    border: 1.5px dashed var(--gold);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-size: 13px;
    color: var(--navy);
    line-height: 1.6;
}

    .rcv-fifo-preview i {
        margin-top: 2px;
        flex-shrink: 0;
    }

/* ── Edit collection status info ──────────────── */
.col-status-info {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 575.98px) {
    .col-profile-grid {
        grid-template-columns: 1fr 1fr;
    }

    .col-receivable-foot {
        gap: 8px;
    }

    .col-receiving-btn, .col-new-amount-btn, .col-more-btn {
        font-size: 12px;
        padding: 7px 12px;
    }
}