/* ============================================================================
   ui2 — new admin design system. Loaded ONLY when <html data-ui="new">.
   Every selector is scoped under [data-ui="new"] and uses !important where it
   must beat the classic Bootstrap-3 rules that stay linked — so it can NEVER
   affect classic users. A cohesive, rounded, elevated platform look.
   ============================================================================ */

:root[data-ui="new"] {
    /* brand */
    --u-acc: #175bb0;
    --u-acc2: #1b66c1;
    --u-acc-ink: #114591;
    --u-grad: linear-gradient(135deg, #1b66c1 0%, #175bb0 100%);
    /* the 2026 second brand colour - highlights only (active item, progress, approvals) */
    --u-mint: #2ec4a5;
    --u-mint-ink: #0a6f5d;
    --u-mint-bg: #dcf5ee;
    --u-mint-dark: #053b33;
    /* semantic */
    --u-ok: #2fa96a;
    --u-warn: #e0a13a;
    --u-bad: #d0524f;
    /* neutrals (slight sky bias) */
    --u-ink: #12233f;
    --u-soft: #5b6b85;
    --u-line: #dfe8f4;
    --u-line-soft: #eef2f8;
    --u-surface: #ffffff;
    --u-surface2: #f7f9fc;
    --u-bg: #eef3fa;
    /* effects */
    --u-ring: rgba(23, 91, 176, 0.18);
    --u-sh1: 0 2px 8px rgba(16, 42, 92, 0.05);
    --u-sh2: 0 6px 22px rgba(16, 42, 92, 0.08);
    --u-sh3: 0 18px 48px rgba(16, 42, 92, 0.16);
    /* radius scale — generous, rounded finishes */
    --u-r1: 12px;
    --u-r2: 18px;
    --u-r3: 24px;
    --u-rp: 999px;
    --u-font: "Rubik", "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
    /* Light only. Declared so the browser paints native widgets — scrollbars,
       date/time pickers, select popups, autofill — light as well; without it a
       phone in dark mode still renders those dark on an otherwise light page. */
    color-scheme: light;
}

/* ----------------------------------------------------------------------------
   NO DARK MODE.

   ui2 used to redefine its whole token set under `prefers-color-scheme: dark`.
   It only ever covered the tokens, while a large amount of the classic
   Bootstrap-3 layer underneath keeps hardcoded #fff surfaces — so a phone set to
   dark rendered the app half-dark: dark page, dark cells, white cards floating
   in the middle of them. An incomplete dark theme reads worse than none.

   The screen-level designs carry their own copy of the same dark block, injected
   from JS as a <style> tag rather than living here:
       client/src/ui2/screens/Login.js
       client/src/ui2/screens/SettingConf.js
       client/src/ui2/screens/SettingMisc.js
       client/src/ui2/screens/SettingStudentsApp.js
       client/src/ui2/screens/SiteSettings.js
   Those are inside the webpack bundles, and rebuilding a bundle here rewrites it
   wholesale under a newer toolchain — a far bigger risk than this stylesheet is
   worth. So they are neutralised from here instead: `:root[data-ui="new"] .ss-*`
   is (0,2,0) against their own (0,1,0), which wins on specificity no matter what
   order the tags end up in. Values below are copied verbatim from each screen's
   own light block. If those bundles are ever rebuilt for another reason, delete
   the dark blocks at source and this override can go with them.
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root[data-ui="new"] .ss-login,
    :root[data-ui="new"] .ss-settings {
        --surface: #fff;
        --surface2: #f7fafb;
        --ink: #10242f;
        --soft: #5f7885;
        --line: #e0e9ee;
        --ring: rgba(0, 139, 204, .22);
        --acc-ink: #0479b0;
        --shadow: 0 4px 20px rgba(16, 43, 60, .06);
    }
    /* Login.js also flips its two alert colours; restore those too. */
    :root[data-ui="new"] .ss-login .ss-alert.ok { color: #1f8a5a; }
    :root[data-ui="new"] .ss-login .ss-alert.err { color: #c0392b; }
}

/* ---- base ---- */
:root[data-ui="new"] body { font-family: var(--u-font); background: var(--u-bg); color: var(--u-ink); -webkit-font-smoothing: antialiased; }
:root[data-ui="new"] h1, :root[data-ui="new"] h2, :root[data-ui="new"] h3, :root[data-ui="new"] h4, :root[data-ui="new"] h5,
:root[data-ui="new"] .h3, :root[data-ui="new"] .h4 { font-family: var(--u-font); font-weight: 700; letter-spacing: -.01em; }
:root[data-ui="new"] a { color: var(--u-acc-ink); }
:root[data-ui="new"] a:hover { color: var(--u-acc); }

/* ---- top navbar ---- */
:root[data-ui="new"] .navbar.nav-app,
:root[data-ui="new"] .nav-app.navbar-fixed-top {
    /* one flat sky, not the gradient: in the apps the status bar above it is #175BB0 and the two must read as one band */
    background: #175bb0 !important; border: none !important; border-radius: 0 !important;
    box-shadow: 0 2px 14px rgba(12, 46, 96, 0.30); font-family: var(--u-font);
}
:root[data-ui="new"] .nav-app .nav-brand { font-family: var(--u-font); font-weight: 700; color: #fff !important; line-height: 1.15; letter-spacing: -.01em; }
:root[data-ui="new"] .nav-app .nav-brand small { opacity: 0.95; font-weight: 500; font-size: 16px; }
/* vertically center the header content on desktop */
@media (min-width: 768px) {
    :root[data-ui="new"] .nav-app { display: flex; align-items: center; min-height: 62px; }
    :root[data-ui="new"] .nav-app > .navbar-header { float: none; align-self: center; }
    :root[data-ui="new"] .nav-app > .navbar-collapse { float: none; flex: 1 1 auto; align-self: stretch; display: flex !important; align-items: center; padding: 0; }
    :root[data-ui="new"] .nav-app .navbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; float: none; margin-inline-start: auto; transform: translateY(3px); }
}
:root[data-ui="new"] .nav-app .navbar-right .btn,
:root[data-ui="new"] .nav-app .navbar-right .dropdown-toggle {
    border-radius: var(--u-r1) !important; font-family: var(--u-font); font-weight: 500; font-size: 14px;
    border: 1px solid rgba(255,255,255,.04) !important; background: rgba(255,255,255,.11) !important;
    color: #fff !important; margin: 0 2px !important; box-shadow: none !important; padding: 9px 16px !important;
    white-space: nowrap; transition: background .16s, transform .16s;
}
:root[data-ui="new"] .nav-app .navbar-right .btn:hover,
:root[data-ui="new"] .nav-app .navbar-right .dropdown-toggle:hover { background: rgba(255,255,255,.22) !important; transform: translateY(-1px); }
:root[data-ui="new"] .nav-app .navbar-right .btn.btn-info,
:root[data-ui="new"] .nav-app .navbar-right .btn-info.dropdown-toggle { background: #fff !important; color: var(--u-acc-ink) !important; font-weight: 600; box-shadow: 0 3px 12px rgba(0,0,0,.15) !important; }
:root[data-ui="new"] .nav-app .navbar-right .caret { opacity: .7; margin-inline-start: 4px; }
:root[data-ui="new"] .nav-app .logo { height: 34px !important; }
:root[data-ui="new"] .nav-app .navbar-toggle { border-radius: var(--u-r1) !important; border-color: rgba(255,255,255,.4) !important; }
:root[data-ui="new"] .nav-app .navbar-toggle .icon-bar { background: #fff !important; }

/* ---- content top bar (greeting + breadcrumb) ---- */
:root[data-ui="new"] .top-app-header { background: var(--u-surface) !important; border-bottom: 1px solid var(--u-line) !important; box-shadow: var(--u-sh1); padding-top: 16px !important; padding-bottom: 16px !important; display: flex !important; align-items: center !important; justify-content: space-between; gap: 16px; }
/* greeting: bigger, with a rounded gradient accent bar as a section marker */
:root[data-ui="new"] .welcome-teacher { color: var(--u-ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; order: 2; display: inline-flex; align-items: center; gap: 11px; }
:root[data-ui="new"] .welcome-teacher::before { content: ""; flex: none; width: 4px; height: 22px; border-radius: 999px; background: var(--u-grad); box-shadow: 0 2px 6px rgba(23, 91, 176, .30); }
/* right side: home link + info become two matching pills */
:root[data-ui="new"] .top-app-header .breadcrumb { background: transparent !important; margin-bottom: 0; padding: 0; border-radius: 0 !important; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; transform: translateY(5px); }
:root[data-ui="new"] .top-app-header .breadcrumb > li { display: inline-flex; }
:root[data-ui="new"] .top-app-header .breadcrumb > li > a { display: inline-flex; align-items: center; gap: 6px; background: var(--u-surface2); border: 1px solid var(--u-line); border-radius: 999px; padding: 5px 14px; line-height: 1.2; color: var(--u-acc-ink) !important; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
:root[data-ui="new"] .top-app-header .breadcrumb > li > a:hover { background: rgba(23, 91, 176, .08); border-color: var(--u-acc); color: var(--u-acc) !important; }
:root[data-ui="new"] .top-app-header .breadcrumb a, :root[data-ui="new"] .top-app-header .breadcrumb > .active { color: var(--u-acc-ink) !important; font-weight: 500; }
:root[data-ui="new"] .top-app-header .glyphicon-home { color: var(--u-acc) !important; }
:root[data-ui="new"] .top-app-header .widget-wrapper {
    display: inline-flex !important; align-items: center; gap: 5px;
    background: var(--u-surface2); border: 1px solid var(--u-line); border-radius: 999px;
    padding: 5px 14px; line-height: 1.2; margin-inline-start: 0; cursor: pointer; transition: background .15s, border-color .15s;
}
:root[data-ui="new"] .top-app-header .widget-wrapper:hover { border-color: var(--u-acc); }
:root[data-ui="new"] .top-app-header .widget-wrapper:hover { background: rgba(23, 91, 176, 0.08); }
:root[data-ui="new"] .top-app-header .glyphicon-info-sign { color: var(--u-acc) !important; }
:root[data-ui="new"] .top-app-header .pointy { color: var(--u-acc-ink) !important; font-weight: 500; top: 0; font-size: 13px; vertical-align: middle; }

/* ---- login screen: give the title room below the header ---- */
:root[data-ui="new"] .login h1 { margin-top: 32px !important; }
/* the login cards keep a 16px gutter on a phone (common.css centres a 420px box with no side margin) */
:root[data-ui="new"] .login { max-width: 452px; padding-inline: 16px; }
:root[data-ui="new"] .cal-title { font-family: var(--u-font); font-weight: 700; }

/* ---- buttons: rounded pills, cohesive ---- */
:root[data-ui="new"] .btn {
    border-radius: var(--u-rp) !important; font-family: var(--u-font); font-weight: 500;
    border: 1.5px solid transparent; box-shadow: none; padding: 8px 20px;
    transition: transform .12s, box-shadow .15s, background .15s, filter .15s;
}
:root[data-ui="new"] .btn:hover { transform: translateY(-1px); }
:root[data-ui="new"] .btn:active { transform: translateY(0); }
:root[data-ui="new"] .btn-sm, :root[data-ui="new"] .btn-xs { padding: 5px 15px; }
:root[data-ui="new"] .btn-lg { padding: 11px 28px; }
:root[data-ui="new"] .btn-primary, :root[data-ui="new"] .btn-success {
    background: var(--u-grad) !important; border-color: transparent !important; color: #fff !important;
    box-shadow: 0 6px 16px rgba(23, 91, 176, 0.26);
}
:root[data-ui="new"] .btn-primary:hover, :root[data-ui="new"] .btn-success:hover { box-shadow: 0 9px 22px rgba(23, 91, 176, 0.34) !important; filter: brightness(1.03); }
:root[data-ui="new"] .btn-default { background: var(--u-surface) !important; border-color: var(--u-line) !important; color: var(--u-ink) !important; }
:root[data-ui="new"] .btn-default:hover { background: var(--u-surface2) !important; border-color: var(--u-acc) !important; color: var(--u-acc-ink) !important; }
:root[data-ui="new"] .btn-info { background: rgba(23, 91, 176,.12) !important; color: var(--u-acc-ink) !important; border-color: transparent !important; }
:root[data-ui="new"] .btn-info:hover { background: rgba(23, 91, 176,.2) !important; }
:root[data-ui="new"] .btn-danger { background: var(--u-bad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 16px rgba(208,82,79,.24); }
:root[data-ui="new"] .btn-warning { background: var(--u-warn) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 16px rgba(224,161,58,.24); }
:root[data-ui="new"] .btn-link { color: var(--u-acc-ink) !important; box-shadow: none; }
:root[data-ui="new"] .btn-group > .btn { border-radius: var(--u-rp) !important; }

/* ---- panels -> elevated cards ---- */
:root[data-ui="new"] .panel {
    border: 1px solid var(--u-line) !important; border-radius: var(--u-r2) !important;
    box-shadow: var(--u-sh2) !important; background: var(--u-surface) !important; overflow: hidden;
    transition: box-shadow .22s ease;
}
:root[data-ui="new"] .panel:hover { box-shadow: 0 10px 30px rgba(16, 42, 92,.10) !important; }
:root[data-ui="new"] .panel-heading { background: var(--u-surface2) !important; border-bottom: 1px solid var(--u-line) !important; font-family: var(--u-font); font-weight: 600; padding: 15px 20px !important; color: var(--u-ink) !important; }
:root[data-ui="new"] .panel-title { font-family: var(--u-font); font-weight: 600; font-size: 16px; }
:root[data-ui="new"] .panel-body { padding: 20px !important; }
:root[data-ui="new"] .panel-primary { border-color: rgba(23, 91, 176,.28) !important; }
:root[data-ui="new"] .panel-primary > .panel-heading { background: var(--u-grad) !important; color: #fff !important; border: none !important; }
:root[data-ui="new"] .well { background: var(--u-surface2) !important; border: 1px solid var(--u-line) !important; border-radius: var(--u-r2) !important; box-shadow: none !important; }

/* ---- forms ---- */
:root[data-ui="new"] .form-control {
    border: 1.5px solid var(--u-line) !important; border-radius: var(--u-r1) !important;
    background: var(--u-surface2) !important; color: var(--u-ink) !important; box-shadow: none !important;
    font-family: var(--u-font); height: auto; padding: 10px 13px; transition: border-color .15s, box-shadow .15s, background .15s;
}
:root[data-ui="new"] .form-control:focus { border-color: var(--u-acc) !important; background: var(--u-surface) !important; box-shadow: 0 0 0 4px var(--u-ring) !important; }
:root[data-ui="new"] .control-label, :root[data-ui="new"] label { font-family: var(--u-font); font-weight: 600; color: var(--u-ink); }
:root[data-ui="new"] .help-block { color: var(--u-soft); font-size: 12px; }
:root[data-ui="new"] .input-group-addon { background: var(--u-surface2) !important; border: 1.5px solid var(--u-line) !important; border-radius: var(--u-r1) !important; color: var(--u-soft) !important; }
:root[data-ui="new"] .has-error .form-control { border-color: var(--u-bad) !important; }
:root[data-ui="new"] input[type="checkbox"], :root[data-ui="new"] input[type="radio"] { accent-color: var(--u-acc); width: 16px; height: 16px; }
:root[data-ui="new"] select.form-control { border-radius: var(--u-r1) !important; }
:root[data-ui="new"] input.score, :root[data-ui="new"] input[type="number"].form-control { border-radius: 10px !important; border: 1.5px solid var(--u-line) !important; background: var(--u-surface2) !important; font-family: var(--u-font); }
:root[data-ui="new"] input.score:focus { border-color: var(--u-acc) !important; box-shadow: 0 0 0 3px var(--u-ring) !important; outline: none; }

/* ---- tables ---- */
:root[data-ui="new"] .table { font-family: var(--u-font); background: var(--u-surface); border-radius: var(--u-r2); overflow: hidden; }
:root[data-ui="new"] .table > thead > tr > th { background: var(--u-surface2) !important; border-bottom: 2px solid var(--u-line) !important; color: var(--u-soft) !important; font-weight: 700; padding: 12px 13px !important; }
:root[data-ui="new"] .table > tbody > tr > td { border-top: 1px solid var(--u-line-soft) !important; padding: 6px 6px !important; }
/* schedule grid: keep cells tight (the re-skin's roomy padding bloats the calendar) */
:root[data-ui="new"] td.sc-range,
:root[data-ui="new"] .table > tbody > tr > td.sc-range { padding: 2px 4px !important; }
:root[data-ui="new"] .table-hover > tbody > tr:hover { background: rgba(23, 91, 176,.05) !important; }
:root[data-ui="new"] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--u-surface2) !important; }
:root[data-ui="new"] .table-bordered, :root[data-ui="new"] .table-bordered > tbody > tr > td, :root[data-ui="new"] .table-bordered > thead > tr > th { border-color: var(--u-line) !important; }

/* ---- nav tabs / pills ---- */
:root[data-ui="new"] .nav-tabs { border-bottom: 2px solid var(--u-line) !important; }
:root[data-ui="new"] .nav-tabs > li > a { border: none !important; border-radius: var(--u-r1) var(--u-r1) 0 0 !important; font-family: var(--u-font); font-weight: 500; color: var(--u-soft) !important; }
:root[data-ui="new"] .nav-tabs > li.active > a { color: var(--u-acc-ink) !important; background: transparent !important; border-bottom: 3px solid var(--u-acc) !important; }
:root[data-ui="new"] .nav-pills > li > a { border-radius: var(--u-rp) !important; font-family: var(--u-font); }
:root[data-ui="new"] .nav-pills > li.active > a { background: var(--u-grad) !important; }

/* ---- modals ---- */
:root[data-ui="new"] .modal-content { border-radius: var(--u-r3) !important; border: none !important; box-shadow: var(--u-sh3) !important; font-family: var(--u-font); overflow: hidden; }
:root[data-ui="new"] .modal-header { border-bottom: 1px solid var(--u-line) !important; padding: 18px 24px !important; background: var(--u-surface2); }
:root[data-ui="new"] .modal-title { font-weight: 700; }
:root[data-ui="new"] .modal-body { padding: 22px 24px !important; }
:root[data-ui="new"] .modal-footer { border-top: 1px solid var(--u-line) !important; padding: 15px 24px !important; }

/* ---- alerts ---- */
:root[data-ui="new"] .alert { border-radius: var(--u-r1) !important; border: 1px solid transparent; font-family: var(--u-font); }
:root[data-ui="new"] .alert-success { background: rgba(47,169,106,.12) !important; color: #1f7a4c !important; border-color: rgba(47,169,106,.25) !important; }
:root[data-ui="new"] .alert-danger { background: rgba(208,82,79,.10) !important; color: #a83b38 !important; border-color: rgba(208,82,79,.25) !important; }
:root[data-ui="new"] .alert-warning { background: rgba(224,161,58,.12) !important; color: #9a6a12 !important; border-color: rgba(224,161,58,.25) !important; }
:root[data-ui="new"] .alert-info { background: rgba(23, 91, 176,.10) !important; color: var(--u-acc-ink) !important; border-color: rgba(23, 91, 176,.22) !important; }

/* ---- labels / badges -> pills ---- */
:root[data-ui="new"] .label, :root[data-ui="new"] .badge { border-radius: var(--u-rp) !important; font-family: var(--u-font); font-weight: 600; padding: 4px 12px; }
:root[data-ui="new"] .badge { background: var(--u-acc) !important; }
:root[data-ui="new"] .label-success { background: var(--u-ok) !important; }
:root[data-ui="new"] .label-danger { background: var(--u-bad) !important; }
:root[data-ui="new"] .label-warning { background: var(--u-warn) !important; }
:root[data-ui="new"] .label-info, :root[data-ui="new"] .label-primary { background: var(--u-acc) !important; }

/* ---- dropdown menus ---- */
:root[data-ui="new"] .dropdown-menu { border-radius: var(--u-r2) !important; border: 1px solid var(--u-line) !important; box-shadow: var(--u-sh3) !important; padding: 8px !important; font-family: var(--u-font); }
:root[data-ui="new"] .dropdown-menu > li > a { border-radius: 10px !important; padding: 9px 14px !important; }
:root[data-ui="new"] .dropdown-menu > li > a:hover { background: rgba(23, 91, 176,.10) !important; color: var(--u-acc-ink) !important; }
:root[data-ui="new"] .dropdown-menu > .divider { background: var(--u-line); }
:root[data-ui="new"] .ui2-toggle-item > a { color: var(--u-acc-ink) !important; font-weight: 600; }

/* ---- pagination / breadcrumb / list-group ---- */
:root[data-ui="new"] .pagination > li > a { border-color: var(--u-line) !important; color: var(--u-acc-ink) !important; font-family: var(--u-font); }
:root[data-ui="new"] .pagination > li:first-child > a { border-radius: var(--u-rp) 0 0 var(--u-rp) !important; }
:root[data-ui="new"] .pagination > li:last-child > a { border-radius: 0 var(--u-rp) var(--u-rp) 0 !important; }
:root[data-ui="new"] .pagination > .active > a { background: var(--u-grad) !important; border-color: transparent !important; }
:root[data-ui="new"] .breadcrumb { background: var(--u-surface2) !important; border-radius: var(--u-rp) !important; font-family: var(--u-font); }
:root[data-ui="new"] .list-group-item { border-color: var(--u-line) !important; font-family: var(--u-font); }
:root[data-ui="new"] .list-group-item:first-child { border-radius: var(--u-r1) var(--u-r1) 0 0 !important; }
:root[data-ui="new"] .list-group-item:last-child { border-radius: 0 0 var(--u-r1) var(--u-r1) !important; }
:root[data-ui="new"] .list-group-item.active { background: var(--u-grad) !important; border-color: transparent !important; }

/* ---- misc ---- */
:root[data-ui="new"] .progress { border-radius: var(--u-rp) !important; height: 10px; background: var(--u-surface2); }
:root[data-ui="new"] .progress-bar { background: var(--u-grad) !important; }
:root[data-ui="new"] hr { border-top-color: var(--u-line); }
:root[data-ui="new"] .tooltip-inner { background: var(--u-ink) !important; border-radius: 8px !important; font-family: var(--u-font); padding: 6px 10px; }
:root[data-ui="new"] .popover { border-radius: var(--u-r2) !important; border: 1px solid var(--u-line) !important; box-shadow: var(--u-sh2) !important; font-family: var(--u-font); }
:root[data-ui="new"] .well, :root[data-ui="new"] .thumbnail { border-radius: var(--u-r2) !important; }
:root[data-ui="new"] img.img-rounded, :root[data-ui="new"] .img-thumbnail { border-radius: var(--u-r1) !important; }

/* ---- sidebar shortcut buttons: breathing room between them ---- */
:root[data-ui="new"] .self-conf > div,
:root[data-ui="new"] .self-conf > button,
:root[data-ui="new"] .self-conf > a { margin-bottom: 7px !important; }
:root[data-ui="new"] .self-conf > div:last-child,
:root[data-ui="new"] .self-conf > button:last-child { margin-bottom: 0 !important; }

/* ============================ main-screen cards & schedule ============================ */
/* app cards (sidebar panels etc.) — generously rounded, soft elevation */
:root[data-ui="new"] .noticeable {
    border-radius: 20px !important;
    box-shadow: var(--u-sh2) !important;
    border: 1px solid var(--u-line) !important;
    padding: 18px !important;
}
/* schedule grid — round the whole grid, soften the lines */
:root[data-ui="new"] .table.table-bordered {
    border-radius: 18px !important; overflow: hidden;
    border: 1px solid var(--u-line) !important; box-shadow: var(--u-sh2);
}
:root[data-ui="new"] .table.table-bordered > tbody > tr > td,
:root[data-ui="new"] .table.table-bordered > thead > tr > th { border-color: var(--u-line-soft) !important; }
:root[data-ui="new"] .table.table-bordered > thead > tr > th { background: var(--u-surface2) !important; color: var(--u-ink) !important; font-weight: 600; }
/* lesson chips get a softer rounded look */
:root[data-ui="new"] .tt-h-range { border-radius: 999px !important; }

/* ============================================================================
   SECOND-PASS POLISH — system-wide upgrades from the design audit.
   Every rule scoped under [data-ui="new"]; classic stays untouched.
   ============================================================================ */

/* ---- kill the legacy olive frame behind nested contact/master tables ---- */
/* common.css paints tr.master-tr #5b610d (army green); reframe as a soft accent mat */
:root[data-ui="new"] tr.master-tr { background-color: rgba(23, 91, 176, .08) !important; }
:root[data-ui="new"] .table > tbody > tr.master-tr > td { padding: 4px !important; }

/* ---- disabled buttons must read as inactive (ui2 had no disabled state) ---- */
:root[data-ui="new"] .btn:disabled,
:root[data-ui="new"] .btn.disabled,
:root[data-ui="new"] .btn[disabled] {
    opacity: 1 !important; background: var(--u-surface2) !important; background-image: none !important;
    color: var(--u-soft) !important; border-color: var(--u-line) !important; box-shadow: none !important;
    filter: none !important; transform: none !important; cursor: not-allowed !important;
}
:root[data-ui="new"] .btn:disabled:hover,
:root[data-ui="new"] .btn.disabled:hover,
:root[data-ui="new"] .btn[disabled]:hover {
    transform: none !important; box-shadow: none !important; filter: none !important; background: var(--u-surface2) !important;
}

/* ---- nav-tabs / dashboard tabs-top: stop reading as bare underlined links ---- */
:root[data-ui="new"] .nav-tabs > li > a { text-decoration: none !important; padding: 9px 16px !important; transition: background .15s, color .15s; }
:root[data-ui="new"] .nav-tabs > li:not(.active) > a:hover { background: var(--u-surface2) !important; color: var(--u-acc-ink) !important; }
:root[data-ui="new"] .nav-tabs.tabs-top { display: flex !important; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--u-line) !important; }
:root[data-ui="new"] .nav-tabs.tabs-top > li > a { background: transparent !important; border: none !important; color: var(--u-soft) !important; font-weight: 600; font-size: 14px; border-radius: var(--u-r1) var(--u-r1) 0 0 !important; }
:root[data-ui="new"] .nav-tabs.tabs-top > li.active > a,
:root[data-ui="new"] .nav-tabs.tabs-top > li.active > a:hover { color: var(--u-acc-ink) !important; background: rgba(23, 91, 176, .08) !important; border-bottom: 3px solid var(--u-acc) !important; }

/* ---- visible keyboard focus ring (ui2 killed the default outline via box-shadow:none) ---- */
:root[data-ui="new"] .btn:focus-visible,
:root[data-ui="new"] a:focus-visible,
:root[data-ui="new"] .nav-tabs > li > a:focus-visible,
:root[data-ui="new"] .nav-pills > li > a:focus-visible,
:root[data-ui="new"] .dropdown-menu > li > a:focus-visible,
:root[data-ui="new"] .pagination > li > a:focus-visible,
:root[data-ui="new"] .list-group-item:focus-visible {
    outline: 2px solid var(--u-acc) !important; outline-offset: 2px !important;
}

/* ---- table row-action pencil: legacy flat green -> brand accent ---- */
:root[data-ui="new"] td.actions .glyphicon-pencil { color: var(--u-acc) !important; }

/* ---- report / directory tables: add a row-hover cue (they lack .table-hover) ---- */
/* target the ROW, not td, so grade color-coded cells keep their inline colors; honor the .nohover-tbl opt-out */
:root[data-ui="new"] .table.table-condensed:not(.nohover-tbl) > tbody > tr:hover { background: rgba(23, 91, 176, .05) !important; }

/* ---- month calendar: retint off-brand legacy today/hover into the teal system ---- */
:root[data-ui="new"] td.tday { background: rgba(23, 91, 176, .10) !important; box-shadow: inset 0 0 0 2px var(--u-ring); color: var(--u-acc-ink) !important; }
:root[data-ui="new"] table.month-cal tbody td.cal-day:hover { background: rgba(23, 91, 176, .07) !important; }

/* ---- portal site-manager (.pa-*): rebrand off legacy #096bb8 onto ui2 tokens ---- */
:root[data-ui="new"] .pa-btn-primary { background: var(--u-grad) !important; box-shadow: 0 6px 16px rgba(23, 91, 176, .26) !important; }
:root[data-ui="new"] .pa-btn-primary:hover { filter: brightness(1.03); box-shadow: 0 9px 22px rgba(23, 91, 176, .34) !important; }
:root[data-ui="new"] .pa-action-btn.pa-action-edit { background: var(--u-grad) !important; border-color: transparent !important; }
:root[data-ui="new"] .pa-page-title:hover,
:root[data-ui="new"] .pa-expand-btn:hover,
:root[data-ui="new"] .pa-btn-outline:hover { color: var(--u-acc) !important; }
:root[data-ui="new"] .pa-btn-outline:hover,
:root[data-ui="new"] .pa-btn-dashed:hover { border-color: var(--u-acc) !important; background: rgba(23, 91, 176, .06) !important; }
:root[data-ui="new"] .pa-title,
:root[data-ui="new"] .pa-section-title,
:root[data-ui="new"] .pa-home-title { color: #12233f !important; }
:root[data-ui="new"] .pa-home-card { border-color: rgba(23, 91, 176, .28) !important; }
:root[data-ui="new"] .pa-loading-spinner { border-top-color: var(--u-acc) !important; }
/* portal page cards: resting elevation + keyboard-reachable actions (theme-safe surfaces) */
:root[data-ui="new"] .pa-page-card { border-color: var(--u-line) !important; background: var(--u-surface) !important; box-shadow: var(--u-sh1) !important; }
:root[data-ui="new"] .pa-page-card.pa-sub-page { background: var(--u-surface2) !important; }
:root[data-ui="new"] .pa-page-card:hover { border-color: rgba(23, 91, 176, .28) !important; box-shadow: var(--u-sh2) !important; background: var(--u-surface) !important; }
:root[data-ui="new"] .pa-page-card:focus-within .pa-page-actions { opacity: 1; }

/* ---- settings-app form toggles ---- */
/* bordered checkbox rows (students/parents screen): show a clear checked state, matching the sibling radios */
:root[data-ui="new"] .ss-toggle:has(input:checked):not(:has(.ss-track)) {
    border-color: var(--u-acc) !important; background: rgba(23, 91, 176, .08) !important;
    color: var(--u-acc-ink) !important; box-shadow: 0 0 0 3px var(--ring, var(--u-ring)) !important;
}
/* iOS switch off-track: darken so the control reads on a white card */
:root[data-ui="new"] .ss-toggle .ss-check:not(:checked) ~ .ss-track { background: rgba(91, 107, 133, .32) !important; }

/* ---- modal chrome: circular close target + tinted, blurred backdrop ---- */
:root[data-ui="new"] .modal-header .close {
    display: inline-flex; align-items: center; justify-content: center; opacity: .5;
    width: 34px; height: 34px; padding: 0; border-radius: var(--u-rp) !important;
    font-family: var(--u-font); font-size: 22px; font-weight: 400; line-height: 1;
    color: var(--u-soft) !important; text-shadow: none !important; transition: background .15s, opacity .15s, color .15s;
}
:root[data-ui="new"] .modal-header .close:hover,
:root[data-ui="new"] .modal-header .close:focus { opacity: 1; background: var(--u-line-soft); color: var(--u-bad) !important; }
/* every popup (Modal, ModalPanel, FloatingWindow, the contact form's own, the site manager's .sm-modal): the page stays
   visible behind a light tint and a blur, and the box fades in. The tint is in the colour, not in opacity - opacity would
   also fade the blur, and a backdrop that holds its own dialog (StudentContactForm) went solid navy at opacity 1.
   opacity is not !important: an !important value beats the fade-in animation */
:root[data-ui="new"] .modal-backdrop, :root[data-ui="new"] .sm-modal-back {
    background: rgba(18, 35, 63, .3) !important; opacity: 1;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: u-fade-in .2s ease-out;
}
:root[data-ui="new"] .modal-dialog, :root[data-ui="new"] .sm-modal { animation: u-pop-in .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes u-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes u-pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    :root[data-ui="new"] :is(.modal-backdrop, .sm-modal-back, .modal-dialog, .sm-modal) { animation: none; }
}

/* ---- global micro-polish: branded scrollbars + text selection ---- */
:root[data-ui="new"] * { scrollbar-width: thin; scrollbar-color: var(--u-soft) transparent; }
:root[data-ui="new"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-ui="new"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-ui="new"] ::-webkit-scrollbar-thumb { background: var(--u-soft); border-radius: var(--u-rp); border: 2px solid transparent; background-clip: content-box; }
:root[data-ui="new"] ::-webkit-scrollbar-thumb:hover { background: var(--u-ink); background-clip: content-box; }
:root[data-ui="new"] ::selection { background: rgba(23, 91, 176, .22); color: var(--u-ink); }
:root[data-ui="new"] ::-moz-selection { background: rgba(23, 91, 176, .22); color: var(--u-ink); }

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    :root[data-ui="new"] *,
    :root[data-ui="new"] *::before,
    :root[data-ui="new"] *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
        animation-iteration-count: 1 !important; scroll-behavior: auto !important;
    }
    :root[data-ui="new"] .btn:hover,
    :root[data-ui="new"] .panel:hover,
    :root[data-ui="new"] .nav-app .navbar-right .btn:hover { transform: none !important; }
}

/* ============================================================================
   PHONE LAYER — everything below 768px.
   ============================================================================
   The teacher app was laid out for a desktop and merely *shrunk* on a phone: it
   never reflowed. Measured on a 390x844 viewport, signed in as a real teacher:

     - the fixed top navbar computes to width:400px against a 390px viewport, so
       the document scrolls 10px sideways and every block under it reports a
       10px offset. One cause, eight symptoms.
     - the two action cards (.scheduler-actions) keep their desktop column width
       of 230px and sit 154px in from the start edge — 40% of the screen is empty
       margin, and it is why they look misaligned against the diary card above.
     - the diary table lays out to 263px inside its 390px card, so the lesson
       column is a sliver next to 127px of nothing.
     - 20 touch targets are under 44px: the .btn-xs action buttons are 31px tall
       at 12.8px type, and the shortcut links are 24px.

   All of it is presentation, so all of it is fixed here rather than in a bundle.
   Scoped to the ui2 flag and to phones, so the desktop layout is untouched.
   ============================================================================ */
@media (max-width: 767px) {

    /* --- 1. the sideways scroll ------------------------------------------ */
    /* The navbar is explicitly 400px wide. Pin it to the viewport instead; the
       inset pair is what actually sizes a fixed box, so width goes back to auto
       rather than fighting the declaration with a second number. */
    :root[data-ui="new"] .nav-app.navbar-fixed-top,
    :root[data-ui="new"] .navbar.nav-app {
        inset-inline: 0 !important;
        width: auto !important;
        max-width: 100vw !important;
    }
    /* Nothing on a phone should scroll the page sideways. This is the backstop,
       not the fix — the rule above is the fix. */
    :root[data-ui="new"] body { overflow-x: hidden; }

    /* --- 2. cards use the whole screen ----------------------------------- */
    /* .noticeable is the card shell. On desktop these are columns; on a phone
       they stack, so the desktop width and start-margin are what strand them. */
    :root[data-ui="new"] .noticeable {
        width: auto !important;
        max-width: none !important;
        float: none !important;
        display: block !important;
        margin-inline: 0 !important;
        margin-bottom: 12px !important;
        padding: 14px !important;
    }

    /* --- 3. the diary is the screen's reason to exist -------------------- */
    /* Let the day table claim the card instead of shrink-wrapping to its widest
       cell. The time column is fixed because its content is fixed ("08:30-09:15")
       and everything left over belongs to the lesson. */
    :root[data-ui="new"] .teacher-schedule table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    :root[data-ui="new"] .teacher-schedule table td:first-child,
    :root[data-ui="new"] .teacher-schedule table th:first-child {
        width: 6.9em !important;
        white-space: nowrap;
    }
    :root[data-ui="new"] .teacher-schedule table td,
    :root[data-ui="new"] .teacher-schedule table th {
        padding: 10px 8px !important;
        vertical-align: middle;
        overflow-wrap: anywhere;
    }
    /* A row a finger can land on, and a lesson cell that is still visibly a
       target when the day is empty. */
    :root[data-ui="new"] .teacher-schedule table tbody td { min-height: 44px; }
    :root[data-ui="new"] .teacher-schedule table tbody tr { min-height: 44px; }

    /* --- 4. touch targets ------------------------------------------------ */
    /* 44px is the floor. .btn-xs exists to be small on a dense desktop screen;
       on a phone these ARE the navigation, so the size modifier is dropped. */
    :root[data-ui="new"] .btn-xs,
    :root[data-ui="new"] .btn-sm,
    :root[data-ui="new"] .btn {
        min-height: 44px !important;
        padding: 11px 14px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }
    /* The action stack: one full-width row per action, with room between them so
       a mis-tap lands on nothing rather than on the next item. */
    :root[data-ui="new"] .scheduler-actions .btn {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100% !important;
        text-align: start !important;
        margin-bottom: 8px !important;
    }
    :root[data-ui="new"] .scheduler-actions .btn > .glyphicon,
    :root[data-ui="new"] .scheduler-actions .btn > .bi,
    :root[data-ui="new"] .scheduler-actions .btn > i { flex: 0 0 auto; }

    /* The day-stepper arrows sit alone above the table; they were 46x33. */
    :root[data-ui="new"] .teacher-schedule .btn-default {
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* --- 5. the shortcut lists ------------------------------------------- */
    /* Bullet markers cost horizontal space and say nothing — each row is already
       a distinct pill. Dropping them lets the pill run the full width. */
    :root[data-ui="new"] .scheduler-actions ul,
    :root[data-ui="new"] .noticeable ul {
        list-style: none !important;
        padding-inline-start: 0 !important;
        margin-inline-start: 0 !important;
    }
    :root[data-ui="new"] .scheduler-actions li,
    :root[data-ui="new"] .noticeable li { margin-bottom: 8px; }
    :root[data-ui="new"] .scheduler-actions li > a,
    :root[data-ui="new"] .noticeable li > a {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 12px 14px !important;
        border-radius: var(--u-r1);
        font-size: 15px !important;
        line-height: 1.35;
    }

    /* --- 6. type that was too small to read ------------------------------ */
    :root[data-ui="new"] .label { font-size: 12.5px !important; padding: .3em .6em !important; }
    :root[data-ui="new"] .breadcrumb { font-size: 14px; }
    :root[data-ui="new"] .breadcrumb > li > a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    /* --- 7. the header row ----------------------------------------------- */
    /* The hamburger was 44x34 — wide enough, short enough to miss. */
    :root[data-ui="new"] .navbar-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 3px 6px !important;
    }
    /* The breadcrumb strip below the navbar wraps rather than pushing the last
       item past the edge. */
    :root[data-ui="new"] .top-app-header .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        padding-inline: 10px !important;
    }
}

/* ============================================================================
   2026 staff frame (client/src/ui3/StaffShell.js) - sky header + sidebar.
   The teacher app's root font-size is 10px and the settings app's 16px, so
   every size here is in px.
   ============================================================================ */
:root[data-ui="new"] body.t3-on { padding-top: 0 !important; padding-bottom: 0 !important; background: #eef3fa; }
:root[data-ui="new"] .t3 { min-height: 100vh; font-size: 14px; }
:root[data-ui="new"] .t3 .p3-ico { flex-shrink: 0; display: block; }

:root[data-ui="new"] .t3-head {
    position: sticky; top: 0; z-index: 1030; color: #fff;
    background-color: #175bb0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px);
    box-shadow: 0 2px 14px rgba(12, 46, 96, .22);
}
:root[data-ui="new"] .t3-head-in { display: flex; align-items: center; gap: 12px 20px; padding: 12px 24px; min-height: 70px; }
:root[data-ui="new"] .t3-brand { display: flex; align-items: center; gap: 14px; color: #fff !important; min-width: 0; text-decoration: none !important; }
:root[data-ui="new"] .t3-brand-name { font-size: 25px; font-weight: 800; line-height: 1; }
:root[data-ui="new"] .t3-brand-sep { width: 1px; height: 30px; background: rgba(255,255,255,.35); flex-shrink: 0; }
:root[data-ui="new"] .t3-brand-sc { line-height: 1.25; min-width: 0; }
:root[data-ui="new"] .t3-brand-sc b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
:root[data-ui="new"] .t3-brand-sc span { display: block; font-size: 12px; color: rgba(255,255,255,.88); white-space: nowrap; }
:root[data-ui="new"] .t3-role {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
}
:root[data-ui="new"] .t3-head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
:root[data-ui="new"] .t3-hbtn {
    position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; padding: 0;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
:root[data-ui="new"] .t3-hbtn:hover { background: rgba(255,255,255,.24); }
:root[data-ui="new"] .t3-dot {
    position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
    background: #fff; color: #b0202d; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1;
}
:root[data-ui="new"] .t3-dot.mint { background: #2ec4a5; color: #053b33; }
:root[data-ui="new"] .t3-burger { display: none; }
:root[data-ui="new"] .t3-acc-wrap { position: relative; }
:root[data-ui="new"] .t3-acc {
    display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 5px; padding-inline-end: 12px; border-radius: 14px;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; text-align: start;
}
:root[data-ui="new"] .t3-acc:hover { background: rgba(255,255,255,.22); }
:root[data-ui="new"] .t3-av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: #fff; color: #114591; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .t3-acc-tx { line-height: 1.25; min-width: 0; }
:root[data-ui="new"] .t3-acc-tx b { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; }
:root[data-ui="new"] .t3-acc-tx span { display: block; font-size: 12px; color: rgba(255,255,255,.88); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
:root[data-ui="new"] .t3-caret { display: inline-flex; opacity: .8; }
:root[data-ui="new"] .t3-scrim-clear { position: fixed; inset: 0; z-index: 1040; }
:root[data-ui="new"] ul.dropdown-menu.t3-accmenu {
    display: block; position: absolute; top: calc(100% + 8px); inset-inline-start: auto; inset-inline-end: 0; z-index: 1050;
    max-width: calc(100vw - 16px);
    min-width: 280px; max-height: 80vh; overflow: auto; padding: 6px; font-size: 14px; text-align: start;
}
:root[data-ui="new"] ul.dropdown-menu.t3-accmenu > li > a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; white-space: normal; }
:root[data-ui="new"] ul.dropdown-menu.t3-accmenu select { font-size: 13px; height: 30px; }
:root[data-ui="new"] ul.dropdown-menu.t3-accmenu > li.t3-acc-note { border-top: 1px solid #eef2f8; margin: 6px 4px 0; padding: 8px 8px 4px; font-size: 12px; color: #8090a8; }

:root[data-ui="new"] .t3-body { display: flex; align-items: stretch; min-height: calc(100vh - 70px); }
:root[data-ui="new"] .t3-side {
    flex: 0 0 248px; width: 248px; background: #fff; border-inline-end: 1px solid #dfe8f4; padding: 12px 12px 28px;
    position: sticky; top: 70px; align-self: flex-start; height: calc(100vh - 70px); overflow-y: auto; font-size: 14px;
    scrollbar-width: thin;
}
:root[data-ui="new"] .t3-side-head { display: none; }
:root[data-ui="new"] .t3-sec-t { font-size: 12px; font-weight: 700; color: #5b6b85; margin: 16px 12px 4px; }
:root[data-ui="new"] .t3-nav {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 0; background: none;
    color: #2a3a55 !important; font-size: 14px; font-weight: 500; text-align: start; text-decoration: none !important; line-height: 1.3;
}
:root[data-ui="new"] .t3-nav:hover { background: #f1f5fb; color: #12233f !important; }
:root[data-ui="new"] .t3-nav .p3-ico { color: #5b6b85; }
:root[data-ui="new"] .t3-nav[aria-current="page"] { background: #dcf5ee; color: #0a6f5d !important; font-weight: 700; }
:root[data-ui="new"] .t3-nav[aria-current="page"] .p3-ico { color: #0a6f5d; }
:root[data-ui="new"] .t3-nav.on-child { color: #0a6f5d !important; font-weight: 600; }
:root[data-ui="new"] .t3-nav-tx { flex: 1; min-width: 0; }
:root[data-ui="new"] .t3-nav-tx small { display: block; font-size: 11px; color: #5b6b85; font-weight: 400; }
:root[data-ui="new"] .t3-nav .t3-caret { color: #8090a8; transition: transform .15s; }
:root[data-ui="new"] .t3-nav[aria-expanded="true"] .t3-caret { transform: rotate(180deg); }
:root[data-ui="new"] .t3-sub { padding-inline-start: 18px; }
:root[data-ui="new"] .t3-sub .t3-nav { min-height: 36px; font-size: 13px; }
:root[data-ui="new"] .t3-bullet { width: 6px; height: 6px; border-radius: 99px; background: #c3d0e2; margin: 0 6px; flex-shrink: 0; }
:root[data-ui="new"] .t3-nav[aria-current="page"] .t3-bullet { background: #2ec4a5; }
:root[data-ui="new"] .t3-ext { color: #8090a8; }

:root[data-ui="new"] .t3-main { flex: 1 1 auto; min-width: 0; padding: 18px 24px 48px; }
:root[data-ui="new"] .t3-main > .container-fluid { padding: 0; }
:root[data-ui="new"] .t3-main > .container-fluid > .row { margin: 0; }
:root[data-ui="new"] .t3-crumbs:empty { display: none; }
:root[data-ui="new"] .t3-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
:root[data-ui="new"] .t3-crumbs .breadcrumb { background: transparent !important; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
:root[data-ui="new"] .t3-crumbs .breadcrumb > li > a { color: #114591 !important; font-weight: 600; }
:root[data-ui="new"] .t3-crumbs .breadcrumb > .active { color: #12233f; font-weight: 600; }
:root[data-ui="new"] .t3-crumbs .glyphicon-home { color: #175bb0; }
:root[data-ui="new"] .t3 .server-notifications-container { top: 70px; border-right: 0; border-inline-end: 1px solid #dfe8f4; box-shadow: 0 18px 48px rgba(16,42,92,.18); }
:root[data-ui="new"] .t3 .notifications-container { top: 80px; }

:root[data-ui="new"] .t3-scrim { position: fixed; inset: 0; z-index: 1044; background: rgba(10, 25, 50, .38); }

/* the sidebar becomes a drawer below 1100px and on the timetable builder.
   align-self: stretch - the desktop sidebar is flex-start, and a browser that aligns positioned boxes would
   then shrink the drawer to its items instead of the full height of the screen */
@media (max-width: 1099px) {
    :root[data-ui="new"] .t3-burger { display: inline-flex; }
    :root[data-ui="new"] .t3-side {
        position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: auto; align-self: stretch; width: 300px; max-width: 86vw; z-index: 1045;
        transform: translateX(105%); transition: transform .2s ease; box-shadow: 0 0 48px rgba(10,25,50,.25); padding-top: 0;
    }
    :root[data-ui="new"] .t3-side.open { transform: none; }
    :root[data-ui="new"] .t3-side-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 14px 4px 10px; z-index: 1; }
    :root[data-ui="new"] .t3-side-head b { font-size: 16px; }
    :root[data-ui="new"] .t3-side-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #2a3a55; display: inline-flex; align-items: center; justify-content: center; }
}
:root[data-ui="new"] .t3-wide .t3-burger { display: inline-flex; }
:root[data-ui="new"] .t3-wide .t3-side {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: auto; align-self: stretch; width: 300px; max-width: 86vw; z-index: 1045;
    transform: translateX(105%); transition: transform .2s ease; box-shadow: 0 0 48px rgba(10,25,50,.25); padding-top: 0;
}
:root[data-ui="new"] .t3-wide .t3-side.open { transform: none; }
:root[data-ui="new"] .t3-wide .t3-side-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 14px 4px 10px; z-index: 1; }
:root[data-ui="new"] .t3-wide .t3-side-head b { font-size: 16px; }
:root[data-ui="new"] .t3-wide .t3-side-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #2a3a55; display: inline-flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .t3-wide .t3-main { padding: 12px 12px 24px; }

@media (max-width: 1240px) {
    :root[data-ui="new"] .t3-acc-tx { display: none; }
    :root[data-ui="new"] .t3-acc { padding-inline-end: 8px; }
}
@media (max-width: 900px) {
    :root[data-ui="new"] .t3-brand-sc, :root[data-ui="new"] .t3-brand-sep { display: none; }
}

/* phone: compact header + bottom bar */
:root[data-ui="new"] .t3-tabbar { display: none; }
@media (max-width: 767px) {
    :root[data-ui="new"] .t3-head-in { padding: 10px 12px; min-height: 64px; gap: 8px; }
    :root[data-ui="new"] .t3-brand-name { font-size: 21px; }
    :root[data-ui="new"] .t3-role { height: 30px; padding: 0 10px; font-size: 12px; }
    :root[data-ui="new"] .t3-acc { padding: 4px; height: 44px; }
    :root[data-ui="new"] .t3-acc .t3-caret { display: none; }
    :root[data-ui="new"] .t3-phone .t3-burger { display: none; }
    :root[data-ui="new"] .t3-main { padding: 12px 10px calc(96px + env(safe-area-inset-bottom, 0px)); }
    :root[data-ui="new"] ul.dropdown-menu.t3-accmenu { position: fixed; top: 70px; inset-inline-end: 8px; inset-inline-start: 8px; min-width: 0; }
    :root[data-ui="new"] .t3-tabbar {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 1035; min-height: 72px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        background: rgba(255,255,255,.97); border-top: 1px solid #dfe8f4; padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(16,42,92,.06);
    }
    :root[data-ui="new"] .t3-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #4a5a73 !important; font-size: 11px; text-decoration: none !important; min-width: 0; white-space: nowrap; }
    :root[data-ui="new"] .t3-tabbar a > span:first-child { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; }
    :root[data-ui="new"] .t3-tabbar a[aria-current="page"] { color: #0a6f5d !important; font-weight: 700; }
    :root[data-ui="new"] .t3-tabbar a[aria-current="page"] > span:first-child { width: 48px; border-radius: 999px; background: #d3f4ec; }
    :root[data-ui="new"] .t3-count { position: absolute; top: 0; inset-inline-end: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #175bb0; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
}
@media print {
    :root[data-ui="new"] .t3-head, :root[data-ui="new"] .t3-side, :root[data-ui="new"] .t3-tabbar { display: none !important; }
    :root[data-ui="new"] .t3-main { padding: 0; }
}

/* ============================================================================
   2026 diary (teacher/Schedule.js + teacher/components/DiaryCards.js) - new ui
   ============================================================================ */
:root[data-ui="new"] .t3 .t3-diary-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
:root[data-ui="new"] .t3 .t3-hello-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:root[data-ui="new"] .t3 h1.t3-hello { margin: 0; font-size: 28px; font-weight: 800; color: #12233f; line-height: 1.2; }
:root[data-ui="new"] .t3 .t3-hello-sub { font-size: 14px; color: #5b6b85; margin-top: 4px; }
:root[data-ui="new"] .t3 .t3-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
:root[data-ui="new"] .t3 .t3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 13px;
    background: #175bb0; border: 1px solid #175bb0; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
}
:root[data-ui="new"] .t3 .t3-btn:hover { background: #124488; }
:root[data-ui="new"] .t3 .t3-btn.mint { background: #2ec4a5; border-color: #2ec4a5; color: #053b33 !important; }
:root[data-ui="new"] .t3 .t3-btn.mint:hover { background: #27b096; }
:root[data-ui="new"] .t3 .t3-btn.ghost { background: #fff; border-color: #c9d6e8; color: #2a3a55 !important; font-weight: 600; }
:root[data-ui="new"] .t3 .t3-btn.ghost:hover { background: #f7f9fc; }

:root[data-ui="new"] .t3 .t3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
:root[data-ui="new"] .t3 .t3-card {
    display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #dfe8f4; border-radius: 18px; padding: 16px 18px;
    color: #12233f !important; text-decoration: none !important; min-width: 0;
}
:root[data-ui="new"] .t3 a.t3-card:hover { box-shadow: 0 10px 24px rgba(16, 42, 92, .08); }
:root[data-ui="new"] .t3 .t3-next {
    background: #175bb0; border-color: #175bb0; color: #fff !important;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 30px);
    box-shadow: 0 12px 28px rgba(23, 91, 176, .22);
}
:root[data-ui="new"] .t3 .t3-next-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: rgba(255,255,255,.92); }
:root[data-ui="new"] .t3 .t3-next-title { font-size: 22px; font-weight: 800; line-height: 1.25; }
:root[data-ui="new"] .t3 .t3-next-sub { font-size: 13px; color: rgba(255,255,255,.9); white-space: pre-line; }
:root[data-ui="new"] .t3 .t3-next-actions { display: flex; gap: 8px; margin-top: 8px; }
:root[data-ui="new"] .t3 .t3-alert { border-color: #f2c98a; }
:root[data-ui="new"] .t3 .t3-alert-h { display: flex; align-items: center; gap: 10px; }
:root[data-ui="new"] .t3 .t3-alert-h b { font-size: 15px; font-weight: 700; }
:root[data-ui="new"] .t3 .t3-alert-sub { font-size: 13px; color: #5b6b85; }
:root[data-ui="new"] .t3 .t3-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; color: #114591; font-size: 13px; font-weight: 700; }
:root[data-ui="new"] .t3 .t3-cert .t3-link { color: #0a6f5d; }
:root[data-ui="new"] .t3 .t3-ibox { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #e6efff; color: #114591; }
:root[data-ui="new"] .t3 .t3-ibox.late { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .t3 .t3-ibox.mint { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .t3 .t3-progress { display: block; height: 8px; border-radius: 99px; background: #eef2f8; overflow: hidden; margin-top: 4px; }
:root[data-ui="new"] .t3 .t3-progress > span { display: block; height: 100%; border-radius: inherit; background: #2ec4a5; }

/* the weekly grid: chips by state */
:root[data-ui="new"] .t3 .teacher-schedule.noticeable { padding: 16px !important; width: 100% !important; max-width: none !important; margin: 0 0 18px !important; float: none !important; }
:root[data-ui="new"] .t3 .teacher-schedule .cal-title strong { color: #12233f !important; font-size: 18px; }
:root[data-ui="new"] .t3 .teacher-schedule .table > thead > tr > th { font-size: 13px !important; font-weight: 600; color: #4a5a73 !important; }
:root[data-ui="new"] .t3 .teacher-schedule .table > thead > tr > th.sc-today { background: #175bb0 !important; color: #fff !important; border-bottom: 0; }
:root[data-ui="new"] .t3 .teacher-schedule td.sc-today { background: #eef5ff; border-bottom: 1px solid #dfe8f4; box-shadow: inset 0 0 0 2px #175bb0; }
:root[data-ui="new"] .t3 .teacher-schedule td:hover { background: #f4f8fe; }
:root[data-ui="new"] .t3 .teacher-schedule .label {
    display: block; max-width: none; text-align: start; border-radius: 10px !important; padding: 6px 8px; font-size: 12.5px; font-weight: 600;
    line-height: 1.35; white-space: pre-wrap; font-family: var(--u-font);
}
:root[data-ui="new"] .t3 .teacher-schedule .label:hover { color: inherit; filter: brightness(.97); }
:root[data-ui="new"] .t3 .teacher-schedule .label .glyphicon { padding-left: 0; margin-inline-end: 4px; font-size: 11px; opacity: .8; }
:root[data-ui="new"] .t3 .teacher-schedule .lesson-hour .label-success { background: #e1f4ea !important; color: #0b6b4a; }
:root[data-ui="new"] .t3 .teacher-schedule .lesson-hour .label-success.label-future { background: #e6efff !important; color: #114591; }
:root[data-ui="new"] .t3 .teacher-schedule .lesson-hour .label-cancelled { background: #f1f4f9 !important; color: #8090a8; text-decoration: line-through; }
:root[data-ui="new"] .t3 .teacher-schedule .lesson-hour-other .label-success { background: #f3eefe !important; color: #4b2a8c; }
:root[data-ui="new"] .t3 .teacher-schedule .scheduled-hour .label-info { background: #fff !important; color: #114591; box-shadow: inset 0 0 0 1.5px #bcd0ec; }
:root[data-ui="new"] .t3 .teacher-schedule .scheduled-hour.t3c-missing .label-info { background: #fff1df !important; color: #8a4a00; box-shadow: inset 0 0 0 1.5px #f2c98a; }
:root[data-ui="new"] .t3 .teacher-schedule .scheduled-hour.t3c-next .label-info { background: #175bb0 !important; color: #fff; box-shadow: 0 6px 14px rgba(23, 91, 176, .28); }
:root[data-ui="new"] .t3 .teacher-schedule .assesment-hour .label-success { background: #fdecf5 !important; color: #8b014d; }
:root[data-ui="new"] .t3 .teacher-schedule .stay-hour .label-success { background: #f7f9fc !important; color: #5b6b85; box-shadow: inset 0 0 0 1.5px #c3d0e2; border: 0; }
:root[data-ui="new"] .t3 .teacher-schedule .event-hour .label-success { background: #fff6e0 !important; color: #7a5600; }
:root[data-ui="new"] .t3 .teacher-schedule .scheduled-hour, :root[data-ui="new"] .t3 .teacher-schedule .lesson-hour,
:root[data-ui="new"] .t3 .teacher-schedule .stay-hour, :root[data-ui="new"] .t3 .teacher-schedule .assesment-hour { margin: 2px 0; }
:root[data-ui="new"] .t3 .teacher-schedule .label-default { background: #f7f9fc !important; color: #4a5a73; box-shadow: inset 0 0 0 1px #dfe8f4; }

/* the phone's day list */
:root[data-ui="new"] .t3 .t3-today { gap: 0; padding: 14px 12px 8px; }
:root[data-ui="new"] .t3 .t3-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 8px; }
:root[data-ui="new"] .t3 .t3-card-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
:root[data-ui="new"] .t3 .t3-soft { font-size: 12px; color: #5b6b85; }
:root[data-ui="new"] .t3 .t3-daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 8px; font-size: 13px; font-weight: 600; color: #4a5a73; }
:root[data-ui="new"] .t3 .t3-iconbtn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid #dfe8f4; background: #fff; color: #114591; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
:root[data-ui="new"] .t3 .t3-trow { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #eef2f8; color: #12233f !important; text-decoration: none !important; min-height: 56px; }
:root[data-ui="new"] .t3 .t3-trow:last-child { border-bottom: 0; }
:root[data-ui="new"] .t3 .t3-trow.next { background: #eef5ff; border: 2px solid #175bb0; border-radius: 14px; padding: 10px; margin: 4px 0; }
:root[data-ui="new"] .t3 .t3-num { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; border: 1px solid #dfe8f4; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
:root[data-ui="new"] .t3 .t3-num.on { background: #175bb0; border-color: #175bb0; color: #fff; }
:root[data-ui="new"] .t3 .t3-num.dash { border-style: dashed; border-color: #b7c3d4; color: #5b6b85; }
:root[data-ui="new"] .t3 .t3-row-tx { flex: 1; min-width: 0; }
:root[data-ui="new"] .t3 .t3-row-tx b { display: block; font-size: 15px; font-weight: 600; }
:root[data-ui="new"] .t3 .t3-row-tx span { display: block; font-size: 12px; color: #5b6b85; }
:root[data-ui="new"] .t3 .t3-chip { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #f1f4f9; color: #4a5a73; white-space: nowrap; }
:root[data-ui="new"] .t3 .t3-chip.ok { background: #dcf5ee; color: #0a6f5d; }
:root[data-ui="new"] .t3 .t3-chip.late { background: #fff1df; color: #8a4a00; }
:root[data-ui="new"] .t3 .t3-chip.now { background: #e6efff; color: #114591; font-weight: 700; }
:root[data-ui="new"] .t3 .t3-chip.sky { background: #175bb0; color: #fff; font-weight: 700; }
:root[data-ui="new"] .t3 .t3-empty { padding: 22px 8px; text-align: center; color: #5b6b85; font-size: 14px; }
:root[data-ui="new"] .t3 .t3-empty .p3-ico { margin: 0 auto 8px; color: #8090a8; }

@media (max-width: 767px) {
    :root[data-ui="new"] .t3 h1.t3-hello { font-size: 23px; }
    :root[data-ui="new"] .t3 .t3-cards { grid-template-columns: 1fr; gap: 12px; }
    :root[data-ui="new"] .t3 .t3-diary-head { gap: 12px; margin-bottom: 12px; }
}

/* the WEEK on a narrow screen (Schedule.js adds .t3-week in the new ui): the phone layer above squeezes the
   table into the card for the day view; six days cannot fit, so here every column keeps a readable width,
   the table scrolls sideways inside its card and the hours column stays put */
@media (max-width: 899px) {
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week { overflow: visible !important; padding: 10px !important; }
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week .t3-week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* overflow visible: the rounded grid clips with overflow:hidden, which also kills the sticky hours column */
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table { width: max-content !important; min-width: 100%; table-layout: auto !important; overflow: visible; }
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table td,
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table th { min-width: 118px; max-width: 150px; overflow-wrap: normal !important; word-break: normal !important; white-space: normal !important; padding: 8px 6px !important; }
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table td:first-child,
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table th:first-child {
        min-width: 78px; width: 78px !important; max-width: 78px; position: sticky; inset-inline-start: 0; z-index: 2;
        background: #fff !important; box-shadow: -6px 0 10px -8px rgba(16, 42, 92, .25); white-space: normal !important; font-size: 12px;
    }
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week table th { font-size: 12px !important; line-height: 1.3; }
    :root[data-ui="new"] .t3 .teacher-schedule.t3-week .event-hour .label { font-size: 11px; padding: 3px 6px; }
}

/* a wide screen: the week narrows and the two shortcut cards (.scheduler-actions) stand beside it on the inline
   end, as in the classic diary (Schedule.js wraps them in .t3-diary-body / .t3-diary-side in the new ui) */
@media (min-width: 1280px) {
    :root[data-ui="new"] .t3 .t3-diary-body { display: flex; align-items: flex-start; gap: 18px; }
    :root[data-ui="new"] .t3 .t3-diary-body > .teacher-schedule.noticeable,
    :root[data-ui="new"] .t3 .t3-diary-body > .t3-today { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
    :root[data-ui="new"] .t3 .t3-diary-side { flex: 0 0 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
    :root[data-ui="new"] .t3 .t3-diary-side > .scheduler-actions { float: none !important; margin: 0 !important; min-width: 0; width: 100%; }
    :root[data-ui="new"] .t3 .t3-diary-side .scheduler-actions .btn { white-space: normal; text-align: start; }
    /* six days must still fit next to the cards: the classic 120px day column is what pushed Friday out */
    :root[data-ui="new"] .t3 .t3-diary-body .teacher-schedule tbody td { min-width: 96px; }
    /* common.css sizes a .table-responsive table to its content; beside the cards it fills its card instead */
    :root[data-ui="new"] .t3 .t3-diary-body .teacher-schedule.t3-week table { width: 100%; }
}

/* the alerts panel (components/ServerNotifications.js): a white sheet at the end side under the header; on a
   phone it spans the screen between the header and the bottom bar */
:root[data-ui="new"] .t3 .server-notifications-container {
    width: 360px; min-width: 0; max-width: 100vw; height: auto; bottom: 0; padding: 14px 16px; background: #fff; font-family: var(--u-font); color: #12233f;
}
:root[data-ui="new"] .t3 .server-notifications-container h4 { font-size: 17px; font-weight: 700; margin: 6px 0 12px; line-height: 1.4; }
:root[data-ui="new"] .t3 .server-notification { border-bottom: 1px solid #eef2f8; padding: 12px 4px; margin: 0; }
:root[data-ui="new"] .t3 .server-notification h5 { font-size: 15px; font-weight: 700; }
:root[data-ui="new"] .t3 .notification-content ul { padding: 0; }
:root[data-ui="new"] .t3 .notification-content li { border: 1px solid #eef2f8; border-radius: 12px; padding: 10px 12px; }
:root[data-ui="new"] .t3 .alert-evt-dates span { background: #fde6e8; color: #b0202d; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
@media (max-width: 767px) {
    :root[data-ui="new"] .t3 .server-notifications-container {
        top: 64px; inset-inline: 0; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); border-inline-end: 0;
    }
}