/* Authia - styles des pages publiques et admin */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card {
    background: #ffffff;
    color: #1e293b;
    width: 100%;
    max-width: 440px;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
}

.card .logo {
    font-size: 28px;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.card p {
    color: #475569;
    line-height: 1.55;
    font-size: 15px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 18px 0 6px;
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color .15s;
}

input:focus { border-color: #2563eb; }

button, .btn {
    display: inline-block;
    width: 100%;
    margin-top: 22px;
    padding: 13px 18px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background .15s;
}
button:hover, .btn:hover { background: #1d4ed8; }

.btn-green { background: #16a34a; }
.btn-green:hover { background: #15803d; }
.btn-red { background: #dc2626; }
.btn-red:hover { background: #b91c1c; }
/* Suppression définitive : bouton discret (contour) pour ne pas rivaliser avec les actions principales. */
.btn-ghost-red { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-ghost-red:hover { background: #fef2f2; color: #991b1b; }
.btn-sm { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; }

.spinner {
    width: 46px; height: 46px;
    margin: 0 auto 22px;
    border: 5px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Icône de statut rassurante (coche verte / croix) */
.status-icon {
    width: 72px; height: 72px;
    line-height: 72px;
    margin: 4px auto 20px;
    border-radius: 50%;
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    animation: pop .35s ease-out;
}
.status-icon-ok { background: #16a34a; }
.status-icon-no { background: #dc2626; }
@keyframes pop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

/* Petite mention « vérification en cours » discrète (point qui pulse) */
#authia-poll-note::after {
    content: " ●";
    color: #16a34a;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }

.muted { color: #94a3b8; font-size: 13px; }
.error { color: #dc2626; font-size: 14px; margin-top: 12px; }
.success { color: #16a34a; }
.center { text-align: center; }

/* ---- Admin console ---- */
.admin-wrap {
    align-items: flex-start;
}
.admin {
    background: #fff;
    color: #1e293b;
    width: 100%;
    max-width: 1280px;
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.admin h1 { margin: 0 0 4px; font-size: 22px; }
.admin .topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }

/* Le tableau des appareils (9 colonnes) est plus large que la carte sur petits
   écrans : on le fait défiler DANS son propre conteneur au lieu de le laisser
   crever la carte et provoquer un scroll horizontal de toute la page. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-wrap table { min-width: 960px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
th { color: #64748b; font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
tr:hover td { background: #f8fafc; }

/* Écrans étroits : la carte prend toute la largeur, en-tête empilé. */
@media (max-width: 640px) {
    .admin { padding: 16px; border-radius: 12px; }
    .admin .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.badge { display:inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight:700; }
.badge-unverified { background:#f1f5f9; color:#64748b; }
.badge-pending  { background:#fef3c7; color:#92400e; }
.badge-approved { background:#dcfce7; color:#166534; }
.badge-denied   { background:#fee2e2; color:#991b1b; }
.badge-revoked  { background:#e2e8f0; color:#475569; }

.ip-changed { color:#dc2626; font-weight:700; }
.actions form { display:inline; }

/* Regroupement par personne (« points de connexion »). */
tbody.person { border-top: 2px solid #cbd5e1; }
tbody.person:first-of-type { border-top: none; }
.person-row td { background: #f1f5f9; padding: 12px; }
.person-email { font-weight: 700; font-size: 15px; color: #0f172a; }
.person-meta { color: #64748b; font-size: 12px; margin-left: 10px; }

/* Éditeur de portée « par personne » dans l'en-tête de groupe. */
.portee-form { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.portee-label { font-size: 12px; color: #475569; font-weight: 600; padding-top: 6px; }
.portee-select { min-width: 340px; max-width: 460px; font-size: 12px; padding: 4px; border: 1px solid #cbd5e1; border-radius: 6px; }
.portee-actuel { font-size: 12px; color: #475569; align-self: center; }
.portee-actuel b { color: #0f172a; }

/* Point de connexion périmé (cookie écrasé par une re-soumission du même appareil). */
tr.point-superseded td { opacity: .5; background: #f8fafc; }
.superseded-note { color:#94a3b8; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }