/* Logo-opmaak voor deze app.

   Bewust een eigen bestand: berkpm.css is letterlijk gedeeld met de
   issuedatabase en wordt daarom niet aangeraakt. Alles wat hier staat gaat
   over het GVB-logo en overschrijft waar nodig een regel uit berkpm.css. */

/* Het GVB-logo is breed (ongeveer 3,7 : 1). Op de volle breedte van de
   inlogkaart wordt het te fors, vandaar een maximum. */
.login-card .logo img {
  width: auto;
  max-width: 240px;
  max-height: 68px;
  margin: 0 auto;
}

/* Kleine BerkPM-markering onder de inlogkaart: wie de app gebouwd heeft,
   zonder dat het met het GVB-logo concurreert. */
.gemaakt-door {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.gemaakt-door img {
  height: 26px;
  width: auto;
  opacity: 0.45;
  display: block;
}
.gemaakt-door img:hover { opacity: 0.7; }

/* Vinkjes per programma, op /velden en in het gebruikersbeheer. Hier en niet
   in berkpm.css: dat bestand is letterlijk gedeeld met de issuedatabase. */
.programma-vinkje { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; white-space: nowrap; }

/* In het gebruikersbeheer staan de vinkjes onder elkaar, anders drukt de
   kolom de rolkeuze ernaast samen tot alleen een pijltje. */
.users-table .col-programmas .programma-vinkje { display: flex; margin: 1px 0; }
.users-table select[name="role_id"] { min-width: 120px; }

/* Perceelknoppen: aanklikken wat je wilt zien, op de kaart en in de planning.
   Niets aan betekent alles zichtbaar. De kleur komt per knop als --kleur mee
   uit het veldbeheer. */
.perceelknop {
  border: 1px solid var(--berk-border);
  background: #fff;
  color: var(--berk-text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.perceelknop:hover { border-color: var(--berk-blue); }
.perceelknop .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--kleur, var(--perceel-standaard, #6b6f87));
}
.perceelknop[aria-pressed="true"] {
  background: var(--kleur, var(--perceel-standaard, #6b6f87));
  border-color: var(--kleur, var(--perceel-standaard, #6b6f87));
  color: var(--tekst, #fff);
}
/* --tekst is wit of donker naar gelang de perceelkleur (filter tekstkleur). */
.perceelknop[aria-pressed="true"] .dot { background: var(--tekst, #fff); }