@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   SISTEM TEMA DAN VARIABEL CUSTOM (HSL)
   ========================================== */
:root {
    --font-primary: 'Inter', sans-serif;
    --font-title: 'Outfit', sans-serif;
    
    /* Warna Brand (Premium Dark Purple & Gold Theme) */
    --purple-primary: 275, 68%, 20%;      /* #3b1154 */
    --purple-dark: 280, 75%, 6%;          /* #12031c */
    --purple-light: 275, 45%, 45%;        /* #8139b5 */
    --gold-primary: 43, 67%, 53%;         /* #d4af37 */
    --gold-dark: 43, 67%, 40%;            /* #aa841c */
    --gold-light: 45, 100%, 75%;          /* #ffe680 */

    /* Warna Sistem untuk Mode Gelap (Dark - Default) */
    --bg-main: 280, 60%, 4%;
    --bg-sidebar: 280, 50%, 6%;
    --bg-card: 280, 40%, 10%;
    --border-glass: 43, 67%, 53%, 0.18;
    --text-primary: 0, 0%, 96%;
    --text-muted: 275, 10%, 70%;
    --text-title: 43, 67%, 53%;
    --shadow-premium: 0 8px 32px 0 rgba(18, 3, 28, 0.37);
}

/* Override Variabel untuk Mode Terang (Light Mode) */
[data-theme="light"] {
    --bg-main: 270, 20%, 96%;
    --bg-sidebar: 275, 40%, 15%;
    --bg-card: 0, 0%, 100%;
    --border-glass: 275, 68%, 20%, 0.12;
    --text-primary: 280, 60%, 10%;
    --text-muted: 280, 10%, 40%;
    --text-title: 275, 68%, 20%;
    --shadow-premium: 0 8px 32px 0 rgba(59, 17, 84, 0.08);
}

/* ==========================================
   RESET & FONT BINDINGS
   ========================================== */
body {
    font-family: var(--font-primary);
    background-color: hsl(var(--bg-main));
    color: hsl(var(--text-primary));
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    letter-spacing: -0.025em;
}

/* Custom Scrollbar Premium */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: hsl(var(--bg-sidebar));
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--gold-primary), 0.5);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--gold-primary));
}

/* ==========================================
   STYLE GLASSMORPHISM DAN CARD MEWAH
   ========================================== */
.glass-panel {
    background: rgba(25, 10, 45, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--border-glass));
    box-shadow: var(--shadow-premium);
    border-radius: 16px;
}

[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(var(--border-glass));
}

/* Animasi Micro-Transitions */
.btn-gold {
    background: linear-gradient(135deg, hsl(var(--gold-primary)), hsl(var(--gold-dark)));
    color: #12031c;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(212, 175, 55, 0.3);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(212, 175, 55, 0.5);
    filter: brightness(1.1);
}

.btn-purple {
    background: linear-gradient(135deg, hsl(var(--purple-primary)), hsl(var(--purple-light)));
    color: white;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(129, 57, 181, 0.3);
}
.btn-purple:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(129, 57, 181, 0.5);
    filter: brightness(1.1);
}

/* Collapsible Sidebar States */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#sidebar.collapsed {
    width: 80px;
}
#sidebar.collapsed .sidebar-text {
    display: none;
}
#sidebar.collapsed .sidebar-logo {
    display: none;
}
#sidebar.collapsed .sidebar-submenu {
    display: none !important;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, hsl(var(--bg-card)) 25%, hsl(var(--bg-main)) 50%, hsl(var(--bg-card)) 75%);
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite;
}
@keyframes loading-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Toast Container Position */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Print View Khusus 58mm POS */
@media print {
    .no-print {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
}

/* ==========================================
   ADAPTIVE OVERRIDES FOR LIGHT THEME
   ========================================== */
[data-theme="light"] body {
    background-color: hsl(var(--bg-main)) !important;
    color: hsl(var(--text-primary)) !important;
}

/* Sidebar and Header backgrounds */
[data-theme="light"] #sidebar {
    background-color: hsl(var(--bg-card)) !important;
    border-right: 1px solid hsla(var(--border-glass)) !important;
}
[data-theme="light"] #main-content header {
    background-color: hsl(var(--bg-card)) !important;
    border-bottom: 1px solid hsla(var(--border-glass)) !important;
}

/* Glass panel */
[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid hsla(var(--border-glass)) !important;
    box-shadow: var(--shadow-premium) !important;
}

/* Force dark text for readability on light backgrounds */
[data-theme="light"] .text-white,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 {
    color: hsl(var(--text-primary)) !important;
}

[data-theme="light"] .text-purple-200,
[data-theme="light"] .text-purple-300,
[data-theme="light"] .text-purple-300\/80,
[data-theme="light"] .text-purple-300\/70,
[data-theme="light"] .text-purple-300\/60,
[data-theme="light"] .text-purple-400,
[data-theme="light"] .text-purple-400\/60 {
    color: hsl(var(--text-muted)) !important;
}

[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-yellow-400\/80 {
    color: hsl(var(--gold-dark)) !important;
}

[data-theme="light"] .text-green-400 {
    color: #16a34a !important;
}

[data-theme="light"] .text-red-400 {
    color: #dc2626 !important;
}

/* Sidebar navigation links */
[data-theme="light"] #sidebar nav a {
    color: hsl(var(--text-muted)) !important;
}
[data-theme="light"] #sidebar nav a:hover {
    background-color: hsl(var(--purple-primary), 0.08) !important;
    color: hsl(var(--purple-primary)) !important;
}
[data-theme="light"] #sidebar nav a:hover i {
    color: hsl(var(--purple-primary)) !important;
}

/* Top header navigation buttons */
[data-theme="light"] #sidebar-toggle,
[data-theme="light"] #theme-toggle {
    color: hsl(var(--purple-primary)) !important;
}
[data-theme="light"] #sidebar-toggle:hover,
[data-theme="light"] #theme-toggle:hover {
    background-color: hsl(var(--purple-primary), 0.08) !important;
}

/* Utility background overrides */
[data-theme="light"] .bg-brand-dark {
    background-color: hsl(var(--bg-card)) !important;
}
[data-theme="light"] .bg-brand-dark\/95 {
    background-color: hsl(var(--bg-main)) !important;
}
[data-theme="light"] .bg-brand-dark\/30 {
    background-color: hsl(var(--bg-card)) !important;
}
[data-theme="light"] .bg-brand-dark\/40 {
    background-color: hsl(var(--bg-main)) !important;
}
[data-theme="light"] .bg-brand-dark\/60 {
    background-color: hsl(var(--bg-card)) !important;
}
[data-theme="light"] .bg-purple-500\/5,
[data-theme="light"] .bg-purple-500\/10 {
    background-color: hsl(var(--bg-main)) !important;
}
[data-theme="light"] .bg-purple-500\/20 {
    background-color: hsl(var(--purple-primary), 0.1) !important;
}

/* Input, select, textarea styling */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background-color: hsl(var(--bg-card)) !important;
    border-color: hsl(var(--purple-primary), 0.2) !important;
    color: hsl(var(--text-primary)) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: hsl(var(--text-muted), 0.7) !important;
}

/* Active category tab text needs to be dark as it is on a gold gradient */
[data-theme="light"] .category-btn.border-brand-gold {
    color: #12031c !important;
    background: linear-gradient(135deg, hsl(var(--gold-primary)), hsl(var(--gold-dark))) !important;
}

/* Modul titles with gold gradients need solid brand purple color for readability on light theme */
[data-theme="light"] h1.bg-clip-text,
[data-theme="light"] h2.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: hsl(var(--purple-primary)) !important;
    -webkit-text-fill-color: hsl(var(--purple-primary)) !important;
}

/* Cart quantity items adjustment */
[data-theme="light"] #cart-items-container button {
    background-color: hsl(var(--purple-primary), 0.1) !important;
    color: hsl(var(--purple-primary)) !important;
    border-color: hsl(var(--purple-primary), 0.2) !important;
}
[data-theme="light"] #cart-items-container button:hover {
    background-color: hsl(var(--purple-primary), 0.2) !important;
}

/* success modal background styling */
[data-theme="light"] #successTxnModal > div {
    background-color: hsl(var(--bg-card)) !important;
}

/* Override text-brand-gold color in light mode for better contrast */
[data-theme="light"] .text-brand-gold {
    color: hsl(var(--gold-dark)) !important;
}

/* Border color overrides */
[data-theme="light"] .border-purple-500\/5,
[data-theme="light"] .border-purple-500\/10,
[data-theme="light"] .border-purple-500\/20,
[data-theme="light"] .border-yellow-500\/20 {
    border-color: hsla(var(--border-glass)) !important;
}

/* Autocomplete list styling in light theme */
[data-theme="light"] #invoice-autocomplete-list div {
    color: hsl(var(--text-primary)) !important;
    border-bottom-color: hsl(var(--purple-primary), 0.08) !important;
}
[data-theme="light"] #invoice-autocomplete-list div:hover {
    background-color: hsl(var(--purple-primary), 0.08) !important;
    color: hsl(var(--purple-primary)) !important;
}