/* ==========================================================================
   ARSHENA POS - MULTI-THEME ENGINE (pos-themes.css)
   Themes Supported:
   1. Default: Modern Dark Slate & Emerald (current default)
   2. Light: Clean White & Slate High-Contrast Light Theme
   3. Arshena-ID: Official Arshena Identity Theme (Hijau Emerald, Kuning Gold, Putih)
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL THEME TRANSITIONS & SMOOTH SWITCHING
   -------------------------------------------------------------------------- */
body, header, nav, main, div, input, select, textarea, button {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* ==========================================================================
   THEME 1: LIGHT THEME (Clean White & Slate)
   ========================================================================== */
html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #f8fafc !important;
    background-image: none !important;
    color: #0f172a !important;
}

/* Base Surfaces & Containers */
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-black {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] header.bg-slate-900\/90 {
    background-color: #ffffff !important;
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] .bg-slate-800\/50 {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] .hover\:bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover {
    background-color: #e2e8f0 !important;
}

/* Borders */
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-800\/80,
html[data-theme="light"] .border-slate-800\/60,
html[data-theme="light"] .border-slate-700\/80,
html[data-theme="light"] .border-slate-700\/50,
html[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

/* Typography & Text Contrast */
html[data-theme="light"] .text-white,
html[data-theme="light"] .text-slate-100 {
    color: #0f172a !important;
}

html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 {
    color: #334155 !important;
}

html[data-theme="light"] .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] .text-slate-500 {
    color: #94a3b8 !important;
}

/* Form Inputs & Controls */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: #10b981 !important;
    background-color: #ffffff !important;
}

/* Navigation & Mobile Drawer */
html[data-theme="light"] nav.xl\:hidden {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top-color: #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .backdrop-blur-xl,
html[data-theme="light"] .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
}

/* Shadows in Light Mode */
html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .shadow-xl {
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
}

/* Scrollbar in Light Mode */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Alerts / Badges Adjustments */
html[data-theme="light"] .bg-emerald-950\/60,
html[data-theme="light"] .bg-emerald-950\/70,
html[data-theme="light"] .bg-emerald-950\/50 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
html[data-theme="light"] .text-emerald-300,
html[data-theme="light"] .text-emerald-400 {
    color: #047857 !important;
}

html[data-theme="light"] .bg-amber-950\/60,
html[data-theme="light"] .bg-amber-950\/70 {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
html[data-theme="light"] .text-amber-300,
html[data-theme="light"] .text-amber-400 {
    color: #b45309 !important;
}

html[data-theme="light"] .bg-red-950\/60 {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}
html[data-theme="light"] .text-red-300,
html[data-theme="light"] .text-red-400 {
    color: #b91c1c !important;
}

/* Modals & Backdrop */
html[data-theme="light"] .bg-black\/75,
html[data-theme="light"] .bg-black\/80 {
    background-color: rgba(15, 23, 42, 0.45) !important;
}


/* ==========================================================================
   THEME 2: ARSHENA-ID THEME (Hijau Emerald, Kuning Gold, Putih)
   ========================================================================== */
html[data-theme="arshena"] {
    color-scheme: light;
}

html[data-theme="arshena"],
html[data-theme="arshena"] body {
    background-color: #f4fdf8 !important;
    background-image: none !important;
    color: #064e3b !important;
}

/* Top Navigation: Deep Arshena Emerald Green Header */
html[data-theme="arshena"] header.bg-slate-900\/90 {
    background-color: #047857 !important;
    border-bottom: 2px solid #065f46 !important;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.15) !important;
}

html[data-theme="arshena"] header .text-white {
    color: #ffffff !important;
}

html[data-theme="arshena"] header .text-slate-400 {
    color: #d1fae5 !important;
}

/* Header Brand Box: Gold / Yellow highlight */
html[data-theme="arshena"] header .bg-gradient-to-tr {
    background: #f59e0b !important;
    background-image: linear-gradient(to top right, #d97706, #fbbf24) !important;
    color: #064e3b !important;
}

/* Header buttons */
html[data-theme="arshena"] header .bg-slate-800,
html[data-theme="arshena"] header .bg-slate-800\/80 {
    background-color: rgba(6, 78, 59, 0.8) !important;
    border-color: #059669 !important;
    color: #ecfdf5 !important;
}
html[data-theme="arshena"] header .hover\:bg-slate-700:hover {
    background-color: #065f46 !important;
    color: #ffffff !important;
}

/* Nav Links on Header (XL) */
html[data-theme="arshena"] header nav a.bg-brand-500 {
    background-color: #f59e0b !important;
    color: #064e3b !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3) !important;
}
html[data-theme="arshena"] header nav a:not(.bg-brand-500) {
    color: #ecfdf5 !important;
}
html[data-theme="arshena"] header nav a:not(.bg-brand-500):hover {
    background-color: #065f46 !important;
    color: #fef08a !important;
}

/* Base Surfaces & Containers: Pure White with Fresh Green Tint */
html[data-theme="arshena"] .bg-slate-950,
html[data-theme="arshena"] .bg-black {
    background-color: #f0fdf4 !important;
}

html[data-theme="arshena"] .bg-slate-900,
html[data-theme="arshena"] .bg-slate-900\/90,
html[data-theme="arshena"] .bg-slate-900\/95,
html[data-theme="arshena"] .bg-slate-900\/80,
html[data-theme="arshena"] .bg-slate-900\/50 {
    background-color: #ffffff !important;
}

html[data-theme="arshena"] .bg-slate-800,
html[data-theme="arshena"] .bg-slate-800\/80,
html[data-theme="arshena"] .bg-slate-800\/50 {
    background-color: #f0fdf4 !important;
    color: #064e3b !important;
}

html[data-theme="arshena"] .hover\:bg-slate-800:hover,
html[data-theme="arshena"] .hover\:bg-slate-700:hover {
    background-color: #e6fcf0 !important;
}

/* Borders in Arshena Theme */
html[data-theme="arshena"] .border-slate-800,
html[data-theme="arshena"] .border-slate-700,
html[data-theme="arshena"] .border-slate-800\/80,
html[data-theme="arshena"] .border-slate-800\/60,
html[data-theme="arshena"] .border-slate-700\/80,
html[data-theme="arshena"] .border-slate-700\/50,
html[data-theme="arshena"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: #d1fae5 !important;
}

/* Typography & Text */
html[data-theme="arshena"] .text-white,
html[data-theme="arshena"] .text-slate-100 {
    color: #064e3b !important;
}

html[data-theme="arshena"] .text-slate-200,
html[data-theme="arshena"] .text-slate-300 {
    color: #047857 !important;
}

html[data-theme="arshena"] .text-slate-400 {
    color: #4b5563 !important;
}

html[data-theme="arshena"] .text-slate-500 {
    color: #6b7280 !important;
}

/* Yellow / Gold Accents (Arshena Yellow) */
html[data-theme="arshena"] .text-brand-400,
html[data-theme="arshena"] .text-emerald-400,
html[data-theme="arshena"] .text-amber-400 {
    color: #d97706 !important;
}

/* Buttons with Arshena Palette */
html[data-theme="arshena"] .bg-brand-500,
html[data-theme="arshena"] .bg-emerald-500 {
    background-color: #059669 !important;
    color: #ffffff !important;
}
html[data-theme="arshena"] .hover\:bg-brand-400:hover,
html[data-theme="arshena"] .hover\:bg-emerald-400:hover {
    background-color: #047857 !important;
}

/* Form Inputs in Arshena Theme */
html[data-theme="arshena"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="arshena"] select,
html[data-theme="arshena"] textarea {
    background-color: #ffffff !important;
    border-color: #a7f3d0 !important;
    color: #064e3b !important;
}

html[data-theme="arshena"] input::placeholder,
html[data-theme="arshena"] textarea::placeholder {
    color: #9ca3af !important;
}

html[data-theme="arshena"] input:focus,
html[data-theme="arshena"] select:focus,
html[data-theme="arshena"] textarea:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
}

/* Mobile Bottom Navigation */
html[data-theme="arshena"] nav.xl\:hidden {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 2px solid #a7f3d0 !important;
    box-shadow: 0 -4px 16px rgba(4, 120, 87, 0.08) !important;
}
html[data-theme="arshena"] nav.xl\:hidden a.text-brand-400 {
    color: #047857 !important;
    background-color: #fef3c7 !important;
    font-weight: 800 !important;
}

/* Alerts / Badges */
html[data-theme="arshena"] .bg-emerald-950\/60,
html[data-theme="arshena"] .bg-emerald-950\/70,
html[data-theme="arshena"] .bg-emerald-950\/50 {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

html[data-theme="arshena"] .bg-amber-950\/60,
html[data-theme="arshena"] .bg-amber-950\/70 {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* Shadows */
html[data-theme="arshena"] .shadow-2xl,
html[data-theme="arshena"] .shadow-xl {
    box-shadow: 0 10px 25px -5px rgba(4, 120, 87, 0.1), 0 8px 10px -6px rgba(4, 120, 87, 0.05) !important;
}

/* Scrollbar */
html[data-theme="arshena"] ::-webkit-scrollbar-track {
    background: #f0fdf4 !important;
}
html[data-theme="arshena"] ::-webkit-scrollbar-thumb {
    background: #a7f3d0 !important;
}
html[data-theme="arshena"] ::-webkit-scrollbar-thumb:hover {
    background: #6ee7b7 !important;
}

/* ==========================================================================
   THEME CONTROLS & BADGES HELPER
   ========================================================================== */
.theme-pill-active {
    outline: 2px solid #10b981;
    outline-offset: 1px;
}
html[data-theme="arshena"] .theme-pill-active {
    outline: 2px solid #f59e0b;
}