/* ============================================================
   Competition grid — guarantee 2 columns on iPhone always
   Beats Bootstrap's row-cols-* defaults.
   ============================================================ */
body.theme-apple #competitions-row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
    margin-left: 0;
    margin-right: 0;
    /* Critical: kill `gap` from earlier block — it conflicts with 50% cols */
    gap: 0;
}

body.theme-apple #competitions-row > [class*="col"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 5px;
    margin-top: 0;
}

@media (min-width: 768px) {
    body.theme-apple #competitions-row > [class*="col"] {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (min-width: 992px) {
    body.theme-apple #competitions-row > [class*="col"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* ============================================================
   GENERIC COMPONENTS — make them feel iOS too
   ============================================================ */

/* Buttons — iOS native pills/solids */
body.theme-apple .btn.btn-primary,
body.theme-apple a.btn.btn-primary,
body.theme-apple button.btn.btn-primary {
    background: var(--ios-fg);
    background-color: var(--ios-fg);
    background-image: none;
    border: none;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 14px;
    padding: 12px 22px;
    box-shadow: none;
}
body.theme-apple .btn.btn-primary:active { transform: scale(0.98); opacity: 0.85; }

body.theme-apple .btn-secondary {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    font-weight: 600;
    border-radius: 14px;
}

body.theme-apple .btn-danger {
    background: var(--ios-red);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 14px;
}

body.theme-apple .btn-success {
    background: var(--ios-green);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 14px;
}

/* btn-gradient-* — flatten to iOS. Beats gradient-button-override.css
   per-modal selectors like `#joinCompetitionModal .btn-gradient-peach` (1,1,0).
   `:is(#a, #b)` takes the highest-specificity argument, so prefix with
   :is(modal-ids) to reach (1,2,1) and outspecify. */
body.theme-apple .btn-gradient-peach,
body.theme-apple .btn-gradient-teal,
body.theme-apple .btn.btn-gradient-peach,
body.theme-apple button[type="submit"].btn-gradient-peach,
body.theme-apple :is(
    #joinCompetitionModal, #sortModal, #addFolderModal, #renameFolderModal,
    #recordScoreModal, #invitePlayerModal, #manageAttendanceModal,
    #replacePlayerModal, #removePlayerModal, #deleteCompetitionModal,
    #qrJoinModal, #rulesModal, #competitionRulesModal,
    #matchAssignmentModal, #rescheduleMatchModal, #matchDetailsModal,
    #copyCompetitionModal, #moveToFolderModal, #scoreModal,
    #createCompetitionModal, #editCompetitionModal, #shareModal
) .btn-gradient-peach,
body.theme-apple :is(
    #joinCompetitionModal, #sortModal, #addFolderModal, #renameFolderModal,
    #recordScoreModal, #invitePlayerModal, #manageAttendanceModal,
    #replacePlayerModal, #removePlayerModal, #deleteCompetitionModal,
    #qrJoinModal, #rulesModal, #competitionRulesModal,
    #matchAssignmentModal, #rescheduleMatchModal, #matchDetailsModal,
    #copyCompetitionModal, #moveToFolderModal, #scoreModal,
    #createCompetitionModal, #editCompetitionModal, #shareModal
) .btn-gradient-teal {
    background: var(--ios-fg);
    background-color: var(--ios-fg);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
    min-height: 50px;
    padding: 12px 22px;
    font-size: 17px;
    letter-spacing: -0.01em;
}
body.theme-apple .btn-gradient-peach:active,
body.theme-apple .btn-gradient-teal:active {
    transform: scale(0.98);
    opacity: 0.85;
}

/* Legacy btn-primary-custom (existing inline in templates) → flatten */
body.theme-apple .btn-primary-custom,
body.theme-apple a.btn-primary-custom,
body.theme-apple button.btn-primary-custom,
body.theme-apple #competitions-header .btn-primary-custom,
body.theme-apple .right-section .btn-primary-custom,
body.theme-apple #competitions-header a.btn-primary-custom,
body.theme-apple .right-section a.btn-primary-custom {
    background: var(--ios-fg);
    background-color: var(--ios-fg);
    background-image: none;
    border: none;
    color: #FFFFFF;
    text-shadow: none;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: none;
    letter-spacing: -0.01em;
}

/* Tabs — iOS Segmented Control look */
body.theme-apple .nav-tabs,
body.theme-apple .nav-pills,
body.theme-apple .nav.nav-fill,
body.theme-apple .nav.compact-nav-pills,
body.theme-apple #nav-tab {
    background: var(--ios-fg-4);
    border-radius: 9px;
    padding: 2px;
    border: none;
    gap: 0;
}
body.theme-apple .nav-tabs .nav-link,
body.theme-apple .nav-pills .nav-link,
body.theme-apple .nav.nav-fill .nav-link,
body.theme-apple .nav.compact-nav-pills .nav-link,
body.theme-apple #nav-tab .nav-link {
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--ios-fg);
    font-weight: 500;
    font-size: 13px;
    padding: 6px 12px;
}
body.theme-apple .nav-tabs .nav-link.active,
body.theme-apple .nav-pills .nav-link.active,
body.theme-apple .nav.nav-fill .nav-link.active,
body.theme-apple .nav.compact-nav-pills .nav-link.active,
body.theme-apple #nav-tab .nav-link.active,
body.theme-apple .nav-link.active {
    background: var(--ios-surface);
    color: var(--ios-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    font-weight: 600;
}

/* Headings inside content — iOS hierarchy */
body.theme-apple #competitions-content h1,
body.theme-apple #competitions-content h2,
body.theme-apple .container h1,
body.theme-apple .container h2 {
    color: var(--ios-fg);
}
body.theme-apple #competitions-content p,
body.theme-apple .container p {
    color: var(--ios-fg-2);
}

/* Forms — iOS field style */
body.theme-apple .form-control,
body.theme-apple .form-select,
body.theme-apple input[type="text"],
body.theme-apple input[type="email"],
body.theme-apple input[type="password"],
body.theme-apple input[type="number"],
body.theme-apple input[type="search"],
body.theme-apple textarea {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    color: var(--ios-fg);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 17px;
}
body.theme-apple .form-control:focus,
body.theme-apple .form-select:focus,
body.theme-apple input:focus,
body.theme-apple textarea:focus {
    border-color: var(--ios-tint);
    box-shadow: 0 0 0 3px var(--ios-tint-soft);
}
body.theme-apple .form-label,
body.theme-apple label {
    color: var(--ios-fg);
    font-weight: 600;
}

/* Dropdowns — iOS context menu vibe */
body.theme-apple .dropdown-menu {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    padding: 6px;
}
body.theme-apple .dropdown-item {
    color: var(--ios-fg);
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 12px;
}
body.theme-apple .dropdown-item:hover {
    background: var(--ios-fg-4);
}

/* Modals — premium iOS sheet (same look as demo modal). Beats inline modal-content backgrounds. */
body.theme-apple .modal-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
    color: var(--ios-fg);
}

/* Header / body / footer inside modals — let the white modal-content show through */
body.theme-apple .modal-content > .modal-header,
body.theme-apple .modal-content > .modal-body,
body.theme-apple .modal-content > .modal-footer,
body.theme-apple .modal-content > div.modal-header,
body.theme-apple .modal-content > div.modal-body,
body.theme-apple #sortModal .modal-header,
body.theme-apple #sortModal .modal-body,
body.theme-apple #joinCompetitionModal .modal-header,
body.theme-apple #joinCompetitionModal .modal-body,
body.theme-apple #addFolderModal .modal-header,
body.theme-apple #addFolderModal .modal-body,
body.theme-apple #demoModeInfoModal .modal-header,
body.theme-apple #demoModeInfoModal .modal-body {
    background: transparent;
    background-color: transparent;
    background-image: none;
    color: var(--ios-fg);
}
body.theme-apple .modal-header,
body.theme-apple .modal-footer {
    border-color: var(--ios-separator-soft);
}

/* Modal title — covers both .modal-title class AND bare <h5> inside modals */
body.theme-apple .modal-title,
body.theme-apple .modal-content h5,
body.theme-apple .modal-content h4,
body.theme-apple .modal-content h3,
body.theme-apple .modal-header h5,
body.theme-apple #joinCompetitionModal h5,
body.theme-apple #sortModal h5,
body.theme-apple #addFolderModal h5 {
    color: var(--ios-fg);
    font-weight: 700;
    margin: 0;
}

/* All text inside modals — dark by default (override stale white inline color) */
body.theme-apple .modal-content,
body.theme-apple .modal-content span,
body.theme-apple .modal-content p,
body.theme-apple .modal-content label,
body.theme-apple .modal-content button:not(.btn):not(.btn-close):not(.ios-cta-primary):not(.ios-cta-secondary):not(.ep-cancel):not(.btn-gradient-peach):not(.btn-gradient-teal):not(.btn-primary):not(.btn-primary-custom) {
    color: var(--ios-fg);
}

body.theme-apple .modal-backdrop.show { opacity: 0.32; }
body.theme-apple .modal-content::before {
    background: var(--ios-fg-3);
}

/* btn-close (X icon) on white modal — make sure it's dark not white */
body.theme-apple .modal-content .btn-close,
body.theme-apple .btn-close.btn-close-white,
body.theme-apple .modal-content .btn-close-white {
    filter: none;
    opacity: 0.6;
    color: var(--ios-fg);
}

/* Inline competition-name-feedback (success/info chip in join modal) */
body.theme-apple #competition-name-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--ios-tint-soft);
    background-color: var(--ios-tint-soft);
    color: var(--ios-tint);
    font-size: 13px;
    font-weight: 500;
}

/* ── Sort modal — same premium iOS sheet for both the competitions
   list sort modal AND the Berichten sort modal. ────── */
body.theme-apple #sortModal .modal-content,
body.theme-apple #chatsSortModal .modal-content {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border-radius: 14px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
}
body.theme-apple #sortModal .modal-body,
body.theme-apple #chatsSortModal .modal-body {
    padding: 6px 8px;
}

/* Each option row — iOS list row */
body.theme-apple .sort-option {
    color: var(--ios-fg);
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    padding: 14px 12px;
    margin: 0;
    transition: background 140ms ease;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    min-height: 48px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
body.theme-apple .sort-option + .sort-option {
    border-top: 0.5px solid var(--ios-separator);
    border-radius: 0;
}
body.theme-apple .sort-option:hover,
body.theme-apple .sort-option:focus {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
}
body.theme-apple .sort-option:active {
    background: var(--ios-fg-3);
}

/* Arrow / check indicators — system blue */
body.theme-apple #sortModal .sort-option svg,
body.theme-apple #sortModal .sort-option i,
body.theme-apple #sortModal .sort-arrow-up,
body.theme-apple #sortModal .sort-arrow-down,
body.theme-apple #sortModal .sort-check {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 18px;
    height: 18px;
    opacity: 1;
}

/* Add Folder button — iOS tint with separator above */
body.theme-apple #add-folder-btn {
    color: var(--ios-tint);
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 14px 12px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: left;
    min-height: 48px;
    width: 100%;
    border-top: 0.5px solid var(--ios-separator);
    margin-top: 6px;
}
body.theme-apple #add-folder-btn svg,
body.theme-apple #add-folder-btn i {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 18px;
    height: 18px;
    margin-right: 8px;
}
body.theme-apple #add-folder-btn:hover,
body.theme-apple #add-folder-btn:focus,
body.theme-apple #add-folder-btn:active {
    background: var(--ios-tint-soft);
}

/* Stronger backdrop dim so modal pops more */
body.theme-apple .modal-backdrop.show {
    opacity: 0.42;
}

/* Input placeholder color on iOS theme */
body.theme-apple .form-control::placeholder,
body.theme-apple input::placeholder,
body.theme-apple textarea::placeholder {
    color: var(--ios-fg-3);
    opacity: 1;
}

/* Spinners — iOS-grey */
body.theme-apple .spinner-border,
body.theme-apple .spinner-border-sm {
    color: var(--ios-fg-2);
    border-right-color: transparent;
}

/* Misc utilities */
body.theme-apple .text-white,
body.theme-apple .text-light { color: var(--ios-fg); }
body.theme-apple .text-muted,
body.theme-apple .text-secondary { color: var(--ios-fg-2); }
body.theme-apple hr { border-color: var(--ios-separator-soft); opacity: 1; }

/* Page-load fade-in (subtle iOS NavStack feel) */
body.theme-apple #competitions-content,
body.theme-apple .apl-home {
    animation: iosFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes iosFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-apple * { transition: none; animation: none; }
}

/* ============================================================
   APP-WIDE COMPONENT COVERAGE (settings / profile / matches /
   chat / tables / forms) — applied globally because theme-apple
   is now the default body class. Pages can opt out by setting
   body_class block themselves.
   ============================================================ */

/* ── Page header (competition-header.card pattern) — TRANSPARENT iOS Large
   Title style. No card chrome. Title floats on page background like Apple
   Settings / Mail / Music apps. ── */
body.theme-apple .competition-header.card,
body.theme-apple .competition-header,
body.theme-apple div.competition-header,
body.theme-apple .competition-header.card:not(.folder-card-inner):not(.join-container-header):not(.create-competition-card),
body.theme-apple .competition-header.card {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ios-fg);
    padding: 0;
    margin-bottom: 12px;
}
body.theme-apple .competition-header.card .card-body,
body.theme-apple .competition-header .card-body {
    background: transparent;
    color: var(--ios-fg);
}
body.theme-apple .competition-header h1,
body.theme-apple .competition-header h2,
body.theme-apple .competition-header h3,
body.theme-apple .competition-header .competition-title {
    color: var(--ios-fg);
    font-weight: 700;
    letter-spacing: -0.018em;
}

/* Back button (circular icon button used across pages) */
body.theme-apple a[title*="Back" i],
body.theme-apple a[title*="Terug" i] {
    background: var(--ios-fg-4);
    background-color: var(--ios-fg-4);
    border: none;
    color: var(--ios-fg);
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.theme-apple a[title*="Back" i] svg,
body.theme-apple a[title*="Terug" i] svg,
body.theme-apple a[title*="Back" i] i,
body.theme-apple a[title*="Terug" i] i {
    color: var(--ios-fg);
    stroke: var(--ios-fg);
    width: 18px;
    height: 18px;
}

/* iOS card wrap helper (replaces old dark "settings-content-wrapper" inline) */
body.theme-apple .ios-card-pad,
body.theme-apple .settings-content-wrapper {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px;
    padding: 16px;
    margin: 0 2px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    color: var(--ios-fg);
}

/* Generic .container in non-special pages — push content slightly */
body.theme-apple main > .container,
body.theme-apple body > .container {
    padding-top: 16px;
}

/* ── iOS-style toggle switch (.form-check.form-switch) ────── */
body.theme-apple .form-check.form-switch .form-check-input {
    width: 51px;
    height: 31px;
    margin-top: 0;
    background-color: var(--ios-fg-3);
    border-color: var(--ios-fg-3);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
    transition: background-color 200ms ease, border-color 200ms ease;
    box-shadow: none;
    cursor: pointer;
}
body.theme-apple .form-check.form-switch .form-check-input:checked {
    background-color: var(--ios-green);
    border-color: var(--ios-green);
}
body.theme-apple .form-check.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.15);
}
body.theme-apple .form-check.form-switch .form-check-label {
    color: var(--ios-fg);
    font-weight: 500;
    padding-left: 8px;
    cursor: pointer;
}
body.theme-apple .form-check.form-switch .form-text,
body.theme-apple .form-check.form-switch + .form-text {
    color: var(--ios-fg-2);
    font-size: 13px;
}

/* ── Profile pages ───────────────────────────────────────── */
body.theme-apple .profile-container,
body.theme-apple .profile-card,
body.theme-apple .profile-hero-section {
    background: transparent;
    color: var(--ios-fg);
}

body.theme-apple .profile-hero-section {
    padding: 12px 8px 16px;
    position: relative;
}

body.theme-apple .profile-username {
    color: var(--ios-fg);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.06;
    margin-top: 8px;
    margin-bottom: 2px;
    text-align: center;
}
body.theme-apple .profile-full-name {
    color: var(--ios-fg-2);
    font-size: 15px;
    text-align: center;
    margin-bottom: 12px;
}
body.theme-apple .profile-photo-enhanced,
body.theme-apple .profile-photo-placeholder-enhanced {
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border: 4px solid var(--ios-surface);
}
body.theme-apple .profile-photo-placeholder-enhanced {
    background: var(--ios-fg-4);
    color: var(--ios-fg);
}
body.theme-apple .medals-showcase {
    background: var(--ios-surface);
    border-radius: 14px;
    padding: 12px;
    margin: 8px auto 12px;
    text-align: center;
    border: 0.5px solid var(--ios-separator-soft);
    display: inline-block;
}
body.theme-apple .medal-icon {
    font-size: 24px;
    margin: 0 2px;
}
body.theme-apple .profile-stat-card,
body.theme-apple .profile-stat,
body.theme-apple .profile-info-card,
body.theme-apple .stat-box {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
    color: var(--ios-fg);
}
body.theme-apple .profile-stat-label,
body.theme-apple .stat-label {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.theme-apple .profile-stat-value,
body.theme-apple .stat-number {
    color: var(--ios-fg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Match cards / match items ───────────────────────────── */
body.theme-apple .match-card,
body.theme-apple .match-item,
body.theme-apple .player-card,
body.theme-apple .upcoming-match-card,
body.theme-apple .completed-match-card,
body.theme-apple #upcoming-matches-container .card,
body.theme-apple #completed-matches-container .card {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    background-image: none;
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 16px;
    /* Flat: the hairline border does the separating. The drop shadow read
   as a glow around the rounded corners on a light background. */
    box-shadow: none;
    color: var(--ios-fg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.theme-apple .match-card *,
body.theme-apple .match-item *,
body.theme-apple .player-card * {
    color: inherit;
}
body.theme-apple .match-card .text-muted,
body.theme-apple .match-item .text-muted {
    color: var(--ios-fg-2);
}
body.theme-apple .match-card .vs,
body.theme-apple .match-item .vs,
body.theme-apple .vs {
    color: var(--ios-fg-2);
    font-weight: 700;
}

/* ── Tables (leaderboard, tournament, matches list) ──────── */
body.theme-apple .table,
body.theme-apple .leaderboard-table,
body.theme-apple .redesigned-leaderboard table,
body.theme-apple table {
    color: var(--ios-fg);
    background: var(--ios-surface);
    /* Rounded corners live on the .redesigned-leaderboard WRAPPER, not
       the table itself — overflow:hidden on the table kills
       position:sticky on its cells (iOS Safari clips sticky offspring
       inside an overflow:hidden ancestor), which is why the first two
       columns stopped sticking. */
    border-radius: 0;
    overflow: visible;
    border-collapse: separate;
    border-spacing: 0;
}
body.theme-apple .redesigned-leaderboard {
    border-radius: 12px;
    overflow-x: auto;
    /* hidden, not visible. CSS forbids mixing visible with a non-visible
       axis, so `overflow-y: visible` silently computed to `auto` and made
       this a vertical scroll container as well. Chrome then claims a
       vertical swipe for this element instead of passing it to the page --
       even with nothing to scroll, since sub-pixel rounding leaves a stray
       pixel of scrollable height. On a long leaderboard that reads as
       "scrolling barely works", which is what an Android tester reported;
       Safari chains to the page more readily, so iOS never showed it.
       hidden keeps this a horizontal scroller only. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--ios-surface);
}
body.theme-apple .table thead th,
body.theme-apple .leaderboard-table thead th,
body.theme-apple .redesigned-leaderboard thead th,
body.theme-apple table thead th {
    background: var(--ios-bg);
    color: var(--ios-fg-2);
    border-bottom: 0.5px solid var(--ios-separator);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 8px;
}
body.theme-apple .table tbody tr,
body.theme-apple .leaderboard-table tbody tr,
body.theme-apple .redesigned-leaderboard tbody tr {
    background: var(--ios-surface);
}
body.theme-apple .table tbody td,
body.theme-apple .leaderboard-table tbody td,
body.theme-apple .redesigned-leaderboard tbody td,
body.theme-apple table tbody td {
    color: var(--ios-fg);
    border-bottom: 0.5px solid var(--ios-separator-soft);
    padding: 10px 8px;
    background: transparent;
}
body.theme-apple .table tbody tr:last-child td,
body.theme-apple .leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}
body.theme-apple .table a,
body.theme-apple .leaderboard-table a {
    color: var(--ios-fg);
    font-weight: 600;
}

/* ── Chat (chat-container, chat-fullscreen, chat-input) ──── */
body.theme-apple .chat-container,
body.theme-apple .chat-fullscreen,
body.theme-apple .chat-page,
body.theme-apple .chat-body,
body.theme-apple .chat-messages {
    background: var(--ios-bg);
    color: var(--ios-fg);
}
body.theme-apple .chat-header {
    background: rgba(242, 242, 247, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 0.5px solid var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple .chat-title,
body.theme-apple .chat-header-info,
body.theme-apple .chat-players-line {
    color: var(--ios-fg);
}
body.theme-apple .chat-input {
    background: var(--ios-surface);
    border-top: 0.5px solid var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple .chat-input-group {
    background: var(--ios-surface);
}
body.theme-apple .chat-input input,
body.theme-apple .chat-input textarea,
body.theme-apple .chat-input-form input {
    background: var(--ios-bg);
    border: 0.5px solid var(--ios-separator);
    border-radius: 18px;
    color: var(--ios-fg);
    padding: 10px 14px;
}
body.theme-apple .chat-send-btn {
    background: var(--ios-tint);
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Chat list rows (all_chats / chat-link-item) */
body.theme-apple .chat-link,
body.theme-apple .chat-link-item {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
    padding: 12px 14px;
    margin-bottom: 8px;
}
body.theme-apple .chat-link:hover,
body.theme-apple .chat-link-item:hover {
    background: var(--ios-surface-hover);
}
body.theme-apple .chat-avatar {
    box-shadow: 0 0 0 2px var(--ios-bg);
}

/* ── Venues list ─────────────────────────────────────────── */
body.theme-apple .venue-card,
body.theme-apple .venue-list-item {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 14px;
    color: var(--ios-fg);
}

/* ── FAQ + Terms + Privacy (long-form text pages) ────────── */
body.theme-apple .accordion-item {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
body.theme-apple .accordion-button {
    background: var(--ios-surface);
    color: var(--ios-fg);
    font-weight: 600;
    border-radius: 12px;
    box-shadow: none;
}
body.theme-apple .accordion-button:not(.collapsed) {
    background: var(--ios-tint-soft);
    color: var(--ios-tint);
}
body.theme-apple .accordion-body {
    background: var(--ios-surface);
    color: var(--ios-fg);
}

/* Plain text pages (terms / privacy) — soften */
body.theme-apple article,
body.theme-apple .legal-content,
body.theme-apple .terms-content,
body.theme-apple .privacy-content {
    background: var(--ios-surface);
    border-radius: 14px;
    padding: 20px;
    color: var(--ios-fg);
}

/* ── Auth pages (login / register / forgot password) ─────── */
body.theme-apple .auth-card,
body.theme-apple .login-card,
body.theme-apple .register-card,
body.theme-apple form.auth-form {
    background: var(--ios-surface);
    border: 0.5px solid var(--ios-separator-soft);
    border-radius: 18px;
    padding: 24px;
    color: var(--ios-fg);
}

/* ── Spectator / role tags inside cards ─────────────────── */
body.theme-apple .spectator-card-badge,
body.theme-apple .role-tag {
    background: rgba(0, 122, 255, 0.12);
    color: var(--ios-tint);
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
}

/* ── Pull-to-refresh indicator on iOS ────────────────────── */
body.theme-apple .pull-to-refresh,
body.theme-apple .pull-indicator {
    color: var(--ios-fg-2);
}

/* ── Dropdown more-vertical menu in cards ─────────────────── */
body.theme-apple .btn-link.dropdown-toggle {
    color: var(--ios-fg-2);
}
body.theme-apple .btn-link.dropdown-toggle:hover {
    color: var(--ios-fg);
}
body.theme-apple .btn-link.dropdown-toggle::after {
    display: none;
}

/* ── Specific dark backgrounds left in templates — neutralize ── */
body.theme-apple [style*="background: #0a0e17"],
body.theme-apple [style*="background: #1D2332"],
body.theme-apple [style*="background: #111827"],
body.theme-apple [style*="background: rgba(17, 24, 39"],
body.theme-apple [style*="background: rgba(10, 10, 10"] {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    color: var(--ios-fg);
}

/* Color fallback override — any text using #adb5bd grey on dark theme becomes iOS-2 grey */
body.theme-apple [style*="color: #adb5bd"],
body.theme-apple [style*="color: #6c757d"],
body.theme-apple [style*="color: #64748b"] {
    color: var(--ios-fg-2);
}

/* Buttons with custom radius 50px → iOS 14px */
body.theme-apple .btn[style*="border-radius: 50px"] {
    border-radius: 14px;
}

/* Inline `style="border-radius: 0.5rem"` etc — keep but normalize subtly */
body.theme-apple [style*="border-radius: 0.75rem"] {
    /* allow original radius for non-card uses */
}

/* ── Date inputs / time pickers ─────────────────────────── */
body.theme-apple input[type="date"],
body.theme-apple input[type="time"],
body.theme-apple input[type="datetime-local"] {
    background: var(--ios-surface);
    border: 1px solid var(--ios-separator-soft);
    color: var(--ios-fg);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 17px;
}

/* ── Section headers (smaller h5 etc inside settings) ────── */
body.theme-apple .settings-content-wrapper h5,
body.theme-apple .ios-card-pad h5,
body.theme-apple form .mb-4 > div > h5 {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Hide the inline "color: white" on bell etc. won't be needed ── */
body.theme-apple #mobile-notification-bell svg,
body.theme-apple #mobile-bell-spinner {
    color: var(--ios-fg);
}

/* ── Empty-state messages (.col-12 placeholders) ───────────── */
body.theme-apple .col-12 .text-center.text-muted,
body.theme-apple #competitions-row .col-12 {
    color: var(--ios-fg-2);
    padding: 24px 16px;
    text-align: center;
}

/* ── Generic safety net for body main content text ──────── */
body.theme-apple main,
body.theme-apple .container,
body.theme-apple .container-fluid {
    color: var(--ios-fg);
}

/* ── Nuclear: every .card-body should be transparent so parent card shows ── */
body.theme-apple .card-body,
body.theme-apple .card .card-body,
body.theme-apple div.card-body,
body.theme-apple .card-body {
    background: transparent;
    background-color: transparent;
    color: var(--ios-fg);
}

/* ── Nuclear: any remaining dark gradient/solid bg containers — flatten ── */
body.theme-apple [style*="rgb(10, 14, 23)"],
body.theme-apple [style*="rgb(17, 24, 39)"],
body.theme-apple [style*="#0a0e17"] {
    background: transparent;
    color: var(--ios-fg);
}

/* ── Stronger button overrides for profile/edit & other forms ── */
body.theme-apple button.btn.btn-primary,
body.theme-apple .btn.btn-primary.w-100,
body.theme-apple form button.btn.btn-primary,
body.theme-apple button.btn-primary {
    background: var(--ios-fg);
    background-color: var(--ios-fg);
    background-image: none;
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    min-height: 50px;
    font-weight: 600;
    box-shadow: none;
}

body.theme-apple .btn.btn-warning,
body.theme-apple button.btn.btn-warning,
body.theme-apple .btn.btn-warning.w-100 {
    background: var(--ios-orange);
    background-color: var(--ios-orange);
    background-image: none;
    border: none;
    color: #FFFFFF;
    border-radius: 14px;
    min-height: 50px;
    font-weight: 600;
    box-shadow: none;
}

body.theme-apple .btn-outline-danger,
body.theme-apple button.btn-outline-danger,
body.theme-apple .btn.btn-outline-danger,
body.theme-apple .btn.btn-sm.btn-outline-danger,
body.theme-apple button.btn.btn-outline-danger.mt-2,
body.theme-apple .btn-outline-danger {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: 1px solid var(--ios-red);
    color: var(--ios-red);
    border-radius: 12px;
    font-weight: 600;
    box-shadow: none;
}
body.theme-apple .btn-outline-danger:hover,
body.theme-apple .btn-outline-danger:active {
    background: rgba(255, 59, 48, 0.12);
    background-color: rgba(255, 59, 48, 0.12);
}

body.theme-apple .btn-outline-secondary,
body.theme-apple button.btn-outline-secondary {
    background: transparent;
    background-color: transparent;
    border: 1px solid var(--ios-separator);
    color: var(--ios-fg);
    border-radius: 12px;
    box-shadow: none;
}

/* Input groups (emoji picker, currency, etc) */
body.theme-apple .input-group {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 0.5px solid var(--ios-separator);
    border-radius: 12px;
    overflow: hidden;
}
body.theme-apple .input-group .form-control,
body.theme-apple .input-group input,
body.theme-apple .input-group select {
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
body.theme-apple .input-group-text {
    background: var(--ios-bg);
    border: none;
    color: var(--ios-fg);
    border-left: 0.5px solid var(--ios-separator);
}

/* ── Custom dropdown toggle "more-vertical" on cards ─────── */
body.theme-apple [data-feather="more-vertical"] {
    color: var(--ios-fg-2);
    stroke: var(--ios-fg-2);
}
body.theme-apple [data-feather="folder"] {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
}