/* ═══════════════════════════════════════════════════════════════
   K-Alert Dark Mode  |  html[data-theme="dark"] overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Scrollbar ───────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: #334155 #0f172a;
}
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f172a;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ── Base ────────────────────────────────────────────────────── */
html[data-theme="dark"] body {
  background-color: #0f172a;
  color: #e2e8f0;
}

/* ── Navbar ──────────────────────────────────────────────────── */
html[data-theme="dark"] .navbar {
  background: #1e293b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .nav-links > li > a,
html[data-theme="dark"] .nav-user > li > a {
  color: #cbd5e1;
}

html[data-theme="dark"] .nav-links > li > a:hover,
html[data-theme="dark"] .nav-user > li > a:hover {
  color: #60a5fa;
  background: #273549;
}

html[data-theme="dark"] .nav-links > li > a.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

html[data-theme="dark"] .hamburger span {
  background: #94a3b8;
}

html[data-theme="dark"] .hamburger:hover {
  background: #273549;
}

/* Dropdown menus */
html[data-theme="dark"] .dropdown {
  background: #1e293b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border: 1px solid #334155;
}

html[data-theme="dark"] .dropdown li a {
  color: #cbd5e1;
}

html[data-theme="dark"] .dropdown li a:hover {
  background: #273549;
  color: #60a5fa;
}

html[data-theme="dark"] .dropdown li[style*="border-top"] {
  border-top-color: #334155 !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  html[data-theme="dark"] .nav-menu {
    background: #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  html[data-theme="dark"] .nav-user {
    border-top-color: #334155;
  }

  html[data-theme="dark"] .dropdown {
    background: #15202f;
    border-left-color: #334155;
  }

  html[data-theme="dark"] .dropdown-toggle {
    color: #64748b;
  }
}

/* ── Page / Layout containers ────────────────────────────────── */
html[data-theme="dark"] .container,
html[data-theme="dark"] .page-wrapper,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] [class*="-wrapper"],
html[data-theme="dark"] [class*="-container"] {
  background-color: transparent;
  color: inherit;
}

/* ── Cards & Panels ──────────────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="card-"],
html[data-theme="dark"] .panel,
html[data-theme="dark"] [class*="-panel"],
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .alert-card,
html[data-theme="dark"] .plant-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .diagnostic-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] [class*="-box"],
html[data-theme="dark"] [class*="box-"],
html[data-theme="dark"] .section-box {
  background-color: #1e293b;
  border-color: #334155;
  color: inherit;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] [class*="-card"]:hover {
  background-color: #273549;
}

/* ── Generic white / light backgrounds ──────────────────────── */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:white"] {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
}

/* ── Section titles & headings ───────────────────────────────── */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #e2e8f0;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] [class*="-title"],
html[data-theme="dark"] [class*="title-"] {
  color: #e2e8f0;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label {
  color: inherit;
}

/* ── Secondary / muted text ──────────────────────────────────── */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted,
html[data-theme="dark"] [class*="-muted"],
html[data-theme="dark"] .info-card-label,
html[data-theme="dark"] .lang-note,
html[data-theme="dark"] small {
  color: #94a3b8;
}

html[data-theme="dark"] .info-card-value {
  color: #e2e8f0;
}

/* ── Borders & Dividers ──────────────────────────────────────── */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
  border-color: #334155;
}

html[data-theme="dark"] [style*="border-top:1px solid #f0f0f0"],
html[data-theme="dark"] [style*="border-top: 1px solid #f0f0f0"],
html[data-theme="dark"] [style*="border-bottom:1px solid #f0f0f0"],
html[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
html[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
  border-color: #334155 !important;
}

/* ── Forms & Inputs ──────────────────────────────────────────── */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #273549;
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #0072c6;
  outline-color: #0072c6;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  background-color: #273549;
  border-color: #475569;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] [class*="-input"],
html[data-theme="dark"] [class*="input-"] {
  background-color: #273549;
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .field-label {
  color: #cbd5e1;
}

html[data-theme="dark"] .hint,
html[data-theme="dark"] .input-hint,
html[data-theme="dark"] [class*="-hint"] {
  color: #64748b;
}

/* ── Tables ──────────────────────────────────────────────────── */
html[data-theme="dark"] table {
  border-color: #334155;
}

html[data-theme="dark"] table thead,
html[data-theme="dark"] table thead tr,
html[data-theme="dark"] table thead th {
  background-color: #273549;
  color: #94a3b8;
  border-color: #334155;
}

html[data-theme="dark"] table tbody tr {
  border-color: #334155;
}

html[data-theme="dark"] table tbody tr:hover {
  background-color: #273549;
}

html[data-theme="dark"] table tbody td {
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: #1a2540;
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] [class*="table-"],
html[data-theme="dark"] [class*="-table"] {
  background-color: #1e293b;
  border-color: #334155;
}

/* ── Buttons ─────────────────────────────────────────────────── */
html[data-theme="dark"] .btn,
html[data-theme="dark"] [class*="btn-"],
html[data-theme="dark"] [class*="-btn"] {
  border-color: #334155;
}

/* Primary blue buttons — keep as-is (readable on dark) */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] [class*="btn-primary"],
html[data-theme="dark"] button[class*="primary"] {
  background-color: #0072c6;
  border-color: #0072c6;
  color: #ffffff;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] [class*="btn-primary"]:hover {
  background-color: #005fa3;
  border-color: #005fa3;
}

/* Secondary / outline buttons */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] [class*="btn-secondary"],
html[data-theme="dark"] [class*="btn-outline"] {
  background-color: #273549;
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover {
  background-color: #334155;
}

/* Tab buttons */
html[data-theme="dark"] .tab-btn {
  color: #94a3b8;
  border-bottom-color: transparent;
}

html[data-theme="dark"] .tab-btn:hover {
  color: #e2e8f0;
  background: #273549;
}

html[data-theme="dark"] .tab-btn.active {
  color: #60a5fa;
  border-bottom-color: #60a5fa;
}

/* Lang option buttons */
html[data-theme="dark"] .lang-option,
html[data-theme="dark"] .lang-btn {
  background-color: #273549;
  color: #cbd5e1;
  border-color: #334155;
}

html[data-theme="dark"] .lang-option:hover,
html[data-theme="dark"] .lang-btn:hover {
  background-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .lang-option.selected,
html[data-theme="dark"] .lang-option.active,
html[data-theme="dark"] .lang-btn.active {
  background-color: #0072c6;
  color: #ffffff;
  border-color: #0072c6;
}

/* ── Badges & Status Indicators ──────────────────────────────── */
/* Level/status badges — keep color, improve contrast ring */
html[data-theme="dark"] .badge,
html[data-theme="dark"] [class*="-badge"],
html[data-theme="dark"] [class*="badge-"] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Status dot / indicator */
html[data-theme="dark"] .status-dot,
html[data-theme="dark"] [class*="status-"],
html[data-theme="dark"] [class*="-status"] {
  /* keep original colors — they're already accessible */
}

/* ── Tabs ────────────────────────────────────────────────────── */
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-list,
html[data-theme="dark"] [class*="tabs-"],
html[data-theme="dark"] [class*="-tabs"] {
  border-bottom-color: #334155;
}

html[data-theme="dark"] .tab-panel {
  color: #e2e8f0;
}

/* ── Modal / Popup / Overlay ─────────────────────────────────── */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] [class*="-modal"],
html[data-theme="dark"] [class*="modal-"],
html[data-theme="dark"] .popup,
html[data-theme="dark"] [class*="-popup"],
html[data-theme="dark"] .overlay-content,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] [class*="-dialog"] {
  background-color: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .overlay-bg,
html[data-theme="dark"] [class*="-overlay"] {
  background-color: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] [class*="modal-header"] {
  border-bottom-color: #334155;
}

html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] [class*="modal-footer"] {
  border-top-color: #334155;
}

/* ── Alerts / Flash messages ─────────────────────────────────── */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .flash-success {
  background-color: #14302a;
  color: #4ade80;
  border-color: #166534;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .flash-error {
  background-color: #2d1515;
  color: #f87171;
  border-color: #7f1d1d;
}

html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .flash-warning {
  background-color: #2d2010;
  color: #fbbf24;
  border-color: #78350f;
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .flash-info {
  background-color: #0c2040;
  color: #60a5fa;
  border-color: #1e3a5f;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] [class*="breadcrumb"] {
  color: #64748b;
}

html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] [class*="breadcrumb"] a {
  color: #94a3b8;
}

html[data-theme="dark"] .breadcrumb a:hover,
html[data-theme="dark"] [class*="breadcrumb"] a:hover {
  color: #60a5fa;
}

/* ── ECharts / Chart wrappers ────────────────────────────────── */
html[data-theme="dark"] [id*="chart"],
html[data-theme="dark"] [class*="chart"],
html[data-theme="dark"] [class*="-chart"],
html[data-theme="dark"] .echarts-wrap,
html[data-theme="dark"] [class*="echarts"] {
  background-color: #1e293b;
}

/* ── Pagination ──────────────────────────────────────────────── */
html[data-theme="dark"] .pagination,
html[data-theme="dark"] [class*="pagination"] {
  color: #e2e8f0;
}

html[data-theme="dark"] .pagination a,
html[data-theme="dark"] [class*="pagination"] a {
  color: #94a3b8;
  border-color: #334155;
  background-color: #1e293b;
}

html[data-theme="dark"] .pagination a:hover,
html[data-theme="dark"] [class*="pagination"] a:hover {
  background-color: #273549;
  color: #60a5fa;
}

html[data-theme="dark"] .pagination .active a,
html[data-theme="dark"] [class*="pagination"] .active {
  background-color: #0072c6;
  border-color: #0072c6;
  color: #ffffff;
}

/* ── Search / Filter bars ────────────────────────────────────── */
html[data-theme="dark"] .search-bar,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] [class*="search-"],
html[data-theme="dark"] [class*="-search"],
html[data-theme="dark"] [class*="filter-"] {
  background-color: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* ── Tooltips ────────────────────────────────────────────────── */
html[data-theme="dark"] .tooltip,
html[data-theme="dark"] [class*="-tooltip"],
html[data-theme="dark"] [class*="tooltip-"] {
  background-color: #334155;
  color: #e2e8f0;
  border-color: #475569;
}

/* ── Loading / Skeleton ──────────────────────────────────────── */
html[data-theme="dark"] .skeleton,
html[data-theme="dark"] [class*="skeleton"],
html[data-theme="dark"] .loading-placeholder {
  background: linear-gradient(90deg, #1e293b 25%, #273549 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ── Select2 / Custom selects ────────────────────────────────── */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #273549;
  border-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .select2-dropdown {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-theme="dark"] .select2-results__option {
  color: #e2e8f0;
}

html[data-theme="dark"] .select2-results__option--highlighted {
  background-color: #273549;
}

/* ── Diagnostic page specific ────────────────────────────────── */
html[data-theme="dark"] .diagnostic-wrap,
html[data-theme="dark"] .diag-card,
html[data-theme="dark"] .sensor-card,
html[data-theme="dark"] .sensor-row,
html[data-theme="dark"] .device-card {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-theme="dark"] .sensor-row:hover,
html[data-theme="dark"] .device-card:hover {
  background-color: #273549;
}

html[data-theme="dark"] .sensor-name,
html[data-theme="dark"] .device-name {
  color: #e2e8f0;
}

html[data-theme="dark"] .sensor-value,
html[data-theme="dark"] .reading-value {
  color: #60a5fa;
}

/* ── Dashboard stats ─────────────────────────────────────────── */
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] [class*="stat-value"] {
  color: #e2e8f0;
}

html[data-theme="dark"] .stat-label,
html[data-theme="dark"] [class*="stat-label"] {
  color: #94a3b8;
}

/* ── Alert list / Alert page ─────────────────────────────────── */
html[data-theme="dark"] .alert-row,
html[data-theme="dark"] .alert-item,
html[data-theme="dark"] [class*="alert-row"],
html[data-theme="dark"] [class*="alert-item"] {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-theme="dark"] .alert-row:hover,
html[data-theme="dark"] .alert-item:hover {
  background-color: #273549;
}

/* ── Plant / Service Contract pages ──────────────────────────── */
html[data-theme="dark"] .plant-row,
html[data-theme="dark"] .contract-row,
html[data-theme="dark"] [class*="plant-row"],
html[data-theme="dark"] [class*="contract-row"] {
  background-color: #1e293b;
  border-color: #334155;
}

html[data-theme="dark"] .plant-row:hover,
html[data-theme="dark"] .contract-row:hover {
  background-color: #273549;
}

/* ── Info grids ──────────────────────────────────────────────── */
html[data-theme="dark"] .info-grid .info-card {
  background-color: #273549;
  border-color: #334155;
}

/* ── Misc utility overrides ──────────────────────────────────── */
html[data-theme="dark"] .text-secondary {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: #1e293b !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] [class*="border-"] {
  border-color: #334155;
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] [class*="shadow-"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ── Box shadows — soften ────────────────────────────────────── */
html[data-theme="dark"] [style*="box-shadow"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ── Logout link stays red ───────────────────────────────────── */
html[data-theme="dark"] #logout,
html[data-theme="dark"] a[href="/logout"] {
  color: #f87171 !important;
}

/* ── Empty state text ────────────────────────────────────────── */
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] [class*="empty-"] {
  color: #64748b;
}

/* ── Spectrum context menu (diagnostic) ──────────────────────── */
html[data-theme="dark"] .spectrum-ctx-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .spectrum-ctx-menu .ctx-item { color: #cbd5e1; }
html[data-theme="dark"] .spectrum-ctx-menu .ctx-item:hover { background: #334155; }
html[data-theme="dark"] .spectrum-ctx-menu .ctx-sep { background: #334155; }