/* Dark theme overrides for slim.css (Bootstrap 4.1 / Slim template) and the
   third-party components loaded in the layouts. Load AFTER slim.css and
   curro.css. Active only when <html data-theme="dark"> (set by
   Content/theme.js). Phase 1: override layer, no changes to slim.css itself. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --dk-bg: #12151c;
  --dk-surface: #1b1f2a;
  --dk-surface-2: #232938;
  --dk-border: #2c3342;
  --dk-text: #c3c8d6;
  --dk-text-strong: #e8ebf2;
  --dk-text-muted: #8b92a6;
  --dk-link: #6ea8ff;
  --dk-hover: #262d3d;
}

/* ---------- base ---------- */
:root[data-theme="dark"] body {
  background-color: var(--dk-bg);
  color: var(--dk-text);
}
:root[data-theme="dark"] a { color: var(--dk-link); }
:root[data-theme="dark"] a.btn,
:root[data-theme="dark"] .dropdown-item,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .page-link { color: inherit; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6,
:root[data-theme="dark"] .h1, :root[data-theme="dark"] .h2, :root[data-theme="dark"] .h3,
:root[data-theme="dark"] .h4, :root[data-theme="dark"] .h5, :root[data-theme="dark"] .h6,
:root[data-theme="dark"] .tx-inverse,
:root[data-theme="dark"] .tx-gray-800,
:root[data-theme="dark"] .tx-gray-900,
:root[data-theme="dark"] .tx-black { color: var(--dk-text-strong); }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .tx-gray-500,
:root[data-theme="dark"] .tx-gray-600,
:root[data-theme="dark"] .tx-gray-700 { color: var(--dk-text-muted) !important; }
:root[data-theme="dark"] hr { border-color: var(--dk-border); }

/* ---------- layout shell ---------- */
:root[data-theme="dark"] .slim-mainpanel,
:root[data-theme="dark"] .slim-body,
:root[data-theme="dark"] #sidenavmain { background-color: var(--dk-bg); }
:root[data-theme="dark"] .slim-footer {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text-muted);
}
:root[data-theme="dark"] .slim-pageheader { background-color: transparent; }
:root[data-theme="dark"] .slim-pageheader .slim-pagetitle,
:root[data-theme="dark"] .slim-pagetitle { color: var(--dk-text-strong); }
:root[data-theme="dark"] .breadcrumb { background-color: transparent; }
:root[data-theme="dark"] .breadcrumb-item.active { color: var(--dk-text-muted); }

/* ---------- surfaces ---------- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .section-wrapper,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .jumbotron {
  background-color: var(--dk-surface) !important;
  color: var(--dk-text);
  border-color: var(--dk-border);
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .popover-header {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-text-strong);
}
:root[data-theme="dark"] .bd,
:root[data-theme="dark"] .bd-t, :root[data-theme="dark"] .bd-b,
:root[data-theme="dark"] .bd-l, :root[data-theme="dark"] .bd-r,
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom {
  border-color: var(--dk-border) !important;
}
:root[data-theme="dark"] .close { color: var(--dk-text-strong); text-shadow: none; }
:root[data-theme="dark"] .modal-backdrop { background-color: #000; }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus,
:root[data-theme="dark"] .list-group-item-action:hover { background-color: var(--dk-hover); color: var(--dk-text-strong); }
:root[data-theme="dark"] .dropdown-divider { border-color: var(--dk-border); }

/* ---------- forms ---------- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-text-strong);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .custom-select:focus {
  background-color: var(--dk-surface-2);
  color: var(--dk-text-strong);
  border-color: #4a7bd0;
}
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly] { background-color: var(--dk-surface); opacity: .75; }
:root[data-theme="dark"] ::placeholder { color: var(--dk-text-muted); opacity: 1; }
:root[data-theme="dark"] label { color: var(--dk-text); }

/* ---------- buttons (neutral ones only; coloured stay as is) ---------- */
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-default {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-text-strong);
}
:root[data-theme="dark"] .btn-light:hover,
:root[data-theme="dark"] .btn-secondary:hover { background-color: var(--dk-hover); color: #fff; }
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark { color: var(--dk-text); border-color: var(--dk-border); }
:root[data-theme="dark"] .btn-link { color: var(--dk-link); }

/* ---------- tables ---------- */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] table.dataTable,
:root[data-theme="dark"] table.dataTable tbody tr,
:root[data-theme="dark"] table.dataTable tbody td {
  background-color: transparent;
  color: var(--dk-text);
  border-color: var(--dk-border);
}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] table.dataTable thead td,
:root[data-theme="dark"] table.dataTable tfoot th,
:root[data-theme="dark"] table.dataTable tfoot td { border-color: var(--dk-border); }
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] table.dataTable thead th { color: var(--dk-text-strong); background-color: var(--dk-surface-2); }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
:root[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
:root[data-theme="dark"] table.dataTable.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
:root[data-theme="dark"] .table-hover tbody tr:hover,
:root[data-theme="dark"] table.dataTable.hover tbody tr:hover { background-color: var(--dk-hover); color: var(--dk-text-strong); }
:root[data-theme="dark"] table.dataTable tbody tr.selected > * { color: #fff; }
/* fixed header/columns need an opaque background so scrolled rows don't show through */
:root[data-theme="dark"] table.fixedHeader-floating,
:root[data-theme="dark"] table.dataTable.fixedHeader-floating thead th,
:root[data-theme="dark"] table.dataTable.fixedHeader-locked thead th,
:root[data-theme="dark"] .dtfc-fixed-left,
:root[data-theme="dark"] .dtfc-fixed-right,
:root[data-theme="dark"] table.dataTable tbody td.dtfc-fixed-start,
:root[data-theme="dark"] table.dataTable tbody td.dtfc-fixed-end,
:root[data-theme="dark"] table.dataTable thead th.dtfc-fixed-start,
:root[data-theme="dark"] table.dataTable thead th.dtfc-fixed-end { background-color: var(--dk-surface) !important; }
:root[data-theme="dark"] .dataTables_wrapper,
:root[data-theme="dark"] .dt-container,
:root[data-theme="dark"] .dataTables_info,
:root[data-theme="dark"] .dt-info,
:root[data-theme="dark"] .dataTables_length,
:root[data-theme="dark"] .dataTables_filter,
:root[data-theme="dark"] .dt-length,
:root[data-theme="dark"] .dt-search { color: var(--dk-text); }

/* ---------- navs, pagination, tabs ---------- */
:root[data-theme="dark"] .nav-tabs { border-color: var(--dk-border); }
:root[data-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--dk-surface);
  border-color: var(--dk-border) var(--dk-border) var(--dk-surface);
  color: var(--dk-text-strong);
}
:root[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--dk-border); }
:root[data-theme="dark"] .page-link,
:root[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text);
}
:root[data-theme="dark"] .page-item.active .page-link { background-color: #2563eb; border-color: #2563eb; color: #fff; }
:root[data-theme="dark"] .dataTables_paginate .paginate_button,
:root[data-theme="dark"] .dt-paging .dt-paging-button { color: var(--dk-text) !important; }

/* ---------- alerts / badges (soften pastel backgrounds) ---------- */
:root[data-theme="dark"] .alert { border-color: var(--dk-border); }
:root[data-theme="dark"] .alert-success { background-color: #12332a; color: #8be0c0; }
:root[data-theme="dark"] .alert-danger  { background-color: #3a1a1e; color: #f3a1a8; }
:root[data-theme="dark"] .alert-warning { background-color: #3a2e12; color: #f2d17a; }
:root[data-theme="dark"] .alert-info    { background-color: #14303a; color: #8fd3e8; }
:root[data-theme="dark"] .badge-light   { background-color: var(--dk-surface-2); color: var(--dk-text); }

/* ---------- Curro cards ---------- */
:root[data-theme="dark"] .card-curro,
:root[data-theme="dark"] .card-curro-dashboard { background-color: var(--dk-surface); color: var(--dk-text); }
:root[data-theme="dark"] .card-curro-dashboard-heading { color: #8fb4f0; }

/* ---------- sidenav / device notes panel ---------- */
:root[data-theme="dark"] .device-notes {
  background-color: var(--dk-surface);
  color: var(--dk-text);
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ---------- third party ---------- */
/* select2 */
:root[data-theme="dark"] .select2-container--default .select2-selection--single,
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple,
:root[data-theme="dark"] .select2-dropdown,
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-text-strong);
}
:root[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
:root[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--dk-text-strong); }
:root[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--dk-hover); }
:root[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--dk-hover); border-color: var(--dk-border); color: var(--dk-text-strong);
}
/* sweetalert2 */
:root[data-theme="dark"] .swal2-popup { background: var(--dk-surface); color: var(--dk-text); }
:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container { color: var(--dk-text-strong); }
/* jQuery UI (datepicker etc.) */
:root[data-theme="dark"] .ui-widget-content,
:root[data-theme="dark"] .ui-widget.ui-widget-content {
  background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text);
}
:root[data-theme="dark"] .ui-widget-header { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-strong); }
:root[data-theme="dark"] .ui-state-default,
:root[data-theme="dark"] .ui-widget-content .ui-state-default { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .ui-state-hover,
:root[data-theme="dark"] .ui-widget-content .ui-state-hover { background: var(--dk-hover); color: #fff; }
/* images that are dark-on-transparent logos can be flagged with .dark-invert */
:root[data-theme="dark"] img.dark-invert { filter: invert(1) hue-rotate(180deg); }

/* ---------- theme toggle button ---------- */
.theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ced4da;
  background: #fff;
  color: #343a40;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.theme-toggle:hover { filter: brightness(.95); }
:root[data-theme="dark"] .theme-toggle {
  background: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: #f5d76e;
}
@media print { .theme-toggle { display: none; } }

/* =====================================================================
   Phase 2
   ===================================================================== */

/* Tokens the views use via var(--cc-*, <light fallback>) in inline styles */
:root[data-theme="dark"] {
  --cc-surface: var(--dk-surface);
  --cc-bg: var(--dk-bg);
  --cc-ink: var(--dk-text-strong);
  --cc-alt: var(--dk-surface-2);
  --cc-row-alt: #202635;
  --cc-row-red: #3a1a1e;
  --cc-total-1: #38405f;
  --cc-total-2: #2c3352;
  --cc-total-3: #232a44;
}

/* ---------- header / navbar / sidebar (white in slim.css) ---------- */
:root[data-theme="dark"] .slim-header,
:root[data-theme="dark"] .slim-navbar {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
}
:root[data-theme="dark"] .slim-header .logo,
:root[data-theme="dark"] .slim-header .slim-logo a,
:root[data-theme="dark"] .slim-header-right .dropdown-link,
:root[data-theme="dark"] .slim-header-right .logged-user,
:root[data-theme="dark"] .slim-navbar .nav-link { background-color: var(--dk-surface); }
:root[data-theme="dark"] .slim-navbar .nav-link,
:root[data-theme="dark"] .slim-navbar .nav-link span { color: var(--dk-text); }
:root[data-theme="dark"] .slim-navbar .nav-item.active > .nav-link,
:root[data-theme="dark"] .slim-navbar .nav-link:hover { color: var(--dk-link); }
:root[data-theme="dark"] .slim-navbar .nav-sub,
:root[data-theme="dark"] .slim-navbar .sub-item,
:root[data-theme="dark"] .slim-navbar .mega-dropdown-menu,
:root[data-theme="dark"] .dropdown-menu .nav-link,
:root[data-theme="dark"] .slim-sidebar {
  background-color: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-text);
}
:root[data-theme="dark"] .slim-navbar .sub-link,
:root[data-theme="dark"] .slim-navbar .sub-item a,
:root[data-theme="dark"] .slim-navbar .nav-sub a { color: var(--dk-text); }
:root[data-theme="dark"] .slim-navbar .sub-link:hover,
:root[data-theme="dark"] .slim-navbar .sub-item a:hover,
:root[data-theme="dark"] .slim-navbar .nav-sub a:hover { color: var(--dk-link); background-color: var(--dk-hover); }

/* ---------- sidenav.css / dashboard-operations.css fixed whites ---------- */
:root[data-theme="dark"] .device-notes *[class*="device-notes__"] { border-color: var(--dk-border); }
:root[data-theme="dark"] .device-notes__header,
:root[data-theme="dark"] .device-notes__tabs button,
:root[data-theme="dark"] .device-notes th { background-color: var(--dk-surface); color: var(--dk-text-strong); }
:root[data-theme="dark"] .donut__hole { background: var(--dk-surface); }

/* ---------- page-level classes defined in <style> blocks of views ---------- */
:root[data-theme="dark"] .summary-tile,
:root[data-theme="dark"] .util-card,
:root[data-theme="dark"] .metric-chip { background: var(--dk-surface); color: var(--dk-text); }
:root[data-theme="dark"] .summary-tile .summary-label { color: var(--dk-text-muted); }
:root[data-theme="dark"] .consumer-track { background: var(--dk-surface-2); }

/* ---------- inline-styled white headers / black icons ---------- */
/* Inline white !important in views was rewritten to var(--cc-surface); these
   catch any that remain (inline !important cannot be beaten from a stylesheet). */
:root[data-theme="dark"] th.main_th { color: var(--dk-text-strong); }
:root[data-theme="dark"] i[style*="color: black"] { color: var(--dk-text-strong) !important; }

/* ---------- maps / canvases / iframes ---------- */
:root[data-theme="dark"] .leaflet-container { background: var(--dk-bg); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background: var(--dk-surface); color: var(--dk-text); }

/* ---------- Channel group report chips / pills ---------- */
:root[data-theme="dark"] .cg-id { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text-strong); }
:root[data-theme="dark"] .cg-btn { border-color: var(--dk-border); color: var(--dk-text); }
:root[data-theme="dark"] .cg-btn.cg-btn-primary { background: #16294a; border-color: #2f5ea8; color: #8fb4f0; }
:root[data-theme="dark"] .cg-pill-on  { background: #12332a; color: #8be0c0; }
:root[data-theme="dark"] .cg-pill-off { background: #3a1a1e; color: #f3a1a8; }
:root[data-theme="dark"] .cg-pill-oos { background: #16294a; color: #8fb4f0; }
:root[data-theme="dark"] .cg-ds,
:root[data-theme="dark"] .cg-meta { color: var(--dk-text-muted); }

/* Totals rows get their background inline (var(--cc-total-*)); make the text pop */
:root[data-theme="dark"] table.dataTable tbody td[style*="--cc-total"] { color: var(--dk-text-strong); }

/* ---------- Slim manager layout (Setup > Sites etc.) ---------- */
:root[data-theme="dark"] .manager-left .nav-link { background-color: var(--dk-surface); color: var(--dk-text-muted); }
:root[data-theme="dark"] .manager-left .nav-link::before { background-color: var(--dk-border); }
:root[data-theme="dark"] .manager-left .nav-link:hover,
:root[data-theme="dark"] .manager-left .nav-link:focus,
:root[data-theme="dark"] .manager-left .nav-link.active { background-color: var(--dk-hover); color: var(--dk-link); }
:root[data-theme="dark"] .card-contact,
:root[data-theme="dark"] .card-contact .card-img { background-color: var(--dk-surface); border-color: var(--dk-border); }
:root[data-theme="dark"] .card-contact .contact-name { color: var(--dk-text-strong); }
:root[data-theme="dark"] .select2-container--default .select2-results { background-color: var(--dk-surface-2); }

/* ---------- Operations / global dashboard (dashboard-operations.css) ---------- */
:root[data-theme="dark"] .dash-global {
  --dg-text: var(--dk-text-strong);
  --dg-muted: var(--dk-text-muted);
  --dg-line: var(--dk-border);
  --dg-track: var(--dk-surface-2);
  --dg-off: #7d869b;
}
:root[data-theme="dark"] .dash-global .stats-grid > [class*="col-"],
:root[data-theme="dark"] .card-dash-one .col-lg,
:root[data-theme="dark"] .card-dash-one [class*="col-"] { background-color: var(--dk-surface); color: var(--dk-text); }
:root[data-theme="dark"] .dash-global .kpi-icon--grey,
:root[data-theme="dark"] .dash-global .status-pill.status--offline,
:root[data-theme="dark"] .dash-global .icon-btn:hover,
:root[data-theme="dark"] .site-table thead th { background: var(--dk-surface-2); }
:root[data-theme="dark"] .dash-global .kpi-icon--green  { background: rgba(28,175,154,.2); }
:root[data-theme="dark"] .dash-global .kpi-icon--orange { background: rgba(244,153,23,.2); }
:root[data-theme="dark"] .dash-global .kpi-icon--red    { background: rgba(220,53,69,.22); }
:root[data-theme="dark"] .dash-global .kpi-icon--red .icon,
:root[data-theme="dark"] .dash-global .kpi-icon--orange .icon { filter: brightness(1.15); }