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

/* Keyboard focus ring for hand-rolled controls. MudBlazor's global reset sets
   `button { outline: 0 }` and the Tailwind build ships utilities with no preflight, so nothing
   else in either portal draws one — a control built from raw markup is invisible to a sighted
   keyboard user without this. Suppress the UA ring on mouse focus and draw a themed, always
   legible one on keyboard focus. currentColor tracks the surrounding text tone, so it reads as a
   dark ring on light surfaces in both portals (never the light-green primary, too faint on white).
   Carry `bf-focus-ring` on any such control; `bf-hierarchy-toggle` is the BfDataGrid
   master-detail toggle, which also uses the class as its layout hook. */
.bf-focus-ring:focus,
.bf-hierarchy-toggle:focus {
    outline: none;
}

/* Pin the expand chevron to the cell's own line height (0.875rem text on a 1.25rem line), so it can
   never be the tallest thing in a row and drive the grid off its dense height. MudIcon renders
   above 1.25rem even at Size.Small, and a MudIconButton adds its ripple padding on top — together
   they took a 28px row to 39px. Size the button and the icon, not just one: the svg carries its own
   width/height from the font size. */
.bf-hierarchy-toggle,
.bf-hierarchy-toggle .mud-icon-root {
    height: 1.25rem;
    width: 1.25rem;
    font-size: 1.25rem;
}

/* Row-action icon in a grid cell — a PDF link, an open button. A MudIconButton at Size.Small is
   ~31px tall and the excess is its ripple padding, which makes the row taller than a text-only one.
   Strip the padding and hold the button to the cell's line box.
   `overflow: visible` is what makes that safe. MudBlazor puts `mud-ripple` on the same element as
   `mud-icon-button` and that class hides overflow, so a 1.25rem box clips a Font Awesome glyph —
   its metrics run past the em square. The two-class selector outranks `.mud-ripple`, so the glyph
   draws in full. Sizing the icon itself would clip it again, so leave it alone. */
.bf-cell-action.mud-icon-button {
    padding: 0;
    min-width: 0;
    height: 1.25rem;
    width: 1.25rem;
    overflow: visible;
}

.bf-focus-ring:focus-visible,
.bf-hierarchy-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Draws the same ring inside the control's own edge. Carry it beside `bf-focus-ring` on a control
   that fills a clipping parent: the offset above puts the ring outside the padding box, which an
   ancestor with `overflow-hidden` cuts away. */
.bf-focus-ring-inset:focus-visible {
    outline-offset: -2px;
}

/* Draws the ring in the theme's accent instead of the surrounding text tone. Carry it beside
   `bf-focus-ring` on a control whose design system pins the ring to `--ring`. */
.bf-focus-ring-accent:focus-visible {
    outline-color: var(--ring);
}

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

/* Changelog dialog: flex column so the version list + notes panel share a fixed
   frame and each scrolls independently. */
.changelog-dialog .mud-dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mobile: fullscreen dialog */
@media (max-width: 767.98px) {
    .mud-dialog.changelog-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.changelog-dialog > .mud-dialog-content {
        flex: 1 !important;
        min-height: 0 !important;
    }
}

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

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

/* A divider in a dialog marks a break in the dialog, not in the padded column that happens to
   hold it, so it runs the full width. The container owns its inset through --bf-dialog-inset and
   the divider pulls back over it on both sides. Only the rule moves: the content around it keeps
   the container's padding. Put the class on the divider, never on a block that holds content. */
.bf-divider-bleed {
    margin-inline: calc(var(--bf-dialog-inset, 1.5rem) * -1);
    width: auto;
}

/* MudBlazor pads .mud-dialog-content from a two-class selector, which outranks the p-0 utility a
   dialog hands it as ContentClass. A dialog that draws its own padding inside gets none from the
   wrapper: its dividers then reach both edges, and its footer sits as far from the bottom as its
   buttons sit from the divider above them. */
.mud-dialog .mud-dialog-content.p-0 {
    padding: 0;
}

/* A confirmation dialog: a title, a sentence, two buttons. The title and the buttons already sit
   at 1rem 1.5rem, so the sentence between them takes the same inset and the three line up. */
.bf-confirm-dialog .mud-dialog-content {
    padding: 1rem 1.5rem;
}

/* The inset a DialogSection pads by. The user dialogs declare theirs on .bf-user-dialog-body. */
.bf-dialog-section {
    --bf-dialog-inset: 1rem;
}

@media (min-width: 768px) {
    .bf-dialog-section {
        --bf-dialog-inset: 1.5rem;
    }
}

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

/* Grid toolbar search: shrink the dense outlined field so it lines up with the
   compact MbFilterSelect filter triggers (label: value ▾) instead of towering
   over them. MudBlazor sets the height via the input's vertical padding
   (10.5px in dense outlined); cutting it to ~5px brings the field to ~32px. */
.bf-grid-search .mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 0.875rem;
}

/* Grid toolbar Excel-export button: match the compact search/filter height (~32px).
   Opt-in via the wrapper class so only the grids that ask for it shrink. */
.bf-grid-export .mud-button-root {
    height: 32px;
    min-height: 32px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.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;
}

/* The figure line's opener for a measure held in several currencies. Reads as part of the
   line rather than as a control, so a footer of amounts stays a footer of amounts. */
.bf-aggregate-units {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.bf-aggregate-units .mud-icon-root {
    font-size: 1rem;
}

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

/* The position badge in a multi-column sort. Sized to read as a marker beside the sort
   arrow rather than as a button, and it keeps the header row's height. */
.bf-column-header .bf-sort-position {
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    padding: 0 0.25rem !important;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-primary);
}

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

    /* The bulk bar docks at the container's bottom edge, which is where the grid puts its pager.
       While a selection is live the rows give up the bar's height, so the pager stays reachable
       under it. */
    .bf-table-fill-container:has(> .bf-bulk-action-bar) > .bf-table-fill {
        padding-bottom: var(--bf-bulk-bar-height);
    }

    /* A grid card that fills the viewport shares the page with whatever sits above it, and takes
       what is left. The statistics views put more there than an overview does: a filter card of
       up to three rows of dropdowns, the layout tabs, the view-mode switch and a figure card. On
       a 1280x720 window that leaves the grid nothing at all, and the chain is overflow-hidden, so
       there is no scrollbar to reach it with either. This floor is what the card keeps instead;
       past it the page scrolls, which is what the shell's own overflow-y is for. */
    .bf-grid-card-floor {
        min-height: 34rem;
    }
}

/* 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: column resize — a thin drag strip on the header cell's right edge.
   Dragging writes an explicit width onto the column's <col> element, which
   table-layout:fixed honors. The header cells are position:sticky (FixedHeader),
   which makes the th the positioned ancestor the absolute handle anchors to. */
.bf-col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 1;
}

.bf-col-resizer:hover,
.bf-col-resizer.bf-resizing {
    border-right: 3px solid var(--mud-palette-primary);
}

/* BfDataGrid: column reorder — the header is the drag source, and the edge marker shows which
   side of the hovered column the dragged one will land on. */
.bf-column-header[draggable="true"] {
    cursor: grab;
}

.bf-table-fixed th.bf-drop-before {
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.bf-table-fixed th.bf-drop-after {
    box-shadow: inset -2px 0 0 var(--mud-palette-primary);
}

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


/* Colour rules: the six named formats a saved layout paints a cell or a row with. Written here
   rather than composed from Tailwind utilities, because the class is picked in a plain .cs file
   in the shared client, which the CustomerPortal content scan does not read.

   Each format is the design system's own pair: the solid `-subtle` fill and the `--on-*-subtle`
   foreground it prescribes for that fill. Both portals declare the pair, so one rule paints from
   whichever palette the portal owns, and a band keeps its contrast over a tinted row because the
   fill is opaque. */
.bf-cell-fmt {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    /* Pulled out over the cell's own padding and given it back, so the text sits exactly where it
       sits in an unpainted cell. A plain inset would shift every painted row in the column. */
    margin-inline: -6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 4px);
}

.bf-cell-fmt-neutral {
    background-color: var(--neutral-subtle);
    color: var(--on-neutral-subtle);
}

.bf-cell-fmt-info {
    background-color: var(--info-subtle);
    color: var(--on-info-subtle);
}

.bf-cell-fmt-success {
    background-color: var(--success-subtle);
    color: var(--on-success-subtle);
}

.bf-cell-fmt-warning {
    background-color: var(--warning-subtle);
    color: var(--on-warning-subtle);
}

.bf-cell-fmt-error {
    background-color: var(--error-subtle);
    color: var(--on-error-subtle);
}

/* Muted is the one format with no fill: it plays a cell down rather than marking it, so it
   keeps whatever is behind it and only quietens the text. */
.bf-cell-fmt-muted {
    color: var(--text-muted);
}

/* Row tints sit on the tr and beat the striped and hover backgrounds, the same way the
   selection tint does. A row is a wash at full width rather than a chip, and the design system's
   `-subtle` fills are built for a chip: measured against the striped row they sit at 1.04:1, which
   reads as an unmarked row. So a row mixes its own wash from the same base tone, the way the
   design system derives its `--*-border` tokens, solid against the surface so nothing stacks. */
.bf-row-fmt-neutral,
.bf-row-fmt-neutral:hover {
    background-color: color-mix(in oklab, var(--neutral) 22%, var(--surface, #fff)) !important;
}

.bf-row-fmt-info,
.bf-row-fmt-info:hover {
    background-color: color-mix(in oklab, var(--info) 14%, var(--surface, #fff)) !important;
}

.bf-row-fmt-success,
.bf-row-fmt-success:hover {
    background-color: color-mix(in oklab, var(--success) 14%, var(--surface, #fff)) !important;
}

.bf-row-fmt-warning,
.bf-row-fmt-warning:hover {
    background-color: color-mix(in oklab, var(--warning) 14%, var(--surface, #fff)) !important;
}

.bf-row-fmt-error,
.bf-row-fmt-error:hover {
    background-color: color-mix(in oklab, var(--error) 14%, var(--surface, #fff)) !important;
}

.bf-row-fmt-muted td {
    color: var(--text-muted);
}

/* Bulk selection: selected-row tint. A neutral primary tint mixed from the theme primary;
   the grid-redesign PR re-skins this to the final design-system token. Declared after the
   colour-rule tints: both carry !important at one class of specificity, so the later rule wins,
   and a ticked row has to show it is ticked whatever a rule painted it. */
.bf-row-selected,
.bf-row-selected:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

/* The footer row's own inset, shared by the strip and the bulk bar so the two rows line up. */
:root {
    --bf-footer-row-inset: 0.375rem 1rem;
    --bf-bulk-bar-height: 3.25rem;
}

/* Aggregate strip: every summed column's figures on one right-aligned line in the grid's footer
   slot, above the pager. It sits outside the table, where it has the table's width rather than one
   column's. See the building-table-pages skill for the column's name carrying the tie. */
.bf-aggregate-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: 1.25rem;
    row-gap: 0.125rem;
    padding: var(--bf-footer-row-inset);
    border-top: 2px solid var(--mud-palette-table-lines);
    background-color: var(--mud-palette-background-gray);
}

/* One column's name and its figures read as one unit, so the name stays on the figures' line. */
.bf-aggregate-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 100%;
    overflow: hidden;
}

/* The name carries the tie to the column, so it never wraps away from its figures. */
.bf-aggregate-group-label {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.bf-aggregate-strip .bf-aggregate-group-label {
    font-weight: 600;
}

/* One column's figures. Stacked by default, which suits a place as narrow as a column. */
.bf-aggregate-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

/* Across one line instead, for a place with the table's width. */
.bf-aggregate-figures-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
}

/* The number keeps its digits and the label gives way: a group-tier label is wider than a narrow
   column, and a figure without its number says nothing. The title holds the label in full. */
.bf-aggregate-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* Bulk action bar: full-width strip docked at the bottom of the table/grid area.
   Absolute within the bf-table-fill-container (position:relative at md+), so it spans
   the parent's full width. The grid reserves this height while the bar is up (see the
   md+ block above), so the bar never covers the pager.
   The height and the inset are declared on :root, because the reservation rule is a sibling
   of the bar and has to read the same values. One line always: the bar does not wrap, and the
   over-cap notice truncates rather than growing it.
   The height clears the tallest control the bar carries, a dense outlined picker at 40px, and
   matches the pager's own row height so the two footer rows read as a pair.
   The grid-redesign PR may restyle this. */

.bf-bulk-action-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bf-bulk-bar-height);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--bf-footer-row-inset);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    animation: bf-bulk-bar-rise 160ms ease-out 1;
}

/* The bar is one line of controls, not a form, so MudBlazor's field margins would stack on
   top of the bar's own padding and push the control past the row it docks against. Carries the
   dense class as well, to outrank MudBlazor's own three-class rule for a labelled field. */
.bf-bulk-action-bar .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
    margin-bottom: 0;
}

@keyframes bf-bulk-bar-rise {
    0%   { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* Pagination footer: "Rader per sida" with its select, a clear gap, then "1-25 av 120" and the
   arrow group, the whole row at the right edge. The gap is what tells the page-size control and
   the paging control apart. MudBlazor's pagers spread the row with a flex spacer instead, so the
   spacer goes and the two groups are held apart by the gap alone. */
:root {
    --bf-pager-group-gap: 3rem;
}

.mud-table-pagination-toolbar {
    justify-content: flex-end;
    padding-inline-end: 16px;
}

.mud-table-pagination-toolbar .mud-table-pagination-spacer {
    display: none;
}

/* MudTablePager wraps its caption and select in one .mud-table-pagination-display div, so whichever
   of the info text and the arrows follows it opens the right-hand group. */
.mud-table-pagination-toolbar .mud-table-pagination-display + .mud-table-pagination-caption,
.mud-table-pagination-toolbar .mud-table-pagination-display + .mud-table-pagination-actions {
    margin-inline-start: var(--bf-pager-group-gap);
}

/* MudDataGridPager lays caption, select, info text and arrows out as four flat siblings, and
   MudSelect puts the Class it is given on an inner element rather than its own wrapper. So the
   right-hand group is picked by position after the select's .mud-select wrapper.
   BfDataGrid adds the bf-grid-pager class; the rules above leave MudTablePager alone. */
.bf-grid-pager > .mud-select ~ .mud-table-pagination-caption,
.bf-grid-pager > .mud-select ~ .mud-table-pagination-actions {
    margin-inline-start: var(--bf-pager-group-gap);
}

/* The arrows read with the info text, so only the first of the pair opens the gap. */
.bf-grid-pager > .mud-table-pagination-caption + .mud-table-pagination-actions {
    margin-inline-start: 10px;
}

/* The user dialogs' body: a floor, then grow with the content. Every dialog in
   Administration/Form takes its height from here, so the create/edit dialog and the bulk
   invite dialog cannot drift apart and a new one inherits the rule instead of picking its
   own number. Deliberately no max-height: MudBlazor already caps .mud-dialog at
   calc(100% - 64px), which is what keeps a margin above and below. Below mud-md the
   columns stack and the floor would only add dead space, so it is released.
   A column inside this body must not scroll on its own — an overflow-y-auto there stops
   the content from growing the dialog, which is what pins it to the floor. */
.bf-user-dialog-body {
    min-height: 600px;
    --bf-dialog-inset: 1.5rem;
}

@media (max-width: 959.95px) {
    .bf-user-dialog-body {
        min-height: 0;
    }
}