/* ============================================================
   COMPETITION VIEW PAGE (/competitions/{id}) — full redesign
   ============================================================ */

/* ── Hero header — restyled as iOS Large Title section ──── */
/* Make the header card visually disappear so the title floats
   on the page bg like Settings/Mail iOS apps. */
body.theme-apple .competition-header.card.page-with-header-space,
body.theme-apple .competition-header.card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 4px 12px;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .competition-header.card .card-body {
    background: transparent;
    background-color: transparent;
    padding: 4px 4px 12px;
}

/* Restructure the inner flex layout: row 1 → back btn + title block,
   row 2 → action buttons. */
body.theme-apple .competition-header .d-flex.justify-content-between.align-items-start {
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
body.theme-apple .competition-header .right-section.text-end {
    text-align: left;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}
body.theme-apple .competition-header .right-section .d-flex.align-items-center.justify-content-end {
    justify-content: flex-start;
}

/* Large iOS title for competition name */
body.theme-apple .competition-header .competition-title,
body.theme-apple #competition-title-display {
    font-size: clamp(24px, 5vw, 30px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: var(--ios-fg);
    margin: 0;
    text-align: left;
    white-space: normal;
}

/* Subtitle (type + creator + date) */
body.theme-apple .competition-header .right-section > p {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    margin-top: 4px;
}
body.theme-apple .competition-header .right-section > p > span {
    color: var(--ios-fg-2);
}

/* Back button in competition-header — iOS blue circle (matches profile page) */
body.theme-apple .competition-header .left-section > a[title*="Back" i],
body.theme-apple .competition-header .left-section > a[title*="Terug" i],
body.theme-apple .competition-header .left-section > a[href*="history.back"],
body.theme-apple .competition-header .left-section > a {
    background: transparent;
    background-color: transparent;
    border: 1.5px solid var(--ios-tint);
    color: var(--ios-tint);
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
body.theme-apple .competition-header .left-section a svg,
body.theme-apple .competition-header .left-section a i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 16px;
    height: 16px;
}

/* Row 2 — action buttons (Copy / Invite / Rounds) — all grouped on the LEFT
   as iOS pills next to each other, like Apple Sports/Mail bottom action rows */
body.theme-apple .competition-header .d-flex.justify-content-between.align-items-end {
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
body.theme-apple .competition-header .d-flex.justify-content-between.align-items-end .left-section,
body.theme-apple .competition-header .d-flex.justify-content-between.align-items-end .right-section {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
/* Hide the "Spectator Link:" tiny eyebrow label — Copy button itself is clear enough */
body.theme-apple .competition-header .d-flex.justify-content-between.align-items-end .left-section > div.mb-1,
body.theme-apple .competition-header div.mb-1[class*=color]:has(+ #copySpectatorBtn) {
    display: none;
}

/* "Spectator Link:" tiny label — iOS caption */
body.theme-apple .competition-header [style*="Spectator"] + button + #inviteCode,
body.theme-apple .competition-header div.mb-1 {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ── ALL custom button variants → iOS look ───────────────── */

/* Spectator link copy button — compact iOS icon-only pill */
body.theme-apple #copySpectatorBtn,
body.theme-apple button#copySpectatorBtn,
body.theme-apple #copySpectatorBtn.btn,
body.theme-apple #copySpectatorBtn.btn.btn-outline-secondary,
body.theme-apple #groupChatBtn,
body.theme-apple a#groupChatBtn,
body.theme-apple #groupChatBtn.btn,
body.theme-apple #groupChatBtn.btn.btn-outline-secondary {
    background: transparent;
    background-color: transparent;
    border: 1.5px solid var(--ios-tint);
    color: var(--ios-tint);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* iOS blue tint hover/active (instead of Bootstrap grey) */
body.theme-apple #copySpectatorBtn:hover,
body.theme-apple #copySpectatorBtn:focus,
body.theme-apple button#copySpectatorBtn:hover,
body.theme-apple button#copySpectatorBtn:focus,
body.theme-apple #copySpectatorBtn.btn:hover,
body.theme-apple #copySpectatorBtn.btn.btn-outline-secondary:hover,
body.theme-apple #groupChatBtn:hover,
body.theme-apple #groupChatBtn:focus,
body.theme-apple a#groupChatBtn:hover,
body.theme-apple #groupChatBtn.btn:hover {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border-color: var(--ios-tint);
    color: var(--ios-tint);
}
body.theme-apple #copySpectatorBtn:active,
body.theme-apple #groupChatBtn:active {
    background: rgba(0, 122, 255, 0.22);
    transform: scale(0.93);
}
body.theme-apple #copySpectatorBtn svg,
body.theme-apple #copySpectatorBtn i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 14px;
    height: 14px;
    margin: 0;
}
/* Same circle, same blue, no fill anywhere -- a global rule paints bare
   svg paths grey, which is what put a grey blob in this button. */
body.theme-apple #groupChatBtn svg,
body.theme-apple #groupChatBtn svg * {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    fill: none !important;
}
body.theme-apple #groupChatBtn svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* .white-glow-btn (sand border with glow) → iOS outline pill */
body.theme-apple .white-glow-btn,
body.theme-apple .btn.white-glow-btn,
body.theme-apple button.btn.white-glow-btn,
body.theme-apple .btn-outline-secondary.btn-sm.white-glow-btn {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
    min-height: 32px;
}
body.theme-apple .white-glow-btn:hover {
    background: var(--ios-bg);
}
body.theme-apple .white-glow-btn:active {
    transform: scale(0.97);
}

/* .invite-glow-btn + wrapper glow ring → flat iOS solid blue */
body.theme-apple .invite-glow-btn,
body.theme-apple .btn.invite-glow-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    color: #FFFFFF;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    min-height: 32px;
}
body.theme-apple .invite-glow-ring {
    display: none;
}

/* .btn-outline-secondary.btn-sm (rondes button) → iOS pill */
body.theme-apple .btn.btn-outline-secondary.btn-sm,
body.theme-apple button.btn.btn-outline-secondary.btn-sm,
body.theme-apple a.btn.btn-outline-secondary.btn-sm {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    min-height: 32px;
}

/* btn-outline-warning (admin edit etc) — iOS orange outline */
body.theme-apple .btn.btn-outline-warning,
body.theme-apple button.btn.btn-outline-warning {
    background: transparent;
    border: 1px solid var(--ios-orange);
    color: var(--ios-orange);
    border-radius: 999px;
    box-shadow: none;
}

/* btn-outline-success / btn-outline-primary / btn-outline-light → iOS */
body.theme-apple .btn.btn-outline-success {
    background: transparent;
    border: 1px solid var(--ios-green);
    color: var(--ios-green);
    border-radius: 999px;
    box-shadow: none;
}
body.theme-apple .btn.btn-outline-light {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 999px;
    box-shadow: none;
}
body.theme-apple .btn.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--ios-tint);
    color: var(--ios-tint);
    border-radius: 999px;
    box-shadow: none;
}

/* Circle buttons (timer toggles, back btn) — iOS circle */
body.theme-apple .btn.btn-circle,
body.theme-apple .btn-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 0;
    max-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    box-shadow: none;
}
body.theme-apple .btn-outline-success.btn-circle {
    border-color: var(--ios-green);
    color: var(--ios-green);
}
body.theme-apple .btn-outline-warning.btn-circle {
    border-color: var(--ios-orange);
    color: var(--ios-orange);
}
body.theme-apple .btn-outline-primary.btn-circle {
    border-color: var(--ios-tint);
    color: var(--ios-tint);
}

/* timer-pill-btn (settings, help, fullscreen at top of Toernooi Timer).
   Quiet grey circles, matching the question mark on the watch card: these
   are three small utilities above the clock, and in blue at 32px they read
   as the loudest thing in the section. A hairline separator border and
   secondary text put them where they belong, next to the title rather than
   competing with it. */
body.theme-apple .timer-pill-btn,
body.theme-apple .btn.timer-pill-btn,
body.theme-apple .btn.btn-sm.btn-outline-light.timer-pill-btn,
body.theme-apple .btn-outline-light.timer-pill-btn {
    background: transparent;
    background-color: transparent;
    border: 1px solid var(--ios-separator-soft, rgba(120,120,128,0.3));
    border-color: var(--ios-separator-soft, rgba(120,120,128,0.3));
    color: var(--ios-fg-2);
    border-radius: 999px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    aspect-ratio: 1 / 1;
    flex: 0 0 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
body.theme-apple .timer-pill-btn svg,
body.theme-apple .timer-pill-btn i,
body.theme-apple .btn.timer-pill-btn svg,
body.theme-apple .btn.timer-pill-btn i,
body.theme-apple #timer-settings-btn svg,
body.theme-apple #fullscreen-timer-btn svg {
    color: var(--ios-fg-2);
    stroke: var(--ios-fg-2);
    width: 12px;
    height: 12px;
}

/* Help button: plain "?" character, bigger, no inner circle */
body.theme-apple #tournament-timer-help-btn .timer-pill-help-q,
body.theme-apple .timer-pill-btn .timer-pill-help-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ios-fg-2);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
}
body.theme-apple #tournament-timer-help-btn:hover .timer-pill-help-q,
body.theme-apple .timer-pill-btn:hover .timer-pill-help-q {
    color: var(--ios-fg);
}

/* fullscreen-pill-badge */
body.theme-apple .fullscreen-pill-badge {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border: none;
}

/* ── Competition overview / rules container ─────────────── */
body.theme-apple .competition-overview-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.04);
    color: var(--ios-fg);
    padding: 16px;
    margin-bottom: 12px;
}
body.theme-apple .competition-overview-card .card-header-clean {
    background: transparent;
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0 0 12px;
    border-bottom: 0.5px solid var(--ios-separator);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.theme-apple .rules-help-icon,
body.theme-apple .competition-overview-card [data-feather="help-circle"] {
    color: var(--ios-fg-3);
    stroke: var(--ios-fg-3);
    width: 18px;
    height: 18px;
}

/* Rule tile grid */
body.theme-apple .rules-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: transparent;
}

/* Each rule tile — iOS card-on-card */
body.theme-apple .rule-button {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    box-shadow: none;
    padding: 14px 12px;
    color: var(--ios-fg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 80px;
}
body.theme-apple .rule-button-label {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.theme-apple .rule-button-value {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Rule tile that contains a toggle (Golden Point / GP OVERTIME) */
body.theme-apple .rule-button [class*="toggle"],
body.theme-apple .rule-button .toggle,
body.theme-apple .rule-button .switch {
    background: transparent;
    border: none;
}

/* iOS toggle pill inside rule-button (the OFF/ON pill is a button-like span) */
body.theme-apple .rule-button .rule-pill,
body.theme-apple .rule-button > .toggle-button,
body.theme-apple .rule-button button {
    background: var(--ios-fg-3);
    background-color: var(--ios-fg-3);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}
body.theme-apple .rule-button .rule-pill.active,
body.theme-apple .rule-button .toggle-button.on,
body.theme-apple .rule-button .toggle-button.active {
    background: var(--ios-green);
    background-color: var(--ios-green);
}

/* ── Toernooi Timer card ─────────────────────────────────── */
body.theme-apple .timer-display,
body.theme-apple .timer-section,
body.theme-apple .tournament-timer-card,
body.theme-apple .timer-container {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
}

/* Big timer numbers */
body.theme-apple .timer-time,
body.theme-apple .countdown-time,
body.theme-apple [class*="timer-value"] {
    color: var(--ios-fg);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* "RONDE 1" small badge */
body.theme-apple .round-badge,
body.theme-apple [class*="ronde-badge"] {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border: none;
}

/* ── Empty / placeholder timer text "Ready to start" / "Volgende" ── */
body.theme-apple [class*="timer"] .text-muted,
body.theme-apple .timer-status {
    color: var(--ios-fg-2);
}

/* ── Tabs in view.html (compact-nav-pills) — iOS Segmented Control ── */
body.theme-apple .nav.nav-fill.compact-nav-pills {
    background: var(--ios-fg-4);
    border-radius: 10px;
    padding: 2px;
    border: none;
    margin: 8px 4px;
    display: flex;
    gap: 0;
}
body.theme-apple .nav.compact-nav-pills .nav-link {
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ios-fg);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 4px;
    flex: 1 1 0;
    text-align: center;
}
body.theme-apple .nav.compact-nav-pills .nav-link.active {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

/* ── Tournament timer SVG ring color (timer-toggle-btn) ── */
body.theme-apple .timer-toggle-btn {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
}

/* ── Specific timer button IDs — beats `body #id.btn.btn-outline-x.btn-circle.timer-toggle-btn` (1,4,1) ── */
body.theme-apple #timer-toggle-main.btn.btn-outline-success,
body.theme-apple #timer-toggle-fullscreen.btn.btn-outline-success,
body.theme-apple #timer-toggle-tournament.btn.btn-outline-success,
body.theme-apple #timer-toggle-main.btn.btn-outline-success.btn-circle,
body.theme-apple #timer-toggle-fullscreen.btn.btn-outline-success.btn-circle,
body.theme-apple #timer-toggle-tournament.btn.btn-outline-success.btn-circle,
body.theme-apple #timer-toggle-main.btn.btn-outline-success.btn-circle.timer-toggle-btn,
body.theme-apple #timer-toggle-fullscreen.btn.btn-outline-success.btn-circle.timer-toggle-btn,
body.theme-apple #timer-toggle-tournament.btn.btn-outline-success.btn-circle.timer-toggle-btn {
    border: 2px solid var(--ios-green);
    border-color: var(--ios-green);
    color: var(--ios-green);
    background: var(--ios-surface);
}

body.theme-apple #reset-timer-main.btn.btn-outline-warning,
body.theme-apple #reset-timer-fullscreen.btn.btn-outline-warning,
body.theme-apple #reset-timer-tournament.btn.btn-outline-warning,
body.theme-apple #reset-timer-main.btn.btn-outline-warning.btn-circle,
body.theme-apple #reset-timer-fullscreen.btn.btn-outline-warning.btn-circle,
body.theme-apple #reset-timer-tournament.btn.btn-outline-warning.btn-circle {
    border: 2px solid var(--ios-orange);
    border-color: var(--ios-orange);
    color: var(--ios-orange);
    background: var(--ios-surface);
}

body.theme-apple #horn-button-main.btn.btn-outline-primary,
body.theme-apple #horn-button-fullscreen.btn.btn-outline-primary,
body.theme-apple #horn-button-tournament.btn.btn-outline-primary,
body.theme-apple #horn-button-main.btn.btn-outline-primary.btn-circle,
body.theme-apple #horn-button-fullscreen.btn.btn-outline-primary.btn-circle,
body.theme-apple #horn-button-tournament.btn.btn-outline-primary.btn-circle {
    border: 2px solid var(--ios-tint);
    border-color: var(--ios-tint);
    color: var(--ios-tint);
    background: var(--ios-surface);
}

body.theme-apple #prev-round-main.btn.btn-outline-secondary,
body.theme-apple #next-round-main.btn.btn-outline-secondary,
body.theme-apple #prev-round-main.btn.btn-outline-secondary.btn-circle,
body.theme-apple #next-round-main.btn.btn-outline-secondary.btn-circle,
body.theme-apple #prev-round-main.btn.btn-outline-secondary.btn-circle.timer-toggle-btn,
body.theme-apple #next-round-main.btn.btn-outline-secondary.btn-circle.timer-toggle-btn {
    border: 2px solid var(--ios-separator);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
    background: var(--ios-surface);
}

body.theme-apple #seek-10s-main.btn.btn-outline-secondary,
body.theme-apple #seek-neg4m55s-main.btn.btn-outline-secondary,
body.theme-apple #seek-10s-main.btn.btn-outline-secondary.btn-circle,
body.theme-apple #seek-neg4m55s-main.btn.btn-outline-secondary.btn-circle {
    border: 2px solid var(--ios-separator);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
    background: var(--ios-surface);
}

/* Icons inside timer buttons */
body.theme-apple #timer-toggle-main i,
body.theme-apple #timer-toggle-fullscreen i,
body.theme-apple #timer-toggle-tournament i,
body.theme-apple #timer-toggle-main svg,
body.theme-apple #timer-toggle-tournament svg {
    color: var(--ios-green);
    stroke: var(--ios-green);
}
body.theme-apple #reset-timer-main i,
body.theme-apple #reset-timer-tournament i,
body.theme-apple #reset-timer-main svg,
body.theme-apple #reset-timer-tournament svg {
    color: var(--ios-orange);
    stroke: var(--ios-orange);
}
body.theme-apple #horn-button-main i,
body.theme-apple #horn-button-tournament i,
body.theme-apple #horn-button-main svg,
body.theme-apple #horn-button-tournament svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* "Wedstrijden" tab content — section headers Geplande/Vorige */
body.theme-apple [class*="card-body"] h5,
body.theme-apple .card-body h5 {
    color: var(--ios-fg);
}

/* Match cards (everywhere) — same look as /matches/upcoming page.
   Covers: upcoming, completed, scheduled, resting rounds, score panels. */
body.theme-apple .match-card,
body.theme-apple .match-card.mb-3,
body.theme-apple div.match-card,
body.theme-apple .match-card.mb-3.p-3.border.rounded,
body.theme-apple .match-card,
body.theme-apple #matches .match-card,
body.theme-apple #completed-matches .match-card,
body.theme-apple #scheduled-matches-container .match-card,
body.theme-apple #upcoming-matches-container .match-card,
body.theme-apple .resting-card,
body.theme-apple .resting-round-card,
body.theme-apple .resting-players-container,
body.theme-apple .resting-players-content,
body.theme-apple .completed-match-card,
body.theme-apple .upcoming-match-card,
body.theme-apple .score-card,
body.theme-apple .scoreboard-card,
body.theme-apple .round-match-card,
body.theme-apple .tournament-round-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
    padding: 14px;
    margin-bottom: 12px;
}
body.theme-apple .match-card *,
body.theme-apple .odt-match-row * {
    color: inherit;
}
body.theme-apple .match-card .text-muted,
body.theme-apple .odt-match-row .text-muted {
    color: var(--ios-fg-2);
}

/* "Gepland" / "Upcoming" + round badges in match cards */
body.theme-apple .match-card .badge.upcoming-badge,
body.theme-apple .match-card .badge.bg-warning.upcoming-badge,
body.theme-apple .odt-match-row .badge.upcoming-badge {
    background: var(--ep-color-warning);
    background-color: var(--ep-color-warning);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
}

body.theme-apple .match-card .badge.rounds-badge,
body.theme-apple .match-card .badge.rounds-badge--upcoming,
body.theme-apple .odt-match-row .badge.rounds-badge {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
}

/* Other match-card badges (fallback) */
body.theme-apple .match-card .badge:not(.upcoming-badge):not(.rounds-badge):not(.court-badge-pill):not(.sub-badge),
body.theme-apple .odt-match-row .badge:not(.upcoming-badge):not(.rounds-badge):not(.court-badge-pill) {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
}

/* ── ODT compact layout — make it match the upcoming page typography ── */
body.theme-apple .odt-teams-wrapper .teams-container.odt-compact .player-name,
body.theme-apple .odt-compact .player-name,
body.theme-apple .match-card .player-name,
body.theme-apple .match-card .team-1 .player-name,
body.theme-apple .match-card .team-2 .player-name {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    margin: 0;
    color: var(--ios-fg);
    text-shadow: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}
body.theme-apple .match-card .player-name.text-white {
    color: var(--ios-fg);
}
body.theme-apple .match-card .player-name.second-name {
    color: var(--ios-fg);
    font-weight: 500;
}
body.theme-apple .player-name.second-name {
    color: var(--ios-fg);
    font-weight: 500;
}

/* vs separator — match upcoming page */
body.theme-apple .odt-teams-wrapper .teams-container.odt-compact .vs,
body.theme-apple .odt-compact .vs,
body.theme-apple .match-card .vs {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    text-shadow: none;
}

/* Teams wrapper — give them breathing room like upcoming page */
body.theme-apple .odt-teams-wrapper .teams,
body.theme-apple .match-card .teams {
    padding: 6px 0;
    margin: 0;
}

body.theme-apple .odt-teams-wrapper .teams-container.odt-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    min-width: 0;
    width: 100%;
}

body.theme-apple .odt-teams-wrapper .teams-container.odt-compact .team-1,
body.theme-apple .odt-teams-wrapper .teams-container.odt-compact .team-2 {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 12px);
}

/* Team players column */
body.theme-apple .match-card .team-players {
    gap: 2px;
}

/* Compact mode action wrapper — make score button look like other action items */
body.theme-apple .odt-score-btn-wrapper {
    margin-left: 12px;
    flex-shrink: 0;
}
body.theme-apple .odt-score-btn-wrapper .match-actions-grid {
    display: flex;
    gap: 0;
}
body.theme-apple .odt-score-btn-wrapper .match-action-item {
    margin: 0;
}

/* ODT match row — adequate spacing */
body.theme-apple .odt-match-row,
body.theme-apple .match-card .odt-match-row {
    gap: 8px;
    padding: 4px 0;
    min-width: 0;
}

body.theme-apple .odt-teams-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* Teams container general (non-ODT) */
body.theme-apple .match-card .teams-container {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    width: 100%;
}

body.theme-apple .match-card .teams-container .team-1,
body.theme-apple .match-card .teams-container .team-2 {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 12px);
}

body.theme-apple .match-card .teams-container .team-players {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Court badge container (BAAN 2) inside match card */
body.theme-apple .court-badge-container,
body.theme-apple .match-card .court-badge-container {
    margin-bottom: 4px;
}

/* Empty-state placeholder inside upcoming / previous match columns */
body.theme-apple .match-card.matches-empty-state,
body.theme-apple .matches-empty-state {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg-2);
    padding: 14px;
    box-shadow: none;
}
body.theme-apple .match-card.matches-empty-state small,
body.theme-apple .matches-empty-state small {
    color: var(--ios-fg-2);
    font-size: 0.85rem;
}

/* Make the entire match-card content text default iOS color */
body.theme-apple .match-card *,
body.theme-apple .match-card .team-players *,
body.theme-apple .match-card .teams-container * {
    text-shadow: none;
}

/* ============================================================
   TOURNAMENT PAGE (/competitions/{id}/tournament) — iOS native
   Overrides the dark accordion + purple Upcoming badges + dark
   match-details inline style block from tournament.html.
   ============================================================ */

/* Accordion items — iOS white card */
body.theme-apple .accordion-item,
body.theme-apple .accordion-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    margin-bottom: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
    overflow: hidden;
}

/* Accordion button (round header) */
body.theme-apple .accordion-button,
body.theme-apple .accordion-button {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-radius: 14px;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 14px 16px;
}
body.theme-apple .accordion-button:not(.collapsed) {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom: 0.5px solid var(--ios-separator-soft);
    box-shadow: none;
}
body.theme-apple .accordion-button::after {
    filter: none;
}

/* Accordion body — was dark, now iOS white */
body.theme-apple .accordion-body,
body.theme-apple .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    color: var(--ios-fg);
    border-top: 0.5px solid var(--ios-separator-soft);
    padding: 12px 14px;
}
body.theme-apple .accordion-body * {
    background-color: transparent;
    color: var(--ios-fg);
}

/* Completed round indicator — iOS green */
body.theme-apple .accordion-button.completed-round {
    border-left: 4px solid var(--ios-green);
}

/* Tournament badges inside accordion (override the brand teal/purple inline) */
body.theme-apple .accordion-button .badge.bg-secondary,
body.theme-apple .badge.locked-badge,
body.theme-apple .accordion-button .badge.bg-success,
body.theme-apple .completed-round .badge {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: none;
    color: var(--ios-tint);
    text-shadow: none;
}
body.theme-apple .completed-round .badge {
    background: rgba(52, 199, 89, 0.16);
    background-color: rgba(52, 199, 89, 0.16);
    color: #1A7A37;
}

/* Upcoming badge (in tournament rounds) — warm amber + white text */
body.theme-apple .accordion-button .badge[style*="978CC2"],
body.theme-apple .accordion-button .badge.upcoming-badge,
body.theme-apple .badge.upcoming-badge {
    background: var(--ep-color-warning);
    background-color: var(--ep-color-warning);
    color: #fff;
    border: none;
    text-shadow: none;
}

/* Round info text (Total Players, Progress) — iOS dark */
body.theme-apple .competition-header.card .competition-info,
body.theme-apple .competition-header .card-body p.mb-0,
body.theme-apple .competition-header p.mb-0 {
    color: var(--ios-fg);
    font-weight: 500;
}

/* VS separator on tournament — make black not grey */
body.theme-apple .accordion-body .vs,
body.theme-apple .accordion-body div.vs,
body.theme-apple .match-details .vs {
    color: var(--ios-fg);
    font-weight: 700;
}

/* Player names in tournament view — all black */
body.theme-apple .accordion-body .team-name,
body.theme-apple .accordion-body .team-player,
body.theme-apple .accordion-body .player-name,
body.theme-apple .accordion-body .team-1,
body.theme-apple .accordion-body .team-2,
body.theme-apple .match-details .team-name,
body.theme-apple .match-details .team-player {
    color: var(--ios-fg);
    font-weight: 500;
}

/* Tournament competition-header.card (no margin override needed, this page
   doesn't use page-with-header-space). Make it transparent like other pages. */
body.theme-apple .competition-header.card.mb-4 {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    margin-top: calc(env(safe-area-inset-top, 0px) + 24px);
}
body.theme-apple .competition-header.card.mb-4 .card-body {
    background: transparent;
    padding: 0 4px;
}

/* Equal-sized round cards — set min-height + flex on accordion items so they
   sit nicely next to each other (or stacked) */
body.theme-apple #rounds-accordion-container,
body.theme-apple #round-robin-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tournament rounds accordion — explicit light-mode surface (page had legacy
   dark inline styles; these scoped rules win over any leftover page CSS). */
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    overflow: hidden;
}
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-button {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: none;
}
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-button:not(.collapsed) {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-button::after {
    filter: none;
}
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-button .fw-bold {
    color: var(--ios-fg);
}
body.theme-apple:not(.theme-dark) #tournamentRoundsAccordion .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-apple #tournamentRoundsAccordion .accordion-body .team-amp {
    color: var(--ios-fg-2);
}
body.theme-apple #tournamentRoundsAccordion .accordion-body .player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}
body.theme-apple #tournamentRoundsAccordion .accordion-body .team-1,
body.theme-apple #tournamentRoundsAccordion .accordion-body .team-2 {
    min-width: 0;
    max-width: calc(50% - 12px);
}
body.theme-apple #tournamentRoundsAccordion .accordion-body .team-players {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Strip the alert-secondary "locked round" message dark bg → iOS soft tint */
body.theme-apple .alert.alert-secondary {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border: 1px dashed var(--ios-separator);
    color: var(--ios-fg-2);
    border-radius: 12px;
}

/* ── Match details / boxscore container — dark navy → iOS white ── */
body.theme-apple .match-details,
body.theme-apple .match-card .match-details,
body.theme-apple div.match-details,
body.theme-apple .boxscore-container,
body.theme-apple .match-card .boxscore-container,
body.theme-apple div.boxscore-container {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 12px;
    color: var(--ios-fg);
    padding: 10px 12px;
}
body.theme-apple .match-details *,
body.theme-apple .boxscore-container * {
    color: var(--ios-fg);
    background: transparent;
    text-shadow: none;
}

/* Set scores — green for winner, red for loser (overrides generic *:{color}) */
body.theme-apple .set-score.text-success,
body.theme-apple .match-details .set-score.text-success,
body.theme-apple .score-display .set-score.text-success,
body.theme-apple span.set-score.text-success {
    color: #1A7A37;
    font-weight: 700;
}
body.theme-apple .set-score.text-danger,
body.theme-apple .match-details .set-score.text-danger,
body.theme-apple .score-display .set-score.text-danger,
body.theme-apple span.set-score.text-danger {
    color: #B91C1C;
    font-weight: 700;
}

/* Generic text-success / text-danger inside match cards — semantic colors */
body.theme-apple .match-card .text-success,
body.theme-apple .match-details .text-success,
body.theme-apple .boxscore-container .text-success {
    color: #1A7A37;
}
body.theme-apple .match-card .text-danger,
body.theme-apple .match-details .text-danger,
body.theme-apple .boxscore-container .text-danger {
    color: #B91C1C;
}
body.theme-apple .match-details .text-muted,
body.theme-apple .boxscore-container .text-muted,
body.theme-apple .match-details small,
body.theme-apple .boxscore-container small {
    color: var(--ios-fg-2);
}

/* Boxscore table headers (BOC / BOCR) — iOS secondary label */
body.theme-apple .boxscore-container th,
body.theme-apple .boxscore-container thead td {
    color: var(--ios-fg-2);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Availability indicator containers inside match cards — white */
body.theme-apple .match-card .availability-check,
body.theme-apple .match-card .availability-status,
body.theme-apple .match-card .availability-container,
body.theme-apple .match-card [class*=availability] {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    color: var(--ios-fg);
}

/* ── Planner (availability widget) inside match card — iOS native ── */
body.theme-apple .planner-content,
body.theme-apple .match-card .planner-content,
body.theme-apple div.planner-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 12px;
    color: var(--ios-fg);
    padding: 12px;
    margin-top: 8px;
    backdrop-filter: none;
}
body.theme-apple .planner-content *,
body.theme-apple .match-card .planner-content * {
    color: var(--ios-fg);
    background-color: transparent;
    text-shadow: none;
}

/* Planner divider — iOS separator hairline */
body.theme-apple .planner-divider,
body.theme-apple .match-card .planner-divider {
    background: var(--ios-separator);
    background-color: var(--ios-separator);
    height: 0.5px;
}

/* Planner progress bar — iOS bg track, iOS blue fill */
body.theme-apple .planner-progress,
body.theme-apple .match-card .planner-progress {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
}
body.theme-apple .planner-progress-bar,
body.theme-apple .match-card .planner-progress-bar {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-radius: 999px;
}

/* Planner expand trigger / section — iOS native */
body.theme-apple .planner-expand-section,
body.theme-apple .planner-expand-trigger {
    color: var(--ios-fg-2);
}
body.theme-apple .planner-expand-arrow {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* Availability-check — just the iOS-blue checkmark, no square/badge.
   (Was a 13x13 blue-soft tile around the feather check svg — looked
   like a misplaced badge in the match cards.) */
body.theme-apple .availability-check,
body.theme-apple .availability-check.responded,
body.theme-apple .availability-check.first-submitter,
body.theme-apple .match-card .availability-check {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    width: auto;
    min-width: 0;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
body.theme-apple .availability-check svg,
body.theme-apple .availability-check i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

/* ── Leaderboard — sticky first column (player name) ── */
body.theme-apple .leaderboard-table,
body.theme-apple .redesigned-leaderboard table,
body.theme-apple #leaderboard table {
    border-collapse: separate;
    border-spacing: 0;
}
body.theme-apple .leaderboard-table thead th:first-child,
body.theme-apple .leaderboard-table tbody td:first-child,
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .leaderboard-table tbody td:nth-child(2),
body.theme-apple .redesigned-leaderboard table thead th:first-child,
body.theme-apple .redesigned-leaderboard table tbody td:first-child,
body.theme-apple .redesigned-leaderboard table thead th:nth-child(2),
body.theme-apple .redesigned-leaderboard table tbody td:nth-child(2) {
    position: sticky;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    z-index: 2;
}
/* Only ONE vertical divider at the boundary between the sticky pair
   and the scrollable stats — applied to the 2nd column's right edge.
   Previously this box-shadow was on BOTH sticky columns, producing
   a stray vertical line between # and Player which read as a "weird
   divider." */
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .leaderboard-table tbody td:nth-child(2),
body.theme-apple .redesigned-leaderboard table thead th:nth-child(2),
body.theme-apple .redesigned-leaderboard table tbody td:nth-child(2) {
    box-shadow: 1px 0 0 var(--ios-separator-soft);
}
body.theme-apple .leaderboard-table thead th:first-child,
body.theme-apple .leaderboard-table tbody td:first-child,
body.theme-apple .redesigned-leaderboard table thead th:first-child,
body.theme-apple .redesigned-leaderboard table tbody td:first-child {
    left: 0;
    min-width: 36px;
    max-width: 36px;
    text-align: center;
}
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .leaderboard-table tbody td:nth-child(2),
body.theme-apple .redesigned-leaderboard table thead th:nth-child(2),
body.theme-apple .redesigned-leaderboard table tbody td:nth-child(2) {
    left: 36px;
    min-width: 110px;
}
body.theme-apple .leaderboard-table thead th:first-child,
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .redesigned-leaderboard table thead th:first-child,
body.theme-apple .redesigned-leaderboard table thead th:nth-child(2) {
    z-index: 3;
    /* Header sticky cells: WHITE (matches body sticky cells, no grey
       contrast). Previously these were --ios-bg (#F2F2F7 light grey)
       which made the # + Player header cells look greyer than the rest. */
    background: var(--ios-surface);
    background-color: var(--ios-surface);
}

/* Kill the tap-highlight rectangle on leaderboard rows so scrolling
   doesn't briefly tint a row blue when the touch lands on a cell.
   Also gate :hover styles behind hover-capable devices so iOS Safari
   doesn't trigger the hover bg on touch. */
body.theme-apple .redesigned-leaderboard table tbody tr,
body.theme-apple .competition-leaderboard-table tbody tr,
body.theme-apple .leaderboard-table tbody tr {
    -webkit-tap-highlight-color: transparent;
}
body.theme-apple .redesigned-leaderboard table tbody tr td,
body.theme-apple .competition-leaderboard-table tbody tr td,
body.theme-apple .leaderboard-table tbody tr td {
    -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
    /* Non-sticky cells (3rd column onward): kill the hover tint on touch.
       These are safe to transparent — there's nothing scrolling behind. */
    body.theme-apple .redesigned-leaderboard table tbody tr:hover td:nth-child(n+3),
    body.theme-apple .competition-leaderboard-table tbody tr:hover td:nth-child(n+3),
    body.theme-apple .leaderboard-table tbody tr:hover td:nth-child(n+3) {
        background: transparent;
    }
    /* Sticky cells (col 1 + 2): keep their SOLID bg on touch — must
       NEVER be transparent or the scrolling stats bleed through. */
    body.theme-apple .redesigned-leaderboard table tbody tr:hover td:first-child,
    body.theme-apple .redesigned-leaderboard table tbody tr:hover td:nth-child(2),
    body.theme-apple .competition-leaderboard-table tbody tr:hover td:first-child,
    body.theme-apple .competition-leaderboard-table tbody tr:hover td:nth-child(2),
    body.theme-apple .leaderboard-table tbody tr:hover td:first-child,
    body.theme-apple .leaderboard-table tbody tr:hover td:nth-child(2) {
        background: var(--ios-surface);
        background-color: var(--ios-surface);
    }
    /* Current-user row: stays on its own opaque tint on touch too. */
    body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self):hover td:first-child,
    body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self):hover td:nth-child(2),
    body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self) td:first-child,
    body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self) td:nth-child(2) {
        background: #EEF4FF;
        background-color: #EEF4FF;
    }
}

/* Make leaderboard scrollable horizontally on mobile so sticky has effect */
body.theme-apple .redesigned-leaderboard,
body.theme-apple .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Kill the dark-gradient scroll-hint overlay on the right edge of the
   leaderboard — it came from the old dark theme (rgba(26,32,44,0.92))
   and looks out of place on the white iOS surface. */
body.theme-apple .redesigned-leaderboard__overlay {
    background: none;
    background-image: none;
}
/* Scroll-hint chevrons: were sandy-orange (#d2a679) with a dark text-
   shadow halo. Switch to iOS blue with no halo to match the rest of
   the app. */
body.theme-apple .redesigned-leaderboard__overlay .leaderboard-scroll-hint,
body.theme-apple .leaderboard-scroll-hint {
    color: var(--ios-tint);
    text-shadow: none;
}

/* ── iOS Toast notification (for copy success etc.) ── */
body.theme-apple .ios-toast {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ios-tint);
    color: #FFFFFF;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 122, 255, 0.4);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    text-align: center;
    white-space: nowrap;
}
body.theme-apple .ios-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
body.theme-apple .ios-toast svg,
body.theme-apple .ios-toast i {
    color: #FFFFFF;
    stroke: #FFFFFF;
    width: 18px;
    height: 18px;
}

/* ── NUCLEAR text-shadow removal — kill all text shadows app-wide.
   Beats high-specificity rules from new-dark.css like
   `html:not(.light-theme) #upcoming-matches-container .card-body > div:not(.alert) .player-name`
   (1,4,2) by matching the same pattern with extra .theme-apple class. ── */
body.theme-apple #upcoming-matches-container .card-body > div:not(.alert) .player-name,
body.theme-apple #upcoming-matches-container .card-body > div:not(.alert) .badge,
body.theme-apple #upcoming-matches-container .card-body > div:not(.alert) .vs,
body.theme-apple #upcoming-matches-container .card-body > div:not(.alert) *,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) .player-name,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) .badge,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) .vs,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) *,
body.theme-apple #upcoming-matches-container .player-name,
body.theme-apple #upcoming-matches-container .badge,
body.theme-apple #upcoming-matches-container .vs,
body.theme-apple #upcoming-matches-container *,
body.theme-apple #completed-matches-container .player-name,
body.theme-apple #completed-matches-container .badge,
body.theme-apple #completed-matches-container .vs,
body.theme-apple #completed-matches-container *,
body.theme-apple .player-name,
body.theme-apple .match-card .player-name,
body.theme-apple .match-card .badge,
body.theme-apple .match-card .vs,
body.theme-apple .match-card *,
body.theme-apple .competition-card *,
body.theme-apple .badge,
body.theme-apple span,
body.theme-apple div,
body.theme-apple h1,
body.theme-apple h2,
body.theme-apple h3,
body.theme-apple h4,
body.theme-apple h5,
body.theme-apple h6,
body.theme-apple p,
body.theme-apple a,
body.theme-apple button,
body.theme-apple .vs,
body.theme-apple * {
    text-shadow: none;
}
body.theme-apple .match-card .text-white {
    color: var(--ios-fg);
}
body.theme-apple .match-card .text-muted,
body.theme-apple .match-card small {
    color: var(--ios-fg-2);
}

/* Resting Round card */
body.theme-apple .resting-card,
body.theme-apple .resting-round-card,
body.theme-apple [class*="resting"] {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
}

/* Ball circle icon at bottom of each match card — kill sand */
body.theme-apple .match-card svg circle,
body.theme-apple .ball-icon,
body.theme-apple .padel-ball-icon,
body.theme-apple .tennis-ball-icon,
body.theme-apple span.tennis-ball-icon,
body.theme-apple .match-card .tennis-ball-icon {
    color: var(--ios-fg-3);
    stroke: var(--ios-fg-3);
    border-color: var(--ios-fg-3);
    fill: transparent;
}

/* Tennis-ball-icon inside an action button (Score button) → iOS blue circle.
   Use flex centering on the parent button so the ball sits perfectly centered. */
body.theme-apple .button-match-action,
body.theme-apple .match-action-item .button-match-action {
    line-height: 0;
    padding: 8px;
}

/* Make the button a positioning context so we can absolutely center the ball */
body.theme-apple .button-match-action {
    position: relative;
}

body.theme-apple .button-match-action .tennis-ball-icon,
body.theme-apple .match-action-item .tennis-ball-icon,
body.theme-apple .button-match-action span.tennis-ball-icon,
body.theme-apple .match-action-item span.tennis-ball-icon {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.4px solid var(--ios-tint);
    border-color: var(--ios-tint);
    color: var(--ios-tint);
    background: transparent;
    /* Absolute centering — bypasses flex item / whitespace text node weirdness */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    overflow: hidden;
}
/* Tennis ball "curve" — a thin line across the middle (centered) */
body.theme-apple .button-match-action .tennis-ball-icon::before,
body.theme-apple .match-action-item .tennis-ball-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: var(--ios-tint);
    transform: translateY(-50%) rotate(35deg);
    pointer-events: none;
    border-radius: 2px;
}

/* Match action buttons (submit score etc.) — circular iOS pill, icon centered.
   Beats new-dark.css `#upcoming-matches-container .btn` (1,1,1) and similar
   with ID-prefixed selectors. */
body.theme-apple #upcoming-matches-container .button-match-action,
body.theme-apple #upcoming-matches-container .btn.button-match-action,
body.theme-apple #upcoming-matches-container .btn.btn-outline-primary.button-match-action,
body.theme-apple #upcoming-matches-container .button-match-action[data-bs-target*="recordScore"],
body.theme-apple #upcoming-matches-container .button-match-action[data-bs-target*="Score"],
body.theme-apple #upcoming-matches-body .button-match-action,
body.theme-apple #matches-container .button-match-action,
body.theme-apple #matches-list-container .button-match-action,
body.theme-apple #matches .button-match-action,
body.theme-apple .button-match-action[data-bs-target*="recordScore"],
body.theme-apple .button-match-action[data-bs-target*="Score"],
body.theme-apple .button-match-action,
body.theme-apple .btn.button-match-action,
body.theme-apple .btn.btn-outline-primary.button-match-action,
body.theme-apple button.button-match-action {
    background: transparent;
    background-color: transparent;
    border: 1px solid var(--ios-tint);
    border-color: var(--ios-tint);
    color: var(--ios-tint);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
body.theme-apple .button-match-action:hover,
body.theme-apple .button-match-action:active {
    background: var(--ios-tint-soft);
}

/* ============================================================
   CREATE COMPETITION PAGE (/competitions/create) — iOS native
   Overrides inline <style> block in create.html which uses
   brand teal/sand/dark.
   ============================================================ */

/* Header card — was dark teal, → iOS white floating like dashboard.
   Tighter spacing, content sits just below navbar. */
body.theme-apple .create-header-card,
body.theme-apple .create-header-card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: calc(env(safe-area-inset-top, 0px) + 24px) 4px 12px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .create-header-card .card-body {
    background: transparent;
    padding: 4px 4px 12px;
}

/* Title "Competitie Aanmaken" — large iOS title (override inline color: #fff) */
body.theme-apple .create-header-card .competition-title,
body.theme-apple .create-header-card h2.competition-title,
body.theme-apple html .create-header-card h2.competition-title {
    color: var(--ios-fg);
    font-size: clamp(24px, 5vw, 30px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.1;
    margin: 0;
}
body.theme-apple .create-header-card .left-section p,
body.theme-apple .create-header-card p.small {
    color: var(--ios-fg-2);
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

/* Right-side label "Oefenen" (Practice) toggle area */
body.theme-apple .create-header-card .right-section span,
body.theme-apple .create-header-card .right-section div[style*="white-space"] {
    color: var(--ios-fg-2);
}

/* Wizard card — was dark navy → iOS white card */
body.theme-apple .create-wizard-card,
body.theme-apple .create-wizard-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.04);
    color: var(--ios-fg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .create-wizard-card .card-body {
    background: transparent;
    color: var(--ios-fg);
    padding: 20px;
}

/* Wizard wrapper margin reset */
body.theme-apple .create-wizard-wrapper {
    margin: 0 4px;
}

/* Pseudo-elements that draw shadows on the cards — kill */
body.theme-apple .create-header-card::before,
body.theme-apple .create-header-card::after,
body.theme-apple .create-wizard-card::before,
body.theme-apple .create-wizard-card::after {
    display: none;
}

/* Wizard progress — hide the progress bar entirely. Show only step-indicator text. */
body.theme-apple .wizard-progress {
    background: transparent;
    height: auto;
    border-radius: 0;
    margin-bottom: 16px;
    padding: 0;
}
body.theme-apple .wizard-progress .progress,
body.theme-apple .wizard-progress > .progress,
body.theme-apple .wizard-progress .progress-bar {
    display: none;
}

/* Step indicator text — "Stap X van Y" — small iOS secondary label */
body.theme-apple #step-indicator,
body.theme-apple .wizard-progress #step-indicator {
    display: block;
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

/* ── Bootstrap alerts — iOS tinted boxes (matching dark text on light bg) ── */
body.theme-apple .alert,
body.theme-apple div.alert,
body.theme-apple .wizard-step .alert,
body.theme-apple #tournament-details-rounds.alert,
body.theme-apple #tournament-warning-container .alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    line-height: 1.4;
}

/* alert-info → WHITE bg + iOS blue stroke + dark blue text */
body.theme-apple .alert.alert-info,
body.theme-apple #tournament-details-rounds.alert-info {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1.5px solid var(--ios-tint);
    color: var(--ios-tint-press);
}
body.theme-apple .alert.alert-info *,
body.theme-apple #tournament-details-rounds.alert-info *,
body.theme-apple .alert.alert-info strong,
body.theme-apple #tournament-details-rounds.alert-info strong,
body.theme-apple .alert.alert-info span,
body.theme-apple .alert.alert-info div {
    color: #003E80;
}

/* alert-danger → WHITE bg + iOS red stroke + dark red text */
body.theme-apple .alert.alert-danger,
body.theme-apple #tournament-warning-container .alert.alert-danger {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1.5px solid var(--ios-red);
    color: #B91C1C;
}
body.theme-apple .alert.alert-danger *,
body.theme-apple #tournament-warning-container .alert.alert-danger *,
body.theme-apple .alert.alert-danger strong,
body.theme-apple .alert.alert-danger span,
body.theme-apple .alert.alert-danger div {
    color: #8E0F0A;
}

/* alert-warning → WHITE bg + iOS orange stroke + dark amber text */
body.theme-apple .alert.alert-warning {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1.5px solid var(--ios-orange);
    color: #B45309;
}
body.theme-apple .alert.alert-warning *,
body.theme-apple .alert.alert-warning strong {
    color: #7A3E00;
}

/* alert-success → WHITE bg + iOS green stroke + dark green text */
body.theme-apple .alert.alert-success {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1.5px solid var(--ios-green);
    color: #1A7A37;
}
body.theme-apple .alert.alert-success *,
body.theme-apple .alert.alert-success strong {
    color: #0F5524;
}

/* "everyonePlaysTheSame" inline-styled green text inside the info alert */
body.theme-apple .alert.alert-info [style*="color: #28a745"],
body.theme-apple .alert.alert-info [style*="#28a745"] {
    color: #0F5524;
    font-weight: 600;
}

/* Wizard step labels */
body.theme-apple .wizard-step {
    color: var(--ios-fg-2);
}
body.theme-apple .wizard-step.active {
    color: var(--ios-fg);
    font-weight: 700;
}

/* "Wat voor soort competitie wil je aanmaken?" question text */
body.theme-apple .create-wizard-card h3,
body.theme-apple .create-wizard-card h4,
body.theme-apple .create-wizard-card h5,
body.theme-apple .create-wizard-card .text-center {
    color: var(--ios-fg);
}

/* Wizard option buttons (Casual Competitie / Eendaags Toernooi tiles) */
body.theme-apple .wizard-option-btn,
body.theme-apple button.wizard-option-btn,
body.theme-apple .btn.wizard-option-btn {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
    border: 2px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: none;
    transition: all 180ms ease;
    text-shadow: none;
}
body.theme-apple .wizard-option-btn:hover {
    background: var(--ios-fg-4);
    border-color: var(--ios-fg-3);
}
body.theme-apple .wizard-option-btn.selected,
body.theme-apple .wizard-option-btn.active {
    background: var(--ios-tint-soft);
    border-color: var(--ios-tint);
    color: var(--ios-tint-press);
}
body.theme-apple .wizard-option-btn .fw-bold,
body.theme-apple .wizard-option-btn strong {
    color: var(--ios-fg);
    font-weight: 700;
}
body.theme-apple .wizard-option-btn .small,
body.theme-apple .wizard-option-btn small,
body.theme-apple .wizard-option-btn .text-muted {
    color: var(--ios-fg-2);
}

/* Wizard pill-shaped input fields */
body.theme-apple .wizard-input-pill,
body.theme-apple input.wizard-input-pill {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 12px;
    text-align: left;
    padding: 12px 14px;
    font-size: 17px;
    box-shadow: none;
}
body.theme-apple .wizard-input-pill:focus {
    background: var(--ios-surface);
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px var(--ios-tint-soft);
}
body.theme-apple .wizard-input-pill::placeholder {
    color: var(--ios-fg-3);
}

/* Wizard nav buttons (Volgende / Vorige / Terug) */
body.theme-apple .wizard-nav-btn,
body.theme-apple button.wizard-nav-btn,
body.theme-apple .btn.wizard-nav-btn {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 14px;
    padding: 12px 22px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}

/* Primary nav button (Volgende →) — solid iOS black.
   Beats `a:not(.btn):not(...)` from text-hover-improvements.css. */
body.theme-apple .wizard-nav-btn-primary,
body.theme-apple button.wizard-nav-btn-primary,
body.theme-apple .btn.wizard-nav-btn-primary,
body.theme-apple .wizard-nav-btn.wizard-nav-btn-primary,
body.theme-apple a.wizard-nav-btn-primary:not(.btn):not(.badge):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.mobile-nav-item),
body.theme-apple a.wizard-nav-btn-primary {
    background: var(--ios-fg);
    background-color: var(--ios-fg);
    background-image: none;
    border: none;
    color: #FFFFFF;
    border-radius: 14px;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}
body.theme-apple .wizard-nav-btn-primary svg,
body.theme-apple .wizard-nav-btn-primary i {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

/* "Oefenen" (Practice/Demo) toggle — gp-badge-* style → iOS pill.
   White text always, grey pill = OFF, iOS-green pill = ON. Min-width
   so the ON/OFF label is centered inside a stable pill that doesn't
   resize as the text changes from 3 → 2 characters. */
body.theme-apple .ios-dash-header .gp-badge,
body.theme-apple .ios-dash-header .gp-badge-clickable,
body.theme-apple .ios-dash-header #is_demo_toggle,
body.theme-apple .create-header-card .gp-badge,
body.theme-apple .create-header-card .gp-badge-clickable,
body.theme-apple .create-header-card #is_demo_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 24px;
    background: var(--ios-fg-3);
    background-color: var(--ios-fg-3);
    border: none;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1;
}
body.theme-apple .ios-dash-header .gp-badge-off,
body.theme-apple .ios-dash-header #is_demo_toggle.gp-badge-off,
body.theme-apple .create-header-card .gp-badge-off,
body.theme-apple .create-header-card #is_demo_toggle.gp-badge-off {
    background: var(--ios-fg-3);
    background-color: var(--ios-fg-3);
    color: #FFFFFF;
    border: none;
}
body.theme-apple .ios-dash-header .gp-badge-on,
body.theme-apple .ios-dash-header .gp-badge-clickable.gp-badge-on,
body.theme-apple .ios-dash-header #is_demo_toggle.gp-badge-on,
body.theme-apple .create-header-card .gp-badge-on,
body.theme-apple .create-header-card .gp-badge-clickable.gp-badge-on,
body.theme-apple .create-header-card #is_demo_toggle.gp-badge-on {
    background: var(--ios-green);
    background-color: var(--ios-green);
    color: #FFFFFF;
    border: none;
}
body.theme-apple .create-header-card .gp-badge::after,
body.theme-apple .create-header-card .gp-badge::before {
    display: none;
}

/* Force-strip dark inline colors specific to create.html */
body.theme-apple .create-header-card [style*="color: #fff"],
body.theme-apple .create-header-card h2[style*="color"] {
    color: var(--ios-fg);
}
body.theme-apple .create-header-card [style*="color: rgba(255"],
body.theme-apple .create-header-card p[style*="color"] {
    color: var(--ios-fg-2);
}

/* ── Apply same gp-badge iOS treatment to view.html toggle (GOLDEN POINT / GP OVERTIME) ── */
body.theme-apple .gp-badge,
body.theme-apple .gp-badge-clickable {
    /* inline-flex + center for precise ON/OFF centering in the capsule
       (inline + line-height alone left the text slightly low) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-fg-3);
    border: none;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
    border-radius: 999px;
    padding: 3px 12px 4px;
    min-height: 20px;
    min-width: 36px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.4px;
    vertical-align: middle;
    text-align: center;
}
body.theme-apple .gp-badge-on,
body.theme-apple .gp-badge-clickable.gp-badge-on {
    background: var(--ios-green);
    background-color: var(--ios-green);
}
body.theme-apple .gp-badge::after,
body.theme-apple .gp-badge::before,
body.theme-apple .gp-badge-on::after,
body.theme-apple .gp-badge-on::before,
body.theme-apple .gp-badge-off::after,
body.theme-apple .gp-badge-off::before,
body.theme-apple .gp-badge-clickable::after,
body.theme-apple .gp-badge-clickable::before,
body.theme-apple .create-header-card .gp-badge::after,
body.theme-apple .create-header-card .gp-badge::before,
body.theme-apple .create-header-card .gp-badge-on::after,
body.theme-apple .create-header-card .gp-badge-off::after,
body.theme-apple .create-header-card .gp-badge-clickable::after,
body.theme-apple .create-header-card .gp-badge-clickable.gp-badge-on::after,
body.theme-apple .create-header-card .gp-badge-clickable.gp-badge-off::after {
    display: none;
    background: transparent;
    box-shadow: none;
    content: none;
}

/* gp-badge ON / OFF state — solid pill, just text, no decorative circles */
body.theme-apple .gp-badge-on,
body.theme-apple .gp-badge-clickable.gp-badge-on,
body.theme-apple .create-header-card .gp-badge-on,
body.theme-apple .create-header-card .gp-badge-clickable.gp-badge-on {
    background: var(--ios-green);
    background-color: var(--ios-green);
    color: #FFFFFF;
    border: none;
    padding: 5px 14px;
    min-width: 60px;
    text-align: center;
}
body.theme-apple .gp-badge-off,
body.theme-apple .gp-badge-clickable.gp-badge-off,
body.theme-apple .create-header-card .gp-badge-off,
body.theme-apple .create-header-card .gp-badge-clickable.gp-badge-off {
    background: var(--ios-fg-3);
    background-color: var(--ios-fg-3);
    color: #FFFFFF;
    border: none;
    padding: 5px 14px;
    min-width: 60px;
    text-align: center;
}

/* "vs" separator */
body.theme-apple .vs,
body.theme-apple .match-card .vs {
    color: var(--ios-fg-2);
    font-weight: 700;
}

/* ── Bottom sheet (rules explanation drawer) ─────────────── */
body.theme-apple .rules-bottom-sheet {
    background: var(--ios-surface);
    color: var(--ios-fg);
    border-radius: 18px 18px 0 0;
}
body.theme-apple .rules-explanation {
    color: var(--ios-fg);
}

/* ── Generic .card.mt-4.mb-3 (timer parent card) — iOS look ── */
body.theme-apple .card.mt-4,
body.theme-apple .card.mt-4.mb-3 {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(0,0,0,0.04);
    color: var(--ios-fg);
}

/* ============================================================
   TOERNOOI TIMER — kill all sand/cream legacy, iOS native
   ============================================================ */

/* Nuclear: any element with sand-tinted bg → iOS bg */
body.theme-apple [style*="rgba(210, 166"],
body.theme-apple [style*="rgba(245, 230"],
body.theme-apple [style*="rgba(250, 240"],
body.theme-apple [style*="#D2A679"],
body.theme-apple [style*="#d2a679"],
body.theme-apple [style*="#E5BD8E"],
body.theme-apple [style*="#e5bd8e"],
body.theme-apple [style*="#b8915e"] {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* Dual timer container (the cream wrapper around the timer) */
body.theme-apple .dual-timer-container,
body.theme-apple div.dual-timer-container {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
    padding: 14px;
    box-shadow: none;
}

/* Timer section (each of the two columns) */
body.theme-apple .timer-section,
body.theme-apple div.timer-section {
    background: transparent;
    color: var(--ios-fg);
}

/* Timer label (SPEL ACTIEF / OVERTIME) */
body.theme-apple .timer-label,
body.theme-apple .timer-section .timer-label {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 1;
}

/* Big time display (15:00 / 05:00) */
body.theme-apple .time-display,
body.theme-apple .time-display.display-5,
body.theme-apple div.time-display.display-5.fw-bold {
    color: var(--ios-fg);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Timer in fullscreen */
body.theme-apple .fullscreen-timer-text,
body.theme-apple .display-1.fullscreen-timer-text {
    color: var(--ios-fg);
}

/* ============================================================
   FULLSCREEN TIMER — bigger digits + badges for iPad readability
   The fullscreen modal is what the host props up on a side device
   (iPad on a stand, etc.) for everyone on the court to see. The
   default 8rem digits and 11px pill badges are unreadable from any
   distance. Bumped both substantially with viewport-relative sizing
   so it scales nicely from phone landscape up to large iPad.
   ============================================================ */
body.theme-apple #fullscreenTimerModal .fullscreen-timer-text,
body.theme-apple #fullscreenTimerModal .display-1.fullscreen-timer-text {
    font-size: clamp(8rem, 22vw, 22rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.55);
}

body.theme-apple #fullscreenTimerModal .fullscreen-pill-badge {
    font-size: clamp(1.4rem, 3.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.55em 1.4em;
    min-width: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Overtime variant — orange tint so phase is instantly recognisable */
body.theme-apple #fullscreenTimerModal .fullscreen-pill-badge.phase-overtime {
    background: rgba(255, 149, 0, 0.28);
    border-color: rgba(255, 149, 0, 0.65);
    color: #FFE7C2;
}
/* Round badge — outline-only for visual contrast with phase pill */
body.theme-apple #fullscreenTimerModal .fullscreen-pill-badge.fullscreen-round-stroke {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Bigger gap between PLAY/OVERTIME and ROUND badges so they don't crowd */
body.theme-apple #fullscreenTimerModal .d-flex.justify-content-center.align-items-center.mt-3 {
    gap: clamp(20px, 4vw, 56px);
    margin-top: clamp(16px, 3vh, 40px);
}

/* Mobile landscape override — the inline @media in view.html sets
   1.5rem badges + 6rem timer; bump those up too. */
@media (max-width: 991px) and (orientation: landscape) {
    body.theme-apple #fullscreenTimerModal .fullscreen-timer-text {
        font-size: clamp(7rem, 18vw, 14rem);
    }
    body.theme-apple #fullscreenTimerModal .fullscreen-pill-badge {
        font-size: clamp(1.4rem, 3vw, 2.2rem);
        padding: 0.5em 1.2em;
    }
}

/* Timer status text */
body.theme-apple .timer-status {
    color: var(--ios-fg-2);
    font-size: 13px;
}

/* Timer controls row */
body.theme-apple .timer-controls {
    background: transparent;
}

/* Timer button label (Start, Reset, Toeter, etc.) */
body.theme-apple .timer-button-label {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 500;
}

/* Timer toggle button (Play, Pause, Reset, Sound) — iOS circular */
body.theme-apple .timer-toggle-btn,
body.theme-apple .btn.timer-toggle-btn {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 0;
    max-height: 44px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    padding: 0;
    box-shadow: none;
}
body.theme-apple .btn-outline-success.btn-circle.timer-toggle-btn {
    border-color: var(--ios-green);
    color: var(--ios-green);
}
body.theme-apple .btn-outline-secondary.btn-circle.timer-toggle-btn {
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}

/* RONDE 1 badge (the small label below timer) */
body.theme-apple .round-indicator,
body.theme-apple .round-badge,
body.theme-apple [class*="round-display"],
body.theme-apple .ronde-badge {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    letter-spacing: 0.04em;
}

/* Detect the RONDE pill by its background and override */
body.theme-apple .timer-status + *,
body.theme-apple [class*="timer"] .badge {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    border: none;
    box-shadow: none;
}

/* ============================================================
   TABS WRAPPER — make iOS Segmented Control work even if the
   .nav.compact-nav-pills is NOT wrapped in a tinted container
   ============================================================ */
body.theme-apple #nav-tab,
body.theme-apple nav > .nav.nav-fill.compact-nav-pills {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border: 0;
    border-radius: 10px;
    padding: 2px;
    margin: 8px 4px 12px;
    display: flex;
    gap: 0;
}

/* Sometimes the parent is a <nav> with inline styles — flatten */
body.theme-apple nav[style*="background"] {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 8px;
}

/* Make sure individual tab buttons fill equally + iOS look */
body.theme-apple #nav-tab .nav-link,
body.theme-apple nav .nav.compact-nav-pills .nav-link {
    background: transparent;
    color: var(--ios-fg);
    border: none;
    border-radius: 8px;
    flex: 1 1 0;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 600;
}
body.theme-apple #nav-tab .nav-link.active,
body.theme-apple nav .nav.compact-nav-pills .nav-link.active {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

/* ============================================================
   FOLLOW-UP FIXES (tournament page)
   1) Kill old purple radial-gradient on <html> that becomes
      visible when content scrolls past the body.
   2) Stronger accordion-item border so containers are visible.
   3) Baan number badge (.badge.border) text → black.
   ============================================================ */

/* 1) Kill old gradient on <html>; force iOS bg everywhere.
   Tokens live on html:has(body.theme-apple) in _tokens.css — do not use a
   fallback that differs from body or the content wrapper shows a seam. */
html:has(body.theme-apple:not(.theme-dark)),
html.theme-apple-root:has(body.theme-apple:not(.theme-dark)),
body.theme-apple:not(.theme-dark) {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
}

/* 2) Stronger accordion-item / match-details borders for visibility */
body.theme-apple .accordion-item,
body.theme-apple .accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
}
body.theme-apple .accordion-button:not(.collapsed),
body.theme-apple .accordion-button:not(.collapsed) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
body.theme-apple .accordion-body,
body.theme-apple .accordion-body {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
body.theme-apple .match-details,
body.theme-apple .boxscore-container,
body.theme-apple div.match-details,
body.theme-apple div.boxscore-container {
    border: 1px solid rgba(0, 0, 0, 0.14);
}

/* Strip wrapper-accordion border (parent .accordion / .accordion-flush
   around all round-cards had a navy stroke). Items keep their own border. */
body.theme-apple .accordion,
body.theme-apple .accordion.accordion-flush,
body.theme-apple #tournamentRoundsAccordion,
body.theme-apple #tournamentRoundsAccordion.accordion,
body.theme-apple #tournamentRoundsAccordion.accordion.accordion-flush {
    border: none;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

/* ============================================================
   TOURNAMENT TIMER — Start / Reset / Horn all iOS blue
   (was green / orange / blue — user wants consistent blue)
   ============================================================ */
body.theme-apple #timer-toggle-tournament.btn,
body.theme-apple #timer-toggle-tournament.btn.btn-outline-success.btn-circle.timer-toggle-btn,
body.theme-apple #reset-timer-tournament.btn,
body.theme-apple #reset-timer-tournament.btn.btn-outline-warning.btn-circle,
body.theme-apple #horn-button-main.btn,
body.theme-apple #horn-button-tournament.btn,
body.theme-apple #horn-button-main.btn.btn-outline-primary.btn-circle,
body.theme-apple #horn-button-tournament.btn.btn-outline-primary.btn-circle,
body.theme-apple #timer-toggle-tournament,
body.theme-apple #reset-timer-tournament,
body.theme-apple #horn-button-main {
    border-color: var(--ios-tint);
    color: var(--ios-tint);
    background-color: transparent;
    background: transparent;
}
body.theme-apple #timer-toggle-tournament.btn:hover,
body.theme-apple #reset-timer-tournament.btn:hover,
body.theme-apple #horn-button-main.btn:hover,
body.theme-apple #horn-button-tournament.btn:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #fff;
}
body.theme-apple #timer-toggle-tournament.btn i,
body.theme-apple #timer-toggle-tournament.btn svg,
body.theme-apple #timer-toggle-tournament.btn svg *,
body.theme-apple #reset-timer-tournament.btn i,
body.theme-apple #reset-timer-tournament.btn svg,
body.theme-apple #reset-timer-tournament.btn svg *,
body.theme-apple #horn-button-main.btn i,
body.theme-apple #horn-button-main.btn svg,
body.theme-apple #horn-button-main.btn svg *,
body.theme-apple #horn-button-tournament.btn i,
body.theme-apple #horn-button-tournament.btn svg,
body.theme-apple #horn-button-tournament.btn svg *,
body.theme-apple #timer-toggle-tournament svg,
body.theme-apple #reset-timer-tournament svg,
body.theme-apple #horn-button-main svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    fill: none;
}
body.theme-apple #timer-toggle-tournament.btn:hover i,
body.theme-apple #reset-timer-tournament.btn:hover i,
body.theme-apple #horn-button-main.btn:hover i,
body.theme-apple #horn-button-tournament.btn:hover i {
    color: #fff;
    stroke: #fff;
}
/* Active/playing state — solid iOS blue when running */
body.theme-apple #timer-toggle-tournament.btn.btn-success,
body.theme-apple #timer-toggle-tournament.btn.timer-active,
body.theme-apple #timer-toggle-tournament.btn.playing {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #fff;
}

/* Timer button labels under buttons — readable on white card */
body.theme-apple #one-day-timer-container .timer-button-label,
body.theme-apple #one-day-timer-container .small.timer-button-label,
body.theme-apple #one-day-timer-container #timer-toggle-label-tournament {
    color: var(--ios-fg);
    opacity: 1;
    font-weight: 500;
}

body.theme-apple .timer-button-label,
body.theme-apple .small.timer-button-label,
body.theme-apple #timer-toggle-label-tournament {
    color: var(--ios-fg-2);
    opacity: 1;
    font-weight: 500;
}

/* Timer label text inside dual timer (PLAY ACTIVE / OVERTIME / round badge) — black */
body.theme-apple .dual-timer-container .timer-label,
body.theme-apple #play-timer-section .timer-label,
body.theme-apple #switch-timer-section .timer-label,
body.theme-apple .timer-section .timer-label,
body.theme-apple .dual-timer-container .time-display,
body.theme-apple .dual-timer-container #current-round-badge,
body.theme-apple .dual-timer-container .timer-status,
body.theme-apple .dual-timer-container #dual-timer-status {
    color: var(--ios-fg);
}
body.theme-apple #current-round-badge {
    border-color: var(--ios-tint);
    color: var(--ios-tint);
    background: var(--ios-tint-soft);
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-width: 1px;
}

body.theme-apple #one-day-timer-container .timer-status-text,
body.theme-apple #one-day-timer-container #dual-timer-status {
    color: var(--ios-fg-2);
}

/* ============================================================
   FULLSCREEN TIMER MODAL — dark scoreboard look
   ------------------------------------------------------------
   Earlier this was forced to the light iOS surface, but combined
   with the bigger white timer digits added later that became
   white-on-light-grey (unreadable from a distance). A dark deep
   slate is the conventional choice for sport scoreboards — keeps
   white text crisp at a distance on iPad. The rest of the app
   stays in the light iOS theme; only this prop-it-on-a-stand modal
   goes dark.
   ============================================================ */
body.theme-apple #fullscreenTimerModal .modal-content,
body.theme-apple #fullscreenTimerModal .modal-content {
    background: linear-gradient(135deg, #0b0e15 0%, #1a1f2e 50%, #0b0e15 100%);
    background-image: linear-gradient(135deg, #0b0e15 0%, #1a1f2e 50%, #0b0e15 100%);
}
body.theme-apple #fullscreenTimerModal .fullscreen-timer-bg,
body.theme-apple #fullscreenTimerModal .fullscreen-timer-bg {
    background:
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.22), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(0, 122, 255, 0.20), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
    background-image:
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.22), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(0, 122, 255, 0.20), transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.theme-apple #fullscreenTimerModal .modal-body,
body.theme-apple #fullscreenTimerModal .modal-body * {
    color: #FFFFFF;
}
body.theme-apple #fullscreenTimerModal .fullscreen-timer-text {
    color: #FFFFFF;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.45);
}
body.theme-apple #fullscreenTimerModal .fullscreen-pill-badge.phase-overtime {
    background: rgba(255, 149, 0, 0.30);
    background-image: none;
    color: #FFD08A;
    border: 2px solid rgba(255, 149, 0, 0.7);
}
body.theme-apple #fullscreenTimerModal .fullscreen-round-stroke,
body.theme-apple #fullscreenTimerModal .fullscreen-round-stroke,
body.theme-apple #fullscreenTimerModal #fullscreen-round-badge {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: none;
    text-shadow: none;
}
/* Inner round-number span: the global `.modal-body *` rule above paints
   every descendant with --ios-fg (dark grey) — that overrode the round
   badge's blue --ios-tint, leaving the "R" blue and the "1" grey. Force
   the child span (and any other child of the round badge) to inherit
   the badge's blue color. */
body.theme-apple #fullscreenTimerModal #fullscreen-round-badge *,
body.theme-apple #fullscreenTimerModal #fullscreen-round-number {
    color: inherit;
}

/* Fullscreen logo — white PNG on dark scoreboard bg, no invert needed */
body.theme-apple #fullscreenTimerModal .fullscreen-logo,
body.theme-apple #fullscreenTimerModal img.fullscreen-logo {
    filter: none;
    -webkit-filter: none;
    opacity: 0.9;
}

/* ============================================================
   RECORD MATCH SCORE MODAL — iOS native (was dark navy)
   ============================================================ */
body.theme-apple #recordScoreModal .modal-content,
body.theme-apple #recordScoreModal .modal-content,
body.theme-apple.modal-open #recordScoreModal .modal-content,
body.theme-apple .modal.score-modal .modal-content,
body.theme-apple .score-modal.modal .modal-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    color: var(--ios-fg);
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
body.theme-apple #recordScoreModal .rsm-header,
body.theme-apple #recordScoreModal .modal-header,
body.theme-apple .modal.score-modal .modal-header,
body.theme-apple .score-modal.modal .modal-header,
body.theme-apple #recordScoreModal .rsm-footer,
body.theme-apple #recordScoreModal .modal-footer,
body.theme-apple .modal.score-modal .modal-footer,
body.theme-apple .score-modal.modal .modal-footer {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
}
body.theme-apple #recordScoreModal .rsm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ios-separator-soft);
}
body.theme-apple #recordScoreModal .rsm-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ios-separator-soft);
}
body.theme-apple #recordScoreModal .rsm-title,
body.theme-apple #recordScoreModal h5,
body.theme-apple #recordScoreModal .modal-title {
    color: var(--ios-fg);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}
body.theme-apple #recordScoreModal .btn-close {
    filter: none;
    opacity: 0.6;
}
/* Score sections (inner cards) */
body.theme-apple #recordScoreModal .score-section,
body.theme-apple #recordScoreModal .stats-section,
body.theme-apple .modal.score-modal .score-section,
body.theme-apple .modal.score-modal .stats-section {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 12px;
    color: var(--ios-fg);
    box-shadow: none;
}
body.theme-apple #recordScoreModal .score-row.header,
body.theme-apple #recordScoreModal .player-row.header,
body.theme-apple #recordScoreModal .stats-section h6,
body.theme-apple #recordScoreModal .stats-section h6.mb-0 {
    color: var(--ios-fg-2);
    font-weight: 600;
}
body.theme-apple #recordScoreModal .player-names,
body.theme-apple #recordScoreModal .player-name {
    color: var(--ios-fg);
    font-weight: 600;
}
/* Number inputs */
body.theme-apple #recordScoreModal .score-input,
body.theme-apple #recordScoreModal .stat-input,
body.theme-apple .modal.score-modal .score-input,
body.theme-apple .modal.score-modal .stat-input {
    background: #FFFFFF;
    background-color: #FFFFFF;
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 10px;
    font-weight: 600;
    box-shadow: none;
}
body.theme-apple #recordScoreModal .score-input:focus,
body.theme-apple #recordScoreModal .stat-input:focus {
    background: #FFFFFF;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
    color: var(--ios-fg);
    outline: none;
}
/* Help-circle next to BOC/BOCR labels — blue */
body.theme-apple #recordScoreModal .rsm-stat-help,
body.theme-apple #recordScoreModal i.rsm-stat-help,
body.theme-apple #recordScoreModal svg.rsm-stat-help {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
/* One Day Tournament info callout */
body.theme-apple #recordScoreModal .rsm-info-callout {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: 1px solid rgba(0, 122, 255, 0.20);
    border-radius: 10px;
    color: var(--ios-fg);
}
body.theme-apple #recordScoreModal .rsm-info-callout small,
body.theme-apple #recordScoreModal .rsm-info-callout svg,
body.theme-apple #recordScoreModal .rsm-info-callout i {
    color: var(--ios-fg);
    stroke: var(--ios-tint);
}
/* Footer buttons — Cancel (subtle) + Save (solid iOS blue) */
body.theme-apple #recordScoreModal .rsm-cancel,
body.theme-apple .modal.score-modal .btn.rsm-cancel,
body.theme-apple #recordScoreModal .btn.btn-gradient-teal {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--ios-tint);
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
}
body.theme-apple #recordScoreModal .rsm-cancel:hover {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
}
body.theme-apple #recordScoreModal .rsm-save,
body.theme-apple .modal.score-modal .btn.rsm-save,
body.theme-apple #recordScoreModal .btn.btn-gradient-peach,
body.theme-apple #recordScoreModal .save-score-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    box-shadow: none;
}
body.theme-apple #recordScoreModal .rsm-save:hover,
body.theme-apple #recordScoreModal .save-score-btn:hover {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    color: #fff;
}

/* BOC / BOCR info sub-modals (created dynamically) — same iOS treatment */
body.theme-apple #bocInfoModal .modal-content,
body.theme-apple #bocrInfoModal .modal-content,
body.theme-apple #bocInfoModal .modal-content,
body.theme-apple #bocrInfoModal .modal-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    color: var(--ios-fg);
}
body.theme-apple #bocInfoModal .modal-header,
body.theme-apple #bocrInfoModal .modal-header,
body.theme-apple #bocInfoModal .modal-footer,
body.theme-apple #bocrInfoModal .modal-footer {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border-color: var(--ios-separator-soft);
}
body.theme-apple #bocInfoModal .modal-title,
body.theme-apple #bocrInfoModal .modal-title,
body.theme-apple #bocInfoModal .modal-body,
body.theme-apple #bocrInfoModal .modal-body,
body.theme-apple #bocInfoModal p,
body.theme-apple #bocrInfoModal p,
body.theme-apple #bocInfoModal strong,
body.theme-apple #bocrInfoModal strong {
    color: var(--ios-fg);
}
body.theme-apple #bocInfoModal .btn-close,
body.theme-apple #bocrInfoModal .btn-close {
    filter: none;
}

/* ============================================================
   TOURNAMENT TIMER HELP MODAL — iOS white modal + blue Close
   ============================================================ */
body.theme-apple #tournamentTimerHelpModal .modal-content,
body.theme-apple #tournamentTimerHelpModal .modal-content {
    background: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
}
body.theme-apple #tournamentTimerHelpModal .modal-title,
body.theme-apple #tournamentTimerHelpModal .modal-body,
body.theme-apple #tournamentTimerHelpModal .modal-body p,
body.theme-apple #tournamentTimerHelpModal .modal-body strong {
    color: var(--ios-fg);
}
body.theme-apple #tournamentTimerHelpModal .btn-close.btn-close-white {
    filter: none;
}
/* Close button (modal-footer) — solid iOS blue with white text */
body.theme-apple #tournamentTimerHelpModal .modal-footer .btn,
body.theme-apple #tournamentTimerHelpModal .modal-footer .btn.btn-secondary,
body.theme-apple #tournamentTimerHelpModal .modal-footer .btn-secondary {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    color: #ffffff;
    font-weight: 600;
    border-radius: 12px;
    padding: 12px 16px;
}

/* ============================================================
   TIMER SETTINGS MODAL — iOS light surface (default)
   ============================================================ */
body.theme-apple #timerSettingsModal .modal-content {
    background: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    color: var(--ios-fg);
}
body.theme-apple #timerSettingsModal .modal-header,
body.theme-apple #timerSettingsModal .modal-footer {
    border-color: var(--ios-separator-soft);
}
body.theme-apple #timerSettingsModal .modal-title,
body.theme-apple #timerSettingsModal .form-label,
body.theme-apple #timerSettingsModal label {
    color: var(--ios-fg);
    font-weight: 600;
}
body.theme-apple #timerSettingsModal .timer-settings-modal-icon {
    width: 16px;
    height: 16px;
    color: var(--ios-fg-2);
    stroke: var(--ios-fg-2);
}
body.theme-apple #timerSettingsModal .timer-settings-label-hint {
    color: var(--ios-fg-2);
    font-size: 0.78rem;
    font-weight: 400;
    margin-left: 4px;
}
body.theme-apple #timerSettingsModal .form-control,
body.theme-apple #timerSettingsModal input.form-control {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 10px;
    padding: 10px 14px;
}
body.theme-apple #timerSettingsModal .form-control:focus {
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px var(--ios-tint-soft);
}
body.theme-apple #timerSettingsModal .timer-settings-breakdown,
body.theme-apple #timerSettingsModal #ts-breakdown {
    color: var(--ios-fg-2);
    font-size: 0.82rem;
    min-height: 1.2em;
}
body.theme-apple #timerSettingsModal .ts-info-callout {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: 1px solid rgba(0, 122, 255, 0.20);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: var(--ios-fg);
    line-height: 1.4;
}
body.theme-apple #timerSettingsModal .btn-close {
    filter: none;
    opacity: 0.55;
}
/* No colours for these two any more: the footer uses the shared
   .ep-modal-actions pair, the same black CTA and grey cancel as every other
   sheet. An id-scoped blue here quietly outranked that. */

/* ============================================================
   OAUTH BUTTONS — "Sign in with Apple" + "Sign in with Google"
   Premium native look following Apple HIG + Google Identity
   Brand Guidelines. Icon left-anchored (absolute) with the
   text optically centered in the full button width.
   ============================================================ */
body.theme-apple .oauth-section,
body.theme-apple .oauth-section {
    margin-top: 22px;
}

/* "or" divider — clean hairline iOS look */
body.theme-apple .oauth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
    color: var(--ios-fg-2);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
body.theme-apple .oauth-divider::before,
body.theme-apple .oauth-divider::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: var(--ios-separator);
}
body.theme-apple .oauth-divider span {
    color: var(--ios-fg-2);
    text-transform: lowercase;
}

/* Stack buttons vertically, capped at iOS-card-friendly width */
body.theme-apple .oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    /* Full width, matching the primary login button above. The old
       max-width: 360px left them visibly narrower than the button they
       sit under on anything wider than a phone. */
    width: 100%;
}

/* The side-by-side row for wider screens lives further down, after the
   .oauth-btn base rules it has to override. */

/* Shared button base — 52px iOS HIG height, 14px radius (iOS card),
   icon ABSOLUTE-LEFT, label centered in the FULL button width.
   This is the look every modern auth UI uses. */
body.theme-apple .oauth-btn,
body.theme-apple a.oauth-btn,
body.theme-apple .login-card a.oauth-btn,
body.theme-apple .login-card #apple-signin-btn.oauth-btn,
body.theme-apple .login-card #google-signin-btn.oauth-btn,
body.theme-apple .register-card a.oauth-btn,
body.theme-apple .register-card #reg-apple-signin-btn.oauth-btn,
body.theme-apple .register-card #reg-google-signin-btn.oauth-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    height: 52px;
    padding: 0 56px;       /* room for icon on the left */
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.1s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    text-align: center;
}
body.theme-apple .oauth-btn:active,
body.theme-apple .login-card a.oauth-btn:active {
    transform: scale(0.985);
}

/* Icon container — absolute left, vertically centered. 24px feels
   right on a 52px button (≈46% of height, matches iOS proportions). */
body.theme-apple .oauth-btn .oauth-btn-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.theme-apple .oauth-btn .oauth-btn-icon svg,
body.theme-apple .login-card #google-signin-btn svg,
body.theme-apple .login-card #apple-signin-btn svg,
body.theme-apple .register-card #reg-google-signin-btn svg,
body.theme-apple .register-card #reg-apple-signin-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}
body.theme-apple .oauth-btn .oauth-btn-label {
    display: inline-block;
}

/* Force the Google button LABEL text to dark — custom.css has
   `.login-card #google-signin-btn *  { color: white }` which makes
   the label invisible on the white surface. Beat it with ID-level
   selectors. */
body.theme-apple .login-card #google-signin-btn .oauth-btn-label,
body.theme-apple .login-card #google-signin-btn span.oauth-btn-label,
body.theme-apple .login-card a#google-signin-btn.oauth-btn-google .oauth-btn-label,
body.theme-apple .register-card #reg-google-signin-btn .oauth-btn-label,
body.theme-apple .register-card #reg-google-signin-btn span.oauth-btn-label,
body.theme-apple .register-card a#reg-google-signin-btn.oauth-btn-google .oauth-btn-label {
    color: #1F1F1F;
}
/* Make sure Apple label stays white (Apple HIG) regardless of cascade */
body.theme-apple .login-card #apple-signin-btn .oauth-btn-label,
body.theme-apple .login-card a#apple-signin-btn.oauth-btn-apple .oauth-btn-label,
body.theme-apple .register-card #reg-apple-signin-btn .oauth-btn-label,
body.theme-apple .register-card a#reg-apple-signin-btn.oauth-btn-apple .oauth-btn-label {
    color: #FFFFFF;
}

/* Apple — pure black background, white text + logo (Apple HIG) */
body.theme-apple .oauth-btn-apple,
body.theme-apple a.oauth-btn-apple,
body.theme-apple .login-card a#apple-signin-btn.oauth-btn-apple,
body.theme-apple .register-card a#reg-apple-signin-btn.oauth-btn-apple,
body.theme-apple .register-card #reg-apple-signin-btn.oauth-btn-apple {
    background: #000000;
    background-color: #000000;
    color: #FFFFFF;
    border: 1px solid #000000;
}
body.theme-apple .oauth-btn-apple:hover,
body.theme-apple .login-card a#apple-signin-btn.oauth-btn-apple:hover,
body.theme-apple .register-card a#reg-apple-signin-btn.oauth-btn-apple:hover {
    background: #1F1F1F;
    background-color: #1F1F1F;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}
body.theme-apple .oauth-btn-apple .oauth-btn-icon svg {
    color: #FFFFFF;        /* path uses currentColor */
    margin-top: -2px;       /* Apple logo optical alignment */
}

/* Google — white surface, dark text, multicolor G (Google Identity Guidelines) */
body.theme-apple .oauth-btn-google,
body.theme-apple a.oauth-btn-google,
body.theme-apple .login-card a#google-signin-btn.oauth-btn-google,
body.theme-apple .register-card a#reg-google-signin-btn.oauth-btn-google,
body.theme-apple .register-card #reg-google-signin-btn.oauth-btn-google {
    background: #FFFFFF;
    background-color: #FFFFFF;
    color: #1F1F1F;
    border: 1px solid rgba(0, 0, 0, 0.13);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
body.theme-apple .oauth-btn-google:hover,
body.theme-apple .login-card a#google-signin-btn.oauth-btn-google:hover,
body.theme-apple .register-card a#reg-google-signin-btn.oauth-btn-google:hover {
    background: #FFFFFF;
    background-color: #FFFFFF;
    color: #1F1F1F;
    border-color: rgba(0, 0, 0, 0.20);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}

/* Tighten the card spacing around OAuth */
body.theme-apple .login-card .oauth-section,
body.theme-apple .register-card .oauth-section {
    margin-bottom: 0;
}

/* ============================================================
   Tablet and desktop: the two providers sit side by side
   (Apple left, Google right) and together span exactly the
   width of the primary login button above them. Phones keep
   the stacked layout -- half of a phone card is too narrow for
   "Inloggen met Google".

   Must come AFTER the .oauth-btn base rules AND repeat their
   ID selectors (#apple-signin-btn etc.): an ID outranks any
   number of classes, so without them the 56px icon gutter
   survives and squeezes the label into an ellipsis.
   ============================================================ */
@media (min-width: 768px) {
    body.theme-apple .oauth-buttons {
        flex-direction: row;
    }
    body.theme-apple .login-card #apple-signin-btn.oauth-btn,
    body.theme-apple .login-card #google-signin-btn.oauth-btn,
    body.theme-apple .register-card #reg-apple-signin-btn.oauth-btn,
    body.theme-apple .register-card #reg-google-signin-btn.oauth-btn {
        flex: 1 1 0;
        min-width: 0;
        /* Half-width buttons can't afford 56px of icon gutter on both
           sides; the icon joins the flow instead of floating left. */
        padding: 0 14px;
        gap: 10px;
    }
    body.theme-apple .login-card #apple-signin-btn .oauth-btn-icon,
    body.theme-apple .login-card #google-signin-btn .oauth-btn-icon,
    body.theme-apple .register-card #reg-apple-signin-btn .oauth-btn-icon,
    body.theme-apple .register-card #reg-google-signin-btn .oauth-btn-icon {
        position: static;
        transform: none;
        flex: 0 0 auto;
    }
    body.theme-apple .login-card #apple-signin-btn .oauth-btn-label,
    body.theme-apple .login-card #google-signin-btn .oauth-btn-label,
    body.theme-apple .register-card #reg-apple-signin-btn .oauth-btn-label,
    body.theme-apple .register-card #reg-google-signin-btn .oauth-btn-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   Restore Google G multi-color fills (custom.css forces all
   .login-card #*-signin-btn svg paths to white,
   making the Google logo invisible on the white button). We
   target each official Google brand color individually.
   ============================================================ */
body.theme-apple .login-card #google-signin-btn svg path[fill="#FFC107"],
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon svg path[fill="#FFC107"] {
    fill: #FFC107;
}
body.theme-apple .login-card #google-signin-btn svg path[fill="#FF3D00"],
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon svg path[fill="#FF3D00"] {
    fill: #FF3D00;
}
body.theme-apple .login-card #google-signin-btn svg path[fill="#4CAF50"],
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon svg path[fill="#4CAF50"] {
    fill: #4CAF50;
}
body.theme-apple .login-card #google-signin-btn svg path[fill="#1976D2"],
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon svg path[fill="#1976D2"] {
    fill: #1976D2;
}
/* Also clear the inherited `color: white` on the icon container so
   `currentColor`-anything inside doesn't go white either. */
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon,
body.theme-apple .login-card #google-signin-btn .oauth-btn-icon * {
    color: initial;
}
/* Register-card variants (when user clones this on a register page) */
body.theme-apple .register-card #reg-google-signin-btn svg path[fill="#FFC107"] { fill: #FFC107; }
body.theme-apple .register-card #reg-google-signin-btn svg path[fill="#FF3D00"] { fill: #FF3D00; }
body.theme-apple .register-card #reg-google-signin-btn svg path[fill="#4CAF50"] { fill: #4CAF50; }
body.theme-apple .register-card #reg-google-signin-btn svg path[fill="#1976D2"] { fill: #1976D2; }

/* ============================================================
   COMPETITION TABS (Matches / Leaderboard / Overview) —
   keep selected tab WHITE always. Old custom.css forced a
   dark navy active state with higher specificity.
   ============================================================ */
body.theme-apple #nav-tab.compact-nav-pills .nav-link.active,
body.theme-apple #nav-tab.compact-nav-pills .nav-link.active:focus,
body.theme-apple #nav-tab.compact-nav-pills .nav-link.active:active,
body.theme-apple #nav-tab.compact-nav-pills .nav-link:focus.active,
body.theme-apple #nav-tab.compact-nav-pills .nav-link:active.active,
body.theme-apple #nav-tab .nav-link.active,
body.theme-apple #nav-tab .nav-link.active:focus,
body.theme-apple #nav-tab .nav-link.active:active,
body.theme-apple .nav.compact-nav-pills .nav-link.active {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    color: var(--ios-fg);
    border: none;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    outline: none;
}
body.theme-apple #nav-tab.compact-nav-pills .nav-link:hover {
    background: var(--ios-surface-hover);
    background-color: var(--ios-surface-hover);
    color: var(--ios-fg);
    border-color: transparent;
}

/* ============================================================
   GP-BADGE (Golden Point ON/OFF) — iOS native toggle switch
   ============================================================ */
body.theme-apple .gp-badge,
body.theme-apple .gp-badge,
body.theme-apple span.gp-badge {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border: none;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.10);
    text-indent: 0;
    width: 60px;
    min-width: 60px;
    height: 30px;
    line-height: 26px;
    padding: 0;
    border-radius: 999px;
    position: relative;
    transition: background 0.2s ease;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
}
/* ON state: text sits LEFT of the knob (which slid to the right) */
body.theme-apple .gp-badge-on,
body.theme-apple .gp-badge-on {
    text-align: left;
    padding-left: 10px;
    padding-right: 32px;
}
/* OFF state: text sits RIGHT of the knob (which is on the left) */
body.theme-apple .gp-badge-off,
body.theme-apple .gp-badge-off {
    text-align: right;
    padding-left: 32px;
    padding-right: 10px;
}
body.theme-apple .gp-badge-on,
body.theme-apple .gp-badge-on {
    background: var(--ios-green);
    background-color: var(--ios-green);
    border-color: var(--ios-green);
}
body.theme-apple .gp-badge-off,
body.theme-apple .gp-badge-off {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border-color: transparent;
}
/* Single knob (iOS toggle thumb). Reuse ::before for both states. */
body.theme-apple .gp-badge::before,
body.theme-apple .gp-badge::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.08);
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
body.theme-apple .gp-badge-on::before,
body.theme-apple .gp-badge-on::before {
    transform: translateX(30px);
}
body.theme-apple .gp-badge-off::after,
body.theme-apple .gp-badge-off::after {
    content: none;
    display: none;
}
/* Clickable hover — subtle dim only */
body.theme-apple .gp-badge-clickable.gp-badge-on:hover,
body.theme-apple .gp-badge-clickable.gp-badge-on:hover::before {
    background-color: #2EAF4F;
    color: transparent;
}
body.theme-apple .gp-badge-clickable.gp-badge-off:hover {
    background-color: rgba(60, 60, 67, 0.24);
}

/* ============================================================
   TOURNAMENT MATCH CARDS — subtle light-grey background
   so each match card pops slightly inside the white accordion.
   ============================================================ */
body.theme-apple #tournamentRoundsAccordion .accordion-body .card,
body.theme-apple #tournamentRoundsAccordion .accordion-body .card-body,
body.theme-apple #tournamentRoundsAccordion .accordion-body .col-md-6 > .card,
body.theme-apple #tournamentRoundsAccordion .accordion-body .col-md-6 > .card > .card-body {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
/* Match-details + boxscore-container nested inside — match the lighter bg */
body.theme-apple #tournamentRoundsAccordion .accordion-body .card .match-details,
body.theme-apple #tournamentRoundsAccordion .accordion-body .card .boxscore-container {
    background: #FFFFFF;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ============================================================
   LEADERBOARD — sticky first two columns (Rank + Player)
   so they stay visible while scrolling horizontally.
   ============================================================ */
body.theme-apple .redesigned-leaderboard,
body.theme-apple .redesigned-leaderboard {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.theme-apple .competition-leaderboard-table {
    border-collapse: separate;
    border-spacing: 0;
}
/* Rank column — first */
body.theme-apple .competition-leaderboard-table thead th:nth-child(1),
body.theme-apple .competition-leaderboard-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    box-shadow: 1px 0 0 var(--ios-separator-soft);
}
body.theme-apple .competition-leaderboard-table thead th:nth-child(1) {
    z-index: 4;
}
/* Player column — second. The left offset = width of first column.
   Rank column renders ~36px wide in this table, so stick at 36px. */
body.theme-apple .competition-leaderboard-table thead th:nth-child(2),
body.theme-apple .competition-leaderboard-table tbody td:nth-child(2) {
    position: sticky;
    left: 36px;
    z-index: 3;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    box-shadow: 1px 0 0 var(--ios-separator-soft);
    min-width: 140px;
}
/* Soft right-edge shadow on the second sticky column via box-shadow.
   This visually separates the pinned columns from the scrolling area. */
body.theme-apple .competition-leaderboard-table thead th:nth-child(2),
body.theme-apple .competition-leaderboard-table tbody td:nth-child(2) {
    box-shadow: 4px 0 6px -4px rgba(0,0,0,0.08), 1px 0 0 var(--ios-separator-soft);
}
body.theme-apple .competition-leaderboard-table thead th:nth-child(2) {
    z-index: 4;
}
/* Hovered row should keep sticky cells visible (no transparent gap) */
body.theme-apple .competition-leaderboard-table tbody tr:hover td:nth-child(1),
body.theme-apple .competition-leaderboard-table tbody tr:hover td:nth-child(2) {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* ============================================================
   TIMER SECTIONS — uniform stroke (PLAY + OVERTIME identical)
   The OVERTIME timer was dimmed with opacity:0.5 which made the
   stroke look different. Restore full opacity, signal "inactive"
   via a subtle muted label color instead.
   ============================================================ */
body.theme-apple .timer-section,
body.theme-apple #play-timer-section,
body.theme-apple #switch-timer-section,
body.theme-apple #switch-timer-section[style*="opacity"] {
    opacity: 1;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    padding: 10px 8px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
/* Inactive timer signal: label fades, not the whole container */
body.theme-apple #switch-timer-section .timer-label,
body.theme-apple #switch-timer-section .time-display {
    color: var(--ios-fg-2);
}
body.theme-apple #switch-timer-section.timer-active .timer-label,
body.theme-apple #switch-timer-section.timer-active .time-display {
    color: var(--ios-fg);
}

/* ============================================================
   COMPETITION OVERVIEW — iOS Settings / Stats redesign
   Replaces dark teal stat tiles + dark navy progress card with
   clean iOS surfaces, big numbers, subtle dividers.
   ============================================================ */
body.theme-apple .competition-overview-card,
body.theme-apple .competition-overview-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 20px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 14px;
}
body.theme-apple .competition-overview-card .card-header-clean,
body.theme-apple .competition-overview-card .card-header-clean {
    background: transparent;
    background-color: transparent;
    border: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    padding: 14px 16px 10px;
}
body.theme-apple .competition-overview-card .card-header-clean h5,
body.theme-apple .competition-overview-card .card-header-clean h6 {
    color: var(--ios-fg-2);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

/* Stats grid → iOS uniform 2-col grid */
body.theme-apple .overview-stats-grid,
body.theme-apple .overview-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    background: transparent;
}
body.theme-apple .overview-stats-grid.desktop-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Stat tile — clean white, dividers instead of borders */
body.theme-apple .overview-stat-item,
body.theme-apple .overview-stat-item {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 72px;
    position: relative;
    text-align: left;
    transition: background 0.15s ease;
}
/* iOS Settings-style dividers between tiles */
body.theme-apple .overview-stats-grid .overview-stat-item {
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .overview-stats-grid .overview-stat-item:nth-child(odd) {
    border-right: 0.5px solid var(--ios-separator-soft);
}
/* Hide bottom border on the last row tiles (CSS approximation) */
body.theme-apple .overview-stats-grid .overview-stat-item:last-child,
body.theme-apple .overview-stats-grid .overview-stat-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}
body.theme-apple .overview-stat-item:hover {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* Big iOS stat number (SF Pro tabular-nums) */
body.theme-apple .overview-stat-item .stat-number,
body.theme-apple .overview-stat-item .stat-number {
    color: var(--ios-fg);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    margin-top: 2px;
}
body.theme-apple .overview-stat-item .stat-label,
body.theme-apple .overview-stat-item .stat-label {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0;
    text-align: left;
}

/* Progress tile — special, gets iOS blue accent on the number */
body.theme-apple .overview-stat-item.progress-item,
body.theme-apple .overview-stat-item.progress-item {
    background: rgba(0, 122, 255, 0.04);
    background-color: rgba(0, 122, 255, 0.04);
}
body.theme-apple .overview-stat-item.progress-item .stat-number,
body.theme-apple .overview-stat-item .stat-number.progress-text {
    color: var(--ios-tint);
    font-size: 26px;
}

/* Status text inside stat tiles (Balanced / Fair / Unbalanced) */
body.theme-apple .stat-status-good { color: var(--ios-green); font-weight: 600; }
body.theme-apple .stat-status-warn { color: var(--ios-orange); font-weight: 600; }
body.theme-apple .stat-status-muted { color: var(--ios-fg-3); }

/* Leaders list (Top Performers) — iOS settings-style rows */
body.theme-apple .leaders-list,
body.theme-apple .leaders-list {
    padding: 0;
    background: transparent;
}
body.theme-apple .leader-item,
body.theme-apple .leader-item {
    background: transparent;
    background-color: transparent;
    border: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    border-radius: 0;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}
body.theme-apple .leader-item:last-child {
    border-bottom: none;
}
body.theme-apple .leader-item:hover {
    background: var(--ios-bg);
}
body.theme-apple .leader-name,
body.theme-apple .leader-name {
    color: var(--ios-fg);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}
body.theme-apple .leader-desc,
body.theme-apple .leader-desc {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 500;
    margin-top: 1px;
}
body.theme-apple .leader-value,
body.theme-apple .leader-value {
    color: var(--ios-tint);
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    background: var(--ios-tint-soft);
    padding: 4px 10px;
    border-radius: 999px;
    min-width: 44px;
    text-align: center;
}

/* Rules grid — same iOS tile treatment as overview-stats-grid */
body.theme-apple .rules-button-grid,
body.theme-apple .rules-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: transparent;
}
body.theme-apple .rules-button-grid.desktop-rules {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
body.theme-apple .rule-button,
body.theme-apple .rule-button {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    text-align: left;
    min-height: 72px;
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .rules-button-grid .rule-button:nth-child(odd) {
    border-right: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .rule-button-label,
body.theme-apple .rule-button-label {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 2px;
}
body.theme-apple .rule-button-value,
body.theme-apple .rule-button-value {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.theme-apple .rules-help-icon-link,
body.theme-apple .rules-help-icon-link {
    color: var(--ios-tint);
    cursor: pointer;
}
body.theme-apple .rules-help-icon-link i,
body.theme-apple .rules-help-icon-link svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* Generic iOS info alert (replaces .alert with brand teal inline) */
body.theme-apple .ios-info-alert,
body.theme-apple .alert.ios-info-alert {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: 1px solid rgba(0, 122, 255, 0.20);
    color: var(--ios-fg);
    border-radius: 12px;
    padding: 12px 14px;
}
body.theme-apple .ios-info-alert i,
body.theme-apple .ios-info-alert svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* ============================================================
   PROFILE PAGE INFO MODALS (ELO, Win Streak, BOC, BOCR, Credits)
   — they all reuse the photo-menu chrome via #eloInfoModal,
   #winStreakInfoModal, #bocInfoModal, #bocrInfoModal,
   #creditsInfoModal. They share the same inline styles
   (`color: white` title + body). Override under one selector.
   ============================================================ */
body.theme-apple #eloInfoModal,
body.theme-apple #winStreakInfoModal,
/* Info modals (ELO / BOC / BOCR / …) — CENTERED dialog on both axes,
   not a bottom sheet. Overrides .photo-menu-modal's bottom anchoring
   and its slide-up animation. */
body.theme-apple #eloInfoModal,
body.theme-apple #winStreakInfoModal,
body.theme-apple #matchesInfoModal,
body.theme-apple #winRateInfoModal,
body.theme-apple #bocInfoModal,
body.theme-apple #bocrInfoModal,
body.theme-apple #creditsInfoModal {
    background: transparent;
    padding: 0;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 420px;
    animation: ppInfoModalIn 0.25s ease-out;
}
@keyframes ppInfoModalIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Panel inside each info modal — share styling with photo menu.
   Roomy padding so the text never hugs the edges; scrolls internally
   if content is taller than the screen. */
body.theme-apple #eloInfoModal .photo-menu-content,
body.theme-apple #winStreakInfoModal .photo-menu-content,
body.theme-apple #matchesInfoModal .photo-menu-content,
body.theme-apple #winRateInfoModal .photo-menu-content,
body.theme-apple #bocInfoModal .photo-menu-content,
body.theme-apple #bocrInfoModal .photo-menu-content,
body.theme-apple #creditsInfoModal .photo-menu-content {
    background: rgba(250, 250, 250, 0.96);
    background-color: rgba(250, 250, 250, 0.96);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none;
    border-radius: 16px;
    padding: 28px 26px 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(0,0,0,0.04);
    overflow-y: auto;
    max-height: min(78vh, 640px);
}

/* Title (first <div> with inline color:white) — iOS modal headline */
body.theme-apple #eloInfoModal .photo-menu-content > div:first-child,
body.theme-apple #winStreakInfoModal .photo-menu-content > div:first-child,
body.theme-apple #matchesInfoModal .photo-menu-content > div:first-child,
body.theme-apple #winRateInfoModal .photo-menu-content > div:first-child,
body.theme-apple #bocInfoModal .photo-menu-content > div:first-child,
body.theme-apple #bocrInfoModal .photo-menu-content > div:first-child,
body.theme-apple #creditsInfoModal .photo-menu-content > div:first-child {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: none;
}

/* Body description text — iOS readable */
body.theme-apple #eloInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #winStreakInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #matchesInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #winRateInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #bocInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #bocrInfoModal .photo-menu-content > div:nth-child(2),
body.theme-apple #creditsInfoModal .photo-menu-content > div:nth-child(2) {
    color: var(--ios-fg-2);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 16px;
}
body.theme-apple #eloInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #winStreakInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #matchesInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #winRateInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #bocInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #bocrInfoModal .photo-menu-content > div:nth-child(2) strong,
body.theme-apple #creditsInfoModal .photo-menu-content > div:nth-child(2) strong {
    color: var(--ios-fg);
    font-weight: 700;
}
body.theme-apple #eloInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #winStreakInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #matchesInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #winRateInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #bocInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #bocrInfoModal .photo-menu-content > div:nth-child(2) p,
body.theme-apple #creditsInfoModal .photo-menu-content > div:nth-child(2) p {
    color: var(--ios-fg-2);
}

/* Close button INSIDE the panel — flat iOS row */
body.theme-apple #eloInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #winStreakInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #matchesInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #winRateInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #bocInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #bocrInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #creditsInfoModal .photo-menu-content .photo-menu-cancel,
body.theme-apple #eloInfoModal button.photo-menu-cancel,
body.theme-apple #winStreakInfoModal button.photo-menu-cancel,
body.theme-apple #matchesInfoModal button.photo-menu-cancel,
body.theme-apple #winRateInfoModal button.photo-menu-cancel,
body.theme-apple #bocInfoModal button.photo-menu-cancel,
body.theme-apple #bocrInfoModal button.photo-menu-cancel,
body.theme-apple #creditsInfoModal button.photo-menu-cancel {
    /* Bleed to the panel edges — must match the panel's 26px side padding.
       The `!important`s override _session-fixes.css's destructive-red
       cancel styling, which is meant for the photo menu's "Annuleren",
       not for a plain "Sluiten" on an info dialog (iOS uses tint blue
       and a single hairline separator there). */
    width: calc(100% + 52px);
    margin: 0 -26px;
    margin-top: 8px;
    border: none !important;
    border-top: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.18)) !important;
    border-radius: 0;
    padding: 16px;
    background: transparent;
    color: var(--ios-tint) !important;
    font-size: 17px;
    font-weight: 600;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple #eloInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #winStreakInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #matchesInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #winRateInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #bocInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #bocrInfoModal .photo-menu-content .photo-menu-cancel:hover,
body.theme-apple #creditsInfoModal .photo-menu-content .photo-menu-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ios-tint);
}
body.theme-apple #eloInfoModal .photo-menu-cancel i,
body.theme-apple #eloInfoModal .photo-menu-cancel svg,
body.theme-apple #winStreakInfoModal .photo-menu-cancel i,
body.theme-apple #winStreakInfoModal .photo-menu-cancel svg,
body.theme-apple #matchesInfoModal .photo-menu-cancel i,
body.theme-apple #matchesInfoModal .photo-menu-cancel svg,
body.theme-apple #winRateInfoModal .photo-menu-cancel i,
body.theme-apple #winRateInfoModal .photo-menu-cancel svg,
body.theme-apple #bocInfoModal .photo-menu-cancel i,
body.theme-apple #bocInfoModal .photo-menu-cancel svg,
body.theme-apple #bocrInfoModal .photo-menu-cancel i,
body.theme-apple #bocrInfoModal .photo-menu-cancel svg,
body.theme-apple #creditsInfoModal .photo-menu-cancel i,
body.theme-apple #creditsInfoModal .photo-menu-cancel svg {
    display: none;
}
/* The label sits in its own <span>, which picks up a white text colour
   in dark mode instead of inheriting the button's tint — force it so
   "Sluiten" reads the same iOS blue in both themes. */
body.theme-apple #eloInfoModal .photo-menu-cancel span,
body.theme-apple #winStreakInfoModal .photo-menu-cancel span,
body.theme-apple #matchesInfoModal .photo-menu-cancel span,
body.theme-apple #winRateInfoModal .photo-menu-cancel span,
body.theme-apple #bocInfoModal .photo-menu-cancel span,
body.theme-apple #bocrInfoModal .photo-menu-cancel span,
body.theme-apple #creditsInfoModal .photo-menu-cancel span {
    color: var(--ios-tint) !important;
}

/* ============================================================
   COMPETITIONS / EDIT page (Toernooi Aanpassen) — iOS native
   Strips the legacy dark navy / white-on-transparent wizard chrome
   inherited from the create-page styles.
   ============================================================ */
body.theme-apple .edit-header-card,
body.theme-apple .edit-header-card {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.20);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .edit-header-card .card-body { background: transparent; }
body.theme-apple .edit-header-card h2 { color: #FFFFFF; letter-spacing: -0.02em; }
body.theme-apple .edit-header-card p { color: rgba(255,255,255,0.85); }

body.theme-apple .edit-wizard-card,
body.theme-apple .edit-wizard-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 20px rgba(0,0,0,0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .edit-wizard-card .card-body { background: transparent; }

/* Wizard inputs — iOS form-control */
body.theme-apple .wizard-input-pill,
body.theme-apple input.wizard-input-pill,
body.theme-apple input.form-control.wizard-input-pill {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 50px;
    padding: 0.75rem 1.25rem;
}
body.theme-apple .wizard-input-pill::placeholder {
    color: var(--ios-fg-3);
}
body.theme-apple .wizard-input-pill:focus {
    background: #FFFFFF;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
    color: var(--ios-fg);
}

/* Wizard option tiles (Yes/No, formats, modes) */
body.theme-apple .wizard-option-btn,
body.theme-apple button.wizard-option-btn {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 2px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 14px;
    font-weight: 600;
}
body.theme-apple .wizard-option-btn:hover {
    background: var(--ios-surface-hover);
    border-color: var(--ios-separator);
}
body.theme-apple .wizard-option-btn.selected {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border-color: var(--ios-tint);
    border-width: 2px;
    color: var(--ios-tint);
}

/* Section heading inside wizard form */
body.theme-apple .wizard-form-section h6,
body.theme-apple .wizard-form-section h6 {
    color: var(--ios-fg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Primary save button — iOS solid blue pill */
body.theme-apple .wizard-nav-btn-primary,
body.theme-apple button.wizard-nav-btn-primary,
body.theme-apple .wizard-nav-btn-primary.ios-blue-solid-pill {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
    text-shadow: none;
    transition: transform 0.1s ease, box-shadow 0.18s ease;
}
body.theme-apple .wizard-nav-btn-primary:hover {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    background-image: none;
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.30);
    transform: translateY(-1px) scale(1.02);
}

/* Read-only settings section — iOS subtle info card */
body.theme-apple .readonly-settings,
body.theme-apple .readonly-settings {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
}
body.theme-apple .readonly-settings-label {
    color: var(--ios-fg-2);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Attendance section card */
body.theme-apple .attendance-section,
/* Was tinted with the old brand orange, which outranked the page's own
   neutral rule and left an orange box sitting in an otherwise plain form.
   Managing who turns up is routine, not a warning. */
body.theme-apple .attendance-section {
    background: var(--ios-fill-subtle);
    background-color: var(--ios-fill-subtle);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
}

/* Helper classes */
body.theme-apple .ios-section-heading,
body.theme-apple h6.ios-section-heading {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.theme-apple .ios-blue-soft-pill,
body.theme-apple button.ios-blue-soft-pill,
body.theme-apple .attendance-section button.btn.ios-blue-soft-pill,
body.theme-apple body button.btn.ios-blue-soft-pill {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    background-image: none;
    color: var(--ios-tint);
    border: 1px solid rgba(0, 122, 255, 0.22);
    border-radius: 50px;
    padding: 0.75rem;
    font-weight: 600;
    box-shadow: none;
}
body.theme-apple .ios-blue-soft-pill:hover,
body.theme-apple button.ios-blue-soft-pill:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border-color: var(--ios-tint);
}
body.theme-apple .ios-blue-soft-pill svg,
body.theme-apple .ios-blue-soft-pill i {
    stroke: currentColor;
}
body.theme-apple .ios-ghost-pill,
body.theme-apple a.ios-ghost-pill,
body.theme-apple button.ios-ghost-pill,
body.theme-apple a.btn.ios-ghost-pill:not(.dropdown-toggle),
body.theme-apple button.btn.ios-ghost-pill:not(.dropdown-toggle),
body.theme-apple body a.btn.ios-ghost-pill:not(.dropdown-toggle),
body.theme-apple body button.btn.ios-ghost-pill:not(.dropdown-toggle) {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-decoration: none;
}
body.theme-apple .ios-ghost-pill:hover,
body.theme-apple a.btn.ios-ghost-pill:hover,
body.theme-apple button.btn.ios-ghost-pill:hover {
    background: var(--ios-surface-hover);
    background-color: var(--ios-surface-hover);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}

/* Manage Attendance modal (#manageAttendanceModal) — iOS sheet */
body.theme-apple #manageAttendanceModal .modal-content,
body.theme-apple #manageAttendanceModal .modal-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    border-radius: 18px;
    color: var(--ios-fg);
}
body.theme-apple #manageAttendanceModal h6,
body.theme-apple #manageAttendanceModal .modal-title,
body.theme-apple #manageAttendanceModal label {
    color: var(--ios-fg);
}
body.theme-apple #manageAttendanceModal .form-control {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 12px;
}
body.theme-apple #manageAttendanceModal .form-control:focus {
    background: #FFFFFF;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
    color: var(--ios-fg);
}
body.theme-apple #manageAttendanceModal .alert {
    border-radius: 12px;
}

/* ============================================================
   COMPETITIONS LOADING SPINNER — sits right under the
   "Mijn competities" section header, horizontally centered.
   (Was vertically centered in a 100dvh-minus-320 container,
   which pushed it off-screen on tall layouts.)
   ============================================================ */
body.theme-apple .ios-loading-placeholder,
body.theme-apple #loading-placeholder.ios-loading-placeholder {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 16px;
    align-items: flex-start;
}
body.theme-apple .ios-loading-spinner,
body.theme-apple .spinner-border.ios-loading-spinner {
    width: 26px;
    height: 26px;
    border-width: 2.5px;
    color: var(--ios-tint);
    border-color: rgba(0, 122, 255, 0.18);
    border-right-color: var(--ios-tint);
    border-top-color: var(--ios-tint);
    animation: ios-spinner-spin 0.85s linear infinite;
}
@keyframes ios-spinner-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   GLOBAL BOOTSTRAP MODAL → iOS ACTION SHEET
   Every .modal.fade across the app (sort, add-folder, move-to-
   folder, etc.) becomes a floating bottom-anchored frosted-
   white sheet — the same look as the photo menu on the profile
   page. Opt-out via .modal--fullscreen on modals that need to
   stay edge-to-edge (the fullscreen timer + QR modals which set
   their own custom positioning).
   ============================================================ */

/* Backdrop — softer iOS-style dim with blur */
body.theme-apple .modal-backdrop,
body.theme-apple .modal-backdrop.show {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
}

/* Dialog position — bulletproof centering pattern.
   No env(), max(), or inset-inline — those work in modern iOS but I've
   chased too many ghosts. This uses the OLDEST, MOST PROVEN technique:
     position: fixed; left: 0; right: 0; margin: 0 auto; max-width: X;
   The browser sets left edge = 0, right edge = 0, then auto margins
   distribute the leftover space EQUALLY to both sides. This works in
   every browser since 2015. */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    padding: 0;
    max-width: 480px;
    width: 92%;
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
    display: block;
    pointer-events: none;
}
/* Strip Bootstrap's body padding-right (scrollbar compensation when modal
   is open). On iOS PWA this can shift everything right and visually
   un-center modals. */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal),
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) {
    padding-right: 0;
    padding-left: 0;
}
body.theme-apple.modal-open,
html body.theme-apple.modal-open {
    padding-right: 0;
    overflow: hidden;
}
body.theme-apple .modal.fade.show:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog,
body.theme-apple .modal.fade.show:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog,
body.theme-apple .modal.fade.show:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered,
body.theme-apple .modal.fade.show:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Desktop ≥768px: same centered approach, capped width 480px. */
@media (min-width: 768px) {
    body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog,
    body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog,
    body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered,
    body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
        max-width: 480px;
        width: 480px;
        /* transform handled by base rules — translate(-50%, -50%) scale(.96) → scale(1) */
    }
}

/* Content — frosted white floating sheet (matches photo menu) */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content {
    background: rgba(250, 250, 250, 0.96);
    background-color: rgba(250, 250, 250, 0.96);
    background-image: none;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(0,0,0,0.04);
    color: var(--ios-fg);
    overflow: hidden;
}

/* Header — transparent on top of the sheet, hairline divider */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-header,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content > .modal-header,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content > div[style*="padding: 1.5rem"]:first-child {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.18);
    /* Same side margin as the body below it; 18px against the body's 24
       put the title and the words under it on different lines. */
    padding: var(--ep-space-4) var(--ep-space-6);
    color: var(--ios-fg);
}
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-title,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-header h5,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-header h6 {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: none;
}

/* iOS close (×) button — small grey circle */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .btn-close,
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .btn-close.btn-close-white {
    background-color: rgba(60, 60, 67, 0.16);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233C3C43'%3E%3Cpath d='M0.293 0.293a1 1 0 011.414 0L8 6.586l6.293-6.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 0.293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-size: 9px 9px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    opacity: 1;
    filter: none;
    padding: 0;
    transition: background-color 0.15s ease;
}
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .btn-close:hover {
    background-color: rgba(60, 60, 67, 0.28);
}

/* Body — transparent on top of the sheet.
   The padding was 8px 4px, which put every sentence in every modal four
   pixels from the edge of the sheet while the title above it sat on 24.
   This selector outranks the plain .modal-body rule in _base.css, so that
   one never got a say. Same tokens as the header and the footer. */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-body {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg);
    padding: var(--ep-space-4) var(--ep-space-6);
}

/* Footer */
body.theme-apple .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-footer {
    background: transparent;
    background-color: transparent;
    border-top: 0.5px solid rgba(60, 60, 67, 0.18);
    padding: var(--ep-space-3) var(--ep-space-6);
}

/* iOS Sort modal — sort-option rows become iOS Settings-style list rows */
body.theme-apple #sortModal .sort-option,
body.theme-apple #sortModal button.sort-option {
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding: 14px 18px;
    margin: 0;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.10);
    transition: background-color 0.12s ease;
}
body.theme-apple #sortModal .sort-option:last-child,
body.theme-apple #sortModal button[id="add-folder-btn"] {
    border-bottom: none;
}
body.theme-apple #sortModal .sort-option:hover,
body.theme-apple #sortModal .sort-option:active {
    background-color: rgba(0, 0, 0, 0.04);
}
body.theme-apple #sortModal .sort-arrow-up,
body.theme-apple #sortModal .sort-arrow-down,
body.theme-apple #sortModal .sort-check {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
/* "Add Folder" item — iOS blue tinted action */
body.theme-apple #sortModal #add-folder-btn,
body.theme-apple #sortModal button#add-folder-btn {
    background: transparent;
    border: none;
    border-top: 0.5px solid rgba(60, 60, 67, 0.18);
    color: var(--ios-tint);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    margin: 0;
}
body.theme-apple #sortModal #add-folder-btn svg,
body.theme-apple #sortModal #add-folder-btn i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
body.theme-apple #sortModal #add-folder-btn:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* ============================================================
   iOS DESTRUCTIVE PILL — solid red iOS button for irreversible
   actions (Reset Tournament, Delete, etc.)
   ============================================================ */
body.theme-apple .ios-destructive-pill,
body.theme-apple button.ios-destructive-pill,
body.theme-apple button.btn.ios-destructive-pill:not(.dropdown-toggle),
body.theme-apple body button.btn.ios-destructive-pill:not(.dropdown-toggle) {
    background: var(--ios-red);
    background-color: var(--ios-red);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 0.7rem 1.2rem;
    box-shadow: 0 4px 14px rgba(255, 59, 48, 0.20);
    text-shadow: none;
    transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.18s ease;
    position: relative;
    min-height: 44px;
}
body.theme-apple .ios-destructive-pill:hover,
body.theme-apple button.btn.ios-destructive-pill:not(.dropdown-toggle):hover {
    background: #D72A24;
    background-color: #D72A24;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 59, 48, 0.28);
}
body.theme-apple .ios-destructive-pill:active {
    transform: scale(0.985);
}
body.theme-apple .ios-destructive-pill:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
body.theme-apple .ios-destructive-pill .ios-btn-spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
body.theme-apple .ios-destructive-pill .ios-btn-spinner .spinner-border {
    color: #FFFFFF;
    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
}

/* iOS modal layout helpers (used inside the Reset Tournament modal etc.) */
body.theme-apple .ios-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
body.theme-apple .ios-modal-body-text {
    color: var(--ios-fg);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
}
body.theme-apple .ios-alert-warning {
    background: rgba(255, 59, 48, 0.10);
    background-color: rgba(255, 59, 48, 0.10);
    border: 1px solid rgba(255, 59, 48, 0.22);
    color: var(--ios-fg);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.9rem;
}
body.theme-apple .ios-alert-warning strong {
    color: var(--ios-red);
    font-weight: 700;
}
body.theme-apple .ios-alert-warning svg,
body.theme-apple .ios-alert-warning i {
    color: var(--ios-red);
    stroke: var(--ios-red);
}

/* iOS Create Modal — opens from the + / "Toevoegen" button.
   Two list rows: New competition + New folder. iOS Settings row
   pattern with icon-square, title/sub stack, chevron right. */
body.theme-apple #createModal .modal-body,
body.theme-apple #createModal .modal-body {
    padding: 4px 8px 8px;
}
body.theme-apple #createModal .create-option,
body.theme-apple #createModal a.create-option,
body.theme-apple #createModal button.create-option {
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--ios-fg);
    text-decoration: none;
    text-align: left;
    padding: 14px 14px;
    margin: 0;
    width: 100%;
    gap: 14px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.10);
    transition: background-color 0.12s ease;
}
body.theme-apple #createModal .create-option:last-child {
    border-bottom: none;
}
body.theme-apple #createModal .create-option:hover,
body.theme-apple #createModal .create-option:active {
    background-color: rgba(0, 0, 0, 0.04);
}

body.theme-apple #createModal .create-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.theme-apple #createModal .create-option-icon svg,
body.theme-apple #createModal .create-option-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}
body.theme-apple #createModal .create-option-icon-blue {
    background: rgba(0, 122, 255, 0.14);
    color: var(--ios-tint);
}
body.theme-apple #createModal .create-option-icon-blue svg,
body.theme-apple #createModal .create-option-icon-blue i {
    stroke: var(--ios-tint);
}
body.theme-apple #createModal .create-option-icon-orange {
    background: rgba(255, 149, 0, 0.16);
    color: #B26A00;
}
body.theme-apple #createModal .create-option-icon-orange svg,
body.theme-apple #createModal .create-option-icon-orange i {
    stroke: #B26A00;
}

body.theme-apple #createModal .create-option-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.theme-apple #createModal .create-option-title {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
body.theme-apple #createModal .create-option-sub {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 400;
    margin-top: 2px;
}
body.theme-apple #createModal .create-option-chevron {
    width: 16px;
    height: 16px;
    color: var(--ios-fg-3);
    stroke: var(--ios-fg-3);
    stroke-width: 2.5;
    flex-shrink: 0;
}

/* iOS Add Folder / Move to Folder modals — clean form layout */
body.theme-apple #addFolderModal .form-label,
body.theme-apple #moveToFolderModal .form-label {
    color: var(--ios-fg);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
body.theme-apple #addFolderModal .form-control,
body.theme-apple #moveToFolderModal .form-control,
body.theme-apple #addFolderModal input.form-control {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 16px;
}
body.theme-apple #addFolderModal .form-control:focus,
body.theme-apple #moveToFolderModal .form-control:focus {
    background: #FFFFFF;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}
/* Primary Create Folder button — solid iOS blue pill */
body.theme-apple #addFolderModal #create-folder-btn,
body.theme-apple #addFolderModal button#create-folder-btn,
body.theme-apple #addFolderModal button.btn#create-folder-btn:not(.dropdown-toggle) {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 14px;
    text-shadow: none;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.18);
}
body.theme-apple #addFolderModal #create-folder-btn:hover {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    color: #FFFFFF;
}

/* Move to Folder modal — folder list items */
body.theme-apple #moveToFolderModal .folder-option,
body.theme-apple #moveToFolderModal button.folder-option {
    background: transparent;
    border: none;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.10);
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    padding: 14px 18px;
    margin: 0;
    width: 100%;
    transition: background-color 0.12s ease;
}
body.theme-apple #moveToFolderModal .folder-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
body.theme-apple #moveToFolderModal .folder-option:last-child {
    border-bottom: none;
}

/* ============================================================
   PHOTO MENU — iOS Action Sheet (clean white bottom sheet)
   Was: dark navy `rgba(17, 24, 39, 0.95)` panel with white
   semi-transparent option buttons. Now: iOS native Action Sheet.
   ============================================================ */
body.theme-apple #photoMenuModal,
body.theme-apple #photoMenuModal {
    background: transparent;
    padding: 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}
body.theme-apple .photo-menu-backdrop,
body.theme-apple .photo-menu-backdrop {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* iOS Action Sheet panel — white, rounded all corners (floating, not
   edge-attached), with subtle shadow */
body.theme-apple #photoMenuModal .photo-menu-content,
body.theme-apple #photoMenuModal .photo-menu-content {
    background: rgba(250, 250, 250, 0.96);
    background-color: rgba(250, 250, 250, 0.96);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-bottom: 8px;
}

/* Each option = iOS action-sheet row (clean, hairline divider between) */
body.theme-apple #photoMenuModal .photo-menu-option,
body.theme-apple #photoMenuModal button.photo-menu-option {
    width: 100%;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-top: 0.5px solid rgba(60, 60, 67, 0.18);
    color: var(--ios-tint);
    text-align: center;
    margin: 0;
    padding: 18px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transform: none;
    transition: background-color 0.12s ease;
}
body.theme-apple #photoMenuModal .photo-menu-option:first-child {
    border-top: none;
}
body.theme-apple #photoMenuModal .photo-menu-option:hover,
body.theme-apple #photoMenuModal .photo-menu-option:active {
    background: rgba(0, 0, 0, 0.04);
    background-color: rgba(0, 0, 0, 0.04);
    transform: none;
}

/* Icons keep iOS blue tint */
body.theme-apple #photoMenuModal .photo-menu-option i,
body.theme-apple #photoMenuModal .photo-menu-option svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

/* Cancel — separate floating pill with bold black text (iOS pattern) */
body.theme-apple #photoMenuModal .photo-menu-cancel,
body.theme-apple #photoMenuModal button.photo-menu-cancel,
body.theme-apple #photoMenuModal button.photo-menu-option.photo-menu-cancel {
    background: rgba(250, 250, 250, 0.96);
    background-color: rgba(250, 250, 250, 0.96);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: none;
    border-top: none;
    border-radius: 14px;
    color: var(--ios-fg);
    font-weight: 600;
    margin-top: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(0,0,0,0.04);
    overflow: hidden;
}
body.theme-apple #photoMenuModal .photo-menu-cancel:hover {
    background: rgba(240, 240, 240, 0.96);
    background-color: rgba(240, 240, 240, 0.96);
    color: var(--ios-fg);
}
body.theme-apple #photoMenuModal .photo-menu-cancel i,
body.theme-apple #photoMenuModal .photo-menu-cancel svg {
    display: none;
}

/* ============================================================
   PROFILE PAGE — Playtomic-inspired iOS native redesign
   Big avatar, ELO level badge, quick-stats row, performance
   list, highlight grid. Clean, premium, scannable.
   ============================================================ */
body.theme-apple .playtomic-profile {
    max-width: 560px;
    margin: 0 auto;
    /* Bottom padding must clear the floating bottom-nav AND the iPhone
       home-bar safe area so the last buttons aren't hidden behind the nav. */
    padding: 12px 12px calc(120px + env(safe-area-inset-bottom, 0px));
}

/* ── Desktop: widescreen website layout ──
   Two-column grid: the hero card becomes a sticky left rail, all other
   sections stack in a wide right column. Feels like a real website
   instead of a stretched phone app. */
@media (min-width: 992px) {
    body.theme-apple .playtomic-profile {
        max-width: 1080px;
        display: grid;
        grid-template-columns: 380px minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
        /* No floating bottom-nav on desktop — normal breathing room. */
        padding: 28px 24px 64px;
    }
    body.theme-apple .playtomic-profile > .pp-hero {
        grid-column: 1;
        /* Span (more than) all content rows so the sticky rail can travel
           the full page height while scrolling. */
        grid-row: 1 / span 40;
        align-self: start;
        position: sticky;
        top: 84px;
        margin-top: 0;
        padding-top: 36px;
        padding-bottom: 30px;
    }
    body.theme-apple .playtomic-profile > *:not(.pp-hero) {
        grid-column: 2;
    }
    /* Highlights: four across on wide screens instead of 2×2. */
    body.theme-apple .playtomic-profile .pp-highlight-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* HERO ─ avatar + name + level badge */
body.theme-apple .pp-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(0, 122, 255, 0.06) 0%, rgba(0, 122, 255, 0) 100%);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 22px;
    padding: 28px 20px 22px;
    text-align: center;
    margin-top: calc(env(safe-area-inset-top, 0px) + 14px);
    margin-bottom: 14px;
    overflow: hidden;
}
body.theme-apple .pp-back,
body.theme-apple a.pp-back {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

body.theme-apple .pp-avatar-wrap {
    display: inline-block;
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.25), rgba(0, 122, 255, 0.05));
    border-radius: 50%;
    margin-bottom: 14px;
}
body.theme-apple .pp-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    display: block;
    cursor: pointer;
    transition: transform 0.18s ease;
}
body.theme-apple .pp-avatar:hover { transform: scale(1.03); }
body.theme-apple .pp-avatar.pp-avatar-placeholder {
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    line-height: 1;
}

body.theme-apple .pp-username {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}
body.theme-apple .pp-fullname {
    color: var(--ios-fg-2);
    font-size: 14px;
    font-weight: 500;
    margin: 4px 0 16px;
}

/* ELO level badge — the Playtomic "level pill" centerpiece */
body.theme-apple .pp-level-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.25);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.18s ease;
}
body.theme-apple .pp-level-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 122, 255, 0.30);
}
body.theme-apple .pp-level-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}
body.theme-apple .pp-level-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
body.theme-apple .pp-level-peak {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.30);
    margin-left: 4px;
}

/* Medals — compact horizontal row */
body.theme-apple .pp-medals {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}
body.theme-apple .pp-medal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 999px;
    padding: 4px 10px 4px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
body.theme-apple .pp-medal-icon { font-size: 16px; line-height: 1; }
body.theme-apple .pp-medal-count {
    color: var(--ios-fg);
    font-variant-numeric: tabular-nums;
}

/* QUICK STATS — 3-tile headline row */
body.theme-apple .pp-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
body.theme-apple .pp-quick-tile {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
    cursor: default;
    transition: background 0.15s ease;
}
body.theme-apple .pp-quick-tile[role="button"] { cursor: pointer; }
body.theme-apple .pp-quick-tile:hover { background: var(--ios-bg); }
body.theme-apple .pp-quick-value {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
body.theme-apple .pp-quick-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--ios-fg-2);
    margin-left: 1px;
}
body.theme-apple .pp-quick-label {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* SECTION CARDS — iOS Settings-style */
body.theme-apple .pp-card {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.04);
    overflow: hidden;
}
body.theme-apple .pp-card-eyebrow {
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 18px 8px;
}

/* PERFORMANCE rows */
body.theme-apple .pp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .pp-row-label {
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.theme-apple .pp-row-value {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.theme-apple .pp-record {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
body.theme-apple .pp-w { color: var(--ios-green); font-weight: 700; }
body.theme-apple .pp-l { color: var(--ios-red); font-weight: 700; }
body.theme-apple .pp-total {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
    letter-spacing: -0.02em;
}

/* HIGHLIGHTS grid */
body.theme-apple .pp-highlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
body.theme-apple .pp-highlight {
    padding: 14px 18px;
    border-top: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .pp-highlight:nth-child(odd) {
    border-right: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .pp-highlight-label {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.theme-apple .pp-highlight-value {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
body.theme-apple .pp-help-icon,
body.theme-apple i.pp-help-icon {
    width: 13px;
    height: 13px;
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    cursor: pointer;
    opacity: 0.7;
}
body.theme-apple .pp-help-icon:hover { opacity: 1; }

/* CREDITS row */
body.theme-apple .pp-credits-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}
body.theme-apple .pp-credits-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.theme-apple .pp-credits-icon svg,
body.theme-apple .pp-credits-icon i {
    width: 20px;
    height: 20px;
    stroke: var(--ios-tint);
}
body.theme-apple .pp-credits-text { flex: 1 1 auto; }
body.theme-apple .pp-credits-title {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.theme-apple .pp-credits-sub {
    color: var(--ios-tint);
    font-size: 13px;
    font-weight: 500;
    margin-top: 1px;
    cursor: pointer;
}
body.theme-apple .pp-credits-value {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ACTIONS — primary + ghost buttons */
body.theme-apple .pp-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
body.theme-apple .pp-btn,
body.theme-apple a.pp-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.18s ease;
    box-shadow: none;
}
body.theme-apple .pp-btn:active { transform: scale(0.985); }
body.theme-apple .pp-btn-primary,
body.theme-apple a.pp-btn-primary,
body.theme-apple .playtomic-profile .pp-actions a.btn.pp-btn-primary,
body.theme-apple .playtomic-profile a.btn.pp-btn.pp-btn-primary {
    background: #000000;
    background-color: #000000;
    background-image: none;
    color: #FFFFFF;
    border: 1px solid #000000;
}
body.theme-apple .pp-btn-primary:hover,
body.theme-apple .playtomic-profile a.btn.pp-btn.pp-btn-primary:hover {
    background: #1F1F1F;
    background-color: #1F1F1F;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
body.theme-apple .pp-btn-ghost,
body.theme-apple a.pp-btn-ghost,
body.theme-apple .playtomic-profile .pp-actions a.btn.pp-btn-ghost,
body.theme-apple .playtomic-profile a.btn.pp-btn.pp-btn-ghost {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
}
body.theme-apple .playtomic-profile a.btn.pp-btn.pp-btn-ghost:hover {
    background: var(--ios-surface-hover);
    background-color: var(--ios-surface-hover);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
}

/* ============================================================
   ALL-CHATS PAGE — the JS in all_chats.html injects hardcoded
   dark inline styles + .text-white classes which become invisible
   on the iOS light background. We force iOS surfaces / dark text
   with aggressive selectors so the chat list is actually readable.
   ============================================================ */
/* Accordion wrapper (one per competition) — iOS card */
body.theme-apple #chatsAccordion .accordion-item,
body.theme-apple #chatsAccordion .accordion-item,
body.theme-apple .all-chats-container .accordion-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* Accordion button (competition header) — white surface, dark text */
body.theme-apple #chatsAccordion .accordion-button,
body.theme-apple #chatsAccordion .accordion-button {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: none;
    font-weight: 600;
    padding: 14px 16px;
    border-radius: 14px;
}
body.theme-apple #chatsAccordion .accordion-button .text-white,
body.theme-apple #chatsAccordion .accordion-button span,
body.theme-apple #chatsAccordion .accordion-button .fw-bold {
    color: var(--ios-fg);
}
body.theme-apple #chatsAccordion .accordion-button:not(.collapsed) {
    background: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
/* Bootstrap default arrow filter strip */
body.theme-apple #chatsAccordion .accordion-button::after {
    filter: none;
}

/* Accordion body wrapping the match list */
body.theme-apple #chatsAccordion .accordion-body,
body.theme-apple #chatsAccordion .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    padding: 0;
    color: var(--ios-fg);
}

/* List group inside (each chat row) */
body.theme-apple #chatsAccordion .list-group,
body.theme-apple #chatsAccordion .list-group-flush {
    background: transparent;
}
body.theme-apple .all-chats-item,
body.theme-apple .chat-link-item,
body.theme-apple a.all-chats-item.list-group-item,
body.theme-apple a.chat-link-item.list-group-item {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg);
    border: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    border-radius: 0;
    padding: 14px 16px;
    text-decoration: none;
}
body.theme-apple .all-chats-item:last-child,
body.theme-apple #chatsAccordion .list-group .all-chats-item:last-child {
    border-bottom: none;
}
body.theme-apple .all-chats-item:hover {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* Force ALL .text-white / .text-white-50 INSIDE chat items → dark.
   Includes both unread (bg-primary text-white) and read states. */
body.theme-apple .all-chats-item .text-white,
body.theme-apple .all-chats-item .text-white-50,
body.theme-apple .all-chats-item .text-muted,
body.theme-apple .all-chats-item h1,
body.theme-apple .all-chats-item h2,
body.theme-apple .all-chats-item h3,
body.theme-apple .all-chats-item h4,
body.theme-apple .all-chats-item h5,
body.theme-apple .all-chats-item h6,
body.theme-apple .all-chats-item span,
body.theme-apple .all-chats-item small,
body.theme-apple .all-chats-item strong {
    color: var(--ios-fg);
}
body.theme-apple .all-chats-item small.text-muted,
body.theme-apple .all-chats-item .text-white-50 {
    color: var(--ios-fg-2);
}

/* Unread state: instead of full blue bg + white text, use iOS-style:
   subtle iOS blue tint background + bold text */
body.theme-apple .all-chats-item.bg-primary {
    background: rgba(0, 122, 255, 0.08);
    background-color: rgba(0, 122, 255, 0.08);
}
body.theme-apple .all-chats-item.bg-primary .text-white {
    color: var(--ios-fg);
    font-weight: 600;
}
body.theme-apple .all-chats-item.bg-primary h3 span,
body.theme-apple .all-chats-item.bg-primary strong {
    color: var(--ios-fg);
}

/* Icons — switch to iOS blue */
body.theme-apple .all-chats-item .text-primary,
body.theme-apple .all-chats-item svg[data-feather="message-square"],
body.theme-apple .all-chats-item svg[data-feather="chevron-right"] {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
body.theme-apple .all-chats-item .text-muted[data-feather],
body.theme-apple .all-chats-item svg.text-muted {
    color: var(--ios-fg-3);
    stroke: var(--ios-fg-3);
}

/* Badge restyles (Completed / Awaiting / Upcoming) */
body.theme-apple .all-chats-item .badge.bg-success {
    background: rgba(52, 199, 89, 0.16);
    background-color: rgba(52, 199, 89, 0.16);
    color: #1A7A37;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}
/* Upcoming/Awaiting badges use lila #978CC2 inline — override to iOS orange/blue */
body.theme-apple .all-chats-item .badge[style*="978CC2"] {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    color: var(--ios-tint);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}
/* Unread count pill on competition header */
body.theme-apple #chatsAccordion .accordion-button .badge.bg-danger {
    background: var(--ios-red);
    background-color: var(--ios-red);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 10px;
}

/* The "no chats yet" alert was styled with lila inline */
body.theme-apple .alert.alert-info[style*="978CC2"],
body.theme-apple .alert.alert-info[style*="151, 140, 194"] {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: 1px solid rgba(0, 122, 255, 0.22);
    color: var(--ios-fg);
    border-radius: 14px;
}
body.theme-apple .alert.alert-info[style*="978CC2"] svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* ============================================================
   ALL-CHATS PAGE v3 — Apple Messages aesthetic.
   Large title, grouped inset lists, avatar circles, time-right,
   unread blue dot, chevrons, fine separators.
   ============================================================ */

/* Page wrapper — pull behind safe-area, neutral bg */
body.theme-apple .ios-messages-page,
body.theme-apple .ios-messages-page {
    background: var(--ios-bg);
    padding: 0 16px 32px;
    max-width: 720px;
    margin: 0 auto;
}

/* Inline unread-count badge — sits next to "Berichten" in the standard
   page header. Compact pill so it doesn't blow up the header height. */
body.theme-apple .ios-msg-large-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    vertical-align: middle;
    transform: translateY(-1px);
}

/* Section header (above each grouped inset list) */
body.theme-apple .ios-msg-section {
    margin-bottom: 26px;
}
body.theme-apple .ios-msg-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 6px;
}
body.theme-apple .ios-msg-section-title {
    flex: 1 1 auto;
    color: var(--ios-fg-2, #6e6e73);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-apple .ios-msg-section-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
}

/* Inset rounded list (Apple grouped list style) */
body.theme-apple .ios-msg-list {
    background: var(--ios-surface);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,0.025), 0 6px 20px rgba(0,0,0,0.04);
}

/* Chat row */
body.theme-apple a.ios-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    color: var(--ios-fg);
    text-decoration: none;
    background: var(--ios-surface);
    position: relative;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    transition: background 0.15s ease;
}
body.theme-apple a.ios-msg-row:last-child {
    border-bottom: none;
}
/* Inset separator (Apple) — starts at row body so it aligns with text */
body.theme-apple a.ios-msg-row:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 0;
    bottom: -0.5px;
    height: 0.5px;
    background: var(--ios-separator-soft);
}
body.theme-apple a.ios-msg-row:hover {
    background: var(--ios-surface-hover);
    color: var(--ios-fg);
}
body.theme-apple a.ios-msg-row:active {
    background: var(--ios-surface-press);
}

/* Unread dot — sits inline after the title text */
body.theme-apple .ios-msg-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ios-tint);
    flex-shrink: 0;
    align-self: center;
    margin: 0 0 0 6px;
}

/* Row body (title + preview) — strictly left-aligned */
body.theme-apple .ios-msg-row-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    text-align: left;
}
body.theme-apple .ios-msg-row-top {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
}
/* Flex spacer pushing the time to the right edge */
body.theme-apple .ios-msg-row-time-flex {
    flex: 1 1 auto;
    min-width: 8px;
}
body.theme-apple .ios-msg-row-title {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ios-fg);
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-apple a.ios-msg-row.has-unread .ios-msg-row-title {
    font-weight: 700;
}
body.theme-apple .ios-msg-row-time {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 12.5px;
    flex-shrink: 0;
    white-space: nowrap;
}
body.theme-apple a.ios-msg-row.has-unread .ios-msg-row-time {
    color: var(--ios-tint);
    font-weight: 600;
}
body.theme-apple .ios-msg-row-preview {
    color: var(--ios-fg-2, #6e6e73);
    font-size: 13.5px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.theme-apple a.ios-msg-row.has-unread .ios-msg-row-preview {
    color: var(--ios-fg);
}
body.theme-apple .ios-msg-row-sender {
    color: var(--ios-fg);
    font-weight: 600;
}
body.theme-apple .ios-msg-row-empty {
    color: var(--ios-fg-3, #8e8e93);
    font-style: italic;
}
body.theme-apple .ios-msg-row-chevron {
    color: var(--ios-fg-3, #c7c7cc);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

/* Empty state */
body.theme-apple .ios-empty-state {
    background: var(--ios-surface);
    border-radius: 14px;
    border: none;
    color: var(--ios-fg);
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0,0,0,0.025), 0 6px 20px rgba(0,0,0,0.04);
}
body.theme-apple .ios-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--ios-tint-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ios-tint);
}

/* Status badges (Completed / Awaiting / Upcoming) */
body.theme-apple .ios-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
body.theme-apple .ios-status-completed {
    background: rgba(52, 199, 89, 0.16);
    color: #1A7A37;
}
body.theme-apple .ios-status-pending {
    background: rgba(255, 149, 0, 0.16);
    color: #C65A00;
}
body.theme-apple .ios-status-upcoming {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}

/* ─── iOS Alert (Mark-All-Read confirm) ─────────────── */
body.theme-apple .ios-alert-content {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 14px;
    overflow: hidden;
    max-width: 280px;
    margin: 0 auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
body.theme-apple .modal-dialog:has(.ios-alert-content) {
    max-width: 280px;
    margin: auto;
}
body.theme-apple .ios-alert-body {
    padding: 18px 16px 16px;
    text-align: center;
}
body.theme-apple .ios-alert-title {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}
body.theme-apple .ios-alert-message {
    color: var(--ios-fg);
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
}
body.theme-apple .ios-alert-actions {
    display: flex;
    border-top: 0.5px solid var(--ios-separator);
    min-height: 44px;
}
body.theme-apple .ios-alert-btn {
    flex: 1 1 50%;
    background: transparent;
    border: none;
    color: var(--ios-tint);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 11px 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
body.theme-apple .ios-alert-btn:not(:last-child) {
    border-right: 0.5px solid var(--ios-separator);
}
body.theme-apple .ios-alert-btn:hover {
    background: rgba(0,0,0,0.04);
}
body.theme-apple .ios-alert-btn-primary {
    font-weight: 700;
}



/* ============================================================
   TAB-CONTAINER SPA
   The 5 bottom-nav targets (competitions, chats, profile, FAQ,
   settings) share a single shell. Each tab's content lives in
   a .tab-slot inside #tab-container; only one is visible at a
   time. Once loaded, a tab stays in the DOM so subsequent
   switches are one-frame visibility toggles — native-app feel. */
#tab-container { position: relative; }
#tab-container > .tab-slot { display: none; }
#tab-container > .tab-slot.active { display: block; }

/* ============================================================
   NATIVE-APP PAGE TRANSITIONS
   Combine three layers so navigation feels Instagram-instant
   across every browser:
     1. View Transitions API → automatic cross-fade on cross-document
        nav. Chrome 111+ / Safari 18+. Zero JS, zero layout shift.
     2. Tap feedback on nav items → instant visual response (dim +
        scale) the moment the user taps a tab, masking the unavoidable
        network/parse time before the new page paints.
     3. Pre-render + prefetch (already in base.html) → the new page is
        usually fully ready before the tap-up event fires. The browser
        just swaps to the prerendered page.
   ============================================================ */
@view-transition { navigation: auto; }
/* Make the cross-fade snappy — default 250ms is too slow for tab nav. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 140ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Tap feedback — fires on pointerdown via JS adding `.is-pressing`.
   iOS Safari only triggers :active reliably after the touch ends, which
   is why we use a JS-managed class for INSTANT feedback on the same
   frame as the finger lands. The `.bottom-nav-floating` ancestor selector
   matches the nav's actual specificity so these styles always win. */
body.theme-apple .mobile-nav-item,
body.theme-apple .mobile-navbar.bottom-nav-floating .mobile-nav-item {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.1s ease, background-color 0.1s ease;
}
body.theme-apple .mobile-nav-item.is-pressing,
body.theme-apple .mobile-nav-item:active,
body.theme-apple .mobile-navbar.bottom-nav-floating .mobile-nav-item.is-pressing,
body.theme-apple .mobile-navbar.bottom-nav-floating .mobile-nav-item:active {
    transform: scale(0.82);
    opacity: 0.55;
    background-color: rgba(0, 122, 255, 0.10);
    border-radius: 14px;
}
/* The icon itself also responds for extra punch */
body.theme-apple .mobile-nav-item.is-pressing svg,
body.theme-apple .mobile-navbar.bottom-nav-floating .mobile-nav-item.is-pressing svg {
    transform: scale(0.94);
    transition: transform 0.1s ease;
}

/* Cover-page slide for non-VTA browsers (Safari < 18).
   Triggered by adding `.is-navigating` to <html> via the JS handler below. */
html.is-navigating body {
    transition: opacity 0.18s ease;
    opacity: 0.55;
}

/* iOS page header (back chevron + centered title).
   NOTE: the back-button style override is SCOPED to this context. Previously
   `.ios-back-btn` alone was redefined here, which silently stripped the
   outlined-border style from EVERY back button in the app, making it
   invisible on coloured backgrounds (e.g. the profile hero gradient).
   The global outlined style at lines 121-160 is now the single source of
   truth — back buttons match across profile, FAQ, settings, chat header. */
body.theme-apple .ios-page-header {
    padding: 8px 4px 4px;
}
body.theme-apple .ios-page-header .ios-back-btn {
    flex: 0 0 38px;
}
body.theme-apple .ios-page-title {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

/* Unread pill (red iOS badge) */
body.theme-apple .ios-unread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ios-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
}

/* Empty state */
body.theme-apple .ios-empty-state {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
}
body.theme-apple .ios-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--ios-tint-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ios-tint);
}

/* iOS accordion */
body.theme-apple .ios-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--ios-separator-soft);
}
body.theme-apple .ios-accordion .accordion-item {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
}
body.theme-apple .ios-accordion .accordion-button {
    background: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 15px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.theme-apple .ios-accordion .accordion-button:not(.collapsed) {
    background: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .ios-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238E8E93'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 14px;
    height: 14px;
    background-size: 14px;
    filter: none;
    flex-shrink: 0;
    margin-left: 4px;
}
body.theme-apple .ios-accordion .accordion-body.ios-accordion-body {
    background: var(--ios-surface);
    padding: 0;
    border-top: 0;
}
body.theme-apple .ios-accordion-title {
    color: var(--ios-fg);
    font-weight: 600;
}

/* Chat rows */
body.theme-apple .ios-chat-rows {
    display: flex;
    flex-direction: column;
}
body.theme-apple a.ios-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--ios-fg);
    background: var(--ios-surface);
    border: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    border-radius: 0;
    transition: background 0.15s ease;
}
body.theme-apple a.ios-chat-row:last-child {
    border-bottom: none;
}
body.theme-apple a.ios-chat-row:hover,
body.theme-apple a.ios-chat-row:focus {
    background: var(--ios-surface-hover);
    color: var(--ios-fg);
}
body.theme-apple a.ios-chat-row:active {
    background: var(--ios-surface-press);
}
body.theme-apple a.ios-chat-row.has-unread {
    background: rgba(0, 122, 255, 0.05);
}

body.theme-apple .ios-chat-row-icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
body.theme-apple .ios-chat-row-icon svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
body.theme-apple .ios-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ios-red);
    border: 2px solid var(--ios-surface);
}

body.theme-apple .ios-chat-row-content {
    min-width: 0;
}
body.theme-apple .ios-chat-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
body.theme-apple .ios-chat-row-title {
    color: var(--ios-fg);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}
body.theme-apple a.ios-chat-row.has-unread .ios-chat-row-title {
    font-weight: 700;
}
body.theme-apple .ios-chat-row-preview {
    color: var(--ios-fg-2, #6e6e73);
    font-size: 13.5px;
    line-height: 1.35;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.theme-apple .ios-chat-row-sender {
    color: var(--ios-fg);
    font-weight: 600;
    margin-right: 4px;
}
body.theme-apple a.ios-chat-row.has-unread .ios-chat-row-message {
    color: var(--ios-fg);
    font-weight: 500;
}
body.theme-apple .ios-chat-row-empty {
    color: var(--ios-fg-3, #8e8e93);
    font-style: italic;
}
body.theme-apple .ios-chat-row-time {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 12px;
    margin-top: 4px;
}
body.theme-apple .ios-chat-row-chevron {
    color: var(--ios-fg-3, #c7c7cc);
    align-self: center;
    flex-shrink: 0;
    padding-left: 4px;
}

/* Status badges (Completed / Awaiting / Upcoming) */
body.theme-apple .ios-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
body.theme-apple .ios-status-completed {
    background: rgba(52, 199, 89, 0.16);
    color: #1A7A37;
}
body.theme-apple .ios-status-pending {
    background: rgba(255, 149, 0, 0.16);
    color: #C65A00;
}
body.theme-apple .ios-status-upcoming {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}

/* iOS Modal pieces used by the Mark-All-Read modal */
body.theme-apple .ios-modal-content {
    background: var(--ios-surface);
    border-radius: 18px;
    border: none;
    overflow: hidden;
}
body.theme-apple .ios-modal-header {
    border-bottom: 0.5px solid var(--ios-separator-soft);
    padding: 14px 16px;
    background: var(--ios-surface);
}
body.theme-apple .ios-modal-title {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.theme-apple .ios-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.theme-apple .ios-modal-body-text {
    color: var(--ios-fg);
    font-size: 14px;
    line-height: 1.4;
}
body.theme-apple .ios-modal-subtext {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 12.5px;
}
body.theme-apple .ios-modal-footer {
    border-top: 0.5px solid var(--ios-separator-soft);
    padding: 10px 12px;
    background: var(--ios-surface);
    gap: 8px;
}
body.theme-apple .btn-ios-primary {
    background: var(--ios-tint);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}
body.theme-apple .btn-ios-primary:hover,
body.theme-apple .btn-ios-primary:focus {
    background: var(--ios-tint-press);
    color: #fff;
}
body.theme-apple .btn-ios-secondary {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}
body.theme-apple .btn-ios-secondary:hover,
body.theme-apple .btn-ios-secondary:focus {
    background: rgba(0, 122, 255, 0.2);
    color: var(--ios-tint);
}

/* ============================================================
   iOS SETTINGS PAGE — Apple Settings-style grouped lists.
   Group headers (small caps grey) above white cards holding
   the rows. Each row has a label-stack (title + sub) on the
   left and a control (iOS switch / link) on the right.
   ============================================================ */
body.theme-apple .ios-settings {
    max-width: 640px;
    margin: 0 auto;
}
body.theme-apple .ios-settings-section {
    margin: 18px 0;
}
body.theme-apple .ios-settings-group-header,
body.theme-apple .ios-settings-subgroup-header {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 16px 6px;
    line-height: 1.2;
}
body.theme-apple .ios-settings-subgroup-header {
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 12px;
    font-weight: 600;
    color: var(--ios-fg-3, #8e8e93);
    padding-top: 14px;
}
body.theme-apple .ios-settings-group-header-row {
    padding-right: 12px;
}
/* Inline section action — Apple Settings convention: pure blue text-link
   (no bg, no border), with optional icon. Right-aligned next to a group
   header. Matches how iOS "Edit", "+", "Done" buttons look. */
body.theme-apple .ios-settings-inline-btn,
body.theme-apple .btn.ios-settings-inline-btn,
body.theme-apple a.ios-settings-inline-btn,
body.theme-apple button.ios-settings-inline-btn {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--ios-tint);
    padding: 6px 4px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
body.theme-apple .ios-settings-inline-btn:hover,
body.theme-apple .ios-settings-inline-btn:focus,
body.theme-apple .ios-settings-inline-btn:focus-visible,
body.theme-apple .ios-settings-inline-btn:active,
body.theme-apple a.ios-settings-inline-btn:hover,
body.theme-apple a.ios-settings-inline-btn:focus,
body.theme-apple a.ios-settings-inline-btn:focus-visible,
body.theme-apple a.ios-settings-inline-btn:active {
    background: transparent;
    background-color: transparent;
    color: var(--ios-tint);
    outline: none;
    text-decoration: none;
}
body.theme-apple .ios-settings-inline-btn:active {
    opacity: 0.55;
}
body.theme-apple .ios-settings-inline-btn svg {
    stroke: var(--ios-tint);
    color: var(--ios-tint);
}

/* Legacy `.ios-settings-inline-btn` placeholder rule (no-op continuation
   so the original block doesn't have a stray opening brace). */
body.theme-apple .ios-settings-inline-btn-legacy {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
}
body.theme-apple .ios-settings-card {
    background: var(--ios-surface);
    border-radius: 14px;
    border: 0.5px solid var(--ios-separator-soft);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.03);
}
body.theme-apple .ios-settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    background: transparent;
}
body.theme-apple .ios-settings-row:last-child {
    border-bottom: none;
}
body.theme-apple .ios-settings-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.theme-apple .ios-settings-row-title {
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
body.theme-apple .ios-settings-row-sub {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 12.5px;
    line-height: 1.35;
}
body.theme-apple .ios-settings-row-empty {
    justify-content: center;
}
body.theme-apple .ios-settings-row-action {
    color: var(--ios-tint);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
body.theme-apple .ios-settings-row-action-danger {
    color: var(--ios-red, #FF3B30);
}

body.theme-apple .ios-settings-subsection {
    margin-top: 0;
}

body.theme-apple .ios-test-result {
    padding: 0 16px 4px;
    font-size: 12.5px;
    line-height: 1.4;
    min-height: 0;
}
body.theme-apple .ios-test-result:empty {
    padding: 0;
}
body.theme-apple .ios-test-result-info { color: var(--ios-fg-3, #8e8e93); }
body.theme-apple .ios-test-result-success { color: var(--ios-green, #34C759); }
body.theme-apple .ios-test-result-error { color: var(--ios-red, #FF3B30); }

body.theme-apple .ios-settings-save {
    padding: 14px 0 28px;
}

/* ── iOS Switch — green when on, grey when off, smooth thumb ── */
body.theme-apple .ios-switch {
    position: relative;
    display: inline-flex;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
}
body.theme-apple .ios-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
body.theme-apple .ios-switch-track {
    position: absolute;
    inset: 0;
    background: #E9E9EB;
    border-radius: 999px;
    transition: background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
body.theme-apple .ios-switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
body.theme-apple .ios-switch input[type="checkbox"]:checked + .ios-switch-track {
    background: #34C759;
}
body.theme-apple .ios-switch input[type="checkbox"]:checked + .ios-switch-track::after {
    transform: translateX(20px);
}
body.theme-apple .ios-switch input[type="checkbox"]:disabled + .ios-switch-track {
    opacity: 0.5;
}
body.theme-apple .ios-switch input[type="checkbox"]:disabled {
    cursor: not-allowed;
}
/* Tap feedback */
body.theme-apple .ios-switch input[type="checkbox"]:active + .ios-switch-track::after {
    width: 31px;
}
body.theme-apple .ios-switch input[type="checkbox"]:checked:active + .ios-switch-track::after {
    transform: translateX(16px);
}

/* ============================================================
   CHAT PAGE v2 — iMessage-style bubbles, iOS header & input.
   Beats fullscreen-chat.css (load order: theme-apple is later).
   ============================================================ */
body.theme-apple .chat-page,
body.theme-apple .chat-container,
body.theme-apple .chat-messages,
html.chat-active-html body.theme-apple,
html.chat-active-body.theme-apple .chat-container {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}
html body.theme-apple.chat-active,
html.chat-active-body.theme-apple {
    background-color: var(--ios-bg);
}

/* Chat header — fixed to the actual screen top so the notch + status bar
   area is ALWAYS covered, no matter how iOS shifts the chat-container
   when the keyboard opens. Critical: every ancestor MUST be free of
   transform/will-change/filter, otherwise iOS treats THAT ancestor as
   the containing block and `position: fixed` no longer means "viewport". */
/* Chat header — plain flex item at the top of the chat-container.
   No position:fixed. With chat-page = 100dvh + flex column, the header
   sits naturally at the top and stays there. The viewport meta
   `interactive-widget=resizes-content` makes iOS shrink 100dvh when
   the keyboard opens, so the layout flexes smoothly without JS. */
body.theme-apple .chat-header,
body.theme-apple .ios-imessage-header {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    color: var(--ios-fg);
    padding: 8px 16px 10px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
}
/* Disable the legacy ::before pseudo-block from fullscreen-chat.css —
   the header is now fixed and its own padding-top covers the safe area. */
body.theme-apple .chat-header::before,
body.theme-apple .ios-imessage-header::before {
    display: none;
}

/* CRITICAL: clear any `transform`/`will-change`/`filter` on the chat
   ancestor chain. `chat-push-animation.css` line 7-15 sets
   `[href*="/chat"]` (matching the chat URL) to `transform: translateZ(0)`
   and `will-change: transform` which would create a new containing block
   and trap `position: fixed` chat-header/chat-input INSIDE the container
   instead of pinning to the viewport. That's exactly the bug behind
   "header missing on PWA". */
html body.theme-apple.chat-active .container.mt-2.pt-2,
html body.theme-apple.chat-active .chat-page,
html body.theme-apple.chat-active .chat-container,
html body.theme-apple.chat-active #tab-container,
html body.theme-apple.chat-active .tab-slot,
html body.theme-apple.chat-active .tab-slot.active,
html.chat-active-body.theme-apple [href*="/chat"] {
    transform: none;
    -webkit-transform: none;
    will-change: auto;
    filter: none;
    -webkit-filter: none;
    contain: none;
    perspective: none;
}

/* Back chevron — matches app-wide .ios-back-btn (36px outlined blue circle).
   The spacer on the right is the same width so the centered title stays
   perfectly centred. */
body.theme-apple .chat-header .ios-back-btn,
body.theme-apple .ios-imessage-back-anchor {
    flex: 0 0 36px;
    margin-top: 0;
}
body.theme-apple .ios-back-btn-spacer {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    visibility: hidden;
}

/* Centered title block — Apple Mail / Messages compact pattern */
body.theme-apple .ios-imessage-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
}
body.theme-apple .ios-imessage-title {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.theme-apple .ios-imessage-subtitle {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

/* Message bubbles — iMessage style. Consecutive bubbles from the same
   sender get a tighter gap (handled via the bubble margin below). */
body.theme-apple .chat-messages {
    padding: 12px 14px 16px;
    gap: 2px;
}
body.theme-apple .message {
    padding: 8px 12px;
    border-radius: 18px;
    max-width: 78%;
    margin-bottom: 2px;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
/* Slightly larger margin after a "received" → "sent" turn or vice versa */
body.theme-apple .message.sent + .message.received,
body.theme-apple .message.received + .message.sent {
    margin-top: 6px;
}
body.theme-apple .message.sent {
    /* iOS dark-grey charcoal — neutral, modern, very Apple. Pairs cleanly
       with the light-grey received bubble (#E9E9EB) without the chat
       feeling like a sea of blue. */
    background: linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%);
    color: #fff;
    align-self: flex-end;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
body.theme-apple .message.sent > div,
body.theme-apple .message.sent > div > span {
    color: #fff;
}
body.theme-apple .message.received {
    background: #E9E9EB;
    color: var(--ios-fg);
    align-self: flex-start;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 4px;
}
body.theme-apple .message.received > div,
body.theme-apple .message.received > div > span {
    color: var(--ios-fg);
}
/* Sender name above received bubbles */
body.theme-apple .message.received .msg-sender,
body.theme-apple .message.received > div:first-child[style*="978CC2"] {
    color: var(--ios-tint);
    font-weight: 700;
    font-size: 11.5px;
    margin-bottom: 2px;
}
body.theme-apple .message.received .msg-text {
    color: var(--ios-fg);
}
body.theme-apple .message.sent .msg-text {
    color: #fff;
}
/* Timestamp inside bubble */
body.theme-apple .message.sent .msg-meta span {
    color: rgba(255, 255, 255, 0.78);
}
body.theme-apple .message.received .msg-meta span {
    color: var(--ios-fg-3, #8e8e93);
}
body.theme-apple .message audio {
    filter: none;
}

/* iOS-style date dividers — subtle pill centered between message groups.
   Matches Apple Messages: small caps-style label on a translucent capsule
   that sits flat against the chat background. */
body.theme-apple .msg-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 14px 0 10px;
    pointer-events: none;
    user-select: none;
}
body.theme-apple .msg-date-divider span {
    display: inline-block;
    background: rgba(120, 120, 128, 0.12);
    color: var(--ios-fg-2, #6e6e73);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 12px;
    border-radius: 999px;
    line-height: 1.3;
}
/* Tighter top margin when the divider is the very first child (no
   message above) — avoids stray whitespace at the top of an empty chat. */
body.theme-apple #messagesContainer > .msg-date-divider:first-child,
body.theme-apple #messagesContainer > #load-more-btn + .msg-date-divider {
    margin-top: 6px;
}

/* Container override — fullscreen-chat.css uses `width: 100vw` which on
   desktop is wider than the viewport's content area (vw includes the
   scrollbar). `100%` matches the visible width on every device.
   Height stays at 100dvh — the fixed-position chat-input rides above
   the keyboard via a separate --keyboard-offset CSS variable instead
   of resizing the container (which fought iOS's focus-scroll). */
html.chat-active-body.theme-apple .container.mt-2.pt-2,
html.chat-active-html body.theme-apple.chat-active .container.mt-2.pt-2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    /* 100dvh on iOS 16+ shrinks WITH the keyboard, so the wrapper
       auto-matches the visible area — no JS chase, no gap above kb. */
    height: 100dvh;
    background: #FFFFFF;
    background-color: #FFFFFF;
}

/* Background continuity — make sure both html AND body bg match the
   chat-input so any pixel that wasn't covered by the container (iOS PWA
   quirks around the home-indicator safe-area, or the brief moment the
   keyboard animates open and the chat-page is still resizing) blends
   in instead of showing as a dark "border" around the chat.
   CRITICAL: html.chat-active-html itself MUST be white — both
   fullscreen-chat.css (dark --wa-header #202c33) AND new-dark.css
   (html { background-color: #0a0e1a } with a rich radial gradient stack)
   paint a near-black bg on <html> that bleeds through as a "zwarte
   stroke" around the chat the instant any descendant shrinks. */
html.chat-active-html,
html.chat-active-html body.theme-apple,
html.chat-active-html body.theme-apple.chat-active {
    background: #FFFFFF;
    background-color: #FFFFFF;
    background-image: none;
}
/* Kill new-dark.css's body::before fixed-position dark-gradient overlay
   while we're on a chat page. Without this, the overlay (z-index: -1)
   shows around the chat-page borders whenever the keyboard reflow leaves
   even one transparent pixel — visible as a dark "ring" around the chat. */
html.chat-active-html body.theme-apple::before,
html.chat-active-html body.theme-apple.chat-active::before,
html.chat-active-html body.theme-apple::after,
html.chat-active-html body.theme-apple.chat-active::after {
    content: none;
    display: none;
    background: none;
    background-image: none;
}

/* NUCLEAR CATCH-ALL — kill every border, border-radius, box-shadow,
   outline on every chat ancestor element. Forces white background on
   ALL of them so no parent can show through as a "stroke." This is a
   defensive override of any unknown rule from another CSS file that
   might paint a rounded-corner frame around the chat content. */
html.chat-active-body.theme-apple .container.mt-2.pt-2,
html.chat-active-body.theme-apple #tab-container,
html.chat-active-body.theme-apple #tab-container .tab-slot,
html.chat-active-body.theme-apple #tab-container .tab-slot.active,
html.chat-active-body.theme-apple .chat-page,
html.chat-active-body.theme-apple .chat-container,
html.chat-active-body.theme-apple .chat-messages,
html.chat-active-body.theme-apple #messagesContainer {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    background: #FFFFFF;
    background-color: #FFFFFF;
    background-image: none;
    margin: 0;
}

/* Hide the persistent #ios-top-cover during chat — it's a fixed-position
   light-grey patch over the notch area that's irrelevant in the chat
   (the chat-header already covers that area) and could be misread as a
   "stroke" at the top of the chat. */
html.chat-active-body.theme-apple #ios-top-cover,
html.chat-active-html body.theme-apple.chat-active #ios-top-cover {
    display: none;
}

/* (Notch-overlay pseudo removed — the chat-header itself is now
   position:fixed and covers the safe-area cleanly. A second overlay
   was creating a visible seam between the gradient feather and the
   solid header.) */

/* CRUCIAL: the new tab-container wrapper between `.container.mt-2.pt-2`
   and `.chat-page` broke the height: 100% chain. Without explicit height
   on these wrappers, `.chat-page { height: 100% }` collapses to content
   size — that's why the chat-container floated in the middle of an empty
   viewport. Propagate the height through them in chat-active mode. */
html body.theme-apple.chat-active #tab-container,
html body.theme-apple.chat-active #tab-container > .tab-slot.active {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* Chat-page IS the flex column container. Height: 100dvh adapts to the
   visual viewport (iOS auto-resizes 100dvh with the keyboard when
   `interactive-widget=resizes-content` is set on the viewport meta).
   Header (flex item) at top, messages (flex:1, scrolls), input (flex
   item) at bottom — exactly the WhatsApp pattern. */
html body.theme-apple.chat-active .tab-slot.active > .chat-page,
html body.theme-apple.chat-active .chat-page {
    display: flex;
    flex-direction: column;
    /* chat-page is 100% of its parent (.container.mt-2.pt-2). The parent
       gets the JS-tracked --visual-vh so when the keyboard opens the
       parent shrinks and chat-page shrinks with it — header stays at
       top, input rides above keyboard. Don't set var(--visual-vh) here
       directly: the parent already does, and double-binding caused the
       flex column to compute its own height before parent updated,
       which is why the input briefly jumped upward. */
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}
html body.theme-apple.chat-active .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ── Chat input bar — iOS native ─────────────────────────────
   Pinned to the actual screen bottom (position:fixed) so:
     1. No grey "border" peeks below it — the white bg meets the
        screen edge cleanly, even when the chat-container itself
        ends a few px short.
     2. Focusing the input doesn't carry it to the top of the page
        (a flex-bottom child gets translated by iOS's auto-scroll;
        a fixed element ignores that scroll). */
/* Chat input — plain flex item at the bottom of the chat-container.
   No position:fixed, no pseudo-elements, no transform. The flex layout
   below (height: 100dvh on the page + interactive-widget=resizes-content
   on the viewport) keeps the header at top and input at bottom while
   the keyboard shrinks the dvh in real time. This is exactly the
   WhatsApp-on-web pattern. */
body.theme-apple .chat-input {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0.5px solid var(--ios-separator-soft);
    padding: 10px 14px;
    /* More room under the field. The old value subtracted 24px from the
       safe-area inset, which on a home-indicator phone left the input
       almost against the bottom edge. The white bar simply extends further
       down, so the run of white below the field is unbroken. */
    padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 6px));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
/* Kill any leftover feather/skirt pseudos from earlier iterations. */
body.theme-apple .chat-input::before,
body.theme-apple .chat-input::after {
    content: none;
    display: none;
}

/* Scrollable messages area between the two fixed bars.
   `display: block` + `overflow-y: auto` is the most reliable scroll
   container on iOS PWA — the inherited `display: flex; justify-content:
   flex-end` from fullscreen-chat.css fought iOS's touch-scroll and
   caused the "kan niet scrollen" symptom. Instead, the inner
   `#messagesContainer` gets `min-height: 100%; flex; justify-content:
   flex-end` to keep chats stuck to the bottom when short while still
   allowing free scrolling when long. */
/* Messages area = the only scrolling region. Header (above) and input
   (below) are now in-flow flex siblings, so chat-messages no longer
   needs huge padding to clear fixed bars — just a small breathing
   gap top + bottom. */
body.theme-apple .chat-messages {
    display: block;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 8px 12px 12px;
    box-sizing: border-box;
    min-height: 0;
}

body.theme-apple #messagesContainer {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    margin-top: 0;
}
body.theme-apple .chat-input-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
}
body.theme-apple .chat-input-field {
    flex: 1 1 0;
    min-width: 0;
}
body.theme-apple .chat-input-form input,
body.theme-apple #match-message-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    background: #FFFFFF;
    /* Always-on thin iOS-blue stroke (matches the focus state) — cleaner
       than a grey resting border that switches blue on focus. */
    border: 1px solid var(--ios-tint);
    box-shadow: none;
    color: var(--ios-fg);
    border-radius: 20px;
    padding: 9px 14px;
    /* iOS Safari auto-zooms on focus when font-size < 16px. Keep this at 16. */
    font-size: 16px;
    line-height: 1.3;
}
body.theme-apple .chat-input-form input:focus,
body.theme-apple #match-message-input:focus,
body.theme-apple .chat-input-form input:focus-visible,
body.theme-apple #match-message-input:focus-visible {
    outline: none;
    border: 1px solid var(--ios-tint);
    box-shadow: none;
    background: #FFFFFF;
}
body.theme-apple #match-message-input::placeholder {
    color: var(--ios-fg-3, #8e8e93);
}

/* Action icons (camera/mic) on the right when input is empty */
body.theme-apple .chat-input-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}
body.theme-apple .chat-input-iconbtn {
    background: transparent;
    border: none;
    padding: 4px;
    margin: 0;
    color: var(--ios-tint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
body.theme-apple .chat-input-iconbtn:active {
    transform: scale(0.88);
    opacity: 0.7;
}
body.theme-apple .chat-input-iconbtn svg {
    stroke: var(--ios-tint);
}

/* Send button — shown only when there's text */
body.theme-apple .chat-input-send,
body.theme-apple #chat-send-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    border-radius: 50%;
    background: var(--ios-tint);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.25);
    transition: transform 0.12s ease, opacity 0.12s ease;
    padding: 0;
}
body.theme-apple .chat-input-send:active,
body.theme-apple #chat-send-btn:active {
    transform: scale(0.92);
}
body.theme-apple .chat-input-send svg path,
body.theme-apple #chat-send-btn svg path {
    fill: #fff;
}

/* Toggle between actions and send via the .has-text class on the form */
body.theme-apple .chat-input-form.has-text .chat-input-actions {
    display: none;
}
body.theme-apple .chat-input-form.has-text .chat-input-send,
body.theme-apple .chat-input-form.has-text #chat-send-btn {
    display: inline-flex;
}

/* Load-more "Eerdere berichten" button */
body.theme-apple #load-more-btn button {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
body.theme-apple #load-more-btn .msg-loading {
    color: var(--ios-fg-3, #8e8e93);
    font-size: 13px;
}

/* Image bubbles — the image IS the bubble. Strip the bubble's
   internal padding so the photo fills the rounded shape edge-to-edge. */
body.theme-apple .message:has(.msg-img) {
    padding: 3px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
body.theme-apple .message.sent:has(.msg-img),
body.theme-apple .message.received:has(.msg-img) {
    background: var(--ios-bg-2, #F2F2F7);
}
body.theme-apple .message .msg-img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    border-radius: 15px;
    cursor: pointer;
    display: block;
    margin: 0;
    object-fit: cover;
}
body.theme-apple .message:has(.msg-img) .msg-meta {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.theme-apple .message:has(.msg-img) .msg-meta span {
    color: #fff;
    font-size: 10.5px;
}
body.theme-apple .message:has(.msg-img) {
    position: relative;
}

/* Audio bubble — give the player breathing room and clip its
   too-wide native chrome to fit nicely inside the bubble. */
body.theme-apple .message:has(.msg-audio) {
    padding: 6px 8px 4px;
    min-width: 220px;
}
body.theme-apple .message .msg-audio {
    max-width: 100%;
    width: 220px;
    height: 36px;
    display: block;
    margin: 0;
}

/* Force the chat container backdrop for safe-area to iOS bg */
html.chat-active-body.theme-apple .container,
body.theme-apple.chat-active .container.mt-2.pt-2 {
    background: var(--ios-bg);
}

/* ============================================================
   LEADERBOARD STICKY COLUMNS — Apple-clean.
   The first two columns (# rank + Player) stay pinned to the
   left while horizontal scrolling reveals score columns. Works
   for every leaderboard variant in the app:
     - templates/leaderboard.html (.leaderboard-table)
     - templates/competitions/view.html (.competition-leaderboard-table)
     - templates/admin/manage_tournament.html (#leaderboardTable)
   The table wrapper must be `.table-responsive` (or any element
   with overflow-x:auto) for sticky to engage.
   ============================================================ */

/* Wrapper: force horizontal scroll behaviour without breaking sticky.
   A `transform`/`filter` on an ancestor would break position:sticky —
   we keep these surfaces clean. */
body.theme-apple .redesigned-leaderboard,
body.theme-apple .table-responsive:has(.leaderboard-table),
body.theme-apple .table-responsive:has(.competition-leaderboard-table),
body.theme-apple .table-responsive:has(#leaderboardTable) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /* No transform/filter on ancestors or sticky breaks */
}

/* Table layout — separate borders required for sticky to render */
body.theme-apple .leaderboard-table,
body.theme-apple .competition-leaderboard-table,
body.theme-apple #leaderboardTable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* First column (#) — sticky to the left edge */
body.theme-apple .leaderboard-table thead th:first-child,
body.theme-apple .leaderboard-table tbody td:first-child,
body.theme-apple .competition-leaderboard-table thead th:first-child,
body.theme-apple .competition-leaderboard-table tbody td:first-child,
body.theme-apple #leaderboardTable thead th:first-child,
body.theme-apple #leaderboardTable tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    box-sizing: border-box;
    text-align: center;
}

/* Second column (Player) — sticky to the right of the first */
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .leaderboard-table tbody td:nth-child(2),
body.theme-apple .competition-leaderboard-table thead th:nth-child(2),
body.theme-apple .competition-leaderboard-table tbody td:nth-child(2),
body.theme-apple #leaderboardTable thead th:nth-child(2),
body.theme-apple #leaderboardTable tbody td:nth-child(2) {
    position: sticky;
    left: 48px;
    z-index: 3;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    min-width: 140px;
    max-width: 200px;
    box-sizing: border-box;
    /* Right edge shadow makes the sticky boundary feel real, like iOS Numbers */
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.10);
}

/* Header (thead) cells also stick to the TOP — and sticky-left + sticky-top
   intersection needs the highest z-index so it stays on top of everything. */
body.theme-apple .leaderboard-table thead th,
body.theme-apple .competition-leaderboard-table thead th,
body.theme-apple #leaderboardTable thead th {
    position: sticky;
    top: 0;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    z-index: 2;
}
body.theme-apple .leaderboard-table thead th:first-child,
body.theme-apple .competition-leaderboard-table thead th:first-child,
body.theme-apple #leaderboardTable thead th:first-child,
body.theme-apple .leaderboard-table thead th:nth-child(2),
body.theme-apple .competition-leaderboard-table thead th:nth-child(2),
body.theme-apple #leaderboardTable thead th:nth-child(2) {
    z-index: 5;
}

/* Make sure row striping doesn't kill the sticky background.
   Apply striping only to non-sticky cells from col 3 onward. */
body.theme-apple .leaderboard-table tbody tr:hover td:first-child,
body.theme-apple .leaderboard-table tbody tr:hover td:nth-child(2),
body.theme-apple .competition-leaderboard-table tbody tr:hover td:first-child,
body.theme-apple .competition-leaderboard-table tbody tr:hover td:nth-child(2),
body.theme-apple #leaderboardTable tbody tr:hover td:first-child,
body.theme-apple #leaderboardTable tbody tr:hover td:nth-child(2) {
    background: var(--ios-surface-hover, #F7F7FA);
    background-color: var(--ios-surface-hover, #F7F7FA);
}

/* The current-user "lb-player-self" highlight needs OPAQUE bg on the
   sticky cells — a translucent rgba lets the scrollable stats columns
   bleed through visually when the user scrolls horizontally (only the
   user's own row showed "double content," because all other rows had
   the solid --ios-surface). Use solid hex tint instead. */
body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self) td:first-child,
body.theme-apple .competition-leaderboard-table tbody tr:has(.lb-player-self) td:nth-child(2) {
    background: #EEF4FF;
    background-color: #EEF4FF;
}

/* When a leaderboard renders without horizontal overflow, the user
   won't scroll → there's nothing to "pin to". But the rules above are
   still safe because sticky degrades to static when there's no scroll. */

/* ============================================================
   TOURNAMENT RULES MODAL — iOS bottom sheet
   Overrides the dark inline styles from view.html
   ============================================================ */
body.theme-apple #rulesModal.show {
    background: rgba(0, 0, 0, 0.32);
}
body.theme-apple #rulesModal .modal-content {
    background: var(--ios-bg);
    border-radius: 18px 18px 0 0;
    border: none;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
body.theme-apple #rulesModal .bottom-sheet-handle {
    background: rgba(60, 60, 67, 0.28);
    width: 38px;
    height: 5px;
    border-radius: 3px;
    margin-top: 10px;
}
body.theme-apple #rulesModal .bottom-sheet-header {
    background: var(--ios-bg);
    border-bottom: none;
    padding: 8px 20px 14px;
}
body.theme-apple #rulesModal .bottom-sheet-header h5 {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
body.theme-apple #rulesModal .bottom-sheet-body {
    background: var(--ios-bg);
    padding: 16px 16px 32px;
}

/* The dark info cards inside the rules sheet → iOS white tiles */
body.theme-apple #rulesModal .rule-explanation-item,
body.theme-apple .rule-explanation-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: none;
    border-left: none;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
}
body.theme-apple #rulesModal .rule-explanation-item h6,
body.theme-apple #rulesModal .rule-explanation-item h6.fw-bold,
body.theme-apple #rulesModal .rule-explanation-item .fw-bold.text-white,
body.theme-apple .rule-explanation-item h6 {
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
body.theme-apple #rulesModal .rule-explanation-item p,
body.theme-apple .rule-explanation-item p {
    color: var(--ios-fg);
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 6px;
}
body.theme-apple #rulesModal .rule-explanation-item p strong,
body.theme-apple .rule-explanation-item p strong {
    color: var(--ios-fg);
    font-weight: 700;
}
body.theme-apple #rulesModal .rule-explanation-item ul,
body.theme-apple .rule-explanation-item ul {
    color: var(--ios-fg);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 0;
}
body.theme-apple #rulesModal .rule-explanation-item li {
    color: var(--ios-fg);
}

/* Golden Point ON/OFF badge inside rules modal */
body.theme-apple #rulesModal .gp-badge.gp-badge-on {
    background: rgba(52, 199, 89, 0.18);
    color: #1A7A37;
    border-radius: 999px;
    font-weight: 700;
}
body.theme-apple #rulesModal .gp-badge.gp-badge-off {
    background: rgba(142, 142, 147, 0.18);
    color: var(--ios-fg-2, #6e6e73);
    border-radius: 999px;
    font-weight: 600;
}

/* Help-icon trigger (vraagteken in card heading) — just the icon, no
   surrounding tinted dot. The previous --ios-tint-soft background +
   border-radius:50% painted a blue circle around the help-circle feather
   icon, which read as a "gek blauw bolletje" naast de vraagteken. */
body.theme-apple .rules-help-icon {
    color: var(--ios-tint);
    background: transparent;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

/* ============================================================
   ADMIN TABLES (Users, Venues) — iOS native polish.
   Action buttons follow the leaderboard Replace/Remove pill
   pattern (iOS soft tint background + tint text + tint stroke).
   Table is horizontally scrollable on touch with proper
   `overscroll-behavior` so the page doesn't fight the table.
   ============================================================ */
body.theme-apple .table-responsive {
    overflow-x: auto;
    /* NOT `visible`. CSS forbids mixing visible with a scrolling axis, so
       `overflow-y: visible` silently computed to `auto` and made every
       table wrapper a vertical scroll container. This file loads after
       _components.css, so this line was quietly undoing the `hidden` set
       on .redesigned-leaderboard there — the leaderboard carries both
       classes. See the overscroll note in _base.css. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    background: var(--ios-surface);
    border-radius: 14px;
    border: 1px solid var(--ios-separator-soft);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.04);
    margin-bottom: 18px;
}
body.theme-apple .table-responsive::-webkit-scrollbar {
    height: 8px;
}
body.theme-apple .table-responsive::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
}
body.theme-apple .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(60,60,67,0.25);
    border-radius: 4px;
}
body.theme-apple .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(60,60,67,0.45);
}

/* iOS table base */
body.theme-apple .table-responsive > .table,
body.theme-apple .table-responsive table.table {
    margin-bottom: 0;
    color: var(--ios-fg);
    background: transparent;
}
body.theme-apple .table-responsive .table thead th,
body.theme-apple .table-responsive table.table thead th {
    background: var(--ios-bg);
    color: var(--ios-fg-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 0.5px solid var(--ios-separator);
    border-top: none;
    padding: 10px 14px;
    white-space: nowrap;
}
body.theme-apple .table-responsive .table tbody td,
body.theme-apple .table-responsive table.table tbody td {
    color: var(--ios-fg);
    background: transparent;
    border-top: 0.5px solid var(--ios-separator-soft);
    padding: 12px 14px;
    vertical-align: middle;
    font-size: 14px;
}
body.theme-apple .table-responsive .table.table-striped tbody tr:nth-of-type(odd) > * {
    background: rgba(0,0,0,0.018);
    --bs-table-bg-type: transparent;
}
body.theme-apple .table-responsive .table tbody tr:hover > * {
    background: rgba(0,122,255,0.04);
}

/* Sort indicator pip — iOS blue */
body.theme-apple .table-responsive .sortable .sort-indicator {
    color: var(--ios-tint);
    font-weight: 700;
}

/* ─── ACTION BUTTONS in admin tables — iOS soft pills
       (same DNA as leaderboard Replace/Remove buttons) ─── */
/* Edit button (was .btn-primary) → iOS blue soft pill */
body.theme-apple .table-responsive .btn-sm.btn-primary,
body.theme-apple .table-responsive .btn.btn-sm.btn-primary,
body.theme-apple .table-responsive a.btn.btn-sm.btn-primary,
body.theme-apple .table-responsive button.btn.btn-sm.btn-primary {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    background-image: none;
    color: var(--ios-tint);
    border: 1px solid rgba(0, 122, 255, 0.25);
    border-radius: 999px;
    font-weight: 600;
    padding: 5px 12px;
    font-size: 12px;
    box-shadow: none;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    min-height: 30px;
}
body.theme-apple .table-responsive .btn-sm.btn-primary:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
    border-color: var(--ios-tint);
}
body.theme-apple .table-responsive .btn-sm.btn-primary svg,
body.theme-apple .table-responsive .btn-sm.btn-primary i {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* Delete button (.btn-danger) → iOS red soft pill */
body.theme-apple .table-responsive .btn-sm.btn-danger,
body.theme-apple .table-responsive .btn.btn-sm.btn-danger,
body.theme-apple .table-responsive a.btn.btn-sm.btn-danger,
body.theme-apple .table-responsive button.btn.btn-sm.btn-danger {
    background: rgba(255, 59, 48, 0.12);
    background-color: rgba(255, 59, 48, 0.12);
    background-image: none;
    color: var(--ios-red);
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 999px;
    font-weight: 600;
    padding: 5px 12px;
    font-size: 12px;
    box-shadow: none;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    min-height: 30px;
}
body.theme-apple .table-responsive .btn-sm.btn-danger:hover {
    background: var(--ios-red);
    background-color: var(--ios-red);
    color: #fff;
    border-color: var(--ios-red);
}
body.theme-apple .table-responsive .btn-sm.btn-danger svg,
body.theme-apple .table-responsive .btn-sm.btn-danger i {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* Admin/User toggle pill (.btn-success/.btn-secondary as status badges) */
body.theme-apple .table-responsive .btn-sm.btn-success,
body.theme-apple .table-responsive .btn.btn-sm.btn-success {
    background: rgba(52, 199, 89, 0.14);
    background-color: rgba(52, 199, 89, 0.14);
    color: #1A7A37;
    border: 1px solid rgba(52, 199, 89, 0.25);
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 12px;
    box-shadow: none;
    text-shadow: none;
    min-height: 30px;
}
body.theme-apple .table-responsive .btn-sm.btn-success:hover {
    background: var(--ios-green);
    color: #fff;
}
body.theme-apple .table-responsive .btn-sm.btn-secondary,
body.theme-apple .table-responsive .btn.btn-sm.btn-secondary {
    background: rgba(60, 60, 67, 0.10);
    background-color: rgba(60, 60, 67, 0.10);
    color: var(--ios-fg-2);
    border: 1px solid rgba(60, 60, 67, 0.18);
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 12px;
    box-shadow: none;
    text-shadow: none;
    min-height: 30px;
}
body.theme-apple .table-responsive .btn-sm.btn-secondary:hover {
    background: rgba(60, 60, 67, 0.18);
    color: var(--ios-fg);
}

/* btn-group: strip Bootstrap's joined-pill look, give each pill its own
   rounded corners + tiny gap */
body.theme-apple .table-responsive .btn-group {
    display: inline-flex;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    border: none;
}
body.theme-apple .table-responsive .btn-group > .btn {
    border-radius: 999px;
    margin-left: 0;
}

/* Top-of-page action buttons (search/export) — also iOS soft pills */
body.theme-apple .btn-toolbar .btn.btn-outline-secondary,
body.theme-apple .btn-toolbar .btn.btn-success {
    border-radius: 50px;
    font-weight: 600;
    padding: 8px 16px;
    box-shadow: none;
}
body.theme-apple .btn-toolbar .btn.btn-success {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
    border: 1px solid rgba(0,122,255,0.25);
}
body.theme-apple .btn-toolbar .btn.btn-success:hover {
    background: var(--ios-tint);
    color: #fff;
}

/* ============================================================
   ADMIN DASHBOARD — iOS Settings / Health-style redesign
   Apple-like, clean, modern, minimalist, graphic-design DNA.
   ============================================================ */
body.theme-apple .admin-ios-dashboard {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 4px 60px;
}

/* HERO — big SF Pro title, eyebrow, subtitle */
body.theme-apple .admin-hero {
    padding: 24px 4px 28px;
}
body.theme-apple .admin-eyebrow {
    color: var(--ios-tint);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
body.theme-apple .admin-title {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 8px;
    line-height: 1.08;
}
body.theme-apple .admin-subtitle {
    color: var(--ios-fg-2);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
    max-width: 540px;
}

/* CARD — white iOS surface with subtle shadow */
body.theme-apple .admin-card,
body.theme-apple .admin-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04);
    margin-bottom: 18px;
    overflow: hidden;
}
body.theme-apple .admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    gap: 12px;
}
body.theme-apple .admin-card-eyebrow {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Activity period filter — iOS-styled select dropdown */
body.theme-apple .admin-filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
body.theme-apple select.admin-filter {
    appearance: none;
    -webkit-appearance: none;
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
    border-radius: 999px;
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 10px;
    transition: border-color 0.15s ease;
}
body.theme-apple select.admin-filter:focus {
    outline: none;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.18);
}

/* STATS GRID — 4-up, hairline dividers, Settings/Health aesthetic */
body.theme-apple .admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
}
body.theme-apple .admin-stat-tile {
    padding: 20px 22px 22px;
    position: relative;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    border-right: 0.5px solid var(--ios-separator-soft);
    transition: background 0.15s ease;
}
body.theme-apple .admin-stat-tile:hover {
    background: var(--ios-bg);
}
body.theme-apple .admin-stat-tile:last-child {
    border-right: none;
}
/* Wrap-aware: when 4-in-a-row, only the last gets no right border. When
   2x2, every-other gets no right border. */
@media (max-width: 779px) {
    body.theme-apple .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    body.theme-apple .admin-stat-tile:nth-child(even) {
        border-right: none;
    }
    body.theme-apple .admin-stat-tile:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
@media (min-width: 780px) {
    body.theme-apple .admin-stat-tile {
        border-bottom: none;
    }
}

body.theme-apple .admin-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
body.theme-apple .admin-stat-icon svg,
body.theme-apple .admin-stat-icon i {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}
body.theme-apple .admin-stat-icon-blue   { background: rgba(0, 122, 255, 0.12); color: var(--ios-tint); }
body.theme-apple .admin-stat-icon-green  { background: rgba(52, 199, 89, 0.14); color: #1A7A37; }
body.theme-apple .admin-stat-icon-orange { background: rgba(255, 149, 0, 0.14); color: #B26A00; }
body.theme-apple .admin-stat-icon-yellow { background: rgba(255, 204, 0, 0.18); color: #8A6D00; }
body.theme-apple .admin-stat-icon-blue svg   { stroke: var(--ios-tint); }
body.theme-apple .admin-stat-icon-green svg  { stroke: #1A7A37; }
body.theme-apple .admin-stat-icon-orange svg { stroke: #B26A00; }
body.theme-apple .admin-stat-icon-yellow svg { stroke: #8A6D00; }

body.theme-apple .admin-stat-label {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
body.theme-apple .admin-stat-number {
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
body.theme-apple .admin-stat-hint {
    color: var(--ios-fg-2);
    font-size: 12px;
    margin-top: 6px;
}

/* ROWS — iOS Settings list-row (icon-circle + title/sub + action right) */
body.theme-apple .admin-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    background: transparent;
}
body.theme-apple .admin-row:last-of-type {
    border-bottom: none;
}
body.theme-apple .admin-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.theme-apple .admin-row-icon svg,
body.theme-apple .admin-row-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
}
body.theme-apple .admin-row-icon-blue  { background: rgba(0, 122, 255, 0.12); color: var(--ios-tint); }
body.theme-apple .admin-row-icon-green { background: rgba(52, 199, 89, 0.14); color: #1A7A37; }
body.theme-apple .admin-row-icon-blue svg  { stroke: var(--ios-tint); }
body.theme-apple .admin-row-icon-green svg { stroke: #1A7A37; }

body.theme-apple .admin-row-text {
    flex: 1 1 auto;
    min-width: 0;
}
body.theme-apple .admin-row-title {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
body.theme-apple .admin-row-sub {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 400;
    margin-top: 2px;
}

/* Action button — iOS pastel pill */
body.theme-apple .admin-row-action,
body.theme-apple button.admin-row-action {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    color: var(--ios-tint);
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
    box-shadow: none;
}
body.theme-apple .admin-row-action svg,
body.theme-apple .admin-row-action i {
    stroke: var(--ios-tint);
    color: var(--ios-tint);
}
body.theme-apple .admin-row-action:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
}
body.theme-apple .admin-row-action:hover svg,
body.theme-apple .admin-row-action:hover i {
    stroke: #fff;
    color: #fff;
}
body.theme-apple .admin-row-action:active { transform: scale(0.97); }
body.theme-apple .admin-row-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inline status label next to toggle */
body.theme-apple .admin-row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
body.theme-apple .admin-toggle-label {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 500;
    min-width: 28px;
    text-align: right;
}

/* iOS toggle switch (51x31) — green when ON, grey when OFF */
body.theme-apple .admin-ios-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
}
body.theme-apple .admin-ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
}
body.theme-apple .admin-ios-switch-track {
    position: absolute;
    inset: 0;
    background: var(--ios-fg-4);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.22s ease;
}
body.theme-apple .admin-ios-switch-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.20), 0 0 1px rgba(0,0,0,0.08);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
body.theme-apple .admin-ios-switch input:checked + .admin-ios-switch-track {
    background: var(--ios-green);
}
body.theme-apple .admin-ios-switch input:checked + .admin-ios-switch-track::before {
    transform: translateX(20px);
}

/* Inline result alert containers */
body.theme-apple .admin-card-alert {
    padding: 0 20px 16px;
}
body.theme-apple .admin-card-alert .alert {
    border-radius: 12px;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
}
body.theme-apple .admin-card-alert .alert.alert-success {
    background: rgba(52, 199, 89, 0.14);
    color: #1A7A37;
}
body.theme-apple .admin-card-alert .alert.alert-danger {
    background: rgba(255, 59, 48, 0.12);
    color: #B91C1C;
}

/* Strip the old admin chrome that bleeds through */
body.theme-apple .admin-ios-dashboard .border-bottom {
    border-bottom: none;
}

/* Admin sidebar (when visible) — clean iOS surface treatment */
body.theme-apple .sidebar {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border-right: 0.5px solid var(--ios-separator-soft);
    min-height: calc(100vh - 70px);
}
body.theme-apple .sidebar .sidebar-heading h5 {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body.theme-apple .sidebar .nav-link {
    color: var(--ios-fg);
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 8px;
    transition: background 0.15s ease;
}
body.theme-apple .sidebar .nav-link:hover {
    background: var(--ios-surface-hover);
}
body.theme-apple .sidebar .nav-link.active {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}
body.theme-apple .sidebar .nav-link.active svg,
body.theme-apple .sidebar .nav-link.active i {
    stroke: var(--ios-tint);
    color: var(--ios-tint);
}

/* ============================================================
   AVAILABILITY PAGES — planner_view + direct_form (iOS native)
   The templates use lots of inline brand colors; sed already
   recolored them. This block cleans up structural issues.
   ============================================================ */

/* Top yellow "availability message" alert container */
body.theme-apple .availability-message,
body.theme-apple .availability-message,
body.theme-apple .mb-3.p-3.border.text-center.availability-message {
    background: rgba(255, 149, 0, 0.10);
    background-color: rgba(255, 149, 0, 0.10);
    border: 1px solid rgba(255, 149, 0, 0.30);
    border-color: rgba(255, 149, 0, 0.30);
    color: var(--ios-fg);
    border-radius: 12px;
}
body.theme-apple .availability-message *,
body.theme-apple .availability-message small,
body.theme-apple .availability-message p {
    color: var(--ios-fg);
}

/* Sticky propose container — iOS native pill (white frosted) */
body.theme-apple #sticky-propose-container,
body.theme-apple .sticky-propose-container,
body.theme-apple #sticky-propose-container {
    background: rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* Slot counter pill inside the sticky container */
body.theme-apple #sticky-slot-counter {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(60, 60, 67, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-apple #sticky-slot-counter.reached,
body.theme-apple #sticky-slot-counter[style*="rgb(0, 122, 255)"] {
    background: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #fff;
}
/* Submit button inside sticky container — enabled & disabled states */
body.theme-apple #sticky-propose-container #submitBtn,
body.theme-apple #sticky-propose-container .btn,
body.theme-apple .sticky-propose-container #submitBtn,
body.theme-apple .sticky-propose-container .btn-propose,
body.theme-apple .sticky-propose-container .btn-propose-sticky {
    border: none;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0;
}
body.theme-apple #submitBtn:disabled,
body.theme-apple #submitBtn.btn[disabled] {
    background: rgba(0, 122, 255, 0.10);
    background-color: rgba(0, 122, 255, 0.10);
    color: rgba(0, 122, 255, 0.45);
    border: none;
}
body.theme-apple #submitBtn.ready,
body.theme-apple #submitBtn:not(:disabled),
body.theme-apple .btn-propose.ready,
body.theme-apple .btn-propose:not(:disabled) {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border: none;
    color: #fff;
}

/* Yes/Maybe/No availability response pills — iOS pastel buttons */
body.theme-apple .availability-response-btn,
body.theme-apple button[data-response="yes"],
body.theme-apple button[data-response="maybe"],
body.theme-apple button[data-response="no"] {
    border-radius: 50px;
    font-weight: 600;
}

/* Per-slot Yes pill (selected) */
body.theme-apple .availability-response-btn[style*="rgb(0, 122, 255)"],
body.theme-apple button[data-response="yes"][style*="rgb(0, 122, 255)"] {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
    border-color: var(--ios-tint);
}

/* Generic date / time / slot tiles — keep them legible on iOS bg */
body.theme-apple .date-card,
body.theme-apple .time-slot-card,
body.theme-apple .slot-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 12px;
    color: var(--ios-fg);
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
}
body.theme-apple .date-card *,
body.theme-apple .time-slot-card *,
body.theme-apple .slot-card * {
    color: var(--ios-fg);
}
body.theme-apple .time-slot:checked + label,
body.theme-apple .time-slot:checked ~ label {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}

/* iOS "Check Calendar" button (Google Calendar auto-fill) — iOS blue pill */
body.theme-apple .ios-calendar-btn,
body.theme-apple button.ios-calendar-btn,
body.theme-apple #calendar-check-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6em 1.2em;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.20);
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
body.theme-apple .ios-calendar-btn:hover,
body.theme-apple #calendar-check-btn:hover {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.30);
    color: #FFFFFF;
}
body.theme-apple .ios-calendar-btn svg,
body.theme-apple #calendar-check-btn svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

/* Calendar hint text under the button — readable iOS secondary label */
body.theme-apple .ios-calendar-hint,
body.theme-apple small.ios-calendar-hint {
    color: var(--ios-fg-2);
    font-weight: 500;
}
body.theme-apple .ios-calendar-hint svg,
body.theme-apple .ios-calendar-hint i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    vertical-align: -1px;
}

/* Date-title headings inside availability date-cards — iOS dark text */
body.theme-apple .ios-date-title,
body.theme-apple h6.ios-date-title {
    color: var(--ios-fg);
    letter-spacing: -0.01em;
}

/* Replace the dark navy `.time-slot-bar` and rebuild date-card chrome
   as a clean iOS card (white surface + subtle stroke). */
body.theme-apple .ios-date-card,
body.theme-apple .date-card.ios-date-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
    padding: 14px;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
}
body.theme-apple .ios-time-slot-bar,
body.theme-apple .time-slot-bar.ios-time-slot-bar {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--ios-fg);
}
body.theme-apple .ios-time-slot-bar .form-check-label,
body.theme-apple .ios-time-slot-bar .time-period,
body.theme-apple .ios-time-slot-bar .time-range {
    color: var(--ios-fg);
}
body.theme-apple .ios-time-slot-bar .time-range {
    color: var(--ios-fg-2);
    font-weight: 400;
}
body.theme-apple .ios-date-remove,
body.theme-apple button.ios-date-remove {
    width: 24px;
    height: 24px;
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border: none;
    border-radius: 50%;
    color: var(--ios-fg);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.theme-apple .ios-date-remove:hover {
    background: var(--ios-red);
    background-color: var(--ios-red);
    color: #FFFFFF;
}

/* ============================================================
   AVAILABILITY PLANNER — slot bar + response pills (iOS native)
   Used in /match/{id}/availability_planner. Three response pills
   (Yes/Maybe/No) all behave the same: outline-pill when inactive,
   solid + WHITE TEXT when active. Same component DNA as the rest
   of the app.
   ============================================================ */

/* Time-slot bar — clean iOS light grey card inside a date-card */
body.theme-apple .ios-time-slot-bar,
body.theme-apple .time-slot-bar.ios-time-slot-bar {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--ios-fg);
    box-shadow: none;
}
/* Slot label (Morning / Afternoon / etc.) */
body.theme-apple .ios-time-slot-bar .ios-slot-label,
body.theme-apple .ios-time-slot-bar h6.ios-slot-label {
    color: var(--ios-fg);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
/* Time range pill — iOS subtle chip */
body.theme-apple .ios-time-range-pill {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    color: var(--ios-fg-2);
    border: none;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    letter-spacing: 0.02em;
}
/* Percentage label */
body.theme-apple .ios-availability-percentage {
    color: var(--ios-fg);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
/* "No player responses yet" muted line */
body.theme-apple .ios-no-responses {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-style: italic;
}

/* Progress bar — iOS light track with blue fill */
body.theme-apple .progress.ios-progress,
body.theme-apple .ios-time-slot-bar .progress {
    background: rgba(0, 0, 0, 0.06);
    background-color: rgba(0, 0, 0, 0.06);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: none;
}
body.theme-apple .progress.ios-progress .progress-bar,
body.theme-apple .progress.ios-progress .ios-progress-bar,
body.theme-apple .ios-time-slot-bar .progress .progress-bar {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Player chips inside a slot — pastel iOS chip per response */
body.theme-apple .ios-player-chip,
body.theme-apple .ios-time-slot-bar .badge.ios-player-chip {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: var(--ios-fg-4);
    color: var(--ios-fg);
    white-space: nowrap;
    text-shadow: none;
    box-shadow: none;
    letter-spacing: 0;
}
body.theme-apple .ios-player-chip--yes,
body.theme-apple .ios-player-chip.player-available,
body.theme-apple .badge.ios-player-chip.ios-player-chip--yes {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    color: var(--ios-tint);
}
body.theme-apple .ios-player-chip--maybe,
body.theme-apple .ios-player-chip.player-maybe,
body.theme-apple .badge.ios-player-chip.ios-player-chip--maybe {
    background: rgba(255, 149, 0, 0.14);
    background-color: rgba(255, 149, 0, 0.14);
    color: #B26A00;
}
body.theme-apple .ios-player-chip--no,
body.theme-apple .ios-player-chip.player-unavailable,
body.theme-apple .badge.ios-player-chip.ios-player-chip--no {
    background: rgba(255, 59, 48, 0.14);
    background-color: rgba(255, 59, 48, 0.14);
    color: #C0271D;
}

/* Response pills (Yes / Maybe / No) — UNIFIED behaviour:
   - inactive: transparent bg, colored text, 2px colored stroke
   - active:   solid colored bg, WHITE text (consistent across all 3) */
body.theme-apple .ios-response-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.theme-apple .ios-response-btn,
body.theme-apple button.ios-response-btn,
body.theme-apple .ios-time-slot-bar button.ios-response-btn,
body.theme-apple button.response-btn.ios-response-btn {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: 2px solid currentColor;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
body.theme-apple .ios-response-btn:active { transform: scale(0.97); }

/* Inactive (outline) colors */
body.theme-apple .ios-response-btn--yes,
body.theme-apple button.ios-response-btn--yes,
body.theme-apple button.response-btn.ios-response-btn--yes {
    color: var(--ios-tint);
}
body.theme-apple .ios-response-btn--maybe,
body.theme-apple button.ios-response-btn--maybe,
body.theme-apple button.response-btn.ios-response-btn--maybe {
    color: #FF9500;
}
body.theme-apple .ios-response-btn--no,
body.theme-apple button.ios-response-btn--no,
body.theme-apple button.response-btn.ios-response-btn--no {
    color: #FF3B30;
}

/* Active state — solid fill + WHITE text (consistent across all 3).
   Reacts to both `.active` (legacy) and `.is-active` (new) class. */
body.theme-apple .ios-response-btn--yes.active,
body.theme-apple .ios-response-btn--yes.is-active,
body.theme-apple button.response-btn.ios-response-btn--yes.active {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple .ios-response-btn--maybe.active,
body.theme-apple .ios-response-btn--maybe.is-active,
body.theme-apple button.response-btn.ios-response-btn--maybe.active {
    background: #FF9500;
    background-color: #FF9500;
    border-color: #FF9500;
    color: #FFFFFF;
}
body.theme-apple .ios-response-btn--no.active,
body.theme-apple .ios-response-btn--no.is-active,
body.theme-apple button.response-btn.ios-response-btn--no.active {
    background: #FF3B30;
    background-color: #FF3B30;
    border-color: #FF3B30;
    color: #FFFFFF;
}

/* Playtomic CTA button inside a 100% slot */
body.theme-apple .ios-playtomic-btn,
body.theme-apple button.ios-playtomic-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px;
    box-shadow: none;
    text-shadow: none;
}
body.theme-apple .ios-playtomic-btn:hover {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
}

/* Date card wrapping the slot bars — iOS surface */
body.theme-apple .ios-date-card,
body.theme-apple .date-card.ios-date-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.04);
    color: var(--ios-fg);
}

/* Status messages / status-msg small color hints */
body.theme-apple .status-message small,
body.theme-apple .status-msg small,
body.theme-apple .availability-status small {
    color: var(--ios-fg-2);
}

/* Playtomic button — iOS solid blue */
body.theme-apple button[onclick*="openPlaytomicApp"],
body.theme-apple .playtomic-btn,
body.theme-apple .btn.btn-primary[onclick*="openPlaytomicApp"] {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border: none;
    border-color: transparent;
    color: #fff;
}

/* ============================================================
   LEADERBOARD REPLACE / REMOVE buttons + container
   (host-only column with Replace + Remove pills)
   ============================================================ */
body.theme-apple .competition-leaderboard-table .btn-group {
    display: inline-flex;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    border: none;
}
body.theme-apple .competition-leaderboard-table .btn.replace-player,
body.theme-apple .competition-leaderboard-table .btn.btn-sm.btn-warning.replace-player,
body.theme-apple .competition-leaderboard-table .btn.btn-warning.replace-player {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    background-image: none;
    color: var(--ios-tint);
    border: 1px solid rgba(0, 122, 255, 0.25);
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 12px;
    font-size: 12px;
    box-shadow: none;
    text-shadow: none;
}
body.theme-apple .competition-leaderboard-table .btn.replace-player:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
    border-color: var(--ios-tint);
}
body.theme-apple .competition-leaderboard-table .btn.remove-player,
body.theme-apple .competition-leaderboard-table .btn.btn-sm.btn-danger.remove-player,
body.theme-apple .competition-leaderboard-table .btn.btn-danger.remove-player {
    background: rgba(255, 59, 48, 0.12);
    background-color: rgba(255, 59, 48, 0.12);
    background-image: none;
    color: var(--ios-red);
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 12px;
    font-size: 12px;
    box-shadow: none;
    text-shadow: none;
}
body.theme-apple .competition-leaderboard-table .btn.remove-player:hover {
    background: var(--ios-red);
    background-color: var(--ios-red);
    color: #fff;
    border-color: var(--ios-red);
}
/* Strip Bootstrap btn-group radius collapsing (each pill stays standalone) */
body.theme-apple .competition-leaderboard-table .btn-group > .btn {
    border-radius: 999px;
    margin-left: 0;
}

/* ============================================================
   SELF-MARKER (blue dot for current logged-in user)
   Used in leaderboard names + tournament accordion-body teams.
   ============================================================ */
body.theme-apple .self-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18);
    margin-left: 6px;
    vertical-align: 1px;
    flex-shrink: 0;
}
body.theme-apple .lb-player-self {
    color: var(--ios-fg);
    font-weight: 700;
}
/* Override Bootstrap text-success on current user's leaderboard row */
body.theme-apple .competition-leaderboard-table .lb-player-link.text-success,
body.theme-apple .competition-leaderboard-table .lb-player-self {
    color: var(--ios-fg);
}

/* Guest leaderboard names — was text-white-50 (invisible on white) */
body.theme-apple .lb-guest-name,
body.theme-apple .competition-leaderboard-table .lb-guest-name,
body.theme-apple .competition-leaderboard-table .text-white-50,
body.theme-apple .competition-leaderboard-table tr td .text-white-50 {
    color: var(--ios-fg);
    font-weight: 500;
    opacity: 1;
}

/* ============================================================
   COURT BADGE PILL — replaces inline-styled .badge.border for courts.
   Shows a visible iOS-style stroke + readable text on white cards.
   ============================================================ */
body.theme-apple .court-badge-pill,
body.theme-apple .badge.court-badge-pill,
body.theme-apple .badge.court-badge-pill {
    display: inline-block;
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
}

/* 3) Baan number badge — make text black (was rgba(255,255,255,0.7)) */
body.theme-apple .badge.border,
body.theme-apple .accordion-body .badge.border,
body.theme-apple .match-details .badge.border,
body.theme-apple .boxscore-container .badge.border,
body.theme-apple .badge.border {
    color: var(--ios-fg);
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid rgba(0, 0, 0, 0.18);
    text-shadow: none;
    font-weight: 600;
}

/* ============================================================
   INVITE & START BUTTONS — iOS native styling
   Replaces the legacy peach-gradient Invite + teal Start with a
   clean iOS-blue filled pill, matching the rest of the app.
   Overrides custom.css's values via stronger selectors.
   ============================================================ */
/* MUST beat `.btn.btn-outline-secondary.btn-sm` (3 classes) AND every other
   Bootstrap modifier chain. Using #ID selectors here (specificity 100×) so
   NOTHING short of inline-style can override us. */
body.theme-apple #invite-btn,
body.theme-apple button#invite-btn,
body.theme-apple #invite-btn.btn,
body.theme-apple #invite-btn.btn.btn-outline-secondary.btn-sm,
body.theme-apple .invite-glow-btn,
body.theme-apple .btn.invite-glow-btn,
body.theme-apple .btn.btn-outline-secondary.invite-glow-btn,
body.theme-apple .btn.btn-outline-secondary.btn-sm.invite-glow-btn,
body.theme-apple .competition-header .invite-glow-btn,
body.theme-apple .competition-header .btn.btn-outline-secondary.btn-sm.invite-glow-btn,
body.theme-apple #start-tournament-btn,
body.theme-apple #start-tournament-btn-member,
body.theme-apple button#start-tournament-btn,
body.theme-apple button#start-tournament-btn-member,
body.theme-apple #start-tournament-btn.btn.btn-sm,
body.theme-apple #start-tournament-btn-member.btn.btn-sm,
body.theme-apple .start-competition-btn,
body.theme-apple .btn.start-competition-btn,
body.theme-apple .btn.btn-sm.start-competition-btn,
body.theme-apple .competition-header .start-competition-btn,
body.theme-apple .competition-header .btn.start-competition-btn,
body.theme-apple .competition-header .btn.btn-sm.start-competition-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    padding: 10px 18px;
    min-width: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
    -webkit-filter: none;
    transform: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    text-shadow: none;
    white-space: nowrap;
    line-height: 1.2;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

body.theme-apple .invite-glow-btn:hover,
body.theme-apple .competition-header .invite-glow-btn:hover,
body.theme-apple .start-competition-btn:hover,
body.theme-apple .competition-header .start-competition-btn:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}

body.theme-apple .invite-glow-btn:active,
body.theme-apple .competition-header .invite-glow-btn:active,
body.theme-apple .start-competition-btn:active,
body.theme-apple .competition-header .start-competition-btn:active {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    opacity: 0.9;
    transform: scale(0.97);
}

body.theme-apple .invite-glow-btn:disabled,
body.theme-apple .start-competition-btn:disabled {
    background: var(--ios-fg-3);
    background-color: var(--ios-fg-3);
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
    box-shadow: none;
}

/* Kill the legacy peach pulse-glow ring entirely on theme-apple */
body.theme-apple .invite-glow-ring,
body.theme-apple .invite-glow-ring {
    display: none;
    animation: none;
}
body.theme-apple .invite-glow-wrapper,
body.theme-apple .invite-glow-wrapper {
    display: inline-flex;
}

/* ============================================================
   INVITE PLAYERS MODAL — full iOS makeover
   The legacy modal was dark navy with peach + green + outline-light
   buttons and a Bootstrap blue alert-info. Switch to clean white
   iOS surface with iOS-blue pill actions and light info card.
   Scoped to #invitePlayerModal so it only affects this sheet.
   ============================================================ */

/* Sheet surface — white iOS bg instead of dark glassmorphism */
body.theme-apple #invitePlayerModal .modal-content {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: var(--ios-fg);
    border: none;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}

/* Backdrop — soft iOS dim (only when sheet is open) */
body.theme-apple #invitePlayerModal.show {
    background: rgba(0, 0, 0, 0.30);
}

/* Header — single iOS handle bar only, no extra separator line */
body.theme-apple #invitePlayerModal .bottom-sheet-header {
    background: var(--ios-bg);
    border-bottom: none;
}
body.theme-apple #invitePlayerModal .bottom-sheet-header h5 {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}
body.theme-apple #invitePlayerModal .bottom-sheet-handle {
    background: var(--ios-fg-3);
}

/* Body */
body.theme-apple #invitePlayerModal .bottom-sheet-body {
    background: var(--ios-bg);
    color: var(--ios-fg);
}

/* Section headings inside the body */
body.theme-apple #invitePlayerModal .bottom-sheet-body h6 {
    color: var(--ios-fg);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ios-fg-2);
}

body.theme-apple #invitePlayerModal .bottom-sheet-body small,
body.theme-apple #invitePlayerModal .bottom-sheet-body .text-muted {
    color: var(--ios-fg-2);
}

/* Invite-code card (was dark translucent) */
body.theme-apple #invitePlayerModal .bottom-sheet-body > .mb-3.p-3 {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: var(--ios-radius-md);
}
body.theme-apple #invitePlayerModal .bottom-sheet-body > .mb-3.p-3 .fw-bold {
    color: var(--ios-fg);
}

/* ─── All buttons inside the modal → iOS pill style ────────── */

/* PRIMARY filled iOS-blue: Copy, Share, WhatsApp, Invite-player */
body.theme-apple #invitePlayerModal .btn-outline-primary,
body.theme-apple #invitePlayerModal .btn-success,
body.theme-apple #invitePlayerModal .invite-player-btn,
body.theme-apple #invitePlayerModal .invite-player-btn.btn-gradient-peach,
body.theme-apple #invitePlayerModal .invite-btn,
body.theme-apple #invitePlayerModal #general-share-btn,
body.theme-apple #invitePlayerModal #whatsapp-invite-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    border-radius: 14px;
    padding: 10px 16px;
    min-height: 40px;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
    text-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.theme-apple #invitePlayerModal .btn-outline-primary:hover,
body.theme-apple #invitePlayerModal .btn-success:hover,
body.theme-apple #invitePlayerModal .invite-player-btn:hover,
body.theme-apple #invitePlayerModal .invite-btn:hover {
    background: var(--ios-tint);
    color: #FFFFFF;
    transform: none;
}
body.theme-apple #invitePlayerModal .btn-outline-primary:active,
body.theme-apple #invitePlayerModal .btn-success:active,
body.theme-apple #invitePlayerModal .invite-player-btn:active,
body.theme-apple #invitePlayerModal .invite-btn:active {
    background: var(--ios-tint-press);
    transform: scale(0.97);
    opacity: 0.9;
}

/* SECONDARY tinted: QR / Add Guest Profile (was outline-light) */
body.theme-apple #invitePlayerModal .btn-outline-light {
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    border: none;
    color: var(--ios-tint);
    font-weight: 600;
    font-size: 15px;
    border-radius: 14px;
    padding: 10px 16px;
    min-height: 40px;
    box-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-apple #invitePlayerModal .btn-outline-light:hover {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}
body.theme-apple #invitePlayerModal .btn-outline-light:active {
    background: rgba(0, 122, 255, 0.22);
    transform: scale(0.97);
}

/* DESTRUCTIVE: uninvite (was btn-danger) → iOS red filled */
body.theme-apple #invitePlayerModal .uninvite-player-btn,
body.theme-apple #invitePlayerModal .btn-danger {
    background: var(--ios-red);
    background-color: var(--ios-red);
    background-image: none;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 1px 2px rgba(255, 59, 48, 0.20);
    text-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-apple #invitePlayerModal .uninvite-player-btn:active,
body.theme-apple #invitePlayerModal .btn-danger:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* ─── Search input — iOS clear pill ────────────────────────── */
body.theme-apple #invitePlayerModal #search-query,
body.theme-apple #invitePlayerModal #search-player-form input.form-control {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 12px;
    padding: 11px 44px 11px 16px;
    font-size: 16px;
    box-shadow: none;
}
body.theme-apple #invitePlayerModal #search-query::placeholder {
    color: var(--ios-fg-3);
}
body.theme-apple #invitePlayerModal #search-query:focus {
    border-color: var(--ios-tint);
    background: #FFFFFF;
    box-shadow: none;
    outline: none;
}
body.theme-apple #invitePlayerModal #search-player-form button[type="submit"] {
    color: var(--ios-fg-2);
}

/* ─── Info / pending alerts → iOS info card ────────────────── */
body.theme-apple #invitePlayerModal .alert-info,
body.theme-apple #invitePlayerModal .alert-secondary {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    color: var(--ios-fg-2);
    border-radius: var(--ios-radius-md);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}
body.theme-apple #invitePlayerModal .alert-info svg,
body.theme-apple #invitePlayerModal .alert-secondary svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}

/* ─── Search results table → iOS list rows ─────────────────── */
body.theme-apple #invitePlayerModal .search-results-container {
    background: transparent;
}
body.theme-apple #invitePlayerModal .search-results-container .table,
body.theme-apple #invitePlayerModal .search-results-container table.table-hover {
    background: var(--ios-surface);
    border-radius: var(--ios-radius-md);
    overflow: hidden;
    color: var(--ios-fg);
    margin-bottom: 0;
}
body.theme-apple #invitePlayerModal .search-results-container .table thead {
    display: none;
}
body.theme-apple #invitePlayerModal .search-results-container .table tbody tr {
    background: var(--ios-surface);
    border-bottom: 1px solid var(--ios-separator-soft);
}
body.theme-apple #invitePlayerModal .search-results-container .table tbody tr:last-child {
    border-bottom: none;
}
body.theme-apple #invitePlayerModal .search-results-container .table tbody tr:hover {
    background: var(--ios-surface-hover);
}
body.theme-apple #invitePlayerModal .search-results-container .table td {
    background: transparent;
    color: var(--ios-fg);
    border: none;
    padding: 10px 14px;
    vertical-align: middle;
}
body.theme-apple #invitePlayerModal .search-results-container .player-name {
    color: var(--ios-fg);
    font-weight: 500;
    font-size: 15px;
}

/* ============================================================
   TOURNAMENT TIMER — small-screen polish
   Keep PLAY/OVERTIME columns the same height even when one label
   wraps to 2 lines, and fit all 5 control circles on one row on
   narrow Android screens.
   ============================================================ */
body.theme-apple .dual-timer-container .row {
    align-items: stretch;
}
body.theme-apple .dual-timer-container .row > .col-6 {
    display: flex;
}
body.theme-apple .dual-timer-container .timer-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
}
/* Reserve 2 lines for both labels so SPEL ACTIEF / PLAY TIMER ACTIVE
   (which wraps) and OVERTIME (single word) end at the same baseline. */
body.theme-apple .dual-timer-container .timer-label {
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

/* 5 timer-control circles fit on one row on small screens */
@media (max-width: 480px) {
    body.theme-apple .timer-controls .d-flex {
        gap: 0.5rem;
    }
    body.theme-apple .timer-controls .btn-circle,
    body.theme-apple .timer-controls .btn-icon.btn-circle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
        min-height: 0;
        max-height: 40px;
        border-radius: 50%;
    }
    body.theme-apple .timer-controls .btn-circle i,
    body.theme-apple .timer-controls .btn-circle svg {
        width: 16px;
        height: 16px;
    }
    body.theme-apple .timer-controls .timer-button-label {
        font-size: 10.5px;
        margin-top: 0.5rem;
        line-height: 1.2;
    }
}
@media (max-width: 360px) {
    body.theme-apple .timer-controls .d-flex {
        gap: 0.35rem;
    }
    body.theme-apple .timer-controls .btn-circle,
    body.theme-apple .timer-controls .btn-icon.btn-circle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        max-width: 36px;
        min-height: 0;
        max-height: 36px;
        border-radius: 50%;
    }
    body.theme-apple .timer-controls .btn-circle i,
    body.theme-apple .timer-controls .btn-circle svg {
        width: 14px;
        height: 14px;
    }
}

/* ============================================================
   GLOBAL SMALL-SCREEN SCALING
   On narrow Android screens (< 380px), reduce root font-size so
   every rem-based component scales down PROPORTIONALLY. The app
   ends up looking the same as on a larger phone, just smaller —
   no awkward wrap/overflow inconsistencies.
   Inputs are pinned to 16px so iOS Safari doesn't auto-zoom them
   on focus (only kicks in if the rule applies to an iPhone SE-sized
   layout, but cheaper to keep it safe across the board).
   ============================================================ */
@media (max-width: 380px) {
    html { font-size: 15px; }
    input, select, textarea { font-size: 16px; }
}
@media (max-width: 340px) {
    html { font-size: 14px; }
    input, select, textarea { font-size: 16px; }
}

/* ============================================================
   PENDING COMPETITION INVITATIONS — list-page section
   The legacy section was navy rgba(17,24,39,.9) with green
   Accept + red outline Decline. Switch to clean iOS card stack:
   white surface, iOS section header, iOS-blue Accept, soft red
   Decline — matching the rest of the app.
   ============================================================ */
body.theme-apple #invitations-container {
    background: transparent;
    background-color: transparent;
    padding: 8px 16px 16px;
    margin-bottom: 1rem;
    border-radius: 0;
    overflow: visible;
}
body.theme-apple #invitations-container > h5 {
    color: var(--ios-fg-2);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 0 4px 8px;
    margin-bottom: 0;
}
body.theme-apple #invitations-list {
    gap: 8px;
}
body.theme-apple #invitations-list .list-group-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: var(--ios-radius-md);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.04);
    color: var(--ios-fg);
    padding: 12px 14px;
    margin-bottom: 0;
}
body.theme-apple #invitations-list .list-group-item h6 {
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
}
body.theme-apple #invitations-list .list-group-item .text-muted {
    color: var(--ios-fg-2);
}
body.theme-apple #invitations-list .list-group-item .text-muted.small,
body.theme-apple #invitations-list .list-group-item p.small {
    font-size: 12px;
    line-height: 1.3;
}

/* Accept = filled iOS blue pill */
body.theme-apple #invitations-list .btn.btn-success {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: 12px;
    padding: 7px 14px;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
    text-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-apple #invitations-list .btn.btn-success:hover {
    background: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple #invitations-list .btn.btn-success:active {
    background: var(--ios-tint-press);
    transform: scale(0.97);
    opacity: 0.9;
}

/* Decline = subtle iOS red tinted pill (less prominent than Accept) */
body.theme-apple #invitations-list .btn.btn-outline-danger,
body.theme-apple #invitations-list .btn.btn-danger {
    background: rgba(255, 59, 48, 0.12);
    background-color: rgba(255, 59, 48, 0.12);
    background-image: none;
    border: none;
    color: var(--ios-red);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: 12px;
    padding: 7px 14px;
    box-shadow: none;
    text-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-apple #invitations-list .btn.btn-outline-danger:hover,
body.theme-apple #invitations-list .btn.btn-danger:hover {
    background: rgba(255, 59, 48, 0.18);
    color: var(--ios-red);
}
body.theme-apple #invitations-list .btn.btn-outline-danger:active,
body.theme-apple #invitations-list .btn.btn-danger:active {
    background: rgba(255, 59, 48, 0.22);
    transform: scale(0.97);
}

/* "Already in competition" badge — soft iOS grey pill */
body.theme-apple #invitePlayerModal .search-results-container .badge,
body.theme-apple #invitePlayerModal .search-results-container td .badge[style*="496E78"] {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    color: var(--ios-fg-2);
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    border: none;
}

/* Invite-code value highlight */
body.theme-apple #invitePlayerModal .fw-bold[style*="1.1rem"] {
    color: var(--ios-fg);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.04em;
}




/* ============================================================
   COMPETITION INVITATIONS — iOS card
   Replaces the legacy hardcoded navy panel with Bootstrap
   list-group rows, which ignored the theme (stayed dark in light
   mode) and used flat green/red buttons. Now a grouped card in
   the same language as the competitions grid and settings rows.
   ============================================================ */
body.theme-apple .ios-invite-card {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 6px 16px rgba(0, 0, 0, 0.04);
}

body.theme-apple .ios-invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple .ios-invite-row:first-child {
    border-top: none;
}

body.theme-apple .ios-invite-info {
    min-width: 0;   /* let long names ellipsis instead of pushing buttons out */
}

body.theme-apple .ios-invite-title {
    color: var(--ios-fg);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* Wrap to a second line rather than truncating: these are people's
       names and competition titles, and "Yassin van Vee..." helps nobody.
       Clamped at 2 lines so one very long title can't push the row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

body.theme-apple .ios-invite-sub {
    color: var(--ios-fg-2);
    font-size: 13px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.theme-apple .ios-invite-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

body.theme-apple .ios-invite-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
body.theme-apple .ios-invite-btn:active { opacity: 0.6; }

/* Accept = the affirmative action, so it carries the tint fill. */
body.theme-apple .ios-invite-accept {
    background: var(--ios-tint);
    color: #FFFFFF;
}

/* Decline = quiet, recessive. Not destructive-red: declining an
   invite is routine, and red here would shout louder than accept. */
body.theme-apple .ios-invite-decline {
    background: transparent;
    color: var(--ios-fg-2);
}
body.theme-apple .ios-invite-decline:hover {
    background: var(--ios-surface-hover);
}

/* Narrow phones: stack the accept/decline PAIR so both keep a
   comfortable tap target instead of squeezing a long competition name
   off-screen. Scoped with :has() so single-control rows (search results,
   pending list) keep their name-left / control-right layout — stacking
   those stretched one button across the whole sheet. */
@media (max-width: 380px) {
    body.theme-apple .ios-invite-row:has(.ios-invite-actions) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.theme-apple .ios-invite-row:has(.ios-invite-actions) .ios-invite-actions {
        justify-content: flex-end;
    }
}

/* Controls sit next to the name, never stretched by the row. */
body.theme-apple .ios-invite-row > .ios-invite-btn {
    flex: 0 0 auto;
    align-self: center;
}

/* Read-only variant of the invite card, used inside the invite sheet's
   "Pending invitations" list: a status pill instead of accept/decline,
   replacing the old Bootstrap table with its untranslated header row. */
body.theme-apple .ios-invite-status {
    flex: 0 0 auto;
    /* iOS secondarySystemFill — translucent grey, reads correctly on
       both the light and dark sheet background. */
    background: rgba(120, 120, 128, 0.12);
    color: var(--ios-fg-2);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

body.theme-apple .ios-invite-empty {
    color: var(--ios-fg-2);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    padding: 18px 16px;
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
}

body.theme-apple .ios-invite-error {
    color: var(--ios-red);
}

/* Already-in-competition marker: tinted rather than grey, so "Joined"
   reads as a settled positive state next to the neutral "Sent" pill. */
body.theme-apple .ios-invite-status-in {
    background: rgba(52, 199, 89, 0.14);
    color: #248A3D;
}
body.theme-apple.theme-dark .ios-invite-status-in {
    background: rgba(48, 209, 88, 0.18);
    color: #30D158;
}

/* ============================================================
   INVITE / GUEST SHEETS
   These sheets had grown a button for every idea: a Bootstrap
   outline-primary, two btn-success fills that the theme painted
   blue anyway, and an outline-light — four saturated controls
   stacked above each other, all different shapes. One neutral
   button style, one tinted variant for the affirmative action,
   and a text link for the optional one.
   ============================================================ */
body.theme-apple .ios-invite-code-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

body.theme-apple .ios-invite-code-text {
    min-width: 0;
}

body.theme-apple .ios-invite-code-text small {
    display: block;
    color: var(--ios-fg-2);
    font-size: 12px;
    margin-bottom: 2px;
}

body.theme-apple .ios-invite-code-value {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

body.theme-apple .ios-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

body.theme-apple .ios-sheet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--ios-separator-soft);
    background: var(--ios-fill-subtle);
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

body.theme-apple .ios-sheet-btn:active { opacity: 0.6; }

body.theme-apple .ios-sheet-btn svg,
body.theme-apple .ios-sheet-btn img {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* The affirmative one, so it is the only tinted thing in the sheet. */
body.theme-apple .ios-sheet-btn-tinted {
    background: var(--ios-tint-soft);
    border-color: transparent;
    color: var(--ios-tint);
    min-height: 38px;
    font-size: 14px;
    flex: 0 0 auto;
}

body.theme-apple .ios-sheet-btn-wide {
    width: 100%;
}

body.theme-apple .ios-sheet-link {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px;
    margin-bottom: 6px;
}

/* Invite and Sent must occupy the same box, or the row jumps the
   moment you tap it — the click swaps one class for the other. */
body.theme-apple .ios-invite-btn,
body.theme-apple .ios-invite-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 104px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
}

/* Destructive row action, same box as accept so a row never changes shape
   when its button swaps. Tinted rather than solid red: marking a player
   absent is reversible and does not deserve a stop sign. */
body.theme-apple .ios-invite-danger {
    background: rgba(255, 59, 48, 0.12);
    color: #C7352B;
}
body.theme-apple.theme-dark .ios-invite-danger {
    background: rgba(255, 69, 58, 0.18);
    color: #FF6961;
}