/* ============================================================
   EduManage Pro v2.0 — Complete Design System
   Covers ALL page class names, old and new
   Bright Light Mode | Beautiful Dark Mode
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ─── THEME VARIABLES ─────────────────────────────────────── */
:root {
  /* Sidebar */
  --sidebar-w: 260px;
  --topbar-h: 60px;

  /* Brand Colors */
  --brand:        #4f46e5;
  --brand-dark:   #3730a3;
  --brand-light:  #818cf8;
  --brand-bg:     #eef2ff;
  --brand-glow:   rgba(79,70,229,0.2);

  /* Light Mode */
  --bg:           #f5f7ff;
  --bg-2:         #ffffff;
  --bg-3:         #f0f3ff;
  --surface:      #ffffff;
  --surface-2:    #f8f9ff;
  --surface-3:    #f0f3ff;
  --border:       #e2e5f0;
  --border-2:     #d4d8f0;

  --tx:           #0f172a;
  --tx-2:         #334155;
  --tx-3:         #64748b;
  --tx-4:         #94a3b8;

  /* Status */
  --success:      #059669;
  --success-bg:   #ecfdf5;
  --success-dark: #047857;
  --danger:       #dc2626;
  --danger-bg:    #fef2f2;
  --danger-dark:  #b91c1c;
  --warning:      #d97706;
  --warning-bg:   #fffbeb;
  --info:         #0284c7;
  --info-bg:      #f0f9ff;
  --accent:       #f59e0b;
  --accent-bg:    #fffbeb;

  /* Sidebar (dark in both modes) */
  --sb-bg:        #0f172a;
  --sb-border:    #1e293b;
  --sb-text:      #64748b;
  --sb-text-h:    #cbd5e1;
  --sb-text-a:    #ffffff;
  --sb-hover:     rgba(255,255,255,0.05);
  --sb-active:    rgba(79,70,229,0.25);

  /* Gradients */
  --g-brand:      linear-gradient(135deg, #4f46e5, #7c3aed);
  --g-success:    linear-gradient(135deg, #059669, #10b981);
  --g-danger:     linear-gradient(135deg, #dc2626, #f97316);
  --g-amber:      linear-gradient(135deg, #f59e0b, #d97706);
  --g-info:       linear-gradient(135deg, #0284c7, #6366f1);
  --g-neutral:    linear-gradient(135deg, #475569, #64748b);

  /* Shadows */
  --sh-xs:  0 1px 3px rgba(15,23,42,0.06);
  --sh-sm:  0 2px 8px rgba(15,23,42,0.08);
  --sh-md:  0 4px 16px rgba(15,23,42,0.10);
  --sh-lg:  0 12px 32px rgba(15,23,42,0.12);
  --sh-xl:  0 24px 48px rgba(15,23,42,0.14);
  --sh-brand: 0 6px 20px rgba(79,70,229,0.25);

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;

  /* Transition */
  --t: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ─── DARK THEME ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #070d1b;
  --bg-2:      #0c1529;
  --bg-3:      #0a1120;
  --surface:   #0f1d35;
  --surface-2: #0c1a2f;
  --surface-3: #0a1525;
  --border:    #1a2e4a;
  --border-2:  #1e3350;

  --tx:        #e8f0ff;
  --tx-2:      #94afc8;
  --tx-3:      #5a7a9a;
  --tx-4:      #334d66;

  --brand:      #818cf8;
  --brand-dark: #6366f1;
  --brand-light:#a5b4fc;
  --brand-bg:   rgba(99,102,241,0.15);
  --brand-glow: rgba(129,140,248,0.25);

  --success:    #34d399;
  --success-bg: rgba(52,211,153,0.1);
  --success-dark:#10b981;
  --danger:     #f87171;
  --danger-bg:  rgba(248,113,113,0.1);
  --danger-dark:#ef4444;
  --warning:    #fbbf24;
  --warning-bg: rgba(251,191,36,0.1);
  --info:       #38bdf8;
  --info-bg:    rgba(56,189,248,0.1);
  --accent:     #fbbf24;
  --accent-bg:  rgba(251,191,36,0.1);

  --sb-bg:     #04101f;
  --sb-border: #0c1a2f;
  --sb-text:   #3d5470;
  --sb-text-h: #6d8faa;

  --sh-xs:  0 1px 3px rgba(0,0,0,0.4);
  --sh-sm:  0 2px 8px rgba(0,0,0,0.5);
  --sh-md:  0 4px 16px rgba(0,0,0,0.55);
  --sh-lg:  0 12px 32px rgba(0,0,0,0.6);
  --sh-xl:  0 24px 48px rgba(0,0,0,0.65);
  --sh-brand: 0 6px 20px rgba(129,140,248,0.2);

  --g-brand:   linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}
a { color: var(--brand); text-decoration: none; transition: var(--t); }
a:hover { color: var(--brand-dark); }
h1,h2,h3,h4,h5,h6 { font-family:'Sora',sans-serif; font-weight:700; line-height:1.3; color:var(--tx); }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; font-size:inherit; }

/* ─── APP LAYOUT ─────────────────────────────────────────── */
.app-layout { display:flex; min-height:100vh; }

/* ─── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  position: fixed;
  top:0; left:0;
  height:100vh;
  display:flex; flex-direction:column;
  z-index:200;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
}
.sidebar-logo {
  padding:16px 18px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--sb-border);
  min-height:var(--topbar-h);
  flex-shrink:0;
}
.sidebar-logo-icon {
  width:38px; height:38px;
  background:rgba(79,70,229,0.2);
  border:1px solid rgba(79,70,229,0.35);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.sidebar-logo-text { overflow:hidden; }
.sidebar-school-name {
  font-family:'Sora',sans-serif; font-size:0.85rem; font-weight:700;
  color:#fff; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-school-tag {
  font-size:0.65rem; color:var(--sb-text); display:block;
  text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
}

.sidebar-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:10px 0;
  scrollbar-width:thin;
  scrollbar-color:var(--sb-border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--sb-border); border-radius:2px; }

.sidebar-section-label {
  font-size:0.62rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--sb-text); padding:12px 18px 4px; opacity:0.7;
}
.sidebar-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 18px;
  color:var(--sb-text); font-size:0.84rem; font-weight:500;
  cursor:pointer; transition:var(--t);
  position:relative; text-decoration:none; white-space:nowrap;
}
.sidebar-item:hover { background:var(--sb-hover); color:var(--sb-text-h); }
.sidebar-item.active { background:var(--sb-active); color:var(--sb-text-a); font-weight:600; }
.sidebar-item.active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; background:var(--brand); border-radius:0 3px 3px 0;
}
.sidebar-item-icon { width:18px; height:18px; font-size:0.95rem; flex-shrink:0; display:flex; align-items:center; }
.sidebar-item-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:0.6rem; font-weight:700; padding:2px 6px; border-radius:10px;
}

/* Sidebar Dropdown */
.sidebar-dropdown-toggle { cursor:pointer; }
.sidebar-dropdown-toggle .chevron { margin-left:auto; font-size:0.65rem; transition:transform 0.25s; opacity:0.5; }
.sidebar-dropdown.open .chevron { transform:rotate(180deg); }
.sidebar-dropdown-menu { overflow:hidden; max-height:0; transition:max-height 0.3s ease; }
.sidebar-dropdown.open .sidebar-dropdown-menu { max-height:400px; }
.sidebar-dropdown-menu .sidebar-item { padding-left:46px; font-size:0.8rem; }

/* Sidebar Footer */
.sidebar-footer { padding:12px 14px; border-top:1px solid var(--sb-border); flex-shrink:0; }
.sidebar-user {
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:10px; background:rgba(255,255,255,0.04);
  border:1px solid var(--sb-border); cursor:pointer; transition:var(--t); text-decoration:none;
}
.sidebar-user:hover { background:rgba(255,255,255,0.07); }
.sidebar-avatar {
  width:32px; height:32px; background:var(--g-brand); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:700; color:#fff; flex-shrink:0;
}
.sidebar-user-info { flex:1; overflow:hidden; }
.sidebar-user-name { font-size:0.78rem; font-weight:600; color:var(--sb-text-a); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.sidebar-user-role { font-size:0.63rem; color:var(--sb-text); display:block; }
.sidebar-logout {
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:rgba(220,38,38,0.12); color:#f87171;
  font-size:0.8rem; flex-shrink:0; text-decoration:none; transition:var(--t);
}
.sidebar-logout:hover { background:var(--danger); color:#fff; }

/* ─── MAIN CONTENT ───────────────────────────────────────── */
.main-content {
  margin-left:var(--sidebar-w);
  flex:1; min-height:100vh;
  display:flex; flex-direction:column;
  transition:margin-left 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* ─── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h); background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 22px; gap:14px;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--sh-xs);
  transition:background 0.3s, border-color 0.3s;
}
.topbar-menu-btn {
  display:none; width:34px; height:34px; border:none;
  background:var(--surface-2); border-radius:8px; cursor:pointer;
  align-items:center; justify-content:center;
  color:var(--tx); font-size:1rem; transition:var(--t); flex-shrink:0;
}
.topbar-menu-btn:hover { background:var(--border); }
.topbar-breadcrumb {
  display:flex; align-items:center; gap:6px; font-size:0.8rem;
  color:var(--tx-3); flex:1; overflow:hidden;
}
.topbar-breadcrumb .current { color:var(--tx); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-sep { color:var(--border-2); }
.topbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Theme Toggle */
.theme-toggle {
  width:50px; height:26px; background:var(--surface-2);
  border:1.5px solid var(--border); border-radius:13px;
  cursor:pointer; position:relative; transition:var(--t); flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--brand); }
.theme-toggle::after {
  content:'☀️'; position:absolute;
  top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] .theme-toggle::after { content:'🌙'; transform:translateX(23px); }

.topbar-icon-btn {
  width:34px; height:34px; border:1.5px solid var(--border); background:var(--surface);
  border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--tx-2); font-size:0.9rem; transition:var(--t); text-decoration:none;
}
.topbar-icon-btn:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-bg); }

.topbar-user-chip {
  display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px;
  border:1.5px solid var(--border); border-radius:40px; cursor:pointer;
  background:var(--surface); transition:var(--t); text-decoration:none; color:var(--tx);
}
.topbar-user-chip:hover { border-color:var(--brand); background:var(--brand-bg); }
.topbar-chip-avatar {
  width:24px; height:24px; background:var(--g-brand); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.7rem; font-weight:700; color:#fff;
}
.topbar-chip-name { font-size:0.78rem; font-weight:600; }
.topbar-chip-arrow { font-size:0.6rem; color:var(--tx-3); }

.school-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 5px;
  border-radius:20px; font-size:0.7rem; font-weight:700;
  border:1.5px solid var(--border); background:var(--surface-2); color:var(--tx-2);
}
.school-badge-dot {
  width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 5px var(--success); flex-shrink:0;
}

/* ─── PAGE CONTENT WRAPPER ───────────────────────────────── */
.page-content { padding:22px; flex:1; background:var(--bg); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.55); z-index:150; backdrop-filter:blur(3px);
}
.sidebar-overlay.show { display:block; }

/* ─── CONTAINER (backward compat) ───────────────────────── */
.container {
  width:100%; max-width:100%;
  padding:0;
}

/* ─── CONTENT (backward compat) ─────────────────────────── */
.content {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--sh-xs);
}

/* ─── PAGE HEADER ────────────────────────────────────────── */
.page-header, .page-header-left {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:14px; margin-bottom:22px;
}
h2.page-title, .page-title {
  font-family:'Sora',sans-serif; font-size:1.45rem; font-weight:800;
  color:var(--tx); margin-bottom:4px;
  padding-bottom:0; border-bottom:none;
}
.page-subtitle { font-size:0.82rem; color:var(--tx-3); font-weight:400; margin-top:3px; }
.page-actions, .header-actions, .page-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dashboard-header { margin-bottom:20px; }
.dashboard-header h1 { font-size:1.6rem; font-weight:800; color:var(--tx); }
.dashboard-header p { color:var(--tx-3); font-size:0.9rem; margin-top:4px; }

/* ─── STAT CARDS ─────────────────────────────────────────── */
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin-bottom:22px;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; position:relative; overflow:hidden; transition:var(--t); cursor:default;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--g-brand);
}
.stat-card.brand::before { background:var(--g-brand); }
.stat-card.success::before { background:var(--g-success); }
.stat-card.accent::before, .stat-card.warning::before { background:var(--g-amber); }
.stat-card.danger::before { background:var(--g-danger); }
.stat-card.info::before { background:var(--g-info); }
.stat-card.neutral::before { background:var(--g-neutral); }
.stat-card.positive::before { background:var(--g-success); }
.stat-card.negative::before { background:var(--g-danger); }

.stat-card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.stat-card-icon, .stat-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  background:var(--brand-bg); flex-shrink:0;
}
.stat-card.success .stat-card-icon { background:var(--success-bg); }
.stat-card.accent .stat-card-icon, .stat-card.warning .stat-card-icon { background:var(--warning-bg); }
.stat-card.danger .stat-card-icon { background:var(--danger-bg); }
.stat-card.info .stat-card-icon { background:var(--info-bg); }
.stat-card.neutral .stat-card-icon { background:var(--surface-2); }

.stat-icon { margin-bottom:10px; font-size:1.8rem; background:none; width:auto; height:auto; border-radius:0; }
.stat-info h3, .stat-card-value, .stat-number, .stat-value {
  font-family:'Sora',sans-serif; font-size:1.75rem; font-weight:800;
  color:var(--tx); line-height:1; margin-bottom:4px;
  background:none !important; -webkit-text-fill-color:unset !important;
}
.stat-info p, .stat-card-label, .stat-label { font-size:0.77rem; color:var(--tx-3); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.stat-info small, .stat-card-sub, .stat-trend { font-size:0.72rem; color:var(--tx-4); margin-top:4px; display:block; }
.stat-card-trend { font-size:0.7rem; font-weight:700; padding:2px 7px; border-radius:20px; }
.stat-card-trend.up { color:var(--success); background:var(--success-bg); }
.stat-card-trend.down { color:var(--danger); background:var(--danger-bg); }
/* Positive/negative balance override */
.stat-card.positive .stat-info h3,
.stat-card.positive .stat-card-value { color:var(--success) !important; }
.stat-card.negative .stat-info h3,
.stat-card.negative .stat-card-value { color:var(--danger) !important; }

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:18px; box-shadow:var(--sh-xs); transition:var(--t);
}
.card:last-child { margin-bottom:0; }
.card-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface);
}
.card-title, .card-header h3 {
  font-family:'Sora',sans-serif; font-size:0.92rem; font-weight:700;
  color:var(--tx); display:flex; align-items:center; gap:7px; margin:0;
  background:none !important; -webkit-text-fill-color:unset !important;
}
.card-body { padding:18px; }
.card-footer {
  padding:12px 18px; border-top:1px solid var(--border);
  background:var(--surface-2); font-size:0.78rem; color:var(--tx-3);
}

/* ─── TABLES ─────────────────────────────────────────────── */
.table-responsive, .table-wrapper, .table-card, .table-container { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.83rem; }
table thead tr { background:var(--surface-2); border-bottom:2px solid var(--border); }
table th {
  padding:11px 14px; text-align:left; font-weight:700;
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--tx-3);
  white-space:nowrap;
}
table tbody tr { border-bottom:1px solid var(--border); transition:background 0.15s; }
table tbody tr:last-child { border-bottom:none; }
table tbody tr:hover { background:var(--surface-2); }
table td { padding:12px 14px; color:var(--tx); vertical-align:middle; }
table td .cell-primary { font-weight:600; color:var(--tx); display:block; }
table td .cell-secondary { font-size:0.73rem; color:var(--tx-3); display:block; margin-top:1px; }
table td:first-child { font-weight:600; -webkit-text-fill-color:unset !important; color:var(--tx) !important; background:none !important; }
.data-table { display:block; }

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:20px;
  font-size:0.7rem; font-weight:700; white-space:nowrap;
}
.badge-brand, .badge-primary { background:var(--brand-bg); color:var(--brand-dark); }
.badge-success { background:var(--success-bg); color:var(--success-dark); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger-dark);  }
.badge-warning { background:var(--warning-bg); color:var(--warning);      }
.badge-info    { background:var(--info-bg);    color:var(--info);         }
.badge-neutral { background:var(--surface-2);  color:var(--tx-2);         }
.badge-posted  { background:var(--success-bg); color:var(--success-dark); }
.badge-draft   { background:var(--warning-bg); color:var(--warning);      }
.badge-accent  { background:var(--accent-bg);  color:var(--accent);       }
.role-badge {
  display:inline-block; padding:4px 10px; border-radius:20px; font-size:0.7rem; font-weight:700;
  background:var(--brand-bg); color:var(--brand-dark); margin-left:6px; vertical-align:middle;
}
.role-badge.admin   { background:var(--brand-bg); color:var(--brand-dark); }
.role-badge.view-only { background:var(--surface-2); color:var(--tx-3); }
.status-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:0.7rem; font-weight:700; }
.status-badge.live, .status-badge.active { background:var(--success-bg); color:var(--success-dark); }
.status-badge.withheld, .status-badge.pending { background:var(--warning-bg); color:var(--warning); }
.status-badge.rejected { background:var(--danger-bg); color:var(--danger-dark); }
.pass-status { font-weight:700; }
.pass-status.pass { color:var(--success); }
.pass-status.fail { color:var(--danger); }

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r-sm);
  font-size:0.83rem; font-weight:600; cursor:pointer;
  border:1.5px solid transparent; transition:var(--t);
  white-space:nowrap; text-decoration:none; line-height:1.25;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-primary   { background:var(--g-brand); color:#fff; box-shadow:var(--sh-brand); }
.btn-primary:hover { box-shadow:0 8px 24px var(--brand-glow); color:#fff; }
.btn-secondary { background:var(--surface); color:var(--tx); border-color:var(--border); box-shadow:var(--sh-xs); }
.btn-secondary:hover { border-color:var(--brand); color:var(--brand); }
.btn-success   { background:var(--g-success); color:#fff; }
.btn-danger, .btn-delete { background:var(--g-danger); color:#fff; }
.btn-warning   { background:var(--g-amber); color:#fff; }
.btn-info      { background:var(--g-info); color:#fff; }
.btn-light, .btn-ghost {
  background:var(--surface-2); color:var(--tx-2);
  border-color:var(--border);
}
.btn-light:hover, .btn-ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn-sm   { padding:5px 11px; font-size:0.77rem; border-radius:7px; }
.btn-lg   { padding:11px 22px; font-size:0.9rem; border-radius:10px; }
.btn-icon { padding:7px; border-radius:8px; }
.btn-link { background:none; border:none; color:var(--brand); padding:0; box-shadow:none; }
.btn-link:hover { text-decoration:underline; transform:none; }
.btn.w-full { width:100%; justify-content:center; }

/* Old action buttons */
.action-btn, .btn-approve, .btn-reject, .btn-audit, .btn-post, .btn-revision,
.btn-change, .btn-history, .btn-print, .btn-jpg, .btn-owner-login, .btn-requests {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--r-sm); font-size:0.78rem; font-weight:600;
  border:1.5px solid transparent; cursor:pointer; transition:var(--t); text-decoration:none;
}
.btn-approve { background:var(--success-bg); color:var(--success-dark); border-color:var(--success); }
.btn-reject  { background:var(--danger-bg);  color:var(--danger-dark);  border-color:var(--danger);  }
.btn-post, .btn-audit { background:var(--brand-bg); color:var(--brand-dark); border-color:var(--brand); }
.btn-revision, .btn-history { background:var(--warning-bg); color:var(--warning); border-color:var(--warning); }
.btn-print, .btn-jpg, .btn-change { background:var(--surface-2); color:var(--tx-2); border-color:var(--border); }
.action-btn:hover, .btn-approve:hover, .btn-reject:hover, .btn-post:hover,
.btn-audit:hover, .btn-revision:hover, .btn-print:hover { transform:translateY(-1px); box-shadow:var(--sh-sm); }

/* Export buttons */
.export-buttons, .action-buttons { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.export-btn { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:7px; font-size:0.78rem; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:var(--surface); color:var(--tx-2); transition:var(--t); text-decoration:none; }
.export-btn:hover { border-color:var(--brand); color:var(--brand); }
.export-btn.csv  { border-color:var(--success); color:var(--success-dark); background:var(--success-bg); }
.export-btn.excel, .export-btn.pdf { border-color:var(--info); color:var(--info); background:var(--info-bg); }

/* ─── FORMS ──────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label, .form-label {
  display:block; margin-bottom:5px;
  font-size:0.8rem; font-weight:600; color:var(--tx);
}
.form-group label .required,
.form-label .required { color:var(--danger); margin-left:2px; }
.required { color:var(--danger); }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group select,
.form-group textarea,
.form-control {
  width:100%; padding:9px 13px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--tx);
  font-size:0.85rem; transition:var(--t); outline:none;
}
.form-group input::placeholder, .form-control::placeholder { color:var(--tx-4); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }
.form-group input:hover:not(:focus), .form-group select:hover:not(:focus),
.form-control:hover:not(:focus) { border-color:var(--tx-3); }
select.form-control, .form-group select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:15px;
  padding-right:36px;
}
textarea.form-control, .form-group textarea { resize:vertical; min-height:80px; }
.form-hint, .form-group small { font-size:0.73rem; color:var(--tx-3); margin-top:4px; display:block; }
.form-error { font-size:0.73rem; color:var(--danger); margin-top:4px; }

/* Form layouts */
.form-row, .form-grid { display:grid; gap:14px; }
.form-row { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.form-row-2 { grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; gap:14px; }
.form-full  { grid-column:1/-1; }
.form-section { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.form-section:last-child { border-bottom:none; padding-bottom:0; }
.form-section h4, .form-section-title {
  font-family:'Sora',sans-serif; font-size:0.88rem; font-weight:700;
  color:var(--brand); margin-bottom:14px; display:flex; align-items:center; gap:6px;
}

/* Checkbox */
.month-checkbox, .checkbox-label, .transaction-checkbox {
  display:flex; align-items:center; gap:6px; cursor:pointer; font-size:0.83rem;
}
.month-checkbox input[type="checkbox"],
.transaction-checkbox input[type="checkbox"] {
  width:15px; height:15px; accent-color:var(--brand); cursor:pointer; flex-shrink:0;
}
.month-selector { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* Password wrap */
.password-wrap, .input-wrap { position:relative; }
.password-toggle, .toggle-pw {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--tx-3); font-size:0.85rem; padding:3px;
  transition:var(--t);
}
.password-toggle:hover, .toggle-pw:hover { color:var(--brand); }
.password-wrap .form-control, .password-wrap input { padding-right:38px; }
.password-requirements { font-size:0.73rem; color:var(--tx-3); margin-top:6px; line-height:1.6; }
.input-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--tx-3); font-size:0.9rem; pointer-events:none; }

/* ─── ALERTS / FLASH ─────────────────────────────────────── */
.alert {
  padding:11px 15px; border-radius:var(--r-sm); font-size:0.83rem;
  border-left:4px solid; display:flex; align-items:flex-start; gap:9px;
  margin-bottom:14px; line-height:1.5;
}
.alert-icon { flex-shrink:0; }
.alert-success  { background:var(--success-bg); border-color:var(--success); color:var(--success-dark); }
.alert-danger   { background:var(--danger-bg);  border-color:var(--danger);  color:var(--danger-dark);  }
.alert-warning  { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.alert-info     { background:var(--info-bg);    border-color:var(--info);    color:var(--info); }
.alert-body { flex:1; }
.success-box { background:var(--success-bg); border:1.5px solid var(--success); border-radius:var(--r-sm); padding:12px 15px; font-size:0.83rem; color:var(--success-dark); margin-bottom:14px; }
.error-box, .warning-box { background:var(--warning-bg); border:1.5px solid var(--warning); border-radius:var(--r-sm); padding:12px 15px; font-size:0.82rem; color:var(--warning); margin-bottom:14px; line-height:1.6; }
.info-box { background:var(--info-bg); border:1.5px solid var(--info); border-radius:var(--r-sm); padding:12px 15px; font-size:0.82rem; color:var(--info); margin-bottom:14px; }

/* ─── TABS ───────────────────────────────────────────────── */
.tabs-container, .tabs-nav {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:18px;
}
.tabs-nav { border-radius:0; background:transparent; }
.tabs-header {
  display:flex; border-bottom:2px solid var(--border); background:var(--surface-2);
  overflow-x:auto; gap:0;
}
.tab-button, .tab-btn {
  padding:12px 18px; font-size:0.83rem; font-weight:600;
  color:var(--tx-3); cursor:pointer; border:none; background:none;
  border-bottom:3px solid transparent; margin-bottom:-2px;
  white-space:nowrap; transition:var(--t); flex-shrink:0;
}
.tab-button:hover, .tab-btn:hover { color:var(--brand); }
.tab-button.active, .tab-btn.active { color:var(--brand); border-bottom-color:var(--brand); background:none; }
.tab-content, .tab-panel { display:none; padding:20px; }
.tab-content.active, .tab-panel.active { display:block; }
.tab-badge { background:var(--danger); color:#fff; font-size:0.6rem; font-weight:700; padding:1px 5px; border-radius:10px; margin-left:4px; }

/* ─── QUICK ACTIONS (dashboard) ─────────────────────────── */
.quick-actions {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px; margin-bottom:22px;
}
.quick-action-btn {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md);
  text-decoration:none; color:var(--tx); font-weight:600; font-size:0.84rem;
  transition:var(--t); cursor:pointer;
}
.quick-action-btn:hover {
  border-color:var(--brand); color:var(--brand);
  background:var(--brand-bg); transform:translateY(-2px); box-shadow:var(--sh-sm);
}
.quick-action-btn .icon { font-size:1.3rem; flex-shrink:0; }

/* ─── FILTERS / SEARCH BAR ───────────────────────────────── */
.filter-bar, .filters-bar, .filter-card {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.filter-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.search-input-wrap { position:relative; flex:1; min-width:180px; }
.search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--tx-3); font-size:0.85rem; pointer-events:none; }
.search-input-wrap .form-control, .search-input-wrap input { padding-left:34px; }

/* ─── PROGRESS ───────────────────────────────────────────── */
.progress, .progress-bar { background:var(--border); border-radius:10px; height:7px; overflow:hidden; margin-top:6px; }
.progress-fill {
  height:100%; border-radius:10px; background:var(--g-brand);
  transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.progress-fill.success { background:var(--g-success); }
.progress-fill.danger  { background:var(--g-danger); }
.progress-fill.accent  { background:var(--g-amber); }
.progress-wrap { background:var(--border); border-radius:10px; height:6px; overflow:hidden; }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal, .revision-modal, .history-modal {
  display:none; position:fixed; inset:0; z-index:900;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
}
.modal.open, .modal[style*="flex"], .revision-modal[style*="flex"],
.history-modal[style*="flex"] { display:flex !important; }
.modal-content, .revision-modal-content, .history-modal-content {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-xl); animation:fadeInUp 0.28s ease both;
}
.modal-header, .revision-modal-header, .history-modal-header {
  padding:16px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3, .modal-title { font-family:'Sora',sans-serif; font-size:1rem; font-weight:700; margin:0; }
.modal-body { padding:18px; }
.modal-footer {
  padding:13px 18px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
}
.close {
  width:28px; height:28px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--tx-3); font-size:1rem; transition:var(--t);
}
.close:hover { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }

/* ─── PAGINATION ─────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; gap:5px; justify-content:flex-end;
  padding:14px 18px; border-top:1px solid var(--border); flex-wrap:wrap;
}
.page-btn, .pagination a, .pagination button {
  width:32px; height:32px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--tx-2); border-radius:7px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:600; text-decoration:none; transition:var(--t);
}
.page-btn:hover, .pagination a:hover { border-color:var(--brand); color:var(--brand); }
.page-btn.active, .pagination .active { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ─── EMPTY STATE ────────────────────────────────────────── */
.empty-state, .no-data {
  text-align:center; padding:50px 20px; color:var(--tx-3);
}
.empty-state-icon { font-size:2.5rem; margin-bottom:10px; opacity:0.5; }
.empty-state-title { font-size:0.95rem; font-weight:700; color:var(--tx-2); margin-bottom:5px; }
.empty-state-text { font-size:0.82rem; }
.no-data { font-size:0.9rem; padding:40px 20px; }

/* ─── USER / ACCOUNT CARDS ───────────────────────────────── */
.user-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:18px; transition:var(--t); margin-bottom:14px;
}
.user-card:hover { border-color:var(--brand); box-shadow:var(--sh-sm); }
.user-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.user-avatar {
  width:42px; height:42px; border-radius:10px; background:var(--g-brand);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:1rem; flex-shrink:0;
}
.user-info-name { font-weight:700; color:var(--tx); }
.user-info-role { font-size:0.73rem; color:var(--tx-3); }
.user-details { display:flex; flex-wrap:wrap; gap:10px; }

/* ─── FEE CATEGORIES GRID ────────────────────────────────── */
.fee-categories-grid, .categories-container {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px; margin-top:14px;
}
.fee-category-item {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:16px; transition:var(--t);
}
.fee-category-item:hover { border-color:var(--brand); box-shadow:var(--sh-sm); }
.fee-categories-header, .fee-category-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.fee-category-title { font-weight:700; color:var(--tx); }
.fee-category-amount { font-family:'Sora',sans-serif; font-size:1.1rem; font-weight:800; color:var(--brand); }
.fee-category-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.68rem; font-weight:700; }
.fee-category-class { font-size:0.75rem; color:var(--tx-3); }
.fee-category-meta { font-size:0.73rem; color:var(--tx-3); margin-top:6px; }

/* ─── MARKS / GRADE SHEET ────────────────────────────────── */
.marks-input {
  width:70px; padding:6px 8px; text-align:center;
  border:1.5px solid var(--border); border-radius:6px;
  background:var(--surface); color:var(--tx); font-size:0.85rem;
  transition:var(--t);
}
.marks-input:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-glow); outline:none; }
.marks-input.marks-complete { border-color:var(--success); background:var(--success-bg); }
.marks-input.marks-incomplete { border-color:var(--warning); }
.grade-badge {
  display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.72rem; font-weight:700;
  background:var(--brand-bg); color:var(--brand-dark);
}
.grade-badge.A\\+, .grade-badge.A { background:#d1fae5; color:#065f46; }
.grade-badge.B\\+, .grade-badge.B { background:#dbeafe; color:#1e40af; }
.grade-badge.C\\+, .grade-badge.C { background:#fef3c7; color:#92400e; }
.grade-badge.D { background:#ffe4e6; color:#9f1239; }
.grade-badge.E, .grade-badge.F { background:var(--danger-bg); color:var(--danger-dark); }
.marks-box { padding:4px 8px; border-radius:6px; font-weight:700; font-size:0.82rem; }
.marks-old { background:var(--surface-2); color:var(--tx-2); }
.marks-new  { background:var(--success-bg); color:var(--success-dark); }
.marks-change { display:flex; align-items:center; gap:6px; }
.average-column { background:var(--brand-bg) !important; font-weight:700; color:var(--brand) !important; }
.average-header { background:var(--brand-bg) !important; }
.na-mark { color:var(--tx-4); font-style:italic; }
.no-subjects { color:var(--tx-3); font-size:0.82rem; font-style:italic; }
.grade-sheet { font-size:0.8rem; }
.subject-chip {
  display:inline-block; padding:3px 10px; border-radius:14px; font-size:0.73rem; font-weight:600;
  background:var(--brand-bg); color:var(--brand-dark); margin:2px;
}

/* ─── REVISION CARDS ─────────────────────────────────────── */
.revision-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:16px; margin-bottom:12px; transition:var(--t);
}
.revision-card:hover { border-color:var(--brand); }
.revision-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.revision-info, .revision-details { display:flex; flex-wrap:wrap; gap:10px; font-size:0.82rem; }
.revision-meta { font-size:0.75rem; color:var(--tx-3); }
.review-actions { display:flex; gap:8px; margin-top:12px; }
.review-form { margin-top:10px; }
.comment-box, .comment-label { margin-top:8px; }

/* ─── REPORT CARDS (reports.php) ─────────────────────────── */
.reports-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:18px; }
.report-card {
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:20px; cursor:pointer; transition:var(--t); text-decoration:none; display:block;
}
.report-card:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.report-card-icon { font-size:2rem; margin-bottom:10px; }
.report-card-title { font-family:'Sora',sans-serif; font-size:0.95rem; font-weight:700; color:var(--tx); margin-bottom:4px; }
.report-card-desc { font-size:0.78rem; color:var(--tx-3); line-height:1.5; }
.report-section { margin-bottom:24px; }
.report-section-title, .report-title { font-family:'Sora',sans-serif; font-size:1rem; font-weight:700; color:var(--tx); margin-bottom:14px; }

/* ─── POSTING / AUDIT ────────────────────────────────────── */
.period-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:12px; transition:var(--t); }
.period-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.period-title { font-weight:700; color:var(--tx); }
.transaction-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.transaction-item:last-child { border-bottom:none; }
.transaction-summary { padding:12px; background:var(--surface-2); border-radius:var(--r-sm); margin-top:10px; font-size:0.82rem; }
.log-entry { padding:10px 14px; border-left:3px solid var(--brand); margin-bottom:8px; background:var(--surface-2); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.log-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.log-action { font-weight:700; font-size:0.82rem; }
.log-time { font-size:0.72rem; color:var(--tx-3); }
.log-details { font-size:0.78rem; color:var(--tx-2); }
.bulk-actions-bar { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--brand-bg); border:1.5px solid var(--brand); border-radius:var(--r-sm); margin-bottom:14px; }

/* ─── REQUEST CARDS ──────────────────────────────────────── */
.request-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:12px; }
.request-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.request-status { font-size:0.72rem; font-weight:700; }
.request-details { font-size:0.82rem; color:var(--tx-2); line-height:1.6; }

/* ─── STUDENT DETAILS ────────────────────────────────────── */
.info-grid, .student-info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.info-item, .detail-item { padding:12px 14px; background:var(--surface-2); border-radius:var(--r-sm); border:1px solid var(--border); }
.info-label, .detail-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--tx-3); margin-bottom:3px; }
.info-value, .detail-value { font-weight:600; color:var(--tx); font-size:0.88rem; }
.student-info-alert { background:var(--info-bg); border:1px solid var(--info); border-radius:var(--r-sm); padding:12px 14px; font-size:0.82rem; color:var(--info); margin-bottom:14px; }

/* ─── SETUP PAGE ─────────────────────────────────────────── */
.class-section { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:14px; }
.class-title { font-weight:700; color:var(--tx); margin-bottom:10px; }
.subject-checkbox-group { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.assigned-classes { display:flex; flex-wrap:wrap; gap:8px; }

/* ─── TIMELINE / ACTIVITY ────────────────────────────────── */
.activity-log, .timeline { padding:0; list-style:none; }
.activity-item, .timeline-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.activity-item:last-child, .timeline-item:last-child { border-bottom:none; }
.timeline-content { flex:1; font-size:0.82rem; }

/* ─── SUMMARY / SELECTION CARDS ─────────────────────────── */
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.summary-card { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px; text-align:center; }
.selection-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md); padding:16px; cursor:pointer; transition:var(--t); }
.selection-card:hover { border-color:var(--brand); background:var(--brand-bg); }
.selection-card.active { border-color:var(--brand); background:var(--brand-bg); }

/* ─── PUB STATS (results page) ───────────────────────────── */
.pub-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.pub-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; text-align:center; }
.pub-stat-icon { font-size:1.5rem; margin-bottom:6px; }
.pub-stat-number { font-family:'Sora',sans-serif; font-size:1.4rem; font-weight:800; color:var(--tx); }
.pub-stat-label { font-size:0.72rem; color:var(--tx-3); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.pub-stat-percent { font-size:0.75rem; color:var(--success); font-weight:700; }
.pub-stat-subtext { font-size:0.7rem; color:var(--tx-4); }
.publication-stats-container { margin-bottom:18px; }

/* ─── BACKUP PAGE ────────────────────────────────────────── */
.backup-info { background:var(--info-bg); border:1px solid var(--info); border-radius:var(--r-sm); padding:12px 14px; font-size:0.82rem; color:var(--info); margin-bottom:14px; }
.restore-options { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.sql-viewer { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px; font-family:monospace; font-size:0.78rem; color:var(--tx-2); max-height:300px; overflow-y:auto; }
.hidden-content { display:none; }
.hidden-overlay { display:none; }

/* ─── SIGNATURE / PRINT ──────────────────────────────────── */
.signatures { display:flex; gap:30px; flex-wrap:wrap; margin-top:20px; }
.signature-box { flex:1; min-width:150px; }
.signature-line { border-top:1.5px solid var(--tx); margin-top:40px; margin-bottom:4px; }
.signature-label { font-size:0.75rem; color:var(--tx-2); text-align:center; }

/* ─── SCHOOL CARDS (super admin) ─────────────────────────── */
.school-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:20px; }
.school-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:var(--t); text-decoration:none; display:block; }
.school-card:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh-md); }
.school-card-banner { height:5px; background:var(--g-brand); }
.school-card-banner.green { background:var(--g-success); }
.school-card-banner.amber { background:var(--g-amber); }
.school-card-banner.red { background:var(--g-danger); }
.school-card-body { padding:16px; }
.school-card-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.school-card-avatar {
  width:44px; height:44px; border-radius:10px; background:var(--brand-bg);
  border:2px solid var(--brand-bg); display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-size:1.1rem; font-weight:800; color:var(--brand); flex-shrink:0;
}
.school-card-name { font-family:'Sora',sans-serif; font-size:0.92rem; font-weight:700; color:var(--tx); line-height:1.3; }
.school-card-code { font-size:0.7rem; color:var(--tx-3); margin-top:2px; }
.school-card-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding-top:12px; border-top:1px solid var(--border); }
.school-stat { text-align:center; }
.school-stat-val { font-family:'Sora',sans-serif; font-size:1rem; font-weight:800; color:var(--tx); }
.school-stat-lbl { font-size:0.62rem; color:var(--tx-3); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }

/* ─── GRADING INFO BOX ───────────────────────────────────── */
.grading-info { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--surface-2); border-radius:var(--r-sm); margin-bottom:14px; }
.grade-<?php { color:inherit; } /* suppress PHP-generated classes */

/* ─── CHART BARS (simple) ────────────────────────────────── */
.chart-container { padding:14px; background:var(--surface-2); border-radius:var(--r-sm); }
.chart-item { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.chart-item:last-child { border-bottom:none; }
.chart-label { font-weight:600; color:var(--tx-2); font-size:0.83rem; }
.chart-value { font-weight:800; color:var(--brand); font-size:0.9rem; }
.chart-bar-wrap { flex:1; margin:0 12px; background:var(--border); border-radius:5px; height:16px; overflow:hidden; }
.chart-bar { height:100%; background:var(--g-brand); border-radius:5px; transition:width 0.5s ease; }
.chart-bar-col { display:flex; flex-direction:column; align-items:center; gap:4px; }

/* ─── TOAST ──────────────────────────────────────────────── */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }

/* ─── MISC UTILITIES ─────────────────────────────────────── */
.security-notice, .access-notice { background:var(--warning-bg); border:1px solid var(--warning); border-radius:var(--r-sm); padding:10px 13px; font-size:0.8rem; color:var(--warning); margin-bottom:14px; }
.current-year-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.7rem; font-weight:700; background:var(--success-bg); color:var(--success-dark); margin-left:6px; }
.term-year { font-size:0.75rem; color:var(--tx-3); }
.code { font-family:monospace; background:var(--surface-2); padding:2px 7px; border-radius:5px; font-size:0.82rem; color:var(--brand); }
.back-link { display:inline-flex; align-items:center; gap:5px; font-size:0.83rem; color:var(--brand); text-decoration:none; margin-bottom:14px; font-weight:600; }
.back-link:hover { text-decoration:underline; }
.pending-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.7rem; font-weight:700; background:var(--warning-bg); color:var(--warning); }
.nav-badge { background:var(--danger); color:#fff; font-size:0.6rem; font-weight:700; padding:2px 5px; border-radius:10px; }
.link-container { display:flex; gap:8px; flex-wrap:wrap; }
.color-preview { width:20px; height:20px; border-radius:50%; display:inline-block; }
.flat { box-shadow:none !important; }
.hidden-content, .hidden-overlay { display:none !important; }

/* Assign classes */
.assigned-classes .badge { cursor:default; }

/* Print styles */
@media print {
  .sidebar, .topbar, .main-content > .topbar, .no-print, .sidebar-overlay,
  .btn, .action-btn, .export-btn, .page-actions, .filter-bar, .filters-bar { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  .main-content { margin-left:0 !important; }
  .card, .content, .container { box-shadow:none !important; border:1px solid #ccc !important; }
  table { font-size:11px !important; }
  th, td { padding:6px 8px !important; }
  .page-content { padding:0 !important; }
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(79,70,229,0.35); }
  70%  { box-shadow:0 0 0 8px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
.animate-in { animation:fadeInUp 0.35s ease both; }
.animate-in:nth-child(1) { animation-delay:0.04s; }
.animate-in:nth-child(2) { animation-delay:0.08s; }
.animate-in:nth-child(3) { animation-delay:0.12s; }
.animate-in:nth-child(4) { animation-delay:0.16s; }
.animate-in:nth-child(5) { animation-delay:0.20s; }
.animate-in:nth-child(6) { animation-delay:0.24s; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w:240px; }
}

@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); width:272px !important; z-index:300; box-shadow:var(--sh-xl); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
  .topbar-menu-btn { display:flex; }
  .page-content { padding:14px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .form-row, .form-row-2, .form-row-3 { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:1fr 1fr; gap:10px; }
  .school-grid { grid-template-columns:1fr; }
  .page-header { flex-direction:column; }
  .filter-bar, .filters-bar { flex-direction:column; align-items:stretch; }
  .tabs-header { overflow-x:auto; }

  /* Mobile table → card layout */
  table thead { display:none; }
  table tbody tr {
    display:block; margin-bottom:10px;
    border:1px solid var(--border); border-radius:var(--r-md);
    padding:12px; background:var(--surface);
    box-shadow:var(--sh-xs);
  }
  table tbody tr:last-child { margin-bottom:0; }
  table td {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:6px 0; border-bottom:1px solid var(--border); font-size:0.8rem;
  }
  table td:last-child { border-bottom:none; }
  table td::before {
    content:attr(data-label); font-weight:700; font-size:0.68rem;
    text-transform:uppercase; letter-spacing:0.06em;
    color:var(--tx-3); flex-shrink:0; margin-right:8px; padding-top:1px;
    min-width:90px;
  }
  table td:first-child { font-weight:600; color:var(--tx) !important; }
  .reports-grid, .fee-categories-grid { grid-template-columns:1fr; }
  .info-grid, .student-info-grid { grid-template-columns:1fr; }
  .export-buttons, .action-buttons { flex-wrap:wrap; }
  .topbar-breadcrumb { display:none; }
  .content { padding:14px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-info h3, .stat-card-value { font-size:1.4rem; }
  .quick-actions { grid-template-columns:1fr; }
  .page-title { font-size:1.2rem; }
  .topbar { padding:0 12px; gap:8px; }
  .pub-stats-grid { grid-template-columns:1fr 1fr; }
}

/* ─── SCROLLBAR STYLE ────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--tx-4); }