/* ==========================================================================
   MIXDOM POS - GLOBAL STYLESHEET (OPTIMIZED ENTERPRISE BUILD)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE & RESET UTILITY
   -------------------------------------------------------------------------- */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

main {
    max-width: 100% !important; /* PENYEMPURNAAN: Mengganti 100vw untuk mencegah horizontal scroll tidak terduga */
}

body {
    font-family: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: 'Outfit', sans-serif; }

/* Mencegah layar iPhone/iOS nge-zoom otomatis saat input form diklik */
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="date"], select, textarea {
    font-size: 16px !important;
}

/* Menghilangkan panah atas/bawah bawaan pada input angka */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Kustomisasi Scrollbar Webkit (Desktop) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; } 

/* Utility class untuk menyembunyikan scrollbar tapi tetap bisa di-scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Memperbaiki warna background kuning bawaan Chrome saat Auto-Fill form */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #f8fafc inset;
    -webkit-text-fill-color: #334155;
    transition: background-color 5000s ease-in-out 0s;
    font-weight: bold;
}
.dark input:-webkit-autofill {
    -webkit-text-fill-color: #f8fafc;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset;
}

/* --------------------------------------------------------------------------
   2. UI COMPONENTS & GLASSMORPHISM
   -------------------------------------------------------------------------- */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px); /* PENYEMPURNAAN: Diturunkan dari 16px ke 12px untuk optimasi performa HP */
    -webkit-backdrop-filter: blur(12px);
}
.dark .glass-card {
    background: rgba(15, 23, 42, 0.9);
}

/* Transisi Halus & GPU Acceleration (will-change) */
/* PENYEMPURNAAN: Menghapus will-change statis untuk mencegah memori GPU bocor */
.content-card, .guide-card, .pricing-card, .clause-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}
.content-card:hover, .guide-card:hover, .clause-card:hover { transform: translateY(-2px); }
.pricing-card:hover { transform: translateY(-5px); }
.clause-card:hover { border-color: #fbbf24; }

/* Kustomisasi Input Focus Ring */
.input-group:focus-within i.input-icon { color: #f59e0b !important; }
.input-group:focus-within input { border-color: #f59e0b !important; background-color: #fff !important; }
.dark .input-group:focus-within input { background-color: #0f172a !important; }

/* Kustomisasi Dropdown Library TomSelect */
.ts-control {
    border-radius: 0.75rem !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.875rem !important;
    border-color: #e2e8f0 !important;
}
.dark .ts-control { background-color: #1e293b !important; border-color: #334155 !important; color: white !important; }
.dark .ts-dropdown { background-color: #1e293b !important; color: white !important; border-color: #334155 !important; }
.dark .ts-dropdown .option:hover { background-color: #334155 !important; }

/* Kartu Kategori Aktif di halaman Kasir POS */
.category-card.active { border-color: #f59e0b; background-color: #fffbeb; color: #b45309; }
.dark .category-card.active { background-color: #451a03; color: #fbbf24; border-color: #fbbf24; }

/* CSS Animasi Pegas (Bouncy) Super Halus */
        .category-card { 
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
        }
        .category-card:hover:not(.active) {
            transform: translateY(-4px);
            box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.1);
            border-color: #93c5fd; 
        }
        .category-card.active { 
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #ffffff;
            border-color: transparent;
            transform: scale(1.05) translateY(-2px);
            box-shadow: 0 12px 20px -6px rgba(37, 99, 235, 0.4);
        }
        .category-card.active span { color: #ffffff !important; }
        .category-card.active span.opacity-70 { color: #bfdbfe !important; } 
        .category-card.active i { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   3. ANIMATIONS & KEYFRAMES MASTER
   -------------------------------------------------------------------------- */
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-animate-mobile { animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@media (min-width: 640px) { .modal-animate-mobile { animation: zoomIn 0.3s ease-out forwards; } }

/* Animasi Error Getar (Shake) */
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.animate-shake { animation: shake 0.3s ease-in-out; }

/* Animasi Loading Spinner (AJAX) */
@keyframes spin { to { transform: rotate(360deg); } }
.loading { pointer-events: none; opacity: 0.8; }
.spinner { display: none; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s linear infinite; }
.loading .spinner { display: inline-block; }

/* Animasi Background Abstract Bergerak Mengambang */
.bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
/* PENYEMPURNAAN: Menggunakan translate3d untuk optimasi hardware acceleration yang lebih stabil */
@keyframes float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -15px, 0); } }
.bg-animate { animation: float 10s ease-in-out infinite; }

/* CSS Art Custom Animations */
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes swaySlow { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes beeFly {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(100px, -30px) rotate(10deg); }
    60% { transform: translate(150px, 10px) rotate(-10deg); }
    90% { opacity: 1; }
    100% { transform: translate(250px, -20px) rotate(0deg); opacity: 0; }
}
.garden-sway { animation: sway 5s ease-in-out infinite; transform-origin: bottom center; }
.garden-sway-slow { animation: swaySlow 7s ease-in-out infinite; transform-origin: bottom center; }
.bee { animation: beeFly 8s linear infinite; opacity: 0; }
.sunflower-center {
    background-image: radial-gradient(#5e3a11 20%, transparent 20%), radial-gradient(#5e3a11 20%, transparent 20%);
    background-position: 0 0, 4px 4px; background-size: 8px 8px;
}

/* PENYEMPURNAAN: Menghentikan animasi jika baterai lemah / setelan "reduce motion" aktif di HP */
@media (prefers-reduced-motion: reduce) {
    .bg-animate, .garden-sway, .garden-sway-slow, .bee, .modal-animate-mobile {
        animation: none !important;
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   4. EXTERNAL PLUGIN HACKS (LEAFLET MAPS)
   -------------------------------------------------------------------------- */
#map { height: 180px; width: 100%; border-radius: 1rem; z-index: 10; margin-top: 0.25rem; border: 1px solid #e2e8f0; }
.dark #map { border-color: #334155; }
.dark .leaflet-layer, .dark .leaflet-control-zoom-in, .dark .leaflet-control-zoom-out, .dark .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
.leaflet-popup-content-wrapper { border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.leaflet-popup-content { margin: 12px; }


/* --------------------------------------------------------------------------
   5. THERMAL PRINTER & RECEIPT ENGINE
   -------------------------------------------------------------------------- */
.struk-font { font-family: 'Courier Prime', 'Courier New', Courier, monospace; }

/* Area Struk / Tiket Thermal di Layar Browser */
#area-struk, .ticket, .receipt-paper {
    width: 58mm; min-width: 58mm; max-width: 58mm;
    background: white !important; color: black !important; 
    box-sizing: border-box; margin: 0 auto;
    font-family: 'Courier New', Courier, monospace; 
    font-size: 11px; line-height: 1.25; overflow: hidden;
    text-rendering: optimizeLegibility; /* PENYEMPURNAAN: Memaksa teks dirender setajam mungkin sebelum diprint */
}

/* Modifikasi UI Struk agar cantik saat dipreview di layar (Sebelum dicetak) */
@media screen {
    .receipt-wrapper { background: #f1f5f9; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; }
    #area-struk, .ticket, .receipt-paper {
        padding: 4mm; margin-top: 20px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); 
        border-radius: 4px;
    }
}

/* Komponen Struk */
.struk-divider, .garis-putus, .divider { border-bottom: 1px dashed black; margin: 8px 0; width: 100%; border-top: none; }
.struk-table { width: 100%; border-collapse: collapse; margin-bottom: 5px; }
.struk-table td, .ticket td { vertical-align: top; padding: 1.5px 0; }
.struk-table tr { page-break-inside: avoid; } 
.logo-thermal { width: 45px; height: 45px; object-fit: contain; margin: 0 auto 6px auto; display: block; filter: grayscale(100%) contrast(150%); }

/* Kotak Serial Number (PPOB Listrik) */
.sn-box { border: 1px dashed #000; padding: 5px; text-align: center; margin: 8px 0; }
.sn-text { font-size: 15px; font-weight: bold; letter-spacing: 1px; }

/* ACTION BUTTONS (CETAK PC/BLUETOOTH) */
.action-bar { width: 100%; max-width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.btn-receipt { display: flex; align-items: center; justify-content: center; padding: 14px 10px; text-align: center; font-weight: 800; font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; border-radius: 12px; border: none; cursor: pointer; transition: transform 0.1s; }
.btn-receipt:active { transform: scale(0.95); }
.btn-bt { grid-column: span 2; background: #3b82f6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); font-size: 14px; padding: 16px 10px; }
.btn-print { background: #10b981; color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.btn-back { background: #fff; color: #475569; border: 1px solid #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

/* EKSEKUSI CETAK PERANGKAT KERAS (Hardware Print Rules) */
@media print {
    @page { 
        margin: 0; 
        size: 58mm auto; 
    }
    .no-print, .action-bar, .btn-receipt { display: none !important; }
    
    body { 
        background: white !important; 
        margin: 0; padding: 0; 
        align-items: flex-start; 
        justify-content: flex-start;
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }
    
    /* Lebar optimal 48mm untuk area aman print pada kertas 58mm */
    #area-struk, .ticket, .receipt-paper { 
        width: 48mm !important; 
        margin: 0 auto; 
        box-shadow: none; 
        border-radius: 0; 
        padding: 0 0 10px 0 !important; 
    }
}

/* ==========================================================================
   CHROME AUTOFILL FIX
   Menjinakkan background bawaan browser saat Autofill Form (Login/Register)
   ========================================================================== */

/* Mode Terang (Light Mode) -> Sinkron dengan bg-slate-50 & text-slate-800 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px #f8fafc inset !important;
    -webkit-text-fill-color: #1e293b !important;
    caret-color: #1e293b !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Mode Gelap (Dark Mode) -> Sinkron dengan bg-slate-800 & text-white */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover, 
html.dark input:-webkit-autofill:focus, 
html.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px #1e293b inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s;
}