/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; font-family: Segoe UI, system-ui, Arial, sans-serif }

body { margin: 0; background: #0d1b2a; color: #d8e8f8 }

/* ── Screen toolbar ──────────────────────────────────────── */
.screen-bar {
  position: sticky;
  top: 0;
  background: #091420;
  color: #d8e8f8;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100;
  border-bottom: 1px solid #1e3a5c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.screen-bar button {
  background: #1e3a5c;
  color: #d8e8f8;
  border: 1px solid #2a5a8a;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}
.screen-bar button:hover { background: #254e7a }
.screen-bar .btn-close   { background: #172a43 }
.screen-bar-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  flex-shrink: 0;
}
#screen-bar-info {
  margin-left: auto;
  font-size: 12px;
  color: #7a9bbf;
}

/* ── Report wrapper ──────────────────────────────────────── */
#report {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 20px 48px;
}

/* ── Report header ───────────────────────────────────────── */
.report-header { margin-bottom: 20px }
.report-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.report-logo {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  flex-shrink: 0;
}
.report-header h1 { margin: 0; font-size: 26px; color: #d8e8f8 }
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: #7a9bbf;
}
.report-meta strong { color: #d8e8f8 }
.meta-warn  { color: #ffb347; font-weight: 600 }
.meta-date  { color: #7a9bbf }

/* ── Container section ───────────────────────────────────── */
.container-section {
  background: #132237;
  border-radius: 8px;
  padding: 22px 26px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.container-section h2 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #d8e8f8;
}
.cont-spec {
  margin: 0 0 10px;
  font-size: 13px;
  color: #7a9bbf;
}
.downsize-note {
  background: #0e2d1e;
  border: 1px solid #2a7a50;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 13px;
  color: #7ae8b0;
  margin: 0 0 12px;
}
.box-truck-note {
  background: #2a1c08;
  border: 1px solid #7a5218;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 13px;
  color: #e8c07a;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ── Section subheadings ─────────────────────────────────── */
.section-subhead {
  margin: 18px 0 6px;
  font-size: 14px;
  color: #7ab8e8;
  border-bottom: 1px solid #1e3a5c;
  padding-bottom: 4px;
}
.table-note {
  margin: 0 0 10px;
  font-size: 12px;
  color: #7a9bbf;
  font-style: italic;
}

/* ── Loading table ───────────────────────────────────────── */
.table-wrap   { overflow-x: auto; margin-bottom: 6px }
.load-table   { width: 100%; border-collapse: collapse; font-size: 13px }
.load-table th {
  background: #0f2035;
  color: #7ab8e8;
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.load-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #1e3a5c;
  white-space: nowrap;
  color: #c8ddf0;
}
.load-table tr:last-child td { border-bottom: none }
.load-table tr:nth-child(even) td { background: #0f2035 }
.step-num { font-weight: 700; color: #a8d4ff; width: 46px; text-align: center }
.box-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  color: #01263a;
}

/* ── Diagrams ────────────────────────────────────────────── */
.views-wrap    { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 6px; align-items: flex-start }
.view-block    { display: flex; flex-direction: column }
.view-title    { font-size: 11px; font-weight: 700; color: #a8c8e8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px }
.view-subtitle { font-size: 10px; color: #7a9bbf; margin-bottom: 4px }
.view-canvas   { border: 1px solid #1e3a5c; border-radius: 3px; display: block }

/* ── Legend ──────────────────────────────────────────────── */
.box-legend   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center }
.legend-title { font-size: 12px; font-weight: 600; color: #7a9bbf; margin-right: 4px }
.legend-item  { display: flex; align-items: center; gap: 5px; font-size: 12px; background: #0f2035; padding: 3px 8px; border-radius: 4px; color: #c8ddf0 }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.18); flex-shrink: 0 }
.muted { color: #7a9bbf }

/* ── Unplaced list ───────────────────────────────────────── */
.unplaced-list { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: #c8ddf0 }

/* ── No data state ───────────────────────────────────────── */
.no-data {
  text-align: center;
  padding: 80px 20px;
  color: #7a9bbf;
  font-size: 15px;
  line-height: 1.8;
}

/* ── Contact footer ──────────────────────────────────────── */
.print-contact {
  max-width: 980px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 13px;
  color: #7a9bbf;
  border-top: 1px solid #1e3a5c;
  border-bottom: 1px solid #1e3a5c;
}
.print-contact a         { color: #4a9eff; text-decoration: none }
.print-contact a:hover   { text-decoration: underline }
.print-contact .footer-logo  { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0 }
.print-contact .footer-brand { font-weight: 600; color: #d8e8f8 }
.print-contact .footer-sep   { color: #1e3a5c; user-select: none }
.print-email                 { display: none }

/* ── Print styles — always white on paper ────────────────── */
@media print {
  body           { background: #fff; color: #222 }
  .no-print      { display: none !important }
  #report        { max-width: 100%; margin: 0; padding: 0 }

  .container-section {
    background: #fff;
    color: #222;
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 0;
  }
  .container-section h2  { color: #111 }
  .cont-spec             { color: #444 }
  .section-subhead       { color: #333; border-bottom-color: #ccc }
  .table-note            { color: #666 }
  .downsize-note         { background: #edfaf3; border-color: #6fcf97; color: #1a5c3a }
  .box-truck-note        { background: #fefaf0; border-color: #c8860a; color: #5c3a08 }
  .load-table th         { background: #e8f0fe; color: #1a3a6c }
  .load-table td         { color: #222; border-bottom-color: #eef2f7 }
  .load-table tr:nth-child(even) td { background: #f8fbff }
  .step-num              { color: #1a3a6c }
  .view-title            { color: #1a3a5c }
  .view-subtitle         { color: #666 }
  .view-canvas           { border-color: #b8cce0 }
  .legend-item           { background: #f0f4f9; color: #222 }
  .legend-title          { color: #666 }
  .muted                 { color: #777 }
  .unplaced-list         { color: #222 }
  .report-header h1      { color: #111 }
  .report-meta           { color: #555 }

  .page-break    { page-break-before: always }
  .table-wrap    { overflow: visible }
  .views-wrap    { gap: 10px }
  .load-table tr { page-break-inside: avoid }

  .print-contact {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    margin: 0;
    font-size: 10px;
    color: #555;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 4px 20px;
    background: #fff;
    letter-spacing: 0.01em;
  }
  .print-contact a             { color: #1a3a6c }
  .print-contact .footer-logo  { width: 12px; height: 12px; border-radius: 2px }
  .print-contact .footer-brand { color: #111 }
  .print-contact .footer-sep   { color: #bbb }
  .print-email                 { display: inline; color: #555 }
}