/* Shared shell. Equal outside tracks keep desktop search at the viewport center. */
.mud-layout {
    --w-shell-appbar-height: 72px;
    --mud-appbar-height: var(--w-shell-appbar-height);
}

.app-bar-main {
    height: var(--w-shell-appbar-height) !important;
    padding-inline: 24px !important;
}

.app-bar-main > .mud-toolbar-appbar {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
}

.appbar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 27vw, 480px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    width: 100%;
    min-width: 0;
}

.appbar-leading, .appbar-utilities, .appbar-utility-actions {
    display: flex;
    align-items: center;
    min-width: 0;
}
.appbar-leading { gap: 12px; }
.appbar-brand { display: inline-flex; align-items: center; min-width: 0; }
.appbar-brand img { display: block; max-width: 100%; }
.appbar-search-container { width: 100%; min-width: 0; }
.appbar-search-container .global-search-trigger { min-height: 42px; }
.appbar-utilities { justify-self: end; justify-content: flex-end; gap: 12px; max-width: 100%; }
.appbar-location { width: clamp(160px, 13vw, 230px); min-width: 0; flex: 0 1 auto; }
.location-switcher { width: 100%; min-width: 0; }
.appbar-location .mud-input-control { margin: 0; }
.appbar-location .mud-input { height: 42px; font-size: 0.8125rem; }
.appbar-location .mud-input-slot { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.appbar-location .mud-input-adornment { margin-inline-end: 8px; }
.appbar-location .mud-input-helper-text { display: none; }
.appbar-utility-actions { gap: 4px; flex: 0 0 auto; }
.appbar-leading > .mud-tooltip-root, .appbar-utility-actions > .mud-tooltip-root,
.appbar-utility-actions > .mud-menu { display: inline-flex; align-items: center; justify-content: center; }
.appbar-leading .mud-icon-button, .appbar-utility-actions .mud-icon-button { width: 40px; height: 40px; padding: 9px; }
.appbar-separator { width: 1px; height: 24px; margin-inline: 4px; background: var(--mud-palette-lines-default); }
.user-menu-trigger { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 6px; border-radius: var(--w-radius-md); }
.user-menu-trigger:hover { background: var(--mud-palette-action-default-hover); }
.user-menu-avatar { width: 32px; height: 32px; font-size: 0.75rem; font-weight: 600; }
.user-menu-info { display: flex; flex-direction: column; min-width: 0; max-width: 112px; gap: 2px; text-align: left; }
.user-menu-name, .user-menu-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.user-menu-name { font-size: 0.8125rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.user-menu-role { font-size: 0.6875rem; color: var(--mud-palette-text-secondary); }
.user-menu-chevron { font-size: 1rem; color: var(--mud-palette-text-secondary); }
.account-menu-heading { padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); max-width: 300px; overflow-wrap: anywhere; }
.appbar-notification-panel { width: min(300px, calc(100vw - 32px)); }
.main-content-area.mud-main-content { padding-top: var(--w-shell-appbar-height) !important; min-width: 0; }
.sidebar-drawer.mud-drawer-fixed { top: var(--w-shell-appbar-height) !important; height: calc(100% - var(--w-shell-appbar-height)) !important; }
.main-content-area > .app-page-container { padding: 28px 32px 40px; width: 100%; max-width: 1720px; margin-inline: auto; min-width: 0; }

@media (max-width: 1439px) {
    .appbar-shell { gap: 16px; }
    .user-menu-info { display: none; }
    .appbar-location { width: 180px; }
    .appbar-utilities { gap: 8px; }
}

@media (max-width: 1099px) and (min-width: 600px) {
    .mud-layout { --w-shell-appbar-height: 116px; }
    .app-bar-main { padding-block: 8px; }
    .appbar-shell { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 42px 42px; gap: 8px 16px; }
    .appbar-leading { grid-column: 1; grid-row: 1; }
    .appbar-utilities { grid-column: 2; grid-row: 1; }
    .appbar-search-container { grid-column: 1 / -1; grid-row: 2; width: min(520px, 100%); justify-self: center; }
}

@media (max-width: 959px) {
    .main-content-area.mud-main-content { margin-inline: 0 !important; }
    .main-content-area > .app-page-container { padding: 24px; }
}

@media (max-width: 599px) {
    .mud-layout { --w-shell-appbar-height: 112px; }
    .app-bar-main { padding: 10px 16px !important; }
    .appbar-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 40px 42px;
        grid-template-areas: "leading actions" "location search";
        gap: 8px 12px;
    }
    .appbar-leading { grid-area: leading; gap: 4px; }
    .appbar-brand img { height: 20px !important; width: auto; }
    .appbar-utilities { display: contents; }
    .appbar-utility-actions { grid-area: actions; justify-self: end; gap: 0; }
    .appbar-location { grid-area: location; width: 100%; }
    .appbar-search-container { grid-area: search; width: 100%; }
    .appbar-search-container .global-search-trigger { justify-content: flex-start; }
    .appbar-search-container .global-search-shortcut { display: none; }
    .appbar-search-container .global-search-trigger-label { font-size: 0.75rem; }
    .user-menu-chevron, .appbar-separator { display: none; }
    .user-menu-trigger { padding: 4px; }
    .main-content-area > .app-page-container { padding: 20px 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .main-content-area, .user-menu-trigger { transition: none !important; }
}


/* Keep the shell visible around protected editing tasks. */
:root { --w-shell-appbar-height: 72px; --w-shell-footer-height: 28px; }
.app-footer { position: fixed; z-index: 1100; inset: auto 0 0; height: var(--w-shell-footer-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; background: var(--mud-palette-surface); color: var(--mud-palette-text-secondary); border-top: 1px solid var(--mud-palette-lines-default); font-size: 11px; }
.main-content-area > .app-page-container { padding-bottom: 64px; }
.sidebar-drawer.mud-drawer-fixed { height: calc(100% - var(--w-shell-appbar-height) - var(--w-shell-footer-height)) !important; }
.mud-dialog-container { top: var(--w-shell-appbar-height) !important; bottom: var(--w-shell-footer-height) !important; height: auto !important; align-items: flex-start !important; padding: 20px; overflow: hidden; }
.mud-dialog-container .mud-overlay-dialog { position: absolute; inset: 0; height: 100%; }
.mud-dialog-container .mud-dialog { display: flex; flex-direction: column; margin: 0 !important; max-height: 100% !important; min-height: 0; overflow: hidden; border-radius: 14px; }
.mud-dialog .mud-dialog-title { padding: 16px 20px 12px; flex: 0 0 auto; }
.mud-dialog .mud-dialog-title .mud-typography { font-size: 1rem; }
.mud-dialog .mud-dialog-content { padding: 16px 20px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mud-dialog .mud-dialog-actions { padding: 12px 20px; flex: 0 0 auto; }
.mud-dialog .mud-input-control { margin-block: 6px 2px; }
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input,
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input-label { font-size: .875rem; line-height: 20px; }
/* Keep the resting label centered when compacting fields. MudBlazor's normal
   20px label offset belongs to its 56px field, not this 40px dialog control. */
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input.mud-input-outlined > .mud-input-root { padding-block: 10px; }
.mud-dialog .mud-input-control > .mud-input-control-input-container > .mud-input.mud-input-outlined > textarea.mud-input-root { margin-top: 0; }
.mud-dialog .mud-input-outlined:not(.mud-shrink):not(:focus-within) ~ .mud-input-label-outlined { transform: translate(14px, 10px) scale(1); }
.mud-application-layout-rtl .mud-dialog .mud-input-outlined:not(.mud-shrink):not(:focus-within) ~ .mud-input-label-outlined { transform: translate(-14px, 10px) scale(1); }
.mud-dialog .mud-input .mud-input-numeric-spin > button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; }
.session-timeout-backdrop { top: var(--w-shell-appbar-height); bottom: var(--w-shell-footer-height); }
@media (max-width: 1099px) and (min-width: 600px) { :root { --w-shell-appbar-height: 116px; } }
@media (max-width: 599px) {
    :root { --w-shell-appbar-height: 112px; }
    .mud-dialog-container { padding: 12px; }
    .mud-dialog-container .mud-dialog { max-width: 100% !important; }
    .mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-content, .mud-dialog .mud-dialog-actions { padding-inline: 16px; }
    .app-footer { padding-inline: 16px; }
    .main-content-area > .app-page-container { padding-bottom: 60px; }
}
@media (pointer: coarse) { .mud-dialog .mud-input .mud-input-numeric-spin > button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; } }

/* Customer display › Add slide (board B2): a 980 px dialog with a ruled header and footer. */
.mud-dialog.cds-slide-dialog { width: 980px; max-width: 100%; }
.mud-dialog.cds-slide-dialog .mud-dialog-title { display: flex; align-items: center; min-height: 60px; padding: 14px 56px 13px 24px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-dialog.cds-slide-dialog .mud-dialog-content { padding: 22px 24px 18px; }
.mud-dialog.cds-slide-dialog .mud-dialog-actions { min-height: 68px; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--mud-palette-lines-default); }
/* Generate POS PINs (bulk PIN rollout, boards BP2-BP4): ruled header and footer, the choose step fills the shell's
   dialog area so its staff list scrolls inside, and a full-screen sheet on phones. */
.mud-dialog.generate-pins-dialog .mud-dialog-title, .mud-dialog.generate-pins-confirm .mud-dialog-title { display: flex; align-items: center; min-height: 53px; padding: 14px 56px 13px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.mud-dialog.generate-pins-dialog .mud-dialog-actions, .mud-dialog.generate-pins-confirm .mud-dialog-actions { gap: 8px 16px; border-top: 1px solid var(--mud-palette-lines-default); }
.mud-dialog.generate-pins-dialog .mud-dialog-title .mud-button-close { top: 3px; right: 4px; }
.mud-dialog.generate-pins-dialog.is-choosing { height: 100%; }
.mud-dialog.generate-pins-dialog .mud-dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.mud-dialog.generate-pins-dialog.is-choosing .mud-dialog-content { overflow: hidden; }
.mud-dialog.generate-pins-confirm { width: 520px; max-width: 100%; }
.mud-dialog.generate-pins-confirm .mud-dialog-content { padding: 18px 20px 20px; }
@media (max-width: 600px) {
    .mud-dialog-container:has(.generate-pins-dialog) { padding: 0; }
    /* app.css rounds, borders and shadows every dialog with !important; a sheet has none. */
    .mud-dialog-container .mud-dialog.generate-pins-dialog { width: 100%; height: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .mud-dialog.generate-pins-dialog .mud-dialog-title { padding: 14px 52px 13px 16px; }
    .mud-dialog.generate-pins-dialog .mud-dialog-content { padding: 0; }
    .mud-dialog.generate-pins-dialog .mud-dialog-actions { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 16px; }
    /* One entry point per screen: the Users page's toolbar button hides while the rollout banner carries it. */
    .page-header-actions .pin-rollout-action.is-banner-shown { display: none; }
}

/* Turn on / Turn off mobile data backup (Manage AllinPay › Card terminals, boards B2-B4): 600 px, the turn-off confirm
   480 px; the title, content and actions sit on the dialog without rules, as drawn. */
.mud-dialog.mobile-data-backup-dialog { width: 600px; max-width: 100%; }
.mud-dialog.mobile-data-backup-dialog.is-off { width: 480px; }
.mud-dialog.mobile-data-backup-dialog .mud-dialog-title { padding: 18px 64px 14px 24px; border-bottom: 0; }
.mud-dialog.mobile-data-backup-dialog .mud-dialog-title .mud-button-close { top: 18px; right: 16px; padding: 8px; }
.mud-dialog.mobile-data-backup-dialog .mud-dialog-title .mud-button-close .mud-icon-root { font-size: 24px; }
.mud-dialog.mobile-data-backup-dialog .mud-dialog-content { padding: 4px 24px 8px; }
.mud-dialog.mobile-data-backup-dialog .mud-dialog-actions { padding: 12px 16px 16px; border-top: 0; }
@media (max-width: 599px) {
    .mud-dialog.mobile-data-backup-dialog .mud-dialog-title { padding: 14px 60px 10px 16px; }
    .mud-dialog.mobile-data-backup-dialog .mud-dialog-title .mud-button-close { top: 14px; right: 12px; }
    .mud-dialog.mobile-data-backup-dialog .mud-dialog-content { padding-inline: 16px; }
}

/* Focused relationship editing stays beside the library, within the shell. */
.mud-dialog-container:has(.modifier-usage-dialog) { justify-content: flex-end; }
.mud-dialog.modifier-usage-dialog { width: 600px; max-width: 100%; }
.usage-heading, .usage-identity, .usage-pager { display: flex; align-items: center; gap: 12px; }
.usage-heading { justify-content: space-between; }
.usage-heading h2 { margin: 0; font-size: 1.125rem; }
.usage-heading p, .usage-context { color: var(--mud-palette-text-secondary); font-size: .8125rem; line-height: 1.55; }
.usage-heading p { margin: 4px 0 0; }
.usage-identity { padding-bottom: 18px; }
.usage-identity img, .usage-placeholder { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 48px; }
.usage-placeholder { display: grid; place-items: center; background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); }
.usage-identity > div { display: flex; flex-direction: column; gap: 4px; }
.usage-identity strong { font-size: 1rem; }
.usage-identity span, .usage-summary span { color: var(--mud-palette-text-secondary); font-size: .75rem; }
.usage-tabs { display: flex; border-bottom: 1px solid var(--mud-palette-lines-default); margin-bottom: 16px; gap: 20px; }
.usage-tabs button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--mud-palette-text-secondary); font: inherit; font-size: .875rem; cursor: pointer; }
.usage-tabs button.is-active { color: var(--mud-palette-primary); border-bottom-color: currentColor; font-weight: 600; }
.usage-tabs span { margin-left: 5px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.usage-tabs button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.usage-context { margin: 10px 0 14px; }
.usage-search { display: flex; flex-direction: column; gap: 4px; }
.usage-search .mud-switch { align-self: flex-end; margin: 0; font-size: .75rem; }
.usage-choices { min-height: 90px; border-top: 1px solid var(--mud-palette-lines-default); }
.usage-choice { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); cursor: pointer; }
.usage-choice:hover, .usage-choice.is-selected { background: var(--mud-palette-action-default-hover); }
.usage-choice input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--mud-palette-primary); cursor: pointer; }
.usage-choice input:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 3px; }
.usage-choice input:disabled { cursor: default; }
.usage-choice img { border-radius: 7px; object-fit: cover; }
.usage-choice-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.usage-choice-copy strong { font-weight: 500; font-size: .875rem; overflow-wrap: anywhere; }
.usage-choice small, .usage-state, .usage-pager, .usage-footer-note { color: var(--mud-palette-text-secondary); font-size: .75rem; }
.usage-pager { justify-content: flex-end; margin-top: 6px; }
.usage-pager > span { margin-right: auto; }
.usage-summary { display: flex; flex-direction: column; gap: 4px; background: var(--mud-palette-background); padding: 12px; border-radius: 8px; margin: 16px 0 8px; font-size: .8125rem; }
.usage-empty { min-height: 140px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--mud-palette-text-secondary); font-size: .8125rem; }
.usage-footer-note { margin-right: auto; max-width: 180px; }
.modifier-usage-dialog .mud-dialog-actions { border-top: 1px solid var(--mud-palette-lines-default); }
.usage-action-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.usage-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.usage-action-stack .usage-summary { margin: 0; padding: 0; background: transparent; }
@media(max-width:599px) {
    .usage-heading p, .usage-footer-note { display: none; }
    .usage-tabs { gap: 18px; }
    .usage-tabs button { font-size: .8125rem; }
    .usage-choice { padding-inline: 4px; gap: 10px; }
}