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

/* ============================================================
   Dark Mode — Global elementlere otomatik dark variants uygula
   Sayfa Vue dosyalarına dokunmadan ortak pattern'lara stil ver
   ============================================================ */
@layer base {
    /* Body & global text */
    html.dark body {
        color-scheme: dark;
    }
}

@layer components {
    /* Standart kart / panel — bg-white dark:bg-slate-900 ihtiyacı */
    html.dark .bg-white {
        background-color: rgb(15 23 42); /* slate-900 */
    }
    html.dark .bg-slate-50 {
        background-color: rgb(2 6 23); /* slate-950 */
    }
    html.dark .bg-slate-100 {
        background-color: rgb(15 23 42); /* slate-900 */
    }

    /* Border default */
    html.dark .border-slate-100,
    html.dark .border-slate-200 {
        border-color: rgb(30 41 59); /* slate-800 */
    }
    html.dark .border-slate-300 {
        border-color: rgb(51 65 85); /* slate-700 */
    }
    html.dark .divide-slate-100 > * + *,
    html.dark .divide-slate-200 > * + * {
        border-color: rgb(30 41 59);
    }

    /* Text colors */
    html.dark .text-slate-900 { color: rgb(241 245 249); } /* slate-100 */
    html.dark .text-slate-800 { color: rgb(226 232 240); } /* slate-200 */
    html.dark .text-slate-700 { color: rgb(203 213 225); } /* slate-300 */
    html.dark .text-slate-600 { color: rgb(148 163 184); } /* slate-400 */
    html.dark .text-slate-500 { color: rgb(100 116 139); } /* slate-500 — same */
    html.dark .text-slate-400 { color: rgb(100 116 139); } /* slate-500 */

    /* Hover backgrounds */
    html.dark .hover\:bg-slate-50:hover { background-color: rgb(30 41 59); }
    html.dark .hover\:bg-slate-100:hover { background-color: rgb(30 41 59); }

    /* Inputs / form elements */
    html.dark input[type="text"],
    html.dark input[type="email"],
    html.dark input[type="password"],
    html.dark input[type="number"],
    html.dark input[type="url"],
    html.dark input[type="date"],
    html.dark input[type="datetime-local"],
    html.dark input[type="search"],
    html.dark textarea,
    html.dark select {
        background-color: rgb(30 41 59); /* slate-800 */
        border-color: rgb(51 65 85); /* slate-700 */
        color: rgb(241 245 249);
    }
    html.dark input::placeholder,
    html.dark textarea::placeholder { color: rgb(100 116 139); }

    /* Code blocks */
    html.dark code:not(pre code) {
        background-color: rgb(30 41 59);
        color: rgb(203 213 225);
    }

    /* Tables / thead — bg-slate-50 üzerine ek kontrast */
    html.dark thead.bg-slate-50,
    html.dark thead .bg-slate-50 {
        background-color: rgb(15 23 42); /* slate-900 */
    }

    /* Soft state backgrounds (bilgi/uyarı/başarı kartları) — *-50 */
    html.dark .bg-amber-50 { background-color: rgb(69 26 3); }
    html.dark .bg-red-50 { background-color: rgb(69 10 10); }
    html.dark .bg-emerald-50 { background-color: rgb(6 44 22); }
    html.dark .bg-blue-50 { background-color: rgb(8 30 56); }
    html.dark .bg-indigo-50 { background-color: rgb(23 27 65); }
    html.dark .bg-orange-50 { background-color: rgb(67 20 7); }
    html.dark .bg-violet-50 { background-color: rgb(37 25 59); }

    /* Soft state borders — *-200 → *-800 tonu */
    html.dark .border-amber-200 { border-color: rgb(146 64 14); }
    html.dark .border-red-200 { border-color: rgb(153 27 27); }
    html.dark .border-emerald-200 { border-color: rgb(6 95 70); }
    html.dark .border-blue-200 { border-color: rgb(30 64 175); }
    html.dark .border-indigo-200 { border-color: rgb(55 48 163); }
    html.dark .border-orange-200 { border-color: rgb(154 52 18); }

    /* Soft state text */
    html.dark .text-amber-900,
    html.dark .text-amber-800,
    html.dark .text-amber-700 { color: rgb(252 211 77); }
    html.dark .text-red-900,
    html.dark .text-red-800,
    html.dark .text-red-700 { color: rgb(252 165 165); }
    html.dark .text-emerald-900,
    html.dark .text-emerald-800,
    html.dark .text-emerald-700 { color: rgb(110 231 183); }
    html.dark .text-blue-900,
    html.dark .text-blue-800,
    html.dark .text-blue-700 { color: rgb(147 197 253); }
    html.dark .text-indigo-900,
    html.dark .text-indigo-800,
    html.dark .text-indigo-700 { color: rgb(165 180 252); }

    /* Border-dashed alt-tonu */
    html.dark .border-dashed { border-color: rgb(51 65 85); }

    /* Indigo accent renkleri olduğu gibi kalır (zaten görünür) */
}

/* PWA standalone mode için */
@media (display-mode: standalone) {
    body { user-select: none; }
}
