/* ============================================================
   CUSTOM STYLES - YN Shop
   Tailwind dimuat via CDN di index.html; file ini hanya berisi
   animasi, scrollbar custom, dan komponen kecil (toast, spinner)
   yang tidak bisa dicapai lewat utility class Tailwind saja.
   ============================================================ */

body {
    font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        .animate-fadeIn {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .pulse-badge {
            box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
            animation: pulse-ring 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
        }
        @keyframes pulse-ring {
            to { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
        }
        .spinner {
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 3px solid white;
            width: 18px;
            height: 18px;
            animation: spin 1s linear infinite;
            display: inline-block;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toast {
            background-color: white;
            color: #333;
            padding: 12px 18px;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 280px;
            max-width: 380px;
            transform: translateX(120%);
            transition: transform 0.3s ease-out;
            border: 1px solid #f1f5f9;
        }
        .toast.show { transform: translateX(0); }
        .toast-success { border-left: 4px solid #10b981; }
        .toast-error { border-left: 4px solid #ef4444; }
        .toast-info { border-left: 4px solid #3b82f6; }

        /* ============================================================
           CETAK LAPORAN PENJUALAN (Admin)
           Saat window.print() dipanggil, sembunyikan seluruh halaman
           kecuali area #laporan-print-area. Elemen dengan class
           `.no-print` (filter periode, tombol aksi, dsb) juga selalu
           disembunyikan dari hasil cetak/PDF.
           ============================================================ */
        @media print {
            body * { visibility: hidden; }
            #laporan-print-area, #laporan-print-area * { visibility: visible; }
            #laporan-print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 0;
                margin: 0;
                background: white !important;
                color: #111827 !important;
            }
            .no-print { display: none !important; }
        }