:root{--bg:#fff;--yta:#f4f4f2;--text:#0b0b0c;--dim:#6b6b70;--linje:#e3e3e0;--accent:#1F2A44;--ok:#1f7a4d;--varn:#b4560b;--fel:#b3261e;
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1{font-size:clamp(30px,5vw,52px);line-height:1.02;letter-spacing:-.02em;font-weight:700;margin:.1em 0 .2em;text-transform:uppercase}
h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.muted{color:var(--dim)}.smalt{color:var(--dim);font-size:13px}
.over{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
.over a{text-decoration:none}
code{background:var(--yta);padding:1px 5px;border-radius:3px}

.topp{display:flex;align-items:center;gap:36px;padding:18px clamp(16px,4vw,48px);border-bottom:1px solid var(--linje);position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:10}
.logo img{height:30px;display:block}
.topp nav{display:flex;gap:26px;flex:1}
.topp nav a{text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--dim);padding:6px 0;border-bottom:2px solid transparent}
.topp nav a:hover,.topp nav a.on{color:var(--text);border-color:var(--text)}
.backup{display:flex;align-items:center;gap:12px;font-size:12px}
main{max-width:1280px;margin:0 auto;padding:36px clamp(16px,4vw,48px) 60px;min-height:70vh}
.fot{text-align:center;color:var(--dim);font-size:12px;padding:30px;border-top:1px solid var(--linje)}

.knapp,button.knapp{display:inline-block;background:var(--text);color:#fff;border:1px solid var(--text);padding:12px 22px;font:600 12px var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:2px;transition:.15s}
.knapp:hover{background:#fff;color:var(--text)}
.knapp.sek{background:#fff;color:var(--text)}.knapp.sek:hover{background:var(--text);color:#fff}
.knapp.farlig{background:#fff;color:var(--fel);border-color:var(--fel)}.knapp.farlig:hover{background:var(--fel);color:#fff}
.lank{background:none;border:0;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline}
.lank:hover{color:var(--text)}.lank.farlig:hover{color:var(--fel)}
.knapprad{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.flash{padding:12px 16px;margin-bottom:18px;border-left:3px solid var(--ok);background:var(--yta);font-size:14px}
.flash.fel{border-color:var(--fel)}
.rubrikrad{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}
.flikar{display:flex;gap:28px;border-bottom:1px solid var(--linje);margin-bottom:22px}
.flikar a{padding:10px 0;text-decoration:none;color:var(--dim);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.flikar a.on{color:var(--text);border-color:var(--text)}

.nyckeltal{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--linje);border:1px solid var(--linje);margin:0 0 24px}
.nyckeltal div{background:var(--bg);padding:16px 18px}
.nyckeltal span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.nyckeltal strong{font-size:24px;letter-spacing:-.02em}

.filter{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
input,select,textarea{font:inherit;color:inherit;background:#fff;border:1px solid var(--linje);padding:11px 12px;border-radius:2px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--text);outline-offset:-1px;border-color:var(--text)}
.filter input[type=search]{max-width:380px}
.piller{display:flex;gap:8px;flex-wrap:wrap}
.piller a,.pill{border:1px solid var(--linje);padding:7px 14px;border-radius:99px;text-decoration:none;font-size:13px;background:#fff;color:var(--text);cursor:pointer;font-family:inherit}
.piller a.on,.pill.on{background:var(--text);color:#fff;border-color:var(--text)}
.piller em{font-style:normal;opacity:.6;margin-left:4px}

.rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px 22px}
.kort{text-decoration:none;display:block}
.kort .bild{position:relative;aspect-ratio:4/3;background:var(--yta);overflow:hidden}
.kort .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.kort:hover .bild img{transform:scale(1.04)}
.ingen{display:flex;align-items:center;justify-content:center;height:100%;min-height:120px;color:var(--dim);font-size:13px;background:var(--yta);text-decoration:none;padding:10px;text-align:center}
.status{position:absolute;left:10px;top:10px;background:#fff;color:var(--text);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 9px}
.s-till-salu{background:var(--text);color:#fff}.s-reserverad{background:#e8b100}.s-sald,.s-levererad,.s-klar{background:var(--ok);color:#fff}
.kort .info{padding:12px 0}
.regnr{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 2px;font-weight:600}
.radpris{display:flex;justify-content:space-between;margin-top:6px;font-size:14px}
.radpris .varn{color:var(--varn);font-weight:600}
.tomt{text-align:center;padding:80px 0;color:var(--dim)}

.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;margin:14px 0 28px}
.herobild{aspect-ratio:4/3;background:var(--yta);overflow:hidden}.herobild img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.pris{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:12px 0}
.statusrad{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--linje);border:1px solid var(--linje);margin-bottom:20px}
.fakta div{background:#fff;padding:12px 16px}.fakta span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.anteckning{background:var(--yta);padding:14px 18px;white-space:pre-wrap}
.undernav{display:flex;gap:28px;margin:34px 0 0;border-bottom:1px solid var(--linje);position:sticky;top:67px;background:#fff;z-index:5}
.undernav a{padding:12px 0;text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.block{padding:34px 0 10px;scroll-margin-top:120px}

.skapa,.uppladdning,.inlinerad{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 14px}
.skapa .falt{min-width:240px;flex:1}
.uppladdning{background:var(--yta);padding:16px;align-items:center;margin-top:20px}
.uppladdning input[type=text],.uppladdning select{max-width:300px}
.uppladdning input[type=file]{background:transparent;border:0;padding:0;width:auto;flex:1}
.inlinerad input[type=date]{max-width:170px}.inlinerad input[name=belopp]{max-width:140px}.inlinerad input[name=beskrivning]{flex:1;min-width:200px}

.tabell{width:100%;border-collapse:collapse;margin:14px 0}
.tabell th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:8px 10px;border-bottom:1px solid var(--text)}
.tabell td{padding:11px 10px;border-bottom:1px solid var(--linje);vertical-align:middle}
.tabell .hoger,.tabell td.hoger{text-align:right}
.tagg{font-style:normal;font-size:11px;background:var(--yta);padding:2px 8px;border-radius:99px;margin-left:6px;color:var(--dim)}
.katrub{margin:26px 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.galleri{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.galleri figure{margin:0}.galleri img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;cursor:zoom-in;background:var(--yta)}
.galleri figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:12px;color:var(--dim);padding:5px 0;gap:6px}
.verkt{display:flex;gap:10px;align-items:center}.verkt form{margin:0}

.formulär section{margin-bottom:30px}
.kolumner{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px}
.falt{display:block}.falt span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.falt.hel{grid-column:1/-1}.kryss{display:flex;gap:10px;align-items:center;margin:16px 0;font-size:14px}.kryss input{width:auto}
.lista{list-style:none;padding:0;margin:0}.lista li{padding:9px 0;border-bottom:1px solid var(--linje)}
.radera{margin-top:60px;color:var(--dim);font-size:13px}.radera summary{cursor:pointer}

#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:100;cursor:zoom-out}
#lb.on{display:flex}#lb img{max-width:96vw;max-height:94vh;object-fit:contain}
@media(max-width:820px){.hero{grid-template-columns:1fr}.topp{gap:16px;flex-wrap:wrap}.backup{display:none}.undernav{top:60px}}

.importruta{background:var(--yta);padding:16px 18px;margin:18px 0 28px}
.importruta summary{cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.importruta textarea{margin-top:10px}
.agarebox{background:var(--yta);padding:4px 16px;margin-bottom:22px;border-left:3px solid var(--text)}

.extra{margin:0 0 30px;border-top:1px solid var(--linje);padding-top:16px}
.extra summary{cursor:pointer;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.pubon{color:var(--ok);font-weight:700;text-decoration:none}

.tabell tr.makulerad td{color:var(--dim);text-decoration:line-through}.tabell tr.makulerad td:last-child{text-decoration:none}
.dokver{display:block;font-size:12px;color:var(--dim);margin-top:2px}.tagg.vantar{background:#fff3cd;color:#7a5b00}.ifylld{display:inline-block;margin-right:14px}.ifylld label{cursor:pointer}

.socialrad{display:grid;grid-template-columns:minmax(0,260px) minmax(0,160px) minmax(0,1fr);gap:22px;align-items:start}
.socialrad figure{margin:0}.socialrad img{width:100%;display:block;border:1px solid var(--linje,#ddd)}.socialrad figcaption{margin-top:10px}.socialrad figcaption .knapp{font-size:11px;padding:8px 10px;width:100%;text-align:center;box-sizing:border-box}
.socialtext textarea{width:100%;font:inherit;font-size:14px}
@media (max-width:900px){.socialrad{grid-template-columns:1fr 1fr}.socialtext{grid-column:1/-1}}

/* servicehistorik */
.servpost{border:1px solid var(--linje);border-left:4px solid var(--linje);padding:12px 16px;margin:12px 0;background:#fff}
.servpost header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.servpost-intern{border-left-color:#1f7a4d}.servpost-verifierad{border-left-color:#1F2A44}.servpost-ej,.servpost-saknar_foto{border-left-color:#d79a00}
.tagg.servgron{background:#e3f4ea;color:#1f7a4d}.tagg.servbla{background:#e6e9f2;color:#1F2A44}
.servchip{display:inline-block;background:var(--yta);padding:2px 9px;border-radius:99px;font-size:12px;margin:2px 4px 2px 0}
.servfiler{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}.servfil{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.servfil img{width:96px;height:72px;object-fit:cover;display:block;background:var(--yta);border:1px solid var(--linje)}
.servpdf{display:flex;width:96px;height:72px;align-items:center;justify-content:center;background:var(--yta);border:1px solid var(--linje);font-size:12px;color:var(--dim)}

/* import av servicehistorik: granskning av utkast */
.importruta{border:1px dashed var(--linje);padding:12px 16px;margin:14px 0;background:#fafaf7}
.servutkast{border-left-color:#d79a00;background:#fffdf5}
.utvarn{margin:6px 0;padding:6px 10px;background:#fff4d6;border-left:3px solid #d79a00;font-size:.9rem}
.granska{display:grid;grid-template-columns:minmax(220px,2fr) 3fr;gap:18px;margin-top:10px}
.granska-bild{max-height:640px;overflow:auto;border:1px solid var(--linje);background:#fff;padding:6px}
.granska-bild img{width:100%;display:block;margin-bottom:6px}
.falt.osaker input,.falt.osaker select{background:#fff4d6;border-color:#d79a00}
.utext{white-space:pre-wrap;font-size:.8rem;max-height:220px;overflow:auto;background:#f4f4f0;padding:8px}
@media(max-width:900px){.granska{grid-template-columns:1fr}.granska-bild{max-height:360px}}

.intab{border-collapse:collapse;width:100%;font-size:.92rem}.intab th{text-align:left;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dam,#666);padding:4px 8px;border-bottom:1px solid var(--linje)}.intab td{padding:6px 8px;border-bottom:1px solid var(--linje);vertical-align:top}

/* Flödespanel och flikar på bilsidan */
.flode{margin:28px 0 0;padding:20px 22px;background:#f6f6f3;border:1px solid var(--linje)}.flode h2{margin:0 0 10px;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.flsteg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.flsteg li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--linje)}.flsteg li:first-child{border-top:0}
.flprick{flex:0 0 26px;height:26px;border-radius:50%;border:2px solid #bbb;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#777;background:#fff}
.flsteg li.klar .flprick{background:#1f7a4d;border-color:#1f7a4d;color:#fff}.flsteg li.klar .fltext>strong{color:#777;font-weight:600}
.flsteg li.nasta{background:#fff;margin:6px -10px;padding:12px 10px;border:2px solid var(--text)}.flsteg li.nasta .flprick{border-color:var(--text);color:var(--text)}
.fltext{flex:1}.fltext p{margin:2px 0 8px}.flform{display:inline-block;margin:0}.flmer summary{display:inline;cursor:pointer;font-size:13px}.flmer[open] summary{display:block;margin-bottom:4px}
.flbet{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.flbet label{display:flex;flex-direction:column;font-size:12px;color:#666;gap:2px}
.flvarn{margin:0 0 12px;padding:10px 14px 10px 30px;background:#fff4e0;border-left:3px solid #c77700;font-size:14px}
.undernav a.on{border-bottom:2px solid var(--text);margin-bottom:-1px}
section.block[hidden]{display:none}
.hero .herobild{max-height:300px}.hero .herobild img{max-height:300px}.hero .herobild .ingen{min-height:200px}

.grupp{border:1px solid var(--linje);padding:10px 14px;margin:10px 0;background:#fff}.grupp>summary{cursor:pointer;padding:4px 0}.grupp[open]>summary{margin-bottom:8px}
.subflik{border-top:1px solid var(--linje);padding:12px 0}.subflik>summary{cursor:pointer;list-style:revert}
.achk{list-style:none;margin:6px 0 10px;padding:0}.achk li{padding:5px 0;border-bottom:1px solid var(--linje)}.achk li.ok span{color:#1f7a4d;font-weight:800}.achk li.saknas span{color:#c77700}
.undernav{overflow-x:auto;gap:20px;scrollbar-width:none}.undernav::-webkit-scrollbar{display:none}.undernav a{white-space:nowrap;flex:0 0 auto}
@media(max-width:560px){.undernav a{font-size:11px;letter-spacing:.1em}.undernav{gap:16px}}

/* ---- Ärenden ---- */
.ar-spec{border:1px solid var(--linje);padding:12px 16px;margin:18px 0;background:#fff}.ar-spec>summary{cursor:pointer;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ar-rader{margin:12px 0 6px}.ar-rad{display:grid;grid-template-columns:18px 120px 1fr 80px 110px 120px 28px;gap:8px;align-items:center;margin-bottom:8px}
.ar-val{width:16px;height:16px;margin:0;accent-color:var(--text)}
.ar-markera{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 0}.ar-markera .knapp{padding:7px 12px;font-size:11px}
.ar-rad.ar-markerad{background:#fdf1ef;outline:1px solid #f0c9c4}
.ar-saknar [name=rad_besk]{background:#fff4d6;border-color:#d79a00}
.ar-rad .ar-summa{text-align:right;font-size:14px;white-space:nowrap}.ar-tabort{font-size:16px;text-decoration:none}
.ar-summering{margin-top:10px;max-width:340px;margin-left:auto}.ar-summering div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.ar-summering .tot{border-top:1px solid var(--text);margin-top:4px;padding-top:8px;font-size:16px}
.ar-steg{border:1px solid var(--linje);margin:10px 0;background:#fff}.ar-steg>summary{cursor:pointer;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;list-style:none}
.ar-steg>summary::-webkit-details-marker{display:none}.ar-steg .ar-info{margin-left:auto}
.ar-steg.nasta{border-color:var(--text);border-width:2px}.ar-steg.klar>summary .flprick{background:var(--ok);color:#fff;border-color:var(--ok)}
.ar-kropp{padding:4px 16px 18px}.ar-knappar{margin:14px 0 6px}.ar-knappar form{display:inline}
.ar-godkann{margin-top:14px;padding-top:12px;border-top:1px dashed var(--linje)}
.ar-krysslista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}.ar-krysslista .kryss{margin:6px 0}
.ar-status{font-size:12px;color:var(--dim)}
@media(max-width:700px){
 .ar-rad{grid-template-columns:20px 1fr 1fr;grid-template-areas:"val typ tabort" "besk besk besk" "antal antal apris" "summa summa summa"}
 .ar-rad .ar-val{grid-area:val}
 .ar-rad select{grid-area:typ}.ar-rad [name=rad_besk]{grid-area:besk}.ar-rad [name=rad_antal]{grid-area:antal}.ar-rad [name=rad_apris]{grid-area:apris}
 .ar-rad .ar-summa{grid-area:summa;text-align:left}.ar-rad .ar-tabort{grid-area:tabort;justify-self:end}
 .ar-rad{padding-bottom:10px;border-bottom:1px solid var(--linje)}
 .ar-steg .ar-info{margin-left:0;width:100%}
 .ar-knappar .knapp{flex:1 1 auto;text-align:center}
}
@media(max-width:820px){.topp nav{gap:16px;flex-wrap:wrap;flex:1 1 100%}.topp nav a{font-size:11px;letter-spacing:.1em}}
.ar-verktyg{margin:6px 0 10px}.ar-batch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0;font-size:14px}.ar-batch input{width:70px;display:inline-block}
.ar-intern{grid-column:1/-1;display:none;gap:10px;background:#fbf7ec;border:1px dashed #d79a00;padding:8px 10px;margin-top:-2px}
.ar-intern label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);flex:1 1 120px}.ar-intern input{margin-top:4px}
.ar-visaintern .ar-intern{display:flex;flex-wrap:wrap}
.ar-marginal{margin-top:12px;padding:10px 12px;background:#fbf7ec;border:1px dashed #d79a00;max-width:420px;font-size:14px}.ar-marginal div{display:flex;justify-content:space-between;padding:2px 0}
.ar-imp input{padding:6px 8px}.ar-imp td{padding:6px 4px}

.ar-rad[data-typ="arbete"] .ar-intern{display:none!important}
.ar-tim input,.ar-rabatt input{width:auto;text-align:right}
.ar-rabatt{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:10px}
.ar-summering [hidden]{display:none}
/* rättade layoutfel: block med klassen hel ska spänna över hela raden; knappar lika höga */
.kolumner>.hel{grid-column:1/-1}
.knapprad{align-items:center}
.knapp,button.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;line-height:1.2;text-align:center}
.knapp:disabled,button.knapp[disabled]{opacity:.4;cursor:not-allowed}.knapp:disabled:hover{background:var(--text);color:#fff}
.mejl-hjalp{background:#fff4d6;border:1px solid #d79a00;padding:10px 14px;margin:0}
[hidden]{display:none!important}

/* kontrollista i serviceprotokollet */
.prot-rub{margin:6px 0 2px}
.prot-grupp{margin-top:8px}.prot-grupp>summary{display:flex;gap:10px;align-items:center}
.prot-rakn{margin-left:auto;font-size:12px;color:var(--dim);font-weight:400;letter-spacing:0}
.prot-verktyg{font-size:12px;margin:8px 0 2px}
.prot-rad{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,220px);gap:6px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--linje)}
.prot-rad.int{grid-template-columns:minmax(0,1fr) auto 120px 130px}
.prot-txt{font-size:14px;min-width:0}
.prot-val{display:flex;gap:6px}
.prot-pill input{position:absolute;opacity:0;pointer-events:none}
.prot-pill span{display:inline-block;min-width:52px;text-align:center;padding:8px 10px;border:1px solid var(--linje);background:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;border-radius:2px;user-select:none}
.prot-pill input:checked+span{color:#fff}
.prot-pill.ok input:checked+span{background:#1f7a4d;border-color:#1f7a4d}
.prot-pill.ejok input:checked+span{background:#b3261e;border-color:#b3261e}
.prot-pill.ejakt input:checked+span{background:#6b6b70;border-color:#6b6b70}
.prot-pill input:focus-visible+span{outline:2px solid #1d4ed8;outline-offset:1px}
.prot-kom,.prot-kort{width:100%;min-width:0}
.prot-mv{margin-top:10px}.prot-arbgrp{margin-top:10px}
@media (max-width:640px){.prot-rad,.prot-rad.int{grid-template-columns:1fr 1fr}.prot-txt{grid-column:1/-1;font-weight:600}.prot-val{grid-column:1/-1}.prot-kom{grid-column:1/-1}.prot-pill span{padding:11px 14px;min-width:64px}}
.prot-pill{position:relative;display:inline-block}
@media (max-width:640px){.prot-rad:not(.har) .prot-kom{display:none}.prot-rad{padding:9px 0}}

.mat-varn{background:#fff3cd;border:1px solid #e0b84a;color:#5c4400;padding:10px 14px;border-radius:6px}.mat-varn p{margin:2px 0}

/* Affärsflödet för lagerbilar */
.af-ekonomi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.af-ekonomi>div{background:var(--yta);padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.af-ekonomi span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.af-ekonomi strong{font-size:17px}.af-ekonomi small{font-weight:400;color:var(--dim)}
.af-ekonomi .af-res{background:#e3f4ea}
.af-steg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px;margin:8px 0 6px}
.af-steg a{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--linje);background:#fff;text-decoration:none;color:var(--text);min-width:0}
.af-steg a.on{border:2px solid var(--text);padding:9px 11px}
.af-prick{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--linje);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.af-steg a.klar .af-prick{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
.af-stegtxt{display:flex;flex-direction:column;min-width:0}.af-stegtxt strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase}.af-stegtxt small{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-kontakt{margin:12px 0 18px}.af-kontakt h3,.af-dok h3{margin:0 0 6px;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.af-dok{margin:26px 0 8px}
.af-dokrad{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--linje)}
.af-doktxt{flex:1 1 280px;min-width:0}.af-dokknappar{margin:0}.af-dokknappar form{margin:0}
.af-summa{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.af-summa>div{background:var(--yta);padding:10px 14px;display:flex;flex-direction:column}.af-summa span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}.af-summa strong{font-size:18px}
.af-kost{width:100%;margin:8px 0}.af-kost .hog{text-align:right}.af-kostform{align-items:end;margin-top:10px}
.af-ac{list-style:none;padding:0;margin:10px 0}.af-ac li{padding:6px 0;border-top:1px solid var(--linje)}.af-ac li.ok span:first-child{color:#1f7a4d;font-weight:700}
@media(max-width:640px){.af-steg{grid-template-columns:1fr 1fr}.af-dokrad{align-items:flex-start}}
.pl-bil{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px}
.pl-manuell{margin:4px 0 8px}.pl-manuell>summary{cursor:pointer}
.pl-niva{display:flex;flex-wrap:wrap;gap:0 22px}.pl-niva .kryss{margin:8px 0}
.pl-tillagg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 14px}.pl-tillagg .kryss{margin:6px 0}
.pl-tillagg .kryss input:disabled+*{opacity:.6}
.pl-pris{margin:12px 0 4px;padding:10px 12px;background:var(--yta,#f4f4f2);font-size:14px}.pl-pris.tom{color:var(--dim,#6b6b70)}
.ci-sammanfattning{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:12px 0 16px}
.ci-sammanfattning>div{border:1px solid var(--linje);padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:3px}
.ci-sammanfattning span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ci-sammanfattning strong{font-size:18px;font-variant-numeric:tabular-nums}.ci-sammanfattning small{color:var(--dim);font-size:12px}
.pl-ci{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--varn,#b4560b);background:#fffaf3;font-size:14px}
.pl-tint{display:block;font-size:11px;color:var(--dim);margin-top:1px}
.ci-varning{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--fel,#b3261e);background:#fdf1f0;font-size:14px}
.pl-fr{color:var(--varn,#b4560b)}

/* versioner och publiceringslogg */
.fot a{color:inherit}
.flash.nyver{border-color:var(--accent)}
.publform{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;max-width:900px;margin:0 0 30px}
.publform .falt{flex:1 1 360px;margin:0}
.publlogg details summary{cursor:pointer}
.publlogg details p{margin:6px 0 0;font-size:13px;word-break:break-word}
.vlista{max-width:820px}
.vlista .ver{border-top:1px solid var(--linje);padding:22px 0 8px}
.vlista .ver:first-of-type{border-top:0}
.vlista .ver h2{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.vlista .ver h2 small{font-size:13px;color:var(--dim);font-weight:400}
.vlista .ver .nu{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);font-weight:700}
.vlista h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:18px 0 6px}
.vlista ul{margin:0;padding-left:20px}
.vlista li{margin:5px 0;line-height:1.5}
@media(max-width:640px){
  .publlogg thead{display:none}
  .publlogg,.publlogg tbody{display:block}
  .publlogg tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--linje)}
  .publlogg td{padding:0;border:0;min-width:0}
  .publlogg td:nth-child(1){font-weight:700}
  .publlogg td:nth-child(3){color:var(--dim);font-size:13px}
  .publlogg td:nth-child(4),.publlogg td:nth-child(5){grid-column:1/-1}
  .publlogg td:nth-child(5):empty{display:none}
  .publform .falt{flex-basis:100%}
}

.ff-sammanf span+span::before{content:" · "}
.pl-niva[hidden],.pl-tillagg[hidden]{display:none}
.pl-servicekryss{margin:14px 0 2px}
.pl-hjulbroms{margin-top:14px;padding-top:12px;border-top:1px solid var(--linje)}
/* kalender */
.kal-legend{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:8px 0 14px}
.kal-seg{display:inline-block;font-size:12px;padding:3px 7px;border-radius:2px;margin:2px 4px 2px 0;font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none}
.kal-seg.ledig{background:#e3f1e8;color:#1f5f3c;border:1px solid #9ccdb0}
.kal-seg.forfragan{background:#fff4d6;color:#7a5600;border:1px dashed #d79a00}
.kal-seg.bokad{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.kal-seg.stangd{background:var(--yta);color:var(--dim);border:1px solid var(--linje)}
.kal-veckor{display:grid;gap:10px}
.kal-vecka{display:grid;grid-template-columns:70px repeat(7,minmax(0,1fr));gap:6px;align-items:stretch}
.kal-vnr{margin:6px 0 0;font-weight:700;font-size:13px}.kal-vnr span{display:block;font-weight:400}
.kal-dag{border:1px solid var(--linje);padding:6px;min-height:64px;min-width:0}
.kal-dag.idag{border-color:var(--text)}
.kal-dag.fore{opacity:.35}
.kal-dag.utanfor{background:var(--yta)}
.kal-dag.barahjul{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,var(--yta) 6px,var(--yta) 12px)}
.kal-dnamn{margin:0 0 4px;font-size:12px;font-weight:700}.kal-dnamn::first-letter{text-transform:uppercase}
.kal-tab{overflow-x:auto;max-width:100%}
.kal-form{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:10px 0 0;max-width:1000px}
.kal-form .falt{margin:0}
.kal-dagval{display:flex;flex-wrap:wrap;gap:0 12px;flex-basis:100%}
.kal-inline{display:inline}
.kal-inline select{width:auto;padding:4px 6px}
@media(max-width:900px){.kal-vecka{grid-template-columns:1fr}.kal-vnr{margin-top:10px}.kal-dag{min-height:0}.kal-dag.fore{display:none}}
/* bokning i ärendet */
.ar-tid .ar-onskad{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:6px 0}
.ar-tid form{margin:0}
.ar-tidrub{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 8px}
.ar-tid .ar-tidrub:not(:first-child){margin-top:24px;padding-top:16px;border-top:1px solid var(--linje)}
.ar-delstatus{font-weight:600}
.ar-delstatus.saknas{color:var(--varn)}.ar-delstatus.bestallda{color:var(--accent)}.ar-delstatus.levererade{color:var(--ok)}.ar-delstatus.ej{color:var(--dim);font-weight:400}
.kal-varn{color:var(--fel);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.kal-passerad td{opacity:.6}
.ar-bekr{margin:10px 0 4px;padding:10px 12px;border-left:3px solid var(--varn);background:var(--yta)}
.ar-bekr.klar{border-color:var(--ok)}
.ar-bekr p{margin:0 0 6px}
.ar-bekr .knapprad{margin:6px 0 8px}
/* Sidhuvudet radbryts hellre än blir bredare än fönstret (t.ex. 1280 px med alla menyval). Höjden läses av app.js
   (--topp-h) så att undermenyn i bilen/ärendet fastnar precis under. */
.topp{flex-wrap:wrap;row-gap:6px}.topp nav{flex:1 1 auto;flex-wrap:wrap;row-gap:2px;min-width:0}
.backup{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;row-gap:2px;margin-left:auto}
@media(max-width:1440px){.topp{gap:6px 22px;padding-top:14px;padding-bottom:12px}.topp nav{gap:2px 18px}.topp nav a{letter-spacing:.11em}.backup{gap:2px 10px}}
.undernav{top:var(--topp-h,67px)}
@media(max-width:820px){.topp{position:static}.undernav{top:0}}   /* mobilen: menyn följer inte med när du scrollar, så att mer av sidan syns */
@media(max-width:560px){.tabell td{overflow-wrap:anywhere;padding:10px 6px}}

/* däckblocket (ärende och bilsida) */
.dk{display:grid;gap:8px;margin:6px 0}
.dk-sats>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dk-st{display:inline-flex;gap:6px;flex-wrap:wrap}
.dk-pill{font-size:12px;font-weight:600;padding:2px 8px;border:1px solid var(--linje);border-radius:20px;background:#fff;color:var(--text);text-transform:none;letter-spacing:0}
.dk-pill.dk-gron{background:#e8f4ee;border-color:#b9dcc8;color:var(--ok)}.dk-pill.dk-gul{background:#fff3cd;border-color:#f0d78a;color:#7a5b00}
.dk-pill.dk-rod{background:#fdecea;border-color:#f3b8b3;color:var(--fel)}
.dk-typ{max-width:320px;margin:6px 0}
.dk-tab{display:grid;gap:6px;margin:6px 0}
.dk-rad{display:grid;grid-template-columns:130px minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,.8fr);gap:6px;align-items:center}
.dk-rad input{min-width:0;padding:9px 10px}.dk-f{display:block;min-width:0}.dk-l{display:none}
.dk-huvud span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.dk-pos{font-size:14px;font-weight:600}
.dk-hjalp{margin:4px 0 0}
@media(max-width:760px){.dk-huvud{display:none}.dk-rad{grid-template-columns:1fr 1fr;padding:8px 0;border-top:1px solid var(--linje)}.dk-pos,.dk-f-dim{grid-column:1/-1}.dk-l{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}}
.dk-kort{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin:10px 0 16px}
.dk-kort>div{border:1px solid var(--linje);padding:12px 14px}
.dk-kort h3{margin:0 0 2px;font-size:15px}.dk-kort p{margin:4px 0}
.dk-kort table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}.dk-kort td{padding:4px 6px 4px 0;border-top:1px solid var(--linje)}
/* Skriv ut */
.lank-knapp{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:inherit;text-decoration:underline;cursor:pointer}
dialog.utskrift{border:1px solid var(--linje);padding:22px 24px;width:min(460px,calc(100vw - 32px));max-width:100%}
dialog.utskrift::backdrop{background:rgba(0,0,0,.35)}
dialog.utskrift h2{margin:0 0 12px}
dialog.utskrift form{display:grid;gap:10px}
dialog.utskrift .ut-antal input{max-width:110px}
dialog.utskrift .ut-info{margin:-4px 0 0}
dialog.utskrift .ut-info:empty,dialog.utskrift .ut-svar:empty{display:none}
dialog.utskrift .ut-svar.ok{color:var(--ok)}dialog.utskrift .ut-svar.fel{color:var(--fel)}
dialog.utskrift .kryss{margin:0}

.servdok-rad{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.servdok-rad select{flex:1 1 320px;min-width:0}
.servdok-lista{list-style:none;margin:8px 0 0;padding:0}.servdok-lista li{font-size:14px;margin:4px 0}