/* UI scaling and responsive helpers */
:root {
  --ui-scale: 1; /* adjustable via slider */
  --base-font: calc(14px * var(--ui-scale));
  --base-pad-y: calc(0.75rem * var(--ui-scale));
  --base-pad-x: calc(1rem * var(--ui-scale));
}

body {
  font-size: var(--base-font);
}

/* Calibration form container */
.cal-form-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--base-pad-y) var(--base-pad-x);
}

/* Resizable blocks */
.resizable {
  resize: horizontal;
  overflow: auto;
  min-width: 320px;
}

/* Tables: sticky headers and scroll */
.cal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cal-table {
  min-width: 900px;
  border-collapse: collapse;
}

.cal-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  z-index: 1;
}

.cal-table th,
.cal-table td {
  padding: calc(0.5rem * var(--ui-scale));
}

/* Repeatability table comfortable spacing */
.repeatability.cal-table th,
.repeatability.cal-table td {
  padding: calc(1rem * var(--ui-scale)) calc(1.2rem * var(--ui-scale));
  border-right: 1px solid #e5e7eb;
}

.repeatability.cal-table input[type="number"] {
  padding: calc(0.7rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
  min-height: 2.5rem;
}

.repeatability.cal-table thead th {
  font-weight: 700;
  font-size: calc(14px * var(--ui-scale));
  background: #e9d5ff !important;
}

.repeatability .cal-table-wrap {
  min-width: 1100px; /* give more breathing room */
}

/* Inputs scale with UI */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  padding: var(--base-pad-y) var(--base-pad-x);
  font-size: var(--base-font);
}

/* Compact/comfortable variants */
.density-compact input,
.density-compact select,
.density-compact textarea {
  padding: calc(0.5rem * var(--ui-scale)) calc(0.75rem * var(--ui-scale));
}

.density-comfortable input,
.density-comfortable select,
.density-comfortable textarea {
  padding: calc(0.9rem * var(--ui-scale)) calc(1.1rem * var(--ui-scale));
}
/* Minimal base styles for Hunting QA SG */
:root {
  --brand: #2563eb;
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --card: #ffffff;
  --border: #e2e8f0;
}

/* Animation for loading/spinning icons */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand); color: #fff; border: none;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
}
.btn.secondary { background: #334155; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table th { text-align: left; color: var(--muted); font-weight: 600; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.meta { color: var(--muted); font-size: 12px; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); font-size:12px; }
.badge.green { background:#ecfccb; border-color:#84cc16; color:#365314; }
.badge.red { background:#fee2e2; border-color:#ef4444; color:#7f1d1d; }