/* ============================================================================
   Shift Calendar brand refresh -- REQ-2026-08-05-830
   Design authority: bosun/local/tmp/shiftcalendar-brand-2026-08-05/HANDOFF.md

   ⚠ EVERY RULE IN THIS FILE IS SCOPED `html[data-theme="shiftcalendar"]`.
   Five brand fronts (netduty, staffworks, shiftcalendar, dailyroster,
   officerscheduler) share `custom-styles.css`. An unscoped rule here repaints all
   five. The attribute is stamped synchronously by theme-loader.js before the theme
   file is even requested, so there is no unscoped first paint.

   Verify with:  node scripts/check-brand-scope.js
   (fails the build if any selector in this file escapes the scope)

   Load order: tailwind.min.css -> custom-styles.css -> THIS FILE.
   `custom-styles.css` paints every brand Slate Blue / Crimson / Gold with
   `!important`, so the overrides below carry `!important` too and win on
   specificity (the `html[data-theme=...]` prefix adds an attribute + element).
   ============================================================================ */

/* ---------------------------------------------------------------- 0. Tokens */
/* Scoped, NOT :root -- a :root block here would restyle the other four brands. */
html[data-theme="shiftcalendar"] {
    /* Brand */
    --sc-green-900: #0A3A37;
    --sc-green-800: #0E4A46;   /* PRIMARY -- nav, page headers, primary buttons */
    --sc-green-700: #17635C;
    --sc-green-500: #4A8C80;   /* secondary accents on LIGHT backgrounds */
    --sc-mint-400:  #7FE3C8;   /* mid bar of the mark ON GREEN -- needs the brightness (r2) */
    --sc-green-300: #9CC7BD;
    --sc-green-200: #B7D6CE;
    --sc-green-100: #EAF3F0;

    --sc-coral-700: #B23F1B;   /* coral text on light backgrounds (AA at 14px) */
    --sc-coral-500: #FF6B35;   /* SIGNAL -- today, open shifts, one CTA per screen (r2) */
    --sc-coral-200: #F3C9B8;
    --sc-coral-100: #FDF1EC;

    /* Neutrals */
    --sc-ink:           #0D1B1E;
    --sc-ink-muted:     #41564F;
    --sc-ink-subtle:    #5C7A73;   /* lightest permitted on white */
    --sc-ink-faint:     #8A9995;   /* placeholder only, never data */
    --sc-canvas:        #F4F7F5;
    --sc-canvas-alt:    #FAFCFB;
    --sc-surface:       #FFFFFF;
    --sc-border:        #E3EAE7;
    --sc-border-strong: #D9E0DD;
    --sc-control-bg:    #F0F4F2;

    /* Shift states -- the ONLY semantic use of colour */
    --sc-state-covered:      #2E7D5B;
    --sc-state-covered-bg:   #EAF3EE;
    --sc-state-covered-br:   #C3DDD1;
    --sc-state-open:         #FF6B35;
    --sc-state-open-bg:      #FDF1EC;
    --sc-state-open-br:      #F3C9B8;
    --sc-state-overtime:     #B45309;
    --sc-state-overtime-bg:  #FBF3E3;
    --sc-state-overtime-br:  #EBD5A5;
    --sc-state-timeoff:      #4B5A8A;
    --sc-state-timeoff-bg:   #EEF0F6;
    --sc-state-timeoff-br:   #CDD3E4;
    --sc-state-unassigned:   #8A9995;
    --sc-state-unassigned-bg:#F2F4F3;
    --sc-state-unassigned-br:#D9E0DD;

    /* Type -- --font-primary/--font-mono are written by theme-loader.js from
       themes/shiftcalendar.js; the literals here are the fallback if it hasn't run. */
    --sc-font-ui:   var(--font-primary, 'Instrument Sans', system-ui, -apple-system, sans-serif);
    --sc-font-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace);

    --sc-text-page-title: 600 28px/1.15 var(--sc-font-ui);
    --sc-text-section:    600 22px/1.2  var(--sc-font-ui);
    --sc-text-card-title: 600 17px/1.3  var(--sc-font-ui);
    --sc-text-row:        500 15px/1.4  var(--sc-font-ui);
    --sc-text-body:       400 15px/1.55 var(--sc-font-ui);
    --sc-text-small:      400 13.5px/1.5 var(--sc-font-ui);
    --sc-text-data:       400 13px/1.4  var(--sc-font-mono);
    --sc-text-eyebrow:    400 11px/1.3  var(--sc-font-mono);

    /* Shape & depth */
    --sc-radius-sm: 5px;
    --sc-radius-md: 7px;
    --sc-radius-lg: 10px;
    --sc-shadow-raise: 0 1px 2px rgba(13, 27, 30, .08);
    --sc-shadow-card:  0 1px 3px rgba(13, 27, 30, .06);
    --sc-shadow-pop:   0 8px 24px rgba(13, 27, 30, .12);
}

/* ------------------------------------------------- 1. Page canvas + surfaces */
/* White cards on a white page have nothing to sit on -- this is most of the flatness. */
html[data-theme="shiftcalendar"] body {
    background-color: var(--sc-canvas) !important;
    font: var(--sc-text-body);
    color: var(--sc-ink);
}

/* The app's page wrappers. custom-styles.css forces .bg-gray-100 to #EEF1F3 for
   every brand; inside this brand it becomes the canvas instead. */
html[data-theme="shiftcalendar"] .bg-gray-100,
html[data-theme="shiftcalendar"] .bg-gray-50 {
    background-color: var(--sc-canvas) !important;
}

/* Cards and panels stay white, and now have an edge to sit on. */
html[data-theme="shiftcalendar"] .bg-white.rounded-lg,
html[data-theme="shiftcalendar"] .bg-white.rounded {
    background-color: var(--sc-surface) !important;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-card);
}

/* Tailwind's shadow utilities are heavier than the token; normalise them so cards
   read as one family rather than three depths. */
html[data-theme="shiftcalendar"] .bg-white.rounded-lg.shadow,
html[data-theme="shiftcalendar"] .bg-white.rounded-lg.shadow-sm,
html[data-theme="shiftcalendar"] .bg-white.rounded-lg.shadow-md {
    box-shadow: var(--sc-shadow-card) !important;
}

/* Nested / expanded rows sit a half-step off the card. */
html[data-theme="shiftcalendar"] .bg-gray-50.rounded,
html[data-theme="shiftcalendar"] .bg-gray-50.rounded-lg {
    background-color: var(--sc-canvas-alt) !important;
}

/* ------------------------------------------- 2. One primary colour in chrome */
/* The <nav> background itself is an inline style fed by themes/shiftcalendar.js
   (`colors.nav`), so it is already brand-local. These rules handle the utility
   classes on nav's children, which custom-styles.css paints slate/crimson. */
html[data-theme="shiftcalendar"] nav.bg-red-600 {
    background-color: var(--sc-green-800) !important;
}

/* Active nav item */
html[data-theme="shiftcalendar"] nav .bg-red-700,
html[data-theme="shiftcalendar"] nav .bg-red-800 {
    background-color: var(--sc-green-700) !important;
    color: #FFFFFF !important;
}

html[data-theme="shiftcalendar"] nav .hover\:bg-red-500:hover,
html[data-theme="shiftcalendar"] nav .hover\:bg-red-700:hover {
    background-color: var(--sc-green-700) !important;
}

/* Nav labels: green-200. The org name stays white; the user/role line is green-300. */
html[data-theme="shiftcalendar"] nav a,
html[data-theme="shiftcalendar"] nav button:not(.bg-red-600):not([class*="bg-coral"]) {
    color: var(--sc-green-200);
}

html[data-theme="shiftcalendar"] nav .text-gray-300,
html[data-theme="shiftcalendar"] nav .text-gray-400,
html[data-theme="shiftcalendar"] nav .text-blue-100,
html[data-theme="shiftcalendar"] nav .text-blue-200 {
    color: var(--sc-green-300) !important;
}

/* Page headers that Tailwind marks blue/indigo and custom-styles.css paints slate.
   One chrome colour means these become Duty Green too.

   The base classes are listed explicitly. This used to be [class*="bg-blue"], which is a
   SUBSTRING match on the whole class attribute -- so it also matched Tailwind's escaped
   variant classes (hover:bg-blue-100, focus:bg-blue-50, group-hover:bg-blue-200...).
   An element whose only blue class was a light hover variant therefore got a permanent
   dark-green background it never asked for. Where that element also carried .text-blue-700
   (remapped to green-800 below) the result was dark green text on dark green fill --
   about 1:1. The Apply Template chips in the edit-user dialog are exactly that shape:
   `bg-white text-blue-700 border-blue-300 hover:bg-blue-100`. 130 elements in this UI carry
   a light hover:bg-blue-*, so this was not a one-off. Found by Allen, 2026-08-05.
   `.bg-blue-600` does not match class="hover:bg-blue-600" -- enumerating the base classes
   is what excludes the variants. */
html[data-theme="shiftcalendar"] .bg-blue-400,
html[data-theme="shiftcalendar"] .bg-blue-500,
html[data-theme="shiftcalendar"] .bg-blue-600,
html[data-theme="shiftcalendar"] .bg-blue-700,
html[data-theme="shiftcalendar"] .bg-blue-800,
html[data-theme="shiftcalendar"] .bg-indigo-600,
html[data-theme="shiftcalendar"] div.bg-indigo-700,
html[data-theme="shiftcalendar"] .bg-indigo-700 {
    background-color: var(--sc-green-800) !important;
}

/* Hover targets. The dark chrome classes deepen; the light tints stay light, so a chip
   that is white at rest does not jump to solid green under the cursor. */
html[data-theme="shiftcalendar"] .bg-blue-400:hover,
html[data-theme="shiftcalendar"] .bg-blue-500:hover,
html[data-theme="shiftcalendar"] .bg-blue-600:hover,
html[data-theme="shiftcalendar"] .bg-blue-700:hover,
html[data-theme="shiftcalendar"] .hover\:bg-blue-500:hover,
html[data-theme="shiftcalendar"] .hover\:bg-blue-700:hover,
html[data-theme="shiftcalendar"] .hover\:bg-indigo-600:hover,
html[data-theme="shiftcalendar"] .hover\:bg-indigo-700:hover {
    background-color: var(--sc-green-900) !important;
}

html[data-theme="shiftcalendar"] .hover\:bg-blue-50:hover,
html[data-theme="shiftcalendar"] .hover\:bg-blue-100:hover,
html[data-theme="shiftcalendar"] .hover\:bg-blue-200:hover,
html[data-theme="shiftcalendar"] .hover\:bg-blue-300:hover {
    background-color: var(--sc-green-100) !important;
}

/* Light blue fills are backgrounds, not chrome -- the rule above would turn info panels
   solid green. 200/300 are included: they are tints too, and treating them as chrome was
   the other half of the contrast problem above. */
html[data-theme="shiftcalendar"] .bg-blue-50,
html[data-theme="shiftcalendar"] .bg-blue-100,
html[data-theme="shiftcalendar"] .bg-blue-200,
html[data-theme="shiftcalendar"] .bg-blue-300 {
    background-color: var(--sc-green-100) !important;
}

html[data-theme="shiftcalendar"] .bg-blue-50 *:not(input):not(select):not(textarea):not(option):not(button),
html[data-theme="shiftcalendar"] .bg-blue-100 *:not(input):not(select):not(textarea):not(option):not(button),
html[data-theme="shiftcalendar"] .bg-blue-200 *:not(input):not(select):not(textarea):not(option):not(button),
html[data-theme="shiftcalendar"] .bg-blue-300 *:not(input):not(select):not(textarea):not(option):not(button) {
    color: var(--sc-ink) !important;
}

/* Buttons are excluded from the rule above so a green-filled button keeps its white
   label. That leaves the OUTLINE chips inside a tinted panel -- white fill, .text-blue-700
   label -- which are buttons, so they need saying explicitly: keep the white fill rather
   than inheriting the panel tint, and take the dark ink the panel's other text takes. */
html[data-theme="shiftcalendar"] .bg-blue-50 button.bg-white,
html[data-theme="shiftcalendar"] .bg-blue-100 button.bg-white,
html[data-theme="shiftcalendar"] .bg-blue-200 button.bg-white,
html[data-theme="shiftcalendar"] .bg-blue-300 button.bg-white {
    background-color: #FFFFFF !important;
    color: var(--sc-green-800) !important;
}

/* --------------------------------------------- 3. Coral is a signal, never decor */
/* Primary action buttons are Duty Green, NOT coral -- coral is reserved. This is the
   rule that keeps "one coral element per screen" true: ~21 .bg-red-600 buttons exist. */
html[data-theme="shiftcalendar"] .bg-red-600:not(nav):not(.rounded-full) {
    background-color: var(--sc-green-800) !important;
    color: #FFFFFF !important;
    border-radius: var(--sc-radius-md);
}

html[data-theme="shiftcalendar"] .bg-red-700:not(nav *),
html[data-theme="shiftcalendar"] .hover\:bg-red-700:hover:not(nav *),
html[data-theme="shiftcalendar"] .bg-red-500:not(nav):not(.rounded-full) {
    background-color: var(--sc-green-900) !important;
}

/* Gold feature buttons (custom-styles.css repaints button.bg-blue-600 #FFB300 with
   black text) are off-palette here. Duty Green, white text. */
html[data-theme="shiftcalendar"] button.bg-blue-600,
html[data-theme="shiftcalendar"] button.bg-cyan-500,
html[data-theme="shiftcalendar"] button.bg-cyan-600 {
    background-color: var(--sc-green-800) !important;
    color: #FFFFFF !important;
}

html[data-theme="shiftcalendar"] button.bg-blue-600:hover,
html[data-theme="shiftcalendar"] button.bg-cyan-500:hover,
html[data-theme="shiftcalendar"] button.bg-cyan-600:hover {
    background-color: var(--sc-green-900) !important;
}

/* SIGNAL: alert-count badges (pill-shaped red-600) stay loud. */
html[data-theme="shiftcalendar"] .bg-red-600.rounded-full {
    background-color: var(--sc-coral-500) !important;
    color: #FFFFFF !important;
}

/* SIGNAL: today, in the mini calendar. `.sc-today` is added at the render site. */
html[data-theme="shiftcalendar"] .sc-today {
    background-color: var(--sc-coral-100) !important;
    color: var(--sc-coral-700) !important;
    font-weight: 600;
    border-radius: var(--sc-radius-sm);
}

/* Alert TEXT on light backgrounds uses coral-700, not coral-500:
   #E4572E on white is ~3.4:1 and fails AA; #B23F1B is ~5.6:1 and passes. */
html[data-theme="shiftcalendar"] .text-red-600,
html[data-theme="shiftcalendar"] .text-red-500,
html[data-theme="shiftcalendar"] .text-red-700 {
    color: var(--sc-coral-700) !important;
}

html[data-theme="shiftcalendar"] .bg-red-50,
html[data-theme="shiftcalendar"] .bg-red-100 {
    background-color: var(--sc-coral-100) !important;
}

html[data-theme="shiftcalendar"] .border-red-300 {
    border-color: var(--sc-coral-200) !important;
}

/* custom-styles.css repaints .text-blue-600 to amber #B45309 for every brand
   (INC-716). Inside this brand that is an off-palette gold -- use ink. */
html[data-theme="shiftcalendar"] .text-blue-600:not(.bg-blue-50 *):not(.bg-blue-100 *):not(.bg-blue-200 *):not(.bg-blue-300 *),
html[data-theme="shiftcalendar"] .text-blue-700,
html[data-theme="shiftcalendar"] .text-blue-800 {
    color: var(--sc-green-800) !important;
}

/* The gold active tab (.tab-active-gold) is off-palette. Duty Green fill, white text
   -- 11.6:1, at least as readable as the gold/black it replaces. */
html[data-theme="shiftcalendar"] .tab-active-gold {
    background-color: var(--sc-green-800) !important;
    color: #FFFFFF !important;
    border-color: var(--sc-green-800) !important;
    border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0;
}

/* ------------------------------------------------------- 4. Tabular mono data */
/* Applied at render sites in a follow-up commit so a font regression is bisectable.
   Defined here so the class is inert until then -- and inert for other brands always. */
html[data-theme="shiftcalendar"] .sc-data {
    font: var(--sc-text-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--sc-ink);
}

html[data-theme="shiftcalendar"] .sc-eyebrow {
    font: var(--sc-text-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sc-ink-subtle);
}

/* ------------------------------------------------------- 5. Shift-state colours */
/* A 3px left border on rows, and a tinted chip with a 9px swatch where labelled. */
html[data-theme="shiftcalendar"] .sc-state-covered,
html[data-theme="shiftcalendar"] .sc-state-open,
html[data-theme="shiftcalendar"] .sc-state-overtime,
html[data-theme="shiftcalendar"] .sc-state-timeoff,
html[data-theme="shiftcalendar"] .sc-state-unassigned {
    border-left-width: 3px;
    border-left-style: solid;
    border-radius: var(--sc-radius-md);
}

html[data-theme="shiftcalendar"] .sc-state-covered    { border-left-color: var(--sc-state-covered);    background-color: var(--sc-state-covered-bg); }
html[data-theme="shiftcalendar"] .sc-state-overtime   { border-left-color: var(--sc-state-overtime);   background-color: var(--sc-state-overtime-bg); }
html[data-theme="shiftcalendar"] .sc-state-timeoff    { border-left-color: var(--sc-state-timeoff);    background-color: var(--sc-state-timeoff-bg); }
html[data-theme="shiftcalendar"] .sc-state-unassigned { border-left-color: var(--sc-state-unassigned); background-color: var(--sc-state-unassigned-bg); }

/* Open shifts read as INCOMPLETE: dashed on the other three sides. */
html[data-theme="shiftcalendar"] .sc-state-open {
    border-left-color: var(--sc-state-open);
    background-color: var(--sc-state-open-bg);
    border-top: 1px dashed var(--sc-state-open-br);
    border-right: 1px dashed var(--sc-state-open-br);
    border-bottom: 1px dashed var(--sc-state-open-br);
}

/* Labelled state chip: 9px square swatch + mono count. */
html[data-theme="shiftcalendar"] .sc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sc-space, 6px);
    padding: 2px 8px;
    border-radius: var(--sc-radius-sm);
    border: 1px solid var(--sc-border);
    font: var(--sc-text-data);
    font-variant-numeric: tabular-nums;
}

html[data-theme="shiftcalendar"] .sc-chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background-color: currentColor;
}

html[data-theme="shiftcalendar"] .sc-chip-covered    { color: var(--sc-state-covered);    background: var(--sc-state-covered-bg);    border-color: var(--sc-state-covered-br); }
html[data-theme="shiftcalendar"] .sc-chip-open       { color: var(--sc-state-open);       background: var(--sc-state-open-bg);       border-color: var(--sc-state-open-br); }
html[data-theme="shiftcalendar"] .sc-chip-overtime   { color: var(--sc-state-overtime);   background: var(--sc-state-overtime-bg);   border-color: var(--sc-state-overtime-br); }
html[data-theme="shiftcalendar"] .sc-chip-timeoff    { color: var(--sc-state-timeoff);    background: var(--sc-state-timeoff-bg);    border-color: var(--sc-state-timeoff-br); }
html[data-theme="shiftcalendar"] .sc-chip-unassigned { color: var(--sc-state-unassigned); background: var(--sc-state-unassigned-bg); border-color: var(--sc-state-unassigned-br); }

/* ---------------------------------------------------- 7. Segmented view switcher */
/* `.sc-viewswitch` is added to the existing Day/Week/Month wrapper. OT Period and Pay
   Period already sit outside it behind a 1px rule, so they stop reading as siblings. */
html[data-theme="shiftcalendar"] .sc-viewswitch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 3px;
    background-color: var(--sc-control-bg);
    border-radius: var(--sc-radius-md);
}

html[data-theme="shiftcalendar"] .sc-viewswitch > button {
    padding: 4px 12px;
    border-radius: var(--sc-radius-sm);
    font: var(--sc-text-row);
    color: var(--sc-ink-muted);
    background: transparent !important;
    transition: background-color .12s ease, color .12s ease;
}

html[data-theme="shiftcalendar"] .sc-viewswitch > button:hover {
    color: var(--sc-ink);
    background: rgba(13, 27, 30, .04) !important;
}

/* The active item is the raised white one. custom-styles.css cannot reach this
   because the app marks it with arbitrary-value Tailwind, so `.sc-viewswitch` owns it. */
html[data-theme="shiftcalendar"] .sc-viewswitch > button.sc-viewswitch-active {
    background-color: var(--sc-surface) !important;
    color: var(--sc-green-800) !important;
    font-weight: 600;
    box-shadow: var(--sc-shadow-raise);
}

/* -------------------------------------------------------------- 8. Logo + type */
/* r2: the header renders a COMPOSED lockup (mark + live wordmark), not one image.
   Loom's note: at 22px the three bars read as one blob, and the old #4A8C80 middle
   bar sank into the green nav. The mark gets a 32x27 floor, the reversed variants
   carry white + --sc-mint-400 themselves (never tint them here), and the lockup is
   separated from the first nav item so it reads as identity, not a fifth nav link. */
html[data-theme="shiftcalendar"] .sc-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-right: var(--sc-space-6, 24px);
    margin-right: var(--sc-space-4, 16px);
    border-right: 1px solid rgba(255, 255, 255, .14);
}

html[data-theme="shiftcalendar"] .sc-logo__mark {
    width: 32px;
    height: 27px;
    flex: none;
}

html[data-theme="shiftcalendar"] .sc-logo__word {
    font: 600 20px/1 var(--sc-font-ui);
    letter-spacing: -0.02em;
    color: #FFFFFF;
    white-space: nowrap;
}

html[data-theme="shiftcalendar"] .sc-logo__word b {
    font-weight: 400;
    color: var(--sc-green-200);
}

/* Fallback for any surface still rendering the single horizontal lockup (286x52,
   5.5:1) -- the shared header sizes logos at 70px, which would make it 385px wide. */
html[data-theme="shiftcalendar"] nav img[alt]:not(.sc-logo__mark) {
    height: 40px !important;
    max-height: 40px !important;
    min-width: 120px;   /* brand rule: minimum horizontal lockup width */
    width: auto;
}

/* Type scale. The floor for prose is 13.5px; the current 12px grey metadata fails
   4.5:1 on white, which is the specific thing being fixed. */
/* Size and weight only -- deliberately NO `color`. Headings sit on both the canvas
   and the dark green card headers; pinning them to --sc-ink turned every card title
   into dark-on-green (measured ~2:1). Colour comes from context: body supplies ink on
   light, and the chrome rules supply white on green. */
html[data-theme="shiftcalendar"] h1 { font: var(--sc-text-page-title); letter-spacing: -0.02em; }
html[data-theme="shiftcalendar"] h2 { font: var(--sc-text-section);    letter-spacing: -0.02em; }
html[data-theme="shiftcalendar"] h3 { font: var(--sc-text-card-title); }

html[data-theme="shiftcalendar"] .text-xs {
    font-size: 13.5px !important;
    line-height: 1.5;
}

html[data-theme="shiftcalendar"] .text-sm {
    font-size: 15px !important;
}

/* Nothing on white or canvas may be lighter than --sc-ink-subtle. custom-styles.css
   already darkens .text-xs.text-gray-500; this covers the rest of the grey family. */
/* ⚠ --sc-ink-subtle (#5C7A73) is specified as "the lightest permitted on white", and
   on pure white it is 4.6:1. On the brief's OWN canvas (#F4F7F5) it measures 4.34:1 --
   under the bar. Metadata therefore uses --sc-ink-muted (7.3:1 on canvas, 8.7:1 on
   white); ink-subtle is kept as a token and used for eyebrows on white only.
   Reported back to Loom rather than silently redefining a brief token. */
html[data-theme="shiftcalendar"] .text-gray-400,
html[data-theme="shiftcalendar"] .text-gray-500 {
    color: var(--sc-ink-muted) !important;
}

html[data-theme="shiftcalendar"] .text-gray-600,
html[data-theme="shiftcalendar"] .text-gray-700 {
    color: var(--sc-ink-muted) !important;
}

/* Placeholders are the one permitted use of --sc-ink-faint -- never data. */
html[data-theme="shiftcalendar"] ::placeholder {
    color: var(--sc-ink-faint) !important;
}

/* Inputs and secondary buttons take the stronger border and the button radius. */
html[data-theme="shiftcalendar"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="shiftcalendar"] select,
html[data-theme="shiftcalendar"] textarea {
    border-color: var(--sc-border-strong);
    border-radius: var(--sc-radius-md);
    font: var(--sc-text-body);
    color: var(--sc-ink);
}

html[data-theme="shiftcalendar"] input:focus,
html[data-theme="shiftcalendar"] select:focus,
html[data-theme="shiftcalendar"] textarea:focus {
    outline: 2px solid var(--sc-green-700);
    outline-offset: 1px;
    border-color: var(--sc-green-700);
}

/* Tables inherit the border token so rows stop competing with card edges. */
html[data-theme="shiftcalendar"] .shift-table th,
html[data-theme="shiftcalendar"] .shift-table td {
    border-color: var(--sc-border) !important;
}

html[data-theme="shiftcalendar"] .shift-table thead th {
    font: var(--sc-text-eyebrow);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sc-ink-subtle) !important;
}

/* ------------------------------------------- 2b. Dashboard box headers (measured) */
/* dashboard.js hardcodes a different Tailwind GRADIENT per box type -- orange, blue,
   indigo, purple, gray. That is five chrome colours on one screen, which is exactly
   what item 2 removes, and it made "Active Callouts" a permanent coral block whether
   or not anything is active (item 3: coral is a signal, never decoration).
   Gradients are `background-image`, so overriding background-color alone does nothing. */
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-orange-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-blue-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-indigo-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-purple-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-gray-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-green-600"],
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-red-600"] {
    background-image: linear-gradient(to right, var(--sc-green-800), var(--sc-green-700)) !important;
    color: #FFFFFF !important;
}

/* ------------------------------------------------ 3b. Contrast fixes (all measured) */
/* Every ratio below was measured in-page against the real rendered colours, not
   estimated. The brief's bar is 4.5:1 for text. */

/* The on-duty chips (.bg-green-50, rendered rgb(209,250,229)) carried --sc-ink-subtle
   at 4.13:1 -- FAIL. --sc-ink-subtle is defined as the lightest permitted on WHITE;
   on a tint it is not. On state tints the colour is carried by the border and swatch,
   so the text goes back to ink. */
html[data-theme="shiftcalendar"] .bg-green-50,
html[data-theme="shiftcalendar"] .bg-green-100 {
    background-color: var(--sc-state-covered-bg) !important;
    border: 1px solid var(--sc-state-covered-br);
}

html[data-theme="shiftcalendar"] .bg-green-50 .text-gray-500,
html[data-theme="shiftcalendar"] .bg-green-100 .text-gray-500,
html[data-theme="shiftcalendar"] .bg-green-50 .text-gray-400,
html[data-theme="shiftcalendar"] .bg-green-100 .text-gray-400 {
    color: var(--sc-ink-muted) !important;   /* 6.6:1 on the tint */
}

/* Tailwind green-600 text (rgb(22,163,74)) on that tint measured 2.91:1 -- FAIL. */
html[data-theme="shiftcalendar"] .bg-green-50 .text-green-600,
html[data-theme="shiftcalendar"] .bg-green-100 .text-green-600,
html[data-theme="shiftcalendar"] .bg-green-50 .text-green-700,
html[data-theme="shiftcalendar"] .bg-green-100 .text-green-700 {
    color: var(--sc-ink) !important;
}

/* On WHITE the covered green is fine (5.2:1) and keeps the semantic meaning. */
html[data-theme="shiftcalendar"] .text-green-600,
html[data-theme="shiftcalendar"] .text-green-700 {
    color: var(--sc-state-covered) !important;
}

/* Alert count badge: white on Tailwind red-500 measured 3.76:1 at 10px -- FAIL.
   Loom's r2 coral (#FF6B35) is a LIGHT colour: white on it is ~2.6:1, worse. Dark ink
   on coral is 6.4:1 and keeps the badge loud, which is what the signal is for. */
html[data-theme="shiftcalendar"] .bg-red-500.rounded-full,
html[data-theme="shiftcalendar"] .bg-red-600.rounded-full {
    background-color: var(--sc-coral-500) !important;
    color: var(--sc-ink) !important;
    font-size: 11px !important;
    font-weight: 700;
}

/* Nav secondary line (user/role) is green-300 on green-800 = 6.9:1. The org name
   stays white. Both measured on the real header. */
html[data-theme="shiftcalendar"] nav .text-gray-200,
html[data-theme="shiftcalendar"] nav .text-gray-300 {
    color: var(--sc-green-300) !important;
}

/* Card-header strips are dark: everything in them is white. Without this, utility
   classes like .text-gray-600 (mapped to --sc-ink-muted above) land on green. */
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-"] h1,
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-"] h2,
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-"] h3,
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-"] span,
html[data-theme="shiftcalendar"] [class*="bg-gradient-to-r"][class*="from-"] button {
    color: #FFFFFF !important;
}

/* text-yellow-500 (rgb(234,179,8)) on white measured 1.92:1 -- the worst on the
   dashboard. The overtime token is the palette's amber and clears AA at 4.9:1. */
html[data-theme="shiftcalendar"] .text-yellow-500,
html[data-theme="shiftcalendar"] .text-yellow-600,
html[data-theme="shiftcalendar"] .text-amber-500,
html[data-theme="shiftcalendar"] .text-orange-500,
html[data-theme="shiftcalendar"] .text-orange-600 {
    color: var(--sc-state-overtime) !important;
}

/* Off-palette chrome in the admin sidebar: "Org Manager" ships bg-purple-600, and the
   card-header icons ship blue/pink/purple/yellow. Item 2 allows ONE chrome colour, and
   item 3 makes colour semantic -- so these become Duty Green rather than a fifth hue. */
html[data-theme="shiftcalendar"] .bg-purple-600,
html[data-theme="shiftcalendar"] .bg-purple-700,
html[data-theme="shiftcalendar"] .bg-violet-600,
html[data-theme="shiftcalendar"] .bg-pink-600,
html[data-theme="shiftcalendar"] .bg-teal-600,
html[data-theme="shiftcalendar"] .bg-cyan-600 {
    background-color: var(--sc-green-700) !important;
}

html[data-theme="shiftcalendar"] .hover\:bg-purple-700:hover,
html[data-theme="shiftcalendar"] .hover\:bg-violet-700:hover,
html[data-theme="shiftcalendar"] .hover\:bg-pink-700:hover {
    background-color: var(--sc-green-900) !important;
}

/* Decorative icon colours in card headers -- the palette reserves colour for state. */
html[data-theme="shiftcalendar"] .text-purple-500,
html[data-theme="shiftcalendar"] .text-purple-600,
html[data-theme="shiftcalendar"] .text-pink-500,
html[data-theme="shiftcalendar"] .text-pink-600,
html[data-theme="shiftcalendar"] .text-indigo-500,
html[data-theme="shiftcalendar"] .text-indigo-600,
html[data-theme="shiftcalendar"] .text-cyan-500,
html[data-theme="shiftcalendar"] .text-cyan-600 {
    color: var(--sc-green-700) !important;
}

/* ---------------------------------------------- 3c. Dark surfaces (self-inflicted) */
/* Base classes, not [class*="bg-gray-800"]: the substring form also matched Tailwind's
   escaped hover:bg-gray-700/800/900 (55 uses here), so a LIGHT button that merely darkens
   on hover had its grey text forced light -- invisible until hovered. Same defect as the
   blue block above, found while auditing for it. No opacity variants of these exist. */
/* The grey remaps above assume a light surface. The payroll/admin sidebars nest their
   labels inside .bg-gray-800, where --sc-ink-muted measured 1.87:1 -- a regression I
   introduced, not a pre-existing one. On dark chrome the greys go light instead.
   Same mistake as pinning h2 to ink: a colour is only accessible against a surface. */
html[data-theme="shiftcalendar"] .bg-gray-700 .text-gray-400,
html[data-theme="shiftcalendar"] .bg-gray-700 .text-gray-500,
html[data-theme="shiftcalendar"] .bg-gray-700 .text-gray-600,
html[data-theme="shiftcalendar"] .bg-gray-700 .text-gray-700,
html[data-theme="shiftcalendar"] .bg-gray-800 .text-gray-400,
html[data-theme="shiftcalendar"] .bg-gray-800 .text-gray-500,
html[data-theme="shiftcalendar"] .bg-gray-800 .text-gray-600,
html[data-theme="shiftcalendar"] .bg-gray-800 .text-gray-700,
html[data-theme="shiftcalendar"] .bg-gray-900 .text-gray-400,
html[data-theme="shiftcalendar"] .bg-gray-900 .text-gray-500,
html[data-theme="shiftcalendar"] .bg-gray-900 .text-gray-600,
html[data-theme="shiftcalendar"] .bg-gray-900 .text-gray-700,
html[data-theme="shiftcalendar"] nav .text-gray-500,
html[data-theme="shiftcalendar"] nav .text-gray-600,
html[data-theme="shiftcalendar"] nav .text-gray-700,
/* .sc-chrome-dark marks sidebars whose dark background is set INLINE -- no
   class-based selector can reach their text without it (measured 1.87:1). */
html[data-theme="shiftcalendar"] .sc-chrome-dark .text-gray-400,
html[data-theme="shiftcalendar"] .sc-chrome-dark .text-gray-500,
html[data-theme="shiftcalendar"] .sc-chrome-dark .text-gray-600,
html[data-theme="shiftcalendar"] .sc-chrome-dark .text-gray-700 {
    color: var(--sc-green-200) !important;   /* 9.1:1 on --sc-green-800 */
}

/* The sidebars also paint their own surface inline (gray-800). Bring it onto the
   brand chrome so the lockup sits on Duty Green, not slate. */
html[data-theme="shiftcalendar"] .sc-chrome-dark {
    background-color: var(--sc-green-800) !important;
}