/* Phase 0 — layout primitives (used from phase 1+). No page migrations yet. */

.elev-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.elev-page-heading__title {
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-display);
    font-size: var(--elev-display-md-size);
    line-height: var(--elev-display-md-line);
    font-weight: 600;
    letter-spacing: var(--elev-display-md-tracking);
}

.elev-page-heading__description {
    margin: 0;
    color: var(--elev-text-sheen);
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-md-size);
    line-height: var(--elev-text-md-line);
    font-weight: 500;
}

.elev-ui-card {
    background: var(--elev-surface);
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    box-shadow: var(--elev-shadow);
}

.elev-ui-card__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--elev-border-soft);
}

.elev-ui-card__body {
    padding: 1.25rem;
}

.elev-ui-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    background: var(--elev-surface);
}

.elev-filter-drawer-shell {
    position: fixed;
    inset: 0;
    z-index: 1300;
    visibility: hidden;
    pointer-events: none;
}

.elev-filter-drawer-shell.is-open {
    visibility: visible;
    pointer-events: auto;
}

.elev-filter-drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(10, 13, 18, 0);
    cursor: pointer;
    transition: background 0.22s ease;
}

.elev-filter-drawer-shell.is-open .elev-filter-drawer-backdrop {
    background: rgba(10, 13, 18, 0.28);
}

.elev-filter-drawer {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100vw, var(--elev-drawer-width));
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    border-left: 1px solid var(--elev-stroke-pale);
    background: var(--elev-surface);
    box-shadow: -18px 0 48px rgba(10, 13, 18, 0.14);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.elev-filter-drawer-shell.is-open .elev-filter-drawer {
    transform: translateX(0);
}

.elev-filter-drawer__header,
.elev-filter-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    box-sizing: border-box;
    min-height: 5.55rem;
}

.elev-filter-drawer__header {
    border-bottom: 1px solid var(--elev-border-soft);
}

.elev-filter-drawer__title {
    margin: 0;
    color: var(--elev-foreground);
    font-family: var(--elev-font-display);
    font-size: var(--elev-text-lg-size);
    line-height: var(--elev-text-lg-line);
    font-weight: 600;
    letter-spacing: 0;
}

.elev-filter-drawer__subtitle {
    margin: 0.25rem 0 0;
    color: var(--elev-muted);
    font-size: var(--elev-text-sm-size);
    line-height: var(--elev-text-sm-line);
}

.elev-filter-drawer__body {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem;
}

.elev-filter-drawer__footer {
    border-top: 1px solid var(--elev-border-soft);
    min-height: 0;
}

/* Keep a single scroll surface while the filter drawer is open */
html:has(.elev-filter-drawer-shell.is-open),
body:has(.elev-filter-drawer-shell.is-open) {
    overflow: hidden;
}

body:has(.elev-filter-drawer-shell.is-open) .app-shell__content {
    overflow: hidden;
}

.mud-button-root,
.mud-button-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.elev-filter-drawer__footer .mud-button-root,
.elev-filter-drawer__footer .mud-button-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 600 !important;
    line-height: var(--elev-text-sm-line) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.elev-shell-content {
    background: var(--elev-background);
    min-height: calc(100vh - var(--elev-topbar-height));
}

.elev-page-loading-overlay.mud-overlay {
    background-color: rgba(248, 249, 252, 0.88) !important;
    backdrop-filter: blur(3px);
}

.elev-page-loading-overlay__content {
    display: grid;
    place-items: center;
}

.elev-page-loading-overlay__logo {
    display: block;
    width: 3.25rem;
    height: 2.412rem;
    object-fit: contain;
    animation: elev-logo-spin 1.15s linear infinite;
    transform-origin: center center;
}

@keyframes elev-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Global app content typography (aligned with service orders listing) */
.app-shell__content {
    font-family: var(--elev-font-sans);
    color: var(--elev-foreground);
}

.app-shell__content h1,
.app-shell__content .elev-page-heading__title {
    margin: 0;
    color: var(--elev-text-bold);
    font-family: var(--elev-font-display);
    font-size: var(--elev-display-md-size);
    line-height: var(--elev-display-md-line);
    font-weight: 600;
    letter-spacing: var(--elev-display-md-tracking);
}

.app-shell__content .mud-data-grid .mud-table-head .mud-table-cell,
.app-shell__content .mud-table-head .mud-table-cell {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
}

.app-shell__content .mud-data-grid .mud-table-body .mud-table-cell,
.app-shell__content .mud-table-body .mud-table-cell {
    font-family: var(--elev-font-sans);
    font-size: var(--elev-text-sm-size);
    font-weight: 400;
    line-height: 1.3;
}

.app-shell__content .mud-data-grid .mud-table-toolbar .mud-input-slot,
.app-shell__content .mud-data-grid .mud-table-toolbar input.mud-input-slot,
.app-shell__content .mud-data-grid .mud-table-toolbar .mud-input-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
}

.app-shell__content .mud-typography {
    font-family: var(--elev-font-sans);
}

/* Dialogs and overlays render outside the shell; keep the site font there too. */
.mud-typography:not(.mud-icon-root),
.mud-button-root,
.mud-input,
.mud-input-slot,
.mud-input-label,
.mud-select-input,
.mud-list-item,
.mud-table-cell,
.mud-dialog,
.mud-dialog-title,
.mud-popover,
.mud-snackbar,
.mud-alert,
.mud-chip,
.mud-checkbox,
.mud-radio,
.mud-switch,
.mud-switch-label,
.mud-toggle-item,
.mud-dialog h1,
.mud-dialog h2,
.mud-dialog h3,
.mud-dialog p,
.mud-dialog label,
.mud-dialog .mud-checkbox-label,
.mud-dialog .mud-input-helper-text {
    font-family: var(--elev-font-sans) !important;
}

/* Filter drawer fields — site-wide */
.elev-filter-drawer .mud-select-input,
.elev-filter-drawer .mud-input-slot,
.elev-filter-drawer input.mud-input-slot,
.elev-filter-drawer textarea.mud-input-slot {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

.elev-filter-drawer .mud-input-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
}

.elev-filter-drawer .mud-input-slot::placeholder,
.elev-filter-drawer input.mud-input-slot::placeholder {
    color: var(--elev-muted-foreground) !important;
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.elev-filter-drawer .mud-select .mud-chip {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-xs-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-xs-line) !important;
}

.elev-filter-drawer .mud-stack,
.elev-filter-drawer .mud-grid {
    width: 100%;
}

.elev-listing-filter-button.mud-icon-button,
.elev-listing-reload-button.mud-icon-button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0 !important;
    border-radius: var(--elev-radius-pill) !important;
    color: var(--elev-text-bold) !important;
    background: var(--elev-surface) !important;
    box-shadow: none !important;
}

.elev-listing-filter-button.mud-icon-button:hover,
.elev-listing-filter-button.mud-icon-button:focus-visible,
.elev-listing-reload-button.mud-icon-button:hover,
.elev-listing-reload-button.mud-icon-button:focus-visible {
    background: var(--elev-bg-pale) !important;
}

.elev-listing-filter-button .mud-icon-root,
.elev-listing-reload-button .mud-icon-root {
    font-size: 1.125rem;
}

.elev-listing-reload-button.is-loading,
.elev-listing-reload-button.is-loading:disabled,
.elev-listing-reload-button.is-loading.mud-disabled {
    opacity: 1 !important;
    color: var(--elev-text-bold) !important;
    background: var(--elev-surface) !important;
    pointer-events: none;
}

.elev-listing-reload-button.is-loading .mud-icon-root {
    color: var(--elev-text-bold) !important;
}

.elev-filter-drawer .orders-filter-switches {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.elev-filter-drawer .orders-filter-switches .mud-switch .mud-typography,
.elev-filter-drawer .orders-filter-switches .mud-switch-label {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.elev-filter-drawer .mud-switch-button .mud-surface-text {
    color: #fff;
}

/* MudSelect/MudAutocomplete options render in portaled popovers */
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-list-item,
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-list-item-text,
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-list-item .mud-typography,
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-select-item {
    font-family: var(--elev-font-sans) !important;
    font-size: var(--elev-text-sm-size) !important;
    font-weight: 500 !important;
    line-height: var(--elev-text-sm-line) !important;
    color: var(--elev-gray-900) !important;
}

body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-list-item.mud-selected-item,
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
body:has(.elev-filter-drawer-shell.is-open) .mud-popover .mud-select-item.mud-selected-item {
    color: var(--elev-primary) !important;
    font-weight: 600 !important;
}

/* Snackbar — keep above drawer footers and bottom actions */
.mud-snackbar-location-bottom-right {
    bottom: 3rem !important;
    right: 1.25rem !important;
}

body:has(.elev-filter-drawer-shell.is-open) .mud-snackbar-location-bottom-right,
body:has(.service-order-create-drawer) .mud-snackbar-location-bottom-right,
body:has(.catalog-form-drawer) .mud-snackbar-location-bottom-right {
    bottom: 6.5rem !important;
}