/* WbAClient handheld shell — Aiden Design System subset (no sidebar). */

:root {
    --wba-topbar-height: 64px;
    --wba-fnkeys-height: 64px;
    --wba-topbar-border: 2px;
    --wba-fnkeys-border: 2px;
    --wba-shell-top: calc(var(--wba-topbar-height) + var(--wba-topbar-border));
    --wba-shell-bottom: calc(var(--wba-fnkeys-height) + var(--wba-fnkeys-border) + env(safe-area-inset-bottom, 0px));
    /* MudBlazor stacks: container=N, overlay=N+1, dialog=N+2. Must stay above chrome (1400) and fn-drawer (2400). */
    --mud-zindex-dialog: 2600;
    --mud-zindex-popover: 2700;
}

html, body, #app {
    font-family: var(--aiden-font-body, Ubuntu, Arial, sans-serif);
    background: var(--aiden-color-surface-canvas, #fff);
    color: var(--aiden-color-text-primary, #32363D);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

/* Fixed shell: top bar + bottom fn keys, content scrolls between */
.wba-shell,
.wba-shell .mud-layout {
    position: relative;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.wba-shell .mud-main-content {
    position: absolute !important;
    top: var(--wba-shell-top) !important;
    bottom: var(--wba-shell-bottom) !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    /* Kill Mud default appbar padding — shell already offsets with top: */
    --mud-appbar-height: 0px !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    pointer-events: auto;
}

.wba-shell .mud-main-content.mud-main-content-margin,
.wba-shell .mud-main-content.pt-14,
.wba-shell .mud-main-content.pt-16 {
    padding-top: 0 !important;
}

.wba-shell .mud-main-content > .mud-container,
.wba-shell .wba-page-content {
    /* Do not force full viewport height — avoids large empty gap under short pages */
    min-height: 0;
    height: auto;
    overflow: visible !important;
    /* Tight top inset; keep slight side/bottom padding */
    padding-top: 0.2rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    pointer-events: auto;
}

/* Collapse common Mud spacing utilities that add empty top space */
.wba-shell .mud-main-content > .mud-container > .mud-grid.mt-2,
.wba-shell .mud-main-content .mud-grid.mt-2,
.wba-shell .mud-main-content .mt-2 {
    margin-top: 0.15rem !important;
}

.wba-shell .mud-main-content > .mud-container > .mud-grid.mt-0,
.wba-shell .mud-main-content .mud-grid.mt-0,
.wba-shell .mud-main-content .mt-0 {
    margin-top: 0 !important;
}

.wba-shell .mud-main-content .mud-grid.mt-1,
.wba-shell .mud-main-content .mt-1 {
    margin-top: 0.1rem !important;
}

/* Processing host must never intercept clicks when idle */
.wba-processing-host {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
    visibility: hidden;
}

.wba-processing-host:has(.mud-overlay-visible),
.wba-processing-host:has(.mud-overlay[style*="visible"]),
.wba-processing-host.is-active {
    visibility: visible;
}

.wba-processing-host .mud-overlay {
    pointer-events: auto;
}

/* ---- Top app bar (royal brand surface) ---- */
.mud-appbar.wba-appbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--wba-topbar-height) !important;
    background: var(--aiden-royal, #3C5279) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-bottom: var(--wba-topbar-border) solid var(--aiden-limelight, #BFD730);
    z-index: 1400 !important;
    overflow: visible !important;
}

.mud-appbar.wba-appbar .mud-toolbar,
.mud-appbar.wba-appbar .mud-toolbar-appbar,
.mud-appbar.wba-appbar .mud-toolbar-gutters {
    overflow: visible !important;
    min-height: var(--wba-topbar-height) !important;
    height: auto !important;
    min-height: var(--wba-topbar-height) !important;
    align-items: center !important;
    gap: 0.35rem;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.mud-appbar.wba-appbar .mud-typography.wba-appbar-title,
.wba-appbar-title.mud-typography {
    margin: 0 !important;
}

.mud-appbar.wba-appbar .mud-icon-button {
    color: #fff !important;
}

.wba-brand-icon {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.wba-appbar-title {
    font-family: var(--aiden-font-display, "Amberes Grotesk", Ubuntu, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    /* Extra line-height so descenders (p/g/y) are not clipped */
    line-height: 1.35;
    /* Allow 2 lines, then ellipsis */
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
    padding-right: 0.35rem;
    /* Prevent last-line descender clipping inside the clamp box */
    padding-bottom: 0.1rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mud-appbar.wba-appbar .mud-typography.wba-appbar-title,
.wba-appbar-title.mud-typography {
    line-height: 1.35 !important;
    overflow: hidden;
}

.appbar-right-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    z-index: 1410;
}

.appbar-menu {
    position: relative;
    z-index: 1400;
}

.appbar-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1390;
    background: transparent;
}

.appbar-menu-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1410;
    min-width: 15rem;
    max-width: min(92vw, 22rem);
    padding: 0.35rem 0;
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-md, 0.5rem);
    background: var(--int-surface, #fff);
    box-shadow: var(--int-surface-shadow, 0 10px 30px rgba(50, 54, 61, 0.06));
    color: var(--int-ink, #32363D);
}

.appbar-menu-panel--user {
    /* One scroll surface only (language list expands inline, no nested menu scroll) */
    max-height: min(80dvh, 32rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.appbar-menu-divider {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--int-line, #D3DAE1);
}

.appbar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.45rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--int-ink, #32363D);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.appbar-menu-item:hover,
.appbar-menu-item:focus-visible {
    background: color-mix(in srgb, var(--aiden-royal) 8%, var(--int-surface, #fff));
    outline: none;
}

.appbar-menu-item.is-active {
    background: color-mix(in srgb, var(--aiden-limelight) 28%, var(--int-surface, #fff));
    font-weight: 700;
}

.user-menu-header {
    padding: 0.65rem 0.9rem 0.35rem;
    min-width: 12rem;
}

.user-menu-header__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--int-ink-strong, #3C5279);
    line-height: 1.25;
}

.user-menu-header__meta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--int-muted, #3C5279);
    line-height: 1.3;
}

.user-menu-section {
    padding: 0.35rem 0.9rem 0.55rem;
}

.user-menu-section__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--int-muted, #3C5279);
}

.user-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
}

.user-menu-row__label {
    font-size: 0.85rem;
    color: var(--int-ink, #32363D);
}

/* ---- User widget / avatar ---- */
.user-widget {
    display: flex;
    align-items: center;
    gap: var(--aiden-space-2, 0.5rem);
    min-height: 2.5rem;
    padding: 0.15rem 0.25rem;
    border-radius: var(--aiden-radius-md, 0.5rem);
}

button.user-widget {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
}

.user-widget--clickable {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.user-widget--on-brand.user-widget--clickable:hover,
.user-widget--on-brand.user-widget--clickable:focus-visible {
    background: color-mix(in srgb, #fff 14%, transparent);
    outline: none;
}

.user-widget .user-copy {
    display: none;
}

.avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--aiden-radius-full, 9999px);
    background: color-mix(in srgb, #fff 18%, transparent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, #fff 35%, transparent);
}

.avatar--menu {
    background: color-mix(in srgb, var(--aiden-royal) 16%, var(--aiden-off-white));
    color: var(--aiden-royal);
    border-color: transparent;
}

/* ---- Language badge ---- */
/* Language select inside user menu */
.user-menu-section--language {
    padding-bottom: 0.65rem;
}

.lang-select {
    position: relative;
}

.lang-select__trigger,
.lang-select__option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-md, 0.5rem);
    background: var(--int-surface, #fff);
    color: var(--int-ink, #32363D);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lang-select__trigger:hover,
.lang-select__trigger:focus-visible,
.lang-select__option:hover,
.lang-select__option:focus-visible {
    background: color-mix(in srgb, var(--aiden-royal) 8%, var(--int-surface, #fff));
    outline: none;
}

.lang-select__trigger:disabled,
.lang-select__option:disabled {
    opacity: 0.6;
    cursor: default;
}

.lang-select__flag {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: var(--aiden-radius-full, 9999px);
    flex: 0 0 auto;
    align-self: center;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--aiden-royal) 18%, transparent);
}

.lang-select__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.25;
    font-weight: 600;
}

.lang-select__chevron {
    flex: 0 0 auto;
    color: var(--aiden-royal, #3C5279);
}

/* Inline expand (not nested absolute popup) → single scroll surface */
.lang-select__menu {
    position: static;
    margin-top: 0.35rem;
    padding: 0.15rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lang-select__option {
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-md, 0.5rem);
    min-height: 2.5rem;
    margin-bottom: 0;
}

.lang-select__option:last-child {
    margin-bottom: 0;
}

.lang-select__option.is-active {
    background: color-mix(in srgb, var(--aiden-limelight) 28%, var(--int-surface, #fff));
    font-weight: 700;
}

/* ---- Bottom FnKeys bar ---- */
.mud-appbar.wba-fnkeys {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--wba-fnkeys-height) !important;
    background: var(--aiden-royal, #3C5279) !important;
    color: #fff !important;
    border-top: var(--wba-fnkeys-border) solid var(--aiden-limelight, #BFD730);
    box-shadow: none !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 1400 !important;
    overflow: visible !important;
}

.mud-appbar.wba-fnkeys .mud-toolbar,
.mud-appbar.wba-fnkeys .mud-toolbar-appbar,
.mud-appbar.wba-fnkeys .mud-toolbar-gutters {
    min-height: var(--wba-fnkeys-height) !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    overflow: visible !important;
}

.wba-fnkeys-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.wba-fnkeys-visible {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.wba-fnkeys-visible--equal {
    flex: 1 1 auto;
}

.wba-fnkeys-visible--equal .wba-fnkey-btn {
    flex: 1 1 0 !important;
    width: auto;
    min-width: 0 !important;
}

.wba-fnkeys-overflow {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.wba-fnkey-btn {
    min-height: 2.75rem !important;
    border-radius: var(--aiden-radius-md, 8px) !important;
    min-width: 0 !important;
    max-width: 100%;
    flex: 0 0 auto;
}

.wba-fnkey-btn .mud-button-label,
.wba-fnkey-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wba-fnkeys-more,
.wba-fnkeys-more--measure {
    appearance: none;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--aiden-limelight, #BFD730) !important;
    border-radius: var(--aiden-radius-md, 8px);
    /* Compact icon-only control to free width for visible Fn keys */
    width: 2.25rem;
    height: 2.75rem;
    min-width: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.wba-fnkeys-more .mud-icon-root,
.wba-fnkeys-more .mud-svg-icon {
    color: var(--aiden-limelight, #BFD730) !important;
    fill: var(--aiden-limelight, #BFD730) !important;
    font-size: 1.5rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.wba-fnkeys-more:hover,
.wba-fnkeys-more:focus-visible {
    background: color-mix(in srgb, var(--aiden-limelight) 14%, transparent) !important;
    outline: none;
}

.wba-fnkeys-more:disabled {
    opacity: 0.5;
    cursor: default;
}

.wba-fnkeys-row {
    gap: 0.35rem;
}

/* ---- Navy slide-in drawer (from right) ---- */
.wba-fnkeys-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 2400; /* below dialogs (2500+), above app chrome (1400) */
    pointer-events: none;
    visibility: hidden;
}

.wba-fnkeys-drawer-root.is-open {
    pointer-events: auto;
    visibility: visible;
}

.wba-fnkeys-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(50, 54, 61, 0.45);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.wba-fnkeys-drawer-root.is-open .wba-fnkeys-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.wba-fnkeys-drawer {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    /* Shrink-wrap to content; cap to viewport */
    width: max-content;
    max-width: min(90vw, 22rem);
    max-height: min(100dvh, 100%);
    height: auto;
    background: var(--aiden-royal, #3C5279);
    color: #fff;
    box-shadow: -8px 0 28px rgba(16, 24, 40, 0.28);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateX(105%);
    transition: transform 0.24s ease;
padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top-left-radius: var(--aiden-radius-lg, 12px);
    box-sizing: border-box;
}

.wba-fnkeys-drawer-root.is-open .wba-fnkeys-drawer {
    transform: translateX(0);
}

.wba-fnkeys-drawer__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-height: 2.25rem;
    margin-bottom: 0.35rem;
    padding: 0;
}

.wba-fnkeys-drawer__close {
    appearance: none;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--aiden-limelight, #BFD730) !important;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: var(--aiden-radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.wba-fnkeys-drawer__close .mud-icon-root,
.wba-fnkeys-drawer__close .mud-svg-icon {
    color: var(--aiden-limelight, #BFD730) !important;
    fill: var(--aiden-limelight, #BFD730) !important;
}

.wba-fnkeys-drawer__close:hover,
.wba-fnkeys-drawer__close:focus-visible {
    background: color-mix(in srgb, var(--aiden-limelight) 14%, transparent) !important;
    outline: none;
}

.wba-fnkeys-drawer__nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 0 1 auto;
    min-height: 0;
    max-height: calc(100dvh - 3.5rem - env(safe-area-inset-bottom, 0px));
    padding: 0;
}

/* Same look as bottom FnKeys bar buttons (outlined limelight on royal) */
.wba-fnkeys-drawer__btn {
    appearance: none;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    min-width: 8rem;
    min-height: 2.75rem !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: var(--aiden-radius-md, 8px) !important;
    border: 1px solid var(--aiden-limelight, #BFD730) !important;
    background: transparent !important;
    color: var(--aiden-color-text-on-dark, #fff) !important;
    font: inherit;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer;
    box-sizing: border-box;
}

.wba-fnkeys-drawer__btn:hover,
.wba-fnkeys-drawer__btn:focus-visible {
    background: color-mix(in srgb, var(--aiden-limelight) 16%, transparent) !important;
    outline: none;
}

.wba-fnkeys-drawer__btn:active {
    transform: scale(0.99);
}

.wba-fnkeys-drawer__btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.wba-fnkeys-drawer__btn .wba-fnkey-label,
.wba-fnkeys-drawer__btn .mud-button-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-weight: 400 !important;
}

/* Off-screen natural width measurement */
.wba-fnkeys-measure {
    position: absolute;
    left: -10000px;
    top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    pointer-events: none;
    visibility: hidden;
}

.wba-fnkey-btn--measure {
    flex: 0 0 auto !important;
    max-width: none !important;
}

.wba-fnkey-btn--measure .wba-fnkey-label {
    overflow: visible;
    text-overflow: clip;
}

.wba-fnkeys .mud-button {
    min-height: 2.75rem !important;
    border-radius: var(--aiden-radius-md, 8px) !important;
    font-weight: 400 !important;
}

.wba-fnkeys .mud-button .mud-button-label,
.wba-fnkeys .wba-fnkey-label {
    font-weight: 400 !important;
    color: var(--aiden-color-text-on-dark, #fff) !important;
}

/* Outlined secondary on royal bar → limelight border, white label */
.wba-fnkeys .mud-button-outlined-secondary {
    border-color: var(--aiden-limelight, #BFD730) !important;
    color: var(--aiden-color-text-on-dark, #fff) !important;
    background: transparent !important;
}

.wba-fnkeys .mud-button-outlined-secondary:hover {
    background: color-mix(in srgb, var(--aiden-limelight) 16%, transparent) !important;
}

.wba-fnkeys .mud-button-outlined-secondary .mud-button-label,
.wba-fnkeys .mud-button-outlined-secondary .wba-fnkey-label {
    color: var(--aiden-color-text-on-dark, #fff) !important;
}

/* ---- Action hierarchy (filled primary = limelight) ---- */
.mud-button-filled-primary {
    background: var(--aiden-color-action-primary, #BFD730) !important;
    color: var(--aiden-color-text-on-action, #32363D) !important;
    box-shadow: none !important;
    min-height: 2.75rem;
}

.mud-button-filled-primary:hover {
    background: var(--aiden-color-action-primary-hover, #C9DD4F) !important;
}

.mud-button-filled-primary .mud-button-label,
.mud-button-filled-primary .mud-icon-root {
    color: inherit !important;
}

.mud-button-filled-secondary {
    background: var(--aiden-color-action-secondary, #3C5279) !important;
    color: var(--aiden-color-text-on-dark, #fff) !important;
    box-shadow: none !important;
    min-height: 2.75rem;
}

.mud-button-filled-secondary:hover {
    filter: brightness(0.92);
}

.mud-button-outlined-secondary {
    border-color: var(--aiden-royal, #3C5279) !important;
    color: var(--aiden-royal, #3C5279) !important;
}

.mud-input:focus-within .mud-input-outlined-border,
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--aiden-color-border-focus, #3C5279) !important;
    box-shadow: 0 0 0 3px var(--int-focus-ring, color-mix(in srgb, var(--aiden-royal) 22%, transparent)) !important;
}

/* Keep focus visible without Mud's default grey outer glow on the slot */
.mud-input:focus-within .mud-input-slot,
.mud-input-outlined:focus-within .mud-input-slot {
    box-shadow: none !important;
    outline: none !important;
}

/* Aiden focus ring for interactive controls (DS 3px intent) */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-list-item-clickable:focus-visible,
.wba-shell a:focus-visible,
#blazor-error-ui a:focus-visible,
.appbar-menu-item:focus-visible,
.lang-select__trigger:focus-visible,
.lang-select__option:focus-visible,
.user-widget--clickable:focus-visible,
.wba-fnkeys-more:focus-visible,
.wba-fnkeys-drawer__close:focus-visible,
.wba-fnkeys-drawer__btn:focus-visible,
.main-menu-card:focus-visible {
    outline: 3px solid var(--aiden-color-border-focus, #3C5279) !important;
    outline-offset: 2px !important;
}

/* Inverse / brand chrome: limelight focus ring */
.mud-appbar.wba-appbar .mud-icon-button:focus-visible,
.mud-appbar.wba-appbar .user-widget--clickable:focus-visible,
.mud-appbar.wba-fnkeys .mud-button-root:focus-visible,
.wba-fnkeys-more:focus-visible,
.wba-fnkeys-drawer__close:focus-visible,
.wba-fnkeys-drawer__btn:focus-visible {
    outline-color: var(--aiden-limelight, #BFD730) !important;
}

/* Selects / popover listboxes */
.mud-select:focus-within .mud-input-outlined-border,
.mud-popover .mud-list-item-clickable:focus-visible {
    border-color: var(--aiden-color-border-focus, #3C5279);
    box-shadow: 0 0 0 3px var(--int-focus-ring, color-mix(in srgb, var(--aiden-royal) 22%, transparent));
}

/* Links: royal on light, limelight inverse on dark surfaces */
.wba-shell a:not(.mud-button-root):not(.mud-nav-link),
#blazor-error-ui a,
.wba-content-body--html a,
.mud-typography a {
    color: var(--aiden-color-text-link, var(--aiden-royal, #3C5279));
    text-decoration: underline;
    text-decoration-thickness: var(--aiden-link-underline-thickness, 2px);
    text-underline-offset: 0.16em;
    font-weight: 700;
}

.wba-shell a:not(.mud-button-root):not(.mud-nav-link):hover,
#blazor-error-ui a:hover,
.wba-content-body--html a:hover,
.mud-typography a:hover {
    color: var(--aiden-color-text-link-hover, var(--aiden-sapphire-hover, #0E0EBA));
}

.mud-appbar.wba-appbar a:not(.mud-button-root),
.mud-appbar.wba-fnkeys a:not(.mud-button-root),
.wba-fnkeys-drawer a:not(.mud-button-root),
.support a,
.link--inverse {
    color: var(--aiden-color-text-link-inverse, var(--aiden-limelight, #BFD730));
}

.mud-appbar.wba-appbar a:not(.mud-button-root):hover,
.mud-appbar.wba-fnkeys a:not(.mud-button-root):hover,
.wba-fnkeys-drawer a:not(.mud-button-root):hover,
.link--inverse:hover {
    color: var(--aiden-color-text-link-inverse-hover, var(--aiden-limelight-hover, #C9DD4F));
}

/* Status pill — colour always paired with label text */
.wba-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-height: 1.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--aiden-status-pill-radius, var(--aiden-radius-full, 9999px));
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.wba-status-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wba-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--aiden-radius-full, 9999px);
    background: currentColor;
    flex: 0 0 auto;
}

.wba-status--healthy,
.wba-status--success {
    background: color-mix(in srgb, var(--aiden-color-status-success, #25D366) 22%, white);
    color: var(--int-success-fg, #087944);
}

.wba-status--attention {
    background: color-mix(in srgb, var(--aiden-color-status-warning, #B54708) 18%, white);
    color: var(--aiden-color-status-warning, #B54708);
}

.wba-status--error {
    background: var(--int-error-bg, #fde8e7);
    color: var(--aiden-color-status-danger, #B42318);
}

.wba-status--neutral {
    background: color-mix(in srgb, var(--aiden-color-status-info, #3C5279) 12%, white);
    color: var(--aiden-color-status-info, #3C5279);
}

/* Empty state */
.wba-empty-state {
    display: grid;
    place-items: center;
    gap: var(--aiden-space-3, 12px);
    width: 100%;
    padding: var(--aiden-space-6, 32px) var(--aiden-space-4, 16px);
    text-align: center;
    border: 1px solid var(--aiden-empty-state-border, var(--aiden-color-border-default, #D3DAE1));
    border-radius: var(--aiden-empty-state-radius, var(--aiden-radius-lg, 12px));
    background: var(--aiden-empty-state-background, var(--aiden-color-surface-default, #fff));
    color: var(--aiden-empty-state-text, var(--aiden-color-text-secondary, #3C5279));
    box-shadow: var(--aiden-elevation-resting, 0 1px 2px rgba(60, 82, 121, 0.06));
}

.wba-empty-state__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid var(--aiden-color-border-default, #D3DAE1);
    border-radius: var(--aiden-radius-lg, 12px);
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 8%, white);
    color: var(--aiden-royal, #3C5279);
}

.wba-empty-state__title {
    margin: 0;
    font-family: var(--aiden-font-display, "Amberes Grotesk", Ubuntu, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--aiden-color-text-primary, #32363D);
}

.wba-empty-state__description {
    margin: 0;
    max-width: 28rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--aiden-color-text-secondary, #3C5279);
}

.wba-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.wba-task-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* ---- Subtle footer brand mark (above FnKeys, non-interactive) ---- */
.wba-footer-brand {
    position: fixed;
    right: 0.65rem;
    bottom: calc(var(--wba-shell-bottom) + 0.35rem);
    z-index: 2;
    pointer-events: none;
    user-select: none;
    line-height: 0;
}

.wba-footer-brand__logo {
    display: block;
    height: 0.95rem;
    width: auto;
    max-width: min(28vw, 7.5rem);
    opacity: 0.18;
    filter: grayscale(0.15);
}

.theme-dark-mode .wba-footer-brand__logo {
    opacity: 0.22;
}

@media (max-width: 360px) {
    .wba-footer-brand__logo {
        height: 0.8rem;
        max-width: 24vw;
        opacity: 0.14;
    }
}

/* ---- Content / task cards ---- */
.wba-page-content {
    /* Bottom clearance is handled by fixed shell main-content region */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.wba-page-content > .mud-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-content: stretch;
}

.wba-page-content > .mud-grid > .mud-grid-item.d-flex {
    min-height: 12rem;
}

.wba-content-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
}

/* Read/detail content card — mobile-first, shell-aware scroll */
.wba-content-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--int-line, #D3DAE1) !important;
    border-radius: var(--aiden-radius-lg, 12px) !important;
    background: var(--int-surface, #fff) !important;
    box-shadow: var(--aiden-elevation-resting, 0 1px 2px rgba(60, 82, 121, 0.06)) !important;
    overflow: hidden;
}

.wba-content-card--error {
    border-color: color-mix(in srgb, var(--aiden-danger, #B42318) 55%, var(--int-line, #D3DAE1)) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-danger, #B42318), var(--aiden-elevation-resting) !important;
}

.wba-content-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--int-ink, #32363D);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

.wba-content-body--html {
    white-space: normal;
}

.wba-content-body--html p {
    margin: 0 0 0.65rem;
}

.wba-content-body--html p:last-child {
    margin-bottom: 0;
}

.wba-content-body--html ul,
.wba-content-body--html ol {
    margin: 0 0 0.65rem;
    padding-left: 1.25rem;
}

.wba-content-body--html table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
}

.wba-content-body--html th,
.wba-content-body--html td {
    border: 1px solid var(--int-line, #D3DAE1);
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.wba-content-body--html pre,
.wba-content-body--html code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wba-content-body--html pre {
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--aiden-radius-md, 8px);
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 6%, var(--int-surface, #fff));
    overflow-x: auto;
}

.wba-content-body--html a {
    /* link colour/underline handled by shared link rules above */
}

.wba-content-body--html b,
.wba-content-body--html strong {
    font-weight: 700;
    color: var(--int-ink-strong, var(--aiden-warm-black, #32363D));
}

/* Info panel — compact Aiden card */
.wba-info-panel.mud-paper {
    border: 1px solid var(--int-line, #D3DAE1) !important;
    border-radius: var(--aiden-radius-lg, 12px) !important;
    background: var(--int-surface, #fff) !important;
    box-shadow: var(--aiden-elevation-resting) !important;
    overflow: hidden;
}

.wba-info-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
}

.wba-info-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--int-ink-strong, var(--aiden-warm-black, #32363D)) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wba-info-panel__toggle {
    flex: 0 0 auto;
    color: var(--aiden-royal, #3C5279) !important;
}

.wba-info-panel__body {
    padding: 0 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wba-info-panel__row {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    color: var(--int-ink, #32363D) !important;
    overflow-wrap: anywhere;
}

.wba-info-panel__row-key {
    font-weight: 600;
    color: var(--aiden-royal, #3C5279);
}

.theme-dark-mode .wba-content-card,
.theme-dark-mode .wba-info-panel.mud-paper {
    background: var(--int-surface, #1c2533) !important;
    border-color: var(--int-line) !important;
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .wba-content-body {
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .wba-content-body--html pre {
    background: color-mix(in srgb, #000 28%, var(--int-surface, #1c2533));
}

.theme-dark-mode .wba-content-body--html th,
.theme-dark-mode .wba-content-body--html td {
    border-color: var(--int-line);
}

.theme-dark-mode .wba-content-body--html a,
.theme-dark-mode .wba-shell a:not(.mud-button-root):not(.mud-nav-link),
.theme-dark-mode #blazor-error-ui a,
.theme-dark-mode .mud-typography a {
    color: var(--aiden-color-text-link, var(--aiden-limelight, #BFD730));
}

.theme-dark-mode .wba-shell a:not(.mud-button-root):not(.mud-nav-link):hover,
.theme-dark-mode #blazor-error-ui a:hover,
.theme-dark-mode .mud-typography a:hover {
    color: var(--aiden-color-text-link-hover, var(--aiden-limelight-hover, #C9DD4F));
}

.theme-dark-mode .wba-status--healthy,
.theme-dark-mode .wba-status--success {
    background: var(--int-success-bg, rgba(37, 211, 102, 0.14));
    color: var(--int-success-fg, #3dcb6c);
}

.theme-dark-mode .wba-status--attention {
    background: var(--int-warning-bg, rgba(181, 71, 8, 0.2));
    color: var(--int-warning-fg, #ffb545);
}

.theme-dark-mode .wba-status--error {
    background: var(--int-error-bg, rgba(180, 35, 24, 0.18));
    color: var(--int-error-fg, #ff6b84);
}

.theme-dark-mode .wba-status--neutral {
    background: var(--int-info-bg, rgba(60, 82, 121, 0.28));
    color: var(--int-info-fg, #9eb6d4);
}

.theme-dark-mode .wba-empty-state {
    background: var(--int-surface, #1c2533);
    border-color: var(--int-line);
    color: var(--int-muted, #a8b6c7);
}

.theme-dark-mode .wba-empty-state__icon {
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 28%, #121a2b);
    border-color: var(--int-line);
    color: var(--aiden-color-text-secondary, #a8b6c7);
}

.theme-dark-mode .wba-empty-state__title {
    color: var(--int-ink-strong, #e4ebf3);
}

.theme-dark-mode .wba-empty-state__description {
    color: var(--int-muted, #a8b6c7);
}

.theme-dark-mode .mud-button-root:focus-visible,
.theme-dark-mode .mud-icon-button:focus-visible,
.theme-dark-mode .mud-list-item-clickable:focus-visible,
.theme-dark-mode .main-menu-card:focus-visible,
.theme-dark-mode .appbar-menu-item:focus-visible,
.theme-dark-mode .lang-select__trigger:focus-visible,
.theme-dark-mode .lang-select__option:focus-visible {
    outline-color: var(--aiden-color-border-focus, var(--aiden-limelight, #BFD730)) !important;
}

.theme-dark-mode .wba-content-body--html b,
.theme-dark-mode .wba-content-body--html strong {
    color: var(--int-ink-strong, #e4ebf3);
}

.theme-dark-mode .wba-content-card--error {
    border-color: color-mix(in srgb, var(--aiden-danger, #B42318) 45%, var(--int-line)) !important;
}

.theme-dark-mode .wba-info-panel__title {
    color: var(--int-ink-strong, #e4ebf3) !important;
}

.theme-dark-mode .wba-info-panel__row {
    color: var(--int-ink, #d5dee8) !important;
}

.theme-dark-mode .wba-info-panel__row-key,
.theme-dark-mode .wba-info-panel__toggle {
    color: var(--aiden-color-text-secondary, #a8b6c7) !important;
}

.wba-question-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wba-question-actions .mud-button {
    flex: 1 1 8rem;
    min-height: 2.75rem;
}

.wba-task-card {
    border: 1px solid var(--int-line, #D3DAE1) !important;
    border-radius: var(--aiden-radius-lg, 12px) !important;
    box-shadow: var(--aiden-elevation-resting, 0 1px 2px rgba(60, 82, 121, 0.06)) !important;
    background: var(--int-surface, #fff);
    overflow: hidden;
}

.wba-task-card.is-urgent {
    border-color: color-mix(in srgb, var(--aiden-color-status-danger, #B42318) 45%, var(--int-line, #D3DAE1)) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-color-status-danger, #B42318), var(--aiden-elevation-resting, 0 1px 2px rgba(60, 82, 121, 0.06)) !important;
}

.wba-task-card.is-urgent.is-selected {
    border-color: var(--aiden-royal, #3C5279) !important;
    /* Selected limelight cue wins; keep a thin danger trace under the primary accent. */
    box-shadow:
        inset 0.25rem 0 0 var(--aiden-limelight, #BFD730),
        inset 0.4rem 0 0 color-mix(in srgb, var(--aiden-color-status-danger, #B42318) 70%, transparent),
        var(--aiden-elevation-resting, 0 1px 2px rgba(60, 82, 121, 0.06)) !important;
}

.wba-task-card.is-selected {
    border-color: var(--aiden-royal, #3C5279) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-limelight, #BFD730), var(--aiden-elevation-resting) !important;
    background: color-mix(in srgb, var(--aiden-limelight) 12%, #fff);
}

.wba-task-card.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.wba-task-card__primary {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.wba-task-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.wba-task-card__primary .mud-typography,
.wba-task-card__name.mud-typography {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wba-task-card__lines {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--aiden-color-text-secondary, #3C5279);
}

.wba-task-card__date {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    color: var(--aiden-color-text-secondary, #3C5279);
    white-space: nowrap;
}

.wba-task-status-row {
    justify-self: end;
}

.wba-task-urgent-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--aiden-color-status-danger, #B42318);
}

.wba-task-card__icon {
    align-self: start;
    justify-self: end;
}

.theme-dark-mode .wba-task-card__lines,
.theme-dark-mode .wba-task-card__date {
    color: var(--aiden-color-text-secondary, #a8b6c7);
}

.wba-confirm-panel {
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-lg, 12px);
    background: var(--int-surface, #fff);
    padding: var(--aiden-space-3, 12px);
    overflow: auto;
}

/* ---- DataGrid: normal table when wide; stacked fields when narrow ---- */
.wba-datagrid-page {
    /* FnKeys clearance without a large empty band under short grids */
    padding-bottom: 0.25rem !important;
    margin-bottom: 0 !important;
}

.wba-datagrid {
    container-type: inline-size;
    container-name: wba-datagrid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    overflow-x: hidden;
}

.wba-datagrid .mud-table-container,
.wba-datagrid .mud-data-grid,
.wba-datagrid .mud-table-root,
.wba-datagrid table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
}

.wba-datagrid .mud-table-container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.wba-datagrid .mud-table-root {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-md, 8px);
    background: var(--int-surface, #fff);
    table-layout: auto;
}

/* Wide / default: classic compact table */
.wba-datagrid .mud-table-head .mud-table-cell,
.wba-datagrid thead .mud-table-cell {
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 8%, var(--int-surface, #fff));
    color: var(--aiden-color-text-secondary, var(--aiden-royal, #3C5279));
    border-bottom: 1px solid var(--int-line, #D3DAE1);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    padding: 0.35rem 0.45rem;
    white-space: nowrap;
}

.wba-datagrid .mud-table-body .mud-table-cell,
.wba-datagrid tbody .mud-table-cell {
    border-bottom: 1px solid var(--int-line, #D3DAE1);
    padding: 0.3rem 0.45rem;
    vertical-align: middle;
    color: var(--int-ink, #32363D);
}

.wba-datagrid .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.wba-datagrid .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 4%, var(--int-surface, #fff));
}

.wba-datagrid__cell {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Labels only in stacked mode */
.wba-datagrid__cell::before {
    content: none;
}

.wba-datagrid__cell .mud-typography,
.wba-datagrid__cell .mud-input-control,
.wba-datagrid__cell .mud-input {
    max-width: 100%;
}

/* Selection: limelight inset like .wba-task-card.is-selected */
.wba-datagrid .mud-table-row.wba-datagrid__row--selected,
.wba-datagrid tr.wba-datagrid__row--selected {
    background: color-mix(in srgb, var(--aiden-limelight, #BFD730) 12%, var(--int-surface, #fff)) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-limelight, #BFD730);
}

.wba-datagrid .mud-table-row.wba-datagrid__row--selected > .mud-table-cell,
.wba-datagrid tr.wba-datagrid__row--selected > td {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--aiden-royal, #3C5279) 28%, var(--int-line, #D3DAE1));
}

/* Narrow only: stacked label|value rows (selectors relative to container). */
@container wba-datagrid (max-width: 36rem) {
    thead,
    .mud-table-head {
        display: none !important;
    }

    colgroup,
    col {
        display: none !important;
    }

    tbody.mud-table-body,
    .mud-table-body {
        display: block;
        width: 100%;
    }

    tbody tr.mud-table-row,
    .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.65rem 0.55rem 0.75rem;
        border-bottom: 1px solid var(--int-line, #D3DAE1);
    }

    tbody tr.mud-table-row:last-child,
    .mud-table-body .mud-table-row:last-child {
        border-bottom: 0;
    }

    tbody td.mud-table-cell,
    .mud-table-body .mud-table-cell {
        display: block;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .wba-datagrid__cell {
        display: grid;
        grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
        column-gap: 0.5rem;
        align-items: baseline;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: anywhere;
    }

    .wba-datagrid__cell::before {
        content: attr(data-label);
        grid-column: 1;
        margin: 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.25;
        color: var(--aiden-color-text-secondary, var(--aiden-royal, #3C5279));
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wba-datagrid__cell > * {
        grid-column: 2;
        min-width: 0;
        max-width: 100%;
    }

    .wba-datagrid__cell .mud-typography {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wba-datagrid__cell .mud-input-control,
    .wba-datagrid__cell .mud-picker {
        width: 100%;
    }
}

/* Viewport fallback when container queries are unavailable */
@media (max-width: 36rem) {
    .wba-datagrid thead,
    .wba-datagrid .mud-table-head {
        display: none !important;
    }

    .wba-datagrid colgroup,
    .wba-datagrid col {
        display: none !important;
    }

    .wba-datagrid tbody.mud-table-body,
    .wba-datagrid .mud-table-body {
        display: block;
        width: 100%;
    }

    .wba-datagrid tbody tr.mud-table-row,
    .wba-datagrid .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.65rem 0.55rem 0.75rem;
        border-bottom: 1px solid var(--int-line, #D3DAE1);
    }

    .wba-datagrid tbody tr.mud-table-row:last-child,
    .wba-datagrid .mud-table-body .mud-table-row:last-child {
        border-bottom: 0;
    }

    .wba-datagrid tbody td.mud-table-cell,
    .wba-datagrid .mud-table-body .mud-table-cell {
        display: block;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .wba-datagrid .wba-datagrid__cell {
        display: grid;
        grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
        column-gap: 0.5rem;
        align-items: baseline;
        width: 100%;
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: anywhere;
    }

    .wba-datagrid .wba-datagrid__cell::before {
        content: attr(data-label);
        grid-column: 1;
        margin: 0;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.25;
        color: var(--aiden-color-text-secondary, var(--aiden-royal, #3C5279));
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wba-datagrid .wba-datagrid__cell > * {
        grid-column: 2;
        min-width: 0;
        max-width: 100%;
    }

    .wba-datagrid .wba-datagrid__cell .mud-typography {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .wba-datagrid .wba-datagrid__cell .mud-input-control,
    .wba-datagrid .wba-datagrid__cell .mud-picker {
        width: 100%;
    }
}

.theme-dark-mode .wba-datagrid .mud-table-root {
    background: var(--int-surface, #1c2533);
    border-color: var(--int-line);
}

.theme-dark-mode .wba-datagrid .mud-table-head .mud-table-cell,
.theme-dark-mode .wba-datagrid thead .mud-table-cell {
    background: color-mix(in srgb, var(--aiden-royal, #3C5279) 28%, #121a2b);
    color: var(--int-ink-strong, #e4ebf3);
    border-bottom-color: var(--int-line);
}

.theme-dark-mode .wba-datagrid .mud-table-body .mud-table-cell,
.theme-dark-mode .wba-datagrid tbody .mud-table-cell {
    border-bottom-color: var(--int-line);
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .wba-datagrid .mud-table-row.wba-datagrid__row--selected,
.theme-dark-mode .wba-datagrid tr.wba-datagrid__row--selected {
    background: color-mix(in srgb, var(--aiden-limelight, #BFD730) 12%, #1c2533) !important;
}

.theme-dark-mode .wba-datagrid__cell::before {
    color: var(--aiden-color-text-secondary, #a8b6c7);
}

.wba-action-label {
    font-family: var(--aiden-font-display, "Amberes Grotesk", Ubuntu, sans-serif);
    font-weight: 700;
    color: var(--aiden-warm-black, #32363D);
}

.wba-info-label {
    color: var(--aiden-royal, #3C5279);
}

.wba-confirm-actions {
    gap: var(--aiden-space-3, 12px);
}

.wba-confirm-actions .mud-button {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Main menu tiles ---- */
.main-menu-card {
    border: 1px solid var(--int-line, #D3DAE1) !important;
    border-radius: var(--aiden-radius-lg, 12px) !important;
    box-shadow: var(--aiden-elevation-resting) !important;
    background: var(--int-surface, #fff);
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    min-height: 5.5rem;
    overflow: hidden;
}

.main-menu-card:hover {
    border-color: var(--aiden-royal, #3C5279) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-limelight, #BFD730), var(--aiden-elevation-raised) !important;
}

.main-menu-card:focus-visible {
    border-color: var(--aiden-royal, #3C5279) !important;
    box-shadow: inset 0.25rem 0 0 var(--aiden-limelight, #BFD730), var(--aiden-elevation-raised) !important;
    outline: 3px solid var(--aiden-color-border-focus, #3C5279) !important;
    outline-offset: 2px !important;
}

.main-menu-card:active {
    transform: scale(0.99);
}

/* Custom tile body: icon left-aligned with label; icon vertically centered with counter */
.main-menu-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem; /* clear space icon row → label */
    box-sizing: border-box;
    width: 100%;
    padding: 0.875rem 1rem;
}

.main-menu-tile__row {
    display: flex;
    flex-direction: row;
    align-items: center; /* icon mid = counter mid */
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2rem;
}

.main-menu-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.main-menu-tile__icon .mud-icon-root {
    display: block !important;
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 2rem !important;
    line-height: 1 !important;
}

.main-menu-tile__icon .mud-icon-root svg {
    display: block;
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 !important;
}

.main-menu-tile__qty,
.main-menu-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 2rem;
    min-height: 2rem;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    /* Match Mud Typo.h4 / AidenWmsTheme */
    font-family: var(--aiden-font-display, "Amberes Grotesk", Ubuntu, Arial, sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--aiden-royal, #3C5279) !important;
}

.main-menu-tile__label,
.main-menu-description {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    /* Same left edge as icon box (no extra indent) */
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Match Mud Typo.h6 / AidenWmsTheme */
    font-family: var(--aiden-font-display, "Amberes Grotesk", Ubuntu, Arial, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    min-height: 1.2em;
    color: var(--aiden-warm-black, #32363D);
}

/* ---- Dialog baseline ---- */
.mud-dialog.wba-dialog {
    border-radius: var(--aiden-radius-lg, 12px) !important;
    border: 1px solid var(--int-line, #D3DAE1);
    overflow: hidden;
}

.dialog-blur {
    backdrop-filter: blur(10px);
}

/* MudBlazor default: container=N, overlay=N+1, dialog=N+2.
   Force absolute values ABOVE app chrome (1400) and fn-drawer (2400).
   Keep relative order so dialog stays above its own dark overlay. */
.mud-dialog-container {
    z-index: 3000 !important;
    pointer-events: auto !important;
}

.mud-overlay.mud-overlay-dialog {
    z-index: 3001 !important;
}

.mud-dialog-container .mud-dialog,
.mud-dialog {
    z-index: 3002 !important;
    pointer-events: auto !important;
}

/* Barcode scanner: large in-viewport dialog, actions always reachable */
.mud-dialog.wba-barcode-dialog {
    width: min(96vw, 40rem) !important;
    max-width: 96vw !important;
    height: min(88dvh, 100%) !important;
    max-height: 88dvh !important;
    margin: max(1.5dvh, 0.4rem) auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: var(--aiden-radius-lg, 12px) !important;
    /* Keep Mud default dialog z-index (N+2); do not force lower */
}

.wba-barcode-dialog .mud-dialog-title {
    flex: 0 0 auto !important;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem !important;
    border-bottom: 1px solid var(--int-line, #D3DAE1);
    z-index: 3;
    position: relative;
    background: var(--mud-palette-surface, #fff);
}

.wba-barcode-dialog__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.5rem;
}

.wba-barcode-dialog__title {
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wba-barcode-dialog__close {
    flex: 0 0 auto;
}

.wba-barcode-dialog .mud-dialog-content,
.wba-barcode-dialog__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    z-index: 1;
}

.wba-barcode-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}

.wba-barcode-dialog__viewport {
    flex: 1 1 auto;
    min-height: 0 !important;
    width: 100%;
    background: #111;
    border: 1px solid var(--int-line, #D3DAE1);
    border-radius: var(--aiden-radius-md, 8px);
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* html5-qrcode injects video/canvas — keep them inside the viewport box */
.wba-barcode-dialog__viewport,
.wba-barcode-dialog__viewport #barcode-scanner,
#barcode-scanner {
    max-height: 100% !important;
}

.wba-barcode-dialog__viewport video,
.wba-barcode-dialog__viewport canvas,
#barcode-scanner video,
#barcode-scanner canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.wba-barcode-dialog__camera {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.wba-barcode-dialog__select {
    width: 100%;
}

.wba-barcode-dialog .mud-dialog-actions {
    flex: 0 0 auto !important;
    padding: 0.55rem 0.75rem !important;
    gap: 0.35rem;
    border-top: 1px solid var(--int-line, #D3DAE1);
    background: var(--mud-palette-surface, #fff);
    position: relative;
    z-index: 4;
    pointer-events: auto !important;
}

.wba-barcode-dialog .mud-dialog-actions .mud-button-root {
    min-height: 2.75rem;
    pointer-events: auto !important;
}

/* ---- Dark mode hooks ---- */
.theme-dark-mode {
    background: var(--aiden-color-surface-canvas, #141a24);
    color: var(--aiden-color-text-primary, #d5dee8);
}

/* Soft body text — override harsh pure-white Mud defaults */
.theme-dark-mode,
.theme-dark-mode .mud-typography,
.theme-dark-mode .mud-input-slot,
.theme-dark-mode .mud-input-label,
.theme-dark-mode p,
.theme-dark-mode span:not(.mud-icon-root):not(.mud-button-label) {
    color: var(--aiden-color-text-primary, #d5dee8);
}

.theme-dark-mode .mud-main-content {
    color: var(--aiden-color-text-primary, #d5dee8);
    background: var(--aiden-color-surface-canvas, #141a24);
}

.theme-dark-mode .wba-action-label {
    color: var(--int-ink-strong, #e4ebf3);
}

.theme-dark-mode .wba-info-label {
    color: var(--aiden-color-text-secondary, #a8b6c7) !important;
}

.theme-dark-mode .main-menu-quantity,
.theme-dark-mode .main-menu-tile__qty {
    color: var(--aiden-color-text-secondary, #a8b6c7) !important;
}

.theme-dark-mode .main-menu-description,
.theme-dark-mode .main-menu-tile__label {
    color: var(--aiden-color-text-primary, #d5dee8) !important;
}

/* Deeper navy top / bottom chrome */
.theme-dark-mode .mud-appbar.wba-appbar {
    background: var(--wba-chrome-bg, #152033) !important;
    color: var(--wba-chrome-text, #d5dee8) !important;
    border-bottom-color: color-mix(in srgb, var(--aiden-limelight) 55%, #0b1220);
}

.theme-dark-mode .mud-appbar.wba-appbar .wba-appbar-title,
.theme-dark-mode .mud-appbar.wba-appbar .mud-icon-button {
    color: var(--wba-chrome-text, #d5dee8) !important;
}

.theme-dark-mode .mud-appbar.wba-fnkeys {
    background: var(--wba-chrome-bg, #152033) !important;
    color: var(--wba-chrome-text, #d5dee8) !important;
    border-top-color: color-mix(in srgb, var(--aiden-limelight) 55%, #0b1220);
}

.theme-dark-mode .wba-fnkeys .mud-button-outlined-secondary,
.theme-dark-mode .wba-fnkeys .mud-button-outlined-secondary .mud-button-label,
.theme-dark-mode .wba-fnkeys .mud-button-outlined-secondary .wba-fnkey-label,
.theme-dark-mode .wba-fnkeys .mud-button-label,
.theme-dark-mode .wba-fnkeys .wba-fnkey-label,
.theme-dark-mode .wba-fnkeys-drawer__btn,
.theme-dark-mode .wba-fnkeys-drawer__btn .wba-fnkey-label,
.theme-dark-mode .wba-fnkeys-drawer__btn .mud-button-label {
    color: var(--aiden-color-text-on-dark, #fff) !important;
}

.theme-dark-mode .wba-fnkeys .mud-button-outlined-secondary {
    border-color: var(--aiden-limelight, #BFD730) !important;
}

.theme-dark-mode .wba-fnkeys-drawer {
    background: #121925;
}

.theme-dark-mode .appbar-menu-panel {
    background: #1a2332;
    border-color: var(--int-line);
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .appbar-menu-item {
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .appbar-menu-item:hover,
.theme-dark-mode .appbar-menu-item:focus-visible {
    background: color-mix(in srgb, var(--aiden-royal) 28%, #121a2b);
}

.theme-dark-mode .user-menu-header__name {
    color: var(--int-ink-strong, #e4ebf3);
}

.theme-dark-mode .user-menu-header__meta,
.theme-dark-mode .user-menu-section__label,
.theme-dark-mode .user-menu-row__label,
.theme-dark-mode .lang-select__label,
.theme-dark-mode .lang-select__trigger {
    color: var(--int-muted, #a8b6c7);
}

.theme-dark-mode .lang-select__trigger,
.theme-dark-mode .lang-select__option {
    background: #1c2533;
    border-color: var(--int-line);
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .main-menu-card,
.theme-dark-mode .wba-task-card,
.theme-dark-mode .wba-confirm-panel {
    background: var(--int-surface, #1c2533);
    border-color: var(--int-line) !important;
    color: var(--int-ink, #d5dee8);
}

.theme-dark-mode .wba-task-card.is-selected {
    background: color-mix(in srgb, var(--aiden-limelight) 12%, #1c2533);
}

.theme-dark-mode .wba-task-card.is-urgent {
    border-color: color-mix(in srgb, var(--aiden-color-status-danger, #B42318) 40%, var(--int-line)) !important;
}

.theme-dark-mode .wba-task-urgent-label {
    color: var(--int-error-fg, #ff6b84);
}

.theme-dark-mode .mud-button-outlined-secondary {
    border-color: var(--aiden-limelight) !important;
    color: var(--aiden-limelight) !important;
}

.theme-dark-mode .mud-input,
.theme-dark-mode .mud-input-control {
    color: var(--int-ink, #d5dee8);
}

@media (max-width: 420px) {
    .wba-appbar-title {
        font-size: 0.88rem;
        line-height: 1.15;
    }
}