.auth-primary-button {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

.auth-title {
    font-weight: 400;
    color: var(--mud-palette-text-primary);
}

.auth-heading {
    font-weight: 500;
}

.auth-full-width {
    width: 100%;
}

.auth-card-viewport {
    min-height: 100vh;
}

.auth-card-paper {
    width: 100%;
    max-width: 440px;
}

.auth-card-wordmark {
    height: 28px;
    max-width: 100%;
    object-fit: contain;
}

.auth-large-status-icon {
    font-size: 3rem;
}

.auth-xlarge-status-icon {
    font-size: 4rem;
}

.auth-scale-in {
    animation: auth-scale-in 0.5s ease-out;
}

@keyframes auth-scale-in {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.mud-nav-link.active {
    background: var(--mud-palette-primary) !important;
    border-radius: 15px !important;
}

    .mud-nav-link.active .mud-icon-root,
    .mud-nav-link.active .mud-nav-link-icon,
    .mud-nav-link.active .mud-nav-link-text,
    .mud-nav-link.active .mud-typography {
        color: #fff !important;
        fill: #fff !important;
    }

.mud-nav-link:hover {
    background: #e3edf7 !important;
    color: #337ba7 !important;
}

.pwa-update-popup {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: #204066;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10000;
}

    .pwa-update-popup button {
        background: #fff;
        color: #204066;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

        .pwa-update-popup button:hover {
            background: #f0f0f0;
        }

.update-banner-fadeout {
    animation: fadeout 1s ease-out forwards;
}

@keyframes fadeout {
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.px-6 {
    padding-left: 24px;
    padding-right: 24px;
}

.py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.sidebar-sticky {
    position: sticky;
    top: 16px;
}


@media (max-width: 960px) {
    .px-6 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .py-5 {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

.panel {
    padding: 10px;
    border-radius: 8px;
    min-height: 90vh;
    box-sizing: border-box;
}

.sidebar-sticky {
    position: sticky;
    top: 16px;
}

.drawer-host .mud-drawer-content {
    display: flex;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.Readonly {
    pointer-events: none;
    opacity: 1;
}
/* ===== DataGrid Numeric Field Alignment ===== */
/* Align header text to the right for numeric columns */
.mud-table-cell.numeric-field,
.mud-data-grid-cell.numeric-field,
td.numeric-field {
    text-align: right !important;
}
/* Header alignment - multiple selectors for maximum compatibility */
.mud-table-head .mud-table-cell.numeric-field,
.data-grid-header .mud-table-cell.numeric-field,
th.numeric-field,
.mud-table-root th.numeric-field,
.mud-data-grid th.numeric-field {
    text-align: right !important;
}
    /* Ensure header content wrapper is aligned properly */
    th.numeric-field span,
    th.numeric-field > *,
    .mud-table-cell.numeric-field span,
    .mud-table-cell.numeric-field > * {
        text-align: right !important;
        width: 100%;
    }
/* For MudBlazor's internal structure */
.mud-table-root .mud-table-head .numeric-field,
.mud-data-grid .mud-table-head .numeric-field {
    text-align: right !important;
}
/* Target the sort label and button containers */
th.numeric-field .mud-table-sort-label,
.numeric-field .mud-table-sort-label,
th.numeric-field .column-header,
.numeric-field .column-header {
    justify-content: flex-end !important;
    text-align: right !important;
    display: flex !important;
    width: 100%;
}
/* Specific for column options button alignment */
th.numeric-field .mud-table-cell-content {
    justify-content: flex-end !important;
    display: flex !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Fix MudSelect dropdown z-index in dialogs */
/* MudBlazor dialog z-index is 1400, overlay is 1300, so popover needs to be higher */
/* Universal popover z-index fix - highest priority */
body > .mud-popover,
body > div[id^="popovercontent"],
body > div[class*="mud-popover"] {
    z-index: 9999 !important;
}

.mud-popover {
    z-index: 9999 !important;
}

.mud-popover-provider {
    z-index: 9999 !important;
}

.mud-popover-open {
    z-index: 9999 !important;
}
/* Target specific popover that appears behind dialog */
div[id^="popovercontent"] {
    z-index: 9999 !important;
}
/* Ensure the overlay container for popover is also high */
.mud-overlay + .mud-popover,
.mud-overlay ~ .mud-popover {
    z-index: 9999 !important;
}
/* Specific targeting for dialog select popovers */
.mud-dialog .dialog-select + .mud-popover,
.mud-dialog-container .dialog-select + .mud-popover {
    z-index: 9999 !important;
}
/* Force all popovers in dialogs to have higher z-index */
.mud-dialog-container ~ div[class*="mud-popover"],
.mud-dialog ~ div[class*="mud-popover"] {
    z-index: 9999 !important;
}
/* Target the popover content wrapper */
.mud-popover-cascading-value {
    z-index: 9999 !important;
}
/* ===== Tag Chip Styles ===== */
.tag-chip-clickable {
    cursor: pointer !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

    .tag-chip-clickable:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .tag-chip-clickable:active {
        transform: translateY(0);
    }

.tag-autocomplete-inline {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 200px;
}

.tag-tooltip-white {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Hide tooltips for flock chart specifically */
.flock-chart-no-tooltip .mud-chart-tooltip,
.flock-chart-no-tooltip + .mud-tooltip {
    display: none !important;
    pointer-events: none !important;
}
/* Prevent MudTable editing row from expanding height */
.mud-table-edit-row td .mud-input-control,
.mud-table-edit-row td .mud-input,
.mud-table-edit-row td .mud-input-root,
.mud-table-edit-row td .mud-input-root-text,
.mud-table-edit-row td .debounced-datepicker-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .mud-table-edit-row td .mud-input-control > .mud-input-control-input-container {
        padding-bottom: 0 !important;
    }

.mud-table-edit-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* Shrink the edit commit/cancel icon button to prevent row height expansion */
.mud-table-edit-row .mud-icon-button {
    padding: 2px !important;
    width: 24px !important;
    height: 24px !important;
}

    .mud-table-edit-row .mud-icon-button .mud-icon-root {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }
/* Restore browser defaults inside embedded Worldpay Assist widgets so the app's global
   styles/resets don't flatten them. See the Assist developer guide FAQ. */
.benevia-payments-scope * {
    margin: revert-layer;
    padding: revert-layer;
    line-height: revert-layer;
    font: revert-layer;
}
/* Shared "eyebrow" label for entity summary cards (customer account totals, overview
   contact/shipping cards) so the card label style stays consistent across screens. */
.entity-card-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
/* Contact detail rows: a muted icon aligned to the first line of the value, value in
   secondary text. Shared by the Overview contact/shipping cards and AdditionalContactSummary. */
.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

    .contact-row + .contact-row {
        margin-top: 2px;
    }

.contact-row__text {
    word-break: break-word;
}

:root {
    --benevia-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --benevia-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Shared entry motion: element rises into place. Stagger via inline --i, distance via --lift. */
.rise-in {
    animation: benevia-rise-in 380ms var(--benevia-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes benevia-rise-in {
    from {
        opacity: 0;
        transform: translateY(var(--lift, 8px));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Motion is a pure enhancement — content is fully visible without it. */
@media (prefers-reduced-motion: reduce) {
    .rise-in {
        animation: none;
    }
}

/* "Preview" pill for features not yet GA. Default = tinted (in-page);
   --solid = filled, for the nav where it must stay legible on the teal active background. */
.preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--mud-palette-secondary-darken);
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.12);
    border: 1px solid rgba(var(--mud-palette-secondary-rgb), 0.30);
}

.preview-badge--solid {
    color: var(--mud-palette-secondary-text);
    background-color: var(--mud-palette-secondary);
    border-color: transparent;
}