/*
 * Torvan Medical Dispatched! — Admin design system (v1)
 *
 * Load order: brand.css → design-system.css → workspace.css → page CSS
 *
 * Layers:
 *   1. Tokens (brand.css :root)
 *   2. Primitives (this file) — pills, panels, inputs, chips, cards, alerts
 *   3. Compositions (workspace.css) — catalog, ops board, review, item hero
 */

/* ── Typography ─────────────────────────────────────────────────────────── */

:root {
  --tv-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tv-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --tv-text-xs: 0.75rem;
  --tv-text-sm: 0.8125rem;
  --tv-text-base: 1rem;
  --tv-text-lg: 1.1875rem;
  --tv-text-xl: 1.4375rem;
  --tv-text-2xl: 1.75rem;

  --tv-weight-regular: 400;
  --tv-weight-medium: 500;
  --tv-weight-semibold: 600;
  --tv-weight-bold: 700;
  --tv-weight-extrabold: 800;

  --tv-leading-tight: 1.2;
  --tv-leading-normal: 1.5;

  --tv-border: var(--hairline-color, #d8dce6);
  --tv-shadow-sm: 0 1px 2px rgb(var(--tv-brand-navy-rgb) / 0.06);
  --tv-shadow-md: 0 4px 12px rgb(var(--tv-brand-navy-rgb) / 0.08);

  --tv-focus-ring-color: var(--tv-brand-navy);
  --tv-focus-ring-offset: 2px;
}

/* Steward surfaces share one type stack */
.tv-workspace-body,
.tv-home-ops,
.tv-catalog-page,
.tv-all-tickets,
.tv-review-page,
.tv-ops-hero,
.tv-item-hero {
  font-family: var(--tv-font-sans);
  font-size: var(--tv-text-base);
  line-height: var(--tv-leading-normal);
  color: var(--tv-ink);
}

/* ── Workspace shell (every focused route) ─────────────────────────────── */

.tv-workspace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tv-space-4);
  max-width: var(--tv-workspace-max);
  margin: 0 auto var(--tv-space-4);
  padding-bottom: var(--tv-space-3);
  border-bottom: 1px solid var(--tv-border);
}

.tv-workspace-header h1 {
  margin: 0;
  font-size: var(--tv-text-xl);
  font-weight: var(--tv-weight-bold);
  letter-spacing: -0.02em;
  color: var(--tv-brand-navy);
  line-height: var(--tv-leading-tight);
}

.tv-workspace-actions {
  display: flex;
  gap: var(--tv-space-2);
  flex-wrap: wrap;
  align-items: center;
}

.tv-workspace-body {
  max-width: var(--tv-workspace-max);
  margin: 0 auto;
}

/* Django changelist / legacy forms inside steward flows */
#content .breadcrumbs,
.tv-breadcrumbs {
  font-size: var(--tv-text-sm);
  color: var(--tv-ink-muted);
  margin: 0 0 var(--tv-space-3);
}

#content .breadcrumbs a,
.tv-breadcrumbs a {
  color: var(--tv-brand-navy);
  font-weight: var(--tv-weight-semibold);
  text-decoration: none;
}

#content .breadcrumbs a:hover,
.tv-breadcrumbs a:hover {
  text-decoration: underline;
  color: var(--tv-primary-hover);
}

.tv-breadcrumbs span,
#content .breadcrumbs strong {
  color: var(--tv-ink);
  font-weight: var(--tv-weight-semibold);
}

/* ── Panel (toolbar, review column, filter strip) ──────────────────────── */

.tv-panel {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-lg);
  background: var(--tv-surface-raised);
  padding: var(--tv-space-4);
}

.tv-panel--muted {
  background: var(--tv-surface-panel);
}

.tv-panel--warn {
  background: var(--tv-in-progress-bg);
  border-color: var(--tv-in-progress-border);
  color: var(--tv-in-progress);
}


.tv-panel__title,
.tv-ops-hero-section-title {
  margin: 0 0 var(--tv-space-3);
  padding-bottom: var(--tv-space-2);
  border-bottom: 1px solid var(--tv-border);
  font-size: var(--tv-text-base);
  font-weight: var(--tv-weight-bold);
  color: var(--tv-brand-navy);
  letter-spacing: 0.01em;
}

/* ── Card (ops ticket, stat tile) ──────────────────────────────────────── */

.tv-card {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-md);
  background: var(--tv-surface-raised);
  padding: var(--tv-space-3);
  scroll-margin-top: var(--tv-space-6);
}

.tv-home-ops-card {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-md);
  background: var(--tv-surface-raised);
  padding: var(--tv-space-3);
  scroll-margin-top: var(--tv-space-6);
}

/* ── Lane column (command center + hero sections) ──────────────────────── */

.tv-lane,
.tv-home-lane {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-lg);
  background: var(--tv-surface-raised);
  padding: var(--tv-space-3);
}

.tv-home-lane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tv-space-2);
  margin-bottom: var(--tv-space-3);
}

.tv-home-lane-title {
  margin: 0;
  font-size: var(--tv-text-base);
  font-weight: var(--tv-weight-bold);
  color: var(--tv-brand-navy);
}

.tv-home-lane-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 2px 8px;
  border-radius: var(--tv-radius-pill);
  background: var(--tv-surface-panel);
  border: 1px solid var(--tv-border);
  font-size: var(--tv-text-xs);
  font-weight: var(--tv-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--tv-ink-muted);
}

.tv-hub-lane-list {
  display: flex;
  flex-direction: column;
  gap: var(--tv-space-2);
}

.tv-hub-lane-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tv-space-3);
  align-items: center;
  padding: var(--tv-space-2) var(--tv-space-3);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-md);
  background: var(--tv-surface-raised);
  color: var(--tv-ink);
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.tv-hub-lane-row:hover,
.tv-hub-lane-row:focus-visible {
  background: var(--tv-surface-panel);
  border-color: var(--tv-border-strong);
}

.tv-hub-lane-po {
  font-family: var(--tv-font-mono);
  font-weight: var(--tv-weight-bold);
  font-size: var(--tv-text-sm);
  color: var(--tv-brand-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-hub-lane-customer {
  font-size: var(--tv-text-sm);
  color: var(--tv-ink-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-hub-lane-footer {
  display: inline-block;
  margin-top: var(--tv-space-3);
  font-size: var(--tv-text-sm);
  font-weight: var(--tv-weight-bold);
  color: var(--tv-brand-navy);
  text-decoration: none;
}

.tv-hub-lane-footer:hover {
  text-decoration: underline;
}

/* ── Pills & buttons ───────────────────────────────────────────────────── */

.tv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tv-space-1);
  padding: 6px 12px;
  min-height: 2rem;
  border-radius: var(--tv-radius-pill);
  border: 1px solid var(--tv-border);
  background: var(--tv-surface-raised);
  font-size: var(--tv-text-sm);
  font-weight: var(--tv-weight-medium);
  line-height: 1;
  text-decoration: none;
  color: var(--tv-ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.tv-pill:hover,
.tv-pill:focus {
  color: var(--tv-brand-navy);
  background: var(--tv-surface-panel);
  border-color: var(--tv-border-strong);
}

.tv-pill:focus-visible {
  outline: 2px solid var(--tv-focus-ring-color);
  outline-offset: var(--tv-focus-ring-offset);
}

.tv-pill-primary,
.tv-pill-primary:link,
.tv-pill-primary:visited,
button.tv-pill-primary {
  background: var(--tv-brand-navy);
  border-color: var(--tv-brand-navy);
  color: var(--tv-on-primary);
}

.tv-pill-primary:hover,
.tv-pill-primary:focus,
button.tv-pill-primary:hover {
  background: var(--tv-primary-hover);
  border-color: var(--tv-primary-hover);
  color: var(--tv-on-primary);
}

.tv-pill-primary:focus-visible,
button.tv-pill-primary:focus-visible {
  outline: 2px solid var(--tv-brand-mint);
  outline-offset: var(--tv-focus-ring-offset);
}

.tv-pill-danger {
  background: var(--tv-urgent-bg);
  border-color: var(--tv-urgent-border);
  color: var(--tv-urgent);
}

.tv-pill--accent {
  border-color: color-mix(in srgb, var(--tv-brand-mint, #00ac5c) 45%, var(--tv-border));
  background: color-mix(in srgb, var(--tv-brand-mint, #00ac5c) 8%, var(--tv-surface-raised));
  color: var(--tv-brand-navy);
  font-weight: var(--tv-weight-semibold);
}

.tv-pill--accent:hover,
.tv-pill--accent:focus {
  border-color: var(--tv-brand-mint, #00ac5c);
  background: color-mix(in srgb, var(--tv-brand-mint, #00ac5c) 14%, var(--tv-surface-raised));
}

/* ── Form controls ─────────────────────────────────────────────────────── */

.tv-input,
.tv-search-input {
  min-height: 2.25rem;
  padding: 6px 10px;
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-md);
  font-family: var(--tv-font-sans);
  font-size: var(--tv-text-base);
  background: var(--tv-surface-raised);
  color: var(--tv-ink);
}

.tv-input:focus,
.tv-search-input:focus {
  border-color: var(--tv-brand-navy);
  outline: 2px solid color-mix(in srgb, var(--tv-brand-navy) 22%, transparent);
  outline-offset: 1px;
}

.tv-search-label {
  font-weight: var(--tv-weight-semibold);
  font-size: var(--tv-text-sm);
  color: var(--tv-ink-muted);
}

.tv-quiet {
  font-size: var(--tv-text-sm);
  font-weight: var(--tv-weight-regular);
  color: var(--tv-ink-muted);
}

/* ── Chips & badges ─────────────────────────────────────────────────────── */

.tv-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--tv-radius-pill);
  border: 1px solid var(--tv-border);
  padding: 2px 8px;
  font-size: var(--tv-text-xs);
  font-weight: var(--tv-weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.tv-home-ops-source,
.tv-home-ops-ship-badge,
.tv-home-ops-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--tv-radius-pill);
  border: 1px solid var(--tv-border);
  padding: 2px 8px;
  font-size: var(--tv-text-xs);
  font-weight: var(--tv-weight-semibold);
}

.tv-home-ops-source--pdf {
  color: var(--tv-brand-navy);
  background: var(--tv-upcoming-bg);
  border-color: var(--tv-upcoming-border);
}

.tv-home-ops-source--tablet {
  color: var(--tv-ink-muted);
  background: var(--tv-surface-panel);
}

.tv-home-ops-ship-badge--overdue {
  color: var(--tv-urgent);
  background: var(--tv-urgent-bg);
  border-color: var(--tv-urgent-border);
}

.tv-home-ops-ship-badge--today {
  color: var(--tv-in-progress);
  background: var(--tv-in-progress-bg);
  border-color: var(--tv-in-progress-border);
}

.tv-home-ops-ship-badge--upcoming {
  color: var(--tv-upcoming);
  background: var(--tv-upcoming-bg);
  border-color: var(--tv-upcoming-border);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

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

.tv-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: var(--tv-text-xs);
  font-weight: var(--tv-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tv-ink-muted);
  background: var(--tv-surface-panel);
  border-bottom: 2px solid var(--tv-border);
}

.tv-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tv-border);
  vertical-align: top;
  color: var(--tv-ink);
}

.tv-table tbody tr:hover td {
  background: var(--tv-surface-panel);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.tv-alert {
  padding: var(--tv-space-3) var(--tv-space-4);
  border-radius: var(--tv-radius-md);
  border: 1px solid var(--tv-border);
  font-size: var(--tv-text-sm);
}

.tv-alert--danger,
.tv-ptu-error,
.tv-review-blockers {
  background: var(--tv-urgent-bg);
  border-color: var(--tv-urgent-border);
  color: var(--tv-urgent);
}

.tv-alert--success {
  background: var(--tv-success-bg);
  border-color: var(--tv-success-border);
  color: var(--tv-success);
}

/* ── Dropzone (shared intake language) ───────────────────────────────────── */

.tv-dropzone {
  border: 2px dashed var(--tv-border-upload);
  border-radius: var(--tv-radius-lg);
  background: var(--tv-surface-upload);
  color: var(--tv-brand-navy);
}

.tv-dropzone-label {
  color: var(--tv-brand-navy);
  font-weight: var(--tv-weight-semibold);
}

/* ── PO / monospace data ─────────────────────────────────────────────────── */

.tv-home-ops-po,
.tv-review-part-code,
code,
.tv-asm-code {
  font-family: var(--tv-font-mono);
}

.tv-home-ops-po {
  margin: 0;
  font-weight: var(--tv-weight-bold);
}

@media (max-width: 767px) {
  .tv-workspace-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tv-space-3);
  }
  .tv-workspace-header h1 {
    font-size: var(--tv-text-lg);
  }
  .tv-workspace-actions {
    width: 100%;
    gap: var(--tv-space-2);
  }
  .aligned .form-row > label {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin-bottom: 6px;
    text-align: left !important;
  }
  .aligned .form-row > input:not([type="checkbox"]),
  .aligned .form-row > select,
  .aligned .form-row > textarea,
  .aligned .form-row .form-multiline,
  .aligned .form-row .related-widget-wrapper {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* Allow checkboxes to stay inline with their labels */
  .aligned .form-row > input[type="checkbox"] {
    display: inline-block !important;
    width: auto !important;
    margin: 0 8px 0 0 !important;
  }
  .aligned .form-row > input[type="checkbox"] + label {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
  }
  .submit-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .submit-row input,
  .submit-row a {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}



/* ── Live attention board ── */
.tv-home-escalations { margin-bottom: 1rem; }
.tv-hub-lane-row--escalation { border-left: 3px solid var(--tv-warn, #b45309); }
.tv-hub-lane-held {
  font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: 0.4rem; background: #fde8e8; color: #9b1c1c;
}
.tv-hub-lane-note { font-style: italic; opacity: 0.8; }
.tv-hub-lane-progress { font-variant-numeric: tabular-nums; }
@keyframes tv-attn-flash {
  0% { background: #fef3c7; }
  100% { background: transparent; }
}
.tv-attn-new { animation: tv-attn-flash 2s ease-out 3; }

/* Quiet pickable / needs-production indicator (dot + muted label).
   Deliberately low-contrast — reads as metadata, not a call to action. */
.tv-class-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--tv-ink-muted, #6b7280);
  white-space: nowrap;
}
.tv-class-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tv-class-dot--pick { background: var(--tv-ink-muted, #9aa3af); opacity: .55; }
.tv-class-dot--kit { background: var(--tv-brand-navy, #2563eb); opacity: .8; }
.tv-class-dot--elec { background: var(--tv-warn, #b45309); }
.tv-class-dot--excl { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tv-ink-muted, #c2c7cf); }
.tv-hero-class { margin: -2px 0 10px; }