/* /Components/EventResultsView.razor.rz.scp.css */
/* Card, podium, status and utility styles are shared with SeriesStandingsView
   and live in wwwroot/css/site.css. Only layout unique to this view is here. */

/* ── Hide XAF action buttons on this page ─────────────────────────────────
   NOTE: these three selectors do not currently match. Scoped CSS appends the
   scope attribute to the last compound selector, and the DevExpress-rendered
   action containers never carry it. Kept as documentation of intent — if the
   buttons need hiding for real, these rules belong in site.css. */
.event-results-container .dxbs-action-container[b-gd5v14g9m8],
.event-results-container .detail-view-actions[b-gd5v14g9m8],
.event-results-container .nav-actions[b-gd5v14g9m8] {
    display: none !important;
}

.event-results-container[b-gd5v14g9m8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── My Results / All Results toggle ──────────────────────────────────────── */
.results-mode-toggle[b-gd5v14g9m8] {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
}

.toggle-buttons[b-gd5v14g9m8] {
    display: inline-flex;
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0.125rem;
}

.toggle-btn[b-gd5v14g9m8] {
    padding: 0.5rem 1rem;
    min-width: 100px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--oor-text-sm);
    font-weight: var(--oor-weight-medium);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.toggle-btn:hover[b-gd5v14g9m8] {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}

/* Dark text on brand yellow — matches every other yellow-background rule */
.toggle-btn.active[b-gd5v14g9m8] {
    background: var(--oor-yellow);
    color: var(--oor-on-yellow);
    font-weight: var(--oor-weight-semibold);
}

.toggle-btn:active[b-gd5v14g9m8] {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .toggle-btn[b-gd5v14g9m8] {
        transition: none;
    }
}

/* ── 3-cascading dropdown row ─────────────────────────────────────────────
   Single column on phones, three across from the md breakpoint up. Three
   comboboxes side by side below 768px are too narrow to read. */
.results-selectors-row[b-gd5v14g9m8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

@media (min-width: 768px) {
    .results-selectors-row[b-gd5v14g9m8] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.selector-group[b-gd5v14g9m8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.selector-label[b-gd5v14g9m8] {
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-secondary-color);
    white-space: nowrap;
    margin: 0;
    font-size: var(--oor-text-sm);
}

.results-series-selector[b-gd5v14g9m8],
.results-event-selector[b-gd5v14g9m8],
.results-session-selector[b-gd5v14g9m8] {
    width: 100%;
}

/* ── Driver-not-linked notice (My Results with no linked driver) ─────────── */
.results-notice[b-gd5v14g9m8] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--oor-yellow);
    border-radius: 0.5rem;
    background: var(--bs-secondary-bg);
}

.results-notice-body[b-gd5v14g9m8] {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: var(--oor-text-sm);
    max-width: 65ch;
}

.results-notice-title[b-gd5v14g9m8] {
    margin: 0 0 0.25rem;
    font-size: var(--oor-text-base);
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-body-color);
}
/* /Components/ResultsGrid.razor.rz.scp.css */
/* Shared utilities (.tabular, .muted, .accent, .status-*, .penalty, card and
   podium styles) live in wwwroot/css/site.css — the card markup is declared
   in the consuming components, so it carries their scope id, not this one. */

.results-title[b-ooyxg5mt6n] {
    font-size: var(--oor-text-xl);
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-body-color);
    letter-spacing: -0.011em;
    margin-bottom: 1rem;
    text-wrap: balance;
}

/* ── State panels ─────────────────────────────────────────────────────────── */
.results-state[b-ooyxg5mt6n] {
    padding: 1.5rem 1rem;
    color: var(--bs-secondary-color);
}

.results-error[b-ooyxg5mt6n] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    text-align: left;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-danger);
    border-radius: 0.5rem;
    padding: 1rem;
}

.results-error-icon[b-ooyxg5mt6n] {
    flex-shrink: 0;
    color: var(--bs-danger);
    margin-top: 0.0625rem;
}

.results-error-title[b-ooyxg5mt6n] {
    margin: 0 0 0.25rem;
    font-size: var(--oor-text-base);
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-body-color);
}

.results-error-body[b-ooyxg5mt6n] {
    margin: 0;
    font-size: var(--oor-text-sm);
    max-width: 65ch;
}

.results-empty[b-ooyxg5mt6n] {
    text-align: center;
}

.results-empty-heading[b-ooyxg5mt6n] {
    font-size: var(--oor-text-xl);
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.results-empty-body[b-ooyxg5mt6n] {
    color: var(--bs-secondary-color);
    margin: 0 auto;
    max-width: 55ch;
    text-wrap: pretty;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────
   Matches the shape of the content it replaces (a header strip plus rows)
   rather than showing a generic spinner, so the layout does not jump when
   the real data lands. Only background-position animates — no layout or
   paint thrash. */
.results-skeleton[b-ooyxg5mt6n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.skeleton-row[b-ooyxg5mt6n] {
    height: 2.75rem;
    border-radius: 0.375rem;
    background-color: var(--bs-secondary-bg);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--oor-yellow-rgb), 0.10) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: results-skeleton-shimmer-b-ooyxg5mt6n 1.4s ease-in-out infinite;
}

.skeleton-row-header[b-ooyxg5mt6n] {
    height: 2.25rem;
    background-color: var(--bs-tertiary-bg);
}

@keyframes results-skeleton-shimmer-b-ooyxg5mt6n {
    from { background-position: -100% 0; }
    to   { background-position:  200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-row[b-ooyxg5mt6n] {
        animation: none;
    }
}

/* ── Desktop grid ─────────────────────────────────────────────────────────
   Visibility handled by the d-none/d-md-block Bootstrap classes. */
.results-grid-wrapper[b-ooyxg5mt6n] {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    overflow-x: auto;
    /* Fades the right edge when content is scrolled off, so a clipped
       seventh column is visible rather than silently cut */
    background-image: linear-gradient(to right, transparent calc(100% - 2rem), rgba(0, 0, 0, 0.06));
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

[b-ooyxg5mt6n] .results-grid .dxbl-grid-header-row {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: var(--oor-weight-semibold);
}

[b-ooyxg5mt6n] .results-grid .dxbl-grid-data-row:nth-child(even) {
    background: var(--bs-tertiary-bg);
}

[b-ooyxg5mt6n] .results-grid .dxbl-grid-data-row:nth-child(odd) {
    background: var(--bs-body-bg);
}

[b-ooyxg5mt6n] .results-grid td,
[b-ooyxg5mt6n] .results-grid th {
    border-color: var(--bs-border-color);
}

/* ── Mobile cards ─────────────────────────────────────────────────────────── */
.results-cards[b-ooyxg5mt6n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-x: hidden;
}

.results-card[b-ooyxg5mt6n] {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    min-height: 44px;
}
/* /Components/SeriesStandingsView.razor.rz.scp.css */
/* Card, podium, status and utility styles are shared with EventResultsView
   and live in wwwroot/css/site.css. Only layout unique to this view is here. */

.series-standings-container[b-ydq7bpiuyp] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.results-selectors[b-ydq7bpiuyp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.selector-label[b-ydq7bpiuyp] {
    font-weight: var(--oor-weight-semibold);
    color: var(--bs-secondary-color);
    white-space: nowrap;
    margin: 0;
    font-size: var(--oor-text-sm);
}

.results-series-selector[b-ydq7bpiuyp] {
    max-width: 400px;
    flex: 1;
}

/* Stack the label above the selector on phones rather than crowding the row */
@media (max-width: 575.98px) {
    .results-selectors[b-ydq7bpiuyp] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .results-series-selector[b-ydq7bpiuyp] {
        max-width: none;
    }
}