/* =============================================================
   Sallaghari Edugate Hub — global design system
   Professional / corporate palette. Plus Jakarta Sans for UI,
   Sora for headlines. Used by dashboards + login.
   ============================================================= */

:root {
  /* Brand */
  --brand-50:  #eef4ff;
  --brand-100: #d9e6ff;
  --brand-200: #b6cdff;
  --brand-300: #88acff;
  --brand-400: #5a84f6;
  --brand-500: #3b64e6;   /* primary */
  --brand-500-rgb: 59,100,230;
  --brand-600: #2a4ec5;
  --brand-700: #213fa0;
  --brand-800: #1c357e;
  --brand-900: #182c66;

  /* Neutral */
  --n-0:  #ffffff;
  --n-50: #f7f8fb;
  --n-100:#eef0f5;
  --n-200:#dde1ea;
  --n-300:#c5ccd9;
  --n-400:#9aa3b4;
  --n-500:#6e7687;
  --n-600:#4a5161;
  --n-700:#323946;
  --n-800:#1f232d;
  --n-900:#0f131a;

  /* Semantic */
  --success: #16a34a;
  --success-soft:#dcfce7;
  --warn: #d97706;
  --warn-soft:#fef3c7;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --info: #0369a1;
  --info-soft:#e0f2fe;

  /* Layout */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(15,19,26,.06);
  --shadow:    0 4px 12px rgba(15,19,26,.08);
  --shadow-lg: 0 20px 40px rgba(15,19,26,.12);

  /* Typography */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
}

.chart-card {
  padding: 16px;
}

.chart-canvas-wrap {
  width: 100%;
  min-height: 260px;
}

.native-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.native-donut {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 18px;
  align-items: center;
}

.native-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
}

.native-legend.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}

.native-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.native-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .native-donut {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   INSIGHT CARDS — modernized
   ---------------------------------------------------------------------
   The existing renderClassHealthCards / renderGaugeGrid / renderDemandTiles
   / renderGrowthStacks / renderRankedPerformance functions emit these
   class names. The styling here was upgraded to match the new
   .chart-card-elevated look introduced in the dashboard revamp:
     - softer, gradient-tinted backgrounds
     - layered shadows instead of flat 1px borders
     - typography scale tightened to use the head font for big numbers
     - hover lift to make cards feel interactive
     - animated gauge fill via CSS @property (with fallback)
   ===================================================================== */

.insight-card-grid,
.gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
}

.insight-mini-card,
.gauge-card,
.rank-row,
.growth-stack-row {
  border: 1px solid var(--n-200);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(99,102,241,.05), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(15,19,26,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.insight-mini-card:hover,
.gauge-card:hover,
.rank-row:hover,
.growth-stack-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15,19,26,.08);
  border-color: var(--brand-200);
}

.insight-mini-card .small.muted:first-child,
.growth-stack-row .small:first-child strong {
  text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; font-weight: 700;
  color: var(--n-500);
}

.insight-score {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  margin: 12px 0 10px;
  letter-spacing: -.01em;
}

.insight-mini-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--n-200);
  color: var(--n-500);
  font-size: .76rem;
  font-weight: 600;
}

.native-progress {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef2f7, #e2e8f0);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
.native-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: linear-gradient(90deg, rgba(255,255,255,.18), transparent 40%);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}

/* ---- Gauge cards (Exam readiness) ---- */
.gauge-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding-top: 18px;
}
.gauge-ring {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--ring) calc(var(--value) * 1%), #e2e8f0 0);
  position: relative;
  box-shadow:
    0 6px 14px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(15,23,42,.04);
}
.gauge-ring::before {
  /* Subtle outer halo that picks up the ring colour */
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--ring) 18%, transparent), transparent 70%);
  z-index: 0; pointer-events: none;
}
.gauge-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 25%, #ffffff, #f8fafc 70%);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}
.gauge-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--n-900);
}
.gauge-card strong { font-size: .92rem; color: var(--n-900); }

/* ---- Demand tiles (Subject demand) ---- */
.demand-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.demand-tile {
  min-height: 132px;
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.demand-tile::before {
  /* Glossy diagonal highlight */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,.18), transparent 55%);
  pointer-events: none;
}
.demand-tile:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 36px rgba(15,23,42,.22); }
.demand-tile strong {
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .01em;
  position: relative;
}
.demand-tile span {
  font-family: var(--font-head);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  position: relative;
}
.demand-tile em {
  font-style: normal;
  font-size: .72rem;
  opacity: .92;
  letter-spacing: .02em;
  position: relative;
}

/* ---- Growth stacks (Track / grade growth) ---- */
.growth-stack-list,
.ranked-performance {
  display: grid;
  gap: 12px;
}
.growth-stack {
  display: flex;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, #eef2f7, #e2e8f0);
  margin: 10px 0;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}
.growth-stack span {
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), transparent 50%);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}

/* ---- Ranked performance (Content performance) ---- */
.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.rank-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef2ff, #dbeafe);
  color: var(--brand-700);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: inset 0 -2px 0 rgba(37,99,235,.14);
  flex-shrink: 0;
}
.rank-row:nth-child(1) .rank-num { background: linear-gradient(180deg, #fef3c7, #fde68a); color: #92400e; box-shadow: inset 0 -2px 0 rgba(146,64,14,.18); }
.rank-row:nth-child(2) .rank-num { background: linear-gradient(180deg, #f1f5f9, #e2e8f0); color: #334155; }
.rank-row:nth-child(3) .rank-num { background: linear-gradient(180deg, #fef0e3, #fdd9b4); color: #7c2d12; }
.rank-main {
  flex: 1;
  min-width: 0;
}
.rank-main strong { color: var(--n-900); }

/* =====================================================================
   FRAPPE CHARTS — minimal inline styling
   ---------------------------------------------------------------------
   Replaces the external frappe-charts.min.css we can't load (style-src
   in the CSP only allows fonts.bunny.net, not cdnjs). Frappe renders
   as SVG so the chart bodies need almost nothing — only the legend and
   tooltip require any custom CSS to look polished.
   ===================================================================== */
.frappe-chart .chart-container {
  position: relative;
  width: 100%;
}
.frappe-chart .chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding: 0;
  list-style: none;
  font-size: .72rem; color: var(--n-500);
}
.frappe-chart .chart-legend > li {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 8px;
}
.frappe-chart .graph-svg-tip,
.frappe-chart .graph-tip {
  position: absolute;
  z-index: 99999;
  padding: 6px 10px;
  background: rgba(15,23,42,.92);
  color: #fff;
  border-radius: 8px;
  font-size: .72rem;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(15,23,42,.25);
  white-space: nowrap;
}
.frappe-chart .graph-svg-tip .title,
.frappe-chart .graph-tip .title { font-weight: 600; opacity: .9; }
.frappe-chart .graph-svg-tip ul,
.frappe-chart .graph-tip ul { margin: 4px 0 0; padding: 0; list-style: none; }
.frappe-chart .graph-svg-tip ul li,
.frappe-chart .graph-tip ul li { display: flex; gap: 6px; align-items: center; }
.frappe-chart text { font-family: var(--font-ui); fill: #64748b; }
/* Heatmap-specific */
.frappe-chart .heatmap-cell { stroke: #ffffff; stroke-width: 1.2; }
.frappe-chart .heatmap-month-label { font-size: 11px; fill: #64748b; }
.frappe-chart .heatmap-day-label { font-size: 9px; fill: #94a3b8; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--n-800);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}
body.no-scroll { overflow: hidden; }
body.admin-loading::before {
  content: "Loading admin dashboard...";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--n-50);
  color: var(--n-600);
  font-weight: 700;
}
body.admin-loading .app {
  visibility: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--n-900); margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0 0 1em; color: var(--n-600); }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }
hr  { border: none; border-top: 1px solid var(--n-200); margin: 1.5rem 0; }

/* Utility */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--n-500); }
.small { font-size: .82rem; }
.text-center { text-align: center; }
.flex { display: flex; }
.row  { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.col  { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.hidden { display: none !important; }

/* =============================================================
   Buttons
============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--n-100);
  color: var(--n-800);
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: transform .14s ease, background .2s ease, box-shadow .2s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  will-change: transform;
}
.btn:hover { background: var(--n-200); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .05s; }
.btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[disabled]:hover { transform: none; box-shadow: none; }

.btn-primary { background: var(--brand-500); color: #fff; box-shadow: 0 2px 6px rgba(59,100,230,.25); }
.btn-primary:hover { background: var(--brand-600); box-shadow: 0 8px 20px rgba(59,100,230,.32); }
.btn-outline { background: transparent; border-color: var(--n-300); color: var(--n-800); }
.btn-outline:hover { background: var(--n-100); border-color: var(--brand-400); color: var(--brand-700); }
.btn-ghost { background: transparent; color: var(--n-700); }
.btn-ghost:hover { background: var(--n-100); }
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,.25); }
.btn-danger:hover { background: #b91c1c; }
.btn-success{ background: var(--success); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,.25); }
.btn-success:hover { background: #15803d; }

.btn-sm { padding: 7px 12px; font-size: .85rem; }
.btn-lg { padding: 14px 24px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* Subtle press/hover for all clickable cards + nav links */
.card-hover, .contact-card, .class-card, .feature, .star-card, .testim, .stat { transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease; }
.card-hover:active, .contact-card:active, .class-card:active, .star-card:active { transform: translateY(-1px) scale(.995); }
.side-nav a { transition: background .15s ease, color .15s ease, padding .15s ease; }
.side-nav a:hover { padding-left: 18px; }
.tab { cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.icon-btn { transition: background .15s ease, transform .12s ease; cursor: pointer; }
.icon-btn:active { transform: scale(.92); }
a, button, [role="button"], input[type="submit"], input[type="button"] { -webkit-tap-highlight-color: transparent; }
a:not(.btn) { transition: color .15s ease; }
select, input, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(59,100,230,.12); }

/* Icon button */
.icon-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--n-200); background: #fff;
  cursor: pointer; color: var(--n-700);
}
.icon-btn:hover { background: var(--n-100); }

/* =============================================================
   Forms
============================================================= */
.field { display: block; margin-bottom: 14px; }
.field label, label.field-label {
  display: block; margin-bottom: 6px; font-weight: 600; font-size: .88rem; color: var(--n-700);
}
.input, .select, .textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--n-900);
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.textarea { min-height: 110px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236e7687' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.help { font-size: .78rem; color: var(--n-500); margin-top: 4px; }
.field-error { color: var(--danger); font-size: .8rem; margin-top: 4px; }

/* Password strength meter */
.pw-meter { display: flex; gap: 4px; margin-top: 6px; }
.pw-meter span { flex: 1; height: 4px; background: var(--n-200); border-radius: 999px; }
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: #facc15; }
.pw-meter[data-score="4"] span:nth-child(-n+4) { background: var(--success); }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--n-200); margin-bottom: 22px; gap: 6px; flex-wrap: wrap; }
.tab  {
  padding: 11px 18px; border: none; background: none; cursor: pointer; font: inherit;
  color: var(--n-500); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--brand-600); border-bottom-color: var(--brand-500); }
.tab:hover { color: var(--n-800); }

/* Chips + badges */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--n-100); color: var(--n-700);
}
.chip-brand   { background: var(--brand-100); color: var(--brand-700); }
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-warn    { background: var(--warn-soft); color: var(--warn); }
.chip-danger  { background: var(--danger-soft); color: var(--danger); }
.chip-info    { background: var(--info-soft); color: var(--info); }

.badge-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* =============================================================
   Cards
============================================================= */
.card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: transform .2s, box-shadow .2s; cursor: pointer; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3, .card h4 { margin-top: 0; }

/* Stat card */
.stat {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 20px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.stat .label { color: var(--n-500); font-size: .85rem; font-weight: 600; }
.stat .value { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--n-900); line-height: 1; }
.stat .sub { color: var(--n-500); font-size: .78rem; }
.stat.clickable { cursor: pointer; transition: border-color .15s, transform .15s; }
.stat.clickable:hover { border-color: var(--brand-300); transform: translateY(-2px); }
.stat.active { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.stat-icon { position: absolute; top: 18px; right: 18px; font-size: 1.4rem; opacity: .8; }

/* Grid */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* =============================================================
   Modal
============================================================= */
.modal {
  position: fixed; inset: 0; background: rgba(15,19,26,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fadeIn .15s ease-out;
}
.modal.open { display: flex; }
.modal-body {
  background: #fff; border-radius: var(--radius-xl);
  max-width: 720px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: popIn .2s ease-out;
}
.modal-wide .modal-body { max-width: 900px; }
.modal-head { padding: 20px 24px; border-bottom: 1px solid var(--n-200); display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; background: #fff; z-index: 1; border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
.modal-head h3 { margin: 0; }
.modal-content { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--n-200); display: flex; gap: 10px; justify-content: flex-end; }
.modal-close { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--n-500); line-height: 1; }
.modal-close:hover { color: var(--n-900); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* =============================================================
   Tables
============================================================= */
.table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  overflow: hidden;
}
.table th, .table td { text-align: left; padding: 12px 14px; font-size: .9rem; }
.table th { background: var(--n-50); font-weight: 600; color: var(--n-600); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.table tr + tr td { border-top: 1px solid var(--n-100); }
.table tbody tr:hover { background: var(--n-50); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }

@media (max-width: 720px) {
  body:has(.app) {
    background: #f1f5f9;
  }
  .app .page {
    padding: 14px;
  }
  .app .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    border-bottom: 1px solid var(--n-200);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
  }
  .app .card,
  .app .stat,
  .app .chart-card-elevated {
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
  }
  .table-wrap {
    overflow: visible;
    border-radius: 0;
  }
  .mobile-card-table {
    display: block;
    border: 0;
    background: transparent;
  }
  .mobile-card-table thead {
    display: none;
  }
  .mobile-card-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mobile-card-table tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--n-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  }
  .mobile-card-table tbody tr:hover {
    background: #fff;
  }
  .mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-top: 1px solid var(--n-100);
    font-size: .88rem;
    word-break: break-word;
  }
  .mobile-card-table td:first-child {
    border-top: 0;
  }
  .mobile-card-table tr + tr td {
    border-top: 1px solid var(--n-100);
  }
  .mobile-card-table tr + tr td:first-child {
    border-top: 0;
  }
  .mobile-card-table td::before {
    content: attr(data-label);
    color: var(--n-500);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .mobile-card-table td:empty {
    display: none;
  }
  .mobile-card-table td .row,
  .mobile-card-table td.row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .mobile-card-table .btn-sm {
    min-height: 34px;
  }
  .pager {
    position: sticky;
    bottom: 0;
    z-index: 12;
    margin: 12px -12px -12px;
    padding: 10px 12px;
    background: rgba(248, 250, 252, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--n-200);
  }
  .pager-info {
    width: 100%;
    text-align: center;
    white-space: normal;
    order: -1;
  }
}

/* =====================================================================
   STUDENT MOBILE APP PASS
   ===================================================================== */
@media (max-width: 720px) {
  .student-app {
    display: block;
    min-height: 100vh;
    background: #f1f5f9;
  }
  .student-app .main {
    padding-bottom: 86px;
  }
  .student-app .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 10px 12px;
    gap: 8px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--n-200);
    backdrop-filter: blur(14px);
  }
  .student-app .mobile-toggle {
    display: none;
  }
  .student-app .page-title {
    font-size: 1rem;
    max-width: 36vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .student-app .bell .icon-btn {
    width: 36px;
    height: 36px;
  }
  .student-app .user-chip {
    padding: 3px 8px 3px 3px;
    max-width: 42vw;
  }
  .student-app .user-chip .meta {
    min-width: 0;
  }
  .student-app .user-chip .meta strong,
  .student-app .user-chip .meta span {
    max-width: 27vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .student-app .page {
    padding: 14px 12px 26px;
  }
  .student-app .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 74px;
    transform: none;
    z-index: 80;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--n-200);
    border-right: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .10);
    backdrop-filter: blur(16px);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .student-app .sidebar .brand,
  .student-app .sidebar .side-foot {
    display: none;
  }
  .student-app .side-nav {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-width: max-content;
    padding: 0 4px;
  }
  .student-app .side-nav a {
    flex: 0 0 74px;
    height: 58px;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 7px 6px;
    border-radius: 14px;
    font-size: .66rem;
    line-height: 1.1;
    text-align: center;
    color: var(--n-500);
  }
  .student-app .side-nav a .ico {
    width: auto;
    font-size: 1rem;
  }
  .student-app .side-nav a.active {
    background: var(--brand-50);
    color: var(--brand-700);
    box-shadow: inset 0 0 0 1px var(--brand-100);
  }
  .student-app section[data-view] h1 {
    font-size: 1.35rem !important;
    margin: 6px 0 4px;
  }
  .student-app section[data-view] p.sub {
    font-size: .82rem;
    margin-bottom: 14px;
  }
  .student-app section[data-view="home"] > .card:first-of-type {
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
  }
  .student-app section[data-view="home"] > .card:first-of-type h2 {
    font-size: 1.35rem !important;
  }
  .student-app section[data-view="home"] .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .student-app .stat {
    min-height: 112px;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  }
  .student-app .stat .label {
    font-size: .68rem;
  }
  .student-app .stat .value {
    font-size: 1.65rem;
  }
  .student-app .stat .sub {
    font-size: .7rem;
  }
  .student-app #recentGrid,
  .student-app #notesGrid,
  .student-app #videosGrid,
  .student-app #assignGrid,
  .student-app #papersGrid,
  .student-app #examsGrid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .student-app .content-card {
    min-height: 0;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
  }
  .student-app .content-card h4 {
    font-size: .98rem !important;
    line-height: 1.28;
  }
  .student-app .content-card .type-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .student-app .content-card .cms-preview {
    max-height: 160px;
    border-radius: 12px;
  }
  .student-app .content-card .meta {
    gap: 6px;
  }
  .student-app .home-alert-card {
    border-radius: 16px;
    padding: 14px;
  }
  .student-app .bell-panel,
  .student-app .user-menu {
    position: fixed;
    right: 12px;
    left: 12px;
    top: 58px;
    width: auto;
    max-height: 70vh;
  }
  .student-app .row.mb-16 {
    flex-wrap: wrap;
  }
  .student-app .row.mb-16 .select {
    max-width: 100% !important;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .student-app section[data-view="home"] .grid-4 {
    grid-template-columns: 1fr !important;
  }
  .student-app .side-nav a {
    flex-basis: 68px;
  }
}

/* =============================================================
   Toast
============================================================= */
.toast-host { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--n-900); color: #fff; padding: 12px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateX(100%);
  transition: opacity .2s, transform .2s;
  max-width: 340px; font-size: .9rem;
}
.toast-show { opacity: 1; transform: none; }
.toast-success { background: var(--success); }
.toast-warn    { background: var(--warn); }
.toast-error   { background: var(--danger); }

/* =============================================================
   Navbar (public site)
============================================================= */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--n-100);
  box-shadow: var(--shadow-sm);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; color: var(--n-900); font-size: 1.1rem; }
.logo-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: none;
  flex: 0 0 auto;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { color: var(--n-700); font-weight: 500; font-size: .95rem; }
.nav-links a:hover { color: var(--brand-600); text-decoration: none; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.hamburger { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--n-800); margin: 5px auto; transition: all .2s; }
@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: block; }
  .nav.open .nav-links, .nav.open .nav-cta {
    display: flex; flex-direction: column;
    position: absolute; top: 64px; left: 0; right: 0;
    background: #fff; padding: 20px; gap: 14px; align-items: stretch;
    border-bottom: 1px solid var(--n-100);
  }
}

/* =============================================================
   Hero + sections (landing page)
============================================================= */
.hero {
  position: relative; overflow: hidden;
  padding: 84px 0 120px;
  background: radial-gradient(ellipse at top right, var(--brand-100), transparent 60%),
              radial-gradient(ellipse at bottom left, #dff0ff, transparent 60%),
              var(--n-50);
}
.hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.02em; }
.hero p.lead { font-size: 1.1rem; color: var(--n-600); max-width: 560px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
@media (max-width: 1100px) { .hero-grid { gap: 48px; } }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.photo-stack { position: relative; display: flex; justify-content: center; min-height: 340px; }
.photo-stack img { width: 280px; height: 360px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 6px solid #fff; }
.photo-stack img:nth-child(1) { transform: rotate(-6deg) translateX(-30px); }
.photo-stack img:nth-child(2) { transform: rotate(4deg) translateX(30px); position: absolute; }

.section { padding: 72px 0; }
.section h2 { text-align: center; }
.section .eyebrow { text-align: center; color: var(--brand-600); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; margin-bottom: 8px; }
.section .lead-sub { text-align: center; max-width: 660px; margin: 0 auto 36px; }

.section-alt { background: #fff; }

/* Counter strip */
.counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 40px;
}
.counter { text-align: center; }
.counter .num { font-family: var(--font-head); font-size: 2.6rem; font-weight: 700; color: var(--brand-600); line-height: 1; }
.counter .cap { color: var(--n-500); font-size: .88rem; margin-top: 4px; }
@media (max-width: 700px) { .counters { grid-template-columns: repeat(2, 1fr); } }

/* Feature card */
.feature {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 26px; transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-700); border-radius: 12px; font-size: 1.3rem; margin-bottom: 14px; }

/* Classes cards */
.class-card {
  display: flex; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 26px;
}
.class-card .mark {
  flex: 0 0 84px; height: 84px; border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
}

/* Course & syllabus cards */
.course-syllabus-list {
  padding-left: 2px;
  padding-right: 2px;
}
.course-syllabus-card {
  flex-basis: 280px;
  width: 280px;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .09);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-syllabus-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
}
.course-syllabus-thumb {
  position: relative;
  height: 168px;
  background: linear-gradient(135deg, #e0f2fe, #f8fafc);
  overflow: hidden;
  border-bottom: 1px solid var(--n-200);
}
.course-syllabus-thumb img,
.course-syllabus-thumb iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}
.course-syllabus-thumb-empty {
  display: grid;
  place-items: center;
  color: var(--brand-700);
  font-size: 2.4rem;
}
.course-syllabus-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.course-syllabus-body h3 {
  margin: 8px 0 10px;
  color: var(--brand-700);
  font-size: 1.18rem;
  line-height: 1.28;
}
.course-syllabus-body p {
  color: var(--n-600);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.course-syllabus-price {
  color: var(--n-900);
  font-weight: 800;
  letter-spacing: .04em;
}

/* Subjects */
.subjects { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.subjects .sub {
  padding: 10px 18px; background: #fff; border: 1px solid var(--n-200); border-radius: 999px;
  font-weight: 600; color: var(--n-700); font-size: .92rem;
}

/* Testimonial */
.testim {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 24px;
}
.testim .quote { color: var(--n-700); font-size: .98rem; }
.testim .who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.testim .avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.testim .avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Same face-aware crop as star-photo */
  object-position: center 25%;
  display: block;
}

/* CTA strip */
.cta-strip {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
  color: #fff; border-radius: var(--radius-xl);
  padding: 48px; text-align: center;
}
.cta-strip h2 { color: #fff; }
.cta-strip p { color: rgba(255,255,255,.85); max-width: 540px; margin: 0 auto 22px; }
.cta-strip .btn { background: #fff; color: var(--brand-700); }
.cta-strip .btn:hover { background: var(--brand-50); }

/* Contact block */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
.contact-card {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 22px; text-align: center;
}
.contact-card .icon { font-size: 1.6rem; margin-bottom: 6px; }
.contact-card a { color: var(--n-800); font-weight: 600; }

/* Footer */
footer.site-foot {
  background: var(--n-900); color: rgba(255,255,255,.7); padding: 40px 0 24px;
}
footer.site-foot a { color: #fff; }
footer.site-foot .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.15;
}
footer.site-foot .logo .logo-mark {
  width: 48px;
  height: 48px;
}
footer.site-foot .logo > span:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
footer.site-foot .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 30px; }
@media (max-width: 800px) { footer.site-foot .foot-grid { grid-template-columns: 1fr; } }
footer.site-foot h4 { color: #fff; }
footer.site-foot .fine { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; font-size: .85rem; color: rgba(255,255,255,.55); }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.shown { opacity: 1; transform: none; }

/* =============================================================
   App shell (dashboards) — sidebar layout
============================================================= */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #fff;
  border-right: 1px solid var(--n-200);
  padding: 22px 16px;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-family: var(--font-head); font-weight: 700; }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius);
  color: var(--n-600); font-weight: 500; font-size: .95rem;
}
.side-nav a:hover { background: var(--n-50); color: var(--n-900); text-decoration: none; }
.side-nav a.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.side-nav a .ico { width: 22px; text-align: center; }
.sidebar .side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--n-100); }

.main { padding: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 30px;
  background: #fff; border-bottom: 1px solid var(--n-200);
  position: sticky; top: 0; z-index: 20;
}
.topbar .search { flex: 1; max-width: 360px; position: relative; }
.topbar .search input {
  width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--n-200); border-radius: 999px; background: var(--n-50);
}
.topbar .search::before {
  content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .85rem;
}
.topbar .page-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.topbar .right { display: flex; gap: 10px; align-items: center; }

.bell { position: relative; cursor: pointer; }
.bell-panel {
  position: absolute; right: 0; top: 48px; width: 340px;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 420px; overflow-y: auto;
  display: none; z-index: 60;
}
.bell-panel.open { display: block; }
.bell-panel .item { padding: 12px 14px; border-bottom: 1px solid var(--n-100); }
.bell-panel .item:last-child { border-bottom: none; }
.bell-panel .item strong { display: block; font-size: .92rem; color: var(--n-900); }
.bell-panel .item span { font-size: .78rem; color: var(--n-500); }

.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border-radius: 999px; background: var(--n-50); border: 1px solid var(--n-200);
  position: relative;
  cursor: pointer;
  user-select: none;
}
.user-chip:hover { background: #fff; border-color: var(--brand-200); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.user-chip:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 2px; }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem;
}
.user-chip .meta { font-size: .82rem; line-height: 1.1; }
.user-chip .meta strong { display: block; }
.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 220px;
  display: none;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 80;
}
.user-menu.open { display: block; }
.user-menu-head {
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--n-100);
  margin-bottom: 8px;
}
.user-menu-head strong {
  display: block;
  color: var(--n-900);
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-head span {
  display: block;
  margin-top: 3px;
  color: var(--n-500);
  font-size: .76rem;
}
.user-menu .btn {
  justify-content: center;
  width: 100%;
}

.page { padding: 26px 30px 50px; }
.page h1 { font-size: 1.6rem; margin-bottom: 4px; }
.page .sub { color: var(--n-500); margin-bottom: 22px; }

/* Mobile sidebar */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.4rem; }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 260px;
    transform: translateX(-100%); transition: transform .2s ease;
    z-index: 50;
  }
  .sidebar.open { transform: none; }
  .mobile-toggle { display: block; }
  .topbar { padding: 12px 16px; }
  .page { padding: 18px 16px 40px; }
}

/* =============================================================
   Content cards (notes, videos, assignments, past papers)
============================================================= */
.content-card {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-lg);
  padding: 20px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column;
  position: relative;
}
.content-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }

/* Locked exam_link cards (scheduled activation) — visually de-emphasised
   but still informative so the student knows when the exam unlocks. */
.content-card-locked {
  opacity: .68;
  background: repeating-linear-gradient(135deg, #fbfbfd 0 8px, #f1f5f9 8px 16px);
  cursor: not-allowed;
}
.content-card-locked:hover { transform: none; box-shadow: none; border-color: var(--n-200); }
.card.card-locked {
  border-color: rgba(202,138,4,.45);
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
}
.content-card .type-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.content-card h4 { margin: 0 0 6px; }
.content-card .meta { font-size: .78rem; color: var(--n-500); margin-top: auto; padding-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

.empty {
  text-align: center; padding: 60px 20px; color: var(--n-500);
  border: 1px dashed var(--n-200); border-radius: var(--radius-lg); background: #fff;
}
.empty .icon { font-size: 2.4rem; margin-bottom: 10px; opacity: .6; }

/* Loading */
.spinner {
  width: 28px; height: 28px; border: 3px solid var(--n-200); border-top-color: var(--brand-500);
  border-radius: 999px; animation: spin 1s linear infinite;
}
.spinner-center { display: flex; justify-content: center; padding: 40px 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Progress bar (upload) */
.progress {
  height: 6px; background: var(--n-100); border-radius: 999px; overflow: hidden; margin-top: 8px;
}
.progress .bar { height: 100%; background: var(--brand-500); width: 0; transition: width .15s; }

/* Role selector cards (signup) */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-option {
  border: 2px solid var(--n-200); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; background: #fff;
  transition: all .15s;
}
.role-option:hover { border-color: var(--brand-300); }
.role-option.selected { border-color: var(--brand-500); background: var(--brand-50); }
.role-option strong { display: block; margin-bottom: 4px; color: var(--n-900); }
.role-option span { font-size: .8rem; color: var(--n-500); }

/* =============================================================
   Login page specific
============================================================= */
.auth-wrap {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--n-50);
}
.auth-side {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
  color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-side h2 { color: #fff; font-size: 2rem; }
.auth-side p { color: rgba(255,255,255,.85); }
.auth-side .quotes { border-left: 3px solid rgba(255,255,255,.3); padding-left: 18px; font-style: italic; }
.auth-side .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1.15;
}
.auth-side .logo .logo-mark {
  width: 48px;
  height: 48px;
}
.auth-side .logo > span:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.auth-side::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.14), transparent 40%);
}
.auth-side > * { position: relative; z-index: 1; }

.auth-form {
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

/* =============================================================
   Protected viewer (view-only attachments for students)
============================================================= */
.protected-wrap {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
}
.protected-note {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: .85rem;
  margin-bottom: 12px;
}
.protected-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--n-100);
  min-height: 320px;
}
.protected-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  pointer-events: none;          /* blocks drag-to-save on most browsers */
  -webkit-user-drag: none;
}
.protected-pdf {
  width: 100%;
  height: 70vh;
  border: 0;
  display: block;
}
/* Repeating SVG watermark — tiles every 360x180px so it stays visible
   on tall mobile views (multi-page PDFs) and desktop alike. The inline
   <span> children inside .protected-watermark are kept in the markup but
   visually hidden; the background-image does the real work. */
.protected-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'><g transform='rotate(-24 180 90)'><text x='180' y='100' font-family='sans-serif' font-size='22' font-weight='700' fill='%230f172a' fill-opacity='0.16' text-anchor='middle'>Sallaghari Edugate Hub</text></g></svg>");
  background-repeat: repeat;
}
.protected-watermark span { display: none; }

/* Print-friendly */
@media print {
  .sidebar, .topbar, .btn { display: none !important; }
  .protected-stage img, .protected-stage iframe, .protected-stage { display: none !important; }
  .protected-note::after { content: " · Printing is disabled for protected content."; }
}

/* =============================================================
   BKP portrait placeholder (hero + teacher section)
============================================================= */
.bkp-portrait {
  width: 280px; height: 360px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  color: #fff;
  box-shadow: var(--shadow-lg);
  border: 6px solid #fff;
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end;
  transform: rotate(-4deg) translateX(-20px);
}
.bkp-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.15), transparent 40%);
}
.bkp-portrait-inner {
  position: relative; z-index: 1;
  padding: 22px;
  width: 100%;
  text-align: left;
}
.bkp-initials {
  font-family: var(--font-head);
  font-size: 4rem; font-weight: 700; letter-spacing: -.03em;
  line-height: .95;
  opacity: .96;
}
.bkp-caption { font-weight: 700; margin-top: 12px; font-size: 1.05rem; line-height: 1.3; }
.bkp-caption small { display: block; font-weight: 500; font-size: .78rem; opacity: .8; margin-top: 4px; }
.bkp-portrait-lg { width: 300px; height: 400px; transform: rotate(-3deg); }

/* =============================================================
   BKP photo (real portrait) — used on landing hero + teacher section
============================================================= */

/* Wrapper that holds the portrait + decorative accent shapes */
.hero-portrait-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  padding: 20px 10px;
}

/* Soft brand-tinted blob behind the portrait */
.hero-accent { position: absolute; pointer-events: none; z-index: 0; }
.hero-accent-blob {
  width: 460px; height: 460px;
  right: 0; top: 30px;
  background: radial-gradient(circle at 40% 40%,
              rgba(var(--brand-500-rgb, 79, 70, 229), .22),
              rgba(var(--brand-500-rgb, 79, 70, 229), 0) 65%);
  filter: blur(8px);
  border-radius: 50%;
}
/* Subtle dot pattern accent */
.hero-accent-dots {
  width: 140px; height: 140px;
  left: -10px; bottom: 20px;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 16px 16px;
  color: rgba(0,0,0,.18);
  opacity: .9;
  border-radius: 12px;
}

.bkp-photo {
  position: relative;
  z-index: 1;
  width: 460px; height: 580px;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.35),
    0 12px 24px -12px rgba(0,0,0,.20),
    0 0 0 1px rgba(0,0,0,.04);
  border: 8px solid #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
  transform: rotate(-1.5deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.bkp-photo:hover {
  transform: rotate(-0.5deg) translateY(-4px) scale(1.012);
  box-shadow:
    0 38px 80px -22px rgba(0,0,0,.42),
    0 14px 28px -14px rgba(0,0,0,.24),
    0 0 0 1px rgba(0,0,0,.04);
}
.bkp-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;        /* keep BKP's face in frame */
}

/* Floating credentials chip in the top-right of the portrait */
.bkp-photo-badge {
  position: absolute;
  top: 16px; right: 16px;
  padding: 7px 12px;
  background: rgba(255,255,255,.94);
  color: var(--brand-700, #312e81);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

.bkp-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.40) 55%, transparent);
  color: #fff;
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}
.bkp-photo-caption strong { font-size: 1.18rem; font-weight: 700; letter-spacing: .005em; }
.bkp-photo-caption small  { display: block; font-size: .85rem; opacity: .92; margin-top: 4px; font-weight: 500; }

.bkp-photo-hero { width: 460px; height: 580px; }
.bkp-photo-lg   { width: 480px; height: 600px; transform: rotate(-1deg); }

/* Fallback when the image is missing */
.bkp-photo--missing img { display: none; }
.bkp-photo--missing::before {
  content: "BKP";
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 30px;
  font-family: var(--font-head);
  font-size: 5rem; font-weight: 700; color: #fff;
  letter-spacing: -.03em;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.15), transparent 40%);
}

@media (max-width: 1100px) {
  .bkp-photo, .bkp-photo-hero { width: 400px; height: 510px; }
  .bkp-photo-lg               { width: 420px; height: 530px; }
  .hero-portrait-wrap         { min-height: 540px; }
  .hero-accent-blob           { width: 380px; height: 380px; }
}
@media (max-width: 900px) {
  .hero-portrait-wrap { min-height: auto; padding: 10px; }
  .bkp-photo, .bkp-photo-hero, .bkp-photo-lg {
    width: 320px; height: 410px; transform: none;
  }
  .hero-accent-blob { width: 280px; height: 280px; right: 10px; top: 10px; }
  .hero-accent-dots { display: none; }
}

/* =============================================================
   Auth page photo cover (login/signup left panel)
============================================================= */
.auth-photo-cover { position: absolute; inset: 0; z-index: 0; }
.auth-photo-cover img {
  width: 100%; height: 100%; object-fit: cover; opacity: .55;
}
.auth-photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(42,78,197,.88), rgba(24,44,102,.92));
}

/* =============================================================
   Student of the Month (star cards)
============================================================= */
.star-card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.star-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.star-ribbon {
  background: linear-gradient(135deg, var(--warn), #f59e0b);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  padding: 8px 14px;
  letter-spacing: .02em;
}
/* Star of the month — circular avatar so the head sits dead-centre
   no matter what crazy aspect ratio the original photo had. */
.star-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  /* Faces sit in the upper third of most portraits, so push the crop up. */
  object-position: center 25%;
  display: block;
  margin: 18px auto 0;
  pointer-events: none;
  user-select: none;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  background: var(--n-100);
}
.star-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-100), var(--brand-300));
  color: var(--brand-800);
  font-family: var(--font-head);
  font-size: 3.2rem; font-weight: 700;
}
.star-body { padding: 16px 18px 20px; }
.star-body h4 { margin-bottom: 2px; color: var(--n-900); }
.star-quote {
  font-style: italic;
  color: var(--n-700);
  font-size: .88rem;
  margin-top: 10px;
  border-left: 3px solid var(--warn);
  padding-left: 10px;
}

/* =============================================================
   CMS image preview (admin-dashboard)
   Mirrors the .star-photo holder so admins see a true preview.
============================================================= */
.cms-photo-preview { margin-top: 10px; }
.cms-photo-frame {
  width: 200px;
  height: 200px;
  border-radius: 50%;          /* circular — matches the live landing-page frame */
  overflow: hidden;
  background: var(--n-100);
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  position: relative;
}
.cms-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crop-to-fill — never stretches */
  object-position: center 25%;  /* face-aware: lifts the crop so heads stay in view */
  display: block;
}
.cms-photo-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--n-600); font-size: .85rem;
}

/* =============================================================
   Pagination controls (landing page sections)
============================================================= */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.pager-btn {
  background: #fff;
  border: 1px solid var(--n-300);
  color: var(--brand-700);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  font-size: .92rem;
}
.pager-btn:hover:not([disabled]) {
  background: var(--brand-50, #eef4ff);
  border-color: var(--brand-400);
}
.pager-btn:active:not([disabled]) { transform: translateY(1px); }
.pager-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  color: var(--n-500);
}
.pager-info {
  color: var(--n-700);
  font-size: .9rem;
  font-weight: 500;
}

/* =============================================================
   Social icons in Contact cards
============================================================= */
.contact-card {
  text-decoration: none;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px;
}
.contact-card:hover { text-decoration: none; }
.contact-card h4 { color: var(--n-900); margin: 0; }
.contact-card span { color: var(--n-600); font-weight: 500; font-size: .9rem; }
.social-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-ico svg { width: 26px; height: 26px; }
.ico-facebook  { background: #1877F2; color: #fff; }
.ico-whatsapp  { background: #25D366; color: #fff; }
.ico-phone     { background: var(--brand-500); color: #fff; }
.ico-location  { background: var(--danger);    color: #fff; }
.contact-card:hover .social-ico { transform: scale(1.08); box-shadow: var(--shadow); }

/* Phone card with two stacked clickable numbers */
.contact-card-phone span {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
}
.contact-card-phone .phone-link {
  color: var(--n-800);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: color .15s ease;
}
.contact-card-phone .phone-link:hover { color: var(--brand-600); }

/* =============================================================
   Footer tagline — pure white
============================================================= */
footer.site-foot .foot-tag { color: #fff; opacity: .92; font-weight: 500; }
footer.site-foot .foot-tag strong { color: #fff; }

/* Responsive tweaks for hero portrait */
@media (max-width: 900px) {
  .bkp-portrait, .bkp-portrait-lg { width: 240px; height: 300px; transform: none; }
}

/* =============================================================
   Admin polish — professional dashboard refinements
   Layered on top of the existing .sidebar/.topbar/.stat classes
   so nothing breaks; just raises the visual bar.
============================================================= */

/* ---- App shell ---- */
.app { background: var(--n-50); }
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border-right: 1px solid var(--n-200);
  box-shadow: 1px 0 0 rgba(15,19,26,.02);
}
.sidebar .brand {
  padding: 6px 10px 20px;
  border-bottom: 1px solid var(--n-100);
  margin-bottom: 12px;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.sidebar .brand .logo-mark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.side-nav { gap: 3px; }
.side-nav a {
  position: relative;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .93rem;
  color: var(--n-600);
}
.side-nav a:hover { padding-left: 18px; background: var(--n-50); }
.side-nav a.active {
  background: linear-gradient(90deg, var(--brand-50), transparent 90%);
  color: var(--brand-700);
  font-weight: 600;
}
.side-nav a.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px;
  background: var(--brand-500);
}
.side-nav a .ico { font-size: 1.02rem; opacity: .9; }

.sidebar .side-foot {
  padding: 14px 10px 6px;
  border-top: 1px solid var(--n-100);
  font-size: .78rem;
  color: var(--n-500);
}

/* ---- Topbar ---- */
.topbar {
  backdrop-filter: saturate(1.1);
  padding: 14px 32px;
  border-bottom: 1px solid var(--n-100);
  box-shadow: 0 1px 0 rgba(15,19,26,.02);
}
.topbar .page-title {
  font-size: 1.08rem;
  letter-spacing: -.01em;
  color: var(--n-900);
}
.topbar .page-title::before {
  content: ""; display: inline-block; width: 4px; height: 18px;
  background: var(--brand-500); border-radius: 3px;
  margin-right: 10px; vertical-align: -3px;
}

/* ---- Page container ---- */
.page { padding: 30px 32px 60px; }
.page h1 { font-size: 1.5rem; letter-spacing: -.015em; }
.page .sub { font-size: .95rem; }

/* ---- Stat cards (Dashboard hero) ---- */
.stat {
  padding: 22px 22px 20px;
  border: 1px solid var(--n-200);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 1px 2px rgba(15,19,26,.04);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.stat::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-50) 0%, transparent 70%);
  opacity: .8; pointer-events: none;
}
.stat .label {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; color: var(--n-500);
}
.stat .value {
  font-size: 2.1rem; letter-spacing: -.02em;
  margin-top: 2px;
}
.stat .sub { margin-top: 2px; }
.stat-icon {
  top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; opacity: 1;
}
.stat.clickable:hover { box-shadow: var(--shadow); border-color: var(--brand-200); }
.stat.active { box-shadow: 0 0 0 3px var(--brand-100), var(--shadow-sm); }

/* ---- Section headers inside views ---- */
.view h2, .view > .card > h3:first-child {
  letter-spacing: -.01em;
}
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin: 6px 0 16px;
}
.section-head .eyebrow {
  font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-600); font-weight: 700;
}
.section-head h3 { margin: 4px 0 0; font-size: 1.2rem; letter-spacing: -.01em; }
.section-head .hint { color: var(--n-500); font-size: .88rem; }

/* ---- Cards (generic) ---- */
.card {
  border-radius: 14px;
  border-color: var(--n-200);
  box-shadow: 0 1px 2px rgba(15,19,26,.04);
}

/* ---- Tables (student list, activity, pending) ---- */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--n-200);
}
.table thead th {
  background: var(--n-50); color: var(--n-600);
  font-weight: 600; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 14px; border-bottom: 1px solid var(--n-200);
  text-align: left;
}
.table tbody td {
  padding: 13px 14px; border-bottom: 1px solid var(--n-100);
  font-size: .92rem; color: var(--n-700); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--n-50); }

/* ---- Chips (status) polish ---- */
.chip {
  font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; font-size: .76rem;
  border-radius: 999px;
}

/* ---- CMS tabs ---- */
.tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--n-100); border-radius: 999px;
  border: 1px solid var(--n-200);
}
.tabs .tab {
  border: none; background: transparent;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: .88rem; color: var(--n-600);
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.tabs .tab:hover { color: var(--n-900); }
.tabs .tab.active {
  background: #fff; color: var(--brand-700);
  box-shadow: 0 1px 3px rgba(15,19,26,.08);
}

/* ---- Forms (Post Content / CMS) ---- */
.field label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--n-600); font-weight: 600;
  margin-bottom: 6px; display: block;
}
.input, .select, textarea.input {
  border-radius: 10px;
  border: 1px solid var(--n-200);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-100);
  outline: none;
}

/* ---- Role picker (track selector) ---- */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-option {
  padding: 14px; border: 1px solid var(--n-200); border-radius: 12px;
  cursor: pointer; background: #fff;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.role-option strong { display: block; color: var(--n-900); }
.role-option span { display: block; color: var(--n-500); font-size: .84rem; margin-top: 4px; }
.role-option:hover { border-color: var(--brand-300); }
.role-option.selected {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
  background: var(--brand-50);
}

/* ---- Bell panel ---- */
.bell {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-50); border: 1px solid var(--n-200);
  transition: background .15s ease, transform .1s ease;
}
.bell:hover { background: var(--brand-50); }
.bell .count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(220,38,38,.35);
}
.bell-panel { border-radius: 14px; }
.bell-panel .item.bell-unread { background: var(--brand-50); }
.bell-panel .item strong { color: var(--n-900); }
.bell-panel .dismiss-btn {
  float: right; background: none; border: none; cursor: pointer;
  color: var(--n-400); font-size: 1.1rem; line-height: 1;
}
.bell-panel .dismiss-btn:hover { color: var(--danger); }
.bell-panel .panel-head, .bell-panel .panel-foot {
  padding: 10px 14px;
  background: var(--n-50);
  font-size: .82rem;
  display: flex; justify-content: space-between; align-items: center;
}

/* ---- Content grid cards ---- */
.content-card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,19,26,.04);
}
.content-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 20px rgba(42,78,197,.08);
}

/* ---- Empty state ---- */
.empty {
  background: #fff; border: 1px dashed var(--n-200); border-radius: 12px;
  padding: 40px 20px; text-align: center; color: var(--n-500);
}
.empty .icon { font-size: 2rem; display: block; margin-bottom: 8px; opacity: .6; }

/* ---- User chip ---- */
.user-chip { padding: 4px 14px 4px 4px; }
.user-chip .avatar {
  width: 34px; height: 34px;
  box-shadow: 0 4px 10px rgba(42,78,197,.25);
}

/* ---- Mobile admin ---- */
@media (max-width: 980px) {
  .page { padding: 22px 18px 50px; }
  .stat .value { font-size: 1.75rem; }
}

/* ---- CMS card inline attachment preview (notices / results) ---- */
.cms-card-attachment { cursor: pointer; }
.cms-preview {
  margin: 12px 0 4px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--n-50, #f6f7f9);
  border: 1px solid var(--n-200, #e5e7eb);
  position: relative;
}
.cms-preview img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.cms-preview-pdf {
  height: 180px;
}
.cms-preview-pdf iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
/* Transparent overlay so the PDF iframe doesn't steal clicks/scroll */
.cms-preview-shield {
  position: absolute;
  inset: 0;
  background: transparent;
}
.cms-preview-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  height: 60px;
}
.cms-preview-icon { font-size: 1.6rem; }

/* ---- Our Teams: alternating hero-grid rows ---- */
.team-row { align-items: center; }
.team-row + .team-row { margin-top: 56px; }

/* When .team-row-flip is set, the photo column is rendered first in the
   markup but visually we want the photo on the LEFT and text on the RIGHT.
   The natural source order already does that for flipped rows, so all we
   need here is a visual nudge to keep the rhythm and avoid the BKP-style
   tilt clashing with the previous row. */
.team-row-flip .bkp-photo:hover {
  transform: rotate(0.5deg) translateY(-4px) scale(1.012);
}

/* Photo fallback (initial-letter avatar in BKP style) */
.bkp-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 7rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-600, #4f46e5), var(--brand-700, #312e81));
  letter-spacing: -.02em;
}

/* Tighten on smaller screens so added-teacher rows stack cleanly */
@media (max-width: 900px) {
  .team-row + .team-row { margin-top: 40px; }
  .team-row .bkp-photo,
  .team-row .bkp-photo-lg { width: 100%; max-width: 420px; height: 480px; margin: 0 auto; }
}

/* ---- Our Teams horizontal carousel ---- */
.team-carousel {
  position: relative;
  margin-top: 32px;
}
.team-viewport {
  overflow: hidden;
  border-radius: 16px;
}
.team-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.team-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 8px 4px;
}
.team-slide .hero-grid {
  margin-top: 0;
}

/* Arrows */
.team-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--brand-200, rgba(0,0,0,0.12));
  background: #fff;
  color: var(--brand-700, #1f3a8a);
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  z-index: 5;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.team-arrow:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: var(--brand-50, #f3f6ff);
}
.team-arrow:active {
  transform: translateY(-50%) scale(0.96);
}
.team-arrow-prev { left: -8px; }
.team-arrow-next { right: -8px; }

/* Dots */
.team-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.team-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.18);
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, width 0.18s ease;
}
.team-dot:hover { background: rgba(0,0,0,0.32); }
.team-dot.is-active {
  background: var(--brand-500, #2546d6);
  width: 24px;
  border-radius: 999px;
}

@media (max-width: 720px) {
  .team-arrow-prev { left: 4px; }
  .team-arrow-next { right: 4px; }
  .team-arrow { width: 38px; height: 38px; font-size: 24px; }
}

/* ---- Paused/closed banner: scope variants ---- */
.paused-chip-major {
  font-size: 1.05rem;
  padding: 10px 16px;
  background: linear-gradient(0deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.04));
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #991b1b;
}
.paused-chip-major .dot {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
}
.paused-chip-track {
  background: linear-gradient(0deg, rgba(234, 88, 12, 0.10), rgba(234, 88, 12, 0.04));
  border-color: rgba(234, 88, 12, 0.35);
  color: #9a3412;
}
.paused-chip-track .dot {
  background: #ea580c;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.18);
}
.paused-chip-resume {
  font-weight: 500;
  opacity: 0.85;
  margin-left: 4px;
}

/* ---- Horizontal-scroll sections (notices, stars, results) ---- */
.hscroll-wrap {
  position: relative;
}
.hscroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
}
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }
.hscroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }

.hscroll-card {
  flex: 0 0 320px;
  width: 320px;
  max-width: 85vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.hscroll-card-narrow {
  flex: 0 0 260px;
  width: 260px;
}
.hscroll-card .cms-preview { flex: 0 0 auto; }

.hscroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  color: var(--brand-700, #1f3a8a);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  z-index: 6;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.hscroll-arrow:hover {
  transform: translateY(-50%) scale(1.06);
  background: var(--brand-50, #f3f6ff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.hscroll-arrow:active { transform: translateY(-50%) scale(0.95); }
.hscroll-prev { left: -10px; }
.hscroll-next { right: -10px; }

@media (max-width: 720px) {
  .hscroll-prev { left: 4px; }
  .hscroll-next { right: 4px; }
  .hscroll-arrow { width: 36px; height: 36px; font-size: 22px; }
  .hscroll-card { flex-basis: 78vw; width: 78vw; }
  .hscroll-card-narrow { flex-basis: 70vw; width: 70vw; }
  .course-syllabus-card { flex-basis: 76vw; width: 76vw; min-height: 390px; }
  .course-syllabus-thumb { height: 150px; }
}

/* "See more" small button used in notices/results/stars cards */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.85rem;
}
.see-more-btn {
  white-space: nowrap;
}

/* ---- Professional class-operation alert cards (landing page) ---- */
.class-operation-alert-section {
  padding: 22px 0;
  background:
    linear-gradient(90deg, rgba(127, 29, 29, 0.98), rgba(185, 28, 28, 0.96) 52%, rgba(239, 68, 68, 0.94));
  border-top: 1px solid rgba(127, 29, 29, 0.22);
  border-bottom: 1px solid rgba(127, 29, 29, 0.28);
  box-shadow: 0 16px 34px rgba(127, 29, 29, 0.22);
}
.paused-strip {
  width: 100%;
}
.paused-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.paused-alert {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 8px;
  background: #fff7ed;
  border: 2px solid rgba(234, 88, 12, 0.40);
  border-left: 8px solid #ea580c;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24);
  position: relative;
  overflow: hidden;
}
.paused-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
  pointer-events: none;
}
.paused-alert-class {
  background: #fffbeb;
  border-color: rgba(202, 138, 4, 0.46);
  border-left-color: #ca8a04;
}
.paused-alert-track {
  background: #ffedd5;
  border-color: rgba(234, 88, 12, 0.48);
  border-left-color: #ea580c;
}
.paused-alert-major {
  background: #fef2f2;
  border-color: rgba(220, 38, 38, 0.58);
  border-left-color: #dc2626;
  box-shadow: 0 18px 42px rgba(127, 29, 29, 0.32);
}

.paused-alert-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #ea580c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.32);
}
.paused-alert-class .paused-alert-icon {
  background: #ca8a04;
  color: #fff;
}
.paused-alert-track .paused-alert-icon {
  background: #ea580c;
  color: #fff;
}
.paused-alert-major .paused-alert-icon {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.38);
}

.paused-alert-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.paused-alert-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #991b1b;
  margin-bottom: 6px;
}
.paused-alert-title {
  font-weight: 800;
  font-size: 1.32rem;
  line-height: 1.35;
  color: #7c2d12;
}
.paused-alert-class .paused-alert-title { color: #713f12; }
.paused-alert-major .paused-alert-title { color: #7f1d1d; }

.paused-alert-reason {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.55;
  color: #1f2937;
}
.paused-alert-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(127, 29, 29, 0.18);
  font-size: 0.92rem;
  color: #334155;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.paused-alert-resume strong {
  color: #0f172a;
  font-weight: 600;
}

@media (max-width: 640px) {
  .class-operation-alert-section { padding: 16px 0; }
  .paused-alert { padding: 16px 18px; gap: 14px; }
  .paused-alert-icon { width: 42px; height: 42px; font-size: 24px; }
  .paused-alert-title { font-size: 1.05rem; }
  .paused-alert-eyebrow { font-size: 0.7rem; }
}

/* ---- Attachment preview inside student content cards ---- */
.content-card .cms-preview {
  margin: 12px 0 14px;
}
.cms-preview-video {
  position: relative;
  background: #000;
}
.cms-preview-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.cms-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  pointer-events: none;
}

/* ---- Mobile-fit protected viewer ----
 * The iframe lives inside .modal-content. On phones we shrink modal padding
 * so the PDF gets the full width, and we make the iframe tall enough that
 * vertical scrolling reveals every page (Chrome's built-in viewer scrolls
 * pages within the iframe when scrollbar=1 is set on the URL fragment).
 */
.protected-stage {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.protected-pdf,
.protected-stage iframe {
  width: 100% !important;
  max-width: 100%;
  height: 78vh;
  display: block;
}
.protected-img {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
}
@media (max-width: 720px) {
  .modal { padding: 8px; }
  .modal-body { max-height: 96vh; border-radius: 14px; }
  .modal-head { padding: 14px 16px; }
  .modal-content { padding: 14px 12px; }
  .protected-stage { min-height: 60vh; }
  .protected-pdf,
  .protected-stage iframe { height: 80vh; }
  .protected-img { max-height: 80vh; }
  .protected-note { font-size: 0.78rem; padding: 8px 10px; }
}

/* ---- PDF.js inline render container ---- */
.protected-pdfjs {
  width: 100%;
  max-width: 100%;
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 12px;
  background: var(--n-100);
}
.protected-pdfjs canvas {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 720px) {
  .protected-pdfjs { max-height: 80vh; padding: 2px 4px 10px; }
}

/* When the OS shows a screenshot/app-switcher preview, blank out content */
.protected-stage.redacted > * {
  filter: blur(18px);
  opacity: .18;
  pointer-events: none;
}
.protected-stage.redacted::after {
  content: "🔒 Protected content — please return to the page";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(255,255,255,.86);
  color: #7f1d1d;
  font-weight: 600;
  text-align: center;
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Modal back button (mobile-friendly) ---- */
.modal-back {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--n-700);
  cursor: pointer;
  padding: 4px 10px 4px 0;
}
.modal-back:hover { color: var(--n-900); }

/* ---- Full-screen attachment viewer on phones ---- */
@media (max-width: 720px) {
  .modal.modal-fullscreen-mobile { padding: 0 !important; }
  .modal.modal-fullscreen-mobile .modal-body {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .modal.modal-fullscreen-mobile .modal-head {
    border-radius: 0 !important;
    padding: 12px 14px;
  }
  .modal.modal-fullscreen-mobile .modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 10px 24px;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the protected stage and its inner host stack at full document
     height so the modal-body's own scroll handles multi-page navigation. */
  .modal.modal-fullscreen-mobile .protected-stage { max-height: none; }
  .modal.modal-fullscreen-mobile .protected-pdfjs {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .modal.modal-fullscreen-mobile .protected-pdf,
  .modal.modal-fullscreen-mobile .protected-stage iframe {
    height: auto;
    min-height: 70vh;
  }
  .modal.modal-fullscreen-mobile .protected-img {
    max-height: none;
    height: auto;
  }
}

/* =====================================================================
   Admin Dashboard — KPI sparklines + chart cards (revamp)
   --------------------------------------------------------------------- */
/* KPI tiles get a sparkline slot at the bottom and a delta chip in the
   header row. The tile keeps the existing .stat look but gains depth. */
.kpi-strip { gap: 14px; }

.kpi-tile {
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--n-200);
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.kpi-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,19,26,.06); border-color: var(--brand-200); }
.kpi-tile .label { color: var(--n-500); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kpi-tile .value { font-family: var(--font-head); font-size: 1.85rem; font-weight: 700; color: var(--n-900); line-height: 1.05; }
.kpi-tile .sub   { color: var(--n-500); font-size: .73rem; }
.kpi-tile .stat-icon { top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; }

.kpi-spark {
  height: 36px; margin-top: 6px;
  /* Float to the bottom of the tile so all sparklines align even when
     tiles have different label heights. */
}
.kpi-spark canvas { width: 100% !important; height: 100% !important; display: block; }

.kpi-delta {
  font-size: .72rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; line-height: 1.4; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 2px;
}
.kpi-delta:empty { display: none; }
.kpi-delta-up   { background: rgba(22,163,74,.10);  color: #15803d; }
.kpi-delta-down { background: rgba(220,38,38,.10);  color: #b91c1c; }
.kpi-delta-flat { background: rgba(100,116,139,.10); color: #475569; }

/* ---- Chart cards (used on Dashboard pulse + Business Insights) ---- */
.chart-card-elevated {
  border: 1px solid var(--n-200);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .055);
  padding: 18px 18px 14px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  max-width: 100%;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.chart-card-elevated:hover {
  box-shadow: 0 14px 34px rgba(15, 23, 42, .085);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.chart-card-head {
  align-items: flex-start; gap: 12px;
}
.chart-card-head strong { font-size: .98rem; color: var(--n-900); }
.chart-card-head .small { display: block; margin-top: 2px; line-height: 1.4; }

.chart-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8;
  white-space: nowrap; flex-shrink: 0;
}

.chart-canvas-wrap {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #eef2f7;
  padding: 10px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}
.chart-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.chart-row { gap: 16px; }

.engagement-breakdown-native {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.engagement-track-block {
  border: 1px solid var(--n-200);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  min-width: 0;
}
.engagement-track-block > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--n-900);
}

section[data-view="insights"] {
  max-width: 100%;
  overflow-x: hidden;
}
section[data-view="insights"] .grid,
section[data-view="insights"] .card,
section[data-view="insights"] .table-wrap {
  min-width: 0;
  max-width: 100%;
}
section[data-view="insights"] .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
section[data-view="insights"] .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
section[data-view="insights"] .insights-toolbar {
  align-items: flex-end !important;
}
section[data-view="insights"] .insights-toolbar .grow {
  min-width: 0;
}
section[data-view="insights"] #biExportInsightsBtn,
section[data-view="insights"] #biRefreshBtn {
  flex: 0 0 auto;
}
section[data-view="insights"] .table {
  min-width: 680px;
}

/* Frappe Charts heatmap host. Frappe injects an SVG; we just ensure the
   container has consistent height and removes the default white box. */
.frappe-heatmap-host {
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.frappe-heatmap-host .chart-container { width: 100%; }
.frappe-heatmap-host .frappe-chart .chart-legend { font-size: 10px; color: #64748b; }
.frappe-heatmap-host .frappe-chart svg { background: transparent !important; }

/* Today's classes widget */
.today-class-list {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.today-class-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--n-200); border-radius: 10px;
  background: #fff; transition: border-color .15s ease, background .15s ease;
}
.today-class-row:hover { border-color: var(--brand-300); background: #f8fafc; }
.today-class-bullet {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
  flex-shrink: 0;
}
.today-class-meta { flex: 1; min-width: 0; }
.today-class-meta strong { display: block; font-size: .92rem; color: var(--n-900); }

/* Tighter section headers on the analytics surfaces */
section[data-view="dashboard"] h3,
section[data-view="insights"] h3 {
  margin-top: 24px; margin-bottom: 10px;
  font-size: 1.05rem; color: var(--n-900);
  display: flex; align-items: center; gap: 8px;
}
section[data-view="dashboard"] h3::before,
section[data-view="insights"] h3::before {
  content: ""; display: inline-block; width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  border-radius: 2px;
}

/* Mobile: charts stack and shrink heights so they're still legible */
@media (max-width: 800px) {
  .chart-row { grid-template-columns: 1fr !important; }
  section[data-view="insights"] .grid-2,
  section[data-view="insights"] .grid-4 { grid-template-columns: 1fr !important; }
  .engagement-breakdown-native { grid-template-columns: 1fr; }
  .chart-card-elevated { padding: 14px; }
  .kpi-tile .value { font-size: 1.55rem; }
  .kpi-spark { height: 28px; }
}

/* =====================================================================
   MONITOR STUDENTS — filter chips + sortable headers + detail panel
   ===================================================================== */

/* ---- Filter chip bar ---- */
.filter-chip-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 18px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--n-200);
  background: #fff;
  color: var(--n-700);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.filter-chip:hover { border-color: var(--brand-300); background: #f8fafc; }
.filter-chip:active { transform: scale(.98); }
.filter-chip.active {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(37,99,235,.25);
}
.filter-chip .chip-count {
  background: rgba(15,23,42,.06);
  color: inherit;
  padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  min-width: 22px; text-align: center;
}
.filter-chip.active .chip-count { background: rgba(255,255,255,.22); color: #fff; }

.monitor-rules {
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.monitor-rules strong {
  color: #0f172a;
  font-size: .95rem;
}

.fee-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.fee-tabs .tab {
  border-radius: 8px;
  white-space: nowrap;
}
.fee-pane .table-wrap,
.fee-pane > .card,
.fee-pane .chart-card-elevated {
  border-color: #e2e8f0;
}

/* ---- Sortable column headers ---- */
.monitor-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.monitor-table th.sortable:hover { background: #f1f5f9; color: var(--brand-700); }
.monitor-table th.sort-active { color: var(--brand-700); }
.monitor-table th .sort-arrow { font-size: .72rem; opacity: .85; }
.monitor-row { cursor: pointer; transition: background .12s; }
.monitor-row:hover { background: #f8fafc; }

/* ---- Student detail side panel ---- */
.student-panel-modal { align-items: stretch; }
.student-panel-modal .student-panel-body {
  width: 100%;
  max-width: 580px;
  margin-left: auto; /* slide-in from the right */
  height: 100vh;
  border-radius: 14px 0 0 14px;
  display: flex; flex-direction: column;
  animation: spd-slide-in .22s ease;
}
@keyframes spd-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.student-panel-body .modal-content { flex: 1 1 auto; overflow-y: auto; }
.student-panel-body .modal-foot {
  border-top: 1px solid var(--n-200);
  padding: 12px 16px; gap: 10px;
}

.spd-header { padding-bottom: 8px; border-bottom: 1px dashed var(--n-200); }
.spd-stats .stat { padding: 14px; }
.spd-stats .stat .value { font-size: 1.5rem; }

.spd-timeline { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.spd-tl-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
}
.spd-tl-row.spd-tl-security { border-color: rgba(220,38,38,.45); background: #fff7f7; }
.spd-tl-row.spd-tl-attendance { border-color: rgba(8,145,178,.35); background: #f0fbff; }
.spd-tl-icon { font-size: 1.05rem; flex-shrink: 0; line-height: 1.2; }
.spd-tl-main { flex: 1; min-width: 0; }
.spd-tl-label { font-weight: 600; color: var(--n-900); font-size: .92rem; }

/* ---- Detail panel tabs ---- */
.spd-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--n-50);
  border-radius: 10px;
  margin-bottom: 14px;
}
.spd-tabs .tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--n-600);
  font-weight: 600;
  font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.spd-tabs .tab:hover { color: var(--n-900); }
.spd-tabs .tab.active {
  background: #fff;
  color: var(--brand-700);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.spd-tabs .tab .chip { font-size: .68rem; padding: 0 8px; }
.spd-pane.hidden { display: none; }

/* ---- Comment thread inside the detail panel ---- */
.spd-comments { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.spd-comment {
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--brand-400);
  border-radius: 8px;
  background: #fcfcfd;
  padding: 10px 12px;
}
.spd-comment-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  gap: 10px;
}
.spd-comment-meta strong { color: var(--n-900); font-size: .82rem; }
.spd-comment-body { font-size: .9rem; color: var(--n-800); line-height: 1.45; white-space: pre-wrap; }

/* =====================================================================
   BROADCAST HISTORY — readable card-style list
   ===================================================================== */
.broadcast-history { display: flex; flex-direction: column; gap: 10px; }
.broadcast-row {
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--brand-400);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.broadcast-row:hover { border-color: var(--brand-300); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.broadcast-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
}
.broadcast-meta .chip { font-size: .68rem; padding: 2px 8px; }
.broadcast-body {
  font-size: .92rem; color: var(--n-800); line-height: 1.5;
  white-space: pre-wrap;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #f1f5f9;
}

/* =====================================================================
   FEE WHATSAPP PANEL — inline list of clickable wa.me links
   ---------------------------------------------------------------------
   Used by sendUpcomingFeeReminders when 2+ recipients are selected.
   Renders an inline panel above the upcoming list with a real <a> per
   recipient — bypasses popup blockers (the previous window.open()
   approach was getting silently blocked on mobile/Safari).
   ===================================================================== */
.fee-wa-panel {
  border: 1px solid var(--n-200);
  border-left: 4px solid #25d366; /* WhatsApp green */
  background: linear-gradient(180deg, #f0fdf4, #ffffff);
  padding: 14px;
}
.fee-wa-links { display: flex; flex-direction: column; gap: 6px; }
.fee-wa-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  text-decoration: none;
  color: var(--n-800);
  transition: border-color .15s, background .15s, transform .12s;
}
.fee-wa-link:hover {
  border-color: #25d366;
  background: #f7fef9;
  transform: translateX(2px);
}
.fee-wa-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.fee-wa-meta { display: flex; flex-direction: column; min-width: 0; }
.fee-wa-meta strong { color: var(--n-900); font-size: .92rem; }
@media (max-width: 480px) {
  .fee-wa-link {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .fee-wa-link > .small { grid-column: 1 / -1; text-align: right; color: #25d366; font-weight: 600; }
}

@media (max-width: 600px) {
  .student-panel-modal .student-panel-body {
    max-width: 100vw;
    border-radius: 0;
  }
}

/* =====================================================================
   FEE STUDENT PICKER — used by Manual Fee Collection, Temporary Portal
   Access, and the Personalised broadcast mode
   ===================================================================== */
.fee-student-picker {
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 4px;
}
.fee-student-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  font: inherit;
  color: inherit;
}
.fee-student-item:hover { border-color: var(--brand-300); background: #f8fafc; transform: translateX(2px); }
.fee-student-item.active {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, var(--brand-50), #fff);
  box-shadow: inset 3px 0 0 var(--brand-500);
}
.fee-student-name { font-weight: 700; color: var(--n-900); font-size: .92rem; }

/* =====================================================================
   PAGINATION — used by every large list (15 rows/page)
   ===================================================================== */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 14px 0;
  flex-wrap: wrap;
}
.pager-info { white-space: nowrap; }
.pager .btn[disabled] { opacity: .45; pointer-events: none; }
.pager-empty { padding: 10px 0; }

/* =====================================================================
   COCKPIT — Class scoreboard, At-risk list, Pipeline
   ===================================================================== */

/* ---- Class scoreboard table ---- */
.scoreboard-host { display: block; }
.scoreboard-table { display: flex; flex-direction: column; gap: 6px; }
.scoreboard-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1.2fr 1.2fr 1.2fr 1.2fr;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  cursor: pointer;
  font-size: .9rem;
}
.scoreboard-row:hover { background: #f8fafc; border-color: var(--brand-200); transform: translateX(2px); }
.scoreboard-row.scoreboard-head {
  background: transparent; cursor: default;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--n-500);
  border-bottom: 1px solid var(--n-200); border-radius: 0;
  padding-bottom: 8px; margin-bottom: 4px;
}
.scoreboard-row.scoreboard-head:hover { background: transparent; transform: none; }

.health-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.health-badge.health-good { background: rgba(22,163,74,.12); color: #15803d; }
.health-badge.health-warn { background: rgba(202,138,4,.13); color: #a16207; }
.health-badge.health-bad  { background: rgba(220,38,38,.12); color: #b91c1c; }

/* ---- At-risk list ---- */
.atrisk-host {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 200px;
}
.atrisk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--n-200); border-radius: 10px;
  background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.atrisk-row:hover { border-color: var(--brand-300); background: #f8fafc; transform: translateY(-1px); }
.atrisk-score {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.atrisk-score.health-good { background: rgba(22,163,74,.10);  color: #15803d; }
.atrisk-score.health-warn { background: rgba(202,138,4,.12); color: #a16207; }
.atrisk-score.health-bad  { background: rgba(220,38,38,.10); color: #b91c1c; }
.atrisk-main { flex: 1; min-width: 0; }
.atrisk-main strong { color: var(--n-900); font-size: .92rem; }

/* ---- Pipeline ---- */
.pipeline-host { display: flex; flex-direction: column; gap: 18px; }
.pipeline-section { display: flex; flex-direction: column; gap: 8px; }
.pipeline-section-head {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--n-700);
}
.pipeline-count {
  background: var(--brand-50); color: var(--brand-700);
  padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.pipeline-rows { display: flex; flex-direction: column; gap: 6px; }
.pipeline-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--n-200); border-radius: 10px;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.pipeline-row:hover { border-color: var(--brand-300); background: #f8fafc; }
.pipeline-row-soft { background: #fbfcfe; }
.pipeline-meta { min-width: 0; }
.pipeline-meta strong { color: var(--n-900); font-size: .92rem; }

/* Mobile stacking */
@media (max-width: 800px) {
  .scoreboard-row {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    gap: 8px 12px;
  }
  .scoreboard-row > div:first-child { grid-column: 1 / -1; }
  .scoreboard-row.scoreboard-head { display: none; }
  .pipeline-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   ADMIN MOBILE PASS — comprehensive responsiveness for the admin shell
   ---------------------------------------------------------------------
   Targets <= 980px (the existing breakpoint where the side-nav already
   becomes a drawer). We add: a tap-to-close backdrop, horizontally
   scrolling tables and tab strips, KPI grids that collapse cleanly,
   tighter padding on cards, and modals that go full-screen.
   ===================================================================== */

/* Drawer backdrop. Appears whenever .sidebar.open is set. Click to close. */
@media (max-width: 980px) {
  /* Backdrop attached to the body via the ::before pseudo on the open
     sidebar — single rule, no extra HTML needed. */
  .sidebar.open::after {
    content: "";
    position: fixed; inset: 0 0 0 260px;
    background: rgba(15, 23, 42, .35);
    z-index: -1;
    pointer-events: auto;
  }
  /* Make sure the topbar stays visible above the drawer */
  .topbar { position: sticky; top: 0; z-index: 40; }
  .sidebar { box-shadow: 4px 0 24px rgba(15, 23, 42, .15); }

  /* Tighter page padding so things don't crowd the edges */
  .page { padding: 14px 12px 36px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar h1, .topbar .h1 { font-size: 1.05rem; }

  /* KPI strips collapse → 2 columns, then 1 below 480px */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .kpi-tile .value { font-size: 1.45rem; }
  .kpi-tile .label { font-size: .68rem; }
  .kpi-spark { height: 26px; }

  /* All tables scroll horizontally instead of breaking layout. .table-wrap
     already exists in the codebase; this enforces it. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; } /* preserve column structure */
  .table th, .table td { padding: 8px 10px; font-size: .85rem; }

  /* Fee tabs strip — let the row scroll instead of wrapping into 5 lines. */
  .tabs.fee-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-left: -4px; margin-right: -4px;
  }
  .tabs.fee-tabs .tab { white-space: nowrap; flex-shrink: 0; }
  .tabs.fee-tabs::-webkit-scrollbar { height: 4px; }

  /* Filter chip bars wrap on mobile (already do, but force consistency) */
  .filter-chip-bar { gap: 6px; }
  .filter-chip { font-size: .76rem; padding: 6px 10px; }
  .filter-chip .chip-count { font-size: .66rem; padding: 1px 6px; }

  /* Chart cards — shrink heights so a chart doesn't dominate the screen */
  .chart-card-elevated { padding: 14px; }
  .chart-card-elevated .chart-canvas-wrap { min-height: 220px !important; height: 220px !important; }

  /* Form rows: stop trying to fit 4 columns. */
  .row { gap: 8px; }
  .field.grow { min-width: 0; }

  /* Cockpit at-risk + scoreboard rows — already handled but tighten. */
  .scoreboard-table { gap: 4px; }
  .scoreboard-row { padding: 10px 12px; font-size: .85rem; }

  /* Modals go full-screen on mobile. The .modal-fullscreen-mobile class
     was already present for some modals; promote ALL modals to that
     behaviour at this breakpoint. */
  .modal {
    align-items: stretch;
    padding: 0;
  }
  .modal .modal-body {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    display: flex; flex-direction: column;
  }
  .modal .modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  .modal .modal-foot {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .modal .modal-foot .btn { flex: 1 1 auto; }
  /* Student detail panel was already a slide-in on the right; on mobile
     it should also be full-screen rather than 580px-wide. */
  .student-panel-modal .student-panel-body {
    margin-left: 0;
    border-radius: 0;
    height: 100vh;
    max-width: 100vw;
  }

  /* Fee picker stacks — track/grade/search above, student list below. */
  .fee-student-picker { max-height: 280px; }
  .fee-student-item { padding: 10px; }

  /* Pagination stays one row but tightens */
  .pager { gap: 8px; padding: 12px 0; flex-wrap: wrap; }
  .pager-info { font-size: .72rem; flex-basis: 100%; text-align: center; order: -1; }
}

@media (max-width: 480px) {
  /* Below 480px collapse the KPI grid fully */
  .grid-4 { grid-template-columns: 1fr !important; }
  .stat .value { font-size: 1.45rem; }
  /* Two KPI tiles side-by-side feels too cramped under 380px */
  .kpi-tile { padding: 14px; }
}

/* =====================================================================
   ADMIN MOBILE — second pass (per-tab fixes)
   ---------------------------------------------------------------------
   The first pass handled global shell. This block handles the fiddly
   per-tab issues: inline max-width inputs that don't stretch on small
   screens, tab strips on Class Operation / Zoom / CMS that wrap into
   too many lines, and form rows with multiple .field.grow blocks that
   collide.
   ===================================================================== */
@media (max-width: 800px) {
  /* Inputs and selects with inline `style="max-width:..."` should
     stretch to fill the row on mobile. Inline styles need !important
     to override (specifically the section-scoped form fields). */
  section[data-view] .input,
  section[data-view] .select,
  section[data-view] textarea.textarea {
    max-width: 100% !important;
    width: 100%;
  }
  /* Filter rows that use inline `style="display:flex; gap:12px;..."`
     still have flex-wrap but their children don't shrink. Force
     min-width:0 on the children so they fit. */
  section[data-view] .row > * { min-width: 0; }
  /* Header rows (.row.between) — let buttons wrap below the heading
     instead of squishing the heading. */
  section[data-view] .row.between { flex-wrap: wrap; }

  /* All tab strips (not just .fee-tabs) scroll horizontally so the
     row stays one-line-tall. Affects Class Operation, Zoom Links,
     CMS, Insights, etc. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .tabs .tab { white-space: nowrap; flex-shrink: 0; }
  .tabs::-webkit-scrollbar { height: 4px; }

  /* Stat icons hidden on very small screens to give the value more room */
  .stat-icon { top: 10px; right: 10px; width: 28px; height: 28px; font-size: .9rem; }

  /* Form rows with explicit `.row { flex-wrap: wrap }` already wrap,
     but each .field.grow gets a default 50% width in a flex container
     when widths are tight — force them full-width below 600px. */
  .row > .field.grow { flex-basis: 100%; }

  /* Sortable column headers in Monitor — hide the arrow at narrow
     widths so the header text doesn't wrap into two lines. */
  .monitor-table th .sort-arrow { display: none; }
  /* And let the monitor table breathe horizontally */
  .monitor-table { min-width: 720px; }

  /* CMS preview thumbnails — cap height so the form doesn't push the
     submit button miles down the page on a long mobile view. */
  .cms-preview { max-height: 180px; }
  .cms-preview img, .cms-preview iframe { max-height: 180px; object-fit: cover; }

  /* Fee picker grid (track+grade left card, student list right card) —
     stack on mobile rather than side-by-side. */
  [data-fee-pane="collect"] .grid-2,
  [data-fee-pane="access"] .grid-2 {
    grid-template-columns: 1fr !important;
  }
  .fee-student-picker { max-height: 240px; }

  /* Broadcast history rows — let metadata wrap naturally */
  .broadcast-meta { gap: 6px; }
  .broadcast-meta .chip { font-size: .65rem; padding: 1px 6px; }

  /* Class Operation Status — keep status pills, collapse the side bars */
  .classops-grid { grid-template-columns: 1fr !important; }

  /* Zoom links list cards already wrap; just make sure the action
     buttons don't squish */
  [data-view="zoom"] .row .btn { flex-shrink: 0; }

  /* Profile/promote/admin tables: title + email in one cell stack
     instead of overflowing */
  .table td strong { display: block; }
  .table td .small.muted { display: block; word-break: break-word; }

  /* Pagination chip — info line already moves up on mobile via the
     earlier pass; ensure the buttons keep equal-width visual balance */
  .pager .btn { min-width: 72px; }
}

@media (max-width: 480px) {
  /* Side-foot Logout button stays full-width inside the drawer */
  .sidebar .side-foot .btn { width: 100%; }
  /* Tighten the topbar for very small phones */
  .topbar .chip { font-size: .68rem; padding: 2px 8px; }
  .topbar .avatar { width: 28px; height: 28px; font-size: .8rem; }
  /* Cockpit "Today's classes" rows: name + Join wrap below subject */
  .today-class-row { flex-wrap: wrap; }
  .today-class-row .today-class-meta { flex: 1 1 100%; }
  .today-class-row .btn { flex: 1 1 100%; }
  /* At-risk + pipeline rows: stack the Email/Approve button under name */
  .atrisk-row, .pipeline-row { flex-wrap: wrap; }
  .atrisk-row > a, .pipeline-row > .btn { flex: 1 1 100%; }
  /* Detail panel tab labels truncate the count chip if it pushes too wide */
  .spd-tabs .tab { font-size: .8rem; padding: 8px 10px; }
}

/* =====================================================================
   ADMIN MOBILE — final hardening pass
   ---------------------------------------------------------------------
   The earlier passes covered the global shell + many inline-styled
   inputs. This pass attacks the remaining problems users reported:
     • Heading text too big on Class Operation, Zoom, etc.
     • Pending Approvals + All Students tables overflow / collide
     • Business Insights cards stack wrong + chart heights too tall
     • Monitor Students chip strip wraps poorly
     • Fees & Revenue tabs + nested forms still cramped
     • Security Alerts, CMS, Activity Log generic table issues
   The selectors are deliberately scoped to `section[data-view]` so they
   ONLY affect the admin shell (not the public landing page).
   ===================================================================== */
@media (max-width: 800px) {
  /* HEADING SIZES — global h1 was 2.3rem (=37px), way too big for a
     phone. Cap aggressively inside admin sections. */
  section[data-view] h1 { font-size: 1.35rem !important; line-height: 1.2; margin: 8px 0 6px; }
  section[data-view] h2 { font-size: 1.15rem !important; line-height: 1.25; }
  section[data-view] h3 { font-size: 1rem !important; line-height: 1.3; margin-top: 18px; }
  section[data-view] h4 { font-size: .92rem !important; }
  section[data-view] p.sub { font-size: .82rem; line-height: 1.4; margin: 4px 0 14px; }
  section[data-view] .help, section[data-view] .small { font-size: .78rem; line-height: 1.4; }
  /* Card paddings tighter */
  section[data-view] .card { padding: 12px; }
  section[data-view] .card h3 { margin-top: 0; }

  /* Form labels + inputs tighter */
  section[data-view] .field { margin-bottom: 12px; }
  section[data-view] .field label { font-size: .82rem; }
  section[data-view] .input,
  section[data-view] .select,
  section[data-view] .textarea {
    font-size: .92rem;
    padding: 9px 10px;
  }
  section[data-view] .btn { font-size: .85rem; padding: 8px 12px; }
  section[data-view] .btn-sm { font-size: .78rem; padding: 6px 10px; }

  /* Stat tiles inside views — tighter so two fit per row cleanly */
  section[data-view] .stat { padding: 12px; }
  section[data-view] .stat .label { font-size: .65rem; letter-spacing: .03em; }
  section[data-view] .stat .value { font-size: 1.25rem; }
  section[data-view] .stat .sub { font-size: .68rem; }

  /* All grid containers inside views collapse properly. The earlier rule
     covered grid-2/3/4 globally but inline `style="grid-template-columns:..."`
     can override it; force the viewport-width override for inline too. */
  section[data-view] .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Filter chip bars on Monitor Students wrap to multiple rows; tighten
     the chip itself so 5 chips fit two-rows max */
  .filter-chip-bar { gap: 5px; }
  .filter-chip { padding: 5px 9px; font-size: .72rem; }

  /* SPECIFIC TABS ----------------------------------------------------- */

  /* Pending + All Students: the .grid-auto stat strip on All Students
     was sized with minmax(240px, 1fr) which keeps it 1-col on phones —
     that's fine, but the values look small. Bump them. */
  section[data-view="students"] .grid-auto .stat .value { font-size: 1.4rem; }
  section[data-view="students"] .row { gap: 8px; }

  /* Class Operation Status — h3 text was bigger than the body. Cap. */
  section[data-view="classops"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="classops"] .row .field.grow { flex: 1 1 100%; }
  section[data-view="classops"] .row.between > div { flex: 1 1 100%; }

  /* Zoom Links + Attendance — the big card stack feels heavy. Trim. */
  section[data-view="zoom"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="zoom"] .row .field.grow { flex: 1 1 100%; }
  section[data-view="zoom"] .card { padding: 14px; }

  /* Business Insights — chart cards' canvas wraps were already capped
     globally. Add per-card spacing fixes + force the KPI strip to 2-col
     even when grid-4 ought to collapse to 1 (more useful at phone size). */
  section[data-view="insights"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  section[data-view="insights"] .chart-card-elevated { padding: 12px; }
  section[data-view="insights"] .chart-canvas-wrap { height: 220px !important; }
  section[data-view="insights"] .chart-card-head { gap: 8px; flex-wrap: wrap; }
  section[data-view="insights"] .chart-tag { font-size: .62rem; }

  /* Monitor Students — the grid-4 stat row at top + chip bar + table */
  section[data-view="monitor"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  section[data-view="monitor"] .filter-chip-bar { margin: 0 0 12px; }

  /* Fees & Revenue — the tab strip at top + tab panes inside */
  section[data-view="fees"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  section[data-view="fees"] .grid-3 { grid-template-columns: 1fr !important; }
  section[data-view="fees"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="fees"] .row .field.grow,
  section[data-view="fees"] .row .field { flex: 1 1 100%; }
  section[data-view="fees"] .fee-pane { padding-top: 4px; }
  /* Step 1/Step 2 picker cards — already collapse, just tighten gaps */
  section[data-view="fees"] .grid-2 { gap: 10px !important; }

  /* Security Alerts table */
  section[data-view="security"] .table-wrap { margin: 0 -4px; }
  section[data-view="security"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* CMS — has tabs at top + content forms */
  section[data-view="cms"] .tabs { font-size: .8rem; }
  section[data-view="cms"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="cms"] .row .field.grow,
  section[data-view="cms"] .row .field { flex: 1 1 100%; }
  section[data-view="cms"] .cms-preview { max-height: 160px; }

  /* Activity Log — table is already wrapped; just trim header layout */
  section[data-view="activity"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="activity"] .row .input,
  section[data-view="activity"] .row .select { flex: 1 1 100%; }

  /* Admins management — Promote table */
  section[data-view="admins"] .row { flex-wrap: wrap; gap: 8px; }
  section[data-view="admins"] .table { font-size: .85rem; }

  /* Profile section — admin only — make the form readable */
  section[data-view="profile"] .row { flex-wrap: wrap; }
  section[data-view="profile"] .row .field { flex: 1 1 100%; }

  /* Topbar — show sidebar toggle clearly, shrink the page title */
  .topbar h1, .topbar .h1 { font-size: 1rem; }
  /* The topbar uses .pageTitle id in some places */
  #pageTitle { font-size: 1rem !important; }
}

/* Phones below 480px — do not flatten the Insights KPI strip to 1 col;
   keep 2 since active/new-signups/retention/joins are paired metrics
   that read better side-by-side. Same for Monitor and Fees. */
@media (max-width: 480px) {
  section[data-view] h1 { font-size: 1.2rem !important; }
  section[data-view] h3 { font-size: .95rem !important; }
  section[data-view] .stat .value { font-size: 1.15rem; }
  /* Force 2-col KPIs to stay 2-col even on narrow phones */
  section[data-view="insights"] .grid-4,
  section[data-view="monitor"] .grid-4,
  section[data-view="fees"] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =====================================================================
   MOBILE TABLES — flip every admin table into label-value CARDS
   ---------------------------------------------------------------------
   Strategy: on mobile, hide the <thead>, make every <tr> behave like a
   card, and turn every <td> into a labeled row using attr(data-label).
   The data-label attribute is set by labelMobileTables() in JS — it
   walks the matching <thead> once and copies header text into each
   <td>. So every column shows on mobile without horizontal scroll.
   ===================================================================== */
@media (max-width: 800px) {
  /* Disable the existing horizontal-scroll table behaviour so the
     card layout takes over. The wrapper still scrolls if min-width
     forces it, which would clash. */
  section[data-view] .table-wrap { overflow-x: visible; }
  section[data-view] .table-wrap table { min-width: 0; }

  /* Hide the header row — labels are inlined per cell instead. */
  section[data-view] .table thead { display: none; }

  /* Each row is a card with rounded corners, separating card from card. */
  section[data-view] .table,
  section[data-view] .table tbody,
  section[data-view] .table tr,
  section[data-view] .table td {
    display: block;
    width: 100%;
  }
  section[data-view] .table tr {
    border: 1px solid var(--n-200);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
  }
  section[data-view] .table td {
    border: 0;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .88rem;
    line-height: 1.4;
    text-align: right;
  }
  /* Header label, taken from data-label set by labelMobileTables(). */
  section[data-view] .table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
    color: var(--n-500);
    text-align: left;
    padding-right: 8px;
  }
  /* When a cell has no label (e.g. action button column), just let the
     content fill the row. */
  section[data-view] .table td:not([data-label])::before,
  section[data-view] .table td[data-label=""]::before {
    display: none;
  }
  /* Action cells (the right-most column with Approve/Reject etc.) work
     better stretched full-width inside the card. */
  section[data-view] .table td:last-child {
    border-top: 1px dashed var(--n-100);
    margin-top: 6px;
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  section[data-view] .table td:last-child .btn { flex: 1 1 auto; min-width: 96px; }

  /* Empty/spinner rows ("Loading…", "No results") still look fine */
  section[data-view] .table tr td.text-center {
    text-align: center;
    border-top: 0; padding-top: 0; margin-top: 0;
  }

  /* Scoreboard table uses its own grid layout, NOT the .table card flip.
     Don't touch it. */
  .scoreboard-table .scoreboard-row { display: grid !important; }
}

/* =====================================================================
   MOBILE CHIPS — stack horizontal chip bars vertically on mobile
   ---------------------------------------------------------------------
   Filter chip bars (Monitor Students status filter, broadcast modes,
   etc.) read as a horizontal row on web but should become one chip per
   line on a phone — easier to tap, no truncation.
   ===================================================================== */
@media (max-width: 600px) {
  .filter-chip-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .filter-chip {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: .82rem;
  }
  .filter-chip .chip-count {
    font-size: .68rem;
  }
}

/* =====================================================================
   STUDENT HOME — alert ticker below the blue welcome block
   ===================================================================== */
.home-alerts-list { display: flex; flex-direction: column; gap: 10px; }
.home-alert-card {
  border-left: 5px solid var(--brand-500);
  background: linear-gradient(180deg, #f0f9ff, #ffffff);
  transition: transform .15s, box-shadow .15s;
}
.home-alert-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.home-alert-card.home-alert-urgent {
  border-left-color: #dc2626;
  background: linear-gradient(180deg, #fff1f2, #ffffff);
  animation: home-alert-pulse 2.5s ease-in-out infinite;
}
@keyframes home-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.10); }
}
.home-alert-eyebrow {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-700);
}
.home-alert-card.home-alert-urgent .home-alert-eyebrow { color: #991b1b; }

.student-fee-card {
  margin: 16px 0;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff, #fff);
}
.student-fee-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.student-fee-grid > div {
  border: 1px solid var(--n-100);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.student-fee-grid span {
  display: block;
  color: var(--n-500);
  font-size: .72rem;
  margin-bottom: 3px;
}
.student-fee-grid strong {
  display: block;
  font-size: .92rem;
  color: var(--n-900);
}

.fee-upcoming-card { overflow: hidden; }
.fee-upcoming-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fee-upcoming-group {
  border: 1px solid var(--n-100);
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
}
.fee-upcoming-group-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-weight: 800;
  color: var(--n-900);
  border-bottom: 1px solid var(--n-100);
}
.fee-upcoming-group-title span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--n-500);
}
.fee-upcoming-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1.6fr) minmax(130px, 1fr) minmax(110px, .8fr) minmax(120px, .9fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--n-100);
  padding: 12px;
  background: #fff;
  cursor: pointer;
}
.fee-upcoming-row:hover { background: #f8fafc; }
.fee-upcoming-row:last-child { border-bottom: 0; }
.fee-upcoming-row > div {
  min-width: 0;
}
.fee-upcoming-row strong {
  display: block;
  overflow-wrap: anywhere;
}
.fee-upcoming-select {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--n-200);
  border-radius: 8px;
  background: #fff;
}
.fee-upcoming-select input {
  margin: 0;
}
.fee-upcoming-actions .chip {
  min-height: 32px;
  gap: 8px;
}
.fee-month-summary {
  width: 100%;
  overflow: hidden;
}
.fee-month-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.fee-month-chip {
  flex: 0 0 178px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border: 1px solid var(--n-200);
  border-radius: 12px;
  background: #fff;
  color: var(--n-700);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.fee-month-chip:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.fee-month-chip.active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-800);
}
.fee-month-chip.clear {
  justify-content: center;
  align-items: center;
  flex-basis: 120px;
}
.fee-month-chip span {
  font-size: .72rem;
  color: var(--n-500);
}

.invoice-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}
.invoice-preview-paper {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
.invoice-preview-actions {
  border: 1px solid var(--n-200);
  border-radius: 14px;
  padding: 16px;
  background: #f8fafc;
  position: sticky;
  top: 82px;
}
.invoice-doc {
  color: #0f172a;
}
.invoice-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 18px;
}
.invoice-doc-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 8px;
}
.invoice-doc-head h1,
.invoice-doc-head h2 {
  margin: 0 0 6px;
}
.invoice-doc-head p,
.invoice-doc-box p {
  margin: 6px 0 0;
  color: #64748b;
}
.invoice-doc-meta {
  text-align: right;
}
.invoice-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.invoice-doc-box {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
}
.invoice-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
}
.invoice-doc-table th,
.invoice-doc-table td {
  border-bottom: 1px solid #e2e8f0;
  padding: 10px;
  text-align: left;
}
.invoice-doc-table td:last-child,
.invoice-doc-table th:last-child {
  text-align: right;
}
.invoice-doc-total {
  font-size: 1.25rem;
  font-weight: 800;
  text-align: right;
  margin-top: 16px;
}
.invoice-doc > .small.muted {
  border-top: 1px solid #e2e8f0;
  margin-top: 18px;
  padding-top: 12px;
}

@media (max-width: 800px) {
  .invoice-preview-layout {
    grid-template-columns: 1fr;
  }
  .invoice-preview-actions {
    position: static;
  }
  .invoice-preview-paper {
    padding: 14px;
  }
  .invoice-doc-head,
  .invoice-doc-grid {
    grid-template-columns: 1fr;
    display: grid;
  }
  .invoice-doc-meta {
    text-align: left;
  }
}

/* Final student-mobile override. This lives after the admin mobile blocks so
   the student portal keeps its bottom-app navigation instead of inheriting
   the admin drawer behaviour. */
@media (max-width: 720px) {
  .student-app {
    display: block !important;
    grid-template-columns: none !important;
    background: #f1f5f9;
  }
  .student-app .main {
    min-height: 100vh;
    padding-bottom: 88px;
  }
  .student-app .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 74px !important;
    transform: none !important;
    z-index: 90 !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--n-200);
    border-right: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .student-app .sidebar.open::after {
    display: none !important;
  }
  .student-app .sidebar .brand,
  .student-app .sidebar .side-foot {
    display: none !important;
  }
  .student-app .side-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
    min-width: max-content;
  }
  .student-app .side-nav a {
    flex: 0 0 74px;
    height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 7px 6px;
    border-radius: 14px;
    font-size: .66rem;
    line-height: 1.1;
    text-align: center;
  }
  .student-app .mobile-toggle {
    display: none !important;
  }
  .student-app .topbar {
    position: sticky !important;
    top: 0;
    z-index: 80;
    padding: 10px 12px;
  }
  .student-app .page {
    padding: 14px 12px 26px !important;
  }
  .student-app section[data-view="home"] .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .student-fee-grid {
    grid-template-columns: 1fr;
  }
  .student-app #recentGrid,
  .student-app #notesGrid,
  .student-app #videosGrid,
  .student-app #assignGrid,
  .student-app #papersGrid,
  .student-app #examsGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 800px) {
  section[data-view="fees"] .fee-tabs {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
  }
  section[data-view="fees"] .fee-tabs .tab {
    flex: 0 0 auto;
    min-height: 40px;
  }
  section[data-view="fees"] .fee-pane > .row:first-child .field,
  section[data-view="fees"] .fee-pane > .row:first-child .input,
  section[data-view="fees"] .fee-pane > .row:first-child .select,
  section[data-view="fees"] .fee-pane > .row:first-child .btn {
    flex: 1 1 100%;
    max-width: none !important;
  }
  .fee-upcoming-row {
    grid-template-columns: 1fr;
    gap: 9px;
    align-items: stretch;
  }
  .fee-upcoming-row .btn {
    width: 100%;
  }
  section[data-view="fees"] .chart-canvas-wrap {
    height: 220px !important;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .student-app section[data-view="home"] .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   SUPER ADMIN MOBILE POLISH
   ---------------------------------------------------------------------
   Final override for the three dense superadmin views. These sections
   contain charts, table outputs, tab bars, and generated inline styles,
   so this block intentionally lives last and uses narrow selectors.
   ===================================================================== */
@media (max-width: 820px) {
  .app:not(.student-app),
  .app:not(.student-app) .main,
  .app:not(.student-app) .page,
  .app:not(.student-app) section[data-view="insights"],
  .app:not(.student-app) section[data-view="monitor"],
  .app:not(.student-app) section[data-view="fees"] {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app:not(.student-app) section[data-view="insights"],
  .app:not(.student-app) section[data-view="monitor"],
  .app:not(.student-app) section[data-view="fees"] {
    padding-bottom: 24px;
  }

  .app:not(.student-app) section[data-view="insights"] > *,
  .app:not(.student-app) section[data-view="monitor"] > *,
  .app:not(.student-app) section[data-view="fees"] > *,
  .app:not(.student-app) section[data-view="fees"] .fee-pane > * {
    max-width: 100%;
    min-width: 0;
  }

  .app:not(.student-app) section[data-view="insights"] h1,
  .app:not(.student-app) section[data-view="monitor"] h1,
  .app:not(.student-app) section[data-view="fees"] h1 {
    font-size: 1.28rem !important;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .app:not(.student-app) section[data-view="insights"] .sub,
  .app:not(.student-app) section[data-view="monitor"] .sub,
  .app:not(.student-app) section[data-view="fees"] .sub {
    font-size: .8rem;
    line-height: 1.45;
  }

  .app:not(.student-app) section[data-view="insights"] .row,
  .app:not(.student-app) section[data-view="monitor"] .row,
  .app:not(.student-app) section[data-view="fees"] .row {
    width: 100%;
    max-width: 100%;
    gap: 8px !important;
  }

  .app:not(.student-app) section[data-view="insights"] .field,
  .app:not(.student-app) section[data-view="monitor"] .field,
  .app:not(.student-app) section[data-view="fees"] .field,
  .app:not(.student-app) section[data-view="insights"] .btn,
  .app:not(.student-app) section[data-view="monitor"] .btn,
  .app:not(.student-app) section[data-view="fees"] .btn,
  .app:not(.student-app) section[data-view="insights"] .input,
  .app:not(.student-app) section[data-view="monitor"] .input,
  .app:not(.student-app) section[data-view="fees"] .input,
  .app:not(.student-app) section[data-view="insights"] .select,
  .app:not(.student-app) section[data-view="monitor"] .select,
  .app:not(.student-app) section[data-view="fees"] .select {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app:not(.student-app) section[data-view="insights"] .insights-toolbar .field,
  .app:not(.student-app) section[data-view="insights"] .insights-toolbar .btn,
  .app:not(.student-app) section[data-view="fees"] .fee-pane > .row:first-child .field,
  .app:not(.student-app) section[data-view="fees"] .fee-pane > .row:first-child .btn {
    flex: 1 1 100% !important;
    width: 100%;
  }

  .app:not(.student-app) section[data-view="insights"] .grid,
  .app:not(.student-app) section[data-view="monitor"] .grid,
  .app:not(.student-app) section[data-view="fees"] .grid {
    width: 100%;
    min-width: 0;
  }

  .app:not(.student-app) section[data-view="insights"] .grid-4,
  .app:not(.student-app) section[data-view="monitor"] .grid-4,
  .app:not(.student-app) section[data-view="fees"] .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .app:not(.student-app) section[data-view="insights"] .grid-2,
  .app:not(.student-app) section[data-view="insights"] .grid-3,
  .app:not(.student-app) section[data-view="monitor"] .grid-2,
  .app:not(.student-app) section[data-view="monitor"] .grid-3,
  .app:not(.student-app) section[data-view="fees"] .grid-2,
  .app:not(.student-app) section[data-view="fees"] .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .app:not(.student-app) section[data-view="insights"] .stat,
  .app:not(.student-app) section[data-view="monitor"] .stat,
  .app:not(.student-app) section[data-view="fees"] .stat {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 12px;
  }

  .app:not(.student-app) section[data-view="insights"] .stat .value,
  .app:not(.student-app) section[data-view="monitor"] .stat .value,
  .app:not(.student-app) section[data-view="fees"] .stat .value {
    font-size: 1.12rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .app:not(.student-app) section[data-view="insights"] .stat .label,
  .app:not(.student-app) section[data-view="monitor"] .stat .label,
  .app:not(.student-app) section[data-view="fees"] .stat .label {
    font-size: .61rem;
    letter-spacing: .035em;
  }

  .app:not(.student-app) section[data-view="insights"] .stat-icon,
  .app:not(.student-app) section[data-view="monitor"] .stat-icon,
  .app:not(.student-app) section[data-view="fees"] .stat-icon {
    display: none;
  }

  .app:not(.student-app) section[data-view="insights"] .card,
  .app:not(.student-app) section[data-view="monitor"] .card,
  .app:not(.student-app) section[data-view="fees"] .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 14px;
    padding: 12px;
  }

  .app:not(.student-app) section[data-view="insights"] .card[style*="overflow-x:auto"],
  .app:not(.student-app) section[data-view="monitor"] .card[style*="overflow-x:auto"],
  .app:not(.student-app) section[data-view="fees"] .card[style*="overflow-x:auto"] {
    overflow-x: visible !important;
  }

  .app:not(.student-app) section[data-view="insights"] .chart-card-head,
  .app:not(.student-app) section[data-view="monitor"] .chart-card-head,
  .app:not(.student-app) section[data-view="fees"] .chart-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .app:not(.student-app) section[data-view="insights"] .chart-card-head > div,
  .app:not(.student-app) section[data-view="monitor"] .chart-card-head > div,
  .app:not(.student-app) section[data-view="fees"] .chart-card-head > div {
    flex: 1 1 100%;
    min-width: 0;
  }

  .app:not(.student-app) section[data-view="insights"] .chart-tag,
  .app:not(.student-app) section[data-view="monitor"] .chart-tag,
  .app:not(.student-app) section[data-view="fees"] .chart-tag {
    font-size: .62rem;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .app:not(.student-app) section[data-view="insights"] .chart-canvas-wrap,
  .app:not(.student-app) section[data-view="monitor"] .chart-canvas-wrap,
  .app:not(.student-app) section[data-view="fees"] .chart-canvas-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 210px !important;
    min-height: 210px !important;
    overflow: hidden;
  }

  .app:not(.student-app) section[data-view="insights"] canvas,
  .app:not(.student-app) section[data-view="monitor"] canvas,
  .app:not(.student-app) section[data-view="fees"] canvas,
  .app:not(.student-app) section[data-view="insights"] svg,
  .app:not(.student-app) section[data-view="monitor"] svg,
  .app:not(.student-app) section[data-view="fees"] svg {
    max-width: 100% !important;
  }

  .app:not(.student-app) section[data-view="monitor"] .filter-chip-bar,
  .app:not(.student-app) section[data-view="fees"] .filter-chip-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
  }

  .app:not(.student-app) section[data-view="monitor"] .filter-chip,
  .app:not(.student-app) section[data-view="fees"] .filter-chip {
    width: 100%;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .app:not(.student-app) section[data-view="fees"] .tabs.fee-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .app:not(.student-app) section[data-view="fees"] .tabs.fee-tabs .tab {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    border-radius: 12px;
    padding: 10px 12px;
  }

  .app:not(.student-app) section[data-view="fees"] .fee-pane {
    width: 100%;
    max-width: 100%;
  }

  .app:not(.student-app) section[data-view="fees"] .fee-student-picker {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .app:not(.student-app) section[data-view="fees"] .fee-student-item,
  .app:not(.student-app) section[data-view="fees"] .broadcast-row,
  .app:not(.student-app) section[data-view="fees"] .fee-upcoming-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app:not(.student-app) section[data-view="fees"] .fee-upcoming-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .app:not(.student-app) section[data-view="fees"] .fee-upcoming-row .btn {
    width: 100%;
  }

  .app:not(.student-app) section[data-view="insights"] .table,
  .app:not(.student-app) section[data-view="monitor"] .table,
  .app:not(.student-app) section[data-view="fees"] .table,
  .app:not(.student-app) section[data-view="insights"] .table tbody,
  .app:not(.student-app) section[data-view="monitor"] .table tbody,
  .app:not(.student-app) section[data-view="fees"] .table tbody,
  .app:not(.student-app) section[data-view="insights"] .table tr,
  .app:not(.student-app) section[data-view="monitor"] .table tr,
  .app:not(.student-app) section[data-view="fees"] .table tr,
  .app:not(.student-app) section[data-view="insights"] .table td,
  .app:not(.student-app) section[data-view="monitor"] .table td,
  .app:not(.student-app) section[data-view="fees"] .table td {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .app:not(.student-app) section[data-view="insights"] .table td,
  .app:not(.student-app) section[data-view="monitor"] .table td,
  .app:not(.student-app) section[data-view="fees"] .table td {
    align-items: flex-start;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .app:not(.student-app) section[data-view="insights"] .table td::before,
  .app:not(.student-app) section[data-view="monitor"] .table td::before,
  .app:not(.student-app) section[data-view="fees"] .table td::before {
    max-width: 42%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app:not(.student-app) section[data-view="insights"] .pager,
  .app:not(.student-app) section[data-view="monitor"] .pager,
  .app:not(.student-app) section[data-view="fees"] .pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .app:not(.student-app) section[data-view="insights"] .pager-info,
  .app:not(.student-app) section[data-view="monitor"] .pager-info,
  .app:not(.student-app) section[data-view="fees"] .pager-info {
    grid-column: 1 / -1;
    white-space: normal;
    text-align: center;
    font-size: .72rem;
  }

  .app:not(.student-app) section[data-view="insights"] .pager .btn,
  .app:not(.student-app) section[data-view="monitor"] .pager .btn,
  .app:not(.student-app) section[data-view="fees"] .pager .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .app:not(.student-app) section[data-view="insights"] .grid-4,
  .app:not(.student-app) section[data-view="monitor"] .grid-4,
  .app:not(.student-app) section[data-view="fees"] .grid-4 {
    grid-template-columns: 1fr !important;
  }
}