@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
}

html {
  @apply antialiased;
}

body {
  @apply bg-slate-100 text-slate-800;
}

/* Subtle dotted-grid backdrop used on auth screens */
.auth-backdrop {
  background-color: #072727;
  background-image: radial-gradient(rgba(83, 209, 198, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Numeric values stay LTR inside RTL text */
.numeric {
  direction: ltr;
  unicode-bidi: embed;
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-slate-300 rounded-full;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400;
}

/* ============ Dark mode (class strategy) ============
   Pragmatic v1: remap the most common utility colors once, under .dark,
   so every existing surface darkens coherently without touching each file. */
.dark {
  color-scheme: dark;
}
.dark body {
  background-color: #0b1526;
  color: #dbe3ec;
}
.dark .bg-white { background-color: #101c2e; }
.dark .bg-slate-50, .dark .bg-slate-50\/60, .dark .bg-slate-50\/70 { background-color: #16233a; }
.dark .bg-slate-100 { background-color: #0b1526; }
.dark .hover\:bg-slate-50\/60:hover { background-color: #1a2942; }
.dark .text-slate-900 { color: #eef2f7; }
.dark .text-slate-800 { color: #dbe3ec; }
.dark .text-slate-700 { color: #c3cdd9; }
.dark .text-slate-600 { color: #9fadc0; }
.dark .text-slate-500 { color: #8393a9; }
.dark .text-slate-400 { color: #64748b; }
.dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-300 { border-color: #24354f; }
.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1d2c44; }
.dark .bg-slate-900\/50 { background-color: rgb(2 6 17 / 0.6); }
/* badges keep their hue but drop to translucent tints */
.dark .bg-emerald-50 { background-color: rgb(52 211 153 / 0.12); }
.dark .text-emerald-800, .dark .text-emerald-700 { color: #6ee7b7; }
.dark .bg-red-50 { background-color: rgb(248 113 113 / 0.12); }
.dark .text-red-700, .dark .text-red-600 { color: #fca5a5; }
.dark .bg-amber-50 { background-color: rgb(251 191 36 / 0.12); }
.dark .text-amber-700 { color: #fcd34d; }
.dark .bg-sky-50 { background-color: rgb(56 189 248 / 0.12); }
.dark .text-sky-700 { color: #7dd3fc; }
.dark .border-red-200 { border-color: rgb(248 113 113 / 0.35); }
.dark .border-bousla-200 { border-color: rgb(79 181 173 / 0.35); }
.dark input, .dark select, .dark textarea { background-color: #0d1930; }
.dark ::-webkit-scrollbar-thumb { background: #24354f; }