/*
 * Comptes locaux et administration : écrans de connexion / invitation / mot de passe et panneau /admin.
 * Jetons de app.css uniquement (aucune couleur en dur) : les paires sont vérifiées par ContrastAudit (clair ET sombre).
 */

/* ---- Écrans publics (connexion, invitation, mot de passe oublié) ---- */
.auth-card { max-width: 440px; margin-inline: auto; padding: 22px; box-shadow: var(--shadow); }
.auth-hint { text-align: center; }
.auth-form .field:last-of-type { margin-bottom: 14px; }
.auth-submit { width: 100%; justify-content: center; }
.auth-links { margin: 12px 0 0; text-align: center; }
.auth-errors { margin: 0; padding-left: 18px; }
.auth-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12px; color: var(--sub); text-transform: uppercase; letter-spacing: .07em; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card .btn.is-loading, .auth-card .btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.auth-card.center { padding: 24px 16px; }

/* ---- Panneau d'administration ---- */
.adm { max-width: 1040px; margin: 0 auto; padding: 22px 18px 44px; }
.adm > * { min-width: 0; }
.adm section.card { margin-bottom: 14px; }
.adm .tpl-h2:first-child { margin-top: 0; }
.adm-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--ctl); background: var(--card); color: var(--sub); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.adm-nav a:hover { background: var(--tint); color: var(--acc-strong); border-color: var(--acc); }
.adm-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.adm-nav a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.adm-back { margin: 0 0 12px; font-size: 13px; }
.adm-back a { display: inline-flex; align-items: center; gap: 4px; }
.adm-figure { font-size: 14px; }
.adm-figure strong { font-size: 22px; }
.adm-empty { text-align: center; padding: 22px; }

/* Filtres */
.adm-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; align-items: end; margin-bottom: 14px; }
.adm-filters .field { margin-bottom: 10px; min-width: 0; }
.adm-f-q { grid-column: span 2; }
.adm-f-go { display: flex; gap: 8px; margin-bottom: 10px; }

/* Tableaux */
.adm-scroll { padding: 0; overflow-x: auto; margin-bottom: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th, .adm-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tbody tr:last-child > * { border-bottom: 0; }
.adm-table thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); white-space: nowrap; }
.adm-table tbody th { font-weight: 400; }
.adm-table tbody tr:hover { background: var(--tint); }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table--plain tbody tr:hover { background: transparent; }
.adm-table a { color: var(--sub); }
.adm-sort { color: inherit; text-decoration: none; }
.adm-sort:hover { color: var(--acc-strong); text-decoration: underline; }
.adm-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.adm-name:hover { color: var(--acc-strong); text-decoration: underline; }
.adm-table small { display: block; color: var(--sub); font-size: 12px; overflow-wrap: anywhere; }
.adm-open { text-align: right; }
.adm-detail { display: inline-block; margin-right: 8px; font-size: 12px; color: var(--sub); }
.adm-table tbody tr:hover .adm-detail, .adm-table tbody tr:hover small { color: var(--sub); }

/* Pastilles d'état (icône + texte : la couleur ne porte jamais seule l'information) */
.adm-state { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; background: var(--card); }
.adm-state--ok { color: var(--ok); }
.adm-state--wait { color: var(--acc-strong); }
.adm-state--off { color: var(--warn); }

/* Pagination (liens) */
.adm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 0; }
.adm-pager .pg-btn { text-decoration: none; }
.adm-pager .pg-of { display: block; }
.pg-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* Fiche */
.adm-id { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; min-width: 0; }
.adm-id .av { width: 52px; height: 52px; border-radius: 50%; background: var(--tint); color: var(--acc-strong); display: grid; place-items: center; font-weight: 600; font-size: 17px; flex: none; }
.adm-id > div { min-width: 0; }
.adm-id .m-h { overflow-wrap: anywhere; margin-bottom: 6px; }
.adm-id-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.adm-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; margin: 0; }
.adm-dl > div { min-width: 0; }
.adm-dl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); margin-bottom: 2px; }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.adm-dl--tight { gap: 8px 16px; margin-top: 6px; }
.adm-actions form { margin: 0; }
.adm-quota { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; align-items: end; }
.adm-quota .field { margin-bottom: 10px; }
.adm-quota-go { margin-bottom: 10px; }
.adm-form { max-width: 520px; }
.adm-danger { border-left: 4px solid var(--warn); }

/* Clés d'API */
.adm-keys { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.adm-key { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.adm-key > div { min-width: 0; flex: 1 1 260px; }
.adm-key.is-off { color: var(--sub); }
.adm-key-name { margin: 0; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.adm-key code { overflow-wrap: anywhere; }
.adm-scopes { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; min-width: 0; }
.adm-scope { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.adm-scope:hover { background: var(--tint); }
.adm-scope input { margin-top: 3px; accent-color: var(--acc-strong); }
.adm-scope span { display: grid; gap: 1px; min-width: 0; }
.adm-scope small { color: var(--sub); font-size: 12px; }
.adm-scope:hover small { color: var(--sub); }
.adm-days { max-width: 260px; }

/* Secret à usage unique (lien d'invitation, clé) */
.adm-secret { border: 2px solid var(--acc); border-radius: 12px; background: var(--card); padding: 14px 16px; margin-bottom: 16px; }
.adm-secret .tpl-h2 { margin-top: 0; }
.adm-warn { color: var(--warn); font-size: 13.5px; margin: 0 0 10px; }
.adm-secret-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-code { flex: 1 1 260px; min-width: 0; background: var(--tint); color: var(--ink); border: 1px solid var(--acc); border-radius: 9px; padding: 9px 11px; font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.adm-code:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* Étroit : les tableaux deviennent des fiches empilées (aucun défilement horizontal à 400 px) */
@media (max-width: 700px) {
    .adm { padding-inline: 12px; }
    .adm-f-q { grid-column: auto; }
    .adm-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .adm-table--cards, .adm-table--cards tbody, .adm-table--cards tr, .adm-table--cards th, .adm-table--cards td { display: block; width: 100%; }
    .adm-table--cards tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
    .adm-table--cards tbody tr:last-child { border-bottom: 0; }
    .adm-table--cards th, .adm-table--cards td { border-bottom: 0; padding: 4px 14px; }
    .adm-table--cards td[data-label], .adm-table--cards th[data-label]:not(:first-child) { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: right; }
    .adm-table--cards [data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sub); text-align: left; flex: none; }
    .adm-table--cards tbody th[data-label]:first-child { display: block; text-align: left; }
    .adm-table--cards tbody th[data-label]:first-child::before { display: block; }
    .adm-open { text-align: left; }
    .adm-table--plain td, .adm-table--plain th { padding: 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-card .btn { transition: none; }
}

/* Icône + libellé d'un bouton (état « inactif » du motif .ld) : alignés avec un espace, comme .btn */
.adm .ld-idle, .auth-card .ld-idle { display: inline-flex; align-items: center; gap: 6px; }

/* Budget IA mensuel : jauge du tableau de bord (décorative : le pourcentage est écrit en toutes lettres à côté). */
.budget-gauge { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 8px 0 14px; }
.budget-gauge > span { display: block; height: 100%; background: var(--acc-strong); }
.budget-gauge.is-alert > span { background: var(--warn); }