/* Receipts — kompakt, tydelig, mobilvennlig */
:root {
  --bg: #f4f6f4;
  --card: #ffffff;
  --text: #1d2621;
  --muted: #64716a;
  --line: #dfe4df;
  --green: #1a7f4b;
  --green-dark: #14653c;
  --green-bg: #dcefe4;
  --amber: #9a5b08;
  --amber-bg: #f7ebcd;
  --red: #b3261e;
  --red-bg: #f7dcda;
  --blue: #1d4ed8;
  --reinv-bg: #e2e8f8;
  --reinv-ink: #35439b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
.hidden { display: none !important; }
.spacer { flex: 1; }
.hint { color: var(--muted); font-size: .88rem; }
.error { color: var(--red); }
.loading { color: var(--muted); }
.empty { color: var(--muted); background: var(--card); padding: 1rem; border-radius: 12px; }

/* ---------- login / enroll ---------- */
#login, #enroll {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  background: var(--card);
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(20, 40, 30, .1);
  width: min(380px, 92vw);
  text-align: center;
  display: grid;
  gap: .7rem;
}
.login-box h1 { margin: 0 0 .5rem; font-size: 1.5rem; }
.login-box p { margin: 0; color: var(--muted); }
.login-box input {
  width: 100%;
  font-size: 1.05rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.login-divider {
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}

/* ---------- layout ---------- */
header {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .8rem 1.2rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
header h1 { font-size: 1.15rem; margin: 0; }
main { max-width: 980px; margin: 0 auto; padding: 1.2rem 1rem 5rem; }
section { margin-bottom: 2.6rem; }
h2 { font-size: 1.12rem; margin: 0 0 .7rem; }
.count { color: var(--muted); font-weight: normal; }
/* Luften under overskriften må ligge på raden, ikke på h2: som flex-element
   med align-items:center havner h2-marginen inne i knappenes høyde, og da
   klistrer seksjoner MED knapper seg mot første rad mens de uten får luft. */
.sec-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sec-head h2 { margin-bottom: 0; }
/* Knappene hører sammen til høyre. Med space-between og tre barn havnet den
   ene svevende midt i overskriften. */
.sec-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Sticky header: uten dette legger scrollIntoView målet bak den */
#pipeline, section { scroll-margin-top: calc(var(--header-h, 60px) + 12px); }

/* ---------- account menu ---------- */
.account { position: relative; }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 40, 30, .14);
  min-width: 230px;
  padding: .4rem;
  z-index: 30;
}
.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: .95rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
.menu-item:hover { background: var(--bg); }

/* ---------- tabs / badges / buttons ---------- */
.tab {
  font-size: .92rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
}
.tab.active { background: var(--text); color: #fff; border-color: var(--text); }
.tab:disabled { opacity: .45; cursor: not-allowed; }

.badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .12rem .55rem;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.badge.ok { background: var(--green-bg); color: var(--green-dark); }
.badge.warn { background: var(--amber-bg); color: var(--amber); }
.badge.subtle { background: var(--line); color: var(--muted); }
.badge.reinv { background: var(--reinv-bg); color: var(--reinv-ink); }
.badge.age { background: var(--red-bg); color: var(--red); }

.btn {
  font-size: .95rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
}
.btn.big { font-size: 1.05rem; padding: .75rem 1.3rem; }
.btn.wide { width: 100%; }
.btn.small { padding: .12rem .5rem; font-size: .82rem; }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-dark); }
.btn.primary:disabled { opacity: .55; cursor: not-allowed; }
.btn.subtle { background: transparent; color: var(--muted); border-color: var(--line); }
.btn.subtle:hover { color: var(--text); background: var(--card); }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- filters ---------- */
.filters {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}
.filters input[type="search"] {
  flex: 2;
  min-width: 160px;
}
.filters input, .filters select {
  font-size: .92rem;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}

/* ---------- month groups + compact rows ---------- */
.month-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.1rem 0 .4rem;
  padding: 0 .2rem;
}
.month-name { font-weight: 700; font-size: .95rem; text-transform: capitalize; }
.month-sum { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

.row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .35rem;
}
.row.open { border-color: var(--green); }
.row-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  cursor: pointer;
  min-height: 2.4rem;
}
.row-line:hover { background: color-mix(in srgb, var(--card) 88%, var(--green) 12%); border-radius: 10px; }
.r-date { color: var(--muted); font-size: .82rem; white-space: nowrap; width: 5.4rem; }
.r-merchant { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-sug { flex-shrink: 0; }

.row-detail {
  border-top: 1px solid var(--line);
  padding: .9rem;
  display: grid;
  gap: .7rem;
}
.row-detail.dragging { outline: 2px dashed var(--blue); outline-offset: -4px; }
.row-detail .meta { color: var(--muted); font-size: .85rem; word-break: break-word; }
.suggestion { font-size: .95rem; }
.sug-text { font-weight: 600; }
.change-cat { font-size: .85rem; color: var(--blue); margin-left: .5rem; }
.ask { font-size: .92rem; color: var(--muted); }

.manual label, .descwrap label {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: .2rem;
}
select.category, .desc {
  width: 100%;
  font-size: .95rem;
  padding: .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}

/* ---------- attach ---------- */
.attach-zone { display: grid; gap: .5rem; }
.attach-cta {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: .7rem;
  text-align: center;
  cursor: pointer;
  color: var(--blue);
  font-size: .92rem;
}
.attach-cta:hover { border-color: var(--blue); }
.attach-cta b { font-weight: 700; }
.attach-zone input.receipt { display: none; }
.camera-btn { display: inline-block; margin-left: .6rem; }
.camera-btn input { display: none; }
.camera-wrap { display: none; }
@media (pointer: coarse) { .camera-wrap { display: inline; } }

.inbox-offer { font-size: .9rem; }
.inbox-toggle { color: var(--blue); font-weight: 600; }
.inbox-list { display: grid; gap: .3rem; margin-top: .4rem; }
.inbox-doc { text-align: left; font-weight: 500; }

.preview { display: flex; align-items: center; gap: .8rem; }
.preview-img {
  max-height: 110px;
  max-width: 180px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.preview-pdf { font-size: .92rem; }

.reinvwrap { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.reinv-toggle { font-size: .92rem; color: var(--muted); cursor: pointer; }
select.reinv-customer {
  font-size: .92rem;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
}

.skipform { display: flex; gap: .5rem; flex-wrap: wrap; }
.skipform input {
  flex: 1;
  min-width: 180px;
  font-size: .92rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ---------- pending / skipped ---------- */
.prow {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .35rem;
}
.prow-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  cursor: pointer;
  flex-wrap: wrap;
}
/* Fast bredde, ellers starter leverandørnavnene på ulik x fra rad til rad */
.p-date { color: var(--muted); font-size: .82rem; white-space: nowrap;
  min-width: 6.2rem; font-variant-numeric: tabular-nums; }
.p-merchant { font-weight: 600; }
.p-by { color: var(--muted); font-size: .82rem; }
.p-desc { color: var(--muted); flex: 1; min-width: 120px; font-size: .9rem; }
.p-amount { font-weight: 600; white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.prow-detail {
  border-top: 1px solid var(--line);
  padding: .8rem;
  display: grid;
  gap: .7rem;
}
.p-info .p-desc-full { font-weight: 600; }
.p-meta { color: var(--muted); font-size: .88rem; }
.receipt-thumb {
  max-height: 160px;
  max-width: 240px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  justify-self: start;
}
.receipt-link { color: var(--blue); font-weight: 600; }

/* ---------- re-invoice ---------- */
.reinv-group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-bottom: .8rem;
}
.reinv-head { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: .4rem; flex-wrap: wrap; gap: .5rem; }
.reinv-row {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .3rem 0;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  flex-wrap: wrap;
}
.reinv-row .p-desc { flex: 1; }
.reinv-group > .btn { margin-top: .7rem; }

/* ---------- rules ---------- */
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: .8rem; }
#rulesTable, #custTable, #reinvTable { border-collapse: collapse; width: 100%; font-size: .88rem; }
#rulesTable th, #custTable th, #reinvTable th {
  text-align: left;
  padding: .5rem .55rem;
  border-bottom: 2px solid var(--line);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
#rulesTable td, #custTable td, #reinvTable td { padding: .3rem .35rem; border-bottom: 1px solid var(--line); }
#rulesTable input, #rulesTable select, #custTable input, #custTable select, #reinvTable select {
  font-size: .88rem;
  padding: .3rem .4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  width: 100%;
  min-width: 4rem;
}
#rulesTable td:nth-child(1) input { min-width: 9rem; }
#rulesTable td:nth-child(5) input { min-width: 12rem; }
.cust-name { font-weight: 600; white-space: nowrap; }

/* Viderefakturerings-gjennomgang */
.rv-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rv-tools input, .rv-tools select {
  font-size: .92rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.rv-tools input { flex: 1 1 14rem; }
#reinvTable td.rv-amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#reinvTable td.rv-date { white-space: nowrap; color: var(--muted); }
#reinvTable td.rv-desc { max-width: 28rem; }
#reinvTable td.rv-acct { color: var(--muted); white-space: nowrap; }
#reinvTable tr.rv-queued td { background: #f3f5fc; }
#reinvTable tr.rv-invoiced td { color: var(--muted); }
#reinvTable tr.saving select { opacity: .5; }

/* ---------- toasts / celebrate ---------- */
#toasts {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: .5rem;
  z-index: 100;
  width: min(440px, 92vw);
}
.toast {
  background: var(--text);
  color: #fff;
  border-radius: 12px;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  animation: toast-in .25s ease-out;
  font-size: .93rem;
}
.toast.gone { opacity: 0; transition: opacity .4s; }
.toast-action {
  background: none;
  border: none;
  color: #7fd7a8;
  font-weight: 700;
  font-size: .93rem;
  cursor: pointer;
  white-space: nowrap;
}
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

#celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  pointer-events: none;
  z-index: 90;
}
#celebrate.go { animation: pop 1.6s ease-out forwards; }
@keyframes pop {
  0% { transform: scale(.3); opacity: 0; }
  30% { transform: scale(1.3); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  #celebrate.go { animation: none; opacity: 0; }
  .wz-fill, .wz-fill.pop { transition: none; animation: none; }
  .wz-flag.lit { animation: none; }
  .wz-chip.streak { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- mobil ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .r-date { width: auto; }
  .row-line { flex-wrap: wrap; row-gap: .15rem; }
  .r-merchant { flex-basis: 100%; order: -1; }
  .btn.big { width: 100%; }
  /* 16px hindrer iOS Safari i å auto-zoome når felt får fokus */
  input, select, textarea { font-size: 16px !important; }
}

/* --- Pipeline: hvem gjør hva, og hvor mange står i hvert steg --------- */
/* 1px gap på en linjefarget bakgrunn i stedet for kantlinjer per fane: da får
   også de brutte radene på mobil en skillelinje, uten å vite hvor de brytes. */
.pipeline {
  display: flex; gap: 1px; flex-wrap: wrap;
  margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--line);
}
.pipe-step {
  flex: 1 1 140px; min-width: 140px; padding: 10px 12px;
  position: relative;
}
.pipe-who { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.pipe-what { font-size: 13px; margin-top: 1px; }
.pipe-n { font-size: 21px; font-weight: 650; line-height: 1.1; margin-top: 4px; }
.pipe-step.mine { background: var(--accent-soft, #eef4ff); }
.pipe-step.mine .pipe-who { opacity: .85; font-weight: 650; }
.pipe-step.idle .pipe-n { opacity: .35; }

/* Valgt steg i pipelinen — fanen som styrer hva som vises under. En stripe
   alene er for svakt når raden er det eneste stedet tallene står: de uvalgte
   senkes ned i bakgrunnsfargen, den valgte står igjen som et ark. */
.pipe-step { cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: var(--bg); border-top: 0; border-bottom: 0; border-left: 0; }
.pipe-step:hover { background: var(--hover, rgba(0,0,0,.03)); }
.pipe-step.active {
  background: var(--card);
  box-shadow: inset 0 -3px 0 var(--accent, #2f6feb);
}
.pipe-step.active .pipe-who { font-weight: 650; opacity: 1; }
.pipe-step.active .pipe-n { opacity: 1; }

/* --- Godkjenningswizard: bilaget stort, konteringen ved siden av ----------- */
body.wz-open { overflow: hidden; }

#wizard {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.wz-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.wz-progress { font-weight: 600; }

/* Progresjon: en linje som fylles i takt med bunken er mer motiverende enn
   «2 of 50». Fyllet skifter farge for hver fjerdedel, stripene beveger seg
   så det ser «levende» ut, og flaggene tennes når man passerer dem. */
.wz-prog { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.wz-prog-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wz-chip {
  font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
  white-space: nowrap; line-height: 1.5;
}
.wz-chip.done { background: var(--green-bg); color: var(--green-dark); }
.wz-chip.left { background: var(--amber-bg); color: var(--amber); }
.wz-chip.streak { background: #ffe2c2; color: #b4420b; animation: wz-flame .9s ease-in-out infinite alternate; }
@keyframes wz-flame { from { transform: scale(1); } to { transform: scale(1.06); } }
.wz-pace { color: var(--muted); font-size: .8rem; white-space: nowrap; margin-left: auto; }
.wz-pace.milestone { color: var(--green-dark); font-weight: 700; }

.wz-track {
  position: relative; height: 18px; border-radius: 999px;
  background: #e6ebe7; overflow: visible;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  margin-right: 12px; /* plass til målflagget som stikker utenfor */
}
.wz-fill {
  position: relative; height: 100%; width: 0; min-width: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: flex-end;
  transition: width .5s cubic-bezier(.2, .8, .2, 1), background-color .5s;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.22) 0 8px, rgba(255,255,255,0) 8px 16px);
  background-size: 200% 100%;
  animation: wz-stripes 1.4s linear infinite;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 10px var(--wz-glow, transparent);
}
@keyframes wz-stripes { from { background-position: 0 0; } to { background-position: 22.6px 0; } }
/* Fargen følger fasen: blå start, så grønnere, gull mot slutten */
.wz-track.phase-0 .wz-fill { background-color: #3b82f6; --wz-glow: rgba(59,130,246,.45); }
.wz-track.phase-1 .wz-fill { background-color: #0ea5a4; --wz-glow: rgba(14,165,164,.45); }
.wz-track.phase-2 .wz-fill { background-color: var(--green); --wz-glow: rgba(26,127,75,.5); }
.wz-track.phase-3 .wz-fill { background-color: #d97706; --wz-glow: rgba(217,119,6,.55); }
.wz-pct {
  color: #fff; font-size: .72rem; font-weight: 700; padding: 0 .5rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.25); white-space: nowrap;
}
.wz-fill.narrow .wz-pct { position: absolute; left: 100%; color: var(--muted); text-shadow: none; }
.wz-fill.pop { animation: wz-stripes 1.4s linear infinite, wz-pop .5s ease; }
@keyframes wz-pop {
  0% { filter: brightness(1); transform: scaleY(1); }
  40% { filter: brightness(1.35); transform: scaleY(1.25); }
  100% { filter: brightness(1); transform: scaleY(1); }
}
.wz-flag {
  position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.85);
  font-size: 15px; line-height: 1; filter: grayscale(1); opacity: .45;
  transition: opacity .3s, filter .3s, transform .3s; pointer-events: none;
  z-index: 1;
}
.wz-flag.lit { filter: none; opacity: 1; transform: translate(-50%, -50%) scale(1.15); animation: wz-bounce .6s ease; }
@keyframes wz-bounce {
  0% { transform: translate(-50%, -50%) scale(.6); }
  50% { transform: translate(-50%, -50%) scale(1.6) rotate(-10deg); }
  100% { transform: translate(-50%, -50%) scale(1.15); }
}
.wz-hint { color: var(--muted); font-size: .8rem; margin-left: auto; }

.wz-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 26rem);
  min-height: 0;
}

.wz-doc {
  background: #2b312d;
  display: flex;
  min-height: 0;
  padding: .5rem;
}
#wzDoc { flex: 1; display: flex; min-height: 0; }
#wzDoc iframe { flex: 1; border: 0; border-radius: 8px; background: #fff; }
#wzDoc img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
}
.wz-nodoc { margin: auto; color: #cfd6d1; }

.wz-side {
  background: var(--card);
  border-left: 1px solid var(--line);
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.wz-merchant { font-size: 1.15rem; font-weight: 600; }
.wz-amount { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wz-sub { color: var(--muted); font-size: .88rem; }
.wz-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

.wz-fields { display: grid; grid-template-columns: 6.5rem 1fr; gap: .45rem .75rem; margin: 0; }
.wz-fields dt { color: var(--muted); font-size: .88rem; }
.wz-fields dd { margin: 0; overflow-wrap: anywhere; }

.wz-edit { display: flex; flex-direction: column; gap: .6rem; }
.wz-savestate { text-align: right; transition: opacity .3s; }
.wz-savestate.ok { color: var(--green-dark); }
.wz-savestate.busy { color: var(--muted); }
.wz-edit label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--muted); }
.wz-edit input, .wz-edit select {
  font-size: 16px; /* hindrer iOS-autozoom */
  padding: .45rem .5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

/* Kontonavnet under kontofeltet — bekrefter at 7140 faktisk er reise */
.field-hint { min-height: 1.1em; font-size: .8rem; color: var(--muted); }
.field-hint.unknown { color: var(--red); }

/* Godkjenn er den knappen du trykker 40 ganger — den skal være størst og
   først, og de destruktive skal ikke ligge inntil den */
.wz-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; }
.wz-actions #wzApprove { flex: 1 1 100%; font-size: 1.05rem; padding: .7rem 1rem; }
.wz-actions #wzReject { margin-left: auto; color: var(--red); }

@media (max-width: 780px) {
  .wz-body { grid-template-columns: 1fr; grid-template-rows: minmax(35vh, 45vh) 1fr; }
  .wz-side { border-left: 0; border-top: 1px solid var(--line); }
  .wz-hint { display: none; }
}

/* Advarsel fra den som førte. Den skal ikke kunne overses — derfor egen blokk
   øverst i panelet, ikke enda et lite merke i rekken av merker. */
.wz-warning {
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.wz-warning-head { font-weight: 650; color: var(--amber); }
.wz-warning p { margin: 0; overflow-wrap: anywhere; }
.wz-warning label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.wz-warning select, .wz-warning input[type="text"] {
  font-size: 16px; padding: .4rem .5rem; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--text);
}
.private-confirm-wrap { flex-direction: row !important; align-items: flex-start; gap: .5rem !important; }
/* Hurtigvalg for viderefakturering: de faste kundene som knapper, resten
   bak «Other…». Aktiv knapp har viderefakturerings-fargen. */
.reinv-pick { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.reinv-pick .btn { padding: .2rem .6rem; font-size: .84rem; white-space: nowrap; }
.reinv-pick .btn.active { background: var(--reinv-ink); border-color: var(--reinv-ink); color: #fff; }
.reinv-pick .btn.active::before { content: '🔁 '; }
.reinv-pick select { font-size: .84rem; padding: .2rem .35rem; border: 1px solid var(--line); border-radius: 6px; max-width: 11rem; }
.reinv-pick.saving { opacity: .5; pointer-events: none; }