/* HMS-347 — Demand Forecasting dashboard (Figma 600:24117 / 600:24307). */

.forecast { padding-bottom: var(--wa-space-xl); }

.forecast__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); margin-bottom: var(--wa-space-l); flex-wrap: wrap; }
.forecast__title { margin: 0; font-size: 1.5rem; color: var(--wa-color-text-normal); }
.forecast__head-actions { display: flex; align-items: center; gap: var(--wa-space-s); }
.forecast__search wa-input { min-width: 16rem; }

/* Hotel status cards */
.forecast__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--wa-space-l);
  margin-bottom: var(--wa-space-l);
}

.forecast__card {
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m) var(--wa-space-l);
}
.forecast__card--active { border-color: var(--wa-color-brand); box-shadow: 0 0 0 1px var(--wa-color-brand); }

.forecast__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); }
.forecast__card-name { margin: 0; font-size: 1rem; font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-text-normal); }

.forecast__badge {
  display: inline-flex; align-items: center; gap: var(--wa-space-2xs);
  font-size: 0.75rem; font-weight: var(--wa-font-weight-semibold);
  padding: 2px var(--wa-space-xs);
  border-radius: var(--wa-border-radius-s);
}
.forecast__badge--on-track { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.forecast__badge--warning { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.forecast__badge--critical { background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet); }

.forecast__card-nums { display: flex; gap: var(--wa-space-2xl); margin: var(--wa-space-m) 0; }
.forecast__card-nums span { display: block; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.forecast__card-nums strong { font-size: 1.125rem; color: var(--wa-color-text-normal); }

.forecast__empty { margin: var(--wa-space-m) 0 0; font-size: 0.875rem; color: var(--wa-color-text-quiet); }

/* Chart card */
.forecast__chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); flex-wrap: wrap; margin-bottom: var(--wa-space-s); }
.forecast__selectors { display: flex; gap: var(--wa-space-s); flex-wrap: wrap; }
.forecast__selectors wa-select { min-width: 12rem; }
.forecast__scenario { display: flex; align-items: center; gap: var(--wa-space-s); }
.forecast__scenario-form wa-select { min-width: 11rem; }

.forecast__legend { display: flex; align-items: center; gap: var(--wa-space-m); margin: 0 0 var(--wa-space-s); font-size: 0.8125rem; color: var(--wa-color-text-quiet); flex-wrap: wrap; }
.forecast__key { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: var(--wa-space-2xs); vertical-align: -1px; font-style: normal; }
.forecast__key--actual { background: var(--ek-chart-blue); }
.forecast__key--actual-sim { background: var(--ek-chart-green); }
.forecast__key--projected,
.forecast__key--baseline { background: var(--ek-chart-blue); border-radius: 0; height: 0; border-top: 2px dashed var(--ek-chart-blue); width: 1.25rem; }
.forecast__key--simulated { background: transparent; border-radius: 0; height: 0; border-top: 2px dashed var(--ek-chart-orange); width: 1.25rem; }
.forecast__key--band { background: color-mix(in srgb, var(--ek-chart-blue) 15%, transparent); border-radius: 2px; }
.forecast__key--target { background: transparent; border-radius: 0; height: 0; border-top: 2px dotted var(--ek-chart-gray-quiet); width: 1.25rem; }
.forecast__key--today { background: transparent; border-radius: 0; height: 0.75rem; border-left: 2px dashed var(--ek-chart-gray); width: 0; margin-right: var(--wa-space-xs); }

.forecast__chart { display: block; width: 100%; height: 20rem; }
.forecast__axis { margin: var(--wa-space-xs) 0 0; text-align: center; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.forecast__chart-note { margin: var(--wa-space-xs) 0 0; text-align: center; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }

@media (max-width: 640px) {
  .forecast__head { flex-direction: column; align-items: stretch; }
  .forecast__search wa-input { min-width: 0; }
  .forecast__chart-head { flex-direction: column; align-items: stretch; }
  .forecast__selectors, .forecast__scenario { flex-direction: column; align-items: stretch; }
  .forecast__chart { height: 14rem; }
}

/* HMS-827 — the hotel search is a full-page GET; while it processes the card
   grid dims and shows a spinner so the page does not look dead. */
.forecast__cards { position: relative; }
.forecast__cards > * { transition: opacity 120ms ease; }
/* Dim the cards, not the grid, so the spinner itself stays full strength. */
.forecast__cards--busy { pointer-events: none; }
.forecast__cards--busy > * { opacity: 0.45; }
.forecast__cards--busy::after {
  content: ""; position: absolute; inset: 0; min-height: 3.5rem;
  /* Near the top, not the centre: a long grid would park it below the fold. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 74 74'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232563eb' stroke-width='5' stroke-linecap='round' stroke-dasharray='90 150'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E")
      center min(5rem, 50%) / 3.5rem 3.5rem no-repeat,
    radial-gradient(circle, var(--wa-color-surface-default) 1.7rem, transparent 1.75rem) center min(5rem, 50%) / 3.5rem 3.5rem no-repeat;
}