/*! Enterprise APEX UI Kit 0.7.0 | ek-core.css | built 2026-10-23 | APEX 26.1 Universal Theme (Iris) */
/* ===================================================================
   Enterprise APEX UI Kit — 05-fonts.css (0.6.0)
   Inter variable font, served from your own workspace (no external
   request, CSP-safe). SIL Open Font License — see fonts/Inter-OFL-LICENSE.txt.
   Upload the two .woff2 files to Static Workspace Files in the directory
   uikit/<version>/fonts so these relative URLs resolve next to ek-core.css.
   =================================================================== */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*!
 * Enterprise APEX UI Kit — Design Tokens
 * File:    00-tokens.css
 * Version: 0.7.0
 * Target:  Oracle APEX 26.1.x · Universal Theme 26.1 · Iris theme style
 *
 * This file defines tokens only. It styles no element, so it is safe to
 * load in any application without visible change. Stage 3 adds
 * 10-ut-mapping.css, which connects these tokens to Universal Theme.
 *
 * Rules
 *  1. Every kit token uses the --ek- prefix.
 *  2. Brand comes from five INPUT tokens (section 1). Everything else is derived.
 *     An app rebrands by overriding only those five (dist/brand/ek-brand-template.css).
 *  3. Theme selection, in priority order:
 *       <html data-ek-theme="dark">   → dark
 *       <html data-ek-theme="light">  → light
 *       no attribute                  → follows the operating system
 *     ek-theme.js (Stage 3) sets the attribute and keeps tab iframes in sync.
 *  4. The DARK block appears twice (media query + attribute). Both copies
 *     must stay identical — tools/check_tokens.py fails the build otherwise.
 *  5. No physical directions (left/right) — tokens are valid for LTR and RTL.
 *
 * Contrast (WCAG 2.2, verified with tools/check_tokens.py — see DESIGN-SPEC §3):
 *  all text pairs ≥ 4.5:1, control borders ≥ 3:1, in both themes.
 */

/* ===================================================================
   1. BRAND INPUTS — the only block an application normally overrides
   =================================================================== */
:root {
  --ek-build:        "r55";   /* kit build stamp, compared by ek-theme.js */
  --ek-brand:        #0071e3;   /* primary actions, links, selection */
  --ek-success-base: #16743f;
  --ek-warning-base: #945300;
  --ek-danger-base:  #c42b1c;
  --ek-info-base:    #0b6aa2;
}

/* ===================================================================
   2. LIGHT THEME (default)
   =================================================================== */
:root {
  /* ---- DEFAULTS (light) — used when the user has saved nothing ----------
     Keep in step with DEFAULTS in ek-theme.js and in the EK_THEME_CSS process.
     --ek-brand        = deepened version used for TEXT (white text >= 4.6:1)
     --ek-brand-fill   = the accent exactly as picked (buttons, bars, notch)
     --ek-on-brand-auto= text on the fill (#ffffff or #000000, whichever reads)
     --ek-press-to     = hover/pressed mixes toward this (opposite of the text) */
  --ek-brand:          #db3405;   /* readable version of #ff3d06 */
  --ek-brand-fill:     #ff3d06;
  --ek-on-brand-auto:  #000000;
  --ek-press-to:       #ffffff;

  color-scheme: light;

  /* Surfaces */
  --ek-bg:                  #ffffff;  /* page background                 */
  --ek-surface:             #ffffff;  /* regions, cards, dialogs         */
  --ek-surface-raised:      #ffffff;  /* menus, popovers (uses shadow)   */
  --ek-surface-sunken:      #f6f7f9;  /* table headers, read-only fields */
  --ek-surface-hover:       #f3f4f7;  /* row / menu-item hover           */
  --ek-surface-selected:    var(--ek-brand-subtle);

  /* Lines */
  --ek-border:              #e8e9ee;  /* dividers, region outlines (decorative) */
  --ek-border-strong:       #8e8e93;  /* form-control borders — 3:1 required    */

  /* Text */
  --ek-text:                #1d1d1f;
  --ek-text-muted:          #48484d;  /* labels, secondary text   */
  --ek-text-subtle:         #5f5f64;  /* help text, placeholders  */
  --ek-text-disabled:       #a1a1a6;  /* exempt from contrast     */

  /* Brand — derived */
  --ek-brand-solid:         var(--ek-brand-fill, var(--ek-brand));  /* filled primary button: the colour as picked */
  --ek-brand-text:          color-mix(in oklab, var(--ek-brand) 88%, #000);  /* links: a touch deeper, like Apple's #0066cc */
  --ek-brand-hover:         color-mix(in oklab, var(--ek-brand-solid) 86%, var(--ek-press-to, #000));   /* lighter instead when the text on it is dark */
  --ek-brand-active:        color-mix(in oklab, var(--ek-brand-solid) 74%, var(--ek-press-to, #000));
  --ek-brand-subtle:        color-mix(in oklab, var(--ek-brand) 10%, var(--ek-surface));
  --ek-brand-subtle-border: color-mix(in oklab, var(--ek-brand) 30%, var(--ek-surface));
  --ek-on-brand:            var(--ek-on-brand-auto, #ffffff);   /* white or dark, whichever reads on the fill */

  /* Status — foreground (text/icons) and tinted background */
  --ek-success:             var(--ek-success-base);
  --ek-warning:             var(--ek-warning-base);
  --ek-danger:              var(--ek-danger-base);
  --ek-info:                var(--ek-info-base);
  --ek-success-subtle:      color-mix(in oklab, var(--ek-success-base) 10%, var(--ek-surface));
  --ek-warning-subtle:      color-mix(in oklab, var(--ek-warning-base) 12%, var(--ek-surface));
  --ek-danger-subtle:       color-mix(in oklab, var(--ek-danger-base) 10%, var(--ek-surface));
  --ek-info-subtle:         color-mix(in oklab, var(--ek-info-base) 10%, var(--ek-surface));
  --ek-on-status:           #ffffff;  /* text on solid status fills */

  /* Focus */
  --ek-focus-ring:          var(--ek-brand);
  --ek-focus-width:         2px;
  --ek-focus-offset:        2px;

  /* Elevation — restrained */
  --ek-shadow-1: 0 1px 2px rgb(0 0 0 / 0.04);
  --ek-shadow-2: 0 4px 16px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.04);
  --ek-shadow-3: 0 20px 48px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.06);
  --ek-overlay:  rgb(15 20 26 / 0.45);
  --ek-shadow-card: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 14px rgb(0 0 0 / 0.04);
  --ek-shadow-brand: 0 1px 2px color-mix(in oklab, var(--ek-brand) 35%, transparent);
  --ek-focus-halo: 0 0 0 3px color-mix(in oklab, var(--ek-brand) 22%, transparent);
  --ek-glass: color-mix(in oklab, var(--ek-bg) 72%, transparent);
  /* Liquid glass (0.7.0). --ek-fx = glass strength 0..1, set by the slider */
  --ek-fx:                0;      /* DEFAULT glass for light: 0 (flat) */
  --ek-hover-tint:        rgb(15 23 42 / 0.05);
  /* 0.7.0 rev. 9 — see-through tuning (all scale with the slider) */
  --ek-gloss:             min(var(--ek-fx), calc(1.517 - 1.167 * var(--ek-fx)));    /* reflections peak at 70, half at 100 */
  --ek-glass-bar:         rgb(255 255 255 / min(calc(1 - 0.85 * var(--ek-fx)), calc(1.35 * (1 - var(--ek-fx)))));  /* header: wallpaper shows */
  --ek-glass-menu:        rgb(255 255 255 / calc(1 - 0.40 * var(--ek-fx)));   /* popups/panels: never below 60% (readable) */
  --ek-field-bg:          rgb(255 255 255 / max(0.40, min(calc(1 - 0.62 * var(--ek-fx)), calc(1.887 * (1 - var(--ek-fx))))));
  --ek-halo:              rgb(255 255 255 / calc(0.85 * var(--ek-fx)));       /* soft glow behind text on clear glass */
  --ek-lift:              calc(1 + 0.10 * var(--ek-fx));                     /* light glass brightens what is behind it */
  --ek-overlay-dim:       rgb(15 20 40 / min(calc(0.32 - 0.14 * var(--ek-fx)), calc(0.74 * (1 - var(--ek-fx)))));

  /* Pillars (named after Oracle Redwood's pillar colours; kit's own tones,
     deep enough for white text at every glass level). Selected by setting
     --ek-pillar on <html>; when it is not set, every --ek-pillar-* token
     below is invalid and the normal look is used (var() fallbacks). */
  --ek-p-neutral: #3a3531;  --ek-p-slate: #33414f;  --ek-p-pebble: #463f38;  --ek-p-sienna: #6e321f;
  --ek-p-pine:    #264b39;  --ek-p-teal:  #184f54;  --ek-p-ocean:  #1f4266;  --ek-p-lilac:  #4c3e72;
  --ek-p-plum:    #5c304e;  --ek-p-rose:  #773243;
  --ek-pillar-glass:        color-mix(in srgb, var(--ek-pillar) calc(100% - 10% * var(--ek-fx)), transparent);
  --ek-pillar-sheen:        linear-gradient(180deg, color-mix(in srgb, var(--ek-pillar) 0%, rgb(255 255 255 / 0.10)), rgb(255 255 255 / 0) 55%);
  --ek-pillar-ink:          color-mix(in srgb, var(--ek-pillar) 0%, #ffffff);
  --ek-pillar-ink-muted:    color-mix(in srgb, var(--ek-pillar) 6%, #ffffff);
  --ek-pillar-ink-subtle:   color-mix(in srgb, var(--ek-pillar) 22%, #ffffff);
  --ek-pillar-tint:         color-mix(in srgb, var(--ek-pillar) 0%, rgb(255 255 255 / 0.10));
  --ek-pillar-bubble:       color-mix(in srgb, var(--ek-pillar) 0%, rgb(255 255 255 / 0.14));
  --ek-pillar-bubble-shadow: inset 0 1px 0 color-mix(in srgb, var(--ek-pillar) 0%, rgb(255 255 255 / 0.28)), 0 4px 12px rgb(0 0 0 / 0.18);
  --ek-pillar-guide:        color-mix(in srgb, var(--ek-pillar) 0%, rgb(255 255 255 / 0.30));
  --ek-pillar-moon:         color-mix(in srgb, var(--ek-pillar) 0%, #e3e6ff);

  --ek-glass-bg:          rgb(255 255 255 / min(calc(1 - 0.62 * var(--ek-fx)), calc(1.887 * (1 - var(--ek-fx)))));
  --ek-glass-bg-strong:   rgb(255 255 255 / min(calc(1 - 0.45 * var(--ek-fx)), calc(2.283 * (1 - var(--ek-fx)))));
  --ek-glass-border:      rgb(255 255 255 / calc(0.85 * var(--ek-fx)));
  --ek-glass-sheen:       linear-gradient(180deg, rgb(255 255 255 / calc(0.70 * var(--ek-gloss))) 0%, rgb(255 255 255 / 0) 38%, rgb(0 0 0 / calc(0.025 * var(--ek-gloss))) 100%);
  --ek-glass-specular:    radial-gradient(140% 90% at 25% -30%, rgb(255 255 255 / calc(0.95 * var(--ek-gloss))), transparent 55%);
  --ek-glass-highlight:   inset 1px 1px 0 rgb(255 255 255 / calc(0.95 * var(--ek-fx))), inset -1px -1px 0 rgb(255 255 255 / calc(0.35 * var(--ek-fx))), inset 0 0 18px rgb(255 255 255 / calc(0.35 * var(--ek-fx)));
  --ek-glass-shadow:      0 1px 2px rgb(0 0 0 / calc(0.04 * var(--ek-fx))), 0 10px 30px rgb(30 40 70 / calc(0.10 * var(--ek-fx)));
  --ek-page-texture:      none;
  /* Liquid "bubble" shown on hover (menu items, buttons, links) */
  --ek-bubble-bg:         rgb(255 255 255 / calc(0.55 + 0.4 * var(--ek-fx)));
  --ek-bubble-shadow:     inset 0 1px 0 rgb(255 255 255 / calc(1 * var(--ek-fx))), inset 0 0 0 1px rgb(0 0 0 / calc(0.06 * var(--ek-fx))), 0 6px 16px rgb(0 0 0 / calc(0.10 * var(--ek-fx))), 0 1px 3px rgb(0 0 0 / calc(0.06 * var(--ek-fx)));
  /* Wallpapers behind the liquid glass (chosen in Display settings) */
  --ek-wall-none: none;
  --ek-wall-mist: radial-gradient(70vw 60vh at 10% 0%, #eef2fb, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #f7eff7, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #ecf7f3, transparent 70%),
                          #f6f7fa;
  --ek-wall-aurora: radial-gradient(70vw 60vh at 10% 0%, #e3ebff, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #f1e4ff, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #def6ee, transparent 70%),
                          #f5f7fc;
  --ek-wall-ocean: radial-gradient(70vw 60vh at 10% 0%, #dcefff, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #e0f6ff, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #e8eeff, transparent 70%),
                          #f3f9fd;
  --ek-wall-sunset: radial-gradient(70vw 60vh at 10% 0%, #ffe6da, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #ffe2ee, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #fff3d9, transparent 70%),
                          #fff9f5;
  --ek-wall: var(--ek-wall-none);   /* DEFAULT wallpaper for light: none */
}

/* ===================================================================
   3. DARK THEME — copy A: operating system prefers dark
   =================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-ek-theme="light"]) {
    /* EK-DARK-BEGIN */
    /* ---- DEFAULTS (dark) — keep in step with ek-theme.js / EK_THEME_CSS ---- */
    --ek-brand:          #7f7400;   /* readable version of #c0b000 */
    --ek-brand-fill:     #c0b000;
    --ek-on-brand-auto:  #000000;
    --ek-press-to:       #ffffff;
    --ek-fx:             0;          /* DEFAULT glass for dark: 0 (flat) */
    --ek-wall:           var(--ek-wall-none);
    color-scheme: dark;
    --ek-bg:                  #052159;
    --ek-surface:             #0a2a68;
    --ek-surface-raised:      #10357d;
    --ek-surface-sunken:      #041b4c;
    --ek-surface-hover:       #0d3074;
    --ek-border:              #1d438c;
    --ek-border-strong:       #6f8cc8;
    --ek-text:                #ffffff;
    --ek-text-muted:          #d6e0f5;
    --ek-text-subtle:         #b8c8e8;
    --ek-text-disabled:       #5f78ab;
    --ek-brand-text:          color-mix(in oklab, var(--ek-brand) 32%, #fff);
    --ek-brand-hover:         color-mix(in oklab, var(--ek-brand-solid) 88%, #fff);
    --ek-brand-active:        color-mix(in oklab, var(--ek-brand-solid) 78%, #fff);
    --ek-brand-subtle:        color-mix(in oklab, var(--ek-brand) 20%, var(--ek-surface));
    --ek-brand-subtle-border: color-mix(in oklab, var(--ek-brand) 40%, var(--ek-surface));
    --ek-success:             color-mix(in oklab, var(--ek-success-base) 30%, #fff);
    --ek-warning:             color-mix(in oklab, var(--ek-warning-base) 30%, #fff);
    --ek-danger:              color-mix(in oklab, var(--ek-danger-base) 30%, #fff);
    --ek-info:                color-mix(in oklab, var(--ek-info-base) 30%, #fff);
    --ek-success-subtle:      color-mix(in oklab, var(--ek-success-base) 20%, var(--ek-surface));
    --ek-warning-subtle:      color-mix(in oklab, var(--ek-warning-base) 20%, var(--ek-surface));
    --ek-danger-subtle:       color-mix(in oklab, var(--ek-danger-base) 20%, var(--ek-surface));
    --ek-info-subtle:         color-mix(in oklab, var(--ek-info-base) 20%, var(--ek-surface));
    --ek-focus-ring:          var(--ek-brand-text);
    --ek-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --ek-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45);
    --ek-shadow-3: 0 12px 28px rgb(0 0 0 / 0.55);
    --ek-overlay:  rgb(0 0 0 / 0.60);
    --ek-shadow-card: 0 1px 2px rgb(1 10 35 / 0.40), 0 8px 24px rgb(1 10 35 / 0.35);
    --ek-shadow-brand: none;
    --ek-focus-halo: 0 0 0 3px color-mix(in oklab, var(--ek-brand-text) 30%, transparent);
      --ek-glass: color-mix(in oklab, var(--ek-bg) 72%, transparent);
    --ek-hover-tint:        rgb(255 255 255 / 0.08);
    --ek-glass-bar:         rgb(10 42 104 / min(calc(1 - 0.80 * var(--ek-fx)), calc(1.47 * (1 - var(--ek-fx)))));
    --ek-glass-menu:        rgb(10 42 104 / calc(1 - 0.35 * var(--ek-fx)));
    --ek-field-bg:          rgb(10 42 104 / max(0.40, min(calc(1 - 0.55 * var(--ek-fx)), calc(2.05 * (1 - var(--ek-fx))))));
    --ek-halo:              rgb(5 33 89 / calc(0.85 * var(--ek-fx)));
    --ek-lift:              calc(1 - 0.12 * var(--ek-fx));

    --ek-glass-bg:          rgb(10 42 104 / min(calc(1 - 0.55 * var(--ek-fx)), calc(2.05 * (1 - var(--ek-fx)))));
    --ek-glass-bg-strong:   rgb(10 42 104 / min(calc(1 - 0.40 * var(--ek-fx)), calc(2.4 * (1 - var(--ek-fx)))));
    --ek-glass-border:      rgb(255 255 255 / calc(0.18 * var(--ek-fx)));
    --ek-glass-sheen:       linear-gradient(180deg, rgb(255 255 255 / calc(0.10 * var(--ek-gloss))) 0%, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / calc(0.03 * var(--ek-gloss))) 100%);
    --ek-glass-specular:    radial-gradient(140% 90% at 25% -30%, rgb(255 255 255 / calc(0.18 * var(--ek-gloss))), transparent 55%);
    --ek-glass-highlight:   inset 1px 1px 0 rgb(255 255 255 / calc(0.28 * var(--ek-fx))), inset -1px -1px 0 rgb(255 255 255 / calc(0.08 * var(--ek-fx))), inset 0 0 18px rgb(255 255 255 / calc(0.06 * var(--ek-fx)));
    --ek-glass-shadow:      0 12px 32px rgb(1 10 35 / calc(0.45 * var(--ek-fx))), 0 1px 3px rgb(1 10 35 / 0.30);
    --ek-page-texture:      none;
    --ek-bubble-bg:         rgb(255 255 255 / calc(0.06 + 0.08 * var(--ek-fx)));
    --ek-bubble-shadow:     inset 0 1px 0 rgb(255 255 255 / calc(0.22 * var(--ek-fx))), inset 0 0 0 1px rgb(255 255 255 / calc(0.08 * var(--ek-fx))), 0 8px 20px rgb(0 0 0 / calc(0.35 * var(--ek-fx)));
    --ek-wall-mist: radial-gradient(70vw 60vh at 10% 0%, #0e2c6c, transparent 70%),
                            radial-gradient(60vw 55vh at 95% 15%, #1a2a66, transparent 70%),
                            radial-gradient(70vw 60vh at 60% 105%, #0b3552, transparent 70%),
                            #052159;
    --ek-wall-aurora: radial-gradient(70vw 60vh at 10% 0%, #1c3c9c, transparent 70%),
                            radial-gradient(60vw 55vh at 95% 15%, #33208a, transparent 70%),
                            radial-gradient(70vw 60vh at 60% 105%, #08566b, transparent 70%),
                            #052159;
    --ek-wall-ocean: radial-gradient(70vw 60vh at 10% 0%, #0a3f92, transparent 70%),
                            radial-gradient(60vw 55vh at 95% 15%, #06507c, transparent 70%),
                            radial-gradient(70vw 60vh at 60% 105%, #0b2f7c, transparent 70%),
                            #041c4d;
    --ek-wall-sunset: radial-gradient(70vw 60vh at 10% 0%, #4a2272, transparent 70%),
                            radial-gradient(60vw 55vh at 95% 15%, #5e1f50, transparent 70%),
                            radial-gradient(70vw 60vh at 60% 105%, #1f2f7a, transparent 70%),
                            #0b1a4f;
    /* EK-DARK-END */
  }
}

/* ===================================================================
   3. DARK THEME — copy B: explicitly chosen by the user
   =================================================================== */
:root[data-ek-theme="dark"] {
  /* EK-DARK-BEGIN */
  /* ---- DEFAULTS (dark) — keep in step with ek-theme.js / EK_THEME_CSS ---- */
  --ek-brand:          #7f7400;   /* readable version of #c0b000 */
  --ek-brand-fill:     #c0b000;
  --ek-on-brand-auto:  #000000;
  --ek-press-to:       #ffffff;
  --ek-fx:             0;          /* DEFAULT glass for dark: 0 (flat) */
  --ek-wall:           var(--ek-wall-none);
  color-scheme: dark;
  --ek-bg:                  #052159;
  --ek-surface:             #0a2a68;
  --ek-surface-raised:      #10357d;
  --ek-surface-sunken:      #041b4c;
  --ek-surface-hover:       #0d3074;
  --ek-border:              #1d438c;
  --ek-border-strong:       #6f8cc8;
  --ek-text:                #ffffff;
  --ek-text-muted:          #d6e0f5;
  --ek-text-subtle:         #b8c8e8;
  --ek-text-disabled:       #5f78ab;
  --ek-brand-text:          color-mix(in oklab, var(--ek-brand) 32%, #fff);
  --ek-brand-hover:         color-mix(in oklab, var(--ek-brand-solid) 88%, #fff);
  --ek-brand-active:        color-mix(in oklab, var(--ek-brand-solid) 78%, #fff);
  --ek-brand-subtle:        color-mix(in oklab, var(--ek-brand) 20%, var(--ek-surface));
  --ek-brand-subtle-border: color-mix(in oklab, var(--ek-brand) 40%, var(--ek-surface));
  --ek-success:             color-mix(in oklab, var(--ek-success-base) 30%, #fff);
  --ek-warning:             color-mix(in oklab, var(--ek-warning-base) 30%, #fff);
  --ek-danger:              color-mix(in oklab, var(--ek-danger-base) 30%, #fff);
  --ek-info:                color-mix(in oklab, var(--ek-info-base) 30%, #fff);
  --ek-success-subtle:      color-mix(in oklab, var(--ek-success-base) 20%, var(--ek-surface));
  --ek-warning-subtle:      color-mix(in oklab, var(--ek-warning-base) 20%, var(--ek-surface));
  --ek-danger-subtle:       color-mix(in oklab, var(--ek-danger-base) 20%, var(--ek-surface));
  --ek-info-subtle:         color-mix(in oklab, var(--ek-info-base) 20%, var(--ek-surface));
  --ek-focus-ring:          var(--ek-brand-text);
  --ek-shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
  --ek-shadow-2: 0 2px 6px rgb(0 0 0 / 0.45);
  --ek-shadow-3: 0 12px 28px rgb(0 0 0 / 0.55);
  --ek-overlay:  rgb(0 0 0 / 0.60);
  --ek-shadow-card: 0 1px 2px rgb(1 10 35 / 0.40), 0 8px 24px rgb(1 10 35 / 0.35);
  --ek-shadow-brand: none;
  --ek-focus-halo: 0 0 0 3px color-mix(in oklab, var(--ek-brand-text) 30%, transparent);
    --ek-glass: color-mix(in oklab, var(--ek-bg) 72%, transparent);
  --ek-hover-tint:        rgb(255 255 255 / 0.08);
  --ek-glass-bar:         rgb(10 42 104 / min(calc(1 - 0.80 * var(--ek-fx)), calc(1.47 * (1 - var(--ek-fx)))));
  --ek-glass-menu:        rgb(10 42 104 / calc(1 - 0.35 * var(--ek-fx)));
  --ek-field-bg:          rgb(10 42 104 / max(0.40, min(calc(1 - 0.55 * var(--ek-fx)), calc(2.05 * (1 - var(--ek-fx))))));
  --ek-halo:              rgb(5 33 89 / calc(0.85 * var(--ek-fx)));
  --ek-lift:              calc(1 - 0.12 * var(--ek-fx));

  --ek-glass-bg:          rgb(10 42 104 / min(calc(1 - 0.55 * var(--ek-fx)), calc(2.05 * (1 - var(--ek-fx)))));
  --ek-glass-bg-strong:   rgb(10 42 104 / min(calc(1 - 0.40 * var(--ek-fx)), calc(2.4 * (1 - var(--ek-fx)))));
  --ek-glass-border:      rgb(255 255 255 / calc(0.18 * var(--ek-fx)));
  --ek-glass-sheen:       linear-gradient(180deg, rgb(255 255 255 / calc(0.10 * var(--ek-gloss))) 0%, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / calc(0.03 * var(--ek-gloss))) 100%);
  --ek-glass-specular:    radial-gradient(140% 90% at 25% -30%, rgb(255 255 255 / calc(0.18 * var(--ek-gloss))), transparent 55%);
  --ek-glass-highlight:   inset 1px 1px 0 rgb(255 255 255 / calc(0.28 * var(--ek-fx))), inset -1px -1px 0 rgb(255 255 255 / calc(0.08 * var(--ek-fx))), inset 0 0 18px rgb(255 255 255 / calc(0.06 * var(--ek-fx)));
  --ek-glass-shadow:      0 12px 32px rgb(1 10 35 / calc(0.45 * var(--ek-fx))), 0 1px 3px rgb(1 10 35 / 0.30);
  --ek-page-texture:      none;
  --ek-bubble-bg:         rgb(255 255 255 / calc(0.06 + 0.08 * var(--ek-fx)));
  --ek-bubble-shadow:     inset 0 1px 0 rgb(255 255 255 / calc(0.22 * var(--ek-fx))), inset 0 0 0 1px rgb(255 255 255 / calc(0.08 * var(--ek-fx))), 0 8px 20px rgb(0 0 0 / calc(0.35 * var(--ek-fx)));
  --ek-wall-mist: radial-gradient(70vw 60vh at 10% 0%, #0e2c6c, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #1a2a66, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #0b3552, transparent 70%),
                          #052159;
  --ek-wall-aurora: radial-gradient(70vw 60vh at 10% 0%, #1c3c9c, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #33208a, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #08566b, transparent 70%),
                          #052159;
  --ek-wall-ocean: radial-gradient(70vw 60vh at 10% 0%, #0a3f92, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #06507c, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #0b2f7c, transparent 70%),
                          #041c4d;
  --ek-wall-sunset: radial-gradient(70vw 60vh at 10% 0%, #4a2272, transparent 70%),
                          radial-gradient(60vw 55vh at 95% 15%, #5e1f50, transparent 70%),
                          radial-gradient(70vw 60vh at 60% 105%, #1f2f7a, transparent 70%),
                          #0b1a4f;
  /* EK-DARK-END */
}

/* ===================================================================
   4. THEME-INDEPENDENT SCALES
   =================================================================== */
:root {
  /* Typography — system stack. "Noto Sans Arabic" / system-ui give a
     native Arabic face when the app later runs in RTL. */
  --ek-font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI Variable Text", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --ek-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --ek-font-numeric: tabular-nums;   /* use with font-variant-numeric */

  --ek-text-xs:   0.75rem;    /* 12 — badges, meta, grid footers */
  --ek-text-sm:   0.8125rem;  /* 13 — table cells, help text     */
  --ek-text-md:   0.875rem;   /* 14 — body, controls (default)   */
  --ek-text-lg:   1rem;       /* 16 — region titles              */
  --ek-text-xl:   1.25rem;    /* 20 — page title                 */
  --ek-text-2xl:  1.5rem;     /* 24 — KPI values                 */

  --ek-leading-tight:  1.25;
  --ek-leading-normal: 1.5;

  --ek-weight-regular:  400;
  --ek-weight-medium:   500;
  --ek-weight-semibold: 600;

  /* Spacing — 4px base */
  --ek-space-0:  0;
  --ek-space-1:  0.25rem;  /*  4 */
  --ek-space-2:  0.5rem;   /*  8 */
  --ek-space-3:  0.75rem;  /* 12 */
  --ek-space-4:  1rem;     /* 16 */
  --ek-space-5:  1.25rem;  /* 20 */
  --ek-space-6:  1.5rem;   /* 24 */
  --ek-space-8:  2rem;     /* 32 */
  --ek-space-10: 2.5rem;   /* 40 */

  /* Radius */
  --ek-radius-sm:   8px;   /* inputs, badges, checkboxes */
  --ek-radius-md:   10px;  /* buttons, menus, tabs, nav items */
  --ek-radius-lg:   16px;  /* regions, cards, dialogs (Apple-style) */
  --ek-radius-pill: 999px; /* status pills only          */

  /* Controls */
  --ek-control-h-sm: 1.75rem;  /* 28 — compact forms, grid toolbars */
  --ek-control-h-md: 2rem;     /* 32 — default                      */
  --ek-control-h-lg: 2.5rem;   /* 40 — touch / primary CTA          */
  --ek-control-px:   var(--ek-space-3);
  --ek-target-min:   1.5rem;   /* 24 — WCAG 2.2 target-size floor   */

  /* Density — switched by .ek-density--compact (Stage 3) */
  --ek-density-row-y:   var(--ek-space-2);  /* report cell vertical padding */
  --ek-density-field-gap: var(--ek-space-4);

  /* Layout */
  --ek-content-max: 1600px;    /* readable max width for full-width pages */

  /* Motion */
  --ek-duration-fast: 120ms;
  --ek-duration-base: 180ms;
  --ek-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ek-duration-fast: 0ms;
    --ek-duration-base: 0ms;
  }
}

/* ===================================================================
   Enterprise APEX UI Kit — 10-ut-mapping.css
   Connects --ek-* tokens to the CSS variables Universal Theme 26.1 /
   Iris reads. This is the "automatic" layer: no page changes needed.

   WHY "html:root" AND NOT ":root"
   APEX loads a theme style's File URLs BEFORE the style's own compiled
   CSS (verified in the page head: 00-tokens.css comes before
   files/theme/42/…/29711496557175081.css). Iris declares its variables
   on :root, so a plain :root here would lose. "html:root" has
   specificity (0,1,1) vs (0,1,0) and wins regardless of load order,
   without !important.

   Variable names come from Universal Theme 26.1 Iris.min.css. Iris also
   declares some variables on component classes (for example
   .t-Button--hot, .t-TreeNav--styleA); those are handled in
   20-components.css with matching scope.
   =================================================================== */

html:root {
  /* ---- Palette ------------------------------------------------------- */
  --ut-palette-primary:          var(--ek-brand-solid);
  --ut-palette-primary-contrast: var(--ek-on-brand);
  --ut-palette-primary-shade:    var(--ek-brand-subtle);
  --ut-palette-primary-text:     var(--ek-brand-text);

  --ut-palette-success:          var(--ek-success-base);
  --ut-palette-success-contrast: var(--ek-on-status);
  --ut-palette-success-shade:    var(--ek-success-subtle);
  --ut-palette-success-text:     var(--ek-success);

  --ut-palette-info:             var(--ek-info-base);
  --ut-palette-info-contrast:    var(--ek-on-status);
  --ut-palette-info-shade:       var(--ek-info-subtle);
  --ut-palette-info-text:        var(--ek-info);

  --ut-palette-warning:          var(--ek-warning-base);
  --ut-palette-warning-contrast: var(--ek-on-status);
  --ut-palette-warning-shade:    var(--ek-warning-subtle);
  --ut-palette-warning-text:     var(--ek-warning);

  --ut-palette-danger:           var(--ek-danger-base);
  --ut-palette-danger-contrast:  var(--ek-on-status);
  --ut-palette-danger-shade:     var(--ek-danger-subtle);
  --ut-palette-danger-text:      var(--ek-danger);

  /* ---- Global ---------------------------------------------------------- */
  --ut-link-text-color:     var(--ek-brand-text);
  --ut-focus-outline-color: var(--ek-focus-ring);
  --ut-shadow-sm:           var(--ek-shadow-1);
  --ut-shadow-md:           var(--ek-shadow-2);
  --ut-shadow-lg:           var(--ek-shadow-3);
  --ut-border-radius:       var(--ek-radius-md);
  --ut-border-radius-sm:    var(--ek-radius-sm);
  --ut-border-radius-md:    var(--ek-radius-md);
  --ut-border-radius-lg:    var(--ek-radius-lg);

  /* ---- Page body --------------------------------------------------------- */
  --ut-body-background-color:         var(--ek-bg);
  --ut-body-text-color:               var(--ek-text);
  --ut-body-title-background-color:   var(--ek-bg);
  --ut-body-title-text-color:         var(--ek-text);
  --ut-body-title-border-width:       0;
  --ut-body-title-box-shadow:         none;
  --ut-body-sidebar-background-color: var(--ek-surface);
  --ut-body-sidebar-text-color:       var(--ek-text);
  --ut-body-actions-background-color: var(--ek-surface);
  --ut-body-actions-text-color:       var(--ek-text);

  /* ---- Side navigation container ----------------------------------------- */
  --ut-body-nav-background-color:     var(--ek-surface);
  --ut-body-nav-text-color:           var(--ek-text-muted);
  --ut-body-nav-border-color:         var(--ek-border);
  --ut-body-nav-scrollbar-thumb-background-color: var(--ek-border-strong);
  --ut-body-nav-scrollbar-track-background-color: transparent;
  --ut-treeview-badge-background-color: var(--ek-surface-sunken);
  --ut-treeview-badge-text-color:       var(--ek-text-muted);

  /* ---- Header ------------------------------------------------------------ */
  --ut-header-background-color: var(--ek-surface);
  --ut-header-text-color:       var(--ek-text);
  --ut-header-border-color:     transparent;
  --ut-header-box-shadow:       none;
  --ut-header-menubar-background-color:            var(--ek-surface);
  --ut-header-menubar-item-text-color:             var(--ek-text-muted);
  --ut-header-menubar-item-current-background-color: var(--ek-brand-subtle);
  --ut-header-menubar-item-current-text-color:     var(--ek-brand-text);
  --ut-header-menubar-item-hover-background-color: var(--ek-surface-hover);
  --ut-header-menubar-item-hover-text-color:       var(--ek-text);
  --ut-header-menubar-item-border-color:           transparent;

  /* ---- Navigation tabs (top nav "tabs" style) ----------------------------- */
  --ut-navtabs-background-color:              var(--ek-surface);
  --ut-navtabs-text-color:                    var(--ek-text-muted);
  --ut-navtabs-item-active-background-color:  var(--ek-surface);
  --ut-navtabs-item-hover-background-color:   var(--ek-surface-hover);
  --ut-navtabs-item-active-highlight-color:   var(--ek-brand-text);
  --ut-navtabs-item-highlight-color:          var(--ek-border-strong);

  /* ---- Regions ---------------------------------------------------------- */
  --ut-region-background-color:        var(--ek-surface);
  --ut-region-text-color:              var(--ek-text);
  --ut-region-border-width:            1px;
  --ut-region-box-shadow:              none;
  --ut-region-header-background-color: var(--ek-surface);
  --ut-region-header-text-color:       var(--ek-text);
  --ut-region-header-border-color:     var(--ek-border);

  /* ---- Shared component surface (cards, regions, reports) ---------------- */
  --ut-component-background-color:           var(--ek-surface);
  --ut-component-border-color:               var(--ek-border);
  --ut-component-border-width:               1px;
  --ut-component-border-radius:              var(--ek-radius-lg);
  --ut-component-box-shadow:                 none;
  --ut-component-highlight-background-color: var(--ek-brand-subtle);
  --ut-component-toolbar-background-color:   var(--ek-surface);
  --ut-component-inner-border-color:         var(--ek-border);
  --ut-component-text-default-color:         var(--ek-text);
  --ut-component-text-title-color:           var(--ek-text);
  --ut-component-text-subtitle-color:        var(--ek-text-muted);
  --ut-component-text-muted-color:           var(--ek-text-subtle);
  --ut-component-icon-background-color:      var(--ek-brand-subtle);
  --ut-component-icon-color:                 var(--ek-brand-text);
  --ut-component-badge-background-color:     var(--ek-surface-sunken);
  --ut-component-badge-text-color:           var(--ek-text-muted);

  /* ---- Buttons (default) ------------------------------------------------- */
  --a-button-border-radius:           var(--ek-radius-md);
  --a-button-background-color:        var(--ek-surface);
  --a-button-text-color:              var(--ek-text);
  --a-button-border-color:            var(--ek-border-strong);
  --a-button-shadow:                  none;
  --a-button-hover-background-color:  var(--ek-surface-hover);
  --a-button-hover-border-color:      var(--ek-text-subtle);
  --a-button-hover-shadow:            none;
  --a-button-active-background-color: var(--ek-surface-sunken);
  --a-button-active-shadow:           none;
  --a-button-focus-background-color:  var(--ek-surface);
  --a-button-focus-border-color:      var(--ek-brand-text);
  --a-button-count-background-color:  var(--ek-brand-subtle);
  --a-button-count-text-color:        var(--ek-brand-text);

  /* ---- Form fields ------------------------------------------------------- */
  --ut-field-label-text-color:          var(--ek-text-muted);
  --ut-field-input-focus-icon-color:    var(--ek-brand-text);
  --a-field-input-background-color:     var(--ek-surface);
  --a-field-input-text-color:           var(--ek-text);
  --a-field-input-border-color:         var(--ek-border-strong);
  --a-field-input-border-radius:        var(--ek-radius-sm);
  --a-field-input-hover-background-color: var(--ek-surface);
  --a-field-input-focus-background-color: var(--ek-surface);
  --a-field-input-focus-border-color:   var(--ek-brand-text);

  /* ---- Alerts & breadcrumb ---------------------------------------------- */
  --ut-alert-box-shadow:                 none;
  --ut-alert-title-font-weight:          var(--ek-weight-semibold);
  --ut-breadcrumb-item-text-color:       var(--ek-text-muted);
  --ut-breadcrumb-item-active-text-color: var(--ek-text);
  --ut-breadcrumb-title-font-weight:     var(--ek-weight-semibold);

  /* ---- Menus (nav-bar menus, IR Actions menu, row menus) ---------------- */
  --a-menu-background-color:         var(--ek-surface-raised);
  --a-menu-text-color:               var(--ek-text);
  --a-menu-default-text-color:       var(--ek-text);
  --a-menu-accel-text-color:         var(--ek-text-subtle);
  --a-menu-focused-background-color: var(--ek-surface-hover);
  --a-menu-focused-text-color:       var(--ek-text);
  --a-menu-focused-accel-text-color: var(--ek-text-muted);
  --a-menu-border-color:             var(--ek-border);
  --a-menu-border-radius:            var(--ek-radius-md);
  --a-menu-sep-border-color:         var(--ek-border);
  --a-menu-callout-background-color: var(--ek-surface-raised);
  --a-menu-callout-border-color:     var(--ek-border);
  --a-menu-callout-shadow:           var(--ek-shadow-2);

  /* ---- Toolbars & report controls --------------------------------------- */
  --a-toolbar-background-color:      var(--ek-surface);
  --a-toolbar-border-color:          var(--ek-border);
  --a-toolbar-sep-border-color:      var(--ek-border);
  --a-report-controls-border-color:  var(--ek-border);
  --a-report-controls-cell-label-background-color: var(--ek-surface-sunken);
  --a-report-controls-cell-label-text-color:       var(--ek-text-muted);
  --a-report-controls-cell-label-border-color:     var(--ek-border);
  --a-report-controls-input-border-color:          var(--ek-border-strong);
  --a-report-controls-input-focus-border-color:    var(--ek-brand-text);

  /* ---- Interactive Grid (grid view) ------------------------------------- */
  --a-gv-background-color:                  var(--ek-surface);
  --a-gv-border-color:                      var(--ek-border);
  --a-gv-cell-border-color:                 var(--ek-border);
  --a-gv-header-background-color:           var(--ek-surface-sunken);
  --a-gv-header-cell-border-color:          var(--ek-border);
  --a-gv-row-hover-background-color:        var(--ek-surface-hover);
  --a-gv-inserted-background-color:         var(--ek-success-subtle);
  --a-gv-updated-background-color:          var(--ek-info-subtle);
  --a-gv-deleted-background-color:          var(--ek-danger-subtle);
  --a-gv-grandtotal-background-color:       var(--ek-surface-sunken);
  --a-gv-pagination-button-background-color: transparent;
  --a-gv-pagination-button-text-color:      var(--ek-text);
  --a-gv-pagination-button-hover-background-color: var(--ek-surface-hover);
  --a-gv-pagination-button-hover-text-color: var(--ek-text);
  --a-gv-nodata-message-text-color:         var(--ek-text-subtle);

  --ut-color-scheme: light;
}

/* Dark: tell Universal Theme and the browser (scrollbars, native date
   pickers, select menus) that the scheme is dark. Same two conditions as
   00-tokens.css. */
@media (prefers-color-scheme: dark) {
  html:root:not([data-ek-theme="light"]) { --ut-color-scheme: dark; color-scheme: dark; }
}
html:root[data-ek-theme="dark"] { --ut-color-scheme: dark; color-scheme: dark; }


/* ===================================================================
   Enterprise APEX UI Kit — 20-components.css (0.5.0 — 0.3.0 look restored)
   Rules that variables alone cannot reach. Every selector below was
   checked against real APEX 26.1 page markup (Sample Reporting app,
   Interactive Report page). Selectors start with "html body" to win
   over Universal Theme without !important.
   Only logical properties (inline/block) are used, so RTL works.
   =================================================================== */

/* ---- Buttons: Hot / Primary --------------------------------------------
   Iris declares its own --a-button-* values on .t-Button--hot, so the
   override must sit on the same class with higher specificity.        */
html body .t-Button--hot,
html body .t-Button--primary:not(.t-Button--simple) {
  --a-button-background-color:        var(--ek-brand-solid);
  --a-button-text-color:              var(--ek-on-brand);
  --a-button-border-color:            var(--ek-brand-solid);
  --a-button-hover-background-color:  var(--ek-brand-hover);
  --a-button-hover-border-color:      var(--ek-brand-hover);
  --a-button-active-background-color: var(--ek-brand-active);
  --a-button-focus-background-color:  var(--ek-brand-solid);
  --a-button-focus-border-color:      var(--ek-brand-solid);
}

/* Visible keyboard focus on everything clickable (WCAG 2.4.7). Fields keep
   Universal Theme's own focus border, now in the brand colour. */
html body :is(.t-Button, .a-Button, .t-Header-logo-link, .a-IRR-headerLink, .a-TreeView-label, a):focus-visible {
  outline: var(--ek-focus-width) solid var(--ek-focus-ring);
  outline-offset: var(--ek-focus-offset);
}

/* ---- Header ------------------------------------------------------------ */
/* Header: see 30-sidenav.css (no bottom line). */

/* ---- Side navigation: see 30-sidenav.css ---------------------------------- */

/* ---- Page title (breadcrumb bar) ---------------------------------------- */
html body .t-Body-title {
  background-color: var(--ek-bg);
  box-shadow: none;
}
html body .t-Breadcrumb-label {
  font-size: var(--ek-text-xl);
  font-weight: var(--ek-weight-semibold);
  color: var(--ek-text);
}

/* ---- Regions ------------------------------------------------------------ */
html body .t-Region:not(.t-Region--noUI) {
  border-radius: var(--ek-radius-lg);
}
html body .t-Region-title {
  font-size: var(--ek-text-lg);
  font-weight: var(--ek-weight-semibold);
  color: var(--ek-text);
}

/* ---- Interactive Report ---------------------------------------------------
   Selectors verified on the IR markup: .a-IRR-toolbar, .a-IRR-table,
   th.a-IRR-header, td.u-tR (right-aligned columns), .a-IRR-search-field. */
html body .t-IRR-region {
  background-color: var(--ek-surface);
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-radius-lg);
  overflow: hidden;            /* keeps the rounded corners on the table */
}
html body .a-IRR {
  background-color: var(--ek-surface);
  border: 0;
}
html body .a-IRR-toolbar {
  background-color: var(--ek-surface);
  border-block-end: 1px solid var(--ek-border);
}
html body .a-IRR-search-field {
  background-color: var(--ek-surface);
  color: var(--ek-text);
  border-color: var(--ek-border-strong);
}
html body .a-IRR-search-field:focus {
  border-color: var(--ek-brand-text);
  outline: var(--ek-focus-width) solid var(--ek-focus-ring);
  outline-offset: -1px;
}
html body .a-IRR-search-field::placeholder {
  color: var(--ek-text-subtle);
}
html body .a-IRR-table {
  background-color: var(--ek-surface);
  color: var(--ek-text);
}
html body .a-IRR-table th.a-IRR-header {
  background-color: var(--ek-surface-sunken);
  color: var(--ek-text-muted);
  font-size: var(--ek-text-sm);
  font-weight: var(--ek-weight-semibold);
  border-color: var(--ek-border);
}
html body .a-IRR-table th.a-IRR-header .a-IRR-headerLink {
  color: inherit;
}
html body .a-IRR-table th.a-IRR-header .a-IRR-headerLink:hover {
  color: var(--ek-text);
}
html body .a-IRR-table td {
  font-size: var(--ek-text-sm);
  color: var(--ek-text);
  border-color: var(--ek-border);
  padding-block: var(--ek-density-row-y);
}
html body .a-IRR-table tr:hover > td {
  background-color: var(--ek-surface-hover);
}
html body .a-IRR-table td.u-tR {
  font-variant-numeric: tabular-nums;   /* amounts line up */
}
html body .a-IRR-table td a {
  color: var(--ek-brand-text);
}
html body .a-IRR-pagination-label {
  color: var(--ek-text-muted);
  font-size: var(--ek-text-sm);
}

/* ---- Classic Report (t-Report) — same look as IR ------------------------- */
html body .t-Report-report th.t-Report-colHead {
  background-color: var(--ek-surface-sunken);
  color: var(--ek-text-muted);
  font-size: var(--ek-text-sm);
  font-weight: var(--ek-weight-semibold);
  border-color: var(--ek-border);
}
html body .t-Report-report td.t-Report-cell {
  font-size: var(--ek-text-sm);
  color: var(--ek-text);
  border-color: var(--ek-border);
}
html body .t-Report-report tr:hover > td.t-Report-cell {
  background-color: var(--ek-surface-hover);
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 640px) {
  html body .t-Breadcrumb-label { font-size: 1.125rem; }
}

/* ---- Opt-in utility classes ---------------------------------------------
   Add in Page Designer → (region / column) → Appearance → CSS Classes.   */

/* Status badge, e.g. in a report column's HTML Expression:
   <span class="ek-badge ek-badge--success">Paid</span>                    */
.ek-badge {
  display: inline-block;
  padding: 2px var(--ek-space-2);
  border-radius: var(--ek-radius-sm);
  font-size: var(--ek-text-xs);
  font-weight: var(--ek-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  background-color: var(--ek-surface-sunken);
  color: var(--ek-text-muted);
}
.ek-badge--success { background-color: var(--ek-success-subtle); color: var(--ek-success); }
.ek-badge--warning { background-color: var(--ek-warning-subtle); color: var(--ek-warning); }
.ek-badge--danger  { background-color: var(--ek-danger-subtle);  color: var(--ek-danger); }
.ek-badge--info    { background-color: var(--ek-info-subtle);    color: var(--ek-info); }

/* Zebra rows for an IR or Classic Report region (region CSS Classes). */
html body .ek-report--zebra .a-IRR-table tr:nth-child(even) > td,
html body .ek-report--zebra .t-Report-report tr:nth-child(even) > td {
  background-color: color-mix(in oklab, var(--ek-surface-sunken) 55%, var(--ek-surface));
}

/* Compact density for data-heavy pages (page or region CSS Classes). */
.ek-density--compact {
  --ek-density-row-y: var(--ek-space-1);
}

/* ---- Theme switch button (added by ek-theme.js into the navigation bar) -- */
html body .ek-theme-toggle .t-Icon {
  inline-size: 16px;
}

/* ===================================================================
   Enterprise APEX UI Kit — 30-sidenav.css (0.7.0)
   Shell (header, title bar) + side menu, in the style of the reference
   dashboard: no panel or border, icon tiles for
   sections, a guide line with dots for sub-pages, and ONE indicator (bar +
   tinted pill) on the page that is open.

   WHY "#t_TreeNav": Iris draws a highlight line on every row of the
   expanded section with selectors more specific than any class chain we
   used before (0.5–0.6), so it kept winning. An ID selector outranks any
   number of classes, so these rules win without !important.

   Markup verified on APEX 26.1 (Sample Reporting):
     #t_Body_nav.t-Body-nav > #t_TreeNav.t-TreeNav.a-TreeView > ul[role=group]
       > li.a-TreeView-node(--topLevel | --leaf)
           > div.a-TreeView-row(.is-selected/.is-hover)
           > span.a-TreeView-toggle
           > div.a-TreeView-content(.is-current/.is-current--top/.is-selected)
               > span.fa  > a.a-TreeView-label
           > ul[role=group]  (sub-pages)
     body.js-navExpanded while the menu is open.
   Geometry knob: --ek-nav-guide-x = horizontal centre of the section icons
   (measured ≈ 28px from your screenshot). Adjust here if the guide line
   does not sit under the icons.
   =================================================================== */

html:root {
  --ek-nav-guide-x: 28px;
  --ek-nav-guide:   color-mix(in oklab, var(--ek-text-subtle) 30%, transparent);
  --ek-nav-tile:    color-mix(in oklab, var(--ek-brand) 12%, transparent);

  /* One colour for page, header, title bar and menu */
  --ut-body-background-color:       var(--ek-bg);
  --ut-header-background-color:     var(--ek-bg);
  --ut-header-border-color:         transparent;
  --ut-header-box-shadow:           none;
  --ut-body-title-background-color: var(--ek-bg);
  --ut-body-title-border-width:     0;
  --ut-body-title-box-shadow:       none;
  --ut-body-nav-background-color:   transparent;
  --ut-body-nav-border-color:       transparent;
  --ut-body-nav-text-color:         var(--ek-text-muted);
}

/* ---- Typography ------------------------------------------------------------ */
html:root { --a-base-font-family: var(--ek-font-sans); }
html body {
  font-family: var(--ek-font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}
html body :is(h1, h2, h3, .t-Breadcrumb-label, .t-Region-title) { letter-spacing: -0.018em; }

/* ---- Header & title bar: no lines ------------------------------------------- */
html body .t-Header,
html body .t-Body-title {
  border: 0;
  box-shadow: none;
}
html body .t-Header-logo-link,
html body .t-Header-logo-link .apex-logo-text {
  color: var(--ek-text);
  font-weight: var(--ek-weight-semibold);
  letter-spacing: -0.02em;
}
html:root { background-color: var(--ek-bg); }

/* ===================================================================
   SIDE MENU
   =================================================================== */
#t_Body_nav {
  background: transparent;
  border: 0;
  box-shadow: none;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ek-text-subtle) 35%, transparent) transparent;
}
#t_TreeNav {
  background-color: transparent;
  color: var(--ek-text-muted);
}

/* 1. Remove every Iris row decoration (the blue "[" lines), all states. */
#t_TreeNav .a-TreeView-node,
#t_TreeNav .a-TreeView-row,
#t_TreeNav .a-TreeView-content,
#t_TreeNav ul {
  border: 0;
  box-shadow: none;
  outline: 0;
}
#t_TreeNav .a-TreeView-node::before,
#t_TreeNav .a-TreeView-node::after,
#t_TreeNav .a-TreeView-row::before,
#t_TreeNav .a-TreeView-row::after,
#t_TreeNav .a-TreeView-content::before,
#t_TreeNav .a-TreeView-content::after {
  border: 0;
  box-shadow: none;
  background: none;
}
#t_TreeNav .a-TreeView-row {
  background-color: transparent;
  transition: background-color var(--ek-duration-fast) var(--ek-ease);
}

/* 2. Text and icons */
#t_TreeNav .a-TreeView-content,
#t_TreeNav .a-TreeView-label {
  color: var(--ek-text-muted);
  font-weight: var(--ek-weight-medium);
}
#t_TreeNav .a-TreeView-content .fa,
#t_TreeNav .a-TreeView-toggle {
  color: var(--ek-text-subtle);
}

/* 3. Expanded menu: rounded items, section tiles, guide line.
   No panel, no label, no border (0.7.0 rev. 3). No vertical margins, so the
   menu never becomes taller than the window: the scrollbar appears only when
   the items really do not fit. */
#t_Body_nav { overflow-y: auto; }
#t_TreeNav { margin: 0; border: 0; box-shadow: none; box-sizing: border-box; padding-block: var(--ek-space-2); }
body.js-navExpanded #t_TreeNav .a-TreeView-row {
  margin-inline: var(--ek-space-2);
  inline-size: auto;
  border-radius: 12px;
}
/* Section icons as soft rounded tiles (box-shadow: no layout change) */
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .fa {
  color: var(--ek-brand-text);
  background-color: var(--ek-nav-tile);
  box-shadow: 0 0 0 7px var(--ek-nav-tile);
  border-radius: 3px;
}
/* Section that holds the open page: solid brand tile, white icon */
body.js-navExpanded #t_TreeNav .a-TreeView-content.is-current--top .fa {
  color: var(--ek-on-brand);
  background-color: var(--ek-brand-solid);
  box-shadow: 0 0 0 7px var(--ek-brand-solid), 0 6px 14px 4px color-mix(in oklab, var(--ek-brand) 30%, transparent);
}
#t_TreeNav .a-TreeView-content.is-current--top .a-TreeView-label {
  color: var(--ek-text);
  font-weight: var(--ek-weight-semibold);
}
/* Sub-pages: vertical guide line under the section icon */
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul {
  background-image: linear-gradient(var(--ek-nav-guide), var(--ek-nav-guide));
  background-repeat: no-repeat;
  background-size: 1px calc(100% - 16px);
  background-position: var(--ek-nav-guide-x) 8px;
}
/* ...with a dot for every sub-page */
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul .a-TreeView-content {
  background-image: radial-gradient(circle, var(--ek-nav-guide) 0 2.5px, transparent 3px);
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: calc(var(--ek-nav-guide-x) - 3.5px) 50%;
}

/* 4. Hover */
#t_TreeNav .a-TreeView-row.is-hover,
#t_TreeNav .a-TreeView-node > .a-TreeView-row:hover {
  background-color: var(--ek-hover-tint);
}
#t_TreeNav .a-TreeView-content.is-hover .a-TreeView-label {
  color: var(--ek-text);
}

/* 5. The open page — the ONLY item with a line: tinted pill + brand bar + dot.
   .ek-current is added by ek-theme.js when APEX marks the parent section
   instead of the page you are on (seen on the Cards page). */
#t_TreeNav.ek-has-current .a-TreeView-row.is-selected:not(.ek-current) {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
#t_TreeNav.ek-has-current .a-TreeView-content.is-selected:not(.ek-current) .a-TreeView-label {
  color: var(--ek-text);
}
#t_TreeNav .a-TreeView-row.ek-current,
#t_TreeNav .a-TreeView-row.is-selected {
  background-color: var(--ek-brand-subtle);
  background-image: linear-gradient(var(--ek-brand-solid), var(--ek-brand-solid));
  background-repeat: no-repeat;
  background-size: 3px 50%;
  background-position: 6px 50%;
}
#t_TreeNav .a-TreeView-content.ek-current .a-TreeView-label,
#t_TreeNav .a-TreeView-content.is-selected .a-TreeView-label,
#t_TreeNav .a-TreeView-content.is-current .a-TreeView-label {
  color: var(--ek-brand-text);
  font-weight: var(--ek-weight-semibold);
}
#t_TreeNav .a-TreeView-content.is-selected .fa,
#t_TreeNav .a-TreeView-content.is-current .fa {
  color: var(--ek-brand-text);
}
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul .a-TreeView-content.ek-current,
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul .a-TreeView-content.is-selected,
body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul .a-TreeView-content.is-current {
  background-image: radial-gradient(circle, var(--ek-brand-solid) 0 3px, transparent 3.5px);
}

#t_TreeNav .a-TreeView-label:focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 6. Right-to-left */
html[dir="rtl"] body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul {
  background-position: right var(--ek-nav-guide-x) top 8px;
}
html[dir="rtl"] body.js-navExpanded #t_TreeNav .a-TreeView-node--topLevel > ul .a-TreeView-content {
  background-position: right calc(var(--ek-nav-guide-x) - 3.5px) center;
}
html[dir="rtl"] #t_TreeNav .a-TreeView-row:is(.is-selected, .ek-current) {
  background-position: right 6px center;
}

/* ---- Smooth colour change while switching theme (300 ms, set by ek-theme.js) ---- */
html.ek-theme-animating,
html.ek-theme-animating * {
  transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.ek-theme-animating, html.ek-theme-animating * { transition: none !important; }
}

/* ===================================================================
   TOP MENU (0.7.0 rev. 8) — the same look as the side menu
   ===================================================================
   Covers the two Universal Theme top-menu list templates:
     Top Navigation Menu  → menu bar widget:  li.a-MenuBar-item(.is-current)
                                              > .a-MenuBar-label
     Top Navigation Tabs  → li.t-NavTabs-item(.is-active) > a.t-NavTabs-link
   Both sit in .t-Header-nav. ASSUMPTION: these class names come from
   APEX's documented menu widget / UT list templates; if your top menu
   uses a custom list template, send me its HTML and I'll map it.

   Same rules as the side menu:
     - same colour as the page, no bar, no borders, no Iris underline;
     - rounded items, soft hover;
     - the open page is the ONLY highlighted item: tinted pill + a short
       brand bar under the label (the side menu's bar, turned sideways);
     - liquid glass capsule + pop on hover when the glass effect is on.
   .ek-current is added by ek-theme.js if APEX marks nothing as current. */

/* ---- 1. Bar: same colour as the page, no lines ------------------------------- */
html:root body .t-Header-nav,
html:root body .t-Header-nav :is(.a-MenuBar, .a-MenuBar > ul, .t-NavTabs) {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}

/* ---- 2. Items: remove every Iris decoration, round them ------------------------ */
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item),
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-label, .t-NavTabs-link) {
  border: 0;
  box-shadow: none;
  outline: 0;
  background-color: transparent;
  background-image: none;
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item, .a-MenuBar-label, .t-NavTabs-link)::before,
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item, .a-MenuBar-label, .t-NavTabs-link)::after {
  border: 0;
  box-shadow: none;
  background: none;
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item) {
  border-radius: 12px;
  margin-inline: 2px;
  transition: background-color var(--ek-duration-fast) var(--ek-ease);
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-label, .t-NavTabs-link) {
  padding-inline: 14px;
  color: var(--ek-text-muted);
  font-weight: var(--ek-weight-medium);
  border-radius: 12px;
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-label, .t-NavTabs-link) .fa {
  color: var(--ek-text-subtle);
}

/* ---- 3. Hover / keyboard focus ------------------------------------------------- */
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item):is(:hover, .is-focused) {
  background-color: var(--ek-hover-tint);
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item):is(:hover, .is-focused) :is(.a-MenuBar-label, .t-NavTabs-link) {
  color: var(--ek-text);
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-label, .t-NavTabs-link):focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: 2px;
}

/* ---- 4. The open page: tinted pill + short brand bar underneath ------------------- */
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item.is-current, .t-NavTabs-item.is-active, .ek-current) {
  background-color: var(--ek-brand-subtle);
  background-image: linear-gradient(var(--ek-brand-solid), var(--ek-brand-solid));
  background-repeat: no-repeat;
  background-size: 18px 3px;
  background-position: 50% calc(100% - 3px);
}
html:root body .t-Header .t-Header-nav :is(.a-MenuBar-item.is-current, .t-NavTabs-item.is-active, .ek-current)
  :is(.a-MenuBar-label, .t-NavTabs-link, .fa) {
  color: var(--ek-brand-text);
  font-weight: var(--ek-weight-semibold);
}

/* ---- 5. Liquid glass (glass effect on) ----------------------------------------------- */
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item) {
  transition: transform 380ms var(--ek-spring), background-color 160ms ease, box-shadow 200ms ease;
}
/* open page: clear glass capsule + bar */
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav :is(.a-MenuBar-item.is-current, .t-NavTabs-item.is-active, .ek-current) {
  background-color: var(--ek-bubble-bg);
  background-image: linear-gradient(var(--ek-brand-solid), var(--ek-brand-solid)), var(--ek-glass-specular);
  background-size: 18px 3px, 100% 100%;
  background-position: 50% calc(100% - 3px), 0 0;
  box-shadow: var(--ek-bubble-shadow);
}
/* hover: glass bubble that pops */
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item):is(:hover, .is-focused) {
  background-color: var(--ek-bubble-bg);
  box-shadow: var(--ek-bubble-shadow);
}
/* Pop (scale) only on items WITHOUT a drop-down: APEX renders the drop-down
   inside its menu bar item, so scaling the item would scale and shift the
   open menu too. */
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav .t-NavTabs-item:hover,
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav .a-MenuBar-item:not(.is-expanded, .a-Menu--split, :has(.a-Menu)):hover {
  transform: scale(1.04);
}
html:root:not([data-ek-fx="off"]) body .t-Header .t-Header-nav :is(.a-MenuBar-item:not(.is-current), .t-NavTabs-item:not(.is-active)):not(.ek-current):is(:hover, .is-focused) {
  background-image: var(--ek-glass-specular);
}
/* if ek-theme.js found the open page itself, stop highlighting a stale item */
html:root body .t-Header .t-Header-nav.ek-has-current :is(.a-MenuBar-item.is-current, .t-NavTabs-item.is-active):not(.ek-current):not(:hover) {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  html:root body .t-Header-nav :is(.a-MenuBar-item, .t-NavTabs-item) { transform: none !important; }
}

/* ---- 6. Top menu switched on at run time (body.apex-top-nav), e.g. by the
   Navigation Position Switcher plugin: no shadow or line under the header,
   whatever the plugin version. (1,x,x) specificity so it also beats the old
   plugin's inline glossy CSS without !important. ------------------------- */
html body.apex-top-nav :is(.t-Header, .t-Header-branding, .t-Header-nav, .a-MenuBar):not(#ek_x) {
  box-shadow: none;
  border-bottom: 0;
}
html body.apex-top-nav .t-Header:not(#ek_x) {
  background-image: var(--ek-pillar-sheen, none), var(--ek-glass-specular);
}
html body.apex-top-nav .t-Header-branding:not(#ek_x)::before,
html body.apex-top-nav .t-Header-branding:not(#ek_x)::after {
  content: none;
}
html body.apex-top-nav .a-MenuBar-item:not(#ek_x) { filter: none; }

/* ---- 7. Drop-down notch in the accent colour ---------------------------------
   ek-theme.js adds .ek-drop to a drop-down (.a-Menu) opened from the header
   menu bar and sets --ek-notch-x to the centre of the item that opened it.
   Only .a-Menu elements: dialogs and other popups never get the notch. */
html body .a-Menu.ek-drop:not(#ek_x) {
  overflow: visible;
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
}
html body .a-Menu.ek-drop:not(#ek_x)::before {
  content: "";
  position: absolute;
  inset: -6px auto auto calc(var(--ek-notch-x, 24px) - 7px);
  inline-size: 14px;
  block-size: 14px;
  border: 0;
  border-radius: 3px 0 0 0;
  background: var(--ek-brand-solid);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}
/* The accent line along the top edge, following the rounded corners. Drawn
   as its own layer ABOVE the drop-down content: an inset shadow was hidden
   whenever the inner panel (.a-Menu-content) kept a background of its own.
   (This also replaces the old plugin's white ::after notch.) */
html body .a-Menu.ek-drop:not(#ek_x)::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  block-size: 16px;
  border: 0;
  border-block-start: 2px solid var(--ek-brand-solid);
  border-radius: 14px 14px 0 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 2;
}

/* Sub-menus (opened from an item of a drop-down): no accent line on top; the
   notch sits on the side facing the item it was opened from, at that item's
   height (--ek-notch-y, set by ek-theme.js). */
html body .a-Menu.ek-drop.ek-drop-sub:not(#ek_x)::after {
  content: none;
  display: none;
}
html body .a-Menu.ek-drop.ek-drop-sub:not(#ek_x)::before {
  inset: calc(var(--ek-notch-y, 24px) - 7px) auto auto auto;
}
html body .a-Menu.ek-drop.ek-drop-r:not(#ek_x)::before {
  right: -6px;
  transform: rotate(135deg);
}
html body .a-Menu.ek-drop.ek-drop-l:not(#ek_x)::before {
  left: -6px;
  transform: rotate(-45deg);
}

/* ---- 8. Header menu bar items as compact pills (36px), not full header height */
html:root body .t-Header .t-Header-nav .a-MenuBar-item:not(#ek_x) {
  align-self: center;
  block-size: auto;
  margin-block: 0;
}
html:root body .t-Header .t-Header-nav .a-MenuBar-item:not(#ek_x) > .a-MenuBar-label {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-block: 0;
  line-height: 20px;
}

/* ---- 9. Drop-downs: ONE glass card. Universal Theme draws an inner panel
   (own background, radius, shadow) inside .a-Menu; make it transparent so
   only the outer glass card shows. Also undo the old plugin's inner rounding. */
html body .a-Menu:not(#ek_x) :is(.a-Menu-content, .a-Menu-inner) {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
html body .a-Menu:not(#ek_x) .a-Menu-item { border-radius: 10px; }


/* ---- 10. Live APEX 26.1 menu bar (markup verified on the live page):
     li.a-MenuBar-item > div.a-Menu.a-Menu--top > .a-Menu-content > ul > li.a-Menu-item > .a-Menu-inner
   The drop-down is INSIDE the header, where its own background resolves to
   transparent, so it gets the glass card explicitly here. */
/* Near-solid frosted fill: the header already has a backdrop blur, and a
   blur nested inside it cannot see the page below, so a see-through
   drop-down would show the page text unblurred. */
html body .t-Header .a-Menu:not(#ek_x) {
  background-color: color-mix(in srgb, var(--ek-surface) 95%, transparent);
  background-image: var(--ek-glass-specular);
  border: 1px solid var(--ek-glass-border);
  border-radius: 14px;
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  color: var(--ek-text);
  transform: none;
}
html body .t-Header .a-Menu.ek-drop:not(#ek_x) {
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
}
html body .t-Header .a-Menu:not(#ek_x) .a-Menu-item:is(.is-focused, :hover) > .a-Menu-inner {
  background-color: var(--ek-hover-tint);
}
/* Header branding row: no solid white, so the wallpaper shows through */
html body .t-Header .t-Header-branding:not(#ek_x) { background-color: transparent; }

/* ---- 12. Page loaded INSIDE an iframe (e.g. the tab shell), not a modal dialog:
   no header / branding, and no gap where it was. The class apx-in-iframe is
   set at the very top of <body> by the EK_THEME_CSS process (so the header is
   never drawn) and again by the Navigation Position Switcher plugin. */
html.apx-in-iframe body .t-Header:not(#ek_x) { display: none !important; }
html.apx-in-iframe:not(#ek_x) { --ut-header-height: 0px; --js-sticky-top: 0px; }
/* rev. 40: a small gap (--ek-frame-gap, default 3px) so the page's first region never
   touches the tab strip's base line above the iframe */
html.apx-in-iframe body .t-Body:not(#ek_x) { padding-top: var(--ek-frame-gap, 3px) !important; }
html.apx-in-iframe body :is(.t-Body-nav, .t-Body-actions, .t-Body-title):not(#ek_x) { top: 0 !important; }

/* ===================================================================
   PILLARS (0.7.0 rev. 9) — coloured header, top menu and side menu
   ===================================================================
   STATUS (rev. 10): SWITCHED OFF. The Display settings choice is removed and
   ek-theme.js keeps --ek-pillar unset, so every rule below uses its normal
   fallback and nothing changes on screen. Kept for a later release.
   Like Redwood's pillars: when the user picks one (Display settings →
   Pillar), the header bar, the top menu and the left menu are painted in
   that colour as tinted glass with white text; the page itself stays as it is.

   Mechanism (no extra class needed, so the server can apply it before the
   first paint): <html> gets --ek-pillar: var(--ek-p-<name>). Every
   --ek-pillar-* token is built from it; when --ek-pillar is not set those
   tokens are invalid and each var() below falls back to the normal look.

   Step 1 (on <html>): resolve the bar colours once, with fallbacks.        */
html:root {
  --ek-bar-text:          var(--ek-pillar-ink, var(--ek-text));
  --ek-bar-text-muted:    var(--ek-pillar-ink-muted, var(--ek-text-muted));
  --ek-bar-text-subtle:   var(--ek-pillar-ink-subtle, var(--ek-text-subtle));
  --ek-bar-brand-text:    var(--ek-pillar-ink, var(--ek-brand-text));
  --ek-bar-hover:         var(--ek-pillar-tint, var(--ek-hover-tint));
  --ek-bar-bubble:        var(--ek-pillar-bubble, var(--ek-bubble-bg));
  --ek-bar-bubble-shadow: var(--ek-pillar-bubble-shadow, var(--ek-bubble-shadow));
  --ek-bar-current:       var(--ek-pillar-bubble, var(--ek-brand-subtle));
  --ek-bar-tile:          var(--ek-pillar-tint, var(--ek-nav-tile));
  --ek-bar-guide:         var(--ek-pillar-guide, var(--ek-nav-guide));
  --ek-bar-moon:          var(--ek-pillar-moon, #3b3f9a);
}

/* Step 2 (header + side menu): use them. Local token overrides, so every
   existing menu rule (side menu, top menu, header buttons) follows.        */
html body .t-Header,
html body #t_Body_nav {
  --ek-text:          var(--ek-bar-text);
  --ek-text-muted:    var(--ek-bar-text-muted);
  --ek-text-subtle:   var(--ek-bar-text-subtle);
  --ek-brand-text:    var(--ek-bar-brand-text);
  --ek-hover-tint:    var(--ek-bar-hover);
  --ek-bubble-bg:     var(--ek-bar-bubble);
  --ek-bubble-shadow: var(--ek-bar-bubble-shadow);
  --ek-brand-subtle:  var(--ek-bar-current);
  --ek-nav-tile:      var(--ek-bar-tile);
  --ek-nav-guide:     var(--ek-bar-guide);
  --ek-moon:          var(--ek-bar-moon);
  /* Universal Theme's own header / menu variables */
  --ut-header-text-color:                         var(--ek-bar-text);
  --ut-header-menubar-item-text-color:            var(--ek-bar-text-muted);
  --ut-header-menubar-item-current-text-color:    var(--ek-bar-brand-text);
  --ut-header-menubar-item-hover-text-color:      var(--ek-bar-text);
  --ut-navtabs-text-color:                        var(--ek-bar-text-muted);
  --ut-navtabs-item-active-highlight-color:       var(--ek-bar-brand-text);
  --ut-body-nav-text-color:                       var(--ek-bar-text-muted);
}

/* Step 3: the coloured panels. Header colour is set in 40-liquid.css
   (glass on) and here for glass off. The side menu becomes a full-height
   pillar column. */
html:root[data-ek-fx="off"] body .t-Header {
  background-color: var(--ek-pillar, var(--ut-header-background-color));
}
html body #t_Body_nav {
  background-color: var(--ek-pillar-glass, transparent);
  background-image: var(--ek-pillar-sheen, none);
}
/* Header buttons and the logo text use the bar colours */
html body .t-Header :is(.t-Header-logo-link, .t-Header-logo-link .apex-logo-text, .t-Button--header) {
  color: var(--ek-bar-text);
}
html body .t-Header .t-Button--header .t-Icon:not(.fa-moon-o, .fa-sun-o) {
  color: var(--ek-bar-text-muted);
}

/* ===================================================================
   TAB SHELL (0.7.0 rev. 23) — jQuery EasyUI tabs that host APEX pages
   in iframes (the "Dashboard / Receiver Year Wise" tab strip)
   ===================================================================
   Markup (taken from the live page you sent, EasyUI's own classes):
     div.easyui-tabs.tabs-container
       > .tabs-header > .tabs-wrap > ul.tabs > li(.tabs-selected)
           > a.tabs-inner > span.tabs-title     + a.tabs-close
       > .tabs-panels > .panel > .panel-body > iframe
   Only .tabs-container is targeted, so pages without the shell are not
   affected. Everything uses the kit tokens, so light / dark, the accent
   colour and the glass follow the settings panel automatically.
   :not(#ek_x) gives (1,x,x) specificity: beats easyui.css and ordinary
   app CSS without !important. */

/* ---- 1. Strip and panel: no white boxes, the page colour shows through ---- */
html body .tabs-container:not(#ek_x),
html body .tabs-container:not(#ek_x) :is(.tabs-header, .tabs-wrap, ul.tabs, .tabs-scroller-left, .tabs-scroller-right) {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
html body .tabs-container:not(#ek_x) .tabs-header { border-bottom: 1px solid var(--ek-border); }

/* the area behind the iframe: page colour, so there is no white flash while a page loads */
html body .tabs-container:not(#ek_x) :is(.tabs-panels, .panel, .panel-body) {
  background-color: var(--ek-bg);
  border-color: var(--ek-border);
  color: var(--ek-text);
}
html body .tabs-container:not(#ek_x) .tabs-panels { border-width: 0; }
html body .tabs-container:not(#ek_x) .panel-body > iframe {
  display: block;
  background-color: var(--ek-bg);
  color-scheme: normal;            /* the page inside sets its own (light or dark) */
}

/* ---- 2. Tabs: quiet pills, like the top menu ---------------------------------- */
html body .tabs-container:not(#ek_x) ul.tabs > li {
  margin-inline-end: 4px;
}
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-inner {
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--ek-radius-md) var(--ek-radius-md) 0 0;
  color: var(--ek-text-muted);
  filter: none;
  transition: background-color var(--ek-duration-fast) var(--ek-ease), color var(--ek-duration-fast) var(--ek-ease);
}
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-inner .tabs-title {
  color: inherit;
  font-family: var(--ek-font-sans);
  font-weight: var(--ek-weight-medium);
}
/* inactive tabs: the same outline as the open tab, in the neutral border colour */
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner {
  border-color: color-mix(in srgb, var(--ek-border-strong) 55%, transparent);
  border-bottom: 0;
}
/* no corner "flares" (curved pieces drawn with ::before/::after by app CSS)
   beside the inactive tabs */
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected)::before,
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected)::after,
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner::before,
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner::after {
  content: none;
  display: none;
}
html body .tabs-container:not(#ek_x) ul.tabs > li:hover > a.tabs-inner {
  background-color: var(--ek-hover-tint);
  color: var(--ek-text);
}

/* the open tab: card colour, accent line on top, joined to the page below */
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected > a.tabs-inner {
  background-color: var(--ek-surface);
  border-color: var(--ek-border);
  box-shadow: inset 0 2px 0 var(--ek-brand-solid);
  color: var(--ek-text);
}
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected > a.tabs-inner .tabs-title {
  font-weight: var(--ek-weight-semibold);
}

/* keyboard focus */
html body .tabs-container:not(#ek_x) ul.tabs > li > a:focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: -2px;
}

/* ---- 3. Close (x): drawn with the text colour, so it works in both themes ----
   EasyUI paints the x from a sprite image that only suits light backgrounds. */
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-close {
  background-image: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: -9px;
  border-radius: var(--ek-radius-pill);
  opacity: 1;
}
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-close::before {
  content: "\00d7";
  display: block;
  font: 600 16px/18px var(--ek-font-sans);
  text-align: center;
  color: var(--ek-text-subtle);
}
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-close:hover {
  background-color: var(--ek-danger-subtle);
}
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-close:hover::before {
  color: var(--ek-danger);
}

/* ---- 4. No flash while a tab page loads (rev. 30) --------------------------------------
   ek-theme.js marks an iframe .ek-loading from the moment it starts loading until its
   page has finished parsing (theme applied); meanwhile the panel's page colour shows.
   Loading continues while hidden; a 4 s safety reveals it in any case. */
html body .tabs-container:not(#ek_x) .panel-body > iframe.ek-loading { visibility: hidden; }

/* ---- 5. Tab strip (rev. 36): the look from your reference screenshot ----------------
   Active tab: a card in the page colour, accent edge along the top, thin neutral sides,
   large rounded top corners, and soft rounded "feet" curving out into a thin neutral
   base line. Inactive tabs: quiet outline, tight spacing. Works in light and dark
   (neutral = theme border colour, so no white line in dark mode) and follows the user's
   accent colour. The app's own tab CSS draws extra lines and corners with !important,
   so these rules use !important too; they only touch the tab strip.
     --ek-tab-r     rounded top corners of the active tab
     --ek-tab-foot  size of the rounded feet (they sweep over the neighbouring tabs)
     --ek-tab-line  base line / side thickness
     --ek-tab-edge  colour of base line, sides and feet (set to var(--ek-brand-solid)
                    for an accent base line instead) */
html body .tabs-container:not(#ek_x) {
  --ek-tab-r: 18px;
  --ek-tab-foot: var(--ek-tab-r);
  --ek-tab-line: 1.5px;
  --ek-tab-top: 3px;
  --ek-tab-edge: color-mix(in srgb, var(--ek-border-strong) 60%, transparent);
}

/* base line: painted as the strip's own background, so the active tab can cover it */
html body .tabs-container:not(#ek_x) .tabs-header {
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
  background: linear-gradient(var(--ek-tab-edge), var(--ek-tab-edge)) left bottom / 100% var(--ek-tab-line) no-repeat !important;
}
html body .tabs-container:not(#ek_x) :is(.tabs-wrap, ul.tabs) {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html body .tabs-container:not(#ek_x) :is(.tabs-panels, .panel, .panel-body) { border-top: 0 !important; }
/* extra lines / corners the app draws with pseudo-elements: gone */
html body .tabs-container:not(#ek_x) :is(.tabs-header, .tabs-wrap, ul.tabs)::before,
html body .tabs-container:not(#ek_x) :is(.tabs-header, .tabs-wrap, ul.tabs)::after,
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-inner::before,
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-inner::after,
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected)::before,
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected)::after {
  content: none !important;
  display: none !important;
}
/* tight spacing: tabs sit 4px apart */
html body .tabs-container:not(#ek_x) ul.tabs > li {
  position: relative !important;
  margin: 0 4px 0 0 !important;
}
html body .tabs-container:not(#ek_x) ul.tabs > li:first-child { margin-left: var(--ek-tab-foot) !important; }

/* inactive tabs: quiet outline, same shape */
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner {
  border: 1px solid var(--ek-tab-edge) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}

/* the active tab */
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected { z-index: 2; }
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected > a.tabs-inner {
  position: relative;
  z-index: 1;
  background: var(--ek-bg) !important;
  border-style: solid !important;
  border-width: var(--ek-tab-top) var(--ek-tab-line) 0 var(--ek-tab-line) !important;
  border-color: var(--ek-brand-solid) var(--ek-tab-edge) transparent var(--ek-tab-edge) !important;
  border-radius: var(--ek-tab-r) var(--ek-tab-r) 0 0 !important;
  box-shadow: none !important;
  color: var(--ek-text) !important;
}

/* the rounded feet: a quarter ring in the edge colour, page colour beneath */
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected::before,
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
  inline-size: var(--ek-tab-foot) !important;
  block-size: var(--ek-tab-foot) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2 !important;
  pointer-events: none;
}
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected::before {
  left: calc(var(--ek-tab-line) - var(--ek-tab-foot)) !important;
  right: auto !important;
  background: radial-gradient(circle at 0 0,
      transparent calc(var(--ek-tab-foot) - var(--ek-tab-line) - 0.5px),
      var(--ek-tab-edge) calc(var(--ek-tab-foot) - var(--ek-tab-line)),
      var(--ek-tab-edge) var(--ek-tab-foot),
      var(--ek-bg) calc(var(--ek-tab-foot) + 0.5px)) !important;
}
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected::after {
  right: calc(var(--ek-tab-line) - var(--ek-tab-foot)) !important;
  left: auto !important;
  background: radial-gradient(circle at 100% 0,
      transparent calc(var(--ek-tab-foot) - var(--ek-tab-line) - 0.5px),
      var(--ek-tab-edge) calc(var(--ek-tab-foot) - var(--ek-tab-line)),
      var(--ek-tab-edge) var(--ek-tab-foot),
      var(--ek-bg) calc(var(--ek-tab-foot) + 0.5px)) !important;
}
/* the close (x) stays above the active tab's own background */
html body .tabs-container:not(#ek_x) ul.tabs > li > a.tabs-close { z-index: 3 !important; }

/* ---- 6. rev. 37 ------------------------------------------------------------------
   a) The thin light line under the strip (also under the active tab) is a top border
      or shadow the app/EasyUI draws on the panel area under the tabs: removed.
   b) rev. 39: no gaps; tabs share their borders and the active tab's 18px feet sweep
      over the neighbouring tabs' bottom corners. */
html body .tabs-container:not(#ek_x),
html body .tabs-container:not(#ek_x) :is(.tabs-panels, .tabs-panels > .panel, .panel-body, .panel-header, .panel-body > iframe) {
  border-top: 0 !important;
  outline: 0 !important;
}
html body .tabs-container:not(#ek_x) :is(.tabs-panels, .tabs-panels > .panel, .panel-body) {
  box-shadow: none !important;
}
html body .tabs-container:not(#ek_x) .tabs-panels::before,
html body .tabs-container:not(#ek_x) .tabs-panels::after {
  content: none !important;
  display: none !important;
}
/* rev. 39: tabs touch each other (shared 1px border); the active tab overlaps its
   neighbours by its side-line width and its rounded feet are drawn on top of them. */
html body .tabs-container:not(#ek_x) ul.tabs > li {
  margin: 0 -1px 0 0 !important;
  z-index: 1;
}
html body .tabs-container:not(#ek_x) ul.tabs > li:first-child { margin-left: var(--ek-tab-foot) !important; }
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected {
  margin: 0 calc(-1 * var(--ek-tab-line)) 0 calc(-1 * var(--ek-tab-line)) !important;
  z-index: 3 !important;
}
html body .tabs-container:not(#ek_x) ul.tabs > li.tabs-selected:first-child { margin-left: var(--ek-tab-foot) !important; }

/* ---- 7. rev. 42: inactive tabs ----------------------------------------------------
   Each inactive tab keeps its top line and rounded top corners (so neighbouring tabs
   meet in a small rounded notch and still read as separate tabs), but the straight
   divider lines down the sides are gone. The outer sides keep the full line: the first
   tab's left, the last tab's right and the sides next to the active tab.
   The outline is drawn by a::before and trimmed with a mask:
     --ek-tab-cap    height of the top part that stays (line + corner)
     --ek-tab-ml/mr  1 = keep the full left / right side line */
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) {
  margin-right: 0 !important;
  --ek-tab-cap: 14px;
  --ek-tab-ml: 0;
  --ek-tab-mr: 0;
}
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected):is(:first-child, .tabs-selected + li) { --ek-tab-ml: 1; }
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected):is(:last-child, :has(+ li.tabs-selected)) { --ek-tab-mr: 1; }
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner {
  position: relative !important;
  display: inline-block !important;
  border-color: transparent !important;
}
html body .tabs-container:not(#ek_x) ul.tabs > li:not(.tabs-selected) > a.tabs-inner::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* the app's own tab CSS sizes these pseudo-elements: reset every box property */
  top: -1px !important;
  left: -1px !important;
  right: -1px !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
  border: 1px solid var(--ek-tab-edge) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  background: none !important;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% var(--ek-tab-cap) no-repeat,
    linear-gradient(#000, #000) left / calc(var(--ek-tab-ml) * 2px) 100% no-repeat,
    linear-gradient(#000, #000) right / calc(var(--ek-tab-mr) * 2px) 100% no-repeat;
          mask:
    linear-gradient(#000, #000) top / 100% var(--ek-tab-cap) no-repeat,
    linear-gradient(#000, #000) left / calc(var(--ek-tab-ml) * 2px) 100% no-repeat,
    linear-gradient(#000, #000) right / calc(var(--ek-tab-mr) * 2px) 100% no-repeat;
}

/* ---- 8. rev. 45 -----------------------------------------------------------------
   a) A small gap between the tab strip's base line and the page shown under it, so a
      region at the top of that page never touches the line. Set on the shell (outside
      the iframe), so it works for every page. EasyUI sizes .tabs-panels with its
      padding taken into account, so nothing is cut off at the bottom.
      Change with --ek-tab-gap. */
html body .tabs-container:not(#ek_x) { --ek-tab-gap: 4px; }
html body .tabs-container:not(#ek_x) > .tabs-panels {
  padding-top: var(--ek-tab-gap) !important;
}
/* b) Scroll arrows when there are more tabs than fit: section 1 cleared EasyUI's arrow
      images, so the kit draws its own chevrons (theme colour, accent on hover). */
html body .tabs-container:not(#ek_x) :is(.tabs-scroller-left, .tabs-scroller-right) {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  cursor: pointer;
  z-index: 4;
}
html body .tabs-container:not(#ek_x) :is(.tabs-scroller-left, .tabs-scroller-right)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ek-text-muted);
  -webkit-mask: var(--ek-chev) center / 16px 16px no-repeat;
          mask: var(--ek-chev) center / 16px 16px no-repeat;
  transition: background-color var(--ek-duration-fast) var(--ek-ease);
}
html body .tabs-container:not(#ek_x) .tabs-scroller-left {
  --ek-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body .tabs-container:not(#ek_x) .tabs-scroller-right {
  --ek-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3 5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html body .tabs-container:not(#ek_x) :is(.tabs-scroller-left, .tabs-scroller-right):is(:hover, .tabs-scroller-over)::before {
  background-color: var(--ek-brand-solid);
}
html body .tabs-container:not(#ek_x) :is(.tabs-scroller-left, .tabs-scroller-right).tabs-scroller-disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---- 9. rev. 51: Page size (Display settings > Page size: 80 / 90 / 100 %) --------
   The page inside each tab (and inside a modal dialog) is drawn smaller, like browser
   zoom: CSS zoom on the iframe element. The iframe keeps filling its panel (width /
   height 100 %), the page inside simply gets more room, and its own menus and popups
   stay in place because everything inside the frame is scaled together.
   --ek-size is set by the EK_THEME_CSS process (no flash) and by ek-theme.js. */
html body .tabs-container:not(#ek_x) .tabs-panels .panel-body > iframe,
html body .ui-dialog:not(#ek_x) .ui-dialog-content > iframe {
  zoom: var(--ek-size, 1);
}

/* ===================================================================
   AUTOMATIC BREADCRUMB (0.7.0 rev. 47)
   ek-theme.js inserts nav.ek-crumbs at the top of the page body with the
   menu path of the page, e.g. "Executive Summaries \ Receiver Wise".
   Turn off for one page: Page > CSS Classes = ek-no-crumbs.
   =================================================================== */
html body nav.ek-crumbs:not(#ek_x) {
  margin: 4px 0 14px;
  padding: 0 4px;
  font-family: var(--ek-font-sans);
}
html body nav.ek-crumbs:not(#ek_x) > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body nav.ek-crumbs:not(#ek_x) li {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ek-text-muted);
}
html body nav.ek-crumbs:not(#ek_x) li + li::before {
  content: "\\";
  margin: 0 8px;
  color: var(--ek-text-muted);
  opacity: 0.55;
  font-weight: 400;
}
/* rev. 48: every level the same size (12px), weight and font; the page name
   is only darker */
html body nav.ek-crumbs:not(#ek_x) li.ek-crumbs-cur { color: var(--ek-text); }

/* ===================================================================
   Enterprise APEX UI Kit — 40-liquid.css (0.7.0, rev. 3)  "Liquid glass"

   STRENGTH: one number, --ek-fx (0 … 1), set by the "Glass effect" slider
   in Display settings (ek-theme.js). Every glass colour, reflection, edge
   and shadow in 00-tokens.css is multiplied by it, so the slider fades the
   effect smoothly from flat (0) to full liquid glass (1). At 0 the script
   also sets <html data-ek-fx="off"> to switch blur and animation off.

   SPEED: backdrop blur is the expensive part, so it is used only on
   elements that appear ONCE: the header, the open dialog and open popup
   menus. Cards, reports and menu items get gloss (reflection, sheen,
   translucency) without blur. No fixed backgrounds. Page and dialog
   animations use only opacity + transform (GPU-composited).

   Same rules for light and dark: all colours come from tokens.
   Verified classes: .t-Header .t-Body-contentInner .t-Region .t-IRR-region
   .a-IRR(-toolbar/-table) .a-Menu .ui-dialog .ui-dialog-titlebar
   .ui-dialog-content .t-Button(--hot/--header) .a-Button.
   Dialog pages: body.t-Dialog-page (Universal Theme dialog template) and,
   as a fallback, html.ek-in-dialog (set by ek-theme.js inside the iframe).
   =================================================================== */

/* default glass strength comes from 00-tokens.css (light 1, dark 0); the slider overrides it inline */

/* ---- 0. Wallpaper behind the glass ------------------------------------------------
   Glass is only visible when something is behind it (like the photo behind
   the iPhone home screen). The wallpaper (Display settings → Wallpaper) sits
   in a fixed layer behind the whole app; the page layers above it are
   transparent so every glass surface shows it through. "None" = plain page.
   Fixed pseudo-element = its own compositor layer, so scrolling stays fast. */
html:root:not([data-ek-fx="off"]) {
  --ut-body-background-color: transparent;
  --ut-body-title-background-color: transparent;
}
html:root:not([data-ek-fx="off"]) body.t-PageBody {
  background: transparent;
}
html:root:not([data-ek-fx="off"]) body.t-PageBody::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ek-wall);
}
html:root:not([data-ek-fx="off"]) body :is(.t-Body, .t-Body-main, .t-Body-content, .t-Body-contentInner,
                                           .t-Body-title, .t-Body-side, .t-Body-actions, .t-Body-nav) {
  background-color: transparent;
}

/* ---- 1. Header: the one always-visible glass bar ---------------------------- */
/* Thin glass, so the wallpaper continues through the header (rev. 9).
   With a pillar chosen, the header is tinted glass in the pillar colour. */
html:root:not([data-ek-fx="off"]) body .t-Header {
  background-color: var(--ek-pillar-glass, var(--ek-glass-bar));
  background-image: var(--ek-pillar-sheen, none), var(--ek-glass-specular);
  -webkit-backdrop-filter: blur(calc(24px * var(--ek-fx))) saturate(160%);
  backdrop-filter: blur(calc(24px * var(--ek-fx))) saturate(160%);
}

/* ---- 2. Cards and reports: gloss without blur (fast) ---------------------------- */
html:root:not([data-ek-fx="off"]) {
  --ut-region-background-color:        transparent;
  --ut-region-header-background-color: transparent;
  --ut-region-border-width:            0;
}
html:root:not([data-ek-fx="off"], .ek-in-dialog):not(:has(body.t-Dialog-page)) body
  :is(.t-Region:not(.t-Region--noUI, .t-Region--removeHeader.t-Region--noBorder), .t-IRR-region, .t-Card .t-Card-wrap, .a-CardView-item) {
  background-color: var(--ek-glass-bg);
  background-image: var(--ek-glass-specular), var(--ek-glass-sheen);
  border: 1px solid var(--ek-glass-border);
  border-radius: 20px;
  box-shadow: var(--ek-glass-highlight), var(--ek-glass-shadow);
}
html:root:not([data-ek-fx="off"]) body :is(.a-IRR, .a-IRR-toolbar, .a-IRR-table, .a-IRR-tableContainer) {
  background-color: transparent;
}
html:root:not([data-ek-fx="off"]) body .a-IRR-table th.a-IRR-header {
  background-color: var(--ek-glass-bg-strong);   /* frosted: sticky headers stay readable */
}
html:root:not([data-ek-fx="off"]) body .a-IRR-table td {
  background-color: transparent;
}

/* ---- 3. Clear glass buttons and fields ------------------------------------------------ */
html:root:not([data-ek-fx="off"]) {
  --a-field-input-background-color:       var(--ek-field-bg);
  --a-field-input-hover-background-color: var(--ek-glass-bg-strong);
  --a-field-input-focus-background-color: var(--ek-glass-bg-strong);
}
html:root:not([data-ek-fx="off"]) body :is(.apex-item-text, .apex-item-textarea, .apex-item-select,
                                           .apex-item-number, .apex-item-password, .apex-item-datepicker,
                                           .a-IRR-search-field) {
  background-color: var(--ek-field-bg);   /* keeps a light frost even at 100%, so typed text stays readable */
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / calc(0.5 * var(--ek-fx))), inset 0 1px 3px rgb(0 0 0 / calc(0.05 * var(--ek-fx)));
}
html:root:not([data-ek-fx="off"]) body
  :is(.t-Button, .a-Button):not(.t-Button--header, .t-Button--hot, .t-Button--primary, .t-Button--noUI, .t-Button--link) {
  --a-button-background-color:       var(--ek-glass-bg);
  --a-button-hover-background-color: var(--ek-glass-bg-strong);
  --a-button-border-color:           var(--ek-glass-border);
  background-image: var(--ek-glass-specular);
  box-shadow: var(--ek-glass-highlight), 0 1px 2px rgb(15 23 42 / calc(0.06 * var(--ek-fx)));
}
html:root:not([data-ek-fx="off"]) body :is(.t-Button--hot, .t-Button--primary:not(.t-Button--simple)) {
  border-radius: 980px;
  background-image: radial-gradient(120% 80% at 50% -30%, rgb(255 255 255 / calc(0.55 * var(--ek-fx))), transparent 60%),
                    linear-gradient(180deg, rgb(255 255 255 / calc(0.30 * var(--ek-fx))), rgb(255 255 255 / 0) 55%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(0.45 * var(--ek-fx))),
              inset 0 -1px 0 rgb(0 0 0 / calc(0.10 * var(--ek-fx))),
              0 6px 16px rgb(0 0 0 / calc(0.14 * var(--ek-fx)));
}

/* ---- 4. Open page in the menu: clear glass capsule (iOS style) + accent bar --------- */
html:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-row:is(.is-selected, .ek-current) {
  background-color: var(--ek-bubble-bg);
  background-image: linear-gradient(var(--ek-brand-solid), var(--ek-brand-solid)), var(--ek-glass-specular);
  background-size: 3px 50%, 100% 100%;
  background-position: 6px 50%, 0 0;
  background-repeat: no-repeat;
  box-shadow: var(--ek-bubble-shadow);
}
html:root:not([data-ek-fx="off"]) #t_TreeNav.ek-has-current .a-TreeView-row.is-selected:not(.ek-current) {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
html[dir="rtl"]:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-row:is(.is-selected, .ek-current) {
  background-position: right 6px center, 0 0;
}

/* ---- 5. Popup menus: glass (blur only while open) ------------------------------------ */
html:root:not([data-ek-fx="off"]) {
  --a-menu-background-color: var(--ek-glass-menu);
}
html:root:not([data-ek-fx="off"]) body .a-Menu {
  border-radius: 14px;
  border: 1px solid var(--ek-glass-border);
  background-image: var(--ek-glass-specular);
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
  -webkit-backdrop-filter: blur(calc(24px * var(--ek-fx))) saturate(160%);
  backdrop-filter: blur(calc(24px * var(--ek-fx))) saturate(160%);
}

/* ---- 6. Dialogs: the WHOLE dialog is glass ---------------------------------------------
   Outer frame (parent page): glass background, blur, rounded, no hard edge.
   Title bar and content area: transparent, so they share the same glass.  */
html:root body .ui-dialog {
  background-color: var(--ek-glass-bg-strong);
  background-image: var(--ek-glass-specular), var(--ek-glass-sheen);
  border: 1px solid var(--ek-glass-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
  /* light blur + brightening: the page behind stays recognisable but never
     shows through as dark smudges (light theme lifts, dark theme deepens) */
  -webkit-backdrop-filter: blur(calc(12px * var(--ek-fx))) saturate(150%) brightness(var(--ek-lift));
  backdrop-filter: blur(calc(12px * var(--ek-fx))) saturate(150%) brightness(var(--ek-lift));
}
html:root body .ui-dialog :is(.ui-dialog-titlebar, .ui-dialog-content, .ui-dialog-buttonpane) {
  background: transparent;
  border: 0;
}
html:root body .ui-dialog .ui-dialog-title { color: var(--ek-text); }
/* Lighter dim behind dialogs, so the page shows through the glass (iOS-like) */
html:root:not([data-ek-fx="off"]) body .ui-widget-overlay {
  background: var(--ek-overlay-dim);   /* none at 100%: fully clear */
  opacity: 1;
}

/* Inside the dialog's page (iframe): transparent page, clean borderless regions */
html:root:has(body.t-Dialog-page),
html:root.ek-in-dialog {
  background: transparent;
  --ut-body-background-color: transparent;
}
html:root body.t-Dialog-page,
html:root.ek-in-dialog body {
  background: transparent;
}
/* no second wallpaper inside the dialog: the parent page must show through */
html:root:not([data-ek-fx="off"]) body.t-PageBody.t-Dialog-page::before,
html:root.ek-in-dialog:not([data-ek-fx="off"]) body.t-PageBody::before {
  content: none;
}
html:root:has(body.t-Dialog-page) body :is([class*="t-Dialog"], [class*="t-Body"], [class*="t-Region"],
                                           [class*="t-ButtonRegion"], [class*="t-Form-"], .t-IRR-region,
                                           .container, .row, .col),
html:root.ek-in-dialog body :is([class*="t-Dialog"], [class*="t-Body"], [class*="t-Region"],
                                [class*="t-ButtonRegion"], [class*="t-Form-"], .t-IRR-region,
                                .container, .row, .col) {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}

/* Readability on clear glass: a soft glow behind the dialog's text, and a
   thin scrollbar with no white track */
html:root:not([data-ek-fx="off"]) body .ui-dialog .ui-dialog-title,
html:root:not([data-ek-fx="off"]):has(body.t-Dialog-page) body,
html:root.ek-in-dialog:not([data-ek-fx="off"]) body {
  text-shadow: 0 0 calc(10px * var(--ek-fx)) var(--ek-halo), 0 0 2px var(--ek-halo);
}
html:root:has(body.t-Dialog-page),
html:root.ek-in-dialog {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ek-text-subtle) 45%, transparent) transparent;
}

/* ---- 7. Page opening and dialog pop (opacity + transform only = fast) ------------------- */
@keyframes ek-liquid-drop {
  0%   { opacity: 0.4; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ek-liquid-pop {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: none; }
}
html:root:not([data-ek-fx="off"]):not(.ek-in-dialog) body:not(.t-Dialog-page) .t-Body-contentInner {
  animation: ek-liquid-drop 200ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;   /* short: content is usable at once */
  transform-origin: 50% 0;
}
html:root:not([data-ek-fx="off"]) body .ui-dialog {
  animation: ek-liquid-pop 200ms cubic-bezier(0.2, 0.9, 0.25, 1.1) backwards;
}

/* ---- 7b. Liquid hover: menu items, buttons and links pop up as a glass bubble ------
   Spring curve overshoots slightly, like iOS. Only transform/box-shadow/
   background change, so it stays smooth. Off at slider 0 and for users who
   prefer reduced motion. */
html:root:not([data-ek-fx="off"]) {
  --ek-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Menu items */
html:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-row {
  transition: transform 380ms var(--ek-spring), background-color 160ms ease, box-shadow 200ms ease;
}
html:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-row.is-hover,
html:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-node > .a-TreeView-row:hover,
html:root:not([data-ek-fx="off"]) #t_TreeNav .a-TreeView-node:has(> .a-TreeView-content:hover) > .a-TreeView-row {
  background-color: var(--ek-bubble-bg);
  background-image: var(--ek-glass-specular);
  box-shadow: var(--ek-bubble-shadow);
  transform: scale(1.025);
}
/* Buttons (page buttons, report buttons, header icons) */
html:root:not([data-ek-fx="off"]) body :is(.t-Button, .a-Button) {
  transition: transform 380ms var(--ek-spring), box-shadow 200ms ease, background-color 160ms ease;
}
html:root:not([data-ek-fx="off"]) body :is(.t-Button, .a-Button):not(:disabled, .is-disabled):hover {
  transform: scale(1.045);
}
html:root:not([data-ek-fx="off"]) body :is(.t-Button, .a-Button):not(:disabled, .is-disabled):active {
  transform: scale(0.97);
  transition-duration: 90ms;
}
html:root:not([data-ek-fx="off"]) body .t-Button--header:hover {
  background-color: var(--ek-bubble-bg);
  box-shadow: var(--ek-bubble-shadow);
  border-radius: 12px;
}
/* Links in page content: a glass bubble appears behind the text (no layout shift) */
html:root:not([data-ek-fx="off"]) body .t-Body-content a:not([class*="Button"], .a-TreeView-label, .a-IRR-headerLink) {
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 160ms ease, box-shadow 220ms var(--ek-spring);
}
html:root:not([data-ek-fx="off"]) body .t-Body-content a:not([class*="Button"], .a-TreeView-label, .a-IRR-headerLink):hover {
  background-color: var(--ek-bubble-bg);
  box-shadow: 0 0 0 4px var(--ek-bubble-bg), var(--ek-bubble-shadow);
}
@media (prefers-reduced-motion: reduce) {
  html:root body :is(.t-Button, .a-Button, #t_TreeNav .a-TreeView-row) { transform: none !important; }
}

/* ---- 8. Off: flat and fastest ------------------------------------------------------------- */
html:root[data-ek-fx="off"] body :is(.t-Header, .ui-dialog, .a-Menu) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:root[data-ek-fx="off"] body .ui-dialog {
  background-color: var(--ek-surface);
  background-image: none;
}

@media (prefers-reduced-motion: reduce) {
  html:root body .t-Body-contentInner,
  html:root body .ui-dialog { animation: none; }
}

/* ===================================================================
   Navigation-bar buttons and Display settings panel
   =================================================================== */
/* Theme button: moon (dark tone) in light mode, sun (warm) in dark mode */
html body .ek-theme-toggle .t-Icon { inline-size: 16px; }
html body .ek-theme-toggle .t-Icon.fa-moon-o { color: var(--ek-moon, #3b3f9a); }
html body .ek-theme-toggle .t-Icon.fa-sun-o  { color: #ffc94d; }

.ek-prefs {
  position: fixed;
  inset-block-start: 64px;
  inset-inline-end: 16px;
  z-index: 1000;
  inline-size: min(340px, calc(100vw - 32px));
  max-block-size: calc(100vh - 80px);   /* the admin section can make it tall: scroll inside */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ek-space-4);
  border-radius: 20px;
  color: var(--ek-text);
  background-color: var(--ek-glass-menu);
  background-image: var(--ek-glass-specular);
  border: 1px solid var(--ek-border);
  box-shadow: var(--ek-shadow-3);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  font-family: var(--ek-font-sans);
  animation: ek-liquid-pop 240ms cubic-bezier(0.2, 0.9, 0.25, 1.1);
}
.ek-prefs[hidden] { display: none; }
.ek-prefs-title { margin: 0 0 var(--ek-space-3); font-size: var(--ek-text-md); font-weight: var(--ek-weight-semibold); }
.ek-prefs-group + .ek-prefs-group { margin-block-start: var(--ek-space-4); }
.ek-prefs-label {
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--ek-space-2);
  font-size: var(--ek-text-xs);
  font-weight: var(--ek-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ek-text-subtle);
}
.ek-prefs-label output { letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ek-text-muted); }
.ek-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background-color: var(--ek-hover-tint);
}
.ek-seg button {
  min-block-size: 32px;
  padding-inline: var(--ek-space-2);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ek-text-muted);
  font: inherit;
  font-size: var(--ek-text-sm);
  font-weight: var(--ek-weight-medium);
  cursor: pointer;
}
.ek-seg button:hover { color: var(--ek-text); }
.ek-seg button[aria-pressed="true"] {
  background-color: var(--ek-surface);
  color: var(--ek-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.10), 0 2px 8px rgb(0 0 0 / 0.06);
}
.ek-seg button:focus-visible,
.ek-range:focus-visible { outline: 2px solid var(--ek-focus-ring); outline-offset: 2px; }
.ek-range {
  inline-size: 100%;
  accent-color: var(--ek-brand-solid);
  cursor: pointer;
}
.ek-range-ends {
  display: flex;
  justify-content: space-between;
  margin-block-start: 2px;
  font-size: var(--ek-text-xs);
  color: var(--ek-text-subtle);
}
.ek-prefs-note { margin: var(--ek-space-3) 0 0; font-size: var(--ek-text-xs); color: var(--ek-text-subtle); }

/* Accent colour picker: saturation/brightness square + hue bar + hex field */
.ek-picker { display: grid; gap: 10px; }
.ek-sv {
  position: relative;
  block-size: 140px;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
  background: linear-gradient(to top, #000, transparent),
              linear-gradient(to right, #fff, transparent),
              var(--ek-hue, #0071e3);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.ek-sv-thumb, .ek-hue-thumb {
  position: absolute;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25), 0 2px 6px rgb(0 0 0 / 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ek-hue {
  position: relative;
  block-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.ek-hue-thumb { top: 50%; }
.ek-sv:focus-visible, .ek-hue:focus-visible { outline: 2px solid var(--ek-focus-ring); outline-offset: 2px; }
/* Direction of the square and bar is physical (colour maths), also in RTL */
.ek-sv, .ek-hue { direction: ltr; }
.ek-picker-row { display: flex; align-items: center; gap: 8px; }
.ek-chip {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.ek-hex {
  flex: 1;
  min-inline-size: 0;
  padding: 5px 10px;
  border: 1px solid var(--ek-border-strong);
  border-radius: 8px;
  background-color: var(--ek-surface);
  color: var(--ek-text);
  font: inherit;
  font-family: var(--ek-font-mono);
  font-size: var(--ek-text-sm);
  text-transform: lowercase;
}
.ek-hex:focus-visible, .ek-reset:focus-visible { outline: 2px solid var(--ek-focus-ring); outline-offset: 1px; }
.ek-reset {
  flex: none;
  padding: 5px 10px;
  border: 1px solid var(--ek-border);
  border-radius: 8px;
  background-color: var(--ek-surface);
  color: var(--ek-text-muted);
  font: inherit;
  font-size: var(--ek-text-sm);
  cursor: pointer;
}
.ek-picker-note { margin: 0; min-block-size: 1em; font-size: var(--ek-text-xs); color: var(--ek-text-subtle); }
.ek-prefs-label output { max-inline-size: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }

/* Wallpaper tiles */
.ek-walls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ek-pillars { grid-template-columns: repeat(6, 1fr); row-gap: 8px; }
.ek-pillar-tile .ek-wall-swatch { border-radius: 50%; inline-size: 30px; block-size: 30px; margin-inline: auto; }
.ek-wall-tile {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 4px 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ek-text-muted);
  font: inherit;
  font-size: var(--ek-text-xs);
  cursor: pointer;
}
.ek-wall-swatch {
  inline-size: 100%;
  block-size: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--ek-border);
}
.ek-wall-tile[aria-pressed="true"] { color: var(--ek-text); font-weight: var(--ek-weight-semibold); }
.ek-wall-tile[aria-pressed="true"] .ek-wall-swatch { box-shadow: 0 0 0 2px var(--ek-surface), 0 0 0 4px var(--ek-brand-solid); }
.ek-wall-tile:focus-visible { outline: 2px solid var(--ek-focus-ring); outline-offset: 1px; }

/* ---- Fields: one background for every text-like item (0.7.0 rev. 28) -------------
   rev. 53: not on the login page (body.t-PageBody--login) and not inside an element
   with class "ek-own-fields": pages that style their own fields keep their look.
   Some app or Theme Roller CSS paints inputs solid white, which ignored dark mode
   and the glass setting. (1,x,x) specificity beats such rules without !important.
   Markup verified on your page: popup LOV = .apex-item-group--popup-lov >
   input.apex-item-popup-lov + button.a-Button--popupLOV. Disabled items keep
   Universal Theme's disabled look. */
html body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
              .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
              input.apex-item-number, input.apex-item-password):not(:disabled):not(#ek_x):not(.t-PageBody--login *):not(.ek-own-fields *) {
  /* !important on purpose (rev. 30): app CSS on your pages forces white with
     !important / a background image, which plain rules cannot beat. */
  background: var(--ek-surface) !important;
  color: var(--ek-text) !important;
}
html:root:not([data-ek-fx="off"]) body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
              .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
              input.apex-item-number, input.apex-item-password):not(:disabled):not(#ek_x):not(.t-PageBody--login *):not(.ek-own-fields *) {
  background: var(--ek-field-bg) !important;
}
/* Chrome autofill paints its own light box: cover it with the field colour */
html body :is(.apex-item-text, .apex-item-popup-lov, .apex-item-datepicker input):not(#ek_x):-webkit-autofill {
  -webkit-text-fill-color: var(--ek-text);
  box-shadow: 0 0 0 1000px var(--ek-surface) inset;
  caret-color: var(--ek-text);
}
/* the date picker's own wrapper element must not add a second (white) box */
html body a-date-picker:not(#ek_x) { background-color: transparent; }
html body :is(.apex-item-text, .apex-item-popup-lov, .apex-item-datepicker input, .apex-item-textarea):not(#ek_x)::placeholder {
  color: var(--ek-text-subtle);
  opacity: 1;
}

/* ---- Date picker pop-up header (0.7.0 rev. 29) ---------------------------------------
   Markup verified on your page: .a-DatePicker-monthPicker > .a-DatePicker-month /
   .a-DatePicker-year > select. The light band came from the pop-up's own
   background (a fixed light colour from the theme style), which ignored dark mode.
   Every APEX date-picker element that CONTAINS the month picker (the pop-up and its
   header) gets the card colour; the weekday row is see-through. Day cells keep their
   own today / selected styling. */
html body [class*="a-DatePicker"]:has(.a-DatePicker-monthPicker):not(#ek_x),
html body .a-DatePicker-monthPicker:not(#ek_x) {
  background-color: var(--ek-surface);
  background-image: none;
  color: var(--ek-text);
}
html body [class*="a-DatePicker"]:has(.a-DatePicker-monthPicker) :is(thead, thead tr, th):not(#ek_x) {
  background-color: transparent;
  color: var(--ek-text-muted);
}
/* month / year selects: quiet, readable, normal focus ring */
html body .a-DatePicker-monthPicker select:not(#ek_x) {
  background-color: transparent;
  color: var(--ek-text);
  border: 1px solid transparent;
  border-radius: var(--ek-radius-sm);
  box-shadow: none;
  font-weight: var(--ek-weight-semibold);
}
html body .a-DatePicker-monthPicker select:not(#ek_x):hover { background-color: var(--ek-hover-tint); }
html body .a-DatePicker-monthPicker select:not(#ek_x):focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: 1px;
  border-color: transparent;
}
html body .a-DatePicker-monthPicker select:not(#ek_x) option {
  background-color: var(--ek-surface);
  color: var(--ek-text);
}
/* previous / next month arrows and other header buttons (not the day cells) */
html body [class*="a-DatePicker"]:has(.a-DatePicker-monthPicker) button:not(td *):not(#ek_x) {
  color: var(--ek-text-muted);
}

/* ---- Pop-up menus outside the header (rev. 30): user menu, Actions menus ... ------
   Universal Theme paints a menu's colour on its inner panel, which the kit makes
   see-through (one card, no double box) - so the card colour goes on .a-Menu
   itself. Glass off: solid card. Glass on: frosted glass that follows the slider.
   Header drop-downs keep their own rule (35-topnav.css section 10). */
html body .a-Menu:not(.t-Header .a-Menu):not(#ek_x) {
  background-color: var(--ek-surface-raised);
  border: 1px solid var(--ek-border);
  border-radius: 14px;
  box-shadow: var(--ek-shadow-3);
  color: var(--ek-text);
}
html:root:not([data-ek-fx="off"]) body .a-Menu:not(.t-Header .a-Menu):not(#ek_x) {
  background-color: var(--ek-glass-menu);
  background-image: var(--ek-glass-specular);
  border-color: var(--ek-glass-border);
  box-shadow: var(--ek-glass-highlight), var(--ek-shadow-3);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* ---- Fallback mode (rev. 32): page drawn with a NON-EK theme style -------------------
   ek-theme.js loaded this file itself and set html.ek-css-fallback. The other style's
   header colours (e.g. a yellow gradient and shadow) are set on the header itself,
   so they are overridden here; the real fix is the EK theme style on the server. */
html.ek-css-fallback body .t-Header:not(#ek_x) {
  background: var(--ek-surface) !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  color: var(--ek-text);
}
html.ek-css-fallback:not([data-ek-fx="off"]) body .t-Header:not(#ek_x) {
  background: var(--ek-glass-bar) !important;
}
html.ek-css-fallback body .t-Header :is(.t-Header-branding, .t-Header-nav, .a-MenuBar):not(#ek_x) {
  background: transparent !important;
  box-shadow: none !important;
}
html.ek-css-fallback body:not(#ek_x),
html.ek-css-fallback body .t-Body:not(#ek_x) {
  background-color: var(--ek-bg) !important;
}

/* ---- Display settings: admin section (rev. 33) ----------------------------------- */
.ek-prefs .ek-prefs-admin {
  margin-top: var(--ek-space-3);
  padding-top: var(--ek-space-3);
  border-top: 1px solid var(--ek-border);
}
.ek-prefs .ek-admin-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 13px;
  color: var(--ek-text);
  cursor: pointer;
}
.ek-prefs .ek-admin-switch input {
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  accent-color: var(--ek-brand-solid);
}
.ek-prefs .ek-admin-btn {
  display: block;
  inline-size: 100%;
  min-height: 36px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ek-brand-solid);
  color: var(--ek-on-brand-auto, #fff);
  font: 600 13px/1.3 var(--ek-font-sans);
  text-align: center;
  cursor: pointer;
}
.ek-prefs .ek-admin-btn--quiet {
  background: transparent;
  color: var(--ek-text);
  border: 1px solid var(--ek-border-strong);
}
.ek-prefs .ek-admin-btn:focus-visible,
.ek-prefs .ek-admin-switch input:focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: 2px;
}

/* admin: which settings users can change (rev. 49) */
.ek-prefs .ek-admin-allow {
  margin: 6px 0 4px;
  padding: 6px 10px 8px;
  border: 1px solid var(--ek-border);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.ek-prefs .ek-admin-allow > legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ek-text-muted);
}
.ek-prefs .ek-admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 12.5px;
  color: var(--ek-text);
  cursor: pointer;
}
.ek-prefs .ek-admin-check input {
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--ek-brand-solid);
}
.ek-prefs .ek-admin-check input:focus-visible {
  outline: 2px solid var(--ek-focus-ring);
  outline-offset: 2px;
}
.ek-prefs .ek-admin-allow:disabled { opacity: 0.5; }
.ek-prefs .ek-admin-allow:disabled .ek-admin-check { cursor: default; }

/* ---- Menu position switch moved into Display settings (rev. 37) -------------------
   ek-theme.js marks html.ek-has-panel when the Display settings button exists; the
   old nav bar entry (link id nav_position_toggle, list entry static id "switch")
   is then hidden. It still works: the panel's Top / Left buttons click it. */
html.ek-has-panel body .t-NavigationBar-item:has(#nav_position_toggle),
html.ek-has-panel body #switch:has(#nav_position_toggle),
html.ek-no-menu-switch body .t-NavigationBar-item:has(#nav_position_toggle),
html.ek-no-menu-switch body #switch:has(#nav_position_toggle) {
  display: none !important;
}

/* ===================================================================
   FORM FIELDS: UNDERLINE STYLE (0.7.0 rev. 52)
   Like Google Forms: no box, only a line under the field. The line turns
   into a 2px accent line on focus and red on a validation error.
   On for the whole app with html.ek-fields-line (Display settings >
   Form fields, admin default via package EK_UI). Also usable per page /
   region: CSS class "ek-fields-line" switches it on inside that container,
   "ek-fields-box" keeps boxes inside it. Interactive Grid cells keep their
   own look, and so do the login page and anything inside class "ek-own-fields"
   (rev. 53). !important only because the app's own CSS sets field borders,
   radius and backgrounds with !important (see rev. 28 / 30).
   =================================================================== */
html.ek-fields-line body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password,
      .apex-item-group--popup-lov .a-Button--popupLOV, .a-Button--calendar):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *),
html body .ek-fields-line :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password,
      .apex-item-group--popup-lov .a-Button--popupLOV, .a-Button--calendar):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *) {
  border-style: solid !important;
  border-width: 0 0 1px 0 !important;
  border-color: var(--ek-border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  transition: border-color var(--ek-duration-fast) var(--ek-ease), box-shadow var(--ek-duration-fast) var(--ek-ease);
}
/* hover: a darker line */
html.ek-fields-line body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password):hover:not(:focus):not(:disabled):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *),
html body .ek-fields-line :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password):hover:not(:focus):not(:disabled):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *) {
  border-color: var(--ek-text-muted) !important;
}
/* focus: 2px accent line (1px border + 1px inset shadow, so nothing moves) */
html.ek-fields-line body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password):focus:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *),
html body .ek-fields-line :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      .apex-item-datepicker input, select.apex-item-select, textarea.apex-item-textarea,
      input.apex-item-number, input.apex-item-password):focus:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *) {
  border-color: var(--ek-brand-solid) !important;
  box-shadow: inset 0 -1px 0 var(--ek-brand-solid) !important;
}
/* validation error (APEX marks the item and its container) */
html.ek-fields-line body :is(.apex-page-item-error, .is-error .apex-item-text, .is-error .apex-item-popup-lov,
      .is-error .apex-item-datepicker input, .is-error .apex-item-select, .is-error .apex-item-textarea,
      .is-error .apex-item-number, .is-error .apex-item-password):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *),
html body .ek-fields-line :is(.apex-page-item-error, .is-error .apex-item-text, .is-error .apex-item-popup-lov,
      .is-error .apex-item-datepicker input, .is-error .apex-item-select, .is-error .apex-item-textarea,
      .is-error .apex-item-number, .is-error .apex-item-password):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *) {
  /* light: the error red; dark: a lighter red that still reads as red on navy */
  border-color: color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
}
/* disabled / read-only: dotted line */
html.ek-fields-line body :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      select.apex-item-select, textarea.apex-item-textarea, input.apex-item-number):disabled:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *),
html body .ek-fields-line :is(input.apex-item-text, input.apex-item-popup-lov, input.apex-item-datepicker,
      select.apex-item-select, textarea.apex-item-textarea, input.apex-item-number):disabled:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):not(:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) *) {
  border-bottom-style: dotted !important;
}
/* autofill: no light box behind the text */
html.ek-fields-line body :is(.apex-item-text, .apex-item-popup-lov, .apex-item-datepicker input):not(#ek_x):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]):-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--ek-bg) inset !important;
}

/* ---- rev. 54: the line is drawn under the WHOLE item ----------------------------------
   Multi-select / combobox (chips), popup LOV, select lists, date pickers and items with
   buttons (clear "x", calendar, LOV) are built from several boxes; in rev. 52 each kept
   its own border. Now the item wrapper (.t-Form-itemWrapper) of every text-like APEX
   item (container class apex-item-wrapper--<type>, as APEX renders it) draws ONE line
   under the whole item, and every box inside it loses its border and background.
   Chips (.a-Chip) keep their own chip look; the chip list and its input do not. Pop-up lists (role="listbox") are left alone. */
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-style: solid !important;
  border-width: 0 0 1px 0 !important;
  border-color: var(--ek-border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: border-color var(--ek-duration-fast) var(--ek-ease), box-shadow var(--ek-duration-fast) var(--ek-ease);
}
/* the boxes inside the item (input, select, combobox, chip list, LOV / calendar / clear buttons) */
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;          /* the item's own 2px accent line shows focus instead */
}
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea, button, .a-Button, [class*="apex-item"]):not(.a-Chip:not([class*="input"])):not([role="listbox"]):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea, button, .a-Button, [class*="apex-item"]):not(.a-Chip:not([class*="input"])):not([role="listbox"]):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  background: transparent !important;
}
/* hover / focus / error / disabled on the whole item */
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:hover:not(:focus-within):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:hover:not(:focus-within):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-color: var(--ek-text-muted) !important;
}
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:focus-within:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:focus-within:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-color: var(--ek-brand-solid) !important;
  box-shadow: inset 0 -1px 0 var(--ek-brand-solid) !important;
}
html.ek-fields-line body .is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .is-error .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(.apex-page-item-error):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line .is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .is-error .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(.apex-page-item-error):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-color: color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
}
html.ek-fields-line body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(:is(input, select, textarea):disabled):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]),
html body .ek-fields-line :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(:is(input, select, textarea):disabled):not(#ek_x):not(.a-GV *):not(.ek-fields-box *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *):not([class*="PopupLOV"]) {
  border-bottom-style: dotted !important;
}

/* ===================================================================
   OUTLINED FIELDS: MATERIAL DESIGN 3 (rev. 55) — Form fields = "Outlined"
   (html.ek-fields-outline since rev. 57; "Default" = neither class = the kit's
   normal fields)
   One 1px rounded outline (4px radius) around the WHOLE item (its
   .t-Form-itemWrapper, incl. LOV / calendar / clear buttons), 2px accent
   outline on focus, red on error. Items with the Floating label template
   (.t-Form-fieldContainer--floatingLabel) get the M3 notched label: the label
   sits on the top border, on the region colour (--ek-notch-bg). The label stays
   on the border (no "inside the field" state), so it never overlaps the value.
   =================================================================== */
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border: 1px solid var(--ek-border-strong) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 44px;
  padding-inline: 12px 4px !important;
  align-items: center;
  transition: border-color var(--ek-duration-fast) var(--ek-ease), box-shadow var(--ek-duration-fast) var(--ek-ease);
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea, button, .a-Button, [class*="apex-item"]):not(.a-Chip:not([class*="input"])):not([role="listbox"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea, button, .a-Button, [class*="apex-item"]):not(.a-Chip:not([class*="input"])):not([role="listbox"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  background: transparent !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:hover:not(:focus-within):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:hover:not(:focus-within):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border-color: var(--ek-text) !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:focus-within:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:focus-within:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border-color: var(--ek-brand-solid) !important;
  box-shadow: inset 0 0 0 1px var(--ek-brand-solid) !important;
}
html.ek-fields-outline body .is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(.apex-page-item-error):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(.apex-page-item-error):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border-color: color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ek-danger-base) 70%, var(--ek-danger)) !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(:is(input, select, textarea):disabled):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:has(:is(input, select, textarea):disabled):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  border-style: dashed !important;
  opacity: 0.75;
}

/* --- notched floating label (M3) --- */
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  position: relative;
  padding-top: 8px !important;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-inputContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-labelContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-labelContainer:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 24px);
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 2;
  pointer-events: none;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  position: static !important;
  display: inline-block !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  line-height: 16px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--ek-text-muted) !important;
  background: var(--ek-notch-bg, var(--ek-surface)) !important;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]):focus-within .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]):focus-within .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  color: var(--ek-brand) !important;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel.is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel.is-error:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-label:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  color: var(--ek-danger) !important;
}
/* the value sits in the middle of the box (no room reserved for an inside label) */
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select, textarea):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html.ek-fields-outline body .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper textarea:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box .t-Form-fieldContainer--floatingLabel:is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper textarea:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  padding-block: 10px !important;
}

/* --- rev. 56: every outlined item is the same height (44px) ---------------------------
   Some items (multi-select / combobox, select many) wrap their input in an extra
   container that keeps its own height, padding or margin (e.g. room for a label
   inside the field), so they came out taller than the others. Inside the outline
   those inner boxes now take no extra vertical space; the outline is 44px and only
   grows when there really is more content (several chips, a textarea). */
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper:not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  min-height: 44px !important;
  height: auto !important;
  padding-block: 0 !important;
  box-sizing: border-box !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper *:not(textarea):not(button):not(.a-Button):not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(.a-Icon):not([class*="fa-"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper *:not(textarea):not(button):not(.a-Button):not(.a-Chip:not([class*="input"])):not(.a-Chip:not([class*="input"]) *):not([role="listbox"]):not([role="listbox"] *):not(.a-Icon):not([class*="fa-"]):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  min-height: 0 !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(input, select):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  height: 42px !important;
  line-height: 42px;
}
html.ek-fields-outline body :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(button, .a-Button):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *),
html body .ek-fields-box :is([class*="apex-item-wrapper--text-field"], [class*="apex-item-wrapper--password"], [class*="apex-item-wrapper--number-field"], [class*="apex-item-wrapper--select-list"], [class*="apex-item-wrapper--popup-lov"], [class*="apex-item-wrapper--date-picker"], [class*="apex-item-wrapper--textarea"], [class*="apex-item-wrapper--combobox"], [class*="apex-item-wrapper--select-many"], [class*="apex-item-wrapper--select-one"], [class*="apex-item-wrapper--auto-complete"], [class*="apex-item-wrapper--color-picker"]) .t-Form-itemWrapper :is(button, .a-Button):not(#ek_x):not(.a-GV *):not(.t-PageBody--login *):not(.ek-own-fields *):not([class*="PopupLOV"] *) {
  height: 36px !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  align-self: center;
}