/* ============================================================
   VidyaSetu — design system
   Brand colours come from the DB (SiteSettings) and are injected
   onto :root as --brand / --accent at runtime by app.js.
   ============================================================ */
:root {
  /* Light-only app: keeps native date/time pickers and <select> popups light-themed on dark-mode
     devices (otherwise the Android WebView darkens them to white-on-white). */
  color-scheme: light;
  --brand: #1565c0;
  --brand-dark: #0d3f80;
  --accent: #ffa000;
  --ink: #1f2530;
  --muted: #5b6472;
  --line: #e7ebf0;
  --bg: #f5f7fb;
  --card: #ffffff;
  --radius: 18px;
  --shadow: 0 6px 24px rgba(20, 40, 80, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 40, 80, 0.14);
  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  max-width: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
/* Contain any stray over-wide content here (NOT on <html>/<body>, which would clip the parent's
   fixed bottom tab bar). #view holds the page content; the header + tab bar are its siblings. */
#view { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(1180px, 92vw); margin-inline: auto; }
/* long unbreakable strings (emails, refs) shouldn't push the layout wide on phones */
.adm-row-title, .kid-name, .acct-card-h, .auth-hint { overflow-wrap: anywhere; }

.material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  line-height: 1;
}

/* ----------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(6px);
  /* Edge-to-edge: the webview draws under the transparent status bar, so pad the header down by
     the inset (the white background fills the status-bar area; the logo sits below the clock). */
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  height: 72px;
}
/* brand fills the free space (pushing the right cluster to the edge) and truncates when tight, so the
   bell/profile (flex-shrink:0) are never pushed off-screen. */
.brand { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.brand-badge {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.brand-badge img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tagline { font-size: 12.5px; color: var(--muted); margin-top: -2px; }

.main-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; min-width: 0; }
.nav-link {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 11px; border-radius: 12px;
  font-weight: 600; font-size: 14px; color: var(--muted);
  transition: background .15s, color .15s;
}
.nav-link .material-symbols-rounded { font-size: 20px; }
.nav-link:hover { background: #eef3fb; color: var(--brand); }
.nav-link.active { background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); }

.nav-toggle {
  display: none;
  border: 1px solid var(--line); background: var(--card);
  width: 46px; height: 46px; border-radius: 12px;
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}

/* dashboard date-range chip (header) — full range text on desktop, icon-only on phones */
.daterange-top {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.daterange-top:hover { color: var(--brand); border-color: var(--brand); }
.daterange-top .material-symbols-rounded { font-size: 20px; }
.daterange-top .daterange-caret { font-size: 18px; opacity: .6; margin-left: -2px; }
.daterange-label { font-variant-numeric: tabular-nums; }
/* the chips' display rules would otherwise override the [hidden] attribute — restore hiding */
.daterange-top[hidden], .branch-top[hidden], .school-top[hidden] { display: none !important; }

/* date-range popover */
.daterange-pop {
  position: fixed; z-index: 200; width: min(300px, 94vw);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px;
}
.drp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.drp-preset {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 7px 10px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.drp-preset:hover { border-color: var(--brand); color: var(--brand); }
.drp-preset.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.drp-custom { display: flex; gap: 10px; }
.drp-custom label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 12px; color: var(--muted); font-weight: 600; }
.drp-custom input { border: 1px solid var(--line); border-radius: 9px; padding: 8px; font: inherit; color: var(--ink); background: var(--card); }
@media (max-width: 640px) {
  .daterange-top { padding: 0; gap: 0; width: 42px; justify-content: center; }
  .daterange-label, .daterange-caret { display: none; }
}
/* Phones: the date chip adds a 3rd right-hand icon, so compact the header (tighter gap + smaller
   icons/badge) to keep brand + date + bell + profile all on screen. */
@media (max-width: 600px) {
  .header-inner { gap: 8px; }
  .bell-top, .daterange-top, .branch-top, .school-top, .nav-toggle { width: 38px; height: 38px; }
  .avatar { width: 38px; height: 38px; font-size: 15px; }
  .brand-badge { width: 38px; height: 38px; font-size: 16px; }
  .bell-top .material-symbols-rounded, .daterange-top .material-symbols-rounded, .branch-top .material-symbols-rounded { font-size: 20px; }
}

/* active-campus (branch) chip — icon-only button (between the date picker and the bell) */
.branch-top {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); color: var(--brand); cursor: pointer;
}
.branch-top:hover { border-color: var(--brand); }
.branch-top.has-active { background: color-mix(in srgb, var(--brand) 10%, white); }
.branch-top .material-symbols-rounded { font-size: 22px; }

.branch-pop { padding: 6px; }
.brp-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 6px; }
.brp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: none; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 10px; text-align: left; }
.brp-item:hover { background: #eef3fb; color: var(--brand); }
.brp-item.active { color: var(--brand); }
.brp-name { flex: 1; }
.brp-check { font-size: 18px; color: var(--brand); }
.brp-item .material-symbols-rounded { font-size: 20px; }

/* ----------------------------------------------------- hero */
.hero {
  position: relative; color: #fff; overflow: hidden;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
/* painted kids illustration, shown in full colour, anchored to the bottom */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img); background-size: cover; background-position: center bottom;
  background-repeat: no-repeat;
}
/* brand wash — strong behind the text (left), fading to reveal the illustration (right) */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--brand) 88%, transparent) 0%,
    color-mix(in srgb, var(--brand) 64%, transparent) 32%,
    color-mix(in srgb, var(--brand) 20%, transparent) 60%,
    transparent 84%);
}
.hero-inner { position: relative; z-index: 1; padding: 64px 0 72px; }
/* Auto-sliding hero carousel (admin-uploaded images). Slides sit below the brand wash + text. */
.hero.has-slides::before { content: none; }                 /* replace the default illustration */
.hero.has-slides::after { z-index: 1; }                     /* keep the brand wash above the slides for legibility */
.hero.has-slides .hero-inner { z-index: 2; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .9s ease; }
.hero-slide.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
.hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.07; margin: 0 0 14px; font-weight: 800; text-shadow: 0 2px 12px rgba(13,40,80,.28); }
.hero p { font-size: clamp(15px, 2.2vw, 20px); max-width: 640px; opacity: .96; margin: 0; text-shadow: 0 1px 8px rgba(13,40,80,.25); }
.hero .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px;
}

/* ----------------------------------------------------- sections */
section { padding: 44px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.section-head h2 { font-size: clamp(22px, 3vw, 30px); margin: 0; font-weight: 800; letter-spacing: -.3px; }
.section-head p { margin: 4px 0 0; color: var(--muted); }

/* -------------------------------- quick access (icon-first grid) */
.quick-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.quick-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.quick-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.quick-ic {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  color: #fff;
}
.quick-ic .material-symbols-rounded { font-size: 34px; }
.quick-label { font-weight: 700; font-size: 15px; }
.quick-sub { font-size: 12.5px; color: var(--muted); margin-top: -6px; }

/* tile colour variants — distinct, high-contrast, easy to recognize */
.c-bus    { background: linear-gradient(135deg,#1e88e5,#1565c0); }
.c-leave  { background: linear-gradient(135deg,#fb8c00,#ef6c00); }
.c-fees   { background: linear-gradient(135deg,#43a047,#2e7d32); }
.c-att    { background: linear-gradient(135deg,#8e24aa,#6a1b9a); }
.c-report { background: linear-gradient(135deg,#00897b,#00695c); }
.c-photo  { background: linear-gradient(135deg,#e53935,#c62828); }
.c-notice { background: linear-gradient(135deg,#3949ab,#283593); }
.c-contact{ background: linear-gradient(135deg,#546e7a,#37474f); }

/* -------------------------------- activity cards */
.card-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.activity-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.activity-card .cover { aspect-ratio: 16/10; background: #dde3ec; object-fit: cover; width: 100%; }
.activity-body { padding: 16px 18px 20px; }
.activity-date { font-size: 12.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.activity-body h3 { margin: 6px 0 6px; font-size: 18px; }
.activity-body p { margin: 0; color: var(--muted); font-size: 14.5px; }
.activity-media { display: flex; gap: 8px; padding: 0 18px 18px; flex-wrap: wrap; }
.activity-media img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.media-thumb { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; }
.media-thumb.video { background: #111827; color: #fff; }
.media-thumb.video .material-symbols-rounded { font-size: 28px; }
.cover-wrap { position: relative; }
.cover-ph { aspect-ratio: 16/10; background: #dde3ec; display: grid; place-items: center; color: #9aa6b8; }
.cover-ph .material-symbols-rounded { font-size: 44px; }
.play-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.18); color: #fff; }
.play-overlay .material-symbols-rounded { font-size: 56px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* event detail gallery */
.media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.gal-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; }
.gal-video { width: 100%; border-radius: 14px; background: #000; max-height: 360px; grid-column: 1 / -1; }

/* -------------------------------- content blocks (tab pages) */
.tab-page { padding-top: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; margin-bottom: 12px; cursor: pointer; }
.block { margin: 26px 0; }
.block-hero {
  border-radius: var(--radius); overflow: hidden; color: #fff; padding: 56px 40px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); position: relative;
}
.block-hero h2 { font-size: clamp(24px,4vw,40px); margin: 0 0 10px; }
.block-imgtext { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
.block-imgtext img { border-radius: var(--radius); box-shadow: var(--shadow); }
.block h2, .block h3 { letter-spacing: -.3px; }
.block p { color: var(--muted); }

/* ----------------------------------------------------- footer */
.site-footer { background: #0f1726; color: #c7d0de; margin-top: 40px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding: 48px 0 28px; }
.site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 12px; }
.site-footer a { color: #c7d0de; display: block; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.foot-contact { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 14px; }
.foot-contact .material-symbols-rounded { font-size: 20px; color: var(--accent); }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: 13px; color: #8b95a7; text-align: center; }

/* ----------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  opacity: 0; visibility: hidden; pointer-events: none;   /* fully hidden when empty (no stray pill) */
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 12px;
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: 14.5px; z-index: 400;
  transition: opacity .28s, transform .28s cubic-bezier(.2,.8,.2,1); max-width: 90vw;
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* keep toasts clear of the parent's fixed bottom tab bar */
body.role-parent .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* ----------------------------------------------------- skeleton/loading */
.loading { text-align: center; padding: 80px 0; color: var(--muted); }
.spinner {
  width: 38px; height: 38px; border: 4px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; margin: 0 auto 14px; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- buttons */
.btn-primary, .btn-soft, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: 15px;
  font-family: var(--font); cursor: pointer; border: none; transition: filter .15s, transform .1s;
}
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-soft { background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand); }
.btn-soft:hover { background: color-mix(in srgb, var(--brand) 16%, white); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); }
.btn-primary.block { width: 100%; margin-top: 8px; }
.btn-primary-sm { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff !important; }
.btn-primary-sm:hover { color: #fff !important; }
.btn-primary-sm .material-symbols-rounded { color: #fff; }

/* ------------------------------------------- playful login (mobile-first) */
body.auth-mode .site-header, body.auth-mode .site-footer { display: none; }
/* Parents get an app-like layout — hide the heavy marketing footer. */
body.role-parent .site-footer { display: none; }

/* App-like bottom tab bar (parents). */
.tabbar { display: none; }
body.role-parent .tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 600px; margin: 0 auto; background: #fff; border-top: 1px solid #eef1f6;
  padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 18px rgba(20,30,50,.07);
}
body.role-parent.auth-mode .tabbar { display: none; }
.tabbar .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; color: #97a0b0; font-weight: 600; }
.tabbar .tab .material-symbols-rounded { font-size: 24px; }
.tabbar .tab-lbl { font-size: 11px; }
.tabbar .tab.on { color: var(--brand); }
.tabbar .tab.on .material-symbols-rounded { font-variation-settings: "FILL" 1; }
body.role-parent #view { padding-bottom: 78px; }   /* clear the fixed tab bar */
body.auth-mode { background: #eef1f6; }
body.auth-mode #view { min-height: 100vh; min-height: 100dvh; }

.login2 { width: min(460px, 100%); margin-inline: auto; background: var(--card); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.login2-hero {
  position: relative; overflow: hidden; padding: 26px 22px 66px;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--brand) 16%, #fff) 0%,
    color-mix(in srgb, var(--brand) 46%, #fff) 100%);
}
.login2-logo { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 24px; overflow: hidden; box-shadow: var(--shadow); }
.login2-logo img { width: 100%; height: 100%; object-fit: cover; }
.login2-art { position: absolute; top: 6px; right: -8px; width: min(290px, 64%); pointer-events: none; user-select: none; }
.login2-greet { position: relative; margin-top: 96px; }
.login2-greet h1 { margin: 0; font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.login2-greet p { margin: 4px 0 0; font-size: 16px; color: color-mix(in srgb, var(--ink) 62%, #fff); }

/* New login banner: the kids illustration spans the top; its blank lower area flows into the card. */
.login2-banner { position: relative; aspect-ratio: 1086 / 840; background: linear-gradient(180deg,#bfe2ff,#eaf5ff); overflow: hidden; }
.login2-banner > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.login2-banner .login2-logo { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); left: 18px; z-index: 2; }

/* Auto-sliding banner carousel (admin-uploaded images). Cross-fade between slides. */
.login2-slides { position: absolute; inset: 0; }
.login2-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .8s ease; }
.login2-slide.active { opacity: 1; }
.login2-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; gap: 7px; justify-content: center; }
.login2-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: background .3s, transform .3s; }
.login2-dot.active { background: #fff; transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .login2-slide { transition: none; } }

/* Admin Site Settings — login banner image manager */
.banner-mgr { display: flex; flex-wrap: wrap; gap: 12px; }
.banner-thumb { position: relative; width: 150px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-thumb-acts { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: 2px; padding: 4px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
.banner-thumb-acts .icon-btn { color: #fff; width: 28px; height: 28px; }
.banner-thumb-acts .icon-btn.danger:hover { color: #ff6b6b; }
.banner-add { width: 150px; aspect-ratio: 16 / 10; border: 2px dashed color-mix(in srgb, var(--ink) 22%, #fff); border-radius: 12px; background: var(--bg); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
.banner-add:hover { border-color: var(--brand); color: var(--brand); }
.logo-uploader { display: flex; }
.logo-uploader .banner-thumb img { object-fit: contain; background: #fff; padding: 6px; }

.login2-card { flex: 1; background: var(--card); margin-top: -26px; border-radius: 28px 28px 0 0; padding: 22px 22px 40px; position: relative; z-index: 1; box-shadow: 0 -8px 26px rgba(20,30,50,.07); }
.login2-card .login2-greet { margin-top: 2px; margin-bottom: 6px; }
.l2-lbl { display: block; font-weight: 700; color: var(--ink); font-size: 14px; margin: 16px 2px 7px; }
.l2-lbl:first-child { margin-top: 2px; }
.l2-input { width: 100%; box-sizing: border-box; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--font); font-size: 15.5px; color: var(--ink); outline: none; background: #fff; transition: border-color .15s, box-shadow .15s; }
.l2-input::placeholder { color: #9aa3b2; }
.l2-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.l2-pwd { position: relative; }
.l2-pwd .l2-input { padding-right: 48px; }
.l2-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.l2-eye:hover { color: var(--brand); }
/* Hide the browser's built-in password reveal/clear icons (Edge/IE) so only our .l2-eye toggle shows. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
.l2-links { display: flex; justify-content: space-between; gap: 12px; margin: 12px 2px 0; font-size: 14px; }
.l2-btn { margin-top: 22px; padding: 16px; font-size: 16px; font-weight: 800; letter-spacing: .6px; border-radius: 12px; }
.l2-alt { text-align: center; color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.login2-demo { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 22px; opacity: .85; }
@media (min-width: 560px) {
  .login2 { min-height: auto; margin: 30px auto; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); }
  .login2-card { border-radius: 0; }
}
/* Phones: cap the tall banner so the form + "School staff? Log in here" link fit without scrolling. */
@media (max-width: 559px) {
  .login2-banner { aspect-ratio: auto; height: 28vh; min-height: 140px; max-height: 230px; }
}

/* ----------------------------------------------------- auth (legacy) */
.auth-wrap { display: flex; flex-direction: column; align-items: center; padding: 48px 0 60px; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(420px, 94vw); padding: 8px; }
.auth-tabs { display: flex; gap: 6px; padding: 8px; }
.auth-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 12px; border: none; background: transparent; color: var(--muted); font-weight: 700; font-family: var(--font); font-size: 15px; cursor: pointer; }
.auth-tab.active { background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); }
#authBody { padding: 8px 18px 20px; }
.fld { display: block; margin: 12px 0; }
.fld span { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.fld input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-family: var(--font); outline: none; transition: border-color .15s; }
.fld input:focus { border-color: var(--brand); }
.otp-hint { background: color-mix(in srgb, var(--accent) 16%, white); color: #8a5a00; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; margin: 10px 0; text-align: center; }
.auth-hint { color: var(--muted); font-size: 13px; margin-top: 18px; text-align: center; max-width: 460px; }
.auth-alt { color: var(--muted); font-size: 13px; margin: 8px 0 0; text-align: center; }
.linklike { color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ----------------------------------------------------- dashboard */
.dash { padding: 32px 0 50px; }
.dash-head h1 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.dash-head p { margin: 4px 0 0; color: var(--muted); }
.dash-head { margin-bottom: 22px; }
.sub-badge { background: var(--accent); color: #5a3a00; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; vertical-align: middle; }

.kid-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kid-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.kid-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kid-ava { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 22px; overflow: hidden; }
.kid-ava img { width: 100%; height: 100%; object-fit: cover; }
.kid-name { font-weight: 800; font-size: 18px; }
.kid-sub { color: var(--muted); font-size: 13.5px; }
.kid-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kid-act {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 6px 11px; cursor: pointer; min-width: 0;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.kid-act:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 32%, white); }
.kid-act:active { transform: translateY(0); }
.kid-act-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.kid-act-ic .material-symbols-rounded { font-size: 25px; }
.kid-act-lbl { font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.15; }
.kid-act.a-bus    .kid-act-ic { background: linear-gradient(135deg, #2196f3, #1565c0); }
.kid-act.a-leave  .kid-act-ic { background: linear-gradient(135deg, #fb8c00, #ef6c00); }
.kid-act.a-att    .kid-act-ic { background: linear-gradient(135deg, #43a047, #2e7d32); }
.kid-act.a-report .kid-act-ic { background: linear-gradient(135deg, #9c27b0, #6a1b9a); }

/* ----------------------------------------------------- live track */
.track-bar { position: sticky; top: 72px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.track-title { font-weight: 800; display: flex; align-items: center; gap: 8px; }
.track-title .material-symbols-rounded { color: var(--accent); }
.track-status { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); display: flex; align-items: center; gap: 6px; }
.map { width: 100%; height: 56vh; min-height: 360px; background: #dde3ec; }
.bus-pin { font-size: 26px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); text-align: center; line-height: 36px; }
.track-info { padding: 16px 0 40px; }
.info-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.info-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.info-pill .material-symbols-rounded { color: var(--brand); font-size: 20px; }
.info-pill.ok { background: #e9f7ee; border-color: #b6e3c5; color: #1b7a3d; }
.info-pill.ok .material-symbols-rounded { color: #1b7a3d; }
.info-pill.muted { color: var(--muted); }

/* ----------------------------------------------------- map polish (Leaflet) */
.map { border-radius: var(--radius); overflow: hidden; }
/* Rounded, soft-shadowed zoom controls that match the app's cards */
.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; border-radius: 12px !important; overflow: hidden; }
.leaflet-control-zoom a {
  width: 34px; height: 34px; line-height: 34px; color: var(--ink);
  background: var(--card); border: none !important; font-size: 19px; font-weight: 600;
  transition: background .15s, color .15s;
}
.leaflet-control-zoom a:hover { background: var(--brand); color: #fff; }
.leaflet-bar a:first-child { border-bottom: 1px solid var(--line) !important; }
/* Quieter attribution */
.leaflet-control-attribution {
  background: rgba(255,255,255,.7) !important; backdrop-filter: blur(4px);
  font-size: 10px; color: var(--muted); border-radius: 8px 0 0 0; padding: 2px 7px;
}
.leaflet-control-attribution a { color: var(--brand); }
.leaflet-tooltip {
  border: none; box-shadow: var(--shadow); border-radius: 8px;
  font-family: var(--font); font-weight: 600; font-size: 12.5px; color: var(--ink); padding: 5px 9px;
}

/* Branded location-picker pin (replaces the default Leaflet teardrop) */
.vst-pin-wrap { background: none; border: none; }
.vst-pin {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0;
  background: var(--brand); transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(20,40,80,.35); border: 3px solid #fff;
  animation: vst-pin-drop .35s cubic-bezier(.2,.8,.3,1.2);
}
.vst-pin .material-symbols-rounded { transform: rotate(45deg); color: #fff; font-size: 22px; }
.vst-pin-shadow {
  width: 14px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.22);
  margin: 1px auto 0; filter: blur(1px);
}
@keyframes vst-pin-drop {
  0% { transform: rotate(-45deg) translateY(-14px) scale(.6); opacity: 0; }
  100% { transform: rotate(-45deg) translateY(0) scale(1); opacity: 1; }
}

/* Route line connecting the stops in order (className so it follows the tenant brand colour). */
.vst-route { stroke: var(--brand); stroke-width: 4; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* Numbered stop pin-badges (replace plain circle markers). Boarding stop is larger + accent. */
.vst-stop-wrap { background: none; border: none; }
.vst-stop {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(20,40,80,.3);
  display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font);
}
.vst-stop.is-board {
  width: 30px; height: 30px; background: var(--accent);
  font-size: 13px; box-shadow: 0 0 0 4px rgba(255,160,0,.25), 0 3px 8px rgba(20,40,80,.35);
}
/* Campus/school destination marker on the live map (where a pickup run ends). */
.vst-school-wrap { background: none; border: none; }
.vst-school {
  width: 34px; height: 34px; border-radius: 50%;
  background: #2e7d32; color: #fff; border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(20,40,80,.35);
  display: flex; align-items: center; justify-content: center;
}
.vst-school .material-symbols-rounded { font-size: 20px; }

/* Pulsing halo for the live bus marker */
.bus-pin { position: relative; z-index: 2; }
.bus-pin::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: rgba(255,160,0,.35); z-index: -1; animation: vst-pulse 1.8s ease-out infinite;
}
@keyframes vst-pulse {
  0% { transform: translate(-50%,-50%) scale(.5); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}

/* ----------------------------------------------------- driver */
.driver-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stop-list { list-style: none; padding: 0; margin: 0; }
.stop-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-weight: 600; }
.stop-list .material-symbols-rounded { color: var(--accent); }
.stop-time { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; }

/* ----------------------------------------------------- table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tbl th { background: #f3f6fb; font-weight: 700; color: var(--muted); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: #f3f7fd; }

/* ----------------------------------------------------- admin console */
.admin-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.admin-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; font-size: clamp(22px, 3.4vw, 30px); }
.admin-help { background: color-mix(in srgb, var(--brand) 7%, white); border: 1px solid color-mix(in srgb, var(--brand) 18%, white); color: var(--ink); padding: 12px 14px; border-radius: 12px; font-size: 14px; margin: 0 0 16px; }
.admin-help b { color: var(--brand); }

.adm-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.adm-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.adm-ic { color: var(--brand); font-size: 26px; }
.adm-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.adm-row-main { flex: 1; min-width: 0; }
.adm-row-title { font-weight: 700; font-size: 15.5px; }
.adm-row-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.muted-badge { background: #eef1f6; color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.muted { color: var(--muted); }

.btn-danger { display: inline-flex; align-items: center; gap: 6px; background: #fdecec; color: #c62828; border: none; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-family: var(--font); cursor: pointer; }
.btn-danger:hover { background: #f9d9d9; }
.btn-soft.sm, .btn-danger.sm { padding: 8px 11px; font-size: 13.5px; border-radius: 10px; }
.btn-soft.sm .material-symbols-rounded, .btn-danger.sm .material-symbols-rounded { font-size: 19px; }

.adm-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 16px 0; }
.adm-form h3 { margin: 0 0 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-form textarea, .fld textarea, .fld select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-family: var(--font); outline: none; background: #fff; }
.fld textarea:focus, .fld select:focus { border-color: var(--brand); }
.fld.chk { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-top: 26px; }
.fld.chk input { width: 20px; height: 20px; }
.fld.chk span { margin: 0; font-size: 15px; color: var(--ink); font-weight: 600; }
.fld input[type=color] { height: 46px; padding: 4px; cursor: pointer; }
.adm-form-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.upload-row { display: flex; gap: 8px; align-items: flex-end; }
.upload-row .fld { flex: 1; margin-bottom: 0; }
.up-btn { height: 46px; }
.media-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.media-chip { background: #eef3fb; border-radius: 10px; padding: 6px 10px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.media-chip a { color: var(--brand); font-weight: 600; }
.media-chip button { border: none; background: transparent; cursor: pointer; color: #c62828; font-weight: 800; font-size: 14px; }
.stop-edit { display: flex; gap: 8px; margin-bottom: 8px; }
.stop-edit input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font); font-size: 14px; outline: none; }
.stop-edit input[data-f="name"] { flex: 2; min-width: 0; }
.stop-edit input[data-f="lat"], .stop-edit input[data-f="lng"], .stop-edit input[data-f="time"] { flex: 1; min-width: 0; }
.stop-edit input:focus { border-color: var(--brand); }
.sched-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sched-controls input, .sched-controls select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font); font-size: 14px; }

/* ----------------------------------------------------- notification bell */
.bell { position: relative; border: 1px solid var(--line); background: var(--card); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.bell:hover { color: var(--brand); border-color: var(--brand); }
.bell-label { display: none; }   /* desktop: bell is an icon-only button; mobile shows the label */
.bell-badge { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: #e53935; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; display: grid; place-items: center; border: 2px solid var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bell-badge[hidden] { display: none; }   /* author display:grid would otherwise show a "0" badge */
/* On the dashboard the bell folds into the profile menu; the unread state shows as a small dot on the
   avatar (no count, so it doesn't overlap the initials). */
#profileBadge { top: -1px; right: -1px; min-width: 11px; width: 11px; height: 11px; padding: 0; font-size: 0; }
/* Always-visible header notification bell (sits at the right, beside the menu button). */
.bell-top { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.bell-top:hover { color: var(--brand); border-color: var(--brand); }
.bell-top[hidden] { display: none; }
/* The brand has margin-right:auto, so the whole right cluster is pushed right as one group and the
   header's flex `gap` spaces the chips/icons evenly — no per-item auto-margins (which would split
   the free space and scatter the icons). */
.nav-toggle.nav-toggle-empty { display: none !important; }   /* hide the hamburger when the menu is empty */
/* Header account avatar + dropdown menu */
.profile-btn { position: relative; flex-shrink: 0; border: none; background: transparent; padding: 0; cursor: pointer; line-height: 0; }
.profile-btn[hidden] { display: none; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.avatar.lg { width: 46px; height: 46px; font-size: 19px; }
.profile-menu { position: fixed; z-index: 200; width: min(280px, 92vw); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; padding: 6px; }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pm-id { min-width: 0; }
.pm-name { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-role { font-size: 12.5px; color: var(--muted); }
.pm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: none; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 10px; text-align: left; }
.pm-item:hover { background: #eef3fb; color: var(--brand); }
.pm-item .material-symbols-rounded { font-size: 20px; color: var(--muted); }
.pm-item:hover .material-symbols-rounded { color: var(--brand); }
.pm-item.danger:hover { background: #fdecea; color: #c62828; }
.pm-item.danger:hover .material-symbols-rounded { color: #c62828; }
/* active row is shown only by a green tick — no colour/background highlight */
.pm-check { margin-left: auto; font-size: 18px !important; color: #2e7d32 !important; }
.pm-sep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 12px 4px; }

/* collapsible campus / school switcher inside the profile menu */
.pm-acc { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 6px; }
.pm-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: none; background: transparent; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; border-radius: 10px; text-align: left; }
.pm-acc-head:hover { background: #eef3fb; }
.pm-acc-head > .material-symbols-rounded { font-size: 20px; color: var(--muted); }
.pm-acc-caret { margin-left: auto; font-size: 20px !important; color: var(--muted) !important; transition: transform .2s; }
.pm-acc.open .pm-acc-caret { transform: rotate(180deg); }
.pm-acc-body { display: none; margin-top: 2px; }
.pm-acc.open .pm-acc-body { display: block; }
.pm-sub { padding-left: 22px; }
/* On phones the campus chip moves into this menu (header stays uncrowded so bell + profile fit). */
@media (max-width: 640px) {
  .branch-top { display: none; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; }
}

/* Settings popup rows */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; }
.set-lbl { display: flex; flex-direction: column; }
.set-lbl .muted { font-size: 12.5px; }

/* Dashboard quick-filter search */
.tile-search { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 0 18px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tile-search .material-symbols-rounded { color: var(--muted); font-size: 20px; }
.tile-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 15px; }
.tile-search input::-webkit-search-cancel-button { cursor: pointer; }

.notif-panel { position: fixed; z-index: 200; width: min(360px, 92vw); max-height: 70vh; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.link-btn { border: none; background: transparent; color: var(--brand); font-weight: 700; font-family: var(--font); cursor: pointer; font-size: 13px; }
.notif-list { overflow-y: auto; }
.notif-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.notif-item.unread { background: color-mix(in srgb, var(--brand) 6%, white); }
.notif-ic { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.notif-main { min-width: 0; }
.notif-title { font-weight: 700; font-size: 14.5px; }
.notif-body { color: var(--muted); font-size: 13px; margin-top: 2px; }
.notif-time { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.notif-empty { padding: 30px; text-align: center; color: var(--muted); }

/* ----------------------------------------------------- search + groups */
.search-box { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; margin: 16px 0 6px; }
.search-box .material-symbols-rounded { color: var(--muted); }
.search-box input { flex: 1; border: none; outline: none; padding: 13px 0; font-size: 15px; font-family: var(--font); background: transparent; }
.grp { margin-top: 18px; }
.grp-head { font-weight: 800; font-size: 15px; color: var(--brand); padding: 6px 2px; display: flex; align-items: center; gap: 8px; }

/* ----------------------------------------------------- fees */
.parent-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.parent-actions .btn-soft { text-decoration: none; }

/* ============ Parent app-like home (renderParent) ============ */
.p2 { max-width: 600px; margin: 0 auto; }
.p2-head { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 20px 18px 30px; border-radius: 0 0 28px 28px; }
.p2-hello { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.p2-hello .wave { display: inline-block; animation: p2wave 2.4s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes p2wave { 0%,60%,100% { transform: rotate(0) } 10% { transform: rotate(16deg) } 20% { transform: rotate(-8deg) } 30% { transform: rotate(14deg) } 40% { transform: rotate(-4deg) } }
.p2-kidpick { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.p2-chip { background: rgba(255,255,255,.20); color: #fff; border: none; padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; }
.p2-chip.on { background: #fff; color: var(--brand-dark); }
.p2-child { display: flex; align-items: center; gap: 13px; margin-top: 16px; }
.p2-ava { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.22); display: grid; place-items: center; font-weight: 800; font-size: 23px; color: #fff; overflow: hidden; flex: none; }
.p2-ava img { width: 100%; height: 100%; object-fit: cover; }
.p2-child-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.p2-child-sub { font-size: 13px; opacity: .88; margin-top: 2px; }

.p2-body { padding: 0 16px 44px; }
/* minmax(0,1fr) (not bare 1fr) lets the columns shrink below their content's min-content width so the
   grid never pushes wider than the phone — bare 1fr was cutting off the right card/tile on narrow screens. */
.p2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: -20px; }
.p2-stat { background: #fff; border-radius: 18px; padding: 13px 14px; box-shadow: 0 6px 18px rgba(20,30,50,.09); display: flex; align-items: center; gap: 12px; min-width: 0; }
.p2-stat-lbl { min-width: 0; }
.p2-ring { --p: 0; width: 60px; height: 60px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--rc, #43a047) calc(var(--p) * 1%), #e9eef5 0); display: grid; place-items: center; }
.p2-ring::after { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.p2-ring span { position: relative; z-index: 1; font-weight: 800; font-size: 14px; color: #2a3340; }
.p2-ring.good { --rc: #2ca35a; } .p2-ring.warn { --rc: #f59e0b; } .p2-ring.bad { --rc: #e5484d; }
.p2-statnum { font-size: 26px; font-weight: 800; color: #1f2937; min-width: 52px; text-align: center; }
.p2-stat-lbl { font-size: 13px; color: #7a8494; font-weight: 600; }

.p2-fee { border-radius: 18px; padding: 15px 18px; margin: 16px 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p2-fee.is-due { background: #fff6f4; border: 1px solid #ffd8cf; }
.p2-fee.is-clear { background: #f0fbf3; border: 1px solid #c9eed4; }
.p2-fee-main { min-width: 0; }
.p2-fee-btn { flex: none; }
.p2-fee-lbl { font-size: 12.5px; color: #8a93a3; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.p2-fee-amt { font-size: 25px; font-weight: 800; color: #1f2937; letter-spacing: -.5px; line-height: 1.1; }
.p2-fee-sub { font-size: 12px; color: #9aa3b2; margin-top: 2px; }
.p2-fee-btn { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 34%, transparent); }
.p2-fee-clear { display: flex; align-items: center; gap: 12px; }
.p2-fee-clear .material-symbols-rounded { color: #22a35a; font-size: 34px; }

.p2-sec { font-size: 15px; font-weight: 700; color: #2a3340; margin: 22px 2px 12px; }
.p2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.p2-tile { background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 13px 5px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 2px 6px rgba(20,30,50,.05); min-width: 0; }
.p2-tile-lbl { max-width: 100%; overflow-wrap: anywhere; }
.p2-tile-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: #fff; }
.p2-tile-ic .material-symbols-rounded { font-size: 25px; }
.p2-tile-lbl { font-size: 11.5px; font-weight: 600; color: #3a4453; line-height: 1.2; }
.t-blue .p2-tile-ic { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.t-green .p2-tile-ic { background: linear-gradient(135deg, #22c55e, #16a34a); }
.t-orange .p2-tile-ic { background: linear-gradient(135deg, #fb923c, #f97316); }
.t-purple .p2-tile-ic { background: linear-gradient(135deg, #a855f7, #9333ea); }
.p2-empty { text-align: center; padding: 54px 20px; color: #7a8494; }
.p2-empty .material-symbols-rounded { font-size: 56px; color: #c2cad6; }
.p2-charts { display: grid; gap: 14px; }
.p2-charts .chart-card { background: #fff; border: 1px solid #eef1f6; border-radius: 18px; padding: 14px 14px 8px; box-shadow: 0 2px 6px rgba(20,30,50,.05); }
.p2-charts .chart-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #2a3340; }
.fee-amt { font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; }
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.sum-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.sum-ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); display: grid; place-items: center; }
.sum-val { font-weight: 800; font-size: 20px; }
.sum-label { color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------- checkbox grid */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 8px 0; }
.chk-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.chk-item input { width: 18px; height: 18px; }

/* ----------------------------------------------------- marks + report card */
.mark-inp { width: 100px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font); font-size: 15px; text-align: center; }
.mark-inp:focus { border-color: var(--brand); outline: none; }
.tbl tfoot th { background: #f3f6fb; font-weight: 800; color: var(--ink); border-top: 2px solid var(--line); }
.report-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-top: 16px; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rc-name { font-weight: 800; font-size: 20px; }
.rc-grade { text-align: right; }
.rc-pct { font-weight: 800; font-size: 26px; color: var(--brand); }
.logged-banner { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 18px; background: color-mix(in srgb, var(--brand) 10%, white); border: 1px solid color-mix(in srgb, var(--brand) 22%, white); border-radius: 14px; color: var(--brand); font-weight: 700; }
.logged-banner .lb-txt { flex: 1; min-width: 0; }
.logged-banner .lb-arrow { flex: 0 0 auto; }
.att-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.grid2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .grid2-cards { grid-template-columns: 1fr; } }

/* ----------------------------------------------------- status badges */
.status-badge { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; vertical-align: middle; text-transform: uppercase; letter-spacing: .3px; }
.status-badge.pending { background: #fff3e0; color: #e65100; }
.status-badge.approved { background: #e8f5e9; color: #2e7d32; }
.status-badge.rejected { background: #fdecec; color: #c62828; }
.status-badge.cancelled { background: #eef1f6; color: #5b6472; }

/* ----------------------------------------------------- dashboard stats + charts */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.stat-card .quick-ic .material-symbols-rounded { font-size: 26px; }
.stat-val { font-weight: 800; font-size: 26px; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 2px; }
.stat-arrow { font-size: 16px; opacity: .55; }

/* clickable KPI cards drill into a report */
.stat-card.clickable, .sum-card.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.stat-card.clickable:hover, .sum-card.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 35%, white); }
.stat-card.clickable:hover .stat-arrow { opacity: 1; color: var(--brand); }

/* "filtered by X" chip on a drilled-in report */
.filter-chip { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); border-radius: 999px; padding: 5px 6px 5px 14px; font-size: 13px; font-weight: 700; }
.filter-chip button { border: none; background: rgba(0,0,0,.08); color: inherit; width: 22px; height: 22px; border-radius: 999px; cursor: pointer; font-weight: 800; line-height: 1; }
.filter-chip button:hover { background: rgba(0,0,0,.16); }

.dash-sec { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 28px 0 4px; }
.dash-sec .material-symbols-rounded { color: var(--brand); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 22px; }
.chart-card h3 { margin: 0 0 14px; font-size: 16px; letter-spacing: -.2px; }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chart-card-head h3 { margin: 0 0 14px; }
.chart-detail-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -4px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--muted); cursor: pointer; transition: all .15s; }
.chart-detail-btn:hover { color: var(--brand); border-color: var(--brand); background: rgba(30,136,229,.06); }
.chart-detail-btn .material-symbols-rounded { font-size: 20px; }
.chart-box { position: relative; height: 280px; }
.chart-empty { height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; }
.chart-empty .material-symbols-rounded { font-size: 42px; opacity: .5; }

/* ----------------------------------------------------- reports */
.report-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.report-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 700; font-family: var(--font); font-size: 14px; cursor: pointer; transition: all .15s; }
.report-tab .material-symbols-rounded { font-size: 20px; }
.report-tab:hover { border-color: var(--brand); color: var(--brand); }
.report-tab.active { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-color: transparent; }
.report-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 2px; }
.report-count { font-weight: 700; color: var(--muted); font-size: 14px; }
.report-actions { margin-left: auto; display: flex; gap: 8px; }
.report-table th { white-space: nowrap; }
.report-table td { white-space: nowrap; }

/* ----------------------------------------------------- voice note + leave docs */
.voice-rec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vr-status { font-size: 13px; color: var(--muted); font-weight: 600; }
.btn-soft.recording { background: #fdecec; color: #c62828; animation: recPulse 1.1s infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,.45); } 50% { box-shadow: 0 0 0 8px rgba(229,57,53,0); } }
#vr_preview audio, .voice-block audio { width: 100%; margin-top: 8px; height: 40px; }

.voice-block { margin-top: 10px; width: 100%; background: color-mix(in srgb, var(--brand) 6%, white); border: 1px solid color-mix(in srgb, var(--brand) 16%, white); border-radius: 12px; padding: 10px 12px; }
.voice-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--brand); }
.voice-head .material-symbols-rounded { font-size: 20px; }
.voice-tx { font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.voice-tx.voice-en { color: var(--ink); }
.voice-tx b { color: var(--muted); font-weight: 700; }
.voice-tx.voice-processing { color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dot-spin { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--brand) 30%, white); border-top-color: var(--brand); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; }

/* ----------------------------------------------------- timetable */
.tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tt { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; background: var(--card); }
.tt th, .tt td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; vertical-align: top; }
.tt thead th { background: #f4f6fa; font-weight: 700; }
.tt-ph { background: #f9fafc; white-space: nowrap; text-align: left; }
.tt-pnum { font-weight: 700; }
.tt-ptime { font-size: 11px; color: var(--muted); }
.tt-subj { font-weight: 600; }
.tt-sub2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tt-break { background: #fff8e1; color: #8a6d3b; font-style: italic; }
.tt-edit td select { width: 100%; font: inherit; font-size: 12px; border: 1px solid #d8dee9; border-radius: 6px; padding: 3px; margin-bottom: 3px; background: #fff; }
.tt-edit .tt-ph input[type=time] { display: block; width: 110px; font-size: 11px; margin-top: 3px; border: 1px solid #d8dee9; border-radius: 6px; padding: 2px 4px; }
.tt-errors { margin-top: 12px; border: 1px solid #f0c2c2; background: #fdf3f3; border-radius: 8px; padding: 10px 12px; color: #a12d2d; }
.tt-errors ul { margin: 4px 0 0; padding-left: 18px; }
.tt-errors li { font-size: 13px; line-height: 1.5; }
/* Inline per-cell validation: message pinned under the teacher dropdown / on the period header. */
.tt-cell-err { margin-top: 4px; font-size: 11px; line-height: 1.3; color: #a12d2d; font-weight: 600; }
.tt-edit td.tt-bad, .tt-edit th.tt-bad { background: #fdeded; box-shadow: inset 0 0 0 2px #e9a3a3; }

/* ----------------------------------------------------- messages (parent ↔ teacher) */
.msg-thread { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 6px 2px; }
.msg-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.msg-bubble.theirs { align-self: flex-start; background: #eef1f5; border-bottom-left-radius: 4px; }
.msg-bubble.mine { align-self: flex-end; background: color-mix(in srgb, var(--brand) 14%, white); border-bottom-right-radius: 4px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { margin-top: 3px; font-size: 11px; color: var(--muted); text-align: right; }
.msg-receipt { font-weight: 600; }
.msg-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.msg-reply textarea { flex: 1; resize: vertical; }
.msg-reply .btn-primary { flex-shrink: 0; }

.leave-docs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; width: 100%; }
.doc-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef3fb; color: var(--brand); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.doc-chip .material-symbols-rounded { font-size: 18px; }
.doc-chip:hover { background: color-mix(in srgb, var(--brand) 16%, white); }

/* ----------------------------------------------------- modal / popup */
.modal-open { overflow: hidden; }
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(15,23,38,.55); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; animation: fadeIn .15s ease; }
.modal-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(1000px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: popIn .18s cubic-bezier(.2,.8,.2,1); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.modal-head h3 .material-symbols-rounded { color: var(--brand); }
.modal-close { margin-left: auto; border: none; background: #eef1f6; color: var(--ink); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.modal-close:hover { background: #e0e4ea; color: var(--brand); }
.modal-body { padding: 16px 20px 22px; overflow-y: auto; }
.modal-body .report-bar { margin-top: 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------- document rows */
.doc-edit { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.doc-edit select { flex: 0 0 160px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font); font-size: 14px; background: #fff; outline: none; }
.doc-edit input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font); font-size: 14px; outline: none; }
.doc-edit input:focus, .doc-edit select:focus { border-color: var(--brand); }

/* ----------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .track-bar { top: 64px; }
  .chart-box { height: 240px; }
  .doc-edit { flex-wrap: wrap; }
  .doc-edit select { flex: 1 1 120px; }
  .kid-actions { grid-template-columns: repeat(2, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
  .fld.chk { margin-top: 4px; }
  .adm-row { flex-wrap: wrap; }
  /* Stop the action buttons from crushing the content column (min-width:0 lets it shrink to ~0,
     which squeezes voice notes / transcripts and overflows the buttons). Drop them to their own row. */
  .adm-row-actions { width: 100%; justify-content: flex-end; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; inset: 72px 0 auto 0; background: var(--card);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-130%); transition: transform .25s, opacity .25s; margin: 0;
    /* Hidden when collapsed. opacity/pointer-events (not just the transform) guarantee it can't
       peek at the top or be tapped when the menu is short — e.g. logged-out with just Login. */
    opacity: 0; pointer-events: none;
    /* many tabs + Login can exceed the screen → make the menu scrollable */
    max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Login stays a clear button at the end of the menu */
  .main-nav .nav-link.btn-primary-sm {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff; justify-content: center; margin-top: 6px;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  /* uniform full-width rows in the dropdown: Home · Notifications · My Dashboard · Logout */
  .main-nav .nav-link,
  .main-nav .bell,
  .main-nav .btn-ghost {
    width: 100%; box-sizing: border-box; height: auto;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    padding: 14px; border-radius: 10px; border: none; background: transparent;
    font-size: 16px; font-weight: 600; color: var(--muted); text-align: left;
  }
  .main-nav .bell-label { display: inline; }
  .main-nav .bell-badge { position: static; margin-left: auto; }
  .main-nav .nav-link.active { background: color-mix(in srgb, var(--brand) 12%, white); color: var(--brand); }
  .main-nav .nav-link .material-symbols-rounded,
  .main-nav .bell .material-symbols-rounded,
  .main-nav .btn-ghost .material-symbols-rounded { font-size: 22px; }
  .block-imgtext { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* Phones — parents use the app only on mobile, so tune the small-screen layout. */
@media (max-width: 520px) {
  .container { width: 100%; padding-inline: 16px; }
  .header-inner { height: 60px; gap: 8px; }
  .brand-badge { width: 38px; height: 38px; font-size: 16px; border-radius: 11px; }
  .brand-name { font-size: 17px; }
  .brand-tagline { display: none; }
  .nav-toggle { width: 42px; height: 42px; }
  .main-nav { inset: 60px 0 auto 0; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); }

  /* vertical wash on phones: text readable up top, painted kids peek along the bottom */
  .hero::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 86%, transparent) 0%,
      color-mix(in srgb, var(--brand) 58%, transparent) 46%,
      color-mix(in srgb, var(--brand) 12%, transparent) 100%);
  }
  .hero-inner { padding: 34px 0 110px; }
  .dash { padding: 20px 0 40px; }
  .dash-head { margin-bottom: 16px; }

  /* parent quick actions → tidy 2-up grid of full-width buttons */
  .parent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .parent-actions .btn-soft { width: 100%; justify-content: center; }

  /* minmax(0,1fr) (not bare 1fr) so a long label like "Pending leaves" can't push the grid wider
     than the screen and shift/cut the whole page. */
  .sum-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sum-card { padding: 13px; gap: 10px; min-width: 0; }
  .sum-card .sum-ic, .sum-card .quick-ic { flex: 0 0 auto; }
  .sum-card > div, .stat-card > div { min-width: 0; }
  .sum-val, .sum-label, .stat-val, .stat-label { overflow: hidden; text-overflow: ellipsis; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { min-width: 0; }

  .kid-card { padding: 16px; }
  .chart-grid { grid-template-columns: 1fr; gap: 14px; }
  .chart-card { padding: 14px 14px 18px; }
  .chart-box { height: 230px; }
  .dash-sec { font-size: 16px; margin-top: 22px; }

  .acct-summary { grid-template-columns: repeat(2, 1fr); }
  .auth-wrap { padding: 28px 0 40px; }
  .modal-overlay { padding: 3vh 10px; }
}

/* ----------------------------------------------------- forms / import */
.form-error { background: #fdecec; border: 1px solid #f5c2c2; color: #c62828; padding: 10px 13px; border-radius: 10px; font-size: 14px; margin: 6px 0; }

.imp-grp { margin-bottom: 22px; }
.imp-grp-h { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.imp-mod { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: #fff; }
.imp-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: color-mix(in srgb, var(--brand) 14%, white); color: var(--brand); }
.imp-body { flex: 1 1 auto; min-width: 0; }
.imp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imp-head a { color: var(--ink); text-decoration: none; font-size: 16px; }
.imp-head a:hover { color: var(--brand); }
.imp-group { font-size: 12px; color: var(--muted); background: #f3f6fb; padding: 2px 8px; border-radius: 20px; }
.imp-desc { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.imp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.imp-out { margin-top: 8px; }
.imp-result { display: flex; gap: 8px; flex-wrap: wrap; }
.imp-chip { font-size: 13px; padding: 4px 10px; border-radius: 20px; background: #f3f6fb; color: var(--muted); }
.imp-chip b { color: var(--ink); }
.imp-chip.ok { background: #e7f6ec; color: #1b7a3d; } .imp-chip.ok b { color: #1b7a3d; }
.imp-chip.bad { background: #fdecec; color: #c62828; } .imp-chip.bad b { color: #c62828; }
.imp-errors { margin-top: 10px; border: 1px solid #f5c2c2; border-radius: 10px; padding: 8px 12px; background: #fff7f7; }
.imp-errors summary { cursor: pointer; font-weight: 700; color: #c62828; }
.imp-errors ul { margin: 8px 0 2px; padding-left: 18px; font-size: 13.5px; color: var(--ink); }
.imp-errors li { margin: 2px 0; }
.spin { animation: spin 1s linear infinite; vertical-align: -5px; margin-right: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- student account / store */
.acct-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.acct-stat { background: #f3f6fb; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.acct-stat span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.acct-stat b { font-size: 16px; }
.acct-stat.big { background: color-mix(in srgb, var(--brand) 10%, white); border-color: color-mix(in srgb, var(--brand) 25%, white); }
.acct-stat.big b { font-size: 22px; color: var(--brand); }
.acct-block { margin-bottom: 18px; }
.acct-block-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.acct-block-h h4 { margin: 0; font-size: 15px; }
.acct-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.acct-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.acct-rows { margin-top: 8px; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.acct-row:first-child { border-top: none; }
.acct-row-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sale-sets { display: flex; flex-direction: column; gap: 6px; }
.sale-set { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sf-itemrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sf-itemrow select { flex: 1; }

/* ============================================================
   RBAC — per-module Permissions UI (kebab menu, modal, sliders)
   ============================================================ */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.icon-btn:hover { background: #eef3fb; color: var(--brand); }
.admin-kebab { margin-left: auto; }   /* push to the right of the admin-head */

/* popover menu (reuses .notif-panel positioning/look) */
.admin-menu { width: min(240px, 92vw); padding: 6px; }
.admin-menu .menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink, #1a2230); cursor: pointer; text-align: left;
}
.admin-menu .menu-item:hover { background: #eef3fb; color: var(--brand); }
.admin-menu .menu-item .material-symbols-rounded { font-size: 20px; color: var(--muted); }
.admin-menu .menu-item:hover .material-symbols-rounded { color: var(--brand); }

/* modal footer */
.modal-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--line);
}

/* permissions modal */
.perm-modal { width: min(720px, 96vw); }
.perm-roles { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.perm-role { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.perm-role-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer; user-select: none; font-weight: 700;
}
.perm-role-head:hover { background: #f7f9fc; }
.perm-role-name { display: flex; align-items: center; gap: 8px; }
.perm-role .chev { transition: transform .2s; color: var(--muted); }
.perm-role.open .chev { transform: rotate(180deg); }
.perm-role-body { display: none; padding: 6px 14px 14px; border-top: 1px solid var(--line); }
.perm-role.open .perm-role-body { display: block; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.perm-row + .perm-row { border-top: 1px dashed var(--line); }
.perm-act { width: 84px; font-weight: 700; font-size: 14px; flex-shrink: 0; }

/* segmented slider: None / Owner / Manager / Admin */
.seg {
  display: flex; flex: 1; background: #eef1f6; border-radius: 999px; padding: 3px; gap: 2px;
}
.seg-opt {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 7px 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg-opt:hover:not(.on):not(:disabled) { color: var(--brand); }
.seg-opt.on { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(21, 101, 192, .35); }
.seg-opt:disabled { cursor: default; opacity: .7; }

/* inline "Reports to" picker on staff rows */
.mgr-pick { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.mgr-pick > span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.mgr-pick select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }

/* ============================================================
   Searchable select with inline edit + create (reusable)
   ============================================================ */
.ss-mount { position: relative; }
.ss-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  font-size: 14.5px; cursor: pointer; text-align: left;
}
.ss-trigger:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.ss-trigger .material-symbols-rounded { color: var(--muted); font-size: 20px; }
.ss-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-val.ss-ph { color: var(--muted); }

.ss-panel {
  position: fixed; z-index: 360; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: 320px; min-width: 220px;
}
.ss-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ss-search .material-symbols-rounded { color: var(--muted); font-size: 20px; }
.ss-search input { flex: 1; border: 0; outline: none; font-size: 14px; background: transparent; }
.ss-list { overflow-y: auto; padding: 6px; }
.ss-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.ss-item:hover { background: #eef3fb; }
.ss-item.on { background: color-mix(in srgb, var(--brand) 12%, white); }
.ss-item-main { flex: 1; min-width: 0; }
.ss-item-label { font-weight: 600; font-size: 14px; }
.ss-item-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-edit { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; flex-shrink: 0; }
.ss-edit:hover { background: #e3ebf7; color: var(--brand); }
.ss-edit .material-symbols-rounded { font-size: 18px; }
.ss-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13.5px; }
.ss-create {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; border: 0;
  border-top: 1px solid var(--line); background: #f7f9fc; color: var(--brand); font-weight: 700;
  font-size: 14px; cursor: pointer;
}
.ss-create:hover { background: #eef3fb; }
.ss-create .material-symbols-rounded { font-size: 20px; }

/* ============================================================
   Generic product landing page (root, no school context)
   ============================================================ */
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hero-cta .btn-primary, .hero-cta .btn-soft { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 15px; }

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 8px;
}
.feature-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  transition: transform .15s, box-shadow .15s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.feature-ic {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; margin-bottom: 14px;
}
.feature-ic .material-symbols-rounded { font-size: 28px; }
.feature-card h3 { margin: 0 0 6px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.about-block { max-width: 820px; }
.about-block p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.about-cta { margin-top: 8px; }
.about-cta .btn-primary { display: inline-flex; align-items: center; gap: 8px; }

/* Rich landing hero: an inline (animated) illustration layer + a left-weighted scrim for legibility */
/* Full-bleed landing banner image (its own text/CTAs are baked in — no overlay). */
.hero-banner { width: 100%; max-width: 100%; overflow: hidden; line-height: 0; background: #eaf3ff; }
.hero-banner picture { display: block; width: 100%; }
.hero-banner img { width: 100%; max-width: 100%; height: auto; display: block; }
.hero.hero-rich { min-height: 480px; display: flex; align-items: center; }
.hero.hero-rich::before, .hero.hero-rich::after { content: none; }   /* replaced by explicit layers */
.hero-art { position: absolute; inset: 0; z-index: 0; }
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(10,38,78,0.82) 0%, rgba(10,38,78,0.58) 36%, rgba(10,38,78,0.20) 66%, rgba(10,38,78,0.03) 100%);
}
.hero.hero-rich .hero-inner { position: relative; z-index: 2; padding: 56px 0; width: 100%; }
.hero.hero-rich p { max-width: 440px; }   /* keep the tagline clear of the kids illustration */
@media (max-width: 760px) {
  .hero.hero-rich { min-height: 420px; }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,38,78,0.78) 0%, rgba(10,38,78,0.55) 55%, rgba(10,38,78,0.30) 100%); }
}

/* Cute cartoon kids overlaid on the landing hero (CC0 illustration, foreground-right) */
/* Desktop: kids stand to the LEFT of the (centred) school, in the lower-left, below the buttons. */
.hero-kids {
  position: absolute; left: 1%; right: auto; bottom: 3%; height: 36%; max-width: 34%;
  object-fit: contain; object-position: bottom left; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(11,31,68,0.26));
}
/* Narrower screens: place the kids centred along the bottom of the hero so they still appear
   without colliding with the heading/buttons above. */
@media (max-width: 900px) {
  .hero-kids {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 2%; height: 30%; max-width: 78%; object-position: bottom center;
  }
}

/* ===================== Reusable tabbed DETAIL page ===================== */
.detail-page .dhead-top { margin-bottom: 10px; }
.detail-page .dhead {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #e6eaf0; border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.detail-page .dhead-ava {
  width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
  background: var(--brand, #1e88e5); background-size: cover; background-position: center;
}
.detail-page .dhead-main { flex: 1 1 auto; min-width: 0; }
.detail-page .dhead-main h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.detail-page .dhead-sub { color: var(--muted, #667085); margin-top: 4px; font-size: 14px; }
.detail-page .dhead-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.detail-page .dbadge {
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: #eef2f7; color: #475467;
}
.detail-page .dbadge.ok { background: #e7f6ec; color: #1b7f3b; }
.detail-page .dbadge.warn { background: #fdf2e3; color: #b25e09; }
.detail-page .dbadge.bad { background: #fdecec; color: #c0392b; }
.detail-page .dbadge.brand { background: color-mix(in srgb, var(--brand, #1e88e5) 14%, #fff); color: var(--brand, #1e88e5); }
.detail-page .dhead-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.detail-page .dtabs {
  display: flex; gap: 4px; margin: 18px 0 0; border-bottom: 1px solid #e6eaf0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.detail-page .dtab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: none; border: none; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--muted, #667085); padding: 11px 14px; border-bottom: 2.5px solid transparent;
}
.detail-page .dtab .material-symbols-rounded { font-size: 19px; }
.detail-page .dtab:hover { color: #344054; }
.detail-page .dtab.is-active { color: var(--brand, #1e88e5); border-bottom-color: var(--brand, #1e88e5); }

.detail-page .dpanel { display: none; padding-top: 18px; }
.detail-page .dpanel.is-active { display: block; }
.detail-page .dgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 760px) { .detail-page .dgrid { grid-template-columns: 1fr; } }

.detail-page .dcard {
  background: #fff; border: 1px solid #e6eaf0; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; display: flex; flex-direction: column;
}
.detail-page .dcard-h {
  display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid #f0f2f5;
}
.detail-page .dcard-h .material-symbols-rounded { font-size: 20px; color: var(--brand, #1e88e5); }
.detail-page .dcard-h h3 { margin: 0; font-size: 15px; flex: 1 1 auto; }
.detail-page .dcard-act { flex: 0 0 auto; }
.detail-page .dcard-b { padding: 14px 16px; flex: 1 1 auto; }

.detail-page .dinfo { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.detail-page .dinfo > div { min-width: 0; }
.detail-page .dinfo dt { font-size: 12px; color: var(--muted, #667085); margin: 0 0 2px; }
.detail-page .dinfo dd { margin: 0; font-size: 14px; font-weight: 600; word-break: break-word; }
@media (max-width: 460px) { .detail-page .dinfo { grid-template-columns: 1fr; } }

/* Mobile: stack the detail header so a full action bar (stage + print + edit/approve/reject)
   wraps onto its own row instead of overflowing horizontally. */
@media (max-width: 640px) {
  .detail-page .dhead { flex-wrap: wrap; }
  .detail-page .dhead-actions { flex: 1 1 100%; flex-wrap: wrap; margin-top: 4px; }
  .detail-page .dhead-actions .btn-soft,
  .detail-page .dhead-actions .btn-primary,
  .detail-page .dhead-actions .btn-danger { flex: 1 1 auto; justify-content: center; }
}

/* Clickable list rows that open a detail page (avatar/icon + main area). */
.adm-row-main.clickable, .adm-ic.clickable, .kid-ava.clickable { cursor: pointer; }
.adm-row-main.clickable:hover .adm-row-title { color: var(--brand); }

/* ===================== Server-paged list pager ===================== */
.pager {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid #e6eaf0;
}
.pager-info { color: var(--muted, #667085); font-size: 13px; }
.pager-btns { display: flex; align-items: center; gap: 8px; }
.pager-page { font-size: 13px; font-weight: 600; color: #344054; min-width: 84px; text-align: center; }
.pager .icon-btn { border: 1px solid #d8dee9; border-radius: 9px; background: #fff; }
.pager .icon-btn:disabled { opacity: .4; cursor: default; }
.pager .icon-btn:not(:disabled):hover { border-color: var(--brand, #1e88e5); color: var(--brand, #1e88e5); }

/* ===================== Lifecycle stage pill + menu ===================== */
.dhead-stage { display: inline-flex; }
.stage-pill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  font-weight: 600; font-size: 13.5px; color: #344054;
  border: 1px solid #d8dee9; background: #fff; border-radius: 999px; padding: 7px 13px;
}
.stage-pill.is-readonly { cursor: default; }
.stage-pill:not(.is-readonly):hover { border-color: var(--brand, #1e88e5); }
.stage-pill .material-symbols-rounded { font-size: 18px; color: var(--muted, #667085); }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.stage-menu {
  position: fixed; z-index: 1200; background: #fff; border: 1px solid #e6eaf0; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(16,24,40,.15); padding: 6px; min-width: 210px; max-height: 340px; overflow: auto;
}
.stage-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; font: inherit;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; color: #344054;
}
.stage-opt:hover { background: #f3f7fd; }
.stage-opt .tick { margin-left: auto; color: var(--brand, #1e88e5); }
.stage-opt.stage-manage { border-top: 1px solid #f0f2f5; color: var(--muted, #667085); margin-top: 4px; }
.stage-empty { padding: 9px 10px; color: var(--muted, #667085); font-size: 13px; }
.stage-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.stage-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.stage-sw.on { border-color: #111827; }
.stage-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: #475467; }

/* ---- Academic calendar (month grid) ---- */
.cal-grid { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.cal-week-head { display: grid; grid-template-columns: repeat(7, 1fr); background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.cal-wd { padding: 8px 4px; text-align: center; font-size: 12px; font-weight: 700; color: #64748b; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 92px; border-right: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.cal-empty { background: #fafbfc; cursor: default; }
.cal-today { background: #eff6ff; }
.cal-daynum { font-size: 12px; font-weight: 700; color: #334155; align-self: flex-start; }
.cal-today .cal-daynum { background: #2563eb; color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.cal-ev { font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 4px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { filter: brightness(0.96); }
@media (max-width: 640px) {
  .cal-cell { min-height: 64px; }
  .cal-ev { font-size: 10px; }
}

/* ---- Tickets: status stepper + timeline ---- */
.tk-head { margin: 4px 0 14px; }
.tk-head-top { display: flex; align-items: center; gap: 8px; color: #475467; font-size: 14px; }
.tk-subj { margin: 6px 0 4px; font-size: 19px; }
.tk-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tk-pill.sm { font-size: 11px; padding: 1px 8px; }
.tk-steps { display: flex; align-items: flex-start; }
.tk-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; width: 84px; text-align: center; }
.tk-bar { height: 3px; flex: 1; margin-top: 13px; border-radius: 2px; min-width: 12px; }
.tk-dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #cbd5e1; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; }
.tk-dot .material-symbols-rounded { font-size: 17px; }
.tk-dot-pulse { width: 9px; height: 9px; border-radius: 50%; }
.tk-step-lbl { font-size: 11.5px; color: #64748b; line-height: 1.25; }
@media (max-width: 560px) { .tk-step { width: 60px; } .tk-step-lbl { font-size: 10px; } }

.tk-tl { display: flex; flex-direction: column; gap: 0; }
.tk-ev { display: flex; gap: 12px; position: relative; padding: 0 0 16px 0; }
.tk-ev::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: #e5e7eb; }
.tk-ev:last-child::before { display: none; }
.tk-ev-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #eef2ff; color: #4338ca; display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 1; }
.tk-ev-body { flex: 1; padding-top: 3px; }
.tk-ev-text { font-size: 14px; }
.tk-ev-time { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.tk-note { background: #f8fafc; border: 1px solid #eef1f4; border-radius: 8px; padding: 7px 10px; font-size: 13px; margin: 5px 0; white-space: pre-wrap; }
.tk-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; }
.tk-reply textarea { flex: 1; }
.tk-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .tk-controls { grid-template-columns: 1fr; } }

/* ---- Inventory ---- */
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .grid3 { grid-template-columns: 1fr; } }
.tbl .num, .tbl th.num { text-align: right; white-space: nowrap; }
.inv-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 4px 0 18px; }
.inv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: none; background: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.inv-tab .material-symbols-rounded { font-size: 19px; }
.inv-tab:hover { color: var(--ink); }
.inv-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.inv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.inv-toolbar .search-box, .inv-toolbar > .inp { flex: 0 1 auto; }
.inv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.inv-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.inv-date .inp { width: auto; }
.inw-items input.inp, .inw-items select.inp { width: 100%; box-sizing: border-box; }
.inw-items td { padding: 8px 10px; vertical-align: middle; }
.sup-addr { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fafbfc; }
.sup-addr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.inv-form .dcard { margin-bottom: 16px; }
/* Selectable option cards (radio group) — a clean pick-one control. */
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.opt-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
/* width/height reset defeats the generic `.fld input { width:100% }` rule bleeding onto the radio. */
.opt-card input[type="radio"] { width: 18px; height: 18px; min-width: 18px; margin: 1px 0 0; padding: 0; border: 0; flex: 0 0 auto; accent-color: var(--brand); cursor: pointer; }
.opt-card-ic { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 10%, white); color: var(--brand); }
.opt-card-ic .material-symbols-rounded { font-size: 22px; }
.opt-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-card-txt b { font-size: 14.5px; color: var(--ink); }
.opt-card-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.opt-card:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, white); box-shadow: 0 0 0 3px var(--ring); }
.opt-card:has(input:checked) .opt-card-ic { background: var(--brand); color: #fff; }
@media (max-width: 560px) { .opt-cards { grid-template-columns: 1fr; } }

/* Live "online" indicator: a pulsing green dot + pill, shown when a bus/route has a running trip. */
.live-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #137333; background: #e6f4ea; vertical-align: middle; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34a853; box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.6); animation: livePulse 1.6s infinite; }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 168, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 168, 83, 0); }
}

/* ---- Parent Class Diary (homework, day-by-day) ---- */
.diary-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.diary-tabs::-webkit-scrollbar { display: none; }
.diary-tab { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 15px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.diary-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.diary-week { display: flex; align-items: center; gap: 4px; margin: 4px 0 6px; }
.diary-week-label { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }
.diary-nav { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 4px; display: inline-flex; }
.diary-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 16px; }
.diary-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 12px; cursor: pointer; }
.diary-day .dd-wd { font-size: 11px; font-weight: 600; color: var(--muted); }
.diary-day .dd-num { font-size: 15px; font-weight: 700; color: var(--text, #1f2937); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.diary-day .dd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.diary-day .dd-dot.hidden { background: transparent; }
.diary-day.on .dd-num { background: var(--brand); color: #fff; }
.diary-day.on .dd-wd { color: var(--brand); }
.diary-date-head { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin: 2px 0 12px; }
.diary-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.diary-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.diary-subj { background: #e6f4f1; color: #0e7c66; font-weight: 700; font-size: 12px; padding: 4px 11px; border-radius: 8px; }
.diary-class { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.diary-inner { border: 1px solid color-mix(in srgb, #0e7c66 30%, var(--line)); border-radius: 12px; padding: 12px 13px; }
.diary-inner-head { display: flex; align-items: center; justify-content: space-between; }
.diary-hw-label { color: #0e7c66; font-weight: 700; font-size: 14px; }
.diary-copy { border: 0; background: transparent; cursor: pointer; color: var(--muted); display: inline-flex; padding: 2px; }
.diary-copy:active { color: var(--brand); }
.diary-title { margin-top: 8px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.diary-text { margin-top: 4px; font-size: 14.5px; line-height: 1.5; }
.diary-meta { margin-top: 9px; font-size: 12px; color: var(--muted); }

/* ===================================================== parent: School Fee (app-style) ===== */
.fee2 { min-height: 100vh; background: #f4f5f7; padding-bottom: 90px; }
.fee2-head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 16px 16px 56px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.fee2-head-top { position: relative; width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: center; }
.fee2-back { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #fff; display: inline-flex; padding: 6px; }
.fee2-title { font-size: 19px; font-weight: 700; }
.fee2-year { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.18); color: #fff; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
/* Child picker chips on the header band — tap to load that child's fees. */
.fee2-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fee2-chip { display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer; padding: 4px 13px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-weight: 600; font-size: 13.5px; }
.fee2-chip.on { background: #fff; color: var(--brand); }
.fee2-chip img, .fee2-chip-ini { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; background: rgba(255,255,255,.28); color: #fff; font-weight: 800; font-size: 12px; }
.fee2-chip.on .fee2-chip-ini { background: var(--brand); color: #fff; }
/* Headline balance card overlaps the header band, like the mock. */
.fee2-balance { margin: -44px 16px 0; background: #fff; border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 10px 26px rgba(20,30,60,.12); }
.fee2-bal-top { display: flex; align-items: center; justify-content: space-between; }
.fee2-bal-lbl { font-size: 15px; font-weight: 600; color: #2b3240; }
.fee2-bal-cls { font-size: 14px; color: var(--muted); font-weight: 600; }
.fee2-bal-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 6px; gap: 10px; }
.fee2-bal-amt { font-size: 24px; font-weight: 800; color: #1f2530; line-height: 1.1; }
.fee2-bal-of { font-size: 14px; font-weight: 600; color: var(--muted); }
.fee2-bal-pct { font-size: 14px; font-weight: 700; color: #16a34a; white-space: nowrap; }
.fee2-bal-bar { margin-top: 12px; height: 7px; border-radius: 999px; background: #eceef2; overflow: hidden; }
.fee2-bal-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); }

.fee2-body { padding: 18px 16px 0; }
.fee2-sec { font-size: 16px; font-weight: 700; color: #1f2530; margin: 22px 2px 12px; }
.fee2-accts { display: grid; gap: 14px; }
.fee2-acct { background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 4px 16px rgba(20,30,60,.06); }
.fee2-acct-name { color: var(--brand); font-size: 16px; font-weight: 700; }
.fee2-acct-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fee2-acct-amt { font-size: 20px; font-weight: 800; color: #1f2530; margin-top: 8px; }
.fee2-acct-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.fee2-due { font-size: 13px; color: var(--muted); }
.fee2-due b { color: #e23744; font-weight: 700; }
.fee2-due.ok { color: #16a34a; font-weight: 600; }
.fee2-pay { border: 0; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 35%, transparent); }
.fee2-pay:active { transform: translateY(1px); }
.fee2-paid { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-weight: 700; font-size: 14px; }
.fee2-paid .material-symbols-rounded { font-size: 19px; }

.fee2-more { background: #fff; border-radius: 16px; box-shadow: 0 4px 16px rgba(20,30,60,.06); overflow: hidden; }
.fee2-more-row { display: flex; align-items: center; gap: 14px; padding: 16px; color: #1f2530; border-bottom: 1px solid #eef0f3; }
.fee2-more-row:last-child { border-bottom: 0; }
.fee2-more-ic { color: var(--muted); font-size: 23px; }
.fee2-more-lbl { flex: 1; font-size: 15.5px; font-weight: 600; }
.fee2-more-go { color: #c2c7d0; font-size: 22px; }
.fee2-empty { background: #fff; border-radius: 16px; padding: 28px 16px; text-align: center; color: var(--muted); box-shadow: 0 4px 16px rgba(20,30,60,.06); }
.fee2-empty .material-symbols-rounded { font-size: 38px; color: #16a34a; }

/* ============================================================
   PREMIUM PUBLIC POLISH
   A cohesive elevation pass over the public-facing surfaces
   (header, hero, CTAs, cards, footer). Appended last so it wins.
   ============================================================ */
:root {
  --shadow-soft: 0 2px 8px rgba(20,40,80,.05);
  --shadow-premium: 0 18px 50px -12px rgba(17,45,95,.30);
  --ring: color-mix(in srgb, var(--brand) 16%, transparent);
  --display: "Sora", "Poppins", system-ui, sans-serif;
  /* Premium body face — neutral, highly legible; pairs with the Sora display headings. */
  --font: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { font-family: var(--font); letter-spacing: -.1px; }

/* ---- Display typography: distinctive headings = the #1 premium signal ---- */
.brand-name,
.hero h1, .hero .pill,
.apply-hero-inner h1,
.section-head h2,
.block-hero h2, .tab-page > h1,
.quick-label {
  font-family: var(--display);
}
.hero h1, .apply-hero-inner h1 { font-weight: 800; letter-spacing: -1.4px; line-height: 1.04; }
.section-head h2 { font-weight: 800; letter-spacing: -.6px; }
.brand-name { font-weight: 800; letter-spacing: -.5px; font-size: 20px; }

/* ---- Glass header: translucent, blurred, hairline shadow ---- */
.site-header {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 24px -18px rgba(20,40,80,.5);
}
.brand-badge { border-radius: 14px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.brand-name {
  background: linear-gradient(120deg, var(--ink), color-mix(in srgb, var(--brand) 55%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-link { transition: background .2s, color .2s, transform .2s; }
.nav-link:hover { transform: translateY(-1px); }

/* "Apply" button in the top nav (every public page) — soft brand pill, distinct from Login */
.nav-apply {
  color: var(--brand) !important;
  background: color-mix(in srgb, var(--brand) 10%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
  font-weight: 700;
}
.nav-apply:hover { background: color-mix(in srgb, var(--brand) 16%, white); transform: translateY(-1px); }
.nav-apply .material-symbols-rounded { font-size: 19px; }

/* CMS hero block (e.g. About Us): keep sub/body text legible on the brand overlay.
   Fixes the global ".block p { color: muted }" bleeding dark text onto the blue. */
.block-hero { color: #fff; }
.block-hero h2 { color: #fff; }
.block-hero p { color: rgba(255,255,255,.94) !important; text-shadow: 0 1px 6px rgba(8,28,60,.35); }
.block-hero p:first-of-type { color: #fff !important; font-weight: 600; opacity: 1; }

/* ---- Hero: deeper, layered, cinematic ---- */
.hero { border-radius: 0 0 34px 34px; box-shadow: 0 30px 60px -34px rgba(13,40,80,.55); }
/* richer diagonal wash + a soft top-light vignette for depth */
.hero::after {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.22), transparent 46%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--brand-dark) 90%, transparent) 0%,
      color-mix(in srgb, var(--brand) 66%, transparent) 34%,
      color-mix(in srgb, var(--brand) 22%, transparent) 62%,
      transparent 86%);
}
/* faint grain/sheen layer for a premium, non-flat surface */
.hero-inner::before {
  content: ""; position: absolute; inset: -64px 0 auto auto; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none; z-index: -1;
}
.hero-inner { padding: 84px 0 92px; }
.hero h1 { letter-spacing: -1.4px; font-weight: 800; }
/* crisp bottom scrim so white text + CTAs sit cleanly over busy photos */
.hero::after { background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.22), transparent 46%),
    linear-gradient(180deg, transparent 40%, rgba(8,28,60,.45) 100%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--brand-dark) 90%, transparent) 0%,
      color-mix(in srgb, var(--brand) 66%, transparent) 34%,
      color-mix(in srgb, var(--brand) 22%, transparent) 62%,
      transparent 86%); }
.hero .pill {
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34);
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.3);
}

/* ---- Premium buttons: depth + a subtle shine sweep on hover ---- */
.btn-primary, .btn-soft, .btn-ghost { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .2s; }
.btn-primary {
  position: relative; overflow: hidden;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 75%, transparent), 0 2px 6px rgba(13,40,80,.18);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--brand) 80%, transparent), 0 4px 10px rgba(13,40,80,.2); }
.btn-primary:hover::after { left: 130%; }

/* Hero CTAs read as the premium anchor of the page */
.hero-cta .btn-primary { padding: 14px 26px; font-size: 15.5px; border-radius: 14px; }
.hero-cta .btn-soft {
  padding: 14px 24px; font-size: 15.5px; border-radius: 14px;
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.35);
}
.hero-cta .btn-soft:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }

/* Refined Login pill in the header */
.btn-primary-sm { border-radius: 12px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent); transition: transform .18s, box-shadow .25s; }
.btn-primary-sm:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--brand) 78%, transparent); }

/* ---- Section heads: an accent eyebrow rule ---- */
.section-head h2 { position: relative; padding-left: 16px; }
.section-head h2::before {
  content: ""; position: absolute; left: 0; top: 8%; height: 84%; width: 5px; border-radius: 3px;
  background: linear-gradient(var(--brand), var(--accent));
}

/* ---- Quick tiles: glassier card, gradient icon chip, lively lift ---- */
.quick-tile {
  border-radius: 20px; padding: 24px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: var(--shadow-soft);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .2s;
}
.quick-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-premium); }
.quick-ic { box-shadow: 0 12px 24px -10px rgba(20,40,80,.45); position: relative; }
.quick-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 55%); }

/* ---- Activity cards: deeper hover, image zoom ---- */
.activity-card { border-radius: 20px; }
.activity-card .cover, .cover-wrap { overflow: hidden; }
.activity-card .cover { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.activity-card:hover { box-shadow: var(--shadow-premium); }
.activity-card:hover .cover { transform: scale(1.06); }

/* ---- Footer: richer gradient + accent top line ---- */
.site-footer {
  background: linear-gradient(180deg, #111b2c, #0c1320);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), var(--accent)) 1;
}
.socials a { transition: background .2s, transform .2s; }
.socials a:hover { background: color-mix(in srgb, var(--brand) 60%, transparent); transform: translateY(-2px); }

/* ---- Admissions CTA card (empty tab fallback) — premium framed panel ---- */
.block .btn-primary { padding: 13px 24px; border-radius: 13px; }

/* ---- Public Apply page — branded hero band + floating card ---- */
.apply-hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  border-radius: 0 0 34px 34px; box-shadow: 0 30px 60px -34px rgba(13,40,80,.55);
}
.apply-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.20), transparent 50%);
}
.apply-hero-inner { position: relative; z-index: 1; padding: 56px 0 92px; text-align: center; }
.apply-hero-inner .pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  backdrop-filter: blur(6px);
}
.apply-hero-inner h1 { font-size: clamp(28px, 4.4vw, 44px); margin: 0 0 12px; font-weight: 800; letter-spacing: -.8px; text-shadow: 0 2px 12px rgba(13,40,80,.3); }
.apply-hero-inner p { max-width: 560px; margin: 0 auto; font-size: clamp(15px, 2vw, 18px); opacity: .96; }
.apply-card {
  max-width: 600px; margin: -56px auto 48px; position: relative; z-index: 2;
}
.apply-card .dcard {
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: var(--shadow-premium);
}
.apply-card .dcard-b { padding: 26px 26px 28px; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .activity-card .cover { transition: none; }
}

/* ============================================================
   Fee collection workspace (enterprise) — .fc2-*
   ============================================================ */
.fc2-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fc2-av { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  letter-spacing: .5px; font-family: var(--display); }
.fc2-av.lg { width: 54px; height: 54px; border-radius: 15px; font-size: 18px; }

/* Search */
.fc2-search { position: relative; margin-bottom: 12px; }
.fc2-search-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.fc2-search input { width: 100%; padding: 15px 16px 15px 46px; border: 1px solid var(--line); border-radius: 14px;
  font-size: 15.5px; font-family: var(--font); outline: none; background: var(--card); box-shadow: var(--shadow-soft); transition: border-color .15s, box-shadow .15s; }
.fc2-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.fc2-results { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fc2-res { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-family: var(--font);
  transition: border-color .12s, box-shadow .12s, transform .05s; }
.fc2-res:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-soft); }
.fc2-res:active { transform: translateY(1px); }
.fc2-res-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fc2-res-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.fc2-res-sub { font-size: 12.5px; color: var(--muted); }
.fc2-res-go { color: var(--muted); }
.fc2-nores { color: var(--muted); font-size: 14px; padding: 10px 4px; }

/* Dues card */
.fc2-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin: 14px 0; }
.fc2-stuhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fc2-stu-meta { min-width: 0; }
.fc2-stu-name { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); line-height: 1.2; }
.fc2-stu-sub { color: var(--muted); font-size: 13px; }
.fc2-stats { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.fc2-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; min-width: 96px; }
.fc2-stat span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fc2-stat b { font-family: var(--display); font-size: 17px; color: var(--ink); }
.fc2-stat.due { background: color-mix(in srgb, var(--brand) 7%, white); border-color: color-mix(in srgb, var(--brand) 22%, white); }
.fc2-stat.due b { color: var(--brand); }

.fc2-selbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; font-size: 13px; }
.fc2-selall { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); cursor: pointer; }
.fc2-selall input { width: 17px; height: 17px; accent-color: var(--brand); }

.fc2-sec { margin-top: 14px; }
.fc2-sec-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 8px; }
.fc2-sec-h .material-symbols-rounded { color: var(--brand); font-size: 20px; }
.fc2-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, white); padding: 2px 8px; border-radius: 999px; }
.fc2-tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.fc2-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.fc2-tbl th { text-align: left; padding: 10px 14px; background: #f3f6fb; color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--line); }
.fc2-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fc2-tbl tr:last-child td { border-bottom: none; }
.fc2-tbl tr.fc2-off td { opacity: .45; }
.fc2-cbc { width: 42px; text-align: center; }
.fc2-cbc input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.fc2-fee { font-weight: 600; color: var(--ink); }
.fc2-fee-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.fc2-part { font-size: 11.5px; color: #e65100; margin-top: 2px; }
.fc2-over { color: #c62828; font-weight: 600; }
.fc2-bal { font-weight: 700; color: var(--ink); white-space: nowrap; }
.fc2-amtc { white-space: nowrap; }
.fc2-cur { color: var(--muted); margin-right: 2px; }
.fc2-amtc input { width: 104px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-family: var(--font); outline: none; }
.fc2-amtc input:focus { border-color: var(--brand); }
.fc2-amtc input:disabled { background: #f1f3f7; color: var(--muted); }
.fc2-empty { display: flex; align-items: center; gap: 10px; color: #2e7d32; font-weight: 600; padding: 20px 4px 6px; }
.fc2-empty .material-symbols-rounded { color: #2e7d32; }

/* Payment bar */
.fc2-pay { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; margin: 0 0 16px; }
.fc2-pay-fields { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 12px; flex: 1; min-width: 280px; }
.fc2-pay-right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.fc2-pay-total { text-align: right; }
.fc2-pay-total span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.fc2-pay-total b { font-family: var(--display); font-size: 26px; color: var(--ink); line-height: 1.1; }
.fc2-collect { white-space: nowrap; }

/* Confirm modal */
.fc2-conf { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fc2-conf-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fc2-conf-row:last-child { border-bottom: none; }
.fc2-conf-row span { color: var(--muted); }
.fc2-conf-row b { color: var(--ink); }
.fc2-conf-tot { background: var(--bg); }
.fc2-conf-tot span, .fc2-conf-tot b { color: var(--ink); font-weight: 800; }
.fc2-conf-tot b { font-family: var(--display); font-size: 17px; }

/* Success banner + receipt document */
.fc2-done { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, #2e7d32 8%, white);
  border: 1px solid color-mix(in srgb, #2e7d32 26%, white); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; }
.fc2-done-ic { width: 44px; height: 44px; border-radius: 12px; background: #2e7d32; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.fc2-done-t { font-family: var(--display); font-weight: 800; font-size: 16px; color: #1b5e20; }
.fc2-done-s { font-size: 13px; color: var(--muted); }
.fc2-done.void { background: color-mix(in srgb, #c62828 7%, white); border-color: color-mix(in srgb, #c62828 26%, white); }
.fc2-done.void .fc2-done-ic { background: #c62828; }
.fc2-done.void .fc2-done-t { color: #b71c1c; }

.fc2-rcpt { position: relative; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; margin-bottom: 16px; overflow: hidden; }
.fc2-rcpt.void { opacity: .8; }
.fc2-rcpt-stamp { position: absolute; top: 26px; right: -34px; transform: rotate(28deg); background: #c62828; color: #fff;
  font-weight: 900; letter-spacing: 3px; font-size: 14px; padding: 5px 44px; box-shadow: var(--shadow-soft); }
.fc2-rcpt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 2px solid var(--line); }
.fc2-rcpt-school { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); }
.fc2-rcpt-addr { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fc2-rcpt-badge { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, white); border: 1px solid color-mix(in srgb, var(--brand) 22%, white);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.fc2-rcpt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 16px 0; }
.fc2-rcpt-meta span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.fc2-rcpt-meta b { font-size: 14.5px; color: var(--ink); }
.fc2-rcpt-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fc2-rcpt-tbl td { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.fc2-rcpt-tbl td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.fc2-rcpt-tot td { border-bottom: none; border-top: 2px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 16px; padding-top: 12px; }
.fc2-rcpt-foot { margin-top: 14px; font-size: 12px; color: var(--muted); }

.rd-status { display: inline-flex; align-items: center; }
.detail-page .dhead-actions { align-items: center; }

@media (max-width: 640px) {
  .fc2-stats { width: 100%; margin-left: 0; }
  .fc2-stat { flex: 1; min-width: 0; }
  .fc2-pay-fields { grid-template-columns: 1fr; }
  .fc2-pay-right { width: 100%; justify-content: space-between; }
  .fc2-rcpt-meta { grid-template-columns: 1fr 1fr; }
}

/* ---- WYSIWYG template editor (Documents & Print Templates) ---- */
.rte-modes { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 4px 0 10px; }
.rte-modes .rte-mode { background: #fff; border: 0; padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.rte-modes .rte-mode.active { background: var(--brand); color: #fff; }
.rte-modes .rte-mode:disabled { opacity: .45; cursor: not-allowed; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 6px; background: #f7f9fc; }
.rte-toolbar button { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 30px; height: 30px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--ink); font-size: 14px; }
.rte-toolbar button:hover { background: color-mix(in srgb, var(--brand) 10%, white); border-color: var(--brand); }
.rte-toolbar .material-symbols-rounded { font-size: 19px; }
.rte-toolbar .rte-sel { height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 13px; padding: 0 6px; cursor: pointer; color: var(--ink); }
.rte-sep { width: 1px; height: 20px; background: var(--line); margin: 0 3px; }
.rte-color { position: relative; width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; overflow: hidden; }
.rte-color:hover { border-color: var(--brand); }
.rte-color input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.rte-insert { position: relative; }
.rte-menu { position: absolute; z-index: 30; top: 34px; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 280px; overflow: auto; min-width: 240px; }
.rte-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: #fff; border: 0; border-radius: 7px; padding: 7px 10px; font-size: 13px; text-align: left; cursor: pointer; color: var(--ink); }
.rte-menu-item:hover { background: color-mix(in srgb, var(--brand) 10%, white); }
.rte-menu-item small { color: var(--muted); font-family: monospace; font-size: 11px; }
.rte { border: 1px solid var(--line); border-radius: 0 0 10px 10px; padding: 16px 18px; min-height: 280px; max-height: 52vh; overflow: auto; background: #fff; font-size: 14px; line-height: 1.7; color: var(--ink); outline: none; }
.rte:focus { border-color: var(--brand); }
.rte:empty:before { content: attr(data-ph); color: #9aa7b8; }
.rte p { margin: 0 0 10px; }
.rte h2 { font-size: 20px; margin: .35em 0; }
.rte h3 { font-size: 16px; margin: .35em 0; }
.rte hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.ph-pill { display: inline-block; background: #e8f0fe; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, white); border-radius: 6px; padding: 0 6px; margin: 0 1px; font-size: .86em; font-weight: 600; white-space: nowrap; line-height: 1.5; user-select: none; }
/* light in-editor structure hints so certificate layouts read clearly while editing */
.rte .cert { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 14px; }
.rte .cert-sign { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; }
.rte .cert-sign .col { flex: 1; text-align: center; }
.rte .cert-sign .line { border-top: 1px solid #9aa7b8; margin-bottom: 4px; }
.rte .cert-sign .role { font-size: 12px; color: var(--muted); }

/* ===== Platform console shell (responsive) =====
   Desktop: fixed left sidebar + content. Mobile (<=768px): sidebar becomes an
   off-canvas drawer toggled by a hamburger in a slim top bar, over a backdrop.
   Layout lives here (not inline) so the media query below can override it. */
.pf-shell { display: flex; min-height: 100vh; background: #f1f5f9; position: relative; }
.pf-aside { width: 230px; flex: none; background: #0f172a; color: #cbd5e1; padding: 16px 10px;
  position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; }
.pf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-main { flex: 1; padding: 24px 28px; }
.pf-content { max-width: 1060px; }
.pf-topbar { display: none; }     /* desktop: no top bar */
.pf-backdrop { display: none; }   /* desktop: no backdrop */

@media (max-width: 768px) {
  .pf-aside { position: fixed; top: 0; left: 0; z-index: 60; width: 250px;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 2px 0 18px rgba(0,0,0,.45); }
  .pf-shell.pf-open .pf-aside { transform: translateX(0); }
  .pf-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40;
    background: #0f172a; color: #fff; padding: 10px 14px; }
  .pf-burger { background: none; border: 0; color: #fff; cursor: pointer; display: flex;
    align-items: center; padding: 4px; border-radius: 8px; }
  .pf-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; }
  .pf-shell:not(.pf-open) .pf-backdrop { display: none; }
  .pf-shell.pf-open .pf-backdrop { display: block; }
  .pf-main { padding: 16px 14px; }
}
