/* ==================================================
   Algemene Utility Classes
================================================== */

/* Sterk opgemaakte tekst */
strong-text {
    color: var(--color-accent-primary);
    font-weight: 700;
}

/* Verborgen formulierelementen */
.hidden-form {
    display: none;
}

/* Fade-out animatie */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease; /* duur van de fade */
}

/* ==================================================
   Status Iconen voor Berichten / Meldingen
================================================== */
.status-icon {
    font-size: 18px;
    color: #7a848a; /* Lichtgrijs voor gelezen berichten */
    transition: color 0.3s ease;
    vertical-align: middle; /* Lijn icoon mooi uit met tekst */
}

.status-icon.unread {
    color: #3a4348; /* Donkerder grijs voor ongelezen berichten */
}

/* Standaard knoptekst */
.button-text {
    margin-left: 0.5rem;
}

/* Verborgen label voor mobiel */
.mobile-status-label {
    display: none;
}

/* ==================================================
   Notificatie Tabel (mobiel responsief)
================================================== */
@media (max-width: 768px) {
    /* Verberg header van de notificatie tabel */
    .notifications-table thead {
        display: none;
    }

    /* Rijen worden kaarten */
    .notifications-table tr {
        display: block;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
        padding: 0.5rem 0;
    }

    /* Cellen als blokken */
    .notifications-table td {
        display: block;
        text-align: right;
        border: none;
        padding-left: 50%;
        position: relative;
    }

    /* Kolomnaam als label voor mobiel */
    .notifications-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /* Status-cel aanpassing */
    .notifications-table td.status-cell:before {
        display: none; /* Verberg standaard label */
    }

    .notifications-table td.status-cell {
        text-align: left;
        padding: 0.5rem 0 0.5rem 0.75rem;
    }

    .mobile-status-label {
        display: inline-block;
        font-weight: bold;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

    /* Actieknoppen centreren */
    .notifications-table td.action-buttons {
        text-align: center;
        padding-left: 0;
    }

    .notifications-table td.action-buttons:before {
        display: none;
    }

    /* Verberg tekst in knoppen */
    .button-text {
        display: none;
    }

    .action-buttons .btn {
        margin: 0 0.2rem;
    }
}

/* ==================================================
   Profiel Header en Avatar
================================================== */

/* Header visueel */
.profile-visual-header {
    height: 175px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
}

/* Overlay boven header */
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    border-radius: 8px;    
}

/* Info bar onder header */
.profile-info-bar {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 0 2rem;
    margin-top: -80px; 
    position: relative;
    z-index: 2;
}

/* Avatar container */
.profile-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid var(--color-surface, #181818);
    object-fit: cover;
    transition: filter 0.3s ease;
}

.avatar-change-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 2rem;
}

/* Hover effecten avatar */
.profile-avatar-container:hover .profile-avatar {
    filter: brightness(0.7);
}

.profile-avatar-container:hover .avatar-change-button {
    opacity: 1;
}

/* ==================================================
   Profiel Info Tekst
================================================== */
.profile-info {
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.profile-username {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.profile-role {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px 0 0 0;
}

/* Achtergrond veranderen knop */
.background-change-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
}

.btn-background {
    background-color: rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}

.btn-background:hover {
    background-color: rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}


/* ==================================================
   Tabs Component - Werkt met jouw HTML structuur
================================================== */
.css-tabs {
    width: 100%;
    color: var(--color-text-primary);
    position: relative;
}

/* radios verbergen */
.css-tabs input[type="radio"] {
    display: none;
}

/* Labels container */
.css-tabs .tab-labels {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}

/* Individuele tab labels */
.css-tabs .tab-labels label {
    cursor: pointer;
    padding: 15px 5px;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-text-secondary);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.15s;
    user-select: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.css-tabs .tab-labels label:hover {
    background: rgba(0,0,0,0.02);
}

/* ==================================================
   Actieve tab label styling
================================================== */
#tab-info:checked ~ .tab-labels label[for="tab-info"],
#tab-playlists:checked ~ .tab-labels label[for="tab-playlists"],
#tab-favorites:checked ~ .tab-labels label[for="tab-favorites"],
#tab-friends:checked ~ .tab-labels label[for="tab-friends"],
#tab-shop:checked ~ .tab-labels label[for="tab-shop"],
#tab-owned:checked ~ .tab-labels label[for="tab-owned"],
#tab-history:checked ~ .tab-labels label[for="tab-history"] {
    color: var(--color-text-primary);
    font-weight: 700;
    border-bottom: 3px solid var(--color-accent-primary);
}

/* ==================================================
   Inhoud van tabs
================================================== */
.css-tabs .tab-content .tab {
    display: none;
    padding: 25px 0;
    font-size: 13px;
    color: var(--color-text-primary);
    animation: fadeIn 0.35s ease;
}

/* Toon juiste inhoud per geselecteerde tab */
#tab-info:checked ~ .tab-content #content-info,
#tab-playlists:checked ~ .tab-content #content-playlists,
#tab-favorites:checked ~ .tab-content #content-favorites,
#tab-friends:checked ~ .tab-content #content-friends,
#tab-shop:checked ~ .tab-content #content-shop,
#tab-owned:checked ~ .tab-content #content-owned,
#tab-history:checked ~ .tab-content #content-history {
    display: block;
}

/* ==================================================
   Kleine layout tweaks
================================================== */
#content-playlists,
#content-favorites {
    margin-top: -10px;
    margin-left: -25px;
}

#content-shop,
#content-owned,
#content-history {
    margin-top: -10px;
    margin-left: 0;
}

/* ==================================================
   Optioneel: card hover effect in de shop
================================================== */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.buy-item-btn {
    width: 70px;
}

/* ==================================================
   Animatie
================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==================================================
   User Roles Styling
================================================== */
.user-role,
.role-admin,
.role-vip,
.role-free {
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid;     /* Zorg dat er altijd een border is */
    border-radius: 6px;
    display: inline-block;  /* Zorg dat border correct rond de tekst zit */
}

/* Kleuren per rol */
.role-admin {
    color: #e74c3c;        /* rood */
    border-color: #e74c3c; /* rode border */
}

.role-vip {
    color: #daa520;        /* goud */
    border-color: #daa520; /* gouden border */
}

.role-free {
    color: #7f8c8d;        /* grijs */
    border-color: #7f8c8d; /* grijze border */
}


/* ==================================================
   Friends Grid
================================================== */
.friends-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.friend-card {
    position: relative;
    text-align: center;
    width: 100px;
}

.friend-avatar-wrapper {
    position: relative;
}

.friend-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.remove-friend-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-actions {
    display: flex;
    gap: 10px;
}


.compact-btn {
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 6px;
    border:none!important;
}


/* ==================================================
   Responsive / Mobiel
================================================== */
@media (max-width: 768px) {

    .action-buttons {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: flex-start;
    }

    .profile-info-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .profile-info {
        display: block!important;
    }

    .profile-header-left {
        order: 0;
        width: 100%;
        padding-bottom: 15px;
    }

    .profile-actions {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .profile-avatar {
        width: 140px;
        height: 140px;
    }

    .profile-info {
        padding-bottom: 0;
    }

    .profile-username {
        font-size: 1.8rem;
    }

    .friend-action {
 margin-left: 0;       /* verwijder ml-3 op mobiel */
        margin-top: 10px;     /* ruimte boven */
        flex-direction: row;  /* of column als je de buttons ook onder elkaar wilt */
    }
}