/**
 * ArchiPM Dark Theme — calm, flat, high-contrast field tool
 *
 * A genuine dark sibling of the ArchiFM theme, NOT a second holographic:
 *   • the brand blue #2B3492 taken dark (deep indigo surfaces), amber #F8B603 as
 *     the single accent — no neon, no glows, no coloured body text
 *   • text stays neutral near-white; only ACCENTS carry colour
 *   • flat 1px hairlines, generous radii, system UI font — a tool, not a HUD
 *
 * Design source: css/hc-field.css + js/components/hc-field-viewer.js +
 * js/components/hc-field-panel.js (the HungaroControl field demo palette).
 * NOTE the naming trap in that file: `--hc-cyan` is #F8B603, i.e. AMBER.
 * That name is deliberately NOT carried forward here.
 *
 * Fill/text model (dark-theme convention, Material-3 style):
 *   semantic tokens are LIGHT so they read as text on the dark surface;
 *   anything filled with them takes --color-text-inverse (#0B0F1E) on top.
 *   Every pair below clears WCAG AA (4.5:1) — see the ratios in the token block.
 *
 * OPT-IN ONLY. This theme is never a default; it is chosen from the profile
 * theme dropdown. Do not set it as `ui.theme` in any site_settings*.json.
 */

:root[data-theme="archipm-dark"] {
  /* ---- Surfaces (deep indigo stack, darkest first) ---- */
  --color-background: #0B0F1E;   /* page / app backdrop */
  --color-surface: #141A47;      /* cards, sheets, list rows */
  --color-surface-hover: #1C2260;/* raised / hovered */
  --color-surface-alt: #10163B;
  --color-surface-active: #232A6E;
  --color-surface-disabled: #171C42;

  /* ---- Borders (periwinkle hairline, from --hc-line) ---- */
  --color-border: rgba(143, 160, 255, 0.20);
  --color-border-hover: rgba(143, 160, 255, 0.42);

  /* ---- Text (neutral — colour lives in the accents, not the copy) ---- */
  --color-text-primary: #F2F4FF;   /* 15.10:1 on surface, 17.40:1 on page */
  --color-text-secondary: #C3CBF0; /* 10.34:1 on surface */
  --color-text-tertiary: #A8B2E2;  /*  7.99:1 on surface — replaces the harness's
                                       rgba(238,242,255,.40) which is only 3.43:1 */
  --color-text-muted: #A8B2E2;
  --color-text-disabled: #7C85B4;  /*  4.63:1 on surface */
  --color-text-inverse: #0B0F1E;   /* sits ON the light semantic fills */

  /* ---- Semantic (light-on-dark; AA as text AND as fill w/ inverse text) ---- */
  --color-primary: #A5B2FF;        /* 8.21:1 text / 9.45:1 fill  */
  --color-primary-hover: #C0C9FF;
  --color-primary-light: rgba(165, 178, 255, 0.14);
  --color-primary-dark: #2B3492;   /* the ArchiFM brand blue — SURFACES only */
  --color-primary-shadow: rgba(165, 178, 255, 0.22);
  --color-secondary: #9BA3CE;      /* 6.72:1 text / 7.74:1 fill  */
  --color-secondary-hover: #B4BBDF;
  --color-secondary-light: rgba(155, 163, 206, 0.14);
  --color-accent: #F8B603;         /* 9.21:1 text / 10.61:1 fill — the signature */
  --color-accent-hover: #FFC933;
  --color-success: #34D399;        /* 8.61:1 / 9.92:1 */
  --color-warning: #F8B603;        /* 9.21:1 / 10.61:1 */
  --color-danger:  #F87171;        /* 5.98:1 / 6.89:1 — #EF4444 is only 4.40:1 */
  --color-danger-bg: rgba(248, 113, 113, 0.16);
  --color-info:    #7FB4FF;        /* 7.78:1 / 8.97:1 */

  /* ---- Shadows (deep, soft — the sheet shadow from hc-field.css) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 10px 26px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 18px 44px rgba(0, 0, 0, 0.60);

  /* ---- Typography (system UI — deliberately NOT a display face) ---- */
  --font-primary: system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Fira Code', Menlo, 'Courier New', monospace;
  --font-family-monospace: var(--font-mono);
  --text-xs: clamp(0.75rem, 1vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.2vw, 1rem);
  --text-base: clamp(1rem, 1.4vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.8vw, 1.25rem);
  --text-xl: clamp(1.25rem, 2vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --text-3xl: clamp(2rem, 3vw, 3rem);
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius (soft, field-tool — not holographic's sharp 0-6px) ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ---- Component heights (glove-friendly baseline) ---- */
  --height-control-sm: 2.25rem;
  --height-control-md: 2.75rem;
  --height-control-lg: 3.25rem;

  /* ---- Animation (calm; no pulse/scan) ---- */
  --ease-in-out: cubic-bezier(0.25, 0.9, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.2, 1.3, 0.4, 1);
  --duration-fast: 100ms;
  --duration-normal: 160ms;
  --duration-slow: 220ms;
  --duration-page: 300ms;

  /* ---- App frame regions ---- */
  --bg-primary: #0B0F1E;
  --bg-header: #2B3492;            /* the ArchiFM brand blue, used as a surface */
  --bg-sidebar: #141A47;
  --bg-footer: #141A47;
  --bg-content: #0B0F1E;
  --bg-surface: #141A47;
  --bg-surface-hover: #1C2260;
  --bg-secondary: #10163B;
  --bg-card: #141A47;
  --surface-1: #141A47;
  --text-primary: #F2F4FF;
  --text-secondary: #C3CBF0;
  --text-tertiary: #A8B2E2;
  --text-muted: #A8B2E2;
  --text-header: #F2F4FF;
  --text-sidebar: #F2F4FF;
  --text-footer: #C3CBF0;
  --text-success: #34D399;
  --text-danger: #F87171;
  --accent-color: #F8B603;
  --accent-primary: #A5B2FF;
  --focus-ring-color: rgba(248, 182, 3, 0.45);

  /* ---- Floating utility tokens ---- */
  --floating-bg: rgba(20, 26, 71, 0.96);
  --floating-border: rgba(143, 160, 255, 0.28);
  --floating-border-width: 1px;
  --floating-text: #F2F4FF;
  --floating-shadow: 0 18px 44px rgba(0, 0, 0, 0.60);
  --floating-backdrop-filter: blur(12px) saturate(1.15);
  --floating-radius: 14px;
  --floating-padding: 1rem;
  --floating-z: 100;

  /* ---- Skeletons ---- */
  --skeleton-base: #1A2050;
  --skeleton-highlight: #232A6E;

  /* ---- Tenant pill (amber on the blue header — the ArchiFM signature) ---- */
  --tenant-pill-bg: #F8B603;
  --tenant-pill-border: #D99C02;
  --tenant-pill-text: #1C2260;
  --tenant-pill-border-width: 2px;

  /* ---- Navigation panel ---- */
  --menu-panel-bg: rgba(20, 26, 71, 0.97);
  --menu-panel-text: #F2F4FF;
  --menu-panel-border: rgba(248, 182, 3, 0.45);
  --menu-item-hover-bg: rgba(248, 182, 3, 0.92);
  --menu-item-active-bg: rgba(248, 182, 3, 0.96);
  --menu-item-hover-text: #1C2260;

  /* ---- Toasts ---- */
  --toast-bg: #1C2260;
  --toast-text: #F2F4FF;
  --toast-border: rgba(143, 160, 255, 0.28);
  --toast-info-bg: #1C2260;
  --toast-info-text: #F2F4FF;
  --toast-info-border: rgba(165, 178, 255, 0.55);
  --toast-success-bg: #10352C;
  --toast-success-text: #A7F3D8;
  --toast-success-border: rgba(52, 211, 153, 0.55);
  --toast-warning-bg: #3A2B05;
  --toast-warning-text: #FFD979;
  --toast-warning-border: rgba(248, 182, 3, 0.60);
  --toast-error-bg: #3B1420;
  --toast-error-text: #FFC2C2;
  --toast-error-border: rgba(248, 113, 113, 0.60);

  /* ---- Mode chip (AppHeaderModeChip / offline chip) ---- */
  --mode-chip-online-bg:     rgba(52, 211, 153, 0.16);
  --mode-chip-online-color:  #34D399;
  --mode-chip-sync-bg:       rgba(248, 182, 3, 0.16);
  --mode-chip-sync-color:    #F8B603;
  --mode-chip-syncing-bg:    rgba(165, 178, 255, 0.16);
  --mode-chip-syncing-color: #A5B2FF;
  --mode-chip-offline-bg:    rgba(248, 113, 113, 0.14);
  --mode-chip-offline-color: #F87171;
  --mode-chip-progress-track: rgba(165, 178, 255, 0.20);
  --mode-chip-progress-fill:  #F8B603;
  --mode-chip-border:        currentColor;
  --mode-chip-border-width:  1px;

  /* ---- App Designer / UI Builder chrome ---- */
  --builder-bg-canvas: #0B0F1E;
  --builder-bg-panel: #141A47;
  --builder-bg-toolbar: #1C2260;
  --builder-border: rgba(143, 160, 255, 0.20);
  --builder-accent: #F8B603;

  /* ---- Bootstrap 5.3 variable overrides -------------------------------
     Defined here rather than relying on Bootstrap's own [data-bs-theme=dark]
     so the theme is self-sufficient if the Bootstrap CDN is unavailable
     (offline PWA). theme-switcher.js additionally sets data-bs-theme="dark"
     so Bootstrap's non-variable dark rules (select caret, .btn-close) apply. */
  --bs-body-bg: #0B0F1E;
  --bs-body-color: #F2F4FF;
  --bs-body-color-rgb: 242, 244, 255;
  --bs-body-bg-rgb: 11, 15, 30;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-bg: #141A47;
  --bs-secondary-color: #C3CBF0;
  --bs-tertiary-bg: #10163B;
  --bs-tertiary-color: #A8B2E2;
  --bs-border-color: rgba(143, 160, 255, 0.20);
  --bs-border-color-rgb: 143, 160, 255;
  --bs-primary: #A5B2FF;
  --bs-primary-rgb: 165, 178, 255;
  --bs-primary-bg-subtle: rgba(165, 178, 255, 0.14);
  --bs-primary-border-subtle: rgba(165, 178, 255, 0.40);
  --bs-primary-text-emphasis: #C0C9FF;
  --bs-secondary: #9BA3CE;
  --bs-success: #34D399;
  --bs-success-bg-subtle: rgba(52, 211, 153, 0.14);
  --bs-success-text-emphasis: #6EE7B7;
  --bs-warning: #F8B603;
  --bs-warning-bg-subtle: rgba(248, 182, 3, 0.14);
  --bs-warning-text-emphasis: #FFD979;
  --bs-danger: #F87171;
  --bs-danger-bg-subtle: rgba(248, 113, 113, 0.14);
  --bs-danger-text-emphasis: #FFA8A8;
  --bs-info: #7FB4FF;
  --bs-info-bg-subtle: rgba(127, 180, 255, 0.14);
  --bs-info-text-emphasis: #A9CDFF;
  --bs-light: #1C2260;
  --bs-dark: #0B0F1E;
  --bs-table-hover-bg: rgba(165, 178, 255, 0.08);
  --bs-link-color: #A5B2FF;
  --bs-link-hover-color: #C0C9FF;
  --bs-heading-color: #F2F4FF;
  --bs-emphasis-color-rgb: 255, 255, 255;

  /* ---- Legacy compatibility aliases (archifm parity) ---- */
  --primary-color: #A5B2FF;
  --secondary-color: #9BA3CE;
  --success-color: #34D399;
  --danger-color: #F87171;
  --warning-color: #F8B603;
  --info-color: #7FB4FF;
  --light-color: #1C2260;
  --dark-color: #0B0F1E;
  --body-bg: #0B0F1E;
  --text-color: #F2F4FF;
  --border-color: rgba(143, 160, 255, 0.20);
  --type-lookup-touch-target: 44px;
}

/* ================================================================ base */

[data-theme="archipm-dark"] body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
}

/* The frame regions the ui-def app shell paints. */
[data-theme="archipm-dark"] .app-frame,
[data-theme="archipm-dark"] .content-root,
[data-theme="archipm-dark"] .page-root {
  background-color: var(--bg-content);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .app-header {
  background-color: var(--bg-header);
  color: var(--text-header);
  border-bottom: 3px solid var(--color-accent);
}

[data-theme="archipm-dark"] .app-footer {
  background-color: var(--bg-footer);
  color: var(--text-footer);
  border-top: 3px solid var(--color-accent);
}

[data-theme="archipm-dark"] .app-sidebar {
  background-color: var(--bg-sidebar);
  color: var(--text-sidebar);
  border-right: 1px solid var(--color-border);
}

[data-theme="archipm-dark"] h1,
[data-theme="archipm-dark"] h2,
[data-theme="archipm-dark"] h3,
[data-theme="archipm-dark"] h4,
[data-theme="archipm-dark"] h5,
[data-theme="archipm-dark"] h6 {
  color: var(--color-text-primary);
}

/* Only the top three headings get the accent rule, exactly as in archifm. */
[data-theme="archipm-dark"] h1,
[data-theme="archipm-dark"] h2,
[data-theme="archipm-dark"] h3 {
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

[data-theme="archipm-dark"] hr {
  border-color: var(--color-border);
  opacity: 1;
}

[data-theme="archipm-dark"] a {
  color: var(--color-primary);
}

[data-theme="archipm-dark"] a:hover {
  color: var(--color-primary-hover);
}

[data-theme="archipm-dark"] code,
[data-theme="archipm-dark"] kbd,
[data-theme="archipm-dark"] pre {
  color: var(--color-accent);
  background-color: var(--color-surface-alt);
  font-family: var(--font-mono);
}

[data-theme="archipm-dark"] ::selection {
  background: rgba(248, 182, 3, 0.32);
  color: var(--color-text-primary);
}

/* Scrollbars — a light-theme scrollbar on a dark sheet reads as a bug. */
[data-theme="archipm-dark"] { color-scheme: dark; }

[data-theme="archipm-dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="archipm-dark"] ::-webkit-scrollbar-track { background: var(--color-surface-alt); }
[data-theme="archipm-dark"] ::-webkit-scrollbar-thumb {
  background: rgba(143, 160, 255, 0.28);
  border-radius: var(--radius-full);
}
[data-theme="archipm-dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 160, 255, 0.45);
}

/* ============================================ Bootstrap text utilities */

[data-theme="archipm-dark"] .text-muted {
  color: var(--color-text-tertiary) !important;
  opacity: 1 !important;
}
[data-theme="archipm-dark"] .text-primary { color: var(--color-primary) !important; }
[data-theme="archipm-dark"] .text-secondary { color: var(--color-text-secondary) !important; }
[data-theme="archipm-dark"] .text-success { color: var(--color-success) !important; }
[data-theme="archipm-dark"] .text-warning { color: var(--color-warning) !important; }
[data-theme="archipm-dark"] .text-danger { color: var(--color-danger) !important; }
[data-theme="archipm-dark"] .text-info { color: var(--color-info) !important; }
[data-theme="archipm-dark"] .text-dark { color: var(--color-text-primary) !important; }
[data-theme="archipm-dark"] .text-body { color: var(--color-text-primary) !important; }

[data-theme="archipm-dark"] .bg-primary { background-color: var(--color-primary-dark) !important; }
[data-theme="archipm-dark"] .bg-light { background-color: var(--color-surface-hover) !important; }
[data-theme="archipm-dark"] .bg-white { background-color: var(--color-surface) !important; }
[data-theme="archipm-dark"] .bg-body { background-color: var(--color-background) !important; }

[data-theme="archipm-dark"] .border { border-color: var(--color-border) !important; }
[data-theme="archipm-dark"] .border-top,
[data-theme="archipm-dark"] .border-end,
[data-theme="archipm-dark"] .border-bottom,
[data-theme="archipm-dark"] .border-start { border-color: var(--color-border) !important; }

/* ===================================================== buttons */

[data-theme="archipm-dark"] .btn {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

[data-theme="archipm-dark"] .btn:focus,
[data-theme="archipm-dark"] .btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

[data-theme="archipm-dark"] .btn:active {
  transform: scale(0.985);
  transition: transform var(--duration-fast) var(--ease-in);
}

/* .btn-primary — the single primary CTA is AMBER, as in the field design. */
[data-theme="archipm-dark"] .btn-primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-semibold);
}
[data-theme="archipm-dark"] .btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-secondary {
  color: var(--color-text-inverse);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
[data-theme="archipm-dark"] .btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-success {
  color: var(--color-text-inverse);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

[data-theme="archipm-dark"] .btn-warning {
  color: var(--color-text-inverse);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

[data-theme="archipm-dark"] .btn-danger {
  color: var(--color-text-inverse);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}
[data-theme="archipm-dark"] .btn-danger:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-danger) 82%, #FFFFFF);
  border-color: color-mix(in srgb, var(--color-danger) 82%, #FFFFFF);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-light {
  color: var(--color-text-primary);
  background-color: var(--color-surface-hover);
  border-color: var(--color-border);
}

[data-theme="archipm-dark"] .btn-link {
  color: var(--color-primary);
}

/* Outline variants — the everyday, low-noise buttons of a field tool. */
[data-theme="archipm-dark"] .btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}
[data-theme="archipm-dark"] .btn-outline-primary:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-outline-secondary {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-color: transparent;
}
[data-theme="archipm-dark"] .btn-outline-secondary:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: transparent;
}
[data-theme="archipm-dark"] .btn-outline-danger:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
  background-color: transparent;
}
[data-theme="archipm-dark"] .btn-outline-success:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background-color: var(--color-success);
  border-color: var(--color-success);
}

[data-theme="archipm-dark"] .btn-outline-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background-color: transparent;
}
[data-theme="archipm-dark"] .btn-outline-warning:hover:not(:disabled) {
  color: var(--color-text-inverse);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}

[data-theme="archipm-dark"] .btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.825rem;
}

[data-theme="archipm-dark"] .btn:disabled,
[data-theme="archipm-dark"] .btn.disabled {
  opacity: 0.45;
}

[data-theme="archipm-dark"] .icon-btn {
  color: var(--color-text-secondary);
  background: transparent;
  border-color: var(--color-border);
}
[data-theme="archipm-dark"] .icon-btn:hover {
  color: var(--color-accent);
  background: var(--color-surface-hover);
}

/* ===================================================== form controls */

[data-theme="archipm-dark"] .form-control,
[data-theme="archipm-dark"] .form-select,
[data-theme="archipm-dark"] .form-control-sm,
[data-theme="archipm-dark"] .form-select-sm,
[data-theme="archipm-dark"] input[type="text"],
[data-theme="archipm-dark"] input[type="search"],
[data-theme="archipm-dark"] input[type="number"],
[data-theme="archipm-dark"] input[type="email"],
[data-theme="archipm-dark"] input[type="password"],
[data-theme="archipm-dark"] input[type="tel"],
[data-theme="archipm-dark"] input[type="url"],
[data-theme="archipm-dark"] input[type="date"],
[data-theme="archipm-dark"] input[type="time"],
[data-theme="archipm-dark"] input[type="datetime-local"],
[data-theme="archipm-dark"] input:not([type]),
[data-theme="archipm-dark"] textarea,
[data-theme="archipm-dark"] select {
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);   /* 15.97:1 on the input background */
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

[data-theme="archipm-dark"] .form-control:focus,
[data-theme="archipm-dark"] .form-select:focus,
[data-theme="archipm-dark"] input:focus,
[data-theme="archipm-dark"] textarea:focus,
[data-theme="archipm-dark"] select:focus {
  background-color: var(--color-surface-alt);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  outline: none;
}

[data-theme="archipm-dark"] .form-control::placeholder,
[data-theme="archipm-dark"] input::placeholder,
[data-theme="archipm-dark"] textarea::placeholder {
  color: #8E97C6;   /* 6.16:1 on the input background */
  opacity: 1;
}

[data-theme="archipm-dark"] .form-control:disabled,
[data-theme="archipm-dark"] .form-select:disabled,
[data-theme="archipm-dark"] input:disabled,
[data-theme="archipm-dark"] textarea:disabled {
  background-color: var(--color-surface-disabled);
  color: var(--color-text-disabled);
}

[data-theme="archipm-dark"] textarea,
[data-theme="archipm-dark"] .textarea-autogrow {
  resize: vertical;
}

[data-theme="archipm-dark"] .form-label,
[data-theme="archipm-dark"] label {
  color: var(--color-text-secondary);
}

[data-theme="archipm-dark"] .form-text,
[data-theme="archipm-dark"] small {
  color: var(--color-text-tertiary);
}

[data-theme="archipm-dark"] .input-group-text {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="archipm-dark"] input[type="checkbox"],
[data-theme="archipm-dark"] input[type="radio"] {
  accent-color: var(--color-accent);
}

[data-theme="archipm-dark"] .form-check-input {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border-hover);
}
[data-theme="archipm-dark"] .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
[data-theme="archipm-dark"] .form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
[data-theme="archipm-dark"] .form-check label {
  color: var(--color-text-secondary);
  cursor: pointer;
}

[data-theme="archipm-dark"] .form-range::-webkit-slider-thumb { background: var(--color-accent); }
[data-theme="archipm-dark"] .form-range::-moz-range-thumb { background: var(--color-accent); }

/* ===================================================== surfaces */

[data-theme="archipm-dark"] .card,
[data-theme="archipm-dark"] .settings-card,
[data-theme="archipm-dark"] .stat-card,
[data-theme="archipm-dark"] .wo-card,
[data-theme="archipm-dark"] .wo-info-card,
[data-theme="archipm-dark"] .wo-summary-card,
[data-theme="archipm-dark"] .afmv2-ms-card,
[data-theme="archipm-dark"] .afmv2-ms-card-sm,
[data-theme="archipm-dark"] .afmv2-equip-card,
[data-theme="archipm-dark"] .multiplier-card {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

[data-theme="archipm-dark"] .card-header,
[data-theme="archipm-dark"] .card-footer,
[data-theme="archipm-dark"] .afmv2-equip-card-header {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .card:hover,
[data-theme="archipm-dark"] .wo-card:hover,
[data-theme="archipm-dark"] .multiplier-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .panel,
[data-theme="archipm-dark"] .modal-content,
[data-theme="archipm-dark"] .ui-popup,
[data-theme="archipm-dark"] .ui-loading-overlay-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
}

[data-theme="archipm-dark"] .ui-popup__header,
[data-theme="archipm-dark"] .ui-popup__footer,
[data-theme="archipm-dark"] .modal-header,
[data-theme="archipm-dark"] .modal-footer {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .ui-popup__title,
[data-theme="archipm-dark"] .modal-title {
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .ui-popup__close,
[data-theme="archipm-dark"] .nav-overlay-close {
  color: var(--color-text-secondary);
}
[data-theme="archipm-dark"] .ui-popup__close:hover {
  color: var(--color-accent);
  background: rgba(248, 182, 3, 0.14);
}

[data-theme="archipm-dark"] .ui-popup-backdrop,
[data-theme="archipm-dark"] .modal-backdrop,
[data-theme="archipm-dark"] .nav-backdrop,
[data-theme="archipm-dark"] .ui-loading-overlay {
  background: rgba(4, 6, 16, 0.72);
}

[data-theme="archipm-dark"] .ui-floating {
  background: var(--floating-bg);
  border: var(--floating-border-width) solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}

[data-theme="archipm-dark"] .dropdown-menu {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg);
}
[data-theme="archipm-dark"] .dropdown-item {
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .dropdown-item:hover,
[data-theme="archipm-dark"] .dropdown-item:focus {
  background-color: var(--color-surface-hover);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .dropdown-item.active {
  background-color: rgba(248, 182, 3, 0.16);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .dropdown-divider { border-color: var(--color-border); }

[data-theme="archipm-dark"] .table {
  --bs-table-color: var(--color-text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: rgba(165, 178, 255, 0.05);
  --bs-table-striped-color: var(--color-text-primary);
  --bs-table-hover-bg: rgba(165, 178, 255, 0.09);
  --bs-table-hover-color: var(--color-text-primary);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .table thead th {
  color: var(--color-text-tertiary);
  border-bottom-color: var(--color-border-hover);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
}

[data-theme="archipm-dark"] .alert {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .alert-success {
  background-color: rgba(52, 211, 153, 0.14);
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--color-success);
}
[data-theme="archipm-dark"] .alert-warning {
  background-color: rgba(248, 182, 3, 0.14);
  border-color: rgba(248, 182, 3, 0.45);
  color: var(--color-warning);
}
[data-theme="archipm-dark"] .alert-danger {
  background-color: var(--color-danger-bg);
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--color-danger);
}
[data-theme="archipm-dark"] .alert-info {
  background-color: rgba(127, 180, 255, 0.14);
  border-color: rgba(127, 180, 255, 0.45);
  color: var(--color-info);
}

/* Bootstrap 5.3's `.badge` carries NO background of its own — a fill only
   arrives from a `bg-*` / `text-bg-*` class. So --color-text-inverse (#0B0F1E,
   the page backdrop) is the right colour ONLY when such a fill is present; this
   rule used to apply to every .badge, which painted bare pills in the page
   background colour on a transparent background. Invisible: the five
   DashUpNextStatus pills on Home measured 1.15:1 against the #141A47 card. */
[data-theme="archipm-dark"] .badge[class*="bg-"] {
  color: var(--color-text-inverse);
}

/* Bare badge — no fill class, so no status modifier is available to key off.
   Takes the neutral member of this theme's existing status vocabulary
   (.status-badge--new/--secondary, below): surface-hover fill, secondary text.
   The hairline steps up to --color-border-hover because at --color-border's
   0.20 alpha the pill edge reads 1.64:1 against the card and simply disappears;
   0.42 matches the 0.45-alpha borders the coloured variants of the same
   vocabulary already use, so this is that pattern, not a third one. */
[data-theme="archipm-dark"] .badge:not([class*="bg-"]) {
  background-color: var(--color-surface-hover);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text-secondary);
}

[data-theme="archipm-dark"] .list-group-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ===================================================== page transitions */

[data-theme="archipm-dark"] .page-enter-active {
  animation: apmdSlideInRight var(--duration-page) var(--ease-out);
}
[data-theme="archipm-dark"] .page-leave-active {
  animation: apmdSlideOutLeft var(--duration-page) var(--ease-in);
}

@keyframes apmdSlideInRight {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes apmdSlideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-16px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="archipm-dark"] .page-enter-active,
  [data-theme="archipm-dark"] .page-leave-active { animation: none; }
}

/* ================================================= auth (Logon/Landing) */

[data-theme="archipm-dark"] .auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  background: var(--bg-content);
  padding: var(--space-4);
}

@media (max-width: 600px) {
  [data-theme="archipm-dark"] .auth-page {
    align-items: flex-start;
    padding-top: var(--space-6);
  }
}

[data-theme="archipm-dark"] .auth-container {
  max-width: 420px;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}

[data-theme="archipm-dark"] .auth-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

[data-theme="archipm-dark"] .auth-logo h1 {
  color: var(--color-text-primary);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  border-bottom: none;
  padding-bottom: 0;
}

[data-theme="archipm-dark"] .auth-logo p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

[data-theme="archipm-dark"] .auth-context-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(165, 178, 255, 0.10);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border: 1px solid rgba(165, 178, 255, 0.28);
}

[data-theme="archipm-dark"] .account-history { margin-bottom: var(--space-4); }

[data-theme="archipm-dark"] .account-history-title {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="archipm-dark"] .account-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

[data-theme="archipm-dark"] .account-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-out);
  width: 100%;
  text-align: left;
  position: relative;
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .account-history-item:hover {
  background: var(--color-surface-active);
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .account-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

[data-theme="archipm-dark"] .account-info { flex: 1; min-width: 0; }

[data-theme="archipm-dark"] .account-name {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="archipm-dark"] .account-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="archipm-dark"] .account-time {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

[data-theme="archipm-dark"] .account-remove {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--text-lg);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-slow) var(--ease-out);
  flex-shrink: 0;
}

[data-theme="archipm-dark"] .account-remove:hover {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .account-history-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

[data-theme="archipm-dark"] .account-history-divider::before,
[data-theme="archipm-dark"] .account-history-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

[data-theme="archipm-dark"] .auth-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

[data-theme="archipm-dark"] .auth-method {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-slow) var(--ease-out);
}

[data-theme="archipm-dark"] .auth-method.last-used {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(248, 182, 3, 0.18);
}

[data-theme="archipm-dark"] .auth-method-sso,
[data-theme="archipm-dark"] .auth-method-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-hover);
  border: none;
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-out);
  text-align: left;
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .auth-method-sso:hover,
[data-theme="archipm-dark"] .auth-method-toggle:hover {
  background: var(--color-surface-active);
  transform: translateY(-1px);
}

[data-theme="archipm-dark"] .auth-icon,
[data-theme="archipm-dark"] .auth-sso-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  font-size: var(--text-xl);
  flex-shrink: 0;
}

[data-theme="archipm-dark"] .auth-text { flex: 1; }

[data-theme="archipm-dark"] .auth-text h3 {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-1) 0;
  border-bottom: none;
  padding-bottom: 0;
}

[data-theme="archipm-dark"] .auth-text p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

[data-theme="archipm-dark"] .auth-method .badge {
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

[data-theme="archipm-dark"] .expand-icon {
  color: var(--color-text-secondary);
  transition: transform var(--duration-slow) var(--ease-out);
}

[data-theme="archipm-dark"] .auth-form {
  padding: var(--space-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

[data-theme="archipm-dark"] .auth-form-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

[data-theme="archipm-dark"] .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

[data-theme="archipm-dark"] .form-group label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

[data-theme="archipm-dark"] .form-group input {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  transition: border-color var(--duration-slow) var(--ease-out);
}

[data-theme="archipm-dark"] .form-group input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

[data-theme="archipm-dark"] .form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

[data-theme="archipm-dark"] .form-check:not(.form-switch) input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

/* The one full-width submit — amber, matching .btn-primary. */
[data-theme="archipm-dark"] .btn-block {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--duration-slow) var(--ease-out);
}

[data-theme="archipm-dark"] .btn-block:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .btn-block:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-theme="archipm-dark"] .form-help {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: center;
}
[data-theme="archipm-dark"] .form-help a { color: var(--color-primary); }
[data-theme="archipm-dark"] .form-help a:hover { color: var(--color-primary-hover); }

[data-theme="archipm-dark"] .auth-error {
  padding: var(--space-3);
  background: var(--color-danger-bg);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

[data-theme="archipm-dark"] .auth-success {
  padding: var(--space-3);
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

[data-theme="archipm-dark"] .auth-info {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

[data-theme="archipm-dark"] .auth-cred-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

[data-theme="archipm-dark"] .auth-cred-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--duration-slow) var(--ease-out);
}

[data-theme="archipm-dark"] .auth-cred-tab:hover {
  background: var(--color-surface-active);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .auth-cred-tab.active {
  background: rgba(248, 182, 3, 0.16);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

[data-theme="archipm-dark"] .auth-cred-tab-icon { flex-shrink: 0; }

[data-theme="archipm-dark"] .auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

[data-theme="archipm-dark"] .auth-divider::before,
[data-theme="archipm-dark"] .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

[data-theme="archipm-dark"] .auth-sso-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

[data-theme="archipm-dark"] .auth-sso-tooltip {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}

[data-theme="archipm-dark"] .hidden { display: none; }

[data-theme="archipm-dark"] .landing-page {
  background: var(--bg-content);
  color: var(--color-text-primary);
}

@media (max-width: 767.98px) {
  [data-theme="archipm-dark"] .auth-container { padding: var(--space-6); }
  [data-theme="archipm-dark"] .auth-logo h1 { font-size: var(--text-2xl); }
}

/* ================================================= camera capture */

[data-theme="archipm-dark"] .camera-capture-component {
  position: relative;
  width: 100%;
}

[data-theme="archipm-dark"] .camera-capture-component .capture-area {
  position: relative;
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #000;
  padding: 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="archipm-dark"] .camera-capture-component .camera-video-feed {
  width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
  object-fit: cover;
}

[data-theme="archipm-dark"] .camera-capture-component .camera-buttons-container {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3);
  z-index: 10;
}

[data-theme="archipm-dark"] .camera-capture-component .camera-capture-btn,
[data-theme="archipm-dark"] .camera-capture-component .camera-gallery-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(248, 182, 3, 0.92);
  color: var(--color-text-inverse);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(4px);
}

[data-theme="archipm-dark"] .camera-capture-component .camera-capture-btn:hover,
[data-theme="archipm-dark"] .camera-capture-component .camera-gallery-btn:hover {
  background: var(--color-accent);
  transform: scale(1.08);
  box-shadow: var(--shadow-xl);
}

[data-theme="archipm-dark"] .camera-capture-component .camera-capture-btn:active,
[data-theme="archipm-dark"] .camera-capture-component .camera-gallery-btn:active {
  transform: scale(0.95);
}

[data-theme="archipm-dark"] .camera-capture-component input[type="file"] { display: none; }

[data-theme="archipm-dark"] .camera-capture-component .camera-preview-root {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

[data-theme="archipm-dark"] .camera-capture-component .preview-container {
  position: relative;
  display: inline-block;
  border-radius: var(--radius-md);
  overflow: hidden;
}

[data-theme="archipm-dark"] .camera-capture-component .preview-container img {
  max-height: 200px;
  max-width: min(100%, 280px);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: block;
}

[data-theme="archipm-dark"] .camera-capture-component .remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition:
    filter var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .camera-capture-component .remove-btn:hover {
  filter: brightness(1.12);
  transform: scale(1.1);
}

[data-theme="archipm-dark"] .camera-capture-component .remove-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* Photo thumbnails (event / WO galleries) */
[data-theme="archipm-dark"] .photo-thumb {
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}
[data-theme="archipm-dark"] .photo-thumb--pending { opacity: 0.6; }
[data-theme="archipm-dark"] .photo-thumb-del {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

/* ================================================= navigation chrome */

[data-theme="archipm-dark"] .nav-overlay,
[data-theme="archipm-dark"] .nav-overlay-menu {
  background: var(--menu-panel-bg);
  color: var(--menu-panel-text);
  border-color: var(--menu-panel-border);
  backdrop-filter: var(--floating-backdrop-filter);
  -webkit-backdrop-filter: var(--floating-backdrop-filter);
}

[data-theme="archipm-dark"] .nav-overlay-header {
  border-bottom: 1px solid var(--color-border);
}

[data-theme="archipm-dark"] .nav-overlay-title {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="archipm-dark"] .menu-item,
[data-theme="archipm-dark"] .menu-group-header,
[data-theme="archipm-dark"] .profile-nav-item {
  color: var(--menu-panel-text);
  border-radius: var(--radius-md);
}

[data-theme="archipm-dark"] .menu-item:hover,
[data-theme="archipm-dark"] .menu-item:focus,
[data-theme="archipm-dark"] .menu-group-header:hover,
[data-theme="archipm-dark"] .profile-nav-item:hover {
  background: var(--menu-item-hover-bg);
  color: var(--menu-item-hover-text);
  outline: none;
}

[data-theme="archipm-dark"] .menu-item.active {
  background: var(--menu-item-active-bg);
  color: var(--menu-item-hover-text);
  font-weight: var(--font-semibold);
}

[data-theme="archipm-dark"] .menu-group-label {
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

[data-theme="archipm-dark"] .menu-group-chevron { color: var(--color-accent); }

[data-theme="archipm-dark"] .hamburger-btn {
  color: var(--text-header);
  background: transparent;
}
[data-theme="archipm-dark"] .hamburger-btn:hover { color: var(--color-accent); }

[data-theme="archipm-dark"] .header-back-btn {
  color: var(--text-header);
  background: transparent;
  border-color: rgba(242, 244, 255, 0.28);
}
[data-theme="archipm-dark"] .header-back-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

[data-theme="archipm-dark"] .page-title { color: var(--color-text-primary); }

/* Bottom nav — same amber-on-indigo language as the side menu. */
[data-theme="archipm-dark"] .bottom-nav {
  background: var(--menu-panel-bg);
  border-top: 1px solid var(--menu-panel-border);
}

[data-theme="archipm-dark"] .bottom-nav__item {
  color: var(--menu-panel-text);
  opacity: 0.78;
  border-radius: var(--radius-md);
  margin: 4px 2px;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

[data-theme="archipm-dark"] .bottom-nav__item:hover {
  background: var(--menu-item-hover-bg);
  color: var(--menu-item-hover-text);
  opacity: 1;
}

[data-theme="archipm-dark"] .bottom-nav__item:focus {
  background: var(--menu-item-hover-bg);
  color: var(--menu-item-hover-text);
  opacity: 1;
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

[data-theme="archipm-dark"] .bottom-nav__item.active {
  background: var(--menu-item-active-bg);
  color: var(--menu-item-hover-text);
  opacity: 1;
  font-weight: var(--font-semibold);
}

/* ================================================= header widgets */

[data-theme="archipm-dark"] .header-tenant-pill {
  background: var(--tenant-pill-bg);
  border: var(--tenant-pill-border-width) solid var(--tenant-pill-border);
  color: var(--tenant-pill-text);
}
[data-theme="archipm-dark"] .header-tenant-pill-label,
[data-theme="archipm-dark"] .header-tenant-pill-value { color: var(--tenant-pill-text); }

[data-theme="archipm-dark"] .user-pill,
[data-theme="archipm-dark"] .profile-btn {
  color: var(--text-header);
  background: rgba(242, 244, 255, 0.10);
  border: 1px solid rgba(242, 244, 255, 0.20);
}
[data-theme="archipm-dark"] .user-pill:hover,
[data-theme="archipm-dark"] .profile-btn:hover {
  background: rgba(248, 182, 3, 0.20);
  border-color: var(--color-accent);
}
[data-theme="archipm-dark"] .user-pill-name,
[data-theme="archipm-dark"] .user-pill-icon,
[data-theme="archipm-dark"] .user-pill-chevron { color: inherit; }

/* Avatars use the amber accent as a FILL, so the glyph must be dark.
   app.css hardcodes `color:#fff` here — see the defect note in the HC-3 report. */
[data-theme="archipm-dark"] .profile-avatar,
[data-theme="archipm-dark"] .user-menu-avatar {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .profile-dropdown,
[data-theme="archipm-dark"] .user-menu {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
  backdrop-filter: var(--floating-backdrop-filter);
  -webkit-backdrop-filter: var(--floating-backdrop-filter);
}

[data-theme="archipm-dark"] .profile-name,
[data-theme="archipm-dark"] .user-menu-name,
[data-theme="archipm-dark"] .user-menu-item-title { color: var(--color-text-primary); }

[data-theme="archipm-dark"] .profile-email,
[data-theme="archipm-dark"] .user-menu-email,
[data-theme="archipm-dark"] .user-menu-item-meta,
[data-theme="archipm-dark"] .user-menu-section-label,
[data-theme="archipm-dark"] .user-menu-empty,
[data-theme="archipm-dark"] .user-menu-impersonation-help { color: var(--color-text-tertiary); }

[data-theme="archipm-dark"] .profile-divider,
[data-theme="archipm-dark"] .user-menu-divider { border-color: var(--color-border); background: var(--color-border); }

[data-theme="archipm-dark"] .user-menu-item:hover,
[data-theme="archipm-dark"] .user-menu-header:hover {
  background: rgba(248, 182, 3, 0.14);
  color: var(--color-accent);
}

[data-theme="archipm-dark"] .user-menu-item-accent { color: var(--color-accent); }
[data-theme="archipm-dark"] .user-menu-check { color: var(--color-success); }

[data-theme="archipm-dark"] .user-menu-item-pill {
  background: rgba(248, 182, 3, 0.16);
  color: var(--color-accent);
}

[data-theme="archipm-dark"] .user-menu-search {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .user-menu-search:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--focus-ring-color);
}

[data-theme="archipm-dark"] .profile-signout { color: var(--color-danger); }
[data-theme="archipm-dark"] .profile-signout:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

[data-theme="archipm-dark"] .header-impersonation-banner {
  background: rgba(248, 182, 3, 0.18);
  border-bottom: 1px solid var(--color-accent);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .header-impersonation-badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .header-impersonation-text,
[data-theme="archipm-dark"] .header-impersonation-meta { color: var(--color-text-primary); }

/* --- online / offline / sync chips --------------------------------- */

[data-theme="archipm-dark"] .app-header-chip--online   { background: var(--mode-chip-online-bg);  color: var(--mode-chip-online-color); }
[data-theme="archipm-dark"] .app-header-chip--offline  { background: var(--mode-chip-offline-bg); color: var(--mode-chip-offline-color); }
[data-theme="archipm-dark"] .app-header-chip--syncing  { background: var(--mode-chip-syncing-bg); color: var(--mode-chip-syncing-color); }

[data-theme="archipm-dark"] .app-header-chip-popover,
[data-theme="archipm-dark"] .app-header-mode-chip-popover {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}
[data-theme="archipm-dark"] .app-header-chip-popover-item,
[data-theme="archipm-dark"] .app-header-mode-chip-popover-item { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .app-header-chip-popover-item:hover,
[data-theme="archipm-dark"] .app-header-mode-chip-popover-item:hover {
  background: rgba(248, 182, 3, 0.14);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .app-header-mode-chip-popover-item--danger { color: var(--color-danger); }
[data-theme="archipm-dark"] .app-header-mode-chip-popover-item--danger:hover { background: var(--color-danger-bg); }

/* app.css hardcodes light-theme greens/ambers/reds for these header icons;
   on a dark header they fall below AA. Re-point them at the theme tokens. */
[data-theme="archipm-dark"] .app-header-sync-icon[data-state="ready"] { color: var(--color-success); }
[data-theme="archipm-dark"] .app-header-sync-icon[data-state="stale"] { color: var(--color-warning); }
[data-theme="archipm-dark"] .app-header-sync-icon[data-state="error"] { color: var(--color-danger); }

[data-theme="archipm-dark"] .app-header-rehydration { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .app-header-rehydration-bar { background: var(--mode-chip-progress-fill); }
[data-theme="archipm-dark"] .app-header-sw-update {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .app-header-sw-update:hover { background: var(--color-accent-hover); }

[data-theme="archipm-dark"] .header-online-indicator { color: var(--color-success); }
[data-theme="archipm-dark"] .sync-status-text,
[data-theme="archipm-dark"] .data-freshness { color: var(--color-text-tertiary); }

[data-theme="archipm-dark"] .api-loading-bar { background: var(--color-accent); }

/* ================================================= tabs */

[data-theme="archipm-dark"] .ui-tabs__nav {
  border-bottom: 1px solid var(--color-border);
}
[data-theme="archipm-dark"] .ui-tabs__tab {
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
}
[data-theme="archipm-dark"] .ui-tabs__tab:hover { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .ui-tabs__tab.active,
[data-theme="archipm-dark"] .ui-tabs__tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
[data-theme="archipm-dark"] .ui-tabs__badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .ui-tabs__panel,
[data-theme="archipm-dark"] .ui-tabs__content { color: var(--color-text-primary); }

/* ================================================= lists & filters */

[data-theme="archipm-dark"] .card-list-scroll,
[data-theme="archipm-dark"] .card-grid { background: transparent; }

[data-theme="archipm-dark"] .card-list-empty,
[data-theme="archipm-dark"] .crud-empty,
[data-theme="archipm-dark"] .wo-empty-state,
[data-theme="archipm-dark"] .wo-task-empty,
[data-theme="archipm-dark"] .wo-time-empty,
[data-theme="archipm-dark"] .wo-picker-empty,
[data-theme="archipm-dark"] .wo-dash-empty,
[data-theme="archipm-dark"] .toggle-matrix__empty {
  color: var(--color-text-tertiary);
}

[data-theme="archipm-dark"] .card-list-filter-body,
[data-theme="archipm-dark"] .card-list-pagination,
[data-theme="archipm-dark"] .crud-toolbar,
[data-theme="archipm-dark"] .lyb-filter-toolbar {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .crud-section-header {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

[data-theme="archipm-dark"] .lyb-filter-pill,
[data-theme="archipm-dark"] .lyb-filter-pill__select,
[data-theme="archipm-dark"] .lyb-filter-pill__input,
[data-theme="archipm-dark"] .lyb-filter-pill__date-trigger,
[data-theme="archipm-dark"] .lyb-filter-toolbar__toggle {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

[data-theme="archipm-dark"] .lyb-filter-pill--active {
  background: rgba(248, 182, 3, 0.16);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

[data-theme="archipm-dark"] .lyb-filter-pill__segment { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .lyb-filter-pill__segment--active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .lyb-filter-badge {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .lyb-filter-clear,
[data-theme="archipm-dark"] .lyb-date-clear { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .lyb-filter-clear:hover { color: var(--color-danger); }

[data-theme="archipm-dark"] .lyb-date-dropdown {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}
[data-theme="archipm-dark"] .lyb-date-preset { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .lyb-date-preset:hover {
  background: rgba(248, 182, 3, 0.14);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .lyb-date-custom-sep { color: var(--color-text-tertiary); }

[data-theme="archipm-dark"] .row-action { color: var(--color-primary); }
[data-theme="archipm-dark"] .card-list-check,
[data-theme="archipm-dark"] .card-list-selectall { accent-color: var(--color-accent); }

/* type_lookup */
[data-theme="archipm-dark"] .type-lookup-input,
[data-theme="archipm-dark"] .type-lookup-input-wrap,
[data-theme="archipm-dark"] .type-lookup-sheet-search {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .type-lookup-dropdown,
[data-theme="archipm-dark"] .type-lookup-sheet {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}
[data-theme="archipm-dark"] .type-lookup-item { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .type-lookup-item:hover,
[data-theme="archipm-dark"] .type-lookup-item.active {
  background: rgba(248, 182, 3, 0.14);
  color: var(--color-accent);
}
[data-theme="archipm-dark"] .type-lookup-item-secondary,
[data-theme="archipm-dark"] .type-lookup-item--empty { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .type-lookup-selected {
  background: rgba(165, 178, 255, 0.14);
  border-color: var(--color-border-hover);
}
[data-theme="archipm-dark"] .type-lookup-selected-label { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .type-lookup-caret,
[data-theme="archipm-dark"] .type-lookup-clear { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .type-lookup-qr-btn {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .type-lookup-sheet-header { border-bottom: 1px solid var(--color-border); }
[data-theme="archipm-dark"] .type-lookup-sheet-title { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .type-lookup-sheet-close { color: var(--color-text-secondary); }

/* toggle_matrix */
[data-theme="archipm-dark"] .toggle-matrix__table { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .toggle-matrix__col-header,
[data-theme="archipm-dark"] .toggle-matrix__row-header,
[data-theme="archipm-dark"] .toggle-matrix__corner {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
[data-theme="archipm-dark"] .toggle-matrix__col-sublabel,
[data-theme="archipm-dark"] .toggle-matrix__row-sublabel { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .toggle-matrix__cell { border-color: var(--color-border); }
[data-theme="archipm-dark"] .toggle-matrix__switch { accent-color: var(--color-accent); }
[data-theme="archipm-dark"] .toggle-matrix__toolbar { background: var(--color-surface); }

/* expandable_field */
[data-theme="archipm-dark"] .expandable-field-wrap,
[data-theme="archipm-dark"] .expandable-field-textarea,
[data-theme="archipm-dark"] .expandable-field-popup__body {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .expandable-field-toggle { color: var(--color-primary); }
[data-theme="archipm-dark"] .expandable-field-editor-host--code {
  background: #080B18;
  border-color: var(--color-border);
}

/* skeletons */
[data-theme="archipm-dark"] .skeleton-card,
[data-theme="archipm-dark"] .skeleton-row {
  background: var(--skeleton-base);
  border-radius: var(--radius-md);
}
[data-theme="archipm-dark"] .skeleton-shimmer {
  background: linear-gradient(90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-base) 100%);
}

/* ================================================= status vocabulary */

[data-theme="archipm-dark"] .status-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

[data-theme="archipm-dark"] .status-badge--new,
[data-theme="archipm-dark"] .status-badge--secondary {
  background-color: var(--color-surface-hover);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

[data-theme="archipm-dark"] .status-badge--open,
[data-theme="archipm-dark"] .status-badge--info,
[data-theme="archipm-dark"] .status-badge--primary {
  background-color: rgba(165, 178, 255, 0.18);
  color: var(--color-primary);
  border-color: rgba(165, 178, 255, 0.45);
}

[data-theme="archipm-dark"] .status-badge--inprogress,
[data-theme="archipm-dark"] .status-badge--pending,
[data-theme="archipm-dark"] .status-badge--warning {
  background-color: rgba(248, 182, 3, 0.18);
  color: var(--color-warning);
  border-color: rgba(248, 182, 3, 0.45);
}

[data-theme="archipm-dark"] .status-badge--closed,
[data-theme="archipm-dark"] .status-badge--success {
  background-color: rgba(52, 211, 153, 0.18);
  color: var(--color-success);
  border-color: rgba(52, 211, 153, 0.45);
}

[data-theme="archipm-dark"] .status-badge--rejected,
[data-theme="archipm-dark"] .status-badge--danger {
  background-color: rgba(248, 113, 113, 0.18);
  color: var(--color-danger);
  border-color: rgba(248, 113, 113, 0.45);
}

/* .status-chip — same vocabulary, chip form */
[data-theme="archipm-dark"] .status-chip {
  border: 1px solid transparent;
  border-radius: var(--radius-full);
}
[data-theme="archipm-dark"] .status-chip--primary { background: rgba(165, 178, 255, 0.18); color: var(--color-primary); border-color: rgba(165, 178, 255, 0.45); }
[data-theme="archipm-dark"] .status-chip--info    { background: rgba(127, 180, 255, 0.18); color: var(--color-info);    border-color: rgba(127, 180, 255, 0.45); }
[data-theme="archipm-dark"] .status-chip--success { background: rgba(52, 211, 153, 0.18);  color: var(--color-success); border-color: rgba(52, 211, 153, 0.45); }
[data-theme="archipm-dark"] .status-chip--warning { background: rgba(248, 182, 3, 0.18);   color: var(--color-warning); border-color: rgba(248, 182, 3, 0.45); }
[data-theme="archipm-dark"] .status-chip--danger  { background: rgba(248, 113, 113, 0.18); color: var(--color-danger);  border-color: rgba(248, 113, 113, 0.45); }
[data-theme="archipm-dark"] .status-chip--light   { background: var(--color-surface-hover); color: var(--color-text-secondary); border-color: var(--color-border); }
[data-theme="archipm-dark"] .status-chip--dark    { background: var(--color-surface-alt);   color: var(--color-text-secondary); border-color: var(--color-border); }

/* ================================================= info_card */

[data-theme="archipm-dark"] .info-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
  padding: var(--space-4);
}

[data-theme="archipm-dark"] .info-card__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  line-height: 1;
}

[data-theme="archipm-dark"] .info-card__icon-key {
  display: inline-block;
  font-size: var(--text-3xl);
  text-transform: none;
  letter-spacing: normal;
}

[data-theme="archipm-dark"] .info-card__title {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="archipm-dark"] .info-card__value {
  color: var(--color-text-primary);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

[data-theme="archipm-dark"] .info-card__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

[data-theme="archipm-dark"] .info-card--interactive { cursor: pointer; }

[data-theme="archipm-dark"] .info-card--interactive:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

[data-theme="archipm-dark"] .info-card--unavailable .info-card__value {
  color: var(--color-text-disabled);
}

/* ------------------------------- info_card: module tile variant (see archifm.css) */

[data-theme="archipm-dark"] .info-card--module {
  --module-tile-accent: var(--color-accent);
  border-left: 4px solid var(--module-tile-accent);
  background-color: color-mix(in srgb, var(--module-tile-accent) 12%, var(--color-surface));
  display: flex;
  flex-direction: column;
  /* NO explicit height. Flex `stretch` only applies when the item's cross-size is
     `auto`; setting `height: 100%` DISABLES the stretch and then resolves against
     the row's indefinite height, i.e. back to content height. That is what made
     tiles in the same row ragged (212/177/212). With height auto the grid's
     align-items: normal stretches every tile in a wrapped flex line to that line's
     tallest — per-row equal height, which is the legacy behaviour. */
}

[data-theme="archipm-dark"] .info-card--module .info-card__value { display: none; }

[data-theme="archipm-dark"] .info-card--module .info-card__title {
  color: var(--module-tile-accent);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: var(--space-3);
  padding-right: var(--space-6);
}

[data-theme="archipm-dark"] .info-card--module .info-card__icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin-bottom: 0;
  opacity: 0.55;
}

[data-theme="archipm-dark"] .info-card--module-soon .info-card__subtitle {
  color: var(--color-text-disabled);
  font-style: italic;
}

[data-theme="archipm-dark"] .info-card__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

[data-theme="archipm-dark"] .info-card__link {
  display: inline-block;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-1) 0;
}

[data-theme="archipm-dark"] .info-card__link:hover,
[data-theme="archipm-dark"] .info-card__link:focus-visible {
  color: var(--module-tile-accent, var(--color-accent));
  text-decoration: underline;
}

[data-theme="archipm-dark"] .info-card__link--disabled,
[data-theme="archipm-dark"] .info-card__link--disabled:hover {
  color: var(--color-text-disabled);
  cursor: default;
  text-decoration: none;
  opacity: 0.7;
}

[data-theme="archipm-dark"] .info-card--module-asset { --module-tile-accent: #8f95e8; }
[data-theme="archipm-dark"] .info-card--module-dashboard { --module-tile-accent: #4fd1c5; }
[data-theme="archipm-dark"] .info-card--module-tenant { --module-tile-accent: #4fc9db; }
[data-theme="archipm-dark"] .info-card--module-issue { --module-tile-accent: #f08d9b; }
[data-theme="archipm-dark"] .info-card--module-planned { --module-tile-accent: #f0b24a; }
[data-theme="archipm-dark"] .info-card--module-workorder { --module-tile-accent: #d3ae8c; }
[data-theme="archipm-dark"] .info-card--module-finance { --module-tile-accent: #8fd06a; }
[data-theme="archipm-dark"] .info-card--module-analysis { --module-tile-accent: #b795e8; }
[data-theme="archipm-dark"] .info-card--module-settings { --module-tile-accent: #a8b0b8; }
[data-theme="archipm-dark"] .info-card--module-warehouse { --module-tile-accent: #f0955a; }
[data-theme="archipm-dark"] .info-card--module-hr { --module-tile-accent: #dccb45; }
[data-theme="archipm-dark"] .info-card--module-customers { --module-tile-accent: #e097a6; }
[data-theme="archipm-dark"] .info-card--module-standards { --module-tile-accent: #c2c87a; }

/* ================================================= attachment_panel */

[data-theme="archipm-dark"] .attachment-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: var(--space-3);
}

[data-theme="archipm-dark"] .attachment-panel__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-hover);
  padding: var(--space-3);
}

[data-theme="archipm-dark"] .attachment-panel__item + .attachment-panel__item {
  margin-top: var(--space-2);
}

[data-theme="archipm-dark"] .attachment-panel__name {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

[data-theme="archipm-dark"] .attachment-panel__meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

[data-theme="archipm-dark"] .attachment-panel__actions { margin-top: var(--space-2); }

[data-theme="archipm-dark"] .attachment-panel__empty {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

[data-theme="archipm-dark"] .attachment-panel__upload {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

[data-theme="archipm-dark"] .attachment-panel__file-input {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

[data-theme="archipm-dark"] .attachment-panel__upload-status {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ================================================= stat / dashboard */

[data-theme="archipm-dark"] .dashboard-page,
[data-theme="archipm-dark"] .settings-page,
[data-theme="archipm-dark"] .showcase-page,
[data-theme="archipm-dark"] .afmv2-page,
[data-theme="archipm-dark"] .ux-page-shell {
  background: var(--bg-content);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .dashboard-hero {
  background: linear-gradient(135deg, #222B78 0%, var(--color-surface) 60%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
}

/* app.css paints the hero's own heading/paragraph children with
   --color-text-inverse (#0B0F1E here) — the page backdrop. The container rule
   above cannot reach them because `.dashboard-hero p` sets colour directly. */
[data-theme="archipm-dark"] .dashboard-hero h2,
[data-theme="archipm-dark"] .dashboard-hero h3,
[data-theme="archipm-dark"] .dashboard-hero p {
  color: var(--color-text-primary);
  opacity: 1;
}

[data-theme="archipm-dark"] .settings-title,
[data-theme="archipm-dark"] .afmv2-page-header { color: var(--color-text-primary); }

/* Home's stat-cards adopt the WOList row treatment verbatim.
   WOList (card_list -> .multiplier-card) is the screen the user confirmed reads
   well in this theme, and its contract is: FLAT var(--color-surface) (#141A47,
   the --hc-ink of the source palette), a 1px var(--color-border) hairline,
   --color-text-primary body / --color-text-tertiary secondary, amber
   --color-accent on icons and highlights only, and a 4px left bar for status.
   No gradient, no veil, no ornament. Everything below carries that across.

   What Home was doing instead: app.css fills .stat-card with
   linear-gradient(--_accent 0%, --_accent-dark 100%) and the variants point
   those at the semantic tokens. In a dark theme the semantic tokens are
   deliberately LIGHT (they are text colours on a dark page), so the stock
   variants painted as #A5B2FF->#2B3492 / #34D399->#059669 / #9BA3CE->#B4BBDF —
   the brightest elements on a #0B0F1E page, and light-to-dark ramps, so no
   single text colour could work across one card. That is what forced the
   inline dark text in Home.json. The surfaces group above only set
   `background-color`, which a `background:` gradient paints straight over, so
   it had never taken effect.

   Fixed at the component's own extension point rather than by forking it:
   collapse both gradient stops onto the same surface token. The gradient
   survives syntactically but is a single flat colour, pixel-identical to a
   WOList row. Blue and amber stay, as ACCENTS — left bar, icon, CTA, value. */
[data-theme="archipm-dark"] .stat-card {
  --_accent: var(--color-surface);
  --_accent-dark: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

/* app.css floats two white wash circles (12% / 6%) over every stat-card. They
   are invisible on a saturated light gradient but read as pale blobs on a dark
   surface, and they were the lightest painted pixels on the card, so they set
   the contrast floor for every label on top of them. WOList rows carry no such
   ornament; neither should these. */
[data-theme="archipm-dark"] .stat-card::before,
[data-theme="archipm-dark"] .stat-card::after { background: none; }

/* app.css veils these primitives with opacity .65–.90 because it assumes
   white-on-saturated-gradient. WOList's .multiplier-card__secondary/__meta use
   no veil at all — the colour is carried by the token, whose documented ratios
   assume opacity 1 — so it is dropped here too, exactly as the .text-muted rule
   further up already does. Keeping it would leave .stat-meta at 4.16:1. */
[data-theme="archipm-dark"] .stat-label,
[data-theme="archipm-dark"] .stat-meta,
[data-theme="archipm-dark"] .stat-subtitle,
[data-theme="archipm-dark"] .wo-dash-empty {
  color: var(--color-text-tertiary);
  opacity: 1;
}
[data-theme="archipm-dark"] .stat-number { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .stat-accent-value,
[data-theme="archipm-dark"] .stat-cta { color: var(--color-accent); opacity: 1; }
/* Must follow the .wo-dash-empty rule above — same specificity, and app.css's
   own --noprofile warning tint is a weaker selector than either. */
[data-theme="archipm-dark"] .wo-dash-empty--noprofile { color: var(--color-warning); }
/* The variant's whole visual identity, now that the fill is flat: a 4px left
   bar, the same width and idiom WOList uses for .multiplier-card.wo-card--*. */
[data-theme="archipm-dark"] .stat-card--primary { border-left: 4px solid var(--color-primary); }
[data-theme="archipm-dark"] .stat-card--success { border-left: 4px solid var(--color-success); }
[data-theme="archipm-dark"] .stat-card--warning { border-left: 4px solid var(--color-warning); }
[data-theme="archipm-dark"] .stat-card--muted   { border-left: 4px solid var(--color-border-hover); }

[data-theme="archipm-dark"] .afmv2-home-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .afmv2-home-tile:hover { border-color: var(--color-accent); }
[data-theme="archipm-dark"] .afmv2-tile-icon { color: var(--color-accent); }
[data-theme="archipm-dark"] .afmv2-ref-item { border-color: var(--color-border); }

[data-theme="archipm-dark"] .multiplier-card__primary { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .multiplier-card__secondary,
[data-theme="archipm-dark"] .multiplier-card__meta { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .multiplier-card__icon,
[data-theme="archipm-dark"] .multiplier-card__highlight-icon { color: var(--color-accent); }
[data-theme="archipm-dark"] .multiplier-card__highlight {
  background: rgba(248, 182, 3, 0.14);
  border-color: rgba(248, 182, 3, 0.40);
}
[data-theme="archipm-dark"] .multiplier-card__highlight-text { color: var(--color-accent); }

/* ================================================= work-order screens */

[data-theme="archipm-dark"] .wo-sticky-header,
[data-theme="archipm-dark"] .wo-count-bar,
[data-theme="archipm-dark"] .wo-action-bar,
[data-theme="archipm-dark"] .wo-bulk-actions {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .wo-card--active  { border-left: 4px solid var(--color-success); }
[data-theme="archipm-dark"] .wo-card--pending { border-left: 4px solid var(--color-warning); }
[data-theme="archipm-dark"] .wo-card--closed  { border-left: 4px solid var(--color-secondary); }

[data-theme="archipm-dark"] .wo-detail-hero {
  background: linear-gradient(135deg, #222B78 0%, var(--color-surface) 60%);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .wo-detail-number,
[data-theme="archipm-dark"] .wo-detail-name,
[data-theme="archipm-dark"] .wo-detail-value { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .wo-detail-label,
[data-theme="archipm-dark"] .wo-detail-siteloc,
[data-theme="archipm-dark"] .wo-detail-context,
[data-theme="archipm-dark"] .wo-remark-label,
[data-theme="archipm-dark"] .wo-time-label,
[data-theme="archipm-dark"] .wo-time-context { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .wo-detail-field { border-color: var(--color-border); }

[data-theme="archipm-dark"] .wo-fieldset,
[data-theme="archipm-dark"] .wo-sig-section,
[data-theme="archipm-dark"] .wo-time-section,
[data-theme="archipm-dark"] .wo-time-form,
[data-theme="archipm-dark"] .wo-task-detail,
[data-theme="archipm-dark"] .ux-fieldset-default {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .wo-fieldset-legend,
[data-theme="archipm-dark"] .wo-events-header {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

[data-theme="archipm-dark"] .wo-nav-link { color: var(--color-primary); }
[data-theme="archipm-dark"] .wo-task-name-link { color: var(--color-primary); }

[data-theme="archipm-dark"] .wo-task-row,
[data-theme="archipm-dark"] .wo-time-entry,
[data-theme="archipm-dark"] .wo-picker-item {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .wo-task-row:hover,
[data-theme="archipm-dark"] .wo-picker-item:hover { background: var(--color-surface-hover); }
[data-theme="archipm-dark"] .wo-task-name,
[data-theme="archipm-dark"] .wo-task-detail-name,
[data-theme="archipm-dark"] .wo-picker-item-name { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .wo-task-info,
[data-theme="archipm-dark"] .wo-picker-item-meta,
[data-theme="archipm-dark"] .wo-task-detail-current { color: var(--color-text-tertiary); }

[data-theme="archipm-dark"] .wo-task-search-input,
[data-theme="archipm-dark"] .wo-picker-search {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .wo-time-entry-worker,
[data-theme="archipm-dark"] .wo-time-entry-hours,
[data-theme="archipm-dark"] .wo-time-duration { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .wo-time-entry-times,
[data-theme="archipm-dark"] .wo-time-arrow { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .wo-time-del-btn { color: var(--color-danger); }
[data-theme="archipm-dark"] .wo-time-new-btn,
[data-theme="archipm-dark"] .wo-time-save,
[data-theme="archipm-dark"] .wo-time-end-btn {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
[data-theme="archipm-dark"] .wo-time-worker-change { color: var(--color-primary); }

/* -- the group band: app.css fills it with --color-primary and writes #fff -- */
[data-theme="archipm-dark"] .wo-task-group-header { background: var(--color-primary-dark); }
[data-theme="archipm-dark"] .wo-task-group-header.is-complete { background: var(--color-success); }
[data-theme="archipm-dark"] .wo-task-group-header.is-complete .wo-task-group-title,
[data-theme="archipm-dark"] .wo-task-group-header.is-complete .wo-task-group-count,
[data-theme="archipm-dark"] .wo-task-group-header.is-complete .wo-task-group-chevron {
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .wo-task-group-title,
[data-theme="archipm-dark"] .wo-task-group-chevron { color: var(--color-text-primary); }

/* -- app.css pairs these token FILLS with a hardcoded `color:#fff`, which
      fails AA once the token is a light dark-theme colour. Re-point them at
      --color-text-inverse. See the HC-3 report's defect list. -- */
/* The .wo-pill-* rules carry `color: #fff !important`, so specificity alone
   cannot win here — the override has to be !important too. */
[data-theme="archipm-dark"] .wo-pill-active,
[data-theme="archipm-dark"] .wo-pill-done,
[data-theme="archipm-dark"] .wo-pill-total,
[data-theme="archipm-dark"] .wo-pill-hours {
  color: var(--color-text-inverse) !important;
}

[data-theme="archipm-dark"] .wo-result-ok,
[data-theme="archipm-dark"] .wo-result-fixed,
[data-theme="archipm-dark"] .wo-result-none,
[data-theme="archipm-dark"] .wo-result-missing,
[data-theme="archipm-dark"] .wo-result-improve,
[data-theme="archipm-dark"] .wo-task-btn-ok.active,
[data-theme="archipm-dark"] .wo-task-btn-fixed.active,
[data-theme="archipm-dark"] .wo-task-btn-improve.active,
[data-theme="archipm-dark"] .wo-task-btn-missing.active,
[data-theme="archipm-dark"] .wo-task-btn-lg.wo-task-btn-missing.active {
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .wo-status-active {
  background-color: var(--color-success) !important;
  color: var(--color-text-inverse) !important;
}
[data-theme="archipm-dark"] .wo-status-pending {
  background-color: var(--color-warning) !important;
  color: var(--color-text-inverse) !important;
}
[data-theme="archipm-dark"] .wo-status-closed {
  background-color: var(--color-secondary) !important;
  color: var(--color-text-inverse) !important;
}
[data-theme="archipm-dark"] .wo-status-badge { border-radius: var(--radius-full); }

[data-theme="archipm-dark"] .wo-toast {
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid var(--toast-border);
}
[data-theme="archipm-dark"] .wo-toast-error {
  background: var(--toast-error-bg);
  color: var(--toast-error-text);
  border-color: var(--toast-error-border);
}

/* ================================================= toasts & banners */

[data-theme="archipm-dark"] .lyberon-toast {
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid var(--toast-border);
  box-shadow: var(--shadow-lg);
}
[data-theme="archipm-dark"] .lyberon-toast--info {
  background: var(--toast-info-bg);
  color: var(--toast-info-text);
  border-color: var(--toast-info-border);
}
[data-theme="archipm-dark"] .lyberon-toast--success {
  background: var(--toast-success-bg);
  color: var(--toast-success-text);
  border-color: var(--toast-success-border);
}
[data-theme="archipm-dark"] .lyberon-toast--warning {
  background: var(--toast-warning-bg);
  color: var(--toast-warning-text);
  border-color: var(--toast-warning-border);
}
[data-theme="archipm-dark"] .lyberon-toast--error {
  background: var(--toast-error-bg);
  color: var(--toast-error-text);
  border-color: var(--toast-error-border);
}

[data-theme="archipm-dark"] .version-toast {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}
[data-theme="archipm-dark"] .version-toast-title { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .version-toast-subtitle,
[data-theme="archipm-dark"] .version-toast-build,
[data-theme="archipm-dark"] .version-toast-message { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .version-toast-icon { color: var(--color-accent); }
[data-theme="archipm-dark"] .version-toast-reload {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

[data-theme="archipm-dark"] .ui-enrichment-pending { color: var(--color-text-tertiary); }

/* UX feedback modal */
[data-theme="archipm-dark"] .app-ux-feedback-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
}
[data-theme="archipm-dark"] .app-ux-feedback-modal-overlay { background: rgba(4, 6, 16, 0.72); }
[data-theme="archipm-dark"] .app-ux-feedback-modal-header,
[data-theme="archipm-dark"] .app-ux-feedback-modal-footer { border-color: var(--color-border); }
[data-theme="archipm-dark"] .app-ux-feedback-label { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .app-ux-feedback-textarea,
[data-theme="archipm-dark"] .app-ux-feedback-context-json {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="archipm-dark"] .app-ux-feedback-context { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .app-ux-feedback-submit {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
[data-theme="archipm-dark"] .app-ux-feedback-cancel { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .app-ux-feedback-modal-close { color: var(--color-text-secondary); }
[data-theme="archipm-dark"] .app-ux-feedback-modal-close:hover { color: var(--color-accent); }

/* ================================================= misc components */

[data-theme="archipm-dark"] .qr-scanner-component,
[data-theme="archipm-dark"] .qr-display-component {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
}
[data-theme="archipm-dark"] .qr-component-title { color: var(--color-text-primary); }
[data-theme="archipm-dark"] .qr-scanner-status,
[data-theme="archipm-dark"] .qr-display-status { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .qr-scanner-camera-select {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
/* The QR code itself must stay black-on-white to remain scannable. */
[data-theme="archipm-dark"] .qr-display-frame {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

[data-theme="archipm-dark"] .bim-viewer-component,
[data-theme="archipm-dark"] .bim-viewer-page { background: #0B0F1E; }
[data-theme="archipm-dark"] .bim-floating-panel,
[data-theme="archipm-dark"] .bim-controls {
  background: var(--floating-bg);
  border: 1px solid var(--floating-border);
  color: var(--floating-text);
  box-shadow: var(--floating-shadow);
}
[data-theme="archipm-dark"] .bim-controls-title,
[data-theme="archipm-dark"] .bim-properties-title,
[data-theme="archipm-dark"] .bim-property-section-title { color: var(--color-accent); }
[data-theme="archipm-dark"] .bim-no-selection,
[data-theme="archipm-dark"] .bim-status,
[data-theme="archipm-dark"] .bim-info { color: var(--color-text-tertiary); }
[data-theme="archipm-dark"] .bim-property-row { border-color: var(--color-border); }
[data-theme="archipm-dark"] .bim-loading-overlay { background: rgba(11, 15, 30, 0.85); }
[data-theme="archipm-dark"] .btn-bim-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
[data-theme="archipm-dark"] .btn-bim-secondary {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
[data-theme="archipm-dark"] .btn-bim-accent {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* The signature canvas stays white on purpose: ink must read as ink, and the
   captured PNG is archived / printed. Do not darken it. */
[data-theme="archipm-dark"] .wo-sig-section canvas {
  background: #FFFFFF;
  border-color: var(--color-border);
}

[data-theme="archipm-dark"] .signature-pad-component canvas {
  background: #FFFFFF;
  border-color: var(--color-border);
}

[data-theme="archipm-dark"] .language-picker,
[data-theme="archipm-dark"] .tenant-selector {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="archipm-dark"] .chart-container { color: var(--color-text-primary); }

[data-theme="archipm-dark"] .component-renderer-stub,
[data-theme="archipm-dark"] .page-renderer-stub {
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-hover);
  color: var(--color-text-tertiary);
}

[data-theme="archipm-dark"] .dropdown-allow-create { color: var(--color-accent); }

/* ================================================= fieldwork context */

/* Glove-friendly targets. Not theme-scoped in archifm/holographic either —
   kept unscoped so the sizing rules stay identical across themes. */
[data-theme="archipm-dark"] .ctx-fieldwork .btn {
  min-height: 56px;
  font-size: 1rem;
  font-weight: var(--font-semibold);
}
[data-theme="archipm-dark"] .ctx-fieldwork .btn-sm { min-height: 44px; }
[data-theme="archipm-dark"] .ctx-fieldwork .form-control,
[data-theme="archipm-dark"] .ctx-fieldwork .form-select {
  min-height: 48px;
  font-size: 1rem;
}

/* --- Fieldwork emphasis (HMP-102) -------------------------------------------
   Customer ask: every control a field worker must touch needs a background
   prominent enough that it is obvious there is something to do with it.
   OPT-IN ONLY — only a container carrying .ctx-fieldwork gets this, and only
   the Hörmann field ui-defs put that class on their page root.

   archipm-dark idiom (calm, flat, no glows, colour lives in the accents): the
   control becomes a RECESSED WELL — page-black fill sunk below the #141A47 card,
   a 2px periwinkle rim, and the theme's signature amber lip along the bottom.
   Prominence comes from depth + the amber accent, not from brightness, which is
   what keeps it a tool rather than a HUD. It cannot be confused with disabled:
   --color-surface-disabled (#171C42) is LIGHTER than the card, this is darker,
   and disabled controls carry no accent lip.
   Contrast: --color-text-primary on #0B0F1E = 17.40:1, i.e. ABOVE the 15.97:1
   this theme's own form-control rule documents — the emphasis raises contrast,
   it does not spend it.

   SPECIFICITY — every selector here is >= (0,0,3,0) and must outrank:
     [data-theme="archipm-dark"] .form-control     (0,0,2,0)  <- this file, :548
     [data-theme="archipm-dark"] select            (0,0,1,1)  <- this file, :564
     [data-theme="archipm-dark"] .ctx-fieldwork .form-control (0,0,3,0) <- the sizing
        block above; :is() takes the HIGHEST specificity of its arguments, so the
        input[type="..."] members lift the rules below to (0,0,3,1) — they win on
        element count, and they set disjoint properties from the sizing block anyway
     .type-lookup-input / .type-lookup-selected    (0,0,1,0)  <- app.css
     .wo-task-btn / .wo-bulk-actions .wo-task-btn  (0,0,1,0)/(0,0,2,0) <- app.css
   -------------------------------------------------------------------------- */
[data-theme="archipm-dark"] .ctx-fieldwork
  :is(.form-control, .form-select, select, textarea,
      input[type="text"], input[type="search"], input[type="number"],
      input[type="email"], input[type="tel"], input[type="date"], input[type="time"],
      .type-lookup-input, .type-lookup-selected) {
  background-color: var(--color-background);
  border: 2px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  box-shadow: inset 0 -3px 0 0 var(--color-accent);
}
[data-theme="archipm-dark"] .ctx-fieldwork
  :is(.form-control, .form-select, select, textarea,
      input[type="text"], input[type="search"], input[type="number"],
      input[type="email"], input[type="tel"], input[type="date"], input[type="time"],
      .type-lookup-input):focus {
  background-color: var(--color-background);
  border-color: var(--color-accent);
  box-shadow:
    inset 0 -3px 0 0 var(--color-accent),
    0 0 0 3px var(--focus-ring-color);
  outline: none;
}
/* The caret is the "this opens" affordance — the signature amber, no fade. */
[data-theme="archipm-dark"] .ctx-fieldwork .type-lookup-caret {
  color: var(--color-accent);
  opacity: 1;
}
/* TaskList result buttons. currentColor is each button's own role colour
   (ok=success, fixed=info, improve=warning), so one rule tints all four roles
   with their OWN semantics instead of flattening them to the accent.
   :not(.active) leaves the chosen state as the full fill it already is (and
   keeps clear of the .active rules at :2269). The ring is an inset box-shadow,
   not a fatter border, so the compact bulk header does not reflow. */
[data-theme="archipm-dark"] .ctx-fieldwork
  :is(.wo-task-btn, .wo-task-btn-lg):not(.active) {
  background-color: color-mix(in srgb, currentColor 14%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
}

/* Outdoors the outline buttons need a filled, unambiguous state. */
[data-theme="archipm-dark"] .ctx-fieldwork .btn-outline-primary,
[data-theme="archipm-dark"] .ctx-fieldwork .btn-outline-secondary,
[data-theme="archipm-dark"] .ctx-fieldwork .btn-outline-danger {
  border-width: 2px;
  font-weight: var(--font-bold);
}

[data-theme="archipm-dark"] .ctx-fieldwork .status-badge {
  min-height: 44px;
  font-weight: var(--font-bold);
}

[data-theme="archipm-dark"] .ctx-fieldwork .info-card { border-width: 2px; }
[data-theme="archipm-dark"] .ctx-fieldwork .info-card--interactive { min-height: 56px; }

[data-theme="archipm-dark"] .ctx-fieldwork .attachment-panel__download,
[data-theme="archipm-dark"] .ctx-fieldwork .attachment-panel__upload-button {
  min-height: 56px;
  font-weight: var(--font-bold);
}

[data-theme="archipm-dark"] .ctx-fieldwork .attachment-panel__name,
[data-theme="archipm-dark"] .ctx-fieldwork .attachment-panel__meta,
[data-theme="archipm-dark"] .ctx-fieldwork .attachment-panel__upload-status {
  color: var(--color-text-primary);
}

/* ================================================= responsive sizing */

[data-theme="archipm-dark"] .ux-size-compact,
[data-theme="archipm-dark"] .ux-size-field,
[data-theme="archipm-dark"] .ux-size-wide,
[data-theme="archipm-dark"] .ux-size-full { color: var(--color-text-primary); }

/* ---------------------------------------------------------------------------
   AFMv2 module nav (.nav-modules) — legacy parity.
   In the legacy XAF rail every one of the 13 modules is an identical primary
   row: ALL CAPS with a chevron, no icon. The platform default styles
   .menu-group-header as a faint 0.75rem section LABEL, which made module rows
   read as subordinate to plain .menu-item rows and the menu looked like two
   different menus fused together. Scoped to .nav-modules so the Hormann Mobile
   and App Designer frames keep the default section-label treatment.
   --------------------------------------------------------------------------- */
.nav-modules .menu-group-header {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 4px);
}

.nav-modules .menu-group-label {
  font-size: 0.875rem;
}

.nav-modules .menu-group-header:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* Sub-items sit UNDER their module: indented and slightly quieter, so the
   module row stays the primary element exactly as in the legacy rail. */
.nav-modules .menu-group .menu-item {
  padding-left: 2.5rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.nav-modules .menu-group .menu-item:hover {
  opacity: 1;
}

/* "Hamarosan" placeholder inside an unbuilt module — visibly not a destination. */
.nav-modules .menu-item-soon {
  font-style: italic;
  opacity: 0.55;
  cursor: default;
}

.nav-modules .menu-item-soon:hover {
  opacity: 0.7;
}