/*
 * Cards reporting — filter bar styling.
 *
 * Scoped to the Cards season dashboards. The generic .hrd-toggle-wrapper is built for a
 * label + button-group and is display:inline-flex with no child width, which collapses a
 * RangeSlider to zero width (both handles pile up at the right edge and look "stuck at max").
 * These rules give the sliders a real track width and make the single/range date pickers the
 * same size, with breathing room between the two.
 */

/* ---- Filter row: even spacing between controls ----
 * Every tab puts ALL of its controls in a single row and lets this wrap decide where the break
 * falls, so the row fills the width before spilling instead of breaking at a point hard-coded in
 * the markup. The column gap is what buys the last control its place: the widest tab (Duplicate
 * Cards — seven controls, ~1540px of content) clears the 1800px wide column only because six gaps
 * cost 168px rather than the 192px a 32px gap would. Keep the row gap larger than the column gap so
 * a wrapped row still reads as a separate line rather than a ragged continuation. */
.cards-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 24px;
    column-gap: 28px;
    margin-bottom: 24px;
}

/* ---- A single labelled control (date picker or slider) ---- */
.cards-filter-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cards-filter-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #444;
    margin: 0;
    white-space: nowrap;
}

/* ---- Sliders: give the track a real, consistent width so both handles show ---- */
.cards-filter-slider {
    width: 260px;
    /* Room for the always-visible tooltips below the track so they don't clip. */
    padding-bottom: 6px;
}

/* ---- Star Value: space the ★ glyphs so a tier is countable at a glance ----
 * The buttons are the shared hrd-toggle-btn group (see reporting/star_filter.py), which sets a
 * 0.4px letter-spacing tuned for uppercase words. At that spacing five stars run together into one
 * dark block and ★★★★ is hard to tell from ★★★★★, which defeats the point of drawing them. Widen
 * it here rather than on .hrd-toggle-btn so no other toggle group in the app is affected, and trim
 * the trailing space the last glyph would otherwise inherit so the label stays optically centred. */
.cards-star-group .hrd-toggle-btn {
    letter-spacing: 2px;
    padding-right: 12px;
}

/* ---- A compact fixed-width dropdown in the filter bar ----
 * No Cards control uses this any more — Star Value, its last user, is now a button group. Kept
 * because the Card Inventory lookup tool's own width class is defined in opposition to it (a test
 * there asserts this class is NOT applied, since 160px truncates a season label), so deleting it
 * would leave that reasoning pointing at nothing. Reuse it for the next fixed-width dropdown in
 * this bar rather than adding a second one. */
.cards-filter-dropdown {
    width: 160px;
}

/* ---- Date pickers: make the single and range inputs match in height ---- */
.cards-date-picker .SingleDatePickerInput,
.cards-date-picker .DateRangePickerInput {
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    background: white !important;
    height: 38px !important;
}

.cards-date-picker .DateInput {
    width: 118px !important;
    background: transparent !important;
}

.cards-date-picker .DateInput_input {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.4px !important;
    padding: 6px 10px !important;
    border: none !important;
    color: #444 !important;
    background: transparent !important;
}

.cards-date-picker .DateRangePickerInput_arrow {
    padding: 0 4px !important;
    color: #ced4da !important;
}

.cards-date-picker .SingleDatePickerInput_clearDate,
.cards-date-picker .DateRangePickerInput_clearDates {
    display: none !important;
}

/*
 * Window caption — the read-only "As of <date> · day N" line that replaced the Date (as of)
 * picker on the three cumulative tabs. Matches the date inputs' height and type so the filter
 * row stays level, but carries no border or background: it is a statement of what is shown, not
 * a control, and a bordered box would invite a click.
 */
.cards-window-caption {
    display: inline-flex;
    align-items: center;
    height: 38px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: #444;
    white-space: nowrap;
    cursor: default;
}

/*
 * Archived-season notice. Shown once above an archived season's tabs (and under the menu's
 * Archived heading): those seasons are not kept in the report cache, so a tab can take a
 * minute. Amber rather than red — it is a wait, not an error.
 */
.cards-archived-notice {
    background-color: var(--warning-light);
    color: #7c5008;
    border-left: 3px solid var(--warning);
    border-radius: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 13px;
    line-height: 1.5;
}

/*
 * Section title. A global override (assets/override.css) forces h1–h6 to the Dosis display
 * font. Restyle the "Set Completions" header to match the KPI card's "Album Completions"
 * label — the same uppercase, letter-spaced, muted "block" text (see kpi_cards.py
 * _LABEL_STYLE) — so the two read as one system.
 */
.cards-sac-tab .hrd-section-title,
.cards-source-tab .hrd-section-title,
.cards-cd-tab .hrd-section-title,
.cards-dup-tab .hrd-section-title {
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* The default 2px underline looks heavy under the small block label; drop it for a lighter,
   hairline separator that suits the reduced type size. Push the header down off the content
   above it and tighten the gap to the chart below. */
.cards-sac-tab .hrd-section-header,
.cards-source-tab .hrd-section-header,
.cards-cd-tab .hrd-section-header,
.cards-dup-tab .hrd-section-header {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--spacing-xs);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
}