/**
 * Centralized Dark Mode Overrides
 * All .dark { ... } overrides in one place.
 * Component-specific dark styles migrated from:
 *   - buttons.css
 *   - cards.css
 *   - forms.css
 *   - modal.css
 *   - tables.css
 *   - sidebar.css
 *
 * @author Amit Haridas, ConcreteInfo
 */

/* ============================================
   SEMANTIC TOKENS OVERRIDE
   ============================================ */
.dark {
  /* Semantic background tokens (overrides of :root defaults) */
  --bg-elevated: var(--color-gray-900);
}

/* ============================================
   BUTTONS
   ============================================ */
.dark .btn-secondary {
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-700);
}

.dark .btn-secondary:hover {
  background-color: var(--color-gray-600);
  border-color: var(--color-gray-600);
}

.dark .btn-ghost:hover {
  background-color: var(--color-gray-800);
}

/* ============================================
   CARDS
   ============================================ */
.dark .card--interactive:hover {
  border-color: hsl(var(--color-brand-h), 50%, 30%);
}

.dark .stat-card__trend--up {
  background-color: hsl(142, 76%, 20%);
}

.dark .stat-card__trend--down {
  background-color: hsl(0, 84%, 20%);
}

/* ============================================
   FORMS
   ============================================ */
.dark .input:focus {
  box-shadow: 0 0 0 3px hsl(var(--color-brand-h), 50%, 20%);
}

.dark .select:focus {
  box-shadow: 0 0 0 3px hsl(var(--color-brand-h), 50%, 20%);
}

.dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b0b0b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* ============================================
   MODALS
   ============================================ */
.dark .modal-body::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
}

.dark .modal-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
}

.dark [x-show][class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
.dark .fixed.inset-0 [class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
.dark .fixed.inset-0 [class*="max-h-"]::-webkit-scrollbar-thumb {
  background: var(--color-gray-700);
}

/* ============================================
   TABLES
   ============================================ */
.dark .table tbody tr:hover {
  background-color: var(--color-gray-800);
}

.dark .table-hover tbody tr:hover {
  background-color: var(--color-gray-800);
}

/* ============================================
   LAYOUT — SIDEBAR + HEADER
   ============================================ */
.dark .sidebar {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-800);
}

.dark .sidebar-header {
  background-color: var(--color-gray-900);
  border-bottom-color: var(--color-gray-700);
}

.dark .sidebar-close {
  color: var(--color-gray-400);
}

.dark .sidebar-close:hover {
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
}

.dark .sidebar-user {
  background-color: var(--color-gray-900);
}

.dark .sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.dark .sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--color-gray-700);
}

.dark .sidebar-nav {
  background-color: transparent;
}

.dark .sidebar-section-title {
  color: var(--color-gray-400);
}

.dark .sidebar-section-title:hover {
  background-color: var(--color-gray-800);
  color: var(--color-gray-200);
}

.dark .sidebar-link {
  color: var(--color-gray-300);
}

.dark .sidebar-link:hover {
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
}

.dark .sidebar-link.active {
  background-color: var(--color-brand-900);
  color: var(--color-brand-100);
}

.dark .sidebar-link.text-danger {
  color: hsl(0, 84%, 65%);
}

.dark .sidebar-link.text-danger:hover {
  background-color: hsl(0, 84%, 15%);
}

.dark .topbar {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-700);
}

.dark .sidebar-toggle:hover {
  background-color: var(--color-gray-800);
}

.dark .topbar-brand {
  color: var(--color-gray-100);
}

.dark .topbar-actions button[data-theme-toggle]:hover {
  background-color: var(--color-gray-800);
}

/* Theme toggle icon swap */
.dark .theme-toggle .icon-sun {
  display: none;
}

.dark .theme-toggle .icon-moon {
  display: block;
}

/* ============================================
   BUTTONS — additional variants
   ============================================ */
.dark .btn-outline {
  border-color: hsl(14, 77%, 55%);
  color: hsl(14, 77%, 60%);
}
.dark .btn-outline:hover {
  background: hsl(14, 77%, 40%);
  color: var(--text-inverse);
  border-color: hsl(14, 77%, 40%);
}
.dark .btn-outline-danger {
  border-color: hsl(0, 84%, 55%);
  color: hsl(0, 84%, 60%);
}
.dark .btn-outline-success {
  border-color: hsl(142, 76%, 40%);
  color: hsl(142, 76%, 50%);
}
.dark .btn-danger {
  background-color: hsl(0, 84%, 50%);
  border-color: hsl(0, 84%, 50%);
}
.dark .btn-success {
  background-color: hsl(142, 76%, 40%);
  border-color: hsl(142, 76%, 40%);
}
.dark .btn-warning {
  background-color: hsl(45, 93%, 42%);
  border-color: hsl(45, 93%, 42%);
  color: var(--color-gray-100);
}
.dark .btn-info {
  background-color: hsl(199, 89%, 40%);
  border-color: hsl(199, 89%, 40%);
}

/* ============================================
   CARDS — subtle header dark mode
   ============================================ */
/* Card header dark mode — handled by --card-header-* design tokens */

/* ============================================
   FORMS — comprehensive dark inputs
   ============================================ */
.dark .input,
.dark .select,
.dark textarea {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-700);
  color: var(--text-primary);
}
.dark .input::placeholder,
.dark textarea::placeholder {
  color: var(--color-gray-500);
}
.dark .input:focus,
.dark .select:focus,
.dark textarea:focus {
  border-color: hsl(14, 77%, 55%);
  box-shadow: 0 0 0 3px hsl(14, 50%, 20%);
}
.dark .input:disabled,
.dark .select:disabled,
.dark textarea:disabled {
  background-color: var(--color-gray-800);
  color: var(--color-gray-500);
}

/* ============================================
   TABLES — comprehensive dark mode
   ============================================ */
.dark .table th {
  background-color: var(--color-gray-800);
  color: var(--color-gray-400);
  border-bottom-color: var(--color-gray-700);
}
.dark .table td {
  border-bottom-color: var(--color-gray-800);
}
.dark .table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ============================================
   TESTING FORMS — section headers
   ============================================ */
.dark .tf-section {
  border-color: var(--color-gray-800);
}
.dark .tf-section-header:hover {
  background: var(--color-gray-800);
}