/* ============================================================
   DARK MODE — Theme overrides and toggle switch
   ============================================================ */

.dark-mode {
  --color-text: var(--color-light);
  --color-background: var(--color-dark-background);
  --color-background2: var(--color-dark-background);
  --color-image: var(--img-light);
}

/* Core page backgrounds — !important beats Bootstrap body{bg:#fff} and
   DataTables stripe rules so every visible surface goes dark. */
html.dark-mode,
html.dark-mode body {
  background-color: #202020 !important;
  color: #e0e0e0 !important;
}

/* Outer structural containers — transparent so the body colour
   shows through and there's no lighter band on left/right.       */
html.dark-mode .page-container,
html.dark-mode #tablePage,
html.dark-mode #table-wrap {
  background-color: transparent !important;
  color: #e0e0e0 !important;
}

/* The DataTables card itself keeps a slightly lighter surface */
html.dark-mode .dataTables_wrapper {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

/* DataTables row striping — DataTables CSS sets odd/even row colours;
   override them so rows are transparent over the dark wrapper. */
html.dark-mode table.dataTable tbody tr,
html.dark-mode table.dataTable tbody tr.odd,
html.dark-mode table.dataTable tbody tr.even,
html.dark-mode table.dataTable.stripe tbody tr.odd,
html.dark-mode table.dataTable.display tbody tr.odd,
html.dark-mode table.dataTable.hover tbody tr:hover,
html.dark-mode table.dataTable.display tbody tr:hover {
  background-color: transparent !important;
}

/* Table header */
html.dark-mode table.dataTable thead th,
html.dark-mode table.dataTable thead td {
  background-color: transparent !important;
  color: #e0e0e0 !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

/* DataTables controls (search, length, pagination) */
html.dark-mode .dataTables_filter input,
html.dark-mode .dataTables_length select {
  background-color: #333 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.2) !important;
}

html.dark-mode .dataTables_info,
html.dark-mode .dataTables_filter label,
html.dark-mode .dataTables_length label {
  color: #bbb !important;
}

/* Upper header bar */
html.dark-mode .upper-header {
  background-color: #202020 !important;
  color: #e0e0e0 !important;
}

/* Invert logo assets in dark mode */
.logo-table,
.page-container-left,
.page-container-right {
  -webkit-filter: invert(var(--color-image));
}

.logo-table { opacity: .8; }

/* Invert dark commodity icons in dark mode */
html.dark-mode img[src*="cl=f" i] {
  filter: invert(1);
}

/* Skeleton loader */
html.dark-mode #table-skeleton {
  background: rgba(32, 32, 32, 0.9) !important;
}
html.dark-mode #table-skeleton .sk-row {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  background-size: 200% 100%;
}

/* Upper header links */
html.dark-mode .upper-header a:hover {
  background-color: #333 !important;
  color: #e0e0e0 !important;
}
html.dark-mode .upper-block {
  color: #e0e0e0 !important;
}
html.dark-mode .header a:hover {
  background-color: #333 !important;
  color: #e0e0e0 !important;
}

/* Footer — already dark by default with liquid glass redesign,
   just darken slightly for dark mode consistency */
html.dark-mode .webintern-footer-inner {
  background:
    radial-gradient(ellipse at 15% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
    linear-gradient(170deg, #0a0618 0%, #0d1117 50%, #0a0f1a 100%) !important;
}
html.dark-mode .tt-copy2 {
  background: #000 !important;
}

/* Select dropdowns */
html.dark-mode .unit-select,
html.dark-mode .filter-select,
html.dark-mode .country-select,
html.dark-mode .sector-select {
  background-color: #333 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .unit-select:hover,
html.dark-mode .filter-select:hover,
html.dark-mode .country-select:hover,
html.dark-mode .sector-select:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

html.dark-mode .unit-select:focus,
html.dark-mode .filter-select:focus,
html.dark-mode .country-select:focus,
html.dark-mode .sector-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* Pagination dark hover */
html.dark-mode .pagination a:hover:not(.active),
html.dark-mode .pagination2 a:hover:not(.active) {
  background-color: #444 !important;
  color: #e0e0e0 !important;
}

/* Lower header border */
html.dark-mode .lower-header {
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

/* DataTables wrapper border */
html.dark-mode .dataTables_wrapper {
  border-color: rgba(255,255,255,0.12) !important;
}

/* Asset page dark mode overrides */
html.dark-mode .asset-wrap {
  --bg: #0b1220; --card: #0f172a; --border: rgba(148, 163, 184, .18);
  --text: rgba(226, 232, 240, .92); --muted: rgba(226, 232, 240, .62); --grid: rgba(226, 232, 240, .12);
  --accent: #60a5fa; --accent2: #a78bfa; --shadow: 0 10px 30px rgba(0,0,0,.45);
  --up: #22c55e; --down: #ef4444;
}

/* ── Flippenings bar dark mode ─────────────────────────────────── */
html.dark-mode .flip-label {
  color: rgba(255, 255, 255, 0.65) !important;
}
html.dark-mode .flip-pct {
  color: #e0e0e0 !important;
}
html.dark-mode .flip-bar {
  background: rgba(255, 255, 255, 0.12) !important;
}
html.dark-mode .flippenings-wrap {
  background: #252525 !important;
}

/* ── Legacy switch elements — kept for any residual references ── */
.switch, .darkMode-slider, .darkMode-text { display: none !important; }

/* ── Dark mode icon toggle button ───────────────────────────
   Light mode  → glass circle, moon icon  (= OFF / inactive)
   Dark mode   → solid amber fill, sun icon (= ON  / pressed)
   The filled amber button is an unambiguous "this is on" signal.
   ──────────────────────────────────────────────────────────── */

.dark-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* Light mode: subtle glass — looks "off" / inactive */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
              color 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dark-mode-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}

.dark-mode-btn:active {
  transform: scale(0.92);
}

.dark-mode-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Icon sizing */
.dm-icon {
  width: 17px;
  height: 17px;
  pointer-events: none;
}

/* Light mode: show moon, hide sun */
.dm-icon-moon { display: block; }
.dm-icon-sun  { display: none;  }

/* Dark mode: show sun, hide moon */
html.dark-mode .dm-icon-moon { display: none;  }
html.dark-mode .dm-icon-sun  { display: block; }

/* Dark mode: solid amber fill = clearly "pressed / on"
   Looks like a lit button — no ambiguity about the current state. */
html.dark-mode .dark-mode-btn {
  background: #fbbf24;
  border-color: #f59e0b;
  color: #1c1007;                   /* dark icon against amber */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}

html.dark-mode .dark-mode-btn:hover {
  background: #fcd34d;
  border-color: #fbbf24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
              inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.6));
}