/* ============================================================================
 * TRUscan — scanner.css
 * Identité TRUvector. Thème clair + sombre. Responsive. Accessible.
 * © TRUvector
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#ffffff; --bg1:#f8f9fc; --bg2:#f1f3f8; --bg3:#e8ecf4;
  --line:#dde2ee; --line2:#c8cedf;
  --text:#1a2035; --body:#3d4a62; --muted:#7a8aaa; --light:#a0adcc;
  --accent:#1a6ef5; --accent2:#6c5ce7;
  --crit:#d62828; --imp:#e07c00; --med:#b08800; --ok:#0a7c4a; --info:#0277b5;
  --crit-bg:#fef2f2; --imp-bg:#fff7ed; --ok-bg:#f0fdf7; --info-bg:#eff8ff;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',system-ui,sans-serif; --r:8px;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 10px 30px rgba(16,24,40,.08);
}
:root[data-theme="dark"] {
  --bg:#0f1628; --bg1:#161f36; --bg2:#1d2842; --bg3:#26324f;
  --line:#2a3550; --line2:#3a4668;
  --text:#e8ecf4; --body:#b4c0d8; --muted:#7a8aaa; --light:#5a6788;
  --accent:#4d8bff; --accent2:#8b7cf0;
  --crit:#f87171; --imp:#fb923c; --med:#fbbf24; --ok:#34d399; --info:#38bdf8;
  --crit-bg:#2a1518; --imp-bg:#2a1f12; --ok-bg:#0f2a1e; --info-bg:#0f2235;
  --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-lg:0 10px 30px rgba(0,0,0,.4);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:14px; line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
code { font-family:var(--mono); font-size:.85em; background:var(--bg2); padding:2px 5px; border-radius:4px; }

/* ---- Topbar ------------------------------------------------------------- */
.topbar {
  display:flex; align-items:center; gap:14px; padding:10px 20px;
  background:linear-gradient(135deg,#0f1628,#1a2a5e); color:#fff;
  position:sticky; top:0; z-index:50; box-shadow:var(--shadow);
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-mark {
  width:30px; height:30px; background:linear-gradient(135deg,#1a6ef5,#6c5ce7);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
}
.logo-text { font-family:var(--mono); font-weight:700; letter-spacing:1px; font-size:15px; }
.logo-text .ver { font-size:9px; color:#93c5fd; margin-left:4px; }
.topnav { display:flex; gap:2px; margin-left:16px; flex-wrap:wrap; }
.topnav button {
  background:transparent; border:none; color:rgba(255,255,255,.65); padding:7px 12px;
  border-radius:6px; font-size:12.5px; font-weight:500; display:flex; align-items:center; gap:5px;
}
.topnav button:hover { background:rgba(255,255,255,.08); color:#fff; }
.topnav button.active { background:rgba(255,255,255,.14); color:#fff; }
.topnav .badge { background:var(--crit); color:#fff; font-size:9px; padding:1px 5px; border-radius:8px; font-family:var(--mono); }
.topbar-right { margin-left:auto; display:flex; gap:6px; align-items:center; }
.icon-btn { background:rgba(255,255,255,.08); border:none; color:#fff; width:34px; height:34px; border-radius:7px; font-size:15px; }
.icon-btn:hover { background:rgba(255,255,255,.18); }

/* ---- URL bar ------------------------------------------------------------ */
.urlbar { padding:16px 20px; background:var(--bg1); border-bottom:1px solid var(--line); }
.urlbar-row { display:flex; gap:10px; align-items:center; max-width:1100px; margin:0 auto; flex-wrap:wrap; }
.urlbar input[type=text] {
  flex:1; min-width:220px; padding:11px 14px; border:1px solid var(--line2); border-radius:var(--r);
  font-size:14px; background:var(--bg); color:var(--text); font-family:var(--mono);
}
.urlbar input[type=text]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,110,245,.12); }
.urlbar select {
  padding:11px 12px; border:1px solid var(--line2); border-radius:var(--r); background:var(--bg); color:var(--text); font-size:13px;
}
.btn-scan {
  padding:11px 22px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  border:none; border-radius:var(--r); font-weight:700; font-size:14px; display:flex; align-items:center; gap:7px;
  box-shadow:var(--shadow);
}
.btn-scan:hover { filter:brightness(1.08); }
.btn-scan:disabled { opacity:.5; cursor:not-allowed; }
.urlbar-hint { max-width:1100px; margin:8px auto 0; font-size:11.5px; color:var(--muted); }
.proxy-badge { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:5px; background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok); }

/* ---- Executive bar ------------------------------------------------------ */
.exec-bar {
  display:none; gap:0; background:var(--bg2); border-bottom:1px solid var(--line);
  padding:0; overflow-x:auto;
}
.exec-seg { padding:10px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:1px; white-space:nowrap; }
.exec-k { font-family:var(--mono); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.exec-v { font-size:14px; font-weight:600; color:var(--text); }

/* ---- Layout ------------------------------------------------------------- */
.view { display:none; }
.view.active { display:block; }
.shell { display:flex; max-width:1400px; margin:0 auto; }
.sidebar {
  width:230px; min-width:230px; background:var(--bg1); border-right:1px solid var(--line);
  padding:16px 0; min-height:60vh;
}
.sidebar-title { font-family:var(--mono); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:0 16px 10px; }
.side-item {
  padding:7px 16px; font-size:12.5px; color:var(--body); cursor:pointer; display:flex;
  justify-content:space-between; align-items:center; border-left:3px solid transparent;
}
.side-item:hover { background:var(--bg2); }
.side-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--info-bg); font-weight:600; }
.side-count { font-family:var(--mono); font-size:10px; background:var(--bg3); color:var(--muted); padding:1px 6px; border-radius:8px; }
.side-group { margin-top:6px; }
.side-group-head { padding:8px 16px 4px; font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; }
.verdict-filters { padding:12px 16px; border-top:1px solid var(--line); margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.vf-btn { text-align:left; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--body); font-size:12px; }
.vf-btn:hover { border-color:var(--accent); }

.main { flex:1; padding:20px 24px; min-width:0; }

/* ---- Progress ----------------------------------------------------------- */
.progress-wrap { display:none; align-items:center; gap:12px; margin-bottom:16px; }
.progress-track { flex:1; height:8px; background:var(--bg3); border-radius:5px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); width:0; transition:width .3s; }
.progress-label { font-family:var(--mono); font-size:11px; color:var(--muted); min-width:36px; }

/* ---- Log ---------------------------------------------------------------- */
.scan-log {
  background:var(--bg1); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;
  max-height:160px; overflow-y:auto; font-family:var(--mono); font-size:11.5px; margin-bottom:18px;
}
.log-line { padding:1px 0; }
.log-time { color:var(--light); margin-right:6px; }

/* ---- Dashboard ---------------------------------------------------------- */
.dash-area { display:none; margin-bottom:24px; }
.dash-grid { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  background:var(--bg1); border:1px solid var(--line); border-radius:12px; padding:24px; box-shadow:var(--shadow); }
.gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.score-gauge {
  width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ok) 0deg, var(--bg3) 0deg);
}
.score-gauge-inner { width:92px; height:92px; border-radius:50%; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-num { font-size:34px; font-weight:800; line-height:1; }
.score-max { font-size:11px; color:var(--muted); font-family:var(--mono); }
.counters { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.counter { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:14px; text-align:center; }
.counter-num { font-size:26px; font-weight:800; line-height:1; }
.counter-lbl { font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.counter.v .counter-num { color:var(--crit); }
.counter.w .counter-num { color:var(--imp); }
.counter.p .counter-num { color:var(--ok); }
.counter.c .counter-num { color:var(--accent); }
.hash-line { grid-column:1/-1; font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:4px; }

.owasp-area { margin-top:16px; background:var(--bg1); border:1px solid var(--line); border-radius:12px; padding:20px; }
.owasp-area h3 { font-size:13px; font-family:var(--mono); letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
#owasp-radar { width:100%; height:260px; display:block; }

/* ---- Results ------------------------------------------------------------ */
.results-area { display:none; }
.results-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.results-toolbar input { padding:8px 12px; border:1px solid var(--line2); border-radius:6px; font-size:13px; background:var(--bg); color:var(--text); flex:1; min-width:180px; }
.results-toolbar select { padding:8px 10px; border:1px solid var(--line2); border-radius:6px; background:var(--bg); color:var(--text); font-size:12.5px; }
.tb-btn { padding:8px 12px; border:1px solid var(--line2); border-radius:6px; background:var(--bg); color:var(--body); font-size:12.5px; }
.tb-btn:hover { border-color:var(--accent); }

.rcard { background:var(--bg1); border:1px solid var(--line); border-left:4px solid var(--line2); border-radius:var(--r); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow); }
.rcard.vuln { border-left-color:var(--crit); }
.rcard.warn { border-left-color:var(--imp); }
.rcard.pass { border-left-color:var(--ok); }
.rcard.fp { opacity:.5; }
.rcard-head { display:flex; align-items:center; gap:10px; padding:12px 16px; flex-wrap:wrap; }
.rcard-verdict { font-family:var(--mono); font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.rcard-verdict.vuln { background:var(--crit-bg); color:var(--crit); }
.rcard-verdict.warn { background:var(--imp-bg); color:var(--imp); }
.rcard-verdict.pass { background:var(--ok-bg); color:var(--ok); }
.rcard-id { font-family:var(--mono); font-size:10px; color:var(--muted); }
.rcard-title { font-weight:600; font-size:13.5px; flex:1; min-width:140px; }
.rcard-cvss { font-family:var(--mono); font-size:11px; font-weight:600; }
.rcard-body { padding:0 16px 14px; }
.rcard-detail { font-size:13px; color:var(--body); margin-bottom:6px; }
.rcard-fix { font-size:12.5px; color:var(--body); background:var(--info-bg); border-radius:6px; padding:8px 10px; }
.rcard-foot { display:flex; align-items:center; gap:12px; margin-top:10px; }
.rcard-conf { color:var(--imp); font-size:13px; letter-spacing:1px; }
.rcard-cat { font-family:var(--mono); font-size:10px; color:var(--muted); }
.rcard-fp { margin-left:auto; background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:4px 10px; font-size:11px; color:var(--muted); }
.rcard-fp:hover { border-color:var(--imp); color:var(--imp); }

.empty { text-align:center; color:var(--muted); padding:40px; font-size:13px; }

/* ---- Recommendations / history ----------------------------------------- */
.reco-item { display:flex; gap:14px; padding:14px 16px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; }
.reco-num { width:28px; height:28px; flex-shrink:0; background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; }
.reco-title { font-weight:600; font-size:13.5px; margin-bottom:3px; }
.reco-id { font-family:var(--mono); font-size:10px; color:var(--muted); }
.reco-cvss { font-family:var(--mono); font-size:10px; color:var(--crit); }
.reco-fix { font-size:12.5px; color:var(--body); }
.hist-item { display:flex; gap:14px; padding:12px 16px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px; align-items:center; }
.hist-score { font-size:24px; font-weight:800; width:48px; text-align:center; }
.hist-target { font-weight:600; font-size:13px; }
.hist-meta { font-size:11.5px; color:var(--muted); font-family:var(--mono); }

/* ---- Compliance --------------------------------------------------------- */
.comp-fw { background:var(--bg1); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:12px; }
.comp-fw-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comp-fw-title { font-weight:700; font-size:14px; }
.comp-fw-badge { font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:8px; background:var(--imp-bg); color:var(--imp); }
.comp-fw-scope { font-size:11.5px; color:var(--muted); margin-bottom:10px; }
.comp-item { font-size:12px; padding:5px 0; border-bottom:1px dashed var(--line); display:flex; gap:10px; }
.comp-item code { font-size:10px; }

/* ---- Panels (views) ----------------------------------------------------- */
.panel { max-width:900px; margin:0 auto; padding:20px 24px; }
.panel h2 { font-size:18px; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
.panel .sub { color:var(--muted); font-size:13px; margin-bottom:20px; }

/* ---- AI ----------------------------------------------------------------- */
.ai-output { background:var(--bg1); border:1px solid var(--line); border-radius:var(--r); padding:18px; white-space:pre-wrap; font-size:13px; line-height:1.7; min-height:120px; }
.ai-output.loading { color:var(--muted); }

/* ---- Modal -------------------------------------------------------------- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,22,40,.5); z-index:100; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg); border-radius:12px; max-width:640px; width:100%; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.modal-head { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-size:16px; }
.modal-close { background:var(--bg2); border:none; width:30px; height:30px; border-radius:6px; font-size:16px; color:var(--muted); }
.modal-tabs { display:flex; gap:2px; padding:10px 22px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.modal-tab { padding:8px 14px; font-size:12.5px; color:var(--muted); border:none; background:transparent; border-bottom:2px solid transparent; }
.modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.modal-body { padding:22px; max-height:60vh; overflow-y:auto; }
.modal-pane { display:none; }
.modal-pane.active { display:block; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.field input, .field select { width:100%; padding:9px 12px; border:1px solid var(--line2); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px; }
.field .hint { font-size:11px; color:var(--muted); margin-top:4px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.toggle-row:last-child { border-bottom:none; }
.switch { position:relative; width:40px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:var(--bg3); border-radius:22px; transition:.2s; }
.slider:before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider:before { transform:translateX(18px); }
.modal-foot { padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.btn-primary { background:var(--accent); color:#fff; border:none; border-radius:7px; padding:9px 18px; font-weight:600; font-size:13px; }
.btn-ghost { background:var(--bg2); color:var(--body); border:1px solid var(--line); border-radius:7px; padding:9px 16px; font-size:13px; }

/* ---- Banner ------------------------------------------------------------- */
.legal-banner { background:var(--imp-bg); border:1px solid var(--imp); color:var(--imp); border-radius:var(--r); padding:12px 16px; margin:16px 24px; font-size:12.5px; display:flex; gap:10px; align-items:flex-start; max-width:1400px; margin-left:auto; margin-right:auto; }
.legal-banner input { margin-top:2px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:860px) {
  .shell { flex-direction:column; }
  .sidebar { width:100%; min-width:0; border-right:none; border-bottom:1px solid var(--line); }
  .topnav { display:none; }
  .topnav.mobile-open { display:flex; position:absolute; top:54px; left:0; right:0; background:#0f1628; flex-direction:column; padding:8px; z-index:60; }
  .dash-grid { grid-template-columns:1fr; }
  .counters { grid-template-columns:repeat(2,1fr); }
}
.mobile-menu-btn { display:none; }
@media (max-width:860px) { .mobile-menu-btn { display:flex; } }

@media print {
  .topbar, .urlbar, .sidebar, .scan-log, .results-toolbar, .legal-banner, .exec-bar { display:none !important; }
  .main { padding:0; }
  body { background:#fff; color:#000; }
}