/*
 * css/handover-pack.css — FINAL HANDOVER PACK PASS
 * -----------------------------------------------------------------------
 * Every rule here is namespaced `.hopack-` (UI panels) or `.hopack-doc-`
 * (the printable document) so nothing here can collide with existing
 * `.docmod-*` / `.report-*` / `.ramsgen-*` styles — this file only ADDS
 * what those don't already cover. Reuses `.docmod-panel`, `.ep-field`,
 * `.btn`, `.status-pill`, `.docmod-row-card` wherever they already fit.
 */

/* ---- readiness grid ---- */
.hopack-readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.hopack-readiness-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); background: var(--bg-elevated-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.hopack-readiness-tile-lbl { font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.hopack-readiness-tile-val { font-family: var(--font-display); font-size: 1.02em; font-weight: 700; color: var(--text); }

.hopack-all-clear { padding: var(--space-3) var(--space-4); background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--radius-md); color: var(--ok); font-size: 0.86em; font-weight: 600; }

.hopack-list-head { font-size: 0.76em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-3) 0 6px; }
.hopack-list-head-block { color: var(--danger); }
.hopack-list-head-warn { color: var(--warn); }
.hopack-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hopack-block-item, .hopack-warning-item { padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.84em; }
.hopack-block-item { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.hopack-warning-item { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }

/* ---- pack builder ---- */
.hopack-subhead { font-size: 0.86em; font-weight: 700; margin: var(--space-4) 0 4px; }
.hopack-help { margin: 0 0 var(--space-3); font-size: 0.8em; color: var(--text-faint); }
.hopack-sections-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.hopack-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.86em; cursor: pointer; }
.hopack-check input { width: 16px; height: 16px; flex: none; }
.hopack-locked-text { font-size: 0.88em; color: var(--text-muted); margin: 0 0 var(--space-3); }

.hopack-preview { margin-top: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-4); background: var(--bg-elevated-2); }
.hopack-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-strong); flex-wrap: wrap; }
.hopack-preview-toolbar p { margin: 0; font-size: 0.84em; color: var(--text-faint); }

/* =========================================================================
   PRINTABLE DOCUMENT — namespaced `.hopack-doc-*` (matches
   js/handover-pack-document.js). Light "paper" surface, same visual
   language as `.ramsgen-doc` (RAMS Generator's own printable document),
   so a customer receiving both documents from Rackulate sees one
   consistent house style.
   ========================================================================= */
/* PASS 2 §17-19: same paper tone as the Issued RAMS document
   (css/rams-generator.css's .ramsgen-doc) — value only. */
.hopack-doc { display: block; background: #fafbfc; color: #1a1d26; border-radius: var(--radius-md); padding: 40px; font-family: var(--font-sans); line-height: 1.5; max-width: 860px; margin: 0 auto; box-shadow: 0 0 0 1px var(--border-strong); }
.hopack-doc h1, .hopack-doc h2, .hopack-doc h3 { font-family: var(--font-display); color: #0d0d12; }
.hopack-doc-cover { border-bottom: 3px solid #14141a; padding-bottom: 20px; margin-bottom: 24px; }
.hopack-doc-companyblock { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hopack-doc-logo { max-height: 44px; max-width: 160px; object-fit: contain; }
.hopack-doc-company-text { font-size: 0.78em; color: #555; line-height: 1.4; }
.hopack-doc-brand { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.06em; font-size: 0.8em; color: #555; }
.hopack-doc-brand span { color: #999; }
.hopack-doc-status { display: inline-block; margin: 10px 0; font-family: var(--font-mono); font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: var(--radius-pill); background: #f2f2f5; }
.hopack-doc-cover h1 { font-size: 1.7em; margin: 6px 0 2px; }
.hopack-doc-cover-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.82em; color: #555; margin: 10px 0; }
.hopack-doc-note { font-size: 0.82em; color: #555; margin: 8px 0; }
.hopack-doc-section { margin: 22px 0; page-break-inside: avoid; }
.hopack-doc-section h2 { font-size: 1.02em; border-bottom: 1px solid #ddd; padding-bottom: 6px; margin-bottom: 10px; }
.hopack-doc-section h3 { font-size: 0.9em; margin: 12px 0 6px; }
.hopack-doc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.82em; }
.hopack-doc th, .hopack-doc td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; }
.hopack-doc th { background: #f5f5f7; font-weight: 700; }
.hopack-doc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0; }
.hopack-doc-kv dt { font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }
.hopack-doc-kv dd { margin: 2px 0 0; font-size: 0.88em; }
.hopack-doc-warning { background: #fdeaea; border: 1px solid #e5a3a3; color: #8a1f1f; padding: 10px 12px; border-radius: 6px; font-size: 0.84em; font-weight: 600; margin: 8px 0; }
.hopack-doc-asbuilt-flag { background: #fff4e0; border-color: #e8c27a; color: #7a5209; }
.hopack-doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 24px; }
.hopack-doc-signatures span { display: block; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #888; margin-bottom: 26px; }
.hopack-doc-sigline { border-bottom: 1px solid #999; height: 1px; }
.hopack-doc-end { margin-top: 30px; padding-top: 12px; border-top: 1px solid #ddd; font-size: 0.74em; color: #888; text-align: center; }

/* The embedded Layout/BOM report section (js/report.js's .report-* HTML,
   see js/handover-pack.js's assembleBomAndLayout()) already carries its
   own styling from css/app-canvas.css; this just removes the double
   card-in-a-card border/padding it would otherwise get from sitting
   inside a .hopack-doc-section wrapper here. */
.hopack-doc-embedded-report { border: none; padding: 0; }
.hopack-doc-embedded-report .report-section-title { font-family: var(--font-display); }

@media print {
  body.hopack-print-mode > *:not(#hopackPrintRoot) { display: none !important; }
  #hopackPrintRoot { display: block !important; }
  .hopack-doc { box-shadow: none; max-width: 100%; padding: 0; }
  .hopack-doc-section, .hopack-doc table tr { break-inside: avoid; page-break-inside: avoid; }
}
#hopackPrintRoot { display: none; }

@media (max-width: 900px) {
  .hopack-readiness-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hopack-doc { padding: 20px; }
  .hopack-doc-signatures { grid-template-columns: 1fr; }
}