/* ─────────────────────────────────────────────
   2. BASE / RESET
   ───────────────────────────────────────────── */
body { margin: 0; padding: 0; font-family: "Rubik", sans-serif; }
#map { height: 100vh; width: 100%; }
h3   { margin: 5px 0; }

/* ─────────────────────────────────────────────
   11. CLUB DETAIL / POPUP
   ───────────────────────────────────────────── */

/* Activity status badge — absolute overlay on the logo circle */
.status-badge {
    position: absolute; bottom: 2px; right: 2px;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: white;
    overflow: visible;
}
/* SVG icons inside the badge inherit color:white → fills white */
.status-badge svg { color: white; }

/* Skeleton loading pulse used while club details are fetched on demand */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.pop-up-club .club-info-item {
    background-color: #91f8de;
    padding: 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    font-size: 16px !important;
}

.club-detail-container { padding: 16px 8px 8px 8px; }

.popup-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.popup-links a {
    background-color: #1de9b6;
    text-decoration: none;
    border-radius: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.popup-links a:hover,
.popup-links a:focus,
.popup-links a:focus-visible {
    background-color: #16b58e !important;
    outline: none;
    box-shadow: none;
}

.btn.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 24px;
    color: white;
}

.membership-logo-link              { display: block; flex-shrink: 0; text-decoration: none; }
.membership-logo-link img          { transition: border-color 0.2s ease; }
.membership-logo-link:hover img    { border-color: #0a9e78 !important; }

/* Hide scrollbars on horizontal-scroll rows while keeping them functional */
.club-header-badges-row::-webkit-scrollbar,
.membership-logo-scroll::-webkit-scrollbar { display: none; }

/* Grab cursor signals that the row is draggable */
.club-header-badges-row,
.membership-logo-scroll { cursor: grab; }
.club-header-badges-row:active,
.membership-logo-scroll:active { cursor: grabbing; }

.membership-table-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}
.membership-table-row:hover { background: #f0fdf8; }

/* ── Activity action buttons (Report / Confirm) in club detail panel ── */
.activity-btn-confirm {
    color: #007bff;
    border: 1px solid #007bff;
    background: transparent;
    font-size: 13px;
}
.activity-btn-report {
    color: #dc3545;
    border: 1px solid #dc3545;
    background: transparent;
    font-size: 13px;
}
.activity-btn-confirm:hover { background: rgba(0,123,255,0.06); }
.activity-btn-report:hover  { background: rgba(220,53,69,0.06); }
/* My Clubs drawer: confirm button — blue, fully independent of Bootstrap colour classes */
#myClubsContent .my-clubs-confirm-btn {
    color: #0d6efd !important;
    border: 1px solid #0d6efd !important;
    background-color: transparent !important;
}
#myClubsContent .my-clubs-confirm-btn:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
.membership-row-incoming { background: #fffde7; }
.membership-row-outgoing { background: #f3e5f5; }
/* linked and unlinked have no background in light mode */

/* ─────────────────────────────────────────────
   5. LAYOUT: DRAWERS
   ───────────────────────────────────────────── */

/* Mobile: slides up from bottom */
.detailDrawer {
    position: fixed;
    background: white;
    transition: transform 0.3s ease;
    z-index: 6000;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50vh;
    transform: translateY(100%);
    box-shadow: 0 -3px 10px rgba(0,0,0,0.3);
    border-radius: 15px 15px 0 0;
}

.detailDrawer.open              { transform: translateY(0); }
.detailDrawer::-webkit-scrollbar { display: none; }
.detailDrawer p                 { font-size: 14px; }
.detailDrawer h5                { margin: 1rem 0 0.5rem 0; }

#editClubDrawer.detailDrawer { z-index: 6001; }
#filterDrawer.detailDrawer   { z-index: 9999; }
#imprintDrawer.detailDrawer  { z-index: 5999; }

/* Sticky headers: add/edit club drawers use flex so the h3 never scrolls */
#addClubDrawer,
#editClubDrawer {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

#addClubDrawer > h3,
#editClubDrawer > h3 {
    flex-shrink: 0;
}

#addClubDrawer > .container,
#editClubDrawer > .container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#addClubDrawer > .container::-webkit-scrollbar,
#editClubDrawer > .container::-webkit-scrollbar {
    display: none;
}

/* Desktop: slides in from left */
@media (min-width: 769px) {
    .detailDrawer {
        top: 0;
        left: 0;
        width: 450px;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 3px 0 10px rgba(0,0,0,0.2);
        border-radius: 0;
    }

    .detailDrawer.open           { transform: translateX(0); }
    #clubDrawer.detailDrawer     { height: 100vh; }
}

/* ── Membership section search bar ── */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-input-icon {
    position: absolute;
    left: 14px;
    color: #aaa;
    pointer-events: none;
    font-size: 14px;
}

.search-input {
    padding: 8px 38px 8px 38px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-clear-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #aaa;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s;
    display: none;
}
.search-clear-btn:hover { color: #555; }

/* ─────────────────────────────────────────────
   8. FILTER PANEL
   ───────────────────────────────────────────── */
.filter-panel {
    width: 100%;
    display: flex;
    justify-content: center;
}

.filter-panel-inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-right: 12px;
}

.filter-panel label { display: block; margin-top: 6px; }

.filter-label {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    font-size: 16px;
    color: #333;
    gap: 5px;
}

/* Type-filter toggle boxes (Federation / Club / Community) */
.select-box         { cursor: pointer; display: inline-block; }
.select-box input   { display: none; }
.select-box .box {
    width: 90px;
    height: 80px;
    border: 2px solid #91f8de;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #1de9b6;
    font-size: 14px;
    transition: 0.2s;
}
.select-box i { font-size: 20px; color: #1de9b6; }
.select-box input:checked + .box {
    border-color: #1de9b6;
    background: #1de9b6;
    color: #fff;
}
.select-box input:checked + .box i { color: #fff; }

/* Activity status toggle boxes (Verified / Unverified / Inactive?) */
.activity-box       { cursor: pointer; display: inline-block; }
.activity-box input { display: none; }
.activity-box .box {
    width: 90px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    transition: 0.2s;
}
/* Verified — blue */
.activity-box.activity-verified .box   { border: 2px solid rgba(0,123,255,0.30); color: #444; }
.activity-box.activity-verified .box svg { font-size: 20px; color: rgba(0,123,255,0.45); width:20px; height:20px; }
.activity-box.activity-verified input:checked + .box   { border-color: #007bff; background: rgba(0,123,255,0.12); color: #007bff; font-weight: 600; }
.activity-box.activity-verified input:checked + .box svg { color: #007bff; }
/* Unverified — amber */
.activity-box.activity-unverified .box   { border: 2px solid rgba(255,193,7,0.30); color: #444; }
.activity-box.activity-unverified .box svg { font-size: 20px; color: rgba(255,193,7,0.45); width:20px; height:20px; }
.activity-box.activity-unverified input:checked + .box   { border-color: #ffc107; background: rgba(255,193,7,0.12); color: #b38600; font-weight: 600; }
.activity-box.activity-unverified input:checked + .box svg { color: #ffc107; }
/* Inactive — red */
.activity-box.activity-inactive .box   { border: 2px solid rgba(220,53,69,0.30); color: #444; }
.activity-box.activity-inactive .box svg { font-size: 20px; color: rgba(220,53,69,0.45); width:20px; height:20px; }
.activity-box.activity-inactive input:checked + .box   { border-color: #dc3545; background: rgba(220,53,69,0.12); color: #dc3545; font-weight: 600; }
.activity-box.activity-inactive input:checked + .box svg { color: #dc3545; }


/* noUiSlider — members range */
.noUi-tooltip {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 8px;
}
.noUi-tooltip::before { top: -6px; bottom: auto; transform: rotate(180deg); }
.noUi-target  { background-color: #91f8de; }
.noUi-connect { background-color: #1de9b6 !important; }
.noUi-handle  { border: 2px solid #1de9b6; background-color: #ffffff; }

/* ─────────────────────────────────────────────
   1. SELF-HOSTED RUBIK VARIABLE FONT
   Source: Google Fonts (fonts.gstatic.com), v31.
   Only Latin and Latin-ext subsets are bundled to
   keep the total download size minimal.
   ───────────────────────────────────────────── */

/* latin-ext — normal */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/rubik-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin — normal */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/rubik-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext — italic */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/rubik-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin — italic */
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/rubik-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────
   9. FORMS (Add / Edit club)
   ───────────────────────────────────────────── */
.field {
    position: relative;
    margin-bottom: 1rem;
}

.field .form-control {
    padding: 1rem 0.75rem 0.5rem;
    border: 1px solid #9e9e9e;
    border-radius: 0.375rem;
    background: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field .form-control:focus {
    border-color: #1de9b6;
    box-shadow: none !important;
    background: white;
    outline: none !important;
}

/* Floating label */
.field label {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: #6c757d;
    pointer-events: none;
    background: white;
    padding: 0 0.25rem;
    transition: all 0.15s ease;
    line-height: 1.2;
}
.field .form-control:not(:placeholder-shown):not(:focus) ~ label,
.field .form-control:focus ~ label {
    top: 0;
    transform: translateY(-50%) scale(0.85);
    font-size: 0.875rem;
}
.field .form-control:not(:placeholder-shown):not(:focus) ~ label { color: #6c757d; }
.field .form-control:focus ~ label { color: #1de9b6; font-weight: 500; }

/* Textarea */
.field textarea.form-control { padding-top: 1.25rem; resize: vertical; }

.form-control.auto-grow {
    min-height: 3.5rem;
    max-height: 10rem;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.auto-grow::-webkit-scrollbar { display: none; }

/* Select */
.field select.form-control {
    padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
}

/* Address field: label always floated (placeholder text set in HTML drives it up) */
.field:has(.form-control[name="address"]) label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85) !important;
    font-size: 0.875rem;
    color: #6c757d;
}
.field .form-control[name="address"]::placeholder   { color: #2b82cb; opacity: 1; }
.field:has(.form-control[name="address"]) .form-control { padding-top: 1.25rem; }

/* Verify-ID field: read-only appearance */
.field:has(.form-control[name="verify_id"]) label {
    top: 0 !important;
    transform: translateY(-50%) scale(0.85) !important;
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 400 !important;
}
.field:has(.form-control[name="verify_id"]) .form-control {
    padding-top: 1.25rem;
    color: #6c757d;
    border-color: #6c757d !important;
    cursor: default;
}

/* File input: hidden — its <label> acts as the visible trigger */
.logo-input         { display: none; }
.logo-input + label { position: static; }

/* ── Field validation error state ── */
.field.has-error .form-control {
    border-color: #e53935 !important;
}
.field.has-error .form-control:focus ~ label,
.field.has-error .form-control:not(:placeholder-shown):not(:focus) ~ label {
    color: #e53935 !important;
}
.field-error {
    display: none;
    font-size: 0.75rem;
    color: #e53935;
    margin-top: 0.2rem;
    padding-left: 0.75rem;
    font-weight: 500;
}

/* ── SVG icon sprite sizing + animation ─────────────────────────────────────
   Replaces Font Awesome's web-font rendering with the inline SVG sprite.
   Icons inherit their size from the surrounding text (1em × 1em) and their
   colour via fill:currentColor, which defers to the parent's CSS `color`.     */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* aligns baseline with surrounding text */
    fill: currentColor;
    overflow: visible;
}

/* Spinner animation — used by fa-spin class (e.g. loading indicators) */
@keyframes fa-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spin {
    animation: fa-spin 2s linear infinite;
}

/* ─────────────────────────────────────────────
   15. IMPRINT
   ───────────────────────────────────────────── */
.imprint-contact      { display: flex; gap: 12px; margin: 4px 0 12px; }
.imprint-contact-link { font-size: 1.4rem; color: #000; transition: color .2s; text-decoration: none; }
.imprint-contact-link:hover { color: #9e9e9e; }

/* ─────────────────────────────────────────────
   10. ADD / EDIT CLUB: LOGO & VERIFY-ID BUTTON
   ───────────────────────────────────────────── */
.logo-preview-container {
    position: relative;
    width: var(--croppie-size);
    height: var(--croppie-size);
    margin: 1rem auto;
}

.placeholder-icon {
    width: var(--croppie-size);
    height: var(--croppie-size);
    border-radius: 50%;
    border: 3px solid #6c757d;
}

.logo-upload-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(98, 0, 238, 0.3);
    transition: all 0.2s;
    z-index: 100;
}
.logo-upload-btn:hover { background: #0056b3; transform: scale(1.1); }

.logo-cropper {
    margin: 1rem auto;
    width: var(--croppie-size);
    height: var(--croppie-size);
}
.logo-cropper .cr-boundary { border-radius: 5% !important; overflow: hidden; }
.logo-cropper .cr-viewport  { border-radius: 50%; border: 3px solid #e0e0e0; }

/* Merged from two previously separate rule blocks */
.verify-refresh-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1de9b6;
    color: white;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(29, 233, 182, 0.35);
    transition: all 0.2s;
    z-index: 10;
}
.verify-refresh-btn:hover {
    background: #13c2a4;
    transform: translateY(-50%) rotate(180deg) scale(1.05);
}

/* ─────────────────────────────────────────────
   6. MAP ELEMENTS
   ───────────────────────────────────────────── */

.club-logo-map {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #666;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─────────────────────────────────────────────
   7. MODALS
   ───────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: white;
    padding: 20px 25px;
    border-radius: 10px;
    width: 300px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.modal-content h3 { margin-bottom: 15px; text-align: center; }
.modal-content button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.modal-content button:hover { background: #0056b3; }
.modal-content .switch {
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: #007bff;
    cursor: pointer;
}

/* Modal-specific overrides */
#editIdMessage       { color: #28a745; }
#editIdMessage.error { color: #dc3545 !important; }

#shareModal        { z-index: 9999; }
#deleteClubModal   { z-index: 9999; }
#deleteAccountModal { z-index: 9999; }

#deleteClubModal .button-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}
#deleteCancel       { background: #dc3545; }
#deleteCancel:hover { background: #bb2d3b; }

#deleteAccountModal .button-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}
#deleteAccountConfirm       { background: #dc3545; }
#deleteAccountConfirm:hover { background: #bb2d3b; }
#deleteAccountCancel        { background: #6c757d; }
#deleteAccountCancel:hover  { background: #5a6268; }

/* ─────────────────────────────────────────────
   13. NOTIFICATIONS TOGGLE
   ───────────────────────────────────────────── */
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background .2s;
}
.notif-slider:before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform .2s;
}
.notif-toggle input:checked + .notif-slider        { background: #1de9b6; }
.notif-toggle input:checked + .notif-slider:before { transform: translateX(20px); }

/* ─────────────────────────────────────────────
   14. SEARCH DROPDOWN
   ───────────────────────────────────────────── */
#search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index: 1000;
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover      { background: #f0fdf9; }

.search-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.search-result-geo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1de9b7;
    font-size: 16px;
    flex-shrink: 0;
}
.search-result-text    { display: flex; flex-direction: column; min-width: 0; }
.search-result-primary {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-secondary {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-no-clubs   { color: #bbb; font-style: italic; }
.search-result-club-count { color: #1de9b7; font-weight: 600; }
.search-result-loading    { padding: 12px 14px; font-size: 13px; color: #aaa; text-align: center; }

/* ─────────────────────────────────────────────
   4. LAYOUT: FLOATING TOP BAR
   ───────────────────────────────────────────── */
.floatingTopBar {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2000;
}

@media (min-width: 769px) {
    .floatingTopBar {
        width: 30%;
        min-width: 600px;
    }
}

@media (max-width: 768px) {
    .leaflet-control-zoom { display: none !important; }
    #bottomButtons        { bottom: 20px !important; }
}

#mobile-search-input:focus {
    outline: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ─────────────────────────────────────────────
   12. USER MENU
   ───────────────────────────────────────────── */
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.user-menu-item:hover { background: #f5f5f5; }

/* ─────────────────────────────────────────────
   3. SHARED UTILITIES
   ───────────────────────────────────────────── */
.btn {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.share-btn { background: white; }

.btn-success       { background: #007bff; }
.btn-success:hover { background: #0056b3; }

.message {
    text-align: center;
    color: #28a745;
    font-size: 14px;
    margin-top: 8px;
}

/* ─────────────────────────────────────────────
   1. CUSTOM PROPERTIES
   ───────────────────────────────────────────── */
:root {
    --croppie-size: 200px;

    /* ── Semantic colour tokens (light-mode defaults) ── */
    --bg-surface:         #ffffff;
    --bg-overlay:         rgba(0,0,0,0.5);
    --text-primary:       #333333;
    --text-muted:         #888888;
    --border-color:       #e0e0e0;
    --row-hover:          #f5f5f5;
    --drawer-bg:          #ffffff;
    --input-bg:           #ffffff;
    --topbar-btn-bg:      #ffffff;
    --topbar-btn-shadow:  0 1px 4px rgba(0,0,0,0.3);
    --user-menu-bg:       #ffffff;
    --modal-bg:           #ffffff;
    --loading-bar-bg:     #f9f9f9;
    --map-tile-filter:    none;
}

[data-theme="dark"] {
    /* Android brand dark: white surfaces → brand teal, text → black */
    --bg-surface:         #1de9b6;
    --bg-overlay:         rgba(0,0,0,0.5);
    --text-primary:       #000000;
    --text-muted:         rgba(0,0,0,0.6);
    --border-color:       rgba(0,0,0,0.25);   /* appDividerColor() in dark */
    --row-hover:          rgba(0,0,0,0.08);
    --drawer-bg:          #1de9b6;
    --input-bg:           #1de9b6;   /* same as surface — border distinguishes the field (Android OutlinedTextField) */
    --topbar-btn-bg:      #1de9b6;
    --topbar-btn-shadow:  0 1px 4px rgba(0,0,0,0.3);
    --user-menu-bg:       #1de9b6;
    --modal-bg:           #1de9b6;
    --loading-bar-bg:     rgba(0,0,0,0.08);
}

/* ─────────────────────────────────────────────
   DARK MODE  [data-theme="dark"]

   Brand dark: white surfaces → brand teal (#1de9b6), text → black.
   Mirrors the Android RoundnetTheme / appSurfaceColor() dark palette exactly.
   Named _z-dark-mode.css so bundleCss concatenates it last.
   ───────────────────────────────────────────── */

/* ── Map tiles & attribution (invert + hue-rotate so OSM stays readable) ── */
/* Scoped to #map (FTL version) so it does not affect the WASM #leaflet-map.
   Zoom controls are intentionally excluded — their appearance is handled
   explicitly below so the black background is not inverted back to white. */
[data-theme="dark"] #map .leaflet-layer,
[data-theme="dark"] #map .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
[data-theme="dark"] #map { background: #000; }

/* ── WASM maps — dark mode driven independently via data-dark="true" ── */
/* Applied by WASM Kotlin (jsSetLeafletDark) when LocalDarkMode is true.
   Replicates the FTL inverted-OSM appearance without touching data-theme. */
#leaflet-map[data-dark="true"] .leaflet-layer,
#leaflet-map[data-dark="true"] .leaflet-control-attribution,
#location-picker-map[data-dark="true"] .leaflet-layer,
#location-picker-map[data-dark="true"] .leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
#leaflet-map[data-dark="true"],
#location-picker-map[data-dark="true"] { background: #000; }

/* ── Body ── */
[data-theme="dark"] body { background: var(--bg-surface); color: var(--text-primary); }

/* ══════════════════════════════════════════════
   DRAWERS  (all bottom-sheets / side-sheets)
   ══════════════════════════════════════════════ */
[data-theme="dark"] .detailDrawer {
    background: var(--drawer-bg);
    color: var(--text-primary);
}

/*
 * Drawer h3 headers: bg = teal, text = black (Android headerContentColor dark).
 */
[data-theme="dark"] .detailDrawer h3 {
    background-color: #1de9b6 !important;
    color: #000 !important;
}
[data-theme="dark"] .detailDrawer h5 { color: var(--text-primary); }
[data-theme="dark"] .detailDrawer p,
[data-theme="dark"] .detailDrawer small { color: var(--text-muted); }
[data-theme="dark"] .detailDrawer hr { border-color: var(--border-color); }

/* Filter panel wrapper */
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .filter-panel-inner { background: var(--drawer-bg); }
[data-theme="dark"] .filter-label { color: var(--text-primary); }

/* ══════════════════════════════════════════════
   TOP BAR  (search bar + icon buttons)
   ══════════════════════════════════════════════ */

/* Circular icon buttons (auth, filter) — teal bg, black icon */
[data-theme="dark"] #loginBtn,
[data-theme="dark"] #hamburgerBtn,
[data-theme="dark"] #mobile-filter-btn {
    background: var(--topbar-btn-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--topbar-btn-shadow);
}

/* Wrapper divs around auth/filter buttons — transparent (invisible square) */
[data-theme="dark"] #auth-buttons,
[data-theme="dark"] #filter-buttons,
[data-theme="dark"] #searchBar > div:first-child {
    background: transparent !important;
    box-shadow: none !important;
}

/* X clear button in search bar — transparent, no border */
[data-theme="dark"] #search-clear-btn,
[data-theme="dark"] .search-clear-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
}

/* Magnifier icon in floating search bar — black */
[data-theme="dark"] #searchBar .fa-search,
[data-theme="dark"] #searchBar .fas.fa-search {
    color: #000 !important;
}

/* Search input — teal bg, black text, black border */
[data-theme="dark"] #mobile-search-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: #000;
}
[data-theme="dark"] #mobile-search-input:focus { border-color: #000; box-shadow: none; }
[data-theme="dark"] #mobile-search-input::placeholder { color: var(--text-muted); }

/* Loading state */
/* Spinner circle — teal (matches auth/filter buttons) */
[data-theme="dark"] #searchBarLoading > div:first-child {
    background: var(--topbar-btn-bg) !important;
    color: var(--text-primary) !important;
}
/* Loading text bar — teal bg, black text, no border */
[data-theme="dark"] #searchBarLoading > div:nth-child(2) {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: none !important;
}
/* Disabled filter button — teal (same family as active filter button) */
[data-theme="dark"] #searchBarLoading > button {
    background: var(--topbar-btn-bg) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════
   HAMBURGER / USER MENU DROPDOWN
   Android DropdownMenu: background = teal; items = black
   ══════════════════════════════════════════════ */
[data-theme="dark"] #userMenuDropdown {
    background: var(--user-menu-bg) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
[data-theme="dark"] .user-menu-item { color: var(--text-primary); }
[data-theme="dark"] .user-menu-item:hover { background: var(--row-hover); }
[data-theme="dark"] #userMenuDropdown hr { border-color: var(--border-color); }

/* ══════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════ */
[data-theme="dark"] .modal-content { background: var(--modal-bg); color: var(--text-primary); }

/* Share modal: copy button → black bg, teal icon */
[data-theme="dark"] #copyShareBtn {
    background: #000 !important;
    color: #1de9b6 !important;
    border: none !important;
}
[data-theme="dark"] #copyShareBtn:hover { background: #222 !important; }

/* Delete account modal: all buttons → black text */
[data-theme="dark"] #deleteAccountModal .modal-content button { color: #000 !important; }

/* ══════════════════════════════════════════════
   FORM CONTROLS  (Android OutlinedTextField dark)
   focusedBorder = #000, unfocusedBorder = #000, containerColor = teal
   ══════════════════════════════════════════════ */
[data-theme="dark"] .form-control {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: #000;
}
[data-theme="dark"] .form-control:focus {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: #000;
    box-shadow: none;
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }

/* Floating label — teal background (blends with field), black text */
[data-theme="dark"] .field label {
    background: var(--input-bg);
    color: var(--text-primary);
}
[data-theme="dark"] .field .form-control:not(:placeholder-shown):not(:focus) ~ label,
[data-theme="dark"] .field .form-control:focus ~ label {
    background: var(--input-bg);
    color: #000;
}
[data-theme="dark"] .field .form-control:focus ~ label {
    color: #000 !important;
    font-weight: 700 !important;
}

/* Always-floated labels (address, verify_id) */
[data-theme="dark"] .field:has(.form-control[name="address"]) label,
[data-theme="dark"] .field:has(.form-control[name="verify_id"]) label {
    background: var(--input-bg) !important;
    color: #000 !important;
}

/* Field validation error — red border + red label in dark mode */
[data-theme="dark"] .field.has-error .form-control {
    border-color: #ef5350 !important;
}
[data-theme="dark"] .field.has-error .form-control:focus ~ label,
[data-theme="dark"] .field.has-error .form-control:not(:placeholder-shown):not(:focus) ~ label {
    color: #ef5350 !important;
}
[data-theme="dark"] .field-error { color: #ef5350; }

/* ══════════════════════════════════════════════
   FILTER DRAWER — TYPE BOXES
   Android: selected   → bg=#000 border=#000 icon/text=teal
            unselected → bg=transparent border=rgba(0,0,0,.5) icon/text=#000
   ══════════════════════════════════════════════ */
[data-theme="dark"] .select-box .box {
    background: transparent;
    border-color: rgba(0,0,0,0.50);
    color: #000;
}
[data-theme="dark"] .select-box i { color: #000; }
[data-theme="dark"] .select-box input:checked + .box {
    background: #000;
    border-color: #000;
    color: #1de9b6;
}
[data-theme="dark"] .select-box input:checked + .box i { color: #1de9b6; }

/* ══════════════════════════════════════════════
   FILTER DRAWER — ACTIVITY STATUS BOXES
   Android: unselected → bg=transparent border=rgba(0,0,0,.50) icon/text=#000
            selected   → bg=#000 border=#000 text/icon=status-color
   ══════════════════════════════════════════════ */
[data-theme="dark"] .activity-box .box {
    background: transparent;
    border-color: rgba(0,0,0,0.50) !important;
    color: #000;
}
[data-theme="dark"] .activity-box .box svg { color: #000; }
[data-theme="dark"] .activity-box input:checked + .box {
    background: #000;
    border-color: #000 !important;
}
[data-theme="dark"] .activity-box.activity-verified   input:checked + .box   { color: #007bff; }
[data-theme="dark"] .activity-box.activity-verified   input:checked + .box svg { color: #007bff; }
[data-theme="dark"] .activity-box.activity-unverified input:checked + .box   { color: #ffc107; }
[data-theme="dark"] .activity-box.activity-unverified input:checked + .box svg { color: #ffc107; }
[data-theme="dark"] .activity-box.activity-inactive   input:checked + .box   { color: #dc3545; }
[data-theme="dark"] .activity-box.activity-inactive   input:checked + .box svg { color: #dc3545; }

/* ══════════════════════════════════════════════
   DRAWER SEARCH BAR  (filter country search, membership manage search)
   Identical to floating search bar in dark mode
   ══════════════════════════════════════════════ */
[data-theme="dark"] .search-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: #000;
}
[data-theme="dark"] .search-input:focus {
    border-color: #000;
    box-shadow: none;
    outline: none;
}
[data-theme="dark"] .search-input::placeholder { color: var(--text-muted); }

/* Magnifier icon inside drawer search bars — black */
[data-theme="dark"] .search-input-icon { color: #000 !important; }

/* ══════════════════════════════════════════════
   FILTER DRAWER — COUNTRY LIST
   Android: container border=Color.Black; selected row bg=#000 text=teal
   ══════════════════════════════════════════════ */
[data-theme="dark"] #filter-country-table {
    border-color: #000 !important;
    scrollbar-color: #1de9b6 #000;
    scrollbar-width: thin;
}
[data-theme="dark"] #filter-country-table::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] #filter-country-table::-webkit-scrollbar-track {
    background: #000;
    border-radius: 4px;
}
[data-theme="dark"] #filter-country-table::-webkit-scrollbar-thumb {
    background: #1de9b6;
    border-radius: 4px;
}
[data-theme="dark"] .membership-table-row { color: var(--text-primary); }
[data-theme="dark"] .membership-table-row:hover { background: var(--row-hover); }

/* ══════════════════════════════════════════════
   FILTER DRAWER — RESET BUTTON
   Android: black container, teal label
   ══════════════════════════════════════════════ */
[data-theme="dark"] #resetFiltersBtn {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #resetFiltersBtn:hover { background: #222 !important; }

/* ══════════════════════════════════════════════
   FILTER DRAWER — RANGE SLIDER  (noUiSlider)
   ══════════════════════════════════════════════ */
[data-theme="dark"] .noUi-target  { background-color: rgba(0,0,0,0.30) !important; }
[data-theme="dark"] .noUi-connect { background-color: #000 !important; }
[data-theme="dark"] .noUi-handle  {
    border-color:      #000 !important;
    background-color:  #000 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .noUi-tooltip {
    background: #000;
    color: #1de9b6;
    border-color: #000;
}

/* ══════════════════════════════════════════════
   TOGGLE SWITCHES  (Android SwitchDefaults dark)
   ══════════════════════════════════════════════ */
[data-theme="dark"] .notif-slider               { background: rgba(0,0,0,0.30); }
[data-theme="dark"] .notif-slider:before         { background: rgba(0,0,0,0.60); }
[data-theme="dark"] .notif-toggle input:checked + .notif-slider        { background: #000; }
[data-theme="dark"] .notif-toggle input:checked + .notif-slider:before { background: #1de9b6; }

/* ══════════════════════════════════════════════
   BOTTOM FABs
   ══════════════════════════════════════════════ */
[data-theme="dark"] #addClubBtn {
    color: #000 !important;
}
[data-theme="dark"] #centerMapBtn {
    background: #1de9b6 !important;
    color: #000 !important;
}

/* ══════════════════════════════════════════════
   IMPRINT BUTTON
   ══════════════════════════════════════════════ */
[data-theme="dark"] #imprintBtn {
    background: var(--topbar-btn-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

/* ══════════════════════════════════════════════
   SEARCH DROPDOWN
   ══════════════════════════════════════════════ */
[data-theme="dark"] #search-dropdown {
    background: var(--user-menu-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border-color: var(--border-color);
}
[data-theme="dark"] .search-result-item {
    background: transparent;
    border-bottom-color: rgba(0,0,0,0.20);
}
[data-theme="dark"] .search-result-item:hover { background: var(--row-hover); }
[data-theme="dark"] .search-result-primary  { color: #000; }
[data-theme="dark"] .search-result-secondary { color: var(--text-muted); }
[data-theme="dark"] .search-result-geo-icon {
    background: rgba(0,0,0,0.12);
    color: #000;
}
[data-theme="dark"] .search-result-no-clubs   { color: rgba(0,0,0,0.40); }
[data-theme="dark"] .search-result-club-count { color: #000; font-weight: 600; }
[data-theme="dark"] .search-result-loading    { color: var(--text-muted); }

/* ══════════════════════════════════════════════
   CLUB DETAIL DRAWER — ACTIVITY STATUS BADGE SYMBOLS
   In dark mode the badge background stays coloured; the symbol (?, !, ✓)
   switches to black for contrast on the coloured circle.
   ══════════════════════════════════════════════ */
[data-theme="dark"] .status-badge,
[data-theme="dark"] .status-badge svg { color: #000 !important; }

/* ══════════════════════════════════════════════
   CLUB DETAIL DRAWER — ACTIVITY ACTION BUTTONS
   Dark mode: filled with status colour + black text (no outline)
   ══════════════════════════════════════════════ */
[data-theme="dark"] .activity-btn-confirm {
    background: #007bff !important;
    color: #000 !important;
    border-color: #007bff !important;
}
[data-theme="dark"] .activity-btn-confirm:hover { background: #0069d9 !important; }
[data-theme="dark"] .activity-btn-report {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] .activity-btn-report:hover { background: #bb2d3b !important; }

/* ══════════════════════════════════════════════
   CLUB DETAIL DRAWER
   ══════════════════════════════════════════════ */
/* Header badges */
[data-theme="dark"] .pop-up-club .club-info-item {
    background-color: rgba(0,0,0,0.15);
    color: #000;
}

/* Club name in header → black */
[data-theme="dark"] .pop-up-club h4 { color: #000 !important; }

/* Share button → matches header badges styling */
[data-theme="dark"] .pop-up-club button {
    background: rgba(0,0,0,0.15) !important;
    color: #000 !important;
    border: none !important;
}

/* Social link buttons */
[data-theme="dark"] .popup-links a {
    background-color: #000;
    color: #1de9b6 !important;
}
[data-theme="dark"] .popup-links a:hover { background-color: #222 !important; }

/* Edit club / Claim club / Login-to-edit action link → black */
[data-theme="dark"] #clubDrawer a[style*="28a745"],
[data-theme="dark"] #clubDrawer a[style*="dc3545"],
[data-theme="dark"] #clubDrawer .login-to-edit {
    color: #000 !important;
}

/* Filter active badge: red bg + black text, no border */
[data-theme="dark"] #filter-active-badge {
    background: #dc3545 !important;
    color: #000 !important;
    border: none !important;
}

/* ══════════════════════════════════════════════
   MAP MARKERS (club logo circles)
   Transparent logo parts should show white, not black, so logos
   with alpha channels look correct against the inverted map tiles.
   ══════════════════════════════════════════════ */
[data-theme="dark"] .club-logo-map {
    border: none !important;
    background: #fff !important;
}

/* ══════════════════════════════════════════════
   MARKER CLUSTERS
   No dark-mode override — use the same default Leaflet colours as light mode.
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   LEAFLET POPUP / TOOLTIP
   ══════════════════════════════════════════════ */
[data-theme="dark"] #map .leaflet-popup-content-wrapper,
[data-theme="dark"] #map .leaflet-popup-tip { background: var(--modal-bg); color: var(--text-primary); }

/* ══════════════════════════════════════════════
   INLINE DATA TABLES
   (My Clubs, Pending Requests, Membership Manage)
   Black outer border, teal/black scrollbar, dark row dividers
   ══════════════════════════════════════════════ */
[data-theme="dark"] .inline-data-table {
    border-color: #000 !important;
    scrollbar-color: #1de9b6 #000;
    scrollbar-width: thin;
}
[data-theme="dark"] .inline-data-table::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] .inline-data-table::-webkit-scrollbar-track {
    background: #000;
    border-radius: 4px;
}
[data-theme="dark"] .inline-data-table::-webkit-scrollbar-thumb {
    background: #1de9b6;
    border-radius: 4px;
}
/* Row dividers */
[data-theme="dark"] .inline-data-table > div {
    border-bottom-color: rgba(0,0,0,0.20) !important;
}

/* ══════════════════════════════════════════════
   MY CLUBS DRAWER
   ══════════════════════════════════════════════ */
/* Edit button → black border + black text */
[data-theme="dark"] #myClubsContent .btn-outline-success {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
}
[data-theme="dark"] #myClubsContent .btn-outline-success:hover {
    background: rgba(0,0,0,0.08) !important;
    color: #000 !important;
}
/* Confirm-as-active button → black border + black text */
[data-theme="dark"] #myClubsContent .my-clubs-confirm-btn {
    color: #000 !important;
    border: 1px solid #000 !important;
    background-color: transparent !important;
}
[data-theme="dark"] #myClubsContent .my-clubs-confirm-btn:hover {
    background-color: rgba(0,0,0,0.08) !important;
    color: #000 !important;
}

/* ══════════════════════════════════════════════
   PENDING REQUESTS DRAWER
   ══════════════════════════════════════════════ */
/* Accept button → black + teal */
[data-theme="dark"] #pendingRequestsContent .btn-success {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #pendingRequestsContent .btn-success:hover { background: #222 !important; }

/* Reject / Cancel buttons → red + black */
[data-theme="dark"] #pendingRequestsContent .btn-outline-danger,
[data-theme="dark"] #pendingRequestsContent .btn-outline-secondary {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] #pendingRequestsContent .btn-outline-danger:hover,
[data-theme="dark"] #pendingRequestsContent .btn-outline-secondary:hover {
    background: #bb2d3b !important;
}

/* ══════════════════════════════════════════════
   FEEDBACK DRAWER
   ══════════════════════════════════════════════ */
/* Instagram button → black + teal */
[data-theme="dark"] #feedbackDrawer .btn:not(#feedbackSubmitBtn) {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #feedbackDrawer .btn:not(#feedbackSubmitBtn):hover { background: #222 !important; }

/* Submit button → black + teal */
[data-theme="dark"] #feedbackSubmitBtn {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #feedbackSubmitBtn:hover { background: #222 !important; }

/* ══════════════════════════════════════════════
   EDIT ACCOUNT DRAWER
   ══════════════════════════════════════════════ */
/* Save button → black + teal */
[data-theme="dark"] #editAccountDrawer .btn-success {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #editAccountDrawer .btn-success:hover { background: #222 !important; }

/* Delete account button → red + black */
[data-theme="dark"] #editAccountDrawer .btn-danger {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] #editAccountDrawer .btn-danger:hover { background: #bb2d3b !important; }

/* ══════════════════════════════════════════════
   ADD CLUB DRAWER
   ══════════════════════════════════════════════ */
/* Save club button → black + teal */
[data-theme="dark"] #addClubDrawer .btn-success {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #addClubDrawer .btn-success:hover { background: #222 !important; }

/* Change logo button → black + teal */
[data-theme="dark"] #addClubDrawer .logo-upload-btn {
    background: #000 !important;
    color: #1de9b6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] #addClubDrawer .logo-upload-btn:hover { background: #222 !important; }

/* ══════════════════════════════════════════════
   EDIT CLUB DRAWER
   ══════════════════════════════════════════════ */
/* Change logo button → black + teal */
[data-theme="dark"] #editClubDrawer .logo-upload-btn {
    background: #000 !important;
    color: #1de9b6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] #editClubDrawer .logo-upload-btn:hover { background: #222 !important; }

/* Update club button → black + teal */
[data-theme="dark"] #editClubDrawer .btn-success {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #editClubDrawer .btn-success:hover { background: #222 !important; }

/* Delete club button → red + black */
[data-theme="dark"] #editClubDrawer .btn-danger {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] #editClubDrawer .btn-danger:hover { background: #bb2d3b !important; }

/* Regenerate ID button → black + teal */
[data-theme="dark"] .verify-refresh-btn {
    background: #000 !important;
    color: #1de9b6 !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] .verify-refresh-btn:hover {
    background: #222 !important;
    transform: translateY(-50%) rotate(180deg) scale(1.05);
}

/* Membership section labels */
[data-theme="dark"] #edit-memberof-section > div > span,
[data-theme="dark"] #edit-members-section > div > span {
    color: #000 !important;
}

/* Membership table borders → black (targeted by dynamic id prefix) */
[data-theme="dark"] [id^="members-table-"],
[data-theme="dark"] [id^="memberof-table-"] {
    border-color: #000 !important;
}

/* ══════════════════════════════════════════════
   HAMBURGER DROPDOWN — SPECIAL ITEMS
   ══════════════════════════════════════════════ */
/* My Clubs count badge — black bg + teal text (was teal-on-teal = invisible) */
[data-theme="dark"] .my-clubs-count-badge {
    background: #000 !important;
    color: #1de9b6 !important;
}

/* Admin Panel — orange text/icon on teal dropdown background */
[data-theme="dark"] #userMenuDropdown .admin-menu-item { color: #e65100 !important; }
[data-theme="dark"] #userMenuDropdown .admin-menu-item i { color: #e65100 !important; }

/* Logout — red text/icon on teal dropdown background */
[data-theme="dark"] #userMenuDropdown .logout-menu-item { color: #e53935 !important; }
[data-theme="dark"] #userMenuDropdown .logout-menu-item i { color: #e53935 !important; }

/* ══════════════════════════════════════════════
   MEMBERSHIP ROW STATUS STYLES (dark mode)
   edit-club sheet: memberOf / members tables
   ══════════════════════════════════════════════ */

/* ── Incoming requests — orange bg, black text ── */
[data-theme="dark"] .membership-row-incoming {
    background: #ff9800 !important;
}
[data-theme="dark"] .membership-row-incoming span {
    color: #000 !important;
}
/* Accept → black + teal */
[data-theme="dark"] .membership-row-incoming .btn-success {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
/* Decline → red + black */
[data-theme="dark"] .membership-row-incoming .btn-outline-danger {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}

/* ── Outgoing requests — dark purple bg, black text ── */
[data-theme="dark"] .membership-row-outgoing {
    background: #9c27b0 !important;
}
[data-theme="dark"] .membership-row-outgoing span {
    color: #000 !important;
}
/* Cancel → transparent + black icon */
[data-theme="dark"] .membership-row-outgoing .btn-outline-secondary {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
}

/* ── Confirmed members — black bg, teal text, red remove icon ── */
[data-theme="dark"] .membership-row-linked {
    background: #000 !important;
}
[data-theme="dark"] .membership-row-linked span {
    color: #1de9b6 !important;
}
/* Remove → transparent, red icon */
[data-theme="dark"] .membership-row-linked .btn-outline-danger {
    background: transparent !important;
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* ── Non-selected clubs — transparent (teal surface shows through), black text ── */
[data-theme="dark"] .membership-row-unlinked {
    background: transparent !important;
}
[data-theme="dark"] .membership-row-unlinked span {
    color: #000 !important;
}
/* Add → transparent + black border + black icon */
[data-theme="dark"] .membership-row-unlinked .btn-outline-success {
    background: transparent !important;
    color: #000 !important;
    border-color: #000 !important;
}
/* Logo border invisible on teal surface → switch to black */
[data-theme="dark"] .membership-row-unlinked img {
    border-color: #000 !important;
}

/* ══════════════════════════════════════════════
   PENDING REQUESTS — COUNT BUBBLES
   ══════════════════════════════════════════════ */
/* Incoming (orange) and outgoing (purple) count bubbles → black text */
[data-theme="dark"] .pending-count-bubble { color: #000 !important; }

/* ══════════════════════════════════════════════
   HAMBURGER MENU — PENDING REQUESTS BADGE
   ══════════════════════════════════════════════ */
[data-theme="dark"] #pendingMenuCount { color: #000 !important; }

/* ══════════════════════════════════════════════
   FILTER DRAWER — COUNTRY TABLE BUTTONS
   ══════════════════════════════════════════════ */
/* Add filter button → black border + black icon */
[data-theme="dark"] #filter-country-table .btn-outline-success {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
}
[data-theme="dark"] #filter-country-table .btn-outline-success:hover {
    background: rgba(0,0,0,0.08) !important;
}
/* Remove filter button → red bg + black icon */
[data-theme="dark"] #filter-country-table .btn-outline-danger {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] #filter-country-table .btn-outline-danger:hover {
    background: #bb2d3b !important;
}

/* ══════════════════════════════════════════════
   MODALS — GENERAL BUTTONS + SWITCH TEXT
   ══════════════════════════════════════════════ */
/* All modal action buttons → black + teal by default */
[data-theme="dark"] .modal-content button {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] .modal-content button:hover { background: #222 !important; }

/* Destructive confirmations remain red + black */
[data-theme="dark"] #deleteSubmit,
[data-theme="dark"] #deleteAccountConfirm {
    background: #dc3545 !important;
    color: #000 !important;
    border-color: #dc3545 !important;
}
[data-theme="dark"] #deleteSubmit:hover,
[data-theme="dark"] #deleteAccountConfirm:hover { background: #bb2d3b !important; }

/* Copy-share button keeps its own style (already defined above) */
[data-theme="dark"] #copyShareBtn {
    background: #000 !important;
    color: #1de9b6 !important;
}

/* Switch / helper links in modals (Forgot password, Register, Back) → black */
[data-theme="dark"] .modal-content .switch { color: #000 !important; }

/* ══════════════════════════════════════════════
   SELECT DROPDOWN OPTIONS (Add / Edit club type)
   All options → teal bg / black text by default
   Highlighted / selected option → black bg, teal text
   ══════════════════════════════════════════════ */
[data-theme="dark"] select.form-control option {
    background-color: #1de9b6;
    background:       #1de9b6;
    color: #000;
}
/* :checked = selected item; :hover/:focus = highlighted while open
   linear-gradient overrides the Chrome/Windows native selection colour */
[data-theme="dark"] select.form-control option:checked,
[data-theme="dark"] select.form-control option:hover,
[data-theme="dark"] select.form-control option:focus {
    background:       linear-gradient(#000, #000) !important;
    background-color: #000 !important;
    color: #1de9b6 !important;
}

/* ══════════════════════════════════════════════
   AUTH BUTTON — PENDING NOTIFICATION DOT
   Remove white border (looks odd on teal button background)
   ══════════════════════════════════════════════ */
[data-theme="dark"] #pendingDot { border: none !important; }

/* ══════════════════════════════════════════════
   LEAFLET ZOOM CONTROLS
   Black background, teal +/− glyphs
   Scoped to #map (FTL only — WASM map has zoomControl: false)
   ══════════════════════════════════════════════ */
[data-theme="dark"] #map .leaflet-control-zoom a {
    background: #000 !important;
    color: #1de9b6 !important;
    border-color: #000 !important;
}
[data-theme="dark"] #map .leaflet-control-zoom a:hover {
    background: #222 !important;
    color: #1de9b6 !important;
}
[data-theme="dark"] #map .leaflet-bar {
    border-color: #000 !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}