/* Component patterns — v2, dense/compact spec (see tokens.css header for
   provenance). Depends on tokens.css and base.css being loaded first.

   Job-card-specific components (stage tracker, checkbox rows, QR block,
   history feed) are deliberately not here yet — added when the Jobs module
   is actually built, not speculatively now. */

/* ---------- Buttons ---------- */
/* Five variants, same set as v1: Primary, Accent/CTA, Secondary, Ghost,
   Destructive. Desktop/office sizing (CLAUDE.md explicitly allows this to be
   more compact than the 48px tablet/workshop touch-target rule). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding: 7px 14px;
  border-radius: var(--radius-default);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-body-small);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn:focus-visible {
  outline: 2px solid var(--torque-steel);
  outline-offset: 2px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: var(--text-caption);
  min-height: 24px;
}

/* Primary — the default action button */
.btn-primary {
  background: var(--torque-steel);
  color: var(--surface);
}
.btn-primary:hover:not(:disabled) { background: var(--torque-steel-mid); }

/* Accent / CTA — the single most important action on a screen, not every button */
.btn-accent {
  background: var(--torque-amber);
  color: var(--torque-ink);
}
.btn-accent:hover:not(:disabled) { background: #d4791f; }

/* Secondary */
.btn-secondary {
  background: var(--surface);
  color: var(--torque-ink);
  border-color: var(--border-mid);
}
.btn-secondary:hover:not(:disabled) { background: var(--torque-white); }

/* Ghost — low-emphasis actions */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--torque-white); }

/* Destructive — only for genuinely destructive or urgent actions */
.btn-destructive {
  background: var(--status-overdue);
  color: var(--surface);
}
.btn-destructive:hover:not(:disabled) { background: #a82227; }

/* ---------- Status badges ---------- */
/* Soft/pastel by default — suits dense desktop lists/tables where several
   badges are on screen at once. .badge-solid (same colours, filled) is kept
   for when the TV display / workshop dashboard is built, where the original
   "read at a glance from across a workshop" rule actually applies. */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-default);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.badge-ready { background: var(--status-ready-bg); color: var(--status-ready-text); }
.badge-in-progress { background: var(--status-in-progress-bg); color: var(--status-in-progress-text); }
.badge-on-hold { background: var(--status-on-hold-bg); color: var(--status-on-hold-text); }
.badge-overdue { background: var(--status-overdue-bg); color: var(--status-overdue-text); }

.badge-solid { color: var(--surface); }
.badge-solid.badge-ready { background: var(--status-ready); color: var(--torque-ink); }
.badge-solid.badge-in-progress { background: var(--status-in-progress); color: var(--torque-ink); }
.badge-solid.badge-on-hold { background: var(--status-on-hold); color: var(--torque-ink); }
.badge-solid.badge-overdue { background: var(--status-overdue); color: var(--surface); }

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-default);
}

.card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.card-title {
  font-size: var(--text-body-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.card-body {
  padding: var(--space-lg);
}

/* ---------- Stat tiles ---------- */

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-default);
  padding: var(--space-md) var(--space-lg);
}

.stat-tile-value {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  font-family: var(--font-mono);
  color: var(--torque-ink);
  line-height: 1;
}

.stat-tile-value.status-ready { color: var(--status-ready); }
.stat-tile-value.status-overdue { color: var(--status-overdue); }

.stat-tile-sub {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ---------- Field grid ---------- */
/* Dense label/value record display — hairline-bordered cells instead of
   stacked fields with large gaps. This is the biggest space saver from the
   reference vs the original v1 card-per-field approach. */

.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.field-grid.two-col { grid-template-columns: repeat(2, 1fr); }

.field-cell {
  padding: var(--space-md) var(--space-md);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.field-grid .field-cell:nth-child(3n) { border-right: none; }
.field-grid.two-col .field-cell:nth-child(2n) { border-right: none; }

.field-value.empty {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Tables ---------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-small);
}

.table th {
  background: var(--torque-white);
  color: var(--text-muted);
  text-align: left;
  font-size: var(--text-micro-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.table tbody tr {
  background: var(--surface);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr.is-interactive {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.table tbody tr.is-interactive:hover {
  background: var(--torque-white);
}

/* ---------- Forms ---------- */

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: var(--text-micro-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.form-control {
  width: 100%;
  min-height: var(--control-height);
  padding: 8px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-default);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--torque-ink);
  background: var(--surface);
  transition: border-color 120ms ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--torque-steel);
  box-shadow: 0 0 0 2px rgba(61, 90, 115, 0.15);
}

.form-control[readonly] {
  background: var(--torque-white);
  color: var(--text-secondary);
}

/* On tablet/workshop-facing screens, opt into full touch-target sizing by
   adding this alongside .form-control / .btn. */
.touch-target {
  min-height: var(--touch-target-min);
}

/* ---------- App shell: sidebar + topbar ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--torque-steel);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-logo {
  height: var(--header-h);
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--torque-steel-light);
}

.sidebar-logo-mark {
  width: 26px;
  height: 26px;
  background: var(--torque-amber);
  border-radius: var(--radius-default);
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--surface);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.sidebar-logo-text span {
  display: block;
  font-weight: var(--weight-light);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

.sidebar-section {
  padding: var(--space-md) 0 var(--space-xs);
}

.sidebar-section-label {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 0 var(--space-md) var(--space-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-body-small);
  font-weight: var(--weight-regular);
  text-decoration: none;
  position: relative;
  transition: background-color 100ms ease, color 100ms ease;
}

.nav-item:hover {
  background: var(--torque-steel-mid);
  color: rgba(255, 255, 255, 0.9);
}

.nav-item.is-active {
  background: var(--torque-steel-mid);
  color: var(--surface);
}

.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--torque-amber);
}

.nav-badge {
  margin-left: auto;
  background: var(--torque-amber);
  color: var(--torque-ink);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  padding: 1px 6px;
  border-radius: var(--radius-default);
  font-family: var(--font-mono);
}

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--torque-steel-light);
  padding: var(--space-sm) 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.user-avatar {
  width: 26px;
  height: 26px;
  background: var(--torque-steel-light);
  border-radius: var(--radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  padding: 0 var(--space-xl);
  gap: var(--space-md);
  flex-shrink: 0;
}

.topbar-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--torque-ink);
}

.topbar-sub {
  font-size: var(--text-body-small);
  color: var(--text-muted);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.content {
  flex: 1;
  padding: var(--space-xl);
}