/* ==========================================================================
   Rally Responsive — Centralized responsive primitives for the public site.
   Loaded after Bootstrap 5 in the "new" and "empty" templates.
   ========================================================================== */

/* ---------- Smooth scroll (opt-in for anchor navigation) ---------- */
html { scroll-behavior: smooth; }

/* ---------- Table container ----------
   Wraps data tables with overflow scroll and centered max-width.
   Override --table-max-width per page if a different limit is needed.
   ---------------------------------------------------------------------- */
.table-container {
    --table-max-width: none;
    width: 100%;
    max-width: var(--table-max-width);
    margin: 0 auto;
    padding: 0 0.5rem;
    overflow-x: auto;
}

@media (max-width: 575.98px) {
    .table-container {
        padding: 0 0.3rem;
    }
}

/* ---------- Sticky table headers ---------- */
.sticky-header thead th {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    z-index: 2;
}

/* ---------- Content full / abbreviated toggle ----------
   Show full text on sm+ screens, abbreviated on xs.
   ------------------------------------------------------- */
@media (max-width: 575.98px) {
    .content-full { display: none; }
    .content-abbr { display: block; }
}

@media (min-width: 576px) {
    .content-full { display: block; }
    .content-abbr { display: none; }
}

/* ---------- Mobile-hide (portrait only) ---------- */
@media (max-width: 575.98px) and (orientation: portrait) {
    .mobile-hide { display: none !important; }
}

/* ---------- Legacy row striping ----------
   Prefer Bootstrap table-striped where possible.
   --------------------------------------------- */
.even-row { background-color: var(--bs-tertiary-bg, #EEEEEE); }
.odd-row  { background-color: var(--bs-body-bg, #FFFFFF); }

/* ---------- Dark mode table fixes ----------
   Bootstrap 5.3 .table-secondary hardcodes light-mode colors (#e2e3e5)
   without a [data-bs-theme=dark] override, so striped rows appear bright
   white in dark mode.  The rgba tint matches Bootstrap's own table-striped
   dark-mode value.
   ------------------------------------------------------------------- */
[data-bs-theme=dark] .table-secondary {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .table-light {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .even-row {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ---------- Time penalty / diff badges ---------- */
.time-penalty {
    display: inline-block;
    padding: 0.1em 0.1em;
    background-color: var(--rally-penalty-bg, #ffcccc);
    border-radius: 0.3em;
    font-weight: bold;
    text-align: center;
}

.time-penalty a {
    color: var(--bs-danger, #dc3545);
    font-weight: bold;
    text-decoration: underline;
}

.time-diff {
    font-size: smaller;
    text-align: center;
}

/* ---------- Class filter / jump navigation ----------
   Shared pill-style nav used for class filters and jump nav.
   Both .class-filter-nav and .class-jumpnav use these base styles.
   ---------------------------------------------------------------- */
.class-filter-nav,
.class-jumpnav-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    justify-content: center;
}

.class-filter-nav a,
.class-jumpnav-inner a {
    display: inline-block;
    white-space: nowrap;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    cursor: pointer;
}

.class-filter-nav a:hover,
.class-filter-nav a:focus,
.class-jumpnav-inner a:hover,
.class-jumpnav-inner a:focus {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

.class-filter-nav a.active,
.class-jumpnav-inner a.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

/* Sticky wrapper for class jump-nav */
.class-jumpnav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* Section header scroll offset (accounts for sticky nav) */
.class-header {
    scroll-margin-top: 3.5rem;
}

/* ---------- Rally results table (klassevis / total) ---------- */
.rally-results-table {
    width: 100%;
    font-size: 0.82rem;
}

.rally-results-table thead th {
    position: sticky;
    top: 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    z-index: 1;
    font-size: 0.78rem;
    padding: 0.2rem 0.3rem;
}

.rally-results-table td {
    padding: 0.15rem 0.3rem;
}

/* Fixed-content columns */
.rally-results-table .rr-pl   { width: 2.2em; white-space: nowrap; }
.rally-results-table .rr-st   { width: 2.8em; white-space: nowrap; }
.rally-results-table .rr-cls  { width: 3em; white-space: nowrap; }
.rally-results-table .rr-time { width: 5.5em; min-width: 5em; max-width: 7.5em; white-space: nowrap; }
.rally-results-table .rr-diff { width: 5em; min-width: 4.5em; max-width: 7em; white-space: nowrap; }

/* Variable-content columns — truncate overflow */
.rally-results-table .rr-name,
.rally-results-table .rr-club,
.rally-results-table .rr-car {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* sm+: slightly larger */
@media (min-width: 576px) {
    .rally-results-table { font-size: 0.85rem; }
    .rally-results-table thead th { font-size: 0.8rem; padding: 0.25rem 0.35rem; }
    .rally-results-table td { padding: 0.2rem 0.35rem; }
}

/* md+: full font size */
@media (min-width: 768px) {
    .rally-results-table { font-size: 0.9rem; }
    .rally-results-table thead th { font-size: 0.85rem; }
}

/* ---------- News pagination ---------- */
.news-pagination {
    text-align: center;
    padding: 0.5rem 0;
}

.news-pagination-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    padding: 0.35rem 0.5rem;
}

.news-pg-btn {
    display: inline-block;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    border-radius: 0.25rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    text-decoration: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    cursor: pointer;
    min-width: 2.2rem;
    text-align: center;
    line-height: 1.4;
}

.news-pg-btn:hover,
.news-pg-btn:focus {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
}

.news-pg-btn.active {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-color: var(--bs-primary, #0d6efd);
    pointer-events: none;
}

.news-pg-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.news-pg-ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.3rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .news-pg-btn {
        padding: 0.25rem 0.45rem;
        font-size: 0.8rem;
        min-width: 1.9rem;
    }
}

/* ---------- Mobile card layout helpers ----------
   Shared styles for the mobile card grid pattern
   used by resultater_brutt.php and resultater_tillegg.php.
   ------------------------------------------------- */
.mobile-label {
    font-weight: bold;
    display: inline-block;
    margin-right: 0.5em;
}

/* ---------- Rally page header ----------
   Centered header block used by results pages.
   Replaces legacy .container/.header pattern that conflicted with Bootstrap.
   ----------------------------------------------------------------------- */
.rally-page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* ---------- Rally data table ----------
   Base styling for results data tables. Provides consistent borders,
   padding, and header background.
   ----------------------------------------------------------------------- */
.rally-data-table {
    width: 100%;
    border-collapse: collapse;
}

.rally-data-table th,
.rally-data-table td {
    padding: 0.5em;
    text-align: left;
    border: 1px solid var(--bs-border-color, #ddd);
}

.rally-data-table thead th {
    background-color: var(--bs-tertiary-bg, #cccccc);
    font-weight: bold;
}

/* ---------- Results utility classes ---------- */
.fixed-width {
    width: 4em;
    padding: 0.5em;
}

.highlight {
    color: var(--bs-danger, #FF0000);
}

.cancelled-penalty {
    color: var(--bs-secondary-color, #999);
    font-style: italic;
}

.cancelled-penalty-time {
    text-decoration: line-through;
    color: var(--bs-secondary-color, #999);
}

.format-detail { display: table-cell; }
@media (max-width: 575.98px) {
    .format-detail { display: none; }
}

.footnote {
    margin-top: 20px;
    font-style: italic;
    font-size: 0.8em;
}

.tooltip-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

/* ---------- Mobile card grid ----------
   Converts tables to stacked card layout on mobile.
   Add .rally-mobile-cards to the <table>, then use a
   column variant class for the grid layout.
   ------------------------------------------------------- */
@media only screen and (max-width: 575.98px) {
    .rally-mobile-cards thead {
        display: none;
    }

    .rally-mobile-cards,
    .rally-mobile-cards tbody {
        display: block;
        width: 100%;
    }

    .rally-mobile-cards tr {
        display: grid;
        margin-bottom: 1em;
        border: 1px solid var(--bs-border-color, #ccc);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }

    .rally-mobile-cards td {
        border: none;
        padding: 0.5em;
        border-bottom: 1px solid var(--bs-border-color-translucent, #eee);
        position: relative;
    }

    .rally-mobile-cards td.mobile-startnr {
        grid-column: 1;
        grid-row: 1 / span 3;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2em;
        border-right: 1px solid var(--bs-border-color, #ddd);
        background-color: var(--bs-tertiary-bg, #f8f8f8);
    }

    .tooltip-text {
        max-width: 100%;
        white-space: normal;
    }

    /* 4-column variant (bruttliste: startnr | name | class/car | ss/type) */
    .rally-mobile-cards-4col tr {
        grid-template-columns: 50px 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .rally-mobile-cards-4col td.mobile-forer { grid-column: 2; grid-row: 1; }
    .rally-mobile-cards-4col td.mobile-kartleser { grid-column: 2; grid-row: 2; }
    .rally-mobile-cards-4col td.mobile-klasse { grid-column: 3; grid-row: 1; }
    .rally-mobile-cards-4col td.mobile-bil { grid-column: 3; grid-row: 2; }
    .rally-mobile-cards-4col td.mobile-ss { grid-column: 4; grid-row: 1; }
    .rally-mobile-cards-4col td.mobile-type { grid-column: 4; grid-row: 2; }
    .rally-mobile-cards-4col td.mobile-grunn {
        grid-column: 2 / span 3;
        grid-row: 3;
        text-align: right;
        font-style: italic;
    }

    /* 3-column variant (tillegg: startnr | fører/bil | tillagt/kontroll/tid) */
    .rally-mobile-cards-3col tr {
        grid-template-columns: 50px 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .rally-mobile-cards-3col td.mobile-forer { grid-column: 2; grid-row: 1; }
    .rally-mobile-cards-3col td.mobile-bil { grid-column: 2; grid-row: 2; }
    .rally-mobile-cards-3col td.mobile-tillagt { grid-column: 3; grid-row: 1; }
    .rally-mobile-cards-3col td.mobile-kontroll { grid-column: 3; grid-row: 2; }
    .rally-mobile-cards-3col td.mobile-tid {
        grid-column: 3;
        grid-row: 3;
        text-align: right;
        font-weight: bold;
    }
    .rally-mobile-cards-3col td.mobile-grunn {
        grid-column: 2 / span 2;
        grid-row: 3;
        font-style: italic;
    }
}

/* ── Banner ──────────────────────────────────────────────── */
.banner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.banner-logo {
    display: block;
    max-height: 80px;
    width: auto !important;
    height: auto !important;
}

.banner-title {
    font-family: 'Russo One', 'Impact', 'Arial Black', sans-serif;
    font-size: 3.5rem;
    color: var(--rally-banner-color, #00796b);
    white-space: nowrap;
}

.banner-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.banner-link:hover {
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .banner-title {
        font-size: 1.75rem;
    }
    .banner-logo {
        max-height: 50px;
    }
}

/* Banner dark mode */
[data-bs-theme=dark] {
    --rally-banner-color: #4db6ac;
}