/* --------------------------------------------------
   La Piazza - kompakte Reservierungskarten
-------------------------------------------------- */

.reservation-row {
  overflow: hidden !important;
}

.reservation-row-main {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  cursor: pointer !important;
}

.reservation-row-time {
  grid-column: 1 !important;
}

.reservation-row-info {
  grid-column: 2 !important;
}

.reservation-row-badges {
  grid-column: 3 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.reservation-row-details {
  display: none !important;
}

.reservation-row.open .reservation-row-details {
  display: block !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.reservation-details-btn {
  grid-column: 4 !important;
  justify-self: end !important;
  border: 1px solid rgba(6, 103, 76, 0.18) !important;
  background: #ffffff !important;
  color: #0a6b50 !important;
  border-radius: 14px !important;
  padding: 9px 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.reservation-details-btn:hover {
  background: #eef8f4 !important;
}

.reservation-row.open .reservation-details-btn {
  background: #06402f !important;
  color: #fff8e8 !important;
}

.reservation-details-btn span {
  display: inline-block;
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
}

.reservation-row.open {
  border-color: rgba(6, 103, 76, 0.45) !important;
  box-shadow: 0 18px 42px rgba(6, 64, 47, 0.10) !important;
}

/* Button-Farben sauber */
.reservation-compact-actions .arrived-btn {
  background: #dff3ea !important;
  color: #0a6b50 !important;
  border-color: #b9ddcd !important;
}

.reservation-compact-actions .completed-btn {
  background: #eee9df !important;
  color: #6e746f !important;
  border-color: #ddd4c7 !important;
}

.reservation-compact-actions .noshow-btn {
  background: #fff1d8 !important;
  color: #c56b00 !important;
  border-color: #f1d7a8 !important;
}

.reservation-compact-actions .edit-btn {
  background: #e5f1ff !important;
  color: #0c5f9e !important;
  border-color: #c8def5 !important;
}

.reservation-compact-actions .cancel-btn {
  background: #fde8e8 !important;
  color: #c41f1f !important;
  border-color: #f3caca !important;
}

@media (max-width: 760px) {
  .reservation-row-main {
    grid-template-columns: auto 1fr !important;
  }

  .reservation-row-badges {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }

  .reservation-details-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}