/* Shopify-inspired workspace. Shared implementation, explicitly adopted by Help's AppShell.
   Native Vaadin controls and all action/validation/permission contracts remain authoritative.
   Source: owner's 2026-10-25 design handoff; desktop density, 44px touch targets on narrow/coarse UI. */
html:root {
 --ws-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 --ws-bg: #f1f1f1; --ws-sidebar: #ebebeb; --ws-surface: #fff; --ws-subtle: #fafafa;
 --ws-hover: #f6f6f6; --ws-head: #f7f7f7; --ws-line: #e3e3e3; --ws-divider: #ebebeb;
 --ws-input-line: #8a8a8a; --ws-text: #303030; --ws-muted: #616161;
 --ws-header: var(--ws-surface); --ws-menu-text: var(--ws-text); --ws-field-text: var(--ws-text);
 --ws-brand: var(--xh-tenant-primary, #1d63a8); --ws-brand-hover: #164d84;
 --ws-link: #1d63a8; --ws-focus: #1d63a8; --ws-selected: #e3eef9;
 --ws-success: #135c34; --ws-success-bg: #d9f2e3; --ws-success-bar: #2e9e5e;
 --ws-warning: #5e4200; --ws-warning-bg: #fff1c2; --ws-warning-bar: #d9a100;
 --ws-error: #8e1f0b; --ws-error-bg: #fde2dd; --ws-error-bar: #d9472b;
 --ws-card-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 8%);
 --ws-control: 32px; --ws-icon: 28px;
}
html:root[theme~="dark"] {
 color-scheme: dark;
 --ws-bg: #1a1a1a; --ws-sidebar: #222; --ws-surface: #292929; --ws-subtle: #252525;
 --ws-hover: #343434; --ws-head: #303030; --ws-line: #484848; --ws-divider: #3c3c3c;
 --ws-input-line: #858585; --ws-text: #f1f1f1; --ws-muted: #b7b7b7;
 --ws-header: var(--ws-surface); --ws-menu-text: var(--ws-text); --ws-field-text: var(--ws-text);
 --ws-link: #91c5ff; --ws-focus: #91c5ff; --ws-selected: #243b53;
 --ws-success: #9ce4b6; --ws-success-bg: #153d28; --ws-success-bar: #4bbd7a;
 --ws-warning: #f8dc83; --ws-warning-bg: #463b19; --ws-warning-bar: #dfb942;
 --ws-error: #ffb4a8; --ws-error-bg: #522a26; --ws-error-bar: #ef8876;
 --ws-card-shadow: 0 0 0 1px #484848, 0 1px 2px rgb(0 0 0 / 18%);
}
/* Map both the Aura bridge and existing shared/app component tokens. These mappings
   deliberately outrank the legacy theme's own !important maps in either load order. */
html:root, html:root[theme~="dark"] {
 --lumo-font-family: var(--ws-font) !important; --xh-font-family: var(--ws-font) !important;
 --xh-font-heading: var(--ws-font) !important; --xh-font-body: var(--ws-font) !important;
 --xh-sp-font-heading: var(--ws-font) !important; --xh-sp-font-body: var(--ws-font) !important;
 --lumo-font-size-m: .8125rem !important; --lumo-font-size-s: .8125rem !important;
 --lumo-font-size-xs: .75rem !important; --lumo-font-size-l: .9375rem !important;
 --lumo-font-size-xl: 1.25rem !important; --lumo-font-size-xxl: 1.5rem !important;
 --lumo-font-size-xxxl: 1.75rem !important;
 --xh-surface-1: var(--ws-bg) !important; --xh-surface-2: var(--ws-surface) !important; --xh-surface-3: var(--ws-subtle) !important;
 --lumo-base-color: var(--ws-surface) !important; --lumo-body-text-color: var(--ws-text) !important;
 --lumo-header-text-color: var(--ws-text) !important; --lumo-secondary-text-color: var(--ws-muted) !important;
 --lumo-tertiary-text-color: var(--ws-muted) !important;
 --lumo-primary-color: var(--ws-brand) !important; --lumo-primary-text-color: var(--ws-link) !important;
 --lumo-primary-contrast-color: #fff !important; --lumo-primary-color-10pct: var(--ws-selected) !important;
 --lumo-primary-color-50pct: color-mix(in srgb, var(--ws-link) 50%, transparent) !important;
 --lumo-contrast-5pct: var(--ws-subtle) !important; --lumo-contrast-10pct: var(--ws-divider) !important;
 --lumo-contrast-20pct: var(--ws-line) !important; --lumo-contrast-30pct: var(--ws-input-line) !important;
 --lumo-error-color: var(--ws-error) !important; --lumo-error-text-color: var(--ws-error) !important;
 --lumo-success-color: var(--ws-success) !important; --lumo-success-text-color: var(--ws-success) !important;
 --lumo-border-radius-m: 8px !important; --lumo-border-radius-l: 12px !important;
 --lumo-size-m: var(--ws-control) !important; --lumo-size-s: 28px !important; --lumo-size-xs: 24px !important;
 --ximunhu-bg-primary: var(--ws-surface) !important; --ximunhu-bg-secondary: var(--ws-bg) !important;
 --ximunhu-bg-tertiary: var(--ws-subtle) !important; --ximunhu-border: var(--ws-line) !important;
 --ximunhu-text: var(--ws-text) !important; --ximunhu-text-secondary: var(--ws-muted) !important;
 --xh-sp-text: var(--ws-text) !important; --xh-sp-text-strong: var(--ws-text) !important;
 --xh-sp-text-muted: var(--ws-muted) !important; --xh-sp-text-muted-2: var(--ws-muted) !important;
 --xh-sp-app-bg: var(--ws-bg) !important; --xh-sp-page-bg: var(--ws-bg) !important;
 --xh-sp-rail-bg: var(--ws-surface) !important; --xh-sp-surface: var(--ws-surface) !important;
 --xh-sp-field-bg: var(--ws-surface) !important; --xh-sp-field-bg-2: var(--ws-subtle) !important;
 --xh-sp-border: var(--ws-line) !important; --xh-sp-border-card: var(--ws-line) !important;
 --xh-sp-border-soft: var(--ws-divider) !important; --xh-sp-border-btn: var(--ws-line) !important;
 --xh-sp-track: var(--ws-line) !important; --xh-sp-primary: var(--ws-brand) !important;
 --xh-sp-primary-ink: var(--ws-link) !important; --xh-sp-primary-soft: var(--ws-selected) !important;
 --xh-sp-primary-ultralight: var(--ws-selected) !important; --xh-sp-primary-border: var(--ws-line) !important;
 --xh-sp-green: var(--ws-success) !important; --xh-sp-green-fill: var(--ws-success-bar) !important;
 --xh-sp-green-soft: var(--ws-success-bg) !important; --xh-sp-orange: var(--ws-warning) !important;
 --xh-sp-orange-fill: var(--ws-warning-bar) !important; --xh-sp-orange-soft: var(--ws-warning-bg) !important;
 --xh-sp-red: var(--ws-error) !important; --xh-sp-red-fill: var(--ws-error-bar) !important;
 --xh-sp-red-soft: var(--ws-error-bg) !important; --xh-sp-radius-chip: 6px !important;
 --xh-dialog-radius: 12px !important; --xh-dialog-inset: 20px !important;
 --xh-dialog-surface: var(--ws-surface) !important; --xh-dialog-border: var(--ws-line) !important;
 --xh-dialog-text: var(--ws-text) !important; --xh-dialog-muted: var(--ws-muted) !important;
 --xh-dialog-control-border: var(--ws-input-line) !important; --xh-dialog-focus: var(--ws-focus) !important;
 --xh-dialog-action: var(--ws-brand) !important; --xh-dialog-error: var(--ws-error) !important;
}
html:root body { background: var(--ws-bg) !important; color: var(--ws-text); font: .8125rem/1.5 var(--ws-font) !important; }
html:root body :is(h1,h2,h3,h4,h5,h6) { font-family: var(--ws-font) !important; color: var(--ws-text); letter-spacing: -.02em; }
html:root body h1 { font-size: 1.25rem; } html:root body h2 { font-size: 1.125rem; } html:root body h3 { font-size: .9375rem; }
html:root body :is(p,label,span,div) { font-family: inherit; }
html:root body a { color: var(--ws-link); }
/* Native controls across every route, including forms, editors, menus and dialogs. */
html:root body vaadin-button, html:root body vaadin-menu-bar-button {
 min-height: var(--ws-control); height: auto; min-width: 0; margin-block: 0;
 padding: 5px 12px; border-radius: 8px; font: 600 .8125rem/1.25 var(--ws-font);
 color: var(--ws-text); background: var(--ws-surface); border: 1px solid var(--ws-line);
 box-shadow: inset 0 -1px 0 rgb(0 0 0 / 8%); text-transform: none; letter-spacing: normal;
}
/* The host owns spacing. The Lumo bridge also pads the label, otherwise 32px
   controls grow to 39px and icon buttons inherit the same unnecessary padding. */
html:root body :is(vaadin-button,vaadin-menu-bar-button)::part(label) { padding-block: 0; }
/* The legacy Lumo bridge removes flex gaps. Restore space for real icon/text slots,
   without shifting icon-only actions or adding padding to the glyph itself. */
html:root body :is(vaadin-button,vaadin-menu-bar-button):not([theme~="icon"]):has(> [slot="prefix"], > [slot="suffix"]) { column-gap: 6px; }
html:root body vaadin-button:hover, html:root body vaadin-menu-bar-button:hover { background: var(--ws-hover); }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="primary"], html:root body .em-btn-primary {
 background: var(--ws-brand) !important; color: #fff !important; border-color: transparent;
 box-shadow: inset 0 -1px 0 rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 18%);
}
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="tertiary"],
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="tertiary-inline"] { background: transparent; border-color: transparent; box-shadow: none; }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="error"] { color: var(--ws-error); }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="error"][theme~="primary"] { background: var(--ws-error) !important; color: var(--ws-surface) !important; }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[disabled] { opacity: .5; cursor: default; }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[focus-ring] { outline: 2px solid var(--ws-focus) !important; outline-offset: 2px; }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="icon"] { min-width: var(--ws-icon); min-height: var(--ws-icon); height: var(--ws-icon); padding: 5px; }
html:root body :is(vaadin-button,vaadin-menu-bar-button)[theme~="icon"]::part(label) { display: flex; align-items: center; justify-content: center; }
html:root body :is(vaadin-button,vaadin-menu-bar-button) vaadin-icon { width: 16px; height: 16px; }
html:root body :is(vaadin-text-field,vaadin-text-area,vaadin-email-field,vaadin-password-field,vaadin-number-field,vaadin-integer-field,vaadin-combo-box,vaadin-multi-select-combo-box,vaadin-select,vaadin-date-picker,vaadin-time-picker) {
 --vaadin-input-field-background: var(--ws-surface); --vaadin-input-field-border-color: var(--ws-input-line);
 --vaadin-input-field-border-radius: 8px; --vaadin-input-field-label-font-size: .8125rem;
 --vaadin-input-field-value-font-size: .8125rem; --vaadin-input-field-height: var(--ws-control);
 font-family: var(--ws-font); padding-block: 4px;
}
html:root body :is(vaadin-text-field,vaadin-text-area,vaadin-email-field,vaadin-password-field,vaadin-number-field,vaadin-integer-field,vaadin-combo-box,vaadin-multi-select-combo-box,vaadin-select,vaadin-date-picker,vaadin-time-picker)::part(input-field) {
 background: var(--ws-surface) !important; color: var(--ws-field-text) !important;
 border: 1px solid var(--ws-input-line) !important; border-radius: 8px !important; box-shadow: none;
 min-height: var(--ws-control); padding-inline: 10px;
}
html:root body :is(vaadin-text-field,vaadin-text-area,vaadin-email-field,vaadin-password-field,vaadin-number-field,vaadin-integer-field,vaadin-combo-box,vaadin-multi-select-combo-box,vaadin-select,vaadin-date-picker,vaadin-time-picker)[focus-ring]::part(input-field) {
 outline: 2px solid var(--ws-focus); outline-offset: 2px;
}
html:root body :is(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)[invalid]::part(input-field) { border-color: var(--ws-error) !important; }
html:root body :is(vaadin-checkbox,vaadin-radio-button) { font-size: .8125rem; }
html:root body :is(vaadin-checkbox,vaadin-radio-button)::part(label) { color: var(--ws-text); }
html:root body :is(vaadin-tabs,vaadin-radio-group)[theme~="segmented"] { background: var(--ws-bg); border-radius: 8px; padding: 2px; gap: 2px; }
html:root body vaadin-tab { font: 550 .8125rem var(--ws-font); min-height: var(--ws-control); padding: 6px 12px; color: var(--ws-muted); }
html:root body vaadin-tab[selected] { color: var(--ws-text); background: var(--ws-surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--ws-line); }
html:root body vaadin-tab::before, html:root body vaadin-tab::after { display: none; }
html:root body vaadin-grid { background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 12px; font-size: .8125rem; }
html:root body vaadin-grid::part(header-cell) { background: var(--ws-head); color: var(--ws-muted); font-weight: 600; min-height: 34px; padding: 6px 12px; }
html:root body vaadin-grid::part(body-cell) { background: var(--ws-surface); color: var(--ws-text); padding: 6px 12px; min-height: 44px; border-bottom: 1px solid var(--ws-divider); }
html:root body vaadin-grid::part(odd-row-cell) { background: var(--ws-subtle); }
/* Selection takes precedence over alternating row stripes. */
html:root body vaadin-grid::part(selected-row-cell) { background: var(--ws-selected); }
html:root body :is(vaadin-context-menu,vaadin-menu-bar,vaadin-select,vaadin-combo-box,vaadin-multi-select-combo-box,vaadin-date-picker,vaadin-time-picker,vaadin-tooltip,vaadin-notification-card)::part(overlay) {
 background: var(--ws-surface); color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
}
html:root body :is(vaadin-context-menu-item,vaadin-item) { font: .8125rem var(--ws-font); color: var(--ws-text); min-height: var(--ws-control); }
/* Opaque workspace dialogs need no glass effect. Aura's backdrop-filter establishes a
   containing block for the tour's fixed-position popover, adding the dialog offset twice. */
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(overlay) { backdrop-filter: none; }
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(header) { padding: 16px 20px; border-bottom: 1px solid var(--ws-divider); }
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(title) { font: 650 1rem/1.4 var(--ws-font); color: var(--ws-text); }
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(content) { padding: 20px; }
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(footer) { background: var(--ws-subtle); padding: 12px 20px; border-top: 1px solid var(--ws-divider); gap: 8px; }
html:root body vaadin-details { border-color: var(--ws-line); border-radius: 8px; }
html:root body vaadin-details-summary { font: 600 .8125rem/1.4 var(--ws-font); min-height: 44px; color: var(--ws-text); }
html:root body vaadin-upload { border-color: var(--ws-line); border-radius: 10px; color: var(--ws-muted); }
html:root body :is(vaadin-avatar,[theme~="badge"]) { border-radius: 6px; }
html:root body :is(.ql-toolbar,.ql-container,.gjs-editor,.driver-popover) { font-family: var(--ws-font); border-color: var(--ws-line); background: var(--ws-surface); color: var(--ws-text); }
html:root body .driver-popover { border-radius: 12px; box-shadow: var(--ws-card-shadow); }
html:root body .driver-popover-title { font: 650 1rem var(--ws-font); }
/* Shell: logo/account in the topbar, navigation retains every role-aware entry. */
html:root body vaadin-app-layout { background: var(--ws-bg) !important; --vaadin-app-layout-drawer-width: 240px; }
html:root body vaadin-app-layout::part(navbar) { min-height: 56px; height: 56px; background: var(--ws-header) !important; border-bottom: 1px solid var(--ws-line); padding: 0 16px; gap: 8px; box-shadow: none; }
html:root body vaadin-app-layout::part(drawer) { background: var(--ws-sidebar) !important; border: 0; width: 240px; }
html:root body .xh-topbar { gap: 16px; min-width: 0; height: 56px; padding: 0 !important; }
/* Render the complete approved image as one unit. Only scale proportionally; never crop,
   recolour, substitute its image, or rebuild its lettering with HTML. */
html:root body .xh-topbar .drawer-logo { width: 184px !important; height: 44px !important; object-fit: contain; flex-shrink: 0; margin-right: auto; filter: none !important; }
/* Also neutralise the withdrawn presentation in an already-restored component tree. */
html:root body .xh-topbar .xh-brand { display: contents; }
html:root body .xh-brand-copy { display: none !important; }
@media (max-width: 480px) {
 html:root body .xh-user-menu:has(vaadin-avatar) { max-width: 44px; }
 html:root body .xh-user-menu:has(vaadin-avatar) vaadin-menu-bar-button { width: 44px; padding-inline: 4px; margin-inline: 0; }
 html:root body .xh-user-menu vaadin-menu-bar-item > div:has(vaadin-avatar) { font-size: 0; gap: 0 !important; }
}
html:root body .xh-topbar h2 { font-size: .8125rem !important; font-weight: 500; color: var(--ws-muted); }
html:root body .xh-user-menu { flex-shrink: 0; margin: 0; }
html:root body .xh-user-menu vaadin-avatar { width: 24px; height: 24px; background: var(--ws-selected); color: var(--ws-link); }
html:root body vaadin-side-nav { padding: 12px 8px; }
html:root body vaadin-side-nav-item::part(link) { border-radius: 8px; min-height: 32px; padding: 6px 8px; color: var(--ws-menu-text) !important; font: 600 .8125rem/1.4 var(--ws-font); }
html:root body vaadin-side-nav-item[current]::part(content) { background: var(--ws-surface) !important; box-shadow: 0 1px 0 rgb(0 0 0 / 6%); }
html:root body vaadin-side-nav-item::part(link):hover { background: var(--ws-hover); }
html:root body vaadin-side-nav-item vaadin-icon { width: 18px; height: 18px; color: var(--ws-muted); }
html:root body vaadin-side-nav-item[current] vaadin-icon { color: var(--ws-link); }
html:root body vaadin-app-layout > footer { padding: 8px 12px; color: var(--ws-muted); font-size: .75rem; }
html:root body vaadin-app-layout > footer a { font-size: .75rem; color: var(--ws-muted); }
html:root body vaadin-app-layout > footer vaadin-button { justify-content: flex-start; font-weight: 400; font-size: .75rem; }
html:root body .bottom-nav { background: var(--ws-surface) !important; border-top: 1px solid var(--ws-line); }
/* Shared list, admin and settings surfaces inherit the same restrained cards. */
html:root body :is(.card,.admin-card,.settings-card,.profile-card,.dashboard-card,.config-card,.stat-card,.section-card,.content-card) { background: var(--ws-surface) !important; color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 12px; box-shadow: var(--ws-card-shadow); }
html:root body :is(.toolbar,.grid-toolbar,.view-toolbar) { gap: 8px; padding-block: 8px; }
html:root body :is(.em-root,.sp-schedule) { background: var(--ws-bg) !important; padding: 20px 32px 40px !important; }
html:root body .em-list { max-width: 1100px; margin-inline: auto; padding: 0; min-height: 0; }
html:root body .em-listcard, html:root body .em-managecard { background: transparent !important; box-shadow: none !important; border: 0 !important; overflow: visible; }
html:root body .em-list__header { padding: 0 0 16px; background: transparent; gap: 12px; }
html:root body .em-list__title, html:root body .em-header__name { font: 700 1.25rem/1.3 var(--ws-font) !important; letter-spacing: -.02em; }
html:root body .em-list__subtitle { font-size: .75rem; }
html:root body .em-list__actions { gap: 8px; }
html:root body .em-list__searchrow { background: var(--ws-surface); padding: 8px 16px; border: 1px solid var(--ws-line); border-radius: 12px 12px 0 0; }
html:root body .em-list__rows { padding: 0; background: var(--ws-surface); border: 1px solid var(--ws-line); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; }
html:root body .em-erow { padding: 12px 16px; gap: 12px; border-bottom: 1px solid var(--ws-divider); border-radius: 0; background: var(--ws-surface); box-shadow: none; }
html:root body .em-erow:hover { background: var(--ws-subtle); transform: none; }
html:root body .em-erow__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--ws-selected); color: var(--ws-link); }
html:root body .em-erow__name { font: 650 .8125rem/1.4 var(--ws-font); }
html:root body .em-erow__meta { font-size: .75rem; }
html:root body :is(.em-erow__status,.em-header__status,.em-day__note,.em-shift__tag,.shift-date-header__desc-badge) { border-radius: 6px; padding: 1px 7px; font-size: .75rem; text-transform: none; letter-spacing: normal; }
html:root body :is(.em-erow__sqbtn,.em-act,.em-chev,.em-day__vis) { min-width: var(--ws-icon); width: var(--ws-icon); height: var(--ws-icon); min-height: var(--ws-icon); padding: 4px; border: 0; background: transparent; box-shadow: none; color: var(--ws-muted) !important; }
html:root body .em-act--danger { color: var(--ws-error) !important; }
html:root body .em-erow__actions { gap: 4px; flex-wrap: wrap; }
html:root body .em-managecard { max-width: 1120px; margin-inline: auto; }
html:root body .em-header { padding: 0 0 16px; background: transparent !important; border: 0; }
html:root body .em-header__main { gap: 16px; padding-top: 8px; }
html:root body .em-crumbs { padding: 0; min-height: 28px; }
html:root body .em-header__url { background: transparent; padding: 0; font-size: .75rem; color: var(--ws-muted); }
html:root body .em-header__placesnum { font-size: .8125rem; }
html:root body .em-header__right { gap: 8px; align-items: center; flex-wrap: wrap; }
html:root body .em-body { gap: 16px; background: transparent !important; align-items: flex-start; height: auto !important; }
html:root body :is(.em-days,.em-shifts) { background: var(--ws-surface) !important; border: 1px solid var(--ws-line); border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 6%); height: auto !important; overflow: hidden; }
html:root body .em-days { min-width: 240px; width: 260px !important; flex-shrink: 0; padding: 0; }
html:root body .em-shifts { min-width: 0; }
html:root body .em-days__header { padding: 12px 16px; border-bottom: 1px solid var(--ws-divider); }
html:root body .em-days__title { font-size: .9375rem; }
html:root body .em-days__cards { padding: 6px; gap: 2px; }
html:root body .em-day { padding: 8px 10px; margin: 0; border: 0; border-radius: 8px; box-shadow: none; background: transparent; }
html:root body .em-day--active { background: var(--ws-selected); }
html:root body .em-day__weekday { font-size: .8125rem; }
html:root body :is(.em-day__date,.em-day__sub,.em-day__shiftcount,.em-day__xy) { font-size: .75rem; }
html:root body .em-day__bar { height: 4px; }
html:root body .em-day-add { margin: 0; width: 100%; border: 0; border-top: 1px solid var(--ws-divider); border-radius: 0; }
html:root body .em-shifts__header { padding: 12px 16px; border-bottom: 1px solid var(--ws-divider); gap: 8px; }
html:root body .em-shifts__title { font-size: .9375rem; }
html:root body .em-shifts__meta { font-size: .75rem; }
html:root body .em-shifts__toolbar { padding: 8px 16px; gap: 8px; }
html:root body .em-shifts__cards { padding: 0; gap: 0; }
html:root body .em-shift { padding: 10px 16px; min-height: 44px; border: 0; border-bottom: 1px solid var(--ws-divider); border-radius: 0; box-shadow: none; background: var(--ws-surface); gap: 10px; }
html:root body .em-shift:hover { background: var(--ws-subtle); transform: none; }
html:root body .em-shift__tile { background: transparent !important; color: var(--ws-text) !important; min-width: 48px; width: 48px; height: auto; border-radius: 0; }
html:root body .em-shift__tilenum { font: 500 .8125rem var(--ws-font) !important; }
html:root body .em-shift__tilelabel { font-size: .6875rem; color: var(--ws-muted); opacity: 1; }
html:root body .em-shift__name { font: 600 .8125rem/1.4 var(--ws-font); }
html:root body .em-shift__time { font-size: .75rem; font-variant-numeric: tabular-nums; }
html:root body .em-shift__metarow { gap: 12px; }
html:root body .em-shift__bar { height: 4px; max-width: 100px; }
html:root body .em-shift__statuslabel { font-size: .75rem; }
html:root body .em-shift__actions { gap: 2px; }
html:root body .em-legend { padding: 8px 16px; }
/* Public schedule: compact information, status chips, all registration variants retained. */
html:root body .sp-schedule { max-width: 824px !important; margin-inline: auto; }
html:root body .sp-schedule h1 { font-size: 1.25rem !important; }
html:root body .sp-event-actions { gap: 8px; }
html:root body .sp-event-subtitle { font-size: .8125rem; }
html:root body :is(.sp-event-block,.sp-location-card,.sp-overall) { background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 12px; padding: 16px; }
html:root body .sp-location-card { padding: 0; grid-template-columns: 1fr 260px; }
html:root body .sp-location-card__map { min-height: 140px; }
html:root body .sp-location-card__body { padding: 16px; }
html:root body .sp-location-card__name { font-size: .8125rem; }
html:root body .sp-location-card__label { text-transform: none; letter-spacing: normal; }
html:root body .shift-filter-component { background: var(--ws-surface) !important; border: 1px solid var(--ws-line) !important; border-radius: 12px; padding: 12px 16px !important; }
html:root body .shift-date-header { background: var(--ws-surface) !important; border: 1px solid var(--ws-line) !important; border-radius: 12px 12px 0 0 !important; padding: 10px 16px !important; margin-bottom: 0 !important; }
html:root body .shift-date-header { container: shift-day / inline-size; }
html:root body .shift-date-header__row { display: grid; grid-template-columns: var(--ws-icon) auto minmax(0,1fr) auto auto auto; gap: 6px 8px; }
html:root body .shift-date-header__toggle { grid-column: 1; }
html:root body .shift-date-header__date { grid-column: 2; font-size: .875rem; line-height: 1.4; min-width: 0; }
html:root body .shift-date-header__desc-badge { grid-column: 3; min-width: 0; justify-self: start; overflow-wrap: anywhere; }
html:root body .shift-date-header__row > [theme~="badge"] { grid-column: 4; }
html:root body .shift-date-header__stat { grid-column: 5; margin-left: 0; }
html:root body .shift-date-header__toggle-label { grid-column: 6; text-align: right; }
html:root body .shift-date-header__toggle-label::before { content: none; }
@container shift-day (max-width: 640px) {
 html:root body .shift-date-header__row { grid-template-columns: var(--ws-icon) minmax(0,1fr) minmax(0,1fr); }
 html:root body .shift-date-header__date,
 html:root body .shift-date-header__desc-badge,
 html:root body .shift-date-header__row > [theme~="badge"] { grid-column: 2 / -1; overflow-wrap: anywhere; white-space: normal !important; }
 html:root body .shift-date-header__stat { grid-column: 1 / 3; }
 html:root body .shift-date-header__toggle-label { grid-column: 3; }
 html:root body :is(.shift-date-header__stat,.shift-date-header__toggle-label) { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: .75rem; }
}
/* Disclosure is secondary to the date; keep a square target when the button rotates. */
html:root body .shift-date-header__toggle { width: var(--ws-icon) !important; min-width: var(--ws-icon) !important; }
html:root body .shift-date-header__toggle vaadin-icon { width: 12px; height: 12px; color: var(--ws-muted); }
html:root body .shift-date-body { gap: 0 !important; border: 1px solid var(--ws-line); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; background: var(--ws-surface); }
html:root body .shift-card { border: 0 !important; border-bottom: 1px solid var(--ws-divider) !important; border-radius: 0 !important; padding: 12px 16px !important; gap: 14px; margin: 0 !important; background: var(--ws-surface) !important; box-shadow: none !important; transform: none !important; }
html:root body .shift-card__status { width: 56px; min-width: 56px; height: 44px; border-radius: 8px; }
html:root body .shift-card__status-count { font: 700 .9375rem var(--ws-font); }
html:root body .shift-card__status-label { font-size: .625rem; letter-spacing: normal; text-transform: none; }
html:root body .shift-card__name { font: 650 .8125rem/1.4 var(--ws-font) !important; }
html:root body .shift-card__time-pill { background: transparent; border: 0; padding: 0; font-size: .75rem; }
html:root body .shift-arrival-time { background: var(--ws-bg); color: var(--ws-muted); border-radius: 6px; padding: 1px 6px; font-size: .75rem; }
html:root body .shift-card__progress-bar { height: 4px; max-width: 160px; }
html:root body .shift-card__progress-label { font-size: .75rem; }
html:root body .shift-card__chip { padding: 0 6px; font-size: .75rem; border-radius: 5px; background: var(--ws-bg); }
html:root body .shift-card__register-pill { height: auto !important; min-height: var(--ws-control) !important; border-radius: 8px !important; padding: 5px 12px !important; font-size: .8125rem !important; background: var(--ws-brand) !important; color: #fff !important; }
html:root body vaadin-button.sp-segment { min-height: var(--ws-control) !important; }
html:root body .sp-segment-inner { min-height: var(--ws-control); display: flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 8px; }
html:root body .sp-segment-inner > span:not(.sp-segment-sub) { font-size: .8125rem !important; font-weight: 600 !important; line-height: 1.25 !important; }
/* Retain the explanatory accessible name without a second visual button row. */
html:root body .sp-segment-sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* AI workspace, including support/operator dialogs. */
html:root body .ai-workspace { --ai-surface: var(--ws-surface); --ai-subtle: var(--ws-bg); --ai-border: var(--ws-line); --ai-muted: var(--ws-muted); --ai-accent-ink: var(--ws-link); background: var(--ws-bg); padding: 16px 24px 24px; height: calc(100dvh - 56px); gap: 0; }
html:root body .ai-header { padding: 4px 0 10px; }
html:root body .ai-heading h2 { font-size: 1.25rem; }
html:root body .ai-status { padding: 0 0 10px; font-size: .75rem; }
html:root body .ai-body { gap: 16px; grid-template-columns: minmax(0,1fr) 340px; }
html:root body :is(.ai-chat,.ai-preview) { border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-surface); overflow: hidden; }
html:root body .ai-messages { padding: 20px; }
html:root body .ai-message { font-size: .8125rem; line-height: 1.55; margin-bottom: 20px; }
html:root body .ai-message-user { background: var(--ws-bg); border: 0; border-radius: 12px 12px 4px 12px; padding: 10px 12px; }
html:root body .ai-message-assistant { padding: 0; }
html:root body .ai-message > span:first-child { font-size: .6875rem; color: var(--ws-muted); opacity: 1; }
html:root body .ai-chat-questions { border: 1px solid var(--ws-line); border-radius: 12px; overflow: hidden; }
html:root body .ai-chat-questions h4 { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--ws-divider); font-size: .875rem; }
html:root body .ai-question { display: grid; grid-template-columns: minmax(140px, .8fr) minmax(0, 1.6fr); align-items: center; padding: 8px 16px; margin: 0; gap: 16px; border: 0; border-radius: 0; border-bottom: 1px solid var(--ws-divider); background: var(--ws-surface); }
html:root body .ai-question p { margin: 0; font-size: .8125rem; font-weight: 600; }
html:root body .ai-question-answer-row { margin: 0; gap: 6px; }
html:root body .ai-question-choices { display: flex; gap: 2px; padding: 2px; background: var(--ws-bg); border-radius: 8px; }
html:root body .ai-question-choices vaadin-button { min-width: 42px; padding: 3px 10px; background: transparent; border-color: transparent; box-shadow: none; }
html:root body .ai-question-choices vaadin-button[aria-pressed="true"] { background: var(--ws-surface); box-shadow: 0 0 0 1px var(--ws-line); }
html:root body .ai-question-input { min-width: 0; padding: 0; }
html:root body .ai-question-input::part(input-field) { min-height: var(--ws-control); }
html:root body .ai-answer-actions { margin: 0; padding: 10px 16px; background: var(--ws-subtle); }
html:root body .ai-answer-actions p { font-size: .75rem; }
html:root body .ai-composer { padding: 8px 20px 16px; background: var(--ws-surface); border: 0; }
html:root body .ai-composer vaadin-text-area::part(input-field) { min-height: 44px; background: var(--ws-surface) !important; }
html:root body .ai-composer-actions { gap: 8px; }
html:root body .ai-composer-actions > vaadin-upload { min-width: 0; border: 0; padding: 0; }
html:root body .ai-composer-actions > vaadin-upload::part(primary-buttons) { flex-wrap: wrap; gap: 6px 10px; }
html:root body .ai-composer-actions > vaadin-upload::part(drop-label) { margin: 0; font-size: .75rem; }
html:root body .ai-composer-actions > vaadin-upload::part(drop-label-icon) { display: none; }
html:root body .ai-attachments { gap: 6px; margin-bottom: 6px; }
html:root body .ai-attachment-chip { max-width: 100%; min-width: 0; font-size: .75rem; }
html:root body .ai-attachment-chip::part(label) { overflow: hidden; text-overflow: ellipsis; }
html:root body .ai-attachment-chip[data-approved="false"] { border-style: dashed; }
html:root body .ai-attachment-notice { color: var(--lumo-error-text-color); font-size: .75rem; overflow-wrap: anywhere; }
html:root body .ai-attachment-notice:empty { display: none; }
html:root body .ai-chat.ai-drag-over { outline: 2px dashed var(--ws-brand); outline-offset: -5px; background: var(--ws-bg); }
html:root body .ai-preview-content { padding: 16px; }
html:root body .ai-preview h3 { font-size: .9375rem; margin: 4px 0; }
html:root body .ai-preview :is(p,.ai-event-location) { font-size: .75rem; line-height: 1.5; }
html:root body .ai-preview-content a:not([theme]) { display: flex; margin-block: 6px; padding: 5px 10px; border: 1px solid var(--ws-line); border-radius: 8px; text-decoration: none; color: var(--ws-text); font-size: .75rem; }
html:root body .ai-preview vaadin-details { border: 0; border-bottom: 1px solid var(--ws-divider); border-radius: 0; }
html:root body .ai-preview-ready { gap: 0; }
html:root body .ai-support-launcher { min-height: 32px; border-radius: 18px; background: var(--ws-surface); box-shadow: 0 0 0 1px var(--ws-line), 0 4px 12px rgb(0 0 0 / 12%); }
/* Standalone authentication/entry pages adopt the same surfaces and typography. */
html:root body :is(.login-view,.login-page,.auth-view,.password-reset-view,.email-verification-view,.registration-view,.landing-help-page) { background: var(--ws-bg) !important; font-family: var(--ws-font) !important; color: var(--ws-text) !important; }
html:root body :is(.login-card,.auth-card,.password-reset-card,.verification-card,.registration-card) { background: var(--ws-surface) !important; border: 1px solid var(--ws-line); border-radius: 12px; box-shadow: var(--ws-card-shadow); color: var(--ws-text); }
html:root body :is(.landing-help-page,.login-view,.login-page) h1 { font-family: var(--ws-font) !important; letter-spacing: -.03em; }
@media (min-width: 1281px) {
 html:root body .em-shift { display: grid; grid-template-columns: 18px 48px minmax(180px,1fr) auto; }
 html:root body .em-shift__mid { display: grid; grid-template-columns: minmax(140px,1fr) minmax(180px,1fr); gap: 12px; align-items: center; }
 html:root body .em-shift__metarow { flex-wrap: wrap; }
}
@media (max-width: 1280px) {
 html:root body .em-body { flex-direction: column; }
 html:root body .em-days { width: 100% !important; }
 html:root body .em-days__cards { display: flex; overflow-x: auto; }
 html:root body .em-day { min-width: 210px; }
 html:root body .ai-body { grid-template-columns: minmax(0,1fr) 290px; }
}
@media (pointer: coarse), (max-width: 760px) {
 html:root { --ws-control: 44px; --ws-icon: 44px; }
 html:root body vaadin-side-nav-item::part(link) { min-height: 44px; }
 html:root body :is(.em-chev,.em-act,.em-erow__sqbtn) { min-width: 44px; min-height: 44px; }
}
@media (max-width: 760px) {
 html:root body vaadin-app-layout::part(navbar) { padding: 0 8px; }
 html:root body .xh-topbar { gap: 6px; }
 html:root body .xh-topbar .drawer-logo { width: 128px !important; height: 32px !important; }
 html:root body .xh-topbar h2 { display: none; }
 html:root body .xh-user-menu { max-width: 110px; overflow: hidden; }
 html:root body :is(.em-root,.sp-schedule) { padding: 16px 12px calc(16px + var(--xh-bottom-nav-clearance,0px)) !important; }
 html:root body .em-list__header { flex-wrap: wrap; }
 html:root body .em-list__actions { flex-wrap: wrap; }
 html:root body .em-erow { flex-wrap: wrap; }
 html:root body .em-erow__actions { width: 100%; justify-content: flex-end; }
 html:root body .em-shift { flex-wrap: wrap; padding: 12px; }
 html:root body .em-shift__actions { width: 100%; justify-content: flex-end; }
 html:root body .em-header__main { flex-direction: column; }
 html:root body .em-header__right { width: 100%; }
 html:root body .sp-location-card { grid-template-columns: 1fr; }
 html:root body .shift-card { flex-wrap: wrap; padding: 12px !important; }
 html:root body .shift-card__action { margin-left: auto; }
 html:root body .ai-body { display: block; }
 html:root body .ai-chat, html:root body .ai-preview { height: 100%; }
 html:root body .ai-messages { padding: 12px; }
 html:root body .ai-composer { padding: 4px 12px 8px; }
 html:root body .ai-question { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; }
 html:root body .ai-answer-actions { padding: 8px 12px; }
 html:root body .ai-header { padding: 0; }
 html:root body .ai-heading h2 { font-size: 1rem; }
 html:root body .ai-support-floating { bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); right: 12px; }
 html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(content) { padding: 16px; }
 html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(footer) { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
 html:root body *, html:root body *::before, html:root body *::after { scroll-behavior: auto !important; }
}

html:root body .custom-login-view { background: var(--ws-bg) !important; font-family: var(--ws-font) !important; }
html:root body .custom-login-view > vaadin-vertical-layout { background: var(--ws-surface) !important; color: var(--ws-text); border-radius: 12px !important; box-shadow: var(--ws-card-shadow) !important; padding: 24px; }
html:root body vaadin-login-form-wrapper { background: var(--ws-surface); --vaadin-login-form-background: var(--ws-surface); color: var(--ws-text); }
html:root body :is(.super-admin-users-view,.super-admin-settings-view,.profile-editor-view,.tenant-settings-view,.email-admin-view,.report-list-view,.ai-operations) { background: var(--ws-bg) !important; color: var(--ws-text); padding: 20px 32px; }
html:root body :is(.profile-editor-panel,.profile-preview-panel,.tenant-settings-header) { background: var(--ws-surface) !important; border: 1px solid var(--ws-line); border-radius: 12px; padding: 16px; }
html:root body vaadin-app-layout > :is(vaadin-vertical-layout,div)[slot=""] { box-sizing: border-box; }
html:root body :is(.ql-toolbar,.ql-toolbar button,.ql-picker,.ql-container) { color: var(--ws-text); }
html:root body .ql-toolbar .ql-stroke { stroke: var(--ws-text); }
html:root body .ql-toolbar .ql-fill { fill: var(--ws-text); }
html:root body vaadin-notification-card { background: var(--ws-surface); color: var(--ws-text); border-radius: 10px; border: 1px solid var(--ws-line); box-shadow: var(--ws-card-shadow); }
@media (max-width:760px) {
 html:root body :is(.super-admin-users-view,.super-admin-settings-view,.profile-editor-view,.tenant-settings-view,.email-admin-view,.report-list-view,.ai-operations) { padding: 16px 12px; }
}
/* Multiline forms retain enough writing space; the chat composer has its own compact size. */
html:root body vaadin-text-area::part(input-field) { min-height: 70px; }
html:root body :is(.ai-composer,.ai-question) vaadin-text-area::part(input-field) { min-height: var(--ws-control); }
html:root body :is(vaadin-dialog,vaadin-confirm-dialog) [slot="footer"] vaadin-button,
html:root body :is(vaadin-dialog,vaadin-confirm-dialog) vaadin-button[slot="footer"],
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(confirm-button),
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(cancel-button),
html:root body :is(vaadin-dialog,vaadin-confirm-dialog)::part(reject-button) { min-height: var(--ws-control); }
html:root body .shift-card__status { background: var(--sp-st-soft) !important; color: var(--sp-st) !important; }
html:root body .shift-card__status-count, html:root body .shift-card__status-label { color: inherit !important; opacity: 1; }
html:root body .ai-header, html:root body .ai-status { background: transparent; }
html:root body .em-list__columns { display: grid; grid-template-columns: minmax(180px,1fr) 50px 65px 160px 300px; gap: 12px; padding: 8px 16px; background: var(--ws-head); border-inline: 1px solid var(--ws-line); color: var(--ws-muted); font-size: .75rem; }
html:root body .em-erow__metrics { display: grid; grid-template-columns: 50px 65px 160px; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
html:root body .em-erow__capacity { display: flex; align-items: center; gap: 8px; }
html:root body .em-erow__bar { height: 6px; border-radius: 3px; background: var(--ws-line); flex: 1; overflow: hidden; }
html:root body .em-erow__bar > div { height: 100%; background: var(--ws-brand); }
html:root body .em-erow__actions { max-width: 230px; }
html:root body .em-shifts__columns { display: none; }
@media (min-width: 1281px) {
 html:root body .em-shifts__columns, html:root body .em-shift { display: grid; grid-template-columns: 18px minmax(100px,1fr) 90px 70px 45px 90px 128px; column-gap: 8px; width: 100%; box-sizing: border-box; }
 html:root body .em-shifts__columns { padding: 8px 16px; background: var(--ws-head); color: var(--ws-muted); font-size: .75rem; }
 html:root body .em-shift__mid, html:root body .em-shift__metarow { display: contents; }
 html:root body .em-chevs { grid-column: 1; grid-row: 1; }
 html:root body .em-shift__namerow { grid-column: 2; grid-row: 1; }
 html:root body .em-shift__time { grid-column: 3; grid-row: 1; }
 html:root body .em-shift__bar { grid-column: 4; grid-row: 1; width: 100%; }
 html:root body .em-shift__tile { grid-column: 5; grid-row: 1; width: auto; }
 html:root body .em-shift__statuslabel { grid-column: 6; grid-row: 1; font-weight: 600; }
 html:root body .em-shift__actions { grid-column: 7; grid-row: 1; }
 html:root body .em-shift__clock { display: none; }
 html:root body .em-shift:has(.em-shift__check) .em-shift__check { grid-column: 1; grid-row: 2; }
}
@media (max-width: 1200px) { html:root body .em-list__columns { display: none; } html:root body .em-erow__metrics { grid-template-columns: 40px 50px 120px; } }
@media (max-width: 760px) { html:root body .em-erow__metrics { width: 100%; grid-template-columns: 50px 65px minmax(120px,1fr); } html:root body .em-erow__actions { max-width: none; } }
/* Other shared pages use these legacy tokens directly: legal, auth, reports,
   tenant/profile settings, statistics, template editors and onboarding. */
html:root, html:root[theme~="dark"] {
 --xh-neutral-900: var(--ws-text); --xh-neutral-800: var(--ws-text); --xh-neutral-700: var(--ws-text);
 --xh-neutral-600: var(--ws-muted); --xh-neutral-500: var(--ws-muted); --xh-neutral-400: var(--ws-input-line);
 --xh-neutral-300: var(--ws-line); --xh-neutral-200: var(--ws-divider); --xh-neutral-100: var(--ws-bg); --xh-neutral-50: var(--ws-subtle);
 --xh-surface-0: var(--ws-surface); --xh-surface-warm: var(--ws-subtle); --xh-surface-cool: var(--ws-subtle);
 --xh-surface-tint: var(--ws-selected); --xh-surface-glass-soft: var(--ws-subtle); --xh-surface-glass-strong: var(--ws-surface);
 --lumo-shade-5pct: var(--ws-subtle); --lumo-shade-10pct: var(--ws-divider);
 --lumo-error-color-10pct: var(--ws-error-bg); --lumo-success-color-10pct: var(--ws-success-bg);
}
html:root body :is(.static-content-page,.password-reset-view,.oauth-profile-completion-view,.become-host-view,.multi-registration-thank-you,.event-map-view,.changelog-view,.system-email-template-view) { background: var(--ws-bg) !important; color: var(--ws-text); }
html:root body :is(.static-page-content,.thank-you-content,.feature-card,.step-card,.benefit-card,.hero-preview-card,.event-card,.profile-dialog-section) { background: var(--ws-surface); border: 1px solid var(--ws-line); border-radius: 12px; box-shadow: var(--ws-card-shadow); }
html:root body :is(.static-page-header,.landing-header) { background: var(--ws-surface) !important; border-bottom: 1px solid var(--ws-line); backdrop-filter: none; }
html:root body :is(.tenant-user-header,.tenant-user-button-bar,.tenant-settings-buttons) { gap: 8px; flex-wrap: wrap; }
html:root body .landing-help-page { --landing-accent-strong: var(--ws-link); --landing-accent-soft: var(--ws-selected); --landing-muted: var(--ws-muted); }
html:root body .landing-help-page .hero-title { font-size: clamp(2rem,4vw,3rem) !important; }
html:root body .landing-help-page .landing-hero { padding-block: 48px; }
html:root body .landing-help-page .landing-section { padding-block: 36px; }
html:root body .landing-help-page .section-title { font-size: 1.5rem; }
html:root body :is(.hero-pill,.landing-language,.step-badge) { border-radius: 8px; }
html:root body :is(.hero-logo,.landing-brand-logo) { filter: none; }
html:root body :is(vaadin-upload-file,vaadin-grid-sorter,vaadin-grid-filter,vaadin-date-picker-month-calendar,vaadin-tabsheet) { font-family: var(--ws-font); color: var(--ws-text); }
html:root body vaadin-accordion-panel { border-color: var(--ws-line); }
html:root body :is(.ql-snow .ql-picker-options,.ql-snow .ql-tooltip) { background: var(--ws-surface); color: var(--ws-text); border-color: var(--ws-line); box-shadow: var(--ws-card-shadow); }
html:root body :is(.ai-excel-downloads a,.ai-excel-summary a) { display: flex; padding: 5px 10px; margin-block: 6px; color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 8px; text-decoration: none; }
html:root body .ai-excel-downloads a:hover { background: var(--ws-hover); }
html:root body .ai-excel-downloads a:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }

@media (pointer: coarse) and (min-width: 1281px) {
 html:root body .em-shift__actions { flex-wrap: wrap; }
}
/* Legacy Help navigation used important 11px vertical padding; replace it as well. */
html:root body vaadin-side-nav { padding: 12px 8px !important; }
html:root body vaadin-side-nav-item::part(link) { padding: 6px 8px !important; margin: 0 0 2px !important; border-radius: 8px !important; font-size: .8125rem !important; font-weight: 600 !important; box-sizing: border-box; }
/* One indent per level, shared by every group. Do not add Vaadin's icon spacer,
   legacy link padding and an extra selected-link surface on top of it. */
html:root body vaadin-side-nav-item::part(content)::before { display: none; }
html:root body vaadin-side-nav-item::part(children) { padding-inline-start: 16px; }
html:root body vaadin-side-nav-item vaadin-side-nav-item::part(link)::before { content: none; }
html:root body vaadin-side-nav-item.shift-nav-current::part(content) { background: var(--ws-surface) !important; color: var(--ws-menu-text) !important; }
html:root body :is(vaadin-side-nav-item[current],vaadin-side-nav-item.shift-nav-current)::part(link) { background: transparent !important; box-shadow: none; }
html:root body vaadin-side-nav-item::part(link):hover { transform: none !important; background: var(--ws-hover) !important; }
html:root body vaadin-side-nav-item::part(toggle-button) { color: var(--ws-menu-text) !important; }
html:root body vaadin-side-nav-item [slot="prefix"] { color: var(--ws-menu-text) !important; }
html:root body :is(vaadin-side-nav-item[current],vaadin-side-nav-item.shift-nav-current) [slot="prefix"] { color: var(--ws-link) !important; }
html:root body vaadin-side-nav-item::part(content) { padding: 0; border-radius: 8px; }
html:root body vaadin-side-nav-item::part(link) { gap: 8px; color: var(--ws-menu-text); }
html:root[theme~="dark"] body .drawer-logo[src$="ximunhu-help-horizontal.png"] { background: #fff; border-radius: 4px; padding: 3px; box-sizing: content-box; }
/* Remove the former large status rail and double padding in public shift rows. */
html:root body .shift-card__status { flex: 0 0 56px; padding: 6px; min-height: 44px; height: auto; align-self: flex-start; box-sizing: border-box; }
html:root body .shift-card__main { padding: 0; gap: 5px; }
html:root body .shift-card__progress { gap: 4px; }
html:root body .shift-card__progress-bar, html:root body .sp-overall__bar { background: var(--ws-line); }
html:root body .sp-overall__bar { height: 6px; }
html:root body .sp-overall__fill { background: var(--ws-brand); }
html:root body .shift-card__chip { color: var(--ws-muted); }
@media (max-width:760px) {
 html:root body .shift-card__status { flex-basis: 48px; width: 48px; min-width: 48px; }
 html:root body .shift-card__main { flex-basis: 160px; }
}

/* Neutralise legacy important toolbar sizing, including restored button hosts. */
html:root body :is(.em-btn-outline,.em-btn-primary,.em-btn-toggle-on,.em-erow__open) {
 min-height: var(--ws-control) !important; height: var(--ws-control) !important; padding: 4px 12px !important;
 border-radius: 8px !important; font: 600 .8125rem/1.2 var(--ws-font) !important;
 background: var(--ws-surface) !important; color: var(--ws-text) !important; border: 1px solid var(--ws-input-line) !important;
 box-shadow: 0 1px 0 rgb(0 0 0 / 5%) !important;
}
html:root body .em-btn-primary { background: var(--ws-brand) !important; color: #fff !important; border-color: var(--ws-brand) !important; }
html:root body .em-btn-toggle-on { background: var(--ws-selected) !important; color: var(--ws-link) !important; }
html:root body .em-list__searchrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html:root body .em-list__search { margin-left: auto; width: 260px; max-width: 100%; }
html:root body .em-list__quota { font-size: .75rem; color: var(--ws-muted); }
html:root body .em-erow__namerow { gap: 6px; }
html:root body .em-erow__open { justify-self: end; }
@media (min-width: 1201px) {
 html:root body .em-list__columns { grid-template-columns: minmax(224px,1fr) 40px 50px 130px 296px; }
 html:root body .em-erow { display: grid; grid-template-columns: 32px minmax(180px,1fr) 40px 50px 130px 200px 84px; }
 html:root body .em-erow__metrics { display: contents; }
 html:root body .em-erow__meta { display: none; } /* Same values appear in the labelled columns. */
}
@media (max-width: 760px) {
 html:root body .em-list__searchrow { gap: 8px; padding: 8px 12px; }
 html:root body .em-list__search { width: 100%; }
 html:root body .em-erow__info { flex-basis: calc(100% - 44px); }
}
/* Give symbols their full drawing area; Vaadin's icon theme adds host padding. */
html:root body :is(vaadin-button,vaadin-menu-bar-button,vaadin-side-nav-item) vaadin-icon { padding: 0 !important; }
html:root body vaadin-button:is(.em-erow__sqbtn,.em-act,.em-day__vis,.em-hbtn) {
 min-width: var(--ws-icon) !important; width: var(--ws-icon) !important;
 min-height: var(--ws-icon) !important; height: var(--ws-icon) !important;
 padding: 4px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:root body :is(.em-header__name,.em-list__title,.em-days__title,.em-shifts__title,.em-day__weekday,.em-shift__name) { color: var(--ws-text) !important; }
html:root body :is(.em-list__subtitle,.em-header__placeslbl,.em-day__date,.em-day__xy,.em-day__shiftcount,.em-days__sub,.em-shifts__meta,.em-shift__time,.em-crumb-link) { color: var(--ws-muted) !important; font-weight: 400; }
html:root body .em-crumbs { margin-bottom: 4px; }
html:root body .em-header__url { border: 0; }
html:root body .em-shifts__toolbar { padding: 0; }
html:root body .em-shifts__statusline { margin-top: 0; flex-wrap: wrap; }
html:root body .em-shifts__statusline .usage-badge, html:root body .em-list__quota {
 padding: 2px 7px !important; border-radius: 6px !important; font-weight: 500 !important;
 background: var(--ws-subtle) !important; color: var(--ws-muted) !important; border-color: var(--ws-line) !important;
}
html:root body .em-legend { padding: 0; gap: 8px; }
html:root body .em-shift__tile { padding: 0; min-width: 0; }
html:root body .em-shift__tilelabel { margin: 0; }
html:root body .em-day__barrow { margin-top: 4px; }
html:root body .em-day__metarow { margin-top: 4px; }
html:root body .em-day__note { padding: 1px 5px; color: var(--ws-muted); }
html:root body .em-days__sub { font-size: .6875rem; }
html:root body #tour-em-shift-search::part(input-field) { height: var(--ws-control); min-height: var(--ws-control); }
html:root body #tour-em-add-shift vaadin-menu-bar-button { min-height: var(--ws-control); height: var(--ws-control); border-radius: 8px !important; }
@media (min-width: 1281px) and (pointer: fine) {
 html:root body .em-header__main { display: grid; grid-template-columns: minmax(160px,1fr) auto; gap: 8px; }
 html:root body .em-header__left { display: contents; }
 html:root body .em-header__titlerow { grid-column: 1 / -1; }
 html:root body .em-header__url { margin: 0; }
 html:root body .em-header__right { flex-wrap: nowrap; }
 html:root body .em-shift { padding-block: 4px; }
 html:root body .em-chevs { gap: 0; }
 html:root body .em-chev { min-width: 24px !important; width: 24px !important; min-height: 24px !important; height: 24px !important; padding: 2px !important; }
 html:root body .em-shift__tilelabel { display: none; }
 html:root body .em-shifts__header { display: grid; grid-template-columns: minmax(160px,1fr) auto auto; align-items: center; }
 html:root body .em-shifts__titleblock { grid-column: 1; grid-row: 1; margin: 0; }
 html:root body .em-shifts__toolbar { display: contents; }
 html:root body #tour-em-shift-search { grid-column: 1; grid-row: 2; padding: 0; }
 html:root body .em-shifts__toolbar > .em-btn-outline { grid-column: 2; grid-row: 1; }
 html:root body #tour-em-add-shift { grid-column: 3; grid-row: 1; }
 html:root body .em-shifts__statusline { grid-column: 2 / -1; grid-row: 2; gap: 8px; }
}
/* Native dialog slots also accommodate legacy icon/title and contextual AI help. */
html:root body vaadin-dialog::part(header-content) { display: flex; align-items: center; gap: 12px; width: 100%; }
html:root body vaadin-dialog [slot="header-content"]:not(.ai-support-launcher-holder) { flex: 1; min-width: 0; }
html:root body vaadin-dialog .dialog-header { padding: 0 !important; justify-content: flex-start !important; gap: 8px; }
html:root body vaadin-dialog .dialog-header > span { font: 650 1rem/1.4 var(--ws-font); }
html:root body vaadin-dialog .ai-support-launcher-holder { margin: 0; flex: 0 0 auto; }
html:root body vaadin-dialog .form-section { margin-block: 16px 8px; padding-bottom: 8px; text-transform: none; letter-spacing: normal; font-size: .8125rem; font-weight: 600; color: var(--ws-muted); }
html:root body vaadin-dialog .form-section:first-child { margin-top: 0; }
html:root body vaadin-button.dialog-cancel[theme~="primary"][theme~="error"] { background: var(--ws-surface) !important; color: var(--ws-text) !important; border: 1px solid var(--ws-input-line); box-shadow: 0 1px 0 rgb(0 0 0 / 5%); }
html:root body vaadin-dialog :is(vaadin-text-field,vaadin-email-field,vaadin-text-area,vaadin-integer-field,vaadin-number-field,vaadin-combo-box,vaadin-select,vaadin-date-picker,vaadin-time-picker)::part(input-field) { font-size: .8125rem !important; }
/* The outer workspace owns the inset; the manager and rows add no second one. */
html:root body .em-root--manage { padding: 0; background: transparent !important; color: var(--ws-text); }
html:root body .em-shift { margin: 0; }
/* Legacy dark selectors used repeated classes and important navy colours. */
html:root[theme~="dark"] body :is(.em-header,.em-managecard,.em-header__url) { background: transparent !important; }
html:root[theme~="dark"] body :is(.em-shift,.em-day,.em-erow,.em-day-add,.em-empty,.em-erow__open,.em-btn-outline) { background: var(--ws-surface) !important; border-color: var(--ws-line) !important; }
html:root[theme~="dark"] body .em-day--active { background: var(--ws-selected) !important; }
html:root[theme~="dark"] body :is(.em-day__note,.em-days__count,.em-shift__hiddenmark) { background: var(--ws-subtle) !important; color: var(--ws-muted) !important; }
html:root[theme~="dark"] body :is(.em-day__bar,.em-shift__bar) { background: var(--ws-line) !important; }
html:root[theme~="dark"] body :is(.em-list__title,.em-shifts__title,.em-days__title,.em-header__name,.em-shift__name,.em-day__weekday) { color: var(--ws-text) !important; }
html:root[theme~="dark"] body :is(.em-header__placeslbl,.em-header__url,.em-shifts__meta,.em-day__date,.em-day__shiftcount,.em-days__sub) { color: var(--ws-muted) !important; }
html:root body #tour-em-shift-search::part(input-field) { background: var(--ws-surface) !important; border-color: var(--ws-input-line) !important; }
/* Long event names and the tour remain reachable on narrow screens. */
html:root body .em-header.em-header { background: transparent !important; }
@media (max-width: 760px) {
 html:root body .em-crumbs { flex-wrap: wrap; gap: 8px; }
 html:root body :is(.em-crumb-current,.em-crumb-sep) { display: none; }
 html:root body .em-header__titlerow { flex-wrap: wrap; }
 html:root body .em-header__namegroup { max-width: 100%; }
 html:root body .em-header__titlerow .em-header__name { white-space: normal; overflow-wrap: anywhere; }
 html:root body .em-header__left, html:root body .em-header__right { width: 100%; min-width: 0; }
 html:root body .em-header__url { width: 100%; box-sizing: border-box; }
}
@media (max-width: 768px) {
 html:root body .ai-workspace { padding: 8px; height: calc(100dvh - 56px - var(--xh-bottom-nav-clearance,0px)); }
 html:root body .ai-support-launcher { min-height: 44px; }
 /* Keep contextual help beside consent in the status row, clear of all navbar actions. */
 html:root body:has(.ai-workspace) .ai-support-floating { top: 109px; right: 60px; bottom: auto; }
 html:root body:has(.ai-workspace) .ai-support-floating .ai-support-launcher { width: 44px; height: 44px; padding: 0; font-size: 0 !important; }
 html:root body:has(.ai-workspace) .ai-support-floating .ai-support-launcher::before { content: "?"; font: 700 18px/1 var(--ws-font); }
}
@media (max-width: 768px) {
 /* The fixed consent entry must not cover Send or Apply in the full-height AI workspace.
    57px topbar + 8px workspace inset + 44px workspace header = 109px. */
 html:root body:has(.ai-workspace) .ai-status { min-height: 44px; box-sizing: border-box; padding-right: 108px; display: flex; align-items: center; }
 html:root body:has(.ai-workspace) .xh-consent-badge { top: 109px; right: 12px; bottom: auto; }
}