/* shadcn-ish compaction layer on top of Pico (classless). Vendored, no build/CDN.
   Loaded AFTER pico so these win. Keeps Pico's red accent + dark/light. */

/* Pico bumps the root font-size on wider screens (the "everything is huge" effect).
   Pin it so the panel stays compact like shadcn. */
html { font-size: 100% !important; }

:root {
  --pico-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pico-font-size: .875rem;          /* ~14px base */
  --pico-line-height: 1.45;
  --pico-font-weight: 400;
  --pico-border-radius: .5rem;        /* shadcn-like radius */
  --pico-spacing: .9rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1rem;
  --pico-form-element-spacing-vertical: .45rem;
  --pico-form-element-spacing-horizontal: .7rem;
  --pico-typography-spacing-vertical: .8rem;
}

body { font-size: .875rem; }

/* Headings: tighter, not oversized */
h1 { font-size: 1.5rem; margin-bottom: .5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; margin-top: 1.1rem; margin-bottom: .4rem; }

/* Buttons: compact, medium weight, auto width (shadcn buttons aren't full-bleed) */
button, [type="submit"], [type="button"], [type="reset"], a[role="button"] {
  width: auto !important;        /* Pico renders form buttons block/full-width */
  display: inline-flex !important;
  align-items: center;
  font-size: .82rem;
  font-weight: 500;
  --pico-form-element-spacing-vertical: .4rem;
  --pico-form-element-spacing-horizontal: .9rem;
}

/* Form controls: compact + tighter row rhythm */
input, select, textarea { font-size: .85rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { margin-bottom: .55rem; }
label { margin-bottom: .2rem; }

/* Tables: tighter cells, muted uppercase header (shadcn data-table feel) */
th, td { padding: .5rem .6rem; font-size: .85rem; }
thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pico-muted-color);
  font-weight: 500;
}

/* Nav: compact, wraps on narrow screens (responsive) */
header nav { font-size: .85rem; }
header nav ul { flex-wrap: wrap; gap: .1rem .25rem; }
header nav { margin-bottom: 1rem; }

.err { color: var(--pico-del-color, #b00); }

/* Centered narrow card for single-column forms (onboarding/login feel) */
.card-narrow { max-width: 30rem; margin-inline: auto; }

/* Compact inline action buttons inside table cells */
.actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.actions form { margin: 0; }
.actions button {
  font-size: .72rem;
  white-space: nowrap;
  --pico-form-element-spacing-vertical: .25rem;
  --pico-form-element-spacing-horizontal: .55rem;
}

/* Status pills */
.badge {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 1rem;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  white-space: nowrap;
}
.badge.ok   { background: #16a34a; color: #fff; }
.badge.warn { background: #d97706; color: #fff; }
.badge.bad  { background: var(--pico-primary); color: var(--pico-primary-inverse); }

/* Tables: keep cells from wrapping awkwardly; let wide tables scroll via .overflow-auto */
table { margin-bottom: 0; }
.overflow-auto { margin-bottom: var(--pico-spacing); }