.jexcel > tbody tr td,
.jexcel > thead tr td {
    white-space: normal !important;
    word-wrap: break-word;
    white-space: normal;
}

/* 1) Keep your sticky header as before… */
/*.jexcel > thead,
.jspreadsheet table > thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;*/ /* sit above everything else */
    /*background: #fff !important;
}*/

/* 2) …then nudge the whole table’s flow down by your header’s height */
/*.jspreadsheet .jexcel_content_table > table {*/
    /* adjust “32px” to the exact height of your header row */
    /*margin-top: 32px;
}*/

.jexcel_content { 
    scroll-behavior: smooth;
}

.jexcel_filter {
    position: absolute;
    top: 21px;
    right: 4px;
}

.pagination {
    --bs-pagination-active-bg: var(--theme-default) !important;
    --bs-pagination-active-border-color: none;
    --bs-pagination-color: rgb(63, 71, 90) !important;
}

.merged-cell {
    border: none !important;
}

/*SmartGrid*/
.vars[theme='default'] {
    /*--row-header-bg-color: var(--light2) !important;
    --col-header-bg-color: var(--light2) !important;*/
    /*  --row-header-bg-color: var(--light2) !important;
    --col-header-bg-color: var(--light2) !important;
    --row-header-foreground-color: black !important;
    --col-header-foreground-color: black !important;
    --sheet-foreground-color: black !important;
    --sheet-foreground-color: black !important;
    --sheet-font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
    --sheet-border-style: 1px solid #efeded !important;*/


    --sheet-foreground-color: var(--tc-text, #1f2937) !important;
    --sheet-foreground-color-disabled: #9ca3af !important;
    --sheet-bg-color: #ffffff !important;
    --sheet-border-style: 1px solid #d9e1ec !important;
    --row-header-bg-color: #f8fafd !important;
    --col-header-bg-color: #f4f7fc !important;
    --head-selection-bg-color: #dbeafe !important;
    --row-header-foreground-color: var(--tc-muted, #4b5563) !important;
    --col-header-foreground-color: var(--tc-text, #334155) !important;
    --icon-color: #000000 !important;
    --shadow-overlay-color: rgba(15, 23, 42, 0.24) !important;
    --invalid-cell-foreground-color: #dc2626 !important;
    --selection-bg-color: rgba(37, 99, 235, 0.14) !important;
    --selection-border-color: #2563eb !important;
    --cell-highlight-bg-color: #a9e5b6 !important;
    --num-highlight-color: #18688f !important;
    --string-highlight-color: #256b3e !important;
    --sheet-menu-bg-color: #fff !important;
    --sheet-menu-hover-color: #e6f0ff !important;
    --sheet-button-bg-color: #f8fafc !important;
    --sheet-button-bg-hover-color: #eef2f7 !important;
    --sheet-button-border: 1px solid #c5d0df !important;
    --highlight-color-1: red !important;
    --highlight-color-2: blue !important;
    --highlight-color-3: purple !important;
    --highlight-color-4: green !important;
    --highlight-color-5: brown !important;
    --frozen-border-color: rgba(100, 116, 139, 0.45) !important;
    --header-selected-bg-color: #1d4ed8 !important;
    --sheet-font-family: var(--spq-grid-font-family, var(--spq-font-family, 'Inter', sans-serif)) !important;
    /* Appearance → Font weight / contrast (tokens defined in appearance.css). */
    --sheet-font-weight: var(--spq-font-weight, 400) !important;
}

.vars[theme='dark'] {
    --sheet-font-family: var(--spq-grid-font-family, var(--spq-font-family, 'Inter', sans-serif)) !important;
    --sheet-font-weight: var(--spq-font-weight, 400) !important;
    /* Contrast tokens — fallbacks are BlazorDatasheet's own dark defaults. */
    --sheet-foreground-color: var(--tcd-text, #a9a9a9) !important;
    --row-header-foreground-color: var(--tcd-muted, #a4a4a4) !important;
    --col-header-foreground-color: var(--tcd-muted, #a4a4a4) !important;
    /* Surfaces follow the theme paper; package defaults are the fallbacks. The package ships
       --icon-color #000 for dark, which made grid icons invisible. */
    --sheet-bg-color: var(--sf-card, #262626) !important;
    --row-header-bg-color: var(--sf-raised, #2d2d2d) !important;
    --col-header-bg-color: var(--sf-raised, #2d2d2d) !important;
    --sheet-border-style: 1px solid var(--bd, #3f3f3f) !important;
    --sheet-menu-bg-color: var(--sf-raised, #333) !important;
    --sheet-button-bg-color: var(--sf-raised, #292929) !important;
    --icon-color: var(--tcd-text, #e5e7eb) !important;
    --sheet-foreground-color-disabled: var(--tcd-faint, #807f7f) !important;
}



/* bds select popup - editor*/
/* Individual dropdown items */
.bds-select-item {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    will-change: transform;
}

/* Overlay created by BlazorDatasheet */
.editor-overlay {
    position: absolute;
    z-index: 100; /* base layer, dropdown will go above */
}

/* Dropdown list */
/* div. prefix is deliberate: BlazorDatasheet's sheet-styles.css loads AFTER this file
   and has its own .bds-select-list (absolute, z-index 4, 7rem) which used to win,
   letting the sticky frozen-bottom row paint over the list. The list is a top-layer
   popover (see bdsPositionDropdown in Util.js) — top/left are set there; the resets
   below undo the browser's default [popover] centring, padding and border. */
div.bds-select-list {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10000; /* fallback when the Popover API is unavailable */
    border-radius: 0;
    border: 1px solid var(--theme-default);
    background: var(--sheet-bg-color);
    color: var(--sheet-foreground-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.merged-cell {
    border: var(--sheet-border-style) !IMPORTANT;
}



/* Active item */
.bds-select-item.active {
    background: var(--bs-primary-bg-subtle);
}

.smartgrid-header .pagination {
    --bs-pagination-padding-x: 0.65rem !important;
    --bs-pagination-padding-y: 0.250rem !important;
}
    /*-----------------------*/

#loader-wrapper-global {
    z-index: 2001 !important;
}


/*Grid loading*/
.grid-wait {
    position: fixed;
    inset: 0;
    display: none; /* toggled by waitClass */
    align-items: center;
    justify-content: center;
    background: #f1f0f033 !important;
    z-index: 2000 !important;
}

        .grid-wait.show {
            display: flex;
        }

    .grid-wait__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(20, 20, 20, 0.18);
        backdrop-filter: blur(6px);
    }

    .grid-wait__card {
        position: relative;
        z-index: 1;
        background: color-mix(in srgb, var(--sf-card, #fff) 92%, transparent);
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 16px;
        padding: 18px 18px;
        width: min(520px, calc(100vw - 32px));
    }

    .grid-wait__spinner .spinner-border {
        width: 2.25rem;
        height: 2.25rem;
    }

    .grid-amt-link {
        font-size: 12px;
        color: var(--theme-text, var(--theme-default));
        /* Underline only on hover. The renderer puts Bootstrap's .text-decoration-underline
           (underline !important) on the anchor, so the override needs !important to win. */
        text-decoration: none !important;
    }

    .grid-amt-link:hover {
        text-decoration: underline !important;
    }
    /*Grid loading end*/