/* Habillage de /Account/Manage/* (parametres de securite du compte). 12 pages Blazor
   quasi-identiques (scaffolding ASP.NET Identity brut, jamais retouche) partagent exactement
   le meme vocabulaire Bootstrap (h3, form-floating, alert-*, btn-primary/btn-danger, table,
   code/kbd) : un seul fichier global cible ce vocabulaire via .pal-manage-card, plutot que
   dupliquer une CSS quasi identique dans 12 fichiers .razor.css scopes. Charge globalement
   dans App.razor comme pal-cms.css/pal-tournoi-content.css (meme contrainte HeadContent, cf.
   decisions.md [[headcontent-page-routable-ne-rend-pas]]).
   Texte des pages (anglais, scaffolding d'origine) volontairement pas traduit — hors perimetre
   de cette passe, uniquement la charte graphique. */

.pal-manage-shell {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.75rem 1rem 3rem;
}

.pal-manage-hero {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--surface-border);
}

.pal-manage-hero h1 {
    margin: 0 0 .5rem;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.15;
    color: var(--text);
}

.pal-manage-hero p {
    margin: 0;
    color: var(--text-muted);
}

.pal-manage-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* seuil: --bp-desktop-sm */
@media (min-width: 1024px) {
    .pal-manage-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .pal-manage-nav {
        flex: 0 0 14rem;
        position: sticky;
        top: 1.5rem;
    }

    .pal-manage-content {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.pal-manage-nav {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    padding: .75rem;
}

.pal-manage-nav .nav-pills {
    gap: .25rem;
}

.pal-manage-nav .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    font-size: .9rem;
    border-radius: 10px;
    padding: .65rem .9rem;
}

.pal-manage-nav .nav-link:hover {
    background-color: color-mix(in srgb, var(--pal-red) 8%, transparent);
    color: var(--text);
}

.pal-manage-nav .nav-link.active {
    background-color: var(--pal-red);
    color: var(--pal-on-accent);
}

.pal-manage-card {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--pal-card-radius);
    padding: 1.75rem;
    /* Carte isolee (seul contenu principal de la page, meme famille que Login/Register/CMS) :
       ombre alignee sur --pal-card-shadow (app.css), absente jusqu'ici sans raison documentee. */
    box-shadow: var(--pal-card-shadow);
}

.pal-manage-card h3, .pal-manage-card h4 {
    color: var(--text);
    margin-top: 1.5rem;
}

.pal-manage-card h3:first-child, .pal-manage-card h4:first-child {
    margin-top: 0;
}

.pal-manage-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

.pal-manage-card strong {
    color: var(--text);
}

.pal-manage-card ol {
    padding-left: 1.2rem;
}

.pal-manage-card ol > li {
    margin-bottom: 1rem;
}

.pal-manage-card .alert {
    border-radius: 10px;
    border: 1px solid var(--surface-border);
    background-color: var(--surface-bg);
    color: var(--text);
}

.pal-manage-card .alert-danger {
    background-color: color-mix(in srgb, var(--pal-red) 10%, var(--surface-card));
    border-color: color-mix(in srgb, var(--pal-red) 30%, var(--surface-border));
}

.pal-manage-card .alert-warning {
    background-color: var(--pal-warning-bg);
    border-color: color-mix(in srgb, var(--pal-warning) 30%, var(--surface-border));
}

.pal-manage-card .alert-info {
    background-color: color-mix(in srgb, var(--agenda-online) 10%, var(--surface-card));
    border-color: color-mix(in srgb, var(--agenda-online) 30%, var(--surface-border));
}

.pal-manage-card .form-floating {
    margin-bottom: 1rem;
}

.pal-manage-card .form-control {
    background-color: var(--surface-bg);
    border: 1px solid var(--surface-border);
    color: var(--text);
}

.pal-manage-card .form-control:focus {
    background-color: var(--surface-bg);
    color: var(--text);
    border-color: var(--pal-red-mid);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--pal-red) 20%, transparent);
}

.pal-manage-card .form-control:disabled {
    background-color: color-mix(in srgb, var(--text) 4%, var(--surface-bg));
    color: var(--text-muted);
}

.pal-manage-card .form-floating > label {
    color: var(--text-muted);
}

.pal-manage-card .form-floating > .form-control:focus ~ label,
.pal-manage-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--pal-red-mid);
}

.pal-manage-card .text-danger {
    color: var(--pal-red-mid) !important;
    font-size: .85rem;
}

.pal-manage-card .text-success {
    color: var(--pal-success) !important;
}

.pal-manage-card .text-info {
    color: var(--agenda-online);
}

.pal-manage-card .btn {
    /* etait en Bootstrap brut — harmonisation boutons, decisions.md [[boutons-forme-role]]. */
    border-radius: var(--pal-btn-radius);
}

.pal-manage-card .btn-primary {
    background-color: var(--pal-red);
    border-color: var(--pal-red-deep);
    font-weight: 700;
}

.pal-manage-card .btn-primary:hover {
    background-color: color-mix(in srgb, var(--pal-red) 82%, black 18%);
    border-color: var(--pal-red-deep);
}

.pal-manage-card .btn-danger {
    background-color: var(--pal-red-deep);
    border-color: var(--pal-red-deep);
    font-weight: 700;
}

.pal-manage-card .btn-danger:hover {
    background-color: color-mix(in srgb, var(--pal-red-deep) 80%, black 20%);
    border-color: var(--pal-red-deep);
}

.pal-manage-card .btn-link {
    color: var(--pal-red-mid);
}

.pal-manage-card table {
    width: 100%;
    border-collapse: collapse;
}

.pal-manage-card table td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text);
}

.pal-manage-card kbd {
    background-color: var(--surface-bg);
    border: 1px solid var(--surface-border);
    color: var(--pal-red);
    padding: .15rem .4rem;
    border-radius: 6px;
}

.pal-manage-card code, .pal-manage-card .recovery-code {
    display: inline-block;
    background-color: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    padding: .3rem .6rem;
    color: var(--text);
}

/* ShowRecoveryCodes.razor : liste de codes empilee en <div><code></code></div>, dans une
   .row > .col-md-12 dediee (seul endroit ou ce couple de classes Bootstrap apparait dans ces
   pages) — passee en grille sans toucher au systeme .row/.col-xl-6 des formulaires. */
.pal-manage-card .col-md-12 {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.pal-manage-card .col-md-12 > div {
    margin: 0;
}