/* ── Profile sidebar ─────────────────────────────────────────────────────── */
.profile-sidebar {
    --profile-sidebar-avatar: 60px;
}

.profile-sidebar__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--color-grey-dark);
}

.profile-sidebar__avatar {
    flex-shrink: 0;
    width: var(--profile-sidebar-avatar);
    height: var(--profile-sidebar-avatar);
}

.profile-sidebar__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-sidebar__user-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.profile-sidebar__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sidebar nav groups ──────────────────────────────────────────────────── */
.profile-sidebar__nav {
    padding: 0.75rem 0 0.5rem;
}

.profile-sidebar__group-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    padding: 0.75rem 1.75rem 0.375rem;
}

.profile-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Override .theme-light a:not(.btn) from app.css which forces navy on all links */
.profile-sidebar .profile-sidebar__item a {
    display: block;
    padding: 0.5rem 1.75rem;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--hover-speed-fast) ease,
                color var(--hover-speed-fast) ease;
}

.profile-sidebar .profile-sidebar__item a:hover {
    background: rgba(29, 51, 84, 0.06);
    color: var(--color-dark);
    text-decoration: none;
}

.profile-sidebar .profile-sidebar__item.is-active a,
.profile-sidebar .profile-sidebar__item.is-active a:link,
.profile-sidebar .profile-sidebar__item.is-active a:visited {
    background: var(--color-navy);
    color: var(--color-white);
    font-weight: 600;
}

.profile-sidebar .profile-sidebar__item.is-active a:hover,
.profile-sidebar .profile-sidebar__item.is-active a:focus,
.profile-sidebar .profile-sidebar__item.is-active a:active {
    background: var(--color-green);
    color: var(--color-white);
}

.profile-sidebar .profile-sidebar__item a:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-navy);
    border-radius: var(--radius-sm);
}

.profile-sidebar .profile-sidebar__item.is-active a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-white);
}

/* ── Content card header — h1 sized as page title ────────────────────────── */
.md-card-header__title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* ── Content area fade-in ────────────────────────────────────────────────── */
.profile-content-area > .md-card > .md-card-body {
    animation: profileFadeIn 0.2s ease-out both;
}

@keyframes profileFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile: horizontal scrollable tab bar ───────────────────────────────── */
@media (max-width: 767.98px) {
    .profile-sidebar {
        margin-bottom: 1rem;
    }

    .profile-sidebar__identity {
        display: none;
    }

    .profile-sidebar__nav {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .profile-sidebar__nav::-webkit-scrollbar {
        display: none;
    }

    /* Visually hide group labels but keep for screen readers */
    .profile-sidebar__group-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .profile-sidebar__list {
        display: flex;
        gap: 0.25rem;
        flex-shrink: 0;
    }

    /* Add visual gap between groups */
    .profile-sidebar__list + .profile-sidebar__group-label + .profile-sidebar__list {
        margin-left: 0.5rem;
    }

    .profile-sidebar__item {
        scroll-snap-align: start;
    }

    .profile-sidebar__item a {
        white-space: nowrap;
        border-radius: var(--radius-sm);
        padding: 0.625rem 0.75rem;
        font-size: var(--text-xs);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ── Connected accounts (shared by connected-accounts + notifications) ──── */
.connected-accounts-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
}

.connected-accounts-action {
    min-width: 112px;
    text-align: center;
}

/* ── Recovery codes ──────────────────────────────────────────────────────── */
.recovery-codes-page {
    animation: profileFadeIn 0.3s ease-in both;
}

.recovery-codes-container {
    background: var(--color-white);
    border: 2px solid var(--color-grey);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
}

.codes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0;
}

.code-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: var(--color-grey);
    border-radius: var(--radius-sm);
    transition: background var(--hover-speed-fast) ease, transform var(--hover-speed-fast) ease;
}

.code-item:hover {
    background: var(--color-grey-dark);
    transform: translateX(2px);
}

.code-number {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: 0.5rem;
    min-width: 1.5rem;
}

.code-value {
    font-family: 'Courier New', monospace;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: 0.05em;
    user-select: all;
    background: transparent;
    padding: 0;
    border: none;
}

.acknowledgment-form {
    background: var(--color-white);
    border: 2px solid var(--color-green);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    animation: profileSlideUp 0.4s ease-out 0.2s both;
}

@keyframes profileSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Recovery codes: regenerate page ─────────────────────────────────────── */
.regenerate-codes-page {
    animation: profileFadeIn 0.3s ease-in both;
}

.verification-form {
    background: var(--color-white);
    border: 2px solid var(--color-grey);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    animation: profileSlideUp 0.4s ease-out 0.1s both;
}

.mfa-regenerate-warning {
    color: var(--color-dark);
    animation: profileFadeIn 0.4s ease-out 0.2s both;
}

.mfa-regenerate-followup {
    margin-left: 0;
    margin-top: 0.35rem;
    color: var(--color-dark);
    animation: profileFadeIn 0.4s ease-out 0.2s both;
}

@media print {
    body * { visibility: hidden; }
    .recovery-codes-container,
    .recovery-codes-container * { visibility: visible; }
    .recovery-codes-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .code-item {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid var(--color-grey-dark) !important;
        background: var(--color-white) !important;
    }
    @page { margin: 1cm; }
    body { margin: 0; padding: 0; }
}

@media (max-width: 767.98px) {
    .codes-grid {
        grid-template-columns: 1fr;
    }

    .regenerate-codes-page .d-flex.gap-2 {
        flex-direction: column;
    }

    .regenerate-codes-page .d-flex.gap-2 .btn {
        width: 100%;
        margin: 0 0 0.5rem 0 !important;
    }
}

/* ── Tag manager (profile tags tab) ── */
.tag-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tag-row {
    background: var(--color-grey);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    transition: background var(--hover-speed-fast) ease;
}

.tag-row:hover {
    background: var(--color-grey-dark);
}

.tag-row__view {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.tag-row__name {
    flex: 1;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    font-weight: 500;
}

.tag-row__count {
    background: var(--color-teal);
    color: var(--color-white);
    font-size: var(--text-xs);
    border-radius: var(--radius-pill);
    padding: 0.2em 0.55em;
}

.tag-row__actions {
    display: flex;
    gap: 0.375rem;
}

.tag-row__edit {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tag-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.tag-empty-state p {
    margin: 0;
    font-size: var(--text-sm);
}

.tag-inline-error {
    color: var(--color-error);
    font-size: var(--text-xs);
    margin-top: 0.25rem;
}

.tag-row--loading {
    opacity: 0.5;
    pointer-events: none;
}

.profile-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem;
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--color-danger-surface);
}

.profile-danger-zone__content h3 {
    margin-bottom: 0.5rem;
    color: var(--color-danger);
    font-size: var(--text-md);
}

.profile-danger-zone__content p {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.profile-danger-zone__actions .btn {
    margin-right: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .profile-danger-zone {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-danger-zone__actions {
        width: 100%;
    }

    .profile-danger-zone__actions .btn {
        width: 100%;
    }
}

.theme-dark .profile-danger-zone,
body.theme-dark .profile-danger-zone {
    background: var(--color-danger-surface-dark);
}

.theme-dark .profile-danger-zone__content p,
body.theme-dark .profile-danger-zone__content p {
    color: var(--color-on-dark-secondary);
}

@media (prefers-color-scheme: dark) {
    .profile-danger-zone {
        background: var(--color-danger-surface-dark);
    }

    .profile-danger-zone__content p {
        color: var(--color-on-dark-secondary);
    }
}

.profile-pic {
    width: 150px;

    .avatar-wrapper {
        position: relative;
        padding-bottom: 100%;

        /* Tier badge — profile avatar (150px) */
        .tier-badge {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 46px;
            height: 46px;
            font-size: var(--text-md);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Border matches the white profile card surface */
            border: 2.5px solid var(--color-white);
            box-shadow: var(--shadow-md);
            pointer-events: none;
            z-index: 2;
        }

        .tier-badge--essential {
            background: linear-gradient(145deg, var(--color-tier-essential-light), var(--color-tier-essential));
            color: #3A2600; /* dark brown for readability on gold gradient — no token equivalent */
        }

        .tier-badge--expert {
            background: radial-gradient(circle at 35% 30%, var(--color-tier-expert-bg-light), var(--color-tier-expert-bg));
            color: var(--color-tier-expert-accent);
            border-color: var(--color-tier-expert-accent);
        }
    }

    .avatar-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
        transition: filter var(--hover-speed-slow) ease;
    }

    .avatar-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .edit {
        cursor: pointer;
        z-index: 1;

        i {
            color: var(--color-white);
            transition: transform var(--hover-speed-normal) ease;
        }

        &:hover i {
            transform: scale(1.1);
        }
    }

    .spinner-container {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* dark overlay for uploading state */
        border-radius: 50%;

        .spinner-border {
            width: 2rem;
            height: 2rem;
        }
    }

    &[data-state="uploading"] {
        .avatar-image {
            filter: blur(2px);
        }

        .edit {
            display: none;
        }

        .spinner-container {
            display: flex !important; /* override Bootstrap d-none */
        }
    }

    &[data-state="error"] {
        .upload-error {
            display: flex !important; /* override Bootstrap d-none */
            flex-direction: column;
            align-items: center;
            background: rgba(var(--bs-danger-rgb), 0.7);
            padding: 0.5rem;
            border-radius: var(--radius-sm);
            z-index: 2;

            .error-message {
                color: var(--color-white);
                font-size: var(--text-sm);
                margin-bottom: 0.5rem;
            }
        }

        .edit, .spinner-container {
            display: none;
        }
    }
}

/* 2FA and recovery status rows */
.mfa-status-message {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.mfa-status-message i {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    margin-top: 0.1rem;
    font-size: var(--text-md);
    line-height: 1;
    text-align: center;
}

.mfa-status-message p {
    margin: 0;
    color: inherit;
}

.mfa-status-message--with-subtext {
    align-items: flex-start;
}

.mfa-status-message__strong {
    font-weight: 600;
}

.mfa-status-message__subtext {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
}

.mfa-status-message--success i {
    color: var(--color-positive);
}

.mfa-status-message--warning i {
    color: var(--color-warning);
}

.mfa-status-message--info i {
    color: var(--color-navy);
}

.mfa-status-message--danger i {
    color: var(--color-danger);
}

/* Price alerts table column widths */
.alerts-table {
    table-layout: fixed;
    width: 100%;
}

.alerts-table col:nth-child(1) { width: 35%; }
.alerts-table col:nth-child(2) { width: 20%; }
.alerts-table col:nth-child(3) { width: 15%; }
.alerts-table col:nth-child(4) { width: 15%; }
.alerts-table col:nth-child(5) { width: 15%; }

.alerts-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerts-table td:first-child {
    white-space: normal;
    word-break: break-word;
}