/*
 * Theme Overrides — loaded via <link> tag, OUTSIDE PostCSS/Tailwind pipeline.
 * This file is NOT processed by Tailwind's purger, so these rules survive the build.
 * Forces theme CSS variables to override compiled Tailwind utility classes.
 */

/* ═══════════════════════════════════════
   BACKGROUNDS
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .bg-white,
[data-theme]:not([data-theme="default"]) .dark\:bg-white {
  background-color: var(--theme-bg-card) !important;
}
[data-theme]:not([data-theme="default"]) .bg-gray-50 {
  background-color: var(--theme-bg-secondary) !important;
}
[data-theme]:not([data-theme="default"]) .bg-gray-100 {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:bg-slate-800 {
  background-color: var(--theme-bg-card) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:bg-slate-900 {
  background-color: var(--theme-bg-primary) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:bg-slate-950 {
  background-color: var(--theme-bg-primary) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:bg-slate-700 {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:bg-slate-700\/30 {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .bg-slate-800 {
  background-color: var(--theme-bg-sidebar) !important;
}

/* ═══════════════════════════════════════
   TEXT COLORS
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .text-gray-900,
[data-theme]:not([data-theme="default"]) .text-gray-800,
[data-theme]:not([data-theme="default"]) .text-gray-700 {
  color: var(--theme-text-primary) !important;
}
[data-theme]:not([data-theme="default"]) .text-gray-600,
[data-theme]:not([data-theme="default"]) .text-gray-500 {
  color: var(--theme-text-secondary) !important;
}
[data-theme]:not([data-theme="default"]) .text-gray-400,
[data-theme]:not([data-theme="default"]) .text-gray-300 {
  color: var(--theme-text-muted) !important;
}
[data-theme]:not([data-theme="default"]) .text-slate-900,
[data-theme]:not([data-theme="default"]) .text-slate-800,
[data-theme]:not([data-theme="default"]) .text-slate-700 {
  color: var(--theme-text-primary) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:text-white,
[data-theme]:not([data-theme="default"]) .dark\:text-gray-100,
[data-theme]:not([data-theme="default"]) .dark\:text-gray-200,
[data-theme]:not([data-theme="default"]) .dark\:text-gray-300 {
  color: var(--theme-text-primary) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:text-gray-400,
[data-theme]:not([data-theme="default"]) .dark\:text-slate-400 {
  color: var(--theme-text-muted) !important;
}
[data-theme]:not([data-theme="default"]) .text-sm,
[data-theme]:not([data-theme="default"]) .text-xs {
  color: inherit;
}

/* ═══════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .border-gray-200,
[data-theme]:not([data-theme="default"]) .border-gray-100,
[data-theme]:not([data-theme="default"]) .border-gray-300,
[data-theme]:not([data-theme="default"]) .border-gray-50 {
  border-color: var(--theme-border) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:border-slate-700,
[data-theme]:not([data-theme="default"]) .dark\:border-slate-600 {
  border-color: var(--theme-border) !important;
}
[data-theme]:not([data-theme="default"]) .divide-gray-100 > *,
[data-theme]:not([data-theme="default"]) .divide-gray-200 > * {
  border-color: var(--theme-border) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:divide-slate-700 > * {
  border-color: var(--theme-border) !important;
}

/* ═══════════════════════════════════════
   BRAND / ACCENT
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .bg-brand-500 {
  background-color: var(--theme-brand-500) !important;
}
[data-theme]:not([data-theme="default"]) .bg-brand-600 {
  background-color: var(--theme-brand-600) !important;
}
[data-theme]:not([data-theme="default"]) .hover\:bg-brand-600:hover {
  background-color: var(--theme-brand-600) !important;
}
[data-theme]:not([data-theme="default"]) .text-brand-500 {
  color: var(--theme-accent) !important;
}
[data-theme]:not([data-theme="default"]) .text-brand-600 {
  color: var(--theme-accent) !important;
}
[data-theme]:not([data-theme="default"]) .ring-brand-400 {
  --tw-ring-color: var(--theme-accent) !important;
}

/* ═══════════════════════════════════════
   HOVER STATES
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .hover\:bg-gray-50:hover {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .hover\:bg-gray-100:hover {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:hover\:bg-slate-700:hover {
  background-color: var(--theme-bg-hover) !important;
}
[data-theme]:not([data-theme="default"]) .dark\:hover\:bg-slate-700\/30:hover {
  background-color: var(--theme-bg-hover) !important;
}

/* ═══════════════════════════════════════
   INPUTS & FORMS
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) input:not([type="checkbox"]):not([type="radio"]),
[data-theme]:not([data-theme="default"]) select,
[data-theme]:not([data-theme="default"]) textarea {
  background-color: var(--theme-bg-input) !important;
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

/* ═══════════════════════════════════════
   SHADOWS
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3) !important;
}
[data-theme]:not([data-theme="default"]) .shadow-xl {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* ═══════════════════════════════════════
   MATRIX: semi-transparent backgrounds
   so digital rain shows through
   ═══════════════════════════════════════ */
[data-theme="matrix"] #root {
  position: relative;
  z-index: 1;
}
[data-theme="matrix"] .bg-white {
  background-color: rgba(5, 15, 5, 0.88) !important;
}
[data-theme="matrix"] .bg-gray-50 {
  background-color: rgba(5, 10, 5, 0.75) !important;
}

/* ═══════════════════════════════════════
   ARCTIC: light theme adjustments
   ═══════════════════════════════════════ */
[data-theme="arctic"] .bg-white {
  background-color: #ffffff !important;
}
[data-theme="arctic"] .bg-gray-50 {
  background-color: #f0f7ff !important;
}
[data-theme="arctic"] .text-gray-900,
[data-theme="arctic"] .text-gray-800,
[data-theme="arctic"] .text-gray-700 {
  color: #0c2744 !important;
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════ */
@media (max-width: 639px) {
  /* Compact table cells — keep readable */
  [data-theme] td, [data-theme] th {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Headings: readable but not oversized */
  [data-theme] h1 {
    font-size: 1.25rem !important;
  }
  [data-theme] h2 {
    font-size: 1.125rem !important;
  }

  /* Compact sidebar when shown as drawer */
  [data-theme] aside {
    max-width: 280px;
  }
}

/* Landscape phone optimization */
@media (max-width: 639px) and (orientation: landscape) {
  [data-theme] header {
    height: 2.5rem !important;
  }
}

/* ═══════════════════════════════════════
   PREMIUM CARD STYLING — all themes
   ═══════════════════════════════════════ */
[data-theme] .rounded-xl {
  border-radius: 16px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-theme] .rounded-xl:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════
   PREMIUM TABLE STYLING
   ═══════════════════════════════════════ */
[data-theme] table {
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme] th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
}
[data-theme] tr {
  transition: background-color 0.15s ease;
}

/* ═══════════════════════════════════════
   PREMIUM INPUT FOCUS STYLING
   ═══════════════════════════════════════ */
[data-theme] input:focus,
[data-theme] select:focus,
[data-theme] textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
  border-color: var(--theme-accent) !important;
  outline: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ═══════════════════════════════════════
   PREMIUM BUTTON STYLING
   ═══════════════════════════════════════ */
[data-theme] button {
  transition: all 0.15s ease;
}

/* ═══════════════════════════════════════
   PREMIUM SCROLLBAR — all non-default themes
   ═══════════════════════════════════════ */
[data-theme]:not([data-theme="default"]) ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme]:not([data-theme="default"]) ::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme]:not([data-theme="default"]) ::-webkit-scrollbar-thumb {
  background: var(--theme-border);
  border-radius: 3px;
}
[data-theme]:not([data-theme="default"]) ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-muted);
}

/* ═══════════════════════════════════════
   PREMIUM STATUS BADGES
   ═══════════════════════════════════════ */
[data-theme] .status-active,
[data-theme] .status-pending,
[data-theme] .status-won,
[data-theme] .status-lost {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
}

/* ═══════════════════════════════════════
   PREMIUM SIDEBAR
   ═══════════════════════════════════════ */
[data-theme] aside {
  transition: width 0.2s ease, transform 0.3s ease;
}
[data-theme] aside a {
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

/* ═══════════════════════════════════════
   PREMIUM HEADER
   ═══════════════════════════════════════ */
/* backdrop-filter removed — creates stacking context that traps dropdown menus */

/* ═══════════════════════════════════════
   MOBILE: degrade heavy effects gracefully
   ═══════════════════════════════════════ */
@media (max-width: 639px) {
  [data-theme] .rounded-xl:hover {
    box-shadow: none !important;
    transform: none !important;
  }
}