/* =====================================================================
   SRVIS THEME v2 — Glass / transparent design system
   A slow-crossfading photo background sits behind every page; all
   surfaces (sidebar, cards, forms, tables) are translucent "glass"
   panels with a blur, so the background stays visible throughout.
   ===================================================================== */

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

:root{
  --ink: transparent;
  --surface:        rgba(22,27,38,0.78);
  --surface-2:      rgba(22,27,38,0.82);
  --surface-3:      rgba(22,27,38,0.86);
  --surface-solid:  #121A2E;
  --border:         rgba(22,27,38,0.86);
  --border-strong:  rgba(255,255,255,0.22);

  --primary:      #5B6EF5;
  --primary-dim:  #333F8F;
  --accent-gold:  #F2A93B;
  --success:      #34C77B;
  --danger:       #FF6B6B;

  --text:         #F0F3FA;
  --text-muted:   #B3BAD1;
  --text-faint:   #8891A9;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --rail-w: 76px;
  --rail-w-open: 232px;
  --shadow-card: 0 8px 30px rgba(0,0,0,0.45);
  --blur: blur(14px) saturate(150%);
}

*{ box-sizing:border-box; }

html{
  margin:0;
  min-height:100%;
  background:#0A0F1E;
}
body{
  margin:0;
  min-height:100vh;
  background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 6px; letter-spacing:.2px; }
p{ margin:0; }
img{ max-width:100%; }
::selection{ background:var(--primary); color:#fff; }

/* =====================================================================
   BACKGROUND SLIDESHOW  (partials/background.php)
   ===================================================================== */
.bg-slider{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:#4A5568;
}
@keyframes driftGradient{
  0%{ background-position:0% 0%; }
  50%{ background-position:100% 100%; }
  100%{ background-position:0% 0%; }
}
.bg-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.2s ease;
}
.bg-layer.active{ opacity:1; }
.bg-overlay{ display:none; }

/* =====================================================================
   APP SHELL
   ===================================================================== */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w);
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:12px 0; gap:4px; z-index:100; transition:width .22s ease;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

.sidebar::-webkit-scrollbar{
  display:none;
}
.sidebar:hover{ width:max-content; max-width:var(--rail-w-open); align-items:stretch; }

.sidebar .logo-box, .sidebar .brand{
  display:flex; align-items:center; justify-content:center; gap:0; padding:0 0 8px; margin-bottom:2px;
  width:100%; white-space:nowrap;
  position:sticky;
  top:0;
  z-index:5;
  flex-shrink:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.sidebar .logo-box img.logo, .sidebar .brand img{ width:34px; height:34px; border-radius:8px; flex:none; object-fit:cover; }
.sidebar .logo-box h2, .sidebar .brand span{
  font-family:var(--font-display); font-weight:700; font-size:16px;
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap; margin:0 0 0 0;
  transition:max-width .2s ease, opacity .15s ease, margin-left .2s ease;
}
.sidebar:hover .logo-box, .sidebar:hover .brand{ justify-content:flex-start; padding:0 18px 20px; }
.sidebar:hover .logo-box h2, .sidebar:hover .brand span{ max-width:160px; opacity:1; margin-left:12px; }

/* Legacy sidebar links: plain <a> tags directly inside .sidebar */
.sidebar > a, .nav-link{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:calc(100% - 16px);
  padding:12px 0; margin:0 8px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-weight:600; font-size:14px; white-space:nowrap;
}
.nav-link .ic{ flex:none; }
.nav-link span.label{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap; margin-left:0;
  transition:max-width .2s ease, opacity .15s ease, margin-left .2s ease;
}
.sidebar:hover .nav-link{ justify-content:flex-start; width:auto; padding:12px 18px; }
.sidebar:hover .nav-link span.label{ max-width:160px; opacity:1; margin-left:14px; }

.sidebar > a:hover, .nav-link:hover{ background:var(--surface-2); color:#fff; }
.sidebar > a.active, .nav-link.active{ color:#fff; background:var(--surface-2); }
.nav-link.active::before{
  content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:4px; background:var(--primary);
  box-shadow:0 0 10px 2px rgba(91,110,245,0.7);
}

.main{ margin-left:var(--rail-w); flex:1; padding:28px clamp(16px,4vw,40px) 60px; width:100%; min-width:0; }

/* =====================================================================
   TOPBAR
   ===================================================================== */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.topbar h1{ font-size:clamp(20px,3vw,28px); } .topbar .sub{ color:var(--text-muted); font-size:14px; margin-top:2px; }
.user-chip{ display:flex; align-items:center; gap:10px; background:var(--surface); backdrop-filter:var(--blur); border:1px solid var(--border); padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; }
.user-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); }

/* Bare page titles (legacy pages use a plain <h1> at top of .main) */
.main > h1{ font-size:clamp(20px,3vw,26px); margin-bottom:20px; }

/* =====================================================================
   GLASS SURFACES  (cards, panels, forms, tables, boxes)
   ===================================================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-bottom:24px; }

.card, .panel, .glass-box, .profile-card, .today-box, .fee-box, .payment-box,
.filter-box, .table-container, .school-info-box, .receipt, .note{
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 22px; box-shadow:var(--shadow-card); margin-bottom:20px;
}
.card{ position:relative; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%); }
.card::after{ display:none; }

.dashboard-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:18px; margin-bottom:22px; }
.dashboard-cards .card{ text-align:center; }
.dashboard-cards .card h3{ font-family:var(--font-mono); font-size:30px; color:var(--primary); text-shadow:0 0 18px rgba(91,110,245,.4); }

.stat-card .label{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value{ font-family:var(--font-mono); font-size:32px; font-weight:600; margin-top:10px; color:#fff; }
.stat-card .foot{ font-size:12.5px; color:var(--text-faint); margin-top:6px; } .stat-card .foot.warn{ color:var(--accent-gold); }
.card-accent-primary{ border-color:var(--primary-dim); } .card-accent-primary .value{ color:var(--primary); text-shadow:0 0 18px rgba(91,110,245,.45); }

.split-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .split-row{ grid-template-columns:1fr; } }
.panel h2, .section-title h2{ font-size:16px; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.section-title{ background:transparent; backdrop-filter:none; border:none; box-shadow:none; padding:0; margin:26px 0 12px; border-left:4px solid var(--accent-gold); padding-left:12px; }

/* Profile card (teacher/student dashboard) */
.profile-card{ display:flex; justify-content:center; align-items:center; gap:20px; min-height:170px; flex-wrap:nowrap; }
.profile-img, .student-img{ width:130px; height:130px; max-width:130px; min-width:130px; border-radius:50%; object-fit:cover; border:3px solid var(--border-strong); flex-shrink:0; }

.no-photo{ width:130px; height:130px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-faint); text-align:center; flex-shrink:0; }
.profile-right h2{ margin-bottom:6px; } .profile-right p{ margin:3px 0; color:var(--text-muted); font-size:14px; }
.quote{ font-style:italic; color:var(--text-faint) !important; margin-top:8px !important; }

.profile-details{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:10px 24px;
  background:var(--surface); backdrop-filter:var(--blur); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:18px 22px; margin-bottom:22px; font-size:13.5px;
}
.profile-details div{ padding:4px 0; border-bottom:1px solid var(--border); }
.profile-details b{ color:var(--text-muted); font-weight:600; margin-right:6px; }

/* Auto-injected wrapper for any <table> not already inside .table-container (see footer.php) */
.auto-table-scroll{ overflow-x:auto; border-radius:var(--radius-md); margin-bottom:20px; }

/* Notices / activity */
.notice{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.notice:last-child{ border-bottom:none; }
.notice .tag{ flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--accent-gold); box-shadow:0 0 6px var(--accent-gold); }
.notice .title{ font-weight:600; font-size:14px; } .notice .meta{ font-size:12px; color:var(--text-faint); margin-top:2px; }
.activity-list{ list-style:none; margin:0; padding:0; }
.activity-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
.activity-list li:last-child{ border-bottom:none; }

.status-date{ float:right; font-size:12px; font-weight:600; color:var(--text-faint); font-family:var(--font-mono); }
.status-section{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.status-section:first-of-type{ margin-top:14px; padding-top:0; border-top:none; }
.status-heading{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:13.5px; margin-bottom:10px; }
.status-count{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); font-weight:600; }
.status-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.status-chip{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; }
.chip-green{ background:rgba(52,199,123,0.12); border-color:rgba(52,199,123,0.35); color:#7CE3AC; }
.chip-yellow{ background:rgba(242,169,59,0.12); border-color:rgba(242,169,59,0.35); color:var(--accent-gold); }
.chip-red{ background:rgba(255,107,107,0.12); border-color:rgba(255,107,107,0.35); color:var(--danger); }

.activity-list-rich li{ align-items:center; gap:12px; }
.activity-icon{ flex:none; font-size:18px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:8px; }
.activity-body{ flex:1; min-width:0; }
.activity-title{ font-weight:600; font-size:13.5px; color:var(--text); }
.activity-subtitle{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.activity-time{ flex:none; font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
.chart-box canvas{ max-height:260px; }

.today-box .hw-item{ padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; }
.today-box .hw-item:last-child{ border-bottom:none; }
.today-box .hw-item p{ color:var(--text-muted); font-size:12.5px; margin-top:2px; }

/* Quick actions */
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.action-btn{ display:flex; align-items:center; gap:8px; background:var(--surface); backdrop-filter:var(--blur); border:1px solid var(--border); padding:12px 18px; border-radius:999px; font-weight:600; font-size:13.5px; color:var(--text); transition:.15s ease; }
.action-btn:hover{ border-color:var(--primary); color:#fff; background:var(--surface-2); transform:translateY(-1px); }

/* =====================================================================
   FORMS
   ===================================================================== */
form{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
form.inline{ display:inline-flex; }
input, select, textarea{
  background:var(--surface-3); border:1px solid var(--border); color:var(--text);
  padding:11px 14px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:13.5px;
  outline:none; max-width:100%;
}
input::placeholder, textarea::placeholder{ color:var(--text-faint); }
textarea{ min-width:240px; min-height:70px; width:100%; }

/* ---- Premium dropdown/select redesign ---- */
select{
  min-width:140px; max-width:100%; background:#FFFFFF; color:#111111;
  border:1.5px solid var(--border); border-radius:12px; padding:11px 40px 11px 15px;
  font-weight:600; font-size:13.5px; box-shadow:0 2px 8px rgba(0,0,0,.12);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6EF5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
select option{ background:#FFFFFF; color:#111111; font-weight:500; padding:8px; }
select:hover{ border-color:rgba(91,110,245,.55); box-shadow:0 3px 12px rgba(91,110,245,.18); }
select:focus{ border-color:#5B6EF5; box-shadow:0 0 0 3px rgba(91,110,245,.22), 0 3px 12px rgba(91,110,245,.18); }
select:active{ transform:translateY(1px); }
select:disabled{ opacity:.55; cursor:not-allowed; }

input[type=file]{
  padding:9px 12px; width:100%; max-width:100%; box-sizing:border-box;
  border-radius:12px; font-size:12.5px; cursor:pointer;
}
input[type=date], input[type=time], input[type=datetime-local]{
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  color-scheme:light; /* keeps the native calendar-icon visible on dark surfaces */
}
label{ font-size:12.5px; color:var(--text-muted); width:100%; margin-bottom:-6px; }

@media (max-width:760px){
  input, select, textarea, button, form input[type=submit]{ max-width:100%; box-sizing:border-box; }
  input[type=file]{ font-size:11.5px; }
  select{ background-position:right 10px center; padding-right:34px; }
  .set-row, .elec-grid, .pp-form-row{ overflow:visible; }
  form{ max-width:100%; overflow-x:hidden; }
}

button, form button, .print-btn, form input[type=submit]{
  display:inline-flex; align-items:center; gap:6px; background:var(--primary); color:#fff; border:none;
  padding:11px 20px; border-radius:var(--radius-sm); font-weight:600; font-size:13.5px; cursor:pointer;
  font-family:var(--font-body); transition:.15s ease;
}
button:hover{ background:#4759e0; transform:translateY(-1px); }

/* Login / signup */
.login-container{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; position:relative; z-index:1; }
.login-container .logo{ width:80px; height:80px; border-radius:16px; object-fit:cover; margin-bottom:10px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.school-name{ font-family:var(--font-display); font-size:24px; margin-bottom:22px; }
.glass-box{ background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 30px; width:100%; max-width:380px; box-shadow:var(--shadow-card); }
.glass-box h3{ font-size:20px; margin-bottom:18px; }
.glass-box form{ flex-direction:column; }
.glass-box input{ width:100%; }
.glass-box button{ width:100%; justify-content:center; margin-top:6px; }
.glass-box .options{ display:flex; justify-content:flex-end; font-size:12.5px; color:var(--text-muted); cursor:pointer; margin-top:-4px; }
.glass-box p{ margin-top:16px; font-size:13px; color:var(--text-muted); }
.glass-box p a{ color:var(--primary); font-weight:600; }

/* =====================================================================
   TABLES
   ===================================================================== */
.table-container{width:100%;overflow-x:auto;overflow-y:hidden;padding:0;}
.table-container table, table{width:max-content;min-width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed;}
.table-container table{min-width:max-content;}
table th,table td{white-space:nowrap !important;word-break:keep-all !important;overflow-wrap:normal !important;word-wrap:normal !important;vertical-align:middle;}
th{ text-align:left; padding:13px 14px; background:var(--surface-2); color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; position:sticky; top:0; min-width:100px; white-space:nowrap; }
td{ padding:11px 14px; border-top:1px solid var(--border); min-width:100px; }
tr:hover td{ background:rgba(255,255,255,0.03); }

.view-btn, .edit-btn, .delete-btn, .clear-btn, .back-btn{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; margin-right:4px; cursor:pointer;
}
.view-btn{ background:rgba(91,110,245,0.18); color:#93A0FF; }
.edit-btn{ background:rgba(242,169,59,0.18); color:var(--accent-gold); }
.delete-btn, .clear-btn{ background:rgba(255,107,107,0.18); color:var(--danger); }
.back-btn{ background:var(--surface-2); color:var(--text); }

.pagination{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.pagination a{ background:var(--surface); border:1px solid var(--border); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; }
.pagination a:hover{ border-color:var(--primary); }

.alert{ background:rgba(52,199,123,0.15); border:1px solid rgba(52,199,123,0.4); color:#7CE3AC; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:14px; }

/* =====================================================================
   GALLERY (student dashboard)
   ===================================================================== */
.slider-container{ position:relative; width:100%; height:700px; border-radius:var(--radius-md); overflow:hidden; margin-bottom:20px; }
.slider-container .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.slider-container .slide.active{ opacity:1; }

.gallery-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.gallery-tabs button{ background:var(--surface); border:1px solid var(--border); color:var(--text-muted); }
.gallery-tabs button:hover{ color:#fff; border-color:var(--primary); }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }

.gallery-item{ width:100%; height:120px; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--border); transition:.2s ease; }
.gallery-item:hover{ transform:scale(1.03); border-color:var(--primary); }

.image-modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; justify-content:center; align-items:center; padding:40px; }

.image-modal img{ display:block; max-width:90vw; max-height:82vh; width:auto; height:auto; object-fit:contain; margin:auto; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.45); transform:translateY(35px); }

.close-btn,.nav-btn{ position:absolute; color:#fff; cursor:pointer; user-select:none; z-index:10000; }

.close-btn{ top:20px; right:30px; font-size:44px; }

.nav-btn{ top:50%; transform:translateY(-50%); width:60px; height:60px; display:flex; align-items:center; justify-content:center; font-size:36px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(12px); transition:.2s ease; }

.nav-btn:hover{ background:rgba(255,255,255,.25); }

.nav-btn.left{ left:25px; }

.nav-btn.right{ right:25px; }

/* =====================================================================
   FOOTER  — centered
   ===================================================================== */
.footer{
  position:fixed; left:calc(var(--rail-w) + 8px); right:0; bottom:0; z-index:90;
  text-align:center; padding:10px 16px;
  color:var(--text-faint); font-size:11.5px; line-height:1.5;
  text-shadow:0 1px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
  pointer-events:none;
}
.footer p{ margin:0 auto; max-width:520px; }
.footer br{ display:none; } /* keep it compact as a single slim bar */

/* Standalone pages (login/signup/edit forms) have no sidebar, so the footer spans full width */
.login-container ~ .footer, .standalone ~ .footer{ left:0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:760px){
  .sidebar{
    top:auto; bottom:0; left:0; right:0; width:100%; height:64px;
    flex-direction:row; justify-content:flex-start; align-items:center;
    padding:0 4px; border-right:none; border-top:1px solid var(--border);
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{ display:none; }
  .sidebar:hover{ width:100%; max-width:none; align-items:center; }
  .sidebar .logo-box, .sidebar .brand{ display:none; }
  .sidebar > a, .nav-link{
    flex:none; flex-direction:column; justify-content:center;
    flex:0 0 72px;width:72px;min-width:72px;max-width:72px;gap:2px;padding:8px 0;margin:0;font-size:9.5px;
  }
  .nav-link span.label{ max-width:none; opacity:1; margin-left:0; overflow:visible; white-space:nowrap; }
  .slider-container{ height:300px; }
  .image-modal{ padding:20px; }
  .image-modal img{ max-width:76vw; }
  .nav-btn{ width:46px; height:46px; font-size:26px; }
  .nav-btn.left{ left:10px; }
  .nav-btn.right{ right:10px; }
  .nav-link.active::before{ left:50%; top:2px; transform:translateX(-50%); width:22px; height:3px; }
  .main{ margin-left:0; padding:20px 16px 100px; }
  .split-row{ grid-template-columns:1fr; }
  .profile-card{ flex-direction:column; text-align:center; }
  .footer{ left:0; bottom:64px; }
}
@media (max-width:480px){
  .grid, .dashboard-cards{ grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
  .stat-card .value{ font-size:26px; }
  .login-container .logo{ width:64px; height:64px; }
  .glass-box{ padding:26px 20px; }
}

a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* Standalone centered forms (edit_fee, edit_marks, edit_homework, etc.) */
.standalone{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; z-index:1;
}
.standalone .glass-box{ max-width:420px; text-align:left; }
.standalone .glass-box form{ flex-direction:column; }
.standalone .glass-box input, .standalone .glass-box select, .standalone .glass-box textarea{ width:100%; }
.standalone .glass-box button{ width:100%; justify-content:center; margin-top:8px; }

.bg-overlay{
position:fixed;
inset:0;
z-index:-1;
background:rgba(0,0,0,.22);
pointer-events:none;
}
.sidebar{
border:1px solid rgba(255,255,255,.08);
box-shadow:0 10px 35px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.card,.panel,.profile-card{
box-shadow:0 10px 35px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
border-radius:18px;
}
.nav-link:hover{
transform:translateX(4px);
background:rgba(255,255,255,.08);
transition:.2s ease;
}


@media (max-width:760px){.sidebar{z-index:1000;overflow-x:auto!important;overflow-y:hidden!important;width:100vw;padding:0;}.nav-link:hover{transform:none!important;}.sidebar>a,.nav-link{pointer-events:auto;position:relative;z-index:1001;}.footer{pointer-events:none;z-index:10;}}


html,body{overscroll-behavior-y:contain;}


/* =====================================================================
   FINAL TABLE + SIGNUP DATE FIX
   ===================================================================== */

/* Desktop tables fill full container */
.table-container{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0;
}

.table-container table{
    width:100%;
    min-width:100%;
    border-collapse:collapse;
    table-layout:auto;
}

/* Generic table alignment */
table th,
table td{
    white-space:nowrap !important;
    vertical-align:middle;
}

/* Action column */
table td:last-child{
    min-width:160px;
}

table td:last-child a,
table td:last-child button,
table td:last-child .view-btn,
table td:last-child .edit-btn,
table td:last-child .delete-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin-right:6px;
    margin-bottom:0;
}

/* Signup / Login date field fix */
.glass-box form input[type="date"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:block;
    -webkit-appearance:none;
    appearance:none;
}

/* Mobile responsive tables */
@media (max-width:760px){

    .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .table-container table{
        width:max-content;
        min-width:100%;
    }

    table th,
    table td{
        white-space:nowrap !important;
    }

    /* Keep mobile bottom nav working */
    .sidebar{
        z-index:1000;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        width:100vw;
        padding:0;
    }

    .nav-link:hover{
        transform:none!important;
    }

    .sidebar>a,
    .nav-link{
        pointer-events:auto;
        position:relative;
        z-index:1001;
    }

    .footer{
        pointer-events:none;
        z-index:10;
    }
}

/* Prevent page overscroll */
html,body{
    overscroll-behavior-y:contain;
}



/* Refine date inputs */
input[type="date"],
.form-control[type="date"]{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
@media (min-width:761px){
  input[type="date"],.form-control[type="date"]{
    width:auto;
    min-width:160px;
    max-width:220px;
  }
}

/* =====================================================================
   PROFILE VIEW — modern colorful hero + printable layout
   (student_profile.php / teacher_profile.php)
   ===================================================================== */
.profile-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.profile-toolbar .toolbar-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.print-btn, .profile-toolbar .print-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#34C77B,#0EA5E9);
  color:#fff; border:none; padding:11px 20px; border-radius:999px;
  font-weight:700; font-size:13.5px; cursor:pointer; box-shadow:0 6px 18px rgba(14,165,233,.35);
  transition:.15s ease;
}
.print-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(14,165,233,.45); }

.profile-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:32px 28px; margin-bottom:22px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  background:
    radial-gradient(circle at 8% 15%, rgba(91,110,245,.55), transparent 45%),
    radial-gradient(circle at 92% 20%, rgba(242,169,59,.45), transparent 45%),
    radial-gradient(circle at 50% 120%, rgba(52,199,123,.4), transparent 50%),
    linear-gradient(135deg, rgba(91,110,245,.22), rgba(14,165,233,.16) 45%, rgba(242,169,59,.14));
  border:1px solid var(--border-strong);
  box-shadow:0 14px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.avatar-ring{
  flex:none; width:132px; height:132px; border-radius:50%; padding:4px;
  background:conic-gradient(from 180deg,#5B6EF5,#0EA5E9,#34C77B,#F2A93B,#FF6B6B,#5B6EF5);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.avatar-ring img, .avatar-ring .no-photo{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--surface-solid); background:var(--surface-2);
}
.avatar-ring .no-photo{ display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-faint); text-align:center; }

.hero-info{ flex:1; min-width:220px; }
.hero-info h1{ font-size:clamp(20px,3vw,28px); margin-bottom:8px; }
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* Action buttons (View Report / Print Profile) docked to the right side
   of the profile hero card, instead of a separate bar above it. */
.hero-actions{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  margin-left:auto; flex:none; align-self:center;
}
.hero-actions .view-btn, .hero-actions .print-btn{
  justify-content:center; white-space:nowrap; margin-right:0;
}
@media (max-width:680px){
  .hero-actions{ width:100%; margin-left:0; flex-direction:row; justify-content:center; }
}
.pill-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.2px; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.pill-1{ background:linear-gradient(135deg,#5B6EF5,#7C8CFF); }
.pill-2{ background:linear-gradient(135deg,#F2A93B,#F5C878); color:#3a2a06; }
.pill-3{ background:linear-gradient(135deg,#34C77B,#67E0A6); color:#063a20; }
.pill-4{ background:linear-gradient(135deg,#0EA5E9,#5ED0FF); color:#04283a; }
.pill-5{ background:linear-gradient(135deg,#FF6B6B,#FF9C9C); color:#3a0a0a; }

.info-chips{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px;
  margin-bottom:24px;
}
.info-chip{
  background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-left:4px solid var(--chip-color, var(--primary));
  border-radius:var(--radius-sm); padding:12px 16px; box-shadow:0 4px 14px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:4px;
}
.info-chip .chip-label{ display:flex; align-items:center; gap:6px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:700; }
.info-chip .chip-value{ font-size:14.5px; font-weight:600; color:var(--text); word-break:break-word; }

.info-chip:nth-of-type(7n+1){ --chip-color:#5B6EF5; }
.info-chip:nth-of-type(7n+2){ --chip-color:#F2A93B; }
.info-chip:nth-of-type(7n+3){ --chip-color:#34C77B; }
.info-chip:nth-of-type(7n+4){ --chip-color:#0EA5E9; }
.info-chip:nth-of-type(7n+5){ --chip-color:#FF6B6B; }
.info-chip:nth-of-type(7n+6){ --chip-color:#B57BFF; }
.info-chip:nth-of-type(7n+7){ --chip-color:#3BC9DB; }

.section-title-colorful{
  display:flex; align-items:center; gap:10px; margin:26px 0 14px; font-size:17px; font-weight:700;
}
.section-title-colorful .dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#5B6EF5,#34C77B); box-shadow:0 0 10px rgba(91,110,245,.7); }

/* Print sheet: hidden on screen, shown only when printing */
.print-sheet{ display:none; }

/* Print-only footer note + signature block for profile printouts.
   Hidden on screen; only rendered inside @media print below. */
.print-note{ display:none; }

@media print{
  @page{ margin:14mm; }
  body{ background:#fff !important; }
  .bg-slider, .bg-overlay, .sidebar, .footer, .profile-toolbar, .back-btn,
  .print-btn, .view-btn, .edit-btn, .delete-btn, .clear-btn, .action-btn,
  .hero-actions,
  table td:last-child, table th:last-child{ display:none !important; }
  .main{ margin-left:0 !important; padding:0 !important; }
  .app-shell{ display:block !important; }
  .profile-hero{
    background:#fff !important; color:#0b1222 !important; box-shadow:none !important;
    border:1px solid #ccc !important; break-inside:avoid;
  }
  .profile-hero *{ color:#0b1222 !important; text-shadow:none !important; }
  .avatar-ring{ box-shadow:none !important; }
  .info-chip{
    background:#fff !important; color:#0b1222 !important; box-shadow:none !important;
    border:1px solid #ddd !important; border-left:4px solid var(--chip-color,#5B6EF5) !important;
    break-inside:avoid;
  }
  .info-chip .chip-value, .info-chip .chip-label{ color:#0b1222 !important; }
  .section-title-colorful{ color:#0b1222 !important; }
  .table-container, table{ box-shadow:none !important; background:#fff !important; }
  th, td{ color:#0b1222 !important; background:#fff !important; border-color:#ddd !important; }
  h1,h2,h3{ color:#0b1222 !important; }

  .print-note{
    display:block !important; margin-top:30px; padding:16px 18px;
    border:1px dashed #999; border-radius:8px; background:#fff !important;
    color:#0b1222 !important; font-size:12px; line-height:1.6; break-inside:avoid;
  }
  .print-note .print-note-title{
    font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.4px;
    margin-bottom:6px; color:#0b1222 !important;
  }
  .print-note p{ margin:0 0 4px; color:#0b1222 !important; }
  .print-note .print-meta{ margin-top:8px; font-size:11px; color:#555 !important; text-align:right; }
  .print-signatures{ display:flex; justify-content:space-between; gap:20px; margin-top:44px; }
  .print-signatures .sign-block{ text-align:center; font-size:12px; color:#0b1222 !important; flex:1; }
  .print-signatures .sign-line{
    border-top:1px solid #333; margin-top:40px; padding-top:6px; font-weight:600;
  }
}

/* =====================================================================
   SITE-WIDE "COLORFUL MODE" — applies the same modern, colorful language
   used on the profile pages to every screen that shares this stylesheet
   (dashboards, lists, forms, login/signup, receipts, id cards list, etc).
   Pure CSS layer — safe to load on top of everything above.
   ===================================================================== */
:root{
  --c1:#5B6EF5; /* indigo   */
  --c2:#F2A93B; /* gold     */
  --c3:#34C77B; /* green    */
  --c4:#0EA5E9; /* sky      */
  --c5:#FF6B6B; /* coral    */
  --c6:#B57BFF; /* violet   */
  --c7:#3BC9DB; /* teal     */
}

/* ---- Headings get a small gradient accent bar automatically ---- */
.main > h1{
  position:relative; padding-left:16px;
}
.main > h1::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:5px; border-radius:4px;
  background:linear-gradient(180deg,var(--c1),var(--c4),var(--c3));
  box-shadow:0 0 10px rgba(91,110,245,.6);
}
.panel h2, .card h3{ position:relative; }

/* ---- Top bar (index.php) ---- */
.topbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.topbar .sub{ color:var(--text-muted); font-size:13.5px; margin-top:4px; }
.user-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:linear-gradient(135deg, rgba(52,199,123,.18), rgba(14,165,233,.14));
  border:1px solid rgba(52,199,123,.35); font-size:12.5px; font-weight:700; color:#9CF0C4;
}
.user-chip .dot{ width:8px; height:8px; border-radius:50%; background:#34C77B; box-shadow:0 0 8px #34C77B; }

/* ---------- Stat / dashboard cards: solid colourful fill, not just a hint ---------- */
.grid .card, .dashboard-cards .card{
  position:relative; overflow:hidden; border:1px solid transparent; border-top:3px solid transparent;
}
.grid .card::before, .dashboard-cards .card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--c1),var(--c4));
}
.grid .card:nth-of-type(4n+1), .dashboard-cards .card:nth-of-type(4n+1){
  background:linear-gradient(160deg, rgba(91,110,245,.30), rgba(91,110,245,.05) 60%), var(--surface);
  border-color:rgba(91,110,245,.45) !important;
}
.grid .card:nth-of-type(4n+1)::before, .dashboard-cards .card:nth-of-type(4n+1)::before{ background:linear-gradient(90deg,var(--c1),var(--c4)); }
.grid .card:nth-of-type(4n+2), .dashboard-cards .card:nth-of-type(4n+2){
  background:linear-gradient(160deg, rgba(242,169,59,.30), rgba(242,169,59,.05) 60%), var(--surface);
  border-color:rgba(242,169,59,.45) !important;
}
.grid .card:nth-of-type(4n+2)::before, .dashboard-cards .card:nth-of-type(4n+2)::before{ background:linear-gradient(90deg,var(--c2),#F5C878); }
.grid .card:nth-of-type(4n+3), .dashboard-cards .card:nth-of-type(4n+3){
  background:linear-gradient(160deg, rgba(52,199,123,.30), rgba(52,199,123,.05) 60%), var(--surface);
  border-color:rgba(52,199,123,.45) !important;
}
.grid .card:nth-of-type(4n+3)::before, .dashboard-cards .card:nth-of-type(4n+3)::before{ background:linear-gradient(90deg,var(--c3),#67E0A6); }
.grid .card:nth-of-type(4n+4), .dashboard-cards .card:nth-of-type(4n+4){
  background:linear-gradient(160deg, rgba(255,107,107,.30), rgba(255,107,107,.05) 60%), var(--surface);
  border-color:rgba(255,107,107,.45) !important;
}
.grid .card:nth-of-type(4n+4)::before, .dashboard-cards .card:nth-of-type(4n+4)::before{ background:linear-gradient(90deg,var(--c5),#FF9C9C); }
.grid .card:hover, .dashboard-cards .card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.4); transition:.18s ease; }

.stat-card .value{ background:linear-gradient(135deg,#fff,#B9C2FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dashboard-cards .card h3{ background:linear-gradient(135deg,var(--c1),var(--c4)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }

/* ---- Quick action pills: colorful gradients, rotating ---- */
.actions .action-btn:nth-of-type(5n+1){ background:linear-gradient(135deg,var(--c1),#7C8CFF); border-color:transparent; color:#fff; }
.actions .action-btn:nth-of-type(5n+2){ background:linear-gradient(135deg,var(--c2),#F5C878); border-color:transparent; color:#3a2a06; }
.actions .action-btn:nth-of-type(5n+3){ background:linear-gradient(135deg,var(--c3),#67E0A6); border-color:transparent; color:#063a20; }
.actions .action-btn:nth-of-type(5n+4){ background:linear-gradient(135deg,var(--c4),#5ED0FF); border-color:transparent; color:#04283a; }
.actions .action-btn:nth-of-type(5n+5){ background:linear-gradient(135deg,var(--c5),#FF9C9C); border-color:transparent; color:#3a0a0a; }
.actions .action-btn{ box-shadow:0 6px 16px rgba(0,0,0,.3); font-weight:700; }
.actions .action-btn:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.08); }

/* ---- Buttons everywhere: friendlier gradient instead of flat fill ---- */
button, form button, form input[type=submit]{
  background:linear-gradient(135deg,var(--c1),#7C8CFF);
  box-shadow:0 6px 16px rgba(91,110,245,.35);
}
button:hover, form button:hover, form input[type=submit]:hover{
  background:linear-gradient(135deg,#4759e0,var(--c1)); box-shadow:0 8px 20px rgba(91,110,245,.45);
}

/* ---- Table headers: gradient strip instead of flat surface ---- */
th{
  background:linear-gradient(90deg, rgba(91,110,245,.22), rgba(14,165,233,.14));
  color:#DCE1FF; border-bottom:1px solid rgba(91,110,245,.35);
}
.table-container table tr:hover td{ background:rgba(91,110,245,.06); }

/* ---- Row action pills: bolder colorful chips ---- */
.view-btn, .edit-btn, .delete-btn, .clear-btn{
  border:1px solid transparent; font-weight:800; letter-spacing:.2px;
  transition:.15s ease; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.view-btn{ background:linear-gradient(135deg, rgba(91,110,245,.28), rgba(14,165,233,.2)); color:#B7C2FF; }
.edit-btn{ background:linear-gradient(135deg, rgba(242,169,59,.3), rgba(245,200,120,.2)); color:#FFD394; }
.delete-btn, .clear-btn{ background:linear-gradient(135deg, rgba(255,107,107,.3), rgba(255,156,156,.2)); color:#FFB0B0; }
.view-btn:hover, .edit-btn:hover, .delete-btn:hover, .clear-btn:hover{ transform:translateY(-1px); filter:brightness(1.15); }

/* ---- Notices: colorful rotating left accent ---- */
.notice{ position:relative; padding-left:14px; }
.notice .tag{ box-shadow:0 0 8px currentColor; }
.notice:nth-of-type(5n+1) .tag{ background:var(--c1); }
.notice:nth-of-type(5n+2) .tag{ background:var(--c2); }
.notice:nth-of-type(5n+3) .tag{ background:var(--c3); }
.notice:nth-of-type(5n+4) .tag{ background:var(--c4); }
.notice:nth-of-type(5n+5) .tag{ background:var(--c5); }

/* ---- Section title accent bar: extra colour ---- */
.section-title{ border-left-color:var(--c2); }

/* ---- Login / Signup: colorful glow + gradient ring on logo ---- */
body:has(.login-container) html, .login-container{ position:relative; }
.login-container .logo{
  padding:4px; background:conic-gradient(from 180deg,var(--c1),var(--c4),var(--c3),var(--c2),var(--c5),var(--c1));
}
.glass-box{
  position:relative;
  box-shadow:var(--shadow-card), 0 0 0 1px rgba(91,110,245,.15), 0 0 60px rgba(91,110,245,.12);
}
.glass-box::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(135deg,var(--c1),var(--c4),var(--c3),var(--c2));
  opacity:.35;
}
.glass-box h3{
  background:linear-gradient(135deg,#fff,#B9C2FF); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Sidebar: colorful icon glow on hover/active ---- */
.nav-link.active .ic, .sidebar > a.active .ic{ filter:drop-shadow(0 0 6px rgba(91,110,245,.9)); color:#8DA0FF; }
.nav-link:hover .ic{ color:var(--c4); }

/* ---- Sidebar v2: each item gets its own accent colour (always on, not
   just hover/active) so the rail reads as lively rather than a flat grey
   list. Icon sits inside a soft rounded chip; hover/active brighten and
   glow it using that same colour instead of switching to a fixed blue. ---- */
.sidebar a.nav-link{ gap:0; }
.sidebar a.nav-link .ic{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:11px; flex:none;
  background:rgba(255,255,255,.05); transition:.18s ease;
}
.sidebar:hover a.nav-link .ic{ margin-right:2px; }

.sidebar a.nav-link:nth-of-type(7n+1) .ic{ color:var(--c1); }
.sidebar a.nav-link:nth-of-type(7n+2) .ic{ color:var(--c2); }
.sidebar a.nav-link:nth-of-type(7n+3) .ic{ color:var(--c3); }
.sidebar a.nav-link:nth-of-type(7n+4) .ic{ color:var(--c4); }
.sidebar a.nav-link:nth-of-type(7n+5) .ic{ color:var(--c5); }
.sidebar a.nav-link:nth-of-type(7n+6) .ic{ color:var(--c6); }
.sidebar a.nav-link:nth-of-type(7n+7) .ic{ color:var(--c7); }
.sidebar a.nav-link[href="logout.php"] .ic{ color:var(--c5); }

/* Notices icon: pinned explicitly (not just via :nth-of-type position) so it
   always gets the exact same chip background / hover-scale / active-glow
   treatment as every other sidebar icon, regardless of where it falls in
   the list on a given dashboard. */
.sidebar a.nav-link[href="notices.php"] .ic{ color:var(--c2); }
.sidebar a.nav-link[href="notices.php"]:hover .ic{
  background:rgba(255,255,255,.12);
  filter:brightness(1.35) drop-shadow(0 0 6px currentColor);
  transform:scale(1.06);
}
.sidebar a.nav-link[href="notices.php"].active .ic{
  background:rgba(255,255,255,.14);
  filter:brightness(1.5) drop-shadow(0 0 9px currentColor);
}

.sidebar a.nav-link:hover .ic{
  background:rgba(255,255,255,.12);
  filter:brightness(1.35) drop-shadow(0 0 6px currentColor);
  transform:scale(1.06);
}
.sidebar a.nav-link.active{
  background:linear-gradient(90deg, rgba(91,110,245,.20), rgba(14,165,233,.05), transparent);
}
.sidebar a.nav-link.active .ic{
  background:rgba(255,255,255,.14);
  filter:brightness(1.5) drop-shadow(0 0 9px currentColor);
}
.sidebar a.nav-link.active span.label{ color:#fff; font-weight:700; }
.nav-link.active::before{
  background:linear-gradient(180deg,var(--c1),var(--c4),var(--c3));
  box-shadow:0 0 10px 2px rgba(91,110,245,.7);
}

/* Subtle divider + "always glowing" brand mark so the rail doesn't read flat */
.sidebar .brand{ position:relative; }
.sidebar .brand::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.sidebar:hover .brand::after{ left:18px; right:18px; }

/* ---- Fee / payment / receipt boxes: colorful accent ---- */
.fee-box, .payment-box, .receipt{ border-left:4px solid var(--c3); }
.school-info-box{ border-left:4px solid var(--c4); }

/* ---- Status chips already colorful; give them a touch more glow ---- */
.status-chip{ box-shadow:0 2px 8px rgba(0,0,0,.2); }

@media print{
  .grid .card::before, .dashboard-cards .card::before,
  .actions .action-btn, .user-chip, .glass-box::before{ display:none !important; }
}

/* =====================================================================
   COLORFUL MODE v2 — stronger, container-level treatment.
   Every panel/card/box/table/form on every page gets a visible colour
   identity (tinted glass background + coloured edge + glow), not just a
   thin accent line. This is intentionally strong so it reads instantly.
   ===================================================================== */

/* ---------- Panels (blue/indigo family) ---------- */
.panel{
  background:
    radial-gradient(circle at 100% 0%, rgba(91,110,245,.16), transparent 55%),
    var(--surface);
  border:1px solid rgba(91,110,245,.28);
  border-left:5px solid var(--c1);
  box-shadow:0 10px 28px rgba(91,110,245,.12), var(--shadow-card);
}
.panel h2{ display:flex; align-items:center; gap:8px; }
.panel h2::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:radial-gradient(circle, #fff, var(--c1)); box-shadow:0 0 8px var(--c1);
}

/* ---------- Generic cards outside the dashboard grid (indigo->coral) ---------- */
.card{
  background:
    radial-gradient(circle at 0% 0%, rgba(181,123,255,.14), transparent 55%),
    var(--surface);
  border:1px solid rgba(181,123,255,.25);
}

/* ---------- Table containers (teal family) ---------- */
.table-container, .auto-table-scroll{
  background:
    radial-gradient(circle at 100% 0%, rgba(59,201,219,.14), transparent 55%),
    var(--surface);
  border:1px solid rgba(59,201,219,.3);
  border-top:4px solid var(--c7);
}
.table-container table tr:nth-child(even) td, .auto-table-scroll table tr:nth-child(even) td{
  background:rgba(59,201,219,.045);
}

/* ---------- Forms / filter boxes (gold family) ---------- */
.filter-box{
  background:radial-gradient(circle at 0% 0%, rgba(242,169,59,.16), transparent 55%), var(--surface);
  border:1px solid rgba(242,169,59,.3); border-left:5px solid var(--c2);
}
form{
  background:
    radial-gradient(circle at 0% 100%, rgba(242,169,59,.08), transparent 60%),
    var(--surface);
  border:1px solid var(--border); border-left:5px solid var(--c2);
  border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-card);
}
form.inline{ background:none; border:none; padding:0; box-shadow:none; }
/* Forms already living inside a coloured container (panel/card/glass-box/etc)
   shouldn't get a second nested box — just keep the layout, drop the box look. */
.panel form, .card form, .filter-box form, .table-container form,
.glass-box form, .fee-box form, .payment-box form, .today-box form{
  background:none; border:none; border-left:none; padding:0; box-shadow:none; border-radius:0;
}

/* ---------- Fee / payment (green family) ---------- */
.fee-box, .payment-box{
  background:radial-gradient(circle at 100% 100%, rgba(52,199,123,.16), transparent 55%), var(--surface);
  border:1px solid rgba(52,199,123,.3); border-left:5px solid var(--c3);
}

/* ---------- Receipts / notes (sky family) ---------- */
.receipt, .note, .today-box{
  background:radial-gradient(circle at 0% 0%, rgba(14,165,233,.14), transparent 55%), var(--surface);
  border:1px solid rgba(14,165,233,.28); border-left:5px solid var(--c4);
}

/* ---------- School info box (coral family) ---------- */
.school-info-box{
  background:radial-gradient(circle at 100% 0%, rgba(255,107,107,.14), transparent 55%), var(--surface);
  border:1px solid rgba(255,107,107,.28); border-left:5px solid var(--c5);
}

/* ---------- Profile details grid (violet family) ---------- */
.profile-details{
  background:radial-gradient(circle at 50% 0%, rgba(181,123,255,.12), transparent 60%), var(--surface);
  border:1px solid rgba(181,123,255,.25);
}

/* ---------- Inputs: colourful focus + accent-color ---------- */
input, select, textarea{ border:1px solid var(--border); transition:.15s ease; }
input:focus, select:focus, textarea:focus{
  border-color:var(--c1); box-shadow:0 0 0 3px rgba(91,110,245,.25); outline:none;
}
input[type=checkbox], input[type=radio]{ accent-color:var(--c3); width:auto; }
input[type=file]{ border-left:4px solid var(--c2); }

/* ---------- Alerts: colourful glow ---------- */
.alert{ box-shadow:0 6px 18px rgba(52,199,123,.18); border-left:5px solid var(--c3); }

/* ---------- Section titles: chip background instead of plain text ---------- */
.section-title{
  background:linear-gradient(90deg, rgba(242,169,59,.12), transparent) !important;
  backdrop-filter:none !important; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:8px 12px !important;
}

/* ---------- Sidebar brand glow ---------- */
.sidebar .brand img, .sidebar .logo-box img{
  box-shadow:0 0 0 2px rgba(91,110,245,.4), 0 0 16px rgba(91,110,245,.35);
}

/* ---------- Scrollbars: colourful ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--c1),var(--c4)); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Pagination: colourful ---------- */
.pagination a{ border-left:3px solid var(--c1); }
.pagination a:hover{ background:rgba(91,110,245,.12); }

/* ---------- Standalone centered forms (edit pages) keep the coloured card style ---------- */
.standalone .glass-box{ border-left:none; }

@media print{
  .panel, .card, .table-container, .filter-box, .fee-box, .payment-box,
  .receipt, .note, .today-box, .school-info-box, form{
    background:#fff !important; box-shadow:none !important; border-color:#ddd !important;
  }
}

/* =====================================================================
   MODERN MOTION LAYER — smooth, spring-y, staggered animations added on
   top of everything above. Pure CSS, no markup/JS changes required.
   Every rule here either raises specificity naturally (later in cascade,
   same selector) or targets elements already present in the DOM, so it
   layers safely over the theme without breaking existing styles.
   ===================================================================== */

:root{
  --ease-smooth:  cubic-bezier(.22,1,.36,1);   /* soft "premium" deceleration   */
  --ease-spring:  cubic-bezier(.34,1.56,.64,1); /* slight overshoot / bounce     */
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --ease-in-out:  cubic-bezier(.65,0,.35,1);
  --dur-fast:     .18s;
  --dur-base:     .35s;
  --dur-slow:     .6s;
}

/* Cross-document view transitions (Chromium/Edge/Opera): smooth crossfade
   + gentle slide when navigating from page to page across this multi-page
   app, with zero JS. Ignored gracefully by browsers that don't support it. */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut var(--dur-base) var(--ease-in-out) both; }
::view-transition-new(root){ animation:vtIn var(--dur-slow) var(--ease-smooth) both; }
@keyframes vtOut{ to{ opacity:0; transform:scale(.98); } }
@keyframes vtIn{ from{ opacity:0; transform:scale(1.01) translateY(6px); } }

/* ---------------------------------------------------------------------
   Keyframes library
   --------------------------------------------------------------------- */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeInLeft{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeInScale{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:none; }
}
@keyframes softPulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(91,110,245,.45); }
  50%{ box-shadow:0 0 0 6px rgba(91,110,245,0); }
}
@keyframes shimmer{
  0%{ background-position:-400px 0; }
  100%{ background-position:400px 0; }
}
@keyframes spinSmooth{ to{ transform:rotate(360deg); } }
@keyframes bgKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.06) translate(-1%,-1%); }
}

/* ---------------------------------------------------------------------
   Background slideshow — smoother crossfade + slow Ken Burns drift so the
   photo layer feels alive instead of a hard cut.
   --------------------------------------------------------------------- */
.bg-layer{
  transition:opacity 2.6s var(--ease-in-out);
  animation:bgKenBurns 18s var(--ease-in-out) infinite alternate;
  will-change:opacity, transform;
}

/* ---------------------------------------------------------------------
   App shell entrance — content settles in on load instead of popping in.
   --------------------------------------------------------------------- */
.main{ animation:fadeInUp var(--dur-slow) var(--ease-smooth); }
.topbar{ animation:fadeInUp var(--dur-base) var(--ease-smooth); }
.sidebar{
  transition:width .32s var(--ease-smooth);
  animation:fadeInLeft var(--dur-base) var(--ease-out);
}

/* Sidebar label reveal: slightly springy instead of linear */
.sidebar .logo-box h2, .sidebar .brand span,
.nav-link span.label{
  transition:max-width .28s var(--ease-smooth), opacity .22s var(--ease-smooth) .04s, margin-left .28s var(--ease-smooth);
}
.nav-link{
  transition:background .22s var(--ease-smooth), color .22s var(--ease-smooth),
             width .28s var(--ease-smooth), padding .28s var(--ease-smooth), transform .22s var(--ease-spring);
}
.nav-link:hover{ transform:translateX(5px); }
.nav-link.active{ animation:softPulseGlow 2.6s var(--ease-in-out) infinite; }
.nav-link .ic{ transition:background .22s var(--ease-smooth), transform .3s var(--ease-spring), filter .22s var(--ease-smooth); }

/* Stagger the nav items in on first paint */
.sidebar > a, .nav-link{ animation:fadeInLeft .5s var(--ease-out) backwards; }
.sidebar > a:nth-of-type(1),  .nav-link:nth-of-type(1) { animation-delay:.02s; }
.sidebar > a:nth-of-type(2),  .nav-link:nth-of-type(2) { animation-delay:.06s; }
.sidebar > a:nth-of-type(3),  .nav-link:nth-of-type(3) { animation-delay:.10s; }
.sidebar > a:nth-of-type(4),  .nav-link:nth-of-type(4) { animation-delay:.14s; }
.sidebar > a:nth-of-type(5),  .nav-link:nth-of-type(5) { animation-delay:.18s; }
.sidebar > a:nth-of-type(6),  .nav-link:nth-of-type(6) { animation-delay:.22s; }
.sidebar > a:nth-of-type(7),  .nav-link:nth-of-type(7) { animation-delay:.26s; }
.sidebar > a:nth-of-type(8),  .nav-link:nth-of-type(8) { animation-delay:.30s; }
.sidebar > a:nth-of-type(n+9),.nav-link:nth-of-type(n+9){ animation-delay:.34s; }

/* ---------------------------------------------------------------------
   Cards, panels, glass surfaces — enter with a gentle rise + settle,
   staggered across a grid, and get a smoother, springier hover lift.
   --------------------------------------------------------------------- */
.card, .panel, .glass-box, .profile-card, .today-box, .fee-box, .payment-box,
.filter-box, .table-container, .school-info-box, .receipt, .note, .info-chip,
.profile-details, .profile-hero{
  animation:fadeInUp var(--dur-slow) var(--ease-smooth) backwards;
  transition:transform .38s var(--ease-spring), box-shadow .38s var(--ease-smooth),
             border-color .3s var(--ease-smooth), background .3s var(--ease-smooth);
}
.grid > *:nth-child(1), .dashboard-cards > *:nth-child(1), .info-chips > *:nth-child(1){ animation-delay:.03s; }
.grid > *:nth-child(2), .dashboard-cards > *:nth-child(2), .info-chips > *:nth-child(2){ animation-delay:.08s; }
.grid > *:nth-child(3), .dashboard-cards > *:nth-child(3), .info-chips > *:nth-child(3){ animation-delay:.13s; }
.grid > *:nth-child(4), .dashboard-cards > *:nth-child(4), .info-chips > *:nth-child(4){ animation-delay:.18s; }
.grid > *:nth-child(5), .dashboard-cards > *:nth-child(5), .info-chips > *:nth-child(5){ animation-delay:.23s; }
.grid > *:nth-child(n+6), .dashboard-cards > *:nth-child(n+6), .info-chips > *:nth-child(n+6){ animation-delay:.28s; }

.card:hover, .panel:hover, .info-chip:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:0 20px 45px rgba(0,0,0,.4);
}
.grid .card:hover, .dashboard-cards .card:hover{
  transform:translateY(-6px) scale(1.015);
  transition:transform .38s var(--ease-spring), box-shadow .3s var(--ease-smooth);
}
.gallery-item{ transition:transform .35s var(--ease-spring), border-color .25s var(--ease-smooth), box-shadow .3s var(--ease-smooth); }
.gallery-item:hover{ transform:scale(1.05) translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }

/* ---------------------------------------------------------------------
   Buttons — smoother press/lift + a soft radial "shine" that sweeps on
   hover, all pure CSS.
   --------------------------------------------------------------------- */
button, form button, .print-btn, form input[type=submit], .action-btn{
  position:relative; overflow:hidden;
  transition:transform .28s var(--ease-spring), box-shadow .3s var(--ease-smooth),
             background .3s var(--ease-smooth), filter .25s var(--ease-smooth);
}
button::after, form button::after, .print-btn::after, form input[type=submit]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease-smooth);
}
button:hover::after, form button:hover::after, .print-btn:hover::after, form input[type=submit]:hover::after{ opacity:1; }
button:hover, form button:hover, .print-btn:hover, form input[type=submit]:hover{ transform:translateY(-2px); }
button:active, form button:active, .print-btn:active, form input[type=submit]:active{
  transform:translateY(0) scale(.97);
  transition:transform .12s var(--ease-out);
}
.action-btn:hover{ transform:translateY(-3px) scale(1.03); }
.action-btn:active{ transform:translateY(-1px) scale(.98); }

/* ---------------------------------------------------------------------
   Inputs — smoother focus ring grow instead of a snap.
   --------------------------------------------------------------------- */
input, select, textarea{
  transition:border-color .28s var(--ease-smooth), box-shadow .32s var(--ease-spring), transform .2s var(--ease-smooth);
}
input:focus, select:focus, textarea:focus{ transform:translateY(-1px); }

/* ---------------------------------------------------------------------
   Tables — rows glide in, hover feels like a soft highlight sweep.
   --------------------------------------------------------------------- */
.table-container table tr, table tr{
  transition:background .25s var(--ease-smooth);
}
tbody tr{ animation:fadeInUp .45s var(--ease-out) backwards; }
tbody tr:nth-child(n+1){ animation-delay:calc(.02s * var(--row-i, 1)); }
tbody tr:nth-child(1){ animation-delay:.02s; } tbody tr:nth-child(2){ animation-delay:.05s; }
tbody tr:nth-child(3){ animation-delay:.08s; } tbody tr:nth-child(4){ animation-delay:.11s; }
tbody tr:nth-child(5){ animation-delay:.14s; } tbody tr:nth-child(6){ animation-delay:.17s; }
tbody tr:nth-child(n+7){ animation-delay:.2s; }
.view-btn, .edit-btn, .delete-btn, .clear-btn, .back-btn{
  transition:transform .25s var(--ease-spring), filter .22s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.view-btn:hover, .edit-btn:hover, .delete-btn:hover, .clear-btn:hover, .back-btn:hover{
  transform:translateY(-2px) scale(1.05);
}
.pagination a{ transition:transform .25s var(--ease-spring), border-color .25s var(--ease-smooth), background .25s var(--ease-smooth); }
.pagination a:hover{ transform:translateY(-2px); }

/* ---------------------------------------------------------------------
   Gallery lightbox — smoother open/scale instead of a hard toggle.
   --------------------------------------------------------------------- */
.image-modal{
  animation:fadeInScale .32s var(--ease-out);
}
.image-modal img{ transition:transform .4s var(--ease-spring); }
.close-btn, .nav-btn{ transition:transform .25s var(--ease-spring), opacity .2s var(--ease-smooth); }
.close-btn:hover{ transform:rotate(90deg) scale(1.1); }
.nav-btn:hover{ transform:scale(1.15); }

/* ---------------------------------------------------------------------
   Avatar ring / hero — slow ambient rotation for a "living" feel.
   --------------------------------------------------------------------- */
.avatar-ring{
  animation:spinSmooth 10s linear infinite;
}
.avatar-ring img, .avatar-ring .no-photo{ animation:none; } /* keep photo upright */
.profile-hero{ background-size:200% 200%; animation:fadeInScale var(--dur-slow) var(--ease-smooth); }

/* ---------------------------------------------------------------------
   Status chips / pills / badges — soft pop-in + hover lift.
   --------------------------------------------------------------------- */
.status-chip, .pill-badge, .chip-green, .chip-yellow, .chip-red{
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth);
  animation:fadeInScale .35s var(--ease-out);
}
.status-chip:hover, .pill-badge:hover{ transform:translateY(-2px) scale(1.06); }

/* ---------------------------------------------------------------------
   Links inside content / notices / activity list — subtle slide-in.
   --------------------------------------------------------------------- */
.notice, .activity-list li, .activity-list-rich li{
  transition:transform .25s var(--ease-smooth), background .25s var(--ease-smooth);
}
.notice:hover, .activity-list li:hover, .activity-list-rich li:hover{ transform:translateX(4px); }

/* ---------------------------------------------------------------------
   Utility: shimmer skeleton (add class="skeleton" to any placeholder
   element while data loads, e.g. before charts/images finish loading).
   --------------------------------------------------------------------- */
.skeleton{
  background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
  background-size:800px 100%;
  animation:shimmer 1.6s linear infinite;
  border-radius:var(--radius-sm);
  color:transparent !important;
}

/* Respect the OS "reduce motion" preference — already enforced globally
   above, restated here so this whole layer is covered even if it moves. */
@media (prefers-reduced-motion: reduce){
  .bg-layer, .main, .topbar, .sidebar, .sidebar > a, .nav-link,
  .card, .panel, .glass-box, .profile-card, .today-box, .fee-box, .payment-box,
  .filter-box, .table-container, .school-info-box, .receipt, .note, .info-chip,
  .profile-details, .profile-hero, tbody tr, .status-chip, .pill-badge,
  .avatar-ring, .image-modal, .nav-link.active{
    animation:none !important;
  }
}

/* =====================================================================
   PLAYFUL HOVER MOTION — "dancing" micro-interactions layer.
   Everything here is scoped to :hover (or :focus-visible / :active) so
   it only ever runs while the user is actively interacting, and always
   reverts to fill-mode:none the instant the interaction ends — meaning
   it can never leave a lingering transform on an ancestor (the exact
   bug class we fixed above). Safe to layer on top of everything else.
   ===================================================================== */

@keyframes wiggle{
  0%,100%{ transform:rotate(0deg) scale(1); }
  20%{ transform:rotate(-9deg) scale(1.05); }
  40%{ transform:rotate(8deg) scale(1.05); }
  60%{ transform:rotate(-6deg) scale(1.03); }
  80%{ transform:rotate(4deg) scale(1.02); }
}
@keyframes bobDance{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-5px) rotate(-3deg); }
  50%{ transform:translateY(0) rotate(0deg); }
  75%{ transform:translateY(-3px) rotate(3deg); }
}
@keyframes jelly{
  0%,100%{ transform:scale(1,1); }
  30%{ transform:scale(1.12,.88); }
  50%{ transform:scale(.92,1.1); }
  70%{ transform:scale(1.06,.96); }
}
@keyframes nudgeSide{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-4px); }
}
@keyframes tiltPop{
  0%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.08) rotate(-2deg); }
  100%{ transform:scale(1.05) rotate(1.5deg); }
}
@keyframes popIn{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  70%{ transform:scale(.94); }
  100%{ transform:scale(1.06); }
}

/* ---- Sidebar nav icons: little wiggle-dance on hover ---- */
.nav-link:hover .ic{
  animation:wiggle .6s var(--ease-out);
}
.sidebar .brand img, .sidebar .logo-box img{
  transition:transform .3s var(--ease-spring);
}
.sidebar .brand:hover img, .sidebar .logo-box:hover img{
  animation:wiggle .6s var(--ease-out);
}

/* ---- Buttons: cheerful jelly squish on hover ---- */
button:hover, form button:hover, .print-btn:hover, form input[type=submit]:hover{
  animation:jelly .5s var(--ease-spring);
}

/* ---- Quick action pills: little bounce-dance loop while hovered ---- */
.action-btn:hover{
  animation:bobDance .9s var(--ease-in-out) infinite;
}

/* ---- Gallery thumbnails: playful tilt-pop on hover ---- */
.gallery-item:hover{
  animation:tiltPop .35s var(--ease-spring) forwards;
}

/* ---- Row action pills (view/edit/delete): pop-in bounce ---- */
.view-btn:hover, .edit-btn:hover, .delete-btn:hover, .clear-btn:hover, .back-btn:hover{
  animation:popIn .4s var(--ease-spring) forwards;
}

/* ---- Status chips / badges: little bounce-dance loop while hovered ---- */
.status-chip:hover, .pill-badge:hover{
  animation:bobDance .8s var(--ease-in-out) infinite;
}

/* ---- Avatar ring: speeds up + pulses on hover, back to lazy spin on exit ---- */
.avatar-ring{
  transition:filter .3s var(--ease-smooth);
}
.avatar-ring:hover{
  animation:spinSmooth 2.2s linear infinite;
  filter:drop-shadow(0 0 14px rgba(91,110,245,.55));
}

/* ---- Modal nav arrows: nudge-dance on hover ---- */
.nav-btn.left:hover{ animation:nudgeSide .5s var(--ease-in-out) infinite; }
.nav-btn.right:hover{ animation:nudgeSide .5s var(--ease-in-out) infinite reverse; }

/* ---- Pagination arrows: gentle bounce on hover ---- */
.pagination a:hover{
  animation:bobDance .8s var(--ease-in-out) infinite;
}

/* ---- Dashboard/stat card numbers: a little pop when the card is hovered ---- */
.dashboard-cards .card:hover h3, .stat-card:hover .value{
  animation:jelly .5s var(--ease-spring);
}

/* ---- Section-title dot / notice tag: happy bounce on hover of the row ---- */
.notice:hover .tag{
  animation:bobDance .7s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce){
  .nav-link:hover .ic, .sidebar .brand:hover img, .sidebar .logo-box:hover img,
  button:hover, form button:hover, .print-btn:hover, form input[type=submit]:hover,
  .action-btn:hover, .gallery-item:hover, .view-btn:hover, .edit-btn:hover,
  .delete-btn:hover, .clear-btn:hover, .back-btn:hover, .status-chip:hover,
  .pill-badge:hover, .avatar-ring:hover, .nav-btn.left:hover, .nav-btn.right:hover,
  .pagination a:hover, .dashboard-cards .card:hover h3, .stat-card:hover .value,
  .notice:hover .tag{
    animation:none !important;
  }
}

/* =====================================================================
   FLOATING ROUNDED SIDEBAR — detaches the rail from the screen edges
   and gives it fully curved corners, instead of a flat edge-to-edge bar.
   ===================================================================== */
:root{
  --sidebar-gap: 16px;
}

.sidebar{
  top:var(--sidebar-gap);
  left:var(--sidebar-gap);
  bottom:var(--sidebar-gap);
  height:calc(100vh - (var(--sidebar-gap) * 2));
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar:hover{
  border-radius:26px;
}

.main{
  margin-left:calc(var(--rail-w) + (var(--sidebar-gap) * 2));
}

/* Floating pill-style bottom nav on mobile (WhatsApp-style): the bar floats
   with a gap on every side instead of sitting edge-to-edge, fully rounded,
   with a translucent blurred background — plus a clearer "active tab" ring
   around the current icon. Still horizontally scrollable since this app has
   far more sections than a 5-tab app like WhatsApp does. */
@media (max-width:760px){
  :root{ --mnav-gap:10px; --mnav-h:66px; }
  .sidebar{
    top:auto;
    left:var(--mnav-gap); right:var(--mnav-gap);
    width:auto;
    bottom:calc(var(--mnav-gap) + env(safe-area-inset-bottom, 0px));
    height:var(--mnav-h);
    border-radius:24px;
    background:rgba(18,20,32,.82);
    backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    padding-bottom:0;
    overflow-y:visible!important;
  }
  .sidebar a.nav-link.active .ic{
    box-shadow:0 0 0 1.5px rgba(255,255,255,.5), 0 0 12px 1px currentColor;
  }
  .main{
    margin-left:0;
    padding-bottom:calc(var(--mnav-h) + (var(--mnav-gap) * 2) + env(safe-area-inset-bottom, 0px));
  }
  .footer{
    bottom:calc(var(--mnav-h) + (var(--mnav-gap) * 2) + env(safe-area-inset-bottom, 0px));
  }
}