#Factuurherkenning {
  --fh-border: #d7dee8;
  --fh-border-soft: #e6ebf2;
  --fh-muted: #627186;
  --fh-heading: #1f2a37;
}

#Factuurherkenning .factuurherkenning-titlebar { margin-bottom: 14px; }
#Factuurherkenning .factuurherkenning-titlebar h1 { margin-bottom: 4px; }
#Factuurherkenning .factuurherkenning-titlebar p { max-width: 760px; margin: 0; color: var(--fh-muted); font-size: 12px; }

#Factuurherkenning .fh-shell {
  background: #fff;
  border: 1px solid var(--fh-border);
  border-radius: 8px;
  padding: 16px;
}

#Factuurherkenning .fh-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--fh-border-soft);
}
#Factuurherkenning .fh-kop h2 { margin: 0; color: var(--fh-heading); font-size: 16px; }
#Factuurherkenning .fh-kop span { color: var(--fh-muted); font-size: 12px; }

#Factuurherkenning .fh-stap { margin-bottom: 14px; font-size: 13px; }

#Factuurherkenning .fh-paneel {
  border: 1px solid var(--fh-border-soft);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
#Factuurherkenning .fh-paneel h3 { margin: 0 0 8px; font-size: 14px; color: var(--fh-heading); }
#Factuurherkenning .fh-uitleg { margin: 0 0 8px; font-size: 12px; color: var(--fh-muted); }

/* Factuurweergave met klikbare markeringen */
#Factuurherkenning .fh-viewer {
  max-height: 80vh;
  overflow: auto;
  background: #eef1f5;
  border: 1px solid var(--fh-border);
  border-radius: 8px;
  padding: 8px;
}
#Factuurherkenning .fh-pagina {
  position: relative;
  margin: 0 auto 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
#Factuurherkenning .fh-pagina canvas { display: block; width: 100%; height: 100%; }
#Factuurherkenning .fh-overlay { position: absolute; inset: 0; }

#Factuurherkenning .fh-token {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 1px dashed rgba(180, 120, 0, .75);
  background: rgba(255, 213, 79, .28);
  border-radius: 3px;
  cursor: pointer;
}
#Factuurherkenning .fh-token:hover { background: rgba(255, 213, 79, .55); }
#Factuurherkenning .fh-token.fh-gekozen { border-style: solid; border-width: 2px; }

/* Kleur per veld (ook gebruikt in de lijst met aangewezen waarden) */
#Factuurherkenning .fh-v-factuurnummer { --fh-kleur: 13, 110, 253; }
#Factuurherkenning .fh-v-factuurdatum { --fh-kleur: 25, 135, 84; }
#Factuurherkenning .fh-v-vervaldatum { --fh-kleur: 32, 201, 151; }
#Factuurherkenning .fh-v-totaal_incl { --fh-kleur: 220, 53, 69; }
#Factuurherkenning .fh-v-totaal_btw { --fh-kleur: 253, 126, 20; }
#Factuurherkenning .fh-v-termijnbedrag { --fh-kleur: 111, 66, 193; }
#Factuurherkenning .fh-v-betalingskenmerk { --fh-kleur: 214, 51, 132; }
#Factuurherkenning .fh-v-negeer { --fh-kleur: 108, 117, 125; }
#Factuurherkenning .fh-v-kenmerk { --fh-kleur: 0, 150, 200; }

#Factuurherkenning .fh-token[class*="fh-v-"] {
  background: rgba(var(--fh-kleur), .28);
  border-color: rgb(var(--fh-kleur));
}
#Factuurherkenning .fh-v-negeer.fh-token { background: repeating-linear-gradient(45deg, rgba(108,117,125,.25), rgba(108,117,125,.25) 4px, rgba(108,117,125,.1) 4px, rgba(108,117,125,.1) 8px); }

#Factuurherkenning .fh-toegewezen { list-style: none; margin: 0; padding: 0; }
#Factuurherkenning .fh-toegewezen li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
#Factuurherkenning .fh-badge {
  display: inline-block;
  min-width: 120px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  background: rgb(var(--fh-kleur, 108, 117, 125));
}
#Factuurherkenning .fh-waarde { flex: 1; word-break: break-all; }

#Factuurherkenning .fh-testtabel td, #Factuurherkenning .fh-testtabel th { font-size: 12px; }
#Factuurherkenning .fh-ok { color: #198754; }
#Factuurherkenning .fh-fout { color: #dc3545; }
#Factuurherkenning .fh-waarschuwing { color: #b45309; }

#Factuurherkenning .fh-kenmerk-groep { margin-bottom: 10px; font-size: 13px; }
#Factuurherkenning .fh-kenmerk-groep b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--fh-muted); }

/* Keuzerondje en tekst op één lijn. De globale regel "select, input, textarea" in zoboekhouden.css
   geeft elke input display:block, 90% breedte en marges; dat zet het rondje los van zijn label. */
#Factuurherkenning .fh-kenmerk-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
#Factuurherkenning .fh-kenmerk-rij input[type="radio"] {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
#Factuurherkenning .fh-kenmerk-rij label {
  margin: 0;
  cursor: pointer;
  line-height: 1.3;
  word-break: break-all;
}
/* Zelfde globale regel geeft ook de tekstvelden en het bestandsveld een marge links (5%) */
#Factuurherkenning input.form-control,
#Factuurherkenning select.form-select {
  margin-left: 0;
  margin-bottom: 0;
}

/* Het invulveld eronder met dezelfde breedte als de rest van het paneel */
#Factuurherkenning .fh-kenmerk-groep .fh-kenmerk-hand {
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
}

/* Het menu hangt direct onder <body>, dus niet onder #Factuurherkenning */
.fh-keuze {
  position: fixed;
  z-index: 2000;
  width: 210px;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  padding: 6px;
}
.fh-keuze .fh-keuze-titel { padding: 2px 8px 6px; font-size: 12px; color: #627186; word-break: break-all; }
.fh-keuze button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 13px;
}
.fh-keuze button:hover { background: #eef6ff; }
.fh-keuze button.fh-keuze-wis { color: #dc3545; }

/* Globaal geeft zoboekhouden.css elke button[type=button] een blauwe hover en een roze, ingezoomde active.
   Hier worden de markeringen, het keuzemenu en de knoppen van de wizard daarvan losgehaald. */
#Factuurherkenning .fh-token:active { transform: none !important; }
#Factuurherkenning .btn:active, #fhKeuze button:active { transform: none !important; }
#Factuurherkenning .btn-success:hover { background-color: #157347; }
#Factuurherkenning .btn-success:active { background-color: #146c43 !important; }
#Factuurherkenning .btn-primary:hover { background-color: #0b5ed7; }
#Factuurherkenning .btn-primary:active { background-color: #0a58ca !important; }
#Factuurherkenning .btn-outline-secondary:hover { background-color: #6c757d; color: #fff; }
#Factuurherkenning .btn-outline-secondary:active { background-color: #5c636a !important; color: #fff; }
#Factuurherkenning .fh-wis:hover { background-color: #6c757d; color: #fff; }
#fhKeuze button:hover { background-color: #eef6ff; }
#fhKeuze button:active { background-color: #dbeafe !important; }
#fhKeuze button.fh-keuze-wis:hover { background-color: #fdecee; }
#Factuurherkenning .btn-outline-danger:hover { background-color: #dc3545; color: #fff; }
#Factuurherkenning .btn-outline-danger:active { background-color: #bb2d3b !important; color: #fff; }

/* Samengevoegde waarde (meerdere delen uit de PDF als één waarde): doorlopende rand */
#Factuurherkenning .fh-token.fh-samengesteld:not([class*="fh-v-"]) {
  border: 2px solid rgba(0, 150, 200, .9);
  background: rgba(0, 150, 200, .18);
}