/* ============================================================
   CCL EMS — Web theme tokens (2026-05-30, Phase 2 design-system refit)
   ============================================================
   Real brand palettes. Replaces the earlier green-default + brown-guess
   placeholders. Sourced from:
     - clarke-controls.co.uk + clarke-controls.net (sampled live via Playwright)
     - tansun.com (sampled live)
     - The actual EMS app-icon (clarke-controls.net apple-touch-icon)
     - The logo.webp embedded background (#044769 sampled pixel-exact)

   These STATIC palettes are baseline. At runtime, the layout injects a
   <style> block from Yii::$app->params['currentDistributor']['palette']
   (populated by app\components\DistributorBootstrap) which overrides the
   relevant block when a request comes in on a custom host like
   control.tansun.com. So even when the DB bundle changes (admin CRUD
   Phase 3), this file remains the safe baseline.

   Token naming mirrors ios_app/src/theme/themes.ts. Each block sets:
     - our own --ems-* tokens (consumed by layout chrome in main.php),
     - Bootstrap 5 --bs-* variables (cards/tables/buttons re-theme without
       per-view edits).

   Selected via `data-theme="<key>"` on <html>. `data-bs-theme="light|dark"`
   set alongside so Bootstrap's own dark adjustments kick in.

   Critical fix: --ems-primary is the BRAND colour. --ems-success is the
   POSITIVE-METRIC colour (saving %, online status, milestone hit). Earlier
   this file conflated them, which is why CCL ended up green when it should
   be red. They're now strictly separate.
   ============================================================ */

/* ── Default (unbranded CCL EMS — neutral slate-blue, distributor-agnostic) ── */
:root,
html[data-theme="default_light"] {
  color-scheme: light;
  --ems-bg: #F8FAFC;        --ems-surface: #FFFFFF;     --ems-surface-alt: #F1F5F9;  --ems-border: #E2E8F0;
  --ems-primary: #2563EB;   --ems-primary-dim: rgba(37,99,235,.10);  --ems-secondary: #475569;
  --ems-text: #0F172A;      --ems-text-secondary: #475569; --ems-text-muted: #94A3B8;
  --ems-danger: #DC2626;    --ems-warning: #D97706;     --ems-success: #16A34A;
  --ems-online: #16A34A;    --ems-offline: #DC2626;     --ems-heating: #EA580C;  --ems-cooling: #0EA5E9; --ems-lighting: #CA8A04;
  --ems-sidebar: #1E2A3A;   --ems-sidebar-text: #CDD5E0; --ems-topbar: #FFFFFF;  --ems-topbar-text: #0F172A;
  --bs-body-bg: #F8FAFC;    --bs-body-color: #0F172A;   --bs-border-color: #E2E8F0;
  --bs-primary: #2563EB;    --bs-primary-rgb: 37,99,235;
  --bs-success: #16A34A;    --bs-danger: #DC2626;       --bs-warning: #D97706;
  --bs-card-bg: #FFFFFF;    --bs-card-border-color: #E2E8F0;
  --bs-secondary-color: #475569; --bs-tertiary-bg: #F1F5F9; --bs-secondary-bg: #F1F5F9;
}

html[data-theme="default_dark"] {
  color-scheme: dark;
  --ems-bg: #0A0F1A;        --ems-surface: #111827;     --ems-surface-alt: #1C2535;  --ems-border: #1E2D40;
  --ems-primary: #5DA0DB;   --ems-primary-dim: rgba(93,160,219,.18); --ems-secondary: #64748B;
  --ems-text: #F1F5F9;      --ems-text-secondary: #94A3B8; --ems-text-muted: #475569;
  --ems-danger: #EF4444;    --ems-warning: #F59E0B;     --ems-success: #22C55E;
  --ems-online: #22C55E;    --ems-offline: #EF4444;     --ems-heating: #F97316;  --ems-cooling: #38BDF8; --ems-lighting: #FBBF24;
  --ems-sidebar: #111827;   --ems-sidebar-text: #94A3B8; --ems-topbar: #111827;  --ems-topbar-text: #F1F5F9;
  --bs-body-bg: #0A0F1A;    --bs-body-color: #F1F5F9;   --bs-border-color: #1E2D40;
  --bs-primary: #5DA0DB;    --bs-primary-rgb: 93,160,219;
  --bs-success: #22C55E;    --bs-danger: #EF4444;       --bs-warning: #F59E0B;
  --bs-card-bg: #111827;    --bs-card-border-color: #1E2D40;
  --bs-emphasis-color: #F1F5F9; --bs-secondary-color: #94A3B8;
  --bs-tertiary-bg: #1C2535; --bs-secondary-bg: #1C2535;
}

/* ── Clarke Controls (the real CCL brand — red #DB1F26 + blue #1E73BE) ── */
html[data-theme="ccl_light"] {
  color-scheme: light;
  --ems-bg: #FFFFFF;        --ems-surface: #FFFFFF;     --ems-surface-alt: #F4F5F7;  --ems-border: #E6E8EC;
  --ems-primary: #DB1F26;   --ems-primary-dim: rgba(219,31,38,.10);  --ems-secondary: #1E73BE;
  --ems-text: #2C2C2C;      --ems-text-secondary: #5A5A5A; --ems-text-muted: #8D8D8D;
  --ems-danger: #DB1F26;    --ems-warning: #B06B00;     --ems-success: #1F7A3D;
  --ems-online: #1F7A3D;    --ems-offline: #DB1F26;     --ems-heating: #EA580C;  --ems-cooling: #1E73BE; --ems-lighting: #CA8A04;
  --ems-sidebar: #044769;   --ems-sidebar-text: #CDD5E0; --ems-topbar: #FFFFFF;  --ems-topbar-text: #2C2C2C;
  --bs-body-bg: #FFFFFF;    --bs-body-color: #2C2C2C;   --bs-border-color: #E6E8EC;
  --bs-primary: #DB1F26;    --bs-primary-rgb: 219,31,38;
  --bs-success: #1F7A3D;    --bs-danger: #DB1F26;       --bs-warning: #B06B00;
  --bs-card-bg: #FFFFFF;    --bs-card-border-color: #E6E8EC;
  --bs-secondary-color: #5A5A5A; --bs-tertiary-bg: #F4F5F7; --bs-secondary-bg: #F4F5F7;
}

html[data-theme="ccl_dark"] {
  color-scheme: dark;
  --ems-bg: #0E1722;        --ems-surface: #142434;     --ems-surface-alt: #1B2F44;  --ems-border: #243A52;
  --ems-primary: #E73843;   --ems-primary-dim: rgba(231,56,67,.18); --ems-secondary: #5DA0DB;
  --ems-text: #F1F5F9;      --ems-text-secondary: #94A3B8; --ems-text-muted: #5E7388;
  --ems-danger: #EF4444;    --ems-warning: #F59E0B;     --ems-success: #22C55E;
  --ems-online: #22C55E;    --ems-offline: #EF4444;     --ems-heating: #F97316;  --ems-cooling: #5DA0DB; --ems-lighting: #FBBF24;
  --ems-sidebar: #044769;   --ems-sidebar-text: #CDD5E0; --ems-topbar: #142434;  --ems-topbar-text: #F1F5F9;
  --bs-body-bg: #0E1722;    --bs-body-color: #F1F5F9;   --bs-border-color: #243A52;
  --bs-primary: #E73843;    --bs-primary-rgb: 231,56,67;
  --bs-success: #22C55E;    --bs-danger: #EF4444;       --bs-warning: #F59E0B;
  --bs-card-bg: #142434;    --bs-card-border-color: #243A52;
  --bs-emphasis-color: #F1F5F9; --bs-secondary-color: #94A3B8;
  --bs-tertiary-bg: #1B2F44; --bs-secondary-bg: #1B2F44;
}

/* ── Tansun Controls (real Tansun brand — dark brown #5E493A + gold #C19E54) ── */
html[data-theme="tansun_light"] {
  color-scheme: light;
  --ems-bg: #FFFFFF;        --ems-surface: #FFFFFF;     --ems-surface-alt: #F3EEE4;  --ems-border: #E4DDD0;
  --ems-primary: #5E493A;   --ems-primary-dim: rgba(94,73,58,.10); --ems-secondary: #C19E54;
  --ems-text: #2A2520;      --ems-text-secondary: #5E574D; --ems-text-muted: #948A7A;
  --ems-danger: #B13A2A;    --ems-warning: #C19E54;     --ems-success: #2F7A3D;
  --ems-online: #2F7A3D;    --ems-offline: #B13A2A;     --ems-heating: #C19E54;  --ems-cooling: #0047B2; --ems-lighting: #C19E54;
  --ems-sidebar: #1A1410;   --ems-sidebar-text: #C19E54; --ems-topbar: #FFFFFF;  --ems-topbar-text: #2A2520;
  --bs-body-bg: #FFFFFF;    --bs-body-color: #2A2520;   --bs-border-color: #E4DDD0;
  --bs-primary: #5E493A;    --bs-primary-rgb: 94,73,58;
  --bs-success: #2F7A3D;    --bs-danger: #B13A2A;       --bs-warning: #C19E54;
  --bs-card-bg: #FFFFFF;    --bs-card-border-color: #E4DDD0;
  --bs-secondary-color: #5E574D; --bs-tertiary-bg: #F3EEE4; --bs-secondary-bg: #F3EEE4;
}

html[data-theme="tansun_dark"] {
  color-scheme: dark;
  --ems-bg: #120D0A;        --ems-surface: #1C1410;     --ems-surface-alt: #261D16;  --ems-border: #3A2820;
  --ems-primary: #8A6F30;   --ems-primary-dim: rgba(138,111,48,.18); --ems-secondary: #C19E54;
  --ems-text: #FEF3E2;      --ems-text-secondary: #C4956A; --ems-text-muted: #6B4F38;
  --ems-danger: #EF4444;    --ems-warning: #C19E54;     --ems-success: #22C55E;
  --ems-online: #22C55E;    --ems-offline: #EF4444;     --ems-heating: #F97316;  --ems-cooling: #5DA0DB; --ems-lighting: #C19E54;
  --ems-sidebar: #1C1410;   --ems-sidebar-text: #C4956A; --ems-topbar: #1C1410;  --ems-topbar-text: #FEF3E2;
  --bs-body-bg: #120D0A;    --bs-body-color: #FEF3E2;   --bs-border-color: #3A2820;
  --bs-primary: #8A6F30;    --bs-primary-rgb: 138,111,48;
  --bs-success: #22C55E;    --bs-danger: #EF4444;       --bs-warning: #C19E54;
  --bs-card-bg: #1C1410;    --bs-card-border-color: #3A2820;
  --bs-emphasis-color: #FEF3E2; --bs-secondary-color: #C4956A;
  --bs-tertiary-bg: #261D16; --bs-secondary-bg: #261D16;
}

/* ── Component theming — wires the --ems-* tokens above into Bootstrap
   components (cards, tables, dropdowns, modals, inputs) so dark variants are
   clean. Deliberately does NOT touch `.bg-light` / `.text-dark` utilities
   (used for light-on-coloured chips like `badge bg-warning text-dark`). */
.card { --bs-card-bg: var(--ems-surface); --bs-card-border-color: var(--ems-border); color: var(--ems-text); }
.card-header { background-color: var(--ems-surface-alt); border-bottom-color: var(--ems-border); color: var(--ems-text); }
.card-footer { background-color: var(--ems-surface-alt); border-top-color: var(--ems-border); }
.list-group-item { background-color: var(--ems-surface); color: var(--ems-text); border-color: var(--ems-border); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ems-text); --bs-table-border-color: var(--ems-border); }
.dropdown-menu { background-color: var(--ems-surface); border-color: var(--ems-border); }
.dropdown-item { color: var(--ems-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ems-surface-alt); color: var(--ems-text); }
.dropdown-header { color: var(--ems-text-muted); }
.dropdown-divider { border-top-color: var(--ems-border); }
.modal-content { background-color: var(--ems-surface); color: var(--ems-text); border-color: var(--ems-border); }
.modal-header, .modal-footer { border-color: var(--ems-border); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ems-text-muted); }
.form-control, .form-select, .input-group-text {
  background-color: var(--ems-surface); color: var(--ems-text); border-color: var(--ems-border);
}
.form-control::placeholder { color: var(--ems-text-muted); }
.form-control:focus, .form-select:focus { background-color: var(--ems-surface); color: var(--ems-text); }