/* =====================================================================
   Drizline admin theme: brand palette, light and dark modes.
   Loaded once by panel.ejs (before panel.css) and by the auth pages (before login.css); every
   stylesheet of the redesigned modules (admin-ui, dashboard, reports, users, promotions) and the
   shell (panel.css) paints with these tokens instead of literal colors.

   Brand (drizline.com): navy #2d3a8b (logo), bright blue #469cd6 (active nav link, underlines),
   periwinkle #6f94f7 (hero), white, light gray #f3f3f3.

   Modes: panel.ejs sets html[data-theme="light"|"dark"] before the first paint (localStorage
   "drizline.theme", else the OS preference). Only the dark values are overridden below; everything
   without a dark override keeps its light value.

   Legacy modules (the ones without admin-ui.css) keep their light content in dark mode: the second
   selector of the light block re-declares the light tokens on #master-content while such a module is
   loaded (not while the box is still empty: then it follows the mode, so dark mode never flashes white), so the shared classes they use (.drizline-tag, .btn.green, ...) stay readable on white.
   It sits in :where() so a browser without :has() ignores that selector alone and keeps :root.
   ===================================================================== */

:root,
:where(html[data-theme="dark"] #master-content:not(:empty):not(:has(link[href*="admin-ui.css"]))) {
    /* --- Brand --- */
    --dz-navy: #2d3a8b;
    --dz-accent: #469cd6;             /* fills: buttons, checked boxes, active borders, icons */
    --dz-accent-rgb: 70, 156, 214;    /* for rgba() rings, shadows and tints */
    --dz-accent-hover: #3a8bc4;
    --dz-electric: #3db1f5;           /* light electric blue: chart lines, the sales card */
    --dz-accent-2: #6f94f7;           /* periwinkle, second stop of the brand gradient */
    --dz-accent-text: var(--dz-navy);        /* accent as text: the brand navy, 10:1 on white, 8.9:1 on the soft tint */
    --dz-accent-text-strong: var(--dz-navy); /* on the stronger tints: the navy keeps 7.2:1 on the strongest */
    --dz-accent-fill-strong: var(--dz-navy); /* deep fill under white text (hover of the row pills): 10:1 */
    --dz-accent-soft: #e8f2fb;        /* soft tint: chips off, hover rows, icon chips */
    --dz-accent-soft-2: #d6e8f7;      /* stronger tint: chips on, selected options */
    --dz-accent-soft-3: #c4ddf2;      /* chips on, hovered */
    --dz-accent-line: #b5d6f0;        /* borders on tinted surfaces */
    --dz-accent-faint: #8fc1e4;       /* decorative icons inside chips */
    --dz-on-accent: #0f1f45;          /* text on an accent fill that needs more than white gives (avatar) */
    --dz-gradient-brand: linear-gradient(135deg, #3f93d8 0%, #5e7ff2 100%);       /* blue to periwinkle: primary buttons, heading icon */
    --dz-gradient-brand-hover: linear-gradient(135deg, #3587cd 0%, #5272ea 100%);

    /* --- Content surfaces and text --- */
    --dz-body-bg: #e3e9f3;            /* the ground, deepest layer (solid fallback; light mode paints --dz-body-gradient) */
    /* the light gray lives only behind the header bar and melts into the blue across its lower half, so the
       side menu and the content box (which start right below it) already sit on blue; the blue deepens
       toward the foot of the window */
    /* two soft glows over it bring a second hue: periwinkle-violet from the lower right, sky blue from the left.
       The translucent frames (content box, side menu) pick them up as a faint tint */
    --dz-body-glow:
        radial-gradient(65% 60% at 100% 100%, rgba(124, 108, 246, 0.24) 0%, rgba(124, 108, 246, 0) 70%),
        radial-gradient(50% 45% at 0% 78%, rgba(56, 182, 222, 0.16) 0%, rgba(56, 182, 222, 0) 70%);
    --dz-body-gradient: var(--dz-body-glow), linear-gradient(180deg, #eef2f9 0, #eef2f9 36px, #d9e1ee 84px, #d3dcec 50%, #c3cfe6 100%);
    /* the dashboard has no content box: its cards sit on the ground itself, so there the ground stays as light as
       its top all the way down (a faint lavender instead of the blue) and the colored stat cards keep their weight;
       the same glows, softer. The top stops match, so the header meets it without a seam */
    --dz-body-gradient-dash:
        radial-gradient(65% 60% at 100% 100%, rgba(124, 108, 246, 0.16) 0%, rgba(124, 108, 246, 0) 70%),
        radial-gradient(50% 45% at 0% 78%, rgba(56, 182, 222, 0.1) 0%, rgba(56, 182, 222, 0) 70%),
        linear-gradient(180deg, #eef2f9 0, #eef2f9 36px, #edf0fa 84px, #eceefb 50%, #e2e4f7 100%);
    --dz-content-bg: #f5f7fb;         /* the content box every module sits in, one step up (the dashboard alone floats on the ground) */
    --dz-surface: #ffffff;            /* cards, popups: the top layer */
    --dz-surface-2: #f1f3f7;          /* filled fields, chips off, table heads, trays */
    --dz-surface-3: #e7eaf0;          /* filled fields and chips off, hovered */
    --dz-surface-hover: #f7f8fb;      /* hovered rows */
    --dz-surface-glass: rgba(255, 255, 255, 0.92); /* sticky modal header and footer */
    --dz-line: #e1e5ec;               /* table frames, outlines */
    --dz-line-soft: #edf0f4;          /* row rules, section rules */
    --dz-input-border: #cbd7e6;
    --dz-input-border-hover: #9fb3c8;
    --dz-control-border: #b7c3cf;     /* checkbox box at rest, hint icons */
    --dz-ink-strong: #1f2933;         /* big figures */
    --dz-ink: #2f373e;                /* titles, values */
    --dz-text: #3e4a56;               /* body text */
    --dz-text-2: #4a5560;             /* secondary text */
    --dz-muted: #5b6b7b;              /* labels */
    --dz-muted-2: #6b7780;            /* captions that must still read (4.6:1) */
    --dz-faint: #9aa8b6;              /* placeholders, hints, ornaments */
    --dz-faint-2: #7a8794;            /* focusable hints (3.7:1) */
    --dz-shadow-rgb: 31, 60, 90;      /* card and popup shadows */
    --dz-tooltip-bg: #2f373e;
    --dz-tooltip-fg: #ffffff;
    --dz-scrim: rgba(227, 233, 243, 0.68); /* loader veil: washes the page toward the ground */

    /* --- Semantic --- */
    --dz-danger: #e7505a;
    --dz-danger-rgb: 226, 70, 92;
    --dz-danger-text: #c9463d;
    --dz-danger-text-strong: #b83a32;
    --dz-danger-fill-strong: #b83a32; /* deep red under white text; stays deep in dark mode */
    --dz-danger-soft: #fdeeee;
    --dz-danger-soft-2: #fbdada;
    --dz-danger-line: #f1b5ba;
    --dz-success-soft: #e6f7ee;
    --dz-success-text: #177a43;
    --dz-warn: #f3b13a;
    --dz-warn-soft: #fff4e0;
    --dz-warn-text: #c77d00;
    --dz-info-soft: #e9ecf8;          /* navy-tinted "informational" chips (user levels, ids, POS) */
    --dz-info-soft-2: #dde1f4;
    --dz-info-text: #2d3a8b;
    --dz-info-text-strong: #232d70;
    /* order status pills (.dz-status), one hue per stage: waiting amber, in progress blue, ready violet,
       done green, cancelled red; every text is 5:1 or more on its tint */
    --dz-status-created-bg: #fff3dc;
    --dz-status-created-fg: #8a5300;
    --dz-status-taken-bg: #e4f1fb;
    --dz-status-taken-fg: #1d5f94;
    --dz-status-ready-bg: #efeafd;
    --dz-status-ready-fg: #5a3fb8;
    --dz-status-delivered-bg: #e6f7ee;
    --dz-status-delivered-fg: #17703f;
    --dz-status-cancelled-bg: #fdeeee;
    --dz-status-cancelled-fg: #b83a32;

    /* --- Dashboard stat cards: gradients between the brand blues; only the cancelled card keeps its red (alert) --- */
    --dz-stat-plain-bg: linear-gradient(135deg, #ffffff 0%, #eff4fd 100%);
    --dz-stat-money-bg: linear-gradient(135deg, #a1d6fb 0%, #bfd9f9 55%, #cddcfd 100%);   /* light electric blue fading to periwinkle */
    --dz-stat-money2-bg: linear-gradient(135deg, #dadcfa 0%, #d2dbf9 50%, #cde4fb 100%);  /* periwinkle > navy > blue */
    --dz-stat-money2-fg: #2d3a8b;
    --dz-stat-cancel-bg: linear-gradient(135deg, #fcd9df 0%, #fde5e9 55%, #ffdfd0 100%);
    --dz-stat-late-bg: linear-gradient(135deg, #ffe8ae 0%, #fff1cc 55%, #ffe9c4 100%);   /* late orders: warning amber */
    --dz-stat-visual-bg: rgba(255, 255, 255, 0.75);

    /* --- Shell: header bar. Same color as the page ground on purpose: the bar sits inside the wrapper's
       12px gutters, and matching the ground is what keeps those gutters invisible (as in the old dark look) --- */
    --dz-nav-bg: #eef2f9;             /* the top of the ground gradient, so the bar meets it without a seam */
    --dz-nav-glass: rgba(238, 242, 249, 0.6); /* desktop header over the scrolling content: the ground, translucent */
    --dz-nav-fg: #2d3a8b;
    --dz-nav-fg-muted: #6b7390;
    --dz-nav-icon: #6b7390;
    --dz-nav-ctrl-bg: rgba(45, 58, 139, 0.06);
    --dz-nav-ctrl-border: rgba(45, 58, 139, 0.14);
    --dz-nav-ctrl-bg-hover: rgba(70, 156, 214, 0.12);   /* the bright blue answers the pointer */
    --dz-nav-ctrl-border-hover: rgba(70, 156, 214, 0.5);
    --dz-nav-menu-bg: #ffffff;
    --dz-nav-menu-border: #e3e7ef;
    --dz-nav-menu-fg: #4a5068;
    --dz-nav-menu-hover: rgba(45, 58, 139, 0.06);
    --dz-nav-menu-shadow: rgba(31, 60, 90, 0.18);
    --dz-nav-danger-fg: #c0392b;
    --dz-nav-danger-fg-hover: #a93226;
    --dz-nav-danger-bg: rgba(217, 61, 94, 0.08);
    --dz-nav-danger-border: rgba(217, 61, 94, 0.35);
    --dz-nav-danger-bg-hover: rgba(217, 61, 94, 0.16);
    --dz-nav-danger-border-hover: rgba(217, 61, 94, 0.7);

    /* --- Shell: side menu (panel.css reads --sidebar-bg and --sidebar-accent) --- */
    --sidebar-bg: #ffffff;
    --sidebar-accent: #469cd6;
    --dz-side-line: #e3e7ef;
    --dz-side-foot-line: #e3e7ef;     /* rule above the version at the foot of the menu; kept visible in dark */
    --dz-side-fg: #4a5068;
    --dz-side-icon: #8a93ad;
    --dz-side-hover-bg: rgba(45, 58, 139, 0.06);
    --dz-side-hover-fg: #2d3a8b;
    --dz-side-active-bg: #e8f2fb;
    --dz-side-active-fg: #2d3a8b;
    --dz-side-scroll: rgba(45, 58, 139, 0.18);
    --dz-side-scroll-hover: rgba(45, 58, 139, 0.32);

    /* --- Auth pages --- */
    /* page behind the card: soft washes of the brand blues across the ground (no spotlight) */
    --dz-auth-bg:
        radial-gradient(ellipse 65% 55% at 18% 22%, rgba(61, 177, 245, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 55% at 82% 78%, rgba(111, 148, 247, 0.2), transparent 70%),
        linear-gradient(160deg, #f2f6fc 0%, #e9eff9 50%, #ebeafb 100%);
    --dz-auth-card-bg: #ffffff;
    --dz-auth-card-border: #e3e7ef;
    --dz-auth-card-shadow: rgba(31, 60, 90, 0.12);
    --dz-auth-card-highlight: rgba(255, 255, 255, 0); /* 1px light edge on top of the dark card */
    --dz-auth-input-bg: #f6f9fe;      /* faint blue: the fields read as fields on the white card */
    --dz-auth-input-bg-focus: #ffffff;
    --dz-auth-input-border: #d3deec;
    --dz-auth-input-border-hover: #aec3dc;
    --dz-auth-autofill-bg: #f6f9fe;   /* autofilled fields keep the same tint */
}

/* the dark values also land on the ticket builder dialog of the Configuración module: the module keeps its light
   content in dark mode (legacy), but the redesigned dialog follows the mode */
html[data-theme="dark"],
html[data-theme="dark"] #master-content .ticket-modal {
    --dz-accent: #5aa9e0;
    --dz-accent-rgb: 90, 169, 224;
    --dz-accent-hover: #74b9e8;
    --dz-electric: #52bbf8;
    --dz-accent-2: #7f9ffa;
    --dz-accent-text: #8fc6ee;
    --dz-accent-text-strong: #a9d4f3;
    --dz-accent-fill-strong: #5570cc; /* the navy 60% toward the periwinkle (the navy itself sinks into the dark surfaces): white on it 4.6:1, 3.1:1 against the surfaces */
    --dz-accent-soft: #1c2d47;
    --dz-accent-soft-2: #213655;
    --dz-accent-soft-3: #274064;
    --dz-accent-line: #2f4d73;
    --dz-accent-faint: #5f8fb8;
    --dz-on-accent: #0b1a33;

    --dz-body-bg: #0b1020;
    --dz-content-bg: #111a2e;
    --dz-surface: #182240;
    --dz-surface-2: #1f2a48;
    --dz-surface-3: #2a3658;
    --dz-surface-hover: #1d2846;
    --dz-surface-glass: rgba(24, 34, 64, 0.92);
    --dz-line: #28324d;
    --dz-line-soft: #222b43;
    --dz-input-border: #35415f;
    --dz-input-border-hover: #4a587a;
    --dz-control-border: #4a5775;
    --dz-ink-strong: #f2f5fa;
    --dz-ink: #e6eaf3;
    --dz-text: #d0d6e2;
    --dz-text-2: #c3ccdb;
    --dz-muted: #a3aec2;
    --dz-muted-2: #9aa6ba;
    --dz-faint: #7c879c;
    --dz-faint-2: #8794a9;
    --dz-shadow-rgb: 0, 0, 0;
    --dz-tooltip-bg: #e6eaf3;
    --dz-tooltip-fg: #0f1527;
    --dz-scrim: rgba(8, 12, 26, 0.62);

    --dz-danger: #e7505a;
    --dz-danger-text: #ff8a85;
    --dz-danger-text-strong: #ffa09b;
    --dz-danger-fill-strong: #c73f36;
    --dz-danger-soft: #3a1f24;
    --dz-danger-soft-2: #4a262c;
    --dz-danger-line: #6b2f36;
    --dz-success-soft: #163626;
    --dz-success-text: #6fd49a;
    --dz-warn-soft: #3a2d14;
    --dz-warn-text: #f0b85a;
    --dz-info-soft: #232b4d;
    --dz-info-soft-2: #2a3360;
    --dz-info-text: #aab6f0;
    --dz-info-text-strong: #c3ccf6;
    --dz-status-created-bg: #3a2d14;
    --dz-status-created-fg: #f0b85a;
    --dz-status-taken-bg: #16304a;
    --dz-status-taken-fg: #8fd0fa;
    --dz-status-ready-bg: #2c2650;
    --dz-status-ready-fg: #c3b4ff;
    --dz-status-delivered-bg: #163626;
    --dz-status-delivered-fg: #6fd49a;
    --dz-status-cancelled-bg: #3a1f24;
    --dz-status-cancelled-fg: #ff8a85;

    --dz-stat-plain-bg: linear-gradient(135deg, #182240 0%, #1b2749 100%);
    --dz-stat-money-bg: linear-gradient(135deg, #1e3f73 0%, #27367e 50%, #1b4474 100%);
    --dz-stat-money2-bg: linear-gradient(135deg, #2b2f74 0%, #25306a 50%, #1f3f72 100%);
    --dz-stat-money2-fg: #aab6f0;
    --dz-stat-cancel-bg: linear-gradient(135deg, #3a2028 0%, #3a2230 55%, #3a2a24 100%);
    --dz-stat-late-bg: linear-gradient(135deg, #3a3016 0%, #332d1d 55%, #3a2c1a 100%);
    --dz-stat-visual-bg: rgba(255, 255, 255, 0.1);

    --dz-nav-bg: #0b1020;
    --dz-nav-glass: rgba(11, 16, 32, 0.7);
    --dz-nav-fg: #e6ebef;
    --dz-nav-fg-muted: rgba(255, 255, 255, 0.55);
    --dz-nav-icon: #9aa4ad;
    --dz-nav-ctrl-bg: rgba(255, 255, 255, 0.06);
    --dz-nav-ctrl-border: rgba(255, 255, 255, 0.14);
    --dz-nav-ctrl-bg-hover: rgba(255, 255, 255, 0.14);
    --dz-nav-ctrl-border-hover: rgba(255, 255, 255, 0.28);
    --dz-nav-menu-bg: #1a2340;
    --dz-nav-menu-border: rgba(255, 255, 255, 0.12);
    --dz-nav-menu-fg: #cfd6db;
    --dz-nav-menu-hover: rgba(255, 255, 255, 0.08);
    --dz-nav-menu-shadow: rgba(0, 0, 0, 0.35);
    --dz-nav-danger-fg: #ff8fa5;
    --dz-nav-danger-fg-hover: #ffa5b6;
    --dz-nav-danger-bg: rgba(217, 61, 94, 0.16);
    --dz-nav-danger-border: rgba(217, 61, 94, 0.45);
    --dz-nav-danger-bg-hover: rgba(217, 61, 94, 0.3);
    --dz-nav-danger-border-hover: rgba(217, 61, 94, 0.8);

    --sidebar-bg: #182240;            /* the menu panel takes the cards' navy, inside a frame of the content box's tone */
    --sidebar-accent: #5aa9e0;
    --dz-side-line: transparent;
    --dz-side-foot-line: rgba(255, 255, 255, 0.08);
    --dz-side-fg: #aab4c8;
    --dz-side-icon: #7d89a3;
    --dz-side-hover-bg: rgba(255, 255, 255, 0.06);
    --dz-side-hover-fg: #ffffff;
    --dz-side-active-bg: rgba(90, 169, 224, 0.16);
    --dz-side-active-fg: #ffffff;
    --dz-side-scroll: rgba(255, 255, 255, 0.18);
    --dz-side-scroll-hover: rgba(255, 255, 255, 0.32);

    --dz-auth-bg:
        /* the landing hero's periwinkle (#6f94f7), darkened and kept low, warms the lower right; the top left stays near black */
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(61, 177, 245, 0.07), transparent 60%),
        radial-gradient(ellipse 75% 65% at 100% 100%, rgba(111, 148, 247, 0.10), transparent 62%),
        linear-gradient(160deg, #0b1020 0%, #0f1634 45%, #182251 78%, #10173a 100%);
    --dz-auth-card-bg: #1b2648;
    --dz-auth-card-border: rgba(255, 255, 255, 0.06);
    --dz-auth-card-shadow: rgba(0, 0, 0, 0.55);
    --dz-auth-card-highlight: rgba(255, 255, 255, 0.04);
    --dz-auth-input-bg: rgba(255, 255, 255, 0.07);
    --dz-auth-input-bg-focus: rgba(255, 255, 255, 0.1);
    --dz-auth-input-border: rgba(255, 255, 255, 0.16);
    --dz-auth-input-border-hover: rgba(255, 255, 255, 0.28);
    --dz-auth-autofill-bg: #2b3555;   /* the card (#1b2648) under the field's 7% white: autofilled fields match the rest */
}

/* The ground behind everything follows the mode (overscroll areas included); native controls and
   scrollbars render dark in dark mode, except inside a legacy module, whose content stays light. */
html {
    background: var(--dz-body-bg);
}
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] #master-content:not(:empty):not(:has(link[href*="admin-ui.css"])) {
    color-scheme: light;
}

/* Scrollbars as macOS draws them: a thin rounded thumb on a clear track, no arrow buttons, nothing drawn when
   nothing scrolls. Only where the system draws the classic bar (Windows, Linux, macOS set to always show them): the
   head script of each page sets html.dz-thin-scrollbars when a scrollbar takes room, so macOS's overlay bars stay
   native. Firefox takes the standard properties. Chromium ignores an element's ::-webkit-scrollbar styles once it
   sets scrollbar-width / scrollbar-color, so there they go back to auto (modules set them for Firefox); the bars a
   module hides keep their ::-webkit-scrollbar { display: none }, and its own thumb sizes and colors still apply. */
html.dz-thin-scrollbars {
    --dz-scrollbar-thumb: rgba(var(--dz-shadow-rgb), 0.28);
    --dz-scrollbar-thumb-hover: rgba(var(--dz-shadow-rgb), 0.48);
}
html.dz-thin-scrollbars[data-theme="dark"] {
    --dz-scrollbar-thumb: rgba(230, 234, 243, 0.22);   /* the dark ink (#e6eaf3) */
    --dz-scrollbar-thumb-hover: rgba(230, 234, 243, 0.4);
}
/* a legacy module keeps its light content in dark mode, so its bars keep the light thumb */
html.dz-thin-scrollbars[data-theme="dark"] #master-content:not(:empty):not(:has(link[href*="admin-ui.css"])) {
    --dz-scrollbar-thumb: rgba(31, 60, 90, 0.28);       /* the light --dz-shadow-rgb */
    --dz-scrollbar-thumb-hover: rgba(31, 60, 90, 0.48);
}
@supports not selector(::-webkit-scrollbar) {
    html.dz-thin-scrollbars,
    html.dz-thin-scrollbars * {
        scrollbar-width: thin;
        scrollbar-color: var(--dz-scrollbar-thumb) transparent;
    }
}
@supports selector(::-webkit-scrollbar) {
    html.dz-thin-scrollbars,
    html.dz-thin-scrollbars * {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }
    html.dz-thin-scrollbars ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background: transparent;
    }
    html.dz-thin-scrollbars ::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
    html.dz-thin-scrollbars ::-webkit-scrollbar-track,
    html.dz-thin-scrollbars ::-webkit-scrollbar-corner {
        background: transparent;
    }
    /* a 6px thumb inside the 12px gutter (the transparent border is the gap), 8px under the pointer */
    html.dz-thin-scrollbars ::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 999px;
        background-color: var(--dz-scrollbar-thumb);
        background-clip: padding-box;
    }
    html.dz-thin-scrollbars ::-webkit-scrollbar-thumb:vertical { min-height: 32px; }
    html.dz-thin-scrollbars ::-webkit-scrollbar-thumb:horizontal { min-width: 32px; }
    html.dz-thin-scrollbars ::-webkit-scrollbar-thumb:hover,
    html.dz-thin-scrollbars ::-webkit-scrollbar-thumb:active {
        border-width: 2px;
        background-color: var(--dz-scrollbar-thumb-hover);
    }
}

/* The logos are white PNGs: in light mode they are tinted to the brand navy (#2d3a8b) with a filter
   chain, so the same assets serve both modes. */
html:not([data-theme="dark"]) .page-header .page-logo img,
html:not([data-theme="dark"]) .page-lock .page-logo img {
    filter: brightness(0) saturate(100%) invert(22%) sepia(25%) saturate(4220%) hue-rotate(215deg) brightness(86%) contrast(93%);
}

/* =====================================================================
   Brand accent on Metronic's teal (#32c5d2 / #36c6d3) utilities, as used by the legacy modules:
   solid and outline "green" buttons, the default checkbox and radio marks, the underline inputs,
   success labels and badges, line tabs. Same selectors as components-rounded.min.css, loaded later,
   so only the colors change.
   ===================================================================== */
.btn.green:not(.btn-outline) {
    color: #fff;
    background-color: var(--dz-accent);
    border-color: var(--dz-accent);
}
.btn.green:not(.btn-outline).active,
.btn.green:not(.btn-outline):active,
.btn.green:not(.btn-outline):hover,
.btn.green:not(.btn-outline).focus,
.btn.green:not(.btn-outline):focus,
.open > .btn.green:not(.btn-outline).dropdown-toggle {
    color: #fff;
    background-color: var(--dz-accent-hover);
    border-color: var(--dz-accent-hover);
}
.btn.green:not(.btn-outline).disabled,
.btn.green:not(.btn-outline).disabled.focus,
.btn.green:not(.btn-outline).disabled:focus,
.btn.green:not(.btn-outline).disabled:hover,
.btn.green:not(.btn-outline)[disabled],
.btn.green:not(.btn-outline)[disabled].focus,
.btn.green:not(.btn-outline)[disabled]:focus,
.btn.green:not(.btn-outline)[disabled]:hover {
    background-color: var(--dz-accent);
    border-color: var(--dz-accent);
}
.btn.green:not(.btn-outline) .badge {
    color: var(--dz-accent);
    background-color: #fff;
}
.btn.btn-outline.green {
    border-color: var(--dz-accent);
    color: var(--dz-accent);
}
.btn.btn-outline.green.active,
.btn.btn-outline.green:active,
.btn.btn-outline.green:active:focus,
.btn.btn-outline.green:active:hover,
.btn.btn-outline.green:focus,
.btn.btn-outline.green:hover {
    border-color: var(--dz-accent);
    color: #fff;
    background-color: var(--dz-accent);
}
.md-checkbox label > .check {
    border-color: var(--dz-accent);
}
.md-radio label > .check {
    background: var(--dz-accent);
}
.form-md-checkboxes.has-success label,
.form-md-radios.has-success label,
.has-success .input-icon > i,
.icon-state-success,
.text-success {
    color: var(--dz-accent);
}
.badge-success,
.label-success {
    background-color: var(--dz-accent);
}
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after,
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after,
.form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .form-control-focus:after,
.form-group.form-md-line-input .form-control.focus:not([readonly]) ~ label:after,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after {
    background: var(--dz-accent);
}
.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .help-block,
.form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .help-block,
.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .help-block {
    color: var(--dz-accent-text);
}
.tabbable-line > .nav-tabs > li.active {
    border-bottom-color: var(--dz-accent);
}
.portlet.box.green > .portlet-title,
.portlet.green,
.portlet > .portlet-body.green,
.dashboard-stat.green {
    background-color: var(--dz-accent);
}
.progress-bar.green,
.bg-green,
.bg-after-green:after,
.bg-before-green:before,
.bg-hover-green:hover {
    background: var(--dz-accent) !important;
}
.font-green {
    color: var(--dz-accent) !important;
}
.form-control.green,
.form-control.focus-green:focus,
.border-green,
.border-after-green:after,
.border-before-green:before {
    border-color: var(--dz-accent) !important;
}

/* =====================================================================
   Dark mode for the redesigned modules: what their stylesheets inherit from Bootstrap, Metronic,
   DataTables, chosen and the pickers (white surfaces, near-black text, gray chevrons drawn as data
   URIs) is repainted here. Scoped to #master-content while a redesigned module is loaded, and to the
   body-level popups those modules open.
   ===================================================================== */
html[data-theme="dark"] #master-content.page-content:has(link[href*="admin-ui.css"]) {
    color: var(--dz-text); /* the ground color itself is set for both modes in panel.css */
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .table,
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .dz-table-wrap .table {
    color: var(--dz-text);
}
/* Metronic and Bootstrap text utilities pin their color with !important (the chart titles carry .font-dark) */
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .font-dark {
    color: var(--dz-ink) !important;
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .text-muted {
    color: var(--dz-muted-2) !important;
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .modal-content {
    background: var(--dz-surface);
    color: var(--dz-text);
    border-color: var(--dz-line);
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .chosen-container .chosen-search input[type="text"],
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .chosen-container .chosen-drop {
    background-color: var(--dz-surface);
    color: var(--dz-ink);
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .chosen-container .chosen-results li {
    color: var(--dz-ink);
}
html[data-theme="dark"] #master-content:has(link[href*="admin-ui.css"]) .chosen-container-single .chosen-single {
    color: var(--dz-ink);
}
/* chevrons: the light stylesheets draw them with a #5b6b7b stroke; a lighter stroke on dark fields */
html[data-theme="dark"] :is(#master-content, .dz-modal) .dz-select,
html[data-theme="dark"] #master-content .dz-table-wrap .dt-container .dt-length select,
html[data-theme="dark"] #master-content .reports-filters select.form-control,
html[data-theme="dark"] #master-content .promo-payments .payments-dropdown-btn {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3aec2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] #master-content .promo-filter .chosen-container-single .chosen-single div b {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3aec2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 8px no-repeat !important;
}
/* calendar and clock popups (appended to <body> by the plugins) while a redesigned module is open */
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker.dropdown-menu,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .bootstrap-timepicker-widget.dropdown-menu {
    background: var(--dz-surface);
    color: var(--dz-ink);
}
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr th {
    color: var(--dz-ink);
}
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td.old,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td.new,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td.disabled,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td span.old,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td span.new {
    color: var(--dz-faint);
}
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr th:hover,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker table tr td span:hover,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker .datepicker-switch:hover,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker .prev:hover,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker .next:hover {
    background: var(--dz-surface-2);
}
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker.dropdown-menu::before,
html[data-theme="dark"]:has(#master-content link[href*="admin-ui.css"]) .datepicker.dropdown-menu::after {
    border-bottom-color: var(--dz-surface);
}
/* the time picker's steppers and digits are drawn with tokens in admin-ui.css, for both modes */

/* ===== Loader (App.blockUI / App.unblockUI) =====
   Shared by the panel and the auth pages (both load theme.css). Markup comes from Metronic's app.js: a page overlay plus a message layer holding
   .loading-message(.loading-message-boxed) > img(gif) + span(text). Only looks change here.
   The overlay fades its inline opacity between 0 and 0.1, too faint to carry a scrim, so it is made
   transparent (it still catches clicks and shows the wait cursor) and the scrim is drawn by the message
   layer instead, which jQuery fades between 0 and 1: the scrim enters and leaves with that same fade. */
.blockUI.blockOverlay.blockPage,
body > .blockUI.blockOverlay {
  background-color: transparent !important;
}

/* scrim: the page washes toward the ground color, so it reads as paused rather than darkened */
.blockUI.blockMsg.blockPage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(var(--dz-accent-rgb), 0.12), transparent 70%),
    var(--dz-scrim);
}

/* indeterminate bar along the top edge of the window: a repeating band (two per width) that slides exactly one
   tile per cycle at constant speed, so the loop has no seam; it runs over a faint track that keeps the line whole */
.blockUI.blockMsg.blockPage::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background:
    linear-gradient(90deg, transparent, var(--dz-electric), var(--dz-accent-2), transparent),
    linear-gradient(rgba(var(--dz-accent-rgb), 0.14), rgba(var(--dz-accent-rgb), 0.14));
  background-repeat: repeat-x, no-repeat;
  background-size: 50% 100%, 100% 100%;
  animation: dz-loader-bar 1s linear infinite;
}

/* the message itself: brand spinner plus the text, centred in its layer */
.blockUI .loading-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 6px;
  color: var(--dz-ink) !important; /* Metronic pins it to black with !important */
  animation: dz-loader-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* the grey GIF is replaced by a drawn spinner (the img stays in the markup) */
.blockUI .loading-message > img {
  display: none;
}

.blockUI .loading-message:not(:has(.block-spinner-bar))::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--dz-accent-rgb), 0) 0 12%, var(--dz-electric) 60%, var(--dz-accent-2));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: dz-loader-spin 0.75s linear infinite;
}

/* "LOADING..." or the caller's message; the leading &nbsp;&nbsp; is absorbed by the negative margin */
.blockUI .loading-message > span {
  margin-left: -6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 20px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* boxed: the same pair on a raised card */
.blockUI .loading-message.loading-message-boxed {
  padding: 14px 22px 14px 18px;
  border: 1px solid var(--dz-line);
  border-radius: 14px;
  background: var(--dz-surface);
  box-shadow: 0 18px 48px rgba(var(--dz-shadow-rgb), 0.18), 0 2px 6px rgba(var(--dz-shadow-rgb), 0.08);
}

.blockUI .loading-message.loading-message-boxed::before {
  width: 24px;
  height: 24px;
}

/* element blocks (App.blockUI({ target })): no page scrim, a brand tint at the overlay's own opacity */
.blockUI.blockOverlay:not(.blockPage) {
  background-color: var(--dz-navy) !important;
}

@keyframes dz-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes dz-loader-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* with a 50% tile, 100% of position is one tile width: the last frame matches the first */
@keyframes dz-loader-bar {
  from { background-position: 0 0, 0 0; }
  to { background-position: 100% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blockUI .loading-message { animation: none; }
  .blockUI .loading-message:not(:has(.block-spinner-bar))::before { animation-duration: 1.6s; }
  .blockUI.blockMsg.blockPage::after { animation: none; background-size: 100% 100%; opacity: 0.6; }
}

/* ===== Order status pill =====
   One look for the status of an order in every table (orders report, cancellations, Meal Plan detail, DiDi
   reports). Markup comes from util/order-status-pill.js: span.dz-status.dz-status--{created|taken|ready|delivered|
   cancelled}; the key comes from OrderStatusModel.keyOf. A dot in the text color leads the label. */
.dz-status {
  --dz-status-bg: var(--dz-surface-2);
  --dz-status-fg: var(--dz-muted-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: var(--dz-status-bg);
  color: var(--dz-status-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.dz-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dz-status--created { --dz-status-bg: var(--dz-status-created-bg); --dz-status-fg: var(--dz-status-created-fg); }
.dz-status--taken { --dz-status-bg: var(--dz-status-taken-bg); --dz-status-fg: var(--dz-status-taken-fg); }
.dz-status--ready { --dz-status-bg: var(--dz-status-ready-bg); --dz-status-fg: var(--dz-status-ready-fg); }
.dz-status--delivered { --dz-status-bg: var(--dz-status-delivered-bg); --dz-status-fg: var(--dz-status-delivered-fg); }
.dz-status--cancelled { --dz-status-bg: var(--dz-status-cancelled-bg); --dz-status-fg: var(--dz-status-cancelled-fg); }

/* =====================================================================
   Light mode, soft layers (the mirror of dark): a cool neutral ground, a lighter content box, and white
   cards on top that carry no border, only a wide diffuse shadow and a generous radius. Fields are filled
   and borderless at rest (they turn white with the accent ring when focused), so a form reads as soft
   wells on a white card. The brand blue is kept for the accents. Legacy modules keep their white box.
   ===================================================================== */
html:not([data-theme="dark"]) #master-content.page-content:not(:empty):not(:has(link[href*="admin-ui.css"])) {
    background: #ffffff;
}
html:not([data-theme="dark"]) #master-content.page-content { box-shadow: none; } /* no hairline: the step in tone frames it */
html:not([data-theme="dark"]) #master-content .dz-card,
html:not([data-theme="dark"]) #master-content .reports-output, /* the reports' results frame: a table wrap that sits on the content box like the filters card above it */
html:not([data-theme="dark"]) #master-content :is(.dz-panel, .users-list).portlet, /* .users-list: the users table, the panel's first version */
html:not([data-theme="dark"]) #master-content .menu-picklist {
    border-color: transparent !important; /* the panels pin their border with !important against Metronic */
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 28, 45, 0.04), 0 18px 40px -20px rgba(20, 28, 45, 0.16);
}
/* filled fields: native inputs and selects, and the themed selects (Virtual Select copies the select's classes
   onto its outer <div>: that square wrapper is left out, its inner toggle button is the field) */
html:not([data-theme="dark"]) :is(#master-content, .dz-modal) :is(.dz-input, .dz-select):not(.vscomp-ele),
html:not([data-theme="dark"]) .dz-vselect .vscomp-toggle-button {
    border-color: transparent;
    border-radius: 10px;
    background-color: var(--dz-surface-2);
}
html:not([data-theme="dark"]) :is(#master-content, .dz-modal) :is(.dz-input, .dz-select):not(.vscomp-ele):hover,
html:not([data-theme="dark"]) .dz-vselect .vscomp-toggle-button:hover {
    border-color: transparent;
    background-color: var(--dz-surface-3);
}
html:not([data-theme="dark"]) :is(#master-content, .dz-modal) :is(.dz-input, .dz-select):not(.vscomp-ele):focus,
html:not([data-theme="dark"]) .vscomp-wrapper.dz-vselect:not(.closed) .vscomp-toggle-button,
html:not([data-theme="dark"]) .vscomp-wrapper.dz-vselect.closed:focus-visible .vscomp-toggle-button {
    border-color: var(--dz-accent);
    background-color: var(--dz-surface);
}
/* the picked options as tags (showValueAsTags): on the gray filled field the soft accent tint (#e8f2fb) all but
   vanished, so they are a white layer with a fine accent edge, which also keeps them apart once the open field
   turns white */
html:not([data-theme="dark"]) .dz-vselect.show-value-as-tags .vscomp-value-tag {
    background: var(--dz-surface);
    box-shadow: inset 0 0 0 1px var(--dz-accent-soft-2), 0 1px 2px rgba(20, 28, 45, 0.06);
}
html:not([data-theme="dark"]) .dz-vselect.show-value-as-tags .vscomp-value-tag-clear-button:hover { background: var(--dz-accent-soft); }
html:not([data-theme="dark"]) .vscomp-ele[disabled] .dz-vselect.show-value-as-tags .vscomp-value-tag {
    background: var(--dz-surface);
    box-shadow: inset 0 0 0 1px var(--dz-line);
}
/* the same filled fields in the table toolbars (page size and search) */
html:not([data-theme="dark"]) #master-content .dz-table-wrap .dt-container :is(.dt-search input, .dt-length select) {
    border-color: transparent;
    border-radius: 10px;
    background-color: var(--dz-surface-2);
}
html:not([data-theme="dark"]) #master-content .dz-table-wrap .dt-container :is(.dt-search input, .dt-length select):hover {
    border-color: transparent;
    background-color: var(--dz-surface-3);
}
html:not([data-theme="dark"]) #master-content .dz-table-wrap .dt-container :is(.dt-search input, .dt-length select):focus {
    border-color: var(--dz-accent);
    background-color: var(--dz-surface);
}
/* side menu (both modes): the frame takes the content box's tone and holds the options on a panel of the
   cards' tone (white in light, the card navy in dark) inside a small inset, so the menu reads like the
   module next to it. Same width as before; the list and the version line shrink by the inset. */
html .app-sidebar {
    padding: 8px;
    background: var(--dz-content-bg);
}
/* the options sit 8px from every edge of the panel, the same inset as the panel inside the frame:
   2px padding plus the 6px scrollbar gutter reserved on both sides, and 8px above and below */
html .app-sidebar .navbar-nav {
    flex: 0 1 auto; /* as tall as its options; it scrolls only when they do not fit */
    padding: 8px 2px;
    border-radius: 8px;
    background: var(--sidebar-bg);
}
html .app-sidebar .navbar-nav::after { bottom: -8px; }
html .app-sidebar::after {
    margin-top: auto; /* the version stays at the foot of the frame when the options are shorter than it */
    padding: 10px 6px 2px;
    border-top: 0;
}
@media (min-width: 769px) {
    html .app-sidebar { box-shadow: none; } /* the frame is told by its tone; the phone drawer keeps its shadow */
    html .app-sidebar .navbar-nav,
    html .app-sidebar::after { width: calc(var(--sidebar-width) - 16px); }
    /* the inset animates with the width when the menu collapses, so nothing jumps */
    html .app-sidebar {
        transition: width var(--sidebar-time) var(--sidebar-ease), margin var(--sidebar-time) var(--sidebar-ease), padding var(--sidebar-time) var(--sidebar-ease), opacity 0.18s ease 0.08s, visibility 0s linear 0s;
    }
    html body.sidebar-closed .app-sidebar {
        padding: 0;
        transition: width var(--sidebar-time) var(--sidebar-ease), margin var(--sidebar-time) var(--sidebar-ease), padding var(--sidebar-time) var(--sidebar-ease), opacity 0.18s ease 0.06s, visibility 0s linear var(--sidebar-time);
    }
}
/* Main frames (side menu frame and content box).
   Light: a translucent white veil instead of a solid gray. Over the ground it lands on a light gray
   (#edf1f7 at the middle of the window, a step below the white cards) and lets the ground's hues through,
   a bit bluer toward the foot. The
   ground is fixed to the window, so no backdrop-filter is needed (nothing moves behind the veil). The phone
   drawer stays solid (it opens over the content), and so does a legacy module's white box.
   Both modes: a subtle reflection, a soft gloss falling from the top-left corner and a 1px light rim along the
   top and left edges. Only background-color / background-image and box-shadow change. The dashboard has no
   box (its cards float on the ground), so it is left out. */
html {
    /* the ground under the frames is near white at the top and bluer below, so an even veil read solid up there:
       the veil itself is lighter (0.42) and the sheen adds white toward the foot (up to 0.18), so the frame is
       about as see-through at the top as at the bottom */
    --dz-frame-veil: rgba(255, 255, 255, 0.42);
    /* light: only a hint of gloss in the corner, so the top of the frames is as see-through as the rest (the stronger
       gloss and the white band along the top hid the ground and the network up there) */
    --dz-frame-sheen:
        radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.18) 100%);
    --dz-frame-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] {
    --dz-frame-sheen:
        radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.008) 38%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0, rgba(255, 255, 255, 0) 120px);
    --dz-frame-rim: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 1px 0 0 rgba(255, 255, 255, 0.02);
}
/* dark: the side menu's options panel has no line of its own (side-line is transparent in dark), so where the
   frame's gloss lightens the corner its edge faded into the frame; a faint outline and the same top rim keep it */
html[data-theme="dark"] .app-sidebar .navbar-nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}
html:not([data-theme="dark"]) #master-content.page-content:not(:has(.dash-heading)) { background-color: var(--dz-frame-veil); }
html #master-content.page-content:not(:has(.dash-heading)) { background-image: var(--dz-frame-sheen); }
html:not([data-theme="dark"]) #master-content.page-content:not(:has(.dash-heading)) { box-shadow: var(--dz-frame-rim); }
html[data-theme="dark"] #master-content.page-content:not(:has(.dash-heading)) { box-shadow: var(--dz-frame-rim), inset 0 0 0 1px var(--dz-side-line); }
html .app-sidebar { background-image: var(--dz-frame-sheen); }
@media (min-width: 769px) {
    html:not([data-theme="dark"]) .app-sidebar { background-color: var(--dz-frame-veil); }
    html .app-sidebar { box-shadow: var(--dz-frame-rim); }
}

/* The network on the ground (public/javascripts/dz-network.js): a fixed canvas under everything, first in <body>
   at z-index 0, so the page that follows it (positioned, with no z-index of its own, so dialogs are not trapped in
   a new stacking context) paints over it. It shows through the translucent header, side menu and content box, and
   around the dashboard cards; cards cover it. */
#dz-network {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}
.wrapper,
.page-lock {
    position: relative;
}
/* The module heading over the network: the net itself fades out around the title and its icon (data-clear on the
   canvas in panel.ejs), and the icon tile gets a soft brand-blue glow under its shadow */
html #master-content .dz-heading-icon {
    box-shadow: 0 4px 12px rgba(var(--dz-accent-rgb), 0.28), 0 0 24px 2px rgba(var(--dz-accent-rgb), 0.24);
}
/* dark: the content box and the side-menu frame are solid; with the network behind them they turn slightly
   translucent (as the light veils already are), so it reads through them. A loaded legacy module keeps its solid
   white box, and the phone drawer stays solid (it opens over the content) */
@media (min-width: 769px) {
    html[data-theme="dark"] body:has(#dz-network) #master-content.page-content:is(:empty, :has(link[href*="admin-ui.css"])):not(:has(.dash-heading)),
    html[data-theme="dark"] body:has(#dz-network) .app-sidebar {
        background-color: rgba(17, 26, 46, 0.78); /* --dz-content-bg (#111a2e) */
    }
}

/* light: the ground is a gradient fixed to the window: light gray behind the header, a soft blue below it */
html:not([data-theme="dark"]) body {
    background: var(--dz-body-gradient);
    background-attachment: fixed; /* every layer, glows included (in the shorthand it would bind the last one only) */
}
/* only while the dashboard is on screen (every other module keeps the ground above) */
html:not([data-theme="dark"]) body:has(#master-content .dash-heading) { background-image: var(--dz-body-gradient-dash); }
/* light: a stronger frosted header (more blur and color under the translucent ground) */
@media (min-width: 769px) {
    html:not([data-theme="dark"]) .wrapper > .page-header::before {
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
    }
}
/* light: the loading veil blurs the page behind it and glows with both brand blues */
html:not([data-theme="dark"]) .blockUI.blockMsg.blockPage::before {
    background:
        radial-gradient(ellipse 55% 42% at 46% 40%, rgba(var(--dz-accent-rgb), 0.24), transparent 70%),
        radial-gradient(ellipse 45% 38% at 58% 52%, rgba(111, 148, 247, 0.2), transparent 70%),
        var(--dz-scrim);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
}
/* light: the pale brand blues fade on the pale veil, so the top bar runs deeper (navy into accent), on a firmer
   track, a pixel thicker and with a glow that follows the band */
html:not([data-theme="dark"]) .blockUI.blockMsg.blockPage::after {
    height: 4px;
    background-image:
        linear-gradient(90deg, transparent, var(--dz-navy), var(--dz-accent), var(--dz-electric), transparent),
        linear-gradient(rgba(45, 58, 139, 0.16), rgba(45, 58, 139, 0.16));
    filter: drop-shadow(0 1px 4px rgba(var(--dz-accent-rgb), 0.55));
}
/* light: what sits on the tone box or on the blue ground (not inside a white card) takes deeper colors, since
   the soft grays of the white cards fade on them */
html:not([data-theme="dark"]) .copyright { color: var(--dz-muted-2); } /* footer on the deep end of the ground: readable, a step under the content */
html:not([data-theme="dark"]) #master-content .reports-tabs .nav-link { color: var(--dz-text-2); }
html:not([data-theme="dark"]) #master-content .reports-tabs .nav-link:hover,
html:not([data-theme="dark"]) #master-content .reports-tabs .nav-link.active { color: var(--dz-ink-strong); }
html:not([data-theme="dark"]) #master-content .dz-back {
    background: var(--dz-surface);
    color: var(--dz-text-2);
    box-shadow: 0 1px 2px rgba(20, 28, 45, 0.06), 0 4px 12px -6px rgba(20, 28, 45, 0.18);
}
/* soft buttons on the box (the menu's "Descargar todo el Menú"): the same tint one step deeper, so they keep
   standing off the tone box; inside a white card they keep their lighter tint */
html:not([data-theme="dark"]) #master-content .dz-btn-soft:not(:is(.dz-card, .dz-panel, .users-list, .modal) .dz-btn-soft) {
    background: var(--dz-accent-soft-2);
    color: var(--dz-accent-text-strong);
}
html:not([data-theme="dark"]) #master-content .dz-btn-soft:not(:is(.dz-card, .dz-panel, .users-list, .modal) .dz-btn-soft):hover {
    background: var(--dz-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--dz-accent-rgb), 0.28);
}
/* light: the dashboard floats its cards on the ground itself (it has no content box), so on that screen the
   ground keeps a lighter top and middle, closer to the pale gray it was designed on, and only deepens toward
   the foot; the band behind the header melts into it without a visible step */
html:not([data-theme="dark"]) body:has(#master-content .dash-heading) {
    background: var(--dz-body-glow), linear-gradient(180deg, #eef2f9 0, #eef2f9 36px, #e9eef7 84px, #e3e9f3 55%, #cdd7eb 100%);
    background-attachment: fixed;
}
/* the small section titles of a form card carry the logo navy instead of gray (10:1) */
html:not([data-theme="dark"]) #master-content .reports-filters .reports-group-title { color: var(--dz-navy); }
@media (max-width: 767px) {
    /* phones: the cards are edge-to-edge sheets, square and flat */
    html:not([data-theme="dark"]) #master-content .dz-card,
    html:not([data-theme="dark"]) #master-content .reports-output,
    html:not([data-theme="dark"]) #master-content :is(.dz-panel, .users-list).portlet,
    html:not([data-theme="dark"]) #master-content .menu-picklist { border-radius: 0; box-shadow: none; }
}