/**
 * DARK MODE AUTOMÁTICO - Global overrides
 *
 * Este archivo sobrescribe las clases de Tailwind cuando .dark está activo
 * permitiendo que todas las páginas tengan dark mode sin modificar HTML
 */

/* ============================================
   BODY & MAIN LAYOUT OVERRIDES (app.css)
   ============================================ */
.dark body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

.dark .app-layout {
  background: #0f172a !important;
}

.dark .app-main-wrapper {
  background: #0f172a !important;
}

.dark .app-content {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* ============================================
   CARDS & SURFACES (app.css overrides)
   ============================================ */
.dark .kpi-card {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.dark .kpi-card .label {
  color: #94a3b8 !important;
}

.dark .kpi-card .value {
  color: #f8fafc !important;
}

.dark .surface-card,
.dark .surface-card-lean {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark .card-header {
  color: #94a3b8 !important;
}

/* ============================================
   FORMS (app.css overrides)
   ============================================ */
.dark .form-label-text {
  color: #cbd5e1 !important;
}

.dark .form-input {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.dark .form-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

.dark {
  /* ============================================
     BACKGROUNDS
     ============================================ */
  .bg-white { background-color: #1e293b !important; }
  .bg-slate-50 { background-color: #0f172a !important; }
  .bg-slate-100 { background-color: #1e293b !important; }
  .bg-slate-200 { background-color: #334155 !important; }
  .bg-gray-50 { background-color: #1e293b !important; }
  .bg-gray-100 { background-color: #374151 !important; }

  /* Backgrounds pastel */
  .bg-indigo-50 { background-color: #1e1b4b !important; }
  .bg-green-50 { background-color: #14532d !important; }
  .bg-red-50 { background-color: #7f1d1d !important; }
  .bg-amber-50 { background-color: #78350f !important; }
  .bg-blue-50 { background-color: #0c4a6e !important; }
  .bg-yellow-50 { background-color: #713f12 !important; }

  /* ============================================
     TEXT COLORS
     ============================================ */
  .text-slate-900 { color: #f8fafc !important; }
  .text-slate-800 { color: #e2e8f0 !important; }
  .text-slate-700 { color: #cbd5e1 !important; }
  .text-slate-600 { color: #94a3b8 !important; }
  .text-slate-500 { color: #64748b !important; }
  .text-gray-900 { color: #f9fafb !important; }
  .text-gray-800 { color: #e5e7eb !important; }
  .text-gray-700 { color: #d1d5db !important; }
  .text-gray-600 { color: #9ca3af !important; }

  /* ============================================
     BORDERS
     ============================================ */
  .border-slate-100 { border-color: rgba(255, 255, 255, 0.05) !important; }
  .border-slate-200 { border-color: rgba(255, 255, 255, 0.1) !important; }
  .border-slate-300 { border-color: rgba(255, 255, 255, 0.15) !important; }
  .border-gray-200 { border-color: rgba(255, 255, 255, 0.1) !important; }
  .border-gray-300 { border-color: rgba(255, 255, 255, 0.15) !important; }

  /* ============================================
     RING (FOCUS BORDERS)
     ============================================ */
  .ring-slate-300 { --tw-ring-color: rgb(71 85 105) !important; }
  .ring-gray-300 { --tw-ring-color: rgb(75 85 99) !important; }

  /* ============================================
     SHADOWS
     ============================================ */
  .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
  .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important; }
  .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; }
  .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6) !important; }
  .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7) !important; }
  .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important; }

  /* ============================================
     HOVER STATES
     ============================================ */
  .hover\:bg-slate-50:hover { background-color: #334155 !important; }
  .hover\:bg-slate-100:hover { background-color: #475569 !important; }
  .hover\:bg-gray-50:hover { background-color: #374151 !important; }
  .hover\:bg-gray-100:hover { background-color: #4b5563 !important; }

  .hover\:text-slate-900:hover { color: #f8fafc !important; }
  .hover\:text-gray-900:hover { color: #f9fafb !important; }

  /* ============================================
     SPECIFIC ELEMENTS
     ============================================ */

  /* Tables */
  table thead { background-color: #1e293b !important; }
  table tbody { background-color: #0f172a !important; }
  table tr:hover { background-color: #1e293b !important; }
  table th { color: #94a3b8 !important; }
  table td { color: #cbd5e1 !important; }

  .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #64748b !important;
  }

  /* Disabled inputs */
  input:disabled,
  select:disabled,
  textarea:disabled {
    background-color: #1e293b !important;
    color: #64748b !important;
    opacity: 0.6;
  }

  /* ============================================
     BADGES & PILLS
     ============================================ */
  .bg-indigo-100 { background-color: #312e81 !important; }
  .text-indigo-800 { color: #c7d2fe !important; }
  .text-indigo-700 { color: #a5b4fc !important; }
  .text-indigo-600 { color: #818cf8 !important; }

  .bg-green-100 { background-color: #14532d !important; }
  .text-green-800 { color: #86efac !important; }
  .text-green-700 { color: #4ade80 !important; }

  .bg-red-100 { background-color: #7f1d1d !important; }
  .text-red-800 { color: #fca5a5 !important; }
  .text-red-700 { color: #f87171 !important; }

  .bg-amber-100 { background-color: #78350f !important; }
  .text-amber-800 { color: #fcd34d !important; }
  .text-amber-700 { color: #fbbf24 !important; }

  .bg-yellow-100 { background-color: #713f12 !important; }
  .text-yellow-800 { color: #fde047 !important; }
  .text-yellow-700 { color: #facc15 !important; }

  /* ============================================
     BUTTONS (complementar)
     ============================================ */
  .bg-indigo-600 { background-color: #6366f1 !important; }
  .hover\:bg-indigo-700:hover { background-color: #4f46e5 !important; }

  .bg-slate-800 { background-color: #1e293b !important; }
  .hover\:bg-slate-900:hover { background-color: #0f172a !important; }

  /* ============================================
     PLACEHOLDER COLORS
     ============================================ */
  .placeholder\:text-slate-400::placeholder { color: #64748b !important; }
  .placeholder\:text-gray-400::placeholder { color: #6b7280 !important; }

  /* ============================================
     MISC
     ============================================ */

  /* Backdrop blur */
  .bg-slate-900\/70 { background-color: rgba(15, 23, 42, 0.9) !important; }
  .bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.85) !important; }

  /* Scrollbars (Chrome/Edge) */
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  *::-webkit-scrollbar-track {
    background: #1e293b;
  }

  *::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: #64748b;
  }

  /* ============================================
     PASTEL CARDS (usado en muchas páginas)
     ============================================ */
  .pastel-card,
  .pastel-surface-card {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .pastel-pill {
    background: #334155 !important;
    color: #cbd5e1 !important;
  }

  /* ============================================
     HEADINGS & TEXT
     ============================================ */
  h1, h2, h3, h4, h5, h6 {
    color: #f8fafc !important;
  }

  p {
    color: #cbd5e1 !important;
  }

  /* ============================================
     LINKS
     ============================================ */
  a:not(.no-underline) {
    color: #818cf8 !important;
  }

  a:hover {
    color: #a5b4fc !important;
  }
}