/* ===== AL-MANARA — GLOBAL LIGHT MODE ==========================================
   Rebuilt on the theme.css token set (Doctor-Registry reference palette):
   clean cool grey ground, BLUE = interface, GOLD = brand.
   Every value here pulls from a token so the whole system stays in sync — and
   so a later dark-mode pass only touches theme.css, not this file.
   ========================================================================== */
body.light-mode { background: var(--bg) !important; color: var(--ink) !important; }

/* ---- Backgrounds --------------------------------------------------------- */
body.light-mode .bg-richBlack,
body.light-mode [class*="bg-richBlack"] { background-color: var(--surface) !important; }
body.light-mode .bg-cardBg,
body.light-mode [class*="bg-cardBg"] { background-color: var(--surface) !important; }
body.light-mode .bg-black,
body.light-mode [class*="bg-black\\/"] { background-color: var(--surface-2) !important; }
body.light-mode .bg-gray-800,
body.light-mode .bg-gray-900 { background-color: var(--surface-2) !important; }
body.light-mode .bg-gray-700 { background-color: var(--bg-2) !important; }
body.light-mode .bg-white\/5 { background-color: rgba(28,37,52,0.03) !important; }
body.light-mode .bg-white\/10 { background-color: rgba(28,37,52,0.06) !important; }
body.light-mode .bg-transparent { background-color: transparent !important; }

/* ---- Text --------------------------------------------------------------- */
body.light-mode .text-white { color: var(--ink) !important; }
body.light-mode .text-white\/50,
body.light-mode .text-white\/60 { color: var(--ink-faint) !important; }
body.light-mode .text-white\/80 { color: var(--ink-dim) !important; }
body.light-mode .text-gray-400 { color: var(--ink-dim) !important; }
body.light-mode .text-gray-300 { color: var(--ink-dim) !important; }
body.light-mode .text-gray-200 { color: var(--ink) !important; }
body.light-mode .text-gray-500 { color: var(--ink-dim) !important; }
body.light-mode .text-gray-600 { color: var(--ink-faint) !important; }
body.light-mode .text-brightGold { color: var(--gold-ink) !important; }
body.light-mode .text-deepGold { color: var(--gold-ink) !important; }
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5 { color: var(--ink) !important; }
body.light-mode p { color: var(--ink-dim) !important; }
body.light-mode label { color: var(--ink-dim) !important; }
body.light-mode span { color: inherit; }

/* ---- Borders ----------------------------------------------------------- */
body.light-mode .border-gray-600,
body.light-mode .border-gray-700,
body.light-mode .border-gray-800 { border-color: var(--rule) !important; }
body.light-mode .border-white\/5 { border-color: rgba(28,37,52,0.05) !important; }
body.light-mode .border-white\/10 { border-color: rgba(28,37,52,0.1) !important; }
body.light-mode [class*="border-deepGold"] { border-color: color-mix(in srgb, var(--gold) 35%, transparent) !important; }

/* ---- Inputs ----------------------------------------------------------- */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--rule) !important;
}
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus {
    border-color: var(--blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--blue-wash) !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder { color: var(--ink-faint) !important; }
body.light-mode option { background-color: var(--surface) !important; color: var(--ink) !important; }

/* ---- Tables --------------------------------------------------------- */
body.light-mode thead,
body.light-mode thead tr { background-color: var(--surface-2) !important; border-bottom: 1px solid var(--rule) !important; }
body.light-mode th { color: var(--ink-faint) !important; font-weight: 600 !important; }
body.light-mode td { color: var(--ink) !important; border-color: var(--rule) !important; }
body.light-mode tbody tr:hover { background-color: var(--surface-2) !important; }

/* ---- Status badges (Tailwind dark-alpha utilities → light status pills) - */
body.light-mode .bg-teal-900\/40 { background-color: var(--blue-wash) !important; color: var(--blue) !important; }
body.light-mode .bg-red-900\/40 { background-color: var(--red-wash) !important; color: var(--red) !important; }
body.light-mode .bg-blue-900\/40 { background-color: var(--blue-wash) !important; color: var(--blue) !important; }
body.light-mode .bg-yellow-900\/40 { background-color: var(--amber-wash) !important; color: var(--amber) !important; }
body.light-mode .bg-green-900\/40 { background-color: var(--green-wash) !important; color: var(--green) !important; }
body.light-mode .bg-purple-900\/40 { background-color: var(--purple-wash) !important; color: var(--purple) !important; }

/* ===== DENTOMATE ========================================================= */
body.light-mode #bg-3d-grid { background: var(--bg) !important; }
body.light-mode .grid-plane { opacity: 0.04 !important; filter: invert(1) !important; }
body.light-mode .stat-card {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: var(--shadow-sm) !important;
}
body.light-mode .stat-card::before { display: none !important; }
body.light-mode .stat-value { text-shadow: none !important; }
body.light-mode .stat-label { color: var(--ink-dim) !important; }
body.light-mode .stat-card:nth-child(1) .stat-value { color: var(--gold-ink) !important; }
body.light-mode .stat-card:nth-child(2) .stat-value { color: var(--blue) !important; }
body.light-mode .stat-card:nth-child(3) .stat-value { color: var(--blue) !important; }
body.light-mode .stat-card:nth-child(4) .stat-value { color: var(--green) !important; }
body.light-mode .chart-card { background: var(--surface) !important; border-color: var(--rule) !important; }
body.light-mode .prod-time-btn:not(.active) { color: var(--ink-dim) !important; border-color: var(--rule) !important; background: transparent !important; }
body.light-mode .prod-time-btn.active { color: var(--on-blue) !important; background-color: var(--blue) !important; border-color: var(--blue) !important; }
body.light-mode .open-premium-modal { background: var(--surface) !important; border: 1px solid var(--rule) !important; }
body.light-mode .mix-blend-lighten { mix-blend-mode: multiply !important; }
body.light-mode #login-screen { background-color: var(--bg) !important; }
body.light-mode #login-card { background-color: var(--surface) !important; box-shadow: var(--shadow-lg) !important; }
body.light-mode .app-header { border-bottom-color: var(--rule) !important; }

/* Dentomate light — calm & professional: dark headings, one gold moment (the wordmark),
   dark ink on gold buttons, no neon glows */
body.light-mode .app-header h1 {
    background: none !important;
    -webkit-text-fill-color: var(--gold-ink) !important;
    color: var(--gold-ink) !important;
    animation: none !important;
}
body.light-mode .chart-card h3,
body.light-mode .table-header h3,
body.light-mode .table-header i,
body.light-mode .card h3,
body.light-mode .stat-card h3 {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
}
body.light-mode .export-btn,
body.light-mode .page-btn.active {
    background: var(--gold) !important;
    background-image: none !important;
    color: var(--on-gold) !important;
    box-shadow: none !important;
    border-color: var(--gold) !important;
}
body.light-mode .export-btn:hover { box-shadow: var(--shadow-sm) !important; filter: brightness(1.04); }
body.light-mode .upload-zone:hover,
body.light-mode .stat-card:hover { box-shadow: var(--shadow) !important; }
body.light-mode .upload-icon,
body.light-mode .upload-zone:hover .upload-icon { filter: none !important; }
body.light-mode .spinner { border-color: var(--rule) !important; border-top-color: var(--gold) !important; }
body.light-mode .path-hint {
    background: var(--gold-wash) !important;
    border-color: color-mix(in srgb, var(--gold) 25%, transparent) !important;
    color: var(--gold-ink) !important;
}
body.light-mode .toast {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-left: 3px solid var(--green) !important;
    color: var(--ink) !important;
}
body.light-mode .invoice-btn {
    background: var(--blue-wash) !important;
    border-color: color-mix(in srgb, var(--blue) 28%, transparent) !important;
    color: var(--blue) !important;
}
body.light-mode .invoice-btn:hover { background: var(--blue) !important; color: var(--on-blue) !important; }

/* ===== HR / DENTIFY ===================================================== */
body.light-mode .hr-sidebar,
body.light-mode [class*="hr-"] { background-color: var(--bg) !important; }
body.light-mode .employee-card,
body.light-mode .staff-card { background: var(--surface) !important; border-color: var(--rule) !important; }
body.light-mode .kpi-bar { background-color: var(--surface-2) !important; }

/* ===== STOREX / INVENTORY ============================================== */
body.light-mode .inv-sidebar { background: var(--surface) !important; border-right: 1px solid var(--rule) !important; }
body.light-mode .inv-content { background: var(--bg) !important; }
body.light-mode .inventory-card,
body.light-mode .stock-card { background: var(--surface) !important; border-color: var(--rule) !important; }

/* ===== MODALS ========================================================== */
body.light-mode [class*="modal"] > div,
body.light-mode [id$="-modal"] > div,
body.light-mode [id*="-modal-"],
body.light-mode .settings-modal,
body.light-mode [id="ws-modal-content"],
body.light-mode [class*="Modal"] > div { background-color: var(--surface) !important; }
body.light-mode .text-white\/60 { color: var(--ink-faint) !important; }

/* ===== TABLE SECTIONS ================================================= */
body.light-mode .table-section,
body.light-mode .table-wrapper {
    background: var(--surface) !important;
    background-color: var(--surface) !important;
    background-image: none !important;
    box-shadow: var(--shadow-sm) !important;
}
body.light-mode table { background-color: var(--surface) !important; }
body.light-mode th { background-color: var(--surface-2) !important; color: var(--ink-faint) !important; }
body.light-mode tbody tr {
    border-bottom-color: var(--rule) !important;
    background-color: var(--surface) !important;
}
body.light-mode tbody tr:hover { background-color: var(--surface-2) !important; }

/* ===== TAB BUTTONS =================================================== */
body.light-mode #btn-toggle-exocad,
body.light-mode #btn-toggle-atomica,
body.light-mode #btn-return-tools {
    background-color: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink-dim) !important;
    box-shadow: var(--shadow-sm) !important;
}
body.light-mode #btn-toggle-exocad:hover,
body.light-mode #btn-toggle-atomica:hover,
body.light-mode #btn-return-tools:hover {
    background-color: var(--surface-2) !important;
    color: var(--blue) !important;
}
body.light-mode .open-premium-modal {
    background-image: none !important;
    background-color: var(--surface) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .open-premium-modal > div.absolute {
    background-image: none !important;
    background-color: var(--gold-wash) !important;
}

/* ---- Pagination ---------------------------------------------------- */
body.light-mode .page-btn {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
    color: var(--ink) !important;
}
body.light-mode .page-btn:hover:not(:disabled) {
    background: var(--surface-2) !important;
    border-color: var(--blue) !important;
}
body.light-mode .page-btn.active {
    background: var(--blue) !important;
    background-image: none !important;
    color: var(--on-blue) !important;
    border-color: var(--blue) !important;
    box-shadow: none !important;
}
body.light-mode th { background-image: none !important; }
body.light-mode tbody tr:nth-child(even) {
    background-image: none !important;
    background: var(--surface) !important;
}
body.light-mode .pagination-bar { border-top-color: var(--rule) !important; }
body.light-mode .table-header h3,
body.light-mode .table-header i { color: var(--ink) !important; }

/* ---- Scrollbars -------------------------------------------------- */
body.light-mode ::-webkit-scrollbar-track { background: var(--bg-2) !important; }
body.light-mode ::-webkit-scrollbar-thumb { background: var(--rule) !important; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint) !important; }

/* ---- Pagination info text -------------------------------------- */
body.light-mode .text-deepGold\/60 { color: var(--ink-dim) !important; }
body.light-mode .page-btn, body.light-mode #page-first, body.light-mode #page-prev, body.light-mode #page-next, body.light-mode #page-last {
    font-weight: 600 !important;
    color: var(--ink) !important;
}
body.light-mode #page-first, body.light-mode #page-prev, body.light-mode #page-next, body.light-mode #page-last {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
}
body.light-mode #page-first:hover:not(:disabled), body.light-mode #page-prev:hover:not(:disabled), body.light-mode #page-next:hover:not(:disabled), body.light-mode #page-last:hover:not(:disabled) {
    background: var(--surface-2) !important;
}
body.light-mode .page-size-select { font-weight: 600 !important; }

/* ===== DENTIFY MODULE ================================================= */
body.light-mode .glass-panel {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-sm) !important;
}
body.light-mode .border-gray-800,
body.light-mode .border-gray-700 { border-color: var(--rule) !important; }
body.light-mode .bg-black\/20 { background-color: var(--surface-2) !important; }
body.light-mode .grid-bg {
    background-image:
        linear-gradient(rgba(37,99,235,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.05) 1px, transparent 1px) !important;
}

/* Dentify text overrides */
body.light-mode .text-teal-400 { color: var(--blue) !important; }
body.light-mode .text-green-400 { color: var(--green) !important; }
body.light-mode .text-purple-400 { color: var(--purple) !important; }
body.light-mode .text-purple-300 { color: var(--purple) !important; }
body.light-mode .text-orange-400 { color: var(--amber) !important; }
body.light-mode .text-red-400 { color: var(--red) !important; }
body.light-mode .text-yellow-400 { color: var(--amber) !important; }

/* Dentify button overrides */
body.light-mode .bg-purple-500\/20 { background-color: var(--purple-wash) !important; border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent) !important; }
body.light-mode .bg-purple-500\/30 { background-color: var(--purple-wash) !important; }
body.light-mode .bg-yellow-500\\/20 { background-color: var(--amber-wash) !important; }
body.light-mode .border-yellow-500\\/20 { border-color: color-mix(in srgb, var(--amber) 30%, transparent) !important; }
body.light-mode .bg-teal-400\\/10 { background-color: var(--blue-wash) !important; }
body.light-mode .border-teal-400\\/20 { border-color: color-mix(in srgb, var(--blue) 30%, transparent) !important; }

/* ===== STOREX MODULE ================================================= */
body.light-mode #global-header {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
}
body.light-mode .glass-sidebar {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
    box-shadow: var(--shadow-sm) !important;
}
body.light-mode .nav-item { color: var(--ink-dim) !important; }
body.light-mode .nav-item.active {
    background: var(--blue-wash) !important;
    color: var(--blue) !important;
    border-color: color-mix(in srgb, var(--blue) 45%, transparent) !important;
    text-shadow: none !important;
}
body.light-mode .nav-item:hover:not(.active) {
    background: var(--blue-wash) !important;
    color: var(--blue) !important;
}

/* Logo visibility */
body.light-mode img.mix-blend-screen,
body.light-mode img.mix-blend-lighten { mix-blend-mode: normal !important; }

/* Heavy shadows */
body.light-mode .glass-panel {
    box-shadow: var(--shadow-sm) !important;
}

/* Muddy text shadows */
body.light-mode [class*="drop-shadow-\[0_2px_2px_rgba(0,0,0,0.8)\]"] {
    filter: none !important;
}

/* Card icons */
body.light-mode .glass-panel .bg-gray-800,
body.light-mode .glass-panel .bg-gray-700 {
    background-color: var(--gold-wash) !important;
    border-color: color-mix(in srgb, var(--gold) 25%, transparent) !important;
}
body.light-mode .text-gray-400 { color: var(--ink-dim) !important; }

/* Dashboard KPI icons */
body.light-mode .glass-panel .bg-black\/50.text-white {
    background-color: var(--gold-wash) !important;
    color: var(--gold-ink) !important;
    box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent) !important;
}

/* Status pills */
body.light-mode .status-badge { box-shadow: none !important; }
body.light-mode .status-ok {
    background: var(--green-wash) !important;
    color: var(--green) !important;
    border-color: color-mix(in srgb, var(--green) 30%, transparent) !important;
}
body.light-mode .status-low {
    background: var(--amber-wash) !important;
    color: var(--amber) !important;
    border-color: color-mix(in srgb, var(--amber) 30%, transparent) !important;
}
body.light-mode .status-out {
    background: var(--red-wash) !important;
    color: var(--red) !important;
    border-color: color-mix(in srgb, var(--red) 30%, transparent) !important;
}

/* Storex category icons */
body.light-mode .glass-panel .bg-black\/40,
body.light-mode .bg-black\/40 {
    background-color: var(--blue-wash) !important;
    color: var(--blue) !important;
    border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent) !important;
}

/* "Add Product" gradient button → flat blue */
body.light-mode .from-teal-600 { --tw-gradient-from: var(--blue) var(--tw-gradient-from-position) !important; }
body.light-mode .to-teal-400 { --tw-gradient-to: var(--blue) var(--tw-gradient-to-position) !important; }
body.light-mode .hover\:from-teal-500:hover { --tw-gradient-from: var(--blue-strong) var(--tw-gradient-from-position) !important; }
body.light-mode .hover\:to-teal-300:hover { --tw-gradient-to: var(--blue-strong) var(--tw-gradient-to-position) !important; }
body.light-mode [class*="from-teal"] .text-richBlack,
body.light-mode [class*="from-teal"].text-richBlack { color: var(--on-blue) !important; }

/* Unit cost accent */
body.light-mode td.text-teal-400,
body.light-mode span.text-teal-400,
body.light-mode div.text-teal-400,
body.light-mode p.text-teal-400 { color: var(--blue) !important; }

/* Catalog button */
body.light-mode button[onclick="openManageDictionaryModal()"] {
    background-color: var(--blue-wash) !important;
    border-color: color-mix(in srgb, var(--blue) 35%, transparent) !important;
    color: var(--blue) !important;
}
body.light-mode button[onclick="openManageDictionaryModal()"]:hover {
    background-color: color-mix(in srgb, var(--blue) 18%, transparent) !important;
}

/* Sync box */
body.light-mode .bg-black\/30 {
    background-color: var(--surface-2) !important;
    border-color: var(--rule) !important;
}

/* ===== SETTINGS MODAL ================================================ */
body.light-mode .settings-modal h4[style*="color: #40C0BF"] { color: var(--blue) !important; }
body.light-mode .settings-modal h4[style*="color: #DAA520"] { color: var(--gold-ink) !important; }
body.light-mode .settings-modal p[style*="color: #aaa"],
body.light-mode .settings-modal span.text-gray-400 { color: var(--ink-dim) !important; }
body.light-mode .settings-modal input[type="text"],
body.light-mode .settings-modal input[type="password"] {
    background-color: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .settings-modal input::placeholder { color: var(--ink-faint) !important; }
body.light-mode .settings-modal i.fa-eye { color: var(--ink-dim) !important; }
body.light-mode .settings-modal .modal-close-bar,
body.light-mode .settings-modal div[style*="background: #080f19"] {
    background-color: var(--surface) !important;
    border-top: 1px solid var(--rule) !important;
    box-shadow: none !important;
}
body.light-mode .settings-modal .modal-close-bar button,
body.light-mode .settings-modal button[onclick="closeSettings()"] {
    background: var(--surface) !important;
    color: var(--ink-dim) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .settings-modal button[onclick="closeSettings()"]:hover {
    background: var(--surface-2) !important;
}
body.light-mode #logo-preview-box {
    background: var(--surface) !important;
    border: 2px dashed var(--rule) !important;
}
body.light-mode #logo-preview-box i { color: var(--ink-faint) !important; }
body.light-mode .settings-box {
    background: var(--surface-2) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .settings-inner-box {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .settings-footer {
    background: var(--surface) !important;
    border-top: 1px solid var(--rule) !important;
    box-shadow: none !important;
}

/* Production time filter buttons */
body.light-mode .prod-time-btn.active { background-color: var(--blue) !important; border-color: var(--blue) !important; color: var(--on-blue) !important; box-shadow: none !important; }
body.light-mode .prod-time-btn:not(.active) { color: var(--blue) !important; border-color: color-mix(in srgb, var(--blue) 30%, transparent) !important; }
body.light-mode .prod-time-btn:not(.active):hover { background-color: var(--blue-wash) !important; }

body.light-mode .text-deepGold { color: var(--gold-ink) !important; }

/* ===== ACCOUNTING ==================================================== */
body.light-mode[style*="background-color: #080f19"],
body.light-mode.bg-richBlack {
    background-color: var(--bg) !important;
    color: var(--ink) !important;
}
body.light-mode .accounting-tab { background: var(--surface-2) !important; color: var(--ink-dim) !important; border-color: var(--rule) !important; }
body.light-mode .accounting-tab.active { background: var(--surface) !important; color: var(--blue) !important; border-bottom-color: var(--surface) !important; }

body.light-mode .glass-panel,
body.light-mode .kpi-card {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--ink) !important;
}
body.light-mode header h1,
body.light-mode h2,
body.light-mode h3 { color: var(--ink) !important; }
body.light-mode .text-deepGold { color: var(--gold-ink) !important; }
body.light-mode .text-white { color: var(--ink) !important; }
body.light-mode .text-gray-400 { color: var(--ink-dim) !important; }

body.light-mode table th {
    background: var(--surface-2) !important;
    color: var(--ink-faint) !important;
    border-bottom: 1px solid var(--rule) !important;
}
body.light-mode table td {
    color: var(--ink) !important;
    border-bottom: 1px solid var(--rule) !important;
}
body.light-mode table tr:hover td { background: var(--surface-2) !important; }

body.light-mode input,
body.light-mode select {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
}
body.light-mode .stmt-sub-btn {
    color: var(--blue) !important;
    border-color: color-mix(in srgb, var(--blue) 30%, transparent) !important;
}
body.light-mode .stmt-sub-btn.active {
    background: var(--blue) !important;
    color: var(--on-blue) !important;
    border-color: var(--blue) !important;
}
body.light-mode .tab-btn { color: var(--ink-dim) !important; }
body.light-mode .tab-btn.active {
    color: var(--blue) !important;
    border-bottom-color: var(--blue) !important;
}