/**
 * D4D public pages palette (main / dataset / datamonitors)
 * Switch with: <html data-palette="green|blue">
 * Persisted via localStorage key: d4d-pak-palette
 *
 * GREEN = current live look (kept for rollback)
 * BLUE  = active executive / observatory look
 */

/* ---- GREEN (preserved / rollback) ---- */
html[data-palette="green"],
html:not([data-palette]) {
  --d4d-primary: #0D6B4C;
  --d4d-primary-deep: #084C37;
  --d4d-primary-mid: #1A7A5C;
  --d4d-primary-soft: #E4F2EC;
  --d4d-primary-soft-2: #c8e4d6;
  --d4d-accent: #E07A4F;
  --d4d-accent-soft: #FBE8DF;
  --d4d-accent-deep: #d46a3f;
  --d4d-teal: #2A9D8F;
  --d4d-ink: #14201B;
  --d4d-muted: #5A6B62;
  --d4d-line: #D5E0DA;
  --d4d-paper: #FFFFFF;
  --d4d-wash: #F3F6F4;
  --d4d-wash-2: #E8EFEA;
  --d4d-card: #FFFFFF;
  --d4d-shadow: 0 12px 32px rgba(13, 107, 76, 0.08);
  --d4d-shadow-lift: 0 18px 44px rgba(13, 107, 76, 0.16);
  --d4d-grad-mast: linear-gradient(120deg, #084C37 0%, #0D6B4C 48%, #1A7A5C 100%);
  --d4d-grad-footer: linear-gradient(135deg, #084C37 0%, #0D6B4C 50%, #1A7A5C 100%);
  --d4d-grad-monitor: linear-gradient(120deg, #084C37 0%, #0D6B4C 42%, #2A9D8F 100%);
  --d4d-grad-accent-btn: linear-gradient(135deg, #E07A4F, #d46a3f);
  --d4d-mesh-a: rgba(13, 107, 76, 0.14);
  --d4d-mesh-b: rgba(224, 122, 79, 0.10);
  --d4d-mesh-c: rgba(42, 157, 143, 0.06);
  --d4d-hc-1: #0D6B4C;
  --d4d-hc-2: #E07A4F;
  --d4d-hc-3: #2A9D8F;
  --d4d-hc-4: #E9C46A;
  --d4d-hc-5: #264653;
  --d4d-hc-6: #F4A261;
  --d4d-hc-7: #1B4332;
  --d4d-hc-8: #76C893;
  --d4d-hc-9: #BC4749;
  --d4d-hc-10: #52B788;
}

/* Dark overrides for green palette */
html[data-palette="green"][data-theme="dark"],
html:not([data-palette])[data-theme="dark"] {
  --d4d-primary: #3DDC97;
  --d4d-primary-deep: #071A14;
  --d4d-primary-mid: #134032;
  --d4d-primary-soft: #0E2A20;
  --d4d-primary-soft-2: #134032;
  --d4d-accent: #F4A261;
  --d4d-accent-soft: #2A1F14;
  --d4d-accent-deep: #E07A4F;
  --d4d-teal: #5EEAD4;
  --d4d-ink: #E8F5EF;
  --d4d-muted: #8BA89A;
  --d4d-line: #1E3A2E;
  --d4d-paper: #071A14;
  --d4d-wash: #071A14;
  --d4d-wash-2: #0E2A20;
  --d4d-card: #0E2A20;
  --d4d-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  --d4d-shadow-lift: 0 20px 48px rgba(0, 0, 0, 0.5);
  --d4d-grad-mast: linear-gradient(120deg, #041510 0%, #0E2A20 55%, #134032 100%);
  --d4d-grad-footer: linear-gradient(135deg, #041510 0%, #0E2A20 55%, #134032 100%);
  --d4d-grad-monitor: linear-gradient(120deg, #041510 0%, #0E2A20 50%, #1a4d3c 100%);
  --d4d-mesh-a: rgba(61, 220, 151, 0.10);
  --d4d-mesh-b: rgba(94, 234, 212, 0.06);
  --d4d-mesh-c: rgba(224, 122, 79, 0.05);
}

/* ---- BLUE (active default) ---- */
html[data-palette="blue"] {
  --d4d-primary: #0B3D91;
  --d4d-primary-deep: #072A63;
  --d4d-primary-mid: #0A6FA8;
  --d4d-primary-soft: #E6F0FA;
  --d4d-primary-soft-2: #D0E4F7;
  --d4d-accent: #009EDB;
  --d4d-accent-soft: #E6F6FC;
  --d4d-accent-deep: #0077A8;
  --d4d-teal: #3DC4F5;
  --d4d-ink: #0F172A;
  --d4d-muted: #5B6B7C;
  --d4d-line: #D7E2EC;
  --d4d-paper: #FFFFFF;
  --d4d-wash: #F4F8FC;
  --d4d-wash-2: #EAF1F8;
  --d4d-card: #FFFFFF;
  --d4d-shadow: 0 12px 32px rgba(11, 61, 145, 0.08);
  --d4d-shadow-lift: 0 18px 44px rgba(11, 61, 145, 0.16);
  --d4d-grad-mast: linear-gradient(120deg, #072A63 0%, #0B3D91 48%, #0A6FA8 100%);
  --d4d-grad-footer: linear-gradient(135deg, #072A63 0%, #0B3D91 50%, #0A6FA8 100%);
  --d4d-grad-monitor: linear-gradient(120deg, #072A63 0%, #0B3D91 42%, #009EDB 100%);
  --d4d-grad-accent-btn: linear-gradient(135deg, #009EDB, #0077A8);
  --d4d-mesh-a: rgba(11, 61, 145, 0.12);
  --d4d-mesh-b: rgba(0, 158, 219, 0.10);
  --d4d-mesh-c: rgba(61, 196, 245, 0.06);
  --d4d-hc-1: #0B3D91;
  --d4d-hc-2: #009EDB;
  --d4d-hc-3: #4FA3FF;
  --d4d-hc-4: #F7A35C;
  --d4d-hc-5: #434348;
  --d4d-hc-6: #90ED7D;
  --d4d-hc-7: #8085E9;
  --d4d-hc-8: #F15C80;
  --d4d-hc-9: #E4D354;
  --d4d-hc-10: #2B908F;
}

html[data-palette="blue"][data-theme="dark"] {
  --d4d-primary: #4FA3FF;
  --d4d-primary-deep: #0A1628;
  --d4d-primary-mid: #0C2748;
  --d4d-primary-soft: #12233A;
  --d4d-primary-soft-2: #1A2B3D;
  --d4d-accent: #3DC4F5;
  --d4d-accent-soft: #123048;
  --d4d-accent-deep: #009EDB;
  --d4d-teal: #56CCF2;
  --d4d-ink: #E8EEF6;
  --d4d-muted: #9AA8B8;
  --d4d-line: #243447;
  --d4d-paper: #0A1628;
  --d4d-wash: #0D1B2E;
  --d4d-wash-2: #12233A;
  --d4d-card: #12233A;
  --d4d-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  --d4d-shadow-lift: 0 20px 48px rgba(0, 0, 0, 0.5);
  --d4d-grad-mast: linear-gradient(120deg, #06101C 0%, #0C2748 55%, #0A4A6E 100%);
  --d4d-grad-footer: linear-gradient(135deg, #06101C 0%, #0C2748 55%, #0A4A6E 100%);
  --d4d-grad-monitor: linear-gradient(120deg, #06101C 0%, #0C2748 50%, #0A4A6E 100%);
  --d4d-mesh-a: rgba(79, 163, 255, 0.12);
  --d4d-mesh-b: rgba(61, 196, 245, 0.08);
  --d4d-mesh-c: rgba(11, 61, 145, 0.15);
}

/* Bridge aliases — beat page-level :root / [data-theme] token overrides */
html,
html[data-palette],
html[data-theme],
html[data-palette][data-theme] {
  /* main.php */
  --green: var(--d4d-primary);
  --green-deep: var(--d4d-primary-deep);
  --green-soft: var(--d4d-primary-soft);
  --accent: var(--d4d-accent);
  --accent-soft: var(--d4d-accent-soft);
  --ink: var(--d4d-ink);
  --muted: var(--d4d-muted);
  --line: var(--d4d-line);
  --paper: var(--d4d-paper);
  --wash: var(--d4d-wash);
  --wash-2: var(--d4d-wash-2);
  --card: var(--d4d-card);
  --shadow: var(--d4d-shadow);
  --shadow-lift: var(--d4d-shadow-lift);
  --success: var(--d4d-primary);
  --mast-fg: var(--d4d-ink);
  --mast-muted: var(--d4d-muted);

  /* dataset.php */
  --primary-color: var(--d4d-primary);
  --primary-deep: var(--d4d-primary-deep);
  --accent-cyan: var(--d4d-teal);
  --accent-teal: var(--d4d-primary);
  --accent-amber: var(--d4d-accent);
  --accent-violet: var(--d4d-teal);
  --light-bg: var(--d4d-wash);
  --surface: var(--d4d-card);
  --border-soft: var(--d4d-line);
  --text-muted: var(--d4d-muted);

  /* datamonitor.php */
  --wdi-ink: var(--d4d-ink);
  --wdi-navy: var(--d4d-primary-deep);
  --wdi-steel: var(--d4d-primary);
  --wdi-sand: var(--d4d-wash);
  --wdi-paper: var(--d4d-wash-2);
  --wdi-line: var(--d4d-line);
  --wdi-accent: var(--d4d-accent);
  --wdi-accent-soft: var(--d4d-accent-soft);
  --wdi-muted: var(--d4d-muted);
  --wdi-ok: var(--d4d-primary);
}

/* Shared theme toggle (dataset / datamonitor mast actions) */
.d4d-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.d4d-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: scale(1.04);
}
.d4d-theme-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* Shared dark surfaces for explorer + monitor pages */
html[data-theme="dark"] body {
  color: var(--d4d-ink);
  background-color: var(--d4d-wash);
}
html[data-theme="dark"] .explorer-chart-card,
html[data-theme="dark"] .explorer-panel,
html[data-theme="dark"] .domain-card,
html[data-theme="dark"] .wdi-flyout-panel,
html[data-theme="dark"] .wdi-rail,
html[data-theme="dark"] .wdi-panel,
html[data-theme="dark"] .wdi-main,
html[data-theme="dark"] .wdi-pane,
html[data-theme="dark"] .wdi-empty,
html[data-theme="dark"] .wdi-hero,
html[data-theme="dark"] .wdi-viz,
html[data-theme="dark"] .wdi-meta-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content {
  background: var(--d4d-card) !important;
  background-color: var(--d4d-card) !important;
  color: var(--d4d-ink);
  border-color: var(--d4d-line) !important;
}
html[data-theme="dark"] .wdi-rail-head,
html[data-theme="dark"] .wdi-filters-panel-head,
html[data-theme="dark"] .wdi-pane-head,
html[data-theme="dark"] .wdi-meta-bar {
  background: linear-gradient(180deg, var(--d4d-card) 0%, var(--d4d-wash-2) 100%) !important;
  border-color: var(--d4d-line) !important;
  color: var(--d4d-ink);
}
html[data-theme="dark"] .wdi-rail-head h2,
html[data-theme="dark"] .wdi-filters-panel-head h2,
html[data-theme="dark"] .wdi-pane-head h2,
html[data-theme="dark"] .hdg,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
  color: var(--d4d-ink) !important;
}
html[data-theme="dark"] .wdi-rail-head p,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .wdi-muted {
  color: var(--d4d-muted) !important;
}
html[data-theme="dark"] .wdi-pin-btn,
html[data-theme="dark"] .wdi-geo-tab,
html[data-theme="dark"] .wdi-ind-item,
html[data-theme="dark"] .wdi-chip,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: var(--d4d-wash) !important;
  color: var(--d4d-ink) !important;
  border-color: var(--d4d-line) !important;
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown {
  background-color: var(--d4d-card) !important;
  color: var(--d4d-ink) !important;
  border-color: var(--d4d-line) !important;
}
html[data-theme="dark"] .select2-container--bootstrap .select2-selection__rendered,
html[data-theme="dark"] .select2-results__option {
  color: var(--d4d-ink) !important;
}
html[data-theme="dark"] .select2-results__option--highlighted,
html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
  background-color: var(--d4d-primary-soft) !important;
  color: var(--d4d-ink) !important;
}
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_filter label {
  color: var(--d4d-ink) !important;
  border-color: var(--d4d-line) !important;
}
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: var(--d4d-wash) !important;
}
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: var(--d4d-primary-soft) !important;
}
html[data-theme="dark"] .wdi-chart-legend {
  background: var(--d4d-card) !important;
  border-color: var(--d4d-line) !important;
  color: var(--d4d-ink);
}
html[data-theme="dark"] .wdi-chart-legend li:hover {
  background: var(--d4d-primary-soft) !important;
}
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer {
  background: var(--d4d-grad-footer) !important;
  color: #fff;
}