/* ==========================================================================
   Appearance layer — theme, font family and font size.

   Design notes
   ------------
   * The root font-size is deliberately never touched. The vendor bundles
     express 1272 spacing values in `rem`, so moving the rem basis would
     reflow the entire layout. Text scaling is handled by
     `app-font-scale.css`, which restates each font-size as a multiple of
     `--app-font-scale`.
   * Dark mode is an additive override layer keyed on `html[data-theme]`.
     The orphaned `.dark` class already present in the vendor CSS is NOT
     reused, to avoid colliding with dead theme scaffolding.
   * Everything below is scoped so that printed documents and exported
     reports are untouched — see the `@media print` block at the end.
   ========================================================================== */

:root {
    --app-font-scale: 1;
    --app-font-stack: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Font family
   The vendor theme hardcodes `font-family: "Lato", sans-serif` on html, body
   and a number of components, so the chosen stack is applied to the shell and
   then inherited. Icon fonts are explicitly exempted further down, otherwise
   glyphs would turn into letters.
   -------------------------------------------------------------------------- */
html,
body,
.iq-sidebar,
.iq-top-navbar,
.content-page,
.iq-footer,
.card,
.modal,
.modal-content,
.dropdown-menu,
.table,
.btn,
.form-control,
.custom-select,
input,
select,
textarea,
button,
label,
h1, h2, h3, h4, h5, h6,
.nav-link,
.swal2-popup,
.select2-container,
.e-control,
.e-grid,
.e-dialog,
.e-popup,
.e-btn {
    font-family: var(--app-font-stack);
}

/* Icon fonts must keep their own family or the glyphs break. */
.las, .lab, .lar, .la,
[class^="la-"], [class*=" la-"],
.fa, .fas, .far, .fab,
[class^="fa-"], [class*=" fa-"],
.ri, [class^="ri-"], [class*=" ri-"],
.e-icons, .e-icon,
[class^="e-"]::before, [class*=" e-"]::before,
.material-icons {
    font-family: inherit;
}

.las, .lab, .lar, .la,
[class^="la-"], [class*=" la-"] {
    font-family: "Line Awesome Free", "Line Awesome Brands", sans-serif !important;
}

.e-icons, .e-icon {
    font-family: "e-icons" !important;
}

/* ==========================================================================
   DARK THEME
   Tokens first, then the surfaces that need repainting. Kept additive so the
   light theme is exactly what it is today when data-theme is not "dark".
   ========================================================================== */

@media screen {
    html[data-theme="dark"] {
        --app-bg: #0f1623;
        --app-surface: #18202f;
        --app-surface-2: #1f2838;
        --app-surface-3: #27324a;
        --app-border: #2c3850;
        --app-text: #dce3f0;
        --app-text-muted: #94a3bb;
        --app-text-strong: #f1f5fb;
        --app-primary: #6366f1;
        --app-primary-soft: rgba(99, 102, 241, .18);
        --app-shadow: 0 2px 14px rgba(0, 0, 0, .45);

        /* ------------------------------------------------------------------
           Text colour tokens for the project's own stylesheets.

           syncfusion-pos.css, pos-multi.css and ui-modern.css used to set
           `color` with hardcoded light-theme values, which stayed dark after
           the dark layer repainted the surfaces beneath them — 60 unreadable
           declarations. They now read `var(--sf-ink-*, #ORIGINAL)`, so the
           light theme is unchanged by construction (the fallback IS the
           original) and dark mode only has to redefine the tokens below.

           Every value is picked for >= 4.5:1 against --app-surface (#18202f),
           while keeping each colour's original hue so the product's visual
           identity survives: danger stays red, success stays green, the
           indigo accent stays indigo. They are simply lightened to the
           tints a dark surface needs.
           ------------------------------------------------------------------ */

        /* Neutral ink ramp, darkest-to-lightest in the light theme, inverted
           here so the hierarchy reads the same way. */
        --sf-ink-strongest: #f1f5fb;
        --sf-ink-strong: #e6ecf7;
        --sf-ink: #d3dcea;
        --sf-ink-alt: #ccd6e6;
        --sf-ink-soft: #b7c2d6;
        --sf-ink-muted: #94a3bb;

        /* Indigo accent ramp. */
        --sf-ink-accent-deepest: #c7cdff;
        --sf-ink-accent-deep: #b3bcff;
        --sf-ink-accent-strong: #a8b2ff;
        --sf-ink-accent: #9aa5ff;

        /* Status hues, lightened but unmistakably the same colours. */
        --sf-ink-danger: #ff8f8f;
        --sf-ink-danger-bright: #ff9b9b;
        --sf-ink-danger-soft: #ffa5a5;

        --sf-ink-success: #6ee7a0;
        --sf-ink-success-alt: #5fe0a4;
        --sf-ink-teal: #5fdcd0;

        --sf-ink-warning: #fcc46b;
        --sf-ink-warning-deep: #f7b955;
        --sf-ink-info: #7cc8f5;

        /* ------------------------------------------------------------------
           Surfaces and tints, tokenised the same way.

           A soft badge is a PAIR — pale tint plus saturated ink. Retinting
           only the ink would leave light-on-light, which is exactly how the
           "#f1f5fb on #ffeae2" failure happened. Each tint below is the dark
           counterpart of its light original, keeping the same hue so a
           warning badge still reads as amber and a danger badge as red.
           ------------------------------------------------------------------ */
        --sf-surface: var(--app-surface);
        --sf-surface-alt: #1c2434;
        --sf-surface-sunken: var(--app-surface-2);
        --sf-surface-sunken-2: var(--app-surface-3);
        --sf-surface-disabled: #222c3e;
        --sf-scrollbar-thumb: #3a4866;

        --sf-tint-accent: rgba(99, 102, 241, .16);
        --sf-tint-accent-soft: rgba(99, 102, 241, .11);
        --sf-tint-accent-softest: rgba(99, 102, 241, .08);
        --sf-tint-accent-strong: rgba(99, 102, 241, .26);

        --sf-tint-danger: rgba(239, 68, 68, .14);
        --sf-tint-danger-strong: rgba(239, 68, 68, .24);
        --sf-tint-success: rgba(34, 197, 94, .14);
        --sf-tint-success-alt: rgba(34, 197, 94, .18);
        --sf-tint-warning: rgba(245, 158, 11, .15);
        --sf-tint-info: rgba(56, 189, 248, .14);

        /* ------------------------------------------------------------------
           The grid's own pre-existing token set (declared in
           syncfusion-pos.css :root). Redefining these here retints every
           rule that already consumed them — rows, headers, borders and
           selection — without repeating a single selector.
           ------------------------------------------------------------------ */
        --sf-border: var(--app-border);
        --sf-head-bg: var(--app-surface-2);
        --sf-head-fg: var(--app-text-muted);
        --sf-cell-fg: var(--app-text);
        --sf-row-bg: var(--app-surface);
        --sf-altrow-bg: #1c2434;
        --sf-row-hover: var(--app-surface-2);
        --sf-accent: #9aa5ff;
        --sf-accent-soft: rgba(99, 102, 241, .16);

        /* ------------------------------------------------------------------
           Order notes (custom.css). Same pairing rule as the badges: the
           indigo ink is lightened and the surface darkened together, so an
           item note still reads as an indigo aside and the invoice note as
           a quiet panel.
           ------------------------------------------------------------------ */
        --note-accent: #6366f1;
        --note-fg: #b3bcff;
        --note-border: #39455e;
        --note-bg: var(--app-surface-2);

        color-scheme: dark;
    }

    html[data-theme="dark"] body {
        background: var(--app-bg);
        color: var(--app-text);
    }

    /* --- App shell ----------------------------------------------------------- */
    html[data-theme="dark"] .iq-sidebar,
    html[data-theme="dark"] .iq-sidebar .iq-sidebar-logo,
    html[data-theme="dark"] .iq-top-navbar,
    html[data-theme="dark"] .iq-footer {
        background: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text);
    }

    html[data-theme="dark"] .content-page {
        background: var(--app-bg);
    }

    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li a,
    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li a i,
    html[data-theme="dark"] .iq-top-navbar .navbar-list li > a,
    html[data-theme="dark"] .iq-footer,
    html[data-theme="dark"] .iq-footer a {
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li a:hover,
    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li.active > a,
    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li a:hover i,
    html[data-theme="dark"] .iq-sidebar-menu .iq-menu li.active > a i {
        color: var(--app-text-strong) !important;
        background-color: var(--app-primary-soft);
    }

    html[data-theme="dark"] .iq-sidebar-menu .iq-menu .iq-menu-title {
        color: var(--app-text-muted) !important;
    }

    /* --- Cards, panels, modals, dropdowns ------------------------------------ */
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .iq-card,
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .iq-sub-dropdown,
    html[data-theme="dark"] .popover,
    html[data-theme="dark"] .list-group-item,
    html[data-theme="dark"] .toast {
        background-color: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text);
        box-shadow: var(--app-shadow);
    }

    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .card-footer,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-footer {
        background-color: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text);
    }

    /* The theme sprinkles bg-white / bg-light on headers and strips. */
    html[data-theme="dark"] .bg-white,
    html[data-theme="dark"] .bg-light {
        background-color: var(--app-surface) !important;
        color: var(--app-text);
    }

    html[data-theme="dark"] .dropdown-item {
        color: var(--app-text);
    }

    html[data-theme="dark"] .dropdown-item:hover,
    html[data-theme="dark"] .dropdown-item:focus,
    html[data-theme="dark"] .iq-sub-card:hover {
        background-color: var(--app-surface-3) !important;
        color: var(--app-text-strong);
    }

    html[data-theme="dark"] .dropdown-divider,
    html[data-theme="dark"] hr {
        border-color: var(--app-border);
    }

    /* --- Typography ---------------------------------------------------------- */
    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,
    html[data-theme="dark"] .card-title,
    html[data-theme="dark"] .text-dark,
    html[data-theme="dark"] .text-body {
        color: var(--app-text-strong) !important;
    }

    /*
     * `strong` and `b` are deliberately NOT recoloured.
     *
     * They are emphasis, not a colour role, and they appear inside coloured
     * containers (alerts, badges, status pills) that keep their own light
     * tint. Forcing them light produced light-on-light text — a real bug
     * caught by the contrast audit. Inheriting is both correct and safer:
     * bold text now follows whatever surface it sits on.
     */

    html[data-theme="dark"] .text-muted,
    html[data-theme="dark"] .text-secondary,
    html[data-theme="dark"] small {
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] a:not(.btn):not(.iq-sub-card):not(.nav-link) {
        color: #93a4ff;
    }

    /* --- Tables -------------------------------------------------------------- */
    html[data-theme="dark"] .table,
    html[data-theme="dark"] .table th,
    html[data-theme="dark"] .table td {
        color: var(--app-text);
        border-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .table thead th {
        background-color: var(--app-surface-2) !important;
        color: var(--app-text-strong);
    }

    html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
    html[data-theme="dark"] .table-hover tbody tr:hover {
        background-color: var(--app-surface-2) !important;
        color: var(--app-text);
    }

    /* --- Forms --------------------------------------------------------------- */
    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] .custom-select,
    html[data-theme="dark"] .custom-file-label,
    html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
    html[data-theme="dark"] select,
    html[data-theme="dark"] textarea {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .form-control:focus,
    html[data-theme="dark"] select:focus,
    html[data-theme="dark"] textarea:focus {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-primary) !important;
        color: var(--app-text-strong) !important;
        box-shadow: 0 0 0 .18rem var(--app-primary-soft) !important;
    }

    html[data-theme="dark"] .form-control::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--app-text-muted) !important;
        opacity: 1;
    }

    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-control[readonly] {
        background-color: #141b28 !important;
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] .input-group-text {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] label,
    html[data-theme="dark"] .form-label,
    html[data-theme="dark"] .col-form-label {
        color: var(--app-text);
    }

    /* --- Buttons ------------------------------------------------------------- */
    html[data-theme="dark"] .btn-light,
    html[data-theme="dark"] .btn-outline-secondary {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .btn-light:hover,
    html[data-theme="dark"] .btn-outline-secondary:hover {
        background-color: var(--app-border) !important;
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .btn.border,
    html[data-theme="dark"] .border {
        border-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .close {
        color: var(--app-text) !important;
        text-shadow: none;
        opacity: .85;
    }

    /* --- Alerts / badges keep their hue but need legible surfaces ------------- */
    /*
     * Alerts keep the vendor's pale tint and its matching dark text, which is
     * already a legible pair. Only the neutral variants need help; the
     * coloured ones are left entirely alone so the status hue is preserved.
     *
     * The explicit `color: inherit` reset on descendants stops the generic
     * heading/muted rules above from lightening text that sits on a pale
     * alert background.
     */
    html[data-theme="dark"] .alert-secondary,
    html[data-theme="dark"] .alert-light {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .alert-primary *,
    html[data-theme="dark"] .alert-success *,
    html[data-theme="dark"] .alert-danger *,
    html[data-theme="dark"] .alert-warning *,
    html[data-theme="dark"] .alert-info * {
        color: inherit !important;
    }

    html[data-theme="dark"] .breadcrumb,
    html[data-theme="dark"] .page-link,
    html[data-theme="dark"] .nav-tabs .nav-link {
        background-color: transparent;
        color: var(--app-text);
    }

    html[data-theme="dark"] .page-link {
        background-color: var(--app-surface-2);
        border-color: var(--app-border);
    }

    html[data-theme="dark"] .nav-tabs {
        border-color: var(--app-border);
    }

    html[data-theme="dark"] .nav-tabs .nav-link.active {
        background-color: var(--app-surface) !important;
        border-color: var(--app-border) var(--app-border) var(--app-surface) !important;
        color: var(--app-text-strong) !important;
    }

    /* --- Syncfusion (grids, dialogs, pickers) -------------------------------- */
    html[data-theme="dark"] .e-grid,
    html[data-theme="dark"] .e-grid .e-gridheader,
    html[data-theme="dark"] .e-grid .e-gridcontent,
    html[data-theme="dark"] .e-grid .e-table,
    html[data-theme="dark"] .e-grid .e-row .e-rowcell,
    html[data-theme="dark"] .e-grid .e-headercell,
    html[data-theme="dark"] .e-grid .e-detailheadercell,
    html[data-theme="dark"] .e-grid .e-gridpager,
    html[data-theme="dark"] .e-toolbar,
    html[data-theme="dark"] .e-toolbar .e-toolbar-items,
    html[data-theme="dark"] .e-dialog,
    html[data-theme="dark"] .e-dlg-content,
    html[data-theme="dark"] .e-dlg-header-content,
    html[data-theme="dark"] .e-popup,
    html[data-theme="dark"] .e-popup-open,
    html[data-theme="dark"] .e-ddl.e-popup,
    html[data-theme="dark"] .e-calendar,
    html[data-theme="dark"] .e-daterangepicker {
        background-color: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .e-grid .e-headercell,
    html[data-theme="dark"] .e-grid .e-headercelldiv,
    html[data-theme="dark"] .e-grid .e-headertext {
        background-color: var(--app-surface-2) !important;
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .e-grid .e-row:hover .e-rowcell,
    html[data-theme="dark"] .e-grid .e-altrow .e-rowcell {
        background-color: var(--app-surface-2) !important;
    }

    html[data-theme="dark"] .e-grid .e-row.e-rowselect .e-rowcell,
    html[data-theme="dark"] .e-grid td.e-active {
        background-color: var(--app-primary-soft) !important;
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .e-grid .e-rowcell,
    html[data-theme="dark"] .e-grid .e-headercell,
    html[data-theme="dark"] .e-grid td,
    html[data-theme="dark"] .e-grid th {
        border-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .e-input-group,
    html[data-theme="dark"] .e-input-group input,
    html[data-theme="dark"] .e-input,
    html[data-theme="dark"] .e-dropdownbase,
    html[data-theme="dark"] .e-list-item {
        background-color: var(--app-surface-2) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .e-list-item:hover,
    html[data-theme="dark"] .e-list-item.e-active {
        background-color: var(--app-surface-3) !important;
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .e-btn:not(.e-primary) {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .e-pager .e-numericitem,
    html[data-theme="dark"] .e-pager .e-pagercontainer {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    /*
     * The active page needs a deeper indigo than --app-primary: white on
     * #6366f1 measures 4.47:1, just under AA. #4f46e5 restores the same hue
     * at 5.6:1 without changing the visual language of the pager.
     */
    html[data-theme="dark"] .e-pager .e-numericitem.e-currentitem,
    html[data-theme="dark"] .e-pager .e-numericitem.e-currentitem:hover,
    html[data-theme="dark"] .e-pager .e-numericitem.e-active {
        background-color: #4338ca !important;
        color: #fff !important;
    }

    /*
     * Toolbar button labels and icons inherit a hardcoded #495057 from the
     * Syncfusion CDN theme, which survives on the dark button surface and
     * leaves "Export Excel" at 1.56:1. The vendor sets it on the inner
     * label/icon spans, so the button's own colour never reaches them —
     * they must be targeted directly.
     */
    html[data-theme="dark"] .e-toolbar .e-tbar-btn,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn-text,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn .e-icons,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn .e-btn-icon,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover .e-tbar-btn-text,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover .e-icons {
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover {
        background-color: var(--app-border) !important;
    }

    html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover .e-tbar-btn-text,
    html[data-theme="dark"] .e-toolbar .e-tbar-btn:hover .e-btn-icon {
        color: var(--app-text-strong) !important;
    }

    /* The select-all checkbox uses the vendor's own blue; keep it legible. */
    html[data-theme="dark"] .e-checkbox-wrapper .e-frame.e-check,
    html[data-theme="dark"] .e-css.e-checkbox-wrapper .e-frame.e-check {
        background-color: var(--app-primary) !important;
        border-color: var(--app-primary) !important;
        color: #fff !important;
    }

    /* --- Select2 ------------------------------------------------------------- */
    html[data-theme="dark"] .select2-container--default .select2-selection--single,
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
    html[data-theme="dark"] .select2-dropdown,
    html[data-theme="dark"] .select2-search__field {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .select2-results__option {
        background-color: var(--app-surface) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .select2-results__option--highlighted {
        background-color: var(--app-primary) !important;
        color: #fff !important;
    }

    /* --- SweetAlert ---------------------------------------------------------- */
    html[data-theme="dark"] .swal2-popup {
        background: var(--app-surface) !important;
        color: var(--app-text) !important;
    }

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

    /* --- POS till -------------------------------------------------------------
       Class names verified against pos-multi.css. Product cards in particular
       must repaint their SURFACE whenever their text colour changes, or the
       inherited light text lands on a white card and the product names become
       unreadable.
       ------------------------------------------------------------------------ */
    html[data-theme="dark"] .pos-tabs-wrap,
    html[data-theme="dark"] .pos-tab-bar,
    html[data-theme="dark"] .pos-filter-card,
    html[data-theme="dark"] .pos-cart-card,
    html[data-theme="dark"] .pos-cart-header,
    html[data-theme="dark"] .pos-cart-customer,
    html[data-theme="dark"] .cart-summary,
    html[data-theme="dark"] .cart-payment,
    html[data-theme="dark"] .cart-note-block,
    html[data-theme="dark"] .pos-modal,
    html[data-theme="dark"] .pos-pager {
        background-color: var(--app-surface) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text);
    }

    /* Product tiles: surface + text together. */
    html[data-theme="dark"] .product-card {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .product-card:hover {
        background-color: var(--app-surface-3) !important;
    }

    html[data-theme="dark"] .product-name {
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .product-body {
        background-color: transparent !important;
    }

    /* The image area keeps its own backdrop so photos are not tinted. */
    html[data-theme="dark"] .image-container {
        background-color: var(--app-surface-3) !important;
    }

    html[data-theme="dark"] .product-card.is-out {
        opacity: .55;
    }

    /* Cart lines */
    html[data-theme="dark"] .cart-line {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .cart-line:hover {
        background-color: var(--app-surface-3) !important;
    }

    html[data-theme="dark"] .cart-line-name,
    html[data-theme="dark"] .cart-grand,
    html[data-theme="dark"] .cart-grand span:last-child {
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .cart-line-unit,
    html[data-theme="dark"] .pos-mini-label,
    html[data-theme="dark"] .cart-empty,
    html[data-theme="dark"] .pos-page-info,
    html[data-theme="dark"] .cart-summary .text-secondary {
        color: var(--app-text-muted) !important;
    }

    html[data-theme="dark"] .cart-line-note {
        background-color: var(--app-surface-3) !important;
        color: var(--app-text-muted) !important;
    }

    /* Tabs */
    html[data-theme="dark"] .pos-tab {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .pos-tab:hover {
        background-color: var(--app-surface-3) !important;
    }

    html[data-theme="dark"] .pos-tab.is-active {
        background-color: var(--app-primary-soft) !important;
        border-color: var(--app-primary) !important;
        color: var(--app-text-strong) !important;
    }

    /* Controls */
    html[data-theme="dark"] .pos-search-input,
    html[data-theme="dark"] .pos-filter-select,
    html[data-theme="dark"] .pos-pay-input,
    html[data-theme="dark"] .qty-value {
        background-color: var(--app-surface-2) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .pos-tool-btn,
    html[data-theme="dark"] .pos-page-btn,
    html[data-theme="dark"] .qty-btn,
    html[data-theme="dark"] .pos-tab-add,
    html[data-theme="dark"] .btn-add-customer,
    html[data-theme="dark"] .btn-line-note,
    html[data-theme="dark"] .btn-invoice-note {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .pos-tool-btn:hover,
    html[data-theme="dark"] .pos-page-btn:hover:not(:disabled),
    html[data-theme="dark"] .qty-btn:hover,
    html[data-theme="dark"] .pos-tab-add:hover,
    html[data-theme="dark"] .btn-add-customer:hover {
        background-color: var(--app-border) !important;
        color: var(--app-text-strong) !important;
    }

    html[data-theme="dark"] .invoice-note-preview {
        background-color: var(--app-surface-3) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
    }

    html[data-theme="dark"] .pos-toast {
        background-color: var(--app-surface-3) !important;
        color: var(--app-text) !important;
        border-color: var(--app-border) !important;
    }

    /* --- Scrollbars ---------------------------------------------------------- */
    html[data-theme="dark"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-track {
        background: var(--app-surface);
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: var(--app-surface-3);
        border-radius: 6px;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: var(--app-border);
    }

    /* --- Images that assume a light backdrop --------------------------------- */
    html[data-theme="dark"] .login-content img.logo,
    html[data-theme="dark"] .iq-sidebar-logo img {
        filter: brightness(1.08);
    }
}

/* ==========================================================================
   APPEARANCE SWITCHER (navbar dropdown + settings page tiles)

   Logical properties are used throughout so the controls mirror correctly
   in Arabic without a separate RTL ruleset.
   ========================================================================== */

.app-appearance-menu {
    min-width: 286px;
}

.app-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.app-theme-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
    color: inherit;
    font-size: calc(.74rem * var(--app-font-scale, 1));
    line-height: 1.2;
    text-align: center;
}

.app-theme-tile i {
    font-size: calc(1.15rem * var(--app-font-scale, 1));
    color: #4f46e5;
}

.app-theme-tile:hover {
    border-color: #c7d2fe;
}

.app-theme-tile.active {
    border-color: #4f46e5;
    background: #eef2ff;
}

.app-scale-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-scale-select {
    flex: 1 1 auto;
    min-width: 0;
}

.app-scale-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

.app-scale-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.app-scale-badge {
    font-size: calc(.7rem * var(--app-font-scale, 1));
    background: #eef2ff;
    color: #4338ca;
}

/* Preview swatch on the settings page. */
.app-font-preview {
    padding: 12px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    line-height: 1.7;
}

/* --- Dark variants of the switcher itself -------------------------------- */
@media screen {
    html[data-theme="dark"] .app-theme-tile {
        border-color: var(--app-border);
    }

    html[data-theme="dark"] .app-theme-tile:hover {
        border-color: var(--app-primary);
    }

    html[data-theme="dark"] .app-theme-tile.active {
        border-color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    html[data-theme="dark"] .app-theme-tile i {
        color: #93a4ff;
    }

    html[data-theme="dark"] .app-scale-btn {
        border-color: var(--app-border);
    }

    html[data-theme="dark"] .app-scale-btn:hover {
        background: var(--app-surface-3);
    }

    html[data-theme="dark"] .app-scale-badge {
        background: var(--app-primary-soft);
        color: #c7cdff;
    }

    html[data-theme="dark"] .app-font-preview {
        background: var(--app-surface-2);
        border-color: var(--app-border);
    }

    html[data-theme="dark"] .sf-size-option {
        border-color: var(--app-border);
        color: var(--app-text);
    }

    html[data-theme="dark"] .sf-size-option.active,
    html[data-theme="dark"] .sf-size-option:has(input:checked) {
        border-color: var(--app-primary);
        background: var(--app-primary-soft);
    }

    html[data-theme="dark"] .sf-size-option span {
        color: var(--app-text-strong);
    }
}

/* ==========================================================================
   PRINT / EXPORT ISOLATION

   "Prevent font scaling or theme changes from affecting invoice printing or
   exported report layouts."

   The dark palette needs no undoing here: every dark rule above is wrapped
   in `@media screen`, so on paper it simply does not exist and each element
   keeps its own original colour. Restoring colours by hand was tried first
   and was wrong — it forced black rather than the design's real values.

   That leaves only the two things that are applied as variables: the font
   scale and the font family. Resetting them restores the original metrics.

   Of the four print surfaces, `pos/print-receipt.blade.php` and
   `orders/invoice-order.blade.php` are standalone documents that never load
   this file and are therefore immune by construction. The block below
   protects the ones that extend the dashboard layout: `pos/print-invoice`
   and the report pages.
   ========================================================================== */
@media print {
    :root,
    html,
    html[data-theme],
    html[data-theme="dark"],
    html[data-theme="light"] {
        --app-font-scale: 1 !important;
        --app-font-stack: "Lato", sans-serif !important;
        color-scheme: light !important;
    }

    /* The chosen webfont must not alter the printed layout's metrics. */
    html[data-font] body,
    html[data-font] .card,
    html[data-font] .table,
    html[data-font] .e-grid,
    html[data-font] h1,
    html[data-font] h2,
    html[data-font] h3,
    html[data-font] h4,
    html[data-font] h5,
    html[data-font] h6 {
        font-family: "Lato", sans-serif !important;
    }
}