:root{
  --navy:#0F2537; --ink:#0F2537; --ink-2:#16324B;
  --blue:#2563EB; --blue-dark:#1D4ED8; --blue-light:#EAF1FE;
  --teal:#0F8B8D; --teal-dark:#0C7173; --teal-light:#E3F4F4;
  --amber:#F59E0B; --amber-dark:#B45309; --amber-light:#FEF3E2;
  --canvas:#F6F8FB; --card:#FFFFFF; --border:#E2E8F0;
  --text:#172033; --text-soft:#64748B;
  --success:#16A34A; --success-light:#E9F9EF;
  --danger:#EF4444; --danger-light:#FDECEC;
  --radius:16px;
  --shadow: 0 1px 2px rgba(15,37,55,.04), 0 10px 28px -14px rgba(15,37,55,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--canvas);color:var(--text);-webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace;}
.display{font-family:'Poppins',sans-serif;font-weight:700;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
.seal{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;}
.seal svg{width:100%;height:100%;}
.seal.lg{width:64px;height:64px;}
.app{display:flex;min-height:100vh;}
.sidebar{width:250px;flex-shrink:0;background:var(--navy);color:#B7C4D6;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar::-webkit-scrollbar{display:none;width:0;height:0;}
.brand{display:flex;align-items:center;gap:11px;padding:22px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.brand-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:#fff;line-height:1.28;overflow-wrap:anywhere;word-break:break-word;}
.brand-sub{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#7C90A6;margin-top:2px;}
.branch-pill{margin:14px 18px 6px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.45;color:#A9B8CA;cursor:pointer;white-space:normal;overflow-wrap:break-word;word-break:break-word;}
.branch-pill b{color:#fff;font-weight:600;}
.branch-switcher{position:relative;margin:14px 18px 6px;}
.branch-switcher .branch-pill{margin:0;font-family:inherit;font-size:12.5px;}
.branch-switcher-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;background:#132638;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;z-index:50;box-shadow:0 12px 28px rgba(0,0,0,.35);max-height:260px;overflow-y:auto;}
.branch-switcher-menu.open{display:block;}
.branch-switcher-menu form{margin:0;}
.branch-switcher-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;border:none;background:none;color:#CBD5E1;font-size:12.5px;line-height:1.4;cursor:pointer;white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.branch-switcher-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.branch-switcher-item.active{background:rgba(37,99,235,.25);color:#fff;font-weight:600;}
.nav-group{margin-top:16px;padding:0 10px;}
.nav-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#5A7086;padding:8px 12px 6px;font-weight:600;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9.5px 12px;border-radius:9px;font-size:13.5px;color:#AFC0D4;margin-bottom:2px;font-weight:500;border-left:2px solid transparent;transition:background .15s ease, color .15s ease, transform .1s ease;}
.nav-item:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(1px);}
.nav-item.active{background:rgba(37,99,235,.22);color:#fff;border-left:2px solid var(--blue);font-weight:600;}
.nav-item .ic{width:17px;height:17px;flex-shrink:0;opacity:.92;position:relative;display:inline-block;}
.nav-item .ic svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;}
.sidebar-foot{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#5A7086;line-height:1.6;}
.sidebar-foot a{text-decoration:underline;}
.main{margin-left:250px;flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:66px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 26px;gap:16px;position:sticky;top:0;z-index:20;transition:box-shadow .18s ease;}
.topbar.is-scrolled{box-shadow:0 4px 16px -8px rgba(15,37,55,.16);}
.page-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:19px;color:var(--ink);}
.page-caption{font-size:12px;color:var(--text-soft);margin-top:1px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.icon-btn{width:37px;height:37px;border-radius:10px;border:1px solid var(--border);background:var(--card);position:relative;color:var(--text-soft);transition:background .15s ease, border-color .15s ease;}
.icon-btn:hover{background:var(--canvas);border-color:#CBD5E1;}
.icon-btn svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;}
.profile-chip{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--border);position:relative;cursor:pointer;user-select:none;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
.profile-name{font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;}
.profile-name .chev{width:11px;height:11px;color:var(--text-soft);transition:transform .15s;}
.profile-chip.open .chev{transform:rotate(180deg);}
.profile-role{font-size:10.5px;color:var(--text-soft);}
.profile-menu{position:absolute;top:calc(100% + 10px);right:0;width:210px;background:var(--card);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);padding:7px;display:none;z-index:50;}
.profile-chip.open .profile-menu{display:block;}
.profile-menu-head{padding:9px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.profile-menu-head .pm-name{font-size:12.8px;font-weight:700;color:var(--ink);}
.profile-menu-head .pm-email{font-size:11px;color:var(--text-soft);margin-top:1px;}
.profile-menu-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--text);}
.profile-menu-item svg{width:14.5px;height:14.5px;color:var(--text-soft);flex-shrink:0;}
.profile-menu-item:hover{background:var(--canvas);}
.profile-menu-item.danger{color:var(--danger);margin-top:4px;border-top:1px solid var(--border);padding-top:9px;}
.profile-menu-item.danger svg{color:var(--danger);}
.profile-menu-item.danger:hover{background:var(--danger-light);}
.content{padding:26px;flex:1;}
.grid{display:grid;gap:18px;}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:2fr 1fr;}
.grid-atten-fees{grid-template-columns:1fr 1.15fr;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:20px 22px;}
.stat-card{padding:19px 21px;position:relative;overflow:hidden;border-radius:16px;}
.stat-top{display:flex;align-items:center;justify-content:space-between;}
.stat-ic{width:40px;height:40px;border-radius:11px;position:relative;flex-shrink:0;}
.stat-ic svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:19px;height:19px;}
.stat-val{font-family:'Poppins',sans-serif;font-size:28px;font-weight:700;color:var(--ink);margin-top:8px;letter-spacing:-.01em;}
.stat-label{font-size:12.5px;color:var(--text-soft);margin-top:3px;font-weight:500;}
.stat-delta{font-size:11px;font-weight:600;margin-top:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;}
.stat-delta.up{color:var(--success);background:var(--success-light);}
.stat-delta.down{color:var(--danger);background:var(--danger-light);}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.section-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.005em;}
.section-sub{font-size:12.5px;color:var(--text-soft);margin-top:2px;}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid transparent;transition:background .15s ease, box-shadow .15s ease, transform .08s ease;}
.btn svg{width:14px;height:14px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.05), 0 4px 10px -4px rgba(37,99,235,.45);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-ghost{background:var(--card);color:var(--text);border-color:var(--border);}
.btn-ghost:hover{background:var(--canvas);border-color:#CBD5E1;}
.btn-amber{background:var(--amber);color:#fff;}
.btn-amber:hover{background:var(--amber-dark);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 1px 2px rgba(15,139,141,.05), 0 4px 10px -4px rgba(15,139,141,.45);}
.btn-teal:hover{background:var(--teal-dark);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-outline-primary{background:#fff;color:var(--blue);border-color:var(--blue);}
.btn-outline-primary:hover{background:#EFF6FF;}
.btn-outline-danger{background:#fff;color:var(--danger);border-color:var(--danger);}
.btn-outline-danger:hover{background:var(--danger-light);}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:9px;}
.icon-badge{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-badge svg{width:20px;height:20px;}
.icon-badge-amber{background:var(--amber-light);color:var(--amber-dark);}
.icon-badge-green{background:var(--success-light);color:var(--success);}
.icon-badge-blue{background:#DBEAFE;color:var(--blue);}
.section-header-row{display:flex;align-items:center;gap:12px;padding:16px 18px;}
.section-header-row .section-title{margin-bottom:2px;}
.section-header-row .section-sub{font-size:12px;color:var(--text-soft);}
.empty-state-icon{width:56px;height:56px;border-radius:50%;background:var(--canvas);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--text-soft);}
.empty-state-icon svg{width:24px;height:24px;}
.crumb-nav{font-size:12.5px;color:var(--text-soft);margin-top:2px;}
.crumb-nav a{color:var(--text-soft);text-decoration:none;}
.crumb-nav a:hover{color:var(--blue);}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:12.8px;}
thead th{text-align:left;padding:11px 14px;background:var(--canvas);color:var(--text-soft);font-weight:600;font-size:10.8px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);}
tbody tr:hover{background:#FAFBFC;}
.chip{padding:3px 9px;border-radius:20px;font-size:10.8px;font-weight:600;display:inline-block;}
.chip-green{background:var(--success-light);color:var(--success);}
.chip-red{background:var(--danger-light);color:var(--danger);}
.chip-amber{background:var(--amber-light);color:var(--amber-dark);}
.chip-grey{background:#EEF1F5;color:var(--text-soft);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.icon-mini{width:29px;height:29px;border-radius:8px;border:1px solid var(--border);position:relative;display:inline-block;color:var(--text-soft);background:var(--card);transition:background .15s ease;}
.icon-mini:hover{background:var(--canvas);}
.icon-mini svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:13px;height:13px;}
.module-ic{width:42px;height:42px;border-radius:11px;position:relative;flex-shrink:0;}
.module-ic svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;}
.table-toolbar{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.select-mini,.input-mini{padding:8px 11px;border-radius:8px;border:1px solid var(--border);background:var(--canvas);font-size:12.5px;color:var(--text);}
.pager{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-size:12px;color:var(--text-soft);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:2px;}
.field label{font-size:12px;font-weight:600;color:var(--ink);}
.field input,.field select,.field textarea{padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--canvas);font-size:13px;color:var(--text);font-family:inherit;width:100%;}
.field textarea{resize:vertical;min-height:70px;}
.toggle{width:40px;height:22px;border-radius:20px;background:var(--border);position:relative;flex-shrink:0;border:none;cursor:pointer;padding:0;}
.toggle.on{background:var(--teal);}
.toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;}
.toggle.on::after{left:21px;}
.tab-row{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:18px;flex-wrap:wrap;}
.tab-btn{padding:10px 4px;margin-right:20px;font-size:13px;font-weight:600;color:var(--text-soft);border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;}
.tab-btn.active{color:var(--blue-dark);border-bottom-color:var(--blue);}
.module-card{padding:18px;display:flex;flex-direction:column;gap:12px;}
.module-card.inactive{opacity:.55;}
.alert{padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;}
.alert-success{background:var(--success-light);color:var(--success);}
.alert-info{background:#DBEAFE;color:#1E40AF;}
.alert-error{background:var(--danger-light);color:var(--danger);}
.att-cell{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;}
.tt-grid{display:grid;grid-template-columns:90px repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.tt-cell{background:#fff;padding:8px;font-size:11px;min-height:70px;}
.tt-head{background:var(--ink);color:#fff;font-weight:700;font-size:11px;padding:10px 8px;text-align:center;}
.tt-time{background:var(--canvas);font-weight:700;color:var(--text-soft);display:flex;align-items:center;padding:10px 8px;font-size:10.5px;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:20px;}
.login-card{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.role-tabs{display:flex;gap:6px;background:var(--canvas);border-radius:11px;padding:4px;margin-bottom:22px;}
.role-tab{flex:1;text-align:center;padding:9px 6px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-soft);transition:background .15s ease, color .15s ease;}
.role-tab:hover{color:var(--ink);}
.role-tab.active{background:#fff;color:var(--blue,#2563EB);box-shadow:0 1px 3px rgba(15,37,55,.12);}
/* ===== Invoice print styling ===== */
.invoice-page{background:#fff;width:297mm;min-height:210mm;margin:0 auto;padding:8mm;display:flex;}
.voucher{flex:1;border:1.4px solid #16324B;padding:9px 11px;position:relative;font-family:'Inter',sans-serif;color:#12202B;}
.voucher + .voucher{border-left:none;}
.v-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:7px;}
.v-head .seal{margin-bottom:5px;}
.v-school{font-family:'Fraunces',serif;font-weight:700;font-size:13.5px;color:#0B3B4E;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;padding:0 4px;}
.v-box{border:1px solid #16324B;border-top:none;}
.v-row{display:flex;border-bottom:1px solid #16324B;}
.v-row:last-child{border-bottom:none;}
.v-row .lab{width:42%;padding:4px 7px;font-size:9.6px;font-weight:700;color:#0B3B4E;border-right:1px solid #16324B;background:#F1F6F5;}
.v-row .val{flex:1;padding:4px 7px;font-size:9.8px;text-align:center;font-weight:600;}
.v-2col{display:flex;border-bottom:1px solid #16324B;}
.v-2col > div{flex:1;}
.v-2col > div:first-child{border-right:1px solid #16324B;}
.v-2col .lab{padding:4px 7px 0;font-size:8.6px;font-weight:700;color:#0B3B4E;}
.v-2col .val{padding:0 7px 4px;font-size:9.6px;font-weight:700;text-align:center;}
table.v-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:9.8px;}
table.v-table td{padding:5px 8px;border:1px solid #16324B;}
table.v-table td.f-lab{font-weight:600;color:#0B3B4E;}
table.v-table td.f-val{text-align:right;font-weight:700;font-family:'IBM Plex Mono',monospace;}
table.v-table tr.grand td{background:#1B6FB8;color:#fff;font-weight:800;}
table.v-table.late{margin-top:6px;}
table.v-table.late tr.hd td{background:#1B6FB8;color:#fff;font-weight:700;font-size:9px;}
.v-note{display:flex;align-items:flex-start;gap:6px;margin-top:8px;border-top:1px solid #16324B;padding-top:6px;}
.v-note .tag{writing-mode:vertical-rl;font-size:9px;font-weight:700;color:#0B3B4E;transform:rotate(180deg);}
.v-note p{direction:rtl;text-align:right;font-size:10.5px;line-height:1.65;margin:0;flex:1;color:#1B2A33;}
.v-foot{margin-top:9px;border-top:2px solid #0B3B4E;padding-top:7px;}
.v-foot .fname{font-family:'Fraunces',serif;font-weight:700;font-size:11px;color:#0B3B4E;text-align:center;margin-bottom:5px;}
.v-foot .frow{display:flex;align-items:center;gap:5px;font-size:9px;color:#33424E;margin-bottom:2px;}
.v-copy{position:absolute;bottom:9px;right:11px;font-size:9.5px;font-style:italic;font-weight:700;text-decoration:underline;color:#0B3B4E;}
.print-shell{background:#DCE3E1;padding:24px;border-radius:14px;overflow-x:auto;}
.print-shell .invoice-page{box-shadow:0 4px 30px rgba(0,0,0,.12);}
@media print{
  .no-print{display:none !important;}
  .print-shell{background:#fff;padding:0;}
  .print-shell .invoice-page{box-shadow:none;}

  /* Force background colors/gradients to actually print — browsers strip them
     by default unless the page explicitly asks to keep them. Without this,
     every colored header/table-row/badge on invoices, payslips, vouchers,
     admission forms, result cards and reports prints out plain white. */
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

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

/* Hamburger + sidebar overlay — hidden by default on desktop */
.hamburger-btn{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:var(--card);align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;margin-right:4px;}
.hamburger-btn svg{width:18px;height:18px;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(14,34,51,.5);z-index:39;}
.sidebar-overlay.show{display:block;}

@media (max-width: 1100px){
  .grid-5{grid-template-columns:repeat(3,1fr);}
}

@media (max-width: 960px){
  /* Sidebar becomes an off-canvas drawer */
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;z-index:40;box-shadow:0 0 40px rgba(0,0,0,.25);}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .hamburger-btn{display:flex;}

  .grid-5, .grid-4, .grid-3{grid-template-columns:repeat(2,1fr);}
  .dash-3col{grid-template-columns:1fr;}
  .grid-2, .grid-atten-fees{grid-template-columns:1fr;}
}

@media (max-width: 680px){
  .content{padding:16px;}
  .topbar{padding:0 14px;gap:10px;}
  .page-title{font-size:16px;}
  .page-caption{display:none;}

  .grid-5, .grid-4, .grid-3, .grid-2, .grid-atten-fees{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .voucher-actions{flex-direction:column;align-items:stretch;}
  .voucher-actions .btn{justify-content:center;}

  .stat-val{font-size:22px;}
  .section-title{font-size:14.5px;}

  /* Topbar: hide profile text, keep just the avatar to save space */
  .profile-text{display:none;}
  .profile-chip{padding-left:8px;}
  .profile-menu{right:-8px;width:190px;}

  /* Cards / toolbars stack their controls */
  .table-toolbar{padding:12px 14px;flex-direction:column;align-items:stretch;}
  .table-toolbar form{width:100%;min-width:0 !important;}
  .table-toolbar > a, .table-toolbar > button{margin-left:0 !important;width:100%;justify-content:center;}
  .card-pad{padding:16px;}

  /* Timetable grid needs to scroll horizontally on phones — keep display:grid
     intact (switching it to display:block, like an earlier version of this
     rule did, throws away the whole column layout and stacks every cell in
     one vertical list instead). A min-width stops the grid from squeezing
     its columns unreadably thin; that min-width is what makes this element
     wider than the screen so overflow-x can actually kick in. */
  .tt-grid{overflow-x:auto;grid-template-columns:70px repeat(6,90px);}

  /* Login card fills the screen with sensible padding */
  .login-card{padding:28px 22px;}

  /* Modals (module upload/delete) fit narrow screens */
  .card[style*="max-width"]{max-width:100% !important;}
}

@media (max-width: 480px){
  .grid-5, .grid-4, .grid-3, .grid-2{gap:12px;}
  .stat-card{padding:14px 16px;}
  .btn-sm{padding:7px 10px;font-size:11.3px;}
  .section-head{align-items:flex-start;}
}

/* ===== Inline fee payment (Fee Collection / Family pages) ===== */
.ipay{min-width:270px;}
.ipay-line{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;}
.ipay-line .btn{white-space:nowrap;flex-shrink:0;}
.ipay-line + .ipay-line{margin-top:5px;}
.ipay-amt{width:88px;padding:7px 9px;border-radius:8px;border:1px solid var(--border);background:var(--canvas);font-size:12.5px;text-align:right;font-family:'IBM Plex Mono',monospace;}
.ipay-amt:focus,.ipay-method:focus,.ipay-date:focus,.ipay-ref:focus{outline:2px solid var(--blue-light,#EAF1FE);border-color:var(--blue);}
.ipay-opts select,.ipay-opts input{padding:5px 7px;border-radius:7px;border:1px solid var(--border);background:var(--canvas);font-size:11px;color:var(--text-soft);}
.ipay-opts .ipay-method{max-width:96px;}
.ipay-opts .ipay-date{width:112px;}
.ipay-opts .ipay-ref{width:90px;}
.ipay .btn[disabled]{opacity:.55;cursor:wait;}
.ipay-toggle{border:none;background:none;padding:0;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--blue-dark);cursor:pointer;}
.ipay-toggle:hover{text-decoration:underline;}
table.ipay-hist{width:auto;min-width:420px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:#fff;}
table.ipay-hist thead th{padding:7px 12px;background:var(--canvas);}
table.ipay-hist tbody td{padding:8px 12px;vertical-align:top;}
tbody.inv-block:hover,tbody.fam-block:hover{background:transparent;}
.fam-toggle{width:20px;height:20px;border:none;background:none;padding:0;margin-right:2px;cursor:pointer;color:var(--text-soft);}
.fam-caret{display:inline-block;transition:transform .12s ease;}
.fam-block.is-open .fam-caret{transform:rotate(90deg);}
.fam-block.is-open .fam-row td{background:#F5F8FF;}
.ipay-cell{vertical-align:top;}
.ipay-toast{position:fixed;right:22px;bottom:22px;z-index:9999;max-width:360px;padding:12px 16px;border-radius:10px;background:#0F2537;color:#fff;font-size:13px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;}
.ipay-toast.show{opacity:1;transform:translateY(0);}
.ipay-toast.is-error{background:#B91C1C;}
@media (max-width:680px){ .ipay{min-width:230px;} .ipay-line{flex-wrap:wrap;} }

/* ===== Family voucher (one voucher for all of a family's children) ===== */
.fv-title{margin:2px 0 8px;padding:4px 0;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:#fff;background:#0B3B4E;}
table.fv-table{margin-top:8px;}
table.fv-table tr.hd td{background:#1B6FB8;color:#fff;font-weight:700;font-size:9px;}
table.fv-table td.fv-student{vertical-align:top;font-weight:700;width:38%;}
table.fv-table td.fv-month{font-weight:600;font-size:9.4px;}
table.fv-table .fv-sub{font-weight:500;font-size:8px;color:#4B5B66;margin-top:1px;line-height:1.3;}
table.fv-table tr.fv-subtotal td{background:#F1F6F5;font-size:9px;font-weight:700;color:#0B3B4E;}
table.fv-table tr.fv-subtotal td.f-val{font-size:9.4px;}

/* Optional rich page header (icon + subtitle) — only used by pages that pass $pageSubtitle */
.page-head-rich{display:flex;align-items:center;gap:12px;}
.page-head-ico{width:38px;height:38px;border-radius:10px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.page-head-ico svg{width:20px;height:20px;}
.page-subtitle{font-size:12.5px;color:var(--text-soft);margin-top:1px;}
@media (max-width:640px){ .page-subtitle{display:none;} .page-head-ico{width:32px;height:32px;} }

/* Optional topbar search (pages that pass $topSearch, e.g. Dashboard) */
.top-search{position:relative;display:flex;align-items:center;gap:9px;width:300px;height:40px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:#F8FAFC;color:var(--text-soft);margin-right:6px;}
.top-search:focus-within{border-color:#93C5FD;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.top-search > svg{width:17px;height:17px;flex-shrink:0;}
.top-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);padding:0;box-shadow:none;height:100%;}
.top-search-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 40px -16px rgba(15,37,55,.3);padding:6px;z-index:60;}
.top-search-menu[hidden]{display:none;}
.top-search-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--ink);text-decoration:none;}
.top-search-menu a:hover{background:#EFF6FF;}
.top-search-menu svg{width:15px;height:15px;color:#2563EB;flex-shrink:0;}
.top-search-menu span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:1000px){ .top-search{width:200px;} }
@media (max-width:760px){ .top-search{display:none;} }