:root{
  --f-navy: #10203D;
  --f-royal: #1F3E77;
  --f-gold: #D9A441;
  --f-paper: #F6F4EE;
  --f-ink: #1B2436;
  --f-slate: #5B6478;
  --f-line: #E4E0D3;
  --f-danger: #C0392B;
  --f-success: #1F7A63;
  --f-warning: #8F6A16;
}
*{ box-sizing: border-box; }
body{ margin:0; font-family:'Inter',system-ui,sans-serif; background: var(--f-paper); color: var(--f-ink); }
h1,h2,h3,h4,h5{ font-family:'Outfit',system-ui,sans-serif; color: var(--f-navy); }
a{ text-decoration:none; }
.muted{ color: var(--f-slate); }

/* ---------- Login page ---------- */
.fee-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--f-navy), var(--f-royal)); padding:1.5rem; }
.fee-login-card{ background:#fff; border-radius:20px; padding:2.6rem; width:100%; max-width:400px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
.fee-login-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; font-family:'Outfit',sans-serif; font-weight:800; color: var(--f-navy); font-size:1.2rem; }
.fee-login-brand .orbit-dot{ width:12px; height:12px; border-radius:50%; background: var(--f-gold); display:inline-block; }
.fee-login-sub{ color: var(--f-slate); font-size:.85rem; margin-bottom:1.6rem; }

/* ---------- Shell layout ---------- */
.fee-shell{ display:flex; min-height:100vh; }
.fee-sidebar{
  width: 250px; background: var(--f-navy); color:#DCE3F5; flex: none; display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.fee-brand{ padding: 1.4rem 1.3rem; font-family:'Outfit',sans-serif; font-weight:800; color:#fff; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.fee-brand small{ font-weight:400; opacity:.6; font-size:.72rem; display:block; }
.orbit-dot{ width:10px; height:10px; border-radius:50%; background: var(--f-gold); display:inline-block; }
.fee-nav{ display:flex; flex-direction:column; padding: 1rem .8rem; gap:.2rem; flex:1; overflow-y:auto; }
.fee-nav-label{ color:#7C88A8; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.9rem .9rem .3rem; }
.fee-nav a{ color:#B9C2DC; padding:.65rem .9rem; border-radius:10px; font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.6rem; }
.fee-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.fee-nav a.active{ background: var(--f-gold); color: var(--f-navy); }
.fee-sidebar-footer{ padding: 1rem .8rem 1.4rem; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:.3rem; }
.fee-sidebar-footer a{ color:#B9C2DC; padding:.6rem .9rem; border-radius:10px; font-weight:600; font-size:.85rem; display:flex; align-items:center; gap:.6rem; }
.fee-sidebar-footer a:hover{ background: rgba(255,255,255,.06); color:#fff; }

.fee-main{ flex:1; min-width:0; }
.fee-topbar{ display:flex; align-items:center; gap:1rem; padding: 1.1rem 1.6rem; background:#fff; border-bottom:1px solid var(--f-line); position:sticky; top:0; z-index:10; }
.fee-topbar h1{ font-size:1.15rem; margin:0; flex:1; }
.fee-user{ font-size:.85rem; font-weight:600; color: var(--f-slate); text-align:right; }
.fee-user .role-pill{ display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.15em .55em; border-radius:999px; background: var(--f-paper); color: var(--f-royal); margin-left:.4em; }
.year-pill{ display:inline-flex; align-items:center; gap:.35em; font-size:.78rem; font-weight:700; padding:.35em .8em; border-radius:999px; background: var(--f-gold); color: var(--f-navy); margin-right:1rem; white-space:nowrap; }
.year-pill-warn{ background:#FDECEA; color: var(--f-danger); }
.fee-menu-toggle{ border:none; background:none; font-size:1.4rem; color: var(--f-navy); }
.fee-content{ padding: 1.8rem; max-width: 1280px; }

/* ---------- Cards / stats ---------- */
.fee-card{ background:#fff; border:1px solid var(--f-line); border-radius:16px; padding:1.4rem; }
.stat-card{ background:#fff; border:1px solid var(--f-line); border-radius:16px; padding:1.4rem; display:flex; align-items:center; gap:1rem; }
.stat-card .icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none; }
.stat-card .num{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.5rem; color: var(--f-navy); line-height:1; }
.stat-card .label{ color: var(--f-slate); font-size:.8rem; font-weight:600; }

/* ---------- Table ---------- */
.fee-table{ width:100%; border-collapse: collapse; background:#fff; border-radius:16px; overflow:hidden; }
.fee-table th{ text-align:left; background: var(--f-paper); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--f-slate); padding:.85rem 1rem; border-bottom:1px solid var(--f-line); white-space:nowrap; }
.fee-table td{ padding:.85rem 1rem; border-bottom:1px solid var(--f-line); font-size:.88rem; vertical-align: middle; }
.fee-table tr:last-child td{ border-bottom:none; }
.fee-table tfoot td{ font-weight:700; background: var(--f-paper); }

.badge-status{ font-size:.7rem; font-weight:700; padding:.3em .7em; border-radius:999px; text-transform:capitalize; white-space:nowrap; }
.badge-pending{ background:#FDECEA; color: var(--f-danger); }
.badge-partial{ background:#FFF4E0; color: var(--f-warning); }
.badge-paid{ background:#E7F5F0; color: var(--f-success); }
.badge-upcoming{ background:#EDEFF3; color: var(--f-slate); }
.badge-active{ background:#E7F5F0; color: var(--f-success); }
.badge-inactive, .badge-left, .badge-promoted{ background:#EDEFF3; color: var(--f-slate); }
.badge-detained{ background:#FFF4E0; color: var(--f-warning); }
.role-badge-admin{ background:#E7EFFC; color:#2451B4; }
.role-badge-staff{ background:#EDEFF3; color: var(--f-slate); }

.btn-f{ border-radius:10px; font-weight:700; font-size:.85rem; padding:.45rem .9rem; border:1px solid transparent; display:inline-flex; align-items:center; gap:.4rem; }
.btn-f:disabled{ opacity:.5; cursor:not-allowed; }
.btn-f-primary{ background: var(--f-navy); color:#fff; }
.btn-f-primary:hover{ background: var(--f-royal); color:#fff; }
.btn-f-gold{ background: var(--f-gold); color: var(--f-navy); }
.btn-f-gold:hover{ background:#c48f36; color: var(--f-navy); }
.btn-f-outline{ background:#fff; border-color: var(--f-line); color: var(--f-ink); }
.btn-f-outline:hover{ background: var(--f-paper); }
.btn-f-danger{ background:#fff; border-color: #F3D3CE; color: var(--f-danger); }
.btn-f-danger:hover{ background:#FDECEA; }

.fee-alert{ padding:.8rem 1.1rem; border-radius:12px; font-size:.88rem; font-weight:600; margin-bottom:1.2rem; }
.fee-alert.ok{ background:#E7F5F0; color: var(--f-success); }
.fee-alert.err{ background:#FDECEA; color: var(--f-danger); }

.form-control, .form-select{ border-radius:10px; border:1.5px solid var(--f-line); }
.form-control:focus, .form-select:focus{ border-color: var(--f-royal); box-shadow: 0 0 0 .2rem rgba(31,62,119,.12); }
label.form-label{ font-weight:600; font-size:.85rem; }

.fee-section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.fee-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.fee-tabs a{ padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--f-line); color: var(--f-ink); font-weight:600; font-size:.85rem; background:#fff; }
.fee-tabs a.active{ background: var(--f-navy); border-color: var(--f-navy); color:#fff; }

/* ---------- Receipt ---------- */
.receipt-box{ background:#fff; border:1px solid var(--f-line); border-radius:16px; padding:2rem; max-width:640px; margin:0 auto; }
.receipt-head{ text-align:center; border-bottom:2px solid var(--f-navy); padding-bottom:1rem; margin-bottom:1.2rem; }
.receipt-head h2{ margin:.2rem 0; }
.receipt-meta{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:1rem; }
.receipt-total-row{ font-size:1.1rem; font-weight:800; color: var(--f-navy); }

@media print{
  .no-print{ display:none !important; }
  .fee-content{ padding:0; max-width:none; }
  body{ background:#fff; }
  .receipt-box{ border:none; box-shadow:none; padding:0; }
}

@media (max-width: 991.98px){
  .fee-sidebar{ position:fixed; left:-260px; top:0; z-index:1000; transition:left .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .fee-shell.sidebar-open .fee-sidebar{ left:0; }
}