/* ============================================================================
   SchoolAid — styles.css (Grid-only, blue/gold branded, all modules included)
   ============================================================================ */

:root{
  --primary:#0a3d91;    /* SchoolAid Blue */
  --accent:#f2b705;     /* SchoolAid Gold */
  --secondary:#16213e;
  --background:#f4f7fa;
  --text:#1a202c; --text-muted:#6b7280; --border:#e5e9ef; --card:#fff; --hover:#f8fafc;
  --danger:#dc2626; --success:#16a34a; --warn:#f59e0b; --info:#3b82f6;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:26px;
  --shadow-sm:0 1px 3px rgba(10,61,145,.06); --shadow-md:0 2px 12px rgba(10,61,145,.08);
  --shadow-lg:0 12px 40px rgba(10,61,145,.12);
  --transition:.18s ease;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;color:var(--text);background:var(--background);-webkit-font-smoothing:antialiased;}
button{font-family:inherit;cursor:pointer;border:none;}
input,select,textarea{font-family:inherit;font-size:14px;color:inherit;}
a{color:var(--primary);text-decoration:none;}

/* ========================= LOGIN ========================= */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg, #06245f 0%, #0a3d91 50%, #0f4fb8 100%);}
.login-card{background:#fff;border-radius:30px;padding:45px 40px;width:100%;
  max-width:440px;box-shadow:0 25px 50px rgba(0,0,0,.35);position:relative;overflow:hidden;}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg, #f2b705, #ffd54f, #f2b705);}
.brand-block{text-align:center;margin-bottom:25px;}
.brand-logo{width:110px;height:110px;margin:0 auto 16px;object-fit:contain;display:block;}
.brand-name{font-size:28px;font-weight:800;color:var(--primary);letter-spacing:-.5px;}
.brand-motto{font-size:12px;color:var(--accent);letter-spacing:2px;font-weight:700;text-transform:uppercase;margin-top:4px;}
.login-title{font-size:18px;font-weight:600;color:var(--text);text-align:center;margin-bottom:8px;}
.login-subtitle{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:25px;line-height:1.5;}

/* ========================= APP SHELL ========================= */
.app-shell{display:block;min-height:100vh;}
.main{padding:22px 28px 60px;max-width:1440px;margin:0 auto;}
.page{display:none;}
.page.active{display:block;}

.top-strip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;background:#fff;border-radius:18px;margin-bottom:22px;
  box-shadow:var(--shadow-sm);border-left:6px solid var(--accent);flex-wrap:wrap;
}
.top-strip .brand-block-top{display:flex;align-items:center;gap:14px;}
.top-strip .brand-logo-top{width:46px;height:46px;border-radius:12px;object-fit:contain;background:#fff;padding:4px;}
.top-strip .school-name-top{font-size:18px;font-weight:800;color:var(--primary);}
.top-strip .school-motto-top{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.top-strip .user-mini{display:flex;align-items:center;gap:14px;font-size:13px;color:#555;}
.top-strip .user-mini b{color:var(--primary);}
.top-strip .btn-logout-mini{
  width:40px;height:40px;border-radius:12px;background:transparent;
  border:1px solid #ddd;color:#666;font-size:15px;transition:var(--transition);
}
.top-strip .btn-logout-mini:hover{background:#fee2e2;border-color:#dc2626;color:#dc2626;}

/* ========================= BUTTONS ========================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 20px;font-size:13.5px;font-weight:600;border-radius:12px;
  transition:var(--transition);white-space:nowrap;border:none;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-block{width:100%;padding:14px;font-size:15px;}
.btn-sm{padding:8px 16px;font-size:12px;border-radius:10px;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px rgba(10,61,145,.35);}
.btn-accent{background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);font-weight:700;}
.btn-accent:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px rgba(242,183,5,.45);}
.btn-outline{background:#fff;color:var(--primary);border:2px solid var(--border);}
.btn-outline:hover:not(:disabled){border-color:var(--accent);}
.btn-ghost{background:transparent;color:var(--text-muted);padding:8px;font-weight:500;}
.btn-ghost:hover{color:var(--text);}
.btn-danger{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;}
.btn-danger:hover:not(:disabled){filter:brightness(.92);}
.btn-success{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;}
.btn-warn{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;}

.btn-present{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:10px 24px;border-radius:12px;font-weight:600;}
.btn-absent{background:linear-gradient(135deg,#f44336,#e53935);color:#fff;padding:10px 24px;border-radius:12px;font-weight:600;}
.btn-change{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;padding:8px 16px;font-size:12px;border-radius:10px;font-weight:600;}
.btn-undo{background:linear-gradient(135deg,#9e9e9e,#757575);color:#fff;padding:8px 16px;font-size:12px;border-radius:10px;font-weight:600;}
.btn-pay{background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);padding:9px 18px;border-radius:10px;font-weight:700;font-size:13px;}
.btn-receipt{background:linear-gradient(135deg,var(--primary),#082a66);color:#fff;padding:9px 18px;border-radius:10px;font-weight:600;font-size:13px;}
.btn-installment{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;padding:9px 18px;border-radius:10px;font-weight:600;font-size:13px;}
.btn-sms{background:linear-gradient(135deg,#6c5ce7,#4834d4);color:#fff;padding:9px 18px;border-radius:10px;font-weight:600;font-size:13px;}
.btn-bulk{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;}
.btn-scholar{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;padding:9px 18px;border-radius:10px;font-weight:600;font-size:13px;}
.btn-revoke{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;padding:6px 14px;border-radius:8px;font-weight:600;font-size:11px;}
.btn-undo-of{background:#eee;color:#666;padding:9px 14px;border-radius:10px;font-weight:600;font-size:12px;}
.btn-manual-owing{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;}

/* ========================= FIELDS ========================= */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text);}
.field input,.field select,.field textarea,
.input-text,.input-number,.input-date,.input-search,.select{
  width:100%;padding:12px 16px;border:2px solid var(--border);
  border-radius:14px;background:#fff;font-size:14px;transition:var(--transition);outline:none;}
.field input:focus,.field select:focus,.field textarea:focus,
.input-text:focus,.input-number:focus,.input-date:focus,
.input-search:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,183,5,.15);}
.field input[readonly]{background:var(--hover);color:var(--text-muted);}
.field input[type="color"]{height:46px;padding:4px;cursor:pointer;}
.field input[type="file"]{font-size:13px;padding:8px;cursor:pointer;}
.logo-preview{margin-top:8px;max-width:90px;max-height:90px;border-radius:10px;
  border:2px solid var(--border);background:#fff;padding:6px;object-fit:contain;}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;}
.form-grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap;}
.form-footer-split{justify-content:space-between;}

.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.filter-bar > .input-search{flex:2;min-width:220px;}
.filter-bar > .input-text{flex:1;min-width:140px;}
.filter-bar > .input-number{flex:0 0 170px;}
.filter-bar > .input-date{flex:0 0 170px;}
.filter-bar > .select{flex:0 0 190px;}

.input-group{margin-bottom:20px;}
.input-group label{display:block;margin-bottom:8px;font-weight:500;color:#333;font-size:14px;}
.input-group input,.input-group select{width:100%;padding:14px 16px;border:2px solid #e0e0e0;
  border-radius:15px;font-size:15px;transition:all .3s;font-family:inherit;background:#fff;}
.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,.1);}

/* ========================= CARDS / TILES / STATS ========================= */
.card{background:#fff;border-radius:var(--radius-xl);padding:22px;
  border:1px solid #eee;box-shadow:0 5px 18px rgba(0,0,0,.06);margin-bottom:18px;}
.card-title{font-size:17px;font-weight:700;color:var(--primary);margin-bottom:6px;}
.card-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:14px;}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;}

.tile-grid,.sa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;}
.tile,.sa-tile{background:#fff;border-radius:22px;padding:32px 20px;text-align:center;
  cursor:pointer;transition:var(--transition);box-shadow:0 6px 18px rgba(10,61,145,.07);
  border-top:5px solid var(--accent);min-height:190px;display:flex;flex-direction:column;
  justify-content:center;gap:10px;}
.tile:hover,.sa-tile:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(242,183,5,.35);
  border-top-color:var(--primary);}
.tile-icon,.sa-tile .tile-icon{font-size:52px;line-height:1;}
.tile-title,.sa-tile .tile-title{font-size:15px;font-weight:800;color:var(--primary);
  letter-spacing:.4px;text-transform:uppercase;}
.tile-desc,.sa-tile .tile-desc{font-size:12px;color:#888;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:22px;}
.stat-grid-tight{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;}
.stat-card{background:#fff;border-radius:20px;padding:22px;text-align:center;cursor:pointer;
  transition:var(--transition);box-shadow:0 5px 15px rgba(10,61,145,.08);border-top:4px solid var(--accent);}
.stat-card:hover{transform:translateY(-4px);}
.stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;
  color:var(--text-muted);margin-bottom:8px;}
.stat-value{font-size:34px;font-weight:800;color:var(--accent);line-height:1.05;letter-spacing:-.5px;}
.stat-sub{font-size:11.5px;color:var(--text-muted);margin-top:6px;}
.stat-card.stat-blue{border-top-color:var(--primary);} .stat-card.stat-blue .stat-value{color:var(--primary);}
.stat-card.stat-green{border-top-color:#4caf50;} .stat-card.stat-green .stat-value{color:#2e7d32;}
.stat-card.stat-red{border-top-color:#f44336;} .stat-card.stat-red .stat-value{color:#c62828;}
.stat-card.stat-gold{border-top-color:var(--accent);} .stat-card.stat-gold .stat-value{color:var(--accent);}

.of-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:20px;}
.of-stat-card{background:#fff;border-radius:18px;padding:20px;text-align:center;
  box-shadow:0 3px 10px rgba(10,61,145,.08);border-top:4px solid var(--accent);}
.of-stat-card.green{border-top-color:#4caf50;} .of-stat-card.red{border-top-color:#f44336;}
.of-stat-card.blue{border-top-color:var(--primary);}
.of-stat-card .of-number{font-size:32px;font-weight:800;color:var(--primary);}
.of-stat-card.green .of-number{color:#4caf50;} .of-stat-card.red .of-number{color:#f44336;}
.of-stat-card.blue .of-number{color:var(--primary);}
.of-stat-card .of-label{font-size:12px;color:#666;margin-top:5px;text-transform:uppercase;letter-spacing:.4px;}

.daily-total-card{background:linear-gradient(135deg,var(--primary),var(--secondary));border-radius:20px;
  padding:25px;margin-bottom:25px;text-align:center;color:white;border:1px solid rgba(242,183,5,.3);}
.daily-total-card .total-label{font-size:14px;opacity:.8;letter-spacing:2px;}
.daily-total-card .total-amount{font-size:48px;font-weight:bold;color:var(--accent);margin:10px 0;}
.daily-total-card .total-count{font-size:14px;opacity:.7;}
.daily-total-card .change-info{font-size:13px;opacity:.8;margin-top:5px;color:var(--accent);}
.daily-total-card .refresh-date{font-size:11px;opacity:.5;margin-top:10px;}

/* ========================= LISTS / ROWS ========================= */
.list-container{display:flex;flex-direction:column;gap:10px;}
.list-compact{max-height:400px;overflow-y:auto;}
.row{background:#fff;border-radius:15px;padding:15px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 2px 8px rgba(10,61,145,.05);border:1px solid #eee;border-left:5px solid #ccc;
  transition:var(--transition);}
.row:hover{background:#fafbfc;}
.row-success{border-left-color:#4caf50;background:linear-gradient(135deg,#f1f8f4,#e8f5e9);}
.row-danger{border-left-color:#f44336;}
.row-warn{border-left-color:#ff9800;background:linear-gradient(135deg,#fffdf7,#fff8e1);}
.row-info{border-left-color:#6c5ce7;background:linear-gradient(135deg,#f8f5ff,#ede7f6);}
.row-main{flex:1;min-width:200px;}
.row-title{font-weight:700;font-size:15px;color:var(--primary);}
.row-sub{font-size:12px;color:#666;margin-top:3px;}
.row-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;margin-top:8px;}
.row-meta strong{color:var(--primary);}
.row-meta .money{font-family:'Courier New',monospace;font-weight:700;}
.row-meta .money.green{color:#2e7d32;} .row-meta .money.red{color:#c62828;}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;
  font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:20px;text-transform:uppercase;}
.badge-success{background:#4caf50;color:#fff;}
.badge-danger{background:#f44336;color:#fff;}
.badge-warn{background:#ff9800;color:#fff;}
.badge-info{background:var(--primary);color:#fff;}
.badge-muted{background:#eee;color:#666;}
.badge-gold{background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);}
.badge-scholar{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;}

.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;}
.roster-card{background:#fff;border:2px solid #eee;border-radius:15px;padding:18px;
  display:flex;align-items:center;gap:15px;cursor:pointer;transition:var(--transition);}
.roster-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.roster-avatar,.avatar{width:55px;height:55px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);font-weight:800;font-size:20px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.roster-avatar img,.avatar img{width:100%;height:100%;object-fit:cover;}
.roster-info{flex:1;min-width:0;}
.roster-info .name{font-weight:700;color:var(--primary);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.roster-info .sid{font-size:11.5px;color:#666;margin-top:3px;}

.score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.score-card{background:#fff;border:1px solid #eee;border-radius:15px;padding:15px;}
.score-card-name{font-weight:700;color:var(--primary);margin-bottom:10px;font-size:15px;}
.score-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.score-inputs label{font-size:11px;color:#666;display:block;}
.score-inputs input{width:100%;padding:8px;border:1px solid #ddd;border-radius:8px;
  font-size:13px;margin-top:3px;}
.score-summary{margin-top:10px;padding:8px 10px;background:#f8f9fa;border-radius:8px;
  font-size:12px;font-weight:600;color:var(--primary);}

.student-list{max-height:420px;overflow-y:auto;margin-bottom:20px;}
.student-item{display:flex;align-items:center;padding:12px;border-bottom:1px solid #e0e0e0;
  cursor:pointer;transition:background .2s;flex-wrap:wrap;gap:10px;}
.student-item:hover{background:#f8f9fa;}
.student-item.selected{background:rgba(242,183,5,.1);border-left:4px solid var(--accent);}
.checkbox-custom{margin-right:15px;width:20px;height:20px;cursor:pointer;}
.student-name{font-weight:700;font-size:15px;color:var(--primary);}
.student-details{font-size:12px;color:#666;margin-top:4px;}

.attendance-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-bottom:25px;}
.summary-card{background:#fff;border-radius:15px;padding:20px;text-align:center;
  box-shadow:0 3px 10px rgba(10,61,145,.08);}
.summary-card .number{font-size:32px;font-weight:bold;}
.summary-card .label{font-size:12px;color:#666;margin-top:5px;}
.summary-card.present .number{color:#4caf50;}
.summary-card.absent .number{color:#f44336;}
.summary-card.not-marked .number{color:var(--accent);}
.summary-card.total .number{color:var(--primary);}

.attendance-row{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px;background:#fff;border-radius:16px;margin-bottom:12px;
  box-shadow:0 2px 8px rgba(10,61,145,.05);border:1px solid #eee;flex-wrap:wrap;gap:10px;}
.attendance-row.marked-present{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border-left:5px solid #4caf50;}
.attendance-row.marked-absent{background:linear-gradient(135deg,#ffebee,#ffcdd2);border-left:5px solid #f44336;}
.student-info{flex:1;min-width:150px;}
.attendance-buttons{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.status-badge{display:inline-block;padding:4px 12px;border-radius:30px;
  font-size:11px;font-weight:bold;margin-left:12px;}
.status-present{background:#4caf50;color:#fff;}
.status-absent{background:#f44336;color:#fff;}
.marked-info{font-size:11px;margin-top:6px;color:#666;}
.advance-indicator{background:var(--accent);color:var(--primary);padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:bold;display:inline-block;margin-top:5px;cursor:pointer;}

.date-bar{background:#fff;border-radius:15px;padding:15px 20px;margin-bottom:20px;
  display:flex;gap:15px;align-items:center;flex-wrap:wrap;
  box-shadow:0 3px 10px rgba(10,61,145,.06);border-left:4px solid var(--accent);}
.date-bar label{font-weight:600;color:#333;font-size:14px;}
.date-bar input[type="date"]{padding:10px 14px;border:2px solid #e0e0e0;border-radius:10px;
  font-family:inherit;font-size:14px;}
.date-bar .quick-btn{padding:8px 16px;border-radius:20px;border:2px solid var(--accent);
  background:#fff;color:var(--primary);font-weight:600;cursor:pointer;font-family:inherit;font-size:12px;}
.date-bar .quick-btn.active{background:var(--accent);}

.short-badge{display:inline-block;background:#f44336;color:#fff;padding:3px 10px;
  border-radius:20px;font-size:11px;font-weight:bold;margin-left:8px;}

.tui-student-row{display:flex;justify-content:space-between;align-items:center;
  padding:15px 20px;background:#fff;border-radius:15px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(10,61,145,.05);border:1px solid #eee;border-left:5px solid #ccc;
  flex-wrap:wrap;gap:10px;}
.tui-student-row.fully-paid{border-left-color:#4caf50;background:linear-gradient(135deg,#f1f8f4,#e8f5e9);}
.tui-student-row.partial{border-left-color:#ff9800;background:linear-gradient(135deg,#fffdf7,#fff8e1);}
.tui-student-row.unpaid{border-left-color:#f44336;}
.tui-student-row.scholar{border-left-color:#6c5ce7;background:linear-gradient(135deg,#f8f5ff,#ede7f6);}
.tui-student-row.admitted{border-left-color:var(--primary);background:linear-gradient(135deg,#f0f5ff,#e3f2fd);}
.tui-student-row .tui-row-info{flex:1;min-width:200px;}
.tui-student-row .tui-row-name{font-weight:700;color:var(--primary);font-size:15px;}
.tui-student-row .tui-row-meta{font-size:12px;color:#666;margin-top:3px;}
.tui-student-row .tui-row-financials{display:flex;gap:15px;align-items:center;
  flex-wrap:wrap;margin-top:8px;}
.tui-student-row .tui-fin-item{text-align:center;}
.tui-student-row .tui-fin-label{font-size:9px;color:#999;text-transform:uppercase;}
.tui-student-row .tui-fin-value{font-size:15px;font-weight:700;color:var(--primary);}
.tui-student-row .tui-fin-value.green{color:#4caf50;}
.tui-student-row .tui-fin-value.red{color:#f44336;}
.tui-student-row .tui-row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

.of-student-row{display:flex;justify-content:space-between;align-items:center;
  padding:15px 20px;background:#fff;border-radius:15px;margin-bottom:10px;
  box-shadow:0 2px 8px rgba(10,61,145,.05);border:1px solid #eee;border-left:5px solid #ccc;
  flex-wrap:wrap;gap:10px;}
.of-student-row.paid{border-left-color:#4caf50;background:linear-gradient(135deg,#f1f8f4,#e8f5e9);}
.of-student-row.unpaid{border-left-color:#f44336;}
.of-student-row .of-row-info{flex:1;min-width:180px;}
.of-student-row .of-row-name{font-weight:700;color:var(--primary);font-size:15px;}
.of-student-row .of-row-meta{font-size:12px;color:#666;margin-top:3px;}
.of-student-row .of-row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.of-badge-paid{background:#4caf50;color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;
  font-weight:700;text-transform:uppercase;}
.of-badge-unpaid{background:#f44336;color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;
  font-weight:700;text-transform:uppercase;}
.of-badge-owing{background:#ff9800;color:#fff;padding:4px 12px;border-radius:20px;font-size:11px;
  font-weight:700;text-transform:uppercase;}
.of-badge-scholar{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;padding:4px 12px;
  border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;}

.adm-hero{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 50%,#0f4fb8 100%);
  border-radius:25px;padding:40px;margin-bottom:30px;color:#fff;text-align:center;
  box-shadow:0 15px 40px rgba(10,61,145,.2);}
.adm-hero h2{font-size:30px;color:var(--accent);margin-bottom:10px;}
.adm-hero p{font-size:15px;opacity:.9;}
.adm-form-card{background:#fff;border-radius:25px;padding:35px;
  box-shadow:0 10px 40px rgba(10,61,145,.08);margin-bottom:30px;}
.adm-form-card h3{color:var(--primary);margin-bottom:25px;font-size:20px;
  padding-bottom:15px;border-bottom:2px solid #f0f0f0;}
.adm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.adm-form-grid .full{grid-column:1 / -1;}
.adm-field{display:flex;flex-direction:column;position:relative;}
.adm-field label{font-size:13px;font-weight:600;color:#333;margin-bottom:8px;}
.adm-field label .required{color:#f44336;}
.adm-field input,.adm-field select{padding:14px 16px;border:2px solid #e0e0e0;border-radius:12px;
  font-family:inherit;font-size:15px;background:#fff;}
.adm-field input:focus,.adm-field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(242,183,5,.15);}
.adm-field input.valid{border-color:#4caf50;background:#f1f8f4;}
.adm-field input.invalid{border-color:#f44336;background:#fff5f5;}
.adm-field .hint{font-size:11px;color:#888;margin-top:5px;}
.phone-status{position:absolute;right:14px;top:38px;font-size:16px;}
.phone-status.ok{color:#4caf50;} .phone-status.bad{color:#f44336;}

.adm-preview-box{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-radius:20px;
  padding:25px;margin-bottom:25px;border-left:6px solid var(--accent);
  display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.adm-preview-box .pv-icon{font-size:26px;margin-bottom:6px;}
.adm-preview-box .pv-label{font-size:11px;color:#666;text-transform:uppercase;
  letter-spacing:1.5px;font-weight:600;}
.adm-preview-box .pv-value{font-size:24px;font-weight:700;color:var(--primary);margin-top:6px;}
.adm-preview-box .pv-value.gold{color:var(--accent);}

.adm-list-card{background:#fff;border-radius:15px;padding:20px;
  box-shadow:0 3px 12px rgba(10,61,145,.06);margin-bottom:12px;border-left:5px solid #4caf50;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.adm-list-card.owing{border-left-color:#ff9800;background:linear-gradient(135deg,#fffdf7,#fff8e1);}
.adm-list-card .al-info{flex:1;min-width:200px;}
.adm-list-card .al-name{font-weight:700;color:var(--primary);font-size:16px;}
.adm-list-card .al-meta{font-size:12px;color:#666;margin-top:5px;}
.adm-list-card .al-financials{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.adm-list-card .fin-item{text-align:center;}
.adm-list-card .fin-label{font-size:9px;color:#999;text-transform:uppercase;}
.adm-list-card .fin-value{font-size:15px;font-weight:700;color:var(--primary);}
.adm-list-card .fin-value.green{color:#4caf50;}
.adm-list-card .fin-value.red{color:#f44336;}
.adm-list-card .al-actions{display:flex;gap:8px;flex-wrap:wrap;}
.adm-dept-chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;
  font-weight:700;text-transform:uppercase;background:#e3f2fd;color:var(--primary);}
.adm-dept-chip.preschool{background:#fce4ec;color:#c2185b;}
.adm-dept-chip.lowerprimary{background:#e8f5e9;color:#2e7d32;}
.adm-dept-chip.upperprimary{background:#fff3e0;color:#e65100;}
.adm-dept-chip.juniorhigh{background:#ede7f6;color:#4527a0;}

.pay-choice{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0;}
.pay-option{border:3px solid #e0e0e0;border-radius:15px;padding:20px;cursor:pointer;
  transition:all .25s;text-align:center;background:#fff;}
.pay-option.selected{border-color:#4caf50;background:linear-gradient(135deg,#f1f8f4,#e8f5e9);}
.pay-option .po-icon{font-size:40px;margin-bottom:8px;}
.pay-option .po-title{font-weight:700;color:var(--primary);font-size:16px;}
.pay-option .po-desc{font-size:12px;color:#666;}
.installment-input-box{background:#f8f9fa;border-radius:15px;padding:20px;margin-bottom:15px;display:none;}
.installment-input-box.show{display:block;}
.installment-input-box input{width:100%;padding:14px 16px;font-size:18px;font-weight:700;
  border:2px solid #e0e0e0;border-radius:12px;font-family:inherit;color:var(--primary);}
.installment-breakdown{display:flex;justify-content:space-between;margin-top:15px;
  padding-top:15px;border-top:1px dashed #ccc;flex-wrap:wrap;gap:10px;}
.installment-breakdown .ib-item{text-align:center;flex:1;min-width:100px;}
.installment-breakdown .ib-label{font-size:11px;color:#666;text-transform:uppercase;}
.installment-breakdown .ib-value{font-size:18px;font-weight:700;margin-top:4px;}
.installment-breakdown .ib-value.green{color:#4caf50;}
.installment-breakdown .ib-value.red{color:#f44336;}

.users-table,.store-table,.exp-table,.fee-table,.of-summary-table,.admin-table,.archive-stats-table{
  width:100%;border-collapse:collapse;font-size:13px;background:#fff;
  border-radius:14px;overflow:hidden;}
.users-table th,.store-table th,.exp-table th,.fee-table th,.of-summary-table th,.admin-table th,.archive-stats-table th{
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;padding:12px;text-align:left;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.users-table td,.store-table td,.exp-table td,.fee-table td,.of-summary-table td,.admin-table td,.archive-stats-table td{
  padding:11px 12px;border-bottom:1px solid #f0f0f0;}
.scrollable-table{overflow-x:auto;max-height:520px;overflow-y:auto;border-radius:14px;}
.role-chip{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;
  font-weight:700;text-transform:uppercase;background:#e3f2fd;color:var(--primary);}
.role-chip.super-admin{background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);}
.role-chip.administrator{background:#e3f2fd;color:var(--primary);}
.role-chip.teacher{background:#e8f5e9;color:#2e7d32;}
.role-chip.other-fees{background:#fff3e0;color:#e65100;}
.role-chip.accountant{background:#fce4ec;color:#c2185b;}

.exp-cat-chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;
  font-weight:700;background:#fce4ec;color:#c2185b;text-transform:uppercase;}
.exp-cat-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:20px;}
.exp-cat-card{background:linear-gradient(135deg,#fff5f5,#ffebee);border-radius:12px;padding:14px;
  border-left:4px solid #dc3545;text-align:center;}
.exp-cat-card .cat-name{font-size:11px;color:#666;text-transform:uppercase;font-weight:600;}
.exp-cat-card .cat-amt{font-size:20px;font-weight:700;color:#c62828;margin-top:6px;}
.exp-section{background:#fff;border-radius:20px;padding:25px;margin-bottom:25px;
  box-shadow:0 5px 20px rgba(10,61,145,.06);border-left:5px solid #dc3545;}
.exp-section h3{color:var(--primary);font-size:17px;margin-bottom:15px;}
.exp-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin-bottom:15px;}
.exp-input,.exp-select{width:100%;padding:12px 14px;border:2px solid #e0e0e0;border-radius:10px;
  font-family:inherit;font-size:14px;background:#fff;}

.fee-table input{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:10px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--primary);}

.store-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;margin-bottom:25px;}
.store-stat-card{background:#fff;border-radius:20px;padding:22px;text-align:center;
  box-shadow:0 5px 15px rgba(10,61,145,.08);border-top:4px solid var(--accent);}
.store-stat-card.green{border-top-color:#4caf50;}
.store-stat-card.red{border-top-color:#f44336;}
.store-stat-card.blue{border-top-color:var(--primary);}
.store-stat-card.purple{border-top-color:#6c5ce7;}
.store-stat-card .store-num{font-size:32px;font-weight:700;color:var(--primary);}
.store-stat-card.green .store-num{color:#4caf50;}
.store-stat-card.red .store-num{color:#f44336;}
.store-stat-card.purple .store-num{color:#6c5ce7;}
.store-stat-card .store-label{font-size:12px;color:#666;margin-top:5px;text-transform:uppercase;}
.store-card{background:#fff;border-radius:20px;padding:22px;margin-bottom:16px;
  border-left:5px solid var(--accent);box-shadow:0 5px 15px rgba(10,61,145,.06);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;}
.store-card .store-name{font-size:18px;font-weight:700;color:var(--primary);}
.store-card .store-desc{font-size:12px;color:#888;margin-top:4px;}
.store-card .store-metrics{display:flex;gap:20px;flex-wrap:wrap;}
.store-card .store-metric{text-align:center;}
.store-card .store-metric .m-val{font-size:20px;font-weight:700;}
.store-card .store-metric .m-val.green{color:#4caf50;}
.store-card .store-metric .m-val.red{color:#f44336;}
.store-card .store-metric .m-val.blue{color:var(--primary);}
.store-card .store-metric .m-val.purple{color:#6c5ce7;}
.store-card .store-metric .m-lbl{font-size:10px;color:#999;text-transform:uppercase;margin-top:3px;}
.store-card .store-actions{display:flex;gap:8px;flex-wrap:wrap;}
.store-form-card{background:#fff;border-radius:20px;padding:25px;margin-bottom:20px;
  box-shadow:0 5px 15px rgba(10,61,145,.06);border-left:5px solid var(--accent);}
.store-form-card h3{color:var(--primary);font-size:16px;margin-bottom:15px;}
.store-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-bottom:12px;}
.store-input{width:100%;padding:12px 14px;border:2px solid #e0e0e0;border-radius:10px;
  font-family:inherit;font-size:14px;}
.store-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.store-tab-btn{padding:12px 22px;border-radius:15px;border:2px solid var(--accent);background:#fff;
  color:var(--primary);font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;}
.store-tab-btn.active{background:linear-gradient(135deg,var(--accent),#ffd54f);color:var(--primary);}
.stock-low{color:#f44336;font-weight:700;}
.stock-ok{color:#4caf50;font-weight:700;}
.stock-zero{color:#999;font-weight:700;}

.sms-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:15px;margin-bottom:20px;}
.sms-stat{background:linear-gradient(135deg,#f8f5ff,#ede7f6);border-radius:15px;padding:18px;
  text-align:center;border-top:4px solid #6c5ce7;}
.sms-stat .sms-num{font-size:28px;font-weight:700;color:#4834d4;}
.sms-stat .sms-lbl{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px;}
.sms-stat.red{background:linear-gradient(135deg,#fff5f5,#ffebee);border-top-color:#f44336;}
.sms-stat.red .sms-num{color:#c62828;}
.sms-stat.green{background:linear-gradient(135deg,#f1f8f4,#e8f5e9);border-top-color:#4caf50;}
.sms-stat.green .sms-num{color:#2e7d32;}
.sms-log-status{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;}
.sms-log-status.sent{background:#e8f5e9;color:#2e7d32;}
.sms-log-status.failed{background:#ffebee;color:#c62828;}
.sms-log-status.skipped{background:#fff8e1;color:#e65100;}
.sms-warning{background:#fff3cd;color:#856404;padding:12px;border-radius:10px;
  border-left:4px solid var(--accent);font-size:13px;margin-bottom:15px;}

.alert{padding:14px 18px;border-radius:14px;font-size:13px;font-weight:500;
  margin-bottom:16px;border-left:4px solid transparent;}
.alert-error{background:#fef2f2;color:#991b1b;border-left-color:#f44336;}
.alert-success{background:#f0fdf4;color:#166534;border-left-color:#4caf50;}
.alert-info{background:#eff6ff;color:#1e40af;border-left-color:var(--primary);}
.alert-warn{background:#fffbeb;color:#92400e;border-left-color:#ff9800;}

.empty,.loading{text-align:center;padding:46px 20px;color:#999;font-size:13.5px;
  background:#fff;border-radius:16px;border:1px dashed #e5e9ef;}
.loading::after{content:'';display:inline-block;width:14px;height:14px;margin-left:8px;
  border:2px solid #e5e9ef;border-top-color:var(--accent);border-radius:50%;
  vertical-align:middle;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(10,61,145,.55);
  z-index:9000;padding:20px;align-items:flex-start;justify-content:center;overflow-y:auto;}
.modal-backdrop.show{display:flex;}
.modal{background:#fff;border-radius:20px;width:100%;max-width:720px;margin:auto;
  box-shadow:var(--shadow-lg);border-top:5px solid var(--accent);display:flex;
  flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden;}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.modal-header h3{font-size:16px;font-weight:800;color:var(--primary);}
.modal-close{background:transparent;font-size:26px;line-height:1;color:var(--text-muted);
  padding:2px 10px;border-radius:6px;}
.modal-close:hover{background:var(--hover);color:var(--text);}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1;}
.modal-body .field + .field{margin-top:12px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;background:var(--hover);
  flex-wrap:wrap;}

.toast-stack{position:fixed;top:20px;right:20px;z-index:9999;display:flex;
  flex-direction:column;gap:8px;max-width:360px;pointer-events:none;}
.toast{padding:12px 16px;border-radius:14px;font-size:13px;font-weight:600;color:#fff;
  box-shadow:var(--shadow-md);animation:slidein .2s ease;pointer-events:auto;}
.toast.success{background:#16a34a;}
.toast.error{background:#dc2626;}
.toast.info{background:var(--primary);}
.toast.warn{background:#f59e0b;color:#1a202c;}
@keyframes slidein{from{transform:translateX(40px);opacity:0;}to{transform:translateX(0);opacity:1;}}

.weight-total{margin-top:10px;font-size:13px;font-weight:700;color:var(--text-muted);}
.weight-total.ok{color:#16a34a;} .weight-total.bad{color:#dc2626;}
.grade-band-row{display:grid;grid-template-columns:2fr 1.5fr .7fr 40px;gap:8px;
  align-items:center;margin-bottom:8px;}
.grade-band-row input{padding:8px 10px;border:2px solid var(--border);border-radius:8px;
  font-size:13px;width:100%;}
.grade-band-row .btn-icon{padding:6px 10px;background:#fee2e2;color:#991b1b;
  border-radius:8px;font-weight:700;font-size:12px;}
.grade-band-row .btn-icon:hover{background:#fecaca;}

.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;
  border:2px solid var(--border);border-radius:12px;padding:12px;max-height:220px;overflow-y:auto;}
.perm-grid label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  color:var(--text);padding:6px 8px;border-radius:8px;cursor:pointer;transition:var(--transition);}
.perm-grid label:hover{background:var(--hover);}
.perm-grid input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);}

.mock-grid-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff;
  border-radius:12px;overflow:hidden;}
.mock-grid-table th{background:var(--primary);color:#fff;padding:10px 6px;font-size:10px;
  text-align:center;text-transform:uppercase;}
.mock-grid-table td{padding:6px;text-align:center;border-bottom:1px solid #eee;}
.mock-grid-table td.student-cell{text-align:left;font-weight:700;color:var(--primary);padding-left:10px;}
.mock-grid-table input[type="number"]{width:56px;padding:5px;border:1px solid #ddd;
  border-radius:6px;text-align:center;font-size:12px;font-weight:600;}

.arrears-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;}
.arrears-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;}
.arrears-card .arr-name{font-weight:700;color:var(--primary);font-size:14px;}
.arrears-card .arr-meta{font-size:11px;color:#999;}
.arrears-card input{width:100%;padding:10px 12px;border:2px solid #e0e0e0;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--primary);}
.arrears-card .arr-notes{width:100%;padding:8px 12px;border:1px solid #e0e0e0;border-radius:8px;
  font-family:inherit;font-size:12px;}

@media (max-width: 900px){
  .main{padding:16px 14px 40px;}
  .page-header h1{font-size:20px;}
  .form-grid,.form-grid-4{grid-template-columns:1fr;}
  .filter-bar > *{flex:1 1 100%;}
  .grade-band-row{grid-template-columns:1fr 1fr 60px 40px;}
  .adm-form-grid,.adm-preview-box,.of-filter-bar,.edit-form-grid,.pay-choice,
  .promo-target-bar{grid-template-columns:1fr;}
}