/* ============================================================
   Account & Trainer area — responsive helpers (mobile-first)
   ============================================================ */

/* Avatar utility: small avatar on mobile, restore xxl on xl screens */
.avatar.avatar-xl-xxl {
    width: 4rem;
    height: 4rem;
}

.avatar.avatar-xl-xxl .avatar-img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
}

@media (min-width: 1200px) {
    .avatar.avatar-xl-xxl {
        width: 7rem;
        height: 7rem;
    }
    .avatar.avatar-xl-xxl .avatar-img {
        width: 7rem;
        height: 7rem;
    }
}

/* Sidebar menu: active item visual */
.account-menu .list-group-item.active,
.trainer-menu .list-group-item.active {
    background-color: var(--color-pink-16, #faf5f3);
    color: var(--color-red, #a14947);
    font-weight: 600;
    border-left: 3px solid var(--color-red, #a14947);
}

.account-menu .list-group-item,
.trainer-menu .list-group-item {
    border: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 0.4rem;
}

.account-menu .list-group-item:hover,
.trainer-menu .list-group-item:hover {
    background-color: var(--color-pink-16, #faf5f3);
}

/* Skill list responsive: progress fills available width on mobile */
.skill-list {
    list-style: disc;
}

.skill-list .skill-progress {
    width: 100%;
}

@media (min-width: 576px) {
    .skill-list .skill-progress {
        width: 170px;
        flex-shrink: 0;
    }
}

/* Skills radar: never overflow its container */
.skills-radar {
    max-width: 100%;
}

.skills-radar canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* Account section breathing room on small screens */
@media (max-width: 575.98px) {
    section.pt-0 {
        padding-bottom: 1.5rem;
    }

    .account-banner h1,
    .trainer-banner h1 {
        font-size: 1.15rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }
}

/* Trainer banner: clip bg image height on small screens */
.trainer-banner .h-80px {
    height: 80px;
}