/* ============================================================================
   Crescent Meats HACCP — module-specific components.
   Consumes design-tokens.css only. Shared chrome (header/table/buttons/inputs)
   comes from app-shell.css — never restyled here.
   ============================================================================ */

/* ---- Status pills ---------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.pill--blue   { background: var(--pill-blue-bg);   color: var(--pill-blue-text); }
.pill--gray   { background: var(--pill-gray-bg);   color: var(--pill-gray-text); }
.pill--green  { background: var(--pill-green-bg);  color: var(--pill-green-text); }
.pill--red    { background: var(--pill-red-bg);    color: var(--pill-red-text); }
.pill--amber  { background: var(--pill-amber-bg);  color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

/* ---- Info banner ------------------------------------------------------------ */
.banner {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--banner-bg); border: 1px solid var(--banner-border);
  color: var(--banner-text); border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.banner a { color: var(--banner-link); }
/* Danger variant — quarantine / hold notices. */
.banner--danger { background: var(--pill-red-bg); border-color: #fca5a5; color: var(--pill-red-text); }
.banner--danger .icon { color: var(--pill-red-text); flex: none; }

/* Amber count chip turns red for the quarantine tab. */
.badge--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }

/* WO clearance gate line. */
.wo-gate {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  border-radius: var(--radius-card); font-size: var(--fs-sm); border: 1px solid var(--color-border);
}
.wo-gate--ok { background: var(--pill-green-bg); color: var(--pill-green-text); border-color: #86efac; }
.wo-gate--ok .icon { color: var(--pill-green-text); }
.wo-gate--pending { background: var(--color-canvas); color: var(--color-label); }
.wo-gate .icon { flex: none; }

/* ---- Detail document (centered card on gray canvas) ------------------------- */
.detail-canvas { background: var(--color-canvas); min-height: 100vh; padding: var(--space-6) var(--space-8); }
.doc {
  max-width: var(--doc-max-width); margin: 0 auto;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.doc-header { padding: var(--space-5) var(--space-6) 0; }
.doc-breadcrumb {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-label); font-size: var(--fs-sm);
  background: none; border: none; cursor: pointer; font-family: inherit;
  padding: 0; margin-bottom: var(--space-3);
}
.doc-breadcrumb:hover { color: var(--color-text); }
.doc-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.doc-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0; line-height: var(--lh-tight); }
.doc-title-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.doc-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.doc-desc { color: var(--color-label); margin: var(--space-3) 0 0; max-width: 70ch; }

/* Sub-tabs inside the document */
.subtabs {
  display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border);
  margin-top: var(--space-4); padding: 0 var(--space-6);
}
.subtab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--tab-inactive-color); height: var(--row-height); padding: 0 var(--space-3);
  border-bottom: var(--tab-indicator-height) solid transparent; display: inline-flex; align-items: center; gap: var(--space-2);
}
.subtab:first-child { padding-left: 0; }
.subtab:hover { color: var(--tab-active-color); }
.subtab--active { color: var(--tab-active-color); border-bottom-color: var(--tab-active-color); }
.doc-body { padding: var(--space-5) var(--space-6) var(--space-6); }

/* ---- Fields (small gray label above dark value) ------------------------------ */
.field { min-width: 0; }
.field-label { font-size: var(--fs-sm); color: var(--color-label); margin-bottom: 2px; }
.field-value { color: var(--color-text); }
.field-value:empty::before, .field-value.empty { color: var(--color-muted); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }

/* ---- CCP cards ---------------------------------------------------------------- */
.ccp-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
  background: var(--color-bg);
}
.ccp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ccp-card-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ccp-code { font-weight: var(--fw-semibold); }
.ccp-name { font-weight: var(--fw-medium); }
.ccp-card-actions { display: flex; gap: var(--space-1); flex: none; }
.ccp-section { margin-top: var(--space-3); }
.ccp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
@media (max-width: 720px) { .ccp-grid { grid-template-columns: 1fr; } }

/* Critical limit chips */
.limit-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.limit-chip {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: var(--space-1) var(--space-3); font-size: var(--fs-sm);
  background: var(--color-canvas);
}
.limit-chip b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ---- Empty state ----------------------------------------------------------------- */
.empty-state { text-align: center; color: var(--color-muted); padding: var(--space-8) 0; }
.empty-state .icon { width: 24px; height: 24px; margin-bottom: var(--space-2); }

/* ---- Modal ------------------------------------------------------------------------ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(12, 10, 9, 0.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh var(--space-4) var(--space-4); z-index: 50; overflow-y: auto;
}
.modal {
  background: var(--color-bg); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); width: 560px; max-width: 100%;
  padding: var(--space-5) var(--space-6); margin-bottom: 6vh;
}
.modal--wide { width: 760px; }
.modal-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-4); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.modal-error { color: var(--color-danger-text); font-size: var(--fs-sm); margin-top: var(--space-3); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.form-grid .form-field--full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: var(--fs-sm); color: var(--color-label); margin-bottom: var(--space-1); }
.form-field .input, .form-field select.input { width: 100%; }
.form-hint { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-base); }

/* Limits editor rows inside the CCP modal */
.limits-editor { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); }
.limit-row {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.6fr 0.6fr 0.6fr 0.6fr 28px;
  gap: var(--space-2); align-items: center; margin-bottom: var(--space-2);
}
.limit-row .input { width: 100%; height: 28px; font-size: var(--fs-sm); padding: 0 var(--space-2); }
.limit-row-head { font-size: var(--fs-xs); color: var(--color-label); margin-bottom: 0; }
.limit-row .icon-ghost { width: 28px; height: 28px; }

/* ---- Table grid (module treatment, layered over app-shell.css base) ----------------
   This module shows a full hairline grid on every table: vertical separators
   between cells, and a header row bordered top and bottom. Uses --color-border
   (crisper than the app-shell faint row line) so the grid reads clearly. */
.table th {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.table th, .table td {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
/* No outer vertical edges — internal separators only. */
.table th:first-child, .table td:first-child { border-left: none; }
.table th:last-child, .table td:last-child { border-right: none; }

/* ---- Version / audit / check-log tables inside the detail doc ----------------------
   Full-bleed to the doc card's inner edges (cancel .doc-body's 24px side padding),
   with first/last cells padded back to that inset — mirrors the list full-bleed. */
.doc-body .table {
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  width: calc(100% + 2 * var(--space-6));
}
.doc-body .table th, .doc-body .table td { padding: 0 var(--space-3); }
.doc-body .table th:first-child, .doc-body .table td:first-child { padding-left: var(--space-6); }
.doc-body .table th:last-child, .doc-body .table td:last-child { padding-right: var(--space-6); }
.audit-details { color: var(--color-label); font-size: var(--fs-sm); }

/* ---- Work-order quality checks (Deliverable 3) --------------------------------------- */
.wo-plan-line {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  background: var(--color-canvas); border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.wo-plan-line .icon { color: var(--color-label); }
.wo-step-head {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-label);
  text-transform: uppercase; letter-spacing: .04em;
  margin: var(--space-4) 0 var(--space-2);
}
.wo-history-head { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-6) 0 var(--space-3); }
.wo-last-reading {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-label);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.reading-chip {
  display: inline-flex; align-items: center; border-radius: var(--radius-input);
  padding: 1px var(--space-2); background: var(--pill-green-bg); color: var(--pill-green-text);
  font-variant-numeric: tabular-nums;
}
.reading-chip--bad { background: var(--pill-red-bg); color: var(--pill-red-text); font-weight: var(--fw-semibold); }

/* Log-check modal per-limit rows */
.check-limit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.check-limit-label div:first-child { font-weight: var(--fw-medium); }
.check-limit-input { display: flex; align-items: center; gap: var(--space-3); }
.check-limit-input .input { flex: 1; }
.limit-status { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; min-width: 92px; }
.limit-status--ok { color: var(--pill-green-text); }
.limit-status--bad { color: var(--color-danger-text); }

/* ---- Bulk action bar (item assignments) --------------------------------------------- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--pill-violet-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.bulk-count { font-weight: var(--fw-semibold); color: var(--pill-violet-text); }
.bulk-bar .input { min-width: 220px; }

/* ---- Compliance reports (Deliverable 5) --------------------------------------------- */
.toolbar--wrap { align-items: flex-end; }
.toolbar-actions--wrap { flex-wrap: wrap; row-gap: var(--space-2); }
.toolbar-actions--wrap .field .field-label { margin-bottom: 2px; }
.toolbar-actions--wrap .input[type="date"] { width: 150px; }
.report-scroll { overflow-x: auto; }

/* On-screen report cells keep long text readable but bounded. */
#tab-body .table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Print report (Save as PDF) — shown only when printing --------------------------- */
#print-root { display: none; }
@media print {
  #app { display: none !important; }
  #print-root { display: block !important; }
  @page { size: landscape; margin: 14mm; }
}
.print-doc { color: #000; font-family: var(--font-sans); font-size: 10px; }
.print-org { font-size: 13px; font-weight: 700; }
.print-title { font-size: 18px; margin: 2px 0 0; }
.print-sub { color: #444; margin-bottom: 10px; }
.print-meta { border-collapse: collapse; margin-bottom: 12px; font-size: 10px; }
.print-meta td { border: 1px solid #999; padding: 3px 8px; }
.print-meta td:nth-child(odd) { background: #f0f0f0; font-weight: 600; }
.print-table { width: 100%; border-collapse: collapse; font-size: 9px; }
.print-table th, .print-table td { border: 1px solid #999; padding: 3px 5px; text-align: left; vertical-align: top; }
.print-table thead th { background: #e8e8e8; }
.print-table thead { display: table-header-group; }   /* repeat header each page */
.print-table tr { page-break-inside: avoid; }
.print-fail { color: #b91c1c; font-weight: 700; }
.print-sign { display: flex; gap: 40px; margin-top: 28px; }
.print-sign-label { font-size: 9px; color: #444; margin-top: 2px; }

/* ---- Toast -------------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  border-radius: var(--radius-input); padding: var(--space-2) var(--space-4);
  font-size: var(--fs-base); box-shadow: var(--shadow-md); z-index: 60;
}
.toast--error { background: var(--color-danger-text); }