/* Energy Manager - colour themes (site + central).
   <html data-theme="light|dark" data-skin="<id>">: data-theme picks the light or dark base
   (status colours, chart series), data-skin re-colours surfaces, text, grid, navigation and accent.
   Chart series / media / status colours are the validated base palettes and are not changed here.
   Selectors use :root[data-theme][data-skin] so they win over the base light/dark rules.
   To add a theme: add a block here and an entry in UI.THEMES (ui.js). */

/* ---------------------------------------------------------------- Green Dark */
:root[data-theme][data-skin="green-dark"] {
  --emc-page: #0b1410; --emc-surface: #111d17; --emc-surface-2: #17261e;
  --emc-ink: #e8f3ec; --emc-ink-2: #b5c9bc; --emc-muted: #82998c; --emc-axis-text: #95ab9e;
  --emc-grid: #1f3128; --emc-axis: #33503f; --emc-border: rgba(160, 230, 190, 0.12);
  --emc-null: #1a2a21; --emc-track: #1f3128; --emc-tip-bg: #17261e; --emc-focus: #4fd08a;
  --emc-band: rgba(160, 230, 190, 0.05); --emc-brush: rgba(47, 191, 113, 0.18);
  --ui-accent: #2fbf71; --ui-accent-ink: #04140b; --ui-accent-soft: rgba(47, 191, 113, 0.16);
  --ui-nav-bg: #07100c; --ui-nav-ink: #c3d8cb; --ui-nav-ink-2: #7e9888; --ui-nav-hover: rgba(47, 191, 113, 0.10);
}
/* ---------------------------------------------------------------- Green Light */
:root[data-theme][data-skin="green-light"] {
  --emc-page: #f3f8f4; --emc-surface: #fbfdfb; --emc-surface-2: #e8f1ea;
  --emc-ink: #0c1a12; --emc-ink-2: #3f5448; --emc-muted: #6a8174; --emc-axis-text: #5f766a;
  --emc-grid: #dce8df; --emc-axis: #b7cbbd; --emc-border: rgba(12, 60, 32, 0.12);
  --emc-null: #e6efe8; --emc-track: #e1ebe3; --emc-focus: #13804a; --emc-brush: rgba(19, 128, 74, 0.12);
  --ui-accent: #13804a; --ui-accent-ink: #ffffff; --ui-accent-soft: rgba(19, 128, 74, 0.10);
  --ui-nav-bg: #0f3d2a; --ui-nav-ink: #cfe3d6; --ui-nav-ink-2: #8fb09c; --ui-nav-hover: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- Midnight Blue */
:root[data-theme][data-skin="midnight"] {
  --emc-page: #0a1020; --emc-surface: #111a2e; --emc-surface-2: #18233b;
  --emc-ink: #e8eefb; --emc-ink-2: #b3c0d9; --emc-muted: #8190ac; --emc-axis-text: #95a2bd;
  --emc-grid: #1f2a44; --emc-axis: #33405e; --emc-border: rgba(170, 195, 255, 0.12);
  --emc-null: #172036; --emc-track: #1f2a44; --emc-tip-bg: #18233b; --emc-focus: #6ea4ff;
  --emc-band: rgba(170, 195, 255, 0.05);
  --ui-accent: #4c8dff; --ui-accent-ink: #06101f; --ui-accent-soft: rgba(76, 141, 255, 0.16);
  --ui-nav-bg: #070c18; --ui-nav-ink: #c2cde3; --ui-nav-ink-2: #7d8aa6; --ui-nav-hover: rgba(76, 141, 255, 0.10);
}
/* ---------------------------------------------------------------- Graphite */
:root[data-theme][data-skin="graphite"] {
  --emc-page: #18191b; --emc-surface: #202124; --emc-surface-2: #2a2b2f;
  --emc-ink: #f1f1f2; --emc-ink-2: #c4c5c9; --emc-muted: #8f9197; --emc-axis-text: #a2a4a9;
  --emc-grid: #303136; --emc-axis: #45474d; --emc-border: rgba(255, 255, 255, 0.11);
  --emc-null: #2a2b2f; --emc-track: #303136; --emc-tip-bg: #2a2b2f; --emc-focus: #8ab4f8;
  --ui-accent: #8ab4f8; --ui-accent-ink: #0b1420; --ui-accent-soft: rgba(138, 180, 248, 0.16);
  --ui-nav-bg: #111214; --ui-nav-ink: #cfd0d4; --ui-nav-ink-2: #8a8c92; --ui-nav-hover: rgba(255, 255, 255, 0.06);
}
/* ---------------------------------------------------------------- Amethyst (purple dark) */
:root[data-theme][data-skin="amethyst"] {
  --emc-page: #120e1a; --emc-surface: #1a1524; --emc-surface-2: #231c30;
  --emc-ink: #f1ecf8; --emc-ink-2: #c5bad6; --emc-muted: #938aa6; --emc-axis-text: #a59bb8;
  --emc-grid: #2a2238; --emc-axis: #3e3452; --emc-border: rgba(210, 185, 255, 0.12);
  --emc-null: #211a2d; --emc-track: #2a2238; --emc-tip-bg: #231c30; --emc-focus: #b594ff;
  --emc-band: rgba(210, 185, 255, 0.05);
  --ui-accent: #a078f0; --ui-accent-ink: #16101f; --ui-accent-soft: rgba(160, 120, 240, 0.18);
  --ui-nav-bg: #0c0913; --ui-nav-ink: #d3c9e3; --ui-nav-ink-2: #8f84a3; --ui-nav-hover: rgba(160, 120, 240, 0.10);
}
/* ---------------------------------------------------------------- Control Room (amber dark) */
:root[data-theme][data-skin="control-room"] {
  --emc-page: #0f0e0c; --emc-surface: #1a1814; --emc-surface-2: #24211b;
  --emc-ink: #f6efe2; --emc-ink-2: #cdbfa6; --emc-muted: #998d77; --emc-axis-text: #ab9f88;
  --emc-grid: #2c2821; --emc-axis: #453f33; --emc-border: rgba(255, 220, 160, 0.11);
  --emc-null: #221f19; --emc-track: #2c2821; --emc-tip-bg: #24211b; --emc-focus: #f0a020;
  --emc-band: rgba(255, 220, 160, 0.05); --emc-brush: rgba(240, 160, 32, 0.16);
  --ui-accent: #f0a020; --ui-accent-ink: #1a1206; --ui-accent-soft: rgba(240, 160, 32, 0.16);
  --ui-nav-bg: #0a0908; --ui-nav-ink: #ddd0b8; --ui-nav-ink-2: #968a74; --ui-nav-hover: rgba(240, 160, 32, 0.09);
}
/* ---------------------------------------------------------------- Petrol (teal light) */
:root[data-theme][data-skin="petrol"] {
  --emc-page: #f2f7f8; --emc-surface: #fbfdfd; --emc-surface-2: #e4eff1;
  --emc-ink: #0b1b1f; --emc-ink-2: #3d575d; --emc-muted: #66808a; --emc-axis-text: #5c767c;
  --emc-grid: #d9e7ea; --emc-axis: #b3cbd0; --emc-border: rgba(0, 60, 70, 0.12);
  --emc-null: #e3eef0; --emc-track: #dde9ec; --emc-focus: #00838f; --emc-brush: rgba(0, 131, 143, 0.12);
  --ui-accent: #00788a; --ui-accent-ink: #ffffff; --ui-accent-soft: rgba(0, 120, 138, 0.10);
  --ui-nav-bg: #00363d; --ui-nav-ink: #c6dfe2; --ui-nav-ink-2: #86aab0; --ui-nav-hover: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- Sand (warm light) */
:root[data-theme][data-skin="sand"] {
  --emc-page: #f7f3ea; --emc-surface: #fdfbf6; --emc-surface-2: #efe8da;
  --emc-ink: #1c1710; --emc-ink-2: #5a4f3e; --emc-muted: #857a65; --emc-axis-text: #7a6f5b;
  --emc-grid: #e7dfcd; --emc-axis: #cabda2; --emc-border: rgba(60, 40, 10, 0.12);
  --emc-null: #efe9dc; --emc-track: #ebe4d5; --emc-tip-bg: #fffdf8; --emc-focus: #a55a16; --emc-brush: rgba(165, 90, 22, 0.12);
  --ui-accent: #a55a16; --ui-accent-ink: #ffffff; --ui-accent-soft: rgba(165, 90, 22, 0.10);
  --ui-nav-bg: #3b2f20; --ui-nav-ink: #e6dac6; --ui-nav-ink-2: #a8977b; --ui-nav-hover: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- Rose (light) */
:root[data-theme][data-skin="rose"] {
  --emc-page: #faf5f6; --emc-surface: #fefcfc; --emc-surface-2: #f3e9eb;
  --emc-ink: #1d1114; --emc-ink-2: #5b454b; --emc-muted: #8a7277; --emc-axis-text: #7c666b;
  --emc-grid: #ecdfe2; --emc-axis: #d2bcc2; --emc-border: rgba(80, 20, 35, 0.11);
  --emc-null: #f1e7e9; --emc-track: #efe3e6; --emc-focus: #b03a5b; --emc-brush: rgba(176, 58, 91, 0.12);
  --ui-accent: #b03a5b; --ui-accent-ink: #ffffff; --ui-accent-soft: rgba(176, 58, 91, 0.10);
  --ui-nav-bg: #3a1622; --ui-nav-ink: #ecd3da; --ui-nav-ink-2: #b08b96; --ui-nav-hover: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- Ocean (blue light) */
:root[data-theme][data-skin="ocean"] {
  --emc-page: #f1f6fc; --emc-surface: #fbfdff; --emc-surface-2: #e4edf8;
  --emc-ink: #0a1624; --emc-ink-2: #3c5068; --emc-muted: #687d95; --emc-axis-text: #5d7189;
  --emc-grid: #d8e4f2; --emc-axis: #b2c6de; --emc-border: rgba(10, 40, 80, 0.12);
  --emc-null: #e3ecf7; --emc-track: #dde7f4; --emc-focus: #1463c9;
  --ui-accent: #1463c9; --ui-accent-ink: #ffffff; --ui-accent-soft: rgba(20, 99, 201, 0.10);
  --ui-nav-bg: #0b2a52; --ui-nav-ink: #cddcf0; --ui-nav-ink-2: #8aa4c6; --ui-nav-hover: rgba(255, 255, 255, 0.07);
}
/* ---------------------------------------------------------------- High Contrast (dark) */
:root[data-theme][data-skin="high-contrast"] {
  --emc-page: #000000; --emc-surface: #000000; --emc-surface-2: #121212;
  --emc-ink: #ffffff; --emc-ink-2: #ffffff; --emc-muted: #d6d6d6; --emc-axis-text: #e6e6e6;
  --emc-grid: #4d4d4d; --emc-axis: #9a9a9a; --emc-border: rgba(255, 255, 255, 0.55);
  --emc-null: #1c1c1c; --emc-track: #333333; --emc-tip-bg: #000000; --emc-focus: #ffd400;
  --emc-band: rgba(255, 255, 255, 0.10);
  --ui-accent: #ffd400; --ui-accent-ink: #000000; --ui-accent-soft: rgba(255, 212, 0, 0.20);
  --ui-nav-bg: #000000; --ui-nav-ink: #ffffff; --ui-nav-ink-2: #d6d6d6; --ui-nav-active: #ffd400;
  --ui-nav-hover: rgba(255, 212, 0, 0.14);
}
:root[data-skin="high-contrast"] .card, :root[data-skin="high-contrast"] .nav { outline: 1px solid rgba(255, 255, 255, 0.35); }
:root[data-skin="high-contrast"] .content a { text-decoration: underline; }

/* ---------------------------------------------------------------- theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-card { border: 2px solid var(--ui-border); border-radius: 10px; padding: 8px; background: var(--ui-surface); cursor: pointer;
  text-align: left; font: inherit; color: var(--ui-ink); display: flex; flex-direction: column; gap: 8px; }
.theme-card:hover { border-color: var(--ui-accent); }
.theme-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.theme-card.on { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.theme-card .pv { display: grid; grid-template-columns: 22% 1fr; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.25); }
.theme-card .pv .n { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; }
.theme-card .pv .n i { display: block; height: 4px; border-radius: 2px; opacity: .55; }
.theme-card .pv .n i.a { opacity: 1; }
.theme-card .pv .m { padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.theme-card .pv .m .c { flex: 1; border-radius: 4px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.theme-card .pv .m .c i { display: block; height: 4px; border-radius: 2px; }
.theme-card .nm { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.theme-card .nm small { font-weight: 400; color: var(--ui-muted); font-size: 11px; }
.theme-card .pv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* accent-coloured details of the navigation and toasts follow the theme */
:root[data-skin] .nav a.item.active { border-left-color: var(--ui-accent); }
:root[data-skin] .toast { border-left-color: var(--ui-accent); }