/* ============================================
   ADMIN DARK MODE THEME
   Global CSS overrides for dark mode in the admin panel.
   This uses html.dark to apply dark variants to all common
   patterns used across admin components, without needing
   to modify each component individually.
   ============================================ */

/* ---- BASE ADMIN BACKGROUNDS ---- */
html.dark .bg-\[\#F4F5F7\] {
  background-color: #0f172a !important;
}

html.dark .bg-white {
  background-color: #1e293b !important;
}

html.dark .bg-white\/60 {
  background-color: rgba(30, 41, 59, 0.6) !important;
}

html.dark .bg-white\/80 {
  background-color: rgba(30, 41, 59, 0.8) !important;
}

html.dark .bg-white\/90 {
  background-color: rgba(30, 41, 59, 0.9) !important;
}

html.dark .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- SURFACE VARIANTS ---- */
html.dark .bg-slate-50 {
  background-color: #1e293b !important;
}

html.dark .bg-slate-100 {
  background-color: #334155 !important;
}

html.dark .bg-slate-100\/50 {
  background-color: rgba(51, 65, 85, 0.5) !important;
}

html.dark .bg-stone-50 {
  background-color: #1e293b !important;
}

html.dark .bg-stone-100 {
  background-color: #334155 !important;
}

html.dark .bg-\[\#fdfdfd\] {
  background-color: #1e293b !important;
}

/* ---- HOVER BACKGROUNDS ---- */
html.dark .hover\:bg-slate-50:hover {
  background-color: #334155 !important;
}

html.dark .hover\:bg-slate-100:hover {
  background-color: #475569 !important;
}

html.dark .hover\:bg-slate-200:hover {
  background-color: #475569 !important;
}

html.dark .hover\:bg-stone-50:hover {
  background-color: #334155 !important;
}

html.dark .hover\:bg-stone-100:hover {
  background-color: #334155 !important;
}

html.dark .hover\:bg-white:hover {
  background-color: #334155 !important;
}

/* ---- TEXT COLORS ---- */
html.dark .text-slate-900 {
  color: #f1f5f9 !important;
}

html.dark .text-slate-800 {
  color: #e2e8f0 !important;
}

html.dark .text-slate-700 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-600 {
  color: #94a3b8 !important;
}

html.dark .text-slate-500 {
  color: #64748b !important;
}

html.dark .text-stone-600 {
  color: #94a3b8 !important;
}

html.dark .text-stone-500 {
  color: #64748b !important;
}

html.dark .text-stone-400 {
  color: #64748b !important;
}

html.dark .text-stone-300 {
  color: #cbd5e1 !important;
}

/* ---- BORDER COLORS ---- */
html.dark .border-slate-200 {
  border-color: #334155 !important;
}

html.dark .border-slate-200\/60 {
  border-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark .border-slate-100 {
  border-color: #1e293b !important;
}

html.dark .border-slate-300 {
  border-color: #475569 !important;
}

html.dark .border-stone-200 {
  border-color: #334155 !important;
}

html.dark .border-stone-200\/60 {
  border-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark .border-stone-100 {
  border-color: #1e293b !important;
}

html.dark .border-stone-300 {
  border-color: #475569 !important;
}

/* ---- FORM INPUTS (Global) ---- */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"],
html.dark textarea,
html.dark select {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html.dark input[type="text"]::placeholder,
html.dark input[type="email"]::placeholder,
html.dark input[type="number"]::placeholder,
html.dark input[type="password"]::placeholder,
html.dark input[type="search"]::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="number"]:focus,
html.dark input[type="password"]:focus,
html.dark input[type="search"]:focus,
html.dark textarea:focus,
html.dark select:focus {
  background-color: #334155 !important;
  border-color: #60a5fa !important;
}

/* ---- CHECKBOXES ---- */
html.dark input[type="checkbox"] {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

/* ---- MODALS & OVERLAYS ---- */
html.dark .bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ---- SHADOW ADJUSTMENTS ---- */
html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
}

html.dark .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* ---- BADGE / PILL BACKGROUNDS ---- */
html.dark .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

html.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.1) !important;
}

html.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1) !important;
}

html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.1) !important;
}

html.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

/* ---- RING OFFSETS ---- */
html.dark .ring-offset-\[\#F4F5F7\] {
  --tw-ring-offset-color: #0f172a !important;
}

html.dark .ring-offset-white {
  --tw-ring-offset-color: #1e293b !important;
}

/* ---- DIVIDERS ---- */
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #1e293b !important;
}

html.dark .divide-stone-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

/* ---- SCROLLBAR (for components that show scrollbars) ---- */
html.dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ---- YELLOW WARNING BANNERS ---- */
html.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.08) !important;
}

html.dark .text-yellow-600 {
  color: #fbbf24 !important;
}

html.dark .text-yellow-700 {
  color: #fcd34d !important;
}

html.dark .border-yellow-400 {
  border-color: #d97706 !important;
}

/* ---- FOCUS RING ---- */
html.dark .focus\:bg-white:focus {
  background-color: #334155 !important;
}

/* ---- PROSE (rich text / markdown) ---- */
html.dark .prose {
  color: #cbd5e1 !important;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
  color: #f1f5f9 !important;
}

html.dark .prose a {
  color: #60a5fa !important;
}

html.dark .prose strong {
  color: #e2e8f0 !important;
}

html.dark .prose code {
  color: #e2e8f0 !important;
  background-color: #334155 !important;
}

html.dark .prose pre {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* ---- TABLE STYLES ---- */
html.dark table {
  border-color: #334155 !important;
}

html.dark th {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

html.dark td {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark tr:hover td {
  background-color: rgba(51, 65, 85, 0.5) !important;
}

html.dark tbody tr {
  border-color: #334155 !important;
}

/* ---- TRANSITION FOR SMOOTH THEME SWITCHING ---- */
/* Only transition direct admin containers, not every element */
html {
  transition: background-color 300ms ease, color 300ms ease;
}

/* Target main admin UI containers for smooth theme switching */
html.dark header,
html.dark main,
html.dark [id="admin-main-area"],
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
}


/* ---- RECARTS DARK MODE (Dashboard charts) ---- */
html.dark .recharts-cartesian-grid-horizontal line,
html.dark .recharts-cartesian-grid-vertical line {
  stroke: #334155 !important;
}

html.dark .recharts-text {
  fill: #94a3b8 !important;
}

html.dark .recharts-tooltip-wrapper .recharts-default-tooltip {
  background-color: #1e293b !important;
  border-color: #475569 !important;
}

/* ---- MESSAGES MODULE (Slack-like) - Already dark sidebar, only fix main panel ---- */
html.dark .bg-\[\#1A1F2C\] {
  background-color: #0f172a !important;
}

/* ---- ACCENT COLORS PRESERVATION ---- */
/* These should NOT change in dark mode as they are brand colors */
/* gold-accent, med-blue remain the same */

/* ---- CALENDAR / DROPDOWN OVERLAYS ---- */
html.dark .bg-white.rounded-lg,
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-3xl {
  background-color: #1e293b !important;
}

/* ---- DASHED BORDERS ---- */
html.dark .border-dashed {
  border-color: #475569 !important;
}

/* ---- SPECIFIC GREEN STATUS INDICATORS ---- */
html.dark .text-green-600 {
  color: #4ade80 !important;
}

html.dark .text-green-700 {
  color: #4ade80 !important;
}

html.dark .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.15) !important;
}

/* ---- PURPLE/PINK FOR TAGS ---- */
html.dark .bg-purple-100 {
  background-color: rgba(168, 85, 247, 0.15) !important;
}

/* ---- FOCUS-WITHIN ---- */
html.dark .focus-within\:bg-white:focus-within {
  background-color: #334155 !important;
}

/* ============================================
   ADMIN-SPECIFIC DARK MODE PATTERNS
   These target specific structural patterns
   found across admin modules.
   ============================================ */

/* Cards with header bars */
html.dark [class*="bg-slate-50"][class*="border-b"] {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Empty state icons */
html.dark [class*="bg-slate-50"][class*="rounded-full"] {
  background-color: #334155 !important;
}