/* eMRO PrimeFaces 13 compatibility theme, version 2.0.0. */
body.emro-app-shell,
body.emro-app-shell .ui-widget {
    font-family: var(--emro-font-family);
}
body.emro-app-shell {
    min-width: 0;
    margin: 0;
    color: var(--emro-color-text);
    background:
        radial-gradient(circle at 85% 0, rgba(79, 70, 229, 0.08), transparent 28rem),
        var(--emro-color-canvas);
    font-size: var(--emro-font-size-md);
    line-height: var(--emro-line-height);
}

body.emro-app-shell *,
body.emro-app-shell *::before,
body.emro-app-shell *::after {
    box-sizing: border-box;
}

body.emro-app-shell .emro-root-form {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

body.emro-app-shell .emro-skip-link {
    position: fixed;
    top: var(--emro-space-2);
    left: var(--emro-space-2);
    z-index: var(--emro-z-skip-link);
    padding: var(--emro-space-2) var(--emro-space-4);
    border: 2px solid var(--emro-color-focus);
    border-radius: var(--emro-radius-md);
    color: var(--emro-color-text-inverse);
    background: var(--emro-color-shell-strong);
    box-shadow: var(--emro-shadow-md);
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-skip-link:focus {
    transform: translateY(0);
}

body.emro-app-shell .emro-workspace {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--emro-color-text);
    background: transparent;
}

body.emro-app-shell .emro-workspace .layout-topbar {
    z-index: var(--emro-z-topbar);
    height: var(--emro-topbar-height);
    border-bottom: 1px solid var(--emro-color-border);
    background: var(--emro-color-shell);
    box-shadow: var(--emro-shadow-sm);
}

body.emro-app-shell .emro-workspace .layout-topbar .logo {
    display: inline-flex;
    align-items: center;
    height: var(--emro-topbar-height);
    padding: var(--emro-space-2) var(--emro-space-4);
}

body.emro-app-shell .emro-workspace .layout-topbar .logo img {
    display: block;
    max-height: 2.75rem;
    width: auto;
}

body.emro-app-shell .emro-workspace .layout-topbar a {
    color: var(--emro-color-text);
    border-radius: var(--emro-radius-sm);
    transition:
        color var(--emro-motion-fast) var(--emro-ease),
        background-color var(--emro-motion-fast) var(--emro-ease),
        transform var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workspace .layout-topbar a:hover {
    background-color: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workspace .layout-topbar a:active {
    transform: translateY(1px);
}

/* layout-blue.css paints #menu-button and #layout-megamenu-button white via ID
   selectors, which outrank the class-scoped rule above. That was correct on the
   old dark navy topbar; on the white shell it renders them invisible. These
   selectors carry an ID so they win on specificity and source order alike. */
body.emro-app-shell .emro-workspace .layout-topbar #menu-button,
body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button {
    color: var(--emro-color-text);
}

body.emro-app-shell .emro-workspace .layout-topbar #menu-button:hover,
body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button:hover {
    background-color: var(--emro-color-action-soft);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-actions {
    position: absolute;
    top: 0;
    right: var(--emro-space-4);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--emro-space-2);
    height: 100%;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--emro-space-2);
    flex: 0 1 auto;
    min-width: 0;
    height: 3.1rem;
    padding: 0 var(--emro-space-2);
    color: var(--emro-color-text);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link img {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    object-fit: cover;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-username {
    min-width: 0;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--emro-color-text) !important;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu {
    flex: 0 0 auto;
    width: 11rem;
    height: 2.5rem;
    font-size: 1.125rem !important;
    color: var(--emro-color-text) !important;
    background-color: transparent !important;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-logout-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--emro-space-1);
    height: 2.5rem;
    padding: 0.55rem var(--emro-space-2);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--emro-color-text) !important;
    background-color: transparent !important;
}

/* Environment / server-IP chip (v8 mockup parity). The topbar children are
   absolutely positioned (logo 280px, #menu-button at left:280px width:60px),
   so a normal-flow chip lands underneath the menu button — pin it after both. */
body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-env {
    position: absolute;
    top: 0;
    left: calc(280px + 60px + var(--emro-space-3));
    display: inline-flex;
    align-items: center;
    gap: var(--emro-space-2);
    height: 100%;
    max-width: 34rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--emro-color-text-muted);
}

/* EUP-341: the chip is orientation, not a heading — demo feedback asked for it
   to be quieter (non-bold, gray). */
body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-env-name {
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-env-ip {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--emro-color-text-muted);
}

@media (max-width: 75em) {
    body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-env {
        display: none;
    }
}

body.emro-app-shell .emro-workspace .layout-sidebar {
    z-index: var(--emro-z-sidebar);
    top: var(--emro-topbar-height);
    width: var(--emro-sidebar-width);
    border-right: 1px solid var(--emro-color-border);
    color: var(--emro-color-text);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 5px 0 20px rgba(17, 24, 39, 0.06);
}

body.emro-app-shell .emro-workspace .layout-sidebar .user-profile {
    margin: 0;
    padding: var(--emro-space-3) var(--emro-space-4);
    border-bottom: 1px solid var(--emro-color-border);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-muted);
    text-align: left;
}

body.emro-app-shell .emro-workspace .layout-sidebar .user-profile .sidebar-profile-row {
    display: flex;
    justify-content: space-between;
    gap: var(--emro-space-3);
    padding: var(--emro-space-1) 0;
}

body.emro-app-shell .emro-workspace .layout-sidebar .sidebar-profile-name {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.emro-app-shell .emro-workspace .layout-sidebar .sidebar-profile-role {
    min-width: 0;
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-align: right;
}

body.emro-app-shell .emro-workspace #moduleSearchArea {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--emro-space-2);
    margin: 0 !important;
    padding: var(--emro-space-3);
    border-bottom: 1px solid var(--emro-color-border);
    background: var(--emro-color-surface);
}

body.emro-app-shell .emro-workspace #moduleSearchArea input[type="text"].ui-autocomplete-input {
    width: 100% !important;
    min-width: 0;
    height: var(--emro-control-height);
    padding: 0 var(--emro-space-3) 0 2rem;
    border-radius: var(--emro-control-height);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-raised);
}

/* Magnifier inside the pill (v8 mockup parity); the container is relative. */
body.emro-app-shell .emro-workspace #moduleSearchArea .icon-search {
    position: absolute;
    left: calc(var(--emro-space-3) + 0.35rem);
    z-index: 1;
    color: var(--emro-color-text-muted);
    pointer-events: none;
}

body.emro-app-shell .emro-workspace .layout-sidebar .ui-panelmenu .ui-panelmenu-header,
body.emro-app-shell .emro-workspace .layout-sidebar .ui-panelmenu .ui-menuitem-link {
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    transition:
        color var(--emro-motion-fast) var(--emro-ease),
        background-color var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workspace .layout-sidebar .ui-panelmenu .ui-menuitem-link:hover,
body.emro-app-shell .emro-workspace .layout-sidebar .ui-panelmenu .ui-state-hover {
    color: var(--emro-color-action-hover);
    background: var(--emro-color-action-soft);
}

/* EUP-342: the sidebar is the california `ul.layout-menu` (icon + span per
   leaf link, plus a toggler on group headers), not a PrimeFaces panel menu.
   A leaf link becomes a flex row so a wrapped label hangs under its own
   first line instead of under the icon; headers keep their toggler layout. */
body.emro-app-shell .emro-workspace .layout-menu li a:has(> .layout-menuitem-icon + span:last-child) {
    display: flex;
    align-items: flex-start;
    gap: var(--emro-space-2);
}

body.emro-app-shell .emro-workspace .layout-menu li a > .layout-menuitem-icon {
    flex: 0 0 auto;
}

body.emro-app-shell .emro-workspace .layout-menu li a:has(> .layout-menuitem-icon + span:last-child) > span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

/* Utility row (print/mail/traxdoc/read-sign notification badges): demoted below the
   primary Favorites/Recents/Modules navigation so it reads as secondary status, not
   an equally-weighted way into the app. The divider sits after Modules (the last
   primary-nav item) rather than before the first badge, since any of the four badges
   can independently be hidden at zero count. */
body.emro-app-shell .emro-workspace .layout-sidebar .emro-nav-primary-last {
    margin-bottom: var(--emro-space-2);
    padding-bottom: var(--emro-space-2);
    border-bottom: 1px solid var(--emro-color-border);
}

body.emro-app-shell .emro-workspace .layout-sidebar .emro-utility-menuitem .ui-menuitem-link {
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .emro-workspace .layout-sidebar .emro-utility-menuitem .ui-menuitem-link:hover {
    color: var(--emro-color-action-hover);
}

body.emro-app-shell .emro-workspace .emro-shell-main {
    min-width: 0;
    min-height: calc(100vh - var(--emro-topbar-height));
    min-height: calc(100dvh - var(--emro-topbar-height));
    margin-left: var(--emro-sidebar-width);
    padding: calc(var(--emro-topbar-height) + var(--emro-space-3)) var(--emro-space-4) var(--emro-space-4);
}

body.emro-app-shell .emro-workspace .mainPnl {
    width: 100%;
    min-width: 0;
    border-radius: var(--emro-radius-lg);
    background: var(--emro-color-surface);
    box-shadow: var(--emro-shadow-sm);
}

body.emro-app-shell .emro-workspace .ui-widget-content {
    color: var(--emro-color-text);
}

body.emro-app-shell .emro-workspace .ui-panel .ui-panel-titlebar,
body.emro-app-shell .emro-workspace .ui-fieldset .ui-fieldset-legend {
    border-color: var(--emro-color-border);
    color: var(--emro-color-text);
    background: var(--emro-color-surface);
    font-weight: 600;
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav {
    border-bottom: 1px solid var(--emro-color-border);
    background: var(--emro-color-surface);
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li {
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li.ui-tabs-selected,
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li.ui-state-active {
    border-bottom-color: var(--emro-color-action);
    color: var(--emro-color-action-hover);
    background: var(--emro-color-surface);
}

/* EUP-344: the california theme bolds every tab header; only the active tab
   should carry weight so the strip reads at a glance. */
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li.ui-tabs-header a {
    font-weight: 500;
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-tabs-selected a,
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li.ui-tabs-header.ui-state-active a {
    font-weight: 700;
}

/* EUP-343: the legacy "group box" is a headerless p:panel dropped between
   bootstrap rows inside .container-fluid (322 windows use it); it sat flush
   against the input row above it. */
body.emro-app-shell .emro-workspace .container-fluid > .ui-panel {
    margin-top: var(--emro-space-2);
    margin-bottom: var(--emro-space-2);
}

/* Rounded window chrome: dialogs render at body level (outside the workspace),
   so the selector is not scoped to .emro-workspace. overflow:hidden lets the
   radius reach the titlebar/content corners instead of square corners poking
   out of the rounded border. */
body.emro-app-shell .ui-dialog {
    border-radius: var(--emro-radius-lg);
    overflow: hidden;
}

body.emro-app-shell .emro-workspace .ui-inputfield,
body.emro-app-shell .emro-workspace .ui-selectonemenu,
body.emro-app-shell .emro-workspace .ui-spinner,
body.emro-app-shell .emro-workspace .ui-inputnumber {
    min-height: var(--emro-control-height);
    border-color: var(--emro-color-border-strong);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    background: var(--emro-color-surface);
    box-shadow: none;
}

body.emro-app-shell .emro-workspace .ui-inputfield:hover,
body.emro-app-shell .emro-workspace .ui-selectonemenu:hover {
    border-color: var(--emro-color-action);
}

/* One height for every field type. An <input> uses the UA's line-height:normal
   (18.5px for Source Sans Pro at 1rem), but the <label> that p:selectOneMenu and
   p:selectCheckboxMenu render inherit the 1.45 body line-height, and the
   checkbox-menu container keeps the California theme's 0.5rem padding, so those
   two sat 5-13px taller than the inputs beside them. Pin the same line-height and
   the same 4px vertical padding local.css gives .ui-inputfield, and every control
   lands on the same 28.5px box. */
body.emro-app-shell .emro-workspace .ui-inputfield,
body.emro-app-shell .emro-workspace .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container {
    line-height: normal;
}

body.emro-app-shell .emro-workspace .ui-selectonemenu .ui-selectonemenu-label,
body.emro-app-shell .emro-workspace .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Field-level focus. Inputs previously had no focus rule of their own and fell
   through to the generic ring, which reads as a box bolted around the control.
   Bringing the accent into the border and pairing it with the halo makes the
   focused field itself look active, and the border transition below gives the
   change some mass instead of snapping. */
body.emro-app-shell .emro-workspace .ui-inputfield {
    transition:
        border-color var(--emro-motion-fast) var(--emro-ease),
        box-shadow var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workspace .ui-inputfield:focus,
body.emro-app-shell .emro-workspace .ui-inputfield:focus-visible,
body.emro-app-shell .emro-workspace .ui-selectonemenu.ui-state-focus {
    outline: none;
    border-color: var(--emro-color-action);
    box-shadow: 0 0 0 4px var(--emro-color-action-soft);
}

/* An invalid field keeps its danger border when focused; only the halo changes. */
body.emro-app-shell .emro-workspace .ui-inputfield.ui-state-error:focus,
body.emro-app-shell .emro-workspace .ui-inputfield.ui-state-error:focus-visible {
    border-color: var(--emro-color-danger);
    box-shadow: 0 0 0 4px var(--emro-color-danger-soft);
}

body.emro-app-shell .emro-workspace .ui-inputfield.ui-state-error,
body.emro-app-shell .emro-workspace .ui-inputfield.ui-state-error:hover,
body.emro-app-shell .emro-workspace .ui-selectonemenu.ui-state-error,
body.emro-app-shell .emro-workspace .ui-selectonemenu.ui-state-error:hover {
    border-color: var(--emro-color-danger);
}

body.emro-app-shell .emro-workspace .ui-button:not(.ui-spinner-button) {
    min-height: var(--emro-control-height);
    border-radius: var(--emro-radius-sm);
    font-weight: 600;
    text-shadow: none;
    transition:
        border-color var(--emro-motion-fast) var(--emro-ease),
        background-color var(--emro-motion-fast) var(--emro-ease),
        box-shadow var(--emro-motion-fast) var(--emro-ease),
        transform var(--emro-motion-fast) var(--emro-ease);
    color: var(--emro-color-text-inverse);
    border-color: var(--emro-color-action);
    background: var(--emro-color-action);
}

/* Press physics: a slight scale-down reads as the surface taking the press,
   where a 1px nudge reads as the label jumping. Scale is GPU-composited, so
   this costs no layout. */
body.emro-app-shell .emro-workspace .ui-button:not(.ui-spinner-button):active {
    transform: scale(0.98);
}

/* local.css:611 paints `body .ui-button` with an !important background/border
   fill left over from the teal theme. An !important author declaration can
   only be beaten by another !important one, so the hover darken below needs
   it too; the cleaner long-term fix is removing the !important in local.css,
   but that file is shared legacy whose other effects can't be verified without
   rendering the authenticated app, so it is left untouched here. */
body.emro-app-shell .emro-workspace .ui-button:not(.ui-spinner-button):not(.ui-state-disabled):hover {
    border-color: var(--emro-color-action-hover) !important;
    background: var(--emro-color-action-hover) !important;
}

body.emro-app-shell .emro-workspace .ui-button:not(.ui-spinner-button).ui-state-disabled {
    opacity: 0.6;
}

/* Scoped to body.emro-app-shell only (no .emro-workspace): the sole call site,
   the MFA dialog's Verify button in template.xhtml, renders outside the
   .emro-workspace wrapper, so that extra ancestor would never match. The
   !important pins beat local.css:611's !important fill the same way the
   hover rule above does. */
body.emro-app-shell .ui-button.outlined-button {
    color: var(--emro-color-action) !important;
    border-color: var(--emro-color-border-strong) !important;
    background: var(--emro-color-surface) !important;
}

body.emro-app-shell .ui-button.outlined-button:hover {
    color: var(--emro-color-action-hover) !important;
    border-color: var(--emro-color-action) !important;
    background: var(--emro-color-action-soft) !important;
}

/* Grid-cell action button: a deliberately quiet variant of .ui-button for buttons
   embedded inside a DataWindow row (DataWindowCellButton.xhtml), so it reads as part
   of the row rather than as a standalone toolbar action. The :not(.ui-state-disabled)
   clause on the hover rule keeps this selector's specificity level with the generic
   hover rule above it, so source order decides the winner and the quiet variant wins. */
body.emro-app-shell .emro-workspace .emro-grid-cell-button.ui-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: inherit;
    box-shadow: none;
}

body.emro-app-shell .emro-workspace .emro-grid-cell-button.ui-button:not(.ui-state-disabled):hover {
    background-color: var(--emro-color-action-soft) !important;
    border-color: transparent !important;
}

body.emro-app-shell .emro-workspace .ui-datatable-tablewrapper,
body.emro-app-shell .emro-workspace .ui-treetable-scrollable-body {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
}

body.emro-app-shell .emro-workspace .ui-datatable thead th,
body.emro-app-shell .emro-workspace .ui-treetable thead th {
    padding: var(--emro-space-2) var(--emro-space-3);
    border-color: var(--emro-color-border);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-muted);
    font-size: var(--emro-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
}

body.emro-app-shell .emro-workspace .ui-datatable tbody td,
body.emro-app-shell .emro-workspace .ui-treetable tbody td {
    border-color: #dbe3ea;
    font-variant-numeric: tabular-nums;
    /* V7/PB parity: rows never wrap; long values ellipsize instead of growing
       the row to two lines (dates were wrapping date/time into ~40px rows). */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row-expander (ui-row-toggler, the black filled circle at the row's left
   edge): replace the harsh filled circle with a quiet chevron sized to the row. */
body.emro-app-shell .emro-workspace .ui-datatable .ui-row-toggler,
body.emro-app-shell .emro-workspace .ui-treetable .ui-treetable-toggler {
    color: var(--emro-color-text-muted) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: var(--emro-font-size-sm);
    width: 1rem;
    height: 1rem;
}

body.emro-app-shell .emro-workspace .ui-datatable .ui-row-toggler:hover,
body.emro-app-shell .emro-workspace .ui-treetable .ui-treetable-toggler:hover {
    color: var(--emro-color-action) !important;
}

/* The mapped FontAwesome glyph is a SOLID filled circle even in muted color.
   Swap it for outline chevrons (right = collapsed, down = expanded). */
body.emro-app-shell .emro-workspace .ui-datatable .ui-row-toggler.ui-icon-circle-triangle-e::before {
    content: "\f054";
}

body.emro-app-shell .emro-workspace .ui-datatable .ui-row-toggler.ui-icon-circle-triangle-s::before {
    content: "\f078";
}

/* Status/priority pill chips (template-v2.js emroStyleStatusCells wraps exact-match
   status words in these spans). Severity colors reuse the token soft/solid pairs. */
.emro-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem var(--emro-space-2);
    border-radius: 999px;
    font-size: var(--emro-font-size-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.emro-status-info {
    background: var(--emro-color-action-soft);
    color: var(--emro-color-action-hover);
}

.emro-status-success {
    background: var(--emro-color-success-soft);
    color: var(--emro-color-success);
}

.emro-status-danger {
    background: var(--emro-color-danger-soft);
    color: var(--emro-color-danger);
}

.emro-status-warning {
    background: var(--emro-color-warning-soft);
    color: var(--emro-color-warning);
}

.emro-status-muted {
    background: var(--emro-color-surface-muted);
    color: var(--emro-color-text-muted);
}

/* Clickable field labels carry font-style: italic inline from the PowerBuilder
   column definitions (blue italic = clickable in PB). Keep the color, drop the
   italic app-wide — modern labels are upright. */
body.emro-app-shell .emro-workspace .ui-outputlabel {
    font-style: normal !important;
}

/* Grid density matched to the V7 demo (emro.demo.trax.aero): 12px cell text
   with 4px/8px/5px padding reads at ~25px rows there; our 14px text plus
   legacy padding ran ~30px. Header cells follow the same rhythm. */
body.emro-app-shell .emro-workspace .ui-datatable thead th,
body.emro-app-shell .emro-workspace .ui-treetable thead th,
body.emro-app-shell .emro-workspace .ui-datatable tbody td,
body.emro-app-shell .emro-workspace .ui-treetable tbody td {
    padding: 4px var(--emro-space-2) 5px var(--emro-space-2);
    font-size: var(--emro-font-size-xs);
    line-height: 1.35;
    /* Buttons and inline controls in a cell sit on the text baseline by
       default, which reads off-centre once rows are ~25px tall. */
    vertical-align: middle;
}

body.emro-app-shell .emro-workspace .ui-datatable tbody tr.ui-state-hover,
body.emro-app-shell .emro-workspace .ui-treetable tbody tr.ui-state-hover {
    color: var(--emro-color-text);
    background: var(--emro-color-action-soft);
    /* local.css used to ring the hovered row in #3399FF; it now reads
       var(--emro-color-border), so both files agree on this treatment. */
    border-color: var(--emro-color-border);
}

body.emro-app-shell .emro-workspace .treetablenodelink span:active {
    color: var(--emro-color-action-hover) !important;
}

body.emro-app-shell .emro-workspace .ui-datatable tbody tr.ui-state-highlight,
body.emro-app-shell .emro-workspace .ui-treetable tbody tr.ui-state-highlight {
    color: var(--emro-color-text);
    background: var(--emro-color-selected);
    /* local.css used to ring the selected row in amber (#FFC40D) and the
       highlighted cells in cyan (#00c2ff), with #e1f3f8 fills elsewhere; all
       now read the accent/selected tokens, so this is the single canonical
       treatment on both sides. */
    border-color: var(--emro-color-action);
}

body.emro-app-shell .emro-workspace .ui-datatable tbody tr.ui-state-highlight td,
body.emro-app-shell .emro-workspace .ui-treetable tbody tr.ui-state-highlight td,
body.emro-app-shell .emro-workspace .ui-datatable tbody tr .ui-state-highlight,
body.emro-app-shell .emro-workspace .ui-treetable tbody tr .ui-state-highlight {
    border-color: var(--emro-color-border);
}

body.emro-app-shell .emro-workspace .ui-paginator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emro-space-1);
    padding: var(--emro-space-2) var(--emro-space-3);
    border-color: var(--emro-color-border);
    color: var(--emro-color-text-muted);
    background: var(--emro-color-surface-muted);
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-first,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-prev,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-next,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-last,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--emro-control-height);
    min-height: var(--emro-control-height);
    padding: 0 var(--emro-space-2);
    border: 1px solid transparent;
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    background: transparent;
    transition:
        border-color var(--emro-motion-fast) var(--emro-ease),
        background-color var(--emro-motion-fast) var(--emro-ease),
        color var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-first:not(.ui-state-disabled):hover,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-prev:not(.ui-state-disabled):hover,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-next:not(.ui-state-disabled):hover,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-last:not(.ui-state-disabled):hover,
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-page:not(.ui-state-active):hover {
    border-color: var(--emro-color-border-strong);
    color: var(--emro-color-text);
    background: var(--emro-color-surface);
}

/* EUP-258: paging is navigation, not an action -- the current page is a gray fill, never the
   accent, so the one blue thing on a grid stays its primary button. */
body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-page.ui-state-active {
    border-color: var(--emro-color-border-strong);
    color: var(--emro-color-text);
    background: var(--emro-color-border);
    font-weight: 600;
}

body.emro-app-shell .emro-workspace .ui-paginator .ui-state-disabled {
    opacity: 0.5;
    cursor: default;
}

body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-rpp-options {
    min-height: var(--emro-control-height);
    border-color: var(--emro-color-border-strong);
    border-radius: var(--emro-radius-sm);
    color: var(--emro-color-text);
    background: var(--emro-color-surface);
}

body.emro-app-shell .emro-workspace .ui-paginator .ui-paginator-current {
    padding: 0 var(--emro-space-2);
    color: var(--emro-color-text-muted);
}

body.emro-app-shell .ui-dialog {
    max-width: calc(100vw - 2 * var(--emro-space-4));
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-lg);
    box-shadow: var(--emro-shadow-dialog);
    overflow: hidden;
}

body.emro-app-shell .ui-dialog .ui-dialog-titlebar {
    border: 0;
    border-bottom: 1px solid var(--emro-color-border);
    color: var(--emro-color-text);
    background: var(--emro-color-surface-muted);
}

body.emro-app-shell .ui-dialog .ui-dialog-content {
    max-width: 100%;
    overflow: auto;
}

body.emro-app-shell .sessionExpiredDlg .ui-dialog-titlebar {
    display: none;
}

body.emro-app-shell .emro-session-expired-message {
    color: var(--emro-color-text);
    font-size: var(--emro-font-size-lg);
}

/* Inline messages are a status strip, not a hero panel. The california-blue
   theme pads them 1.5rem around a 1.5rem Font Awesome glyph, so a one-line
   notice ("Object Name ...") lands as a 67px box -- 99px with its 1rem margins
   -- above every tab's content. Flex the icon, text and close control onto a
   single row at shell density instead: 67px / 99px -> 32px / 48px, measured in
   the browser against the deployed theme and the renderer's real markup. */
body.emro-app-shell .ui-messages > div {
    border-radius: var(--emro-radius-md);
    box-shadow: var(--emro-shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--emro-space-2);
    margin: var(--emro-space-2) 0;
    padding: var(--emro-space-1) var(--emro-space-2);
    font-size: var(--emro-font-size-md);
    line-height: var(--emro-line-height);
}

body.emro-app-shell .ui-messages > div > span[class*="-icon"] {
    flex: 0 0 auto;
    margin: 0;
}

/* The theme sets the severity glyph at 1.5rem, which out-weighs both the 14px
   text and the 1rem close control and leaves the strip icon-led. Sizing it down
   needs two changes, not one: the theme swaps these four sprites for Font
   Awesome glyphs but leaves components.css's fixed 24x24 sprite box in place,
   so font-size alone shrinks the glyph inside a box that still measures 24px.
   Release the box as well and the icon balances the close control.
   Success is deliberately NOT in this list: <p:messages> has no success glyph
   rule in either stylesheet, so it still renders the sprite and still needs the
   fixed box and background-position that go with it. */
body.emro-app-shell .ui-messages > div > .ui-messages-info-icon,
body.emro-app-shell .ui-messages > div > .ui-messages-warn-icon,
body.emro-app-shell .ui-messages > div > .ui-messages-error-icon,
body.emro-app-shell .ui-messages > div > .ui-messages-fatal-icon {
    font-size: var(--emro-font-size-lg);
    width: auto;
    height: auto;
    line-height: 1;
}

body.emro-app-shell .ui-messages ul {
    flex: 1 1 auto;
    margin: 0;
}

/* The close control reaches the top-right corner only because components.css
   floats it right and the theme then nudges it a further 1rem up and out. Both
   halves break here: float is inert on a flex item, so it would fall back to
   its place in source order -- which is FIRST, ahead of the icon -- still
   lifted 1rem above the box. Order it last, push it over with an auto margin,
   and drop the offsets that only ever made sense on a floated box. */
body.emro-app-shell .ui-messages .ui-messages-close {
    order: 1;
    flex: 0 0 auto;
    align-self: center;
    margin-left: auto;
    top: 0;
    right: 0;
}

body.emro-app-shell .ui-messages-info-summary,
body.emro-app-shell .ui-messages-info-detail,
body.emro-app-shell .ui-messages-warn-summary,
body.emro-app-shell .ui-messages-warn-detail,
body.emro-app-shell .ui-messages-error-summary,
body.emro-app-shell .ui-messages-error-detail,
body.emro-app-shell .ui-message-info-summary,
body.emro-app-shell .ui-message-info-detail,
body.emro-app-shell .ui-message-warn-summary,
body.emro-app-shell .ui-message-warn-detail,
body.emro-app-shell .ui-message-error-summary,
body.emro-app-shell .ui-message-error-detail {
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .ui-messages-error,
body.emro-app-shell .ui-message-error {
    border-color: #e3a6a2;
    color: #7f1d1d;
    background: var(--emro-color-danger-soft);
}

body.emro-app-shell .ui-messages-info,
body.emro-app-shell .ui-message-info {
    border-color: #c7cdf5;
    color: #312a8f;
    background: var(--emro-color-action-soft);
}

body.emro-app-shell .ui-messages-warn,
body.emro-app-shell .ui-message-warn {
    border-color: #e0c58a;
    color: #5c3d00;
    background: var(--emro-color-warning-soft);
}

body.emro-app-shell .ui-state-error {
    border-color: var(--emro-color-danger);
}

/* Focus indicator: a tight accent ring plus a soft accent halo. The previous
   treatment led with Beacon Amber, which measures only 1.77:1 against the white
   shell -- below WCAG 2.2 SC 1.4.11's 3:1 for non-text indicators -- and leaned
   on a 1px dark companion ring to carry the requirement. The accent ring is
   6.29:1 on white on its own, and the halo makes it unmistakable without the
   hard outline. Beacon Amber stays in the token set and still draws the
   skip-link border; under forced colors the system Highlight replaces this
   outline entirely, so neither colour applies there. */
body.emro-app-shell a:focus-visible,
body.emro-app-shell button:focus-visible,
body.emro-app-shell input:focus-visible,
body.emro-app-shell select:focus-visible,
body.emro-app-shell textarea:focus-visible,
body.emro-app-shell [tabindex]:focus-visible,
body.emro-app-shell .ui-state-focus {
    outline: 2px solid var(--emro-color-action);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--emro-color-action-soft);
}

body.emro-app-shell .emro-cookie-banner {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--emro-z-banner);
    display: none;
    padding: var(--emro-space-4);
    color: var(--emro-color-text-inverse);
    background: var(--emro-color-shell-strong);
    box-shadow: 0 -8px 28px rgba(17, 24, 39, 0.17);
}

body.emro-app-shell .emro-cookie-banner .cookies-subcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--emro-space-4);
    width: min(100%, 80rem);
    margin: 0 auto;
}

body.emro-app-shell .emro-cookie-copy {
    max-width: 62rem;
}

body.emro-app-shell .emro-cookie-copy p {
    margin: 0;
    text-wrap: pretty;
}

body.emro-app-shell .emro-cookie-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--emro-space-2);
}

body.emro-app-shell .emro-cookie-action {
    min-height: var(--emro-control-height-coarse);
    padding: var(--emro-space-2) var(--emro-space-4);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: var(--emro-radius-md);
    color: var(--emro-color-text-inverse);
    background: var(--emro-color-action);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color var(--emro-motion-fast) var(--emro-ease),
        transform var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-cookie-action:hover {
    background: var(--emro-color-action-hover);
}

body.emro-app-shell .emro-cookie-action:active {
    transform: translateY(1px);
}

body.emro-app-shell .footer,
body.emro-app-shell .emro-footer {
    background-color: var(--emro-color-shell);
}

body.emro-app-shell .emro-ajax-status {
    position: fixed;
    right: var(--emro-space-5);
    bottom: var(--emro-space-5);
    width: 6rem;
    height: 6rem;
    pointer-events: none;
}

body.emro-app-shell .emro-login-icon {
    width: 12%;
    vertical-align: bottom;
}

body.emro-app-shell .ui-tabs-top .ui-tabs-nav li,
body.emro-app-shell .ui-tabs .ui-tabs-nav li {
    margin-bottom: 0;
}

@media screen and (min-width: 64.0625rem) {
    body.emro-app-shell .emro-workspace.layout-wrapper-sidebar-inactive .emro-shell-main,
    body.emro-app-shell .emro-workspace.layout-wrapper-sidebar-overlay .emro-shell-main,
    body.emro-app-shell .emro-workspace.layout-wrapper-overlay-sidebar .emro-shell-main {
        margin-left: 0;
    }
}

@media screen and (max-width: 64rem) {
    body.emro-app-shell .emro-workspace .emro-shell-main {
        margin-left: 0;
        padding-right: var(--emro-space-3);
        padding-left: var(--emro-space-3);
    }

    body.emro-app-shell .emro-workspace .layout-sidebar {
        box-shadow: var(--emro-shadow-md);
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        padding: 0.125rem;
        gap: 0;
        overflow: hidden;
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-username {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media screen and (min-width: 40.0625rem) and (max-width: 64rem) {
    /* California's tablet clock occupies a second, reserved header row. */
    body.emro-app-shell .emro-workspace .layout-topbar {
        height: calc(var(--emro-topbar-height) + var(--emro-clock-row-height));
    }

    body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button {
        top: var(--emro-topbar-height);
        margin-top: 0;
        height: var(--emro-clock-row-height);
        line-height: var(--emro-clock-row-height);
    }

    body.emro-app-shell .emro-workspace .layout-sidebar {
        top: calc(var(--emro-topbar-height) + var(--emro-clock-row-height));
    }

    body.emro-app-shell .emro-workspace .emro-shell-main {
        padding-top: calc(var(--emro-topbar-height) + var(--emro-clock-row-height) + var(--emro-space-3));
    }
}

@media screen and (max-width: 40rem) {
    /* Keep the 60px menu slot separate from the compact account controls. */
    body.emro-app-shell .emro-workspace .layout-topbar #menu-button {
        top: 0;
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu {
        width: 5.5rem;
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu .ui-button {
        width: 100%;
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu .ui-button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.emro-app-shell .emro-workspace .layout-topbar .emro-logout-link {
        width: 5.5rem;
        font-size: var(--emro-font-size-md) !important;
    }

    body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button {
        display: none;
    }

    body.emro-app-shell .emro-workspace .emro-shell-main {
        padding-right: var(--emro-space-2);
        padding-left: var(--emro-space-2);
    }

    body.emro-app-shell .emro-cookie-banner .cookies-subcontainer,
    body.emro-app-shell .emro-cookie-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.emro-app-shell .emro-cookie-actions,
    body.emro-app-shell .emro-cookie-action {
        width: 100%;
    }

    body.emro-app-shell .ui-dialog {
        max-width: calc(100vw - 2 * var(--emro-space-2));
    }
}

@media (hover: none) and (pointer: coarse) {
    body.emro-app-shell .emro-workspace .ui-button:not(.ui-spinner-button),
    body.emro-app-shell .emro-workspace .ui-inputfield,
    body.emro-app-shell .emro-workspace .ui-selectonemenu,
    body.emro-app-shell .emro-workspace .ui-panelmenu .ui-menuitem-link {
        min-height: var(--emro-control-height-coarse);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.emro-app-shell *,
    body.emro-app-shell *::before,
    body.emro-app-shell *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}

@media (forced-colors: active) {
    body.emro-app-shell a:focus-visible,
    body.emro-app-shell button:focus-visible,
    body.emro-app-shell input:focus-visible,
    body.emro-app-shell select:focus-visible,
    body.emro-app-shell textarea:focus-visible,
    body.emro-app-shell [tabindex]:focus-visible,
    body.emro-app-shell .ui-state-focus {
        outline-color: Highlight;
    }
}

/* Adaptive grid density: a p:dataTable whose header row renders 11+ <th>
   cells is almost certainly a real dw_* grid (10-20+ columns), not a
   4-column form summary. Give it tighter padding and smaller type so it
   doesn't lose rows-per-page to the airy default. Guarded by @supports so
   browsers without :has() simply keep the airy default everywhere — there
   is no dw_*.xhtml to opt in per-screen (each of the ~4,540 dw_* classes
   has its own paired .xhtml, so a per-screen class isn't practical). The
   11-cell threshold is a starting estimate — confirm empirically against
   a few real dense screens during verification (Task 7) and adjust here
   if it over- or under-fires. */
@supports selector(:has(a)) {
    /* The container-level override is what reaches inline editors: .ui-inputfield,
       .ui-selectonemenu, .ui-spinner and .ui-inputnumber each read
       min-height: var(--emro-control-height), and var() re-evaluates at the element,
       so a control inside a wide grid shrinks with the grid. Table cells do NOT read
       that property, which is why their padding is set explicitly below. Without this,
       an editable wide grid barely compacts at all, because the inline control's
       height dominates the row. */
    body.emro-app-shell .emro-workspace .ui-datatable:has(thead tr th:nth-child(11)),
    body.emro-app-shell .emro-workspace .ui-treetable:has(thead tr th:nth-child(11)) {
        --emro-control-height: 1.375rem;
    }

    body.emro-app-shell .emro-workspace .ui-datatable:has(thead tr th:nth-child(11)) thead th,
    body.emro-app-shell .emro-workspace .ui-datatable:has(thead tr th:nth-child(11)) tbody td,
    body.emro-app-shell .emro-workspace .ui-treetable:has(thead tr th:nth-child(11)) thead th,
    body.emro-app-shell .emro-workspace .ui-treetable:has(thead tr th:nth-child(11)) tbody td {
        /* 2px vertical is deliberate and not a token: --emro-space-1 (4px) is exactly
           PrimeFaces' own default cell padding, so using it here reduces row height by
           nothing. Horizontal stays tokenized. */
        padding: 2px var(--emro-space-2);
        font-size: var(--emro-font-size-sm);
    }
}


/* ---------------------------------------------------------------------------
   Status severity wiring. The success/warning tokens existed but only warn
   and error were styled; success now speaks too, and growl items get the same
   soft-background severity treatment as inline ui-messages.
--------------------------------------------------------------------------- */
body.emro-app-shell .ui-messages-success,
body.emro-app-shell .ui-message-success {
    border-color: #9ecfb4;
    color: var(--emro-color-success);
    background: var(--emro-color-success-soft);
}

body.emro-app-shell .ui-growl .ui-state-highlight {
    color: var(--emro-color-text);
    background: var(--emro-color-surface);
    border: 1px solid var(--emro-color-border);
    box-shadow: var(--emro-shadow-md);
}

body.emro-app-shell .ui-growl .ui-state-highlight.ui-state-error,
body.emro-app-shell .ui-growl .ui-state-error {
    border-color: #e3a6a2;
    background: var(--emro-color-danger-soft);
}

body.emro-app-shell .ui-growl .ui-state-highlight.ui-state-warn,
body.emro-app-shell .ui-growl .ui-state-warn {
    border-color: #e0c58a;
    background: var(--emro-color-warning-soft);
}

body.emro-app-shell .ui-growl .ui-state-highlight.ui-state-success,
body.emro-app-shell .ui-growl .ui-state-success {
    border-color: #9ecfb4;
    background: var(--emro-color-success-soft);
}

body.emro-app-shell .ui-growl .ui-state-highlight.ui-state-info,
body.emro-app-shell .ui-growl .ui-state-info {
    border-color: #c7cdf5;
    background: var(--emro-color-action-soft);
}

/* ---------------------------------------------------------------------------
   Sticky grid headers. Long dw_* grids scroll inside the page (or a dialog);
   pinning thead keeps the column labels visible. Scoped to non-scrollable
   tables because PrimeFaces' scrollable tables manage their own frozen
   header, and to z-index 3 so rows (which PF raises while dragging) and the
   shell overlays stay sane. Tables using the widget's stickyHeader feature
   replace their thead at runtime and are unaffected.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .ui-datatable:not(.ui-datatable-scrollable) thead th,
body.emro-app-shell .emro-workspace .ui-treetable:not(.ui-treetable-scrollable) thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   Density, as a user choice. The wide-grid :has() rule compacts big grids
   automatically; this class compacts EVERYTHING via the same --emro-control-height
   mechanism (controls re-read the var at the element), plus matching cell
   padding/type. Toggled from the topbar (see template-v2.js emroToggleDensity)
   and persisted in localStorage as 'emro-density: compact'.
--------------------------------------------------------------------------- */
body.emro-app-shell.emro-density-compact {
    --emro-control-height: 1.375rem;
    --emro-density: 0.75;
}

body.emro-app-shell.emro-density-compact .emro-workspace .ui-datatable thead th,
body.emro-app-shell.emro-density-compact .emro-workspace .ui-datatable tbody td,
body.emro-app-shell.emro-density-compact .emro-workspace .ui-treetable thead th,
body.emro-app-shell.emro-density-compact .emro-workspace .ui-treetable tbody td {
    padding: 2px var(--emro-space-2);
    font-size: var(--emro-font-size-sm);
}

/* ---------------------------------------------------------------------------
   Grid loading and empty states. PF's lazy-load overlay and empty message
   inherit legacy theme colours; give them the token treatment so a loading
   or result-less grid reads as part of the system.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .ui-datatable-loading-overlay {
    background: var(--emro-color-canvas);
    opacity: 0.75;
}

body.emro-app-shell .emro-workspace .ui-datatable-loading-content {
    color: var(--emro-color-text-muted);
    background-image: none;
}

body.emro-app-shell .emro-workspace td.ui-datatable-empty,
body.emro-app-shell .emro-workspace .ui-datatable-empty {
    padding: var(--emro-space-5) var(--emro-space-4);
    text-align: center;
    color: var(--emro-color-text-muted);
    font-size: var(--emro-font-size-sm);
}

/* Skeleton utility for placeholders (workspace/React screens and future
   progressive-loading grids). The shimmer respects the global
   prefers-reduced-motion block above, which collapses the animation. */
.emro-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--emro-color-surface-muted);
    border-radius: var(--emro-radius-sm);
    min-height: 1em;
}

.emro-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: emro-skeleton-shimmer 1.4s infinite;
}

@keyframes emro-skeleton-shimmer {
    to {
        transform: translateX(100%);
    }
}

/* ---------------------------------------------------------------------------
   Print. eMRO prints constantly (packing slips, task cards, reports), usually
   through the print server -- but browser-printed grids deserve a sane sheet:
   drop the chrome, flatten to black on white, and repeat the header row.
--------------------------------------------------------------------------- */
@media print {
    body.emro-app-shell .layout-topbar,
    body.emro-app-shell .layout-sidebar,
    body.emro-app-shell .emro-cookie-banner,
    body.emro-app-shell .emro-skip-link,
    body.emro-app-shell .ui-growl,
    body.emro-app-shell .ui-messages,
    body.emro-app-shell .ui-paginator,
    body.emro-app-shell .ui-dialog,
    body.emro-app-shell .blockUI,
    body.emro-app-shell [class*="layout-megamenu"] {
        display: none !important;
    }

    body.emro-app-shell {
        background: #ffffff !important;
    }

    body.emro-app-shell .emro-shell-main,
    body.emro-app-shell .layout-main {
        margin: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    body.emro-app-shell .ui-datatable thead {
        display: table-header-group;
    }

    body.emro-app-shell * {
        color: #000000 !important;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #999999 !important;
    }
}

/* Topbar density toggle: chrome, not a call to action -- transparent with an
   Ink Muted icon, accent wash on hover, matching the topbar links' treatment. */
body.emro-app-shell .emro-density-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 var(--emro-space-2);
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--emro-radius-md);
    color: var(--emro-color-text-muted);
    cursor: pointer;
    transition: background-color var(--emro-motion-fast) var(--emro-ease),
        color var(--emro-motion-fast) var(--emro-ease);
}

body.emro-app-shell .emro-density-toggle:hover,
body.emro-app-shell .emro-density-toggle:focus-visible {
    background: var(--emro-color-action-soft);
    color: var(--emro-color-action-hover);
}

/* ---------------------------------------------------------------------------
   Header modernization pass (2026/09/09): the topbar dropped from 4rem to
   3rem (--emro-topbar-height), and its contents scale with it. The previous
   sizes (2.5rem avatars, 1.125rem labels) were tuned for the taller bar and
   overflow it now; these overrides bring every element back into proportion.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .layout-topbar .logo img {
    max-height: 2rem;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link {
    height: 2.25rem;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link img {
    width: 1.9rem;
    height: 1.9rem;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-username {
    font-size: 0.9375rem;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu {
    height: 2rem;
    width: 9rem;
    font-size: 0.875rem !important;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-logout-link {
    height: 2rem;
    font-size: 0.875rem;
}

body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button .ui-clock {
    /* local.css sets 1.1rem !important; keep the clock proportional to the
       3rem bar without fighting that specificity here. */
    padding-top: 0;
    padding-bottom: 0;
}

/* Topbar utility buttons (print/mail/traxdoc/readsign) -- icon-only with a
   count bubble, moved up from the sidebar menu. */
body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-util {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--emro-radius-md);
    color: var(--emro-color-text-muted);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-util:hover {
    background-color: var(--emro-color-action-soft);
    color: var(--emro-color-action-hover);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    background: var(--emro-color-action);
    color: var(--emro-color-text-inverse);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Tab icons: the source images are 25px+. local.css shrinks .tab-icon's box;
   this caps any img/fa rendered inside a tab label so both tab styles
   (main tabs and nested subtabs like General/Other) read at one size.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li .tab-icon,
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li img {
    max-width: 16px;
    max-height: 16px;
}

/* Breathing room between the tab icon and its label — the source facet renders
   the floated icon flush against the text span. */
body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li .tab-icon {
    margin-right: var(--emro-space-2);
}

/* ---------------------------------------------------------------------------
   Main-tab window headers (2026/09/09 direction): the tab label already names
   the window, so the duplicated bold title inside every object panel is
   dropped, the titlebar is slimmed, and the facet action buttons (info, help,
   questionnaire, favorite, sql) lose their big blue-square chrome in favour of
   small ghost icon buttons. The buttons carry inline width/height/font-size in
   ui_main_center.xhtml, hence the !important. Scoped to the outer object panel (.object-padding) so dialog
   headers and in-screen panels elsewhere keep their titles.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .mainTab .ui-panel.object-padding > .ui-panel-titlebar {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 2.25rem;
    padding: 0 var(--emro-space-2);
    /* Transparent: the menubar is pulled up into this row and must show
       through — an opaque titlebar paints over it and hides the menu.
       pointer-events:none too: even transparent, the titlebar would still
       capture the mouse over the menu; the buttons re-enable their own. */
    background: transparent;
    pointer-events: none;
}

body.emro-app-shell .emro-workspace .mainTab .ui-panel.object-padding > .ui-panel-titlebar .ui-panel-titlebar-actions,
body.emro-app-shell .emro-workspace .mainTab .ui-panel.object-padding > .ui-panel-titlebar .ui-panel-titlebar-icon {
    pointer-events: auto;
}

body.emro-app-shell .emro-workspace .mainTab .ui-panel.object-padding > .ui-panel-titlebar > .ui-panel-title {
    display: none;
}

/* Merge the screen's menubar into the same row as the header buttons: the
   wrapper (rendered by /trax/menu/Menu.xhtml as <menu.id>_StickyPnl, the first
   visible child of the panel content) is pulled up over the titlebar so menu
   sits left and the info/help buttons stay anchored right on one line --
   reclaiming the menubar's own row. The 12rem right margin keeps the menu
   clear of the button cluster. */
body.emro-app-shell .emro-workspace .mainTab .ui-panel-content > div[id$="_StickyPnl"] {
    position: relative;
    z-index: 1;
    margin-top: calc(-2.25rem - 2px);
    margin-right: 12rem;
}

body.emro-app-shell .emro-workspace .mainTab .ui-panel-content > div[id$="_StickyPnl"] .ui-menubar {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Menu entries smaller than the header buttons. */
body.emro-app-shell .emro-workspace .mainTab .ui-panel-content > div[id$="_StickyPnl"] .ui-menubar .ui-menuitem-link {
    padding: 0.25rem var(--emro-space-2) !important;
    font-size: var(--emro-font-size-sm);
}

body.emro-app-shell .emro-workspace .mainTab .ui-panel-titlebar-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.75rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--emro-color-text-muted) !important;
    border-radius: var(--emro-radius-sm) !important;
    margin: 0 0 0 var(--emro-space-1) !important;
}

body.emro-app-shell .emro-workspace .mainTab .ui-panel-titlebar-icon:hover {
    background-color: var(--emro-color-action-soft) !important;
    color: var(--emro-color-action-hover) !important;
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav li .fa {
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   White table chrome. The california-blue PF theme paints the datatable
   facet header (.ui-datatable-header, the bar holding Columns/Export) with
   the old navy gradient, and this theme painted thead th grey
   (surface-muted). Per the 2026/09/09 direction both now read white; state
   is still carried by the selected/hover row fills and the sort icons.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .ui-datatable-header {
    background: var(--emro-color-surface);
    color: var(--emro-color-text);
    border: none;
    border-bottom: 1px solid var(--emro-color-border);
}

body.emro-app-shell .emro-workspace .ui-datatable thead th,
body.emro-app-shell .emro-workspace .ui-treetable thead th {
    background: var(--emro-color-surface);
}

/* Facet-header icon-only buttons (the Columns toggler and friends): borderless
   ghost icons matching the Excel/Filter tools in .emro-dw-toolbar. Text buttons
   in facets keep the standard button styling — flattening them to transparent
   made them look invisible on the white bar. */
body.emro-app-shell .emro-workspace .ui-datatable-header .ui-button-icon-only {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--emro-color-text-muted) !important;
}

body.emro-app-shell .emro-workspace .ui-datatable-header .ui-button-icon-only:hover {
    background-color: var(--emro-color-action-soft) !important;
    color: var(--emro-color-action-hover) !important;
}

/* ---------------------------------------------------------------------------
   Per-row action buttons in grids (the Select bmp-select-bmp buttons and
   friends, rendered as ui-button-icon-left ui-icon ui-c bmp-* inside narrow
   columns): give them a comfortable hit size and breathing room from the cell
   edges, plus a real gap between icon and label on icon+text variants.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button,
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button {
    min-width: 1.25rem;
    min-height: 1.25rem;
    margin: 0 var(--emro-space-1);
    vertical-align: middle;
}

body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button .ui-button-icon-left,
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button .ui-button-icon-left {
    margin-right: var(--emro-space-1);
}

/* Text-bearing per-row buttons (Select etc.) read better left-justified in
   their narrow columns; icon-only ones stay centered. */
body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button:not(.ui-button-icon-only),
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button:not(.ui-button-icon-only) {
    justify-content: flex-start;
    text-align: left;
}

/* Icon-only per-row buttons read best as quiet outlined squares — fully
   transparent ghosts were too faint against the white grid. */
body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button-icon-only,
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button-icon-only {
    position: relative;
    background: var(--emro-color-surface) !important;
    border: 1px solid var(--emro-color-border) !important;
    box-shadow: none !important;
    color: var(--emro-color-text-muted) !important;
    border-radius: var(--emro-radius-sm);
    width: 1.25rem;
    height: 1.25rem;
    padding: 0 !important;
}

/* local.css carries TWO legacy !important rules that fight the centering:
   `.ui-button-icon-left { left: 2px !important }` (shoves the bitmap off the
   button's left edge once a translate(-50%) is applied) and
   `.ui-button-icon-only .ui-icon { margin-left: 4px !important }`. California
   adds `body .ui-icon { min-width: 16px }`. Measured live 2026/09/10: the
   select icon hung 5px out of the button's left edge. Win each declaration
   with higher specificity + !important and pin the icon dead-center with an
   explicit box (PF13 core .ui-icon has no size; bitmap classes collapse). */
body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button-icon-only .ui-icon,
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button-icon-only .ui-icon {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    width: 0.75rem;
    min-width: 0 !important;
    height: 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
}

body.emro-app-shell .emro-workspace .ui-datatable tbody td .ui-button-icon-only:hover,
body.emro-app-shell .emro-workspace .ui-treetable tbody td .ui-button-icon-only:hover {
    background-color: var(--emro-color-action-soft) !important;
    color: var(--emro-color-action-hover) !important;
}

/* ---------------------------------------------------------------------------
   Query-screen table tools (2026/09/10 direction): the standard query
   templates wrap the Filter/Sort trigger, the filter-applied label and the
   Excel export link in .emro-dw-toolbar. The bar is pulled down over the
   datatable's own header-facet row (negative margin equal to its height), so
   Columns (from the dw facelet), Filter/Sort and Excel read as one
   right-aligned borderless icon strip. The facet reserves the strip's width
   via padding-right so its content never slides under the overlay.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .emro-dw-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--emro-space-1);
    height: 2rem;
    margin-bottom: -2rem;
    position: relative;
    z-index: 2;
}

body.emro-app-shell .emro-workspace .emro-dw-toolbar .emro-dw-tool,
body.emro-app-shell .emro-workspace .emro-dw-toolbar .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--emro-color-text-muted) !important;
    font-size: 0.875rem;
    border-radius: var(--emro-radius-sm);
}

body.emro-app-shell .emro-workspace .emro-dw-toolbar .emro-dw-tool:hover,
body.emro-app-shell .emro-workspace .emro-dw-toolbar .ui-button:hover {
    background-color: var(--emro-color-action-soft) !important;
    color: var(--emro-color-action-hover) !important;
}

body.emro-app-shell .emro-workspace .emro-dw-toolbar .emro-dw-tool img {
    vertical-align: middle;
}

/* Facet row: pin the height the toolbar overlays, and reserve its width. */
body.emro-app-shell .emro-workspace .ui-datatable-header {
    min-height: 2rem;
}

/* Rounded grid/window chrome (2026/09/10). California zeroes every ui-corner-*
   class globally. Measured against the live app: the header/panel inner
   corners were already 8px but INVISIBLE — the real outer card is .ui-tabs
   (ui-corner-all, white bg, radius 0) and .ui-datatable is transparent inside
   it, so the notches showed white-on-white. Round the actual outer edges:
   the tabview card itself and the datatable card. */
body.emro-app-shell .emro-workspace .ui-tabs {
    border-radius: var(--emro-radius-md);
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-nav {
    border-top-left-radius: var(--emro-radius-md);
    border-top-right-radius: var(--emro-radius-md);
}

body.emro-app-shell .emro-workspace .ui-tabs .ui-tabs-panel,
body.emro-app-shell .emro-workspace .ui-tabs-panel.ui-widget-content {
    border-bottom-left-radius: var(--emro-radius-md);
    border-bottom-right-radius: var(--emro-radius-md);
}

body.emro-app-shell .emro-workspace .ui-datatable {
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-md);
    background: var(--emro-color-surface);
}

body.emro-app-shell .emro-workspace .ui-datatable .ui-datatable-header,
body.emro-app-shell .emro-workspace .ui-datatable-header.ui-widget-header {
    border-top-left-radius: var(--emro-radius-md);
    border-top-right-radius: var(--emro-radius-md);
}

body.emro-app-shell .emro-workspace .ui-datatable > .ui-paginator:last-child {
    border-bottom-left-radius: var(--emro-radius-md);
    border-bottom-right-radius: var(--emro-radius-md);
}

body.emro-app-shell .emro-workspace .emro-dw-toolbar ~ div .ui-datatable-header,
body.emro-app-shell .emro-workspace .emro-dw-toolbar ~ .ui-datatable .ui-datatable-header {
    padding-right: 4.25rem;
}

body.emro-app-shell .emro-workspace .ui-datatable-header .ui-button:hover {
    background: var(--emro-color-action-soft) !important;
    color: var(--emro-color-action-hover) !important;
}

/* ---------------------------------------------------------------------------
   Topbar uniformity pass (2026/09/09, second refinement): one text size and
   weight across the whole bar, equal icon hit-areas, avatar matched to the
   bar height. Appended after the first modernization pass so these win on
   source order at equal specificity; the inline <style> hacks in topbar.xhtml
   (18px language button, 14px button override) were deleted -- this block is
   the single source of truth for topbar typography.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-username,
body.emro-app-shell .emro-workspace .layout-topbar .emro-logout-link,
body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu,
body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu .ui-button,
body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu .ui-button .ui-button-text,
body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button .ui-clock {
    font-size: 0.875rem;
    font-weight: 600;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu {
    height: 1.75rem;
    width: 8rem;
    background-color: transparent !important;
    border: 1px solid var(--emro-color-border);
    border-radius: var(--emro-radius-sm);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-language-menu .ui-button {
    height: 1.75rem;
    padding: 0 var(--emro-space-2);
    background-color: transparent !important;
    border: none !important;
    color: var(--emro-color-text) !important;
}

body.emro-app-shell .emro-workspace .layout-topbar #menu-button,
body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button,
body.emro-app-shell .emro-workspace .layout-topbar .emro-density-toggle,
body.emro-app-shell .emro-workspace .layout-topbar .emro-topbar-util {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link {
    height: 1.75rem;
    gap: var(--emro-space-2);
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-password-settings-link img {
    width: 1.6rem;
    height: 1.6rem;
    border-width: 1px;
    border-radius: 50%;
}

body.emro-app-shell .emro-workspace .layout-topbar .emro-logout-link {
    height: 1.75rem;
    padding: 0 var(--emro-space-2);
}

body.emro-app-shell .emro-workspace .layout-topbar .logo {
    padding: 0 var(--emro-space-3);
}

body.emro-app-shell .emro-workspace .layout-topbar .logo img {
    max-height: 1.6rem;
}

/* Carried over from the inline style previously in topbar.xhtml: panelmenu
   headers stay transparent rather than picking up the layout theme's
   background. */
body.emro-app-shell .emro-workspace .ui-panelmenu .ui-panelmenu-header {
    background-color: transparent;
}

/* ---------------------------------------------------------------------------
   2026/09/09 content-density pass: the main area kept the padding budget of
   the taller original chrome. The fixed topbar only needs its own height as
   the top offset; sides and bottom drop to the 0.5rem step so an opened tab
   uses the viewport instead of floating in a grey margin.
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .emro-shell-main {
    padding: var(--emro-topbar-height) var(--emro-space-2) var(--emro-space-2);
}

/* Topbar wordmark sizing (2026/09/13). These caps were written for the tight
   eMRO.svg wordmark (viewBox 655x158); EUP-252 put the standard emro_logo.png
   back in the bar, and the PNG bakes its own margin into the file: the
   wordmark inks only the middle 1991x643 of a 2574x1061 canvas, so 23% of the
   width and 39% of the height of whatever box it is given is transparent
   padding. Capped at 1.6rem that left a 48x16 mark floating in the 280x44
   block the logo owns.

   Sizing the img to 1.5x the bar height puts the ink itself at ~40px -- the
   full height of the bar, with a ~2px gap top and bottom -- and the anchor
   clips the dead margin instead of paying for it. Width follows the intrinsic
   aspect (~160px box, ~124px of ink), so it stays well clear of #menu-button
   at left:280px. Filling the 280px width too would need a ~88px bar; the bar
   is deliberately 2.75rem, so height is the binding constraint. */
body.emro-app-shell .emro-workspace .layout-topbar .logo {
    overflow: hidden;
    /* The scaled-up asset now carries ~18px of transparent margin of its own on
       the left, which is the whole optical inset the bar needs: keep the 0.75rem
       anchor padding on top of it and the mark lands at x=30 while the sidebar
       search field below starts at x=19. Drop the padding and the two line up. */
    padding: 0;
}

body.emro-app-shell .emro-workspace .layout-topbar .logo img {
    width: auto;
    max-width: none;
    max-height: none;
    height: calc(var(--emro-topbar-height) * 1.5);
}

/* ---------------------------------------------------------------------------
   Clock-in-cluster pass (2026/09/09): layout-blue.css pins
   #layout-megamenu-button absolutely at left:86% with white text and a 140px
   box -- on the white shell that rendered as invisible white text overlapping
   the actions cluster. The anchor now lives inside .emro-topbar-actions (last
   DOM item, after the utility icons; the cluster is row-reverse so it renders
   leftmost, as the first of the right-aligned group), so undo the legacy
   positioning and theme it like the other topbar icons. The clock text colour
   is fixed at source in local.css (.ui-clock was white !important from the old
   navy topbar).
--------------------------------------------------------------------------- */
body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button {
    position: static;
    width: auto;
    height: 1.75rem;
    padding: 0 var(--emro-space-2);
    color: var(--emro-color-text-muted);
    border-radius: var(--emro-radius-sm);
}

body.emro-app-shell .emro-workspace .layout-topbar #layout-megamenu-button:hover {
    background-color: var(--emro-color-action-soft);
    color: var(--emro-color-action-hover);
}

/* Modern filter chips (MPC workbench and future filter bars): quiet outline
   pills in a wrapping group; the active chip fills with the accent. Replaces
   the heavy filled default buttons on filter rows. */
body.emro-app-shell .emro-workspace .emro-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--emro-space-1);
    margin: var(--emro-space-1) 0;
}

/* EUP-259: the MPC fleet screen's scope chips sit centered above the grid. */
body.emro-app-shell .emro-workspace .emro-chip-group.emro-chip-group-center {
    justify-content: center;
}

/* EUP-259: PrimeFaces gives .ui-button-text 8px of vertical padding, which pushes the label to
   the bottom edge of a 1.375rem chip. Center it. */
body.emro-app-shell .emro-workspace .ui-button.emro-chip .ui-button-text,
body.emro-app-shell .emro-workspace .ui-button.emro-chip-active .ui-button-text {
    display: block;
    padding: 0 !important;
    line-height: 1.375rem;
    text-align: center;
}

body.emro-app-shell .emro-workspace .ui-button.emro-chip,
body.emro-app-shell .emro-workspace .ui-button.emro-chip-active {
    min-height: 1.375rem;
    height: 1.375rem;
    padding: 0 var(--emro-space-3);
    border-radius: 999px;
    font-size: var(--emro-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--emro-color-surface) !important;
    border: 1px solid var(--emro-color-border) !important;
    color: var(--emro-color-text-muted) !important;
    box-shadow: none !important;
}

body.emro-app-shell .emro-workspace .ui-button.emro-chip:hover {
    background: var(--emro-color-action-soft) !important;
    border-color: var(--emro-color-action) !important;
    color: var(--emro-color-action-hover) !important;
}

body.emro-app-shell .emro-workspace .ui-button.emro-chip-active,
body.emro-app-shell .emro-workspace .ui-button.emro-chip-active:hover {
    background: var(--emro-color-action) !important;
    border-color: var(--emro-color-action) !important;
    color: #ffffff !important;
}

/* Search row: pill input + quiet go-button. */
body.emro-app-shell .emro-workspace .emro-chip-search .emro-chip-search-input {
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0 var(--emro-space-3);
    border-radius: 999px;
    font-size: var(--emro-font-size-xs);
}

body.emro-app-shell .emro-workspace .ui-button.emro-chip-search-go {
    min-height: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--emro-space-3);
    border-radius: 999px;
    font-size: var(--emro-font-size-xs);
    font-weight: 600;
}