/* ===========================================================================
 * toevoegen-knop.css — de stijl van "Toevoegen aan project" (#1300)
 * ---------------------------------------------------------------------------
 * DOELPAD  public/portefeuillemodules/toevoegen-knop.css
 *
 * GEEN ENKELE KLEURWAARDE IN DIT BESTAND
 *   Alles komt uit de tokens van kaartmodules/kaart-viewer.css -- daar staat het
 *   palet Kalk mét de contrasttabel waarin per vlak is nagemeten of de tekst
 *   AA haalt. Een tweede plek met dezelfde hexwaarden zou die tabel laten liegen
 *   zodra iemand aan het palet draait. Poort 3 van
 *   qa/portefeuille-pagina-contract.test.mjs scant hierop.
 *
 *   Gevolg: elke pagina met deze knop moet kaart-viewer.css laden. Dat gold al
 *   voor /kaart en de portefeuillepagina's; /zoeken, /pand, /investeren en
 *   /matchmaking laden hem er sinds #1300 bij. Dat stylesheet raakt niets van
 *   die pagina's aan -- het bevat alleen `:root`, `@font-face`, `.kv-*` en
 *   `#kv-*`/`#map`, en geen van die vier pagina's draagt zo'n id (nagelopen
 *   20 augustus 2026).
 *
 *   Waarom niet in portefeuille.css erbij: dat blad draagt `*` en `html, body`
 *   -- paginaregels die op /zoeken en /pand hun eigen opmaak zouden overrulen.
 *
 * ELKE KLEUR OP EEN KNOP OF VELD GAAT VIA --tvp-kleur
 *   kaart-viewer.css draagt `#kv-app button { color: inherit }` als reset voor
 *   de knoppen van de kaart. Die selector wint met zijn id van élke
 *   klasse-regel hier, dus ook van deze. Gevolg op 21 augustus 2026: de
 *   projectnamen in het menu erfden de lichte kopbandkleur en waren onzichtbaar
 *   op het lichte menu.
 *
 *   Daarom staat de kleur in een custom property. Die erft gewoon, en
 *   kaart-viewer.css heeft er één regel die hem doorgeeft -- de waarden blijven
 *   hier staan, de kaart weet alleen dat er een variabele is.
 *
 * DE DONKERE VARIANT
 *   In de paneelkop van de kaart staat de knop op donkergroen. Die krijgt
 *   `.tvp--op-donker` mee; het contrast van --kv-paneel op die kop is 6,77:1,
 *   gemeten in kaart-viewer.css onder "VIJFDE VLAK".
 * --------------------------------------------------------------------------- */

.tvp {
  position: relative;
  display: inline-block;
}

.tvp-knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--kv-rand);
  border-radius: var(--kv-radius);
  background: var(--kv-paneel);
  --tvp-kleur: var(--kv-inkt);
  color: var(--tvp-kleur);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.tvp-knop:hover { background: var(--kv-chip); }

/* Zichtbare focus, en niet alleen bij :focus-visible: dit menu wordt met het
   toetsenbord bediend en dan moet je zien waar je bent (AC7). */
.tvp-knop:focus { outline: 2px solid var(--kv-accent); outline-offset: 2px; }

.tvp-knop--erin {
  border-color: var(--kv-accent);
  --tvp-kleur: var(--kv-accent-diep);
  background: rgba(var(--kv-accent-kanalen), 0.08);
}

.tvp-knop--bezig, .tvp-knop[disabled] { opacity: 0.6; cursor: default; }

/* De wachtstand vóór we weten of iemand is ingelogd. Geen knop, want er valt
   nog niets te klikken -- maar wel dezelfde maat, zodat de regel niet
   verspringt zodra het antwoord binnen is. */
.tvp-knop--stil {
  cursor: default;
  --tvp-kleur: var(--kv-inkt-licht);
  background: transparent;
  border-style: dashed;
}

.tvp-vink { font-size: 11px; line-height: 1; }

/* -- op de donkergroene paneelkop van de kaart ----------------------------- */
.tvp--op-donker .tvp-knop {
  background: transparent;
  border-color: rgba(var(--kv-paneel-kanalen), 0.34);
  --tvp-kleur: var(--kv-paneel);
}
.tvp--op-donker .tvp-knop:hover { background: rgba(var(--kv-paneel-kanalen), 0.14); }
.tvp--op-donker .tvp-knop--erin {
  background: rgba(var(--kv-paneel-kanalen), 0.18);
  border-color: rgba(var(--kv-paneel-kanalen), 0.5);
  --tvp-kleur: var(--kv-paneel);
}
.tvp--op-donker .tvp-knop:focus { outline-color: var(--kv-paneel); }

/* -- het menu -------------------------------------------------------------- */

.tvp-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 224px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--kv-paneel);
  border: 1px solid var(--kv-rand);
  border-radius: var(--kv-radius);
  box-shadow: 0 12px 32px rgba(var(--kv-schim-kanalen), 0.18);
  text-align: left;
}

.tvp-menu__kop {
  padding: 6px 8px 4px;
  color: var(--kv-inkt-licht);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tvp-menu__item {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  --tvp-kleur: var(--kv-inkt);
  color: var(--tvp-kleur);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tvp-menu__item:hover { background: var(--kv-chip); }
.tvp-menu__item:focus { outline: 2px solid var(--kv-accent); outline-offset: -2px; }

.tvp-menu__item--eruit { --tvp-kleur: var(--kv-label-g); }

.tvp-menu__item--nieuw {
  margin-top: 4px;
  border-top: 1px solid var(--kv-tegel-lijn);
  border-radius: 0 0 4px 4px;
  --tvp-kleur: var(--kv-accent-diep);
  font-weight: 600;
}

/* -- nieuw project ---------------------------------------------------------- */

.tvp-nieuw { padding: 4px 8px 8px; }
.tvp-nieuw__label {
  display: block;
  margin-bottom: 4px;
  color: var(--kv-inkt-zacht);
  font-size: 11.5px;
}
.tvp-nieuw__veld {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--kv-rand);
  border-radius: 4px;
  background: var(--kv-wit);
  --tvp-kleur: var(--kv-inkt);
  color: var(--tvp-kleur);
  font: inherit;
  font-size: 13px;
}
.tvp-nieuw__veld:focus { outline: 2px solid var(--kv-accent); outline-offset: 1px; }
.tvp-nieuw__knoppen { display: flex; gap: 6px; margin-top: 8px; }
.tvp-nieuw__ok, .tvp-nieuw__nee {
  flex: 1;
  height: 28px;
  border: 1px solid var(--kv-rand);
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.tvp-nieuw__ok {
  border-color: var(--kv-accent);
  background: var(--kv-accent);
  --tvp-kleur: var(--kv-wit);   /* wit op --kv-accent = 4,74:1 -- gemeten, AA */
  color: var(--tvp-kleur);
}
.tvp-nieuw__nee { background: var(--kv-paneel); --tvp-kleur: var(--kv-inkt); color: var(--tvp-kleur); }

/* -- de gedeelde live region ------------------------------------------------ */
/* Eén per pagina. Hij is er ALTIJD (ook leeg), want een live region die pas bij
   de melding in de DOM verschijnt wordt door een deel van de schermlezers niet
   voorgelezen. Zichtbaar is hij alleen als er iets in staat. */

.tvp-melding {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid var(--kv-rand);
  border-radius: var(--kv-radius);
  background: var(--kv-inkt);
  color: var(--kv-paneel);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 12px 32px rgba(var(--kv-schim-kanalen), 0.28);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.tvp-melding--zichtbaar { opacity: 1; transform: translate(-50%, 0); }

/* DE DOORKLIK IN DE MELDING (#1493).
   GEMETEN op de toastachtergrond --kv-inkt #1F2A26:
     --kv-paneel #F5F2EA   13,24:1   haalt SC 1.4.3 (AA, 4,5:1)
     --kv-accent #3E7A5A    2,92:1   haalt zelfs SC 1.4.11 (3:1) NIET
   De voor de hand liggende keuze -- de link in accentgroen -- zakt dus door de
   norm. Hij is daarom licht, en onderscheidt zich met een onderstreping in
   plaats van met kleur; dat dekt meteen SC 1.4.1 (A), want kleur mag niet het
   enige onderscheid zijn.

   min-height 24px is SC 2.5.8 (AA): 13px tekst op regelhoogte 1.4 wordt ~18px,
   en dat is te klein om aan te wijzen. De padding brengt hem op maat zonder de
   toast te laten groeien. */
.tvp-melding-actie {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 6px;
  margin-left: 2px;
  color: var(--kv-paneel);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--kv-radius-klein, 4px);
}
/* Kanalen en geen rauwe rgba: het designsysteem draagt --kv-paneel-kanalen
   juist voor dit geval, zodat er nergens een losse kleurwaarde rondzwerft. */
.tvp-melding-actie:hover { background: rgba(var(--kv-paneel-kanalen), .14); }
.tvp-melding-actie:focus-visible {
  outline: 2px solid var(--kv-paneel);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tvp-melding { transition: none; }
}

/* Op een smal scherm past "Toevoegen aan project" niet naast een adres. Dan
   wint de handeling van het label: de knop blijft, de tekst wordt korter door
   te knippen in plaats van de regel te breken. */
@media (max-width: 560px) {
  .tvp-knop { max-width: 46vw; overflow: hidden; }
  .tvp-label { overflow: hidden; text-overflow: ellipsis; }
  .tvp-menu { right: auto; left: 0; min-width: 200px; }
}