/* ═══════════════════════════════════════════
   base.css — CSS Variables, Reset, Typography, Utility Classes
   ═══════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e1a;--bg2:#111827;--bg3:#1a2235;--bg4:#232d42;
  --sidebar:#0d1117;
  --green:#22c55e;--yellow:#eab308;--red:#ef4444;--blue:#3b82f6;
  --cyan:#06b6d4;--purple:#a855f7;--gray:#6b7280;
  --text:#e5e7eb;--text2:#9ca3af;--border:#2d3a50;
  --sidebar-w:220px;
  --fs-title-page:16px;--fs-title-section:13px;--fs-body:12px;
  --fs-caption:11px;--fs-xs:10px;--fs-micro:9px;
  --fw-title:700;--fw-body:500
}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}
a{color:var(--cyan);text-decoration:none}

/* ── Typography tokens ── */
.typo-title-page{font-size:var(--fs-title-page);font-weight:var(--fw-title);line-height:1.35}
.typo-title-section{font-size:var(--fs-title-section);font-weight:var(--fw-title);line-height:1.35}
.typo-body{font-size:var(--fs-body);font-weight:var(--fw-body);line-height:1.45}
.typo-caption{font-size:var(--fs-caption);font-weight:500;line-height:1.4;color:var(--text2)}

/* ── Utility classes ── */
.is-hidden{display:none}
.text-error{color:var(--red)!important}
.text-warning{color:var(--yellow)!important}
.text-ok{color:var(--green)}
.text-err{color:var(--red)}
.text-muted{color:var(--text2)}
.text-sm{font-size:var(--fs-caption)}
.status-ok{color:var(--green)!important}
.status-muted{color:var(--text2)!important}
.status-cyan{color:var(--cyan)!important}
.v-full{width:100%}

/* ── Buttons ── */
.btn{padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s}
.btn-xs{padding:4px 9px;font-size:11px}
.btn-xxs{padding:1px 6px;font-size:10px;line-height:1.2}
.btn-primary{background:var(--cyan);color:#000}.btn-primary:hover{opacity:.85}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2)}.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Severity / Status badges ── */
.sev{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase}
.sev.critical{background:rgba(239,68,68,.15);color:var(--red)}
.sev.major{background:rgba(234,179,8,.15);color:var(--yellow)}
.sev.minor{background:rgba(59,130,246,.15);color:var(--blue)}
.st-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--fs-xs);font-weight:600}
.st-badge.active{background:rgba(239,68,68,.15);color:var(--red)}
.st-badge.ack{background:rgba(234,179,8,.15);color:var(--yellow)}
.st-badge.cleared{background:rgba(34,197,94,.15);color:var(--green)}
.st-badge.sync-ok{background:rgba(34,197,94,.15);color:var(--green)}
.st-badge.sync-warn{background:rgba(234,179,8,.15);color:var(--yellow)}
.st-badge.sync-err{background:rgba(239,68,68,.15);color:var(--red)}
.st-badge.sync-queued{background:rgba(59,130,246,.15);color:var(--blue)}
.st-badge.sync-running{background:rgba(168,85,247,.15);color:#c084fc}
.st-badge.sync-in-progress{background:rgba(168,85,247,.15);color:#c084fc}
.st-badge.sync-paused{background:rgba(234,179,8,.15);color:var(--yellow)}
.st-badge.sync-completed{background:rgba(34,197,94,.15);color:var(--green)}
.st-badge.sync-failed{background:rgba(239,68,68,.15);color:var(--red)}

/* ── Common dots ── */
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.ok{background:var(--green)}.dot.warn{background:var(--yellow)}.dot.err{background:var(--red)}.dot.off{background:var(--gray)}
.dot-lg{width:8px;height:8px}

/* ── Shared animations ── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Result colors ── */
.res-good{color:var(--green);font-weight:700}
.res-warn{color:var(--yellow);font-weight:700}
.res-bad{color:var(--red);font-weight:700}

/* ── Loading ── */
.loading-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:16px;color:var(--text2)}
.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top:3px solid var(--cyan);border-radius:50%;animation:spin 0.8s linear infinite}
.loading-overlay p{font-size:var(--fs-body);margin:0}

/* ── Page load time ── */
.page-load-time{margin:10px 20px 16px;color:var(--text2);font-size:var(--fs-caption);text-align:right}