/* assets/css/style.css */
/* ==========================================================
   dKASIR Enterprise Design System
   Mode Gelap: Classic Deep Slate (900/800/700)
   Mode Terang: Soft, Clean & High Comfort Tailwind Palette
   ========================================================== */

:root, html.dark {
    --bg-color: #0f172a;       /* Original Slate 900 */
    --card-color: #1e293b;     /* Original Slate 800 */
    --border-color: #334155;   /* Original Slate 700 */
    --text-title: #ffffff;     /* Pure White Heading */
    --text-main: #cbd5e1;      /* Slate 300 Body */
    --text-muted: #94a3b8;     /* Slate 400 Muted */
    --input-bg: #0f172a;
    --input-border: #334155;
    --input-text: #ffffff;
    --table-header: rgba(15, 23, 42, 0.85);
    --table-hover: rgba(30, 41, 59, 0.6);
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================
   LIGHT MODE: Soft Slate 50 Canvas, Clean Cards, Comfortable Contrast
   ========================================================== */
html.light {
    --bg-color: #f8fafc;       /* Slate 50 - Kanvas Halus & Nyaman di Mata */
    --card-color: #ffffff;     /* Pure White Card */
    --border-color: #e2e8f0;   /* Slate 200 Border */
    --text-title: #0f172a;     /* Slate 900 - Judul Tegas */
    --text-main: #334155;      /* Slate 700 - Teks Utama Nyaman & Terbaca */
    --text-muted: #64748b;     /* Slate 500 - Teks Sekunder */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;   /* Slate 300 */
    --input-text: #0f172a;
    --table-header: #f8fafc;
    --table-hover: #f1f5f9;    /* Slate 100 */
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(226, 232, 240, 0.85);
}

/* Base Body Styling */
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Color Bridge Classes */
.bg-dark-bg { 
    background-color: var(--bg-color) !important; 
}

.bg-dark-card { 
    background-color: var(--card-color) !important; 
    box-shadow: var(--card-shadow);
}

.border-dark-border { 
    border-color: var(--border-color) !important; 
}

/* ==========================================================
   STYLE MODE TERANG (TAILWIND LIGHT MODE COMFORT SYSTEM)
   ========================================================== */

/* 1. Tipografi & Judul */
html.light h1, 
html.light h2, 
html.light h3, 
html.light h4, 
html.light h5, 
html.light h6 {
    color: var(--text-title) !important;
    font-weight: 700;
}

/* Teks putih umum diubah jadi warna gelap (kecuali sidebar, button solid, badge gradient, dsb) */
html.light .text-white:not(#sidebar *):not(button):not(a.bg-brand-600):not(a.bg-brand-500):not([class*="bg-brand-"]):not([class*="bg-blue-"]):not([class*="bg-indigo-"]):not([class*="bg-emerald-"]):not([class*="bg-red-"]):not([class*="bg-rose-"]):not([class*="bg-purple-"]):not([class*="bg-violet-"]):not([class*="bg-gradient-"]):not(button *):not(a.bg-brand-600 *):not(a.bg-brand-500 *):not([class*="bg-brand-"] *):not([class*="bg-blue-"] *):not([class*="bg-indigo-"] *):not([class*="bg-emerald-"] *):not([class*="bg-red-"] *):not([class*="bg-rose-"] *):not([class*="bg-purple-"] *):not([class*="from-"] *):not(#dkasir-toast-container *) {
    color: #0f172a !important;
}

html.light .text-slate-200:not(#sidebar *):not(button *):not([class*="bg-"]),
html.light .text-slate-300:not(#sidebar *):not(button *):not([class*="bg-"]) {
    color: var(--text-main) !important;
}

html.light .text-slate-400:not(#sidebar *):not(button *):not([class*="bg-"]):not([class*="from-"]) {
    color: var(--text-muted) !important;
}

html.light .text-slate-500:not(#sidebar *) {
    color: #64748b !important;
}

/* 2. Tombol Solid Tetap Memiliki Teks Putih Bersih */
html.light button[class*="bg-brand"],
html.light button[class*="bg-blue"],
html.light button[class*="bg-indigo"],
html.light button[class*="bg-emerald"],
html.light button[class*="bg-red"],
html.light button[class*="bg-rose"],
html.light a[class*="bg-brand"],
html.light a[class*="bg-blue"],
html.light a[class*="bg-indigo"],
html.light a[class*="bg-emerald"],
html.light a[class*="bg-red"],
html.light [class*="bg-brand-600"] *,
html.light [class*="bg-brand-500"] *,
html.light [class*="bg-blue-600"] *,
html.light [class*="bg-emerald-600"] *,
html.light [class*="bg-red-600"] *,
html.light [class*="bg-rose-600"] *,
html.light [class*="bg-indigo-600"] * {
    color: #ffffff !important;
}

/* 3. Warna Aksen & Indikator (Nyaman di Mode Terang) */
html.light .text-emerald-400,
html.light .text-emerald-500 {
    color: #059669 !important;
    font-weight: 600;
}

html.light .text-brand-400,
html.light .text-blue-400,
html.light .text-blue-500 {
    color: #2563eb !important;
    font-weight: 600;
}

html.light .text-red-400,
html.light .text-red-500,
html.light .text-rose-400,
html.light .text-rose-500 {
    color: #dc2626 !important;
    font-weight: 600;
}

html.light .text-amber-400,
html.light .text-amber-500 {
    color: #d97706 !important;
    font-weight: 600;
}

html.light .text-purple-400,
html.light .text-violet-400 {
    color: #7c3aed !important;
    font-weight: 600;
}

/* 4. Badges & Status Pills */
html.light .bg-emerald-500\/20,
html.light .bg-emerald-500\/10,
html.light .bg-emerald-950\/20 {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
    font-weight: 600 !important;
}

html.light .bg-red-500\/20,
html.light .bg-red-500\/10,
html.light .bg-red-950\/20,
html.light .bg-rose-950\/20 {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
    font-weight: 600 !important;
}

html.light .bg-amber-500\/20,
html.light .bg-amber-500\/10,
html.light .bg-amber-950\/20 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    font-weight: 600 !important;
}

html.light .bg-blue-500\/20,
html.light .bg-blue-500\/10,
html.light .bg-brand-500\/20,
html.light .bg-brand-500\/10,
html.light .bg-indigo-950\/20 {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 600 !important;
}

html.light .bg-slate-800:not(#sidebar *):not(button.bg-brand-600):not(button.bg-emerald-600) {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 500 !important;
}

/* 5. Form Input, Select, Textarea & Search */
html.light input:not(#sidebar input), 
html.light select:not(#sidebar select), 
html.light textarea:not(#sidebar textarea) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

html.light input::placeholder, 
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

html.light input:focus, 
html.light select:focus, 
html.light textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* 6. Tabel Data & Header */
html.light thead {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light thead th {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

html.light tbody tr {
    border-color: #e2e8f0 !important;
    background-color: #ffffff;
}

html.light tbody tr:hover {
    background-color: #f1f5f9 !important;
}

html.light tbody td {
    color: #1e293b !important;
}

html.light .divide-dark-border > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

/* 7. Topbar, Dropdowns & Modals */
html.light header {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
}

html.light #themeToggle {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html.light #themeToggle:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light #userDropdownMenu,
html.light #categoryDropdown {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
}

html.light #categoryDropdown .category-opt {
    color: #334155 !important;
    font-weight: 500;
}

html.light #categoryDropdown .category-opt:hover,
html.light #categoryDropdown .category-opt.active {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* 8. POS Workspace (Mode Terang & Gelap Contrast System) */
html.light #productGrid .bg-dark-bg {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

html.light #productGrid .bg-dark-bg:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 6px 16px -3px rgba(59, 130, 246, 0.18) !important;
}

/* POS Cart Styling - Light Mode */
html.light #cartItemsArea .bg-dark-bg {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html.light #cartItemsArea .bg-dark-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

html.light #cartItemsArea h4 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light #cartItemsArea span.text-slate-200,
html.light #cartItemsArea span.text-slate-300,
html.light #cartItemsArea span.text-slate-400 {
    color: #475569 !important;
    font-weight: 600 !important;
}

html.light #cartItemsArea .text-white {
    color: #0f172a !important;
}

html.light #posCustomerSelect {
    color: #0f172a !important;
    font-weight: 600 !important;
}

html.light #posCustomerSelect option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html.light #emptyCartState p.text-white {
    color: #0f172a !important;
}

html.light #emptyCartState p.text-slate-300 {
    color: #475569 !important;
}

html.light #subtotalDisplay,
html.light #taxDisplay {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light .payment-method-btn:not(.active) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

html.light .payment-method-btn:not(.active):hover {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
}

html.light .payment-method-btn.active {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

html.light .payment-method-btn.active * {
    color: #ffffff !important;
}

/* POS Cart Styling - Dark Mode Crisp Contrast */
html.dark #cartItemsArea .bg-dark-bg {
    background-color: #131d31 !important;
    border-color: #283548 !important;
}

html.dark #cartItemsArea h4 {
    color: #ffffff !important;
}

html.dark #cartItemsArea span.text-slate-200,
html.dark #cartItemsArea span.text-slate-300 {
    color: #e2e8f0 !important;
}

html.dark #emptyCartState p.text-white {
    color: #ffffff !important;
}

html.dark #emptyCartState p.text-slate-300 {
    color: #cbd5e1 !important;
}

html.dark #subtotalDisplay,
html.dark #taxDisplay {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.dark .payment-method-btn:not(.active) {
    background-color: #131d31 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark .payment-method-btn:not(.active):hover {
    background-color: #1e293b !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

/* 9. Modals di Mode Terang */
html.light [id*="Modal"] .bg-dark-card,
html.light [id*="ModalContent"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18) !important;
}

/* 10. Hover Utilitas di Mode Terang */
html.light .hover\:bg-white\/5:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

html.light .hover\:bg-slate-800\/50:hover,
html.light .hover\:bg-slate-800\/40:hover,
html.light .hover\:bg-slate-800\/30:hover,
html.light .hover\:bg-slate-800\/20:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover {
    background-color: #f1f5f9 !important;
}

html.light button.hover\:bg-slate-800:hover,
html.light a.hover\:bg-slate-800:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ==========================================================
   SIDEBAR DRAWER (TETAP DARK NAVY KOMANDO / ERP PREMIUM)
   ========================================================== */
#sidebar {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

#sidebar .text-white {
    color: #ffffff !important;
}

#sidebar .text-slate-400 {
    color: #94a3b8 !important;
}

#sidebar .text-slate-300 {
    color: #cbd5e1 !important;
}

#sidebar input#menuSearch {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
    color: #ffffff !important;
}

#sidebar input#menuSearch::placeholder {
    color: #64748b !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html.light .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}

/* Glassmorphism */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
}

/* Menu Dropdown Transitions */
.menu-submenu {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin 0.3s ease;
}

.menu-dropdown-btn .menu-chevron {
    transition: transform 0.25s ease;
}