/* ==========================================================================
   Owner panel · per-card prompts, status lines and change panels
   ========================================================================== */

/* Notices area under the controls: as tall as what it shows (render.js) */
.listing-card__notices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.listing-card__notices:empty { display: none; }

/* Shared copy stack (title + helper text) */
.notice__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}

.notice__hint {
  font-size: 13px;
  color: var(--color-muted);
}

.notice__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Inline banner: copy left, controls right (every prompt and panel) */
.notice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--owner-panel-padding);
  border-radius: var(--radius-md);
}

.notice-banner--ask {
  background: var(--color-teal-faint);
  border: 1px solid var(--color-teal-pale);
}
.notice-banner--ask .notice__title { color: var(--color-teal-dark); }

.notice-banner--paused    { background: var(--color-pending-tint); }
.notice-banner--rented    { background: var(--color-sand); }
.notice-banner--available { background: var(--color-green-tint); }

/* "Available" while the booking calendar has the place taken (account.html):
   copy on top, buttons below, so the long button label always fits */
.notice-banner--booked {
  flex-wrap: wrap;
  row-gap: 12px;
  background: var(--color-pending-tint);
  border: 1px solid var(--color-pending);
}
.notice-banner--booked .notice__copy { flex-basis: 100%; }
.notice-banner--booked .notice__buttons { flex-wrap: wrap; flex-shrink: 1; }

.notice__link {
  font-weight: 700;
  color: var(--color-teal-dark);
  text-decoration: underline;
}

/* Date panels (Rented / Available) use the same layout as Paused: question (+ hint)
   stacked at the left, pickers + buttons at the right, one band of the same height.
   When the row doesn't fit, both move the controls under the question the same way. */
.notice-banner--rented,
.notice-banner--available {
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 12px;
}
.notice-banner--rented .notice__title,
.notice-banner--available .notice__title { white-space: nowrap; }

/* Below this width the longer of the two rows (Available) no longer fits: both panels
   switch together to question on top, controls below, so they always look the same */
@container listing-body (max-width: 800px) {
  .notice-banner--rented .notice__copy,
  .notice-banner--available .notice__copy { flex-basis: 100%; }
}

/* Narrow cards: controls drop below the copy instead of squeezing it
   (container is .listing-card__body, see listings.css) */
@container listing-body (max-width: 680px) {
  .notice-banner { flex-wrap: wrap; }
  .notice__buttons { flex-wrap: wrap; flex-shrink: 1; }
  .notice-info-box { flex-wrap: wrap; }
}

/* Date pickers (day + month) inside the rented / available banners */
.notice__select {
  height: var(--owner-control-height);
  min-width: 150px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.notice__select--day {
  min-width: 0;
  width: 76px;
}

.notice__select:disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Resting-state info box: fills the space panels use, so cards look complete when idle */
.notice-info-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--owner-panel-padding);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.notice-info-box .notice__copy { flex-grow: 1; }

.notice-info-box__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-info-box--available .notice-info-box__icon { background: var(--color-green-tint); color: var(--color-green-dark); }
.notice-info-box--rented .notice-info-box__icon    { background: var(--color-sand); color: var(--color-muted); }
.notice-info-box--paused .notice-info-box__icon    { background: var(--color-pending-tint); color: var(--color-pending-dark); }
.notice-info-box--pending .notice-info-box__icon   { background: var(--color-teal-tint); color: var(--color-teal-dark); }

.notice-info-box__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
}
.notice-info-box--available .notice-info-box__title { color: var(--color-green-dark); }

.notice-info-box__updated {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

/* "Change sent" chip */
.notice-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-teal-tint);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-teal-dark);
}

/* Request could not be sent */
.notice-error {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-danger);
}

/* Phone-width cards: pickers share the row, the chip may wrap
   (kept last so it overrides the base rules above) */
@container listing-body (max-width: 420px) {
  .notice__select { min-width: 0; flex: 1 1 140px; }
  .notice__select--day { flex: 0 0 76px; }
  .notice-chip { flex-shrink: 1; }
  .notice-banner .notice__title { white-space: normal; }
}