/*
 * Dark mode for the "creative" theme and everything built on it.
 *
 * Loaded last on every page. Two halves of the job:
 *   1. here: theme variables, the sidebar/topbar, Bootstrap utilities that are hard-wired
 *      to white/black, and third-party widgets that ship light-only styles;
 *   2. in the templates/CSS/JS themselves: every hard-coded colour carries its own dark
 *      value via light-dark(light, dark), preceded by the plain light value as a fallback
 *      for browsers without light-dark(). Light mode renders exactly as before.
 * Apart from the --bs-* bridge right below, nothing here applies in light mode.
 */

/* ── --bs-* bridge ──────────────────────────────────────────────────────
   This theme renames Bootstrap's variables to --vz-*, so the 260+ var(--bs-...) references in
   the templates resolved to nothing: white fallbacks in dark mode, and no colour at all where no
   fallback was given. Pointing them at the live --vz-* values fixes both and follows the theme. */
:root {
    --bs-primary: var(--vz-primary);
    --bs-primary-rgb: var(--vz-primary-rgb);
    --bs-primary-bg-subtle: var(--vz-primary-bg-subtle);
    --bs-secondary: var(--vz-secondary);
    --bs-secondary-color: var(--vz-secondary-color);
    --bs-secondary-bg: var(--vz-secondary-bg);
    --bs-tertiary-bg: var(--vz-tertiary-bg);
    --bs-body-bg: var(--vz-body-bg);
    --bs-body-color: var(--vz-body-color);
    --bs-emphasis-color: var(--vz-emphasis-color);
    --bs-border-color: var(--vz-border-color);
    --bs-border-color-translucent: var(--vz-border-color-translucent);
    --bs-card-bg: var(--vz-secondary-bg);
    --bs-success: var(--vz-success);
    --bs-success-rgb: var(--vz-success-rgb);
    --bs-success-bg-subtle: var(--vz-success-bg-subtle);
    --bs-info: var(--vz-info);
    --bs-info-rgb: var(--vz-info-rgb);
    --bs-info-border-subtle: var(--vz-info-border-subtle);
    --bs-warning: var(--vz-warning);
    --bs-warning-rgb: var(--vz-warning-rgb);
    --bs-danger: var(--vz-danger);
    --bs-danger-rgb: var(--vz-danger-rgb);
    --bs-light: var(--vz-light);
    --bs-white: var(--vz-white);
    --bs-gray-50: #f8f9fa;
    --bs-gray-100: var(--vz-gray-100);
    --bs-gray-200: var(--vz-gray-200);
    --bs-gray-300: var(--vz-gray-300);
    --bs-gray-600: var(--vz-gray-600);
    --bs-gray-700: var(--vz-gray-700);
    --bs-gray-800: var(--vz-gray-800);

    /* Velzon scopes these to .card / .dropdown-menu, but templates read them anywhere. */
    --vz-card-bg: var(--vz-secondary-bg);
    --vz-dropdown-bg: var(--vz-secondary-bg);
}
/* Headings carry their own colour, so inside a filled header marked .text-white / .text-dark
   (e.g. "card-header bg-primary text-white") they ignored it: grey-on-orange in both themes. */
[class*="bg-"]:is(.text-white, .text-dark) :is(h1, h2, h3, h4, h5, h6, .card-title) {
    color: inherit;
}

/* Grey scale is used as surfaces (50-100), lines (200-300) and text (600-800): invert it. */
[data-bs-theme=dark] {
    --vz-input-border-color: var(--vz-input-border-custom, #32383e);
    --bs-gray-50: #1e2126;
    --bs-gray-100: #212529;
    --bs-gray-200: #2a2e33;
    --bs-gray-300: #32383e;
    --bs-gray-600: #adb5bd;
    --bs-gray-700: #ced4da;
    --bs-gray-800: #dee2e6;
}

/* ── Theme variables ────────────────────────────────────────────────────
   The creative block sets light-only values that the generic dark block
   doesn't redefine; this selector outranks both. */
[data-bs-theme=dark][data-theme=creative],
[data-bs-theme=dark]:not([data-theme]) {
    --zs-teal-text: #7fb8c9;
    --zs-orange-text: #f0875a;

    /* Brand teal nudged lighter: still >= 4.5:1 under white text on buttons, and >= 3:1 where
       components use it as text or outline on dark surfaces (pills, checked toggles). */
    --vz-success: #457c8c;
    --vz-success-rgb: 69, 124, 140;
    --vz-info: #457c8c;
    --vz-info-rgb: 69, 124, 140;

    --vz-secondary-bg-subtle: rgba(255, 255, 255, 0.06);
    --vz-secondary-border-subtle: #3a4046;
    --vz-secondary-text-emphasis: #ced4da;
    --vz-primary-bg-subtle: rgba(215, 86, 40, 0.18);
    --vz-primary-border-subtle: rgba(215, 86, 40, 0.35);
    --vz-primary-text-emphasis: var(--zs-orange-text);
    --vz-warning-bg-subtle: rgba(215, 86, 40, 0.18);
    --vz-warning-border-subtle: rgba(215, 86, 40, 0.35);
    --vz-warning-text-emphasis: var(--zs-orange-text);
    --vz-danger-bg-subtle: rgba(215, 86, 40, 0.18);
    --vz-danger-border-subtle: rgba(215, 86, 40, 0.35);
    --vz-danger-text-emphasis: var(--zs-orange-text);
    --vz-success-bg-subtle: rgba(64, 110, 125, 0.28);
    --vz-success-border-subtle: rgba(64, 110, 125, 0.5);
    --vz-success-text-emphasis: var(--zs-teal-text);
    --vz-info-bg-subtle: rgba(64, 110, 125, 0.28);
    --vz-info-border-subtle: rgba(64, 110, 125, 0.5);
    --vz-info-text-emphasis: var(--zs-teal-text);
    --vz-dark-text-emphasis: #ced4da;
    --vz-light-text-emphasis: #e9ecef;

    --vz-link-color: var(--zs-orange-text);
    --vz-link-color-rgb: 240, 135, 90;
    --vz-link-hover-color: var(--zs-teal-text);
    --vz-link-hover-color-rgb: 127, 184, 201;

    --vz-timeline-color: #32383e;
    --vz-chat-primary-bg: #2a2d31;
    --vz-chat-secondary-bg: rgba(64, 110, 125, 0.28);
    --vz-chat-secondary-color: #e9ecef;
    --vz-card-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    --vz-element-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --vz-page-title-box-shadow: none;

    /* Sidebar (the light one is the default; in dark mode it becomes a dark panel) */
    --vz-sidebar-user-bg: #262a2f;
    --vz-sidebar-user-name-text: #e9ecef;
    --vz-sidebar-user-name-sub-text: var(--zs-orange-text);
    --vz-twocolumn-menu-iconview-bg: #1a1d21;
}

[data-bs-theme=dark]:not([data-sidebar^=gradient]) {
    --vz-vertical-menu-bg: #1e2126;
    --vz-vertical-menu-border: #2a2f34;
    --vz-vertical-menu-item-color: #c3c8ce;
    --vz-vertical-menu-item-bg: transparent;
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: var(--zs-teal-text, #7fb8c9);
    --vz-vertical-menu-item-active-bg: rgba(64, 110, 125, 0.3);
    --vz-vertical-menu-sub-item-color: #9aa1a9;
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: var(--zs-teal-text, #7fb8c9);
    --vz-vertical-menu-title-color: #6c737c;
    --vz-vertical-menu-box-shadow: 0 0 0 1px #2a2f34;
    --vz-vertical-menu-dropdown-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* Brand line-art behind the menu: invert the white JPG, keep the orange strokes. */
[data-bs-theme=dark] .app-menu .sidebar-background {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
    opacity: 0.22;
}

/* Wordmarks drawn in dark teal vanish on dark panels; show the light variant. */
[data-bs-theme=dark] .app-menu .logo-dark,
[data-bs-theme=dark] #page-topbar .logo-dark {
    display: none !important;
}
[data-bs-theme=dark] .app-menu .logo-light,
[data-bs-theme=dark] #page-topbar .logo-light {
    display: inline-block !important;
}

/* ── Bootstrap utilities hard-wired to white/black ─────────────────────── */
[data-bs-theme=dark] .bg-white {
    background-color: var(--vz-secondary-bg) !important;
}
[data-bs-theme=dark] .bg-secondary {
    background-color: #3a4047 !important;
}
[data-bs-theme=dark] .border-white {
    border-color: var(--vz-border-color) !important;
}
/* Dark text stays dark only where it sits on a light brand fill. */
[data-bs-theme=dark] :is(.text-dark, .text-black, .link-dark):not(:is(.bg-warning, .bg-info, .bg-success, .bg-primary, .bg-danger, .btn-warning, .btn-info, .text-bg-warning, .text-bg-info)) {
    color: #e9ecef !important;
}
[data-bs-theme=dark] .text-black-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Brand colours as text: #406E7D / #d75628 are too dark to read on dark surfaces ── */
[data-bs-theme=dark] :is(.text-success, .text-info, .link-success, .link-info) {
    color: var(--zs-teal-text) !important;
}
[data-bs-theme=dark] :is(.text-primary, .text-warning, .text-danger, .link-primary, .link-warning, .link-danger) {
    color: var(--zs-orange-text) !important;
}
[data-bs-theme=dark] :is(.btn-soft-success, .btn-soft-info, .btn-outline-success, .btn-outline-info, .btn-ghost-success, .btn-ghost-info, .btn-link.text-success) {
    --vz-btn-color: var(--zs-teal-text);
}
[data-bs-theme=dark] :is(.btn-soft-primary, .btn-soft-warning, .btn-soft-danger, .btn-outline-primary, .btn-outline-warning, .btn-outline-danger, .btn-ghost-primary, .btn-ghost-warning, .btn-ghost-danger, .btn-link) {
    --vz-btn-color: var(--zs-orange-text);
}
[data-bs-theme=dark] .btn-soft-secondary {
    --vz-btn-color: #ced4da;
    --vz-btn-bg: rgba(255, 255, 255, 0.08);
}
/* ── The creative theme hard-codes light colours with !important; outrank them in dark ── */
[data-bs-theme=dark][data-theme=creative] .btn-secondary:not(:hover) {
    background-color: #3a4047 !important;
    border-color: #3a4047 !important;
    color: #e9ecef !important;
}
[data-bs-theme=dark][data-theme=creative] .text-secondary {
    color: #adb5bd !important;
}
[data-bs-theme=dark][data-theme=creative] :is(.card-neutral, .sidebar-card) {
    background-color: #262a2f !important;
    border-color: #32383e;
    color: var(--zs-orange-text) !important;
}
[data-bs-theme=dark][data-theme=creative] .card-neutral :is(h1, h2, h3, h4, h5, h6) {
    color: var(--zs-orange-text) !important;
}
[data-bs-theme=dark][data-theme=creative] :is(.icon-active, .icon-clicked, .nav-link:hover i, .menu-icon:hover, .btn-icon:hover, .active .icon-default) {
    color: var(--zs-teal-text) !important;
}

/* ── Third-party widgets with light-only styles ─────────────────────── */

/* Jalali date picker (global) */
[data-bs-theme=dark] jdp-container {
    background: #262a2f;
    color: #ced4da;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] jdp-container :is(select, input) {
    background: #2f3439 !important;
    color: #e9ecef !important;
    border-color: #3a4046 !important;
}
[data-bs-theme=dark] jdp-container .jdp-day-name {
    background-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme=dark] jdp-container .jdp-day:not(.disabled-day):hover {
    background: rgba(255, 255, 255, 0.1);
}
[data-bs-theme=dark] jdp-container :is(.jdp-day, .jdp-day-name).today {
    border-color: rgba(255, 255, 255, 0.35);
}
[data-bs-theme=dark] jdp-container .jdp-day.disabled-day {
    color: #5c636a;
}

/* Choices.js (global; its stylesheet loads after the theme's, so its light defaults win) */
[data-bs-theme=dark] :is(.choices__inner, .choices__input, .choices__list--dropdown, .choices__list[aria-expanded]) {
    background-color: var(--vz-input-bg-custom, #262a2f);
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-bs-theme=dark] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: #2f3439;
}
[data-bs-theme=dark] .choices.is-disabled .choices__inner,
[data-bs-theme=dark] .choices.is-disabled .choices__input {
    background-color: var(--vz-tertiary-bg);
}
[data-bs-theme=dark] .choices[data-type*=select-one]::after {
    border-color: #adb5bd transparent transparent;
}
[data-bs-theme=dark] .choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent #adb5bd;
}

/* Select2 */
[data-bs-theme=dark] .select2-container--default :is(.select2-selection--single, .select2-selection--multiple),
[data-bs-theme=dark] .select2-dropdown {
    background-color: var(--vz-input-bg-custom, #262a2f);
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #1a1d21;
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .select2-container--default .select2-results__option[aria-selected=true],
[data-bs-theme=dark] .select2-container--default .select2-results__option--selected {
    background-color: #2f3439;
}
[data-bs-theme=dark] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #2f3439;
    border-color: #3a4046;
    color: var(--vz-body-color);
}

/* Tom Select */
[data-bs-theme=dark] :is(.ts-control, .ts-wrapper.single.input-active .ts-control, .ts-dropdown) {
    background: var(--vz-input-bg-custom, #262a2f);
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .ts-control input {
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .ts-dropdown .active {
    background-color: #2f3439;
    color: #fff;
}
[data-bs-theme=dark] .ts-wrapper.multi .ts-control > div {
    background: #2f3439;
    color: var(--vz-body-color);
}

/* FilePond */
[data-bs-theme=dark] .filepond--panel-root {
    background-color: #2a2d31;
}
[data-bs-theme=dark] .filepond--drop-label {
    color: var(--vz-body-color);
}

/* Tagify */
[data-bs-theme=dark] .tagify {
    --tags-border-color: var(--vz-border-color);
    --tag-bg: #2f3439;
    --tag-text-color: #e9ecef;
    --input-color: var(--vz-body-color);
    background: var(--vz-input-bg-custom, #262a2f);
}
[data-bs-theme=dark] .tagify__dropdown__wrapper {
    background: #262a2f;
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}

/* CKEditor 5 */
[data-bs-theme=dark] .ck.ck-editor {
    --ck-color-base-background: #262a2f;
    --ck-color-base-foreground: #2a2d31;
    --ck-color-base-border: #3a4046;
    --ck-color-text: #e9ecef;
    --ck-color-toolbar-background: #2a2d31;
    --ck-color-toolbar-border: #3a4046;
    --ck-color-button-default-hover-background: #343a40;
    --ck-color-button-on-background: #343a40;
    --ck-color-button-on-hover-background: #3a4047;
    --ck-color-dropdown-panel-background: #262a2f;
    --ck-color-dropdown-panel-border: #3a4046;
    --ck-color-list-background: #262a2f;
    --ck-color-list-button-hover-background: #343a40;
    --ck-color-input-background: #1a1d21;
    --ck-color-input-border: #3a4046;
    --ck-color-panel-background: #262a2f;
    --ck-color-panel-border: #3a4046;
    --ck-color-labeled-field-label-background: #262a2f;
}

/* Quill */
[data-bs-theme=dark] :is(.ql-toolbar.ql-snow, .ql-container.ql-snow) {
    border-color: var(--vz-border-color);
}
[data-bs-theme=dark] .ql-snow :is(.ql-stroke, .ql-stroke-miter) {
    stroke: #ced4da;
}
[data-bs-theme=dark] .ql-snow :is(.ql-fill, .ql-stroke.ql-fill) {
    fill: #ced4da;
}
[data-bs-theme=dark] .ql-snow .ql-picker {
    color: #ced4da;
}
[data-bs-theme=dark] .ql-snow .ql-picker-options {
    background-color: #262a2f;
}

/* jsTree */
[data-bs-theme=dark] .jstree-default :is(.jstree-hovered, .jstree-wholerow-hovered) {
    background: #2f3439;
    box-shadow: none;
}
[data-bs-theme=dark] .jstree-default :is(.jstree-clicked, .jstree-wholerow-clicked) {
    background: rgba(64, 110, 125, 0.35);
    box-shadow: none;
}
[data-bs-theme=dark] .jstree-default .jstree-anchor {
    color: var(--vz-body-color);
}

/* SweetAlert2 */
[data-bs-theme=dark] .swal2-popup {
    background: #262a2f;
    color: var(--vz-body-color);
}
[data-bs-theme=dark] :is(.swal2-title, .swal2-html-container) {
    color: #e9ecef;
}
[data-bs-theme=dark] .swal2-input,
[data-bs-theme=dark] .swal2-textarea {
    background: #1a1d21;
    color: var(--vz-body-color);
    border-color: var(--vz-border-color);
}

/* FullCalendar */
[data-bs-theme=dark] .fc {
    --fc-page-bg-color: var(--vz-secondary-bg);
    --fc-neutral-bg-color: #2a2d31;
    --fc-list-event-hover-bg-color: #2f3439;
    --fc-border-color: var(--vz-border-color);
    --fc-today-bg-color: rgba(64, 110, 125, 0.18);
}

/* dhtmlx Gantt */
[data-bs-theme=dark] :is(.gantt_container, .gantt_grid, .gantt_task, .gantt_grid_scale, .gantt_task_scale, .gantt_grid_data, .gantt_data_area) {
    background-color: var(--vz-secondary-bg);
    color: var(--vz-body-color);
    border-color: var(--vz-border-color);
}
[data-bs-theme=dark] :is(.gantt_grid_head_cell, .gantt_scale_cell, .gantt_tree_content, .gantt_task_scale .gantt_scale_cell) {
    color: #adb5bd;
    border-color: var(--vz-border-color);
}
[data-bs-theme=dark] :is(.gantt_row, .gantt_task_row, .gantt_task_cell, .gantt_cell) {
    border-color: var(--vz-border-color);
}
[data-bs-theme=dark] :is(.gantt_row.odd, .gantt_task_row.odd) {
    background-color: rgba(255, 255, 255, 0.02);
}
[data-bs-theme=dark] :is(.gantt_row.gantt_selected, .gantt_task_row.gantt_selected, .gantt_row:hover) {
    background-color: rgba(64, 110, 125, 0.22);
}

/* multi.js */
[data-bs-theme=dark] .multi-wrapper,
[data-bs-theme=dark] .multi-wrapper :is(.non-selected-wrapper, .selected-wrapper, .search-input) {
    background: #262a2f;
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
[data-bs-theme=dark] .multi-wrapper .item:hover {
    background: #2f3439;
}

/* Toastify / legacy toastr keep their coloured fills; only the neutral one needs a surface. */
[data-bs-theme=dark] .toast:not([class*=bg-]) {
    background-color: #262a2f;
}

/* Printing from dark mode: paper is white, so print the light palette
   (light-dark() follows color-scheme, the theme variables are reset here). */
@media print {
    [data-bs-theme=dark] {
        color-scheme: light;
        --vz-body-bg: #fff;
        --vz-body-color: #212529;
        --vz-emphasis-color: #212529;
        --vz-secondary-bg: #fff;
        --vz-tertiary-bg: #eff2f7;
        --vz-border-color: #e9ebec;
        --vz-heading-color: #212529;
    }
}

/* Native form controls and scrollbars follow color-scheme; keep autofill readable. */
[data-bs-theme=dark] input:-webkit-autofill {
    -webkit-text-fill-color: #e9ecef;
    box-shadow: 0 0 0 1000px #262a2f inset;
}