/**
 * CLMS v2 Dark Theme - Component Styling
 * Uses CSS variables for consistent theming
 */

/* ===== UTILITY CLASSES ===== */
[data-bs-theme="dark"] {
  .text-dark-primary { color: var(--clms-text-primary) !important; }
  .text-dark-secondary { color: var(--clms-text-secondary) !important; }
  .text-dark-muted { color: var(--clms-text-muted) !important; }
  .bg-dark-primary { background-color: var(--clms-bg-primary) !important; }
  .bg-dark-secondary { background-color: var(--clms-bg-secondary) !important; }
  .bg-dark-card { background-color: var(--clms-bg-card) !important; }
  .border-dark { border-color: var(--clms-border-primary) !important; }
}

/* ===== LAYOUT COMPONENTS ===== */
[data-bs-theme="dark"] {
  /* Body and main layout */
  body {
    background-color: var(--clms-body-bg) !important;
    background-image: var(--clms-body-pattern) !important;
    background-size: var(--clms-body-pattern-size) !important;
    background-repeat: repeat !important;
  }

  /* Content areas */
  .content-height-full-withMenu,
  .content-height-full,
  .album,
  .bg-light {
    background-color: var(--clms-bg-album) !important;
  }

  .content-container {
    background-color: var(--clms-bg-content) !important;
  }

  /* Override for specific combinations */
  .album.bg-light.content-container,
  .bg-light.content-container,
  .content-container.bg-light {
    background-color: var(--clms-bg-album) !important;
  }
}

/* ===== CARD COMPONENTS ===== */
[data-bs-theme="dark"] {
  .card {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .card-header,
  .card-footer {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

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

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

/* ===== MODAL COMPONENTS ===== */
[data-bs-theme="dark"] {
  .modal-content {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .modal-header,
  .modal-footer {
    border-color: var(--clms-border-primary) !important;
  }

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

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

/* ===== ALERT COMPONENTS ===== */
[data-bs-theme="dark"] {
  .alert-light {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }
}

/* ===== LIST COMPONENTS ===== */
[data-bs-theme="dark"] {
  .list-group-item {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .list-group-item:hover {
    background-color: var(--clms-hover-bg) !important;
  }

  .list-group-item.active {
    background-color: var(--clms-accent-orange) !important;
    border-color: var(--clms-accent-orange) !important;
    color: var(--clms-white) !important;
  }
}

/* ===== BREADCRUMB COMPONENTS ===== */
[data-bs-theme="dark"] {
  .breadcrumb {
    background-color: var(--clms-bg-tertiary) !important;
  }

  .breadcrumb-item a {
    color: var(--clms-text-link) !important;
  }

  .breadcrumb-item a:hover {
    color: var(--clms-text-link-hover) !important;
  }

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

/* ===== PROGRESS COMPONENTS ===== */
[data-bs-theme="dark"] {
  .progress {
    background-color: var(--clms-bg-tertiary) !important;
  }

  .progress-bar {
    background-color: var(--clms-accent-blue) !important;
  }
}

/* ===== TOAST COMPONENTS ===== */
[data-bs-theme="dark"] {
  .toast {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

  .toast-header {
    background-color: var(--clms-bg-tertiary) !important;
    border-color: var(--clms-border-primary) !important;
    color: var(--clms-text-primary) !important;
  }

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

/* ===== ACCORDION COMPONENTS ===== */
[data-bs-theme="dark"] {
  .accordion-item {
    background-color: var(--clms-bg-card) !important;
    border-color: var(--clms-border-primary) !important;
  }

  .accordion-button {
    background-color: var(--clms-bg-tertiary) !important;
    color: var(--clms-text-primary) !important;
    border: none !important;
  }

  .accordion-button:not(.collapsed) {
    background-color: var(--clms-hover-bg) !important;
    color: var(--clms-text-primary) !important;
  }

  .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem var(--clms-focus-shadow) !important;
  }

  .accordion-body {
    background-color: var(--clms-bg-card) !important;
    color: var(--clms-text-primary) !important;
  }
}

/* ===== OFFCANVAS COMPONENTS ===== */
[data-bs-theme="dark"] {
  .offcanvas {
    background-color: var(--clms-bg-card) !important;
    color: var(--clms-text-primary) !important;
  }

  .offcanvas-header {
    border-color: var(--clms-border-primary) !important;
  }

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

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

/* ===== HOME PAGE COMPONENTS ===== */
[data-bs-theme="dark"] {
  /* Welcome message container - transparent background in dark mode */
  .my-4.mx-0.mx-sm-0.text-center {
    background-color: transparent !important;
    background: transparent !important;
  }
}