/* =========================================================
   Online Label Maker — App styles
   Brand: #ff1716
   Layout: sidebar on top, A4 preview below
   ========================================================= */

#odlm-app{
  --odlm-bg:#eef2f7;
  --odlm-ink:#0f172a;
  --odlm-muted:#64748b;
  --odlm-line:#e2e8f0;
  --odlm-accent:#ff1716;
  --odlm-accent-dark:#d80f0e;
  --odlm-accent-soft:#fff0ef;
  --odlm-warn:#b45309;
  --odlm-warn-soft:#fef3c7;

  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--odlm-ink);
  background:var(--odlm-bg);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(15,23,42,.08);
  box-sizing:border-box;
}
#odlm-app *,
#odlm-app *::before,
#odlm-app *::after{ box-sizing:border-box; }
#odlm-app button{ font-family:inherit; }

/* Screen-reader only */
#odlm-app .odlm-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ================= TOP BAR ================= */
#odlm-app .odlm-topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--odlm-line);
  display:flex;align-items:center;gap:18px;padding:0 20px;flex-wrap:wrap;
}
#odlm-app .odlm-brand{ display:flex;align-items:center;gap:10px; }
#odlm-app .odlm-logo{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#ff5f5e,var(--odlm-accent));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;
  box-shadow:0 2px 6px rgba(255,23,22,.35);
}
#odlm-app .odlm-brand-name{ font-weight:700;font-size:14px;letter-spacing:-.01em; }
#odlm-app .odlm-brand-sub{ font-size:11px;color:var(--odlm-muted);margin-top:-1px; }

#odlm-app .odlm-steps{ display:flex;align-items:center;gap:6px;margin-left:6px; }
#odlm-app .odlm-step{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--odlm-muted);
  font-weight:500;padding:5px 11px;border-radius:999px;
}
#odlm-app .odlm-step i{
  font-style:normal;width:17px;height:17px;border-radius:50%;
  background:#f1f5f9;color:#94a3b8;display:grid;place-items:center;
  font-size:10px;font-weight:700;
}
#odlm-app .odlm-step.odlm-active{ background:var(--odlm-accent-soft);color:var(--odlm-accent);font-weight:600; }
#odlm-app .odlm-step.odlm-active i{ background:var(--odlm-accent);color:#fff; }
#odlm-app .odlm-step.odlm-done i{ background:#dcfce7;color:#16a34a; }

#odlm-app .odlm-spacer{ flex:1; }

/* ================= BUTTONS ================= */
#odlm-app .odlm-btn{
  font-size:13px;font-weight:600;border-radius:9px;padding:8px 15px;cursor:pointer;
  border:1px solid var(--odlm-line);background:#fff;color:var(--odlm-ink);
  transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
#odlm-app .odlm-btn:hover{ background:#f8fafc;border-color:#cbd5e1; }
#odlm-app .odlm-btn-primary{
  background:var(--odlm-accent);border-color:var(--odlm-accent);color:#fff;
  box-shadow:0 1px 3px rgba(255,23,22,.35);
}
#odlm-app .odlm-btn-primary:hover{ background:var(--odlm-accent-dark);border-color:var(--odlm-accent-dark); }

/* =========================================================
   LAYOUT — stacked: sidebar on top, preview below
   ========================================================= */
#odlm-app .odlm-layout{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Sidebar becomes a 2-column grid of cards, full width */
#odlm-app .odlm-sidebar{
  width:100%;
  background:#fff;
  border-right:none;
  border-bottom:1px solid var(--odlm-line);
  padding:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:start;
  overflow:visible;
}

/* Stage fills the width and sits below */
#odlm-app .odlm-stage{
  display:flex;flex-direction:column;min-width:0;
  background:var(--odlm-bg);
}

#odlm-app .odlm-stage-bar{
  height:52px;flex:0 0 52px;display:flex;align-items:center;gap:10px;
  padding:0 20px;border-bottom:1px solid var(--odlm-line);background:#fff;
  flex-wrap:wrap;
}
#odlm-app .odlm-pill{
  font-size:11px;background:#f1f5f9;color:#475569;border-radius:999px;
  padding:4px 11px;font-weight:600;white-space:nowrap;
}
#odlm-app .odlm-hint{ font-size:11.5px;color:var(--odlm-muted);margin-left:auto; }

/* Bigger default zoom now that the preview is full-width */
#odlm-app .odlm-canvas{
  --odlm-zoom:.95;
  flex:1;overflow:auto;padding:32px;
  display:flex;justify-content:center;align-items:flex-start;
  min-height:calc(297mm * var(--odlm-zoom) + 64px);
  background:
    radial-gradient(circle at 1px 1px,#dbe2ea 1px,transparent 0) 0 0/16px 16px,
    var(--odlm-bg);
}

/* ================= CARDS ================= */
#odlm-app .odlm-card{
  border:1px solid var(--odlm-line);border-radius:13px;padding:14px;
  background:#fff;
  /* no bottom margin — the grid gap handles spacing */
}
#odlm-app .odlm-card h3{
  margin:0 0 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--odlm-muted);font-weight:700;display:flex;align-items:center;gap:8px;
}
#odlm-app .odlm-num{
  width:18px;height:18px;border-radius:6px;background:var(--odlm-accent-soft);
  color:var(--odlm-accent);display:grid;place-items:center;font-size:10px;font-weight:800;
}
#odlm-app .odlm-right{
  margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--odlm-muted);
}

/* ================= SHEET PRESETS ================= */
#odlm-app .odlm-preset-grid{ display:grid;grid-template-columns:1fr 1fr;gap:8px; }
#odlm-app .odlm-preset{
  text-align:left;border:1px solid var(--odlm-line);background:#fff;border-radius:10px;
  padding:9px 10px;cursor:pointer;transition:.15s;color:inherit;
}
#odlm-app .odlm-preset:hover{ border-color:#ffc9c8;background:#fffafa; }
#odlm-app .odlm-preset.odlm-active{
  border-color:var(--odlm-accent);background:var(--odlm-accent-soft);
  box-shadow:0 0 0 1px var(--odlm-accent) inset;
}
#odlm-app .odlm-preset:disabled{ opacity:.5;cursor:not-allowed; }
#odlm-app .odlm-preset-name{ display:block;font-weight:700;font-size:12.5px; }
#odlm-app .odlm-preset-dim{ display:block;font-size:10.5px;color:var(--odlm-muted);margin-top:3px; }

/* ================= FIELD LIST ================= */
#odlm-app .odlm-field-list{ list-style:none;margin:0;padding:0; }
#odlm-app .odlm-field{
  display:flex;align-items:center;gap:6px;padding:4px;
  border-radius:9px;border:1px solid transparent;
}
#odlm-app .odlm-field:hover{ background:#f8fafc;border-color:var(--odlm-line); }
#odlm-app .odlm-field.odlm-is-emph{ background:var(--odlm-accent-soft);border-color:#ffc9c8; }
#odlm-app .odlm-grip{ color:#cbd5e1;cursor:grab;font-size:13px;line-height:1;user-select:none;flex:0 0 auto; }

#odlm-app .odlm-fname-input{
  flex:1;min-width:0;width:auto;border:1px solid transparent;background:transparent;
  padding:4px 6px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--odlm-ink);
}
#odlm-app .odlm-fname-input:hover{ background:#fff;border-color:var(--odlm-line); }
#odlm-app .odlm-fname-input:focus{
  background:#fff;border-color:var(--odlm-accent);outline:none;
  box-shadow:0 0 0 3px rgba(255,23,22,.15);
}

#odlm-app .odlm-tag{
  border:1px solid transparent;cursor:pointer;font-size:9.5px;padding:3px 8px;
  border-radius:999px;font-weight:700;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto;
}
#odlm-app .odlm-tag-common{ background:#f1f5f9;color:#64748b; }
#odlm-app .odlm-tag-variable{ background:var(--odlm-warn-soft);color:var(--odlm-warn); }
#odlm-app .odlm-tag:hover{ filter:brightness(.95); }

#odlm-app .odlm-sp{
  cursor:pointer;font-size:10px;font-weight:800;padding:3px 6px;border-radius:5px;
  border:1px solid var(--odlm-line);background:#fff;color:#cbd5e1;min-width:22px;
  line-height:1;flex:0 0 auto;
}
#odlm-app .odlm-sp.odlm-sp-on{ background:var(--odlm-accent);border-color:var(--odlm-accent);color:#fff; }

#odlm-app .odlm-var-del{
  border:none;background:transparent;color:#cbd5e1;cursor:pointer;font-size:16px;
  line-height:1;padding:2px 4px;border-radius:6px;transition:.15s;flex:0 0 auto;
}
#odlm-app .odlm-var-del:hover{ color:#ef4444;background:#fef2f2; }

#odlm-app .odlm-empty-note{
  font-size:11.5px;color:var(--odlm-muted);background:#f8fafc;
  border:1px dashed var(--odlm-line);border-radius:9px;padding:10px 12px;line-height:1.5;
}

/* ================= EMPHASIS / SIZE SEGMENTS ================= */
#odlm-app .odlm-emph-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--odlm-line);
}
#odlm-app .odlm-emph-row .odlm-txt{
  font-size:11px;color:var(--odlm-muted);font-weight:700;letter-spacing:.03em;
}
#odlm-app .odlm-seg{ display:inline-flex;background:#f1f5f9;border-radius:9px;padding:3px;gap:2px; }
#odlm-app .odlm-seg button{
  border:none;background:transparent;font-size:11.5px;font-weight:600;
  color:var(--odlm-muted);padding:5px 13px;border-radius:7px;cursor:pointer;transition:.15s;
  min-width:38px;
}
#odlm-app .odlm-seg button:hover{ color:var(--odlm-ink); }
#odlm-app .odlm-seg button.odlm-active{
  background:#fff;color:var(--odlm-accent);box-shadow:0 1px 3px rgba(15,23,42,.12);
}

/* ================= INPUTS ================= */
#odlm-app input[type=text],
#odlm-app input[type=number]{
  width:100%;border:1px solid var(--odlm-line);border-radius:8px;padding:7px 9px;
  font-size:12.5px;background:#fff;color:var(--odlm-ink);transition:.15s;
}
#odlm-app input[type=number]{ -moz-appearance:textfield; }
#odlm-app input:focus{
  outline:none;border-color:var(--odlm-accent);
  box-shadow:0 0 0 3px rgba(255,23,22,.15);
}
#odlm-app .odlm-fld label{
  display:block;font-size:10.5px;color:var(--odlm-muted);margin-bottom:4px;
  font-weight:600;letter-spacing:.02em;
}
#odlm-app .odlm-grid2{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }

/* ================= VARIABLE TABLE ================= */
#odlm-app .odlm-var-head,
#odlm-app .odlm-var-row{ display:flex;gap:8px;align-items:center; }
#odlm-app .odlm-var-head{
  font-size:10px;color:var(--odlm-muted);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:0 2px 7px;
}
#odlm-app .odlm-var-cells{ flex:1;min-width:0;display:grid;gap:6px; }
#odlm-app .odlm-vh{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:2px; }
#odlm-app .odlm-qty-h{ flex:0 0 64px;width:64px;padding-left:2px; }
#odlm-app .odlm-head-spacer{ flex:0 0 22px;width:22px; }
#odlm-app .odlm-var-row{ padding:3px 0; }
#odlm-app .odlm-var-row input.odlm-qty-in{ flex:0 0 64px;width:64px;text-align:center; }
#odlm-app .odlm-var-row .odlm-var-del{ flex:0 0 22px;width:22px; }

#odlm-app .odlm-var-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--odlm-line);margin-top:10px;padding-top:10px;
  font-size:12px;font-weight:600;
}
#odlm-app .odlm-var-foot strong{ font-size:13px; }
#odlm-app .odlm-status{
  margin-top:9px;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;
  background:#f0fdf4;color:#15803d;
}
#odlm-app .odlm-status.odlm-status-warn{ background:#fffbeb;color:var(--odlm-warn); }

#odlm-app .odlm-link-btn{
  border:none;background:transparent;color:var(--odlm-accent);font-size:12px;
  font-weight:600;cursor:pointer;padding:9px 0 0;
}
#odlm-app .odlm-link-btn:hover{ text-decoration:underline; }

/* ================= A4 SHEET ================= */
#odlm-app .odlm-sheet-frame{
  width:calc(210mm * var(--odlm-zoom));
  height:calc(297mm * var(--odlm-zoom));
  position:relative;flex:0 0 auto;
}
#odlm-app .odlm-sheet{
  position:absolute;top:0;left:0;transform-origin:top left;
  transform:scale(var(--odlm-zoom));
  width:210mm;height:297mm;background:#fff;
  display:grid;justify-content:center;align-content:center;
  box-shadow:0 12px 34px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.07);
}
#odlm-app .odlm-sheet[data-sheet="12"]{
  --odlm-fs-base:8.4pt; --odlm-fs-size:22pt; --odlm-fs-size-side:32pt;
  --odlm-foot-min:20mm; --odlm-pad-v:2.4mm; --odlm-pad-h:3.2mm;
}
#odlm-app .odlm-sheet[data-sheet="18"]{
  --odlm-fs-base:6.2pt; --odlm-fs-size:15pt; --odlm-fs-size-side:20pt;
  --odlm-foot-min:16mm; --odlm-pad-v:2.2mm; --odlm-pad-h:2.6mm;
}
#odlm-app .odlm-sheet[data-sheet="24"]{
  --odlm-fs-base:5.6pt; --odlm-fs-size:13pt; --odlm-fs-size-side:16pt;
  --odlm-foot-min:14mm; --odlm-pad-v:1.8mm; --odlm-pad-h:2.4mm;
}

/* Text size scale (applied on top of the per-sheet base sizes) */
#odlm-app .odlm-sheet[data-size="sm"]{ --odlm-fs-scale:0.85; }
#odlm-app .odlm-sheet[data-size="md"]{ --odlm-fs-scale:1;    }
#odlm-app .odlm-sheet[data-size="lg"]{ --odlm-fs-scale:1.35; }
#odlm-app .odlm-sheet[data-size="xl"]{ --odlm-fs-scale:1.75; }

#odlm-app .odlm-slot{
  position:relative;overflow:hidden;
  padding:var(--odlm-pad-v) var(--odlm-pad-h);
  display:flex;
}
#odlm-app .odlm-slot::after{
  content:'';position:absolute;inset:0;border:1px dashed #d5dce6;pointer-events:none;
}
#odlm-app .odlm-slot.odlm-slot-empty::before{
  content:'empty';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:6pt;color:#cbd5e1;letter-spacing:.1em;text-transform:uppercase;
}

/* label text — all sizes scale with --odlm-fs-scale */
#odlm-app .odlm-lbl{
  font-size:calc(var(--odlm-fs-base) * var(--odlm-fs-scale, 1));
  line-height:1.5;color:#0b1220;
}
#odlm-app .odlm-lbl .odlm-ln{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#odlm-app .odlm-lbl .odlm-k{ color:#7b8794; }
#odlm-app .odlm-lbl .odlm-v{ font-weight:600; }

#odlm-app .odlm-lbl-foot{ display:flex;gap:4mm;flex-wrap:wrap;align-items:baseline; }
#odlm-app .odlm-foot-item{ display:flex;align-items:baseline;gap:1.4mm;white-space:nowrap; }
#odlm-app .odlm-foot-item .odlm-k{
  font-size:calc(var(--odlm-fs-base) * var(--odlm-fs-scale, 1));
  color:#7b8794;letter-spacing:.04em;
}
#odlm-app .odlm-foot-item .odlm-sz{
  font-size:calc(var(--odlm-fs-size) * var(--odlm-fs-scale, 1));
  font-weight:800;line-height:.95;letter-spacing:-.03em;color:#000;
}

/* placement: BOTTOM */
#odlm-app .odlm-sheet[data-emph="bottom"] .odlm-slot{ flex-direction:column;justify-content:space-between; }
#odlm-app .odlm-sheet[data-emph="bottom"] .odlm-lbl-foot{
  margin-top:auto;padding-top:1.1mm;border-top:.5pt solid #dbe2ea;
}

/* placement: TOP */
#odlm-app .odlm-sheet[data-emph="top"] .odlm-slot{ flex-direction:column;justify-content:flex-start; }
#odlm-app .odlm-sheet[data-emph="top"] .odlm-lbl-foot{
  order:-1;margin:0 0 1.2mm;padding-bottom:1.2mm;border-bottom:.5pt solid #dbe2ea;
}

/* placement: RIGHT (front half, big) */
#odlm-app .odlm-sheet[data-emph="right"] .odlm-slot{
  flex-direction:row;align-items:center;gap:0;
}
#odlm-app .odlm-sheet[data-emph="right"] .odlm-lbl{ flex:1 1 auto;min-width:0; }
#odlm-app .odlm-sheet[data-emph="right"] .odlm-lbl-foot{
  flex:0 0 auto;
  flex-direction:column;justify-content:center;align-items:center;
  align-self:stretch;gap:1.6mm;margin:0;padding:0 0 0 2.6mm;
  border-top:none;border-left:.5pt solid #dbe2ea;
  min-width:var(--odlm-foot-min);
}
#odlm-app .odlm-sheet[data-emph="right"] .odlm-foot-item{
  flex-direction:column;align-items:center;gap:.4mm;
}
#odlm-app .odlm-sheet[data-emph="right"] .odlm-foot-item .odlm-sz{
  font-size:calc(var(--odlm-fs-size-side) * var(--odlm-fs-scale, 1));
}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  #odlm-app .odlm-steps{ display:none; }
  #odlm-app .odlm-canvas{ --odlm-zoom:.72;padding:20px; }
}

@media (max-width:820px){
  /* Sidebar collapses to a single column of cards */
  #odlm-app .odlm-sidebar{
    grid-template-columns:1fr;
    padding:12px;
    gap:12px;
  }
  #odlm-app .odlm-canvas{ --odlm-zoom:.55;padding:14px; }
}

@media (max-width:520px){
  #odlm-app .odlm-canvas{ --odlm-zoom:.40;padding:10px; }
  #odlm-app .odlm-topbar{ padding:0 12px;gap:10px; }
  #odlm-app .odlm-brand-sub{ display:none; }
}