/* ═══════════════════════════════════════════════════════════════
   SchoolSync GH — Aurora Glass Design System
   Ghana Basic School Management System
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg-primary:       #0d0b1e;
  --bg-secondary:     #13112a;
  --bg-tertiary:      #1a1736;

  --glass-bg:         rgba(255,255,255,0.055);
  --glass-bg-hover:   rgba(255,255,255,0.085);
  --glass-border:     rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --glass-blur:       blur(20px);
  --glass-shadow:     0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);

  --accent-teal:      #00d4aa;
  --accent-teal-dim:  rgba(0,212,170,0.15);
  --accent-teal-glow: 0 0 20px rgba(0,212,170,0.35);
  --accent-gold:      #f5c518;
  --accent-gold-dim:  rgba(245,197,24,0.15);
  --accent-red:       #ff4d6d;
  --accent-red-dim:   rgba(255,77,109,0.15);
  --accent-blue:      #4fc3f7;
  --accent-blue-dim:  rgba(79,195,247,0.15);
  --accent-purple:    #a78bfa;
  --accent-purple-dim:rgba(167,139,250,0.15);
  --accent-green:     #4ade80;

  --text-primary:     #e8eaf6;
  --text-secondary:   rgba(232,234,246,0.70);
  --text-muted:       rgba(232,234,246,0.45);
  --text-disabled:    rgba(232,234,246,0.25);

  --sidebar-width:    260px;
  --topbar-height:    64px;
  --border-radius:    14px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;

  --font-display:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;

  --transition:       all 0.22s cubic-bezier(0.4,0,0.2,1);
  --transition-slow:  all 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Themes ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:       #f4f6f8;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #e9ecef;
  --glass-bg:         rgba(255,255,255,0.85);
  --glass-bg-hover:   rgba(255,255,255,0.95);
  --glass-border:     rgba(0,0,0,0.08);
  --glass-border-strong: rgba(0,0,0,0.15);
  --glass-shadow:     0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --text-primary:     #1e293b;
  --text-secondary:   #475569;
  --text-muted:       #64748b;
  --text-disabled:    #cbd5e1;
  --sidebar-bg:       #e0f2fe;
  --topbar-bg:        rgba(255,255,255,0.80);
}

[data-theme="customized"] {
  --bg-primary:       var(--custom-main-bg, #0d0b1e);
  --bg-secondary:     var(--custom-main-bg, #13112a);
  --bg-tertiary:      var(--custom-main-bg, #1a1736);
  --sidebar-bg:       var(--custom-sidebar-bg, rgba(13,11,30,0.85));
  --topbar-bg:        var(--custom-topbar-bg, rgba(13,11,30,0.80));
}


/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0,212,170,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(79,195,247,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(167,139,250,0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }
p, span, label, td, th, li { font-family: var(--font-body); }

/* ─── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,170,0.4); }

/* ─── Glass Card ─────────────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.glass-card:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(0,212,170,0.08);
}

.glass-card-strong {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
}

/* ─── Layout ─────────────────────────────────────────────────── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  padding-top: var(--topbar-height);
  transition: var(--transition);
}

.page-content {
  padding: 28px 32px;
  max-width: 1600px;
}

@media (max-width: 992px) {
  .main-content { margin-left: 0; }
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  background: var(--sidebar-bg, rgba(13,11,30,0.85));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--glass-border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: var(--transition-slow);
}

.sidebar-brand {
  padding: 20px 22px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-height);
}

.sidebar-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  box-shadow: var(--accent-teal-glow);
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.sidebar-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 22px 6px;
}

.nav-item { margin: 2px 10px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-link i { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }

.nav-link:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  transform: translateX(2px);
}

.nav-link.active {
  background: var(--accent-teal-dim);
  color: var(--accent-teal);
  border: 1px solid rgba(0,212,170,0.2);
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 24px;
  background: var(--accent-teal);
  border-radius: 0 3px 3px 0;
  box-shadow: var(--accent-teal-glow);
}

.nav-badge {
  margin-left: auto;
  background: var(--accent-teal-dim);
  color: var(--accent-teal);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid rgba(0,212,170,0.25);
}

/* ─── Sidebar Collapsed State ────────────────────────────────── */
.sidebar.collapsed { width: 80px; }
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .sidebar-subtitle,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-link span,
.sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 20px 0; }
.sidebar.collapsed .sidebar-logo { width: 36px; height: 36px; }
.sidebar.collapsed .nav-item { margin: 2px 5px; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 12px; }
.sidebar.collapsed .nav-link i { margin: 0; font-size: 20px; }
.sidebar.collapsed .nav-link.active::before { left: -5px; }

.main-content.sidebar-collapsed { margin-left: 80px; }
.topbar.sidebar-collapsed { left: 80px; }

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: var(--topbar-bg, rgba(13,11,30,0.80));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  z-index: 999;
  transition: var(--transition);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.topbar-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  text-decoration: none;
}

.topbar-btn:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
  border-color: var(--glass-border-strong);
}

.notif-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--accent-red);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: white;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-primary);
}

.user-avatar-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: var(--transition);
}

.user-avatar-btn:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-strong); }

.user-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-purple));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.user-role { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }

/* ─── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: 0.08;
}

.stat-card.teal::before  { background: var(--accent-teal); }
.stat-card.gold::before  { background: var(--accent-gold); }
.stat-card.red::before   { background: var(--accent-red); }
.stat-card.blue::before  { background: var(--accent-blue); }

.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.stat-icon.teal   { background: var(--accent-teal-dim);   color: var(--accent-teal);   border: 1px solid rgba(0,212,170,0.2); }
.stat-icon.gold   { background: var(--accent-gold-dim);   color: var(--accent-gold);   border: 1px solid rgba(245,197,24,0.2); }
.stat-icon.red    { background: var(--accent-red-dim);    color: var(--accent-red);    border: 1px solid rgba(255,77,109,0.2); }
.stat-icon.blue   { background: var(--accent-blue-dim);   color: var(--accent-blue);   border: 1px solid rgba(79,195,247,0.2); }
.stat-icon.purple { background: var(--accent-purple-dim); color: var(--accent-purple); border: 1px solid rgba(167,139,250,0.2); }

.stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 6px;
}

.stat-trend.up   { background: rgba(74,222,128,0.12); color: var(--accent-green); }
.stat-trend.down { background: var(--accent-red-dim); color: var(--accent-red); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.btn-primary-glass {
  background: linear-gradient(135deg, var(--accent-teal), #00a884);
  border: 1px solid rgba(0,212,170,0.3);
  color: #0d1f1b;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,212,170,0.25);
}

.btn-primary-glass:hover {
  background: linear-gradient(135deg, #00e8bc, var(--accent-teal));
  box-shadow: 0 6px 25px rgba(0,212,170,0.4);
  color: #0d1f1b;
  transform: translateY(-2px);
}

.btn-danger-glass {
  background: var(--accent-red-dim);
  border: 1px solid rgba(255,77,109,0.25);
  color: var(--accent-red);
}

.btn-danger-glass:hover {
  background: rgba(255,77,109,0.25);
  color: var(--accent-red);
  transform: translateY(-1px);
}

.btn-gold-glass {
  background: var(--accent-gold-dim);
  border: 1px solid rgba(245,197,24,0.25);
  color: var(--accent-gold);
}

.btn-gold-glass:hover {
  background: rgba(245,197,24,0.25);
  color: var(--accent-gold);
  transform: translateY(-1px);
}

/* ─── Form Controls ──────────────────────────────────────────── */
.form-control-glass,
.form-select-glass {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 16px !important;
  transition: var(--transition);
  outline: none !important;
  width: 100%;
}

.form-control-glass::placeholder { color: var(--text-muted); }

.form-control-glass:focus,
.form-select-glass:focus {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(0,212,170,0.4) !important;
  box-shadow: 0 0 0 3px rgba(0,212,170,0.12) !important;
  color: var(--text-primary) !important;
}

.form-select-glass option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.form-label-glass {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.01em;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-glass {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}

.table-glass thead th {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  white-space: nowrap;
}

.table-glass tbody tr {
  background: var(--glass-bg);
  transition: var(--transition);
}

.table-glass tbody tr:hover {
  background: var(--glass-bg-hover);
  transform: scale(1.002);
}

.table-glass td {
  padding: 12px 16px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--glass-border);
  vertical-align: middle;
  color: var(--text-primary);
  font-size: 14px;
}

.table-glass tbody tr:first-child td:first-child { border-radius: var(--border-radius-sm) 0 0 0; }
.table-glass tbody tr:first-child td:last-child  { border-radius: 0 var(--border-radius-sm) 0 0; }

.table-glass-striped tbody tr:nth-child(odd) { background: rgba(255,255,255,0.03); }
.table-glass-striped tbody tr:nth-child(even) { background: rgba(255,255,255,0.06); }
.table-glass-striped tbody tr:hover { background: var(--glass-bg-hover); }

.table-sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.table-sort-icon.asc { color: var(--accent-teal); transform: rotate(180deg); }
.table-sort-icon.desc { color: var(--accent-teal); }

.dataTable-wrapper .dataTable-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.dataTable-wrapper .dataTable-dropdown select {
  background: var(--bg-secondary); border: 1px solid var(--glass-border); color: var(--text-primary);
  border-radius: 8px; padding: 4px 8px; outline: none;
}

/* ─── Badges ─────────────────────────────────────────────────── */
.badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-paid    { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.badge-partial { background: var(--accent-gold-dim); color: var(--accent-gold); border: 1px solid rgba(245,197,24,0.25); }
.badge-unpaid  { background: var(--accent-red-dim);  color: var(--accent-red);  border: 1px solid rgba(255,77,109,0.25); }
.badge-active  { background: var(--accent-teal-dim); color: var(--accent-teal); border: 1px solid rgba(0,212,170,0.25); }
.badge-inactive{ background: rgba(255,255,255,0.06); color: var(--text-muted);  border: 1px solid var(--glass-border); }
.badge-class   { background: var(--accent-blue-dim); color: var(--accent-blue); border: 1px solid rgba(79,195,247,0.25); }
.badge-cat     { background: var(--accent-purple-dim); color: var(--accent-purple); border: 1px solid rgba(167,139,250,0.25); }

/* ─── Modals ─────────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-secondary) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.6) !important;
}

.modal-backdrop { backdrop-filter: blur(4px); }

.modal-header {
  border-bottom: 1px solid var(--glass-border) !important;
  padding: 20px 24px !important;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-body { padding: 24px !important; }
.modal-footer {
  border-top: 1px solid var(--glass-border) !important;
  padding: 16px 24px !important;
  gap: 10px;
}

.btn-close {
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  filter: invert(1);
  width: 30px !important; height: 30px !important;
}

/* Modal animation */
.modal.fade .modal-dialog {
  transform: scale(0.9) translateY(-10px);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.modal.show .modal-dialog { transform: scale(1) translateY(0); }

/* ─── Toast Alerts ───────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(19,17,42,0.95);
  backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
  min-width: 300px;
  max-width: 380px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  pointer-events: all;
  animation: toastSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
  position: relative;
  overflow: hidden;
}

.toast-alert::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

.toast-alert.success::before { background: var(--accent-teal); }
.toast-alert.error::before   { background: var(--accent-red); }
.toast-alert.warning::before { background: var(--accent-gold); }
.toast-alert.info::before    { background: var(--accent-blue); }

.toast-alert.success { border-left-color: rgba(0,212,170,0.3); }
.toast-alert.error   { border-left-color: rgba(255,77,109,0.3); }
.toast-alert.warning { border-left-color: rgba(245,197,24,0.3); }
.toast-alert.info    { border-left-color: rgba(79,195,247,0.3); }

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-alert.success .toast-icon { color: var(--accent-teal); }
.toast-alert.error   .toast-icon { color: var(--accent-red); }
.toast-alert.warning .toast-icon { color: var(--accent-gold); }
.toast-alert.info    .toast-icon { color: var(--accent-blue); }

.toast-body { flex: 1; }
.toast-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.toast-msg   { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.toast-close {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; font-size: 14px;
  padding: 0; line-height: 1;
  transition: var(--transition);
  flex-shrink: 0;
}

.toast-close:hover { color: var(--text-primary); }

.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  animation: toastProgress 4s linear forwards;
}

.toast-alert.success .toast-progress { background: var(--accent-teal); }
.toast-alert.error   .toast-progress { background: var(--accent-red); }
.toast-alert.warning .toast-progress { background: var(--accent-gold); }
.toast-alert.info    .toast-progress { background: var(--accent-blue); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastSlideOut {
  to { opacity: 0; transform: translateX(40px) scale(0.9); max-height: 0; padding: 0; margin: 0; }
}

@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination-glass {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.page-item-glass a,
.page-item-glass span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}

.page-item-glass a:hover { background: var(--glass-bg-hover); color: var(--text-primary); }

.page-item-glass.active a,
.page-item-glass.active span {
  background: var(--accent-teal-dim);
  border-color: rgba(0,212,170,0.3);
  color: var(--accent-teal);
  font-weight: 700;
}

.page-item-glass.disabled span { opacity: 0.35; cursor: not-allowed; }

/* ─── Breadcrumbs ────────────────────────────────────────────── */
.breadcrumb-glass {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  font-size: 13px;
  margin-bottom: 24px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.breadcrumb-glass a { color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.breadcrumb-glass a:hover { color: var(--accent-teal); }
.breadcrumb-glass .separator { color: var(--glass-border-strong); font-size: 10px; }
.breadcrumb-glass .active { color: var(--text-primary); font-weight: 500; }

/* ─── Section Headers ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header-title { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.page-header-sub   { font-size: 14px; color: var(--text-muted); margin-top: 4px; font-weight: 400; }

.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Tabs ───────────────────────────────────────────────────── */
.nav-tabs-glass {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--glass-bg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.nav-tabs-glass .nav-link {
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.nav-tabs-glass .nav-link:hover { color: var(--text-primary); background: var(--glass-bg-hover); }

.nav-tabs-glass .nav-link.active {
  background: var(--accent-teal-dim);
  border-color: rgba(0,212,170,0.25);
  color: var(--accent-teal);
}

/* ─── Progress Bar ───────────────────────────────────────────── */
.progress-glass {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.progress-bar-glass {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue));
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

.progress-bar-glass.gold { background: linear-gradient(90deg, var(--accent-gold), #ffb700); }
.progress-bar-glass.red  { background: linear-gradient(90deg, var(--accent-red), #ff6b6b); }

/* ─── Student Photo ──────────────────────────────────────────── */
.student-photo {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid var(--glass-border);
}

.student-initials {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-teal-dim), var(--accent-blue-dim));
  border: 2px solid rgba(0,212,170,0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-teal);
  flex-shrink: 0;
}

/* ─── Search Bar ─────────────────────────────────────────────── */
.search-glass {
  position: relative;
}

.search-glass i {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}

.search-glass input {
  padding-left: 42px !important;
}

/* ─── Quick Action Cards ─────────────────────────────────────── */
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
  gap: 10px;
  cursor: pointer;
}

.quick-action:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.quick-action-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

.quick-action-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ─── Chart Cards ────────────────────────────────────────────── */
.chart-container { position: relative; width: 100%; }

/* ─── Bill Items ─────────────────────────────────────────────── */
.bill-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
}

.bill-item-row:last-child { border-bottom: none; }

.bill-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 4px;
  border-top: 2px solid var(--glass-border-strong);
  margin-top: 6px;
}

.bill-total-label { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.bill-total-amount { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent-teal); }

/* ─── Timeline ───────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: var(--glass-border);
}

.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-dot {
  position: absolute;
  left: -20px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 8px rgba(0,212,170,0.5);
}

.timeline-content {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 14px;
}

.timeline-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ─── Empty State ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 52px;
  color: var(--text-muted);
  margin-bottom: 16px;
  opacity: 0.4;
}

.empty-title { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.empty-text  { font-size: 14px; color: var(--text-muted); max-width: 300px; margin: 0 auto 20px; }

/* ─── Skeleton Loader ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Image Preview ──────────────────────────────────────────── */
.img-preview-box {
  width: 100%; max-width: 140px; height: 140px;
  border-radius: 12px;
  border: 2px dashed var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  background: var(--glass-bg);
}

.img-preview-box:hover { border-color: var(--accent-teal); }
.img-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-placeholder { text-align: center; color: var(--text-muted); font-size: 13px; }
.img-preview-placeholder i { font-size: 28px; margin-bottom: 6px; display: block; }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 10px rgba(0,212,170,0.3); }
  50%      { box-shadow: 0 0 25px rgba(0,212,170,0.6); }
}

.anim-fade-up { animation: fadeInUp 0.5s ease forwards; }
.anim-fade    { animation: fadeIn 0.4s ease forwards; }

/* Staggered cards */
.stagger-1 { animation-delay: 0.05s; opacity: 0; }
.stagger-2 { animation-delay: 0.10s; opacity: 0; }
.stagger-3 { animation-delay: 0.15s; opacity: 0; }
.stagger-4 { animation-delay: 0.20s; opacity: 0; }
.stagger-5 { animation-delay: 0.25s; opacity: 0; }
.stagger-6 { animation-delay: 0.30s; opacity: 0; }

/* ─── Utility ────────────────────────────────────────────────── */
.text-teal   { color: var(--accent-teal) !important; }
.text-gold   { color: var(--accent-gold) !important; }
.text-red    { color: var(--accent-red) !important; }
.text-blue   { color: var(--accent-blue) !important; }
.text-purple { color: var(--accent-purple) !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-secondary-glass { color: var(--text-secondary) !important; }

.mono { font-family: var(--font-mono); }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }

.divider {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 16px 0;
}

.action-buttons { display: flex; gap: 6px; align-items: center; }

.btn-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  font-size: 14px;
  text-decoration: none;
}

.btn-icon:hover { background: var(--glass-bg-hover); color: var(--text-primary); }
.btn-icon.edit:hover  { color: var(--accent-blue); border-color: rgba(79,195,247,0.3); }
.btn-icon.delete:hover{ color: var(--accent-red);  border-color: rgba(255,77,109,0.3); }
.btn-icon.view:hover  { color: var(--accent-teal); border-color: rgba(0,212,170,0.3); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-content { padding: 16px; }
  .stat-value { font-size: 24px; }
  .topbar { left: 0; padding: 0 16px; }
  .user-info { display: none; }
  .page-header { flex-direction: column; }
}

/* ─── Print ───────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .toast-container, .btn-glass, .btn-primary-glass { display: none !important; }
  .main-content { margin-left: 0 !important; padding-top: 0 !important; }
  body { background: white; color: black; }
  .glass-card { background: white; border: 1px solid #eee; box-shadow: none; }
  * { backdrop-filter: none !important; }
}

/* ================================================================
   SchoolSync Theme Pack v8 - clarity, contrast and accessibility
   ================================================================ */
[data-theme="dark-blue-gold"] {
  --bg-primary:#071426; --bg-secondary:#0b1d33; --bg-tertiary:#102844;
  --sidebar-bg:rgba(5,18,35,.96); --topbar-bg:rgba(7,20,38,.92);
  --glass-bg:rgba(255,255,255,.07); --glass-bg-hover:rgba(255,255,255,.12);
  --glass-border:rgba(255,215,92,.16); --glass-border-strong:rgba(255,215,92,.32);
  --accent-teal:#ffd75c; --accent-teal-dim:rgba(255,215,92,.16); --accent-teal-glow:0 0 20px rgba(255,215,92,.28);
  --accent-gold:#ffca28; --accent-blue:#62b5ff; --accent-purple:#b7a1ff;
  --text-primary:#f8fbff; --text-secondary:#d1deed; --text-muted:#96aac1; --text-disabled:#52677e;
}
[data-theme="emerald"] {
  --bg-primary:#061c18; --bg-secondary:#0a2922; --bg-tertiary:#10382e;
  --sidebar-bg:rgba(5,31,25,.96); --topbar-bg:rgba(6,28,24,.93);
  --glass-bg:rgba(255,255,255,.065); --glass-bg-hover:rgba(255,255,255,.11);
  --glass-border:rgba(79,255,186,.13); --glass-border-strong:rgba(79,255,186,.29);
  --accent-teal:#38e6a0; --accent-teal-dim:rgba(56,230,160,.16); --accent-teal-glow:0 0 20px rgba(56,230,160,.28);
  --accent-gold:#ffd166; --accent-blue:#5ac8fa; --accent-purple:#c4a7ff;
  --text-primary:#effff8; --text-secondary:#c6e9da; --text-muted:#8bbbab; --text-disabled:#4d7468;
}
[data-theme="royal-purple"] {
  --bg-primary:#140b25; --bg-secondary:#21113b; --bg-tertiary:#301852;
  --sidebar-bg:rgba(20,9,39,.96); --topbar-bg:rgba(20,11,37,.93);
  --glass-bg:rgba(255,255,255,.07); --glass-bg-hover:rgba(255,255,255,.115);
  --glass-border:rgba(200,160,255,.15); --glass-border-strong:rgba(200,160,255,.31);
  --accent-teal:#c89cff; --accent-teal-dim:rgba(200,156,255,.16); --accent-teal-glow:0 0 20px rgba(200,156,255,.3);
  --accent-gold:#ffcf66; --accent-blue:#6fc8ff; --accent-purple:#d3adff;
  --text-primary:#fbf7ff; --text-secondary:#dfd1ef; --text-muted:#ad96c4; --text-disabled:#665376;
}
[data-theme="sunset"] {
  --bg-primary:#25100d; --bg-secondary:#371713; --bg-tertiary:#4b211a;
  --sidebar-bg:rgba(40,15,12,.96); --topbar-bg:rgba(37,16,13,.93);
  --glass-bg:rgba(255,255,255,.07); --glass-bg-hover:rgba(255,255,255,.115);
  --glass-border:rgba(255,174,116,.16); --glass-border-strong:rgba(255,174,116,.32);
  --accent-teal:#ff9f68; --accent-teal-dim:rgba(255,159,104,.17); --accent-teal-glow:0 0 20px rgba(255,159,104,.28);
  --accent-gold:#ffd166; --accent-blue:#78c8ff; --accent-purple:#d6a7ff;
  --text-primary:#fff8f4; --text-secondary:#f2d3c7; --text-muted:#c19a8c; --text-disabled:#775b51;
}
[data-theme="ocean"] {
  --bg-primary:#041c2c; --bg-secondary:#072a40; --bg-tertiary:#0b3a56;
  --sidebar-bg:rgba(3,27,43,.96); --topbar-bg:rgba(4,28,44,.93);
  --glass-bg:rgba(255,255,255,.065); --glass-bg-hover:rgba(255,255,255,.11);
  --glass-border:rgba(76,207,255,.15); --glass-border-strong:rgba(76,207,255,.31);
  --accent-teal:#40d9d0; --accent-teal-dim:rgba(64,217,208,.16); --accent-teal-glow:0 0 20px rgba(64,217,208,.28);
  --accent-gold:#ffd166; --accent-blue:#4ccfff; --accent-purple:#ae9bff;
  --text-primary:#f2fbff; --text-secondary:#c8e5f0; --text-muted:#8fb9c9; --text-disabled:#527484;
}
[data-theme="rose-light"] {
  --bg-primary:#fff7fa; --bg-secondary:#ffffff; --bg-tertiary:#fce7ef;
  --sidebar-bg:rgba(255,243,248,.97); --topbar-bg:rgba(255,255,255,.94);
  --glass-bg:rgba(255,255,255,.91); --glass-bg-hover:#ffffff;
  --glass-border:rgba(132,42,78,.12); --glass-border-strong:rgba(132,42,78,.24);
  --glass-shadow:0 10px 30px rgba(115,37,69,.08),0 2px 8px rgba(115,37,69,.05);
  --accent-teal:#c83f74; --accent-teal-dim:rgba(200,63,116,.12); --accent-teal-glow:0 0 18px rgba(200,63,116,.18);
  --accent-gold:#b7791f; --accent-blue:#2878c8; --accent-purple:#7c4dcc;
  --text-primary:#321827; --text-secondary:#624456; --text-muted:#866879; --text-disabled:#c8afbb;
}
[data-theme="sky-light"] {
  --bg-primary:#f3f9ff; --bg-secondary:#ffffff; --bg-tertiary:#e4f1fb;
  --sidebar-bg:rgba(235,247,255,.98); --topbar-bg:rgba(255,255,255,.94);
  --glass-bg:rgba(255,255,255,.92); --glass-bg-hover:#ffffff;
  --glass-border:rgba(21,88,134,.12); --glass-border-strong:rgba(21,88,134,.24);
  --glass-shadow:0 10px 30px rgba(31,89,127,.08),0 2px 8px rgba(31,89,127,.05);
  --accent-teal:#087f8c; --accent-teal-dim:rgba(8,127,140,.12); --accent-teal-glow:0 0 18px rgba(8,127,140,.16);
  --accent-gold:#9a6700; --accent-blue:#1769aa; --accent-purple:#7048b8;
  --text-primary:#163044; --text-secondary:#405f73; --text-muted:#678398; --text-disabled:#afc2cf;
}

/* Stronger global readability */
body { font-size:15px; letter-spacing:.005em; }
.page-content { width:100%; }
.page-header-title { font-size:clamp(1.65rem,2vw,2.2rem)!important; font-weight:800!important; letter-spacing:-.025em; }
.page-header-sub { color:var(--text-secondary)!important; font-size:14px!important; }
.glass-card { overflow:hidden; }
.section-title { min-height:54px; padding:15px 20px!important; font-size:16px!important; font-weight:700!important; background:linear-gradient(90deg,var(--accent-teal-dim),transparent 55%); }
.btn-glass { min-height:40px; padding:9px 16px; font-size:14px; font-weight:700; border-width:1px; }
.btn-primary-glass { color:#071a17!important; box-shadow:0 7px 18px rgba(0,0,0,.16); }
[data-theme="light"] .btn-primary-glass,[data-theme="rose-light"] .btn-primary-glass,[data-theme="sky-light"] .btn-primary-glass { color:#fff!important; }
.form-control-glass,.form-select-glass { min-height:44px; padding:10px 13px; font-size:14px; border-color:var(--glass-border-strong); background:var(--glass-bg); color:var(--text-primary); }
textarea.form-control-glass { min-height:88px; }
.form-label-glass { font-size:13px!important; font-weight:700!important; color:var(--text-secondary)!important; margin-bottom:7px!important; }
.table-glass { font-size:14px; }
.table-glass thead th { padding:13px 15px; color:var(--text-primary); font-size:12px; letter-spacing:.055em; background:var(--accent-teal-dim); border-bottom:1px solid var(--glass-border-strong); }
.table-glass td { padding:13px 15px; color:var(--text-secondary); }
.table-glass tbody tr:hover { background:var(--accent-teal-dim); }
.nav-link { min-height:43px; font-size:14px; }
.nav-link.active { font-weight:700; box-shadow:inset 3px 0 0 var(--accent-teal); }
.topbar-btn { min-width:42px; min-height:42px; }
.dropdown-menu.theme-menu { width:300px; max-height:min(520px,75vh); overflow:auto; padding:10px!important; background:var(--bg-secondary)!important; border-color:var(--glass-border-strong)!important; box-shadow:var(--glass-shadow); }
.theme-menu .dropdown-header { color:var(--text-primary)!important; font-weight:800; padding:8px 10px 10px!important; }
.theme-menu .dropdown-item { color:var(--text-secondary)!important; padding:10px!important; border-radius:10px!important; display:flex; align-items:center; gap:11px; font-size:13px!important; margin:2px 0; }
.theme-menu .dropdown-item:hover,.theme-menu .dropdown-item.active-theme { background:var(--accent-teal-dim)!important; color:var(--text-primary)!important; }
.theme-menu .dropdown-item.active-theme::after { content:'✓'; margin-left:auto; color:var(--accent-teal); font-weight:900; }
.theme-swatch { width:38px; height:24px; border-radius:7px; flex:0 0 auto; border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.theme-menu-label { display:flex; flex-direction:column; line-height:1.2; }
.theme-menu-label small { color:var(--text-muted); font-size:10px; margin-top:3px; }
@media (max-width:768px){ .page-content{padding:20px 14px}.btn-glass{min-height:42px}.table-responsive{border-radius:12px}.theme-menu{width:min(300px,92vw)!important} }


/* ================================================================
   Classic Admin Red - inspired by a clean professional admin panel
   Dark charcoal navigation, red command bar, bright report workspace
   ================================================================ */
[data-theme="classic-admin-red"] {
  --bg-primary:#f4f6f9;
  --bg-secondary:#ffffff;
  --bg-tertiary:#e9ecef;
  --sidebar-bg:#343a40;
  --topbar-bg:#e33446;
  --glass-bg:#ffffff;
  --glass-bg-hover:#f7f8fa;
  --glass-border:#d6dbe1;
  --glass-border-strong:#c2c9d1;
  --glass-shadow:0 2px 7px rgba(0,0,0,.12);
  --accent-teal:#e33446;
  --accent-teal-dim:rgba(227,52,70,.10);
  --accent-teal-glow:0 0 0 rgba(0,0,0,0);
  --accent-gold:#d97706;
  --accent-red:#dc3545;
  --accent-red-dim:rgba(220,53,69,.12);
  --accent-blue:#0d6efd;
  --accent-blue-dim:rgba(13,110,253,.11);
  --accent-purple:#6f42c1;
  --accent-purple-dim:rgba(111,66,193,.11);
  --accent-green:#28a745;
  --text-primary:#111827;
  --text-secondary:#4b5563;
  --text-muted:#6b7280;
  --text-disabled:#adb5bd;
  --border-radius:6px;
  --border-radius-sm:4px;
  --border-radius-lg:8px;
}

[data-theme="classic-admin-red"] body::before { display:none; }
[data-theme="classic-admin-red"] body { background:#f4f6f9; }
[data-theme="classic-admin-red"] .page-content { max-width:none; }
[data-theme="classic-admin-red"] .glass-card,
[data-theme="classic-admin-red"] .glass-card-strong {
  background:#fff;
  border:1px solid #d6dbe1;
  box-shadow:0 2px 7px rgba(0,0,0,.12);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="classic-admin-red"] .glass-card:hover {
  border-color:#c2c9d1;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}

/* Dark charcoal sidebar */
[data-theme="classic-admin-red"] .sidebar {
  background:#343a40;
  border-right:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="classic-admin-red"] .sidebar-brand { border-bottom:1px solid rgba(255,255,255,.12); }
[data-theme="classic-admin-red"] .sidebar-title { color:#fff; }
[data-theme="classic-admin-red"] .sidebar-subtitle,
[data-theme="classic-admin-red"] .nav-section-label { color:#aeb5bd; }
[data-theme="classic-admin-red"] .sidebar-logo {
  background:#fff;
  color:#e33446;
  box-shadow:none;
}
[data-theme="classic-admin-red"] .nav-link {
  color:#c7ccd2;
  border-radius:2px;
}
[data-theme="classic-admin-red"] .nav-link:hover {
  color:#fff;
  background:#454d55;
  transform:none;
}
[data-theme="classic-admin-red"] .nav-link.active {
  color:#fff;
  background:#4b545c;
  border-color:transparent;
  box-shadow:inset 3px 0 0 #e33446;
}
[data-theme="classic-admin-red"] .nav-link.active::before { display:none; }
[data-theme="classic-admin-red"] .nav-badge {
  color:#fff;
  background:#e33446;
  border-color:#e33446;
}

/* Red command/top bar */
[data-theme="classic-admin-red"] .topbar {
  background:#e33446;
  color:#fff;
  border-bottom:0;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-theme="classic-admin-red"] .topbar-title,
[data-theme="classic-admin-red"] .topbar .user-name,
[data-theme="classic-admin-red"] .topbar .user-role { color:#fff!important; }
[data-theme="classic-admin-red"] .topbar-btn {
  color:#fff;
  background:transparent;
  border-color:transparent;
}
[data-theme="classic-admin-red"] .topbar-btn:hover {
  color:#fff;
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.12);
}
[data-theme="classic-admin-red"] .notif-badge { border-color:#e33446; }

/* Crisp forms and report tables */
[data-theme="classic-admin-red"] .form-control-glass,
[data-theme="classic-admin-red"] .form-select-glass {
  background:#fff;
  color:#212529;
  border:1px solid #ced4da;
  box-shadow:none;
}
[data-theme="classic-admin-red"] .form-control-glass:focus,
[data-theme="classic-admin-red"] .form-select-glass:focus {
  border-color:#80bdff;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.18);
}
[data-theme="classic-admin-red"] .table-glass { border-spacing:0; }
[data-theme="classic-admin-red"] .table-glass thead th {
  background:#2f4354;
  color:#fff;
  border-bottom:1px solid #455d70;
  border-right:1px solid rgba(255,255,255,.25);
  letter-spacing:.02em;
}
[data-theme="classic-admin-red"] .table-glass thead th:last-child { border-right:0; }
[data-theme="classic-admin-red"] .table-glass tbody tr,
[data-theme="classic-admin-red"] .table-glass-striped tbody tr:nth-child(odd),
[data-theme="classic-admin-red"] .table-glass-striped tbody tr:nth-child(even) { background:#fff; }
[data-theme="classic-admin-red"] .table-glass tbody tr:nth-child(even) { background:#f4f5f7; }
[data-theme="classic-admin-red"] .table-glass tbody tr:hover { background:#eef2f5; transform:none; }
[data-theme="classic-admin-red"] .table-glass td {
  color:#212529;
  border-bottom:1px solid #dee2e6;
}
[data-theme="classic-admin-red"] .table-sort-icon { color:#b8c4cd; }
[data-theme="classic-admin-red"] .table-sort-icon.asc { color:#fff; }

/* Primary actions use the theme red while standard Bootstrap status colours remain intact */
[data-theme="classic-admin-red"] .btn-primary-glass {
  color:#fff!important;
  background:#e33446!important;
  border-color:#e33446!important;
  box-shadow:0 2px 5px rgba(227,52,70,.22);
}
[data-theme="classic-admin-red"] .btn-primary-glass:hover {
  background:#c92b3d!important;
  border-color:#c92b3d!important;
}
[data-theme="classic-admin-red"] .dropdown-menu {
  background:#fff!important;
  border-color:#d6dbe1!important;
  box-shadow:0 5px 16px rgba(0,0,0,.16)!important;
}
[data-theme="classic-admin-red"] .dropdown-menu .dropdown-item { color:#495057!important; }
[data-theme="classic-admin-red"] .dropdown-menu .dropdown-item:hover { color:#111!important; background:#f1f3f5!important; }
[data-theme="classic-admin-red"] .theme-menu .dropdown-item.active-theme {
  background:rgba(227,52,70,.10)!important;
  color:#b42334!important;
}
[data-theme="classic-admin-red"] .theme-menu .dropdown-item.active-theme::after { color:#e33446; }


/* ================================================================
   SchoolSync v17 - Responsive + Readable Interface
   ================================================================ */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea, .btn, .dropdown-item {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.page-header-title, .section-title, .sidebar-title, .topbar-title {
  line-height: 1.25;
  letter-spacing: -.015em;
}

.page-header-title {
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
}

.page-header-sub,
.text-secondary-glass,
.form-text,
small {
  line-height: 1.5;
}

/* More legible controls */
.form-control,
.form-select,
.form-control-glass,
.form-select-glass {
  min-height: 46px;
  font-size: 15px !important;
  line-height: 1.4;
}

textarea.form-control,
textarea.form-control-glass {
  min-height: 110px;
}

.form-label,
.form-label-glass {
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.35;
}

.btn,
.btn-glass,
.btn-primary-glass {
  min-height: 42px;
  font-size: 14px;
  line-height: 1.25;
}

/* Readable cards and tables */
.glass-card,
.glass-card-strong {
  max-width: 100%;
}

.section-title {
  font-size: 16px !important;
  line-height: 1.35;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-glass {
  width: 100%;
  font-size: 14px;
}

.table-glass th,
.table-glass td {
  vertical-align: middle;
  line-height: 1.45;
}

.table-glass thead th {
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
}

.table-glass td {
  font-size: 14px;
}

/* Keep long values from breaking layouts */
.table-glass td,
.card-body,
.glass-card,
.page-content {
  overflow-wrap: anywhere;
}

/* Responsive action groups */
.action-buttons,
.page-header-actions,
.filter-actions {
  flex-wrap: wrap;
}

/* Mobile sidebar overlay */
.sidebar-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sidebar-mobile-overlay.show { display: block; }

@media (max-width: 1199.98px) {
  .page-content {
    padding: 24px 22px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --topbar-height: 60px;
  }

  .sidebar {
    width: min(300px, 86vw) !important;
    transform: translateX(-105%);
    box-shadow: 12px 0 32px rgba(0,0,0,.28);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Desktop collapse state must not shrink the mobile drawer */
  .sidebar.collapsed {
    width: min(300px, 86vw) !important;
    transform: translateX(-105%);
  }

  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }

  .sidebar.collapsed .sidebar-title,
  .sidebar.collapsed .sidebar-subtitle,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-link span,
  .sidebar.collapsed .nav-badge {
    display: initial;
  }

  .sidebar.collapsed .sidebar-brand {
    justify-content: flex-start;
    padding: 20px 22px;
  }

  .sidebar.collapsed .nav-item { margin: 2px 10px; }
  .sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: 10px 14px;
  }
  .sidebar.collapsed .nav-link i {
    font-size: 16px;
    width: 20px;
  }

  .main-content,
  .main-content.sidebar-collapsed {
    margin-left: 0 !important;
  }

  .topbar,
  .topbar.sidebar-collapsed {
    left: 0 !important;
    width: 100%;
  }

  .page-content {
    padding: 22px 18px;
  }

  .row > [class*="col-"] {
    min-width: 0;
  }

  .dropdown-menu.theme-menu {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 767.98px) {
  html { font-size: 15.5px; }

  body { font-size: 15px; }

  .page-content {
    padding: 18px 12px 28px;
  }

  .page-header {
    gap: 12px;
    margin-bottom: 18px;
  }

  .page-header-title {
    font-size: 1.5rem !important;
  }

  .page-header-sub {
    font-size: 13.5px !important;
  }

  .glass-card,
  .glass-card-strong {
    border-radius: 10px;
  }

  .section-title {
    min-height: 50px;
    padding: 13px 14px !important;
    font-size: 15px !important;
  }

  .card-body,
  .glass-card .p-4 {
    padding: 14px !important;
  }

  .form-control,
  .form-select,
  .form-control-glass,
  .form-select-glass {
    min-height: 46px;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  .btn,
  .btn-glass,
  .btn-primary-glass {
    min-height: 44px;
    padding: 10px 14px;
  }

  .btn-sm,
  .btn-glass.btn-sm {
    min-height: 38px;
    padding: 8px 11px;
  }

  .table-responsive {
    margin-left: 0;
    margin-right: 0;
    border-radius: 8px;
  }

  .table-responsive .table-glass {
    min-width: 720px;
  }

  .table-glass th,
  .table-glass td {
    padding: 11px 12px;
  }

  .topbar {
    padding: 0 10px;
  }

  .topbar-title {
    font-size: 14px;
    max-width: 48vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .dropdown-menu {
    max-width: calc(100vw - 20px);
  }

  .modal-dialog {
    margin: 10px;
  }

  .modal-content {
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }

  .action-buttons {
    gap: 8px;
  }
}

@media (max-width: 479.98px) {
  .page-content { padding-left: 10px; padding-right: 10px; }

  .page-header-title { font-size: 1.35rem !important; }

  .stat-value { font-size: 1.35rem; }

  .theme-menu .dropdown-item {
    padding: 10px 8px !important;
  }

  .theme-swatch {
    width: 32px;
    height: 22px;
  }
}

/* Classic Admin Red: retain strong readability at every breakpoint */
[data-theme="classic-admin-red"] body {
  font-weight: 400;
}
[data-theme="classic-admin-red"] .nav-link {
  font-weight: 500;
}
[data-theme="classic-admin-red"] .table-glass td {
  color: #1f2933;
}
[data-theme="classic-admin-red"] .form-label,
[data-theme="classic-admin-red"] .form-label-glass {
  color: #27313b !important;
}


/* ═══════════════════════════════════════════════════════════════
   SchoolSync Pro — recommended production theme
   Clear navy/teal navigation, bright workspace, accessible typography.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="schoolsync-pro"] {
  --bg-primary:#f4f7fb; --bg-secondary:#ffffff; --bg-tertiary:#edf2f7;
  --sidebar-bg:#12324a; --topbar-bg:#ffffff;
  --glass-bg:#ffffff; --glass-bg-hover:#f7fafc; --glass-border:#dce5ef; --glass-border-strong:#c9d6e3;
  --text-primary:#172033; --text-secondary:#4b5b70; --text-muted:#718096;
  --accent-teal:#176b87; --accent-teal-dim:#e6f2f6; --accent-blue:#2563eb; --accent-blue-dim:#eaf1ff;
  --accent-green:#16805b; --accent-green-dim:#e9f7f1; --accent-red:#c7394f; --accent-red-dim:#fff0f2;
  --accent-yellow:#b7791f; --accent-yellow-dim:#fff8e8; --accent-purple:#6b55b5; --accent-purple-dim:#f1edff;
  --glass-shadow:0 8px 28px rgba(30,55,80,.09); --glass-shadow-hover:0 12px 32px rgba(30,55,80,.13);
}
[data-theme="schoolsync-pro"] body{background:#f4f7fb;color:#172033}
[data-theme="schoolsync-pro"] body::before{display:none}
[data-theme="schoolsync-pro"] .sidebar{background:linear-gradient(180deg,#12324a 0%,#0e283c 100%);border-right:0;box-shadow:8px 0 24px rgba(15,39,57,.09)}
[data-theme="schoolsync-pro"] .sidebar-title{color:#fff}
[data-theme="schoolsync-pro"] .sidebar-subtitle,[data-theme="schoolsync-pro"] .nav-section-label{color:#9fb4c5}
[data-theme="schoolsync-pro"] .nav-link{color:#d7e3ec}
[data-theme="schoolsync-pro"] .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
[data-theme="schoolsync-pro"] .nav-link.active{background:#176b87;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.14)}
[data-theme="schoolsync-pro"] .topbar{background:#fff;border-bottom:1px solid #e2e9f1;box-shadow:0 3px 12px rgba(26,45,67,.05)}
[data-theme="schoolsync-pro"] .glass-card,[data-theme="schoolsync-pro"] .glass-card-strong{background:#fff;border:1px solid #e0e8f0;box-shadow:0 8px 24px rgba(26,45,67,.07)}
[data-theme="schoolsync-pro"] .table-glass thead th{background:#17384e;color:#fff;border-color:#244b64;font-weight:750;letter-spacing:.02em}
[data-theme="schoolsync-pro"] .table-glass tbody tr:nth-child(even){background:#f7fafc}
[data-theme="schoolsync-pro"] .table-glass tbody tr:hover{background:#edf5f8;transform:none}
[data-theme="schoolsync-pro"] .form-control-glass,[data-theme="schoolsync-pro"] .form-select-glass{background:#fff;border:1px solid #cfdbe7;color:#172033;min-height:44px}
[data-theme="schoolsync-pro"] .form-control-glass:focus,[data-theme="schoolsync-pro"] .form-select-glass:focus{border-color:#176b87;box-shadow:0 0 0 3px rgba(23,107,135,.12)}
[data-theme="schoolsync-pro"] .btn-primary-glass{background:#176b87;border-color:#176b87;color:#fff!important;box-shadow:0 5px 14px rgba(23,107,135,.2)}
[data-theme="schoolsync-pro"] .btn-primary-glass:hover{background:#125a72;border-color:#125a72;transform:translateY(-1px)}
[data-theme="schoolsync-pro"] .page-title,[data-theme="schoolsync-pro"] h1,[data-theme="schoolsync-pro"] h2,[data-theme="schoolsync-pro"] h3{color:#172033}

/* Record Payment student autocomplete: readable on every light/dark theme */
.student-suggestions {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1200;
  display:none;
  margin-top:5px;
  max-height:280px;
  overflow-y:auto;
  background:var(--bg-secondary);
  color:var(--text-primary);
  border:1px solid var(--glass-border-strong);
  border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.student-suggestions > div { color:var(--text-primary); }
.student-suggestions > div:hover { background:var(--glass-bg-hover) !important; }
[data-theme="light"] .student-suggestions,
[data-theme="rose-light"] .student-suggestions,
[data-theme="sky-light"] .student-suggestions,
[data-theme="classic-admin-red"] .student-suggestions,
[data-theme="schoolsync-pro"] .student-suggestions {
  background:#fff;
  color:#172033;
  border-color:#cfd8e3;
  box-shadow:0 14px 34px rgba(23,32,51,.16);
}
[data-theme="light"] .student-suggestions > div:hover,
[data-theme="rose-light"] .student-suggestions > div:hover,
[data-theme="sky-light"] .student-suggestions > div:hover,
[data-theme="classic-admin-red"] .student-suggestions > div:hover,
[data-theme="schoolsync-pro"] .student-suggestions > div:hover { background:#edf4f8 !important; }

/* v26: Record Payment autocomplete reliability/readability */
.payment-form-card { overflow: visible !important; }
.payment-form-card .student-suggestions { z-index: 5000; }
.student-suggestion-item {
  width:100%;
  border:0;
  border-bottom:1px solid var(--glass-border);
  background:transparent;
  color:var(--text-primary);
  padding:10px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  font:inherit;
  transition:background .15s ease;
}
.student-suggestion-item:last-child { border-bottom:0; }
.student-suggestion-item:hover,
.student-suggestion-item:focus { background:var(--glass-bg-hover); outline:none; }
.student-suggestion-copy { display:flex; flex-direction:column; min-width:0; }
.student-suggestion-name { font-size:13px; font-weight:700; color:var(--text-primary); }
.student-suggestion-meta { font-size:11px; color:var(--text-muted); }
.student-suggestion-balance { margin-left:auto; white-space:nowrap; font-size:12px; font-weight:700; color:var(--accent-red); }
[data-theme="light"] .student-suggestion-item,
[data-theme="rose-light"] .student-suggestion-item,
[data-theme="sky-light"] .student-suggestion-item,
[data-theme="classic-admin-red"] .student-suggestion-item,
[data-theme="schoolsync-pro"] .student-suggestion-item { color:#172033; border-bottom-color:#e7edf3; }
[data-theme="light"] .student-suggestion-name,
[data-theme="rose-light"] .student-suggestion-name,
[data-theme="sky-light"] .student-suggestion-name,
[data-theme="classic-admin-red"] .student-suggestion-name,
[data-theme="schoolsync-pro"] .student-suggestion-name { color:#172033; }
[data-theme="light"] .student-suggestion-item:hover,
[data-theme="rose-light"] .student-suggestion-item:hover,
[data-theme="sky-light"] .student-suggestion-item:hover,
[data-theme="classic-admin-red"] .student-suggestion-item:hover,
[data-theme="schoolsync-pro"] .student-suggestion-item:hover { background:#edf4f8; }


/* v40: unified Fee Setup + Learning Materials navigation */
.fee-setup-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.fee-setup-tabs .nav-link {
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.fee-setup-tabs .nav-link.active {
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
@media (max-width: 768px) {
  .fee-setup-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .fee-setup-tabs .nav-link { flex: 0 0 auto; }
}