/* App-wide component and layout recipes. Keep semantic presentation here,
   leaving feature CSS for feature-specific geometry and content only. */
.evo-page-scaffold {
    width: 100%;
    min-width: 0;
    padding: var(--evo-page-gutter) !important;
    margin-block-start: var(--evo-space-2);
}

/* Mud inputs already draw a focus border around their shaped input container.
   Reserve this extra ring for standalone controls, not the native input inside. */
:where(a[href], button, [role="button"], [tabindex]):focus-visible:not(.mud-input-root):not(.mud-input-slot) {
    outline: var(--evo-focus-ring);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    inset-inline-start: 0;
    z-index: 9999;
    padding: var(--evo-space-2) var(--evo-space-4);
    border-end-end-radius: var(--evo-shape-sm);
    background: var(--evo-color-primary);
    color: var(--evo-color-on-primary);
    transition: top var(--evo-motion-fast);
}

.skip-link:focus {
    top: 0;
}

/* A primary work area with a supporting details pane. Direction follows the
   document automatically; the secondary pane stacks on compact windows. */
.evo-pane-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
    gap: var(--evo-pane-gap);
}

.evo-pane-main,
.evo-pane-supporting {
    min-width: 0;
}

.evo-appbar {
    border-block-end: 1px solid var(--evo-color-outline-variant);
    background: var(--evo-color-surface-container-low);
    box-shadow: var(--evo-shadow-none) !important;
}

.evo-appbar-logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
    margin-inline-end: var(--evo-space-3);
}

.evo-appbar-desktop-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.evo-appbar-mobile-actions {
    display: none;
}

.evo-appbar-branch .mud-chip-content {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-notification-menu {
    width: min(26.25rem, calc(100vw - 2 * var(--evo-page-gutter)));
}

.evo-notification-menu__heading {
    flex-wrap: wrap;
}

.evo-nav-drawer {
    border-inline-end: 1px solid var(--evo-color-outline-variant);
    background: var(--evo-color-surface-container-low);
}

.evo-nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid var(--evo-color-outline-variant);
}

.evo-nav-rail {
    position: fixed;
    z-index: 1100;
    inset-block-start: var(--mud-appbar-height);
    inset-block-end: 0;
    inset-inline-start: 0;
    width: var(--evo-nav-rail-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--evo-space-3);
    padding: var(--evo-space-3) var(--evo-space-1);
    overflow-y: auto;
    background: var(--evo-elevation-1);
    border-inline-end: 1px solid var(--evo-color-outline-variant);
}

.evo-nav-rail__destinations {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--evo-space-1);
    width: 100%;
}

.evo-nav-rail__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--evo-space-1);
    width: 100%;
    min-height: 4rem;
    padding: var(--evo-space-1);
    color: var(--evo-color-on-surface-variant);
    text-decoration: none;
    text-align: center;
    border-radius: var(--evo-shape-md);
}

.evo-nav-rail__link:hover,
.evo-nav-rail__utility:hover {
    background: var(--evo-color-state-hover);
}

.evo-nav-rail__indicator {
    display: grid;
    place-items: center;
    width: var(--evo-nav-rail-indicator-width);
    min-height: 2rem;
    border-radius: var(--evo-shape-full);
    transition: background var(--evo-motion-standard) var(--evo-motion-easing-standard);
}

.evo-nav-rail__link.active {
    color: var(--evo-color-on-surface);
    font-weight: 600;
}

.evo-nav-rail__link.active .evo-nav-rail__indicator {
    background: var(--evo-color-primary-container);
    color: var(--evo-color-on-primary-container);
}

.evo-nav-rail__label {
    display: -webkit-box;
    overflow: hidden;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--evo-type-caption-size);
    line-height: 1.15;
}

.evo-nav-rail__utility {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--evo-touch-target-size);
    height: var(--evo-touch-target-size);
    border: 0;
    border-radius: var(--evo-shape-full);
    background: transparent;
    color: var(--evo-color-on-surface-variant);
    cursor: pointer;
}

.evo-nav-rail__bottom {
    margin-block-start: auto;
}

@media (min-width: 960px) {
    .evo-main-content.mud-main-content {
        margin-inline-start: var(--evo-nav-rail-width);
    }

    .evo-mobile-menu-button,
    .evo-mobile-quick-nav-button {
        display: none !important;
    }

    .evo-quick-nav-panel {
        inset-inline-start: calc(var(--evo-nav-rail-width) + var(--evo-space-2));
        inset-inline-end: auto;
        bottom: var(--evo-space-4);
    }
}

@media (max-width: 959.98px) {
    .evo-nav-rail {
        display: none;
    }

    .evo-main-content.mud-main-content {
        margin-inline-start: 0;
        min-width: 0;
    }

    .evo-appbar .mud-toolbar {
        padding-inline: var(--evo-space-2);
        gap: var(--evo-space-1);
    }

    .evo-appbar-desktop-actions,
    .evo-appbar-branch {
        display: none;
    }

    .evo-appbar-mobile-actions {
        display: flex;
        flex-shrink: 0;
    }

    .evo-appbar .mud-icon-button {
        margin-inline: 0;
        flex-shrink: 0;
    }

    .evo-appbar-logo {
        margin-inline-end: var(--evo-space-1);
    }
}

.mud-nav-item .mud-nav-link {
    margin: 1px var(--evo-space-2) !important;
    border-radius: var(--evo-shape-sm) !important;
    font-size: 0.875rem;
}

.mud-nav-item .mud-nav-link:hover {
    background: var(--evo-color-state-hover) !important;
}

.mud-nav-item .mud-nav-link.active {
    background: var(--evo-color-primary-container) !important;
    color: var(--evo-color-primary) !important;
    font-weight: 600;
}

.mud-nav-group .mud-nav-link {
    font-size: 0.8125rem;
    font-weight: 600;
}

.app-footer {
    min-height: 44px;
    margin-block-start: auto;
    border-block-start: 1px solid var(--evo-color-outline-variant);
}

.mud-chip {
    font-weight: 500;
    border-radius: var(--evo-shape-full);
    line-height: 1.25;
}

/* A status is read-only information. Filter chips below are selectable
   controls; keep the two roles visually distinct even when both use MudChip. */
.evo-status-badge.mud-chip {
    min-height: 1.75rem;
    padding-inline: var(--evo-space-2);
    box-shadow: var(--evo-shadow-none);
    white-space: normal;
    text-align: center;
}

.mud-chipset .mud-chip {
    transition: background-color var(--evo-motion-fast) var(--evo-motion-easing-standard),
                border-color var(--evo-motion-fast) var(--evo-motion-easing-standard);
}

/* Outlined fields keep one shaped border. Mud owns the focus/error border;
   the app owns its radius and the rhythm of supporting text. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--evo-shape-md);
}

.mud-input-control .mud-input-control-helper-container {
    margin-block-start: var(--evo-field-helper-gap);
}

.mud-input-control .mud-input-helper-text {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mud-input-control .mud-input-helper-text.mud-input-error {
    color: var(--evo-color-error);
}

/* Icon-only actions are quieter than filled page actions. In a data row a
   colored circle should not compete with the row's content or create a shadow. */
/* MudSwitch's thumb uses MudIconButton internally. Its size/position belong
   to the switch, not to standalone icon actions (especially Size.Small). */
.mud-icon-button:not(.mud-switch-base) {
    min-width: var(--evo-icon-button-size);
    min-height: var(--evo-icon-button-size);
    border-radius: var(--evo-shape-full);
    transition: background-color var(--evo-motion-fast) var(--evo-motion-easing-standard);
}

.mud-icon-button.mud-icon-button-size-small:not(.mud-switch-base) {
    min-width: var(--evo-icon-button-size-small);
    min-height: var(--evo-icon-button-size-small);
}

.mud-table-body .mud-icon-button.mud-button-filled:not(.mud-button-filled-error),
.mud-data-grid .mud-table-body .mud-icon-button.mud-button-filled:not(.mud-button-filled-error) {
    background: var(--evo-color-primary-container);
    color: var(--evo-color-on-primary-container);
    box-shadow: var(--evo-shadow-none);
}

.mud-table-body .mud-icon-button.mud-button-filled:not(.mud-button-filled-error):hover,
.mud-data-grid .mud-table-body .mud-icon-button.mud-button-filled:not(.mud-button-filled-error):hover {
    background: color-mix(in srgb, var(--evo-color-primary-container) 88%, var(--evo-color-on-primary-container));
    box-shadow: var(--evo-shadow-none);
}

@media (pointer: coarse) {
    .mud-icon-button:not(.mud-switch-base),
    .mud-icon-button.mud-icon-button-size-small:not(.mud-switch-base) {
        min-width: var(--evo-touch-target-size);
        min-height: var(--evo-touch-target-size);
    }
}

/* MudButton is the app's M3 action primitive. Icon buttons, FABs and touch
   keypad controls have their own sizing and are deliberately excluded. */
.mud-button-root:where(:not(.mud-icon-button, .mud-fab, .touch-numpad-btn)) {
    min-height: var(--evo-button-height-sm);
    padding-inline: var(--evo-button-padding-inline);
    border-radius: var(--evo-button-shape-round);
    letter-spacing: 0 !important;
    text-transform: none;
    white-space: nowrap;
    transition: background-color var(--evo-motion-fast) var(--evo-motion-easing-standard),
                box-shadow var(--evo-motion-fast) var(--evo-motion-easing-standard);
}

/* Supporting actions should not compete with the 40px filled action.
   Keep explicit Mud sizes and expressive size classes free to override this. */
.mud-button-root:where(.mud-button-text, .mud-button-outlined):where(:not(.mud-icon-button, .mud-fab, .touch-numpad-btn)) {
    min-height: var(--evo-button-height-compact);
    padding-inline: var(--evo-button-padding-inline-compact);
}

/* Record-row actions are denser than page actions, even when a caller omits
   Size.Small. This excludes table toolbars and leaves icon buttons alone. */
.mud-table-body .mud-button-root:where(:not(.mud-icon-button, .mud-fab, .touch-numpad-btn)) {
    min-height: var(--evo-button-height-xs);
    padding-inline: var(--evo-button-padding-inline-xs);
}

.mud-button-root.mud-button-text-size-small:not(.mud-icon-button),
.mud-button-root.mud-button-outlined-size-small:not(.mud-icon-button),
.mud-button-root.mud-button-filled-size-small:not(.mud-icon-button),
.mud-button-root.evo-button--xs:not(.mud-icon-button) {
    min-height: var(--evo-button-height-xs);
    padding-inline: var(--evo-button-padding-inline-xs);
}

.mud-button-root.mud-button-text-size-large:not(.mud-icon-button),
.mud-button-root.mud-button-outlined-size-large:not(.mud-icon-button),
.mud-button-root.mud-button-filled-size-large:not(.mud-icon-button),
.mud-button-root.evo-button--md:not(.mud-icon-button) {
    min-height: var(--evo-button-height-md);
}

.mud-button-root.evo-button--lg:not(.mud-icon-button) {
    min-height: var(--evo-button-height-lg);
}

.mud-button-root.evo-button--xl:not(.mud-icon-button) {
    min-height: var(--evo-button-height-xl);
}

.mud-button-root.evo-button--square:not(.mud-icon-button) {
    border-radius: var(--evo-button-shape-square);
}

/* Filled is flat by default. Elevation is opt-in when a busy background
   needs separation; tonal gives a secondary action its own container. */
.mud-button-filled:not(.mud-icon-button):not(.evo-button--elevated) {
    box-shadow: var(--evo-shadow-none);
}

.mud-button-root.evo-button--tonal:not(.mud-icon-button):not(:disabled) {
    background-color: var(--evo-button-tonal-container);
    color: var(--evo-button-on-tonal-container);
    box-shadow: var(--evo-shadow-none);
}

.mud-button-root.evo-button--tonal:not(.mud-icon-button):not(:disabled):hover,
.mud-button-root.evo-button--tonal:not(.mud-icon-button):not(:disabled):focus-visible {
    background-color: color-mix(in srgb, var(--evo-color-secondary) 12%, var(--evo-button-tonal-container));
}

.mud-button-root.evo-button--elevated:not(.mud-icon-button):not(:disabled) {
    background-color: var(--evo-elevation-1);
    color: var(--evo-color-on-surface);
    box-shadow: var(--evo-shadow-button);
}

.mud-button-outlined:not(.mud-icon-button):not(.mud-button-outlined-error) {
    border-color: var(--evo-color-outline);
}

.evo-appbar-title {
    font-size: var(--evo-type-title-size);
    font-weight: var(--evo-type-title-weight);
    letter-spacing: -0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy page papers used elevation 1 or 2 interchangeably. Normalize both
   as page sections so they agree with explicit evo-section-surface panels;
   nested papers retain a deeper tone below. Floating overlays stay separate. */
.mud-main-content .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2:not(.touch-pos-cart-panel) {
    background-color: var(--evo-elevation-1);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-lg);
    box-shadow: var(--evo-shadow-none);
}

.mud-main-content .mud-paper.mud-elevation-2.touch-pos-cart-panel,
.mud-main-content .mud-paper.mud-elevation-1 .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2 .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2 .mud-paper.mud-elevation-2 {
    background-color: var(--evo-elevation-2);
    border-radius: var(--evo-shape-md);
    box-shadow: var(--evo-shadow-none);
}

.mud-main-content .mud-paper.mud-elevation-3,
.mud-main-content .mud-paper.mud-elevation-4 {
    background-color: var(--evo-elevation-3);
    box-shadow: var(--evo-shadow-none);
}

.evo-panel,
.evo-filter-panel,
.evo-data-grid,
.app-paged-cards {
    background: var(--evo-elevation-1);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-lg);
    box-shadow: var(--evo-shadow-none);
}

/* Filters are a compact control plane above the results, not another
   content card. Keep the same surface language while tightening its rhythm. */
.evo-filter-panel .mud-expand-panel {
    background: transparent;
    box-shadow: var(--evo-shadow-none);
}

.evo-filter-panel .mud-expand-panel-header {
    min-height: 3.5rem;
    padding: var(--evo-space-3) var(--evo-panel-padding);
}

.evo-filter-panel .mud-expand-panel-content {
    padding: 0 var(--evo-panel-padding) var(--evo-space-4);
}

.evo-filter-panel__heading {
    display: flex;
    align-items: baseline;
    gap: var(--evo-space-3);
    flex-wrap: wrap;
    min-width: 0;
}

.evo-filter-panel__title {
    font-size: var(--evo-type-title-size);
    font-weight: var(--evo-type-title-weight);
    color: var(--evo-color-on-surface);
}

.evo-filter-panel__summary {
    overflow: hidden;
    max-width: 100%;
    color: var(--evo-color-on-surface-variant);
    font-size: var(--evo-type-body-small-size);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evo-filter-panel__grid {
    border-block-start: 1px solid var(--evo-color-outline-variant);
    padding-block-start: var(--evo-space-2);
}

.evo-filter-panel .mud-chipset .mud-chip {
    min-height: 2rem;
    border-color: var(--evo-color-outline);
}

.evo-filter-panel .mud-chipset .mud-chip.mud-chip-selected {
    background: var(--evo-color-primary-container);
    color: var(--evo-color-on-primary-container);
    border-color: var(--evo-color-primary);
}

.evo-filter-panel__actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.evo-filter-panel__action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--evo-space-2);
    flex-wrap: wrap;
    width: 100%;
    border-block-start: 1px solid var(--evo-color-outline-variant);
    margin-block-start: var(--evo-space-2);
    padding-block-start: var(--evo-space-3);
}

.evo-filter-panel__hint {
    display: block;
    padding-block-start: var(--evo-space-2);
    color: var(--evo-color-on-surface-variant);
}

@media (max-width: 599px) {
    .evo-filter-panel__actions .mud-button-root {
        flex: 1 1 auto;
    }
}

/* Workflow sections use one pane recipe, whether rendered as MudPaper or a
   semantic section. Their feature styles only determine internal layout. */
.evo-section-surface,
.mud-main-content .mud-paper.evo-section-surface {
    min-width: 0;
    padding: var(--evo-panel-padding);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-lg);
    background: var(--evo-elevation-1);
    box-shadow: var(--evo-shadow-none);
}

.evo-section-surface--quiet,
.mud-main-content .mud-paper.evo-section-surface--quiet {
    background: var(--evo-elevation-2);
}

.evo-section-surface--accent,
.mud-main-content .mud-paper.evo-section-surface--accent {
    border-inline-start: 4px solid var(--evo-color-primary);
}

.evo-section-surface--navigation,
.mud-main-content .mud-paper.evo-section-surface--navigation {
    padding: var(--evo-space-2);
}

/* Page settings use separate navigation and content planes. MudTabs normally
   merges its toolbar and panel into one elevated block, which makes settings
   pages look unlike other page sections. */
.evo-settings-tabs .mud-tabs-tabbar,
.evo-tabs .mud-tabs-tabbar {
    border-radius: var(--evo-shape-lg);
    overflow: hidden;
}

.evo-settings-tabs .mud-tabs-tabbar {
    border: 1px solid var(--evo-color-outline-variant);
    background: var(--evo-elevation-1);
}

.evo-settings-tabs .mud-tabs-panels {
    padding-block-start: var(--evo-space-4);
}

.evo-settings-tabs .mud-tab {
    min-height: 3.5rem;
    padding-inline: var(--evo-space-5);
    text-transform: none;
}

.evo-settings-tabs .mud-tab.mud-tab-active {
    background: var(--evo-color-primary-container);
}

/* Content tabs have their own navigation plane. Settings tabs retain the
   separate recipe above because they navigate a full configuration page. */
.evo-tabs .mud-tabs-tabbar {
    border-block-end: 1px solid var(--evo-color-outline-variant);
    background: var(--evo-elevation-1);
    box-shadow: var(--evo-shadow-none);
}

.evo-tabs .mud-tab {
    min-height: var(--evo-button-height-md);
    padding-inline: var(--evo-space-4);
    text-transform: none;
}

.evo-tabs .mud-tab.mud-tab-active {
    color: var(--evo-color-primary);
    background: var(--evo-color-primary-container);
}

/* A contained record or data table inside a page section. Keep the darker
   inset plane visible but separate it with a quiet outline, not a shadow. */
.evo-inset-surface,
.mud-paper.evo-inset-surface,
.mud-table.evo-inset-table {
    min-width: 0;
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-md);
    background: var(--evo-elevation-2);
    box-shadow: var(--evo-shadow-none);
}

.mud-table.evo-inset-table {
    overflow: hidden;
}

.evo-inset-surface--selected,
.mud-paper.evo-inset-surface--selected {
    border-color: var(--evo-color-primary);
}

.evo-inset-surface--upload,
.mud-paper.evo-inset-surface--upload {
    border-style: dashed;
    border-color: var(--evo-color-outline);
}

.mud-paper.dashboard-treasury-balance {
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--evo-space-2);
}

.dashboard-treasury-balance__heading {
    display: flex;
    align-items: center;
    gap: var(--evo-space-2);
    min-width: 0;
}

.dashboard-treasury-balance__icon {
    flex: none;
    color: var(--evo-treasury-accent);
}

.dashboard-treasury-balance--cash {
    --evo-treasury-accent: var(--evo-color-success);
}

.dashboard-treasury-balance--bank {
    --evo-treasury-accent: var(--evo-color-info);
}

.evo-inset-table .mud-table-head {
    background: var(--evo-elevation-3);
}

.evo-inset-table .mud-table-body {
    background: var(--evo-elevation-2);
}

.evo-accent-surface {
    border: 1px solid var(--evo-color-primary);
    border-radius: var(--evo-shape-md);
    background: var(--evo-color-primary-container);
    color: var(--evo-color-on-primary-container);
}

.evo-danger-surface {
    border: 1px solid var(--evo-color-error);
    border-inline-start-width: 4px;
    border-radius: var(--evo-shape-md);
    background: var(--evo-color-error-container);
    color: var(--evo-color-on-surface);
}

.app-directory-card,
.evo-stat-card {
    background: var(--evo-elevation-2);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-md);
    box-shadow: var(--evo-shadow-none);
    transition: background-color var(--evo-motion-standard) var(--evo-motion-easing-standard),
                border-color var(--evo-motion-standard) var(--evo-motion-easing-standard);
}

.app-directory-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.app-directory-card:hover,
.app-directory-card:focus-within {
    background: var(--evo-elevation-3);
    border-color: var(--evo-color-primary);
    box-shadow: var(--evo-shadow-none);
}

.evo-stat-card {
    min-width: 0;
    gap: var(--evo-space-1);
}

.evo-stat-card--emphasis {
    background: color-mix(in srgb, var(--evo-stat-accent) 6%, var(--evo-elevation-2));
    border-color: color-mix(in srgb, var(--evo-stat-accent) 28%, var(--evo-color-outline-variant));
}

.evo-stat-card__heading {
    display: flex;
    align-items: baseline;
    gap: var(--evo-space-2);
    min-width: 0;
}

.evo-stat-card__indicator {
    flex: 0 0 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--evo-shape-full);
    background: var(--evo-stat-accent);
}

.evo-stat-card__link {
    align-self: flex-start;
    margin-block-start: auto;
}

/* POS tabs are selected by an outline and tone, not an elevation shadow. */
.pos-cart-rail {
    background: var(--evo-elevation-2);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-md);
}

.pos-cart-card {
    background: var(--evo-color-surface);
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-md);
}

.pos-cart-card:hover {
    border-color: var(--evo-color-primary);
}

.pos-cart-card.active {
    border: 2px solid var(--evo-color-primary);
    background: var(--evo-color-primary-container);
}

.app-paged-cards {
    overflow: hidden;
}

.app-paged-cards__toolbar,
.mud-table-toolbar {
    border-block-end: 1px solid var(--evo-color-outline-variant);
}

.mud-table-toolbar {
    padding: var(--evo-space-3) var(--evo-space-4) !important;
}

/* Grid toolbars are compact control rows. A fixed block size matters here:
   Arabic font metrics plus Mud's vertical padding can otherwise make the
   create/action buttons much taller than the surrounding toolbar controls. */
.evo-data-grid .mud-table-toolbar .mud-button-root:where(:not(.mud-icon-button, .mud-fab)) {
    height: var(--evo-button-height-compact);
    min-height: var(--evo-button-height-compact);
    padding-block: 0;
}

@media (pointer: coarse) {
    .evo-data-grid .mud-table-toolbar .mud-button-root:where(:not(.mud-icon-button, .mud-fab)) {
        height: var(--evo-button-height-md);
        min-height: var(--evo-button-height-md);
    }
}

/* Elevation separates transient surfaces from the content underneath. */
.mud-dialog,
.mud-popover,
.evo-floating-surface {
    background-color: var(--evo-elevation-3);
    box-shadow: var(--evo-shadow-floating);
}

.mud-dialog {
    box-shadow: var(--evo-shadow-dialog);
    border-radius: var(--evo-shape-xl);
}

.mud-dialog.mud-dialog-width-false {
    max-width: calc(100vw - 2 * var(--evo-dialog-inline-gutter));
}

.mud-dialog .mud-dialog-title {
    padding: var(--evo-space-5) var(--evo-space-6) var(--evo-space-3);
    color: var(--evo-color-on-surface);
    font-size: var(--evo-type-title-size);
    font-weight: var(--evo-type-title-weight);
}

.mud-dialog .mud-dialog-content:not(.mud-dialog-no-side-padding) {
    padding: var(--evo-space-3) var(--evo-space-6) var(--evo-space-5);
}

.mud-dialog .mud-dialog-actions {
    gap: var(--evo-space-2);
    padding: var(--evo-space-3) var(--evo-space-6) var(--evo-space-5);
    flex-wrap: wrap;
}

/* Persistent context belongs in an inline alert; transient operation
   feedback belongs in a snackbar. Neither needs a floating-card shadow. */
.mud-alert {
    border-radius: var(--evo-shape-md);
    box-shadow: var(--evo-shadow-none);
}

.mud-alert .mud-alert-message {
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mud-snackbar {
    border-radius: var(--evo-shape-md);
    box-shadow: var(--evo-shadow-floating);
    max-width: min(32rem, calc(100vw - 2 * var(--evo-page-gutter)));
}

.mud-progress-linear {
    border-radius: var(--evo-shape-full);
    overflow: hidden;
}

@media (max-width: 599px) {
    .evo-data-grid .mud-table-toolbar,
    .app-paged-cards__toolbar {
        height: auto;
        flex-wrap: wrap;
        gap: var(--evo-space-2);
        padding: var(--evo-space-3) !important;
    }

    .evo-data-grid__actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .evo-data-grid .mud-table-toolbar > .mud-typography,
    .app-paged-cards__toolbar > .mud-typography {
        flex-basis: 100%;
        overflow-wrap: anywhere;
    }

    .app-grid-footer {
        flex-wrap: wrap;
        gap: var(--evo-space-2) !important;
    }

    .app-grid-footer > .mud-spacer {
        display: none;
    }

    .app-grid-footer > .mud-pagination {
        order: 1;
        width: 100%;
        overflow-x: auto;
    }

    .app-grid-footer > .mud-typography {
        margin-inline-start: auto;
    }

    .evo-settings-tabs .mud-tab,
    .evo-tabs .mud-tab {
        padding-inline: var(--evo-space-3);
        min-height: var(--evo-touch-target-size);
    }

    .mud-dialog .mud-dialog-title,
    .mud-dialog .mud-dialog-content:not(.mud-dialog-no-side-padding),
    .mud-dialog .mud-dialog-actions {
        padding-inline: var(--evo-space-4);
    }
}

/* Quick navigation is a floating tool, not another page card. */
.evo-quick-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1499;
}

.evo-quick-nav-panel {
    position: fixed;
    inset-inline-end: var(--evo-space-4);
    bottom: 5rem;
    z-index: 1500;
    width: min(16.25rem, calc(100vw - var(--evo-page-gutter) - var(--evo-page-gutter)));
    overflow: hidden;
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-lg);
}

.evo-quick-nav-heading {
    padding: var(--evo-space-2) var(--evo-space-3) var(--evo-space-1);
}

.evo-quick-nav-heading__text {
    font-weight: 600;
}

.evo-quick-nav-empty {
    padding: var(--evo-space-1) var(--evo-space-3) var(--evo-space-3);
}

.evo-quick-nav-list {
    padding-block-end: var(--evo-space-2);
}

.evo-quick-nav-item {
    padding: var(--evo-space-1) var(--evo-space-2) !important;
}

.evo-quick-nav-item__content {
    width: 100%;
}

.qnav-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--evo-shape-sm);
}

.evo-quick-nav-icon {
    color: var(--evo-color-on-navigation-gradient);
}

/* The launcher is a compact, searchable map of the whole ERP. Names lead;
   icons support scanning without turning every destination into a large tile. */
.app-launcher-panel {
    display: flex;
    flex-direction: column;
    width: min(94vw, 68rem);
    max-height: min(86vh, 52rem);
    overflow: hidden;
    border: 1px solid var(--evo-color-outline-variant);
    border-radius: var(--evo-shape-xl);
    background: var(--evo-elevation-3);
    box-shadow: var(--evo-shadow-dialog);
}

.app-launcher-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--evo-space-4);
    padding: var(--evo-space-4) var(--evo-space-6) var(--evo-space-3);
}

.app-launcher-heading {
    display: flex;
    align-items: center;
    gap: var(--evo-space-3);
}

.app-launcher-search {
    display: flex;
    align-items: center;
    gap: var(--evo-space-3);
    margin: 0 var(--evo-space-6) var(--evo-space-4);
    padding-inline: var(--evo-space-4);
    min-height: var(--evo-touch-target-size);
    border: 1px solid var(--evo-color-outline);
    border-radius: var(--evo-shape-full);
    background: var(--evo-elevation-2);
    color: var(--evo-color-on-surface-variant);
}

.app-launcher-search:focus-within {
    border-color: var(--evo-color-primary);
    box-shadow: 0 0 0 1px var(--evo-color-primary);
}

.app-launcher-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--evo-color-on-surface);
    font: inherit;
}

.app-launcher-search input::placeholder {
    color: var(--evo-color-on-surface-variant);
}

.app-launcher-content {
    min-height: 0;
    overflow-y: auto;
    padding: var(--evo-space-1) var(--evo-space-6) var(--evo-space-6);
}

.app-launcher-categories {
    display: flex;
    gap: var(--evo-space-2);
    overflow-x: auto;
    padding: 0 0 var(--evo-space-3);
    border-block-end: 1px solid var(--evo-color-outline-variant);
    scrollbar-width: thin;
}

.app-launcher-category {
    flex: none;
    min-height: 2.25rem;
    padding: var(--evo-space-1) var(--evo-space-3);
    border: 1px solid transparent;
    border-radius: var(--evo-shape-full);
    background: var(--evo-elevation-2);
    color: var(--evo-color-on-surface-variant);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.app-launcher-category:hover,
.app-launcher-category:focus-visible {
    border-color: var(--evo-color-outline);
    color: var(--evo-color-on-surface);
}

.app-launcher-category.is-selected {
    background: var(--evo-color-primary-container);
    color: var(--evo-color-on-primary-container);
}

.app-launcher-groups {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    gap: var(--evo-space-2);
    padding-block-start: var(--evo-space-4);
}

.nav-icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--evo-shape-sm);
}

.app-launcher-icon {
    color: var(--evo-color-on-navigation-gradient);
}

.app-launcher-links {
    display: grid;
    gap: var(--evo-space-1);
}

.app-launcher-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--evo-space-2);
    width: 100%;
    min-width: 0;
    min-height: 7rem;
    padding: var(--evo-space-2);
    border: 0;
    border-radius: var(--evo-shape-md);
    background: transparent;
    color: var(--evo-color-on-surface);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--evo-motion-fast) var(--evo-motion-easing-standard);
}

.app-launcher-tile-icon {
    display: grid;
    place-items: center;
    flex: 0 0 3.5rem;
    width: 3.5rem;
    border-radius: var(--evo-shape-lg);
    box-shadow: var(--evo-shadow-button);
}

.app-launcher-tile-icon .app-launcher-icon {
    color: var(--evo-color-on-navigation-gradient);
}

.app-launcher-link-label {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.app-launcher-link:hover,
.app-launcher-link:focus-visible {
    background: var(--evo-color-primary-container);
}

.app-launcher-empty {
    padding: var(--evo-space-8) var(--evo-space-4);
    color: var(--evo-color-on-surface-variant);
    text-align: center;
}

@media (max-width: 900px) {
    .app-launcher-groups {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .app-launcher-panel {
        width: calc(100vw - 2 * var(--evo-space-3));
        max-height: calc(100vh - 2 * var(--evo-space-3));
    }

    .app-launcher-header {
        padding-inline: var(--evo-space-4);
    }

    .app-launcher-search {
        margin-inline: var(--evo-space-4);
    }

    .app-launcher-content {
        padding-inline: var(--evo-space-4);
    }

    .app-launcher-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .evo-pane-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}