/*
 * SINTESA — stylesheet statis (TANPA proses build / npm run build).
 *
 * File ini menggantikan resources/css/app.css (Tailwind v4 lewat Vite) untuk
 * bagian CSS kustom yang BUKAN utility class Tailwind biasa. Utility class
 * Tailwind (class="..." di tiap file Blade) sekarang dilayani langsung oleh
 * Tailwind Play CDN (lihat <script src="https://cdn.tailwindcss.com...">
 * di layouts/app.blade.php & layouts/guest.blade.php) — jadi TIDAK perlu
 * proses build apa pun lagi, baik untuk Tailwind maupun untuk file ini.
 *
 * Dulu beberapa aturan di sini memakai fungsi theme() milik Tailwind (hanya
 * jalan saat di-build lewat Vite) — di file ini semua sudah diganti jadi
 * kode warna HEX biasa agar bisa langsung dipakai browser tanpa build:
 *   slate-300 #cbd5e1   slate-600 #475569   slate-50  #f8fafc
 *   slate-950 #020617   slate-800 #1e293b   emerald-50  #ecfdf5
 *   emerald-100 #d1fae5 emerald-200 #a7f3d0 emerald-800 #065f46
 *   emerald-950 #022c22
 */

[x-cloak] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar tipis & senada tema, biar sidebar/tabel tidak terasa "berat" */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

::selection {
    background-color: #a7f3d0;
    color: #022c22;
}

/* Latar bertekstur lembut untuk layout utama, di atas warna dasar slate */
.app-canvas {
    background-color: #f8fafc;
    background-image: radial-gradient(#d1fae5 1px, transparent 1px);
    background-size: 22px 22px;
}

@media (prefers-color-scheme: dark) {
    * {
        scrollbar-color: #475569 transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #475569;
    }

    ::selection {
        background-color: #065f46;
        color: #ecfdf5;
    }

    .app-canvas {
        background-color: #020617;
        background-image: radial-gradient(#1e293b 1px, transparent 1px);
        background-size: 22px 22px;
    }
}

/* Dipakai halaman login/guest: gradasi blur yang mengambang pelan di latar, &
   animasi masuk halus untuk kartu form — murni dekoratif, aman diabaikan oleh
   peramban lama (fallback-nya cuma elemen diam/tanpa animasi). */
@keyframes blob-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(24px, -32px) scale(1.08);
    }
    66% {
        transform: translate(-20px, 18px) scale(0.95);
    }
}

.animate-blob-slow {
    animation: blob-float 22s ease-in-out infinite;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .animate-blob-slow,
    .animate-fade-in-up {
        animation: none;
    }
}

/* Dipakai komponen Bootstrap nav-link / responsive-nav-link (sidebar) --
   Bootstrap sendiri tidak punya hover bawaan untuk class kustom ini. */
.bs-scope .sintesa-navlink:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

@media (prefers-color-scheme: dark) {
    .bs-scope .sintesa-navlink:hover {
        background-color: #1e293b;
        color: #f8fafc;
    }
}