/* Alpine cloak — element je neviditeľný kým Alpine neinicializuje */
[x-cloak] { display: none !important; }

/* Scrollbar pre log container */
#log-container::-webkit-scrollbar       { width: 4px; }
#log-container::-webkit-scrollbar-track { background: transparent; }
#log-container::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────────────────
   Svetlá téma (jediná) — tmavé Tailwind utility v šablónach prepíšeme
   na svetlé ekvivalenty. Selektor `body .X` má vyššiu špecifickosť
   (0,1,1) než holé `.X` (0,1,0), takže prebije Tailwind class bez
   ohľadu na CSS load order.
   ───────────────────────────────────────────────────────────────────── */
:root { color-scheme: light; }

  body                              { background-color: #f9fafb; color: #111827; }
  /* body element samotný má .bg-gray-950 — selektor `body.X` (attached)
     prebije Tailwind .X. Selektor `body .X` (s medzerou) by matchoval
     iba potomkov. */
  body.bg-gray-950                  { background-color: #f9fafb; }
  body.text-gray-100                { color: #111827; }

  /* Pozadia */
  body .bg-gray-950                 { background-color: #f9fafb; }
  body .bg-gray-900                 { background-color: #ffffff; }
  body .bg-gray-800                 { background-color: #e5e7eb; }
  body .bg-gray-800\/30             { background-color: rgba(229, 231, 235, 0.5); }
  body .bg-gray-700                 { background-color: #d1d5db; }
  body .bg-gray-600                 { background-color: #9ca3af; }
  body .bg-black\/60                { background-color: #f3f4f6; }
  /* bg-black/70 (modal backdrop) ponechávame — overlay vyzerá rovnako v oboch režimoch */

  /* Borders */
  body .border-gray-800             { border-color: #e5e7eb; }
  body .border-gray-800\/40         { border-color: rgba(229, 231, 235, 0.7); }
  body .border-gray-700             { border-color: #d1d5db; }

  /* Text */
  body .text-gray-100               { color: #111827; }
  body .text-gray-200               { color: #1f2937; }
  body .text-gray-300               { color: #374151; }
  body .text-gray-400               { color: #4b5563; }
  body .text-gray-500               { color: #6b7280; }   /* nezmenené, čitateľné v oboch */
  body .text-gray-600               { color: #9ca3af; }
  body .text-gray-700               { color: #d1d5db; }

  /* Solid emerald button — funguje v oboch režimoch, ale dolaď drobné */
  body .bg-emerald-600              { background-color: #059669; }
  body .hover\:bg-emerald-500:hover { background-color: #10b981; }

  /* Status badge — farebné s alfou (na bielom pozadí by boli takmer čierne) */
  body .bg-green-900\/60            { background-color: #dcfce7; }
  body .bg-green-900\/50            { background-color: #d1fae5; }
  body .bg-green-900\/40            { background-color: #dcfce7; }
  body .bg-blue-900\/60             { background-color: #dbeafe; }
  body .bg-red-900\/60              { background-color: #fee2e2; }
  body .bg-red-900\/40              { background-color: #fecaca; }
  body .bg-red-900\/20              { background-color: #fee2e2; }
  body .bg-yellow-900\/60           { background-color: #fef3c7; }
  body .bg-yellow-900\/40           { background-color: #fef08a; }
  body .bg-yellow-900\/10           { background-color: #fefce8; }
  body .bg-yellow-950\/20           { background-color: #fefce8; }
  body .bg-yellow-950\/40           { background-color: #fef9c3; }

  body .text-green-200              { color: #14532d; }
  body .text-green-300              { color: #166534; }
  body .text-green-400              { color: #15803d; }
  body .text-green-500              { color: #15803d; }
  body .text-blue-300               { color: #1e40af; }
  body .text-blue-400               { color: #2563eb; }
  body .text-red-300                { color: #991b1b; }
  body .text-red-400                { color: #dc2626; }
  body .text-yellow-300             { color: #854d0e; }
  body .text-yellow-400             { color: #a16207; }
  body .text-yellow-500             { color: #a16207; }

  /* Yellow-tinted "Čaká na teba" border varianty */
  body .border-yellow-800\/60       { border-color: #fcd34d; }
  body .border-yellow-800\/30       { border-color: #fde68a; }
  body .border-yellow-800\/20       { border-color: #fef3c7; }

  /* Scrollbar — svetlejší thumb */
  #log-container::-webkit-scrollbar-thumb { background: #d1d5db; }


/* ── Doplnky pre plne svetlú tému (hover stavy, stavové bodky, badge) ── */
body .text-amber-400              { color: #b45309; }
body .bg-blue-950                 { background-color: #eff6ff; }
body .border-blue-800             { border-color: #bfdbfe; }
body .bg-green-400                { background-color: #22c55e; }
body .bg-red-400                  { background-color: #ef4444; }
body .bg-blue-400                 { background-color: #3b82f6; }
body .bg-yellow-800\/60           { background-color: #fde68a; }

body .hover\:text-gray-200:hover  { color: #111827; }
body .hover\:text-gray-300:hover  { color: #111827; }
body .hover\:text-red-400:hover   { color: #b91c1c; }
body .hover\:text-green-400:hover { color: #15803d; }
body .hover\:text-blue-300:hover  { color: #1e40af; }
body .hover\:bg-gray-600:hover    { background-color: #d1d5db; }
body .hover\:bg-gray-700:hover    { background-color: #e5e7eb; }
body .hover\:bg-gray-800\/30:hover  { background-color: rgba(229, 231, 235, 0.5); }
body .hover\:bg-red-900\/40:hover   { background-color: #fecaca; }
body .hover\:bg-green-900\/40:hover { background-color: #bbf7d0; }
body .hover\:bg-yellow-900\/10:hover { background-color: #fefce8; }
body .hover\:bg-yellow-800\/60:hover { background-color: #fcd34d; }