/* iOS Safari auto-zooms on focus when an input's font-size < 16px.
   Enforce a 16px floor on form fields at mobile breakpoints — keeps
   pinch-zoom intact without disabling user-scalable. */
@media (max-width: 991.98px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea,
    [contenteditable="true"] {
        font-size: 16px;
    }
}

/* 🌈 Centralized color variables (First Set for Dashboard) */
:root {
    /* PRIMARY BRAND */
    --color-primary: #29B5A8;
    --color-primary-dark: #004E89;
    --color-accent: #29B5A8;
    --color-accent-dark: #21968a;
    /* TEXT */
    --c-text-primary: #282a32;
    --c-text-secondary: #686b87;
    /* BACKGROUNDS */
    --c-background-primary: #ffffff;
    --c-background-secondary: #fdfcff;
    --c-background-tertiary: #ecf3fe;
    /* BORDERS */
    --color-border-light: #e0e0e0;
    --c-border-primary: #eff1f6;

    /* Fixed bottom nav clearance for mobile bottom-sheet modals. Most pages
       have one (#dashMNav via global-mobile-nav.php, or #mTabBar on a
       club's own dash.php) and need 62px + safe-area reserved above it;
       pages with neither (dashboard.php removed its own nav) only need the
       safe-area. Every sheet-style modal should offset off this variable
       instead of hardcoding 62px, so removing/adding a page's nav doesn't
       require hunting down each modal's CSS individually. */
    --mnav-clearance: calc(62px + env(safe-area-inset-bottom, 0px));
}
body:not(:has(#dashMNav)):not(:has(#mTabBar)) {
    --mnav-clearance: env(safe-area-inset-bottom, 0px);
}


/* General Layout */
html, body {
    height: 100%;
}

body {
    font-family: "Lato", arial;
    color: var(--c-text-primary);
    margin: 0 !important;
    padding: 0 !important;
    
}


    body a {
        text-decoration: none;
        color: #2b988f;
    }


/* Images */
img {
    max-width: 100%;
}

.grey-line {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* Header */
.header {
    background-color: var(--c-background-primary);
    border-bottom: 1px solid var(--c-border-primary);
    position: relative;
    z-index: 1040;
}

.header-content {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Desktop: one flex row — logo left, nav+actions right */
.header-content {
    display: flex;
    align-items: center;
}

.header-top-row {
    display: flex;
    align-items: center;
    height: 90px;
    flex-shrink: 0;
}

.navbar-brand em {
    font-style: normal;
    font-weight: 900;
    background: linear-gradient(135deg, #86efac 0%, #2B988F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-desktop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    margin-left: 2rem;
    height: 90px;
}

.header-mobile-right {
    display: none; /* hidden on desktop */
}

.header-navigation-links {
    display: flex;
    align-items: center;
    margin-left: 0;
}

    .header-navigation-links a {
        text-decoration: none;
        color: var(--c-text-action);
        font-weight: 500;
        margin-right: 1rem;
        font-size: 0.95rem;
        line-height: 90px;
        height: 90px;
        transition: color 0.2s;
    }

        .header-navigation-links a.active {
            color: #2B988F;
            font-weight: 700;
            box-shadow: inset 0 -3px 0 0 #2B988F;
        }

        .header-navigation-links a:hover:not(.active) {
            color: #2B988F;
            box-shadow: inset 0 -2px 0 0 rgba(43, 152, 143, 0.35);
        }

/* ── Hamburger button ─────────────────────────────── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: #f2f4f8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: transform 0.22s, opacity 0.22s;
}
.hamburger-btn.open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open .hamburger-bar:nth-child(2) { opacity: 0; }
.hamburger-btn.open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────── */
.mobile-nav {
    display: none; /* JS + CSS reveal on mobile */
    position: fixed;
    top: 0;
    right: -280px;
    width: 270px;
    height: 100dvh;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    padding: 1rem 0;
    overflow-y: auto;
    z-index: 9999;
    transition: right 0.25s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
}
.mobile-nav.open {
    right: 0;
}
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}
.mobile-nav-backdrop.open {
    display: block;
}
.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 13px 20px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.mobile-nav-link:hover { background: #f5f5f5; }
.mobile-nav-link--danger { color: #dc3545; }
.mobile-nav-link .material-icons { font-size: 19px; color: #6c757d; flex-shrink: 0; }
.mobile-nav-link--danger .material-icons { color: #dc3545; }
.mobile-nav-group-toggle { justify-content: space-between; }
.mobile-nav-caret { transition: transform 0.2s; font-size: 18px !important; color: #aaa !important; margin-left: auto; }
.mobile-nav-divider { height: 1px; background: #f0f0f0; margin: 6px 0; }

/* My Clubs accordion sub-list */
.mobile-nav-sub {
    display: none;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-sub.open { display: block; }
.mobile-nav-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px 10px 44px;
    font-size: 0.85rem;
    color: #333;
    text-decoration: none;
    transition: background 0.12s;
}
.mobile-nav-sub-item:hover { background: #f0f0f0; }
.mobile-nav-sub-item--muted { color: #888; font-size: 0.8rem; }
.mobile-nav-sub-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-nav-sub-empty { display: block; padding: 10px 20px 10px 44px; font-size: 0.82rem; color: #999; }

/* ── Responsive breakpoint ────────────────────────── */
@media (max-width: 991.98px) {
    .responsive-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    /* Reserve the fixed bottom nav's clearance as a MARGIN on the footer
       itself, not as body's padding-bottom. html,body{height:100%} above
       means body is height-constrained while its content overflows it —
       in that situation a padding-bottom on body doesn't reliably extend
       the scrollable area (a well-known overflow/percentage-height CSS
       quirk), so pages with a lot of content (dash.php's tabs, etc.) were
       leaving the footer sitting flush under the nav bar, or past the end
       of what could actually be scrolled to. Margin on the last real piece
       of flowing content isn't subject to that quirk. */
    /* Reserved on .main (footer's outermost non-body wrapper), not on the
       footer itself or on body. .main is auto-height, so padding here
       correctly grows its rendered height and the page's true scrollable
       length along with it. body has explicit height:100% (see html,body
       rule above) — padding-bottom OR margin-bottom placed on body itself,
       or on its last child, does not reliably extend scrollHeight once
       content already overflows a percentage-height box (a real CSS
       overflow/percentage-height quirk) — every earlier attempt to reserve
       this space on body or on the footer directly measurably failed to
       change scrollHeight, which is what sent this comment down here. */
    .main {
        padding-bottom: var(--mnav-clearance);
    }
    .header {
        height: auto;
        position: sticky;
        top: 0;
        z-index: 1040;
    }
    .current-pick-info {
        display: none !important;
    }
    /* Search bar row: no bottom margin, full width */
    .current-pick-header-row {
        margin-bottom: 0 !important;
    }
    .current-pick-header-row .ms-auto {
        flex: 1;
        margin-left: 0 !important;
    }
    .header-content {
        width: 100%;
        padding: 0 1rem;
        flex-direction: column;
        align-items: stretch;
    }
    .header-top-row {
        height: 64px;
        justify-content: space-between;
    }
    /* Hide desktop nav row */
    .header-desktop-row {
        display: none;
    }
    /* Show mobile right controls */
    .header-mobile-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    /* Show hamburger */
    .hamburger-btn {
        display: flex;
    }
    /* Mobile drawer visible but off-screen; .open slides it in */
    .mobile-nav {
        display: block;
    }
    /* Shrink notification dropdowns on small screens */
    #notificationDropdownMobile,
    #messageDropdownMobile {
        width: calc(100vw - 2rem) !important;
        max-width: 320px;
    }
}

.icon-button {
    background: #f2f4f8;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-action);
    transition: background 0.2s, color 0.2s;
}

    .icon-button:hover {
        background: var(--c-background-tertiary);
        color: var(--c-accent-primary);
    }

.avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 5px;
}


.main-container {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


.responsive-wrapper {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

/* Section */
section {
    min-height: 60vh;
}

.main-content {
    flex: 1 0 auto;
}


/* Sidebar */
.content {
    display: flex;
    margin-top: 2rem;
}

.content-panel {
    flex: 0 0 250px;
}

.content-header-intro h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.content-header-intro p {
    font-size: 0.9rem;
    color: var(--c-text-secondary);
}

.vertical-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

    .vertical-tabs a {
        padding: 10px 12px;
        text-decoration: none;
        color: var(--c-text-action);
        font-weight: 500;
        border-radius: 8px;
        margin-bottom: 5px;
        transition: background 0.2s, color 0.2s;
    }

        .vertical-tabs a.active,
        .vertical-tabs a:hover {
            background: var(--c-background-tertiary);
            color: var(--c-accent-primary);
        }

/* Main Content */
.content-main {
    flex-grow: 1;
}

.main-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

.text-white-75 {
    opacity: .9 !important;
    color: white;
    font-size: 1rem;
}

/* Search */
.search-bar {
    background: #f2f4f8;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease, background 0.3s ease;
    overflow: hidden;
    position: relative;
}

    .search-bar:hover {
        background: var(--c-background-tertiary);
        color: var(--c-accent-primary);
        cursor: pointer;
    }

    .search-bar input {
        position: absolute;
        left: 0;
        height: 100%;
        width: 0;
        border: none;
        background: transparent;
        outline: none;
        padding: 0 10px;
        font-size: 0.9rem;
        color: var(--c-text-primary);
        opacity: 0;
        transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
        z-index: 1;
    }

    .search-bar:focus-within {
        width: 400px;
        background: var(--c-background-tertiary);
    }

        .search-bar:focus-within input {
            width: 100%;
            opacity: 1;
        }

.search-btn {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .search-btn img {
        width: 20px;
        height: 20px;
    }

.search-icon {
    width: 20px;
    height: 20px;
    z-index: 2;
    pointer-events: none;
}

/* Notification Badge */
.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Buttons and Misc */
.button {
    background: var(--c-background-primary);
    border: 2px solid var(--c-border-primary);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-text-action);
    display: inline-flex;
    align-items: center;
    transition: border-color 0.2s, color 0.2s;
}

    .button:hover {
        border-color: var(--c-accent-primary);
        color: var(--c-accent-primary);
    }

        .button:hover img {
            filter: invert(28%) sepia(71%) saturate(4443%) hue-rotate(234deg) brightness(96%) contrast(95%);
        }

/* Slide Drawer Animation */
.slide-drawer {
    animation: slideDown 0.4s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chat Box */
.chat-box {
    height: 180px;
    overflow-y: auto;
    background: #f8f9fa;
    padding: 12px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* --- Radio Cards --- */
.radio-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: left;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}



    .radio-card-group input[type="radio"] {
        display: none;
    }

.radio-card-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #ccc;
    border-radius: 04px;
    padding: 15px;
    width: 30%;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
    min-height: 50px;
}

    .radio-card-label:hover {
        border-color: var(--color-primary);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

.radio-card-group input[type="radio"]:checked + .radio-card-label {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Disabled Radio Cards */
.radio-card-label.disabled {
    background-color: #f8f9fa;
    color: #aaa;
    border-style: dashed;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}


.continue-btn {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

    .continue-btn:hover {
        background-color: var(--color-primary-dark);
        box-shadow: 0px 17px 30px -16px rgba(0,0,0,0.43);
        transition: 0.5s;
    }

    .continue-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }


/* --- Preview Cards --- */
.preview-card {
    min-height: 300px;
    overflow: visible !important;
    position: relative;
    z-index: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 30px 18px -24px !important;
}

    .preview-card .dropdown {
        z-index: 9999999 !important;
    }

    .preview-card .dropdown-menu {
        z-index: 99999999 !important;
        position: absolute !important;
    }

.preview-image,
.preview-image.bg-cover {
    height: 200px;
    width: 100%;
    background-color: var(--color-preview-image-bg);
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 5px;
    border-bottom: 1px solid var(--color-border-light);
}

.card-item_type {
    position: absolute;
    top: 175px;
    right: -2px;
    padding: 12px 12px;
    font-size: 16px;
    color: white;
    font-weight: 400;
    background-color: #434CE8;
    border-radius: 3px;
    z-index: 20;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.08);
    border-right: 3px solid #323cc9;
    border-top: 1px solid #5962ea;
}

    .card-item_type.bg-warning {
        background-color: #ffc107;
        color: #5a4b00;
    }


.badge-edit-link {
    font-size: 0.65rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

    .badge-edit-link:hover {
        color: #f1f1f1;
        text-decoration: underline;
    }


/* --- Sidebar and Club Drawer --- */
.club-drawer {
    background: rgb(0, 0, 0, 0.02);
    border-radius: 0px 0px 8px 0px;
    box-shadow: 24px 0px 13px -19px rgba(0,0,0,0.05) inset;
}

.club-card {
    padding: 1em;
    background-color: white;
    border-left: 1px solid #C4C9CE;
    border-top: 1px solid #C4C9CE;
    border-bottom: 1px solid #C4C9CE;
    border-right: none;
    border-radius: 5px 0px 0px 5px;
}

/* --- Tabs (boxed) --- */
.boxed-tab-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    font-weight: 500;
    color: #333;
    border-right: 1px solid #dee2e6;
    border-bottom: 4px solid transparent;
    transition: all 0.2s ease-in-out;
    text-align: left;
    border-radius: 0px;
}

    .boxed-tab-btn:last-child {
        border-right: none;
    }

    .boxed-tab-btn:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .boxed-tab-btn.active {
        background-color: #fff;
        font-weight: 600;
    }

        .boxed-tab-btn.active.pick-tab {
            border-bottom: 4px solid #0d6efd;
            color: #0d6efd;
        }

        .boxed-tab-btn.active.discussion-tab {
            border-bottom: 4px solid #20c997;
            color: #20c997;
        }

        .boxed-tab-btn.active.members-tab {
            border-bottom: 4px solid #fd7e14;
            color: #fd7e14;
        }

        .boxed-tab-btn.active.settings-tab {
            border-bottom: 4px solid #6f42c1;
            color: #6f42c1;
        }

.pick-tab:hover, .discussion-tab:hover, .members-tab:hover, .settings-tab:hover {
    color: inherit;
}

/* --- Toggle Button --- */
button.btn-toggle {
    margin: 0 4rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.4rem;
    width: 3rem;
    border-radius: 1.5rem;
    background: #e9ecef;
    background-color: #e9ecef;
    color: #6b7381;
    transition: background-color 0.25s ease;
    box-shadow: none;
    outline: none;
}

button.btn-toggle .handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: white;
    transition: left 0.25s ease;
    z-index: 2;
}

button.btn-toggle.active {
    background: #29b5a8;
    background-color: #29b5a8;
}

button.btn-toggle.active .handle {
    left: calc(100% - 1.1rem - 2px);
}

button.btn-toggle::before,
button.btn-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    transition: opacity 0.2s ease;
}

button.btn-toggle::before {
    content: 'NO';
    left: -2.5rem;
    opacity: 1;
}

button.btn-toggle::after {
    content: 'YES';
    right: -2.2rem;
    opacity: 0.3;
}

button.btn-toggle.active::before {
    opacity: 0.3;
}

button.btn-toggle.active::after {
    opacity: 1;
}

button.btn-toggle:hover,
button.btn-toggle:focus,
button.btn-toggle:focus-visible,
button.btn-toggle:active {
    background: #d3d8de;
    background-color: #d3d8de;
    box-shadow: none;
    outline: none;
}

button.btn-toggle.active:hover,
button.btn-toggle.active:focus,
button.btn-toggle.active:focus-visible,
button.btn-toggle.active:active {
    background: #22a099;
    background-color: #22a099;
}

.btn-launch:disabled {
    background-color: #a3cfc9;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
    box-shadow: none;
    transition: background-color 0.2s ease;
}


/* --- Avatar Upload --- */
.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: 0 auto;
}

    .avatar-upload .avatar-edit {
        position: absolute;
        right: -2px;
        top: -10px;
    }

    .avatar-upload .avatar-preview {
        width: 192px;
        height: 192px;
        border-radius: 10px;
        border: 6px solid #f8f8f8;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* --- Club Cards / Settings --- */
.settings-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .settings-summary {
        grid-template-columns: repeat(4, 1fr);
    }
}

.summary-item {
    background-color: #f8f9fa;
    border: 1px solid var(--color-border-light);
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
}

    .summary-item small {
        font-size: 0.75rem;
        color: #6c757d;
    }

    .summary-item .fw-semibold {
        margin-top: 4px;
        font-size: 0.95rem;
    }

/* --- Chat Message --- */
.chat-message {
    margin-bottom: 8px;
}


.alert.fade {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.opacity-0 {
    opacity: 0;
    transition: opacity 0.5s ease;
}


.modal-dialog.custom-wide {
    min-width: 1000px;
}

.latest-posts-widget a:hover {
    color: var(--color-primary);
}

.latest-posts-widget li {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 8px;
}

    .latest-posts-widget li:last-child {
        border-bottom: none;
    }

.footer--link a {
    font-size: .85rem;
    text-decoration: none;
}

.avatar.dropdown-toggle::after {
    display: none;
}


.profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
}

.upcoming-queue .list-group-item {
    font-size: 0.85rem;
}

.album-frame img {
    border-radius: 6px;
    border: 1px solid #ccc;
}

#launchBtn:hover {
    background-color: #21998d !important;
}

.btn-launch {
    background-color: #29B5A8;
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .btn-launch:hover {
        background-color: #21938A;
        color: white;
    }

.btn-outline-launch {
    background-color: transparent;
    color: #29B5A8;
    border: 1px solid #29B5A8;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .btn-outline-launch:hover {
        background-color: #e6f7f6;
    }


/* 🌿 Flatpickr theme overrides */
.flatpickr-calendar {
    font-size: 11px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #29B5A8;
    border-radius: 6px;
}

    .flatpickr-calendar .flatpickr-months {
        background-color: #29B5A8;
        color: white !important;
        border-bottom: 1px solid #29B5A8;
    }

        .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
        .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
            color: white;
        }

    .flatpickr-calendar .flatpickr-weekday {
        color: #444;
        font-weight: 600;
    }

.flatpickr-day.today {
    border: 1px solid #deeae9 !important;
    background: rgba(33, 147, 138,.1);
    color: #29B5A8;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: rgba(33, 147, 138,.1) !important;
    color: #66A9F6 !important;
    font-weight: bold;
}

.flatpickr-day.weekend {
    color: inherit !important; /* prevent red text */
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #29B5A8;
}

.album__show-more {
    background-color: transparent;
    border: 0px;
    color: #2B988F;
    font-size: .75rem;
}

.copy-btn:hover {
    background-color: #333333 !important;
    color: #35e0cf !important;
    transition: ease-in-out .3s;
}

    .copy-btn:hover i {
        color: #35e0cf !important;
        transition: ease-in-out .3s;
    }

/* Avatar Upload Section */
.profile-avatar-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
}

/* Avatar Preview */
.profile-avatar-upload {
    position: relative;
    display: inline-block;
    text-align: center;
}

/* Hide the default file input */
.profile-avatar-edit input[type="file"] {
    display: none;
}

/* Custom Pencil Icon Button Style for Avatar Upload */
.profile-avatar-edit-icon {
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    transition: background-color 0.3s ease;
    border: 2px solid white;
}

    .profile-avatar-edit-icon:hover {
        background-color: rgba(0, 0, 0, 1);
    }

/* Avatar Preview (circular) */
.profile-avatar-preview {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background-image 0.3s ease;
    display: inline-block;
}

/* Save Changes Button (for form submission) */
.profile-save-avatar-btn {
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

    .profile-save-avatar-btn:hover {
        background-color: #218838;
    }

/* Form input styling */
.profile-form-input {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

/* Fancy Tabs */
.profile-boxed-tab-btn {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .profile-boxed-tab-btn.active {
        background-color: #007bff;
        color: white;
    }

    .profile-boxed-tab-btn:hover {
        background-color: #e0e0e0;
    }

/* Tab content */
.profile-tab-pane {
    display: none;
}

    .profile-tab-pane.active {
        display: block;
    }

/* Focused input */
.profile-focused .profile-form-input {
    border-color: #007bff;
}

.profile-focused label {
    color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .profile-avatar-preview {
        width: 120px;
        height: 120px;
    }

    .card {
        padding: 15px;
    }

    .profile-form-input {
        font-size: 14px;
    }
}

.feature-grid .material-icons {
    vertical-align: middle;
    line-height: 1;
}

.feature-grid .col {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}


.club-settings-table {
    font-size: 0.875rem;
    width: 100%;
    max-width: 600px;
}

    .club-settings-table th {
        width: 35%;
        font-weight: 600;
        color: #6c757d;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        background-color: #f9f9f9;
    }

    .club-settings-table td {
        color: #333;
        padding: 0.5rem 0.75rem;
    }

#reviewPanel table {
    width: 100% !important;
}

.toggle-members-row:hover {
    background-color: #f8f9fa;
}

.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

input.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25);
}

.camera-icon {
    opacity: .5;
    color: white;
    transition: ease-in-out .3s;
}

    .camera-icon:hover {
        opacity: .9;
    }

/* --- Real Rocket Animation --- */
.launch-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #29B5A8;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

    .launch-btn:hover {
        background-color: #21998d;
    }

    .launch-btn .rocket {
        display: inline-block;
        transition: transform 0.3s ease;
        will-change: transform, opacity;
    }

    .launch-btn.launched .rocket {
        animation: rocketZoom 1.4s ease forwards;
    }

@keyframes rocketZoom {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    40% {
        transform: translateY(-40px) rotate(-10deg) scale(1.05);
    }

    70% {
        transform: translateY(-80px) rotate(-20deg) scale(1.1);
    }

    100% {
        transform: translateY(-150px) rotate(-45deg) scale(1.3);
        opacity: 0;
    }
}

.launch-btn.launched {
    background-color: white !important;
    color: #29B5A8 !important;
    border: 1px solid #29B5A8;
}

.screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

    .screen-overlay.show {
        display: flex;
    }

#reviewStars span {
    font-size: 1.2rem !important;
}

.close-btn {
    font-size: .8rem !important;
    text-decoration: none !important;
}

/* target the inner list in your accordion body */
.queue-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    /* if you want to be extra-safe, also reset any nested <li> */
    .queue-item ul li {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: .8rem;
    }

.queue-time-until {
    font-size: 0.72rem;
    color: #9ca3af;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.queue-date {
    width: 60px;
    height: 67px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #191919;
    font-size: 0.7rem;
    border-top: 2px solid white;
    color: white;
} 

    .queue-date .start,
    .queue-date .end {
        line-height: 1.1;
    }

.queue-empty-state {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 16px 28px;
    text-align: center;
    color: var(--rt-muted, #6b7280);
}

.queue-empty-icon {
    font-size: 48px !important;
    color: #2b988f;
    margin-bottom: 12px;
    opacity: 0.85;
}

.queue-empty-title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 6px;
    color: #374151;
}

.queue-empty-sub {
    font-size: 0.85rem;
    margin: 0 0 14px;
    color: var(--rt-muted, #6b7280);
}

.queue-empty-arrow {
    font-size: 28px !important;
    color: #2b988f;
    animation: queue-bounce 1.4s ease-in-out infinite;
}

@keyframes queue-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}


#newThreadForm,
#threadListView,
#forumView {
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    opacity: 1 !important;
}

/* Hide emoji-reaction button except on message hover */
.chat-messages .react-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s;
}

.chat-messages .group:hover .react-btn {
    opacity: 1;
    pointer-events: auto;
}

.tab-content,
.main-container,
.chat-box,
.chat-input {
    overflow: visible !important;
}

#gif-picker-root > div {
    position: fixed !important;
    z-index: 99999 !important;
}

/* Album Info Modal Styles */
.album-modal-cover-wrap {
    background: #222;
    min-height: 360px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.album-modal-bg {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(0.72);
    opacity: 0.35;
}

.album-modal-cover-img {
    position: relative;
    z-index: 2;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 6px 24px rgba(40,40,70,0.19);
    margin: 36px 0 36px 0;
    max-height: 285px;
    object-fit: contain;
}

#albumInfoModal .modal-body {
    position: relative;
    min-height: 380px;
    font-size: .85rem;
}

#albumInfoShowMoreTracks, #albumInfoShowMoreDesc, #albumInfoShowMoreNote {
    cursor: pointer;
    text-decoration: underline;
    color: #1C5D99;
}

#albumInfoTitle {
    line-height: 1.1;
}

#albumInfoModal .modal-content {
    position: relative;
    overflow: visible;
    background: transparent;
}

/* Media explorer modal — wider on md (768–992px) where Bootstrap modal-xl still defaults to 500px */
@media (min-width: 768px) and (max-width: 991.98px) {
    #mediaExplorerModal .modal-dialog {
        max-width: 720px;
    }
}

.album-modal-close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1055;
    width: 40px !important;
    height: 40px !important;
    background-color: #17756D !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(20,20,20,0.15);
    color: #ffffff !important;
    opacity: 1 !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1 !important;
}

    .album-modal-close-btn:hover {
        background-color: #154B46 !important;
        box-shadow: 0 4px 16px rgba(20,20,20,0.25);
    }

    .album-modal-close-btn .material-icons {
        font-size: 20px;
        line-height: 1;
        padding: 0 !important;
        color: currentColor !important;
    }

.album-info-modal-body a {
    color: #17756D;
}

.album-info-modal-body .btn-spotify,
.album-info-modal-body .btn-spotify:hover,
.album-info-modal-body .btn-spotify:focus,
.album-info-modal-body .btn-spotify:active {
    color: #fff !important;
    text-decoration: none;
}


#albumInfoTracklist li {
    margin-left: -20px;
    margin-bottom: 5px;
}

.spoiler:not(.revealed) {
    background: #222 !important;
    color: #222 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.spoiler.revealed {
    color: inherit !important;
    background: none !important;
    cursor: pointer !important;
}

.footer-bar {
    border-top: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    width: 100% !important;
}


.artist-popularity-wrap {
    margin-top: 6px;
    max-width: 260px;
    width: 100%;
}


.artist-popularity-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
    justify-content: flex-start;
}

.artist-header-bar .artist-popularity-wrap {
    margin-left: 0;
}


    .artist-popularity-label .material-icons {
        font-size: 16px;
        color: #ff6a00;
    }

.artist-popularity-bar {
    width: 100%;
    height: 6px;
    background: #e6e6e6;
    border-radius: 999px;
    overflow: hidden;
}

.artist-popularity-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #ff9f40);
    border-radius: 999px;
    transition: width .3s ease;
}


/* ----------------------------------------------------------------------------
   Coming Soon Ribbon
   Sources: style.css, wizard.css, embedded-pick-album.css
   ---------------------------------------------------------------------------- */
.coming-soon-ribbon {
    position: absolute;
    top: -8px; /* style.css */
    right: -8px; /* style.css */
    background: #dc3545;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 5px 8px;
    transform: rotate(45deg);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.coming-soon-ribbon /* wizard override */ {
    top: -3px;
    right: -19px;
}

/* ── My Clubs nav dropdown ──────────────────────────── */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 1px;
    user-select: none;
}
.nav-dropdown-caret {
    font-size: 1.1rem;
    opacity: .65;
    transition: transform .2s;
}
.nav-dropdown:hover .nav-dropdown-caret {
    transform: rotate(180deg);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% - 16px);
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 0;
    z-index: 1050;
    white-space: nowrap;
}
.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}
.nav-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    font-size: .85rem;
    color: #1a1a1a;
    text-decoration: none;
    transition: background .12s;
}
.nav-dropdown-menu .nav-dropdown-item {
    height: auto;
    line-height: normal;
    margin-right: 0;
}
.nav-dropdown-item:hover {
    background: #f5f5f5;
}
/* Header nav has a global "underline on hover" effect for top-level links
   (.header-navigation-links a:hover) — that bleeds into dropdown items
   and adds a teal bottom-border + colour shift inside the menu. Override
   so dropdown rows stay clean (no faux border, no colour swap) — the
   row's own subtle background hover is enough on its own. */
.header-navigation-links .nav-dropdown-menu .nav-dropdown-item:hover {
    box-shadow: none;
    color: inherit;
    background: transparent;
}
.nav-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.nav-dropdown-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    font-weight: 500;
}
.nav-dropdown-item-meta {
    font-size: .72rem;
    color: #999;
    white-space: nowrap;
}
.nav-dropdown-item-badge {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2B988F;
    background: #e6f7f6;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.nav-dropdown-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}
.nav-dropdown-item--muted {
    color: #888;
    font-size: .8rem;
}
.nav-dropdown-item--muted:hover {
    color: #444;
}
.nav-dropdown-empty {
    padding: 8px 14px;
    font-size: .82rem;
    color: #999;
}

/* ── NO TOOLTIPS ON TOUCH DEVICES ────────────────────────────────────────────
   Coarse pointer = touchscreen. Tooltips require hover; touch has none.
   This is a hard block that catches any tooltip regardless of how it fires. */
@media (pointer: coarse) {
    .tooltip,
    .rt-tooltip,
    .bs-tooltip-auto,
    .bs-tooltip-top,
    .bs-tooltip-bottom,
    .bs-tooltip-start,
    .bs-tooltip-end {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ── Media Explorer modals: wider dialog on desktop ──
   The album/film/tv/book explorer modals all ship as Bootstrap modal-lg
   (max-width 800px), which leaves them needlessly squished on desktop.
   Widen them above the mobile breakpoint only — the 991.98px-and-below
   bottom-sheet styling in dash-mobile.css is left completely untouched. */
@media (min-width: 992px) {
    #mediaExplorerModal .modal-dialog,
    #filmExplorerModal  .modal-dialog,
    #tvExplorerModal    .modal-dialog,
    #bookExplorerModal  .modal-dialog {
        max-width: min(969px, 80vw) !important;
    }
}