/* ============================================================================
   Scaffold tag card skins — the single source of truth
   ----------------------------------------------------------------------------
   A scaffold tag's colour IS its safety signal, so the card is skinned by the
   tag's status rather than by the app theme: green accessible, yellow use
   caution, red not accessible. Each skin sets the same seven custom properties,
   and every template that draws a tag card consumes them:

     --tag-bg-color / --tag-text-color    the card itself
     --tag-header-bg / --tag-header-text  the "SCAFFOLD SAFETY INSPECTION TAG" band
     --section-bg / --section-border      the recessed panels inside the card
     --info-bg / --info-text / --info-border   the individual field boxes
     --link-color, --shadow-color

   These skins used to be copy-pasted into every template that renders a card,
   which is how ``dismantled`` ended up with no skin at all: the history modal
   is included from three different pages, two of which defined none. Defining
   them once here means every host page gets the full set.

   Loaded from base.html at the end of <head>, after page-level <style> blocks,
   so it wins over any stale inline copy.

   The status hexes are deliberate and stay hardcoded: they are the safety
   palette, not theme surfaces, and must not drift with the brand accent.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Fallback for a card whose status has no skin.

   Sits on the container itself so it beats the inherited :root defaults some
   templates still declare for their own charts and tables. Without this a card
   with an unmapped status renders half-skinned — white fields and a black band
   inside a coloured card — which reads as broken rather than as a status.
   ---------------------------------------------------------------------------- */
.scaffold-tag-container {
  --tag-bg-color: var(--slam-surface-3, #e2e8f0);
  --tag-text-color: var(--slam-text-strong, #0f172a);
  --tag-header-bg: var(--slam-border-strong, #cfd8e6);
  --tag-header-text: var(--slam-text-strong, #0f172a);
  --section-bg: var(--slam-border-strong, #cfd8e6);
  --section-border: var(--slam-text-muted, #64748b);
  --info-bg: var(--slam-surface-2, #f1f5f9);
  --info-text: var(--slam-text-strong, #0f172a);
  --info-border: var(--slam-text-muted, #64748b);
  --link-color: var(--slam-text-strong, #0f172a);
  --shadow-color: rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------------------------------------------
   Live statuses — vivid in light mode
   ---------------------------------------------------------------------------- */
[data-bs-theme="light"] .tag-theme-green {
  --tag-bg-color: #00C853;
  --tag-text-color: #000;
  --tag-header-bg: #009f3a;
  --tag-header-text: #fff;
  --section-bg: #00b347;
  --info-bg: #26d56d;
  --info-text: #000;
  --info-border: #0b5d2a;
  --section-border: #0b5d2a;
  --link-color: #000;
  --shadow-color: rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .tag-theme-yellow {
  --tag-bg-color: #FFD400;
  --tag-text-color: #000;
  --tag-header-bg: #E0B000;
  --tag-header-text: #000;
  --section-bg: #e6c200;
  --info-bg: #ffe455;
  --info-text: #000;
  --info-border: #9a7b00;
  --section-border: #9a7b00;
  --link-color: #000;
  --shadow-color: rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .tag-theme-red,
[data-bs-theme="light"] .tag-theme-expired {
  --tag-bg-color: #FF3B30;
  --tag-text-color: #000;
  --tag-header-bg: #C82333;
  --tag-header-text: #fff;
  --section-bg: #e13229;
  --info-bg: #ff6b64;
  --info-text: #000;
  --info-border: #7a1017;
  --section-border: #7a1017;
  --link-color: #000;
  --shadow-color: rgba(0, 0, 0, 0.12);
}

/* ----------------------------------------------------------------------------
   Live statuses — darker in dark mode, easier on the eyes, light text
   ---------------------------------------------------------------------------- */
[data-bs-theme="dark"] .tag-theme-green {
  --tag-bg-color: #0f3d24;
  --tag-text-color: #e8f5e9;
  --tag-header-bg: #0a2918;
  --tag-header-text: #b9f6ca;
  --section-bg: #14532d;
  --info-bg: #1b4332;
  --info-text: #e8f5e9;
  --info-border: #4ade80;
  --section-border: #2d6a4f;
  --link-color: #b9f6ca;
  --shadow-color: rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .tag-theme-yellow {
  --tag-bg-color: #4a3b00;
  --tag-text-color: #fff8e1;
  --tag-header-bg: #332900;
  --tag-header-text: #ffe082;
  --section-bg: #5c4a0a;
  --info-bg: #6b5608;
  --info-text: #fff8e1;
  --info-border: #ffd54f;
  --section-border: #8a7020;
  --link-color: #ffe082;
  --shadow-color: rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .tag-theme-red,
[data-bs-theme="dark"] .tag-theme-expired {
  --tag-bg-color: #5c1218;
  --tag-text-color: #ffebee;
  --tag-header-bg: #3d0a0f;
  --tag-header-text: #ffcdd2;
  --section-bg: #7a1a22;
  --info-bg: #8b1e28;
  --info-text: #ffebee;
  --info-border: #ef5350;
  --section-border: #a12832;
  --link-color: #ffcdd2;
  --shadow-color: rgba(0, 0, 0, 0.55);
}

/* ----------------------------------------------------------------------------
   Dismantled — out of service, so it drops the safety palette entirely.

   ``get_actual_status`` returns 'dismantled' ahead of expiry and the stored
   status, so this is a real card state with no colour of its own. It renders in
   neutral surfaces: unmistakably not a live tag, while still keeping the card's
   own internal hierarchy (band darkest, panels recessed, fields raised) so it
   reads as a tag rather than as a rendering fault.

   Built from tokens, which already flip with the theme, so the field boxes
   follow the card into dark mode instead of staying white.
   ---------------------------------------------------------------------------- */
/* The band's text colour doubles as the field-label colour
   (`.scaffold-info-item strong`), which is why this skin uses a light band with
   dark text rather than the classic black band: a dark band would force light
   labels, and those disappear against light grey fields. The live skins get
   away with it because their fields are saturated. */
[data-bs-theme="light"] .tag-theme-dismantled {
  --tag-bg-color: var(--slam-surface-3, #e2e8f0);
  --tag-text-color: var(--slam-text-strong, #0f172a);
  --tag-header-bg: var(--slam-border-strong, #cfd8e6);
  --tag-header-text: var(--slam-text-strong, #0f172a);
  --section-bg: var(--slam-border-strong, #cfd8e6);
  --section-border: var(--slam-text-muted, #64748b);
  --info-bg: var(--slam-surface-2, #f1f5f9);
  --info-text: var(--slam-text-strong, #0f172a);
  --info-border: var(--slam-text-muted, #64748b);
  --link-color: var(--slam-text-strong, #0f172a);
  --shadow-color: rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .tag-theme-dismantled {
  --tag-bg-color: var(--slam-surface-3, #243049);
  --tag-text-color: var(--slam-text-strong, #f8fafc);
  --tag-header-bg: var(--slam-surface-0, #0a0f1c);
  --tag-header-text: var(--slam-text-strong, #f8fafc);
  --section-bg: var(--slam-surface-1, #121a2b);
  --section-border: var(--slam-border, #233048);
  --info-bg: var(--slam-surface-2, #1a2436);
  --info-text: var(--slam-text-strong, #f8fafc);
  --info-border: var(--slam-border-strong, #324159);
  --link-color: var(--slam-text-strong, #f8fafc);
  --shadow-color: rgba(0, 0, 0, 0.55);
}
