/* ==========================================================================
   TTEO shared component layer — "Electric Cobalt"
   --------------------------------------------------------------------------
   Token-only component recipes lifted from design/showcase.html. Load AFTER
   /static/design/tokens.css. Templates should reuse these classes (.btn,
   .card, .badge, .input/.field, .link, .empty, layout helpers) instead of
   re-declaring per-page component CSS. Never hardcode a colour/radius/spacing
   value here — reference a token (see design/STYLE_GUIDE.md).
   ========================================================================== */

/* --- Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-bg);
}

a { color: var(--color-primary); }

/* --- Typography helpers ------------------------------------------------- */
.eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.muted { color: var(--color-muted); }

/* --- Layout helpers ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.grid { display: grid; gap: var(--space-4); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--text-body); font-weight: var(--weight-semibold);
  line-height: 1; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: var(--transition-interactive);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-700); }
.btn-secondary { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-danger { background: var(--color-danger); color: var(--color-on-danger); }
.btn-danger:hover { filter: brightness(0.92); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-small); }

/* --- Inputs ------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-small); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.input, .select, .textarea {
  width: 100%; font-family: inherit; font-size: var(--text-body); color: var(--color-ink);
  padding: var(--space-3); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: var(--transition-interactive);
}
.input::placeholder, .textarea::placeholder { color: var(--color-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring);
}

/* --- Card --------------------------------------------------------------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.card h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-h3); }
.card .sub { color: var(--color-muted); font-size: var(--text-small); margin: 0 0 var(--space-4); }

/* --- Status badges ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  line-height: 1.4;
}
.badge-open    { background: var(--color-success-tint); color: var(--color-success); }
.badge-pending { background: var(--color-warning-tint); color: var(--color-warning); }
.badge-closed  { background: var(--color-surface-2);    color: var(--color-muted); }
.badge-full    { background: var(--color-danger-tint);  color: var(--color-danger); }
.badge-accent  { background: var(--color-accent-100);   color: var(--color-accent-700); }

/* --- Links -------------------------------------------------------------- */
a.link { color: var(--color-primary); text-decoration: none; font-weight: var(--weight-semibold); }
a.link:hover { color: var(--color-primary-700); text-decoration: underline; }

/* --- Empty state -------------------------------------------------------- */
.empty {
  text-align: center; padding: var(--space-7);
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.empty .big { font-size: var(--text-h3); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.empty p { color: var(--color-muted); margin: 0 0 var(--space-4); }

/* --- Pagination --------------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pager-btn {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-ink);
  font-size: var(--text-small); padding: var(--space-2) var(--space-3);
  text-decoration: none; transition: var(--transition-interactive);
}
.pager-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pager-current { border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--weight-semibold); }
.pager-disabled, .pager-disabled:hover { color: var(--color-border); border-color: var(--color-border); cursor: default; }
.pager-ellipsis { color: var(--color-muted); padding: 0 var(--space-1); }