/* ═══════════════════════════════════════════════════════════════════════════
   vx-theme.css — per-user look and feel (My Profile → Appearance)

   Site.Master (TVxUserTheme.GetHeadScript) puts these on <html> before first paint:
     data-vx-theme      light | dark | highcontrast | solarizeddark | solarizedlight | nord | dracula
                        ("system" is resolved to light or dark)
     data-vx-themed     present for every theme except light
     data-vx-accent     "custom" when the user picked an accent (--vx-user-accent / --vx-user-on-accent)
     data-vx-font       default | system | segoe | verdana | georgia
     data-vx-density    compact | balanced | spacious
     data-vx-textsize   small | medium | large

   The light theme without a custom accent changes nothing, so the app looks exactly as before.
   Load this file LAST, after Site.css and the other stylesheets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Theme palettes ────────────────────────────────────────────────────── */

:root {
    --vx-bg: #fafafc;
    --vx-surface: #ffffff;
    --vx-surface-2: #f3f4f8;
    --vx-border: #e5e7eb;
    --vx-text: #111827;
    --vx-muted: #6b7280;
    --vx-input-bg: #ffffff;
    --vx-accent: #484293;
    --vx-on-accent: #ffffff;
    --vx-grid-head: #6863af;
    --vx-row-odd: #fafafc;
    --vx-row-even: #eef0f8;
    --vx-row-hover: #e8eaf6;
    --vx-focus: #484293;
}

:root[data-vx-theme="dark"] {
    color-scheme: dark;
    --vx-bg: #1c1c26;
    --vx-surface: #252532;
    --vx-surface-2: #2d2d3c;
    --vx-border: #3a3a4c;
    --vx-text: #e7e7ef;
    --vx-muted: #9d9db3;
    --vx-input-bg: #1f1f2a;
    --vx-accent: #8f88e8;
    --vx-on-accent: #16151f;
    --vx-grid-head: #3d3a74;
    --vx-row-odd: #252532;
    --vx-row-even: #2b2b3a;
    --vx-row-hover: #35354a;
    --vx-focus: #a59ff0;
    --vx-topbar-bg: #2b2952;
    --vx-sidebar-bg: #181729;
    --vx-sidebar-active: #3d3a74;
}

:root[data-vx-theme="highcontrast"] {
    color-scheme: dark;
    --vx-bg: #000000;
    --vx-surface: #000000;
    --vx-surface-2: #121212;
    --vx-border: #ffffff;
    --vx-text: #ffffff;
    --vx-muted: #e0e0e0;
    --vx-input-bg: #000000;
    --vx-accent: #ffd400;
    --vx-on-accent: #000000;
    --vx-grid-head: #000000;
    --vx-row-odd: #000000;
    --vx-row-even: #141414;
    --vx-row-hover: #2a2a00;
    --vx-focus: #ffd400;
    --vx-topbar-bg: #000000;
    --vx-sidebar-bg: #000000;
    --vx-sidebar-active: #333300;
}

:root[data-vx-theme="solarizeddark"] {
    color-scheme: dark;
    --vx-bg: #002b36;
    --vx-surface: #073642;
    --vx-surface-2: #0b3f4c;
    --vx-border: #1d5361;
    --vx-text: #eee8d5;
    --vx-muted: #93a1a1;
    --vx-input-bg: #00252e;
    --vx-accent: #2aa1f0;
    --vx-on-accent: #002b36;
    --vx-grid-head: #0f4d5d;
    --vx-row-odd: #073642;
    --vx-row-even: #0a3d4a;
    --vx-row-hover: #124a58;
    --vx-focus: #2aa1f0;
    --vx-topbar-bg: #073642;
    --vx-sidebar-bg: #00212a;
    --vx-sidebar-active: #0f4d5d;
}

:root[data-vx-theme="solarizedlight"] {
    color-scheme: light;
    --vx-bg: #fdf6e3;
    --vx-surface: #fffbef;
    --vx-surface-2: #f3ecd8;
    --vx-border: #ddd4bb;
    --vx-text: #073642;
    --vx-muted: #657b83;
    --vx-input-bg: #fffdf6;
    --vx-accent: #1f78b8;
    --vx-on-accent: #ffffff;
    --vx-grid-head: #1f78b8;
    --vx-row-odd: #fffbef;
    --vx-row-even: #f5eedb;
    --vx-row-hover: #ebe3cb;
    --vx-focus: #1f78b8;
    --vx-topbar-bg: #1f78b8;
    --vx-sidebar-bg: #073642;
    --vx-sidebar-active: #1f78b8;
}

:root[data-vx-theme="nord"] {
    color-scheme: dark;
    --vx-bg: #2e3440;
    --vx-surface: #3b4252;
    --vx-surface-2: #434c5e;
    --vx-border: #4c566a;
    --vx-text: #eceff4;
    --vx-muted: #b4bccb;
    --vx-input-bg: #2e3440;
    --vx-accent: #88c0d0;
    --vx-on-accent: #2e3440;
    --vx-grid-head: #4c566a;
    --vx-row-odd: #3b4252;
    --vx-row-even: #404859;
    --vx-row-hover: #4a5366;
    --vx-focus: #88c0d0;
    --vx-topbar-bg: #3b4252;
    --vx-sidebar-bg: #242933;
    --vx-sidebar-active: #4c566a;
}

:root[data-vx-theme="dracula"] {
    color-scheme: dark;
    --vx-bg: #282a36;
    --vx-surface: #303241;
    --vx-surface-2: #383a4b;
    --vx-border: #44475a;
    --vx-text: #f8f8f2;
    --vx-muted: #a9adc9;
    --vx-input-bg: #242631;
    --vx-accent: #bd93f9;
    --vx-on-accent: #21222c;
    --vx-grid-head: #44475a;
    --vx-row-odd: #303241;
    --vx-row-even: #353747;
    --vx-row-hover: #414458;
    --vx-focus: #bd93f9;
    --vx-topbar-bg: #343746;
    --vx-sidebar-bg: #21222c;
    --vx-sidebar-active: #44475a;
}

/* A custom accent wins over the theme's own (same specificity, declared later). */
:root[data-vx-accent="custom"] {
    --vx-accent: var(--vx-user-accent);
    --vx-on-accent: var(--vx-user-on-accent, #ffffff);
    --vx-focus: var(--vx-user-accent);
}

/* Light theme + custom accent: repaint the brand chrome only. */
:root[data-vx-accent="custom"]:not([data-vx-themed]) {
    --vx-topbar-bg: var(--vx-user-accent);
    --vx-sidebar-bg: color-mix(in srgb, var(--vx-user-accent) 62%, #000000);
    --vx-sidebar-active: var(--vx-user-accent);
    --vx-grid-head: var(--vx-user-accent);
}

    :root[data-vx-accent="custom"]:not([data-vx-themed]) .app__footer,
    :root[data-vx-accent="custom"]:not([data-vx-themed]) .tm-grid-card .headerRow,
    :root[data-vx-accent="custom"]:not([data-vx-themed]) .tm-grid-card .columnheaderdefault {
        background-color: var(--vx-grid-head) !important;
        color: var(--vx-user-on-accent, #fff) !important;
    }

/* ── 2. Dark / coloured themes: repaint the shared building blocks ───────── */

:root[data-vx-themed] body,
:root[data-vx-themed] .background_default,
:root[data-vx-themed] .app__layout,
:root[data-vx-themed] .app__content,
:root[data-vx-themed] .lower-main-container,
:root[data-vx-themed] .vx-body {
    background-color: var(--vx-bg) !important;
    color: var(--vx-text);
}

/* Plain text links only; styled link-buttons keep their own colours. */
:root[data-vx-themed] .app__content a:not([class]) { color: var(--vx-accent); }

:root[data-vx-themed] .app__footer { background: var(--vx-topbar-bg) !important; }

:root[data-vx-themed] .vx-topbar { box-shadow: 0 1px 0 var(--vx-border); }
:root[data-vx-theme="highcontrast"] .vx-topbar { border-bottom: 1px solid #fff; }
:root[data-vx-theme="highcontrast"] .vx-sidebar { border-right: 1px solid #fff; }

/* Headings and text that Site.css pins to near-black */
:root[data-vx-themed] .titlebar,
:root[data-vx-themed] .vx-page-header__title,
:root[data-vx-themed] .vx-card__title,
:root[data-vx-themed] .back-card > label,
:root[data-vx-themed] .back-control-forms-label,
:root[data-vx-themed] h1, :root[data-vx-themed] h2, :root[data-vx-themed] h3,
:root[data-vx-themed] h4, :root[data-vx-themed] h5, :root[data-vx-themed] h6,
:root[data-vx-themed] .app__content label,
:root[data-vx-themed] .app__content legend,
:root[data-vx-themed] .app__content p {
    color: var(--vx-text) !important;
}

:root[data-vx-themed] .vx-page-header__subtitle,
:root[data-vx-themed] .vx-page-header__description,
:root[data-vx-themed] .vx-card__subtitle,
:root[data-vx-themed] .vx-field__label,
:root[data-vx-themed] .vx-field__hint,
:root[data-vx-themed] .am-hint,
:root[data-vx-themed] .am-group__title {
    color: var(--vx-muted) !important;
}

/* Cards and panels */
:root[data-vx-themed] .vx-card,
:root[data-vx-themed] .back-card,
:root[data-vx-themed] .form-grid,
:root[data-vx-themed] .am-card,
:root[data-vx-themed] .panel,
:root[data-vx-themed] .modal-content,
:root[data-vx-themed] .dropdown-menu,
:root[data-vx-themed] .well {
    background-color: var(--vx-surface) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text);
    box-shadow: none;
}

:root[data-vx-themed] .vx-card__header,
:root[data-vx-themed] .am-card__body,
:root[data-vx-themed] .panel-heading,
:root[data-vx-themed] .modal-header,
:root[data-vx-themed] .modal-footer {
    background-color: var(--vx-surface-2) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text);
}

:root[data-vx-themed] .vx-field__readonly {
    background: var(--vx-surface-2) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text) !important;
}

:root[data-vx-themed] hr { border-color: var(--vx-border); }

/* Inputs — !important because many pages set colours inline */
:root[data-vx-themed] input[type="text"],
:root[data-vx-themed] input[type="password"],
:root[data-vx-themed] input[type="email"],
:root[data-vx-themed] input[type="number"],
:root[data-vx-themed] input[type="search"],
:root[data-vx-themed] input[type="tel"],
:root[data-vx-themed] input[type="url"],
:root[data-vx-themed] input[type="date"],
:root[data-vx-themed] input[type="time"],
:root[data-vx-themed] input[type="datetime-local"],
:root[data-vx-themed] input:not([type]),
:root[data-vx-themed] select,
:root[data-vx-themed] textarea,
:root[data-vx-themed] .form-control,
:root[data-vx-themed] .aspNetDisabled {
    background-color: var(--vx-input-bg) !important;
    color: var(--vx-text) !important;
    border-color: var(--vx-border) !important;
}

:root[data-vx-themed] input::placeholder,
:root[data-vx-themed] textarea::placeholder { color: var(--vx-muted) !important; }

:root[data-vx-themed] input:focus,
:root[data-vx-themed] select:focus,
:root[data-vx-themed] textarea:focus {
    border-color: var(--vx-focus) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vx-focus) 30%, transparent) !important;
    outline: none;
}

:root[data-vx-themed] input[type="checkbox"],
:root[data-vx-themed] input[type="radio"] { accent-color: var(--vx-accent); }

/* Search pill + toolbar */
:root[data-vx-themed] .vx-tab-toolbar__search,
:root[data-vx-themed] .vx-searchbar-pill {
    background: var(--vx-input-bg) !important;
    border-color: var(--vx-border) !important;
}

:root[data-vx-themed] .vx-searchbar { color: var(--vx-text) !important; background: transparent !important; }

/* Buttons */
:root[data-vx-themed] .vx-action-btn,
:root[data-vx-themed] .am-btn,
:root[data-vx-themed] .am-toggle {
    background: var(--vx-surface) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text) !important;
}

    :root[data-vx-themed] .vx-action-btn:hover,
    :root[data-vx-themed] .am-btn:hover,
    :root[data-vx-themed] .am-toggle:hover {
        background: var(--vx-surface-2) !important;
        border-color: var(--vx-accent) !important;
        color: var(--vx-text) !important;
    }

    :root[data-vx-themed] .vx-action-btn i { color: var(--vx-muted) !important; }

:root[data-vx-themed] .vx-btn-add { background: var(--vx-surface) !important; color: var(--vx-accent) !important; }

:root[data-vx-themed] input[type="submit"],
:root[data-vx-themed] input[type="button"],
:root[data-vx-themed] button.btn-default,
:root[data-vx-themed] .btn-default {
    background-color: var(--vx-surface-2);
    color: var(--vx-text);
    border-color: var(--vx-border);
}

/* Grids (GridView) */
:root[data-vx-themed] .gridview_default {
    border-color: var(--vx-border) !important;
    background: var(--vx-surface);
    box-shadow: none !important;
}

    :root[data-vx-themed] .gridview_default th,
    :root[data-vx-themed] .gridview_default td {
        border-color: var(--vx-border) !important;
    }

:root[data-vx-themed] .headerRow,
:root[data-vx-themed] .columnheaderdefault,
:root[data-vx-themed] .tm-grid-card .headerRow,
:root[data-vx-themed] .tm-grid-card .columnheaderdefault {
    background-color: var(--vx-grid-head) !important;
    color: #ffffff !important;
}

:root[data-vx-themed] .headerRow a,
:root[data-vx-themed] .columnheaderdefault a { color: #ffffff !important; }

:root[data-vx-themed] .oddRow,
:root[data-vx-themed] .tm-grid-card .oddRow { background-color: var(--vx-row-odd) !important; }

:root[data-vx-themed] .evenRow,
:root[data-vx-themed] .tm-grid-card .evenRow { background-color: var(--vx-row-even) !important; }

:root[data-vx-themed] .columndefault,
:root[data-vx-themed] .tm-grid-card .columndefault,
:root[data-vx-themed] .gridview_default td { color: var(--vx-text) !important; }

:root[data-vx-themed] .tm-grid-card .gridview_default tr.oddRow:hover,
:root[data-vx-themed] .tm-grid-card .gridview_default tr.evenRow:hover,
:root[data-vx-themed] .tm-grid-card .gridview_default tr.oddRow:hover td,
:root[data-vx-themed] .tm-grid-card .gridview_default tr.evenRow:hover td {
    background-color: var(--vx-row-hover) !important;
    color: var(--vx-text) !important;
}

:root[data-vx-themed] .gridPager td,
:root[data-vx-themed] tr.gridPager { background: var(--vx-surface) !important; color: var(--vx-text) !important; }

:root[data-vx-themed] .table > thead > tr > th,
:root[data-vx-themed] .table > tbody > tr > td,
:root[data-vx-themed] .table > tbody > tr > th { border-color: var(--vx-border); color: var(--vx-text); }

/* Page tab bars (asp:Menu) */
:root[data-vx-themed] .menucentered,
:root[data-vx-themed] .menucenteredLower,
:root[data-vx-themed] .menu-container,
:root[data-vx-themed] .menu-container-lower {
    background-color: var(--vx-surface-2) !important;
}

    :root[data-vx-themed] .menucentered a,
    :root[data-vx-themed] .menucenteredLower a {
        color: var(--vx-text) !important;
        background-color: transparent !important;
    }

        :root[data-vx-themed] .menucentered a.selected,
        :root[data-vx-themed] .menucentered a:hover,
        :root[data-vx-themed] .menucenteredLower a.selected,
        :root[data-vx-themed] .menucenteredLower a:hover {
            color: var(--vx-accent) !important;
        }

/* Messages */
:root[data-vx-themed] .am-note { background: var(--vx-surface-2) !important; border-color: var(--vx-accent) !important; color: var(--vx-text) !important; }

/* Scrollable panels */
:root[data-vx-themed] .scrollable-panel { background: transparent; }

/* High contrast: make edges and focus unmistakable */
:root[data-vx-theme="highcontrast"] .vx-card,
:root[data-vx-theme="highcontrast"] .gridview_default,
:root[data-vx-theme="highcontrast"] .vx-action-btn,
:root[data-vx-theme="highcontrast"] input,
:root[data-vx-theme="highcontrast"] select,
:root[data-vx-theme="highcontrast"] textarea { border-width: 2px !important; }

:root[data-vx-theme="highcontrast"] *:focus-visible { outline: 3px solid var(--vx-focus) !important; outline-offset: 2px; }

/* ── 3. Typeface ──────────────────────────────────────────────────────────── */
/* Icon fonts (<i class="fas …">, glyphicons) are left alone. */

:root[data-vx-font="system"] body,
:root[data-vx-font="system"] body *:not(i):not([class^="fa"]):not([class*=" fa"]):not(.glyphicon) {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

:root[data-vx-font="segoe"] body,
:root[data-vx-font="segoe"] body *:not(i):not([class^="fa"]):not([class*=" fa"]):not(.glyphicon) {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

:root[data-vx-font="verdana"] body,
:root[data-vx-font="verdana"] body *:not(i):not([class^="fa"]):not([class*=" fa"]):not(.glyphicon) {
    font-family: Verdana, Geneva, sans-serif !important;
}

:root[data-vx-font="georgia"] body,
:root[data-vx-font="georgia"] body *:not(i):not([class^="fa"]):not([class*=" fa"]):not(.glyphicon) {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* ── 4. Density ───────────────────────────────────────────────────────────── */

:root[data-vx-density="compact"] .vx-card__body { padding: 12px !important; }
:root[data-vx-density="compact"] .vx-card__header { padding: 9px 14px !important; }
:root[data-vx-density="compact"] .vx-field { margin-bottom: 8px !important; }
:root[data-vx-density="compact"] .gridview_default th,
:root[data-vx-density="compact"] .gridview_default td,
:root[data-vx-density="compact"] .tm-grid-card .columndefault,
:root[data-vx-density="compact"] .tm-grid-card .columnheaderdefault { padding: 4px 8px !important; }
:root[data-vx-density="compact"] .vx-tab-toolbar { padding: 14px 0 6px 0 !important; }

:root[data-vx-density="spacious"] .vx-card__body { padding: 28px !important; }
:root[data-vx-density="spacious"] .vx-card__header { padding: 18px 26px !important; }
:root[data-vx-density="spacious"] .vx-field { margin-bottom: 22px !important; }
:root[data-vx-density="spacious"] .gridview_default th,
:root[data-vx-density="spacious"] .gridview_default td,
:root[data-vx-density="spacious"] .tm-grid-card .columndefault,
:root[data-vx-density="spacious"] .tm-grid-card .columnheaderdefault { padding: 14px 14px !important; }
:root[data-vx-density="spacious"] .vx-tab-toolbar { padding: 36px 0 14px 0 !important; }

/* ── 5. Text size ─────────────────────────────────────────────────────────── */
/* Site.css sizes everything in px, so the content area is zoomed as a whole
   (words and the boxes around them grow together). Topbar and sidebar stay put. */

:root[data-vx-textsize="small"] .app__content { zoom: 0.9; }
:root[data-vx-textsize="large"] .app__content { zoom: 1.15; }

/* ── 6. Topbar profile button ─────────────────────────────────────────────── */

.vx-topbar__profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    flex-shrink: 0;
    margin-right: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .vx-topbar__profile:hover,
    .vx-topbar__profile:focus-visible {
        background: rgba(255,255,255,0.26);
        border-color: rgba(255,255,255,0.6);
        color: #fff !important;
        outline: none;
    }

    .vx-topbar__profile.is-active {
        background: #fff;
        border-color: #fff;
        color: var(--vx-topbar-bg, #484293) !important;
    }

    .vx-topbar__profile svg { display: block; }

    /* With a profile picture: the photo fills the circle, the ring shows hover/active. */
    .vx-topbar__profile.has-photo { overflow: hidden; padding: 0; border-width: 2px; }
    .vx-topbar__profile.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
    .vx-topbar__profile.has-photo.is-active { background: transparent; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }

/* ── 7. POS screens (QuickPOSMenu and friends) ────────────────────────────── */
/* The item/cart panels have a hard-coded light grey background inline, so the
   themed (light) text vanished on them. Repaint them with the theme surfaces. */

:root[data-vx-themed] .pos-panel {
    background-color: var(--vx-surface) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text) !important;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35) !important;
}

:root[data-vx-themed] .item-container,
:root[data-vx-themed] .product_panel {
    background-color: var(--vx-surface-2) !important;
    border-color: var(--vx-border) !important;
    color: var(--vx-text) !important;
}

:root[data-vx-themed] .pos-panel td,
:root[data-vx-themed] .pos-panel span,
:root[data-vx-themed] .pos-item-header,
:root[data-vx-themed] .item-description-container,
:root[data-vx-themed] .product_panel span {
    color: var(--vx-text) !important;
}

:root[data-vx-themed] .basket-count {
    background-color: var(--vx-input-bg) !important;
    border-color: var(--vx-accent) !important;
    color: var(--vx-text) !important;
}

/* keep the blue add-to-cart bar readable */
:root[data-vx-themed] .add-to-cart-bottom,
:root[data-vx-themed] .add-to-cart-bottom span {
    color: #FAFAFC !important;
    border-top-color: var(--vx-border) !important;
}