/* --- Rental Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-panel {
  background: #0a0e1a;
  border: 1px solid #1a2540;
  border-radius: 8px;
  width: 100%;
  /* Match the snotcal calendar-grid max-width so modal feels aligned with the cal */
  max-width: min(95vw, 840px);
  max-height: 90vh;
  overflow-y: auto;
  color: #c8dae8;
  font-family: inherit;
}

/* Header: title + villa buttons | clash cell (grows, wraps) | actions */
.modal-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #1a2540;
  font-weight: 700;
  font-size: 0.95rem;
}
.modal-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.modal-header-clash {
  flex: 1 1 200px;
  color: #d44;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  min-width: 0;
  align-self: center;
}
.modal-header-clash > div { display: block; margin-bottom: 2px; }
.modal-header-clash > div:last-child { margin-bottom: 0; }
.modal-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.modal-header button {
  background: none;
  border: none;
  color: #888;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.modal-header button:hover { color: #fff; }

.modal-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-field label {
  display: block;
  font-size: 0.72rem;
  color: #666;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Required-field cues. Asterisk = static "this is required" indicator. */
.modal-field label .req-ast {
  color: #d44;
  margin-left: 2px;
  font-weight: bold;
}
/* needs-fill = dynamic "still empty" cue. Applied by updateRequiredLabels() only in create mode. */
.modal-field label.needs-fill {
  color: #d44;
}

.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  padding: 6px 8px;
  background: #111828;
  border: 1px solid #1a2540;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 0.85rem;
  font-family: inherit;
  color-scheme: dark;
  box-sizing: border-box;
}
.modal-field textarea { resize: vertical; }
.modal-field .readonly-field,
.modal-field .readonly-field:disabled {
  background: #0a0e1a;
  color: #888;
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: #888;  /* Safari preserves readonly color */
}

/* Grid rows — each row wraps independently */
.modal-grid-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.modal-grid-row > .modal-field { min-width: 0; }

/* Field pairs — two fields that stay side by side and wrap as a unit.
   Used in dates-row (In+Intime pair, Out+Outtime pair) and sgmp-row (Status+Manager, Guests+Platform). */
.field-pair {
  display: flex;
  gap: 10px;
  flex: 1 1 calc(50% - 5px);
  min-width: 260px;
}
.field-pair > .modal-field {
  flex: 1 1 50%;
  min-width: 0;
}

/* Row: renter (25) + client-of (25) + renter-notes (50) */
.modal-grid-row.renter-row > .q25 {
  flex: 1 1 calc(25% - 8px);
  min-width: 140px;
  display: flex;
  flex-direction: column;
}
.modal-grid-row.renter-row > .q25 .renter-picker,
.modal-grid-row.renter-row > .q25 input,
.modal-grid-row.renter-row > .q25 select {
  flex: 0 0 auto;
}
.modal-grid-row.renter-row > .q50 {
  flex: 1 1 calc(50% - 5px);
  min-width: 240px;
  display: flex;
  flex-direction: column;
}
.modal-grid-row.renter-row > .q50 textarea {
  flex: 1 1 auto;
}

/* Row: price (50) + rental-notes (50) — keep heights equal */
.modal-grid-row.notes-row {
  align-items: stretch;
}
.modal-grid-row.notes-row > .q50 {
  flex: 1 1 calc(50% - 5px);
  min-width: 240px;
  display: flex;
  flex-direction: column;
}
.modal-grid-row.notes-row > .q50 > .price-estimate,
.modal-grid-row.notes-row > .q50 > textarea {
  flex: 1 1 auto;
  min-height: 110px;
}

/* Price estimate block */
.price-estimate {
  background: #0a0e1a;
  border: 1px solid #1a2540;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: #88cc88;
  min-height: 110px;
  line-height: 1.5;
  overflow: hidden;
}
.price-estimate table {
  table-layout: fixed;
  width: 100%;
}
/* Description column: ellipsis when too narrow, never wraps */
.price-estimate td:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.price-estimate:empty::before {
  content: 'enter villa + dates to see price';
  color: #555;
  font-style: italic;
}

/* Villa selector buttons */
.villa-btn-group { display: flex; gap: 3px; }
.villa-btn {
  flex: 1;
  padding: 6px 2px;
  border: 1px solid #1a2540;
  border-radius: 4px;
  color: #888;
  background: #111828;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
}
.villa-btn.active { color: #fff; }
.villa-btn-1.active { background: #1870c0; border-color: #1870c0; }
.villa-btn-2.active { background: #a07020; border-color: #a07020; }
.villa-btn-3.active { background: #18a868; border-color: #18a868; }
.villa-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.villa-btn:not(.active):not(:disabled):hover { color: #c8dae8; }

/* Compact villa buttons in header */
.villa-btn-group-sm { gap: 2px; }
.villa-btn-group-sm .villa-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 0.72rem;
}

/* Renter picker */
.renter-picker { position: relative; }
.renter-picker input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  background: #111828;
  border: 1px solid #1a2540;
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}
.renter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  background: #111828;
  border: 1px solid #1a2540;
  border-radius: 0 0 4px 4px;
  z-index: 210;
}
.renter-dropdown.hidden { display: none; }
.renter-opt { padding: 5px 8px; cursor: pointer; font-size: 0.85rem; }
.renter-opt:hover, .renter-opt.highlighted { background: #1a2540; }
.renter-opt-new { color: #20d4f4; border-top: 1px solid #1a2540; font-style: italic; }

.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #1a2540;
  text-align: right;
}

.modal-btn {
  padding: 7px 16px;
  border-radius: 4px;
  border: 1px solid #1a2540;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.modal-btn-save { background: #1870c0; color: #fff; border-color: #1870c0; }
.modal-btn-save:hover:not(:disabled) { background: #2090e0; }
.modal-btn-save:disabled { background: #333; color: #666; border-color: #333; cursor: not-allowed; }

/* Mobile */
@media (max-width: 600px) {
  .modal-panel { max-width: 100%; border-radius: 0; max-height: 100dvh; height: 100dvh; padding-top: env(safe-area-inset-top); }
  /* Hide obvious labels on mobile */
  .mobile-hide-label label { display: none; }
  /* Bigger tap targets on mobile */
  .modal-btn { padding: 12px 16px; font-size: 1rem; }
  .villa-btn { padding: 10px 0; font-size: 1rem; }
  .villa-btn-group-sm .villa-btn { padding: 6px 10px; font-size: 0.85rem; }
  .modal-field input, .modal-field select { padding: 10px; font-size: 1rem; }
}

/* Transactions section only shows on desktop while responsive work is pending */
@media (max-width: 900px) {
  #transactionsSection { display: none !important; }
}
.transactions-section { margin-top: 12px; }
#transactionsRoot { min-height: 200px; }