/* ============================================================
   FGBFilterPanel — compact panel + All Filters modal
   Uses the same CSS vars / theming conventions as the rest of
   FGB Studio (--bs-*, --fgb-*, [data-bs-theme="light"]).
   ============================================================ */

/* ---------- Inline (config panel) ---------- */

/* Scroll runway for the left config panel: extra space AFTER the last
   content section but BEFORE the sticky Apply button, so the last
   sections (e.g. Player Filters) can scroll up toward the middle of the
   view while the sticky button still settles flush at the panel bottom.
   (Padding on the scroll container itself would sit BELOW the sticky
   button's natural position and make it float mid-panel at full scroll.)
   Covers every model's settings view (.player-filters-section), the
   Summary settings view (last .config-subsection), and the Weights view
   (.weights-actions). Tune via the var. */
.panel-left .panel-content {
    --fgbfp-panel-runway: 30vh;
}

@media (max-width: 767px) {
    .panel-left .panel-content {
        --fgbfp-panel-runway: 20vh;
    }
}

.panel-left .player-filters-section,
.panel-left .config-body > .config-subsection:last-child,
.panel-left .weights-actions {
    margin-bottom: var(--fgbfp-panel-runway, 30vh);
}

.fgbfp-root {
    margin-top: 4px;
}

.fgbfp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fgbfp-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fgb-text-secondary, #94a3b8);
}

.fgbfp-clear {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--fgb-text-secondary, #94a3b8);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1;
}

    .fgbfp-clear:hover {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.08);
    }

/* Chips */
.fgbfp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.fgbfp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 0.74rem;
    line-height: 1.2;
    padding: 4px 4px 4px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bs-primary, #10b981) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary, #10b981) 30%, transparent);
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fgbfp-chip-label {
    font-weight: 700;
    color: var(--bs-primary, #10b981);
}

.fgbfp-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fgb-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    flex: 0 0 auto;
}

    .fgbfp-chip-x:hover {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

/* Inline common filters keep whatever spacing the multiselects
   already use; the wrapper just stacks them. */
.fgbfp-commons .fgbfp-item {
    margin-bottom: 8px;
}

/* All Filters button */
.fgbfp-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed var(--bs-border-color);
    background: var(--bs-tertiary-bg, rgba(127, 127, 127, 0.05));
    color: var(--bs-body-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .fgbfp-all-btn:hover {
        border-color: var(--bs-primary, #10b981);
        background: color-mix(in srgb, var(--bs-primary, #10b981) 6%, transparent);
    }

.fgbfp-all-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bs-primary, #10b981);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

.fgbfp-all-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.5;
}

/* ---------- Modal ---------- */
.fgbfp-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 9, 15, 0.65);
    backdrop-filter: blur(3px);
    z-index: 10600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

    .fgbfp-modal-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

body.fgbfp-modal-open {
    overflow: hidden;
}

.fgbfp-modal {
    display: flex;
    flex-direction: column;
    width: 860px;
    max-width: 100%;
    max-height: 86vh;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transform: translateY(12px) scale(0.985);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.fgbfp-modal-overlay.show .fgbfp-modal {
    transform: translateY(0) scale(1);
}

.fgbfp-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bs-border-color);
    flex: 0 0 auto;
}

    .fgbfp-modal-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .fgbfp-modal-header h3 .bi {
            color: var(--bs-primary, #10b981);
        }

.fgbfp-modal-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bs-primary, #10b981);
    background: color-mix(in srgb, var(--bs-primary, #10b981) 10%, transparent);
    border-radius: 10px;
    padding: 2px 9px;
}

    .fgbfp-modal-count:empty {
        display: none;
    }

.fgbfp-modal-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--fgb-text-secondary, #94a3b8);
    font-size: 1rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .fgbfp-modal-close:hover {
        color: var(--bs-body-color);
        background: var(--bs-border-color);
    }

.fgbfp-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 20px;
}

/* Direction-aware dropdowns: fgbstudio-filterpanel.js adds .fgbfp-drop-up
   to a filter's wrapper (inline panel or modal) when its open menu would
   spill past its visible bounds; positioning is applied as inline styles,
   this rule just inverts the shadow. Scoped to .show so the class is
   inert once the menu closes. */
.fgbfp-drop-up .filter-dropdown-menu.show {
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
}

/* Groups */
.fgbfp-group {
    margin-bottom: 18px;
}

.fgbfp-group-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fgb-text-secondary, #94a3b8);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color);
}

.fgbfp-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 16px;
    align-items: start;
}

/* Slots may be empty when a common filter is docked inline;
   collapse them so the grid doesn't show holes. */
.fgbfp-slot:empty {
    display: none;
}

.fgbfp-modal-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--bs-border-color);
    flex: 0 0 auto;
}

.fgbfp-modal-hint {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--fgb-text-secondary, #94a3b8);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .fgbfp-modal-overlay {
        padding: 0;
    }

    .fgbfp-modal {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .fgbfp-group-grid {
        grid-template-columns: 1fr;
    }

    .fgbfp-modal-hint {
        display: none;
    }
}

/* ---------- Light theme adjustments ---------- */
[data-bs-theme="light"] .fgbfp-modal-overlay {
    background: rgba(15, 23, 42, 0.45);
}

/* ============================================================
   Stats matrix enhancements (DrivingIQ / ApproachIQ)
   ============================================================ */

/* Abbreviation legend under the matrix — tooltips are hover-only,
   so this keeps the expansions visible on touch/mobile. */
.fgb-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    margin-top: 8px;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--fgb-text-secondary, #94a3b8);
}

    .fgb-matrix-legend strong {
        color: var(--bs-body-color);
        font-weight: 700;
    }

    .fgb-matrix-legend em {
        font-style: italic;
        opacity: 0.85;
    }

/* Sticky first column: keep the yards labels visible while the
   matrix scrolls horizontally on narrow panels/mobile. Cell
   backgrounds come from the skin rules below (opaque, so scrolled
   columns don't show through). */
.fgb-matrix .bucket-header,
.fgb-matrix .distance-header,
.fgb-matrix .bucket-label {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Shared stats-matrix skin (.fgb-matrix / .fgb-matrix-scroll)
   Unifies the DrivingIQ and ApproachIQ selection matrices with
   the studio design language. Loads after fgbstudio.css, so it
   overrides the models' legacy matrix styling.
   ============================================================ */

.panel-left .fgb-matrix-scroll {
    --fgb-matrix-surface: var(--fgb-bg-primary, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    overflow-x: auto;
    background: var(--fgb-matrix-surface);
    scrollbar-width: thin;
}

    .panel-left .fgb-matrix-scroll::-webkit-scrollbar {
        height: 6px;
    }

    .panel-left .fgb-matrix-scroll::-webkit-scrollbar-thumb {
        background: var(--bs-border-color);
        border-radius: 3px;
    }

.panel-left table.fgb-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
}

/* Header: same small-caps treatment as the panel section titles,
   normalizing the previously mismatched header styles. */
.panel-left .fgb-matrix thead th {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fgb-text-secondary, #94a3b8);
    background: var(--fgb-matrix-surface);
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 8px 6px;
    text-align: center;
    white-space: nowrap;
}

    .panel-left .fgb-matrix thead th:first-child {
        text-align: left;
        padding-left: 10px;
    }

/* Body: horizontal row separators only — no vertical grid lines.
   Opaque backgrounds double as the mask for the sticky column. */
.panel-left .fgb-matrix tbody td {
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    padding: 7px 6px;
    text-align: center;
    background: var(--fgb-matrix-surface);
}

.panel-left .fgb-matrix tbody tr:last-child td {
    border-bottom: none;
}

.panel-left .fgb-matrix .bucket-label {
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

/* Row/column toggle affordance */
.panel-left .fgb-matrix .diq-row-toggle:hover,
.panel-left .fgb-matrix .aiq-row-toggle:hover,
.panel-left .fgb-matrix .diq-col-toggle:hover,
.panel-left .fgb-matrix .aiq-col-toggle:hover {
    color: var(--bs-primary, #10b981);
}

/* Row hover + selection tint. Opaque color-mixes (mixed against the
   surface, not transparent) so the sticky yards label matches its
   row exactly instead of dropping the tint. */
.panel-left .fgb-matrix tbody tr:hover td {
    background: color-mix(in srgb, var(--bs-body-color) 4%, var(--fgb-matrix-surface));
}

.panel-left .fgb-matrix tbody tr.has-selection td {
    background: color-mix(in srgb, var(--bs-primary, #10b981) 8%, var(--fgb-matrix-surface));
}

.panel-left .fgb-matrix tbody tr.has-selection:hover td {
    background: color-mix(in srgb, var(--bs-primary, #10b981) 12%, var(--fgb-matrix-surface));
}

/* Custom checkboxes replacing the native squares */
.panel-left .fgb-matrix input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid var(--bs-border-color);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .panel-left .fgb-matrix input[type="checkbox"]:hover {
        border-color: var(--bs-primary, #10b981);
    }

    .panel-left .fgb-matrix input[type="checkbox"]:checked {
        background: var(--bs-primary, #10b981);
        border-color: var(--bs-primary, #10b981);
    }

        .panel-left .fgb-matrix input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 4.5px;
            top: 1.5px;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

/* The display-only sample-size column (Shots/Holes) reads slightly
   different on purpose: dashed border unchecked, softer fill checked,
   signaling "shown in grid, not weighted." */
.panel-left .fgb-matrix .diq-holes-cb,
.panel-left .fgb-matrix .aiq-shots-cb {
    border-style: dashed;
    opacity: 0.85;
}

    .panel-left .fgb-matrix .diq-holes-cb:checked,
    .panel-left .fgb-matrix .aiq-shots-cb:checked {
        border-style: solid;
        background: color-mix(in srgb, var(--bs-primary, #10b981) 45%, var(--fgb-matrix-surface));
    }