.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
}

.mud-typography,
.mud-input,
.mud-button-root,
.mud-table,
.mud-popover,
.mud-dialog {
    letter-spacing: 0 !important;
}

.mud-layout {
    background:
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), 0.03), transparent 280px),
        var(--mud-palette-background);
}

.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mud-paper {
    border-radius: var(--mud-default-borderradius);
}

.mud-card,
.mud-table,
.mud-dialog {
    border: 1px solid var(--mud-palette-divider-light);
}

.mud-chip.mud-chip-size-medium {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body2-size) !important;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}
.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control-margin-dense .mud-input > input.mud-input-root,
.mud-input-control-margin-dense div.mud-input-slot.mud-input-root {
    font-size: 0.90em;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-default-size) !important;
}


.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
    
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}
.mud-table-dense .mud-table-cell {
    font-size: var(--mud-typography-body2-size) !important;
}


.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom:2px;
}

.mud-nav-link {
    white-space: normal !important;
}

.page-header {
    padding: 0.25rem 0 1rem;
}

.page-header-title {
    min-width: min(100%, 18rem);
}

.page-header-actions {
    flex: 1 1 20rem;
}

.action-toolbar {
    width: 100%;
    gap: 0.75rem;
}

.form-section {
    margin-bottom: 1.25rem;
}

.form-section-header {
    margin-bottom: 0.5rem;
}

.loading-skeleton {
    width: 100%;
}

.loading-skeleton-form,
.loading-skeleton-detail {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.events-shell {
    width: 100%;
}

.events-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.events-summary-tile {
    min-height: 5.5rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-divider-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-calendar-panel {
    border: 1px solid var(--mud-palette-divider-light);
    overflow: hidden;
}

.event-calendar-panel-header {
    padding: 1rem;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.event-calendar-scroll {
    width: 100%;
    overflow-x: auto;
}

.event-calendar {
    min-width: 760px;
    background: var(--mud-palette-surface);
}

.event-calendar-weekdays,
.event-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.event-calendar-weekday {
    padding: 0.625rem 0.75rem;
    border-right: 1px solid var(--mud-palette-divider-light);
    color: var(--mud-palette-text-secondary);
    font-size: var(--mud-typography-caption-size);
    font-weight: 700;
    text-transform: uppercase;
}

.event-calendar-weekday:last-child {
    border-right: 0;
}

.event-calendar-day {
    min-height: 8.75rem;
    padding: 0.5rem;
    border-top: 1px solid var(--mud-palette-divider-light);
    border-right: 1px solid var(--mud-palette-divider-light);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.event-calendar-day:nth-child(7n) {
    border-right: 0;
}

.event-calendar-day.outside-month {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
}

.event-calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.event-calendar-day.has-events {
    background:
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), 0.04), transparent 70%),
        var(--mud-palette-surface);
}

.event-calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
    font-weight: 700;
}

.event-calendar-item {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--mud-palette-divider-light);
    border-left: 3px solid var(--mud-palette-info);
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    text-align: left;
    display: grid;
    gap: 0.1rem;
    cursor: pointer;
}

.event-calendar-item:hover,
.event-calendar-item:focus-visible {
    border-color: var(--mud-palette-primary);
    outline: 0;
}

.event-calendar-item.confirmed {
    border-left-color: var(--mud-palette-success);
}

.event-calendar-item.cancelled {
    border-left-color: var(--mud-palette-error);
    opacity: 0.72;
}

.event-calendar-time {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1rem;
}

.event-calendar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--mud-typography-body2-size);
    line-height: 1.15rem;
    font-weight: 600;
}

/* Multi-day events render as one continuous bar: round only the real ends /
   week wraps and bleed the middle/continuation segments to the cell edges. */
.event-calendar-item.is-start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    margin-right: -0.5rem;
}

.event-calendar-item.is-middle {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.event-calendar-item.is-end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--mud-palette-divider-light);
    margin-left: -0.5rem;
}

/* Operational delivery/pickup marker inside a day cell. */
.event-calendar-role {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1rem;
}

.event-calendar-role .mud-icon-root {
    font-size: 0.9rem;
}

.event-calendar-item.role-pickup {
    border-left-style: dashed;
}

.event-calendar-item.role-inrental {
    opacity: 0.8;
}

.event-agenda-row {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.event-agenda-row:last-child {
    border-bottom: 0;
}

.event-agenda-main {
    min-width: min(100%, 22rem);
}

@media (max-width: 960px) {
    .events-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .events-summary-grid {
        grid-template-columns: 1fr;
    }

    .event-calendar-panel-header {
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    /* On phones the 7-column month grid is unusable; collapse to the agenda below
       (month navigation + summary tiles stay visible). */
    .event-calendar-panel {
        display: none;
    }
}

/* DispatchBoard Entregas/Retiros tabs: MudBlazor's default .mud-tab min-width
   (160px) makes the two tabs overflow the card on phones. Let them shrink to fit. */
@media (max-width: 600px) {
    .dispatch-tabs .mud-tab {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Reusable: let a MudDataGrid/MudTable toolbar grow and wrap its controls on
   small screens instead of clipping them or forcing a horizontal scroll.
   Add Class="toolbar-wrap" to the grid/table. */
.toolbar-wrap .mud-table-toolbar {
    height: auto;
    min-height: 64px;
}

/* DispatchBoard control cluster (Deliveries/Pickups tabs + list view + scope
   chips): on phones stack the controls vertically and full-width so nothing is
   squeezed and the two tabs stop triggering MudTabs' scroll arrows. */
@media (max-width: 600px) {
    .dispatch-controls.mud-stack-row,
    .dispatch-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .dispatch-controls > * {
        width: 100%;
    }
}

/* Notification bell popover: anchored to the bell which sits at the far right of
   the header, so cap its width to the viewport to stop it being clipped on the
   right edge on phones. */
.notification-menu-popover {
    max-width: min(360px, calc(100vw - 16px));
}

.empty-state {
    min-height: 8rem;
    padding: 1.5rem;
    text-align: center;
}

.user-button {
    text-transform: none;
    background: rgba(var(--mud-palette-primary-rgb), 0.1)
}

.side-menu .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

.side-menu .mud-drawer-header {
    min-height: 72px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.side-menu .mud-nav-link {
    border-radius: 0 6px 6px 0;
    margin-right: 0.5rem;
}

.side-menu .mud-nav-group .mud-nav-link {
    margin-left: 0.5rem;
}

.side-menu-footer-text {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.625rem;
    line-height: 1.125rem;
}

.brand-sidebar-logo {
    width: 40px;
    height: 32px;
    object-fit: contain;
}

.brand-appbar-logo {
    width: 92px;
    height: 28px;
    object-fit: contain;
}

.brand-auth-logo {
    width: 180px;
    max-width: 100%;
    height: 44px;
    object-fit: contain;
}

.brand-sidebar-avatar {
    width: 40px;
    height: 40px;
}

.brand-appbar-avatar {
    width: 32px;
    height: 32px;
}

.brand-auth-avatar {
    width: 56px;
    height: 56px;
}

.company-logo-preview {
    width: 180px;
    height: 96px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.company-logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 0.75rem;
}

.mud-table.mud-data-grid .mud-toolbar {
    height: auto !important;
    padding: 1rem
}


.mud-table.mud-data-grid .mud-toolbar-gutters {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    padding: 1rem
}

.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0rem !important;
}





.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Reconnection overlay (Blazor toggles the state classes on #components-reconnect-modal) */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

#components-reconnect-modal .components-reconnect-dialog {
    background: #fff;
    color: #212121;
    padding: 24px 28px;
    border-radius: 8px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    font-family: "IBM Plex Sans", Aptos, "Segoe UI", system-ui, sans-serif;
}

#components-reconnect-modal .reconnect-failed,
#components-reconnect-modal .reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-default,
#components-reconnect-modal.components-reconnect-rejected .reconnect-default {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected {
    display: block;
}

#components-reconnect-modal button {
    margin-top: 12px;
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    background: #1976d2;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

#components-reconnect-modal .reconnect-loader {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: reconnect-spin 1s linear infinite;
}

@keyframes reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}