/*
 * Thème "Banana DJ" — remplace le look Bootstrap par défaut par une identité banane/musique/DJ
 * (jaune banane + violet/noir façon club). Chargé après bootstrap.min.css et app.css (voir
 * App.razor) : les règles ci-dessous surchargent volontairement certaines classes Bootstrap
 * plutôt que de dépendre des variables CSS internes de Bootstrap (plus fiable entre versions).
 */

:root {
    --banana-yellow: #ffc94a;
    --banana-yellow-dark: #e6a817;
    --banana-yellow-soft: #fff3d6;
    --dj-purple: #2b0a3d;
    --dj-purple-dark: #170422;
    --dj-black: #121014;
    --dj-text-on-yellow: #241300;
}

html, body {
    background-color: #f7f3ea;
}

/* --- Barre latérale : dégradé violet/noir façon club + accent banane --- */
.sidebar {
    background-image: linear-gradient(180deg, var(--dj-purple) 0%, var(--dj-black) 100%);
    border-right: 3px solid var(--banana-yellow);
}

.sidebar-header {
    padding: 1rem 1rem 0.5rem;
}

.brand-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand-mark {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 201, 74, 0.55));
}

.nav-item ::deep .nav-link:hover,
.nav-item ::deep a.nav-link:hover {
    background-color: rgba(255, 201, 74, 0.18);
    color: var(--banana-yellow);
}

.nav-item ::deep a.active {
    background-color: var(--banana-yellow);
    color: var(--dj-text-on-yellow) !important;
    font-weight: 600;
}

/* --- Boutons et liens : jaune banane comme couleur primaire --- */
a, .btn-link {
    color: var(--banana-yellow-dark);
}

.btn-primary {
    color: var(--dj-text-on-yellow);
    background-color: var(--banana-yellow);
    border-color: var(--banana-yellow-dark);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        color: var(--dj-text-on-yellow);
        background-color: var(--banana-yellow-dark);
        border-color: var(--banana-yellow-dark);
    }

.btn-outline-primary {
    color: var(--banana-yellow-dark);
    border-color: var(--banana-yellow-dark);
}

    .btn-outline-primary:hover {
        color: var(--dj-text-on-yellow);
        background-color: var(--banana-yellow);
        border-color: var(--banana-yellow-dark);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--banana-yellow);
}

.form-check-input:checked {
    background-color: var(--dj-purple);
    border-color: var(--dj-purple);
}

/* --- Cartes : petit accent banane sur les titres pour renforcer l'identité visuelle --- */
.card {
    border-top: 3px solid var(--banana-yellow);
    border-radius: 0.5rem;
}

.card h3, .card summary.h3 {
    color: var(--dj-purple);
}

/* --- Sections repliables (Paramètres) : résumé cliquable façon en-tête de carte --- */
details.card > summary {
    cursor: pointer;
    list-style: none;
}

    details.card > summary::-webkit-details-marker {
        display: none;
    }

    details.card > summary::before {
        content: "▸";
        display: inline-block;
        margin-right: 0.5rem;
        color: var(--banana-yellow-dark);
        transition: transform 0.15s ease-in-out;
    }

details[open].card > summary::before {
    transform: rotate(90deg);
}

.top-row {
    background-color: var(--banana-yellow-soft);
    border-bottom: 1px solid var(--banana-yellow);
}