/* rferee design tokens — single source of truth for the HTML prototypes.
   Colours use Material 3 logic (HCT + tonal palettes via @material/material-color-utilities) from ONE seed colour:
   seed -> primary/secondary/tertiary/neutral palettes -> M3 roles -> the token names below. Default seed = soft blue.
   Values are space-separated RGB channels so Tailwind can apply alpha (bg-brand/10).
   The M3:BEGIN/M3:END block is the default theme (light + dark). m3-theme.js regenerates it at runtime for a user-picked
   seed / contrast level (see RA.setSeed). Re-generate this block with: node build-tokens.mjs
   Mirror every value in lib/theme/app_theme.dart + a RefAssignTokens ThemeExtension. */

:root {
  color-scheme: light;
  --shadow-sm: 0 1px 2px rgb(var(--scrim) / .08);
  --shadow-md: 0 4px 12px rgb(var(--scrim) / .10);
  --shadow-lg: 0 12px 32px rgb(var(--scrim) / .18);
  --row-py: 8px;               /* comfortable: ~48 px rows */
  --cell-h: 32px;              /* slot-cell height */
}
[data-density="compact"] { --row-py: 3px; --cell-h: 26px; }   /* compact: ~36 px rows */

:root.dark {
  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgb(var(--scrim) / .5);
  --shadow-md: 0 4px 12px rgb(var(--scrim) / .5);
  --shadow-lg: 0 12px 32px rgb(var(--scrim) / .7);
}

/* M3:BEGIN default theme = the original "Mist" palette (saturated status colours, slate page, striped rows). A picked seed in Appearance overrides it at runtime. */
:root {
  --bg: 246 248 251;
  --surface: 255 255 255;
  --surface-2: 238 242 248;
  --border: 230 235 242;
  --border-strong: 207 215 227;
  --text: 27 36 51;
  --text-muted: 88 100 122;
  --text-faint: 102 115 138;
  --brand: 62 92 134;
  --brand-fg: 255 255 255;
  --brand-soft: 232 238 247;
  --brand-hover: 46 69 100;
  --focus: 62 92 134;
  --th-bg: 234 240 247;
  --th-fg: 27 36 51;
  --th-fg-dim: 88 100 122;
  --bar-bg: 255 255 255;
  --bar-fg: 27 36 51;
  --row-alt: 250 251 253;
  --row-hover: 241 245 250;
  --row-sel: 237 243 251;
  --st-confirmed-fg: 4 120 87;
  --st-confirmed-bg: 236 253 245;
  --st-confirmed-bd: 110 231 183;
  --st-offered-fg: 180 83 9;
  --st-offered-bg: 255 251 235;
  --st-offered-bd: 252 211 77;
  --st-declined-fg: 185 28 28;
  --st-declined-bg: 254 242 242;
  --st-declined-bd: 252 165 165;
  --st-empty-fg: 71 85 105;
  --st-empty-bg: 248 250 252;
  --st-empty-bd: 100 116 139;
  --st-alert-fg: 190 18 60;
  --st-alert-bg: 255 241 242;
  --st-alert-bd: 253 164 175;
  --st-open-fg: 29 78 216;
  --st-open-bg: 239 246 255;
  --st-open-bd: 147 197 253;
  --pos-cr-fg: 67 56 202;
  --pos-cr-bg: 224 231 255;
  --pos-ar1-fg: 14 116 144;
  --pos-ar1-bg: 207 250 254;
  --pos-ar2-fg: 109 40 217;
  --pos-ar2-bg: 237 233 254;
  --pos-4th-fg: 51 65 85;
  --pos-4th-bg: 226 232 240;
  --card-yellow: 245 199 10;
  --card-red: 220 38 38;
  --scrim: 20 24 30;
  --on-scrim: 248 249 255;
}
:root.dark {
  --bg: 18 22 28;
  --surface: 27 33 42;
  --surface-2: 35 43 54;
  --border: 42 50 62;
  --border-strong: 58 68 84;
  --text: 238 242 247;
  --text-muted: 152 164 184;
  --text-faint: 152 164 184;
  --brand: 157 185 227;
  --brand-fg: 20 22 27;
  --brand-soft: 38 50 74;
  --brand-hover: 191 210 237;
  --focus: 157 185 227;
  --th-bg: 37 46 59;
  --th-fg: 238 242 247;
  --th-fg-dim: 152 164 184;
  --bar-bg: 27 33 42;
  --bar-fg: 238 242 247;
  --row-alt: 23 28 36;
  --row-hover: 33 42 54;
  --row-sel: 36 52 82;
  --st-confirmed-fg: 110 231 183;
  --st-confirmed-bg: 8 52 41;
  --st-confirmed-bd: 4 120 87;
  --st-offered-fg: 252 211 77;
  --st-offered-bg: 58 42 8;
  --st-offered-bd: 180 83 9;
  --st-declined-fg: 252 165 165;
  --st-declined-bg: 63 20 22;
  --st-declined-bd: 185 28 28;
  --st-empty-fg: 148 163 184;
  --st-empty-bg: 30 41 59;
  --st-empty-bd: 100 116 139;
  --st-alert-fg: 253 164 175;
  --st-alert-bg: 63 15 26;
  --st-alert-bd: 159 18 57;
  --st-open-fg: 147 197 253;
  --st-open-bg: 23 37 84;
  --st-open-bd: 37 99 235;
  --pos-cr-fg: 165 180 252;
  --pos-cr-bg: 37 40 94;
  --pos-ar1-fg: 103 232 249;
  --pos-ar1-bg: 14 58 68;
  --pos-ar2-fg: 196 181 253;
  --pos-ar2-bg: 46 31 92;
  --pos-4th-fg: 203 213 225;
  --pos-4th-bg: 51 65 85;
  --card-yellow: 238 194 0;
  --card-red: 255 97 85;
  --scrim: 0 0 0;
  --on-scrim: 248 249 255;
}
/* M3:END */

/* ---------- Base ---------- */
html { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { background: rgb(var(--bg)); color: rgb(var(--text)); -webkit-font-smoothing: antialiased; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid rgb(var(--focus)); outline-offset: 2px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Slot cell/tile status treatments: colour + border style + icon (never colour alone) */
.slot-h { height: var(--cell-h); }
.ra-pad { padding-top: var(--row-py); padding-bottom: var(--row-py); }
.slot { border-width: 1.5px; border-style: solid; transition: box-shadow .15s, transform .05s; }
.slot:hover { box-shadow: var(--shadow-md); }
.slot:active { transform: scale(.98); }
.slot[data-status="empty"]    { background: rgb(var(--st-empty-bg));     border-color: rgb(var(--st-empty-bd));     border-style: dashed; color: rgb(var(--st-empty-fg)); }
.slot[data-status="offered"]  { background: rgb(var(--st-offered-bg));   border-color: rgb(var(--st-offered-bd));   color: rgb(var(--st-offered-fg)); }
.slot[data-status="accepted"] { background: rgb(var(--st-confirmed-bg)); border-color: rgb(var(--st-confirmed-bd)); color: rgb(var(--st-confirmed-fg)); }
.slot[data-status="declined"] { background: rgb(var(--st-declined-bg));  border-color: rgb(var(--st-declined-bd));  color: rgb(var(--st-declined-fg)); border-style: double; border-width: 3px; }
.slot[data-status="na"]       { background: transparent; border-color: transparent; color: rgb(var(--text-faint)); box-shadow: none; cursor: default; }

/* Data table */
.ra-grid { display: grid; align-items: center; column-gap: 8px; }
.ra-th { background: rgb(var(--th-bg)); color: rgb(var(--th-fg)); border-bottom: 1px solid rgb(var(--border)); }
.ra-row { background: rgb(var(--surface)); border-top: 1px solid rgb(var(--border)); }
.ra-row.alt { background: rgb(var(--row-alt)); }
.ra-row:hover { background: rgb(var(--row-hover)); }
.ra-row.open { background: rgb(var(--row-sel)); }
.ra-row.alert { box-shadow: inset 4px 0 0 rgb(var(--st-alert-bd)); }      /* schedule already moved: review the change */
.ra-row.attn { box-shadow: inset 3px 0 0 rgb(var(--st-offered-bd)); }   /* needs the user's response */

/* Motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.sheet-enter { animation: sheetIn .22s ease-out; }
@keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-enter { animation: drawerIn .22s ease-out; }
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.fade-enter { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pop-enter { animation: popIn .12s ease-out; }
@keyframes popIn { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }


/* Colour swatch strips in the Appearance sheet */
.pal-strip { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid rgb(var(--border)); }
.pal-strip i { flex: 1; }

/* Hyperlinks inside tables/drawers: underline on hover, brand colour, 44px-friendly on touch via padding */
.ra-link { color: rgb(var(--text)); text-decoration: underline; text-decoration-color: rgb(var(--border-strong)); text-underline-offset: 3px; text-align: left; }
.ra-link:hover { text-decoration-color: rgb(var(--brand)); color: rgb(var(--brand)); }
.ra-link-strong { font-weight: 600; }
/* Drawer (non-modal on desktop: table stays interactive) */
.drawer { position: fixed; z-index: 45; top: 0; bottom: 0; right: 0; width: 460px; max-width: 100vw; background: rgb(var(--surface)); border-left: 1px solid rgb(var(--border)); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
@media (max-width: 1023px) { .drawer { top: 8vh; width: 100%; border-left: 0; border-radius: 16px 16px 0 0; } }

/* Filter/search bars hide when the user scrolls down and return on scroll up (phones & tablets) */
[data-autohide] { transition: transform .22s ease; will-change: transform; }
[data-autohide].ah-hidden { transform: translateY(-125%); pointer-events: none; }

/* ---------- App navigation: left sidebar (>=1024) · bottom bar + More sheet (<1024) ---------- */
:root { --sbw: 0px; --sb-top: 0px; }
@media (min-width: 1024px) { :root { --sbw: 248px; } :root[data-sb="rail"] { --sbw: 68px; } }
.shell { transition: padding-left .2s ease; }
@media (min-width: 1024px) { .shell { padding-left: var(--sbw); } }
.sidebar { display: none; position: fixed; left: 0; bottom: 0; top: var(--sb-top); width: var(--sbw); z-index: 35; flex-direction: column;
  background: rgb(var(--surface)); border-right: 1px solid rgb(var(--border)); transition: width .2s ease; overflow: hidden; }
@media (min-width: 1024px) { .sidebar { display: flex; } }
.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 12px; }
.sb-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; position: relative; white-space: nowrap;
  color: rgb(var(--text-muted)); font-size: 14px; font-weight: 500; text-align: left; }
.sb-item:hover { background: rgb(var(--surface-2)); color: rgb(var(--text)); }
.sb-item[aria-current="page"] { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); font-weight: 600; }
.sb-item[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--brand)); }
.sb-group { padding: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--text-faint)); }
.sb-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: rgb(var(--text)); color: rgb(var(--bg)); font-variant-numeric: tabular-nums; }
.sb-brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; flex-shrink: 0; border-bottom: 1px solid rgb(var(--border)); }
.sb-foot { border-top: 1px solid rgb(var(--border)); padding: 8px 12px; flex-shrink: 0; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; }
.sb-ic-open { display: none; }
[data-sb="rail"] .sb-ic-open { display: block; } [data-sb="rail"] .sb-ic-close { display: none; }
[data-sb="rail"] .sb-label, [data-sb="rail"] .sb-user-text, [data-sb="rail"] .sb-brand-text { display: none; }
[data-sb="rail"] .sb-brand { padding: 0; justify-content: center; }
[data-sb="rail"] .sb-item { justify-content: center; padding: 0; }
[data-sb="rail"] .sb-item[aria-current="page"]::before { left: -12px; }
[data-sb="rail"] .sb-group { height: 1px; margin: 10px 8px; padding: 0; font-size: 0; background: rgb(var(--border)); }
[data-sb="rail"] .sb-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
[data-sb="rail"] .sb-user { justify-content: center; padding: 8px 0 4px; }

/* ---------- Cronofix integration: reschedule-pending rows, crew-polled dots, changed-value marks ---------- */
.ra-row.rqp { box-shadow: inset 4px 0 0 rgb(var(--st-offered-fg)); }     /* reschedule request waiting on you */

.slot { position: relative; }
.poll-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 999px; border: 2px solid rgb(var(--surface)); }
.poll-dot[data-s="pending"] { background: rgb(var(--st-offered-fg)); animation: pollPulse 1.4s ease-in-out infinite; }
.poll-dot[data-s="yes"] { background: rgb(var(--st-confirmed-fg)); }
.poll-dot[data-s="no"] { background: rgb(var(--st-declined-fg)); }
@keyframes pollPulse { 50% { transform: scale(1.4); opacity: .55; } }
mark.rr-chg { background: rgb(var(--st-offered-bg)); color: rgb(var(--st-offered-fg)); border-radius: 4px; padding: 0 4px; font-weight: 700; }


/* Sidebar user block doubles as the account-menu button */
.sb-user.sb-user-btn { width: 100%; padding: 8px 12px; border-radius: 8px; text-align: left; }
.sb-user.sb-user-btn:hover, .sb-user.sb-user-btn[aria-expanded="true"] { background: rgb(var(--surface-2)); }
[data-sb="rail"] .sb-user.sb-user-btn { padding: 8px 0; }
[data-sb="rail"] .sb-user-chev { display: none; }