/* Dispatch sheets — the FM-WH-08 เบิกสินค้า form rendered inline (handoff
   Dispatch sheet, lines 996-1145): date/trip tabs + the printable sheet with
   credit/cash columns, a system-status column, detail+note, urgent marks,
   header info and the full footer. The toolbar is themed; the sheet itself is a
   white printable document (kept white in dark mode = paper preview). */

@layer screens {
  .ds-screen { display: flex; flex-direction: column; gap: 12px; }

  /* ---- toolbar ---- */
  .ds-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .ds-tab { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); text-decoration: none; }
  .ds-tab:hover { background: var(--surface-2); text-decoration: none; }
  .ds-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
  .ds-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .ds-sep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 4px; }
  .ds-spacer { flex: 1; }
  .ds-match { font-size: 13px; color: var(--text-2); }
  .ds-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 22px; text-align: center; }

  /* ---- the sheet (white printable document) ---- */
  .ds-sheet { background: #ffffff; border: 1px solid #c8d0d9; min-width: 1080px; color: #1c232c; font-size: 12px; line-height: 1.45; }

  .ds-doc-head { display: grid; grid-template-columns: 230px 1fr 210px; border-bottom: 1.5px solid #3a4450; }
  .ds-logo { padding: 10px 16px; border-right: 1px solid #3a4450; display: flex; flex-direction: column; justify-content: center; }
  .ds-logo-name { font-size: 25px; font-weight: 800; font-style: italic; color: #2486c8; }
  .ds-logo-sub { font-size: 8.5px; letter-spacing: 0.26em; color: #7e8a98; margin-top: 2px; }
  .ds-doc-title { border-right: 1px solid #3a4450; display: flex; flex-direction: column; }
  .ds-doc-t1 { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; border-bottom: 1px solid #3a4450; padding: 5px; text-align: center; }
  .ds-doc-t2 { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; padding: 5px; }
  .ds-doc-rev { display: flex; flex-direction: column; font-size: 11.5px; }
  .ds-doc-rev > div { flex: 1; padding: 4px 10px; display: flex; align-items: center; }
  .ds-doc-rev > div:first-child { border-bottom: 1px solid #3a4450; }

  .ds-info { padding: 8px 14px; border-bottom: 1.5px solid #3a4450; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
  .ds-info-line { display: flex; gap: 20px; flex-wrap: wrap; }
  .ds-info-r { margin-left: auto; color: #56636f; }

  /* ---- grid ---- */
  .ds-grid { display: grid; grid-template-columns: 26px 132px repeat(8, 40px) 80px 70px minmax(180px, 1fr) 150px 104px; }
  .ds-c { border-right: 1px solid #3a4450; border-bottom: 1px solid #3a4450; padding: 4px 4px; min-height: 28px; }
  .ds-head { background: #f2f5f8; font-weight: 700; font-size: 11px; text-align: center; }
  .ds-head .ds-c { padding: 4px 2px; }
  .ds-center { text-align: center; }
  .ds-r { text-align: right; }
  .ds-num { font-family: var(--font-mono); font-weight: 600; }
  .ds-cust { padding: 4px 6px; }
  .ds-urgent { color: #c0392b; font-size: 11px; margin: 0 3px; }
  .ds-pricenote { color: #56636f; font-size: 10.5px; }
  .ds-ovr { color: #b3540f; font-weight: 700; }
  .ds-detail { font-size: 11px; padding: 4px 6px; }
  .ds-status { background: #eef3fb; text-align: center; }
  .ds-statuscell { background: #fbfcfe; padding: 3px 5px; }
  .ds-stchip { font-size: 10.5px; font-weight: 600; }
  .ds-oid { font-family: var(--font-mono); font-size: 9px; color: #9aa6b3; margin-top: 2px; }
  .ds-total { font-weight: 700; background: #f7f9fb; }
  .ds-total .ds-c { border-bottom: 1.5px solid #3a4450; }

  /* ---- footer ---- */
  .ds-foot { display: grid; grid-template-columns: 1.15fr 0.55fr 1.15fr; }
  .ds-foot-col { border-right: 1px solid #3a4450; display: flex; flex-direction: column; }
  .ds-foot-head { border-bottom: 1px solid #3a4450; padding: 5px 10px; text-align: center; font-weight: 700; }
  .ds-foot-top { border-top: 1px solid #3a4450; }
  .ds-foot-body { padding: 7px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; flex: 1; }
  .ds-foot-checks { display: flex; font-size: 11px; text-align: center; }
  .ds-foot-checks > div { flex: 1; border-right: 1px solid #3a4450; padding: 5px 4px 18px; }
  .ds-foot-checks > div.ds-last { border-right: none; }
  .ds-foot-stamp { border-right: 1px solid #3a4450; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #56636f; }
  .ds-foot-ack { padding: 7px 12px; font-size: 11px; color: #3d4754; }

  /* dark mode: soften the surround; sheet stays white (it's paper) */
  html.sdos-darkmode .ds-sheet { box-shadow: 0 0 0 1px var(--line); }
}

/* Print: hide app chrome + the system-status column; sheet fills A4 landscape. */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .rail, .topbar, .no-print, .ds-status { display: none !important; }
  .maincol, .content { display: block !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
  .ds-screen { display: block !important; }
  .ds-sheet { border: none !important; min-width: 0 !important; width: 100% !important; }
  .ds-grid { grid-template-columns: 26px 132px repeat(8, 40px) 80px 70px minmax(180px, 1fr) 150px !important; }
  body { background: #ffffff !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}