:root { --blue:#007AC2; --blue-d:#005f97; --blue-l:#e6f2fa; --red:#d32f2f; --red-l:#fdecea; --green:#2e7d32; --green-l:#e8f5e9; --amber:#b26a00; --amber-l:#fff4e0; --bg:#f4f6f8; --text:#1c2733; --muted:#5f6b78; --line:#dde3e9; --r:14px; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--text); font:17px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
.hidden { display:none !important; }
#topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:8px; background:var(--blue); color:#fff; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; min-height:56px; }
#topbar h1 { flex:1; margin:0; font-size:20px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn { background:none; border:0; color:#fff; font-size:34px; line-height:1; padding:0 8px 4px 0; cursor:pointer; }
.user-chip { background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:20px; padding:6px 12px; font-size:14px; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
main { max-width:720px; margin:0 auto; padding:14px; }
#tabbar { position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex; background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
#tabbar a { flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 0 10px; color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; }
#tabbar a span { font-size:24px; }
#tabbar a.active { color:var(--blue); }
#tabbar a.scan-tab span { background:var(--blue); color:#fff; border-radius:50%; width:52px; height:52px; display:flex; align-items:center; justify-content:center; margin-top:-26px; box-shadow:0 3px 10px rgba(0,122,194,.4); border:4px solid #fff; }
.card { background:#fff; border-radius:var(--r); padding:16px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px; border-radius:12px; border:0; font-size:18px; font-weight:650; cursor:pointer; text-decoration:none; background:var(--blue); color:#fff; }
.btn:active { filter:brightness(.92); }
.btn.secondary { background:var(--blue-l); color:var(--blue-d); }
.btn.danger { background:var(--red-l); color:var(--red); }
.btn.block { width:100%; }
.btn.big { min-height:64px; font-size:21px; }
.btn.out { background:var(--red); } .btn.in { background:var(--green); }
.btn[disabled] { opacity:.45; }
.row { display:flex; gap:10px; } .row > * { flex:1; }
label { display:block; font-weight:600; font-size:15px; color:var(--muted); margin:14px 0 6px; }
input, select { width:100%; font-size:18px; padding:14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--text); }
input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,194,.18); }
.search { position:sticky; top:66px; z-index:5; display:flex; gap:8px; margin-bottom:12px; }
.search input { flex:1; }
.toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .toolbar .btn { flex:1; min-height:46px; font-size:16px; padding:0 12px; }
.item { display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r); padding:14px; margin-bottom:10px; text-decoration:none; color:inherit; border-left:5px solid transparent; }
.item.low { border-left-color:var(--amber); background:var(--amber-l); } .item.empty { border-left-color:var(--red); background:var(--red-l); }
.item .info { flex:1; min-width:0; } .item .name { font-weight:650; font-size:18px; overflow:hidden; text-overflow:ellipsis; }
.item .meta { color:var(--muted); font-size:14px; }
.item .qty { text-align:right; font-size:24px; font-weight:750; color:var(--blue-d); white-space:nowrap; } .item .qty small { font-size:13px; font-weight:500; color:var(--muted); display:block; }
.item.low .qty { color:var(--amber); } .item.empty .qty { color:var(--red); }
.item input[type=checkbox] { width:26px; height:26px; flex:none; accent-color:var(--blue); }
.badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--amber); color:#fff; margin-left:6px; vertical-align:middle; }
.badge.red { background:var(--red); }
.empty-state { text-align:center; color:var(--muted); padding:40px 10px; }
.stock-big { text-align:center; font-size:56px; font-weight:800; color:var(--blue-d); line-height:1.1; } .stock-big small { display:block; font-size:16px; font-weight:500; color:var(--muted); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:16px; } .kv dt { color:var(--muted); } .kv dd { margin:0; font-weight:600; }
.stepper { display:flex; align-items:center; gap:10px; margin:10px 0 16px; }
.stepper button { width:76px; height:76px; border-radius:50%; border:0; font-size:40px; font-weight:700; background:var(--blue-l); color:var(--blue-d); flex:none; cursor:pointer; }
.stepper button:active { background:#cfe6f5; }
.stepper input { text-align:center; font-size:38px; font-weight:800; height:76px; padding:0; }
.quick { display:flex; gap:8px; margin-bottom:14px; } .quick button { flex:1; min-height:44px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-size:17px; font-weight:650; color:var(--text); }
.warn { background:var(--red-l); color:var(--red); border-radius:12px; padding:12px 14px; font-weight:600; margin-bottom:12px; }
.qr-box { text-align:center; } .qr-box img { width:200px; height:200px; }
.tx { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); } .tx:last-child { border:0; }
.tx .amt { font-weight:800; font-size:20px; min-width:64px; text-align:right; } .tx .amt.neg { color:var(--red); } .tx .amt.pos { color:var(--green); } .tx .amt.neu { color:var(--muted); font-size:15px; }
.tx .info { flex:1; min-width:0; } .tx .t1 { font-weight:600; } .tx .t2 { color:var(--muted); font-size:14px; }
#reader { width:100%; border-radius:var(--r); overflow:hidden; background:#000; min-height:260px; }
#reader video { border-radius:var(--r); }
.toast { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#1c2733; color:#fff; padding:14px 20px; border-radius:12px; font-weight:600; z-index:50; max-width:90vw; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.25); }
.toast.ok { background:var(--green); } .toast.err { background:var(--red); }
.login { max-width:420px; margin:6vh auto 0; } .login .logo { width:84px; height:84px; border-radius:20px; display:block; margin:0 auto 12px; }
.login h2 { text-align:center; margin:0 0 4px; } .login p { text-align:center; color:var(--muted); margin-top:0; }
.seg { display:flex; background:var(--blue-l); border-radius:12px; padding:4px; margin-bottom:12px; } .seg button { flex:1; border:0; background:none; min-height:44px; border-radius:9px; font-size:16px; font-weight:650; color:var(--blue-d); } .seg button.on { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.hint { color:var(--muted); font-size:14px; }

/* ===== Etiketter / utskrift ===== */
.sheet { background:#fff; width:210mm; max-width:100%; margin:0 auto 14px; display:grid; grid-template-columns:repeat(3, 70mm); grid-auto-rows:37mm; padding:.5mm 0 0; box-shadow:0 1px 4px rgba(0,0,0,.15); overflow:hidden; }
.label { display:flex; align-items:center; gap:2.5mm; padding:2.5mm 3mm; overflow:hidden; border:1px dashed #ccd; }
.label img { width:30mm; height:30mm; flex:none; }
.label .ltxt { min-width:0; font-family:Arial,Helvetica,sans-serif; }
.label .lname { font-weight:700; font-size:10pt; line-height:1.15; max-height:3.5em; overflow:hidden; }
.label .lsku { font-size:9pt; margin-top:1mm; }
.label .lloc { font-size:8pt; color:#444; margin-top:.5mm; }
@media print {
  @page { size:A4; margin:0; }
  html,body { background:#fff; padding:0; }
  #topbar, #tabbar, .no-print, #toast { display:none !important; }
  main { padding:0; max-width:none; }
  .sheet { zoom:1 !important; box-shadow:none; margin:0; width:210mm; height:297mm; page-break-after:always; break-after:page; }
  .sheet:last-child { page-break-after:auto; break-after:auto; }
  .label { border:0; }
}

/* ===== Kategorier ===== */
.search input { font-size:20px; padding:18px 16px; border-radius:16px; border-width:2px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sec { margin:18px 4px 8px; font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.cats { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:12px; }
@media (min-width:600px) { .cats { grid-template-columns:repeat(3, 1fr); } }
.cat { display:flex; flex-direction:column; background:#fff; border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); border-bottom:4px solid var(--blue); }
.cat:active { filter:brightness(.95); }
.cat .cimg { aspect-ratio:4/3; background:var(--blue-l); display:flex; align-items:center; justify-content:center; }
.cat .cimg img { width:100%; height:100%; object-fit:cover; display:block; }
.cat .cimg span { font-size:44px; opacity:.6; }
.cat .ctext { padding:10px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.cat .cname { font-size:18px; font-weight:700; line-height:1.2; }
.cat .ccount { color:var(--muted); font-size:13px; }
.cat-photo img { max-height:34vh; object-fit:cover; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:15px; margin:2px 2px 12px; color:var(--muted); }
.crumbs a { color:var(--blue-d); text-decoration:none; font-weight:600; padding:4px 0; }
.btn.small { min-height:44px; font-size:15px; }

/* ===== Bilder ===== */
.thumb { width:56px; height:56px; border-radius:10px; object-fit:cover; flex:none; background:var(--blue-l); }
.thumb.none { display:flex; align-items:center; justify-content:center; font-size:24px; opacity:.55; }
.thumb.big { width:96px; height:96px; font-size:36px; overflow:hidden; }
.thumb.big img { width:100%; height:100%; object-fit:cover; }
.imgfield { display:flex; gap:14px; align-items:center; }
.imgbtns { display:flex; flex-direction:column; gap:8px; flex:1; }
.photo { position:relative; margin-bottom:12px; border-radius:var(--r); overflow:hidden; background:#fff; cursor:zoom-in; }
.photo img { display:block; width:100%; max-height:52vh; object-fit:contain; background:#f0f3f6; }
.photo .zoom { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff; border-radius:8px; padding:2px 8px; font-size:18px; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; }
.lightbox button { position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.2); color:#fff; font-size:24px; }

/* ===== Meny, admin, Excel, inventering ===== */
.menu { display:flex; flex-direction:column; gap:10px; }
.menu a { display:block; background:#fff; border-radius:var(--r); padding:18px 16px; font-size:18px; font-weight:650; color:var(--text); text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.menu a:active { background:var(--blue-l); }
.urow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 0; border-bottom:1px solid var(--line); }
.urow:last-child { border:0; }
.urow .uinfo { flex:1 1 140px; min-width:0; }
.urow select { width:auto; flex:0 0 auto; padding:10px; font-size:16px; }
.urow .ubtns { display:flex; gap:6px; flex:1 1 100%; }
.urow .ubtns .btn { flex:1; }
.stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:12px; }
.stats div { background:var(--blue-l); border-radius:12px; padding:10px 4px; text-align:center; font-size:13px; color:var(--muted); }
.stats b { display:block; font-size:24px; color:var(--blue-d); }
.pos { color:var(--green) !important; } .neg { color:var(--red) !important; }
.okbox { background:var(--green-l); color:var(--green); border-radius:12px; padding:14px; font-weight:700; margin-bottom:12px; }
.progress { height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-bottom:12px; }
.progress div { height:100%; background:var(--blue); }
.invnums { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 4px; }
.invnums div { background:var(--bg); border-radius:12px; padding:10px; text-align:center; color:var(--muted); font-size:14px; }
.invnums b { display:block; font-size:34px; color:var(--text); }
label.chk { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:500; }
label.chk input { width:24px; height:24px; accent-color:var(--blue); }
details.more { margin-top:16px; border-top:1px solid var(--line); padding-top:8px; }
details.more summary { font-weight:650; color:var(--blue-d); padding:8px 0; cursor:pointer; }

/* ===== Ångra + hjälp ===== */
.toast { display:flex; align-items:center; gap:12px; }
.toast-btn { background:#fff; color:var(--green); border:0; border-radius:10px; padding:10px 14px; font-size:16px; font-weight:800; flex:none; cursor:pointer; }
.toast.err .toast-btn { color:var(--red); }
.tx .amt { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.undo { border:1.5px solid var(--line); background:#fff; color:var(--blue-d); border-radius:10px; padding:8px 10px; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
.tx.undone .t1, .tx.undone .amt { text-decoration:line-through; opacity:.55; }
.tag { display:inline-block; background:var(--bg); border-radius:8px; padding:1px 8px; font-size:12px; font-weight:700; color:var(--muted); text-decoration:none; }
.helpbox { border-left:5px solid var(--blue); }
ul.help { margin:0 0 12px; padding-left:0; list-style:none; } ul.help li { margin:8px 0; line-height:1.4; }
.helptext h3 { margin:18px 0 4px; font-size:17px; } .helptext h3:first-child { margin-top:0; } .helptext p { margin:0; line-height:1.5; }
.toast { width:min(92vw, 460px); justify-content:space-between; text-align:left; }

/* ===== Instrument ===== */
.calsum { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:12px; }
.calsum button { border:0; border-radius:14px; padding:12px 4px; font-size:12px; font-weight:650; color:#fff; cursor:pointer; line-height:1.2; }
.calsum button b { display:block; font-size:28px; }
.calsum .red { background:var(--red); } .calsum .amber { background:#e08a00; } .calsum .green { background:var(--green); } .calsum .blue { background:var(--blue); }
.sbadge { display:inline-block; border-radius:10px; padding:4px 10px; font-size:13px; font-weight:800; color:#fff; white-space:nowrap; }
.sbadge.big { font-size:16px; padding:8px 14px; }
.sbadge.red { background:var(--red); } .sbadge.amber { background:#e08a00; } .sbadge.green { background:var(--green); } .sbadge.gray { background:#8a96a3; }
.ins-item.st-forfallen { border-left-color:var(--red); } .ins-item.st-snart { border-left-color:#e08a00; }
.loanline { font-size:14px; color:var(--blue-d); margin-top:2px; }
.ihead { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.calbox { margin-top:12px; border-radius:12px; padding:12px 14px; font-weight:700; background:var(--green-l); color:var(--green); }
.calbox.st-forfallen { background:var(--red-l); color:var(--red); } .calbox.st-snart { background:var(--amber-l); color:var(--amber); } .calbox.st-okand { background:var(--bg); color:var(--muted); }
.loanbox { margin-top:10px; border-radius:12px; padding:12px 14px; font-size:16px; }
.loanbox.out { background:var(--blue-l); color:var(--blue-d); } .loanbox.in { background:var(--bg); color:var(--text); }
.checklist { margin:0; padding-left:20px; } .checklist li { margin:4px 0; }
.checks { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
label.chk.big { font-size:18px; padding:10px 12px; background:var(--bg); border-radius:12px; margin:0; }
label.chk.big input { width:28px; height:28px; flex:none; }
.miss { color:var(--red); font-weight:600; }
.notes { white-space:pre-wrap; margin:12px 0 0; }
textarea { width:100%; font:inherit; font-size:17px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; resize:vertical; }
.label .ltag { font-size:7pt; font-weight:800; letter-spacing:.06em; background:#000; color:#fff; display:inline-block; padding:0 1.5mm; margin-bottom:1mm; }
.rolelbl { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; }
#tabbar a { font-size:12px; }