/* =========================================================================
   Console Super-Admin — tema "Control Room"
   Scuro, tecnico, da centrale operativa. Tipografia IBM Plex auto-ospitata.
   Accessibilità: contrasto AA, focus-visible, prefers-reduced-motion.
   ========================================================================= */

@font-face { font-family:'Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/plex-mono-500.woff2') format('woff2'); }
@font-face { font-family:'Plex Cond'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/plex-cond-600.woff2') format('woff2'); }
@font-face { font-family:'Plex Cond'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/plex-cond-700.woff2') format('woff2'); }

:root {
    --font-sans:'Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-cond:'Plex Cond', var(--font-sans);
    --font-mono:'Plex Mono', ui-monospace, "Cascadia Code", Consolas, monospace;

    --bg:#070a10;
    --panel:#0f1620;
    --panel-2:#131c28;
    --panel-hi:#18222f;
    --line:rgba(158,178,208,.12);
    --line-2:rgba(158,178,208,.22);

    --text:#eaf1f8;
    --muted:#a7b7ca;          /* AA su pannelli */
    --faint:#728196;

    --accent:#f6b73c;         /* ambra segnale */
    --accent-2:#ffcd6b;
    --accent-ink:#140d00;
    --ok:#38d39b;
    --ok-bg:rgba(56,211,155,.12);
    --warn:#f6b73c;
    --warn-bg:rgba(246,183,60,.12);
    --danger:#ff6d64;
    --danger-bg:rgba(255,109,100,.12);
    --info:#63c9ff;

    --r:14px; --r-sm:9px; --r-xs:6px;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9);
    --ring:0 0 0 2px var(--accent), 0 0 0 5px rgba(246,183,60,.18);
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
    margin:0;
    font-family:var(--font-sans);
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.5;
}

/* Atmosfera: griglia blueprint + bagliore, dietro tutto, sotto i pannelli */
body::before {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(158,178,208,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(158,178,208,.045) 1px, transparent 1px);
    background-size:44px 44px, 44px 44px;
    mask-image:radial-gradient(120% 90% at 80% -10%, #000 40%, transparent 78%);
}
body::after {
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(90% 60% at 85% -20%, rgba(246,183,60,.10), transparent 60%),
        radial-gradient(70% 50% at -10% 0%, rgba(99,201,255,.06), transparent 60%);
}

/* Accessibilità -------------------------------------------------------- */
a { color:var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline:none;
    box-shadow:var(--ring);
    border-radius:var(--r-xs);
}

.skip-link {
    position:absolute; left:12px; top:-48px; z-index:100;
    background:var(--accent); color:var(--accent-ink);
    padding:9px 14px; border-radius:var(--r-sm); font-weight:600;
    transition:top .18s ease;
}
.skip-link:focus { top:12px; text-decoration:none; }

.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =====================  HEADER / HUD  ================================== */
.pa-header {
    position:relative; z-index:2;
    display:flex; align-items:center; gap:24px;
    padding:14px 26px;
    background:linear-gradient(180deg, rgba(20,28,40,.92), rgba(12,18,26,.92));
    border-bottom:1px solid var(--line-2);
    backdrop-filter:blur(8px);
}
.pa-brand {
    display:flex; align-items:center; gap:11px;
    font-family:var(--font-cond); font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; font-size:14px; color:var(--text);
}
.pa-mark {
    width:26px; height:26px; border-radius:7px; flex:none;
    background:conic-gradient(from 210deg, var(--accent), #b97f16 55%, var(--accent) 100%);
    box-shadow:0 0 0 1px rgba(246,183,60,.35), 0 6px 18px -6px rgba(246,183,60,.6);
    position:relative;
}
.pa-mark::after {
    content:""; position:absolute; inset:6px; border-radius:3px;
    background:var(--bg);
    box-shadow:inset 0 0 0 1.5px rgba(246,183,60,.85);
}
.pa-brand .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2.4s ease-in-out infinite; }
.pa-nav { display:flex; gap:6px; align-items:center; margin-left:8px; }
.pa-nav a {
    color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.02em;
    padding:8px 13px; border-radius:var(--r-sm); text-decoration:none;
    border:1px solid transparent;
}
.pa-nav a:hover { color:var(--text); background:rgba(158,178,208,.06); text-decoration:none; }
.pa-nav a.active { color:var(--accent-2); background:rgba(246,183,60,.10); border-color:rgba(246,183,60,.28); }
.pa-user { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); font-family:var(--font-mono); }

/* =====================  MAIN  ========================================= */
.pa-main { position:relative; z-index:1; padding:30px 26px 60px; max-width:1120px; margin:0 auto; }
.pa-main > * { animation:rise .5s cubic-bezier(.2,.7,.2,1) both; }
.pa-main > *:nth-child(2) { animation-delay:.05s; }
.pa-main > *:nth-child(3) { animation-delay:.10s; }
.pa-main > *:nth-child(4) { animation-delay:.15s; }

h1 {
    font-family:var(--font-cond); font-weight:700; letter-spacing:.01em;
    font-size:26px; margin:0 0 18px; color:var(--text);
}
h1 .pa-muted { font-family:var(--font-mono); font-weight:400; }

.pa-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.pa-toolbar h1 { margin:0; }
.pa-muted { color:var(--muted); font-size:13px; }
.pa-code { font-family:var(--font-mono); font-size:12.5px; color:#cdd8e6; }

/* =====================  CARD  ========================================= */
.pa-card {
    position:relative; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--r);
    padding:22px; margin-bottom:20px; box-shadow:var(--shadow); overflow:hidden;
}
.pa-card::before { content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(246,183,60,.5), transparent); }
.pa-card h1 { font-size:16px; margin:0 0 14px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

/* =====================  TABLE  ======================================== */
.pa-table {
    width:100%; border-collapse:separate; border-spacing:0;
    background:var(--panel); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
.pa-table th {
    text-align:left; padding:13px 14px; background:var(--panel-2);
    border-bottom:1px solid var(--line-2);
    font-family:var(--font-mono); font-size:11px; font-weight:500;
    text-transform:uppercase; letter-spacing:.13em; color:var(--faint);
}
.pa-table td { padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; color:var(--text); }
.pa-table tbody tr:last-child td { border-bottom:none; }
.pa-table tbody tr { transition:background .12s ease; }
.pa-table tbody tr:hover { background:rgba(158,178,208,.045); }

/* =====================  BADGE  ======================================== */
.pa-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 10px 3px 8px; border-radius:999px;
    font-family:var(--font-mono); font-size:11.5px; font-weight:500;
    letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent;
}
.pa-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }
.pa-badge.active { color:var(--ok); background:var(--ok-bg); border-color:rgba(56,211,155,.3); }
.pa-badge.suspended { color:var(--warn); background:var(--warn-bg); border-color:rgba(246,183,60,.3); }
.pa-badge.off { color:var(--danger); background:var(--danger-bg); border-color:rgba(255,109,100,.3); }

/* =====================  BUTTONS  ====================================== */
.pa-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:38px; padding:8px 14px; cursor:pointer; text-decoration:none;
    font-family:var(--font-sans); font-size:13px; font-weight:600;
    color:var(--text); background:var(--panel-hi);
    border:1px solid var(--line-2); border-radius:var(--r-sm);
    transition:background .14s ease, border-color .14s ease, transform .06s ease;
}
.pa-btn:hover { background:#1e2939; border-color:rgba(158,178,208,.34); text-decoration:none; }
.pa-btn:active { transform:translateY(1px); }
.pa-btn.primary { background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:var(--accent-ink); border-color:rgba(246,183,60,.6); box-shadow:0 8px 22px -12px rgba(246,183,60,.8); }
.pa-btn.primary:hover { background:linear-gradient(180deg, #ffd67e, var(--accent-2)); border-color:var(--accent-2); }
.pa-btn.danger { color:var(--danger); border-color:rgba(255,109,100,.4); background:rgba(255,109,100,.06); }
.pa-btn.danger:hover { background:rgba(255,109,100,.14); border-color:var(--danger); }
.pa-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* =====================  FORMS  ======================================== */
.pa-form label { display:block; margin:16px 0 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pa-form input[type=text], .pa-form input[type=email], .pa-form input[type=password], .pa-form input[type=search], input[type=search] {
    width:100%; max-width:440px; padding:11px 13px;
    font-family:var(--font-sans); font-size:14px; color:var(--text);
    background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm);
    transition:border-color .14s ease, box-shadow .14s ease;
}
.pa-form input::placeholder, input[type=search]::placeholder { color:var(--faint); }
.pa-form input:hover, input[type=search]:hover { border-color:rgba(158,178,208,.34); }
.pa-form input[disabled] { opacity:.55; cursor:not-allowed; }

/* =====================  ALERTS  ======================================= */
.pa-alert { padding:12px 15px; border-radius:var(--r-sm); margin-bottom:20px; font-size:14px; border:1px solid transparent; }
.pa-alert.ok { color:#8ff0c8; background:var(--ok-bg); border-color:rgba(56,211,155,.35); }
.pa-alert.err { color:#ffb3ad; background:var(--danger-bg); border-color:rgba(255,109,100,.35); }

/* =====================  PAGER  ======================================== */
.pa-pager { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }

/* =====================  AUTH (login / MFA)  =========================== */
.auth-body { display:grid; place-items:center; min-height:100vh; padding:24px; }
.auth-wrap { position:relative; z-index:1; width:100%; max-width:420px; animation:rise .55s cubic-bezier(.2,.7,.2,1) both; }
.auth-kicker {
    display:flex; align-items:center; gap:9px; justify-content:center;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--faint); margin-bottom:16px;
}
.auth-kicker .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2.4s ease-in-out infinite; }
.auth-card {
    position:relative; background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line-2); border-radius:18px; padding:34px 30px 30px;
    box-shadow:0 30px 80px -40px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.04) inset;
    overflow:hidden;
}
.auth-card::before { content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
    background:linear-gradient(90deg, transparent, rgba(246,183,60,.7), transparent); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand .pa-mark { width:34px; height:34px; }
.auth-brand h1 { font-family:var(--font-cond); font-weight:700; font-size:21px; letter-spacing:.01em; margin:0; text-transform:none; color:var(--text); }
.auth-brand .sub { font-family:var(--font-mono); font-size:11.5px; color:var(--faint); letter-spacing:.08em; margin-top:2px; }
.auth-card form { margin:0; }
.auth-card label { display:block; margin:16px 0 6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password], .auth-card input[inputmode=numeric] {
    width:100%; padding:12px 14px; font-family:var(--font-sans); font-size:15px; color:var(--text);
    background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm);
    box-sizing:border-box; transition:border-color .14s ease, box-shadow .14s ease;
}
.auth-card input[inputmode=numeric] { font-family:var(--font-mono); letter-spacing:.3em; font-size:19px; text-align:center; }
.auth-card .primary, .auth-card button.primary { width:100%; margin-top:22px; min-height:46px; font-size:15px; }
.auth-hint { margin-top:16px; text-align:center; font-size:13px; color:var(--muted); }
.auth-mono { font-family:var(--font-mono); font-size:13px; word-break:break-all; color:var(--accent-2); background:rgba(246,183,60,.08); border:1px solid rgba(246,183,60,.22); padding:8px 10px; border-radius:var(--r-sm); }
.auth-qr { display:flex; justify-content:center; margin:18px 0; }
.auth-qr svg { width:190px; height:190px; background:#fff; padding:10px; border-radius:12px; box-shadow:0 10px 30px -12px rgba(0,0,0,.8); }
.auth-choice { display:block; margin:8px 0; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--bg); cursor:pointer; transition:border-color .14s ease, background .14s ease; }
.auth-choice:hover { border-color:rgba(246,183,60,.4); background:rgba(246,183,60,.05); }

/* Compat: vecchie classi login usate altrove */
.login-card { max-width:420px; margin:0 auto; }
.alert { padding:12px 15px; border-radius:var(--r-sm); margin-bottom:16px; font-size:14px; }
.alert-error { color:#ffb3ad; background:var(--danger-bg); border:1px solid rgba(255,109,100,.35); }
.muted { color:var(--muted); }
button.primary, .primary {
    display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
    font-family:var(--font-sans); font-weight:600; font-size:14px; min-height:44px; padding:10px 16px;
    color:var(--accent-ink); background:linear-gradient(180deg, var(--accent-2), var(--accent));
    border:1px solid rgba(246,183,60,.6); border-radius:var(--r-sm);
}