/* ─────────────────────────────────────────────────────────────────────────────
 * styles.css
 * Shared stylesheet for all SAST Pipeline Demo pages.
 *
 * Pages using this file:
 *   - index.html    — input page
 *   - progress.html — live progress polling page
 *   - dashboard.html — results dashboard
 *
 * Page-specific styles go in a <style> block inside that page only.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS Variables — change these to retheme all pages at once ─────────────── */
:root {
  --bg-primary      : #0f1117;
  --bg-card         : #1e293b;
  --bg-input        : #0f1117;
  --border-color    : #334155;
  --text-primary    : #f8fafc;
  --text-secondary  : #e2e8f0;
  --text-muted      : #94a3b8;
  --text-faint      : #475569;
  --accent          : #6366f1;
  --accent-hover    : #4f46e5;
  --success         : #22c55e;
  --warning         : #f59e0b;
  --error           : #ef4444;
  --error-bg        : #450a0a;
  --error-border    : #991b1b;
  --error-text      : #fca5a5;

  /* Severity colors — used on dashboard */
  --sev-critical    : #ef4444;
  --sev-high        : #f97316;
  --sev-medium      : #f59e0b;
  --sev-low         : #22c55e;
  --sev-info        : #94a3b8;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
body {
  font-family     : 'Segoe UI', system-ui, sans-serif;
  background      : var(--bg-primary);
  color           : var(--text-secondary);
  min-height      : 100vh;
  line-height     : 1.5;
}

a {
  color           : var(--accent);
  text-decoration : none;
}

a:hover {
  text-decoration : underline;
}

/* ── Layout helpers ────────────────────────────────────────────────────────── */
.page-center {
  display         : flex;
  align-items     : center;
  justify-content : center;
  min-height      : 100vh;
  padding         : 24px;
}

.container {
  width           : 100%;
  max-width       : 960px;
  padding         : 0 24px;
}

.container-sm {
  width           : 100%;
  max-width       : 580px;
  padding         : 0 24px;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.card {
  background      : var(--bg-card);
  border          : 1px solid var(--border-color);
  border-radius   : 12px;
  padding         : 24px;
}

.card-title {
  font-size       : 13px;
  font-weight     : 600;
  color           : var(--text-muted);
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
  margin-bottom   : 16px;
}

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header {
  text-align      : center;
  margin-bottom   : 40px;
}

.page-header h1 {
  font-size       : 28px;
  font-weight     : 700;
  color           : var(--text-primary);
  letter-spacing  : -0.5px;
}

.page-header p {
  font-size       : 14px;
  color           : var(--text-muted);
  margin-top      : 8px;
}

/* ── Tool badges ───────────────────────────────────────────────────────────── */
.tools-row {
  display         : flex;
  justify-content : center;
  gap             : 10px;
  margin-bottom   : 40px;
  flex-wrap       : wrap;
}

.tool-badge {
  background      : var(--bg-card);
  border          : 1px solid var(--border-color);
  border-radius   : 20px;
  padding         : 5px 14px;
  font-size       : 12px;
  color           : var(--text-muted);
}

/* ── Form elements ─────────────────────────────────────────────────────────── */
.input-row {
  display         : flex;
  gap             : 10px;
}

input[type="text"], input[type="password"] {
  flex            : 1;
  background      : var(--bg-input);
  border          : 1px solid var(--border-color);
  border-radius   : 8px;
  padding         : 12px 16px;
  font-size       : 14px;
  color           : var(--text-primary);
  outline         : none;
  transition      : border-color 0.2s;
}

input[type="text"]:focus, input[type="password"]:focus {
  border-color    : var(--accent);
}

input[type="text"]::placeholder, input[type="password"]::placeholder {
  color           : var(--text-faint);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  border          : none;
  border-radius   : 8px;
  padding         : 12px 24px;
  font-size       : 14px;
  font-weight     : 600;
  cursor          : pointer;
  transition      : background 0.2s;
  white-space     : nowrap;
}

.btn-primary {
  background      : var(--accent);
  color           : white;
}

.btn-primary:hover    { background: var(--accent-hover); }

.btn-primary:disabled {
  background      : var(--border-color);
  color           : var(--text-faint);
  cursor          : not-allowed;
}

.btn-secondary {
  background      : var(--bg-card);
  color           : var(--text-muted);
  border          : 1px solid var(--border-color);
}

.btn-secondary:hover  { border-color: var(--accent); color: var(--accent); }

/* ── Error message ─────────────────────────────────────────────────────────── */
.error-msg {
  display         : none;
  margin-top      : 12px;
  padding         : 10px 14px;
  background      : var(--error-bg);
  border          : 1px solid var(--error-border);
  border-radius   : 6px;
  font-size       : 13px;
  color           : var(--error-text);
}

/* ── Status indicators ─────────────────────────────────────────────────────── */
.status-dot {
  display         : inline-block;
  width           : 8px;
  height          : 8px;
  border-radius   : 50%;
  margin-right    : 8px;
}

.status-dot.pending  { background: var(--text-faint); }
.status-dot.running  { background: var(--warning); animation: pulse 1s infinite; }
.status-dot.done     { background: var(--success); }
.status-dot.failed   { background: var(--error); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Progress bar ──────────────────────────────────────────────────────────── */
.progress-bar-wrap {
  background      : var(--bg-primary);
  border-radius   : 4px;
  height          : 6px;
  overflow        : hidden;
  margin-top      : 8px;
}

.progress-bar-fill {
  height          : 100%;
  border-radius   : 4px;
  background      : var(--accent);
  transition      : width 0.4s ease;
}

/* ── Severity pills ────────────────────────────────────────────────────────── */
.pill {
  display         : inline-block;
  padding         : 2px 10px;
  border-radius   : 12px;
  font-size       : 11px;
  font-weight     : 600;
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
}

.pill-critical { background: #450a0a; color: var(--sev-critical); }
.pill-high     { background: #431407; color: var(--sev-high);     }
.pill-medium   { background: #451a03; color: var(--sev-medium);   }
.pill-low      { background: #052e16; color: var(--sev-low);      }
.pill-info     { background: #1e293b; color: var(--sev-info);     }
.pill-secret   { background: #2e1065; color: #c4b5fd;             }
.pill-error    { background: #450a0a; color: var(--sev-critical);  }
.pill-warning  { background: #451a03; color: var(--sev-medium);   }
.pill-blocker  { background: #450a0a; color: var(--sev-critical);  }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.findings-table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 13px;
  margin-top      : 16px;
}

.findings-table th {
  text-align      : left;
  padding         : 10px 12px;
  font-size       : 11px;
  font-weight     : 600;
  color           : var(--text-muted);
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
  border-bottom   : 1px solid var(--border-color);
}

.findings-table td {
  padding         : 10px 12px;
  border-bottom   : 1px solid #1e293b;
  color           : var(--text-secondary);
  vertical-align  : top;
}

.findings-table tr:last-child td {
  border-bottom   : none;
}

.findings-table tr:hover td {
  background      : #1e293b;
}

.file-path {
  font-family     : 'Courier New', monospace;
  font-size       : 12px;
  color           : var(--text-muted);
}

/* ── Summary stat boxes ────────────────────────────────────────────────────── */
.stat-grid {
  display         : grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap             : 12px;
  margin-bottom   : 24px;
}

.stat-box {
  background      : var(--bg-card);
  border          : 1px solid var(--border-color);
  border-radius   : 10px;
  padding         : 16px;
  text-align      : center;
}

.stat-box .stat-number {
  font-size       : 28px;
  font-weight     : 700;
  color           : var(--text-primary);
  line-height     : 1;
}

.stat-box .stat-label {
  font-size       : 11px;
  color           : var(--text-muted);
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
  margin-top      : 6px;
}

/* ── Tool section header ───────────────────────────────────────────────────── */
.tool-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  margin-bottom   : 16px;
}

.tool-header h2 {
  font-size       : 16px;
  font-weight     : 600;
  color           : var(--text-primary);
}

.tool-header .finding-count {
  font-size       : 13px;
  color           : var(--text-muted);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  text-align      : center;
  margin-top      : 40px;
  padding-bottom  : 32px;
  font-size       : 12px;
  color           : var(--border-color);
}

/* ── Hint text ─────────────────────────────────────────────────────────────── */
.hint {
  margin-top      : 12px;
  font-size       : 12px;
  color           : var(--text-faint);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .input-row      { flex-direction: column; }
  .stat-grid      { grid-template-columns: repeat(2, 1fr); }
  .page-header h1 { font-size: 22px; }
}