/* SCOPED STYLES */
#profileTabsApp {
    font-family: Arial, sans-serif;
}

    #profileTabsApp .container {
        display: flex;
    }

    /* LEFT SIDEBAR */
    #profileTabsApp .sidebar {
        background: darkgreen;
        padding: 1rem;
        width: 220px;
    }

        #profileTabsApp .sidebar button {
            display: block;
            width: 100%;
            margin-bottom: 0.5rem;
            padding: 0.75rem;
            color: white;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.3);
            cursor: pointer;
            text-align: left;
        }

            #profileTabsApp .sidebar button:focus-visible {
                outline: 3px solid #FFC14D !important;
                outline-offset: 3px;
            }

            #profileTabsApp .sidebar button[aria-selected="true"] {
                background: white;
                color: darkgreen;
            }

    /* RIGHT CONTENT */
    #profileTabsApp .content {
        flex: 1;
        padding: 1.5rem;
    }

    /* INNER PROFILE TABS */
    #profileTabsApp .inner-tabs {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    #profileTabsApp .profile-tab {
        border: 1px solid #ccc;
        padding: 0.5rem;
        background: #f5f5f5;
        cursor: pointer;
        text-align: center;
        width: 100px;
    }

        #profileTabsApp .profile-tab img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: block;
            margin: 0 auto 0.5rem;
        }

        #profileTabsApp .profile-tab[aria-selected="true"] {
            border: 2px solid darkgreen;
            background: #e6f2e6;
        }

    /* PANELS */
    #profileTabsApp [role="tabpanel"] {
        border: 1px solid #ccc;
        padding: 1rem;
        overflow: auto;
    }

    /* FOCUS (important for accessibility) */
    #profileTabsApp button:focus {
        outline: 3px solid #FFC14D;
        outline-offset: 3px;
    }

    /* FOCUS (important for accessibility) */
    #profileTabsApp button:focus {
        outline: 3px solid #FFC14D;
        outline-offset: 3px;
    }

    #profileTabsApp .card-selector > button:focus {
        outline: 3px solid black !important;
        outline-offset: 3px;
    }




    #profileTabsApp .card-selector {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    #profileTabsApp .card {
        border: 1px solid #ccc;
        padding: 0.75rem;
        cursor: pointer;
        background: #f5f5f5;
        text-align: center;
        max-width: 100px;
    }


    #profileTabsApp .card-selector {
        display: flex;
        flex-wrap: wrap; /* 👈 allows multiple rows */
        gap: 0.75rem;
    }

    #profileTabsApp .card {
        flex: 1 1 150px; /* 👈 magic line */
        max-width: 100%;
        text-align: center;
        min-height: 44px;
    }


        #profileTabsApp .card.active {
            border: 2px solid darkgreen;
            background: #e6f2e6;
        }

        #profileTabsApp .card img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: block;
            margin: 0 auto 0.5rem;
        }

    #profileTabsApp .description {
        white-space: pre-line;
    }

    #profileTabsApp .profile-image {
        max-height: 350px;
        width: auto;
        display: block;
        margin-bottom: 0.25rem;
        margin-right: 1.5rem;
        border-radius: 6px;
        float: left;
    }

/* MOBILE LAYOUT */
@media (max-width: 768px) {

    /* 1. STACK SIDEBAR ABOVE CONTENT */
    #profileTabsApp .container {
        flex-direction: column;
    }

    /* 2. SIDEBAR FULL WIDTH */
    #profileTabsApp .sidebar {
        width: 100%;
    }

        /* 3. KEEP TABS VERTICAL (just ensure it stays column) */
        #profileTabsApp .sidebar [role="tablist"] {
            display: flex;
            flex-direction: column;
        }

        /* OPTIONAL: make tabs fill width nicely */
        #profileTabsApp .sidebar [role="tab"] {
            width: 100%;
            text-align: left;
        }

    /* 4. CARD SELECTOR → VERTICAL */
    #profileTabsApp .card-selector {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* 5. CARDS FULL WIDTH (easier tapping) */
    #profileTabsApp .card {
        flex: none;
        width: 100%;
        height: auto;
        text-align: left;
    }

        #profileTabsApp .card.active,
        #profileTabsApp [role="tab"][aria-selected="true"] {
            background: #e6f2e6;
            border-left: 4px solid darkgreen;
        }

    #profileTabsApp .sidebar {
        margin-bottom: 1rem;
    }

    #profileTabsApp .profile-image {
        max-width: 100%;
        display: block;
        margin-bottom: 0.75rem;
        border-radius: 6px;
    }
}