/* shift-ui.css - the shared design foundations every Shift page loads (v134.1).
 *
 * The 15 Oct 2026 look-and-feel review: each feature had grown its own colours, sizes, corners, shadows and pop-up
 * layers (about 450 colours, 50 text sizes, 21 corner radii, 41 stacking levels), so Shift read as five products.
 * This file is the ONE place those decisions live. Pages keep their own older variables for now; new and reworked
 * screens use these, and each later step moves more of the old ones over.
 *
 * Loaded by index.html, admin.html, chat.html, leader.html and the survey (both copies), before their own styles.
 * Precached by sw.js. No page should define these names itself.
 */
:root {
  /* colour: the brand, and the darker green that white text sits on (5.5:1, AA) */
  --ui-green: #009E3D;
  --ui-green-on: #007A2F;
  --ui-green-deep: #006326;
  --ui-green-soft: #E6F5EC;
  --ui-ink: #18211c;
  --ui-ink-2: #5E6863;        /* the lightest grey text may be (5.8:1 on white) */
  --ui-line: #dfe5e1;
  --ui-surface: #ffffff;
  --ui-ground: #f4f6f5;
  --ui-ok: #007A2F;
  --ui-warn: #b45309;
  --ui-bad: #d92d20;
  --ui-focus: #F2B51F;        /* the ELC yellow: a focus ring that shows on green, white and dark */

  /* type: six sizes, nothing smaller than 11px */
  --fs-xs: 11px;  --fs-sm: 13px;  --fs-md: 15px;  --fs-lg: 18px;  --fs-xl: 22px;  --fs-2xl: 28px;

  /* corners: three, and a pill */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;

  /* depth: three levels */
  --sh-1: 0 1px 3px rgba(17, 33, 25, .08);
  --sh-2: 0 4px 14px rgba(17, 33, 25, .12);
  --sh-3: 0 16px 44px rgba(17, 33, 25, .24);

  /* stacking: one scale for everything that floats */
  --z-sticky: 100;  --z-sheet: 1000;  --z-modal: 2000;  --z-toast: 3000;  --z-top: 100000;

  /* v136.0: the shared surfaces and soft status colours (dark mode). Pages and scripts use these instead of hex, so
     the dark set below changes them everywhere. Light values are the ones the app already used. */
  --surface-2: #f8f9fa;       /* a panel inside a card, a table header, a quiet stripe */
  --surface-3: #f1f3f4;       /* hover, a pressed row, a second stripe */
  --border-strong: #d1d5db;   /* an input or a divider that must show */
  --input-bg: #ffffff;
  --on-brand: #ffffff;        /* text on a brand-coloured button or bar: white in both themes */
  --warn-bg: #fef3c7;  --warn-deep: #92400e;
  --info-bg: #eff6ff;  --info-deep: #1d4ed8;
  --overlay: rgba(0, 0, 0, .45);

  /* the smallest thing a finger should have to hit */
  --tap: 44px;
}

/* Keyboard focus is always visible (the review: no :focus-visible anywhere, 21 outline:none rules). Mouse and touch
   users never see it; a keyboard or a switch user always does. !important so older outline:none rules cannot hide it. */
:focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 2px !important;
}

/* An empty list says what will appear and how to add the first one. */
.ui-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 16px; color: var(--ui-ink-2); font-size: var(--fs-sm); }
.ui-empty-title { font-size: var(--fs-md); font-weight: 700; color: var(--ui-ink); }
.ui-empty-icon { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--ui-green-soft); color: var(--ui-green-on); display: grid; place-items: center; }

/* A loading placeholder in the shape of what is coming, instead of "Loading..." text. */
.ui-skel { display: block; border-radius: var(--r-sm); min-height: 14px; background: linear-gradient(90deg, #eceff0 25%, #f6f8f8 37%, #eceff0 63%); background-size: 400% 100%; animation: ui-skel 1.3s ease infinite; }
@keyframes ui-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Status in words as well as colour. */
.ui-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; }
.ui-chip-ok { background: var(--ui-green-soft); color: var(--ui-ok); }
.ui-chip-warn { background: var(--warn-bg); color: var(--ui-warn); }
.ui-chip-bad { background: var(--danger-bg, #fbe5e3); color: var(--ui-bad); }
.ui-chip-info { background: var(--info-bg); color: var(--info-deep); }

/* Movement is optional. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* v135.0 - English or Arabic (src/i18n). The dropdown, the Arabic type, and the right-to-left basics. Pages mirror
   with dir="rtl" on <html>; flex rows and text flip on their own, and the per-screen fixes live with each phase. */
.lang-slot[hidden] { display: none !important; }
.lang-slot-login { display: flex; justify-content: center; margin-top: 10px; }
.lang-slot-bar { display: inline-flex; align-items: center; margin-inline-end: 8px; }
.lang-picker { font: inherit; font-size: var(--fs-sm); font-weight: 700; min-height: 36px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid rgba(0,0,0,.18); background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; }
.lang-slot-bar .lang-picker { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; }
.lang-slot-bar .lang-picker option { color: var(--ui-ink); }
/* Arabic letters from Noto Sans Arabic (loaded only when Arabic is chosen); Latin stays in the brand font. */
html[lang="ar"] {
  --brand-font: 'Nunito', 'Noto Sans Arabic', 'VAG Rounded ELC', system-ui, sans-serif;
  --brand-font-text: 'Nunito', 'Noto Sans Arabic', system-ui, sans-serif;
}
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] select, html[lang="ar"] input, html[lang="ar"] textarea { font-family: 'Nunito', 'Noto Sans Arabic', system-ui, sans-serif; }
/* Right to left: the few fixed pieces that point one way. */
html[dir="rtl"] #navFade { right: auto; left: 0; transform: scaleX(-1); }
/* Numbers, times and money read left to right inside Arabic text. */
html[dir="rtl"] .cc-time, html[dir="rtl"] .num, html[dir="rtl"] [data-ltr] { direction: ltr; unicode-bidi: isolate; }
/* v136.8 (accessibility audit): a PIN pad is a keypad, not text. In Arabic the grid mirrored to 3-2-1 and the dots
   filled from the right; a phone keypad keeps 1-2-3 left to right in every language, so this one does too. */
html[dir="rtl"] .pin-grid, html[dir="rtl"] .pin-dots { direction: ltr; }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   v136.0 - Light, Dark or Auto (src/theme stamps data-theme="light" or "dark" on <html>). Matt, 16 Oct 2026: "do dark
   mode overnight, default light, phones and tills". :root[data-theme="dark"] outranks every page's own :root (two
   selectors to one), so redefining the variables HERE re-colours the whole app. Brand fills (the green and blue bars,
   red and amber buttons with white text) stay as they are; surfaces, text, lines and the soft status backgrounds swap.
   Guide: docs/dark-mode.md.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* shift-ui tokens */
  --ui-ink: #e7ece9;  --ui-ink-2: #a9b3ae;  --ui-line: #323b36;  --ui-surface: #1b211e;  --ui-ground: #111613;
  --ui-green-soft: #163323;  --ui-ok: #6fd497;  --ui-warn: #f0b35c;  --ui-bad: #f28b82;
  --surface-2: #222a26;  --surface-3: #2a332e;  --border-strong: #46524b;  --input-bg: #151b18;
  --warn-bg: #33270f;  --warn-deep: #f2c27b;  --info-bg: #132540;  --info-deep: #9cc2ff;  --overlay: rgba(0, 0, 0, .62);
  --sh-1: 0 1px 3px rgba(0, 0, 0, .5);  --sh-2: 0 4px 14px rgba(0, 0, 0, .55);  --sh-3: 0 16px 44px rgba(0, 0, 0, .7);
  /* the pages' own older tokens (index.html, admin.html, chat.html): same names, dark values */
  --bg: #111613;  --card: #1b211e;  --border: #323b36;  --text: #e7ece9;  --sub: #a9b3ae;  --tiny: #9aa49f;
  --gp: #163323;  --elc-green-soft: #163323;  --brand-soft: #163323;  --elc-lime-soft: #2c3312;  --accent-soft: #2c3312;
  --ok: #4cc77a;  --ok-deep: #86e0a8;  --ok-bg: #143322;  --ok-border: #2f6b45;
  --danger: #f87171;  --danger-bg: #3b1715;  --danger-deep: #f6a39b;
  /* the v86 brand surface and ink tokens (index.html and admin.html; cards, text and hairlines in several screens) */
  --brand-bg-page: #111613;  --brand-bg-card: #1b211e;  --brand-bg-frosted: rgba(27, 33, 30, .78);
  --brand-ink-1: #e7ece9;  --brand-ink-2: #a9b3ae;  --brand-ink-3: #8f9a95;  --brand-ink-4: #5f6b65;
  --brand-hairline: rgba(231, 236, 233, .12);
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .ui-skel { background: linear-gradient(90deg, #222a26 25%, #2a332e 37%, #222a26 63%); background-size: 400% 100%; }
/* v136.8 (accessibility audit): the empty-state icon was the dark brand green (#007A2F) on the dark green tint, 2.5:1.
   In Dark it takes the light green the other dark status text uses (7.5:1). Light is unchanged. */
:root[data-theme="dark"] .ui-empty-icon { color: var(--ui-ok); }

/* The Light / Dark / Auto button, beside the language dropdown (src/theme). Hidden until Head Office allows it. */
.theme-slot[hidden] { display: none !important; }
.theme-slot-login { display: flex; justify-content: center; margin-top: 8px; }
.theme-slot-bar { display: inline-flex; align-items: center; margin-inline-end: 8px; }
.theme-btn { font: inherit; font-size: var(--fs-sm); font-weight: 700; min-height: 36px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgba(0,0,0,.18); background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.theme-slot-bar .theme-btn { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; padding: 4px 10px; }
.theme-slot-bar .theme-btn-label { display: none; }   /* the bar is tight on a till: the icon alone, its name is the title */

/* ── Area colour settings (v136.1 / v136.2). Each area adds ONLY inside its own block, so parallel work merges. ── */

/* area: staff rota, clock, deliveries, cover */
:root { --area-rota: 1; }
:root[data-theme="dark"] { --area-rota: 1; }
/* v136.1: the staff page (index.html) and its rota, clock, cover, PIN pad and screens modules. Light values are the
   exact colours these screens used before, so Light does not change; dark values are muted tints and light inks. */
:root {
  --rota-green-ink: #075e54;  --rota-red-ink: #d92d20;  --rota-ok-fill: #166534;
  --rota-ok-soft: #f0fdf4;  --rota-ok-line: #bbf7d0;
  --rota-danger-soft: #fef2f2;  --rota-danger-line: #fecaca;  --rota-danger-mid: #fca5a5;
  --rota-warn-soft: #fffbeb;  --rota-warn-line: #fcd34d;  --rota-warn-line-soft: #fde68a;
  --rota-info-bg2: #dbeafe;  --rota-info-line: #bfdbfe;  --rota-info-ink: #3a5180;
  --rota-purple-bg: #ede9fe;  --rota-purple-soft: #f5f3ff;  --rota-purple-deep: #6d28d9;
  --rota-teal-bg: #ccfbf1;  --rota-teal-deep: #0f766e;
  --rota-cyan-bg: #cffafe;  --rota-cyan-deep: #0e7490;
  --rota-rose-bg: #ffe4e6;  --rota-rose-deep: #9f1239;
  --rota-cover-short-bg: #fbe3b8;  --rota-cover-spare-bg: #dce8f3;  --rota-cover-ok-bg: #dcefe3;  --rota-cover-spare-num: #3f78a8;
  --rota-frost: rgba(240, 242, 245, .95);  --rota-frost-ios: rgba(242, 242, 247, .92);
  --rota-glass: rgba(255, 255, 255, .55);  --rota-glass-2: rgba(255, 255, 255, .6);
  --rota-key-bg: #ffffff;  --rota-key-line: #e9edef;  --rota-toast-bg: #111b21;  --rota-ink-faint: #B5BEBA;  --rota-closed: rgba(243,244,246,0.85);
}
:root[data-theme="dark"] {
  --rota-green-ink: #6fd497;  --rota-red-ink: #f28b82;  --rota-ok-fill: #166534;
  --rota-ok-soft: #13291c;  --rota-ok-line: #2f6b45;
  --rota-danger-soft: #2c1513;  --rota-danger-line: #6b2a25;  --rota-danger-mid: #c96a60;
  --rota-warn-soft: #2a2110;  --rota-warn-line: #7a5c1a;  --rota-warn-line-soft: #5e4a1a;
  --rota-info-bg2: #1b3358;  --rota-info-line: #2b4a75;  --rota-info-ink: #9cc2ff;
  --rota-purple-bg: #2a2145;  --rota-purple-soft: #211b33;  --rota-purple-deep: #c4b5fd;
  --rota-teal-bg: #0f2f2b;  --rota-teal-deep: #5eead4;
  --rota-cyan-bg: #0c2d35;  --rota-cyan-deep: #67e8f9;
  --rota-rose-bg: #3a1520;  --rota-rose-deep: #fda4af;
  --rota-cover-short-bg: #3d2a0c;  --rota-cover-spare-bg: #16283a;  --rota-cover-ok-bg: #15301f;  --rota-cover-spare-num: #8cb8e0;
  --rota-frost: rgba(17, 22, 19, .95);  --rota-frost-ios: rgba(17, 22, 19, .92);
  --rota-glass: rgba(255, 255, 255, .06);  --rota-glass-2: rgba(255, 255, 255, .07);
  --rota-key-bg: #2a332e;  --rota-key-line: #4a564f;  --rota-toast-bg: #2f3a34;  --rota-ink-faint: #6b766f;  --rota-closed: rgba(0,0,0,0.32);
}
/* end area: staff rota */




/* area: staff chat, email, calls, news, tasks, notices */
:root { --area-comms: 1; }
:root[data-theme="dark"] { --area-comms: 1; }
/* v136.1 (staff comms). The chat keeps its WhatsApp look in Light (pinned by tests/restyle-elc_test.js); in Dark it
   goes the way WhatsApp's own dark mode does: a near-black wallpaper, dark grey bubbles for others, a dark green one
   for me. The --comms-* names are the exact Light colours news, tasks, calls, contacts and the rest already used. */
:root {
  --chat-wall: #eae6df;  --chat-in: #fff;  --chat-me: #d9fdd3;  --chat-bar: #f0f2f5;  --chat-field: #fff;
  --chat-accent: #075e54;                     /* the WhatsApp teal as TEXT, a link or a line (fills keep the hex) */
  --chat-chip: rgba(255, 255, 255, .88);  --chat-quote: rgba(0, 0, 0, .06);  --chat-react-mine: #d0f0dd;
  --comms-sub: #54656f;  --comms-mute: #8696a0;  --comms-hint: #8a9590;  --comms-grey: #6b7280;
  --comms-body: #3b4a54;  --comms-ink-soft: #2d3a33;  --comms-face: #dfe5e7;
  --comms-err: #b91c1c;  --comms-red: #c62828;  --comms-red-soft: #fef2f2;  --comms-red-faint: #fff7f7;
  --comms-red-line: #fecaca;  --comms-red-rule: #f6e7e7;
  --comms-note-bg: #fff8e1;  --comms-note-line: #f5e2a8;  --comms-note-ink: #6d5c00;  --comms-amber-ink: #8a6d1a;
  --comms-peach-bg: #fff4e5;  --comms-peach-ink: #8a4b00;
  --comms-orange-bg: #fff7ed;  --comms-orange-line: #fed7aa;  --comms-orange-ink: #9a3412;  --comms-orange-deep: #7c2d12;
  --comms-info-line: #93c5fd;  --comms-info-ink: #3b5468;  --comms-ok-ink: #0b7a3b;
  --comms-brand-text: var(--brand, #009E3D);  --comms-brand-ink: var(--brand-dark, #007A2F);   /* green TEXT */
}
:root[data-theme="dark"] {
  --chat-wall: #0c1310;  --chat-in: #1f2a25;  --chat-me: #0d4a3a;  --chat-bar: #1b211e;  --chat-field: #2a332e;
  --chat-accent: #4fc9a4;
  --chat-chip: rgba(31, 42, 37, .92);  --chat-quote: rgba(255, 255, 255, .08);  --chat-react-mine: #1d4a33;
  /* v136.8 (accessibility audit): --comms-mute was #9aa49f, 4.0:1 on my own green bubble (--chat-me); now 5.1:1 */
  --comms-sub: #a9b3ae;  --comms-mute: #b0bab5;  --comms-hint: #9aa49f;  --comms-grey: #a9b3ae;
  --comms-body: #cdd5d1;  --comms-ink-soft: #d5ddd8;  --comms-face: #2f3a35;
  --comms-err: #f6a39b;  --comms-red: #f28b82;  --comms-red-soft: #3b1715;  --comms-red-faint: #2a1c1b;
  --comms-red-line: #6b2a26;  --comms-red-rule: #3a2422;
  --comms-note-bg: #33270f;  --comms-note-line: #5c4a1c;  --comms-note-ink: #f2c27b;  --comms-amber-ink: #f2c27b;
  --comms-peach-bg: #33240f;  --comms-peach-ink: #f5b97b;
  --comms-orange-bg: #33210f;  --comms-orange-line: #6b4320;  --comms-orange-ink: #f5b27b;  --comms-orange-deep: #f5b27b;
  --comms-info-line: #2f4e7a;  --comms-info-ink: #b9cde0;  --comms-ok-ink: #86e0a8;
  --comms-brand-text: #4cc77a;  --comms-brand-ink: #6fd497;
}
/* end area: staff comms */




/* area: staff checks, logs, EOD, KPI, Top 50, bonus, balances, badges */
:root { --area-stores: 1; }
:root[data-theme="dark"] { --area-stores: 1; }
/* v136.1: the store work screens' own colours (src/checklists, logs, eod, kpi, top50 staff, trade-drives, bonus,
   balances, achievements, addonTally). Light values are the exact hex each replaced, so Light does not change. */
:root {
  --stores-ink-3: #8A9590;          /* the light grey labels (was brand ink 3) */
  --stores-rag-green: #009E3D;  --stores-rag-lime: #5C8A00;  --stores-rag-amber: #C58F00;  --stores-rag-red: #C7503C;
  --stores-up: #16a34a;  --stores-down: #dc2626;  --stores-amber: #d97706;  --stores-blue: #3b82f6;
  --stores-slate: #475569;  --stores-cyan: #0891b2;
  --stores-amber-soft: #FFF6E0;     /* the current week or day highlight */
  --stores-today-bg: #fef9c3;
  --stores-ok-soft: #f0fdf4;  --stores-purple-soft: #f8f0ff;
  --stores-ok-line: #bbf7d0;  --stores-warn-line: #fde68a;  --stores-danger-line: #fecaca;
  --stores-track: rgba(26, 29, 28, .06);
}
:root[data-theme="dark"] {
  --stores-ink-3: #9aa49f;
  --stores-rag-green: #4cc77a;  --stores-rag-lime: #a6cf4f;  --stores-rag-amber: #e8b84a;  --stores-rag-red: #f08a78;
  --stores-up: #4cc77a;  --stores-down: #f87171;  --stores-amber: #f0b35c;  --stores-blue: #7fb0ff;
  --stores-slate: #b4bfca;  --stores-cyan: #5cc8e0;
  --stores-amber-soft: #33270f;
  --stores-today-bg: #302b10;
  --stores-ok-soft: #12291b;  --stores-purple-soft: #2a2138;
  --stores-ok-line: #1f4a31;  --stores-warn-line: #5c4517;  --stores-danger-line: #5e2a26;
  --stores-track: rgba(255, 255, 255, .08);
}
/* end area: staff stores */




/* area: staff training, My Development, surveys, policies, requests, petty cash, visits */
:root { --area-learning: 1;
  /* v136.1: the colours My Development, Store Visits and Training used that have no shared variable. Light values are
     the ones those screens already drew, so Light does not change. */
  --learn-grey: #8e8e93;        /* the iOS-style grey text in My Development and the visit forms */
  --learn-faint: #c7c7cc;       /* a not-yet number, a score with no data */
  --learn-track: #e9e9eb;       /* a segmented control's track, a progress bar's empty part, a quiet chip */
  --learn-pill: #ffffff;        /* the chosen segment sitting on that track */
  --learn-green-ink: #00853e;   /* green text: the training headings and the chosen tab */
  --learn-frost: rgba(255, 255, 255, .86);   /* the visit form's see-through sticky header */
  --learn-bad-line: #fecaca;  --learn-bad-edge: #fca5a5;   /* borders round a red tint */
  --learn-ok-line: #a7f3d0;     /* border round a green tint */
  --learn-warn-line: #fde68a;   /* border round an amber tint */
  --learn-info-line: #bfdbfe;   /* border round a blue tint */
  --learn-green-line: #d7ecdd;  /* border round the pale ELC green */
}
:root[data-theme="dark"] { --area-learning: 1;
  --learn-grey: #9aa49f;  --learn-faint: #8a948f;  --learn-track: #2a332e;  --learn-pill: #3b4640;
  --learn-green-ink: #6fd497;  --learn-frost: rgba(27, 33, 30, .86);
  --learn-bad-line: #5c2622;  --learn-bad-edge: #7a302a;  --learn-ok-line: #2f6b45;  --learn-warn-line: #6b5418;
  --learn-info-line: #27406b;  --learn-green-line: #2c5a3c;
}
/* end area: staff learning */




/* area: admin frame, home, trade, uploads */
:root { --area-admin: 1; }
:root[data-theme="dark"] { --area-admin: 1; }
/* v136.2: the admin page, home, trade and uploads. Each Light value is the exact hex it replaces, so Light is unchanged. */
:root {
  /* pale status panels, paler than the shared tints */
  --adm-ok-pale: #f0fdf4;  --adm-danger-pale: #fef2f2;  --adm-warn-pale: #fffbeb;
  --adm-info-tint: #dbeafe;  --adm-purple-pale: #f5f3ff;  --adm-purple-tint: #ede9fe;  --adm-teal-bg: #ccfbf1;
  --adm-row-hover: #f8fffe;
  /* coloured text on white */
  --adm-amber-text: #b45309;  --adm-yellow-text: #a16207;  --adm-ok-text: #059669;  --adm-paid-text: #0E7A5F;
  --adm-red-text: #b91c1c;  --adm-red: #dc2626;  --adm-link: #2563eb;  --adm-sky-text: #0369a1;
  --adm-purple-text: #6d28d9;  --adm-teal-text: #0f766e;
  /* the line round a tinted panel */
  --adm-warn-line: #fde68a;  --adm-danger-line: #fecaca;  --adm-ok-line: #bbf7d0;  --adm-info-line: #bae6fd;
  --adm-purple-line: #ddd6fe;
}
:root[data-theme="dark"] {
  --adm-ok-pale: #12291c;  --adm-danger-pale: #321614;  --adm-warn-pale: #2b220f;
  --adm-info-tint: #1a3152;  --adm-purple-pale: #241f38;  --adm-purple-tint: #2e2650;  --adm-teal-bg: #12332f;
  --adm-row-hover: #232c27;
  --adm-amber-text: #f2c27b;  --adm-yellow-text: #e8c66a;  --adm-ok-text: #6fd497;  --adm-paid-text: #6fd4b4;
  --adm-red-text: #f6a39b;  --adm-red: #f87171;  --adm-link: #8ab4ff;  --adm-sky-text: #7dd3fc;
  --adm-purple-text: #c4b5fd;  --adm-teal-text: #5eead4;
  --adm-warn-line: #5c4718;  --adm-danger-line: #6b2a25;  --adm-ok-line: #2f6b45;  --adm-info-line: #1e3a5f;
  --adm-purple-line: #4c3d7a;
}
/* end area: admin */





/* area: admin people and settings */
/* Colours the People and Settings screens use that have no close shared variable. Light = the exact old value. */
:root {
  --area-admin-people: 1;
  --ap-orange-bg: #fff7ed;  --ap-orange-line: #fed7aa;  --ap-orange-deep: #9a3412;   /* "read this first" notes */
  --ap-amber-line: #fde68a;  --ap-ok-line: #bbf7d0;  --ap-danger-line: #fecaca;       /* borders round the soft tints */
  --ap-indigo-bg: #eef2ff;  --ap-indigo-deep: #3730a3;  --ap-violet-bg: #faf5ff;     /* feedback and category chips, evidence notes */
  --ap-chip-off: #e6e6e6;   /* a grey chip: a module not yet sat, a closed exit interview */
  --ap-row-hi: #f2f7f4;     /* comms report: subtotal and hover rows */
  --ap-solid: #111827;      /* data capture: the dark table header and the chosen period (white text on it) */
  --ap-ink-3: #8A9590;      /* holiday tracker: the small labels round the chart */
  --ap-teal-text: #0a8a5f;  /* green "on" and "saved" words */
  --ap-c-teal: #0d9488;  --ap-c-violet: #7c3aed;  --ap-c-sky: #0284c7;              /* Amanah sync count chips */
}
:root[data-theme="dark"] {
  --area-admin-people: 1;
  --ap-orange-bg: #33240f;  --ap-orange-line: #5c4320;  --ap-orange-deep: #f5b58a;
  --ap-amber-line: #5a4a1a;  --ap-ok-line: #2f6b45;  --ap-danger-line: #6b2a25;
  --ap-indigo-bg: #1f2245;  --ap-indigo-deep: #b9bdff;  --ap-violet-bg: #2a1f3d;
  --ap-chip-off: #323b36;
  --ap-row-hi: #1f2a24;
  --ap-solid: #46524b;
  --ap-ink-3: #9aa49f;
  --ap-teal-text: #6fd497;
  --ap-c-teal: #5eead4;  --ap-c-violet: #c4b5fd;  --ap-c-sky: #7dd3fc;
}
/* end area: admin people */





/* area: admin rota, time and stores */
:root { --area-admin-rota: 1; }
:root[data-theme="dark"] { --area-admin-rota: 1; }
/* v136.2 (admin compliance, AM planner, cover check, contacts, checklist purge). Light values are the exact colours
   these screens drew before, so Light does not change. Pale tiles, the borders round a tinted note, and status text
   that must read on a dark card as well as on its tint. */
:root {
  --arota-ok-pale: #f0fdf4;  --arota-warn-pale: #fefce8;  --arota-amber-pale: #fffbeb;  --arota-bad-pale: #fef2f2;
  --arota-bad-border: #fecaca;  --arota-warn-border: #fde68a;  --arota-info-border: #bfdbfe;
  --arota-green-ink: var(--green);  --arota-red-ink: var(--red);  --arota-amber-ink: #d97706;
  --arota-bad-ink: #b91c1c;  --arota-good-ink: #059669;  --arota-good-ink-2: #047857;  --arota-link: #2563eb;
  /* cover check: short (amber), spare (blue), ok (green), not set up (grey) */
  --arota-cc-short-bg: #fbe3b8;  --arota-cc-short-ink: #7a4300;
  --arota-cc-spare-bg: #dce8f3;  --arota-cc-spare-ink: #23455f;
  --arota-cc-ok-bg: #dcefe3;     --arota-cc-ok-ink: #1f5a38;
  --arota-cc-none-bg: #f1f3f2;   --arota-cc-none-ink: #8a948f;
}
:root[data-theme="dark"] {
  --arota-ok-pale: #143322;  --arota-warn-pale: #33270f;  --arota-amber-pale: #33270f;  --arota-bad-pale: #3b1715;
  --arota-bad-border: #6b2a26;  --arota-warn-border: #5c4417;  --arota-info-border: #24426b;
  --arota-green-ink: #86e0a8;  --arota-red-ink: #f6a39b;  --arota-amber-ink: #f2c27b;
  --arota-bad-ink: #f6a39b;  --arota-good-ink: #6fd497;  --arota-good-ink-2: #86e0a8;  --arota-link: #9cc2ff;
  --arota-cc-short-bg: #3d2a0e;  --arota-cc-short-ink: #f5c27f;
  --arota-cc-spare-bg: #16283a;  --arota-cc-spare-ink: #a9cbec;
  --arota-cc-ok-bg: #173022;     --arota-cc-ok-ink: #8fd8aa;
  --arota-cc-none-bg: #2a332e;   --arota-cc-none-ink: #9aa49f;
}
/* end area: admin rota */





/* area: admin comms, training and customer screens */
:root { --area-admin-comms: 1; }
:root[data-theme="dark"] { --area-admin-comms: 1; }
/* v136.2: the admin Messages screen (src/chatAdmin, in admin.html AND chat.html, which define --sub and --border
   differently, so the chat reads its own exact Light values here), and News, Tasks, Surveys, Achievements, Training
   and the trade pack's bar (the slides stay light: they are what prints). Light values are the colours the screens
   already used, so nothing changes in Light. */
:root {
  --adm-chat-wall: #eae6df;  --adm-chat-card: #fff;  --adm-chat-panel: #f0f2f5;  --adm-chat-hover: #f5f6f6;
  --adm-chat-line: #f0f2f5;  --adm-chat-line-mid: #e0e0e0;  --adm-chat-edge: #d1d7db;  --adm-chat-avatar: #dfe5e7;
  --adm-chat-text: #111b21;  --adm-chat-ink-2: #3b4a54;  --adm-chat-sub: #54656f;  --adm-chat-meta: #667781;  --adm-chat-faint: #8696a0;
  --adm-chat-accent: #075e54;   /* the chat green as TEXT (sender names, links); the green bars keep #075e54 */
  --adm-chat-me: #d9fdd3;  --adm-chat-react-mine: #d0f0dd;
  --adm-chat-chip: rgba(255, 255, 255, .88);  --adm-chat-quote: rgba(0, 0, 0, .06);
  --adm-chat-flag-bg: #fff4e5;  --adm-chat-flag-line: #ffd8a8;  --adm-chat-flag-text: #8a4b00;
  --adm-chat-note-bg: #fff8e1;  --adm-chat-note-text: #8a6d00;
  --adm-chat-concern-bg: #ffe3e3;  --adm-chat-concern-text: #c92a2a;
  --adm-chat-q-bg: #e7f5ff;  --adm-chat-q-text: #1971c2;
  --adm-chat-lang-bg: #f3e8ff;  --adm-chat-lang-text: #7b2ff2;
  --adm-chat-err: #c0392b;  --adm-chat-rec: #c62828;

  --adm-comms-ink: #374151;  --adm-comms-body: #3a4a42;  --adm-comms-faint: #9ca3af;  --adm-comms-muted: #8696a0;
  --adm-comms-ok-text: #059669;  --adm-comms-bad-text: #b91c1c;  --adm-comms-red-text: #c62828;  --adm-comms-amber-text: #d97706;
  --adm-comms-green-text: #00853e;  --adm-comms-blue-text: #0b5cad;  --adm-comms-gold-text: #8a6d00;
  --adm-comms-orange-text: #9a3412;  --adm-comms-orange-2: #c2410c;
  --adm-comms-ok-soft: #f0fdf4;  --adm-comms-warn-soft: #fffbeb;  --adm-comms-danger-soft: #fef2f2;  --adm-comms-orange-bg: #fff7ed;
  --adm-comms-warn-line: #fde68a;  --adm-comms-warn-line2: #fcd34d;  --adm-comms-danger-line: #fecaca;
  --adm-comms-orange-line: #fed7aa;  --adm-comms-orange-line2: #fdba74;  --adm-comms-past-line: #dbeafe;
  --adm-comms-brief-bg: #f2f7f4;  --adm-comms-brief-line: #cfe3d6;  --adm-comms-aside-bg: #eef7f1;
}
:root[data-theme="dark"] {
  --adm-chat-wall: #0f1512;  --adm-chat-card: #1b211e;  --adm-chat-panel: #222a26;  --adm-chat-hover: #2a332e;
  --adm-chat-line: #2a332e;  --adm-chat-line-mid: #3a443f;  --adm-chat-edge: #46524b;  --adm-chat-avatar: #2f3934;
  /* v136.8 (accessibility audit): meta and faint were #a3ada8 and #939d98, 4.4:1 and 3.6:1 on my own bubble
     (--adm-chat-me); now 5.4:1 and 5.1:1 */
  --adm-chat-text: #e7ece9;  --adm-chat-ink-2: #cdd5d1;  --adm-chat-sub: #a9b3ae;  --adm-chat-meta: #b5bfba;  --adm-chat-faint: #b0bab5;
  --adm-chat-accent: #5fcfb5;
  --adm-chat-me: #1d4a33;  --adm-chat-react-mine: #1d4a33;
  --adm-chat-chip: rgba(27, 33, 30, .92);  --adm-chat-quote: rgba(255, 255, 255, .07);
  --adm-chat-flag-bg: #33270f;  --adm-chat-flag-line: #6b4a1a;  --adm-chat-flag-text: #f2c27b;
  --adm-chat-note-bg: #2e2610;  --adm-chat-note-text: #e6c76a;
  --adm-chat-concern-bg: #3b1715;  --adm-chat-concern-text: #f6a39b;
  --adm-chat-q-bg: #132540;  --adm-chat-q-text: #9cc2ff;
  --adm-chat-lang-bg: #2a1d3d;  --adm-chat-lang-text: #cfb2ff;
  --adm-chat-err: #f6a39b;  --adm-chat-rec: #f28b82;

  --adm-comms-ink: #d3dad6;  --adm-comms-body: #cfd6d2;  --adm-comms-faint: #8f9994;  --adm-comms-muted: #939d98;
  --adm-comms-ok-text: #6fd497;  --adm-comms-bad-text: #f6a39b;  --adm-comms-red-text: #f28b82;  --adm-comms-amber-text: #f0b35c;
  --adm-comms-green-text: #4cc77a;  --adm-comms-blue-text: #9cc2ff;  --adm-comms-gold-text: #e6c76a;
  --adm-comms-orange-text: #f5b183;  --adm-comms-orange-2: #f59e61;
  --adm-comms-ok-soft: #143322;  --adm-comms-warn-soft: #2e230e;  --adm-comms-danger-soft: #351513;  --adm-comms-orange-bg: #33200f;
  --adm-comms-warn-line: #5a4519;  --adm-comms-warn-line2: #7a5c16;  --adm-comms-danger-line: #5a2621;
  --adm-comms-orange-line: #6b3f1a;  --adm-comms-orange-line2: #8a4a1c;  --adm-comms-past-line: #2a3f63;
  --adm-comms-brief-bg: #18241e;  --adm-comms-brief-line: #2f4a3a;  --adm-comms-aside-bg: #163323;
}
/* end area: admin comms */




/* area: accessibility audit (v136.8, 16 Oct 2026)
   Fixes to rules that live in the <head> styles of index.html and admin.html, kept here so parallel work on those heads
   merges cleanly. Each selector starts with "html" so it outranks the page's own rule, which loads after this file.
   (A later tidy-up can fold these into the page rules and delete them here; tests/v136-8-a11y_test.js pins the RULE,
   not the place.) */

/* Readable filled buttons: white text at 4.5:1 or better, in Light and Dark (the fills do not change with the theme).
   Red #dc2626 (4.8:1; was #ef4444, 3.8:1, and #f87171 in Dark, 2.8:1); amber var(--amber) #b45309 (5.0:1; was
   #f59e0b, 2.1:1). */
html .cc-action.act-late, html .cd-big-btn.btn-primary-out { background: #dc2626; }
html .cd-big-btn.btn-primary-out { box-shadow: 0 4px 12px rgba(220, 38, 38, .3); }
html .cc-action.act-break, html .cd-big-btn.btn-primary-break { background: var(--amber, #b45309); }
html .cd-big-btn.btn-primary-break { box-shadow: 0 4px 12px rgba(180, 83, 9, .3); }
html .tv-btn.active { background: var(--amber, #b45309); border-color: var(--amber, #b45309); color: #fff; }
/* admin: the sign-in, publish and chosen-scope buttons sit on the green white text reads on (5.5:1; --green is 3.5:1),
   the same as .btn-green */
html .auth-btn, html .publish-btn { background: var(--green-on, #007A2F); }
html .rule-scope-btn.active { background: var(--green-on, #007A2F); border-color: var(--green-on, #007A2F); }

/* Finger-sized (44px) in the staff app: the Checks answer buttons, the rota week arrows, view tabs and day pills. */
html .cl-answer-btn { min-height: var(--tap, 44px); min-width: 56px; }
html .week-btn { min-width: var(--tap, 44px); min-height: var(--tap, 44px); }
html .view-tab { min-height: var(--tap, 44px); }
html .day-pill { min-height: var(--tap, 44px); }

/* Right to left: the close buttons on the clock sheet and the AI panel sit at the end of the line in Arabic too.
   (LTR keeps the page's own right:14px.) */
html[dir="rtl"] .cd-close, html[dir="rtl"] .ai-close { right: auto; left: 14px; }
/* end area: accessibility audit */