/* Three colour themes on one neutral base (R-home-R3-01, D-shared-10): white cards on a cool grey canvas, graphite chrome and
   primary buttons in every theme; blue and green change only the accent family. Category, rota and workflow colours retain their meanings. */
@import url('./design-tokens.css');

:root[data-theme] {
  --ink: #1f2329;
  --muted: #5f6670;
  --line: #e5e6eb;
  --paper: #ffffff;
  --canvas: #f4f5f7;
  --orange: #c44200;
  --gmv: #cb580f;
  --phone: #245fae;
  --pad: #9b6fd3;
  --aiot: #12937f;
  --green: #2d745b;
  --accent: #c44200;
  --accent-soft: #fff1e7;
  --accent-bright: #e85f00;
  --graphite: #1f2329;
  --surface-soft: #eff1f4;
  --info-soft: var(--surface-soft);
  --surface-hover: #f7f8fa;
  --success-soft: #e7f5ee;
  --chrome: #1f2329;
  --chrome-ink: #d9dbe0;
  --field-border: #878d96;
  --avatar-bg: #eef0f3;
  --avatar-border: #e1e4e9;
  --avatar-ink: #4b525d;
  --dock-paper: #fffffffa;
  --neutral-strong: #4b525d;
  --action-hover: #2d333c;
  --action-mark: #ffb07a;
  --action-mark-ink: #7a2c00;
  --action-muted: #d4d7dd;
  --action-text: #fff2ea;
  --row-line: #eff0f3;
  --axis-ink: #7a808a;
  --menu-shadow: #1f23292b;
  --backdrop: #1f232966;
  --toast-shadow: #1f232920;
  --theme-indicator: #ffb07a;
  --faint: #9ea3ab;
  --warning-ink: #9c5700;
}
:root[data-theme="blue"] {
  --orange:#2f5d93; --accent:#2f5d93; --accent-soft:#e8f0fa; --accent-bright:#5d8dc0;
  --action-mark:#b6d4f4; --action-mark-ink:#244262; --action-text:#f0f6ff; --theme-indicator:#a1bad6;
}
:root[data-theme="green"] {
  --orange:#28674f; --accent:#28674f; --accent-soft:#e8f2eb; --accent-bright:#599579;
  --action-mark:#b9d9bd; --action-mark-ink:#284e34; --action-text:#eff7ec; --theme-indicator:#adc7a2;
}


/* Fixed meanings (INTERACTION-SPEC §2.4): the same in every theme, so no theme block may override them.
   Shift colours follow Rota; store colours and red-up / green-down follow Data; priority follows the Home notice;
   completed states are graphite grey, never green (D-shared-05). */
:root {
  --success: #0f7a55; --warning-soft: #fff5dc; --danger: #d1352b; --danger-soft: #fff3f2;
  --shift-early-bg: #f4e5a6; --shift-early-ink: #493912; --shift-early-line: #a5810e;
  --shift-mid-bg: #f2bfd7; --shift-mid-ink: #60203c; --shift-mid-line: #b44173;
  --shift-late-bg: #bde2ef; --shift-late-ink: #1c5063; --shift-late-line: #327b94;
  --shift-off-bg: #e9edf1; --shift-off-ink: #5d6979; --shift-off-line: #97a2af;
  --store-stratford: #ff6900; --store-stratford-soft: #fff0df; --store-whitecity: #287ee7; --store-whitecity-soft: #eaf1ff;
  --trend-up: #c93b3c; --trend-up-soft: #fcf0f0; --trend-down: #0c7f57; --trend-down-soft: #eff8f3;
  --priority: #d14800; --priority-soft: #fff1e7; --priority-ink: #a33600; --priority-line: #ffc9a3;
  --brand-orange: #ff6900;
  --done-fill: #4b4d53; /* retired (R-tasks-08): nothing on live refers to it since employee-shared-training-20260928-v2; delete once every lane branch has rebased past that release */
}
/* v1.1 (batch 1): colours added for the migration map and the lanes' requests. Fixed in every theme. */
:root {
  --on-dark: #ffffff;
  --store-stratford-ink: #cd3800; --store-whitecity-ink: #0e6cd3; --store-stratford-fill: #e5600b; --store-whitecity-fill: #287bc2;
  --danger-line: #f3c4bd;
  --chart-1: var(--gmv); --chart-2: var(--phone); --chart-3: var(--pad); --chart-4: var(--aiot); --chart-5: #a67c00; --chart-6: #c2408a;
  --chart-grid: var(--row-line); --chart-axis: var(--axis-ink); --chart-label: var(--muted);
  --gift-ink: #2f6b4f; --gift-soft: #e7f2ea; --addon-ink: #3f5f99; --addon-soft: #ebf0f8; --main-ink: #b84000; --main-soft: #fff0e4;
  --award-gold-ink: #7a5412; --award-gold-soft: #fbf1d8; --award-gold-line: #e3c27a;
  --award-silver-ink: #4d5560; --award-silver-soft: #eef0f3; --award-silver-line: #c3c9d1;
  --award-bronze-ink: #7a4020; --award-bronze-soft: #f8e9df; --award-bronze-line: #d9a887;
  --shift-leave-bg: #fbe4e1; --shift-leave-ink: #8c1d15; --shift-leave-line: #d0392f;
  --shift-sick-bg: #fbe9ec; --shift-sick-ink: #7a2331; --shift-sick-line: #c95c6a;
  --shift-holiday-bg: #f7efdc; --shift-holiday-ink: #5b4306; --shift-holiday-line: #b58a1c;
  --publish-fixed: #197255; --publish-fixed-soft: #e4f4ed; --publish-preview: #c58614; --publish-preview-ink: #7a4d00; --publish-preview-soft: #fff3dc;
}
/* R-home-R3-01: priority, warning, offer main, danger, success and the Stratford fill lost their brown cast (home prototype FIXED;
   --danger-soft is one step lighter so red text on it keeps 4.5:1; the Stratford fill is one step darker than the prototype so it keeps 3:1 on
   the progress track). R-home-R3-02: task type colours for Home task cards; fixed in every
   theme like store and shift colours (R77). -late-soft/-edge/-line are the overdue card; -late-tag/-late-ink the "N days overdue" label; -bar/-late-bar fill the
   progress bar inside a card (3:1 on the card background; the notice edge is too light for that, so notice bars are a darker amber). */
:root {
  --task-training-soft: #f2f7ff; --task-training-edge: #3b7bf2; --task-training-line: #dce8fd; --task-training-tag: #dde9ff; --task-training-ink: #1a4fb5;
  --task-training-late-soft: #e8f0ff; --task-training-late-edge: #1746ad; --task-training-late-line: #c7d8fa; --task-training-late-tag: #fdeceb; --task-training-late-ink: #bf2519;
  --task-notice-soft: #fffaea; --task-notice-edge: #eeb000; --task-notice-line: #f5e6b3; --task-notice-tag: #fcebb0; --task-notice-ink: #6b4c00;
  --task-notice-late-soft: #fff3e2; --task-notice-late-edge: #ff8a00; --task-notice-late-line: #ffd8a6; --task-notice-late-tag: #ffe7cb; --task-notice-late-ink: #9e4400;
  --task-training-bar: var(--task-training-edge); --task-training-late-bar: var(--task-training-late-edge);
  --task-notice-bar: #b88000; --task-notice-late-bar: #d96a00;
  --task-offer-tag: #ffe4d2; --task-offer-ink: #a83a00;
  --task-update-tag: #ece6ff; --task-update-ink: #5332c4;
}
/* R-recognition-13: crest colours the Home points card draws (gold and bronze metal, 5 steps light -> deep; onyx and plum enamel,
   light / dark). The rest of the crest palette is only on recognition pages, in award-crest.css. Fixed in every theme. */
:root {
  --award-metal-gold-0: #fff4cf; --award-metal-gold-1: #f3d27a; --award-metal-gold-2: #c9952e; --award-metal-gold-3: #eac462; --award-metal-gold-4: #8f610e;
  --award-metal-bronze-0: #ffe4c9; --award-metal-bronze-1: #e5a674; --award-metal-bronze-2: #aa6430; --award-metal-bronze-3: #d7955e; --award-metal-bronze-4: #6f3616;
  --award-enamel-onyx-0: #50555e; --award-enamel-onyx-1: #131518; --award-enamel-plum-0: #c65d8e; --award-enamel-plum-1: #6b1d45;
}
/* R-psi-02: PSI chart colours, fixed in every theme. Days-of-supply status (out of stock, very low, under target, on target, over,
   no sales) and stock location (warehouse, CPS, in transit; stores use the store colours). The light ones (under, low, no sales,
   in transit) are under 3:1 on white, so PSI charts label these marks or show the table next to them. */
:root {
  --dos-out: #a8322a; --dos-low: #e2764a; --dos-under: #efbd4e; --dos-ok: #4f9a74; --dos-over: #3f5f99; --dos-zero: #a9aeb6;
  --loc-dc: #5d636c; --loc-cps: var(--chart-5); --loc-transit: #b7bcc4;
}
/* R-insights-08: the Data page's measure colours (METRIC_PALETTE in integrations/web/data/data-ui.js, D-data-V03 = A), for the
   Insights heat board and any chart that must match the Data page. Fixed in every theme; marks only, never text. They are too
   close to tell apart by colour alone (pad / AIoT, entry rate / conversion), so every row or series also carries its name. */
:root {
  --metric-passerby: #5F56B3; --metric-footfall: #7B74C7; --metric-orders: #3D8C6F; --metric-entry-rate: #C9923E; --metric-conversion: #CE7057;
  --metric-phone: #245FAE; --metric-pad: #9B6FD3; --metric-aiot: #12937F; --metric-sales: var(--brand-orange);
}
/* --orange is kept as an alias of the theme accent for existing rules; new rules use --accent or --brand-orange. */

:root[data-theme]{--ui-muted:var(--muted);--ui-line:var(--line);background:var(--canvas);color:var(--ink)}
html[data-theme] body{background:var(--canvas);color:var(--ink)}
html[data-theme] :is(.content,.employee-tool-content){background:var(--canvas)}
html[data-theme] :is(.workspace-header.site-header,.workspace-sidebar,.employee-bottom-nav,dialog,.panel,.login-card){background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme] :is(.workspace-sidebar a,.employee-bottom-nav a){color:var(--muted)}
html[data-theme] .workspace-sidebar a.active,html[data-theme] .employee-bottom-nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent)}
html[data-theme] .workspace-header .avatar{background:var(--avatar-bg);color:var(--avatar-ink);border:1px solid var(--avatar-border)}
html[data-theme] .workspace-header :is(button,.icon-button):hover{background:var(--surface-soft)}
html[data-theme] .segmented{background:var(--surface-soft)}
html[data-theme] .segmented button.selected{background:var(--paper);color:var(--accent)}
html[data-theme] .button.primary{background:var(--graphite);color:white}
html[data-theme] .button.secondary{background:var(--surface-soft);color:var(--ink);border-color:var(--line)}
html[data-theme] .field :is(input,select,textarea){background:var(--paper);color:var(--ink);border-color:var(--field-border)}
html[data-theme] :is(.text-button,.achievement-manage){color:var(--accent)}
html[data-theme] #toast{background:var(--graphite);color:#fff}
html[data-theme] dialog::backdrop{background:var(--backdrop)}
html[data-theme] :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html[data-theme] .appearance-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:var(--rp-control-size);min-width:40px;padding:0;border:0;border-radius:50%;color:var(--muted);flex:none;background:transparent}
.appearance-symbol{display:flex;align-items:center;width:22px;height:22px;gap:2px}.appearance-symbol i{display:block;width:6px;height:15px;border-radius:4px;background:var(--accent-bright)}.appearance-symbol i:nth-child(2){background:var(--graphite);height:21px}.appearance-symbol i:nth-child(3){background:var(--theme-indicator)}
.appearance-trigger[data-temporary=true]:after{content:'!';position:absolute;top:1px;right:0;width:12px;height:12px;border-radius:50%;background:#f7edda;color:#795b27;font-size:10px;line-height:12px;text-align:center}
.appearance-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
@media(max-width:720px){html[data-theme] .workspace-header.site-header{gap:10px;padding-inline:12px!important}.workspace-header .header-tools{gap:0}html[data-theme] .appearance-trigger{width:36px;min-width:36px}.workspace-header .preview-trigger{padding:0}.workspace-header .preview-trigger span{display:none}.appearance-symbol{transform:scale(.9)}}
@media(max-width:360px){html[data-theme] .workspace-header.site-header{gap:8px;padding-inline:10px!important}.workspace-header .brand{width:27px}.workspace-header .brand img{width:25px;height:25px}.workspace-header .wordmark{font-size:14px;letter-spacing:1.4px}.workspace-header .header-tools :is(.icon-button,.account-trigger,.preview-trigger,.appearance-trigger){width:var(--rp-control-size);min-width:var(--rp-control-size);min-height:var(--rp-control-size)}.workspace-header .avatar{width:28px;height:28px}}

/* Apply the shared scale to workspace headings and feedback, not native tool grids. */
html[data-theme] :is(.page-heading,.welcome,.reader) h1 {
  font-size:var(--rp-title-size);line-height:1.25;letter-spacing:calc(var(--rp-tracking-tight) * 1.25);
  overflow-wrap:anywhere;
}
html[data-theme] .page-heading {gap:var(--rp-space-4);margin-bottom:var(--rp-space-6)}
html[data-theme] :is(.button,.field input,.field select,.field textarea) {border-radius:var(--rp-control-radius)}
html[data-theme] dialog {border-radius:var(--rp-dialog-radius)}
html[data-theme] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:var(--rp-focus-width) solid var(--accent);outline-offset:3px;
}
html[data-theme] :is(button:disabled,[aria-disabled="true"]) {cursor:not-allowed}
html[data-theme] button[aria-busy="true"] {cursor:wait}
html[data-theme] :is(.workspace-header button,#page .button) {
  transition:background-color var(--rp-press-duration) var(--rp-ease),color var(--rp-press-duration) var(--rp-ease),border-color var(--rp-press-duration) var(--rp-ease);
}
.workspace-connection-notice,#home-refresh-notice,#language-pending-notice,.workspace-readonly-note {
  display:flex;align-items:center;gap:var(--rp-space-3);flex-wrap:wrap;
  padding:var(--rp-space-3) var(--rp-space-4);border:1px solid var(--line);
  border-radius:var(--rp-control-radius);background:var(--surface-soft);color:var(--ink);
  font-size:var(--rp-body-size);line-height:1.5;overflow-wrap:anywhere;
}
.workspace-connection-notice {
  position:relative;max-width:var(--rp-content-max);margin:var(--rp-space-3) auto;
  width:calc(100% - 32px);box-sizing:border-box;
}
.workspace-connection-notice p {flex:1 1 240px;margin:0;min-width:0}
.workspace-connection-notice .button,#home-refresh-notice .button,#language-pending-notice .button {
  min-height:var(--rp-control-size);white-space:normal;max-width:100%;
}
#home-refresh-notice,#language-pending-notice {margin-bottom:var(--rp-space-4)}
#home-refresh-notice .button,#language-pending-notice .button {text-align:start}
/* A tool page has no #main: the notice sits above the page like the connection notice (UX-A1-06). */
body > #language-pending-notice {max-width:var(--rp-content-max);margin:var(--rp-space-3) auto;width:calc(100% - 32px);box-sizing:border-box}
.route-error {
  box-sizing:border-box;max-width:var(--rp-content-max);margin:var(--rp-space-6) auto;
  padding:var(--rp-space-6);min-height:220px;border:1px solid var(--line);
  border-radius:var(--rp-group-radius);background:var(--paper);color:var(--ink);
  overflow-wrap:anywhere;
}
.route-error p {line-height:1.6;max-width:65ch}
.route-error .button {margin:var(--rp-space-1);min-height:var(--rp-control-size)}
body>.route-error {width:calc(100% - 32px)}
.workspace-readonly-note {margin:var(--rp-space-4) 0}
.workspace-readonly-note .icon {flex:none}
.workspace-readonly-group {border:0;margin:0;padding:0;min-width:0}
html[data-theme] [data-readonly="true"] :is(input[readonly],textarea[readonly]),
html[data-theme] .workspace-readonly-group:disabled :is(input,textarea,select) {
  background:var(--surface-soft);color:var(--ink);border-color:var(--line);opacity:1;
  cursor:default;
}
html[data-theme] [data-readonly="true"] button:disabled,
html[data-theme] .workspace-readonly-group:disabled button {opacity:.65;cursor:not-allowed}
html[data-theme] .private-preview-banner {gap:var(--rp-space-3);line-height:1.4;overflow-wrap:anywhere}
html[data-theme] .private-preview-banner>span {min-width:0}
html[data-theme] .private-preview-banner .button {min-height:var(--rp-control-size);flex-shrink:0}
@media(max-width:719px) {
  html[data-theme] .page-heading {gap:var(--rp-space-3);margin-bottom:var(--rp-space-4)}
  .route-error {padding:var(--rp-space-4)}
}
/* Preserve the brand and all utility access within the existing single-row header. */
/* UX-A1-11: every header tool keeps a 44 x 44 px hit area on phones; when five tools share the row (super
   administrators) the wordmark gives way instead (the brand link keeps its accessible name). */
@media(max-width:400px) {
  html[data-theme] .workspace-header.site-header {gap:6px!important;padding-inline:8px!important}
  .workspace-header .workspace-all span {display:none}
  .workspace-header .header-tools {gap:0}
  .workspace-header .header-tools :is(.workspace-all,.icon-button,.account-trigger,.preview-trigger,.appearance-trigger) {
    padding:0;width:var(--rp-control-size);min-width:var(--rp-control-size);min-height:var(--rp-control-size);
  }
  .workspace-header .wordmark {display:block!important;flex:none!important;font-size:12px!important;line-height:1.05}
  .workspace-header:has(.header-tools > :nth-child(5)) .wordmark {display:none!important}
}
@media(max-width:350px) {
  .workspace-header .wordmark {font-size:11px!important}
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after {
    scroll-behavior:auto!important;animation:none!important;transition:none!important;
  }
}

/* v1.1 batch 2b (INTERACTION-SPEC 14): headings balance their lines, body text avoids a lone last word,
   and Chinese body text gets CJK / Latin spacing where the browser supports text-autospace. */
html[data-theme] :is(h1,h2,h3) {text-wrap:balance}
html[data-theme] :is(p,li) {text-wrap:pretty}
html[data-theme]:lang(zh) :is(p,li,.rp-prose) {text-autospace:normal}

/* v1.1 batch 2d (INTERACTION-SPEC 15): text selection, scrollbars, native checkboxes / radios / ranges and autofill follow the theme. */
html[data-theme] ::selection {background:var(--accent-soft);color:var(--ink)}
html[data-theme] {scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--muted) 45%, transparent) transparent}
html[data-theme] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) {accent-color:var(--accent)}
html[data-theme] :is(input,textarea,select):autofill {-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--paper) inset}
/* Round 3 (R-rota-06): half and unknown shifts, same scheme as the other shifts (-bg / -ink / -line). Rota's values;
   the half-shift line is darkened from #82b668 to #6da053 (hue kept) so the marker reaches 3:1 like the working shifts. */
:root {
  --shift-half-bg: #bddcac; --shift-half-ink: #213d18; --shift-half-line: #6da053;
  --shift-unknown-bg: #f5f5f7; --shift-unknown-ink: #404752; --shift-unknown-line: #8b929e;
}