/* EGF Kalkylsvit, delad stilmall */ :root{ /* ETIKETTSTORLEKEN, ett värde för hela gränssnittet. Appens designspråk är versaliserad monospace i 9,5-11 px: stramt och prydligt på en skärm man sitter framför. I en bil, i solljus, med handskar är det oläsbart, och etiketterna sattes på 62 ställen i den här filen. Att höja dem klass för klass tog fyra vändor och gick fram och tillbaka: en ny regel kunde förlora mot en senare utan mediafråga. En variabel är EN plats att ändra, och mobilen ändrar den nedan. */ --tx-etikett:10.5px; /* --ink-3 är hjälptexternas färg. #6d7672 klarade 4,68:1 mot vitt men bara 3,90:1 mot --paper, och de hint-stycken som ligger direkt i en tabbpanel (profilvarningen och PDF-beskedet i offerten) står just på --paper. #5c645f ger 5,08:1 mot --paper och 6,10:1 mot vitt, över 4,5:1 i båda. */ --ink:#14181a; --ink-2:#4a534f; --ink-3:#5c645f; --paper:#e9ebe5; --surface:#fff; --line:#cfd3ca; --line-2:#e4e7df; /* --line duger till dekorativa avgränsare men inte till ett fälts kant: ett vitt fält på en vit panel har kanten som enda tecken på att fältet finns, och 1,52:1 mot vitt syns inte i solljus. --falt-kant ger 3,37:1 mot vitt, 3,11:1 mot #f5f6f2 och 3,28:1 mot .radkort, alltså över kravet 3:1. */ --falt-kant:#878e83; --accent:#f2b705; --accent-deep:#8a6a00; --ok:#2f7a4f; --warn:#a1560a; --stop:#a3231a; --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; --sans:"Roboto Condensed","Archivo Narrow","Helvetica Neue Condensed",-apple-system,"Segoe UI",system-ui,sans-serif; /* 2026-08-12: moderniseringstokens, radier och skuggdjup på ett ställe. Bara CSS, inga typsnitt eller bibliotek: laddtiden ska förbli densamma. */ --r:10px; --r-sm:7px; --skugga-1:0 1px 2px rgba(20,24,26,.05),0 3px 10px rgba(20,24,26,.05); --skugga-2:0 4px 10px rgba(20,24,26,.08),0 12px 28px rgba(20,24,26,.10); --ring:0 0 0 3px rgba(138,106,0,.22); } *{box-sizing:border-box} html{scroll-behavior:smooth} h2{scroll-margin-top:14px} button,a,summary{-webkit-tap-highlight-color:rgba(242,183,5,.25)} html,body{margin:0;padding:0} body{background:var(--paper);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased} /* Sticky: Logga in och logotypen följer med ner på landningssidan och guiderna (ägarens begäran 2026-08-27). z-index över hjältens rutnät och kortens skuggor. Appens inloggade topp (.apptopp) är medvetet inte sticky, där tar mobilväxlaren (rad ~282) och prisblocket den platsen. */ .masthead{background:var(--ink);color:var(--paper);padding:13px 20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:3px solid var(--accent); position:sticky;top:0;z-index:30} .masthead h1,.masthead .logo{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:0} .masthead h1 a,.masthead .logo a{color:inherit;text-decoration:none} .masthead .mark{color:var(--accent)} .masthead .sub{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.09em;text-transform:uppercase;color:#9aa39f} .masthead .spacer{flex:1} .shell{display:grid;grid-template-columns:minmax(340px,410px) 1fr} .pane-in{background:var(--surface);border-right:1px solid var(--line);padding-bottom:60px;min-height:calc(100vh - 56px)} .pane-out{padding:18px 20px 90px;min-width:0} /* minmax(0,1fr), inte 1fr: ett rutnätsbarn har min-width:auto och växer efter sitt innehåll. Med `1fr` blev kolumnen 538 px på en 390 px-skärm (mätt 2026-08-17), hela formuläret sköts åt sidan och Avancerad-knappen hamnade halvvägs utanför skärmkanten. minmax(0,…) tillåter kolumnen att krympa, och min-width:0 gör samma sak för panelen inuti. */ @media (max-width:960px){.shell{grid-template-columns:minmax(0,1fr)} .pane-in{border-right:0;border-bottom:1px solid var(--line);min-height:0;min-width:0}} .grp{border-bottom:1px solid var(--line-2)} .grp>summary{list-style:none;cursor:pointer;padding:11px 16px;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:9px;user-select:none} .grp>summary::-webkit-details-marker{display:none} .grp>summary::before{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .16s} .grp[open]>summary::before{transform:rotate(45deg)} .grp>summary:hover{background:#f5f6f2} .grp>summary .badge{margin-left:auto;font-size:var(--tx-etikett);color:var(--ink-3);letter-spacing:.04em} .grp .body{padding:2px 16px 16px} .row{display:flex;align-items:center;gap:10px;margin:7px 0} .row label{flex:1;font-size:13px;color:var(--ink-2)} .hint{display:block;font-size:var(--tx-etikett);color:var(--ink-3);line-height:1.35} input[type=number],input[type=text],input[type=email],select{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;width:96px;flex:none;padding:6px 8px;border:1px solid var(--falt-kant);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-align:right;transition:border-color .12s,box-shadow .12s} input:hover,select:hover{border-color:var(--ink-3)} input[type=text],input[type=email]{text-align:left;width:100%} select{width:196px;text-align:left;font-family:inherit} /* I en flex-rad betyder width:100% "lika bred som hela raden", fältet la sig ovanpå etiketten och stack ut ur kortet (Projekt: Beskrivning/Kund/E-post/Adress). Rätt beteende är radens RESTBREDD: väx och krymp, aldrig utanför. */ .row input[type=text],.row input[type=email]{flex:1 1 140px;width:auto;min-width:0} .row select{flex:0 1 auto;min-width:0;max-width:100%} /* mjuk fokusring i stället för hård outline, samma färg, modernare känsla */ input:not([type=checkbox]):not([type=radio]):focus,select:focus{outline:none;border-color:var(--accent-deep);box-shadow:var(--ring)} /* En kryssruta ritar inte författarens border, så på den blev den mjuka ringen (1,33:1 mot sina bakgrunder) allt som återstod av fokusmarkeringen, just på de rutor som låser upp e-signeringen. De får en riktig outline i stället: --accent-deep ger 4,22:1 mot --paper, 4,62:1 mot .note.stop och 5,07:1 mot vitt. */ input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px} input:disabled{background:#f3f4f0;color:var(--ink-3)} /* min-width, inte width: "arbetsdagar" (betalningsplanen), "kr/vända", "veckor" och "kr/m²/v" behövde 37-68 px i en 30 px ruta och spillde ut över fönsterkanten (desktopsvepet 2026-08-27, alla 147 verktyg på Offert-fliken). */ .unit{font-family:var(--mono);font-size:var(--tx-etikett);color:var(--ink-3);min-width:30px;flex:none;white-space:nowrap} .seg{display:flex;border:1px solid var(--falt-kant);border-radius:var(--r-sm);overflow:hidden;width:100%} .seg button{flex:1;border:0;background:var(--surface);cursor:pointer;padding:7px 4px;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);border-right:1px solid var(--line-2)} .seg button:last-child{border-right:0} .seg button[aria-pressed=true]{background:var(--ink);color:var(--accent)} .seg button:hover:not([aria-pressed=true]){background:#f1f2ee} .check{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px;color:var(--ink-2)} .check input{width:auto;flex:none} .radkort{border:1px solid var(--falt-kant);border-radius:var(--r-sm);padding:9px 10px;margin:8px 0;background:#fbfcfa} .radkort .top{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .radkort .top .lbl{font-family:var(--mono);font-size:var(--tx-etikett);color:var(--ink-3);flex:none} .radkort .top input[type=number]{width:64px} .radkort .top input[type=text]{flex:1;width:auto;min-width:90px} .radkort select{width:100%;margin-top:5px} .radkort .del{border:1px solid var(--line);background:var(--surface);cursor:pointer;width:26px;height:28px;border-radius:var(--r-sm);color:var(--ink-3);font-size:15px;flex:none;margin-left:auto} .kalkyllista .radkort{padding:12px;background:var(--surface)} .radkort-huvud{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .radkort-huvud>span{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em} .radkort-huvud>div{display:flex;align-items:center;gap:6px} .radkort-huvud .radkopiera{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:12px} .radkort-huvud .del{width:44px;height:44px;margin:0;font-size:21px} .kalkyllista .radkort .top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start} .radcell{display:block;min-width:0} .radcell .lbl{display:block;margin-bottom:4px} .radcell-text{grid-column:1/-1} .kalkyllista .radkort .top input[type=text]{box-sizing:border-box;width:100%;min-width:0} .radcell-varde{display:flex;align-items:center;gap:4px;min-width:0} .kalkyllista .radkort .top input[type=number]{box-sizing:border-box;flex:1 1 0;width:0;min-width:0;min-height:44px} .radcell-varde .unit{flex:none;font-size:11px} .radcell-auto input{background:#f1f3ed;color:var(--ink-2)} .radcell-auto-text{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink-3)} .radcell-manuell{display:block;min-height:44px;padding:5px 0;background:transparent;border:0;color:var(--accent-deep);font-size:12px;text-decoration:underline} .lista-kvitto{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 12px;margin:10px 0; border:1px solid var(--line);border-left:3px solid var(--accent-deep);border-radius:var(--r-sm);font-size:12px;background:#fff9e6} .lista-kvitto button{min-height:44px;font-size:12px} .mini{border:1px solid var(--line);background:var(--surface);cursor:pointer;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-sm);color:var(--ink-2);transition:background .12s,border-color .12s} .mini:hover{background:#f1f2ee;border-color:var(--ink-3)} /* Projekt: gör en växande lista av delkalkyler snabb att överblicka även i mobilen. */ .projekt-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:8px} .projekt-filter label{display:grid;gap:5px;min-width:0;color:var(--ink-2);font-family:var(--mono);font-size:12px;letter-spacing:.04em} .projekt-filter input{width:100%;min-width:0;min-height:44px} .projekt-filter button,.projekt-filterstatus button,.projekt-inga button,.projekt-korthuvud button,.projekt-angra button{ min-height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2); padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer } .projekt-filter button[aria-pressed="true"]{border-color:var(--gul);background:var(--ink);color:var(--gul)} .projekt-filterstatus{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 10px; border-left:3px solid var(--gul);background:#f3f4ef;color:var(--ink-2);font-size:12px} .projekt-filterstatus button{min-height:36px;padding:5px 9px;flex:none} .projekt-delrad{display:flex;gap:11px;align-items:flex-start;padding:10px 8px;border-bottom:1px solid #eceee8;cursor:pointer} .projekt-delrad:hover{background:#fafbf7} .projekt-delrad:has(input:focus-visible){outline:2px solid var(--gul);outline-offset:-2px} .projekt-delrad input{flex:none;margin-top:3px} .projekt-inga{display:grid;gap:5px;justify-items:start;padding:18px;border:1px dashed var(--line);background:#fafbf7} .projekt-inga span{color:var(--ink-2);font-size:13px} .projekt-korthuvud{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:9px 12px} .projekt-korthuvud h3{margin:0;font-size:14px} .projekt-korthuvud button{min-height:44px;padding:8px 10px} .projekt-angra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:9px 10px; border-left:3px solid var(--gul);background:#fff8d9;font-size:13px} .projekt-angra.fel{border-left-color:#a3231a;background:#fff0ee;color:#781c16} .projekt-angra button{min-height:36px;padding:5px 9px;flex:none} .kundbank-filter{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:8px;align-items:end;margin-bottom:12px; padding:10px;border:1px solid var(--line);background:#f7f8f3} .kundbank-filter label{display:grid;gap:5px;min-width:0;color:var(--ink-2);font-family:var(--mono);font-size:12px;letter-spacing:.04em} .kundbank-filter input{width:100%;min-width:0;min-height:44px} .kundbank-filter p{align-self:center;margin:0;color:var(--ink-2);font-size:12px;white-space:nowrap} .kundbank-filter .mini{min-height:44px} .kundbank-tomt{margin:2px 0 12px} .efter-filter{display:grid;gap:9px;margin-bottom:12px;padding:10px;border:1px solid var(--line);background:#f7f8f3} .efter-filter>label{display:grid;gap:5px;color:var(--ink-2);font-family:var(--mono);font-size:12px;letter-spacing:.04em} .efter-filter input{width:100%;min-width:0;min-height:44px} .efter-filter>p{margin:0;color:var(--ink-2);font-size:12px} .efter-filterval{display:flex;gap:6px;flex-wrap:wrap} .efter-filterval button{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--surface);color:var(--ink-2);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer} .efter-filterval button span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#e8eae4;font-size:10px} .efter-filterval button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff} .efter-filterval button[aria-pressed="true"] span{background:var(--gul);color:var(--ink)} .efter-tomt{margin:2px 0 12px} .efter-tabellskroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch; scrollbar-gutter:stable;border-bottom:1px solid var(--line-2)} .efter-tabellskroll table{display:table;min-width:720px} .efter-tabellskroll.bred table{min-width:1100px} .efter-tabellskroll::after{content:"Dra i sidled för fler kolumner →";display:none;position:sticky;left:0;width:max-content; padding:6px 10px;color:var(--ink-3);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em} @media (max-width:640px){ .projekt-filter{grid-template-columns:1fr} .projekt-filter button{width:100%} .projekt-filterstatus,.projekt-angra{align-items:flex-start;flex-direction:column} .projekt-filterstatus button,.projekt-angra button{width:100%} .projekt-korthuvud{align-items:stretch;flex-direction:column} .projekt-korthuvud button{width:100%} .projekt-delrad{padding:12px 4px} .kundbank-filter{grid-template-columns:1fr;align-items:stretch} .kundbank-filter p{white-space:normal} .kundbank-filter .mini{width:100%} .efter-filterval{display:grid;grid-template-columns:1fr 1fr} .efter-filterval button{justify-content:space-between;min-height:44px} .efter-tabellskroll::after{display:block} } /* flikarna som piller i stället för kantiga mappflikar, samma färgspråk, modernare form */ .tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap} .tabs button{border:1px solid var(--line);background:transparent;cursor:pointer;padding:7px 14px;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-radius:999px;transition:background .12s,border-color .12s,color .12s} .tabs button[aria-selected=true]{background:var(--ink);color:var(--accent);border-color:var(--ink)} .tabs button:hover:not([aria-selected=true]){border-color:var(--ink-3)} .card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:14px;box-shadow:var(--skugga-1)} .card>h3{margin:0;padding:9px 14px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);font-weight:400} .card .pad{padding:14px} .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* Tre lika kort i bredd. Landningssidans "Det som faktiskt skiljer" fick ett tredje kort 2026-08-27 och det hamnade ensamt på en egen rad i tvåkolumns- rutnätet. Faller till en kolumn under 820 px som .cols. */ .cols.cols-3{grid-template-columns:1fr 1fr 1fr} @media (max-width:820px){.cols,.cols.cols-3{grid-template-columns:1fr}} .total{background:linear-gradient(150deg,#1b2124,#14181a 60%);color:var(--paper);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:end;box-shadow:var(--skugga-1)} .total .lbl{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.11em;text-transform:uppercase;color:#8f9894} .total .big{font-family:var(--sans);font-size:40px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)} .total .sm{font-family:var(--mono);font-size:13px;color:#c9cfcb;text-align:right;font-variant-numeric:tabular-nums} .total .sm span{display:block} .total .band{grid-column:1/-1} .total .strip{grid-column:1/-1;border-top:1px solid #2c3330;padding-top:10px;margin-top:8px;display:flex;gap:22px;flex-wrap:wrap} .total .strip div{font-family:var(--mono);font-size:var(--tx-etikett);color:#8f9894} .total .strip b{display:block;font-size:15px;color:var(--paper);font-weight:500} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;padding:6px 10px;border-bottom:1px solid var(--line)} td{padding:5px 10px;border-bottom:1px solid var(--line-2);vertical-align:top} td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} tr.sum td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:600;padding-top:8px} tr.sub td{color:var(--ink-2)} td.grp-h{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:#f5f6f2;padding-top:8px} tbody tr:hover{background:#fafbf8} .pos{color:var(--ok)} .neg{color:var(--stop)} .note{display:flex;gap:9px;padding:9px 12px;border-left:3px solid;margin:0 0 8px;font-size:13px;background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0} .note.stop{border-color:var(--stop)} .note.warn{border-color:var(--warn)} .note.info{border-color:var(--ink-3)} .note.ok{border-color:var(--ok)} .note .tag{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.06em;text-transform:uppercase;flex:none;padding-top:2px;width:88px;overflow-wrap:break-word;line-height:1.3} .note.stop .tag{color:var(--stop)} .note.warn .tag{color:var(--warn)} .note.info .tag{color:var(--ink-3)} .note.ok .tag{color:var(--ok)} .flernoter{margin:0 0 8px} .flernoter>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:7px 12px;background:var(--surface);border-left:3px solid var(--line);user-select:none} .flernoter>summary::-webkit-details-marker{display:none} .flernoter>summary:hover{color:var(--ink-2)} .flernoter[open]>summary{margin-bottom:8px} svg{display:block;max-width:100%;height:auto} .legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:var(--tx-etikett);color:var(--ink-2)} .legend span{display:flex;align-items:center;gap:5px} .legend i{width:11px;height:11px;display:block;border:1px solid rgba(0,0,0,.25)} .btn{border:1px solid var(--ink);background:var(--ink);color:var(--accent);font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:var(--r-sm);cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .12s} .btn.ghost{background:transparent;color:var(--ink)} .btn.primary,.admin-prisspara .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)} .btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:var(--skugga-1)} .btn:active{transform:translateY(0);box-shadow:none} button:disabled{cursor:not-allowed} .btn:disabled,.mini:disabled{opacity:.55;transform:none;box-shadow:none;cursor:not-allowed} a.btn,a.mini{text-decoration:none;display:inline-flex;align-items:center;justify-content:center} .btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .objlist{font-size:12.5px} .objlist div{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line-2)} .objlist span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- säljdokument: offert, avtal, fakturaunderlag, bygglovsunderlag ---------- */ /* på skärm får dokumentet pappersskugga och mjuka hörn; utskriften nollar båda */ .offert{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--skugga-1);padding:40px 44px 46px;max-width:840px;font-size:13.5px;line-height:1.55;position:relative} /* brevhuvud: avsändarblock till vänster, dokumentets nyckeltal till höger, gul accentlinje under */ .brev{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;padding-bottom:13px;border-bottom:2.5px solid var(--accent)} .brev-avs{display:flex;gap:13px;align-items:flex-start;min-width:0} .brev-marke{width:40px;height:40px;flex:none} .brev-marke svg{width:100%;height:100%;display:block} .brev-namn{font-family:var(--sans);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.05;margin:1px 0 0} .brev-fin{font-family:var(--mono);font-size:var(--tx-etikett);line-height:1.65;color:var(--ink-3);margin-top:4px;letter-spacing:.01em} .brev-meta{margin-left:auto;text-align:right;font-family:var(--mono);font-size:var(--tx-etikett);line-height:1.5;color:var(--ink);min-width:150px} .brev-meta div{margin:2px 0} .brev-meta span{font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:7px} .brev-meta b{font-weight:500;font-variant-numeric:tabular-nums} .dok-titel{margin:26px 0 18px} .offert h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.02em;font-size:27px;line-height:1.1;margin:0} .dok-titel .fine{margin:7px 0 0;max-width:64ch} .offert .mottagare{margin:0 0 16px} .offert .mottagare .mrk{display:block;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px} .offert .ingress{font-size:14.5px;line-height:1.6;max-width:68ch;margin:0 0 4px} .offert h4{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin:28px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:9px} .offert h4::before{content:"";width:14px;height:2px;background:var(--accent);flex:none} .offert p{margin:8px 0} .offert ul{margin:7px 0 4px;padding-left:17px} .offert li{margin:4px 0} .offert li::marker{color:var(--accent-deep)} .offert table{margin:2px 0 6px} .offert td{padding:7px 0} .offert th{padding:6px 0} .offert td.n,.offert th.n{padding-left:16px} .offert tbody tr:hover{background:none} /* projektkalkylen har eget brevhuvud och egen slutrad (.tot), samma familj som verktygens */ .offert .brevhuvud{font-family:var(--mono);font-size:var(--tx-etikett);line-height:1.6;color:var(--ink-3); padding-bottom:11px;border-bottom:2.5px solid var(--accent);margin-bottom:22px} .offert .brevhuvud b{font-family:var(--sans);font-size:17px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);display:block} .offert tr.sum td{border-top:1px solid var(--ink);border-bottom:0;font-weight:600;padding-top:9px} .offert tr.sub td{color:var(--ink-2);font-size:12.5px} /* ROT/RUT-avdraget är ofta kundens viktigaste siffra på hela dokumentet, utan emphasis såg det ut som en förbisedd momsrad. Samma storlek som övriga sub-rader (den ska inte konkurrera med Att betala-raden), men i accentfärg och fet stil så ögat stannar på den. */ .offert tr.rot td{color:var(--accent-deep);font-weight:700} /* summan är dokumentets tyngdpunkt: beloppet stort, etiketten underordnad */ .offert tr.slut td,.offert tr.tot td{border-top:2px solid var(--ink);border-bottom:0;padding-top:13px;padding-bottom:2px; font-family:var(--sans);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .offert tr.slut td:first-child,.offert tr.tot td:first-child{font-family:var(--mono);font-size:var(--tx-etikett);font-weight:400;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2);vertical-align:bottom;padding-bottom:6px} .offert .prisnot{margin:14px 0 4px;padding:11px 14px;border-left:3px solid var(--accent);background:#faf9f2; font-size:12.5px;line-height:1.55;color:var(--ink-2)} .offert .prisnot strong{color:var(--ink)} .offert .signatur{margin-top:36px;padding-top:18px;border-top:1px solid var(--line-2)} .sidfot{display:none} .fine{font-size:11.5px;color:var(--ink-2);line-height:1.55} /* startsida */ .hub{max-width:1060px;margin:0 auto;padding:26px 20px 80px} .hub h2{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);font-weight:400;margin:30px 0 12px;border-bottom:1px solid var(--line);padding-bottom:7px} .hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .hubkort{display:block;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:15px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--skugga-1);transition:border-color .14s,transform .14s,box-shadow .14s} .hubkort:hover{border-color:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--skugga-2)} .hubkort b{font-family:var(--sans);font-size:16px;text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:5px} .hubkort span{font-size:12.5px;color:var(--ink-2);line-height:1.45;display:block} .hubkort .tagg{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);display:inline-block;margin-top:9px} /* desktop: totalsumman följer med när flikinnehållet scrollas */ /* Menyn är 12,5 px som bas, för det är telefonen som används i fält och där ska texten gå att läsa i solljus. På skrivbordet får den vara diskret igen. Basen är den mindre skärmen, inte tvärtom: ett fel åt det hållet syns direkt, ett fel åt andra hållet upptäcks först när någon står ute och kisar. */ @media (min-width:961px){ .appnav a{font-size:var(--tx-etikett)} .apptopp .konto>button{font-size:var(--tx-etikett)} .sidtitel .sub{font-size:var(--tx-etikett)} .total{position:sticky;top:12px;z-index:15;box-shadow:0 3px 14px rgba(20,24,26,.18)} /* Interaktiv 3D behöver hela sin canvas. Den klistrade prisrutan låg annars ovanpå takfoten och dolde detaljvyerna; React sätter klassen bara medan WebGL-vyn är öppen. Priset ligger kvar i normalt dokumentflöde. */ body.egf-3d-oppen .total{position:static} } .navchips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px} .navchips a{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--surface);transition:border-color .12s,color .12s} .navchips a:hover{border-color:var(--accent-deep);color:var(--ink)} /* mörkt läge borttaget på ägarens begäran 2026-08-04, sviten är alltid ljus */ /* fältbruk: telefon och surfplatta på plats. 840 (inte 700) för att täcka in 820×1180-surfplattan, under det breddläget fanns ingen touch-anpassning alls: 19px checkrader, 23–29px knappar/fält på en pekskärm. */ @media (max-width:840px){ body{font-size:15px} /* LÄSBAR TEXT PÅ TELEFON. Gränssnittets etiketter är versaliserad monospace med luft mellan bokstäverna, och på skärm ser 10,5 px stramt och prydligt ut. I en bil, i solljus, med skyddsglasögon på är det oläsbart. Versaler och letter-spacing gör det värre, inte bättre: ögat får inga ordbilder att känna igen. 12 px är golvet mätt av e2e/mobil.spec.js. Reglerna nedan träffar de etiketter som faktiskt låg under: menyn, flikarna, korthuvudena, enheterna och hinttexterna. Storlekarna på skrivbordet rörs inte. */ .appnav a,.apptopp .konto>button,.masthead .sub,.sidtitel .sub{font-size:12.5px} .grp>summary,.card>h3,.total .lbl,.klass,.dok-titel{font-size:12px} .hint,.fine,.unit,.komprad,.lagertext{font-size:12px} .seg button,.tabs button,.mini{font-size:12px} /* Letter-spacing stjäl bredd på en 390 px skärm och tvingar fram radbrytningar mitt i ord. Halveras här, syns inte men ger tillbaka en tredjedels rad. */ .appnav a,.tabs button,.seg button,.grp>summary,.card>h3{letter-spacing:.05em} input[type=number],input[type=text],input[type=email],input[type=password],input[type=date],select{font-size:16px;padding:10px 9px;width:110px;min-height:44px} /* Baslinje för ALLA kryssrutor, inte bara .check, sidor som Projekt.jsx bygger enstaka rutor med inline-stil utan att gå via .check, och ärvde annars webbläsarens 13 px. Klasser med egen storlek (.utr, .pb-bock, .tillaggsval) är mer specifika och vinner ändå. */ /* Rutan ritas 22 px. TRÄFFYTAN är LABELN runt den, inte rutan: hela raden "Egna lagertjocklekar …" går att trycka på, och det är så en kryssruta används på telefon. ::after fungerar inte här, input är ett replaced element och får inga pseudoelement, det var ett felförsök 2026-08-21. */ input[type=checkbox]{width:22px;height:22px} label:has(>input[type=checkbox]),.check{min-height:44px;display:flex;align-items:center;gap:10px} input[type=text],input[type=email],input[type=password],input[type=date],select{width:100%} /* etiketten på egen rad, fält och select i full bredd under, inget spränger */ .row{flex-wrap:wrap} .row label{flex:1 1 100%} .row input[type=number]{flex:1 1 auto;width:auto;min-width:110px;max-width:160px} .row .unit{width:auto} .seg button{padding:14px 4px;font-size:var(--tx-etikett);min-height:44px} .mini{padding:13px 14px;font-size:var(--tx-etikett);min-height:44px} /* checkboxraden var bara 19px hög, under 40px räcker inte på en pekskärm. .check är redan flex+align-items:center, så min-height centrerar gratis. */ .check{min-height:44px} /* Kryssrutan själv var 13×13, omöjlig att pricka med handske. Samma storlek som .utr input (utrustningslistan) ger konsekvent känsla över appen. */ .check input[type=checkbox]{width:22px;height:22px;flex:0 0 auto} /* 3D-styrningens hint-text (t.ex. "Klicka = markera ...") delar annars rad med kameraknapparna, dess flex:1 krymper till en smal kolumn, radbryts till flera rader och stretch-drar upp knapparna i höjd (~89px). Egen rad löser det utan att röra JS-genererad HTML. */ .btnrow .hint{flex:1 1 100%!important;align-self:auto!important;order:-1;margin-bottom:2px} .btn{padding:14px 18px;min-height:44px} .butik-omrade,.pb-val small,.verktygshubb-svephjalp{font-size:12px} .projekt-filter button,.projekt-filterstatus button,.projekt-inga button, .projekt-korthuvud button,.projekt-angra button{font-size:12px} .efter-filterval button,.efter-filterval button span{font-size:12px} /* Flikraden är mobilens navigering mellan Ritning/Mängder/Kalkyl/Offert och fästs i toppen (2026-08-17). Förut satt .total där, men priset står redan i den fastnaglade prisraden längst ned, så det fastnaglade prisblocket gjorde bara två saker: åt en tredjedel av skärmen och LÅSTE FLIKARNA under sig. Uppmätt: ett klick på Offert-fliken fastnade i prisblocket och guidraden ("intercepts pointer events"), kunden kom aldrig vidare. */ .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; position:sticky;top:0;z-index:22;background:var(--paper);box-shadow:0 2px 8px rgba(20,24,26,.14)} .tabs::-webkit-scrollbar{display:none} .tabs button{padding:10px 14px;flex:none} .grp>summary{padding:14px 16px} .total{position:static;box-shadow:none;grid-template-columns:minmax(0,1fr);gap:7px} .total .big{font-size:32px;white-space:nowrap} .total .sm{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 14px;text-align:left;font-size:12px} .total .sm span{display:inline} .total .strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-bottom:4px} .total .strip>div{min-width:0;overflow-wrap:anywhere} .total .strip b{font-size:14px;line-height:1.45;white-space:normal} .pane-out{padding:12px 12px 90px} .offert{padding:20px 16px;font-size:14px} .brev{gap:14px} .brev-meta{margin-left:0;text-align:left;min-width:0;width:100%;border-top:1px solid var(--line-2);padding-top:8px} .brev-meta span{display:inline-block;min-width:88px;margin-right:4px} .offert h2{font-size:21px} .dok-titel{margin:20px 0 14px} .offert tr.slut td,.offert tr.tot td{font-size:20px} .offert tr.slut td:first-child,.offert tr.tot td:first-child{font-size:var(--tx-etikett)} .radkort .del{width:44px;height:44px} .tabs button{padding:13px 14px;flex:none;min-height:44px} /* breda tabeller scrollar i sitt kort i stället för att spränga sidan */ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .offert{padding:16px 12px} /* Huvudmenyns länkar (appnav) och Konto-knappen landade på 30–38 px höjd, under WCAG-målytan 44 px. display:flex+align-items centrerar texten om istället för att bara växa nedåt via padding. */ .apptopp .konto>button{min-height:44px;display:inline-flex;align-items:center} .appnav a{min-height:44px;display:flex;align-items:center} .masthead h1 a,.masthead .logo a{display:inline-flex;align-items:center;min-height:44px} } /* ============================================================================ Inloggade undersidor: samma arbetsyta som dashboarden. Varje sida behåller sin egen logik. Det här lagret samlar bara sidhuvud, navigation, tomlägen och responsiva dataytor så att Projekt, Kundbank, Guider och Admin känns som samma produkt även på en telefon. ============================================================================ */ .sida-intro{position:relative;overflow:hidden;background:#181d1f;color:#f3f4f0;border-bottom:3px solid var(--accent)} .sida-intro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:48px 48px} .sida-intro::after{content:"";position:absolute;width:240px;height:240px;right:-140px;top:-150px; border:1px solid rgba(242,183,5,.32);transform:rotate(45deg);pointer-events:none} .sida-intro-in{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:29px 20px 27px; display:flex;align-items:flex-end;justify-content:space-between;gap:34px} .sida-intro-text{min-width:0} .sida-intro-kicker{display:block;margin-bottom:7px;font-family:var(--mono);font-size:10px;line-height:1.3; letter-spacing:.13em;text-transform:uppercase;color:var(--accent)} .sida-intro h1{margin:0;font-family:var(--sans);font-size:clamp(30px,4.4vw,48px);line-height:.98; letter-spacing:.01em;text-transform:uppercase;color:#f3f4f0;overflow-wrap:anywhere;hyphens:auto} .sida-intro p{max-width:67ch;margin:10px 0 0;color:#aeb7b2;font-size:14px;line-height:1.5} .sida-intro-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px} .sida-intro-actions .btn{border-color:var(--accent);background:var(--accent);color:var(--ink);text-decoration:none} .sida-intro-actions .btn.ghost{border-color:#58615d;background:transparent;color:#f3f4f0} .sida-intro-status{display:flex;align-items:stretch;gap:0;margin:0;flex:none;border:1px solid #3a423e;background:rgba(0,0,0,.1)} .sida-intro-status>div{min-width:104px;padding:11px 14px} .sida-intro-status>div+div{border-left:1px solid #3a423e} .sida-intro-status dt{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#8f9894} .sida-intro-status dd{margin:4px 0 0;font-family:var(--sans);font-size:22px;font-weight:700;line-height:1;color:var(--accent); font-variant-numeric:tabular-nums} .sida-intro-kompakt .sida-intro-in{padding-top:20px;padding-bottom:19px} .sida-intro-kompakt h1{font-size:clamp(26px,3.5vw,38px)} .sida-intro+.hub{padding-top:28px} .sida-sektionnav{display:flex;gap:6px;overflow-x:auto;margin:0 0 20px;padding:0 0 4px;scrollbar-width:thin} .sida-sektionnav a{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:7px 12px;border:1px solid var(--line); border-radius:999px;background:var(--surface);color:var(--ink-2);font-family:var(--mono);font-size:10px; letter-spacing:.07em;text-transform:uppercase;text-decoration:none} .sida-sektionnav a:hover,.sida-sektionnav a:focus-visible{border-color:var(--accent-deep);color:var(--ink)} .sida-sektionshuvud{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:30px 0 12px; padding-bottom:8px;border-bottom:2px solid var(--ink)} .hub .sida-sektionshuvud h2{margin:0;padding:0;border:0;font-family:var(--sans);font-size:22px;font-weight:700; letter-spacing:.01em;color:var(--ink)} .sida-sektionshuvud span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .sida-tomt{padding:28px;border:1px dashed #b7beb4;background:#f7f8f4;text-align:center} .sida-tomt strong,.sida-tomt h1{display:block;font-family:var(--sans);font-size:19px;text-transform:uppercase;margin:0} .sida-tomt p{max-width:56ch;margin:7px auto 15px;color:var(--ink-2);line-height:1.5} .tabellskroll{max-width:100%;overflow-x:auto;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--skugga-1)} .tabellskroll>table{min-width:680px} /* Admin: tabellen är ett dataverktyg på dator och en kortlista på telefon. Att pressa sex kolumner till 390 px gjorde tidigare orden lodräta. */ .admin-nav{position:sticky;top:94px;z-index:25;padding-top:8px;background:linear-gradient(var(--paper) 82%,transparent)} #admin-konton,#admin-support,#admin-statistik,#admin-priser{scroll-margin-top:152px} .admin-kontokort-lista{display:none} .admin-kontotabell td:nth-child(3),.admin-kontotabell td:nth-child(4){white-space:nowrap} .admin-rattighetsrad{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--line-2)} .admin-rattighetsrad:first-child{border-top:0} .admin-ge-rattighet{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr)) auto;gap:10px;align-items:end;margin-top:18px; padding-top:16px;border-top:1px solid var(--line)} .admin-ge-rattighet label{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:10px; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .admin-ge-rattighet input,.admin-ge-rattighet select{width:100%;min-height:44px} .admin-ge-rattighet .hint{grid-column:1/-1} /* Mina verktyg: samma information som kvittotabellen, men utan mikroskopiska kolumner på mobil. */ .mv-kortlista{display:none} .mv-summa{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:16px 18px;background:var(--ink);color:#fff; border-bottom:3px solid var(--accent)} .mv-summa span{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#aeb7b2} .mv-summa b{font-family:var(--sans);font-size:24px;color:var(--accent);white-space:nowrap} @media (max-width:840px){ .sida-intro-in{padding:23px 16px 21px;align-items:flex-start} .sida-intro h1{font-size:clamp(24px,7vw,31px);line-height:1.08} .sida-intro p{font-size:13px} .sida-intro-status,.sida-intro-status *{display:none} .sida-intro-kicker,.sida-sektionnav a,.sida-sektionshuvud span, .admin-ge-rattighet label,.mv-summa span{font-size:12px} .sida-intro+.hub{padding:20px 14px 70px} .sida-sektionnav{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px} .sida-sektionnav a{min-height:44px} .sida-sektionshuvud{align-items:flex-start;flex-direction:column;gap:3px} .hub .sida-sektionshuvud h2{font-size:20px} .sida-tomt{padding:23px 15px} .tabellskroll{margin-left:-1px;margin-right:-1px;box-shadow:none} .admin-kontotabell{display:none} .admin-kontokort-lista{display:grid;gap:10px} .admin-kontokort{border:1px solid var(--line);background:var(--surface);box-shadow:var(--skugga-1)} .admin-kontokort-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;width:100%;padding:13px 14px; border:0;background:transparent;color:inherit;text-align:left;cursor:pointer} .admin-kontokort-summary:focus-visible{outline:3px solid var(--accent-deep);outline-offset:-3px} .admin-kontokort.oppet{border-color:#a7aa9f;box-shadow:0 8px 22px rgba(20,24,26,.11)} .admin-kontokort-summary-slut{display:flex;align-items:center;gap:8px;flex:none} .admin-kontokort-pil{position:relative;width:18px;height:18px} .admin-kontokort-pil::before,.admin-kontokort-pil::after{content:"";position:absolute;left:3px;top:8px;width:12px;height:1.5px;background:var(--ink)} .admin-kontokort-pil::after{transform:rotate(90deg);transition:transform .15s} .admin-kontokort-summary[aria-expanded=true] .admin-kontokort-pil::after{transform:rotate(0)} .admin-kontokort-detaljer{border-top:1px solid var(--line-2)} .admin-kontokort-summary b{display:block;font-size:15px;overflow-wrap:anywhere} .admin-kontokort-summary>div>span{display:block;font-size:12px;color:var(--ink-3)} .admin-kontostatus{flex:none;padding:3px 8px;border:1px solid var(--ok);border-radius:999px;font-family:var(--mono); font-size:12px;text-transform:uppercase;color:var(--ok)} .admin-kontostatus.stangt{border-color:var(--stop);color:var(--stop)} .admin-kontokort-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-2)} .admin-kontokort-meta span{font-size:12px;color:var(--ink-3)} .admin-kontokort-meta b{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:500} .admin-kontokort-rattigheter{padding:8px 14px} .admin-kontokort-rattigheter>span{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--ink-3)} .admin-rattighetsrad{align-items:flex-start;flex-direction:column} .admin-rattighetsrad .mini{width:100%} .admin-kontokort-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:11px 14px;background:#f7f8f4} .admin-kontokort-actions .mini{width:100%;white-space:normal} .admin-ge-rattighet{grid-template-columns:1fr;padding:15px 14px;margin:14px -14px -14px;background:#f7f8f4} .admin-ge-rattighet .hint{grid-column:auto} .admin-ge-rattighet button{width:100%} .admin-nav{top:63px;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px} #admin-konton,#admin-support,#admin-statistik,#admin-priser{scroll-margin-top:126px} .mv-tabell{display:none} .mv-kortlista{display:grid;gap:9px;margin-top:14px} .mv-kort{background:var(--surface);border:1px solid var(--line);box-shadow:var(--skugga-1)} .mv-kort-huvud{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line-2)} .mv-kort-huvud b{font-size:15px} .mv-kort-pris{font-family:var(--sans);font-size:18px;font-weight:700;white-space:nowrap} .mv-kort-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;color:var(--ink-2)} .mv-kort .kampanj{padding:0 14px 12px} .mv-summa{margin-top:1px} } /* ---------- utskrift: A4, dokumentet ensamt på papperet ---------- */ @page{margin:16mm 15mm 20mm} @media print{ body{background:#fff;font-size:10.5pt} .masthead,.pane-in,.tabs,.btnrow,.noprint,.navchips,.legend{display:none!important} .total,.note,.flernoter{display:none!important} /* INTERNT UNDERLAG FÅR ALDRIG PÅ PAPPRET. Kalkylsäkerheten säger hur osäker vår egen kalkyl är, riskbufferten hur mycket vi lagt på, och guidraden är våra arbetsguider, allt tre är till för den som räknar, inte för kunden som får offerten. De hamnade i utskriften för att de är .card, och .card är just vad dokumentet självt består av. Upptäckt i en skarp kund-PDF 2026-08-14. */ [data-sakerhet],.guidrad{display:none!important} /* accentlinjer, gula markörer och prisnotens platta hör till identiteten, de ska med på papperet */ .offert,.offert *{-webkit-print-color-adjust:exact;print-color-adjust:exact} .shell{display:block}.pane-out{padding:0} .card{break-inside:avoid} .offert{border:0;border-radius:0;box-shadow:none;padding:0;max-width:none;font-size:10.5pt;line-height:1.45} .offert h2{font-size:21pt} .brev-namn{font-size:15pt} .brev-fin{font-size:7.5pt} .brev-meta{font-size:8.5pt} .offert .ingress{font-size:11pt} .offert h4{font-size:8.5pt;margin:16pt 0 6pt} .offert tr.slut td,.offert tr.tot td{font-size:19pt} .offert .prisnot{background:none;padding:8pt 10pt} /* inget block får klyvas mitt itu, och en rubrik får aldrig bli ensam sist på sidan */ tr,td,th,li,p,.prisnot,.brev,.dok-titel,.mottagare,.signatur,figure,svg{break-inside:avoid} thead{display:table-header-group} h2,h3,h4{break-after:avoid} h4+table,h4+ul,h4+p,p+ul,p+table,.dok-titel{break-before:avoid} /* Sidfot sist i dokumentet. position:fixed upprepas INTE per ark i Chrome (den hamnar där vyporten slutar och lägger sig över texten), och counter(page) stöds inte utanför @page-marginalrutorna, sidnumret i utskrift kommer från webbläsarens egen sidfot. Den handrullade PDF:en numrerar sina sidor själv. */ .sidfot{display:flex!important;gap:10px;justify-content:space-between;align-items:baseline; margin-top:16pt;border-top:.5pt solid #cfd3ca;padding-top:4pt;break-inside:avoid; font-family:var(--mono);font-size:7.5pt;letter-spacing:.03em;color:#6d7672} } /* "Detta behöver du", avprickningslista i Mängd-fliken. Stor träffyta: den används i bilen och i förrådet, ofta med handskar på. */ .utr{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;margin-bottom:6px; border:1px solid var(--linje,#d8d5cc);border-radius:9px;background:#fff} .utr.klar{background:#f4faf6;border-color:#2f7a4f} .utr input{width:22px;height:22px;flex:0 0 auto;margin-top:1px} .utr b{display:block;font-size:14.5px;font-weight:600} .utr span span{display:block;font-size:12.5px;color:#5d635f;margin-top:2px;line-height:1.35} @media print{.utr input{-webkit-appearance:none;appearance:none;border:1.5px solid #555;border-radius:3px}} /* ---------- landningssida (utloggad besökare på "/"), bara .landning-* här ---------- */ /* Ritningsrutnätet: två lager linjer i CSS (fin 24 px, grov 120 px), ingen bild. Svagt nog att texten inte tävlar med det, tydligt nog att bandet läser som ett ritningsblad och inte en svart ruta. background-color, inte background: kortformen hade nollat background-image. */ .landning-hero{background-color:var(--ink);color:var(--paper);border-bottom:3px solid var(--accent);padding:56px 20px 64px; background-image:linear-gradient(rgba(242,183,5,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(242,183,5,.07) 1px,transparent 1px), linear-gradient(rgba(233,235,229,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(233,235,229,.045) 1px,transparent 1px); background-size:120px 120px,120px 120px,24px 24px,24px 24px} /* 1180, inte 1060: samma bredd som .landning .hub nedan, hjälten och innehållet ska ha samma kant. */ .landning-hero>div{max-width:1180px;margin:0 auto} /* 52 px i taket: "RÄKNA HELA JOBBET" är 17 tecken och textspalten 598 px vid 1440, 56 hade knappt fått plats med systemets fallback-typsnitt. */ .landning-hero h1{font-family:var(--sans);font-size:clamp(28px,4.3vw,52px);font-weight:700;line-height:1.04;text-transform:uppercase;letter-spacing:.01em;color:var(--accent);margin:0 0 16px} .landning-hero p{font-size:15.5px;line-height:1.6;max-width:64ch;color:#c9cfcb;margin:0 0 24px} /* .btn är mörk på mörkt, på hjältebottnen inverteras den, spöket blir ljust */ .landning-hero .btn{text-decoration:none;background:var(--accent);border-color:var(--accent);color:var(--ink)} .landning-hero .btn.ghost{background:transparent;border-color:#8f9894;color:var(--paper)} .landning-steg{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:steg} .landning-steg li{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;box-shadow:var(--skugga-1)} .landning-steg li::before{counter-increment:steg;content:counter(steg);display:block;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.1em;color:var(--accent-deep);margin-bottom:6px} .landning-steg b{font-family:var(--sans);font-size:15px;text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:4px} .landning-steg span{font-size:12.5px;color:var(--ink-2);line-height:1.45} .landning-ingress{max-width:68ch;margin:0 0 14px;color:var(--ink-2)} .landning-brod{margin:0;font-size:13.5px;line-height:1.55;max-width:68ch} .landning-verktyg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .landning-verktyg li{font-size:12.5px;border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;background:#fbfcfa;color:var(--ink-2)} .landning-login{padding-bottom:26px;scroll-margin-top:14px} .landning-fot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0;padding:0 20px 44px} /* Punkten mellan posterna ritas av css så den följer sitt ord vid radbrytning. */ .landning-fot>span+span::before{content:"\00B7";padding:0 9px} /* ---------- appram: toppbar + sidhuvuden för det inloggade läget ---------- */ /* Toppbaren är appens ENDA mörka list; sidorna under har ljusa .sidtitel-huvuden. Inte sticky: på en telefon i fält är skärmytan dyrare än menyn, och priset (.total/.prisrad) äger redan de fasta kanterna. */ .apptopp{display:block;padding:0} .apptopp .topprad{display:flex;align-items:center;gap:14px;padding:10px 16px 6px} .apptopp h1,.apptopp .logo{font-size:18px} .apptopp .konto{margin-left:auto;position:relative} .apptopp .konto>button{border:1px solid #3a423e;background:transparent;color:#c9cfcb;cursor:pointer; font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:2px} .apptopp .konto>button:hover,.apptopp .konto>button[aria-expanded=true]{border-color:var(--accent);color:var(--accent)} .mobilmenyknapp{display:none;border:1px solid #3a423e;background:transparent;color:#c9cfcb;cursor:pointer; font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:2px} .mobilmenyknapp>span{display:flex;width:15px;flex-direction:column;gap:3px} .mobilmenyknapp i{display:block;width:15px;height:1px;background:currentColor} .mobilmenyknapp:hover,.mobilmenyknapp[aria-expanded=true]{border-color:var(--accent);color:var(--accent)} .kontomeny{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:190px;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--skugga-2);overflow:hidden} .kontomeny a,.kontomeny button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer; font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.08em;text-transform:uppercase;color:var(--ink); text-decoration:none;padding:13px 16px;border-bottom:1px solid var(--line-2)} .kontomeny :last-child{border-bottom:0} .kontomeny a:hover,.kontomeny button:hover{background:#f1f2ee} .appnav{display:flex;gap:2px;padding:0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .appnav::-webkit-scrollbar{display:none} .appnav a{flex:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase; color:#9aa39f;text-decoration:none;padding:11px 12px 9px;border-bottom:3px solid transparent;margin-bottom:-3px} .appnav a:hover{color:var(--paper)} .appnav a.aktiv,.appnav a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)} @media (max-width:700px){ /* Utan wrap blev raden 441 px bred vid 200 % textstorlek på en 320 px skärm och Konto-knappen hamnade utanför vyn. #root klipper spillet (ingen sidledsrullning), så vägen till Profil, Inställningar och Logga ut försvann helt. Med wrap hoppar Konto ned på egen rad. min-width:0 på logotypen så att ett långt firmanamn inte kan låsa första raden i stället. */ .apptopp .topprad{padding:9px 12px;gap:7px;flex-wrap:wrap} .apptopp .logo{min-width:0} .apptopp .topprad h1{margin-right:auto} .mobilmenyknapp{display:inline-flex;align-items:center;gap:7px;min-height:44px} .apptopp .konto>button{padding-left:9px;padding-right:9px} /* minmax(0,…), inte 1fr: en rutnätspost har min-width:auto och tvingar spåret att bli minst så brett som sitt längsta ord. Vid 200 % textstorlek blev kolumnerna 171+176 px i en 320 px vy och höger kolumn sköts utanför skärmen. overflow-wrap nedan behövs för att etiketten ska radbryta i stället för att klippas när spåret väl är låst. */ .appnav{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;border-top:1px solid #303735;overflow:visible} .appnav.appnav-oppen{display:grid} .appnav a{min-height:52px;margin:0;padding:13px 16px;border-right:1px solid #303735;border-bottom:1px solid #303735!important;justify-content:flex-start;overflow-wrap:anywhere} .appnav a:nth-child(2n){border-right:0} .appnav a:nth-last-child(-n+2){border-bottom:0!important} .appnav a.aktiv,.appnav a[aria-current=page]{background:#22282a;box-shadow:inset 3px 0 var(--accent)} } /* Ljust sidhuvud under toppbaren: var-är-jag + väg tillbaka. */ .sidtitel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 20px 11px; background:var(--surface);border-bottom:1px solid var(--line)} .sidtitel h1{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:0} .sidtitel .mark{color:var(--accent-deep)} .sidtitel .sub{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .sidtitel .tillbaka{font-family:var(--mono);font-size:var(--tx-etikett);letter-spacing:.06em;text-transform:uppercase; color:var(--ink-2);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:var(--surface);transition:border-color .12s,color .12s} .sidtitel .tillbaka:hover{border-color:var(--accent-deep);color:var(--ink)} .kalkyl-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono); font-size:var(--tx-etikett);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .kalkyl-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 14%,transparent)} .kalkyl-live.raknar i{background:var(--accent-deep);animation:kalkylpuls .9s ease-in-out infinite alternate} .kalkyl-live.misslyckad{color:var(--stop)} .kalkyl-live.misslyckad i{background:var(--stop);box-shadow:none} .kalkyl-fel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0; padding:14px 16px;border:1px solid var(--warn);border-left:4px solid var(--warn);background:#fff8e7;border-radius:var(--r-sm)} .kalkyl-fel strong{font-size:14px} .kalkyl-fel p{margin:4px 0 0;font-size:13px;line-height:1.5} .kalkyl-fel button{flex:none;min-height:44px} .resultat-dokument{margin:0;padding:0;border:0;min-inline-size:0} .resultat-dokument:disabled{opacity:.6} @media(max-width:600px){.kalkyl-fel{align-items:stretch;flex-direction:column;margin:10px 12px}.prisrad .lbl{max-width:52%}} @media print{.resultat-dokument:disabled{display:none!important}} @keyframes kalkylpuls{to{opacity:.35;transform:scale(.72)}} /* Sökrutan i verktygslistan. 16px så iOS inte auto-zoomar. */ .soklada{margin:14px 0 4px} /* min-height, inte bara padding: höjden blev 43 px på CI:s Linux (andra typsnittsmått) och föll på 44 px-regeln för tryckytor, medan samma fält var 44 på Windows. Ett mått som inte beror på typsnittet håller överallt. */ .soklada input{width:100%;min-height:44px;font-family:inherit;font-size:16px;text-align:left;padding:11px 16px; border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);transition:border-color .12s,box-shadow .12s} .soklada input:focus{outline:none;border-color:var(--accent-deep);box-shadow:var(--ring)} .butik-sokrad{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch} .butik-sokrad .mini{min-width:76px} .butik-tomt{margin:14px 0 18px} .butik-omrade{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .kundbank-tabellskroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain} .kundbank-tabellskroll:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px} .kundbank-tabellskroll table{min-width:620px} .kundbank-tabellskroll.bred table{min-width:900px} .tabell-sidhint{display:none;margin:5px 0 0;color:var(--muted);font-size:11px} @media(max-width:700px){.tabell-sidhint{display:block}} /* Formulärgrupperna ritas som fieldset/legend i appen, nollställ webbläsarens fieldset-låda och ge legend samma röst som .grp>summary i den statiska sviten. */ fieldset.grp{margin:0;padding:0;border:0;border-bottom:1px solid var(--line-2);min-inline-size:0} fieldset.grp legend{padding:0;width:100%} /* Rubriken är nu en knapp INUTI legend (i stället för ren text), dragspelet på mobil behöver ett klickbart mål, och en