/* js-grid shared styles (see ~/js/js-grid.js) */
.js-grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.js-grid th.sortable::before { content: "\2195"; opacity: .3; margin-right: .35rem; font-size: .8em; }
.js-grid th.sortable.asc::before  { content: "\2191"; opacity: .9; }
.js-grid th.sortable.desc::before { content: "\2193"; opacity: .9; }
.js-grid th.sortable:focus-visible { outline: 2px solid var(--tblr-primary, #206bc4); outline-offset: -2px; }
.js-grid .grid-filters th {
    background-color: var(--tblr-bg-surface-tertiary, #f1f4f9);
    padding-top: .55rem; padding-bottom: .55rem;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.js-grid .grid-filters th .form-control { background-color: #fff; }
/* Filter-row inputs + Add button: full size to match the toolbar (override the -sm). */
.js-grid .grid-filters .form-control,
.js-grid .grid-filters .form-select { min-height: 2.25rem; height: 2.25rem; font-size: .875rem; padding: .4375rem .75rem; background-color: #fff; }
.js-grid .grid-filters .btn { min-height: 2.25rem; font-size: .875rem; padding: .4375rem .75rem; }
/* Filter placeholders: lighter / more subtle than the default. */
.js-grid .grid-filters .form-control::placeholder { color: #b6bcc6; opacity: 1; }
.js-grid tbody tr:hover { background-color: rgba(32,107,196,.06); }
.js-grid td.editable { cursor: text; }
.js-grid td.editable:hover { box-shadow: inset 0 0 0 1px rgba(32,107,196,.25); border-radius: 3px; }
.js-grid tr.row-flash > td { animation: rowflash 1.2s linear; }
@keyframes rowflash { from { background-color: rgba(47,179,68,.30); } to { background-color: transparent; } }
.js-grid tbody tr.sortable-ghost { opacity: .4; }
/* The grid scrolls vertically inside this box so the header can stick to its top. */
.js-grid-wrap { max-height: 72vh; overflow: auto; }
.js-grid thead th { position: sticky; z-index: 2; background-color: var(--tblr-bg-surface, #fff); }
.js-grid thead tr:first-child th { top: 0; }
.js-grid thead tr.grid-filters th { top: 2.55rem; }
/* Column-chooser popup must layer over the sticky table header (it drops down from the
   toolbar, so it naturally stays below the search/actions row). */
#gridColsMenu { z-index: 1030; }
/* "+N more columns" badge on the column-chooser button (neutral, informational — not a warning). */
.js-cols-count {
    position: absolute; top: -.35rem; right: -.35rem; min-width: 1.05rem; height: 1.05rem;
    padding: 0 .25rem; border-radius: .6rem; background: var(--tblr-secondary, #6c757d); color: #fff;
    font-size: .62rem; line-height: 1.05rem; text-align: center; font-weight: 600; pointer-events: none;
}
.btn-warning .js-cols-count { background: rgba(0,0,0,.45); }   /* stays legible on the orange state */
/* Bulk-action strip: sits between the search toolbar and the column filters.
   Uses display:flex (not the d-flex !important utility) so the JS can hide it
   via an inline display:none when nothing is selected. */
.js-grid-bulkbar { display: flex; background: var(--tblr-bg-surface-secondary, #f6f8fb); }
.js-grid td.cell-error { box-shadow: inset 0 0 0 2px rgba(214,57,57,.6); border-radius: 3px; }
/* Inline edit: input fills the cell; the save button floats just outside the right edge. */
.js-grid td.editing { position: relative; overflow: visible; }
/* Size the inline editor to match the header filter boxes (see .grid-filters .form-select). */
.js-grid td.editing .form-control,
.js-grid td.editing .form-select { min-height: 2.25rem; height: 2.25rem; font-size: .875rem; padding: .4375rem .75rem; }
.js-grid td.editing .js-cell-save {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin-left: .25rem; z-index: 6; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Rightmost editable cell: keep the save button inside so it never pushes horizontal scroll. */
.js-grid td.editing .js-cell-save.js-cell-save-inside { left: auto; right: .15rem; margin-left: 0; box-shadow: none; }
/* Frozen leading columns (name + the selector/handle before it) stay put on horizontal scroll. */
.js-grid .js-frozen { background: var(--tblr-bg-surface, #fff); }
.js-grid tbody tr:hover .js-frozen { background: #eef4fb; }
.js-grid thead .js-frozen { z-index: 4; }
/* Cell-select (spreadsheet) mode: highlighted cell you can arrow around. */
.js-grid td.cell-selected { box-shadow: inset 0 0 0 2px var(--tblr-primary, #206bc4); border-radius: 2px; }
/* Small clear (×) inside the catch-all search box. */
.js-search-clear {
    position: absolute; right: .15rem; top: 50%; transform: translateY(-50%);
    width: 1.3rem; height: 1.3rem; min-height: 1.3rem; padding: 0;
    border: 0; background: transparent; color: var(--tblr-secondary, #667382); z-index: 5;
}
.js-search-clear:hover { color: var(--tblr-red, #d63939); }
.js-search-clear i { font-size: .9rem; }
/* Row action buttons (edit / delete) — slightly bigger than btn-sm for easier clicking. */
.js-grid tbody td .btn-list .btn-icon { width: 2rem; height: 2rem; }
.js-grid tbody td .btn-list .btn-icon i { font-size: 1.05rem; }