/* ============================================================
   1plus — shared design system
   "Field operations console": cool neutrals, indigo brand,
   semantic green/red for check states, monospace for telemetry.
   ============================================================ */

:root {
  /* neutrals (cool, not cream) */
  --bg:        #eceff5;
  --surface:   #ffffff;
  --surface-2: #f5f7fb;
  --line:      #e2e7f0;
  --line-strong:#cfd6e4;

  --ink-900: #0c1322;
  --ink-700: #29324a;
  --ink-500: #5a6379;
  --ink-400: #818ba3;

  /* brand */
  --brand-700:#4338ca;
  --brand-600:#4f46e5;
  --brand-500:#6366f1;
  --brand-50: #eef0ff;

  /* semantics */
  --ok-700:#166534; --ok-600:#16a34a; --ok-50:#e8f7ee;
  --bad-700:#b91c1c; --bad-600:#dc2626; --bad-50:#fdeaea;
  --warn-700:#92400e; --warn-600:#d97706; --warn-50:#fdf3e2;

  --r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(12,19,34,.06), 0 1px 1px rgba(12,19,34,.04);
  --shadow-2: 0 6px 20px rgba(12,19,34,.10);
  --shadow-3: 0 18px 50px rgba(12,19,34,.18);

  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- typography ---------- */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-400);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1,h2,h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--brand-600);
  appearance: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  padding: 10px 16px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--b); color: #fff; transition: transform .06s ease, filter .15s ease, background .15s ease;
  line-height: 1; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn:focus-visible { outline: 3px solid var(--brand-50); outline-offset: 1px; }
.btn-success { --b: var(--ok-600); }
.btn-danger  { --b: var(--bad-600); }
.btn-ghost {
  background: var(--surface); color: var(--ink-700); border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-2); filter: none; }
.btn-quiet { background: transparent; color: var(--ink-500); }
.btn-quiet:hover { background: var(--surface-2); filter: none; }
.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.input, select.input, textarea.input {
  font-family: var(--font-ui); font-size: 14px; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 10px 12px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.input::placeholder { color: var(--ink-400); }
.hint { font-size: 12px; color: var(--ink-400); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-1);
}
.card-pad { padding: 18px; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-700); border: 1px solid var(--line);
}
.pill-ok   { background: var(--ok-50);   color: var(--ok-700);   border-color: transparent; }
.pill-bad  { background: var(--bad-50);  color: var(--bad-700);  border-color: transparent; }
.pill-warn { background: var(--warn-50); color: var(--warn-700); border-color: transparent; }
.pill-brand{ background: var(--brand-50);color: var(--brand-700);border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot-live { box-shadow: 0 0 0 0 currentColor; animation: livePulse 1.8s infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ---------- table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface);
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 24px);
  background: var(--ink-900); color: #fff; padding: 12px 16px; border-radius: var(--r-sm);
  box-shadow: var(--shadow-3); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; z-index: 9000;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: min(92vw, 460px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok  { background: #0f3d24; }
.toast.bad { background: #4a1414; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(8,12,22,.5); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 18px; z-index: 8000;
}
.modal.open { display: flex; }
.modal-card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 22px;
  animation: modalIn .18s ease;
}
@keyframes modalIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---------- helpers ---------- */
.row { display: flex; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; }
.muted { color: var(--ink-400); }
.center { display: flex; align-items: center; justify-content: center; }
.empty {
  text-align: center; color: var(--ink-400); padding: 38px 16px; font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}