:root {
  --bg: #f1f5f9; --card: #ffffff; --text: #0f172a; --muted: #64748b; --line: #cbd5e1;
  --primary: #1d4ed8; --primary-text: #ffffff; --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
  --ok-bg: #dcfce7; --warn-bg: #fef3c7; --bad-bg: #fee2e2; --info-bg: #dbeafe; --info: #1d4ed8;
  --radius: 14px;
  /* the bars at the top (logo, user, module) keep their own side spacing */
  --side: 12px;
  /* the CONTENT (cards, fields, buttons, popups): ~6 mm from the screen edge. Set ONCE here, on the main container and the
     popup sheet - the elements inside are 100 % of it, so nothing is added twice */
  --content-side: 24px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --card: #16213a; --text: #e5edf9; --muted: #94a3b8; --line: #2b3a5c;
    --primary: #3b82f6; --primary-text: #ffffff; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171;
    --ok-bg: #12351f; --warn-bg: #3b2a0c; --bad-bg: #3b1416; --info-bg: #14264d; --info: #93c5fd;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }

.top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) var(--side) 10px; background: var(--primary); color: #fff;
}
.top h1 { font-size: 18px; margin: 0; letter-spacing: .3px; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
.pill.ok::before { content: "● "; color: #86efac; }
.pill.off::before { content: "○ "; }

main { padding: 16px var(--content-side); max-width: 640px; margin: 0 auto; }
.banner { background: var(--bad-bg); color: var(--bad); padding: 10px var(--side); font-size: 14px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
h2 { font-size: 17px; margin: 0 0 10px; }
p.muted, .muted { color: var(--muted); font-size: 14px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 15px;
}
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }

.field { display: block; margin-bottom: 14px; }
.lbl { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.lbl b { color: var(--bad); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
textarea { resize: vertical; }

button.primary, button.secondary, button.danger {
  font: inherit; font-weight: 600; border-radius: 12px; padding: 13px 18px; border: 0; width: 100%; margin-top: 4px;
}
button.primary { background: var(--primary); color: var(--primary-text); }
button.secondary { background: var(--card); color: var(--text); border: 1px solid var(--line); }
button.danger { background: var(--bad-bg); color: var(--bad); }
button:disabled { opacity: .5; }
.row { display: flex; gap: 10px; }
.row > button { margin-top: 0; }
.err { color: var(--bad); background: var(--bad-bg); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; }

.item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .t { font-weight: 600; word-break: break-word; }
.item .m { font-size: 13px; color: var(--muted); }
.item .n { font-size: 13px; color: var(--bad); margin-top: 2px; }
.item button.link { background: none; border: 0; color: var(--bad); font: inherit; font-size: 13px; padding: 4px 0; }
.badge { flex: 0 0 auto; align-self: flex-start; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.queued { background: var(--warn-bg); color: var(--warn); }
.badge.sent { background: var(--info-bg); color: var(--info); }
.badge.imported { background: var(--ok-bg); color: var(--ok); }
.badge.rejected, .badge.failed { background: var(--bad-bg); color: var(--bad); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; margin: 0 0 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: var(--card);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { flex: 1; font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); padding: 16px 4px; }
.tabs button.on { color: var(--primary); font-weight: 700; box-shadow: inset 0 3px 0 var(--primary); }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom));
  background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; z-index: 10; max-width: 90vw;
}

/* ---- v3: QR scanner + product screen ---- */
.userbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px var(--side); font-size: 14px; color: var(--muted); background: var(--card); border-bottom: 1px solid var(--line); }
button.link { background: none; border: 0; color: var(--primary); font: inherit; font-size: 14px; padding: 6px 0; }
button.link.big { display: block; width: 100%; margin-top: 10px; padding: 14px 0; font-size: 16px; }
body { padding-bottom: 24px; }
.scanner { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 68vh; background: #000; border-radius: var(--radius); overflow: hidden; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .frame { position: absolute; inset: 14% 12%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.hint { text-align: center; color: var(--muted); font-size: 15px; margin: 14px 4px 0; }
.hint.bad { color: var(--bad); font-weight: 600; }
.card.center { text-align: center; }
.product .pname { font-size: 22px; line-height: 1.25; margin: 0 0 4px; word-break: break-word; }
.balance { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 4px 0 16px; }
.balance .num { font-size: 72px; font-weight: 800; line-height: 1; color: var(--text); }
.balance .unit { font-size: 22px; color: var(--muted); }
.balance.zero .num { color: var(--bad); }
.product .lbl { text-align: center; margin-top: 14px; }
.msg { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 15px; text-align: center; }
.msg.ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.msg.bad { background: var(--bad-bg); color: var(--bad); }

/* ---- "Минусирај 1": subtle 3D button (raised -> pressed) ---- */
button.primary.huge {
  position: relative;
  width: 100%;
  margin: 6px 0 16px;
  padding: 22px 18px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #4f8af5 0%, #2d5fe0 60%, #2350cf 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  /* thin lower edge = the button's side, soft shadow below, faint top highlight */
  box-shadow:
    0 4px 0 #17379c,
    0 8px 12px rgba(2, 6, 23, .22),
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .1);
  transform: translateY(0);
  transition: transform .07s ease-out, box-shadow .07s ease-out, filter .12s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
/* pressed: the button sinks into its own edge */
button.primary.huge:active:not(:disabled),
button.primary.huge.busy {
  transform: translateY(3px);
  filter: brightness(.95);
  box-shadow:
    0 1px 0 #17379c,
    0 2px 4px rgba(2, 6, 23, .25),
    inset 0 2px 5px rgba(0, 0, 0, .28);
}
/* after a successful "minus 1": quick pop so the tap clearly registered */
button.primary.huge.flash { animation: btn-pop .25s ease-out; }
@keyframes btn-pop {
  0%   { transform: translateY(3px); }
  55%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
/* nothing left to take: flat, grey, no 3D */
button.primary.huge:disabled:not(.busy) {
  opacity: 1;
  background: linear-gradient(180deg, #a7b0bf 0%, #7f8a9c 100%);
  color: #eef1f6;
  text-shadow: none;
  box-shadow: 0 2px 0 #566173;
}
@media (prefers-reduced-motion: reduce) {
  button.primary.huge, button.primary.huge.flash { transition: none; animation: none; }
}

/* one "minus 1" done in this app start: locked, flat and green */
button.primary.huge.done:disabled:not(.busy) {
  background: linear-gradient(180deg, #34b36b 0%, #1f8f50 100%);
  color: #fff;
  box-shadow: 0 2px 0 #14683a;
}
.lockhint { margin: 2px 0 6px; }

/* "✕ Затвори" between the user name and "Одјави се" */
.userbar #username { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closebtn {
  flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  touch-action: manipulation;
}
.closebtn:active { background: var(--line); }
.userbar #logout { flex: 1 1 0; text-align: right; }

/* 2-second hold: frame turns green and a bar fills while the code is being read */
.scanner .frame.reading { border-color: #34d399; }
.scanprog { position: absolute; left: 12%; right: 12%; bottom: 7%; height: 9px; background: rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; }
.scanbar { height: 100%; width: 0; background: #34d399; border-radius: 999px; transition: width .12s linear; }

/* camera picker: only shown when the phone has more than one camera */
.camsel { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.camsel select { width: auto; max-width: 65%; padding: 9px 12px; }

/* the picker sits on top of the camera image, so it is always visible without scrolling */
.scanner .camsel { position: absolute; top: 10px; left: 10px; right: 10px; margin: 0; justify-content: flex-end; z-index: 2; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.scanner .camsel select { max-width: 70%; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; }
.scanner .camsel select option { color: #0f172a; background: #fff; }

/* one tap to start the picture when the browser refuses autoplay */
.tapstart { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: 18px; font-weight: 700; padding: 24px; }
.diag { margin-top: 14px; font-size: 12px; color: var(--muted); }
.diag pre { white-space: pre-wrap; word-break: break-all; margin: 8px 0 0; padding: 10px; background: var(--bg); border-radius: 10px; }

/* ---- scan list ---- */
.listbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
  width: auto; border: 0; border-radius: 16px; padding: 16px 18px; font: inherit; font-size: 17px; font-weight: 800;
  color: #fff; background: linear-gradient(180deg, #2a2f3a 0%, #151922 100%);
  box-shadow: 0 6px 18px rgba(2, 6, 23, .35); text-align: center;
}
.listbar:active { transform: translateY(2px); }
.plusbtn {
  display: block; width: 100%; margin: 4px 0 6px; padding: 18px; font: inherit; font-size: 19px; font-weight: 800;
  color: #1f8f50; background: var(--card); border: 2px solid #34b36b; border-radius: 16px; touch-action: manipulation;
}
.plusbtn:active { background: var(--ok-bg); }
.plusbtn:disabled { opacity: .5; }
.listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.listhead h2 { margin: 0; font-size: 20px; }
.draftrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.draftrow:last-child { border-bottom: 0; }
.dinfo { min-width: 0; }
.dname { font-weight: 700; word-break: break-word; }
.dmeta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.derr { font-size: 13px; color: var(--bad); font-weight: 600; margin-top: 4px; }
.rmbtn { flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 700; color: var(--bad); background: var(--bad-bg); border: 0; border-radius: 10px; padding: 9px 14px; }
.rmbtn:disabled { opacity: .5; }
.sendbtn { margin-top: 14px; }

/* ======================= v4: start screen, orders, notifications ======================= */
.center { text-align: center; }
.banner.soft { background: var(--warn-bg); color: var(--warn); border-radius: 10px; margin-bottom: 12px; }
.banner.info { background: var(--info-bg); color: var(--info); border-radius: 10px; margin-bottom: 12px; }

/* module bar: back to the start screen / where I am / bell */
.modbar { display: flex; align-items: center; gap: 10px; padding: 6px var(--side); background: var(--card); border-bottom: 1px solid var(--line); }
.modbar .modname { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homebtn, .bellbtn {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--primary); background: transparent; border: 0;
  border-radius: 999px; padding: 8px 12px; min-height: 40px; touch-action: manipulation;
}
.homebtn:active, .bellbtn:active { background: var(--info-bg); }
.homebtn[hidden] + .modname { text-align: left; }
.bellbtn { position: relative; font-size: 20px; padding: 6px 10px; }
.bellcount {
  position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

/* start screen: two big Material-style tiles */
.home .hello { margin: 4px 2px 16px; color: var(--muted); font-size: 16px; }
.tiles { display: grid; gap: 16px; }
.tile {
  display: flex; align-items: center; gap: 18px; width: 100%; min-height: 128px; padding: 22px 20px; text-align: left;
  font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px rgba(15, 23, 42, .10);
  touch-action: manipulation; transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.tile:active { transform: translateY(2px) scale(.995); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.tile .ticon {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 38px; background: var(--info-bg);
}
.tile .ttext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile .tname { font-size: 26px; font-weight: 800; line-height: 1.1; }
.tile .tsub { font-size: 14px; color: var(--muted); line-height: 1.3; }
.homenotes { margin-top: 18px; }
.notesbtn { margin-bottom: 12px; }

/* orders: lists */
button.rowbtn {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; width: 100%; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; touch-action: manipulation;
}
button.rowbtn:active { background: var(--info-bg); }
.rtitle { font-weight: 700; font-size: 17px; word-break: break-word; flex: 1 1 60%; }
.rsub { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.ostatus { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ostatus.st-new { background: var(--info-bg); color: var(--info); }
.ostatus.st-in_progress { background: var(--warn-bg); color: var(--warn); }
.ostatus.st-rework { background: var(--bad-bg); color: var(--bad); }
.ostatus.st-done { background: var(--ok-bg); color: var(--ok); }

/* orders: one order */
.ofield { padding: 14px; }
.ofield .olabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.ofield .otitle { font-weight: 800; font-size: 16px; }
.ofield .ohint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ofield textarea { min-height: 120px; line-height: 1.45; }
.ofield[class*="tone-ok"] { border-left: 6px solid var(--ok); }
.ofield[class*="tone-info"] { border-left: 6px solid var(--info); }
.ofield[class*="tone-warn"] { border-left: 6px solid var(--warn); }
.ostate { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ostate.ok { color: var(--ok); }
.ostate.warn { color: var(--warn); }
.ostate.bad { color: var(--bad); white-space: normal; text-align: right; }
.ometa { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 1em; }
.oconflict { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--warn-bg); color: var(--text); border: 1px solid var(--warn); }
.oconflict p { margin: 0 0 8px; font-size: 14px; }
.oconflict pre { white-space: pre-wrap; word-break: break-word; margin: 8px 0; padding: 10px; background: var(--card); border-radius: 8px; font: inherit; font-size: 14px; }
.oconflict .row { margin-bottom: 4px; }
.oconflict button.secondary { margin-top: 0; }
.stbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.stbtn {
  font: inherit; font-weight: 700; font-size: 15px; padding: 14px 8px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--card); color: var(--text); touch-action: manipulation;
}
.stbtn:disabled { opacity: .7; }
.stbtn.on.st-new { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.stbtn.on.st-in_progress { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.stbtn.on.st-rework { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.stbtn.on.st-done { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* notifications */
.pushcard h2 { margin-bottom: 6px; }
.muted.ok { color: var(--ok); }
.nlist { padding: 4px 0; }
.nitem {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 14px 16px; background: transparent;
  border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--text); touch-action: manipulation;
}
.nitem:last-child { border-bottom: 0; }
.nitem:active { background: var(--info-bg); }
.nitem .ndot { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: transparent; }
.nitem.unread .ndot { background: var(--primary); }
.nitem .nbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nitem .ntitle { font-weight: 600; word-break: break-word; }
.nitem.unread .ntitle { font-weight: 800; }
.nitem .ntext { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nitem .nmeta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.nfull { white-space: pre-wrap; word-break: break-word; font-size: 16px; }

/* ======================= v5: work orders (проект -> налог -> подгрупа), full message, keyboard ======================= */
.crumbhint { margin: -4px 2px 12px; font-size: 13px; }
.osubs { padding: 14px; }
.subrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 14px 4px; font: inherit; color: var(--text);
  background: transparent; border: 0; border-top: 1px solid var(--line); touch-action: manipulation;
}
.subrow:first-of-type { border-top: 0; }
.subrow:active { background: var(--info-bg); }
.subrow .rtitle { flex: 1 1 auto; }
.subrow .chev { color: var(--muted); font-size: 22px; line-height: 1; }

/* a text field: the whole card is a tap target, the box grows with the text and leaves room for writing */
.ofield.editable { cursor: text; }
.ofield textarea { min-height: 140px; }
.ofield[class*="tone-ok"] textarea, .ofield[class*="tone-info"] textarea, .ofield[class*="tone-warn"] textarea { min-height: 24vh; }
.ofield textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
/* the field being typed in is never hidden by the keyboard or by the bottom of the page */
.ofield { scroll-margin-top: 90px; scroll-margin-bottom: 40vh; }
main.orders { padding-bottom: 40vh; }   /* room under the last field so the keyboard never covers it */

/* the full notification */
.nlink { margin: 12px 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--info-bg); }
.nlinklbl { display: block; font-size: 12px; color: var(--muted); }
.nlinktxt { display: block; font-weight: 700; word-break: break-word; }
.nstatus { margin: 0 0 6px; min-height: 1.2em; }
button.primary.done:disabled { background: var(--ok-bg); color: var(--ok); opacity: 1; border: 1px solid var(--ok); }
main.haslist { padding-bottom: 92px; }   /* (original rule from the scan list - restored) */

/* v6: status "Чека потврда" + tasks */
.ostatus.st-awaiting { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 2px var(--info); }
.stbtn.on.st-awaiting { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.tprog { padding: 14px; }
.tprog .otitle { font-weight: 800; font-size: 16px; }
.tbar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 6px; }
.tbarfill { height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; }
.tbox { padding: 14px; }
.tbox[class*="tone-ok"] { border-left: 6px solid var(--ok); }
.tbox[class*="tone-info"] { border-left: 6px solid var(--info); }
.tbox[class*="tone-warn"] { border-left: 6px solid var(--warn); }
.tbox .otitle { font-weight: 800; font-size: 16px; }
.tempty { margin: 6px 0 0; font-size: 14px; }
.trow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.ttitle { flex: 1 1 200px; font-size: 16px; word-break: break-word; }
.tbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.tbtn {
  font: inherit; font-weight: 700; font-size: 14px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--card); color: var(--text); touch-action: manipulation;
}
.tbtn.ok { border-color: var(--ok); color: var(--ok); }
.tbtn.warn { border-color: var(--warn); color: var(--warn); }
.tbtn.back { border-color: var(--muted); color: var(--muted); }
.tbtn.edit { min-width: 44px; padding: 0; }
.tbtn:active { background: var(--info-bg); }
.tinput { flex: 1 1 100%; width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--primary); border-radius: 10px; background: var(--card); color: var(--text); }

/* v7: adding tasks on the phone */
.tform { display: flex; gap: 8px; margin-top: 10px; }
.tform .tnew { flex: 1 1 auto; min-width: 0; }
.tbtn.del { min-width: 44px; padding: 0; border-color: var(--bad); color: var(--bad); }
.tbtn.tadd { flex: 0 0 auto; }
.tbox { scroll-margin-bottom: 45vh; }

/* v8: materials of an order (read-only) */
.matlink { gap: 4px; }
.matlink .ohint { flex: 1 1 100%; }
.matline, .matissue { padding: 14px; }
.matgrid { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; }
.matgrid > div { display: flex; flex-direction: column; min-width: 90px; }
.matgrid .ml { font-size: 12px; color: var(--muted); }
.matgrid b { font-size: 20px; }
.matgrid .bad b { color: var(--bad); }
.matgrid .okc b { color: var(--ok); }
.warnc { color: var(--warn); }
.matsub { margin: 18px 4px 6px; font-size: 15px; }
/* v9: local copy / freshness of materials, changes that lost against another device */
.banner.warn { background: var(--warn-bg); color: var(--warn); border-radius: 10px; margin-bottom: 12px; }
.banner.warn p { margin: 0 0 8px; }
.banner.warn .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.onotices:empty { display: none; }
.matfresh { padding: 14px; margin-bottom: 12px; }
.matfl { display: flex; flex-direction: column; margin-top: 8px; }
.matfl .ml { font-size: 12px; color: var(--muted); }
.matfl b { font-size: 15px; }
.matlocal { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; }
.matfresh .secondary { margin-top: 12px; }
/* v10: the simple flow - start (two buttons), a flat list of orders, ONE writing screen */
.tile { justify-content: center; min-height: 150px; }
.tile .tname { font-size: 30px; }
.osearch { margin-bottom: 12px; padding: 14px 14px; font-size: 17px; border-radius: 14px; -webkit-appearance: none; appearance: none; }
.seg { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.segbtn { flex: 1; font: inherit; font-size: 16px; font-weight: 700; padding: 12px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); touch-action: manipulation; }
.segbtn.on { background: var(--primary); color: var(--primary-text); }
button.orow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); padding: 16px; touch-action: manipulation; }
button.orow:active { background: var(--info-bg); }
.orow .odot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.orow .odot.st-in_progress { background: var(--warn); }
.orow .odot.st-rework { background: var(--bad); }
.orow .odot.st-done { background: var(--ok); }
.orow .odot.st-awaiting { background: var(--primary); }
.orow .otext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.orow .rtitle { flex: none; font-size: 17px; }
.orow .rsub { flex: none; }
.subbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.subbtn { font: inherit; font-size: 16px; font-weight: 700; padding: 12px 18px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); touch-action: manipulation; }
.subbtn.on { border-color: var(--primary); background: var(--info-bg); color: var(--info); }
.taskprev { padding: 12px 14px; }
.taskprev .ptext { margin: 4px 0 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.taskprev .ptext.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.subpart .ofield[class*="tone-ok"] textarea, .subpart .ofield[class*="tone-info"] textarea, .subpart .ofield[class*="tone-warn"] textarea { min-height: 26vh; font-size: 17px; }
.savebar { position: sticky; bottom: 0; z-index: 4; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); margin: 0 -2px 6px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.savebtn { width: 100%; font-size: 20px; }
details.odetails { padding: 0; }
details.odetails > summary { cursor: pointer; list-style: none; padding: 16px; font-weight: 800; font-size: 17px; }
details.odetails > summary::-webkit-details-marker { display: none; }
details.odetails > summary::after { content: '▾'; float: right; color: var(--muted); }
details.odetails[open] > summary::after { content: '▴'; }
.odinner { padding: 0 12px 12px; }
details.odetails.inner { margin-bottom: 14px; background: var(--bg); }
.ordpart > .card, .ordpart > .banner { margin-bottom: 14px; }
/* v11: "Налози" button in the module bar of the material module (always visible, not in a menu) */
.ordersbtn { font: inherit; font-size: 14px; font-weight: 700; color: var(--primary); background: var(--info-bg); border: 1px solid var(--primary); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.ordersbtn:active { background: var(--line); }
/* the module bar fits a phone (390 px): the buttons keep one line, the name shortens */
.modbar { gap: 6px; padding: 6px 8px; }
.homebtn, .ordersbtn, .bellbtn { white-space: nowrap; }
.homebtn { padding: 6px 8px; font-size: 13px; }
.ordersbtn { padding: 6px 10px; font-size: 13px; }
.modbar .modname { font-size: 14px; }

/* ---- worker: "Мои налози" and the report of one order (worker.js) */
.wtitle { font-size: 22px; margin: 6px 0 4px; line-height: 1.25; overflow-wrap: anywhere; }
.wsub { margin: 0 0 4px; font-size: 14px; }
.wmeta { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--text); }
.wins { padding: 16px; }
.wins .wtext { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 10px; font-size: 16px; line-height: 1.45; }
.wins .wpt { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.wins .wptitle { font-weight: 800; font-size: 16px; }
.wsave { margin: 4px 0 10px; }
button.primary.huge { width: 100%; }
.wstate { margin-top: 10px; font-size: 15px; font-weight: 700; min-height: 1.4em; overflow-wrap: anywhere; }
.wstate.ok { color: var(--ok); }
.wstate.warn { color: var(--warn); }
.wstate.bad { color: var(--bad); }
.wstate.muted { color: var(--muted); font-weight: 600; }
.wmarks { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.wbadge { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.wbadge.new { background: var(--info-bg); color: var(--info); }
.wbadge.chg { background: var(--warn-bg); color: var(--warn); }
.wbadge.wait { background: var(--bad-bg); color: var(--bad); }
.wreader { display: block; margin: 16px auto 0; font-size: 15px; }

.wbadge.conf { background: var(--bad-bg); color: var(--bad); }
.wconflict { border-left: 6px solid var(--bad); }
.wconflict h3 { margin: 0 0 6px; font-size: 17px; }
.wconflict p { margin: 0 0 8px; font-size: 14px; }
.wbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.wbtns button { width: auto; margin-top: 0; }
.wsrv, .wold-box .wold-item { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--bg); }
.wrhead { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.wold-box h3 { margin: 0 0 6px; font-size: 16px; }
.wold { list-style: none; padding: 0; margin: 8px 0 0; }
.wold-item { margin-bottom: 10px; }
.wold-item .wtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin: 0; }
.wboxes:empty { display: none; }
/* the instructions card of the worker's order: the same heading as the report fields */
.wins .olabel { margin-bottom: 2px; }
.wins .otitle { font-weight: 800; font-size: 17px; }
.wins .ohint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* ---- "Заврши работа" / "Фотографии" (photos.js) */
.wfinish { display: flex; gap: 10px; margin: 6px 0 12px; }
.wfinish button { margin-top: 0; }
.wfinish button.primary { flex: 2; }
.wfinish button.secondary { flex: 1; }
.wphotos .wpline { margin: 6px 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.wpline.ok { color: var(--ok); }
.wpline.warn { color: var(--warn); }
.wpline.bad { color: var(--bad); }
.wpline.muted { color: var(--muted); }
.wmodal { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .55); display: flex; align-items: flex-end; justify-content: center; }
.wsheet { background: var(--card); color: var(--text); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0; padding: 16px var(--content-side) calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; }
@media (min-width: 600px) { .wmodal { align-items: center; } .wsheet { border-radius: var(--radius); } }
.wsheet h3 { margin: 0 0 4px; font-size: 20px; }
.wsheet textarea { width: 100%; box-sizing: border-box; }
.wlabel { display: block; font-weight: 700; margin: 10px 0 4px; }
.wsmall { font-size: 13px; }
.wsheet .wbtns button { flex: 1 1 auto; }
.wsheet .wend button.primary { flex: 2 1 auto; }
.wthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.wthumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.wthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wthumbx { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; border-radius: 50%;
  border: 0; background: rgba(15, 23, 42, .75); color: #fff; font-size: 20px; line-height: 30px; cursor: pointer; }

/* the optional work order of a material exit */
.linkbox .linksel { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }
.linkbox .small { font-size: 13px; margin: 8px 0 0; }

/* "Фотографии": the office's photos, small previews and the big one */
.wthumbbtn { padding: 0; margin: 0; min-height: 0; cursor: pointer; }
.wbig { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .92); display: flex; align-items: center; justify-content: center; padding: 12px; }
.wbig[hidden] { display: none; }
.wbig img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.wbigx { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #0f172a; font-size: 26px; line-height: 44px; }

/* narrow phones (≤ 380 px) with the 24 px content margin: the home tiles keep their 30 px name and their height; only the space
   around the icon is smaller, so "Материјално" fits inside the tile */
@media (max-width: 380px) {
  .tile { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .tile .ticon { width: 60px; height: 60px; font-size: 32px; border-radius: 18px; }
}

/* v2.6 "Останува за доработка": one shared list per order (rework.js). Active items first, a big tick for the thumb,
   finished items green under the closed "Изработено" part. */
.wrework .olabel { align-items: center; }
.wrcount { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 800; font-size: 14px; text-align: center; }
.wrcount:empty { display: none; }
.wrlist { list-style: none; margin: 6px 0 0; padding: 0; }
.writem { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--card); scroll-margin: 90px; }
.writem.done { background: var(--ok-bg); border-color: var(--ok); }
.writem.pending { border-style: dashed; }
.writem.wfocus { outline: 3px solid var(--primary); outline-offset: 2px; }
.wrcheck { position: relative; flex: 0 0 auto; width: 20px; height: 24px; cursor: pointer; }
.wrcheck input.wrbox { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.wrtick { display: block; width: 16px; height: 16px; margin: 3px 0; border: 1px solid var(--muted); border-radius: 3px; background: var(--card); box-sizing: border-box; }
.wrcheck input.wrbox:checked + .wrtick { background: var(--ok); border-color: var(--ok); }
.wrcheck input.wrbox:checked + .wrtick::after { content: ''; display: block; width: 4px; height: 8px; margin: 1px 0 0 5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wrcheck input.wrbox:focus-visible + .wrtick { outline: 3px solid var(--primary); outline-offset: 2px; }
.wrcheck input.wrbox:disabled + .wrtick { opacity: .5; }
.wrbody { flex: 1 1 auto; min-width: 0; }
.wrtext { margin: 2px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.4; }
.wrmeta { margin: 0; font-size: 13px; color: var(--muted); }
.wrby { color: var(--ok); font-weight: 700; }
.wrfail { color: var(--bad); font-weight: 600; margin-top: 4px; }
.wrempty { margin: 4px 0 8px; }
.wraddbox { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wrework textarea.wrinput, .ofield[class*="tone-warn"] textarea.wrinput { min-height: 84px; }
.wraddbox button { margin-top: 0; }
.wrdone { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 4px; }
.wrdone > summary { cursor: pointer; font-weight: 800; font-size: 16px; padding: 10px 0; color: var(--ok); }
.wnotice { border-left: 6px solid var(--info); }

/* v2.7: the simple order screen (worker.js + work.js + rework.js): a header, then three parts */
.whead { display: grid; gap: 6px; }
.whead .wtitle { margin: 0; }
.whead .wsub, .whead .wmeta { margin: 0; }
.whead .wmeta { font-weight: 600; color: var(--muted); }
.wcall { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--primary); font-weight: 800; text-decoration: none; }
.wassigned { display: grid; gap: 2px; margin-top: 4px; }
.wassigned .wlbl { font-size: 13px; color: var(--muted); font-weight: 700; }
.wassigned .wnames { font-weight: 600; overflow-wrap: anywhere; }
.wsec { border-left: 6px solid var(--line); display: grid; gap: 10px; }
.wtodo { border-left-color: var(--info); }
.wdone { border-left-color: var(--ok); }
.wleft { border-left-color: var(--warn); }
.wsech { margin: 0; font-size: 18px; font-weight: 800; }
.wdesc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; }
.wpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wpoint { border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; display: grid; gap: 3px; background: var(--card); scroll-margin: 90px; }
.wpoint .wptx { display: flex; gap: 10px; align-items: baseline; }
.wpoint .wdot { flex: 0 0 auto; color: var(--muted); }
.wpoint .wptt { overflow-wrap: anywhere; font-size: 16px; }
.wpoint.done { background: var(--ok-bg); border-color: var(--ok); cursor: pointer; }
.wpoint.done .wptt { color: var(--ok); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wpoint.wait { background: var(--warn-bg); border-color: var(--warn); border-style: dashed; }
/* v2.17 "Работа во тек": orange text + a small mark (the colour is never the only sign) */
.wpoint.progress .wptt { color: #c2410c; font-weight: 600; }
.wpoint.progress .wpnum { color: #c2410c; }
.wpbadge { flex: 0 0 auto; align-self: center; border: 1px solid #c2410c; color: #c2410c; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; line-height: 20px; }
.wpprogby { color: #c2410c; }
.wpchoose { border-top: 1px dashed var(--line); padding-top: 6px; }
.wpchoose .wbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wpchoose button { min-height: 44px; }
@media (prefers-color-scheme: dark) { .wpoint.progress .wptt, .wpoint.progress .wpnum, .wpprogby { color: #fb923c; } .wpbadge { color: #fb923c; border-color: #fb923c; } }
.wok { color: var(--ok); font-weight: 800; font-size: 14px; }
.wpm { color: var(--muted); font-size: 13px; }
.wwait { color: var(--warn); font-weight: 700; font-size: 14px; }
.wbad { color: var(--bad); font-weight: 700; font-size: 14px; }
.winline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.winline button { width: auto; margin: 0; min-height: 44px; padding: 8px 14px; }
.wpoint.wfocus, .wentryrow.wfocus { outline: 3px solid var(--primary); outline-offset: 2px; }
.wofficeph { display: grid; gap: 2px; }
.small { font-size: 13px; }
textarea.wentry { min-height: 120px; line-height: 1.45; font-size: 16px; }
.wchoose { border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; }
.wchoose .wq { font-weight: 700; font-size: 15px; padding: 4px 0; }
.wopt { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.wopt input { width: 26px; height: 26px; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--ok); }
.wsendrow { display: flex; gap: 10px; align-items: stretch; }
.wcam { flex: 0 0 auto; width: 54px; min-height: 54px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; font-size: 22px; padding: 0; }
.wsendrow .wsend { flex: 1 1 auto; width: auto; margin: 0; min-height: 54px; font-size: 18px; }
.wfeed { display: grid; gap: 10px; }
.wentryrow { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; scroll-margin: 90px; }
.wentryrow .wby { font-size: 14px; color: var(--muted); font-weight: 700; }
.wentryrow .wtext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; }
.wentryrow .wlinked { color: var(--ok); font-weight: 700; font-size: 14px; }
.wentryrow .wthumbs, .wofficeph .wthumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); margin: 4px 0; }
.wthumbbtn { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); width: 100%; }
.wthumbbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wthumbbtn .wph { font-size: 22px; }
.wraddrow { display: flex; gap: 10px; }
.wraddrow textarea.wrinput { flex: 1 1 auto; min-width: 0; min-height: 52px; }
.wraddrow { align-items: stretch; }
.wraddrow button { width: auto; flex: 0 0 auto; margin: 0; padding-inline: 22px; }
.wrework .wsech { display: flex; align-items: center; gap: 8px; }
/* v2.9: change / delete an item of "Што останува"; a new order from the phone */
.wractions { display: flex; gap: 18px; margin-top: 4px; }
.wractions button.link { min-height: 40px; padding: 6px 0; font-size: 15px; }
.wractions button.wrdel-btn { color: var(--bad); }
.wredited { font-style: italic; }
.writem.deleting .wrtext { text-decoration: line-through; opacity: .6; }
.writem.conflict { border-color: var(--warn); border-width: 2px; }
.wreditwrap textarea.wreditbox { width: 100%; min-height: 96px; margin-top: 2px; }
.wrask { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bad-bg); color: var(--text); border: 1px solid var(--bad); }
.wrask p { margin: 0 0 4px; font-size: 15px; }
.wrask .wbtns button, .wrconf .wbtns button { min-height: 44px; }
.wrconf { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--text); border: 1px solid var(--warn); }
.wrconf-h { margin: 0 0 6px; font-weight: 700; font-size: 15px; }
.wrconf-l { margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.wrconf-t { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--card); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.wrconf-t.mine { border: 1px dashed var(--warn); }
.listhead.wnewhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.listhead.wnewhead button.primary { width: auto; margin: 0; padding: 10px 16px; }
.wnewform label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 4px; }
.wnewform input, .wnewform textarea { width: 100%; }
.wnewform textarea { min-height: 96px; }
.wcreated { font-size: 13px; color: var(--muted); margin: 2px 0 0; }
/* v2.10: one screen per order - "Што треба да се работи" folds up, "Работа и разговор", the field at the bottom, the QR of an order */
.wheadtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wqrbtn { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 700; min-height: 40px; }
.wstatus { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; margin-right: 4px; background: var(--info-bg); color: var(--info); }
.wstatus.st-in_progress { background: var(--warn-bg); color: var(--warn); }
.wstatus.st-rework { background: var(--bad-bg); color: var(--bad); }
.wstatus.st-done { background: var(--ok-bg); color: var(--ok); }
details.wtodo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
details.wtodo > summary::-webkit-details-marker { display: none; }
details.wtodo > summary::after { content: "▾"; color: var(--muted); font-size: 18px; }
details.wtodo:not([open]) > summary::after { content: "▸"; }
.wtodocount { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.wtodobody { display: grid; gap: 10px; }
.wopenpts { display: grid; gap: 6px; }
.wopenh { font-weight: 700; text-transform: none; list-style: none; padding: 2px 0; }
.wopenpt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wopenpt .wrtext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wopenpt button.wdonebtn { width: auto; flex: 0 0 auto; margin: 0; min-height: 44px; padding: 8px 12px; font-size: 14px; color: var(--ok); border-color: var(--ok); }
.wconv { border-left-color: var(--primary); }
.wfeed2 { display: grid; gap: 8px; }
.wf { scroll-margin: 90px; }
.wf-entry { border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; display: grid; gap: 4px; background: var(--bg); max-width: 92%; justify-self: start; }
.wf-entry.mine { justify-self: end; background: var(--info-bg); border-color: transparent; }
.wf-entry.wk-done { border-left: 4px solid var(--ok); }
.wf-entry.wk-extra { border-left: 4px solid var(--primary); }
.wf-entry.wk-rework { border-left: 4px solid var(--warn); }
.wf-entry.waiting { border-style: dashed; }
.wf-entry.failed { border-color: var(--bad); }
.wf .wfby { font-size: 13px; font-weight: 700; color: var(--muted); }
.wf .wfwhen { font-weight: 400; color: var(--muted); }
.wf .wtext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; }
.wf .wlinked { color: var(--ok); font-weight: 700; font-size: 14px; }
.wf .wthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 2px 0; }
.wfkind { font-size: 13px; font-weight: 800; }
.wfkind.k-done { color: var(--ok); }
.wfkind.k-extra { color: var(--primary); }
.wfkind.k-rework { color: var(--warn); }
.wf-point, .wf-rework, .wf-order { font-size: 14px; color: var(--muted); padding: 2px 4px; text-align: center; overflow-wrap: anywhere; }
.wf-point b, .wf-rework b, .wf-order b { color: var(--text); font-weight: 700; }
.wfold { font-size: 13px; font-style: italic; }
.wf.wfocus, .wtodobody.wfocus, .whead.wfocus { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 12px; }
.wcomposer { position: sticky; bottom: 0; z-index: 4; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: grid; gap: 8px; box-shadow: 0 -6px 18px rgba(15, 23, 42, .12); }
.wcomposer.closed .wkinds, .wcomposer.closed .wsendrow { display: none; }
.wkinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wkinds::-webkit-scrollbar { display: none; }
.wkind { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; min-height: 38px; white-space: nowrap; }
.wkind.on { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 700; }
.wkind.on[data-kind="done"] { background: var(--ok); border-color: var(--ok); }
.wkind.on[data-kind="rework"] { background: var(--warn); border-color: var(--warn); }
.wcomposer textarea.wentry { min-height: 48px; max-height: 40vh; flex: 1 1 auto; min-width: 0; }
.wcomposer .wsendrow .wsend { flex: 0 0 auto; padding-inline: 16px; font-size: 16px; }
.wcomposer .wchoose { max-height: 30vh; overflow-y: auto; }
.wscanbtn { width: auto !important; margin: 0 !important; padding: 10px 12px !important; }
.wheadbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.qrmanual h3 { margin: 0 0 8px; font-size: 16px; }
.qrmanrow { display: flex; gap: 8px; }
.qrmanrow input { flex: 1 1 auto; min-width: 0; }
.qrmanrow button { width: auto; margin: 0; padding-inline: 18px; }
/* the passport (what the QR of an order opens) */
.pp { display: grid; gap: 8px; }
.pptag { font-size: 13px; font-weight: 700; color: var(--muted); }
.pptitle { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.pplines { display: grid; gap: 4px; }
.pprow { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.pplbl { color: var(--muted); font-size: 14px; }
.ppval { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ppsub { font-weight: 800; font-size: 15px; margin-top: 4px; }
.pplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pplist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ppname { overflow-wrap: anywhere; }
.ppqty { font-weight: 800; white-space: nowrap; text-align: right; }
.ppnote { grid-column: 1 / -1; font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.ppplan summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.ppbtns { display: grid; gap: 8px; }
/* v2.11: the materials of the QR page can be added to, changed and taken off by authorized people */
.pptop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pptop button.ppadd { width: auto; margin: 0; min-height: 44px; padding: 8px 16px; }
.ppact { grid-column: 1 / -1; display: flex; gap: 14px; }
.ppact button.link { min-height: 40px; padding: 6px 0; font-size: 15px; }
.ppmeta { font-size: 12.5px; }
.ppline.src-edited { border-color: var(--warn); }
.ppline.src-added { border-color: var(--info); }
.ppform { display: grid; gap: 8px; border: 2px solid var(--primary); border-radius: 12px; padding: 12px; }
.ppform label { display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.ppform input, .ppform textarea { width: 100%; box-sizing: border-box; }
.ppformh { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.ppqtyrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppform .wbtns button.link { align-self: center; }
/* the QR of an order: on the screen, and alone on the paper when printed */
.wqrbox { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wqrcard { background: var(--card); color: var(--text); border-radius: var(--radius); padding: 16px; width: 100%; max-width: 420px; display: grid; gap: 8px; }
.wqrcard h3 { margin: 0; }
/* the label: its size, margin and the place of the text are set from the typed millimetres (passport.js); the code is a square */
.wqrcard { max-height: calc(100vh - 32px); overflow: auto; }
.wqrsize { display: flex; gap: 10px; }
.wqrsize label { display: grid; gap: 2px; font-size: 13px; color: var(--muted); flex: 1 1 0; }
.wqrsize input { width: 100%; }
.wqrstage { overflow: hidden; }
.wqrprint { display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: #fff; color: #000; border: 1px dashed #94a3b8; overflow: hidden; }
.wqrimg { display: block; flex: 0 0 auto; image-rendering: pixelated; }
.wqrtext { min-width: 0; line-height: 1.3; font-family: Arial, sans-serif; }
.wqrtext > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wqrname { font-weight: 700; }
@media print {
  body.printing-qr { background: #fff; padding: 0; margin: 0; }
  body.printing-qr > *:not(.wqrbox) { display: none !important; }
  body.printing-qr .wqrbox { position: static; background: none; padding: 0; display: block; }
  body.printing-qr .wqrcard { max-width: none; max-height: none; padding: 0; border-radius: 0; background: #fff; display: block; overflow: visible; }
  body.printing-qr .wqrcard > :not(.wqrstage) { display: none !important; }
  body.printing-qr .wqrstage { height: auto !important; overflow: visible; }
  body.printing-qr .wqrprint { border: 0; transform: none !important; }
}
/* the field at the bottom stays small: the four kinds in two rows (all visible), no empty status line */
.wcomposer .wkinds { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
.wcomposer .wkind { min-height: 34px; padding: 4px 8px; font-size: 13px; }
.wcomposer .wstate { margin-top: 0; min-height: 0; font-size: 14px; }
.wcomposer .wstate:empty { display: none; }
/* the order screen has its own field at the bottom: no extra room for a keyboard under it */
main.orders.wone { padding-bottom: 16px; }
/* v2.11: add / change / delete the given points ("Што треба да се работи") */
.wpacts { display: flex; gap: 18px; margin-top: 2px; }
.wpacts button.link { min-height: 40px; padding: 6px 0; font-size: 15px; }
.wpacts button.wpdel-btn { color: var(--bad); }
.wpoint.deleting .wptt { text-decoration: line-through; opacity: .6; }
.wpoint.conflict { border-color: var(--warn); border-width: 2px; }
.wpedited { font-size: 12.5px; }
.wpeditwrap textarea.wpedit, .wpadd textarea.wpnew { width: 100%; box-sizing: border-box; min-height: 84px; }
.wpadd { display: grid; gap: 8px; }
.wpadd .wpaddbtn { width: auto; justify-self: start; min-height: 44px; }
.wpfail { display: grid; gap: 6px; }
/* v2.12: the QR note is one free text (line breaks kept; the page style rule forbids inline styles) */
.ppnotetext { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.pp textarea[aria-label="Забелешка"] { width: 100%; box-sizing: border-box; min-height: 160px; }
/* v2.13: ONE numbered list of the points: ☐ 1. text ✎ - the tick is real; finished points sit under "Изработено" */
.wprow { display: flex; align-items: flex-start; gap: 6px; }
.wpcheck { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; min-height: 24px; cursor: pointer; }
.wpbox { width: 16px; height: 16px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--ok); }
.wpnum { font-weight: 800; color: var(--muted); min-width: 1.2em; }
.wpoint .wptt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 16px; line-height: 1.35; padding-top: 1px; }
.wpeditbtn { flex: 0 0 auto; width: 28px; height: 28px; margin: -2px 0 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 18px; }
.wpoint.done .wpnum { color: var(--ok); }
.wpoint .wprow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wpoint .wpcheck { justify-self: start; }
.wpoint .wptt { display: block; width: 100%; overflow-wrap: break-word; }
.wpoint .wpeditbtn { justify-self: end; margin: 0; }
.wpoint .wpbadge { justify-self: start; }
.wpoint.wpnewrow .wpnewin { width: 100%; }
.writem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.writem .wrcheck { justify-self: start; }
.writem .wrbody { width: 100%; }
.wopenpt { flex-direction: column; align-items: stretch; }
.wopenpt button.wdonebtn { align-self: flex-end; }
.wdesc { width: 100%; min-width: 0; box-sizing: border-box; }
.wpoint.done .wpby { color: var(--ok); font-weight: 600; }
.wpundo { justify-self: start; min-height: 40px; padding: 6px 0; font-size: 15px; }
.wpnewrow { border-style: dashed; }
.wpnewrow .wpnewin { flex: 1 1 auto; min-width: 0; width: auto; }
.wpeditwrap { flex: 1 1 auto; min-width: 0; }
.wpeditwrap textarea { width: 100%; box-sizing: border-box; }
.wpaddbtn { justify-self: start; width: auto; min-height: 44px; padding: 8px 16px; }
.wdoneblk { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 2px; }
.wdoneblk > summary { cursor: pointer; font-weight: 800; font-size: 16px; padding: 10px 0; color: var(--ok); }
.wdoneblk .wpoints { margin-bottom: 4px; }
.wconvbox { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.wconvlist { margin: 0; padding-left: 1.6em; display: grid; gap: 2px; }
.wconvlist li { overflow-wrap: anywhere; }

@media (pointer: coarse) { .wprow { min-height: 36px; align-items: center; } .wpcheck { min-height: 36px; padding-right: 4px; } .wpeditbtn { width: 36px; height: 36px; } }

input[type='checkbox']:not(.wrbox) { width:16px; height:16px; min-width:16px; min-height:16px; flex-shrink:0; }
@media (pointer:coarse) { .wrcheck { width:28px; height:36px; } .wrtick { margin:10px 6px; } }

/* Unified conversation: messages and activity can both be replied to. */
.wfeed2 { padding: 8px 0; overflow-x: clip; }
.wf { position: relative; touch-action: pan-y; min-width: 0; max-width: 92%; overflow-wrap: anywhere; }
.wf-point, .wf-rework, .wf-order { justify-self: start; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: var(--bg); }
.wf.mine { justify-self: end; background: var(--info-bg); }
.wreplybtn { position: absolute; top: 4px; right: 4px; color: var(--primary); border: 0; background: transparent; padding: 2px 6px; font-size: 18px; }
.wf:has(.wreplybtn) { padding-right: 32px; }
.wreplyready { translate: -36px 0; outline: 2px solid var(--primary); }
.wquote { margin: 0 0 6px; border: 0; border-left: 3px solid var(--primary); border-radius: 6px; padding: 6px 9px; background: var(--card, #fff); font-size: 13px; white-space: pre-wrap; }
.wreplydraft { display: flex; justify-content: space-between; gap: 8px; }
.wreplydraft[hidden] { display: none; }

/* ---- v2.14: "Разговор" = a full-screen chat, dark like Viber (route #/c/...) ---- */
.wc-root {
  --wc-bg: #0d0d11; --wc-bar: #14141a; --wc-line: #24242c; --wc-theirs: #262932; --wc-mine: #5d46b8; --wc-name: #a994ff;
  --wc-text: #f3f3f7; --wc-muted: #9c9ca8; --wc-quote: rgba(255, 255, 255, 0.11); --wc-accent: #7a63f0;
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 60; display: flex; flex-direction: column;
  background: var(--wc-bg); color: var(--wc-text); font-size: 16px; overflow: hidden; overscroll-behavior: contain;
}
.wc-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: var(--wc-bar); border-bottom: 1px solid var(--wc-line);
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px 4px; min-height: 56px;
}
.wc-back { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--wc-text); border-radius: 50%; padding: 0; }
.wc-back:active { background: rgba(255, 255, 255, 0.1); }
.wc-headtxt { min-width: 0; flex: 1 1 auto; }
.wc-title { font-size: 17px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-sub { font-size: 13px; color: var(--wc-muted); line-height: 1.25; }
.wc-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.wc-scroll { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px 10px 12px; }
.wc-feed { display: flex; flex-direction: column; gap: 5px; min-height: 100%; justify-content: flex-end; }
.wc-empty { text-align: center; color: var(--wc-muted); padding: 40px 16px; font-size: 15px; }
.wc-older { align-self: center; background: rgba(255, 255, 255, 0.08); color: var(--wc-text); border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; margin: 4px 0 8px; }
.wc-day { align-self: center; margin: 10px 0 4px; }
.wc-day span { display: inline-block; background: rgba(255, 255, 255, 0.1); color: var(--wc-muted); font-size: 13px; padding: 3px 12px; border-radius: 999px; }

.wc-row { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: 100%; touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.wc-row input, .wc-row textarea, .wc-row [contenteditable="true"], .wc-composer textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.wc-row.mine { justify-content: flex-end; }
.wc-row.theirs { justify-content: flex-start; }
.wc-row.sys { justify-content: center; }
.wc-snap .wc-bubble, .wc-snap .wc-av { transition: transform 0.18s ease-out; }
.wc-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.wc-av.av0 { background: #7a63f0; } .wc-av.av1 { background: #2f8f7d; } .wc-av.av2 { background: #c26a2e; } .wc-av.av3 { background: #b8486b; }
.wc-av.av4 { background: #3f78c9; } .wc-av.av5 { background: #8a8d2a; } .wc-av.av6 { background: #a24fc4; } .wc-av.av7 { background: #4b8a4b; }
.wc-bubble { position: relative; max-width: min(82%, 520px); min-width: 0; border-radius: 18px; padding: 8px 12px 6px; background: var(--wc-theirs); color: var(--wc-text); overflow-wrap: anywhere; word-break: break-word; }
.wc-row.theirs .wc-bubble { border-bottom-left-radius: 6px; }
.wc-row.mine .wc-bubble { background: var(--wc-mine); border-bottom-right-radius: 6px; }
.wc-name { font-size: 15px; font-weight: 700; color: var(--wc-name); margin: 0 0 2px; line-height: 1.25; }
.wc-text { margin: 0; font-size: 16px; line-height: 1.38; white-space: pre-wrap; }
.wc-meta { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; line-height: 1; }
.wc-time { font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.wc-row.theirs .wc-time { color: var(--wc-muted); }
.wc-wait { color: #ffd78a; font-weight: 600; }
.wc-bad { color: #ff9b9b; font-size: 14px; margin-top: 4px; }
.wc-drop { background: none; border: 0; color: #ffb3b3; font: inherit; font-size: 13px; text-decoration: underline; padding: 2px 0; }
.wc-row.waiting .wc-bubble { opacity: 0.88; }
.wc-row.failed .wc-bubble { outline: 1px solid #ff6b6b; }
.wc-linked { margin-top: 4px; font-size: 14px; color: #b9f3c9; }
.wc-kind { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin: 0 0 4px; background: rgba(255, 255, 255, 0.14); }
.wc-kind.k-done { background: rgba(74, 222, 128, 0.2); color: #b6f7cc; } .wc-kind.k-extra { background: rgba(122, 99, 240, 0.35); color: #e3dcff; } .wc-kind.k-rework { background: rgba(251, 191, 36, 0.22); color: #ffe19a; }

.wc-sysbub { max-width: 90%; background: rgba(255, 255, 255, 0.07); color: #cfcfda; border-radius: 14px; padding: 6px 12px 5px; text-align: center; }
.wc-systext { font-size: 14.5px; line-height: 1.35; }
.wc-systext b { color: var(--wc-name); }
.wc-old { font-size: 13px; color: var(--wc-muted); font-style: italic; margin-top: 2px; }
.wc-sysbub .wc-meta { justify-content: center; }
.wc-sysbub .wc-time { color: var(--wc-muted); }

.wc-quote { display: flex; align-items: stretch; gap: 8px; background: var(--wc-quote); border-left: 3px solid #e9e9f1; border-radius: 8px; padding: 6px 8px; margin: 0 0 6px; min-width: 150px; color: var(--wc-text); text-align: left; cursor: pointer; }
.wc-row.mine .wc-quote { background: rgba(0, 0, 0, 0.22); }
.wc-qtxt { min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.wc-qtxt b { font-size: 14px; font-weight: 700; }
.wc-qtxt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, 0.82); }
.wc-qph { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.wc-qph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wc-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.wc-thumbs:empty { display: none; }
.wc-thumb { width: 108px; height: 108px; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; }
.wc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-ph { font-size: 28px; }

.wc-replyic { position: absolute; right: 6px; top: 50%; transform: translateY(-50%) scale(0.6); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: #fff; opacity: 0; transition: opacity 0.12s, transform 0.12s; pointer-events: none; z-index: 0; }
.wc-row.wc-ready .wc-replyic { opacity: 1; transform: translateY(-50%) scale(1); background: var(--wc-accent); }
.wc-bubble { z-index: 1; }
.wc-row.wfocus .wc-bubble, .wc-row.wc-hit .wc-bubble { box-shadow: 0 0 0 3px var(--wc-accent); }
.wc-row.wc-hit .wc-bubble { animation: wchit 1.8s ease-out; }
@keyframes wchit { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }

.wc-jump { position: absolute; right: 14px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2b2b34; color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 3; }
.wc-jump[hidden] { display: none; }
.wc-jumpn { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--wc-accent); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; padding: 0 5px; }
.wc-jumpn[hidden] { display: none; }

.wc-bar { flex: 0 0 auto; position: relative; background: var(--wc-bar); border-top: 1px solid var(--wc-line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.wc-reply { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.07); border-left: 3px solid var(--wc-accent); border-radius: 8px; padding: 6px 4px 6px 10px; margin: 0 0 8px 48px; }
.wc-reply[hidden] { display: none; }
.wc-rtxt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.wc-rtxt b { color: var(--wc-name); }
.wc-rtxt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.8); }
.wc-rx { flex: 0 0 auto; width: 40px; height: 40px; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; border-radius: 50%; padding: 0; }
.wc-note { font-size: 13.5px; text-align: center; color: var(--wc-muted); }
.wc-note:empty { display: none; }
.wc-note.warn { color: #ffd78a; } .wc-note.bad { color: #ff9b9b; } .wc-note.ok { color: #9ee6b4; }
.wc-picked { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px 48px; }
.wc-picked[hidden], .wc-chip[hidden], .wc-sheet[hidden], .wc-closed[hidden] { display: none; }
.wc-pk { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.wc-pk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-pkx { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 16px; line-height: 1; padding: 0; }
.wc-chip { display: inline-block; margin: 0 0 8px 48px; background: rgba(122, 99, 240, 0.28); color: #e6e0ff; border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 14px; font-weight: 700; }
.wc-sheet { display: flex; flex-direction: column; background: #20202a; border-radius: 14px; margin: 0 0 8px; padding: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.wc-kindbtn { text-align: left; background: none; border: 0; color: var(--wc-text); font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px; }
.wc-kindbtn:active, .wc-kindbtn.on { background: rgba(122, 99, 240, 0.28); }
.wc-inputrow { display: flex; align-items: flex-end; gap: 8px; }
.wc-bar.closed .wc-inputrow, .wc-bar.closed .wc-plus { display: none; }
.wc-closed { margin: 6px 0 0; text-align: center; color: var(--wc-muted); font-size: 14px; }
.wc-plus { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #e9e9f1; background: none; color: #e9e9f1; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.15s; }
.wc-plus.on { transform: rotate(45deg); border-color: var(--wc-accent); color: var(--wc-accent); }
.wc-pill { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; background: #1d1d24; border: 1px solid #30303a; border-radius: 24px; padding: 2px 4px 2px 14px; }
.wc-input { flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; color: var(--wc-text); font: inherit; font-size: 16px; line-height: 1.35; resize: none; padding: 9px 0; max-height: 132px; min-height: 26px; height: 26px; }
.wc-input::placeholder { color: #8b8b97; }
.wc-input:focus { outline: 0; }
.wc-cam { flex: 0 0 auto; width: 42px; height: 42px; background: none; border: 0; color: #e9e9f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.wc-send { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--wc-accent); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 0 0 4px rgba(122, 99, 240, 0.22); }
.wc-send:disabled { opacity: 0.45; box-shadow: none; }
.wc-ic { display: inline-flex; line-height: 0; }

/* the small card on the order page */
.wc-conv { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 12px 14px; }
.wc-conv:active { background: var(--info-bg); }
.wc-convtop { display: flex; align-items: center; gap: 8px; }
.wc-convname { font-size: 17px; font-weight: 800; flex: 1 1 auto; }
.wc-convname::before { content: "💬 "; }
.wc-badge { background: #7a63f0; color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; }
.wc-convtime { font-size: 13px; color: var(--muted); }
.wc-convlast { margin-top: 4px; font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- v2.15: „Разговор · Фотографии · QR код“ under the name, the screen „Фотографии“, the photos of „Општ опис“, the big QR ---- */
.wic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: 0 0 auto; }
.wabar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 2px; }
.wab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; min-width: 0;
  padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; cursor: pointer; margin: 0;
}
.wab:active { transform: scale(0.97); }
.wab-l { display: block; max-width: 100%; text-align: center; white-space: nowrap; letter-spacing: -0.2px; }
@media (max-width: 370px) { .wab { font-size: 12px; } }
.wab-chat { background: #6d55e0; border-color: #6d55e0; color: #fff; }
.wab-badge, .wab-count {
  position: absolute; top: 4px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 12px; line-height: 18px;
  font-weight: 800; text-align: center;
}
.wab-badge { background: #ef4444; color: #fff; border: 1px solid #fff; }
.wab-count { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* the screen „Фотографии“ (a full-screen page like „Разговор“) */
.wgl-root {
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: contain;
}
.wgl-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; background: var(--card); border-bottom: 1px solid var(--line);
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px 4px; min-height: 56px;
}
.wgl-back { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); border-radius: 50%; padding: 0; margin: 0; }
.wgl-back:active { background: var(--bg); }
.wgl-headtxt { min-width: 0; flex: 1 1 auto; }
.wgl-title { font-size: 18px; font-weight: 800; line-height: 1.2; }
.wgl-sub { font-size: 13px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wgl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 12px 12px 16px; }
.wgl-bar { flex: 0 0 auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.wgl-add { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; min-height: 50px; }
.wgl-sec { margin: 0 0 16px; }
.wgl-h { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.wgl-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 20px; }
.wgl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px 8px; }
.wgl-fig { margin: 0; min-width: 0; }
.wgl-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: var(--card); cursor: pointer;
}
.wgl-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.15s; }
.wgl-img.ok { opacity: 1; }
.wgl-tile.nofile::after { content: "Нема врска"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; color: var(--muted); padding: 6px; }
.wgl-tile.gone { display: flex; align-items: center; justify-content: center; text-align: center; cursor: default; background: var(--bg); }
.wgl-gonetxt { font-size: 12px; color: var(--muted); padding: 6px; }
.wgl-chatmark { position: absolute; left: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; background: #6d55e0; color: #fff; display: flex; align-items: center; justify-content: center; }
.wgl-clock { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: rgba(15, 23, 42, 0.78); color: #fff; display: flex; align-items: center; justify-content: center; }
.wgl-fig.bad .wgl-tile { border-color: var(--bad); }
.wgl-cap { margin-top: 4px; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.wgl-info { font-weight: 700; }
.wgl-note { color: var(--text); }
.wgl-by { color: var(--muted); }
.wgl-empty { text-align: center; color: var(--muted); padding: 48px 16px; font-size: 15px; }

/* the sheet to pick photos */
.wgl-modal { z-index: 80; }
.wgl-sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.wgl-srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px; }
.wgl-src { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--bg); color: var(--text); font: inherit; font-weight: 700; margin: 0; }
.wgl-picks { display: grid; gap: 10px; margin: 10px 0 4px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.wgl-picks:has(.wgl-pick.desc) { grid-template-columns: 1fr; }
.wgl-pick { display: flex; gap: 10px; align-items: flex-start; }
.wgl-pthumb { position: relative; flex: 0 0 auto; width: 86px; height: 86px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.wgl-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgl-fields { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.wgl-in { width: 100%; padding: 9px 10px; font-size: 15px; border-radius: 9px; }

/* one photo big */
.wv { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 90; display: flex; flex-direction: column; background: #0b0b0f; color: #f3f3f7; overflow: hidden; }
.wv-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; }
.wv-x { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 50%; color: #fff; padding: 0; margin: 0; }
.wv-count { font-size: 14px; color: #c9c9d4; padding-right: 8px; }
.wv-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.wv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
.wv-img.ok { display: block; }
.wv-msg { position: absolute; left: 12px; right: 12px; text-align: center; color: #c9c9d4; font-size: 14px; margin: 0; }
.wv-msg.bad { color: #fca5a5; }
.wv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; padding: 0; margin: 0; z-index: 2; }
.wv-nav.prev { left: 0; border-radius: 0 12px 12px 0; }
.wv-nav.next { right: 0; border-radius: 12px 0 0 12px; }
.wv-info { flex: 0 0 auto; max-height: 46%; overflow-y: auto; background: #16161d; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
.wv-by { margin: 0 0 6px; font-size: 14px; color: #c9c9d4; }
.wv-line { margin: 2px 0; font-size: 15px; overflow-wrap: anywhere; }
.wv-k { color: #9c9ca8; }
.wv-v { font-weight: 600; }
.wv-none { margin: 2px 0; font-size: 14px; color: #9c9ca8; }
.wv-edit { margin-top: 8px; background: transparent; color: #fff; border-color: #4a4a58; }
.wv-form label { display: block; font-size: 13px; color: #9c9ca8; margin: 8px 0 2px; }
.wv-in { width: 100%; background: #0b0b0f; color: #fff; border-color: #3a3a48; }
.wv-form .wbtns { display: flex; gap: 8px; margin-top: 10px; }
.wv-form .wbtns button { flex: 1 1 auto; }

/* „Општ опис“ on the order page */
.wdb { margin: 0 0 12px; }
.wdb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.wdb-head .wdb-title { margin: 0; flex: 1 1 auto; white-space: nowrap; }
.wdb-head button.wdb-add { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto; margin: 0; padding: 8px 12px; font-size: 14px; min-height: 40px; }
.wdb-empty { margin: 4px 0; }
.wdb-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.wdb-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.wdb-card.wait { cursor: default; }
.wdb-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.wdb-cap { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px 5px; font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; }
.wdb-cap b { font-weight: 700; }
.wdb-cap span { color: var(--muted); }

/* the big QR */
.wqf { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 90; display: flex; flex-direction: column; background: var(--bg); color: var(--text); overflow-y: auto; }
.wqf-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.wqf-ttl { font-size: 18px; font-weight: 800; }
.wqf-x { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--bg); color: var(--text); font-size: 28px; line-height: 1; padding: 0; margin: 0; }
.wqf-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.wqf-name { font-size: 22px; line-height: 1.25; margin: 0; overflow-wrap: anywhere; max-width: 100%; }
.wqf-sub { margin: 0; color: var(--muted); font-size: 15px; }
.wqf-code { width: min(86vw, 52vh, 440px); min-height: 120px; display: flex; align-items: center; justify-content: center; }
.wqf-img { width: 100%; aspect-ratio: 1; display: block; background: #fff; border-radius: 16px; padding: 10px; border: 1px solid var(--line); image-rendering: pixelated; }
.wqf-msg { margin: 0; font-size: 15px; color: var(--muted); }
.wqf-msg.bad { color: var(--bad); background: var(--bad-bg); padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.wqf-help { margin: 0; font-size: 14px; color: var(--muted); max-width: 360px; }
.wqf-btns { width: 100%; max-width: 360px; }
.wqf-btns button { width: 100%; }

/* ---- v2.15: „Има доработка“ on a finished point, „Додај што недостига“, the point of a rework item ---- */
.wpmark {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 7px 12px; min-height: 40px; border-radius: 999px;
  border: 1.5px solid var(--warn); background: var(--warn-bg); color: var(--warn); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.wpacts { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.wpacts .wpundo, .wpacts .wpmiss { min-height: 40px; padding: 6px 0; font-size: 15px; }
.wpmiss { justify-self: start; }
.wpmissbox { margin: 6px 0 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--warn); background: var(--card); display: grid; gap: 6px; }
.wpmisslbl { font-size: 13px; font-weight: 700; color: var(--warn); overflow-wrap: anywhere; }
.wpmissbox textarea { min-height: 64px; }
.wpmissbox .wbtns { display: flex; gap: 8px; }
.wpmissbox .wbtns button { flex: 1 1 auto; margin: 0; }
.wrpicklbl { display: grid; gap: 4px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.wrpick { width: 100%; font-size: 15px; padding: 10px; }
.wrpt { margin: 0 0 3px; font-size: 13px; font-weight: 800; color: var(--warn); overflow-wrap: anywhere; }
.wrpt.gone { color: var(--muted); font-style: italic; }

/* ---- v2.16: the menu of a message (right click / long hold), the editor, the confirmation, the mark "изменето", a deleted quote ---- */
.wc-row.wc-manage .wc-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.wc-row.wc-deleting { opacity: 0.45; }
.wc-message-more { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; min-height: 32px; padding: 0; margin: -4px -4px -4px 4px; border: 0; border-radius: 50%; background: transparent; color: #c5b6ff; font-size: 24px; line-height: 1; cursor: pointer; }
.wc-message-more:active, .wc-message-more:focus-visible { background: rgba(169,148,255,.18); outline: 2px solid #a994ff; }
.wc-menuback { position: fixed; inset: 0; z-index: 74; background: rgba(0, 0, 0, 0.25); }
.wc-menu { position: fixed; z-index: 75; min-width: 210px; background: #22232b; color: #f3f3f7; border: 1px solid #3a3b47; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 6px; display: grid; gap: 2px; }
.wc-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; margin: 0; }
.wc-mi:active, .wc-mi:hover { background: #343542; }
.wc-mic { width: 22px; text-align: center; }
.wc-edited { font-size: 11px; opacity: 0.75; margin-right: 6px; font-style: italic; }
.wc-editbox { margin: 2px 0 4px; }
.wc-editin { width: 100%; min-height: 72px; background: rgba(0, 0, 0, 0.25); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 16px; resize: vertical; }
.wc-editbtns { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.wc-editbtns button { flex: 1 1 auto; min-height: 42px; border-radius: 10px; border: 0; font: inherit; font-weight: 700; margin: 0; padding: 8px 12px; }
.wc-save { background: #fff; color: #3a2a8c; }
.wc-cancel { background: rgba(255, 255, 255, 0.18); color: #fff; }
.wc-danger { background: #ef4444; color: #fff; }
.wc-confirm, .wc-conflict { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); font-size: 14px; }
.wc-confirm p, .wc-conflict p { margin: 0 0 4px; }
.wc-conf-h { font-weight: 700; }
.wc-conf-l { opacity: 0.8; font-size: 12px; }
.wc-conf-t { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wc-conf-t.mine { border: 1px solid rgba(255, 255, 255, 0.4); }
.wc-quote-deleted { opacity: 0.75; font-style: italic; cursor: default; }

/* v2.17.1: "Има нова верзија" */
.updbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--card); color: var(--text); border: 2px solid var(--primary); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.updbar button { min-height: 44px; }

/* v2.18 "Залиха" (stock.js): the counts, search, categories and one row per material (the balance and OK / НИСКА / НЕМА) */
.stk-fresh { margin: -4px 2px 10px; font-size: 13px; }
.stk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stk-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; }
.stk-tile .stk-n { font-size: 22px; font-weight: 800; line-height: 1.1; }
.stk-tile .stk-l { font-size: 12px; color: var(--muted); }
.stk-tile.st-ok .stk-n { color: var(--ok); }
.stk-tile.st-low .stk-n { color: var(--warn); }
.stk-tile.st-out .stk-n, .stk-tile.st-error .stk-n { color: var(--bad); }
.stk-tile.on { border: 2px solid var(--primary); background: var(--info-bg); }
.stk-search { margin-bottom: 10px; font-size: 16px; border-radius: 12px; -webkit-appearance: none; appearance: none; }
.stk-chips { flex-wrap: wrap; overflow-x: visible; padding-bottom: 10px; }   /* every category visible, no sideways scroll */
.stk-group { padding: 8px 14px; }
.stk-gh { margin: 6px 0 4px; font-size: 15px; }
.stk-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.stk-gh + .stk-row { border-top: 0; }
.stk-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stk-t { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.stk-id { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.stk-qty { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; text-align: right; }
.stk-qty b { font-size: 18px; }
.stk-qty .stk-u { font-size: 12px; color: var(--muted); }
.stk-qty.st-low b { color: var(--warn); }
.stk-qty.st-out b, .stk-qty.st-error b { color: var(--bad); }
.stk-badge { flex: 0 0 auto; min-width: 54px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; text-align: center; }
.stk-badge.st-ok { background: var(--ok-bg); color: var(--ok); }
.stk-badge.st-low { background: var(--warn-bg); color: var(--warn); }
.stk-badge.st-out, .stk-badge.st-error { background: var(--bad-bg); color: var(--bad); }
.stk-res { font-size: 12px; color: var(--warn); font-weight: 600; }
.stk-tile .stk-l { text-align: center; line-height: 1.2; }
.stk-stale, .stk-offline { font-size: 14px; }

/* ---- v2.19 "Нарачка кај добавувач" (supply.js) - one account only ---- */
.so-open { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; margin: 0 0 12px; padding: 12px 16px; font: inherit; font-size: 16px; font-weight: 700; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-align: left; touch-action: manipulation; }
.so-open:active { background: var(--info-bg); }
.so-open .so-go { margin-left: auto; font-size: 22px; line-height: 1; color: var(--muted); }
.msg.warn { background: var(--warn-bg); color: var(--warn); }

/* "Парчиња со димензии" (v98): choice board / piece, the list of dimensions, quantity, confirmation - readable at 360-375px, no overflow */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.modebtn { min-height: 64px; font-size: 20px; font-weight: 700; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); padding: 10px 8px; overflow-wrap: anywhere; }
.modebtn:active { background: var(--ok-bg); }
.pieces { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.piecebtn { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; box-sizing: border-box; text-align: left; min-height: 60px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); }
.piecebtn.sel { border-color: var(--ok); background: var(--ok-bg); }
.piecebtn .pdim { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.piecebtn .pqty { font-size: 15px; color: var(--muted); white-space: nowrap; }
.piecebtn .pplace { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px 0 14px; }
.stepbtn { width: 56px; height: 56px; font-size: 30px; font-weight: 700; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); }
.stepbtn:disabled { opacity: .4; }
.stepnum { min-width: 56px; text-align: center; font-size: 40px; font-weight: 800; }
.confirmbox { border: 2px solid var(--ok); border-radius: 14px; padding: 12px; margin-bottom: 10px; text-align: center; }
.confirmbox p { margin: 0 0 10px; font-size: 16px; overflow-wrap: anywhere; }
.confirmbox .primary.huge { font-size: 20px; min-height: 0; padding: 14px 10px; margin-bottom: 8px; }
.muted.small { font-size: 13px; text-align: center; }
/* v98+ "+ Додај парче" (2.22): the entry form and the "чека потврда" list */
.pform { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pfield { display: block; font-size: 13px; color: var(--muted); min-width: 0; margin-bottom: 8px; }
.pfield input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 48px; padding: 8px 10px; font-size: 18px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.pfield input:disabled { opacity: .65; }
@media (max-width: 380px) { .pform { grid-template-columns: 1fr 1fr; } .pform .pfield:last-child { grid-column: 1 / -1; } }
.pendbox { margin: 8px 0; }
.pendlist { list-style: none; padding: 0; margin: 0 0 6px; }
.pendlist li { padding: 8px 10px; margin-bottom: 6px; border: 1px dashed var(--line); border-radius: 10px; font-size: 15px; overflow-wrap: anywhere; }
.pendlist .pendby { display: block; font-size: 12px; color: var(--muted); }
.so-h { margin: 4px 0 8px; font-size: 16px; overflow-wrap: anywhere; }
.so-sups { padding: 12px 14px; }
.so-find { margin-bottom: 4px; }
.so-sup { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.so-find + .so-suplist .so-sup:first-child { border-top: 0; }
.so-sup.on b { color: var(--primary); }
.so-supname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.so-found { display: block; font-size: 13px; color: var(--info); }
.so-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); vertical-align: 1px; }
.so-none { margin: 10px 0 2px; }
input[type='checkbox'].so-cb { width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin: 1px 0 0; padding: 0; flex: 0 0 auto; accent-color: var(--primary); }
.so-card { padding: 8px 14px 14px; }
.so-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.so-cardhead .so-x { flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.so-also { margin: -4px 0 6px; }
.so-empty { margin: 6px 0; }
.so-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.so-row.on { margin: 0 -14px; padding: 10px 14px; background: var(--info-bg); }
.so-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.so-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.so-name b { font-size: 15px; overflow-wrap: anywhere; }
.so-real { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.so-name .so-tag { margin-left: 0; align-self: flex-start; }
.so-edit { flex: 0 0 auto; width: 40px; height: 40px; font: inherit; font-size: 17px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; touch-action: manipulation; }
.so-edit[aria-expanded='true'] { color: var(--primary-text); background: var(--primary); border-color: var(--primary); }
.so-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 32px; }
.so-stock { font-size: 13px; color: var(--muted); }
.so-stock.st-low { color: var(--warn); font-weight: 700; }
.so-stock.st-out { color: var(--bad); font-weight: 700; }
.so-qbox { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.so-q { width: 88px; padding: 9px 10px; font-size: 16px; text-align: right; background: var(--card); }
.so-q.bad { border-color: var(--bad); background: var(--bad-bg); }
.so-unit { min-width: 44px; font-size: 13px; color: var(--muted); }
.so-err { grid-column: 1 / -1; padding-left: 32px; font-size: 13px; font-weight: 600; color: var(--warn); }
.so-err:empty { display: none; }
.so-pcs { grid-column: 1 / -1; padding-left: 32px; min-width: 0; }
.so-box { margin: 2px 0 10px; padding: 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.so-box .field { margin-bottom: 8px; }
.so-box input { background: var(--card); }
.so-box p.small { margin: 0 0 10px; }
.so-box .row > button { flex: 1 1 0; min-width: 0; }
.so-box .err { margin: 0 0 10px; }
.so-unlink { margin-top: 10px; }
.so-ask { margin: 0 0 10px; font-weight: 600; overflow-wrap: anywhere; }
.so-results { margin-top: 6px; }
.so-res { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 10px 2px; font: inherit; color: var(--text); text-align: left; background: none; border: 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.so-res:first-child { border-top: 0; }
.so-res:active { background: var(--info-bg); }
.so-cancel { display: block; margin-top: 4px; }
.so-add { margin-top: 10px; }
.so-prev { padding: 12px 14px; }
.so-prev > p.small { margin: -2px 0 10px; }
.so-ph { margin: 12px 0 6px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.so-text { font-size: 16px; line-height: 1.4; background: var(--card); }
.so-edited { margin: 6px 0 0; font-size: 13px; color: var(--warn); }
.so-edited .link { font-size: 13px; padding: 2px 0; }
.so-fmsg { text-align: left; }
.so-finish { margin-top: 6px; }
.so-new, .so-back { margin: 0 0 10px; }
.so-note { text-align: center; margin: 4px 0 16px; }
.so-donehead { margin: 0 0 12px; font-weight: 600; }
.so-order .so-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.so-order .so-actions button { flex: 1 1 0; min-width: 0; margin: 0; padding-left: 8px; padding-right: 8px; }
.so-status { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.so-status.ok { background: var(--ok-bg); color: var(--ok); font-weight: 700; text-align: center; }
.so-status.bad { background: var(--bad-bg); color: var(--bad); }
.so-offscreen { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.stk-edit-qty { width: auto; min-width: 64px; min-height: 44px; border: 1px dashed var(--primary); border-radius: 8px; background: transparent; color: var(--text); padding: 5px 7px; font: inherit; cursor: pointer; }
@media (prefers-color-scheme: dark) { .stk-qty.st-ok b { color: #fff; } }
.stk-edit-qty:disabled { opacity: .65; cursor: default; border-color: transparent; }
.stk-edit-form { display: grid; gap: 8px; margin: 6px 0 12px; padding: 12px; border: 1px solid var(--primary); border-radius: 10px; }
.stk-edit-form input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Phone notification hold menu. Scrolling cancels the 2.5 second hold. */
.notice-hold{touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.notice-remove-overlay{position:fixed;inset:0;z-index:10000;background:#0008;display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.notice-remove-menu{background:var(--card,#18243b);border:1px solid #586986;border-radius:16px;padding:16px;display:grid;gap:10px;width:min(100%,420px);box-sizing:border-box}
.notice-remove-menu button{min-height:48px;width:100%}.notice-remove-menu .notice-remove{color:#ff8383;border-color:#a94b55}

/* v101 (2.23): "Плочести материјали" (the list) and "Остатокот по сечење" - readable at 360-375px, no overflow */
.sheetsbtn { margin-top: 12px; }
.sheetq { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin: 8px 0 10px; padding: 8px 12px; font-size: 18px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.sheetlist { display: flex; flex-direction: column; gap: 8px; }
.sheetrow { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; text-align: left; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.sheetrow:active { background: var(--ok-bg); border-color: var(--ok); }
.sheetchk { flex: 0 0 auto; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid var(--muted); border-radius: 7px; background: var(--card); }
.sheetrow:active .sheetchk { background: var(--ok); border-color: var(--ok); }
.sheetinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheetname { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.sheetmeta { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.sheetmeta b { color: var(--text); }
.sheetbadge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12px; }
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.outbtn { min-height: 56px; font-size: 16px; font-weight: 700; border-radius: 14px; border: 2px solid var(--line); background: var(--card); color: var(--text); padding: 8px 6px; overflow-wrap: anywhere; }
.outbtn.sel { border-color: var(--ok); background: var(--ok-bg); }
.outbtn:disabled { opacity: .6; }
.cutbox { text-align: left; }
.cutbox .lbl { text-align: center; }
.cutrow { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.cutrowh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cutsum, .cuthint { font-size: 14px; color: var(--muted); text-align: center; margin: 4px 0 8px; overflow-wrap: anywhere; }

/* v102 (2.24): the subgroups of "Плочести материјали" and the dimension of a board */
.sheetdim { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.groupbtn .sheetname { font-size: 19px; }
.groupgo { flex: 0 0 auto; font-size: 28px; line-height: 1; color: var(--muted); }
/* Stock order selection is separate from editing the actual stock balance. */
.stk-order { margin: 12px 0; }
.stk-order textarea { width: 100%; box-sizing: border-box; min-height: 70px; margin-bottom: 10px; }
.stk-order-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0 12px; border-bottom: 1px solid #e5e7eb; }
.stk-order-pick label { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.stk-order-pick input[type=checkbox] { width: 22px; height: 22px; }
.stk-order-amount { width: 100px; min-height: 44px; box-sizing: border-box; }
.wnew-task { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px; margin: 8px 0; border: 1px solid #64748b; border-radius: 10px; }
.wnew-task textarea { grid-column: 2 / 4; width: 100%; box-sizing: border-box; margin: 0; }
.wnew-task select { grid-column: 2; min-width: 0; width: 100%; }
.wnew-task.task-progress { border-color: #f59e0b; background: #f59e0b22; }
.wnew-task.task-done { border-color: #22c55e; background: #22c55e22; }
.wassign-choice { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.wassign-choice input { width: 22px; height: 22px; }
/* Pajak's four tools fit on the phone home screen without oversized tiles. */
@media (max-width: 600px) {
  .home.compact-tools .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home.compact-tools .tile { min-height: clamp(82px, calc((100dvh - 220px) / 4), 176px); padding: 14px 18px; gap: 16px; flex-direction: row; justify-content: flex-start; text-align: left; border-radius: 16px; }
  .home.compact-tools .tile .ticon { width: 50px; height: 50px; font-size: 29px; border-radius: 13px; }
  .home.compact-tools .tile .ttext { gap: 3px; max-width: 100%; }
  .home.compact-tools .tile .tname { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
  .home.compact-tools .tile .tsub { font-size: 13px; line-height: 1.3; }
}

.stk-pieces, .stk-piece-empty { font-size:12px; margin:0; line-height:1.4; }
.stk-pieces > summary { cursor:pointer; color:var(--primary); padding:2px 0; min-height:0; }
.stk-pieces > div { color:var(--muted); overflow-wrap:anywhere; padding:2px 0; }
.stk-piece-empty { color:var(--muted); }

/* Task text gets all remaining width; edit and camera are fixed-size controls. */
.wpphoto-btn { display: none; }
@media (max-width: 600px) {
  .wpoint { display: block; padding: 6px 8px; }
  .wpoint > .wprow { display: flex; align-items: flex-start; gap: 4px; width: 100%; min-width: 0; }
  .wpoint .wptt { display: block; flex: 1 1 0; width: auto; min-width: 0; white-space: normal; word-break: normal; overflow-wrap: break-word; padding-top: 7px; }
  .wpoint .wpcheck { flex: 0 0 auto; gap: 3px; padding-right: 0; min-height: 36px; }
  .wpoint .wpeditbtn, .wpoint .wpphoto-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 18px; }
  .wpoint > .wpointphotos { margin: 0; padding: 0; }
  .wpointphotos > summary { display: none; }
  .wpointphotos[open] { margin-top: 6px; }
  .wpoint .wpeditwrap { flex: 1 1 0; min-width: 0; }
  .wpoint .wpbadge { flex: 0 0 auto; font-size: 11px; margin-top: 8px; }
}
.wc-extra-shortcut { display: block; width: auto; margin: 0 0 5px; padding: 4px 10px; min-height: 36px; border: 1px solid var(--wc-line); border-radius: 10px; background: transparent; color: var(--wc-name); font: inherit; font-size: 14px; }
.wc-bar.closed .wc-extra-shortcut { display: none; }

/* Keep task text full width and both tools together underneath it. */
.wppoint-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 600px) {
  .wpoint > .wprow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 5px; }
  .wpoint .wptt { grid-column: 2; width: 100%; box-sizing: border-box; }
  .wpoint .wpbadge { grid-column: 2; margin-top: 0; justify-self: start; }
  .wpoint .wppoint-tools { grid-column: 2; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; min-width: 0; }
  .wpoint .wppoint-tools .wpphoto-btn { flex: 0 0 auto; width: auto; padding: 0 6px; white-space: nowrap; font-size: 13px; }
  .wpoint .wpeditbtn { grid-column: 2; justify-self: end; }
  .wpoint .wppoint-tools .wpeditbtn { flex: 0 0 36px; }
  .wpoint .wpeditwrap, .wpoint .wpnewin { grid-column: 2; }
}

.wextra-title { font-size: 17px; margin: 0 0 8px; color: var(--text); }
.wextra > p { margin: 6px 0 10px; }
.wextra-entry { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wextra-text { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wextra-add { width: 100%; margin-top: 10px; min-height: 44px; }

.wextra-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-top:4px; }
.wextra-tools button { min-height:36px; margin:0; padding:4px 6px; font-size:13px; }
.wextra .wc-editin { width:100%; box-sizing:border-box; }

/* Compact additional-work notes on phones. */
.wextra { padding: 12px; }
.wextra-title { display: flex; align-items: baseline; gap: 6px; font-size: 16px; line-height: 1.25; margin: 0 0 6px; }
.wextra-title > span:first-child { min-width: 0; }
.wextra-count { flex: 0 0 auto; white-space: nowrap; }
.wextra-entry { padding: 6px 0; min-height: 0; }
.wextra-text { font-size: 15px; line-height: 1.35; margin: 0; white-space: pre-wrap; }
.wextra-entry > small { display: block; font-size: 12px; line-height: 1.25; margin-top: 3px; }
.wextra-tools { flex-wrap: nowrap; gap: 8px; margin-top: 2px; }
.wextra-tools button { font-size: 12px; line-height: 1.2; min-height: 32px; width: auto; padding: 4px 5px; }
.wextra-add { font-size: 14px; line-height: 1.25; min-height: 38px; padding: 7px 8px; margin-top: 6px; }
.wextra button.wextra-add { font-size:14px; line-height:1.25; min-height:38px; padding:7px 8px; margin-top:6px; }

/* Shared requisition notebooks */
.req-tabs{display:flex;gap:8px;margin:12px 0}.req-tabs button{flex:1;min-width:0;padding:12px 6px;overflow-wrap:anywhere}.req-list{list-style:none;padding:0;margin:16px 0}.req-list li{display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--line,#dde2eb);padding:8px 0}.req-number{flex:none;width:26px;padding-top:12px;color:#d97706;font-weight:bold;text-align:right}.req-list textarea{flex:1;min-width:0;resize:none;line-height:1.5;min-height:44px}.req-remove{flex:none;min-width:32px;min-height:44px;color:#b91c1c}.req-warning{border:1px solid #eab308}.req-warning textarea{width:100%;min-height:100px}


/* Raised requisition buttons, with a pressed state. */
.req-tab-3d{position:relative;background:linear-gradient(180deg,#fff 0%,#f1f5f9 100%);border:1px solid #cbd5e1;border-bottom-color:#94a3b8;box-shadow:inset 0 1px 0 #fff,0 4px 0 #cbd5e1,0 6px 10px #0f172a12;color:#334155;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s}
.req-tab-3d:hover{background:linear-gradient(180deg,#fff,#e8eef6);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 5px 0 #cbd5e1,0 7px 12px #0f172a18}
.req-tab-3d[aria-selected="true"]{background:linear-gradient(180deg,#fffbeb,#fde6b2);border-color:#f2b951;border-bottom-color:#d69b31;box-shadow:inset 0 1px 0 #fff8,0 4px 0 #d8ad61,0 6px 10px #92400e18;color:#78350f}
.req-tab-3d:active{transform:translateY(3px);box-shadow:inset 0 1px 2px #0f172a10,0 1px 0 #c6a36a}
.req-tab-3d:focus-visible{outline:3px solid #fbbf2480;outline-offset:5px}
.req-action-3d{border-bottom:2px solid #92400e;box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 #a84a0b,0 5px 8px #92400e20;transition:transform .12s,box-shadow .12s}
.req-action-3d:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0001,0 1px 0 #a84a0b}