/* Bilagsflyt – utseende inspirert av Unimicro: mørk navy sidemeny, lys flate, blå aksent, rolige statusfarger */
:root {
  /* Friskere palett (UI-runde 2). Alle par målt mot WCAG AA: tekst ≥ 4,5:1, kanter/ikoner ≥ 3:1. */
  --bf-navy: #0f1f3d;        /* sidemeny mørk */
  --bf-navy-2: #17305a;
  --bf-navy-3: #1e3f73;
  --bf-blue: #2563eb;        /* primær – 5,2:1 mot hvit */
  --bf-blue-dark: #1d4ed8;   /* hover – 6,7:1 */
  --bf-sky: #0ea5e9;         /* aksent i logo/gradienter (brukes ikke som tekstfarge) */
  --bf-bg: #f5f7fb;
  --bf-border: #e2e8f0;
  --bf-text: #0f172a;
  --bf-muted: #5b6b80;       /* 5,4:1 */
  --bf-green: #15803d;       /* 5,0:1 */
  --bf-green-bg: #dcfce7;
  --bf-amber: #d97706;       /* 3,2:1 – striper/ikoner */
  --bf-amber-dark: #b45309;  /* 5,0:1 */
  --bf-yellow: #f5b400;
  --bf-red: #b91c1c;         /* 6,5:1 */
  --bf-teal: #0f766e;        /* 5,5:1 – bilagsmottak-ikon */
  --bf-side-w: 236px;
  --bf-radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bf-bg); color: var(--bf-text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 14px; }
a { color: var(--bf-blue); text-decoration: none; }
a:hover { color: var(--bf-blue-dark); text-decoration: underline; }

/* Layout */
.bf-app { display: flex; min-height: 100vh; }
.bf-side { width: var(--bf-side-w); background: linear-gradient(180deg, #0f1f3d 0%, #143564 100%); color: #cfd8e3; display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 100; overflow-y: auto; }
.bf-main { flex: 1; margin-left: var(--bf-side-w); min-width: 0; display: flex; flex-direction: column; }
.bf-top { height: 56px; background: #fff; border-bottom: 1px solid var(--bf-border); display: flex; align-items: center; padding: 0 24px; gap: 14px; position: sticky; top: 0; z-index: 50; }
.bf-title { font-size: 17px; font-weight: 600; margin: 0; color: var(--bf-navy); }
.bf-top-right { margin-left: auto; color: var(--bf-muted); font-size: 13px; }
.bf-content { padding: 24px; }
.bf-burger { display: none; background: none; border: 0; font-size: 22px; color: var(--bf-navy); }

/* Sidemeny */
.bf-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.bf-brand:hover { color: #fff; text-decoration: none; }
.bf-logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--bf-blue), var(--bf-sky)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.bf-nav { display: flex; flex-direction: column; padding: 6px 12px; gap: 2px; }
.bf-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #cfd8e3; font-weight: 500; }
.bf-nav a:hover { background: var(--bf-navy-2); color: #fff; text-decoration: none; }
.bf-nav a.active { background: linear-gradient(90deg, var(--bf-blue), #3b82f6); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.35); }
.bf-nav a i { font-size: 16px; width: 18px; text-align: center; opacity: .9; }
.bf-nav-sep { height: 1px; background: rgba(255,255,255,.08); margin: 8px 6px; }
.bf-pill { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.bf-pill-green { background: var(--bf-green); }
.bf-pill + .bf-pill { margin-left: 4px; }
/* Klientvelger + aktiv klient (kontekst). Sticky kontekst = brukeren skal alltid se hvilken klient som gjelder. */
.bf-klient { padding: 4px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; }
.bf-klient-sok { position: relative; }
.bf-klient-sok i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9fb0c5; font-size: 13px; pointer-events: none; }
.bf-klient-sok input { width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 8px; padding: 7px 10px 7px 30px; font-size: 13px; }
.bf-klient-sok input::placeholder { color: #9fb0c5; }
.bf-klient-sok input:focus { outline: none; border-color: var(--bf-sky); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(56,189,248,.25); }
.bf-klient-kort { position: relative; margin-top: 8px; padding: 10px 30px 10px 12px; border-radius: 10px; background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(56,189,248,.18)); border: 1px solid rgba(56,189,248,.35); }
.bf-klient-navn { color: #fff; font-weight: 700; font-size: 14px; line-height: 1.25; }
.bf-klient-meta { color: #cfd8e3; font-size: 11.5px; margin-top: 2px; }
.bf-klient-nullstill { position: absolute; right: 6px; top: 6px; color: #cfd8e3; font-size: 12px; padding: 4px 6px; border-radius: 6px; }
.bf-klient-nullstill:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.bf-klient-tom { color: #9fb0c5; font-size: 12px; padding: 8px 4px 2px; }
.bf-nav-klient { padding: 6px 0 0; }
.bf-nav-klient a { padding: 7px 12px; font-size: 13.5px; }
.bf-nav-klient a.bf-sub { padding-left: 26px; font-size: 13px; }
.bf-nav-hint { margin-left: auto; font-size: 10.5px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .4px; }
.bf-title-klient { font-weight: 500; color: var(--bf-blue); }
.bf-side-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.bf-user { color: #fff; margin-bottom: 6px; }
.bf-logout { color: #9fb0c5; }
.bf-logout:hover { color: #fff; text-decoration: none; }

/* Kort, tabeller, skjema */
.card { border: 1px solid var(--bf-border); border-radius: var(--bf-radius); box-shadow: 0 1px 2px rgba(16,38,63,.04); }
.card-body { padding: 18px 20px; }
.bf-stat { display: block; }
.bf-stat .label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--bf-muted); font-weight: 600; }
.bf-stat .value { font-size: 30px; font-weight: 700; color: var(--bf-navy); line-height: 1.2; }
.table { --bs-table-bg: #fff; border-color: var(--bf-border); }
.table thead th { background: #f8fafc; color: var(--bf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; border-bottom: 1px solid var(--bf-border); }
.table-sm td, .table-sm th { vertical-align: middle; padding: 8px 10px; }
.table-hover tbody tr:hover { --bs-table-bg-state: #f3f7fd; }
.table.bg-white { border: 1px solid var(--bf-border); border-radius: var(--bf-radius); overflow: hidden; }
h4, h5, h6 { color: var(--bf-navy); font-weight: 600; }
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--bf-blue); border-color: var(--bf-blue); }
.btn-primary:hover { background: var(--bf-blue-dark); border-color: var(--bf-blue-dark); }
.btn-outline-primary { color: var(--bf-blue); border-color: var(--bf-blue); }
.btn-outline-primary:hover { background: var(--bf-blue); border-color: var(--bf-blue); }
.form-control, .form-select { border-radius: 8px; border-color: #d5dce6; }
.form-control:focus, .form-select:focus { border-color: var(--bf-blue); box-shadow: 0 0 0 3px rgba(44,123,229,.15); }
.bf-flash { border-radius: var(--bf-radius); }

.bf-sort a { color: var(--bf-muted); text-decoration: none; white-space: nowrap; }
.bf-sort a:hover { color: var(--bf-navy); }
.bf-bulk { border-radius: var(--bf-radius); margin-top: 8px; }

/* ---------------------------------------------------------------- Status og type (UI-runde)
   Prinsipper: (1) WCAG AA – all tekst i merkelapper ≥ 4.5:1, kanter/ikoner ≥ 3:1.
   (2) Farge er aldri alene: hver status har ikon + tekst, hver type har ikon + tekst.
   (3) To ulike «ordforråd»: status = fylt pille, type = omrisset etikett (Gestalt: like ting leses som samme gruppe).
   (4) Nyanser valgt fra fargeblindsikre kombinasjoner (blå/oransje/grå; rød og grønn brukes aldri mot hverandre som eneste skille).
   (5) Én sterk farge: «Svar mottatt» er den eneste mørke, fylte pillen – det er det som krever handling nå.
   (6) Rader får en tynn statusstripe til venstre i stedet for full bakgrunnsfarge (mindre støy, samme informasjon). */
.bf-badge, .bf-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px 5px 8px; white-space: nowrap; vertical-align: middle; }
.bf-badge i, .bf-tag i { font-size: 12px; line-height: 1; }
.bf-status-mangler   { background: #fef3c7; color: #92400e; }                          /* 6.4:1 */
.bf-status-forespurt { background: #dbeafe; color: #1e40af; }                          /* 7.2:1 */
.bf-status-mottatt   { background: var(--bf-green); color: #fff; box-shadow: 0 1px 3px rgba(21,128,61,.35); } /* 5.0:1 */
.bf-status-sendt     { background: #e2e8f0; color: #334155; }                          /* 8.4:1 */
.bf-status-ignorert  { background: #f1f5f9; color: #475569; text-decoration: line-through; text-decoration-color: #94a3b8; } /* 6.9:1 */
.bf-tag { background: #fff; border: 1px solid #7c8ba1; color: var(--bf-text); font-weight: 500; }  /* kant 3.5:1 */
.bf-tag i { color: var(--bf-muted); }
.bf-type-bank i    { color: var(--bf-blue); }
.bf-type-innboks i { color: var(--bf-teal); }
.bf-type-bilag i   { color: #475569; }

/* Radstripe etter status (erstatter full radfarge) */
.table tbody tr[class*="status-"] td:first-child { border-left: 4px solid transparent; }
.table tbody tr.status-mangler   td:first-child { border-left-color: var(--bf-amber); }
.table tbody tr.status-forespurt td:first-child { border-left-color: var(--bf-blue); }
.table tbody tr.status-mottatt   td:first-child { border-left-color: var(--bf-green); }
.table tbody tr.status-mottatt   { --bs-table-bg: #f0fdf4; }
.table tbody tr.status-ignorert  { color: var(--bf-muted); }

/* Gamle klasser beholdes for sider som ikke er oppdatert ennå */
.badge { border-radius: 999px; font-weight: 600; padding: 4px 9px; }
.badge.status-mangler   { background: #fef3c7; color: #92400e; }
.badge.status-forespurt { background: #dbeafe; color: #1e40af; }
.badge.status-mottatt   { background: var(--bf-green); }
.badge.status-sendt     { background: #e2e8f0; color: #334155; }
.badge.status-ignorert  { background: #f1f5f9; color: #475569; }
.badge.type-bank, .badge.type-bilag, .badge.type-innboks { background: #fff; border: 1px solid #7c8ba1; color: var(--bf-text); font-weight: 500; }

/* Meny-piller: tall + ikon */
.bf-pill { display: inline-flex; align-items: center; gap: 4px; }
.bf-pill-green { background: var(--bf-green); }

/* Tall i «Å gjøre i dag» og tabeller: tabular tall så kolonner står rett */
.value, .bf-tall, td.text-end { font-variant-numeric: tabular-nums; }

/* Offentlig side + innlogging */
.bf-public { max-width: 560px; margin: 0 auto; padding: 24px 16px; }
.bf-public-head { display: flex; align-items: center; gap: 10px; color: var(--bf-navy); font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.upload-box { border: 2px dashed #c4cedb; border-radius: var(--bf-radius); padding: 22px; text-align: center; background: #fafbfd; }
.bf-login { max-width: 400px; margin: 80px auto; }

@media (max-width: 900px) {
  .bf-side { transform: translateX(-100%); transition: transform .2s; }
  .bf-app.side-open .bf-side { transform: none; }
  .bf-main { margin-left: 0; }
  .bf-burger { display: inline-block; }
  .bf-content { padding: 16px; }
}

/* Menygrupper (UX runde 5) */
.bf-nav-gruppe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.45); padding: 12px 14px 4px; }
.bf-nav-gruppe:first-child { padding-top: 4px; }

/* ---------------------------------------------------------------- Tabeller med klikkbare rader (UI-runde 2)
   Hele raden er klikkbar (stor treffflate, Fitts' lov), men affordansen er synlig: understreket primærlenke,
   pil-knapp ytterst til høyre og markør/bakgrunn ved hover. Knapper inne i raden stopper radklikket. */
.bf-radlenke tbody tr[data-href] { cursor: pointer; }
.bf-radlenke tbody tr[data-href]:hover { --bs-table-bg-state: #eff6ff; }
.bf-radlenke .bf-apne { color: var(--bf-muted); opacity: .55; transition: opacity .12s, transform .12s; }
.bf-radlenke tbody tr:hover .bf-apne { opacity: 1; color: var(--bf-blue); transform: translateX(2px); }
.bf-primaer { font-weight: 600; color: var(--bf-text); }
.bf-primaer:hover { color: var(--bf-blue); }
.bf-sekundaer { color: var(--bf-muted); font-size: 12px; }
.bf-kontakt i { width: 16px; color: var(--bf-muted); }
.bf-kontakt .mangler { color: var(--bf-red); font-weight: 600; }
.bf-sok { max-width: 300px; }
.bf-tall-celle { text-align: right; font-variant-numeric: tabular-nums; }
.bf-tall-celle a { text-decoration: none; padding: 2px 6px; border-radius: 6px; }
.bf-tall-celle a:hover { background: #eff6ff; }
.bf-tall-celle a.null { color: #cbd5e1; }
.bf-system { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--bf-muted); }

/* Oppdater-knapper per type (inc/oppdaterknapper.cfm) – samme plass i Kundeoversikt og forespørselslisten */
.bf-oppdater { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--bf-border); border-radius: var(--bf-radius); padding: 8px 10px; margin-bottom: 14px; }
.bf-oppdater-tittel { color: var(--bf-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-right: 4px; }
.bf-oppdater .btn { display: inline-flex; align-items: center; gap: 6px; }
.bf-oppdater-sist { font-weight: 400; opacity: .75; font-size: 11px; }
.bf-oppdater .btn-outline-primary .bf-oppdater-sist { color: var(--bf-muted); }
.bf-oppdater .btn-outline-primary:hover .bf-oppdater-sist { color: #fff; }