@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/*Layout content in Account Modal. Orig set to 100vh, this caused the content to overflow the modal...*/
/*.b-layout.b-layout-root {
                    height: 100%;
                }*/

/*NOTE: .b-layout-sider-content is set to [z-index: 1;] from [z-index: 1021;] so that modal covers side menu in _Layout.cshtml...*/

/*------------------------------------
 - GLOBAL ZOOM: Match preferred 90% display scale
 - height overrides compensate for zoom so the
 - Blazorise layout fills the entire viewport.
 - calc(100vh / 0.9) at 0.9x zoom = 100vh visually.
 -
 - MODAL FIX: All .blazored-modal-content heights
 - use 95% (of parent shell) instead of 90vh so
 - they are immune to zoom. Percentages are relative
 - to the parent element, not the viewport.
 ------------------------------------*/
html {
    zoom: 0.9;
}

/* Page-level layout: Blazorise sets height:100vh which
   renders at 90vh after zoom. Override with the zoom-
   compensated value so sidebar + content fill viewport. */
.b-layout-root,
.b-layout-root > .b-layout-sider {
    height: calc(100vh / 0.9) !important;
}

/*------------------------------------
 - REQUIRED FOR BLAZOR :: DO NOT REMOVE
 ------------------------------------*/
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*------------------------------------
 - Blazorise Snackbar (acting as a Toast)
 ------------------------------------*/
.snackbar-stack-bottom {
    top: 5% !important;
}

.snackbar {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    border: 1px solid rgba(100, 100, 111, 0.2) !important;
    border-radius: 10px !important;
}

.snackbar-action-button {
    color: var(--b-snackbar-button-color, var(--b-snackbar-button-color, #C0C0C0)) !important;
}

    .snackbar-action-button:focus, .snackbar-action-button:hover {
        color: var(--b-snackbar-button-hover, #C0C0C0) !important;
    }

/*------------------------------------
 - Blazorise DataGrid :: disable row-selection
 -   highlight, click shade, and pointer cursor
 ------------------------------------
.table-primary, .table-primary > th, .table-primary > td {
    background-color: transparent !important;
    border-top: 1px solid #dee2e6 !important;
}

.table-striped tbody tr.table-primary:nth-of-type(odd),
.table-striped tbody tr.table-primary:nth-of-type(odd) > td,
.table-striped tbody tr.table-primary:nth-of-type(odd) > th {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.table-active, .table-active > th, .table-active > td {
    --bs-table-active-bg: transparent;
    background-color: transparent !important;
}

.table-striped tbody tr.table-active:nth-of-type(odd),
.table-striped tbody tr.table-active:nth-of-type(odd) > td,
.table-striped tbody tr.table-active:nth-of-type(odd) > th {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.table-row-selectable {
    cursor: default !important;
    background-color: transparent !important;
}

.table-striped tbody tr.table-row-selectable:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05) !important;
}*/

.b-table tbody tr {
    cursor: default !important;
}

/*------------------------------------
 - Global Checkbox & Switch Cursor
 ------------------------------------*/
input[type="checkbox"],
.custom-control-input,
.custom-control-label {
    cursor: pointer;
}

/*------------------------------------------
 - Blazorise Modal (used for CONFIRM DELETE)
 ------------------------------------------*/
.modal-content {
    border-radius: 10px;
}

    .modal-content .text-secondary {
        color: #dc3545 !important;
    }

.modal-header {
    background-color: #dc3545;
    color: #FFFFFF;
}

    .modal-header .close {
        color: white;
    }

.modal-body {
    color: #dc3545;
}

.modal-footer .btn-primary { /*Get rid of the default purple button*/
    background-color: #dc3545;
    border-color: #dc3545;
}

    .modal-footer .btn-primary:hover {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }

    .modal-footer .btn-primary:focus {
        box-shadow: 0 0 0 0.2rem rgb(225 83 97 / 50%) !important;
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }

    .modal-footer .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }

/*------------------------------------------
 - Global Blazorise Label Styling Adjustment
 -----------------------------------------*/
label {
    display: inline-block;
    margin-bottom: 0rem;
    font-weight: 400;
    font-size: 0.9rem;
    color: #6c757d;
}

/*------------------------------------
 - MS Validation Message
 ------------------------------------*/
.validation-message {
    color: #d32f2f; /* Red color */
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 2px;
    margin-bottom: 2px;
    font-style: italic;
}

/*------------------------------------
 - input place holder font
 ------------------------------------*/
.form-control::-moz-placeholder {
    color: #C0C0C0;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #C0C0C0;
}

.form-control::-webkit-input-placeholder {
    color: #C0C0C0;
}

/*------------------------------------
 - card header
 ------------------------------------*/
.card-header {
    background-color: rgba(0,0,0,.05);
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-weight: 600;
}

/*------------------------------------
 - COLOR primary
 ------------------------------------*/
.alert-primary {
    color: #3e0084;
    background-color: #e4ccff;
    border-color: #d9b7ff;
}

    .alert-primary hr {
        border-top-color: #cb9eff;
    }

    .alert-primary .alert-link {
        color: #260051;
    }

.badge-primary {
    color: #fff;
    background-color: #7800ff;
}

    .badge-primary[href]:hover, .badge-primary[href]:focus {
        color: #fff;
        background-color: #6000cc;
    }

.bg-primary {
    background-color: #7800ff !important;
}

a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus {
    background-color: #6000cc !important;
}

.border-primary {
    border-color: #7800ff !important;
}

.btn-primary {
    color: #fff;
    background-color: #7800ff;
    border-color: #7800ff;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #6700db;
        border-color: #6000cc;
    }

    .btn-primary.focus, .btn-primary:focus {
        color: #fff;
        background-color: #6000cc;
        border-color: #5800bc;
        box-shadow: 0 0 0 0.2rem rgba(120, 0, 255, 0.5);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #7800ff;
        border-color: #7800ff;
    }

    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #6000cc;
        border-color: #5800bc;
    }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(120, 0, 255, 0.5);
        }

.btn-outline-primary {
    color: #7800ff;
    background-color: transparent;
    border-color: #7800ff;
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: #7800ff;
        border-color: #7800ff;
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(120, 0, 255, 0.5);
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #7800ff;
        background-color: transparent;
    }

    .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: #7800ff;
        border-color: #7800ff;
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(120, 0, 255, 0.5);
        }

.list-group-item-primary {
    color: #3e0084;
    background-color: #d9b7ff;
}

    .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
        color: #3e0084;
        background-color: #cb9eff;
    }

    .list-group-item-primary.list-group-item-action.active {
        color: #fff;
        background-color: #3e0084;
        border-color: #3e0084;
    }

/*
.table-primary, .table-primary > th, .table-primary > td {
    background-color: #d9b7ff;
}
*/

.table-hover .table-primary:hover {
    background-color: #cb9eff;
}

    .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th {
        background-color: #cb9eff;
    }

.text-primary {
    color: #7800ff !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: #6000cc !important;
}

/*------------------------------------
 - COLOR info
 ------------------------------------*/
.alert-info {
    color: #004085;
    background-color: #cce4ff;
    border-color: #b7daff;
}

    .alert-info hr {
        border-top-color: #9eccff;
    }

    .alert-info .alert-link {
        color: #002751;
    }

.badge-info {
    color: #fff;
    background-color: #007bff;
}

    .badge-info[href]:hover, .badge-info[href]:focus {
        color: #fff;
        background-color: #0062cc;
    }

.bg-info {
    background-color: #007bff !important;
}

a.bg-info:hover, a.bg-info:focus, button.bg-info:hover, button.bg-info:focus {
    background-color: #0062cc !important;
}

.border-info {
    border-color: #007bff !important;
}

.btn-info {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

    .btn-info:hover {
        color: #fff;
        background-color: #0069db;
        border-color: #0062cc;
    }

    .btn-info:focus, .btn-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-info.focus, .btn-info:focus {
        color: #fff;
        background-color: #007bff;
        border-color: #80bdff;
        box-shadow: 0 0 0 .2rem rgba(58, 176, 195, .5);
    }

    .btn-info.disabled, .btn-info:disabled {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
        color: #fff;
        background-color: #0062cc;
        border-color: #005bbc;
    }

        .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

.btn-outline-info {
    color: #007bff;
    background-color: transparent;
    border-color: #007bff;
}

    .btn-outline-info:hover {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-outline-info:focus, .btn-outline-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        color: #007bff;
        background-color: transparent;
    }

    .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

        .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

.list-group-item-info {
    color: #003f84;
    background-color: #b7daff;
}

    .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
        color: #003f84;
        background-color: #9eccff;
    }

    .list-group-item-info.list-group-item-action.active {
        color: #fff;
        background-color: #003f84;
        border-color: #003f84;
    }

.table-info, .table-info > th, .table-info > td {
    background-color: #b7daff;
}

.table-hover .table-info:hover {
    background-color: #9eccff;
}

    .table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
        background-color: #9eccff;
    }

.text-info {
    color: #007bff !important;
}

a.text-info:hover, a.text-info:focus {
    color: #0062cc !important;
}

/*------------------------------------
 - Button-Secondary
 ------------------------------------*/
.btn-secondary {
    color: lightgray;
}

/*------------------------------------
 - isLoading Overlay
 ------------------------------------*/
.main-content-overlay-container {
    position: relative;
    min-height: 400px; /* or whatever minimum you want */
}

.component-content-overlay-container {
    position: relative;
    min-height: 100px; /* or whatever minimum you want */
}

.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/*GLOBAL*/
/* CSS to highlight the link */
.highlighted {
    background-color: #d9b7ff !important; /* Light gray background */
    transition: background-color 0.7s ease; /* Smooth transition */
}

/*to insure all tables that use fixed header are 600px high*/
.table-fixed-header {
    overflow-y: auto;
    height: 600px !important;
    max-height: 600px !important;
}


/*ADMIN SERVICE CALENDAR :: APPOINTMENT CREATE MODAL*/
.appointmentCreate-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.appointmentCreate-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 700px;
}

    .appointmentCreate-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        /* height: 63.5vh; Custom height must be set to height of content*/
        height: 568px; /* Set a default height to prevent content overflow before Blazor can set the correct height */
        overflow-y: auto;
        background-color: white;
        margin-top: 0px;
        border-radius: 10px; /* spoof as header */
    }

/*ADMIN SERVICE CALENDAR :: WORK ORDER MODAL*/
.workOrderCreate-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.workOrderCreate-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 700px;
}

    .workOrderCreate-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        /*height: 72.5vh;  Custom height must be set to height of content*/
        height: 643px; /* Set a default height to prevent content overflow before Blazor can set the correct height */
        overflow-y: auto;
        background-color: white;
        margin-top: 0px;
        border-radius: 10px; /* spoof as header */
    }

/*ADMIN SERVICE CALENDAR :: TASK MODAL*/
.taskCreate-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.taskCreate-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 700px;
}

    .taskCreate-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        /*height: 61vh;  Custom height must be set to height of content*/
        height: 545px; /* Set a default height to prevent content overflow before Blazor can set the correct height */
        overflow-y: auto;
        background-color: white;
        margin-top: 0px;
        border-radius: 10px; /* spoof as header */
    }

/*ADMIN SERVICE CALENDAR :: NOTE MODAL*/
.noteCreate-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.noteCreate-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 700px;
    /*height: 75%;
            margin-top: 20px;*/
}

    .noteCreate-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        /*height: 51.5vh;  Custom height must be set to height of content*/
        height: 482px; /* Set a default height to prevent content overflow before Blazor can set the correct height */
        overflow-y: auto;
        background-color: white;
        margin-top: 0px;
        border-radius: 10px; /* spoof as header */
    }

/*ADMIN SERVICE CALENDAR :: CLOSE SLOT MODAL*/
.noteClose-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.noteClose-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 700px;
    /*height: 75%;
            margin-top: 20px;*/
}

    .noteClose-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        /*height: 42.5vh;  Custom height must be set to height of content*/
        height: 388px; /* Set a default height to prevent content overflow before Blazor can set the correct height */
        overflow-y: auto;
        background-color: white;
        margin-top: 0px;
        border-radius: 10px; /* spoof as header */
    }

/*SERVICE > AppointmentRoutingComponent :: OPEN IMAGE UPLOAD MODAL*/
.appointmentRouting-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.appointmentRouting-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 99%;
    height: 825px;
    margin-top: 20px;
}

    .appointmentRouting-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .appointmentRouting-blazored-modal .blazored-modal-header {
        background-color: #28a745;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .appointmentRouting-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .appointmentRouting-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*ACCOUNT MODAL*/
.account-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.account-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #001529;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.4rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 90%;
    height: 95%;
    margin-top: 20px;
}

    .account-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

        /* Force Blazorise layout inside the account modal to use modal height, not viewport; OPUS 4.6; 2.21.26 */
        .account-blazored-modal .blazored-modal-content .b-layout-root,
        .account-blazored-modal .blazored-modal-content .b-layout,
        .account-blazored-modal .blazored-modal-content aside,
        .account-blazored-modal .blazored-modal-content nav {
            height: 100% !important;
            min-height: auto !important;
            max-height: 100% !important;
        }

    .account-blazored-modal .blazored-modal-header {
        background-color: #007bff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .account-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .account-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*APP SETTINGS MODAL*/
.appSettings-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.appSettings-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 70%;
    height: 95%;
    margin-top: 20px;
}

    .appSettings-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .appSettings-blazored-modal .blazored-modal-header {
        background-color: #C0C0C0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .appSettings-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .appSettings-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*USER DIRECT EMAIL MODAL*/
.userEmailDirect-blazored-modal .blazored-modal-center {
    align-items: normal;
}

.userEmailDirect-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 50%;
    height: 95%;
    margin-top: 20px;
}

    .userEmailDirect-blazored-modal .blazored-modal-content {
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll;
        background-color: white;
    }

    .userEmailDirect-blazored-modal .blazored-modal-header {
        background-color: #dc3545;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .userEmailDirect-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre;
    }

    .userEmailDirect-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*USER EDIT MODAL*/
.userEdit-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.userEdit-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 50%;
    height: 95%;
    margin-top: 20px;
}

    .userEdit-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .userEdit-blazored-modal .blazored-modal-header {
        background-color: #dc3545;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .userEdit-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .userEdit-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*BILLING > InvoiceEstimateDialog :: OPEN IMAGE UPLOAD MODAL*/
.openImage-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.openImage-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 99%;
    height: 99%;
    margin-top: 20px;
}

    .openImage-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .openImage-blazored-modal .blazored-modal-header {
        background-color: #3e0084;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .openImage-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .openImage-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*BILLING :: INVOICE/ESTIMATE MODAL*/
.invoiceEstimate-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.invoiceEstimate-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 80%;
    height: 75%;
    margin-top: 20px;
}

    .invoiceEstimate-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .invoiceEstimate-blazored-modal .blazored-modal-header {
        background-color: #3e0084;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .invoiceEstimate-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .invoiceEstimate-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*SERVICE :: WORK ORDER DETAIL MODAL (opened from Billing Audit page) */
.workOrderDetail-blazored-modal .blazored-modal-center {
    align-items: normal;
}

.workOrderDetail-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 70%;
    height: 85%;
    margin-top: 20px;
}

    .workOrderDetail-blazored-modal .blazored-modal-content {
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll;
        background-color: white;
    }

    .workOrderDetail-blazored-modal .blazored-modal-header {
        background-color: #155724;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .workOrderDetail-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre;
    }

    .workOrderDetail-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/* ======================================================================
   AUDIT STEPS INDICATOR (Warning/Orange color scheme)
   Reusable display-only pipeline — used in AuditEditDialog,
   AuditReportDialog, and ServiceWorkOrderDetail.
   ====================================================================== */

/* All steps: non-interactive (display-only pipeline) */
.audit-steps-indicator .step-item {
    pointer-events: none;
}

    /* Unreachable steps: dimmed */
    .audit-steps-indicator .step-item:not(.step-completed):not(.step-active) .step-circle,
    .audit-steps-indicator .step-item:not(.step-completed):not(.step-active) .step-text {
        opacity: 0.5;
    }

    /* Default circle: muted border */
    .audit-steps-indicator .step-item .step-circle {
        color: #adb5bd;
        border-color: #adb5bd;
    }

/* Active step circle: solid orange */
.audit-steps-indicator .step-active .step-circle {
    color: #fff;
    background-color: #ff9800;
    border-color: #ff9800;
    border-radius: 6px;
}

/* Active step text: orange */
.audit-steps-indicator .step-active .step-text {
    color: #e65100;
}

/* Active step connector line: orange */
.audit-steps-indicator .step-active .step-circle::before {
    color: #ff9800;
}

/* Completed step connector line: orange */
.audit-steps-indicator .step-completed .step-circle::before {
    color: #ff9800;
}

/* Completed step circle: filled orange */
.audit-steps-indicator .step-completed .step-circle {
    color: #fff;
    background-color: #ff9800;
    border-color: #ff9800;
}

/* Completed step text: dark orange */
.audit-steps-indicator .step-completed .step-text {
    color: #e65100;
}

/*SYSTEM PROPERTIES :: SYSTEM AUDIT REPORT & EDIT MODAL */
.auditReportDialog-blazored-modal .blazored-modal-center {
    align-items: normal;
}

.auditReportDialog-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 80%;
    height: 85%;
    margin-top: 20px;
}

    .auditReportDialog-blazored-modal .blazored-modal-content {
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll;
        background-color: white;
    }

    .auditReportDialog-blazored-modal .blazored-modal-header {
        background-color: #F57C00;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .auditReportDialog-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre;
    }

    .auditReportDialog-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*BILLING :: ADD PARTS/SERVICE & ADD LABOR MODAL*/
.addPartsServiceTimeLabor-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

/*BILLING :: AUDIT PROPOSAL MODAL (customer-facing audit findings + approval) */
.auditProposalDialog-blazored-modal .blazored-modal-center {
    align-items: normal;
}

.auditProposalDialog-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 75%;
    height: 90%;
    margin-top: 20px;
}

    .auditProposalDialog-blazored-modal .blazored-modal-content {
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll;
        background-color: white;
    }

    .auditProposalDialog-blazored-modal .blazored-modal-header {
        background-color: #1b5e20;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .auditProposalDialog-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre;
    }

    .auditProposalDialog-blazored-modal .blazored-modal-close {
        color: #fff;
    }

.addPartsServiceTimeLabor-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 33%;
    height: 75%;
    margin-top: 20px;
}

    .addPartsServiceTimeLabor-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .addPartsServiceTimeLabor-blazored-modal .blazored-modal-header {
        background-color: #3e0084;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .addPartsServiceTimeLabor-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .addPartsServiceTimeLabor-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*APPOINTMENT MODAL*/
.appointment-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.appointment-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0px;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 45%;
    height: 65%;
    margin-top: 20px;
}

    .appointment-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
        padding: 10px;
    }

    .appointment-blazored-modal .blazored-modal-header {
        background-color: #218838;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .appointment-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .appointment-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*APPOINTMENT IMAGE MODAL*/
.appointment-image-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.appointment-image-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0px;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 95%;
    height: 95%;
    margin-top: 20px;
}

    .appointment-image-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
        padding: 10px;
    }

    .appointment-image-blazored-modal .blazored-modal-header {
        background-color: #218838;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .appointment-image-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .appointment-image-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*APPOINTMENT - USER :: SERVICEPAGE.RAZOR */
/* Custom styling for the file input; NOTE: Label text set by browser... */
#servicePageFilerPicker .custom-file-input {
    display: none; /* Hide the default input button */
}

    #servicePageFilerPicker .custom-file-input + label {
        cursor: pointer;
    }

/* #servicePageFilerPicker .custom-file-label::after {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222, 170, 12, .5);
}
 */

/* STEPS STYLING */
/* Completed and active steps: interactive */
#servicePage .step-success.step-completed .step-circle,
#servicePage .step-success.step-completed .step-text,
#servicePage .step-success.step-active .step-circle,
#servicePage .step-success.step-active .step-text {
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* Unreachable steps: non-interactive */
#servicePage .step-success:not(.step-completed):not(.step-active) {
    pointer-events: none;
}

    #servicePage .step-success:not(.step-completed):not(.step-active) .step-circle,
    #servicePage .step-success:not(.step-completed):not(.step-active) .step-text {
        opacity: 0.5;
    }

#servicePage .step-success.step-active .step-circle {
    border-radius: 6px;
}

    /* Highlight step circle and text on hover (completed and active only) */
    #servicePage .step-success.step-completed:hover .step-circle,
    #servicePage .step-success.step-completed .step-circle:hover,
    #servicePage .step-success.step-completed .step-text:hover ~ .step-circle,
    #servicePage .step-success.step-active:hover .step-circle,
    #servicePage .step-success.step-active .step-circle:hover,
    #servicePage .step-success.step-active .step-text:hover ~ .step-circle {
        background-color: #c3e6cb;
        border-radius: 6px;
        border-color: #155724;
        color: #155724;
    }

        /* Highlight text on hover (completed and active only) */
        #servicePage .step-success.step-completed:hover .step-text,
        #servicePage .step-success.step-completed .step-circle:hover + .step-text,
        #servicePage .step-success.step-completed .step-text:hover,
        #servicePage .step-success.step-active:hover .step-text,
        #servicePage .step-success.step-active .step-circle:hover + .step-text,
        #servicePage .step-success.step-active .step-text:hover {
            color: #155724;
        }

/* ACCOUNTSMANAGE (DATATABLE) */
#accountsManagePage .flatpickr-calendar.open {
    /* Position picker calendar so that it stays in the page */
    position: absolute;
    right: 55px;
    margin-top: 0px !important;
    width: unset;
}

#accountsManagePage .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#accountsManagePage .flatpickr-calendar:before,
#accountsManagePage .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

#accountsManagePage .input-group { /*Appointment picker text box*/
    width: 220px;
}

#accountsManagePage .custom-switch .custom-control-input.custom-control-input-md + .custom-control-label {
    padding-left: unset;
}

#accountsManagePage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #004085;
    color: #ffffff;
    border: 0px;
    padding: 7px;
}

#accountsManagePage .form-control:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255,.25);
}

#accountsManagePage .custom-select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255,.25);
}

/* SERVICEMANAGE (DATATABLE) */
#serviceManagePage .flatpickr-calendar.open {
    /* Position picker calendar so that it stays in the page */
    position: absolute;
    right: 55px;
    margin-top: 0px !important;
    width: unset;
}

#serviceManagePage .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#serviceManagePage .flatpickr-calendar:before,
#serviceManagePage .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

#serviceManagePage .input-group { /*Appointment picker text box*/
    width: 220px;
}

#serviceManagePage .custom-switch .custom-control-input.custom-control-input-md + .custom-control-label {
    padding-left: unset;
}

#serviceManagePage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #155724;
    color: #ffffff;
    border: 0px;
    padding: 7px;
}

#serviceManagePage .form-control:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69,.25);
}

#serviceManagePage .custom-select:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69,.25);
}

/* USERSMANAGE (DATATABLE) */
#usersManagePage .flatpickr-calendar.open {
    /* Position picker calendar so that it stays in the page */
    position: absolute;
    right: 55px;
    margin-top: 0px !important;
    width: unset;
}

#usersManagePage .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#usersManagePage .flatpickr-calendar:before,
#usersManagePage .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

#usersManagePage .input-group { /*Appointment picker text box*/
    width: 220px;
}

#usersManagePage .custom-switch .custom-control-input.custom-control-input-md + .custom-control-label {
    padding-left: unset;
}

#usersManagePage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #950606;
    color: #ffffff;
    border: 0px;
    padding: 7px;
}

#usersManagePage .form-control:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69,.25);
}

#usersManagePage .custom-select:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69,.25);
}

/* EMAIL MESSAGE LIST*/
#emailMessageListPage a {
    color: #dc3545;
}

    #emailMessageListPage a:hover {
        color: #721c24;
    }

#emailMessageListPage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #dc3545 !important;
    color: #fff;
}

/* BILLINGMANAGE (DATATABLE) */
#billingManagePage a {
    color: #7800ff
}

    #billingManagePage a:hover {
        color: #3e0084;
    }

#billingManagePage .flatpickr-calendar.open {
    /* Position picker calendar so that it stays in the page */
    position: absolute;
    right: 55px;
    margin-top: 0px !important;
    width: unset;
}

#billingManagePage .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#billingManagePage .flatpickr-calendar:before,
#billingManagePage .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

#billingManagePage .input-group { /*Appointment picker text box*/
    width: 220px;
}

#billingManagePage .custom-switch .custom-control-input.custom-control-input-md + .custom-control-label {
    padding-left: unset;
}

#billingManagePage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #7800ff;
    color: #ffffff;
    border: 0px;
    padding: 7px;
}

#billingManagePage .form-control:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

#billingManagePage .custom-select:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

/*
        .table-fixed-header .table thead tr th {
        border-top: none;
        position: sticky;
        z-index: 10;
        background-color: #fff !important;
    }
*/

/*BILLING*/
#billingPage a {
    color: #7800ff
}

    #billingPage a:hover {
        color: #3e0084;
    }

#billingPage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #7800ff;
    color: #fff;
}

#billingPage .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .1);
}

#billingPage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #7800ff;
    color: #f8f9fa;
}

#billingPage .table-fixed-header {
    overflow-y: auto;
    height: 400px !important;
    max-height: 400px !important;
}

#billingPage .credit-charge-icon-with-bg {
    display: inline-block;
    font-size: 24px; /* Adjust to icon size */
    background-color: #ffffff; /* Background color */
    border-radius: 50%; /* Optional: circular background */
    background-clip: content-box; /* Ensures background stays inside the icon */
    line-height: 0; /* Remove extra space around the icon */
    text-align: center; /* Center the icon horizontally */
    padding: 0px; /* Adjust padding to control background space */
    border: 0.5px solid #ffffff; /* Thin border around the icon */
}

#billingPage .credit-charge-icon-background {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px; /* Adjust this to fit the icon size */
    width: 22px; /* Adjust this to fit the icon size */
    border-radius: 50%; /* Optional: circular background */
    background-clip: content-box;
}

#billingPage .form-control:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

#billingPage .custom-select:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

/*BILLING > invoiceEstimateDialog
#invoiceEstimateDialog a {
    color: #7800ff
}*/

#invoiceEstimateDialog a:hover {
    color: #3e0084;
}

#invoiceEstimateDialog .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #7800ff;
    color: #fff;
}

/*Position picker calendar so that it stays in the modal page*/
#invoiceEstimateDialog .flatpickr-calendar.open {
    position: absolute;
    right: 0px;
    margin-top: -35px;
    width: unset;
}

#invoiceEstimateDialog .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#invoiceEstimateDialog .flatpickr-calendar:before, .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

#invoiceEstimateDialog .voided-background {
    background-color: red;
}

#invoiceEstimateDialog .form-control:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

#invoiceEstimateDialog .custom-select:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

/* BILLING > AddInvoiceImageDialog */
/* Custom styling for the file input */
#addInvoiceImageDialog .custom-file-input {
    display: none; /* Hide the default input button */
}

    #addInvoiceImageDialog .custom-file-input + label {
        cursor: pointer;
    }

/*
#addInvoiceImageDialog .custom-file-label::after {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222, 170, 12, .5);
}
*/
/* BILLING > AddTimeLaborDialog */
#addTimeLaborDialog .custom-switch .custom-control-input.custom-control-input-md + .custom-control-label { /* correction in order to 'bunch up' the text next to the 'display began & finished' switch. */
    line-height: 1rem;
}

#addTimeLaborDialog .flatpickr-calendar.open {
    /*Position picker calendar so that it stays in the modal page*/
    position: absolute;
    right: 0px;
    margin-top: 0px !important;
    width: unset;
}

#addTimeLaborDialog .flatpickr-calendar.arrowTop:before {
    border-bottom-color: #ced4da;
}

#addTimeLaborDialog .flatpickr-calendar:before, .flatpickr-calendar:after {
    left: unset;
    right: 22px;
}

/*This moves the time picker over the text box in order to make it apear that only the picker is there; result in text box shows 24hr results = no bueno.*/
#addTimeLaborDialog .flatpickr-calendar {
    width: 100%;
    margin-left: 0px;
}

    #addTimeLaborDialog .flatpickr-calendar.inline {
        margin-top: -32px;
    }

#addTimeLaborDialog .flatpickr-time input.flatpickr-hour {
    font-weight: normal;
}

#addTimeLaborDialog .form-control:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

#addTimeLaborDialog .custom-select:focus {
    border-color: #3e0084 !important;
    box-shadow: 0 0 0 .2rem rgba(62, 0, 132,.25);
}

/* SERVICE :: servicePage */
/*! CSS Used from: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css */
.calendar-scaled {
    /* transform: scale(0.67); /*Reduce size by 33% (67% of original size) */
    /* width: 149.25%; /*Adjust width to compensate for scaling (1 / 0.67 ˜ 1.4925) */
    /* height: 149.25%; /* Adjust height to compensate for scaling */
    transform: scale(1.0); /* Reduce size by 33% (67% of original size) */
    width: 100%; /* Adjust width to compensate for scaling (1 / 0.67 ˜ 1.4925) */
    height: 100%; /* Adjust height to compensate for scaling */
    transform-origin: top left; /* Scale from top-left corner */
    overflow: visible; /* Ensure content isn't clipped */
}

/* EMAIL SEND NOTIFICATION MODAL */
.emailSendNotification-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.emailSendNotification-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 33%;
    height: 65%;
    margin-top: 20px;
}

    .emailSendNotification-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .emailSendNotification-blazored-modal .blazored-modal-header {
        background-color: #dc3545;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .emailSendNotification-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .emailSendNotification-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/* APP SETTINGS TABS */
#appSettingsPage a {
    color: #6c757d
}

    #appSettingsPage a:hover {
        color: lightgray;
    }

#appSettingsPage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #6c757d !important;
    color: #fff;
}

/* EmailMessageList tabs inside AppSettings should stay red, not gray */
#appSettingsPage #emailMessageListPage a {
    color: #dc3545;
}

    #appSettingsPage #emailMessageListPage a:hover {
        color: #721c24;
    }

#appSettingsPage #emailMessageListPage .nav-pills .nav-link.active {
    background-color: #dc3545 !important;
    color: #fff;
}

/* ADMIN DASHBOARD — scale page content to improve element fit */
#adminDashboardPage {
    zoom: 90%;
}

/* ADMIN DASHBOARD — keep tooltip-wrapped badges inline with text */
#adminDashboardPage .b-tooltip {
    display: inline;
}

@media print {
    *, ::after, ::before {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    a, a:visited {
        text-decoration: underline;
    }

    p {
        orphans: 3;
        widows: 3;
    }
}

html {
    box-sizing: border-box;
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}

*, ::after, ::before {
    box-sizing: inherit;
}

header {
    display: block;
}
/*body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;}*/
h4, h5 {
    margin-top: 0;
    margin-bottom: .5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

small {
    font-size: 80%;
}

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
    text-decoration-skip-ink: auto;
}

    a:hover {
        color: #0056b3;
        text-decoration: underline;
    }

a {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

h4, h5 {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
/*h4{font-size:1.5rem;}*/
/*h5{font-size:1.25rem;}*/
.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.1;
}

small {
    font-size: 80%;
    font-weight: 400;
}

.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col, .col-1, .col-sm {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

@media (min-width:576px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
}

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-dark {
    background-color: #343a40 !important;
}

.border {
    border: 2px solid #e9ecef !important;
}

.border-top-0 {
    border-top: 0 !important;
}

.border-right-0 {
    border-right: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-left-0 {
    border-left: 0 !important;
}

/*.d-none {
    display: none !important;
}*/

@media (min-width:576px) {
    .d-sm-none {
        display: none !important;
    }

    .d-sm-inline-block {
        display: inline-block !important;
    }

    .d-sm-flex {
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.w-100 {
    width: 100% !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.pd-1 {
    padding: .25rem !important;
    margin-left: -1.9rem;
    margin-top: .25rem;
}

.pd-2 {
    padding: .5rem !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-center {
    text-align: center !important;
}

.text-white {
    color: #fff !important;
}

.text-muted {
    color: #868e96 !important;
}
/*! CSS Used from: Embedded */
@media (max-width:575px) {
    /*.display-4{font-size:1.5rem;}*/
    .day {
        height: 40vw;
    }
        /*.day{height:14.2857vw;}*/
        .day h5 {
            background-color: #f8f9fa;
            padding: 3px 5px 5px;
            margin: -8px -8px 8px -8px;
        }

    .date {
        padding-left: 4px;
    }
}

@media (min-width: 576px) {
    .day {
        height: 7vw;
    }
    /*.day{height:14.2857vw;}*/
}

.time-slot .btn-9am-12pm {
    background-color: #e5de44;
    color: #585a5b;
    font-weight: 600;
    border-color: #e5de44;
    margin-top: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.time-slot .btn-12pm-3pm {
    background-color: #f18e26;
    color: #585a5b;
    font-weight: 600;
    border-color: #f18e26;
    margin-top: 4px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.time-slot .btn-3pm-6pm {
    background-color: #87ceff;
    color: #585a5b;
    font-weight: 600;
    border-color: #87ceff;
    margin-top: 5px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

#servicePage .btn-xs {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1;
    border-radius: 0.2rem; /* Adjust based on your design preference */
    width: 100%;
}

#servicePage a {
    color: #155724
}

    #servicePage a:hover {
        color: limegreen;
    }

#servicePage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #155724;
    color: #fff;
}


#servicePage .step-success .step-circle {
    color: #adb5bd;
    border-color: #adb5bd;
}

#servicePage .step-success.step-active .step-circle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

#servicePage .step-success.step-active .step-text {
    color: #28a745;
}

#servicePage .step-active .step-circle::before {
    color: #28a745;
}

#servicePage .table-fixed-header .table thead:not(.table-thead-theme) th {
    color: #fff !important;
    background-color: #218838 !important;
}

#servicePage .form-control:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69,.25);
}

#servicePage .custom-select:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 .2rem rgba(40, 167, 69,.25);
}

/*ADMIN SERVICE CALENDAR*/
.addApptWOButton {
    color: #28a745;
    background-color: transparent;
    border: 1px solid #28a745;
    cursor: pointer;
}

    .addApptWOButton:hover {
        font-weight: 500;
        color: #fff;
        background-color: #155724;
        border: 1px solid #28a745;
    }

    .addApptWOButton, .addApptWOButton:focus {
        box-shadow: 0 0 0 0;
    }

.addTaskNoteButton {
    color: grey;
    background-color: transparent;
    border: 1px solid grey;
    cursor: pointer;
}

    .addTaskNoteButton:hover {
        font-weight: 500;
        color: #fff;
        background-color: #5a6268;
        border: 1px solid grey;
    }

    .addTaskNoteButton, .addTaskNoteButton:focus {
        box-shadow: 0 0 0 0;
    }

.closeSlotButton {
    color: #dc3545;
    background-color: transparent;
    border: 1px solid #dc3545;
    cursor: pointer;
}

    .closeSlotButton:hover {
        font-weight: 500;
        color: #fff;
        background-color: #c82333;
        border: 1px solid #bd2130;
    }

    .closeSlotButton, .closeSlotButton:focus {
        box-shadow: 0 0 0 0;
    }

.border-highlight-incomplete {
    border: 1px dashed #EF6C00;
    padding: 0.1em 0.2em;
    color: #EF6C00;
    font-weight: 500;
    font-size: 11px;
}

.border-highlight-missed {
    border: 1px dashed deeppink;
    padding: 0.1em 0.2em;
    color: deeppink;
    font-weight: 500;
    font-size: 11px;
}

/* SYSTEM PROPERTIES */
#systemPropertiesPage .table-fixed-header .table thead:not(.table-thead-theme) th {
    background: #F57C00;
    color: #f8f9fa;
}

#systemPropertiesPage .table-fixed-header {
    overflow-y: auto;
    /*height: 400px !important;*/
    /*max-height: 400px !important;*/
}

#systemPropertiesPage a {
    color: #F57C00;
}

    #systemPropertiesPage a:hover {
        color: #D84315;
    }

#systemPropertiesPage .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #F57C00;
    color: #fff;
}

#systemPropertiesPage .form-control:focus {
    border-color: #F57C00 !important;
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0,.25);
}

#systemPropertiesPage .custom-select:focus {
    border-color: #F57C00 !important;
    box-shadow: 0 0 0 .2rem rgba(245, 124, 0,.25);
}

/*SYSTEM PROPERTIES :: ADD PARTS/SERVICE & ADD LABOR MODAL*/
.systemPropertiesUploadModal-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.systemPropertiesUploadModal-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 33%;
    height: 65%;
    margin-top: 20px;
}

    .systemPropertiesUploadModal-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .systemPropertiesUploadModal-blazored-modal .blazored-modal-header {
        background-color: #F57C00;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .systemPropertiesUploadModal-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .systemPropertiesUploadModal-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/*BILLING > InvoiceEstimateDialog :: OPEN IMAGE UPLOAD MODAL*/
.systemPropertiesOpenImage-blazored-modal .blazored-modal-center { /*Keeps modals top edge at the top of the page; orig = center */
    align-items: normal;
}

.systemPropertiesOpenImage-blazored-modal {
    display: flex;
    z-index: 102;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #fff;
    padding: 0;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
    width: 99%;
    height: 99%;
    margin-top: 20px;
}

    .systemPropertiesOpenImage-blazored-modal .blazored-modal-content { /* Needed for scrolling in modal while in mobile sized screen */
        height: 95%; /* % of parent shell, not viewport — immune to global zoom */
        overflow-y: scroll; /*orig = hidden; side menu would not display/scroll when closed... */
        background-color: white;
    }

    .systemPropertiesOpenImage-blazored-modal .blazored-modal-header {
        background-color: #F57C00;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: #ffffff;
        padding: 10px;
    }

    .systemPropertiesOpenImage-blazored-modal .blazored-modal-title {
        margin-bottom: 0;
        font-size: 20px;
        white-space: pre; /*Allows for multiple lines in modal header/title*/
    }

    .systemPropertiesOpenImage-blazored-modal .blazored-modal-close {
        color: #fff;
    }

/* Small-screen fix: prevent snackbar stack from blocking the page */
@media (max-width: 575px) {
    .snackbar-stack,
    .snackbar-stack-bottom {
        pointer-events: none !important;
        z-index: 0 !important;
    }

    .snackbar {
        pointer-events: auto !important;
    }
}

/* ============================================================
   RESPONSIVE / MOBILE UTILITIES (reusable across pages)
   ============================================================ */

/* --- Base styles (all screen sizes) --- */
.page-card {
    margin-top: 40px;
}

.page-header-alert {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: -30px;
}

    /* Page heading icon (Material Icons / Symbols in page header alerts) */
    .page-header-alert .material-icons,
    .page-header-alert .material-symbols-outlined {
        font-size: 2rem;
        vertical-align: bottom;
    }

/* Card titles — scale down from default h5/h6 to match header sizing */
.page-card .card-title {
    font-size: 1rem;
}

.tab-panel-content {
    border: solid 1px #007bff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 0px;
}

/* Green border variant for service pages */
.tab-panel-content-service {
    border-color: #155724;
}

/* Purple border variant for billing pages */
.tab-panel-content-billing {
    border-color: #673AB7;
}

/* Orange border variant for system properties pages */
.tab-panel-content-system {
    border-color: #F57C00;
}

/*------------------------------------
 - DataGrid Filter Highlight
 ------------------------------------*/
mark {
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 2px;
}

.btn-action-row {
    margin-top: 30px;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.active-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
}

/* Week navigation bar (Prev / date range / Next) */
.week-nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

/* Floating alert banner inside cards (step review alerts) */
.step-alert-banner {
    margin-top: -30px;
    margin-left: 30px;
    margin-right: 30px;
}

/* --- Small screens (< 768px) --- */
@media (max-width: 767.98px) {
    /* Force all buttons to extra-small (btn-xs) sizing on mobile */
    .btn {
        padding: 0.15rem 0.35rem;
        font-size: 0.75rem;
        line-height: 1.4;
        border-radius: 0.15rem;
    }

    /* Shrink pill tab links to match extra-small button sizing on mobile */
    .nav-pills .nav-link {
        padding: 0.15rem 0.35rem;
        font-size: 0.75rem;
        line-height: 1.4;
        border-radius: 0.15rem;
    }

        /* Scale Material Icons & Symbols inside buttons and nav links to match reduced text */
        .btn .material-icons,
        .btn .material-symbols-outlined,
        .nav-pills .nav-link .material-icons,
        .nav-pills .nav-link .material-symbols-outlined {
            font-size: 1rem !important;
            vertical-align: middle;
        }

    .page-card {
        margin-top: 12px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .page-header-alert {
        margin-left: 6px;
        margin-right: 6px;
        margin-top: -20px;
    }

        .page-header-alert h2 {
            font-size: 1.25rem;
        }

        .page-header-alert .material-icons,
        .page-header-alert .material-symbols-outlined {
            font-size: 1.25rem;
        }

    /* Blazorise Fields stack vertically on mobile */
    .page-card .fields > .field {
        flex: 0 0 100%;
    }

    .tab-panel-content {
        padding: 6px;
        border-radius: 6px;
    }

    .btn-action-row {
        margin-top: 16px;
        flex-direction: column;
        align-items: stretch;
    }

        .btn-action-row .btn {
            width: 100%;
        }

    /* Reduce card body padding */
    .card-body {
        padding: 0.5rem;
    }

    /* Reduce card internal padding */
    .page-card .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Blazorise Container adds 15px padding per side — reclaim on mobile */
    .page-card .container,
    .page-card .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Bootstrap row gutter — tighten on mobile */
    .page-card .row {
        margin-left: -4px;
        margin-right: -4px;
    }

        .page-card .row > [class*="col"] {
            padding-left: 4px;
            padding-right: 4px;
        }

    /* Fields stack spacing */
    .b-is-desktop .col,
    .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .memo-edit-responsive {
        width: 100% !important;
    }

    /* Week nav stacks vertically */
    .week-nav-bar {
        flex-direction: column;
        gap: 6px;
    }

    /* Step review alert banners tighten */
    .step-alert-banner {
        margin-left: 4px;
        margin-right: 4px;
        margin-top: -20px;
    }

    /* Alerts — reduce internal padding on mobile */
    .page-card .alert {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.4rem 0.5rem;
    }

    /* List group items — tighter on mobile */
    #servicePage .list-group-item {
        padding: 0.4rem 0.5rem;
    }

    /* Blazorise Margin.Is4 (m-4) is 1.5rem — reduce on mobile inside service page */
    #servicePage .m-4 {
        margin: 0.5rem !important;
    }

    /* Card decks stack vertically on mobile */
    .page-card .card-deck {
        flex-direction: column;
    }

        .page-card .card-deck > .card {
            flex: 0 0 auto;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 1rem;
        }

    /* -------------------------------------------------------
       GLOBAL MOBILE TYPOGRAPHY SCALING
       Scales down headings, alerts, and nav text consistently
       across all pages that use the shared layout classes.
       ------------------------------------------------------- */

    /* Scale all headings inside page content areas */
    .page-card h1 {
        font-size: 1.4rem;
    }

    .page-card h2 {
        font-size: 1.2rem;
    }

    .page-card h3 {
        font-size: 1.1rem;
    }

    .page-card h4 {
        font-size: 1rem !important;
    }

    .page-card h5 {
        font-size: 0.9rem;
    }

    .page-card h6 {
        font-size: 0.8rem;
    }

    /* Blazorise AlertMessage renders as <h4 class="alert-heading"> */
    .page-card .alert-heading {
        font-size: 0.85rem !important;
    }

    /* Dummy/plain alert content (e.g., <strong> inside .alert) */
    .page-card .alert strong {
        font-size: 0.85rem;
    }

    /* Week nav bar date range text (Blazorise <Text> renders as <span>) */
    .week-nav-bar span,
    .week-nav-bar p {
        font-size: 0.9rem !important;
    }

    /* Step labels — shrink and allow wrapping on mobile */
    .page-card .step-text {
        font-size: 0.6rem;
        max-width: 55px;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 1.2;
    }

    /* Step circles — shrink to fit 4 steps on mobile */
    .page-card .step-circle {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
        font-size: 0.65rem !important;
        line-height: 1.5rem !important;
    }

        /* Step markers (custom icons like the flag) */
        .page-card .step-circle .icon {
            font-size: 0.65rem !important;
        }

    /* Steps navigation container — prevent overflow */
    .page-card .b-steps .steps-navigation,
    .page-card .b-steps .step-navigation-part {
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* Step container — shrink from default 5rem to fit mobile */
    .page-card .step-container {
        width: 3.5rem !important;
        min-width: 3.5rem !important;
        max-width: 3.5rem !important;
        padding-right: 0.25rem !important;
    }

    /* Step connector lines — recalculate to match shrunk container */
    .page-card .step-circle::before {
        width: calc(3.5rem + 0.25rem - 1.5rem) !important;
    }

    /* Steps wrapper — prevent scrollbar */
    .page-card .steps {
        overflow-x: hidden !important;
    }

    /* Card titles inside page cards */
    .page-card .card-title {
        font-size: 0.85rem;
    }

    /* Step 3: Navigation buttons stack vertically on mobile */
    #servicePage .step3-nav-buttons {
        flex-direction: column;
        gap: 8px;
    }

        #servicePage .step3-nav-buttons .btn {
            width: 100%;
        }

    /* Step 4: Card toggle buttons (DETAILS/NOTE/IMAGE) tighten on mobile */
    #servicePage .step4-card-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

        #servicePage .step4-card-buttons .btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

    /* Step 4: Instructional text shrinks on mobile */
    #servicePage .step4-instructions {
        font-size: 0.8rem;
        line-height: 1.35;
    }

        #servicePage .step4-instructions h5 {
            font-size: 0.85rem;
        }

        #servicePage .step4-instructions ul {
            padding-left: 1.2rem;
            margin-bottom: 0.5rem;
        }

        #servicePage .step4-instructions li {
            margin-bottom: 0.2rem;
        }

    /* Card footer padding — tighten on mobile */
    .page-card .card-footer {
        padding: 0.4rem 0.5rem;
    }

    /* Blazorise CardBody shadow wrapper — remove extra side padding */
    .page-card > .card-body {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Blazored Modals — full width on mobile */
    .blazored-modal-center > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

        .blazored-modal-center > div > .blazored-modal-header {
            border-radius: 0 !important;
        }
}

/* --- Medium screens (768px – 991px) --- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .page-card {
        margin-top: 24px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .page-header-alert {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: -25px;
    }

    .tab-panel-content {
        padding: 14px;
    }

    .step-alert-banner {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: -25px;
    }

    .page-header-alert .material-icons,
    .page-header-alert .material-symbols-outlined {
        font-size: 1.5rem;
    }

    .page-header-alert h2 {
        font-size: 1.5rem;
    }

    .page-card .card-title {
        font-size: 1rem;
    }

    /* Blazorise Fields stack vertically on tablets */
    .page-card .fields > .field {
        flex: 0 0 100%;
    }

    /* Card decks stack vertically on tablets */
    .page-card .card-deck {
        flex-direction: column;
    }

        .page-card .card-deck > .card {
            flex: 0 0 auto;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 1rem;
        }

    /* Service page override: 2 per row on tablets */
    #servicePage .card-deck {
        flex-direction: row;
        flex-wrap: wrap;
    }

        #servicePage .card-deck > .card {
            flex: 0 0 calc(50% - 1rem);
            margin-bottom: 1rem;
        }

    /* TABLET TYPOGRAPHY SCALING */
    .page-card h4 {
        font-size: 1.2rem;
    }

    .page-card h5 {
        font-size: 1.05rem;
    }

    .page-card .alert-heading,
    .page-card .alert strong {
        font-size: 0.9rem;
    }
}

/*------------------------------------
 - Blazorise Tooltip (wider for email lists)
 - NOTE: Blazorise 1.8.x uses Tippy.js, which
 -   renders .tippy-box as a portal on <body>.
 -   Tippy sets max-width inline (350px default),
 -   so !important is required to override it.
 ------------------------------------*/
.tippy-box[data-theme~=blazorise] {
    max-width: 500px !important;
    text-align: left;
}

    .tippy-box[data-theme~=blazorise] .tippy-content {
        white-space: pre-line;
        font-size: 0.78rem;
        padding: 8px 12px;
    }

/*------------------------------------
 - Badge-style square button (UserButtonBadge,
 -   AccountButtonBadge, etc.). Uses .btn prefix
 -   to match Blazorise specificity and win over
 -   BarDropdownMenu's width:100% rule.
 ------------------------------------*/
.btn.btn-badge-square {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-indent: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Neutralize Blazorise bar-dropdown margin on icons inside badge buttons */
.b-bar-dropdown-item .btn-badge-square i {
    margin-right: 0 !important;
}

/* ============================================================
   SIDEBAR NOTIFICATION BADGE
   Keeps the outstanding-invoice pill visible when the vertical
   bar collapses to icon-only (BarCollapseMode.Small).
   ============================================================ */
.b-layout-sider-content .b-bar-link:has(.badge) {
    position: relative;
    overflow: visible !important;
}

.b-layout-sider-content .b-bar-item:has(.badge) {
    overflow: visible !important;
}

.b-layout-sider-content .b-bar-link .badge {
    /* Override Blazorise collapse-hide on non-icon children */
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    /* Notification-style overlay on the icon */
    position: absolute !important;
    top: 0;
    left: 22px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2px 5px !important;
    pointer-events: none;
    z-index: 1;
}

/*------------------------------------
 - DataGrid Responsive: Hide column header filters at mobile breakpoints
 ------------------------------------*/
@media (max-width: 1024px) {
    .table thead tr:nth-child(2) {
        display: none !important;
    }

    /* Hide RESET FILTERS button when column filters are hidden */
    .btn-reset-filters {
        display: none !important;
    }

    /* Force mobile filter panel visible (Bootstrap d-lg-none hides it above 992px) */
    .d-lg-none {
        display: block !important;
    }

    /* Reduce DataGrid font size and cell padding at mobile breakpoints */
    .b-table .table td,
    .b-table .table th,
    .table-responsive .table td,
    .table-responsive .table th,
    .table td,
    .table th {
        font-size: 0.75rem !important;
        padding: 4px 6px !important;
    }
}

/* ServiceManageWeek: day column borders and padding — all screen sizes */
.week-days-scroll-wrapper > div {
    border: 1px solid #e9ecef;
    padding: 10px;
    box-sizing: border-box;
}

/* ServiceManageWeek: desktop — wrapper spans full grid and mirrors 7-column layout */
@media (min-width: 1401px) {
    .week-header-wrapper {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .week-days-scroll-wrapper {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ServiceManageWeek: horizontal scroll on tablet, stack vertically on mobile */
@media (max-width: 1400px) {
    calendarSection {
        display: block !important;
        width: 100%;
    }

    .week-header-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    calendarSection #item1,
    calendarSection #item2,
    calendarSection #item3 {
        display: block;
        text-align: center;
    }

    .week-days-scroll-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        gap: 0;
    }

    .week-days-scroll-wrapper > div {
        min-width: 160px;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .week-days-scroll-wrapper > div:last-child {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .week-days-scroll-wrapper {
        flex-direction: column !important;
        overflow-x: visible !important;
    }

    .week-days-scroll-wrapper > div {
        min-width: unset !important;
        width: 100%;
    }
}