/* Theme Mode - Dark & Light */
:root {
    --dm-bg: #f8fafc;
    --dm-surface: #ffffff;
    --dm-card: #ffffff;
    --dm-card-hover: #f8fafc;
    --dm-text: #1e293b;
    --dm-text-secondary: #334155;
    --dm-text-muted: #64748b;
    --dm-border: #e2e8f0;
    --dm-input-bg: #ffffff;
    --dm-sidebar-bg: #ffffff;
    --dm-header-bg: #ffffff;
    --dm-main-bg: #f9fafb;
    --dm-shadow: rgba(0, 0, 0, 0.08);
    --dm-chart-grid: #f1f5f9;
    --dm-chart-text: #64748b;
}

[data-theme="dark"] {
    --dm-bg: #121621;
    --dm-surface: #121621;
    --dm-card: #1b222d;
    --dm-card-hover: #232b38;
    --dm-text: #f1f5f9;
    --dm-text-secondary: #e2e8f0;
    --dm-text-muted: #94a3b8;
    --dm-border: #2d3748;
    --dm-input-bg: #1b222d;
    --dm-sidebar-bg: #121621;
    --dm-header-bg: #1b222d;
    --dm-main-bg: #121621;
    --dm-shadow: rgba(0, 0, 0, 0.4);
    --dm-chart-grid: #2d3748;
    --dm-chart-text: #94a3b8;
    color-scheme: dark;
}

/* ===== BASE ===== */
[data-theme="dark"] body {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}

[data-theme="dark"] .bg-gradient-to-br.from-blue-50,
[data-theme="dark"] div.flex.h-screen.bg-gradient-to-br {
    background: var(--dm-bg) !important;
    background-image: none !important;
}

/* ===== SLATE TEXT (dashboard & pages) ===== */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700 { color: var(--dm-text) !important; }
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500 { color: var(--dm-text-muted) !important; }
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-300 { color: #64748b !important; }

[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 { color: var(--dm-text) !important; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 { color: var(--dm-text-muted) !important; }
[data-theme="dark"] .text-gray-400 { color: #64748b !important; }
[data-theme="dark"] .text-black { color: var(--dm-text) !important; }

/* Keep accent colors readable */
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-cyan-600,
[data-theme="dark"] .text-cyan-700,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-rose-900,
[data-theme="dark"] .text-indigo-500,
[data-theme="dark"] .text-yellow-500 { opacity: 1; }

/* ===== SIDEBAR ===== */
[data-theme="dark"] #sidebar,
[data-theme="dark"] #sidebar > div:first-child {
    background-color: var(--dm-sidebar-bg) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] #sidebar .border-b,
[data-theme="dark"] #sidebar .border-gray-100,
[data-theme="dark"] #sidebar .border-gray-200 { border-color: var(--dm-border) !important; }

[data-theme="dark"] #sidebar h1,
[data-theme="dark"] #sidebar .text-gray-800,
[data-theme="dark"] #sidebar .sidebar-text,
[data-theme="dark"] #sidebar .sidebar-group-text { color: var(--dm-text-muted) !important; }

[data-theme="dark"] #sidebar .sidebar-link:not(.active):not(.logout-link) { color: var(--dm-text-muted) !important; }

[data-theme="dark"] #sidebar .sidebar-link:hover:not(.active):not(.logout-link) {
    background-color: #1b222d !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] #sidebar .sidebar-link.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #121621 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] #sidebar .sidebar-link.active .sidebar-text,
[data-theme="dark"] #sidebar .sidebar-link.active span { color: #121621 !important; }

/* ===== HEADER ===== */
[data-theme="dark"] .header-white {
    background: var(--dm-header-bg) !important;
    border-bottom-color: var(--dm-border) !important;
}

[data-theme="dark"] header .text-gray-800,
[data-theme="dark"] header .font-semibold { color: var(--dm-text) !important; }

[data-theme="dark"] header .text-gray-500,
[data-theme="dark"] header .text-gray-400 { color: var(--dm-text-muted) !important; }

[data-theme="dark"] header .bg-gray-50 {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] header .sidebar-toggle,
[data-theme="dark"] #theme-toggle-btn {
    background-color: var(--dm-card) !important;
    color: var(--dm-text-muted) !important;
    border: 1px solid var(--dm-border);
}

[data-theme="dark"] header .sidebar-toggle:hover,
[data-theme="dark"] #theme-toggle-btn:hover {
    background-color: var(--dm-card-hover) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] header .w-12.h-12.rounded-full.bg-gray-50 {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

/* ===== MAIN ===== */
[data-theme="dark"] main,
[data-theme="dark"] main.bg-gray-50 { background-color: var(--dm-main-bg) !important; }

/* ===== DASHBOARD ===== */
[data-theme="dark"] .dashboard-header,
[data-theme="dark"] .dashboard-header h1,
[data-theme="dark"] .dashboard-header p { color: var(--dm-text) !important; }

[data-theme="dark"] .metric-card {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

[data-theme="dark"] .metric-card:hover {
    background: var(--dm-card-hover) !important;
    box-shadow: 0 8px 24px var(--dm-shadow) !important;
}

[data-theme="dark"] .glass-panel {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 4px 12px var(--dm-shadow) !important;
}

[data-theme="dark"] .filter-btn {
    background: var(--dm-card) !important;
    color: var(--dm-text-muted) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .filter-btn:hover:not(.active) {
    background: var(--dm-card-hover) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] #customFilterDialog,
[data-theme="dark"] .bg-slate-100 { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; }

[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 { border-color: var(--dm-border) !important; }

/* Icon badge backgrounds in dark */
[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.15) !important; }
[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.15) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
[data-theme="dark"] .bg-orange-50 { background-color: rgba(249, 115, 22, 0.15) !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.12) !important; }

[data-theme="dark"] .bg-orange-50.rounded-3xl,
[data-theme="dark"] .bg-rose-50.rounded-3xl {
    background-color: rgba(249, 115, 22, 0.1) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border) !important; }

[data-theme="dark"] .group:hover .text-gray-700,
[data-theme="dark"] tr:hover .text-gray-700 { color: var(--dm-text) !important; }

/* ===== CARDS & SURFACES ===== */
[data-theme="dark"] .bg-white { background-color: var(--dm-card) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background-color: var(--dm-card) !important; }

[data-theme="dark"] .modern-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-card {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] .modern-card:hover h1,
[data-theme="dark"] .modern-card:hover h2,
[data-theme="dark"] .modern-card:hover h3,
[data-theme="dark"] .modern-card:hover p,
[data-theme="dark"] .chart-card:hover h1,
[data-theme="dark"] .chart-card:hover h2,
[data-theme="dark"] .chart-card:hover h3 {
    color: var(--dm-text) !important;
    text-shadow: none !important;
}

/* ===== BORDERS ===== */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 { border-color: var(--dm-border) !important; }

[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border) !important; }

/* ===== FORMS ===== */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748b !important; }

/* ===== TABLES ===== */
[data-theme="dark"] table thead,
[data-theme="dark"] .bg-gray-100 th { background-color: #1b222d !important; }
[data-theme="dark"] table tbody tr:hover { background-color: #232b38 !important; }
[data-theme="dark"] table td,
[data-theme="dark"] table th { border-color: var(--dm-border) !important; }

/* ===== MODALS ===== */
[data-theme="dark"] .modal .bg-white,
[data-theme="dark"] .swal2-popup {
    background-color: var(--dm-card) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container { color: var(--dm-text) !important; }

/* ===== HOVER ===== */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--dm-card-hover) !important; }

[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 { background-color: var(--dm-card) !important; }

/* ===== POS PAGE ===== */
[data-theme="dark"] body.pos-page { background-color: var(--dm-bg) !important; }

[data-theme="dark"] body.pos-page main { background-color: var(--dm-bg) !important; }

[data-theme="dark"] body.pos-page .product-card {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] body.pos-page .product-card h3 { color: var(--dm-text) !important; }

[data-theme="dark"] body.pos-page aside.bg-white {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] body.pos-page #search-product {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] body.pos-page #toggle-search-btn {
    background-color: var(--dm-card-hover) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] body.pos-page #toggle-categories-btn {
    background-color: var(--dm-card) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] body.pos-page .category-btn:not(.active) {
    opacity: 0.85;
}

[data-theme="dark"] body.pos-page #customer-dropdown {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] body.pos-page #customer-dropdown .customer-option:hover {
    background-color: var(--dm-card-hover) !important;
}

[data-theme="dark"] body.pos-page .border-t.bg-gray-50 {
    background-color: #1b222d !important;
    border-color: var(--dm-border) !important;
}

[data-theme="dark"] body.pos-page .modal .bg-white {
    background-color: var(--dm-card) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice {
    background-color: var(--dm-card) !important;
    border-color: #475569 !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice:hover:not(:disabled),
[data-theme="dark"] body.pos-page .swal2-popup .variant-choice:focus-visible {
    background-color: rgba(249, 115, 22, 0.16) !important;
    border-color: #fb923c !important;
    outline: none !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice .text-slate-800 {
    color: var(--dm-text) !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice .text-slate-500 {
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice .text-orange-600 {
    color: #fb923c !important;
}

[data-theme="dark"] body.pos-page .swal2-popup .variant-choice:disabled {
    background-color: rgba(15, 23, 42, 0.35) !important;
    opacity: 0.55 !important;
}

/* POS header stays orange brand - no override */

/* ===== LOGIN PAGE (Glass) ===== */
[data-theme="dark"] body.login-page {
    background: linear-gradient(135deg, #0f1219 0%, #121621 40%, #151b28 100%) !important;
}

[data-theme="dark"] body.login-page .login-orb { opacity: 0.35; }

[data-theme="dark"] body.login-page .login-card {
    background: rgba(27, 34, 45, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] body.login-page .left-panel {
    background: linear-gradient(155deg, rgba(252,75,0,0.55) 0%, rgba(160,46,0,0.45) 100%) !important;
    border-right-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] body.login-page .right-panel {
    background: rgba(27, 34, 45, 0.65) !important;
}

[data-theme="dark"] body.login-page .right-panel h2 { color: var(--dm-text) !important; }

[data-theme="dark"] body.login-page .right-panel .subtitle { color: var(--dm-text-muted) !important; }

[data-theme="dark"] body.login-page .form-field input {
    background: rgba(35, 43, 56, 0.8) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--dm-text) !important;
}

[data-theme="dark"] body.login-page .form-field input:focus {
    background: rgba(42, 51, 68, 0.95) !important;
    border-color: #fc4b00 !important;
}

[data-theme="dark"] body.login-page .form-field .field-icon { color: var(--dm-text-muted) !important; }

[data-theme="dark"] body.login-page .signup-divider {
    border-top-color: rgba(255,255,255,0.1) !important;
}

[data-theme="dark"] body.login-page .signup-divider p { color: var(--dm-text-muted) !important; }

[data-theme="dark"] body.login-page .btn-signup {
    background: rgba(27, 34, 45, 0.6) !important;
    border-color: #fc4b00 !important;
}

[data-theme="dark"] body.login-page .dev-footer {
    color: var(--dm-text-muted) !important;
    background: rgba(27, 34, 45, 0.5) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .login-loading-overlay {
    background: rgba(10, 12, 18, 0.75) !important;
}

[data-theme="dark"] .login-loading-glass {
    background: rgba(27, 34, 45, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.login-theme-toggle:hover { transform: scale(1.05); }

[data-theme="dark"] .login-theme-toggle,
[data-theme="dark"] body.login-page #login-theme-toggle {
    background: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] body.pos-page #load-more-btn {
    background-color: var(--dm-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

[data-theme="dark"] body.pos-page .text-gray-900 { color: var(--dm-text) !important; }

/* ===== THEME TOGGLE ICONS ===== */
#theme-toggle-btn,
#login-theme-toggle,
#pos-theme-toggle {
    transition: all 0.2s ease;
}

#theme-toggle-btn:hover,
#login-theme-toggle:hover,
#pos-theme-toggle:hover { transform: scale(1.05); }

[data-theme="dark"] .theme-icon-sun { display: flex; }
[data-theme="dark"] .theme-icon-moon { display: none; }
html:not([data-theme="dark"]) .theme-icon-sun { display: none; }
html:not([data-theme="dark"]) .theme-icon-moon { display: flex; }

/* ===== SCROLLBAR ===== */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #1b222d; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3d4a5c; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ===== SHADOWS ===== */
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg { box-shadow: 0 4px 12px var(--dm-shadow) !important; }