/* ============================================================ IDA Student Dashboard — global stylesheet ============================================================ */ :root{ /* palette — defaults to the warm "kraft" theme; tweaks-panel can override */ --accent: #D97757; --accent-ink: #fff; --accent-soft: oklch(94% 0.04 50); --accent-soft-ink: oklch(38% 0.12 50); --accent-line: oklch(85% 0.08 50); --bg: #F6F2EB; --bg-2: #EEE8DE; --surface: #FFFFFF; --ink: #1B1812; --ink-2: #3A332A; --muted: #80766A; --muted-2: #B5AC9F; --line: #E5DECF; --line-strong: #D3C9B6; --good: #2C8770; --good-soft: oklch(94% 0.04 165); --warn: #B58029; --warn-soft: oklch(94% 0.05 80); --bad: #B33A3A; --bad-soft: oklch(94% 0.04 28); --info: #2B5FAB; --info-soft: oklch(94% 0.04 250); --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --shadow-xs: 0 1px 0 rgba(20,16,8,.04); --shadow-sm: 0 1px 2px rgba(20,16,8,.06), 0 1px 0 rgba(20,16,8,.04); --shadow-md: 0 2px 6px rgba(20,16,8,.08), 0 1px 0 rgba(20,16,8,.04); --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Dark theme — injected when is set. Inverts backgrounds + ink; accent + status colours keep their hue but their *-soft variants drop into the same lightness band as the surface so pills stay readable. Inline `background:'#fff'` in JSX doesn't pick up these vars — those few surfaces fall back to white in dark mode (acceptable for now; see DOCUMENTATION.md follow-ups). */ [data-theme="dark"]{ --bg: #1A1612; --bg-2: #221C16; --surface: #2A2319; --ink: #EFE9DD; --ink-2: #C9C0AF; --muted: #897F6E; --muted-2: #5D5447; --line: #3A3326; --line-strong: #4C4534; --accent-soft: oklch(30% 0.06 50); --accent-soft-ink: oklch(85% 0.10 50); --accent-line: oklch(45% 0.10 50); --good-soft: oklch(28% 0.06 165); --warn-soft: oklch(28% 0.06 80); --bad-soft: oklch(28% 0.06 28); --info-soft: oklch(28% 0.06 250); --shadow-xs: 0 1px 0 rgba(255,255,255,.03); --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 14px rgba(0,0,0,.45); color-scheme: dark; } /* Form controls — explicit overrides since many .input / .select are styled with background:#fff inline in JSX (legacy). The CSS class selectors below win when the JSX style attribute isn't set. */ [data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea, [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select{ background: var(--bg-2); color: var(--ink); border-color: var(--line); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder{ color: var(--muted); } [data-theme="dark"] .card, [data-theme="dark"] .kpi{ background: var(--surface); border-color: var(--line); } /* alternate palettes injected when [data-palette] changes */ [data-palette="blue"]{ --accent: #2B5FAB; --accent-soft: oklch(94% 0.04 250); --accent-soft-ink: oklch(38% 0.14 250); --accent-line: oklch(85% 0.08 250); } [data-palette="green"]{ --accent: #2C8770; --accent-soft: oklch(94% 0.04 165); --accent-soft-ink: oklch(34% 0.10 165); --accent-line: oklch(82% 0.08 165); } [data-palette="slate"]{ --accent: #3F4A5C; --accent-soft: oklch(94% 0.01 250); --accent-soft-ink: oklch(38% 0.04 250); --accent-line: oklch(85% 0.02 250); --bg: #F4F4F2; --bg-2: #E8E7E2; --line: #DEDCD4; --line-strong: #C9C5BA; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font-sans); font-size:13.5px; line-height:1.45; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } button{font:inherit;color:inherit} input,select,textarea{font:inherit;color:inherit} a{color:inherit} /* ---------- App shell ---------- */ .app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; } .sb{ background:var(--bg-2); border-right:1px solid var(--line); position:sticky;top:0;height:100vh; display:flex;flex-direction:column; } .sb-brand{ display:flex;flex-direction:column;align-items:flex-start;gap:6px; padding:18px 18px 14px; border-bottom:1px solid var(--line); } .sb-brand .sb-logo{ display:block;height:auto;width:100%;max-width:200px; } .sb-brand .sub{font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);white-space:nowrap} .sb-who{ padding:14px 18px;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:10px; } .sb-who .av{ width:34px;height:34px;border-radius:50%; background:var(--accent-soft);color:var(--accent-soft-ink); display:grid;place-items:center;font-weight:600;font-size:13px; flex-shrink:0; } .sb-who .nm{font-size:12.5px;font-weight:600;line-height:1.2} .sb-who .rl{font-size:10.5px;color:var(--muted);margin-top:1px; letter-spacing:.02em} .sb-nav{padding:10px 8px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1px} .sb-cap{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);padding:14px 12px 6px;font-weight:600} .nav-item{ display:flex;align-items:center;gap:10px; padding:7px 10px;border-radius:var(--r-sm); font-size:12.5px;line-height:1.2;color:var(--ink-2); cursor:pointer;user-select:none;border:0;background:transparent; width:100%;text-align:left;position:relative; white-space:nowrap; } .nav-item > span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;min-width:0} .nav-item:hover{background:rgba(0,0,0,.04)} .nav-item.active{ background:var(--surface);color:var(--ink);font-weight:600; box-shadow:var(--shadow-sm); } .nav-item.active::before{ content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:2px; background:var(--accent);border-radius:2px; } .nav-item .ico{width:14px;height:14px;color:var(--muted);display:grid;place-items:center;flex-shrink:0} .nav-item.active .ico{color:var(--accent)} .nav-item .pct{margin-left:auto;font-size:10.5px;color:var(--muted); font-variant-numeric:tabular-nums;font-family:var(--font-mono)} .nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--bad); margin-left:auto} .nav-item .badge{ margin-left:auto;font-size:9.5px;font-weight:600; padding:1px 6px;border-radius:999px;background:var(--accent-soft); color:var(--accent-soft-ink);letter-spacing:.02em; } .sb-foot{padding:12px 14px;border-top:1px solid var(--line); display:flex;gap:6px;align-items:center;justify-content:space-between} .sb-foot .meta{font-size:10px;color:var(--muted);line-height:1.3} /* Language toggle (English / తెలుగు) */ .sb-lang{padding:10px 14px 0} .lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px; overflow:hidden;background:var(--bg-2)} .lang-toggle-block{display:flex;width:100%} .lang-opt{appearance:none;border:0;background:transparent;cursor:pointer; padding:6px 12px;font-size:12px;font-weight:600;color:var(--muted); flex:1;transition:background .15s,color .15s;white-space:nowrap} .lang-opt.active{background:var(--accent);color:#fff} .lang-opt:not(.active):hover{color:var(--ink)} .btn-link{ appearance:none;border:0;background:transparent;cursor:pointer; padding:6px 8px;border-radius:6px; font-size:11px;color:var(--muted); } .btn-link:hover{background:rgba(0,0,0,.05);color:var(--ink)} .main{padding:20px 28px 60px;min-width:0;max-width:1400px} .main-hd{ display:flex;align-items:flex-end;justify-content:space-between; margin-bottom:18px;gap:24px; } .main-hd h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-0.01em;line-height:1.2} .main-hd .crumbs{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin-bottom:6px;font-weight:600} .main-hd p{margin:6px 0 0;color:var(--ink-2);font-size:13px;max-width:62ch} /* ---------- Common building blocks ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-xs); /* Let wide tables (Documents action column etc.) scroll INSIDE the card instead of pushing the page sideways or clipping their last column — same fix mobile already had, now applied at every width. */ overflow-x:auto; } .card-hd{padding:14px 16px;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:12px} .card-hd > div:first-child{min-width:0;flex:1} .card-hd h3{margin:0;font-size:13px;font-weight:600;letter-spacing:-0.005em} .card-hd .sub{font-size:11.5px;color:var(--muted);margin-top:2px} .card-body{padding:16px} .card-body.pad-lg{padding:20px} .card-body.pad-sm{padding:12px 16px} .card-foot{padding:10px 16px;border-top:1px solid var(--line); background:var(--bg);border-radius:0 0 var(--r-md) var(--r-md); font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between} .grid{display:grid;gap:14px} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .g-hero{grid-template-columns:2fr 1fr} .g-side{grid-template-columns:1fr 320px} @media (max-width:1100px){ /* minmax(0, 1fr) so a grid item containing a wide table (.tbl min-width 560px) doesn't expand the track past the viewport; the table scrolls horizontally inside the card instead. */ .g-side,.g-hero{grid-template-columns:minmax(0,1fr)} .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- Mobile drawer + responsive ---------- */ .nav-burger{display:none} .nav-scrim{display:none} @media (max-width:820px){ .app{grid-template-columns:1fr} .sb{ position:fixed;left:0;top:0;z-index:60;width:248px; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-md); } .app.nav-open .sb{transform:none} .nav-burger{ display:flex;align-items:center;justify-content:center; position:fixed;top:10px;left:12px;z-index:70; width:38px;height:38px;border-radius:9px; background:var(--surface);color:var(--ink); border:1px solid var(--line);box-shadow:var(--shadow-xs);cursor:pointer; } .nav-scrim{ position:fixed;inset:0;z-index:55; background:rgba(0,0,0,.38);opacity:0;pointer-events:none; transition:opacity .2s; } .app.nav-open .nav-scrim{display:block;opacity:1;pointer-events:auto} .main{padding:60px 16px 56px;max-width:100%} /* Burger sits fixed at left:12 width:38 (right edge x=50). Leave a 16px gap so the title block never tucks behind it as the page scrolls. */ .main-hd{flex-direction:column;align-items:flex-start;gap:12px;padding-left:54px} .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)} .welcome{padding:16px} .welcome-card{padding:22px 18px} .card{overflow-x:auto} .tbl{min-width:560px} .tbl-wide{min-width:820px} .score-tbl{min-width:560px} .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch} .main-hd h1{font-size:19px} /* Instructor roster — drill-in 280px+1fr collapses to single column. minmax(0,1fr) keeps the column from inflating to a child's min-content (unbreakable mono UIDs, long course strings, etc.). */ .roster-split{grid-template-columns:minmax(0,1fr) !important;gap:14px} .roster-pane{position:static !important;top:auto !important;min-width:0} /* Student file header — drop Donut under the identity block */ .student-file-hd{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start} .student-file-hd > :nth-child(3){grid-column:1 / span 2;justify-self:center;margin-top:6px} /* Hero (student home) — donut over the next-action copy */ .home-hero{grid-template-columns:1fr !important;gap:18px;justify-items:start} .home-hero .home-hero-donut{justify-self:center} /* Onboarding list rows are themselves clickable — the trailing CTA button is redundant on phones and squeezes the title. */ .list-row .onboarding-cta{display:none} /* Attendance row — label on its own line instead of a fixed 120px col */ .att-row{grid-template-columns:1fr !important;gap:6px} .att-row .lbl{text-align:left} /* Long emails / Gmail addresses can wrap mid-string in dense lists */ .tbl .email-cell{word-break:break-all} /* Enrolment card — fields stack on phones so neither overflows. */ .enrol-row > .enrol-field{flex:1 1 100% !important} .enrol-row > .enrol-save{flex:1 1 100%} } /* Desktop layout for student file header + home hero */ @media (min-width:821px){ .student-file-hd{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center} .home-hero{grid-template-columns:140px 1fr;gap:24px;align-items:center} } @media (max-width:480px){ .main{padding:58px 11px 48px} .g-4,.g-3,.g-2{gap:10px} } .stack{display:flex;flex-direction:column;gap:14px} .stack-sm{display:flex;flex-direction:column;gap:8px} .row{display:flex;align-items:center;gap:10px} .row-wrap{display:flex;flex-wrap:wrap;gap:10px} .spacer{flex:1} /* ---------- KPIs ---------- */ .kpi{display:flex;flex-direction:column;gap:6px;padding:14px 16px; background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--shadow-xs)} .kpi .lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);font-weight:600} .kpi .val{font-size:22px;font-weight:600;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:-0.01em} .kpi .val .unit{font-size:12px;color:var(--muted);font-weight:500;margin-left:3px} .kpi .delta{font-size:11px;color:var(--muted);font-family:var(--font-mono)} .kpi.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent} .kpi.accent .lbl,.kpi.accent .delta{color:rgba(255,255,255,.7)} .kpi.accent .val .unit{color:rgba(255,255,255,.7)} /* ---------- Status pills ---------- */ .pill{ display:inline-flex;align-items:center;gap:5px; padding:2px 8px;border-radius:999px; font-size:10.5px;font-weight:600;letter-spacing:.02em; background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line); line-height:1.4;white-space:nowrap; } .pill .dotty{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7} .pill-good{background:var(--good-soft);color:var(--good);border-color:transparent} .pill-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} .pill-bad{background:var(--bad-soft);color:var(--bad);border-color:transparent} .pill-info{background:var(--info-soft);color:var(--info);border-color:transparent} .pill-accent{background:var(--accent-soft);color:var(--accent-soft-ink);border-color:transparent} .pill-ghost{background:transparent;color:var(--muted)} /* ---------- Progress ---------- */ .bar{height:6px;background:var(--bg-2);border-radius:999px;overflow:hidden;position:relative} .bar > i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s} .bar.thin{height:3px} .bar.tall{height:8px} .bar-good > i{background:var(--good)} .bar-warn > i{background:var(--warn)} .bar-bad > i{background:var(--bad)} .bar-mixed{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--bg-2)} .bar-mixed > i{height:100%;display:block} /* ---------- Buttons ---------- */ .btn{ appearance:none;border:1px solid var(--line-strong); background:var(--surface);color:var(--ink); padding:7px 14px;border-radius:var(--r-sm); font-size:12.5px;font-weight:500;cursor:pointer; display:inline-flex;align-items:center;gap:6px;line-height:1.2; transition:background .12s,border-color .12s,transform .04s; } .btn:hover{background:var(--bg-2)} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent} .btn-primary:hover{background:var(--accent);filter:brightness(.92)} .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)} .btn-ghost:hover{background:var(--bg-2)} .btn-sm{padding:4px 10px;font-size:11.5px} .btn-xs{padding:2px 8px;font-size:11px;border-radius:5px} .btn-icon{padding:6px;border-radius:6px} .btn[disabled]{opacity:.55;cursor:not-allowed} .btn-primary[disabled]{opacity:.62;cursor:not-allowed} .btn-good{background:var(--good);color:#fff;border-color:transparent} .btn-bad{background:var(--bad);color:#fff;border-color:transparent} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.02em} .field label .req{color:var(--bad);margin-left:2px} .input,.select,.textarea{ appearance:none;border:1px solid var(--line-strong); background:var(--surface);color:var(--ink); border-radius:var(--r-sm);padding:7px 10px;font-size:13px; width:100%;line-height:1.3;outline:none; } .input:focus,.select:focus,.textarea:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } .input[readonly],.input[disabled]{ background:var(--bg-2);color:var(--ink-2);cursor:default; } .textarea{min-height:80px;resize:vertical;font-family:inherit} .input-help{font-size:10.5px;color:var(--muted);margin-top:2px} /* Password input with show/hide toggle */ .pw-wrap{position:relative;display:block} .pw-wrap .pw-input{padding-right:36px} .pw-wrap .pw-toggle{ position:absolute;top:50%;right:6px;transform:translateY(-50%); width:28px;height:28px;border-radius:6px;border:0;background:transparent; color:var(--muted);cursor:pointer;display:grid;place-items:center; transition:color .12s, background .12s; } .pw-wrap .pw-toggle:hover{color:var(--ink);background:var(--bg-2)} .pw-wrap .pw-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .checkbox,.radio{ display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer; padding:6px 0;line-height:1.3; } .checkbox input,.radio input{accent-color:var(--accent);width:14px;height:14px;margin:0} /* ---------- Tables ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .tbl th{ text-align:left;font-weight:600;font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--muted); padding:9px 12px;border-bottom:1px solid var(--line); background:var(--bg); } .tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tr:hover td{background:var(--bg-2)} .tbl td.right,.tbl th.right{text-align:right} .tbl td.mono,.tbl th.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} /* ---------- Misc ---------- */ .divider{height:1px;background:var(--line);margin:8px 0} .muted{color:var(--muted)} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .small{font-size:11.5px} .tiny{font-size:10.5px} .tag{ display:inline-block;font-size:10px;letter-spacing:.05em;text-transform:uppercase; padding:2px 7px;border-radius:4px;background:var(--bg-2);color:var(--muted);font-weight:600; } /* ---------- Welcome / role picker ---------- */ /* Flex (not grid) so the card honours max-width:100% against the real container width — grid's implicit auto column was sizing to the card's intrinsic 560px and overflowing the viewport on phones. */ .welcome{ min-height:100vh;display:flex;align-items:center;justify-content:center; background:radial-gradient(ellipse at top, var(--bg-2), var(--bg) 60%); padding:24px; } .welcome-card{ width:560px;max-width:100%; box-sizing:border-box;min-width:0; background:var(--surface);border:1px solid var(--line); border-radius:14px;box-shadow:var(--shadow-md); padding:32px; } .welcome-card h1{font-size:24px;font-weight:600;margin:18px 0 4px;letter-spacing:-0.01em} .welcome-card .lead{color:var(--muted);font-size:13px;margin:0 0 22px} .spinner{ width:26px;height:26px;border-radius:50%; border:3px solid var(--bg-2);border-top-color:var(--accent); margin:0 auto;animation:spin .8s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}} .role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} .role{ text-align:left;cursor:pointer;background:var(--surface); border:1px solid var(--line);border-radius:10px;padding:14px; transition:border-color .12s,background .12s; } .role:hover{border-color:var(--accent-line);background:var(--accent-soft)} .role[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)} .role .role-ico{ width:30px;height:30px;border-radius:8px; background:var(--bg-2);color:var(--ink-2); display:grid;place-items:center;margin-bottom:8px; } .role[aria-pressed="true"] .role-ico{background:var(--accent);color:var(--accent-ink)} .role h3{margin:0 0 2px;font-size:13px;font-weight:600} .role p{margin:0;font-size:11.5px;color:var(--muted)} /* ---------- Signature pad ---------- */ .sig-block{display:flex;flex-direction:column;gap:8px} .sig-pad{ position:relative;height:100px; background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(0,0,0,.04) 18px 19px); border:1px dashed var(--line-strong); border-radius:var(--r-sm);overflow:hidden; } .sig-pad.signed{background:#fff;border-style:solid} .sig-pad canvas{display:block;width:100%;height:100%;touch-action:none} .sig-pad .ph{ position:absolute;inset:0;display:grid;place-items:center; color:var(--muted-2);font-size:12px;pointer-events:none; font-style:italic; } .sig-meta{display:flex;align-items:center;justify-content:space-between; font-size:11.5px;color:var(--ink-2)} .sig-meta button{ appearance:none;background:transparent;border:1px solid var(--line); border-radius:5px;padding:3px 8px;font-size:10.5px;color:var(--muted); cursor:pointer; } .sig-meta button:hover{background:var(--bg-2);color:var(--ink)} /* ---------- File chips ---------- */ .file-chip{ display:inline-flex;align-items:center;gap:8px; background:var(--bg-2);border:1px solid var(--line); border-radius:6px;padding:6px 10px;font-size:11.5px; max-width:100%; } .file-chip .icon{color:var(--muted);flex-shrink:0;display:grid;place-items:center} .file-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .file-chip .sz{color:var(--muted);font-family:var(--font-mono);font-size:10px} .file-chip button{ border:0;background:transparent;color:var(--muted);cursor:pointer; padding:2px;display:grid;place-items:center;border-radius:3px; } .file-chip button:hover{background:rgba(0,0,0,.08);color:var(--bad)} .dropzone{ border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:18px;text-align:center;color:var(--muted); background:var(--bg); cursor:pointer;transition:border-color .12s,background .12s; } .dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-soft-ink)} .dropzone .big{font-size:13px;color:var(--ink-2);font-weight:500} .dropzone .small{font-size:11px;margin-top:3px} /* ---------- Banner ---------- */ .banner{ display:flex;align-items:center;gap:12px; padding:12px 14px;border-radius:var(--r-md); background:var(--accent-soft);border:1px solid var(--accent-line); color:var(--accent-soft-ink); } .banner.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent} .banner.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent} .banner.good{background:var(--good-soft);color:var(--good);border-color:transparent} .banner .body{flex:1;font-size:12.5px} .banner b{font-weight:600} /* ---------- Module list rows ---------- */ .list{display:flex;flex-direction:column} .list-row{ display:flex;align-items:center;gap:14px; padding:12px 16px;border-bottom:1px solid var(--line); cursor:pointer;background:transparent;transition:background .12s; width:100%;text-align:left;border-left:0;border-right:0;border-top:0; } .list-row:last-child{border-bottom:0} .list-row:hover{background:var(--bg-2)} .list-row .ix{ width:24px;height:24px;border-radius:50%; background:var(--bg-2);color:var(--ink-2); display:grid;place-items:center;font-size:10.5px;font-weight:600; font-family:var(--font-mono);flex-shrink:0; } .list-row.done .ix{background:var(--good-soft);color:var(--good)} .list-row.warn .ix{background:var(--warn-soft);color:var(--warn)} .list-row .nm{flex:1;min-width:0} .list-row .ttl{font-size:13px;font-weight:500;color:var(--ink)} .list-row .desc{font-size:11.5px;color:var(--muted);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .list-row .meta{font-size:11px;color:var(--muted);text-align:right;flex-shrink:0} /* ---------- Phase timeline (for medical) ---------- */ .phases{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .phase{ position:relative;padding:14px 14px 14px 26px;border-radius:0; background:var(--bg-2);border:1px solid var(--line); border-right:0;font-size:12px; } .phase:first-child{border-radius:var(--r-md) 0 0 var(--r-md)} .phase:last-child{border-radius:0 var(--r-md) var(--r-md) 0;border-right:1px solid var(--line)} .phase .ph-num{ position:absolute;left:10px;top:14px;width:14px;height:14px;border-radius:50%; background:var(--surface);border:1.5px solid var(--line-strong); font-size:9px;display:grid;place-items:center;color:var(--muted);font-weight:700; } .phase .ph-ttl{font-size:11px;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);font-weight:600} .phase .ph-sub{font-size:11.5px;color:var(--ink-2);margin-top:4px} .phase.active{background:var(--accent-soft);border-color:var(--accent-line)} .phase.active .ph-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .phase.active .ph-ttl{color:var(--accent-soft-ink)} .phase.done{background:var(--good-soft);border-color:transparent} .phase.done .ph-num{background:var(--good);border-color:var(--good);color:#fff} .phase.done .ph-ttl{color:var(--good)} /* ---------- Inline mini bars (for KPIs) ---------- */ .mini-bars{display:flex;align-items:flex-end;gap:2px;height:24px} .mini-bars i{display:block;width:5px;background:var(--accent);border-radius:1px 1px 0 0;opacity:.85} .mini-bars i.dim{background:var(--line-strong);opacity:.6} /* ---------- Donut (svg helper sizes) ---------- */ .donut{width:120px;height:120px;display:block} .donut text{font-family:var(--font-mono);font-weight:600} /* ---------- Module shell ---------- */ .module{display:flex;flex-direction:column;gap:18px} .section-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:2px} .section-hd > div:first-child{min-width:0} .section-hd h2{font-size:14px;font-weight:600;margin:0;letter-spacing:-0.005em} .section-hd .sub{font-size:11.5px;color:var(--muted);margin-top:1px} /* ---------- Tabs ---------- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px} .tab{ appearance:none;background:transparent;border:0; padding:9px 12px;font-size:12.5px;color:var(--muted); cursor:pointer;font-weight:500;position:relative; border-bottom:2px solid transparent;margin-bottom:-1px; } .tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)} .tab:hover{color:var(--ink)} .tab .count{ display:inline-block;margin-left:6px;font-size:10px; padding:1px 6px;border-radius:999px;background:var(--bg-2);color:var(--muted); font-weight:600; } .tab.active .count{background:var(--accent-soft);color:var(--accent-soft-ink)} /* Section switcher — sibling-route tab strip above a module (manager Dashboard + Finance clusters). Slightly larger than in-module tabs. */ .section-tabs{margin-bottom:18px;gap:6px} .section-tabs .tab{font-size:13.5px;padding:9px 14px} /* ---------- Tests checklist ---------- */ .score-tbl{width:100%;border-collapse:collapse;font-size:12.5px} .score-tbl th{ text-align:left;font-weight:600;font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);background:var(--bg); } .score-tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle} .score-tbl tr:last-child td{border-bottom:0} .score-tbl .opt{ display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:5px; font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--line-strong); background:var(--surface);user-select:none;color:var(--ink-2); } .score-tbl .opt:hover{background:var(--bg-2)} .score-tbl .opt.on-sat{background:var(--good);color:#fff;border-color:transparent} .score-tbl .opt.on-unsat{background:var(--bad);color:#fff;border-color:transparent} .score-tbl .opt.on-na{background:var(--bg-2);color:var(--ink);border-color:transparent} .score-tbl .group-h td{ background:var(--bg);font-size:10px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:var(--muted);padding:7px 10px;white-space:nowrap; } /* ---------- Attendance heatmap ---------- */ .att-grid{display:flex;flex-direction:column;gap:8px} .att-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center} .att-row .lbl{font-size:11.5px;color:var(--ink-2)} .att-row .cells{display:flex;gap:3px;flex-wrap:wrap} .att-cell{ width:24px;height:24px;border-radius:4px;background:var(--bg-2); display:grid;place-items:center;font-size:9.5px;font-weight:600; color:var(--muted);font-family:var(--font-mono); cursor:default;border:1px solid var(--line); } .att-cell.present{background:var(--good);color:#fff;border-color:transparent} .att-cell.absent{background:var(--bad);color:#fff;border-color:transparent} /* ---------- Annotated paper preview (medical) ---------- */ .paper{ background:#fbfaf6;border:1px solid var(--line-strong); border-radius:8px;padding:14px 18px;font-size:11px;line-height:1.5; color:var(--ink-2); background-image:repeating-linear-gradient(0deg,transparent 0 24px,rgba(0,0,0,.03) 24px 25px); } .paper h4{margin:0 0 10px;font-size:13px;color:var(--ink);font-weight:600} .paper .fld{display:grid;grid-template-columns:1fr 1fr;gap:14px; border-bottom:1px dotted var(--line-strong);padding:5px 0;font-size:11px; align-items:baseline} .paper .fld span:last-child{text-align:right;color:var(--muted)} /* ---------- Search ---------- */ .search{ display:flex;align-items:center;gap:6px; background:var(--surface);border:1px solid var(--line-strong); border-radius:var(--r-sm);padding:5px 10px;width:240px; } .search input{ border:0;background:transparent;outline:none;width:100%;font-size:12.5px; } .search svg{color:var(--muted);flex-shrink:0} /* ---------- Announcements ---------- */ .ann{ display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line); align-items:flex-start; } .ann:last-child{border-bottom:0} .ann .stripe{width:3px;align-self:stretch;border-radius:3px;background:var(--accent);flex-shrink:0;margin-top:3px} .ann.action .stripe{background:var(--warn)} .ann.schedule .stripe{background:var(--info)} .ann.feedback .stripe{background:var(--good)} .ann .body{flex:1;min-width:0} .ann .meta{display:flex;align-items:center;justify-content:space-between;gap:10px} .ann .who{font-size:11px;color:var(--muted);font-weight:500; display:flex;align-items:center;gap:8px;min-width:0;flex:1;flex-wrap:wrap} .ann .who > b{color:var(--ink)} .ann .when{font-size:10.5px;color:var(--muted);font-family:var(--font-mono);flex-shrink:0} .ann h4{margin:3px 0 4px;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3} .ann p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.45} /* ---------- Brand row (social) ---------- */ .brand-row{ display:grid;grid-template-columns:24px 1fr auto; align-items:center;gap:14px;padding:12px 16px; border-bottom:1px solid var(--line); } .brand-row:last-child{border-bottom:0} .brand-row .nm{font-size:13px;font-weight:600} .brand-row .tag{font-size:11px;color:var(--muted);font-family:var(--font-mono); background:transparent;padding:0;text-transform:none;letter-spacing:0;font-weight:500} .brand-row .platforms{display:flex;gap:6px} .platform-btn{ appearance:none;display:inline-flex;align-items:center;gap:5px; padding:5px 9px;border-radius:6px;border:1px solid var(--line-strong); background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:11px;font-weight:500; transition:all .12s; } .platform-btn:hover{background:var(--bg-2)} .platform-btn.done{background:var(--good);color:#fff;border-color:transparent} .platform-btn.done svg{filter:brightness(0) invert(1)} .platform-btn .ico{width:11px;height:11px;display:grid;place-items:center} .brand-mark{ width:24px;height:24px;border-radius:6px;display:grid;place-items:center; background:var(--accent-soft);color:var(--accent-soft-ink); font-size:11px;font-weight:700; } /* ---------- Misc utilities ---------- */ .hidden{display:none !important} .flex{display:flex} .center{align-items:center} .between{justify-content:space-between} .fw-6{font-weight:600} .upper{letter-spacing:.06em;text-transform:uppercase} /* scrollbars */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid var(--bg)} *::-webkit-scrollbar-thumb:hover{background:var(--muted-2)} *::-webkit-scrollbar-track{background:transparent} /* ---------- Touch drag-and-drop (touch-dnd.jsx) ---------- */ .dnd-draggable{cursor:grab} .dnd-draggable:active{cursor:grabbing} .dnd-source-dragging{opacity:.35;transition:opacity .12s} .dnd-hover{ outline:2px dashed var(--accent);outline-offset:-2px; background:var(--accent-soft) !important; transition:background .08s, outline-color .08s; } .dnd-ghost{ border-radius:8px; user-select:none;-webkit-user-select:none; /* Pointer events disabled in the ghost so hover detection works. */ } /* ---------- Command palette (Cmd+K) ---------- */ .cmdk-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,.55); z-index:10000;display:flex;justify-content:center;align-items:flex-start; padding:8vh 16px 16px;backdrop-filter:blur(2px); } .cmdk-panel{ width:100%;max-width:640px;height:fit-content; background:var(--surface);border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.45); border:1px solid var(--line-strong); display:flex;flex-direction:column;overflow:hidden; } .cmdk-search{ display:flex;align-items:center;gap:10px; padding:12px 14px;border-bottom:1px solid var(--line); } .cmdk-search input{ flex:1;font-size:15px;border:0;background:transparent; color:var(--ink);outline:none;padding:4px 0; } .cmdk-list{ max-height:60vh;overflow:auto;padding:6px 0; } .cmdk-group{ padding:8px 14px 4px;font-size:10.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);font-weight:600; } .cmdk-row{ display:flex;align-items:center;gap:8px; width:100%;padding:8px 14px; background:transparent;border:0;cursor:pointer;text-align:left; } .cmdk-row.active{background:var(--accent-soft)} .cmdk-row-main{flex:1;min-width:0} .cmdk-row-label{font-size:13px;font-weight:500;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmdk-row-sub{font-size:11.5px;color:var(--muted);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmdk-enter{ font-size:10px;color:var(--muted); padding:2px 6px;border:1px solid var(--line);border-radius:4px; } .cmdk-empty{ padding:18px;text-align:center;color:var(--muted);font-size:13px; } .cmdk-foot{ padding:8px 14px;border-top:1px solid var(--line); font-size:11px;color:var(--muted);text-align:right; } /* ---------- Sign-in / Create account ---------- */ /* Secondary mode-swap button below the form (Create-account / Sign in instead). Outlined accent style — clearly an actionable button (dark ink on white, accent-coloured border + label so it reads as a CTA), while staying visually distinct from the filled primary submit so the eye still goes to "Sign in →" first. */ .signin-alt{ background:#fff; color:var(--accent); border:1.5px solid var(--accent); font-weight:600; padding:9px 18px; transition:background .15s, color .15s, border-color .15s, transform .04s; } .signin-alt:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .signin-alt:active{transform:translateY(1px)} /* Sign-in / sign-up form: keep submit button at full width when the bottom row wraps onto its own line on small screens; the secondary "Create account" / "Sign in instead" CTA below the form also stretches so it stays thumb-friendly on phones. */ @media (max-width:520px){ .welcome{padding:14px} .signin-actions{flex-direction:column;align-items:stretch} .signin-actions .btn-link{align-self:flex-start} .signin-submit{width:100%;justify-content:center} .signin-alt{width:100%} } @media (max-width:380px){ .welcome{padding:10px} } /* ============================================================ Online Classes — module cards + inline player (job-card layout) ============================================================ */ .lc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:14px; } .lc-card{ display:flex;flex-direction:column;gap:10px; text-align:left;cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 16px 14px; font:inherit;color:inherit; box-shadow:var(--shadow-xs); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .lc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)} .lc-card:active{transform:translateY(0)} .lc-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .lc-ico{ width:38px;height:38px;border-radius:50%; display:grid;place-items:center;flex-shrink:0; background:var(--bg-2);color:var(--ink-2); font-weight:700;font-size:13px; } .lc-ico-good{background:var(--good);color:#fff} .lc-bk{ display:inline-flex;align-items:center;gap:5px; font-size:11px;font-weight:600;letter-spacing:.02em; padding:4px 9px;border-radius:999px;white-space:nowrap; } .lc-bk-new{background:var(--bg-2);color:var(--muted)} .lc-bk-info{background:var(--accent-soft);color:var(--accent-soft-ink)} .lc-bk-warn{background:var(--bad-soft);color:var(--bad)} .lc-bk-good{background:var(--good-soft);color:var(--good)} .lc-meta{font-size:11.5px;color:var(--muted);font-weight:500} .lc-title{ font-size:16px;font-weight:700;line-height:1.3;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:2.6em; } .lc-tags{display:flex;flex-wrap:wrap;gap:6px} .lc-tag{ font-size:11px;font-weight:500;color:var(--ink-2); background:var(--bg);border:1px solid var(--line); padding:3px 9px;border-radius:6px;white-space:nowrap; } .lc-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:auto;padding-top:11px;border-top:1px solid var(--line); } .lc-foot-l{min-width:0;font-size:12px} .lc-score-good{color:var(--good);font-weight:600} .lc-score-warn{color:var(--bad);font-weight:600} .lc-open{ flex-shrink:0; background:var(--ink);color:#fff; font-size:12.5px;font-weight:600; padding:7px 13px;border-radius:8px;white-space:nowrap; } .lc-card:hover .lc-open{background:var(--accent)} /* Inline YouTube player — responsive 16:9 */ .lc-player{ position:relative;width:100%; aspect-ratio:16/9; background:#000;border-radius:var(--r-md);overflow:hidden; } .lc-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .lc-noembed{padding:18px;background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--r-md)} .lc-back{align-self:flex-start} /* First-login language modal */ .firstrun-lang{padding:30px 26px} @media (max-width:420px){ .firstrun-lang-row{flex-direction:column} } /* Driver.js guided tour — keep the popover above the mobile nav drawer */ .driver-popover{ background:var(--surface);color:var(--ink); border-radius:var(--r-lg);box-shadow:var(--shadow-md); } .driver-popover-title{font-weight:700} .driver-popover .driver-popover-next-btn, .driver-popover .driver-popover-prev-btn{ background:var(--ink);color:#fff;border:0;border-radius:7px; text-shadow:none;font-weight:600; } .driver-popover .driver-popover-prev-btn{background:var(--bg-2);color:var(--ink-2)} /* ============================================================ Finance dashboards (Finance / Accountable Manager only) ============================================================ */ .fin-row{cursor:pointer;transition:background .12s ease} .fin-row:hover{background:var(--bg-2)} /* Manager → User management — Students grouped by batch. Header is the click target; action buttons live inside but stopPropagation. */ .mubatch{border:1px solid var(--line)} .mubatch-hd{transition:background .12s ease} .mubatch-hd:hover{background:var(--bg-2)} .mubatch-hd:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .mubatch-caret{font-size:14px;color:var(--muted)} /* Orphan payments: student account hard-deleted, payment doc preserved for audit. Greyed-out + a pill so totals still match Overview ⇄ Reports. */ .fin-deleted{background:var(--bg-2);opacity:.72} .fin-deleted td{color:var(--muted)!important} .fin-deleted .fw-6{color:var(--ink-2)!important} .pill-deleted{background:var(--bg-2);color:var(--muted);border:1px dashed var(--line)} .fin-bar{ display:block;height:7px;border-radius:999px; background:var(--bg-2);overflow:hidden;margin-bottom:3px; } .fin-bar > span{display:block;height:100%;background:var(--good);border-radius:999px} .tiny.accent{color:var(--accent);font-weight:600} /* Finance — charts (segmented status bar + per-batch bars) */ .seg-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--bg-2)} .seg-bar > span{display:block;height:100%} .seg-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px} .seg-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)} .seg-leg > i{width:10px;height:10px;border-radius:3px;display:inline-block} .seg-leg b{font-weight:700} .bc-row{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr) minmax(120px,150px); gap:10px;align-items:center;cursor:pointer;padding:4px 2px;border-radius:6px} .bc-row:hover{background:var(--bg-2)} .bc-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bc-track{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--bg-2)} .bc-recd{display:block;height:100%;background:var(--good)} .bc-bal{display:block;height:100%;background:var(--warn)} .bc-val{text-align:right;color:var(--muted)} @media (max-width:560px){ .bc-row{grid-template-columns:1fr;gap:3px} .bc-val{text-align:left} } /* Finance — payment editor (flatter, easier-to-follow layout) */ .pe-strip{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:6px} .pe-stat{min-width:74px} .pe-stat .fw-6{font-size:16px;margin-top:2px} .pe-sec{border-top:1px solid var(--line);padding-top:14px;margin-top:14px} .pe-sec-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px} /* Pill-headed accordion sections inside PaymentEditor. Headers are pill-shaped buttons that toggle the body open/closed — cleaner than always-on stacked sections in the long fee+payment+schedule modal. */ .pe-acc{margin-top:10px} .pe-acc-h{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;padding:10px 16px;cursor:pointer; background:var(--bg-2);border:1px solid var(--line); border-radius:999px; font-size:13px;font-weight:600;color:var(--ink); transition:background .12s,border-color .12s; } .pe-acc-h:hover{background:var(--accent-soft);border-color:var(--accent-line,var(--line-strong))} .pe-acc-h .pe-acc-meta{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:auto} .pe-acc-h .pe-acc-chev{font-size:12px;color:var(--muted);transition:transform .15s} .pe-acc.open .pe-acc-h{background:var(--accent);border-color:var(--accent);color:#fff} .pe-acc.open .pe-acc-h:hover{background:var(--accent);filter:brightness(1.05)} .pe-acc.open .pe-acc-h .pe-acc-meta{color:rgba(255,255,255,.85)} .pe-acc.open .pe-acc-h .pe-acc-chev{transform:rotate(90deg);color:#fff} .pe-acc-body{padding:14px 6px 4px;animation:peAccFade .15s ease-out} @keyframes peAccFade{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}} /* Sticky bulk-action bar for the verification queue — appears once ≥1 row is checked. Sits above the mobile bottom-nav (z 70 vs 60). */ .bulk-action-bar{ position:fixed;left:0;right:0;bottom:0;z-index:70; background:var(--surface);border-top:1px solid var(--line-strong); box-shadow:0 -6px 20px rgba(0,0,0,.08); } .bulk-action-bar-inner{ max-width:1280px;margin:0 auto; padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap; } @media (max-width:600px){ .bulk-action-bar-inner{padding:10px 12px} .bulk-action-bar-inner .btn{flex:1 1 auto} } /* Mobile bottom-nav for students — visible only on viewports ≤720px. Desktop browsers ignore this whole block; sidebar nav is the only primary nav up there. Bar slides down out of view on scroll-down so the student can use the full screen while reading content. */ .mobile-bottom-nav{display:none} @media (max-width:720px){ .mobile-bottom-nav{ position:fixed;left:0;right:0;bottom:0;z-index:60; display:flex;align-items:stretch;justify-content:space-around; background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:0 -2px 12px rgba(0,0,0,.06); padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px)); transition:transform .22s ease; } .mobile-bottom-nav.is-hidden{transform:translateY(110%)} .mbn-item{ position:relative;flex:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; padding:8px 4px; background:transparent;border:0;cursor:pointer; color:var(--muted);font-size:11px;font-weight:600; border-radius:8px; transition:color .12s,background .12s; min-width:0; } .mbn-item .mbn-icon{ width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; } .mbn-item .mbn-icon svg{width:20px;height:20px} .mbn-item .mbn-label{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; } .mbn-item.active{color:var(--accent);background:var(--accent-soft)} .mbn-badge{ position:absolute;top:4px;right:calc(50% - 24px); min-width:16px;height:16px;padding:0 5px;border-radius:999px; background:var(--warn);color:#fff;font-size:10px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;line-height:1; } /* Add room at the bottom of every page so the bar never obscures the last interactive control. Sidebar nav-burger keeps its fixed position at top-left; main content scrolls underneath. */ .main{padding-bottom:72px} } /* Loading skeletons — shimmering placeholder rectangles used on the cohort overview pages while the first Firestore snapshot lands. Subtle linear-gradient sweep at 1.4s; respects prefers-reduced-motion. */ .skel-box{ display:inline-block;border-radius:4px; background:linear-gradient(90deg, var(--bg-2) 0%, var(--line) 50%, var(--bg-2) 100%); background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite; } @keyframes skel-shimmer{ 0% {background-position:200% 0} 100% {background-position:-200% 0} } @media (prefers-reduced-motion: reduce){ .skel-box{animation:none;background:var(--bg-2)} } /* Quick-add FAB — mobile-only floating action button bottom-right. Hidden on desktop (the existing in-page "Add" buttons are the primary affordance there). Dispatches a window CustomEvent on click; destination pages opt in by listening for ida:quick-add. */ .quick-add-fab{display:none} @media (max-width:720px){ .quick-add-fab{ position:fixed;right:16px;z-index:65; display:inline-flex;align-items:center;gap:8px; padding:12px 18px 12px 14px; background:var(--accent);color:#fff; border:0;border-radius:999px; box-shadow:0 6px 18px rgba(217,119,87,.35); font-size:14px;font-weight:600;cursor:pointer; transition:transform .12s,box-shadow .12s; } .quick-add-fab:active{transform:scale(0.96)} .quick-add-fab:hover{box-shadow:0 8px 22px rgba(217,119,87,.45)} .quick-add-fab-label{white-space:nowrap} } /* Notification bell + slide-in drawer. Bell sits inside the sidebar's user block (.sb-who). Drawer slides from the right at 360px wide on desktop, full-width on mobile. z-index 80 sits above the bulk-action-bar (70) so the drawer overlays it cleanly. */ .notif-bell{ position:relative;flex-shrink:0; width:32px;height:32px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2); cursor:pointer;transition:background .12s,border-color .12s; } .notif-bell:hover{background:var(--accent-soft);border-color:var(--accent)} .notif-bell-dot{ position:absolute;top:-3px;right:-3px; min-width:16px;height:16px;padding:0 4px;border-radius:999px; background:var(--warn);color:#fff; font-size:9px;font-weight:700;line-height:1; display:inline-flex;align-items:center;justify-content:center; } .notif-scrim{ position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:79; animation:notif-fade .15s ease-out; } .notif-drawer{ position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw); background:var(--surface);border-left:1px solid var(--line-strong); box-shadow:-12px 0 32px rgba(0,0,0,.12); z-index:80;display:flex;flex-direction:column; animation:notif-slide .22s ease-out; } .notif-drawer-hd{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:14px 16px;border-bottom:1px solid var(--line); } .notif-drawer-body{flex:1;overflow:auto;padding:6px 0} .notif-row{ width:100%;display:flex;align-items:flex-start;gap:10px; padding:12px 16px;background:transparent;border:0;cursor:pointer; border-bottom:1px solid var(--line); text-align:left;position:relative; transition:background .1s; } .notif-row:hover{background:var(--bg-2)} .notif-row-unread{background:var(--accent-soft)} .notif-row-unread:hover{background:var(--accent-soft);filter:brightness(0.97)} .notif-dot{ flex-shrink:0;width:8px;height:8px;border-radius:50%; margin-top:6px; } .notif-unread-pip{ position:absolute;top:14px;right:14px; width:8px;height:8px;border-radius:50%;background:var(--accent); } @keyframes notif-slide{ from{transform:translateX(100%)} to {transform:translateX(0)} } @keyframes notif-fade{from{opacity:0}to{opacity:1}} /* Student-name uniform CAPS rule. Apply this class to any span / heading that renders a student's fullName so the academy gets one consistent visual treatment without each caller having to .toUpperCase() inline. Underlying data stays mixed-case for emails / invoices / official artefacts. */ .student-name{text-transform:uppercase}