.room-card { display: flex; flex-direction: column; min-width: 0; }
.room-card > .room-media { height: auto; aspect-ratio: 4 / 3; }
.room-card > .room-media img, .room-card > .room-media .room-media-placeholder { position: absolute; inset: 0; }
.room-card-body { flex: 1; display: flex; flex-direction: column; }
.room-media { position: relative; height: 180px; flex-shrink: 0; overflow: hidden; background: var(--tone-bg, var(--surface-muted)); color: var(--tone-color, var(--text-muted)); }
.room-media-placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.room-media-placeholder .icon { width: 38px; height: 38px; stroke-width: 1.3; }
.room-photo-status { font-size: 11px; }
.room-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-media.photo-loaded .room-media-placeholder { display: none; }
.room-media-full { display: flex; align-items: center; justify-content: center; height: auto; min-height: 200px; border-radius: 10px; }
.room-media-full.photo-loaded { background: transparent; min-height: 0; }
.room-media-full img { width: auto; max-width: 100%; height: auto; max-height: min(380px, 50dvh); object-fit: contain; border-radius: 10px; }
.room-media-full .room-media-placeholder { min-height: 200px; }
dialog:has(.room-details-body) { width: min(700px, calc(100% - 32px)); }
.room-details-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 26px; }
.room-details-info { display: grid; gap: 24px; min-width: 0; padding-top: 4px; }
.room-details-body > .room-media { align-self: start; }
.room-capacity { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 650; color: var(--primary); margin-top: 14px; }
.room-capacity .icon { width: 17px; height: 17px; }
.room-card-body .room-description-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 20px; }
.room-card-actions { margin-top: auto; padding-top: 5px; flex-wrap: wrap; }
.room-card-actions .button { padding: 8px 10px; }
.room-description-full { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 12px; line-height: 1.8; margin-top: 10px; }
.room-details-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-details-meta .room-capacity { margin: 0; }
.room-details-body h3 { font-size: 13px; }
.room-photo-field { display: grid; gap: 9px; }
.field-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
#room-photo-preview .room-media { height: 200px; border: 1px solid var(--border); border-radius: 9px; }
#room-photo-preview .room-media.photo-loaded { background: var(--surface-subtle); }
#room-photo-preview .room-media img { object-fit: contain; }
.room-photo-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.photo-file-label { cursor: pointer; }
.room-photo-controls:has(input:focus-visible) .photo-file-label { outline: 3px solid var(--focus); outline-offset: 3px; }
#room-photo-name { overflow-wrap: anywhere; }
textarea { font: inherit; min-width: 0; width: 100%; border: 1px solid var(--border-strong); border-radius: 7px; background: white; color: var(--text); padding: 10px 11px; font-size: 12px; font-weight: 500; resize: vertical; line-height: 1.6; }
textarea:focus { outline: 2px solid var(--teal-border); outline-offset: 1px; border-color: var(--primary); }
textarea::placeholder { color: #8793a2; }
.booking-room-info { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; background: var(--teal-soft); border-radius: 8px; }
.booking-room-info > .room-media { width: 64px; height: 64px; border-radius: 6px; }
.booking-room-info .room-media-placeholder { gap: 4px; }
.booking-room-info .room-media-placeholder .icon { width: 23px; height: 23px; }
.booking-room-info .room-photo-status { font-size: 9px; text-align: center; }
.booking-room-summary { display: grid; gap: 6px; min-width: 0; }
.booking-room-info .room-capacity { margin: 0; }
.booking-room-info p { margin: 0; font-size: 11px; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
.booking-room-description { max-height: 96px; overflow-y: auto; scrollbar-width: thin; }
#booking-form .availability-check { justify-self: start; }
#booking-form > .dialog-body { gap: 14px; padding-top: 18px; padding-bottom: 18px; }
.booking-room-info:empty { display: none; }
@media (max-width: 600px) {
  .room-details-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .room-details-info { padding-top: 0; gap: 18px; }
  .room-media-full img { max-height: min(360px, 48dvh); }
}
@media (max-width: 430px) {
  #room-form input:not([type="checkbox"]), #room-form textarea { font-size: 16px; }
}