@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

.topbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.brand-name {
    font-family: 'Lexend', sans-serif;
}

.brand-accent {
    color: var(--mud-palette-primary);
}

.company-label {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.credits-chip {
    background-color: var(--mud-palette-primary-lighten) !important;
    color: var(--mud-palette-primary-darken) !important;
    font-weight: 600;
}

.sidebar {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.nav-section-label {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px !important;
    color: var(--mud-palette-text-secondary);
}

/* --- Surcharges du MudNavMenu pour coller à la maquette (scopé sous .fides-nav) --- */

/* Liens : gris discrets, coins arrondis, padding resserré */
.fides-nav .mud-nav-link {
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    min-height: 0;
}

.fides-nav .mud-nav-link:hover {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Icônes un peu plus petites, alignées avec le texte */
.fides-nav .mud-nav-link .mud-nav-link-icon {
    font-size: 19px;
    min-width: 19px;
    margin-right: 12px;
    color: inherit;
}

/* MudBlazor pose par défaut une barre latérale à gauche sur l'item actif : on la retire
   pour la remplacer par notre style (fond bleu clair + trait à gauche). */
.fides-nav .mud-nav-link.active {
    background-color: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    box-shadow: inset 2px 0 0 0 var(--mud-palette-primary);
}

.fides-nav .mud-nav-link.active::before {
    content: none;
}

.fides-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* En-tête de groupe (ex : "Questions") : même style que les liens simples */
.fides-nav .mud-nav-group > .mud-nav-link {
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
}

/* Enfants de groupe : MudBlazor les indente déjà. On les rend plus légers et on ajoute
   une fine ligne verticale à gauche de chaque lien enfant pour matérialiser le regroupement.
   (Les liens enfants ont un padding-left plus grand que les liens de 1er niveau.) */
.fides-nav .mud-nav-group .mud-nav-link {
    font-weight: 400;
    font-size: 13px;
    margin-left: 8px;
    border-left: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 8px 8px 0;
}

.main-content {
    background-color: var(--mud-palette-background);
}

.dashboard-card,
.score-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.score-card {
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color .15s;
}

.score-card:hover {
    border-color: var(--mud-palette-text-secondary);
}

.score-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.score-max {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-family: 'Inter', sans-serif;
    margin-left: 2px;
}

.reco-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    cursor: pointer;
}

.reco-row:hover {
    background: var(--mud-palette-background);
}

.reco-num {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Ecrans étroits : la sidebar bascule en tiroir superposé (voir MainLayout.razor,
   DrawerVariant.Responsive) ; ici on ajuste juste les à-côtés qui débordent trop en dessous de 600px. */
@media (max-width: 599px) {
    .page-title-row {
        flex-wrap: wrap;
    }
}