/* Somantix — Validator Component CSS */

/* ═══════════════════════════════════════
   VALIDATOR VIEW
   ═══════════════════════════════════════ */
#validator-view {
  --black:#e6edf3; --white:#0d1117;
  --g50:#0d1117; --g100:#161b22; --g200:#21262d; --g300:#30363d;
  --g400:#484f58; --g500:#8b949e; --g600:#c9d1d9; --g700:#e6edf3;
  --g800:#f0f6fc; --g900:#fff;
  --em:#059669; --eml:#10b981; --emd:#047857; --emp:#d1fae5;
  --red:#dc2626; --amber:#d97706; --blue:#3b82f6;
}
#validator-view.active {
  display:flex; flex-direction:column; align-items:center;
  padding:2.5rem 1.5rem; max-width:1000px; margin:0 auto; width:100%;
}
#validator-view .serif { font-family:'Newsreader',Georgia,serif; }
#validator-view .mono { font-family:'JetBrains Mono',monospace; }

#validator-view .validator-container { width:100%; text-align:center; }
#validator-view .eyebrow { font-size:0.625rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--em); margin-bottom:1rem; }
#validator-view .headline { font-size:2.5rem; font-weight:600; line-height:1.1; margin-bottom:0.625rem; letter-spacing:-0.02em; }
#validator-view .subtext { font-size:0.9rem; color:var(--g500); margin-bottom:2rem; line-height:1.6; }

#validator-view .drop-zone { border:2px dashed var(--g200); border-radius:16px; padding:2.5rem 2rem; background:var(--white); cursor:pointer; transition:all 0.25s ease; margin-bottom:2rem; box-shadow:0 1px 3px rgba(0,0,0,.04); }
#validator-view .drop-zone:hover,
#validator-view .drop-zone.drag-over { border-color:var(--em); background:#f0fdf9; transform:translateY(-2px); box-shadow:0 12px 40px rgba(5,150,105,0.1),0 0 0 1px rgba(5,150,105,0.08); }
#validator-view .drop-icon { width:40px; height:40px; margin:0 auto 0.75rem; color:var(--em); display:block; }
#validator-view .drop-label { font-size:1rem; font-weight:500; color:var(--g700); margin-bottom:0.375rem; }
#validator-view .drop-hint { font-size:0.75rem; color:var(--g400); }
#validator-view .drop-actions { display:flex; gap:0.75rem; justify-content:center; margin-top:1rem; }
#validator-view .drop-actions .btn { font-size:0.8125rem; padding:0.5rem 1rem; }

#validator-view .progress-bar { width:100%; display:none; margin-bottom:1.25rem; }
#validator-view .progress-bar.show { display:block; }
#validator-view .progress-track { height:6px; background:var(--g200); border-radius:3px; overflow:hidden; }
#validator-view .progress-fill { height:100%; background:var(--em); border-radius:3px; transition:width 0.1s; width:0%; }
#validator-view .progress-label { font-size:0.75rem; color:var(--g500); margin-top:0.375rem; text-align:center; }

#validator-view .results-panel { display:none; width:100%; text-align:left; }
#validator-view .results-panel.show { display:block; animation:valSlideUp 0.3s ease-out; }
@keyframes valSlideUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }

#validator-view .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.75rem; margin-bottom:1.25rem; }
#validator-view .stat-card { text-align:center; padding:0.875rem 0.5rem; border-radius:10px; background:var(--white); border:1px solid var(--g200); transition:border-color 0.15s,box-shadow 0.15s; }
#validator-view .stat-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.04); }
#validator-view .stat-card .num { font-size:1.5rem; font-weight:700; }
#validator-view .stat-card .lbl { font-size:0.5625rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--g500); margin-top:0.125rem; }
#validator-view .stat-card.green { border-color:var(--eml); } #validator-view .stat-card.green .num { color:var(--eml); }
#validator-view .stat-card.red { border-color:var(--red); } #validator-view .stat-card.red .num { color:var(--red); }
#validator-view .stat-card.amber { border-color:var(--amber); } #validator-view .stat-card.amber .num { color:var(--amber); }

#validator-view .val-toolbar { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; flex-wrap:wrap; }
#validator-view .val-toolbar input[type="text"] { flex:1; min-width:180px; padding:0.5rem 0.75rem; border:1px solid var(--g200); border-radius:6px; font-size:0.8125rem; font-family:inherit; background:var(--white); color:var(--black); }
#validator-view .val-toolbar select { padding:0.5rem 0.75rem; border:1px solid var(--g200); border-radius:6px; font-size:0.8125rem; font-family:inherit; background:var(--white); color:var(--black); }

#validator-view .results-table { width:100%; background:var(--white); border-radius:12px; border:1px solid var(--g200); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
#validator-view .results-table table { width:100%; border-collapse:collapse; }
#validator-view .results-table th { text-align:left; padding:0.625rem 0.75rem; font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--g500); background:var(--g50); border-bottom:1px solid var(--g200); cursor:pointer; user-select:none; white-space:nowrap; }
#validator-view .results-table th:hover { color:var(--black); }
#validator-view .results-table td { padding:0.5rem 0.75rem; font-size:0.8125rem; border-bottom:1px solid var(--g100); vertical-align:middle; color:var(--black); }
#validator-view .results-table tr:last-child td { border-bottom:none; }
#validator-view .results-table tbody tr:hover td { background:rgba(255,255,255,0.03); }
#validator-view .results-table tbody tr { cursor:pointer; }

#validator-view .status-pill { display:inline-flex; align-items:center; gap:0.25rem; padding:0.125rem 0.5rem; border-radius:4px; font-size:0.6875rem; font-weight:500; white-space:nowrap; }
#validator-view .status-pill.valid { background:var(--emp); color:var(--emd); }
#validator-view .status-pill.invalid { background:#fee2e2; color:var(--red); }
#validator-view .status-pill.no-manifest { background:#f3f4f6; color:var(--g500); }
#validator-view .attest-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:2px; }
#validator-view .attest-dot.full { background:#ef4444; }
#validator-view .attest-dot.partial { background:var(--amber); }
#validator-view .attest-dot.none { background:var(--eml); }
#validator-view .attest-dot.yes { background:#ef4444; }
#validator-view .attest-dot.no { background:var(--eml); }

#validator-view .val-detail-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:100; align-items:center; justify-content:center; }
#validator-view .val-detail-overlay.open { display:flex; }
#validator-view .detail-card { background:var(--white); border-radius:16px; max-width:700px; width:95%; max-height:90vh; overflow-y:auto; padding:2rem; box-shadow:0 24px 80px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.05); }

#validator-view .detail-section { margin-bottom:1.25rem; }
#validator-view .detail-section:last-child { margin-bottom:0; }
#validator-view .section-title { font-size:0.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--g500); margin-bottom:0.625rem; }
#validator-view .detail-row { display:flex; justify-content:space-between; padding:0.4375rem 0; border-bottom:1px solid var(--g100); }
#validator-view .detail-row:last-child { border-bottom:none; }
#validator-view .detail-label { font-size:0.8125rem; font-weight:500; color:var(--g600); }
#validator-view .detail-value { font-size:0.8125rem; color:var(--black); font-weight:500; text-align:right; max-width:60%; word-break:break-word; }
#validator-view .hash-value { font-family:'JetBrains Mono',monospace; font-size:0.6875rem; color:var(--g500); word-break:break-all; }

#validator-view .verify-banner { display:flex; align-items:center; gap:1rem; padding:1.25rem; border-radius:10px; margin-bottom:1.5rem; }
#validator-view .verify-banner.valid { background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%); border:1.5px solid rgba(16,185,129,0.4); box-shadow:0 4px 20px rgba(16,185,129,0.08); }
#validator-view .verify-banner.invalid { background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%); border:1.5px solid rgba(239,68,68,0.4); box-shadow:0 4px 20px rgba(239,68,68,0.06); }
#validator-view .verify-badge { width:40px; height:40px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
#validator-view .verify-title { font-size:1.125rem; font-weight:600; color:var(--emd); }
#validator-view .verify-banner.invalid .verify-title { color:var(--red); }
#validator-view .verify-subtitle { font-size:0.75rem; color:var(--g600); }

#validator-view .single-result { display:none; background:var(--white); border:1px solid var(--g100); border-radius:14px; padding:2rem; box-shadow:0 4px 24px rgba(0,0,0,0.05),0 0 0 1px rgba(0,0,0,0.02); text-align:left; width:100%; }
#validator-view .single-result.show { display:block; animation:valSlideUp 0.3s ease-out; }

#validator-view .verification-steps { margin-bottom:1.5rem; }
#validator-view .verify-step { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0; opacity:0.4; transition:all 0.3s; }
#validator-view .verify-step.active { opacity:1; }
#validator-view .verify-step.done { opacity:1; }
#validator-view .step-icon { width:28px; height:28px; border-radius:50%; background:var(--g200); display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0; color:var(--g500); }
#validator-view .verify-step.active .step-icon { background:var(--em); color:white; }
#validator-view .verify-step.done .step-icon { background:var(--eml); color:white; }
#validator-view .step-text { font-size:0.8125rem; font-weight:500; color:var(--g600); }
#validator-view .verify-step.active .step-text { color:var(--black); }

#validator-view .val-actions { margin-top:1.5rem; display:flex; gap:0.75rem; justify-content:center; }
#validator-view .btn-sm { padding:0.375rem 0.75rem; font-size:0.75rem; }

html[data-theme="light"] #validator-view {
  --black:#0a0a0a; --white:#fafaf8;
  --g50:#f7f7f5; --g100:#eeede9; --g200:#dddbd5; --g300:#c4c1b8;
  --g400:#9c9890; --g500:#737068; --g600:#555250; --g700:#3a3835;
  --g800:#252320; --g900:#141210;
}