/* etiketi.css — „Етикети за стоки“: работен изглед в един екран (раздели горе, без вертикално превъртане на десктоп). */
body.app{min-height:100vh;min-height:100dvh}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:.45rem;padding:.32rem .7rem;line-height:1.25;min-height:2.1rem}
button:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
button.warn{color:#9b2c1f}
button.link{border:0;background:none;padding:.2rem 0;color:var(--accent);font-weight:700;min-height:0}
button.tog{min-width:2.2rem;font-weight:700}
button.tog.italic{font-style:italic}
button.tog.underline{text-decoration:underline}
button.tog.on{background:var(--accent);border-color:var(--accent);color:#fff}
select,input[type=text],input[type=number],textarea,input:not([type]){background:var(--card);border:1px solid var(--line);border-radius:.4rem;padding:.28rem .45rem;min-height:2.1rem;min-width:0;width:100%}
input[type=color]{width:2.6rem;height:2.1rem;padding:.1rem;border:1px solid var(--line);border-radius:.4rem;background:var(--card)}
input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--accent)}
textarea{resize:vertical}

/* раздели */
.tabs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;padding:.5rem var(--pad) 0;border-bottom:1px solid var(--line)}
.tabs button{border:1px solid transparent;border-bottom:0;border-radius:.55rem .55rem 0 0;background:transparent;padding:.45rem 1rem;font-weight:700;color:var(--muted);margin-bottom:-1px}
.tabs button b{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;font-size:.78rem;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-right:.25rem}
.tabs button.on{background:var(--bg);border-color:var(--line);color:var(--ink)}
.tabs button.on b{background:var(--accent);color:#fff}
.tabs em{font-style:normal;font-weight:600;color:var(--muted);font-size:.85em}
.tabs-note{margin-left:auto;font-size:.82rem;color:var(--muted);padding:.3rem 0}

main#app{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 var(--pad)}
.pane{flex:1;display:flex;flex-direction:column;min-height:0;padding:.6rem 0 .8rem}
.pane[hidden]{display:none}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;padding-bottom:.6rem}
.toolbar .sep{width:1px;height:1.6rem;background:var(--line);margin:0 .2rem}
.toolbar .inl{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;color:var(--muted)}
.toolbar .inl select{width:auto;color:var(--ink)}
.toolbar .chk{gap:.3rem}
.rownav{display:inline-flex;align-items:center;gap:.3rem}
.rownav button{min-width:2.1rem;padding:.3rem .45rem}
.rowinfo{min-width:4.5rem;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:.92rem}

/* 1. шаблон */
.design{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:var(--gap);min-height:24rem}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:
  repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0% 25%,transparent 0% 50%) 0 0/18px 18px;border:1px solid var(--line);border-radius:.8rem;min-height:0;overflow:hidden;padding:12px}
#cv{box-shadow:0 2px 10px rgba(0,0,0,.18);touch-action:none;outline:none;max-width:100%}
#cv:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hint{margin:0;font-size:.82rem;color:var(--muted);text-align:center;max-width:44rem}
.props{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:.8rem .9rem;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:.45rem}
.props h2{font-size:1rem;margin:.1rem 0 .1rem}
.props h3{font-size:.86rem;margin:.4rem 0 0;color:var(--muted);font-weight:700}
.prop{display:flex;flex-direction:column;gap:.18rem;font-size:.86rem;color:var(--muted);min-width:0}
.prop>span{font-weight:600}
.prop small{font-size:.76rem;line-height:1.35}
.props .two{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.props .three{display:grid;grid-template-columns:auto 1fr auto;gap:.45rem;align-items:end}
.props .four{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.styles{display:flex;gap:.35rem;align-items:center}
.aligns{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}
.aligns button{padding:.3rem 0;font-size:1.05rem}
.pacts{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.3rem}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.flist button{width:100%;text-align:left;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note{margin:.2rem 0 0;font-size:.8rem;color:var(--muted)}

/* 2. стоки */
.datawrap{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:var(--gap);min-height:0}
.tablebox{overflow:auto;border:1px solid var(--line);border-radius:.8rem;background:var(--card);min-height:16rem}
.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:.88rem}
.grid th,.grid td{border-bottom:1px solid var(--line);padding:0}
.grid thead th{position:sticky;top:0;background:color-mix(in srgb,var(--accent) 8%,var(--card));z-index:1}
.grid{width:auto;min-width:100%}
.grid th input{font-weight:700;border:0;background:transparent}
.grid td input{border:0;border-radius:0;background:transparent;min-height:2rem}
.grid td input:focus,.grid th input:focus{background:color-mix(in srgb,var(--accent) 7%,var(--card));outline:2px solid var(--accent);outline-offset:-2px}
.grid .n{width:2.6rem;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 .3rem}
.grid .x{width:2.2rem;text-align:center}
.grid .x button{border:0;background:none;color:#9b2c1f;font-size:1.1rem;min-height:0;padding:.1rem .5rem}
.grid tr.cur td{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.grid tr.cur .n{color:var(--accent);font-weight:800}
.empty{margin:1.4rem;color:var(--muted)}
.mini{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.5rem;align-items:center;align-self:start}
.mini h2{font-size:1rem;margin:0;align-self:flex-start}
#cvMini{box-shadow:0 2px 8px rgba(0,0,0,.15);max-width:100%}

/* 3. печат */
.printwrap{flex:1;display:grid;grid-template-columns:22rem minmax(0,1fr);gap:var(--gap);min-height:0}
.pset{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.5rem;overflow:auto;min-height:0}
.pset label{display:flex;flex-direction:column;gap:.18rem;font-size:.86rem;color:var(--muted);font-weight:600}
.pset label.chk{flex-direction:row;align-items:center;gap:.4rem}
.pset .two{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.pset .info{margin:.1rem 0;font-size:.85rem;color:var(--ink)}
.pset .info.bad{color:#9b2c1f;font-weight:700}
.pset .acts{display:flex;flex-direction:column;gap:.4rem}
.pview{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:26rem;background:color-mix(in srgb,var(--line) 40%,var(--bg));border:1px solid var(--line);border-radius:.8rem;padding:.6rem}
.pnav{display:flex;align-items:center;gap:.6rem;font-weight:700;font-variant-numeric:tabular-nums}
#cvPage{box-shadow:0 3px 14px rgba(0,0,0,.18);background:#fff}

.busy{position:fixed;inset:0;display:grid;place-items:center;background:rgba(20,15,10,.35);z-index:50}
.busy[hidden]{display:none}
.busy span{background:var(--card);padding:1rem 1.4rem;border-radius:.7rem;box-shadow:var(--shadow);font-weight:700}

/* печатът: само листовете */
#printRoot{display:none}
@media print{
  body.printing>*:not(#printRoot){display:none!important}
  body.printing{background:#fff!important;padding:0!important;display:block!important}
  body.printing #printRoot{display:block}
  .ppage{position:relative;overflow:hidden;page-break-after:always;break-after:page}
  .ppage:last-child{page-break-after:auto;break-after:auto}
  .ppage img{position:absolute;display:block}
  .ppage i{position:absolute;display:block}
  .ppage i.gh{border-top:.15mm dashed #888;height:0}
  .ppage i.gv{border-left:.15mm dashed #888;width:0}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* таблет и телефон: колоните една под друга, превъртането е позволено */
@media (max-width:900px){
  .design,.datawrap,.printwrap{grid-template-columns:1fr}
  .stage{min-height:16rem}
  .props,.pset{overflow:visible}
  .tabs-note{display:none}
  .pview{min-height:22rem}
}
@media (max-width:560px){
  .tabs button{padding:.4rem .6rem}
  .toolbar .sep{display:none}
}