.ccs-outline {
    outline: 1px solid #9e9e9e !important; /* Use your preferred color */
    outline-offset: 0px;
}

.CSS_table-container {    
    overflow-x: auto;
    overflow-y: auto;    
    position: relative;
    margin-bottom: 40px;
}

    /* Enhanced scrollbar visibility for WebKit browsers (Chrome, Safari, Edge) */
    .CSS_table-container::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .CSS_table-container::-webkit-scrollbar-track {
        background: #e3f2fd;
        border-radius: 0;
    }

    .CSS_table-container::-webkit-scrollbar-thumb {
        background: #29aae2;
        border-radius: 6px;
        border: 2px solid #e3f2fd;
    }

        .CSS_table-container::-webkit-scrollbar-thumb:hover {
            background: #1565c0;
        }

    .CSS_table-container::-webkit-scrollbar-corner {
        background: #e3f2fd;
    }

/* For Firefox */
.CSS_table-container {
    scrollbar-width: auto;
    scrollbar-color: #29aae2 #e3f2fd;
}

.CSS_data-table {
    
    border-collapse: collapse;
    
    margin-bottom: 0;
    table-layout: fixed;
}

    .CSS_data-table thead {
        position: sticky;
        top: 0;
        background-color: #29aae2;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .CSS_data-table th {
        padding: 12px 8px;
        text-align: left;
        font-weight: 600;
        border-bottom: 2px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        white-space: nowrap;
        background-color: #29aae2;
        color: white;
        font-size: 14px;
    }

    .CSS_data-table td {
        padding: 8px;
        border-bottom: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        white-space: nowrap;
        font-size: 14px;
    }

/* Striped rows */
.CSS_data-table tbody tr:nth-child(odd) {
    background-color: #fafafa;
}

.CSS_data-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Hover effect */
.CSS_table-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.CSS_table-row:hover {
    background-color: #e3f2fd !important;
}

/* Dense styling */
.CSS_table-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    font-size: 13px;
    min-width: 120px;
}

.CSS_table-input:focus {
    outline: none;
    border-color: #29aae2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.CSS_table-input:disabled {
    background-color: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
}

.CSS_table-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    min-width: 120px;
}

    .CSS_table-select:focus {
        outline: none;
        border-color: #1976d2;
        box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    }

    .CSS_table-select:disabled {
        background-color: #f5f5f5;
        color: #9e9e9e;
        cursor: not-allowed;
    }

.CSS_checkbox-cell {
    text-align: center;
    min-width: 80px;
}

    .CSS_checkbox-cell input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #29aae2;
        /* For better cross-browser support */
        appearance: none;
        -webkit-appearance: none;
        border: 2px solid #c4c4c4;
        border-radius: 3px;
        background-color: white;
        position: relative;
        transition: all 0.2s;
    }

        .CSS_checkbox-cell input[type="checkbox"]:checked {
            background-color: #29aae2;
            border-color: #29aae2;
        }

            .CSS_checkbox-cell input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                left: 5px;
                top: 2px;
                width: 4px;
                height: 8px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        .CSS_checkbox-cell input[type="checkbox"]:disabled {
            cursor: not-allowed;
            opacity: 1;
            background-color: #f5f5f5;
            border-color: #e0e0e0;
        }

        .CSS_checkbox-cell input[type="checkbox"]:checked:disabled {
            background-color: #9e9e9e;
            border-color: #9e9e9e;
        }

            .CSS_checkbox-cell input[type="checkbox"]:checked:disabled::after {
                border-color: white;
            }

/*Form Styles*/
.selected-row {
    background-color: #e3f2fd !important;
    font-weight: 600;
}

.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    border-bottom: 2px solid #dee2e6 !important;
}

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

/* Custom Tab Styling */
.nav-tabs .custom-tab-link {
    border: none !important;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    white-space: nowrap;
}

.nav-tabs .custom-tab-active {
    background-color: #29aae2 !important;
    color: white !important;
    border: none !important;
}

    .nav-tabs .custom-tab-active:hover,
    .nav-tabs .custom-tab-active:focus {
        background-color: #1e8bc3 !important;
        color: white !important;
        border: none !important;
    }

.nav-tabs .custom-tab-inactive {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
}

    .nav-tabs .custom-tab-inactive:hover {
        background-color: #e9ecef !important;
        color: #212529 !important;
    }

.nav-tabs {
    border-bottom: 2px solid #dee2e6 !important;
}

/* This is needed due to a MudBlazor bug with Virtualize
        https://github.com/MudBlazor/MudBlazor/issues/6545
    */
div.mud-main-content #removeMe {
    display: none;
}


/* Selected row styling for MudTable */
.selected-row {
    background-color: var(--mud-palette-primary) !important;
}

    .selected-row td, .selected-row .mud-input, .selected-row .mud-input-slot, .selected-row .mud-button-root {
        color: white !important;
    }

.mud-table-head th,
.mud-table-head td {
    white-space: nowrap;
}

    .mud-table-head th {
        font-weight: 600;
        border-bottom: 2px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        background-color: #29aae2;
        color: white;
    }

/* Densest styling for compact input fields and tables */
.densest {
    margin: 0 !important;
}

    .densest .mud-input-control {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .densest .mud-icon-button {
        padding: 6px;
    }

        .densest .mud-input-control .mud-typography.mud-typography-body1 {
            font-size: 0.875rem;
        }

    .densest .mud-input {
        padding: 4px 8px !important;
    }

    .densest .mud-input-slot {
        padding: 0 !important;
    }

    .densest .mud-input-label-outlined {
        transform: translate(14px, 5px) scale(1);
    }

    .densest.mud-tabs .mud-tabs-tabbar-inner, .densest .mud-tab {
        min-height: 36px;
        text-transform: none;
    }

    .densest.mud-tabs .mud-tab-slider.mud-tab-slider-horizontal {
        bottom: 4px;
    }

    .densest .mud-table-head .mud-button-root {
        color: white;
    }

    .densest * .mud-table-row .mud-table-cell {
        padding: 0px 0px 0px 0px;
        padding-inline-start: 12px;
        padding-inline-end: 12px;
    }

    .densest * .mud-table-row .mud-table-cell .mud-fab {
        min-height: 26px;
        width: 26px;
        height: 26px;
    }

    .densest * .mud-table-root .mud-table-head .mud-table-cell {
        background-color: #29aae2;
        color: white;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 2;
    }


.mud-table-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.mud-table-container::-webkit-scrollbar-track {
    background: #e3f2fd;
    border-radius: 0;
}

.mud-table-container::-webkit-scrollbar-thumb {
    background: #29aae2;
    border-radius: 6px;
    border: 2px solid #e3f2fd;
}

    .mud-table-container::-webkit-scrollbar-thumb:hover {
        background: #1565c0;
    }

.mud-table-container::-webkit-scrollbar-corner {
    background: #e3f2fd;
}

/* For Firefox */
.mud-table-container {
    scrollbar-width: auto;
    scrollbar-color: #29aae2 #e3f2fd;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row {
    cursor: pointer;
}

.classic-tabs > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: white;
}
.classic-tabs > .mud-tabs-tabbar .mud-tab {
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    box-shadow: var(--mud-elevation-2);
}
.classic-tabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper {
    gap: .25rem;
}
.classic-tabs > .mud-tabs-tabbar .mud-tab-slider {
    background-color: transparent;
}

.mud-dialog {
    border-top: var(--mud-palette-primary) solid 4px;
}

.mud-dialog-title {
    color: var(--mud-palette-primary);
}


.image-limit {
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin: 0 auto;
}

.align-right-m {
    text-align: right;
    max-width: 150px;
    flex-basis: 150px;
    width: 150px;
}

    .align-right-m + * {
        flex: 0 1 300px;
    }

.align-right-l {
    text-align: right;
    max-width: 250px;
    flex-basis: 250px;
}


  .screen-background-select {
        height: 50px !important;
        padding: 0 !important;
    }

.align-left-m {
    text-align: left;
    width: 200px;
}

.align-left-s {
    text-align: left;
    width: 140px;
}

.align-left-m + *, .align-left-s + *, .align-right-l + * {
        flex: 0 1 300px;
    }
.align-left-m + .mud-input-number-control, .align-right-m + .mud-input-number-control, .align-right-l + .mud-input-number-control, align-right-s + .mud-input-number-control {
    flex: 0 1 80px;
}


@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden !important;
    }

    /* Only show the section we want */
    #printArea, #printArea * {
        visibility: visible !important;
    }

    /* Position the section at top left for printing */
    #printArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}


.global-loading-overlay {    
    inset: 0;
    z-index: 2000; /* ✅ higher than MudDialog */    
}