/*
 * Retail dark theme: the values every surface reads when RetailTheme.js sets data-theme="dark" on <html>.
 *
 * The colour rules of the stylesheets get their dark variants from TailwindAssets/dark-theme.cjs (same palette).
 * This file holds what those clones read: the theme custom properties, the page canvas, Radzen's palette and
 * the few shared Nexus.Components styles that live outside Retail's stylesheets.
 */

.nexus-theme-switching,
.nexus-theme-switching *,
.nexus-theme-switching *::before,
.nexus-theme-switching *::after {
    transition: none !important;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces: page < surface < raised. */
    --color-background: #111317;
    --color-card-background: #1A1D23;
    --color-hover: #252A31;
    --color-active: #252A31;
    --color-not-active: #3D434E;
    --color-loading: #2F343C;
    --color-background-start: #1A1D23;
    --color-background-end: #111317;
    --color-shadow: rgb(0 0 0 / 0.45);

    /* Text. */
    --color-primary-text: #ECEEF2;
    --color-secondary-text: #B4BAC5;
    --color-tertiary-text: #8E95A2;
    --color-not-active-text: #B4BAC5;
    --color-captions-text: #5E6571;
    --color-slate-steel: #E1E4EA;
    --color-title-start: rgb(var(--nexus-tw-primary-fg));
    --color-title-end: rgb(var(--nexus-tw-primary-fg));

    /* Lines. */
    --color-light-border: #2A2F37;
    /* Classes map it per use (border or fill); raw uses (inline color-mix, component styles) get one neutral. */
    --color-highlight-text: #343A44;
    --color-divider: #3C424C;
    --color-border: #59616E;
    --color-border-hover: #6B7380;

    /* Status tints. */
    --color-bg-success: rgb(79 209 182 / 0.14);
    --color-bg-error: rgb(255 123 123 / 0.14);
    --color-bg-warning: rgb(244 181 80 / 0.14);
    --color-bg-info: rgb(108 192 234 / 0.14);

    /* Register table states: deep tints with the light theme's accents. */
    --color-table-status-free-bg: #262A31;
    --color-table-status-free-border: #59616E;
    --color-table-status-free-accent: #4A515C;
    --color-table-status-new-bg: #3E2227;
    --color-table-status-preparing-bg: #392809;
    --color-table-status-ready-bg: #112F3F;
    --color-table-status-collect-bg: #0C3422;
    --color-table-status-attention-bg: #3D1C1C;

    /* Radzen (Admin and Register grids, pickers and dialogs) in the same graphite scale. */
    --rz-base: #3A404A;
    --rz-base-50: #ECEEF2;
    --rz-base-100: #B4BAC5;
    --rz-base-200: #6F7682;
    --rz-base-300: #4A505B;
    --rz-base-400: #3A404A;
    --rz-base-500: #333943;
    --rz-base-600: #2C3139;
    --rz-base-700: #22262D;
    --rz-base-800: #1A1D23;
    --rz-base-900: #111317;
    /* Hover and selection fills of base buttons and rows (Radzen's dark theme paints them white). */
    --rz-base-light: #8E95A2;
    --rz-on-base-light: #111317;
    --rz-base-lighter: #2C3139;
    --rz-on-base-lighter: #ECEEF2;
    --rz-base-dark: #22262D;
    --rz-base-darker: #111317;
    --rz-primary: #8F97F5;
    --rz-primary-light: #A3AAFF;
    --rz-primary-lighter: rgb(143 151 245 / 0.16);
    --rz-primary-dark: #7F89F2;
    --rz-primary-darker: #6B74E0;
    --rz-on-primary: #111317;
    --rz-on-primary-lighter: #C9CDFF;

    /* Material dark rings every focused button, so a clicked button kept an outline; light draws none. */
    --rz-button-focus-outline: var(--rz-outline-normal);
}

:root[data-theme="dark"] body {
    background-color: var(--color-background);
    color: var(--color-primary-text);
}

:root[data-theme="dark"] ::selection {
    background-color: rgb(143 151 245 / 0.35);
}

:root[data-theme="dark"] * {
    scrollbar-color: #3A404A transparent;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #3A404A;
    border-radius: 999px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Radzen utility classes that name a light colour. */
:root[data-theme="dark"] .rz-background-color-white {
    background-color: var(--color-card-background) !important;
}

:root[data-theme="dark"] .rz-border-color-white {
    border-color: var(--color-card-background) !important;
}

/*
 * Fields without a background of their own get the browser's white in light; in dark the browser would draw its
 * own grey, so they get the dark surface instead. Zero specificity: any background class still wins.
 */
:where(:root[data-theme="dark"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
    background-color: var(--color-card-background);
}

/* Native form controls draw from color-scheme; autofill keeps the field dark instead of the browser yellow. */
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-primary-text);
    box-shadow: 0 0 0 1000px #22262D inset;
    caret-color: var(--color-primary-text);
}

/* Product placeholders (light grey artwork) become raised dark tiles. */
:root[data-theme="dark"] img[src*="placeholder-image"] {
    filter: invert(0.88);
}

/* Logos and artwork drawn in dark ink for light pages. */
:root[data-theme="dark"] img[src*="logo-nexusretail"] {
    filter: brightness(0) invert(0.93);
}

/* Inline borders the stylesheets cannot reach. */
:root[data-theme="dark"] .waiter-chat-composer {
    border-top-color: #333943 !important;
}

/*
 * Skeletons (Nexus.Components Skeleton, wave animation) set their light-grey shimmer inline. On the dark loading
 * tone (--color-loading) the shimmer is a faint light sweep instead; the stylesheet's !important beats the inline value.
 */
:root[data-theme="dark"] [style*="--nexus-animation-bg"] {
    --nexus-animation-bg: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.07) 50%, rgb(255 255 255 / 0) 100%) !important;
}

/*
 * Popovers (Nexus Dropdown, PopUp and PopoverList, AutoComplete) open over cards, where the card colour would hide
 * them: drop shadows barely show on dark surfaces. They sit one step higher, outlined, with a deeper shadow, and
 * their hover, selection and divider tokens step up with them.
 */
:root[data-theme="dark"] [role="region"]:has(.dropdown-container),
:root[data-theme="dark"] .z-50 > [role="region"],
:root[data-theme="dark"] [id^="autocomplete-dropdown-"] {
    --nexus-card-bg-color: #22262D !important;
    --nexus-card-border-color: #343A44 !important;
    --color-hover: #2E333C;
    --color-active: #2E333C;
    --color-light-border: #343A44;
    --color-highlight-text: #3A404B;
    border-color: #343A44;
    background-color: #22262D;
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.35);
}

:root[data-theme="dark"] [role="region"]:has(.dropdown-container) .sticky.bg-white {
    background-color: #22262D;
}

/* dark-illustrations:generated — dark copies of the SVG illustrations, written by Nexus.Retail.Server/TailwindAssets/dark-theme-sync.mjs. */

:root[data-theme="dark"] img[src*="/ban.svg"] {
    content: url("/Images/dark/ban.svg");
}

:root[data-theme="dark"] img[src*="/basket-warning-app.svg"] {
    content: url("/Images/dark/basket-warning-app.svg");
}

:root[data-theme="dark"] img[src*="/basket-warning.svg"] {
    content: url("/Images/dark/basket-warning.svg");
}

:root[data-theme="dark"] img[src*="/booking-unavailable.svg"] {
    content: url("/Images/dark/booking-unavailable.svg");
}

:root[data-theme="dark"] img[src*="/broken-link.svg"] {
    content: url("/Images/dark/broken-link.svg");
}

:root[data-theme="dark"] img[src*="/card-payment.svg"] {
    content: url("/Images/dark/card-payment.svg");
}

:root[data-theme="dark"] img[src*="/check.svg"] {
    content: url("/Images/dark/check.svg");
}

:root[data-theme="dark"] img[src*="/connection-error.svg"] {
    content: url("/Images/dark/connection-error.svg");
}

:root[data-theme="dark"] img[src*="/counter-payment.svg"] {
    content: url("/Images/dark/counter-payment.svg");
}

:root[data-theme="dark"] img[src*="/direct-sales-voucher-empty.svg"] {
    content: url("/Images/dark/direct-sales-voucher-empty.svg");
}

:root[data-theme="dark"] img[src*="/discount-fixed-ammount.svg"] {
    content: url("/Images/dark/discount-fixed-ammount.svg");
}

:root[data-theme="dark"] img[src*="/discount-percent.svg"] {
    content: url("/Images/dark/discount-percent.svg");
}

:root[data-theme="dark"] img[src*="/discount-voucher.svg"] {
    content: url("/Images/dark/discount-voucher.svg");
}

:root[data-theme="dark"] img[src*="/ellipsis-vertical.svg"] {
    content: url("/Images/dark/ellipsis-vertical.svg");
}

:root[data-theme="dark"] img[src*="/empty-cart-v4-3.svg"] {
    content: url("/Images/dark/empty-cart-v4-3.svg");
}

:root[data-theme="dark"] img[src*="/empty-conversation.svg"] {
    content: url("/Images/dark/empty-conversation.svg");
}

:root[data-theme="dark"] img[src*="/fork-spoon.svg"] {
    content: url("/Images/dark/fork-spoon.svg");
}

:root[data-theme="dark"] img[src*="/no-notifications.svg"] {
    content: url("/Images/dark/no-notifications.svg");
}

:root[data-theme="dark"] img[src*="/no-orders-restaurant.svg"] {
    content: url("/Images/dark/no-orders-restaurant.svg");
}

:root[data-theme="dark"] img[src*="/no-orders.svg"] {
    content: url("/Images/dark/no-orders.svg");
}

:root[data-theme="dark"] img[src*="/no-results-found.svg"] {
    content: url("/Images/dark/no-results-found.svg");
}

:root[data-theme="dark"] img[src*="/outside-service-cart.svg"] {
    content: url("/Images/dark/outside-service-cart.svg");
}

:root[data-theme="dark"] img[src*="/pen.svg"] {
    content: url("/Images/dark/pen.svg");
}

:root[data-theme="dark"] img[src*="/placeholder-splash.svg"] {
    content: url("/Images/dark/placeholder-splash.svg");
}

:root[data-theme="dark"] img[src*="/Primary.svg"] {
    content: url("/Images/dark/Primary.svg");
}

:root[data-theme="dark"] img[src*="/qr-payment.svg"] {
    content: url("/Images/dark/qr-payment.svg");
}

:root[data-theme="dark"] img[src*="/receipt-app.svg"] {
    content: url("/Images/dark/receipt-app.svg");
}

:root[data-theme="dark"] img[src*="/receipt.svg"] {
    content: url("/Images/dark/receipt.svg");
}

:root[data-theme="dark"] img[src*="/sgr.svg"] {
    content: url("/Images/dark/sgr.svg");
}

:root[data-theme="dark"] img[src*="/Waiter/Payment/card.svg"] {
    content: url("/Images/dark/Waiter/Payment/card.svg");
}

:root[data-theme="dark"] img[src*="/Waiter/Payment/cash.svg"] {
    content: url("/Images/dark/Waiter/Payment/cash.svg");
}

:root[data-theme="dark"] img[src*="/Waiter/Payment/partial-payment.svg"] {
    content: url("/Images/dark/Waiter/Payment/partial-payment.svg");
}

:root[data-theme="dark"] img[src*="/wallet.svg"] {
    content: url("/Images/dark/wallet.svg");
}

:root[data-theme="dark"] img[src*="/bag-icon.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/bag-icon.svg");
}

:root[data-theme="dark"] img[src*="/bell.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/bell.svg");
}

:root[data-theme="dark"] img[src*="/DineIn.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/DineIn.svg");
}

:root[data-theme="dark"] img[src*="/exclamation.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/exclamation.svg");
}

:root[data-theme="dark"] img[src*="/frame.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/frame.svg");
}

:root[data-theme="dark"] img[src*="/kiosk-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/kiosk-image.svg");
}

:root[data-theme="dark"] img[src*="/kitchen-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/kitchen-image.svg");
}

:root[data-theme="dark"] img[src*="/network_problem.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/network_problem.svg");
}

:root[data-theme="dark"] img[src*="/orders-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/orders-image.svg");
}

:root[data-theme="dark"] img[src*="/register-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/register-image.svg");
}

:root[data-theme="dark"] img[src*="/rider-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/rider-image.svg");
}

:root[data-theme="dark"] img[src*="/spoon_and_fork.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/spoon_and_fork.svg");
}

:root[data-theme="dark"] img[src*="/TakeAway.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/TakeAway.svg");
}

:root[data-theme="dark"] img[src*="/waiter-image.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/waiter-image.svg");
}

:root[data-theme="dark"] img[src*="/waiter.svg"] {
    content: url("/_content/Nexus.Retail.Components/Images/dark/waiter.svg");
}

/* dark-illustrations:generated:end */