/* CRM — layout and components. Every colour, size and font comes from tokens.css
   (a copy of the live fiksflyt.no tokens). No hex values in this file.
   Desktop first: built for a 1280–1920 px office screen. Below 900 px it
   becomes one column so a phone still works, but that is not the target.
   Signal (orange) means "this needs you": the «Ny» dot and the one primary button. */

html, body { height: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
select, textarea { font: inherit; color: inherit; }

/* ── Top bar (tokens.css .topp) ── */
.logo { color: var(--tekst-lys); }
.logo .ordmerke { font-size: var(--fs-md); }
.topp-sti .ikon { width: 20px; height: 20px; }
.profil { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding-right: var(--sp-2); }
.topp-knapp { font-size: var(--fs-sm); font-weight: var(--w-tung); padding: 0 var(--sp-3); }
.sprakvalg { display: inline-flex; }
.sprakvalg-felt { height: 44px; min-width: 44px; padding: 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--w-tung);
                  border: var(--kant-sterk); border-radius: var(--r-1); background: var(--flate); color: var(--tekst); cursor: pointer; }
.sprakvalg-felt option { background: var(--flate); color: var(--tekst); }
.topp .sprakvalg-felt { background: var(--grafitt); color: var(--tekst-lys); border: 1px solid var(--grafitt-3); }
.topp .sprakvalg-felt:hover { background: var(--grafitt-2); }
.sprakvalg-felt:focus-visible { outline: var(--strek) solid var(--grafitt); outline-offset: 2px; }
.topp .sprakvalg-felt:focus-visible { outline-color: var(--signal); }
.midt-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ── Work area: list left, card right ── */
.arbeidsflate { display: grid; grid-template-columns: minmax(560px, 48%) minmax(0, 1fr);
                height: calc(100dvh - 56px); }
.liste { display: flex; flex-direction: column; min-height: 0; border-right: var(--kant); background: var(--betong); }
.kort-plass { min-height: 0; overflow-y: auto; background: var(--flate); }

.liste-hode { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
              padding: var(--sp-6) var(--sp-5) var(--sp-4); }
.liste-hode h1 { font-size: var(--fs-xl); line-height: 1.1; }
.liste-verktoy { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }

.sok { height: 44px; width: 100%; border: var(--kant-sterk); border-radius: var(--r-1); background: var(--flate);
       padding: 0 var(--sp-4); font-size: var(--fs-base); }
.sok::placeholder { color: var(--tekst-2); opacity: 1; }

/* One row: the filter is read left to right like a pipeline. A narrow window scrolls it instead of wrapping. */
.filter { display: flex; flex-wrap: wrap; gap: var(--sp-1); overflow-x: auto; scrollbar-width: thin; }
.filter-knapp { flex: none; min-height: 44px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; gap: 6px;
                border: var(--strek) solid transparent; border-radius: var(--r-1); background: transparent;
                font-size: var(--fs-sm); font-weight: var(--w-tung); cursor: pointer; }
.filter-knapp:hover { background: var(--flate-2); }
.filter-knapp[aria-pressed="true"] { background: var(--grafitt); color: var(--tekst-lys); }
.antall { min-width: 20px; height: 22px; padding: 0 var(--sp-1); border-radius: var(--r-1); background: var(--flate-2);
          color: var(--tekst); font-size: var(--fs-xs); display: inline-flex; align-items: center; justify-content: center; }
.filter-knapp[aria-pressed="true"] .antall { background: var(--grafitt-3); color: var(--tekst-lys); }

/* ── The lead table: dense, but every row is a 48 px target ── */
.tabell-ramme { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-5) var(--sp-6); }
.tabell { width: 100%; border-collapse: collapse; background: var(--flate); border: var(--kant); font-size: var(--fs-sm); }
.tabell th { position: sticky; top: 0; z-index: 1; background: var(--flate-2); text-align: left;
             font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-2);
             padding: var(--sp-2) var(--sp-3); border-bottom: var(--kant); }
.tabell td { padding: 0 var(--sp-3); border-bottom: var(--kant); height: 56px; vertical-align: middle; }
.tabell tr { cursor: pointer; }
.tabell tbody tr:hover { background: var(--flate-2); }
.tabell tr.valgt { background: var(--flate-2); box-shadow: inset 4px 0 0 var(--grafitt); }
.kol-kilde, .kol-tid { white-space: nowrap; color: var(--tekst-2); }
.kol-tid { text-align: right; }
th.kol-tid { text-align: right; }
.rad-knapp { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 48px; padding: var(--sp-1) 0;
             border: 0; background: transparent; text-align: left; cursor: pointer; font-size: var(--fs-sm); }
.rad-tittel { font-weight: var(--w-tung); line-height: 1.3; }
.rad-kunde { color: var(--tekst-2); line-height: 1.3; }
.tom { padding: var(--sp-8) var(--sp-4); text-align: center; background: var(--flate); border: var(--kant); border-top: 0; }

/* ── Status: shape + word (tokens.css has .status, .prikk, .form-ring, .form-trekant) ── */
.form-fylt { width: 12px; height: 12px; border-radius: 50%; background: var(--grafitt); display: inline-block; flex: none; }
.form-strek { width: 12px; height: var(--strek); background: var(--tekst-2); display: inline-block; flex: none; }
.status-lost { color: var(--tekst-2); }

/* ── The end customer card ── */
.kort { padding: var(--sp-8) var(--sp-8) var(--sp-16); max-width: 1180px; }
.kort-tomt { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--tekst-2); }
.tilbake { display: none; margin-bottom: var(--sp-4); }
.kort-hode .etikett { color: var(--tekst-2); }
.kort-navn { font-size: var(--fs-xl); line-height: 1.1; margin: var(--sp-1) 0 var(--sp-5); }
/* Flex, not grid: each fact takes its natural width, so an e-mail address is never broken in the middle. */
.fakta { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin: 0; }
.fakta dt { color: var(--tekst-2); }
.fakta dd { margin: 0; overflow-wrap: anywhere; }
.fakta > div { min-width: 0; }
.fakta a, .kontakter a { color: var(--tekst); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.fakta dd { min-height: 44px; display: flex; align-items: center; }

.kort-kolonner { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.blokk + .blokk { margin-top: var(--sp-8); }
.blokk > h3 { color: var(--tekst-2); margin-bottom: var(--sp-3); }

.lead-liste, .kontakter, .tidslinje { list-style: none; margin: 0; padding: 0; }
.lead { border: var(--kant); border-radius: var(--r-2); padding: var(--sp-4); background: var(--flate); }
.lead + .lead { margin-top: var(--sp-3); }
.lead.valgt { border: var(--kant-sterk); }
.lead-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.lead-meta { color: var(--tekst-2); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.lead-id { white-space: nowrap; }
.lead-status { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-sm); }
.lead-status label { white-space: nowrap; }
.lead-status .felt { flex: 1; min-width: 0; max-width: 220px; }

.kontakter li { padding: var(--sp-3) 0; border-bottom: var(--kant); }
.kontakter li:first-child { padding-top: 0; }
.kontakt-linjer { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); font-size: var(--fs-sm); }

/* ── Fields and forms ── */
.felt { width: 100%; min-height: 44px; border: 1px solid var(--tekst-2); border-radius: var(--r-1); background: var(--flate);
        padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); }
.felt:hover { border-color: var(--grafitt); }
textarea.felt { resize: vertical; line-height: 1.4; }
.felt::placeholder { color: var(--tekst-2); opacity: 1; }
.skjemafelt { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--w-tung); }
.skjemafelt .felt { font-weight: var(--w-normal); }
.feilmelding { color: var(--feil); font-weight: var(--w-tung); }

.notat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--betong);
         border-radius: var(--r-2); margin-bottom: var(--sp-6); }
.notat-rad { display: flex; gap: var(--sp-2); }
.notat-rad .felt { flex: 1; min-width: 0; }

/* ── Timeline: newest first, a rail on the left ── */
.tidslinje { border-left: var(--strek) solid var(--linje); }
.hendelse { position: relative; padding: 0 0 var(--sp-5) var(--sp-5); }
.hendelse::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
                    background: var(--flate); border: var(--strek) solid var(--grafitt); }
.hendelse-topp { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.hendelse-type { font-weight: var(--w-tung); }
.hendelse-topp time { color: var(--tekst-2); white-space: nowrap; }
.hendelse-tekst { margin: var(--sp-1) 0; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.hendelse-meta { font-size: var(--fs-sm); color: var(--tekst-2); }

/* ── Dialog, login, problems ── */
.dialog { border: var(--kant-sterk); border-radius: var(--r-2); padding: 0; width: min(720px, calc(100vw - 32px));
          background: var(--flate); color: var(--tekst); box-shadow: var(--skygge-2); }
.dialog::backdrop { background: rgba(29, 28, 26, .5); }
.dialog-skjema { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8); }
.dialog-skjema h2 { font-size: var(--fs-lg); }
.skjema-gruppe { border: 0; padding: 0; margin: 0; }
.skjema-gruppe legend { padding: 0; margin-bottom: var(--sp-2); color: var(--tekst-2); }
.skjema-rutenett { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.dialog-knapper { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }

.midt { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.midt-kort { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-10);
             background: var(--flate); border: var(--kant); border-radius: var(--r-2); }
.midt-kort .ordmerke { font-size: var(--fs-lg); }
.midt-kort h1 { font-size: var(--fs-xl); line-height: 1.1; }
.bred-knapp { width: 100%; }
.login-stabel { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--sp-4); }
.login-stabel .midt-kort { width: 100%; }
.demo-boks { padding: var(--sp-4) var(--sp-5); border: var(--kant); border-radius: var(--r-2); background: var(--flate-2); }
.demo-boks ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.demo-knapp { width: 100%; min-height: 44px; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
              border: 0; border-top: var(--kant); background: transparent; font-size: var(--fs-sm); cursor: pointer; padding: 0 var(--sp-1); }
.demo-knapp:hover { background: var(--flate); }
.demo-knapp .tall { font-weight: var(--w-tung); }

.varsel { position: fixed; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); z-index: 20; display: flex;
          align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
          background: var(--grafitt); color: var(--tekst-lys); border-radius: var(--r-2); box-shadow: var(--skygge-2); }

/* ── Inbound (step 2) ── */
.liste-knapper { display: flex; gap: var(--sp-2); }
/* «Inn» with something new: the count is the signal (fill + graphite ring, like the app wall's number). */
.filter-inbox.har-nytt .antall { background: var(--signal); color: var(--signal-pa); box-shadow: 0 0 0 var(--strek) var(--grafitt); }
.kilde { display: inline-flex; align-items: center; gap: var(--sp-2); }
.kilde-ikon { width: 18px; height: 18px; color: var(--tekst); }
.akutt { display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-2); padding: 0 var(--sp-2) 0 var(--sp-1);
         height: 22px; vertical-align: 1px; border-radius: var(--r-1); background: var(--grafitt); color: var(--tekst-lys);
         font-size: var(--fs-xs); font-weight: var(--w-tung); text-transform: uppercase; letter-spacing: .06em; }
.akutt-tegn { width: 16px; height: 16px; border-radius: var(--r-1); background: var(--signal); color: var(--signal-pa);
              display: inline-flex; align-items: center; justify-content: center; }
.lim-felt { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-sm); }
.lim-svar:empty { display: none; }
.lim-svar { display: flex; align-items: center; gap: var(--sp-4); }

/* Settings */
.innst-flate { min-height: calc(100dvh - 56px); }
.innstillinger { max-width: 880px; margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-16); }
.innst-hode { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.innst-hode h1 { font-size: var(--fs-xl); line-height: 1.1; }
.innst-blokk { background: var(--flate); border: var(--kant); border-radius: var(--r-2); padding: var(--sp-6); }
.innst-blokk + .innst-blokk { margin-top: var(--sp-4); }
.innst-blokk h2 { color: var(--tekst-2); margin-bottom: var(--sp-3); }
.innst-rad { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.kodeboks pre { margin: 0; padding: var(--sp-4); background: var(--grafitt); color: var(--tekst-lys); border-radius: var(--r-2);
                font-size: var(--fs-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.lagret { margin: 0; font-size: var(--fs-sm); font-weight: var(--w-tung); }

.innst-del { font-size: var(--fs-lg); line-height: 1.1; margin: var(--sp-10) 0 var(--sp-4); }
.innstillinger > .integrasjoner + .integrasjoner { margin-top: var(--sp-10); }
.integ-hode { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
              margin-bottom: var(--sp-4); }
.integ-overskrift { font-size: var(--fs-lg); line-height: 1.1; }
.integ-takt { font-size: var(--fs-sm); font-weight: var(--w-tung); }
.integ-topp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.integ-navn { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); line-height: 1.2; }
.integ-ikon { width: 24px; height: 24px; color: var(--tekst); }
.integ-topp-hoyre { display: flex; align-items: center; gap: var(--sp-4); }
.integ-navn:focus { outline: none; }
.integ-navn:focus-visible { outline: var(--strek) solid var(--grafitt); outline-offset: 4px; }
.integ-av { margin-left: auto; }
.integ-status { font-size: var(--fs-sm); font-weight: var(--w-tung); }
.integ-feil { color: var(--feil); }
.integ-feil .form-trekant { border-bottom-color: var(--feil); }
.integ-fakta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.integ-fakta dt { color: var(--tekst-2); }
.integ-fakta dd { margin: 0; font-weight: var(--w-tung); }
.integ-feiltekst .form-trekant { border-bottom-color: var(--feil); margin-right: var(--sp-2); }
.integ-feiltekst { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: var(--strek) solid var(--feil);
                   background: var(--flate-2); color: var(--feil); font-weight: var(--w-tung); }
.integ-skjema { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5);
                border-top: var(--kant); }
.integ-felt-3 { grid-template-columns: 2fr 1fr 1fr; }
.integ-skjema .knapp:disabled { opacity: .45; cursor: not-allowed; }
.testsvar { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--betong);
            border-radius: var(--r-2); }
.testsvar-sum { font-weight: var(--w-tung); }
.kolonner { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); }
.kolonner li { padding: var(--sp-1) var(--sp-2); background: var(--flate); border: var(--kant); border-radius: var(--r-1); }
.testsvar-tabell td { height: 44px; }
.testsvar-tabell tr, .integ-logg tr { cursor: default; }
.valg-gruppe { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; }
.valg-gruppe legend { width: 100%; }
.valg { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-weight: var(--w-tung); cursor: pointer; }
.valg input { width: 20px; height: 20px; accent-color: var(--grafitt); }
.integ-logg { margin-top: var(--sp-5); }
.integ-logg summary { min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--w-tung);
                     cursor: pointer; list-style: none; }
.integ-logg summary::-webkit-details-marker { display: none; }
.integ-logg summary::before { content: "▸"; width: 1em; }
.integ-logg[open] summary::before { content: "▾"; }
.integ-logg .tabell td { height: 44px; }
.lenke { color: var(--tekst); font-weight: var(--w-tung); text-underline-offset: 3px; }

/* ── Office screens: card in two columns, so the timeline is visible without scrolling ── */
/* Two columns only when the PANE is wide enough (container query), not the window: next to the
   menu and the list, the card is ~650 px on a 1440 screen, and two columns there squeeze both. */
.kort-plass { container-type: inline-size; }
@container (min-width: 960px) {
  .kort-kolonner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

/* ── Phone fallback: one pane at a time ── */
@media (max-width: 899px) {
  .arbeidsflate { display: block; height: auto; }
  .liste { border-right: 0; }
  .liste-hode, .liste-verktoy, .tabell-ramme { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .kort-plass { display: none; }
  .viser-kort .liste { display: none; }
  .viser-kort .kort-plass { display: block; }
  .tilbake { display: inline-flex; }
  .kort { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .kol-kilde, .kol-tid, .firma, .topp-sti, .profil-navn { display: none; }
  .topp { padding: 0 var(--sp-2) 0 var(--sp-4); }
  .topp .ordmerke-tekst, .topp .profil { display: none; }
  .skjema-rutenett { grid-template-columns: 1fr; }
  .dialog-skjema, .midt-kort { padding: var(--sp-5); }
  .notat-rad { flex-direction: column; }
  .liste-hode { flex-wrap: wrap; }
  .innstillinger { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .integ-felt-3 { grid-template-columns: 1fr; }
  .integ-logg .tabell { font-size: var(--fs-xs); }
}

.ai { letter-spacing: 0.06em; }
.ai-i { font-family: Georgia, "Times New Roman", serif; font-weight: var(--w-tung); }