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

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

/* BfDataGrid: column width classes for CSP compliance.
   Used on <col> elements in ColGroup and via HeaderClass/CellClass on TemplateColumn.
   With table-layout:fixed, <col> widths control the column proportions. */
.bf-col-w-100 { width: 100px; }
.bf-col-w-110 { width: 110px; }
.bf-col-w-120 { width: 120px; }
.bf-col-w-130 { width: 130px; }
.bf-col-w-140 { width: 140px; }
.bf-col-w-160 { width: 160px; }
.bf-col-w-180 { width: 180px; }
.bf-col-w-200 { width: 200px; }
.bf-col-w-220 { width: 220px; }
.bf-col-w-240 { width: 240px; }
.bf-col-w-280 { width: 280px; }

/* BfDataGrid: phantom col — zeroed-out columns that neutralise the NoRecordsContent
   colspan="1000" trick. */
.bf-col-phantom { width: 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;
}

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

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