/* /public/assets/css/style.css
   Monday.com-inspired design system for Attendance MS
   ------------------------------------------------------------------ */

:root {
  /* monday.com-style palette */
  --mon-blue: #0073ea;
  --mon-blue-dark: #0060b9;
  --mon-blue-light: #e6f1fd;
  --mon-purple: #a25ddc;
  --mon-purple-light: #f3e9fb;
  --mon-green: #00c875;
  --mon-green-light: #e0f9ee;
  --mon-red: #e2445c;
  --mon-red-light: #fce9eb;
  --mon-orange: #fdab3d;
  --mon-orange-light: #fef3e3;
  --mon-yellow: #ffcb00;
  --mon-yellow-light: #fff8db;

  --ink: #323338;
  --ink-soft: #676879;
  --ink-faint: #9699a6;
  --line: #e6e9ef;
  --surface: #ffffff;
  --canvas: #f6f7fb;

  /* Theme tokens — every colour that used to be hardcoded now lives here so the
     dark theme ([data-bs-theme="dark"], see the end of this file) can swap it. */
  --line-strong: #c7ccd6;
  --row-hover: #fafbff;
  --gray-light: #eef0f4;
  --gray-line: #d3d6de;
  --scroll-thumb: #d3d6de;
  --scroll-thumb-hover: #b6bac6;
  --link: var(--mon-blue);
  --on-blue-light: var(--mon-blue-dark);
  --on-purple-light: #7a3ca8;
  --on-green-light: #00744a;
  --on-red-light: #b8283e;
  --on-orange-light: #91600a;
  --on-yellow-light: #6b5200;
  --text-success: #00875a;
  --text-warning: #b06a00;
  --text-danger: var(--mon-red);
  --text-info: var(--mon-purple);

  /* keep old names mapped so any un-refactored rule still works */
  --brand: var(--mon-blue);
  --brand-dark: var(--mon-blue-dark);
  --brand-light: var(--mon-blue-light);
  --sidebar-bg: #ffffff;
  --sidebar-hover: #f0f3ff;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(37, 39, 74, 0.06), 0 1px 1px rgba(37, 39, 74, 0.04);
  --shadow-md: 0 8px 24px rgba(37, 39, 74, 0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

button, .btn, a.btn, .nav-link, .status-opt { touch-action: manipulation; }

body {
  background-color: var(--canvas);
  font-family: 'Figtree', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  font-size: 0.94rem;
  /* Every wide table now scrolls inside its own .table-responsive wrapper,
     so the page itself should never grow a horizontal scrollbar. This also
     stops Bootstrap's modal-open scrollbar-compensation padding from ever
     interacting with page-level horizontal overflow (the cause of the
     layout jump/squish that used to happen when opening a modal on a page
     with a wide, unwrapped table).

     NOTE: this must be `clip`, not `hidden`. With `hidden` on both <html> and
     <body>, <body> becomes its own scroll container, and that silently breaks
     every `position: sticky` element (the sidebar and topbar scrolled away
     with the page). `clip` trims the overflow without creating a scroll
     container; <html> below still handles it for the viewport. */
  overflow-x: clip;
}
html { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

a { color: var(--link); text-decoration: none; }

::selection { background: var(--mon-blue-light); color: var(--on-blue-light); }

/* ---------- Scrollbar (subtle, monday-like) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 20px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- Auth pages ---------- */
/* Animated auth background (see assets/js/auth-transition.js, which swaps data-auth-page and feeds
 * the cursor parallax). Colors / angle / glow + orb positions are registered custom properties so
 * the browser can animate them when the page changes. They inherit so the two floating orbs
 * (::before / ::after) follow the same animated values. Browsers without @property switch instantly. */
@property --auth-c1 { syntax: '<color>'; inherits: true; initial-value: #0073ea; }
@property --auth-c2 { syntax: '<color>'; inherits: true; initial-value: #a25ddc; }
@property --auth-c3 { syntax: '<color>'; inherits: true; initial-value: #7cc4ff; }
@property --auth-angle { syntax: '<angle>'; inherits: true; initial-value: 135deg; }
@property --auth-x1 { syntax: '<percentage>'; inherits: true; initial-value: 15%; }
@property --auth-y1 { syntax: '<percentage>'; inherits: true; initial-value: 20%; }
@property --auth-x2 { syntax: '<percentage>'; inherits: true; initial-value: 85%; }
@property --auth-y2 { syntax: '<percentage>'; inherits: true; initial-value: 85%; }
@property --auth-ox1 { syntax: '<percentage>'; inherits: true; initial-value: 12%; }
@property --auth-oy1 { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
@property --auth-ox2 { syntax: '<percentage>'; inherits: true; initial-value: 88%; }
@property --auth-oy2 { syntax: '<percentage>'; inherits: true; initial-value: 82%; }
.auth-wrapper {
  --auth-c1: var(--mon-blue);
  --auth-c2: var(--mon-purple);
  --auth-c3: #7cc4ff;
  --auth-angle: 135deg;
  --auth-x1: 15%; --auth-y1: 20%;
  --auth-x2: 85%; --auth-y2: 85%;
  --auth-ox1: 12%; --auth-oy1: 18%;
  --auth-ox2: 88%; --auth-oy2: 82%;
  --auth-glow1: 0.16; --auth-glow2: 0.14;
  --auth-orb: 0.55;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at var(--auth-x1) var(--auth-y1), rgba(255,255,255,var(--auth-glow1)) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at var(--auth-x2) var(--auth-y2), rgba(255,255,255,var(--auth-glow2)) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(var(--auth-angle), var(--auth-c1) 0%, var(--auth-c2) 100%);
  padding: 24px;
  transition:
    --auth-c1 .9s ease, --auth-c2 .9s ease, --auth-c3 .9s ease, --auth-angle .9s ease,
    --auth-x1 .9s ease, --auth-y1 .9s ease, --auth-x2 .9s ease, --auth-y2 .9s ease,
    /* orbs swoosh across with a little overshoot, so a page change feels like movement */
    --auth-ox1 1.2s cubic-bezier(.34,1.35,.5,1), --auth-oy1 1.2s cubic-bezier(.34,1.35,.5,1),
    --auth-ox2 1.2s cubic-bezier(.34,1.35,.5,1), --auth-oy2 1.2s cubic-bezier(.34,1.35,.5,1);
}
/* Two soft glowing orbs that drift forever; they sit under the card (z-index -1 inside the
 * isolated wrapper) and lean away from the cursor (--mx / --my, set by auth-transition.js). */
.auth-wrapper::before,
.auth-wrapper::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  opacity: var(--auth-orb);
  filter: blur(34px);
  transition: transform .7s ease-out;
  will-change: transform, translate;
}
.auth-wrapper::before {
  width: min(62vmax, 640px); height: min(62vmax, 640px);
  margin: calc(min(62vmax, 640px) / -2) 0 0 calc(min(62vmax, 640px) / -2);
  left: var(--auth-ox1); top: var(--auth-oy1);
  background: radial-gradient(circle, var(--auth-c3) 0%, transparent 66%);
  transform: translate(calc(var(--mx, 0) * -34px), calc(var(--my, 0) * -34px));
  animation: authDriftA 19s ease-in-out infinite alternate;
}
.auth-wrapper::after {
  width: min(52vmax, 540px); height: min(52vmax, 540px);
  margin: calc(min(52vmax, 540px) / -2) 0 0 calc(min(52vmax, 540px) / -2);
  left: var(--auth-ox2); top: var(--auth-oy2);
  background: radial-gradient(circle, var(--auth-c1) 0%, transparent 64%);
  transform: translate(calc(var(--mx, 0) * 46px), calc(var(--my, 0) * 46px));
  animation: authDriftB 23s ease-in-out infinite alternate;
}
@keyframes authDriftA { from { translate: -4vw -3vh; scale: 1; } 50% { translate: 6vw 5vh; scale: 1.14; } to { translate: 2vw -6vh; scale: .94; } }
@keyframes authDriftB { from { translate: 5vw 4vh; scale: 1.05; } 50% { translate: -6vw -5vh; scale: .92; } to { translate: -2vw 6vh; scale: 1.12; } }

/* Per-page palettes. login = the original look, so going back to it restores it exactly. */
.auth-wrapper[data-auth-page="register-student"] {
  --auth-c1: #00a86b; --auth-c2: #0073ea; --auth-c3: #5eead4; --auth-angle: 200deg;
  --auth-x1: 80%; --auth-y1: 15%; --auth-x2: 20%; --auth-y2: 90%;
  --auth-ox1: 86%; --auth-oy1: 16%; --auth-ox2: 10%; --auth-oy2: 86%;
}
.auth-wrapper[data-auth-page="register-teacher"] {
  --auth-c1: #e2445c; --auth-c2: #a25ddc; --auth-c3: #ff9ec0; --auth-angle: 160deg;
  --auth-x1: 20%; --auth-y1: 80%; --auth-x2: 85%; --auth-y2: 20%;
  --auth-ox1: 14%; --auth-oy1: 80%; --auth-ox2: 90%; --auth-oy2: 14%;
}
.auth-wrapper[data-auth-page="forgot-password"] {
  --auth-c1: #fdab3d; --auth-c2: #e2445c; --auth-c3: #ffe08a; --auth-angle: 225deg;
  --auth-x1: 50%; --auth-y1: 10%; --auth-x2: 50%; --auth-y2: 95%;
  --auth-ox1: 50%; --auth-oy1: 8%; --auth-ox2: 50%; --auth-oy2: 96%;
}
/* The brand mark and card shadow pick up the page color too. */
.auth-wrapper .brand-mark { color: var(--auth-c1); transition: none; }
.auth-wrapper .brand-mark .bi { background: linear-gradient(135deg, var(--auth-c1), var(--auth-c2)); }
.auth-wrapper .auth-card {
  box-shadow: 0 24px 60px color-mix(in srgb, var(--auth-c1) 38%, rgba(20, 20, 60, 0.28)),
              0 2px 0 rgba(255, 255, 255, 0.5) inset;
}
@media (prefers-reduced-motion: reduce) {
  .auth-wrapper { transition: none; }
  .auth-wrapper::before, .auth-wrapper::after { animation: none; transition: none; transform: none; }
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(20, 20, 60, 0.28);
  padding: 40px 36px;
  border: 1px solid rgba(255,255,255,0.6);
}
/* Smooth card transitions between auth pages (see assets/js/auth-transition.js).
 * NOTE: no transform/filter on .auth-card itself and none on .toast-stack - either would make
 * the card the containing block of the position:fixed toasts and push them off the top-right. */
.auth-card {
  transition: height .32s cubic-bezier(.4,0,.2,1), max-width .32s cubic-bezier(.4,0,.2,1);
  animation: authCardIn .38s ease both;
}
.auth-card > :not(.toast-stack) { transition: opacity .17s ease, transform .17s ease; }
.auth-card.is-leaving > :not(.toast-stack) { opacity: 0; transform: translateY(-6px); }
.auth-card.is-entering > :not(.toast-stack) { animation: authContentIn .3s cubic-bezier(.2,.7,.2,1) both; }
.auth-card.is-entering > :nth-child(2) { animation-delay: .03s; }
.auth-card.is-entering > :nth-child(3) { animation-delay: .06s; }
.auth-card.is-entering > :nth-child(n+4) { animation-delay: .09s; }
@keyframes authCardIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card > *, .auth-card.is-entering > * { animation: none !important; transition: none !important; }
}
.auth-card h1 {
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.auth-card .subtitle {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 28px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--mon-blue);
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.brand-mark .bi {
  font-size: 1.4rem;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
  color: #fff;
}

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

.sidebar {
  width: 254px;
  background: var(--surface);
  color: var(--ink-soft);
  flex-shrink: 0;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.sidebar .brand {
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 22px 6px;
}
.sidebar .brand .bi {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
  color: #fff;
  font-size: 1.1rem;
}
.sidebar .nav-link {
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 2px;
  font-size: 0.89rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar .nav-link .bi { font-size: 1rem; width: 18px; text-align: center; color: var(--ink-faint); transition: color 0.15s ease; }
.sidebar .nav-link:hover {
  background: var(--canvas);
  color: var(--ink);
}
.sidebar .nav-link.active {
  background: var(--mon-blue-light);
  color: var(--on-blue-light);
  font-weight: 700;
  border-left-color: var(--mon-blue);
}
.sidebar .nav-link.active .bi { color: var(--mon-blue); }
.sidebar hr {
  border-color: var(--line);
  margin: 14px 4px;
  opacity: 1;
}
.sidebar .nav-section-title {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 16px 12px 6px;
}

.main-content { flex-grow: 1; min-width: 0; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h4 { margin: 0; font-weight: 800; font-size: 1.15rem; }

.page-body { padding: 26px 28px 40px; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink);
}
/* Hover shadow only where a real pointer can hover — on touch screens this
   rule would otherwise "stick" after a tap until the user taps elsewhere,
   which reads as a UI glitch rather than an interaction cue. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-md); transition: box-shadow 0.18s ease; }
}
/* Touch devices get a quick press-down cue instead. */
@media (hover: none) {
  .card:active { transform: scale(0.99); transition: transform 0.08s ease; }
  /* A transform on an ancestor makes `position: fixed` children anchor to that
     ancestor instead of the screen. Tapping any button inside the attendance
     card marks the whole card :active, which used to yank the floating Save /
     Update Attendance bar off the bottom of the screen and pin it to the card.
     Cards that hold a floating bar therefore never get the press cue. */
  .card.no-press:active,
  .card:has(.save-bar):active,
  .card:has(.pdf-bar):active { transform: none; }
}

/* ---------- Stat / widget cards ---------- */
.stat-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mon-blue), var(--mon-purple));
}
.stat-card .stat-value { font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.stat-card .stat-label { color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; margin-top: 2px; }
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}

/* Recolor Bootstrap "subtle" helpers to monday palette so existing
   bg-*-subtle / text-* combos used in views pop like monday labels */
.bg-primary-subtle { background: var(--mon-blue-light) !important; }
.text-primary { color: var(--link) !important; }
.bg-success-subtle { background: var(--mon-green-light) !important; }
.text-success { color: var(--text-success) !important; }
.bg-warning-subtle { background: var(--mon-orange-light) !important; }
.text-warning { color: var(--text-warning) !important; }
.text-warning-emphasis { color: var(--text-warning) !important; }
.bg-danger-subtle { background: var(--mon-red-light) !important; }
.text-danger { color: var(--text-danger) !important; }
.bg-secondary-subtle { background: var(--gray-light) !important; }
.text-secondary { color: var(--ink-soft) !important; }
.bg-info-subtle { background: var(--mon-purple-light) !important; }
.text-info { color: var(--text-info) !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 700; font-size: 0.86rem; padding: 8px 16px; letter-spacing: 0.01em; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; border-radius: 7px; }

.btn-brand {
  background: var(--mon-blue);
  border-color: var(--mon-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,115,234,0.35);
}
.btn-brand:hover { background: var(--mon-blue-dark); border-color: var(--mon-blue-dark); color: #fff; }
.btn-brand:focus, .btn-brand:active { background: var(--mon-blue-dark) !important; border-color: var(--mon-blue-dark) !important; }

.btn-primary { background: var(--mon-blue); border-color: var(--mon-blue); }
.btn-primary:hover { background: var(--mon-blue-dark); border-color: var(--mon-blue-dark); }

.btn-success { background: var(--mon-green); border-color: var(--mon-green); }
.btn-success:hover { background: #00a862; border-color: #00a862; }
.btn-outline-success { color: var(--text-success); border-color: #9fe6c8; }
.btn-outline-success:hover { background: var(--mon-green); border-color: var(--mon-green); }

.btn-outline-danger { color: var(--mon-red); border-color: #f4b6c0; }
.btn-outline-danger:hover { background: var(--mon-red); border-color: var(--mon-red); }

.btn-outline-primary { color: var(--link); border-color: #a9d2fb; }
.btn-outline-primary:hover { background: var(--mon-blue); border-color: var(--mon-blue); }

.btn-outline-secondary {
  color: var(--ink-soft);
  border-color: var(--line);
  background: var(--surface);
}
.btn-outline-secondary:hover {
  background: var(--canvas);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-outline-dark { color: var(--ink); border-color: var(--line-strong); }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; font-size: 0.83rem; color: var(--ink); margin-bottom: 5px; }
.form-control, .form-select {
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 9px 12px;
  font-size: 0.9rem;
  background-color: var(--surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--mon-blue);
  box-shadow: 0 0 0 3px var(--mon-blue-light);
}
.form-check-input:checked {
  background-color: var(--mon-blue);
  border-color: var(--mon-blue);
}
.input-group-text { background: var(--canvas); border-color: var(--line); }

/* ---------- Pills / codes / chips ---------- */
.class-code-pill {
  font-family: 'SFMono-Regular', 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  background: var(--mon-blue-light);
  color: var(--on-blue-light);
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
}

.active-term-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mon-blue-light);
  color: var(--on-blue-light);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.active-term-pill .bi { font-size: 0.82rem; }

.schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mon-purple-light);
  color: var(--on-purple-light);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 2px 4px 2px 0;
}

/* ---------- Grid/List view toggle (My Classes) ---------- */
.view-toggle {
  position: relative;
  display: inline-flex;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
/* sliding highlight: glides between the two buttons instead of jumping */
.view-toggle::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 34px; height: 32px;
  border-radius: 7px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(0);
}
.view-toggle[data-active="list"]::before { transform: translateX(36px); }   /* button width 34 + gap 2 */
.view-toggle.vt-anim::before { transition: transform .32s cubic-bezier(.3, 1.35, .5, 1); }
.view-toggle-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  width: 34px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.view-toggle-btn .bi { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn:active .bi { transform: scale(.82); }
.view-toggle-btn.active { color: var(--mon-blue); }
.view-toggle-btn.active .bi { transform: scale(1.12); }
.view-toggle-btn:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .view-toggle.vt-anim::before, .view-toggle-btn, .view-toggle-btn .bi { transition: none; }
}

/* ---------- Class cards (modern, gradient header) ---------- */
.class-card {
  --c1: #2563eb; --c2: #7c3aed;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .class-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(37, 39, 74, 0.14); }
}
.class-theme-0 { --c1: #2563eb; --c2: #7c3aed; }
.class-theme-1 { --c1: #0e7490; --c2: #2563eb; }
.class-theme-2 { --c1: #047857; --c2: #0f766e; }
.class-theme-3 { --c1: #c2410c; --c2: #be185d; }
.class-theme-4 { --c1: #7c3aed; --c2: #a21caf; }
.class-theme-5 { --c1: #4338ca; --c2: #0369a1; }
.class-theme-6 { --c1: #e11d48; --c2: #9d174d; }
.class-theme-7 { --c1: #b45309; --c2: #c2680a; }
.class-theme-8 { --c1: #4d7c0f; --c2: #a16207; }
.class-theme-9 { --c1: #475569; --c2: #1e293b; }
.class-theme-10 { --c1: #dc2626; --c2: #ea580c; }
.class-theme-11 { --c1: #86198f; --c2: #4c1d95; }
.class-theme-12 { --c1: #be185d; --c2: #7e22ce; }
.class-theme-13 { --c1: #0f766e; --c2: #3f8a1c; }
.class-theme-14 { --c1: #1e3a8a; --c2: #0e7490; }

.class-card-head {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
}
.class-card-head::before,
.class-card-head::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.class-card-head::before { width: 120px; height: 120px; right: -35px; top: -55px; }
.class-card-head::after  { width: 80px; height: 80px; right: 40px; bottom: -50px; background: rgba(255, 255, 255, 0.08); }
.class-card-head > * { position: relative; z-index: 1; }
.class-card-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.class-card-subtitle {
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.class-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: #fff;
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.class-card .card-body { padding: 16px 18px 18px; }
.class-card .class-code-pill {
  background: color-mix(in srgb, var(--c1) 10%, var(--surface));
  color: var(--c1);
  border: 1px solid color-mix(in srgb, var(--c1) 22%, var(--surface));
  padding: 5px 12px;
  font-size: 0.85rem;
}
.class-card-students {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.class-card-students .bi { color: var(--c1); margin-right: 3px; }
.class-card-actions { display: flex; gap: 8px; }
.class-icon-btn {
  flex: 1 1 0;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--ink-soft);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.class-icon-btn:hover, .class-icon-btn:focus-visible {
  color: var(--c1);
  background: color-mix(in srgb, var(--c1) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--c1) 30%, var(--surface));
  transform: translateY(-1px);
}
.class-icon-btn:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
/* Student dashboard additions to the shared class-card look */
.class-card-badge.is-danger { color: #b91c1c; }
.class-card-term { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.class-card-term .bi { color: var(--c1); margin-right: 3px; }
.class-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
  padding: 3px 9px; border-radius: 20px;
  background: var(--canvas); border: 1px solid var(--line);
}
.cs-chip b { font-weight: 800; }
.cs-present b { color: #00875a; }
.cs-late b    { color: #e08a12; }
.cs-absent b  { color: #d83a52; }
.cs-excused b { color: var(--mon-blue); }
.class-icon-btn-wide { gap: 8px; font-size: 0.88rem; font-weight: 700; }
.class-icon-btn-wide .bi { font-size: 1.05rem; }
/* List layout for the class cards: same markup, restyled into compact rows */
#myClassesGrid[data-view="list"] .class-card-col {
  flex: 0 0 100%;
  max-width: 100%;
}
#myClassesGrid[data-view="list"] .class-card {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
#myClassesGrid[data-view="list"] .class-card-head {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
}
#myClassesGrid[data-view="list"] .class-card .card-body {
  flex: 3 1 420px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 14px 18px;
}
#myClassesGrid[data-view="list"] .class-card-meta {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
  gap: 16px;
}
#myClassesGrid[data-view="list"] .class-card-actions { flex: 0 0 auto; }
#myClassesGrid[data-view="list"] .class-icon-btn { flex: 0 0 auto; width: 44px; }
#myClassesGrid[data-view="list"] .class-icon-btn.class-icon-btn-wide { width: auto; padding: 0 16px; }
#myClassesGrid[data-view="list"] .class-card-stats { margin-bottom: 0 !important; }
#myClassesGrid[data-view="list"] .class-card-term { margin-bottom: 0 !important; }

/* ---------- Class card colour picker ---------- */
/* Palette button on a teacher's class card header */
.class-color-btn {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  font-size: 0.85rem; line-height: 1;
  color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease;
}
.class-color-btn:hover { background: rgba(255, 255, 255, 0.34); transform: rotate(-12deg) scale(1.06); }
.class-color-btn:active { transform: scale(.9); }
.class-color-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Swatch grid (shared by the dashboard popup and the Edit Class form) */
.theme-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.theme-swatch { position: relative; display: block; margin: 0; cursor: pointer; }
.theme-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.theme-swatch-dot {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  color: #fff; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px color-mix(in srgb, var(--c1) 30%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.theme-swatch-dot .bi { opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.2, 1.6, .4, 1); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
@media (hover: hover) { .theme-swatch:hover .theme-swatch-dot { transform: translateY(-2px) scale(1.05); } }
.theme-swatch input:checked + .theme-swatch-dot {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--c1), 0 6px 14px color-mix(in srgb, var(--c1) 40%, transparent);
}
.theme-swatch input:checked + .theme-swatch-dot .bi { opacity: 1; transform: none; }
.theme-swatch input:focus-visible + .theme-swatch-dot { outline: 2px solid var(--mon-blue); outline-offset: 4px; }

/* "Auto" choice under the grid */
.theme-auto { display: inline-block; position: relative; margin: 16px 0 0; cursor: pointer; }
.theme-auto input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.theme-auto-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink-soft); background: transparent;
  border: 1.5px dashed var(--line);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-auto:hover .theme-auto-pill { color: var(--ink); border-color: var(--ink-soft); }
.theme-auto input:checked + .theme-auto-pill { color: var(--mon-blue); border: 1.5px solid var(--mon-blue); background: var(--mon-blue-light); }
.theme-auto input:focus-visible + .theme-auto-pill { outline: 2px solid var(--mon-blue); outline-offset: 2px; }

/* Dashboard popup */
.color-modal { max-width: 380px; }
.color-modal .modal-title { font-size: 1.05rem; font-weight: 700; }
.color-modal .modal-title .bi { color: var(--mon-blue); margin-right: 4px; }
.color-status { min-height: 1.3em; margin-top: 12px; color: var(--ink-soft); }
.color-status.is-ok { color: #15803d; }
.color-status.is-error { color: #b91c1c; }
@media (prefers-reduced-motion: reduce) {
  .theme-swatch-dot, .theme-swatch-dot .bi, .class-color-btn { transition: none; }
}

/* ---------- Tables ---------- */
table.table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
table.table td { vertical-align: middle; border-color: var(--line); font-size: 0.88rem; }
table.table > tbody > tr:hover { background: var(--row-hover); }

/* ---------- Badges (status-pill look) ---------- */
.badge {
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}
.bg-warning { background: var(--mon-orange) !important; color: #fff !important; }
.bg-success { background: var(--mon-green) !important; color: #fff !important; }
.bg-danger { background: var(--mon-red) !important; color: #fff !important; }
.bg-secondary { background: #9699a6 !important; color: #fff !important; }

/* ---------- Alerts ---------- */
.alert {
  border: none;
  border-radius: 10px;
  border-left: 4px solid transparent;
  font-weight: 600;
  font-size: 0.88rem;
}
.alert-success { background: var(--mon-green-light); color: var(--on-green-light); border-left-color: var(--mon-green); }
.alert-danger { background: var(--mon-red-light); color: var(--on-red-light); border-left-color: var(--mon-red); }
.alert-warning { background: var(--mon-orange-light); color: var(--on-orange-light); border-left-color: var(--mon-orange); }
.alert-info { background: var(--mon-purple-light); color: var(--on-purple-light); border-left-color: var(--mon-purple); }
.alert-secondary { background: var(--canvas); color: var(--ink-soft); border-left-color: var(--line-strong); }

/* ---------- Floating toasts (top-right) ----------
   Flash messages (saved / error / etc.) float over the page instead of sitting
   in the layout, so showing or hiding one never shifts the content. */
.toast-stack {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 1100;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast-stack-app { top: calc(76px + env(safe-area-inset-top, 0px)); }
.app-toast {
  --toast-accent: var(--mon-purple);
  --toast-tint: var(--mon-purple-light);
  --toast-ink: var(--on-purple-light);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 12px 15px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--toast-accent);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(37, 39, 74, 0.16), 0 2px 6px rgba(37, 39, 74, 0.08);
  pointer-events: auto;
  animation: toastIn .32s cubic-bezier(.2, .8, .2, 1) both;
}
.app-toast-success { --toast-accent: var(--mon-green);  --toast-tint: var(--mon-green-light);  --toast-ink: var(--on-green-light); }
.app-toast-danger  { --toast-accent: var(--mon-red);    --toast-tint: var(--mon-red-light);    --toast-ink: var(--on-red-light); }
.app-toast-warning { --toast-accent: var(--mon-orange); --toast-tint: var(--mon-orange-light); --toast-ink: var(--on-orange-light); }
.app-toast-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--toast-tint);
  color: var(--toast-ink);
  font-size: 1rem;
}
.app-toast-body { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.app-toast-title { font-weight: 800; font-size: 0.86rem; line-height: 1.2; color: var(--toast-ink); }
.app-toast-msg { margin-top: 2px; font-weight: 600; font-size: 0.88rem; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.app-toast-close {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.8rem;
  cursor: pointer;
}
.app-toast-close:hover, .app-toast-close:focus-visible { background: var(--gray-light); color: var(--ink); outline: none; }
.app-toast-bar {
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: var(--toast-accent);
  opacity: .55;
  transform-origin: left center;
  animation: toastBar var(--toast-ms, 5000ms) linear forwards;
}
.app-toast:hover .app-toast-bar, .app-toast:focus-within .app-toast-bar { animation-play-state: paused; }
.app-toast.is-leaving { animation: toastOut .24s ease-in forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(28px) scale(.98); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 575.98px) {
  .toast-stack { left: 12px; right: 12px; width: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
  .toast-stack-app { top: calc(64px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .app-toast, .app-toast.is-leaving { animation: none; }
  .app-toast.is-leaving { opacity: 0; }
  .app-toast-bar { animation: none; display: none; }
}
@media print { .toast-stack { display: none !important; } }

/* ---------- Change password (admin / teacher / student) ---------- */
.pwc-wrap { max-width: 880px; margin: 0 auto; }
.pwc-card {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pwc-side {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  color: #fff;
  background: linear-gradient(150deg, var(--mon-blue) 0%, #7b6ff0 45%, var(--mon-purple) 70%, var(--mon-blue) 100%);
  background-size: 240% 240%;
  animation: pwcFlow 16s ease-in-out infinite alternate;
  display: flex; flex-direction: column; gap: 14px;
}
.pwc-side > *:not(.pwc-orb) { position: relative; z-index: 1; }

/* Soft circles that drift and breathe behind the content */
.pwc-orb {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.07) 70%);
}
.pwc-orb.o1 { width: 190px; height: 190px; right: -70px; top: -60px;  animation: pwcDriftA 14s ease-in-out infinite alternate; }
.pwc-orb.o2 { width: 150px; height: 150px; left: -60px;  bottom: -50px; animation: pwcDriftB 17s ease-in-out infinite alternate; }
.pwc-orb.o3 { width: 84px;  height: 84px;  right: 34px;  bottom: 90px; animation: pwcDriftC 11s ease-in-out infinite alternate; }
.pwc-orb.o4 { width: 52px;  height: 52px;  left: 46px;   top: 150px;   animation: pwcDriftD 9s ease-in-out infinite alternate; }
@keyframes pwcFlow   { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes pwcDriftA { 0% { transform: translate(0, 0) scale(1); } 35% { transform: translate(-34px, 30px) scale(1.1); } 70% { transform: translate(-12px, 76px) scale(0.94); } 100% { transform: translate(22px, 40px) scale(1.06); } }
@keyframes pwcDriftB { 0% { transform: translate(0, 0) scale(1); } 40% { transform: translate(42px, -34px) scale(1.12); } 75% { transform: translate(16px, -80px) scale(0.92); } 100% { transform: translate(60px, -28px) scale(1.05); } }
@keyframes pwcDriftC { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, -44px) scale(1.25); } 100% { transform: translate(-8px, -88px) scale(0.9); } }
@keyframes pwcDriftD { 0% { transform: translate(0, 0) scale(0.9); } 50% { transform: translate(52px, 30px) scale(1.2); } 100% { transform: translate(110px, -6px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pwc-side, .pwc-orb { animation: none !important; }
}
.pwc-badge {
  width: 54px; height: 54px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2); font-size: 1.6rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.pwc-side h5 { color: #fff; margin: 0 0 4px; font-weight: 800; }
.pwc-side p { margin: 0; font-size: 0.88rem; opacity: 0.92; }
.pwc-tips { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; font-size: 0.84rem; font-weight: 600; }
.pwc-tips li { display: flex; gap: 8px; align-items: flex-start; }
.pwc-tips .bi { margin-top: 1px; opacity: 0.95; }

.pwc-form { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); }
.pwc-form .form-label { font-weight: 700; font-size: 0.84rem; color: var(--ink); margin-bottom: 6px; }
.pwc-sep { margin: 2px 0; border: 0; border-top: 1px dashed var(--line-strong); opacity: 1; }
.pwc-input { position: relative; }
.pwc-input .form-control { padding: 11px 44px 11px 40px; border-radius: 10px; min-height: 46px; }
.pwc-lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 1rem; pointer-events: none; }
.pwc-input:focus-within .pwc-lead { color: var(--mon-blue); }
.pwc-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pwc-eye:hover { background: var(--gray-light); color: var(--ink); }

.pwc-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.pwc-meter span { height: 6px; border-radius: 6px; background: var(--gray-light); transition: background .2s ease; }
.pwc-meter[data-level="short"] span:nth-child(1) { background: var(--mon-red); }
.pwc-meter[data-level="1"] span:nth-child(-n+1) { background: var(--mon-red); }
.pwc-meter[data-level="2"] span:nth-child(-n+2) { background: var(--mon-orange); }
.pwc-meter[data-level="3"] span:nth-child(-n+3) { background: var(--mon-blue); }
.pwc-meter[data-level="4"] span { background: var(--mon-green); }
.pwc-meter-row { margin-top: 5px; }
.pwc-meter-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.pwc-meter[data-level="short"] ~ .pwc-meter-row .pwc-meter-label,
.pwc-meter[data-level="1"] ~ .pwc-meter-row .pwc-meter-label { color: var(--text-danger); }
.pwc-meter[data-level="2"] ~ .pwc-meter-row .pwc-meter-label { color: var(--text-warning); }
.pwc-meter[data-level="3"] ~ .pwc-meter-row .pwc-meter-label { color: var(--link); }
.pwc-meter[data-level="4"] ~ .pwc-meter-row .pwc-meter-label { color: var(--text-success); }

.pwc-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pwc-rule {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  background: var(--canvas); color: var(--ink-soft);
  font-size: 0.76rem; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.pwc-rule.is-ok { background: var(--mon-green-light); color: var(--on-green-light); }

.pwc-match { min-height: 20px; margin-top: 7px; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pwc-match.is-ok { color: var(--text-success); }
.pwc-match.is-bad { color: var(--text-danger); }

.pwc-submit { align-self: flex-start; min-height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.pwc-submit:disabled { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 767.98px) {
  .pwc-card { grid-template-columns: 1fr; }
  .pwc-side { flex-direction: row; align-items: center; padding: 18px; gap: 14px; }
  .pwc-side h5 { font-size: 1rem; }
  .pwc-side p { font-size: 0.82rem; }
  .pwc-tips { display: none; }
  .pwc-badge { width: 46px; height: 46px; font-size: 1.35rem; flex: 0 0 auto; }
  .pwc-form { padding: 20px 16px 22px; }
  .pwc-submit { align-self: stretch; justify-content: center; }
}

/* ---------- Modals ---------- */
.modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 1px solid var(--line); padding: 18px 22px; }
.modal-header .modal-title { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--line); padding: 14px 22px; }

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: 54px 20px;
  color: var(--ink-faint);
}
.empty-state .bi {
  font-size: 2.2rem; margin-bottom: 12px; display: block;
  width: 64px; height: 64px; line-height: 64px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--mon-blue);
  margin-left: auto; margin-right: auto;
}

/* ---------- Topbar user chip ---------- */
.topbar .rounded-circle {
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple)) !important;
}
.topbar .rounded-circle .bi { color: #fff !important; }

/* ---------- My Schedule: day-of-week pill selector ---------- */
.day-pill-group {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.day-pill {
  flex: 1 1 0;
  min-width: 44px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 6px;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
  white-space: nowrap;
}
.day-pill:active { transform: scale(0.96); }
.day-pill:hover { border-color: var(--mon-blue); color: var(--mon-blue); }
.day-pill.active {
  background: var(--mon-blue);
  border-color: var(--mon-blue);
  color: #fff;
}

/* ---------- My Schedule modal ---------- */
.sched-modal { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,20,43,0.22); }
#myScheduleModal .modal-dialog { max-width: 480px; }
.sched-header {
  align-items: flex-start;
  padding: 16px 18px 14px;
  border-bottom: 0;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
  color: #fff;
}
.sched-header .modal-title,
.sched-header .modal-title .bi { color: #fff !important; }
.sched-header .modal-title { font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.sched-header .sched-today { color: #fff; }
.sched-header { justify-content: space-between; gap: 12px; }
.sched-header > div { min-width: 0; flex: 1 1 auto; }
.sched-header .btn-close {
  flex: none; margin: 0 0 0 auto; width: 32px; height: 32px; padding: 0;
  background-size: 12px; border-radius: 50%;
  background-color: rgba(255,255,255,.18);
  filter: invert(1) grayscale(1) brightness(2); opacity: 1;
}
.sched-header .btn-close:hover { background-color: rgba(255,255,255,.3); }
.sched-today { margin-top: 4px; font-size: 0.82rem; font-weight: 600; opacity: .95; display: flex; align-items: center; gap: 6px; }
.sched-today-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ca72; box-shadow: 0 0 0 3px rgba(0,202,114,.35); }
.sched-body { padding: 14px 16px 6px; overflow: visible; }

/* day strip: weekday + date number; today gets a dot */
#myScheduleModal .day-pill-group { overflow: visible; gap: 4px; margin-bottom: 12px; }
#myScheduleModal .day-pill {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 2px 8px;
  border-radius: 12px;
  line-height: 1.1;
  position: relative;
}
#myScheduleModal .day-pill .dp-name { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
#myScheduleModal .day-pill .dp-num { font-size: 1.05rem; font-weight: 800; }
#myScheduleModal .day-pill.is-today { border-color: var(--mon-blue); color: var(--mon-blue); }
#myScheduleModal .day-pill.is-today::after {
  content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}
#myScheduleModal .day-pill.active { color: #fff; }

.sched-day-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sched-day-title { font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.sched-day-count { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
.sched-today-badge {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 20px; background: var(--mon-blue); color: #fff;
}
.sched-empty { text-align: center; color: var(--ink-soft); font-size: 0.88rem; padding: 22px 0 26px; }
.sched-empty .bi { display: block; font-size: 1.8rem; margin-bottom: 6px; opacity: .6; }

/* class cards: tinted by state, colored left edge */
.sched-card {
  --sched-accent: var(--line-strong);
  display: flex; gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--sched-accent) 55%, var(--line));
  border-left: 5px solid var(--sched-accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sched-accent) 11%, var(--surface));
}
.sched-card.schedule-item-upcoming { --sched-accent: #8a93a6; }
.sched-card.schedule-item-live { --sched-accent: var(--mon-blue); background: color-mix(in srgb, var(--mon-blue) 17%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mon-blue) 20%, transparent); }
.sched-card.schedule-item-pending { --sched-accent: var(--mon-orange); background: color-mix(in srgb, var(--mon-orange) 19%, var(--surface)); }
.sched-card.schedule-item-holiday { --sched-accent: #a25ddc; background: color-mix(in srgb, #a25ddc 14%, var(--surface)); }
.sched-card.schedule-item-done { --sched-accent: #00ca72; background: color-mix(in srgb, #00ca72 16%, var(--surface)); }

.sched-time { flex: 0 0 66px; font-size: 0.74rem; line-height: 1.3; color: var(--ink-soft); }
.sched-time strong { display: block; font-size: 0.82rem; color: var(--ink); }
.sched-main { flex: 1; min-width: 0; }
.sched-title { font-weight: 700; font-size: 0.9rem; line-height: 1.25; color: var(--ink); }
.sched-meta { font-size: 0.76rem; color: var(--ink-soft); margin-top: 1px; }
.sched-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.sched-badges { flex: 1 1 auto; min-width: 0; }
.sched-take-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 140px; height: 34px; min-height: 0 !important; padding: 0 12px !important;
  font-size: 0.78rem; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--surface);
}
.sched-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.schedule-state-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; color: #fff;
}
.schedule-state-live { background: var(--mon-blue); }
.schedule-state-live .bi { animation: schedule-live-pulse 1.6s ease-in-out infinite; }
.schedule-state-pending { background: #e08a12; }
.schedule-state-done { background: #00875a; }
.schedule-state-upcoming { background: #8a93a6; }
.schedule-state-holiday { background: #8e44c7; }
.sched-holiday-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, #a25ddc 16%, var(--surface)); border: 1px solid color-mix(in srgb, #a25ddc 35%, transparent);
}
.sched-holiday-banner > .bi { font-size: 1.3rem; color: #8e44c7; }
.sched-holiday-banner strong { display: block; font-size: 0.9rem; color: var(--ink); line-height: 1.2; }
.sched-holiday-banner span { font-size: 0.76rem; color: var(--ink-soft); }
#myScheduleModal .day-pill { position: relative; }
#myScheduleModal .day-pill .dp-hol { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #a25ddc; box-shadow: 0 0 0 2px var(--surface); }

/* legend lives in the footer bar */
.sched-legend-bar {
  justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 14px; margin-top: 4px;
  border-top: 1px solid var(--line); background: var(--canvas);
  font-size: 0.72rem; color: var(--ink-soft);
}
.schedule-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.schedule-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.schedule-dot-upcoming { background: #8a93a6; }
.schedule-dot-live { background: var(--mon-blue); }
.schedule-dot-pending { background: var(--mon-orange); }
.schedule-dot-done { background: #00ca72; }
.schedule-dot-holiday { background: #a25ddc; }

/* ---------- My Schedule: phone layout ---------- */
@media (max-width: 575.98px) {
  #myScheduleModal .modal-dialog { margin: 12px; max-width: none; min-height: calc(100% - 24px); }
  #myScheduleModal .modal-content { max-height: calc(100dvh - 24px); }
  .sched-header { padding: 14px 16px 12px; }
  .sched-header .modal-title { font-size: 1.05rem; }
  .sched-body { padding: 12px 12px 4px; overflow-y: auto; }
  #myScheduleModal .day-pill-group { gap: 3px; margin-bottom: 10px; }
  #myScheduleModal .day-pill { border-radius: 10px; }
  .sched-day-heading { margin-bottom: 8px; }

  /* stack: time range on top, then title, meta, and a tidy footer row */
  .sched-card { flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; }
  .sched-time { flex: none; display: flex; gap: 4px; align-items: baseline; font-size: 0.74rem; font-weight: 600; }
  .sched-time strong { display: inline; font-size: 0.78rem; }
  .sched-time span::before { content: '– '; }
  .sched-title { font-size: 0.92rem; }
  .sched-foot { margin-top: 8px; }
  .sched-legend-bar { gap: 4px 10px; padding: 9px 10px; font-size: 0.68rem; }
  .schedule-legend-item { gap: 4px; }
}

@keyframes schedule-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Create Class from PDF: upload page ---------- */
.pdf-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 14px; flex-wrap: wrap; }
.pdf-steps li { flex: 1 1 150px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.pdf-steps li span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--mon-blue); color: #fff; font-size: 0.74rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.pdf-dropzone {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 190px; padding: 24px 18px; margin: 0; cursor: pointer; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: 16px; background: var(--canvas);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pdf-dropzone:hover, .pdf-dropzone:focus-visible { border-color: var(--mon-blue); background: var(--mon-blue-light); outline: none; }
.pdf-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.pdf-dropzone.has-file { border-style: solid; border-color: var(--mon-green); background: var(--mon-green-light); }
.pdf-dropzone.has-file input[type="file"] { pointer-events: none; }
.pdf-dropzone.has-error { border-color: var(--mon-red); background: var(--mon-red-light); }
.pdf-dropzone.is-dragover { border-color: var(--mon-blue); background: var(--mon-blue-light); transform: scale(1.01); }
.pdf-dz-icon { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 50%; background: var(--surface); color: var(--mon-blue); font-size: 1.7rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pdf-dz-title { font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.pdf-dz-tap { display: none; }
.pdf-dz-sub { margin-top: 4px; font-size: 0.82rem; color: var(--ink-soft); }
.pdf-dz-file { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; padding: 12px 14px; background: var(--surface); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-align: left; }
.pdf-dz-file[hidden], .pdf-dz-empty[hidden], .pdf-dz-error[hidden] { display: none !important; }
.pdf-dz-fileicon { flex: none; font-size: 2rem; line-height: 1; color: var(--mon-red); }
.pdf-dz-fileinfo { flex: 1; min-width: 0; }
.pdf-dz-filename { font-weight: 700; font-size: 0.92rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-dz-filesize { font-size: 0.78rem; color: var(--ink-soft); }
.pdf-dz-remove { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--gray-light); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pdf-dz-remove:hover { background: var(--mon-red-light); color: var(--mon-red); }
.pdf-dz-overlay { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; background: rgba(0,115,234,.92); color: #fff; font-weight: 800; font-size: 1.1rem; pointer-events: none; }
.pdf-dropzone.is-dragover .pdf-dz-overlay { display: flex; }
.pdf-dz-error { margin-top: 8px; font-size: 0.84rem; font-weight: 600; color: var(--mon-red); }
@media (hover: none) { .pdf-dz-drag { display: none; } .pdf-dz-tap { display: inline; } .pdf-dz-sub u { text-decoration: none; } }
@media (max-width: 575.98px) { .pdf-dropzone { min-height: 160px; padding: 18px 12px; } .pdf-steps li { flex-basis: 100%; } }

/* ---------- Floating "scroll to top" button (mobile) ---------- */
.scroll-top-fab {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 1020;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--mon-blue);
  box-shadow: 0 6px 18px rgba(20,20,43,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.scroll-top-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Sit above the floating save bar when one is present, instead of behind it. */
body:has(.save-bar) .scroll-top-fab,
body.has-save-bar .scroll-top-fab {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px) {
  /* Clear the bottom tab bar (hidden automatically once a save-bar takes
     over, so the rule above still wins in that case via specificity). */
  .scroll-top-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 901px) {
  .scroll-top-fab { display: none; }
}

/* ------------------------------------------------------------------
   Mobile navigation — a bottom tab bar for primary destinations (the way
   a native app would present them) plus a bottom "sheet" for everything
   else, opened from the tab bar's More button instead of a hamburger.
   ------------------------------------------------------------------ */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 43, 0.4);
  z-index: 1035;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 82vh;
    width: auto;
    z-index: 1040;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 20, 43, 0.22);
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%);
    transition: transform 0.25s ease;
  }
  .sidebar.show { transform: translateY(0); }
  .sidebar .brand { padding-top: 2px; }
  .main-content { width: 100%; }
  /* Reset button-as-nav-link so the reminders item in the sheet matches
     the surrounding <a> items exactly. */
  .sidebar button.nav-link {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
  }
}
/* Drag handle affordance at the top of the sheet, signalling "swipe-able" */
.sidebar-grabber {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  margin: 2px auto 12px;
}
body.sheet-open { overflow: hidden; }

.enable-reminders-btn.disabled { opacity: 0.55; pointer-events: none; }

/* Bottom tab bar */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1015;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px rgba(20, 20, 43, 0.08);
}
@media (max-width: 900px) {
  .bottom-nav { display: flex; align-items: stretch; justify-content: space-around; }
  /* The floating Save Attendance bar takes priority over the tab bar while
     taking attendance — showing both stacked at the bottom wastes space and
     reads as cluttered, so the tab bar steps aside for it. */
  body.has-save-bar .bottom-nav { display: none; }
}
.bottom-nav-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border-radius: 10px;
  font-size: 0.64rem;
  font-weight: 700;
  min-height: 52px;
  transition: color 0.12s ease, background 0.12s ease;
}
.bottom-nav-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bottom-nav-item .bi { font-size: 1.22rem; }
.bottom-nav-item:active { transform: scale(0.93); background: var(--canvas); }
.bottom-nav-item.active { color: var(--mon-blue); }

@media (min-width: 901px) {
  .bottom-nav { display: none !important; }
}

/* ------------------------------------------------------------------
   Mobile refinements — instructors mark attendance from phones most
   of the time, so touch targets, spacing and the take-attendance
   table get dedicated treatment below.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar h4 { font-size: 1rem; }
  .topbar .d-flex.align-items-center.gap-3 { gap: 8px !important; }
  .topbar .d-flex.align-items-center.gap-2 { gap: 6px !important; }

  .page-body { padding: 16px 14px 132px; }

  .page-heading-bar { margin-bottom: 14px !important; }
  .page-heading-bar h5 { font-size: 1.02rem; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1 1 0; }

  .card-body, .card-header, .card-footer { padding: 14px; }

  .btn { min-height: 40px; }

  /* Stat row: keep Active Classes / Enrolled / Pending side by side in one
     row instead of each stacking full-width, so the summary reads at a
     glance instead of costing three screens of scroll. */
  .stat-card { padding: 12px 10px; border-radius: 12px; }
  .stat-card .stat-value { font-size: 1.28rem; }
  .stat-card .stat-label { font-size: 0.66rem; line-height: 1.2; }
  .stat-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
}

@media (max-width: 520px) {
  .heading-actions .btn-label { display: none; }
  .auth-card { padding: 30px 22px; }

  /* At phone widths even the shrunk icon competes with the number for
     space, so drop it and let the value/label pair breathe. */
  .stat-row .stat-icon { display: none; }
  .stat-card .stat-value { font-size: 1.15rem; }
  .stat-card .stat-label { font-size: 0.63rem; }
}

/* ---------- Monthly attendance grid ---------- */
.attendance-grid-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.attendance-grid-table {
  white-space: nowrap;
}
.attendance-grid-table th,
.attendance-grid-table td {
  min-width: 52px;
}
.attendance-grid-table .sticky-col {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 170px;
  white-space: normal;
}
.attendance-grid-table thead .sticky-col {
  z-index: 2;
}
.attendance-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------
   Attendance report preview (modal) — the page(s) are drawn by docx-preview
   ------------------------------------------------------------------ */
.report-preview-stage {
  background: var(--canvas);
  padding: 16px;
  overflow-x: auto;
}
.report-preview-stage .docx-wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.report-preview-stage .docx-wrapper > section.docx {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
  margin: 0 auto 16px auto !important;
}

/* ------------------------------------------------------------------
   Take Attendance — status pill buttons (replace tiny radio dots)
   ------------------------------------------------------------------ */
.no-class-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  margin: -6px -6px 0;
}
.no-class-toggle:hover { background: var(--canvas); }
.no-class-toggle input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }

.attendance-take-table .gender-row td { background: var(--canvas) !important; padding-top: 10px; padding-bottom: 10px; }
.attendance-take-table .student-cell { min-width: 160px; }
.attendance-take-table .student-name { font-weight: 700; color: var(--ink); }
.attendance-take-table .status-cell { min-width: 320px; }
/* Desktop: the Status column hugs the buttons, and its header + buttons share the same left edge
   (just like the Student and Remarks columns), so nothing floats mid-column. */
@media (min-width: 701px) {
  .attendance-take-table .status-th,
  .attendance-take-table .status-cell { width: 1%; white-space: nowrap; text-align: left; padding-right: 24px; }
}
.attendance-take-table .remarks-cell { min-width: 180px; }

.status-group {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
}
.status-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.05s ease;
  white-space: nowrap;
}
.status-opt:active { transform: scale(0.97); }
.status-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.status-opt .bi { font-size: 0.85rem; }

.status-opt-present:has(input:checked) { background: var(--mon-green); border-color: var(--mon-green); color: #fff; }
.status-opt-late:has(input:checked)    { background: var(--mon-yellow); border-color: var(--mon-yellow); color: #4a3b00; }
.status-opt-absent:has(input:checked)  { background: var(--mon-red); border-color: var(--mon-red); color: #fff; }
.status-opt-excused:has(input:checked) { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; }

/* :has() fallback for older engines: JS (see main.js) toggles this class */
.status-opt.is-checked.status-opt-present { background: var(--mon-green); border-color: var(--mon-green); color: #fff; }
.status-opt.is-checked.status-opt-late    { background: var(--mon-yellow); border-color: var(--mon-yellow); color: #4a3b00; }
.status-opt.is-checked.status-opt-absent  { background: var(--mon-red); border-color: var(--mon-red); color: #fff; }
.status-opt.is-checked.status-opt-excused { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; }

.status-opt-present:hover  { border-color: var(--mon-green); }
.status-opt-late:hover     { border-color: var(--mon-yellow); }
.status-opt-absent:hover   { border-color: var(--mon-red); }
.status-opt-excused:hover  { border-color: var(--mon-blue); }

/* Floating Save Attendance bar — pinned to the screen (not the page), so it's
   always one tap away no matter how long the roster is. A plain
   `position: sticky` footer doesn't help here since it's the last element on
   the page anyway (nothing to "catch" against) — `fixed` is what actually
   keeps it on screen while scrolling. */
@media (max-width: 900px) {
  .save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--surface);
    box-shadow: 0 -6px 20px rgba(20,20,43,0.14);
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }
  .save-bar .flex-grow-1 { width: 100%; margin-right: 0 !important; order: 2; }
  .save-btn { width: 100%; order: 1; min-height: 48px; font-size: 0.95rem; border-radius: 10px; }

  /* Room for the floating bar so it never covers the last student rows. */
  #attendanceForm { padding-bottom: 96px; }
}

/* Desktop: keep the Save / Update Attendance bar pinned to the bottom of the
   screen while the student list scrolls, same as on mobile. `sticky` (rather
   than `fixed`) keeps it exactly as wide as the content area, so it never
   slides under the sidebar, and it settles back into the card's bottom edge
   once the end of the list is reached instead of covering the Edit History
   card below. */
@media (min-width: 901px) {
  .save-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 22px rgba(20, 20, 43, 0.10);
  }
}

@media (max-width: 700px) {
  .attendance-take-table thead { display: none; }
  .attendance-take-table, .attendance-take-table tbody, .attendance-take-table tr, .attendance-take-table td {
    display: block;
    width: 100%;
  }
  .attendance-take-table { border: none; }
  .attendance-take-table .student-row {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 0 10px 10px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
  }
  .attendance-take-table .gender-row {
    margin: 0;
    border-radius: 0;
  }
  .attendance-take-table .gender-row td { padding-left: 14px !important; }
  .attendance-take-table td { padding: 0; border: none; }
  .attendance-take-table .student-cell { margin-bottom: 10px; }
  .attendance-take-table .status-cell { margin-bottom: 10px; min-width: 0; }
  .attendance-take-table .remarks-cell { min-width: 0; }
  .status-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .status-opt {
    padding: 11px 6px;
    font-size: 0.82rem;
    border-radius: 9px;
  }
  .mark-all-actions { width: 100%; }
  .mark-all-actions .btn { flex: 1 1 0; }
  .session-header { align-items: stretch !important; }
}

/* ------------------------------------------------------------------
   Take Attendance date picker: taken / not taken / holiday / no class
   ------------------------------------------------------------------ */
.flatpickr-day.att-taken:not(.selected)   { background: var(--mon-green-light); border-color: #9fe6c8; color: var(--on-green-light); font-weight: 600; }
.flatpickr-day.att-pending:not(.selected) { background: var(--mon-yellow-light); border-color: #ffe066; color: var(--on-yellow-light); }
.flatpickr-day.att-holiday:not(.selected) { background: var(--mon-blue-light); border-color: #a9d2fb; color: var(--on-blue-light); text-decoration: line-through; }
.flatpickr-day.att-noclass:not(.selected) { background: var(--gray-light); border-color: var(--gray-line); color: var(--ink-soft); text-decoration: line-through; }
.flatpickr-day.selected.att-taken   { background: var(--mon-green); border-color: var(--mon-green); }
.flatpickr-day.selected.att-pending { background: var(--mon-yellow); border-color: var(--mon-yellow); color: #4a3b00; }
.att-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.att-legend span { display: inline-flex; align-items: center; gap: 5px; }
.att-dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1px solid transparent; }
.att-dot-taken   { background: var(--mon-green-light); border-color: #9fe6c8; }
.att-dot-pending { background: var(--mon-yellow-light); border-color: #ffe066; }
.att-dot-holiday { background: var(--mon-blue-light); border-color: #a9d2fb; }
.att-dot-noclass { background: var(--gray-light); border-color: var(--gray-line); }

/* Live date/time label in the topbar */
.live-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.live-clock .live-clock-date { color: var(--bs-secondary-color, #6c757d); font-weight: 500; }
.live-clock .live-clock-text { display: inline-flex; align-items: baseline; gap: 6px; }
/* Phones: stack date over time so both fit in the narrow topbar */
@media (max-width: 575.98px) {
  .live-clock { padding: 3px 10px; gap: 6px; font-size: 0.75rem; line-height: 1.1; border-radius: 14px; }
  .live-clock .live-clock-text { flex-direction: column; align-items: flex-start; gap: 1px; }
  .live-clock .live-clock-date { font-size: 0.64rem; line-height: 1.1; }
  .live-clock .live-clock-time { font-size: 0.74rem; line-height: 1.1; }
  /* long page titles shrink with an ellipsis instead of squeezing the clock */
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar > div:last-child { flex: 0 0 auto; }
}

/* Class page headings link back to the class overview */
.class-title-link { color: inherit; text-decoration: none; }
.class-title-link:hover, .class-title-link:focus-visible { color: var(--mon-blue); }

/* ==========================================================================
   Header light / dark switch (sun & moon)
   The moon shows in light mode (click → go dark); the sun shows in dark mode.
   ========================================================================== */
.theme-toggle {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.theme-toggle:hover { background: var(--canvas); color: var(--ink); border-color: var(--line-strong); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 2px; }
.theme-toggle:disabled { cursor: progress; opacity: 0.7; }
.theme-toggle .bi { position: absolute; line-height: 1; transition: transform 0.28s ease, opacity 0.2s ease; }
.theme-toggle .theme-icon-moon { color: var(--mon-purple); }
.theme-toggle .theme-icon-sun  { color: var(--mon-yellow); opacity: 0; transform: rotate(-90deg) scale(0.4); }
[data-bs-theme="dark"] .theme-toggle .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
[data-bs-theme="dark"] .theme-toggle .theme-icon-sun  { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle .bi { transition: none; }
}

/* ==========================================================================
   DARK THEME
   Bootstrap's own components follow data-bs-theme="dark" automatically; this
   block re-points Bootstrap's variables at the app palette and swaps every
   token defined in :root above. Applies to all layouts (app shell, login,
   registration, 404).
   ========================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --ink: #e7e9f2;
  --ink-soft: #a9adc0;
  --ink-faint: #7f8398;
  --line: #333852;
  --surface: #232738;
  --canvas: #1a1d2b;

  /* tinted "light" backgrounds become translucent washes on the dark surface */
  --mon-blue-light: rgba(0, 115, 234, 0.20);
  --mon-purple-light: rgba(162, 93, 220, 0.20);
  --mon-green-light: rgba(0, 200, 117, 0.16);
  --mon-red-light: rgba(226, 68, 92, 0.18);
  --mon-orange-light: rgba(253, 171, 61, 0.16);
  --mon-yellow-light: rgba(255, 203, 0, 0.14);

  --sidebar-bg: var(--surface);
  --sidebar-hover: #2b3046;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);

  --line-strong: #4a506b;
  --row-hover: #2a2f45;
  --gray-light: #2c3148;
  --gray-line: #40466a;
  --scroll-thumb: #454b68;
  --scroll-thumb-hover: #5b6285;
  --link: #6db3ff;
  --on-blue-light: #8ec5ff;
  --on-purple-light: #d2a6f5;
  --on-green-light: #5fe3a8;
  --on-red-light: #ff93a4;
  --on-orange-light: #ffc56b;
  --on-yellow-light: #ffe27a;
  --text-success: #3ddc97;
  --text-warning: #f7b955;
  --text-danger: #ff7387;
  --text-info: #c691f0;

  /* Bootstrap variable bridge */
  --bs-body-bg: var(--surface);
  --bs-body-bg-rgb: 35, 39, 56;
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--ink-soft);
  --bs-tertiary-bg: var(--canvas);
  --bs-secondary-bg: var(--gray-light);
  --bs-border-color: var(--line);
  --bs-emphasis-color: #ffffff;
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--link);
}

/* Login / register pages: keep the gradient, just deeper */
[data-bs-theme="dark"] .auth-wrapper {
  --auth-c1: #16224d; --auth-c2: #31205f; --auth-c3: #3a6bff;
  --auth-glow1: 0.05; --auth-glow2: 0.04; --auth-orb: 0.4;
}
[data-bs-theme="dark"] .auth-wrapper[data-auth-page="register-student"] { --auth-c1: #0b3b34; --auth-c2: #16224d; --auth-c3: #12b886; }
[data-bs-theme="dark"] .auth-wrapper[data-auth-page="register-teacher"] { --auth-c1: #4a1626; --auth-c2: #31205f; --auth-c3: #d6336c; }
[data-bs-theme="dark"] .auth-wrapper[data-auth-page="forgot-password"] { --auth-c1: #4a3112; --auth-c2: #4a1626; --auth-c3: #f59f00; }
[data-bs-theme="dark"] .auth-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { color: var(--ink); background-color: var(--canvas); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { background-color: var(--canvas); box-shadow: 0 0 0 3px rgba(0, 115, 234, 0.35); }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--ink-faint); }
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-select:disabled { background-color: var(--gray-light); color: var(--ink-faint); }

/* Buttons */
[data-bs-theme="dark"] .btn-outline-dark:hover,
[data-bs-theme="dark"] .btn-outline-dark:active { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-success:hover,
[data-bs-theme="dark"] .btn-outline-danger:hover { color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { border-color: rgba(109, 179, 255, 0.45); }
[data-bs-theme="dark"] .btn-outline-success { border-color: rgba(61, 220, 151, 0.4); }
[data-bs-theme="dark"] .btn-outline-danger  { border-color: rgba(255, 115, 135, 0.45); color: var(--text-danger); }

/* Tables — Bootstrap's .table-light is a fixed light colour set */
[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--ink);
  --bs-table-bg: var(--canvas);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--canvas);
  --bs-table-hover-bg: var(--row-hover);
  color: var(--ink);
  border-color: var(--line);
}

/* Emphasis text used by attendance marks / status badges */
[data-bs-theme="dark"] .text-success-emphasis { color: var(--text-success) !important; }
[data-bs-theme="dark"] .text-danger-emphasis  { color: var(--text-danger) !important; }
[data-bs-theme="dark"] .text-info-emphasis    { color: var(--text-info) !important; }
[data-bs-theme="dark"] .border-success-subtle { border-color: rgba(0, 200, 117, 0.35) !important; }
[data-bs-theme="dark"] .border-warning-subtle { border-color: rgba(253, 171, 61, 0.35) !important; }
[data-bs-theme="dark"] .border-danger-subtle  { border-color: rgba(226, 68, 92, 0.4) !important; }
[data-bs-theme="dark"] .border-info-subtle    { border-color: rgba(162, 93, 220, 0.4) !important; }
[data-bs-theme="dark"] .border-secondary-subtle { border-color: var(--line-strong) !important; }

/* Schedule popover states */
[data-bs-theme="dark"] .schedule-item-done { border-color: rgba(0, 200, 117, 0.4) !important; }

/* Modals / dropdowns / offcanvas */
[data-bs-theme="dark"] .modal-content { background: var(--surface); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); }
[data-bs-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.6; }
[data-bs-theme="dark"] .sidebar-backdrop.show { background: rgba(0, 0, 0, 0.6); }

/* Date picker (flatpickr, Take Attendance page) */
[data-bs-theme="dark"] .flatpickr-calendar {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
}
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--surface); }
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:before,
[data-bs-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--surface); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year,
[data-bs-theme="dark"] span.flatpickr-weekday { background: transparent; color: var(--ink-soft); fill: var(--ink-soft); }
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--surface); color: var(--ink); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month { color: var(--ink-soft); fill: var(--ink-soft); }
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--mon-blue); }
[data-bs-theme="dark"] .flatpickr-day { color: var(--ink); }
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay,
[data-bs-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--ink-faint); }
[data-bs-theme="dark"] .flatpickr-day:hover,
[data-bs-theme="dark"] .flatpickr-day:focus { background: var(--gray-light); border-color: var(--gray-light); }
[data-bs-theme="dark"] .flatpickr-day.today { border-color: var(--mon-blue); }
[data-bs-theme="dark"] .flatpickr-day.selected { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; }

/* Document preview modal: the page itself stays white like the printed sheet */
[data-bs-theme="dark"] .report-preview-stage { background: #14161f; }

/* ---- Admin > Students smart filter ---- */
.student-filter .sf-search { position: relative; }
.student-filter .sf-search .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.student-filter .sf-search .form-control { padding-left: 36px; }
.student-filter .sf-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin-bottom: 2px; }
.student-filter .sf-count { font-size: .85rem; color: var(--ink-soft); }
.sf-chip { border: 0; background: var(--mon-blue-light); color: var(--on-blue-light); font-size: .78rem; font-weight: 500; padding: 2px 8px; border-radius: 999px; cursor: pointer; }
.sf-chip:hover { filter: brightness(.96); }
.sf-chip .bi { vertical-align: -1px; }
.sf-row[hidden], .sf-group[hidden] { display: none !important; }

/* Admin > Students pagination */
.sf-pager .sf-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.sf-pager .sf-count { font-size: .85rem; color: var(--ink-soft); }
.sf-pager .pagination { --bs-pagination-color: var(--ink-soft); --bs-pagination-hover-color: var(--on-blue-light); --bs-pagination-hover-bg: var(--mon-blue-light);
  --bs-pagination-active-bg: var(--mon-blue); --bs-pagination-active-border-color: var(--mon-blue); --bs-pagination-active-color: #fff;
  --bs-pagination-focus-color: var(--on-blue-light); --bs-pagination-focus-bg: var(--mon-blue-light);
  --bs-pagination-bg: transparent; --bs-pagination-border-color: var(--line); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-border-color: var(--line); }
.sf-pager[hidden], .sf-pager nav[hidden] { display: none !important; }
/* the global .form-select padding removes room for the arrow; restore it for the compact pager select */
.sf-pager .form-select { padding: 5px 32px 5px 12px; min-width: 72px; font-size: .85rem; }

/* ---------- Student attendance: tabs, calendar, header buttons ---------- */
.btn-back {
  background: var(--mon-purple);
  border-color: var(--mon-purple);
  color: #fff;
  box-shadow: 0 1px 2px rgba(162,93,220,0.35);
}
.btn-back:hover, .btn-back:focus, .btn-back:active {
  background: #8a47c4 !important;
  border-color: #8a47c4 !important;
  color: #fff !important;
}

.att-tabs { border-bottom: 2px solid var(--line); }
.att-tabs .nav-link {
  color: var(--ink-soft); font-weight: 700; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px; background: transparent;
}
.att-tabs .nav-link:hover { color: var(--mon-blue); }
.att-tabs .nav-link.active { color: var(--mon-blue); border-bottom-color: var(--mon-blue); background: transparent; }

.att-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.att-dow { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; padding: 4px 0; }
.att-cell {
  min-height: clamp(64px, 11vh, 104px);
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  padding: 4px; overflow: hidden; display: flex; flex-direction: column; gap: 3px;
}
.att-blank { background: transparent; border-color: transparent; }
.att-out { background: var(--gray-light); opacity: 0.5; }
.att-today { border-color: var(--mon-blue); box-shadow: 0 0 0 2px var(--mon-blue-light); }
.att-weekend { background: color-mix(in srgb, var(--mon-purple-light) 70%, var(--surface)); border-color: color-mix(in srgb, var(--mon-purple) 22%, var(--line)); }
.att-weekend .att-num { color: var(--mon-purple); }
.att-dow-weekend { color: var(--mon-purple); }
.att-holiday, .att-weekend.att-holiday { background: var(--mon-orange-light); border-color: color-mix(in srgb, var(--mon-orange) 40%, var(--line)); }
.att-out.att-weekend { background: var(--gray-light); border-color: var(--line); }
.att-num { font-size: 0.74rem; font-weight: 800; color: var(--ink-soft); line-height: 1; }
.att-today .att-num { color: var(--mon-blue); }

.att-chip {
  display: flex; align-items: center; gap: 4px; border-radius: 5px; padding: 2px 5px;
  font-size: 0.68rem; font-weight: 700; line-height: 1.25; min-width: 0;
}
.att-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-present    { background: var(--mon-green-light);  color: var(--on-green-light); }
.chip-late       { background: var(--mon-yellow-light); color: var(--on-yellow-light); }
.chip-absent     { background: var(--mon-red-light);    color: var(--on-red-light); }
.chip-excused    { background: var(--mon-purple-light); color: var(--on-purple-light); }
.chip-no_class,
.chip-holiday    { background: var(--mon-orange-light); color: var(--on-orange-light); }
.chip-upcoming,
.chip-notice     { background: var(--mon-blue-light);   color: var(--on-blue-light); }
.chip-unrecorded { background: var(--gray-light);       color: var(--ink-soft); }

.att-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.att-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: currentColor; font-style: normal; }
.dot-present, .chip-present .dot       { color: var(--mon-green); }
.dot-late, .chip-late .dot             { color: var(--mon-yellow); }
.dot-absent, .chip-absent .dot         { color: var(--mon-red); }
.dot-excused, .chip-excused .dot       { color: var(--mon-purple); }
.dot-holiday, .chip-no_class .dot      { color: var(--mon-orange); }
.dot-upcoming, .chip-upcoming .dot,
.chip-notice .dot                      { color: var(--mon-blue); }
.dot-unrecorded, .chip-unrecorded .dot { color: var(--ink-faint); }

@media (max-width: 575.98px) {
  .att-cal { gap: 2px; }
  .att-cell { min-height: 54px; padding: 3px 2px; align-items: center; }
  .att-chip { padding: 0; background: transparent !important; }
  .att-chip span { display: none; }       /* dots only on phones; tap/hold shows the tooltip */
  .att-chip .bi { font-size: 0.7rem; }
  .att-cell { flex-direction: column; }
  .att-dow { font-size: 0.62rem; }
}

/* ---------- Attendance summary side card ---------- */
.att-side { align-self: flex-start; }
@media (min-width: 992px) { .att-side { position: sticky; top: 84px; } }

.side-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.side-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  font-weight: 800; font-size: 0.92rem; color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--mon-blue-light), transparent);
}
.side-head .bi { color: var(--mon-blue); }

.side-status { display: flex; gap: 10px; align-items: flex-start; margin: 14px 16px 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid; font-size: 0.82rem; line-height: 1.4; }
.side-status > .bi { font-size: 1.15rem; margin-top: 1px; flex: 0 0 auto; }
.side-status strong { display: block; font-size: 0.86rem; }
.side-status span { display: block; }
.status-success { background: var(--mon-green-light);  border-color: var(--mon-green);  color: var(--on-green-light); }
.status-neutral { background: color-mix(in srgb, #64748b 12%, var(--surface)); border-color: #64748b; color: var(--ink); }
.status-warning { background: var(--mon-yellow-light); border-color: var(--mon-yellow); color: var(--on-yellow-light); }
.status-danger  { background: var(--mon-red-light);    border-color: var(--mon-red);    color: var(--on-red-light); }

.side-meter { padding: 16px 16px 4px; }
.meter-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.meter-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.meter-value { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.meter-value.text-success { color: var(--text-success) !important; }
.meter-value.text-warning { color: var(--text-warning) !important; }
.meter-value.text-danger  { color: var(--text-danger) !important; }
.meter-track { position: relative; height: 10px; border-radius: 999px; background: var(--gray-light); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; min-width: 0; transition: width .4s ease; }
.fill-success { background: var(--mon-green); }
.fill-warning { background: var(--mon-yellow); }
.fill-danger  { background: var(--mon-red); }
.meter-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-faint); opacity: .7; }
.meter-scale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.68rem; font-weight: 600; color: var(--ink-faint); }

.side-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 4px; }
.tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; min-width: 0; }
.tile > .bi { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; }
.tile b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.05; color: var(--ink); }
.tile span { display: block; font-size: 0.74rem; font-weight: 700; color: var(--ink-soft); }
.tile-present { background: var(--mon-green-light); }  .tile-present > .bi { background: var(--mon-green); }
.tile-late    { background: var(--mon-yellow-light); } .tile-late > .bi    { background: #e0ac00; }
.tile-absent  { background: var(--mon-red-light); }    .tile-absent > .bi  { background: var(--mon-red); }
.tile-excused { background: var(--mon-purple-light); } .tile-excused > .bi { background: var(--mon-purple); }

.side-rows { margin: 12px 0 0; padding: 4px 16px 6px; border-top: 1px solid var(--line); }
.side-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 0.82rem; }
.side-rows > div:last-child { border-bottom: 0; }
.side-rows dt { font-weight: 600; color: var(--ink-soft); margin: 0; }
.side-rows dd { font-weight: 800; color: var(--ink); margin: 0; white-space: nowrap; }

@media (max-width: 575.98px) {
  .att-chip span { display: none; }
}

.dot-weekend { color: var(--mon-purple); opacity: .55; }

/* ---------- Student profile photos ---------- */
.stu-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  padding: 0; border: 0; line-height: 1; vertical-align: middle;
  font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
}
.stu-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stu-avatar-zoom { cursor: zoom-in; box-shadow: 0 0 0 2px var(--line); transition: transform .12s ease, box-shadow .12s ease; }
.stu-avatar-zoom:hover, .stu-avatar-zoom:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 2px var(--mon-blue); outline: none; }
.stu-avatar-empty { opacity: .55; cursor: default; }

.student-photo-large { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; display: block; }

/* Student "My Profile" page */
.profile-photo-wrap { width: 180px; height: 180px; }
.profile-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--line); display: block; }
.profile-photo-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 4.2rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
}

/* Topbar: the student's own photo in place of the initial */
.topbar-avatar-link { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.topbar-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- Form / confirm modals that share the My Schedule look ---------- */
.sched-dialog { max-width: 520px; }
.sched-confirm { max-width: 440px; }
/* keep the header / scrolling body / footer layout when the modal wraps a <form> */
.sched-modal > form { display: contents; }
.sched-form-body { padding: 16px 18px 8px; overflow-y: auto; }
.sched-footer {
  gap: 8px; justify-content: flex-end;
  padding: 12px 16px; margin-top: 4px;
  border-top: 1px solid var(--line); background: var(--canvas);
}
.sched-header.is-danger { background: linear-gradient(135deg, #e2445c, #b3243a); }
#confirmModal .sched-form-body { font-size: 0.95rem; line-height: 1.5; padding-top: 18px; padding-bottom: 14px; }
@media (max-width: 575.98px) {
  .sched-dialog { margin: 12px; max-width: none; }
  .sched-form-body { padding: 14px 14px 6px; }
}

/* ==========================================================================
   Theme-switch splash (light <-> dark)
   Built by main.js (ThemeSplash). A circular wipe grows out of the toggle,
   a sun/moon morphs while the theme is swapped underneath, then the circle
   collapses back into the toggle to reveal the new theme.
   Timings mirror the constants in main.js (cover 650ms, leave 750ms).
   ========================================================================== */
html.ts-lock, html.ts-lock body { overflow: hidden !important; }

.ts-overlay {
  position: fixed; inset: 0; z-index: 20000;
  overflow: hidden;
  clip-path: circle(0px at var(--ox) var(--oy));
  pointer-events: all; cursor: progress;
  font-family: inherit;
  background: radial-gradient(circle at 50% 38%, var(--bg-c), var(--bg-e));
  color: var(--fg);
}
.ts-overlay.ts-to-dark  { --bg-c: #292d45; --bg-e: #090b15; --fg: #e7e9f2; --fg2: #a9adc0; --glow: #a25ddc; --a1: #6db3ff; --a2: #c08bff; --ring1: #6db3ff; --ring2: #c08bff; }
.ts-overlay.ts-to-light { --bg-c: #ffffff; --bg-e: #d9eafd; --fg: #323338; --fg2: #676879; --glow: #ffb400; --a1: #0073ea; --a2: #ff9f1a; --ring1: #ffcb00; --ring2: #ff8a00; }

.ts-overlay.ts-in  { animation: ts-wipe-in 650ms cubic-bezier(.7, 0, .2, 1) forwards; }
.ts-overlay.ts-out { animation: ts-wipe-out 750ms cubic-bezier(.7, 0, .2, 1) forwards; }
.ts-overlay.ts-out .ts-content, .ts-overlay.ts-out .ts-brand { opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; }
@keyframes ts-wipe-in  { from { clip-path: circle(0px at var(--ox) var(--oy)); } to { clip-path: circle(var(--rmax) at var(--ox) var(--oy)); } }
@keyframes ts-wipe-out { from { clip-path: circle(var(--rmax) at var(--ox) var(--oy)); } to { clip-path: circle(0px at var(--ox) var(--oy)); } }

/* ---- background: drifting aurora + sunburst ---- */
.ts-bg { position: absolute; inset: 0; }
.ts-blob { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(70px); opacity: .5; animation: ts-drift 8s ease-in-out infinite alternate; }
.ts-blob.b1 { left: -18vmax; top: -22vmax; }
.ts-blob.b2 { right: -20vmax; bottom: -24vmax; animation-duration: 10s; animation-delay: -3s; }
.ts-blob.b3 { left: 30%; top: 38%; width: 38vmax; height: 38vmax; opacity: .28; animation-duration: 12s; animation-delay: -6s; }
.ts-to-dark  .b1 { background: #0073ea; } .ts-to-dark  .b2 { background: #a25ddc; } .ts-to-dark  .b3 { background: #00c875; }
.ts-to-light .b1 { background: #ffcb00; opacity: .4; } .ts-to-light .b2 { background: #ff9f1a; opacity: .3; } .ts-to-light .b3 { background: #0073ea; opacity: .16; }
@keyframes ts-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vmax, 5vmax) scale(1.18); } }

.ts-burst { position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 190, 0, .22) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%);
  animation: ts-spin 50s linear infinite; }
.ts-to-dark .ts-burst { display: none; }
@keyframes ts-spin { to { transform: rotate(360deg); } }

/* ---- stars (to dark) / light motes (to light) ---- */
.ts-field { position: absolute; inset: 0; pointer-events: none; }
.ts-star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--s) * 3) rgba(190, 210, 255, .9);
  animation: ts-twinkle var(--t) ease-in-out calc(var(--d) + .35s) infinite both; }
@keyframes ts-twinkle { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: .12; transform: scale(.7); } }
.ts-mote { position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgba(255, 205, 60, .75) 55%, rgba(255, 205, 60, 0) 72%);
  animation: ts-float calc(var(--t) * 2.4) ease-in-out calc(var(--d) + .3s) infinite both; }
@keyframes ts-float { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateY(-150px) scale(1.15); } }
.ts-shoot { position: absolute; width: 120px; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform: rotate(145deg); animation: ts-shoot 2.8s ease-out var(--d) infinite; }
@keyframes ts-shoot { 0% { opacity: 0; transform: rotate(145deg) translateX(0); } 6% { opacity: 1; } 30% { opacity: 0; transform: rotate(145deg) translateX(320px); } 100% { opacity: 0; transform: rotate(145deg) translateX(320px); } }

/* ---- centre content ---- */
.ts-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  animation: ts-rise .6s cubic-bezier(.2, .9, .3, 1) .35s both; }
@keyframes ts-rise { from { opacity: 0; transform: translateY(18px) scale(.94); } }

.ts-stage { position: relative; width: 176px; height: 176px; margin-bottom: 6px; }
.ts-stage svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.ts-halo { position: absolute; inset: -34%; border-radius: 50%; animation: ts-pulse 2s ease-in-out infinite; }
.ts-halo.h-sun  { background: radial-gradient(circle, rgba(255, 190, 0, .5), transparent 62%); }
.ts-halo.h-moon { background: radial-gradient(circle, rgba(162, 93, 220, .55), transparent 62%); }
.ts-to-dark  .h-sun  { opacity: 0; animation: ts-pulse 2s ease-in-out infinite, ts-fade-out .6s ease .75s both; }
.ts-to-dark  .h-moon { animation: ts-pulse 2s ease-in-out infinite, ts-fade-in .8s ease .9s both; }
.ts-to-light .h-moon { opacity: 0; animation: ts-pulse 2s ease-in-out infinite, ts-fade-out .6s ease .75s both; }
.ts-to-light .h-sun  { animation: ts-pulse 2s ease-in-out infinite, ts-fade-in .8s ease .9s both; }
@keyframes ts-pulse { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
@keyframes ts-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-fade-out { from { opacity: 1; } to { opacity: 0; } }
.ts-ripple { position: absolute; inset: 14%; border-radius: 50%; border: 2px solid var(--glow); opacity: 0; animation: ts-ripple 2.4s ease-out 1s infinite; }
.ts-ripple.r2 { animation-delay: 1.8s; }
@keyframes ts-ripple { 0% { opacity: .7; transform: scale(.85); } 100% { opacity: 0; transform: scale(2.1); } }

.ts-ring { transform-origin: 80px 80px; animation: ts-spin 1.25s linear infinite; }
.ts-rays-spin { transform-origin: 80px 80px; animation: ts-spin 14s linear infinite; }
.ts-rays, .ts-cut, .ts-body, .ts-spk { transform-box: view-box; }
.ts-rays { transform-origin: 80px 80px; }
.ts-rays line { stroke: #ffcb00; stroke-width: 5; stroke-linecap: round; }
.ts-body { fill: #ffcb00; }

/* Final states are the base styles; keyframes only describe where each part starts. */
.ts-to-dark .ts-cut  { transform: translate(14px, -12px); animation: ts-cut-in .85s cubic-bezier(.65, 0, .35, 1) .75s both; }
.ts-to-dark .ts-body { fill: #d6c6ff; animation: ts-fill-moon .85s ease .75s both; }
.ts-to-dark .ts-rays { opacity: 0; transform: scale(.25) rotate(70deg); animation: ts-rays-out .55s ease-in .45s both; }
.ts-to-dark .ts-spk  { animation: ts-pop .6s cubic-bezier(.2, 1.6, .4, 1) 1.35s both; }
.ts-to-light .ts-cut  { transform: translate(64px, -64px); animation: ts-cut-out .85s cubic-bezier(.65, 0, .35, 1) .75s both; }
.ts-to-light .ts-body { fill: #ffcb00; animation: ts-fill-sun .85s ease .75s both; }
.ts-to-light .ts-rays { animation: ts-rays-in .8s cubic-bezier(.2, 1.4, .4, 1) 1.05s both; }
.ts-to-light .ts-spk  { display: none; }
.ts-to-dark .ts-rays-spin { animation-play-state: paused; }
@keyframes ts-cut-in    { from { transform: translate(64px, -64px); } }
@keyframes ts-cut-out   { from { transform: translate(14px, -12px); } }
@keyframes ts-fill-moon { from { fill: #ffcb00; } }
@keyframes ts-fill-sun  { from { fill: #d6c6ff; } }
@keyframes ts-rays-out  { from { opacity: 1; transform: none; } }
@keyframes ts-rays-in   { from { opacity: 0; transform: scale(.2) rotate(-80deg); } }
@keyframes ts-pop       { from { opacity: 0; transform: scale(0); } }
.ts-spk { fill: #fff; transform-origin: center; }

.ts-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; color: var(--fg); }
.ts-title b { background: linear-gradient(90deg, var(--a1), var(--a2), var(--a1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: ts-shimmer 2.2s linear infinite; }
@keyframes ts-shimmer { to { background-position: -200% 0; } }
.ts-sub { position: relative; height: 1.4em; min-width: 260px; font-size: .95rem; color: var(--fg2); }
.ts-sub span { position: absolute; inset: 0; opacity: 0; }
.ts-sub .a { animation: ts-sub-a 2.2s ease .4s both; }
.ts-sub .b { animation: ts-sub-b 2.2s ease .4s both; }
@keyframes ts-sub-a { 0% { opacity: 0; transform: translateY(6px); } 15%, 55% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ts-sub-b { 0%, 62% { opacity: 0; transform: translateY(6px); } 80%, 100% { opacity: 1; transform: none; } }

.ts-bar { position: relative; width: min(260px, 70vw); height: 5px; margin-top: 4px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 14%, transparent); }
.ts-bar i { display: block; width: 100%; height: 100%; transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, var(--a1), var(--a2)); animation: ts-bar 1.5s cubic-bezier(.4, 0, .2, 1) .55s both; }
.ts-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-100%); animation: ts-sheen 1.1s ease-in-out .6s infinite; }
@keyframes ts-bar { from { transform: scaleX(0); } }
@keyframes ts-sheen { to { transform: translateX(100%); } }

.ts-brand { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg2); opacity: .8; animation: ts-rise .6s ease .6s both; }

/* ---- reduced motion: skip the wipe/morph, just a quick fade to the final state ---- */
.ts-overlay.ts-reduced { clip-path: none; opacity: 0; }
.ts-overlay.ts-reduced.ts-in  { animation: ts-fade-in .15s linear forwards; }
.ts-overlay.ts-reduced.ts-out { animation: ts-fade-out .2s linear forwards; }
.ts-overlay.ts-reduced *, .ts-overlay.ts-reduced *::after { animation: none !important; }

/* ==========================================================================
   Logout: confirmation modal (#logoutModal) + "Logging you out" splash
   ========================================================================== */
#logoutModal .modal-dialog { max-width: 400px; }
#logoutModal.modal.fade .modal-dialog { transform: translateY(26px) scale(.92); transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), opacity .2s ease; }
#logoutModal.modal.show .modal-dialog { transform: none; }
.lo-modal { border: 0; border-radius: 22px; overflow: hidden; text-align: center; background: var(--surface); box-shadow: 0 24px 60px rgba(20, 20, 43, .32); }
.lo-top { padding: 34px 26px 8px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--mon-purple) 24%, transparent), transparent 72%); }
.lo-icon { position: relative; width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; color: #fff;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple)); box-shadow: 0 10px 26px rgba(130, 90, 230, .45); animation: lo-pop .5s cubic-bezier(.2, 1.6, .4, 1) .12s both; }
.lo-icon::before, .lo-icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mon-purple); opacity: 0; animation: lo-ring 2.4s ease-out .5s infinite; }
.lo-icon::after { animation-delay: 1.3s; }
.lo-icon i { display: inline-block; animation: lo-nudge 1.8s ease-in-out .6s infinite; }
@keyframes lo-pop   { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes lo-ring  { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes lo-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(5px); } }
.lo-title { font-weight: 800; font-size: 1.35rem; margin-bottom: 8px; }
.lo-text { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; margin: 0; }
.lo-text strong { color: var(--ink); }
.lo-actions { display: flex; gap: 10px; padding: 20px 22px 24px; }
.lo-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; font-weight: 600; border-radius: 10px; }
.lo-go { color: #fff; border: 0; background: linear-gradient(135deg, var(--mon-red), #ff6b81); box-shadow: 0 6px 16px rgba(226, 68, 92, .38); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.lo-go:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 9px 20px rgba(226, 68, 92, .45); }
.lo-go:active { transform: scale(.97); }
.lo-go:disabled { opacity: .7; }
@media (max-width: 420px) { .lo-actions { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) {
  #logoutModal.modal.fade .modal-dialog { transition: none; transform: none; }
  .lo-icon, .lo-icon::before, .lo-icon::after, .lo-icon i { animation: none; }
}

/* ---- splash: same wipe as the theme switch, with its own midnight palette ---- */
.ts-overlay.ts-logout { --bg-c: #2c2358; --bg-e: #090a1c; --fg: #eceaff; --fg2: #b7b3da; --glow: #a25ddc; --a1: #6db3ff; --a2: #c08bff; --ring1: #6db3ff; --ring2: #c08bff; }
.ts-logout .b1 { background: #5b4bff; } .ts-logout .b2 { background: #a25ddc; } .ts-logout .b3 { background: #0073ea; }
.ts-logout .ts-mote { background: radial-gradient(circle, #fff 0, rgba(176, 130, 255, .8) 55%, rgba(176, 130, 255, 0) 72%); }
.ts-logout .ts-halo.h-moon { opacity: 1; }

/* progress ring fills while the lock closes; slightly slower bar so it ends as the goodbye shows */
.ts-lo-prog { animation: ts-lo-ring 2.3s cubic-bezier(.4, 0, .2, 1) .55s both; }
@keyframes ts-lo-ring { from { stroke-dashoffset: 452.4; } to { stroke-dashoffset: 0; } }
.ts-logout .ts-bar i { animation-duration: 2.3s; }

.ts-padlock { transform-box: view-box; transform-origin: 80px 100px; animation: ts-lock-thunk .5s cubic-bezier(.3, 1.6, .5, 1) 2.05s both; }
@keyframes ts-lock-thunk { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }
.ts-shackle { stroke: #ece6ff; transform-box: view-box; transform-origin: 63px 76px; animation: ts-shackle-close 1s cubic-bezier(.5, 0, .3, 1) 1.2s both; }
@keyframes ts-shackle-close { 0%, 45% { transform: translateY(-13px) rotate(-20deg); } 80% { transform: translateY(2px) rotate(0); } 100% { transform: none; } }
.ts-lbody { fill: #19c98a; animation: ts-lbody-fill .5s ease 1.95s both; }
@keyframes ts-lbody-fill { from { fill: #8f7bff; } }
/* gentle idle wobble while the lock is still open */
.ts-padlock .ts-lbody { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }

.ts-lo-ripple { position: absolute; inset: 12%; border-radius: 50%; border: 3px solid #19c98a; opacity: 0; animation: ts-ripple-once 1s ease-out 2.05s both; }
@keyframes ts-ripple-once { 0% { opacity: 0; transform: scale(.8); } 12% { opacity: .85; } 100% { opacity: 0; transform: scale(2); } }
.ts-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2);
  animation: ts-spark-burst .8s ease-out 2.05s both; }
.ts-spark:nth-of-type(odd) { background: #19c98a; box-shadow: 0 0 10px #19c98a; }
@keyframes ts-spark-burst {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(-30px) scale(1); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-96px) scale(.2); }
}

/* three goodbye lines, crossfading; the last one stays */
.ts-sub3 span { white-space: nowrap; }
.ts-sub3 .a { animation: ts-sub3-a 2.8s ease .4s both; }
.ts-sub3 .b { animation: ts-sub3-b 2.8s ease .4s both; }
.ts-sub3 .c { animation: ts-sub3-c 2.8s ease .4s both; color: var(--fg); font-weight: 600; }
@keyframes ts-sub3-a { 0% { opacity: 0; transform: translateY(6px); } 10%, 28% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ts-sub3-b { 0%, 32% { opacity: 0; transform: translateY(6px); } 44%, 60% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ts-sub3-c { 0%, 66% { opacity: 0; transform: translateY(6px); } 80%, 100% { opacity: 1; transform: none; } }
.ts-wave { display: inline-block; font-style: normal; transform-origin: 70% 70%; animation: ts-wave 1.1s ease-in-out 2.5s infinite; }
@keyframes ts-wave { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(16deg); } 40% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }

/* reduced motion: show the finished scene (lock closed, goodbye line) with no animation */
.ts-overlay.ts-reduced .ts-lo-prog { stroke-dashoffset: 0; }
.ts-overlay.ts-reduced .ts-sub3 .a, .ts-overlay.ts-reduced .ts-sub3 .b { opacity: 0; }
.ts-overlay.ts-reduced .ts-sub3 .c { opacity: 1; }


/* ==========================================================================
   Login: "Welcome back" splash (mirror of the logout one: the padlock opens)
   Played by main.js (ThemeSplash.welcome) on the first page after signing in,
   for both password and Google sign-in.
   ========================================================================== */
/* hide the dashboard until the splash is up (no flash); failsafe reveals it if JS never runs */
html.ts-pending body { visibility: hidden; animation: ts-pending-failsafe 0s linear 4s forwards; }
@keyframes ts-pending-failsafe { to { visibility: visible; } }

.ts-overlay.ts-instant { clip-path: circle(var(--rmax) at var(--ox) var(--oy)); }
.ts-overlay.ts-login { --bg-c: #16407f; --bg-e: #071326; --fg: #eaf4ff; --fg2: #a9c4e6; --glow: #19c98a; --a1: #6db3ff; --a2: #19e0a3; --ring1: #6db3ff; --ring2: #19c98a; }
.ts-login .b1 { background: #0073ea; } .ts-login .b2 { background: #00c875; } .ts-login .b3 { background: #5b4bff; }
.ts-login .ts-mote { background: radial-gradient(circle, #fff 0, rgba(25, 224, 163, .8) 55%, rgba(25, 224, 163, 0) 72%); }
.ts-login .ts-halo.h-moon { opacity: 1; background: radial-gradient(circle, rgba(25, 201, 138, .5), transparent 62%); }
.ts-login .ts-bar i { animation-duration: 2.3s; }

/* shackle starts closed and pops open while the body turns green */
.ts-login .ts-shackle { animation: ts-shackle-open 1s cubic-bezier(.5, 0, .3, 1) 1.2s both; }
@keyframes ts-shackle-open { 0%, 30% { transform: none; } 55% { transform: translateY(3px); } 100% { transform: translateY(-13px) rotate(-20deg); } }

/* reduced motion: show the finished scene (lock open, welcome line) */
.ts-overlay.ts-login.ts-reduced .ts-shackle { transform: translateY(-13px) rotate(-20deg); }


/* ==========================================================================
   Class profile card (phones + desktop): click/tap a class card -> compact profile-style modal that
   zooms out of the card. Built by main.js from the card's data-profile. It is sized to
   fit the screen WITHOUT scrolling: main.js tightens it (.cp-t1/.cp-t2/.cp-t3) if needed.
   ========================================================================== */
#myClassesGrid .class-card-col[data-profile] .class-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
#myClassesGrid .class-card-col[data-profile] .class-card:active { transform: scale(.975); }
@media (hover: hover) { #myClassesGrid .class-card-col[data-profile] .class-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 20, 43, .14); } }
#myClassesGrid .class-card-col[data-profile] .class-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--c1) 55%, transparent); outline-offset: 2px; }

#classProfileModal .modal-dialog { max-width: 380px; margin: 16px auto; padding: 0 16px; }
@media (min-width: 768px) { #classProfileModal .modal-dialog { max-width: 420px; } }
/* zoom out of the tapped card (--cp-dx/--cp-dy come from its position), spring into place */
#classProfileModal.modal.fade .modal-dialog {
  transform: translate(var(--cp-dx, 0px), var(--cp-dy, 0px)) scale(.42);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.12, .3, 1), opacity .22s ease;
}
#classProfileModal.modal.show .modal-dialog { transform: none; opacity: 1; }
#classProfileModal.modal.fade:not(.show) .modal-dialog { transition: transform .26s cubic-bezier(.4, 0, .8, .4), opacity .2s ease .04s; }
.modal-backdrop.show { transition: opacity .3s ease; }

/* Bootstrap makes .modal-content a flex column, which squashes children in a height-limited card; use block. */
.cp-card { display: block; }
.cp-card {
  --c1: #2563eb; --c2: #7c3aed;
  --cp-cover: 92px; --cp-av: 70px;
  position: relative; border: 0; border-radius: 24px; overflow: hidden;
  max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 28px 70px rgba(15, 18, 40, .42);
}
.cp-card.cp-scroll { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }   /* last resort only */
.cp-card.cp-scroll::-webkit-scrollbar { display: none; }
.cp-card.class-theme-0 { --c1: #2563eb; --c2: #7c3aed; } .cp-card.class-theme-1 { --c1: #0e7490; --c2: #2563eb; }
.cp-card.class-theme-2 { --c1: #047857; --c2: #0f766e; } .cp-card.class-theme-3 { --c1: #c2410c; --c2: #be185d; }
.cp-card.class-theme-4 { --c1: #7c3aed; --c2: #a21caf; } .cp-card.class-theme-5 { --c1: #4338ca; --c2: #0369a1; }
.cp-card.class-theme-6 { --c1: #e11d48; --c2: #9d174d; }
.cp-card.class-theme-7 { --c1: #b45309; --c2: #c2680a; }
.cp-card.class-theme-8 { --c1: #4d7c0f; --c2: #a16207; }
.cp-card.class-theme-9 { --c1: #475569; --c2: #1e293b; }
.cp-card.class-theme-10 { --c1: #dc2626; --c2: #ea580c; }
.cp-card.class-theme-11 { --c1: #86198f; --c2: #4c1d95; }
.cp-card.class-theme-12 { --c1: #be185d; --c2: #7e22ce; }
.cp-card.class-theme-13 { --c1: #0f766e; --c2: #3f8a1c; }
.cp-card.class-theme-14 { --c1: #1e3a8a; --c2: #0e7490; }

.cp-cover { position: relative; flex: none; height: var(--cp-cover); min-height: var(--cp-cover); background: linear-gradient(135deg, var(--c1), var(--c2)); overflow: hidden; }
.cp-orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); animation: cp-float 7s ease-in-out infinite alternate; }
.cp-orb.o1 { width: 140px; height: 140px; right: -36px; top: -56px; }
.cp-orb.o2 { width: 84px; height: 84px; left: -24px; bottom: -42px; background: rgba(255, 255, 255, .11); animation-duration: 9s; }
@keyframes cp-float { to { transform: translate(-10px, 12px) scale(1.12); } }
.cp-close {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease;
}
.cp-close:active { transform: scale(.88); background: rgba(255, 255, 255, .34); }

/* ---- Desktop two-column layout (teacher view): left = the usual class profile, right = student list ---- */
.cp-close { z-index: 5; }                 /* now a direct child of the card, so it must sit above both columns */
.cp-main { min-width: 0; }
.cp-roster { display: none; }              /* phones & tablets keep the compact single-column popup */
@media (min-width: 992px) {
  #classProfileModal.cp-wide .modal-dialog { max-width: 960px; }
  .cp-card.cp-two { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .cp-card.cp-two .cp-roster { display: block; position: relative; min-width: 0; border-left: 1px solid var(--line); }
}
/* the roster is pinned inside its cell so a long class never makes the popup taller than the left column */
.cp-roster-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cp-roster-head {
  position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; justify-content: center;
  height: var(--cp-cover); min-height: var(--cp-cover);
  padding: 0 64px 0 22px; color: #fff;
  background: linear-gradient(135deg, var(--c2), var(--c1));   /* continues the cover's gradient across the seam */
}
.cp-roster-head > * { position: relative; z-index: 1; }
.cp-roster-head .cp-orb.o1 { position: absolute; z-index: 0; }
.cp-roster-title { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.cp-roster-count { margin-top: 2px; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .92); }
.cp-roster-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 16px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Male | Female segmented tabs: a gradient pill slides under the active label */
.cp-tabs {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr;
  margin: 14px 18px 10px; padding: 4px; border-radius: 14px;
  background: var(--canvas); border: 1px solid var(--line);
}
.cp-tabs::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 10px; background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c1) 38%, transparent);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.cp-tabs[data-active="female"]::before { transform: translateX(100%); }
.cp-tab {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
  font-size: .84rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: color .25s ease;
}
.cp-tab:hover { color: var(--ink); }
.cp-tab.is-active, .cp-tab.is-active:hover { color: #fff; }
.cp-tab:focus-visible { outline: 2px solid var(--c1); outline-offset: 1px; }
.cp-tab-n {
  min-width: 22px; padding: 0 7px; border-radius: 999px; text-align: center;
  font-size: .72rem; font-weight: 800; line-height: 20px;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: inherit;
  transition: background .25s ease;
}
.cp-tab.is-active .cp-tab-n { background: rgba(255, 255, 255, .24); }

/* Student table */
.cp-pane { display: none; }
.cp-pane.is-active { display: block; }
.cp-pane.slide-r { animation: cp-pane-r .3s cubic-bezier(.2, .8, .3, 1) both; }
.cp-pane.slide-l { animation: cp-pane-l .3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cp-pane-r { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes cp-pane-l { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.cp-rtable { width: 100%; border-collapse: separate; border-spacing: 0; }
.cp-rtable th {
  position: sticky; top: 0; z-index: 1; padding: 9px 11px 8px; background: var(--surface);
  border-bottom: 1px solid var(--line); text-align: left;
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
}
.cp-rtable td { padding: 8px 11px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size: .84rem; font-weight: 600; }
.cp-rtable tbody tr:nth-child(even) td { background: var(--canvas); }
.cp-rtable tbody tr:hover td { background: color-mix(in srgb, var(--c1) 8%, var(--surface)); }
.cp-rtable .cp-rno { width: 46px; text-align: center; }
.cp-rtable td.cp-rno { font-size: .76rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cp-rtable .cp-rid-h, .cp-rtable td.cp-rid { text-align: right; }
.cp-rtable .cp-rname { overflow-wrap: anywhere; }
.cp-rtable td.cp-rid { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; letter-spacing: .03em; color: var(--ink-soft); }
.cp-rempty { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .cp-tabs::before, .cp-tab, .cp-tab-n { transition: none; }
  .cp-pane.slide-r, .cp-pane.slide-l { animation: none; }
}

.cp-avatar {
  position: relative; z-index: 1; flex: none; width: var(--cp-av); height: var(--cp-av); min-width: var(--cp-av); min-height: var(--cp-av); aspect-ratio: 1 / 1;
  margin: calc(var(--cp-av) / -2) auto 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: calc(var(--cp-av) * .32); letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--c2), var(--c1)); border: 4px solid var(--surface);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 42%, transparent);
}
.modal.show .cp-avatar { animation: cp-avatar-pop .55s cubic-bezier(.2, 1.6, .4, 1) .15s both; }
@keyframes cp-avatar-pop { from { opacity: 0; transform: scale(.3) rotate(-18deg); } }

.cp-body { padding: 8px 18px 18px; }
.cp-head { text-align: center; }
.cp-title { font-weight: 800; font-size: 1.1rem; line-height: 1.22; margin: 2px 0 1px; }
.cp-sub { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.cp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px; }
.cp-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent;
  font-size: .74rem; font-weight: 700; color: var(--c1);
  background: color-mix(in srgb, var(--c1) 11%, var(--surface)); border-color: color-mix(in srgb, var(--c1) 24%, var(--surface));
}
.cp-chip.is-soft { color: var(--ink-soft); background: var(--canvas); border-color: var(--line); }
.cp-copy { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; cursor: pointer; transition: transform .12s ease, background .2s ease, color .2s ease; }
.cp-copy:active { transform: scale(.94); }
.cp-copy .cp-copy-ico { font-size: .68rem; opacity: .6; margin-left: 2px; }
.cp-copy.is-copied { color: #00875a; background: color-mix(in srgb, #00c875 14%, var(--surface)); border-color: color-mix(in srgb, #00c875 35%, var(--surface)); }

.cp-banner { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 11px; border-radius: 11px; font-size: .76rem; font-weight: 700; }
.cp-banner.is-warn   { color: #a15c00; background: color-mix(in srgb, #fdab3d 18%, var(--surface)); }
.cp-banner.is-danger { color: #b91c1c; background: color-mix(in srgb, #e2445c 14%, var(--surface)); }

.cp-stats { display: flex; gap: 7px; margin-top: 12px; }
.cp-stat { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 4px 7px; border-radius: 13px; background: var(--canvas); border: 1px solid var(--line); }
.cp-stat b { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.cp-stat span { display: block; margin-top: 1px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cp-stat.is-present b { color: #00875a; } .cp-stat.is-late b { color: #e08a12; }
.cp-stat.is-absent b { color: #d83a52; } .cp-stat.is-excused b { color: var(--mon-blue); }

/* details: compact 2-column grid, one card */
.cp-info { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cp-item { min-width: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.cp-item.span2 { grid-column: 1 / -1; }
.cp-item + .cp-item { border-left: 1px solid var(--line); }
.cp-item.span2, .cp-item.span2 + .cp-item { border-left: 0; }
.cp-item.span2:not(:first-child), .cp-item.span2:first-child ~ .cp-item { border-top: 1px solid var(--line); }
.cp-item small { display: flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.cp-item small .bi { color: var(--c1); font-size: .8rem; }
.cp-item b { font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }

.cp-section-title { margin: 12px 2px 6px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
/* schedule: two tiles per row instead of one long list */
.cp-sched { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-sched-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line); }
.cp-sched-row:only-child { grid-column: 1 / -1; }
.cp-day { flex: 0 0 auto; width: 36px; padding: 6px 0; text-align: center; border-radius: 9px; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.cp-sched-main { min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.cp-sched-main b { font-size: .78rem; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.cp-sched-main small { font-size: .68rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-empty { margin: 0; padding: 9px; border-radius: 12px; border: 1px dashed var(--line); font-size: .78rem; color: var(--ink-soft); text-align: center; }

.cp-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.cp-btn {
  flex: 1 1 calc(50% - 4px); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 10px; border-radius: 12px;
  font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--c1);
  background: color-mix(in srgb, var(--c1) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c1) 24%, var(--surface));
  transition: transform .12s ease, filter .12s ease;
}
.cp-btn:active { transform: scale(.96); }
.cp-btn.is-primary { flex-basis: 100%; padding: 12px 14px; font-size: .9rem; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 40%, transparent); }
.cp-btn:hover { color: var(--c1); } .cp-btn.is-primary:hover { color: #fff; filter: brightness(1.06); }

/* ---- fit-to-screen levels (added by main.js only when the card would otherwise need scrolling) ---- */
.cp-t1 { --cp-cover: 74px; --cp-av: 60px; }
.cp-t1 .cp-body { padding: 6px 16px 14px; }
.cp-t1 .cp-title { font-size: 1.02rem; }
.cp-t1 .cp-chips { margin-top: 6px; }
.cp-t1 .cp-stats { margin-top: 9px; } .cp-t1 .cp-stat { padding: 6px 4px 5px; } .cp-t1 .cp-stat b { font-size: 1.1rem; }
.cp-t1 .cp-info { margin-top: 8px; } .cp-t1 .cp-item { padding: 6px 11px; }
.cp-t1 .cp-section-title { margin: 9px 2px 5px; }
.cp-t1 .cp-sched-row { padding: 5px 7px; }
.cp-t1 .cp-actions { margin-top: 10px; } .cp-t1 .cp-btn { padding: 9px 10px; } .cp-t1 .cp-btn.is-primary { padding: 10px 12px; }
.cp-t2 { --cp-cover: 58px; --cp-av: 52px; }
.cp-t2 .cp-section-title, .cp-t2 .cp-item small .bi, .cp-t2 .cp-banner .bi { display: none; }
.cp-t2 .cp-sched-main small { display: none; } .cp-t2 .cp-sched-row { padding: 4px 6px; }
.cp-t2 .cp-sub { display: none; }
.cp-t3 .cp-chip.is-soft, .cp-t3 .cp-info { display: none; }
.cp-t3 .cp-orb { display: none; }

/* sections rise in one after another once the card has landed */
.cp-anim { opacity: 0; }
.modal.show .cp-anim { animation: cp-rise .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 65ms + 170ms); }
@keyframes cp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #classProfileModal.modal.fade .modal-dialog { transform: none; transition: opacity .15s linear; }
  .cp-orb, .modal.show .cp-avatar { animation: none; }
  .cp-anim { opacity: 1; } .modal.show .cp-anim { animation: none; }
}

/* ==========================================================================
   Class overview (/classes/view): class nav bar + roster table
   ========================================================================== */
.class-nav .nav-badge { font-size: .68rem; }

/* roster, desktop: keep the student number on one line; keep action buttons in one row */
.roster-table td.c-no, .roster-table th.c-no { white-space: nowrap; }
.roster-table th { white-space: nowrap; }
.roster-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.roster-actions form { display: inline-flex; margin: 0; }
.roster-table .roster-meta { display: none; }
.roster-table .roster-name { display: inline; }
.roster-table .roster-group td { letter-spacing: .04em; text-transform: uppercase; }
.roster-table .roster-group em { font-style: normal; margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: var(--line); color: var(--ink-soft); font-size: .72rem; }

@media (max-width: 767.98px) {
  /* ---- class nav: icon-only buttons spread evenly across the row ---- */
  .class-nav { flex-wrap: nowrap !important; gap: 6px !important; }
  .class-nav > .btn, .class-nav > form { flex: 1 1 0; min-width: 0; }
  .class-nav > form { display: flex; margin: 0; }
  .class-nav .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; font-size: 1.05rem; border-radius: 11px; }
  .class-nav > form .btn { flex: 1 1 auto; width: 100%; }
  .class-nav .nav-label { display: none; }
  .class-nav .nav-badge { position: absolute; top: -6px; right: -4px; margin: 0 !important; padding: 2px 5px; min-width: 17px; font-size: .62rem; border: 2px solid var(--surface); }

  /* ---- roster: each student becomes a clean card-row; no table headers needed ---- */
  .roster-table, .roster-table tbody, .roster-table tr, .roster-table td { display: block; width: 100%; }
  .roster-table thead { display: none; }
  .roster-table td { border: 0 !important; padding: 0 !important; background: transparent !important; }
  .roster-table .c-no, .roster-table .c-email { display: none; }

  .roster-table .roster-group td { padding: 9px 16px !important; background: var(--canvas) !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
    font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
  .roster-table .roster-group:first-child td { border-top: 0 !important; }

  .roster-table .roster-row { padding: 12px 16px 12px; border-bottom: 1px solid var(--line); }
  .roster-table .roster-row:last-child { border-bottom: 0; }
  .roster-table > tbody > tr:hover { background: transparent; }
  .roster-table .c-name .d-flex { align-items: center; }
  .roster-table .roster-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .roster-table .roster-name-text { font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
  .roster-table .roster-meta { display: block; font-size: .76rem; color: var(--ink-soft); overflow-wrap: anywhere; }

  /* icon-only action buttons: one even row spanning the full card width (no dead space on the right) */
  .roster-table .c-act { margin-top: 12px; padding-left: 0 !important; text-align: left !important; }
  .roster-actions { display: flex; width: 100%; justify-content: stretch; gap: 8px; flex-wrap: nowrap; }
  .roster-actions > .btn, .roster-actions > .roster-account, .roster-actions > form { flex: 1 1 0; min-width: 0; }
  .roster-actions > form { display: flex; }
  .roster-actions .btn, .roster-actions .roster-account { width: 100%; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1rem; }
  .roster-actions .btn-text { display: none; }
  .roster-actions .roster-account { background: color-mix(in srgb, #00c875 16%, var(--surface)) !important; color: #00875a !important; border: 1px solid color-mix(in srgb, #00c875 32%, var(--surface)); font-size: 1.05rem; }

  /* pending-requests table: checkbox sits at the left of the row */
  .roster-table.is-pending .roster-row { position: relative; padding-left: 48px; }
  .roster-table.is-pending .c-act { text-align: left !important; }
  .roster-table.is-pending .c-check { position: absolute; left: 16px; top: 20px; width: auto; }
  .roster-table.is-pending .roster-group td { padding-left: 16px !important; }

  /* roster header: title on its own line, action buttons share the next one */
  .roster-head > span { flex: 1 1 100%; }
  .roster-head > div { flex: 1 1 100%; }
  .roster-head > div > .btn, .roster-head > div > form { flex: 1 1 auto; }
  .roster-head > div > form .btn { width: 100%; }
}

/* Roster registration status (not registered / awaiting first login) keeps its own colour on mobile */
@media (max-width: 767.98px) {
  .roster-actions .roster-account.text-bg-secondary { background: color-mix(in srgb, #8a8f98 16%, var(--surface)) !important; color: #5f6672 !important; border-color: color-mix(in srgb, #8a8f98 32%, var(--surface)); }
  .roster-actions .roster-account.text-bg-warning { background: color-mix(in srgb, #fdab3d 18%, var(--surface)) !important; color: #b36b00 !important; border-color: color-mix(in srgb, #fdab3d 36%, var(--surface)); }
}

/* ---------- PDF import: Review Imported Class (tabbed) ---------- */
.pdf-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pdf-review-head p { max-width: 62ch; }

.pdf-found { margin-bottom: 16px; padding: 12px 16px 14px; background: color-mix(in srgb, var(--mon-red) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mon-red) 22%, var(--line)); border-left: 4px solid var(--mon-red); border-radius: 12px; }
.pdf-found-title { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: transparent; font-size: 0.86rem; font-weight: 700; color: color-mix(in srgb, var(--mon-red) 70%, var(--ink)); text-align: left; cursor: default; }
.pdf-found-title > i:first-child { color: var(--mon-red); font-size: 1.15rem; line-height: 1; }
.pdf-found-count { display: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mon-red-light); color: color-mix(in srgb, var(--mon-red) 70%, var(--ink)); font-size: 0.72rem; align-items: center; justify-content: center; }
.pdf-found-chev { display: none; margin-left: auto; transition: transform .2s ease; }
.pdf-found-body { display: flex; flex-direction: column; }
.pdf-found-group + .pdf-found-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--mon-red) 18%, var(--line)); }
/* Same 5 columns in both rows so labels and values line up top to bottom */
.pdf-found-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 24px; margin: 0; }
.pdf-found-grid > div { min-width: 0; }
.pdf-found-grid > .is-time { grid-column: span 3; }
.pdf-found-grid dt { margin: 0 0 2px; font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); }
.pdf-found-grid dd { margin: 0; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: break-word; }
@media (max-width: 991.98px) {
  .pdf-found-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdf-found-grid > .is-time { grid-column: 1 / -1; }
}

.pdf-tabs { position: relative; display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; }
.pdf-tab-ink { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13); z-index: 0; pointer-events: none; will-change: transform, width; transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1); }
.pdf-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.pdf-tab:hover { color: var(--mon-blue); }
.pdf-tab:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 1px; }
.pdf-tab.is-active { color: var(--mon-blue); }
.pdf-tab-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--line); color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.pdf-tab.is-active .pdf-tab-count { background: var(--mon-blue-light); color: var(--mon-blue); }
.pdf-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mon-red); flex: none; }
.pdf-tab-dot[hidden] { display: none; }

.pdf-panels { padding: 20px; overflow: hidden; transition: height .3s cubic-bezier(.4, 0, .2, 1); }
.pdf-panel[hidden] { display: none; }
.pdf-panel.is-entering { animation: pdfPanelIn .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pdfPanelIn { from { opacity: 0; transform: translateX(var(--enter-x, 12px)); } to { opacity: 1; transform: none; } }
.pdf-panel-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.pdf-panel-nav.is-end { justify-content: flex-end; }
.pdf-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.pdf-panel-top p { max-width: 62ch; }
.flex-none { flex: none; }

/* Details: grouped fields */
.pdf-group + .pdf-group { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.pdf-group-title { margin: 0 0 10px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.pdf-panel .form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }

/* Schedule: one tidy card per meeting */
.pdf-sched-status { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; font-size: 0.84rem; background: var(--mon-green-light); color: var(--ink); }
.pdf-sched-status[hidden] { display: none; }
.pdf-sched-status i { margin-top: 2px; color: var(--mon-green); }
.pdf-sched-status.is-warn { background: var(--mon-red-light); }
.pdf-sched-status.is-warn i { color: var(--mon-red); }
.pdf-sched-list { display: flex; flex-direction: column; gap: 10px; }
.pdf-sched-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr) 118px minmax(0, 1.3fr) 38px; gap: 10px; align-items: end; padding: 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; }
.pdf-sched-row .pdf-f { min-width: 0; }
.pdf-sched-row .form-label { margin-bottom: 3px; font-size: 0.74rem; }
.pdf-row-remove { width: 38px; height: 31px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pdf-empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); font-size: 0.88rem; text-align: center; }
.pdf-empty i { font-size: 1.3rem; color: var(--mon-blue); }

/* Students: numbered table that turns into stacked cards on phones */
.pdf-stu-scroll { max-height: min(55vh, 480px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.pdf-stu-table { table-layout: fixed; min-width: 560px; counter-reset: stu; }
.pdf-stu-table tbody tr { counter-increment: stu; }
.pdf-stu-table .c-sum { display: none; }
.pdf-stu-table thead th { position: sticky; top: 0; z-index: 1; background: var(--canvas); font-size: 0.74rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); padding: 9px 8px; border-bottom: 1px solid var(--line); }
.pdf-stu-table td { padding: 6px 8px; vertical-align: middle; }
.pdf-stu-table tbody tr:hover { background: var(--canvas); }
.pdf-stu-table .c-num { width: 46px; text-align: center; color: var(--ink-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pdf-stu-table tbody .c-num::before { content: counter(stu); }
.pdf-stu-table .c-no { width: 20%; }
.pdf-stu-table .c-gender { width: 118px; }
.pdf-stu-table .c-act { width: 52px; text-align: center; }

/* Create / Cancel bar stays reachable while scrolling long rosters (desktop; mobile has its own bottom nav) */
.pdf-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
@media (min-width: 901px) {
  .pdf-actionbar { position: sticky; bottom: 0; z-index: 5; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -4px 14px rgba(20, 20, 43, 0.06); }
}

/* ===== Mobile (phones & small tablets) ===== */
.pdf-bar-msg { min-width: 0; font-size: 0.82rem; }
.pdf-bar-info { color: var(--ink-soft); }
#pdfFormError:not([hidden]) + .pdf-bar-info { display: none; }
.pdf-bar-btns { display: flex; justify-content: flex-end; gap: 8px; margin-left: auto; }

@media (max-width: 900px) {
  /* Tab strip stays under the top bar while scrolling */
  .pdf-tabs { position: sticky; top: var(--pdf-top, 56px); z-index: 8; box-shadow: 0 6px 10px -8px rgba(20, 20, 43, 0.28); }
  .pdf-tab { min-height: 44px; }
  .pdf-panel :is(input, select) { scroll-margin-top: calc(var(--pdf-top, 56px) + 76px); scroll-margin-bottom: 120px; }

  /* Create bar: pinned to the bottom, replaces the tab bar (like Save Attendance) */
  .pdf-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(20, 20, 43, 0.14); }
  .pdf-bar-msg { text-align: center; line-height: 1.3; }
  .pdf-bar-btns { margin-left: 0; gap: 8px; }
  .pdf-bar-cancel { flex: 0 0 auto; min-height: 48px; padding-left: 18px; padding-right: 18px; display: inline-flex; align-items: center; border-radius: 10px; }
  .pdf-bar-create { flex: 1 1 auto; min-height: 48px; font-size: 0.98rem; font-weight: 700; border-radius: 10px; }
  body.has-pdf-bar .scroll-top-fab { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767.98px) {
  /* Bigger touch targets; 16px stops iOS from zooming into fields */
  .pdf-panels :is(.form-control, .form-select) { min-height: 44px; font-size: 16px; }
  .pdf-panels .form-label { font-size: 0.8rem; }
  .pdf-panel-top { flex-direction: column; align-items: stretch; gap: 10px; }
  .pdf-panel-top > .btn { width: 100%; min-height: 44px; }
  .pdf-panel-nav .btn { flex: 1 1 0; min-height: 44px; }

  /* Schedule: a labelled card per meeting */
  .pdf-sched-list { counter-reset: sched; }
  .pdf-sched-row { position: relative; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 14px; align-items: start; }
  .pdf-sched-row::before { counter-increment: sched; content: "Meeting " counter(sched); grid-column: 1 / -1; order: 0; display: flex; align-items: center; min-height: 28px; padding-right: 44px; font-size: 0.86rem; font-weight: 700; color: var(--ink); }
  .pdf-f-day { order: 1; } .pdf-f-type { order: 2; } .pdf-f-start { order: 3; } .pdf-f-end { order: 4; }
  .pdf-f-room { order: 5; grid-column: 1 / -1; }
  .pdf-sched-row .form-label { font-size: 0.78rem; }
  .pdf-row-remove { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; order: 6; }
}

@media (max-width: 640px) {
  /* Students: compact line per student, tap to edit */
  .pdf-stu-scroll { max-height: none; overflow: visible; }
  .pdf-stu-table { min-width: 0; table-layout: auto; }
  .pdf-stu-table, .pdf-stu-table tbody { display: block; }
  .pdf-stu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pdf-stu-table tbody tr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; border-bottom: 1px solid var(--line); background: transparent; }
  .pdf-stu-table tbody tr:last-child { border-bottom: 0; }
  .pdf-stu-table tbody tr:hover { background: transparent; }
  .pdf-stu-table tbody tr.is-open { background: var(--canvas); padding-bottom: 14px; }
  .pdf-stu-table td { display: block; width: auto !important; padding: 0; text-align: left; border: 0; }
  .pdf-stu-table .c-num { display: none; }

  .pdf-stu-table .c-sum { display: block; grid-column: 1 / -1; order: 0; }
  .stu-sum { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 9px 58px 9px 12px; border: 0; background: transparent; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
  .stu-sum:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: -2px; border-radius: 10px; }
  .stu-sum-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--canvas); color: var(--ink-soft); font-size: 0.74rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .stu-sum-n::before { content: counter(stu); }
  .is-open .stu-sum-n { background: var(--surface); }
  .stu-sum-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .stu-sum-name { font-size: 0.92rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stu-sum-name.is-empty { color: var(--ink-faint); font-style: italic; font-weight: 600; }
  .stu-sum-meta { font-size: 0.78rem; color: var(--ink-soft); }
  .stu-sum > .bi { flex: none; color: var(--ink-faint); transition: transform .2s ease; }
  .is-open .stu-sum > .bi { transform: rotate(180deg); }

  /* Fields stay hidden until the row is opened */
  .pdf-stu-table .c-no, .pdf-stu-table .c-last, .pdf-stu-table .c-first, .pdf-stu-table .c-gender { display: none; }
  .pdf-stu-table .is-open .c-no, .pdf-stu-table .is-open .c-last, .pdf-stu-table .is-open .c-first, .pdf-stu-table .is-open .c-gender { display: block; padding: 0 12px; }
  .pdf-stu-table .c-no { order: 1; grid-column: 1; }
  .pdf-stu-table .c-gender { order: 2; grid-column: 2; }
  .pdf-stu-table .c-last { order: 3; grid-column: 1 / -1; }
  .pdf-stu-table .c-first { order: 4; grid-column: 1 / -1; }
  .pdf-stu-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
  .pdf-stu-table .c-act { position: absolute; top: 9px; right: 8px; width: auto !important; padding: 0; }
  .pdf-stu-table .c-act .btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 575.98px) {
  .pdf-review-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .pdf-review-head > .btn { display: none; }   /* Cancel lives in the bottom bar on phones */
  .pdf-review-head h5 { font-size: 1.05rem; }

  /* "Found in your PDF" collapses to one line */
  .pdf-found { padding: 10px 12px; }
  .pdf-found-title { cursor: pointer; min-height: 32px; margin: 0; }
  .pdf-found-count { display: inline-flex; }
  .pdf-found-chev { display: inline-block; }
  .pdf-found.is-collapsed .pdf-found-body { display: none; }
  .pdf-found.is-collapsed .pdf-found-chev { transform: rotate(-90deg); }
  .pdf-found:not(.is-collapsed) .pdf-found-title { margin-bottom: 8px; }
  .pdf-found-grid { display: block; }
  .pdf-found-grid > .is-time { grid-column: auto; }
  .pdf-found-grid dt { margin: 0; font-size: 0.8rem; }
  .pdf-found-grid > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid color-mix(in srgb, var(--mon-red) 14%, var(--line)); }
  .pdf-found-grid > div:last-child { border-bottom: 0; }
  .pdf-found-group + .pdf-found-group { margin-top: 6px; padding-top: 6px; }

  .pdf-tab { padding: 9px 6px; gap: 5px; font-size: 0.84rem; }
  .pdf-tab > i { display: none; }
  .pdf-panels { padding: 14px; }
  .pdf-group + .pdf-group { margin-top: 16px; padding-top: 14px; }
}
/* ===== Colour coding: one colour per section so it is easy to tell where you are =====
   Details = blue, Schedule = amber, Students = green. Lecture = blue, Lab = teal.
   Male = blue, Female = pink. Fields that still need an answer = orange. */
.pdf-review {
  --c-details: var(--mon-blue);   --c-details-bg: var(--mon-blue-light);   --c-details-ink: color-mix(in srgb, var(--mon-blue) 75%, var(--ink));
  --c-sched: var(--mon-orange);   --c-sched-bg: var(--mon-orange-light);   --c-sched-ink: color-mix(in srgb, var(--mon-orange) 46%, var(--ink));
  --c-stu: var(--mon-green);      --c-stu-bg: var(--mon-green-light);      --c-stu-ink: color-mix(in srgb, var(--mon-green) 62%, var(--ink));
  --c-lab: #12a5a0;               --c-lab-bg: color-mix(in srgb, #12a5a0 15%, var(--surface));
  --c-male: var(--mon-blue);      --c-female: #e5509a;
  --c-female-bg: color-mix(in srgb, #e5509a 15%, var(--surface));
  --c-male-bg: var(--mon-blue-light);
}

/* Tabs: each has its own colour, even when not selected */
.pdf-tab[data-tab="details"]  { --accent: var(--c-details); --accent-bg: var(--c-details-bg); --accent-ink: var(--c-details-ink); }
.pdf-tab[data-tab="schedule"] { --accent: var(--c-sched);   --accent-bg: var(--c-sched-bg);   --accent-ink: var(--c-sched-ink); }
.pdf-tab[data-tab="students"] { --accent: var(--c-stu);     --accent-bg: var(--c-stu-bg);     --accent-ink: var(--c-stu-ink); }
.pdf-tab > i:first-child { color: var(--accent); }
.pdf-tab:hover, .pdf-tab.is-active { color: var(--accent-ink); }
.pdf-tab .pdf-tab-count, .pdf-tab.is-active .pdf-tab-count { background: var(--accent-bg); color: var(--accent-ink); }
.pdf-tab.is-active { font-weight: 700; }

/* The card takes the colour of whichever tab is open */
.pdf-panels { --panel-accent: var(--c-details); --panel-bg: var(--c-details-bg); --panel-ink: var(--c-details-ink); border-top: 4px solid var(--panel-accent); transition: height .3s cubic-bezier(.4, 0, .2, 1), border-color .3s ease; }
.pdf-panels[data-active="schedule"] { --panel-accent: var(--c-sched); --panel-bg: var(--c-sched-bg); --panel-ink: var(--c-sched-ink); }
.pdf-panels[data-active="students"] { --panel-accent: var(--c-stu);   --panel-bg: var(--c-stu-bg);   --panel-ink: var(--c-stu-ink); }

.pdf-panel-title { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 14px; }
.pdf-panel-top .pdf-panel-title { margin-bottom: 0; }
.pdf-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--panel-bg); color: var(--panel-ink); }
.pdf-panel-title h6 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--panel-ink); }
.pdf-panel-title p { margin: 1px 0 0; font-size: 0.82rem; color: var(--ink-soft); max-width: 62ch; }

.pdf-group-title { display: flex; align-items: center; gap: 8px; }
.pdf-group-title i { color: var(--c-details); }
.pdf-group + .pdf-group { border-top-color: color-mix(in srgb, var(--c-details) 28%, var(--line)); }
#panel-details .form-control:focus, #panel-details .form-select:focus { border-color: var(--c-details); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-details) 22%, transparent); }
#panel-schedule .form-control:focus, #panel-schedule .form-select:focus { border-color: var(--c-sched); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sched) 24%, transparent); }
#panel-students .form-control:focus, #panel-students .form-select:focus { border-color: var(--c-stu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-stu) 24%, transparent); }

/* Needs an answer: orange, so empty required fields stand out */
#panel-details input.form-control:required:placeholder-shown,
#panel-details select.form-select:required:invalid { border-color: var(--mon-orange); background-color: var(--mon-orange-light); }

/* "Found in your PDF": tiles coloured by the tab they fill in */

/* Next / back buttons wear the colour of where they lead */
.pdf-panel-nav [data-goto] { border-width: 1.5px; font-weight: 600; }
.pdf-panel-nav [data-goto="details"]  { color: var(--c-details-ink); border-color: var(--c-details); }
.pdf-panel-nav [data-goto="schedule"] { color: var(--c-sched-ink);   border-color: var(--c-sched); }
.pdf-panel-nav [data-goto="students"] { color: var(--c-stu-ink);     border-color: var(--c-stu); }
.pdf-panel-nav [data-goto="details"]:hover  { background: var(--c-details-bg); color: var(--c-details-ink); border-color: var(--c-details); }
.pdf-panel-nav [data-goto="schedule"]:hover { background: var(--c-sched-bg);   color: var(--c-sched-ink);   border-color: var(--c-sched); }
.pdf-panel-nav [data-goto="students"]:hover { background: var(--c-stu-bg);     color: var(--c-stu-ink);     border-color: var(--c-stu); }
#addScheduleRow { color: var(--c-sched-ink); border-color: var(--c-sched); font-weight: 600; }
#addScheduleRow:hover { background: var(--c-sched-bg); color: var(--c-sched-ink); border-color: var(--c-sched); }
#addStudentRow { color: var(--c-stu-ink); border-color: var(--c-stu); font-weight: 600; }
#addStudentRow:hover { background: var(--c-stu-bg); color: var(--c-stu-ink); border-color: var(--c-stu); }

/* Schedule: lecture = blue, lab = teal (stripe, tint and the Type menu all agree) */
.pdf-sched-row { border-left: 5px solid var(--c-details); background: color-mix(in srgb, var(--c-details) 6%, var(--surface)); }
.pdf-sched-row[data-type="lab"] { border-left-color: var(--c-lab); background: color-mix(in srgb, var(--c-lab) 8%, var(--surface)); }
.pdf-sched-row .sched-type-select { font-weight: 700; color: var(--c-details-ink); background-color: var(--c-details-bg); border-color: transparent; }
.pdf-sched-row[data-type="lab"] .sched-type-select { color: color-mix(in srgb, var(--c-lab) 60%, var(--ink)); background-color: var(--c-lab-bg); }
.pdf-sched-row::before { color: var(--c-details-ink); }
.pdf-sched-row[data-type="lab"]::before { color: color-mix(in srgb, var(--c-lab) 60%, var(--ink)); }
.pdf-sched-status { border-left: 4px solid var(--mon-green); }
.pdf-sched-status.is-warn { border-left-color: var(--mon-red); }
.pdf-empty { background: var(--c-sched-bg); border-color: var(--c-sched); color: var(--c-sched-ink); }
.pdf-empty i { color: var(--c-sched); }

/* Students: gender colours */
.g-pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; line-height: 1.5; vertical-align: baseline; }
.g-male { background: var(--c-male-bg); color: var(--c-details-ink); }
.g-female { background: var(--c-female-bg); color: color-mix(in srgb, var(--c-female) 70%, var(--ink)); }
.pdf-stu-table thead th { background: var(--c-stu-bg); color: var(--c-stu-ink); border-bottom: 2px solid var(--c-stu); }
.pdf-stu-table .student-row .c-gender select { font-weight: 600; border-left: 4px solid var(--c-male); }
.pdf-stu-table .student-row[data-g="Female"] .c-gender select { border-left-color: var(--c-female); background-color: var(--c-female-bg); }
.pdf-stu-table .student-row[data-g="Male"] .c-gender select { background-color: var(--c-male-bg); }
.pdf-stu-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-stu) 4%, transparent); }
.pdf-stu-table .c-num { color: var(--c-stu-ink); font-weight: 700; }
.pdf-stu-table tbody tr:hover { background: color-mix(in srgb, var(--c-stu) 10%, transparent); }

/* Create bar summary */
.pdf-bar-info b { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; margin-right: 2px; }
.pdf-bar-info .bar-sched { background: var(--c-sched-bg); color: var(--c-sched-ink); }
.pdf-bar-info .bar-stu { background: var(--c-stu-bg); color: var(--c-stu-ink); }

@media (max-width: 640px) {
  .pdf-stu-table tbody tr:nth-child(even), .pdf-stu-table tbody tr:hover { background: transparent; }
  .pdf-stu-table .student-row { border-left: 5px solid var(--c-male); }
  .pdf-stu-table .student-row[data-g="Female"] { border-left-color: var(--c-female); }
  .pdf-stu-table tbody tr.is-open { background: color-mix(in srgb, var(--c-stu) 7%, var(--surface)); }
  .pdf-stu-table .student-row .stu-sum-n { background: var(--c-male-bg); color: var(--c-details-ink); }
  .pdf-stu-table .student-row[data-g="Female"] .stu-sum-n { background: var(--c-female-bg); color: color-mix(in srgb, var(--c-female) 70%, var(--ink)); }
  .pdf-stu-table .c-gender select { border-left-width: 1px; }
}
@media (max-width: 575.98px) {
  /* Icons are hidden on phones, so a coloured dot marks each tab instead */
  .pdf-tab::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .pdf-panel-title { margin-bottom: 12px; }
  .pdf-ico { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }
}
@media (max-width: 767.98px) {
  .pdf-panel-top .pdf-panel-title { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-tab-ink, .pdf-panels, .pdf-tab, .pdf-tab-count { transition: none; }
  .pdf-panel.is-entering { animation: none; }
}
/* "Create from PDF" button — matches the red PDF-icon theme used on the upload page */
.btn-pdf { color: var(--mon-red); background: var(--mon-red-light); border: 1px solid #f4b6c0; font-weight: 700; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn-pdf .bi { color: var(--mon-red); transition: color .15s; }
.btn-pdf:hover, .btn-pdf:focus-visible { color: #fff; background: var(--mon-red); border-color: var(--mon-red); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(226,68,92,.28); }
.btn-pdf:hover .bi, .btn-pdf:focus-visible .bi { color: #fff; }
.btn-pdf:active { transform: translateY(0); box-shadow: none; }

/* ---------- Edit Class page: details + schedule on the left, Card Color (with live preview) on the right ---------- */
.class-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "details color" "schedule color"; gap: 16px 20px; align-items: start; }
.ce-details { grid-area: details; }
.ce-schedule { grid-area: schedule; }
.ce-color { grid-area: color; position: sticky; top: 16px; }
.ce-preview-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.ce-color-card .class-card { pointer-events: none; transition: none; }
.ce-color-card .class-card-head { transition: background .2s ease; }
.ce-preview-name { margin: 8px 0 16px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); text-align: center; }
.ce-picker .theme-picker { max-width: none; gap: 10px; }
@media (max-width: 991.98px) {
  .class-edit-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "details" "color" "schedule"; }
  .ce-color { position: static; }
}

/* ---------- Class nav: sliding active-tab indicator ---------- */
/* Without JS the active tab is simply a solid blue pill. */
.class-nav:not(.has-indicator) a.btn.is-active { background: var(--mon-blue); border-color: var(--mon-blue); color: #fff; box-shadow: 0 1px 2px rgba(0,115,234,.35); }

.class-nav { position: relative; isolation: isolate; }
.class-nav-indicator {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  background: var(--mon-blue); box-shadow: 0 1px 3px rgba(0,115,234,.4);
  transition: transform .42s cubic-bezier(.65, 0, .25, 1), width .42s cubic-bezier(.65, 0, .25, 1), height .42s cubic-bezier(.65, 0, .25, 1), opacity .2s ease;
  will-change: transform, width;
}
/* Tabs become transparent; their idle "white card" look is drawn behind the indicator so the blue pill can glide over it. */
.class-nav.has-indicator > a.btn { position: relative; background: transparent !important; border-color: transparent !important; box-shadow: none; transition: color .3s ease; }
.class-nav.has-indicator > a.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line);
  transition: opacity .25s ease, background .15s ease, border-color .15s ease;
}
.class-nav.has-indicator > a.btn:hover { color: var(--ink); }
.class-nav.has-indicator > a.btn:hover::before { background: var(--canvas); border-color: var(--line-strong); }
.class-nav.has-indicator > a.btn.is-active,
.class-nav.has-indicator > a.btn.is-active:hover { color: #fff; }
.class-nav.has-indicator > a.btn.is-active::before { opacity: 0; }
/* While the pill is in flight: the tab it is leaving keeps white text, the one it is heading to keeps dark text, then both fade. */
.class-nav.has-indicator > a.btn.nav-leaving { color: #fff !important; }
.class-nav.has-indicator > a.btn.nav-arriving { color: var(--ink-soft) !important; }
.class-nav.has-indicator > a.btn.is-active.nav-arriving::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .class-nav-indicator, .class-nav.has-indicator > a.btn, .class-nav.has-indicator > a.btn::before { transition: none; }
}

/* ---------- Take Attendance: prominent meeting date ---------- */
.session-header { padding-top: 14px; padding-bottom: 14px; }
.session-date { display: flex; align-items: center; gap: 14px; min-width: 0; }
.session-date-tile {
  flex: none; width: 56px; height: 60px; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface); border: 1.5px solid var(--mon-blue); box-shadow: var(--shadow-sm);
}
.session-date-tile .sd-mon { align-self: stretch; text-align: center; background: var(--mon-blue); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; line-height: 1.2; }
.session-date-tile .sd-day { flex: 1; display: flex; align-items: center; font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.session-date-info { min-width: 0; }
.session-date-main { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.session-date-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 5px; }
@media (max-width: 700px) {
  .session-date-main { font-size: 1.12rem; }
  .session-date-tile { width: 50px; height: 54px; }
}

/* Date block is the calendar trigger */
button.session-date-tile { padding: 0; cursor: pointer; font: inherit; transition: transform .15s ease, box-shadow .15s ease; }
button.session-date-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,115,234,.22); }
button.session-date-tile:focus-visible, .session-date-link:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 3px; }
.session-date-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; color: var(--ink); transition: color .15s ease; }
.session-date-link:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 3px; }
.session-date-link .bi { font-size: .8rem; color: var(--mon-blue); transition: transform .2s ease; }
.session-date-link:hover { color: var(--mon-blue); }
.session-date-link:hover .bi { transform: translateY(2px); }
/* Lecture / Laboratory switch (only when the class meets for both on that day) */
.session-type-switch { display: inline-flex; padding: 2px; gap: 2px; border-radius: 99px; background: var(--canvas); border: 1px solid var(--line); }
.session-type-switch a { padding: 2px 12px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; transition: background .15s ease, color .15s ease; }
.session-type-switch a:hover { color: var(--ink); }
.session-type-switch a.active { background: var(--mon-blue); color: #fff; box-shadow: 0 1px 2px rgba(0,115,234,.35); }

/* ---------- Class-themed manage pages ----------
   .class-themed is put on .page-body (layouts/main.php) when the teacher picked a colour for the
   class card. It re-points the brand tokens at that card's --c1, so buttons, active pills, links,
   focus rings, badges and highlights follow the card colour. The topbar and sidebar are outside
   .page-body, so they are never affected. */
.class-themed {
  --mon-blue: var(--c1);
  --mon-blue-dark: color-mix(in srgb, var(--c1) 82%, #000);
  --mon-blue-light: color-mix(in srgb, var(--c1) 11%, var(--surface));
  --brand: var(--c1);
  --brand-dark: color-mix(in srgb, var(--c1) 82%, #000);
  --brand-light: color-mix(in srgb, var(--c1) 11%, var(--surface));
  --link: var(--c1);
  --on-blue-light: color-mix(in srgb, var(--c1) 80%, #000);
  --bs-primary: var(--c1);
  --bs-link-color: var(--c1);
  --bs-link-hover-color: color-mix(in srgb, var(--c1) 82%, #000);
  --bs-focus-ring-color: color-mix(in srgb, var(--c1) 30%, transparent);
}
[data-bs-theme="dark"] .class-themed {
  --mon-blue-light: color-mix(in srgb, var(--c1) 24%, transparent);
  --brand-light: color-mix(in srgb, var(--c1) 24%, transparent);
  --link: color-mix(in srgb, var(--c1) 55%, #fff);
  --on-blue-light: color-mix(in srgb, var(--c1) 45%, #fff);
  --bs-link-color: color-mix(in srgb, var(--c1) 55%, #fff);
}
.class-themed .btn-brand,
.class-themed .class-nav:not(.has-indicator) a.btn.is-active,
.class-themed .session-type-switch a.active { box-shadow: 0 1px 2px color-mix(in srgb, var(--c1) 40%, transparent); }
.class-themed .btn-outline-primary { border-color: color-mix(in srgb, var(--c1) 40%, var(--surface)); }
.class-themed .btn-outline-primary:hover { color: #fff; }
.class-themed .flatpickr-day.att-holiday:not(.selected),
.class-themed .att-dot-holiday { border-color: color-mix(in srgb, var(--c1) 40%, var(--surface)); }
.class-themed .form-control:focus,
.class-themed .form-select:focus {
  border-color: var(--c1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 22%, transparent);
}
.class-themed .form-check-input:checked { background-color: var(--c1); border-color: var(--c1); }
.class-themed .form-check-input:focus { border-color: var(--c1); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--c1) 25%, transparent); }
.class-themed .nav-tabs .nav-link.active,
.class-themed .nav-pills .nav-link.active { color: var(--c1); }
.class-themed .nav-pills .nav-link.active { background: var(--mon-blue-light); }
.class-themed .class-nav-indicator { box-shadow: 0 1px 3px color-mix(in srgb, var(--c1) 45%, transparent); }
.class-themed button.session-date-tile:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--c1) 24%, transparent); }


/* =====================================================================
   Admin list pages (Teachers · Students · All Classes) — "fit" layout
   The page never scrolls: filters on top, ONLY the table rows scroll,
   and the pager stays pinned at the bottom (also on phones).
   Enabled by the view setting $fitPage = true (see layouts/main.php).
   ===================================================================== */
body.fit-page { overflow: hidden; }
body.fit-page .app-shell { min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; }
body.fit-page .scroll-top-fab { display: none !important; }

.main-content.main-fit { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.main-fit > .topbar { flex: 0 0 auto; }

.page-body.page-fit {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 28px 20px;
  overflow: hidden;
}
.page-fit > * { flex: 0 0 auto; margin: 0 !important; }
.page-fit > .sf-table-card { flex: 1 1 auto; min-height: 0; }
/* the big cards shouldn't lift / shrink while you scroll or press inside them */
.page-fit .card:hover { box-shadow: var(--shadow-sm); }
.page-fit .card:active { transform: none; }

/* ---------- Filter card ---------- */
.student-filter .card-body { padding: 14px 16px; }
.sf-top { display: flex; align-items: center; gap: 8px; }
.student-filter .sf-search .form-control { min-height: 42px; border-radius: 10px; background: var(--canvas); border-color: transparent; }
.student-filter .sf-search .form-control:focus { background: var(--surface); border-color: var(--mon-blue); }
.sf-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-width: 0; }
.sf-meta .sf-count { white-space: nowrap; font-weight: 600; }
.sf-clear { white-space: nowrap; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

/* Password-confirm dialog: success state */
.pwc-done { padding: 28px 24px 24px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.pwc-done[hidden] { display: none; }
.pwc-done-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; background: #e3f8ee; color: #067a4a; animation: pwcPop .25s ease-out; }
.pwc-done-title { margin: 6px 0 0; font-weight: 700; }
.pwc-done-text { margin: 0 0 8px; color: var(--ink-soft); }
@keyframes pwcPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Activity log: collapsible filter panel ---------- */
.al-top { display: flex; align-items: center; gap: 8px; }
.al-top .sf-search, .sf-top .sf-search { min-width: 0; }
.al-toggle {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px; font-weight: 600; font-size: .9rem;
  background: var(--canvas); color: var(--ink-soft); border: 1px solid transparent; border-radius: 10px;
}
.al-toggle:hover { color: var(--ink); }
.al-toggle.has-active, .al-toggle.is-open { background: var(--mon-blue-light); color: var(--on-blue-light); }
.al-toggle .al-caret { font-size: .75rem; transition: transform .15s ease; }
.al-toggle.is-open .al-caret { transform: rotate(180deg); }
.al-toggle-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mon-blue); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.al-toggle-n[hidden] { display: none; }

.al-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; align-items: end; }
.al-contents { display: contents; }               /* the facet dropdowns become grid cells next to From / To */
.al-field { min-width: 0; }
.al-field .sf-label { display: block; margin-bottom: 4px; }
.al-grid .form-select, .al-grid .form-control { width: 100%; min-height: 40px; font-size: .9rem; }

@media (max-width: 900px) {
  .al-toggle-text { display: none; }              /* icon-only on phones, like the other lists */
  .al-toggle { width: 44px; padding: 0; justify-content: center; }
  .al-toggle .al-caret { display: none; }
  .al-toggle-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; line-height: 18px; font-size: .68rem; padding: 0 5px; }
  .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-grid .form-select, .al-grid .form-control { font-size: 16px; min-height: 42px; }   /* stops iOS zooming into the field */
}
@media (max-width: 420px) { .al-grid { grid-template-columns: 1fr; } }

/* ---------- Table card ---------- */
.sf-table-card { display: flex; flex-direction: column; overflow: hidden; }
.sf-table-card > .card-header { flex: 0 0 auto; padding-top: 12px; padding-bottom: 12px; }
.sf-table-card > .card-header .btn { min-height: 0; }
.sf-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sf-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sf-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--surface); }
.sf-scroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.sf-table { min-width: 760px; margin: 0; }
.sf-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--canvas); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line);
  white-space: nowrap; padding-top: .7rem; padding-bottom: .7rem;
}
.sf-table tbody td { padding-top: .7rem; padding-bottom: .7rem; overflow-wrap: anywhere; }
.sf-table--students { table-layout: fixed; min-width: 1000px; }
.sf-table tbody tr.sf-row { transition: background .12s ease; }

.cell-title { font-weight: 600; color: var(--ink); line-height: 1.25; }
.cell-sub { font-size: .76rem; color: var(--ink-soft); margin-top: 1px; }

/* initials avatar (teachers) */
.mini-avatar {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
}
.mini-avatar-sm { width: 24px; height: 24px; font-size: .62rem; }

/* Admin > Teachers: name + designation badge sit together and wrap on word boundaries */
.tch-id { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.tch-id .cell-title { overflow-wrap: break-word; word-break: normal; }
.tch-id .badge { white-space: nowrap; }
.mini-avatar.tone-1 { background: linear-gradient(135deg, #00c875, #0073ea); }
.mini-avatar.tone-2 { background: linear-gradient(135deg, #fdab3d, #e2445c); }
.mini-avatar.tone-3 { background: linear-gradient(135deg, #a25ddc, #e2445c); }

/* small chips used in the cells */
.type-chip, .count-pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--gray-light); color: var(--ink-soft);
}
.type-chip-lab { background: var(--mon-purple-light); color: var(--on-purple-light); }
.count-pill { background: var(--mon-blue-light); color: var(--on-blue-light); }
.badge-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

/* students: one mixed table; Sex pills in the card header double as quick filters */
.sf-table-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.sf-tally { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-tally-item {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 600; line-height: 1.4; padding: 3px 10px; border-radius: 999px;
  border: 1.5px solid transparent; transition: box-shadow .12s ease, border-color .12s ease, transform .08s ease;
}
.sf-tally-item b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-tally-item:hover { box-shadow: 0 1px 4px rgba(37, 39, 74, .15); }
.sf-tally-item:active { transform: scale(.97); }
.sf-tally-item:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 2px; }
.sf-tally--male   { background: var(--mon-blue-light);   color: var(--on-blue-light); }
.sf-tally--female { background: var(--mon-purple-light); color: var(--on-purple-light); }
.sf-tally--male.is-active   { border-color: var(--mon-blue);   box-shadow: 0 0 0 2px var(--mon-blue-light); }
.sf-tally--female.is-active { border-color: var(--mon-purple); box-shadow: 0 0 0 2px var(--mon-purple-light); }
.sf-sex { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; font-size: .84rem; }
.sf-sex--male   { color: var(--mon-blue); }
.sf-sex--female { color: var(--mon-purple); }

/* students: clickable rows (clear hover cue) + profile popup */
/* Row hover cue shared by the admin Students / Teachers / Classes tables */
.sf-table tbody tr.sf-row { position: relative; transition: background .12s ease, box-shadow .12s ease; }
.sf-row-click, tr.class-row { cursor: pointer; }
.sf-table tbody tr.sf-row:hover > td,
.sf-table tbody tr.sf-row:focus-visible > td { background: var(--mon-blue-light); }
.sf-table tbody tr.sf-row:hover,
.sf-table tbody tr.sf-row:focus-visible { box-shadow: inset 4px 0 0 var(--mon-blue); }
.sf-table tbody tr.sf-row:hover .cell-title,
.sf-table tbody tr.sf-row:focus-visible .cell-title { color: var(--mon-blue); }
.sf-row-click:active > td, tr.class-row:active > td { filter: brightness(.97); }

.sp-card { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 22, 50, .28); }
.sp-cover { height: 104px; position: relative; overflow: hidden; }
.sp-cover::before, .sp-cover::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.sp-cover::before { width: 190px; height: 190px; right: -50px; top: -90px; }
.sp-cover::after  { width: 120px; height: 120px; left: -36px; bottom: -70px; }
.sp-cover--male   { background: linear-gradient(135deg, #0073ea, #5034ff); }
.sp-cover--female { background: linear-gradient(135deg, #a25ddc, #e2445c); }
.sp-close { position: absolute; top: 14px; right: 14px; z-index: 1; opacity: .9; }
.sp-avatar-wrap { display: flex; justify-content: center; margin-top: -54px; position: relative; }
.sp-avatar {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas); color: var(--ink-soft); font-size: 2.5rem; font-weight: 700;
  border: 5px solid var(--surface); box-shadow: 0 6px 18px rgba(37, 39, 74, .22);
}
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-head { text-align: center; padding: 12px 22px 2px; }
.sp-name { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sp-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .74rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--gray-light); color: var(--ink-soft);
}
.sp-chip--male   { background: var(--mon-blue-light);   color: var(--on-blue-light); }
.sp-chip--female { background: var(--mon-purple-light); color: var(--on-purple-light); }
.sp-chip--ok     { background: #e3f8ee; color: #067a4a; }

.sp-body { padding: 16px 22px 22px; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-item {
  display: flex; gap: 11px; align-items: flex-start; min-width: 0;
  padding: 11px 13px; border-radius: 12px; background: var(--canvas);
}
.sp-item[hidden] { display: none; }
.sp-wide { grid-column: 1 / -1; }
.sp-item > .bi { color: var(--mon-blue); font-size: 1.05rem; margin-top: 1px; }
.sp-item > div { min-width: 0; }
.sp-label { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1px; }
.sp-val { font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px; }
.sp-val a { color: inherit; text-decoration: none; }
.sp-val a:hover { color: var(--mon-blue); text-decoration: underline; }
.sp-val.is-empty { color: var(--ink-faint); }

.sp-security { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sp-pw-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.sp-pw-toggle[hidden] { display: none; }
.sp-pw-toggle:hover, .sp-pw-toggle.is-open { background: var(--mon-blue-light); border-color: var(--mon-blue); color: var(--on-blue-light); }
.sp-pw-toggle .sp-caret { margin-left: auto; transition: transform .15s ease; }
.sp-pw-toggle.is-open .sp-caret { transform: rotate(180deg); }
.sp-pw-note { font-size: .84rem; color: var(--ink-soft); background: var(--canvas); border-radius: 12px; padding: 10px 14px; }
.sp-pw-note.is-ok { background: #e3f8ee; color: #067a4a; font-weight: 600; }
.sp-pw-note.is-warn { background: #fff4dc; color: #8a5a00; font-weight: 600; }
.sp-pw-mail { font-size: .82rem; color: var(--ink-soft); background: var(--canvas); border-radius: 10px; padding: 9px 12px; display: grid; gap: 6px; }
.sp-pw-mail .bi { color: var(--mon-blue); margin-right: 4px; }
.sp-pw-check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); }
.sp-pw-check[hidden] { display: none; }
.sp-pw-note[hidden], .sp-pw-form[hidden], .sp-pw-msg[hidden] { display: none; }
.sp-pw-form { display: grid; gap: 10px; margin-top: 12px; }
.sp-pw-input { position: relative; }
.sp-pw-input .form-control { padding-right: 42px; }
.sp-eye { position: absolute; top: 0; right: 0; height: 100%; width: 42px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.sp-eye:hover { color: var(--mon-blue); }
.sp-pw-msg { font-size: .84rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.sp-pw-msg.is-ok  { background: #e3f8ee; color: #067a4a; }
.sp-pw-msg.is-err { background: #fde8ec; color: #c0233f; }
.sp-pw-save { justify-self: stretch; }
@media (max-width: 480px) { .sp-grid { grid-template-columns: 1fr; } }

/* Profile popup: account actions (disable / delete) */
.sp-danger { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.sp-danger-title { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sp-danger-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-danger-row > .btn, .sp-danger-row > form { flex: 1 1 140px; }
.sp-danger-row > [hidden] { display: none; }
.sp-danger-row .d-contents { display: block; }
.sp-danger-note { font-size: .8rem; color: var(--ink-soft); }

/* ---------- Pager (pinned) ---------- */
.sf-pager { box-shadow: 0 -6px 16px rgba(37, 39, 74, .05); }
.sf-pager .card-body { padding: 10px 16px; }
.sf-pager .sf-count { white-space: nowrap; font-weight: 600; }

/* ---------- Phones & small tablets ---------- */
@media (max-width: 900px) {
  /* bottom tab bar is ~60px + safe area: keep the pager just above it */
  .page-body.page-fit { gap: 10px; padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)); }

  .student-filter .card-body { padding: 10px 12px; }
  .student-filter .sf-search .form-control { font-size: 16px; }   /* stops iOS zooming into the field */

  .sf-meta { margin-top: 8px; gap: 8px; }
  .sf-meta .sf-count { font-size: .8rem; }
  .sf-chips { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sf-chips::-webkit-scrollbar { display: none; }
  .sf-chip { white-space: nowrap; }

  .sf-table-card > .card-header { padding: 10px 14px; }

  /* compact pager: [Rows 10]  1–10 of 33        ‹ 2 › */
  .sf-pager .card-body { padding: 8px 12px; flex-wrap: nowrap; }
  .sf-pager .form-select { min-height: 34px; }
  .sf-pager .page-link { min-width: 36px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
  .sf-pager .sf-count { font-size: .8rem; }
}
@media (max-width: 575.98px) {
  .sf-pager .page-item:not(.active):not(:first-child):not(:last-child) { display: none; }
}

/* ---------- Phones: every table row becomes a compact card (no sideways scrolling) ---------- */
@media (max-width: 700px) {
  .sf-table, .sf-table--students { min-width: 0; width: 100%; table-layout: auto; }
  .sf-table, .sf-table tbody { display: block; }
  .sf-table thead, .sf-table colgroup { display: none; }

  .sf-table tr.sf-row {
    position: relative;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
    padding: 12px 14px 13px; border-bottom: 1px solid var(--line);
  }
  .sf-table tr.sf-row:last-child { border-bottom: 0; }
  .sf-table tbody td { display: block; padding: 0 !important; border: 0; min-width: 0; }

  .sf-table td.c-main { grid-column: 1 / -1; grid-row: 1; padding-right: 96px !important; }
  .sf-table--students td.c-main { padding-right: 124px !important; }
  .sf-table td.c-badge { position: absolute; top: 12px; right: 14px; }
  .sf-table td.c-badge .badge { font-size: .7rem; padding: 4px 9px; }

  .sf-table td.c-meta { font-size: .86rem; }
  .sf-table td.c-meta:empty { display: none; }
  .sf-table td.c-meta::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
  }
  .sf-table td.c-wide { grid-column: 1 / -1; }
  /* short fields pair up two-per-row first, then the wide ones, then the buttons */
  .sf-table td.c-meta { order: 1; }
  .sf-table td.c-wide { order: 2; }
  .sf-table td.c-actions { order: 3; }

  .sf-table td.c-actions { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 6px; text-align: left !important; }
  .sf-table td.c-actions form { display: contents; }
  .sf-table td.c-actions .btn { min-height: 38px; }

  /* Teachers card: name on top, designation badge underneath (no more IGNAC-IO-style wrapping) */
  .tch-id { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tch-id .cell-title { font-size: 1rem; overflow-wrap: normal; }
  .tch-id .badge { font-size: .7rem; padding: 4px 9px; max-width: 100%; white-space: normal; text-align: left; }

  /* Archive cards: Open / Unarchive / Delete share one tidy row, stretching evenly (wrap if too tight) */
  .sf-table td.c-actions .row-actions { width: 100%; justify-content: stretch !important; gap: 6px !important; }
  .sf-table td.c-actions .row-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}


/* Admin > All Classes: rows open the class profile popup */
tr.class-row { cursor: pointer; }
tr.class-row:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: -2px; background: var(--row-hover); }
tr.class-row.is-loading { opacity: .6; }
/* Class roster: rows open the student profile popup, so make them read as clickable */
.roster-row-click { cursor: pointer; position: relative; transition: background .12s ease, box-shadow .12s ease; }
.roster-row-click:hover > td,
.roster-row-click:focus-visible > td { background: var(--mon-blue-light); }
.roster-row-click:hover,
.roster-row-click:focus-visible { box-shadow: inset 4px 0 0 var(--mon-blue); outline: none; }
.roster-row-click:hover .roster-name-text,
.roster-row-click:focus-visible .roster-name-text { color: var(--mon-blue); }
.roster-row-click:active > td { filter: brightness(.97); }
@media (max-width: 767.98px) {
  .roster-table .roster-row-click:hover { background: var(--mon-blue-light); }
}

/* ==========================================================================
   Activity Log (views/activity/index.php + public/assets/js/activity-log.js)
   ========================================================================== */
.min-w-0 { min-width: 0; }
.al-tabs .al-tab-count { background: var(--gray-light); color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.al-tabs .nav-link.active .al-tab-count { background: var(--mon-blue-light); color: var(--on-blue-light); }

.al-table .al-row { cursor: pointer; }
.al-table .al-row:hover > td { background: var(--row-hover); }
.al-table .al-row:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: -2px; }
.al-table .al-when { white-space: nowrap; }
.al-table .al-who { min-width: 170px; max-width: 240px; }
.al-table .al-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 460px; }
.al-table .bi-chevron-right { font-size: .8rem; }

.al-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--on-blue-light); background: var(--mon-blue-light); }
.al-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.al-icon-lg { width: 46px; height: 46px; border-radius: 14px; font-size: 1.35rem; }

/* detail modal */
.al-modal-body { padding: 1.25rem 1.4rem; }
.al-lead { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.al-lead-summary { font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.al-sec { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.al-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.al-sec-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 8px; }
.al-dl { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 6px 14px; margin: 0; }
.al-dl dt { font-weight: 600; color: var(--ink-soft); font-size: .86rem; }
.al-dl dd { margin: 0; word-break: break-word; }
.al-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.al-count { min-width: 84px; padding: 8px 12px; border-radius: 12px; background: var(--gray-light); text-align: center; }
.al-count b { display: block; font-size: 1.25rem; line-height: 1.1; }
.al-count span { font-size: .75rem; color: var(--ink-soft); }
.al-changes { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.al-changes thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.al-note { white-space: pre-wrap; background: var(--gray-light); border-radius: 10px; padding: 10px 12px; }

@media (max-width: 575.98px) {
  .al-dl { grid-template-columns: 1fr; gap: 0; }
  .al-dl dd { margin-bottom: 8px; }
}


/* ==========================================================================
   Activity Log — plain timeline for teachers and students
   (views/activity/index.php when $friendly; the admin keeps the table.)
   Items scroll inside .al-scroll like the table rows do, so the filters stay on
   top and the pager stays pinned at the bottom.
   ========================================================================== */
.al-feed { padding: 0 0 6px; }
.al-day {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 18px 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface);
}
.al-item { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s ease; }
.al-item[hidden] { display: none !important; }      /* .al-item sets display:flex, which would otherwise beat [hidden] */
.al-item:hover { background: var(--row-hover); }
.al-item:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: -2px; }
.al-item-main { flex: 1 1 auto; min-width: 0; }
.al-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 700; line-height: 1.3; }
.al-item-title .badge { font-size: .68rem; font-weight: 600; }
.al-item-sum { margin-top: 1px; font-size: .88rem; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-item-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: .78rem; color: var(--ink-faint); }
.al-item-meta .bi { margin-right: 3px; }
.al-item-meta .al-chip { padding: 1px 9px; border-radius: 999px; background: var(--gray-light); color: var(--ink-soft); font-weight: 600; }
.al-item-go { flex: 0 0 auto; font-size: .85rem; color: var(--ink-faint); }

@media (max-width: 900px) {
  .al-day { padding: 10px 14px 5px; }
  .al-item { gap: 12px; padding: 11px 14px; }
  .al-item .al-icon-lg { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
}

/* ---------- Student: absence-buffer warning on each class card (neutral / amber / red, never green) ---------- */
.class-card-allow {
  --allow: #64748b;
  margin-bottom: 14px; padding: 9px 12px 8px;
  border: 1px solid color-mix(in srgb, var(--allow) 35%, var(--line));
  border-left: 4px solid var(--allow);
  border-radius: 10px;
  background: color-mix(in srgb, var(--allow) 9%, var(--surface));
}
.class-card-allow.is-warning { --allow: #e08a12; }
.class-card-allow.is-danger  { --allow: #d83a52; }
.class-card-allow .allow-line { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.class-card-allow .allow-line .bi { color: var(--allow); font-size: 1rem; flex: none; }
.class-card-allow .allow-line b { font-size: 1.05rem; font-weight: 800; color: var(--allow); }
.class-card-allow .allow-meter { height: 5px; margin: 7px 0 5px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--allow) 18%, var(--line)); }
.class-card-allow .allow-meter span { display: block; height: 100%; border-radius: inherit; background: var(--allow); }
.class-card-allow .allow-sub { font-size: .7rem; font-weight: 600; color: var(--ink-soft); }
#myClassesGrid[data-view="list"] .class-card-allow { margin-bottom: 0; flex: 1 1 230px; max-width: 300px; }

/* the mobile class popup's neutral absence-buffer line (large buffer) */
.cp-banner.is-ok { color: var(--ink); background: color-mix(in srgb, #64748b 14%, var(--surface)); }

/* ---------- Student: Today's Classes card ---------- */
.today-card .card-body { padding-bottom: 4px; }
.today-card .sched-empty { padding: 14px 0 18px; }
.today-card .sched-card { margin-bottom: 10px; }
.today-card .sched-take-btn { min-width: 0; }

/* ---------- Student: My Appeals page ---------- */
.appeal-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.appeal-filter a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 99px;
  font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
}
.appeal-filter a .n { font-size: .72rem; padding: 1px 8px; border-radius: 99px; background: var(--canvas); color: var(--ink); }
.appeal-filter a.active { color: #fff; background: var(--mon-blue); border-color: var(--mon-blue); }
.appeal-filter a.active .n { background: rgba(255, 255, 255, .22); color: #fff; }

.appeal-card { --ap: var(--line-strong); border-left: 5px solid var(--ap); }
.appeal-card.is-pending  { --ap: #8a93a6; }
.appeal-card.is-approved { --ap: #00ca72; }
.appeal-card.is-rejected { --ap: #e2445c; }
.appeal-card .appeal-class { font-weight: 700; color: var(--ink); text-decoration: none; }
.appeal-card .appeal-class:hover { text-decoration: underline; }
.appeal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; }
@media (max-width: 767.98px) { .appeal-grid { grid-template-columns: minmax(0, 1fr); } }
.appeal-label { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.appeal-reason { white-space: pre-line; overflow-wrap: anywhere; font-size: .88rem; }
.appeal-note {
  font-size: .88rem; overflow-wrap: anywhere; white-space: pre-line;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--canvas);
}
.appeal-note.is-approved { border-color: color-mix(in srgb, #00ca72 45%, var(--line)); background: color-mix(in srgb, #00ca72 9%, var(--surface)); }
.appeal-note.is-rejected { border-color: color-mix(in srgb, #e2445c 45%, var(--line)); background: color-mix(in srgb, #e2445c 8%, var(--surface)); }
.appeal-proof-thumb {
  display: inline-block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--canvas); cursor: zoom-in; line-height: 0;
}
.appeal-proof-thumb img { width: 120px; height: 90px; object-fit: cover; display: block; }
.appeal-outcome { font-size: .8rem; font-weight: 600; }

/* ---- File Appeal modal (shares the Advance Notice look): record summary + status choice pills ---- */
.appeal-record { align-items: center; justify-content: space-between; margin-bottom: 0; }
.appeal-record .sched-main { flex: 1 1 auto; }
.appeal-record-badge { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.appeal-record-label { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.appeal-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.appeal-choices input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.appeal-choices label {
  flex: 1 1 0; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; margin: 0; border-radius: 12px; cursor: pointer; user-select: none;
  font-size: .86rem; font-weight: 700; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.appeal-choices label:hover { border-color: var(--mon-blue); color: var(--ink); }
.appeal-choices input:checked + label { background: var(--mon-blue-light); border-color: var(--mon-blue); color: var(--on-blue-light); }
.appeal-choices input:focus-visible + label { outline: 2px solid var(--mon-blue); outline-offset: 2px; }

/* ---- My Appeals: clean table rows + detail modal ---- */
.appeals-table { min-width: 640px; }
.appeals-table th:nth-child(1) { width: 34%; }
.appeals-table th:nth-child(2) { width: 18%; }
.appeals-table th:nth-child(3) { width: 22%; }
.appeals-table th:nth-child(4) { width: 14%; }
.appeals-table th:nth-child(5) { width: 12%; }
.appeals-table tbody td { vertical-align: middle; }
.appeals-table tbody tr.appeal-row { box-shadow: inset 4px 0 0 var(--ap-row, transparent); }
.appeals-table tbody tr.appeal-row.is-pending  { --ap-row: #8a93a6; }
.appeals-table tbody tr.appeal-row.is-approved { --ap-row: #00ca72; }
.appeals-table tbody tr.appeal-row.is-rejected { --ap-row: #e2445c; }
.appeals-table tbody tr.appeal-row:hover,
.appeals-table tbody tr.appeal-row:focus-visible { box-shadow: inset 4px 0 0 var(--mon-blue); outline: 0; }
.appeals-pager { flex: 0 0 auto; }
.appeals-pager .card-body { padding: 10px 16px; }

/* detail modal: wears the My Schedule theme (header, tinted cards with a coloured edge, legend footer);
   only the "rejected" colour and the stacked card layout are added here */
.appeal-dialog { max-width: 480px; }
.sched-card.schedule-item-rejected { --sched-accent: #e2445c; background: color-mix(in srgb, #e2445c 12%, var(--surface)); }
.schedule-state-rejected { background: #d83a52; }
.schedule-dot-rejected { background: #e2445c; }
.appeal-block { flex-direction: column; gap: 0; }
.appeal-block .appeal-label { margin-bottom: 4px; }
.appeal-teacher-note { margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sched-accent) 30%, var(--line)); }
.appeal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.appeal-facts > div { min-width: 0; }
.appeal-facts .wide { grid-column: 1 / -1; }
.appeal-facts dt { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.appeal-facts dd { margin: 0; font-size: .86rem; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .appeal-dialog { margin: 12px; max-width: none; }
  .appeal-dialog .modal-content { max-height: calc(100dvh - 24px); }
  .appeal-dialog .sched-body { overflow-y: auto; }
}

/* ==========================================================================
   Join a Class (student/join)
   ========================================================================== */
.join-wrap { max-width: 520px; margin: 0 auto; }
.join-card { border: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); }
.join-hero {
  position: relative; text-align: center; color: #fff;
  padding: 30px 22px 34px;
  background: linear-gradient(135deg, var(--mon-blue), var(--mon-purple));
}
.join-hero::after {   /* soft curve into the body */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
  background: var(--surface); border-radius: 18px 18px 0 0;
}
.join-hero-icon {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  background: rgba(255,255,255,.2); box-shadow: 0 0 0 8px rgba(255,255,255,.12);
}
.join-hero-title { margin: 0; font-size: 1.45rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.join-hero-sub { margin: 6px 0 0; font-size: .92rem; opacity: .95; color: #fff; }
.join-body { padding: 8px 22px 24px; }
.join-label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 8px; }
.join-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.join-code-box {
  width: 100%; min-width: 0; aspect-ratio: 1 / 1.15; padding: 0; text-align: center;
  font-size: 1.6rem; font-weight: 800; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink); background: var(--canvas);
  border: 2px solid var(--line-strong); border-radius: 12px; outline: none; caret-color: var(--mon-blue);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.join-code-box:focus { border-color: var(--mon-blue); background: var(--surface); box-shadow: 0 0 0 4px rgba(0,115,234,.18); transform: translateY(-2px); }
.join-code-box.is-filled { border-color: var(--mon-blue); background: var(--mon-blue-light); color: var(--on-blue-light); }
.join-hint { margin: 8px 0 18px; font-size: .8rem; color: var(--ink-soft); }
.join-submit { border-radius: 12px; font-weight: 700; }
.join-steps { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--line-strong); display: grid; gap: 14px; }
.join-steps li { display: flex; align-items: flex-start; gap: 12px; }
.join-steps li div { display: flex; flex-direction: column; min-width: 0; }
.join-steps strong { font-size: .92rem; color: var(--ink); }
.join-steps span:not(.join-step-num) { font-size: .82rem; color: var(--ink-soft); }
.join-step-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: var(--on-blue-light); background: var(--mon-blue-light);
}
@media (max-width: 575.98px) {
  .join-hero { padding: 24px 16px 30px; }
  .join-body { padding: 6px 16px 20px; }
  .join-code { gap: 6px; }
  .join-code-box { font-size: 1.35rem; border-radius: 10px; }
}

/* ==========================================================================
   Proof-of-attendance image upload with live preview (attendance_detail)
   ========================================================================== */
.proof-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 16px 14px; margin: 0; cursor: pointer; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--canvas);
  transition: border-color .15s ease, background .15s ease;
}
.proof-drop:hover, .proof-drop.is-dragover { border-color: var(--mon-blue); background: var(--mon-blue-light); }
.proof-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.proof-drop.has-file { border-style: solid; border-color: var(--mon-green); background: var(--mon-green-light); cursor: default; padding: 12px; }
.proof-drop.has-file input[type="file"] { pointer-events: none; }
.proof-drop.has-error { border-color: var(--mon-red); background: var(--mon-red-light); }
.proof-empty-icon { width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%; background: var(--surface); color: var(--mon-blue); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.proof-empty-title { font-weight: 700; font-size: .92rem; color: var(--ink); }
.proof-empty-sub { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }
.proof-drop [hidden] { display: none !important; }
.proof-filled { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.proof-preview { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: block; }
.proof-meta { display: flex; align-items: center; gap: 10px; }
.proof-meta-info { flex: 1; min-width: 0; }
.proof-name { font-weight: 700; font-size: .86rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-size { font-size: .76rem; color: var(--ink-soft); }
.proof-remove { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 20px; padding: 6px 12px; font-size: .8rem; font-weight: 700; background: var(--surface); color: var(--ink-soft); box-shadow: 0 1px 3px rgba(0,0,0,.1); cursor: pointer; }
.proof-remove:hover { background: var(--mon-red-light); color: var(--mon-red); }
.proof-error { margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--mon-red); }


/* Clickable status tiles (student attendance detail) */
button.tile { border: 2px solid transparent; width: 100%; text-align: left; font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
button.tile:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
button.tile:focus-visible { outline: 2px solid var(--mon-purple, #7c3aed); outline-offset: 2px; }
button.tile.is-active { border-color: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.tile-present.is-active { border-color: var(--mon-green); }
.tile-late.is-active    { border-color: #e0ac00; }
.tile-absent.is-active  { border-color: var(--mon-red); }
.tile-excused.is-active { border-color: var(--mon-purple); }
.rec-filter { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; }
.rec-filter[hidden], .rec-month[hidden], #recEmpty[hidden], tr[data-status][hidden] { display: none !important; }


/* Calendar: clickable days + day-details popup */
.att-clickable { cursor: pointer; position: relative; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.att-clickable:hover { transform: translateY(-2px); border-color: var(--mon-blue); box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.att-clickable:active { transform: scale(.97); }
.att-clickable:focus-visible { outline: 3px solid var(--mon-blue); outline-offset: 1px; }
.att-cell.att-selected {
  border-color: var(--mon-blue); border-width: 2px;
  background: var(--mon-blue-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mon-blue) 35%, transparent), 0 6px 16px rgba(0,0,0,.14);
  transform: translateY(-2px); z-index: 1;
}
.att-selected .att-num {
  background: var(--mon-blue); color: #fff; border-radius: 999px;
  min-width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; align-self: flex-start;
}
@keyframes attPop { 0% { transform: scale(.94); } 60% { transform: scale(1.05) translateY(-2px); } 100% { transform: scale(1) translateY(-2px); } }
.att-cell.att-selected { animation: attPop .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .att-cell.att-selected { animation: none; } .att-clickable { transition: none; } }

.day-card { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-left-width: 5px; background: var(--surface); }
.day-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.day-state { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.day-type { font-size: .75rem; font-weight: 700; color: var(--ink-soft); text-transform: capitalize; }
.day-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.day-facts .wide { grid-column: 1 / -1; }
.day-facts dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 800; }
.day-facts dd { margin: 0; font-weight: 600; }
.day-line { font-size: .85rem; margin-top: 4px; }
.day-appeal { margin-top: 10px; }
.day-section { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--ink-soft); margin: 14px 0 8px; }
.day-empty { text-align: center; color: var(--ink-soft); padding: 22px 8px; }
.day-empty .bi { display: block; font-size: 1.8rem; margin-bottom: 6px; }
.day-present  { border-left-color: var(--mon-green);  background: var(--mon-green-light); }
.day-late     { border-left-color: var(--mon-yellow); background: var(--mon-yellow-light); }
.day-absent   { border-left-color: var(--mon-red);    background: var(--mon-red-light); }
.day-excused  { border-left-color: var(--mon-purple); background: var(--mon-purple-light); }
.day-no_class, .day-holiday { border-left-color: var(--mon-orange); background: var(--mon-orange-light); }
.day-upcoming, .day-notice  { border-left-color: var(--mon-blue);   background: var(--mon-blue-light); }
.day-unrecorded { border-left-color: var(--ink-faint); background: var(--gray-light); }
.day-holiday { display: flex; gap: 10px; align-items: center; }
.day-holiday b { display: block; } .day-holiday span { font-size: .8rem; color: var(--ink-soft); }
.day-appeal-card { border-left-color: var(--mon-purple); }

.rec-month { display: inline-flex; align-items: center; gap: 8px; }
.rec-month-title { min-width: 9.5em; text-align: center; font-size: .95rem; }


/* ---------- Male / Female tabs (Class Summary, Attendance Grid) ---------- */
.gender-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--canvas); }
.gender-tab {
  border: 0; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: .85rem;
  padding: 5px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.gender-tab:hover { color: var(--ink); }
.gender-tab:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 2px; }
.gender-tab-n { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--ink-soft); font-size: .72rem; line-height: 20px; text-align: center; transition: background .2s ease, color .2s ease; }
.gender-tab--male.is-active   { background: var(--mon-blue);   color: #fff; box-shadow: 0 1px 4px rgba(0,115,234,.35); }
.gender-tab--female.is-active { background: var(--mon-purple); color: #fff; box-shadow: 0 1px 4px rgba(120,60,200,.35); }
.gender-tab.is-active .gender-tab-n { background: rgba(255,255,255,.25); color: #fff; }
[data-gender-panel][hidden] { display: none !important; }
@keyframes genderPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gender-panel-in { animation: genderPanelIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .gender-panel-in { animation: none; } .gender-tab, .gender-tab-n { transition: none; } }

/* Attendance grid inside the fixed-height page: only the rows scroll, headers + student column stay put */
.attendance-grid-scroll.sf-scroll { overflow: auto; border-radius: 0; }
.attendance-grid-table thead th { position: sticky; top: 0; z-index: 2; background: var(--canvas); box-shadow: inset 0 -1px 0 var(--line); }
.attendance-grid-table thead .sticky-col { left: 0; top: 0; z-index: 4; background: var(--canvas); }
.attendance-grid-table thead th.table-light { background: var(--canvas); }

/* Class Summary: collapsible "Meetings Not Held" */
.nc-card .nc-toggle { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; display: flex; align-items: center; gap: 8px; padding: 0; }
.nc-card .nc-toggle .nc-caret { margin-left: auto; transition: transform .2s ease; }
.nc-card .nc-toggle[aria-expanded="true"] .nc-caret { transform: rotate(180deg); }
.nc-card .nc-body { max-height: 30vh; overflow: auto; }
.nc-card .card-header { cursor: pointer; }


/* Class roster in the fixed-height page: only the student rows scroll */
.sf-scroll .roster-table thead th { position: sticky; top: 0; z-index: 2; background: var(--canvas); box-shadow: inset 0 -1px 0 var(--line); }
.pending-card { display: flex; flex-direction: column; }
.pending-card > .card-header { flex: 0 0 auto; }
.pending-scroll { max-height: 28vh; }
.sf-table-card > .alert { flex: 0 0 auto; margin: 12px 16px 0 !important; }
.sf-table-card > .empty-state { flex: 1 1 auto; }
/* very short windows: let the page scroll instead of squeezing the table to nothing */
@media (max-height: 640px) {
  .page-body.page-fit { overflow: auto; }
  .page-fit > .sf-table-card { min-height: 320px; }
}

@media (max-width: 575.98px) {
  .roster-head .gender-tabs { flex: 1 1 100%; display: flex; }
  .roster-head .gender-tab { flex: 1 1 0; justify-content: center; }
}


/* Student attendance detail (teacher): colour-coded stat cards, the four status cards are clickable filters */
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 991.98px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 479.98px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card.sc-present { background: var(--mon-green-light);  border-color: color-mix(in srgb, var(--mon-green) 35%, var(--line)); }
.stat-card.sc-late    { background: var(--mon-yellow-light); border-color: color-mix(in srgb, var(--mon-yellow) 45%, var(--line)); }
.stat-card.sc-absent  { background: var(--mon-red-light);    border-color: color-mix(in srgb, var(--mon-red) 35%, var(--line)); }
.stat-card.sc-excused { background: var(--mon-purple-light); border-color: color-mix(in srgb, var(--mon-purple) 35%, var(--line)); }
.stat-card.sc-present::before { background: var(--mon-green); }
.stat-card.sc-late::before    { background: var(--mon-yellow); }
.stat-card.sc-absent::before  { background: var(--mon-red); }
.stat-card.sc-excused::before { background: var(--mon-purple); }
.stat-card.sc-present .stat-value { color: var(--on-green-light); }
.stat-card.sc-late .stat-value    { color: var(--on-yellow-light); }
.stat-card.sc-absent .stat-value  { color: var(--on-red-light); }
.stat-card.sc-excused .stat-value { color: var(--on-purple-light); }
button.stat-card.sc-click { width: 100%; text-align: left; font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.stat-card.sc-click:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
button.stat-card.sc-click:active { transform: scale(.98); }
button.stat-card.sc-click:focus-visible { outline: 3px solid var(--mon-blue); outline-offset: 2px; }
button.stat-card.sc-click.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 0 0 3px var(--ring, var(--mon-blue)); transform: translateY(-2px); }
.sc-present.is-active { --ring: var(--mon-green); } .sc-late.is-active { --ring: var(--mon-yellow); }
.sc-absent.is-active { --ring: var(--mon-red); }    .sc-excused.is-active { --ring: var(--mon-purple); }
.page-fit .stat-card { padding: 14px 16px; }
.page-fit .stat-card:hover { box-shadow: var(--shadow-sm); }
.page-fit button.stat-card.sc-click:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); }

/* Effective Absences = orange, Absence Rate = blue (distinct from the four status colours) */
.stat-card.sc-effective { background: var(--mon-orange-light); border-color: color-mix(in srgb, var(--mon-orange) 40%, var(--line)); }
.stat-card.sc-effective::before { background: var(--mon-orange); }
.stat-card.sc-effective .stat-value { color: var(--on-orange-light); }
.stat-card.sc-rate { background: var(--mon-blue-light); border-color: color-mix(in srgb, var(--mon-blue) 35%, var(--line)); }
.stat-card.sc-rate::before { background: var(--mon-blue); }
.stat-card.sc-rate .stat-value { color: var(--on-blue-light); }

/* ---------- Row hover on every list / table we made fit-page (history, summary, grid, roster, student detail, appeals, student record list) ---------- */
.sf-table-card tbody tr:not(.sf-row):not(.roster-row-click):not(.roster-group):not([id$="Empty"]):not(:only-child) > td,
.pending-card tbody tr.roster-row > td,
#pane-list tbody tr[data-status] > td { transition: background .12s ease; }
.sf-table-card tbody tr:not(.sf-row):not(.roster-row-click):not(.roster-group):not([id$="Empty"]):not(:only-child):hover > td,
.pending-card tbody tr.roster-row:hover > td,
#pane-list tbody tr[data-status]:hover > td { background: var(--mon-blue-light); }
.sf-table-card tbody tr:not(.sf-row):not(.roster-row-click):not(.roster-group):not([id$="Empty"]):not(:only-child):hover > td:first-child,
.pending-card tbody tr.roster-row:hover > td:first-child,
#pane-list tbody tr[data-status]:hover > td:first-child { box-shadow: inset 4px 0 0 var(--mon-blue); }
@media (max-width: 767.98px) {
  .roster-table .roster-row:hover { background: var(--mon-blue-light); }
}

/* ==========================================================================
   Row numbers (No.) + combined "Student" cell  — roster, summary, take attendance, grid
   ========================================================================== */
.stu-no { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Class roster: the combined cell shows the name with the student ID underneath (email joins it on phones only) */
.roster-table .c-student .roster-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.roster-table .c-student .roster-meta { display: block; font-size: .76rem; color: var(--ink-soft); }
.roster-table .c-student .rm-email { display: none; }
@media (max-width: 767.98px) { .roster-table .c-student .rm-email { display: inline; } }

/* Take attendance: separate No. column + visible row hover */
.attendance-take-table .no-th, .attendance-take-table .no-cell { width: 48px; text-align: center; padding-left: 12px !important; padding-right: 4px !important; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.attendance-take-table .student-row { transition: background .12s ease, box-shadow .12s ease; }
.attendance-take-table .student-row:focus-within > td { background: var(--mon-blue-light); }
@media (hover: hover) {
  .attendance-take-table .student-row:hover > td { background: var(--mon-blue-light); }
  .attendance-take-table .student-row:hover { box-shadow: inset 4px 0 0 var(--mon-blue); }
  .attendance-take-table .student-row:hover .student-name { color: var(--mon-blue); }
}
@media (max-width: 700px) {
  /* phones: each student is a card, so the card itself highlights and the number becomes a small label */
  .attendance-take-table .student-row:focus-within > td,
  .attendance-take-table .student-row:hover > td { background: transparent; }
  .attendance-take-table .student-row:hover, .attendance-take-table .student-row:focus-within { background: var(--mon-blue-light); box-shadow: var(--shadow-sm); }
  .attendance-take-table .no-cell { width: auto; text-align: left; padding: 0 0 6px !important; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
  .attendance-take-table .no-cell::before { content: "No. "; }
}

/* Attendance grid: No. column stays pinned beside the pinned Student column while scrolling sideways */
.attendance-grid-table .no-col { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 48px; min-width: 48px; max-width: 48px; padding-left: 8px !important; padding-right: 8px !important; font-variant-numeric: tabular-nums; }
.attendance-grid-table .sticky-col { left: 48px; }
.attendance-grid-table thead .no-col { z-index: 4; top: 0; left: 0; background: var(--canvas); }
.attendance-grid-table thead .sticky-col { left: 48px; }

/* ==========================================================================
   Teacher > Attendance History + Class Summary: tidy layout
   (desktop column sizing, aligned header controls, and proper phone cards)
   ========================================================================== */
/* a hidden row must stay hidden even when phones turn rows into grid cards */
.sf-table tr[hidden], #histEmpty[hidden] { display: none !important; }

.sf-table .sf-empty-cell { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

@media (min-width: 701px) {
  .sf-table--history { min-width: 820px; table-layout: fixed; }
  .sf-table--history .hist-col-date   { width: 190px; }
  .sf-table--history .hist-col-type   { width: 120px; }
  .sf-table--history .hist-col-status { width: 120px; }
  .sf-table--history .hist-col-action { width: 230px; }
  .sf-table--history tbody td { vertical-align: middle; }
  .sf-table--history .cell-title { white-space: nowrap; }

  .sf-table--summary { min-width: 960px; }
  .sf-table--summary tbody td { vertical-align: middle; }
  .sf-table--summary thead th:not(:first-child):not(:last-child) { text-align: center; }
  .sf-table--summary thead th:nth-last-child(2) { text-align: left; }   /* Status */
  .sf-table--summary tbody td.c-meta { font-variant-numeric: tabular-nums; }
}

/* history card header: title left, month nav centre, count right */
#histCard .hist-head { row-gap: 10px; }
#histCard .hist-count { white-space: nowrap; }
#histCard .hist-title { white-space: nowrap; }

@media (max-width: 700px) {
  /* history header: title + count on one line, month switcher full width below */
  #histCard .hist-head { display: flex; flex-wrap: wrap; align-items: center; }
  #histCard .hist-title { order: 1; flex: 1 1 auto; }
  #histCard .hist-count { order: 2; }
  #histCard #histMonthNav { order: 3; flex: 1 1 100%; justify-content: space-between; }
  #histCard #histMonthNav .rec-month-title { flex: 1 1 auto; min-width: 0; }

  /* history cards */
  .sf-table--history tr.sf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-table--history td.c-main .cell-title { font-size: 1rem; }
  .sf-table--history td.c-meta.is-blank { display: none; }
  .sf-table--history tr.hist-off { background: var(--canvas); }
  .sf-table--history td.c-actions .btn { flex: 1 1 0; justify-content: center; }

  /* summary cards: six counters in a tidy 3 x 2 grid, status badge top right */
  .sf-table--summary tr.sf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-table--summary td.c-main { padding-right: 118px !important; }
  .sf-table--summary td.c-meta { text-align: left !important; font-size: .95rem; font-weight: 600; }
  .sf-table--summary td.c-meta.sum-none { font-weight: 400; font-size: .86rem; }
  .sf-table--summary td.c-actions .btn { flex: 1 1 100%; }
  .sf-table--summary td.c-actions { justify-content: stretch; }
}

/* Class Roster: collapsible schedule chips */
.sched-collapse .sched-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 20px; padding: 6px 14px;
  background: var(--mon-purple-light); color: var(--on-purple-light);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: filter .15s ease;
}
.sched-collapse .sched-toggle:hover { filter: brightness(.97); }
.sched-collapse .sched-toggle:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 2px; }
.sched-collapse .sched-caret { font-size: .75rem; transition: transform .2s ease; }
.sched-collapse .sched-toggle[aria-expanded="true"] .sched-caret { transform: rotate(180deg); }
.sched-collapse .sched-body { padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .sched-collapse .sched-caret { transition: none; } }

/* ==========================================================================
   Teacher > Student Attendance Detail: phone layout
   ========================================================================== */
.sf-table--record tr[hidden], #recEmpty[hidden] { display: none !important; }
.stu-detail-no { line-height: 1.2; }
.sf-table--record th:first-child { width: 190px; }

@media (min-width: 701px) {
  .sf-table--record tbody td { vertical-align: middle; }
  .sf-table--record .cell-title { white-space: nowrap; }
}

@media (max-width: 700px) {
  /* header: smaller photo, name / ID / class stacked, compact Back button */
  .stu-detail-head { flex-wrap: nowrap !important; align-items: center; gap: 10px !important; }
  .stu-detail-id { flex: 1 1 auto; min-width: 0; gap: 12px !important; }
  .stu-detail-id .stu-avatar { width: 48px !important; height: 48px !important; font-size: 18px !important; flex: 0 0 auto; }
  .stu-detail-id h5 { font-size: 1rem; margin-bottom: 0 !important; overflow-wrap: anywhere; }
  .stu-detail-id > div { min-width: 0; }
  .stu-detail-class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stu-detail-back { flex: 0 0 auto; white-space: nowrap; }
  .stu-detail-alert { font-size: .85rem; padding: 10px 12px; align-items: flex-start !important; }
  .stu-detail-alert .bi { font-size: 1.1rem !important; margin-top: 1px; }

  /* six stat tiles in a compact 3 x 2 grid */
  .page-fit .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .page-fit .stat-card { padding: 10px 8px; text-align: center; }
  .page-fit .stat-card .stat-value { font-size: 1.25rem; }
  .page-fit .stat-card .stat-label { font-size: .64rem; line-height: 1.15; }

  /* record card header: title + filter / month switcher stacked tidily */
  #recCard .rec-head { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
  #recCard .rec-title { flex: 1 1 100%; }
  #recCard #recMonthNav { flex: 1 1 100%; justify-content: space-between; }
  #recCard #recMonthNav .rec-month-title { flex: 1 1 auto; min-width: 0; }
  #recCard #recFilter { flex: 1 1 100%; justify-content: space-between; }

  /* each record becomes a small card: date + status, then type, then remarks */
  .sf-table--record tr.sf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-table--record td.c-main { padding-right: 96px !important; }
  .sf-table--record td.c-meta.is-blank { display: none; }
}

/* ---------- Drag-to-reorder class cards (teacher dashboard, class-reorder.js) ---------- */
#myClassesGrid .class-card-col { touch-action: manipulation; }

/* Holding (about to drag): the card presses in a little while the hold timer runs. */
#myClassesGrid .class-card-col.is-holding { cursor: grabbing; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#myClassesGrid .class-card-col.is-holding .class-card { animation: cardHold .35s ease-out forwards; }

/* Dragging ACTIVE: the card lifts, tilts, glows and gently sways. */
#myClassesGrid .class-card-col.is-dragging {
  position: relative;
  z-index: 50;
  cursor: grabbing;
  will-change: transform;
}
#myClassesGrid .class-card-col.is-dragging .class-card {
  transition: none;
  box-shadow: 0 22px 40px rgba(20, 20, 43, .32), 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 5px var(--brand, #6c5ce7);
  animation: cardLift .2s cubic-bezier(.2, .9, .3, 1.3) forwards, cardSway 1.1s ease-in-out .2s infinite alternate;
}
/* The other cards step back while one is being dragged. */
#myClassesGrid.is-reordering .class-card-col:not(.is-dragging) .class-card {
  transform: none !important;
  box-shadow: none;
  opacity: .82;
  transition: opacity .2s ease;
}
body.reordering-cards { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.reorder-hint .bi { margin-right: 2px; }

@keyframes cardHold { from { transform: scale(1); } to { transform: scale(.965); } }
@keyframes cardLift { from { transform: scale(.965); } to { transform: scale(1.04) rotate(-1.5deg); } }
@keyframes cardSway { from { transform: scale(1.04) rotate(-1.5deg); } to { transform: scale(1.04) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) {
  #myClassesGrid .class-card-col.is-holding .class-card { animation: none; transform: scale(.97); }
  #myClassesGrid .class-card-col.is-dragging .class-card { animation: none; transform: scale(1.03); }
}

/* ---------- Create Class page (views/teacher/class_create.php) ---------- */
.class-create { max-width: 1120px; margin: 0 auto; }

.cc-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 22px; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, #2563eb 0%, #7c3aed 100%);
  box-shadow: 0 10px 28px rgba(79, 70, 229, .28);
  position: relative; overflow: hidden;
}
.cc-hero::after {
  content: ""; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.cc-hero-icon {
  flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.5rem; background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px);
}
.cc-hero-text { flex: 1 1 280px; min-width: 0; position: relative; z-index: 1; }
.cc-hero-text h2 { margin: 0 0 2px; font-size: 1.3rem; font-weight: 800; color: #fff; }
.cc-hero-text p { margin: 0; font-size: .86rem; opacity: .9; max-width: 56ch; }
.cc-hero-btn {
  position: relative; z-index: 1; font-weight: 700; font-size: .85rem; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45);
}
.cc-hero-btn:hover { background: #fff; color: #4f46e5; }

.cc-section { margin-bottom: 18px; overflow: hidden; }
.cc-section-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.cc-section-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cc-section-head p { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.cc-step {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 10px rgba(79, 70, 229, .3);
}
.cc-section .card-body { padding: 20px; }
.cc-section .form-label { font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cc-optional { font-weight: 600; font-size: .68rem; color: var(--ink-soft); background: var(--canvas); border-radius: 20px; padding: 1px 8px; margin-left: 4px; }
.cc-section .input-group-text { background: var(--canvas); color: var(--ink-soft); border-color: var(--line); font-size: .85rem; }
.cc-section .form-control, .cc-section .form-select { border-color: var(--line); }
.cc-section .form-control:focus, .cc-section .form-select:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); border-color: #2563eb; }
.cc-section .input-group:focus-within .input-group-text { color: #2563eb; border-color: #2563eb; }

/* class type tiles */
.cc-type { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-type-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.cc-type-opt .bi { font-size: 1.3rem; color: var(--ink-soft); margin-bottom: 4px; transition: color .15s ease; }
.cc-type-opt strong { font-size: .92rem; }
.cc-type-opt span { font-size: .76rem; color: var(--ink-soft); }
.cc-type-opt:hover { border-color: #93b4f5; transform: translateY(-1px); }
.cc-type-opt.is-on { border-color: #2563eb; background: color-mix(in srgb, #2563eb 8%, var(--surface)); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14); }
.cc-type-opt.is-on .bi { color: #2563eb; }
.cc-type-opt:focus-visible { outline: 3px solid rgba(37, 99, 235, .4); outline-offset: 2px; }

/* schedule rows (the markup comes from #scheduleRowTemplate) */
.class-create .schedule-row {
  margin: 0 0 12px !important; padding: 14px !important; border-radius: 14px !important;
  border: 1px solid var(--line) !important; border-left: 5px solid #7c3aed !important;
  background: var(--canvas); animation: ccRowIn .25s ease;
}
.class-create .schedule-row .form-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 3px; }
@keyframes ccRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cc-empty {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px;
  border: 2px dashed var(--line); color: var(--ink-soft);
}
.cc-empty > .bi { font-size: 1.8rem; color: #7c3aed; opacity: .8; }
.cc-empty strong { display: block; color: var(--ink); font-size: .9rem; }
.cc-empty span { font-size: .8rem; }

.cc-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 4px 0 8px; }
.cc-submit { padding-left: 22px; padding-right: 22px; font-weight: 700; }

/* live preview */
.cc-preview { position: sticky; top: 90px; }
.cc-preview-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.cc-preview-label .bi { color: #7c3aed; margin-right: 4px; }
#ccPreview { cursor: default; }
.cc-pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .84rem; color: var(--ink); }
.cc-pv-list .bi { color: var(--c1); width: 18px; display: inline-block; }
.cc-pv-note { margin: 12px 4px 0; font-size: .76rem; color: var(--ink-soft); }

@media (max-width: 991.98px) {
  .cc-preview { position: static; }
  .cc-hero { padding: 16px; }
}
@media (max-width: 575.98px) {
  .cc-type { grid-template-columns: 1fr; }
  .cc-section-head { flex-wrap: wrap; padding: 14px; }
  .cc-section .card-body { padding: 14px; }
  .cc-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .class-create .schedule-row { animation: none; } .cc-type-opt { transition: none; } }

/* ---------- Create from PDF page (views/teacher/class_create_pdf.php) ---------- */
.cc-hero-pdf { background: linear-gradient(120deg, #e11d48 0%, #7c3aed 100%); box-shadow: 0 10px 28px rgba(190, 24, 93, .26); }
.cc-hero-pdf .cc-hero-btn:hover { color: #be185d; }
.cc-step .bi { font-size: .95rem; }

.class-create .pdf-dropzone {
  min-height: 230px; border-radius: 18px; border: 2px dashed #b9a7f0;
  background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 5%, var(--surface)), var(--surface));
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.class-create .pdf-dropzone:hover, .class-create .pdf-dropzone:focus-visible { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); background: color-mix(in srgb, #7c3aed 8%, var(--surface)); }
.class-create .pdf-dropzone.is-dragover { border-color: #7c3aed; box-shadow: 0 0 0 5px rgba(124, 58, 237, .18); }
.class-create .pdf-dz-overlay { background: rgba(124, 58, 237, .93); border-radius: 16px; }
.class-create .pdf-dz-icon {
  width: 68px; height: 68px; font-size: 1.9rem; color: #fff;
  background: linear-gradient(135deg, #e11d48, #7c3aed); box-shadow: 0 8px 18px rgba(124, 58, 237, .35);
  animation: ccFloat 3s ease-in-out infinite;
}
.class-create .pdf-dropzone.has-file { border-color: var(--mon-green); background: color-mix(in srgb, #00c875 8%, var(--surface)); box-shadow: 0 0 0 4px rgba(0, 200, 117, .12); }
@keyframes ccFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.cc-timeline { list-style: none; margin: 0 0 18px; padding: 0; position: relative; }
.cc-timeline::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.cc-timeline li { position: relative; display: flex; gap: 14px; padding: 0 0 16px; }
.cc-timeline li:last-child { padding-bottom: 0; }
.cc-timeline li > span {
  position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; background: var(--surface); color: var(--ink-soft); border: 2px solid var(--line);
}
.cc-timeline li.is-now > span { background: linear-gradient(135deg, #e11d48, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(124, 58, 237, .35); }
.cc-timeline strong { display: block; font-size: .9rem; color: var(--ink); line-height: 1.3; padding-top: 5px; }
.cc-timeline em { display: block; font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.cc-reads { padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.cc-reads-title { flex: 0 0 100%; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, #7c3aed 10%, var(--surface)); color: #6d28d9; }
@media (prefers-reduced-motion: reduce) { .class-create .pdf-dz-icon { animation: none; } }

/* ---------- Archive · Join requests · Notifications (same look as Create class / Create from PDF) ---------- */
.cc-hero-sm { padding: 16px 22px; margin-bottom: 16px; border-radius: 16px; }   /* fit-page layouts reset this to 0 and use their own gap */
.cc-hero-sm .cc-hero-icon { width: 46px; height: 46px; font-size: 1.3rem; border-radius: 13px; }
.cc-hero-sm .cc-hero-text h2 { font-size: 1.15rem; }
.cc-hero-sm .cc-hero-text p { font-size: .82rem; max-width: 70ch; }
.cc-hero-archive { background: linear-gradient(120deg, #0f766e 0%, #2563eb 100%); box-shadow: 0 10px 28px rgba(15, 118, 110, .26); }
.cc-hero-archive .cc-hero-btn:hover { color: #0f766e; }
.cc-hero-join { background: linear-gradient(120deg, #d97706 0%, #e11d48 100%); box-shadow: 0 10px 28px rgba(217, 70, 40, .26); }
.cc-hero-join .cc-hero-btn:hover { color: #be123c; }
.cc-hero-notif { background: linear-gradient(120deg, #2563eb 0%, #0891b2 100%); box-shadow: 0 6px 16px rgba(8, 145, 178, .18); }
.cc-hero-notif .cc-hero-btn:hover { color: #0e7490; }

.cc-hero-stats, .cc-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.cc-hero-actions form { margin: 0; }
.cc-hero-stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
  font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.cc-hero-stat b { font-size: .95rem; }
.cc-hero-btn:disabled, .cc-hero-btn.disabled { opacity: .5; pointer-events: none; color: #fff; }

/* Archive tabs: segmented pills */
.nav-tabs.archive-tabs {
  display: inline-flex; width: max-content; max-width: 100%; flex-wrap: nowrap; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.archive-tabs .nav-link {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 16px; border: 0; border-radius: 10px;
  font-size: .85rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.archive-tabs .nav-link:hover { background: var(--canvas); color: var(--ink); }
.archive-tabs .nav-link.active { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; box-shadow: 0 4px 10px rgba(79, 70, 229, .3); }
.archive-tabs .nav-link.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }
.archive-tabs .badge { border-radius: 20px; font-weight: 800; }

/* Notification tabs: breathing room under the header and above the list */
.notif-tabs.notif-tabs-page { margin-bottom: 14px; flex-wrap: wrap; }

/* Notification tab counter */
.notif-tabs-page .notif-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; }
.notif-tab-count { min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--mon-blue); color: #fff; font-size: .7rem; font-weight: 800; line-height: 18px; text-align: center; }

/* Friendly empty state (cards) */
.cc-empty-lg { display: grid; justify-items: center; gap: 6px; padding: 44px 22px; text-align: center; }
.cc-empty-lg.cc-empty-flat { padding: 52px 22px; }
.cc-empty-lg h3 { margin: 6px 0 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.cc-empty-lg p { margin: 0 0 8px; max-width: 46ch; font-size: .85rem; color: var(--ink-soft); }
.cc-empty-icon {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 8px 20px rgba(79, 70, 229, .3);
}
.cc-empty-icon.is-ok { background: linear-gradient(135deg, #00c875, #0891b2); box-shadow: 0 8px 20px rgba(0, 160, 110, .3); }

/* Join requests */
.jr-group .cc-section-head > div { min-width: 0; }
.jr-group .cc-section-head h3 { overflow-wrap: anywhere; }
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); transition: background .12s ease; }
.jr-item:last-child { border-bottom: 0; }
@media (hover: hover) { .jr-item:hover { background: var(--row-hover); } }
.jr-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.jr-info { min-width: 0; }
.jr-name { font-weight: 700; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.jr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 3px; font-size: .78rem; color: var(--ink-soft); }
.jr-meta .bi { margin-right: 4px; }
.jr-pill { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 20px; font-weight: 700; background: color-mix(in srgb, #7c3aed 10%, var(--surface)); color: #6d28d9; }
.jr-pill .bi { margin-right: 5px; }
.jr-email { overflow-wrap: anywhere; }
.jr-actions { flex: none; display: flex; gap: 8px; }
.jr-actions form { margin: 0; }
.jr-actions .btn { font-weight: 700; }
@media (max-width: 760px) {
  .cc-hero-sm { padding: 14px 16px; }
  .cc-hero-sm .cc-hero-icon { display: none; }
  .cc-hero-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .archive-tabs .nav-link, .jr-item { transition: none; } }

/* Join requests: selection, search, bulk bar, decline reason */
.jr-toolbar { margin-bottom: 16px; }
.jr-toolbar .card-body { padding: 14px 16px; }
.jr-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.jr-search { flex: 1 1 260px; min-width: 0; }
.jr-classfilter { flex: 0 1 280px; min-width: 0; }
.jr-toolbar .input-group-text { background: var(--canvas); color: var(--ink-soft); border-color: var(--line); }
.jr-toolbar .form-control, .jr-toolbar .form-select { border-color: var(--line); }
.jr-toolbar .form-control:focus, .jr-toolbar .form-select:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); border-color: #2563eb; }
.jr-selectall, .jr-groupcheck { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; user-select: none; }
.jr-count { margin-top: 10px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.jr-group[hidden], .jr-item[hidden] { display: none !important; }
.jr-group-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.jr-check { flex: none; display: grid; place-items: center; margin: 0; padding: 4px; cursor: pointer; }
.jr-item .form-check-input, .jr-toolbar .form-check-input, .jr-groupcheck .form-check-input { width: 1.15em; height: 1.15em; margin: 0; cursor: pointer; }
.jr-item:has(.jr-check-row:checked) { background: color-mix(in srgb, #2563eb 7%, var(--surface)); }

.jr-bulkbar {
  position: sticky; bottom: 16px; z-index: 30; margin-top: 4px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid color-mix(in srgb, #2563eb 35%, var(--line));
  box-shadow: 0 12px 32px rgba(20, 20, 43, .22);
  animation: jr-bar-in .18s ease-out;
}
.jr-bulkbar[hidden] { display: none; }
.jr-bulk-count { font-weight: 700; color: var(--ink); font-size: .9rem; }
.jr-bulk-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; margin-right: 4px; border-radius: 999px; color: #fff; font-weight: 800; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.jr-bulk-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.jr-bulk-btns .btn { font-weight: 700; }
.jr-bulk-clear { color: var(--ink-soft); text-decoration: none; }
@keyframes jr-bar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.jr-chip { appearance: none; border: 1px solid var(--line); background: var(--canvas); color: var(--ink-soft); border-radius: 999px; padding: 3px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.jr-chip:hover { background: color-mix(in srgb, #e2445c 10%, var(--surface)); color: #b3243a; border-color: color-mix(in srgb, #e2445c 40%, var(--line)); }

@media (max-width: 900px) { .jr-bulkbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 640px) {
  .jr-item { flex-wrap: wrap; padding: 14px; gap: 10px 8px; }
  .jr-who { flex: 1 1 calc(100% - 44px); }
  .jr-actions { flex: 1 1 100%; }
  .jr-actions form, .jr-actions > .btn { flex: 1; }
  .jr-actions .btn { width: 100%; padding: .5rem; }
  .jr-group-actions { width: 100%; justify-content: flex-start; margin-left: 0 !important; }
  .jr-bulkbar { padding: 10px; }
  .jr-bulk-btns { width: 100%; }
  .jr-bulk-btns .btn-sm:not(.jr-bulk-clear) { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .jr-bulkbar { animation: none; } }


/* ==========================================================================
   Activity page (/activity) — same look as Create class / Create from PDF /
   Notifications: gradient hero, segmented tabs, section-style list header and
   friendly empty states. Markup: views/activity/index.php
   ========================================================================== */
.cc-hero-activity { background: linear-gradient(120deg, #6d28d9 0%, #2563eb 100%); box-shadow: 0 6px 16px rgba(79, 70, 229, .2); }
.cc-hero-activity .cc-hero-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* segmented tabs sit left, never stretch across the page */
.page-fit > .archive-tabs.al-tabs { align-self: flex-start; }
.al-tabs.archive-tabs .nav-link { padding: 7px 14px; }

/* filter card */
.al-filter { border-radius: 16px; }
.al-filter .sf-search .form-control { border-radius: 12px; border-color: var(--line); }
.al-filter .sf-search .form-control:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); border-color: #2563eb; }
.al-filter .al-toggle { border-radius: 12px; font-weight: 700; }
.al-filter .al-toggle.has-active, .al-filter .al-toggle.is-open { background: color-mix(in srgb, #7c3aed 12%, var(--surface)); color: #6d28d9; border-color: color-mix(in srgb, #7c3aed 35%, var(--line)); }

/* list card: section header (icon tile + title + hint) */
.al-listcard { border-radius: 16px; }
.al-listcard .cc-section-head { padding: 13px 18px 12px; }
.al-listcard .cc-section-head > div { min-width: 0; }
.al-cap-note {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 20px;
  font-size: .74rem; font-weight: 700; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line);
}

/* friendly timeline */
.al-feed { padding: 2px 10px 10px; }
.al-feed .al-day {
  display: flex; align-items: center; gap: 10px; padding: 14px 8px 6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; color: var(--ink-soft);
}
.al-feed .al-day::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.al-feed .al-item {
  gap: 14px; padding: 11px 12px; margin: 2px 0; border: 0; border-radius: 14px;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .al-feed .al-item:hover { background: color-mix(in srgb, #7c3aed 6%, var(--surface)); }
  .al-feed .al-item:hover .al-item-go { color: #7c3aed; transform: translateX(2px); }
}
.al-feed .al-item:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
.al-feed .al-icon-lg { border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.al-feed .al-item-title { font-weight: 800; }
.al-feed .al-item-meta .al-chip { background: color-mix(in srgb, #7c3aed 10%, var(--surface)); color: #6d28d9; font-weight: 700; }
.al-feed .al-item-go { transition: transform .15s ease, color .15s ease; }

/* admin table: header matches the section look */
.al-listcard .al-table thead th { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 900px) {
  .al-feed { padding: 0 6px 8px; }
  .al-feed .al-item { padding: 10px 8px; gap: 12px; }
  .al-listcard .cc-section-head { padding: 11px 14px; }
}
@media (max-width: 575.98px) {
  .cc-hero-activity .cc-hero-stats { display: none; }   /* keep the room for the list on phones */
}
@media (prefers-reduced-motion: reduce) {
  .al-feed .al-item, .al-feed .al-item-go { transition: none; }
  .al-feed .al-item:hover .al-item-go { transform: none; }
}

/* Activity tabs: sliding highlight + instant pane swap (no waiting on a fade-out, so switching never lags) */
.al-tabs.archive-tabs { position: relative; }
.al-tabs .nav-link { position: relative; z-index: 1; }
.al-tab-ink {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 4px 10px rgba(79, 70, 229, .3);
  will-change: transform, width;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), width .25s cubic-bezier(.4, 0, .2, 1);
}
.al-tabs:not(.has-ink) .al-tab-ink { display: none; }
.al-tabs.has-ink .nav-link.active { background: transparent; box-shadow: none; }
.al-tabs .nav-link { transition: color .2s ease; }
.al-tabs .al-tab-count { transition: background .2s ease, color .2s ease; }
@keyframes alPaneIn { from { opacity: 0; } to { opacity: 1; } }
.page-fit > .tab-content > .tab-pane.active { animation: alPaneIn .16s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .al-tab-ink, .al-tabs .nav-link, .al-tabs .al-tab-count { transition: none; }
  .page-fit > .tab-content > .tab-pane.active { animation: none; }
}


/* ==========================================================================
   Student: Past Classes / My Appeals / My Profile — adapted to the /activity look
   (gradient hero, pill tabs, section cards, tappable list rows).
   Markup: views/student/past_classes.php, appeals.php, profile.php
   ========================================================================== */
.cc-hero-past    { background: linear-gradient(120deg, #0f766e 0%, #2563eb 100%); box-shadow: 0 6px 16px rgba(15, 118, 110, .2); }
.cc-hero-appeals { background: linear-gradient(120deg, #d97706 0%, #e11d48 100%); box-shadow: 0 6px 16px rgba(217, 70, 40, .2); }
.cc-hero-profile { background: linear-gradient(120deg, #6d28d9 0%, #2563eb 100%); box-shadow: 0 6px 16px rgba(79, 70, 229, .2); }
.cc-hero-appeals .cc-hero-btn:hover { color: #be123c; }
.cc-hero-appeals .cc-hero-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* list rows that are plain links (Past Classes) */
a.al-item.al-link { color: inherit; text-decoration: none; }
.al-item:last-child { border-bottom: 0; }
.al-item-act {
  flex: 0 0 auto; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.al-item:hover .al-item-act { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border-color: transparent; }
.al-item-status { flex: 0 0 auto; }
.al-item.appeal-row { box-shadow: inset 4px 0 0 var(--ap-row, transparent); }
.al-item.appeal-row.is-pending  { --ap-row: #8a93a6; }
.al-item.appeal-row.is-approved { --ap-row: #00ca72; }
.al-item.appeal-row.is-rejected { --ap-row: #e2445c; }
.al-item.appeal-row:hover, .al-item.appeal-row:focus-visible { box-shadow: inset 4px 0 0 var(--mon-blue); outline: 0; }

/* Appeals: tabs sit left, list card fills the fixed-height page, pager pinned below */
.page-fit > .archive-tabs.al-tabs { align-self: flex-start; }
.page-fit > .appeals-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.page-fit > .appeals-card .al-cardbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page-fit > .appeals-card .al-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.al-feed { padding: 0 0 6px; }

/* Profile: tidy section cards */
.cc-hero-profile + .row .cc-section { margin-bottom: 0; }

@media (max-width: 900px) {
  .cc-hero-past .cc-hero-stats, .cc-hero-appeals .cc-hero-stats, .cc-hero-profile .cc-hero-stats { display: none; }
  .page-fit > .appeals-card { min-height: 320px; }
  .al-item-status .badge { font-size: .68rem; }
}
@media (max-width: 640px) {
  .al-item-status { display: none; }   /* the coloured icon + edge already show the status */
}

/* ---- Appeals tabs: even spacing + smooth switching (see the script at the end of views/student/appeals.php) ---- */
.al-tabs.archive-tabs { gap: 2px; padding: 4px; }
.al-tabs.archive-tabs .nav-item { display: flex; margin: 0; }
.al-tabs.archive-tabs .nav-link { gap: 6px; padding: 7px 12px; line-height: 1.2; }
.al-tabs .al-tab-count { margin-left: 2px; min-width: 22px; padding: .25em .55em; font-size: .72rem; line-height: 1.2; }
.al-tabs.archive-tabs { margin-bottom: 12px; }
.page-fit > .al-tabs.archive-tabs { margin-bottom: 0 !important; }
@keyframes apOut { to { opacity: 0; transform: translateY(4px); } }
@keyframes apIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ap-out { animation: apOut .11s ease-in forwards; pointer-events: none; }
.ap-in  { animation: apIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .ap-out, .ap-in { animation: none; } }

/* ---- Student: Advance Notice — same look as /activity (views/student/advance_notice.php) ---- */
.cc-hero-advance { background: linear-gradient(120deg, #2563eb 0%, #0891b2 100%); box-shadow: 0 6px 16px rgba(8, 145, 178, .2); }
.cc-hero-advance .cc-hero-btn:hover { color: #0e7490; }
.an-wrap { max-width: 880px; }
.an-summary {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line);
}
.an-summary .bi { color: #2563eb; }
/* Subject picker: separate rounded cards (no clipped edge bar), a clear selected state and a roomy tick box */
.an-wrap .al-feed#advClassList { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.al-feed .al-item.an-pick {
  position: relative; margin: 0; padding: 14px 16px; gap: 14px; cursor: pointer; user-select: none;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.al-feed .al-item.an-pick .form-check-input {
  flex: 0 0 auto; margin: 0; width: 1.35rem; height: 1.35rem; border-radius: 7px; border-width: 1.5px; cursor: pointer;
}
.al-feed .al-item.an-pick .form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .22); }
.al-feed .al-item.an-pick .al-icon-lg { opacity: .55; transition: opacity .15s ease, transform .15s ease; }
.al-feed .al-item.an-pick .al-item-title { font-size: .98rem; color: var(--ink); }
.al-feed .al-item.an-pick .al-item-title .badge { padding: .3em .6em; border-radius: 8px; }
.al-feed .al-item.an-pick .al-item-meta { gap: 6px 10px; margin-top: 8px; align-items: center; font-size: .8rem; color: var(--ink-soft); }
.al-feed .al-item.an-pick .al-item-meta > span:not(.al-chip) { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.al-feed .al-item.an-pick .al-item-meta .bi { margin-right: 0; }
.al-feed .al-item.an-pick .al-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
  background: color-mix(in srgb, #2563eb 9%, var(--surface)); color: #1d4ed8;
}
@media (hover: hover) {
  .al-feed .al-item.an-pick:hover { background: color-mix(in srgb, #2563eb 4%, var(--surface)); border-color: color-mix(in srgb, #2563eb 30%, var(--line)); }
}
.al-feed .al-item.an-pick:has(.adv-class:checked) {
  background: color-mix(in srgb, #2563eb 7%, var(--surface));
  border-color: color-mix(in srgb, #2563eb 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 12%, transparent), 0 4px 12px rgba(37, 99, 235, .08);
}
.al-feed .al-item.an-pick:has(.adv-class:checked) .al-icon-lg { opacity: 1; transform: scale(1.04); }
.al-feed .al-item.an-pick:has(.adv-class:checked):hover { background: color-mix(in srgb, #2563eb 10%, var(--surface)); }
.al-feed .al-item.an-pick:has(.adv-class:focus-visible) { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 575.98px) {
  .an-wrap .al-feed#advClassList { padding: 10px; gap: 8px; }
  .al-feed .al-item.an-pick { padding: 12px; gap: 11px; }
  .al-feed .al-item.an-pick .al-icon-lg { display: none; }   /* give the subject name the full row on phones */
}
@media (prefers-reduced-motion: reduce) {
  .al-feed .al-item.an-pick, .al-feed .al-item.an-pick .al-icon-lg { transition: none; }
}
.an-note { display: flex; gap: 8px; padding: 12px 18px; font-size: .8rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.an-note .bi { color: #d97706; margin-top: 2px; }
.an-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 18px; }
@media (max-width: 640px) {
  .an-actions .btn { flex: 1; }
  .cc-hero-advance .cc-hero-actions { width: 100%; }
}

/* ---- Student dashboard: collapsible "Today's Classes" card (views/student/dashboard.php) ---- */
.today-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.today-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.today-toggle:hover { background: var(--canvas); color: var(--ink); }
.today-toggle:focus-visible { outline: 2px solid var(--mon-blue); outline-offset: 2px; }
.today-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; color: var(--ink-soft); background: var(--canvas); border: 1px solid var(--line);
}
.today-chevron { font-size: .85rem; color: var(--ink-soft); transition: transform .25s ease; }
.today-card.is-collapsed .today-chevron { transform: rotate(-90deg); }
.today-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s ease; }
.today-collapse-inner { min-height: 0; overflow: hidden; }
.today-card.is-collapsed .today-collapse { grid-template-rows: 0fr; }
.today-card.is-collapsed > .card-header { border-bottom-color: transparent; }
.today-card.is-collapsed { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .today-collapse, .today-chevron, .today-toggle { transition: none; }
}

/* ---- Student dashboard: phone layout (views/student/dashboard.php) ---- */
@media (max-width: 575.98px) {
  /* warning banners: text first, then a full-width, thumb-sized button */
  .dash-warn { padding: 12px 14px; font-size: .88rem; gap: 10px !important; }
  .dash-warn .dash-warn-text { align-items: flex-start !important; }
  .dash-warn .dash-warn-text > .bi { font-size: 1.1rem !important; margin-top: 1px; }
  .dash-warn .btn { width: 100%; }

  /* three summary cards side by side, number over label */
  .student-stats .stat-card {
    height: 100%; flex-direction: column; align-items: center !important; justify-content: center !important;
    gap: 6px; padding: 12px 6px 10px; text-align: center;
  }
  .student-stats .stat-card .stat-icon { order: -1; width: 30px; height: 30px; border-radius: 9px; font-size: .95rem; }
  .student-stats .stat-card .stat-value { font-size: 1.4rem; }
  .student-stats .stat-card .stat-label { margin-top: 0; font-size: .66rem; line-height: 1.2; }

  /* Today's Classes: compact header, stacked rows, full-width button */
  .today-card > .card-header { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 12px; }
  .today-card .today-title { flex: 1 1 auto; gap: 6px; font-size: .95rem; }
  .today-card .today-title .sched-today-badge { margin-left: 0; }
  .today-card .today-toggle { width: 38px; height: 38px; min-height: 0; }
  .today-card .card-body { padding: 10px 12px 2px; }
  .today-card .sched-card { flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 12px; margin-bottom: 10px; }
  .today-card .sched-time { flex: none; display: flex; gap: 4px; align-items: baseline; font-size: .76rem; font-weight: 600; }
  .today-card .sched-time strong { display: inline; font-size: .82rem; }
  .today-card .sched-time span::before { content: '– '; }
  .today-card .sched-title { font-size: .95rem; }
  .today-card .sched-foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
  .today-card .sched-take-btn { width: 100%; height: 38px; }

  /* "My Classes" bar: title + layout toggle on one row, the two actions share the next */
  .student-heading-bar { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px !important; align-items: center; }
  .student-heading-bar .sh-title { grid-column: 1 / 4; min-width: 0; }
  .student-heading-bar .heading-actions { display: contents !important; }
  .student-heading-bar .view-toggle { grid-column: 4; justify-self: end; }
  .student-heading-bar .heading-actions > .btn { grid-column: span 2; width: 100%; min-height: 42px; padding-left: 8px; padding-right: 8px; white-space: nowrap; font-weight: 700; }
  .student-heading-bar .heading-actions > .btn:only-of-type,
  .student-heading-bar .heading-actions > .btn:last-child:nth-child(2) { grid-column: 1 / -1; }
  .student-heading-bar .heading-actions .btn-label { display: inline !important; }

  /* class cards: slimmer padding, wrap-friendly meta row, bigger tap target */
  #myClassesGrid .class-card-head { padding: 14px 16px 12px; }
  #myClassesGrid .class-card-title { font-size: 1.08rem; }
  #myClassesGrid .class-card .card-body { padding: 14px 16px 16px; }
  #myClassesGrid .class-card-meta { flex-wrap: wrap; row-gap: 6px; }
  #myClassesGrid .class-card-students { white-space: normal; min-width: 0; text-align: right; }
  #myClassesGrid .class-icon-btn { height: 44px; }
  #myClassesGrid[data-view="list"] .class-card-head { flex-basis: 100%; padding: 12px 16px; }
  #myClassesGrid[data-view="list"] .class-card .card-body { flex-basis: 100%; padding: 12px 16px 14px; gap: 10px; }
  #myClassesGrid[data-view="list"] .class-card-actions { flex: 1 1 100%; }
  #myClassesGrid[data-view="list"] .class-icon-btn.class-icon-btn-wide { flex: 1 1 auto; width: 100%; }
}