/* The desktop's dark theme (audit DES-12): Bootstrap 4 and the third-party pieces on the tokens.
 *
 * tokens.css holds the dark values (:root[data-theme="dark"]) and FleetMon's own CSS takes every colour from
 * the tokens (DES-2), so it turns dark by itself. Bootstrap 4.3.1, Leaflet and ApexCharts paint light colours of
 * their own; these rules put them on the tokens — only in the dark theme, so the light theme stays as it was.
 * Loaded after Bootstrap and base.css by every desktop shell (base, Search windows, info pages, manual).
 */

/* ---- Page, text, links ---- */
:root[data-theme="dark"] body { background-color: var(--surface-0); color: var(--text); }
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body { color: var(--text) !important; }
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-light { background-color: var(--surface-1) !important; }
:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-left,
:root[data-theme="dark"] .border-right { border-color: var(--line) !important; }
:root[data-theme="dark"] hr { border-top-color: var(--line); }
:root[data-theme="dark"] .btn-link { color: var(--accent); }
:root[data-theme="dark"] code { color: var(--prio-d-bg); }

/* A QR code stays dark on light (the landing page's phone card) */
:root[data-theme="dark"] .landing-qr { background: var(--qr-bg); }

/* ---- FleetMon pieces with a light colour of their own ---- */
/* The brand panel of the login and info pages: the light → dark brand gradient, darkened */
:root[data-theme="dark"] .auth-brand,
:root[data-theme="dark"] .info-header {
    background: linear-gradient(160deg, var(--accent-border) 0%, var(--chrome) 45%, var(--surface-1) 100%);
}
/* The A / B counts (Overview, Locations, the landing page, report alerts): dark ink on the bright fills */
:root[data-theme="dark"] .fm-count-a,
:root[data-theme="dark"] .fm-count-a .fm-count-n { color: var(--prio-a-fg); }
:root[data-theme="dark"] .fm-count-b,
:root[data-theme="dark"] .fm-count-b .fm-count-n { color: var(--prio-b-fg); }
/* Small boxes over a map or a page that were translucent white */
:root[data-theme="dark"] #location-updated,
:root[data-theme="dark"] #colorPick { background: color-mix(in srgb, var(--surface-1) 88%, transparent); color: var(--text-muted); }
:root[data-theme="dark"] .spinner-overlay,
:root[data-theme="dark"] .spinner-overlay-contained,
:root[data-theme="dark"] .counters-overlay { background: color-mix(in srgb, var(--surface-0) 80%, transparent); }

/* ---- Cards, lists ---- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item { background-color: var(--surface-1); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer { background-color: var(--surface-2); border-color: var(--line); }

/* ---- Tables ---- */
:root[data-theme="dark"] .table { color: var(--text); }
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table tbody + tbody,
:root[data-theme="dark"] .table-bordered,
:root[data-theme="dark"] .table-bordered th,
:root[data-theme="dark"] .table-bordered td { border-color: var(--line); }
:root[data-theme="dark"] .table .thead-light th { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--line); }
:root[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-2); }

/* ---- Forms ---- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .input-group-text {
    background-color: var(--surface-2); color: var(--text); border-color: var(--field-border);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .custom-select:focus { background-color: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .form-control::placeholder { color: var(--text-subtle); }
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .custom-select:disabled { background-color: var(--surface-3); color: var(--text-muted); }
/* Bootstrap draws the select's arrow as a dark SVG; a light one here */
:root[data-theme="dark"] .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23b4bfcf' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .custom-control-label::before { background-color: var(--surface-2); border-color: var(--field-border); }
:root[data-theme="dark"] .custom-switch .custom-control-label::after { background-color: var(--text-subtle); }
:root[data-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: var(--on-accent); }
:root[data-theme="dark"] select option { background-color: var(--surface-1); color: var(--text); }

/* ---- Buttons ---- */
:root[data-theme="dark"] .btn-light { background-color: var(--surface-3); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .btn-light:hover { background-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .btn-outline-secondary { color: var(--text-muted); border-color: var(--line-strong); }
:root[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
:root[data-theme="dark"] .btn-secondary { background-color: var(--surface-3); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .close { color: var(--text); text-shadow: none; }

/* ---- Menus, dialogs, tabs, pager ---- */
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .popover { background-color: var(--surface-1); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .dropdown-item { color: var(--text); }
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-3); color: var(--text); }
:root[data-theme="dark"] .dropdown-divider { border-top-color: var(--line); }
:root[data-theme="dark"] .dropdown-header { color: var(--text-subtle); }
:root[data-theme="dark"] .modal-content { background-color: var(--surface-1); border-color: var(--line-strong); color: var(--text); }
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { border-color: var(--line); }
:root[data-theme="dark"] .nav-tabs { border-bottom-color: var(--line); }
:root[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--line) var(--line) var(--line); }
:root[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--surface-1); color: var(--text); border-color: var(--line) var(--line) var(--surface-1);
}
:root[data-theme="dark"] .page-link { background-color: var(--surface-1); border-color: var(--line); }
:root[data-theme="dark"] .page-link:hover { background-color: var(--surface-3); border-color: var(--line); }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--surface-1); border-color: var(--line); color: var(--text-subtle); }
:root[data-theme="dark"] .page-item.active .page-link { color: var(--on-accent); }
:root[data-theme="dark"] .progress { background-color: var(--surface-3); }

/* ---- Bootstrap alerts on the message tokens ---- */
:root[data-theme="dark"] .alert-success { background-color: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
:root[data-theme="dark"] .alert-warning { background-color: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); }
:root[data-theme="dark"] .alert-danger { background-color: var(--error-bg); border-color: var(--error-line); color: var(--error-fg); }
:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-primary,
:root[data-theme="dark"] .alert-secondary,
:root[data-theme="dark"] .alert-light { background-color: var(--surface-2); border-color: var(--line-strong); color: var(--text); }

/* ---- Leaflet: dark map tiles (OpenStreetMap has no dark style without a key — inverted, the hues turned
        back), the satellite layer as it is; controls and popups on the tokens ---- */
:root[data-theme="dark"] .leaflet-container { background-color: var(--surface-0); }
:root[data-theme="dark"] .leaflet-container:not(.fm-map-satellite) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7);
}
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-control-layers,
:root[data-theme="dark"] .easy-button-button {
    background-color: var(--surface-1); color: var(--text); border-color: var(--line);
}
:root[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--surface-3); }
:root[data-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: var(--surface-2); color: var(--text-subtle); }
:root[data-theme="dark"] .leaflet-control-attribution { background-color: rgba(19, 26, 36, 0.75); color: var(--text-muted); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--accent); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip { background-color: var(--surface-1); color: var(--text); }
:root[data-theme="dark"] .leaflet-tooltip { background-color: var(--surface-1); border-color: var(--line-strong); color: var(--text); }

/* ---- ApexCharts: axis text, grid, tooltips, menus ---- */
:root[data-theme="dark"] .apexcharts-text,
:root[data-theme="dark"] .apexcharts-legend-text,
:root[data-theme="dark"] .apexcharts-title-text { fill: var(--text-muted); color: var(--text-muted) !important; }
:root[data-theme="dark"] .apexcharts-gridline,
:root[data-theme="dark"] .apexcharts-xaxis-tick,
:root[data-theme="dark"] .apexcharts-grid-borders line { stroke: var(--line); }
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light,
:root[data-theme="dark"] .apexcharts-xaxistooltip,
:root[data-theme="dark"] .apexcharts-menu {
    background: var(--surface-1) !important; border-color: var(--line-strong) !important; color: var(--text);
}
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--surface-2) !important; border-bottom-color: var(--line) !important;
}
:root[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--surface-3); }
:root[data-theme="dark"] .apexcharts-toolbar svg { fill: var(--icon-subtle); }