/* Palette layer, loaded last on every page: the office, the parent portal,
   the verify page and the platform admin. Screen only, so printed report
   cards and receipts keep their own print styles.

   Seven colours (chosen 2026-10-05), each with a job:

   blue       #00BBF9  the brand accent (2026-10-05): primary buttons, the
                       first summary card, money coming in, boys and "present"
                       on the dashboard. Navy text on it (6.3:1); white would
                       be 2.2:1. Links, focus rings and blue text on white use
                       its deeper step #00719C (5.5:1); hover is #33C9FA.
   light blue #8ECAE6  "you are here" and good news: the current page, the
                       chosen language, pressed toggles, present / active /
                       paid. Navy text on it (7.7:1). Its pale step #E6F4FA is
                       the table head and the soft blue ground.
   navy       #023047  body text and headings (13.9:1 on white), the menu rail,
                       the sign-in panel and the fourth summary card.
   amber      #FFB703  waiting: pending, excused, on leave. Navy text (7.9:1);
                       pale step #FFF1CC for notices.
   orange     #FB8500  late, and money going out. Navy text (5.6:1).
   pink       #F72585  bad news and girls: absent, overdue, failed, errors, as
                       a dot, line or bar. Too faint for small text in either
                       ink, so text on it, and pink text on white, use its
                       deeper step #C2185B (5.9:1 with white).
   grey       #8D99AE  borders, the "inactive" card, quiet detail. Small grey
                       text uses its deeper steps #4A5568 and #5C677D.

   The page is a cool light grey, cards are white, and the saturated colours
   stay on cards, pills and charts, so the screen reads as calm with bright
   accents rather than as fourteen colours at once. */
@media screen {
:root, :root[data-theme='light'] {
 --bg:#f5f7fa; --surface:#ffffff; --surface-alt:#eef2f5;
 --fg:#023047; --fg-muted:#4a5568; --fg-subtle:#5c677d;
 --border:#e1e6ec; --border-strong:#8d99ae; --table-head:#e6f4fa;
 --coral:#fb8500; --coral-ink:#023047; --coral-soft:#fde2ee;
 --teal:#8ecae6; --teal-hover:#00719c; --teal-soft:#e6f4fa; --teal-deep:#00719c;
 --marigold:#ffb703; --marigold-ink:#023047; --marigold-soft:#fff1cc;
 --sky:#8ecae6; --sky-ink:#023047; --sky-soft:#e6f4fa;
 --grass:#8ecae6; --grass-ink:#00719c; --grass-soft:#e6f4fa;
 --berry:#f72585; --berry-ink:#c2185b; --berry-soft:#fde2ee;
 --violet:#8ecae6; --violet-ink:#023047; --violet-soft:#e6f4fa;
 --primary:#00bbf9; --primary-hover:#33c9fa; --primary-soft:#e6f4fa;
 --secondary:#8ecae6; --accent:#8ecae6; --success:#00719c; --success-soft:#e6f4fa;
 --danger:#c2185b; --danger-soft:#fde2ee; --warning:#ffb703; --warning-ink:#8a5a00; --warning-soft:#fff1cc;
 --info:#00719c; --info-soft:#e6f4fa;
 --on-primary:#023047; --on-secondary:#023047; --on-success:#ffffff; --on-danger:#ffffff; --on-info:#ffffff; --on-marigold:#023047;
 --school-accent:#00bbf9; --school-secondary:#8ecae6;
 --tint-1:#e6f4fa; --tint-1-ink:#00719c;
 --tint-2:#fff1cc; --tint-2-ink:#8a5a00;
 --tint-3:#e6f4fa; --tint-3-ink:#00719c;
 --pill:#8ecae6; --pill-ink:#023047; --focus-ring:#00719c;
 --rail:#023047; --rail-ink:#e8f1f5; --rail-muted:#a9c6d6; --rail-hover:#0a3d57; --rail-line:#0b4560;
 --dash-boys:#00bbf9; --dash-girls:#f72585; --dash-present:#00bbf9; --dash-absent:#f72585; --danger-fill:#c2185b;
}
:root[data-theme='dark'] {
 /* Neutral charcoal: near-black grays for the page, cards and sidebar, so
    the saturated palette (blue, teal, yellow, pink) carries all the colour.
    Cards are told apart from the page by their border as much as by tone. */
 --bg:#0f1115; --surface:#181b22; --surface-alt:#20242d;
 --fg:#e6e8ee; --fg-muted:#b3b8c4; --fg-subtle:#8e95a3;
 --border:#2b303b; --border-strong:#4a5263; --table-head:#20242d;
 --coral-ink:#fb8500; --coral-soft:#3a2410;
 --teal-soft:#0b2533; --teal-deep:#8ecae6; --grass-ink:#8ecae6; --grass-soft:#0b2533;
 --marigold-ink:#ffd166; --marigold-soft:#3a3115;
 --sky-ink:#8ecae6; --sky-soft:#0b2533; --violet-ink:#8ecae6; --violet-soft:#0b2533;
 --berry-ink:#ff5fa2; --berry-soft:#3d1428;
 /* Blue buttons with dark text, as in light mode. */
 --primary:#00bbf9; --primary-hover:#33c9fa; --primary-soft:#0b2533;
 --danger:#ff5fa2; --danger-soft:#3d1428; --warning-ink:#ffd166; --warning-soft:#3a3115;
 --info:#8ecae6; --info-soft:#0b2533; --success:#8ecae6; --success-soft:#0b2533;
 --on-primary:#0f1115; --on-info:#0f1115; --on-success:#0f1115;
 --tint-1:#0b2533; --tint-1-ink:#8ecae6;
 --tint-2:#3a3115; --tint-2-ink:#ffd166;
 --tint-3:#0b2533; --tint-3-ink:#8ecae6;
 --pill:#8ecae6; --pill-ink:#0f1115; --focus-ring:#33c9fa;
 --rail:#1f232b; --rail-ink:#aab0bd; --rail-muted:#aab0bd; --rail-hover:#2a2f3a; --rail-line:#2b303b;
}
:root body { background:var(--bg); color:var(--fg); }

/* The menu rail. The page you are on is a light blue pill; the group it
   belongs to is only lifted, so one place on the rail is marked, not two. */
:root body :is(.nav,.platform-shell .nav) { background:var(--rail); color:var(--rail-ink); border-color:var(--rail-line); }
:root body .nav :is(a,.nav__parent,.nav__text,.nav__icon,.nav__chev,.nav__name) { color:var(--rail-ink); }
:root body .nav :is(.nav__label,.nav__role) { color:var(--rail-muted); }
@media (hover: hover) and (pointer: fine) { :root body .nav :is(a,.nav__parent):hover { background:var(--rail-hover); color:var(--rail-ink); } }
:root body .nav a[aria-current='page'],
:root body .nav .nav__sub a[aria-current='page'] { background:#8ecae6 !important; color:#023047 !important; }
:root body .nav .nav__parent--current { background:var(--rail-hover) !important; color:var(--rail-ink) !important; }
:root body .nav a[aria-current='page'] :is(.nav__text,.nav__icon,.nav__chev) { color:#023047; }
:root body .nav .nav__parent--current :is(.nav__text,.nav__icon,.nav__chev) { color:var(--rail-ink); }
/* Earlier layers colour the icons of group rows and of sign out on their
   own, for the old light rail; here every icon follows its row. */
:root body .nav :is(a,.nav__parent,.nav__signout) .nav__icon { color:var(--rail-ink) !important; }
:root body .nav a[aria-current='page'] .nav__icon { color:#023047 !important; }
:root body .nav .nav__sub { border-color:var(--rail-line); }
:root body .nav .langswitch { background:rgb(0 0 0 / .18); border-color:var(--rail-line); }
:root body .nav .langswitch button { background:transparent; color:var(--rail-ink); }
@media (hover: hover) and (pointer: fine) { :root body .nav .langswitch button:hover:not([aria-pressed='true']) { background:var(--rail-hover); } }
:root body .nav .langswitch button[aria-pressed='true'] { background:#8ecae6; color:#023047; }

/* Buttons and controls. */
:root body :is(.btn--primary,.btn--login,.btn--search) { background:var(--primary) !important; border-color:var(--primary) !important; color:var(--on-primary) !important; }
@media (hover: hover) and (pointer: fine) { :root body :is(.btn--primary,.btn--login,.btn--search):hover:not(:disabled) { background:var(--primary) !important; border-color:var(--primary) !important; color:var(--on-primary) !important; } }
@media (hover: hover) and (pointer: fine) { :root body :is(.btn--primary,.btn--login,.btn--search):hover:not(:disabled) { background:var(--primary-hover) !important; border-color:var(--primary-hover) !important; } }
:root body :is(.btn[aria-pressed='true'],.statuspicker button[aria-pressed='true'],.segmented input:checked + label) { background:var(--pill); color:var(--pill-ink); border-color:var(--focus-ring); }
:root body .statuspicker button[data-s='present'][aria-pressed='true'],
:root body .staff-status-picker button[data-s='active'][aria-pressed='true'] { background:var(--tint-1); color:var(--tint-1-ink); border-color:#8ecae6; }
:root body .statuspicker button[data-s='absent'][aria-pressed='true'] { background:var(--danger-soft); color:var(--danger); border-color:#f72585; }
:root body .statuspicker button[data-s='inactive'][aria-pressed='true'] { background:var(--surface-alt); color:var(--fg); border-color:var(--border-strong); }
:root body .statuspicker button[data-s='late'][aria-pressed='true'] { background:var(--coral-soft); color:var(--fg); border-color:#fb8500; }
:root body .statuspicker button:is([data-s='excused'],[data-s='on_leave'],[data-s='sick_leave'])[aria-pressed='true'] { background:var(--tint-2); color:var(--tint-2-ink); border-color:#ffb703; }
:root body :is(.fin-pill,.fin-actions .icon-btn,.weekday--now) { background:var(--pill); color:var(--pill-ink); }
:root body :is(.cal-day[aria-selected='true'],.date-calendar__day[aria-pressed='true'],.date-calendar__foot button:first-child) { background:var(--primary); color:var(--on-primary); }
:root body :is(input,select,textarea):focus-visible { outline-color:var(--focus-ring); }

/* Surfaces. */
:root body :is(.card,.dash-card,.dash-calendar-agenda,.platform-card,.login-card,.searchpanel,.result) { background:var(--surface); border-color:var(--border); color:var(--fg); }
:root body .dashboard-home :is(.dash-card,.dash-calendar-agenda) { background:var(--surface); border:1px solid var(--border); }
:root body :is(thead th,#results table th) { background:var(--table-head); color:var(--fg); }
:root body :is(.avatar,.user-chip__avatar,.guide__phone) { background:var(--tint-3); color:var(--tint-3-ink); }
:root body .appbar .user-chip__avatar::after { background:#8ecae6; }
:root body :is(.agenda__row,.chip) { background:var(--surface-alt); color:var(--fg); }
:root body :is(.agenda__row,.agenda__row .agenda__time,.agenda__row .agenda__meta,.agenda__row .agenda__what) { color:var(--fg); }
:root body .dash-stat__icon { background:var(--tint-3); color:var(--tint-3-ink); }

/* Status chips: teal paid, yellow pending, red overdue. */
:root body .finance-page .fin-chip--paid { background:var(--tint-1); color:var(--tint-1-ink); }
:root body .finance-page .fin-chip--pending { background:var(--tint-2); color:var(--tint-2-ink); }
:root body .finance-page .fin-chip--overdue { background:var(--danger-soft); color:var(--danger); }
:root body .finance-page .fin-chip--overdue .fin-chip__dot { background:#f72585; }

/* Summary cards. Four fills by position, with the text colour each needs;
   red is never positional, it marks a card whose number is bad news.
   The portal's result cards carry an id in their selector, so they get a
   rule of their own; folding them into the list below would lift every
   card to id strength and the status rules after it could never win. */
:root body :is(.tile,.att-stat,.fin-card,.platform-summary), :root body #results .stat { background:#00bbf9; color:#023047; --tile-fill:#00bbf9; --tile-ink:#023047; }
:root body :is(.tile,.att-stat,.fin-card,.platform-summary):nth-child(4n+2), :root body #results .stat:nth-child(4n+2) { background:#8ecae6; color:#023047; }
:root body :is(.tile,.att-stat,.fin-card,.platform-summary):nth-child(4n+3), :root body #results .stat:nth-child(4n+3) { background:#ffb703; color:#023047; }
:root body :is(.tile,.att-stat,.fin-card,.platform-summary):nth-child(4n+4), :root body #results .stat:nth-child(4n+4) { background:#023047; color:#ffffff; }
/* Attendance and staff cards mean the same thing everywhere, so they take
   their colour from their status rather than from where they fall. */
:root body :is(.att-stat--present,.staff-stat--active):nth-child(n) { background:#8ecae6; color:#023047; }
:root body .att-stat--late:nth-child(n) { background:#fb8500; color:#023047; }
:root body :is(.att-stat--excused,.staff-stat--on_leave):nth-child(n) { background:#ffb703; color:#023047; }
:root body :is(.att-stat--sick_leave,.staff-stat--sick_leave):nth-child(n) { background:#023047; color:#ffffff; }
:root body .staff-stat--inactive:nth-child(n) { background:#8d99ae; color:#023047; }
:root body :is(.tile--danger,.att-stat--absent):nth-child(n), :root body #results :is(.stat--fail,.stat--danger):nth-child(n) { background:#c2185b; color:#ffffff; }
:root body :is(.tile__label,.tile__value,.tile__meta,.att-stat__label,.att-stat__value,.fin-card__label,.fin-card__value,#results .stat__label,#results .stat__value) { color:inherit; }
:root body .tile__trend { background:#ffffff; color:#023047; }
:root body :is(.tile,.fin-card) .spark__line { stroke:currentColor; }

/* Charts. Money in is blue, money out is orange. On the dashboard boys and
   present are blue; girls and absent are pink. */
:root body .finance-page .chart.chart--yellow { --marigold:#00bbf9; }
:root body .chart.chart--lavender { --coral:#fb8500; --coral-ink:#b85f00; }
:root[data-theme='dark'] body .finance-page .chart.chart--yellow { --marigold:#33c9fa; }
:root[data-theme='dark'] body .chart.chart--lavender { --coral-ink:#f72585; }
:root body .dashboard-home { --sky:#8ecae6; --marigold:#ffb703; --coral:#023047; --coral-soft:var(--tint-3); }
:root body .dashboard-home .chart--area path[fill='none'],
:root body .dashboard-home .chart--area circle { stroke:var(--primary); }
:root body .dash-kid, :root body .dash-kid--blue { color:var(--dash-boys); }
:root body .dash-kid--yellow { color:var(--dash-girls); }
:root body .attendance-page { --att-cyan:var(--pill); --att-yellow:var(--tint-2); --att-purple:var(--tint-3); }

/* Sign-in panels and the parent portal. */
:root body :is(.login-welcome,.entry__show) { background:#023047; color:#ffffff; }
/* The old dark theme painted these panels a gray teal; in dark mode they
   take the sidebar's charcoal so the panels belong together. */
:root[data-theme='dark'] body :is(.login-welcome,.entry__show) { background:#1f232b; }
:root body :is(.login-welcome,.entry__show) :is(h1,h2,p,.subtle,.login-eyebrow,.entry__eyebrow,.entry__showbody) { color:#e8f1f5; }
:root body :is(.entry__art,.login-art) .art-sun { fill:#ffb703; }
:root body :is(.entry__art,.login-art) .art-board { fill:#8ecae6; }
:root body :is(.entry__art,.login-art) .art-roof { fill:#00bbf9; }
:root body :is(.entry__art,.login-art) .art-door { fill:#fb8500; }
:root body :is(.entry__art,.login-art) .art-win-a { fill:#8ecae6; }
:root body :is(.entry__art,.login-art) .art-win-b { fill:#ffb703; }
:root body :is(.entry__art,.login-art) .art-ground { stroke:#8ecae6; }
:root body :is(.entry__art,.login-art) .art-tree { fill:#8ecae6; }
:root body :is(.entry__art,.login-art) .art-trunk { stroke:#e6f4fa; }
:root body .parent-brand svg { color:#00bbf9; }
:root body .parent-header .langswitch button[aria-pressed='true'] { background:#8ecae6; color:#023047; }
:root body :is(.ifield input,.ifield select):focus { border-color:var(--focus-ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-ring) 18%,transparent); }
@media (hover: hover) and (pointer: fine) { :root body .result:hover { border-color:var(--focus-ring); } }
:root body :is(.result .avatar,.guide__phone) { background:var(--tint-3); color:var(--tint-3-ink); }
:root body .guide__phone :is(.label,a) { color:var(--tint-3-ink); }

/* The office sign-in: a flat ground, no glows. The school's logo is a
   transparent PNG and sits straight on the indigo, with no plate behind it. */
:root body .login-page { background:var(--bg) !important; }

/* Platform admin. */
:root body .platform-card .badge { background:var(--tint-1); color:var(--tint-1-ink); }
:root body .platform-card .badge.paused { background:var(--tint-2); color:var(--tint-2-ink); }
:root body .platform-login { background:var(--bg); }
:root body .platform-login .btn { box-shadow:none; }
}
/* Dropdown menus (dropdowns.css): hover, chosen row and focus from the palette. */
@media screen {
:root, :root[data-theme='light'], :root[data-theme='dark'] { --select-hover:var(--tint-3); --select-chosen:var(--pill); --select-focus:var(--focus-ring); }
@media (hover: hover) and (pointer: fine) { :root body select:hover:not(:disabled) { border-color:var(--fg-subtle); } }
:root body select option::checkmark { color:var(--focus-ring); }
}

/* Positive pop-ups: "Saved", "Payment recorded", "Settings saved". Green
   #06D6A0 (chosen 2026-10-05) with navy text (7.3:1; white would be 1.9:1)
   and a tick, so good news reads at a glance and is never confused with the
   blue of a button. Success notes use its pale ground and deeper text step
   #05775A (5.5:1). Status colours - present, paid - are not affected. */
:root { --positive:#06d6a0; --positive-ink:#023047; --positive-text:#05775a; --positive-soft:#e3faf3; --positive-line:#06d6a0; }
:root[data-theme='dark'] { --positive-text:#06d6a0; --positive-soft:#0c2a22; --positive-line:#0b5c47; }
:root body .toast--ok { display:flex; align-items:center; gap:9px; background:var(--positive); color:var(--positive-ink); }
:root body .toast--ok::before { content:'\2713'; display:inline-grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:var(--positive-ink); color:var(--positive); font-size:12px; font-weight:800; line-height:1; }
:root body .alert--ok { background:var(--positive-soft); color:var(--positive-text); box-shadow:inset 3px 0 0 var(--positive-line); }
:root[dir='rtl'] body .alert--ok { box-shadow:inset -3px 0 0 var(--positive-line); }