/* browser.tabulator.css — theme overrides that make Tabulator match the FA
 * Browser look. Loaded AFTER tabulator.min.css and browser.css.
 *
 * Replaces the old bespoke .browser-table rules (which no longer apply — the
 * table is now a .tabulator) and the old columns.css picker styles (the picker
 * is gone). Everything is driven by the site's CSS variables so light/dark
 * themes carry through.
 */

/* ─── View containers ────────────────────────────────────────────────────
   #results-container is now just a positioning box (85vw cap lives in
   browser.css). It carries the .br-results-grid class in the markup, so force
   it back to a plain block; the Grid cards live in #br-grid, the table in
   #br-tabulator. */
/* #browser-region is a FLEX COLUMN, and #results-container is a direct flex child
   with margin-inline:auto (from browser.css's 85vw centering). Auto margins make a
   flex item shrink to content — which collapsed the card grid to a single column.
   An explicit width:100% forces it to fill the flex line (still capped at 85vw by
   the max-width rule and centred by the auto margins). */
#results-container.br-results-grid { display: block; width: 100%; }
#br-grid.br-results-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}
#br-tabulator { width: 100%; }

/* ─── Pinned control bar ─────────────────────────────────────────────────
   This page has no .dynamicHeader hero, but .dynamicNav (the filter bar) still
   carries dynamic_header.css's `top: 64px + 52px` sticky offset — so on scroll
   it floated over the toolbar and covered the Columns / Table-Grid buttons.
   Pin the filter AND the toolbar together as ONE bar under the app-header, and
   cancel the inner nav's own sticky so nothing overlaps. */
.br-controls-wrap {
    position: sticky;
    top: var(--dyn-app-header-h, 64px);
    z-index: 85;                    /* below the app-header (100), above the table */
    background: var(--bg-body);
}
.br-controls-wrap .dynamicNav {
    position: static;
    top: auto;
    z-index: auto;
}

/* ─── Table shell (mirrors the old .browser-table-wrap card) ─────────────── */
.tabulator {
    background: var(--bg-card);
    color: var(--text-color);          /* text follows the theme, not Tabulator's #333 */
    border: 1px solid var(--border-color);
    /* Square top corners so it meets the filter/toolbar card above seamlessly;
       round only the bottom. */
    border-radius: 0 0 8px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: inherit;
}

/* Tabulator's stock CSS hard-codes the table body to `background:#fff; color:#333`
   at a high specificity (.tabulator .tabulator-tableholder .tabulator-table),
   which clashes on a dark theme. Re-point both at the theme's root vars. */
.tabulator .tabulator-tableholder .tabulator-table {
    background-color: var(--bg-card);
    color: var(--text-color);
}

/* Theme-switch performance: the site applies `* { transition: background-color
   0.3s, color 0.3s, ... }`, so toggling the theme animates EVERY one of the
   table's hundreds of cells at once — which makes the table crawl to update.
   Opt the table's structural elements out so they repaint instantly. */
.tabulator,
.tabulator-row,
.tabulator-cell,
.tabulator-col,
.tabulator-header,
.tabulator-group,
.tabulator-tableholder,
.tabulator-menu,
.tabulator-menu-item {
    transition: none !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────
   Tabulator freezes the header row natively; just theme it. */
/* Header band: a subtle tint of the site accent (theme-aware via color-mix, with
   a plain-var fallback for older engines) plus a crisp accent underline. */
/* Mix the accent into --bg-tinted (NOT --bg-card): in dark mode --bg-card is pure
   black and equals the row background, so the header vanished. --bg-tinted is the
   theme's "stands out from rows" surface (#cfcfcf light / #3d4455 dark), so the
   header stays distinct AND accent-tinted in both themes. */
.tabulator .tabulator-header,
.tabulator .tabulator-col,
.tabulator .tabulator-col.tabulator-frozen {
    background: var(--bg-tinted, var(--bg-body));                                            /* fallback */
    background: color-mix(in srgb, var(--primary-color, #3b82f6) 14%, var(--bg-tinted, var(--bg-body)));
    color: var(--text-color);          /* theme var, not Tabulator's #555 */
}
.tabulator .tabulator-header {
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color, #3b82f6) 45%, transparent);
    font-weight: 600;
}
.tabulator .tabulator-col { border-right: 0; }
.tabulator .tabulator-col .tabulator-col-content { padding: 0.7rem 0.9rem; }
.tabulator .tabulator-col .tabulator-col-title {
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.tabulator .tabulator-col.tabulator-sortable:hover {
    background: var(--bg-tinted, var(--bg-body));                                            /* fallback */
    background: color-mix(in srgb, var(--primary-color, #3b82f6) 28%, var(--bg-tinted, var(--bg-body)));
}
/* Sort arrows: muted-but-visible in both themes, accent when the column is sorted.
   (Tabulator draws the arrow with a border colour of #666, invisible on dark.) */
.tabulator .tabulator-col .tabulator-arrow {
    border-top-color: var(--text-color) !important;
    border-bottom-color: var(--text-color) !important;
    opacity: 0.45;
}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow {
    border-top-color: var(--primary-color, #3b82f6) !important;
    border-bottom-color: var(--primary-color, #3b82f6) !important;
    opacity: 1;
}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter,
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter {
    color: var(--primary-color, #3b82f6);
}

/* Header ⋮ menu button (the column show/hide + reorder menu). */
.tabulator .tabulator-col .tabulator-header-popup-button { color: var(--text-muted); opacity: 0.6; }
.tabulator .tabulator-col .tabulator-header-popup-button:hover { opacity: 1; color: var(--primary-color, #3b82f6); }

/* ─── Rows + cells ───────────────────────────────────────────────────────── */
.tabulator .tabulator-row {
    background: var(--bg-card);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}
.tabulator .tabulator-row.tabulator-row-even { background: var(--bg-card); }
.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-row-even:hover { background: var(--primary-row-hover, #eff4ff); }
.tabulator .tabulator-cell {
    padding: 0.75rem;
    border-right: 0;
    vertical-align: middle;
    white-space: nowrap;
}

/* Frozen first column: pinned during horizontal scroll, with an edge shadow. */
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-col.tabulator-frozen {
    background: var(--bg-card);
    box-shadow: inset -1px 0 0 var(--border-color);
}
.tabulator .tabulator-col.tabulator-frozen { background: var(--bg-tinted, var(--bg-body)); }
.tabulator .tabulator-row:hover .tabulator-cell.tabulator-frozen { background: var(--primary-row-hover, #eff4ff); }

/* Monospace + muted helpers reused inside cells. */
.tabulator .bt-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.tabulator .bt-muted { color: var(--text-muted); }
.tabulator .tabulator-cell a { transition: color 0.18s ease; }
.tabulator .tabulator-cell a:hover { color: var(--primary-color, #3b82f6); }

/* ─── Type group headers (shown when unsorted) ───────────────────────────── */
.tabulator .tabulator-group {
    background: var(--bg-body);
    border-top: 2px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.55rem 1rem;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.tabulator .tabulator-group a { color: inherit; }
.tabulator .tabulator-group a:hover { color: var(--primary-color, #3b82f6); }

/* ─── The 2D "model" mini cell ───────────────────────────────────────────── */
/* Tight vertical padding so the FattyModel canvas fills the taller (80px) row. */
.tabulator .tabulator-cell.fa-mini-cell { padding: 4px 1rem; }
.tabulator .fa-mini-cell .browser-mini-render {
    width: 180px; max-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #fff;   /* deliberate white backdrop for the dark 2D structure, same as the Grid view */
}
.tabulator .fa-mini-cell .fm2d-mini-svg { width: 100%; height: auto; max-height: 72px; display: block; }

/* ─── Column chooser popup (the "Columns" toolbar button) ────────────────── */
.bt-col-chooser {
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 0.4rem;
    font-size: 0.9rem;
}
.bt-col-chooser-head {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem 0.4rem;
}
.bt-col-chooser-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.bt-col-chooser-item:hover { background: var(--primary-row-hover, rgba(59,130,246,0.08)); }
.bt-col-chooser-item input { cursor: pointer; }

/* Column-header ⋮ menu (and any Tabulator popup menu) — themed so it isn't a
   stark white box in dark mode. */
.tabulator-menu {
    background: var(--bg-card);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tabulator-menu .tabulator-menu-item { color: var(--text-color); }
.tabulator-menu .tabulator-menu-item:hover:not(.tabulator-menu-item-disabled) {
    background: var(--bg-tinted, var(--bg-body));                                    /* fallback */
    background: color-mix(in srgb, var(--primary-color, #3b82f6) 20%, var(--bg-card));
}
/* Check glyph slot in the header ⋮ menu items. */
.tabulator-menu .bt-menu-check { display: inline-block; width: 1.1em; color: var(--primary-color, #3b82f6); }

/* ─── Full-page mode ─────────────────────────────────────────────────────── */
body.br-fullpage #br-tabulator { height: 100%; }
body.br-fullpage .tabulator {
    height: 100%;
    max-height: none !important;
    border-radius: 0 0 8px 8px;
}

/* ─── Mobile / responsive ────────────────────────────────────────────────
   Keep horizontal scroll (Tabulator does this natively via its own scroll
   container); tighten the type; and put the filter select, the # results
   count, and the Grid/Table toggle all on ONE line. */
@media (max-width: 900px) {
    /* One-line control bar: [filter select] [# results] [Grid/Table]. The
       filter takes the flexible space; the count + view toggle hug the right. */
    .br-controls-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
    .br-controls-wrap .dynamicNav {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }
    .br-controls-wrap #browser-filterbar {
        max-width: 100%;
        margin: 0;
    }
    /* Toolbar sits inline, no card chrome; overrides the ≤480px hide below. */
    .br-controls-wrap #browser-top-section {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
    }
    .br-controls-wrap #browser-top-right-options { margin-left: 0; }
    #results-count { margin: 0; white-space: nowrap; font-size: 0.95rem; }
    /* Columns button hidden on mobile — use a column header's ⋮ menu instead. */
    .br-columns-btn { display: none !important; }

    /* Table type/size tweaks. */
    .tabulator .tabulator-col .tabulator-col-content { padding: 0.5rem 0.6rem; }
    .tabulator .tabulator-cell { padding: 0.55rem 0.6rem; font-size: 0.85rem; }
}
@media (max-width: 768px) {
    .tabulator .tabulator-cell { padding: 0.45rem 0.5rem; font-size: 0.8rem; }
    .tabulator .fa-mini-cell .browser-mini-render { width: 120px; max-width: 120px; }
    /* !important so it beats the inline desktop template set in browser.tabulator.js. */
    #br-grid.br-results-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
}
@media (max-width: 480px) {
    /* Keep the one-line control bar visible (browser.css hides it at this size). */
    .br-controls-wrap #browser-top-section { display: flex !important; }
    #results-count { font-size: 0.8rem; }

    .tabulator .tabulator-cell { font-size: 0.75rem; }
    .tabulator .fa-mini-cell .browser-mini-render { width: 96px; max-width: 96px; }
    #br-grid.br-results-grid { grid-template-columns: 1fr !important; }
}