:root{--ink:#1C1E22;--graphite:#2A2E34;--steel:#565C64;--steel2:#878D96;--line:#D3D7DC;--plate:#E9ECEF;--paper:#F4F6F8;--red:#D71511;--yellow:#FBC314;--green:#4DA50B}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);font-family:Inter,system-ui,sans-serif;color:var(--ink);font-size:15px;line-height:1.4}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}a:hover{border-color:var(--red)}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;border-bottom:1px solid var(--line);background:#fff}
/* Ordmärket (Playbook, Anders 2026-10-02): samma som utrymningsplan-appens BrandMark
   (src/components/BrandMark.tsx, src/brand.css). Ingen egen variant, ingen platta. */
.brand-mark{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-shrink:0;user-select:none}
.brand-word{font-family:Archivo,sans-serif;font-size:18px;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;line-height:1.1}
.brand-word b{font-weight:800}
.brand-word span.light{font-weight:500}
.brand-sub{display:flex;align-items:center;gap:4px}
.brand-sub .stripes{display:flex;gap:1.5px}
.brand-sub .stripes i{display:block;width:3.5px;height:13px;transform:skewX(-16deg)}
.brand-sub .stripes i:nth-child(1){background:var(--red)}
.brand-sub .stripes i:nth-child(2){background:var(--yellow)}
.brand-sub .stripes i:nth-child(3){background:var(--green)}
.brand-sub .txt{font-family:Inter,sans-serif;font-size:12px;font-weight:500;color:var(--steel);letter-spacing:.01em}
.who{font-size:13px;color:var(--steel)}
.who button{margin-left:10px}
main{max-width:1280px;margin:0 auto;padding:32px}
.grind{max-width:520px;text-align:center;padding-top:80px}
.grind p{color:var(--steel);margin:14px 0 22px}
h1{font-family:Archivo,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.01em}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.date{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--steel);margin-top:6px}
.tools{display:flex;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
button{font:inherit;font-weight:600;border-radius:6px;padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
button.primary{background:var(--graphite);color:#fff;border-color:var(--graphite)}
button.small{padding:4px 10px;font-size:12px;font-weight:500}
button:disabled{opacity:.5;cursor:default}
/* Ta bort: röd text, bara för det som inte går att ångra i appen. */
button.fara{color:var(--red);border-color:var(--red)}
button:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:1px}
.hint{font-size:13px;color:var(--steel);min-height:18px;margin-top:10px}
.hint.err{color:var(--red)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
@media (max-width:900px){.cols{grid-template-columns:1fr}main{padding:16px}}
.sec h2{font-family:Archivo,sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);padding-bottom:10px;border-bottom:3px solid var(--graphite);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
.sec h2 span{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--steel);letter-spacing:0;text-transform:none}
.sec.q h2{border-bottom-style:dashed;border-bottom-width:2px;color:var(--steel)}
.sub{font-family:Archivo,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--steel2);margin:20px 0 2px}
.item{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;padding:13px 0;border-bottom:1px solid var(--line)}
.item b{display:block;font-size:17px;font-weight:600}
.item small{display:block;font-size:13px;color:var(--steel);margin-top:2px}
.item small.nxt{color:var(--graphite);margin-top:4px;white-space:pre-line}
.item .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mapp{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel2);margin-top:4px}
.pill{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;padding:6px 12px;border-radius:4px;background:var(--plate);color:var(--ink);text-align:center;min-width:140px}
.pill.red{background:var(--red);color:#fff}.pill.green{background:var(--green);color:#fff}.pill.yellow{background:var(--yellow)}.pill.grey{color:var(--steel)}.pill.blue{background:var(--graphite);color:#fff}
.pill em{display:block;font-style:normal;font-family:Inter,sans-serif;font-size:11px;font-weight:400;opacity:.85;margin-top:2px}
.tom{color:var(--steel2);padding:14px 0;font-size:14px}
.foot{font-size:12px;color:var(--steel2);margin-top:40px;line-height:1.5}
dialog{border:1px solid var(--line);border-radius:8px;padding:22px 24px;width:min(640px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.15)}
/* Mitt på skärmen. Grundregeln *{margin:0} tog bort webbläsarens centrering, så alla
   rutor hamnade uppe till vänster (fel hittat 2026-09-24). Anders: en popup ska vara en
   tydlig egen ruta som poppar upp. */
dialog{margin:auto}
dialog::backdrop{background:rgba(28,30,34,.45)}
dialog h3{font-family:Archivo,sans-serif;font-size:18px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.grid label{display:grid;gap:4px;font-size:13px;color:var(--steel)}
.grid .wide{grid-column:1/-1}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-width:0}
.actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:16px}
.actions .hint{margin:0 auto 0 0}
.item small b.tim{display:inline;font-size:13px;color:var(--ink)}
.col{display:grid;gap:36px;align-content:start}
.mejl{font-size:13px;margin-top:6px;color:var(--graphite);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.et{font-family:"JetBrains Mono",monospace;font-size:11px;padding:2px 8px;border-radius:3px;background:var(--plate);color:var(--steel);text-transform:uppercase;letter-spacing:.04em}
.et.ok{background:var(--green);color:#fff}.et.nej{background:var(--red);color:#fff}.et.oklar{background:var(--yellow);color:var(--ink)}.et.blue{background:var(--graphite);color:#fff;text-transform:none}
select.small{font-size:12px;padding:4px 8px}

/* Färdigt att fakturera – den roliga rutan */
.pill.faktura{position:relative;cursor:pointer;color:#fff;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(135deg,var(--red) 0%,var(--yellow) 50%,var(--green) 100%);
  background-size:200% 200%;animation:fakt-flow 4s ease infinite,fakt-bounce 2.4s ease-in-out infinite;
  box-shadow:0 4px 14px rgba(215,21,17,.25);text-shadow:0 1px 2px rgba(0,0,0,.35);border:2px solid #fff;outline:2px solid var(--yellow)}
.pill.faktura em{color:#fff;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pill.faktura .kr{display:inline-block;background:#fff;color:var(--green);border-radius:50%;width:20px;height:20px;line-height:20px;font-size:11px;font-weight:800;margin-right:6px;text-shadow:none;transform:rotate(-12deg)}
.pill.faktura:hover{transform:scale(1.04)}
@keyframes fakt-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fakt-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Kompakt kort: bara namn, kund, uppdrag, timmar och senaste anteckningen. */
.item small.kund{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel2);margin-top:3px}
/* Kortets vänsterdel måste få krympa. Utan min-width:0 tvingar en lång anteckning
   med white-space:nowrap hela sidan bredare än fönstret (fel hittat 2026-09-09). */
.item>div:first-child{min-width:0}
.item small.ant{color:var(--graphite);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.item .mer,.item .mer small,.item .mapp{overflow-wrap:anywhere}
.item .lankrad{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel2);margin-top:6px}
.item .lankrad a{color:var(--steel);border-bottom:1px solid var(--line)}
.item .lankrad a:hover{border-color:var(--red)}

/* Utfällt läge. "visa mer" växlar till "visa mindre" och försvinner aldrig. */
.item .mer{display:none;margin-top:10px;padding-left:12px;border-left:2px solid var(--line)}
.item.oppen .mer{display:block}
.item .mer small{margin-top:3px}
.item .aldre{margin-top:6px}
.item .aldre small.nxt{white-space:normal;margin-top:4px}

/* Notis när servern har en nyare version än den som visas. */
/* [hidden] måste vinna över display:flex, annars syns notisen alltid. */
.nyver[hidden]{display:none}
.nyver{margin-top:14px;padding:10px 14px;border:1px solid var(--yellow);border-left:4px solid var(--yellow);border-radius:6px;background:#fff;font-size:14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}


/* Telefon: statusrutan och knappen får inte hamna utanför skärmen.
   Kortet blir en kolumn i stället för två (fel hittat 2026-09-09). */
@media (max-width:560px){
  .top{flex-wrap:wrap;gap:8px;padding:14px 16px}
  .item{grid-template-columns:1fr;gap:10px}
  .item .r{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .item .r .pill{min-width:0;flex:1 1 auto}
}

/* Dialogregeln (Anders stående regel): knappraden ska alltid gå att nå utan att
   skrolla, även när fönstret är lågt. Innehållet skrollar i sig självt i stället.
   Fel hittat 2026-09-09: Spara låg utanför fönstret vid 420 px höjd. */
dialog{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
dialog[open]{display:flex;flex-direction:column}
dialog form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
dialog form>h3,dialog form>.hint,dialog form>.actions{flex:0 0 auto}
dialog form>.grid{flex:1 1 auto;overflow-y:auto;min-height:0;padding:2px}

/* Faktaraden direkt under rubriken: status, timmar, deadline, start, kund.
   Det som sällan ändras samlat på ett ställe, så ögat hittar det utan att leta. */
.item small.fakta{margin-top:4px;color:var(--steel);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px}
.item small.fakta i{font-style:normal;color:var(--line)}
.item small.fakta b{font-weight:600;color:var(--graphite)}

/* Projektnummer i faktaraden. Firesafe kräver ett nummer på varje uppdrag –
   saknas det syns det, eftersom det behövs vid fakturering. */
.item small.fakta b.pnr{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  padding:2px 7px;border-radius:3px;background:var(--plate);color:var(--graphite);
  text-transform:uppercase;letter-spacing:.05em}
.item small.fakta b.pnr.saknas{background:#fff;color:var(--steel);border:1px dashed var(--yellow)}

/* Knapp direkt i den gröna beställt-rutan. */
.pill.green .satt{display:block;margin:8px auto 0;padding:4px 12px;font-size:12px;font-weight:600;
  background:#fff;color:var(--green);border:none;border-radius:4px;cursor:pointer}
.pill.green .satt:hover{background:var(--paper)}
.pill.green .satt:disabled{opacity:.6;cursor:default}

/* ---------- Komplettering (Anders 2026-09-12) ----------
   Alla element i högerkolumnen har samma bredd. Höjden får variera. */
.item .r{width:178px}
.item .r>*{width:100%}
.pill{min-width:0}
.item .r button.small{display:flex;align-items:center;justify-content:center;gap:6px}
.ikon{flex:none}

/* De två knapparna hör ihop: en ram, en streckad skiljelinje. */
.kompl{border:1px solid var(--red);border-radius:6px;overflow:hidden;background:#fff}
.kompl .be{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;font-size:12px;font-weight:600;color:var(--red);
  text-decoration:none;border:0;border-bottom:1px dashed var(--red);text-align:center}
.kompl .be:hover{background:#FDF3F3}
.kompl .intenu{display:block;width:100%;padding:5px 10px;font-size:11px;font-weight:500;
  color:var(--red);background:#FDF3F3;border:0;border-radius:0;opacity:.75;cursor:pointer}
.kompl .intenu:hover{opacity:1}
.kompl .intenu:disabled{opacity:.4;cursor:default}

@media (max-width:560px){.item .r{width:auto}.item .r>*{width:auto}.kompl{width:178px}}


/* Faktaradens andra rad: projektnumret ensamt (Anders 2026-09-12). */
.item small.fakta.nr{margin-top:3px}

/* ---------- Förloppsindikator (Anders 2026-09-12) ----------
   Färgen visar hur mycket tid som är kvar: grönt, gult, orange, rött.
   Stapeln fylls mot deadline. Flyttas deadline går den tillbaka. */
.pill.orange{background:#E8820C;color:#fff}
.stapel{display:block;height:4px;margin-top:6px;border-radius:2px;
  background:rgba(255,255,255,.35);overflow:hidden}
.pill.yellow .stapel{background:rgba(28,30,34,.18)}
.stapel i{display:block;height:100%;background:#fff;border-radius:2px}
.pill.yellow .stapel i{background:var(--ink);opacity:.55}


/* Startflaggan: stor duk till vänster, texten bredvid. Uppmätt i webbläsaren –
   den här layouten håller rutans höjd oförändrad ända upp till 48 px flagga,
   medan en inline-flagga växer rutan för varje pixel.
   Vajningen använder samma keyframes-teknik som FAKTURERA-rutan ovan. */
.pill.flaggruta{display:flex;align-items:center;gap:9px;text-align:left}
.pill.flaggruta .flagga{flex:none}
.pill.flaggruta .txt{flex:1;min-width:0}
.pill.flaggruta em{text-align:left}
.flagga .kol{transform-box:fill-box;transform-origin:left center;
  animation:flagg-vaj 1.1s ease-in-out infinite}
.flagga .kol:nth-child(2){animation-delay:.09s}
.flagga .kol:nth-child(3){animation-delay:.18s}
.flagga .kol:nth-child(4){animation-delay:.27s}
@keyframes flagg-vaj{
  0%,100%{transform:translateY(0) scaleY(1) skewY(0deg)}
  25%{transform:translateY(-1.7px) scaleY(1.14) skewY(-3deg)}
  50%{transform:translateY(0) scaleY(1) skewY(0deg)}
  75%{transform:translateY(1.7px) scaleY(.86) skewY(3deg)}}

/* Stillbild för den som valt bort rörelse i systemet. */
@media (prefers-reduced-motion:reduce){.flagga .kol{animation:none}}

/* Rubrikraden i statusrutorna skrivs med versaler (Anders 2026-09-12).
   Underraden med datum och dagar lämnas som den är. */
.pill{text-transform:uppercase}
.pill em{text-transform:none}
/* kr-cirkeln i FAKTURERA-rutan ska stå med gemener som förut. */
.pill.faktura .kr{text-transform:none}

/* ---------- Symboler i statusrutorna (Anders 2026-09-12) ----------
   Symbol i stället för en ny färg, eftersom profilen håller gränssnittet i
   gråskala med rött, gult och grönt som enda accenter. Rörelsen är sparsam:
   de här lägena är lugna och ska inte dra blicken från det som brådskar. */
.pill .ikon{vertical-align:-3px;margin-right:6px}

/* Vilande: tre z som tonar in efter varandra. */
.zzz path{opacity:.25;animation:zzz-puls 3s ease-in-out infinite}
.zzz .z2{animation-delay:.35s}
.zzz .z3{animation-delay:.7s}
@keyframes zzz-puls{0%,60%,100%{opacity:.25}25%{opacity:1}}

/* Väntar på kunden: timglaset vänder sig, med lång paus emellan. */
.timglas{transform-box:fill-box;transform-origin:center;animation:timglas-vand 6s ease-in-out infinite}
@keyframes timglas-vand{0%,70%{transform:rotate(0)}85%,100%{transform:rotate(180deg)}}

/* Väntar på mig: visaren går runt, ett varv i minuten. */
.klocka .visare{transform-box:fill-box;transform-origin:bottom center;
  animation:klocka-tick 60s steps(12) infinite}
@keyframes klocka-tick{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .zzz path,.timglas,.klocka .visare{animation:none}
  .zzz path{opacity:.7}}

/* Knappen Uppdatera OneDrive: symbolen på samma rad som texten. */
#btnLaddaOm{display:inline-flex;align-items:center;gap:7px}
#ikonMapp{display:inline-flex}

/* ---------- Flytt till Kundbanken (Anders 2026-09-11) ---------- */
.item .r button.flytta{border-color:var(--graphite);font-weight:600}
.item .r button.flytta:hover{background:var(--plate)}
/* Knappregeln: en tryckt knapp försvinner aldrig, den blir klar och avstängd. */
.item .r button.klar{background:var(--green);border-color:var(--green);color:#fff;opacity:1}
.item .r button.klar:disabled{opacity:1;cursor:default}
  background:var(--plate);color:var(--graphite);font-size:13px;line-height:1.45}

/* ---------- Väntindikatorn i skyltens stil (Anders 2026-10-28) ----------
   Skylten ritas i app.js efter den godkända förlagan; här finns bara platsen bredvid statusraden. */
.laser{display:flex;align-items:center;gap:12px;min-height:34px}
.laser .hint{margin-top:0}
.hjul{width:34px;height:34px;flex:none}
.hjul[hidden]{display:none}
.hjul svg{display:block;width:100%;height:100%}

/* ---------- Kontaktuppgifter på kortet (Anders 2026-09-18) ----------
   Står statiskt under faktaraden. Telefon och mail är klickbara men ska inte
   skrika: samma grå ton som resten av raden, understrykning först vid hovring. */
.item small.fakta.kontakt{margin-top:3px;gap:0 6px}
.item small.fakta.kontakt .ikon{width:13px;height:13px;color:var(--steel2);flex:none}
.item small.fakta.kontakt a{color:var(--steel);border-bottom:none}
.item small.fakta.kontakt a:hover{color:var(--ink);border-bottom:1px solid var(--line)}

/* ---------- Frågan om projektnummer (Anders 2026-09-21) ----------
   Gul ram, samma bredd som knapparna intill. Gult och inte rött: ingenting är
   fel, appen vet bara inte vilket av numren som gäller. */
.projnr{border:1px solid var(--yellow);border-radius:6px;background:#fff;overflow:hidden}
.projnr .fraga{display:block;padding:5px 10px 3px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--steel)}
.projnr .val{display:block;width:100%;border:none;border-top:1px solid var(--line);border-radius:0;
  padding:6px 10px;font-family:"JetBrains Mono",monospace;font-size:12px;background:#fff;color:var(--ink)}
.projnr .val:hover{background:#FFF8E6}
.projnr .val:disabled{opacity:.4;cursor:default}
/* Klockslag för platsbesöket: två tidsfält på en rad, i dialogen och i den gula rutan. */
.tider{display:flex;align-items:center;gap:6px}.tider input{flex:1;min-width:0}
/* Platsbesöket: datum, tid och adress i en egen ram, så att de syns höra ihop. */
.besokgrupp{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px 12px;margin:0;min-width:0}
/* Inför start: kryssrutan för uppmätning på egen rad, text bredvid rutan. */
.grid .startgrupp label.uppmatning{display:flex;align-items:center;gap:8px;color:var(--graphite)}
.startgrupp label.uppmatning input{width:auto;margin:0}
.besokgrupp legend{padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
/* Tiddagboken: summan överst, en rad per dag. Listan har egen höjdgräns (dialogregeln). */
dialog form>.tidsumma{flex:0 0 auto}
.tidsumma{display:flex;align-items:baseline;gap:10px;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tidsumma span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.tidsumma b{font-family:Archivo,sans-serif;font-size:24px}.tidsumma em{font-style:normal;font-size:13px;color:var(--steel)}
.tidlista{max-height:min(40vh,300px);overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.tidlista table{width:100%;border-collapse:collapse;font-family:"JetBrains Mono",monospace;font-size:13px}
.tidlista th{text-align:left;font-weight:500;color:var(--steel);font-size:11px;padding:6px 10px;border-bottom:1px solid var(--line)}
.tidlista td{padding:6px 10px;border-bottom:1px solid var(--line)}.tidlista tr:last-child td{border-bottom:none}
.tidlista th:last-child,.tidlista td:last-child{text-align:right}
.tidlista .tomrad td{color:var(--steel2);font-family:Inter,sans-serif;text-align:left}
/* Inmatningsraden: alltid synlig längst ned, även när listan rullar. */
.tidlista tfoot td{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:6px 8px}
.tidlista tfoot input{width:100%;padding:5px 8px;font-size:13px}.tidlista tfoot td:last-child input{text-align:right;max-width:90px}
/* Matcha i Spiris: en rad per bankhändelse, knapptrycken som steg. */
#dlgMatcha{width:min(760px,94vw)}
.matchablock{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--paper)}
.matchablock .lbl{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.matchablock ol{margin:6px 0 2px 18px;padding:0;font-size:13px;color:var(--graphite)}.matchablock li{margin:2px 0}
.mrad{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.mrad .bank,.mrad .kvitto,.mrad .steg{grid-column:1}.mrad button{grid-column:2;grid-row:1/4;align-self:center}
.mrad .bank{font-size:14px}.mrad .bank span{color:var(--graphite)}.mrad .belopp{font-family:"JetBrains Mono",monospace;margin-left:6px}
.mrad .kont{grid-column:1;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink)}
.mrad .saknas{color:var(--red)}.mrad .flera{color:var(--steel)}
.mrad .steg{font-size:12px;color:var(--steel)}.mrad .steg i{font-style:normal;margin:0 6px}
.mrad.klar .bank,.mrad.klar .kvitto,.mrad.klar .steg{opacity:.55}
.mrad button.klar{background:var(--green);border-color:var(--green);color:#fff}
.tidfraga .tider{padding:4px 10px 6px;font-size:12px}.tidfraga .tider input{padding:4px 6px;font-size:12px}
@media (max-width:560px){.projnr{width:178px}}

/* ---------- Vilande-listan och väntar-på (Anders 2026-09-24) ----------
   Vilande uppdrag visas bara med namn och två val. Ett beställt uppdrag som
   väntar på kunden säger det längst ned i statusrutan. */
.vil{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.vil .namn{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vil .namn a{border-bottom:none}
.vil button{flex:none}
.pill .vantar{display:block;margin-top:5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
@media (max-width:560px){.vil{flex-wrap:wrap}.vil .namn{flex-basis:100%}}
/* Ramarnas rubriker fälls ihop med ett klick; pilen visar läget. */
.besokgrupp > legend{cursor:pointer;user-select:none}
.besokgrupp > legend::before{content:"▾";display:inline-block;margin-right:6px;transition:transform .15s}
.besokgrupp.stangd > legend::before{transform:rotate(-90deg)}
.grid fieldset.besokgrupp.stangd > :not(legend){display:none}
.besokgrupp.stangd{padding-bottom:4px}
/* Sökrutan överst; i följdfrågan för en vald kund döljs sökfält och lista. */
.tools .sok{width:300px;max-width:100%}
#sekKb{margin:16px 0 24px}
#hamtaInfo{margin-bottom:12px}
#sekKb .etikett{flex:none;font-size:12px;color:var(--steel)}
#frmHamta.forval .grid > label.wide:first-child,#frmHamta.forval .hamtalista{display:none}
@media (max-width:560px){.tools .sok{width:100%}}
/* Hämta från Kundbanken: listan har sin egen höjdgräns, så att knapparna alltid syns (dialogregeln). */
.hamtalista{max-height:min(40vh,320px);overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.grid .hamtalista label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;cursor:pointer}
.grid .hamtalista label:last-child{border-bottom:none}
.hamtalista .namn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hamtalista .etikett{flex:none;font-size:12px;color:var(--steel)}
.hamtalista .tom{padding:10px}

/* ---------- Frågerutan (Anders 2026-09-24) ----------
   Ersätter webbläsarens ja/nej. Texten i vanliga stycken, inte i fältrutnätet. */
#dlgFraga{width:min(520px,92vw)}
.fragatext{display:block}
.fragatext p{margin:0 0 10px;font-size:15px;line-height:1.45;color:var(--graphite)}
.fragatext p:first-child{color:var(--ink);font-weight:500}
/* Fakturaunderlag (Anders 2026-10-23): listorna och kundfakturan liknar Spiris. */
#dlgFaktura{width:min(1200px,96vw)}
#dlgFaktura .fhuvud{display:flex;align-items:center;gap:12px;flex:0 0 auto}#dlgFaktura .fhuvud h3{margin:0 auto 0 0}
#dlgFaktura .grid{display:block}
.fflikar{display:flex;flex-wrap:wrap;margin:10px 0 8px}.fflikar button{border-radius:0;margin-left:-1px;font-weight:500}
.fflikar button.aktiv{background:var(--graphite);border-color:var(--graphite);color:#fff}.fflikar span{font-size:11px;border:1px solid currentColor;border-radius:9px;padding:0 6px;margin-left:4px}
.fsokrad{display:flex;align-items:center;gap:12px;margin-bottom:6px}.fsokrad input{flex:0 1 360px}.fsokrad .hint{margin-left:auto}
.ftabell{width:100%;border-collapse:collapse;font-size:13px}
.ftabell th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);padding:8px;border-bottom:1px solid var(--line)}
.ftabell td{padding:8px;border-bottom:1px dotted var(--line);vertical-align:top}.ftabell td small{display:block;color:var(--steel);font-size:11px}
.ftabell tr[data-oppna]{cursor:pointer}.ftabell tr[data-oppna]:hover td{background:var(--plate)}
.ftabell .oref{background:#FFFBEA}.ftabell .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ftabell .forfallen{color:var(--red);font-weight:600}.ftabell .tom{color:var(--steel)}
.fstatus{font-size:12px;color:var(--steel)}.fstatus.klar{color:var(--green);font-weight:600}
.ffalt{display:grid;grid-template-columns:130px 1fr 130px 1fr;gap:8px 14px;align-items:start;margin:10px 0 14px}
.ffalt label{padding-top:6px;font-size:13px}.ffalt input,.ffalt select{width:100%}.ffalt .bred{grid-column:2/5}
.ffalt small{display:block;color:var(--steel);font-size:11px;margin-top:2px}
.frad input{width:90px;text-align:right}.frad small{display:block;color:var(--steel);font-size:11px;white-space:normal}
.fkallor{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;margin:8px 0}
.ftext{display:grid;grid-template-columns:1fr 300px;gap:16px;margin-top:10px}
.ftext textarea{width:100%;min-height:220px;font:inherit;font-size:14px;line-height:1.6;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.fantekn{background:#EEF4FB;border-radius:6px;padding:10px 12px;font-size:13px}.fantekn>div{white-space:pre-line;margin-top:4px}
.fprisval{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding-top:8px;border-top:1px solid #CFDDEE}.fprisval small{color:var(--steel)}
.favtal{margin-top:10px;padding-top:8px;border-top:1px solid #CFDDEE}
.fsumma{margin:12px 0 0 auto;min-width:300px;font-size:14px}.fsumma td{padding:2px 0}.fsumma .n{text-align:right}
.fsumma tr.tot td{font-weight:700;border-top:1px solid var(--line);padding-top:6px}
.fvarning{color:#6B4E00;background:#FFF4D1;border-radius:6px;padding:8px 10px;font-size:13px;margin-top:10px;display:block}
.fknappar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.fknappar button.klar{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:760px){.ffalt{grid-template-columns:1fr}.ffalt .bred{grid-column:auto}.ftext{grid-template-columns:1fr}}
/* Kortet som just flyttat markeras en stund (Anders 2026-10-24). */
.item.markerad{animation:markerad 3s ease-out}
@keyframes markerad{0%,40%{background:#FFF4D1;box-shadow:0 0 0 3px var(--yellow)}100%{background:transparent;box-shadow:none}}
/* Knappen Fakturaunderlag i samma stil som FAKTURERA! när något väntar på att godkännas (Anders 2026-10-24). */
#btnFaktura.faktura{color:#fff;font-weight:700;letter-spacing:.04em;background:linear-gradient(135deg,var(--red) 0%,var(--yellow) 50%,var(--green) 100%);
  background-size:200% 200%;animation:fakt-flow 4s ease infinite;border:2px solid #fff;outline:2px solid var(--yellow);
  box-shadow:0 4px 14px rgba(215,21,17,.25);text-shadow:0 1px 2px rgba(0,0,0,.35)}
#btnFaktura .kr{display:inline-block;background:#fff;color:var(--green);border-radius:50%;width:18px;height:18px;line-height:18px;font-size:10px;font-weight:800;margin-right:6px;text-align:center;text-shadow:none;transform:rotate(-12deg)}
/* Tydliga fel i fakturan (Anders 2026-10-24): fältet rött, en rad under det, och en ruta över knapparna. */
#dlgFaktura .fel{border-color:var(--red);background:#FFF1F0;outline:2px solid var(--red)}
#dlgFaktura small.felrad{color:var(--red);font-weight:600}
.fstopp{background:#FDE3E3;border-left:4px solid var(--red);color:#7A0E0B;padding:10px 14px;margin-top:12px;font-size:14px}
.fstopp ul{margin:6px 0 0 18px}.fstopp a{color:inherit;border-bottom:1px solid currentColor}
.fprisval label,.fkallor label{display:inline-flex;align-items:center;gap:6px}
.fprisval input[type=radio],.fkallor input[type=radio]{width:auto;margin:0}
/* OneDrive-knappen syns bara när läsningen slutat fungera (Anders 2026-10-24). */
#btnLaddaOm.onedrivefel{background:#FFF4D1;border-color:var(--yellow);color:#6B4E00;font-weight:600}
.pill.klick{cursor:pointer}
/* [hidden] måste vinna över display:inline-flex, annars syns OneDrive-varningen alltid (fel 2026-10-24). */
#btnLaddaOm[hidden]{display:none}
/* Delfakturans period: två datum på en rad (Anders 2026-10-27). */
.ffalt .period{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ffalt .period input{width:auto;flex:1 1 110px;min-width:0}.ffalt .period small{flex-basis:100%}
/* Godkänt fakturaunderlag: guldglans med myntstapel (Anders 2026-10-24, förslag B). */
.pill.guld{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;text-align:left;background:linear-gradient(135deg,#3E8A08,var(--green));color:#fff;border:2px solid #fff;outline:2px solid #FFD54A;box-shadow:0 4px 14px rgba(77,165,11,.35)}
.pill.guld::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-120%);animation:guldglimt 3.5s ease-in-out infinite;pointer-events:none}
@keyframes guldglimt{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.pill.guld .gnista{position:absolute;width:6px;height:6px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:guldblink 2s ease-in-out infinite}
.pill.guld .g1{top:6px;left:32px}.pill.guld .g2{top:26px;left:8px;animation-delay:.7s}.pill.guld .g3{top:8px;left:12px;animation-delay:1.3s}
@keyframes guldblink{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pill.guld::after,.pill.guld .gnista{animation:none;opacity:0}}
/* Godkänt-rutan ryms i kortets smala spalt (178 px): bilderna på en rad överst, texten under (fel 2026-10-24). */
.pill.guld{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"mynt . sedlar hatt" "txt txt txt txt";align-items:end;gap:2px 2px;text-align:left;padding-left:10px;padding-right:10px}
.pill.guld .myntstapel{grid-area:mynt}.pill.guld .sedelbunt{grid-area:sedlar;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.pill.guld .hoghatt{grid-area:hatt;transform:rotate(12deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.pill.guld .txt{grid-area:txt;display:block;margin-top:4px}.pill.guld .txt em{display:block}
/* Uppmaning (pil, färgstark) eller status (lugn) – Anders 2026-10-27. Skicka i Spiris är en länk. */
.pill.spirislank{display:block;text-decoration:none}
.fknappar a.knapp{display:inline-flex;align-items:center;padding:8px 14px;border-radius:6px;font-weight:600;text-decoration:none;border:1px solid var(--graphite)}
.fknappar a.knapp.primary{background:var(--graphite);color:#fff}