/* Bootstrap 3 Lumen sets html{font-size:10px} (harmless while nothing used rem);
   Kendo 2026.3.811's theme sizes itself via rem-based --kendo-font-size-* tokens,
   so it resolves against that 10px instead of the standard 16px root, rendering
   at 62.5% (e.g. 0.875rem -> 8.75px instead of 14px). Restore the standard root. */
html {
    font-size: 16px;
}

/* Your reusable placeholder under each chart */
.chart-loading {
    position: relative;
    min-height: 36px; /* reserve space so it doesn't jump */
}

    /* Kendo progress mask: remove the gray block look */
    .chart-loading .k-loading-mask {
        position: absolute;
        inset: 0;
        background: transparent !important;
        border: 0 !important;
    }

    /* Hide the Loading... text */
    .chart-loading .k-loading-text {
        display: none !important;
    }

    /* Hide the color layer that renders as a block */
    .chart-loading .k-loading-color {
        display: none !important;
    }

    /* Draw our own spinner (works regardless of theme assets) */
    .chart-loading .k-loading-image {
        display: block !important;
        width: 24px;
        height: 24px;
        margin: 6px auto;
        background: none !important;
        border: 3px solid rgba(0, 0, 0, 0.20);
        border-top-color: rgba(0, 0, 0, 0.60);
        border-radius: 50%;
        animation: appSpin 0.8s linear infinite;
    }
@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}


/* Ensure Kendo progress mask is above the chart no-data overlay.
   z-index establishes a new stacking context on .k-chart (position:relative
   alone does not) so the high z-index values below stay contained inside
   this chart's box instead of competing with page chrome (fixed navbar,
   Kendo popups, etc.) that happens to visually overlap it. */
.k-chart {
    position: relative; /* already true, but keep it */
    z-index: 0;
}

    .k-chart .k-loading-image {
        position: static; /* let flexbox center it */
    }

    .k-chart .k-loading-mask {
        z-index: 10020 !important;
    }

    .k-chart .k-chart-overlay {
        z-index: 10010 !important;
        /* Theme default is an opaque var(--kendo-color-surface) background, which
           fully hides the chart's own axes/gridlines behind the "No data available"
           text. Lighten it instead of hiding it so the empty chart shows through. */
        background-color: rgba(255, 255, 255, 0.75) !important;
    }
    /* While the loading mask exists, replace the "No data available" text with "Loading..." */
    .k-chart .k-loading-mask ~ .k-chart-overlay .k-no-data {
        font-size: 0; /* hide original text while keeping the element */
    }

        .k-chart .k-loading-mask ~ .k-chart-overlay .k-no-data::after {
            content: "Loading...";
            font-size: 14px; /* pick what matches your app */
        }
/* Hide the chart "no data" overlay while we are loading */
.k-chart.is-loading .k-chart-overlay {
    display: none !important;
}

/* Dashboard cards that implement their own larger "No data available at this
   time for <year>" overlay (a sibling .overlay div, shown/hidden by
   checkForData() via jQuery show()/hide(), which toggles inline
   style="display: none") duplicate Kendo's own small built-in "No data
   available" chart text. Hide Kendo's version only while that overlay is
   actually shown, so charts where the custom overlay never fires still fall
   back to Kendo's own message instead of showing nothing. */
.panel-body:has(> .overlay:not([style*="none"])) .k-chart .k-no-data {
    display: none !important;
}

/* A checked .k-radio should render as a solid filled circle: the theme already
   sets background-color: var(--kendo-color-primary) correctly on :checked, but
   its ::before overlay (meant to mask down to a small white center dot via an
   inline SVG mask-image) isn't clipping in this browser -- it paints as a full
   white square that hides almost the whole circle, leaving only the border
   ring visible ("outlined" look instead of "filled"). Drop the broken overlay
   so the already-correct solid fill shows through. */
.k-radio:checked::before,
.k-radio.k-checked::before {
    display: none !important;
}

/* Kendo's scrollable grid (MyGridSettings/MyGridSettingsNoPaging sitewide) sets overflow-y:scroll
   (not auto) on .k-grid-content, which permanently reserves the vertical scrollbar's gutter width
   even when there's nothing to scroll (confirmed live: scrollHeight === clientHeight on an
   affected grid, yet the gutter was still being carved out of the table's available width). The
   header renders in a separate, non-scrolling wrapper that never loses that width, so the body
   table ends up a uniform ~0.8% narrower than the header table for every column - the root cause
   of header/body column misalignment reported across many grids (worst example: DataEntryWist).
   overflow-y:auto only reserves the gutter when content actually overflows vertically, which is
   functionally identical to "scroll" whenever a grid genuinely needs to scroll, and removes the
   unnecessary reservation - and thus the misalignment - whenever it doesn't. */
.k-grid-content {
    overflow-y: auto;
}