/* =====================================================================
   Shared data tables — PostHog-style
   Ships with the CH.BowlingCRM.UI.Framework library, alongside the
   TableGrid / DataGrid components it styles. Consumers reference it via
   _content/CH.BowlingCRM.UI.Framework/css/tables.css and supply the
   `--bo-*` theme tokens (palette lives with the host, not the library).

   Scoped to `.bo-table-grid` (the shared grid wrappers), so other
   MudTables (stage editor, brackets …) are left untouched.

   Goals:
   - Flat card with a divider-only body (no striping, no elevation).
   - Small, uppercase, muted column headers with subtle sort affordance.
   - Comfortable rows with a quiet hover and a primary-tinted selection.
   - At narrow widths the columns stay on one line and the table scrolls
     horizontally instead of collapsing into stacked cards.
   ===================================================================== */

/* --- Card shell ---------------------------------------------------- */
.bo-table-grid.mud-paper {
    padding: 0 !important;
    overflow: hidden;            /* clip the table to the rounded corners */
    border-radius: var(--bo-radius-lg);
    border: 1px solid var(--bo-border);
}

/* --- Toolbar (search / actions / filter chips) --------------------- */
/* Let the toolbar grow vertically when its content wraps to a second row
   (otherwise MudToolBar's fixed height clips the wrapped actions). */
.bo-table-grid .mud-toolbar,
.bo-table-grid .mud-toolbar .mud-toolbar-content {
    height: auto;
    min-height: unset;
}

.bo-table-grid .mud-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--bo-border);
}

/* Collapse the toolbar shell entirely when GridToolbar rendered nothing
   (no title, search, filters or actions) — no empty strip. Must stay scoped
   to the top toolbar: MudTablePager renders its controls inside its own
   .mud-toolbar (.mud-table-pagination-toolbar) which never contains a
   .bo-grid-toolbar, so without this exclusion the rule would hide the pager
   on every grid. */
.bo-table-grid .mud-toolbar:not(:has(.bo-grid-toolbar)):not(.mud-table-pagination-toolbar) {
    display: none;
}

/* =====================================================================
   Shared grid toolbar (GridToolbar component) — uniform across grids.
   Layout: [ Title ] [ Search ] ··········· [ Filters | Actions ]
   Search sits on the left; Filters + Actions are pushed to the right.
   At narrow widths the search drops to its own full-width row on top and
   the Filters/Actions wrap onto a full-width row beneath (nothing clipped).
   ===================================================================== */
.bo-grid-toolbar {
    /* shared control height so the search matches the Size.Small buttons */
    --bo-ctl-h: 30.75px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
}

.bo-grid-toolbar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-right: 4px;
}

.bo-grid-toolbar-search-wrap {
    width: 240px;
}

.bo-grid-toolbar-search {
    width: 100%;
}

/* Match the search field height to the toolbar buttons. */
.bo-grid-toolbar-search.mud-input-control,
.bo-grid-toolbar-search .mud-input.mud-input-outlined {
    height: var(--bo-ctl-h);
    min-height: var(--bo-ctl-h);
}

.bo-grid-toolbar-search .mud-input-slot,
.bo-grid-toolbar-search .mud-input-root {
    height: var(--bo-ctl-h);
    padding-top: 0;
    padding-bottom: 0;
}

/* Filters + primary actions, pushed to the right of the row. */
.bo-grid-toolbar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.bo-grid-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Anchor so the filters popover positions against the button. */
.bo-grid-toolbar-filter-anchor {
    position: relative;
    display: inline-flex;
}

.bo-grid-toolbar-filter-btn {
    white-space: nowrap;
}

/* --- Filters popover panel ----------------------------------------- */
.bo-grid-toolbar-filter-panel {
    padding: 12px;
    min-width: 240px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bo-grid-toolbar-filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--bo-border);
    padding-bottom: 8px;
}

.bo-grid-toolbar-filter-panel-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Filter groups stack and their chip sets wrap inside the roomy popover. */
.bo-grid-toolbar-filter-panel-body .mud-chipset {
    flex-wrap: wrap;
}

/* Bridge: pages hid filters with `d-none d-*-flex` only because the old
   inline toolbar was cramped. Inside the popover there is room, so show
   them at every width. (Remove the page-level utility classes over time.) */
.bo-grid-toolbar-filter-panel-body .d-none.d-sm-flex,
.bo-grid-toolbar-filter-panel-body .d-none.d-md-flex,
.bo-grid-toolbar-filter-panel-body .d-none.d-lg-flex {
    display: flex !important;
}

/* --- Responsive: search takes its own full-width row --------------- */
@media (max-width: 640px) {
    .bo-grid-toolbar-search-wrap {
        width: 100%;
        flex: 1 1 100%;
        order: -1;          /* search sits above the filters/actions row */
    }

    .bo-grid-toolbar-tools {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;   /* fill the row, wrap, never clip */
    }
}

/* --- Horizontal scroll: keep columns on one line, scroll if wider -- */
.bo-table-grid .mud-table-container {
    overflow-x: auto;
}

.bo-table-grid table.mud-table-root thead th,
.bo-table-grid table.mud-table-root tbody td {
    white-space: nowrap;
}

/* --- Header: small, uppercase, muted ------------------------------- */
.bo-table-grid thead th,
.bo-table-grid .mud-table-head th {
    background-color: var(--bo-surface-muted);
    border-top: 1px solid var(--bo-border);
    border-bottom: 1px solid var(--bo-border) !important;
    color: var(--bo-text-muted) !important;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Sort label inherits the muted header colour; arrow shows on hover/active */
.bo-table-grid .mud-table-sort-label {
    color: inherit;
}

.bo-table-grid .mud-table-sort-label .mud-table-sort-label-icon {
    color: var(--bo-text-muted);
    opacity: 0.55;
}

.bo-table-grid .mud-table-sort-label:hover .mud-table-sort-label-icon,
.bo-table-grid .mud-table-sort-label.mud-direction-asc .mud-table-sort-label-icon,
.bo-table-grid .mud-table-sort-label.mud-direction-desc .mud-table-sort-label-icon {
    color: var(--bo-text);
    opacity: 1;
}

/* --- Body rows: hairline dividers, quiet hover --------------------- */
.bo-table-grid tbody td {
    border-bottom: 1px solid var(--bo-border);
    color: var(--bo-text);
}

.bo-table-grid tbody tr:last-child td {
    border-bottom: none;
}

.bo-table-grid tbody tr.mud-table-row:hover {
    background-color: var(--bo-surface-muted) !important;
}

/* --- Selection (when MultiSelection is enabled) -------------------- */
.bo-table-grid tbody tr.mud-table-row.mud-selected-row,
.bo-table-grid tbody tr.mud-selected-row {
    background-color: var(--bo-primary-soft) !important;
}

.bo-table-grid .mud-checkbox .mud-checked .mud-icon-root,
.bo-table-grid .mud-checkbox .mud-indeterminate .mud-icon-root {
    color: var(--bo-primary);
}

/* --- Row action trigger (context "…" menu) ------------------------- */
.bo-table-grid tbody .mud-button-root.mud-icon-button {
    color: var(--bo-text-muted);
}

.bo-table-grid tbody .mud-button-root.mud-icon-button:hover {
    color: var(--bo-text);
    background-color: var(--bo-primary-soft);
}

/* --- Pager --------------------------------------------------------- */
.bo-table-grid .mud-table-pagination {
    border-top: 1px solid var(--bo-border);
    color: var(--bo-text-muted);
}

/* The default pager is a single fixed-height, no-wrap flex row, so its
   controls (rows-per-page, "x-y of z" caption, nav buttons) overflow and get
   half-clipped on narrow viewports. Let the row wrap and grow in height. */
.bo-table-grid .mud-table-pagination-toolbar {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Shrink the rows-per-page select to fit its values (e.g. "25", "100") rather
   than MudBlazor's default 80px block. Cap the inner input and stop it flex-
   growing so it never stretches across the toolbar. */
.bo-table-grid .mud-table-pagination-select {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    margin-right: 4px !important;
    margin-inline-end: 4px !important;
}

.bo-table-grid .mud-table-pagination-select .mud-input,
.bo-table-grid .mud-table-pagination-select .mud-input .mud-input-root,
.bo-table-grid .mud-table-pagination-select .mud-select-input {
    width: auto;
    min-width: 0;
}

/* The open rows-per-page menu sizes itself to the select's outer
   .mud-input-control (MudSelect RelativeWidth). Bound that element so the popover
   only needs to hold "25"/"50"/"100" instead of spanning the table. */
.bo-table-grid .mud-table-pagination-select .mud-input-control,
.bo-table-grid .mud-table-pagination-select .mud-select {
    width: auto;
    min-width: 0;
    max-width: 64px;
}

@media (max-width: 600px) {
    .bo-table-grid .mud-table-pagination-toolbar {
        padding-inline: 8px;
    }

    /* Drop the flexible spacer so the controls use the full width and stay
       left-aligned instead of being pushed off the right edge. */
    .bo-table-grid .mud-table-pagination-spacer {
        display: none;
    }
}

/* =====================================================================
   MudDataGrid-specific tweaks (.bo-data-grid also carries .bo-table-grid,
   so it inherits everything above; these cover the markup that differs
   from MudTable — selected-row class, header sort/filter icons).
   ===================================================================== */

/* Horizontal scroll, done once and cleanly:
   - the container is the single scroll context (Mud's own HorizontalScrollbar
     is disabled, so there is no second, nested scrollbar);
   - the table fills the card when columns are narrow (min-width:100% → no
     trailing whitespace) but grows past it and scrolls when they are wide
     (width:max-content). */
.bo-data-grid .mud-table-container {
    overflow-x: auto;
}

.bo-data-grid table.mud-table-root {
    min-width: 100%;
    width: max-content;
}

/* DataGrid marks selected rows with `.selected`, not `.mud-selected-row` */
.bo-data-grid tbody tr.mud-table-row.selected {
    background-color: var(--bo-primary-soft) !important;
}

/* Sortable header label + its sort/filter affordances stay muted, darken
   when the column is actively sorted or hovered. */
.bo-data-grid .sortable-column-header,
.bo-data-grid .column-header .mud-button-root.mud-icon-button {
    color: var(--bo-text-muted);
}

.bo-data-grid .column-header:hover .mud-button-root.mud-icon-button,
.bo-data-grid .column-header .sortable-column-header:hover {
    color: var(--bo-text);
}

/* Active sort arrow takes the primary colour for a clear PostHog-style cue */
.bo-data-grid .column-header .sort-direction-icon.mud-direction-asc,
.bo-data-grid .column-header .sort-direction-icon.mud-direction-desc {
    color: var(--bo-primary);
}