/* ============================================================
   DARK MODE — opt-in via body.theme-apple.theme-dark
   ------------------------------------------------------------
   The vast majority of the iOS theme uses `var(--ios-*)` tokens
   (defined at the top of this file). Swapping those values is
   enough to shift the entire app into Apple's iOS dark-mode
   palette. Hard-coded #FFFFFF / #000000 surfaces that don't use
   the tokens get conditional overrides further below.
   ============================================================ */
body.theme-apple.theme-dark {
    /* iOS system dark palette */
    --ios-bg:               #000000;   /* systemBackground dark */
    --ios-bg-2:             #1C1C1E;   /* secondarySystemBackground */
    --ios-bg-tinted:        #1C1C1E;
    --ios-surface:          #1C1C1E;   /* cards on grouped dark bg */
    --ios-surface-press:    #2C2C2E;   /* tertiarySystemBackground */
    --ios-fill-subtle:      rgba(255, 255, 255, 0.08);
    --ios-surface-hover:    #232325;

    --ios-fg:               #FFFFFF;
    --ios-fg-2:             rgba(235, 235, 245, 0.60);  /* secondaryLabel dark */
    --ios-fg-3:             rgba(235, 235, 245, 0.30);
    --ios-fg-4:             rgba(235, 235, 245, 0.18);

    --ios-separator:        rgba(84, 84, 88, 0.65);
    --ios-separator-soft:   rgba(84, 84, 88, 0.35);

    /* Dark-mode blue is slightly brighter for AA contrast on black */
    --ios-tint:             #0A84FF;
    --ios-tint-press:       #0064D0;
    --ios-tint-soft:        rgba(10, 132, 255, 0.18);
    /* Higher alpha than light mode: blue at 45% over near-black is unreadable */
    --ios-tint-muted:       rgba(10, 132, 255, 0.62);

    /* Slightly brighter semantic colors */
    --ios-green:            #30D158;
    --ios-orange:           #FF9F0A;
    --ios-red:              #FF453A;
    --ios-yellow:           #FFD60A;

    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: var(--ios-fg);
}

/* HTML element + global page bg follows body in dark mode */
html:has(body.theme-apple.theme-dark),
body.theme-apple.theme-dark html {
    background: #000000;
    background-color: #000000;
    background-image: none;
}
body.theme-apple.theme-dark #ios-top-cover {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* Top navbar — match the dark bg */
body.theme-apple.theme-dark #floating-header,
body.theme-apple.theme-dark .navbar.fixed-top {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* ---- Hard-coded white surfaces that don't use --ios-surface ---- */
/* Modal content + bottom sheets: many used `background: #FFFFFF` */
body.theme-apple.theme-dark .modal-content,
body.theme-apple.theme-dark .bottom-sheet-modal .modal-content,
body.theme-apple.theme-dark #invitePlayerModal .modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #invitePlayerModal.show {
    background: rgba(0, 0, 0, 0.55);
}
body.theme-apple.theme-dark .modal-backdrop.show {
    background: rgba(0, 0, 0, 0.55);
}

/* Form inputs in dark mode — dark fill + light text */
body.theme-apple.theme-dark .form-control,
body.theme-apple.theme-dark .form-select,
body.theme-apple.theme-dark input[type="text"],
body.theme-apple.theme-dark input[type="email"],
body.theme-apple.theme-dark input[type="password"],
body.theme-apple.theme-dark input[type="number"],
body.theme-apple.theme-dark input[type="search"],
body.theme-apple.theme-dark textarea {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
body.theme-apple.theme-dark .form-control::placeholder,
body.theme-apple.theme-dark input::placeholder,
body.theme-apple.theme-dark textarea::placeholder {
    color: var(--ios-fg-3);
}

/* Cards that hard-code white bg → use surface */
body.theme-apple.theme-dark .card,
body.theme-apple.theme-dark .card-body,
body.theme-apple.theme-dark .ios-stat,
body.theme-apple.theme-dark .competition-overview-card,
body.theme-apple.theme-dark #invitations-list .list-group-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .card-body {
    background: transparent;
    background-color: transparent;
}

/* Match-cards (rendered by JS, fixed border colors) */
body.theme-apple.theme-dark .match-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}

/* Soft alert variants */
body.theme-apple.theme-dark .alert.alert-info,
body.theme-apple.theme-dark .alert.alert-secondary,
body.theme-apple.theme-dark .alert.alert-success,
body.theme-apple.theme-dark .alert.alert-warning,
body.theme-apple.theme-dark .alert.alert-danger {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}

/* Section headers etc. that explicit white text */
body.theme-apple.theme-dark .text-muted {
    color: var(--ios-fg-2);
}
body.theme-apple.theme-dark .text-dark {
    color: var(--ios-fg);
}

/* Bottom nav stays glassy — only adjust its surface for dark */
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating {
    background: rgba(28, 28, 30, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   DARK MODE — comprehensive overrides for elements that hard-
   code light surfaces / Bootstrap palette / inline white text.
   Identified via a code audit of templates + static CSS.
   ============================================================ */

/* ── Bootstrap button variants — visible on dark surfaces ── */
body.theme-apple.theme-dark .btn-primary,
body.theme-apple.theme-dark .btn.btn-primary {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple.theme-dark .btn-primary:hover,
body.theme-apple.theme-dark .btn.btn-primary:hover,
body.theme-apple.theme-dark .btn-primary:active,
body.theme-apple.theme-dark .btn.btn-primary:active {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
    border-color: var(--ios-tint-press);
}
body.theme-apple.theme-dark .btn-success,
body.theme-apple.theme-dark .btn.btn-success {
    background: var(--ios-green);
    background-color: var(--ios-green);
    border-color: var(--ios-green);
    color: #FFFFFF;
}
body.theme-apple.theme-dark .btn-danger,
body.theme-apple.theme-dark .btn.btn-danger {
    background: var(--ios-red);
    background-color: var(--ios-red);
    border-color: var(--ios-red);
    color: #FFFFFF;
}
body.theme-apple.theme-dark .btn-warning,
body.theme-apple.theme-dark .btn.btn-warning {
    background: var(--ios-orange);
    background-color: var(--ios-orange);
    border-color: var(--ios-orange);
    color: #1A1A1A;
}
body.theme-apple.theme-dark .btn-info,
body.theme-apple.theme-dark .btn.btn-info {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    border-color: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple.theme-dark .btn-secondary,
body.theme-apple.theme-dark .btn.btn-secondary {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .btn-light,
body.theme-apple.theme-dark .btn.btn-light {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .btn-dark,
body.theme-apple.theme-dark .btn.btn-dark {
    background: #2C2C2E;
    background-color: #2C2C2E;
    color: #FFFFFF;
}

/* Outline variants — keep transparent fill, swap stroke colors */
body.theme-apple.theme-dark .btn-outline-primary,
body.theme-apple.theme-dark .btn.btn-outline-primary {
    background: transparent;
    border-color: var(--ios-tint);
    color: var(--ios-tint);
}
body.theme-apple.theme-dark .btn-outline-success,
body.theme-apple.theme-dark .btn.btn-outline-success {
    background: transparent;
    border-color: var(--ios-green);
    color: var(--ios-green);
}
body.theme-apple.theme-dark .btn-outline-warning,
body.theme-apple.theme-dark .btn.btn-outline-warning {
    background: transparent;
    border-color: var(--ios-orange);
    color: var(--ios-orange);
}
body.theme-apple.theme-dark .btn-outline-danger,
body.theme-apple.theme-dark .btn.btn-outline-danger {
    background: transparent;
    border-color: var(--ios-red);
    color: var(--ios-red);
}
body.theme-apple.theme-dark .btn-outline-light,
body.theme-apple.theme-dark .btn.btn-outline-light {
    background: var(--ios-surface);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .btn-outline-secondary,
body.theme-apple.theme-dark .btn.btn-outline-secondary {
    background: transparent;
    border-color: var(--ios-separator);
    color: var(--ios-fg-2);
}

/* ── FAQ accordion buttons (hard-coded white) ── */
body.theme-apple.theme-dark #faq-container .accordion-button,
body.theme-apple.theme-dark .accordion-button {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .accordion-button:not(.collapsed) {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .accordion-item,
body.theme-apple.theme-dark .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}

/* ── Card header (admin pages used #fff) ── */
body.theme-apple.theme-dark .card-header {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom-color: var(--ios-separator-soft);
}

/* ── Edit wizard cards ── */
body.theme-apple.theme-dark .edit-wizard-card,
body.theme-apple.theme-dark .create-wizard-card,
body.theme-apple.theme-dark .create-header-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}

/* ── Reschedule modal ── */
body.theme-apple.theme-dark #rescheduleMatchModal .modal-content,
body.theme-apple.theme-dark #rescheduleMatchModal .reschedule-modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #rescheduleMatchModal .reschedule-modal-header,
body.theme-apple.theme-dark #rescheduleMatchModal .modal-header {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-bottom-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark #rescheduleMatchModal input,
body.theme-apple.theme-dark #rescheduleMatchModal .reschedule-input,
body.theme-apple.theme-dark #rescheduleMatchModal select {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
body.theme-apple.theme-dark #rescheduleMatchModal label,
body.theme-apple.theme-dark #rescheduleMatchModal .reschedule-label {
    color: var(--ios-fg-2);
}

/* ── Modal generic headers/footers ── */
body.theme-apple.theme-dark .modal-header,
body.theme-apple.theme-dark .modal-footer {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .modal-title,
body.theme-apple.theme-dark .modal-body,
body.theme-apple.theme-dark .modal-body p,
body.theme-apple.theme-dark .modal-body label,
body.theme-apple.theme-dark .modal-body span {
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .modal .btn-close {
    filter: invert(1) brightness(1.2);
}

/* ── Dropdown menus ── */
body.theme-apple.theme-dark .dropdown-menu {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .dropdown-item {
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .dropdown-item:hover,
body.theme-apple.theme-dark .dropdown-item:focus {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
}
body.theme-apple.theme-dark .dropdown-divider {
    border-top-color: var(--ios-separator-soft);
}

/* ── Tables ── */
body.theme-apple.theme-dark .table,
body.theme-apple.theme-dark table.table {
    background: var(--ios-surface);
    color: var(--ios-fg);
    --bs-table-bg: var(--ios-surface);
    --bs-table-color: var(--ios-fg);
}
body.theme-apple.theme-dark .table th,
body.theme-apple.theme-dark .table td {
    border-color: var(--ios-separator-soft);
    background: transparent;
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .table-hover > tbody > tr:hover {
    background: var(--ios-surface-press);
    --bs-table-hover-bg: var(--ios-surface-press);
}

/* ── List groups ── */
body.theme-apple.theme-dark .list-group-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}

/* ── Nav tabs ── */
body.theme-apple.theme-dark .nav-tabs .nav-link {
    color: var(--ios-fg-2);
    border-color: transparent;
}
body.theme-apple.theme-dark .nav-tabs .nav-link.active {
    background: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}

/* ── Section headings often hard-code color: white ── */
body.theme-apple.theme-dark h1,
body.theme-apple.theme-dark h2,
body.theme-apple.theme-dark h3,
body.theme-apple.theme-dark h4,
body.theme-apple.theme-dark h5,
body.theme-apple.theme-dark h6,
body.theme-apple.theme-dark p,
body.theme-apple.theme-dark span,
body.theme-apple.theme-dark label,
body.theme-apple.theme-dark small {
    color: var(--ios-fg);
}
/* But inputs/buttons set their own colors — don't override THEM */
body.theme-apple.theme-dark button,
body.theme-apple.theme-dark .btn,
body.theme-apple.theme-dark input,
body.theme-apple.theme-dark select,
body.theme-apple.theme-dark textarea {
    /* let their own rules win */
}

/* ── Hard-coded navy backgrounds in inline styles → iOS dark surface ── */
body.theme-apple.theme-dark [style*="#1a202c"],
body.theme-apple.theme-dark [style*="#1f2937"],
body.theme-apple.theme-dark [style*="#111827"],
body.theme-apple.theme-dark [style*="rgba(17, 24, 39"],
body.theme-apple.theme-dark [style*="rgba(17,24,39"],
body.theme-apple.theme-dark [style*="0a0e17"],
body.theme-apple.theme-dark [style*="0a0e1a"] {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
}

/* ── Bootstrap colored-background helpers ── */
body.theme-apple.theme-dark .bg-light,
body.theme-apple.theme-dark .bg-white {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .bg-dark {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}

/* ── Settings page specific (Save button is a Bootstrap btn-primary) ── */
body.theme-apple.theme-dark .ios-settings-card,
body.theme-apple.theme-dark .settings-section {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}

/* ── Pagination ── */
body.theme-apple.theme-dark .page-link {
    background: var(--ios-surface);
    color: var(--ios-tint);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .page-item.active .page-link {
    background: var(--ios-tint);
    color: #FFFFFF;
}

/* ── Tooltips / popovers ── */
body.theme-apple.theme-dark .tooltip-inner,
body.theme-apple.theme-dark .popover {
    background: #2C2C2E;
    color: #FFFFFF;
}

/* ── Form text + help text ── */
body.theme-apple.theme-dark .form-text,
body.theme-apple.theme-dark .form-check-label {
    color: var(--ios-fg-2);
}

/* ── Spinner/Loader text on dark bg ── */
body.theme-apple.theme-dark .spinner-border {
    color: var(--ios-tint);
}

/* ============================================================
   DARK MODE — id-scoped overrides + Bootstrap CSS variables
   Found via live audit on dev.fly.dev: hard-coded #FFFFFF in
   id-scoped selectors (e.g. #faq-container .accordion-button)
   beats my generic .accordion-button dark rule. Win with the
   same id-prefix + extra class chain.
   ============================================================ */

/* ── FAQ page — full dark mode ── */
body.theme-apple.theme-dark #faq-container .accordion-button,
body.theme-apple.theme-dark #faq-container .accordion-button:not(.collapsed),
body.theme-apple.theme-dark #faq-container .accordion-button:hover,
body.theme-apple.theme-dark #faq-container .accordion-button:focus,
body.theme-apple.theme-dark #faq-container .accordion-button:active {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-bottom-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark #faq-container .accordion-button:not(.collapsed) {
    color: var(--ios-tint);
}
body.theme-apple.theme-dark #faq-container .accordion-button::after,
body.theme-apple.theme-dark #faq-container .accordion-button:not(.collapsed)::after {
    /* SVG chevron is dark by default — invert to white for dark mode */
    filter: invert(1) brightness(1.5);
}
body.theme-apple.theme-dark #faq-container .accordion-item {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border-color: var(--ios-separator-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 4px 14px rgba(0,0,0,0.4);
}
body.theme-apple.theme-dark #faq-container .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #faq-container .faq-general-card,
body.theme-apple.theme-dark #faq-container .card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border-color: var(--ios-separator-soft);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #faq-container .faq-section-heading,
body.theme-apple.theme-dark #faq-container .card-header {
    color: var(--ios-fg-2);
}
/* iOS segmented tabs inside FAQ — selected pill becomes dark surface-press */
body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills,
body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills {
    background: rgba(255, 255, 255, 0.05);
}
body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills .nav-link,
body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills .nav-link {
    color: var(--ios-fg-2);
}
body.theme-apple.theme-dark #faq-container #nav-tab.compact-nav-pills .nav-link.active,
body.theme-apple.theme-dark #faq-container .nav.compact-nav-pills .nav-link.active {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
}

/* ── Login + register card ── */
body.theme-apple.theme-dark .login-card,
body.theme-apple.theme-dark .login-card.card,
body.theme-apple.theme-dark .card.login-card {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .login-card .form-control,
body.theme-apple.theme-dark .login-card input,
body.theme-apple.theme-dark .login-card .form-check-input {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
body.theme-apple.theme-dark .login-card .text-muted,
body.theme-apple.theme-dark .login-card small {
    color: var(--ios-fg-2);
}
/* Google sign-in button is hard-coded white — keep contrast but use lighter
   ring so it still pops against the dark card */
body.theme-apple.theme-dark .login-card button[onclick*="google"],
body.theme-apple.theme-dark .login-card a[href*="google"],
body.theme-apple.theme-dark a[href*="google_login"] {
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid var(--ios-separator);
}

/* ── Drive Bootstrap's own CSS variables in dark mode ── */
body.theme-apple.theme-dark {
    --bs-card-bg: var(--ios-surface);
    --bs-card-color: var(--ios-fg);
    --bs-card-border-color: var(--ios-separator-soft);
    --bs-body-bg: var(--ios-bg);
    --bs-body-color: var(--ios-fg);
    --bs-secondary-bg: var(--ios-surface-press);
    --bs-tertiary-bg: var(--ios-bg-2);
    --bs-emphasis-color: var(--ios-fg);
    --bs-secondary-color: var(--ios-fg-2);
    --bs-tertiary-color: var(--ios-fg-3);
    --bs-border-color: var(--ios-separator);
    --bs-border-color-translucent: var(--ios-separator-soft);
    --bs-modal-bg: var(--ios-bg-2);
    --bs-modal-color: var(--ios-fg);
    --bs-modal-header-border-color: var(--ios-separator-soft);
    --bs-modal-footer-border-color: var(--ios-separator-soft);
    --bs-dropdown-bg: var(--ios-bg-2);
    --bs-dropdown-color: var(--ios-fg);
    --bs-dropdown-link-color: var(--ios-fg);
    --bs-dropdown-link-hover-bg: var(--ios-surface-press);
    --bs-list-group-bg: var(--ios-surface);
    --bs-list-group-color: var(--ios-fg);
    --bs-list-group-border-color: var(--ios-separator-soft);
    --bs-accordion-bg: var(--ios-surface);
    --bs-accordion-color: var(--ios-fg);
    --bs-accordion-border-color: var(--ios-separator-soft);
    --bs-accordion-button-bg: var(--ios-surface);
    --bs-accordion-button-color: var(--ios-fg);
    --bs-accordion-active-bg: var(--ios-surface-press);
    --bs-accordion-active-color: var(--ios-tint);
    --bs-input-bg: var(--ios-surface-press);
    --bs-input-color: var(--ios-fg);
    --bs-input-border-color: var(--ios-separator);
}

/* ── Dark mode: bottom nav icons must be visible on dark frosted bar ── */
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item i,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item svg,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item i svg,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item div svg {
    color: rgba(235, 235, 245, 0.78);
    stroke: rgba(235, 235, 245, 0.78);
}
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item.active,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item.active svg,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item.active i,
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating .mobile-nav-item.active i svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}
/* Slightly brighten the nav surface in dark so icons pop against it */
body.theme-apple.theme-dark .mobile-navbar.bottom-nav-floating {
    background: rgba(44, 44, 46, 0.78);
    background-color: rgba(44, 44, 46, 0.78);
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   DARK MODE — buttons with --ios-fg backgrounds invert
   ------------------------------------------------------------
   `.ios-cta-primary` (Add new on competitions list + Save on
   settings) uses `background: var(--ios-fg)`. In light mode fg
   is black → black button works. In dark mode fg flips to white
   → white button + white text = invisible. Force iOS blue.
   ============================================================ */
body.theme-apple.theme-dark .ios-cta-primary,
body.theme-apple.theme-dark a.ios-cta-primary,
body.theme-apple.theme-dark button.ios-cta-primary {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple.theme-dark .ios-cta-primary:active,
body.theme-apple.theme-dark a.ios-cta-primary:active,
body.theme-apple.theme-dark button.ios-cta-primary:active {
    background: var(--ios-tint-press);
    background-color: var(--ios-tint-press);
}
body.theme-apple.theme-dark .ios-cta-secondary {
    color: var(--ios-tint);
}

/* ── Create wizard nav buttons (hard-coded peach gradient) ── */
body.theme-apple.theme-dark .wizard-nav-btn-primary,
body.theme-apple.theme-dark .wizard-nav-btn,
body.theme-apple .wizard-nav-btn-primary,
body.theme-apple .wizard-nav-btn {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}
body.theme-apple.theme-dark .wizard-nav-btn-primary:hover,
body.theme-apple .wizard-nav-btn-primary:hover {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    transform: none;
}

/* ── Comprehensive modal coverage for dark mode ── */
body.theme-apple.theme-dark .modal-content,
body.theme-apple.theme-dark .modal-content.gp-modal-content,
body.theme-apple.theme-dark .modal-dialog .modal-content,
body.theme-apple.theme-dark #createModal .modal-content,
body.theme-apple.theme-dark #joinCompetitionModal .modal-content,
body.theme-apple.theme-dark #recordScoreModal .modal-content,
body.theme-apple.theme-dark #addFolderModal .modal-content,
body.theme-apple.theme-dark #renameFolderModal .modal-content,
body.theme-apple.theme-dark #copyCompetitionModal .modal-content,
body.theme-apple.theme-dark #moveToFolderModal .modal-content,
body.theme-apple.theme-dark #deleteCompetitionModal .modal-content,
body.theme-apple.theme-dark #replacePlayerModal .modal-content,
body.theme-apple.theme-dark #manageAttendanceModal .modal-content,
body.theme-apple.theme-dark #matchAssignmentModal .modal-content,
body.theme-apple.theme-dark #competitionRulesModal .modal-content,
body.theme-apple.theme-dark #rulesModal .modal-content,
body.theme-apple.theme-dark #adminModal .modal-content,
body.theme-apple.theme-dark #qrJoinModal .modal-content,
body.theme-apple.theme-dark #sortModal .modal-content,
body.theme-apple.theme-dark #chatsSortModal .modal-content,
body.theme-apple.theme-dark #demoModeInfoModal .modal-content,
body.theme-apple.theme-dark #eloInfoModal .photo-menu-content,
body.theme-apple.theme-dark #winStreakInfoModal .photo-menu-content,
body.theme-apple.theme-dark #matchesInfoModal .photo-menu-content,
body.theme-apple.theme-dark #winRateInfoModal .photo-menu-content,
body.theme-apple.theme-dark #bocInfoModal .photo-menu-content,
body.theme-apple.theme-dark #bocrInfoModal .photo-menu-content,
body.theme-apple.theme-dark #creditsInfoModal .photo-menu-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator-soft);
    background-image: none;
}
body.theme-apple.theme-dark .modal-header,
body.theme-apple.theme-dark .modal-footer {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .modal-title,
body.theme-apple.theme-dark .modal h5,
body.theme-apple.theme-dark .modal h6,
body.theme-apple.theme-dark .modal label {
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .modal p,
body.theme-apple.theme-dark .modal .text-muted,
body.theme-apple.theme-dark .modal small {
    color: var(--ios-fg-2);
}
body.theme-apple.theme-dark .modal input,
body.theme-apple.theme-dark .modal select,
body.theme-apple.theme-dark .modal textarea,
body.theme-apple.theme-dark .modal .form-control {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
body.theme-apple.theme-dark .modal input::placeholder,
body.theme-apple.theme-dark .modal textarea::placeholder {
    color: var(--ios-fg-3);
}
body.theme-apple.theme-dark .modal .btn-close,
body.theme-apple.theme-dark .modal .btn-close-white {
    filter: invert(1) brightness(1.5);
    opacity: 0.85;
}

/* Backdrop a bit darker in dark mode */
body.theme-apple.theme-dark .modal-backdrop.show {
    background: rgba(0, 0, 0, 0.65);
}

/* Info-card panels (ELO / Win streak / Matches etc. use .photo-menu-content) */
body.theme-apple.theme-dark .photo-menu-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark .photo-menu-content button.photo-menu-cancel {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-top: 1px solid var(--ios-separator-soft);
}

/* Bottom sheet modals (invite players, rules) */
body.theme-apple.theme-dark .bottom-sheet-modal .modal-content,
body.theme-apple.theme-dark #invitePlayerModal .modal-content,
body.theme-apple.theme-dark .bottom-sheet-header,
body.theme-apple.theme-dark .bottom-sheet-body {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .bottom-sheet-handle {
    background: rgba(255, 255, 255, 0.20);
}

/* Inline-styled inputs (Guest profile modal had rgba(255,255,255,0.05) bg) */
body.theme-apple.theme-dark #guestCountInput,
body.theme-apple.theme-dark #guestSingleInput,
body.theme-apple.theme-dark #guestProfileModal input {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}

/* Confirm-style flash buttons / submit btn in modals */
body.theme-apple.theme-dark .modal .btn-primary,
body.theme-apple.theme-dark .modal button[type="submit"] {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border: none;
}

/* ============================================================
   DARK MODE FIXES — specificity chains + create page surfaces
   ------------------------------------------------------------
   The original `body.theme-apple a.ios-cta-primary:not(.btn)
   :not(.badge):not(.nav-link)...` rule has 7-class specificity,
   beating my earlier dark override. Match the same :not chain.
   ============================================================ */
body.theme-apple.theme-dark a.ios-cta-primary:not(.btn):not(.badge):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.mobile-nav-item),
body.theme-apple.theme-dark a.ios-cta-primary,
body.theme-apple.theme-dark .ios-cta-primary,
html body.theme-apple.theme-dark .ios-cta-primary {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
}
body.theme-apple.theme-dark a.ios-cta-secondary:not(.btn):not(.badge):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.mobile-nav-item),
body.theme-apple.theme-dark .ios-cta-secondary {
    color: var(--ios-tint);
}

/* Create page wizard card — hardcoded #111827 → iOS dark surface in dark mode,
   and iOS-white surface in light mode (was leaking dark navy onto white page) */
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: 1px solid var(--ios-separator-soft);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple.theme-dark .create-wizard-card,
html body.theme-apple.theme-dark .create-wizard-card {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Create page header card extra defense (was teal #496E78) — already transparent
   in light mode via earlier rule, ensure no leakage in dark mode either */
body.theme-apple.theme-dark .create-header-card,
html body.theme-apple.theme-dark .create-header-card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

/* ============================================================
   ROUND 11 — multi-issue polish
   ============================================================ */

/* ---- 1. CHAT page — full dark mode coverage ---- */
body.theme-apple.theme-dark .chat-page,
body.theme-apple.theme-dark .chat-container {
    --wa-bg: var(--ios-bg);
    --wa-bg-pattern: var(--ios-bg);
    --wa-header: var(--ios-bg-2);
    --wa-incoming-bg: var(--ios-surface);
    --wa-outgoing-bg: var(--ios-tint);
    --wa-text: var(--ios-fg);
    --wa-text-muted: var(--ios-fg-2);
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .chat-header,
body.theme-apple.theme-dark .chat-header.ios-imessage-header {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple.theme-dark .chat-messages {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}
body.theme-apple.theme-dark .chat-input-form,
body.theme-apple.theme-dark .chat-input {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    border-top: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple.theme-dark .chat-input-form input,
body.theme-apple.theme-dark .chat-input-field,
body.theme-apple.theme-dark #match-message-input {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
body.theme-apple.theme-dark .ios-msg-row-body,
body.theme-apple.theme-dark .message-bubble:not(.sent) {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .ios-msg-row-body.sent,
body.theme-apple.theme-dark .message-bubble.sent {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
}

/* ---- 2. Profile "Edit Profile" button (pp-btn-primary) ---- */
body.theme-apple.theme-dark .pp-btn-primary,
html body.theme-apple.theme-dark a.pp-btn-primary,
html body.theme-apple.theme-dark .playtomic-profile .pp-actions a.btn.pp-btn-primary,
html body.theme-apple.theme-dark .playtomic-profile a.btn.pp-btn.pp-btn-primary {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #FFFFFF;
    border: 1px solid var(--ios-tint);
}
body.theme-apple.theme-dark .pp-btn-ghost,
html body.theme-apple.theme-dark a.pp-btn-ghost,
html body.theme-apple.theme-dark .playtomic-profile a.btn.pp-btn.pp-btn-ghost {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator);
}

/* ---- 3. Sort modal (and chats sort modal) — white-on-white fix ---- */
body.theme-apple.theme-dark #sortModal .modal-content,
body.theme-apple.theme-dark #chatsSortModal .modal-content,
html body.theme-apple.theme-dark #sortModal .modal-content,
html body.theme-apple.theme-dark #chatsSortModal .modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    border: 1px solid var(--ios-separator-soft);
}
body.theme-apple.theme-dark #sortModal .modal-body,
body.theme-apple.theme-dark #chatsSortModal .modal-body,
body.theme-apple.theme-dark #sortModal .sort-option,
body.theme-apple.theme-dark #chatsSortModal .sort-option {
    background: transparent;
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #sortModal .sort-option:hover,
body.theme-apple.theme-dark #chatsSortModal .sort-option:hover,
body.theme-apple.theme-dark #sortModal .sort-option.active,
body.theme-apple.theme-dark #chatsSortModal .sort-option.active {
    background: var(--ios-surface-press);
}

/* ---- 4. Wizard choice block — when .selected, subtext also turns white ---- */
body.theme-apple .wizard-option-btn.selected .small,
body.theme-apple .wizard-option-btn.selected small,
body.theme-apple .wizard-option-btn.active .small,
body.theme-apple .wizard-option-btn.active small,
body.theme-apple .wizard-option-btn.selected p,
body.theme-apple .wizard-option-btn.active p,
body.theme-apple .wizard-option-btn.selected *,
body.theme-apple .wizard-option-btn.active * {
    color: #FFFFFF;
}

/* ---- 5. Score record modal — full dark coverage ---- */
body.theme-apple.theme-dark #recordScoreModal .modal-content,
body.theme-apple.theme-dark .modal.score-modal .modal-content,
body.theme-apple.theme-dark .score-modal.modal .modal-content,
html body.theme-apple.theme-dark #recordScoreModal .modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #recordScoreModal .modal-header,
body.theme-apple.theme-dark #recordScoreModal .rsm-header,
body.theme-apple.theme-dark #recordScoreModal .modal-footer,
body.theme-apple.theme-dark #recordScoreModal .modal-body {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #recordScoreModal input,
body.theme-apple.theme-dark #recordScoreModal .form-control,
body.theme-apple.theme-dark #recordScoreModal .score-input,
body.theme-apple.theme-dark #recordScoreModal select {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}

/* ---- 6. Tournament timer help modal + other generic info modals ---- */
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-content,
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-header,
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-body,
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-footer {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-body p,
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-body strong,
body.theme-apple.theme-dark #tournamentTimerHelpModal .modal-body div {
    color: var(--ios-fg);
}

/* Timer settings modal — dark mode */
body.theme-apple.theme-dark #timerSettingsModal .modal-content,
body.theme-apple.theme-dark #timerSettingsModal .modal-header,
body.theme-apple.theme-dark #timerSettingsModal .modal-body,
body.theme-apple.theme-dark #timerSettingsModal .modal-footer {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #timerSettingsModal .modal-title,
body.theme-apple.theme-dark #timerSettingsModal .form-label,
body.theme-apple.theme-dark #timerSettingsModal label,
body.theme-apple.theme-dark #timerSettingsModal .ts-info-callout {
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #timerSettingsModal .timer-settings-label-hint,
body.theme-apple.theme-dark #timerSettingsModal .timer-settings-breakdown,
body.theme-apple.theme-dark #timerSettingsModal #ts-breakdown {
    color: var(--ios-fg-2);
}
body.theme-apple.theme-dark #timerSettingsModal .timer-settings-modal-icon {
    color: var(--ios-fg-2);
    stroke: var(--ios-fg-2);
}
body.theme-apple.theme-dark #timerSettingsModal .form-control {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark #timerSettingsModal .ts-info-callout {
    background: rgba(10, 132, 255, 0.16);
    background-color: rgba(10, 132, 255, 0.16);
    border-color: rgba(10, 132, 255, 0.28);
}
body.theme-apple.theme-dark #timerSettingsModal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
}

/* Catch-all: any .modal-content / body / header / footer NOT yet styled
   gets the dark bg. Safer than enumerating every modal id. */
body.theme-apple.theme-dark .modal .modal-content,
body.theme-apple.theme-dark .modal .modal-header,
body.theme-apple.theme-dark .modal .modal-body,
body.theme-apple.theme-dark .modal .modal-footer {
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .modal .modal-content {
    background: var(--ios-bg-2);
    background-image: none;
}

/* ============================================================
   LIGHT MODE FIXES (round 11)
   ============================================================ */

/* ---- 7. Dropdown three-dots on competition cards — remove shadow ---- */
body.theme-apple #competitions-row .dropdown .dropdown-toggle,
body.theme-apple .competition-card .dropdown .dropdown-toggle,
body.theme-apple .folder-card .dropdown .dropdown-toggle {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: none;
    -webkit-box-shadow: none;
}
body.theme-apple #competitions-row .dropdown .dropdown-toggle::after,
body.theme-apple .competition-card .dropdown .dropdown-toggle::after {
    display: none;
}

/* ---- 8. Plus card stroke — kill the peach in theme-overrides.css ---- */
body.theme-apple .create-competition-card,
body.theme-apple .create-competition-card .plus-icon,
body.theme-apple .create-competition-card svg,
body.theme-apple .create-competition-card svg *,
body.theme-apple .create-competition-card svg path,
body.theme-apple .create-competition-card svg circle,
body.theme-apple .create-competition-card .fa-circle-plus,
body.theme-apple .create-competition-card .bi-plus,
body.theme-apple .create-competition-card .bi-plus-circle,
body.theme-apple .create-competition-card .bi-plus-circle-fill,
body.theme-apple .create-competition-card svg.feather-plus-circle,
body.theme-apple .create-competition-card svg.feather-plus,
body.theme-apple .create-competition-card [data-feather="plus"] {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    fill: none;
    border-color: var(--ios-tint);
}

/* ---- 9. Create competition page header — kill teal + white-on-white,
       restore iOS clean: transparent header, dark text, blue accents ---- */
body.theme-apple .create-header-card,
body.theme-apple #create-header.create-header-card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}
body.theme-apple .create-header-card .card-body {
    background: transparent;
    padding: 6px 8px 12px;
}
body.theme-apple .create-header-card .competition-title {
    color: var(--ios-fg);
}
/* Subtitle "Selecteer je voorkeuren" had white inline → force ios-fg-2 */
body.theme-apple .create-header-card .left-section p,
body.theme-apple .create-header-card p.small {
    color: var(--ios-fg-2);
}
/* "Oefenen" label was rgba(255,255,255,0.75) inline */
body.theme-apple .create-header-card .right-section span[style*="rgba(255, 255, 255"] {
    color: var(--ios-fg-2);
}
/* Wizard card: white iOS surface in light, dark surface in dark */
body.theme-apple .create-wizard-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 1px solid var(--ios-separator-soft);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .create-wizard-card .card-body {
    background: transparent;
}

/* ============================================================
   ROUND 12 — chat dark + modal nuke + iOS zoom + faq mobile
   ============================================================ */

/* ---- 1. CHAT: --wa-* vars are defined at :root, my override only hit
       .chat-page. Re-define at html + body scope when theme-dark is on. ---- */
html body.theme-apple.theme-dark,
html body.theme-apple.theme-dark .chat-page,
html body.theme-apple.theme-dark .chat-container,
html body.theme-apple.theme-dark.chat-active,
html.chat-active-html body.theme-apple.theme-dark {
    --wa-bg: #000000;
    --wa-header: #1C1C1E;
    --wa-input-bg: #2C2C2E;
    --wa-sent: #0A84FF;
    --wa-received: #2C2C2E;
    --wa-text: #FFFFFF;
    --wa-secondary: rgba(235, 235, 245, 0.60);
}
/* Override the html.chat-active-html body{} rule that hard-locks bg to wa-header */
html.chat-active-html body.theme-apple.theme-dark,
html.chat-active-html body.theme-apple.theme-dark.chat-active,
html.chat-active-html body.theme-apple.theme-dark .container.mt-2.pt-2 {
    background-color: var(--ios-bg);
    background: var(--ios-bg);
}
body.theme-apple.theme-dark .chat-messages,
body.theme-apple.theme-dark .chat-container {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}

/* ---- 2. iOS zoom on input focus: ALL inputs must be >= 16px font-size ---- */
body.theme-apple input[type="text"],
body.theme-apple input[type="email"],
body.theme-apple input[type="password"],
body.theme-apple input[type="search"],
body.theme-apple input[type="number"],
body.theme-apple input[type="tel"],
body.theme-apple input[type="url"],
body.theme-apple textarea,
body.theme-apple select,
body.theme-apple .form-control,
body.theme-apple .chat-input-field,
body.theme-apple #match-message-input,
body.theme-apple .chat-input-form input {
    font-size: 16px;
}
@media (max-width: 380px) {
    body.theme-apple input,
    body.theme-apple textarea,
    body.theme-apple select,
    body.theme-apple .form-control {
        font-size: 16px;
    }
}

/* ---- 3. FAQ accordion mobile collapse — add touch-action so taps work ---- */
body.theme-apple #faq-container .accordion-button,
body.theme-apple .accordion-button {
    touch-action: manipulation;
    pointer-events: auto;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
body.theme-apple #faq-container .accordion-button *,
body.theme-apple .accordion-button * {
    pointer-events: none;
}

/* ---- 4. NUKE all modals in dark mode — universal, max specificity ----
   The catch-all rule needed force across inline padding/border styles too. */
html body.theme-apple.theme-dark .modal .modal-content,
html body.theme-apple.theme-dark .modal .modal-dialog .modal-content,
html body.theme-apple.theme-dark .modal.show .modal-content,
html body.theme-apple.theme-dark .modal.fade .modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    background-image: none;
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
html body.theme-apple.theme-dark .modal .modal-content > div,
html body.theme-apple.theme-dark .modal .modal-content > form > div,
html body.theme-apple.theme-dark .modal .modal-content > form,
html body.theme-apple.theme-dark .modal .modal-header,
html body.theme-apple.theme-dark .modal .modal-body,
html body.theme-apple.theme-dark .modal .modal-footer {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
/* Modal text + form labels */
html body.theme-apple.theme-dark .modal h1,
html body.theme-apple.theme-dark .modal h2,
html body.theme-apple.theme-dark .modal h3,
html body.theme-apple.theme-dark .modal h4,
html body.theme-apple.theme-dark .modal h5,
html body.theme-apple.theme-dark .modal h6,
html body.theme-apple.theme-dark .modal .modal-title,
html body.theme-apple.theme-dark .modal label,
html body.theme-apple.theme-dark .modal .form-label {
    color: var(--ios-fg);
}
html body.theme-apple.theme-dark .modal p,
html body.theme-apple.theme-dark .modal small,
html body.theme-apple.theme-dark .modal .text-muted {
    color: var(--ios-fg-2);
}
/* Modal form controls */
html body.theme-apple.theme-dark .modal input,
html body.theme-apple.theme-dark .modal input.form-control,
html body.theme-apple.theme-dark .modal select,
html body.theme-apple.theme-dark .modal textarea,
html body.theme-apple.theme-dark .modal .form-control {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
    border-color: var(--ios-separator);
}
html body.theme-apple.theme-dark .modal input::placeholder,
html body.theme-apple.theme-dark .modal textarea::placeholder {
    color: var(--ios-fg-3);
}
/* Submit / peach button inside any modal → iOS blue in dark mode */
html body.theme-apple.theme-dark .modal .btn-gradient-peach,
html body.theme-apple.theme-dark .modal button.btn-gradient-peach,
html body.theme-apple.theme-dark .modal button[type="submit"].btn-gradient-peach,
html body.theme-apple.theme-dark .modal .btn-primary,
html body.theme-apple.theme-dark .modal button[type="submit"]:not(.btn-close):not(.btn-link) {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}
/* btn-gradient-peach inline-style on submit — override gradient-button-override.css */
html body.theme-apple.theme-dark .btn.btn-gradient-peach,
html body.theme-apple.theme-dark button.btn-gradient-peach,
html body.theme-apple.theme-dark button[type="submit"].btn-gradient-peach,
html body.theme-apple.theme-dark [class*="btn-gradient-peach"] {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
}
/* Close button white in dark */
html body.theme-apple.theme-dark .modal .btn-close,
html body.theme-apple.theme-dark .modal .btn-close-white {
    filter: invert(1) brightness(1.5);
    opacity: 0.85;
}

/* ============================================================
   ROUND 13 — chat dark FORCE (overrides hard-coded #FFFFFF in
   the chat-active rules above this block)
   ============================================================ */
html.chat-active-html body.theme-apple.theme-dark .container.mt-2.pt-2,
html.chat-active-html body.theme-apple.theme-dark.chat-active .container.mt-2.pt-2 {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
}
html.chat-active-html body.theme-apple.theme-dark,
html.chat-active-html body.theme-apple.theme-dark.chat-active,
html:has(body.theme-apple.theme-dark.chat-active),
html.chat-active-html:has(body.theme-apple.theme-dark) {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
}
/* All chat ancestor containers must also be dark, otherwise the white
   from the legacy nuclear-catch-all bleeds through as a stroke. */
html.chat-active-html body.theme-apple.theme-dark .container.mt-2.pt-2,
html.chat-active-html body.theme-apple.theme-dark #tab-container,
html.chat-active-html body.theme-apple.theme-dark #tab-container .tab-slot,
html.chat-active-html body.theme-apple.theme-dark #tab-container .tab-slot.active,
html.chat-active-html body.theme-apple.theme-dark .chat-page,
html.chat-active-html body.theme-apple.theme-dark .chat-container,
html.chat-active-html body.theme-apple.theme-dark .chat-messages,
html.chat-active-html body.theme-apple.theme-dark #messagesContainer {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    background-image: none;
}

/* iOS auto-zoom guard — make sure font-size: 16px ALSO wins inside the
   chat-active container, which has nested input rules with. */
body.theme-apple .chat-input-form input,
body.theme-apple .chat-input-field,
body.theme-apple #match-message-input,
html.chat-active-body.theme-apple .chat-input-form input,
html.chat-active-body.theme-apple .chat-input-field,
html.chat-active-body.theme-apple #match-message-input {
    font-size: 16px;
}

/* ============================================================
   ROUND 14 — modal :not-chain specificity nuke for dark mode
   ------------------------------------------------------------
   line 6083 sets `.modal.fade:not(#fullscreenTimerModal):not(
   #fullscreenQRModal) .modal-content` to white. Specificity
   (0,2,4,2). My class-only dark rule (0,0,4,2) lost. Match the
   same :not chain to actually win.
   ============================================================ */
body.theme-apple.theme-dark .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content,
html body.theme-apple.theme-dark .modal.fade:not(#fullscreenTimerModal):not(#fullscreenQRModal):not(#invitePlayerModal) .modal-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    background-image: none;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--ios-separator-soft);
    color: var(--ios-fg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

/* Info-modal panels (.photo-menu-content) — same selector pattern */
body.theme-apple.theme-dark #eloInfoModal .photo-menu-content,
body.theme-apple.theme-dark #winStreakInfoModal .photo-menu-content,
body.theme-apple.theme-dark #matchesInfoModal .photo-menu-content,
body.theme-apple.theme-dark #winRateInfoModal .photo-menu-content,
body.theme-apple.theme-dark #bocInfoModal .photo-menu-content,
body.theme-apple.theme-dark #bocrInfoModal .photo-menu-content,
body.theme-apple.theme-dark #creditsInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #eloInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #winStreakInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #matchesInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #winRateInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #bocInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #bocrInfoModal .photo-menu-content,
html body.theme-apple.theme-dark #creditsInfoModal .photo-menu-content {
    background: var(--ios-bg-2);
    background-color: var(--ios-bg-2);
    color: var(--ios-fg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   ROUND 15 — Create competition page FULL iOS-clean (light mode)
   ------------------------------------------------------------
   User wants NO teal, NO card header chrome, iOS blue selected
   state on wizard option blocks. Using id-prefixed selectors so
   nothing in the page-level <style> block can override.
   ============================================================ */

/* Header card — kill teal, make it look like an iOS large title.
   id+class chain gives (0,1,3,2) which beats page-level (0,0,1,0). */
body.theme-apple #create-header,
body.theme-apple #create-header.create-header-card,
body.theme-apple div#create-header.create-header-card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    margin: calc(env(safe-area-inset-top, 0px) + 24px) 0 18px;
}
body.theme-apple #create-header .card-body {
    background: transparent;
    padding: 0 16px 4px;
}
/* Large iOS title styling */
body.theme-apple #create-header .competition-title,
body.theme-apple #create-header h2.competition-title,
body.theme-apple #create-header .fs-5 {
    font-size: clamp(28px, 6.5vw, 34px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--ios-fg);
    margin: 0;
    text-align: left;
}
body.theme-apple #create-header .left-section p,
body.theme-apple #create-header p.small {
    color: var(--ios-fg-2);
    font-size: 15px;
    font-weight: 500;
    margin-top: 2px;
    text-align: left;
}
/* "Oefenen / Practice" label was inline white */
body.theme-apple #create-header .right-section span,
body.theme-apple #create-header .right-section span[style*="rgba(255, 255, 255"] {
    color: var(--ios-fg-2);
}

/* Wizard card — clean iOS surface (NOT navy #111827) */
body.theme-apple .create-wizard-card,
body.theme-apple .create-wizard-wrapper .create-wizard-card,
body.theme-apple #wizard-container.create-wizard-card,
body.theme-apple div#wizard-container.create-wizard-card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 14px rgba(0, 0, 0, 0.06);
    border-radius: var(--ios-radius-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ios-fg);
}
body.theme-apple .create-wizard-card .card-body {
    background: transparent;
}
body.theme-apple .create-wizard-card h6,
body.theme-apple .create-wizard-card .text-muted,
body.theme-apple .create-wizard-card small,
body.theme-apple .create-wizard-card label,
body.theme-apple .create-wizard-card .wizard-step {
    color: var(--ios-fg);
}

/* Wizard progress bar — kill peach gradient inline */
body.theme-apple #wizard-progress-bar,
body.theme-apple .create-wizard-card .progress-bar {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
}
body.theme-apple .create-wizard-card .progress {
    background-color: var(--ios-fg-4);
    border-radius: 999px;
    overflow: hidden;
}

/* Wizard input pill — was white text on white bg + peach focus ring */
body.theme-apple .wizard-input-pill {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 14px;
    padding: 11px 16px;
    font-size: 16px;
}
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);
    outline: none;
    color: var(--ios-fg);
}
body.theme-apple .wizard-input-pill::placeholder {
    color: var(--ios-fg-3);
}

/* Wizard option buttons — selected/active = iOS blue (light + dark) */
body.theme-apple .wizard-option-btn.selected,
body.theme-apple .wizard-option-btn.active,
body.theme-apple button.wizard-option-btn.selected,
body.theme-apple .btn.wizard-option-btn.selected,
body.theme-apple .btn.wizard-option-btn.active {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    border: 1px solid var(--ios-tint);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}
body.theme-apple .wizard-option-btn.selected *,
body.theme-apple .wizard-option-btn.active *,
body.theme-apple .wizard-option-btn.selected .small,
body.theme-apple .wizard-option-btn.selected small,
body.theme-apple .wizard-option-btn.selected strong,
body.theme-apple .wizard-option-btn.active strong {
    color: #FFFFFF;
}

/* Dark mode: progress bar + wizard pill same iOS blue */
html body.theme-apple.theme-dark #wizard-progress-bar,
html body.theme-apple.theme-dark .create-wizard-card .progress-bar {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
}
html body.theme-apple.theme-dark .wizard-input-pill {
    background: var(--ios-surface-press);
    background-color: var(--ios-surface-press);
    color: var(--ios-fg);
}

/* ============================================================
   ROUND 16 — wizard option selected = iOS blue, FINAL.
   Hex values direct (no vars) so nothing can clobber. Stacked
   selectors for max specificity.
   ============================================================ */
body.theme-apple .wizard-option-btn.selected,
body.theme-apple .wizard-option-btn.active,
body.theme-apple button.wizard-option-btn.selected,
body.theme-apple button.wizard-option-btn.active,
body.theme-apple .btn.wizard-option-btn.selected,
body.theme-apple .btn.wizard-option-btn.active,
body.theme-apple #competition-type .wizard-option-btn.selected,
body.theme-apple .wizard-step .wizard-option-btn.selected,
body.theme-apple .wizard-step.active .wizard-option-btn.selected,
body.theme-apple form#wizard-form .wizard-option-btn.selected {
    background: #007AFF;
    background-color: #007AFF;
    background-image: none;
    border: 2px solid #007AFF;
    border-color: #007AFF;
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.18);
}
body.theme-apple .wizard-option-btn.selected *,
body.theme-apple .wizard-option-btn.active *,
body.theme-apple .wizard-option-btn.selected small,
body.theme-apple .wizard-option-btn.selected .small,
body.theme-apple .wizard-option-btn.selected strong,
body.theme-apple .wizard-option-btn.selected p,
body.theme-apple .wizard-option-btn.selected .fw-bold {
    color: #FFFFFF;
}

/* ============================================================
   ROUND 17 — DEFINITIVE top-navbar transparency
   Page-bg (#E5E5EA grey) MUST show through. No white band.
   ============================================================ */
body.theme-apple #floating-header,
body.theme-apple .navbar.fixed-top,
body.theme-apple nav#floating-header.navbar,
body.theme-apple nav#floating-header.navbar.fixed-top {
    background: transparent;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}
body.theme-apple #floating-header > *,
body.theme-apple .navbar.fixed-top > .container {
    background: transparent;
    background-color: transparent;
}
/* Desktop @media in header-navbar-styling.css forced rgba(0,0,0,0.7) — kill */
@media (min-width: 1200px) {
    body.theme-apple #floating-header,
    body.theme-apple nav#floating-header.navbar {
        background: transparent;
        background-color: transparent;
    }
}
/* (Previously hardened-hidden — top cover is now back on, see line ~84) */

/* ============================================================
   COMPACT NAV (< 1200px): the hamburger + iOS floating dropdown
   panel CSS lives below. Wrapped in a max-width media query so
   it doesn't fight the inline desktop nav at ≥1200px. iPads run
   portrait-locked at up to 1024pt, so they use this compact
   layout — same clean top bar + bottom nav as on phone.
   ============================================================ */
@media (max-width: 1199.98px) {
/* ============================================================
   Hamburger menu open → WHITE background.
   When the navbar collapse opens, base.html adds `.menu-open` to
   #floating-header. Give that state a clean white iOS surface
   so the menu items are readable on a solid background.
   ============================================================ */
body.theme-apple #floating-header.menu-open,
body.theme-apple nav#floating-header.menu-open {
    background: #FFFFFF;
    background-color: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-bottom: 0.5px solid var(--ios-separator-soft);
}
body.theme-apple #floating-header.menu-open .navbar-collapse,
body.theme-apple #floating-header.menu-open #navbarNav,
body.theme-apple #floating-header.menu-open #navbarNavGuest {
    background: #FFFFFF;
    background-color: #FFFFFF;
}
/* Nav links in the open menu → iOS dark text */
body.theme-apple #floating-header.menu-open .navbar-nav .nav-link,
body.theme-apple #floating-header.menu-open .nav-item .nav-link,
body.theme-apple #floating-header.menu-open .dropdown-toggle {
    color: var(--ios-fg);
    font-weight: 500;
}
body.theme-apple #floating-header.menu-open .navbar-nav .nav-link:hover,
body.theme-apple #floating-header.menu-open .nav-item .nav-link:hover {
    color: var(--ios-tint);
}
/* Hamburger icon stroke → dark when menu open */
body.theme-apple #floating-header.menu-open .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================================
   Hamburger menu — iOS floating context-menu card.
   Drop the full-width white band; render the expanded menu as
   a compact rounded panel anchored to the top-left (next to the
   hamburger), like Apple's three-dots dropdown.
   ============================================================ */
/* Reset the previous full-width menu-open bg so just the dropdown panel
   itself shows the white card. Header stays transparent. */
body.theme-apple #floating-header.menu-open,
body.theme-apple nav#floating-header.menu-open {
    background: transparent;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: none;
}

/* The collapse element becomes a floating card */
body.theme-apple #floating-header .navbar-collapse,
body.theme-apple #floating-header #navbarNav,
body.theme-apple #floating-header #navbarNavGuest {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 48px);
    left: 12px;
    right: auto;
    width: auto;
    min-width: 220px;
    max-width: 280px;
    background: #FFFFFF;
    background-color: #FFFFFF;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
    padding: 6px;
    margin: 0;
    overflow: hidden;
    transform-origin: top left;
}

/* When collapsed: hide cleanly */
body.theme-apple #floating-header .navbar-collapse:not(.show),
body.theme-apple #floating-header #navbarNav:not(.show),
body.theme-apple #floating-header #navbarNavGuest:not(.show) {
    display: none;
}

/* Inner UL — straight column, no flex weirdness */
body.theme-apple #floating-header .navbar-collapse .navbar-nav,
body.theme-apple #floating-header #navbarNav .navbar-nav,
body.theme-apple #floating-header #navbarNavGuest .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    width: 100%;
    transform: none;
}

/* Nav items styled as iOS list rows */
body.theme-apple #floating-header.menu-open .nav-item {
    width: 100%;
    border-bottom: 0.5px solid var(--ios-separator-soft);
    padding: 0;
    margin: 0;
}
body.theme-apple #floating-header.menu-open .nav-item:last-child {
    border-bottom: none;
}

body.theme-apple #floating-header.menu-open .navbar-nav .nav-link,
body.theme-apple #floating-header.menu-open .nav-item .nav-link,
body.theme-apple #floating-header.menu-open .dropdown-toggle {
    color: var(--ios-fg);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 12px 14px;
    margin: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background-color 120ms ease;
}
body.theme-apple #floating-header.menu-open .navbar-nav .nav-link:hover,
body.theme-apple #floating-header.menu-open .nav-item .nav-link:hover,
body.theme-apple #floating-header.menu-open .nav-link:active {
    background: var(--ios-surface-press);
    color: var(--ios-tint);
}

/* Dropdown menu inside the panel (Admin / Language / User) — flat, no nested card */
body.theme-apple #floating-header.menu-open .dropdown-menu {
    position: static;
    transform: none;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 2px 0 6px 14px;
    margin: 0;
}
body.theme-apple #floating-header.menu-open .dropdown-item {
    color: var(--ios-fg-2);
    font-size: 14px;
    padding: 8px 6px;
    border-radius: 6px;
}
body.theme-apple #floating-header.menu-open .dropdown-item:hover {
    background: var(--ios-surface-press);
    color: var(--ios-tint);
}

/* Badge inside nav-link (e.g. unread chat count) */
body.theme-apple #floating-header.menu-open .nav-link .badge {
    margin-left: auto;
    background: var(--ios-red);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* Subtle fade-in when opening */
@keyframes navMenuPop {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
body.theme-apple #floating-header .navbar-collapse.show,
body.theme-apple #floating-header #navbarNav.show,
body.theme-apple #floating-header #navbarNavGuest.show {
    animation: navMenuPop 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
} /* end @media (max-width: 1199.98px) — mobile hamburger dropdown */

/* ============================================================
   Competition header top-row — right-align Invite + Start, and
   keep the "Nog X spelers nodig" hint readable (was half cut
   off on mobile due to negative margin-bottom + tiny font).
   ============================================================ */
body.theme-apple .competition-header .right-section,
body.theme-apple .competition-header .d-flex.justify-content-between .right-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}
body.theme-apple .competition-header > .card-body > .text-muted[style*="text-align: right"],
body.theme-apple .competition-header > .card-body > .text-danger[style*="text-align: right"] {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 6px;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
    color: var(--ios-fg-2);
}
body.theme-apple .competition-header > .card-body > .text-danger[style*="text-align: right"] {
    color: var(--ios-red);
}

/* ============================================================
   Manage Attendance modal — kill the inline modal-dialog
   positioning so it picks up the centered modal pattern like
   every other modal. The template hard-codes a top-aligned
   layout via inline style that we need to beat.
   ============================================================ */
body.theme-apple #manageAttendanceModal .modal-dialog,
body.theme-apple #manageAttendanceModal .modal-dialog[style] {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    margin: 0;
    padding: 0;
    max-width: 480px;
    width: 92%;
    max-height: calc(100vh - 32px);
    height: auto;
    display: block;
    align-items: unset;
    justify-content: unset;
    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;
}
body.theme-apple #manageAttendanceModal.show .modal-dialog,
body.theme-apple #manageAttendanceModal.show .modal-dialog[style] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
body.theme-apple #manageAttendanceModal .modal-content {
    max-height: calc(100vh - 32px);
    width: 100%;
    margin: 0;
}

/* Scroll-cover trigger: when the navbar fades out (.header-scrolled),
   simultaneously fade the top cover in. iOS Safari 16.4+ + Chrome 105+
   support :has(). Fallback for older browsers: cover stays hidden, which
   is the same as before this feature shipped — no regression. */
html:has(body.theme-apple #floating-header.header-scrolled) #ios-top-cover,
body.theme-apple:has(#floating-header.header-scrolled) #ios-top-cover {
    opacity: 1;
}

/* Hamburger menu — INSTANT open (kill Bootstrap collapse height transition).
   Bootstrap collapse defaults to ~350ms height animation, which felt sluggish.
   Skip it entirely so the dropdown pops open the moment the tap registers. */
body.theme-apple #floating-header .navbar-collapse,
body.theme-apple #floating-header .navbar-collapse.collapsing,
body.theme-apple #floating-header #navbarNav,
body.theme-apple #floating-header #navbarNav.collapsing,
body.theme-apple #floating-header #navbarNavGuest,
body.theme-apple #floating-header #navbarNavGuest.collapsing {
    transition: none;
    animation-duration: 0s;
}
/* Shorter pop animation for even snappier feel */
body.theme-apple #floating-header .navbar-collapse.show,
body.theme-apple #floating-header #navbarNav.show,
body.theme-apple #floating-header #navbarNavGuest.show {
    animation: navMenuPop 90ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Tournament page (and any other) — match-score cards in dark
   mode. The light theme rule for `.card` has a :not() chain
   with 2 IDs (specificity 0,2,6,1) which beats my class-only
   dark override. Match that specificity so dark mode wins.
   ============================================================ */
body.theme-apple.theme-dark .card:not(.competition-header):not(.join-container-header):not(#upcoming-matches-container .card):not(#completed-matches-container .card):not(.create-competition-card),
html body.theme-apple.theme-dark .card:not(.competition-header):not(.join-container-header):not(#upcoming-matches-container .card):not(#completed-matches-container .card):not(.create-competition-card) {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    color: var(--ios-fg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 14px rgba(0, 0, 0, 0.35);
}
body.theme-apple.theme-dark .card .card-body,
html body.theme-apple.theme-dark .card .card-body {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg);
}

/* Tournament page specific — its inline <style> hardcodes dark navy that
   looks fine in dark mode, but its `.match-details`, score numbers and
   text need to be light. */
body.theme-apple.theme-dark .match-details,
body.theme-apple.theme-dark .boxscore-container,
body.theme-apple.theme-dark .court-badge-pill,
body.theme-apple.theme-dark .team-name,
body.theme-apple.theme-dark .score-display,
body.theme-apple.theme-dark .set-score {
    color: var(--ios-fg);
}

/* Tournament rounds accordion — dark mode surfaces */
body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-item,
body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-button,
body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-button:not(.collapsed),
body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-body {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
    border-color: var(--ios-separator-soft);
}
body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-button::after {
    filter: invert(1) grayscale(1);
    opacity: 0.75;
}

/* Tournament accordion — kill the thin horizontal stroke between the
   expanded button and the body. The inline tournament.html style puts
   `border-top: 1px solid rgba(255,255,255,0.1)` on .accordion-body. */
body.theme-apple .accordion-body,
body.theme-apple .accordion-body {
    border-top: none;
}
body.theme-apple .accordion-button:not(.collapsed),
body.theme-apple .accordion-button:not(.collapsed) {
    box-shadow: none;
    border-bottom: none;
}

/* ============================================================
   Tournament page — match score cards. Brute-force override
   targeting .card directly inside .accordion-body where the
   JS-rendered match cards live. Was still showing white due
   to Bootstrap defaults sneaking through.
   ============================================================ */
html body.theme-apple.theme-dark .accordion-body .card,
html body.theme-apple.theme-dark .accordion-body .card .card-body,
html body.theme-apple.theme-dark #tournamentRoundsAccordion .card,
html body.theme-apple.theme-dark #tournamentRoundsAccordion .card .card-body {
    background: #1C1C1E;
    background-color: #1C1C1E;
    background-image: none;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--ios-fg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
html body.theme-apple.theme-dark .accordion-body .card .card-body {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* ============================================================
   Timer Help + Timer Settings modals — content was pressed
   right up against the modal edge. Give the body proper iOS
   padding so text breathes.
   ============================================================ */
body.theme-apple #tournamentTimerHelpModal .modal-body,
body.theme-apple #timerSettingsModal .modal-body,
body.theme-apple #tournamentTimerHelpModal .modal-body[style],
body.theme-apple #timerSettingsModal .modal-body[style] {
    padding: 24px 30px 28px;
}
body.theme-apple #tournamentTimerHelpModal .modal-header,
body.theme-apple #timerSettingsModal .modal-header,
body.theme-apple #tournamentTimerHelpModal .modal-header[style],
body.theme-apple #timerSettingsModal .modal-header[style] {
    padding: 22px 30px 14px;
}
body.theme-apple #tournamentTimerHelpModal .modal-footer,
body.theme-apple #timerSettingsModal .modal-footer,
body.theme-apple #tournamentTimerHelpModal .modal-footer[style],
body.theme-apple #timerSettingsModal .modal-footer[style] {
    padding: 14px 30px 22px;
}
/* Force form fields inside the timer settings modal off the edges (the
   inline-styled input wrappers had their own margins that pulled visually
   close to the edge). */
body.theme-apple #timerSettingsModal .modal-body > * {
    margin-left: 0;
    margin-right: 0;
}
body.theme-apple #timerSettingsModal .form-control {
    padding: 10px 14px;
}
/* Bullet/list indentation inside help modal — keep them visually inside
   the padded gutter. */
body.theme-apple #tournamentTimerHelpModal .modal-body ul,
body.theme-apple #tournamentTimerHelpModal .modal-body ol {
    padding-left: 22px;
    margin-bottom: 14px;
}
body.theme-apple #tournamentTimerHelpModal .modal-body p,
body.theme-apple #tournamentTimerHelpModal .modal-body li {
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ============================================================
   Desktop nav behavior — always-visible solid header with
   separator. Phones and tablets keep the fade-on-scroll behavior.
   Breakpoint: 1200px (Bootstrap xl), matching the compact-nav
   breakpoint below so iPads get one coherent mobile-style bar.
   ============================================================ */
@media (min-width: 1200px) {
    /* Solid header — slightly lighter than page bg, with a thin
       separator below. iOS frosted-glass blur for depth. */
    body.theme-apple #floating-header,
    body.theme-apple nav#floating-header.navbar.fixed-top {
        background: rgba(255, 255, 255, 0.82);
        background-color: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 0.5px solid var(--ios-separator);
        box-shadow: none;
        transition: none;
    }
    /* Force header always fully visible — no scroll fade on desktop */
    body.theme-apple #floating-header,
    body.theme-apple #floating-header.header-scrolled,
    body.theme-apple nav#floating-header.navbar.fixed-top.header-scrolled {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    body.theme-apple #floating-header > *,
    body.theme-apple #floating-header .container,
    body.theme-apple #floating-header .navbar-brand,
    body.theme-apple #floating-header .navbar-toggler,
    body.theme-apple #floating-header #mobile-notification-bell {
        opacity: 1;
        visibility: visible;
    }
    /* Hide the scroll-cover entirely on desktop — header itself is the
       solid band; cover would just stack on top of it. */
    body.theme-apple #ios-top-cover,
    body.theme-apple:has(#floating-header.header-scrolled) #ios-top-cover,
    html:has(body.theme-apple #floating-header.header-scrolled) #ios-top-cover {
        display: none;
        opacity: 0;
    }
}

/* Dark-mode variant of the desktop solid header */
@media (min-width: 1200px) {
    html body.theme-apple.theme-dark #floating-header,
    html body.theme-apple.theme-dark nav#floating-header.navbar.fixed-top {
        background: rgba(28, 28, 30, 0.82);
        background-color: rgba(28, 28, 30, 0.82);
        border-bottom: 0.5px solid var(--ios-separator);
    }
}

/* ============================================================
   Desktop nav — inline nav links in the top bar for quick access
   (no hamburger). Phones AND tablets keep the iOS hamburger +
   floating dropdown panel. Breakpoint: 1200px (Bootstrap xl) —
   iPads are portrait-locked at up to 1024pt, so they stay on the
   clean compact bar instead of cramming every link into the top.
   ============================================================ */
@media (min-width: 1200px) {
    /* Mobile-only container hidden on desktop */
    body.theme-apple #floating-header .d-md-none,
    body.theme-apple #floating-header .d-xl-none {
        display: none;
    }
    /* Desktop logo shown */
    body.theme-apple #floating-header .navbar-brand.d-none.d-md-flex,
    body.theme-apple #floating-header .navbar-brand.d-none.d-xl-flex,
    body.theme-apple #floating-header a.navbar-brand {
        display: flex;
        align-items: center;
    }
    /* Hide the hamburger toggler on desktop */
    body.theme-apple #floating-header .navbar-toggler,
    body.theme-apple #floating-header button.navbar-toggler {
        display: none;
    }
    /* Show the nav-collapse inline as a flex row, no dropdown card */
    body.theme-apple #floating-header .navbar-collapse,
    body.theme-apple #floating-header #navbarNav,
    body.theme-apple #floating-header #navbarNavGuest {
        display: flex;
        position: static;
        flex-basis: auto;
        flex-grow: 1;
        align-items: center;
        justify-content: flex-end;
        top: auto;
        left: auto;
        right: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        max-width: none;
        min-width: 0;
        animation: none;
        opacity: 1;
        visibility: visible;
        height: auto;
        overflow: visible;
    }
    /* Horizontal nav list with iOS pill items */
    body.theme-apple #floating-header .navbar-nav,
    body.theme-apple #floating-header .navbar-collapse .navbar-nav {
        flex-direction: row;
        gap: 4px;
        align-items: center;
    }
    body.theme-apple #floating-header .nav-link,
    body.theme-apple #floating-header .navbar-nav .nav-link,
    body.theme-apple #floating-header .navbar-nav .nav-item .nav-link {
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--ios-fg);
        white-space: nowrap;
        pointer-events: auto;
        cursor: pointer;
        text-decoration: none;
        opacity: 1;
        visibility: visible;
        transition: background 140ms ease, color 140ms ease;
    }
    body.theme-apple #floating-header .navbar-nav .nav-item {
        display: inline-flex;
        list-style: none;
    }
    body.theme-apple #floating-header .nav-link:hover {
        background: var(--ios-surface-hover);
        color: var(--ios-fg);
    }
    body.theme-apple #floating-header .nav-link.active {
        background: var(--ios-tint-soft);
        color: var(--ios-tint);
    }
    /* Dark mode: lighten the inline link text */
    html body.theme-apple.theme-dark #floating-header .nav-link {
        color: rgba(255, 255, 255, 0.92);
    }
    html body.theme-apple.theme-dark #floating-header .nav-link:hover {
        background: rgba(255, 255, 255, 0.10);
    }
}

/* ============================================================
   Bottom nav — kill iOS Safari's 300ms tap delay so the first
   tap always registers. `touch-action: manipulation` tells the
   browser the element can't trigger double-tap-zoom, so it
   doesn't have to wait to see if a second tap is coming.
   Also disables tap highlight + text selection for a snappier,
   native feel.
   ============================================================ */
body.theme-apple .mobile-navbar.bottom-nav-floating .mobile-nav-item,
body.theme-apple .mobile-navbar .mobile-nav-item,
body.theme-apple .bottom-nav-floating a,
body.theme-apple .mobile-navbar a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* ============================================================
   Generic top-of-page header card — same transparent treatment
   as .competition-header.card so the page-bg (grey) shows
   behind the floating navbar instead of a white card poking up.
   Covers settings, FAQ, and any future page using the
   `card.page-with-header-space` pattern.
   ============================================================ */
body.theme-apple .card.page-with-header-space,
body.theme-apple .card.page-with-header-space,
body.theme-apple .card.page-with-header-space .card-body,
body.theme-apple .card.page-with-header-space .card-body {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* If a page's first child under the container is a plain `.card` (no
   page-with-header-space), give it a margin-top so it doesn't sit under
   the navbar at all. */
body.theme-apple .container > .card:first-child:not(.page-with-header-space):not(.competition-header) {
    margin-top: 12px;
}

/* ============================================================
   DARK MODE — three fixes:
   1. Navbar hamburger icon + bell + logo were invisible (black
      stroke / dark logo on dark bg).
   2. Leaderboard "own row" highlight (lb-player-self) was light
      blue (#EEF4FF) which looked white-ish on dark bg.
   3. Tournament page completed-match `.card` containers were
      still white — beat the prior `:has()` rule.
   ============================================================ */

/* 1a. Hamburger icon — white stroke in dark mode */
html body.theme-apple.theme-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* 1b. Notification bell — white */
html body.theme-apple.theme-dark #mobile-notification-bell,
html body.theme-apple.theme-dark #mobile-notification-bell svg,
html body.theme-apple.theme-dark #mobile-notification-bell .spinner-border {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

/* 1c. Logo — invert + tone so the dark logo becomes light in dark mode.
   The source PNG is a dark-toned mark; CSS filter is the cheapest path
   without shipping a second asset. */
html body.theme-apple.theme-dark #floating-header .navbar-brand img,
html body.theme-apple.theme-dark #floating-header img[alt="EffePadelle"] {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* 2. Leaderboard own-row highlight in dark mode */
body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:first-child,
body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:nth-child(2) {
    background: rgba(10, 132, 255, 0.22);
    background-color: rgba(10, 132, 255, 0.22);
    color: var(--ios-fg);
}
body.theme-apple.theme-dark .lb-player-self,
html body.theme-apple.theme-dark .lb-player-self {
    color: var(--ios-tint);
    font-weight: 600;
}

/* 3. Tournament page — match score cards. Use a brutally specific
   selector that wins over both the light-mode default and any inline
   render JS. Targets the card AND its inner card-body. */
html body.theme-apple.theme-dark #rounds-accordion-container .card,
html body.theme-apple.theme-dark #rounds-accordion-container .card .card-body,
html body.theme-apple.theme-dark #rounds-accordion-container .accordion-body .card,
html body.theme-apple.theme-dark #rounds-accordion-container .accordion-body .card .card-body,
html body.theme-apple.theme-dark .accordion .accordion-body .col-md-6 > .card,
html body.theme-apple.theme-dark .accordion .accordion-body .col-md-6 > .card > .card-body {
    background: #1C1C1E;
    background-color: #1C1C1E;
    background-image: none;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    color: var(--ios-fg);
}
html body.theme-apple.theme-dark #rounds-accordion-container .card .card-body,
html body.theme-apple.theme-dark #rounds-accordion-container .accordion-body .card .card-body,
html body.theme-apple.theme-dark .accordion .accordion-body .col-md-6 > .card > .card-body {
    background: transparent;
    background-color: transparent;
    border: none;
}
html body.theme-apple.theme-dark #rounds-accordion-container .team-name,
html body.theme-apple.theme-dark #rounds-accordion-container .player-name,
html body.theme-apple.theme-dark #rounds-accordion-container .vs,
html body.theme-apple.theme-dark .accordion .accordion-body .team-name,
html body.theme-apple.theme-dark .accordion .accordion-body .player-name {
    color: var(--ios-fg);
}

/* ============================================================
   Dark mode chat — input field, footer container, received
   bubbles. Previous rules used `var(--ios-surface)` which is
   #1C1C1E in dark, but `.form-control` from Bootstrap defaults
   to white and was winning. Pin everything explicitly here.
   ============================================================ */

/* Chat container + messages background */
html body.theme-apple.theme-dark .chat-container,
html body.theme-apple.theme-dark .chat-fullscreen,
html body.theme-apple.theme-dark .chat-messages,
html body.theme-apple.theme-dark #messagesContainer,
html.chat-active-html body.theme-apple.theme-dark,
html.chat-active-html body.theme-apple.theme-dark .chat-container,
html.chat-active-html body.theme-apple.theme-dark .chat-messages {
    background: #000000;
    background-color: #000000;
    color: var(--ios-fg);
}

/* Chat footer (the container the input lives in) */
html body.theme-apple.theme-dark .chat-footer,
html body.theme-apple.theme-dark .chat-input,
html body.theme-apple.theme-dark .chat-input-group {
    background: #000000;
    background-color: #000000;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

/* The actual input field — beat Bootstrap's .form-control default */
html body.theme-apple.theme-dark .chat-input input,
html body.theme-apple.theme-dark .chat-input textarea,
html body.theme-apple.theme-dark .chat-input-form input,
html body.theme-apple.theme-dark #match-message-input,
html body.theme-apple.theme-dark .chat-input-group .form-control,
html body.theme-apple.theme-dark .chat-input-group input.form-control,
html body.theme-apple.theme-dark .chat-footer .form-control,
html body.theme-apple.theme-dark .chat-footer input {
    background: #1C1C1E;
    background-color: #1C1C1E;
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}
html body.theme-apple.theme-dark .chat-input input::placeholder,
html body.theme-apple.theme-dark #match-message-input::placeholder,
html body.theme-apple.theme-dark .chat-input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
html body.theme-apple.theme-dark .chat-input input:focus,
html body.theme-apple.theme-dark #match-message-input:focus,
html body.theme-apple.theme-dark .chat-input-group .form-control:focus {
    background: #1C1C1E;
    background-color: #1C1C1E;
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.22);
    color: #FFFFFF;
}

/* Received bubble — was #E9E9EB (almost white). Make it dark grey in
   dark mode so white text reads. */
html body.theme-apple.theme-dark .message.received {
    background: #1C1C1E;
    background-color: #1C1C1E;
    color: #FFFFFF;
}
html body.theme-apple.theme-dark .message.received > div,
html body.theme-apple.theme-dark .message.received > div > span,
html body.theme-apple.theme-dark .message.received .msg-text {
    color: #FFFFFF;
}
/* Received sender name — keep iOS blue accent */
html body.theme-apple.theme-dark .message.received .msg-sender,
html body.theme-apple.theme-dark .message.received .message-sender {
    color: #0A84FF;
}
html body.theme-apple.theme-dark .message.received .message-time,
html body.theme-apple.theme-dark .message.sent .message-time {
    color: rgba(255, 255, 255, 0.55);
}

/* Sent bubble — keep the dark charcoal gradient but bump it a bit
   lighter so it stands out from the now-dark page bg. */
html body.theme-apple.theme-dark .message.sent {
    background: linear-gradient(180deg, #3A3A3C 0%, #2C2C2E 100%);
    color: #FFFFFF;
}

/* Send button stays iOS blue */
html body.theme-apple.theme-dark .chat-send-btn {
    background: var(--ios-tint);
    color: #FFFFFF;
}

/* ============================================================
   Dark mode — modal Close button (footer). Bootstrap's
   `.btn-secondary` renders with a light grey bg + border on
   dark surfaces which looks like a stray rounded rectangle.
   Make it a clean iOS-style dismiss link with no border.
   ============================================================ */
html body.theme-apple.theme-dark .modal-footer .btn-secondary,
html body.theme-apple.theme-dark .modal-footer .btn.btn-secondary,
html body.theme-apple.theme-dark .modal-footer button[data-bs-dismiss="modal"],
html body.theme-apple.theme-dark .modal-content .modal-footer .btn-secondary {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    color: var(--ios-tint);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
}
html body.theme-apple.theme-dark .modal-footer .btn-secondary:hover,
html body.theme-apple.theme-dark .modal-footer .btn.btn-secondary:hover,
html body.theme-apple.theme-dark .modal-footer button[data-bs-dismiss="modal"]:hover {
    background: rgba(10, 132, 255, 0.12);
    color: var(--ios-tint);
}

/* Same defensive treatment for the footer's separator border in dark */
html body.theme-apple.theme-dark .modal-footer {
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    background: transparent;
}

/* ============================================================
   DARK MODE — `.match-details` inside the tournament rounds
   accordion was still painted white (#FFFFFF) by a light-mode
   rule earlier in this file. Override with full selector chain.
   ============================================================ */
html body.theme-apple.theme-dark #tournamentRoundsAccordion .accordion-body .card .match-details,
html body.theme-apple.theme-dark #tournamentRoundsAccordion .card .match-details,
html body.theme-apple.theme-dark .accordion-body .card .match-details,
html body.theme-apple.theme-dark #rounds-accordion-container .card .match-details,
html body.theme-apple.theme-dark .match-details {
    background: #1C1C1E;
    background-color: #1C1C1E;
    background-image: none;
    color: var(--ios-fg);
}

/* ============================================================
   Tournament round badges — distinct iOS system colors per state
   so completed vs upcoming vs locked are obvious at a glance.
   Works in both light and dark themes (the iOS system colors
   read correctly on either background).
   ============================================================ */

/* COMPLETED — iOS soft-green chip (matches HOST/MEMBER/DEMO style) */
body.theme-apple .accordion-button .badge.bg-success.completed-badge,
body.theme-apple .badge.bg-success.completed-badge,
body.theme-apple .badge.completed-badge,
body.theme-apple .completed-round .badge,
body.theme-apple .accordion-button.completed-round .badge {
    background: rgba(52, 199, 89, 0.14);
    background-color: rgba(52, 199, 89, 0.14);
    background-image: none;
    color: #1F7A2E;
    border: none;
    text-shadow: none;
    box-shadow: none;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1;
    min-width: 60px;
    display: inline-block;
    text-align: center;
    height: auto;
}

/* UPCOMING — warm amber chip, white label */
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);
    background-image: none;
    color: #fff;
    border: none;
    box-shadow: none;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 1;
    min-width: 60px;
    display: inline-block;
    text-align: center;
}

/* LOCKED — neutral grey ghost pill */
body.theme-apple .accordion-button .badge.bg-secondary,
body.theme-apple .badge.locked-badge,
body.theme-apple .badge.bg-secondary.locked-badge {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg-2);
    border: 1px solid var(--ios-separator);
    box-shadow: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* Same accent stripe on the left of completed round headers, but in
   iOS green instead of the legacy teal. */
body.theme-apple .accordion-button.completed-round {
    border-left: 4px solid var(--ios-green);
}

/* Dark-mode soft chips — same Apple language, brighter tint text on
   a low-opacity background. */
html body.theme-apple.theme-dark .accordion-button .badge.bg-success.completed-badge,
html body.theme-apple.theme-dark .badge.bg-success.completed-badge,
html body.theme-apple.theme-dark .badge.completed-badge,
html body.theme-apple.theme-dark .completed-round .badge,
html body.theme-apple.theme-dark .accordion-button.completed-round .badge {
    background: rgba(48, 209, 88, 0.18);
    background-color: rgba(48, 209, 88, 0.18);
    color: #6BE294;
    box-shadow: none;
}
html body.theme-apple.theme-dark .accordion-button .badge.upcoming-badge,
html body.theme-apple.theme-dark .badge.upcoming-badge {
    background: var(--ep-color-warning);
    background-color: var(--ep-color-warning);
    color: #fff;
    box-shadow: none;
}
html body.theme-apple.theme-dark .accordion-button .badge.bg-secondary,
html body.theme-apple.theme-dark .badge.locked-badge {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
}
html body.theme-apple.theme-dark .accordion-button.completed-round {
    border-left: 4px solid #30D158;
}

/* ============================================================
   Dark mode — court badge stroke. The base rule paints a 22%
   BLACK border on the white pill which disappears against dark
   surfaces. Swap for a white-ish border in dark mode.
   ============================================================ */
html body.theme-apple.theme-dark .court-badge-pill,
html body.theme-apple.theme-dark .badge.court-badge-pill {
    background: transparent;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.42);
}

/* ============================================================
   DARK MODE — leaderboard sticky cells. The base rule sets
   `background: var(--ios-surface)` which IS #1C1C1E in dark,
   but Bootstrap's `.table` cascade and tr striping can leak
   `--bs-table-bg: transparent` through. Pin them explicitly.
   ============================================================ */
html body.theme-apple.theme-dark .leaderboard-table thead th:first-child,
html body.theme-apple.theme-dark .leaderboard-table tbody td:first-child,
html body.theme-apple.theme-dark .leaderboard-table thead th:nth-child(2),
html body.theme-apple.theme-dark .leaderboard-table tbody td:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table thead th:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table tbody td:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table thead th:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table tbody td:nth-child(2),
html body.theme-apple.theme-dark #leaderboardTable thead th:first-child,
html body.theme-apple.theme-dark #leaderboardTable tbody td:first-child,
html body.theme-apple.theme-dark #leaderboardTable thead th:nth-child(2),
html body.theme-apple.theme-dark #leaderboardTable tbody td:nth-child(2) {
    background: #1C1C1E;
    background-color: #1C1C1E;
    background-image: none;
    --bs-table-bg: #1C1C1E;
    --bs-table-accent-bg: transparent;
}
/* Hover state in dark — slightly lighter solid */
html body.theme-apple.theme-dark .leaderboard-table tbody tr:hover td:first-child,
html body.theme-apple.theme-dark .leaderboard-table tbody tr:hover td:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:hover td:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:hover td:nth-child(2),
html body.theme-apple.theme-dark #leaderboardTable tbody tr:hover td:first-child,
html body.theme-apple.theme-dark #leaderboardTable tbody tr:hover td:nth-child(2) {
    background: #2C2C2E;
    background-color: #2C2C2E;
}
/* Right-edge shadow for the second sticky column in dark — bigger, opaque */
html body.theme-apple.theme-dark .competition-leaderboard-table thead th:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table tbody td:nth-child(2),
html body.theme-apple.theme-dark .leaderboard-table thead th:nth-child(2),
html body.theme-apple.theme-dark .leaderboard-table tbody td:nth-child(2) {
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   DARK MODE — leaderboard "own row" sticky cells. Earlier I
   used rgba(10, 132, 255, 0.22) for the self-row tint. With
   alpha 0.22 the scrollable stats bleed straight through.
   Replace with an opaque pre-blended dark-blue hex.
   ============================================================ */
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self) td:nth-child(2),
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self):hover td:first-child,
html body.theme-apple.theme-dark .competition-leaderboard-table tbody tr:has(.lb-player-self):hover td:nth-child(2) {
    background: #0E2548;
    background-color: #0E2548;
    background-image: none;
    --bs-table-bg: #0E2548;
    --bs-table-accent-bg: transparent;
    color: var(--ios-fg);
}

/* ============================================================
   DARK MODE — three readability fixes
   ============================================================ */

/* 1. Readonly Settings card on competition Edit page. The inline ul
   style hardcodes `color: #1C1C1E` (dark text) which becomes invisible
   on the dark card bg in dark mode. */
html body.theme-apple.theme-dark .readonly-settings,
html body.theme-apple.theme-dark .readonly-settings ul,
html body.theme-apple.theme-dark .readonly-settings ul[style],
html body.theme-apple.theme-dark .readonly-settings ul li,
html body.theme-apple.theme-dark .readonly-settings ul li strong {
    color: var(--ios-fg);
}
html body.theme-apple.theme-dark .readonly-settings {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html body.theme-apple.theme-dark .readonly-settings-label {
    color: rgba(255, 255, 255, 0.55);
}

/* 2. Chat input wrapper — remove the solid bg behind the rounded input
   pill and the camera + mic icons. The input itself keeps its rounded
   surface; the wrapper/icon-row sits transparently on the chat footer. */
html body.theme-apple.theme-dark .chat-input-field {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
html body.theme-apple.theme-dark .chat-input-actions,
html body.theme-apple.theme-dark .chat-input-iconbtn {
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
}
html body.theme-apple.theme-dark .chat-input-iconbtn svg {
    color: rgba(255, 255, 255, 0.62);
    stroke: rgba(255, 255, 255, 0.62);
}
html body.theme-apple.theme-dark .chat-input-iconbtn:hover svg,
html body.theme-apple.theme-dark .chat-input-iconbtn:active svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

/* 3. Join Competition modal — the join button (.btn-gradient-peach)
   uses a beige/cream gradient that vanishes against the dark modal bg.
   Repaint it as a solid iOS blue CTA in dark mode. */
html body.theme-apple.theme-dark #joinCompetitionModal .btn-gradient-peach,
html body.theme-apple.theme-dark #joinCompetitionModal .btn.btn-gradient-peach {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.30);
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 18px;
}
html body.theme-apple.theme-dark #joinCompetitionModal .btn-gradient-peach:hover,
html body.theme-apple.theme-dark #joinCompetitionModal .btn-gradient-peach:active {
    background: #0A84FF;
    background-color: #0A84FF;
    color: #FFFFFF;
}
/* Also pin the invite code input + label colors so the form is readable */
html body.theme-apple.theme-dark #joinCompetitionModal label,
html body.theme-apple.theme-dark #joinCompetitionModal .form-label {
    color: var(--ios-fg);
}
html body.theme-apple.theme-dark #joinCompetitionModal .form-control {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ============================================================
   DARK MODE — chat input form. The earlier rule painted
   `.chat-input-form` with --ios-bg-2 (#1C1C1E), which next to
   the #000 chat-input footer reads as a visible darker-grey
   rectangle around the rounded input pill. Pin it transparent
   so only the rounded input remains visible.
   ============================================================ */
html body.theme-apple.theme-dark .chat-input-form,
html body.theme-apple.theme-dark form.chat-input-form,
html body.theme-apple.theme-dark form#match-message-form,
html body.theme-apple.theme-dark .chat-input .chat-input-form {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-top: none;
    box-shadow: none;
}

/* ============================================================
   DARK MODE — Match Details (#rescheduleMatchModal) buttons.
   The modal uses legacy `.btn-gradient-teal` + `.btn-gradient-peach`
   classes that render as dark teal / peach gradients which vanish
   on the dark modal surface. Repaint them as iOS pill buttons.
   ============================================================ */
/* Primary CTA → solid iOS blue */
html body.theme-apple.theme-dark #rescheduleMatchModal .btn-gradient-peach,
html body.theme-apple.theme-dark #rescheduleMatchModal .btn.btn-gradient-peach,
html body.theme-apple.theme-dark #rescheduleMatchModal button[type="submit"] {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    background-image: none;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.30);
    font-weight: 700;
    border-radius: 12px;
    padding: 10px 18px;
}

/* Secondary actions (Cancel, View Venues, Add Venue) → ghost pill */
html body.theme-apple.theme-dark #rescheduleMatchModal .btn-gradient-teal,
html body.theme-apple.theme-dark #rescheduleMatchModal .btn.btn-gradient-teal {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--ios-tint);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 16px;
}
html body.theme-apple.theme-dark #rescheduleMatchModal .btn-gradient-teal:hover,
html body.theme-apple.theme-dark #rescheduleMatchModal .btn-gradient-teal:active {
    background: rgba(10, 132, 255, 0.12);
    background-color: rgba(10, 132, 255, 0.12);
    color: var(--ios-tint);
}

/* Form fields in this modal — make sure labels + inputs are legible */
html body.theme-apple.theme-dark #rescheduleMatchModal .form-label,
html body.theme-apple.theme-dark #rescheduleMatchModal label {
    color: var(--ios-fg);
}
html body.theme-apple.theme-dark #rescheduleMatchModal .form-control,
html body.theme-apple.theme-dark #rescheduleMatchModal .form-select,
html body.theme-apple.theme-dark #rescheduleMatchModal input,
html body.theme-apple.theme-dark #rescheduleMatchModal select {
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
html body.theme-apple.theme-dark #rescheduleMatchModal h5 {
    color: var(--ios-fg);
}