/*
 * Global Visual Overhaul — Vaadin Component Enhancements
 *
 * Upgrades default Vaadin component appearance across ALL views.
 * Applied globally via GlobalCssInitListener alongside design-tokens.css and aura-theme.css.
 * Uses --im-* and --aura-* variables for theme consistency.
 */

/* ─── Base Document ──────────────────────────────────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--im-typography-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--im-color-text-primary, #212121);
  background: var(--im-color-background, #ffffff);
}

/* ─── Integrated single-page scroll (Phase 390.2-05) ─────────────────────
 * The app shell scrolls as ONE page: the drawer scrolls together with the
 * content instead of being a fixed drawer with its own separate scrollbar
 * (the operator's "como una página integrada" request). Achieved by switching
 * AppLayout out of "content scrolling" (html/body locked to viewport height)
 * into body scrolling, and making the drawer position:absolute so it scrolls
 * with the document rather than staying viewport-fixed with its own scrollbar.
 * SCOPED to pages that actually use vaadin-app-layout via :has(), so the
 * auth/welcome surfaces (login, signup, forgot-password — no AppLayout) keep
 * their default full-viewport layout untouched.
 *
 * NOTE (drawer-top regression fix): 390.2-05 used `position: absolute` with NO
 * `top`, relying on the drawer's static position landing just below a single-row
 * (~96px) navbar. Phase 390.3 turned the masthead into a multi-row stack
 * (`::part(navbar){flex-wrap:wrap}`), which collapsed that static position to 0
 * so the drawer rendered BEHIND the masthead. Keep `position: absolute` (so the
 * drawer still scrolls with the document — the single-page look) but pin its
 * `top` to AppLayout's OWN navbar-offset custom property
 * `--_vaadin-app-layout-navbar-offset-size`, which the component measures from
 * its (fixed) navbar and keeps current on every resize via _updateOffsetSize().
 * That tracks the responsive / impersonation-dependent multi-row masthead height
 * for free — no custom observer needed. (Drawer push-vs-overlay is Vaadin-native:
 * it overlays only below max-width:800px OR max-height:600px; otherwise the
 * drawer pushes the content right.) */
html:has(vaadin-app-layout),
body:has(vaadin-app-layout) {
  block-size: auto;
  min-block-size: 100%;
}
body:has(vaadin-app-layout) vaadin-app-layout {
  block-size: auto;
  min-block-size: 100vh;
}
vaadin-app-layout::part(drawer) {
  position: absolute;
  inset-block-start: var(--_vaadin-app-layout-navbar-offset-size, 0px);
  block-size: auto;
  overflow: visible;
}

/* PHONE: the override above is a DESKTOP contract and must not reach overlay mode.
 *
 * Vaadin only guarantees the overlay drawer's geometry with its native
 * `position: fixed` (see @vaadin/app-layout base styles: `:host([overlay])
 * [part='drawer'] { top: 0; bottom: 0; z-index: 2 }` against a `position: fixed;
 * inset: 0` backdrop). The rule above replaces that with `position: absolute` +
 * a navbar-offset top, unconditionally — including below the 800px breakpoint
 * where THIS FILE forces `--vaadin-app-layout-drawer-overlay: true !important`.
 * The result on a phone is a document-anchored drawer whose backdrop stays
 * viewport-fixed: scroll down, tap the toggle, and the panel opens above the
 * visible area behind a dark backdrop with nothing on it. `overflow: visible`
 * compounds it — a long SideNav cannot scroll inside the panel.
 *
 * Restore Vaadin's native overlay geometry at phone width. 800px is the exact
 * breakpoint at which this file already flips the drawer into overlay mode
 * (below), so the two stay in lockstep; >800px keeps the single-page absolute
 * drawer verbatim and desktop is untouched. */
@media (max-width: 800px) {
  vaadin-app-layout::part(drawer) {
    position: fixed;
    inset-block: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* 5px separator between the drawer's right border (the vertical line) and the
 * main content PANEL. The routed view is itself the panel — it carries the
 * content background (rgb(13,17,23)) and otherwise sits flush against the
 * drawer border over the app-layout's gutter colour. Offset the panel's own
 * left edge by 5px so that gutter shows through as a thin separator.
 *
 * margin-inline-start moves the box edge (padding alone would only inset the
 * inner content, leaving the panel background touching the line). It MUST be
 * paired with width: calc(100% - 5px) — the view's border-box fills AppLayout's
 * drawer-offset region, so margin without the width reduction pushes the right
 * edge 5px past the region (clipped / "out of viewport" on platforms with
 * overlay/zero-width scrollbars, e.g. macOS, where there is no scrollbar slack
 * to absorb it).
 *
 * The `width` MUST be `!important`: Vaadin sets `width: 100%` as an INLINE style
 * on every routed view (setSizeFull / setWidthFull), and an inline declaration
 * out-specifies a plain stylesheet rule — without !important the calc is dead
 * and the live box reverts to `width:100% + margin:5px` (the exact 5px overflow).
 * With !important the 5px is reserved on the width side, so the right edge sits
 * exactly where it did before the separator — symmetric, overflow-proof on every
 * view/scrollbar/platform. RTL-safe via logical props. */
vaadin-app-layout > :not([slot]) {
  box-sizing: border-box;
  margin-inline-start: 5px;
  inline-size: calc(100% - 5px) !important;
}

/* Storefront shell reset: Storefront layout has no drawer and requires full symmetric centering. */
vaadin-app-layout.storefront-shell > :not([slot]) {
  box-sizing: border-box;
  margin: 0 !important;
  margin-inline-start: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
}


/* FM dashboard composes the .im-dash-* kit rows directly (it IS the .im-dash
 * container) but is a Vaadin VerticalLayout with no default gap, so the rows
 * butt together ("pegados"). Apply the canonical row-stack gap — the same
 * --dash-gap-stack the .im-dash container provides — without touching padding,
 * so the drawer-separator inset above keeps owning the horizontal edges. */
[data-view-chrome="dashboard-fm"] {
  gap: var(--dash-gap-stack, 16px);
}

/* Consistent drawer PUSH (non-overlay) on desktop, regardless of window height.
 * Vaadin's default overlays the drawer below `@media (max-width:800px) OR
 * (max-height:600px)`. The max-height:600px clause makes a wide-but-short window
 * (e.g. a Chrome window with a little less vertical room) OVERLAY while a taller
 * window (Safari) PUSHES — looking like a per-browser difference when it's really
 * just the window size crossing the breakpoint. Override AppLayout's overlay
 * custom property so it only overlays on genuinely narrow (phone) widths and
 * pushes otherwise. !important to beat the component's own media-query default. */
vaadin-app-layout {
  --vaadin-app-layout-drawer-overlay: false !important;
}
@media (max-width: 800px) {
  vaadin-app-layout {
    --vaadin-app-layout-drawer-overlay: true !important;
  }
}

/* ─── Headings ───────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  color: var(--im-color-text-primary, #1a2332);
  letter-spacing: -0.3px;
  line-height: 1.2;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* ─── Vaadin Buttons ─────────────────────────────────────────────────── */

vaadin-button {
  border-radius: var(--im-border-radius-m, 8px);
  font-weight: 600;
  transition: all 0.2s ease;
}

vaadin-button[theme~="primary"] {
  background: var(--im-color-primary, #1976D2);
  border-radius: var(--im-border-radius-m, 8px);
  font-weight: 600;
  letter-spacing: 0.2px;
}

vaadin-button[theme~="primary"]:hover {
  background: var(--im-color-primary-dark, #1D4ED8);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--im-color-primary, #2563EB) 30%, transparent);
}

vaadin-button[theme~="tertiary"] {
  /* Phase 564 WS1 (SEED-033): tertiary button LABELS are text, so they must clear
   * WCAG 2.2 AA 4.5:1. The brand teal --im-color-primary (#007F8C) on the light
   * raised surface (#EEF2F5) measured only 4.22:1 (axe color-contrast, serious) —
   * e.g. /my-account tertiary buttons. Use the darker brand shade
   * --im-color-primary-dark (#005E68 ≈ 6.66:1 on #EEF2F5), which keeps the Río de
   * la Plata teal identity while passing AA. Dark mode is retired (light-first is
   * the only skin, D-03 Phase 437.1), so tertiary buttons are always on light. */
  color: var(--im-color-primary-dark, #005E68);
}

/* ─── Vaadin Text Fields / Inputs ────────────────────────────────────── */

vaadin-text-field,
vaadin-text-area,
vaadin-email-field,
vaadin-password-field,
vaadin-number-field,
vaadin-integer-field,
vaadin-combo-box,
vaadin-select,
vaadin-date-picker,
vaadin-time-picker {
  --vaadin-input-field-border-radius: var(--im-border-radius-m, 8px);
  /* Phase 363 Plan 05: WCAG 2.2 AA palette-aware form text */
  --vaadin-input-field-value-color: var(--text);
  --vaadin-input-field-label-color: var(--text-2);
  --vaadin-input-field-helper-color: var(--text-2);
  /* SEED-026 #3 (Phase 392 a11y): placeholder uses a dedicated AA-passing
   * token (--im-placeholder-color, per-palette in aura-theme.css), NOT
   * --text-mute. --text-mute placeholders were 3.1–4.0:1 on the dark V19
   * field surfaces — a WCAG 2.2 AA failure axe flagged `serious` on the
   * /government/requests combo-box filters. The fallback keeps the old
   * value for any palette that has not (yet) defined the dedicated token. */
  --vaadin-input-field-placeholder-color: var(--im-placeholder-color, var(--text-mute));
}

/* ─── Field focus affordance (sketch 081, variant A) ─────────────────────
 *
 * WHY: Vaadin only paints a focus indicator under `:host([focus-ring])`, and
 * that attribute is set on KEYBOARD focus only. Clicking into a field produced
 * no visual signal at all, so an operator filling a dense form had nothing but
 * the caret to tell them where they were.
 *
 * HOW: one activation selector sets --im-field-on to 1; every visual property
 * is computed from that single switch. Changing the activation condition is a
 * one-line edit rather than a rewrite of the block.
 *
 * The focus colour is DERIVED from the tone the field already carries, so an
 * invalid field focuses in an intense red rather than switching to the accent
 * and hiding its own error state. The tone swap on [invalid] is the only
 * per-state rule needed.
 *
 * WHY color-mix TOWARD BLACK rather than Aura's oklch(from … calc(c * N) …):
 * boosting chroma pushes all four of our tones OUT of the sRGB gamut, leaving
 * the result to the browser's gamut mapping — and the mapped colour is not the
 * same family. Measured on #C73535 (--im-color-error), a 1.3x chroma boost
 * lands on #dc0016: a brighter, different red, not "the same tone, louder".
 * Interpolating toward black in OKLab is in-gamut by construction and hue-
 * faithful: #C73535 -> #a82b2b, #007F8C -> #006a75, #B26A00 -> #965800,
 * #16845B -> #116e4b. Measured perceptual distance ~0.07 OKLab (clearly
 * visible) and 5.7:1 - 6.9:1 against a white field surface, comfortably past
 * the 3:1 that WCAG 2.2 SC 1.4.11 asks of a focus indicator. It also drops the
 * relative-colour @supports fork, since color-mix has the wider support.
 *
 * This is the ORIENTATION layer (which item has focus, mouse or keyboard).
 * It is independent of --vaadin-focus-ring-color / --vaadin-focus-ring-width,
 * which remain the keyboard accessibility ring. Both can be visible at once.
 *
 * NOTE: `--vaadin-input-field-focused-border-color` — used by three of our
 * component recipes before this block existed — is read by NOTHING in
 * @vaadin. Those declarations were inert; removed alongside this change.
 */

:where(vaadin-text-field, vaadin-text-area, vaadin-email-field,
       vaadin-password-field, vaadin-number-field, vaadin-integer-field,
       vaadin-big-decimal-field, vaadin-combo-box, vaadin-multi-select-combo-box,
       vaadin-select, vaadin-date-picker, vaadin-time-picker) {
  --im-field-tone: var(--im-color-primary, #007F8C);
  --im-field-on: 0;
  --im-field-tone-vivid: color-mix(in oklab, var(--im-field-tone) 88%, #000);
  --im-field-glow: color-mix(in oklab, var(--im-field-tone) 22%, transparent);
}

/* An invalid field keeps reading as invalid while focused. */
:where(vaadin-text-field, vaadin-text-area, vaadin-email-field,
       vaadin-password-field, vaadin-number-field, vaadin-integer-field,
       vaadin-big-decimal-field, vaadin-combo-box, vaadin-multi-select-combo-box,
       vaadin-select, vaadin-date-picker, vaadin-time-picker)[invalid] {
  --im-field-tone: var(--im-color-error, #C73535);
}

/* The ONLY activation selector. :focus-within (not :has(:focus-visible))
 * because these are text-entry controls, where a mouse click SHOULD mark the
 * field, and because it keeps the field marked while an overlay (combo-box
 * dropdown, date-picker calendar) holds the actual focus. Buttons, chips and
 * clickable rows must NOT use this selector — the ring would stay stuck after
 * a click; those keep Vaadin's native [focus-ring]. */
vaadin-text-field:focus-within, vaadin-text-area:focus-within,
vaadin-email-field:focus-within, vaadin-password-field:focus-within,
vaadin-number-field:focus-within, vaadin-integer-field:focus-within,
vaadin-big-decimal-field:focus-within, vaadin-combo-box:focus-within,
vaadin-multi-select-combo-box:focus-within, vaadin-select:focus-within,
vaadin-date-picker:focus-within, vaadin-time-picker:focus-within {
  --im-field-on: 1;
}

/* Everything below is computed from --im-field-on. At rest the halo resolves
 * to `0 0 0 0px`, i.e. invisible, and Aura's resting elevation is preserved by
 * re-declaring --aura-shadow-xs in the same shadow list. Scoped away from
 * readonly/disabled to match Aura's own `:not([readonly], [disabled])` rule. */
vaadin-text-field:not([readonly], [disabled])::part(input-field),
vaadin-text-area:not([readonly], [disabled])::part(input-field),
vaadin-email-field:not([readonly], [disabled])::part(input-field),
vaadin-password-field:not([readonly], [disabled])::part(input-field),
vaadin-number-field:not([readonly], [disabled])::part(input-field),
vaadin-integer-field:not([readonly], [disabled])::part(input-field),
vaadin-big-decimal-field:not([readonly], [disabled])::part(input-field),
vaadin-combo-box:not([readonly], [disabled])::part(input-field),
vaadin-multi-select-combo-box:not([readonly], [disabled])::part(input-field),
vaadin-select:not([readonly], [disabled])::part(input-field),
vaadin-date-picker:not([readonly], [disabled])::part(input-field),
vaadin-time-picker:not([readonly], [disabled])::part(input-field) {
  box-shadow: 0 0 0 calc(var(--im-field-on) * 3px) var(--im-field-glow),
              var(--aura-shadow-xs);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* Enforce uniform input height across all single-line input controls (combo, select, date, text, number) */
:where(
  vaadin-text-field,
  vaadin-email-field,
  vaadin-password-field,
  vaadin-number-field,
  vaadin-integer-field,
  vaadin-big-decimal-field,
  vaadin-combo-box,
  vaadin-select,
  vaadin-date-picker,
  vaadin-time-picker
)::part(input-field) {
  box-sizing: border-box;
  block-size: var(--fm-ctrl-h, 32px);
  min-block-size: var(--fm-ctrl-h, 32px);
}

/* Border is set only while focused so that a component recipe's resting
 * border (e.g. select.recipe.css) is never overwritten at rest. */
vaadin-text-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-text-area:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-email-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-password-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-number-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-integer-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-big-decimal-field:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-combo-box:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-multi-select-combo-box:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-select:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-date-picker:focus-within:not([readonly], [disabled])::part(input-field),
vaadin-time-picker:focus-within:not([readonly], [disabled])::part(input-field) {
  border-color: var(--im-field-tone-vivid);
}

@media (prefers-reduced-motion: reduce) {
  vaadin-text-field::part(input-field), vaadin-text-area::part(input-field),
  vaadin-email-field::part(input-field), vaadin-password-field::part(input-field),
  vaadin-number-field::part(input-field), vaadin-integer-field::part(input-field),
  vaadin-big-decimal-field::part(input-field), vaadin-combo-box::part(input-field),
  vaadin-multi-select-combo-box::part(input-field), vaadin-select::part(input-field),
  vaadin-date-picker::part(input-field), vaadin-time-picker::part(input-field) {
    transition: none;
  }
}

/* Phase 363 Plan 05: WCAG 2.2 AA palette-aware vaadin-checkbox + vaadin-details */
vaadin-checkbox {
  --vaadin-checkbox-label-color: var(--text);
}
vaadin-details {
  --vaadin-details-summary-color: var(--text);
}

/* ─── Vaadin Dialogs ─────────────────────────────────────────────────── */

vaadin-dialog-overlay::part(overlay) {
  border-radius: var(--im-border-radius-l, 12px);
  box-shadow: var(--im-elevation-l, 0 8px 24px rgba(0,0,0,0.2));
}

/* ─── Vaadin Notifications ───────────────────────────────────────────── */

vaadin-notification-card {
  border-radius: var(--im-border-radius-m, 8px);
  box-shadow: var(--im-elevation-m, 0 4px 12px rgba(0,0,0,0.15));
}

/* ─── Vaadin Grids ───────────────────────────────────────────────────── */

vaadin-grid {
  border-radius: var(--im-border-radius-m, 8px);
  overflow: hidden;
  border: 1px solid var(--im-color-border, #e0e0e0);
}

/* ─── Vaadin Tabs ────────────────────────────────────────────────────── */

vaadin-tab {
  font-weight: 500;
  letter-spacing: 0.2px;
}

vaadin-tab[selected] {
  font-weight: 600;
  color: var(--im-color-primary, #1976D2);
}

/* ─── Vaadin App Layout ──────────────────────────────────────────────── */

vaadin-app-layout::part(navbar) {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

vaadin-app-layout::part(drawer) {
  border-inline-end: 1px solid var(--im-color-border-light, #eeeeee);
}

/* ─── Vaadin Side Nav ────────────────────────────────────────────────── */

vaadin-side-nav-item {
  border-radius: var(--im-border-radius-s, 4px);
  margin: 2px 8px;
  transition: background 0.15s ease;
}

vaadin-side-nav-item[active] {
  background: var(--im-color-primary-surface, #E3F2FD);
  color: var(--im-color-primary, #1976D2);
  font-weight: 600;
}

/* ─── Vaadin Login Form ──────────────────────────────────────────────── */

vaadin-login-form-wrapper {
  border-radius: var(--im-border-radius-l, 12px);
  box-shadow: var(--im-elevation-m, 0 4px 12px rgba(0,0,0,0.15));
}

/* ─── Card Pattern (reusable utility class) ──────────────────────────── */

.im-card,
.aura-surface {
  background: var(--im-color-surface, #ffffff);
  border: 1px solid var(--im-color-border-light, #eeeeee);
  border-radius: var(--im-border-radius-l, 12px);
  box-shadow: var(--im-elevation-xs, 0 1px 2px rgba(0,0,0,0.05));
  padding: var(--im-spacing-l, 24px);
  transition: box-shadow 0.2s ease;
}

.im-card:hover {
  box-shadow: var(--im-elevation-s, 0 2px 4px rgba(0,0,0,0.1));
}

/* ─── Badge / Chip Enhancements ──────────────────────────────────────── */

[theme~="badge"] {
  border-radius: var(--im-border-radius-full, 9999px);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 2px 10px;
}

[theme~="badge"][theme~="success"] {
  background: var(--im-color-success-surface, #E8F5E9);
  color: var(--im-color-success-text, #2E7D32);
}

[theme~="badge"][theme~="error"] {
  background: var(--im-color-error-surface, #FFEBEE);
  color: var(--im-color-error-text, #C62828);
}

[theme~="badge"][theme~="contrast"] {
  background: var(--im-color-neutral-200, #EEEEEE);
  color: var(--im-color-neutral-700, #616161);
}

/* ─── Empty State Pattern ────────────────────────────────────────────── */

.portal-empty-state,
[class*="empty-state"] {
  text-align: center;
  padding: 48px 24px;
  color: var(--im-color-text-secondary, #757575);
}

.portal-empty-state vaadin-icon,
[class*="empty-state"] vaadin-icon {
  inline-size: 56px;
  block-size: 56px;
  color: var(--im-color-neutral-400, #BDBDBD);
  margin-block-end: 16px;
}

/* ─── Error Page Styling ─────────────────────────────────────────────── */

.v-system-error {
  font-family: var(--im-typography-font-family);
  max-inline-size: 600px;
  margin: 80px auto;
  text-align: center;
  padding: 48px;
}

/* ─── Scrollbar Enhancement ──────────────────────────────────────────── */

::-webkit-scrollbar {
  inline-size: 8px;
  block-size: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--im-color-neutral-300, #E0E0E0);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--im-color-neutral-400, #BDBDBD);
}

/* ─── Selection Color ────────────────────────────────────────────────── */

::selection {
  background: color-mix(in srgb, var(--im-color-primary, #1976D2) 20%, transparent);
  color: var(--im-color-text-primary, #212121);
}

/* ─── Link Styling ───────────────────────────────────────────────────── */

a {
  color: var(--im-color-primary, #1976D2);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── Vaadin Horizontal/Vertical Layout defaults ─────────────────────── */

vaadin-horizontal-layout,
vaadin-vertical-layout {
  /* Prevent jarring white flash on load */
  background: inherit;
}

/* Phase 363 Plan 05: marketplace banner + generic spacing-layout copy
   (V19 dark palettes — child text inherits incorrectly without this pin) */
vaadin-horizontal-layout[role="banner"] > span,
vaadin-horizontal-layout[theme="spacing"] > div {
  color: var(--text-2);
}

/* ─── Dark mode component overrides RETIRED (Phase 437.1 D-03/D-05) ─────────
   The dark-scheme grid/card/scrollbar overrides were deleted at the atomic
   Civic flip. Civic light is the only skin; these components inherit the
   light base tokens (and the Aura grid/scrollbar normalization in
   aura-theme.css) directly. */

/* ─── Tenant Lens Accent (Phase 324) ──────────────────────────────── */

.tenant-lens-active {
  border-inline-start: 3px solid var(--im-lens-accent-color, var(--aura-primary-color));
  background: linear-gradient(
    90deg,
    var(--im-lens-accent-color-10pct, transparent) 0px,
    transparent 8px
  );
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sidebar-tenant-selector-area {
  padding: var(--im-spacing-s, 8px) var(--im-spacing-m, 16px);
  border-block-end: 1px solid var(--im-color-border-light, #E0E0E0);
  margin-block-end: var(--im-spacing-s, 8px);
}

.sidebar-tenant-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--im-spacing-xs, 4px);
  padding: var(--im-spacing-xs, 4px) var(--im-spacing-s, 8px);
  background: var(--im-color-primary-surface, #E3F2FD);
  /* WCAG 2.2 AA (1.4.3) — axe `color-contrast`, fixed 2026-07-24.
     --im-color-primary (#007F8C) on --im-color-primary-surface (#D7F1F3) is
     4.02:1. This badge is 14px/600, which is NOT "large text", so AA requires
     4.5:1. --im-color-primary-dark (#005E68) on the same surface is 6.34:1.
     Scoped to this badge deliberately: retinting the global --im-color-primary
     token would repaint every primary surface in the app. */
  color: var(--im-color-primary-dark, #005E68);
  border-radius: var(--im-border-radius-s, 4px);
  font-size: var(--im-typography-font-size-m, 14px);
  font-weight: var(--im-typography-font-weight-semibold, 600);
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-viewing-as {
  font-size: var(--im-typography-font-size-xs, 11px);
  font-weight: 400;
  color: var(--im-color-text-secondary, #757575);
  padding: 0 var(--im-spacing-m, 16px);
  margin-block-end: var(--im-spacing-xs, 4px);
}

.sidebar-tenant-selector-area vaadin-combo-box {
  inline-size: 100%;
}

/* Dark-mode lens-component overrides RETIRED (Phase 437.1 D-03/D-05) — Civic
   light is the only skin; the lens badge + selector inherit the light base. */

/* ============================================================================
   SHOMRIX BRANDING & UNIFIED MASTHEAD (Full-width top bar, Drawer below)
   ============================================================================ */
.im-shell--navrail::part(drawer) {
  inset-block-start: var(--_vaadin-app-layout-navbar-offset-size, var(--im-shell-head-h, 52px)) !important;
  inset-block-end: var(--vaadin-app-layout-navbar-offset-bottom, 0px) !important;
}

.im-shell--navrail .im-navrail__head {
  display: none !important;
}

.im-shell-action-center__resting,
.im-shell-action-center:empty {
  display: none !important;
}

.im-shell--navrail .im-shell-wordmark--navbar {
  display: inline-flex !important;
  align-items: center !important;
  height: 95% !important;
  max-height: 95% !important;
  align-self: center !important;
}

.im-shell--navrail .im-shell-identity-row {
  border-inline-start: var(--fm-spine, 3px) solid var(--fm-accent) !important;
  padding-inline-start: 18px !important;
}

.im-shell--navrail .im-shell-toggle--navbar {
  display: inline-flex !important;
  flex: none !important;
  --vaadin-button-background: rgba(255, 255, 255, 0.06) !important;
  --vaadin-button-border-color: rgba(0, 210, 255, 0.22) !important;
  --vaadin-button-text-color: #00d2ff !important;
  --vaadin-button-shadow: none !important;
  --vaadin-button-border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(0, 210, 255, 0.22) !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  color: #00d2ff !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.im-shell--navrail .im-shell-toggle--navbar:hover {
  --vaadin-button-background: rgba(0, 210, 255, 0.16) !important;
  --vaadin-button-border-color: rgba(0, 210, 255, 0.5) !important;
  background: rgba(0, 210, 255, 0.16) !important;
  border-color: rgba(0, 210, 255, 0.5) !important;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.25) !important;
  color: #ffffff !important;
}

.im-shell--navrail .im-shell-toggle--navbar::part(icon) {
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M9 3v18%22/%3E%3C/svg%3E') !important;
  mask-repeat: no-repeat !important;
  mask-position: 50% !important;
  mask-size: 100% !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M9 3v18%22/%3E%3C/svg%3E') !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: 50% !important;
  -webkit-mask-size: 100% !important;
  background-color: currentColor !important;
  width: 16px !important;
  height: 16px !important;
}

[dir="rtl"] .im-shell--navrail .im-shell-toggle--navbar::part(icon),
:root[dir="rtl"] .im-shell--navrail .im-shell-toggle--navbar::part(icon) {
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M15 3v18%22/%3E%3C/svg%3E') !important;
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M15 3v18%22/%3E%3C/svg%3E') !important;
}

/* ─── Shomrix Masthead Search Capsule (Spotlight / ⌘K) ──────────────── */

.im-shell-identity-row .coreline-omnibar-pill,
.coreline-omnibar-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  --vaadin-button-background: rgba(255, 255, 255, 0.08) !important;
  --vaadin-button-border-color: rgba(255, 255, 255, 0.16) !important;
  --vaadin-button-text-color: #cbd5e1 !important;
  --vaadin-button-shadow: none !important;
}

.im-shell-identity-row .coreline-omnibar-pill:hover,
.coreline-omnibar-pill:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(0, 210, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.22) !important;
  --vaadin-button-background: rgba(255, 255, 255, 0.14) !important;
  --vaadin-button-border-color: rgba(0, 210, 255, 0.5) !important;
}

.coreline-omnibar-pill vaadin-icon {
  color: #00d2ff !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  flex: none !important;
}

.coreline-omnibar-pill .coreline-omnibar-prompt,
.coreline-omnibar-pill > span:first-of-type {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.01em !important;
  margin: 0 4px !important;
  user-select: none !important;
}

.coreline-omnibar-pill:hover .coreline-omnibar-prompt,
.coreline-omnibar-pill:hover > span:first-of-type {
  color: #ffffff !important;
}

.coreline-omnibar-pill .coreline-omnibar-badge,
.coreline-omnibar-pill > span:last-of-type {
  font-family: var(--fm-mono, ui-monospace, SFMono-Regular, monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  line-height: 1.3 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  margin-inline-start: 4px !important;
}

/* Masthead utility icons (help & notifications) luminous balance */
.im-shell-identity-row vaadin-button[theme~="tertiary"]:not(.coreline-omnibar-pill) vaadin-icon {
  color: #94a3b8 !important;
  transition: color 0.15s ease !important;
}

.im-shell-identity-row vaadin-button[theme~="tertiary"]:not(.coreline-omnibar-pill):hover vaadin-icon {
  color: #00d2ff !important;
}

.coreline-wordmark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 95% !important;
  max-height: 95% !important;
  align-self: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.coreline-wordmark .shomrix-logo-img {
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.45)) !important;
}

.coreline-authheader {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 4px 24px !important;
  box-sizing: border-box !important;
}

.coreline-authheader .coreline-wordmark {
  height: 46px !important;
  max-height: 90% !important;
  align-self: center !important;
}

.coreline-authheader .coreline-wordmark .shomrix-logo-img {
  filter: none !important;
}

/* When the full vector logo is active, visually clip duplicate DOM spans */
.shomrix-wordmark--full-logo .coreline-mark,
.shomrix-wordmark--full-logo .coreline-brand-text,
.coreline-wordmark:has(.shomrix-logo-img) > span,
.coreline-wordmark:has(.shomrix-logo-img) .coreline-mark,
.coreline-wordmark:has(.shomrix-logo-img) .coreline-brand-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Fallback for active sessions before JVM reload: render full 5:1 vector logo via CSS background */
.coreline-wordmark:not(:has(.shomrix-logo-img)),
.im-shell-wordmark--navbar:not(:has(.shomrix-logo-img)) {
  aspect-ratio: 320 / 64 !important;
  width: auto !important;
  background: transparent url('images/shomrix-logo.svg') no-repeat left center / contain !important;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.45)) !important;
}

[dir="rtl"] .coreline-wordmark:not(:has(.shomrix-logo-img)),
:root[dir="rtl"] .coreline-wordmark:not(:has(.shomrix-logo-img)),
.coreline-wordmark--hebrew:not(:has(.shomrix-logo-img)) {
  background-image: url('images/shomrix-logo-hebrew.svg') !important;
  background-position: right center !important;
}

.coreline-wordmark:not(:has(.shomrix-logo-img)) .coreline-mark,
.coreline-wordmark:not(:has(.shomrix-logo-img)) .coreline-brand-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.coreline-wordmark .coreline-mark {
  inline-size: 28px !important;
  block-size: 28px !important;
  border-radius: 0 !important;
  background: transparent url('images/shomrix-shield.svg') no-repeat center / contain !important;
  color: transparent !important;
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.45)) !important;
}

.coreline-brand-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}

.coreline-brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  font-family: var(--fm-font, "IBM Plex Sans", system-ui, sans-serif) !important;
  line-height: 1.15 !important;
}

.coreline-brand-sub {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: #00d2ff !important;
  text-transform: uppercase !important;
  margin-top: 1px !important;
  line-height: 1 !important;
}

.coreline-wordmark--hebrew .coreline-brand-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  direction: rtl !important;
}

.coreline-wordmark--hebrew .coreline-brand-sub {
  direction: rtl !important;
}