/* Console minimal layout fixes — no frills, just spacing & wrapping */
* { box-sizing: border-box; }

:root{
  --gap: .75rem;
  --pad: 1rem;
  --radius: 12px;
  --maxw: 1200px;
}

/* Make our grid/filters behave on small ? large screens */
.grid, form.filters { display:grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 640px){
  .grid, form.filters { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (min-width: 900px){
  .grid, form.filters { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (min-width: 1200px){
  .grid, form.filters { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
}

/* Inputs: full-width, consistent padding */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: .55rem .6rem;
  border: 1px solid #bbb;
  border-radius: 8px;
  background: #fff;
  color: #111;
  font: inherit;
}

/* Buttons/links: allow wrapping so they don’t collide */
button,
a.btn,
a.btn-light,
.btn-replay,
.btn-open {
  font: inherit;
  white-space: nowrap;
}

/* Any grouped actions should wrap instead of overflow */
.actions,
.form-actions,
form .actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}
.actions form { margin: 0; }

/* Cards: keep a sane max width, tighten padding on small screens */
.card { max-width: var(--maxw); }
@media (max-width: 640px){
  .card { padding: .85rem; }
}

/* Tables: allow horizontal scroll if cramped */
.table-scroll { overflow:auto; }
.table-scroll table { min-width: 800px; }

/* Cells align top so labels and multi-line previews don’t look crushed */
th, td { vertical-align: top; }

/* Checkbox label helper used on Runs/Search */
label.small-inline input[type="checkbox"]{ inline-size: auto; }



/* ==== Minimal theming scaffold ========================================== */
:root{
  /* base */
  --bg: #fafafa;
  --text: #111;
  --muted: #666;
  --card: #fff;
  --border: #e7e7e7;

  /* accents */
  --accent: #111;       /* primary button / links */
  --accent-text: #fff;
  --accent-2: #1565c0;  /* charts, secondary lines */
  --success: #2e7d32;
  --warn: #ef6c00;
  --alert: #c62828;
}

/* optional dark mode (auto if user prefers) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0f0f; --text:#f2f2f2; --muted:#9aa0a6;
    --card:#161616; --border:#2a2a2a;
    --accent:#e0e0e0; --accent-text:#111;
  }
}

/* manual dark theme: <body data-theme="dark"> */
body[data-theme="dark"]{
  --bg:#0f0f0f; --text:#f2f2f2; --muted:#9aa0a6;
  --card:#161616; --border:#2a2a2a;
  --accent:#e0e0e0; --accent-text:#111;
}

/* apply vars (no visual flair, just controlled colours) */
body{ background:var(--bg); color:var(--text); }
.small{ color:var(--muted); }
.card{ background:var(--card); border-color:var(--border); }
th,td{ border-bottom-color:var(--border); }

a.btn, button.btn, .btn-replay{
  background:var(--accent); color:var(--accent-text); border-color:var(--accent);
}
a.btn-light, .btn-open{
  background:#fff; color:var(--text); border-color:var(--border);
}

/* status badges (if you’re using these classes) */
.badge.good{ color:var(--success); border-color:var(--success); }
.badge.warn{ color:var(--warn);    border-color:var(--warn); }
.badge.alert{color:var(--alert);   border-color:var(--alert); }