/* Innodekor készlet – „Műterem" kinézet
   Meleg papírszín, padlizsán–sáfrány, Plus Jakarta Sans címek, Source Sans 3 szöveg.
   Gombok fontossági sorrendje: .accent (a lap fő művelete) > .primary > alap (sima) > .ghost; veszélyes: .danger */
:root {
  --plum: #5b2a5e; --plum-d: #43204a; --plum-l: #f4ebf3; --plum-ll: #faf5f9;
  --saffron: #e0a526; --saffron-d: #c98f14; --saffron-l: #fcf0d2;
  --paper: #fffdf8; --bg: #f5f0e8; --line: #eee5d6; --bd: #e4d9c8; --bd2: #d8cbb6;
  --tx: #2a2230; --mu: #7c6f7f;
  --ok: #2f6b2a; --okbg: #e6f2e4; --okbd: #c7e0c2;
  --warn: #b3452c; --wbg: #fbe9e3; --wbd: #efc4b8;
  --info: #2c5a8a; --infobg: #e7eef7; --infobd: #c9d8ea;
  --head-h: 64px;
  /* téma-változók (themes.css írja felül): felületek, fejléc, gombok, sűrűség, lekerekítés */
  --link: var(--plum); --primary-hover: var(--plum-d); --on-accent: #2a1a05;
  --head-bg: var(--plum-d); --head-link: #eadbe9; --head-who: #cdb9cf; --head-sub: #f3e3c2; --head-line: var(--saffron);
  --th-bg: #f1e9dc; --row: #fbf6ee; --row-hover: #f6ecd9; --row-soft: #fdfaf4; --pop: #fff; --input-bg: #fffefb; --card-inset: #fff;
  --soft-bd: #e0cde2; --btn-bg: var(--plum-l); --btn-tx: var(--plum-d); --btn-bd: #e3cfe1; --btn-hover: #ecdcea; --btn-hover-bd: #d7bdd4;
  --ok-tx: #24541f; --warn-tx: #8a2f1c; --acc-tx: #7a5306; --saffron-bd: #efd99a;
  --st-paid: #e9f3e3; --st-packed: #e7edf7; --st-preorder: #fcf0d2; --st-short: #f9e2da;
  --fs: 15.5px; --cell-py: 10px; --cell-px: 13px; --r-card: 16px; --r-box: 12px; --r-in: 10px; --r-btn: 999px; --btn-py: 8px; --btn-px: 17px;
  --card-shadow: 0 6px 18px -12px rgba(67,32,74,.28);
  /* régi nevek (sablonokban, szkriptekben) */
  --t: var(--plum); --td: var(--plum-d);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--fs)/1.55 "Source Sans 3", "Segoe UI", system-ui, sans-serif; color: var(--tx); background: var(--bg); }
a { color: var(--link); text-decoration-color: rgba(91,42,94,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--link); }
h1, h2, h3, .num-big { font-family: "Plus Jakarta Sans", "Source Sans 3", sans-serif; }
h1 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 6px; color: var(--plum-d); line-height: 1.25; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--plum-d); margin: 0 0 14px; }
h3 { font-size: 15px; font-weight: 700; color: var(--plum-d); margin: 18px 0 8px; }
.muted { color: var(--mu); } .small { font-size: 14px; } .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .93em; }
.r { text-align: right; } .neg, .warn { color: var(--warn); } .ok { color: var(--ok); }
.nowrap { white-space: nowrap; }

/* ---- fejléc ---- */
header.top { display: flex; align-items: center; gap: 28px; padding: 0 30px; height: var(--head-h); background: var(--head-bg);
             position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 0 var(--head-line); }
.brand { display: flex; align-items: flex-end; gap: 10px; text-decoration: none; }
.brand img { height: 40px; width: auto; display: block; }   /* a fejléc logója: az új INDA-forma a sáfrány → krém átmenettel */
.brand-sub { font-family: "Montserrat", "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; color: var(--head-sub);
             padding-bottom: 10px; white-space: nowrap; }   /* a logó betűinek aljához igazítva (a betűk alja a kép 69%-ánál, az inda lejjebb lóg) */
header nav { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; justify-content: center; flex: 1; }   /* a menü középen, a logó balra, a felhasználó jobbra */
header nav a { color: var(--head-link); padding: 7px 13px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
header nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
header nav a.on { background: var(--saffron); color: var(--on-accent); font-weight: 600; }
header .who { color: var(--head-who); font-size: 14px; white-space: nowrap; }
header .theme-pick { font-size: 13px; padding: 3px 8px; border-radius: var(--r-btn); background: rgba(255,255,255,.08); color: var(--head-link); border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
header .theme-pick:focus { outline: none; border-color: var(--saffron); box-shadow: none; }
header .theme-pick option { color: var(--tx); background: var(--paper); }
header .who a { color: var(--head-sub); }

main { padding: 24px 32px 64px; max-width: 1480px; margin: 0 auto; }  /* egységes oldalszélesség: űrlap, kártya és táblázat ugyanazon a szélen */

/* ---- fülek ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.tabs a { border: 1px solid var(--bd); background: var(--paper); border-radius: var(--r-btn); padding: 7px 18px; color: var(--plum-d); font-size: 15px; text-decoration: none; }
.tabs a:hover { background: var(--plum-l); }
.tabs a.on { background: var(--plum); border-color: var(--plum); color: #fff; font-weight: 600; }

/* ---- oldalfej: morzsamenü, cím + címkék, adatsor, műveletek ---- */
.crumbs { margin: 0 0 6px; color: var(--mu); font-size: 14px; }
.page-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
.page-head .ph-main { flex: 1 1 520px; min-width: 0; }
.page-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 6px; }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--mu); font-size: 15px; align-items: center; }
.page-head .meta b { color: var(--tx); font-weight: 600; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.num-big { font-size: 24px; font-weight: 700; color: var(--plum-d); letter-spacing: -.02em; }

/* ---- dobozok ---- */
.card { background: var(--paper); border: 1px solid var(--bd); border-radius: var(--r-card); padding: 22px 24px; margin-bottom: 22px;
        box-shadow: 0 1px 0 var(--card-inset) inset, var(--card-shadow); min-width: 0; }
.card > h2:first-child, .card > form > h2:first-child, .card > .card-head:first-child {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px dotted var(--bd); }
.card > h2:first-child::before, .card > form > h2:first-child::before, .card > .card-head:first-child > h2::before {
        content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--saffron); flex: none; }
.card-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.card-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.card h2 .small, .card h2 .muted, .card h2 .tag, .card h2 .badge { font-family: "Source Sans 3", sans-serif; font-weight: 400; }
.card h2 ~ h2 { margin-top: 26px; }
.card.flat { box-shadow: none; }
.card.accent-left { border-left: 5px solid var(--saffron); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; align-items: start; }
.cols > .card { margin-bottom: 0; }
/* masonry.js: ha több kártya van, mint hasáb, a kártyák hasáboszlopokba (.mcol) kerülnek a legrövidebbe sorban – nincs lyuk */
.cols > .mcol { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .cols > .mcol > .card { margin: 0; }
.cols + .cols, .cols + .card, .card + .cols { margin-top: 22px; } .cols + h2, .cols + h3 { margin-top: 26px; }
.stack > .card:last-child { margin-bottom: 0; }
.split { display: grid; grid-template-columns: minmax(400px, 5fr) minmax(520px, 7fr); gap: 22px; align-items: start; margin-bottom: 22px; }
.split > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack > .card { margin: 0; }
.split.wide-left { grid-template-columns: minmax(520px, 7fr) minmax(400px, 5fr); }
.split.wide-right { grid-template-columns: minmax(380px, 4fr) minmax(560px, 8fr); }   /* rendelés: a tételtábla kap több helyet */
@media (max-width: 1150px) { .split { grid-template-columns: 1fr; } }
/* rendelés oldala, alsó blokkok: rács egyforma, rögzített magasságú kártyákkal (a hosszabb tartalom a kártyán belül görgethető),
   két hasáb, a kártyák sorban töltik a rácsot, így egyik oszlop sem nyúlik meg; a kettéosztás (details) teljes szélességű, saját magasságú sor */
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-bottom: 22px; --block-h: 520px; }
/* a magasság a legtöbb tartalmú változathoz mérve (10-15): nyitott rendelés számlázó űrlapja ≈ 500 px 700 px széles kártyán, ≈ 550 px 575 px szélesen;
   három hasábban 750 px fölé nyúlna, ezért két hasáb marad */
@media (max-width: 1300px) { .blocks { --block-h: 560px; } }
@media (max-width: 760px) { .blocks { grid-template-columns: 1fr; } .blocks > .card { height: auto; } }
.blocks > * { min-width: 0; order: 5; }
.blocks > .card { height: var(--block-h); overflow: hidden auto; margin: 0; padding-top: 0; }
.blocks > details.card { height: auto; grid-column: 1 / -1; order: 9; }
.blocks > #billcard { order: 1; } .blocks > #shipcard { order: 2; }
.blocks > .card > h2:first-child, .blocks > form.card > h2:first-child { position: sticky; top: 0; background: var(--paper); z-index: 3; margin: 0 -24px 16px; padding: 22px 24px 12px; }
.blocks table.grid tr:first-child th, .blocks table.grid thead th { top: 62px; }                         /* a görgethető kártyán belül a táblázatfej a kártya tetejére tapad, nem a fejléc alá */
.blocks .card.flat { margin: 0 0 12px; padding: 12px 14px; }

/* ---- kulcs–érték ---- */
table.kv { width: 100%; border-collapse: collapse; }
table.kv th, table.kv td { padding: 10px 0; vertical-align: top; text-align: left; }
table.kv tr + tr th, table.kv tr + tr td { border-top: 1px dashed var(--line); }
table.kv th { width: 150px; padding-right: 16px; font-size: 14px; color: var(--mu); font-weight: 600; font-variant: small-caps; letter-spacing: .03em; white-space: nowrap; }
table.kv td .sub { display: block; color: var(--mu); font-size: 14px; }

/* ---- címkék ---- */
.tag, .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.5; padding: 1px 10px; border-radius: 999px;
               background: var(--th-bg); color: var(--plum-d); border: 1px solid var(--bd); font-weight: 600; white-space: nowrap; vertical-align: middle; }
.tag.ok, .badge.ok { background: var(--okbg); color: var(--ok); border-color: var(--okbd); }
.tag.warn, .badge.warn { background: var(--wbg); color: var(--warn); border-color: var(--wbd); }
a.tag { text-decoration: none; cursor: pointer; } a.tag:hover { border-color: var(--link); }
a.tag.on { background: var(--plum); color: #fff; border-color: var(--plum); }
.supchips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge.info { background: var(--infobg); color: var(--info); border-color: var(--infobd); }
.badge.acc { background: var(--saffron-l); color: var(--acc-tx); border-color: var(--saffron-bd); }
.badge.plum { background: var(--plum); color: #fff; border-color: var(--plum); }
h1 .badge, h1 .tag { font-size: 13.5px; }

/* ---- gombok ---- */
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 8px 12px; border: 1px solid var(--bd2); border-radius: var(--r-in); background: var(--input-bg); color: var(--tx); font-size: 15px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(91,42,94,.15); }
input[type=checkbox], input[type=radio] { accent-color: var(--plum); width: 16px; height: 16px; vertical-align: middle; }
button, .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: center; cursor: pointer; text-decoration: none; white-space: nowrap;
               padding: var(--btn-py) var(--btn-px); border-radius: var(--r-btn); font-weight: 600; font-size: 15px; line-height: 1.35;
               background: var(--btn-bg); color: var(--btn-tx); border: 1px solid var(--btn-bd); }
button:hover, .btn:hover { background: var(--btn-hover); border-color: var(--btn-hover-bd); }
button.primary, .btn.primary { background: var(--plum); color: #fff; border-color: var(--plum); }
button.primary:hover, .btn.primary:hover { background: var(--primary-hover); }
button.accent, .btn.accent { background: var(--saffron); color: var(--on-accent); border-color: var(--saffron-d); }
button.accent:hover, .btn.accent:hover { background: var(--saffron-d); }
button.danger, .btn.danger { background: var(--pop); color: var(--warn); border-color: var(--wbd); }
button.danger:hover, .btn.danger:hover { background: var(--wbg); }
button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--link); padding-left: 8px; padding-right: 8px; }
button.ghost:hover, .btn.ghost:hover { background: var(--plum-l); }
button.small, .btn.small { padding: 4px 12px; font-size: 14px; }
button:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btns { display: inline-flex; gap: 4px; }
.btns button { background: var(--paper); color: var(--plum-d); border-color: var(--bd); }
.btns button.on { background: var(--plum); color: #fff; border-color: var(--plum); }

/* ---- űrlapok ---- */
.form label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--plum-d); }
.form label input, .form label textarea, .form label select { width: 100%; margin-top: 4px; font-weight: 400; }
.form label input[type=checkbox], .form label input[type=radio] { width: 16px; margin: 0 6px 0 0; }
.form .row { display: flex; gap: 16px; flex-wrap: wrap; } .form .row > label { flex: 1 1 200px; }
.form .checks label, .checks label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; color: var(--tx); margin-right: 18px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.fields label { margin: 0; }
.actionbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 14px; margin-top: 6px; border-top: 1px dashed var(--line); }
.actionbar .spacer { flex: 1; }
.confirm { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--mu); }
.inline { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input[type=text], .toolbar input[name=q] { flex: 1; min-width: 260px; }

/* lenyitható szerkesztő blokk */
details.edit { margin-top: 10px; }
details.edit > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--plum); font-weight: 600; font-size: 14px;
                          padding: 3px 12px; border-radius: var(--r-btn); border: 1px dashed var(--btn-hover-bd); }
details.edit > summary::-webkit-details-marker { display: none; }
details.edit > summary::before { content: '✎'; }
details.edit[open] > summary { background: var(--plum-l); border-style: solid; }
details.edit .edit-body { margin-top: 12px; padding: 14px 16px; background: var(--plum-ll); border: 1px solid var(--soft-bd); border-radius: var(--r-box); display: grid; gap: 12px; }
details.edit .edit-body form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
details.edit .edit-body .lbl { width: 100%; font-size: 13px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: .04em; }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: '▸'; color: var(--saffron-d); font-size: 18px; }
details.card[open] > summary::before { content: '▾'; }
details.card[open] > summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px dotted var(--bd); }
details.card > summary h2 { margin: 0; }

/* ---- üzenetek ---- */
.flash { padding: 12px 16px; border-radius: var(--r-box); margin-bottom: 12px; background: var(--plum-ll); border: 1px solid var(--soft-bd); }
.flash.ok { background: var(--okbg); border-color: var(--okbd); color: var(--ok-tx); }
.flash.err { background: var(--wbg); border-color: var(--wbd); color: var(--warn-tx); }
.banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
          background: var(--saffron-l); border: 1px solid var(--saffron-bd); }
.banner.warn { background: var(--wbg); border-color: var(--wbd); }

/* ---- táblázatok ---- */
table.grid { width: 100%; border: 1px solid var(--bd); border-radius: var(--r-box); border-collapse: separate; border-spacing: 0; background: var(--paper); font-size: 15px; }
table.grid th, table.grid td { padding: var(--cell-py) var(--cell-px); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.grid tr:first-child th, table.grid thead th { background: var(--th-bg); color: var(--plum-d); font-size: 13.5px; font-weight: 700; font-variant: small-caps;
        letter-spacing: .05em; white-space: nowrap; position: sticky; top: var(--head-h); z-index: 2; user-select: none; }
table.grid tr:first-child > :first-child { border-top-left-radius: calc(var(--r-box) - 1px); } table.grid tr:first-child > :last-child { border-top-right-radius: calc(var(--r-box) - 1px); }
table.grid tr:last-child > :first-child { border-bottom-left-radius: calc(var(--r-box) - 1px); } table.grid tr:last-child > :last-child { border-bottom-right-radius: calc(var(--r-box) - 1px); }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:nth-child(even) td, table.grid tr:nth-child(even) td { background: var(--row); }
table.grid tbody tr:hover td { background: var(--row-hover); }
table.grid tbody tr[onclick]:hover, table.grid tr[data-href]:hover, #orders tr:hover { cursor: pointer; }
table.grid.small { font-size: 15px; }
table.grid th.r, table.grid td.r { text-align: right; }
table.grid tr.inactive td { color: var(--mu); }
table.grid tr.total td { background: var(--th-bg) !important; font-weight: 700; border-top: 2px solid var(--bd); }
table.grid tr.nocost td:nth-child(2) { background: var(--wbg); }
table.grid tr.nostock td { color: var(--mu); } table.grid tr.nostock td input { color: var(--mu); }
table.grid tr.child td { background: var(--row-soft); } table.grid tr.child td:first-child { padding-left: 24px; } .indent { color: var(--mu); margin-right: 4px; }
table.grid tr.diffrow td { background: var(--saffron-l) !important; } table.grid tr.todo td:nth-child(6) { background: var(--row); }
table.grid td.grip { cursor: grab; color: var(--mu); user-select: none; width: 18px; text-align: center; letter-spacing: -2px; }
table.grid tr.dragging { opacity: .4; }
.tablewrap { overflow-x: auto; border-radius: var(--r-box); }
#tbl tr.low td:nth-child(5) { color: var(--warn); }
#tbl th, #tbl td { white-space: nowrap; }
#tbl td.nm { max-width: 560px; overflow: hidden; text-overflow: ellipsis; }
#items.compact .det { display: none; }

/* állapotszínek a rendeléslistákon */
#orders tr.paid td { background: var(--st-paid) !important; } #orders tr.packed td { background: var(--st-packed) !important; }
#orders tr.preorder td { background: var(--st-preorder) !important; } #orders tr.short td { background: var(--st-short) !important; }
#orders tbody tr:hover td, #orders tr:hover td { filter: brightness(.97); }
#orders td.mono, #orders td.r, #orders td:nth-child(3) { white-space: nowrap; }
#oitems tr.short td { background: var(--st-short) !important; }
#oitems tr.arriving td { background: var(--okbg) !important; }   /* hiányzó tétel, de az elküldött beszállítói rendelésből érkezik elég */
/* rendelés tételei: a szám- és cikkszámoszlopok nem törnek, a szűkebb cellatávolsággal a Név kapja a maradék helyet
   (különben a 9 oszlop mellett a név egy szó / sorra zsugorodik) */
#oitems th, #oitems td { padding: 8px 9px; }
#oitems td.r, #oitems td.mono { white-space: nowrap; }
#oitems th { white-space: normal; line-height: 1.15; vertical-align: bottom; }   /* a fejléc szövege tördelhető: ne a „Nettó egys.” tartsa szélesen az oszlopot */
#oitems td.name { min-width: 180px; } #oitems td.name .badge { margin-left: 4px; vertical-align: 1px; }
/* termékkép (Unasból): kis bélyegkép a tételsorokban, nagyobb a termék fejlécében; kattintva a webshop képe nyílik */
table.grid th.pic, table.grid td.pic { width: 52px; padding: 6px 4px 6px 10px; }
.thumb { display: block; width: 44px; height: 44px; object-fit: contain; background: var(--pop); border: 1px solid var(--bd); border-radius: 8px; box-sizing: border-box; }
.thumb.lg { width: 96px; height: 96px; border-radius: 12px; }
.thumb.none { background: repeating-linear-gradient(135deg, var(--row) 0 6px, var(--paper) 6px 12px); }
.thumb[data-big] { cursor: zoom-in; } .thumb[data-big]:hover { border-color: var(--plum); }
/* felugró képnéző: a bélyegképre kattintva, X-re / mellé kattintva / Esc-re zárul */
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(43,37,48,.55); display: none; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow: auto; }
.modal .modal-in { position: relative; background: var(--paper); border: 1px solid var(--bd); border-radius: var(--r-card); padding: 20px 22px; box-shadow: 0 24px 60px rgba(67,32,74,.28); width: min(980px, 94vw); max-height: 86vh; overflow: auto; }
.modal .modal-x { position: absolute; top: 10px; right: 12px; padding: 2px 10px; font-size: 18px; line-height: 1.2; }
.modal, .modal .modal-in { overscroll-behavior: contain; }                 /* a felugró görgetése ne vigye tovább az alatta lévő lapot */
.modal table.grid tr:first-child th, .modal table.grid thead th { position: static; }   /* a fejléc-tapadás a lap fejlécéhez igazodik, a felugróban eltakarná az első sorokat */
body.modal-open { overflow: hidden; }
#piclb { position: fixed; inset: 0; z-index: 1000; background: rgba(43,37,48,.55); display: none; align-items: center; justify-content: center; padding: 24px; }
#piclb .piclb-in { position: relative; background: var(--paper); border: 1px solid var(--bd); border-radius: 16px; padding: 18px; box-shadow: 0 24px 60px rgba(67,32,74,.28); max-width: min(900px, 94vw); }
#piclb img { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; background: var(--pop); }
#piclb .piclb-cap { margin-top: 10px; text-align: center; color: var(--mu); font-size: 14px; }
#piclb .piclb-x { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bd); background: var(--paper); color: var(--plum-d); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
#piclb .piclb-x:hover { background: var(--plum); color: #fff; }
.page-head .ph-pic { flex: 0 0 auto; }
/* rendelés oldala (Unas-elrendezés): fent a vevő és a fizetés/szállítás egymás mellett, alatta a tételek teljes szélességben, nagyobb képpel */
.split.even { grid-template-columns: 1fr 1fr; }
#custrow { align-items: stretch; }
/* termék adatlap (10-15): fent Törzsadat + Készlet egyforma magas; lent Készletmozgások + Módosítások rögzített magasságú, belül görgethető
   kártyák, a hosszú értékek (pl. JSON a naplóban) tördelve, hogy a táblázat ne csússzon ki a kártyából */
#prodtop { align-items: stretch; } #prodtop > .card { margin-bottom: 0; }
#prodlog { align-items: stretch; } #prodlog > .card { height: 440px; overflow: hidden auto; margin-bottom: 0; padding-top: 0; }   /* csak függőleges görgetés: a cím oldalsó negatív margója ne adjon vízszintes csúszkát */
/* a tapadó cím nem léphet ki a kártya tartalmi dobozából, ezért a felső párnázat a címé: a cím a kártya legtetejéig ér, a lista nem látszik át fölötte */
#prodlog > .card > h2:first-child { position: sticky; top: 0; background: var(--paper); z-index: 3; margin: 0 -24px 16px; padding: 22px 24px 12px; }
#prodlog table.grid tr:first-child th, #prodlog table.grid thead th { top: 62px; }   /* a cím alá tapad (22 + 17 px × 1,55 + 12 + 2 px ≈ 62 px), nem rá */
#prodlog .tablewrap, .blocks .tablewrap { overflow: visible; }   /* a görgethető kártyán belül a táblázat-burkoló ne legyen külön görgető, különben a fej nem a kártyához tapad */
#prodlog table.grid td { overflow-wrap: anywhere; word-break: break-word; }   /* rendelés: a Vevő és a Fizetés és szállítás kártya egyforma magas (a rövidebb kitölti a sort) */
#itemscard { margin-bottom: 22px; }
#oitems td.pic, #pack td.pic { width: 88px; padding: 6px 4px 6px 10px; }
#oitems .thumb, #pack .thumb { width: 76px; height: 76px; border-radius: 10px; }
#oitems td.name { min-width: 260px; font-size: 16px; }
#pack tr.done td { background: var(--st-paid) !important; } #pack tr.over td { background: var(--st-short) !important; } #pack tr.partial td { background: var(--st-preorder) !important; }
.legend { margin-left: auto; color: var(--mu); display: flex; gap: 12px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 15px; height: 15px; border: 1px solid var(--bd); border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.legend .sw.paid { background: var(--st-paid); } .legend .sw.packed { background: var(--st-packed); } .legend .sw.preorder { background: var(--st-preorder); } .legend .sw.short { background: var(--st-short); }

/* ---- folyamatjelző (rendelés lépései) ---- */
.stepper { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 20px; background: var(--paper); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.stepper .step { flex: 1 1 150px; padding: 12px 16px; border-right: 1px solid var(--line); position: relative; }
.stepper .step:last-child { border-right: 0; }
.stepper .step .t { font-weight: 700; color: var(--mu); font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.stepper .step .t::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bd2); background: var(--pop); flex: none; }
.stepper .step .d { font-size: 13.5px; color: var(--mu); margin-top: 2px; min-height: 20px; }
.stepper .step.done { background: var(--okbg); } .stepper .step.done .t { color: var(--ok); } .stepper .step.done .t::before { background: var(--ok); border-color: var(--ok); }
.stepper .step.now { background: var(--saffron-l); box-shadow: inset 0 -3px 0 var(--saffron); } .stepper .step.now .t { color: var(--acc-tx); }
.stepper .step.now .t::before { border-color: var(--saffron-d); background: var(--saffron); }
.stepper .step form { display: inline; margin: 0; }
.stepper .step .undo { font-size: 13px; padding: 0 8px; margin-top: 4px; }

/* ---- munkalista lépcsői ---- */
.stages { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 4px 0 20px; }
.stages .stage { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 150px; background: var(--paper); border: 1px solid var(--bd);
                 border-radius: 14px; padding: 12px 18px; color: var(--plum-d); font-size: 15px; text-decoration: none; }
.stages .stage .n { font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--plum); }
.stages .stage:hover { border-color: var(--btn-hover-bd); }
.stages .stage.empty { opacity: .55; }
.stages .stage.on { background: var(--plum); border-color: var(--plum); color: #fff; box-shadow: 0 6px 16px -8px rgba(67,32,74,.6); }
.stages .stage.on .n { color: var(--saffron); }
.stages .sync { margin-left: auto; align-self: center; display: flex; gap: 8px; align-items: center; }

/* ---- dashboard csempék ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.tile { background: var(--paper); border: 1px solid var(--bd); border-left: 6px solid var(--saffron); border-radius: var(--r-card); padding: 16px 18px; }
.tile .v { font-family: "Plus Jakarta Sans", sans-serif; font-size: 28px; font-weight: 700; color: var(--plum-d); }
.tile .l { color: var(--mu); font-size: 14px; }
.tile.warn { border-left-color: var(--warn); }

/* ---- futár-jelvények (static/carriers/*.svg): fehér pirula, hogy sötét témán is látsszon a logó ---- */
.cbadge { display: inline-flex; align-items: center; height: 26px; padding: 0 7px; border-radius: 6px; background: #fff; border: 1px solid var(--bd); vertical-align: middle; }
.cbadge img { height: 19px; width: auto; display: block; }
.cbadge.text { font-size: 13px; color: var(--mu); background: transparent; border-color: transparent; padding: 0; height: auto; }

/* ---- vegyes ---- */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 16px; flex-wrap: wrap; }
.pager .btn.small { margin-left: 0; } .pager .btn.disabled { background: var(--paper); color: var(--mu); border-color: var(--bd); cursor: default; }
.result { border-left: 5px solid var(--plum); }
button .spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; margin-left: 6px; } button.ghost .spinner, button.small:not(.primary):not(.accent):not(.danger) .spinner { border-color: var(--bd); border-top-color: var(--plum); }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--bd); border-top-color: var(--plum); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
pre { white-space: pre-wrap; background: var(--row); padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.picker { position: absolute; z-index: 40; background: var(--pop); border: 1px solid var(--bd); border-radius: 12px; box-shadow: 0 10px 28px rgba(67,32,74,.18); max-height: 340px; overflow: auto; min-width: 380px; }
.picker .pick { padding: 7px 12px; cursor: pointer; font-size: 14.5px; } .picker .pick:hover { background: var(--plum-l); }
a.tog { display: inline-block; min-width: 26px; text-align: center; padding: 0 6px; border-radius: 999px; background: var(--plum); color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.cp { display: inline-flex; align-items: center; font-size: 12px; line-height: 1; padding: 3px 7px; margin-left: 4px; border: 1px solid var(--bd); border-radius: 999px;
      background: var(--paper); color: var(--mu); cursor: pointer; vertical-align: middle; font-weight: 400; }
.cp:hover { color: var(--plum); border-color: var(--plum); background: var(--paper); }
.hint { font-size: 14px; color: var(--mu); margin: 4px 0 12px; }

/* ---- belépés ---- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login { width: 360px; } .login h1 { text-align: center; } .login h1.brand-title { margin: 4px auto 18px; } .login h1.brand-title img { height: 84px; width: auto; display: inline-block; }
.login label { display: block; margin-bottom: 12px; } .login input, .login select { width: 100%; margin-top: 4px; }
.login button { width: 100%; }

@media (max-width: 1500px) { .brand-sub { display: none; } }   /* keskenyebb képernyőn a menü elsőbbséget kap */
@media (max-width: 900px) {
  header.top { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px 16px; position: static; }
  header nav { justify-content: flex-start; flex-basis: 100%; order: 3; }
  header .theme-pick { margin-left: auto; } header .who { margin-left: 0; }
  :root { --head-h: 0px; }
  main { padding: 16px; }
  .page-head .actions { justify-content: flex-start; }
}
/* görgethető/levágott táblázatburkolóban a fejléc nem ragad (különben a burkolón belül lecsúszik) */
.tablewrap table.grid tr:first-child th, .tablewrap table.grid thead th, #itemswrap table.grid th { position: static; }

/* oldalfejben lenyíló szerkesztő: jobbra nyíljon, ne tolja szét a fejet */
.page-head .actions details.edit { position: relative; }
.page-head .actions details.edit .edit-body { position: absolute; right: 0; top: 100%; z-index: 35; min-width: 460px; box-shadow: 0 12px 30px -10px rgba(67,32,74,.35); }
.toolbar.card { box-shadow: none; }

/* lista-oldalak szűrősora dobozban */
main > form.toolbar { background: var(--paper); border: 1px solid var(--bd); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
main > table.grid, main > form > table.grid { margin-bottom: 8px; }
a.tile { color: inherit; display: block; transition: border-color .15s, box-shadow .15s; }
a.tile:hover { border-color: var(--btn-hover-bd); box-shadow: 0 6px 18px -12px rgba(67,32,74,.35); }
/* dashboard: bal oldalon a csempék két oszlopban (a mai nap padlizsán, a teendők sáfrány szegéllyel), jobbra a grafikon kapcsolóval */
.dash-top { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(480px, 1.35fr); gap: 22px; align-items: stretch; }
.dash-tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; margin: 0; }   /* minden csempe-sor egyforma magas (a Kézbesítés csempe sorai ehhez húzódnak szét) */
.dash-top > .card { margin: 0; }
.tile.kpi { border-left-color: var(--plum); }
.tile.go { border-left-color: var(--ok); background: var(--okbg); }
.tile.go .v { color: var(--ok); }
/* a Kézbesítés csempe négy sora: a saját magassága kisebb a többinél, a sor magasságáig széthúzva (space-between) */
.tile.deliv { display: flex; flex-direction: column; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.tile.deliv .drow { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.2; }
.tile.deliv .dl { flex: 1; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.deliv .dn { min-width: 18px; text-align: right; font-size: 14px; color: var(--plum-d); }
.tile.deliv .drow.zero .dl, .tile.deliv .drow.zero .dn { color: var(--mu); font-weight: 400; }
@media (max-width: 1100px) { .dash-top { grid-template-columns: 1fr; } }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bd); border-radius: 999px; background: var(--paper); }
.seg button { padding: 4px 14px; font-size: 14px; font-weight: 600; background: transparent; border: 0; color: var(--plum-d); }
.seg button:hover { background: var(--plum-l); }
.seg button.on { background: var(--plum); color: #fff; }
.seg a { padding: 4px 14px; font-size: 14px; font-weight: 600; color: var(--plum-d); border-radius: 999px; text-decoration: none; }
.seg a:hover { background: var(--plum-l); } .seg a.on { background: var(--plum); color: #fff; }
/* keskeny kijelzőn a grafikon nem zsugorodik olvashatatlanra, hanem a kártyán belül görgethető */
.chartwrap { overflow-x: auto; }
.chartwrap svg { display: block; min-width: 560px; }
/* grafikonok: egérrel követett súgó (data-tip), a rámutatott oszlopcsoport halványan kiemelve */
svg .hit { cursor: default; }
svg .hit:hover { fill: rgba(91, 42, 94, .07); }
.charttip { position: fixed; z-index: 60; pointer-events: none; display: none; white-space: nowrap; background: var(--head-bg); color: #fff;
            font-size: 13.5px; padding: 5px 11px; border-radius: 8px; box-shadow: 0 8px 20px -8px rgba(42, 34, 48, .45); }

/* receptúra összetevő-táblázat: a kártya szélességéhez igazodik, a mezők a cellához (nem lóg ki jobbra) */
#comp { width: 100%; table-layout: fixed; }
#comp th:nth-child(1), #comp td:nth-child(1) { width: 24px; padding-left: 4px; padding-right: 0; }
/* oszlopok: 1 fogó · 2 cikkszám · 3 név (a maradék) · 4 menny. · 5 egység · 6 szabad · 7 átlagár · 8 érték · 9 törlés */
#comp th:nth-child(2) { width: 118px; }
#comp th:nth-child(4) { width: 66px; }
#comp th:nth-child(5) { width: 44px; }
#comp th:nth-child(6), #comp th:nth-child(7), #comp th:nth-child(8) { width: 82px; }
#comp th:nth-child(9), #comp td:nth-child(9) { width: 28px; padding-left: 0; padding-right: 4px; text-align: center; }
#comp th { white-space: normal; line-height: 1.2; }
#comp td { padding-left: 5px; padding-right: 5px; }
#comp input { width: 100%; min-width: 0; box-sizing: border-box; padding-left: 7px; padding-right: 7px; }
#comp td.r { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#orders td.mono { white-space: nowrap; }

/* kompakt űrlapok: minden kitöltendő űrlap ezt a sablont követi */
.form .row { gap: 12px 14px; } .form label { margin-bottom: 10px; }
/* partner: számlázási és szállítási cím két külön blokkban egymás mellett (keskenyen egymás alatt) */
.addr2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 18px; margin: 2px 0 6px; }
.addr2 .addr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 0; margin-bottom: 12px; background: var(--row-soft); min-width: 0; }
.addr2 h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--plum-d); display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.addr2 h3 label.inl { display: inline-flex; gap: 5px; align-items: center; margin: 0; font-weight: 400; font-size: 13.5px; color: var(--mu); cursor: pointer; }
.addr2 h3 label.inl input { margin: 0; }
.form h2 { margin-bottom: 10px; }
.form .tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
#items { width: 100%; }
#items input { min-width: 56px; } #items td:nth-child(2) input { width: 120px; } #items td:nth-child(3) input { width: 100%; min-width: 200px; }
#items td:nth-child(4) input, #items td:nth-child(6) input { width: 64px; } #items td:nth-child(5) input { width: 96px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; align-items: start; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: 1fr; } }
.form label .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }
dialog.pdlg { border: 1px solid var(--bd); border-radius: 16px; padding: 22px 24px; width: min(860px, 94vw); background: var(--paper); color: var(--tx); box-shadow: 0 24px 60px rgba(67,32,74,.28); }
dialog.pdlg::backdrop { background: rgba(43,37,48,.45); }

/* leltár számlálóoldal */
#invcard .tablewrap { overflow-x: auto; }
#tbl td.cat { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
#tbl td.nm { max-width: 420px; }
#tbl .cnt { width: 84px; text-align: right; padding: 6px 8px; }
#tbl .note { width: 100%; min-width: 120px; padding: 6px 8px; }
#tbl td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
#tbl tr.diffrow td.diff { color: var(--warn, #b04a2d); font-weight: 600; }


/* lista-buborékok (rendelt tételek / vevő adatai) és vásárló-jelzők */
[data-hover] { cursor: help; border-bottom: 1px dotted var(--bd2); }
a[data-hover] { border-bottom: none; }
.hoverbox { position: fixed; z-index: 1100;   /* a felugró (.modal, 1000) fölött is */ display: none; max-width: 640px; min-width: 320px; background: var(--pop); border: 1px solid var(--bd); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(67,32,74,.2); padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.hoverbox .hb-head { font-weight: 600; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hoverbox table.hb { border-collapse: collapse; width: 100%; }
.hoverbox table.hb th { text-align: left; font-weight: 600; color: var(--mu); font-size: 12.5px; padding: 2px 8px 4px 0; border-bottom: 1px solid var(--line); }
.hoverbox table.hb td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hoverbox table.hb tr:last-child td { border-bottom: none; }
.hoverbox table.hb th.r, .hoverbox table.hb td.r { text-align: right; padding-right: 0; }
.hoverbox table.hb.kv th { border-bottom: none; white-space: nowrap; padding-right: 12px; }
.hoverbox table.hb.kv td { border-bottom: none; }
.ico { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 5px; }
.ico.new { color: var(--saffron-d); font-size: 14px; }
.ico.guest { color: var(--mu); }

/* Minden rendelés lista: a keskeny oszlopok (jelölő, rendelésszám, dátum, állapot, bruttó, számla) csak annyit foglalnak, amennyi kell, a vevő / fizetés / szállítás kapja a helyet */
table.orders-all th:nth-child(1), table.orders-all td:nth-child(1) { width: 1%; padding-right: 4px; }
table.orders-all th:nth-child(2), table.orders-all td:nth-child(2), table.orders-all th:nth-child(3), table.orders-all td:nth-child(3),
table.orders-all th:nth-child(8), table.orders-all td:nth-child(8), table.orders-all th:nth-child(9), table.orders-all td:nth-child(9),
table.orders-all th:nth-child(10), table.orders-all td:nth-child(10) { width: 1%; white-space: nowrap; }
table.orders-all td:nth-child(4) { min-width: 200px; }
.onote { font-size: 12.5px; color: var(--mu); margin-top: 2px; line-height: 1.3; max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* rendelés megjegyzései a listában (belső ✎, vevő, futárnak), mint az Unasban */
.onote b { font-weight: 600; color: var(--plum-d); }
table.orders-all td:nth-child(5) { min-width: 130px; }
table.orders-all td:nth-child(6) { min-width: 180px; }
table.orders-all td:nth-child(7) { min-width: 130px; }
table.orders-all td:nth-child(4) .ico { margin-left: 4px; }

/* admin megjegyzés a rendelés oldalán: szövegdoboz + gomb egy sorban */
form.notef { display: flex; gap: 8px; align-items: flex-start; }
form.notef textarea { flex: 1; min-height: 44px; font: inherit; font-size: 14px; }

/* feladat-sáv: háttérfeladat állapota a lap tetején, a felhasználó a helyén marad */
.jobbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; margin-bottom: 12px; background: var(--plum-ll); border: 1px solid var(--soft-bd); font-size: 14.5px; }
.jobbar.ok { background: var(--okbg); border-color: var(--okbd); color: var(--ok-tx); }
.jobbar.err { background: var(--wbg); border-color: var(--wbd); color: var(--warn-tx); }
.jobbar .spacer { flex: 1; }
.jobbar .jb-close { background: none; border: none; font-size: 18px; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }

/* címkeív-pozíció választó: kattintható 2×2-es rács (a nyomtatóba tett ív számozása, nyíl = ez az él megy be) */
.sheetpick { gap: 8px; align-items: center; }
.sheetpick-grid { display: grid; grid-template-columns: 34px 34px; grid-auto-rows: 24px; gap: 2px; position: relative; padding-bottom: 12px; }
.sheetpick-arrow { position: absolute; bottom: -4px; left: 0; right: 0; text-align: center; font-size: 14px; line-height: 14px; color: var(--mu); }
.sheetpick-cell { display: block; cursor: pointer; }
.sheetpick-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.sheetpick-cell span { display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid var(--bd2); border-radius: 3px; font-size: 13px; color: var(--mu); background: var(--paper); user-select: none; }
.sheetpick-cell input:checked + span { background: var(--plum); color: #fff; border-color: var(--plum); font-weight: 600; }
.sheetpick-cell input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 1px; }

/* Futárcímke kártya: küldeményenként egy blokk, tördelhető sorok (fej: mikor / futár / csomagszám / Unas; nyomtatás; törlés) */
.shipments { border: 1px solid var(--bd); border-radius: 12px; background: var(--paper); }
.shipment { padding: 6px 16px; border-bottom: 2px solid var(--bd); }
.shipment:last-child { border-bottom: 0; }
.shipment.inactive { opacity: .6; }
.ship-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); min-height: 44px; }
.ship-row.ship-head { border-top: 0; font-size: 15px; }
.ship-print, .ship-del { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }

/* Rendeléstervező */
/* tervező táblázata: vízszintes görgetés nélkül férjen el – szűkebb cellák, keskeny mezők, csak a név törik */
#tbl th, #tbl td { padding: 7px 8px; white-space: nowrap; }
#tbl td:nth-child(3) { white-space: normal; min-width: 220px; }
#tbl td.pl-btns { padding-right: 2px; } #tbl td.pl-btns button { padding: 2px 4px; } #tbl td.pl-btns button:first-child { margin-left: -4px; }   /* a ✕ jele ugyanannyira a széltől, mint a jobb szélső oszlop tartalma */
#tbl input.pl-qty, #tbl input.pl-th { width: 66px; text-align: right; padding: 4px 5px; }
#tbl input.pl-th { width: 58px; color: var(--mu); }
#tbl input.pl-th:not(:placeholder-shown) { color: var(--tx); font-weight: 600; }
#tbl input.pl-qty-auto { color: var(--info); font-style: italic; }
#tbl input.pl-qty:not(.pl-qty-auto):not(:placeholder-shown) { font-weight: 600; }
tr.pl-suggested td { background: var(--infobg) !important; }
tr.pl-manual td { background: var(--saffron-l) !important; }
tr.pl-excluded td { opacity: .5; }
tr.pl-optwarn td:nth-child(8) { box-shadow: inset 3px 0 0 var(--saffron); }
.tag.pl-spd-fast { background: var(--okbg); color: var(--ok); border-color: var(--okbd); }
.tag.pl-spd-med { background: var(--infobg); color: var(--info); border-color: var(--infobd); }
.tag.pl-spd-slow { background: var(--saffron-l); color: var(--acc-tx); border-color: var(--saffron-bd); }
.tag.pl-spd-zero { color: var(--mu); }
#tbl th.sort-active { text-decoration: underline; }
#tbl th[data-s] { cursor: pointer; user-select: none; } #tbl th .arr { font-size: 9px; margin-left: 3px; }
button.rm { padding: 0 6px; background: transparent; border: 0; color: var(--mu); font-size: 16px; line-height: 1; cursor: pointer; }
button.rm:hover { color: var(--warn); }
.suppick { position: relative; display: inline-block; } .suppick .suppick-q { min-width: 180px; } .suppick .picker .pick.new { border-top: 1px dashed var(--bd); }