:root{
    --bg:#F2F6F5;
    --surface:#FFFFFF;
    --surface-2:#EDF3F1;
    --ink:#12191A;
    --ink-soft:#54646A;
    --ink-faint:#8B9A9E;
    --line:#DEE7E4;
    --line-strong:#C7D5D1;
    --accent:#0D7377;
    --accent-2:#14B8A6;
    --accent-ink:#FFFFFF;
    --accent-soft:#E1F5F3;
    --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
    --copper:#A9692C;
    --copper-soft:#F1E4D2;
    --good:#1D9A6C;
    --good-soft:#E3F5EC;
    --warn:#D97706;
    --warn-soft:#FDF0DE;
    --bad:#DC3545;
    --bad-soft:#FCE8EA;
    --info:#2563EB;
    --info-soft:#E3EBFD;
    --radius-sm:10px;
    --radius:14px;
    --radius-lg:18px;
    --shadow: 0 1px 2px rgba(18,25,26,.05), 0 10px 28px -16px rgba(18,25,26,.18);
    --shadow-lg: 0 24px 60px -20px rgba(18,25,26,.30), 0 8px 26px -10px rgba(18,25,26,.16);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12161A; --surface:#181F26; --surface-2:#1E2730;
      --ink:#E7ECEF; --ink-soft:#A7B0B8; --ink-faint:#6B7480;
      --line:#2A323C; --line-strong:#3A4550;
      --accent:#5CC9C2; --accent-2:#2DD4BF; --accent-ink:#0B1418; --accent-soft:#1B2E2C;
      --copper:#DBA35F; --copper-soft:#2C2013;
      --good:#59B98B; --good-soft:#17281F;
      --warn:#D3AA4C; --warn-soft:#2A2313;
      --bad:#E07A7A; --bad-soft:#2C1919;
      --info:#6FA8F0; --info-soft:#182236;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.5);
      --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.55), 0 10px 30px -10px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#12161A; --surface:#181F26; --surface-2:#1E2730;
    --ink:#E7ECEF; --ink-soft:#A7B0B8; --ink-faint:#6B7480;
    --line:#2A323C; --line-strong:#3A4550;
    --accent:#5CC9C2; --accent-2:#2DD4BF; --accent-ink:#0B1418; --accent-soft:#1B2E2C;
    --copper:#DBA35F; --copper-soft:#2C2013;
    --good:#59B98B; --good-soft:#17281F;
    --warn:#D3AA4C; --warn-soft:#2A2313;
    --bad:#E07A7A; --bad-soft:#2C1919;
    --info:#6FA8F0; --info-soft:#182236;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 24px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.55), 0 10px 30px -10px rgba(0,0,0,.4);
  }

  body{
    margin:0; color:var(--ink); min-height:100vh;
    background:
      radial-gradient(1100px 560px at 10% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
      radial-gradient(800px 460px at 105% 0%, color-mix(in srgb, var(--copper) 8%, transparent), transparent 60%),
      var(--bg);
    background-attachment: fixed;
  }
  *{box-sizing:border-box;}
  body{ font-family:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; }
  h1,h2,h3,.jakarta{font-family:'Plus Jakarta Sans','Public Sans',system-ui,sans-serif; text-wrap:balance; margin:0; letter-spacing:-0.01em;}
  .btn, .card, .stat-tile, input, select, .pill{ transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease, background .15s ease; }
  .num, input[type="number"], input[type="date"], .money, td.num, th.num{
    font-variant-numeric: tabular-nums;
    font-weight:600;
  }
  input, textarea, select{ font: inherit; color: inherit; background: transparent; border: none; outline: none; }
  input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
  }
  button{ font: inherit; cursor:pointer; }
  a{ color:var(--accent); }
  .ic{ flex:none; display:inline-block; vertical-align:-2px; }

  .toolbar{
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    display:flex; align-items:center; gap:10px; padding: 13px 24px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap;
    box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(18,25,26,.25);
  }
  .toolbar.hidden{ display:none; }
  /* Plattform-admin (deg) administrerer kunderegisteret, ikke tilbudsdata —
     de fanene gir ingen mening uten en kunde_id, så de skjules for admin. */
  .toolbar.platform-admin .seg [data-screen]:not([data-screen="admin"]){ display:none; }
  .toolbar .brand{ display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-0.01em; font-size:17px; margin-right:6px; }
  .toolbar .brand .mark{ width:32px;height:32px;border-radius:10px; background:var(--accent-grad); color:var(--accent-ink); display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:800; box-shadow:0 6px 14px -5px color-mix(in srgb, var(--accent) 55%, transparent); }
  /* Firmanavnet står helt for seg selv, som en egen "chip" — alltid med hele
     navnet synlig (ingen forkorting/"…"), og aldri sammen med brukerens navn i
     samme element. Hvem som er innlogget vises et helt annet sted i toolbaren
     (se .innlogget-som), som ren tekst uten boks rundt. */
  .firma-badge{ display:none; align-items:center; gap:10px; padding:6px 16px 6px 8px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--ink); margin-right:4px; white-space:normal; line-height:1.25; }
  .firma-badge svg{ color:var(--ink-faint); flex:none; }
  /* Logoen skal være tydelig synlig i toppmenyen, ikke et lite ikon — høyden
     styrer størrelsen (bredden følger automatisk), og toppmenyen har ingen
     fast høyde (bare padding), så den vokser naturlig for å gi plass. */
  .firma-badge-logo{ height:40px; width:auto; max-width:150px; object-fit:contain; border-radius:6px; flex:none; }
  .firma-badge.vis{ display:inline-flex; }
  .toolbar.platform-admin .firma-badge{ display:none !important; }
  .innlogget-som{ display:none; font-size:12.5px; color:var(--ink-faint); white-space:nowrap; margin-right:2px; }
  .innlogget-som.vis{ display:inline; }
  .toolbar.platform-admin .innlogget-som{ display:none !important; }
  /* "Bytt passord"-knappen i toppmenyen gjelder kun plattform-admin-kontoen
     (deg) — vises kun når toolbaren har platform-admin-klassen. */
  /* !important: uten dette taper display:none her mot .btn sin egen
     display:inline-flex lenger ned i arket (samme spesifisitet — .btn vinner
     på kildeplassering alene, og knappen ble stående synlig for ALLE roller,
     ikke bare plattform-admin). Samme mønster som .firma-badge/.innlogget-som
     over, som av tilsvarende grunn også trenger !important. */
  .platform-admin-only{ display:none !important; }
  .toolbar.platform-admin .platform-admin-only{ display:inline-flex !important; }
  /* Motsatt av platform-admin-only: vises for vanlige innloggede kunde-brukere
     (administrator eller ikke), skjules for deg som plattform-admin — den har
     sin egen "Bytt passord"-knapp (over) mot et annet endepunkt. */
  .kunde-passord-only{ display:none !important; }
  .toolbar:not(.platform-admin) .kunde-passord-only{ display:inline-flex !important; }
  .seg{ display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px; max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none; }
  .seg::-webkit-scrollbar{ display:none; }
  .seg button{ padding:8px 13px; border-radius:9px; background:transparent; border:none; color:var(--ink-soft); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none; transition: background .15s ease, color .15s ease; }
  .seg button.active{ background:var(--accent-grad); color:var(--accent-ink); box-shadow:0 3px 10px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
  .btn{ padding:8px 15px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  .btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow); }
  .btn.primary{ background:var(--accent-grad); color:var(--accent-ink); border-color:transparent; box-shadow:0 8px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent); }
  .btn.primary:hover{ opacity:.95; color:var(--accent-ink); transform:translateY(-1px); box-shadow:0 10px 22px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
  .btn:active{ transform:translateY(0); }
  .btn.small{ padding:5px 10px; font-size:12px; gap:5px; }
  .spacer{ flex:1 1 auto; }
  .save-indicator{ font-size:12px; color:var(--ink-faint); min-width:70px; text-align:right; display:inline-flex; align-items:center; gap:5px; justify-content:flex-end; }
  .save-indicator svg{ flex:none; }
  .save-indicator.err{ color:var(--bad); }
  .save-indicator.ok{ color:var(--good); }

  main{ max-width: 1180px; margin: 0 auto; padding: 24px 20px 80px; display:flex; flex-direction:column; gap:18px; width:100%; }
  /* KRITISK for mobil: en flex-child krymper aldri under sitt eget innholds
     naturlige bredde med mindre man sier fra eksplisitt (flex-items har
     min-width:auto som standard). Uten denne linjen tvinger EN bred tabell
     (f.eks. posttabellen på tilbudet, min-width:760px) hele siden — kortet,
     <main>, <body> — til å bli bredere enn skjermen og skrolle sidelengs i
     sin helhet, i stedet for at kun selve tabellen skroller i sin egen
     .table-wrap slik den skal. Denne ene regelen fjerner sideveis scrolling
     på hele siden på alle skjermer i appen. */
  main > *{ min-width:0; }
  .eyebrow{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px; }

  /* ---- list / dashboard ---- */
  .stat-row{ display:flex; gap:12px; flex-wrap:wrap; }
  .stat-tile{ flex:1 1 150px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .stat-tile:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
  .stat-tile .stat-label{ font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
  .stat-tile .stat-value{ font-size:22px; font-weight:800; margin-top:8px; font-family:'Plus Jakarta Sans',sans-serif; }
  .stat-tile .stat-value.good{ color:var(--good); }
  .stat-icon{ width:38px; height:38px; border-radius:11px; background:var(--surface-2); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex:none; }
  .stat-icon.good{ background:var(--good-soft); color:var(--good); }
  .stat-icon.warn{ background:var(--warn-soft); color:var(--warn); }
  .stat-icon.bad{ background:var(--bad-soft); color:var(--bad); }
  .stat-icon.accent{ background:var(--accent-soft); color:var(--accent); }

  .filterbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .search-wrap{ position:relative; flex:1 1 220px; display:flex; align-items:center; }
  .search-wrap svg{ position:absolute; left:13px; color:var(--ink-faint); pointer-events:none; }
  .filterbar input[type="search"]{ width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px 9px 36px; background:var(--surface); font-size:13.5px; }
  .filterbar select{ border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px; background:var(--surface); font-size:13px; font-weight:600; color:var(--ink-soft); }

  table{ width:100%; border-collapse:collapse; font-size:13px; }
  .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
  thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600; padding:8px 7px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  thead th.num{ text-align:right; }
  tbody td{ padding:7px 7px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr.list-row{ cursor:pointer; }
  tbody tr.list-row:hover{ background:var(--surface-2); }
  td.num{ text-align:right; }
  .row-title{ font-weight:600; }
  .row-sub{ color:var(--ink-faint); font-size:12px; margin-top:1px; }
  .row-actions{ display:flex; gap:6px; justify-content:flex-end; }
  .row-actions .btn.small{ padding:6px; }

  .pill{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
  .pill svg{ flex:none; }
  .pill.materiell{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line-strong); }
  .pill.arbeid{ background:var(--warn-soft); color:var(--warn); }
  .pill.kladd{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line-strong); }
  .pill.sendt{ background:var(--accent-soft); color:var(--accent); }
  .pill.gjennomgang{ background:var(--warn-soft); color:var(--warn); }
  .pill.akseptert{ background:var(--good-soft); color:var(--good); }
  .pill.avslaatt{ background:var(--bad-soft); color:var(--bad); }
  .pill.ferdig-prosjekt{ background:var(--info-soft); color:var(--info); }
  .pill.endring{ background:var(--accent-soft); color:var(--accent); }
  .pill.tilbud-type{ background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--line-strong); }
  .offentlig-btn-row{ display:flex; gap:12px; margin-top:4px; }
  .offentlig-btn-row .btn[disabled]{ cursor:default; }
  .em-indent{ color:var(--ink-faint); }
  .em-row .row-title{ color:var(--ink-soft); }

  select.status-select{ border:1px solid var(--line-strong); border-radius:99px; padding:4px 10px; font-size:12px; font-weight:600; }

  .mini-progress{ width:70px; height:6px; border-radius:99px; background:var(--line); overflow:hidden; display:inline-block; vertical-align:middle; }
  .mini-progress > span{ display:block; height:100%; background:var(--good); }

  .empty-state{ text-align:center; padding:34px 16px; color:var(--ink-faint); font-size:13.5px; }

  /* ---- edit screen ---- */
  .doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed var(--line-strong); }
  .doc-head h1{ font-size:22px; }
  .doc-head .sub{ color:var(--ink-soft); font-size:13px; margin-top:4px;}
  .doc-head .em-ref{ color:var(--accent); font-weight:600; }
  .em-historikk tbody tr:last-child td{ font-weight:700; border-top:2px solid var(--line-strong); }
  .kontraktssum-boks{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:14px; max-width:420px; }
  .kontraktssum-boks .sum-line{ font-size:13px; }
  .kontraktssum-boks .sum-line.total{ font-size:15px; padding-top:8px; }
  .meta-grid{ display:grid; grid-template-columns:repeat(3,auto); gap:2px 22px; text-align:right; }
  .meta-grid .row{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .meta-grid label{ font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}
  /* width:100% er nødvendig — uten den bruker <input> nettleserens innebygde
     standardbredde (typisk ~170-200px) i stedet for å fylle rutenettcellen,
     som på smale skjermer (tre slike input-er ved siden av hverandre) dytter
     .meta-grid — og dermed hele kortet/siden — bredere enn skjermen. Samme
     "krymper aldri under innholdets naturlige bredde"-fella som repeat(3,1fr)
     under løser for selve rutenett-kolonnene (se kommentaren der). */
  .meta-grid input{ text-align:right; font-size:13px; font-weight:600; width:100%; min-width:0; }
  .meta-grid input[readonly]{ color:var(--ink-soft); cursor:default; }

  .tilbud-logo{ display:block; max-height:52px; max-width:220px; object-fit:contain; object-position:left center; margin-bottom:10px; }
  .party-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .field{ margin-bottom:9px; }
  .field label{ display:block; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
  .field input, .field textarea, .field select{ width:100%; font-size:14.5px; padding:3px 0; border-bottom:1px solid transparent; }
  .field input:hover, .field textarea:hover{ border-bottom-color:var(--line-strong); }
  .field input:focus, .field textarea:focus{ border-bottom-color:var(--accent); outline:none; border-radius:0; }
  .field.party-name input{ font-size:16px; font-weight:600; }
  .field textarea{ resize:vertical; min-height:2.4em; line-height:1.5; }

  .section-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
  .section-title h2{ font-size:15px; }
  /* Statuspille/knapper/prosjektnr/kundekartotek-lenke ved siden av
     "Prosjektinformasjon"-tittelen — må kunne brekke om flere linjer på
     smale skjermer i stedet for å tvinge hele siden til å skrolle sidelengs. */
  .prosjekt-header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
  /* Prosjektnummer — vises som en kompakt, "badge"-aktig inputfelt ved siden av
     overskriften på prosjektsiden. Stabil referanse (P-1, P-2, …), atskilt fra
     både prosjektnavn (kan endres) og tilbudsnr (følger ett enkelt tilbud). */
  .prosjektnr-input{
    width:64px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
    color:var(--accent); background:var(--accent-soft); border:1px solid transparent; border-radius:99px;
    padding:5px 10px;
  }
  .prosjektnr-input:hover, .prosjektnr-input:focus{ border-color:var(--accent); outline:none; }
  .quickadd{ display:flex; gap:8px; flex-wrap:wrap; }
  .quickadd select{ border:1px solid var(--line-strong); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--surface-2); }

  table.items{ min-width:760px; }
  td input[type="text"]{ width:100%; min-width:90px; }
  td input[type="number"]{ width:64px; text-align:right; }
  td.enhet input{ width:34px; text-align:center; }
  /* Beskrivelsen er den viktigste kolonnen i posttabellen — den skal aldri
     klippe bort deler av teksten, uansett hvor lang den er eller hvor mange
     ekstra kolonner (Type/Innkjøp/Påslag) intern visning legger til ved siden
     av. Derfor et flerlinjers tekstfelt som bryter og vokser med innholdet
     (høyden settes automatisk i JS), i stedet for et enlinjes felt som bare
     skjuler resten av teksten når den er for lang for boksen. */
  table.items td.col-desc{ vertical-align:top; padding-top:9px; }
  table.items td.col-desc textarea{
    display:block; width:100%; min-width:220px; resize:none; overflow:hidden;
    line-height:1.4; padding:0; font:inherit; color:inherit; min-height:1.4em;
    white-space:pre-wrap; word-break:break-word;
  }
  table.items td select{ border:1px solid var(--line-strong); border-radius:6px; padding:4px 5px; font-size:12.5px; background:var(--surface); max-width:128px; }
  table.items td:first-child{ width:1%; white-space:nowrap; }
  table.items td.na-cell{ color:var(--ink-faint); }

  .kapittelbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
  .kapittelbar input[type="text"]{ border:1px solid var(--line-strong); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--surface); min-width:220px; }
  tr.kapittel-row td{ background:var(--surface-2); border-bottom:1px solid var(--line); padding:8px 10px; }
  .kapittel-row-inner{ display:flex; align-items:center; gap:12px; }
  .kapittel-row-inner select.kap-quickadd{ border:1px solid var(--line-strong); border-radius:8px; padding:5px 8px; font-size:12px; background:var(--surface); max-width:180px; color:var(--ink-soft); }
  .kapittel-name{ font-weight:600; font-size:13px; }
  .kapittel-sum{ color:var(--ink-soft); font-size:12px; font-weight:500; white-space:nowrap; }
  .rowsum{ font-weight:600; }
  .rm-btn{ background:transparent; border:none; color:var(--ink-faint); line-height:1; padding:6px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
  .rm-btn:hover{ color:var(--bad); background:var(--bad-soft); }

  .summary{ display:flex; justify-content:flex-end; margin-top:16px; }
  .summary-box{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:6px; }
  .sum-line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-soft); }
  .sum-line .num{ color:var(--ink); }
  .sum-line.total{ border-top:1px solid var(--line-strong); margin-top:6px; padding-top:10px; font-size:17px; font-weight:700; color:var(--ink); }
  .sum-line.total .num{ color:var(--accent); }

  .margin-panel{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-strong); display:flex; gap:14px; flex-wrap:wrap; }
  /* Bugfiks: elementets "hidden"-attributt (satt i JS ut fra intern/kunde-visning)
     ble overstyrt av regelen over — begge har samme spesifisitet, og siden
     .margin-panel{display:flex} står etter nettleserens innebygde [hidden]-regel
     vant den, slik at dekningsbidrag/innkjøp-panelet ble stående synlig (både på
     skjermen OG ved utskrift) selv i kundevisning. Denne regelen har høyere
     spesifisitet og vinner riktig. */
  .margin-panel[hidden]{ display:none !important; }
  .stat-tile .db-bar{ height:6px; border-radius:99px; background:var(--line); margin-top:8px; overflow:hidden; }
  .stat-tile .db-bar > span{ display:block; height:100%; background:var(--good); border-radius:99px; }
  .stat-value.warn{ color:var(--warn); } .stat-value.bad{ color:var(--bad); }

  .terms textarea{ width:100%; min-height:88px; line-height:1.55; font-size:12.5px; color:var(--ink-soft); }
  /* .print-mirror er en skjult kopi av innholdet i "Betingelser" og
     "Prosjektbeskrivelse" som bare vises ved utskrift/PDF (se @media print).
     En <textarea> er en "atomisk" boks for nettleserens utskriftsmotor — den
     kan ikke flyte/brytes over flere sider slik vanlig tekst kan, så innhold
     som ikke får plass på siden den havner på forsvinner sporløst i PDF-en
     uten feilmelding. Et vanlig <div> flyter derimot normalt over flere
     sider, så vi viser dette skjulte speil-elementet i stedet for selve
     tekstfeltet når vi skriver ut, slik at lang tekst aldri går tapt. */
  .print-mirror{ display:none; }
  .signrow{ display:flex; gap:40px; margin-top:24px; flex-wrap:wrap; }
  .sigline{ flex:1 1 200px; border-top:1px solid var(--line-strong); padding-top:6px; font-size:11px; color:var(--ink-faint); }
  .hint{ font-size:12px; color:var(--ink-faint); }

  /* ---- fremdriftsplan ---- */
  .gantt-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint); margin-bottom:6px; }
  .gantt-body{ display:flex; flex-direction:column; gap:8px; padding:4px 0; }
  .gantt-row{ display:flex; align-items:flex-end; gap:10px; }
  .gantt-label{ flex:0 0 150px; font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gantt-bar-col{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .gantt-bar-dates{ font-size:10.5px; color:var(--ink-faint); white-space:nowrap; }
  .gantt-bar-outer{ position:relative; height:16px; background:var(--surface-2); border-radius:5px; }
  .gantt-bar{ position:absolute; top:0; bottom:0; border-radius:5px; }
  .gantt-bar.ikke{ background:var(--line-strong); }
  .gantt-bar.pagar{ background:var(--accent); }
  .gantt-bar.ferdig{ background:var(--good); }
  .gantt-bar.draggable{ cursor:grab; touch-action:none; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .12s; }
  .gantt-bar.draggable:hover{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  .gantt-bar.draggable.dragging{ cursor:grabbing; z-index:3; box-shadow:0 2px 8px -1px rgba(0,0,0,.35); }
  .gantt-bar-handle{ position:absolute; top:0; bottom:0; width:9px; cursor:ew-resize; touch-action:none; }
  .gantt-bar-handle.left{ left:-3px; }
  .gantt-bar-handle.right{ right:-3px; }
  .gantt-today{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--copper); z-index:2; }

  .fase-list{ display:flex; flex-direction:column; margin-top:16px; }
  .fase-row-wrap{ border-bottom:1px solid var(--line); }
  .fase-row-wrap:last-child{ border-bottom:none; }
  .fase-row{ display:grid; grid-template-columns:minmax(0,1fr) 130px 130px 130px 32px; gap:8px; align-items:center; padding:8px 0; border-bottom:none; }
  .fase-row input, .fase-row select{ border:1px solid var(--line-strong); border-radius:6px; padding:5px 7px; font-size:13px; background:var(--surface); }
  .fase-row input[type="text"]{ min-width:0; }
  .fase-ansvarlige{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:0 0 10px; }
  .ansvarlig-chip{ display:inline-flex; align-items:center; gap:3px; background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:600; padding:3px 4px 3px 10px; border-radius:99px; }
  .ansvarlig-chip button{ background:transparent; border:none; color:inherit; display:inline-flex; padding:3px; cursor:pointer; opacity:.75; }
  .ansvarlig-chip button:hover{ opacity:1; }
  .fase-ansvarlige select{ border:1px dashed var(--line-strong); border-radius:99px; padding:3px 10px; font-size:11.5px; background:var(--surface); color:var(--ink-faint); }

  /* ---- bemanning ---- */
  .bemanning-grid{ border-collapse:separate; border-spacing:0; table-layout:fixed; }
  .bemanning-grid th{ white-space:nowrap; font-size:10.5px; padding:8px 6px; overflow:hidden; text-overflow:ellipsis; }
  .bemanning-grid th:first-child{ width:132px; }
  .bemanning-grid td{ white-space:nowrap; padding:6px; overflow:hidden; }
  .bemanning-navn{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bemanning-navn .row-sub{ font-weight:400; overflow:hidden; text-overflow:ellipsis; }
  /* overflow/text-overflow/white-space på selve <select>-en er det som får
     Chromium/Edge til å vise en lang prosjekt+adresse-tekst avkortet med "…"
     i stedet for å tvinge cellen (og dermed hele tabellen) bredere enn den
     tildelte kolonnebredden — ellers "lekker" innholdet ut som skrolling. */
  .bemanning-grid select{
    border:1px solid var(--line-strong); border-radius:6px; padding:4px 5px; font-size:11.5px;
    background:var(--surface); width:100%; max-width:100%; box-sizing:border-box;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ---- bemanning: Dag/Uke/Måned/År-visning ---- */
  .bem-tabs{ display:flex; gap:2px; background:var(--surface-2); border-radius:8px; padding:2px; }
  .bem-tab{ border:none; background:transparent; padding:6px 12px; font-size:12.5px; font-weight:600; border-radius:6px; color:var(--ink-soft); cursor:pointer; font-family:inherit; }
  .bem-tab:hover{ color:var(--ink); }
  .bem-tab.active{ background:var(--surface); color:var(--accent); box-shadow:var(--shadow); }
  .bem-th-dato{ font-weight:400; font-size:9.5px; color:var(--ink-faint); margin-top:1px; }
  th.bem-idag{ color:var(--accent); background:var(--accent-soft); border-radius:6px 6px 0 0; }
  /* Chip+select-kombinasjonen som brukes i Dag- og Uke-cellene: en fargelagt,
     lesbar chip (prosjektnavn + kundenavn i liten skrift under) med en usynlig
     <select> lagt oppå hele cellen, slik at klikk hvor som helst i chip-en
     åpner nedtrekksmenyen. Selektoren under er gjort ekstra spesifikk med
     vilje, slik at den alltid vinner over den generelle ".bemanning-grid
     select"-regelen over (som ellers ville tvunget frem en synlig kant/bakgrunn). */
  .bem-daycell{ position:relative; }
  .bem-chip{ border-radius:8px; padding:6px 8px; background:var(--surface-2); min-height:34px; display:flex; flex-direction:column; justify-content:center; gap:1px; pointer-events:none; }
  .bem-chip-empty{ color:var(--ink-faint); }
  .bem-chip-navn{ font-size:11.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bem-chip-tom{ font-weight:400; }
  .bem-chip-sub{ font-size:10px; font-weight:500; opacity:.75; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bemanning-grid td .bem-daycell select.bem-chip-select{
    position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
    border:none; border-radius:8px; opacity:0; cursor:pointer; background:transparent;
  }
  .bem-dagvisning td:last-child, .bem-ukevisning td{ min-width:118px; }
  /* "Delt dag" — cellen i Uke-visningen når en dag er delt opp i flere vakter
     med klokkeslett (settes opp i Dag-visningen). Låst for redigering her
     (ett enkelt nedtrekk kan ikke representere flere vakter), så cellen er en
     ren snarvei inn til Dag-visningen for den dagen. */
  .bem-chip-delt{
    border:1px dashed var(--line-strong); border-radius:8px; padding:6px 8px; min-height:34px;
    display:flex; flex-direction:column; justify-content:center; gap:1px; width:100%;
    background:var(--surface-2); color:var(--ink-soft); cursor:pointer; text-align:left; font-family:inherit;
  }
  .bem-chip-delt:hover{ border-color:var(--accent); color:var(--accent); }

  /* ---- Dag-visning: vakter med klokkeslett per ansatt ---- */
  .bem-dagvisning td:last-child{ min-width:420px; white-space:normal; overflow:visible; }
  .bem-vakt-liste{ display:flex; flex-direction:column; gap:6px; }
  .bem-vakt-rad{ display:flex; align-items:center; gap:6px; border-left:3px solid var(--line-strong); padding:2px 0 2px 8px; }
  .bem-vakt-tid{ border:1px solid var(--line-strong); border-radius:6px; padding:4px 6px; font-size:12.5px; background:var(--surface); width:92px; flex:none; }
  .bem-vakt-til{ color:var(--ink-faint); font-size:12px; flex:none; }
  .bem-vakt-prosjekt{ flex:1 1 auto; min-width:160px; border:1px solid var(--line-strong); border-radius:6px; padding:4px 6px; font-size:12.5px; background:var(--surface); }

  .bem-month-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .bem-month-ukedag{ text-align:center; font-size:10.5px; font-weight:600; color:var(--ink-faint); padding-bottom:4px; }
  .bem-month-day{ border:1px solid var(--line); border-radius:8px; padding:6px; min-height:56px; cursor:pointer; background:var(--surface); }
  .bem-month-day:hover{ border-color:var(--accent); }
  .bem-month-day.bem-utenfor{ opacity:.4; }
  .bem-month-day.bem-idag{ border-color:var(--accent); background:var(--accent-soft); }
  .bem-month-daynum{ font-size:11.5px; font-weight:600; }
  .bem-month-dots{ display:flex; gap:3px; margin-top:5px; flex-wrap:wrap; }
  .bem-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }

  .bem-year-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  .bem-year-card{ border:1px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; }
  .bem-year-card:hover{ border-color:var(--accent); }
  .bem-year-card.bem-idag{ border-color:var(--accent); }
  .bem-year-mndnavn{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
  .bem-year-tall{ font-size:22px; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif; }
  .bem-year-label{ font-size:10px; color:var(--ink-faint); margin-top:2px; }
  .bem-heat-0{ background:var(--surface); }
  .bem-heat-1{ background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  .bem-heat-2{ background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  .bem-heat-3{ background:color-mix(in srgb, var(--accent) 24%, var(--surface)); }

  /* ---- prisliste ---- */
  table.pricelist td input[type="text"]{ min-width:140px; }
  table.pricelist td.enhet input[type="text"]{ min-width:0; width:56px; }

  /* ---- kunderegister (admin) ---- */
  /* Overstyrer den generiske 140px-regelen over: firma/e-post/notater trenger
     mer plass til å vise hele teksten, telefon trenger mindre — slik at hele
     tabellen normalt får plass uten at man må skrolle sidelengs for å se den. */
  table.pricelist td.kunde-navn input[type="text"]{ min-width:145px; }
  table.pricelist td.kunde-orgnr input[type="text"]{ min-width:0; width:100px; }
  table.pricelist td.kunde-adresse input[type="text"]{ min-width:140px; }
  table.pricelist td.kunde-kontakt input[type="text"]{ min-width:110px; }
  table.pricelist td.kunde-epost input[type="text"]{ min-width:165px; }
  table.pricelist td.kunde-tlf input[type="text"]{ min-width:0; width:85px; }
  table.pricelist td.kunde-notater input[type="text"]{ min-width:110px; }
  .kunde-logo-cell{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .kunde-logo-thumb{ width:34px; height:34px; border-radius:6px; object-fit:contain; background:var(--surface-2); border:1px solid var(--line); padding:2px; }
  .paste-import{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line-strong); }
  .paste-import textarea{ width:100%; min-height:80px; font-family:'IBM Plex Mono',monospace; font-size:12px; border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; background:var(--surface-2); }

  /* ---- bildedokumentasjon (galleri på prosjektsiden) ---- */
  .bilde-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .bilde-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
  .bilde-thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; background:var(--surface-2); display:block; }
  .bilde-card-body{ padding:8px 9px; display:flex; flex-direction:column; gap:5px; }
  .bilde-caption-input{ width:100%; font-size:11.5px; border:none; background:transparent; padding:2px 0; border-bottom:1px dashed transparent; }
  .bilde-caption-input:hover{ border-bottom-color:var(--line-strong); }
  .bilde-caption-input:focus{ border-bottom-color:var(--accent); outline:none; }
  .bilde-meta{ display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--ink-faint); }
  .bilde-meta .row-actions{ display:flex; gap:2px; }
  .bilde-lightbox-overlay{ background:rgba(18,25,26,.9); flex-direction:column; }
  .bilde-lightbox-img{ max-width:min(90vw,900px); max-height:80vh; border-radius:8px; box-shadow:var(--shadow-lg); }
  .bilde-lightbox-caption{ color:#fff; font-size:14px; margin-top:14px; text-align:center; max-width:80vw; }
  .bilde-lightbox-close{ position:absolute; top:20px; right:24px; color:#fff; background:rgba(255,255,255,.14); border:none; border-radius:99px; padding:7px; cursor:pointer; display:flex; }
  .bilde-lightbox-close:hover{ background:rgba(255,255,255,.24); }

  footer.meta{ text-align:center; font-size:11.5px; color:var(--ink-faint); padding: 4px 20px 30px; }

  /* ---- felt-modus (forenklet mobilvisning for feltbrukere) ---- */
  .felt-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; gap:10px; }
  .felt-header-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--ink); }
  .felt-search{ padding:0 16px 10px; }
  .felt-search input{ width:100%; box-sizing:border-box; padding:11px 14px; border-radius:10px; border:1px solid var(--line); font-size:15px; background:var(--surface); }
  .felt-prosjekt-liste{ display:flex; flex-direction:column; gap:8px; padding:0 16px 20px; }
  .felt-prosjekt-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink); }
  .felt-prosjekt-row:hover{ border-color:var(--accent); }
  .felt-prosjekt-row .felt-prosjekt-navn{ font-weight:700; font-size:15px; }
  .felt-prosjekt-row .felt-prosjekt-sub{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
  .felt-prosjekt-aktiv{ text-align:center; padding:4px 16px 18px; }
  .felt-prosjekt-aktiv .felt-prosjekt-navn{ font-weight:800; font-size:19px; }
  .felt-prosjekt-aktiv .felt-prosjekt-sub{ font-size:13px; color:var(--ink-faint); margin-top:2px; }
  .felt-kamera-knapp{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:10px auto 0; width:min(320px, calc(100% - 32px)); aspect-ratio:1.3/1; border-radius:20px; background:var(--accent-grad); color:var(--accent-ink); font-weight:700; font-size:16px; cursor:pointer; box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
  .felt-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:20px 16px 0; }
  .felt-chip{ position:relative; width:54px; height:54px; border-radius:10px; overflow:hidden; }
  .felt-chip img{ width:100%; height:100%; object-fit:cover; display:block; }
  .felt-chip-ok{ position:absolute; right:-3px; bottom:-3px; background:var(--good); color:#fff; border-radius:99px; display:flex; padding:1px; }
  .felt-lenke-row{ display:flex; gap:8px; align-items:center; }
  .felt-lenke-row input{ flex:1; min-width:0; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); font-size:12.5px; font-family:monospace; }
  .felt-lenke-qr{ margin-top:14px; display:inline-block; padding:10px; background:#fff; border-radius:10px; border:1px solid var(--line); }

  /* ---- egne dialoger ---- */
  .tt-overlay{ position:fixed; inset:0; background:rgba(20,24,28,.45); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
  .tt-modal{ max-width:360px; width:100%; }
  .tt-modal p{ font-size:14px; line-height:1.5; color:var(--ink); }
  /* flex-wrap:wrap: de fleste dialogene har kun to knapper som alltid får
     plass på én linje selv på smale skjermer, men fakturagrunnlag-modalen
     (og eventuelle fremtidige dialoger) har tre — uten wrap ble de bare
     presset sammen og delvis skjult/utenfor synsfeltet i stedet for å
     brekke til en ny linje. */
  .tt-modal-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:4px; }
  .tt-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9999;
    background:var(--ink); color:var(--bg); font-size:13px; padding:10px 16px; border-radius:8px;
    box-shadow:var(--shadow); max-width:min(90vw,420px); text-align:center; }
  .tt-toast.err{ background:var(--bad); color:#fff; }

  /* ---- innlogging ---- */
  body.login-mode{
    background:
      radial-gradient(1000px 560px at 12% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
      radial-gradient(760px 480px at 108% 6%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 60%),
      var(--bg);
  }
  body.login-mode main{ min-height:100vh; max-width:none; display:flex; align-items:center; justify-content:center; padding:32px 20px; }
  body.login-mode footer.meta{ display:none; }
  .login-card{
    width:100%; max-width:452px; background:var(--surface); border:1px solid var(--line);
    border-radius:26px; box-shadow:var(--shadow-lg); padding:48px 44px 42px;
  }
  .login-mark{
    width:58px; height:58px; border-radius:17px; margin-bottom:22px;
    background:var(--accent-grad); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.02em;
    box-shadow:0 14px 28px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .login-card h1{ font-size:31px; font-weight:800; }
  .login-sub{ color:var(--ink-soft); font-size:15px; margin:8px 0 30px; }
  .login-card .field{ margin-bottom:18px; }
  .login-card .field label{ font-size:11.5px; font-weight:600; margin-bottom:7px; }
  .login-card .field input, .login-card .field select{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px;
    padding:13px 15px; font-size:15.5px; width:100%;
  }
  .login-card .field input:hover, .login-card .field select:hover{ border-color:var(--accent); }
  .login-card .field input:focus, .login-card .field select:focus{
    border-color:var(--accent); border-radius:12px; outline:none;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .login-card button[type="submit"]{
    padding:14px 16px; font-size:15.5px; font-weight:700; border-radius:13px; margin-top:8px;
  }
  .login-error{ color:var(--bad); font-size:13.5px; margin:-8px 0 18px; background:var(--bad-soft); padding:11px 14px; border-radius:11px; }
  @media (max-width: 520px){
    .login-card{ padding:36px 26px 32px; border-radius:20px; }
    .login-card h1{ font-size:26px; }
  }

  @media (max-width: 680px){
    .party-grid{ grid-template-columns:minmax(0,1fr); }
    .doc-head{ flex-direction:column; }
    /* minmax(0,1fr), IKKE bare 1fr — en grid-kolonne har samme standard
       "krymp aldri under innholdets naturlige bredde" som en flex-item
       (se kommentaren ved "main > *" lenger opp). Uten minmax(0,…) blir hver
       av de tre kolonnene her fortsatt minst like brede som et <input> sin
       innebygde standardbredde, og alle tre sammen sprenger skjermbredden. */
    .meta-grid{ text-align:left; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
    .meta-grid input{ text-align:left; }
    .summary{ justify-content:stretch; }
    .summary-box{ max-width:none; }
    .fase-row{ grid-template-columns:minmax(0,1fr); }
    .gantt-label{ flex-basis:100px; }
    .offentlig-btn-row{ flex-direction:column; }
    /* På smale skjermer gir "alt skal få plass"-oppsettet altfor smale
       ukekolonner til å være lesbare — la tabellen heller bli bred og
       skrollbar her (samme fallback som andre tabeller i appen). */
    .bemanning-grid{ table-layout:auto; }
    .bemanning-grid select{ width:auto; min-width:118px; }
  }

  /* ---- generell mobiltilpasning (telefon-bredde) ----
     Målet: ingen sideveis scrolling av SELVE SIDEN noe sted i appen (en
     tabell som er bredere enn skjermen skroller fortsatt internt i sin egen
     .table-wrap — det er med vilje, se kommentaren ved den klassen — men
     resten av layouten skal alltid få plass), og at knapper/felt/toppmeny
     er komfortable å bruke med fingeren i stedet for museklikk. */
  @media (max-width: 600px){
    main{ padding:14px 12px 70px; gap:14px; }
    .card{ padding:16px; border-radius:var(--radius); }
    .section-title{ gap:8px; }
    .section-title h2{ font-size:14px; }
    .prosjekt-header-actions{ gap:8px; width:100%; }

    /* Toppmenyen tok tidligere 4-5 rader i høyden på smal skjerm (logo,
       firmanavn-chip, fane-rad, "innlogget som"-tekst, knapperad) — det
       spiser mesteparten av skjermen før man ser noe innhold. Strammer inn
       luft/størrelser og fjerner det som er rent dekorativt/redundant her. */
    .toolbar{ padding:9px 12px; gap:8px; }
    .toolbar .brand{ font-size:15px; gap:7px; margin-right:2px; }
    .toolbar .brand .mark{ width:28px; height:28px; border-radius:8px; font-size:11px; }
    .firma-badge{ padding:5px 12px 5px 7px; font-size:12.5px; }
    .firma-badge-logo{ height:30px; max-width:100px; }
    /* Rent redundant på mobil — firmanavnet/navnet står allerede i badgen
       rett over, og plassen er for verdifull til å bruke på samme info to
       ganger. */
    .innlogget-som{ display:none !important; }
    .toolbar .btn.small{ padding:7px 9px; font-size:11.5px; }
    .save-indicator{ min-width:0; }

    /* Datoene i tilbudshodet (Dato/Gyldig til) blir så trange i en 3-spalters
       rad at nettleserens innebygde datovelger kutter av årstallet — én
       kolonne med full bredde per felt gir dem nok plass til å vises helt. */
    .meta-grid{ grid-template-columns:minmax(0,1fr); gap:10px; text-align:left; }
    .meta-grid input{ text-align:left; }

    .doc-head h1{ font-size:19px; }
    .kontraktssum-boks{ max-width:none; }
    .stat-tile{ flex-basis:100%; }

    /* Skroll-antydning: en tabell som er bredere enn skjermen (prisliste,
       brukerlisten, bemanningsuken osv.) skroller i sin egen .table-wrap —
       med vilje, se klassens definisjon — men uten noe visuelt hint ser det
       ut som innholdet bare er avkuttet i stedet for at det er mer å se ved
       å dra. mask-image virker på selve den synlige, oppklipte boksen (ikke
       det underliggende skrollede innholdet), så denne kanten "sitter fast"
       riktig uansett hvor langt man har skrolt — i motsetning til et
       ::after-element inni en overflow:auto-boks, som selv ville flyttet
       seg MED innholdet og dermed havnet feil sted. Klassen settes/fjernes
       fra JS ut fra faktisk skrollposisjon — se oppdaterTableWrapSkygge(). */
    .table-wrap.kan-skrolle-mer{
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 26px), transparent 100%);
      mask-image: linear-gradient(to right, black calc(100% - 26px), transparent 100%);
    }
  }

  @media print{
    .toolbar, .no-print{ display:none !important; }
    body, .bg-pad{ background:#fff !important; }
    .card{ box-shadow:none; border:1px solid #ccc; }
    main{ padding:0; max-width:none; }
    input, textarea{ border-bottom:none !important; }
    .table-wrap{ overflow:visible; }
    /* Feltene er redigerbare <select>-er på skjermen (bytt kapittel på en post
       osv.), men kunden trenger aldri å se at de er dropdown-menyer på et
       utskrevet/PDF-tilbud — fjern nettleserens innebygde stil slik at bare
       den valgte teksten vises, som et helt vanlig tekstfelt. */
    select{ -webkit-appearance:none; appearance:none; border:none !important; background:transparent !important; box-shadow:none !important; padding:2px 0 !important; color:inherit; font:inherit; }
    /* Sørg for at nettleseren faktisk skriver ut bakgrunnsfarger/aksentfarger
       (mange nettlesere lar «Bakgrunnsgrafikk» stå av som standard i
       utskriftsdialogen) — gir et friskere, mer moderne utskrevet tilbud. */
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
    .doc-head{ border-bottom:3px solid var(--accent) !important; }
    .doc-head .eyebrow{ color:var(--accent) !important; }
    table.items thead th{ background:var(--accent) !important; color:#fff !important; border-bottom:none !important; }
    tr.kapittel-row td{ background:var(--accent-soft) !important; }
    .kapittel-row .kapittel-name{ color:var(--accent) !important; }
    .sum-line.total{ color:var(--accent) !important; }
    .sum-line.total .num{ color:var(--accent) !important; }
    .tilbud-logo{ max-height:64px; }
    /* Unngå at korte, sammenhengende blokker (betingelser, summeringen) deles
       stygt over to sider midt i teksten — de skal heller flyttes i sin helhet
       til neste side hvis de ikke får plass i sin helhet på denne. Selve
       posttabellen skal fortsatt kunne brytes over flere sider (den kan bli
       for lang til å unngå det helt), men enkeltrader og en kapitteloverskrift
       skal ikke kappes midt i eller bli stående alene nederst på en side. */
    .card.terms{ break-inside:avoid; page-break-inside:avoid; }
    .em-historikk{ break-inside:avoid; page-break-inside:avoid; }
    .kontraktssum-boks{ break-inside:avoid; page-break-inside:avoid; }
    /* En <textarea> er en "atomisk" boks for utskriftsmotoren og kan ikke
       flyte over flere sider slik vanlig tekst kan — innhold som ikke får
       plass på siden den havner på forsvinner sporløst, uten varsel. Derfor
       skjuler vi selve tekstfeltet ved utskrift og viser i stedet en vanlig
       (flytende) kopi av teksten, se .print-mirror over. Dette gjelder
       "Betingelser" og "Prosjektbeskrivelse", som begge kan bli lange. */
    .terms textarea, textarea[data-bind="customer.prosjekt"]{ display:none !important; }
    .print-mirror{ display:block !important; white-space:pre-wrap; word-wrap:break-word; }
    .terms .print-mirror{ line-height:1.55; font-size:12.5px; color:var(--ink-soft); }
    .field .print-mirror{ font-size:14.5px; padding:3px 0; }
    .summary{ break-inside:avoid; page-break-inside:avoid; }
    table.items tr{ break-inside:avoid; page-break-inside:avoid; }
    tr.kapittel-row{ break-after:avoid; page-break-after:avoid; }
  }