/* 0) Baseline */
html, body {
    height: 100%;
    margin: 0;
}

:root {
    --error-bg: #fff3f3;
    --error-border: #e0b4b4;
    --error-text: #a94442;
}

.dxbl-grid {
    --dxbl-grid-selection-bg: #fdebb9;
}

html.dark-theme {
    --error-bg: #3a1f1f;
    --error-border: #7a3b3b;
    --error-text: #ffb3b3;
}

/* Make form-control inputs fill full width inside DxFormLayout items */
.temp-pw-form .dxbl-fl-ctrl,
.temp-pw-form .dxbl-fl-ctrl-nc,
.temp-pw-form .dxbl-fl-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.temp-pw-form .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
}

.forgot-password-link, .forgot-password-link * {
    font-size: 0.75rem !important;
    line-height: 1 !important;
}

.forgot-password-link {
    padding: 0 !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    align-self: flex-start;
}

/* Tighten the form-layout row that contains the Forgot Password link
   so the row's height shrinks with the smaller text. */
.forgot-password-row,
.forgot-password-row .dxbl-fl-ctrl,
.forgot-password-row .dxbl-fl-ctrl-nc,
.forgot-password-row .dxbl-fl-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

/* Native inputs: inherit theme background, white text in dark mode */
html.dark-theme input.form-control,
html.dark-theme textarea.form-control,
html.dark-theme select.form-control {
    background-color: inherit;
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark-theme input.form-control::placeholder,
html.dark-theme textarea.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

html.dark-theme input.form-control:focus,
html.dark-theme textarea.form-control:focus {
    background-color: inherit;
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

/* Make borders/padding part of width calcs to avoid off-by-a-few-px overflow */
*, *::before, *::after {
    box-sizing: border-box;
}
/*1) Tabs root: column flex container */
.dxbl-tabs {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
max-width: 100%;
/* was visible — let the content clip inside the tabs area */
overflow: visible;
}
/* 2) Tabs header/list */
.dxbl-tabs-list {
    /*explicit, unambiguous flex shorthand */
    flex: 0 1 auto;
    min-width: 0;
    font-size: inherit !important; /* prevent auto-scaling */
}

/* 3) Content host: holds all panels */
.dxbl-tabs-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;         
min-height: 0;         
min-width: 0;           
max-width: 100%;
overflow: hidden;       
}
/* 4) Each panel: your scrollable area */
.dxbl-tabs-content-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    padding: clamp(3px, 0.8vw, 8px);
}
/* 5) Extra belt-and-suspenders for DX internals that sometimes get fixed pixel widths */
.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content,
.dxbl-tabs-content-panel > * {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.index-watermark-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%; /* ensures it fills the page */
}

.index-watermark {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background-image: url('/img/The_Gray_Insurance_Group_Transparent.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    opacity: 0.15; /* watermark fade */
    pointer-events: none; /* prevents blocking clicks */
}

/* Full-screen overlay */
.loader-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 9999;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

    /* Fade-out when Blazor is ready */
    .loader-overlay.hidden {
        opacity: 0;
        visibility: hidden;
    }

/* Loader container */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(400px, 80vw);
}

/* Bridge --blazor-load-percentage (e.g. "60%") to the k-selected width.
   Kendo normally uses calc(--kendo-progressbar-progress * 1%) but that expects
   a unitless number; Blazor's var is already a percentage, so override directly. */
.loader-progressbar.k-progressbar > .k-selected {
    width: var(--blazor-load-percentage, 0%);
    transition: width 0.1s ease-in-out;
}

/* Match the k-progressbar width to the content wrapper */
.loader-progressbar {
    width: 100%;
}

/* White text — readable on the blue fill and acceptable on the light gray track */
.loader-status-text {
    color: white !important;
}

/* Loading percentage text via Blazor's built-in CSS var */
.loader-status-text::after {
    content: var(--blazor-load-percentage-text, "Loading\2026");
}

/* Dark mode — driven solely by the class set in index.html inline script.
   The script respects the stored ThemeSetting ('main-dark' or 'auto' + OS check),
   so explicit light preference always wins even on a dark OS. */
html.loader-theme-dark .loader-overlay {
    background: #1f1f1f;
}
html.loader-theme-dark .loader-progressbar.k-progressbar {
    background-color: #3a3a3a;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
html.loader-theme-dark .loader-progressbar.k-progressbar > .k-selected {
    background-color: #3e6196;
}

@media (max-height: 450px) {
    .footer-image {
        display: none !important;
    }
}

@media (max-width: 600px) {

    .imaging-bc-container {
        padding: 0.5rem;
    }

        .imaging-bc-container .dxbl-toolbar {
            gap: 0.5rem;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none; /* Firefox */
        }

            .imaging-bc-container .dxbl-toolbar::-webkit-scrollbar {
                display: none; /* Chrome */
            }

    .imaging-bc-button {
        padding: 0.35rem 0.5rem;
        font-size: 1rem;
    }

    .imaging-bc-icon {
        width: 1.4em;
        height: 1.4em;
    }

    .imaging-bc-separator {
        width: 0.8em;
        height: 0.8em;
    }
}

/* Fire grid row taps immediately — no scroll/zoom disambiguation delay */
.dxbl-grid td[role="gridcell"] {
    touch-action: manipulation;
}

/* In landscape, push content inward to clear the notch/home-indicator sides.
   Background still fills edge-to-edge; only the inner content is inset. */
@media (orientation: landscape) {
    .dxbl-tabs-content-panel:not(.dxbl-tabs-content-panel .dxbl-tabs-content-panel) {
        padding-left: calc(clamp(3px, 0.8vw, 8px) + env(safe-area-inset-left, 0px));
        padding-right: calc(clamp(3px, 0.8vw, 8px) + env(safe-area-inset-right, 0px));
    }
}

/* ── Toolbar ModalBottomSheet: full viewport width, content height capped at 80vh ── */
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
}

dxbl-modal-dialog.dxbl-toolbar-bottom-sheet.show {
    height: auto !important;
    max-height: 80vh !important;
    top: auto !important;
    bottom: 0 !important;
}

dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .dxbl-modal-content {
    height: auto !important;
    overflow-y: auto !important;
}

/* Stretch every item layer to fill the sheet width */
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .dxbl-toolbar-dropdown-item,
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .dxbl-toolbar-menu-item,
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .dxbl-toolbar-item-tmpl {
    width: 100% !important;
    box-sizing: border-box;
}

/* Settings buttons */
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .button-width {
    width: 100% !important;
    min-width: unset !important;
}

/* Filters: form layout padding and footer button alignment */
dxbl-modal-dialog.dxbl-toolbar-bottom-sheet .filters-form {
    width: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
}

.filters-footer-buttons {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

mark {
    background-color: rgba(173, 155, 105, 0.7) !important;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}