* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: #222; }

.lp-app { display: flex; height: 100vh; }

/* LEFT — tree */
.lp-tree { width: 300px; flex: 0 0 300px; border-right: 1px solid #ddd; display: flex; flex-direction: column; }
.lp-search { padding: 8px; border-bottom: 1px solid #eee; }
.lp-search input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; }
.lp-tree-body { overflow: auto; padding: 6px 4px; flex: 1; }
.lp-node { padding: 3px 4px; display: flex; align-items: center; gap: 6px; cursor: default; }
.lp-node input { margin: 0; }
.lp-node.lp-model { font-weight: bold; }
.lp-node.lp-sheet { padding-left: 8px; font-weight: 600; }
.lp-node.lp-sheet > span:last-child { cursor: pointer; }
.lp-node.lp-part { padding-left: 26px; color: #444; }
.lp-node.lp-note-node { padding-left: 26px; font-weight: 600; color: #2b6cb0; cursor: default; }
.lp-note-icon { font-size: 12px; }
.lp-caret { width: 12px; display: inline-block; cursor: pointer; color: #888; text-align: center; user-select: none; }
.lp-caret-spacer { width: 12px; display: inline-block; flex-shrink: 0; }

/* MIDDLE — preview */
.lp-preview { flex: 1; overflow: auto; background: #8a8a8a; padding: 16px; display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.lp-card {
  width: var(--cw, 320px); height: var(--ch, 210px);
  background: #fff; border: 1px solid #000;
  position: relative; overflow: hidden;
}
/* Content authored portrait (short side = card height, long side = card
   width) then rotated 90° to fill the landscape label. */
.lp-card-inner {
  position: absolute; top: 50%; left: 50%;
  width: var(--ch, 210px); height: var(--cw, 320px);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  padding: 8px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
}
.lp-card-head { display: flex; flex-direction: column; }
/* Brand name above the title: bold and 1px larger than the title line. */
.lp-brand { font-weight: bold; font-size: 14px; letter-spacing: 1px; }
.lp-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.lp-index { background: #000; color: #fff; font-weight: bold; padding: 2px 8px; font-size: 15px; }
.lp-logo { font-weight: bold; letter-spacing: 1px; padding: 0 4px; font-size: 13px; }
.lp-title { font-weight: bold; margin-top: 6px; }
.lp-heading { margin-top: 4px; font-size: 12px; }
.lp-name { margin-top: 2px; font-size: 12px; font-weight: bold; }
.lp-bands { margin-top: 6px; font-size: 11px; }
.lp-band { white-space: nowrap; }
/* Part shape takes the leftover space and may SHRINK (min-height:0) so
   the sheet panel below always fits inside the label, pinned at the
   bottom (no overflow pushing it out of the tem). */
.lp-shape { flex: 1 1 auto; display: flex; margin: 6px 0; min-height: 0; }
/* Bottom row pinned under the part shape: sheet diagram on the left, the
   Sheet ID / Part ID and a QR code stacked on the right. */
.lp-bottom { flex: 0 0 auto; display: flex; align-items: stretch; gap: 6px;
  margin-top: 6px; border-top: 1px solid #ccc; padding-top: 4px; }
/* Sheet diagram: takes the leftover width, 2:1 aspect. */
.lp-thumb { flex: 1 1 auto; aspect-ratio: 38 / 19; display: flex; min-width: 0; }
/* Right column: the ID line (sheet then part) on top, QR below. */
.lp-bottom-meta { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; gap: 4px; }
.lp-id-line { display: flex; align-items: center; gap: 6px; }
.lp-sheet-id { font-size: 12px; font-weight: bold; color: #000; }
/* Part ID in a black box with white text (like the index chip). */
.lp-part-id { background: #000; color: #fff; font-weight: bold;
  padding: 1px 8px; font-size: 14px; line-height: 1.2; }
.lp-outline-svg, .lp-sheet-svg { width: 100%; height: 100%; }
.lp-outline-svg polygon { fill: none; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-band-num { fill: #000; font-weight: bold; text-anchor: middle; dominant-baseline: central; font-family: Tahoma, Arial, sans-serif; }
.lp-sheet-bg { fill: #fff; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-sheet-part { fill: none; stroke: #666; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.lp-sheet-part-hl { fill: #000; stroke: #000; }
.lp-qrs { display: flex; gap: 6px; }
.lp-qr { width: 52px; height: 52px; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #888; }
.lp-qr canvas, .lp-qr img { width: 100%; height: 100%; }
.lp-empty { color: #eee; padding: 24px; }
.lp-note-sub { font-size: 12px; color: #333; margin-top: 4px; }
.lp-note-bands { margin-top: 10px; font-size: 12px; }
.lp-note-row { padding: 2px 0; border-bottom: 1px dotted #ccc; }

/* RIGHT — settings */
.lp-settings { width: 320px; flex: 0 0 320px; border-left: 1px solid #ddd; padding: 12px; overflow: auto; }
.lp-hint { color: #666; font-size: 11px; text-align: center; }
.lp-actions { display: flex; gap: 10px; justify-content: center; margin: 10px 0 16px; }
.lp-btn { padding: 8px 22px; border: 1px solid #aaa; background: #f4f4f4; border-radius: 4px; cursor: pointer; }
.lp-btn:hover { background: #e9e9e9; }
.lp-section { border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px; }
.lp-section-head { font-weight: bold; margin-bottom: 8px; }
.lp-input, .lp-select { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 8px; }
.lp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lp-label { width: 70px; flex: 0 0 70px; color: #444; }
.lp-sub { color: #666; }
.lp-sub-r { margin-left: 78px; }
.lp-num { width: 70px; padding: 5px 6px; border: 1px solid #ccc; border-radius: 4px; }
.lp-qr-opts { display: flex; flex-direction: column; gap: 4px; }
.lp-qr-opts label { display: flex; align-items: center; gap: 6px; }

/* PRINT — only the labels, one per page sized to the label ratio (mm) */
@media print {
  .lp-tree, .lp-settings { display: none !important; }
  .lp-app { display: block; }
  .lp-preview { display: block; background: #fff; padding: 0; }
  .lp-card {
    width: var(--lp-w, 58mm); height: var(--lp-h, 38mm);
    border: none; page-break-after: always; break-after: page;
  }
  /* In print, the rotated inner is sized in mm (swapped W/H). */
  .lp-card-inner {
    width: var(--lp-h, 38mm); height: var(--lp-w, 58mm);
  }
}
