/* app/_shared/shared.css — KODA 4 Kids Winter Shop design tokens + primitives.
   One file for every surface (admin, parent, teacher, volunteer, privacy).

   Restyled 2026-09-15 to match the new public site (koda4kids, koda.css +
   pages.css) and the dashboard Jeremy drew in the same language: the logo
   colours straight off the artwork, a warm stone cream instead of a tan one,
   warm-tinted shadows with an inset top highlight, gradient buttons that lift,
   yellow "on" states, a white glass top bar, and Baloo 2 for display type with
   Nunito for body. Layout is untouched: every class name, size, padding and
   breakpoint below is the same as before — admin/app.js, v/app.js, p/index.html
   and privacy.html depend on them — only the skin changed.

   This is the charity's OWN brand (org 2716). It is deliberately neither the
   KODA Cleaning palette (orange/charcoal) nor the KODA Carpet one (maroon/slate/
   earth) — never mix them in here. */

:root {
  /* logo colours and their steps, as koda.css names them */
  --yellow: #F8B820; --yellow-deep: #E9A408; --yellow-soft: #FFE9B0; --yellow-wash: #FFF7E3;
  --gold-text: #8A5A00;                     /* readable gold for text: the logo yellow is 2.1:1 on white */
  --red: #E81828; --red-text: #C8101E; --red-soft: #FFD9DC;
  --green: #186818; --green-deep: #10500F; --green-soft: #D6EBD2;
  --teal: #004868; --teal-deep: #003049; --teal-soft: #D3E8F2; --teal-hi: #0A5C82;
  --rose: #E81828; --rose-deep: #B00F1C;    /* the action red: focus rings, Sign out */

  /* surfaces: bright, never dark */
  --white: #fff; --cream: #F8F6F3; --cream-2: #EFEBE6; --sky: #EFF7FB;
  --ink: #1F1D1A; --ink-soft: #5F594E; --ink-faint: #6E675C;
  --edge: #E8E4DE; --edge-2: #DED9D1; --hairline: rgba(31,29,26,.08);

  /* elevation: ambient + contact, warm-tinted */
  --sh-1: 0 1px 2px rgba(70,54,32,.06), 0 2px 6px -2px rgba(70,54,32,.08);
  --sh-2: 0 2px 4px rgba(70,54,32,.06), 0 8px 18px -6px rgba(70,54,32,.14);
  --sh-3: 0 3px 6px rgba(70,54,32,.07), 0 16px 32px -10px rgba(70,54,32,.18);
  --sh-4: 0 6px 12px rgba(70,54,32,.08), 0 28px 52px -16px rgba(70,54,32,.24);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,.9);
  --inset: inset 0 1px 2px rgba(70,54,32,.07);
  --ease: cubic-bezier(.2,.8,.28,1);
  --bounce: cubic-bezier(.34,1.4,.64,1);

  /* the app's own names, kept so every page still resolves */
  --sun: var(--yellow);   --sun-deep: var(--yellow-deep);
  --cherry: var(--red-text); --cherry-deep: var(--rose-deep);
  --pine: var(--green);  --pine-soft: #1E7A1E;
  --blue: var(--teal);   --blue-soft: var(--teal-hi);
  --paper: #fff;
  --warm: var(--cream-2); --warm-line: var(--edge);

  /* semantic aliases — the names the rest of the app already uses */
  --muted: var(--ink-soft); --line: var(--edge);
  --bg: var(--cream); --panel: var(--paper);
  --brand: var(--teal); --brand-dark: var(--teal-deep); --brand-soft: var(--teal-soft);
  --accent: var(--yellow);
  --ok: var(--green); --ok-bg: var(--green-soft);
  --warn: var(--red-text); --warn-bg: #FFF0F1;
  --amber: var(--gold-text); --amber-bg: var(--yellow-wash);

  --shadow: var(--sh-2); --shadow-sm: var(--sh-1);
  --r-lg: 30px; --r-md: 20px; --r-sm: 12px;
  --radius: var(--r-md); --tap: 52px;
  --disp: 'Baloo 2', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--cream);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; overflow-x: hidden; background-attachment: fixed; position: relative;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, var(--yellow-wash) 0%, transparent 58%),
    radial-gradient(900px 480px at 105% 0%, var(--teal-soft) 0%, transparent 54%),
    radial-gradient(820px 620px at 50% 120%, #FFF0F2 0%, transparent 62%);
}
/* The site's fine paper grain over everything, 3%: it stops the flat fills
   reading as a screen. Never catches a tap. */
body::after {
  content: ''; position: absolute; inset: 0; z-index: 9999; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print { body::after { display: none; } }

h1, h2, h3 { font-family: var(--disp); color: var(--ink); line-height: 1.12; letter-spacing: -.005em; font-weight: 700; }
h1 { font-size: 1.6rem; margin: .2rem 0 .6rem; font-weight: 800; }
h2 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
h3 { font-size: 1.02rem; margin: .8rem 0 .3rem; }
p { margin: .45rem 0; }
.muted { color: var(--muted); font-size: .9rem; }
.small { font-size: .82rem; }
a { color: var(--teal); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.wrap { max-width: 42rem; margin: 0 auto; padding: 1.1rem; }
.wrap.wide { max-width: 76rem; }

/* The four-colour rail is the app's signature. One per screen — on the first
   panel only, so admin's stacked panels and the volunteer queue don't turn into
   a barcode. Same order as the site's top bar: yellow, red, green, teal. */
.panel {
  background: linear-gradient(180deg, #fff, #FFFDF8); border-radius: var(--r-lg); padding: 1.4rem 1.3rem;
  box-shadow: var(--sh-2), var(--sh-inset-top); border: 1px solid var(--edge);
  margin: .9rem 0; position: relative; overflow: hidden;
}
.wrap > .panel:first-of-type::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--yellow), var(--red) 38%, var(--green) 68%, var(--teal));
}
.brand {
  font-family: var(--disp); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal); font-weight: 700;
}

label { display: block; font-family: var(--disp); font-size: .9rem; font-weight: 700; margin: .85rem 0 .3rem; color: var(--ink); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .65rem .7rem;
  border: 2px solid var(--edge-2); border-radius: 14px;
  background: #fff; color: var(--ink); min-height: 46px; box-shadow: var(--inset);
  transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--inset), 0 0 0 4px var(--teal-soft); }
input[readonly] { background: var(--cream-2); color: var(--ink); cursor: default; box-shadow: none; }
textarea { min-height: 4.5rem; resize: vertical; }

/* Buttons are the site's: a two-stop gradient (--bg over --bg2), a highlight
   along the top edge, and a small lift on hover. Variants only swap the stops. */
button, .btn {
  --bg: var(--teal-hi); --bg2: var(--teal); --fg: #fff;
  font-family: var(--disp); font-size: 1rem; font-weight: 700;
  padding: .7rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  background: linear-gradient(180deg, var(--bg), var(--bg2)); color: var(--fg); cursor: pointer; min-height: 46px;
  box-shadow: var(--sh-2), var(--sh-inset-top);
  transition: transform .2s var(--bounce), box-shadow .22s var(--ease), background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled), .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3), var(--sh-inset-top); }
button:active, .btn:active { transform: translateY(0) scale(.985); }
button:disabled { opacity: .5; cursor: default; transform: none; box-shadow: var(--sh-1), var(--sh-inset-top); }
.btn-accent { --bg: var(--yellow); --bg2: var(--yellow-deep); --fg: var(--ink); }
.btn-accent:hover:not(:disabled) { filter: saturate(1.08); }
.btn-ghost { --bg: #fff; --bg2: #F6F4F1; --fg: var(--ink); border-color: var(--edge-2); box-shadow: var(--sh-1), var(--sh-inset-top); }
.btn-ok { --bg: var(--pine-soft); --bg2: var(--green-deep); }
.btn-warn { --bg: var(--red); --bg2: var(--red-text); }
.btn-sm { font-size: .85rem; padding: .35rem .9rem; min-height: 36px; box-shadow: var(--sh-1), var(--sh-inset-top); }
.btn-big { width: 100%; min-height: var(--tap); font-size: 1.08rem; margin-top: .6rem; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; } .row .fix { flex: 0 0 auto; }
/* Baloo runs wider than Fredoka did: a button sharing a .row equally with a
   long pill was folding its label onto two lines. Labels stay on one line;
   the row wraps between items instead, as it always could. */
.row > button, .row > .btn, .topbar button, .tabs a, .tabs button { white-space: nowrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

.pill { display: inline-block; font-family: var(--disp); font-size: .75rem; font-weight: 800; letter-spacing: .01em; padding: .2rem .7rem; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); white-space: nowrap; }
.pill.ok { background: var(--green-soft); color: var(--green-deep); }
.pill.warn { background: var(--red-soft); color: var(--red-text); }
.pill.amber { background: var(--yellow-soft); color: var(--gold-text); }
.pill.grey { background: var(--cream-2); color: var(--ink-faint); }

.err { color: var(--red-text); font-size: .9rem; min-height: 1.2em; margin: .5rem 0 0; font-weight: 700; }
.note { background: var(--yellow-wash); border-left: 4px solid var(--yellow); padding: .55rem .75rem; border-radius: var(--r-sm); font-size: .9rem; margin: .4rem 0; }
.note b { color: var(--gold-text); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { font-family: var(--disp); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); position: sticky; top: 0; background: #fff; }
tr.click { cursor: pointer; } tr.click:hover { background: var(--sky); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
/* Sortable / filterable tables (ui.js mountTables): a heading sorts, ▽ opens a
   filter row under the headings, .tf-hide is a row a filter has taken out. */
th.tf-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.tf-sort:hover { color: var(--teal-hi); }
th.tf-asc::after { content: " ▲"; font-size: .72em; }
th.tf-desc::after { content: " ▼"; font-size: .72em; }
.tf-btn { font: inherit; font-size: .78rem; line-height: 1; min-height: 0; padding: .1rem .42rem; margin-left: .3rem; border-radius: 999px; border: 1px solid var(--edge-2); background: #fff; color: var(--ink-soft); vertical-align: middle; cursor: pointer; transition: none; box-shadow: none; }
.tf-btn:hover, .tf-btn.on { background: var(--teal); border-color: var(--teal); color: #fff; transform: none; box-shadow: none; }
.tf-row td { padding: .3rem .35rem .35rem; background: var(--cream-2); border-bottom: 2px solid var(--edge-2); vertical-align: top; }
.tf-row input { min-height: 30px; padding: .2rem 1.35rem .2rem .45rem; font-size: .85rem; border-width: 1px; border-radius: 8px; box-shadow: none; background: #fff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F594E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .45rem center; }
.tf-row input:not(:placeholder-shown) { background-image: none; }
.tf-row input::-webkit-calendar-picker-indicator { display: none !important; }
.tf-n, .tf-sum { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: .15rem; white-space: nowrap; }
.tf-sum { text-align: right; }
tr.tf-hide { display: none !important; }

/* Tabs and the language toggle: white pills with a soft teal edge; the one
   that is on goes logo yellow, as on Jeremy's dashboard. */
.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: .5rem 0; }
.tabs a, .tabs button {
  --bg: #fff; --bg2: #fff; --fg: var(--ink);
  font-family: var(--disp); font-size: .9rem; font-weight: 700; padding: .45rem 1rem;
  border-radius: 999px; border: 2px solid var(--teal-soft); background: #fff;
  color: var(--ink); text-decoration: none; min-height: 38px; box-shadow: var(--sh-1);
  transition: transform .18s var(--bounce), background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.tabs a:hover, .tabs button:hover:not(:disabled) { transform: translateY(-2px); background: var(--yellow-wash); border-color: var(--yellow); box-shadow: var(--sh-2); }
.tabs .on, .tabs .on:hover { background: linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color: var(--ink); border-color: var(--yellow-deep); box-shadow: var(--sh-2), var(--sh-inset-top); }

.langs { float: right; display: inline-flex; background: var(--paper); border: 2px solid var(--edge-2); border-radius: 999px; padding: 3px; box-shadow: var(--sh-1); }
.langs button { font-family: var(--disp); font-weight: 700; font-size: .85rem; border: 0; background: transparent; color: var(--ink-soft); padding: .3rem .8rem; border-radius: 999px; min-height: 32px; box-shadow: none; }
.langs button:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink); }
.langs button.on { background: linear-gradient(180deg, var(--teal-hi), var(--teal)); color: #fff; }

.card { border: 1px solid var(--edge); border-radius: var(--r-md); padding: .85rem .95rem; margin: .65rem 0; background: linear-gradient(180deg, #fff, #FFFDF8); box-shadow: var(--sh-1), var(--sh-inset-top); }
.card.hl { border-color: var(--yellow); border-width: 2px; }

.opt { display: flex; gap: .6rem; align-items: center; border: 2px solid var(--edge-2); border-radius: 14px; padding: .6rem .75rem; margin: .35rem 0; cursor: pointer; min-height: var(--tap); background: #fff; transition: border-color .18s, background .18s; }
.opt:hover { border-color: var(--yellow); background: var(--yellow-wash); }
.opt.on, .opt.on:hover { border-color: var(--teal); background: var(--teal-soft); }
.opt input { width: auto; min-height: 0; box-shadow: none; }

.size-verbatim { font-family: var(--disp); font-size: 1.2rem; font-weight: 800; color: var(--teal); }
.stamp { font-size: .75rem; color: var(--muted); }

/* The top bar is the site's header: white glass, ink text, the four-colour
   rail along its bottom edge. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 1.1rem; min-height: 3.6rem; color: var(--ink); position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.90); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--hairline); box-shadow: 0 1px 2px rgba(70,54,32,.05), 0 10px 24px -14px rgba(70,54,32,.28); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--yellow), var(--red) 38%, var(--green) 68%, var(--teal)); pointer-events: none; }
.topbar b { font-family: var(--disp); font-size: 1.05rem; font-weight: 800; }
.topbar .who { font-size: .82rem; color: var(--ink-soft); }
/* Compact, so the bar is the 3.6rem the admin sidebar and the attention
   drawer sit under (their sticky/fixed top), not a hair more. */
.topbar button { --bg: #fff; --bg2: #F6F4F1; --fg: var(--teal); border-color: var(--edge-2); min-height: 36px; padding: .35rem 1rem; font-size: .85rem; box-shadow: var(--sh-1), var(--sh-inset-top); }
.topbar button:hover:not(:disabled) { --fg: var(--teal-deep); border-color: var(--teal-soft); }

.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .65rem 1.2rem; border-radius: 999px; font-size: .9rem; z-index: 50; max-width: 90vw; box-shadow: var(--sh-4); }
.toast.warn { background: var(--red-text); } .toast.ok { background: var(--green); }

.sr { position: absolute; left: -9999px; }
[hidden] { display: none !important; }
pre.summary { white-space: pre-wrap; font: inherit; background: var(--cream-2); padding: .9rem; border-radius: var(--r-sm); font-size: .95rem; }
.big-num { font-family: var(--disp); font-size: 2.2rem; font-weight: 800; color: var(--teal); }

@media (max-width: 600px) {
  .grid2 { grid-template-columns: 1fr; }
  .wrap { padding: .8rem; }
  .panel { padding: 1.1rem 1rem; border-radius: var(--r-md); }
  h1 { font-size: 1.4rem; }
}