/* ===============================================================
   styles.css – compacte layout + nette actie-iconen
   =============================================================== */

/* Algemene basis: maak alles iets kleiner */
body,
main,
section,
table,
label,
input,
button,
select,
textarea {
  font-size: 0.85rem !important;
}

/* Kopteksten kleiner */
h1, h2, h3, h4, h5, h6 {
  font-size: 1rem !important;
  margin: 0.5rem 0 !important;
}

/* Occupancy box kleiner & netter */
.occupancy {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.occupancy h2 { margin: 0; font-size: 1rem; }
.occupancy p  { font-size: 0.85rem; color: #8b949e; }

/* Knoppen kleiner & consistent */
button,
.button {
  padding: 0.4rem 1rem !important;
  font-size: 0.85rem !important;
}

/* Rode annuleerknop */
button.danger {
  cursor: pointer;        /* ESSENTIEEL: weer klikbaar */
  background: #e63946;
  border: 1px solid #e63946;
  color: #fff;
}

/* Invoervelden kleiner */
input,
select,
textarea {
  font-size: 0.85rem !important;
  padding: 0.4rem !important;
}

/* --- Form box voor reservering --- */
.form-card {
  background: #161b22;
  border: 1px solid #425164;
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* Knoppen even breed, boven op elkaar */
.form-card .stack-buttons button {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
.form-card .stack-buttons button:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------
   Actie-iconen in tabel mooi gecentreerd
-------------------------------------------------------------- */
td.actions {
  text-align: center;
  white-space: nowrap;         /* icoontjes blijven op één lijn */
}

td.actions a,
td.actions button {
  all: unset;                  /* reset alle default button-styles */
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2rem;
  margin: 0 .25rem;
  line-height: 1;
  cursor: pointer;
}

/* Hover-effect voor feedback */
td.actions a:hover,
td.actions button:hover {
  transform: scale(1.15);
  transition: 0.1s ease;
}

/* Helper: volle breedte én midden uitgelijnd */
.stack-full {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5rem 1rem;
  cursor: pointer;
  line-height: 1;
}

/* styles.css, onderaan */

#map {
  width: 100%;
  height: 400px;
  border-radius: 0.5rem;
}

/* Restore Leaflet zoom control appearance */
.leaflet-control-zoom a {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  background-color: #fff !important;
  color: #000 !important;
  text-decoration: none !important;
  font-size: 20px !important;
  font-weight: bold !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.leaflet-control-zoom {
  top: 10px !important;
  left: 10px !important;
}