/* GENERATED by tools/gen_light_css.py from css/style.css — do not edit by hand.
   Light mode only: every rule is scoped to html[data-mode="light"] (js/mode.js sets it).
   Hand-written fixes and the mode switch's own styles live in css/light.extra.css, appended below. */

/* ---- from css/style.css ---- */
:root:where([data-mode="light"]){
  --ink-0:#edeff2;
  --ink-1:#f3f4f6;
  --ink-2:#f8f9fa;
  --ink-3:#fefefe;
  --line:rgba(15,23,42,0.099);
  --text-hi:#21242a;
  --text-lo:#636975;
  --shadow-panel:0 12px 30px rgba(0,0,0,0.158), 0 2px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .bg-layer{
  background:var(--theme-bg, linear-gradient(180deg,#fafbfc 0%, #fdfefe 38%, #fefefe 62%, #fdfefe 100%));
}
:where(html[data-mode="light"]) .bg-overlay{
  background:rgba(6,9,14,0.168);
}
:where(html[data-mode="light"]) .brand-mark{
  color:#b5710d;
}
:where(html[data-mode="light"]) .lang-toggle{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .lang-toggle button:not(.active):hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .icon-btn{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .icon-btn:hover{
  background:rgba(248,249,250,0.85);
}
:where(html[data-mode="light"]) .status-pill{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .status-pill.ok{
  color:#2b9657;
}
:where(html[data-mode="light"]) .status-pill.err{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .widget{
  background:rgba(243,244,246,0.86);
}
:where(html[data-mode="light"]) .widget.dragging{
  box-shadow:0 20px 40px rgba(0,0,0,0.225);
}
:where(html[data-mode="light"]) .widget-head{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .widget-drag:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .widget-min:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .widget-close:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .wbtn:hover{
  background:#fefefe;
}
:where(html[data-mode="light"]) .wbtn.danger{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .dock{
  background:rgba(240,241,244,0.72);
}
:where(html[data-mode="light"]) .dock-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .dock-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .dock-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .dock-item.active .dock-ic{
  color:#bf7402;
}
:where(html[data-mode="light"]) .dock-ic{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .app-tray-tab{
  background:rgba(240,241,244,0.72);
}
:where(html[data-mode="light"]) .app-tray-tab:hover{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .app-tray-backdrop{
  background:rgba(6,9,14,0.33);
}
:where(html[data-mode="light"]) .app-tray{
  box-shadow:0 -16px 40px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .app-tray-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .app-tray-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .app-tray-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .app-tray-item.active .dock-ic{
  color:#bf7402;
}
:where(html[data-mode="light"]) .drawer{
  box-shadow:-16px 0 40px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .ghost-btn.danger{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .tile{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bar .track{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .chip{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .chip.on{
  color:#bf7402;
}
:where(html[data-mode="light"]) .badge.full{
  color:#2b9657;
}
:where(html[data-mode="light"]) .badge.warn{
  color:#bf7402;
}
:where(html[data-mode="light"]) .badge.bad{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .code-box button:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .cal-cell{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .cal-cell.has-evt:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .err-box{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .ss-link{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-x:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .ss-banner{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .ss-banner.warn{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-delta.up{
  color:#2b9657;
}
:where(html[data-mode="light"]) .ss-delta.down{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .ss-sub{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .ss-sum.up{
  color:#2b9657;
}
:where(html[data-mode="light"]) .ss-sum.down{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .ss-line{
  stroke:#b5710d;
}
:where(html[data-mode="light"]) .ss-dot{
  fill:#b5710d;
}
:where(html[data-mode="light"]) .ss-barfill{
  fill:#b5710d;
}
:where(html[data-mode="light"]) .ss-btrack{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .ss-table th{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .ss-spark polyline{
  stroke:#299888;
}
:where(html[data-mode="light"]) .ss-banner.demo{
  color:#299888;
}
:where(html[data-mode="light"]) .demo-btn{
  color:#b5710d;
}
:where(html[data-mode="light"]) .demotab{
  background:rgba(247,245,240,0.88);
  color:#b5710d;
}
:where(html[data-mode="light"]) .demopanel{
  background:rgba(242,243,245,0.94);
  box-shadow:0 10px 30px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .dock-top-item{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .dock-top-item:hover{
  background:rgba(248,249,250,0.85);
}
:where(html[data-mode="light"]) .dock-top-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .edge-dock{
  background:rgba(240,241,244,0.78);
}
:where(html[data-mode="light"]) .layout-mode-opt:hover{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .lock-hint{
  color:#bf7402 !important;
}
:where(html[data-mode="light"]) .dock-vis-row{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .dock-vis-row input{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .topbar.auto-hide{
  background:rgba(240,241,244,0.88);
}
:where(html[data-mode="light"]) details.fold > summary .sumbar .track{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .dir-confirm{
  color:#bf7402;
}
:where(html[data-mode="light"]) .dir-row:hover{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .dir-detail{
  background:rgba(0,0,0,0.108);
}
:where(html[data-mode="light"]) .badge.t-teacher{
  color:#299888;
}
:where(html[data-mode="light"]) .badge.t-student{
  color:#bf7402;
}
:where(html[data-mode="light"]) .badge.t-parent{
  color:#1a2ca8;
}
:where(html[data-mode="light"]) .badge.t-staff{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .dir-panel{
  background:rgba(0,0,0,0.09);
}
:where(html[data-mode="light"]) .dir-err{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .dir-plan{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .ss-sub:hover{
  box-shadow:0 6px 18px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .ss-tiles .tile b,
:where(html[data-mode="light"]) .ss-overview .tile b{
  color:#c28400;
}
:where(html[data-mode="light"]) .ss-tiles .tile > span{
  color:#b4800e;
}
:where(html[data-mode="light"]) .ss-tiles .tile.na b{
  color:#736749;
}
:where(html[data-mode="light"]) .ss-tiles .tile b small.ss-u{
  color:#b4800e;
}
:where(html[data-mode="light"]) .ss-pickcol input{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .ss-cmp-head b{
  color:#c28400;
}
:where(html[data-mode="light"]) .ss-cmptable td.best{
  color:#c28400;
}
:where(html[data-mode="light"]) .sd-tile{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .sd-step.done .sd-mark{
  color:#2b9657;
}
:where(html[data-mode="light"]) .sd-step.doing .sd-mark{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sd-dept{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sd-card{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .sd-lines a,
:where(html[data-mode="light"]) .sd-table a{
  color:#299888;
}
:where(html[data-mode="light"]) .sd-link.stale{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .sd-x:hover,
:where(html[data-mode="light"]) .sd-x:focus-visible{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .sch-row{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .tn-item{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .tn-state.read{
  color:#2f9358;
}
:where(html[data-mode="light"]) .sc-grid{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .pol-row{
  border-bottom:1px solid rgba(15,23,42,0.088);
}

/* ---- css/light.extra.css (hand-written) ---- */
/* AdminDeck — hand-written part of css/light.css (tools/gen_light_css.py appends this file).
   1. Where the Light / Dark switch (js/mode.js) sits: top bar size, menu spacing.
   2. Light-mode fixes the generator can't guess. Keep each one scoped to html[data-mode="light"]. */

/* ---------- 1. where the Light / Dark switch sits (its look is css/mode.css, shared by all four apps) ---------- */
#mode-switch{ margin:0 0 18px; }
#mode-toggle{ --deck-bar-h:38px; --deck-bar-r:11px; }

/* ---------- 2. light-mode fixes ---------- */
/* "Dim background (better contrast)": on a light page, contrast comes from a white veil, not a dark one */
html[data-mode="light"] .bg-overlay{ background:rgba(255,255,255,0.45); }
/* The stoplight colours (On track / Monitor / Needs attention) are neon on dark; on a light page they'd be unreadable as
   text and harsh as borders, so Light mode uses deeper versions of the same three. Tile fills keep their soft tints. */
html[data-mode="light"], html[data-mode="light"] .ss-root{ --st-good:#15803d; --st-watch:#a16207; --st-bad:#dc2626; }   /* where this app defines them */