/* ─── DataGridComponent — datagrid.css ──────────────────────────────────────
   Loaded globally from App.razor.
   Applies to both Blazor-rendered and JS-created elements.
   ─────────────────────────────────────────────────────────────────────────── */

/* Wrapper: stacks "Show All" toggle + grid vertically */
.dgc-wrapper {
    display: flex;
    flex-direction: column;
}

/* ── Fill-height mode ─────────────────────────────────────────────────────── */
/*
 * When Height="*", DataGridComponent adds class dgc-fill-height to the wrapper.
 * JS sets --dgc-avail-height on the wrapper element after measuring the viewport.
 *
 * We target .rz-data-grid (Radzen's outermost div) and .rz-grid-table-wrapper
 * (Radzen's inner horizontal-scroll container) to push the fixed height inward.
 */
.dgc-fill-height {
    /* Stretch from current top position to bottom of viewport minus margin.
       CSS alone can't know the element's top offset, so JS supplies the value. */
    --dgc-avail-height: 400px; /* safe fallback until JS fires */
}

/* Radzen's root grid div gets the computed height — override the height:1px sentinel */
.dgc-fill-height > .rz-data-grid {
    height: var(--dgc-avail-height) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Column headers — fixed height, no overflow */
.dgc-fill-height > .rz-data-grid .rz-data-grid-columns-header {
    flex-shrink: 0;
    overflow: hidden;
}

/* Data area (real horizontal+vertical scroll container) — fill remaining space */
.dgc-fill-height > .rz-data-grid .rz-data-grid-data {
    flex: 1 1 0;
    overflow: auto;
    min-height: 0;
}

/* Pager — fixed height */
.dgc-fill-height > .rz-data-grid .rz-paginator,
.dgc-fill-height > .rz-data-grid [class*="rz-pager"] {
    flex-shrink: 0;
}

/* ── Top scrollbar div injected by datagrid.js ───────────────────────────── */
/* Inserted as a sibling div inside .rz-data-grid, before .rz-data-grid-data. */

/* The scrollable strip — height sized for a visible OS scrollbar track */
.dgc-top-scroll {
    /*flex-shrink: 0;*/
    overflow-x: scroll;
    overflow-y: hidden;
    /*height: 14px;
    box-sizing: border-box;*/

    /* Firefox: thin mode has no arrow buttons; scrollbar-color sets track + thumb */
    /*scrollbar-width: thin;
    scrollbar-color: var(--rz-border-color, #9e9e9e) var(--rz-base-background-color, #ececec);*/
}

/* Chromium / Edge / Safari: force a persistent visible track, no arrow buttons */
.dgc-top-scroll::-webkit-scrollbar {
    height: 14px;
}
.dgc-top-scroll::-webkit-scrollbar-track {
    background: var(--rz-base-background-color, #ececec);
}
.dgc-top-scroll::-webkit-scrollbar-thumb {
    background: var(--rz-border-color, #9e9e9e);
    border-radius: 3px;
    min-width: 40px;
}
.dgc-top-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--rz-text-disabled-color, #757575);
}
/* Remove the left/right arrow buttons entirely */
.dgc-top-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Phantom inner div — width set by JS to match table.scrollWidth */
.dgc-top-scroll-inner {
    display: block;
    height: 1px;
}