/**
 * CLMS v2 Dark Theme - Charts & Special Components
 * Styling for charts, icons, and CLMS-specific components
 */

/* ===== CHART COMPONENTS ===== */
[data-bs-theme="dark"] {
  /* NVD3 Chart styling - white text for dark mode */
  .nvd3 text,
  .nvd3 .nv-axislabel,
  .nvd3 .nv-axis text,
  .nvd3 .nv-x.nv-axis text,
  .nvd3 .nv-y.nv-axis text,
  .nvd3 .nv-legend text,
  .nvd3 .nv-legend .nv-series text,
  .nvd3 .secondary-y-axis text,
  svg text,
  svg .nv-axislabel,
  svg .nv-axis text,
  svg .nv-x.nv-axis text,
  svg .nv-y.nv-axis text,
  svg .nv-legend text,
  svg .nv-legend .nv-series text,
  svg .secondary-y-axis text {
    fill: var(--clms-chart-text) !important;
    color: var(--clms-chart-text) !important;
  }

  /* Chart axis lines and ticks */
  .nvd3 .nv-axis line,
  .nvd3 .nv-axis path,
  .nvd3 .secondary-y-axis line,
  .nvd3 .secondary-y-axis path,
  svg .nv-axis line,
  svg .nv-axis path,
  svg .secondary-y-axis line,
  svg .secondary-y-axis path {
    stroke: var(--clms-chart-axis) !important;
  }

  /* Chart grid lines */
  .nvd3 .nv-axis .tick line,
  svg .nv-axis .tick line {
    stroke: var(--clms-border-secondary) !important;
    opacity: 0.3 !important;
  }

  /* Chart background */
  .nvd3 .nv-background {
    fill: var(--clms-bg-card) !important;
  }

  /* Chart tooltip */
  .nvtooltip {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
  }

  .nvtooltip h3 {
    color: var(--clms-text-primary) !important;
  }

  .nvtooltip p {
    color: var(--clms-text-secondary) !important;
  }
}

/* Chart detail-view background - always #c4c4c4 (both light and dark mode) */
div[id^="chart-"] {
  background-color: var(--clms-chart-bg) !important;
  border-radius: 0.375rem !important;
  padding: 1rem !important;
}

/* Meter Usage Charts - Increase color opacity in dark mode */
[data-bs-theme="dark"] #meterUsageChart,
[data-bs-theme="dark"] #meterUsageChart2 {
  /* Override Chart.js colors for better visibility in dark mode */
  --chart-color-opacity: 0.6; /* Increase from default 0.2 to 0.6 */
}

/* Chart.js canvas styling for dark mode */
[data-bs-theme="dark"] .chart-container canvas,
[data-bs-theme="dark"] canvas {
  /* Improve chart readability */
  filter: brightness(1.2) contrast(1.1) saturate(1.3) !important;
}

/* Additional Chart.js styling for meter usage charts */
[data-bs-theme="dark"] #meterUsageChart canvas,
[data-bs-theme="dark"] #meterUsageChart2 canvas {
  /* More pronounced colors for meter usage charts */
  filter: brightness(1.3) contrast(1.2) saturate(1.5) !important;
}

/* Additional selector for Bootstrap table detail view containers */
.detail-view div[id^="chart-"],
tr.detail-view div[id^="chart-"],
.bootstrap-table .detail-view div[id^="chart-"] {
  background-color: var(--clms-chart-bg) !important;
}

/* ===== ICON STYLING ===== */
[data-bs-theme="dark"] {
  /* Download icons - white in dark mode */
  .fa-download,
  .fa-solid.fa-download,
  i.fa-download,
  .fas.fa-download {
    color: var(--clms-white) !important;
  }

  /* Status icons with custom colors */
  .status-icon.success {
    color: #198754 !important;
  }

  .status-icon.warning {
    color: #ffc107 !important;
  }

  .status-icon.danger {
    color: #dc3545 !important;
  }

  .status-icon.info {
    color: #0dcaf0 !important;
  }

  /* Generic icon styling */
  .icon-primary {
    color: var(--clms-accent-blue) !important;
  }

  .icon-secondary {
    color: var(--clms-text-secondary) !important;
  }

  .icon-muted {
    color: var(--clms-text-muted) !important;
  }

  .icon-white {
    color: var(--clms-white) !important;
  }

  .icon-orange {
    color: var(--clms-accent-orange) !important;
  }
}

/* ===== BADGE COMPONENTS ===== */
[data-bs-theme="dark"] {
  .badge {
    color: var(--clms-white) !important;
  }

  .badge.bg-primary {
    background-color: var(--clms-accent-blue) !important;
  }

  .badge.bg-secondary {
    background-color: var(--clms-bg-tertiary) !important;
    color: var(--clms-text-primary) !important;
  }

  .badge.bg-success {
    background-color: #198754 !important;
  }

  .badge.bg-danger {
    background-color: #dc3545 !important;
  }

  .badge.bg-warning {
    background-color: #ffc107 !important;
    color: var(--clms-black) !important;
  }

  .badge.bg-info {
    background-color: #0dcaf0 !important;
    color: var(--clms-black) !important;
  }

  .badge.bg-light {
    background-color: var(--clms-bg-tertiary) !important;
    color: var(--clms-text-primary) !important;
  }

  .badge.bg-dark {
    background-color: var(--clms-bg-primary) !important;
    color: var(--clms-text-primary) !important;
  }
}

/* ===== SPINNER COMPONENTS ===== */
[data-bs-theme="dark"] {
  .spinner-border {
    border-color: var(--clms-border-secondary) !important;
    border-right-color: var(--clms-accent-orange) !important;
  }

  .spinner-border.text-primary {
    border-right-color: var(--clms-accent-blue) !important;
  }

  .spinner-grow {
    background-color: var(--clms-accent-orange) !important;
  }

  .spinner-grow.text-primary {
    background-color: var(--clms-accent-blue) !important;
  }
}

/* ===== JUMBOTRON COMPONENT ===== */
[data-bs-theme="dark"] {
  .jumbotron {
    background-color: #1a4c23 !important;
    color: var(--clms-white) !important;
    border-radius: 0.5rem !important;
  }

  .jumbotron h1,
  .jumbotron h2,
  .jumbotron h3,
  .jumbotron h4,
  .jumbotron h5,
  .jumbotron h6 {
    color: var(--clms-white) !important;
  }

  .jumbotron p {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .jumbotron .btn {
    border-color: var(--clms-white) !important;
  }
}

/* ===== SCROLLBAR STYLING ===== */
[data-bs-theme="dark"] {
  /* Custom scrollbars for webkit browsers */
  ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--clms-bg-tertiary) !important;
    border-radius: 4px !important;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--clms-border-primary) !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--clms-accent-orange) !important;
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--clms-bg-tertiary) !important;
  }
}

/* ===== TEXT UTILITIES ===== */
[data-bs-theme="dark"] {
  /* Text color utilities override */
  .text-primary {
    color: var(--clms-text-link) !important;
  }

  .text-secondary {
    color: var(--clms-text-secondary) !important;
  }

  .text-success {
    color: #198754 !important;
  }

  .text-danger {
    color: #dc3545 !important;
  }

  .text-warning {
    color: #ffc107 !important;
  }

  .text-info {
    color: #0dcaf0 !important;
  }

  .text-light {
    color: var(--clms-text-secondary) !important;
  }

  .text-dark {
    color: var(--clms-text-primary) !important;
  }

  .text-muted {
    color: var(--clms-text-muted) !important;
  }

  .text-white {
    color: var(--clms-white) !important;
  }

  .text-black {
    color: var(--clms-black) !important;
  }
}

/* ===== LINK STYLING ===== */
[data-bs-theme="dark"] {
  a {
    color: var(--clms-text-link) !important;
    transition: color 0.2s ease !important;
  }

  a:hover,
  a:focus {
    color: var(--clms-text-link-hover) !important;
  }

  a:visited {
    color: var(--clms-text-link) !important;
  }

  /* Link button styling */
  a.btn:not(.btn-link) {
    color: inherit !important;
  }

  a.btn:not(.btn-link):hover {
    color: inherit !important;
  }
}