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

/* MudAutocomplete: prevent first item from being highlighted differently than other items */
.mud-list-item.mud-primary-hover {
    background-color: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
    .mud-list-item.mud-primary-hover:hover {
        --mud-palette-action-default-hover: inherit;
        background-color: var(--mud-palette-action-default-hover) !important;
    }
}

.mud-list-item.mud-primary-text {
    color: inherit !important;
}

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

/* NewServiceBookingDialog */
.new-service-booking-dialog .mud-dialog-content > div:first-child {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.new-service-booking-dialog .mud-dialog-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.new-service-booking-dialog .mud-dialog-content > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

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

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

.new-service-booking-dialog .mud-dialog-actions {
    width: 100%;
    padding: 0.75rem 1.5rem;
}

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

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

/* Desktop: constrained dialog */
@media (min-width: 768px) {
    .mud-dialog.mud-dialog-width-md.mud-dialog-width-full.new-service-booking-dialog {
        max-height: 85% !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;
    }
}