/**
 * Dark mode – overrides for page-specific CSS (custom-data-management, analytics, etc.)
 * Loaded last in base.html so it wins after extrastyle blocks.
 */

/* —— Shared: nav tabs (Designer / Explorer / Performer / data pages) —— */
[data-pc-theme="dark"] .nav-tabs .nav-link {
  color: #b8c4dc;
}

[data-pc-theme="dark"] .nav-tabs .nav-link.active {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .nav-tabs .nav-link:hover {
  color: #f0f4fa;
}

/* —— Base layout: pill switchers on designer-style pages —— */
[data-pc-theme="dark"] .theme-switcher {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-pc-theme="dark"] .theme-tab {
  color: #b8c4dc;
}

[data-pc-theme="dark"] .theme-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}

[data-pc-theme="dark"] .toggle-switcher {
  background: #2a2f38;
  border-color: #3d4450 !important;
}

[data-pc-theme="dark"] .toggle-tab.active {
  background: #363c48;
  color: #e8ecf4;
}

[data-pc-theme="dark"] .separator {
  opacity: 0.85;
}

[data-pc-theme="dark"] .version {
  color: #8b95a8;
}

/* —— Buttons —— */
[data-pc-theme="dark"] .btn-outline-dark {
  border-color: #5a6270 !important;
  color: #e4e9f2 !important;
  background: transparent !important;
}

[data-pc-theme="dark"] .btn-outline-dark:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

[data-pc-theme="dark"] .btn.btn-outline-dark {
  background-color: transparent !important;
  color: #dce2ee !important;
  border-color: #5a6270 !important;
}

/* —— Tables —— */
[data-pc-theme="dark"] .table thead th.sortable {
  background: #2f343e !important;
  color: #dce2ee;
}

[data-pc-theme="dark"] .table-input:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-pc-theme="dark"] .supply-points-table input.form-control:focus,
[data-pc-theme="dark"] .supply-points-table select.form-select:focus,
[data-pc-theme="dark"] .supply-points-table select.table-input:focus,
[data-pc-theme="dark"] .operating-points-table input.form-control:focus,
[data-pc-theme="dark"] .operating-points-table select.form-select:focus,
[data-pc-theme="dark"] .operating-points-table select.table-input:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-pc-theme="dark"] table.table-bordered tbody tr.sim-settings-row-inactive > td {
  background-color: #2a2f38 !important;
  color: #c5cdd8 !important;
}

/* —— Accordion —— */
[data-pc-theme="dark"] .accordion-button {
  background-color: #262a32;
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .accordion-button:not(.collapsed) {
  color: #e8ecf4 !important;
  background-color: #2a2f38 !important;
}

[data-pc-theme="dark"] .accordion-item {
  background-color: transparent;
  border-color: #454c5a !important;
}

[data-pc-theme="dark"] .accordion-body {
  background-color: #1e1e1e;
  color: var(--bs-body-color, #bdc8f0);
}

/* —— Float labels —— */
[data-pc-theme="dark"] .float-input label {
  background: #1e1e1e;
  color: #9aa3b5;
}

/* —— Designer / Explorer / Performer hero strips —— */
[data-pc-theme="dark"] .parameters {
  background-image: linear-gradient(
      to right,
      rgba(26, 29, 35, 0.98),
      rgba(26, 29, 35, 0)
    ),
    url("../images/background4.png");
}

[data-pc-theme="dark"] .parameters.insights {
  background-image: linear-gradient(
      to right,
      rgba(26, 29, 35, 0.98),
      rgba(26, 29, 35, 0)
    ),
    url("../images/background1.png");
}

[data-pc-theme="dark"] .parameters.performance {
  background-image: linear-gradient(
      to right,
      rgba(26, 29, 35, 0.98),
      rgba(26, 29, 35, 0)
    ),
    url("../images/background2.png");
}

[data-pc-theme="dark"] .parameters.analysis {
  background-image: linear-gradient(
      to right,
      rgba(26, 29, 35, 0.98),
      rgba(26, 29, 35, 0)
    ),
    url("../images/background3.png");
}

[data-pc-theme="dark"] .simulation-button {
  background-color: #2f343e;
  color: #dce2ee;
  box-shadow: rgba(0, 0, 0, 0.45) 0 3px 10px;
}

[data-pc-theme="dark"] .vertical-progress {
  background-color: #3a404c;
}

[data-pc-theme="dark"] .depot-label {
  color: #c5cdd8;
}

/* —— Designer page (inline readonly + simulation panel) —— */
[data-pc-theme="dark"] .designer-page .readonly-gray,
[data-pc-theme="dark"] .designer-page input:disabled.readonly-gray,
[data-pc-theme="dark"] .designer-page select:disabled.readonly-gray,
[data-pc-theme="dark"] .designer-page textarea:disabled.readonly-gray {
  background-color: #2f343e !important;
  color: #c5cdd8 !important;
}

[data-pc-theme="dark"] .designer-page table.table-readonly-gray,
[data-pc-theme="dark"] .designer-page table.table-readonly-gray thead th,
[data-pc-theme="dark"] .designer-page table.table-readonly-gray tbody td {
  background-color: #2f343e !important;
  color: #c5cdd8 !important;
}

[data-pc-theme="dark"] #simulation-details-panel {
  background-color: #262a32 !important;
  border-color: #3d4450 !important;
  color: var(--bs-body-color, #bdc8f0);
}

[data-pc-theme="dark"] #simulation-details-panel .text-muted {
  color: #8b95a8 !important;
}

/* Default body text inside designer / explorer / performer shell */
[data-pc-theme="dark"] .designer-page {
  color: var(--bs-body-color, #bdc8f0);
}

[data-pc-theme="dark"] .designer-page .table {
  color: #dce2ee;
  --bs-table-color: #dce2ee;
}

[data-pc-theme="dark"] .designer-page .table-bordered td,
[data-pc-theme="dark"] .designer-page .table-bordered th {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-pc-theme="dark"] .main-card .text-muted {
  color: #8b95a8 !important;
}

/* —— Maps & lists (operational data / routes) —— */
[data-pc-theme="dark"] .route-context-menu {
  background: #2a2f38;
  border-color: #454c5a;
  color: #e4e9f2;
}

[data-pc-theme="dark"] .leaflet-context-menu,
[data-pc-theme="dark"] .leaflet-context-menu2 {
  background: #2a2f38 !important;
  border-color: #454c5a !important;
}

[data-pc-theme="dark"] .leaflet-context-menu a,
[data-pc-theme="dark"] .leaflet-context-menu2 a {
  color: #e4e9f2 !important;
}

[data-pc-theme="dark"] .leaflet-context-menu a:hover,
[data-pc-theme="dark"] .leaflet-context-menu2 a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-pc-theme="dark"] #layer-switcher,
[data-pc-theme="dark"] #layer-switcher2,
[data-pc-theme="dark"] #layer-switcher3,
[data-pc-theme="dark"] #layer-switcher-v2,
[data-pc-theme="dark"] #waypoint-editor,
[data-pc-theme="dark"] #waypoint-editor2,
[data-pc-theme="dark"] #waypoint-editor3,
[data-pc-theme="dark"] #waypoint-editor-v2 {
  background: rgba(34, 38, 46, 0.96) !important;
  color: #e4e9f2;
  border: 1px solid #454c5a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

[data-pc-theme="dark"] #waypoint-editor .wp-box,
[data-pc-theme="dark"] #waypoint-editor2 .wp-box,
[data-pc-theme="dark"] #waypoint-editor3 .wp-box,
[data-pc-theme="dark"] #waypoint-editor-v2 .wp-box {
  border-color: #454c5a;
  background: rgba(0, 0, 0, 0.2);
  color: #e4e9f2;
}

[data-pc-theme="dark"] .saved-item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #dce2ee;
}

[data-pc-theme="dark"] .route-list-short {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .route-list-name {
  color: #e8ecf4;
}

[data-pc-theme="dark"] .saved-routes-table tr.route-list-row-selected {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-pc-theme="dark"] .image-preview {
  border-color: #454c5a;
}

/* —— Analytics / insights metric cards —— */
[data-pc-theme="dark"] .metrics-container {
  background: #1a1d23;
}

[data-pc-theme="dark"] .metric-card {
  background: #2f343e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-pc-theme="dark"] .metric-card h5 {
  color: #dce2ee;
}

[data-pc-theme="dark"] .metric-card small {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .feeder-status-text {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .uw-popup-subtitle,
[data-pc-theme="dark"] .uw-popup-row span.label {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .uw-popup-row span.value {
  color: #e8ecf4;
}

[data-pc-theme="dark"] .uw-popup-feeders {
  border-top-color: #454c5a;
}

[data-pc-theme="dark"] .map-title {
  background: rgba(34, 38, 46, 0.96);
  color: #e8ecf4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

[data-pc-theme="dark"] .map-subtitle {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .legend {
  background: rgba(34, 38, 46, 0.96);
  color: #dce2ee;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

[data-pc-theme="dark"] .legend-labels {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .fl-popup-title {
  color: #e8ecf4;
}

[data-pc-theme="dark"] .fl-popup-text-line {
  color: #c5cdd8;
}

[data-pc-theme="dark"] .leaflet-popup-content-wrapper {
  background: #2a2f38;
  border-color: #454c5a;
}

[data-pc-theme="dark"] .leaflet-popup-content {
  color: #dce2ee;
}

[data-pc-theme="dark"] .ss-popup-sub {
  color: #9aa3b5;
}

[data-pc-theme="dark"] .ss-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

[data-pc-theme="dark"] .time-selector {
  border-color: #454c5a;
  background: #262a32;
}

/* —— List groups (data management side lists) —— */
[data-pc-theme="dark"] .list-group-item {
  background-color: #262a32;
  border-color: #3d4450;
  color: #dce2ee;
}

[data-pc-theme="dark"] .list-group-item.active {
  color: #fff !important;
}

[data-pc-theme="dark"] .list-group span.heading {
  color: #e8ecf4;
}

[data-pc-theme="dark"] .list-group span.short-heading {
  color: #8b95a8;
}

/* —— Theme tokens: insight / designer panels —— */
.insight-panel-card {
  background: #f6f5f8;
  border-radius: 3px;
}

[data-pc-theme="dark"] .insight-panel-card {
  background: #2f343e !important;
  color: #dce2ee;
  border-color: #454c5a !important;
}

/* —— Analytics (custom-analytics.css) —— */
[data-pc-theme="dark"] .overview-card {
  background-color: #373d48 !important;
  color: #dce2ee;
}

[data-pc-theme="dark"] .battery-labels .label {
  color: #c5cdd8;
}

[data-pc-theme="dark"] .battery-labels .label:not(.no-separator) {
  border-bottom-color: #454c5a;
}

[data-pc-theme="dark"] .battery {
  border-color: #5a6270;
}

[data-pc-theme="dark"] .battery-top {
  background: #5a6270;
}

[data-pc-theme="dark"] .analyzer {
  background-color: #2f343e;
  color: #dce2ee;
}

[data-pc-theme="dark"] .popup-header {
  background-color: #2a2f38 !important;
  border-bottom-color: #454c5a !important;
}

[data-pc-theme="dark"] .popup-header h6 {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .popup-close {
  color: #9aa3b5 !important;
}

[data-pc-theme="dark"] .popup-subtitle,
[data-pc-theme="dark"] .stat-label {
  color: #9aa3b5 !important;
}

[data-pc-theme="dark"] .stat-value {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .feeder-section {
  border-top-color: #454c5a !important;
}

[data-pc-theme="dark"] .feeder-section h4 {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .fl-popup-text-title {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .fl-popup-text-line {
  color: #c5cdd8 !important;
}

[data-pc-theme="dark"] .time-selector label {
  background-color: #2f343e !important;
  color: #dce2ee !important;
  border-right-color: #454c5a !important;
}

[data-pc-theme="dark"] .time-selector label:hover {
  background-color: #363c48 !important;
}

[data-pc-theme="dark"] .time-selector input[type="radio"]:checked + label {
  color: #fff !important;
}

/* Leaflet popups: analytics file repeats selectors — ensure readable text on light popup chrome */
[data-pc-theme="dark"] .leaflet-popup-content {
  color: #dce2ee !important;
}

[data-pc-theme="dark"] .ss-popup-title {
  color: #e8ecf4 !important;
}

/* —— Auth (auth_base + Bootstrap cards) —— */
[data-pc-theme="dark"] .auth-main .card {
  background-color: #262a32 !important;
  border-color: #3d4450 !important;
  color: #dce2ee;
}

[data-pc-theme="dark"] .auth-main .auth-header h2,
[data-pc-theme="dark"] .auth-main .auth-header p,
[data-pc-theme="dark"] .auth-main .f-16 {
  color: #e8ecf4 !important;
}

[data-pc-theme="dark"] .auth-main .form-control {
  background-color: #2f343e;
  border-color: #454c5a;
  color: #e8ecf4;
}

[data-pc-theme="dark"] .auth-main .form-floating > label {
  color: #9aa3b5;
}

/* —— Code / pre blocks —— */
[data-pc-theme="dark"] pre,
[data-pc-theme="dark"] .main-card pre {
  background-color: #1a1d23 !important;
  color: #dce2ee !important;
  border-color: #454c5a;
}

/* —— Bootstrap text utility on dark surfaces —— */
[data-pc-theme="dark"] .text-body {
  color: var(--bs-body-color, #bdc8f0) !important;
}

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

[data-pc-theme="dark"] .badge.bg-light.text-dark {
  background-color: #373d48 !important;
  color: #e8ecf4 !important;
  border: 1px solid #454c5a;
}