:root {
  --page-w: 210mm;
  --page-h: 297mm;
  --offset-x: 0mm;
  --offset-y: 0mm;
  --ink: #111827;
  --muted: #64748b;
  --line: #dbe2ea;
  --panel: #ffffff;
  --bg: #f1f5f9;
  --accent: #0f766e;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--ink); }
button, input, textarea { font: inherit; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 16px 22px; background: #fff; border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0 0 4px; font-size: 22px; }
.topbar p { margin: 0; color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
button { border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-weight: 700; }
button.primary { background: var(--accent); color: #fff; }
button.secondary { background: #e2e8f0; color: #0f172a; }

.workspace { display: grid; grid-template-columns: minmax(360px, 500px) minmax(700px, 1fr); gap: 18px; padding: 18px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 30px rgba(15,23,42,.06); }
.form-panel { padding: 18px; max-height: calc(100vh - 105px); overflow: auto; }
.notice { background: #fff7ed; border: 1px solid #fed7aa; padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 10px; color: #334155; }
label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 10px; }
input, textarea { width: 100%; margin-top: 5px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 9px 10px; background: #fff; color: #0f172a; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid rgba(15,118,110,.18); border-color: var(--accent); }
.grid { display: grid; gap: 10px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.help { margin: -4px 0 10px; color: var(--muted); font-size: 12px; }

.preview-panel { padding: 14px; overflow: auto; }
.preview-toolbar { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:12px; }
.preview-toolbar span { color: var(--muted); font-size: 12px; margin-left: 8px; }
.switch { margin:0; white-space:nowrap; }
.switch input { width:auto; margin-right:6px; }
.page-shell { overflow:auto; padding: 8px; background:#e2e8f0; border-radius:9px; }

.fbl-page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  margin: 0 auto;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  overflow:hidden;
}
#templateImage {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  opacity:.72;
}
.print-layer {
  position:absolute;
  inset:0;
  transform: translate(var(--offset-x), var(--offset-y));
  transform-origin: top left;
}
.field {
  position:absolute;
  white-space:pre-wrap;
  overflow:hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  line-height:1.12;
  color:#000;
  font-weight:400;
}

/*
  V19 FLEXIBLE CARGO FIELD MAP
  Fine-tuned from the user's latest close-up print photos.
  V4 keeps the correct transport-row mapping and makes only small positional adjustments.
*/


/* ORIGINAL / COPY designation */
.document-type {
  left: 120mm;
  top: 65mm;
  width: 75mm;
  height: 10mm;
  text-align: center;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 3.5mm;
  white-space: nowrap;
}


.issuer-block {
  left: 120mm;
  top: 83mm;
  width: 76mm;
  height: 28mm;
  text-align: center;
  font-size: 8pt;
  line-height: 1.18;
  font-weight: 400;
  white-space: pre-wrap;
}


/* Reference boxes */
.fbl-no           { left: 137.0mm; top: 11.8mm; width: 30.2mm; height: 5.0mm; font-size: 6.4pt; letter-spacing: 0.02mm; white-space: nowrap; overflow: visible; }
.forwarder-ref    { left: 160.8mm; top: 28.8mm; width: 39mm; height: 5.3mm; font-size: 6.8pt; }

/* Party boxes */
.consignor        { left: 19.0mm; top: 12.3mm; width: 89mm; height: 24mm; }
.consignee        { left: 19.0mm; top: 40.8mm; width: 89mm; height: 22mm; }
.notify           { left: 19.0mm; top: 68.8mm; width: 89mm; height: 19mm; }

/*
  TRANSPORT ROWS
  Latest test showed each value one row too low.
  These are now moved upward by ~8.5 mm.
*/
.container-no     { left: 20.0mm; top: 87.8mm;  width: 44mm; height: 5.6mm; }
.place-receipt    { left: 64.0mm; top: 87.8mm;  width: 44mm; height: 5.6mm; }

.vessel           { left: 20.0mm; top: 96.5mm;  width: 44mm; height: 5.6mm; }
.port-loading     { left: 64.0mm; top: 96.5mm;  width: 44mm; height: 5.6mm; }

.port-discharge   { left: 20.0mm; top: 105.2mm; width: 44mm; height: 5.6mm; }
.place-delivery   { left: 64.0mm; top: 105.2mm; width: 44mm; height: 5.6mm; }

/* Cargo area */
.marks            { left: 19.0mm; top: 126.5mm; width: 37mm; height: 24mm; font-weight:600; }
.packages         { left: 61.5mm; top: 126.5mm; width: 47mm; height: 24mm; font-weight:600; }
.description      { left: 112.0mm; top: 126.5mm; width: 45mm; height: 24mm; font-weight:600; }
.gross-weight     { left: 160.0mm; top: 126.5mm; width: 27mm; height: 11mm; text-align:center; }
.measurement      { left: 187.0mm; top: 126.5mm; width: 19mm; height: 11mm; text-align:center; }
.cargo-extra      { left: 61.0mm; top: 159.0mm; width: 97mm; height: 19mm; font-size: 7.5pt; font-weight:600; }

/* Bottom boxes */
.freight-amount   { left: 18.7mm; top: 257.7mm; width: 68mm; height: 6.5mm; }
.freight-payable  { left: 90.5mm; top: 257.7mm; width: 48mm; height: 6.5mm; }
.issue-place-date { left: 143.5mm; top: 258.0mm; width: 56mm; height: 5.5mm; font-size: 7.2pt; }
.originals        { left: 90.5mm; top: 266.5mm; width: 48mm; height: 6.5mm; }

/* Moved up and made slightly smaller so the full delivery-agent address stays on page 1 */
.delivery-agent   { left: 47.0mm; top: 275.0mm; width: 84mm; height: 18.5mm; font-size: 6.2pt; line-height:1.02; }

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 1fr; }
  .form-panel { max-height:none; }
}


.status {
  padding: 9px 11px;
  margin-bottom: 12px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  border: 1px solid #e2e8f0;
}
.status.ok { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.status.warn { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }

button.test { background:#1d4ed8; color:#fff; }
button.mini { padding:7px 10px; font-size:11px; background:#e2e8f0; color:#334155; }
.inline-actions { margin:-2px 0 8px; }

.calibration {
  margin-top:18px;
  border:1px solid #dbe2ea;
  border-radius:8px;
  padding:10px 12px;
  background:#f8fafc;
}
.calibration summary { cursor:pointer; font-size:12px; font-weight:700; color:#475569; }

.modal {
  position:fixed; inset:0; z-index:50;
  background:rgba(15,23,42,.52);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal.hidden { display:none; }
.modal-card {
  background:#fff; width:min(760px, 96vw); max-height:82vh; overflow:auto;
  border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.modal-head {
  position:sticky; top:0; background:#fff; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 18px; border-bottom:1px solid #e2e8f0;
}
.modal-head h3 { margin:0; }
.icon-btn { background:transparent; font-size:26px; padding:0 7px; }
.history-list { padding:10px; }
.history-item {
  display:grid; grid-template-columns:1fr auto; gap:12px;
  padding:12px; border-bottom:1px solid #e2e8f0;
}
.history-title { font-weight:700; }
.history-meta { margin-top:3px; font-size:12px; color:#64748b; }
.history-actions { display:flex; gap:6px; align-items:center; }
.history-actions button { padding:7px 9px; font-size:11px; }
.danger { background:#fee2e2; color:#991b1b; }

@media print {
  .modal { display:none !important; }
}

.form-panel select {
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  font:inherit;
}

.issuer-company-name { font-weight: 700; }


/* Flexible cargo controls */
.cargo-field {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 110px;
  gap:10px;
  align-items:end;
}
.cargo-field > label:first-child { margin-bottom:10px; }
.size-control { margin-bottom:10px; }
.size-control select {
  width:100%;
  margin-top:5px;
  padding:8px 7px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
}

/* Manual/automatic cargo text sizes */
.field.size-normal { font-size:8pt !important; line-height:1.12 !important; }
.field.size-small  { font-size:6.8pt !important; line-height:1.08 !important; }
.field.size-xsmall { font-size:5.7pt !important; line-height:1.03 !important; }

/* Weight/measurement can be slightly tighter while remaining readable */
.gross-weight.size-normal,
.measurement.size-normal { font-size:7.5pt !important; }

@media (max-width:700px) {
  .cargo-field { grid-template-columns:1fr; }
}