/* Bikepark-specifieke aanvulling op maestro-admin.css (alleen layout,
   kleuren komen uit de --ma-variabelen van de standaard). */

.rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .rij-2 { grid-template-columns: 1fr; } }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; }
.checkbox input { width: 17px; height: 17px; }
.hint { color: var(--ma-grijs); font-size: 12.5px; margin: 6px 0 0; }
.optioneel { font-weight: 400; color: var(--ma-grijs); }
code { background: var(--ma-bg); border-radius: 4px; padding: 1px 5px; font-size: .85em; }
.week-nav { justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }

/* Boekingen-lijst */
.dag-groep { margin-bottom: 14px; }
.dag-groep > strong { display: block; text-transform: capitalize; margin-bottom: 6px; font-size: 13.5px; }
.res-kaart {
  border: 1px solid var(--ma-lijn); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff;
}
.res-kaart.geannuleerd, .res-kaart.afgewezen { opacity: .6; }
/* Statuskleuren: in behandeling = amber, bevestigd = groen, afgewezen/geannuleerd = grijs */
.res-kaart.in_behandeling { border-left: 4px solid var(--ma-amber); }
.res-kaart.bevestigd { border-left: 4px solid var(--ma-groen); }
.res-kaart.afgewezen, .res-kaart.geannuleerd { border-left: 4px solid var(--ma-grijs); }
.res-kaart .tijd { font-weight: 700; }
.res-kaart .contact { color: var(--ma-grijs); font-size: 12.5px; word-break: break-word; }
.res-kaart .status-label { color: var(--ma-rood); font-weight: 700; font-size: 12.5px; }
.res-status {
  display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 1px 9px; margin-left: 6px; vertical-align: 1px; letter-spacing: .01em;
}
.res-status.in_behandeling { background: var(--ma-amber-bg); color: var(--ma-amber); }
.res-status.bevestigd { background: var(--ma-groen-bg); color: var(--ma-groen); }
.res-status.afgewezen, .res-status.geannuleerd { background: var(--ma-bg); color: var(--ma-grijs); }
.res-acties { display: flex; align-items: center; gap: 8px; }
.ma-knop.groen { background: var(--ma-groen); color: #fff; border-color: var(--ma-groen); }
.ma-knop.groen:hover { filter: brightness(1.1); }
/* Dashboard-tegel 'te beoordelen' */
a.ma-tegel { text-decoration: none; color: inherit; display: block; }
a.ma-tegel:hover { border-color: var(--ma-tekst); }
.ma-tegel.let-op { background: var(--ma-amber-bg); border-color: var(--ma-amber); }
.ma-tegel.let-op b { color: var(--ma-amber); }

/* Agenda-kalender */
.kal-dagnamen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.kal-dagnamen span { text-align: center; font-size: 11.5px; color: var(--ma-grijs); }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-dag {
  min-height: 74px; border: 1px solid var(--ma-lijn); border-radius: 8px; padding: 4px;
  font: inherit; background: #fff; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.kal-dag:hover { border-color: var(--ma-tekst); }
.kal-dag.buiten { opacity: .35; }
.kal-dag.vandaag { outline: 2px solid var(--ma-accent); outline-offset: -2px; }
.kal-dag .dagnr { font-size: 12px; font-weight: 700; }
.kal-item {
  font-size: 10.5px; line-height: 1.3; border-radius: 5px; padding: 1px 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-item.res { background: var(--ma-groen-bg); color: var(--ma-groen); font-weight: 700; }
.kal-item.res.in_behandeling { background: var(--ma-amber-bg); color: var(--ma-amber); }
.kal-item.blok { background: var(--ma-bg); color: var(--ma-grijs); font-weight: 600; }
.kal-blokje { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.kal-blokje.res { background: var(--ma-groen-bg); border: 1px solid var(--ma-groen); }
.kal-blokje.res.wacht { background: var(--ma-amber-bg); border: 1px solid var(--ma-amber); }
.kal-blokje.blok { background: var(--ma-bg); border: 1px solid var(--ma-grijs); }

/* Blog-editor */
.blog-beeld-rij { display: flex; gap: 14px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.blog-beeld-rij img { width: 120px; height: 75px; object-fit: cover; border-radius: 10px; }
.bestand-knop { display: inline-block; cursor: pointer; }
#blog-editor textarea { line-height: 1.6; }
.ma-chip.gebruikt { opacity: .55; }

/* Annuleer-dialoog */
dialog { border: none; border-radius: 14px; padding: 22px; max-width: 460px; width: calc(100vw - 48px); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { margin-top: 0; }

/* hidden-attribuut moet altijd winnen van display-regels uit de standaard-CSS */
[hidden] { display: none !important; }