/* =========================================================================
   JOTO SYSTEM — DARK MODE (premium / glassy refinement)
   Theme architecture: CSS custom properties scoped to html[data-theme="dark"].
   Light mode remains the default and is untouched (html[data-theme="light"]).
   Loaded after vendor + app + joto-ui so overrides apply predictably.
   Print / PDF output is forced back to light; documents never go dark.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1. CSS custom properties                                             */
/* ------------------------------------------------------------------ */

:root {
    --joto-app-bg: #eef2f6;
    --joto-sidebar-bg: #ffffff;
    --joto-topnav-bg: #ffffff;
    --joto-surface-primary: #ffffff;
    --joto-surface-secondary: #f8fafc;
    --joto-input-bg: #ffffff;
    --joto-border: #e3e8ef;
    --joto-border-strong: #d2dae4;
    --joto-text-primary: #121926;
    --joto-text-secondary: #4b5565;
    --joto-text-muted: #697586;
    --joto-hover: #f3f4f6;
    --joto-brand: #2563eb;
}

html[data-theme="dark"] {
    --joto-app-bg: #070a12;
    --joto-sidebar-bg: #0b101d;
    --joto-topnav-bg: #0c1220;
    --joto-surface-primary: rgba(19, 25, 39, 0.94);
    --joto-surface-secondary: rgba(13, 18, 31, 0.92);
    --joto-input-bg: rgba(9, 14, 25, 0.85);
    --joto-border: rgba(148, 163, 184, 0.14);
    --joto-border-strong: rgba(148, 163, 184, 0.26);
    --joto-text-primary: #f2f5fb;
    --joto-text-secondary: #b9c4d8;
    --joto-text-muted: #8b98b0;
    --joto-hover: rgba(99, 102, 241, 0.12);
    --joto-brand: #5b8efe;
    --joto-glow: rgba(99, 102, 241, 0.34);
    --joto-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.3);
    --joto-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    --joto-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.52);
    color-scheme: dark;

    /* daisyUI (tw-dw-*) theme remap */
    --dw-b1: #141c2e;
    --dw-b2: #101625;
    --dw-b3: #0b101d;
    --dw-bc: rgba(148, 163, 184, 0.2);
    --dw-tx: #eef2f9;
}

/* Elements that must stay light even in dark mode (logo medallions,
   photo thumbnails, printed sections). */
html[data-theme="dark"] .joto-keep-light,
html[data-theme="dark"] .joto-keep-light.tw-bg-white {
    background-color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 2. Base layout — deep navy canvas with subtle ambient glow           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"],
html[data-theme="dark"].tw-bg-white {
    background-color: #070a12 !important;
}

html[data-theme="dark"] body {
    background-color: #070a12 !important;
    background-image:
        radial-gradient(1100px 700px at 88% -8%, rgba(79, 70, 229, 0.16), transparent 60%),
        radial-gradient(900px 640px at -6% 108%, rgba(56, 189, 248, 0.09), transparent 55%),
        linear-gradient(180deg, #0a0f1c 0%, #070a12 100%) !important;
    background-attachment: fixed;
    color: var(--joto-text-primary) !important;
}

html[data-theme="dark"] .tw-bg-gray-100 {
    background-color: var(--joto-surface-secondary) !important;
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content {
    background-color: transparent !important;
}

html[data-theme="dark"] main {
    background-color: transparent;
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(10, 14, 24, 0.8);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2c3650;
    border-radius: 6px;
    border: 2px solid rgba(10, 14, 24, 0.8);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3c4a6d;
}

/* Selection */
html[data-theme="dark"] ::selection {
    background-color: rgba(99, 102, 241, 0.45);
    color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* 3. Sidebar — deeper tone, clearer active/hover, refined spacing      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .side-bar,
html[data-theme="dark"] #side-bar {
    background: linear-gradient(180deg, #111a2e 0%, #0b101d 100%) !important;
    border-right: 1px solid var(--joto-border) !important;
}

html[data-theme="dark"] .side-bar .tw-bg-gray-200 {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="dark"] .side-bar .tw-border-gray-200,
html[data-theme="dark"] #side-bar .tw-border-gray-200 {
    border-color: var(--joto-border) !important;
}

html[data-theme="dark"] .side-bar a.tw-text-gray-600 {
    color: var(--joto-text-secondary) !important;
}

html[data-theme="dark"] .side-bar a.hover\:tw-bg-gray-100:hover,
html[data-theme="dark"] .side-bar a:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: var(--joto-text-primary) !important;
}

/* Active menu item — luminous brand pill with soft glow accent */
html[data-theme="dark"] .side-bar a.tw-text-primary-700 {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.30), rgba(99, 102, 241, 0.10)) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 0 var(--joto-brand), 0 0 18px rgba(99, 102, 241, 0.16) !important;
}

html[data-theme="dark"] .side-bar .tw-bg-gray-200.tw-text-primary-700 {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.30), rgba(99, 102, 241, 0.10)) !important;
}

/* Section / menu titles */
html[data-theme="dark"] .side-bar .tw-font-semibold,
html[data-theme="dark"] .side-bar span.tw-text-gray-500,
html[data-theme="dark"] .side-bar .tw-uppercase {
    letter-spacing: 0.04em;
    color: var(--joto-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* 4. Topbar / header — premium, cohesive, subtle glow on controls      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .joto-topbar {
    background: linear-gradient(180deg, #131d33 0%, #0c1222 100%) !important;
    border-bottom: 1px solid var(--joto-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .joto-topbar button,
html[data-theme="dark"] .joto-topbar a,
html[data-theme="dark"] .joto-topbar summary {
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important;
}

html[data-theme="dark"] .joto-topbar button:hover,
html[data-theme="dark"] .joto-topbar a:hover,
html[data-theme="dark"] .joto-topbar summary:hover,
html[data-theme="dark"] .joto-topbar .joto-theme-toggle:hover {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.26), 0 6px 18px rgba(99, 102, 241, 0.30) !important;
}

html[data-theme="dark"] .joto-topbar summary[open] {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3) !important;
}

/* Topbar "white surface" gizmos (calculator, theme toggle fallback) */
html[data-theme="dark"] .tw-bg-white\/60,
html[data-theme="dark"] .hover\:tw-bg-white\/60:hover {
    background-color: rgba(19, 26, 43, 0.72) !important;
}

/* Navbar dropdown menus that are white */
html[data-theme="dark"] .tw-dw-bg-base-100 {
    background-color: var(--joto-surface-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 5. Tailwind utility remap                                            */
/* ------------------------------------------------------------------ */

/* Surfaces — layered navy glass */
html[data-theme="dark"] .tw-bg-white { background-color: var(--joto-surface-primary) !important; }
html[data-theme="dark"] .tw-bg-gray-50 { background-color: rgba(22, 30, 48, 0.92) !important; }
html[data-theme="dark"] .tw-bg-gray-200 { background-color: rgba(32, 42, 64, 0.9) !important; }
html[data-theme="dark"] .tw-bg-gray-300 { background-color: rgba(42, 54, 80, 0.9) !important; }
html[data-theme="dark"] .tw-bg-gray-800 { background-color: #182238 !important; }
html[data-theme="dark"] .tw-bg-gray-900 { background-color: #0e1526 !important; }
html[data-theme="dark"] .tw-bg-slate-100 { background-color: rgba(22, 30, 48, 0.92) !important; }

/* Text */
html[data-theme="dark"] .tw-text-gray-900 { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .tw-text-gray-800 { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .tw-text-gray-700 { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .tw-text-gray-600 { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .tw-text-gray-500 { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .tw-text-gray-400 { color: var(--joto-text-muted) !important; }
html[data-theme="dark"] .tw-text-gray-300 { color: var(--joto-text-muted) !important; }
html[data-theme="dark"] .tw-text-black { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .tw-text-\[#1e1e1e\] { color: var(--joto-text-primary) !important; }

/* Borders & rings */
html[data-theme="dark"] .tw-ring-gray-200 { --tw-ring-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-ring-gray-100 { --tw-ring-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-ring-gray-300 { --tw-ring-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-border-gray-200 { border-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-border-gray-100 { border-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-border-gray-300 { border-color: var(--joto-border-strong) !important; }
html[data-theme="dark"] .tw-border-\[#D1D5DA\] { border-color: var(--joto-border-strong) !important; }
html[data-theme="dark"] .tw-border-slate-100,
html[data-theme="dark"] .tw-border-slate-200,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 { border-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-divide-gray-200 > * { border-color: var(--joto-border) !important; }
html[data-theme="dark"] .tw-divide-gray-300 > * { border-color: var(--joto-border) !important; }

/* Soft icon chips — delicate translucent tints */
html[data-theme="dark"] .tw-bg-sky-100, html[data-theme="dark"] .bg-sky-100 { background-color: rgba(56, 189, 248, 0.16) !important; }
html[data-theme="dark"] .tw-bg-green-100, html[data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.16) !important; }
html[data-theme="dark"] .tw-bg-yellow-100, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.16) !important; }
html[data-theme="dark"] .tw-bg-red-100, html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.16) !important; }
html[data-theme="dark"] .tw-bg-blue-100, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16) !important; }
html[data-theme="dark"] .tw-bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.16) !important; }
html[data-theme="dark"] .tw-bg-purple-100, html[data-theme="dark"] .bg-purple-100 { background-color: rgba(139, 92, 246, 0.16) !important; }
html[data-theme="dark"] .tw-bg-primary-50, html[data-theme="dark"] .hover\:tw-bg-primary-50:hover { background-color: rgba(91, 142, 254, 0.14) !important; }
html[data-theme="dark"] .tw-bg-primary-100 { background-color: rgba(91, 142, 254, 0.20) !important; }

/* Hover utilities focused in menus/dropdowns */
html[data-theme="dark"] .hover\:tw-bg-gray-100:hover { background-color: rgba(99, 102, 241, 0.12) !important; }
html[data-theme="dark"] .hover\:tw-bg-gray-200:hover { background-color: rgba(99, 102, 241, 0.16) !important; }
html[data-theme="dark"] .hover\:tw-text-gray-900:hover { color: var(--joto-text-primary) !important; }

/* ------------------------------------------------------------------ */
/* 6. Bootstrap / AdminLTE components                                   */
/* ------------------------------------------------------------------ */

/* Cards / boxes — layered glass panels with brand accent line */
html[data-theme="dark"] .box {
    background: linear-gradient(180deg, rgba(24, 32, 50, 0.97), rgba(14, 20, 34, 0.96)) !important;
    border: 1px solid var(--joto-border) !important;
    border-top: 2px solid rgba(99, 102, 241, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 36px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .box-default { background-color: var(--joto-surface-primary) !important; border-top: 2px solid rgba(99, 102, 241, 0.45) !important; }
html[data-theme="dark"] .box-solid { background: linear-gradient(180deg, rgba(24, 32, 50, 0.97), rgba(14, 20, 34, 0.96)) !important; }
html[data-theme="dark"] .box-header, html[data-theme="dark"] .box-body, html[data-theme="dark"] .box-footer { background-color: transparent; }
html[data-theme="dark"] .box-header { padding: 0.9rem 1.15rem; }
html[data-theme="dark"] .box-header .box-title { color: var(--joto-text-primary); font-weight: 600; }
html[data-theme="dark"] .box-header .box-title small,
html[data-theme="dark"] .box-header .box-title small a { color: var(--joto-text-muted); }
html[data-theme="dark"] .box-header.with-border { border-bottom: 1px solid var(--joto-border); }

/* Tables — premium, readable, glassy wrappers */
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper { border-radius: 10px; }

html[data-theme="dark"] table.table {
    background-color: transparent;
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-top-color: rgba(148, 163, 184, 0.10);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > thead > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tfoot > tr > th,
html[data-theme="dark"] .table-bordered > tfoot > tr > td {
    border-color: var(--joto-border);
}
html[data-theme="dark"] .table > thead > tr > th {
    border-bottom: 1px solid var(--joto-border-strong) !important;
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: #c9d4e6;
    font-weight: 600;
    white-space: nowrap;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.025);
}
html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: rgba(99, 102, 241, 0.08);
}
html[data-theme="dark"] .table > tfoot > tr > td {
    background-color: rgba(99, 102, 241, 0.10);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .table-transparent, html[data-theme="dark"] .table-transparent th {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .table-no-top-cell-border td,
html[data-theme="dark"] .table-no-top-cell-border th {
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] table.dataTable tbody > tr.selected {
    background-color: rgba(91, 142, 254, 0.30) !important;
}
html[data-theme="dark"] .table .thead-primary thead,
html[data-theme="dark"] table thead.blue-header th,
html[data-theme="dark"] table.blue-header thead th {
    background-color: rgba(91, 142, 254, 0.22) !important;
    color: #fff !important;
}

/* Forms — clean, slightly elevated surfaces */
html[data-theme="dark"] .form-control {
    background-color: var(--joto-input-bg);
    color: var(--joto-text-primary);
    border: 1px solid var(--joto-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html[data-theme="dark"] .form-control:focus {
    border-color: var(--joto-brand);
    background-color: var(--joto-input-bg);
    color: var(--joto-text-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: rgba(13, 18, 31, 0.7);
    color: var(--joto-text-muted);
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--joto-text-muted);
}
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] label,
html[data-theme="dark"] .checkbox label,
html[data-theme="dark"] .radio label {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] fieldset legend {
    color: var(--joto-text-primary);
    border-bottom-color: var(--joto-border);
}
html[data-theme="dark"] .input-group-addon {
    background-color: rgba(30, 40, 62, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .input-number .btn-default,
html[data-theme="dark"] .input-group .btn-default {
    background-color: rgba(30, 40, 62, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .has-error .form-control {
    border-color: #f45a5a;
}
html[data-theme="dark"] .has-error .help-block,
html[data-theme="dark"] .has-error .control-label,
html[data-theme="dark"] .has-error .radio,
html[data-theme="dark"] .has-error .checkbox {
    color: #f07171;
}
html[data-theme="dark"] .help-block, html[data-theme="dark"] .text-muted {
    color: var(--joto-text-muted);
}

/* Modals — glassmorphism layered above the page */
html[data-theme="dark"] .modal-content {
    background: linear-gradient(180deg, rgba(23, 31, 50, 0.99), rgba(13, 18, 32, 0.99)) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border-strong) !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(99, 102, 241, 0.06);
}
html[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--joto-border);
    padding: 1rem 1.25rem;
}
html[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--joto-border);
    padding: 0.9rem 1.25rem;
}
html[data-theme="dark"] .modal-title { color: var(--joto-text-primary); font-weight: 600; }
html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .close {
    color: var(--joto-text-secondary);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}
html[data-theme="dark"] .modal-header .close:hover,
html[data-theme="dark"] .close:hover {
    color: #ffffff;
    opacity: 1;
}

/* Dropdowns — glass panels */
html[data-theme="dark"] .dropdown-menu {
    background: rgba(20, 28, 46, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--joto-border);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .dropdown-menu > li > a {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: rgba(99, 102, 241, 0.14);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .dropdown-menu .divider,
html[data-theme="dark"] .dropdown-menu > li > a .divider {
    background-color: var(--joto-border);
}

/* Tabs & pills */
html[data-theme="dark"] .nav-tabs > li > a {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: rgba(99, 102, 241, 0.12);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs > li.active > a:focus {
    background-color: rgba(24, 32, 50, 0.9);
    color: var(--joto-text-primary);
    border-color: var(--joto-border);
    border-bottom-color: transparent;
}
html[data-theme="dark"] .nav-tabs-custom { background-color: var(--joto-surface-primary); }
html[data-theme="dark"] .nav-pills > li > a { color: var(--joto-text-secondary); }
html[data-theme="dark"] .nav-pills > li.active > a,
html[data-theme="dark"] .nav-pills > li.active > a:hover,
html[data-theme="dark"] .nav-pills > li.active > a:focus {
    background-color: var(--joto-brand);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.3);
}
html[data-theme="dark"] .nav-tabs > li > a .badge,
html[data-theme="dark"] .nav-tabs > li > a .label { background-color: rgba(32, 42, 64, 0.9); }

/* Buttons — luminous brand, glass default */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-flat.btn-default,
html[data-theme="dark"] .btn-flat:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):not(.btn-link) {
    background: linear-gradient(180deg, rgba(32, 42, 64, 0.95), rgba(20, 28, 46, 0.95)) !important;
    border: 1px solid var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
    border-radius: 8px !important;
}
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-flat:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-warning):not(.btn-danger):hover {
    background-color: rgba(40, 52, 78, 0.95) !important;
    border-color: var(--joto-border-strong) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .btn-link { color: var(--joto-brand); }

/* Brand buttons — keep identity, add soft luminous hover */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-danger:hover {
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.28);
    transform: translateY(-1px);
}

/* Pagination */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: rgba(30, 40, 62, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover {
    background-color: rgba(99, 102, 241, 0.14);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > a:focus,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span:hover {
    background-color: var(--joto-brand);
    border-color: var(--joto-brand);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

/* Panels, wells, alert variants */
html[data-theme="dark"] .well,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-footer {
    background-color: var(--joto-surface-secondary);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .alert.alert-info, html[data-theme="dark"] .alert-info { background-color: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.35); color: #aae4ff; }
html[data-theme="dark"] .alert.alert-success, html[data-theme="dark"] .alert-success { background-color: rgba(46, 204, 113, 0.14); border-color: rgba(46, 204, 113, 0.35); color: #b2f2cc; }
html[data-theme="dark"] .alert.alert-warning, html[data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.35); color: #ffe3a3; }
html[data-theme="dark"] .alert.alert-danger, html[data-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.35); color: #ffbfbf; }
html[data-theme="dark"] .alert.alert-danger .alert-link, html[data-theme="dark"] .alert .alert-link { color: inherit; font-weight: 600; }

/* Labels & badges */
html[data-theme="dark"] .label-default, html[data-theme="dark"] .badge { background-color: rgba(32, 42, 64, 0.9); color: var(--joto-text-secondary); }

/* Small boxes / info boxes (financial totals keep brand colors) */
html[data-theme="dark"] .small-box { background-color: var(--joto-surface-secondary); }
html[data-theme="dark"] .small-box .inner { color: var(--joto-text-primary); }
html[data-theme="dark"] .info-box { background-color: var(--joto-surface-primary); border-color: var(--joto-border); }
html[data-theme="dark"] .info-box-content { color: var(--joto-text-secondary); }
html[data-theme="dark"] .info-box-icon { border-color: var(--joto-border); }

/* Misc app.css utilities */
html[data-theme="dark"] .bg-light-gray { background-color: var(--joto-surface-secondary) !important; }
html[data-theme="dark"] .bg-gray, html[data-theme="dark"] .bg-gray-light { background-color: rgba(32, 42, 64, 0.9) !important; }
html[data-theme="dark"] .bg-lightgray { background-color: var(--joto-surface-secondary) !important; }
html[data-theme="dark"] .color-555, html[data-theme="dark"] .color-555 * { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .bg-white { background-color: var(--joto-surface-primary) !important; }

/* ------------------------------------------------------------------ */
/* 7. Plugins                                                          */
/* ------------------------------------------------------------------ */

/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--joto-input-bg);
    border-color: var(--joto-border);
    border-radius: 8px;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--joto-text-muted);
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--joto-text-secondary);
}
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--joto-text-secondary);
}
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(32, 42, 64, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .select2-dropdown {
    background: rgba(20, 28, 46, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--joto-border);
    border-radius: 10px;
}
html[data-theme="dark"] .select2-results__option {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(99, 102, 241, 0.16);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: var(--joto-brand) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--joto-brand) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .select2-search__field {
    background-color: var(--joto-input-bg) !important;
    color: var(--joto-text-primary);
    border-color: var(--joto-border);
    border-radius: 6px;
}
html[data-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--joto-text-primary);
}

/* DataTables */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--joto-input-bg);
    color: var(--joto-text-primary);
    border: 1px solid var(--joto-border);
    border-radius: 8px;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus { border-color: var(--joto-brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16); }
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgba(30, 40, 62, 0.9) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border-strong) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--joto-brand) !important;
    border-color: var(--joto-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    background-color: rgba(13, 18, 31, 0.9);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing span { color: var(--joto-text-secondary); }
html[data-theme="dark"] ul.dt-button-collection { background-color: var(--joto-surface-primary) !important; }
html[data-theme="dark"] .dt-buttons .btn-default { background-color: rgba(30, 40, 62, 0.9) !important; color: var(--joto-text-primary) !important; border-color: var(--joto-border) !important; }

/* ------------------------------------------------------------------ */
/* 6b. Remain-white cleanup — DataTables scrolling containers, tabs,    */
/*     neutral buttons, export controls (second pass)                   */
/* ------------------------------------------------------------------ */

/* Profit & Loss income-statement report (inline blade styles set white th) */
html[data-theme="dark"] .pl-standard-table th,
html[data-theme="dark"] .pl-section-row th {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: #c9d4e6 !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .pl-standard-table td {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .pl-total-row th,
html[data-theme="dark"] .pl-total-row td {
    color: var(--joto-text-primary) !important;
    border-top-color: var(--joto-border-strong) !important;
}
html[data-theme="dark"] .pl-grand-total-row th,
html[data-theme="dark"] .pl-grand-total-row td {
    color: var(--joto-text-primary) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
}
html[data-theme="dark"] .pl-statement-title h3,
html[data-theme="dark"] .pl-statement-title div,
html[data-theme="dark"] .pl-report-subtitle {
    color: var(--joto-text-primary) !important;
}

/* List-group nav (Business Settings sidebar pills were white `.list-group-item`) */
html[data-theme="dark"] .list-group-item {
    background-color: var(--joto-surface-secondary) !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .pos-tab-content {
    background-color: var(--joto-surface-primary) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border) !important;
}
html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:focus {
    background-color: rgba(99, 102, 241, 0.12) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:hover,
html[data-theme="dark"] .list-group-item.active:focus {
    background-color: var(--joto-brand) !important;
    border-color: var(--joto-brand) !important;
    color: #ffffff !important;
}

/* DataTables scroll containers (Financial Accounts / Products big white
   blocks) — the sticky header track and the scroll viewport both get a
   layered dark surface instead of the default white. */
html[data-theme="dark"] .dataTables_scroll,
html[data-theme="dark"] div.dataTables_scroll,
html[data-theme="dark"] .dataTables_scrollHead,
html[data-theme="dark"] div.dataTables_scrollHead,
html[data-theme="dark"] .dataTables_scrollHead .dataTables_scrollHeadInner,
html[data-theme="dark"] div.dataTables_scrollHeadInner,
html[data-theme="dark"] .dataTables_scrollBody,
html[data-theme="dark"] div.dataTables_scrollBody,
html[data-theme="dark"] .dataTables_scrollFoot,
html[data-theme="dark"] div.dataTables_scrollFoot {
    background-color: var(--joto-surface-primary) !important;
    color: var(--joto-text-primary) !important;
    box-shadow: none !important;
    scrollbar-color: rgba(99, 102, 241, 0.55) rgba(148, 163, 184, 0.16);
    scrollbar-width: thin;
}

/* Keep the table itself transparent so the layered surface shows through */
html[data-theme="dark"] div.dataTables_scrollBody > table,
html[data-theme="dark"] div.dataTables_scrollHeadInner > table.dataTable,
html[data-theme="dark"] table.dataTable {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] div.dataTables_scrollHeadInner > table.dataTable thead,
html[data-theme="dark"] .dataTables_scrollBody {
    background-color: var(--joto-surface-secondary) !important;
}

/* DataTable rows — subtle zebra + blue-violet hover */
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd {
    background-color: rgba(148, 163, 184, 0.06) !important;
}
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: var(--joto-text-primary) !important;
}

/* DataTable headers / footers */
html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: #c9d4e6 !important;
    border-bottom: 1px solid var(--joto-border-strong) !important;
    font-weight: 600;
}
html[data-theme="dark"] table.dataTable tfoot th,
html[data-theme="dark"] table.dataTable tfoot td {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: var(--joto-text-primary) !important;
    border-top: 1px solid var(--joto-border) !important;
}

/* Export / action buttons from DataTables Buttons */
html[data-theme="dark"] .dt-buttons .dt-button,
html[data-theme="dark"] .dt-button {
    background: linear-gradient(180deg, rgba(32, 42, 64, 0.95), rgba(20, 28, 46, 0.95)) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .dt-buttons .dt-button:hover,
html[data-theme="dark"] .dt-button:hover,
html[data-theme="dark"] .dt-button:focus {
    background-color: rgba(40, 52, 78, 0.95) !important;
    border-color: var(--joto-border-strong) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .dt-button.active,
html[data-theme="dark"] .dt-button:active,
html[data-theme="dark"] .dt-buttons .dt-button.active {
    background-color: var(--joto-brand) !important;
    border-color: var(--joto-brand) !important;
    color: #ffffff !important;
}

/* Other neutral button variants that still fell back to white */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-outline-secondary {
    background: rgba(148, 163, 184, 0.14) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border) !important;
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.24) !important;
    color: #ffffff !important;
}

/* nav-tabs-custom: fully dark panel with layered header + content */
html[data-theme="dark"] .nav-tabs-custom {
    background-color: var(--joto-surface-primary) !important;
    border: 1px solid var(--joto-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 36px rgba(0, 0, 0, 0.32) !important;
}
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs {
    background: linear-gradient(180deg, rgba(28, 37, 58, 0.85), rgba(22, 30, 48, 0.85)) !important;
    border-bottom: 1px solid var(--joto-border) !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0;
}
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--joto-text-secondary) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a:hover {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a:hover,
html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a:focus {
    background-color: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    border-bottom-color: transparent !important;
    color: var(--joto-text-primary) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .nav-tabs-custom > .tab-content {
    background-color: var(--joto-surface-primary) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
}

/* White-background utility residue anywhere in dark mode */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-lightgray {
    background-color: var(--joto-surface-secondary) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] [data-theme="dark"] .bg-white { background-color: var(--joto-surface-secondary) !important; }

/* Table-responsive wrappers that default to white */
html[data-theme="dark"] .table-responsive {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
}

/* Search / select controls inside toolbars */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper select,
html[data-theme="dark"] input[type="search"].form-control {
    background-color: var(--joto-input-bg) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border) !important;
}

/* File input buttons (themify / custom browse buttons) */
html[data-theme="dark"] .btn-file,
html[data-theme="dark"] .fileinput-button,
html[data-theme="dark"] .input-group-btn .btn-default {
    background: linear-gradient(180deg, rgba(32, 42, 64, 0.95), rgba(20, 28, 46, 0.95)) !important;
    color: var(--joto-text-primary) !important;
    border: 1px solid var(--joto-border) !important;
}

/* TinyMCE chrome (toolbar/statusbar live in the parent DOM) */
html[data-theme="dark"] .tox.tox-tinymce {
    background-color: var(--joto-surface-primary) !important;
    border: 1px solid var(--joto-border-strong) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .tox .tox-menubar,
html[data-theme="dark"] .tox .tox-toolbar,
html[data-theme="dark"] .tox .tox-toolbar__primary,
html[data-theme="dark"] .tox .tox-toolbar-overlord,
html[data-theme="dark"] .tox .tox-editor-header,
html[data-theme="dark"] .tox .tox-toolbar__group,
html[data-theme="dark"] .tox .tox-statusbar {
    background-color: rgba(22, 30, 48, 0.96) !important;
    color: var(--joto-text-secondary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .tox .tox-statusbar {
    border-top: 1px solid var(--joto-border) !important;
}
html[data-theme="dark"] .tox .tox-statusbar__path-item,
html[data-theme="dark"] .tox .tox-statusbar__wordcount,
html[data-theme="dark"] .tox .tox-statusbar a,
html[data-theme="dark"] .tox .tox-mbtn,
html[data-theme="dark"] .tox .tox-tbtn,
html[data-theme="dark"] .tox .tox-tbtn__select-label {
    color: var(--joto-text-secondary) !important;
    fill: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .tox .tox-mbtn:hover,
html[data-theme="dark"] .tox .tox-tbtn:hover,
html[data-theme="dark"] .tox .tox-tbtn:focus {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .tox .tox-tbtn--enabled,
html[data-theme="dark"] .tox .tox-tbtn--enabled:hover {
    background-color: rgba(99, 102, 241, 0.34) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .tox .tox-split-button:hover {
    background-color: rgba(99, 102, 241, 0.18) !important;
}
html[data-theme="dark"] .tox .tox-edit-area {
    background-color: var(--joto-surface-primary) !important;
}
html[data-theme="dark"] .tox .tox-toolbar-textfield {
    background-color: var(--joto-input-bg) !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}

/* Date pickers */
html[data-theme="dark"] .datepicker.dropdown-menu,
html[data-theme="dark"] .datepicker {
    background: rgba(20, 28, 46, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new { color: var(--joto-text-muted); }
html[data-theme="dark"] .datepicker table tr td.active.active {
    background-color: var(--joto-brand);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
html[data-theme="dark"] .datepicker table tr td.day.focused:hover,
html[data-theme="dark"] .datepicker table tr td span.focused:hover,
html[data-theme="dark"] .datepicker td:hover { background-color: rgba(99, 102, 241, 0.14); }

html[data-theme="dark"] .daterangepicker {
    background: rgba(20, 28, 46, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .daterangepicker .calendar-table { background-color: transparent; border-color: var(--joto-border); }
html[data-theme="dark"] .daterangepicker td.off,
html[data-theme="dark"] .daterangepicker td.off.end-date,
html[data-theme="dark"] .daterangepicker td.off.start-date { background-color: transparent; color: var(--joto-text-muted); }
html[data-theme="dark"] .daterangepicker td.available:hover { background-color: rgba(99, 102, 241, 0.14); color: var(--joto-text-primary); }
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--joto-brand);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
html[data-theme="dark"] .daterangepicker .ranges li { color: var(--joto-text-secondary); border-color: var(--joto-border); background-color: rgba(30, 40, 62, 0.9); }
html[data-theme="dark"] .daterangepicker .ranges li.active { background-color: var(--joto-brand); border-color: var(--joto-brand); color: #fff; }
html[data-theme="dark"] .daterangepicker .daterangepicker_input i,
html[data-theme="dark"] .daterangepicker th.month,
html[data-theme="dark"] .daterangepicker th.next, html[data-theme="dark"] .daterangepicker th.prev { color: var(--joto-text-secondary); }
html[data-theme="dark"] .daterangepicker input.form-control { background-color: var(--joto-input-bg); }

html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu { background: rgba(20, 28, 46, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table th { color: var(--joto-text-secondary); }
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--joto-brand); color: #fff; }
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.hour:hover,
html[data-theme="dark"] .bootstrap-datetimepicker-widget table td.minute:hover { background-color: rgba(99, 102, 241, 0.14); }

/* FullCalendar */
html[data-theme="dark"] .fc-unthemed .fc-content,
html[data-theme="dark"] .fc-unthemed .fc-divider,
html[data-theme="dark"] .fc-unthemed .fc-list-heading td,
html[data-theme="dark"] .fc-unthemed .fc-list-view,
html[data-theme="dark"] .fc-unthemed .fc-popover,
html[data-theme="dark"] .fc-unthemed .fc-row,
html[data-theme="dark"] .fc-unthemed tbody,
html[data-theme="dark"] .fc-unthemed td,
html[data-theme="dark"] .fc-unthemed th,
html[data-theme="dark"] .fc-unthemed thead { border-color: var(--joto-border); }
html[data-theme="dark"] .fc-unthemed .fc-divider { background-color: rgba(22, 30, 48, 0.92); }
html[data-theme="dark"] .fc-unthemed .fc-toolbar h2,
html[data-theme="dark"] .fc-toolbar h2 { color: var(--joto-text-primary); }
html[data-theme="dark"] .fc th.fc-day-header, html[data-theme="dark"] .fc td.fc-day-top,
html[data-theme="dark"] .fc-day-number, html[data-theme="dark"] .fc-day-grid .fc-content-skeleton thead th { color: var(--joto-text-secondary); }
html[data-theme="dark"] .fc-day-number { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .fc-unthemed td.fc-today { background-color: rgba(91, 142, 254, 0.18); }
html[data-theme="dark"] .fc-event { color: #fff !important; }

/* Tooltips & popovers */
html[data-theme="dark"] .popover {
    background: rgba(20, 28, 46, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .popover-title {
    background-color: rgba(30, 40, 62, 0.9);
    border-bottom-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .popover-content { color: var(--joto-text-secondary); }
html[data-theme="dark"] .popover.top > .arrow:after,
html[data-theme="dark"] .popover.bottom > .arrow:after,
html[data-theme="dark"] .popover.left > .arrow:after,
html[data-theme="dark"] .popover.right > .arrow:after { border-bottom-color: rgba(20, 28, 46, 0.96); }

html[data-theme="dark"] .tooltip-inner {
    background-color: rgba(30, 40, 62, 0.96);
    color: var(--joto-text-primary);
    border: 1px solid var(--joto-border);
}
html[data-theme="dark"] .tooltip.top .tooltip-arrow { border-top-color: rgba(30, 40, 62, 0.96); }
html[data-theme="dark"] .tooltip.bottom .tooltip-arrow { border-bottom-color: rgba(30, 40, 62, 0.96); }
html[data-theme="dark"] .tooltip.left .tooltip-arrow { border-left-color: rgba(30, 40, 62, 0.96); }
html[data-theme="dark"] .tooltip.right .tooltip-arrow { border-right-color: rgba(30, 40, 62, 0.96); }

/* Autocomplete */
html[data-theme="dark"] .ui-autocomplete {
    background: rgba(20, 28, 46, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: var(--joto-border);
    border-radius: 8px;
}
html[data-theme="dark"] .ui-menu .ui-menu-item { color: var(--joto-text-secondary); }
html[data-theme="dark"] .ui-menu .ui-state-focus,
html[data-theme="dark"] .ui-menu .ui-state-active,
html[data-theme="dark"] .ui-state-hover {
    background-color: var(--joto-brand) !important;
    color: #ffffff !important;
    border-color: var(--joto-brand) !important;
}

/* SweetAlert (v1 + v2) */
html[data-theme="dark"] .swal-modal {
    background: linear-gradient(180deg, rgba(23, 31, 50, 0.99), rgba(13, 18, 32, 0.99)) !important;
    border: 1px solid var(--joto-border-strong) !important;
    border-radius: 14px !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.52) !important;
}
html[data-theme="dark"] .swal-title,
html[data-theme="dark"] .swal-text { color: var(--joto-text-primary); }
html[data-theme="dark"] .swal-footer { border-top-color: var(--joto-border); background-color: rgba(13, 18, 31, 0.5); }
html[data-theme="dark"] .swal-button { background-color: rgba(32, 42, 64, 0.9); color: var(--joto-text-primary); }
html[data-theme="dark"] .swal-button--success { background-color: #28a745; }
html[data-theme="dark"] .swal-button--danger { background-color: #dc3545; }
html[data-theme="dark"] .swal2-popup { background: linear-gradient(180deg, rgba(23, 31, 50, 0.99), rgba(13, 18, 32, 0.99)) !important; }
html[data-theme="dark"] .swal2-title, html[data-theme="dark"] .swal2-html-container { color: var(--joto-text-primary); }
html[data-theme="dark"] .swal2-input { background-color: var(--joto-input-bg); border-color: var(--joto-border); color: var(--joto-text-primary); border-radius: 8px; }
html[data-theme="dark"] .swal2-select, html[data-theme="dark"] .swal2-checkbox, html[data-theme="dark"] .swal2-radio { color: var(--joto-text-secondary); }

/* Toastr / notifications */
html[data-theme="dark"] .toast-message { color: #fff; }
html[data-theme="dark"] .toast { opacity: 1 !important; }

/* Dropzone */
html[data-theme="dark"] .dropzone {
    background-color: rgba(13, 18, 31, 0.7);
    border-color: var(--joto-border-strong);
    border-radius: 10px;
}
html[data-theme="dark"] .dropzone .dz-message { color: var(--joto-text-secondary); }

/* jsTree */
html[data-theme="dark"] .jstree-default .jstree-anchor {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .jstree-default .jstree-hovered,
html[data-theme="dark"] .jstree-default .jstree-wholerow-hovered {
    background-color: rgba(99, 102, 241, 0.14);
    border-radius: 3px;
}
html[data-theme="dark"] .jstree-default .jstree-clicked,
html[data-theme="dark"] .jstree-default .jstree-wholerow-clicked {
    background-color: rgba(91, 142, 254, 0.3);
    border-radius: 3px;
    color: var(--joto-text-primary);
}

/* Loading overlays */
html[data-theme="dark"] .overlay > .loading, html[data-theme="dark"] .loading {
    color: var(--joto-text-secondary);
}

/* ------------------------------------------------------------------ */
/* 8. Highcharts (dashboard widgets)                                    */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background,
html[data-theme="dark"] .highcharts-plot-border { fill: transparent; }
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-xaxis-labels text,
html[data-theme="dark"] .highcharts-yaxis-labels text,
html[data-theme="dark"] .highcharts-label.highcharts-data-label text { fill: var(--joto-text-secondary); }
html[data-theme="dark"] .highcharts-title text,
html[data-theme="dark"] .highcharts-subtitle text { fill: var(--joto-text-primary); }
html[data-theme="dark"] .highcharts-legend text { fill: var(--joto-text-secondary); }
html[data-theme="dark"] .highcharts-legend-item text { fill: var(--joto-text-secondary); }
html[data-theme="dark"] .highcharts-grid-line,
html[data-theme="dark"] .highcharts-xaxis .highcharts-grid-line,
html[data-theme="dark"] .highcharts-yaxis .highcharts-grid-line { stroke: rgba(148, 163, 184, 0.14); }
html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick { stroke: var(--joto-border); }
html[data-theme="dark"] .highcharts-tooltip {
    background-color: rgba(20, 28, 46, 0.98) !important;
    border-color: var(--joto-border-strong) !important;
    color: var(--joto-text-primary) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}
html[data-theme="dark"] .highcharts-tooltip text { fill: var(--joto-text-primary) !important; }
html[data-theme="dark"] .highcharts-credits text { fill: var(--joto-text-muted); }

/* ------------------------------------------------------------------ */
/* 9. POS                                                               */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .pos-header { background-color: transparent; }
html[data-theme="dark"] .pos_product_div,
html[data-theme="dark"] #product_list_body { background-color: transparent; }
html[data-theme="dark"] .product_box {
    background: linear-gradient(180deg, rgba(24, 32, 50, 0.96), rgba(14, 20, 34, 0.96));
    border: 1px solid var(--joto-border);
    border-radius: 12px;
    color: var(--joto-text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
html[data-theme="dark"] .product_box:hover {
    background-color: rgba(32, 42, 64, 0.96);
    border-color: var(--joto-border-strong);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
html[data-theme="dark"] .pos-total { color: var(--joto-text-primary); }
html[data-theme="dark"] .pos-total-bar, html[data-theme="dark"] .pos-total-row { color: var(--joto-text-secondary); }
html[data-theme="dark"] .pos-form-actions { background-color: rgba(13, 18, 31, 0.9); }
html[data-theme="dark"] .option-div {
    background-color: rgba(30, 40, 62, 0.9);
    color: var(--joto-text-primary);
    border-color: var(--joto-border);
    border-radius: 8px;
}
html[data-theme="dark"] .option-div-group .option-div:hover { border-color: var(--joto-border-strong); background-color: rgba(99, 102, 241, 0.12); }
html[data-theme="dark"] .balance_due_box { color: var(--joto-text-secondary); }

/* ------------------------------------------------------------------ */
/* 10. Accounting / account book                                         */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .ledger-table thead th,
html[data-theme="dark"] .account-book thead th,
html[data-theme="dark"] table.journal thead th { color: var(--joto-text-secondary); }
html[data-theme="dark"] .text-danger, html[data-theme="dark"] .text-red { color: #f87171 !important; }
html[data-theme="dark"] .text-success, html[data-theme="dark"] .text-green { color: #34d399 !important; }
html[data-theme="dark"] .text-warning, html[data-theme="dark"] .text-orange { color: #fbbf24 !important; }
html[data-theme="dark"] .text-info, html[data-theme="dark"] .text-cyan { color: #38bdf8 !important; }

/* ------------------------------------------------------------------ */
/* 11. Theme toggle menu (dark) — polished glass, clear active state    */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .joto-theme-menu {
    background: rgba(15, 21, 35, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--joto-border-strong) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .joto-theme-menu .joto-theme-option {
    color: var(--joto-text-secondary) !important;
    background: transparent;
}

html[data-theme="dark"] .joto-theme-menu .joto-theme-option:hover {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .joto-theme-menu .joto-theme-option .theme-option-icon {
    color: #94a3b8;
}

html[data-theme="dark"] .joto-theme-menu .joto-theme-option .theme-selected-icon {
    color: #a5b4fc;
}

html[data-theme="dark"] .joto-theme-menu .joto-theme-option-active,
html[data-theme="dark"] .joto-theme-menu .joto-theme-option-active:hover {
    background-color: rgba(99, 102, 241, 0.18) !important;
    border-color: rgba(129, 140, 248, 0.40) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.22), inset 0 0 0 1px rgba(129, 140, 248, 0.14) !important;
}

/* ------------------------------------------------------------------ */
/* 12. Completeness pass — dashboard stat cards, charts, POS modal,     */
/*     Journal Entry Audit report boxes                                 */
/* ------------------------------------------------------------------ */

/* --- Dashboard stat cards / summary widgets: brighten every label.   --- */
html[data-theme="dark"] .small-box .inner h3,
html[data-theme="dark"] .small-box .inner .info-box-number,
html[data-theme="dark"] .small-box .inner .description,
html[data-theme="dark"] .info-box .info-box-number {
    color: var(--joto-text-primary);
    text-shadow: none;
}
html[data-theme="dark"] .small-box .inner p,
html[data-theme="dark"] .info-box .info-box-text {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .small-box-footer,
html[data-theme="dark"] .info-box .info-box-footer {
    background-color: rgba(15, 22, 40, 0.9);
    color: var(--joto-text-secondary);
    border-top-color: var(--joto-border);
}
html[data-theme="dark"] .small-box .icon i,
html[data-theme="dark"] .info-box .info-box-icon i {
    color: var(--joto-text-primary);
}

/* Tailwind stat-card components (components.static) — brighten value + chip */
html[data-theme="dark"] .tw-text-sky-500,
html[data-theme="dark"] .tw-text-blue-500,
html[data-theme="dark"] .tw-text-green-500,
html[data-theme="dark"] .tw-text-red-500,
html[data-theme="dark"] .tw-text-yellow-500,
html[data-theme="dark"] .tw-text-emerald-500,
html[data-theme="dark"] .tw-text-amber-500,
html[data-theme="dark"] .tw-text-indigo-500 {
    color: var(--joto-text-primary) !important;
}
/* Keep colored chips vivid (they are tinted, not solid) */
html[data-theme="dark"] .tw-bg-sky-100,
html[data-theme="dark"] .tw-bg-blue-100,
html[data-theme="dark"] .tw-bg-green-100,
html[data-theme="dark"] .tw-bg-red-100,
html[data-theme="dark"] .tw-bg-yellow-100,
html[data-theme="dark"] .tw-bg-emerald-100,
html[data-theme="dark"] .tw-bg-amber-100,
html[data-theme="dark"] .tw-bg-indigo-100,
html[data-theme="dark"] .tw-bg-purple-100 {
    background-color: rgba(99, 102, 241, 0.20) !important;
}

/* --- Highcharts: force full dark theming so nothing renders white.  --- */
html[data-theme="dark"] .highcharts-container,
html[data-theme="dark"] .highcharts-container svg {
    background: transparent !important;
}
html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background,
html[data-theme="dark"] .highcharts-plot-border,
html[data-theme="dark"] .highcharts-grid-line {
    fill: transparent !important;
    stroke: rgba(148, 163, 184, 0.16) !important;
}
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-xaxis-labels text,
html[data-theme="dark"] .highcharts-yaxis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-data-label text,
html[data-theme="dark"] .highcharts-legend text {
    fill: var(--joto-text-secondary) !important;
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .highcharts-title text,
html[data-theme="dark"] .highcharts-subtitle text {
    fill: var(--joto-text-primary) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .highcharts-tooltip {
    background: rgba(20, 28, 46, 0.98) !important;
    border: 1px solid var(--joto-border-strong) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .highcharts-tooltip span {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .highcharts-tooltip text,
html[data-theme="dark"] .highcharts-tooltip tspan {
    fill: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .highcharts-plot-line,
html[data-theme="dark"] .highcharts-band {
    stroke: rgba(148, 163, 184, 0.3) !important;
}

/* --- POS modal: guarantee every nested panel/table/label is themed. --- */
html[data-theme="dark"] .modal-content .box,
html[data-theme="dark"] .modal-content .panel,
html[data-theme="dark"] .modal-content .well,
html[data-theme="dark"] .modal-content .box-solid,
html[data-theme="dark"] .modal-content .bg-lightgray,
html[data-theme="dark"] .modal-content .bg-gray {
    background-color: var(--joto-surface-secondary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .modal-content .box-header,
html[data-theme="dark"] .modal-content .box-body,
html[data-theme="dark"] .modal-content .box-footer {
    background-color: transparent !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .modal-content h1,
html[data-theme="dark"] .modal-content h2,
html[data-theme="dark"] .modal-content h3,
html[data-theme="dark"] .modal-content h4,
html[data-theme="dark"] .modal-content h5,
html[data-theme="dark"] .modal-content .box-title,
html[data-theme="dark"] .modal-content label,
html[data-theme="dark"] .modal-content strong,
html[data-theme="dark"] .modal-content b {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .modal-content table,
html[data-theme="dark"] .modal-content .table,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td {
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .modal-content table,
html[data-theme="dark"] .modal-content .table {
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .modal-content input,
html[data-theme="dark"] .modal-content select,
html[data-theme="dark"] .modal-content textarea {
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .modal-content .input-group-addon {
    background-color: rgba(30, 40, 62, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-secondary);
}
html[data-theme="dark"] .modal-content .btn-default {
    background-color: rgba(30, 40, 62, 0.9);
    border-color: var(--joto-border);
    color: var(--joto-text-primary);
}
html[data-theme="dark"] .modal-body {
    color: var(--joto-text-secondary);
}

/* --- Journal Entry Audit report (custom light classes) --- */
html[data-theme="dark"] .audit-filter-box.box,
html[data-theme="dark"] .audit-filter-box.box-primary {
    background: linear-gradient(180deg, rgba(24, 32, 50, 0.97), rgba(14, 20, 34, 0.96)) !important;
    border: 1px solid var(--joto-border) !important;
    border-top: 3px solid #1e88e5 !important;
    border-radius: 14px !important;
}
html[data-theme="dark"] .audit-report-box {
    background: var(--joto-surface-secondary) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-report-box .audit-header {
    border-bottom-color: var(--joto-border) !important;
}
html[data-theme="dark"] .audit-report-box .audit-header h3 {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-report-box .audit-header p,
html[data-theme="dark"] .audit-report-box .audit-header strong {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .audit-summary-card {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-summary-card span {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .audit-summary-card strong {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-table-wrapper {
    border-color: var(--joto-border) !important;
    background-color: var(--joto-surface-secondary) !important;
}
html[data-theme="dark"] .audit-table th,
html[data-theme="dark"] .audit-table td {
    border-color: var(--joto-border) !important;
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .audit-table th {
    background-color: rgba(99, 102, 241, 0.12) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-table tfoot th {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .audit-table .text-muted {
    color: var(--joto-text-muted) !important;
}
html[data-theme="dark"] .audit-table .money {
    color: var(--joto-text-primary) !important;
}

/* --- Journal Entry Audit — All Ledger Lines (je-ledger-*) --- */
html[data-theme="dark"] .je-ledger-audit-box {
    background: linear-gradient(180deg, rgba(22, 30, 48, 0.97), rgba(12, 18, 31, 0.97)) !important;
    border-color: var(--joto-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
}
html[data-theme="dark"] .je-ledger-audit-header {
    background: rgba(30, 41, 59, 0.85) !important;
    border-bottom-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .je-ledger-summary {
    background: var(--joto-surface-secondary) !important;
}
html[data-theme="dark"] .je-ledger-summary-card {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .je-ledger-summary-card small {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .je-ledger-summary-card strong {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .je-ledger-card {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .je-ledger-card-header {
    background: rgba(32, 42, 64, 0.75) !important;
    border-bottom-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .je-ledger-card-header strong,
html[data-theme="dark"] .je-ledger-card-header span {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .je-ledger-card table {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .je-ledger-card th,
html[data-theme="dark"] .je-ledger-card td {
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .je-balanced { color: #34d399 !important; }
html[data-theme="dark"] .je-unbalanced { color: #f87171 !important; }

/* --- Internal Stock Transfer Journal (internal-transfer-*) --- */
html[data-theme="dark"] .internal-transfer-journal-box {
    background: linear-gradient(180deg, rgba(22, 30, 48, 0.97), rgba(12, 18, 31, 0.97)) !important;
    border-color: var(--joto-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42) !important;
}
html[data-theme="dark"] .internal-transfer-summary {
    background: var(--joto-surface-secondary) !important;
    border-bottom-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-summary-card {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .internal-summary-card span {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .internal-summary-card strong {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .internal-transfer-body {
    background: var(--joto-surface-secondary) !important;
}
html[data-theme="dark"] .internal-transfer-card {
    background: linear-gradient(180deg, rgba(24, 32, 50, 0.97), rgba(14, 20, 34, 0.96)) !important;
    border-color: var(--joto-border) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34) !important;
}
html[data-theme="dark"] .internal-transfer-card-head {
    background: rgba(32, 42, 64, 0.75) !important;
    border-bottom-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-transfer-ref {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .internal-transfer-meta {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .internal-transfer-pill {
    background: rgba(30, 40, 62, 0.9) !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-transfer-pill.profit,
html[data-theme="dark"] .internal-transfer-table .internal-transfer-badge.receiver {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}
html[data-theme="dark"] .internal-transfer-pill.loss {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}
html[data-theme="dark"] .internal-transfer-pill.balance-ok {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}
html[data-theme="dark"] .internal-transfer-lines-scroll,
html[data-theme="dark"] .jea-main-table-scroll {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-transfer-lines-scroll::-webkit-scrollbar-track,
html[data-theme="dark"] .jea-main-table-scroll::-webkit-scrollbar-track,
html[data-theme="dark"] .ledger-account-scroll::-webkit-scrollbar-track {
    background: rgba(15, 22, 40, 0.9) !important;
}
html[data-theme="dark"] .internal-transfer-lines-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .jea-main-table-scroll::-webkit-scrollbar-thumb,
html[data-theme="dark"] .ledger-account-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5) !important;
}
html[data-theme="dark"] .internal-transfer-table > tbody > tr > td {
    background: transparent !important;
    color: var(--joto-text-secondary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-transfer-table > tbody > tr:nth-child(even) > td {
    background: rgba(22, 30, 48, 0.72) !important;
}
html[data-theme="dark"] .internal-transfer-table > thead > tr > th {
    background: #182238 !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .internal-transfer-badge {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .internal-transfer-money { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .internal-transfer-note { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .internal-transfer-card-foot {
    background: var(--joto-surface-secondary) !important;
    border-top-color: var(--joto-border) !important;
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .internal-transfer-balanced { color: #34d399 !important; }
html[data-theme="dark"] .internal-transfer-unbalanced { color: #f87171 !important; }
html[data-theme="dark"] .internal-transfer-empty {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-muted) !important;
}

/* --- Ledger Accounts Follow Journal (ledger-follow-* / ledger-account-*) --- */
html[data-theme="dark"] .ledger-follow-box {
    background: linear-gradient(180deg, rgba(22, 30, 48, 0.97), rgba(12, 18, 31, 0.97)) !important;
    border-color: var(--joto-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42) !important;
}
html[data-theme="dark"] .ledger-follow-summary {
    background: var(--joto-surface-secondary) !important;
    border-bottom-color: var(--joto-border) !important;
}
html[data-theme="dark"] .ledger-follow-summary-card {
    background: var(--joto-surface-primary) !important;
    border-color: var(--joto-border) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .ledger-follow-summary-card span {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .ledger-follow-summary-card strong {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .ledger-follow-body {
    background: var(--joto-surface-secondary) !important;
}
html[data-theme="dark"] .ledger-account-card {
    background: linear-gradient(180deg, rgba(24, 32, 50, 0.97), rgba(14, 20, 34, 0.96)) !important;
    border-color: var(--joto-border) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34) !important;
}
html[data-theme="dark"] .ledger-account-card-head {
    background: rgba(32, 42, 64, 0.75) !important;
    border-bottom-color: var(--joto-border) !important;
}
html[data-theme="dark"] .ledger-account-name {
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .ledger-account-meta {
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .ledger-account-pill {
    background: rgba(30, 40, 62, 0.9) !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .ledger-account-pill.balance-ok {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.35) !important;
}
html[data-theme="dark"] .ledger-account-pill.balance-bad {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}
html[data-theme="dark"] .ledger-follow-table tbody td {
    background: transparent !important;
    color: var(--joto-text-secondary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .ledger-follow-table tbody tr:nth-child(odd) td {
    background: rgba(22, 30, 48, 0.72) !important;
}
html[data-theme="dark"] .ledger-follow-table thead th {
    background: #182238 !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .ledger-follow-money { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .ledger-follow-note { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .ledger-follow-footer {
    background: var(--joto-surface-secondary) !important;
    border-top-color: var(--joto-border) !important;
    color: var(--joto-text-secondary) !important;
}
html[data-theme="dark"] .ledger-follow-balanced { color: #34d399 !important; }
html[data-theme="dark"] .ledger-follow-unbalanced { color: #f87171 !important; }

/* --- Journal Entry Audit scroll system (jea-main-*) --- */
html[data-theme="dark"] .jea-main-scroll-toolbar {
    background: linear-gradient(135deg, #0b1220, #182b4a) !important;
    color: var(--joto-text-primary) !important;
}
html[data-theme="dark"] .jea-main-scroll-toolbar strong { color: var(--joto-text-primary) !important; }
html[data-theme="dark"] .jea-main-scroll-toolbar small { color: var(--joto-text-secondary) !important; }
html[data-theme="dark"] .jea-main-table-scroll table thead tr th {
    background: #182238 !important;
    color: var(--joto-text-primary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .jea-main-table-scroll table tbody tr td {
    color: var(--joto-text-secondary) !important;
    border-color: var(--joto-border) !important;
}
html[data-theme="dark"] .jea-main-table-scroll table tbody tr:nth-child(odd) td {
    background: rgba(22, 30, 48, 0.72) !important;
}

/* ------------------------------------------------------------------ */
/* 12. Focus visibility (accessibility)                                 */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] input:focus,
html[data-theme="dark"] button:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] a:focus,
html[data-theme="dark"] .btn:focus {
    outline: 2px solid rgba(99, 102, 241, 0.6) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12) !important;
}

/* ------------------------------------------------------------------ */
/* 13. Print safety — printed documents always stay light                */
/* ------------------------------------------------------------------ */

@media print {
    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    html[data-theme="dark"] body,
    html[data-theme="dark"] main,
    html[data-theme="dark"] .content-wrapper,
    html[data-theme="dark"] .wrapper,
    html[data-theme="dark"] .content {
        background: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
    }
    html[data-theme="dark"] .tw-bg-white,
    html[data-theme="dark"] .tw-bg-gray-50,
    html[data-theme="dark"] .tw-bg-gray-100,
    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .box,
    html[data-theme="dark"] .box-default,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .joto-theme-menu,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
    html[data-theme="dark"] .select2-dropdown,
    html[data-theme="dark"] .well,
    html[data-theme="dark"] .panel,
    html[data-theme="dark"] .panel-body,
    html[data-theme="dark"] .panel-heading,
    html[data-theme="dark"] .panel-footer {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #dddddd !important;
        outline-color: #dddddd !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    html[data-theme="dark"] .tw-text-gray-900,
    html[data-theme="dark"] .tw-text-gray-700,
    html[data-theme="dark"] .tw-text-gray-600,
    html[data-theme="dark"] .tw-text-gray-500,
    html[data-theme="dark"] .tw-text-gray-400,
    html[data-theme="dark"] .tw-text-black,
    html[data-theme="dark"] .table > tbody > tr > td,
    html[data-theme="dark"] .table > thead > tr > th,
    html[data-theme="dark"] .table > tfoot > tr > td {
        color: #000000 !important;
    }
    html[data-theme="dark"] .table > thead > tr > th {
        background-color: #f5f5f5 !important;
    }
    html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #fafafa !important;
    }
    html[data-theme="dark"] .form-control {
        border-color: #cccccc !important;
    }
    html[data-theme="dark"] .modal-header .close,
    html[data-theme="dark"] .close {
        color: #000000 !important;
    }
    /* Profit & Loss statement + DataTables scroll tracks + settings tab panels
       are forced light so printed/PDF output stays pure white */
    html[data-theme="dark"] .pl-standard-table th,
    html[data-theme="dark"] .pl-standard-table td,
    html[data-theme="dark"] .pl-section-row th,
    html[data-theme="dark"] .pl-total-row th,
    html[data-theme="dark"] .pl-total-row td,
    html[data-theme="dark"] .pl-grand-total-row th,
    html[data-theme="dark"] .pl-grand-total-row td,
    html[data-theme="dark"] .dataTables_scrollHead,
    html[data-theme="dark"] div.dataTables_scrollHeadInner,
    html[data-theme="dark"] .dataTables_scrollBody,
    html[data-theme="dark"] .dataTables_scrollFoot,
    html[data-theme="dark"] .pos-tab-content,
    html[data-theme="dark"] .list-group-item,
    html[data-theme="dark"] .nav-tabs-custom,
    html[data-theme="dark"] .nav-tabs-custom > .tab-content,
    html[data-theme="dark"] .audit-report-box,
    html[data-theme="dark"] .audit-summary-card,
    html[data-theme="dark"] .audit-table-wrapper,
    html[data-theme="dark"] .audit-table th,
    html[data-theme="dark"] .audit-table td,
    html[data-theme="dark"] .je-ledger-audit-box,
    html[data-theme="dark"] .je-ledger-summary-card,
    html[data-theme="dark"] .je-ledger-card,
    html[data-theme="dark"] .internal-transfer-journal-box,
    html[data-theme="dark"] .internal-summary-card,
    html[data-theme="dark"] .internal-transfer-card,
    html[data-theme="dark"] .internal-transfer-table td,
    html[data-theme="dark"] .internal-transfer-table th,
    html[data-theme="dark"] .ledger-follow-box,
    html[data-theme="dark"] .ledger-follow-summary-card,
    html[data-theme="dark"] .ledger-account-card,
    html[data-theme="dark"] .ledger-follow-table td,
    html[data-theme="dark"] .ledger-follow-table th,
    html[data-theme="dark"] .jea-main-table-scroll,
    html[data-theme="dark"] .tox.tox-tinymce,
    html[data-theme="dark"] .tox .tox-toolbar,
    html[data-theme="dark"] .tox .tox-toolbar__primary,
    html[data-theme="dark"] .tox .tox-statusbar,
    html[data-theme="dark"] .tox .tox-menubar {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        border-color: #dddddd !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    html[data-theme="dark"] .pl-section-row th,
    html[data-theme="dark"] .table > thead > tr > th {
        background-color: #f5f5f5 !important;
    }
    html[data-theme="dark"] .joto-theme-menu,
    html[data-theme="dark"] .joto-theme,
    html[data-theme="dark"] .joto-topbar,
    html[data-theme="dark"] .no-print {
        display: none !important;
    }
}
/* ------------------------------------------------------------------ */
/* Product photo quick-update (Product Details modal) dark refinements  */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .product-photo-area {
    border-color: var(--joto-border-strong);
    background-color: var(--joto-surface-secondary);
}

html[data-theme="dark"] .product-photo-action {
    background-color: var(--joto-surface-secondary);
    color: var(--joto-text-primary);
    border-color: transparent;
}

html[data-theme="dark"] .product-photo-action:hover {
    background-color: var(--joto-hover);
    border-color: var(--joto-border);
}

html[data-theme="dark"] .product-photo-action-list + .product-photo-action-list {
    border-top-color: var(--joto-border);
}

html[data-theme="dark"] .product-photo-preview-wrap {
    background-color: var(--joto-input-bg);
    border-color: var(--joto-border-strong);
}

html[data-theme="dark"] .product-photo-preview-error {
    color: #f87171;
}