/*
    Use this file to override MudBlazor component css that cannot be modified otherwise.
*/

/* MudDateRangePicker adjustments */
.mud-picker .mud-input input:nth-of-type(1) {
    padding-right: 0;
}

.mud-picker .mud-input svg {
    margin-left: 0;
}

.mud-picker .mud-input input:nth-of-type(2) {
    padding-left: 0;
}

/* Table component adjustment */
thead.mud-table-head.table-head-bordered {
    --bf-table-text-color: rgb(117, 117, 117);
    --bf-table-head-border-color: rgb(226, 232, 240);
    --bf-table-head-font-size: 0.875rem;
    --bf-table-head-font-weight: 400;
}

thead.mud-table-head.table-head-bordered th.mud-table-cell {
    border-top: 1px solid var(--bf-table-head-border-color);
    border-bottom: 2px solid #ddd;
    color: var(--bf-table-text-color);
    font-weight: var(--bf-table-head-font-weight);
    font-size: var(--bf-table-head-font-size);
    text-align: left;
    vertical-align: top;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-left: 0.5rem;
    padding-inline-end: 0.5rem;
}

/* BfButtonGroup: 1px divider between buttons */
.bf-button-group .mud-button-root + .mud-button-root {
    border-left: 1px solid rgb(203, 213, 225);
}

/* ServiceBookingDialog: flex layout for scrollable content + reduce input font size */
.service-booking-dialog .mud-dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-booking-dialog .mud-input input,
.service-booking-dialog .mud-input textarea,
.service-booking-dialog .mud-input .mud-select-input {
    font-size: 0.85rem !important;
}

/* Mobile: fullscreen dialog with flex layout */
@media (max-width: 767.98px) {
    .mud-dialog.service-booking-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mud-dialog.service-booking-dialog > .mud-dialog-content {
        flex: 1 !important;
        min-height: 0 !important;
    }
}

/* Desktop: constrained dialog */
@media (min-width: 768px) {
    .mud-dialog.service-booking-dialog {
        max-height: 85% !important;
    }
}

/* Dialog chrome */
.mud-dialog {
    border-radius: 0.5rem !important;
}

/* Flush dialog content — zero padding so dividers span full width */
.order-dialog .mud-dialog-content > div:first-child,
.dialog-flush .mud-dialog-content > div:first-child {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.order-dialog .mud-dialog-content,
.dialog-flush .mud-dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Order dialog form layout */
.order-dialog .mud-dialog-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.order-dialog .mud-dialog-content .mud-input-root,
.order-dialog .mud-dialog-content .mud-select-input {
    font-size: 0.875rem;
}

.order-dialog .mud-input.mud-input-outlined.mud-input-margin-dense:not(.mud-select-input):has(> input) {
    height: 37.625px;
}

.mud-dialog-actions {
    width: 100%;
    padding: 1rem 1.5rem !important;
}

/* Mobile: fullscreen dialog with flex layout */
@media (max-width: 767.98px) {
    .mud-dialog.order-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .mud-dialog.order-dialog > .mud-dialog-content {
        flex: 1 !important;
        min-height: 0 !important;
    }

    .mud-dialog > .mud-dialog-actions {
        flex: none !important;
    }
}

/* Desktop: constrained dialog */
@media (min-width: 768px) {
    .mud-dialog.mud-dialog-width-md.mud-dialog-width-full.order-dialog {
        max-height: 85% !important;
    }
}

/* OrderDetailsDialog: fullscreen on mobile, constrained on desktop.
   On mobile the default MudBlazor dialog leaves margins that crowd the content;
   full viewport gives room for the stacked layout (status banner first,
   then timeline / route / cargo). */
.mud-dialog.order-details-dialog > .mud-dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

@media (max-width: 767.98px) {
    .mud-dialog.order-details-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (min-width: 768px) {
    .mud-dialog.order-details-dialog {
        max-height: 85% !important;
    }
}

/* BfDataGrid custom column header: sort and filter icons rendered by HeaderTemplate.
   These classes are applied by BfDataGrid.razor — not by MudBlazor internals. */
.bf-column-header .bf-sort-icon {
    font-size: 1rem;
}

.bf-column-header .bf-sort-active {
    opacity: 1;
    color: var(--mud-palette-primary);
}

.bf-column-header .bf-sort-inactive {
    opacity: 0.35;
}

.bf-column-header .bf-filter-active {
    color: var(--mud-palette-primary) !important;
}

.bf-column-header .bf-filter-inactive {
    opacity: 0.35;
}

.bf-column-header .bf-column-title {
    cursor: pointer;
}

.bf-column-header .bf-column-title:hover .bf-sort-inactive {
    opacity: 0.7;
}

/* Filter popover click-outside-to-close: transparent overlay behind the popover
   catches clicks outside, while the popover itself sits above the overlay. */
.bf-filter-overlay {
    z-index: var(--mud-zindex-popover) !important;
    background: transparent !important;
}

.bf-filter-popover {
    z-index: calc(var(--mud-zindex-popover) + 1) !important;
}

/* BfTableWithFilters: viewport-filling table with internal scroll (md+ only).
   Only applies inside the wrapper div that has md:relative set. */
@media (min-width: 768px) {
    .bf-table-fill-container > .bf-table-fill {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
    }

    .bf-table-fill-container > .bf-table-fill .mud-table-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

/* BfDataGrid: table-layout:fixed ensures column widths stay stable across data
   changes (no jitter on filter/sort/search).  width:100% distributes the full
   container width proportionally among columns based on their declared widths.
   MudDataGrid's NoRecordsContent uses <th colspan="1000"> which would create
   phantom columns — BfDataGrid neutralises these via a <ColGroup> that sets
   phantom columns to width:0. */
.bf-table-fixed table {
    table-layout: fixed;
    width: 100%;
}

/* BfDataGrid: outer border — MudBlazor Bordered="true" only adds vertical cell
   dividers between columns, it does not render an outer border around the table.
   Add it explicitly on the .mud-table root element. */
.bf-table-fixed.mud-table {
    border: 1px solid var(--mud-palette-table-lines);
}

/* BfDataGrid: horizontal scroll — when total column widths exceed the container,
   the table body scrolls horizontally. */
.bf-table-fixed .mud-table-container {
    overflow-x: auto;
}

/* BfDataGrid: minimum column width floor — prevents columns from collapsing to nothing
   when the table has many columns. */
.bf-table-fixed th,
.bf-table-fixed td {
    min-width: 80px;
}

/* BfDataGrid: cell overflow — ellipsis truncation with tooltip for full value on hover.
   Applied to all data cells. Header text uses the same pattern in RenderColumnHeader. */
.bf-cell-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* BfDataGrid: grouped mode — the header-only grid uses Items=empty and puts grouped
   content in NoRecordsContent.  Without body rows the NoRecordsContent <td colspan>
   stretches across the full table width, but thead columns still need explicit widths
   to match leaf grids. Force header cells to honour their inline width style.
   user-select: none prevents text selection during column drag-and-drop reordering. */
.bf-table-fixed .mud-table-head th {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
}

/* BfDataGrid: the NoRecordsContent row spans all columns; let it fill the entire
   width without influencing column sizing of the header row above. */
.bf-table-fixed .mud-table-body .mud-table-cell[colspan] {
    width: 100%;
    padding: 0;
}


/* BfColumnValueFilter: container sizing (replaces inline styles for CSP compliance) */
.bf-filter-container {
    min-width: 240px;
    max-width: 320px;
}

/* BfColumnValueFilter: scrollable value list */
.bf-filter-values {
    max-height: 240px;
    overflow-y: auto;
}

/* MudBlazor's default .mud-selected-item styling inside dropdown popovers
   (autocomplete, select) uses a faded text color that reads as "disabled"
   even though the item is the keyboard-focused / currently-matched row.
   Override the text color to text-primary so the row stays clearly visible.
   The tinted background is preserved so the arrow-key navigation marker
   does not disappear. Applies repo-wide to keep dropdown behaviour consistent. */
.mud-selected-item,
.mud-selected-item .mud-typography {
    color: var(--mud-palette-text-primary) !important;
}

/* Group-by chip drag-and-drop: MudDropContainer wraps each item in a
   mud-drop-item div with default min-height/padding that creates dead space
   above the chip, making only the bottom half draggable.  Override with
   !important because MudBlazor's default styles are highly specific. */
.bf-group-chips .mud-drop-zone {
    min-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.bf-group-chips .mud-drop-item {
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
    cursor: grab;
}

/* OrderTemplate dialog: match MudToggleGroup height to dense outlined inputs
   so the visibility selector aligns with adjacent label and editor inputs.
   Centering icon-only items requires explicit flex centering on the toggle item
   itself; MudBlazor's default content layout leaves the icon on the baseline. */
.order-template-mud-toggle-group.mud-toggle-group {
    height: 40px;
    margin-top: 8px;
}

.order-template-mud-toggle-group .mud-toggle-item {
    min-height: 0;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-template-mud-toggle-group .mud-toggle-item .mud-toggle-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* OrderTemplate dialog layout: clamp the dialog so the form scrolls inside a
   fixed frame. The DialogContent slot is a flex column that hosts header
   (frozen), scope header (frozen), scrollable body, and footer (frozen).
   position:relative anchors the saving overlay to the full dialog. */
@media (min-width: 768px) {
    .mud-dialog.order-template-dialog {
        max-height: 80vh !important;
        height: 80vh;
    }
}

/* Mobile: fullscreen dialog */
@media (max-width: 767.98px) {
    .mud-dialog.order-template-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

.mud-dialog.order-template-dialog .mud-dialog-content {
    position: relative;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.order-template-dialog-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.order-template-dialog-overlay {
    border-radius: inherit;
    z-index: 10;
}

/* BfToast: slide-in animation for custom toast host. Pure CSS — keeps CSP clean
   by avoiding the dynamic inline <style> elements that MudBlazor's snackbar injects.
   Slides down from the top edge; the host container handles horizontal centering. */
@keyframes bf-toast-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.bf-toast-enter {
    animation: bf-toast-slide-in 200ms ease-out;
}

/* Recycling action-button column (Empty / Collect): two compact buttons rendered
   side-by-side inside BfDataGrid Actions cell. Lives in shared overrides because
   the buttons are emitted via a CellTemplate render fragment that crosses
   component boundaries — Blazor scoped CSS (::deep) does not reliably scope into
   shared component render contexts. */
.action-button-column {
    display: inline-flex;
    gap: 0.5rem;
}

.action-button-column > button {
    --mud-typography-body1-size: 0.7rem;
}

/* Master widths preserved exactly. !important defeats any specificity battle
   from MudButton internals when the buttons are emitted by a CellTemplate
   render fragment (no scoped-CSS attribute on the button). */
.action-button-column > .action-button-empty {
    min-width: 140px !important;
    width: 140px !important;
    max-height: 32px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.action-button-column > .action-button-collect {
    min-width: 140px !important;
    width: 140px !important;
    max-height: 32px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* BfDataGrid: 1.2 s green sweep applied to a row the moment it is registered
   via AddPendingCreateAsync. Used as the visual cue that the user's freshly-
   created row landed; no italic stub or spinner — the row already carries
   authoritative data from the BFF response. */
.bf-row-highlight {
    animation: bf-row-highlight-sweep 1.2s ease-out 1 forwards;
}

@keyframes bf-row-highlight-sweep {
    0%   { background: linear-gradient(90deg, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 0%); opacity: 0.6; }
    50%  { background: linear-gradient(90deg, rgba(34,197,94,0.0) 0%, rgba(34,197,94,0.35) 50%, rgba(34,197,94,0.0) 100%); opacity: 1; }
    100% { background: transparent; opacity: 1; }
}