/* Rika Device Management — Theme overrides (Dark mode)
 *
 * Loaded AFTER design-tokens.css. The accent/primary ramp is injected inline
 * via #app-theme-vars (see layouts/dashboard.blade.php). This file only handles
 * the Light/Dark *mode*, scoped to [data-bs-theme="dark"].
 *
 * Strategy: invert the neutral gray ramp so the many var(--gray-*) consumers
 * flip automatically, then override the handful of surfaces that hardcode
 * white with !important in the design system. Bootstrap 5.3's native
 * data-bs-theme handles base components (inputs, dropdowns, modals, tables).
 */

[data-bs-theme="dark"] {
  /* Inverted neutral ramp: 50 = darkest surface, 900 = lightest text */
  --gray-50:  #0F172A;
  --gray-100: #1E293B;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748B;
  --gray-500: #94A3B8;
  --gray-600: #CBD5E1;
  --gray-700: #E2E8F0;
  --gray-800: #F1F5F9;
  --gray-900: #F8FAFC;

  /* Elevated surface (cards, panels, header) */
  --surface: #1E293B;

  /* Topbar */
  --topbar-bg: #1E293B;
  --topbar-border: #334155;
}

/* ===== BASE ===== */
[data-bs-theme="dark"] body {
  background-color: var(--gray-50) !important;
  color: var(--gray-700);
}

/* ===== ELEVATED SURFACES (hardcoded #FFFFFF in design-tokens) ===== */
[data-bs-theme="dark"] .stats-card,
[data-bs-theme="dark"] .chart-container {
  background: var(--surface) !important;
  border-color: var(--gray-200);
}

[data-bs-theme="dark"] .stats-card .card-icon {
  color: var(--gray-900) !important;
}

[data-bs-theme="dark"] .top-header {
  background: var(--surface) !important;
  border-bottom-color: var(--topbar-border) !important;
}

/* Bootstrap cards — ensure a dark elevated surface even where the design
   system forces light header backgrounds. */
[data-bs-theme="dark"] .card {
  background-color: var(--surface) !important;
  border-color: var(--gray-200) !important;
}

[data-bs-theme="dark"] .card-header {
  background-color: var(--gray-100) !important;
  border-bottom-color: var(--gray-200) !important;
}

/* ===== TABLES ===== */
[data-bs-theme="dark"] .table thead th {
  background-color: var(--gray-100) !important;
  color: var(--gray-600) !important;
  border-bottom-color: var(--gray-300) !important;
}

[data-bs-theme="dark"] .table tbody td {
  border-bottom-color: var(--gray-200) !important;
  color: var(--gray-700);
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: var(--gray-100) !important;
}

/* ===== SETTINGS TOGGLE ROWS (inline #f8f9fa) ===== */
[data-bs-theme="dark"] .toggle-switch {
  background: var(--gray-100) !important;
}

[data-bs-theme="dark"] .toggle-info h6 {
  color: var(--gray-900) !important;
}

/* ===== FORMS ===== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-800);
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--gray-500);
}

/* ===== DROPDOWN / MODAL ===== */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface) !important;
  border-color: var(--gray-200) !important;
}

[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: var(--gray-100) !important;
}

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

/* ===== TEXT HELPERS ===== */
[data-bs-theme="dark"] .text-muted {
  color: var(--gray-500) !important;
}

/* Soft borders used across Bootstrap utilities */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
  border-color: var(--gray-200) !important;
}

/* =====================================================================
 * CONTEXTUAL FIXES (apply in BOTH light & dark mode)
 * Placed last so they win over the generic overrides above.
 * ===================================================================== */

/* design-tokens.css forces every .card-header to a light grey background,
 * which hides the white text on coloured headers like
 * `.card-header.bg-primary.text-white` (e.g. "Profile Information",
 * "Quick Stats"). Restore a readable, theme-aware coloured header. */
.card-header.bg-primary {
  background-color: var(--primary-500) !important;
  color: #fff !important;
  border-bottom-color: var(--primary-600) !important;
}
.card-header.bg-info {
  background-color: var(--info) !important;
  color: #fff !important;
}
.card-header.bg-success {
  background-color: var(--success) !important;
  color: #fff !important;
}
.card-header.bg-danger {
  background-color: var(--error) !important;
  color: #fff !important;
}
.card-header.bg-warning {
  background-color: var(--warning) !important;
  color: var(--warning-dark) !important;
}
.card-header.bg-secondary {
  background-color: var(--gray-500) !important;
  color: #fff !important;
}
/* Keep explicit text utilities readable on coloured headers. */
.card-header.bg-primary.text-white,
.card-header.bg-info.text-white,
.card-header.bg-success.text-white,
.card-header.bg-danger.text-white {
  color: #fff !important;
}

/* Outline-primary buttons: checked/active state should follow the theme
 * accent (Bootstrap hardcodes its own blue here, ignoring design tokens).
 * This drives the Light/Dark segmented toggle and similar button groups. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: #fff !important;
}

/* ===== SweetAlert2 dark mode =====
 * SweetAlert appends its popup to <body>; [data-bs-theme="dark"] on <html>
 * is an ancestor, so these scoped overrides take effect in dark mode. */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--surface) !important;
  color: var(--gray-700) !important;
}
[data-bs-theme="dark"] .swal2-title {
  color: var(--gray-900) !important;
}
[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal2-content {
  color: var(--gray-600) !important;
}
[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select {
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
  border-color: var(--gray-300) !important;
}
[data-bs-theme="dark"] .swal2-close {
  color: var(--gray-500) !important;
}
[data-bs-theme="dark"] .swal2-footer {
  border-top-color: var(--gray-200) !important;
  color: var(--gray-500) !important;
}