/* ── Toolbar ────────────────────────────────────────── */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.toolbar-filters, .toolbar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.toolbar-search {
  flex: 1;
  max-width: 400px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  background: white;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--potisse-chocolate);
}
.toolbar-search:focus {
  outline: none;
  border-color: var(--potisse-chocolate);
}

/* ── Filter pills ────────────────────────────────────── */
.filter-pill {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: var(--size-xs);
  cursor: pointer;
  background: transparent;
  color: var(--potisse-chocolate-soft);
  transition: all var(--transition-fast);
}
.filter-pill.active {
  background: var(--potisse-chocolate);
  color: var(--potisse-cream);
  border-color: var(--potisse-chocolate);
}
.filter-pill:hover:not(.active) {
  background: var(--potisse-cream-hover);
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
}
.btn-primary {
  background: var(--potisse-chocolate);
  color: var(--potisse-cream);
}
.btn-primary:hover { background: var(--potisse-chocolate-soft); }
.btn-secondary {
  color: var(--potisse-chocolate);
  border-color: var(--hairline-strong);
}
.btn-secondary:hover { background: var(--potisse-cream-hover); }
.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: var(--potisse-cream); }
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--size-xs);
}

/* ── Data tables ─────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-sm);
  background: white;
  border: 1px solid var(--hairline);
}
.data-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--potisse-chocolate-mute);
  border-bottom: 1px solid var(--hairline);
  background: var(--potisse-cream-soft);
}
.data-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover {
  background: var(--potisse-cream-hover);
  cursor: pointer;
}
.data-table .col-mono {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--potisse-chocolate-soft);
}
.data-table .col-actions {
  text-align: right;
  white-space: nowrap;
}
.data-table .col-num {
  font-family: var(--font-mono);
  text-align: right;
}

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: 10px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.badge-success { background: rgba(78, 122, 90, 0.15); color: var(--success); }
.badge-warning { background: rgba(184, 134, 61, 0.15); color: var(--warning); }
.badge-danger { background: rgba(165, 72, 72, 0.15); color: var(--danger); }
.badge-info { background: rgba(78, 106, 122, 0.15); color: var(--info); }
.badge-neutral { background: var(--hairline); color: var(--potisse-chocolate-soft); }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid var(--hairline);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.card-title {
  font-size: var(--size-base);
  font-weight: 500;
}
.card-meta {
  font-size: var(--size-xs);
  color: var(--potisse-chocolate-mute);
}

/* ── Stat cards (Health) ─────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.stat-card {
  background: white;
  border: 1px solid var(--hairline);
  padding: var(--space-4);
}
.stat-label {
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--potisse-chocolate-mute);
  margin-bottom: var(--space-2);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: 400;
  color: var(--potisse-chocolate);
  line-height: 1;
}
.stat-unit {
  font-size: var(--size-sm);
  color: var(--potisse-chocolate-mute);
  margin-left: var(--space-1);
}
.stat-detail {
  font-size: var(--size-xs);
  color: var(--potisse-chocolate-mute);
  margin-top: var(--space-2);
}

/* ── Grid layouts (Post curation, Candidates) ────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ── Two-column layout (Orders) ──────────────────────── */
.split-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  min-height: calc(100vh - 200px);
}
.split-list {
  border-right: 1px solid var(--hairline);
  padding-right: var(--space-4);
}
.split-list-item {
  padding: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.split-list-item:hover { background: var(--potisse-cream-hover); }
.split-list-item.active {
  background: var(--potisse-cream-hover);
  border-left: 2px solid var(--potisse-chocolate);
  padding-left: calc(var(--space-3) - 2px);
}

/* ── Checklist (Orders) ──────────────────────────────── */
.checklist {
  background: white;
  border: 1px solid var(--hairline);
  padding: var(--space-4);
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item.completed .checklist-label {
  text-decoration: line-through;
  color: var(--potisse-chocolate-mute);
}
.checklist-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--success);
}
.checklist-label {
  flex: 1;
  font-size: var(--size-sm);
}
.checklist-timestamp {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--potisse-chocolate-mute);
}

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--potisse-chocolate-mute);
  background: white;
  border: 1px dashed var(--hairline);
}
.empty-state-text {
  font-size: var(--size-sm);
}

/* ── Section headings within tab content ─────────────── */
.section-heading {
  font-size: var(--size-base);
  font-weight: 500;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  color: var(--potisse-chocolate);
}
.section-heading:first-child { margin-top: 0; }

/* ── Placeholder value ───────────────────────────────── */
.ph {
  font-family: var(--font-mono);
  color: var(--potisse-chocolate-mute);
  font-size: var(--size-sm);
}

/* ── Image thumbnail placeholder ─────────────────────── */
.thumb-placeholder {
  background: var(--potisse-cream-soft);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--potisse-chocolate-mute);
  font-size: var(--size-xs);
  aspect-ratio: 1;
  width: 100%;
}
.thumb-placeholder-sm {
  width: 40px;
  height: 40px;
  aspect-ratio: auto;
}