@font-face { font-family:"Inter"; src:url("/fonts/Inter-var.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
/* ===== Gemensam förfining (alla stilar) – styrs av variabler ===== */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --accent:#007AC2; --accent-ink:#005f97; --accent-soft:rgba(0,122,194,.10);
  --surface:#fff; --surface-2:#f3f4f6;
  --head-bg:#2E3640; --head-fg:#fff; --head-line:transparent; --head-chip:rgba(255,255,255,.12);
  --tab-bg:#fff; --tab-fg:#7a828c; --tab-on:var(--accent);
  --btn-bg:var(--accent); --btn-fg:#fff; --btn2-bg:var(--surface-2); --btn2-fg:var(--text);
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05);
  --cat-ph:var(--surface-2); --cat-ini:var(--muted);
  --r:16px;
  /* mappa appens gamla variabler */
  --blue:var(--accent); --blue-d:var(--accent-ink); --blue-l:var(--accent-soft);
}
html,body { font-family:var(--font); font-size:16px; letter-spacing:-.005em; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
#topbar { background:var(--head-bg); color:var(--head-fg); border-bottom:1px solid var(--head-line); min-height:58px; gap:10px; padding-left:16px; padding-right:12px; }
#topbar .brand { height:17px; width:auto; display:block; flex:none; }
#topbar .logo-b { display:none; }
.brand-sep { width:1px; height:20px; background:currentColor; opacity:.25; flex:none; }
#topbar h1 { font-size:16px; font-weight:600; letter-spacing:-.01em; opacity:.92; }
.icon-btn { color:var(--head-fg); font-size:30px; padding:0 4px 3px 0; }
.user-chip { background:var(--head-chip); color:var(--head-fg); font-size:13px; font-weight:600; padding:7px 12px; }
main { padding:16px 16px 20px; }
.card, .item, .menu a, .cat { background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--card-line, transparent); }
.card { border-radius:var(--r); padding:18px; margin-bottom:14px; }
h2, h3 { letter-spacing:-.015em; }
.sec { font-size:12px; font-weight:600; letter-spacing:.09em; margin:22px 2px 10px; color:var(--muted); }
.search input { font-size:16px; padding:15px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
input, select, textarea { font-family:var(--font); background:var(--surface); color:var(--text); border:1px solid var(--line); font-size:16px; }
.btn { font-family:var(--font); background:var(--btn-bg); color:var(--btn-fg); font-size:16px; font-weight:600; border-radius:12px; min-height:50px; letter-spacing:-.005em; }
.btn.secondary { background:var(--btn2-bg); color:var(--btn2-fg); }
.btn.small { min-height:42px; font-size:14px; }
.btn.big { min-height:58px; font-size:18px; }
.btn.out { background:var(--out, #c62828); } .btn.in { background:var(--in, #2e7d32); }
.helpbox { border-left:0; }
.helpbox h3 { font-size:17px; font-weight:650; }
ul.help li { font-size:14.5px; color:var(--text); line-height:1.5; margin:7px 0; }
ul.help li b { font-weight:600; }
.hint { font-size:13px; }
.cats { gap:12px; }
.cat { border-bottom:0; border-radius:var(--r); }
.cat .cimg { background:var(--cat-ph); aspect-ratio:16/11; }
.cat .cico { display:none; }
.cat .cimg .cini { font-size:26px; font-weight:700; letter-spacing:.02em; color:var(--cat-ini); }
.cat .ctext { padding:11px 14px 13px; }
.cat .cname { font-size:16px; font-weight:650; letter-spacing:-.01em; }
.cat .ccount { font-size:12.5px; }
.item { border-radius:var(--r); border-left-width:0; padding:13px 14px; }
.item .name { font-size:16px; font-weight:600; }
.item .meta { font-size:13px; }
.item .qty { font-size:20px; font-weight:700; color:var(--text); }
.crumbs { font-size:13px; } .crumbs a { color:var(--accent-ink); font-weight:600; }
.stock-big { font-size:52px; font-weight:750; letter-spacing:-.03em; color:var(--text); }
.stock-big small { font-size:14px; }
.kv { font-size:14.5px; gap:8px 16px; } .kv dd { font-weight:550; }
.seg { background:var(--surface-2); } .seg button { color:var(--muted); font-family:var(--font); font-size:15px; } .seg button.on { background:var(--surface); color:var(--text); }
.stepper button { width:64px; height:64px; font-size:30px; font-weight:500; background:var(--surface-2); color:var(--text); }
.stepper input { height:64px; font-size:32px; font-weight:700; }
.quick button { font-family:var(--font); font-size:15px; font-weight:600; background:var(--surface); color:var(--text); border:1px solid var(--line); }
#tabbar { background:var(--tab-bg); border-top:1px solid var(--line); }
#tabbar a { color:var(--tab-fg); font-size:11px; font-weight:600; padding:9px 0 11px; gap:3px; }
#tabbar a .ti { font-size:0; width:24px; height:24px; display:block; }
#tabbar a .ti svg { width:24px; height:24px; display:block; }
#tabbar a.active { color:var(--tab-on); }
#tabbar a.scan-tab .ti { width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin-top:-24px; background:var(--scan-bg, var(--accent)); color:#fff; border:4px solid var(--tab-bg); box-shadow:0 6px 16px rgba(0,0,0,.18); }
#tabbar a.scan-tab .ti svg { width:26px; height:26px; }
.tx { border-bottom-color:var(--line); } .tx .t1 { font-size:15px; } .tx .t2 { font-size:13px; }
.tag { background:var(--surface-2); color:var(--muted); }
.toast { font-family:var(--font); }
.stock-big small { letter-spacing:0; margin-top:4px; }
.helpbox { padding:16px 16px 14px; }
.helpbox h3 { font-size:16px; margin-bottom:4px !important; }
ul.help { margin-bottom:10px; } ul.help li { font-size:13.5px; line-height:1.45; margin:5px 0; color:var(--muted); } ul.help li b { color:var(--text); }
/* 3 · Mjukgrå – minimal, luftig, kategorier som lista, grafitknappar */
:root { --bg:#ECEEF0; --surface:#FFFFFF; --surface-2:#F1F2F4; --text:#1F2328; --muted:#6B737C; --line:#E1E4E8;
  --head-bg:rgba(236,238,240,.92); --head-fg:#1F2328; --head-line:transparent; --head-chip:#FFFFFF;
  --tab-bg:#FFFFFF; --tab-fg:#9AA1A9; --tab-on:#1F2328; --scan-bg:#1F2328;
  --btn-bg:#1F2328; --btn-fg:#fff; --btn2-bg:#FFFFFF; --btn2-fg:#1F2328; --cat-ph:#EEF0F2; --cat-ini:#9AA2AB;
  --card-line:#E3E6EA; --shadow:none; --r:14px; }
#topbar { backdrop-filter:saturate(1.4) blur(12px); }
#topbar .logo-w { display:none; } #topbar .logo-b { display:block; }
#topbar h1 { font-weight:500; color:#5B636C; }
.user-chip { border:1px solid #DDE1E6; }
.btn.secondary { border:1px solid #DDE1E6; }
.helpbox h3 { font-weight:600; }
.sec { text-transform:none; letter-spacing:-.01em; font-size:20px; font-weight:650; color:#1F2328; margin:26px 2px 10px; }
/* kategorier som lista */
.cats { grid-template-columns:1fr !important; gap:0; background:#fff; border:1px solid #E3E6EA; border-radius:14px; overflow:hidden; }
.cat { flex-direction:row; align-items:center; border:0; border-radius:0; border-bottom:1px solid #EEF0F2; box-shadow:none; padding:10px 12px; gap:12px; }
.cat:last-child { border-bottom:0; }
.cat .cimg { width:52px; height:52px; aspect-ratio:auto; border-radius:12px; overflow:hidden; flex:none; }
.cat .cimg .cini { font-size:15px; font-weight:600; letter-spacing:.06em; }
.cat .ctext { padding:0; flex:1; }
.cat .cname { font-size:16px; font-weight:600; }
.cat::after { content:"›"; font-size:24px; color:#B7BDC4; padding-right:4px; }
#tabbar a.active::after { content:""; display:block; width:18px; height:2px; border-radius:2px; background:#007AC2; margin-top:2px; }
#tabbar a.scan-tab .ti { border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.14); }
.crumbs a { color:#007AC2; }
.stock-big { font-weight:600; }

/* ===== Mjukgrå: övriga sidor ===== */
/* instrumentöversikt: lugna kort med färgad siffra i stället för färgblock */
.calsum button { background:#fff !important; color:var(--muted); border:1px solid var(--card-line); font-family:var(--font); font-weight:600; font-size:11.5px; border-radius:14px; }
.calsum button b { font-size:26px; font-weight:700; letter-spacing:-.02em; }
.calsum .red b { color:#C62828; } .calsum .amber b { color:#C77700; } .calsum .green b { color:#2E7D32; } .calsum .blue b { color:#007AC2; }
.sbadge { font-weight:650; font-size:12px; padding:4px 10px; border-radius:999px; }
.sbadge.red { background:#FDECEA; color:#B3261E; } .sbadge.amber { background:#FFF3E0; color:#A35F00; } .sbadge.green { background:#E8F5E9; color:#1E6B34; } .sbadge.gray { background:#F1F2F4; color:#6B737C; }
.sbadge.big { font-size:14px; padding:6px 12px; }
.badge { font-weight:650; border-radius:999px; background:#FFF3E0; color:#A35F00; }
.badge.red { background:#FDECEA; color:#B3261E; }
.calbox, .loanbox, .okbox, .warn { border-radius:12px; font-weight:550; font-size:14.5px; }
.loanline { color:#007AC2; font-size:13px; }
.item.low { background:#fff; box-shadow:inset 3px 0 0 #E08A00; } .item.empty { background:#fff; box-shadow:inset 3px 0 0 #C62828; }
.ins-item.st-forfallen { box-shadow:inset 3px 0 0 #C62828; } .ins-item.st-snart { box-shadow:inset 3px 0 0 #E08A00; }
.thumb { background:#F1F2F4; border-radius:12px; }
/* historik */
.tx .t1 a, .tx .t1 { color:var(--text); text-decoration:none; font-weight:600; }
.tx .amt { font-size:17px; font-weight:700; }
.undo { border:1px solid var(--line); color:var(--text); font-weight:600; font-size:13px; border-radius:999px; padding:6px 11px; font-family:var(--font); background:#fff; }
.tag { border-radius:999px; }
/* meny, formulär, admin */
.menu { gap:0; background:#fff; border:1px solid var(--card-line); border-radius:14px; overflow:hidden; }
.menu a { border:0; border-radius:0; box-shadow:none; border-bottom:1px solid #EEF0F2; font-size:16px; font-weight:550; padding:16px; }
.menu a:last-child { border-bottom:0; }
.menu a:active { background:#F5F6F7; }
label { font-size:13px; font-weight:600; color:var(--muted); }
input, select, textarea { border-radius:12px; padding:13px 14px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#007AC2; box-shadow:0 0 0 3px rgba(0,122,194,.15); }
.btn.danger { background:#FDF1F0; color:#B3261E; }
.urow { border-bottom-color:#EEF0F2; }
.stats div, .invnums div { background:#F5F6F7; } .stats b { color:var(--text); }
.progress div { background:#007AC2; }
details.more summary { color:#007AC2; font-weight:600; }
label.chk.big { background:#F5F6F7; }
label.chk input, .item input[type=checkbox] { accent-color:#1F2328; }
/* inloggning */
.login { padding:28px 22px; }
.login .brandlogo { width:120px; height:auto; border-radius:0; margin:6px auto 18px; }
.login h2 { font-size:22px; font-weight:650; letter-spacing:-.02em; }
/* meddelanden, bildvisning */
.toast { background:#1F2328; border-radius:14px; font-weight:550; font-size:15px; box-shadow:0 10px 30px rgba(16,24,40,.25); }
.toast.ok { background:#1F2328; box-shadow:inset 4px 0 0 #2E9D58, 0 10px 30px rgba(16,24,40,.25); }
.toast.err { background:#B3261E; }
.toast-btn { color:#1F2328 !important; border-radius:999px; font-weight:700; font-family:var(--font); }
#reader { border-radius:16px; }
/* dokument */
.docic { border-radius:12px; font-weight:700; }
.docdel { border-color:#E1E4E8; }
/* utskrift: rent vitt, inga temafärger */
@media print {
  html, body { background:#fff !important; }
  .sheet { box-shadow:none !important; }
}
/* batch 2 */
.calsum .gray b { color:#6B737C; }
.insnav-btn { border:1px solid var(--card-line); box-shadow:none; }
.cal-list { border:1px solid var(--card-line); }
.menu .menu-toggle { border-radius:0; border-bottom:1px solid #EEF0F2; padding:14px 16px; }
.modal { font-family:var(--font); }
.chip { font-family:var(--font); }

/* ===== Avvikelser (saknade tillbehör) + W.O ===== */
.devflag { display:inline-block; background:#D93025; color:#fff; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:700; white-space:nowrap; }
.devflag.soft { background:#FDECEA; color:#B3261E; }
.devbox { background:#FDECEA; color:#8C1D18; border:1px solid #F5C2BE; border-left:4px solid #D93025; border-radius:12px; padding:12px 14px; margin-top:10px; font-size:14.5px; line-height:1.45; }
.devbox b { color:#B3261E; }
.devbox .hint { color:#8C1D18; opacity:.85; }
.item.has-dev, .calrow.has-dev { box-shadow:inset 4px 0 0 #D93025, var(--shadow); }
.devcount { display:inline-block; min-width:20px; height:20px; line-height:20px; padding:0 6px; border-radius:999px; background:#D93025; color:#fff; font-size:12px; font-weight:700; text-align:center; margin-left:6px; vertical-align:middle; }
#tabbar a { position:relative; }
#tabbar a .tabdev { position:absolute; top:4px; left:50%; margin-left:6px; min-width:17px; height:17px; line-height:17px; padding:0 4px; border-radius:999px; background:#D93025; color:#fff; font-size:10.5px; font-weight:700; text-align:center; }
.ansrow { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.ansrow:last-child { border:0; }
.ansrow .anst { flex:1; min-width:0; font-weight:550; font-size:15.5px; }
.ansrow .ansb { display:flex; gap:6px; flex:none; }
.ansrow .ansb button { min-height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--text); font-family:var(--font); font-size:14.5px; font-weight:600; cursor:pointer; }
.ansrow .ansb button.on.med { background:#E8F5E9; border-color:#2E9D58; color:#1E6B34; }
.ansrow .ansb button.on.saknas { background:#FDECEA; border-color:#D93025; color:#B3261E; }
.ansrow.unanswered .anst::after { content:" ·  välj"; color:var(--muted); font-weight:400; font-size:13px; }
.devcard { border-left:4px solid #D93025; }
.devcard.resolved { border-left-color:#2E9D58; }
.devcard img.devphoto { max-width:140px; max-height:140px; border-radius:10px; margin-top:8px; display:block; cursor:zoom-in; }
.wo-tag { display:inline-block; background:var(--accent-soft, #E6F2FA); color:var(--accent-ink, #005A8F); border-radius:6px; padding:0 6px; font-weight:650; font-size:12px; }
input.invalid { border-color:#E8A29C; }