/* ---- Georgian-capable system font stack ---- */
:root {
  --ink: #000;
  --border: 2px solid #000;
  --placeholder: #9a9a9a;
  --label-width: 148mm;   /* A5 width */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #e9e9e9;
  font-family: "BPG Nino Mtavruli", "Noto Sans Georgian", "Sylfaen",
               "DejaVu Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
}

/* ---- Toolbar ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 10;
}
.toolbar button {
  font: inherit;
  font-size: 14px;
  padding: 8px 16px;
  border: 2px solid #000;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.toolbar button:hover { background: #000; color: #fff; }
.toolbar-note { font-size: 13px; color: #555; }
.tb-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
}
.tb-field > span {
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.tb-field select,
.tb-field input {
  font: inherit;
  font-size: 14px;
  padding: 7px 8px;
  border: 2px solid #000;
  background: #fff;
  border-radius: 6px;
}
.tb-field input { width: 68px; }

/* ---- The label ---- */
.label {
  width: var(--label-width);
  margin: 20px auto;
  background: #fff;
  border: var(--border);
  display: flex;
  flex-direction: column;
}

.row { display: flex; }
.row + .row { border-top: var(--border); }

.cell { padding: 6px 8px; }
.cell + .cell { border-left: var(--border); }

.lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* editable fields */
.field {
  outline: none;
  min-height: 1em;
  word-break: break-word;
  white-space: pre-wrap;
}
.field:focus { background: #fff7d6; }

/* placeholder pattern for contenteditable */
.field:empty::before {
  content: attr(data-placeholder);
  color: var(--placeholder);
  pointer-events: none;
}

/* 1. top row */
.top-row .from-cell { flex: 1 1 60%; }
.top-row .phone-cell { flex: 1 1 40%; }
.sender { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.datetime { font-size: 12px; color: #333; }
.phone { font-size: 20px; font-weight: 700; }

/* 2. barcode row */
.barcode-row {
  flex-direction: column;
  align-items: center;
  padding: 8px;
}
.barcode { width: 100%; height: 70px; }
.tracking {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
}

/* 3. TO row */
.to-row { flex-direction: column; padding: 6px 8px; }
.recipient { font-size: 16px; line-height: 1.35; min-height: 3em; }

/* 4. product row */
.product-label-cell { flex: 0 0 40%; display: flex; align-items: center; }
.product-desc-cell { flex: 1 1 60%; display: flex; align-items: center; }
.product { width: 100%; font-size: 14px; }

/* 5. weight / quantity row */
.weight-cell, .qty-cell { flex: 1 1 50%; }
.weight, .quantity { font-size: 16px; font-weight: 700; }

/* 6. bottom row */
.bottom-row { align-items: stretch; }
.qr-cell {
  flex: 0 0 34%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr { width: 90px; height: 90px; }
.courier-cell {
  flex: 1 1 40%;
  display: flex;
  align-items: center;
}
.courier { width: 100%; font-size: 15px; font-weight: 700; line-height: 1.3; }
.zone-cell {
  flex: 0 0 26%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.zone { font-size: 22px; font-weight: 800; }

/* 7. reference footer */
.ref-footer { justify-content: flex-end; padding: 5px 8px; }
.ref { font-size: 12px; font-weight: 700; text-align: right; }

/* ---- Print-sheet (multi-up duplication) ---- */
/* Hidden on screen; only used while printing. */
#print-sheet { display: none; }

/* The actual @page size/margin is injected by app.js into #page-style
   (defaults below in case JS is unavailable). */

@media print {
  html, body { background: #fff; }
  .toolbar { display: none !important; }

  /* Hide the interactive master label; print only the cloned sheet. */
  #label { display: none !important; }

  #print-sheet {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
  }

  /* One slot per label copy. `--z` (zoom) is set per-layout by app.js and
     scales the whole label — layout box included — so N fit per sheet. */
  .print-cell {
    zoom: var(--z, 1);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Re-show the cloned labels (the master #label rule above hid by id only). */
  .print-cell .label {
    display: flex !important;
    width: 148mm;      /* A5 base width; --z scales it down for smaller layouts */
    margin: 0;
    border: var(--border);
    background: #fff;
  }

  .field:focus { background: transparent; }
  /* never print grey placeholder text */
  .field:empty::before { content: ""; }
}