/*
    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;
}

/* mBark order-create page layout — main column + sticky right rail.
   Grid locks the rail to a fixed right column so it never gets pushed
   outward when sections inside the main column wrap or grow.
   `minmax(0, 1fr)` on the main column lets it shrink below content
   intrinsic min-width, preventing overflow that would force the layout
   wider than the viewport. */
.order-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

/* 12-col grid drives the dynamic mosaic feel — each section declares its own
   span via [data-section='X'] below so rows alternate between narrow + wide
   panels rather than locking every card to a single width. Sections reveal in
   order so empty trailing cells in a row are transient (they fill in as the
   next mandatory section reveals). */
.order-create-main {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
    align-content: start;
}

/* Per-section spans. Pairings (Identity+Customer, Office+Workplace) sum to 12
   so each row reads as one mosaic. Transport and Notes get the full row each
   because their inner content is wide-form (multiple side-by-side dropdowns
   and multi-line text areas). */
.order-create-main [data-section='Identity'] { grid-column: span 3; }
.order-create-main [data-section='CustomerAndContact'] { grid-column: span 6; }
.order-create-main [data-section='Notification'] { grid-column: span 3; }
.order-create-main [data-section='OfficeAndDelivery'] { grid-column: span 4; }
.order-create-main [data-section='Terms'] { grid-column: span 4; }
.order-create-main [data-section='TypeSpecific'] { grid-column: span 4; }
.order-create-main [data-section='GoodsAndItems'] { grid-column: 1 / -1; }
.order-create-main [data-section='TransportInstructions'] { grid-column: 1 / -1; }
.order-create-main [data-section='CustomerReferences'] { grid-column: span 4; }
.order-create-main [data-section='LogisticsReferences'] { grid-column: span 4; }
.order-create-main [data-section='Notes'] { grid-column: span 4; }
.order-create-main [data-section='Attachments'] { grid-column: 1 / -1; }

/* mBark edit-order summary overrides — Transport joins the refs row at span 4,
   Notes spans the full row (textareas benefit from horizontal space). Keeps the
   create-flow mosaic untouched.
   Wrapped in min-width:768px so the global mobile rule above still collapses
   every section to a single full-bleed column on phones — without this guard,
   our more-specific selectors would beat the mobile media query and leave
   sections at inherited spans on narrow viewports, making the cards visibly
   uneven width. */
@media (min-width: 768px) {
    .order-create-main.order-edit-summary [data-section='TransportInstructions'] { grid-column: span 4; }
    .order-create-main.order-edit-summary [data-section='Notes'] { grid-column: 1 / -1; }
}

/* Narrow viewports: collapse to a single column so sections aren't squeezed
   below ~280px each. md = 768px is the same breakpoint the rest of the page
   uses for desktop layout. The summary rail is hidden from the in-flow layout
   on mobile and reached through the hamburger drawer on the page header. */
@media (max-width: 767px) {
    .order-create-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .order-create-main {
        grid-template-columns: minmax(0, 1fr);
    }
    .order-create-main [data-section] { grid-column: 1 / -1; }
    .order-create-rail {
        display: none;
    }
}

/* Drop the .page top padding for the create-order page so the sticky page
   header sits flush against the app shell — and shift the summary rail's
   sticky offset down past that header so it doesn't slip behind it. The
   horizontal padding stays on .page so sections still indent off the
   viewport edges. */
main.page:has(> .bf-create-order-page) {
    padding-top: 0;
}

.order-create-rail {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

/* mBark create-order: section card chrome. Width is set by the per-section
   grid-column rules on .order-create-main above; the rules here are pure
   chrome (background, min-width hygiene). */
.bf-order-create-section {
    min-width: 0;
    background: #ffffff;
    /* MudPaper-style — keep border-radius/border consistent with the .razor markup
       which already declares Tailwind `rounded-md border border-slate-200`. The
       rule below is layout-only so MudBlazor inline overrides don't clobber it. */
}

/* Forces a section to span the full row regardless of its data-section default.
   Lets a caller override its declared span when content needs the full width. */
.bf-order-create-section--full-width {
    grid-column: 1 / -1;
}

/* Active section: highlight via primary-coloured outline so the user sees where
   the cascade currently focuses. Uses MudBlazor primary palette token so it
   tracks theme changes. */
.bf-order-create-section--active {
    border-color: var(--mud-palette-primary, #594ae2) !important;
    box-shadow: 0 0 0 2px rgba(89, 74, 226, 0.18);
}

/* Done sections: subtle border tint to signal completion without screaming. */
.bf-order-create-section--done {
    border-color: rgba(34, 197, 94, 0.6) !important;
}

/* Past (revealed but no longer the focus, not necessarily complete) — currently
   a synonym for done in this design; kept distinct for future divergence. */
.bf-order-create-section--past {
    opacity: 0.85;
}

/* Step badge in section header — small pill next to the title. */
.bf-order-create-section__badge {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bf-order-create-section__badge--start {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}
.bf-order-create-section__badge--active {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}
.bf-order-create-section__badge--done {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

/* Step-number prefix (e.g. "1 ·") in section header. */
.bf-order-create-section__step {
    color: #94a3b8;
    font-weight: 600;
    margin-right: 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* Summary panel chrome — already styled by Tailwind utilities in the markup;
   the rules below are mostly for the "values list" spacing tokens that the
   markup expects to find. */
.bf-order-create-summary { /* layout handled by .order-create-rail; no extra rules */ }
.bf-order-create-summary__section { /* spacing handled by Tailwind in markup */ }
.bf-order-create-summary__icon    { /* icon chip handled by Tailwind in markup */ }
.bf-order-create-summary__values  { /* list handled by Tailwind in markup */ }
.bf-order-create-summary__label   { /* col handled by Tailwind in markup */ }
.bf-order-create-summary__value   { /* col handled by Tailwind in markup */ }


/* 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; }
}

/* Required-input asterisk: red */
.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: var(--mud-palette-error);
}

/* mBark create-order: floating close button on mobile summary drawer */
.bf-summary-drawer-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
}

/* UploadFileDialog drag-and-drop: render MudFileUpload's native <input type="file">
   as a transparent overlay filling the drop zone so it captures both clicks and
   native file drops. With Hidden="true" the input is display:none and can never
   receive a drop, so dropped files fall through to the browser (which navigates to
   / opens them) instead of uploading. The container is made the positioning context
   so the absolutely-positioned input stretches to the CustomContent MudPaper. */
.bf-file-upload .mud-input-control-input-container {
    position: relative;
}

.bf-file-upload-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
    z-index: 10;
}