/* Custom Styles untuk Aplikasi Kasir POS Warung Kita */
body {
    -webkit-tap-highlight-color: transparent;
    background-color: #f3f4f6;
}

/* Kustomisasi scrollbar halus */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================================
   PENGATURAN KHUSUS CETAK STRUK KASIR (THERMAL)
   ================================================---------- */
@media print {
    /* Sembunyikan seluruh halaman web */
    body * {
        visibility: hidden;
    }
    
    /* Tampilkan hanya bagian kotak struknya saja */
    #modal-struk, #modal-struk * {
        visibility: visible;
    }

    /* Hilangkan tombol Tutup dan Cetak yang ada di dalam struk saat dicetak */
    #modal-struk button {
        display: none !important;
    }

    /* Atur posisi modal struk agar rata kiri-atas dan memenuhi lebar kertas roll thermal */
    #modal-struk {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        height: auto !important;
        background: white !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Catatan: Aturan @page (ukuran kertas 58mm/80mm) TIDAK lagi hardcode di sini.
       Ukuran kertas sekarang diatur otomatis oleh script.js (fungsi terapkanUkuranKertasCetak)
       mengikuti pilihan di menu "Pengaturan Toko & Printer", lalu disisipkan sebagai
       <style id="style-dynamic-print"> ke <head> pada saat aplikasi dimuat / pengaturan disimpan. */
}

/* Logo di struk dicetak hitam-putih kontras agar jelas di printer thermal */
@media print {
    #modal-struk #struk-logo {
        filter: grayscale(1) contrast(1.6);
    }
}


/* =====================================================================
   TEMA TAMPILAN (warna utama + latar + gaya kartu)
   - Tema "Merah Klasik" = bawaan: tidak ada atribut data-tema, tampilan tidak berubah.
   - Tema lain aktif lewat <html data-tema="biru|hijau|ungu|oranye|abu"> (diatur tema.js).
   - Elemen bertanda class "tetap-merah" (hapus, stok menipis, error) TIDAK ikut berganti warna.
   - text-red-500 dan hover:text-red-700 (tombol hapus) sengaja tidak ditimpa.
   ===================================================================== */
html[data-tema="biru"] {
    --p50: 239 246 255; --p100: 219 234 254; --p200: 191 219 254; --p400: 96 165 250;
    --p500: 59 130 246; --p600: 37 99 235; --p700: 29 78 216; --p800: 30 64 175; --p900: 30 58 138;
    --bg-halaman: #eef4fb; --kartu-radius: 1rem; --kartu-shadow: 0 2px 10px rgb(37 99 235 / .10);
    --kartu-border: #dbeafe; --header-radius: 1.75rem;
    --grad: linear-gradient(135deg, rgb(37 99 235), rgb(30 64 175));
}
html[data-tema="hijau"] {
    --p50: 236 253 245; --p100: 209 250 229; --p200: 167 243 208; --p400: 52 211 153;
    --p500: 16 185 129; --p600: 5 150 105; --p700: 4 120 87; --p800: 6 95 70; --p900: 6 78 59;
    --bg-halaman: #effaf3; --kartu-radius: .75rem; --kartu-shadow: 0 1px 6px rgb(5 150 105 / .12);
    --kartu-border: #d1fae5; --header-radius: 1.5rem;
    --grad: linear-gradient(135deg, rgb(5 150 105), rgb(6 95 70));
}
html[data-tema="ungu"] {
    --p50: 245 243 255; --p100: 237 233 254; --p200: 221 214 254; --p400: 167 139 250;
    --p500: 139 92 246; --p600: 124 58 237; --p700: 109 40 217; --p800: 91 33 182; --p900: 76 29 149;
    --bg-halaman: #f5f2fb; --kartu-radius: 1.25rem; --kartu-shadow: 0 4px 14px rgb(124 58 237 / .12);
    --kartu-border: #ede9fe; --header-radius: 2rem;
    --grad: linear-gradient(135deg, rgb(124 58 237), rgb(91 33 182));
}
html[data-tema="oranye"] {
    --p50: 255 247 237; --p100: 255 237 213; --p200: 254 215 170; --p400: 251 146 60;
    --p500: 249 115 22; --p600: 234 88 12; --p700: 194 65 12; --p800: 154 52 18; --p900: 124 45 18;
    --bg-halaman: #fdf6ee; --kartu-radius: 1rem; --kartu-shadow: 0 3px 12px rgb(234 88 12 / .12);
    --kartu-border: #fed7aa; --header-radius: 1.5rem;
    --grad: linear-gradient(135deg, rgb(234 88 12), rgb(154 52 18));
}
html[data-tema="abu"] {
    --p50: 248 250 252; --p100: 241 245 249; --p200: 226 232 240; --p400: 148 163 184;
    --p500: 100 116 139; --p600: 51 65 85; --p700: 30 41 59; --p800: 15 23 42; --p900: 2 6 23;
    --bg-halaman: #eceff3; --kartu-radius: .375rem; --kartu-shadow: none;
    --kartu-border: #cbd5e1; --header-radius: .75rem;
    --grad: none;
}

/* Latar halaman (mode gelap tetap menang karena memakai style inline) */
html[data-tema] body.bg-gray-100 { background-color: var(--bg-halaman); }

/* Header berbentuk sesuai tema */
html[data-tema] .rounded-b-3xl {
    border-bottom-left-radius: var(--header-radius);
    border-bottom-right-radius: var(--header-radius);
}

/* Gaya kartu (kartu putih berbayang + berborder; tidak menyentuh border amber/merah penanda stok) */
html[data-tema] :where(.bg-white.shadow-sm.border:not([class*="border-amber"]):not([class*="border-red"])) {
    border-color: var(--kartu-border);
    box-shadow: var(--kartu-shadow);
}
html[data-tema] :where(.bg-white.shadow-sm.border.rounded-xl, .bg-white.shadow-sm.border.rounded-2xl) {
    border-radius: var(--kartu-radius);
}

/* Warna utama: menimpa palet merah Tailwind */
html[data-tema] .bg-red-50:not(.tetap-merah)  { background-color: rgb(var(--p50)); }
html[data-tema] .bg-red-100:not(.tetap-merah) { background-color: rgb(var(--p100)); }
html[data-tema] .bg-red-500:not(.tetap-merah) { background-color: rgb(var(--p500)); }
html[data-tema] .bg-red-600:not(.tetap-merah) { background-color: rgb(var(--p600)); }
html[data-tema] .bg-red-700:not(.tetap-merah) { background-color: rgb(var(--p700)); background-image: var(--grad); }
html[data-tema] .bg-red-800:not(.tetap-merah) { background-color: rgb(var(--p800)); }
html[data-tema] .bg-red-800\/65:not(.tetap-merah) { background-color: rgb(var(--p800) / .65); }

html[data-tema] .text-red-100:not(.tetap-merah) { color: rgb(var(--p100)); }
html[data-tema] .text-red-200:not(.tetap-merah) { color: rgb(var(--p200)); }
html[data-tema] .text-red-600:not(.tetap-merah) { color: rgb(var(--p600)); }
html[data-tema] .text-red-700:not(.tetap-merah) { color: rgb(var(--p700)); }

html[data-tema] .border-red-100:not(.tetap-merah) { border-color: rgb(var(--p100)); }
html[data-tema] .border-red-200:not(.tetap-merah) { border-color: rgb(var(--p200)); }
html[data-tema] .border-red-500:not(.tetap-merah) { border-color: rgb(var(--p500)); }
html[data-tema] .border-red-600:not(.tetap-merah) { border-color: rgb(var(--p600)); }

html[data-tema] .hover\:bg-red-50:hover:not(.tetap-merah)  { background-color: rgb(var(--p50)); }
html[data-tema] .hover\:bg-red-100:hover:not(.tetap-merah) { background-color: rgb(var(--p100)); }
html[data-tema] .hover\:bg-red-700:hover:not(.tetap-merah) { background-color: rgb(var(--p700)); }
html[data-tema] .hover\:bg-red-900:hover:not(.tetap-merah) { background-color: rgb(var(--p900)); }
html[data-tema] .hover\:text-red-200:hover:not(.tetap-merah) { color: rgb(var(--p200)); }
html[data-tema] .hover\:text-red-600:hover:not(.tetap-merah) { color: rgb(var(--p600)); }
html[data-tema] .hover\:border-red-400:hover:not(.tetap-merah) { border-color: rgb(var(--p400)); }
html[data-tema] .hover\:border-red-500:hover:not(.tetap-merah) { border-color: rgb(var(--p500)); }
html[data-tema] .focus\:border-red-500:focus:not(.tetap-merah) { border-color: rgb(var(--p500)); }

/* Struk tetap hitam-putih, tidak terpengaruh tema */
@media print {
    html[data-tema] #modal-struk * { background-image: none !important; }
}