/* ==========================================================================
   CogniCoachAI — Personalization UI
   Quick Start card, sport switcher, onboarding + advanced settings modals.
   Reuses variables/tokens from styles/style.css.
   ========================================================================== */

.mt-2 {
    margin-top: 10px;
}

/* -- Quick Start card ---------------------------------------------------- */

.quick-start-card {
    border-color: rgba(255, 109, 5, 0.35);
}

.quick-start-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.quick-start-sub {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.quick-start-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.quick-start-full {
    grid-column: 1 / -1;
}

@media (max-width: 700px) {
    .quick-start-grid {
        grid-template-columns: 1fr;
    }
}

.quick-start-hint {
    text-align: center;
    color: var(--text-gray);
    font-size: 0.8rem;
    margin-top: 14px;
}

/* -- Chip buttons (compact, inline) --------------------------------------- */

.btn-chip {
    padding: 8px 16px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    border: 2px solid var(--primary-blue);
    background: rgba(5, 155, 255, 0.12);
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-chip:hover {
    background: var(--primary-blue);
    color: var(--text-white);
}

.btn-chip-danger {
    border-color: #ff3232;
    background: rgba(255, 50, 50, 0.12);
    color: #ff3232;
}

.btn-chip-danger:hover {
    background: #ff3232;
    color: var(--text-white);
}

/* -- Sport switcher --------------------------------------------------------- */

.sport-switcher {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255, 109, 5, 0.08);
    border: 1px solid rgba(255, 109, 5, 0.25);
    border-radius: 14px;
}

.sport-switcher-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sport-switcher-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-gray);
}

.sport-switcher-current {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-orange);
}

.sport-switcher-level {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(5, 155, 255, 0.15);
    color: var(--primary-blue);
    text-transform: capitalize;
}

.sport-switcher-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 109, 5, 0.2);
}

.sport-switcher-actions {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.sport-switcher-actions .btn {
    padding: 12px 22px;
    font-size: 0.85rem;
}

/* -- Advanced Setup collapsible --------------------------------------------- */

.advanced-setup {
    margin-bottom: 30px;
}

.advanced-setup summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 24px;
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(5, 155, 255, 0.2);
    border-radius: 14px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-orange);
    transition: all 0.2s ease;
}

.advanced-setup summary::-webkit-details-marker {
    display: none;
}

.advanced-setup summary::before {
    content: '▸ ';
}

.advanced-setup[open] summary::before {
    content: '▾ ';
}

.advanced-setup summary:hover {
    border-color: rgba(5, 155, 255, 0.5);
}

.advanced-setup-inner {
    padding-top: 24px;
}

/* -- Modal overlay (onboarding + advanced settings) ------------------------- */

.profile-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

.profile-modal {
    max-width: 640px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    margin: auto;
    animation: fadeInUp 0.3s ease-out;
}

.profile-modal-sub {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.profile-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 20px;
}

/* Settings modal footer — .profile-modal--footer turns the modal into a
   flex column so the footer is a normal flex item pinned below the
   scrollable body, instead of relying on sticky positioning. This
   guarantees the footer always sits flush with the modal's true bottom
   edge, with no leftover gap regardless of scroll position. */
.profile-modal--footer {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.settings-modal-scroll {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 40px 40px 20px 40px;
}

.settings-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 40px;
    background: linear-gradient(135deg, rgba(255, 109, 5, 0.95), rgba(190, 74, 0, 0.95));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.settings-modal-footer .btn {
    padding: 10px 22px;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Save Changes reads as the primary "commit" action, so it gets a
   dedicated solid-blue treatment here instead of the site-wide
   blue-to-orange .btn-primary gradient (which would blend into this
   orange footer). Discard Changes is untouched — still the standard
   .btn-secondary look. */
.settings-modal-footer .btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), #0369c9);
    box-shadow: 0 0 20px var(--glow-blue);
}

.settings-modal-footer .btn-primary:hover {
    box-shadow: 0 0 30px var(--glow-blue);
}

@media (max-width: 768px) {
    .settings-modal-scroll {
        padding: 25px 25px 14px 25px;
    }
    .settings-modal-footer {
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .settings-modal-scroll {
        padding: 18px 18px 10px 18px;
    }
    .settings-modal-footer {
        padding: 10px 18px;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    .settings-modal-footer .btn {
        padding: 9px 16px;
        font-size: 0.72rem;
    }
}

.profile-hint {
    color: var(--text-gray);
    font-size: 0.78rem;
    margin-top: 8px;
}

.checkbox-row {
    display: flex;
    align-items: center;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--text-white) !important;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-blue);
}

/* -- Advanced Settings sections & table -------------------------------------- */

.settings-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(5, 155, 255, 0.15);
}

/* The footer's own top border/padding already separates it from the
   content above, so the last section doesn't need its own trailing
   margin/padding on top of that — that combination was the awkward
   extra gap between "Reset All Preferences" and the footer bar. */
.settings-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--secondary-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.settings-table-wrap {
    overflow-x: auto;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.settings-table th,
.settings-table td {
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-table th {
    color: var(--text-gray);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.settings-table select {
    padding: 6px 10px;
    width: auto;
    font-size: 0.8rem;
}

.settings-section.text-center .btn {
    margin: 6px;
}