/* Automationsfönstret — showcasens dashboard (kopia av showcase-animeringar/inkorg.css, ZAAI Quiet Interface).
   Ritas i 880×587 och skalas till 75 % så att det fyller fönstret på 660×440 i scrollvisningen. */
.ia{
  --ia-bg:#f6f5f3; --ia-yta:#fff; --ia-text:#202020; --ia-sek:#666; --ia-damp:#8e8e8e;
  --ia-kant:rgba(0,0,0,.09); --ia-avd:rgba(0,0,0,.055); --ia-vald:#f1f0ee;
  --ia-bla-bg:#eaf1fe; --ia-bla:#2f5fcf; --ia-ora-bg:#fdf0e3; --ia-ora:#b4560f;
  --ia-gron-bg:#e7f5ec; --ia-gron:#1f7a43; --ia-gra-bg:#f0efed;
  --ia-kurva:cubic-bezier(.2,0,0,1);
  font-family:"Inter",system-ui,sans-serif; font-size:14px; line-height:1.5; color:var(--ia-text);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0;
  position:absolute; left:0; top:0; width:880px; height:587px; overflow:hidden; transform:scale(.75); transform-origin:0 0;
  background:var(--ia-bg); display:flex; flex-direction:column;
  transition:opacity .16s var(--ia-kurva);
}
.ia *{box-sizing:border-box}
.ia svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Fönsterlist */
.ia-bar{height:38px;flex:none;display:flex;align-items:center;gap:7px;padding:0 14px;background:#fbfaf9;border-bottom:1px solid var(--ia-avd)}
.ia-bar i{width:10px;height:10px;border-radius:50%;background:#e2e0dd}
.ia-adress{margin:0 auto;font-size:12px;color:var(--ia-damp);background:var(--ia-gra-bg);border-radius:8px;padding:3px 14px}

/* Sidhuvud */
.ia-huvud{display:flex;align-items:flex-end;justify-content:space-between;padding:18px 20px 14px}
.ia-titel{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0}
.ia-sub{font-size:13px;color:var(--ia-sek);margin:4px 0 0}
.ia-sub b{font-weight:500;color:var(--ia-text);font-variant-numeric:tabular-nums}
.ia-lage{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--ia-gron-bg);color:var(--ia-gron)}
.ia-lage::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Tre kolumner */
.ia-yta{flex:1;min-height:0;display:grid;grid-template-columns:216px minmax(0,1fr) 204px;gap:10px;padding:0 20px 20px}
.ia-kort{background:var(--ia-yta);border:1px solid var(--ia-kant);border-radius:14px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.ia-korthuvud{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.ia-kortetikett{font-size:13px;font-weight:500;color:var(--ia-sek);display:flex;align-items:center;gap:8px}
.ia-raknare{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ia-gra-bg);font-size:12px;font-weight:500;color:var(--ia-text);display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}

/* Listan */
.ia-lista{flex:1;overflow:hidden;border-top:1px solid var(--ia-avd)}
.ia-rad{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--ia-avd);position:relative;transition:background-color .2s var(--ia-kurva)}
.ia-rad.vald{background:var(--ia-vald)}
.ia-rad.vald::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ia-text)}
.ia-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ia-gra-bg);font-size:11px;font-weight:600;color:var(--ia-sek);line-height:1}
.ia-radtext{min-width:0;flex:1}
.ia-radtopp{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ia-namn{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia-tid{font-size:12px;color:var(--ia-damp);white-space:nowrap;font-variant-numeric:tabular-nums}
.ia-amne{font-size:13px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia-utdrag{font-size:12px;color:var(--ia-sek);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ia-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;min-height:0}
.ia-olast{position:absolute;left:7px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--ia-bla);transition:opacity .2s}

/* Badges */
.ia-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.ia-chip svg{width:13px;height:13px}
.ia-chip[data-ton=bla]{background:var(--ia-bla-bg);color:var(--ia-bla)}
.ia-chip[data-ton=ora]{background:var(--ia-ora-bg);color:var(--ia-ora)}
.ia-chip[data-ton=gron]{background:var(--ia-gron-bg);color:var(--ia-gron)}
.ia-chip[data-ton=gra]{background:var(--ia-gra-bg);color:var(--ia-sek)}

/* Mitten: mejlet */
.ia-mitt{display:flex;flex-direction:column;gap:12px;min-height:0}
.ia-mejl{flex:none}
.ia-tom{flex:1;display:grid;place-items:center;font-size:13px;color:var(--ia-damp)}
.ia-mejlinre{padding:16px 18px 18px}
.ia-mejlamne{font-size:15px;font-weight:600;margin:6px 0 2px}
.ia-mejlfran{display:flex;gap:10px;margin-top:12px}
.ia-mejltext{font-size:14px;line-height:1.55;margin-top:2px}
.ia-bilaga{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:28px;padding:0 10px;border:1px solid var(--ia-kant);border-radius:10px;font-size:12px;color:var(--ia-sek)}
.ia-samman{margin-top:12px;border:1px solid var(--ia-kant);border-radius:10px;padding:10px 12px}
.ia-litenrubrik{font-size:12px;font-weight:500;color:var(--ia-sek);margin:0 0 4px;display:flex;align-items:center;gap:6px}
.ia-samman p{margin:0;font-size:13px;line-height:1.5}

/* Svarsförslaget */
.ia-svar .ia-mejlinre{padding:14px 18px 16px}
.ia-svarhuvud{display:flex;justify-content:space-between;align-items:center}
.ia-svartext{margin-top:10px;background:#f7f6f4;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.55;min-height:72px}
.ia-markor{display:inline-block;width:2px;height:15px;background:var(--ia-text);vertical-align:-2px;margin-left:1px;animation:ia-blink 1s steps(1) infinite}
@keyframes ia-blink{50%{opacity:0}}
.ia-svarfot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.ia-grund{font-size:12px;color:var(--ia-damp)}
.ia-knapp{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;border:0;background:#2b2b2b;color:#fafafa;font:500 14px/1 "Inter",system-ui,sans-serif;transition:transform .12s var(--ia-kurva),background-color .15s}
.ia-knapp.tryck{transform:scale(.97);background:#1a1a1a}

/* Höger: underlag + vad som hänt */
.ia-hoger{display:flex;flex-direction:column;gap:12px;min-height:0}
.ia-sektion{padding:0 16px 14px}
.ia-underlag{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--ia-avd)}
.ia-underlag:first-child{border-top:0;padding-top:2px}
.ia-underlag .ia-ikon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ia-sek);flex:none;border:1px solid var(--ia-kant)}
.ia-underlag b{font-weight:500;font-size:13px;display:block}
.ia-underlag span{font-size:12px;color:var(--ia-sek)}
.ia-snurr{width:12px;height:12px;border-radius:50%;border:1.75px solid var(--ia-kant);border-top-color:var(--ia-sek);animation:ia-snurr .8s linear infinite;display:inline-block;vertical-align:-2px;margin-right:4px}
@keyframes ia-snurr{to{transform:rotate(360deg)}}
.ia-steg{list-style:none;margin:0;padding:0}
.ia-steg li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px}
.ia-steg .ia-bock{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--ia-kant);color:transparent;transition:background-color .2s var(--ia-kurva),border-color .2s,color .2s}
.ia-steg .ia-bock svg{width:11px;height:11px;stroke-width:2.4}
.ia-steg li.klar .ia-bock{background:var(--ia-text);border-color:var(--ia-text);color:#fff}
.ia-steg li .ia-stegtext{color:var(--ia-damp);transition:color .2s}
.ia-steg li.klar .ia-stegtext{color:var(--ia-text)}
.ia-steg li .ia-tid{margin-left:auto;opacity:0;transition:opacity .2s}
.ia-steg li.klar .ia-tid{opacity:1}

/* Notis och sluttal */
.ia-notis{position:absolute;right:20px;top:50px;width:280px;background:var(--ia-yta);border:1px solid var(--ia-kant);border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.11);padding:12px 14px;display:flex;gap:10px;z-index:5}
.ia-notis b{font-weight:500;font-size:13px;display:block}
.ia-notis span{font-size:12px;color:var(--ia-sek)}
.ia-notis .ia-ikon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--ia-gra-bg);color:var(--ia-text);flex:none}
.ia-sluttal{position:absolute;right:37px;bottom:37px;width:242px;justify-content:space-between;background:#2b2b2b;color:#fafafa;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 34px rgba(0,0,0,.18);z-index:5;white-space:nowrap}
.ia-sluttal .ia-varde{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ia-sluttal .ia-etik{font-size:12px;color:rgba(250,250,250,.62)}
.ia-sluttal .ia-delare{width:1px;height:30px;background:rgba(255,255,255,.14)}

/* Muspekaren */
.ia-pekare{position:absolute;left:0;top:0;width:20px;height:20px;z-index:6;pointer-events:none;opacity:0;transition:opacity .2s}
.ia-pekare svg{width:20px;height:20px;fill:#202020;stroke:#fff;stroke-width:1.4}

/* Rörelse: 120–240 ms, opacitet + 2–4 px */
.ia-in{animation:ia-in .24s var(--ia-kurva) both}
@keyframes ia-in{from{opacity:0;transform:translateY(4px)}}
.ia-in-hoger{animation:ia-in-h .24s var(--ia-kurva) both}
@keyframes ia-in-h{from{opacity:0;transform:translateX(6px)}}
.ia-ut{animation:ia-ut .2s var(--ia-kurva) both}
@keyframes ia-ut{to{opacity:0;transform:translateY(-3px)}}
.ia-vaxer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ia-kurva)}
.ia-vaxer.oppen{grid-template-rows:1fr}
.ia-vaxer>div{overflow:hidden;min-height:0}
.ia-scen{transition:opacity .3s var(--ia-kurva)}
.ia-scen.tona{opacity:0}

@media (prefers-reduced-motion:reduce){
  .ia *,.ia *::before{animation:none!important;transition:none!important}
}

/* ---------- tillägg för fönstret i scrollvisningen ---------- */
.ia.byter{opacity:0}
.ia-ikon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ia-sek);flex:none;border:1px solid var(--ia-kant);background:#fff}
.ia-ikon img{width:16px;height:16px;object-fit:contain}
.ia-ikon[data-ton=bla]{background:var(--ia-bla-bg);color:var(--ia-bla);border-color:transparent}
.ia-ikon[data-ton=ora]{background:var(--ia-ora-bg);color:var(--ia-ora);border-color:transparent}
.ia-ikon[data-ton=gron]{background:var(--ia-gron-bg);color:var(--ia-gron);border-color:transparent}
.ia-chips:empty{margin-top:0}
.ia-belopp{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
/* fakturan */
.fk{position:relative;margin-top:12px;border:1px solid var(--ia-kant);border-radius:10px;padding:12px 14px;overflow:hidden}
.fk-rad{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;border-top:1px solid var(--ia-avd)}
.fk-rad:first-child{border-top:0;padding-top:0}
.fk-rad span:first-child{color:var(--ia-sek)}
.fk-rad span:last-child{font-variant-numeric:tabular-nums;transition:background-color .2s var(--ia-kurva);border-radius:4px;padding:0 4px;margin:0 -4px}
.fk-rad.lys span:last-child{background:var(--ia-bla-bg)}
.fk-rad.fel span:last-child{background:var(--ia-ora-bg);color:var(--ia-ora);font-weight:500}
.fk-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(47,95,207,.55),transparent);opacity:0}
.fk-varning{margin-top:12px;display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:10px 12px;background:var(--ia-ora-bg);color:var(--ia-ora);font-size:13px;line-height:1.45}
.fk-varning b{font-weight:500;display:block;color:var(--ia-text)}
.fk-varning span{color:var(--ia-sek);font-size:12px}
/* sammanställningen */
.ark{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.ark th:nth-child(1){width:30%}.ark th:nth-child(2){width:22%}.ark th:nth-child(3){width:20%}
.ark td{overflow:hidden;text-overflow:ellipsis}
.ark th{font-weight:500;color:var(--ia-sek);text-align:left;font-size:12px;padding:0 10px 8px 0}
.ark td{padding:8px 10px 8px 0;border-top:1px solid var(--ia-avd);white-space:nowrap}
.ark td.r,.ark th.r{text-align:right}
.ark tr.tom td{color:transparent}
.ark tr.tom td::after{content:"";display:block;height:7px;border-radius:4px;background:#efedea;margin-top:-12px}
/* uppföljningen */
.uf{list-style:none;margin:12px 0 0;padding:0;position:relative}
.uf::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:1.5px;background:var(--ia-avd)}
.uf li{position:relative;display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13px}
.uf li small{display:block;font-size:12px;color:var(--ia-sek)}
.uf li .ia-tid{margin-left:auto}
.uf li .ia-bock{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;border:1.5px solid var(--ia-kant);background:#fff;color:transparent;transition:background-color .2s var(--ia-kurva),border-color .2s,color .2s}
.uf li .ia-bock svg{width:11px;height:11px;stroke-width:2.4}
.uf li.klar .ia-bock{background:var(--ia-text);border-color:var(--ia-text);color:#fff}
.uf li.svar .ia-bock{background:var(--ia-gron);border-color:var(--ia-gron);color:#fff}
.uf li > span:nth-child(2){color:var(--ia-damp);transition:color .2s}
.uf li.klar > span:nth-child(2),.uf li.svar > span:nth-child(2){color:var(--ia-text)}
.citat{margin-top:12px;background:#f7f6f4;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5}
/* rapporten */
.kpier{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{padding:12px 14px}
.kpi span{display:block;font-size:12px;color:var(--ia-sek)}
.kpi b{display:block;margin-top:2px;white-space:nowrap;font-size:18px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* Staplar som reser sig ur ett randigt spår — rörelselabbets statistics-card (21st.dev), i vanilla.
   Stapel för stapel: kolumnen studsar in, fyllningen växer på en fjäder, siffran rullar, etiketten följer den utvalda. */
.sb{display:flex;gap:8px;height:262px;margin-top:4px}
.sb-kol{flex:1;min-width:0;display:flex;flex-direction:column;opacity:0}
.sb-yta{position:relative;flex:1}
.sb-spar{position:relative;height:100%;border-radius:999px;overflow:hidden;background-color:hsl(0 0% 98%);
  background-image:linear-gradient(135deg,hsl(0 0% 94%) 25%,transparent 25.5%,transparent 50%,hsl(0 0% 94%) 50.5%,hsl(0 0% 94%) 75%,transparent 75.5%,transparent);background-size:10px 10px}
.sb-fyll{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:999px;background:rgba(32,32,32,.8);padding:5px;color:#fff;opacity:0}
.sb-kol.utvald .sb-fyll{background:var(--sb-accent)}
.sb-tal{height:28px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:12.5px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-hojd{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none}
.sb-tips{position:absolute;left:50%;bottom:calc(100% + 22px);transform:translateX(-50%);white-space:nowrap;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:500;color:#fff;background:var(--sb-accent);opacity:0}
.sb-tips svg{position:absolute;left:50%;bottom:-7px;width:10px;height:10px;transform:translateX(-50%);color:var(--sb-accent)}
.sb-prick{position:absolute;left:50%;top:-8px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;border:2px solid #fff;background:var(--sb-accent);opacity:0}
.sb-kol p{margin:6px 0 0;text-align:center;font-size:11px;color:var(--ia-damp)}

/* Kvittolådan — kopia av rörelselabbets kvittolada.css (ZAAI Kundportal/stil-lab/src/rorelselabb).
   Fakturan öppnas i en låda och matas ut ur en springa, som ur en kvittoskrivare. */

.kv {
  --kv-ink: #202020;
  --kv-text-2: #666666;
  --kv-text-3: #8e8e8e;
  --kv-border: rgba(0, 0, 0, 0.09);
  --kv-divider: rgba(0, 0, 0, 0.055);
  --kv-subtle: #f3f3f3;
  --kv-klar: #17803d;
  --kv-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  position: var(--kv-position, absolute);
  inset: 0;
  z-index: 20;
  font-family: inherit;
  color: var(--kv-ink);
}


/* Bakgrunden: mjukas ut och dämpas, klick stänger. */
.kv-sloja {
  position: absolute;
  inset: 0;
  background: rgba(110, 110, 110, 0.14);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
  backdrop-filter: blur(7px) saturate(0.9);
}

/* Lådan flyter innanför kanten, som ett eget blad. */
.kv-lada {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(var(--kv-bredd, 400px), calc(100% - 24px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kv-border);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.kv-stang {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--kv-subtle);
  color: var(--kv-ink);
  transition: background 160ms cubic-bezier(.2, 0, 0, 1), transform 160ms cubic-bezier(.2, 0, 0, 1);
}
.kv-stang:hover { background: #ebebeb; }
.kv-stang:active { transform: scale(.94); }

.kv-kropp {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 52px 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none;
}

.kv-huvud {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kv-ikon {
  color: var(--kv-klar);
  display: grid;
  margin-bottom: 14px;
}
.kv-ikon-pil { transform-box: fill-box; }

.kv-rubrik {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.kv-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kv-text-2);
  margin: 6px 0 0;
  max-width: 300px;
  text-wrap: pretty;
}

/* ————— Skrivaren: springa + fönster som papperet matas ut i ————— */

.kv-skrivare {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-top: 26px;
}

.kv-springa {
  position: relative;
  z-index: 2;
  display: block;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(#cfcfcf, #ececec);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 0 #fff;
}

/* Allt ovanför springan klipps bort; åt sidorna och nedåt får skuggan synas. */
.kv-fonster {
  position: relative;
  margin: -2px 7px 0;
  clip-path: inset(0 -40px -60px -40px);
}
/* Springans egen skugga ligger över papperet där det kommer ut. */
.kv-fonster::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.09), transparent);
  pointer-events: none;
}

.kv-papper {
  position: relative;
  background: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.07));
  will-change: transform;
}

/* Tandad nederkant: halvcirklar i papperets färg, skuggan följer med. */
.kv-tandning {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 5px;
  background: radial-gradient(circle at 5px 0, #fff 4.6px, transparent 5px) 0 0 / 10px 5px repeat-x;
}

/* ————— Foten ————— */

.kv-fot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--kv-divider);
  background: #fff;
}

.kv-knapp {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: var(--kv-subtle);
  color: var(--kv-ink);
  transition: background 160ms cubic-bezier(.2, 0, 0, 1), transform 120ms cubic-bezier(.2, 0, 0, 1);
}
.kv-knapp:hover { background: #ebebeb; }
.kv-knapp:active { transform: scale(.97); }
.kv-knapp.is-primar { background: #2b2b2b; color: #fafafa; }
.kv-knapp.is-primar:hover { background: #1a1a1a; }

/* ————— Fakturapapperet (miniatyr) ————— */

.kvp {
  --kvp-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  padding: 16px 16px 14px;
  font-size: 8px;
  line-height: 1.45;
  color: #202020;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.kvp-topp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.kvp-marke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #6b6b6b;
}
.kvp-meta { margin: 0; font-family: var(--kvp-mono); font-size: 6.5px; text-transform: uppercase; }
.kvp-meta div { display: flex; justify-content: flex-end; gap: 6px; }
.kvp-meta dt { color: #8e8e8e; }
.kvp-meta dd { margin: 0; }

.kvp-parter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #f6f6f6;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 14px;
}
.kvp-parter div { display: flex; flex-direction: column; }
.kvp-parter strong { font-weight: 600; margin-bottom: 2px; }
.kvp-parter span { color: #666; font-size: 7px; }
.kvp .kvp-etikett {
  font-family: var(--kvp-mono);
  font-size: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8e8e8e;
  margin-bottom: 3px;
}

.kvp-rader { width: 100%; border-collapse: collapse; }
.kvp-rader th {
  font-family: var(--kvp-mono);
  font-size: 6px;
  font-weight: 400;
  text-transform: uppercase;
  color: #8e8e8e;
  text-align: right;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.kvp-rader th:first-child, .kvp-rader td:first-child { text-align: left; }
.kvp-rader td {
  vertical-align: top;
  text-align: right;
  padding: 7px 0 4px;
  font-family: var(--kvp-mono);
  font-size: 7px;
  color: #444;
}
.kvp-rader td:first-child { font-family: inherit; font-size: 8px; color: #202020; }
.kvp-rader td strong { display: block; font-weight: 500; }
.kvp-rader td span { display: block; color: #666; font-size: 7px; padding-left: 4px; }

.kvp-summa {
  margin-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: 7px;
}
.kvp-summa div { display: flex; justify-content: space-between; color: #666; }
.kvp-summa div span:last-child { font-family: var(--kvp-mono); font-size: 7px; }
.kvp-total { margin-top: 4px; color: #202020 !important; }
.kvp-total strong { font-weight: 600; }
.kvp-total strong:last-child { font-family: var(--kvp-mono); color: var(--kv-klar, #17803d); font-weight: 500; }

.kvp-betala {
  margin-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}
.kvp-betala dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.kvp-betala dl div { display: flex; gap: 6px; }
.kvp-betala dt { font-family: var(--kvp-mono); font-size: 6px; text-transform: uppercase; color: #8e8e8e; min-width: 44px; padding-top: 1px; }
.kvp-betala dd { margin: 0; font-size: 7px; }

.kvp-fotrad {
  margin: 14px 0 0;
  font-family: var(--kvp-mono);
  font-size: 5.6px;
  text-transform: uppercase;
  text-align: center;
  color: #8e8e8e;
  letter-spacing: 0.02em;
}



/* tillägg: avvikelsen markeras på papperet när det landat */
.kvp-total strong:last-child{transition:color .24s cubic-bezier(.2,0,0,1),background-color .24s cubic-bezier(.2,0,0,1);border-radius:2px;padding:0 2px;margin-right:-2px}
.kvp.avviker .kvp-total strong:last-child{color:var(--ia-ora);background:var(--ia-ora-bg)}
.kv-avvik{margin-top:10px}
.ia .kv-ikon svg{width:32px;height:32px}
.ia .kvp-marke svg{width:14px;height:14px}
/* lådan är lägre än i labbet: tätare så att hela fakturan ryms över foten */
.ia .kv-kropp{padding-top:34px}
.ia .kv-skrivare{margin-top:16px}
.ia .kvp-summa{margin-top:12px}

/* ============================================================
   RAPPORTSTEGET — showcasens Ekonomi-flik (stil-lab, demo-showcase.html, uppmätt 2026-10-10):
   samma typsnitt (Inter Variable med opsz), storlekar, vikter, färger, kort och avstånd.
   ============================================================ */
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(typsnitt/inter-latin-ext-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(typsnitt/inter-latin-opsz-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ia.eko{--e-bg:oklch(0.9706 0.0017 67.8);--e-kort:oklch(1 0 0);--e-text:oklch(0.2645 0 0);--e-sek:oklch(0.51 0.024 274.5);--e-kant:oklch(0.9254 0.0017 67.8);--e-titel:color(srgb 0.61522 0.615336 0.615347);
  font-family:"Inter Variable",InterVariable,sans-serif;font-size:14px;line-height:20px;color:var(--e-text);background:var(--e-bg)}
.eko .e-huvud{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:24px 24px 0}
.eko .e-h1{margin:0;font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.01em}
.eko .e-sub{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--e-sek)}
.eko .e-knapp{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--e-kant);background:var(--e-kort);font-size:14px;line-height:20px;font-weight:500}
.eko .e-knapp svg{width:16px;height:16px;color:var(--e-sek);stroke-width:1.5}
.eko .e-yta{flex:1;min-height:0;display:flex;flex-direction:column;gap:24px;padding:24px}
.eko .e-kpier{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eko .e-kort{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:24px;background:var(--e-kort);box-shadow:0 0 0 1px var(--e-kant);overflow:hidden}
.eko .e-kort-topp{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.eko .e-kort-topp svg{width:16px;height:16px;color:var(--e-sek);stroke-width:1.5}
.eko .e-etikett{margin:0;font-size:14px;line-height:20px}
.eko .e-varde{margin:0;font-size:28px;line-height:36px;font-weight:300;font-variant-numeric:tabular-nums;white-space:nowrap}
.eko .e-not{margin:0;font-size:12px;line-height:16px;color:var(--e-sek)}
.eko .e-nere{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px}
.eko .e-titel{margin:0;font-size:17px;line-height:24px;font-weight:400;letter-spacing:-.01em;color:var(--e-titel)}
.eko .e-text{margin:0;font-size:14px;line-height:20px}
.eko .e-rad{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px}
.eko .e-rad span:first-child{color:var(--e-sek)}
.eko .e-rad span:last-child{font-variant-numeric:tabular-nums}
.eko .e-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:24px;padding:0 10px;border-radius:999px;font-size:12px;line-height:12px;color:color(srgb 0.621764 0.258436 0.23177);background:color(srgb 0.983886 0.932282 0.929003)}
.eko .e-badge.klar{color:var(--ia-gron);background:var(--ia-gron-bg)}
.eko .sb{height:auto;flex:1;margin-top:4px}
.eko .sb-kol p{font-size:12px;line-height:16px;color:var(--e-sek);margin-top:6px}
.eko .e-badge svg{width:12px;height:12px}
.ia.eko{width:1020px;height:680px;transform:scale(.6451)} /* större rityta så att showcasens mått ryms; 1020 × .6451 = 658 = fönstrets bredd */

/* ============================================================
   ALLA STEG I SHOWCASENS STIL (2026-10-10) — Ekonomi-fliken som facit:
   Inter Variable, showcasens färger, kort med 24 px rundning och 20 px luft,
   24 px mellan korten, sidrubrik 32/40/400, kortrubriker 17/24 i grått, brödtext 14/20.
   ============================================================ */
.ia.eko{--ia-bg:var(--e-bg);--ia-yta:var(--e-kort);--ia-text:var(--e-text);--ia-sek:var(--e-sek);--ia-damp:color-mix(in oklab,var(--e-sek) 70%,white);
  --ia-kant:var(--e-kant);--ia-avd:color-mix(in oklab,var(--e-kant) 70%,white);--ia-vald:color-mix(in oklab,var(--e-bg) 80%,white);--ia-gra-bg:oklch(0.9612 0 0)}
.eko .ia-huvud{padding:24px 24px 0;align-items:flex-end}
.eko .ia-titel{font-size:32px;line-height:40px;font-weight:400;letter-spacing:-.01em}
.eko .ia-sub{margin-top:4px;font-size:14px;line-height:20px;color:var(--e-sek)}
.eko .ia-sub b{font-weight:400;color:var(--e-sek)}
.eko .ia-yta{grid-template-columns:248px minmax(0,1fr) 248px;gap:24px;padding:24px}
.eko .ia-mitt,.eko .ia-hoger{gap:24px}
.eko .ia-kort{border:0;border-radius:24px;background:var(--e-kort);box-shadow:0 0 0 1px var(--e-kant)}
.eko .ia-korthuvud{padding:20px 20px 12px}
.eko .ia-kortetikett{font-size:17px;line-height:24px;font-weight:400;letter-spacing:-.01em;color:var(--e-titel)}
.eko .ia-raknare{height:22px;min-width:22px;font-size:12px;font-weight:400;color:var(--e-sek);background:oklch(0.9612 0 0)}
.eko .ia-lista{border-top:1px solid var(--ia-avd)}
.eko .ia-rad{padding:12px 20px;gap:12px}
.eko .ia-namn{font-size:14px;line-height:20px;font-weight:400}
.eko .ia-amne{font-size:14px;line-height:20px}
.eko .ia-utdrag,.eko .ia-tid{font-size:12px;line-height:16px;color:var(--e-sek)}
.eko .ia-chips{margin-top:8px}
.eko .ia-chip{height:24px;padding:0 10px;font-size:12px;line-height:12px;font-weight:400;gap:6px}
.eko .ia-chip svg{width:12px;height:12px}
.eko .ia-lage{height:24px;padding:0 10px;font-size:12px;font-weight:400}
.eko .ia-tom{font-size:14px;color:var(--e-sek)}
.eko .ia-mejlinre{padding:20px}
.eko .ia-mejlamne{font-size:17px;line-height:24px;font-weight:400;letter-spacing:-.01em;margin:12px 0 4px}
.eko .ia-mejltext,.eko .ia-samman p{font-size:14px;line-height:20px}
.eko .ia-samman{border-radius:16px;padding:12px 14px}
.eko .ia-litenrubrik{font-size:12px;line-height:16px;font-weight:400;color:var(--e-sek)}
.eko .ia-bilaga{border-radius:8px;font-size:12px}
.eko .ia-sektion{padding:0 20px 20px}
.eko .ia-underlag{padding:12px 0;gap:12px}
.eko .ia-underlag b{font-size:14px;line-height:20px;font-weight:400}
.eko .ia-underlag span{font-size:12px;line-height:16px;color:var(--e-sek)}
.eko .ia-ikon{border-radius:8px;border-color:var(--e-kant)}
.eko .ia-steg li{font-size:14px;line-height:20px;padding:6px 0}
.eko .ia-grund{font-size:12px;line-height:16px;color:var(--e-sek)}
.eko .ia-belopp{font-size:14px;font-weight:400}
/* fakturan, tabellen, uppföljningen */
.eko .fk{border-radius:16px;padding:12px 16px}
.eko .fk-rad{font-size:14px;line-height:20px;padding:6px 0}
.eko .fk-varning{border-radius:16px;font-size:14px;line-height:20px}
.eko .fk-varning b{font-weight:400}
.eko .ark{font-size:14px}
.eko .ark th{font-size:12px;font-weight:400;color:var(--e-sek)}
.eko .uf li{font-size:14px;line-height:20px}
.eko .citat{border-radius:16px;font-size:14px;line-height:20px}