/* FacetedGrid — faceted data grid layout.
   Global stylesheet (not scoped): BbDataGrid renders generated class names
   that scoped CSS cannot reach. Linked from index.html as
   _content/DedooseNext.Components/faceted-grid.css. */

.fg-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fg-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0.5rem;
}

/* A host stylesheet (library-panel.css) carries a generic
   `.library-grid > div` rule — specificity (0,1,1) — that styles its own
   layout wrappers and catches .fg-body as collateral when the grid is used
   inside .library-grid. It forces two things we must undo:
     1. flex-direction: column → the facet panel would stack ABOVE the grid
        instead of sitting to its left; the body must be a row.
     2. flex: 0 0 auto → the body would size to content height, so the facet
        panel never gets a height ceiling and its .fg-facets-scroll can't
        scroll (it just grows the layout). The body must FILL height
        (flex: 1 1 auto + min-height: 0) so the panel is bounded.
   Re-tying the parent here raises specificity to (0,2,0) so these win
   regardless of which class the host puts on the grid root. */
.library-grid > .fg-body {
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
}

.fg-grid-area {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.fg-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* BbDataGrid renders its own internal structure (we can't reach it with
   scoped CSS). Its 2nd direct child div is the table/scroll region; by
   default it sizes to content, so the pagination footer below it gets pulled
   up snug under the last data row. Force it to fill the grid's height so the
   table expands and the pager sits at the bottom of the available space. */
.fg-grid > div:nth-child(2) {
    height: 100%;
}

.fg-toolbar {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fg-icon-sm {
    width: 1rem;
    height: 1rem;
}

.fg-filter-count {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ── Facet panel ─────────────────────────────────────────────────────── */

.fg-facets {
    flex: 0 0 230px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    background: var(--card);
    color: var(--card-foreground);
    overflow: hidden;
}

.fg-facets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.fg-facets-title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.fg-facets-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.fg-facets-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.fg-facet-group {
    padding: 0.125rem 0;
}

.fg-facet-heading {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.25rem 0.625rem 0.25rem 0.375rem;
}

.fg-facet-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.fg-facet-name {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-bucket-list {
    list-style: none;
    margin: 0;
    padding: 0 0.625rem 0.25rem 1.375rem;
}

.fg-bucket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0;
}

/* Options with no rows under the current cross-facet filter stay listed but
   dimmed, so the user can still see (and pick) every possible value. The row
   stays clickable on purpose — only its appearance is muted. */
.fg-bucket-row--empty {
    opacity: 0.45;
}

.fg-bucket-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    cursor: pointer;
}

.fg-bucket-text {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fg-bucket-count {
    font-size: 0.7rem;
    color: var(--muted-foreground);
    flex: 0 0 auto;
}

/* ── Chips strip ─────────────────────────────────────────────────────── */

.fg-chips {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fg-chips-summary {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-right: 0.25rem;
}

.fg-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--secondary-foreground);
    cursor: pointer;
}

.fg-chip:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.fg-chip-x {
    width: 0.75rem;
    height: 0.75rem;
}

.fg-chip-clear-all {
    background: transparent;
    border-style: dashed;
}

/* ── Small shared controls ───────────────────────────────────────────── */

.fg-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    color: var(--primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.fg-link-btn:hover {
    text-decoration: underline;
}

.fg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.125rem;
    border-radius: 0.25rem;
    color: var(--muted-foreground);
    cursor: pointer;
}

.fg-icon-btn:hover {
    background: var(--accent);
    color: var(--accent-foreground);
}

.fg-descriptor-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}