/* ============================================================
   secscan.it — tema "Security Console" con chiaro/scuro
   Default: CHIARO. Interruttore nella topbar (ricorda la scelta).
   Tipografia IBM Plex. Accento "segnale" verde.
   ============================================================ */

/* ---------- TEMA CHIARO (default) ---------- */
:root{
  --bg:#eef1f6;
  --bg-2:#ffffff;
  --card-1:#ffffff;
  --card-2:#fbfcfe;
  --line:rgba(15,23,42,.10);
  --line-strong:rgba(15,23,42,.18);
  --ink:#101a2c;
  --ink-dim:#3c4a63;
  --muted:#6a7790;

  --signal:#0fb083;
  --signal-dim:#0a8f69;
  --danger:#e23b54;
  --warn:#bd7c0c;
  --info:#2f74e0;

  --accent-soft:rgba(16,176,131,.12);
  --danger-soft:rgba(226,59,84,.10);
  --warn-soft:rgba(189,124,12,.12);
  --info-soft:rgba(47,116,224,.12);

  --track:#e9edf3;
  --topbar-bg:rgba(255,255,255,.9);
  --grid:rgba(15,23,42,.045);
  --glow1:rgba(16,176,131,.08);
  --glow2:rgba(47,116,224,.05);
  --btn-ink:#06241a;
  --sample-bg:#0d1422;
  --sample-ink:#bfe9d8;
  --shadow:0 10px 30px rgba(15,23,42,.07);

  --radius:14px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- TEMA SCURO ---------- */
:root[data-theme="dark"]{
  --bg:#0a0e16;
  --bg-2:#0e1320;
  --card-1:#121826;
  --card-2:#0f1521;
  --line:rgba(148,163,184,.14);
  --line-strong:rgba(148,163,184,.26);
  --ink:#e8eef7;
  --ink-dim:#aab6c8;
  --muted:#76849a;

  --signal:#2ee6a6;
  --signal-dim:#15a87a;
  --danger:#ff5470;
  --warn:#ffb443;
  --info:#5aa8ff;

  --accent-soft:rgba(46,230,166,.10);
  --danger-soft:rgba(255,84,112,.14);
  --warn-soft:rgba(255,180,67,.13);
  --info-soft:rgba(90,168,255,.14);

  --track:#05080e;
  --topbar-bg:linear-gradient(180deg,rgba(18,24,38,.92),rgba(10,14,22,.92));
  --grid:rgba(148,163,184,.13);
  --glow1:rgba(46,230,166,.10);
  --glow2:rgba(90,168,255,.08);
  --btn-ink:#04130d;
  --sample-bg:#05080e;
  --sample-ink:#b9e6d4;
  --shadow:0 12px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;line-height:1.55;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 500px at 80% -10%, var(--glow1), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, var(--glow2), transparent 55%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto, auto, 48px 48px, 48px 48px;
  background-position:0 0, 0 0, -1px -1px, -1px -1px;
  min-height:100vh;
}
a{color:var(--signal-dim);text-decoration:none}
:root[data-theme="dark"] a{color:var(--signal)}
a:hover{filter:brightness(1.1)}
h1{font-size:24px;margin:0 0 16px;letter-spacing:-.02em;font-weight:600}
h2{font-size:14px;margin:30px 0 12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-dim);font-weight:600;font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:13px}
.txt-rosso{color:var(--danger)}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:26px;height:60px;padding:0 26px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--line-strong);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.brand{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(46,200,150,.55);animation:pulse 2.4s infinite}
.brand span{color:var(--signal-dim)}
:root[data-theme="dark"] .brand span{color:var(--signal)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,200,150,.5)}70%{box-shadow:0 0 0 7px rgba(46,200,150,0)}100%{box-shadow:0 0 0 0 rgba(46,200,150,0)}}
.topbar nav{display:flex;gap:2px;flex:1}
.topbar nav a{color:var(--ink-dim);padding:9px 14px;border-radius:9px;font-size:14px;font-weight:500;
  position:relative;transition:.15s}
.topbar nav a:hover{background:var(--accent-soft);color:var(--ink)}
.topbar nav a.active{color:var(--ink);background:var(--accent-soft)}
.topbar nav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--signal);border-radius:2px}
.topbar .user{font-size:13px;color:var(--muted);font-family:var(--mono);display:flex;align-items:center;gap:8px}
.topbar .user a{color:var(--ink-dim)}
.ruolo{background:var(--info-soft);color:var(--info);padding:2px 8px;border-radius:20px;
  font-size:11px;border:1px solid var(--info-soft)}
.theme-btn{background:var(--accent-soft);border:1px solid var(--line-strong);color:var(--ink);
  width:30px;height:30px;border-radius:8px;font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.theme-btn:hover{filter:brightness(1.05)}

main{max-width:1120px;margin:30px auto;padding:0 22px;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
footer{max-width:1120px;margin:48px auto 28px;padding:18px 22px;color:var(--muted);
  font-size:12px;border-top:1px solid var(--line);font-family:var(--mono)}

/* ---------- flash ---------- */
.flash{padding:12px 16px;border-radius:10px;margin:0 0 16px;border:1px solid var(--line-strong);
  background:var(--card-1);display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.flash::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.flash.info::before{background:var(--info)}
.flash.success{border-color:var(--signal)}
.flash.success::before{background:var(--signal)}
.flash.error{border-color:var(--danger)}
.flash.error::before{background:var(--danger)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 12px}
.card{background:linear-gradient(160deg,var(--card-1),var(--card-2));border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;display:block;color:var(--ink);position:relative;
  overflow:hidden;transition:.18s;box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-strong)}
a.card:hover{transform:translateY(-2px);border-color:var(--line-strong);text-decoration:none}
.card .num{font-family:var(--mono);font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em}
.card .lbl{color:var(--muted);font-size:12px;margin-top:8px;text-transform:uppercase;letter-spacing:.1em}
.card.rosso::before{background:var(--danger)}
.card.rosso .num{color:var(--danger)}
.card.giallo::before{background:var(--warn)}
.card.giallo .num{color:var(--warn)}

.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- tabelle ---------- */
table{width:100%;border-collapse:collapse;background:var(--card-1);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--card-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);font-family:var(--mono);font-weight:600}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--accent-soft)}
tr:last-child td{border-bottom:none}
td.path,td.dom{font-family:var(--mono);font-size:13px;word-break:break-all;color:var(--ink-dim)}
td.dom{max-width:240px}

/* ---------- badge esito ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:7px;font-size:11px;font-weight:600;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid transparent}
.b-rosso{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.b-giallo{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft)}
.b-grigio{background:var(--accent-soft);color:var(--ink-dim);border-color:var(--line-strong)}
.b-verde{background:var(--accent-soft);color:var(--signal-dim);border-color:var(--signal)}
:root[data-theme="dark"] .b-verde{color:var(--signal)}
.b-blu{background:var(--info-soft);color:var(--info);border-color:var(--info-soft)}

/* ---------- stato ---------- */
.stato{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}
.s-completata{color:var(--signal-dim);font-weight:600}
:root[data-theme="dark"] .s-completata{color:var(--signal)}
.s-in_corso,.s-in_coda{color:var(--info);font-weight:600}
.s-errore,.s-annullata{color:var(--danger);font-weight:600}
.r-esposto{background:var(--danger-soft)}

/* ---------- bottoni / form ---------- */
button,.btn{cursor:pointer;font-family:var(--sans)}
button[type=submit],.btn{background:linear-gradient(180deg,var(--signal),var(--signal-dim));color:var(--btn-ink);
  border:none;padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:.15s;box-shadow:0 4px 16px var(--accent-soft)}
button[type=submit]:hover,.btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:transparent;color:var(--danger);border:1px solid var(--danger);box-shadow:none}
button.link{background:none;border:none;color:var(--signal-dim);padding:2px 4px;font-size:13px;font-family:var(--mono)}
:root[data-theme="dark"] button.link{color:var(--signal)}
button.link.danger{color:var(--danger)}
.inline-form{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}
input[type=text],input[type=password],select{padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:9px;font-size:14px;background:var(--bg-2);color:var(--ink);font-family:var(--sans)}
input:focus,select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--accent-soft)}
label{display:block;margin:12px 0;color:var(--ink-dim);font-size:14px}
label input[type=text],label input[type=password]{display:block;width:100%;max-width:420px;margin-top:6px}
::placeholder{color:var(--muted);opacity:.7}
.azioni form{display:inline}
td.azioni{white-space:nowrap}

.box{background:linear-gradient(160deg,var(--card-1),var(--card-2));border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;margin:12px 0;box-shadow:var(--shadow)}
.checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin:10px 0}
.checklist label{margin:2px 0;font-size:14px;color:var(--ink)}

/* ---------- filtri & sommario ---------- */
.filtri{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap;align-items:center}
.sommario{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.pill{background:var(--card-1);border:1px solid var(--line-strong);border-radius:30px;padding:6px 14px;
  font-size:13px;font-family:var(--mono);display:inline-flex;align-items:center;gap:8px}

/* ---------- dettaglio finding ---------- */
tr.dettaglio td{padding-top:0}
details summary{cursor:pointer;color:var(--signal-dim);font-size:13px;padding:5px 0;font-family:var(--mono)}
:root[data-theme="dark"] details summary{color:var(--signal)}
.meta{margin:8px 0;font-size:13px;word-break:break-all}
pre.sample{background:var(--sample-bg);color:var(--sample-ink);padding:14px;border-radius:10px;
  border:1px solid var(--line);font-family:var(--mono);font-size:12px;max-height:300px;overflow:auto;
  white-space:pre-wrap;word-break:break-all}

/* ---------- avanzamento scansione ---------- */
.scan-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.progress{position:relative;background:var(--track);border:1px solid var(--line-strong);border-radius:10px;
  height:30px;overflow:hidden;margin:12px 0}
.progress .bar{height:100%;min-width:2px;border-radius:8px 0 0 8px;background-size:32px 32px;
  box-shadow:0 0 18px var(--accent-soft);transition:width .6s ease;
  background-image:linear-gradient(90deg,var(--signal-dim),var(--signal)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 8px,transparent 8px 16px);
  animation:stripes 1s linear infinite}
@keyframes stripes{from{background-position:0 0,0 0}to{background-position:0 0,32px 0}}
.progress .progress-label{position:absolute;inset:0;line-height:30px;text-align:center;font-size:13px;
  font-weight:600;color:var(--ink);font-family:var(--mono)}
.scan-stats{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;font-family:var(--mono)}
.scan-stats span{color:var(--muted)}
.scan-stats strong{color:var(--ink);font-weight:600}

/* ---------- login ---------- */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-box{background:linear-gradient(165deg,var(--card-1),var(--card-2));padding:38px 34px;border-radius:18px;
  width:360px;border:1px solid var(--line-strong);box-shadow:var(--shadow);position:relative;overflow:hidden;
  animation:rise .5s ease both}
.login-box::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);animation:scan 3s ease-in-out infinite}
@keyframes scan{0%,100%{opacity:.3;transform:translateX(-40%)}50%{opacity:1;transform:translateX(40%)}}
.login-box .brand{font-size:26px;margin-bottom:4px}
.login-box .sub{color:var(--muted);font-size:12px;margin:0 0 22px;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.12em}
.login-box button{width:100%;margin-top:10px}

@media(max-width:780px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .topbar{gap:10px;padding:0 14px}
  .topbar nav{gap:0;overflow-x:auto}
  main{margin:18px auto}
  .scan-stats{gap:14px}
}