/* ==================== Filters Section ==================== */

.plotSection--filters {
    border-top: none;
    padding-top: 0;
    margin-bottom: 18px;
}

.plotSection--filters .plotCard {
    padding-top: 12px;
}

.filtersRow {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filterGroup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.filterLabel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
}

.filterSelect,
.filterInput,
.ddSelect__trigger {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 13px;
    min-width: 100px;
    transition: border-color 0.15s, background 0.15s;
}

.filterSelect:hover,
.filterInput:hover,
.ddSelect__trigger:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.filterSelect:focus,
.filterInput:focus,
.ddSelect__trigger:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

/* ==================== Filter Select Dropdown ====================
   js/common/dropdown.js replaces each native <select class="filterSelect"> with
   the shared .dd panel and keeps the <select> as the hidden source of truth, so
   the OS-painted option popup no longer breaks the app's look. The trigger keeps
   the box above so it still lines up with the date .filterInput next to it. */

.filterSelect--native {
    display: none;
}

.ddSelect {
    position: relative;
    min-width: 100px;
    /* League names run long. Past this the value ellipsises rather than
       stretching the control and pushing the rest of the row onto a new line —
       the panel below is what shows the name in full. */
    max-width: 260px;
}

.ddSelect__trigger {
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
}

.ddSelect__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A select's panel belongs to its control, so it grows from the same edge
   instead of the right-anchored navbar default. It is free to be wider than the
   trigger, though: the trigger stays narrow to keep the filters row compact,
   while the panel sizes to its longest option so league names fit on one line.
   The cap keeps the longest of them from spanning the page; past it they wrap,
   which is why --dd-item-padding carries vertical padding. */
.ddSelect__menu {
    left: 0;
    right: auto;
    width: max-content;
    min-width: max(100%, 160px);
    max-width: min(420px, calc(100vw - 32px));
}

.dd__item--disabled {
    opacity: 0.45;
    cursor: default;
}

.dd__item--disabled:hover {
    color: var(--dd-item-color);
    background: transparent;
}

@media (max-width: 900px) {
    .filtersRow {
        gap: 12px;
    }

    .filterGroup {
        min-width: 100px;
    }
}

/* ==================== Match Search ==================== */

.matchSearchWrapper {
    position: relative;
    max-width: 320px;
    margin: 0;
}

.matchSearchInput {
    height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    width: 193px;
    padding-right: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.35),
        0 1px 4px rgba(0,0,0,0.3);
}

.matchSearchInput::placeholder {
    color: rgba(255,255,255,0.35);
    font-weight: 400;
}

.matchSearchInput:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
}

.matchSearchInput:focus {
    border-color: rgba(76,125,255,0.6);
    background: rgba(255,255,255,0.07);

    box-shadow:
        0 0 0 1px rgba(76,125,255,0.5),
        0 0 10px rgba(76,125,255,0.25),
        inset 0 0 10px rgba(0,0,0,0.4);
}

/* ==================== Search Result Highlight ==================== */

.highlight {
    border-radius: 10px;
    background: rgba(255, 215, 0, 0.04);
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.15),
        0 0 40px rgba(255, 215, 0, 0.08),
        inset 0 0 20px rgba(255, 215, 0, 0.04);
    transition: all 0.3s ease;
}