/* CSS Order Intake — review queue UI. */

:root {
  --bg: #f1f5f9;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #0f172a;

  /* Status colours are the four-colour rule, read from tokens.css — this
     board used to carry a palette of its own, so the same order was amber
     here and red on proofing (audit 2026-09-02 #21). Nothing below may
     spell a colour out; a model test enforces it. */
  --st-received: var(--tone-neutral);
  --st-needs_review: var(--tone-warn);
  --st-needs_more_info: var(--tone-neutral);
  --st-approved: var(--tone-accent);
  --st-ready: var(--tone-accent);
  --st-entered: var(--tone-ok);
  --st-not_order: var(--tone-muted);
  --st-linked: var(--tone-muted);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: inherit; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--brand); color: #fff;
}
.brand { font-weight: 700; text-decoration: none; letter-spacing: .2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.whoami { color: #cbd5e1; font-size: 13px; }
.topnav { color: #e2e8f0; font-size: 13px; font-weight: 600; text-decoration: none; }
.topnav:hover { color: #fff; text-decoration: underline; }
.linkbtn, .linkbtn button {
  background: transparent; color: #cbd5e1; border: 1px solid #334155;
  border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.linkbtn:hover { color: #fff; border-color: #64748b; }

/* ---- Flash ------------------------------------------------------------ */
.flash { padding: 9px 18px; font-size: 13px; }
.flash-notice { background: #dcfce7; color: #14532d; }
.flash-alert { background: #fee2e2; color: #7f1d1d; }

main { padding: 16px 18px; }

/* ---- Board ------------------------------------------------------------ */
.board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 12px;
}
.column {
  flex: 0 0 288px; background: #e9eef5; border-radius: 10px;
  display: flex; flex-direction: column; max-height: calc(100vh - 120px);
}
.column-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-top: 3px solid var(--muted);
  border-radius: 10px 10px 0 0; background: #fff;
}
.column-title { font-weight: 650; }
.column-count {
  background: #eef2f7; color: var(--muted); border-radius: 999px;
  padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.column-body {
  padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px;
  min-height: 60px;
}
.column-body.dragover { background: #dbe4f0; outline: 2px dashed #94a3b8; outline-offset: -6px; }

/* Column accents by status */
.st-received       { border-top-color: var(--st-received); }
.st-needs_review   { border-top-color: var(--st-needs_review); }
.st-needs_more_info{ border-top-color: var(--st-needs_more_info); }
.st-approved       { border-top-color: var(--st-approved); }
.st-ready          { border-top-color: var(--st-ready); }
.st-entered        { border-top-color: var(--st-entered); }
.st-not_order      { border-top-color: var(--st-not_order); }
.st-linked         { border-top-color: var(--st-linked); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06); cursor: grab;
}
.card:active { cursor: grabbing; }
.card-link { display: block; padding: 10px 11px; text-decoration: none; color: inherit; }
.card-subject { font-weight: 600; margin-bottom: 3px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-from { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--muted); font-size: 12px; }
.card-chips { display: flex; align-items: center; gap: 6px; }
.card-attn { background: #f1f5f9; border-radius: 6px; padding: 1px 6px; }
/* "⚠ client": the client could not be resolved, so this order needs eyes
   before it is entered. That is what red means here, in the same two tints
   .palert uses. It was amber — a fifth colour, outside the four-colour rule
   (Dorry, slice-2 gate). */
.card-flag {
  background: var(--warn-bg); color: var(--warn-deep); border: 1px solid var(--warn);
  border-radius: 6px; padding: 1px 6px; font-weight: 600;
}

/* ---- Detail ----------------------------------------------------------- */
.detail { max-width: 1100px; margin: 0 auto; }
.back { margin: 0 0 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.email-subject { font-size: 19px; margin: 0 0 12px; }
.email-headers { display: grid; grid-template-columns: 60px 1fr; gap: 4px 10px; margin: 0 0 14px; }
.email-headers dt { color: var(--muted); }
.email-headers dd { margin: 0; }
.attachments { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
.attachments h2, .history h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.attachments ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.att-type { color: var(--muted); font-size: 12px; margin-left: 6px; }
.email-body {
  white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--line);
  padding-top: 14px; font-size: 13.5px; color: #1e293b; max-height: 60vh; overflow-y: auto;
}

/* ---- Ticket panel ----------------------------------------------------- */
.status-badge, .card-attn { display: inline-block; }
.status-badge {
  color: #fff; border-radius: 6px; padding: 3px 10px; font-weight: 600; font-size: 13px;
}
.status-blurb { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.ticket-status { margin-bottom: 16px; }
.st-received.status-badge,       .status-badge.st-received       { background: var(--st-received); }
.st-needs_review.status-badge,   .status-badge.st-needs_review   { background: var(--st-needs_review); }
.st-needs_more_info.status-badge,.status-badge.st-needs_more_info{ background: var(--st-needs_more_info); }
.st-approved.status-badge,       .status-badge.st-approved       { background: var(--st-approved); }
.st-ready.status-badge,          .status-badge.st-ready          { background: var(--st-ready); }
.st-entered.status-badge,        .status-badge.st-entered        { background: var(--st-entered); }
/* The muted tint is the light grey, so it carries its own ink rather than
   the white the other badges use — same treatment as .pdecided.ignored. */
.st-not_order.status-badge,      .status-badge.st-not_order      { background: var(--st-not_order); color: var(--tone-muted-ink); }
.st-linked.status-badge,         .status-badge.st-linked         { background: var(--st-linked); color: var(--tone-muted-ink); }

.recognition { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 4px; }
.recognition h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 6px; }
.rec-verdict { margin: 0; }
.rec-conf { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.rec-reason { margin: 4px 0 2px; font-size: 13px; }
.rec-model { margin: 0; color: var(--muted); font-size: 11.5px; }

/* ---- Extraction block ------------------------------------------------- */
/* Matches .recognition's section-boundary convention: no self margin-top; the
   gap above is owned by the previous section's margin-bottom. */
.extraction { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 4px; }
.extraction h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.ext-empty { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.ext-error { margin: 0; font-size: 13px; color: #991b1b; }
.ext-error-detail { color: var(--muted); font-size: 11.5px; }
.ext-model { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }

.ext-order { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #f8fafc; }
.ext-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ext-order-n { font-weight: 600; font-size: 12.5px; }
.ext-conf { color: var(--muted); font-size: 12px; }

/* Compact variant of the ticket status-badge, reused for per-order disposition
   so the page speaks one badge language (colours come from the st-* classes). */
.status-badge.sm { font-size: 11px; padding: 2px 8px; }

/* Values below are LLM/email-sourced and uncontrolled — wrap long tokens rather
   than let them blow out the fixed-width aside (same guard as .email-body). */
.ext-fields { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 13px; }
.ext-fields dt { color: var(--muted); }
.ext-fields dd { margin: 0; overflow-wrap: anywhere; }

.ext-lines-wrap { overflow-x: auto; margin: 0 0 8px; }
.ext-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ext-lines th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 3px 6px; white-space: nowrap; }
.ext-lines td { border-bottom: 1px solid var(--line); padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; }
.ext-lines tr:last-child td { border-bottom: none; }

/* Client resolution: a status badge plus the canonical master name it resolved
   to, and (when it adds something) the resolution note. Sits between the header
   fields and the sample lines. .ext-note is the muted, informational treatment
   for a note under a confident "known" badge; a note that needs action reuses the
   amber .ext-flag/.ext-missing chip instead. */
.ext-resolution { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.ext-canonical { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.ext-defaults { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.ext-defaults-tag { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ext-default { background: var(--line); border-radius: 4px; padding: 1px 6px; }
.ext-default strong { color: var(--ink, inherit); }
.ext-note { font-size: 12.5px; margin: 0 0 8px; color: var(--muted); overflow-wrap: anywhere; }

.ext-flag { font-size: 12.5px; margin: 6px 0 0; padding: 6px 9px; border-radius: 6px; overflow-wrap: anywhere; }
.ext-missing { background: #fef3c7; color: #92400e; }
.ext-conflicts { background: #fee2e2; color: #991b1b; list-style: none; padding: 6px 9px; }
.ext-conflicts li { margin: 0; }
.ext-conflicts li + li { margin-top: 3px; }

/* Thread linkage on the ticket detail. */
.thread-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.thread-flag { font-size: 12.5px; margin: 10px 0 0; padding: 8px 10px; border-radius: 6px; overflow-wrap: anywhere; }
.thread-flag ul { margin: 4px 0 0; padding-left: 18px; }
.thread-flag.field-updates { background: #fef3c7; color: #92400e; }
.thread-flag.after-entry { background: #fee2e2; color: #991b1b; }
.thread-flag.corrections-stale { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }

.transition-form { border-top: 1px solid var(--line); padding-top: 14px; }
.transition-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.transition-form .muted { color: var(--muted); font-weight: 400; }
.transition-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font: inherit; resize: vertical;
}
.status-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.stbtn {
  border: 1px solid transparent; color: #fff; border-radius: 7px; padding: 6px 11px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.stbtn.st-received { background: var(--st-received); }
.stbtn.st-needs_review { background: var(--st-needs_review); }
.stbtn.st-needs_more_info { background: var(--st-needs_more_info); }
.stbtn.st-ready { background: var(--st-ready); }
.stbtn.st-entered { background: var(--st-entered); }
.stbtn.st-not_order { background: var(--st-not_order); color: var(--tone-muted-ink); }
.stbtn:hover { filter: brightness(1.07); }

.history { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.history ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { font-size: 13px; }
.hist-when { color: var(--muted); font-size: 12px; display: block; }
.hist-actor { color: var(--muted); }
.hist-note { background: #f8fafc; border-left: 3px solid var(--line); padding: 5px 9px; margin-top: 4px; border-radius: 0 5px 5px 0; }

/* ---- Login gate ------------------------------------------------------- */
.gate { max-width: 360px; margin: 12vh auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 32px; text-align: center; }
.gate h1 { margin: 0 0 6px; }
.gate p { color: var(--muted); margin: 0 0 20px; }
.btn { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 20px;
  font-size: 15px; font-weight: 600; cursor: pointer; }

@media (max-width: 800px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* ---- Stalled banner ---------------------------------------------------- */
/* The board's one piece of bad news: tickets nobody is waiting on because the
   pipeline dropped them. Amber, not red — nothing is broken now, but something
   needs a hand. */
.stalled-banner {
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.stalled-banner a { font-weight: 600; }