/* ==========================================================================
   Dark mode. Everything keys off html[data-theme="dark"] (set before first paint by the inline script in
   the layouts). Tokens first -- most components already read them -- then the few third-party widgets and
   hard-coded colours that need a nudge.
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --erp-body-bg: #0e1120;
    --erp-surface: #171b2e;
    --erp-text: #e7e9f3;
    --erp-text-muted: #9ca5bd;
    --erp-border: #2a304a;
    --mosta-border-strong: #3a4160;
    --mosta-text-subtle: #6f7896;

    --mosta-surface-2: #1d2238;
    --tint-indigo: rgba(99, 102, 241, .2);
    --tint-red: rgba(239, 68, 68, .18);
    --tint-green: rgba(34, 197, 94, .17);
    --tint-amber: rgba(245, 158, 11, .17);
    --tint-blue: rgba(59, 130, 246, .18);
    --tint-slate: rgba(148, 163, 184, .2);

    --erp-primary-soft: color-mix(in srgb, var(--erp-primary) 26%, #171b2e);
    --erp-success-soft: color-mix(in srgb, var(--erp-success) 22%, #171b2e);
    --erp-warning-soft: color-mix(in srgb, var(--erp-warning) 22%, #171b2e);
    --erp-danger-soft: color-mix(in srgb, var(--erp-danger) 22%, #171b2e);
    --erp-info-soft: color-mix(in srgb, var(--erp-info) 22%, #171b2e);

    /* Bootstrap 5.3 components */
    --bs-body-bg: var(--erp-body-bg);
    --bs-body-color: var(--erp-text);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--erp-text-muted);
    --bs-tertiary-bg: var(--mosta-surface-2);
    --bs-secondary-bg: var(--mosta-surface-2);
    --bs-border-color: var(--erp-border);
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --bs-link-color: #a5b4fc;
    --bs-link-hover-color: #c7d2fe;
    --bs-heading-color: var(--erp-text);
}
html[data-theme="dark"] body { background: var(--erp-body-bg); color: var(--erp-text); }
html[data-theme="dark"] .text-muted { color: var(--erp-text-muted) !important; }
html[data-theme="dark"] .text-body { color: var(--erp-text) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background: var(--erp-surface) !important; }
html[data-theme="dark"] hr { border-color: var(--erp-border); opacity: 1; }
html[data-theme="dark"] .navbar-brand, html[data-theme="dark"] .page-title, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--erp-text); }

/* Surfaces, forms, tables */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="date"] {
    background-color: var(--erp-surface); color: var(--erp-text); border-color: var(--mosta-border-strong);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] input::placeholder { color: var(--mosta-text-subtle); }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--erp-surface); color: var(--erp-text); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--mosta-surface-2); }
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--erp-text); --bs-table-border-color: var(--erp-border); --bs-table-striped-bg: rgba(255,255,255,.03); --bs-table-hover-bg: rgba(255,255,255,.05); color: var(--erp-text); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--erp-border); }
html[data-theme="dark"] .table thead th { background: var(--mosta-surface-2); color: var(--erp-text-muted); }
html[data-theme="dark"] .table-row-link:hover td, html[data-theme="dark"] tr.table-row-link:hover > * { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover, html[data-theme="dark"] .toast, html[data-theme="dark"] .offcanvas { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); }
html[data-theme="dark"] .dropdown-item { color: var(--erp-text); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--mosta-surface-2); color: #fff; }
html[data-theme="dark"] .dropdown-divider { border-color: var(--erp-border); }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--erp-border); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-theme="dark"] .btn-outline-secondary { color: var(--erp-text-muted); border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .btn-outline-secondary:hover { background: var(--mosta-surface-2); color: #fff; }
html[data-theme="dark"] .btn-light { background: var(--mosta-surface-2); color: var(--erp-text); border-color: var(--erp-border); }
html[data-theme="dark"] .badge.text-bg-light { background: var(--mosta-surface-2) !important; color: var(--erp-text) !important; border-color: var(--erp-border) !important; }
html[data-theme="dark"] .alert-success { background: var(--tint-green); color: #86efac; border-color: rgba(34,197,94,.35); }
html[data-theme="dark"] .alert-danger { background: var(--tint-red); color: #fca5a5; border-color: rgba(239,68,68,.35); }
html[data-theme="dark"] .alert-warning { background: var(--tint-amber); color: #fcd34d; border-color: rgba(245,158,11,.35); }
html[data-theme="dark"] .alert-info { background: var(--tint-blue); color: #93c5fd; border-color: rgba(59,130,246,.35); }
html[data-theme="dark"] .page-link { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); }
html[data-theme="dark"] .nav-tabs, html[data-theme="dark"] .mosta-tabs { border-color: var(--erp-border); }
html[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--mosta-surface-2); border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .form-range::-webkit-slider-runnable-track { background: var(--mosta-border-strong); }
html[data-theme="dark"] .progress { background: var(--mosta-surface-2); }

/* Text colours that were hard-coded for a white page */
html[data-theme="dark"] .fw-semibold, html[data-theme="dark"] .fw-bold, html[data-theme="dark"] strong, html[data-theme="dark"] b { color: inherit; }
html[data-theme="dark"] .meta-text { color: var(--erp-text-muted); }
html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .breadcrumb-item { color: var(--erp-text-muted); }

/* Tom Select */
html[data-theme="dark"] .ts-control, html[data-theme="dark"] .ts-wrapper.single.input-active .ts-control, html[data-theme="dark"] .ts-wrapper.focus .ts-control { background: var(--erp-surface); color: var(--erp-text); border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .ts-control input { color: var(--erp-text); }
html[data-theme="dark"] .ts-dropdown, html[data-theme="dark"] .ts-dropdown.form-control { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .ts-dropdown .option, html[data-theme="dark"] .ts-dropdown .no-results, html[data-theme="dark"] .ts-dropdown .create { color: var(--erp-text); }
html[data-theme="dark"] .ts-dropdown .active, html[data-theme="dark"] .ts-dropdown .option:hover { background: var(--erp-primary-soft); color: #fff; }
html[data-theme="dark"] .ts-dropdown .selected { background: var(--mosta-surface-2); }
html[data-theme="dark"] .ts-wrapper.multi .ts-control > div { background: var(--erp-primary-soft); color: var(--erp-text); }
html[data-theme="dark"] .ts-wrapper.disabled .ts-control { background: var(--mosta-surface-2) !important; }

/* Flatpickr */
html[data-theme="dark"] .flatpickr-calendar { background: var(--erp-surface); color: var(--erp-text); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); border: 1px solid var(--erp-border); }
html[data-theme="dark"] .flatpickr-calendar:before, html[data-theme="dark"] .flatpickr-calendar:after { border-bottom-color: var(--erp-surface); border-top-color: var(--erp-surface); }
html[data-theme="dark"] .flatpickr-months .flatpickr-month, html[data-theme="dark"] .flatpickr-current-month input.cur-year, html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, html[data-theme="dark"] span.flatpickr-weekday, html[data-theme="dark"] .flatpickr-weekdays { background: transparent; color: var(--erp-text-muted); fill: var(--erp-text-muted); }
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--erp-surface); }
html[data-theme="dark"] .flatpickr-day { color: var(--erp-text); }
html[data-theme="dark"] .flatpickr-day:hover, html[data-theme="dark"] .flatpickr-day.prevMonthDay:hover, html[data-theme="dark"] .flatpickr-day.nextMonthDay:hover { background: var(--mosta-surface-2); border-color: var(--mosta-surface-2); }
html[data-theme="dark"] .flatpickr-day.prevMonthDay, html[data-theme="dark"] .flatpickr-day.nextMonthDay, html[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--mosta-text-subtle); }
html[data-theme="dark"] .flatpickr-day.today { border-color: var(--erp-primary); }
html[data-theme="dark"] .flatpickr-day.selected { background: var(--erp-primary); border-color: var(--erp-primary); color: #fff; }
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, html[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--erp-text-muted); }
html[data-theme="dark"] .numInputWrapper span.arrowUp:after { border-bottom-color: var(--erp-text-muted); } html[data-theme="dark"] .numInputWrapper span.arrowDown:after { border-top-color: var(--erp-text-muted); }

/* Quill editor + the floating toolbar keeps its own dark look */
html[data-theme="dark"] .ql-toolbar.ql-snow, html[data-theme="dark"] .ql-container.ql-snow { border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--mosta-surface-2); }
html[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--erp-text-muted); } html[data-theme="dark"] .ql-snow .ql-fill { fill: var(--erp-text-muted); }
html[data-theme="dark"] .ql-snow .ql-picker { color: var(--erp-text-muted); }
html[data-theme="dark"] .ql-snow .ql-picker-options, html[data-theme="dark"] .ql-snow .ql-tooltip { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .ql-snow .ql-tooltip input[type=text] { background: var(--mosta-surface-2); color: var(--erp-text); border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .ql-editor { color: var(--erp-text); }
html[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--mosta-text-subtle); }
html[data-theme="dark"] .ql-editor blockquote, html[data-theme="dark"] .rich-text-display blockquote, html[data-theme="dark"] .description-view blockquote { border-color: var(--mosta-border-strong); color: var(--erp-text-muted); }
html[data-theme="dark"] .ql-editor a, html[data-theme="dark"] .rich-text-display a, html[data-theme="dark"] .description-view a { color: #a5b4fc; }
html[data-theme="dark"] table.quill-better-table td, html[data-theme="dark"] .rich-text-display td, html[data-theme="dark"] .rich-text-display th, html[data-theme="dark"] .description-view td, html[data-theme="dark"] .description-view th { border-color: var(--mosta-border-strong); }
html[data-theme="dark"] .qlbt-operation-menu { background: var(--erp-surface); color: var(--erp-text); border-color: var(--erp-border); }
html[data-theme="dark"] .qlbt-operation-menu .qlbt-operation-menu-item:hover { background: var(--mosta-surface-2); }

/* Code blocks: real dark code theme */
html[data-theme="dark"] .ql-inline-editor .ql-editor pre.ql-syntax, html[data-theme="dark"] .ql-inline-editor .ql-editor .ql-code-block-container, html[data-theme="dark"] .rich-text-field .ql-snow .ql-editor pre.ql-syntax, html[data-theme="dark"] .rich-text-display pre, html[data-theme="dark"] .description-view pre, html[data-theme="dark"] .ql-editor pre {
    background: #0b0e19; color: #e6edf3; border-color: #2a304a;
}
html[data-theme="dark"] .hljs { color: #e6edf3; background: transparent; }
html[data-theme="dark"] .hljs-keyword, html[data-theme="dark"] .hljs-doctag, html[data-theme="dark"] .hljs-template-tag, html[data-theme="dark"] .hljs-type { color: #ff7b72; }
html[data-theme="dark"] .hljs-title, html[data-theme="dark"] .hljs-title.class_, html[data-theme="dark"] .hljs-title.function_ { color: #d2a8ff; }
html[data-theme="dark"] .hljs-attr, html[data-theme="dark"] .hljs-attribute, html[data-theme="dark"] .hljs-literal, html[data-theme="dark"] .hljs-meta, html[data-theme="dark"] .hljs-number, html[data-theme="dark"] .hljs-operator, html[data-theme="dark"] .hljs-variable, html[data-theme="dark"] .hljs-selector-attr, html[data-theme="dark"] .hljs-selector-class, html[data-theme="dark"] .hljs-selector-id { color: #79c0ff; }
html[data-theme="dark"] .hljs-string, html[data-theme="dark"] .hljs-regexp, html[data-theme="dark"] .hljs-meta .hljs-string { color: #a5d6ff; }
html[data-theme="dark"] .hljs-built_in, html[data-theme="dark"] .hljs-symbol { color: #ffa657; }
html[data-theme="dark"] .hljs-comment, html[data-theme="dark"] .hljs-code, html[data-theme="dark"] .hljs-formula { color: #8b949e; }
html[data-theme="dark"] .hljs-name, html[data-theme="dark"] .hljs-quote, html[data-theme="dark"] .hljs-selector-tag, html[data-theme="dark"] .hljs-selector-pseudo { color: #7ee787; }
html[data-theme="dark"] .code-copy-btn { background: #171b2e; color: var(--erp-text-muted); border-color: var(--mosta-border-strong); }

/* Small controls that used a white thumb / hard-coded neutrals */
html[data-theme="dark"] .cur-switch span::before { background: #e7e9f3; }
html[data-theme="dark"] .cur-filters, html[data-theme="dark"] .doc-discount-mode { background: var(--erp-body-bg); }
html[data-theme="dark"] .cur-filters button.is-on, html[data-theme="dark"] .doc-discount-mode input:checked + span { background: var(--erp-surface); }
html[data-theme="dark"] .doc-totals { background: linear-gradient(180deg, var(--erp-surface), var(--mosta-surface-2)); }
html[data-theme="dark"] .doc-lines-table tbody tr:hover td { background: var(--mosta-surface-2); }
html[data-theme="dark"] .tone-danger { --tb: rgba(239, 68, 68, .18); --t: #f87171; }
html[data-theme="dark"] .tone-success { --tb: rgba(34, 197, 94, .17); --t: #4ade80; }
html[data-theme="dark"] .tone-primary { --tb: rgba(99, 102, 241, .22); --t: #a5b4fc; }
html[data-theme="dark"] .tone-muted { --tb: rgba(148, 163, 184, .2); --t: #cbd5e1; }
html[data-theme="dark"] .debt-card.is-lent .debt-avatar, html[data-theme="dark"] .debt-hero.is-lent .debt-avatar { --tb: rgba(34, 197, 94, .17); --t: #4ade80; }
html[data-theme="dark"] .debt-card.is-borrowed .debt-avatar, html[data-theme="dark"] .debt-hero.is-borrowed .debt-avatar { --tb: rgba(239, 68, 68, .18); --t: #f87171; }
html[data-theme="dark"] .inv-pill-draft { background: rgba(245, 158, 11, .2); color: #fcd34d; }
html[data-theme="dark"] .inv-pill-posted { background: rgba(148, 163, 184, .2); color: #cbd5e1; }
html[data-theme="dark"] .inv-pill-partial { background: rgba(59, 130, 246, .2); color: #93c5fd; }
html[data-theme="dark"] .inv-pill-paid { background: rgba(34, 197, 94, .2); color: #86efac; }
html[data-theme="dark"] .inv-pill-cancelled { background: rgba(148, 163, 184, .12); color: #94a3b8; }
html[data-theme="dark"] .acc-kpi-icon { background: color-mix(in srgb, var(--c) 22%, #171b2e); }
html[data-theme="dark"] .acc-alert.is-hot { background: var(--tint-red); border-color: rgba(239, 68, 68, .4); }
html[data-theme="dark"] .acc-alert.is-warn { background: var(--tint-amber); border-color: rgba(245, 158, 11, .4); }
html[data-theme="dark"] .accounting-nav-menu .dropdown-item.active { background: var(--erp-primary-soft); color: #c7d2fe; }
html[data-theme="dark"] .ql-slash-menu { border-color: var(--erp-border); box-shadow: 0 14px 36px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .ql-slash-ico { background: var(--mosta-surface-2); color: #a5b4fc; }
html[data-theme="dark"] img.avatar-sm, html[data-theme="dark"] .avatar-xs { border-color: rgba(255,255,255,.2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #363d5a; border-radius: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* Theme switcher in the navbar */
.theme-switch .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.theme-switch .dropdown-item.active { background: rgba(79, 70, 229, .12); color: var(--mosta-primary); font-weight: 700; }
html[data-theme="dark"] .theme-switch .dropdown-item.active { background: var(--erp-primary-soft); color: #c7d2fe; }

/* The button shows the mode you are in: sun in light, moon in dark */
.theme-switch .js-theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-switch .js-theme-icon-light { display: none; }
html[data-theme="dark"] .theme-switch .js-theme-icon-dark { display: inline; }

/* To Do KPI tiles and other hard-coded dark-on-tint numbers */
html[data-theme="dark"] .todo-kpi .todo-kpi-num { color: var(--erp-text); }
html[data-theme="dark"] .todo-kpi .todo-kpi-label { color: var(--erp-text-muted); }
/* Switch track when off */
html[data-theme="dark"] .cur-switch span { background: #3a4160; }
html[data-theme="dark"] .cur-switch input:checked + span { background: #16a34a; }