:root {
  --bg:#ffffff;
  --card: transparent;
  --border: #e5e7eb;
  --border-strong: #d1d5db; /* optional */
  --text-light: #9ca3af;
  --text:#0f172a;
  --muted:#516079;
  --brand-soft: #eaf3ff;        /* Soft, light blue */
  --brand: #3f9cff;             /* Main brand color */
  --brand-strong: #0b3a82;      /* Strong blue for contrast */
  --brand-hover: #1e6fd0;       /* Slightly darker hover state */
  --brand-active: #1666c1;      /* Active state */
  --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-form: 0 3px 8px rgba(0, 0, 0, 0.05);
  --radius:12px;
}

body {
  font-family: system-ui, sans-serif;
  max-width: 100%;
  margin: 0 auto 0 auto;
  padding: 0 36px;
  line-height: 1.5;
}

#errors h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.h2-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Table container */
#errors table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 14px;
  margin: 8px 0 8px 0;
}

/* Header */
#errors thead th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
  padding: 12px 14px;
  text-align: left;
}

/* Cells */
#errors tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}

/* Row hover */
#errors tbody tr:hover {
  background: #f9fafb;
}

/* Rounded corners */
#errors thead th:first-child { border-top-left-radius: 12px; }
#errors thead th:last-child  { border-top-right-radius: 12px; }
#errors tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
#errors tbody tr:last-child td:last-child  { border-bottom-right-radius: 12px; }


html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#errors {
  overflow-x: hidden;
}

#errors > * {
  overflow-x: hidden;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Severity pill */
.severity-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.placeholder {
  display: inline-block;
  padding: 2px 5px 0 5px;
  border-radius: 3px;
  background: #e5e7eb;
  color: var(--text);
  font-size: 0.8em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  border: 1px solid var(--border-strong); /* subtle edge */
  margin: 0 3px 0 3px;
}

/* Colors */
.sev-high     { background: #fee2e2; color: #991b1b; }
/*.sev-medium   { background: #ffedd5; color: #9a3412; }*/
.sev-medium   { background: #fef9c3; color: #854d0e; }
.sev-info     { background: #e0f2fe; color: #075985; }
.sev-none     { background: #dcfce7; color: #166534; }

.severity-badge.inverted {
  background: #ffffff;
}

/* Mobile tweaks */
@media (max-width: 768px) {

  body {
    padding: 0 16px 16px 16px;
  }

  #errors h2 {
    font-size: 1.1em;
  }

  #errors table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}