:root{
    /* Fjäderkurvan (2026-10-07): snabb start, mjuk landning, ingen studs. Samma som panelerna redan använder. */
    --fjader:cubic-bezier(.32,.72,0,1);
    --accent:#000000;
    --accent-light:#f0f0f0;
    /* TOKENS TILLAGDA 2026-09-15 (genomlysningen). CSS:en bar 148 olika
       fargvarden i en app vars palett ar tio - och 120 av dem var
       hardkodade kopior av en variabel som redan fanns. --accent-dark togs
       bort: den anvandes aldrig och var dessutom samma svarta som --accent.

       --on-accent  text pa svart platta (stod som #fff pa 50 stallen)
       --press      tryckyta, :active
       --border-svag  radskiljare inuti ett kort, svagare an --border
       --warn       en enda varningsfarg (det fanns fem bruna/orangea)
       --warn-bg    dess platta
       --danger-bg  felplattan (det fanns tre roda) */
    --on-accent:#ffffff;
    --press:#f5f6fa;
    --border-svag:#f0f0f2;
    --warn:#8a5a15;
    --warn-bg:#fdf3e7;
    --danger-bg:#fdecea;
    /* Statusfarger: bla planerad/pa vag, gron klar, rod avvikelse. */
    --info:#1565c0;
    --info-bg:#e8f1fc;
    --success-bg:#e5f4ea;
    --danger-soft:#f3b4ab;
    --bg:#f4f4f4;
    --card:#ffffff;
    --text:#111111;
    --muted:#6b6b6b;
    --border:#dcdcdc;
    --danger:#c0392b;
    --success:#0a7d32;
    --radius:18px;
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-top:env(safe-area-inset-top, 0px);
    /* DAGENS PULS (2026-09-29) - det enda morka kortet i appen, med flit:
       det ar forsta man ser och ska lasas pa en halv sekund. */
    --puls-bg:#0c0d10;
    --puls-glow:#262a33;
    --puls-text:#ffffff;
    --puls-muted:rgba(255,255,255,.58);
    --puls-line:rgba(255,255,255,.12);
    --puls-bar:rgba(255,255,255,.22);
    --puls-off:#9dbcff;
    --puls-ord:#86e0ad;
    --puls-varn:#f5c26b;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  /* FOKUSMARKERING (2026-09-15, genomlysningen). Tap-highlight slas av pa
     raden ovan, och sex falt satte outline:none - men ingen av appens
     knappar hade nagon egen fokusstil. Den som navigerar med tangentbord
     sag alltsa inte var hen stod. :focus-visible triggar inte pa musklick,
     sa ingenting forandras for den som pekar. */
  :where(button,a,input,select,textarea,[tabindex]):focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
  }
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;}
  /* APPSKAL (ombyggt 2026-09-03, Mikael: "nedre menyraden blir flytande",
     "flyter när jag scrollar ner lite snabbare"). Tidigare scrollade HELA
     sidan och flikmenyn låg som position:fixed ovanpå. Det är exakt det
     läget där iOS Safari missplacerar fixed-element: efter att tangentbordet
     varit uppe är layoutviewporten förskjuten, och under en snabb
     (momentum-)scroll ritas fixed-element inte om förrän scrollen stannat -
     menyn ser då ut att flyta mitt på skärmen. Tre knuffhack (scrolla 1 px,
     mät visualViewport, släpp fokus) hjälpte inte, för de kan inte tvinga
     fram en ommålning mitt i en pågående momentum-scroll.

     Nu scrollar sidan inte alls: body är exakt en skärm hög, topbar och
     flikmeny är vanliga flödeselement i den, och ALLT innehåll scrollar
     inuti <main>. Då finns inget fixed-element kvar att missplacera -
     samma modell som inbyggda appar och som desktopläget redan använder.
     Desktop (≥900px) återställs till vanlig sidscroll längre ner. */
  body{
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;overflow:hidden;
  }
  /* Svart remsa bakom statusfältet (klocka/wifi/batteri) i den installerade
     appen. Ligger som ett eget fast lager i stället för att färga body,
     så att den täcker även vyer utan topbar (inloggning, installationsrutan)
     och ovanpå modaler. pointer-events:none - den ska aldrig fånga ett klick.
     Höjden är 0 på datorer och i vanliga webbläsarflikar, alltså osynlig där. */
  body::before{
    content:"";position:fixed;top:0;left:0;right:0;height:var(--safe-top);
    background:var(--accent);z-index:60;pointer-events:none;
  }
  a{color:inherit;}
  button{font-family:inherit;}

  /* ---------- Top bar ---------- */
  header.topbar{
    position:relative;flex:none;z-index:20;background:var(--accent);color:var(--on-accent);
    /* calc(14px + safe-top) i toppen så den svarta bakgrunden fortsätter
       ända upp bakom skärmskåran/statusfältet när appen körs installerad
       (fullscreen, ingen webbläsar-chrome) - annars syns --bg (ljusgrå)
       igenom där, vilket ser ut som att svart "tar slut" innan toppen. */
    padding:calc(14px + var(--safe-top)) 16px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
  }
  header.topbar .brand{font-size:18px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  header.topbar .brand small{font-weight:400;font-size:12px;opacity:.8;display:block;}
  header.topbar button.icon-btn{
    background:rgba(255,255,255,.15);border:none;color:var(--on-accent);border-radius:10px;
    padding:10px 14px;font-size:14px;min-height:40px;display:flex;align-items:center;gap:6px;
  }
  header.topbar button.icon-btn:active{background:rgba(255,255,255,.28);}

  main{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:calc(24px + var(--safe-bottom));width:100%;max-width:640px;margin:0 auto;
  }

  /* ---------- Login screen ---------- */
  .login-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;gap:20px;}
  .login-screen .logo{width:220px;max-width:70vw;height:auto;}
  header.topbar .topbar-logo{height:22px;width:auto;display:block;filter:brightness(0) invert(1);}
  .login-screen h1{font-size:22px;margin:4px 0 0;}
  .login-screen p{color:var(--muted);font-size:15px;margin:0;max-width:320px;line-height:1.5;}
  .install-app-icon{border-radius:22%;box-shadow:0 4px 16px rgba(0,0,0,.18);}
  .install-steps{background:var(--accent-light);border-radius:12px;padding:12px 16px;text-align:left;}
  .ms-signin-btn{
    margin-top:12px;display:flex;align-items:center;gap:12px;background:var(--card);color:#1a1d29;
    border:1px solid var(--border);border-radius:10px;padding:14px 22px;font-size:16px;font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.08);min-height:52px;width:100%;max-width:320px;justify-content:center;
  }
  .ms-signin-btn:active{background:#f2f2f2;}
  .ms-logo{width:20px;height:20px;flex-shrink:0;}

  /* ---------- Loading / error states ---------- */
  .state-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;gap:14px;}
  .spinner{width:34px;height:34px;border:3px solid var(--accent-light);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .state-screen p{color:var(--muted);font-size:15px;margin:0;max-width:300px;}
  .state-screen .error-box{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:16px 18px;font-size:14px;max-width:340px;line-height:1.5;}
  .retry-btn{margin-top:6px;background:var(--accent);color:var(--on-accent);border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:600;min-height:44px;}

  /* ---------- Search ---------- */
  .search-wrap{padding:14px 16px 8px;}
  .search-input{
    width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border);
    background:var(--card);font-size:16px;outline:none;
  }
  .search-input:focus{border-color:var(--accent);}
  .list-meta{padding:0 16px 6px;color:var(--muted);font-size:13px;}

  /* ---------- Startmeny (hub) ---------- */
  .hub-wrap{padding:24px 16px 20px;max-width:480px;margin:0 auto;width:100%;}
  .hub-wrap .lead{font-size:16px;color:var(--muted);margin:0 0 22px;}
  .hub-back-row{padding:14px 16px 0;}
  .hub-back-btn{
    background:none;border:none;color:var(--accent);font-size:15px;font-weight:600;
    padding:6px 0;min-height:36px;
  }
  .menu-grid{display:flex;flex-direction:column;gap:14px;}
  .menu-card{
    display:flex;flex-direction:row;align-items:center;gap:16px;text-align:left;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:18px 20px;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(20,20,40,.06);
    text-decoration:none;color:inherit;
  }
  .menu-card:active{background:var(--press);}
  .menu-card-icon{flex-shrink:0;width:42px;display:flex;align-items:center;justify-content:center;}
  .menu-card-icon svg{width:28px;height:28px;}
  .menu-card-text{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;}
  .menu-card-title{font-size:16.5px;font-weight:700;color:var(--text);}
  .menu-card-sub{font-size:13px;color:var(--muted);line-height:1.4;font-weight:400;}

  /* ---------- Customer list ---------- */
  ul.customer-list{list-style:none;margin:0;padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px;}
  /* Kolumnrubrikerna ritas alltid men hör bara hemma i desktopläget (>=900px),
     där kundkorten blir tabellrader - se media-frågan sist i stilmallen. */
  .customer-head{display:none;}
  .customer-card{
    background:var(--card);border-radius:var(--radius);padding:16px;display:flex;align-items:center;
    justify-content:space-between;gap:10px;box-shadow:0 1px 2px rgba(20,20,40,.06);border:1px solid var(--border);
    min-height:60px;
  }
  .customer-card:active{background:var(--press);}
  .customer-card .cname{font-size:16px;font-weight:600;line-height:1.3;}
  .customer-card .cmeta{font-size:13px;color:var(--muted);margin-top:2px;}
  .customer-card .ctrend{font-size:13px;font-weight:700;margin-top:4px;display:flex;align-items:center;gap:3px;}
  .customer-card .ctrend.up{color:var(--success);}
  .customer-card .ctrend.down{color:var(--danger);}
  .customer-card .ctrend.flat{color:var(--muted);}
  .customer-card .ship-flag{
    font-size:12.5px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:6px;
    color:var(--danger);background:var(--danger-bg);border-radius:8px;padding:4px 8px;width:fit-content;
    /* Chippet ar numera en knapp (kvittering, 2026-09-23). 44 px hojd for
       att det ska ga att traffa med tummen, och font:inherit sa knappen
       inte drar in webblasarens egen typografi. */
    border:0;font-family:inherit;text-align:left;
  }
  /* Bara knappvarianten behover tumhojd - en ren informationsflagga pa
     nagon annans kund ska inte ta 44 px i hojd i onodan (2026-09-24). */
  .customer-card button.ship-flag{min-height:44px;cursor:pointer;}
  .customer-card .ship-flag:disabled{opacity:.6;cursor:default;}
  .ship-flag-kv{
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    border:1px solid currentColor;border-radius:6px;padding:3px 7px;opacity:.75;
  }
  .chevron{color:var(--muted);font-size:20px;flex-shrink:0;}
  .empty-state{padding:60px 24px;text-align:center;color:var(--muted);font-size:15px;}

  /* ---------- Summary bar ---------- */
  .summary-bar{padding:14px 16px 4px;display:flex;flex-direction:column;gap:8px;}
  .summary-hero{
    background:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:16px 18px;
    display:flex;flex-direction:column;gap:6px;
  }
  .summary-hero-label{
    display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.72);
  }
  .summary-hero-label .stat-icon{opacity:.85;flex-shrink:0;}
  .summary-hero-sub{font-weight:400;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.55);}
  .summary-hero-value{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.2px;}
  .summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .summary-card{background:var(--card);border-radius:var(--radius);padding:13px 14px;border:1px solid var(--border);}
  .summary-label{
    display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;
  }
  .summary-label .stat-icon{color:var(--muted);flex-shrink:0;}
  .summary-value{font-size:19px;font-weight:700;line-height:1.2;}

  /* ---------- Scope toggle (mina/alla kunder) ---------- */
  .scope-wrap{padding:0 16px 10px;}
  .scope-toggle{display:flex;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;}
  .bdg-tenant-toggle{margin-top:10px;max-width:260px;}
  .bdg-tenant-toggle.hem-lage{max-width:460px;}
  /* Fyra lägen ska rymmas på en mobil: mindre sidomarginal i knapparna, och texten bryts aldrig. */
  .hem-lage button{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding-left:6px;padding-right:6px;}
  /* Brickan på fliken Projekt: antal projekt som väntar på ditt beslut. Röd som en notis i iOS. */
  .hem-bricka{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;
    font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;}
  .hem-bricka[hidden]{display:none;}
  .bdg-tenant-toggle button.active{background:var(--accent);color:var(--on-accent);}
  .scope-toggle button{flex:1;border:none;background:transparent;border-radius:8px;padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;}
  .scope-toggle button.active{background:var(--accent);color:var(--on-accent);}

  /* ---------- Sort + pagination ---------- */
  .sort-wrap{padding:0 16px 8px;display:flex;justify-content:flex-end;}
  .sort-select{border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:16px;background:var(--card);color:var(--text);}
  .pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 4px;gap:10px;}
  .page-btn{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;min-height:40px;}
  .page-btn:disabled{opacity:.4;}
  .page-info{font-size:13px;color:var(--muted);}

  /* ---------- Detail view ---------- */
  .detail-header{padding:18px 16px 4px;}
  .detail-header h2{font-size:21px;margin:0 0 4px;}
  .detail-header .sub{color:var(--muted);font-size:14px;}
  /* "Skapa offert" pa kundkortet (2026-09-09). Ligger i huvudet, inte bland
     sektionerna - det ar en handling, inte en uppgift om kunden. */
  .kund-offert-btn{
    display:inline-flex;align-items:center;gap:8px;margin-top:12px;
    background:var(--accent);color:var(--on-accent);border:none;border-radius:100px;
    padding:9px 16px;font-family:"Inter",sans-serif;font-weight:600;font-size:14px;
    cursor:pointer;min-height:38px;
  }
  .kund-offert-btn:active{opacity:.85;}
  /* Prislistelanken (2026-09-10). Sekundar mot "Skapa offert" - att skriva
     en offert ar det man oftast gor pa ett kundkort, prislistan gor man
     nagon gang per ar. Samma form, tonad. */
  .kund-pris-btn{
    display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 8px;
    background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:100px;
    padding:9px 16px;font-family:"Inter",sans-serif;font-weight:600;font-size:14px;
    cursor:pointer;min-height:38px;
  }
  .kund-pris-btn:active{opacity:.85;}
  .pl-rad{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
    border-bottom:1px solid var(--border);font-size:14px;}
  .pl-rad:last-of-type{border-bottom:none;}
  .pl-rad span{color:var(--muted);font-size:13.5px;flex-shrink:0;}
  .pl-rad strong{font-weight:600;text-align:right;word-break:break-word;}
  .pl-lank{display:flex;gap:8px;align-items:center;margin:14px 0 4px;}
  .pl-lank input{flex:1;min-width:0;border:1px solid var(--border);border-radius:10px;
    padding:11px 12px;font:inherit;font-size:13px;background:var(--bg);color:var(--text);}
  .pl-knappar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
  .pl-knappar button{border-radius:100px;padding:10px 18px;font:inherit;font-weight:600;
    font-size:14px;min-height:40px;cursor:pointer;border:1px solid var(--border);
    background:var(--card);color:var(--text);}
  .pl-knappar button.pl-primar{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .pl-knappar button.pl-fara{color:var(--danger);}
  .pl-knappar button:disabled{opacity:.5;}
  .pl-notis{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.5;}
  .pl-varning{font-size:13px;color:var(--warn);margin:12px 0 0;line-height:1.5;}
  .pl-kryss{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:14px;cursor:pointer;}
  .pl-kryss input{width:18px;height:18px;accent-color:var(--accent);margin:1px 0 0;flex-shrink:0;cursor:pointer;}
  .pl-kryss span small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.45;}
  .pl-lage{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
    border-radius:999px;padding:4px 11px;border:1px solid var(--border);}
  .pl-lage.ar-aktiv{color:#1c7c3f;border-color:#bfe3cc;background:#f2faf5;}
  .pl-lage.ar-av{color:var(--danger);border-color:#f0cdc7;background:#fdf4f2;}
  .pl-larm{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:11px 13px;
    border-radius:12px;background:var(--warn-bg);border:1px solid #f0dcc0;color:var(--warn);
    font-size:13.5px;line-height:1.45;}
  .pl-larm strong{display:block;font-weight:700;}
  /* .back-btn borttagen 2026-09-15. Den skrevs for en svart topbar som inte
     finns langre - color:var(--on-accent) gjorde knappen osynlig, sa varje anropsstalle
     bar en inline-lapp style="color:var(--accent)". Fyra vyer (Frakter,
     Arenden, Att folja upp, Kundkortet) anvander nu .hub-back-row/
     .hub-back-btn som de ovriga tjugo. */

  .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 4px;}
  .kpi-card{background:var(--card);border-radius:var(--radius);padding:16px;border:1px solid var(--border);}
  .kpi-card.wide{grid-column:1 / -1;}
  .kpi-label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
  .kpi-value{font-size:22px;font-weight:700;line-height:1.15;}
  .kpi-value.small{font-size:18px;}
  /* "Andra" under talet, inte bredvid det - se kommentaren vid korten. */
  .kpi-andra{display:block;margin-top:4px;}
  .kpi-change{font-size:13px;font-weight:600;margin-top:4px;}
  .kpi-change.up{color:var(--success);}
  .kpi-change.down{color:var(--danger);}
  .kpi-change.flat{color:var(--text);}

  .section{padding:18px 16px 4px;}
  .section h3{font-size:15px;margin:0 0 10px;color:var(--text);text-transform:uppercase;letter-spacing:.4px;font-size:13px;color:var(--muted);font-weight:700;}
  .info-card{background:var(--card);border-radius:var(--radius);padding:16px;border:1px solid var(--border);}
  .info-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:15px;}
  .info-row:last-child{border-bottom:none;}
  .info-row .ilabel{color:var(--muted);min-width:92px;flex-shrink:0;font-size:13.5px;padding-top:2px;}
  .info-row .ival{flex:1;line-height:1.4;}
  .info-row .ival a{color:var(--accent);text-decoration:none;font-weight:600;}
  #priceLookupResult:empty{display:none;}
  #priceLookupResult{margin-top:8px;}
  .autosuggest-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);
    border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.14);
    max-height:280px;overflow-y:auto;z-index:30;display:none;}
  .autosuggest-list.is-open{display:block;}
  .autosuggest-item{padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:14px;line-height:1.35;}
  .autosuggest-item:last-child{border-bottom:none;}
  .autosuggest-item:hover,.autosuggest-item.is-active{background:var(--accent-light);}
  .autosuggest-item .as-nr{font-weight:700;}
  .autosuggest-item .as-nr .as-tag{font-weight:600;font-size:10.5px;color:var(--muted);border:1px solid var(--border);
    border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:1px;}
  .autosuggest-item .as-desc{color:var(--muted);font-size:12.5px;margin-top:1px;}
  .autosuggest-empty{padding:10px 12px;color:var(--muted);font-size:13.5px;}

  .contact-item,.location-item{padding:10px 0;border-bottom:1px solid var(--border);}
  .contact-item:last-child,.location-item:last-child{border-bottom:none;}
  .contact-name,.location-name{font-weight:600;font-size:15px;}
  .contact-sub,.location-sub{font-size:13.5px;color:var(--muted);margin-top:2px;}
  .contact-sub a{color:var(--accent);text-decoration:none;}

  /* ---------- Uppföljning (anteckningar) ---------- */
  .note-form{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);}
  .note-textarea{
    width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);
    background:var(--card);font-size:16px;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box;
  }
  .note-textarea:focus{border-color:var(--accent);}
  .note-form-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
  .note-date-field{display:flex;flex-direction:column;gap:4px;}
  .note-date-label{font-size:12px;color:var(--muted);font-weight:600;}
  /* 16 px i fälten: under det zoomar iOS in sidan när fältet får fokus, och
     zoomen lämnar den fasta flikmenyn på drift (2026-09-02). */
  .note-date-input{border:1px solid var(--border);border-radius:10px;padding:9px 10px;font-size:16px;background:var(--card);color:var(--text);}
  .note-save-error{font-size:13.5px;color:var(--danger);margin-top:2px;}
  .note-cancel-edit-btn{background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;padding:10px 4px;min-height:40px;}
  .note-item{padding:10px 0;border-bottom:1px solid var(--border);}
  .note-item:last-child{border-bottom:none;}
  .note-item-header{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:4px;}
  .note-item-tilldelad{font-style:normal;font-weight:400;}
  .note-item-author{font-weight:700;color:var(--text);}
  .note-item-text{font-size:14.5px;line-height:1.4;white-space:pre-wrap;}
  .note-item-next{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:4px;}
  .note-item-actions{display:flex;gap:14px;margin-top:6px;}
  .note-item-action{background:none;border:none;padding:0;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;}
  .note-item-action.danger{color:var(--danger);}
  .note-empty{color:var(--muted);font-size:14px;padding:6px 0;}
  .note-form-row2{margin-top:-2px;}
  .note-status-select{border:1px solid var(--border);border-radius:10px;padding:9px 10px;font-size:16px;background:var(--card);color:var(--text);}
  .note-sync-checkbox-label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text);cursor:pointer;padding-top:18px;}
  .note-sync-checkbox-label input{width:16px;height:16px;margin:0;}
  .note-item-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
  .note-status-badge{font-size:11px;font-weight:700;border-radius:8px;padding:2px 7px;letter-spacing:.2px;display:inline-block;}
  .note-status-badge.status-planerad{color:var(--info);background:var(--info-bg);}
  .note-status-badge.status-pagaende{color:var(--warn);background:var(--warn-bg);}
  .note-status-badge.status-avslutad{color:var(--muted);background:var(--accent-light);}
  .note-item-synced{font-size:11.5px;color:var(--accent);font-weight:600;}
  .note-item-offer{font-size:12.5px;color:var(--text);font-weight:600;margin-top:6px;}
  .note-item-contact{font-size:12.5px;color:var(--muted);margin-top:2px;}
  .note-item-contact a{color:var(--accent);text-decoration:none;}
  .note-item-contact a:hover{text-decoration:underline;}

  /* ---------- Att följa upp ---------- */
  .followup-badge{font-size:11.5px;font-weight:700;border-radius:8px;padding:3px 8px;letter-spacing:.2px;}
  /* Kundlistans rad, omarbetad 2026-08-31: omsättning + trend + senaste order. */
  .cbody{min-width:0;flex:1;}
  .cfacts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:3px;}
  .cmoney{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
  .cfacts .ctrend{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
  .cfacts .ctrend.up{color:var(--success);}
  .cfacts .ctrend.down{color:var(--danger);}
  .cfacts .ctrend.flat{color:var(--muted);}
  .clast{font-size:12.5px;color:var(--muted);}
  /* Finsk kund: en liten diskret markör i stället för en flaggemoji - samma
     skäl som att tab-baren använder linjeikoner. Byt till 🇫🇮 om det önskas. */
  .ctag-fi{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;letter-spacing:.5px;
    color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:1px 5px;vertical-align:2px;}
  .summary-card-wide{grid-column:1 / -1;}
  .summary-hero-mine{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:4px;}
  .summary-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;}
  .coffer{font-size:12.5px;color:var(--muted);margin-top:2px;}
  /* TILLAGT 2026-08-31: actionraden under uppföljningskortet (Ring/Mejla). */
  .fu-card{display:flex;flex-direction:column;}
  .fu-actions{display:flex;gap:8px;padding:0 14px 12px;}

  /* ---------- Offertrader i uppföljningskortet (2026-08-31) ---------- */
  .fu-rader-toggle{
    background:none;border:none;border-top:1px solid var(--border);
    font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
    padding:11px 14px;min-height:44px;text-align:left;cursor:pointer;width:100%;
  }
  .fu-rader-toggle:disabled{opacity:.6;}
  .fu-rader{border-top:1px solid var(--border);padding:10px 14px 14px;}
  /* Inuti kundkortets uppföljningskort (2026-09-02): kortet har redan sin
     egen kant och sitt eget indrag, så knappen och rutan går kant i kant. */
  .note-item .fu-rader-toggle{padding-left:0;padding-right:0;margin-top:10px;}
  .note-item .fu-rader{padding-left:0;padding-right:0;}
  .fu-rader-huvud{font-size:12px;color:var(--muted);padding-bottom:8px;}
  /* OFFERTHUVUD OCH SUMMA (Mikael 2026-09-02): etikett/värde-rutnät, samma
     form i toppen (kontakt, märke, leverans, villkor, giltighet) som i
     botten (summa, moms, totalt, TG). Etiketten i små versaler som
     tabellhuvudet, värdet i normal text - en typografisk hierarki i stället
     för fler streck och rutor. Ring- och mejllänkarna är riktiga knappar
     med 36 px höjd: de ska gå att träffa med tummen. */
  .oh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;padding:2px 0 14px;}
  .oh-falt{min-width:0;}
  /* "Byt" vid säljaren (2026-09-15). Liten och grå med flit - fältet ska
     läsas, inte tryckas på av misstag. Träffytan är ändå 28 px hög. */
  .oh-byt{background:none;border:none;padding:2px 6px;margin-left:6px;font:inherit;font-size:12px;font-weight:600;
          color:var(--muted);cursor:pointer;border-radius:6px;min-height:28px;vertical-align:baseline;}
  .oh-byt:hover{background:var(--accent-light);color:var(--text);}
  .oh-byt:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .oh-falt span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
  .oh-falt strong{display:block;font-size:13.5px;font-weight:500;line-height:1.4;overflow-wrap:anywhere;}
  .oh-falt strong em{font-style:normal;color:var(--muted);font-weight:400;}
  .oh-falt.oh-stor strong{font-weight:600;font-size:15px;}
  .oh-lankar{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .oh-lank{
    display:inline-block;line-height:34px;padding:0 12px;border-radius:999px;
    background:var(--accent-light);color:var(--text);text-decoration:none;font-size:12.5px;font-weight:600;
    font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;
  }
  /* Kontakten får hela bredden på telefonen så telefon och e-post ryms bredvid varandra. */
  .oh-falt.oh-kontakt{grid-column:1/-1;}
  /* DEN NYA KONTAKTPERSONEN FAR EN EGEN RAD (rattat 2026-09-23).

     Forsta forsoket la fyra inmatningsfalt inuti kontaktcellen i
     faltrutnatet. Cellen blev fyra ganger sa hog som sina grannar,
     rutnatet slets isar och falten blev sa smala att "Efternamn" inte fick
     plats i sin egen platshallare. Och de syntes ALLTID: .oh-kontaktny satte
     display:grid, vilket vinner over webblasarens [hidden] - sa formularet
     stod uppslaget pa varje order man oppnade.

     Nu ar det ett eget falt som spanner hela bredden och bara finns nar man
     valt att skriva en ny. */
  .oh-falt[hidden],.oh-kontaktny[hidden]{display:none !important;}
  .oh-falt.oh-kontaktny-falt{grid-column:1/-1;}
  .oh-kontaktny{display:flex;flex-wrap:wrap;gap:8px;}
  .oh-kontaktny input{flex:1 1 180px;min-width:0;min-height:44px;
    box-sizing:border-box;font-size:16px;padding:10px 12px;
    border:1px solid var(--border);border-radius:10px;background:var(--card);
    color:var(--text);font-family:inherit;-webkit-appearance:none;appearance:none;}
  @media (max-width:560px){ .oh-kontaktny input{flex:1 1 100%;} }
  .oh-lank:active{opacity:.7;}
  /* ===== INTERNT: filer och flode (2026-09-21) ===== */
  .oi-topp{margin:0 0 16px;font-size:13px;color:var(--muted);}
  .on-internt-flik .oi-flode{background:var(--card);border:1px solid var(--border);
    border-radius:14px;padding:14px 16px;}
  /* VIT BOTTEN, INTE SIDANS GRA (Mikael 2026-09-21: "falten blir graa?").
     Rutorna ritades utan egen bakgrund. Inne i offertvyn satt de i ett vitt
     kort och sag riktiga ut; i skrivytan ligger de direkt pa sidan, och da
     lyste den graa sidbottnen igenom - det sag ut som lasta falt. */
  .oi-filer{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px;
    background:var(--card);}
  .oi-filhuvud{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
  .oi-filhuvud h3{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
  .oi-verktyg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .oi-vaxel{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;}
  .oi-vaxel input{accent-color:var(--accent);width:15px;height:15px;}
  .oi-liten{padding:7px 12px;font-size:13px;border-radius:9px;min-height:0;}
  .oi-valj{display:inline-flex;align-items:center;cursor:pointer;font-weight:600;}
  .oi-fillista{list-style:none;margin:6px 0 0;padding:0;}
  .oi-fillista li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border-svag);}
  .oi-fillista li:first-child{border-top:0;}
  .oi-fillista li.oi-dold{display:none;}
  .oi-ikon{flex:none;width:34px;height:34px;border-radius:9px;background:var(--danger-bg);color:var(--danger);
    display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;}
  .oi-ikon.ar-bild{background:var(--info-bg);color:var(--info);}
  .oi-filnamn{flex:1;min-width:0;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere;}
  .oi-filnamn small{display:block;color:var(--muted);font-size:12px;margin-top:1px;}
  .oi-bort{border:0;background:transparent;font:inherit;font-size:17px;line-height:1;color:var(--muted);
    cursor:pointer;padding:4px 6px;border-radius:8px;flex:none;}
  .oi-bort:hover{color:var(--danger);background:var(--danger-bg);}
  .oi-status{font-size:12.5px;color:var(--muted);padding-top:8px;}
  .oi-status:empty{display:none;}
  .oi-skriv{border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin-bottom:18px;
    background:var(--card);}
  .oi-in{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.5;color:var(--text);
    border:0;background:transparent;resize:vertical;padding:2px 0;}
  .oi-in:focus{outline:none;}
  .oi-skrivfot{display:flex;justify-content:flex-end;margin-top:6px;}
  .oi-flode{list-style:none;margin:0;padding:0;}
  .oi-flode li{position:relative;display:flex;gap:12px;padding:0 0 18px;font-size:14px;line-height:1.5;}
  .oi-flode li::after{content:"";position:absolute;left:15px;top:36px;bottom:0;width:1px;background:var(--border-svag);}
  .oi-flode li:last-child{padding-bottom:0;}
  .oi-flode li:last-child::after{display:none;}
  .oi-kropp{min-width:0;flex:1;padding-top:1px;}
  .oi-flode time{display:block;font-size:12px;color:var(--muted);margin-bottom:1px;font-variant-numeric:tabular-nums;}
  .oi-flode b{font-weight:600;}
  .oi-avatar{flex:none;width:32px;height:32px;border-radius:50%;color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
  .oi-avatar-bild{object-fit:cover;background:var(--accent-light);}
  .oi-bifog{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:var(--muted);
    background:var(--accent-light);border-radius:8px;padding:5px 9px;}
  .oi-lank{border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--muted);
    cursor:pointer;padding:0 2px;text-decoration:underline;}
  .oi-lank:hover{color:var(--text);}
  .oi-lank.ar-fara:hover{color:var(--danger);}

  /* ===== OFFERTVYNS HUVUD (2026-09-21) ===== */
  .ovh{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px 16px 14px;margin:0 16px 14px;}
  /* LÄGRE HUVUD (Mikael 2026-10-08: "offerthuvudet blir väldigt stort, vi borde kunna flytta kontakt,
     referens osv till höger om offert och summa"). Kundnamnet och knapparna delar första raden; offert,
     summa, kontakt, referens, säljare och läget står på en rad under, över hela bredden. Förut låg allt i
     en smal spalt till vänster om knapparna och radbröts, medan ytan under knapparna stod tom.
     På mobilen: namnet, fakta, sedan knapparna - samma ordning som förut. */
  .ovh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:start;}
  .ovh-vem{min-width:0;grid-column:1;grid-row:1;}
  .ovh-knappar{grid-column:2;grid-row:1;}
  .ovh-knappar .ov-knappar{padding:0;}
  .ovh-fakta{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:6px;}
  .ovh-fakta > .ovh-rad{margin-top:0;}
  .ovh-fakta > .ovh-chip{margin-top:0;}
  @media (max-width:760px){
    .ovh-grid{grid-template-columns:minmax(0,1fr);}
    .ovh-knappar{grid-column:1;grid-row:3;width:100%;margin-top:14px;}
    .ovh-knappar .ov-knappar{width:100%;}
    .ovh-fakta{gap:4px 18px;}
  }
  /* Ordervyns knapprad i kortet (2026-09-23). Ligger under chipsen och
     hogerstalls pa bred skarm; pa mobil far knapparna hela bredden, dar
     tummen behover ytan. */
  .ovo-knappar:not(:empty){margin-top:14px;padding-top:12px;
    border-top:1px solid var(--border-svag);}
  .ovo-knappar .ov-knappar{padding:0;justify-content:flex-end;}
  .ovo-knappar .ko-hjalp{margin-top:8px;}
  @media (max-width:560px){
    .ovo-knappar .ov-knappar{justify-content:stretch;}
    .ovo-knappar .ov-knappar .ov-btn{flex:1 1 160px;}
  }
  /* ==================================================================
     AVTALSMODULEN (2026-09-23)

     Egna klasser under av-*, byggda på appens tokens. Rollfärgerna är
     desamma som DELADE KOMPONENTER satte för fel/varning/info - amber för
     "kontrollera det här", rött för "något är sönder", grå platta för
     neutralt besked - men klasserna är egna, eftersom blocket där sätter
     utseende på en namngiven lista av befintliga klasser och inte har
     generiska roller att haka i.

     Mobilen först: inmatningsfälten står på 16 px (under det zoomar iOS in
     vid fokus och sidan hoppar) och varje tryckyta är minst 44 px.
     ================================================================== */

  .av-vy{padding:0 0 28px;}
  .av-topp{display:flex;align-items:center;gap:10px;padding:14px 15px 10px;flex-wrap:wrap;}
  .av-rubrik{flex:1 1 auto;margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;}
  .av-bak,.av-ny{font-family:inherit;font-size:14px;font-weight:600;background:none;
    border:none;color:var(--muted);cursor:pointer;padding:11px 4px;min-height:44px;}
  .av-ny{color:var(--accent);}
  .av-bak:active,.av-ny:active{opacity:.55;}

  /* Vyns enda upphöjda yta. Den bär det som är bråttom - får den sällskap
     av fler färgstarka plattor slutar den betyda något. */
  .av-handelse{margin:0 15px 12px;background:var(--accent);color:var(--on-accent);
    border-radius:var(--radius);padding:16px 17px 15px;}
  .av-h-etik{margin:0 0 9px;font-size:10px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;opacity:.62;}
  .av-h-vad{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.3;}
  .av-h-nar{margin:0 0 14px;font-size:13px;opacity:.78;line-height:1.45;}
  .av-h-rakn{display:flex;align-items:baseline;gap:8px;}
  .av-h-rakn b{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;
    font-variant-numeric:tabular-nums;}
  .av-h-rakn span{font-size:13px;opacity:.78;}

  .av-kort{margin:0 15px 12px;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);overflow:hidden;}
  .av-kort-topp{padding:14px 16px 12px;}
  .av-kort-rubrik{margin:0;padding:14px 16px 0;font-size:11px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
  .av-kort-topp .av-kort-rubrik{padding:0;margin-bottom:10px;}
  /* Underrubrik inuti ett kort - "3 bolag utan fakturering i år" under
     utfallssiffrorna. Behover luft over sig, annars klibbar den fast i
     raden ovanfor (2026-09-23). */
  .av-kort-rubrik-under{padding-top:18px;border-top:1px solid var(--border-svag);
    margin-top:4px;}

  .av-fakta{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;}
  .av-fakta dt{font-size:13px;color:var(--muted);padding:8px 14px 8px 0;
    border-top:1px solid var(--border-svag);}
  .av-fakta dd{font-size:13px;margin:0;padding:8px 0;text-align:right;font-weight:600;
    border-top:1px solid var(--border-svag);font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;}
  .av-fakta dt:first-of-type,.av-fakta dd:first-of-type{border-top:none;}
  .av-svag{font-weight:500;color:var(--muted);}
  .av-tom{font-weight:500;color:var(--muted);}

  .av-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
    padding:3px 9px;border-radius:999px;white-space:nowrap;}
  .av-chip-ok{background:var(--success-bg);color:var(--success);}
  .av-chip-varn{background:var(--warn-bg);color:var(--warn);}
  .av-chip-fel{background:var(--danger-bg);color:var(--danger);}
  .av-chip-neutral{background:var(--press);color:var(--muted);}
  .av-chip-svart{background:var(--accent);color:var(--on-accent);}
  /* RAMAVTALSCHIPET SAKNADE FARG (rattat 2026-09-23). Kundkortet satte
     av-chip-info pa "Ramavtal", men klassen fanns aldrig i CSS:en - chipet
     ritades som naken text mitt bland fargade syskon. */
  .av-chip-info{background:var(--info-bg);color:var(--info);}

  /* ==================================================================
     AVTALSREMSAN - samma remsa dar affaren skrivs.

     Mikael 2026-09-23: "Avtalsvillkor borde vara synligt globalt i crm."
     Kompakt med flit: den ska rymmas ovanfor raderna utan att trycka undan
     dem, och svara pa vad som GALLER - inte upprepa avtalsvyn.
     ================================================================== */
  /* ==================================================================
     AVTALSCHIPET, bredvid kreditchipet.

     Mikael 2026-09-23: "det kanske bara racker med ett 'Avtalschip' bredvid
     kreditchippet ... och att man far ga in pa avtalsfliken for att lasa
     ingaende."

     Hade ratt. Remsan sa samma sak som fliken, bara samre och hogre upp -
     tva rader villkor som anda inte rackte for att prissatta pa. Kvar ar
     det enda som maste synas UTAN att man klickar: att kunden har ett
     avtal, och om nagon frist ar pa vag in. Chipet leder till fliken.

     Ingen prick, till skillnad fran kreditchipet - tva likadana pillar
     bredvid varandra lasas som samma sorts uppgift, och det ar de inte.
     ================================================================== */
  .av-chip-hal:empty{display:none;}
  .ovh-avtal{
    display:inline-flex;align-items:center;border:0;font:inherit;
    font-size:12.5px;font-weight:500;line-height:1.3;padding:5px 11px;
    border-radius:999px;background:var(--accent-light);color:var(--muted);
    text-align:left;cursor:pointer;
  }
  .ovh-avtal.ar-varn{background:var(--warn-bg);color:var(--warn);}
  .ovh-avtal.ar-fel{background:var(--danger-bg);color:var(--danger);}
  .ovh-avtal:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  button.ovh-avtal:active{filter:brightness(.95);}
  /* TUMGREPPET AR ETT UNDANTAG HAR, medvetet. Chipet star bredvid
     kreditchipet och maste vara lika stort - en 44 px hog pilla bredvid en
     26 px hog ser trasig ut. Ett forsok med en osynlig 44 px-zon runt
     knappen gjorde det varre: zonen lag over metaraden under, sa ett tryck
     pa "Offert 400080" oppnade avtalsfliken. Fliken sjalv ar ett fullstort
     mal, och den ar vagen dit man faktiskt ska. */
  .ovh-avtal{min-height:26px;}

  /* ---- sammanfattningen bakom avtalsfliken ---- */
  .av-sam + .av-sam{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);}
  .av-sam-topp{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
  .av-sam-namn{margin:0;font-size:17px;font-weight:600;letter-spacing:-0.01em;}
  .av-sam-under{font-size:13px;color:var(--muted);margin-bottom:12px;}
  .av-sam-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
  .av-sam h4{margin:16px 0 7px;font-size:12px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);}
  .av-sam dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;margin:0;}
  .av-sam dt{padding:7px 12px 7px 0;font-size:13px;color:var(--muted);
    border-top:1px solid var(--border);}
  .av-sam dd{padding:7px 0;margin:0;font-size:13.5px;border-top:1px solid var(--border);
    overflow-wrap:anywhere;}
  .av-sam dt:first-of-type,.av-sam dd:first-of-type{border-top:none;}
  .av-sam-punkt{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--border);
    font-size:13.5px;}
  .av-sam-punkt:first-of-type{border-top:none;}
  .av-sam-punkt .txt{min-width:0;flex:1;}
  .av-sam-punkt small{display:block;margin-top:2px;font-size:12px;color:var(--muted);}
  .av-sam-varn{border:1px solid var(--danger);border-radius:10px;padding:10px 12px;
    font-size:13px;background:var(--danger-bg);color:var(--danger);}
  .av-sam-varn b{display:block;margin-bottom:3px;}
  .av-sam-oppna{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
    min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:10px;
    background:var(--card);font:inherit;font-size:14px;font-weight:600;
    color:inherit;cursor:pointer;}
  .av-sam-oppna:active{background:var(--press);}
  @media (max-width:520px){
    .av-sam dl{grid-template-columns:1fr;}
    .av-sam dt{padding-bottom:0;border-top:1px solid var(--border);}
    .av-sam dd{padding-top:2px;border-top:none;}
    .av-sam-oppna{width:100%;justify-content:center;}
  }

  .av-lista{display:block;}
  .av-rad{display:block;width:100%;text-align:left;font-family:inherit;background:none;
    border:none;border-top:1px solid var(--border-svag);padding:14px 16px;cursor:pointer;
    color:inherit;}
  .av-rad:first-child{border-top:none;}
  .av-rad:active{background:var(--press);}
  .av-rad-last{cursor:default;}
  .av-rad-1{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;}
  .av-rad-namn{font-size:15px;font-weight:700;letter-spacing:-.015em;}
  .av-rad-2{font-size:12px;color:var(--muted);margin-bottom:8px;}
  .av-rad-3{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

  .av-kvitt{margin-left:auto;flex:none;border:1px solid var(--line,#d0d0d0);background:#fff;color:#000;border-radius:999px;padding:7px 14px;font:600 13px inherit;font-family:inherit;cursor:pointer;}
  .av-frist{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;
    border-top:1px solid var(--border-svag);font-size:13px;}
  .av-frist-txt{flex:1;min-width:0;}
  .av-frist-txt small{display:block;color:var(--muted);font-size:11px;margin-top:2px;
    line-height:1.45;}

  .av-bolag{display:flex;align-items:center;gap:10px;padding:10px 16px;
    border-top:1px solid var(--border-svag);}
  .av-bolag-namn{flex:1;min-width:0;font-size:13px;font-weight:600;}
  .av-bolag-namn small{display:block;font-weight:400;font-size:11px;color:var(--muted);
    margin-top:1px;}

  .av-fonster{padding:12px 16px;border-top:1px solid var(--border-svag);}
  .av-f-rad1{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
  .av-f-dat{font-size:14px;font-weight:700;letter-spacing:-.01em;}
  .av-f-txt{margin:0;font-size:12px;color:var(--muted);line-height:1.5;}
  .av-f-format{margin-top:5px;}

  .av-not{padding:11px 16px;font-size:11px;line-height:1.5;color:var(--muted);
    border-top:1px solid var(--border-svag);}
  .av-not-fel{background:var(--danger-bg);color:var(--danger);}

  /* Rollplattorna, samma tre roller som resten av appen. */
  .av-info{margin:0 15px 12px;padding:13px 15px;background:var(--press);
    border-radius:14px;font-size:13.5px;color:var(--muted);line-height:1.5;}
  .av-varning{margin:0 15px 12px;padding:13px 15px;background:var(--warn-bg);
    border-radius:14px;font-size:13.5px;color:var(--warn);line-height:1.5;}
  .av-fel{margin:0 15px 12px;padding:13px 15px;background:var(--danger-bg);
    border-radius:14px;font-size:13.5px;color:var(--danger);line-height:1.5;font-weight:600;}

  .av-knapprad{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap;}
  .av-btn{flex:1 1 150px;text-align:center;font-family:inherit;font-size:14px;
    font-weight:600;padding:12px 14px;min-height:44px;border-radius:12px;
    border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;}
  .av-btn-primar{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .av-btn-fara{color:var(--danger);border-color:var(--danger-soft);}
  .av-btn:active{opacity:.6;}

  .av-lank{font-family:inherit;font-size:12px;font-weight:600;background:none;border:none;
    color:var(--accent);cursor:pointer;padding:11px 6px;min-height:44px;white-space:nowrap;}
  .av-lank-fara{color:var(--danger);}
  .av-lank:active{opacity:.55;}
  /* Filväljaren göms men får inte försvinna ur tabbordningen - etiketten är
     tryckytan, och den måste kunna nås med tangentbord. */
  .av-fil-dold{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

  /* --- Formuläret --- */
  .av-falt{margin:0 0 12px;}
  .av-falt label{display:block;font-size:12px;font-weight:600;color:var(--muted);
    margin-bottom:5px;}
  .av-falt input,.av-falt select,.av-falt textarea{
    width:100%;font-family:inherit;font-size:16px;padding:11px 12px;min-height:44px;
    border:1px solid var(--border);border-radius:11px;background:var(--card);
    color:var(--text);-webkit-appearance:none;appearance:none;}
  .av-falt textarea{min-height:76px;line-height:1.5;resize:vertical;}
  .av-falt select{background-image:none;}
  .av-falt small{display:block;margin-top:5px;font-size:11px;color:var(--muted);line-height:1.45;}
  .av-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;
    font-size:14px;cursor:pointer;}
  .av-check input{width:20px;height:20px;flex:0 0 auto;margin:0;}
  .av-checklista{padding:4px 16px 12px;}
  .av-rader{display:block;}
  .av-radblock{padding:14px 16px;border-top:1px solid var(--border-svag);}
  .av-radkalla{margin:0 0 10px;}

  /* Slappytan. Streckad ram sager "har kan nagot lamnas" utan att se ut som
     en knapp - och hela ytan ar tryckbar, vilket pa mobil ar hela poangen
     eftersom man dar inte drar och slapper utan trycker. */
  /* Avtalsrutan pa kundkortet. Kundkortet har egen yttermarginal, sa kortet
     far ingen har - annars hamnar det indraget mot sina grannar. */
  /* Kundkopplingen i formularet. */
  .av-koppla{margin:0 0 14px;padding:12px;background:var(--press);border-radius:12px;}
  .av-kopplad{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:44px;}
  .av-kopplad-namn{flex:1;min-width:0;font-size:13px;font-weight:600;
    font-variant-numeric:tabular-nums;}
  .av-forslag{margin:0 0 12px;}
  .av-forslag-etik{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
  .av-forslag-knapp{display:block;width:100%;text-align:left;font-family:inherit;
    background:var(--card);border:1px solid var(--border);border-radius:11px;
    padding:10px 12px;margin-bottom:6px;min-height:44px;cursor:pointer;color:inherit;}
  .av-forslag-knapp b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;}
  .av-forslag-knapp small{display:block;font-size:11px;color:var(--muted);margin-top:2px;
    font-variant-numeric:tabular-nums;}
  .av-forslag-knapp:active{background:var(--press);}
  .av-koppla .av-falt{margin-bottom:0;}
  .av-kundtraffar:not(:empty){margin-top:10px;}
  .av-kundtraffar .av-not{padding:8px 0 0;border-top:none;}

  .av-kort-kund{margin:0 0 14px;}
  .av-kund-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .av-kund-rad{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
    font-family:inherit;font-size:13px;color:inherit;background:none;border:none;
    border-top:1px solid var(--border-svag);padding:12px 16px;min-height:44px;cursor:pointer;}
  .av-kund-rad:active{background:var(--press);}
  .av-kund-pil{color:var(--muted);font-size:15px;}

  .av-slapp{margin:12px 16px 4px;padding:22px 16px;border:2px dashed var(--border);
    border-radius:14px;text-align:center;cursor:pointer;background:var(--press);
    min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:4px;}
  .av-slapp b{font-size:14px;font-weight:700;letter-spacing:-.01em;}
  .av-slapp span{font-size:12px;color:var(--muted);}
  .av-slapp-over{border-color:var(--accent);background:var(--card);}
  .av-slapp:active{opacity:.7;}

  /* Kallhanvisningen vid ett falt. Liten och gra - den ska ga att lasa nar
     man tvivlar pa ett varde, inte tavla med etiketten. */
  .av-kalla{display:inline-block;font-size:10px;font-weight:600;color:var(--muted);
    background:var(--press);border-radius:999px;padding:2px 7px;margin-left:6px;
    text-transform:none;letter-spacing:0;vertical-align:middle;}

  @media (min-width:700px){
    .av-vy{max-width:760px;margin:0 auto;}
  }

  .ovh-namnrad{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px;}
  .ovh-kredit{
    display:inline-flex;align-items:center;gap:6px;border:0;font:inherit;flex:none;
    font-size:12.5px;font-weight:500;line-height:1;padding:5px 11px 5px 9px;border-radius:999px;cursor:pointer;
    background:var(--accent-light);color:var(--muted);
  }
  .ovh-kredit::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
  .ovh-kredit.ar-vantar{opacity:.55;cursor:default;}
  .ovh-kredit.kk-risk-gron{background:var(--success-bg);color:var(--success);}
  .ovh-kredit.kk-risk-gul{background:var(--warn-bg);color:var(--warn);}
  .ovh-kredit.kk-risk-rod{background:var(--danger-bg);color:var(--danger);}
  .ovh-kund{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.015em;line-height:1.25;overflow-wrap:anywhere;}
  .ovh-meta{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 7px;align-items:baseline;font-variant-numeric:tabular-nums;}
  .ovh-meta b{color:var(--text);font-weight:600;}
  .ovh-rad{margin-top:4px;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 7px;}
  .ovh-rad:empty{display:none;}
  .ovh-rad b{color:var(--text);font-weight:500;}
  .ovh-meta i,.ovh-rad i{font-style:normal;color:var(--border);}
  .ovh-chip{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 11px 5px 9px;
    border-radius:999px;font-size:12.5px;font-weight:500;line-height:1;background:var(--accent-light);color:var(--muted);}
  .ovh-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
  .ovh-chip.ar-skickad{background:var(--success-bg);color:var(--success);}
  .ovh-chip.ar-av{background:var(--warn-bg);color:var(--warn);}
  .ovh-chip.ar-order{background:var(--info-bg);color:var(--info);}
  /* I offert- OCH ordervyn star knappraden och flikarna direkt pa sidan,
     inte i ett utfallt kort - da behover de samma sidmarginal som huvudet.
     BADA IDNA I SAMMA REGEL (2026-09-22): ordervyn ar byggd pa samma delar
     och ska inte ha en egen uppsattning som kan glida isar fran den har. */
  #ovKropp, #ovoKropp{padding:0 16px;}
  /* RADERNA BOR PA VITT (Mikael 2026-09-21: "Varfor blir det vitt pa sidorna
     som fejdar in i grat?"). .fu-rader-scroll har en skrollhint i bada
     kanterna - tva vita toningar som sager att tabellen gar att dra i sidled.
     Den ar osynlig inne i ett vitt kort, vilket ar dar tabellen alltid har
     legat. I offertvyn lag den direkt pa den gra sidan, och da syntes
     toningarna som tva vita flackar. Flikarna och innehallet far darfor ett
     eget kort, precis som huvudet - knappraden star kvar utanfor.

     SAMMA SAK I ORDERVYN (Mikael 2026-09-22: "Men hur ar designen pa rader??
     Grat och nagot vitt i kanten?"). Exakt samma fel, exakt samma orsak -
     jag byggde ordervyn pa samma delar men lat regeln sitta kvar pa
     offertvyns id. Den galler bada nu, sa nasta gemensamma del inte behover
     rattas pa tva stallen. */
  #ovKropp .ov-kort, #ovoKropp .ov-kort{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:12px 14px 16px;
  }
  #ovKropp .ov-flikar, #ovoKropp .ov-flikar{margin-bottom:12px;}

  /* ===== OFFERTVYN: knapprad, flikar, paneler (2026-09-21) ===== */
  .ov-knappar{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;padding:2px 0 14px;}
  /* .ko-start ar block/100 % overallt annars - inne i knappraden ska den vara
     en knapp bland andra. Samma sak for .ko-forlorad, som blir ett menyval. */
  .ov-knappar .ko-start{
    display:inline-flex;align-items:center;justify-content:center;width:auto;
    flex:1 1 auto;margin-top:0;min-height:44px;padding:11px 18px;font-size:14px;border-radius:11px;
  }
  .ov-knappar .ko-start:not(.ov-primar){background:var(--card);color:var(--text);border:1px solid var(--border);}
  .ov-knappar .ko-start:not(.ov-primar):hover{background:var(--press);}
  .ov-meny .ko-forlorad{
    display:block;width:100%;margin-top:0;padding:10px 12px;text-align:left;
    font-size:14px;color:var(--danger);border-radius:9px;
  }
  .ov-meny .ko-forlorad:hover{background:var(--press);}
  .ov-btn{
    font:inherit;font-size:14px;font-weight:600;border-radius:11px;border:1px solid var(--border);
    background:var(--card);color:var(--text);padding:11px 18px;cursor:pointer;white-space:nowrap;
    transition:background .14s,border-color .14s;
  }
  .ov-btn:hover{background:var(--press);}
  .ov-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .ov-primar{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .ov-btn.ar-skickad,.ko-start.ar-skickad{background:var(--accent-light);color:var(--muted);border-color:var(--accent-light);cursor:default;}
  .ov-btn.ar-skickad:hover{background:var(--accent-light);}
  .ov-primar:hover{background:#242424;}
  .ov-mer{position:relative;flex:0 0 auto;}
  .ov-mer > summary{
    list-style:none;font-size:16px;line-height:1;letter-spacing:.08em;cursor:pointer;
    border:1px solid var(--border);border-radius:11px;background:var(--card);
    padding:12px 13px;color:var(--text);user-select:none;
  }
  .ov-mer > summary::-webkit-details-marker{display:none;}
  .ov-mer > summary:hover{background:var(--press);}
  .ov-meny{
    position:absolute;right:0;top:calc(100% + 7px);z-index:30;min-width:220px;max-width:min(260px,78vw);background:var(--card);
    border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.17);padding:6px;
  }
  .ov-menyval{
    display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
    font-size:14px;color:var(--danger);padding:10px 12px;border-radius:9px;cursor:pointer;
  }
  .ov-menyval:hover{background:var(--press);}
  .ov-menyval.ar-lugn{color:var(--text);}
  .ov-menyrubrik{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 12px 3px;}
  .ov-menyskilje{border-top:1px solid var(--border);margin:5px 4px;}
  /* overflow-x:auto gor overflow-y till auto i samma veva - darifran kom den
     tunna lodrata skrollisten vid flikraden. Bada far uttalat hidden i y-led. */
  .ov-flikar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:14px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .ov-flikar::-webkit-scrollbar{display:none;}
  .ov .fu-rader-scroll{overflow-y:hidden;}
  .ov-flik{
    border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--muted);
    padding:10px 4px 9px;margin-right:22px;cursor:pointer;border-bottom:2px solid transparent;
    margin-bottom:-1px;white-space:nowrap;transition:color .14s,border-color .14s;
  }
  .ov-flik.ar-aktiv{color:var(--text);font-weight:600;border-bottom-color:var(--accent);}
  .ov-flik:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .ov-antal{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;}
  .ov-panel.ov-dold{display:none;}
  /* Avtalsfliken ar dold tills det visat sig att kunden HAR ett avtal.
     !important for att den ska ga att doja aven dar flikarna sjalva satter
     display - en flik som alltid star tom lar alla att aldrig oppna den. */
  .ov-flik[hidden],.on-flik[hidden]{display:none !important;}
  .ov-hjalp{margin:0;font-size:13px;color:var(--muted);line-height:1.5;}
  .oh-summa{border-top:1px solid var(--border);margin-top:10px;padding:12px 0 2px;}
  .oh-summa .oh-falt strong{font-variant-numeric:tabular-nums;}
  .fu-rader-knappar{display:flex;flex-direction:column;gap:0;}
  .fu-rader-tabell .rk-antal em{font-style:normal;color:var(--muted);font-size:11.5px;}
  .fu-rader-tabell td.rk-art{font-size:12.5px;}
  .fu-rader-tabell .rk-textrad td{background:var(--accent-light);font-weight:600;padding:8px 10px;border-top:none;border-radius:8px;}
  .fu-rader-tabell .rk-textrad + tr td{border-top:none;}
  /* Breda tabeller rullar i sin EGEN ruta - aldrig hela sidan i sidled. */
  .fu-rader-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .fu-rader-tabell{width:100%;border-collapse:collapse;font-size:13px;}
  .fu-rader-tabell th{
    font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);text-align:left;padding:0 8px 6px 0;white-space:nowrap;
  }
  .fu-rader-tabell td{padding:6px 8px 6px 0;border-top:1px solid var(--accent-light);vertical-align:top;}
  .fu-rader-tabell .rk-art{font-variant-numeric:tabular-nums;white-space:nowrap;}
  .fu-rader-tabell .rk-besk{width:100%;line-height:1.35;}
  .fu-rader-tabell .rk-antal,
  .fu-rader-tabell .rk-apris,
  .fu-rader-tabell .rk-rabatt,
  .fu-rader-tabell .rk-netto,
  .fu-rader-tabell .rk-summa,
  .fu-rader-tabell .rk-tg{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  /* Pris, rabatt, radsumma och TG hör hemma på en skärm som rymmer dem.
     På telefonen blir samma tabell åtta kolumner i 320 px och oläslig -
     där räcker artikelnummer, beskrivning, antal och nettopris (Mikael
     2026-08-31). Kolumnerna finns i HTML:en oavsett läge, så det bara
     finns EN sanning om vad en rad innehåller. */
  .fu-rader-tabell .kol-desktop{display:none;}
  .fu-rader-summa{
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    border-top:1px solid var(--border);margin-top:8px;padding-top:8px;font-size:13px;
  }
  .fu-rader-not,.fu-rader-fel{font-size:12px;color:var(--muted);padding-top:8px;line-height:1.4;}
  /* ANTALSANDRINGEN (Mikael 2026-09-24). Mobilen forst: en rad per orderrad,
     texten over faltet, faltet och knappen sida vid sida. Pa bredare skarm
     lagger de sig pa samma rad. */
  .ord-radred-start{padding-top:10px;}
  .ord-radred{border-top:1px solid var(--accent-light);margin-top:10px;padding-top:6px;}
  .ord-radred-rad{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--accent-light);}
  .ord-radred-rad:first-child{border-top:none;}
  .ord-radred-text{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;min-width:0;}
  .ord-radred-art{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;}
  .ord-radred-besk{color:var(--muted);font-size:12.5px;line-height:1.35;}
  .ord-radred-falt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .ord-radred-etikett{font-size:12px;color:var(--muted);}
  .ord-radred-input{width:96px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
    font:inherit;font-variant-numeric:tabular-nums;text-align:right;background:var(--card);color:inherit;}
  .ord-radred-enhet{font-size:12px;color:var(--muted);}
  .ord-radred-spara{width:auto;margin-top:0;padding:8px 16px;}
  .ord-radred-last{font-size:12.5px;color:var(--muted);line-height:1.4;}
  .ord-radred-rad.ar-last .ord-radred-art{color:var(--muted);}
  .ord-radred-kvitto{margin-bottom:10px;}
  /* RSK-/LVI-market i artikelforslagen (2026-09-24). Ska sagas att traffen
     kom fran en kod och inte fran artikelnumret - diskret, men lasbart. */
  .on-traff-kod{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:600;
    letter-spacing:.04em;vertical-align:1px;padding:1px 5px;border-radius:4px;
    border:1px solid var(--accent);color:var(--accent);}

  /* ==================================================================
     PRISLISTOR (Mikael 2026-09-24)

     Mobilen forst: korten staplas, tabellen blir rader utan kolumnhuvud
     under 700 px. TG:n ar sidans huvudperson och far darfor storleken -
     allt annat ar stod. Tonen foljer resten av CRM:et; inga nya farger,
     bara de tokens som redan finns.
     ================================================================== */
  .plm-topp{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
    font-size:12.5px;color:var(--muted);padding:0 0 14px;}
  .plm-topp b{color:inherit;font-weight:600;}
  .plm-kort{display:block;width:100%;text-align:left;background:var(--card);
    border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;
    font:inherit;color:inherit;cursor:pointer;}
  .plm-kort:hover{border-color:var(--accent);}
  .plm-kort-rad1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .plm-kort-namn{font-size:16px;font-weight:600;letter-spacing:-0.01em;}
  .plm-val{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);
    border:1px solid var(--border);border-radius:999px;padding:1px 7px;}
  .plm-kort-tg{margin-left:auto;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em;white-space:nowrap;}
  .plm-kort-tg small{display:block;font-size:11px;font-weight:400;color:var(--muted);
    letter-spacing:0;text-align:right;}
  .plm-kort-meta{font-size:12.5px;color:var(--muted);padding-top:6px;line-height:1.45;}
  .plm-kort-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;}
  .plm-chip{font-size:11.5px;border-radius:999px;padding:2px 9px;border:1px solid var(--border);
    color:var(--muted);white-space:nowrap;}
  .plm-chip.ar-flagg{border-color:#d9822b;color:#a2610f;}
  .plm-chip.ar-illa{border-color:#c0392b;color:#a03127;}
  .plm-chip.ar-kund{border-color:var(--accent);color:var(--accent);}

  /* Rabattreglaget - sidans enda interaktiva rakneverk. */
  .plm-rabatt{background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:14px 16px;margin:12px 0;}
  .plm-rabatt-rubrik{font-size:15px;font-weight:600;letter-spacing:-0.01em;padding-bottom:10px;}
  .plm-rabatt-rad{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .plm-rabatt label{font-size:13px;font-weight:600;}
  .plm-rabatt-snabb{font:inherit;font-size:13px;padding:7px 14px;border-radius:999px;
    border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;}
  .plm-rabatt-snabb:hover{border-color:var(--accent);color:var(--accent);}
  .plm-rabatt-snabb.ar-aktiv{border-color:var(--accent);color:var(--accent);font-weight:600;
    box-shadow:inset 0 0 0 1px var(--accent);}
  .plm-rabatt-falt{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);
    margin-left:auto;}
  .plm-rabatt-reglage{display:block;width:100%;margin:14px 0 2px;accent-color:var(--accent);}
  .plm-rabatt-vad{font-size:12.5px;color:var(--muted);line-height:1.45;}
  .plm-rabatt input[type=number]{width:82px;padding:8px 10px;border:1px solid var(--border);
    border-radius:8px;font:inherit;text-align:right;font-variant-numeric:tabular-nums;
    background:var(--card);color:inherit;}
  .plm-rabatt-utfall{display:flex;flex-wrap:wrap;gap:18px;padding-top:14px;margin-top:12px;
    border-top:1px solid var(--accent-light);}
  .plm-utfall{min-width:96px;}
  .plm-utfall span{display:block;font-size:11.5px;color:var(--muted);}
  .plm-utfall strong{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
  .plm-rabatt-not{font-size:12px;color:var(--muted);padding-top:10px;line-height:1.45;}

  .plm-filter{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;}
  .plm-filter button{flex:0 0 auto;font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;
    border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;white-space:nowrap;}
  .plm-filter button.ar-aktiv{border-color:var(--accent);color:var(--accent);font-weight:600;}
  .plm-sok{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
    font:inherit;background:var(--card);color:inherit;margin-bottom:10px;}

  .plm-rad{display:grid;gap:2px 12px;padding:11px 0;border-top:1px solid var(--accent-light);
    grid-template-columns:1fr auto;align-items:baseline;}
  .plm-rad:first-child{border-top:none;}
  .plm-rad-nr{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);}
  .plm-rad-ben{font-size:13.5px;line-height:1.35;grid-column:1;}
  .plm-rad-tal{grid-column:2;grid-row:1 / span 2;text-align:right;white-space:nowrap;
    font-variant-numeric:tabular-nums;}
  .plm-rad-pris{font-size:14px;font-weight:600;}
  .plm-rad-netto{font-size:12px;color:var(--muted);}
  .plm-rad-netto b{display:block;font-weight:600;color:inherit;}
  .plm-rad-netto i{display:block;font-style:normal;font-size:11.5px;}
  .plm-rad-tg{font-size:14px;font-weight:600;}
  .plm-rad-tg.ar-illa{color:#c0392b;}
  .plm-rad-tg.ar-tunn{color:#a2610f;}
  .plm-rad-flagg{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;padding-top:5px;}
  .plm-antal{font-size:12.5px;color:var(--muted);padding:2px 0 10px;}
  @media (min-width:700px){
    .plm-rad{grid-template-columns:100px minmax(0,1fr) 115px 140px 145px 72px;
      column-gap:16px;align-items:center;}
    .plm-rad-nr{grid-column:1;}
    .plm-rad-ben{grid-column:2;}
    .plm-rad-tal{display:contents;}
    .plm-rad-pris{grid-column:3;text-align:right;}
    .plm-rad-netto{grid-column:4;text-align:right;}
    .plm-rad-inpris{grid-column:5;text-align:right;}
    .plm-rad-tg{grid-column:6;text-align:right;}
    .plm-rad-flagg{grid-column:2 / -1;}
    /* Sifferkolumnerna far ALDRIG radbryta eller vaxa ur sin cell - da
       glider raderna ur linje med varandra. Benamningen ar den enda som
       far kortas. */
    .plm-rad-pris,.plm-rad-inpris,.plm-rad-tg,
    .plm-rad-netto b,.plm-rad-netto i{white-space:nowrap;}
    .plm-rad-ben{min-width:0;overflow:hidden;text-overflow:ellipsis;}
  }

  /* RADEN BLIR EN KNAPP (Mikael 2026-09-24: "jag vill kunna justera
     priset"). Knappens egna stilar nollas sa den ser ut precis som raden
     gjorde - det enda som tillkommer ar att den gar att trycka pa. */
  .plm-rad{width:100%;font:inherit;color:inherit;background:none;border:0;
    border-top:1px solid var(--accent-light);cursor:pointer;text-align:left;}
  .plm-rad:hover{background:var(--accent-light);}
  .plm-rad-inpris{font-size:12px;color:var(--muted);}
  .plm-rad-salt{display:block;font-size:11.5px;color:var(--muted);padding-top:2px;}
  .plm-post:first-child .plm-rad{border-top:none;}

  /* Redigeringen. Ligger UNDER raden, inte i en modal: man ska se raden man
     andrar och grannarna omkring den medan man skriver. */
  .plm-red{background:var(--accent-light);border-radius:12px;padding:14px;margin:2px 0 10px;}
  .plm-red-fakta{display:flex;flex-wrap:wrap;gap:16px;padding-bottom:12px;}
  .plm-red-fakta div span{display:block;font-size:11.5px;color:var(--muted);}
  .plm-red-fakta div strong{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
  .plm-red-rad{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
  .plm-red-rad label{font-size:13px;font-weight:600;}
  .plm-red-rad input{width:130px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;
    font:inherit;text-align:right;font-variant-numeric:tabular-nums;background:var(--card);color:inherit;}
  .plm-red-utfall{font-size:13px;font-variant-numeric:tabular-nums;}
  .plm-red-utfall b{font-weight:600;}
  .plm-red-snabb{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;}
  .plm-red-snabb button{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;
    border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;}
  .plm-red-snabb button:hover{border-color:var(--accent);color:var(--accent);}
  .plm-red-knappar{display:flex;gap:8px;padding-top:12px;}
  .plm-red-not{font-size:12px;color:var(--muted);padding-top:10px;line-height:1.45;}
  .plm-red-fel{font-size:12.5px;color:#c0392b;padding-top:8px;}
  .plm-kvitto{font-size:12.5px;color:var(--accent);padding:6px 0 0;}

  /* Massjusteringen. Egen ram och egen ton - det har ar den enda platsen i
     modulen dar ett enda klick andrar tusen rader, och det ska synas. */
  /* De tre ingangarna star pa EN rad, inte i en stapel - de ar sidoordnade
     atgarder pa samma lista, och tre knappar under varandra ser ut som en
     meny man maste ta sig igenom. */
  .plm-just-start{display:inline-block;padding:2px 8px 10px 0;}
  .plm-forb{display:block;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line,#d9dde3);border-radius:14px;}
  .plm-forb-rubrik{font-size:15px;}
  .plm-forb-status{font-size:13px;opacity:.7;padding:2px 0 8px;}
  .plm-forb .ov-btn[disabled]{opacity:.45;}
  .plm-forb-schema{padding:0 0 8px;font-size:14px;}
  .plm-forb-schema input{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--line,#d9dde3);margin:0 6px;}
  .plm-flikar{display:flex;gap:6px;padding:0 0 14px;}
  .plm-flikar button{font:inherit;font-size:13px;padding:7px 14px;border-radius:999px;
    border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;}
  .plm-flikar button.ar-aktiv{border-color:var(--accent);color:var(--accent);font-weight:600;}
  .plm-arkiv-chip{font-size:11.5px;border-radius:999px;padding:2px 9px;border:1px solid var(--border);
    color:var(--muted);margin-left:8px;vertical-align:2px;}
  .plm-just{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:0 0 12px;}
  .plm-just h3{margin:0 0 10px;font-size:15px;font-weight:600;}
  .plm-just-rad{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;}
  .plm-just-rad label{font-size:13px;}
  .plm-just-rad input[type=number]{width:96px;padding:9px 10px;border:1px solid var(--border);
    border-radius:8px;font:inherit;text-align:right;font-variant-numeric:tabular-nums;
    background:var(--card);color:inherit;}
  .plm-just-rad select{padding:9px 10px;border:1px solid var(--border);border-radius:8px;
    font:inherit;background:var(--card);color:inherit;}
  .plm-just-kryss{display:flex;align-items:center;gap:7px;font-size:13px;}
  .plm-just-plan{border-top:1px solid var(--accent-light);margin-top:14px;padding-top:14px;}
  .plm-just-tal{display:flex;flex-wrap:wrap;gap:18px;padding-bottom:12px;}
  .plm-just-tal div span{display:block;font-size:11.5px;color:var(--muted);}
  .plm-just-tal div strong{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;}
  .plm-just-exempel{font-size:12.5px;line-height:1.7;font-variant-numeric:tabular-nums;}
  .plm-just-exempel i{font-style:normal;color:var(--muted);}
  .plm-just-varning{font-size:12.5px;color:#a2610f;padding-top:8px;line-height:1.45;}
  .plm-just-bar{height:6px;border-radius:999px;background:var(--accent-light);overflow:hidden;margin:12px 0 6px;}
  .plm-just-bar i{display:block;height:100%;background:var(--accent);transition:width .2s;}
  .plm-just-status{font-size:12.5px;color:var(--muted);}

  /* Kundkopplingen. Samma ram som massjusteringen - bada andrar vad kunden
     faktiskt betalar, och ska kannas lika allvarliga. */
  .plm-kund{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:0 0 12px;}
  .plm-kund h3{margin:0 0 4px;font-size:15px;font-weight:600;}
  .plm-kund-hjalp{font-size:12.5px;color:var(--muted);line-height:1.45;padding-bottom:12px;}
  .plm-kund-rad{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
    padding:10px 0;border-top:1px solid var(--accent-light);}
  .plm-kund-rad:first-of-type{border-top:none;}
  .plm-kund-namn{font-size:13.5px;font-weight:600;}
  .plm-kund-namn i{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--muted);}
  .plm-kund-rad select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;
    font:inherit;font-size:13px;background:var(--card);color:inherit;max-width:100%;}
  .plm-kund-sok{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
    font:inherit;background:var(--card);color:inherit;margin:12px 0 0;}
  .plm-kund-traff{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
    padding:9px 0;border-top:1px solid var(--accent-light);font-size:13px;}
  .plm-kund-traff button{font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;
    border:1px solid var(--accent);background:var(--card);color:var(--accent);cursor:pointer;}
  @media (min-width:640px){
    .ord-radred-rad{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;}
    .ord-radred-text{flex:1 1 auto;}
    .ord-radred-last{flex:0 1 46%;text-align:right;}
  }
  /* Lagerstatus under beskrivningen (2026-09-02) */
  .rk-lager{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;margin-top:3px;line-height:1.4;}
  .rk-lager i{font-style:normal;color:var(--muted);}
  .rk-lager em{font-style:normal;color:var(--muted);}
  .rk-lager b{font-weight:600;display:inline-flex;align-items:center;gap:4px;}
  .rk-lager b::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
  .rk-lager .ja{color:var(--success);}
  .rk-lager .nej{color:var(--danger);}
  .rk-lager-best{color:var(--muted);font-weight:600;}
  /* Baspris i fel valuta - se crm_flagga_basvaluta(). Rad, inte ikon: felet
     ar elva ganger fel pris och ska inte ga att skumma forbi. */
  .rk-basvaluta{display:flex;gap:6px;align-items:flex-start;margin-top:4px;padding:6px 8px;
    border-radius:8px;background:var(--danger-bg);color:var(--danger);
    font-size:11.5px;line-height:1.45;font-weight:600;}
  .rk-basvaluta-ikon{flex:0 0 auto;font-weight:800;}
  /* ---------- Leverantörsoffert -> offert (2026-09-02) ---------- */
  .lo-kort{display:flex;flex-direction:column;gap:10px;}
  .lo-fil{display:flex;align-items:center;justify-content:center;min-height:64px;border:1.5px dashed var(--border);border-radius:12px;padding:12px;cursor:pointer;font-weight:600;color:var(--muted);text-align:center;}
  .lo-fil:active{background:var(--press);}
  .lo-fil.is-over{border-color:var(--accent);background:var(--press);color:var(--text);}
  .lo-fil.is-fel{border-color:var(--danger);color:var(--danger);animation:lo-skak .3s;}
  @keyframes lo-skak{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .lo-knapp{width:100%;}
  /* LEVERANTORSOFFERTEN INNE I OFFERTEN (Mikael 2026-09-22). Panelen bor i
     radfliken, dar raderna anda ska hamna. Aterbrukar lo-*-formerna fran
     det gamla verktyget - samma radlayout, samma prisrutor. */
  .on-lopanel{margin-top:16px;display:flex;flex-direction:column;gap:14px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
  .on-lopanel[hidden],.on-lopanel.dold{display:none;}
  .on-lo-topp{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .on-lo-topp b{font-size:15px;}
  .on-lo-inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;}
  .on-lo-rader{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;}
  .on-lo-fot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .on-lo-fot .ko-nasta,.on-lo-fot .ko-avbryt{flex:0 0 auto;min-height:0;padding:11px 20px;}
  .lo-kurskalla{font-size:13px;color:var(--muted);padding:10px 0;}
  .lo-kundlista{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:-4px;}
  .lo-kundlista button{background:none;border:none;border-top:1px solid var(--border);text-align:left;padding:11px 12px;font:inherit;font-size:14px;cursor:pointer;}
  .lo-kundlista button:first-child{border-top:none;}
  .lo-kund-tom{padding:11px 12px;font-size:13px;color:var(--muted);}
  .lo-kundnr{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px;}
  /* Ny kontaktperson (2026-09-15). Tydligt inramad så det syns att fälten
     hör ihop med valet ovanför och inte är ännu ett fritt fält på kortet.
     Två kolumner från 420 px - på telefon staplas de. */
  .lo-nykontakt{border:1px solid var(--accent-light);border-radius:12px;padding:12px;background:#f7f8fa;display:flex;flex-direction:column;gap:10px;}
  .lo-nykontakt-topp{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;}
  .lo-nykontakt-falt{display:grid;grid-template-columns:1fr;gap:10px;}
  @media (min-width:420px){ .lo-nykontakt-falt{grid-template-columns:1fr 1fr;} }
  .lo-huvud{padding:0 16px 8px;line-height:1.5;}
  .lo-varning{color:var(--danger);font-weight:600;margin-top:4px;}
  .ku-status{font-size:12.5px;}
  .ticket-bilagor{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--accent-light);}
  .ticket-bilaga{font-size:12.5px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .ticket-bilaga em{font-style:normal;color:var(--muted);}
  .ticket-bilaga-order{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
  .my-tickets-list li .ticket-bilagor{margin:0 0 4px;padding:8px 14px 10px;border-top:none;}
  .ticket-order-skapad{font-size:12.5px;font-weight:600;color:var(--success);padding:0 14px 8px;}
  .ticket-order-skapad.muted{color:var(--muted);font-weight:400;}
  .ticket-order-meta b{font-weight:600;color:var(--text);}
  .ticket-order-meta .lankknapp-liten{margin-left:6px;}
  .ku-historik td,.ku-historik th{white-space:nowrap;}
  .ku-historik td em{font-style:normal;color:var(--muted);font-size:11.5px;}
  .ko-klar .ko-nasta{margin-top:10px;padding:0 18px;}
  .ko-kvitto{border-color:var(--success);background:var(--success-bg);}
  .ku-ok{color:var(--muted);}
  .ku-varn{color:var(--danger);font-weight:600;}
  .lo-priser em{display:block;font-style:normal;font-size:11px;color:var(--muted);}
  .lo-rader{display:flex;flex-direction:column;gap:10px;padding:0 16px;}
  .lo-rad{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
  .lo-rad-bort{opacity:.5;}
  .lo-rad-topp{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;}
  .lo-med{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;cursor:pointer;}
  .lo-med input{width:18px;height:18px;accent-color:var(--accent);margin:0;}
  .lo-original{font-size:12px;color:var(--muted);}
  .lo-rad-falt{display:grid;grid-template-columns:140px 110px;gap:8px;}
  .lo-antal-tecken{font-style:normal;color:var(--muted);font-weight:400;margin-left:6px;}
  .lo-rad-falt .ko-falt,.lo-rad .ko-falt{margin-bottom:0;}
  .lo-textarea{min-height:44px;resize:vertical;font:inherit;line-height:1.35;}
  .lo-priser{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .lo-priser>div{display:flex;flex-direction:column;gap:3px;}
  .lo-priser span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .lo-priser strong{font-size:14px;font-variant-numeric:tabular-nums;}
  .lo-priser em{font-style:normal;font-size:11px;color:var(--muted);}
  .lo-pris{padding:8px 10px;}
  .lo-tg-lag{color:var(--danger);}
  .lo-actions{padding:0 16px;}
  .lo-summa{margin-top:10px;}
    /* ---------- Sålt per säljare (2026-09-09) ----------
     OMGJORD samma dag: första versionen klämde in tre tal i varje cell,
     med "·" emellan. Nio tal per rad blev ett kalkylblad, och på mobil
     bröt "TG 51,8 %" mitt itu så procenttecknet hamnade på egen rad.
     Nu: ETT stort tal per cell, jämförelse och TG på en andra rad som
     aldrig får brytas, och på smal skärm staplas raden om till ett kort
     per säljare i stället för att pressas ihop. */
  .sv-kort{padding:22px 0 8px;}
  .sv-topp{display:flex;align-items:center;justify-content:space-between;gap:14px;
    flex-wrap:wrap;margin-bottom:14px;}
  .sv-tabell{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
  .sv-tabell th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    font-weight:600;text-align:right;padding:0 0 10px;white-space:nowrap;}
  .sv-tabell th:first-child{text-align:left;}
  .sv-tabell td{padding:13px 0 13px 18px;border-top:1px solid #ececee;text-align:right;
    vertical-align:baseline;white-space:nowrap;}
  .sv-tabell td:first-child{text-align:left;padding-left:0;font-size:13.5px;font-weight:500;
    white-space:normal;}
  .sv-belopp{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px;}
  .sv-under{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;white-space:nowrap;}
  /* Kommentaren i första kolumnen är en mening, inte ett tal - den ska
     brytas. nowrap gäller talen, som annars delar sig mitt i "51,8 %". */
  .sv-tabell td:first-child .sv-under{white-space:normal;}
  .sv-jmf{font-weight:600;}
  .sv-jmf.up{color:#1c7a45;}
  .sv-jmf.down{color:#a33;}
  .sv-tg{margin-left:9px;}
  .sv-tabell tfoot td{border-top:2px solid #d8d8dc;padding-top:15px;font-weight:600;}
  .sv-just td{padding-top:16px;}
  .sv-tabell tfoot .sv-belopp{font-size:17px;}
  .sv-just td:first-child{color:var(--muted);font-weight:400;}
  .sv-just .sv-belopp{font-size:14px;font-weight:500;color:var(--muted);}
  .sv-hint{display:block;font-weight:400;letter-spacing:0;text-transform:none;
    font-size:10px;opacity:.7;margin-top:2px;}
  .sv-fot{font-size:11.5px;color:var(--muted);line-height:1.65;margin:16px 0 0;max-width:70ch;}
  .sv-tom{font-size:13px;color:var(--muted);padding:14px 0;}
  .sv-varning{font-size:12.5px;line-height:1.65;background:var(--warn-bg);border:1px solid #f0dcc0;
    border-radius:12px;padding:13px 15px;margin:18px 0 0;color:#6b4a1c;max-width:70ch;}
  .sv-varning .sv-under{margin-top:6px;color:#6b4a1c;opacity:.85;white-space:normal;}
  .sv-fotnot{margin-top:24px;padding-top:18px;border-top:1px dashed #dcdce0;}
  .sv-fotnot-rubrik{font-size:12.5px;font-weight:600;margin-bottom:6px;}
  .sv-fotnot-rubrik span{font-weight:400;color:var(--muted);}
  .sv-fotnot .sv-belopp{font-size:14px;}

  /* SMAL SKÄRM: ett kort per säljare. En tabell med fyra kolumner går
     inte att pressa ned i 390 px - den blir oläslig långt innan den blir
     liten. Rubrikraden försvinner och varje cell bär sin egen etikett. */
  @media (max-width:760px){
    .sv-kort{padding-top:18px;}
    /* Tabellayouten stängs av HELT. Med bara tr/td omgjorda till block
       låter den anonyma tabellboxen ändå innehållet bli bredare än skärmen,
       och högerkanten kapas - "TG 51,8 %" hamnade utanför. */
    .sv-tabell,.sv-tabell tbody,.sv-tabell tfoot{display:block;width:100%;}
    .sv-tabell thead{display:none;}
    .sv-tabell tbody tr,.sv-tabell tfoot tr{display:block;padding:14px 0 16px;border-top:1px solid #ececee;}
    .sv-tabell tfoot tr{border-top:2px solid #d8d8dc;}
    /* border:0 måste vinna över tfoot-regeln, annars ritas en linje
       mellan varje period i totalraden när cellerna staplas. */
    .sv-tabell td,.sv-tabell tfoot td{display:flex;align-items:baseline;gap:10px;
      border:0;padding:5px 0;min-width:0;}
    .sv-tabell td:first-child{display:block;font-size:14.5px;font-weight:600;padding-bottom:6px;}
    .sv-tabell td[data-kol]::before{content:attr(data-kol);font-size:11px;color:var(--muted);
      font-weight:600;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto;}
    .sv-belopp{display:inline;margin-left:auto;font-size:15px;}
    /* Bara cellernas under-rad blir inline. Kommentaren i första kolumnen
       och texten i varningsrutan är egna stycken och ska stanna på egen
       rad - annars klistras "Justering" ihop med "AUG: Engångsorder...". */
    .sv-tabell td[data-kol] .sv-under{display:inline;margin-top:0;flex:0 0 auto;}
    .sv-tabell tfoot .sv-belopp{font-size:16px;}
  }

  @media (max-width:600px){ .lo-rad-falt{grid-template-columns:1fr 1fr;} .lo-priser{grid-template-columns:1fr 1fr;} }
  /* Förlorad (2026-09-02): nedtonad textknapp under de stora */
  .ko-forlorad{display:block;width:100%;margin-top:10px;padding:10px;background:none;border:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;}
  .ko-forlorad:active{color:var(--danger);}
  .ko-skapa.ko-skapa-rod{background:var(--danger);border-color:var(--danger);}
  /* Leveransval i konverteringen (2026-09-02) */
  .ko-levval{margin-bottom:12px;}
  .ko-levval button{min-height:40px;font-size:13px;line-height:1.2;}
  .tg-saknas{color:var(--muted);}
  .tg-flagga{color:var(--muted);padding-left:2px;}
  .fu-action{flex:1;text-align:center;text-decoration:none;font-size:14px;font-weight:600;
    color:var(--accent);border:1px solid var(--border);border-radius:100px;padding:10px 12px;
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--card);}
  .fu-action:active{background:var(--accent-light);}
  /* Knappen ärver <a>-utseendet men är en <button> - ta bort webbläsarens
     egna typsnitt och kanter så den ligger i linje med Ring och Mejla. */
  button.fu-action{font-family:inherit;cursor:pointer;appearance:none;}
  button.fu-action:disabled{opacity:.55;cursor:default;}

  /* ---------- "Följ upp automatiskt" (Mikael 2026-09-16) ----------
     En rad, inte en knapp bland knapparna: valet gör något helt annat än
     Ring och Mejla - det skickar ett mejl OCH flyttar uppföljningen. Den
     får därför egen plats under actionraden, med rutan till vänster som
     i en inställning.

     Hela raden är klickyta (44 px hög, hela kortets bredd), så den går att
     träffa med en tumme. Efter utskicket är den inte längre en kontroll
     utan en upplysning - då tas kanten och pekaren bort. */
  .fu-auto{
    display:flex;align-items:flex-start;gap:11px;width:100%;box-sizing:border-box;
    margin:0 14px 12px;width:calc(100% - 28px);
    border:1px solid var(--border);border-radius:12px;background:var(--card);
    padding:11px 13px;min-height:44px;text-align:left;font:inherit;color:var(--text);
    cursor:pointer;-webkit-appearance:none;appearance:none;
    transition:border-color .12s,background .12s;
  }
  .fu-auto:hover{border-color:var(--accent);}
  .fu-auto:active{background:var(--accent-light);}
  .fu-auto:disabled{cursor:default;}
  /* EN KNAPP SKA SE UT SOM EN KNAPP (Mikael 2026-09-23: "istallet for en
     bock (som jag tolkar att den skickar pa utsatt datum, men den skickar
     pa en gang) sa har vi en knapp som sager 'skicka uppfoljning nu'").
     Rutan till vanster lovade ett val man kryssar i och later ligga -
     handlingen var tvartom omedelbar. Pilen till hoger sager "det har
     hander nu", som pa varje annan knapp i CRM. */
  .fu-auto.ar-knapp{align-items:center;font-weight:500;}
  .fu-auto.ar-knapp .fu-auto-titel{font-weight:600;}
  .fu-auto-pil{flex:none;margin-left:auto;color:var(--muted);font-size:20px;line-height:1;}
  .fu-auto.ar-klar{cursor:default;border-color:transparent;background:var(--accent-light);}
  .fu-auto.ar-klar:hover{border-color:transparent;}
  .fu-auto-ruta{
    flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;
    border:1.5px solid var(--border);background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;line-height:1;color:var(--on-accent);
  }
  .fu-auto.ar-vald .fu-auto-ruta,
  .fu-auto.ar-klar .fu-auto-ruta{background:var(--accent);border-color:var(--accent);}
  .fu-auto-text{min-width:0;flex:1;}
  .fu-auto-titel{display:block;font-size:14px;font-weight:600;letter-spacing:-0.01em;}
  .fu-auto-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
  .fu-auto-sub.ar-fel{color:var(--danger);}
  /* Kundens öppning står som en egen rad under - det är en händelse hos
     kunden, inte en egenskap hos valet. */
  .fu-auto-oppnad{display:block;font-size:12.5px;font-weight:600;color:var(--accent);margin-top:4px;}
  .followup-badge.overdue{color:var(--danger);background:var(--danger-bg);}
  .followup-badge.today{color:var(--warn);background:var(--warn-bg);}
  .followup-badge.upcoming{color:var(--info);background:var(--info-bg);}
  .ticket-offer{font-size:12.5px;color:var(--text);font-weight:600;margin-top:4px;}
  #closedFollowupsSection.is-collapsed .my-tickets-list{display:none;}
  #closedFollowupsSection.is-collapsed .collapsible-header{margin-bottom:0;}
  #closedFollowupsSection.is-collapsed .collapse-chevron{transform:rotate(-90deg);}
  #closedFollowupsSection{margin-top:14px;}

  /* ---------- Frakter (Sendify) ---------- */
  .shipment-item{
    display:block;padding:12px 0;border-bottom:1px solid var(--border);
    text-decoration:none;color:inherit;cursor:pointer;
  }
  .shipment-item:last-child{border-bottom:none;}
  .shipment-item.exception{background:var(--danger-bg);margin:0 -16px;padding:12px 16px;border-radius:10px;border-bottom:none;}
  .shipment-item-row{display:flex;gap:10px;align-items:flex-start;}
  .shipment-item-body{flex:1;min-width:0;}
  .shipment-order{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;}
  .shipment-order .exc-tag{font-size:11.5px;font-weight:700;color:var(--on-accent);background:var(--danger);border-radius:6px;padding:2px 6px;letter-spacing:.3px;}
  .shipment-status{font-size:13.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;}
  .shipment-status.exception-text{color:var(--danger);font-weight:600;}
  .shipment-status.status-avklarad{color:var(--muted);}
  .shipment-status-icon.icon-avklarad{color:var(--muted);}
  .shipment-avklara{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
  .shipment-avklara-info{font-size:13px;color:var(--muted);}
  .shipment-avklara .ko-skapa,.shipment-avklara .ko-avbryt{flex:0 0 auto;padding:9px 14px;}
  .shipment-avklara-mini{flex:none;align-self:center;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;}
  .shipment-status.status-delivered{color:var(--success);font-weight:600;}
  .shipment-status.status-transit{color:var(--info);font-weight:600;}
  .shipment-status-icon{font-weight:800;font-size:13px;line-height:1;flex-shrink:0;}
  .shipment-status-icon.icon-delivered{color:var(--success);}
  .shipment-status-icon.icon-transit{color:var(--info);}
  .shipment-status-icon.icon-exception{color:var(--danger);}
  .shipment-meta{font-size:13px;color:var(--muted);margin-top:4px;}
  .shipment-date{font-size:12px;color:var(--muted);margin-top:2px;}
  .shipment-track-link{display:inline-block;margin-top:7px;font-size:13.5px;font-weight:600;color:var(--accent);}
  /* PACKFOTO (2026-10-12): bilden hämtas från OnGoing först vid klick, listan visar bara att den finns. */
  .shipment-packfoto-tag{
    display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted);
  }
  .shipment-packfoto-tag svg{flex-shrink:0;}

  /* ---------- Mina frakter (cross-customer shipment list) ---------- */
  ul.my-shipments-list{list-style:none;margin:0;padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px;}
  .my-shipments-list li{
    background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(20,20,40,.06);overflow:hidden;
  }
  .my-shipments-list li.exception{border-color:var(--danger-soft);}
  button.my-shipment-btn{
    display:block;width:100%;text-align:left;background:none;border:none;padding:14px 16px;cursor:pointer;color:inherit;
  }
  button.my-shipment-btn:active{background:var(--press);}
  .my-shipment-customer{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:1px;}

  /* ---------- Mina ärenden (Zammad) ---------- */
  ul.my-tickets-list{list-style:none;margin:0;padding:6px 12px 12px;display:flex;flex-direction:column;gap:8px;}
  .my-tickets-list li{
    background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
    box-shadow:0 1px 2px rgba(20,20,40,.06);overflow:hidden;
  }
  button.my-ticket-btn{
    display:block;width:100%;text-align:left;background:none;border:none;padding:14px 16px;cursor:pointer;color:inherit;
  }
  button.my-ticket-btn:active{background:var(--press);}
  .ticket-number{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:2px;}
  .ticket-title{font-weight:700;font-size:14.5px;line-height:1.35;}
  .ticket-meta-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
  .ticket-badge{
    font-size:12px;font-weight:700;border-radius:8px;padding:3px 8px;display:inline-flex;align-items:center;gap:4px;
  }
  .ticket-badge.state-open{color:var(--info);background:var(--info-bg);}
  .ticket-badge.state-pending{color:var(--warn);background:var(--warn-bg);}
  .ticket-badge.state-closed{color:var(--muted);background:var(--accent-light);}
  .ticket-group{font-size:12.5px;color:var(--muted);}
  .ticket-date{font-size:12px;color:var(--muted);margin-top:4px;}
  .ticket-modal-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14.5px;}
  .ticket-modal-row:last-child{border-bottom:none;}
  .ticket-modal-row .tlabel{color:var(--muted);min-width:92px;flex-shrink:0;font-size:13px;padding-top:1px;}
  .ticket-modal-row .tval{flex:1;line-height:1.4;}

  /* ---------- Ärendedetalj: beskrivning & kommentarer ---------- */
  .ticket-articles-heading{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin:18px 0 8px;}
  .ticket-article{border-radius:12px;padding:12px 14px;margin-bottom:10px;border:1px solid var(--border);background:var(--card);}
  .ticket-article.internal{background:#fdf6e3;border-color:#f0e0ad;}
  .ticket-article-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
  .ticket-article-from{font-size:13.5px;font-weight:700;}
  .ticket-article-badge{font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;color:var(--warn);background:#f0e0ad;letter-spacing:.2px;text-transform:uppercase;}
  .ticket-article-date{font-size:12px;color:var(--muted);}
  .ticket-article-body{font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
  .ticket-articles-loading{font-size:13.5px;color:var(--muted);padding:10px 0;}
  .ticket-articles-error{font-size:13.5px;color:var(--danger);padding:10px 0;}

  /* ---------- Modals (bild & fraktinfo) ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(10,10,15,.72);z-index:100;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.hidden{display:none;}
  /* Bildvisaren öppnas ofta FRÅN ett annat kort (packfotot i fraktkortet) och ska då ligga överst.
     Båda har samma klass, och bildvisaren står först i sidan - utan det här hamnade den under (2026-10-14). */
  #imageModalOverlay{z-index:110;}
  .image-modal-img{max-width:100%;max-height:88vh;border-radius:10px;display:block;}
  .modal-close-btn{
    /* safe-top sedan statusfältet blev genomskinligt (black-translucent,
       2026-09-03) - annars hamnar krysset under klockan i den installerade appen. */
    position:absolute;top:calc(16px + var(--safe-top));right:16px;background:rgba(255,255,255,.92);color:var(--text);border:none;
    width:38px;height:38px;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center;
  }
  .shipment-modal-card{
    background:var(--card);border-radius:var(--radius);max-width:420px;width:100%;max-height:88vh;overflow-y:auto;
    padding:20px;position:relative;
  }
  .shipment-modal-card h3{margin:0 6px 14px 0;font-size:18px;padding-right:30px;}
  .shipment-modal-card.oe-card{max-width:560px;}
  /* Fakturagranskningen är bredare - man ska kunna LÄSA fakturan, inte ana
     den. Själva PDF:en får den höjd som finns. */
  .shipment-modal-card.fk-card{max-width:720px;}
  .fk-ram{width:100%;height:62vh;min-height:320px;border:1px solid var(--border);
    border-radius:12px;background:var(--card);margin:10px 0 12px;}
  /* Frisläppt-läget (2026-09-15). En grön bock och en rad text - det ska
     inte gå att missa att åtgärden är gjord, och kvittot ligger överst i
     modalen där ögat är, inte under fakturabilden. */
  .fgl-kvitto{margin:2px 0 12px;}
  .fgl-slappt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--success);background:var(--success-bg);
              border-radius:12px;padding:12px 14px;margin:2px 0 4px;font-size:14px;line-height:1.5;}
  .fgl-slappt strong{font-weight:600;}
  .fgl-bock{flex:none;width:22px;height:22px;border-radius:50%;background:var(--success);color:var(--on-accent);
            display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
  /* Frisläppt men OSÄND - bärnsten, inte grönt. Halvvägs ska inte se ut
     som klart; det var precis det som gjorde faktura 102637 osynligt
     liggande. */
  .fgl-halvvags{border-color:var(--warn);background:var(--warn-bg);}
  .fgl-halvvags .fgl-bock{background:var(--warn);}
  .fgl-prick{color:var(--success);display:inline-flex;align-items:center;gap:5px;}
  .fgl-prick::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}
  .fgl-vanta{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;padding:32px 0;color:var(--muted);font-size:13px;text-align:center;}
  .fgl-vanta p{margin:0;line-height:1.5;}
  .fgl-notis{margin:10px 0 8px;}
  .fgl-tabell td,.fgl-tabell th{white-space:normal;}
  /* Pall- och emballageraden är det man letar efter - den ska synas. */
  .fgl-pall td{background:var(--success-bg);}
  .fgl-summa{margin:8px 0 12px;font-size:13px;color:var(--muted);text-align:right;}
  .fk-nyckeltal{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 10px;font-size:13px;}
  .fk-nyckeltal span{color:var(--muted);}
  .fk-nyckeltal strong{font-weight:600;}
  /* EXPORTFAKTURA (Mikael 2026-09-29). Kolliraderna ar kort i mobilen och
     en rad pa datorn - samma falt, ingen horisontell scroll. */
  .ex-kolli{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px;}
  /* Rad 1: typ + ta bort. Rad 2: fem sma sifferfalt i lika breda kolumner
     (Mikael 2026-09-29: "Falten blir lite markliga" - sokfaltets stora
     inre marginal klippte 120 till "12"). */
  .ex-kollirad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 8px;align-items:end;
    border:1px solid var(--border);border-radius:12px;padding:10px;}
  .ex-kollirad label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);min-width:0;}
  .ex-kollirad .ex-typ{grid-column:1 / span 4;}
  .ex-kollirad input,.ex-kollirad select{width:100%;min-width:0;box-sizing:border-box;height:38px;padding:6px 8px;
    font-size:15px;border-radius:10px;font-variant-numeric:tabular-nums;}
  .ex-kollirad input{text-align:right;}
  .ex-bort{grid-column:5;justify-self:end;align-self:center;border:0;background:transparent;color:var(--muted);
    font-size:20px;line-height:1;padding:6px 10px;cursor:pointer;border-radius:8px;}
  .ex-bort:hover{background:var(--press);}
  .ex-kollifot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 12px;}
  .ex-ny{border:0;background:transparent;color:var(--text);font-weight:600;font-size:14px;padding:6px 2px;cursor:pointer;}
  .ex-ny:hover{text-decoration:underline;}
  @media (max-width:420px){
    .ex-kollirad{grid-template-columns:repeat(3,minmax(0,1fr));}
    .ex-kollirad .ex-typ{grid-column:1 / span 2;}
    .ex-bort{grid-column:3;}
  }
  .ex-tullstat{font-size:12.5px;line-height:1.55;margin:4px 0 10px;font-variant-numeric:tabular-nums;}
  .ex-tullstat div{padding:3px 0;border-bottom:1px solid var(--border);}
  .ex-summa{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .oe-huvud{margin-bottom:12px;font-size:14px;line-height:1.5;}
  .oe-dov{color:var(--muted);font-size:13px;}
  /* Projektunderlag från ordern (2026-10-13) */
  .pu-lankar{margin:0 0 16px;display:grid;gap:8px;}
  .pu-lank{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:8px;}
  .pu-lank.ar-av{opacity:.65;}
  .pu-lank-text{font-size:14px;line-height:1.45;}
  .pu-lank-text em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;margin-top:2px;}
  .pu-lank-knappar{display:flex;gap:6px;flex-wrap:wrap;}
  .pu-lank-knappar .ko-avbryt{flex:none;width:auto;min-height:32px;padding:0 12px;font-size:12.5px;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;}
  .pu-kund{margin:-8px 0 14px;font-size:13px;color:var(--muted);}
  .pu-rad2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
  @media (max-width:560px){ .pu-rad2{grid-template-columns:1fr;} }
  .pu-avsnitt{margin:4px 0 6px;padding-top:10px;border-top:1px solid var(--border-svag);}
  .pu-rubrikrad{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 8px;}
  .pu-rubrikrad .od-rubrik{margin:0;}
  .pu-hint{font-size:12px;color:var(--muted);}
  .pu-piller{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
  .pu-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--border);
    border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:13px;line-height:1.25;text-align:left;cursor:pointer;}
  .pu-pill em{font-style:normal;font-size:11.5px;opacity:.75;}
  .pu-pill.ar-vald{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .pu-pill.ar-vald::before{content:"✓";}
  .pu-pill.ar-fast{background:var(--press,#f5f6fa);border-color:transparent;color:var(--text);cursor:default;}
  .pu-kontakter{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px;}
  .pu-pill-bort{border:0;background:transparent;color:var(--muted);font:inherit;font-size:15px;line-height:1;padding:0 0 0 4px;cursor:pointer;}
  .pu-str{margin:8px 0 10px;}
  /* .pu-rad2 sätter display:grid, som vinner över [hidden] - "Ena sidan" syntes då också vid inbyggt fall, där
     siffran inte används (Mikael 2026-10-14: "Försöker skriva 28m på ena men andra sidan visar något annat?") */
  .pu-str [hidden]{display:none !important;}
  .pu-str-bild{border:1px solid var(--border);border-radius:12px;background:#fff;overflow-x:auto;margin:6px 0 8px;}
  .pu-str-bild img{display:block;min-width:420px;width:100%;height:auto;}
  .pu-str-ok{font-size:13.5px;color:var(--success);margin:4px 0 8px;}
  .pu-str-andra{min-height:44px;display:flex;align-items:center;font-size:15px;font-variant-numeric:tabular-nums;}
  .pu-str .ko-varning ul{margin:6px 0 6px 18px;padding:0;}
  .pu-mer{margin:2px 0 8px;}
  .pu-mer summary{cursor:pointer;font-size:13.5px;color:var(--text);padding:8px 0;list-style-position:inside;}
  .pu-mer[open] summary{margin-bottom:6px;}
  .pu-fot{position:sticky;bottom:-20px;margin:12px -20px -20px;padding:12px 20px 16px;background:var(--card);
    border-top:1px solid var(--border-svag);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;z-index:1;}
  .pu-fot-hoger{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
  .pu-fot .ko-avbryt,.pu-fot .ko-nasta{flex:none;width:auto;white-space:nowrap;padding:0 16px;}
  /* "Öppna sidan" är en länk bland knappar (Mikael 2026-10-13, skärmbild: understruken text i hörnet) */
  .ko-knappar a.ko-avbryt,.ko-knappar a.ko-nasta{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;}
  /* FRAKTCHIPET I ORDERLISTAN (Mikael 2026-09-22). Samma form som ovriga
     chip pa raden - det ska lasas i forbifarten, inte utredas. */
  .ord-frakt{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;
    font-weight:600;margin:0 8px 0 0;white-space:nowrap;}
  .ord-frakt.ar-levererad{background:var(--success-bg,#e7f5ec);color:var(--success,#1d6b3a);}
  .ord-frakt.ar-pagar{background:var(--info-bg,#eaf1fb);color:var(--info,#1c4f9c);}
  .ord-frakt.ar-drojer{background:var(--warn-bg,#fdf3ec);color:var(--warn,#9a5a1d);}
  .ord-frakt.ar-avvikelse{background:#fdecec;color:#a32020;}
  .ord-frakt.ar-avbokad{background:var(--bg);color:var(--muted);}
  /* I ordervyn öppnar chipet fraktkortet (2026-10-12). */
  .ord-frakt.ord-frakt-klick{cursor:pointer;}
  .ord-frakt.ord-frakt-klick::after{content:" \203A";}
  .ord-frakt.ord-frakt-klick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  /* ETT CHIP, INTE TRE (Mikael 2026-09-22: "Levereras och Pagaende frakt ar
     ju typ samma?"). "Hos lagret" ar samma chip ett steg tidigare i kedjan -
     ordern har lamnat CRM men ingen frakt ar bokad an. Dovare an pagaende
     frakt: det har hant nagot, men inget som rors mot kunden an. */
  .ord-frakt.ar-lager{background:#eef0f5;color:#4a5568;}
  /* ALLA MARKEN PA RADEN SER LIKADANA UT (Mikael 2026-09-22: "nu blir det ju
     olika och valdigt rorigt"). Status, leverans och erkannande ar tre olika
     UPPGIFTER, men de har samma dignitet pa raden - da ska de ha samma form
     och skilja sig bara pa farg. Olika radier och textstorlekar fick ogat att
     leta efter en ordning som inte fanns. */
  /* Chipsen flyttade ut ur metaraden till sin egen (2026-09-22) - marginalen
     ersatts av chipsradens gap, annars far sista chipet en svans. */
  .off-chips .ord-status-hold,.off-chips .ord-status-oppen,.off-chips .ord-status-lev,
  .off-chips .ord-status-klar,.off-chips .ord-status-avbruten,.off-chips .ord-status-annan,
  .off-chips .ord-oe{
    display:inline-block;border-radius:999px;padding:3px 9px;font-size:11.5px;
    font-weight:600;margin:0;white-space:nowrap;}
  .off-chips .ord-frakt{padding:3px 9px;font-size:11.5px;margin:0;}
  .off-chips .ord-oe{background:var(--success-bg,#e7f5ec);color:var(--success,#1d6b3a);}
  /* Kommentarschippet ar samma pill som de andra, i en neutral ton: det ar
     ingen status, det ar en upplysning om att det finns nagot att lasa. */
  .off-chips .ord-kom{display:inline-block;border-radius:999px;padding:3px 9px;font-size:11.5px;
    font-weight:600;margin:0;white-space:nowrap;cursor:pointer;
    background:#eef0f5;color:#4a5568;}
  .off-chips .ord-kom.ar-oppen{background:var(--text);color:var(--on-accent);}
  .ord-kom-panel{padding:0 15px 12px 15px;}
  .ord-kom-rad{font-size:12.5px;line-height:1.5;color:var(--text);
    padding:7px 11px;border-radius:9px;background:var(--bg);margin-top:6px;
    white-space:pre-wrap;}
  .ord-kom-kalla{margin-top:7px;font-size:11px;color:var(--muted);}
  /* ---- Uppföljningsrutan i offerten (2026-09-22) ---- */
  .on-uppf-val{display:flex;gap:10px;align-items:flex-start;padding:10px 0;cursor:pointer;}
  .on-uppf-val input[type=checkbox]{margin-top:3px;flex:none;width:17px;height:17px;}
  .on-uppf-val span{min-width:0;}
  .on-uppf-val b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;}
  .on-uppf-val small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);line-height:1.45;}
  .on-uppf-val.ar-av{cursor:default;opacity:.7;}
  .on-uppf-mer{border-top:1px solid var(--border-svag);margin-top:2px;padding-top:4px;}
  .on-uppf-datum{max-width:240px;}
  .on-uppf-datum small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);line-height:1.45;}
  /* ---- Händelseloggen (2026-09-22) ---- */
  .hlg-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .hlg-filter select,.hlg-filter input{font:inherit;font-size:13px;padding:8px 10px;
    border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);
    min-width:0;flex:1 1 150px;}
  .hlg-rensa{font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:10px;
    border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;flex:0 0 auto;}
  .hlg-antal{font-size:12px;color:var(--muted);margin-bottom:8px;}
  .hlg-lista{list-style:none;margin:0;padding:0;border:1px solid var(--border);
    border-radius:var(--radius);background:var(--card);overflow:hidden;}
  .hlg-rad{border-top:1px solid var(--border-svag);padding:10px 14px;}
  .hlg-rad:first-child{border-top:none;}
  .hlg-rad.ar-klickbar{cursor:pointer;}
  .hlg-rad.ar-oppen{background:var(--bg);}
  .hlg-huvud{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline;}
  .hlg-nar{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;}
  .hlg-vem{font-size:13px;font-weight:600;flex:0 0 auto;}
  .hlg-vad{font-size:13px;flex:1 1 auto;min-width:0;}
  .hlg-nr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;}
  .hlg-detalj{margin:8px 0 0;padding:9px 11px;border-radius:9px;background:var(--bg);
    font-size:11.5px;line-height:1.5;overflow-x:auto;white-space:pre;}
  @media (max-width:560px){
    .hlg-filter select,.hlg-filter input{flex:1 1 100%;}
    .hlg-vad{flex:1 1 100%;}
  }
  /* Orderns egna kommentarer i det interna flodet. Samma rad som ovriga
     inlagg - bara texten star for sig sjalv, utan namn framfor. */
  .oi-flode li.oi-fran-order .oi-txt{white-space:pre-wrap;}
  /* Handelser ar dovare an det nagon skrivit. De ar bakgrund, inte samtal. */
  .oi-flode li.oi-handelse .oi-txt{color:var(--muted);}
  .oi-flode li.oi-handelse .oi-avatar{opacity:.55;}
  /* Rins eget ansikte ska inte tonas ner som ovriga handelser - det ar
     sjalva poangen att det syns. */
  .oi-flode li.oi-handelse .oi-avatar-rin{opacity:1;}
  .oi-avatar-rin{background:#2b2b2e;object-fit:cover;}
  /* Slappytan for filer. Markeringen ar avsiktligt lugn - en streckad ram
     och en aning ton, inte ett blinkande falt: den ska bekrafta att man
     siktar ratt, inte ta over sidan. */
  .oi-filer{transition:background .12s ease,box-shadow .12s ease;}
  .oi-filer.ar-drop{background:var(--bg);box-shadow:inset 0 0 0 2px var(--text);border-radius:12px;}
  .oi-filer.ar-drop *{pointer-events:none;}
  @media (prefers-reduced-motion:reduce){ .oi-filer{transition:none;} }
  .oe-chip{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px;cursor:pointer;}
  .oe-chip:active{opacity:.7;}
  .saldo-nytt{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:14px;margin:12px 0 18px;}
  .saldo-bred{flex:1 1 260px;}
  .saldo-kryss{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0 10px;}
  .saldo-rubrik{margin:0 0 8px;}
  .saldo-lista{display:flex;flex-direction:column;gap:10px;}
  .saldo-kort{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:12px 14px;}
  .saldo-kort.pausad{opacity:.62;}
  .saldo-topp{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;}
  .saldo-status{font-size:11.5px;border:1px solid var(--border);border-radius:999px;padding:2px 9px;white-space:nowrap;}
  .saldo-status.fel{border-color:var(--danger);color:var(--danger);}
  .saldo-till{word-break:break-word;}
  .saldo-knappar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .saldo-knappar .ko-avbryt{padding:6px 12px;font-size:13px;}
  .saldo-radera{color:var(--danger);}
  .oe-kundepost{font-size:12.5px;color:var(--muted);margin:-6px 0 10px;}
  .saldo-pdfruta{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:6px 0 10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
  .saldo-pdflank{text-decoration:none;display:inline-block;white-space:nowrap;}
  .saldo-filnamn{font-size:12px;word-break:break-all;}
  /* Ruttplanering (src/vyer/ruttplanering.js, Mikael 2026-10-19). Kartan är SVG ur lib/karta-se-fi.json. */
  .rp{padding:0 16px 32px;display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto;}
  .rp-kort{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;}
  .rp-kort h3{margin:0;font-size:16px;}
  .rp-kort-topp{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
  .rp-flikar{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
  .rp-flikar button{border:0;background:var(--card);color:var(--text);padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;}
  .rp-flikar button.vald{background:var(--accent);color:var(--on-accent);}
  .rp-kryss{display:flex;align-items:center;gap:8px;font-size:13.5px;}
  .rp-slut{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .rp-slut legend{font-size:12.5px;color:var(--muted);padding:0;margin-bottom:4px;}
  .rp-val{font:inherit;font-size:13.5px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);}
  #rpOmvagRad{flex-wrap:wrap;}
  .rp-karta{display:flex;justify-content:center;}
  .rp-svg{width:100%;max-width:440px;max-height:64vh;display:block;}
  .rp-omr{fill:#f2f2f2;stroke:#bdbdbd;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .12s;}
  .rp-omr.har{fill:#dcdcdc;}
  .rp-omr:hover{fill:#c9c9c9;}
  .rp-omr.vald{fill:var(--accent);stroke:#ffffff;}
  /* INGEN FOKUSRING PÅ LÄNEN (Mikael 2026-10-19, en stor blå cirkel över kartan). Ett klickat län behöll fokus,
     och webbläsaren ritade sin fokusring som en fylld skiva runt det. Appens knappregler (:where([role=button]))
     skalade dessutom länet vid tryck, runt kartans nollpunkt. Tangentbordet får en tunn kantlinje i stället. */
  .rp-omr:focus,.rp-omr:focus-visible{outline:none;}
  .rp-omr:focus-visible{stroke:var(--info);stroke-width:3;}
  .rp-omr:active{transform:none;}
  .rp-siffra{text-anchor:middle;dominant-baseline:central;fill:var(--text);font-weight:600;pointer-events:none;}
  .rp-siffra.vald{fill:var(--on-accent);}
  .rp-valda{display:flex;flex-wrap:wrap;gap:6px;}
  .rp-not{font-size:12.5px;color:var(--muted);margin:0;}
  .rp-fel{color:var(--danger);font-size:13.5px;margin:0;}
  .rp-rad{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .rp-rad .search-input{flex:1 1 220px;min-width:0;}
  .rp-rad .ko-avbryt{flex:0 0 auto;padding:0 14px;}
  .rp-markera .ko-avbryt{min-height:36px;font-size:13px;}
  .rp-platser{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto;border-top:1px solid var(--border-svag);}
  .rp-plats{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:9px 2px;border-bottom:1px solid var(--border-svag);cursor:pointer;font-size:14px;}
  .rp-plats input{margin-top:2px;width:18px;height:18px;}
  .rp-plats small,.rp-ordning small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere;}
  .rp-planera{flex:none;width:100%;}
  .rp-planera:disabled{opacity:.55;cursor:default;}
  .rp-lankar{display:flex;flex-wrap:wrap;gap:8px;}
  .rp-lankar .ko-nasta,.rp-lankar .ko-avbryt{flex:0 0 auto;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
  .rp-ruttsvg{width:100%;max-height:360px;background:#f7f7f7;border-radius:12px;display:block;}
  .rp-bak{fill:#ececec;stroke:#d0d0d0;stroke-width:1;vector-effect:non-scaling-stroke;}
  .rp-linje{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
  .rp-stopp,.rp-startpunkt{fill:var(--accent);stroke:#ffffff;stroke-width:1.5;vector-effect:non-scaling-stroke;}
  .rp-startpunkt{fill:var(--success);}
  .rp-stoppnr{fill:#ffffff;text-anchor:middle;dominant-baseline:central;font-weight:700;pointer-events:none;}
  .rp-ordning{list-style:none;margin:0;padding:0;}
  .rp-ordning li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--border-svag);font-size:14px;}
  .rp-nr{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;}
  .rp-start .rp-nr{background:var(--success);}
  .rp-ta-bort{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;width:32px;height:32px;font-size:16px;line-height:1;cursor:pointer;}
  .rp-ta-bort:hover{color:var(--danger);border-color:var(--danger);}
  @media (prefers-reduced-motion:reduce){ .rp-omr{transition:none;} }
  /* Kedjornas platser i Visma (src/vyer/kedjeplatser.js, 2026-10-19). */
  /* Betalningspåminnelser (src/vyer/paminnelser.js, 2026-10-20) */
  .pm-val{display:flex;align-items:center;gap:8px;font-size:14px;margin:6px 0;}
  .pm-val small{color:var(--muted);}
  .pm-procent{width:80px;padding:6px 10px;}
  .pm-topp{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
  .pm-topp .pm-val{margin:0;font-size:15px;}
  .pm-summa{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .pm-fakturor{list-style:none;margin:10px 0 0;padding:0;}
  .pm-fakturor li{border-top:1px solid var(--border);padding:8px 0;}
  .pm-fakturor label{display:grid;grid-template-columns:auto 80px 1fr auto;gap:4px 12px;align-items:baseline;font-size:13.5px;}
  .pm-fakturor .pm-steg{grid-column:3;color:var(--muted);font-size:12.5px;}
  .pm-fakturor .pm-kvar{grid-column:4;grid-row:1;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .pm-nr{font-weight:600;}
  .pm-rad{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-top:12px;}
  .pm-rad .pm-till{flex:1 1 260px;margin-bottom:0;}
  .pm-rad .pm-till .search-input{width:100%;box-sizing:border-box;}
  .pm-av{opacity:.55;}
  .pm-klar{border-color:var(--ok, #2e7d32);}
  .pm-ok{color:var(--ok, #2e7d32);font-size:13.5px;margin:8px 0 0;}
  .pm-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#2a2a2e;border-radius:16px;overflow:hidden;margin-bottom:12px;}
  .pm-ruta{background:#0e0e10;color:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0;}
  .pm-ruta span{font-size:12px;color:#a1a1a6;text-transform:uppercase;letter-spacing:.04em;}
  .pm-ruta b{font-size:28px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pm-ruta small{font-size:12px;color:#c7c7cc;line-height:1.35;}
  .pm-ruta.pm-larm b{color:#ff9f0a;}
  @media (max-width:760px){ .pm-hero{grid-template-columns:repeat(2,minmax(0,1fr));} .pm-ruta b{font-size:22px;} }
  .pm-atgard summary{font-weight:600;cursor:pointer;}
  .pm-atgard-rad{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:13.5px;}
  .pm-atgard-rad span{color:var(--muted);font-size:12.5px;}
  .pm-atgard-rad .pm-kvar{grid-column:2;grid-row:1;color:var(--text);font-size:13.5px;text-align:right;}
  .pm-skicka{display:flex;gap:10px;justify-content:flex-end;margin:16px 0 40px;}
  .dp-flikar{display:flex;flex-wrap:wrap;gap:6px;}
  .dp-flikar button{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;}
  .dp-flikar button small{color:var(--muted);font-size:11px;}
  .dp-flikar button.vald{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .dp-flikar button.vald small{color:var(--on-accent);opacity:.75;}
  .dp-flikar button:disabled{opacity:.45;cursor:default;}
  details.rp-kort summary{cursor:pointer;font-weight:600;}
  .dp-lista{list-style:none;margin:0;padding:0;}
  .dp-rad{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--border-svag);font-size:14px;}
  .dp-rad small{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere;}
  .dp-topp{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .dp-plats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:4px 0 0 12px;}
  .dp-plats > span:first-child{flex:1 1 260px;min-width:0;}
  .dp-knapp{flex:0 0 auto;min-height:36px;padding:0 14px;font-size:13px;}
  .dp-chip{font-size:11.5px;border:1px solid var(--border);border-radius:999px;padding:2px 9px;white-space:nowrap;}
  .dp-chip.dp-ok{border-color:var(--success);color:var(--success);}
  .dp-chip.dp-fel{border-color:var(--warn);color:var(--warn);}
  .dp-chip.dp-saknas{color:var(--muted);}
  .dp-svar{flex-basis:100%;font-size:12.5px;}
  .dp-ok-text{color:var(--success);}
  .dp-fel-text{color:var(--danger);}
  /* Sökbar mottagarväljare (Mikael 2026-09-03: "Kanske ska lägga in kontakter
     så man kan välja dem på annat sätt, nu blir det väldigt långt" - Dahl har
     hundratals kontakter och chip-molnet fyllde hela dialogen). */
  .mv{margin:-4px 0 12px;}
  .mv-sok{font-size:13px;}
  .mv-traffar{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .mv-tom{font-size:12.5px;color:var(--muted);margin-top:6px;}
  .mv-fler{font-size:12.5px;color:var(--muted);align-self:center;}
  .oe-pdf{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
  .oe-pdf[aria-disabled="true"]{opacity:.55;pointer-events:none;}
  .oe-knapp{margin-left:8px;}
  /* Fält som får bryta rad på mobilen (Mikael 2026-09-02: "ser lite konstigt ut i mobilen") */
  .ko-rad-brytbar{flex-wrap:wrap;}
  .ko-rad-brytbar .ko-falt{flex:1 1 200px;}
  .ko-rad-brytbar .search-input{width:100%;min-width:0;}
  .oe-pdf{white-space:nowrap;}
  .shipment-modal-card .shipment-photo-full{
    width:100%;border-radius:10px;margin-bottom:14px;display:block;cursor:zoom-in;border:1px solid var(--border);
  }
  .shipment-modal-card .shipment-packfoto{margin:4px 0 14px;}
  .shipment-modal-card .shipment-packfoto-btn{
    display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;cursor:pointer;
    border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:600;
  }
  .shipment-modal-card .shipment-packfoto-btn:disabled{opacity:.6;cursor:progress;}
  .shipment-modal-card .shipment-packfoto-fel{font-size:13px;color:var(--danger);margin-top:6px;}
  .shipment-modal-card .shipment-track-link{display:inline-block;margin-top:4px;}

  /* ---------- Streckkodsscanner (kamera, "Generera etiketter") ---------- */
  .barcode-modal-card{
    background:#000;border-radius:var(--radius);max-width:480px;width:100%;max-height:88vh;
    overflow:hidden;position:relative;display:flex;flex-direction:column;
  }
  .barcode-video-wrap{position:relative;width:100%;aspect-ratio:3/4;background:#000;overflow:hidden;}
  /* Html5Qrcode (se openBarcodeScanner()) injicerar själv en <video>/<canvas>
     i #barcodeReaderTarget när kameran startar - tvinga den att fylla ut
     wrappen istället för bibliotekets egna storleksberäkning. */
  #barcodeReaderTarget{width:100%;height:100%;}
  #barcodeReaderTarget video, #barcodeReaderTarget canvas, #barcodeReaderTarget img{
    width:100% !important;height:100% !important;object-fit:cover;display:block;
  }
  .barcode-viewfinder{
    position:absolute;left:10%;right:10%;top:38%;bottom:38%;
    border:2.5px solid rgba(255,255,255,.85);border-radius:10px;
    box-shadow:0 0 0 2000px rgba(0,0,0,.35);pointer-events:none;
  }
  .barcode-status-bar{
    padding:14px 16px;background:var(--text);color:var(--on-accent);font-size:14.5px;text-align:center;min-height:20px;
  }
  .barcode-status-bar.is-ok{color:#8be28b;}
  .barcode-status-bar.is-error{color:#f5a3a3;}

  .section .collapsible-header{
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 16px;margin:0 0 10px;min-height:52px;
    box-shadow:0 1px 2px rgba(20,20,40,.06);
    font-size:16px !important;font-weight:700 !important;color:var(--text) !important;
    text-transform:none !important;letter-spacing:normal !important;
  }
  /* RATTAT 2026-09-15: stod var(--press) och vann pa specificitet over den
     svarta pillen langre ner - vid tryck blev det vit text pa nastan vit
     platta, kontrast 1,08:1, rubriken forsvann helt. */
  .section .collapsible-header:active{background:#333;}
  .collapsible-header .collapsible-title{display:flex;align-items:center;gap:8px;}
  .collapsible-header .shipments-count{
    font-size:12.5px;font-weight:700;color:var(--muted);background:var(--accent-light);
    border-radius:20px;padding:2px 9px;
  }
  .collapse-chevron{
    font-size:14px;color:var(--text);transition:transform .15s ease;flex-shrink:0;
    width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:50%;background:var(--accent-light);
  }
  #shipmentsSection.is-collapsed .info-card{display:none;}
  /* Kundkortets Fakturor/Bolagsinfo (2026-09-03) - samma hopfällning som Frakter */
  .kk-sektion.is-collapsed .info-card,.kk-sektion.is-collapsed > .kk-innehall{display:none;}
  .kk-sektion .kk-innehall > .off-lista{padding-left:0;padding-right:0;}
  .kk-sektion.is-collapsed .collapsible-header{margin-bottom:0;}
  .kk-sektion.is-collapsed .collapse-chevron{transform:rotate(-90deg);}
  .kk-sen{color:var(--danger);font-weight:700;} .kk-sen-mkt{text-decoration:underline;}
  .kk-rad-sen td{background:#fff7f6;}
  .kk-falt-rod strong{color:var(--danger);}
  .kk-neg{color:var(--danger);}
  .kk-fakturor td,.kk-nyckeltal td{font-variant-numeric:tabular-nums;}
  .kk-risk{border-radius:12px;padding:12px 14px;margin-bottom:12px;border:1px solid var(--border);background:#f6f6f8;}
  .kk-risk-rubrik{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;margin-bottom:6px;}
  .kk-risk-prick{width:12px;height:12px;border-radius:50%;background:#9a9aa3;flex:none;}
  .kk-risk-gron{background:var(--success-bg);border-color:#bfe3cc;} .kk-risk-gron .kk-risk-prick{background:var(--success);}
  .kk-risk-gul{background:#fff8e6;border-color:#f3dc9a;} .kk-risk-gul .kk-risk-prick{background:#d99a00;}
  .kk-risk-rod{background:var(--danger-bg);border-color:var(--danger-soft);} .kk-risk-rod .kk-risk-prick{background:var(--danger);}
  .kk-risk-lista{margin:0 0 8px;padding-left:18px;font-size:13.5px;line-height:1.5;}
  .kk-risk-rad{font-size:13.5px;font-weight:600;margin-bottom:6px;}
  #shipmentsSection.is-collapsed .collapsible-header{margin-bottom:0;}
  #shipmentsSection.is-collapsed .collapse-chevron{transform:rotate(-90deg);}

  .alert-box{border-radius:var(--radius);padding:14px 16px;border:1px solid var(--danger-soft);background:var(--danger-bg);}
  .alert-box .alert-title{font-size:12.5px;font-weight:800;color:var(--danger);letter-spacing:.3px;text-transform:uppercase;margin-bottom:6px;}
  .alert-box .alert-body{font-size:14px;color:#8f2b20;line-height:1.6;}

  footer.app-footer{text-align:center;color:var(--muted);font-size:12px;padding:18px 16px 8px;}
  /* NY VERSION FINNS - se crmVersionsvakt(). En diskret remsa, inte en
     dialogruta: den som mitt i en offert inte vill bli avbruten ska kunna
     skriva klart. Ligger over allt annat och foljer med vid scroll. */
  .ver-remsa{position:fixed;left:0;right:0;bottom:0;z-index:9000;
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--info-bg,#eaf1fb);color:var(--info,#1c4f9c);
    box-shadow:0 -2px 12px rgba(0,0,0,.10);font-size:13.5px;}
  .ver-remsa b{font-weight:600;}
  .ver-remsa button{border:0;font:inherit;font-weight:600;cursor:pointer;border-radius:999px;
    padding:8px 16px;background:var(--info,#1c4f9c);color:#fff;}
  .ver-remsa .ver-senare{background:transparent;color:inherit;font-weight:500;
    text-decoration:underline;padding:8px 4px;}
  @media (max-width:520px){ .ver-remsa{font-size:13px;gap:10px;} }

  @media (min-width:480px){
    .kpi-grid{grid-template-columns:1fr 1fr;}
  }

  /* ==================================================================
     FÄLTVÄNLIG REDESIGN — visuellt overlay ovanpå ovanstående grundstilar.
     Samma klassnamn/selektorer som ovan återanvänds med avsikt: JS:ens
     class-namn (statusar, deltas, etc.) rörs inte, bara hur de ritas ut.
     ================================================================== */

  html,body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
  h1,h2,h3,.brand,.menu-card-title,.menu-card-sub,.cname,.customer-card .cname,.kpi-value,.kpi-label,
  .summary-hero-label,.summary-hero-value,.summary-value,.summary-label,.stat-value,.section h3,
  .detail-header h2,.count-pill,.sort-select,.page-btn,.retry-btn,.ms-signin-btn,.scope-toggle button,
  .followup-badge,.ticket-badge,.note-status-badge,.ticket-title,.ticket-number,.my-shipment-customer,
  .shipment-order,.location-name,.contact-name,.note-item-author,.tab-label,.acc-title,
  .collapsible-header .collapsible-title,.exc-tag,.ticket-article-badge,.ticket-article-from,
  .note-add-btn{
    font-family:"Inter",-apple-system,sans-serif;
  }

  /* ---------- Header ---------- */
  header.topbar{display:flex;justify-content:center;align-items:center;padding:0 12px;height:64px;}
  .topbar-logo-btn{background:none;border:none;padding:6px;min-width:44px;min-height:44px;display:flex;align-items:center;cursor:pointer;border-radius:10px;}
  .topbar-logo-btn:active{background:rgba(255,255,255,.12);}
  .topbar-logo-btn .topbar-logo{height:20px;}
  /* TESTMILJON SYNS PA FARGEN (Mikael 2026-10-07: "ljusbla list i toppen, istallet for svart, sa
     man enkelt kan se att man ar i testmiljon"). Klassen satts bara pa pim-test.anrin.se, se
     AR_TESTMILJO i skriptet. Bara toppraden byter farg - flikmenyn och knapparna ar som i prod.
     Logotypen ar svart i grunden och vands till vit med ett inline-filter; pa ljusbla ska den vara svart. */
  html.testmiljo header.topbar{--accent:#cfe6fb;--on-accent:#0b1f33;}
  html.testmiljo header.topbar .topbar-logo{filter:none !important;}
  html.testmiljo body::before{background:#cfe6fb;}

  /* ---------- Logga ut: undanskymd länk längst ner på startmenyn ---------- */
  .hub-logout-row{display:flex;justify-content:center;align-items:center;gap:4px;padding:6px 16px 0;}
  .hub-logout-link{background:none;border:none;color:var(--muted);font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;padding:10px 14px;min-height:44px;cursor:pointer;}
  #pushOptInBtn.hub-logout-link{color:var(--accent);}

  /* ---------- Startmenyns ikoner: gråskala så de matchar den monokroma paletten ---------- */
  /* ÄNDRAT 2026-08-31: ikonerna är SVG med currentColor - filtret behövdes
     bara för emojins färger. */
  .menu-card-icon{color:var(--text);opacity:.75;}

  /* ---------- Pills: search, selects, buttons ---------- */
  .search-input,.note-status-select,.note-date-input,.sort-select{border-radius:100px;padding-left:18px;padding-right:18px;}
  .page-btn,.retry-btn,.ms-signin-btn{border-radius:100px;min-height:44px;}
  .hub-back-btn{min-height:44px;}
  /* SAMMA KNAPP OVERALLT (2026-09-15, genomlysningen). Appen hade sex olika
     horrnadier (9/10/11/12/100/999 px) och sju hojder (38-52 px) for vad som
     ar en och samma knapp - det syntes tydligt nar man gick mellan vyerna.
     Pillformen och 44 px ar redan standard pa raden ovan; har foljer de som
     stod utanfor. Segmentvaljarna (.scope-toggle button, 38 px) ar med flit
     lagre - de sitter i par inuti en ram och ar inte primara tryckytor. */
  .off-ny,.ko-nasta,.ko-skapa,.ko-avbryt,.dk-spara,.dk-bort,
  .kund-offert-btn,.kund-pris-btn,.on-nyrad,.on-textrad,.on-panel-fritext-btn{
    border-radius:100px;min-height:44px;
  }
  .scope-toggle{border-radius:100px;padding:3px;}
  .scope-toggle button{border-radius:100px;min-height:38px;}

  /* ---------- Cards: flatter, borderless shadow, softer border ---------- */
  .customer-card,.kpi-card,.info-card,.summary-card,.my-shipments-list li,.my-tickets-list li,.menu-card{
    box-shadow:none;border-color:rgba(0,0,0,.14);
  }

  /* ---------- Deltas/trender: aldrig färg ensamt — pilen bär betydelsen ---------- */
  .customer-card .ctrend.up,.kpi-change.up{color:var(--text);}
  .customer-card .ctrend.down,.kpi-change.down{color:var(--muted);}
  .kpi-change.flat{color:var(--muted);}

  /* ---------- Statusmärken: monokrom 3-nivåskala + prick, aldrig färg ensamt ---------- */
  .ticket-badge,.note-status-badge,.followup-badge{
    border-radius:100px;padding:4px 10px 4px 7px;border:1px solid transparent;display:inline-flex;align-items:center;
  }
  .ticket-badge::before,.note-status-badge::before,.followup-badge::before{
    content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;flex-shrink:0;
  }
  /* Nivå A — aktiv/brådskande: fylld svart */
  .ticket-badge.state-open,.note-status-badge.status-planerad,.followup-badge.overdue{
    color:var(--on-accent);background:var(--accent);
  }
  .ticket-badge.state-open::before,.note-status-badge.status-planerad::before,.followup-badge.overdue::before{
    background:var(--card);
  }
  /* Nivå B — pågående: svart kontur */
  .ticket-badge.state-pending,.note-status-badge.status-pagaende,.followup-badge.today{
    color:var(--text);background:var(--card);border-color:var(--accent);
  }
  .ticket-badge.state-pending::before,.note-status-badge.status-pagaende::before,.followup-badge.today::before{
    background:var(--card);border:1.5px solid var(--accent);width:5px;height:5px;
  }
  /* Nivå C — avslutad/kommande: dämpad grå kontur */
  .ticket-badge.state-closed,.note-status-badge.status-avslutad,.followup-badge.upcoming{
    color:var(--muted);background:var(--accent-light);border-color:transparent;
  }
  .ticket-badge.state-closed::before,.note-status-badge.status-avslutad::before,.followup-badge.upcoming::before{
    background:var(--muted);
  }

  /* ---------- Frakter: samma ✓ ● ✕-ikoner bär identiteten, inte färgen ---------- */
  .shipment-status.status-delivered,.shipment-status-icon.icon-delivered{color:var(--muted);}
  .shipment-status.status-transit,.shipment-status-icon.icon-transit{color:var(--text);}
  .shipment-status.exception-text,.shipment-status-icon.icon-exception{color:var(--text);font-weight:700;}
  .shipment-item.exception{background:var(--accent-light);border-left:3px solid var(--accent);}
  .shipment-order .exc-tag{background:var(--accent);color:var(--on-accent);}
  .customer-card .ship-flag{color:var(--text);background:var(--accent-light);}

  /* ---------- Varningar/fel: monokromt, svart accent istället för rött ---------- */
  .alert-box{border-color:var(--border);background:var(--accent-light);}
  .alert-box .alert-title{color:var(--text);}
  .alert-box .alert-body{color:var(--text);}
  .state-screen .error-box{background:var(--accent-light);color:var(--text);}
  .note-save-error,.ticket-articles-error{color:var(--text);font-weight:600;}
  .note-item-action.danger{color:var(--text);}
  .ticket-article.internal{background:var(--accent-light);border-color:var(--border);}
  .ticket-article-badge{color:var(--text);background:var(--border);}

  /* ---------- Hopfällbara sektioner: svart pill-header (Fältvänlig-dragspel) ---------- */
  .section .collapsible-header{background:var(--accent);color:var(--on-accent);border:none;border-radius:100px;}
  .collapsible-header .collapsible-title{color:var(--on-accent);}
  .collapsible-header .shipments-count{background:rgba(255,255,255,.2);color:var(--on-accent);}
  .collapse-chevron{background:rgba(255,255,255,.16);border-color:transparent;color:var(--on-accent);}

  /* ---------- Anteckningskort: ramkort + pill-badge + 44px åtgärdsrad ---------- */
  .note-item{border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px;}
  .note-item:last-child{margin-bottom:0;}
  .note-item-actions{gap:18px;margin-top:10px;}
  .note-item-action{min-height:44px;display:inline-flex;align-items:center;}

  /* ---------- Kontaktpersoner: ring-knapp bredvid varje kontakt ---------- */
  .contact-item-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .contact-text{min-width:0;flex:1;}
  .contact-call-btn{
    flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);
    display:flex;align-items:center;justify-content:center;
  }
  .contact-call-btn:active{opacity:.8;}

  /* ---------- Sticky "Lägg till anteckning" ---------- */
  .note-action-bar{position:sticky;bottom:0;z-index:15;padding:10px 0 2px;background:var(--bg);}
  /* Klistrad bara på mobil, där den gör nytta när man rullar i en lång
     anteckningslista. På en bred skärm (Mikael 2026-09-02) svävade den över
     de utfällda offertraderna med sin egen bakgrundsplatta och såg mest
     konstig ut - där står den sist i listan som en vanlig knapp. */
  @media (min-width:900px) and (min-height:600px){
    .note-action-bar{position:static;background:none;padding:14px 0 0;}
  }
  .note-add-btn{
    width:100%;min-height:48px;border-radius:100px;background:var(--accent);color:var(--on-accent);border:none;
    font-weight:700;font-size:14px;letter-spacing:.3px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
  }
  .note-form{transition:none;}
  .note-form.is-collapsed{display:none;}

  /* ---------- Nedre flikmeny ---------- */
  .tabbar{
    position:relative;flex:none;z-index:25;width:100%;max-width:640px;margin:0 auto;
    display:flex;background:var(--accent);padding-bottom:var(--safe-bottom);
    box-shadow:0 -2px 10px rgba(0,0,0,.18);
  }
  .tab-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;color:rgba(255,255,255,.58);padding:9px 2px 10px;min-height:58px;cursor:pointer;min-width:0;
  }
  .tab-icon{display:flex;position:relative;}
    /* SJU FLIKAR SEDAN 2026-09-14 (Hem tillkom). Etiketten krympte med en
     tiondel och padding med ett par pixlar - "Uppföljning" är den längsta
     och ska fortfarande få plats utan att brytas. */
  .tab-label{font-size:9px;font-weight:700;letter-spacing:0;white-space:nowrap;}
  /* Sex flikar (Offerter tillkom 2026-08-31) ryms på en 375 px skärm bara om
     etiketterna kryper ihop något. Ikonerna behåller sin storlek - de är det
     man siktar på. */
  @media (max-width:400px){
    .tab-label{font-size:8.5px;letter-spacing:0;}
    .tab-btn{padding-left:2px;padding-right:2px;}
  }
  .tab-btn.active{color:var(--on-accent);}
  /* Röd påminnelsebricka på "Uppföljning"-fliken, iOS-stil - TILLAGT
     2026-08-26 (Mikael: "en sådan röd påminnelse bricka alla iOS style"),
     visar dagens + passerade aktiviteter. Ringen runt (box-shadow i samma
     färg som flikmenyns bakgrund) är vad som får den att se utstansad ut
     mot den färgade bakgrunden, precis som riktiga iOS-brickor mot
     appikonen. Se updateTabFollowupBadge()/updateFollowupSummary().*/
  .tab-badge{
    position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;
    border-radius:9px;background:#ff3b30;color:var(--on-accent);font-size:10px;font-weight:700;
    line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--accent);
  }

  /* Kundkortets mejlrader (2026-09-30) - hela raden ar lanken */
  .kk-mejl-rad{display:flex;flex-direction:column;gap:2px;padding:12px 4px;min-height:48px;border-bottom:1px solid rgba(128,128,128,.22);color:inherit;text-decoration:none;}
  .kk-mejl-amne{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .kk-mejl-meta{font-size:13px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---------- Ärenden = inkorgen (2026-09-30) ---------- */
  .ik-vy{display:flex;flex-direction:column;gap:10px;}
  .ik-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ik-chips::-webkit-scrollbar{display:none;}
  .ik-chip{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;}
  .ik-chip b{font-weight:600;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums;}
  select.ik-chip{appearance:none;-webkit-appearance:none;padding-right:14px;max-width:180px;text-overflow:ellipsis;}
  .ik-chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .ik-chip.is-on b{opacity:.8;}
  .ik-sok{width:100%;box-sizing:border-box;}
  .ik-synk{font-size:12px;color:var(--muted);}
  .ik-synkfel{font-size:13px;color:var(--warn);background:var(--warn-bg);border-radius:12px;padding:10px 12px;}
  .ik-lista{display:flex;flex-direction:column;gap:8px;}
  .ik-rad{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border-svag);border-radius:16px;padding:12px 14px;color:var(--text);font:inherit;cursor:pointer;}
  .ik-rad:active{background:var(--press);}
  .ik-rad-topp{display:flex;gap:8px;align-items:baseline;}
  .ik-fran{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-tid{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .ik-nr{font-weight:600;}
  .ik-vem{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-kontakt{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border-svag);border-radius:12px;padding:10px 12px;font-size:14px;}
  .ik-kontakt[hidden]{display:none;}
  .ik-kontakt span{flex:1 1 220px;min-width:0;}
  .ik-amne{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-utdrag{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-rad.is-olast .ik-fran,.ik-rad.is-olast .ik-amne{font-weight:700;}
  .ik-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
  .ik-tag{font-size:11px;font-weight:600;letter-spacing:.2px;border-radius:8px;padding:2px 8px;background:var(--bg);color:var(--muted);}
  .ik-tag.ik-ny{background:var(--danger-bg);color:var(--danger);}
  .ik-tag.ik-pagar{background:var(--info-bg);color:var(--info);}
  .ik-tag.ik-vantar{background:var(--warn-bg);color:var(--warn);}
  .ik-tag.ik-klar{background:var(--success-bg);color:var(--success);}
  .ik-mer,.ik-lank{background:none;border:0;color:var(--info);font:inherit;min-height:44px;cursor:pointer;padding:0;text-align:left;}
  .ik-topp,.ik-statusrad{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .ik-fyll{flex:1;}
  /* Flikrad med öppna ärenden - bara på dator. */
  .ik-flikrad{display:none;}
  @media (min-width:1100px){
    .ik-flikrad{flex:none;display:flex;gap:8px;align-items:stretch;overflow-x:auto;padding:8px 24px;background:var(--bg);border-bottom:1px solid var(--border-svag);}
    .ik-flikrad[hidden]{display:none;}
  }
  .ik-flik{flex:none;display:flex;align-items:center;width:200px;border:1px solid var(--border-svag);border-radius:12px;background:var(--card);}
  .ik-flik.is-aktiv{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text);}
  .ik-flik-knapp{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;border:0;background:none;color:var(--text);font:inherit;padding:7px 4px 7px 12px;cursor:pointer;min-height:44px;}
  .ik-flik-rad1{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;min-width:0;}
  .ik-flik-rad1 span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-flik-rad2{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-flik.har-nytt{border-color:var(--info);}
  .ik-flik.har-nytt .ik-flik-rad2{color:var(--info);font-weight:600;}
  .ik-prick{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);}
  .ik-prick.ik-p-ny{background:var(--warn);}
  .ik-prick.ik-p-pagar{background:transparent;box-shadow:inset 0 0 0 2px var(--warn);}
  .ik-prick.ik-p-nytt{background:var(--info);}
  .ik-flik-x{flex:none;border:0;background:none;color:var(--muted);font:inherit;font-size:16px;min-width:36px;min-height:44px;cursor:pointer;}
  .ik-flik-alla{flex:none;border:1px solid var(--border-svag);border-radius:12px;background:none;color:var(--text);font:inherit;font-size:13px;padding:0 14px;cursor:pointer;min-height:44px;}
  .ik-narvaro{display:flex;align-items:center;}
  .ik-narvaro .oi-avatar{width:30px;height:30px;font-size:11px;margin-left:-8px;box-shadow:0 0 0 2px var(--bg);}
  .ik-narvaro .oi-avatar:first-child{margin-left:0;}
  .ik-narvaro .ik-narvaro-text{font-size:12px;color:var(--muted);margin-right:8px;}
  .ik-skriv-drop{outline:2px dashed var(--info);outline-offset:4px;border-radius:12px;}
  /* Avsluta/Skräp/Tillbaka ligger kvar överst när man scrollar i ärendet. */
  .ik-vy > .ik-topp{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 0;margin-top:-8px;}
  .ik-tillbaka,.ik-knapp{min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);padding:0 14px;font:inherit;font-size:14px;cursor:pointer;}
  .ik-knapp.ik-pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .ik-rubrik{font-size:20px;line-height:1.25;margin:4px 0 0;text-wrap:balance;overflow-wrap:anywhere;}
  .ik-info{font-size:13px;color:var(--muted);overflow-wrap:anywhere;}
  .ik-falt{background:var(--card);border:1px solid var(--border-svag);border-radius:16px;padding:2px 14px;}
  .ik-falt-rad{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--border-svag);}
  .ik-falt-rad:last-child{border-bottom:0;}
  .ik-falt-rad>span{flex:none;width:82px;font-size:13px;color:var(--muted);}
  .ik-falt-rad select{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:var(--text);font:inherit;text-align:right;text-align-last:right;cursor:pointer;}
  .ik-kundknapp{flex:1;min-width:0;min-height:44px;border:0;background:none;color:var(--info);font:inherit;text-align:right;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-kundknapp.is-vald{color:var(--text);font-weight:600;}
  .ik-falt-rad .ik-lank{flex:none;}
  /* Smal skärm: kundnamnet behåller sin plats och knapparna går ner på en egen rad. */
  .ik-kundrad{flex-wrap:wrap;column-gap:10px;row-gap:0;}
  .ik-kundrad .ik-kundknapp{flex:1 1 140px;}
  .ik-kundatg{display:flex;gap:20px;margin-left:auto;}
  .ik-glom{flex-wrap:wrap;padding:8px 0;}
  .ik-glom .ik-info{flex:1 1 240px;margin:0;padding:4px 0;}
  .ik-glom .ik-lank{margin-left:auto;}
  /* Ordern i ärendet (2026-10-06): samma kortform som fälten ovanför. */
  .ik-orderkort{display:flex;flex-direction:column;gap:8px;}
  .ik-rin-uppdrag{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--border-svag);border-radius:14px;padding:12px 14px;}
  .ik-rin-uppdrag > div{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .ik-rin-uppdrag b{font-size:14px;font-weight:600;}
  .ik-rin-uppdrag span{font-size:13px;color:var(--muted);}
  .ik-rin-uppdrag .ik-ok-knappar{margin-top:6px;}
  .ik-ok{background:var(--card);border:1px solid var(--border-svag);border-radius:16px;padding:12px 14px;}
  .ik-ok-topp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .ik-ok-topp b{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-ok-topp .ik-tag{flex:none;}
  .ik-tag.ik-ok-hold{background:var(--warn-bg);color:var(--warn);}
  .ik-tag.ik-ok-oppen{background:var(--info-bg);color:var(--info);}
  .ik-tag.ik-ok-klar{background:var(--success-bg);color:var(--success);}
  .ik-ok-meta{margin-top:3px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere;}
  .ik-ok-besk{margin-top:4px;font-size:13px;}
  .ik-ok-kvitto{margin-top:8px;font-size:13px;color:var(--success);}
  .ik-ok-steg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
  .ik-ok-steg li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);}
  .ik-ok-steg li b{flex:none;width:118px;font-weight:600;color:var(--muted);}
  .ik-ok-steg li span:last-child{min-width:0;overflow-wrap:anywhere;}
  .ik-ok-steg li.is-klar b{color:var(--text);}
  .ik-ok-bock{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border);display:inline-grid;place-items:center;font-size:10px;line-height:1;align-self:flex-start;margin-top:1px;}
  .ik-ok-steg li.is-klar .ik-ok-bock{background:var(--success);box-shadow:none;color:#fff;}
  /* Smalt (mobil): tid och namn på egen rad under stegnamnet. */
  @media (max-width:520px){
    .ik-ok-steg li{flex-wrap:wrap;row-gap:0;}
    .ik-ok-steg li b{width:auto;}
    .ik-ok-steg li span:last-child{flex-basis:100%;padding-left:24px;}
  }
  .ik-ok-kvitto.is-fel{color:var(--danger);}
  .ik-ok-knappar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
  .ik-ok-knappar .ik-lank{min-height:44px;}
  .ik-ok-fraga{font-size:13.5px;font-weight:600;margin-right:4px;}
  /* Ärendet bredvid (2026-10-06): en panel till höger, huvudytan krymper i stället för att täckas. */
  .ik-bredvid-knapp{display:none;}
  .ik-panel{display:none;}
  @media (min-width:1200px) and (min-height:600px){
    :root{ --ik-panel-w:min(460px, 36vw); }
    body.ik-panel-oppen{padding-right:var(--ik-panel-w);}
    .ik-bredvid-knapp{display:inline-flex;align-items:center;}
    .ik-panel{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:var(--ik-panel-w);z-index:30;
      background:var(--bg);border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.06);}
    .ik-panel-huvud{flex:none;display:flex;align-items:center;gap:6px;padding:12px 12px 10px 18px;border-bottom:1px solid var(--border-svag);background:var(--card);}
    .ik-panel-titel{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .ik-panel-knapp{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--text);cursor:pointer;}
    .ik-panel-knapp:hover{background:var(--bg);}
    .ik-panel-knapp:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
    .ik-panel-kropp{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
    .ik-panel .ik-vy{padding-left:16px;padding-right:16px;}
    .ik-panel .ik-tillbaka,.ik-panel .ik-bredvid-knapp{display:none;}
    .ik-panel .ik-statussegment button{min-width:0;}
    body.ik-panel-oppen .ik-forhand{right:var(--ik-panel-w);width:calc(100vw - var(--ik-panel-w) - var(--rail-w, 0px));}
  }
  @media (min-width:1200px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
    .ik-panel{animation:ikPanelIn .28s cubic-bezier(.32,.72,0,1);}
    @keyframes ikPanelIn{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
  }
  .ik-rin-typ{margin-left:auto;flex:none;}
  .ik-chatt{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
  /* Historikens rader (2026-10-06): tysta, centrerade, som systemrader i en chatt. */
  /* Händelserna som interna notiser med profilbild, som orderns interna flöde (Mikael 2026-10-08).
     Dovare än det någon skrivit: de är bakgrund, inte samtal. Rins ansikte tonas inte ner. */
  .ik-handelse{align-self:stretch;display:flex;align-items:center;gap:10px;padding:2px 0;font-size:13px;line-height:1.4;color:var(--muted);}
  .ik-handelse .ik-ant-bild{width:32px;justify-content:center;margin-top:0;}
  .ik-handelse .oi-avatar{width:26px;height:26px;font-size:10px;opacity:.55;}
  .ik-handelse .oi-avatar-rin{opacity:1;}
  .ik-handelse-text{flex:1 1 auto;min-width:0;}
  .ik-handelse time{flex:none;font-size:12px;white-space:nowrap;}
  .ik-inlagg{max-width:96%;align-self:flex-start;background:var(--card);border:1px solid var(--border-svag);border-radius:18px 18px 18px 6px;padding:10px 14px;}
  .ik-inlagg.is-ut{align-self:flex-end;background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:18px 18px 6px 18px;}
  .ik-inlagg-huvud{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
  .ik-inlagg-vem{display:flex;flex-direction:column;min-width:0;}
  .ik-inlagg-huvud b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-inlagg-huvud small{font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-inlagg-huvud time{flex:none;font-size:12px;opacity:.7;white-space:nowrap;padding-top:2px;}
  .ik-inlagg-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.45;}
  .ik-inlagg.is-ut .ik-lank{color:var(--on-accent);text-decoration:underline;}
  .ik-inlagg.ik-visar-html{max-width:100%;align-self:stretch;}
  .ik-inlagg.is-ut.ik-visar-html{background:var(--card);border-color:var(--border);color:var(--text);}
  .ik-inlagg.is-ut.ik-visar-html .ik-lank{color:var(--info);}
  .ik-iframe{width:100%;height:240px;display:block;border:1px solid var(--border);border-radius:12px;background:#fff;margin-top:8px;}
  .ik-bilagor{display:flex;flex-direction:column;gap:6px;}
  .ik-vidare-bilagor{display:grid;gap:4px;margin:8px 0 2px;}
  .ik-vidare-bilagor .ik-kryss{margin:0;}
  .ik-vidare-bilagor small{color:var(--muted);margin-left:4px;}
  .ik-bilaga-rad{display:flex;gap:8px;align-items:stretch;}
  .ik-bilaga-rad .ik-bilaga{flex:1;min-width:0;}
  .ik-lank{align-self:flex-start;min-height:44px;background:none;border:0;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;padding:0 4px;}
  .ik-skapaorder{flex:none;min-height:44px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:0 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
  .ik-skapaorder:disabled{opacity:.6;cursor:default;}
  .ik-bilaga{display:flex;gap:8px;align-items:center;min-height:44px;background:var(--card);border:1px solid var(--border-svag);border-radius:12px;padding:0 12px;color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere;}
  .ik-bilaga em{font-style:normal;color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap;}
  /* Förhandsgranskning av bilaga (2026-10-01): bred skärm = panel till höger om ärendet, smal = helskärm */
  .ik-forhand{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--text);display:flex;flex-direction:column;box-sizing:border-box;}
  .ik-forhand-topp{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);flex:none;}
  .ik-forhand-namn{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-forhand-kropp{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:stretch;}
  .ik-forhand-kropp iframe{flex:1;width:100%;border:0;background:#fff;}
  .ik-forhand-kropp img{max-width:100%;height:auto;align-self:center;margin:12px;}
  .ik-forhand-kropp pre{margin:0;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;}
  .ik-forhand-info{padding:24px 16px;color:var(--muted);text-align:center;}
  /* Excel i förhandsgranskningen (2026-10-01) */
  .ik-xl-flikar{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;border-bottom:1px solid var(--border);flex:none;}
  .ik-xl-info{padding:8px 12px;color:var(--muted);font-size:12px;flex:none;}
  .ik-xl-wrap{flex:1;min-height:0;overflow:auto;}
  .ik-xl-tabell{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;}
  .ik-xl-tabell th,.ik-xl-tabell td{border:1px solid var(--border-svag);padding:4px 8px;white-space:pre;max-width:320px;overflow:hidden;text-overflow:ellipsis;}
  .ik-xl-tabell thead th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:600;z-index:1;}
  .ik-xl-tabell .ik-xl-nr{position:sticky;left:0;background:var(--card);color:var(--muted);text-align:right;}
  .ik-xl-tabell thead .ik-xl-nr{z-index:2;}
  .ik-xl-tabell .ik-xl-tal{text-align:right;}
  @media (min-width:1100px){
    .ik-forhand{inset:auto;right:0;bottom:0;width:min(48vw,860px);z-index:30;border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.08);}
    /* Panelen öppen: sidan fyller utrymmet vänster om den (tidigare krympte kolumnen till ~250 px och lämnade tomrum), tråden centreras där. */
    main:has(.ik-vy.ik-delad){max-width:none;margin:0;padding-right:min(48vw,860px);box-sizing:border-box;}
    .ik-vy.ik-delad{width:100%;max-width:720px;margin:0 auto;}
  }
  .ik-ark{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;}
  .ik-ark-kropp{background:var(--bg);width:100%;max-width:640px;max-height:85vh;border-radius:18px 18px 0 0;padding:14px 16px calc(var(--safe-bottom) + 14px);display:flex;flex-direction:column;gap:10px;box-sizing:border-box;}
  @media (min-width:700px){ .ik-ark{align-items:center;} .ik-ark-kropp{border-radius:18px;} }
  .ik-ark-topp{display:flex;align-items:center;justify-content:space-between;}
  .ik-ark-topp h3{margin:0;font-size:18px;}
  .ik-ark-stang{min-width:44px;min-height:44px;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;}
  .ik-ark-doman{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);}
  .ik-ark-lista{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px;}
  .ik-ark-rad{display:flex;justify-content:space-between;gap:10px;min-height:48px;align-items:center;background:var(--card);border:1px solid var(--border-svag);border-radius:12px;padding:0 14px;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
  .ik-ark-rad em{font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap;}
  .ik-inlagg.is-anteckning{align-self:stretch;max-width:none;background:var(--warn-bg);border:1px dashed var(--warn);border-radius:12px;}
  .ik-ant-rad{display:flex;gap:10px;align-items:flex-start;align-self:stretch;}
  .ik-ant-rad .ik-inlagg{flex:1;min-width:0;}
  .ik-ant-rad.is-ut{justify-content:flex-end;}
  .ik-ant-rad.is-ut .ik-inlagg{flex:0 1 auto;max-width:calc(96% - 42px);}
  .ik-ant-bild{flex:none;display:flex;margin-top:4px;}
  .ik-timer{font-size:13px;color:var(--warn);background:var(--warn-bg);border-radius:12px;padding:8px 12px;}
  .ik-timer.is-paminn{font-weight:600;}
  .ik-kvitto{font-size:14px;color:var(--success);background:var(--success-bg);border-radius:12px;padding:10px 12px;}
  .ik-inlagg .ik-lank{display:block;min-height:36px;font-size:13px;}
  .ik-citatknapp{opacity:.8;}
  .ik-rin{display:flex;flex-direction:column;gap:8px;}
  .ik-rin:empty{display:none;}
  .ik-rin-kort{background:var(--card);border:1px solid var(--border-svag);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;}
  .ik-rin-rubrik{display:flex;align-items:center;gap:8px;}
  .ik-rin-bild{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;background:#2b2b2e;}
  .ik-rin-kort h3{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);}
  .ik-rin-kort p{margin:0;font-size:15px;line-height:1.45;}
  .ik-rin-kort ul{margin:0;padding-left:18px;font-size:14px;line-height:1.45;}
  .ik-rin-liten{font-size:13px;color:var(--muted);}
  .ik-uppdaterad{background:var(--accent-light);font-size:12.5px;padding:4px 10px;margin-right:6px;}
  .ik-rin-order{border-top:1px solid var(--border-svag);padding-top:10px;display:flex;flex-direction:column;gap:6px;}
  .ik-rin-order h4{margin:0;font-size:13px;font-weight:600;color:var(--muted);}
  .ik-rin-rader{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4;}
  .ik-rin-rader td{padding:6px 0;border-top:1px solid var(--border-svag);vertical-align:top;}
  .ik-rin-rader tr:first-child td{border-top:0;}
  .ik-rin-rader td.ik-rin-antal{width:1%;white-space:nowrap;padding-right:14px;font-variant-numeric:tabular-nums;font-weight:600;}
  .ik-rin-art{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .ik-rin-vantar{font-size:14px;color:var(--muted);padding:10px 2px;}
  .ik-rin-knappar{display:flex;flex-wrap:wrap;gap:8px;}
  .ik-rin-rad{border-top:1px solid var(--border-svag);padding-top:8px;display:flex;flex-direction:column;gap:2px;}
  .ik-rin-rad1{display:flex;justify-content:space-between;gap:10px;font-size:14px;}
  .ik-rin-rad1 span{flex:none;font-variant-numeric:tabular-nums;font-weight:600;}
  .ik-rin-rad small{font-size:13px;color:var(--muted);line-height:1.4;}
  .ik-rin-rad.is-osaker small.ik-rin-sak{color:var(--warn);}
  .ik-rin-varning{font-size:14px;color:var(--warn);background:var(--warn-bg);border-radius:12px;padding:10px 12px;}
  /* Konfiguratorn: Rins fynd som rader man matchar mot artikelregistret innan offerten skapas */
  .ik-bygg{border:1px solid var(--border-svag);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg);}
  .ik-bygg-kund{font-size:14px;line-height:1.4;}
  .ik-bygg small{font-size:13px;color:var(--muted);line-height:1.4;}
  .ik-bygg-vald{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:14px;}
  .ik-bygg-vald .ik-bygg-byt{flex:none;border:0;background:none;color:var(--accent);font:inherit;font-size:14px;min-height:44px;padding:0 4px;cursor:pointer;}
  .ik-bygg-ej{color:var(--warn);}
  .ik-bygg input{width:100%;box-sizing:border-box;min-height:44px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);padding:0 12px;font:inherit;font-size:16px;}
  .ik-bygg-traffar{display:flex;flex-direction:column;border:1px solid var(--border-svag);border-radius:12px;overflow:hidden;background:var(--card);}
  .ik-bygg-traffar button{text-align:left;border:0;border-top:1px solid var(--border-svag);background:none;color:var(--text);font:inherit;font-size:14px;padding:10px 12px;min-height:44px;cursor:pointer;}
  .ik-bygg-traffar button:first-child{border-top:0;}
  .ik-bygg-rad2{display:flex;align-items:center;gap:10px;}
  .ik-bygg-rad2 label{font-size:13px;color:var(--muted);flex:none;}
  .ik-bygg-rad2 input{width:96px;text-align:right;font-variant-numeric:tabular-nums;}
  .ik-bygg-rad2 .ik-bygg-bort{margin-left:auto;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;min-height:44px;padding:0 6px;cursor:pointer;}
  .ik-ov{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:var(--card);border:1px solid var(--border-svag);border-radius:12px;padding:10px 12px;margin-top:6px;}
  .ik-ov small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px;}
  .ik-ov:empty{display:none;}
  .ik-citat{font-size:13px;opacity:.75;margin-top:4px;}
  .ik-skriv{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding-top:14px;border-top:1px solid var(--border-svag);}
  .ik-segment{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;background:var(--border-svag);border-radius:12px;padding:3px;}
  .ik-segment button{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer;}
  .ik-statussegment{margin:2px 0;}
  .ik-segment button.is-on{background:var(--card);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .ik-falt-rad input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;text-align:right;}
  .ik-falt-rad input:focus{outline:none;}
  .ik-falt-rad:focus-within{box-shadow:inset 0 -2px 0 var(--accent);}
  .ik-falt-rad>span.ik-skriv-varde{flex:1;width:auto;min-width:0;font-size:inherit;color:var(--text);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-dold{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .ik-skriv-text{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);font:inherit;font-size:16px;line-height:1.45;padding:12px 14px;}
  .ik-skriv-text:focus{outline:2px solid var(--accent);outline-offset:-1px;}
  .ik-falt-rad select#ikUtfallVal{flex:1;min-width:0;}
  .ik-utfall{border:0;margin:0;padding:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border-svag);border-radius:16px;overflow:hidden;}
  .ik-utfall legend{font-size:13px;color:var(--muted);padding:10px 14px 0;float:left;width:100%;box-sizing:border-box;}
  .ik-utfall-rad{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;min-height:44px;border-top:1px solid var(--border-svag);cursor:pointer;}
  .ik-utfall legend + .ik-utfall-rad{border-top:0;}
  .ik-utfall-rad input{margin:3px 0 0;width:20px;height:20px;accent-color:var(--accent);flex:none;}
  .ik-utfall-rad span{display:flex;flex-direction:column;gap:2px;}
  .ik-utfall-rad b{font-weight:600;font-size:15px;}
  .ik-utfall-rad em{font-style:normal;font-size:13px;color:var(--muted);}
  .ik-kryss{display:flex;gap:10px;align-items:center;min-height:44px;font-size:15px;}
  .ik-kryss input{width:20px;height:20px;accent-color:var(--accent);}
  .ik-skriv-not{margin:0;font-size:13px;color:var(--muted);}
  .ik-skriv-not.ik-citatinfo{color:var(--text);}
  .ik-filer{display:flex;flex-direction:column;gap:6px;}
  .ik-fil{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;border:1px solid var(--border-svag);border-radius:12px;padding:0 4px 0 12px;min-height:44px;background:var(--card);}
  .ik-fil span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ik-fil small{color:var(--muted);margin-left:6px;}
  .ik-fil button{flex:none;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;min-height:44px;padding:0 10px;cursor:pointer;}
  .ik-filknapp{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;border:1px dashed var(--border);border-radius:12px;padding:0 14px;font-size:14px;color:var(--info);cursor:pointer;}
  .ik-skicka{min-height:50px;border-radius:14px;border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
  .ik-skicka:disabled{opacity:.5;cursor:default;}
  .ik-skriv-fel{font-size:14px;color:var(--danger);min-height:0;}
  .ik-skriv-fel:empty{display:none;}

  /* ---------- "Övriga verktyg": bottom sheet ---------- */
  .tools-sheet-backdrop{
    position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.32);
    opacity:0;pointer-events:none;transition:opacity .15s ease;
  }
  .tools-sheet-backdrop.open{opacity:1;pointer-events:auto;}
  .tools-sheet{
    /* bottom:0 (istf. bottom:78px) så den stängda positionen ALLTID är
       exakt vid sidans nedre kant, oavsett vilket mellanrum flikmenyn just
       nu kompenserar för - annars räcker inte en procentbaserad translateY
       för att skjuta undan den helt när mellanrummet är stort (se
       syncFixedBottomOffset). Öppningsläget lyfts istället upp med ett
       EXAKT pixelmått via --tools-open-lift, satt av samma JS-funktion. */
    position:fixed;left:0;right:0;bottom:0;z-index:26;
    max-width:640px;margin:0 auto;background:var(--bg);
    border-radius:20px 20px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.22);
    padding:8px 14px calc(14px + var(--safe-bottom));
    transform:translateY(100%);transition:transform .18s ease;
    /* RÄTTAT 2026-09-03 (Mikael, mobil): med tolv verktyg blev panelen
       högre än skärmen och gick varken att scrolla eller se helt. Nu
       begränsad till det som får plats ovanför flikmenyn, och scrollbar
       i sig själv. overscroll-behavior hindrar att sidan bakom rullar med. */
    max-height:calc(100vh - var(--tools-open-lift, 78px) - 24px);
    max-height:calc(100dvh - var(--tools-open-lift, 78px) - 24px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .tools-sheet.open{transform:translateY(calc(-1 * var(--tools-open-lift, 78px)));}
  .tools-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:6px auto 12px;}
  .tools-sheet-title{
    font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;
    text-transform:uppercase;color:var(--muted);padding:0 4px 10px;
  }
  .tools-sheet-list{display:flex;flex-direction:column;gap:10px;}
  /* Grupprubrik i verktygspanelen (2026-09-09). Tystare än panelens egen
     rubrik - den ska dela upp listan, inte konkurrera med den. */
  .tools-sheet-grupp{
    font-family:"Inter",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.6px;
    text-transform:uppercase;color:var(--muted);padding:0 4px 8px;margin-top:18px;
  }
  .tools-sheet-grupp:first-of-type{margin-top:0;}
  .tools-sheet-item{
    display:flex;align-items:center;gap:14px;background:var(--card);
    border:1px solid rgba(0,0,0,.14);border-radius:16px;padding:14px 16px;
    text-decoration:none;color:inherit;min-height:44px;
  }
  .tools-sheet-item:active{background:var(--press);}
  /* ÄNDRAT 2026-08-31: emoji -> linjeikoner i tab-barens stil.
     Gråskalefiltret behövdes bara för att dämpa emojins färger. */
  .tools-sheet-item .tsi-icon{display:flex;align-items:center;color:var(--text);opacity:.75;flex:none;}
  .tools-sheet-item .tsi-text{display:flex;flex-direction:column;gap:2px;}
  .tools-sheet-item .tsi-title{font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;color:var(--text);}
  .tools-sheet-item .tsi-sub{font-size:12px;color:var(--muted);line-height:1.35;}
  /* Verktyg som portats in som native vyer (se NATIVE_TOOL_HANDLERS) renders
     som <button> istf. <a href> - samma utseende, men med knapp-reset. */
  button.tools-sheet-item{font:inherit;cursor:pointer;text-align:left;width:100%;}

  /* ---- Kolla lagersaldo (renderStockView) ---- */
  .stock-result{padding-top:4px;}
  .stock-result-imgwrap{display:flex;justify-content:center;margin-bottom:14px;}
  .stock-result-img{max-width:200px;max-height:200px;border-radius:12px;border:1px solid var(--border);background:var(--card);object-fit:contain;}
  .stock-result-name{font-family:"Inter",sans-serif;font-weight:700;font-size:16px;color:var(--text);text-align:center;}
  .stock-result-nr{font-size:13px;color:var(--muted);text-align:center;margin-bottom:14px;}
  .stock-saldo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .stock-saldo-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center;}
  .stock-saldo-box.zero{border-color:rgba(0,0,0,.28);}
  .stock-saldo-box.zero .stock-saldo-value{color:var(--muted);}
  .stock-saldo-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
  .stock-saldo-value{font-family:"Inter",sans-serif;font-weight:800;font-size:26px;color:var(--text);}

  /* Flikmenyn ligger numera UTANFÖR scrollytan (se appskalet ovan), så
     innehållet behöver inte längre lämna 78 px luft åt den. */
  /* calc(), inte 24px rakt av - den har raden vann over :root-regeln och
     tog bort safe-area i botten. I vyer utan flikmeny hamnade sista raden
     under iPhonens home-indicator (rattat 2026-09-15). */
  main{padding-bottom:calc(24px + var(--safe-bottom));}

  /* ==================================================================
     Generera etiketter (renderLabelsView) - inporterad från
     anrin-etikett-generator.html.

     Etikettkortet självt (.label/.brand-bar/.content-row/...) och
     utskrifts-CSS:n (#print-area/@media print) är portade OFÖRÄNDRADE -
     det är bokstavligen vad som hamnar på den fysiska hyllkantsetiketten,
     så designen där ska inte följa CRM:s Fältvänlig-omdesign. Allt runt
     omkring (sök, kö, formulär) är däremot ombyggt i Fältvänlig-stil för
     en homogen app.
     ================================================================== */
  .label{
    background:var(--card);border:2px solid var(--text);display:flex;flex-direction:column;
    width:12cm;height:5cm;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .label .brand-bar{
    background:#0e0e10;height:0.85cm;flex:0 0 auto;display:flex;
    align-items:center;justify-content:space-between;padding:0 0.28cm;
  }
  .label .brand-bar img{height:0.42cm;width:auto;display:block;}
  .label .brand-bar .tagline{
    font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#e4e4e8;font-weight:700;
  }
  .label .content-row{flex:1;display:flex;align-items:stretch;min-height:0;}
  .label .img-col{
    width:2.6cm;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    padding:0.14cm;border-right:1px solid #eee;background:#fafafa;
  }
  .label .img-col img{width:100%;height:100%;object-fit:contain;}
  .label .img-col .img-placeholder{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .label .img-col .img-placeholder svg{width:16px;height:16px;opacity:.35;}
  .label .img-col .img-placeholder span{
    font-size:5px;color:#b7b7bd;text-align:center;text-transform:uppercase;letter-spacing:.05em;
  }
  .label .main-col{flex:1;padding:0.2cm 0.28cm;display:flex;flex-direction:column;justify-content:center;min-width:0;}
  .label .prod-name{
    font-weight:700;font-size:12.5px;line-height:1.18;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .label .spec-line{
    margin-top:0.16cm;font-size:10.5px;line-height:1.28;color:#000;font-weight:700;font-variant-numeric:tabular-nums;
  }
  .label .spec-line .spec-row{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .label .spec-line .sep{color:#999;font-weight:400;margin:0 4px;white-space:nowrap;}
  .label .qr-col{width:2.05cm;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0.15cm;}
  .label .qr-col .qrbox img,.label .qr-col .qrbox canvas{width:1.55cm !important;height:1.55cm !important;}
  .label .qr-col .qr-caption{
    font-size:7px;color:#555;margin-top:2px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  }
  #print-area{display:none;}
  @media print{
    #print-area,#print-area *{
      -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;color-adjust:exact !important;
    }
    html,body{background:var(--card) !important;margin:0;height:auto;overflow:visible;}
    main{overflow:visible;max-height:none;}
    body > *:not(#print-area){display:none !important;}
    /* FIX 2026-08-28 (Patric, "Generera etiketter"-buggrapport): #print-area
       var display:flex;flex-wrap:wrap, vilket gjorde varje .label till ett
       FLEX-ITEM - break-inside/page-break-inside stöds inte tillförlitligt på
       flex-items i de flesta utskriftsmotorer (särskilt WebKit/Safari, som
       genererade buggrapportens PDF: "iOS ... Quartz PDFContext"), så
       etiketter kapades mitt av när de hamnade vid en sidbrytning istället
       för att pressas hela till nästa sida. Etiketter radar sig ändå alltid i
       EN kolumn i praktiken (minsta bredden 12cm * 2 > A4:s skrivbara bredd),
       så display:block ger identiskt utseende men gör varje .label till en
       vanlig BLOCK-låda igen, där break-inside:avoid faktiskt respekteras. */
    #print-area{display:block;position:static;margin:0;}
    /* ETIKETTERNA SITTER IHOP (Mikael 2026-10-20: "så man slipper klippa flera gånger. Man klipper en gång mellan
       etiketterna så är det klart"). Ingen luft emellan, och nästa etikett lägger sin överkant på förras underkant,
       så att det blir ett enda streck att klippa på. Skuggan är bara för skärmen. */
    #print-area .label{margin:0;box-shadow:none;}
    #print-area .label + .label{margin-top:-2px;}
    .label{break-inside:avoid;page-break-inside:avoid;}
    @page{margin:8mm;}
  }

  /* ---- omgivande UI i Fältvänlig-stil ---- */
  .labels-preview-wrap{
    background:var(--card);border:1px dashed var(--border);border-radius:16px;
    padding:20px;display:flex;justify-content:center;overflow-x:auto;
  }
  .labels-controls-line{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
  .labels-controls-line label{font-size:13px;color:var(--muted);font-weight:600;}
  .labels-controls-line select{
    border-radius:100px;border:1px solid var(--border);background:var(--card);padding:8px 14px;font:inherit;color:var(--text);
  }
  .labels-width-readout{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .labels-controls-line input[type="range"]{flex:1;min-width:100px;accent-color:var(--accent);}
  .labels-article-list{max-height:280px;overflow-y:auto;margin-top:10px;}
  .labels-article-row{
    display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);font-size:13.5px;
  }
  .labels-article-row:last-child{border-bottom:none;}
  .labels-article-row .lar-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
  .labels-article-row .lar-code{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;cursor:pointer;}
  .labels-article-row .lar-remove{
    border:none;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;
    padding:4px 6px;border-radius:6px;flex:none;
  }
  .labels-article-row .lar-remove:active{background:var(--card);color:var(--danger);}
  .labels-ghost-btn{
    border:none;background:transparent;color:var(--accent);text-decoration:underline;font:inherit;
    font-weight:600;font-size:13.5px;padding:8px 2px;cursor:pointer;
  }
  .labels-manual-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .labels-field-label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:10px 0 4px;}
  .labels-batch-item{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;
  }
  .labels-batch-item:last-child{border-bottom:none;}
  .labels-batch-item .lbi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .labels-qty-input{width:52px;padding:6px;border-radius:8px;border:1px solid var(--border);font:inherit;text-align:center;}
  .labels-status-msg{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4;}
  .labels-status-msg.is-error{color:var(--danger);font-weight:600;}
  .labels-status-msg.is-ok{color:var(--success);font-weight:600;}

  /* ---------- Godkännandelistan ---------- */
  .gl-summary-row{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px;}
  .gl-section{margin-bottom:6px;}
  .gl-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
  .gl-section-head h3{font-size:16px;margin:0;}
  .gl-details summary{font-size:15px;font-weight:600;cursor:pointer;padding:10px 0;color:var(--text);}
  .gl-details summary::-webkit-details-marker{color:var(--muted);}
  .gl-card-list{display:flex;flex-direction:column;gap:10px;}
  .gl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
  .gl-card-readonly{padding:12px 16px;}
  .gl-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
  .gl-artnr{font-weight:700;font-variant-numeric:tabular-nums;font-size:14.5px;}
  .gl-status-badge{font-size:11px;font-weight:700;border-radius:8px;padding:3px 8px;letter-spacing:.2px;white-space:nowrap;}
  .gl-status-badge.status-ny{color:var(--muted);background:var(--accent-light);}
  .gl-status-badge.status-utkast{color:var(--warn);background:var(--warn-bg);}
  .gl-status-badge.status-inskickad{color:var(--info);background:var(--info-bg);}
  .gl-status-badge.status-godkand{color:var(--success);background:var(--success-bg);}
  .gl-status-badge.status-avvisad{color:var(--danger);background:var(--danger-bg);}
  .gl-readonly-line{font-size:13.5px;color:var(--text);margin:3px 0;line-height:1.4;}
  .gl-supplier-line{color:var(--muted);}
  .gl-meta-line{font-size:12px;color:var(--muted);margin-top:6px;}
  .gl-comment-callout{
    background:var(--warn-bg);color:#7a4a00;border-radius:10px;padding:8px 10px;font-size:13px;
    margin:8px 0;line-height:1.4;
  }
  .gl-visma-status{
    background:var(--success-bg);color:var(--success);border-radius:10px;padding:8px 10px;font-size:13px;
    margin:8px 0;line-height:1.4;font-weight:600;
  }
  .gl-field{margin:10px 0;}
  .gl-field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;}
  .gl-readonly{font-size:14.5px;padding:4px 0;}
  .gl-price-mode-row{margin:10px 0 4px;}
  .gl-price-toggle{max-width:280px;}
  .gl-price-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
  .gl-price-fields .gl-field{flex:1;min-width:130px;margin:6px 0;}
  .gl-utpris-preview{font-size:14.5px;margin:10px 0 4px;}
  .gl-utpris-value{font-size:16px;}
  .gl-card-actions{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;}
  /* .pj-delete-link och .kp-delete-link hade INGEN regel alls och kom ut
     som gra systemknappar mitt i appen (rattat 2026-09-15). */
  .gl-exclude-link,.gl-sendback-link,.gl-sendback-cancel,.pj-delete-link,.kp-delete-link{
    background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--danger);cursor:pointer;
  }
  /* .gl-mode-btn behover ingen egen regel: knapparna ligger i en
     .scope-toggle och far bade form och aktivt lage darifran. Kontrollerat
     2026-09-15 - lat bli att "rata" det har igen. */
  .gl-sendback-link{color:var(--accent);}
  .gl-sendback-box{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
  .gl-save-msg{font-size:12.5px;margin-top:6px;min-height:1em;}
  .gl-save-msg.is-ok{color:var(--success);font-weight:600;}
  .gl-save-msg.is-error{color:var(--danger);font-weight:600;}
  .gl-submit-row{padding-bottom:6px;}
  .gl-submit-result{font-size:13px;margin-top:8px;line-height:1.4;}
  .gl-submit-result.is-ok{color:var(--success);font-weight:600;}

  /* ---------- Projekt ---------- */
  .pj-new-row{padding-bottom:2px;}
  .pj-card-top{display:flex;gap:12px;align-items:flex-start;}
  .pj-thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--accent-light);}
  .pj-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);text-align:center;padding:4px;}
  .pj-card-info{flex:1;min-width:0;}
  .pj-title{font-weight:700;font-size:15px;}
  .pj-form{padding:4px 2px 24px;}
  .pj-field{margin-bottom:14px;}
  .pj-field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px;}
  .pj-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .pj-field-row .pj-field{margin-bottom:14px;}
  .pj-input{width:100%;box-sizing:border-box;}
  textarea.pj-input{border-radius:14px;}
  .pj-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-bottom:10px;}
  .pj-gallery-thumb-wrap{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--accent-light);}
  .pj-gallery-thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
  .pj-gallery-del-btn{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:var(--on-accent);font-size:12px;line-height:1;cursor:pointer;}
  .pj-upload-status{font-size:12.5px;color:var(--muted);margin-top:6px;min-height:1em;}
  .pj-autocomplete-wrap{position:relative;}
  .pj-autocomplete-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);}
  .pj-autocomplete-item{padding:10px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .pj-autocomplete-item:hover{background:var(--accent-light);}
  .pj-autocomplete-item + .pj-autocomplete-item{border-top:1px solid var(--border);}
  .pj-autocomplete-tenant{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--accent-light);border-radius:6px;padding:2px 6px;flex-shrink:0;}
  @media (max-width:600px){ .pj-field-row{grid-template-columns:1fr;} }
  .gl-submit-result.is-error{color:var(--danger);font-weight:600;}

  /* ---------- Kontaktpersoner ---------- */
  .kp-tabs{display:flex;gap:8px;margin-bottom:14px;}
  .kp-tab-btn{flex:1;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--card);font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;}
  .kp-tab-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .kp-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--accent-light);}
  .kp-noimg{width:56px;height:56px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--muted);flex-shrink:0;}
  .kp-card-top{display:flex;gap:12px;align-items:center;}
  .kp-card-info{flex:1;min-width:0;}
  .kp-name{font-weight:700;font-size:15px;}
  .gl-status-badge.status-inaktiv{color:var(--muted);background:var(--accent-light);}
  .kp-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .kp-section-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
  .kp-section-row{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:var(--card);}
  .kp-section-row select{flex:0 0 auto;max-width:38%;}
  .kp-section-row input{flex:1;min-width:0;}
  .kp-row-btn{border:none;background:var(--accent-light);color:var(--text);width:30px;height:30px;border-radius:8px;font-size:14px;cursor:pointer;flex-shrink:0;}
  .kp-row-btn:disabled{opacity:.35;cursor:default;}
  .kp-row-del{background:transparent;color:var(--danger);font-size:16px;}
  .kp-add-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
  .kp-add-row select{flex:1;}

  /* ---------- Budget 2026 (startvy för svenska säljare) ---------- */
  .bdg-header{padding:4px 16px 6px;}
  .bdg-header h2{margin:0 0 2px;font-size:21px;}
  .bdg-header .sub{color:var(--muted);font-size:12.5px;}
  /* ---------- Dagskoll (Mikael 2026-09-29) ----------
     "En liten, smidig ruta till höger om information ... 75 % information
     och 25 % dagskoll". Samma radie och höjd som informationskortet, men
     mörk - den ska dra blicken utan att ta plats. I dag / vecka / månad
     bläddras själv var sjätte sekund (strecket i botten visar takten);
     håller man musen över stannar den, trycker man väljer man själv. */
  .bdg-topp{display:grid;gap:12px;margin:10px 16px;}
  .bdg-topp > .bdg-msg-card{margin:0;}
  .bdg-topp > .puls{order:-1;}
  @media (min-width:720px){
    .bdg-topp{grid-template-columns:minmax(0,3fr) minmax(250px,1fr);align-items:stretch;}
    .bdg-topp > .puls{order:0;}
  }
  .puls{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:12px;
    padding:14px 16px 12px;border-radius:var(--radius);color:var(--puls-text);background:var(--puls-bg);
    box-shadow:0 8px 24px rgba(0,0,0,.14);}
  /* Ljuset som sakta vandrar över kortet - rörelsen man ser i ögonvrån. */
  .puls::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
    background:radial-gradient(35% 35% at 70% 30%, rgba(157,188,255,.20), transparent 70%),
               radial-gradient(30% 30% at 30% 75%, rgba(134,224,173,.14), transparent 70%);
    animation:pulsLjus 16s ease-in-out infinite alternate;}
  @keyframes pulsLjus{0%{transform:translate(-6%,-4%) rotate(0deg);}100%{transform:translate(6%,5%) rotate(25deg);}}
  .puls-topp{display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .puls-titel{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.01em;}
  .puls-live{width:7px;height:7px;border-radius:50%;background:var(--puls-ord);flex:0 0 auto;
    animation:pulsSlag 2.4s ease-out infinite;}
  .puls.ar-gammal .puls-live{background:var(--puls-muted);animation:none;}
  @keyframes pulsSlag{0%{box-shadow:0 0 0 0 rgba(134,224,173,.55);}70%{box-shadow:0 0 0 7px rgba(134,224,173,0);}100%{box-shadow:0 0 0 0 rgba(134,224,173,0);}}
  .puls-tid{font-size:12px;color:var(--puls-muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .puls-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:10px;
    background:rgba(255,255,255,.07);}
  .puls-seg button{position:relative;z-index:1;border:0;background:none;color:var(--puls-muted);
    font-family:inherit;font-size:12px;font-weight:600;line-height:1;padding:7px 0;border-radius:8px;cursor:pointer;transition:color .25s;}
  .puls-seg button[aria-selected="true"]{color:var(--puls-text);}
  .puls-seg button:focus-visible{outline:2px solid var(--puls-text);outline-offset:0;}
  .puls-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:8px;
    background:rgba(255,255,255,.15);transition:transform .45s cubic-bezier(.3,1.35,.5,1);}
  .puls-kropp{display:flex;flex-direction:column;}
  .puls-rad{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:9px 0;}
  .puls-rad + .puls-rad{border-top:1px solid var(--puls-line);}
  .puls-vanster{min-width:0;}
  .puls-etikett{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--puls-muted);}
  .puls-etikett i{width:6px;height:6px;border-radius:50%;display:inline-block;}
  .puls-rad.off .puls-etikett i{background:var(--puls-off);box-shadow:0 0 8px var(--puls-off);}
  .puls-rad.ord .puls-etikett i{background:var(--puls-ord);box-shadow:0 0 8px var(--puls-ord);}
  .puls-belopp{margin-top:4px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .puls-tal{font-size:34px;line-height:.95;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
  .puls-takt{height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:auto;}
  .puls-takt i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--puls-off),var(--puls-ord));
    animation:pulsTakt 6s linear forwards;}
  .puls:hover .puls-takt i,.puls:has(:focus-visible) .puls-takt i{animation-play-state:paused;}
  @keyframes pulsTakt{to{width:100%;}}
  .puls.manuell .puls-takt{visibility:hidden;}
  .puls.laddar .puls-tal{opacity:.35;}
  .puls-fel{font-size:12px;color:var(--puls-muted);}
  @media (prefers-reduced-motion:reduce){
    .puls::before,.puls-live{animation:none;}
    .puls-pill{transition:none;}
    .puls-takt{visibility:hidden;}
  }
  .bdg-msg-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:10px 16px;box-shadow:none;}
  .bdg-msg-card .bdg-msg-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
  .bdg-msg-card .bdg-msg-text{font-size:15px;line-height:1.5;white-space:pre-wrap;}
  .bdg-msg-card .bdg-msg-empty{color:var(--muted);font-style:italic;}
  .bdg-msg-card .bdg-msg-meta{font-size:11.5px;color:var(--muted);margin-top:8px;}
  .bdg-msg-edit-link{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:8px 0 0;min-height:32px;cursor:pointer;}
  .bdg-msg-editbox textarea{width:100%;}
  .section.bdg-chart-section{padding:10px 16px 4px;}
  .section.bdg-chart-section h3{margin:0 0 8px;font-size:15px;}
  .bdg-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;}
  .bdg-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
  .bdg-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;display:inline-block;}
  .bdg-swatch-budget{background:var(--accent-light);border:1px solid var(--border);}
  .bdg-swatch-over{background:var(--accent);}
  .bdg-swatch-under{background:var(--card);border:2px solid var(--accent);}
  .bdg-swatch-future{background:var(--card);border:1px dashed var(--border);}
  .bdg-chart{display:flex;align-items:flex-end;gap:2px;overflow-x:auto;padding:4px 0 0;-webkit-overflow-scrolling:touch;}
  .bdg-col{background:none;border:none;padding:6px 2px 8px;display:flex;flex-direction:column;align-items:center;flex:1 0 auto;min-width:26px;border-radius:10px;cursor:pointer;}
  .bdg-col.is-selected{background:var(--accent-light);}
  .bdg-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;position:relative;}
  .bdg-bar{width:7px;border-radius:3px 3px 0 0;}
  .bdg-bar-budget{background:var(--accent-light);border:1px solid var(--border);border-bottom:none;}
  .bdg-bar-utfall.is-over{background:var(--accent);}
  .bdg-bar-utfall.is-under{background:var(--card);border:2px solid var(--accent);border-bottom:none;}
  .bdg-bar-future{width:7px;height:4px;background:var(--card);border:1px dashed var(--border);border-radius:3px;align-self:flex-end;}
  .bdg-col-label{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:5px;position:relative;}
  .bdg-col.is-selected .bdg-col-label{color:var(--text);}
  .bdg-now-dot{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--text);}
  .bdg-detail-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:12px 16px 4px;box-shadow:none;}
  .bdg-detail-card h4{margin:0 0 10px;font-size:15px;}
  .bdg-detail-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--accent-light);font-size:14px;}
  .bdg-detail-row:last-of-type{border-bottom:none;}
  .bdg-detail-row .bdg-drow-label{color:var(--muted);}
  .bdg-detail-row .bdg-drow-value{font-weight:700;display:flex;align-items:center;gap:8px;}
  #bdgMonthDetail{overflow-x:hidden;}
  /* Uppföljningswidgeten (2026-09-02) - samma kort som månadsrutan. */
  .uppf-widget h4{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .uppf-w-sum{font-size:12px;font-weight:500;color:var(--muted);}
  .uppf-w-sum b.overdue{color:var(--danger);font-weight:600;}
  .uppf-w-lista{display:flex;flex-direction:column;}
  .uppf-w-rad{
    display:flex;gap:12px;align-items:flex-start;width:100%;padding:9px 0;border:none;border-top:1px solid var(--accent-light);
    background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text);
  }
  .uppf-w-rad:first-child{border-top:none;}
  .uppf-w-rad:active{opacity:.7;}
  .uppf-w-nar{flex:0 0 76px;font-size:12px;font-weight:600;color:var(--muted);padding-top:1px;}
  .uppf-w-nar.overdue{color:var(--danger);}
  .uppf-w-nar.today{color:var(--text);}
  .uppf-w-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
  .uppf-w-text strong{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .uppf-w-text em{font-style:normal;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .uppf-w-tom{font-size:13px;color:var(--muted);padding:6px 0;}
  .uppf-w-alla{display:block;width:100%;margin-top:8px;padding:9px 0 2px;border:none;border-top:1px solid var(--border);background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text);text-align:left;cursor:pointer;}
  .bdg-detail-card.bdg-card-anim{transition:transform .18s ease, opacity .18s ease;}
  .bdg-detail-card.bdg-card-exit-left{transform:translateX(-26px);opacity:0;}
  .bdg-detail-card.bdg-card-exit-right{transform:translateX(26px);opacity:0;}
  .bdg-detail-card.bdg-card-enter-left{transform:translateX(-26px);opacity:0;}
  .bdg-detail-card.bdg-card-enter-right{transform:translateX(26px);opacity:0;}
  @media (prefers-reduced-motion: reduce){
    .bdg-detail-card.bdg-card-anim{transition:none;}
  }
  .bdg-edit-link{background:none;border:none;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;min-height:28px;}
  .bdg-detail-comment{font-size:12.5px;color:var(--muted);margin-top:2px;font-style:italic;}
  .bdg-editbox{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;}
  .bdg-editbox input[type="number"]{width:140px;}
  .bdg-editbox input[type="text"]{flex:1;min-width:140px;}
  .bdg-editbox .bdg-hint{flex-basis:100%;font-size:11.5px;color:var(--muted);margin-top:2px;}

  /* ---------- Rännberäkning (flödes-/kapacitetsverktyg) ---------- */
  .rb-section{padding:2px 16px 4px;}
  .rb-section h3{margin:16px 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
  .rb-section h3:first-of-type{margin-top:4px;}
  .rb-row{display:flex;gap:10px;flex-wrap:wrap;}
  .rb-row .gl-field{flex:1;min-width:140px;}
  .rb-regn-block{background:var(--accent-light);border-radius:12px;padding:10px 12px;margin:6px 0 4px;}
  .rb-regn-head{font-size:12px;color:var(--muted);margin-bottom:8px;}
  .rb-regn-row{display:flex;gap:8px;flex-wrap:wrap;}
  .rb-regn-btn{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:7px 10px;text-align:center;min-width:64px;flex:1 0 auto;cursor:pointer;font:inherit;}
  .rb-regn-btn .rb-regn-min{display:block;font-size:12.5px;font-weight:700;}
  .rb-regn-btn .rb-regn-val{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
  .rb-regn-btn.is-active{background:var(--accent);border-color:var(--accent);}
  .rb-regn-btn.is-active .rb-regn-min,.rb-regn-btn.is-active .rb-regn-val{color:var(--on-accent);}
  .rb-regn-btn.is-active .rb-regn-val{opacity:.85;}
  .rb-regn-foot{font-size:11px;color:var(--muted);line-height:1.5;margin-top:8px;}
  .rb-result-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:14px 16px 4px;box-shadow:none;}
  .rb-result-card h4{margin:0 0 10px;font-size:15px;}
  .rb-result-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--accent-light);font-size:14px;gap:12px;}
  .rb-result-row:last-of-type{border-bottom:none;}
  .rb-result-row .rb-rlabel{color:var(--muted);}
  .rb-result-row .rb-rvalue{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}
  .rb-verdict-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;gap:12px;border-bottom:1px solid var(--accent-light);}
  .rb-verdict-row .rb-rlabel{color:var(--muted);font-size:14px;}
  .rb-hint-line{font-size:12px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border);}
  .rb-summary-card{border-radius:var(--radius);padding:14px 16px;margin:14px 16px 4px;text-align:center;font-weight:700;font-size:15px;border:1px solid var(--border);}
  .rb-summary-card.is-ok{background:var(--success-bg);color:var(--success);border-color:#cfe9d7;}
  .rb-summary-card.is-warn{background:var(--danger-bg);color:var(--danger);border-color:#f6cfca;}
  .rb-summary-card .rb-summary-sub{display:block;font-weight:500;font-size:12.5px;color:var(--muted);margin-top:4px;}
  .rb-forslag{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:12px 16px 0;}
  .rb-forslag h4{margin:0 0 10px;font-size:15px;}
  details.rb-forslag{padding:0 16px;}
  details.rb-forslag .rb-forslag-grupp:first-of-type{margin-top:4px;}
  details.rb-forslag .rb-forslag-fot{padding-bottom:12px;}
  .rb-forslag-grupp{margin-bottom:12px;}
  .rb-forslag-rubrik{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
  .rb-forslag-rad{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border-svag);}
  .rb-forslag-rad.is-vald{font-weight:600;}
  .rb-frad-txt{flex:1;min-width:0;font-size:13.5px;}
  .rb-frad-varde{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--muted);}
  .rb-valj{flex:none;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
  .rb-forslag-rad.is-vald .rb-valj{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .rb-forslag-fot{font-size:12px;color:var(--muted);line-height:1.5;}
  .rb-disclaimer{font-size:11px;color:var(--muted);line-height:1.5;padding:12px 16px 4px;}
  .rb-cc{padding:13px 16px;border-radius:12px;background:var(--accent-light);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);}
  .rb-antaganden{margin:12px 16px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:0 16px;}
  .rb-antaganden summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:600;list-style:none;}
  .rb-antaganden summary::-webkit-details-marker{display:none;}
  .rb-antaganden summary::before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s;}
  .rb-antaganden[open] summary::before{transform:rotate(90deg);}
  .rb-antaganden-text{font-size:12.5px;color:var(--muted);line-height:1.55;padding-bottom:12px;}
  .rb-antaganden-text p{margin:0 0 8px;}
  .rb-antaganden-text strong{color:var(--text);}
  .rb-antaganden-text .rb-jamfor{font-style:italic;}
  .rb-save-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:4px 16px 4px;}
  .rb-save-card h4{margin:0 0 10px;font-size:15px;}
  .rb-save-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
  .rb-save-row .gl-field{flex:1;min-width:180px;}
  .rb-save-row .page-btn{flex:0 0 auto;}
  .rb-saved-link-row{padding:4px 16px 0;}
  .rb-saved-link-row a{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;}
  .rb-saved-list{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px;}
  .rb-saved-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;cursor:pointer;}
  .rb-saved-card .rb-saved-title{font-weight:700;font-size:14.5px;}
  .rb-saved-card .rb-saved-meta{font-size:12px;color:var(--muted);margin-top:3px;}
  .rb-saved-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13.5px;}

  /* ---------- Typdetaljer (artikelnummer -> ritning/bild/PDF) ---------- */
  .td-section{padding:2px 16px 4px;}
  .td-hint{font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0 12px;}
  .td-list{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px;}
  .td-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;gap:12px;align-items:flex-start;}
  .td-thumb{width:88px;height:88px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--accent-light);border:1px solid var(--border);cursor:pointer;}
  .td-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .td-info{flex:1;min-width:0;}
  .td-info .td-title{font-weight:700;font-size:14px;line-height:1.35;}
  .td-info .td-meta{font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums;}
  .td-info .td-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .td-info .td-actions a{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;border:1px solid var(--accent);border-radius:10px;padding:5px 10px;}
  .td-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13.5px;}
  /* StainlessTeams ritningar (2026-10-13, vyer/stritningar.js) - i Typdetaljer och i kalkylen för rostfri ränna */
  .td-flikrad{padding-bottom:10px;}
  .str-sok{padding:2px 16px 4px;}
  .str-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;}
  .str-chip{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;cursor:pointer;}
  .str-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--card);}
  .str-chip small{opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums;}
  .str-matt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .str-matt label,.str-falt label,.str-ovrigt{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  .str-matt input,.str-falt input,.str-ovrigt input{font:inherit;font-size:16px;text-transform:none;letter-spacing:0;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:0;}
  .str-status{padding:0 16px 6px;font-size:12px;color:var(--muted);}
  .str-lista{display:flex;flex-direction:column;gap:10px;padding:0 16px 12px;}
  .str-kort{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;gap:12px;align-items:flex-start;}
  .str-bild{width:88px;height:88px;flex:0 0 auto;border-radius:10px;overflow:hidden;background:var(--accent-light);border:1px solid var(--border);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .str-bild:disabled{cursor:default;}
  .str-bild img{width:100%;height:100%;object-fit:cover;display:block;}
  .str-ingen{font-size:11px;font-weight:600;color:var(--muted);}
  .str-info{flex:1;min-width:0;}
  .str-titel{font-weight:700;font-size:14px;line-height:1.35;overflow-wrap:anywhere;}
  .str-taggar{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
  .str-tagg{font-size:11.5px;background:var(--accent-light);border-radius:6px;padding:3px 7px;font-variant-numeric:tabular-nums;}
  .str-meta{font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere;}
  .str-text{font-size:13px;line-height:1.45;margin:6px 0 0;}
  .str-rel{font-size:12px;margin-top:6px;color:var(--muted);}
  .str-rel summary{cursor:pointer;}
  .str-rel ul{margin:4px 0 0;padding-left:16px;}
  .str-knappar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;}
  .str-knapp{font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:1px solid var(--accent);border-radius:10px;padding:6px 11px;cursor:pointer;}
  .str-knapp.str-sek{border-color:var(--border);color:var(--text);}
  .str-knapp:disabled{opacity:.6;cursor:progress;}
  .str-fel{font-size:12px;color:var(--danger);}
  .str-forfragan[hidden]{display:none;}
  .str-forfragan{margin-top:10px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:8px;}
  .str-falt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .str-text-ut{width:100%;min-height:190px;font:12.5px/1.45 ui-monospace,Menlo,monospace;border:1px solid var(--border);border-radius:10px;padding:8px;background:var(--bg);color:var(--text);box-sizing:border-box;}
  .str-mer{display:flex;justify-content:center;padding:0 16px 16px;}
  .str-liknande .str-kort{padding:10px;margin-top:8px;}
  .str-liknande .str-bild{width:64px;height:64px;}
  @media (max-width:520px){ .str-matt{grid-template-columns:repeat(2,minmax(0,1fr));} .str-falt{grid-template-columns:repeat(2,minmax(0,1fr));} .str-kort{flex-direction:column;} .str-bild{width:100%;height:120px;} .str-liknande .str-kort{flex-direction:row;} .str-liknande .str-bild{width:64px;height:64px;} }
  .td-lightbox-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;}
  .td-lightbox-backdrop img{max-width:100%;max-height:100%;border-radius:8px;background:var(--card);}

  /* ---- Typdetalj inbakad i prisuppslag/lagersaldo (2026-08-31) ---- */
  .td-inline{margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
  .td-inline-rubrik{
    font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding-bottom:8px;
  }
  .td-inline-kort{display:flex;gap:14px;align-items:flex-start;}
  .td-inline-thumb{
    flex:0 0 96px;width:96px;padding:0;border:1px solid var(--border);border-radius:10px;
    background:var(--card);cursor:pointer;overflow:hidden;line-height:0;
  }
  .td-inline-thumb img{width:100%;height:auto;display:block;}
  .td-inline-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .td-inline-titel{font-size:14px;font-weight:600;line-height:1.3;}
  .td-inline-meta{font-size:12.5px;color:var(--muted);}
  .td-inline-pdf{
    align-self:flex-start;margin-top:4px;font-size:13.5px;font-weight:600;
    text-decoration:none;color:var(--text);border:1px solid var(--border);
    border-radius:10px;padding:8px 12px;min-height:40px;display:flex;align-items:center;
  }
  .td-inline-pdf:active{background:var(--accent-light);}

  /* ---- Offertvyn (2026-08-31) ---- */
  /* ==================================================================
     STARTSIDANS WIDGETAR (Mikael 2026-09-11: "kan vi komprimera ihop
     informationen på startsidan nu när det börjar bli flera widgets...
     man kan minimera widget och flytta om kring dem som man vill ha det").

     Ett kort, en regel. Alla block på startsidan bär samma ram, samma
     rubrikhöjd och samma innerkant - det är det som gör att åtta olika
     saker läses som en sida och inte som åtta påklistrade rutor. Rubriken
     bär alltid en sammanfattning till höger, så att ett hopfällt kort
     fortfarande säger något: en minimerad widget som bara visar sitt namn
     är en tom rad, inte en komprimering.
     ================================================================== */
  #wRuta{display:flex;flex-direction:column;gap:10px;padding:4px 12px 0;}
  .w-band{display:flex;flex-direction:column;gap:10px;}
  .w-kol{display:flex;flex-direction:column;gap:10px;}
  .w-kol:empty{display:none;}
  .w{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;}
  .w-h{display:flex;align-items:center;gap:2px;padding:0 6px 0 4px;}
  .w-titel{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;background:none;border:none;
    font:inherit;color:var(--text);text-align:left;padding:12px 6px 11px;cursor:pointer;}
  .w-namn{flex:none;font-size:14px;font-weight:600;letter-spacing:-.01em;}
  .w-sum{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .w-pil{flex:none;color:var(--muted);font-size:11px;padding:0 4px;
    transition:transform .18s ease;transform:rotate(0deg);}
  .w.hopfalld .w-pil{transform:rotate(-90deg);}
  .w.hopfalld .w-b{display:none;}
  @media (max-width:560px){
    /* Hellre två rader än en avhuggen sammanfattning - det är den som gör
       ett hopfällt kort läsbart. Pilen stannar kvar på rubrikraden, annars
       hamnar den ensam på en tredje rad. */
    .w-titel{flex-wrap:wrap;row-gap:3px;align-items:center;}
    .w-namn{order:1;}
    .w-pil{order:2;margin-left:auto;}
    .w-sum{order:3;flex:1 0 100%;white-space:normal;}
  }
  .w-b{padding:0 0 2px;}
  /* Greppet syns bara när det går att flytta - annars är det en knapp som
     inte gör något, och sådana lär man sig att sluta lita på. */
  .w-grepp{flex:none;width:26px;height:34px;display:none;align-items:center;justify-content:center;
    background:none;border:none;color:var(--muted);cursor:grab;padding:0;
    font-size:12px;letter-spacing:-2px;touch-action:none;}
  body.w-flyttlage .w-grepp{display:flex;}
  body.w-flyttlage .w-titel{cursor:default;}
  .w.w-dras{opacity:.92;box-shadow:0 10px 30px rgba(0,0,0,.14);transform:scale(1.008);
    position:relative;z-index:20;cursor:grabbing;}
  /* Projektbevakning (2026-10-06): listan i Verktyg och fliken Projekt på startsidan */
  .pb-status{margin-top:6px;font-size:12.5px;color:var(--muted);}
  .pb-kontroller{position:sticky;top:0;z-index:2;background:var(--bg);padding:10px 16px 8px;display:grid;gap:10px;
    border-bottom:1px solid var(--border);}
  .pb-seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--accent-light);border-radius:10px;padding:3px;gap:3px;}
  .pb-seg button{border:0;background:transparent;border-radius:8px;padding:8px 6px;font:inherit;font-size:14px;
    color:var(--muted);cursor:pointer;font-variant-numeric:tabular-nums;}
  .pb-seg button[aria-pressed="true"]{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .pb-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
  .pb-chips::-webkit-scrollbar{display:none;}
  .pb-chip{flex:none;border:1px solid var(--border);background:transparent;border-radius:999px;padding:5px 11px;
    font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;}
  .pb-chip[aria-pressed="true"]{border-color:var(--text);color:var(--text);}
  /* Varje projekt på ett vitt kort, som Saldo och resten av CRM:et - inte rakt på den grå bakgrunden. */
  .pb-lista{list-style:none;margin:12px 0 0;padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;}
  .pb-rad{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;
    display:grid;gap:8px;min-width:0;}
  .pb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--muted);}
  .pb-kalla{font-weight:600;color:var(--text);letter-spacing:.04em;text-transform:uppercase;}
  .pb-ansv{font-weight:600;color:var(--text);}
  .pb-dl{margin-left:auto;font-weight:600;color:var(--text);}
  .pb-dl.snart{color:var(--danger);}
  .pb-dl.stangd{color:var(--muted);font-weight:400;}
  .pb-titel{font-size:17px;font-weight:600;line-height:1.3;margin:0;overflow-wrap:anywhere;}
  .pb-vem{color:var(--muted);font-size:14px;overflow-wrap:anywhere;}
  .pb-rin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .pb-grad{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;}
  .pb-grad::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--text);}
  .pb-grad.hog::before{background:var(--text);}
  .pb-typ{font-size:13px;color:var(--muted);}
  .pb-prod{font-size:12px;background:var(--accent-light);border-radius:6px;padding:3px 8px;}
  .pb-motiv{margin:0;color:var(--muted);font-size:14px;line-height:1.45;max-width:62ch;}
  .pb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;}
  .pb-btn{border:1px solid var(--border);background:transparent;border-radius:999px;padding:8px 16px;font:inherit;
    font-size:14px;font-weight:600;cursor:pointer;min-height:38px;color:var(--text);}
  .pb-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .pb-beslutar{font-size:14px;color:var(--muted);}
  .pb-kallank{margin-left:auto;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap;}
  .pb-kallank:hover{color:var(--text);text-decoration:underline;}
  .pb-orsaker{display:flex;flex-wrap:wrap;gap:6px;}
  .pb-roster{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted);}
  .pb-roster b{color:var(--text);font-weight:600;}
  .pb-roster .pb-ja{color:var(--success);}
  .pb-tom{padding:40px 16px;color:var(--muted);}
  .pb-tom strong{display:block;color:var(--text);font-size:16px;margin-bottom:4px;}
  .pb-fel{margin:12px 16px;font-size:14px;color:var(--danger);}
  .pb-fel:empty{display:none;}
  /* Kommentarer och stängning (2026-10-07): en tyst rad längst ner på kortet, så att beslutet förblir det tydligaste. */
  .pb-textknapp{background:none;border:0;padding:8px 0;min-height:38px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer;}
  .pb-textknapp:hover{color:var(--text);}
  .pb-textknapp.liten{min-height:0;padding:0;font-size:12px;}
  .pb-stangd{font-size:13px;color:var(--muted);}
  .pb-rad.stangd .pb-titel{color:var(--muted);}
  .pb-kommentarer{display:grid;gap:12px;padding-top:4px;}
  .pb-kom{display:flex;gap:10px;align-items:flex-start;}
  .pb-kom-innehall{min-width:0;display:grid;gap:2px;}
  .pb-kom-vem{font-size:12px;color:var(--muted);}
  .pb-kom-vem b{color:var(--text);font-weight:600;}
  .pb-kom-text{font-size:14px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;}
  .pb-kom-ny{display:grid;gap:8px;}
  .pb-kom-ny textarea{font:inherit;font-size:16px;line-height:1.4;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
    min-height:76px;resize:vertical;background:var(--card);color:var(--text);width:100%;box-sizing:border-box;}
  .pb-kom-ny .pb-btn{justify-self:start;}
  .pb-kom-ny .pb-btn:disabled{opacity:.6;cursor:default;}
  .pb-stangda-rubrik{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0;}
  .pb-stangda-rubrik strong{font-size:15px;}
  .pb-visa-stangda{display:block;margin:0 16px 24px;}
  .pb-hem .pb-stangda-rubrik{padding:12px 12px 0;}
  /* Kortet i listan (2026-10-07): kompakt, och hela kortet öppnar panelen. */
  .pb-rad{cursor:pointer;transition:border-color .15s,box-shadow .15s;}
  .pb-rad:hover{box-shadow:0 1px 4px rgba(0,0,0,.06);}
  .pb-rad.vald{border-color:var(--text);box-shadow:0 0 0 1px var(--text);}
  .pb-oppna{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;}
  .pb-oppna:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
  .pb-kortfot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;border-top:1px solid var(--border);margin-top:4px;padding-top:2px;}
  .pb-mark{font-size:12.5px;color:var(--muted);}
  .pb-mark.klar{color:var(--success);font-weight:600;}
  .pb-hoger{margin-left:auto;}
  /* Panelen (2026-10-07), som Ärendets: till höger på en bred skärm, ett helt blad på mobilen. */
  .pb-panel{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);}
  .pb-panel-huvud{flex:none;display:flex;align-items:center;gap:8px;padding:calc(8px + var(--safe-top, 0px)) 10px 8px;
    border-bottom:1px solid var(--border-svag);background:var(--card);}
  /* Bladet dras ner i huvudet (2026-10-07). Greppet visar att det går; webbläsaren får inte rulla sidan under tiden. */
  .pb-panel-huvud{position:relative;touch-action:none;cursor:grab;}
  .pb-grepp{position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--border);}
  .pb-panel-knapp{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--text);cursor:pointer;}
  .pb-panel-knapp:hover{background:var(--bg);}
  .pb-panel-knapp:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  .pb-panel-titel{flex:1;min-width:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pb-panel-lank{flex:none;font-size:14px;color:var(--muted);text-decoration:none;padding:10px 6px;}
  .pb-panel-lank:hover{color:var(--text);}
  .pb-panel-kropp{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:10px;
    padding:16px 16px calc(40px + var(--safe-bottom, 0px));}
  .pb-panel-rubrik{margin:0;font-size:20px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
  .pb-panel-rubrik:focus{outline:none;}
  .pb-panel .pb-fel{margin:0;}
  .pb-del{display:grid;gap:10px;border-top:1px solid var(--border);padding-top:14px;margin-top:6px;}
  .pb-del > .pb-mer-rubrik{margin:0;}
  .pb-select{font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;
    background:var(--card);color:var(--text);max-width:320px;}
  .pb-panel-atgarder{display:flex;flex-wrap:wrap;gap:8px;}
  .pb-uf{display:flex;gap:10px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
  .pb-uf-nar{flex:none;min-width:48px;font-weight:600;font-variant-numeric:tabular-nums;}
  .pb-uf-ny{display:grid;gap:8px;}
  .pb-uf-ny textarea{font:inherit;font-size:16px;line-height:1.4;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
    min-height:60px;resize:vertical;background:var(--card);color:var(--text);width:100%;box-sizing:border-box;}
  .pb-uf-ny .pb-chips{flex-wrap:wrap;overflow:visible;}
  .pb-uf-rad{display:flex;flex-wrap:wrap;gap:8px;}
  .pb-uf-rad .pb-select{flex:1 1 140px;min-width:0;}
  .pb-uf-ny .pb-btn{justify-self:start;}
  .pb-uf-ny .pb-btn:disabled{opacity:.6;cursor:default;}
  .pb-uf-kvitto{font-size:14px;color:var(--success);}
  .pb-uf-fel{font-size:14px;color:var(--danger);}
  @media (prefers-reduced-motion:no-preference){
    .pb-panel{animation:pbBladIn .3s cubic-bezier(.32,.72,0,1);}
    @keyframes pbBladIn{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
  }
  @media (min-width:1200px) and (min-height:600px){
    :root{--pb-panel-w:min(460px, 36vw);}
    .pb-panel{inset:0 0 0 auto;width:var(--pb-panel-w);border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.06);}
    .pb-panel-huvud{padding-top:10px;}
    #pbBody.pb-har-panel{margin-right:var(--pb-panel-w);}
    .pb-panel-huvud{touch-action:auto;cursor:default;}
    .pb-grepp{display:none;}
  }
  @media (min-width:1200px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
    .pb-panel{animation:pbPanelIn .28s cubic-bezier(.32,.72,0,1);}
    @keyframes pbPanelIn{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
  }
  /* Mer information och vinnare (2026-10-07). Vinnaren står alltid synligt - det är den säljaren ska ringa. */
  .pb-dl.klar{color:var(--success);}
  .pb-vinnare{display:grid;gap:8px;background:var(--success-bg);border-radius:10px;padding:10px 12px;}
  .pb-vinnare-etikett{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--success);}
  .pb-kontakt{display:grid;gap:2px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;}
  .pb-kontakt a{color:var(--info);text-decoration:none;}
  .pb-kontakt a:hover{text-decoration:underline;}
  .pb-orgnr{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;}
  .pb-adress{color:var(--muted);}
  .pb-mer{display:grid;gap:14px;padding-top:4px;}
  .pb-mer-rubrik{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
  .pb-beskrivning{margin:0;font-size:14px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;max-width:70ch;}
  .pb-mer-lankar{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;}
  .pb-mer-lankar a{color:var(--muted);text-decoration:none;}
  .pb-mer-lankar a:hover{color:var(--text);text-decoration:underline;}
  .pb-hem .pb-visa-stangda{margin:0 12px 24px;}
  /* Fliken Projekt på startsidan (Mikael 2026-10-07): samma lista som i Verktyg, med startsidans marginaler. */
  .pb-hem .pb-kontroller{padding:10px 12px 8px;}
  .pb-hem .pb-lista{padding:0 12px 24px;}
  .pb-hem .pb-tom{padding:40px 12px;}
  .pb-hem .pb-fel{margin:12px;}
  /* Anpassa-panelen */
  .w-verktyg{display:flex;justify-content:flex-end;gap:8px;padding:2px 12px 0;}
  .w-verktyg button{background:none;border:none;font:inherit;font-size:12.5px;color:var(--muted);
    padding:6px 4px;cursor:pointer;}
  .w-verktyg button.aktiv{color:var(--text);font-weight:600;}
  .w-panel{margin:8px 12px 0;background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);overflow:hidden;}
  .w-panel h4{margin:0;padding:12px 15px 10px;font-size:14px;border-bottom:1px solid var(--border);}
  .w-panel .w-hjalp{padding:10px 15px;font-size:11.5px;color:var(--muted);line-height:1.5;
    border-top:1px solid var(--border-svag);}
  .w-val{display:flex;align-items:center;gap:10px;padding:9px 15px;border-top:1px solid var(--border-svag);}
  .w-val:first-of-type{border-top:none;}
  .w-val-namn{flex:1;min-width:0;font-size:13.5px;}
  .w-val-namn em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px;}
  .w-val button{background:none;border:1px solid var(--border);border-radius:8px;
    width:30px;height:28px;font:inherit;font-size:12px;color:var(--text);cursor:pointer;padding:0;}
  .w-val button[disabled]{opacity:.35;cursor:default;}
  .w-pa{flex:none;width:44px;height:26px;border-radius:13px;border:none;background:#d6d6db;
    position:relative;cursor:pointer;padding:0;transition:background .18s ease;}
  .w-pa::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
    background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s ease;}
  .w-pa.pa{background:var(--success);}
  .w-pa.pa::after{transform:translateX(18px);}
  @media (prefers-reduced-motion:reduce){
    .w,.w-pil,.w-pa,.w-pa::after{transition:none;}
  }
  /* Skalet bär titeln nu - komponenternas egna rubrikrader döljs, annars
     står samma ord två gånger i varje kort. Sammanfattningen som låg i dem
     lyfts upp i skalets rubrik av wSynka(), så ingenting går förlorat. */
  .w-b .uppf-widget > h4,
  .w-b .bdg-detail-card > h4,
  .w-b .ordw-topp,
  .w-b .jobb-topp,
  .w-b .bdg-chart-section > h3,
  .w-b .sv-kort > h3{display:none;}
  .w-b .bdg-detail-card,.w-b .ordw-kort,.w-b .jobb-kort,.w-b .sv-kort,
  .w-b .bdg-chart-section{margin:0;border:none;border-radius:0;box-shadow:none;}
  /* Kort i kort blir två ramar som säger samma sak. Inne i en widget är
     nyckeltalen en remsa med tunna avdelare, inte fyra egna rutor. */
  .w-b .kpi-grid{padding:2px 16px 14px;gap:14px 0;}
  .w-b .kpi-card{border:none;background:none;border-radius:0;padding:2px 14px;
    border-left:1px solid var(--accent-light);}
  /* Två spalter på mobil: avdelaren hör hemma mellan spalterna, inte före
     varje kort - annars får raden en hårlinje hängande i vänsterkanten. */
  .w-b .kpi-card:nth-child(odd){border-left:none;padding-left:0;}
  .w-b .ordw-meta{font-style:normal;}
  .w-b .section{padding-top:0;}
  .w.w-dras{pointer-events:none;}

  /* Inköpsrad i Logistik: klickbar, med spårningslänkarna under (2026-10-05). */
  .lgk-rad.lgk-inkop{display:block;padding:0;}
  .lgk-inkop-knapp{display:flex;align-items:flex-start;gap:11px;width:100%;background:none;border:0;padding:9px 15px;font:inherit;color:inherit;text-align:left;cursor:pointer;}
  .lgk-inkop-knapp:hover{background:var(--bg);}
  .lgk-inkop-knapp:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .lgk-inkop-knapp .lgk-meta b{font-weight:600;color:var(--text);}
  .lgk-inkop-lankar{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 15px 9px;}
  .lgk-inkop-lankar a{font-size:12.5px;color:var(--info);text-decoration:none;min-height:28px;display:inline-flex;align-items:center;}
  .lgk-inkop-lankar a:hover{text-decoration:underline;}
  /* Inköpsrutan */
  .inkp-del{padding:12px 16px 4px;border-top:1px solid var(--border-svag);}
  .inkp-del h4{margin:0 0 8px;font-size:13px;font-weight:600;}
  .inkp-rad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .inkp-rad input{flex:1 1 160px;min-width:0;min-height:44px;border:1px solid var(--border);border-radius:12px;padding:0 12px;font:inherit;font-size:16px;background:var(--card);color:var(--text);}
  .inkp-rad input[type=date]{flex:0 1 190px;}
  .inkp-not{margin:6px 16px 8px;font-size:12px;color:var(--muted);}
  .inkp-del .inkp-not{margin:6px 0 8px;}
  .inkp-lista{list-style:none;margin:0 0 8px;padding:0;}
  .inkp-lista li{display:flex;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid var(--border-svag);}
  .inkp-lista li a,.inkp-lista li .ik-lank{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--info);text-decoration:none;min-height:40px;display:flex;align-items:center;}
  .inkp-av{flex:none;font-size:11.5px;color:var(--muted);}
  .inkp-x{flex:none;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:18px;cursor:pointer;}
  .inkp-x:hover{background:var(--bg);color:var(--danger);}
  .inkp-ladda{display:inline-flex;align-items:center;cursor:pointer;margin-bottom:8px;}
  /* ---- Logistik-läget på startsidan (Mikael 2026-10-05) ----
     Förlagan är Vismas startsida: rutor bredvid varandra, allt synligt på en
     gång. Fyra i bredd på stor skärm, två på mellanstor, en på mobilen. */
  .lgd{padding:0 0 24px;}
  .lgd-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .lgd-uppdatera{background:none;border:0;color:var(--info);font:inherit;font-size:13px;padding:0 6px;min-height:44px;cursor:pointer;}
  .lgd-band{margin:14px 0 0;}
  .lgd-bandnamn{margin:0 2px 8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .lgd-rutnat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start;}
  .lgd-ruta{min-width:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  .lgd-rh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 15px 8px;}
  .lgd-rh h3{margin:0;font-size:14px;font-weight:600;line-height:1.3;}
  .lgd-n{flex:none;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;}
  .lgd-ruta.tom .lgd-n{color:var(--muted);font-weight:500;}
  .lgd-tom{padding:2px 15px 14px;font-size:13px;color:var(--muted);}
  .lgd-fel{color:var(--danger);}
  .lgd-not{padding:8px 15px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--border-svag);}
  .lgd .ordw-meta,.lgd .lgk-meta,.lgd .lgk-not{font-style:normal;}
  @media (max-width:1199px){.lgd-rutnat{grid-template-columns:repeat(2,minmax(0,1fr));}}
  /* Mobilen: en ruta i bredd, och tomma rutor krymper till rubrik och nolla -
     tolv rutor under varandra ska inte vara tolv skärmar. Fel syns alltid. */
  @media (max-width:699px){
    .lgd-rutnat{grid-template-columns:minmax(0,1fr);gap:8px;}
    .lgd-ruta.tom .lgd-tom:not(.lgd-fel){display:none;}
    .lgd-ruta.tom .lgd-rh{padding-bottom:12px;}
  }

  /* ---- "Att skicka till OnGoing" på startsidan (Mikael 2026-09-11) ----
     Egen prefix ordw- så att widgeten aldrig krockar med ordermodulens
     klasser. Färgen bär läget, men texten bredvid bär det också - den som
     inte skiljer rött från grönt ska kunna läsa svaret ändå. */
  .ordw-kort{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    margin:16px 12px 0;overflow:hidden;}
  .ordw-topp{display:flex;align-items:baseline;gap:10px;padding:13px 15px 11px;}
  .ordw-rubrik{font-size:14px;font-weight:600;flex:none;}
  .ordw-sum{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Stegremsan: fem steg, ETT öppet i taget. En kedja där alla fem stod
     utfällda blev en rulllista på trettio rader - kedjan syntes inte, bara
     längden (Mikael 2026-09-11: "det blir en väldigt lång lista, inte så
     överskådlig"). Remsan visar hela kedjan och antalen på en rad; listan
     under visar bara det steg man pekat på. */
  /* REMSAN RADBRYTS, DEN KLIPPS INTE (Mikael 2026-09-22: "'Frislappa' blir
     'klippt', hur loser vi det pa ett snyggt satt?").

     Remsan rullade i sidled med gomd rullningslist - ett femte steg lades
     till i dag och da tog bredden slut. En rullningslist man inte ser ar
     ingen affordans: det sag helt enkelt trasigt ut, och pa en mus ar det
     dessutom besvarligt att komma at.

     Nu bryter den rad i stallet, sa hela kedjan alltid syns. Varje pil
     sitter ihop med chippet EFTER sig (.lgk-led), sa en rad aldrig kan
     borja med en ensam pil som pekar pa ingenting - bryts raden blir
     pilen i stallet ett fortsattningstecken, precis som i en brodsmula. */
  .lgk-strip{display:flex;flex-wrap:wrap;gap:6px;padding:10px 15px 11px;
    border-top:1px solid var(--border);}
  .lgk-led{display:inline-flex;align-items:center;gap:6px;}
  .lgk-chip{flex:none;display:flex;align-items:center;gap:7px;background:none;
    border:1px solid var(--border);border-radius:999px;font:inherit;font-size:12px;
    color:var(--muted);padding:6px 12px 6px 9px;cursor:pointer;white-space:nowrap;
    transition:background .15s ease,color .15s ease,border-color .15s ease;}
  .lgk-chip b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
  .lgk-chip.tom b{color:var(--muted);font-weight:500;}
  .lgk-chip.vald{background:var(--text);border-color:var(--text);color:var(--on-accent);}
  .lgk-chip.vald b{color:var(--on-accent);}
  .lgk-pil{flex:none;color:var(--border);font-size:12px;line-height:1;}
  .lgk-mer{display:block;width:100%;background:none;border:none;border-top:1px solid var(--border-svag);
    font:inherit;font-size:12px;color:var(--muted);padding:10px 15px;cursor:pointer;text-align:left;}
  @media (prefers-reduced-motion:reduce){ .lgk-chip{transition:none;} }
  /* ---- Logistikkedjan: stegen efter "att skicka" ---- */
  .lgk-steg{border-top:1px solid var(--border);}
  .lgk-rubrik{display:flex;align-items:baseline;gap:9px;padding:12px 15px 8px;}
  .lgk-namn{flex:none;font-size:12.5px;font-weight:600;}
  .lgk-antal{flex:1;min-width:0;font-size:11.5px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lgk-rad{display:flex;align-items:flex-start;gap:11px;padding:9px 15px;border-top:1px solid var(--border-svag);}
  .lgk-rad:first-of-type{border-top:none;}
  .lgk-text{flex:1;min-width:0;}
  .lgk-titel{font-size:13px;font-weight:600;line-height:1.35;}
  .lgk-meta{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
  .lgk-meta .sen{color:var(--warn);font-weight:600;}
  .lgk-not{display:block;font-style:normal;font-size:11.5px;color:var(--text);opacity:.75;margin-top:3px;line-height:1.5;}
  .lgk-hoger{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
    text-align:right;margin-top:1px;}
  .lgk-tom{padding:2px 15px 11px 41px;font-size:12px;color:var(--muted);}
  .lgk-sparr{display:inline-block;margin-top:4px;font-size:11px;color:var(--warn);font-weight:600;}
  /* Åtgärdsraden (steg 3, Joakim 2026-10-08): det som är sent säger vad nästa steg är,
     i stället för ett grått "passerat" i metaraden. */
  .lgk-atgard{display:block;margin-top:6px;padding:5px 9px;border-radius:9px;background:var(--warn-bg);
    color:var(--warn);font-style:normal;font-size:11.5px;font-weight:600;line-height:1.45;}
  .lgd-sena{margin-left:6px;font-size:12px;font-weight:600;color:var(--warn);white-space:nowrap;}
  /* Fakturaraden är en knapp - man klickar på den för att granska. Knappen
     ska se ut precis som raden bredvid, bara med ett anslag när man pekar. */
  button.lgk-rad{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;
    font:inherit;color:inherit;text-align:left;cursor:pointer;}
  button.lgk-rad:hover{background:#fafafa;}
  button.lgk-rad:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
  .ordw-grupp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding:11px 15px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border);}
  .ordw-grupp span{font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px;}
  .ordw-grupp + .ordw-lista{border-top:none;}
  .ordw-lista{border-top:1px solid var(--border);}
  .ordw-rad{border-top:1px solid var(--border-svag);}
  .ordw-rad:first-child{border-top:none;}
  .ordw-huvud{display:flex;align-items:flex-start;gap:11px;width:100%;background:none;border:none;
    font:inherit;text-align:left;color:var(--text);padding:11px 15px;cursor:pointer;}
  .ordw-huvud:active{opacity:.7;}
  .ordw-prick{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-top:5px;}
  .ordw-prick.gron{background:var(--success);}
  .ordw-prick.orange{background:#b8860b;}
  .ordw-prick.rod{background:var(--danger);}
  .ordw-text{flex:1;min-width:0;}
  .ordw-namn{font-size:13.5px;font-weight:600;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ordw-namn .ordw-bolag{font-weight:500;color:var(--muted);font-size:11px;
    letter-spacing:.04em;margin-left:6px;}
  .ordw-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45;}
  .ordw-meta .rod{color:var(--danger);font-weight:600;}
  .ordw-meta .orange{color:var(--warn);font-weight:600;}
  .ordw-meta .gron{color:var(--success);font-weight:600;}
  .ordw-belopp{flex:none;font-size:12.5px;color:var(--muted);
    font-variant-numeric:tabular-nums;margin-top:2px;}
  .ordw-panel{padding:0 15px 13px 35px;}
  .ordw-besk{padding:0 15px 10px 35px;margin-top:-6px;font-size:12px;color:var(--text);
    line-height:1.5;opacity:.78;}
  .ordw-varning{margin:-4px 15px 10px 35px;padding:6px 10px;border-radius:9px;
    background:#fff7e6;color:var(--warn);font-size:11.5px;font-weight:600;line-height:1.4;}
  /* Restnoterat. Blatt sa lange nagon faktiskt bestallt hem varan - det ar
     ett lage, inte ett fel. Saknas inkopsordern helt ar det daremot ordern
     som ingen bevakar, och da far raden samma roda ton som ovriga varningar. */
  .ordw-rest{margin:-4px 15px 10px 35px;padding:6px 10px;border-radius:9px;
    background:#eef4fd;color:#20508f;font-size:11.5px;font-weight:600;line-height:1.4;}
  .ordw-rest.saknas{background:#fdeeee;color:#a32020;}
  .ordw-rest .sen{color:#a32020;font-weight:700;}
  /* Orderns rader med lagerläge (2026-09-15). Ersatte bristlistan, som bara
     visade det som fattades.

     TVÅ FÄLLOR, BÅDA TRAMPADE I:
     1. display:flex på en behållare med hidden-attributet SLÅR UT hidden -
        klassregeln vinner över webbläsarens egen display:none. Raderna
        ritades alltså hela tiden och tryckte ihop hela widgetkolumnen.
        Därför den uttryckliga [hidden]-regeln nedan.
     2. Widgeten ligger i en SMAL kolumn på startsidan, inte över hela
        bredden. Ett rutnät med breda minmax-kolumner spränger den, och en
        media query hjälper inte - den mäter fönstret, inte behållaren.
        Därför flex med wrap: raderna faller ihop av sig själva när det är
        trångt, oavsett hur bred skärmen råkar vara. */
  .ordw-rader{padding:2px 15px 12px 35px;}
  .ordw-rader[hidden]{display:none;}
  .ordw-rad{display:flex;flex-wrap:wrap;gap:1px 8px;align-items:baseline;
            padding:6px 0;border-top:1px solid var(--accent-light);
            font-size:12px;line-height:1.45;}
  .ordw-rad:first-child{border-top:none;}
  .ordw-rad-art{font-weight:600;font-variant-numeric:tabular-nums;}
  .ordw-rad-antal{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;}
  .ordw-rad-lage{margin-left:auto;white-space:nowrap;text-align:right;}
  .ordw-rad-lage em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;}
  .ordw-rad-namn{color:var(--muted);flex:1 0 100%;min-width:0;}
  .ordwl-finns{color:var(--success);font-weight:600;}
  .ordwl-delvis{color:var(--warn);font-weight:600;}
  .ordwl-slut{color:var(--danger);font-weight:600;}
  .ordwl-ejvara{color:var(--muted);}
  .ordw-tom{padding:0 15px 14px;font-size:13px;color:var(--muted);}
  .ordw-fot{padding:9px 15px 11px;font-size:11px;color:var(--muted);
    border-top:1px solid var(--border-svag);line-height:1.5;}
  /* FINSKA FAKTURAWIDGETEN (Mikael 2026-09-22) later som ordrarwidgeten med
     flit - det ar samma sorts kort pa samma startsida, och tva egna
     formsprak bredvid varandra hade bara sett slarvigt ut. */
  /* SAMMA TEXTSKALA SOM GRANNKORTET (Mikael 2026-09-22: "Vilken stor text
     det blev..."). Forsta versionen arvde sidans bastext och blev ett huvud
     hogre an logistikkedjan bredvid - tva kort sida vid sida som inte holl
     samma skala later som att de kommer fran olika program. Siffrorna nedan
     ar ordrarwidgetens egna: 13,5 / 11,5 / 12,5. */
  .oyw-rad{display:flex;align-items:flex-start;gap:11px;
    padding:11px 15px;border-top:1px solid var(--border-svag);}
  .oyw-rad:first-child{border-top:none;}
  .oyw-text{flex:1;min-width:0;}
  .oyw-namn{display:block;font-size:13.5px;font-weight:600;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .oyw-meta{display:block;font-style:normal;color:var(--muted);font-size:11.5px;
    margin-top:2px;line-height:1.45;}
  .oyw-belopp{flex:none;font-size:12.5px;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px;}
  .oyw-btn{flex:none;border:1px solid var(--border);background:var(--card);border-radius:999px;
    padding:4px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .oyw-btn:active{opacity:.7;}
  .oyw-btn[disabled]{opacity:.45;cursor:default;}

  .oyw-fot{padding:10px 15px 12px;border-top:1px solid var(--border-svag);
    font-size:11.5px;color:var(--muted);line-height:1.45;}
  .oyw-fot strong{font-weight:600;color:var(--text);}
  .oyw-rad.oyw-klar{opacity:.55;}
  .oyw-fel{flex:1 0 100%;color:var(--danger);font-size:11.5px;font-style:normal;}
  .ordw-rad.ordw-klar .ordw-huvud{opacity:.5;}
  .ordw-rad.ordw-klar .ordw-prick{background:var(--success);}
  /* ---- Jobbstatus-widget på budgetsidan (2026-09-01) ---- */
  .jobb-kort{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    margin:16px 12px 0;overflow:hidden;}
  .jobb-topp{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
    font:inherit;text-align:left;padding:13px 14px;cursor:pointer;color:var(--text);}
  .jobb-rubrik{font-size:14px;font-weight:600;flex:none;}
  .jobb-sammanfattning{flex:1;min-width:0;display:inline-flex;align-items:center;gap:7px;
    font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Spannet i kortet ar bara en kalla for kortets rubrik (wSynka) och ska inte synas sjalvt.
     display:inline-flex ovan vann over [hidden], sa raden stod en gang till, i rott och
     utan kortets indrag (Mikael 2026-10-07, skarmdump av Schemalagda jobb). */
  .jobb-sammanfattning[hidden]{display:none;}
  /* Färgen bär betydelse, men pricken bär den också - den som inte skiljer
     rött från grönt ska ändå kunna läsa läget ur texten bredvid. */
  .jobb-prick{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);}
  .jobb-prick.ok{background:var(--success);}
  .jobb-prick.sen{background:#b8860b;}
  .jobb-prick.fel{background:var(--danger);}
  .jobb-prick.av{background:var(--muted);}
  .jobb-sammanfattning.fel{color:var(--danger);font-weight:600;}
  .jobb-sammanfattning.sen{color:var(--warn);font-weight:600;}
  .jobb-lista{border-top:1px solid var(--border);}
  .jobb-rad{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-top:1px solid var(--border-svag);}
  .jobb-rad:first-child{border-top:none;}
  .jobb-rad .jobb-prick{margin-top:5px;}
  .jobb-namn{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.35;}
  .jobb-namn em,.jobb-namn i{display:block;font-style:normal;font-weight:400;font-size:11.5px;
    color:var(--muted);margin-top:2px;line-height:1.45;}
  .jobb-namn i{color:var(--muted);overflow-wrap:anywhere;}
  .jobb-tid{flex:none;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px;}
  .jobb-fot{padding:10px 14px 12px;font-size:11px;color:var(--muted);line-height:1.5;border-top:1px solid var(--border-svag);}
  /* ---- Fakturering (2026-09-07) ----
     Egen prefix fk- sa att den har vyn aldrig krockar med kortens och
     orderlistans klasser. Aldern ar det som barer vyn: en faktura utan
     alder ar en rad, en faktura med alder ar ett besked. */
  .fk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 18px}
  .fk-tile{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px 13px 18px;overflow:hidden}
  .fk-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--border)}
  .fk-tile.fk-crit::before{background:var(--danger)}
  .fk-tile.fk-warn::before{background:var(--warn)}
  .fk-tile.fk-ok::before{background:var(--success)}
  .fk-tile b{display:block;font-size:29px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
  .fk-tile b.fk-noll{color:var(--muted);font-weight:500}
  .fk-tile span{display:block;margin-top:2px;font-size:13px;font-weight:500}
  .fk-tile em{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-style:normal}
  .fk-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 12px;overflow:hidden}
  .fk-block > h3{margin:0;padding:13px 16px 9px;font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .fk-block > h3 i{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
  .fk-varfor{padding:0 16px 10px;margin:0;font-size:12px;color:var(--muted)}
  .fk-lista{list-style:none;margin:0;padding:0 8px 8px}
  .fk-rad{display:grid;grid-template-columns:66px 1fr auto;gap:10px;align-items:baseline;padding:7px 8px;border-radius:11px}
  .fk-rad:nth-child(odd){background:var(--accent-light)}
  .fk-rad .fk-nr{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);font-weight:500}
  .fk-rad .fk-namn{min-width:0}
  .fk-rad .fk-namn strong{display:block;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fk-rad .fk-namn span{display:block;font-size:12px;color:var(--muted)}
  .fk-rad .fk-h{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px;font-weight:500}
  .fk-rad .fk-h em{display:block;font-style:normal;font-weight:400;margin-top:2px}
  .fk-pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--accent-light);color:var(--text)}
  .fk-pill.fk-ok{background:#e7f3ea;color:var(--success)}
  .fk-pill.fk-warn{background:#fbf1dd;color:#8a5a00}
  .fk-pill.fk-crit{background:#fbe9e7;color:var(--danger)}
  .fk-tom{padding:14px 16px 16px;color:var(--muted);font-size:12.5px}
  .fk-spann{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:2px 16px 14px}
  .fk-spann div{border:1px solid var(--border);border-radius:12px;padding:9px 11px}
  .fk-spann strong{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .fk-spann span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
  .fk-mer{padding:8px 16px 13px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--accent-light)}

  /* ---- Artikelkvalitet (2026-09-01) ---- */
  .ak-topp{padding:4px 16px 12px;}
  .ak-summa{font-size:15px;}
  .ak-summa strong{font-size:22px;font-weight:600;letter-spacing:-.4px;}
  .ak-uppdat{font-size:12.5px;color:var(--muted);margin-top:3px;}
  .ak-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 12px;}
  .ak-chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
    border:1px solid var(--border);border-radius:20px;padding:7px 12px;
    font:inherit;font-size:13px;color:var(--text);cursor:pointer;}
  .ak-chip span{font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);}
  .ak-chip.vald{background:var(--text);border-color:var(--text);color:var(--on-accent);}
  .ak-chip.vald span{color:var(--on-accent);}
  /* Noll brister ska synas som noll utan att skrika - dämpad, inte dold:
     att kontrollen finns är i sig information. */
  .ak-chip.tom{opacity:.45;}
  .ak-sokrad{padding:0 16px 10px;}
  .ak-lista{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px;}
  .ak-kort{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
  .ak-kort.kvitterat{opacity:.72;}
  /* ---- Confirmation of arrival (2026-10-05) ---- */
  .coa-kort{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0 16px 12px;display:flex;flex-direction:column;gap:10px;}
  .coa-upp{display:flex;flex-direction:column;gap:3px;border:1.5px dashed var(--border);border-radius:var(--radius);padding:18px 16px;text-align:center;cursor:pointer;font-size:15px;}
  .coa-upp span,.coa-svag{font-size:12.5px;color:var(--muted);}
  .coa-info{font-size:13px;color:var(--info);background:var(--info-bg);border-radius:10px;padding:9px 12px;}
  .coa-fel{font-size:13px;color:var(--danger);background:var(--danger-bg);border-radius:10px;padding:9px 12px;}
  .coa-tillg-rad{display:flex;align-items:center;gap:10px;font-size:14px;}
  .coa-tillg-rad span{flex:1;}
  .coa-lank{background:none;border:0;padding:6px 4px;font:inherit;font-size:13px;font-weight:600;color:var(--text);text-decoration:underline;cursor:pointer;}
  .coa-lank.coa-rod{color:var(--danger);}
  .coa-lista{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px;}
  @media (min-width:1100px){
    main:has(#coaBody.coa-delad){max-width:none;margin:0;padding-right:min(48vw,860px);box-sizing:border-box;}
    #coaBody.coa-delad{width:100%;max-width:720px;margin:0 auto;}
  }
  .coa-upp.over{border-color:var(--text);background:var(--press);}
  .coa-sekrubrik{padding:6px 16px 8px;font-size:12.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);}
  .coa-tom{padding:0 16px 14px;font-size:13px;color:var(--muted);}
  .coa-lrad{display:flex;flex-direction:column;gap:2px;}
  .coa-lrad .coa-lkort{width:100%;}
  .coa-lrad-ner{align-self:flex-end;}
  .coa-lkort{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;font:inherit;color:var(--text);cursor:pointer;}
  .coa-lkort-rad1{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;}
  .coa-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .coa-knappar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .coa-knappar .ko-skapa,.coa-knappar .ko-avbryt{flex:1 1 150px;}
  .coa-last{display:flex;flex-direction:column;gap:2px;font-size:14px;}
  .coa-last span{font-size:12.5px;color:var(--muted);}
  .coa-rad{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
  .coa-rad.kvar{border-color:var(--danger-soft);}
  .coa-rad-topp{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;}
  .coa-punkter{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;}
  .coa-punkter li{padding-left:16px;position:relative;color:var(--muted);}
  .coa-punkter li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--border);}
  .coa-punkter li.ok::before{background:var(--success);}
  .coa-punkter li.fel::before{background:var(--danger);}
  .coa-punkter li.fel{color:var(--text);}
  .coa-punkter li b{color:var(--text);font-weight:600;}
  .coa-detalj summary{font-size:12.5px;color:var(--muted);cursor:pointer;}
  .coa-kvitt{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .coa-kvittknapp{padding:10px 18px;}
  .coa-signera{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-svag);padding-top:12px;}
  .coa-signera label{font-size:12.5px;color:var(--muted);}
  .coa-signera input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);}

  .ak-rubrik{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
  .ak-nr{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;flex:none;}
  .ak-namn{font-size:13.5px;color:var(--muted);line-height:1.35;}
  .ak-taggar{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
  .ak-tagg{display:inline-flex;align-items:center;gap:8px;background:#fdf3f2;color:var(--danger);
    border-radius:9px;padding:5px 5px 5px 10px;font-size:12.5px;font-weight:600;}
  .ak-tagg.av{background:#f2f2f4;color:var(--muted);}
  .ak-tagg i{font-style:normal;font-weight:400;font-size:11.5px;opacity:.85;}
  .ak-tagg button{background:rgba(0,0,0,.06);border:none;border-radius:6px;padding:3px 8px;
    font:inherit;font-size:11.5px;font-weight:600;color:inherit;cursor:pointer;min-height:26px;}
  .ak-tagg button:disabled{opacity:.5;cursor:default;}
  ul.off-lista{list-style:none;margin:0;padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px;}
  #offertDirektSvar:not(:empty){margin-top:12px;}
  .off-farska{margin:0 16px 16px;}
  .off-farska-laddar{margin:0 16px 14px;font-size:13px;color:var(--muted);}
  /* ==================================================================
     OFFERTRADEN, PORTERAD UR SKISSEN (Mikael 2026-09-22)

     "Den borde se EXAKT likadan ut, annars finns ingen mening att gora en
     mockup." Ratt. Forsta porteringen tog med regeln men lat formen sta
     kvar - da var skissen bortkastad. Matten harunder ar skissens, inte
     ungefar skissens.

     TRE VANINGAR, INTE EN ROTA:
       Huvudet  - kundnamn till vanster, belopp till hoger, metaraden under.
       Chipsen  - egen rad. Forut lag de inklamda i metatexten, dar de
                  konkurrerade med datum och saljare om samma blick.
       Foten    - en tunn linje, ett faktum till vanster, EN atgard till
                  hoger. Aldrig tva knappar som tavlar.
     ================================================================== */
  .off-rad{position:relative;background:var(--card);border:1px solid var(--border);
    border-radius:14px;overflow:hidden;
    box-shadow:0 1px 2px rgba(20,20,30,.05), 0 1px 1px rgba(20,20,30,.03);}
  /* ATGARDSSKENAN (Mikael 2026-09-22: "dom har ju en markering pa sig - men
     vad ar det som behovs goras egentligen?").

     Skenan hade ingen regel bakom sig. Nu har den exakt tre fall och inga
     fler: skickad offert over belappsgransen utan uppfoljning och utan
     aktivt bortval (gul), uppfoljning vars datum passerat (rod), och utkast
     som aldrig skickats och legat mer an tre dagar (gul). Se offertAtgard().

     Kreditsparr, kreditrisk och on hold tander ingenting. De beskriver ett
     TILLSTAND man ska lasa, inte en uppgift man ska utfora, och far darfor
     chip - aldrig skena. Blandas de ihop slutar skenan betyda nagot. */
  .off-rad.ar-kraver::before{
    content:"";position:absolute;inset:0 auto 0 0;width:3px;
    background:var(--warn);border-radius:var(--radius) 0 0 var(--radius);
  }
  .off-rad.ar-kraver.ar-sen::before{background:var(--danger);}
  .off-uppf-etikett.ar-kraver{color:var(--warn);font-weight:600;}
  .off-uppf-etikett.ar-sen{color:var(--danger);font-weight:600;}
  /* Filtret i summaraden. Siffran var forut bara en siffra att undra over;
     nu gar den att trycka pa och se vilka rader den syftar pa. */
  .off-atgardsfilter{
    appearance:none;font:inherit;font-size:13px;cursor:pointer;
    border:1px solid var(--border);background:var(--card);color:var(--muted);
    padding:3px 11px 4px;border-radius:999px;margin-left:8px;
    display:inline-flex;align-items:baseline;gap:5px;min-height:28px;
  }
  .off-atgardsfilter b{color:var(--warn);font-variant-numeric:tabular-nums;}
  .off-atgardsfilter.ar-vald{background:var(--warn-bg);border-color:var(--warn-bg);color:var(--warn);}
  /* EXPLICIT PLACERING, INTE AUTOMATIK. Beloppet har en definierad rad och
     maste darfor ocksa ha en definierad kolumn: CSS Grid placerar ut
     raddefinierade objekt FORST, sa utan grid-column tar beloppet kolumn 1
     och kundnamnet hamnar till hoger. Exakt det hande i skissen. */
  .off-huvud{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;width:100%;
    background:none;border:none;font:inherit;text-align:left;cursor:pointer;
    padding:13px 15px 12px;align-items:start;
  }
  .off-huvud:active{background:var(--press);}
  /* Utfällt kort ska synas som utfällt - knappen byter inte längre text
     (se laddaOffertRader), så läget måste synas på något annat sätt. */
  .off-huvud-oppen{background:none;}
  .off-kund{grid-column:1;grid-row:1;font-size:15px;font-weight:600;line-height:1.3;
    letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .off-meta{grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted);
    display:flex;flex-wrap:wrap;gap:2px 7px;align-items:baseline;min-width:0;}
  .off-varde{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;
    white-space:nowrap;font-variant-numeric:tabular-nums;font-size:16px;font-weight:600;
    letter-spacing:-.01em;}
  /* Enheten ar inte lika mycket vard som siffran och ska inte lata som om
     den vore det. */
  .off-enhet{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:3px;}
  .off-meta .nr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);}
  .off-meta .sep{color:#8b8b95;}
  .off-meta .proj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
  .off-gammal{color:var(--danger);font-weight:600;}
  /* CHIPSEN PA EGEN RAD. Alla har samma form och skiljer sig bara pa farg -
     olika radier och textstorlekar fick ogat att leta efter en ordning som
     inte fanns (samma princip som ordraden fick 2026-09-22). */
  .off-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 15px 12px;}
  .off-chips:empty{display:none;}
  .off-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;
    white-space:nowrap;background:#eeeef2;color:#55555f;}
  .off-chip.ar-gron{background:var(--success-bg);color:var(--success);}
  .off-chip.ar-bla{background:var(--info-bg);color:var(--info);}
  .off-chip.ar-gul{background:var(--warn-bg);color:var(--warn);}
  .off-chip.ar-rod{background:var(--danger-bg,#fceded);color:var(--danger);}
  /* ==================================================================
     ORDERVYNS HUVUD (Mikael 2026-09-22: "Då är vi redo att skapa order i
     CRM!" - steg ett av sex, se byggplanen)

     Ordern far en egen vy av samma skal som offerten fick en 2026-09-21: ett
     utfallt kort i en lista racker inte nar det finns huvud, rader, kedja,
     internt och filer att visa. Formen ar skissens - kund till vanster,
     belopp till hoger, kundens folk och kundens ord pa rad tva.
     ================================================================== */
  .ovo{background:var(--card); border:1px solid var(--border); border-radius:14px;
    box-shadow:0 1px 2px rgba(20,20,30,.05), 0 1px 1px rgba(20,20,30,.03);
    padding:15px 16px 14px; margin:0 16px 10px;}
  .ovo-rad{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-start;}
  .ovo-text{flex:1 1 260px; min-width:0;}
  .ovo-kund{font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.25; margin:0;}
  /* KUNDENS LOGOTYP (Mikael 2026-09-28: "så man ser dem när man öppnar
     kund, offert eller order"). Bara internt. Initialerna står tills
     loggan kommit, och kvar om ingen finns - samma plats, samma höjd, så
     ingenting hoppar när bilden laddas. En ordmärkt logga får bli bred,
     en ikon blir en kvadrat. */
  .kund-namnrad{display:flex;align-items:center;gap:12px;min-width:0;}
  .kund-namnrad>h2{min-width:0;}
  .kund-logo{flex:none;display:inline-flex;align-items:center;justify-content:center;height:36px;min-width:36px;
    max-width:120px;padding:0 6px;border-radius:10px;background:var(--press);color:var(--muted);
    font-size:13px;font-weight:600;letter-spacing:.03em;line-height:1;overflow:hidden;user-select:none;}
  .kund-logo.har-bild{background:transparent;padding:0;min-width:0;}
  /* Vit logga (gjord för mörk sidhuvudrad) - på mörk platta, annars syns den inte. */
  .kund-logo.har-bild.ar-ljus{background:#1d1d1f;padding:0 8px;}
  .kund-logo img{display:block;height:36px;width:auto;max-width:120px;object-fit:contain;}
  @media (max-width:600px){
    .kund-logo{height:32px;min-width:32px;max-width:96px;border-radius:9px;}
    .kund-logo img{height:32px;max-width:96px;}
  }
  .ovo-meta{display:flex; flex-wrap:wrap; gap:2px 7px; align-items:baseline;
    font-size:12.5px; color:var(--muted); margin-top:3px;}
  .ovo-meta .nr{font-variant-numeric:tabular-nums; font-weight:600; color:var(--text);}
  .ovo-meta .sep{color:#8b8b95;}
  /* Rad tva: kundens kontakt, kundens markning, kundens projekt. Det ar det
     man letar efter nar telefonen ringer - inte ordernumret. */
  .ovo-meta2{display:flex; flex-wrap:wrap; gap:3px 10px; align-items:baseline;
    font-size:12.5px; color:var(--muted); margin-top:6px;}
  .ovo-meta2 b{color:var(--text); font-weight:600;}
  .ovo-meta2 .etik{color:#8b8b95; font-size:11px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; margin-right:2px;}
  .ovo-meta2 .saknas{color:var(--warn); font-weight:600;}
  .ovo-belopp{font-variant-numeric:tabular-nums; font-size:20px; font-weight:600;
    letter-spacing:-.015em; white-space:nowrap; text-align:right;}
  .ovo-belopp .enhet{font-size:12px; font-weight:500; color:var(--muted); margin-left:3px;}
  .ovo-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
  .ovo-chips:empty{display:none;}
  /* Behallarna finns bara for att tva olika anrop ska kunna fylla var sin
     del - de ska inte sjalva vara lador i layouten. */
  .ovo-chipgrupp{display:contents;}
  /* ATGARDSBANDET ligger kvar dar koden skriver det - direkt under huvudet,
     forst i kroppen - och far se ut som att det hor till kortet i stallet
     for att flyttas in i det. Knapparna blir piller i en rad; makuleraraden
     och panelerna ligger kvar orörda under. */
  /* DIREKT BARN ar fel: offertRaderHtml lagger allt i en .ov, sa knapparna
     ar barnbarn till kroppen. Darfor efterkommande-selektor. */
  #ovoKropp .fu-rader-knappar{flex-direction:row; flex-wrap:wrap; gap:8px;
    padding:0 0 6px;}
  #ovoKropp .fu-rader-knappar .ko-start{flex:0 1 auto; width:auto; margin-top:0;
    min-height:40px; padding:0 16px; border-radius:999px; font-size:13.5px;}
  #ovoKropp .ord-makulera-rad{padding:0 0 10px;}
  /* ==================================================================
     REDIGERBARA FALT I ORDERINFO (2026-09-22)
     Faltet ska LASAS som text och skrivas i utan att man forst letar efter
     en knapp. Darfor ingen ram i vila - bara vardet, pa samma plats och i
     samma storlek som forut - och en tydlig ruta sa fort man ror det.
     Hojden ar 44px aven pa mobil: det ar det minsta en tumme traffar.
     ================================================================== */
  /* Samma storlek och vikt som .oh-falt strong - faltet ska se ut som det
     varde det ersatter, annars hoppar rutnatet nar man byter mellan en
     order och en offert. */
  .oh-red{width:100%; min-height:44px; box-sizing:border-box;
    /* INGEN NEGATIV TOPPMARGINAL. Den drog upp faltet 8px for att texten
       skulle hamna pa exakt samma hojd som ett last varde - men da lade sig
       plattans ovankant OVER etiketten ("MARKE" hamnade inuti rutan).
       Etiketten ar det man laser forst; den far inte skymmas for att fa en
       baslinje att stamma. */
    margin:0 -10px; padding:7px 10px; border:1px solid transparent;
    border-radius:10px; background:transparent; color:var(--text);
    font:inherit; font-weight:500; font-size:13.5px; line-height:1.4;
    -webkit-appearance:none; appearance:none; transition:background .12s, border-color .12s;}
  .oh-red::placeholder{color:var(--muted); font-weight:400;}
  .oh-red:hover{background:var(--press);}
  .oh-red:focus{outline:none; background:var(--card);
    border-color:var(--text); box-shadow:0 0 0 3px rgba(0,0,0,.06);}
  .oh-red-flerrad{min-height:60px; resize:vertical; font-weight:400;}
  /* PA PEKSKARM FINNS INGEN HOVER, och da ar ett redigerbart falt omojligt
     att skilja fran ett last. Mobilen ar forstahandslaget har, sa dar far
     falten en svag platta i vila - det ar skillnaden mellan "text" och
     "falt" nar det inte gar att peka utan att trycka. */
  @media (hover:none){
    .oh-red{background:var(--press);}
    .oh-red:hover{background:var(--press);}
  }
  .oh-falt-red{padding-bottom:2px;}
  .oh-bred{grid-column:1/-1;}
  /* Beskedet om en stangd order - en mening, inte en varningsskylt. */
  .oh-last{margin:0 0 14px; padding:10px 12px; border-radius:12px;
    background:var(--press); color:var(--muted);
    font-size:12.5px; line-height:1.5;}
  .oh-last b{color:var(--text);}
  /* Sparraden ligger under rutnatet och visar sig forst nar nagot andrats. */
  /* Vismas textfalt i Internt-fliken. Ett eget block med egen rubrik, sa
     det syns var texten hor hemma - men samma faltstil som Orderinfo. */
  .oi-visma{margin:0 0 18px; padding:14px 16px; border:1px solid var(--border-svag);
    border-radius:16px;}
  .oi-visma h3{margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);}
  .oi-visma .oh-grid{padding:0;}
  .oi-visma .ov-hjalp{margin:8px 0 0;}
  .oh-spara{margin-top:16px; padding-top:14px; border-top:1px solid var(--border-svag);}
  .oh-spara-rad{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
  .oh-spara-rad button{flex:1 1 140px; min-height:44px;}
  @media (min-width:560px){ .oh-spara-rad button{flex:0 0 auto; min-width:150px;} }
  /* Mellanrubrik inne i ett formular - skiljer leveransadressen fran
     orderhuvudets falt utan att bli en egen ruta. */
  .ko-steg-under{margin-top:18px;}
  /* Fragan om ordererkannandet (2026-09-22). Ligger i kvittot, direkt under
     beskedet om vad som sparats - dar blicken redan ar. */
  .ord-oefraga{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--border-svag);}
  .ord-oefraga-text{flex:1 1 240px; min-width:0; font-size:12.5px; line-height:1.5;}
  .ord-oefraga-text b{display:block; color:var(--text);}
  .ord-oefraga-text span{color:var(--muted);}
  .ord-oefraga-knappar{display:flex; align-items:center; gap:12px; flex:none;}
  .ord-oefraga-knappar .ko-nasta{flex:none; min-height:38px; padding:0 16px;
    border-radius:999px; font-size:13.5px;}
  @media (max-width:560px){ .ovo-belopp{text-align:left;} }
  /* Offerter/Ordrar - en modul, två flikar (2026-09-02) */
  /* FLIKARNA AR RUBRIKEN (skissen, 2026-09-22). Den understrukna raden lag
     som en tredje navigeringsniva ovanpa Meny och rubriken "Offerter"; som
     upphojt piller ar den i stallet den enda. */
  .modul-flikar{display:flex;gap:4px;margin:0 16px 4px;padding:10px 0 0;}
  .modul-flik{flex:1;background:none;border:none;padding:9px 12px 11px;border-radius:10px;
    font:inherit;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;}
  .modul-flik.aktiv{background:var(--card);color:var(--text);
    box-shadow:0 1px 2px rgba(20,20,30,.05), 0 1px 1px rgba(20,20,30,.03);}
  /* Ordermodulen (2026-09-02) */
  .ord-status{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px;}
  .ord-chip{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;}
  .ord-chip.aktiv{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .ord-status-hold,.ord-status-oppen,.ord-status-lev,.ord-status-klar,.ord-status-avbruten,.ord-status-annan{display:inline-block;font-size:11px;font-weight:700;border-radius:8px;padding:2px 7px;margin-right:8px;background:#f2f2f4;color:var(--muted);}
  .ord-status-hold{background:var(--danger-bg);color:var(--danger);}
  .ord-status-oppen{background:#e8f4ec;color:var(--success);}
  .ord-status-lev{background:#e9f0fb;color:#1f4e9c;}
  .ord-oe{font-size:11.5px;color:var(--success);font-weight:600;}
  .ord-bolag{font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;background:#eef0f5;color:var(--muted);vertical-align:middle;margin-left:4px;}
  .off-rad .fu-rader{border-top:1px solid var(--border);}
  /* Uppföljningsraden på offertkortet (2026-09-02) */
  .off-uppf:empty{display:none;}
  /* FOTEN LIGGER INUTI KORTET, skild av en harfin linje - inte ett eget
     block under det (Mikael 2026-09-22: "ett vitt kort med en paklistrad
     gra remsa under"). */
  .off-uppf{border-top:1px solid var(--border-svag,#f0f0f3);padding:9px 15px 10px;
    font-size:12px;color:var(--muted);
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;}
  .off-uppf-rad{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;}
  .off-uppf-etikett{color:var(--muted);}
  .off-uppf-vem{color:var(--muted);}
  .off-uppf-lank{margin-left:auto;background:none;border:none;font:inherit;
    font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;padding:2px 0;
    white-space:nowrap;}
  .off-uppf-lank:hover{color:var(--accent);}
  .off-uppf-form{display:flex;flex-direction:column;gap:8px;padding-top:4px;}
  .off-uppf-form .ko-falt{margin-bottom:0;}
  .off-uppf-knappar{display:flex;align-items:center;gap:12px;}
  .off-uppf-knappar .ko-nasta{flex:none;}

  /* ---- Konvertera offert till order (2026-08-31) ---- */
  .ko-start{
    display:block;width:100%;margin-top:12px;padding:13px 14px;min-height:48px;
    background:var(--accent);color:var(--on-accent);border:none;border-radius:12px;
    font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  }
  .ko-start:active{opacity:.85;}
  .ko-panel{margin-top:10px;border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--card);}
  /* KUNDBESTALLNINGEN I ORDERLISTAN. Panelen ar redan ett kort; delarna
     inuti kommer fran den gamla egna vyn och bar sina egna kort och
     sidmarginaler. Utan de har raderna blir det kort i kort i kort. */
  #ordKuPanel{margin:10px 16px 0;}
  #ordKuPanel .section{padding:16px 0 0;}
  #ordKuPanel .section h3{margin:0 0 8px;font-size:13px;}
  #ordKuPanel .info-card{background:transparent;border:0;padding:0;}
  .ku-fall{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
  .ku-fall summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);
    min-height:32px;display:flex;align-items:center;}
  .ku-fall summary::-webkit-details-marker{display:none;}
  .ku-fall summary::before{content:"\25b8";margin-right:8px;transition:transform .15s;}
  .ku-fall[open] summary::before{transform:rotate(90deg);}
  /* Knappraden i orderlistan bar nu tva knappar - de far radbryta i stallet
     for att krympa till oigenkannlighet pa en telefon. */
  .off-topp{flex-wrap:wrap;}
  .off-ny-grupp{display:flex;gap:8px;flex-wrap:wrap;}
  .ko-steg{
    font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding-bottom:10px;
  }
  .ko-falt{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;flex:1;min-width:0;}
  .ko-falt span{font-size:12.5px;color:var(--muted);}
  .ko-textarea{min-height:5em;resize:vertical;font:inherit;line-height:1.4;border-radius:14px !important;padding:12px 16px;}
  .oh-anteckning strong{font-weight:normal;white-space:pre-wrap;}
  .ko-rad{display:flex;gap:10px;}
  .ko-hjalp{font-size:12.5px;color:var(--muted);line-height:1.4;padding-bottom:4px;}
  /* Felet fran PDF-tolkningen listar de rader den inte kande igen, en per
     rad - utan pre-line blir de en enda grot. */
  #onLoFel,#loFel{white-space:pre-line;}
  .ko-knappar{display:flex;gap:10px;margin-top:6px;}
  /* AVSÄNDARVAL (2026-09-09): "skicka som ansvarig säljare" - segmenterad
     kontroll i Apple-stil. Visas bara när inloggad ≠ offertens säljare. */
  .avs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
  .avs > span{font-size:12.5px;color:var(--muted);}
  .avs-seg{display:flex;background:var(--accent-light);border-radius:12px;padding:3px;gap:3px;}
  .avs-seg button{flex:1;min-height:38px;border:0;border-radius:10px;background:transparent;font:inherit;font-size:13.5px;
    font-weight:500;color:var(--muted);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;}
  .avs-seg button.ar-vald{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);}
  .avs-seg button small{display:block;font-size:11px;font-weight:400;color:var(--muted);}
  .avs-info{font-size:12.5px;color:var(--muted);line-height:1.4;}
  .ko-avbryt,.ko-nasta,.ko-skapa{
    flex:1;min-height:46px;border-radius:12px;font:inherit;font-size:14.5px;
    font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--card);
  }
  .ko-nasta,.ko-skapa{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .ko-skapa:disabled{opacity:.6;}
  .ko-sammanfattning{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;}
  .ko-sammanfattning div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;}
  .ko-sammanfattning span{color:var(--muted);flex:none;}
  .ko-sammanfattning strong{text-align:right;font-weight:600;}
  .ko-klar{font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:6px;}
  .ko-lank{background:var(--card);color:var(--text);border:1px solid var(--border);margin-top:8px;}
  /* MAKULERING ar sallsynt och gar inte att angra fran CRM:et - den ska inte
     se ut som de tre vanliga atgarderna. Egen rad, rod text, ingen fyllning. */
  .ord-makulera-rad{display:flex;justify-content:flex-end;}
  .ord-makulera{background:none;border:0;padding:8px 6px;font:inherit;font-size:13px;
    font-weight:500;color:var(--danger);cursor:pointer;border-radius:8px;}
  .ord-makulera:hover{background:#fdf3f2;}
  .ko-skapa.ar-farlig{background:var(--danger);border-color:var(--danger);}
  .lank-url{
    font-size:12.5px;word-break:break-all;background:var(--accent-light);
    border-radius:10px;padding:10px 12px;margin-bottom:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .ko-mejla{display:flex;align-items:center;justify-content:center;text-decoration:none;}
  .logg-block{margin-top:10px;font-size:12.5px;}
  .logg-block summary{cursor:pointer;color:var(--muted);font-weight:600;padding:4px 0;}
  .logg-rad{display:flex;flex-wrap:wrap;gap:2px 10px;padding:6px 0;border-top:1px solid var(--accent-light);}
  .logg-rad.ar-bestallning{font-weight:600;}
  .logg-tid{font-variant-numeric:tabular-nums;color:var(--muted);}
  .logg-ip{font-variant-numeric:tabular-nums;}
  .logg-ua{flex:1 1 100%;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Offertvyns topp: rubrik och Ny offert på samma rad - inte en svart
     helbreddsknapp som tävlar med listan om uppmärksamheten. */
  /* SUMMARADEN, SOM I SKISSEN: vardet och det som behover atgard till
     vanster, Ny offert till hoger, allt pa en baslinje. */
  .off-topp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
    padding:12px 0 14px;color:var(--muted);font-size:12.5px;}
  .off-topp .off-toppinner{display:contents;}
  .off-topp .off-summa{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
  .off-topp .off-punkt{color:#8b8b95;}
  .off-topp .off-ny{margin-left:auto;}
  @media (max-width:520px){ .off-topp .off-ny{margin-left:0;width:100%;order:9;} }
  .off-topp-text h2{margin:0;}
  /* ---------- AFFÄRER: EN LISTA, ETT HERO-KORT (Mikael 2026-09-29) ----------
     "Offerter/Ordrar-knapparna är lite otydliga ... alla order/offerter i
     samma lista, men att man kan sortera ut ... Siffrorna på ett coolt
     hero-kort till höger. Sedan Ny offert och Ny order." Vänster: handling,
     sök och filter. Höger: läget i siffror, där varje ruta går att trycka på. */
  .aff-topp{display:grid;gap:14px;padding:12px 12px 8px;}
  .aff-topp > .aff-hero{order:-1;}
  @media (min-width:900px){
    .aff-topp{grid-template-columns:minmax(0,1fr) minmax(320px,390px);align-items:start;}
    .aff-topp > .aff-hero{order:0;}
  }
  .aff-vanster{display:flex;flex-direction:column;gap:12px;min-width:0;}
  .aff-knappar{display:flex;gap:8px;flex-wrap:wrap;}
  .aff-knappar .off-ny.ar-sekundar{background:var(--card);color:var(--text);border-color:var(--border);}
  .aff-sok .search-input{width:100%;box-sizing:border-box;}
  .aff-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;transition:opacity .15s;}
  .aff-filter.aff-sokning{opacity:.45;}
  .aff-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--accent-light);gap:2px;}
  .aff-seg button{border:0;background:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
    padding:8px 15px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;}
  .aff-seg button.ar-vald{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14);}
  .aff-seg.liten button{font-size:12.5px;padding:7px 12px;}
  .aff-typ{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:1px 6px;border-radius:5px;vertical-align:1px;}
  .aff-typ.off{background:var(--info-bg);color:var(--info);}
  .aff-typ.utk{background:var(--warn-bg);color:var(--warn);}
  .aff-typ.ord{background:var(--success-bg);color:var(--success);}
  .aff-hamtar{font-size:12.5px;color:var(--muted);padding:0 2px 8px;}
  .aff-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:12px;
    padding:16px;border-radius:var(--radius);color:var(--puls-text);background:var(--puls-bg);
    box-shadow:0 8px 24px rgba(0,0,0,.14);}
  .aff-hero::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
    background:radial-gradient(35% 35% at 75% 25%, rgba(157,188,255,.20), transparent 70%),
               radial-gradient(30% 30% at 25% 80%, rgba(134,224,173,.14), transparent 70%);
    animation:pulsLjus 18s ease-in-out infinite alternate;}
  .aff-h-topp{display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .aff-h-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .aff-h-ruta{text-align:left;border:1px solid var(--puls-line);background:rgba(255,255,255,.04);color:inherit;
    border-radius:14px;padding:10px 12px;font-family:inherit;cursor:pointer;min-width:0;
    transition:background .2s,border-color .2s,transform .15s;}
  .aff-h-ruta:hover{background:rgba(255,255,255,.09);}
  .aff-h-ruta:active{transform:scale(.98);}
  .aff-h-ruta.ar-vald{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12);}
  .aff-h-ruta:focus-visible{outline:2px solid var(--puls-text);outline-offset:1px;}
  .aff-h-etikett{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--puls-muted);white-space:nowrap;}
  .aff-h-etikett i{width:6px;height:6px;border-radius:50%;flex:0 0 auto;}
  .aff-h-etikett i.off{background:var(--puls-off);box-shadow:0 0 8px var(--puls-off);}
  .aff-h-etikett i.varn{background:var(--puls-varn);box-shadow:0 0 8px var(--puls-varn);}
  .aff-h-etikett i.ord{background:var(--puls-ord);box-shadow:0 0 8px var(--puls-ord);}
  .aff-h-etikett i.skick{background:var(--puls-text);}
  .aff-h-tal{margin-top:5px;font-size:25px;line-height:1;font-weight:700;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .aff-h-sub{margin-top:4px;font-size:12px;color:var(--puls-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .aff-h-hit{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--puls-muted);}
  .aff-h-hit b{color:var(--puls-text);font-size:15px;font-variant-numeric:tabular-nums;}
  .aff-h-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:6px;}
  .aff-h-bar i{display:block;height:100%;width:0;border-radius:4px;
    background:linear-gradient(90deg,var(--puls-off),var(--puls-ord));transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
  @media (prefers-reduced-motion:reduce){ .aff-hero::before{animation:none;} .aff-h-bar i{transition:none;} }
  .off-kontakt{font-weight:400;color:var(--muted);}
  /* RSK/LVI under artikelnumret (2026-09-29). */
  /* KOORDINATORNS STOPP (2026-09-29): samma rad som kontrollens varningar,
     men röd - servern vägrar skicka och skapa order så länge den står kvar. */
  .on-koll.ar-stopp{background:var(--danger-bg);border-color:var(--danger-soft);color:var(--danger);}
  .on-koll.ar-stopp b{color:var(--danger);}
  .rk-ref,.on-ref{display:block;font-style:normal;font-size:11px;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:1px;}
  .on-ref:empty{display:none;}
  .off-ny{flex:0 0 auto;min-height:40px;padding:0 16px;border-radius:999px;
    border:1px solid var(--text);background:var(--text);color:var(--on-accent);
    font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
  .off-ny:hover{opacity:.88;}
  /* Ett filter, en rad. Utkasten är en flik här - inte en egen vy under
     Verktyg (Mikael 2026-09-14). */
  .off-filter{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0 12px;}
  .off-flik{border:1px solid var(--border);background:var(--card,#fff);color:var(--muted);
    font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;}
  .off-flik.ar-vald{background:var(--text);border-color:var(--text);color:var(--on-accent);}
  .off-flik-antal{font-variant-numeric:tabular-nums;opacity:.75;}
  .off-ny-marke{display:inline-block;background:#e6f0e9;color:#2c6b47;border-radius:4px;
    padding:1px 5px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
  .off-utkast-atg{display:flex;justify-content:flex-end;padding:0 14px 10px;}
  .off-utkast-marke.ar-skickad{background:var(--success-bg);color:var(--success);}
  .off-utkast-marke.ar-order{background:var(--info-bg);color:var(--info);}
  .off-utkast-marke{display:inline-block;background:var(--accent-light);color:var(--muted);
    border-radius:6px;padding:1px 6px;font-size:11px;font-weight:600;letter-spacing:.02em;}
  .off-utkastlista{display:flex;flex-direction:column;gap:8px;}
  .off-utkastrad{display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;text-align:left;border:1px solid var(--border);background:var(--card,#fff);
    border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer;}
  .off-utkastrad:hover{border-color:#c9c9d0;}
  .off-utkast-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .off-utkast-rubrik{padding:18px 0 8px;font-size:12px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);}
  .off-utkastrad .off-meta b{font-weight:600;color:var(--text);}

  /* Radöversiktens underlagsmärke. En prick och en rad - listan ska gå att
     skumma, inte läsas. */
  /* Ligger INUTI .off-uppf, som redan har border-top och sidopadding - en
     egen sådan gav två streck och dubbel indragning (Mikael 2026-09-14:
     "varför 2 streck genom blocket?"). Här bara en tunn linje NER mot
     uppföljningsraden, som skiljer två olika fakta åt. */
  .off-underlag{display:flex;align-items:center;gap:7px;padding:0 0 8px;margin-bottom:8px;
    border-bottom:1px solid var(--border-svag);font-size:12px;color:var(--muted);}
  /* Foten ar EN rad pa alla bredder sedan 2026-09-22 - tidigare fanns en
     medieregel som slog ihop tva band over 760 px och lat dem ligga i var
     sin rad under. Strecket mellan dem hor till den gamla formen: nar det
     bara finns ett faktum och en atgard ar det inget att skilja at. */
  .off-uppf > .off-underlag{flex:1 1 auto;min-width:0;padding:0;margin:0;border-bottom:0;}
  .off-uppf > .off-utkast-atg{flex:none;margin-left:auto;padding:0;justify-content:flex-end;}
  .off-underlag-prick{width:7px;height:7px;border-radius:50%;background:#c8c8ce;flex:none;}
  .off-underlag.ar-skickad{color:#2c6b47;}
  .off-underlag.ar-skickad .off-underlag-prick{background:#4a9d6a;}
  .off-underlag.ar-bestalld{color:#23558c;font-weight:600;}
  .off-underlag.ar-bestalld .off-underlag-prick{background:#2f6fb5;}

  /* Underlagets härkomst, direkt på offertkortet. Grön kant när det nått
     kunden - man ska se på en meter om offerten är ute eller inte. */
  .ou-status{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:10px 12px;
    border-radius:10px;background:#f7f7f9;border-left:3px solid #d7d7dd;
    font-size:12.5px;line-height:1.5;color:var(--muted);}
  .ou-status.ar-skickad{background:#f2f8f4;border-left-color:#4a9d6a;}
  .ou-status.ar-bestalld{background:#f2f6fb;border-left-color:#2f6fb5;}
  .ou-status span:first-child{color:var(--text);font-weight:600;}

  /* ---- GENERERA OFFERTUNDERLAG, tre steg (2026-09-14) ----
     Lugn yta, en primärknapp åt gången. Remsan säger var man är utan att
     ta plats; avsnitten har egna rubriker så inget behöver gissas. */
  .ou{padding-top:4px;}
  .ou-remsa{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:14px;}
  .ou-steg{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
    font:inherit;font-size:12.5px;color:var(--muted);padding:5px 9px;border-radius:999px;cursor:pointer;}
  .ou-steg .ou-nr{display:inline-flex;align-items:center;justify-content:center;
    width:19px;height:19px;border-radius:50%;background:#e8e8ed;color:var(--muted);
    font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;}
  .ou-steg.ar-klar .ou-nr{background:#d6e6d9;color:var(--success);}
  .ou-steg.ar-har{background:var(--card,#fff);color:var(--text);font-weight:600;
    box-shadow:0 1px 2px rgba(0,0,0,.06);}
  .ou-steg.ar-har .ou-nr{background:var(--text);color:var(--on-accent);}
  .ou-hoppa{margin-left:auto;border:0;background:transparent;font:inherit;font-size:12px;
    color:var(--muted);padding:5px 2px;cursor:pointer;text-decoration:underline;}
  .ou-hoppa:hover{color:var(--text);}
  /* UNDERLAGET RITAT SOM PROTOTYPEN (Mikael 2026-09-21: "kan du ta ett
     helhetsgrepp om hela Offertbilden"). Rubriken ar en rubrik - 15 px,
     inte en versal etikett - och under den en mening som sager vad blocket
     ar. Listorna far luft och harfina linjer i stallet for ramar. */
  .ou-avsnitt{padding:20px 0;border-top:1px solid var(--border);}
  .ou-avsnitt:first-child{border-top:0;padding-top:0;}
  .ou-avsnitt > h4{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:0;
    text-transform:none;color:var(--text);}
  .ou-hjalp{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--muted);max-width:62ch;}
  .ou .bilaga-topp{font-size:15px;font-weight:600;padding-bottom:2px;}
  .ou .bilaga-lista{margin-top:10px;}
  .ou .bilaga-rad{padding:11px 0;font-size:14px;border-top:1px solid var(--border-svag);}
  .ou .bilaga-rad:first-child{border-top:0;}
  .ou .bilaga-namn{font-size:14px;line-height:1.45;}
  .ou .bilaga-namn em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;margin-top:2px;}
  .ou .ko-hjalp{margin:2px 0 0;}
  .ou .ber-koppling{border-top:0;margin-top:0;padding-top:0;}
  .ou-avsnitt .ber-koppling + .ber-koppling{margin-top:18px;padding-top:18px;
    border-top:1px solid var(--border-svag);}
  .ku-knappar{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
  /* KNAPPARNA SLOG UT OVER HELA BREDDEN (Mikael 2026-09-21: "gillar inte
     layouten i denna flik"). .ko-avbryt bar flex:1 och 46 px hojd - den ar
     gjord for en egen knapprad langst ner i en panel. I en rubrikrad blev
     den ett fullbrett faltliknande block bredvid en liten etikett. Har ar
     den en lugn liten knapp i stallet. */
  .ou .bilaga-topp{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
  .ou .bilaga-topp .ko-avbryt,
  .ou .ber-koppling > .ko-avbryt{
    flex:0 0 auto;min-height:0;padding:8px 14px;border-radius:10px;
    font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;
  }
  .ou .bilaga-topp .ko-avbryt:hover{background:var(--press,#f5f6fa);}
  /* Dokumenten i orderbilden (2026-10-13) */
  tr.rk-dok{cursor:pointer;}
  tr.rk-dok:hover td{background:var(--press,#f5f6fa);}
  tr.rk-dok .rk-art{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;}
  .od-besk{margin:-4px 0 14px;color:var(--muted);font-size:14px;}
  .od-avsnitt{margin:0 0 18px;}
  .od-rubrik{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
  .od-td{display:block;margin:0 0 8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;}
  .od-td img{display:block;width:100%;height:auto;}
  .od-lista{display:grid;gap:8px;}
  .od-fil{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:11px 14px;border:1px solid var(--border);
    border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;}
  .od-fil em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted);}
  .od-fil:hover{background:var(--press,#f5f6fa);}
  .od-filer{padding:4px 0;}
  .bilaga-slapp{display:block;margin-top:12px;padding:18px 16px;border:1.5px dashed var(--border);border-radius:12px;
    text-align:center;font-size:14px;color:var(--text);cursor:pointer;transition:background .15s ease,border-color .15s ease;}
  .bilaga-slapp small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);}
  .bilaga-slapp-lank{text-decoration:underline;text-underline-offset:2px;}
  .bilaga-slapp:hover,.bilaga-slapp:focus-visible{background:var(--press,#f5f6fa);outline:none;}
  .bilaga-slapp.ar-over{border-color:var(--text);background:var(--press,#f5f6fa);}
  .bilaga-flerstatus:empty{display:none;}
  /* Antalet i rubriken ar ett tal, inte en del av rubriken. */
  .ou .bilaga-topp > span:first-child{min-width:0;}
  /* Faktagrupperna i Offertinfo (2026-09-21) - rubrik som etikett, linje
     under, och sedan falten. */
  .on-faktagrupp{margin-bottom:24px;}
  .on-faktagrupp:last-child{margin-bottom:0;}
  .on-faktagrupp > h3{margin:0 0 14px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);padding-bottom:9px;
    border-bottom:1px solid var(--border-svag);}
  .on-fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:18px 26px;}
  .on-fcell{min-width:0;display:flex;flex-direction:column;}
  .on-fbredd{grid-column:1 / -1;}
  .on-postrad{display:grid;grid-template-columns:minmax(96px,140px) minmax(0,1fr);gap:18px 26px;}
  .on-fetikett{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);margin-bottom:4px;}
  .on-fcell > small{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35;}
  /* INGEN RAM RUNT VARDET (Mikael 2026-09-21: "det blir ett falt runtom,
     vilket ar bra att man visar att det gar att editera, men det ser
     klumpigt ut").

     En heldragen 1 px-ram gor vardet till en inmatningsruta mitt i en sida
     som annars ar text - och en ruta som ar hogre an sin text ser alltid
     ihalig ut. Affordansen behovs, men den racker som en mjuk fyllning nar
     man pekar, och ett tunt streck under vardet nar man skriver i det.
     Strecket ligger dar man redan ser skillnaden mellan text och falt.

     :focus-visible pa valjarknappen, inte :focus - ett musklick ska inte
     lamna kvar en markering pa faltet man just stangde panelen fran. */
  .on-fin,.on-fval{
    font:inherit;font-size:14px;line-height:1.4;color:var(--text);
    border:0;border-radius:8px;background:transparent;
    padding:5px 8px;margin:-5px -8px;width:calc(100% + 16px);box-sizing:border-box;
    text-align:left;font-variant-numeric:tabular-nums;
    transition:background .12s,box-shadow .12s;
  }
  .on-fin:hover,.on-fval:hover{background:var(--press,#f5f6fa);}
  .on-fin:focus,.on-fval:focus-visible{
    outline:none;background:var(--press,#f5f6fa);
    box-shadow:inset 0 -2px 0 var(--accent);
  }
  .on-fval{cursor:pointer;font-weight:500;}
  .on-fval.ar-tom{color:var(--muted);font-weight:400;}
  .on-fin::placeholder{color:var(--muted);}
  .ou-avsnitt h4.ar-etikett{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);}
  /* Blocken inuti ett avsnitt bär redan sin egen linje - den blir en
     dubbelstreck här, så den tas bort. */
  .ou-avsnitt .ber-koppling{border-top:0;margin-top:10px;padding-top:0;}
  .ou-avsnitt .ber-koppling:first-of-type{margin-top:0;}
  .ou-summa{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:1px;}
  .ou-summa li{display:flex;align-items:baseline;gap:8px;padding:9px 0;
    border-top:1px solid var(--border-svag);font-size:13px;color:var(--text);}
  .ou-summa li:first-child{border-top:0;}
  .ou-summa li b{min-width:22px;font-variant-numeric:tabular-nums;font-weight:600;}
  .ou-summa li.ar-tom{color:var(--muted);}
  .ou-summa li.ar-tom b{color:#c5c5cb;}
  .ou-granska{padding-bottom:2px;}
  .ou-uppdat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .ou-uppdat .ko-avbryt{flex:0 0 auto;min-height:40px;padding:0 15px;font-size:13.5px;}
  .ou-uppdat .ko-hjalp{flex:1 1 260px;margin:0;}
  /* KNAPPHIERARKI I FOTEN (Mikael 2026-09-14: "JÄTTESTOR knapp på tillbaka..
     Skriv mejl borde vara störst och de andra två mindre").
     .ko-avbryt/.ko-nasta bär flex:1 för att fylla en egen knapprad - här
     blev Tillbaka därför halva bredden medan Skriv mejl klämdes ihop och
     Kopiera länk bröt på två rader. I foten sätts storleken efter VIKT i
     stället: den som för framåt är störst, Tillbaka är en tyst textknapp. */
  .ou-fot{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding-top:14px;border-top:1px solid var(--border);}
  .ou-fot .ko-avbryt,.ou-fot .ko-nasta{flex:0 0 auto;}
  .ou-fot > .ko-avbryt{background:transparent;border-color:transparent;color:var(--muted);
    min-height:0;font-size:13px;font-weight:500;padding:8px 2px;}
  .ou-fot > .ko-avbryt:hover{color:var(--text);}
  .ou-fot .ko-nasta{min-height:50px;padding:0 26px;font-size:15.5px;}
  .ou-skicka{display:flex;align-items:center;gap:10px;margin-left:auto;}
  .ou-skicka .ko-avbryt{min-height:42px;padding:0 16px;font-size:13.5px;white-space:nowrap;}
  @media (max-width:560px){
    .ou-hoppa{margin-left:0;}
    .ou-fot{flex-wrap:wrap;}
  }
  /* PANELEN SKA RYMMAS, INTE VECKLAS UT UNDER SKÄRMKANTEN
     (Mikael 2026-09-17: "Då vecklas den ut under skärmen så man är tvungen
     att scrolla. Det blir inte bra..")

     Panelen växte nedåt i sidan. Så fort steg 1 fylldes med dokumentlistor
     hamnade både stegremsan och Granska-knappen utanför skärmen, och man
     fick scrolla för att hitta det man just klickat fram. På en telefon var
     det varje gång.

     Panelen får därför egen höjd och egen scroll. Stegremsan och foten är
     flexbarn utanför scrollytan och sitter kvar av sig själva - ingen
     position:sticky behövs, och därmed inget beroende av vilken förfader
     som råkar scrolla. min-height:0 på kroppen är det som gör att den
     krymper i stället för att växa ut ur panelen.

     dvh först i mobilregeln vore fel väg: äldre webbläsare som inte kan dvh
     ska falla tillbaka på vh, alltså vh först och dvh efter. */
  .ou{display:flex;flex-direction:column;max-height:min(78vh,720px);}
  .ou-remsa{flex:0 0 auto;}
  .ou-kropp{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px;}
  .ou-fot{flex:0 0 auto;}
  @media (max-width:767px){
    .ou{max-height:calc(100vh - 200px);}
    .ou{max-height:calc(100dvh - 200px);}
  }
  /* Utfallet vid offerthuvudet - skilt från allt som rör underlaget. */
  .oh-utfall{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;}
  .ber-koppling{border-top:1px solid var(--border);margin-top:12px;padding-top:12px;}
  /* Alternativ och delsummor på länken (2026-09-09) */
  .grp-rad{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border-svag);}
  .grp-rad-namn{flex:1;min-width:0;font-size:12.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .grp-rad-namn em{font-style:normal;color:var(--muted);}
  .grp-rad select{flex:0 0 190px;max-width:190px;font-size:12.5px;padding:5px 7px;}
  .grp-grupp{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--border-svag);font-size:12.5px;}
  .grp-grupp input[type=text]{flex:1;min-width:0;font-size:12.5px;padding:5px 7px;}
  .grp-grupp select{flex:0 0 110px;font-size:12.5px;padding:5px 7px;}
  .grp-grupp label{display:flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap;}
  .grp-grupp label input{width:15px;height:15px;margin:0;accent-color:var(--accent,#0a66c2);}
  .grp-avsnitt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:14px 0 2px;}
  .grp-summa{font-size:12px;color:var(--muted);padding:8px 0 0;line-height:1.6;}

  /* Egna dokument/radbilder på länken (2026-09-02) */
  .bilaga-topp{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;}
  .bilaga-lista{margin-top:8px;}
  .bilaga-rad{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--border-svag);}
  .bilaga-namn{font-size:13px;min-width:0;}
  .vismadok-rad{justify-content:flex-start;cursor:pointer;}
  /* Grupprubrik i dokumentlistan - typerna åtskilda utan att listan
     blir en tabell. */
  .vismadok-rad.ar-tillval,.vismadok-grupp.ar-tillval{display:none;}
  .vismadok-visaalla .vismadok-rad.ar-tillval,
  .vismadok-visaalla .vismadok-grupp.ar-tillval{display:flex;}
  .vismadok-visaalla .vismadok-grupp.ar-tillval{display:block;}
  .vismadok-mer{margin-top:10px;border:0;background:transparent;color:var(--accent);font:inherit;
    font-size:13px;padding:8px 0;cursor:pointer;text-decoration:underline;}
  .vismadok-grupp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:12px 0 4px;}
  .vismadok-grupp:first-child{padding-top:2px;}
  .vismadok-rad input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent,#0a66c2);}
  /* INGEN STRYKNING (Mikael 2026-09-08: "lätt rörigt?"). Struken text
     betyder borttaget, inte "inte vald" - och när tio av tolv rader är
     strukna blir sidans starkaste textur det man INTE kan använda. Ovalt
     val visas tyst i stället. */
  .vismadok-rad input:not(:checked)+.bilaga-namn{color:var(--muted);}
  .vismadok-status{font-weight:500;font-size:12px;color:var(--muted);}
  .vismadok-fel{margin:8px 0;}
  /* DOKUMENTBIBLIOTEKET I LÄNKEN (Mikael 2026-09-25: "Tänk ut något smart
     hur filerna ska visas så det inte blir en enda lång lista"). Två nivåer
     i stället för en lista: varumärke som flik, produktgrupp som hopfälld
     rad med antal. Sökrutan går tvärs över allt. Mobilen först: flikarna
     rullar i sidled, varje rad är minst 44 px hög. */
  .vismadok-lagg{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;min-height:44px;
    padding:0 14px;border:1px dashed var(--border);border-radius:12px;background:transparent;
    color:var(--text);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;}
  .vismadok-lagg:active{background:var(--press);}
  .vismadok-lagg[hidden]{display:none;}
  .vismadok-lagg:disabled{opacity:.45;cursor:default;}
  .vismadok-lagg b{font-size:18px;font-weight:400;line-height:1;}
  .vb{margin-top:10px;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden;}
  .vb-topp{display:flex;gap:8px;align-items:center;padding:10px 10px 8px;}
  .vb-sok{flex:1;min-width:0;height:40px;border:1px solid var(--border);border-radius:10px;padding:0 12px;
    font:inherit;font-size:15px;background:var(--bg);color:var(--text);}
  .vb-klar{flex:none;height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--accent);
    color:var(--on-accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;}
  .vb-flikar{display:flex;gap:6px;overflow-x:auto;padding:0 10px 10px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;}
  .vb-flikar::-webkit-scrollbar{display:none;}
  .vb-flik{flex:none;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;
    background:var(--card);color:var(--text);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer;}
  .vb-flik span{color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums;}
  .vb-flik.ar-vald{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .vb-flik.ar-vald span{color:var(--on-accent);opacity:.7;}
  .vb-lista{border-top:1px solid var(--border-svag);max-height:min(60vh,460px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .vb-grupp{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 14px;border:0;
    border-bottom:1px solid var(--border-svag);background:transparent;color:var(--text);font:inherit;
    font-size:14px;font-weight:600;text-align:left;cursor:pointer;}
  .vb-grupp:active{background:var(--press);}
  .vb-grupp .vb-antal{margin-left:auto;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums;}
  .vb-grupp .vb-pil{flex:none;width:8px;height:8px;border-right:1.5px solid var(--muted);
    border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .18s ease;}
  .vb-grupp[aria-expanded="true"] .vb-pil{transform:rotate(45deg);}
  .vb-dok{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px 8px 28px;
    border-bottom:1px solid var(--border-svag);}
  .vb-sokresultat .vb-dok{padding-left:14px;}
  .vb-dok-text{flex:1;min-width:0;font-size:13.5px;line-height:1.35;}
  .vb-dok-text em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px;}
  .vb-lagg{flex:none;min-width:84px;height:34px;padding:0 12px;border:1px solid var(--accent);border-radius:999px;
    background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .vb-lagg:active{background:var(--press);}
  .vb-lagg[disabled]{border-color:transparent;color:var(--success);cursor:default;}
  .vb-tom,.vb-laddar{padding:18px 14px;font-size:13.5px;color:var(--muted);}
  .vismadok-bort{flex:none;margin-left:auto;height:30px;padding:0 10px;border:0;border-radius:8px;
    background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;}
  .vismadok-bort:active{background:var(--press);}
  @media (prefers-reduced-motion: reduce){ .vb-grupp .vb-pil{transition:none;} }

  /* ---- Dokumentbiblioteket (2026-09-07) ----------------------------
     Listan är gjord för att skannas, inte läsas: räckvidden är det tal
     man är där för. Redigeringen fälls ut i posten i stället för i en
     modal, så man ser vad man ändrar bredvid det man ändrar det till. */
  .dk-summa{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);margin-bottom:18px;}
  .dk-summa>div{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid var(--border);}
  .dk-summa>div:last-child{border-right:0;margin-right:0;}
  .dk-summa b{display:block;font-size:21px;font-weight:650;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;}
  .dk-summa span{font-size:12px;color:var(--muted);}
  .dk-summa .dk-varn b{color:var(--warn);}
  .dk-verktyg{display:flex;justify-content:flex-end;margin-bottom:12px;}
  .dk-nytt{font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:var(--accent);
    color:var(--on-accent);border:0;border-radius:100px;padding:10px 18px;min-height:44px;}
  .dk-grupp{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    font-weight:600;padding:20px 0 8px;}
  .dk-grupp span{opacity:.6;}
  .dk-post{background:var(--card);border:1px solid var(--border);border-radius:14px;
    margin-bottom:8px;overflow:hidden;}
  .dk-post.ar-oppen{border-color:var(--accent);}
  .dk-topp{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
    cursor:pointer;padding:14px 16px;}
  .dk-titel{display:block;font-weight:600;font-size:14.5px;}
  .dk-meta{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;
    font-variant-numeric:tabular-nums;}
  .dk-brist{display:block;font-size:12px;color:var(--warn);margin-top:3px;}
  /* ---- Ny offert (2026-09-08). Mobilen först: kort, inte tabell. ---- */
  .on-verktyg{margin-bottom:14px;}
  .on-valrader{display:flex;flex-direction:column;gap:1px;background:var(--border);
    border-radius:12px;overflow:hidden;}
  .on-valrad{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    border:0;background:var(--bg);font:inherit;padding:13px 14px;cursor:pointer;text-align:left;}
  .on-valrad:active{background:#ececf0;}
  .on-valrad-etikett{font-size:13px;color:var(--muted);white-space:nowrap;}
  .on-valrad-varde{font-size:14.5px;color:var(--text);font-weight:500;text-align:right;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .on-valrad-varde.ar-tom{color:var(--muted);font-weight:400;}
  /* Skrivbar rad - samma ram och samma höjd som en valrad. */
  /* .on-huvud label är en kolumn med etiketten överst - den regeln är mer
     specifik än .on-valrad och vann. Därför hamnade Märke ovanför fältet i
     stället för till vänster om det (Mikael 2026-09-08). */
  .on-huvud label.on-valrad-in{flex-direction:row;align-items:center;
    justify-content:space-between;gap:12px;font-size:inherit;color:inherit;cursor:text;}
  /* Fokusringen ritas på raden, men gruppen runt omkring klipper hörnen -
     utan egen radie blev ringen kantig i ändarna (Mikael 2026-09-08). */
  .on-valrad{border-radius:12px;}
  .on-valrad:focus-within{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--accent);}
  .on-radin{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:0;font:inherit;
    font-size:14.5px;font-weight:500;color:var(--text);text-align:right;}
  .on-radin:focus{outline:none;}
  .on-radin::placeholder{color:var(--muted);font-weight:400;}
  .on-radin[type="date"]{max-width:170px;}
  .on-notis{font-size:12.5px;color:var(--warn);background:#fdf3ec;border-radius:10px;padding:10px 12px;}
  .on-skapare{font-size:12px;color:var(--muted);padding:2px 2px 0;}
  .on-felruta{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:13px 15px;
    margin-bottom:14px;font-size:14px;line-height:1.4;}
  /* Osparat (2026-10-16): ligger kvar överst medan utkastet redigeras, så den ska inte försvinna ur synfältet. */
  .on-sparvarning{position:sticky;top:8px;z-index:5;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .on-sparvarning span{flex:1 1 240px;}
  .on-projtraffar{background:#f2f6fb;border-radius:12px;padding:12px 14px;}
  .on-projtraffar.ar-tom{font-size:12.5px;color:var(--muted);background:var(--bg);}
  .on-projrubrik{font-size:11.5px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.03em;margin-bottom:4px;}
  .on-projtraff{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 0;border-top:1px solid rgba(0,0,0,.07);}
  .on-projtraff:first-of-type{border-top:0;}
  .on-projtraff-txt{min-width:0;}
  .on-projtraff-txt b{font-size:14.5px;color:var(--text);}
  .on-projtraff-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}

  .on-fot-hoger{display:flex;align-items:center;gap:10px;}
  .on-vyhuvud{margin:0 0 14px;}
  /* Beställningen ur ärendet bredvid offerten (2026-10-09). */
  .on-best{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0 16px 14px;}
  .on-best h4{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted);}
  .on-best-fakta{font-size:13.5px;line-height:1.5;}
  .on-best-fakta b{font-weight:600;}
  .on-best-jmf{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:10px;font-size:13px;}
  .on-best-jmf h5{margin:0;font-size:12px;font-weight:600;color:var(--muted);}
  .on-best-jmf div{line-height:1.45;}
  .on-best-knappar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  @media (max-width:760px){ .on-best-jmf{grid-template-columns:1fr;} }
  .on-varn-bak{position:fixed;inset:0;z-index:220;background:rgba(17,17,17,.36);
    display:flex;align-items:center;justify-content:center;padding:20px;}
  .on-varn{background:var(--card);border-radius:var(--radius);padding:20px 22px 18px;
    max-width:440px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.3);}
  .on-varn h3{margin:0 0 4px;font-size:17px;font-weight:600;}
  .on-varn ul{margin:10px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6;}
  .on-varn-fot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
  .on-tomyta{display:block;width:100%;border:0;border-top:1px solid var(--accent-light);
    background:transparent;padding:22px 12px;font:inherit;font-size:13.5px;color:var(--muted);
    cursor:text;text-align:left;}
  .on-tomyta:hover{background:var(--press);color:var(--text);}
  .on-panel-rad.ar-markerad{background:var(--press);outline:2px solid var(--accent);outline-offset:-2px;}
  .on-editor .dold{display:none;}
  .on-kreditchip{display:inline-flex;align-items:center;margin-left:10px;vertical-align:middle;}
  .on-kreditchip:empty{display:none;}
  .on-skicka{border:0;background:var(--text);color:var(--on-accent);font:inherit;font-weight:600;
    padding:12px 22px;border-radius:999px;cursor:pointer;}
  .on-skicka[disabled]{opacity:.5;cursor:default;}
  /* Smal rad, inte ett kort: utskicket är ett steg, inte huvudsaken. */
  .on-skickadrad{display:flex;align-items:center;justify-content:space-between;gap:14px;
    flex-wrap:wrap;background:var(--card);border-radius:14px;padding:12px 16px;margin-bottom:12px;}
  .on-skickadrad-txt{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap;}
  .on-skickadrad-txt b{font-size:16px;font-variant-numeric:tabular-nums;}
  .on-skickadrad-txt span{font-size:12.5px;color:var(--muted);}
  .on-skickadrad-knappar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .on-skickadrad .on-skicka{padding:11px 20px;}
  @media (max-width: 560px){
    .on-skickadrad{align-items:stretch;}
    .on-skickadrad-knappar{width:100%;}
    .on-skickadrad-knappar .on-skicka{flex:1;}
  }
  /* Panelen bär redan länken och sina egna kopiera/förhandsgranska - våra
     står i raden ovanför, så dubbletterna göms här. */
  .on-skickadpanel{margin-bottom:14px;}
  .on-skickadpanel .lank-url,
  .on-skickadpanel [data-kopiera],
  .on-skickadpanel .ko-forhandsgranska{display:none;}
  .on-skickad{background:var(--card);border-radius:14px;padding:16px;margin-bottom:14px;}
  .on-lank{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
  .on-lank .on-in{flex:1;min-width:220px;font-size:13.5px;}
  .on-lank-btn{border:0;background:var(--bg);color:var(--text);font:inherit;font-size:13.5px;
    padding:11px 16px;border-radius:10px;cursor:pointer;white-space:nowrap;}
  .on-lank-btn:hover{background:#ececf0;}
  .on-lank-vantar{align-self:center;font-size:13px;color:var(--muted);}

  /* FLIKARNA. Offerten och det interna är två olika saker: det ena går till
     kunden, det andra stannar hos oss (Mikael 2026-09-08). */
  .on-flikar{display:flex;gap:6px;margin-bottom:14px;}
  .on-flik{border:0;background:var(--card);color:var(--muted);font:inherit;font-size:14px;
    font-weight:500;padding:10px 18px;border-radius:999px;cursor:pointer;}
  .on-flik.ar-vald{background:var(--text);color:var(--on-accent);}
  .on-flik-antal{font-variant-numeric:tabular-nums;opacity:.65;margin-left:5px;}

  .on-internt{background:var(--card);border-radius:14px;padding:16px;margin-bottom:14px;}
  .on-internt h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
    color:var(--muted);font-weight:600;}
  .on-internt + .on-internt{margin-top:0;}
  .on-komin{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;
    padding:12px 14px;font:inherit;font-size:15px;min-height:80px;resize:vertical;}
  .on-komin:focus{outline:none;border-color:var(--accent);}
  .on-komknapp{margin-top:10px;border:0;background:var(--accent);color:var(--on-accent);font:inherit;
    font-weight:600;padding:11px 22px;border-radius:999px;cursor:pointer;}
  .on-komknapp[disabled]{opacity:.45;cursor:default;}
  .on-komlista{display:flex;flex-direction:column;gap:1px;background:var(--border);
    border-radius:12px;overflow:hidden;margin-bottom:14px;}
  .on-kom{background:var(--bg);padding:12px 14px;}
  .on-kom-topp{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    font-size:12px;color:var(--muted);margin-bottom:4px;}
  .on-kom-text{font-size:14.5px;color:var(--text);white-space:pre-wrap;word-break:break-word;}
  /* Rins inlagg (2026-09-25): AI-kollegans sammanfattning, lagd via en
     inloggad manniska. Markeras sa det syns vems innehallet ar. */
  .on-kom.ar-rin{box-shadow:inset 3px 0 0 var(--accent);}
  .on-rin{display:inline-block;background:var(--accent);color:#fff;font-size:11px;font-weight:600;
    letter-spacing:.02em;padding:1px 7px;border-radius:999px;margin-right:4px;}
  .on-kombort{border:0;background:transparent;color:var(--muted);font-size:17px;line-height:1;
    cursor:pointer;padding:0 2px;}
  .on-kombort:hover{color:var(--danger);}

  .on-bilagor{display:flex;flex-direction:column;gap:1px;background:var(--border);
    border-radius:12px;overflow:hidden;margin-bottom:12px;}
  .on-bilaga{display:flex;align-items:center;gap:12px;background:var(--bg);padding:12px 14px;}
  .on-bilaga-namn{flex:1;min-width:0;font-size:14.5px;color:var(--text);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;}
  .on-bilaga-meta{font-size:12px;color:var(--muted);white-space:nowrap;}
  .on-bilaga-lank{border:0;background:transparent;font:inherit;font-size:13px;color:var(--accent);
    cursor:pointer;padding:0 2px;text-decoration:underline;}
  .on-valjfil{display:inline-block;border:1px dashed var(--border);border-radius:12px;
    padding:14px 18px;cursor:pointer;font-size:14px;color:var(--muted);width:100%;
    box-sizing:border-box;text-align:center;}
  .on-valjfil:hover{border-color:var(--accent);color:var(--text);}
  .on-tomt{font-size:13.5px;color:var(--muted);padding:2px 0 10px;}
  /* VISA FÖR KUNDEN (Mikael 2026-09-16). Bilagan är internpost tills någon
     säger något annat, så knappen är tyst i frånläge och tydlig i tillläge -
     det är PÅ som är avvikelsen och ska synas. Raden byter bakgrund när
     något på den går till kund, så man ser det i förbifarten utan att läsa. */
  .on-bilaga.ar-kund{background:var(--accent-light,#f3f5fb);}
  .on-bilaga-kund{
    flex:none;border:1px solid var(--border);background:var(--card);border-radius:100px;
    font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;
    padding:5px 11px;min-height:32px;display:inline-flex;align-items:center;gap:6px;
    white-space:nowrap;transition:border-color .12s,color .12s,background .12s;
  }
  .on-bilaga-kund:hover{border-color:var(--accent);color:var(--text);}
  .on-bilaga-kund.ar-pa{border-color:var(--accent);background:var(--accent);color:var(--on-accent);}
  .on-bilaga-kund:disabled{opacity:.5;cursor:default;}
  .on-bilaga-intern{flex:none;font-size:12px;color:var(--muted);white-space:nowrap;}
  /* RADEN MÅSTE BRYTA I MOBILEN. Bilagenamnen är långa ("Datablad SR 20-30
     OE 32x45 F900 ränna (kat 710151).pdf") och raden var en enda flexrad:
     med kundknappen tillagd klämdes namnet till "M.." och Öppna/× hamnade
     utanför skärmkanten. Namnet tar nu hela första raden och får radbrytas;
     storlek, kundknapp och åtgärder ligger under. Se brytpunkten vid
     "SIDOMENYN BÖRJAR VID 768". */
  @media (max-width:767px){
    .on-bilaga{flex-wrap:wrap;gap:8px 10px;}
    .on-bilaga-namn{flex:1 1 100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;}
    .on-bilaga-meta{flex:1 1 auto;}
  }

  /* Excel-läget - bara på breda skärmar. Kolumnerna: artikelnr, benämning,
     antal, brutto, rabatt, netto, summa, inpris, TG, bort. */
  .on-tabell{background:var(--card);border-radius:14px;overflow:hidden;overflow:clip;}
  /* KOLUMNERNA KRYMPER (Mikael 2026-10-19: "Jag kan inte ta bort rader i detta läge"). Med ärendet öppet
     bredvid var offerten smalare än kolumnernas fasta bredder, och sista kolumnen - krysset som tar bort
     raden - klipptes bort. Nu krymper kolumnerna mot sina minsta bredder (tabellen ryms från 914 px), och
     under det används kortläget (onBred i src/app.js mäter ytan, inte bara fönstret). */
  .on-th,.on-tr{display:grid;
    grid-template-columns:minmax(96px,112px) minmax(140px,1fr) minmax(52px,70px) minmax(80px,100px) minmax(60px,78px)
      minmax(92px,118px) minmax(104px,134px) minmax(72px,92px) minmax(60px,76px) 44px 30px;
    gap:6px;align-items:center;padding:6px 12px;}
  /* RUBRIKERNA FÖLJER MED NER (Mikael 2026-09-11: "överskrifterna hänger
     med ner när det blir många rader"). En offert på trettio rader gör att
     rubrikraden rullar bort, och då är kolumnerna bara siffror. Sticky mot
     den yta som faktiskt rullar - på desktop sidan, på 900-1023 px <main>.
     Därför måste .on-tabell sluta vara en egen rullyta: overflow:clip
     klipper hörnen utan att skapa en scrollport (overflow:hidden ovan står
     kvar som reserv i webbläsare som inte kan clip - där blir rubriken bara
     vanlig igen, inget går sönder). */
  .on-th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
    padding-top:12px;padding-bottom:8px;border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:6;background:var(--card);border-radius:14px 14px 0 0;}
  /* Rubrik och värde måste ha SAMMA inre padding, annars står talen snett
     under sin rubrik (Mikael 2026-09-08). 10px = fältets 9px + kantlinjen. */
  .on-th > span{padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .on-tr{border-bottom:1px solid var(--border);}
  .on-tr:last-child{border-bottom:0;}
  .on-tr:focus-within{background:#fafafc;}
  .on-th .ar-tal,.on-tr .ar-tal{text-align:right;}
  .on-tin{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;
    border-radius:8px;padding:8px 9px;font:inherit;font-size:14px;color:var(--text);}
  .on-tin:hover{border-color:var(--border);}
  .on-tin:focus{outline:none;border-color:var(--accent);background:var(--card);}
  .on-tin.ar-tal{text-align:right;font-variant-numeric:tabular-nums;}
  /* TG-faltet utan inpris: slackt, inte borta. Att kolumnen ser tom ut sager
     mer an ett falt som gar att skriva i men inte kan rakna (2026-09-22). */
  .on-tin:disabled{color:var(--muted);cursor:not-allowed;}
  .on-tin:disabled:hover{border-color:transparent;}
  .on-tin-art{font-variant-numeric:tabular-nums;font-weight:500;}
  .on-td{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;padding:8px 10px;
    white-space:nowrap;}
  .on-td-namn{font-size:14px;color:var(--text);padding:4px 2px;display:flex;flex-direction:column;gap:0;}
  .on-tin-namn{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;
    border-radius:8px;padding:5px 8px;font:inherit;font-size:14px;line-height:1.32;color:var(--text);
    resize:none;overflow:hidden;display:block;}
  .on-tin-namn:hover{border-color:var(--border);}
  .on-tin-namn:focus{outline:none;border-color:var(--accent);background:var(--card);}
  .on-td-namn .on-saldo{padding-left:9px;}
  .on-namnin{font-weight:500;}
  .on-saldo{font-size:11.5px;color:var(--muted);font-style:italic;font-variant-numeric:tabular-nums;}
  .on-saldo.ar-brist{color:var(--warn);}
  /* En rad vars prisuppslag misslyckats. Röd, med vägen tillbaka i samma
     mening - felet ska gå att åtgärda där det syns. */
  .on-saldo.ar-fel{color:var(--danger,#a33);font-weight:600;font-style:normal;}
  .on-omigen{border:0;background:transparent;font:inherit;font-size:inherit;font-weight:600;
    color:var(--accent,#0a66c2);text-decoration:underline;cursor:pointer;padding:0 0 0 4px;}
  .on-traff.ar-vald{background:var(--accent);color:var(--on-accent);}
  .on-traff.ar-vald b{color:var(--on-accent);}
  .on-tr.ar-text{grid-template-columns:1fr 44px 30px;}
  .on-tr.ar-text:has(.on-anvknapp){grid-template-columns:1fr auto 44px 30px;}
  .on-anvknapp{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;}
  .on-anvknapp:hover{border-color:var(--accent);}
  .on-anv{margin:8px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--border);border-radius:10px;padding:6px;}
  .on-anv-bild{display:block;width:auto;max-width:100%;min-width:600px;height:auto;}
  .on-panel-inner.on-panel-bred{max-width:980px;}
  /* GRUPPRADEN (Mikael 2026-09-21: "pa radnivan kan man valja att skapa ett
     alternativ. Raderna under blir sedan de rader som ingar"). Ett band i
     radflodet, inte ett formular vid sidan av. */
  .on-tr.ar-grupp{grid-template-columns:auto minmax(0,1fr) 124px auto 110px 44px 30px;
    background:var(--accent-light,#f1f1f4);border-top:1px solid var(--border);}
  .on-grupp-mark{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
    color:var(--muted);padding-left:10px;white-space:nowrap;}
  .on-tin-grupp{font-weight:600;}
  .on-grupp-typ{border:1px solid var(--border);border-radius:8px;background:var(--card);
    font:inherit;font-size:13px;padding:7px 8px;color:var(--text);}
  .on-grupp-huvud{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
    white-space:nowrap;}
  .on-grupp-summa{font-weight:600;}
  /* HALVA HOJDEN (Mikael 2026-09-21: "Alternativraden blir valdigt stor, den
     borde man kunna halvera i hojd?"). Bandet arvde radens fulla hojd fran
     tre hall pa en gang: namnfaltet, rullgardinen och pilkolumnen var alla
     byggda for en artikelrad med tva radars benamning. Gruppraden bar en
     enda rad text - den ska lasa som en rubrik, inte som en rad till. */
  .on-tr.ar-grupp{padding-top:2px;padding-bottom:2px;align-items:center;}
  .on-tr.ar-grupp .on-tin{padding:5px 9px;}
  .on-grupp-typ{padding:4px 7px;font-size:12.5px;}
  .on-tr.ar-grupp .on-grupp-huvud{font-size:11.5px;}
  .on-tr.ar-grupp .on-grupp-huvud input{width:14px;height:14px;margin:0;}
  .on-tr.ar-grupp .on-pilar button{padding:1px 2px;font-size:8px;}
  .on-tr.ar-grupp .on-trbort{font-size:16px;padding:2px 4px;}
  .on-rad.ar-grupp{background:var(--accent-light,#f1f1f4);border-radius:12px;}
  .on-rad.ar-grupp .on-grupp-rad2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:0 4px 8px;}
  .on-tin-text{font-style:italic;border-color:var(--border);}
  .on-trbort{border:0;background:transparent;color:var(--muted);font-size:19px;line-height:1;
    cursor:pointer;padding:4px;}
  .on-trbort:hover{color:var(--danger);}
  /* FLYTTA RAD. Ordningen på en offert är sällan den ordning man kom på
     sakerna i (Mikael 2026-09-08). Pilarna syns svagt tills man är på
     raden - de ska finnas, inte ta plats. */
  .on-flytt{display:flex;gap:3px;justify-content:center;align-items:center;}
  .on-pilar{display:flex;flex-direction:column;}
  .on-pilar button{border:0;background:transparent;color:var(--border);font-size:9px;line-height:1;
    cursor:pointer;padding:3px 2px;transition:color .12s;}
  .on-tr:hover .on-pilar button,.on-tr:focus-within .on-pilar button{color:var(--muted);}
  .on-pilar button:hover{color:var(--text);}
  .on-pilar button[disabled]{opacity:.25;cursor:default;}
  /* GREPPET. Att klicka sig uppåt en pil i taget är ohållbart när raden ska
     längst upp i en offert på trettio rader (Mikael 2026-09-11). Dra i
     greppet så flyttas raden dit man släpper; ett klick öppnar radens meny
     med Överst/Nederst, infoga textrad ovanför och lagerställe. */
  .on-grip{border:0;background:transparent;color:var(--border);font-size:12px;line-height:1;
    letter-spacing:-2px;cursor:grab;padding:6px 3px;border-radius:7px;touch-action:none;
    transition:color .12s,background .12s;}
  .on-tr:hover .on-grip,.on-tr:focus-within .on-grip{color:var(--muted);}
  .on-grip:hover{color:var(--text);background:var(--bg);}
  .on-grip[disabled]{opacity:.25;cursor:default;}
  .on-tr.ar-drar,.on-rad.ar-drar{opacity:.4;}
  body.on-drar{cursor:grabbing;user-select:none;-webkit-user-select:none;}
  body.on-drar .on-grip{cursor:grabbing;}
  /* Släpplinjen. En hårfin accentlinje där raden hamnar - inget som tar
     plats i flödet, så inget hoppar medan man drar. */
  .on-drop{height:0;border-top:2px solid var(--accent);margin:-1px 0;border-radius:2px;
    position:relative;z-index:4;}
  .on-radflytt{display:flex;gap:4px;align-items:center;}
  .on-radflytt button{border:0;background:var(--bg);color:var(--muted);font-size:13px;line-height:1;
    cursor:pointer;padding:7px 11px;border-radius:9px;}
  .on-radflytt button[disabled]{opacity:.3;}
  .on-radflytt .on-grip{background:var(--bg);color:var(--muted);padding:7px 9px;border-radius:9px;font-size:13px;}
  /* Radens eget lagerställe. Syns bara när raden avviker från offerten -
     annars är det brus på varje rad. */
  .on-radlager{font-size:11.5px;font-style:normal;font-weight:600;color:var(--accent);
    padding-left:9px;cursor:pointer;align-self:flex-start;background:none;border:0;font-family:inherit;}
  .on-radlager:hover{text-decoration:underline;}
  .on-mer-lager{grid-column:1 / -1;border:1px solid var(--border);background:transparent;
    color:var(--text);font:inherit;font-size:13px;padding:9px 12px;border-radius:10px;cursor:pointer;
    text-align:left;}
  .on-mer-lager:hover{border-color:var(--accent);}
  .on-tfot{font-size:12px;color:var(--muted);padding:12px 14px;border-top:1px solid var(--border);
    cursor:text;}
  /* TOTALRADEN. Summan hör hemma under sin egen kolumn, som i ett kalkylark
     - inte i en ruta som lägger sig över raderna (Mikael 2026-09-08). */
  .on-sumrad{border-top:1.5px solid var(--text);border-bottom:0;padding-top:11px;padding-bottom:11px;}
  /* KONTROLLEN (Mikael 2026-09-25): gula rader under offerten som sager
     vad som inte gar ihop - galler mot ranna, gavlar, fall utan utlopp.
     Reglerna bor i api/ranna-lib.php; har ritas bara svaret. */
  .on-kontroll{margin:10px 0 4px;display:flex;flex-direction:column;gap:6px;}
  /* RANNSTRACKAN - konfiguratorns dialog (2026-09-25). Samma bottenplatta
     som valjarna (.on-panel), med ett formular i stallet for en lista. */
  .on-strack{padding:0 18px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;}
  .on-strack-falt{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;}
  .on-strack label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);}
  .on-strack select,.on-strack input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;
    background:var(--card);color:var(--text);width:100%;min-width:0;box-sizing:border-box;}
  .on-strack label{min-width:0;}
  /* display:flex pa labeln slog ut hidden-attributet - sandfangsrutan stod kvar (Mikael 2026-09-25). */
  .on-strack label[hidden]{display:none;}
  .on-strack-galler{border:1px solid var(--border);border-radius:12px;padding:10px 12px;}
  .on-strack-galler h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:500;}
  .on-strack-knappar{display:flex;gap:8px;flex-wrap:wrap;}
  .on-strack-knappar .ko-nasta{flex:1 1 160px;}
  .on-strack-forslag{background:var(--bg);border-radius:12px;padding:12px 14px;font-size:13.5px;}
  .on-strack-plan{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.7;word-break:break-word;margin:4px 0 8px;}
  .on-strack-plan i{font-style:normal;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:0 5px;margin:0 2px 2px 0;display:inline-block;}
  .on-strack-plan i.ar-sf{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .on-strack-rad{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-top:1px solid var(--border);}
  .on-strack-rad span:last-child{white-space:nowrap;color:var(--muted);}
  .on-strack-rad.ar-brist span:last-child{color:var(--danger);font-weight:600;}
  .on-strack-not{color:var(--warn);font-size:13px;margin-top:6px;}
  .on-strack-lager{margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;}
  .on-strack-lager button{margin-top:6px;}
  .on-kontroll:empty{display:none;}
  /* ROSTFRI RÄNNA (vyer/rostfri.js, 2026-10-08). Svaret överst och stort - det är det säljaren tittar på.
     Fälten i grupper utan ramar, samma inmatning som rännsträckan. */
  .rf .on-strack{gap:16px;}
  .rf-topp-h{display:flex;align-items:center;gap:10px;}
  .rf-lank{border:0;background:transparent;color:var(--accent);font:inherit;font-size:14px;padding:6px 0;cursor:pointer;text-align:left;}
  /* Resultatet ligger inte fast - det tog halva mobilskärmen. Priset står i den fasta knappen i stället. */
  .rf-res{padding:4px 0 12px;border-bottom:1px solid var(--border);transition:opacity .2s;}
  .rf .on-strack-falt{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  /* Fälten står på samma linje även när en etikett bryts på två rader (Mikael 2026-10-13: "Galler rutan är sned").
     Etikett, fält och hjälptext är tre rader i ett subgrid - då delar alla fält i samma rad samma linje,
     och hjälptexten under Sektioner trycker inte upp sitt fält ("Nu hoppade sektioner upp?"). */
  .rf .on-strack-falt label{justify-content:flex-end;}
  @supports (grid-template-rows:subgrid){
    .rf .on-strack-falt label{display:grid;grid-template-rows:subgrid;grid-row:span 3;grid-template-columns:minmax(0,1fr);row-gap:4px;align-items:end;}
    .rf .on-strack-falt label[hidden]{display:none;}
    .rf .on-strack-falt label > .rf-hjalp{align-self:start;}
    .rf .on-strack-falt .rf-las > span{grid-row:2;}
  }
  .rf-just{align-items:center;flex-wrap:wrap;}
  .rf-just span{flex:1 1 220px;}
  .rf-justknapp{flex:0 0 auto;border:0;border-radius:10px;background:var(--text);color:var(--card);font:inherit;font-size:14px;font-weight:600;padding:9px 14px;min-height:40px;cursor:pointer;}
  .rf-res.ar-vantar{opacity:.5;}
  .rf-tal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .rf-tal div{display:flex;flex-direction:column;min-width:0;}
  .rf-tal span{font-size:12px;color:var(--muted);}
  .rf-tal b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rf-tal em{font-style:normal;font-size:12px;color:var(--muted);}
  .rf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
  .rf-chip{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--bg);color:var(--text);}
  .rf-chip.ar-varn{background:var(--warn-bg);color:var(--warn);}
  .rf-chip.ar-ok{background:var(--text);color:var(--card);}
  .rf-benamning{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.4;}
  .rf-sparad{font-size:12.5px;color:var(--muted);margin-bottom:6px;}
  .rf-sparad.rf-varn{color:var(--warn);}
  .rf-hjalp{font-size:11.5px;color:var(--muted);line-height:1.3;}
  .rf-fel{color:var(--danger);font-size:14px;padding:8px 0;}
  .rf-grupp h4{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:500;}
  .rf-las span{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;min-height:44px;}
  .rf-las input{width:auto;}
  .rf-alt{display:flex;flex-wrap:wrap;gap:8px;}
  .rf-altknapp{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;
    display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;min-height:44px;}
  .rf-altknapp span{font-size:12px;color:var(--muted);}
  .rf-upp summary{cursor:pointer;font-size:14px;padding:6px 0;}
  .rf-kal{font-size:12.5px;color:var(--muted);margin:0;}
  .rf-knappar{position:sticky;bottom:0;background:var(--card);padding:8px 0 4px;}
  .rf-tab{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
  .rf-tabrad{display:flex;gap:6px;align-items:center;}
  .rf-tabrad input{flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:8px;padding:8px;font:inherit;font-size:14px;}
  .on-koll{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:9px 12px;font-size:13.5px;line-height:1.4;
    background:var(--warn-bg);color:var(--warn);border:1px solid #f0dcc0;}
  .on-koll.ar-info{background:var(--card);color:var(--muted);border:1px solid var(--border);}
  .on-koll b{flex:0 0 auto;font-weight:600;white-space:nowrap;}
  .on-koll span{flex:1 1 auto;}
  .on-koll em{font-style:normal;opacity:.75;}
  .on-sumrad .on-td{font-weight:600;font-size:15px;}
  .on-sumrad .on-sum-etikett{font-weight:500;font-size:11.5px;text-transform:uppercase;
    letter-spacing:.03em;color:var(--muted);white-space:nowrap;}
  /* Etiketten spänner över de tomma kolumnerna i stället för att tryckas
     ihop i en - annars bryts "Summa exkl. moms" mitt itu. */
  .on-sumrad .on-sum-bred{grid-column:1 / 7;}
  .on-saldo.ar-vantar{opacity:.55;}
  .on-tfot:hover{background:#fafafc;color:var(--text);}
  .on-panel{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.28);
    display:flex;align-items:flex-end;justify-content:center;}
  /* Forankrad vid faltet: ingen morkerlaggning, ingen bottenplatta - en
     trafflista precis under det man klickade pa (2026-09-21). */
  .on-panel.ar-ankrad{background:transparent;display:block;}
  .on-panel.ar-ankrad .on-panel-inner{
    border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);border:1px solid var(--border);
    padding-bottom:0;animation:onPanelNer .14s ease-out;
  }
  @keyframes onPanelNer{from{transform:translateY(-6px);opacity:.4;}to{transform:none;opacity:1;}}
  .on-panel.ar-ankrad .on-panel-topp{padding:12px 14px 8px;font-size:14px;}
  .on-panel.ar-ankrad .on-panel-sok{margin:0 14px 8px;width:calc(100% - 28px);font-size:15px;}
  .on-panel-inner{width:100%;max-width:560px;max-height:88vh;background:var(--card);
    border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;
    padding-bottom:var(--safe-bottom);animation:onPanelUpp .22s cubic-bezier(.32,.72,0,1);}
  @keyframes onPanelUpp{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
  .on-panel-topp{display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px 12px;font-weight:600;font-size:16px;}
  .on-panel-stang{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);
    padding:0 4px;cursor:pointer;}
  .on-panel-sok,.on-panel-fritext-in{width:100%;box-sizing:border-box;border:1px solid var(--border);
    border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;}
  .on-panel-sok{margin:0 18px 10px;width:calc(100% - 36px);}
  .on-panel-fritext{display:flex;gap:8px;padding:0 18px 10px;}
  .on-panel-nyform{display:flex;flex-direction:column;gap:8px;padding:0 18px 12px;}
  .on-panel-nyrubrik{font-size:12.5px;color:var(--muted);}
  .on-panel-nyform .on-panel-fritext-btn{padding:12px 18px;}
  .on-panel-fritext-btn{border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;
    padding:0 18px;border-radius:12px;cursor:pointer;white-space:nowrap;}
  .on-panel-lista{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;}
  .on-panel-rad{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
    padding:13px 18px;cursor:pointer;border-top:1px solid var(--border);}
  .on-panel-rad:active{background:var(--bg);}
  .on-panel-rad b{display:block;font-size:15px;font-weight:500;color:var(--text);}
  .on-panel-rad span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
  body.on-panel-oppen{overflow:hidden;}
  .on-ny{width:100%;border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;
    padding:15px;border-radius:14px;cursor:pointer;font-size:16px;}
  .on-lista{display:flex;flex-direction:column;gap:10px;}
  .on-listkort{background:var(--card);border-radius:14px;overflow:hidden;}
  .on-listrad{display:block;width:100%;text-align:left;background:transparent;border:0;
    padding:14px 16px;cursor:pointer;font:inherit;}
  .on-listbort{display:block;width:100%;text-align:left;border:0;background:transparent;
    border-top:1px solid var(--border);color:var(--danger);font:inherit;font-size:13px;
    padding:11px 16px;cursor:pointer;}
  .on-listrad:active{background:var(--press);}
  .on-listrad-topp{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .on-listkund{font-weight:600;color:var(--text);}
  .on-listrad-meta{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .on-listrad-vem{font-size:12.5px;color:var(--muted);margin-top:3px;}
  .on-listrad-projekt{font-size:13px;color:var(--text);font-weight:500;margin-top:3px;}
  .on-listknappar{display:flex;gap:8px;padding:0 4px 4px;}
  .on-listkopia{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;
    padding:9px 12px;border-radius:10px;cursor:pointer;}
  .on-listkopia:hover{background:var(--bg);color:var(--text);}
  .on-chip{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
    background:var(--bg);color:var(--muted);padding:3px 8px;border-radius:999px;white-space:nowrap;}
  .on-chip.ar-klar{background:#e7f4ea;color:var(--success);}

  /* Foten är fast; utan gott om luft under sista fältet lägger den sig
     över sökrutan (Mikael 2026-09-08: "Summarutan döljer andra fält"). */
  .on-editor{padding-bottom:210px;}
  /* AVTALSFLIKEN BEHOVER EN YTA (Mikael 2026-09-23: "Avtals fliken blir gra
     i botten"). Alla andra flikar star pa ett vitt kort - avtalsfliken
     ritades rakt pa appens bakgrund, och under innehallet tog .on-editor:s
     210 px bottenluft vid. Samma kort som huvudet, alltsa. */
  .on-avtal-flik{background:var(--card);border-radius:14px;padding:14px;margin-bottom:14px;}
  .on-avtal-flik:empty{display:none;}
  .on-huvud{background:var(--card);border-radius:14px;padding:14px;margin-bottom:14px;
    display:flex;flex-direction:column;gap:12px;}
  .on-kundval{width:100%;text-align:left;border:0;background:var(--bg);font:inherit;font-weight:600;
    font-size:16px;padding:14px;border-radius:12px;cursor:pointer;color:var(--text);}
  .on-kundval span{font-weight:400;color:var(--muted);}
  /* Huvudets rader: ett fält per rad på mobilen, två på pc/mac. Fälten
     måste vara lika höga för att raden ska se ut som en rad. */
  .on-hrad{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;}
  .on-hrad > *{min-width:0;}
  .on-hrad .on-valrader,.on-hrad .on-valrad{height:100%;}
  .on-hrad > label .on-in{flex:1 1 auto;}
  @media (min-width:900px) and (min-height:600px){
    .on-hrad{grid-template-columns:1fr 1fr;gap:10px;}
    .on-hrad:has(> :only-child){grid-template-columns:1fr;}
  }
  .on-huvud label,.on-rad-tal label,.on-rad-mer label{display:flex;flex-direction:column;gap:5px;
    font-size:12px;color:var(--muted);}
  .on-falt-bred{grid-column:1 / -1;}
  .on-in{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--card);
    border-radius:10px;padding:11px 12px;font:inherit;font-size:16px;color:var(--text);}
  .on-in:focus{outline:none;border-color:var(--accent);}

  .on-rader{display:flex;flex-direction:column;gap:10px;}
  .on-rad{background:var(--card);border-radius:14px;padding:14px;}
  .on-rad-topp{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .on-rad-namn b{display:block;font-size:15px;color:var(--text);}
  .on-rad-namn span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
  /* SALDOT PA EGEN RAD I MOBILKORTET (Mikael 2026-09-14, skarmbild).
     Artikelnumret och saldot lag som tva inline-element utan mellanrum i
     markupen, och renderades darfor ihop: "01120000 · STYCKI lager:
     Trelleborg 114". Bordsvyn slapp det tack vare .on-td-namn .on-saldo
     som har padding-left - den regeln traffar inte mobilkortet.
     Egen rad i stallet for bara ett mellanrum: det ar tva olika fakta, och
     saldot radbrot anda mitt itu pa en telefonskarm. */
  .on-rad-namn .on-saldo{display:block;margin-top:2px;}
  .on-radbort{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;
    padding:0 4px;cursor:pointer;}
  .on-rad-tal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .on-mer{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    border:0;background:transparent;font:inherit;font-size:12.5px;color:var(--muted);
    padding:10px 0 0;cursor:pointer;text-align:left;}
  .on-tg{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .on-tg.ar-lag{color:var(--warn);}
  .on-tg.ar-tom{color:var(--muted);}
  .on-rad-mer{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;
    border-top:1px solid var(--border);margin-top:10px;}
  .on-rad.ar-text{display:flex;align-items:center;gap:10px;}
  .on-textin{font-style:italic;}

  .on-lagg-till{margin-top:14px;position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  /* [hidden] SLAR DISPLAY:FLEX (Mikael 2026-09-21: "Man kan klicka pa ny rad
     och lagg till.. dock gar det inte att skriva nagot"). Knappraden doldes
     med hidden-attributet nar offerten last - men en egen display-regel
     vinner over webblasarens [hidden]{display:none}. Raderna lades alltsa
     till i en offert som inte gar att skriva i. */
  .on-lagg-till[hidden]{display:none;}
  .on-sok{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--card);
    border-radius:12px;padding:14px;font:inherit;font-size:16px;}
  .on-traffar{position:absolute;left:0;right:0;top:56px;z-index:20;background:var(--card);
    border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14);overflow:hidden;max-height:320px;overflow-y:auto;}
  .on-traff{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
    font-size:14px;padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--border);}
  .on-traff:last-child{border-bottom:0;}
  .on-traff:active{background:var(--bg);}
  .on-traff b{font-variant-numeric:tabular-nums;}
  .on-traff-tom{padding:14px;color:var(--muted);font-size:13px;}
  /* LAGERSALDO I TRÄFFLISTAN (Mikael 2026-09-21). Egen rad under
     benämningen så mobilen inte klipper den. Grönt = finns att skicka,
     rött = slut, grått = bara på väg in. */
  .on-traff-saldo{display:block;margin-top:2px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .on-traff-saldo.ar-finns{color:var(--success);}
  .on-traff-saldo.ar-slut{color:var(--danger);}
  .on-traff.ar-vald .on-traff-saldo{color:var(--on-accent);opacity:.85;}
  .on-nyrad{border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;
    padding:12px 22px;border-radius:999px;cursor:pointer;}
  .on-textrad{border:0;background:var(--bg);color:var(--text);font:inherit;
    padding:11px 16px;border-radius:999px;cursor:pointer;font-size:13px;}

  /* TRÄFFLISTAN ÖVERST. Reglerna måste stå EFTER .on-traffar ovan - stod de
     före vann grundregelns z-index:20 och listan hamnade bakom knapparna
     "Ny rad" och "Lägg till textrad" (Mikael 2026-09-08, två gånger). */
  .on-traffar{z-index:999;}
  .on-radtraffar{position:fixed;left:auto;right:auto;z-index:999;max-height:280px;
    box-shadow:0 10px 34px rgba(0,0,0,.18);}

  /* Summan sitter fast: man ska se vad prissättningen gör medan man gör den. */
  /* FOTEN LIGGER OVANFOR FLIKMENYN (rattat 2026-09-09). Flikmenyn ar inte
     fixerad utan sista elementet i sidans flexkolumn, sa en fot pa bottom:0
     hamnar BAKOM den - och "Skapa offert i Visma" gick inte att na pa en
     telefon (Mikael: "knappen langst ner doljs"). Lyftet sätts av
     onSyncFot() utifran menyns faktiska hojd; ar menyn dold blir det 0.
     Har menyn plats bar DEN sakerhetsmarginalen mot skarmkanten, och da
     ska foten inte lagga pa en till. */
  /* --on-tangent ar den del av layoutytan som det virtuella tangentbordet
     tacker (0 nar det ar nere). Utan den hamnar foten - summan, TG-varningen
     och "Skapa offert i Visma" - BAKOM tangentbordet pa en Galaxy Fold i
     oppet lage (Magnus 2026-09-10). Satts av onSyncViewport(). */
  .on-fot{position:fixed;left:0;right:0;bottom:calc(var(--on-fot-lyft, 0px) + var(--on-tangent, 0px));z-index:30;background:rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--border);padding:12px 16px calc(12px + var(--safe-bottom));}
  .on-fot.har-tabbar{padding-bottom:12px;}
  /* Foten bor utanfor .on-editor, sa .on-editor .dold nadde den inte
     (Mikael 2026-09-21: summaraden lag kvar i alla flikar). */
  .on-fot.dold{display:none;}
  .on-grupper{margin-top:14px;}
  /* Platt underlagspanel: inga steg, ingen fot - bara innehallet. */
  .ou.ar-platt{display:block;max-height:none;}
  .ou.ar-platt .ou-kropp{max-height:none;overflow:visible;flex:none;}
  /* Beraknings- och dokumentlistor far egen rullning i stallet for att
     vaxa ut ur kortet (2026-09-21). */
  .ou.ar-platt .ber-lista{max-height:240px;}
  .ol-bifogas{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:12px 0;margin:2px 0 10px;border-top:1px solid var(--border-svag);
    border-bottom:1px solid var(--border-svag);font-size:13px;}
  .ol-bifogas > div{min-width:0;}
  .ol-bifogas span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
  .ou .ko-knappar{display:flex;justify-content:flex-end;margin-top:12px;}
  .ou .ko-knappar .ko-nasta{flex:0 0 auto;min-height:0;padding:10px 18px;font-size:14px;}
  /* Låst offert: fälten syns men går inte att ändra. Dämpade, inte dolda -
     man ska kunna läsa och kopiera det som står. */
  .on-editor.ar-last .on-huvud input,
  .on-editor.ar-last .on-huvud textarea,
  .on-editor.ar-last .on-rader input,
  .on-editor.ar-last .on-rader textarea{background:transparent;color:var(--muted);cursor:default;}
  .on-editor.ar-last .on-huvud button,
  .on-editor.ar-last .on-rader .on-radbort,
  .on-editor.ar-last .on-rader .on-radflytt,
  .on-editor.ar-last .on-rader .on-trbort,
  .on-editor.ar-last .on-rader .on-flytt{opacity:.3;cursor:default;}   /* tabelläget också (2026-10-19) */
  .on-notis-last{border-left:3px solid var(--accent);}
  .on-fot-tal{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
  .on-fot-tal div{display:flex;flex-direction:column;gap:2px;}
  .on-fot-tal span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
  .on-fot-tal strong{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
  .on-fot-tal .ar-lag strong{color:var(--warn);}
  .on-fot-tal .ar-tom strong{color:var(--muted);}
  .on-fot-varn{font-size:12px;color:var(--warn);margin-top:6px;}
  /* Inprisvyn (2026-09-09). Tabellen ar en lista, inte ett rutnat - pa en
     telefon far artikelnummer och pris rum bredvid varandra, benamningen
     under. */
  .ip-import{padding:14px 16px;border-bottom:1px solid var(--border);}
  .ip-import label{display:block;font-weight:600;font-size:14px;margin-bottom:4px;}
  .ip-hjalp{color:var(--muted);font-size:12.5px;line-height:1.45;margin-bottom:10px;}
  .ip-import textarea{
    width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;line-height:1.4;padding:10px;border:1px solid rgba(0,0,0,.16);border-radius:10px;resize:vertical;
  }
  .ip-import-rad{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
  .ip-status{color:var(--muted);font-size:13px;}
  .ip-sokrad{display:flex;align-items:center;gap:12px;padding:12px 16px;}
  .ip-sokrad input{
    flex:1;min-width:0;padding:9px 12px;border:1px solid rgba(0,0,0,.16);border-radius:10px;
    font-size:15px;font-family:inherit;
  }
  .ip-antal{color:var(--muted);font-size:13px;white-space:nowrap;}
  .ip-tabell{padding:0 16px 16px;}
  .ip-rad{
    display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"nr namn pris" "meta meta meta";
    gap:2px 12px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07);
  }
  .ip-nr{grid-area:nr;font-weight:600;font-variant-numeric:tabular-nums;}
  .ip-namn{grid-area:namn;color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ip-pris{grid-area:pris;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .ip-meta{grid-area:meta;color:var(--muted);font-size:12px;}
  .on-fot-notis{
    margin-top:6px;font-size:12.5px;color:var(--muted);
  }
  .on-fot-knappar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
  .on-status{font-size:12px;color:var(--muted);}
  .on-status.ar-fel{color:var(--danger);}
  /* EN svart knapp per vy. "Stäng" konkurrerade med "Skapa offert i Visma"
     och "Skriv mejl" om att se ut som nästa steg (Mikael 2026-09-08). */
  .on-tillbaka{border:0;background:var(--bg);color:var(--text);font:inherit;font-weight:500;
    padding:12px 24px;border-radius:999px;cursor:pointer;}
  .on-tillbaka:hover{background:#ececf0;}

  @media (min-width: 700px){
    .on-rad-tal{grid-template-columns:120px 160px 120px;}
    .on-fot{max-width:900px;margin:0 auto;border-radius:18px 18px 0 0;}
  }

  /* PÅ PC/MAC SITTER SUMMAN I TABELLEN. Då behöver den inte sitta fast
     längst ned också - den dubblerade siffran och lade sig över knapparna
     (Mikael 2026-09-08). Kvar blir sparat-status och Klar, som en vanlig
     rad i flödet. På mobilen, där tabellen inte finns, är listen kvar. */
  @media (min-width:900px) and (min-height:600px){
    .on-fot{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
      border-top:0;box-shadow:none;max-width:none;margin:0;padding:14px 2px 0;border-radius:0;}
    .on-fot .on-fot-tal{display:none;}
    .on-fot-knappar{margin-top:0;}
  }
  /* VAL AV LAGERSTALLE INNAN ONGOING (Mikael 2026-09-11). Korten ar knappar
     med namn och hur mycket som faktiskt ligger oppet - ett id sager
     ingenting for den som ska valja. Valt kort bar accentkanten. */
  .ko-falt-rubrik{font-size:12px;font-weight:600;color:var(--muted);padding-top:4px;}
  .utl-lager{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px;}
  .utl-lagerval{flex:1 1 190px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    border:1px solid var(--border);background:var(--card);border-radius:12px;padding:11px 14px;
    font:inherit;color:var(--text);cursor:pointer;text-align:left;
    transition:border-color .12s,background .12s;}
  .utl-lagerval strong{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;}
  .utl-lagerval span{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .utl-lagerval:hover{border-color:var(--accent);}
  .utl-lagerval.ar-vald{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);
    background:var(--accent-light,#f3f5fb);}
  .utl-lagerval.ar-vald strong::after{content:" ✓";color:var(--accent);font-weight:700;}
  /* RITNINGSVERKTYGET (2026-09-11). Släppytan ska se ut som en yta man
     får släppa på, inte som en knapp - därav streckad kant och höjd. */
  .rit-slapp{border:1.5px dashed var(--border);border-radius:16px;padding:28px 20px;margin-top:14px;
    cursor:pointer;text-align:center;transition:border-color .14s,background .14s;background:var(--card);}
  .rit-slapp:hover,.rit-slapp.ar-over{border-color:var(--accent);background:#fafafc;}
  .rit-slapp-ikon{color:var(--muted);margin-bottom:8px;}
  .rit-slapp-text{font-size:15px;font-weight:600;}
  .rit-slapp-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .rit-form{margin-top:16px;display:flex;flex-direction:column;gap:2px;}
  .rit-varn{border-left:3px solid var(--warn);padding-left:10px;color:var(--warn);}
  .rit-fakta{display:flex;flex-wrap:wrap;gap:22px;margin:10px 0 14px;}
  .rit-fakta div{display:flex;flex-direction:column;gap:2px;}
  .rit-fakta span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
  .rit-fakta strong{font-size:15px;font-variant-numeric:tabular-nums;}
  .rit-kvar{margin:6px 0 0;padding-left:18px;font-size:12.5px;}
  .rit-kvar li{margin:2px 0;}
  .rit-forhands{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card);}
  .rit-forhands canvas{display:block;width:100%;height:auto;}
  .dk-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:100px;
    background:var(--accent-light,#eef);color:var(--muted);vertical-align:1px;margin-left:6px;}
  .dk-chip.dk-av{background:#f7e9e9;color:var(--danger);}
  .dk-form{padding:0 16px 16px;border-top:1px solid var(--border);display:flex;
    flex-direction:column;gap:12px;}
  .dk-falt{display:flex;flex-wrap:wrap;gap:12px;padding-top:14px;}
  .dk-falt label,.dk-varden{display:flex;flex-direction:column;gap:5px;font-size:12px;
    color:var(--muted);flex:1 1 220px;}
  .dk-varden.ar-dold{display:none;}
  .dk-in{font:inherit;font-size:14px;color:var(--text);background:var(--bg);
    border:1px solid var(--border);border-radius:10px;padding:10px 12px;width:100%;}
  textarea.dk-in{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
    resize:vertical;line-height:1.5;}
  .dk-kryss{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;font-size:13.5px;
    color:var(--text);align-self:flex-end;padding-bottom:10px;}
  .dk-kryss input{width:16px;height:16px;margin:0;accent-color:var(--accent);}
  .dk-rackvidd{font-size:13px;color:var(--text);background:var(--bg);border-radius:10px;
    padding:12px 14px;}
  .dk-rackvidd b{font-variant-numeric:tabular-nums;}
  .dk-rackvidd.ar-tom{background:#fdf3ec;color:var(--warn);box-shadow:inset 0 0 0 1px #f0d9c6;}
  .dk-fildata{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
  a.ko-forhandsgranska{display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;box-sizing:border-box;}
  .gl-utan-lev{color:var(--warn);}
  .dk-sprak{border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:12px;}
  .dk-sprak-rubrik{font-size:12.5px;font-weight:600;color:var(--text);}
  .dk-sprak-rubrik span{font-weight:400;color:var(--muted);}
  .dk-sprakfiler{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;}
  .dk-sprakfiler .dk-sprak-rubrik{flex-basis:100%;}
  .dk-sprakfil em{font-style:normal;color:var(--muted);font-size:11.5px;}
  .dk-fildata span{font-variant-numeric:tabular-nums;}
  .dk-fildata .dk-ingenfil{color:var(--warn);}
  .dk-oppna{border:0;background:var(--bg);color:var(--text);font:inherit;font-weight:500;
    padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .15s ease;}
  .dk-oppna:hover{background:#ececf0;}
  .dk-exempel{margin:8px 0 0;padding-left:16px;font-size:12.5px;color:var(--muted);}
  .dk-exempel code{font-size:12px;}
  .dk-kalla{font-size:12px;color:var(--muted);word-break:break-all;}
  .dk-knappar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .dk-spara,.dk-bort{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:100px;
    padding:10px 18px;min-height:44px;border:1px solid var(--border);background:var(--card);color:var(--text);}
  .dk-spara{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
  .dk-bort{color:var(--danger);}
  .dk-fil{font-size:13px;color:var(--muted);border:1px solid var(--border);border-radius:100px;
    padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
  .dk-fil input{max-width:180px;font-size:12px;}
  .dk-svar{font-size:13px;color:var(--muted);min-height:18px;}
  .dk-svar.ar-fel{color:var(--danger);}
  .bilaga-namn em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px;}
  .lankknapp-liten{flex:none;background:none;border:none;padding:4px 0;font:inherit;font-size:12.5px;font-weight:600;
    color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
  .lankknapp-liten:disabled{opacity:.5;}
  .bilaga-form{margin-top:10px;padding:12px;background:#f7f7f8;border-radius:12px;}
  .bilaga-falt{display:block;margin-bottom:10px;}
  .bilaga-hjalp{font-size:12px;color:var(--muted);margin:-4px 0 8px;}
  .bilaga-fel{color:var(--danger);}
  .bilaga-falt span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
  .bilaga-falt input[type=text],.bilaga-falt select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;font:inherit;background:var(--card);}
  .bilaga-falt input[type=file]{font:inherit;font-size:13px;}
  .ber-lista{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;margin:8px 0;}
  .ber-val{display:flex;align-items:flex-start;gap:10px;padding:9px 6px;border-radius:10px;cursor:pointer;font-size:13.5px;line-height:1.35;}
  .ber-val:hover{background:var(--accent-light);}
  .ber-val input{margin-top:2px;flex:none;}
  .ber-val small{color:var(--muted);font-size:12px;}
  .ko-varning{
    margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--text);
    background:var(--accent-light);border-radius:10px;padding:10px 12px;
  }

  /* ==========================================================================
     DESKTOPLÄGE - brytpunkt 900 px (TILLAGT 2026-08-31)
     --------------------------------------------------------------------------
     Appen var byggd som en mobilapp och visades likadant på en 1334 px skärm:
     en innehållskolumn på ~450 px mitt i en grå yta, åtta kundrader där
     skärmen rymde trettio, och en flytande flikmeny längst ner - en ren
     mobilkonvention. Ingenting nedan ändrar mobilläget: allt ligger i EN
     media-fråga, och under 900 px gäller exakt samma regler som förut.

     Tre saker byter läge:
       1. Flikmenyn blir en smal sidomeny till vänster.
       2. Kundlistan blir en tabell med klickbara kolumnrubriker.
       3. Budgetvyn lägger nyckeltalen på en rad och diagrammet bredvid
          månadsdetaljen istället för under.
     ========================================================================== */
  /* ==========================================================================
     SIDOMENYN BORJAR VID 768 px, INTE 900 (Mikael 2026-09-16, iPad:
     "vanstermenyn forsvinner ibland"). En iPad i STAENDE lage ar 744-834 px
     bred, och i Safari med sidopanelen oppen tappar aven liggande lage
     ett par hundra pixlar - bada hamnade under 900 och menyn bytte plats
     mitt i arbetet. Brytpunkten for sjalva SIDOMENYN ligger darfor har,
     medan tabellerna och tvaspaltslayouten ligger kvar pa 900 (de behover
     bredden, menyn gor det inte).
     min-height:600px: en telefon i liggande lage ar bred men bara ~400 px
     hog - dar far en full sidomeny inte plats, och den nedre flikraden ar
     ratt svar. Samma villkor star i harSidomeny() i JS.
     ========================================================================== */
  @media (min-width:768px) and (min-height:600px){
    :root{ --rail-w:216px; }
    /* Sidomenyn ligger fast till vänster; sidans eget innehåll får plats
       bredvid genom en vänsterindragning på body. Topbar och innehåll följer
       automatiskt med, eftersom båda är vanliga flödeselement. Indraget hör
       ihop med menyn, inte med skrivbordslayouten - därför står det här. */
    body{padding-left:var(--rail-w);}

    /* ---------- Flikmenyn blir sidomeny ---------- */
    .tabbar{
      position:fixed;left:0;top:0;bottom:0;right:auto;width:var(--rail-w);max-width:none;margin:0;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
      padding:16px 12px calc(16px + var(--safe-bottom));
      box-shadow:2px 0 14px rgba(0,0,0,.10);
    }
    .tab-btn{
      flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;
      gap:12px;padding:11px 12px;min-height:44px;border-radius:10px;
    }
    .tab-btn:hover{color:var(--on-accent);background:rgba(255,255,255,.08);}
    .tab-btn.active{background:rgba(255,255,255,.14);}
    .tab-icon{flex:0 0 auto;}
    .tab-label{font-size:14px;font-weight:600;letter-spacing:0;}
    .tab-badge{top:-4px;right:-8px;}

    /* ---------- Verktygsmenyn fälls ut i sidomenyn ---------- */
    /* På mobil är verktygslistan ett ark som dras upp från skärmens
       underkant. På en dator finns ingen underkant att dra från - där hör
       listan hemma direkt under Verktyg-posten i sidomenyn, som en vanlig
       undermeny. Överkanten (--tools-rail-top) sätts av
       placeToolsSheetInRail() utifrån knappens faktiska läge. */
    .tools-sheet{
      left:0;right:auto;bottom:auto;width:var(--rail-w);max-width:none;margin:0;
      /* Reservvärdet motsvarar underkanten på Verktyg-posten med dagens fem
         flikar - JS mäter fram det exakta värdet vid öppning. */
      top:var(--tools-rail-top, 266px);
      max-height:calc(100vh - var(--tools-rail-top, 266px) - 16px);overflow-y:auto;
      background:var(--accent);color:var(--on-accent);border-radius:0;box-shadow:none;
      padding:2px 12px 16px;
      transform:none;opacity:0;pointer-events:none;
      transition:opacity .14s ease;
    }
    .tools-sheet.open{transform:none;opacity:1;pointer-events:auto;}
    /* Handtaget är en dragyta för fingret och rubriken säger "Verktyg" -
       båda överflödiga när listan hänger under posten som redan heter så. */
    .tools-sheet-handle,.tools-sheet-title{display:none;}
    .tools-sheet-list{gap:0;}
    /* Samma indrag som posterna, annars läses rubriken som ett eget val. */
    .tools-sheet-grupp{
      padding:0 10px 4px 46px;margin-top:14px;font-size:10.5px;
      color:rgba(255,255,255,.45);
    }
    .tools-sheet-grupp:first-of-type{margin-top:6px;}
    .tools-sheet-item{
      background:none;border:none;border-radius:8px;padding:7px 10px 7px 46px;gap:10px;
      min-height:34px;color:rgba(255,255,255,.72);
    }
    .tools-sheet-item:hover{background:rgba(255,255,255,.09);color:var(--on-accent);}
    /* Indraget, inte ikonen, är det som gör att listan läses som underordnad
       Verktyg. Sju snarlika linjeikoner i samma spalt som flikarnas egna
       ikoner konkurrerar i stället med dem om samma vänsterkant. */
    .tools-sheet-item .tsi-icon{display:none;}
    .tools-sheet-item .tsi-title{font-size:13.5px;font-weight:500;color:currentColor;}
    /* Underrubrikerna förklarar verktygen för den som möter dem första
       gången - i en 216 px smal spalt blir de tre radbrytningar var och
       gör listan oläslig. Titlarna räcker här. */
    .tools-sheet-item .tsi-sub{display:none;}
    /* Ingen mörkläggning bakom - en undermeny i en sidokolumn skuggar inte
       sidan. Ytan finns kvar osynlig så ett klick utanför stänger menyn. */
    .tools-sheet-backdrop{background:none;}
    .tools-sheet-backdrop.open{opacity:1;}

  }

  @media (min-width:900px) and (min-height:600px){
    body{height:auto;min-height:100vh;overflow:visible;}
    main{overflow:visible;}
    main{max-width:1180px;padding-left:8px;padding-right:8px;padding-bottom:40px;}
    header.topbar{padding:16px 24px;}

    /* ---------- Kundlistan som tabell ---------- */
    /* Korten behåller sin HTML. display:contents låter innehållet i .cbody och
       .cfacts delta i radens rutnät, och varje fält får en NAMNGIVEN cell -
       därför hamnar allt i rätt kolumn även på rader där säljare, senaste
       order eller offert saknas. */
    ul.customer-list{
      padding:0;gap:0;background:var(--card);border:1px solid var(--border);
      border-radius:14px;overflow:hidden;margin:8px 0 4px;
    }
    .customer-head,
    .customer-card{
      display:grid;
      grid-template-columns:minmax(200px,2.1fr) minmax(110px,1.1fr) 132px 104px 128px 132px 18px;
      grid-template-areas:
        "namn saljare oms trend senast offert chev"
        "flagg flagg flagg flagg flagg flagg flagg";
      align-items:center;column-gap:18px;
    }
    .customer-head{
      padding:10px 18px;border-bottom:1px solid var(--border);background:#fafafa;
    }
    .ch-cell{
      background:none;border:none;padding:0;font:inherit;text-align:left;
      font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
      color:var(--muted);white-space:nowrap;
    }
    button.ch-cell{cursor:pointer;}
    button.ch-cell:hover{color:var(--text);}
    .ch-cell.is-sorted{color:var(--text);}
    .ch-namn{grid-area:namn;}
    .ch-saljare{grid-area:saljare;}
    .ch-oms{grid-area:oms;text-align:right;justify-self:end;}
    .ch-trend{grid-area:trend;text-align:right;justify-self:end;}
    .ch-senast{grid-area:senast;text-align:right;justify-self:end;}
    .ch-offert{grid-area:offert;text-align:right;justify-self:end;}
    .ch-chev{grid-area:chev;}

    .customer-card{
      border:none;border-bottom:1px solid var(--border);border-radius:0;
      box-shadow:none;padding:11px 18px;min-height:48px;cursor:pointer;
    }
    .customer-list .customer-card:last-child{border-bottom:none;}
    .customer-card:hover{background:#fafafa;}
    .cbody,.cfacts{display:contents;}
    .customer-card .cname{grid-area:namn;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .customer-card .cmeta{grid-area:saljare;margin-top:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .cmoney{grid-area:oms;text-align:right;font-size:14.5px;}
    .customer-card .ctrend,
    .cfacts .ctrend{grid-area:trend;margin-top:0;justify-content:flex-end;text-align:right;font-size:13px;}
    .clast{grid-area:senast;text-align:right;}
    .coffer{grid-area:offert;text-align:right;margin-top:0;color:var(--text);font-size:13px;}
    .customer-card .ship-flag{grid-area:flagg;margin-top:8px;}
    .customer-card .chevron{grid-area:chev;text-align:right;font-size:17px;}
    /* "Säljare:" och "Offert ute:" står redan som kolumnrubrik. */
    .c-inline-label{display:none;}

    /* Nyckeltalen över listan får rymmas på en rad. */
    .summary-bar{flex-direction:row;align-items:stretch;gap:12px;padding:16px 8px 6px;}
    .summary-hero{flex:0 0 360px;justify-content:center;}
    .summary-hero-label{flex-wrap:wrap;}
    .summary-grid{flex:1;grid-template-columns:repeat(3,1fr);align-content:stretch;}
    .summary-card-wide{grid-column:auto;}
    /* Segmentväljaren ska inte sträckas över hela den breda kolumnen - då
       läser den som två stora knappar i stället för ett val mellan två lägen. */
    .scope-toggle{max-width:520px;}
    /* Sorteringsmenyn är överflödig här: alla fem lägen nås genom att klicka
       på en kolumnrubrik, och två kontroller för samma sak är precis den
       sortens dubblering som gör gränssnittet rörigt. Den finns kvar i
       HTML:en (och i mobilläget), bara dold. */
    .sort-wrap{display:none;}

    /* Samma sidmarginal som listan, så kanterna linjerar. */
    .search-wrap{padding:16px 8px 4px;}
    .scope-wrap{padding:0 8px 10px;}
    .list-meta{padding:0 8px 6px;}

    /* ---------- Startmenyn ---------- */
    .hub-wrap{max-width:940px;padding:26px 8px 20px;}
    .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

    /* Säljarvyn placeras i budgetrutnätet - resten av dess CSS ligger i
       basen, inte här. Den låg en gång HELA i det här blocket, och eftersom
       blocket är @media (min-width:900px) gällde ingenting av den på mobil:
       tabellen ritades rå, rubrikerna klistrades ihop ("AUGhel månad") och
       mobilkorten fanns inte. Layoutregler hör hemma i en brytpunkt,
       komponentens egen CSS gör det aldrig. */
    /* .sv-kort låg i den gamla grid-kartan - widgetskalet placerar den nu. */

    /* ---------- Budgetvyn / startsidan ----------
       Widgetarna ligger i EN ordnad lista (användarens egen ordning), så
       den gamla grid-template-areas-kartan går inte att ha kvar - en fast
       karta och en flyttbar ordning är två sätt att bestämma samma sak.
       I stället två spalter där ett kort kan be om hela bredden. */
    .hub-wrap.bdg-wrap{max-width:1180px;}
    .bdg-header{padding:4px 0 6px;}
    .pb-hem .pb-kontroller,.pb-hem .pb-lista,.pb-hem .pb-tom{padding-left:0;padding-right:0;}
    .pb-hem .pb-fel{margin-left:0;margin-right:0;}
    /* Ett band = två spalter som flödar var för sig. Ett högt kort i den
       ena spalten ska inte trycka ner nästa kort i den andra. */
    #wRuta{display:flex;flex-direction:column;gap:14px;padding:8px 0 0;}
    .w-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;align-items:start;}
    .w-kol{gap:14px;}
    /* En tom spalt måste ändå ta plats i flyttläget, annars går det inte
       att släppa något i den. */
    .w-kol:empty{display:none;}
    body.w-flyttlage .w-kol:empty{display:block;min-height:64px;
      border:1px dashed var(--border);border-radius:var(--radius);}
    .kpi-grid{grid-template-columns:repeat(4,1fr);padding:14px 16px 12px;}
    .w-b .kpi-grid{gap:0;}
    .w-b .kpi-card:nth-child(odd){border-left:1px solid var(--accent-light);padding-left:14px;}
    .w-b .kpi-card:first-child{border-left:none;padding-left:0;}
    .kpi-card.wide{grid-column:auto;}
    .bdg-msg-card{margin:10px 0;}
    .bdg-topp{margin:10px 0;}
    .bdg-detail-card{margin:0;border:none;border-radius:0;padding:2px 16px 14px;}
    .ordw-kort,.jobb-kort{margin:0;border:none;border-radius:0;}
    .w-verktyg{padding:2px 0 0;}
    .w-panel{margin:8px 0 0;}
    /* Diagrammet får plats att andas: bredare staplar och större rutor i
       teckenförklaringen, som var nästan olästa i 11 px. */
    .bdg-col{min-width:34px;}
    .bdg-bar,.bdg-bar-future{width:12px;}
    .bdg-swatch{width:14px;height:14px;}
    .bdg-legend-item{font-size:12.5px;}

    /* Offertraderna får sina fyra ekonomikolumner tillbaka när det finns
       bredd att visa dem på. */
    .fu-rader-tabell .kol-desktop{display:table-cell;}
    .fu-rader-tabell{font-size:13.5px;}
    .fu-rader-tabell th,.fu-rader-tabell td{padding-right:14px;}
    .fu-rader-summa{justify-content:flex-start;gap:28px;}
    /* Huvud och summa får plats på en rad; knapparna sida vid sida. */
    .oh-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 24px;}
    .oh-falt.oh-kontakt{grid-column:auto;}
    .oh-summa{grid-template-columns:repeat(auto-fit,minmax(150px,max-content));gap:12px 44px;}
    .fu-rader-knappar{flex-direction:row;gap:10px;}
    .fu-rader-knappar .ko-start{width:auto;flex:1;margin-top:12px;}
    .fu-rader-tabell tbody tr:hover td{background:var(--accent-light);}

    /* ---------- Övriga listor ---------- */
    /* Uppföljning, frakter och ärenden är korta kort - två i bredd utnyttjar
       skärmen utan att raden blir för lång för att läsas. */
    .my-shipments-list,.my-tickets-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .section{padding:18px 8px 4px;}
    .hub-back-row{padding:14px 8px 0;}
  }

  /* ==================================================================
     MOBILEN ÄR FÖRSTAHANDSLÄGET (Mikael 2026-09-15: "tänk på att det
     alltid ska fungera i en mobil")
     ------------------------------------------------------------------
     Ligger SIST i formatmallen med avsikt. Reglerna nedan använder exakt
     samma selektorer som de de rättar, alltså samma specificitet - och
     den som står sist vinner. Da behover ingen leta reda pa var i filen
     en storlek egentligen sätts.

     TVÅ SAKER SOM FAKTISKT GÅR SÖNDER PÅ TELEFON:

     1. Ett inmatningsfält under 16 px får iOS att ZOOMA IN när man
        fokuserar det. Sidan hoppar, och man får nypa tillbaka för hand.
        Det är inte en smaksak - 16 px är gränsen Safari använder.
     2. En tryckyta under 44 px är svår att träffa med tummen. 44 px är
        Apples egen gräns och den appen redan höll på sina huvudknappar;
        de nyare vyerna hade bara aldrig hunnit ikapp.
     ================================================================== */

  /* --- 1. Fält som fick iOS att zooma in --- */
  .pl-lank input,
  .grp-rad select,
  .grp-grupp input[type=text],
  .grp-grupp select,
  .on-lank .on-in,
  .ip-import textarea,
  .ip-sokrad input,
  .dk-in,
  textarea.dk-in,
  .dk-fil input,
  .bilaga-falt input[type=file],
  .mv-sok{
    font-size:16px;
  }

  /* --- 2. Tryckytor --- */
  .kp-row-btn,
  .ak-tagg button,
  .w-val button,
  .bdg-edit-link,
  .bdg-msg-edit-link,
  .modal-close-btn,
  .note-cancel-edit-btn,
  .pl-knappar button,
  .ko-levval button,
  .oe-chip,
  .shipment-avklara-mini,
  .on-pilar button{
    min-height:44px;
  }
  .kp-row-btn,.w-val button,.modal-close-btn{min-width:44px;}
  /* Kvadratiska ikonknappar: ytan växer, symbolen står kvar. */
  .kp-row-btn{height:44px;width:44px;}
  .modal-close-btn{height:44px;}
  .w-val button{height:44px;}
  /* Pilarna som flyttar en offertrad upp/ner satt på 9 px text - det är
     mindre än brickan på en flik. */
  .on-pilar button{font-size:15px;min-width:44px;}
  /* DET VAR PILARNA SOM SATTE HOJDEN (Mikael 2026-09-21: "Alternativraden
     blir valdigt stor" och sedan "verkar inte blivit mindre?"). Uppmatt i
     webblasaren: sjalva gruppradens innehall ar 33 px, men de tva staplade
     pilknapparna bar 44 px vardera i trafftytsregeln ovan - 88 px, och de
     drog hela raden med sig. Pa gruppraden, som alltid ar en rad text,
     racker halva. Artikelraderna ror vi inte: dar ar trafftytan riktig. */
  .on-tr.ar-grupp .on-pilar button{min-height:19px;font-size:9px;}
  .on-tr.ar-grupp .on-grip{padding:3px 3px;}
  /* Ta bort-korset på en produktbild var 22x22 px. Ytan blir 44, korset
     ser likadant ut - negativ marginal håller den kvar i hörnet. */
  .pj-gallery-del-btn{
    width:44px;height:44px;margin:-11px;
    display:flex;align-items:center;justify-content:center;
  }
  /* Kryssrutan i etikettlistan hade ingen regel alls och kom ut som
     systemets egen, omkring 13 px. */
  /* Kryssrutan var systemets egen, omkring 13 px, och en marginal runt en
     input ar ingen traffyta - tryck utanfor sjalva rutan gor ingenting.
     Darfor ligger den nu i en <label> som bar traffytan: 44 px att peta
     pa, 22 px kryss att titta pa. Att klicka pa radens TEXT valjer
     artikeln, det ar en annan sak och far vara kvar. */
  .lar-check{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-10px 0 -10px -10px;flex:none;cursor:pointer;
  }
  .labels-batch-check{
    width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent);
  }
  .labels-article-row{min-height:52px;}

  /* --- 3. Enda fasta bredden i appen --- */
  /* 140 px rakt av spillde ut ur budgetrutan på en smal telefon. */
  .bdg-editbox input[type="number"]{width:auto;flex:1;min-width:110px;max-width:160px;}

  /* --- 4. Breda tabeller: visa att de går att dra i sidled --- */
  /* .ku-historik har sju kolumner med white-space:nowrap i en yta med
     overflow-x:auto. Scrollen fanns, men ingenting visade att den fanns -
     man såg bara avkapade siffror. Skuggan i högerkanten är kvar tills
     man dragit hela vägen. */
  .fu-rader-scroll{
    background:
      linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--card) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }

  /* --- 5. Flikraden --- */
  /* Sju flikar pa 375 px ger 53 px var. Etiketten stod pa 8,5 px, mindre
     an brickan bredvid. iOS egna flikrader ligger pa 10. Den langsta
     etiketten heter "Folja upp" i stallet for "Uppfoljning" (samma ord
     som vyns egen rubrik "Att folja upp") - da ryms 10 px. */
  /* max-width:899px, INTE ovillkorligt: skrivbordslaget (min-width:900px)
     satter 14 px pa etiketten, och den regeln star TIDIGARE i filen - en
     ovillkorlig rad har hade vunnit over den och krympt etiketten aven pa
     en stor skarm. Mediafragor ger ingen extra specificitet; det ar bara
     ordningen som avgor. */
  @media (max-width:767px), (max-height:599px){
    .tab-label{font-size:10px;}
  }
  @media (max-width:400px){
    .tab-label{font-size:10px;letter-spacing:-0.1px;}
  }

  /* --- 6. Ingenting far sticka ut i sidled --- */
  /* body har overflow:hidden, sa for brett innehall KAPAS i stallet for
     att ge en scroll. Langa ord utan mellanslag - artikelnummer,
     mejladresser, filnamn - ar det som gor det. */
  .cname,.note-item-text,.ticket-title,.oe-dov,.tsi-sub,
  .lgk-titel,.ordw-titel,.gl-readonly-line,.dk-namn{
    overflow-wrap:anywhere;
  }

  /* ==================================================================
     DELADE KOMPONENTER (2026-09-15, genomlysningen)
     ------------------------------------------------------------------
     Appen hade FJORTON olika klasser for "det finns inget har" i sex
     olika typstorlekar, och TRETTON for "nagot ar fel" - gra text, svart
     platta, rod text, rod platta, beige platta eller helt ostylat,
     beroende pa vilken vy man rakade sta i. Samma besked sag olika ut sex
     ganger i samma app.

     HAR SATTS BARA UTSEENDET - farg, typstorlek, platta. LAGET lamnas i
     originalreglerna: .lgk-tom har padding-left 41 px for att stalla sig
     under en ikon, .ordw-tom sitter i ett kort med egen indragning. Den
     som rattar en position rattar den dar den satts, inte har.

     Tre roller, inte tretton:
       fel      - nagot gick sont. Rott.
       varning  - kontrollera det har innan du gar vidare. Amber.
       info     - neutralt besked. Gra platta.
     ================================================================== */

  /* --- Tomt lage: en helsidesvariant och en radvariant --- */
  .empty-state{font-size:15px;color:var(--muted);}
  .note-empty,.rb-saved-empty,.td-empty,.on-tomt,.lo-kund-tom,.ordw-tom,
  .sv-tom,.uppf-w-tom,.mv-tom,.fk-tom,.lgk-tom,.autosuggest-empty,.on-traff-tom{
    font-size:13.5px;color:var(--muted);
  }

  /* --- Fel som en rad text --- */
  .fu-rader-fel,.note-save-error,.ticket-articles-error,.bilaga-fel,
  .lo-varning,.jobb-fel{
    font-size:13px;font-weight:600;color:var(--danger);line-height:1.45;
  }
  /* .fu-rader-fel stod pa 12 px i var(--muted) - ett fel som sag ut som en
     hjalptext. Den anvands i tio vyer; nu ser den ut som det den ar. */

  /* --- Fel som en platta --- */
  .on-felruta,.error-box{
    background:var(--danger-bg);color:var(--danger);
    border:1px solid var(--danger-soft);border-radius:12px;
    padding:12px 14px;font-size:13.5px;line-height:1.5;font-weight:500;
  }
  /* .error-box var stylad BARA inuti .state-screen och kom ut helt naken
     pa de fem andra stallen den anvands. */

  /* --- Varning som en platta --- */
  .sv-varning,.pl-larm,.ordw-varning{
    background:var(--warn-bg);color:var(--warn);
    border:1px solid rgba(138,90,21,.22);border-radius:12px;
    font-size:12.5px;line-height:1.55;
  }

  /* --- Neutralt besked --- */
  /* HJALPTEXTEN LYFTES UR (Mikael 2026-09-21: "text som lacker ur de graa
     falten"). .ko-hjalp ar en bildtext - den har aldrig haft nagon inre
     marginal, bara padding-bottom:4px. Nar harmoniseringen gav den grA
     bakgrund och radie blev varje liten forklaring en ruta dar texten
     stod tatt mot kanten och sag ut att rinna over. Den ar text igen;
     rutan hor till .ko-varning, som har sin padding. */
  .ko-varning{
    background:var(--accent-light);color:var(--text);
    border:0;border-radius:12px;font-size:12.5px;line-height:1.5;
  }

  /* --- Sokfalt: ett utseende --- */
  /* .on-sok satt pa 12 px radie medan appens ovriga sokfalt ar pillformade. */
  .on-sok{padding:13px 16px;border-radius:100px;}

  /* --- Startsidan i linje med ovriga vyer --- */
  /* .hub-wrap hade 24 px i topp dar .detail-header har 18 - det syntes nar
     man vaxlade mellan startsidan och en lista. Botten lamnas: rutnatet
     behover luften. */
  .hub-wrap{padding-top:18px;}

  /* --- Den enda knappen i appen med skugga --- */
  /* .note-add-btn ar sticky och ska lyfta nagot fran texten som rullar
     under - men 0 4px 14px rgba(0,0,0,.22) var en helt annan tyngd an
     resten av appen. Behall lyftet, ta ner det till samma diskreta niva
     som korten. */
  .note-add-btn{box-shadow:0 2px 8px rgba(0,0,0,.10);}
  /* FRAKTPRIS-PANELEN (2026-09-28) */
  .on-frakt-kropp{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 16px;display:flex;flex-direction:column;gap:12px;}
  .on-frakt-rad{display:flex;flex-wrap:wrap;gap:10px;}
  .on-frakt-rad label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);}
  .on-frakt-post{flex:1 1 180px;}
  .on-frakt-land{flex:0 0 90px;}
  .on-frakt-tal{flex:1 1 90px;min-width:0;}
  .on-frakt-rad input,.on-frakt-rad select{box-sizing:border-box;width:100%;border:1px solid var(--border);border-radius:12px;
    padding:11px 12px;font:inherit;font-size:16px;color:var(--text);background:var(--card);font-variant-numeric:tabular-nums;}
  .on-frakt-notis{font-size:12.5px;color:var(--muted);line-height:1.45;}
  .on-frakt-notis:empty{display:none;}
  .on-frakt-notis.ar-fel{color:var(--danger);}
  .on-frakt-hamta{padding:13px 18px;align-self:flex-start;}
  .on-frakt-hamta:disabled{opacity:.5;cursor:default;}
  .on-frakt-lista{display:flex;flex-direction:column;}
  .on-frakt-alt{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
  .on-frakt-alt-txt{flex:1 1 auto;min-width:0;}
  .on-frakt-alt-txt b{display:block;font-size:15px;font-weight:500;color:var(--text);}
  .on-frakt-alt-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
  .on-frakt-alt-pris{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .on-frakt-lagg{border:0;background:var(--bg);color:var(--text);font:inherit;font-weight:500;padding:9px 14px;
    border-radius:999px;cursor:pointer;white-space:nowrap;}
  .on-frakt-fler{align-self:flex-start;margin-top:10px;border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;
    font-size:13.5px;font-weight:500;padding:9px 14px;border-radius:999px;cursor:pointer;}
  .on-frakt-lagg:hover{background:#ececf0;}

  /* MOBILKORTET (2026-09-28) - se onRadHtml. */
  .on-kort{padding:14px 14px 6px;}
  .on-kort .on-rad-topp{gap:14px;margin-bottom:12px;}
  .on-kort .on-rad-namn{flex:1 1 auto;min-width:0;}
  .on-kort .on-namnin{font-size:16px;font-weight:600;line-height:1.3;padding:4px 6px;margin:-4px -6px 2px;
    border:1px solid transparent;background:transparent;border-radius:8px;width:calc(100% + 12px);}
  .on-kort .on-namnin:focus{border-color:var(--accent);background:var(--card);}
  .on-kort .on-rad-namn span{display:block;}
  .on-rad-sum{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:3px;padding-top:2px;}
  .on-rad-sum b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text);}
  .on-rad-sum .on-tg{font-size:12.5px;font-weight:500;}
  .on-kort .on-rad-tal{grid-template-columns:1fr 1.25fr 1fr;}
  .on-kort .on-rad-tal .on-in{padding:10px 11px;}
  .on-kort .on-mer{padding:12px 0 8px;}
  .on-mer-lank{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:500;}
  .on-mer-lank svg{transition:transform .2s;}
  .on-kort.ar-oppen .on-mer-lank svg{transform:rotate(180deg);}
  .on-kort .on-rad-mer{margin-top:0;padding-bottom:10px;}
  /* [hidden] slogs ut av display:grid - "fler val" var darfor alltid
     utfallt, aven fore omgoringen. */
  .on-rad-mer[hidden]{display:none;}
  .on-rad-atg{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;}
  .on-rad-atg button{border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;font-size:13.5px;
    padding:9px 13px;border-radius:999px;cursor:pointer;line-height:1;}
  .on-rad-atg button[disabled]{opacity:.35;cursor:default;}
  .on-rad-atg .on-rad-bort{margin-left:auto;color:var(--danger);border-color:transparent;}
  /* ---------- Sokningen (Cmd/Ctrl+K) ---------- */
  .sok-lager{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.32);display:flex;justify-content:center;align-items:flex-start;
    padding:12vh 16px 16px;box-sizing:border-box;}
  .sok-ruta{width:100%;max-width:600px;background:var(--card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;
    display:flex;flex-direction:column;max-height:70vh;}
  .sok-falt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--muted);}
  .sok-falt input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:17px;color:var(--text);}
  .sok-falt kbd,.sido-sok kbd{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:6px;padding:1px 6px;color:var(--muted);}
  .sok-lista{overflow-y:auto;padding:6px 0 10px;}
  .sok-grupp{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 18px 4px;}
  .sok-rad{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;padding:10px 18px;cursor:pointer;}
  .sok-rad b{display:block;font-size:15px;font-weight:600;color:var(--text);}
  .sok-rad span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;}
  .sok-rad.ar-vald,.sok-rad:hover{background:var(--bg);}
  .sok-tom{padding:18px;color:var(--muted);font-size:13.5px;}

  /* ---------- Sidomenyns huvud - syns bara nar flikraden ar sidomeny ---------- */
  .sido-huvud{display:none;}
  .sido-arenden{display:none;}
  @media (hover:none){.sido-ar-x{opacity:1 !important;}}
  @media (min-width:768px) and (min-height:600px){
    :root{ --rail-w:248px; }
    body{transition:padding-left .26s cubic-bezier(.32,.72,0,1);}
    body.sido-smal{--rail-w:76px;}
    .tabbar{background:#0c0c0d;box-shadow:none;border-right:1px solid #1f1f21;padding:18px 12px calc(16px + var(--safe-bottom));
      transition:width .26s cubic-bezier(.32,.72,0,1);overflow:visible;}
    .sido-huvud{display:block;position:relative;margin-bottom:10px;}
    .sido-fall{position:absolute;right:-26px;top:2px;width:26px;height:26px;border-radius:50%;border:1px solid #2a2a2c;background:#161617;
      color:#f4f4f2;display:grid;place-items:center;cursor:pointer;padding:0;z-index:2;}
    .sido-fall svg{transition:transform .26s;}
    body.sido-smal .sido-fall svg{transform:rotate(180deg);}
    .sido-logo{font-weight:700;letter-spacing:.16em;font-size:15px;color:#f4f4f2;padding:4px 10px 16px;white-space:nowrap;}
    .sido-logo .sido-txt{font-weight:500;letter-spacing:.04em;color:#8d8d8a;font-size:12px;margin-left:8px;}
    .sido-jag{display:flex;align-items:center;gap:12px;padding:6px 8px 16px;margin-bottom:12px;border-bottom:1px solid #232325;overflow:hidden;}
    .sido-av{flex:0 0 40px;height:40px;border-radius:50%;background:#ececea;color:#111;display:grid;place-items:center;font-weight:600;font-size:13.5px;overflow:hidden;}
    .sido-av img{width:100%;height:100%;object-fit:cover;display:block;}
    .sido-huvud{padding-top:4px;}
    .sido-jag b{display:block;color:#f4f4f2;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sido-jag small{display:block;color:#8d8d8a;font-size:12px;white-space:nowrap;}
    .sido-jag .sido-txt{min-width:0;}
    .sido-sok{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:1px solid #2a2a2c;background:#161617;border-radius:12px;
      padding:10px 11px;color:#8d8d8a;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;overflow:hidden;margin-bottom:8px;}
    .sido-sok:hover{border-color:#3a3a3d;color:#c9c9c5;}
    .sido-sok kbd{margin-left:auto;border-color:#2e2e30;color:#8d8d8a;}
    .tab-btn{position:relative;color:#b9b9b5;border-radius:12px;padding:11px 12px;gap:13px;white-space:nowrap;}
    .tab-btn:hover{color:#fff;background:#18181a;}
    .tab-btn.active{background:#f4f4f2;color:#0c0c0d;}
    .tab-btn[data-tab="verktyg"]{margin-top:10px;}
    .tab-btn[data-tab="verktyg"]::before{content:"";position:absolute;left:12px;right:12px;top:-6px;border-top:1px solid #232325;}
    .tab-icon{position:static;}
    .tab-label{font-size:14.5px;font-weight:500;}
    /* Brickan: liten och hogerstalld. Rod betyder att nagot ska goras idag. */
    .tab-badge{position:absolute;top:50%;right:12px;transform:translateY(-50%);box-shadow:none;min-width:18px;height:18px;line-height:18px;
      font-size:11px;font-weight:600;border-radius:999px;padding:0 6px;}
    .sido-fall:focus-visible,.sido-sok:focus-visible,.tab-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
    /* Ikonralsen */
    body.sido-smal .sido-txt,body.sido-smal .tab-label{display:none;}
    body.sido-smal .sido-logo{padding-inline:0;text-align:center;font-size:11px;letter-spacing:.1em;}
    body.sido-smal .sido-jag{justify-content:center;padding-inline:0;}
    body.sido-smal .sido-sok{justify-content:center;padding-inline:0;}
    body.sido-smal .tab-btn{justify-content:center;padding-inline:0;}
    body.sido-smal .tab-badge{top:5px;right:6px;transform:none;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px;}
    body.sido-smal .tools-sheet{left:var(--rail-w);width:240px;border-radius:0 14px 14px 0;box-shadow:12px 0 30px rgba(0,0,0,.25);}
    body.sido-smal .tools-sheet-grupp,body.sido-smal .tools-sheet-item{padding-left:14px;}
    /* Öppna ärenden under Verktyg (2026-10-06). Rullar själv om de inte får plats. */
    .sido-arenden{display:block;margin-top:16px;padding-top:12px;border-top:1px solid #232325;min-height:0;flex:0 1 auto;overflow-y:auto;}
    .sido-arenden[hidden]{display:none;}
    .sido-ar-rub{padding:0 12px 6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7a7a77;}
    .sido-ar{display:flex;align-items:stretch;border-radius:10px;}
    .sido-ar:hover{background:#18181a;}
    .sido-ar.is-aktiv{background:#222224;}
    .sido-ar-knapp{flex:1;min-width:0;min-height:44px;background:none;border:0;color:#d6d6d2;font:inherit;text-align:left;padding:7px 2px 7px 12px;cursor:pointer;}
    .sido-ar-rad1{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;white-space:nowrap;}
    .sido-ar-rad1 span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;}
    .sido-ar-rad2{display:block;margin:1px 0 0 16px;font-size:11.5px;color:#8d8d8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .sido-ar.har-nytt .sido-ar-rad2{color:#9cc3ff;}
    .sido-ar-x{flex:none;width:34px;background:none;border:0;border-radius:8px;color:#8d8d8a;font-size:17px;cursor:pointer;opacity:0;}
    .sido-ar:hover .sido-ar-x,.sido-ar-x:focus-visible{opacity:1;}
    .sido-ar-x:hover{color:#fff;}
    .sido-ar-knapp:focus-visible,.sido-ar-x:focus-visible{outline:2px solid #fff;outline-offset:-2px;}
    body.sido-smal .sido-ar-rub,body.sido-smal .sido-ar-rad2,body.sido-smal .sido-ar-x,
    body.sido-smal .sido-ar-rad1 span:last-child{display:none;}
    body.sido-smal .sido-ar-knapp{display:grid;place-items:center;padding:0;}
    .tools-sheet{background:#0c0c0d;}
  }
  @media (prefers-reduced-motion:reduce){ body,.tabbar,.sido-fall svg{transition:none !important;} }
  /* ---------- Uppfoljningskortet (2026-09-29) ---------- */
  .fu2{background:var(--card);border-radius:16px;border:1px solid var(--border);overflow:hidden;}
  .fu2.overdue{border-left:3px solid var(--danger);}
  .fu2.today{border-left:3px solid var(--text);}
  .fu2-topp{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;font:inherit;text-align:left;
    padding:14px 16px 6px;cursor:pointer;color:var(--text);}
  .fu2-vem{flex:1;min-width:0;}
  .fu2-vem b{display:block;font-size:16px;font-weight:600;}
  .fu2-vem span{display:block;font-size:13px;color:var(--muted);margin-top:2px;}
  .fu2-dag{flex:0 0 auto;font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--bg);color:var(--muted);white-space:nowrap;}
  .fu2-dag.overdue{background:var(--danger);color:#fff;}
  .fu2-dag.today{background:var(--text);color:var(--card);}
  .fu2-pil{flex:0 0 auto;color:var(--muted);transition:transform .2s;}
  .fu2.ar-oppen .fu2-pil{transform:rotate(180deg);}
  .fu2-kontakt{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:0 16px 14px;font-size:14px;}
  .fu2-namn{color:var(--text);font-weight:500;}
  .fu2-tel{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none;}
  .fu2-tel:hover,.fu2-mejl:hover{text-decoration:underline;}
  .fu2-mejl{color:var(--muted);text-decoration:none;overflow-wrap:anywhere;}
  .fu2-panel{display:grid;grid-template-columns:1fr;gap:18px;padding:16px;border-top:1px solid var(--border);background:var(--bg);}
  .fu2-panel[hidden]{display:none;}
  @media (min-width:900px){ .fu2-panel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;} }
  .fu2 h4{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .fu2-steg h4:not(:first-child){margin-top:16px;}
  .fu2-text{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;padding:11px 12px;font:inherit;font-size:16px;
    background:var(--card);color:var(--text);resize:vertical;min-height:64px;}
  .fu2-text:focus,.fu2-datum:focus{outline:none;border-color:var(--text);}
  .fu2-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .fu2-chip{border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:13.5px;padding:8px 12px;border-radius:999px;cursor:pointer;}
  .fu2-chip.ar-vald{background:var(--text);color:var(--card);border-color:var(--text);}
  .fu2-datum{border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:15px;padding:7px 10px;border-radius:10px;}
  .fu2-knappar{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
  .fu2-spara{border:0;background:var(--accent);color:var(--on-accent);font:inherit;font-weight:600;padding:12px 18px;border-radius:999px;cursor:pointer;}
  .fu2-spara:disabled{opacity:.5;}
  .fu2-avsluta{border:1px solid var(--border);background:transparent;color:var(--text);font:inherit;padding:12px 16px;border-radius:999px;cursor:pointer;}
  .fu2-status{font-size:13px;color:var(--muted);margin-top:8px;min-height:1em;}
  .fu2-status.ar-fel,.fu2-hjalp.ar-fel{color:var(--danger);}
  .fu2-logg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  /* Uppföljningarna ligger i .my-tickets-list, vars kortstil (ram, rundning, skugga) annars ärvs av listorna
     INUTI kortet - varje offertrad och historikrad fick en egen ram (Mikael 2026-10-06). Nollställs här. */
  .jobb-hook{border-top:1px solid var(--border-svag);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:8px;font-size:14px;}
  .jobb-hook-rad{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;}
  .jobb-hook-rad span,.jobb-hook-hjalp,.jobb-hook-svar{color:var(--muted);font-size:13px;}
  .jobb-hook-hjalp code{font-size:12.5px;overflow-wrap:anywhere;}
  .jobb-hook-form{display:flex;flex-direction:column;gap:6px;}
  .jobb-hook-form label{font-size:13px;font-weight:600;}
  .jobb-hook-falt{display:flex;gap:8px;}
  .jobb-hook-falt input{flex:1;min-width:0;font:inherit;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);}
  .fu2-logg li,.fu2-rader li{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;}
  .fu2-logg li{font-size:13.5px;border-left:2px solid var(--border);padding-left:10px;}
  .fu2-logg span{color:var(--muted);font-size:12px;}
  .fu2-logg p{margin:2px 0 0;color:var(--text);}
  .fu2-logg em{display:block;color:var(--muted);font-size:12px;font-style:normal;margin-top:2px;}
  .fu2-offertbox{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px 12px 10px;}
  .fu2-hjalp{font-size:13px;color:var(--muted);padding:8px 0;}
  .fu2-rader{list-style:none;margin:0;padding:0;}
  .fu2-rader li{display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
  .fu2-rb{min-width:0;color:var(--text);}
  .fu2-rb em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px;}
  .fu2-rs{white-space:nowrap;font-variant-numeric:tabular-nums;}
  .fu2-fler{color:var(--muted);}
  .fu2-summa{display:flex;justify-content:space-between;font-size:13.5px;padding-top:8px;}
  .fu2-summa b{font-variant-numeric:tabular-nums;}
  .fu2-lankar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
  .fu2-lank{border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:999px;cursor:pointer;}
  .fu2-offert .fu-auto{margin:12px 0 0;}

  /* ==================================================================
     BUDGETKORTET (Mikael 2026-10-07: "Siffror är ju så fruktansvärt
     tråkiga - detta måste vi kunna göra betydligt ballare/inspirerande så
     man får känslan att Satan vilket coolt företag jag jobbar för!").
     Ett mörkt kort överst på startsidan i stället för Information,
     Dagskoll och widgetarna Budget, Budget vs. utfall och Månadsdetalj.
     Mörkt i både ljust och mörkt läge, som Dagskollen och Affärsläget.
     Mobilen först; från 900 px ligger ringen, talet och insikterna i bredd.
     ================================================================== */
  .bh{--bh-text:#f5f5f7;--bh-muted:#8e8e93;--bh-linje:rgba(255,255,255,.10);--bh-yta:rgba(255,255,255,.06);
    --bh-gron:#30d158;--bh-gul:#ffb340;
    position:relative;overflow:hidden;isolation:isolate;margin:10px 16px;border-radius:22px;color:var(--bh-text);
    background:radial-gradient(120% 140% at 0% 0%,#1c2a22 0%,rgba(28,42,34,0) 46%),
      radial-gradient(90% 120% at 100% 100%,#1d1d22 0%,rgba(29,29,34,0) 60%),#0c0c0d;
    padding:16px 14px 14px;display:grid;gap:16px;}
  .bh.slagen{background:radial-gradient(120% 140% at 0% 0%,#14361f 0%,rgba(20,54,31,0) 50%),
      radial-gradient(90% 120% at 100% 100%,#1d1d22 0%,rgba(29,29,34,0) 60%),#0c0c0d;}
  .bh-liten{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bh-muted);}
  .bh-lank{border:0;background:none;color:var(--bh-muted);font:inherit;font-size:12px;padding:0;cursor:pointer;
    text-decoration:underline;text-underline-offset:2px;}
  .bh-lank:hover{color:var(--bh-text);}

  /* Informationen */
  .bh-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border-radius:16px;padding:12px 14px;
    background:linear-gradient(90deg,rgba(48,209,88,.10),rgba(255,255,255,.04) 60%);border:1px solid var(--bh-linje);}
  .bh-info-ikon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(48,209,88,.16);color:var(--bh-gron);}
  .bh-info-ikon svg{width:16px;height:16px;}
  .bh-info .bdg-msg-view{display:grid;gap:4px;min-width:0;}
  .bh-info-text{margin:0;font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;}
  .bh-info-text.tom{color:var(--bh-muted);}
  .bh-info-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--bh-muted);}
  .bh .bdg-msg-editbox{display:grid;gap:8px;}
  .bh textarea,.bh input[type="number"],.bh input[type="text"]{font:inherit;font-size:16px;color:var(--bh-text);background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px 11px;width:100%;box-sizing:border-box;}
  .bh .page-btn{background:#fff;color:#000;border-color:#fff;}
  .bh .bdg-msg-edit-link{color:var(--bh-muted);}
  .bh .gl-card-actions{display:flex;gap:10px;align-items:center;}
  .bh .gl-save-msg{color:var(--bh-muted);}
  .bh .gl-save-msg.is-error{color:#ff6961;}

  /* Ringen, talet och insikterna */
  .bh-mitt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;}
  .bh-ring{position:relative;width:124px;height:124px;}
  .bh-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
  .bh-ring .spar{fill:none;stroke:rgba(255,255,255,.10);stroke-width:14;}
  .bh-ring .fyll{fill:none;stroke:url(#bhRingFarg);stroke-width:14;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(48,209,88,.35));}
  .bh-ring .plan{stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.9;}
  .bh-ring-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;}
  .bh-ring-text b{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
  .bh-ring-text span{font-size:11px;color:var(--bh-muted);margin-top:5px;}
  .bh-ring-text em{font-style:normal;font-size:10px;font-weight:600;color:var(--bh-text);opacity:.85;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .bh-ring-text em i{width:2px;height:9px;border-radius:1px;background:#fff;}
  .bh-stort{display:grid;gap:8px;min-width:0;}
  .bh-stort .bh-etikett{font-size:13px;color:var(--bh-muted);}
  .bh-tal{font-size:clamp(38px,9vw,76px);font-weight:700;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .bh-tal small{font-size:.42em;font-weight:600;letter-spacing:-.01em;margin-left:6px;color:var(--bh-muted);}
  .bh-av{font-size:14px;color:var(--bh-muted);}
  .bh-av b{color:var(--bh-text);font-weight:600;}
  .bh-lage{justify-self:start;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 11px;font-size:13px;font-weight:600;
    background:rgba(255,179,64,.12);color:var(--bh-gul);}
  .bh-lage i{width:7px;height:7px;border-radius:50%;background:currentColor;}
  .bh-lage.fore{background:rgba(48,209,88,.14);color:var(--bh-gron);}
  .bh-arsbox{grid-column:1/-1;}
  .bh-insikter{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .bh-insikt{border-radius:16px;padding:11px 13px;background:var(--bh-yta);border:1px solid var(--bh-linje);display:grid;gap:2px;min-width:0;}
  .bh-insikt:first-child{grid-column:1/-1;}
  .bh-insikt b{font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
  .bh-insikt span{font-size:12.5px;color:var(--bh-muted);}
  .bh-insikt.gron b{color:var(--bh-gron);}
  .bh-insikt.gul b{color:var(--bh-gul);}

  /* Live: hjärtslaget och Dagskollen */
  .bh-live{display:grid;gap:12px;}
  .bh-ekg{position:relative;min-height:132px;border-radius:18px;overflow:hidden;border:1px solid var(--bh-linje);
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 30px),
      repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 30px),rgba(255,255,255,.025);}
  .bh-ekg canvas{position:absolute;inset:0;width:100%;height:100%;}
  .bh-ekg-topp{position:absolute;left:14px;top:11px;z-index:2;display:flex;align-items:baseline;gap:8px;}
  .bh-ekg-topp b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .bh-ekg-topp span{font-size:12px;color:var(--bh-muted);}
  .bh-hjarta{width:14px;height:14px;align-self:center;color:#ff453a;transition:transform .12s ease-out;}
  .bh-hjarta.slag{transform:scale(1.35);}
  .bh-ekg-text{display:none;position:absolute;right:14px;bottom:9px;z-index:2;font-size:12px;color:var(--bh-muted);text-align:right;max-width:70%;}
  .bh-handelse{position:absolute;z-index:3;right:16px;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
    background:rgba(48,209,88,.16);color:var(--bh-gron);border:1px solid rgba(48,209,88,.35);animation:bhStig 2.6s var(--fjader) forwards;}
  .bh-handelse.off{background:rgba(157,188,255,.14);color:#9dbcff;border-color:rgba(157,188,255,.35);}
  /* Senaste händelsen (Mikael 2026-10-07) står kvar nere till vänster. Förklaringen ger då plats. */
  .bh-senaste{position:absolute;left:14px;bottom:9px;right:14px;z-index:2;font-size:12px;color:var(--bh-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bh-senaste:empty{display:none;}
  .bh-senaste b{color:var(--bh-text);font-weight:600;}
  .bh-ekg.har-senaste .bh-ekg-text{display:none;}
  .bh-handelse.avt{background:rgba(255,214,10,.14);color:#ffd60a;border-color:rgba(255,214,10,.4);}
  @keyframes bhStig{0%{opacity:0;transform:translateY(10px) scale(.96);}12%{opacity:1;transform:none;}75%{opacity:1;}100%{opacity:0;transform:translateY(-26px);}}
  .bh .puls{box-shadow:none;border:1px solid var(--bh-linje);border-radius:18px;}

  /* Året: en stapel per månad, och månaden man trycker på visas under */
  .bh-staplar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:end;height:92px;padding-top:12px;border-top:1px solid var(--bh-linje);}
  .bh-man{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;min-width:0;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;border-radius:8px;}
  .bh-man:focus-visible{outline:2px solid var(--bh-text);outline-offset:3px;}
  .bh-stapel{position:relative;align-self:end;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);height:var(--b);}
  .bh-stapel i{position:absolute;left:0;right:0;bottom:0;border-radius:6px;background:linear-gradient(180deg,#5ee28a,#1fae55);transform-origin:bottom;}
  .bh-stapel.under i{background:linear-gradient(180deg,#9aa0a6,#5f6368);}
  .bh-stapel.nu i{background:linear-gradient(180deg,#fff,#cfcfd4);}
  .bh-stapel.over::after{content:"";position:absolute;left:50%;top:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--bh-gron);}
  .bh-manadnamn{font-size:10px;color:var(--bh-muted);text-align:center;}
  .bh-man[aria-pressed="true"] .bh-stapel{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75);}
  .bh-man[aria-pressed="true"] .bh-manadnamn{color:var(--bh-text);font-weight:700;}
  .bh-staplar.bh-visa .bh-stapel i{animation:bhVaxa .9s var(--fjader) backwards;animation-delay:calc(var(--n) * 45ms + 250ms);}
  @keyframes bhVaxa{from{transform:scaleY(0);}}
  .bh .bdg-detail-card.bh-manad{margin:0;border:1px solid var(--bh-linje);border-radius:18px;background:var(--bh-yta);padding:14px 16px;
    color:var(--bh-text);display:grid;gap:12px;box-shadow:none;}
  .bh-manad-topp{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .bh-manad-topp h3{margin:0;font-size:18px;letter-spacing:-.01em;}
  .bh-manad-topp h3 span{font-size:13px;font-weight:500;color:var(--bh-muted);margin-left:6px;}
  .bh-manad-stapel{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
  .bh-manad-stapel i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#1fae55,#7cf0a2);}
  .bh-manad-stapel.under i{background:linear-gradient(90deg,#5f6368,#9aa0a6);}
  .bh-rutor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .bh-ruta{display:grid;gap:2px;min-width:0;}
  .bh-ruta b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bh-ruta b.gron{color:var(--bh-gron);} .bh-ruta b.gul{color:var(--bh-gul);}
  .bh-ruta .bh-lank{justify-self:start;}
  .bh .bdg-editbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .bh .bdg-editbox input{flex:1 1 140px;width:auto;}
  .bh .bdg-hint{font-size:12px;color:var(--bh-muted);flex-basis:100%;}
  .bh-kommentar{font-size:13px;color:var(--bh-muted);}
  .bh-konfetti{position:absolute;inset:0;pointer-events:none;z-index:5;}

  @media (min-width:900px){
    .bh{padding:22px 24px 20px;gap:20px;}
    .bh-mitt{grid-template-columns:auto minmax(0,1fr) minmax(220px,260px);gap:28px;}
    .bh-ring{width:176px;height:176px;}
    .bh-ring-text b{font-size:38px;}
    .bh-ring-text em{font-size:11px;margin-top:8px;}
    .bh-arsbox{grid-column:2;}
    .bh-insikter{grid-column:3;grid-row:1 / span 2;grid-template-columns:1fr;}
    .bh-live{grid-template-columns:minmax(0,1fr) 300px;}
    .bh-ekg-text{display:block;}
    .bh-staplar{gap:8px;height:104px;}
    .bh-manadnamn{font-size:11px;}
    .bh-rutor{grid-template-columns:repeat(6,minmax(0,1fr));}
  }
  @media (prefers-reduced-motion:reduce){
    .bh-staplar.bh-visa .bh-stapel i{animation:none;}
    .bh-handelse{animation:none;}
    .bh-hjarta{transition:none;}
  }
  @media (min-width:900px) and (min-height:600px){ .bh{margin:10px 0;} }

  /* ==================================================================
     RÖRELSE (Mikael 2026-10-07: "använda några roliga skills för att göra
     CRM mer modern och med lite rörelse, utan att påverka prestanda" -
     "Kör alla 5"). Bara transform och opacity rör sig; det sköter
     grafikkortet utan att sidan räknas om. Den som slagit av rörelser i
     sin enhet får inga skalningar, och listorna tonar bara in.
     ================================================================== */
  /* 1. Tryckkänsla: knappar och kort ger efter när fingret landar, inte när det lyfts. */
  @media (prefers-reduced-motion:no-preference){
    .page-btn,.retry-btn,.ms-signin-btn,.off-ny,.pb-btn,.pb-chip,.fu2-lank,.kund-offert-btn,.kund-pris-btn,.ko-start,
    .scope-toggle button,.aff-seg button,.pb-seg button,.tab-btn,
    .pb-rad,.customer-card,.menu-card{
      transition-property:transform,background-color,color,border-color,box-shadow,opacity;
      transition-duration:.22s;transition-timing-function:var(--fjader);
    }
    /* Reglagens knappar skalas inte - där är det markören som rör sig, som i Apples egna reglage. */
    .page-btn:active,.retry-btn:active,.ms-signin-btn:active,.off-ny:active,.pb-btn:active,.pb-chip:active,.fu2-lank:active,
    .kund-offert-btn:active,.kund-pris-btn:active,.ko-start:active,.tab-btn:active{transform:scale(.96);transition-duration:.08s;}
    /* Ett kort ger efter bara när man trycker på själva kortet - inte på en knapp i det. */
    .pb-rad:active:not(:has(button:active,a:active,select:active,textarea:active)),
    .customer-card:active:not(:has(button:active,a:active)),
    .menu-card:active:not(:has(button:active,a:active)){transform:scale(.985);transition-duration:.1s;}
  }
  /* KNAPPARNA SVARAR (Mikael 2026-10-13: "Knapparna här är 'platta' det händer liksom inget när man klickar på dem
     ... Dom ska vara interaktiva och röra på sig när man klickar på dem. Ladda ner PDF borde bli någon form av
     klarmarkering när så gjort. Detta bör gälla SAMTLIGA knappar i systemet"). Allt inom :where(), alltså utan
     tyngd: en knapp som redan har en egen transform eller animation behåller den. Reglagens knappar skalas inte
     (där är det markören som rör sig). Väntan och klart sätts av knappSvarar() i skriptet. */
  @media (prefers-reduced-motion:no-preference){
    :where(button, [role="button"], a[download], a.ko-avbryt, a.ko-nasta, a.page-btn){
      transition:transform .22s var(--fjader), background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .3s ease, opacity .15s ease;
    }
    :where(button:not(:disabled):not(.scope-toggle button, .aff-seg button, .pb-seg button, .seg-glid > button):active,
           [role="button"]:active, a[download]:active, a.ko-avbryt:active, a.ko-nasta:active, a.page-btn:active){
      transform:scale(.97);transition-duration:.08s;
    }
    :where(.ar-upptagen){animation:knappVantar 1.1s ease-in-out infinite;}
    :where(.ar-klar){animation:knappKlar .9s ease-out;}
  }
  :where(.ar-upptagen){cursor:progress;}
  @media (prefers-reduced-motion:reduce){ :where(.ar-upptagen){opacity:.6;} }
  @keyframes knappVantar{0%,100%{opacity:1;}50%{opacity:.5;}}
  @keyframes knappKlar{0%{box-shadow:0 0 0 0 rgba(10,125,50,.5);}100%{box-shadow:0 0 0 9px rgba(10,125,50,0);}}
  a[download].ar-nedladdad::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-2px;flex:none;
    background:var(--success);-webkit-mask:var(--sg-bock) center/contain no-repeat;mask:var(--sg-bock) center/contain no-repeat;}

  /* 2. Reglaget glider: markören följer valet. Den ritas av rorelseSegRita och tar det valda lägets färg och form. */
  .seg-glid{position:relative;}
  .seg-glid > button{position:relative;z-index:1;}
  .seg-glid > button.active,.seg-glid > button.ar-vald,.seg-glid > button[aria-pressed="true"]{background:transparent !important;box-shadow:none !important;}
  .seg-markor{position:absolute;left:0;z-index:0;pointer-events:none;
    transition:transform .36s var(--fjader),width .36s var(--fjader),opacity .2s;}
  /* 4. Listan landar: de tio översta raderna glider in en i taget efter ett vybyte. */
  .landar > li{animation:landa .42s var(--fjader) backwards;}
  .landar > li:nth-child(2){animation-delay:30ms;}  .landar > li:nth-child(3){animation-delay:60ms;}
  .landar > li:nth-child(4){animation-delay:90ms;}  .landar > li:nth-child(5){animation-delay:120ms;}
  .landar > li:nth-child(6){animation-delay:150ms;} .landar > li:nth-child(7){animation-delay:180ms;}
  .landar > li:nth-child(8){animation-delay:210ms;} .landar > li:nth-child(9){animation-delay:240ms;}
  .landar > li:nth-child(10){animation-delay:270ms;}
  .landar > li:nth-child(n+11){animation:none;}
  @keyframes landa{from{opacity:0;transform:translateY(8px);}}
  @media (prefers-reduced-motion:reduce){
    .seg-markor{transition:none;}
    .landar > li{animation:landaTona .2s backwards;}
    .landar > li:nth-child(n+2){animation-delay:0ms;}
    @keyframes landaTona{from{opacity:0;}}
  }

  /* =====================================================================================================
     STATUSCHIPS: SIGNAL (Mikael 2026-10-09: "Dom här chipsen som finns över hela CRM är ju galet tråkiga och
     AI-slop, kan vi inte designa chipsen på ett mycket bättre sätt och med lite liv och rörelse?" - och efter
     provsidan: "Kör på A, bygg in det i hela CRM:et").

     Vit kapsel, hårlinje, svart text. Färgen sitter bara i en liten symbol som betyder något - bock för klart,
     triangel för se över, utropstecken för risk, klocka för planerat, låda för order, prick för pågår - och
     värdet står i grått bredvid. Lagret ligger sist och skriver över de gamla pastellpillerna med samma
     väljare, så vyerna behövde inte skrivas om. Rörelse bara när något händer: chipsen i huvuden kommer in,
     bocken ritas, en varning knuffar en gång. Listorna står still - de ritas om i tysthet.
     ===================================================================================================== */
  :root{
    --sg-linje:rgba(0,0,0,.13);
    --sg-brev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.8' y='3.4' width='12.4' height='9.2' rx='1.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3Cpath d='M2.4 4.4L8 8.6l5.6-4.2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3C/svg%3E");
    --sg-bil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.4h7.6v6.4H1.6zM9.2 6.8h2.9l2.3 2.3v1.7H9.2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3Ccircle cx='4.4' cy='11.7' r='1.3' fill='white' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='11.6' cy='11.7' r='1.3' fill='white' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E");
    --sg-bubbla:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 3.3h11.6v7.3H7.4L4.5 13v-2.4H2.2z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3C/svg%3E");
    --sg-bock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Cpath d='M5 8.3l2.1 2.1L11.1 6.2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E");
    --sg-varn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.1l6.4 11.4H1.6z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M8 6.4v3.1' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3Ccircle cx='8' cy='11.6' r='.95' fill='black'/%3E%3C/svg%3E");
    --sg-stopp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Cpath d='M8 4.7v3.9' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='11.2' r='1' fill='black'/%3E%3C/svg%3E");
    --sg-klocka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M8 4.6V8l2.3 1.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E");
    --sg-lada:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.4 5.2L8 2.3l5.6 2.9v5.6L8 13.7l-5.6-2.9z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3Cpath d='M2.4 5.2L8 8l5.6-2.8M8 8v5.7' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.4'/%3E%3C/svg%3E");
    --sg-prick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4' fill='black'/%3E%3C/svg%3E");
    --sg-kryss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M5.8 5.8l4.4 4.4M10.2 5.8l-4.4 4.4' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E");
  }
  .ovh-chip,.ovh-kredit,.ovh-avtal,.off-chip,.av-chip,.ik-tag,.followup-badge,.note-status-badge,.ticket-badge,
  .gl-status-badge,.ord-status-hold,.ord-status-oppen,.ord-status-lev,.ord-status-klar,.ord-status-avbruten,.ord-status-annan,
  .off-utkast-marke,.rf-chip,.ord-frakt,.ord-oe,.ord-kom{
    --sg-ton:var(--muted);--sg-ikon:none;--sg-d:none;
    display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap;
    background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--sg-linje);border:0;
    border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;letter-spacing:0;line-height:1.15;
    font-variant-numeric:tabular-nums;text-transform:none;
  }
  .ovh-chip::before,.ovh-kredit::before,.ovh-avtal::before,.off-chip::before,.av-chip::before,.ik-tag::before,
  .followup-badge::before,.note-status-badge::before,.ticket-badge::before,.gl-status-badge::before,
  .ord-status-hold::before,.ord-status-oppen::before,.ord-status-lev::before,.ord-status-klar::before,
  .ord-status-avbruten::before,.ord-status-annan::before,.off-utkast-marke::before,.rf-chip::before,
  .ord-frakt::before,.ord-oe::before,.ord-kom::before{
    content:"";display:var(--sg-d);width:14px;height:14px;flex:none;border-radius:0;box-shadow:none;margin:0 0 0 -3px;
    background:var(--sg-ton);-webkit-mask:var(--sg-ikon) center/contain no-repeat;mask:var(--sg-ikon) center/contain no-repeat;
  }
  /* Huvudenas chips är lite större - där står de ensamma och ska läsas först. */
  .ovh-chip,.ovh-kredit,.ovh-avtal{padding:6px 12px;font-size:13px;}
  .ovh-chip::before,.ovh-kredit::before,.ovh-avtal::before{width:15px;height:15px;}
  .ovh-kredit.ar-vantar{opacity:.55;}

  /* Tonerna: symbolen och dess färg. Texten är alltid svart på vitt. */
  .ovh-chip.ar-skickad,.off-chip.ar-gron,.av-chip-ok,.ik-tag.ik-klar,.ik-tag.ik-ok-klar,.gl-status-badge.status-godkand,
  .ovh-kredit.kk-risk-gron,.off-utkast-marke.ar-skickad,.ord-status-klar{
    --sg-ton:var(--success);--sg-ikon:var(--sg-bock);--sg-d:block;background:var(--card);color:var(--text);}
  .ovh-chip.ar-av,.off-chip.ar-gul,.av-chip-varn,.ik-tag.ik-ok-hold,.gl-status-badge.status-utkast,.ovh-kredit.kk-risk-gul,
  .ovh-avtal.ar-varn,.ord-status-hold{
    --sg-ton:var(--warn);--sg-ikon:var(--sg-varn);--sg-d:block;background:var(--card);color:var(--text);}
  .off-chip.ar-rod,.av-chip-fel,.ik-tag.ik-ny,.followup-badge.overdue,.gl-status-badge.status-avvisad,.ovh-kredit.kk-risk-rod,
  .ovh-avtal.ar-fel{
    --sg-ton:var(--danger);--sg-ikon:var(--sg-stopp);--sg-d:block;background:var(--card);color:var(--text);}
  .followup-badge.today,.ik-tag.ik-vantar,.note-status-badge.status-pagaende,.ticket-badge.state-pending{
    --sg-ton:var(--warn);--sg-ikon:var(--sg-klocka);--sg-d:block;background:var(--card);color:var(--text);}
  .followup-badge.upcoming,.note-status-badge.status-planerad,.ticket-badge.state-open,.gl-status-badge.status-inskickad{
    --sg-ton:var(--info);--sg-ikon:var(--sg-klocka);--sg-d:block;background:var(--card);color:var(--text);}
  .ovh-chip.ar-order,.off-utkast-marke.ar-order,.ord-status-lev{
    --sg-ton:var(--info);--sg-ikon:var(--sg-lada);--sg-d:block;background:var(--card);color:var(--text);}
  .off-chip.ar-bla,.av-chip-info,.ik-tag.ik-pagar,.ik-tag.ik-ok-oppen,.ord-status-oppen{
    --sg-ton:var(--info);--sg-ikon:var(--sg-prick);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-status-avbruten,.ticket-badge.state-closed,.note-status-badge.status-avslutad,.gl-status-badge.status-inaktiv{
    --sg-ton:var(--muted);--sg-ikon:var(--sg-kryss);--sg-d:block;background:var(--card);color:var(--muted);}
  .av-chip-svart{background:var(--text);color:var(--card);box-shadow:none;}
  /* ORDERLISTAN (Mikael 2026-10-09: "Inte jättesnyggt..."). Raden har egna, mer specifika regler (.off-chips .x)
     som gjorde chipen till block - då hamnade symbolen ovanför texten. Samma väljare här, och egna symboler för
     frakt, erkännande och kommentarer så att raden inte blir bara bockar. */
  .off-chips .ord-status-hold,.off-chips .ord-status-oppen,.off-chips .ord-status-lev,.off-chips .ord-status-klar,
  .off-chips .ord-status-avbruten,.off-chips .ord-status-annan,.off-chips .ord-oe,.off-chips .ord-frakt,.off-chips .ord-kom{
    display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;margin:0;
    background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--sg-linje);}
  .ord-oe,.off-chips .ord-oe{--sg-ton:var(--success);--sg-ikon:var(--sg-brev);--sg-d:block;}
  .ord-frakt.ar-levererad{--sg-ton:var(--success);--sg-ikon:var(--sg-bock);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-frakt.ar-pagar{--sg-ton:var(--info);--sg-ikon:var(--sg-bil);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-frakt.ar-drojer{--sg-ton:var(--warn);--sg-ikon:var(--sg-klocka);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-frakt.ar-avvikelse{--sg-ton:var(--danger);--sg-ikon:var(--sg-stopp);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-frakt.ar-avbokad{--sg-ton:var(--muted);--sg-ikon:var(--sg-kryss);--sg-d:block;background:var(--card);color:var(--muted);}
  .ord-frakt.ar-lager{--sg-ton:var(--info);--sg-ikon:var(--sg-lada);--sg-d:block;background:var(--card);color:var(--text);}
  .ord-kom,.off-chips .ord-kom{--sg-ton:var(--muted);--sg-ikon:var(--sg-bubbla);--sg-d:block;cursor:pointer;}
  .off-chips .ord-kom.ar-oppen{background:var(--text);color:var(--card);box-shadow:none;--sg-ton:var(--card);}
  /* UPPFÖLJNINGARNA (Mikael 2026-10-09, skärmbild på "Att följa upp"). Dagchipet (.fu2-dag) var en heldragen röd
     pille - samma kapsel som resten nu: utropstecken för försenad, klocka för idag och kommande, kryss för avslutad. */
  .fu2-dag,.fu2-dag.overdue,.fu2-dag.today,.fu2-dag.upcoming,.fu2-dag.klar{
    display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px 5px 8px;font-size:12.5px;font-weight:500;
    background:var(--card);color:var(--text);box-shadow:inset 0 0 0 1px var(--sg-linje);}
  .fu2-dag::before{content:"";width:14px;height:14px;flex:none;background:var(--sg-ton,var(--muted));
    -webkit-mask:var(--sg-ikon,var(--sg-klocka)) center/contain no-repeat;mask:var(--sg-ikon,var(--sg-klocka)) center/contain no-repeat;}
  .fu2-dag.overdue{--sg-ton:var(--danger);--sg-ikon:var(--sg-stopp);}
  .fu2-dag.today{--sg-ton:var(--warn);--sg-ikon:var(--sg-klocka);}
  .fu2-dag.upcoming{--sg-ton:var(--info);--sg-ikon:var(--sg-klocka);}
  .fu2-dag.klar{--sg-ton:var(--muted);--sg-ikon:var(--sg-kryss);color:var(--muted);}
  /* Någon annans uppföljning har ingen "Vad hände?" och ofta ingen logg - då är vänsterspalten tom. Den döljs, och
     offerten tar hela bredden i stället för att stå i högra halvan bredvid ingenting. */
  .fu2-steg:empty{display:none;}
  @media (min-width:900px){ .fu2-panel:has(> .fu2-steg:empty){grid-template-columns:minmax(0,1fr);} }
  .fu2-panel:has(> .fu2-steg:empty) .fu2-offert{max-width:720px;}
  /* KUNDKORTETS BRICKOR (Mikael 2026-10-09: "uppdatera så dem följer nya designen"). Riskbrickan och de röda
     antalen ("2 förfallna", "1 varning") sitter på sektionernas svarta rubrikrad: samma kapsel i mörkt glas som
     budgetkortet, vit text, och färgen bara i symbolen. Riskrutan i Bolagsinfo blir vit med hårlinje, och pricken
     blir samma symbol. */
  .collapsible-header .shipments-count.kk-risk-badge,.collapsible-header .shipments-count.kk-badge-rod{
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 10px 3px 7px;font-weight:500;
    background:rgba(255,255,255,.1);color:var(--on-accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);}
  .collapsible-header .shipments-count.kk-risk-badge::before,.collapsible-header .shipments-count.kk-badge-rod::before{
    content:"";width:14px;height:14px;flex:none;background:var(--sg-ton);
    -webkit-mask:var(--sg-ikon) center/contain no-repeat;mask:var(--sg-ikon) center/contain no-repeat;}
  .shipments-count.kk-risk-gron{--sg-ton:#30d158;--sg-ikon:var(--sg-bock);}
  .shipments-count.kk-risk-gul{--sg-ton:#ffb340;--sg-ikon:var(--sg-varn);}
  .shipments-count.kk-risk-rod,.shipments-count.kk-badge-rod{--sg-ton:#ff453a;--sg-ikon:var(--sg-stopp);}
  .shipments-count.kk-risk-okand{--sg-ton:rgba(255,255,255,.6);--sg-ikon:var(--sg-prick);}
  .kk-risk,.kk-risk.kk-risk-gron,.kk-risk.kk-risk-gul,.kk-risk.kk-risk-rod{background:var(--card);border-color:var(--sg-linje);}
  .kk-risk .kk-risk-prick{width:16px;height:16px;border-radius:0;background:var(--muted);
    -webkit-mask:var(--sg-prick) center/contain no-repeat;mask:var(--sg-prick) center/contain no-repeat;}
  .kk-risk-gron .kk-risk-prick{background:var(--success);-webkit-mask-image:var(--sg-bock);mask-image:var(--sg-bock);}
  .kk-risk-gul .kk-risk-prick{background:var(--warn);-webkit-mask-image:var(--sg-varn);mask-image:var(--sg-varn);}
  .kk-risk-rod .kk-risk-prick{background:var(--danger);-webkit-mask-image:var(--sg-stopp);mask-image:var(--sg-stopp);}

  /* Statusmärkenas äldre prick (monokrom 3-nivåskala) är mer specifik - samma väljare här, så symbolen vinner. */
  .ticket-badge.state-open::before,.note-status-badge.status-planerad::before,.followup-badge.overdue::before,
  .ticket-badge.state-pending::before,.note-status-badge.status-pagaende::before,.followup-badge.today::before,
  .ticket-badge.state-closed::before,.note-status-badge.status-avslutad::before,.followup-badge.upcoming::before{
    background:var(--sg-ton);border:0;width:14px;height:14px;border-radius:0;margin:0 0 0 -3px;}

  /* Typetiketten: OFFERT med kontur, ORDERUTKAST streckad, ORDER fylld. */
  .aff-typ,.on-chip{font:600 10.5px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;
    padding:4px 7px;border-radius:6px;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--sg-linje);vertical-align:1px;}
  .aff-typ.off,.on-chip.ar-klar{color:var(--info);background:transparent;box-shadow:inset 0 0 0 1px currentColor;}
  .aff-typ.utk{color:var(--warn);background:transparent;box-shadow:none;outline:1px dashed currentColor;outline-offset:-1px;}
  .aff-typ.ord{color:var(--card);background:var(--text);box-shadow:none;}

  /* Underlagsraden i offertlistan: symbolen före, händelsen i svart, öppningarna i grått. */
  .off-underlag{color:var(--text);}
  .off-underlag .v{color:var(--muted);}
  .off-underlag-prick{width:14px;height:14px;border-radius:0;background:var(--muted);
    -webkit-mask:var(--sg-prick) center/contain no-repeat;mask:var(--sg-prick) center/contain no-repeat;}
  .off-underlag.ar-skickad,.off-underlag.ar-bestalld{color:var(--text);}
  .off-underlag.ar-skickad .off-underlag-prick,.off-underlag.ar-bestalld .off-underlag-prick{background:var(--success);
    -webkit-mask-image:var(--sg-bock);mask-image:var(--sg-bock);}

  /* Budgetkortet och Dagskoll ligger på mörkt: samma kapsel i mörkt glas. Läget mot planen har en ring som
     fylls till andelen av planen (--sg-p, 0-100). */
  .bh-lage{background:var(--bh-yta);color:var(--bh-text);box-shadow:inset 0 0 0 1px var(--bh-linje);font-weight:500;
    padding:6px 12px 6px 8px;font-variant-numeric:tabular-nums;}
  .bh-lage .v{color:var(--bh-muted);font-weight:400;}
  /* Texten är EN bit bredvid ringen (Mikael 2026-10-09, skärmbild i mobilen: "2,2 Mkr efter planen" stod på fyra
     rader, ett ord per rad). Blir kolumnen smal delas den i högst två jämna rader. */
  .bh-lage .t{min-width:0;text-wrap:balance;}
  .bh-lage i{flex:none;}
  @media (max-width:389px){ .bh-lage{font-size:12px;gap:6px;padding:5px 10px 5px 7px;} }
  .bh-lage.fore{background:var(--bh-yta);color:var(--bh-text);}
  .bh-lage i{width:15px;height:15px;border-radius:50%;background:conic-gradient(var(--bh-gul) calc(var(--sg-p-v,0) * 1%),rgba(255,255,255,.18) 0);
    -webkit-mask:radial-gradient(circle,transparent 4.2px,#000 4.7px);mask:radial-gradient(circle,transparent 4.2px,#000 4.7px);}
  .bh-lage.fore i{background:conic-gradient(var(--bh-gron) calc(var(--sg-p-v,0) * 1%),rgba(255,255,255,.18) 0);}
  .puls-titel{align-self:flex-start;padding:5px 12px 5px 9px;border-radius:999px;background:rgba(255,255,255,.07);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-weight:500;}

  /* ----- Rörelse: bara i huvudena, bara när något kommit in eller ändrats ----- */
  @property --sg-p-v{syntax:"<number>";inherits:true;initial-value:0;}
  .bh-lage{--sg-p-v:var(--sg-p,0);}
  @keyframes sgRing{from{--sg-p-v:0;}}
  .ovh-chip,.ovh-kredit,.ovh-avtal{animation-name:sgIn;animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;}
  .bh-lage{animation:sgIn .34s cubic-bezier(.2,.8,.2,1) both,sgRing .9s .1s cubic-bezier(.2,.8,.2,1) both;}
  @keyframes sgIn{from{opacity:0;transform:translateY(3px) scale(.98);}to{opacity:1;transform:none;}}
  .ovh-chip.ar-skickad::before,.ovh-kredit.kk-risk-gron::before{animation:sgRita .45s .14s cubic-bezier(.3,.7,.2,1) both;}
  @keyframes sgRita{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  .ovh-kredit.kk-risk-gul,.ovh-kredit.kk-risk-rod,.ovh-avtal.ar-varn,.ovh-avtal.ar-fel,.ovh-chip.ar-av{
    animation:sgIn .34s cubic-bezier(.2,.8,.2,1) both,sgKnuff .5s .4s ease-out;}
  @keyframes sgKnuff{0%,100%{transform:none;}30%{transform:translateX(-1.5px);}60%{transform:translateX(1.5px);}}
  button.ovh-kredit:active,button.ovh-avtal:active{transform:scale(.97);}
  @media (prefers-reduced-motion:reduce){
    .ovh-chip,.ovh-kredit,.ovh-avtal,.bh-lage,.ovh-chip::before,.ovh-kredit::before{animation:none!important;}
    .bh-lage{--sg-p-v:var(--sg-p,0);}
  }