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

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

.forecast__crumb {
  margin: 0 0 var(--wa-space-2xs);
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}
.forecast__crumb .fa-chevron-right { font-size: 0.625rem; margin: 0 var(--wa-space-2xs); }
.forecast__crumb span { color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-semibold); }

.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); }

@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; }
}