/* ZigBee Matter Manager — Dark Mode Theme */


/* CSS CUSTOM PROPERTIES — Light Theme (defaults) */
:root {
    --bg-body: #f0f2f5;
    --bg-surface: #ffffff;
    --bg-surface-raised: #ffffff;
    --bg-surface-sunken: #f8f9fa;
    --bg-nav: #212529;
    --bg-card-header: #f8f9fa;
    --bg-input: #ffffff;
    --bg-code: #2d2d2d;

    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #868e96;
    --text-on-surface: #212529;
    --text-link: #0d6efd;

    --border-color: #dee2e6;
    --border-light: #e9ecef;

    --table-stripe: rgba(0, 0, 0, 0.02);
    --table-hover: rgba(0, 0, 0, 0.04);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);

    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-track: #f1f1f1;

    --badge-light-bg: #f8f9fa;
    --badge-light-text: #212529;

    --alert-info-bg: #cff4fc;
    --alert-info-border: #b6effb;
    --alert-info-text: #055160;

    --success-subtle: rgba(25, 135, 84, 0.1);
    --danger-subtle: rgba(220, 53, 69, 0.1);
    --warning-subtle: rgba(255, 193, 7, 0.1);
    --info-subtle: rgba(13, 202, 240, 0.1);
}


/* CSS CUSTOM PROPERTIES — Dark Theme */
[data-theme="dark"] {
    --bg-body: #0f1117;
    --bg-surface: #1a1d27;
    --bg-surface-raised: #222636;
    --bg-surface-sunken: #141620;
    --bg-nav: #0d0f16;
    --bg-card-header: #1e2233;
    --bg-input: #1e2233;
    --bg-code: #0d0f16;

    --text-primary: #e1e4eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-on-surface: #e1e4eb;
    --text-link: #60a5fa;

    --border-color: #2d3348;
    --border-light: #252a3a;

    --table-stripe: rgba(255, 255, 255, 0.02);
    --table-hover: rgba(255, 255, 255, 0.05);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);

    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --scrollbar-thumb: #3b4252;
    --scrollbar-track: #1a1d27;

    --badge-light-bg: #252a3a;
    --badge-light-text: #d1d5db;

    --alert-info-bg: #0c2d3f;
    --alert-info-border: #0e3a52;
    --alert-info-text: #7dd3fc;

    --success-subtle: rgba(34, 197, 94, 0.12);
    --danger-subtle: rgba(239, 68, 68, 0.12);
    --warning-subtle: rgba(234, 179, 8, 0.12);
    --info-subtle: rgba(56, 189, 248, 0.12);
}


/* DARK MODE — Global Application */


/* NAVBAR */

[data-theme="dark"] .navbar.navbar-dark.bg-dark {
    background-color: var(--bg-nav);
    border-bottom: 1px solid var(--border-color);
}


/* CARDS */

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header.bg-light {
    background-color: var(--bg-card-header) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}


/* TABLES */

[data-theme="dark"] .table {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: var(--table-hover);
    --bs-table-active-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Force background on every cell (Bootstrap applies --bs-table-bg per <td>) */

/* Table header */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table thead.table-light,
[data-theme="dark"] .table-light > * {
    --bs-table-bg: var(--bg-card-header);
    --bs-table-color: var(--text-primary);
    background-color: var(--bg-card-header) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Hover state — must override the per-cell background */

/* Striped rows */

/* All cell borders */

/* Device table specific — the text elements inside cells */

/* Table-responsive wrapper */


/* FORMS & INPUTS */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}


/* BUTTONS */

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-surface-raised);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--text-link);
    border-color: var(--text-link);
}

[data-theme="dark"] .btn-outline-info {
    color: var(--text-secondary);
    border-color: var(--border-color);
}


/* BADGES */

[data-theme="dark"] .badge.bg-light {
    background-color: var(--badge-light-bg) !important;
    color: var(--badge-light-text) !important;
}

[data-theme="dark"] .badge.bg-light.text-dark {
    color: var(--badge-light-text) !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: var(--bg-surface-raised) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .badge.bg-info.text-dark {
    color: #0e1117 !important;
}


/* MODALS */


/* NAV TABS */

/* Nav-tab colours/underline live in hive-components.css (token-driven,
   theme-aware) — no dark-specific overrides needed. */

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--honey) !important;
    color: var(--honey-ink) !important;
}

/* Settings sub-nav */


/* ALERTS */

[data-theme="dark"] .alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
    color: var(--alert-info-text);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.2);
    color: var(--warn);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.2);
    color: var(--ok);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--bad);
}

[data-theme="dark"] .alert-light {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-color);
    color: var(--text-secondary);
}


/* BACKGROUNDS & UTILITIES */

[data-theme="dark"] .bg-light {
    background-color: var(--bg-card-header) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}

[data-theme="dark"] .bg-dark {
    background-color: var(--bg-nav) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-primary {
    color: var(--text-link) !important;
}


/* SPECIFIC COMPONENTS */

/* Coordinator card */

/* Thermostat — current temp display */
[data-theme="dark"] #tab-control .bg-light {
    background-color: var(--bg-surface-sunken) !important;
}

[data-theme="dark"] #tab-control .bg-primary.bg-opacity-10 {
    background-color: var(--warning-subtle) !important;
}

/* Debug log — already dark, ensure consistency */
[data-theme="dark"] #logs {
    background-color: var(--bg-code);
}

/* Config YAML editor — already dark */
[data-theme="dark"] #configEditor {
    background-color: var(--bg-code);
}

/* MQTT Explorer message container */

/* Sticky table headers in dark */
[data-theme="dark"] .sticky-top.table-light {
    background-color: var(--bg-card-header) !important;
}

/* Progress bars */

/* List groups */

/* Accordion */

/* Dropdown menus */

/* Spectrum chart */
[data-theme="dark"] #spectrumChart,
[data-theme="dark"] #spectrumHistory {
    background-color: var(--bg-surface-sunken) !important;
}

/* Schedule */
[data-theme="dark"] .sched-day-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sched-day-row:hover {
    background-color: var(--bg-surface-raised);
}

[data-theme="dark"] .sched-today {
    background-color: var(--warning-subtle);
}

[data-theme="dark"] .sched-timeline {
    background-color: var(--bg-surface-sunken);
}

[data-theme="dark"] .sched-pill {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-color);
}

[data-theme="dark"] .sched-pill-time {
    color: var(--text-primary);
}

[data-theme="dark"] .sched-pill-temp {
    color: var(--text-secondary);
}

[data-theme="dark"] .sched-add-popover {
    background-color: var(--bg-surface-raised);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}


/* GROUPS TAB — member-device pills, device checkboxes,
   group cards, modal member list */

/* Member device pills (hardcoded #e7f3ff in groups.css) */

/* Group cards (border-left: 4px solid #0d6efd already fine) */

/* Device checkbox items in group creation (hardcoded #e0e0e0 border, #f8f9fa hover) */

/* Compatible devices list container */

/* Group control modal — member list items (border rounded divs) */

/* Group control panel cards */

/* Group info display */

/* Capability badges (bg-success, bg-info, bg-warning, bg-primary already have colour) */
/* Just ensure text contrast in dark mode */
[data-theme="dark"] .capability-badge.bg-warning {
    color: #1a1d27 !important;
}

/* Base device info alert */

/* Common capabilities alert */

/* Add device select in modal */

/* font-monospace text */
[data-theme="dark"] .font-monospace {
    color: var(--text-secondary);
}

[data-theme="dark"] code {
    color: var(--accent);
}


/* MESH TOPOLOGY — dark mode for D3 viz, tables, controls */

/* Controls bar */
[data-theme="dark"] .mesh-controls,
[data-theme="dark"] .mesh-controls.bg-light {
    background-color: var(--bg-card-header) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Legend text */
[data-theme="dark"] .mesh-legend {
    color: var(--text-secondary);
}

/* Mesh wrapper tabs */

/* Mesh wrapper + tab-content — prevent white flash on tab switch */

/* Each mesh sub-tab pane explicitly */
[data-theme="dark"] #meshVisualisation {
    background-color: var(--bg-surface-sunken) !important;
}

/* Kill the Bootstrap fade transition white flash —
   the .fade class fades opacity 0→1, revealing whatever
   is behind (white body). Force bg on the fading element. */

/* Also fix the main topology tab container */

/* Global fix: all tab-panes should have dark bg during fade transition */
[data-theme="dark"] .tab-pane {
    background-color: var(--bg-surface);
}

[data-theme="dark"] .tab-content {
    background-color: var(--bg-body);
}

/* SVG visualisation background */
[data-theme="dark"] .mesh-visualisation-wrapper {
    background-color: var(--bg-surface-sunken) !important;
    border-color: var(--border-color) !important;
}

/* Mesh topology graph is an ECharts canvas; it themes itself via the
   zbm-dark theme registered in chart-utils.js, so no SVG overrides here. */

/* Connection table — table-dark header stays dark, but nested tables need fixing */
[data-theme="dark"] #connectionTable {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-hover-color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] #connectionTable thead.table-dark th,
[data-theme="dark"] #connectionTable thead.sticky-top th {
    background-color: var(--bg-card-header) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Table-responsive wrapper inside connection table */

/* Connection table hover — only on actual data rows, not collapse child rows */

/* The child row that contains the collapse panel — no hover effect */
[data-theme="dark"] #connectionTable > tbody > tr > td.child-row-cell {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Nested connection table inside collapse — borders */
[data-theme="dark"] .nested-connection-table {
    background-color: var(--bg-surface-sunken);
    border-color: var(--border-color);
}

[data-theme="dark"] .nested-connection-table th {
    background-color: var(--bg-surface-raised);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .nested-connection-table td {
    background-color: var(--bg-surface-sunken);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* table-bordered inside nested tables */
[data-theme="dark"] .nested-connection-table.table-bordered,
[data-theme="dark"] .nested-connection-table.table-bordered > :not(caption) > * {
    border-color: var(--border-color);
}

[data-theme="dark"] .nested-connection-table.table-bordered > :not(caption) > * > * {
    border-color: var(--border-color);
}

/* Nested table hover */
[data-theme="dark"] .nested-connection-table > tbody > tr:hover > td {
    background-color: var(--table-hover);
}

/* Collapse bg-light panel (the expanded content wrapper) */
[data-theme="dark"] .collapse .bg-light,
[data-theme="dark"] .collapse .p-3.bg-light,
[data-theme="dark"] .collapse .p-3.bg-light.border-bottom {
    background-color: var(--bg-surface-sunken) !important;
    border-color: var(--border-color) !important;
}

/* Shadow-inset class used in collapse panels */
[data-theme="dark"] .shadow-inset {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* #meshPacketStats — tab pane + summary cards + table */

/* Tab pane container */

/* Summary cards */

/* Stats table */
[data-theme="dark"] #packetStatsTable {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--table-stripe);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--table-hover);
    --bs-table-hover-color: var(--text-primary);
}

[data-theme="dark"] #packetStatsTable thead.table-dark th,
[data-theme="dark"] #packetStatsTable thead.sticky-top th {
    background-color: var(--bg-card-header) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Table-responsive wrapper */

/* Hover on packet stats table rows */

/* fw-medium and fw-bold text inside stats rows */

/* Error text */

/* Status badges inside table */
[data-theme="dark"] #packetStatsTable .badge.bg-success {
    background-color: var(--success-subtle) !important;
    color: var(--ok) !important;
}

[data-theme="dark"] #packetStatsTable .badge.bg-danger {
    background-color: var(--danger-subtle) !important;
    color: var(--bad) !important;
}

/* Progress bars (load indicator) */


/* SCROLLBAR STYLING (Webkit) */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #35516b;
}


/* TRANSITION for smooth theme switching
   Scoped to .theme-transition, which theme-toggle.js puts on
   <html> only for the duration of a toggle. Leaving this on
   permanently made every :hover lag 200ms behind the pointer
   and turned any first-paint theme correction into a visible
   animated fade instead of a single frame. */

.theme-transition body,
.theme-transition .card,
.theme-transition .modal-content,
.theme-transition .table,
.theme-transition .form-control,
.theme-transition .form-select,
.theme-transition .btn,
.theme-transition .badge,
.theme-transition .alert,
.theme-transition .nav-tabs .nav-link,
.theme-transition .dropdown-menu,
.theme-transition .list-group-item {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .theme-transition body,
    .theme-transition .card,
    .theme-transition .modal-content,
    .theme-transition .table,
    .theme-transition .form-control,
    .theme-transition .form-select,
    .theme-transition .btn,
    .theme-transition .badge,
    .theme-transition .alert,
    .theme-transition .nav-tabs .nav-link,
    .theme-transition .dropdown-menu,
    .theme-transition .list-group-item,
    .tab-pane.fade {
        transition: none;
    }
}


/* Heating history chart is now an ECharts canvas; it themes itself via the
   zbm-dark theme registered in chart-utils.js, so no SVG overrides here. */