/* x95 Backoffice — the x95 Salg look («Signal» tokens): grafitt menu, betong page, flate cards, sharp corners,
   Archivo in two weights. Orange (--signal) only for what needs you. Status is always shape + word. Desktop first. */
html, body { margin: 0; min-height: 100%; background: var(--betong); color: var(--tekst); font-family: var(--font); }
body { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; -webkit-font-smoothing: antialiased;
       background: linear-gradient(to right, var(--grafitt) 232px, var(--betong) 232px); }
.bo-under a.salg { display: inline-flex; align-items: center; min-height: 44px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--grafitt); outline-offset: 2px; }

/* ── Menu ── */
.bo-meny { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-4);
           background: var(--grafitt); color: var(--tekst-lys); padding: var(--sp-4) var(--sp-3); box-sizing: border-box; }
.bo-merke { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--sp-2); color: var(--tekst-lys);
            text-decoration: none; font-weight: var(--w-tung); font-size: 17px; letter-spacing: -.02em; }
.bo-merke svg { width: 32px; height: 32px; flex: none; fill: none; stroke-width: 4; stroke-linecap: square; }
.bo-merke .m-bolge { stroke: var(--tekst-lys); }
.bo-merke .m-hake { stroke: var(--signal); }
#bo-nav { display: flex; flex-direction: column; gap: 2px; }
.bo-gr { color: var(--tekst-lys-2); font-size: 11px; font-weight: var(--w-tung); letter-spacing: .1em; text-transform: uppercase;
         padding: var(--sp-3) var(--sp-2) var(--sp-1); }
.bo-lenke { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--sp-3);
            border-radius: var(--r-1); color: var(--tekst-lys); text-decoration: none; font-size: 15px; }
.bo-lenke:hover { background: var(--grafitt-2); }
.bo-lenke.pa { background: var(--grafitt-3); font-weight: var(--w-tung); box-shadow: inset 3px 0 0 var(--tekst-lys); }
.bo-lenke .ut { color: var(--tekst-lys-2); font-size: 13px; }
.bo-lenke:focus-visible, .bo-merke:focus-visible { outline-color: var(--signal); }
.bo-meg { margin-top: auto; font-size: 13px; color: var(--tekst-lys-2); padding: var(--sp-2); }
.bo-meg b { display: block; color: var(--tekst-lys); font-size: 14px; }

/* ── Page ── */
.bo-side { padding: var(--sp-8) var(--sp-10) var(--sp-16); max-width: 1320px; box-sizing: border-box; width: 100%; }
.bo-topp { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.bo-topp h1 { font-size: var(--fs-xl); font-weight: var(--w-tung); letter-spacing: -.02em; font-stretch: var(--bred); }
.bo-topp .hoyre { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bo-tall { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--tekst-2); }
.bo-tall b { font-size: var(--fs-lg); color: var(--tekst); }
.bo-under { font-size: var(--fs-sm); color: var(--tekst-2); }
.bo-under a { color: var(--tekst); }

/* ── Buttons, chips, fields ── */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
         border: var(--strek) solid var(--grafitt); border-radius: var(--r-1); background: var(--flate); color: var(--grafitt);
         font-weight: var(--w-tung); font-size: 15px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.knapp:hover { background: var(--flate-2); }
.knapp.hoved { background: var(--signal); border-color: var(--signal); color: var(--signal-pa); }
.knapp.hoved:hover { background: var(--signal-hover); }
.knapp.mork { background: var(--grafitt); color: var(--tekst-lys); }
.knapp.mork:hover { background: var(--grafitt-2); }
.knapp.stille { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; }
.knapp:disabled { opacity: .45; cursor: not-allowed; }
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip { min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--linje); border-radius: var(--r-1); background: var(--flate);
        cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; gap: var(--sp-2); }
.chip:hover { background: var(--flate-2); }
.chip.pa { background: var(--grafitt); border-color: var(--grafitt); color: var(--tekst-lys); font-weight: var(--w-tung); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .8; }
.felt { display: flex; flex-direction: column; gap: var(--sp-1); font-size: 13px; font-weight: var(--w-tung); color: var(--tekst-2); }
.felt input, .felt select, .felt textarea, .inn { min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--linje);
        border-radius: var(--r-1); background: var(--flate); color: var(--tekst); font-size: 15px; font-weight: var(--w-normal); box-sizing: border-box; }
.felt textarea { padding: var(--sp-2) var(--sp-3); min-height: 120px; resize: vertical; line-height: 1.45; }
.felt input:focus, .felt select:focus, .felt textarea:focus, .inn:focus { outline: var(--strek) solid var(--grafitt); outline-offset: 0; }
.rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.feil { color: var(--feil); font-weight: var(--w-tung); font-size: 14px; }

/* ── Cards and tables ── */
.kort { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r-2); padding: var(--sp-6); margin-bottom: var(--sp-6); }
.kort h2 { font-size: var(--fs-md); font-weight: var(--w-tung); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.kort h2 .hoyre { margin-left: auto; }
.tabell { width: 100%; border-collapse: collapse; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r-2); }
.tabell th { text-align: left; font-size: 12px; font-weight: var(--w-tung); letter-spacing: .06em; text-transform: uppercase;
             color: var(--tekst-2); background: var(--flate-2); padding: var(--sp-3); border-bottom: 1px solid var(--linje); white-space: nowrap; }
.tabell td { padding: var(--sp-3); border-bottom: 1px solid var(--linje); vertical-align: middle; font-size: 15px; }
.tabell tr:last-child td { border-bottom: 0; }
.tabell tbody tr.klikk { cursor: pointer; }
.tabell tbody tr.klikk:hover { background: var(--flate-2); }
.tabell .tall { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabell .navn b { display: block; }
.tabell .navn span { font-size: 13px; color: var(--tekst-2); }
.tom { padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--tekst-2); }

/* status: shape + word */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-tung); font-size: 14px; white-space: nowrap; }
.status::before { content: ""; width: 10px; height: 10px; box-sizing: border-box; }
.status.oppsett::before { border: 2px solid var(--grafitt); border-radius: 50%; }
.status.aktiv::before { background: var(--grafitt); border-radius: 50%; }
.status.utlopt { color: var(--signal-tekst); }
.status.utlopt::before { background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.status.avsluttet { color: var(--tekst-2); }
.status.avsluttet::before { height: 2px; background: var(--tekst-2); }

/* readiness: five squares */
.klar { display: inline-flex; align-items: center; gap: 3px; }
.klar i { width: 12px; height: 12px; border: 2px solid var(--grafitt); box-sizing: border-box; }
.klar i.ja { background: var(--grafitt); }
.klar b { margin-left: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sjekk { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.sjekk li { border: 1px solid var(--linje); border-radius: var(--r-2); padding: var(--sp-3); display: flex; gap: var(--sp-2); align-items: center; font-weight: var(--w-tung); }
.sjekk li::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--grafitt); flex: none; }
.sjekk li.ja::before { background: var(--grafitt); }
.sjekk li.nei { background: var(--signal-svak); }

/* agreement card */
.avtale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.avtale .lbl { font-size: 12px; font-weight: var(--w-tung); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); margin-bottom: var(--sp-1); }
.avtale .vrd { font-size: var(--fs-md); font-weight: var(--w-tung); }
.avvik { display: inline-block; font-size: 12px; font-weight: var(--w-tung); padding: 2px 6px; border-radius: var(--r-1); background: var(--signal-svak); color: var(--grafitt); }
.liste-endret { display: inline-block; font-size: 12px; font-weight: var(--w-tung); padding: 2px 6px; border: 1px dashed var(--grafitt); border-radius: var(--r-1); }
.knapper { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* tabs inside a company */
.faner { display: flex; gap: 0; border-bottom: var(--strek) solid var(--linje); margin: var(--sp-6) 0; overflow-x: auto; }
.fane { min-height: 48px; padding: 0 var(--sp-4); border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--tekst-2);
        border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.fane.pa { color: var(--tekst); font-weight: var(--w-tung); border-bottom-color: var(--grafitt); }
.fane:hover { color: var(--tekst); }

/* account type cards */
.valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.valg label { display: flex; gap: var(--sp-3); align-items: center; min-height: 64px; padding: 0 var(--sp-4); border: var(--strek) solid var(--linje);
              border-radius: var(--r-2); cursor: pointer; font-weight: var(--w-tung); background: var(--flate); }
.valg input { width: 20px; height: 20px; accent-color: var(--grafitt); }
.valg label:has(input:checked) { border-color: var(--grafitt); background: var(--flate-2); }
.sum { display: flex; gap: var(--sp-8); justify-content: flex-end; padding-top: var(--sp-4); font-size: 15px; }
.sum b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.bryter { width: 22px; height: 22px; accent-color: var(--grafitt); }
.liten { width: 110px; }

/* AI runs */
pre.kode { white-space: pre-wrap; word-break: break-word; background: var(--grafitt); color: var(--tekst-lys); padding: var(--sp-4);
           border-radius: var(--r-2); font: 13px/1.5 ui-monospace, Menlo, monospace; max-height: 420px; overflow: auto; margin: 0 0 var(--sp-4); }
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; margin-bottom: var(--sp-3); }
.lenke-kopi { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.lenke-kopi input { flex: 1; }

/* login */
.inngang { max-width: 420px; margin: 12vh auto 0; text-align: left; }
.inngang h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-6); font-stretch: var(--bred); }
.melding { margin-bottom: var(--sp-4); }
.varsel { position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); background: var(--grafitt); color: var(--tekst-lys);
          padding: var(--sp-3) var(--sp-5); border-radius: var(--r-1); font-weight: var(--w-tung); z-index: 10; }
.mellom { margin-top: var(--sp-4); }
.kort h3 { font-size: 13px; font-weight: var(--w-tung); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); margin: var(--sp-4) 0 var(--sp-2); }
.kort > .bo-under { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.kort h2 label.knapper { align-items: center; gap: var(--sp-3); cursor: pointer; }
.logo-vis { height: 44px; max-width: 160px; object-fit: contain; border: 1px solid var(--linje); border-radius: var(--r-1); background: var(--flate); padding: 2px; }