/* ──────────────────────────────────────────────────────────────────────────
   Appearance tokens. Every custom stylesheet reads these instead of hardcoding
   light colours, so dark mode is a matter of re-pointing them.

   The attribute lives on <html> (set server-side in _Layout from the
   .SafiTech.Theme cookie, which mirrors User.PreferredTheme).

   Brand colours (primary, danger, success, warning) deliberately stay the same
   in both themes - they come from Branding and must not drift.
   ────────────────────────────────────────────────────────────────────────── */

/* Align empty hints with the interface language without changing entered values. */
html[dir="rtl"] input[placeholder]:placeholder-shown,
html[dir="rtl"] textarea[placeholder]:placeholder-shown {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .select2-selection--single .select2-selection__placeholder {
    display: block;
    text-align: right;
    direction: rtl;
}

:root {
    --safi-surface: #ffffff;          /* cards, modals, inputs */
    --safi-surface-rgb: 255, 255, 255;  /* base for translucent panels */
    --safi-surface-2: #f8fbff;        /* subtle fills, striped rows, read-only fields */
    --safi-surface-3: #eef6ff;        /* hover / selected fills */
    --safi-surface-sunken: #eef2f7;   /* page background behind cards */
    --safi-border: #e4e6ef;           /* default borders and dividers */
    --safi-border-strong: #ced9e8;    /* input borders */
    --safi-text: #181c32;             /* headings and primary text */
    --safi-text-body: #3f4254;        /* body copy */
    --safi-text-muted: #8294ad;       /* captions, placeholders, helper text */
    --safi-highlight: #fffde7;      /* row called out for attention */
    --safi-shadow: rgba(25, 69, 109, .06);
    --safi-shadow-strong: rgba(20, 65, 104, .18);
}

[data-theme="dark"] {
    --safi-surface: #1e1e2d;
    --safi-surface-rgb: 30, 30, 45;
    --safi-surface-2: #1b1b29;
    --safi-surface-3: #2b2b40;
    --safi-surface-sunken: #151521;
    --safi-border: #2b2b40;
    --safi-border-strong: #323248;
    --safi-text: #f2f2f7;
    --safi-text-body: #cdcdde;
    --safi-text-muted: #92929f;
    --safi-highlight: rgba(255, 214, 0, .12);
    --safi-shadow: rgba(0, 0, 0, .35);
    --safi-shadow-strong: rgba(0, 0, 0, .55);

    /* Re-point the theme's own scale so Keen components follow without a second bundle
       (the vendor ships style.dark.bundle.rtl.css only - there is no LTR dark build). */
    --bs-body-bg: #151521;
    --bs-body-color: #cdcdde;
    --bs-border-color: #2b2b40;
    --bs-light: #1b1b29;
    --bs-light-rgb: 27, 27, 41;
    --bs-dark: #f2f2f7;
    --bs-gray-100: #1b1b29;
    --bs-gray-200: #2b2b40;
    --bs-gray-300: #323248;
    --bs-gray-400: #474761;
    --bs-gray-500: #565674;
    --bs-gray-600: #6d6d80;
    --bs-gray-700: #92929f;
    --bs-gray-800: #cdcdde;
    --bs-gray-900: #ffffff;
    --bs-light-primary: rgba(var(--bs-primary-rgb), .16);
    color-scheme: dark;
}

/* ─── Theme shell ─────────────────────────────────────────────────────────── */
[data-theme="dark"] body {
    background-color: var(--safi-surface-sunken);
    color: var(--safi-text-body);
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu-sub-dropdown,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .popover,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-body {
    background-color: var(--safi-surface) !important;
    border-color: var(--safi-border);
    color: var(--safi-text-body);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-light-primary {
    background-color: var(--safi-surface-2) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
    color: var(--safi-text) !important;
}

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

/* Shared image viewing for avatars, branding, and newly selected upload files. */
.safi-image-view.btn.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-height:36px; padding:0; border-radius:8px; }
.safi-image-view[hidden] { display:none !important; }
.safi-image-view iconify-icon { font-size:19px; color:inherit; }
.safi-image-actions { display:flex; justify-content:center; align-items:center; gap:6px; margin:0 auto 14px; }
.safi-image-actions > .btn.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-height:36px; margin:0; padding:0; border-radius:8px; }
.safi-image-actions iconify-icon { color:inherit; font-size:19px; }
.safi-brand-drop > .safi-image-view { position:absolute; top:10px; inset-inline-end:10px; z-index:2; }
.safi-image-upload-preview { position:relative; }
.safi-image-upload-preview > .safi-image-view { position:absolute; z-index:6; top:6px; inset-inline-start:6px; width:30px; height:30px; min-height:30px; border:1px solid rgba(var(--bs-primary-rgb),.2); background:var(--safi-surface); color:var(--bs-primary); }
.safi-image-preview-modal .modal-content { overflow:hidden; border:1px solid rgba(var(--bs-primary-rgb),.18); border-radius:14px; background:var(--safi-surface); }
.safi-image-preview-modal .modal-header { gap:16px; padding:14px 18px; border-bottom:1px solid var(--safi-border); background:rgba(var(--bs-primary-rgb),.05); }
.safi-image-preview-modal .modal-title { min-width:0; margin:0; color:var(--safi-text); font-size:15px; overflow-wrap:anywhere; }
.safi-image-preview-modal .modal-header .btn { flex-shrink:0; width:34px; height:34px; }
.safi-image-preview-modal .modal-header iconify-icon { font-size:21px; color:inherit; }
.safi-image-preview-modal .modal-body { display:flex; align-items:center; justify-content:center; min-height:55vh; padding:16px; background:var(--safi-surface-2); }
.safi-image-preview-modal img { display:block; max-width:100%; max-height:75vh; object-fit:contain; border-radius:8px; }
.safi-image-preview-modal [hidden] { display:none !important; }
.safi-image-preview-modal [data-image-error] { color:var(--safi-text-muted); }

/* Shared Select2 clear action; retain the widget's existing clear behaviour. */
.select2-container .select2-selection--single { position: relative; }
.select2-container .select2-selection--single:has(.select2-selection__clear) { background-image: none !important; }
.select2-container .select2-selection--single:has(.select2-selection__clear) .select2-selection__rendered { padding-inline-end: 34px !important; }
.select2-container .select2-selection--single:has(.select2-selection__clear) .select2-selection__arrow { display: none !important; }
.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: 6px !important;
    transform: translateY(-50%);
    margin: 0 !important;
    box-sizing: border-box;
    width: 22px !important;
    height: 22px !important;
    padding: 5px !important;
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), .07) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), .18) !important;
    border-radius: 6px;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.select2-container .select2-selection--single .select2-selection__clear > span { display: none; }
.select2-container .select2-selection--single .select2-selection__clear::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    background: currentColor;
    clip-path: polygon(12% 0, 50% 38%, 88% 0, 100% 12%, 62% 50%, 100% 88%, 88% 100%, 50% 62%, 12% 100%, 0 88%, 38% 50%, 0 12%);
}
.select2-container .select2-selection--single .select2-selection__clear:hover {
    background: rgba(var(--bs-primary-rgb), .15) !important;
    border-color: var(--bs-primary) !important;
}
.select2-container .select2-selection--single .select2-selection__clear:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .select2-container .select2-selection--single .select2-selection__clear { transition: none; }
}

/* ─── Form controls ───────────────────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] .select2-container--default .select2-selection {
    background-color: var(--safi-surface-2) !important;
    border-color: var(--safi-border-strong) !important;
    color: var(--safi-text) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--safi-text-muted);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--safi-surface-3) !important;
    color: var(--safi-text-muted) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--safi-surface) !important;
    color: var(--safi-text-body);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
    background-color: var(--safi-surface-3) !important;
    color: var(--safi-text) !important;
}

/* ─── Tables ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--safi-text-body);
    --bs-table-striped-bg: var(--safi-surface-2);
    --bs-table-striped-color: var(--safi-text-body);
    --bs-table-hover-bg: var(--safi-surface-3);
    --bs-table-hover-color: var(--safi-text);
    --bs-table-border-color: var(--safi-border);
    color: var(--safi-text-body);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light > * {
    background-color: var(--safi-surface-2) !important;
    color: var(--safi-text-muted) !important;
    border-color: var(--safi-border) !important;
}

/* ─── Date picker / dialogs ───────────────────────────────────────────────── */
[data-theme="dark"] .flatpickr-calendar,
[data-theme="dark"] .swal2-popup {
    background: var(--safi-surface) !important;
    color: var(--safi-text-body) !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--safi-text-body);
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--safi-text-muted);
}

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

/* ─── Header toggle button ────────────────────────────────────────────────── */
.header-theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--safi-border);
    border-radius: 10px;
    background: var(--safi-surface);
    color: var(--safi-text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.header-theme-button:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Printing and PDF capture always use the light palette - a dark background
   would waste toner and the PDF renderer does not carry the attribute anyway. */
@media print {
    :root,
    [data-theme="dark"] {
        --safi-surface: #ffffff;
        --safi-surface-2: #ffffff;
        --safi-surface-3: #ffffff;
        --safi-surface-sunken: #ffffff;
        --safi-border: #e4e6ef;
        --safi-border-strong: #ced9e8;
        --safi-text: #181c32;
        --safi-text-body: #3f4254;
        --safi-text-muted: #7e8299;
    }
}

/* ─── Settings / split modal info panel ───────────────────────────────────────
   Its background is a shorthand with a light artwork, so it cannot follow a token.
   In dark the artwork is dropped and the panel falls back to a flat surface. */
[data-theme="dark"] .safi-sm-info {
    background: var(--safi-surface-2);
    border-inline-start: 1px solid var(--safi-border);
}

[data-theme="dark"] .safi-sm-tips {
    background: rgba(255, 255, 255, .04);
    border-color: var(--safi-border);
    box-shadow: none;
}

[data-theme="dark"] .safi-sm-info-icon {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .safi-sm-info-art,
[data-theme="dark"] .safi-sm-info-icon img {
    filter: brightness(.92);
}

[data-theme="dark"] .safi-sm-bottom-quote {
    color: var(--safi-text-muted);
}

/* ─── App shell ───────────────────────────────────────────────────────────────
   The page background comes from several stacked wrappers depending on the
   screen (body > flex-root > wrapper > content > container). Any one of them
   left light shows up as a white band behind the cards, so they are all pinned
   to the sunken surface. */
html[data-theme="dark"],
[data-theme="dark"] body,
[data-theme="dark"] .flex-root,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content,
[data-theme="dark"] .post,
[data-theme="dark"] #kt_body,
[data-theme="dark"] #kt_wrapper,
[data-theme="dark"] #kt_content,
[data-theme="dark"] #kt_content_container,
[data-theme="dark"] #kt_post,
[data-theme="dark"] .page,
[data-theme="dark"] .footer,
[data-theme="dark"] #kt_footer,
[data-theme="dark"] .container-xxl,
[data-theme="dark"] .container-fluid {
    background-color: var(--safi-surface-sunken) !important;
}

/* The header is its own floating bar, so it must not inherit the sunken fill. */
[data-theme="dark"] #kt_header .container-fluid,
[data-theme="dark"] #kt_header .container-xxl {
    background-color: transparent !important;
}

/* Header and sidebar sit above the page, so they use the raised surface. */
[data-theme="dark"] .header,
[data-theme="dark"] #kt_header,
[data-theme="dark"] .aside,
[data-theme="dark"] #kt_aside,
[data-theme="dark"] .app-sidebar,
[data-theme="dark"] .toolbar {
    background-color: var(--safi-surface) !important;
    border-color: var(--safi-border) !important;
}

[data-theme="dark"] .menu-link {
    color: var(--safi-text-body);
}

[data-theme="dark"] .menu-link:hover,
[data-theme="dark"] .menu-item.here > .menu-link,
[data-theme="dark"] .menu-link.active {
    background-color: var(--safi-surface-3);
    color: var(--safi-text);
}

[data-theme="dark"] .separator,
[data-theme="dark"] hr {
    border-color: var(--safi-border);
}