:root { --brun:#7a4a1e; --guld:#c8963e; --bg:#faf6ef; --kort:#fff; --text:#2a2118; --gra:#7d7266; --linje:#ddd2c2; --fel:#b3261e; --ok:#2e7d32; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); font-size:16px; }
a { color:var(--brun); }
h2 { font-size:19px; margin:18px 0 10px; }
code { background:#f1e8da; padding:1px 5px; border-radius:4px; }

/* Topp och meny */
header.topp { background:var(--brun); color:#fff; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; z-index:5; }
header.topp h1 { margin:0; font-size:20px; }
header.topp small { opacity:.8; }
header.topp .anv { text-align:right; font-size:13px; }
header.topp .roll { background:var(--guld); border-radius:6px; padding:1px 6px; font-size:11px; }
header.topp .utlogg { display:inline-block; margin-top:4px; color:#fff; border:1px solid rgba(255,255,255,.6); border-radius:8px; padding:4px 10px; text-decoration:none; }
nav.meny { display:flex; gap:6px; overflow-x:auto; padding:10px 14px; background:#f1e8da; -webkit-overflow-scrolling:touch; }
nav.meny a { white-space:nowrap; text-decoration:none; color:var(--text); background:#fff; border:1px solid var(--linje); border-radius:20px; padding:7px 13px; font-size:14px; }
nav.meny a.aktiv { background:var(--brun); color:#fff; border-color:var(--brun); }

main { padding:14px; max-width:560px; margin:0 auto 120px; }
main.bred { max-width:1150px; }
main.smal { max-width:420px; margin-top:20px; }
.kort { background:var(--kort); border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.kort > h2:first-child { margin-top:0; }
label, .rubrik { display:block; font-weight:600; margin:10px 0 6px; font-size:13px; color:var(--gra); text-transform:uppercase; letter-spacing:.03em; }
.kort > label:first-child, .kort > .rubrik:first-child { margin-top:0; }
input, select, textarea { width:100%; font-size:17px; padding:12px; border:1.5px solid var(--linje); border-radius:10px; background:#fff; color:var(--text); font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--guld); }
input[type=checkbox] { width:22px; height:22px; accent-color:var(--brun); }
.knapp { display:inline-block; padding:11px 18px; border:none; border-radius:10px; background:var(--brun); color:#fff; font-size:16px; font-weight:700; text-decoration:none; cursor:pointer; font-family:inherit; }
.knapp.stor { width:100%; padding:16px; font-size:18px; margin-top:14px; }
.knapp.ljus { background:#fff; color:var(--text); border:1.5px solid var(--linje); font-weight:600; }
.knapp.liten { padding:6px 11px; font-size:14px; }
.knapp.rod { background:#fff; color:var(--fel); border:1.5px solid #e5b4b0; }
.knapp:disabled { opacity:.5; }
.meddelande { padding:12px 14px; border-radius:10px; margin:10px 0; font-weight:600; }
.meddelande.fel { background:#fdecea; color:var(--fel); }
.meddelande.ok { background:#e8f5e9; color:var(--ok); }
.flash { max-width:1150px; margin:12px auto 0; }
.fel { color:var(--fel); font-weight:600; }
.gra { color:var(--gra); }
.mitten { text-align:center; }
.logga { text-align:center; font-size:56px; margin-top:10px; }
.dold { display:none !important; }

/* Leveransformulär */
.dagar { display:flex; gap:8px; }
.dagar button { flex:1; padding:12px 6px; border:1.5px solid var(--linje); background:#fff; border-radius:10px; font-size:16px; color:var(--text); line-height:1.25; font-family:inherit; }
.dagar button small { display:block; font-size:12px; color:var(--gra); }
.dagar button.vald { background:var(--guld); border-color:var(--guld); color:#fff; font-weight:700; }
.dagar button.vald small { color:#fff; }
.kundlista { max-height:300px; overflow-y:auto; margin-top:8px; border:1.5px solid #eee3d3; border-radius:10px; }
.kundlista .grupp { font-size:12px; font-weight:700; color:var(--gra); text-transform:uppercase; letter-spacing:.04em; padding:8px 12px 4px; background:#fbf7f0; position:sticky; top:0; }
.kundlista button { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; text-align:left; padding:13px 12px; border:none; border-bottom:1px solid #f3ece1; background:#fff; font-size:16px; color:var(--text); font-family:inherit; }
.kundlista button:active { background:#fff3dc; }
.kundlista .nr { color:var(--gra); font-size:13px; white-space:nowrap; }
.kundlista mark { background:#ffe6a8; color:inherit; border-radius:3px; padding:0 1px; }
.kundlista .tom { padding:14px 12px; color:var(--gra); }
.valdKund { display:flex; align-items:center; gap:10px; padding:12px; border:2px solid var(--guld); background:#fffaf0; border-radius:10px; }
.valdKund .namn { flex:1; font-weight:700; font-size:17px; }
.valdKund .namn small { display:block; font-weight:400; color:var(--gra); font-size:13px; }
.valdKund button { border:1.5px solid var(--linje); background:#fff; border-radius:8px; padding:8px 12px; font-size:15px; }
.tips { font-size:13px; color:var(--gra); margin:-2px 0 8px; }
.produkt { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0e9de; }
.produkt:last-child { border-bottom:none; }
.produkt .namn { flex:1; font-size:16px; }
.produkt .artnr { display:block; font-size:12px; color:var(--gra); font-weight:400; }
.produkt > input { width:96px; text-align:right; font-size:18px; padding:10px; }
.produkt .enhet { width:28px; color:var(--gra); font-weight:600; }
.produkt.ifylld .namn { font-weight:700; }
.produkt.ifylld > input { border-color:var(--guld); background:#fffaf0; }
.produkt.kg { flex-wrap:wrap; }
.produkt .summa { display:block; font-size:13px; color:var(--brun); font-weight:700; margin-top:2px; }
.produkt .fler { flex-basis:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.produkt .fler:empty { display:none; }
.produkt .fler input { width:100%; font-size:17px; padding:10px 8px; text-align:right; border-color:var(--guld); background:#fffaf0; }
.produkt .fler input:placeholder-shown { border-color:var(--linje); background:#fff; }
footer.fot { position:fixed; bottom:0; left:0; right:0; background:#fff; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -2px 10px rgba(0,0,0,.08); z-index:4; }
footer.fot .inner { max-width:560px; margin:0 auto; }
#sammanfattning { font-size:14px; color:var(--gra); margin-bottom:8px; min-height:18px; }
.klar { text-align:center; padding:30px 16px; }
.klar .bock { font-size:64px; }
.klar table { margin:16px auto; border-collapse:collapse; text-align:left; }
.klar td { padding:6px 12px; border-bottom:1px solid #eee; }

/* Admin */
.filter { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; align-items:end; }
.filter label { margin-top:0; }
.filter input, .filter select { font-size:15px; padding:9px; }
.snabbval { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.nyckeltal { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; }
.nyckeltal .ruta { background:#fff; border-radius:14px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.07); }
.nyckeltal .ruta small { display:block; color:var(--gra); font-size:13px; text-transform:uppercase; letter-spacing:.03em; }
.nyckeltal .ruta b { font-size:26px; display:block; margin-top:4px; }
.nyckeltal .ruta span { color:var(--gra); font-size:13px; }
.tabellram { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.lista { width:100%; border-collapse:collapse; font-size:15px; }
table.lista th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--gra); padding:8px; border-bottom:2px solid #eee3d3; white-space:nowrap; }
table.lista td { padding:9px 8px; border-bottom:1px solid #f1eadf; vertical-align:top; }
table.lista tr:hover td { background:#fffaf2; }
table.lista .h { text-align:right; white-space:nowrap; }
table.lista tfoot td { font-weight:700; border-top:2px solid #eee3d3; }
table.lista small { color:var(--gra); }
table.lista input:not([type=checkbox]), table.lista select { font-size:15px; padding:7px; min-width:70px; }
.stapel { height:8px; background:var(--guld); border-radius:4px; min-width:2px; }
.radrubrik { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.radrubrik h2 { margin:6px 0; }
.etikett { display:inline-block; font-size:12px; padding:2px 8px; border-radius:10px; background:#eee; color:#555; }
.etikett.ja { background:#e8f5e9; color:var(--ok); }
.etikett.nej { background:#fdecea; color:var(--fel); }
@media print {
  header.topp, nav.meny, .ingen-utskrift, .flash { display:none !important; }
  body { background:#fff; }
  .kort { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
  main { margin:0; max-width:none; }
}