/* =============================================================================
   BRIDGE - AG Grid (dash-ag-grid 32, legacy "balham" theme) -> theme roles
   -----------------------------------------------------------------------------
   AG Grid reads its colors from --ag-* variables defined on the theme class.
   dash-ag-grid injects its theme CSS at runtime, AFTER the files in assets/,
   so these rules are prefixed with [data-bs-theme] to win on specificity.

   The grid follows the preview's table: it sits on its panel (no block of
   its own), headers use the muted text level and values the strong one.
   It keeps the original grid's row stripes and strong row hover, which make
   wide rows easier to follow.
   ============================================================================= */

[data-bs-theme] .ag-theme-balham-dark {
    color-scheme: inherit;   /* the class forces dark; follow the page so native scrollbars match the theme */
    --ag-font-family: var(--font-sans);

    /* Surfaces: the grid paints its panel's surface (opaque, so pinned
       columns cover the cells scrolling underneath). */
    --ag-background-color: var(--color-surface);
    --ag-odd-row-background-color: var(--color-row-stripe);   /* stripes, as in the original grid */
    --ag-header-background-color: var(--color-surface);
    --ag-subheader-background-color: var(--color-surface);
    --ag-subheader-toolbar-background-color: transparent;
    --ag-panel-background-color: var(--color-surface-raised);
    --ag-control-panel-background-color: var(--color-surface-raised);   /* column and filter menus */
    --ag-tooltip-background-color: var(--color-surface-raised);
    --ag-modal-overlay-background-color: var(--color-overlay);
    --ag-popup-shadow: var(--shadow-raised);

    /* Text */
    --ag-foreground-color: var(--color-text-strong);          /* cell values */
    --ag-secondary-foreground-color: var(--color-text);       /* icons, pagination */
    --ag-header-foreground-color: var(--color-text-muted);    /* column names */
    --ag-disabled-foreground-color: var(--color-text-subtle);

    /* Lines */
    --ag-border-color: var(--color-border);
    --ag-row-border-color: var(--color-border);
    --ag-header-column-separator-color: var(--color-border);

    /* States */
    --ag-row-hover-color: var(--color-row-hover);
    --ag-column-hover-color: var(--color-state-hover);
    --ag-chip-background-color: var(--color-state-pressed);
    --ag-row-loading-skeleton-effect-color: var(--color-state-pressed);

    /* Inputs in the filter popups: one soft outline, soft gold on focus, no glow (D8) */
    --ag-input-border-color: var(--color-border);
    --ag-input-focus-border-color: var(--color-focus-border);
    --ag-input-focus-box-shadow: none;
    --ag-input-disabled-border-color: var(--color-border-subtle);
    --ag-input-disabled-background-color: transparent;
    --ag-checkbox-background-color: transparent;
    --ag-checkbox-unchecked-color: var(--color-text-muted);

    /* Accent: active items, selection, focus */
    --ag-balham-active-color: var(--color-accent-strong);
    --ag-checkbox-checked-color: var(--color-accent-strong);
    --ag-selected-tab-underline-color: var(--color-accent-strong);
    --ag-range-selection-border-color: var(--color-focus-border);
    /* the same soft amber tint as selected rows in the preview and highlighted dropdown options */
    --ag-selected-row-background-color: var(--color-accent-subtle);
    --ag-range-selection-background-color: var(--color-accent-subtle);
    --ag-range-selection-background-color-2: color-mix(in srgb, var(--color-accent) 22%, transparent);
    --ag-range-selection-background-color-3: color-mix(in srgb, var(--color-accent) 30%, transparent);
    --ag-range-selection-background-color-4: color-mix(in srgb, var(--color-accent) 38%, transparent);
}

/* ---- Filter popup buttons ---------------------------------------------------
   Balham leaves them unstyled. Same roles as the app's buttons: Apply is the
   amber outline (like Apply / Cluster), Reset and Clear the secondary outline. */
[data-bs-theme] .ag-theme-balham-dark .ag-standard-button {
    font-family: inherit;
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--bs-border-radius-sm);
    cursor: pointer;
}

[data-bs-theme] .ag-theme-balham-dark .ag-standard-button:hover {
    background-color: var(--color-state-hover);
}

[data-bs-theme] .ag-theme-balham-dark .ag-standard-button[data-ref="applyFilterButton"] {
    color: var(--color-accent-text);
    border-color: var(--color-accent-strong);
}

[data-bs-theme] .ag-theme-balham-dark .ag-standard-button[data-ref="applyFilterButton"]:hover {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}


/* =============================================================================
   Custom set filter (was ag-custom-filters.css)
   ============================================================================= */

/* ============================================================================
   Custom Set Filter — AG Grid Community Edition
   Theme: ag-theme-balham-dark
   ============================================================================ */

.ag-theme-balham-dark .ag-set-filter {
    width: 220px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text-strong);
    background-color: transparent;   /* sits in the grid's menu, which paints the raised surface */
}

/* ── Search box ─────────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-search {
    padding: 6px;
    border-bottom: 1px solid var(--color-border);
}

.ag-theme-balham-dark .ag-set-filter-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background-color: var(--color-field);
    color: var(--color-field-text);
    font-size: var(--text-base);
    outline: none;
}

.ag-theme-balham-dark .ag-set-filter-search-input::placeholder {
    color: var(--color-text-subtle);
}

.ag-theme-balham-dark .ag-set-filter-search-input:focus {
    border-color: var(--color-focus-border);
}

/* ── Scrollable list ────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-list-viewport {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    max-height: 260px;
    padding: 2px 0;
}

/* ── Individual row ─────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-item {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    cursor: pointer;
    user-select: none;
}

.ag-theme-balham-dark .ag-set-filter-item:hover {
    background-color: var(--color-state-hover);
}

/* ── (Select All) separator ─────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-select-all {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.ag-theme-balham-dark .ag-set-filter-select-all .ag-set-filter-label {
    font-style: italic;
    color: var(--color-text-muted);
}

/* ── Custom checkbox ────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    transition: background-color 0.12s, border-color 0.12s;
}

.ag-theme-balham-dark .ag-set-filter-checkbox:checked {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

.ag-theme-balham-dark .ag-set-filter-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--color-on-accent-strong);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ag-theme-balham-dark .ag-set-filter-checkbox:indeterminate {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

.ag-theme-balham-dark .ag-set-filter-checkbox:indeterminate::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 5px;
    width: 8px;
    height: 2px;
    background-color: var(--color-on-accent-strong);
}

/* ── Label text ─────────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-label {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */

.ag-theme-balham-dark .ag-set-filter-list-viewport::-webkit-scrollbar {
    width: 8px;
}

.ag-theme-balham-dark .ag-set-filter-list-viewport::-webkit-scrollbar-track {
    background: transparent;
}

.ag-theme-balham-dark .ag-set-filter-list-viewport::-webkit-scrollbar-thumb {
    background-color: var(--color-border-strong);
    border-radius: 4px;
}

.ag-theme-balham-dark .ag-set-filter-list-viewport::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-subtle);
}