/*
 * Admin: inbox triage cockpit
 * admin/dashboard/_triage_* and _inbox_detail_* partials.
 */

/* =========================================================================
   Cockpit triage (5lg.4) — always-expanded diff rows + persistent kbd legend
   + bulk action bar + undo toast. Lives inside .admin-rail-detail.
   ========================================================================= */

.cockpit-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.cockpit-stats-left {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.pill-primary { background: var(--color-primary); color: var(--color-text-inverse); }
.pill .pill-label { opacity: 0.85; font-weight: 500; }

/* Inline filter chip form */
.cockpit-filter-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
}
.filter-chip-label { color: var(--color-text-muted); }
.filter-chip-select {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: inherit;
  font-weight: 600;
  padding: 2px 18px 2px 4px;
  font-family: inherit;
}
.filter-chip-clear {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.filter-chip-clear:hover { color: var(--color-text); }

/* Persistent keyboard legend */
.kbd-legend {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-2xs);
  color: var(--color-text-light);
  flex-wrap: wrap;
}
.kbd-legend-item { display: inline-flex; gap: 4px; align-items: center; }
.kbd-legend kbd,
.toast-undo-wrap kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 1px 5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  background: var(--color-bg-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
}

/* Bulk action bar — visible when ≥1 checkbox checked (Stimulus toggles [hidden]) */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar-count { font-weight: 600; }
.bulk-bar-clear { margin-left: auto; }

/* Cockpit triage table */
.cockpit-form { margin-top: 0; }
.cockpit-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.cockpit-table thead th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: nowrap;
}
.cockpit-table thead th.cell-actions { text-align: right; }
.cockpit-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  transition: background-color 0.1s, border-color 0.1s;
}
.cockpit-table tbody tr.focused {
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}
.cockpit-table tbody tr.snoozed {
  opacity: 0.55;
}
.cockpit-table tbody td {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  vertical-align: middle;
}

/* Column sizing — give the diff column the breathing room, keep the rest tight */
.cockpit-table .cell-checkbox { width: 32px; }
.cockpit-table .cell-wine { font-weight: 600; max-width: 220px; }
.cockpit-table .cell-wine .year { color: var(--color-text-muted); font-weight: 500; margin-left: var(--space-xs); }
.cockpit-table .cell-diff { width: 40%; }
.cockpit-table td.cell-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Per-row action button cluster — flex lives on the inner div so the <th>/<td>
   stays a normal table cell. button_to renders each button as its own inline
   <form>, so display: inline-flex keeps the cluster on one line without
   breaking the surrounding table layout. */
.cockpit-table td.cell-actions > .cell-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: flex-end;
}

.cockpit-table td.cell-actions > .cell-actions > * {
  flex: 0 0 auto;
}

/* Text-style badges for cockpit triage row content (5lg.4). The 5lg.2 .badge
   family was admin-user/tier-flavoured; these are colour-coded by row type. */
.badge-field      { background: color-mix(in srgb, var(--color-info) 14%, transparent); color: var(--color-info); }
.badge-match      { background: color-mix(in srgb, var(--color-promo) 14%, transparent); color: var(--color-promo); }
.badge-producer   { background: color-mix(in srgb, var(--color-producer) 14%, transparent); color: var(--color-producer); }
.badge-provider   { background: color-mix(in srgb, var(--color-secondary) 18%, transparent); color: var(--color-secondary); }
.badge-data_report { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.badge-source {
  background: var(--color-bg-hover);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-2xs);
}

/* Inline diff display in the cell-diff column — wraps on long values */
.diff-inline {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
  min-width: 0;
}
.diff-inline .before {
  color: var(--color-text-muted);
  text-decoration: line-through;
  word-break: break-word;
}
.diff-inline .arrow { color: var(--color-text-muted); }
.diff-inline .after {
  color: var(--color-text);
  font-weight: 600;
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  padding: 1px var(--space-xs);
  border-radius: var(--radius-sm);
  word-break: break-word;
}

/* button_to renders each per-row action as its own <form>; keep them inline so
   they sit side-by-side instead of stacking vertically. */
.inline-action-form {
  display: inline-block;
  margin: 0;
}

/* Cockpit row action buttons — tight, desktop-only icon buttons. Skip the
   .btn-icon family because its 44px tap-target makes inline table actions
   feel sparse and floating. */
.triage-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s, border-color 0.1s;
  font-family: inherit;
}
.triage-row-action:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.triage-row-action-accept {
  color: var(--color-success);
}
.triage-row-action-accept:hover {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}
.triage-row-action-reject {
  color: var(--color-danger);
}
.triage-row-action-reject:hover {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}
.triage-row-action-snooze {
  color: var(--color-warning);
}
.triage-row-action-snooze:hover {
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
  color: var(--color-warning);
}
.triage-row-action-open {
  width: auto;
  padding: 0 var(--space-sm);
  font-size: var(--font-size-2xs);
  color: var(--color-text-light);
  border-color: var(--color-border);
}
.triage-row-action-open:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-hover);
  color: var(--color-text);
  text-decoration: none;
}
.triage-row-action-edit {
  color: var(--color-text-light);
  text-decoration: none;
}
.triage-row-action-edit:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
  text-decoration: none;
}

/* Undo toast — floats bottom-right; auto-dismissed by toast-dismiss Stimulus */
.toast {
  position: fixed;
  right: var(--space-xl);
  bottom: var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  font-size: var(--font-size-sm);
  z-index: var(--z-toast);
  animation: toast-in 0.18s ease-out;
}
.toast.dismissed {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast-icon { color: var(--color-success); font-weight: 700; }
.toast-undo-button {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  padding: 0 var(--space-xs);
}
.toast-undo-button:hover { color: var(--color-primary-dark); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}