/* Daily Learning Tracker — custom styling layered on Bootstrap 5.
   Direction: a tidy school exercise-book. Fraunces serif for headings,
   Inter for data and forms, one indigo "ink" accent, green/grey status
   pills. The sign-in screens carry the signature: a ruled notebook page
   with the classic red margin line. */

:root{
  --ink:#211c2e;
  --ink-soft:#615b73;
  --paper:#f7f6fd;
  --surface:#ffffff;
  --line:#eae6f4;
  --line-strong:#ddd6ec;
  --primary:#7c3aed;
  --primary-press:#6d28d9;
  --primary-soft:#ede9fe;
  --ok:#15803d;
  --ok-bg:#e7f5ec;
  --neutral:#6f6a7d;
  --neutral-bg:#f0ecfa;
  --warn:#b45309;
  --warn-bg:#fdf1e3;
  /* category colours for stats, icons and accents */
  --c-blue:#2563eb;   --c-blue-bg:#e8effd;
  --c-violet:#7c3aed; --c-violet-bg:#f1ebfd;
  --c-teal:#0d9488;   --c-teal-bg:#dbf4f1;
  --c-amber:#d97706;  --c-amber-bg:#fdf1e3;
  --c-rose:#e11d48;   --c-rose-bg:#fde7ec;
  --c-green:#15803d;  --c-green-bg:#e7f5ec;
  --margin-red:#a855f7;          /* notebook margin rule, in theme purple */
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(20,30,60,.04), 0 10px 24px -22px rgba(20,30,60,.30);
  --shadow-md:0 1px 2px rgba(20,30,60,.05), 0 22px 48px -34px rgba(20,30,60,.45);
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
h1,h2,h3,.navbar-brand,.auth-brand,.auth-heading,.day-title{ font-family:var(--display); letter-spacing:.2px; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---- top bar ---- */
.app-nav{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px -8px rgba(20,30,60,.35);
  padding:1.05rem 0;
}
.app-nav::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, #6d28d9, #7c3aed, #9333ea, #a855f7, #c026d3);
}
.app-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.25rem; flex-wrap:wrap; }
.navbar-brand{ font-size:1.35rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.navbar-brand:hover{ text-decoration:none; }
.brand-mark{
  font-family:var(--body); font-weight:700; font-size:.95rem; letter-spacing:.02em;
  background:var(--primary); color:#fff; border-radius:11px;
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -5px rgba(124,58,237,.6);
}
/* primary menu — pill tabs (echoes the segmented toggle on the auth screens) */
.app-menu{ display:flex; align-items:center; gap:.25rem; background:var(--neutral-bg); border-radius:13px; padding:.32rem; }
.app-menu a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:10px; white-space:nowrap;
  color:var(--ink-soft); font-weight:500; font-size:1rem; line-height:1;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.app-menu a i{ font-size:1.05rem; }
.app-menu a:hover{ color:var(--ink); background:rgba(255,255,255,.7); text-decoration:none; }
.app-menu a.active{ color:var(--primary); background:var(--surface); box-shadow:0 2px 6px -2px rgba(20,30,60,.18); }
.app-menu a:nth-of-type(1) i{ color:var(--c-blue); }
.app-menu a:nth-of-type(2) i{ color:var(--c-violet); }
.app-menu a:nth-of-type(3) i{ color:var(--c-teal); }

/* icons inside buttons */
.btn i.bi{ vertical-align:-.08em; }
.btn i.bi + span{ margin-left:.4rem; }

/* user chip — initials avatar + name/role + log out */
.user-chip{ display:flex; align-items:center; gap:.65rem; }
.avatar{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary-press);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:.84rem;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.15; }
.user-name{ font-weight:600; font-size:.88rem; color:var(--ink); }
.user-role{ font-size:.73rem; color:var(--neutral); }

@media (max-width:760px){
  .app-nav .container{ gap:.6rem .9rem; }
  .app-menu{ order:3; width:100%; overflow-x:auto; }
  .user-chip{ order:2; margin-left:auto; }
}
@media (max-width:460px){
  .brand-text{ display:none; }
  .user-meta{ display:none; }
}

/* ---- buttons ---- */
.btn{ border-radius:10px; font-weight:600; transition:transform .04s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.btn:active{ transform:translateY(1px); }
.btn-lg{ border-radius:12px; }
.btn-primary{ background:var(--primary); border-color:var(--primary); box-shadow:0 8px 18px -10px rgba(124,58,237,.65); }
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-press); border-color:var(--primary-press); color:#fff; }
.btn-logout{ background:var(--neutral-bg); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn-logout:hover{ background:#e7e0f6; color:var(--ink); }

/* ---- forms ---- */
.form-label{ font-weight:600; font-size:.86rem; color:var(--ink); margin-bottom:.3rem; }
.form-text{ color:var(--ink-soft); }
.form-control, .form-select{
  border-radius:10px; border-color:var(--line-strong); padding:.55rem .8rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* Reserve space on the right so long options never run under the arrow.
   (The shared padding above otherwise clobbers Bootstrap's arrow gutter.) */
.form-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:2.5rem;
  background-position:right .85rem center;
}
.form-select-sm{ padding-right:2.1rem; background-position:right .65rem center; }
.form-control::placeholder{ color:#9aa3b2; }
.form-control:focus, .form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}

/* ---- layout ---- */
.app-main{ padding:2rem 0 3rem; flex:1 0 auto; }
.page-head{ margin-bottom:1.4rem; }
.page-head h1{ font-size:1.7rem; margin:0; }
.page-head h1::after{
  content:""; display:block; width:42px; height:3px; border-radius:3px;
  background:var(--primary); margin-top:.6rem;
}
.page-head .sub{ color:var(--ink-soft); margin-top:.55rem; }

/* ---- cards ---- */
.card-soft{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem 1.35rem; margin-bottom:1.1rem;
  box-shadow:var(--shadow-sm);
}
.card-soft h2{ font-size:1.05rem; margin:0 0 .85rem; }

/* ---- stat tiles ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; margin-bottom:1.1rem; }
.stat{
  display:flex; align-items:center; gap:.9rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem 1.15rem; transition:transform .15s ease, box-shadow .15s ease;
}
.stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.stat-ic{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:var(--c-bg, var(--primary-soft)); color:var(--c-fg, var(--primary));
}
.stat-text{ display:flex; flex-direction:column; min-width:0; }
.stat .num{ font-family:var(--display); font-size:1.85rem; font-weight:600; line-height:1; color:var(--c-fg, var(--ink)); }
.stat .lbl{ color:var(--ink-soft); font-size:.82rem; margin-top:.35rem; }
.stat.accent{ --c-fg:var(--primary);  --c-bg:var(--primary-soft); }
.stat.info{   --c-fg:var(--c-blue);   --c-bg:var(--c-blue-bg); }
.stat.violet{ --c-fg:var(--c-violet); --c-bg:var(--c-violet-bg); }
.stat.teal{   --c-fg:var(--c-teal);   --c-bg:var(--c-teal-bg); }
.stat.ok{     --c-fg:var(--c-green);  --c-bg:var(--c-green-bg); }
.stat.warn{   --c-fg:var(--warn);     --c-bg:var(--warn-bg); }
.stat.danger{ --c-fg:var(--c-rose);   --c-bg:var(--c-rose-bg); }

/* ---- period cards (daily entry) ---- */
.period{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.15rem; margin-bottom:1rem; background:var(--surface);
  box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease;
}
.period:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.period-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem; }
.period-chip{ background:var(--primary-soft); color:var(--primary-press); font-weight:600; border-radius:8px; padding:.28rem .65rem; font-size:.8rem; white-space:nowrap; }
.subject-input{ font-weight:600; }

/* ---- pills ---- */
.pill{ display:inline-block; border-radius:999px; padding:.14rem .6rem; font-size:.78rem; font-weight:600; }
.pill-yes{ background:var(--ok-bg); color:var(--ok); }
.pill-no{ background:var(--c-rose-bg); color:var(--c-rose); }
.pill-neutral{ background:var(--neutral-bg); color:var(--neutral); }

/* ---- record tables ---- */
.table-wrap{ overflow-x:auto; border-radius:10px; }
.table-records{ width:100%; border-collapse:collapse; font-size:.9rem; }
.table-records th{ background:#f3effb; color:var(--ink-soft); text-align:left; font-weight:600; padding:.6rem; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.table-records td{ padding:.6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-records tbody tr:nth-child(even){ background:#faf9fe; }
.table-records tbody tr:hover{ background:var(--primary-soft); }
.table-records tbody tr:last-child td{ border-bottom:0; }
.day-block{ margin-bottom:1.5rem; }
.day-title{ font-size:1.1rem; font-weight:600; margin:0 0 .55rem; }
.export-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }

/* =====================================================================
   AUTH — the signature: a ruled exercise-book page with a red margin
   ===================================================================== */
.auth-page{ min-height:calc(100vh - 96px); display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem; }
.auth-shell{
  display:grid; grid-template-columns:1.05fr 1fr;
  width:100%; max-width:780px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md);
}

/* notebook panel */
.auth-aside{
  position:relative; overflow:hidden;
  padding:2.6rem 2rem 2.6rem 3.2rem;
  background:#faf9fe; border-right:1px solid var(--line);
}
.auth-aside::before{   /* faint horizontal rules */
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, #ece7f6 31px 32px);
  opacity:.7; pointer-events:none;
}
.auth-aside::after{    /* the red margin rule */
  content:""; position:absolute; top:0; bottom:0; left:2.1rem; width:2px;
  background:var(--margin-red); opacity:.5;
}
.auth-aside-inner{ position:relative; z-index:1; }
.auth-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:1.3rem;
  background:var(--primary); color:#fff; font-weight:700; font-size:1.05rem;
  border-radius:13px; box-shadow:0 8px 18px -6px rgba(124,58,237,.6);
}
.auth-brand{ font-size:1.95rem; line-height:1.12; margin:0 0 .85rem; color:var(--ink); }
.auth-tagline{ color:var(--ink-soft); font-size:.95rem; max-width:26ch; margin:0 0 1.6rem; }
.auth-foot{ color:var(--neutral); font-size:.8rem; margin:0; }

/* form panel */
.auth-form{ padding:2.6rem 2.3rem; }
.auth-heading{ font-size:1.55rem; margin:0 0 .25rem; }
.auth-help{ color:var(--ink-soft); margin:0 0 1.5rem; font-size:.95rem; }

/* segmented role toggle */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; background:var(--neutral-bg); border-radius:12px; padding:.32rem; margin-bottom:1.3rem; }
.seg-opt{ position:relative; margin:0; }
.seg-opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.seg-opt span{
  display:block; text-align:center; padding:.55rem .4rem; border-radius:9px;
  font-weight:600; font-size:.9rem; color:var(--ink-soft); cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg-opt input:checked + span{ background:var(--surface); color:var(--primary); box-shadow:0 2px 6px -2px rgba(20,30,60,.18); }
.seg-opt input:focus-visible + span{ outline:2px solid var(--primary); outline-offset:2px; }

/* show/hide password */
.pw-field{ position:relative; }
.pw-field .form-control{ padding-right:4rem; }
.pw-toggle{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--ink-soft);
  font-size:.8rem; font-weight:600; cursor:pointer; padding:.25rem .45rem; border-radius:6px;
}
.pw-toggle:hover{ color:var(--primary); }

.auth-alt{ margin:1.3rem 0 0; text-align:center; font-size:.92rem; color:var(--ink-soft); }
.auth-alt a{ color:var(--primary); font-weight:500; }

@media (max-width:640px){
  .auth-page{ min-height:auto; padding:1.5rem 1rem; }
  .auth-shell{ grid-template-columns:1fr; max-width:430px; }
  .auth-aside{ padding:1.6rem 1.5rem 1.6rem 2.6rem; border-right:0; border-bottom:1px solid var(--line); }
  .auth-aside::after{ left:1.6rem; }
  .auth-brand{ font-size:1.55rem; margin-bottom:0; }
  .auth-tagline, .auth-foot{ display:none; }
  .auth-badge{ width:40px; height:40px; margin-bottom:1rem; }
  .auth-logo{ height:40px; margin-bottom:1rem; }
  .auth-form{ padding:1.8rem 1.5rem; }
}

/* ---- footer ---- */
.app-footer{ flex-shrink:0; border-top:1px solid var(--line); background:var(--surface); color:var(--neutral); font-size:.82rem; padding:1.15rem 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; }
.footer-brand{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-size:.95rem; color:var(--ink); }
.footer-note{ color:var(--neutral); }
.brand-mark-sm{ width:24px; height:24px; font-size:.62rem; border-radius:7px; box-shadow:none; }

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

/* ---- print (reports) ---- */
@media print{
  @page{ size:landscape; margin:12mm; }
  .app-nav, .app-footer, .no-print{ display:none !important; }
  body{ background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .app-main{ padding:0; }
  .card-soft, .stat, .period{ border:1px solid #ccc; box-shadow:none; }
  /* show the WHOLE table — the on-screen horizontal scroll must not clip the PDF */
  .table-wrap{ overflow:visible !important; }
  .table-records{ width:100%; font-size:10.5px; }
  .table-records th, .table-records td{ border:1px solid #d9d9d9; padding:.28rem .35rem; overflow-wrap:anywhere; word-break:break-word; vertical-align:top; }
  .table-records th{ background:#f1eefb !important; }
  /* avoid splitting a day or row awkwardly across pages */
  .day-block, .card-soft, .table-records tr{ page-break-inside:avoid; }
}

/* ============================================================
   v2 additions — 3-role toggle, student checkboxes, child cards
   ============================================================ */
.seg-3{ grid-template-columns:1fr 1fr 1fr; }

/* student lesson checkboxes */
.check-row{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:.5rem; padding-top:.85rem; border-top:1px solid var(--line); }
.form-check-inline-lg{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; cursor:pointer; }
.form-check-inline-lg input{ width:20px; height:20px; accent-color:var(--primary); cursor:pointer; }

/* parent — children cards */
.child-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.child-card{ display:flex; flex-direction:column; gap:1rem; }
.child-head{ display:flex; align-items:center; gap:.7rem; }
.child-head .avatar{ width:44px; height:44px; font-size:.95rem; }
.child-name{ font-weight:600; font-size:1.05rem; }
.child-class{ color:var(--ink-soft); font-size:.85rem; }
.child-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.mini{ background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:.65rem .4rem; text-align:center; }
.mini-num{ font-family:var(--display); font-size:1.35rem; font-weight:600; line-height:1; color:var(--c-fg, var(--ink)); }
.mini-lbl{ font-size:.72rem; color:var(--ink-soft); margin-top:.25rem; }
.mini.ok{ --c-fg:var(--c-green); }
.mini.danger{ --c-fg:var(--c-rose); }
.mini.teal{ --c-fg:var(--c-teal); }
.child-card > .btn{ margin-top:auto; }

/* ---- v2 role expansion: 4-role toggle, audit line, roomier nav ---- */
.seg-4{ grid-template-columns:repeat(4,1fr); }
.audit-line{ margin:.7rem 0 0; font-size:.82rem; color:var(--ink-soft); }
.app-menu{ flex-wrap:wrap; }            /* let the admin's longer menu wrap instead of overflow */

/* ============================================================
   Clarity pass: context bar, status badges, lesson cards
   ============================================================ */

/* "You are here" context bar — which child / class / date you're viewing */
.context-bar{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--primary);
  border-radius:14px; padding:.85rem 1.05rem; margin-bottom:1.2rem; box-shadow:var(--shadow-sm);
}
.context-bar .ctx-ic{
  width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--primary-soft); color:var(--primary); font-family:var(--display); font-weight:600; font-size:1.05rem;
}
.context-bar .ctx-main{ display:flex; flex-direction:column; gap:.1rem; }
.context-bar .ctx-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.context-bar .ctx-value{ font-family:var(--display); font-size:1.2rem; font-weight:600; color:var(--ink); line-height:1.15; }
.context-bar .ctx-sub{ font-size:.85rem; color:var(--ink-soft); }
.context-bar .ctx-right{ margin-left:auto; display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.context-bar .ctx-field{ display:flex; flex-direction:column; gap:.2rem; }

/* Status badges — used for homework/revision status everywhere */
.status{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:999px; font-size:.82rem; font-weight:600; line-height:1; white-space:nowrap; }
.status i{ font-size:.9rem; }
.status-done{ background:var(--c-green-bg); color:var(--c-green); }
.status-pending{ background:var(--c-rose-bg); color:var(--c-rose); }
.status-warn{ background:var(--c-amber-bg); color:var(--c-amber); }
.status-none{ background:var(--neutral-bg); color:var(--ink-soft); }
.status-info{ background:var(--c-blue-bg); color:var(--c-blue); }

/* Attention / all-clear banners */
.attention-note{ display:inline-flex; align-items:center; gap:.5rem; background:var(--c-rose-bg); color:var(--c-rose); border-radius:10px; padding:.45rem .7rem; font-size:.84rem; font-weight:600; }
.attention-note.calm{ background:var(--c-green-bg); color:var(--c-green); }

/* Lesson cards — a clean, readable alternative to dense tables */
.lesson-list{ display:flex; flex-direction:column; gap:1rem; }
.lesson-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.lesson-card-head{ display:flex; align-items:center; gap:.7rem; padding:.75rem 1rem; background:var(--paper); border-bottom:1px solid var(--line); }
.lesson-period{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:30px; padding:0 .6rem; border-radius:9px; background:var(--primary-soft); color:var(--primary); font-weight:600; font-size:.78rem; letter-spacing:.02em; }
.lesson-subject{ font-weight:600; font-size:1.06rem; color:var(--ink); }
.lesson-body{ padding:1rem 1.1rem 1.1rem; display:grid; gap:1rem; }
.lesson-sec-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:.3rem; display:flex; align-items:center; gap:.4rem; }
.lesson-sec-label i{ font-size:.9rem; color:var(--primary); }
.lesson-sec-body{ color:var(--ink); line-height:1.5; }
.lesson-statuses{ display:flex; gap:.55rem; flex-wrap:wrap; align-items:center; }
.lesson-empty{ color:var(--ink-soft); font-style:italic; }
@media (min-width:640px){ .lesson-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } }

/* Day grouping header for reports/diaries */
.day-heading{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:1.5rem 0 .8rem; padding-bottom:.5rem; border-bottom:2px solid var(--line); }
.day-heading h2{ margin:0; font-size:1.15rem; }
.day-heading .day-count{ color:var(--ink-soft); font-size:.88rem; }

/* Interactive progress rows (student's own ticking) */
.progress-row{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; padding-top:.9rem; margin-top:.2rem; border-top:1px dashed var(--line-strong); }
.progress-check{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; color:var(--ink); cursor:pointer; }
.progress-check input{ width:22px; height:22px; accent-color:var(--primary); cursor:pointer; }
.progress-check .hint{ font-weight:400; color:var(--ink-soft); font-size:.82rem; }

/* Class panels (teacher: one clearly-separated panel per class) */
.class-panel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.class-panel{ display:flex; flex-direction:column; gap:.9rem; }
.class-panel-head{ display:flex; align-items:center; gap:.7rem; }
.class-panel-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:40px; padding:0 .6rem; border-radius:11px; background:var(--primary-soft); color:var(--primary); font-family:var(--display); font-weight:600; }
.class-panel-name{ font-family:var(--display); font-size:1.15rem; font-weight:600; }
.class-panel-sub{ font-size:.82rem; color:var(--ink-soft); }
.class-panel-stats{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.class-panel-actions{ display:flex; gap:.5rem; margin-top:auto; flex-wrap:wrap; }

/* Print: keep cards whole and legible */
@media print{
  .lesson-card, .class-panel, .child-card, .day-block{ break-inside:avoid; box-shadow:none; }
  .context-bar{ box-shadow:none; border-left-width:3px; }
  .status{ border:1px solid #bbb; }
}

/* Section title used above card grids (outside a card) */
.block-title{ font-family:var(--display); font-size:1.2rem; font-weight:600; color:var(--ink); margin:.4rem 0 .9rem; }
.block-title .sub{ font-family:var(--body); font-size:.85rem; font-weight:400; color:var(--ink-soft); margin-left:.5rem; }

/* ============================================================
   v2 REDESIGN — sidebar + topbar shell, KPI dashboard
   (rules appended last so they override earlier shell styles)
   ============================================================ */
body.has-shell{ background:var(--paper); }
.layout{ min-height:100vh; }

/* Sidebar */
.sidebar{ position:fixed; inset:0 auto 0 0; width:266px; height:100vh; overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:1.15rem 1rem 1rem; z-index:60; }
.sidebar-brand{ display:flex; align-items:center; gap:.7rem; padding:.35rem .4rem 1.1rem; text-decoration:none; }
.sidebar-brand:hover{ text-decoration:none; }
.sidebar-brand .brand-mark{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed); box-shadow:0 8px 18px -8px rgba(124,58,237,.7); }
.sidebar-brand .brand-text{ font-family:var(--display); font-weight:600; font-size:1.1rem; line-height:1.12; color:var(--ink); }

.side-nav{ display:flex; flex-direction:column; gap:.15rem; }
.side-section{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600; padding:.95rem .7rem .4rem; }
.side-nav a{ display:flex; align-items:center; gap:.75rem; padding:.66rem .7rem; border-radius:11px;
  color:var(--ink-soft); font-weight:500; font-size:.96rem; text-decoration:none; transition:background .15s, color .15s; }
.side-nav a .si{ width:26px; display:grid; place-items:center; font-size:1.05rem; color:var(--neutral); transition:color .15s; }
.side-nav a:hover{ background:var(--paper); color:var(--ink); text-decoration:none; }
.side-nav a:hover .si{ color:var(--primary); }
.side-nav a.active{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.side-nav a.active .si{ color:var(--primary); }

.sidebar-foot{ margin-top:auto; padding-top:1rem; }
.promo{ background:linear-gradient(160deg,#f3ebff,#ede9fe); border:1px solid #e4d9fb; border-radius:16px; padding:1rem; text-align:center; }
.promo-ic{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#fff; color:var(--primary); font-size:1.15rem; box-shadow:var(--shadow-sm); margin-bottom:.5rem; }
.promo-title{ font-family:var(--display); font-weight:600; color:var(--primary-press); }
.promo-sub{ font-size:.83rem; color:var(--ink-soft); }

.main-col{ margin-left:266px; min-height:100vh; display:flex; flex-direction:column; }

/* Top bar */
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:.7rem 1.6rem; }
.hamburger{ display:none; border:1px solid var(--line-strong); background:var(--surface); border-radius:10px; width:40px; height:40px; font-size:1.2rem; color:var(--ink); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:1rem; }

/* user chip (topbar) — overrides earlier navbar styling */
.user-chip{ display:flex; align-items:center; gap:.6rem; background:none; border:0; padding:0; }
.user-chip .avatar{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#8b5cf6,#7c3aed); color:#fff; font-weight:600; font-size:.95rem; }
.user-meta{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.user-name{ font-weight:600; font-size:.9rem; color:var(--ink); }
.user-role{ font-size:.75rem; color:var(--ink-soft); }
.btn-logout{ background:var(--paper); color:var(--ink); border:1px solid var(--line-strong); box-shadow:none; }
.btn-logout:hover{ background:#efeafb; color:var(--ink); }

/* Content + footer */
.content{ flex:1; width:100%; max-width:1360px; padding:1.7rem 1.6rem 2.2rem; }
.app-foot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 1.6rem; color:var(--ink-soft); font-size:.85rem; border-top:1px solid var(--line); }
.app-foot .ver{ color:var(--primary); font-weight:600; }

/* Auth (logged-out) */
body.auth-body{ background:radial-gradient(1100px 560px at 100% 0%, #efe9fe 0%, transparent 55%), var(--paper); }
.auth-main{ min-height:100vh; padding:1.6rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; }
.auth-main > *{ width:100%; max-width:980px; }

/* Welcome header + date pill */
.welcome{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.welcome h1{ font-family:var(--display); font-size:2rem; font-weight:600; margin:0; color:var(--ink); }
.welcome .sub{ color:var(--ink-soft); margin-top:.35rem; }
.date-pill{ display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.6rem .9rem; color:var(--primary); font-weight:600; box-shadow:var(--shadow-sm); }

/* KPI cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:1.3rem; }
.kpi{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.15rem 1.2rem; box-shadow:var(--shadow-sm); }
.kpi-top{ display:flex; align-items:center; gap:.7rem; }
.kpi-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; background:var(--c-bg,var(--primary-soft)); color:var(--c-fg,var(--primary)); }
.kpi-label{ font-size:.92rem; font-weight:600; color:var(--ink); }
.kpi-num{ font-family:var(--display); font-size:2.15rem; font-weight:600; line-height:1; margin-top:.65rem; color:var(--ink); }
.kpi-sub{ font-size:.8rem; color:var(--ink-soft); margin-top:.4rem; }
.kpi-spark{ position:absolute; right:.85rem; bottom:.8rem; width:78px; height:34px; pointer-events:none; }
.kpi.violet{ --c-fg:var(--c-violet); --c-bg:var(--c-violet-bg); }
.kpi.blue{   --c-fg:var(--c-blue);   --c-bg:var(--c-blue-bg); }
.kpi.green{  --c-fg:var(--c-green);  --c-bg:var(--c-green-bg); }
.kpi.amber{  --c-fg:var(--c-amber);  --c-bg:var(--c-amber-bg); }

/* Dashboard 2-column grid */
.dash-grid{ display:grid; grid-template-columns:1.85fr 1fr; gap:1.2rem; align-items:start; }

/* Panel header */
.panel-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem; }
.panel-head .p-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-size:1.15rem; }
.panel-title{ font-family:var(--display); font-size:1.18rem; font-weight:600; color:var(--ink); line-height:1.1; }
.panel-sub{ font-size:.85rem; color:var(--ink-soft); }
.panel-head .p-action{ margin-left:auto; }

/* Icon action buttons */
.icon-btn{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--primary); font-size:1rem; text-decoration:none; }
.icon-btn:hover{ background:var(--primary-soft); color:var(--primary); }
.icon-btn.ghost{ color:var(--neutral); }
.icon-btn.ghost:hover{ background:var(--paper); color:var(--ink); }

/* Today's summary list */
.sum-row{ display:flex; align-items:center; gap:.75rem; padding:.62rem 0; border-bottom:1px solid var(--line); }
.sum-row:last-child{ border-bottom:0; }
.sum-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:.95rem; background:var(--c-bg,var(--primary-soft)); color:var(--c-fg,var(--primary)); }
.sum-ic.green{ --c-fg:var(--c-green); --c-bg:var(--c-green-bg); } .sum-ic.blue{ --c-fg:var(--c-blue); --c-bg:var(--c-blue-bg); }
.sum-ic.amber{ --c-fg:var(--c-amber); --c-bg:var(--c-amber-bg); } .sum-ic.teal{ --c-fg:var(--c-teal); --c-bg:var(--c-teal-bg); }
.sum-label{ flex:1; font-size:.93rem; color:var(--ink); }
.sum-val{ font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); }

/* Recent activity list */
.act-row{ display:flex; align-items:center; gap:.75rem; padding:.65rem 0; }
.act-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:.95rem; background:var(--c-bg,var(--primary-soft)); color:var(--c-fg,var(--primary)); flex:none; }
.act-ic.green{ --c-fg:var(--c-green); --c-bg:var(--c-green-bg); } .act-ic.blue{ --c-fg:var(--c-blue); --c-bg:var(--c-blue-bg); }
.act-ic.violet{ --c-fg:var(--c-violet); --c-bg:var(--c-violet-bg); }
.act-main{ flex:1; min-width:0; }
.act-title{ font-size:.9rem; color:var(--ink); }
.act-time{ font-size:.78rem; color:var(--ink-soft); white-space:nowrap; }

/* Quick actions */
.qa-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.qa-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem; border-radius:12px; border:1px solid var(--line-strong); background:var(--surface); font-weight:600; font-size:.92rem; color:var(--ink); text-decoration:none; transition:background .15s, border-color .15s; }
.qa-btn i{ font-size:1.05rem; }
.qa-btn:hover{ background:var(--paper); text-decoration:none; color:var(--ink); }
.qa-btn.violet i{ color:var(--c-violet); } .qa-btn.blue i{ color:var(--c-blue); } .qa-btn.green i{ color:var(--c-green); } .qa-btn.amber i{ color:var(--c-amber); } .qa-btn.rose i{ color:var(--c-rose); }

.table-records tbody tr:hover{ background:var(--paper); }

/* Responsive */
@media (max-width:1100px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } .dash-grid{ grid-template-columns:1fr; } }
@media (max-width:992px){
  .sidebar{ transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 20px 60px rgba(20,10,40,.25); }
  body.nav-open .sidebar{ transform:none; }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(20,10,40,.45); z-index:50; opacity:0; visibility:hidden; transition:opacity .25s; }
  body.nav-open .sidebar-backdrop{ opacity:1; visibility:visible; }
  .main-col{ margin-left:0; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:640px){
  .kpi-grid{ grid-template-columns:1fr; }
  .content{ padding:1.2rem 1rem 1.8rem; }
  .topbar{ padding:.6rem 1rem; }
  .user-meta{ display:none; }
  .btn-logout span{ display:none; }
  .welcome h1{ font-size:1.6rem; }
}
@media print{
  .sidebar, .topbar, .app-foot, .sidebar-backdrop{ display:none !important; }
  .main-col{ margin-left:0; }
  .content{ max-width:none; padding:0; }
}

/* Brand logo image (replaces the old "LT" mark) */
.brand-logo{ display:block; width:100%; max-width:200px; height:auto; max-height:56px; object-fit:contain; }
.auth-logo{ height:50px; width:auto; max-width:210px; object-fit:contain; display:block; margin-bottom:1.3rem; }