/* GuestIntel.css - Guest intelligence dashboard (kitchen / BOH briefing).
   Single screen, no vertical scroll:
     LEFT 30%  Today deep-dive (covers + nationality bars with flags)
     RIGHT 70% Next 6 days: Chart.js stacked-area line + details table.
   Tokens only. */

.guest-intel-layout {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* -- Top bar -- */

.gi-topbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.gi-topbar-titles { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.gi-now-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.gi-now-sub { font-size: var(--text-sm); color: var(--text-muted); }
.gi-refreshed { font-size: var(--text-xs); color: var(--text-light); }

.gi-muted { color: var(--text-muted); font-size: var(--text-xs); }

/* -- Main split -- */

.gi-main { display: flex; gap: var(--space-3); align-items: stretch; }

/* LEFT: today deep-dive */
.gi-today {
    flex: 0 0 30%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xs);
}

.gi-today-head { display: flex; align-items: baseline; gap: var(--space-2); }
.gi-today-day { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.gi-today-date { font-size: var(--text-sm); color: var(--text-muted); }

.gi-today-summary { display: flex; gap: var(--space-5); }
.gi-sum { display: flex; flex-direction: column; }
.gi-sum-val { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gi-sum-lbl { font-size: var(--text-xs); color: var(--text-muted); }

.gi-today-mix { font-size: var(--text-sm); color: var(--text-body); }

.gi-section { display: flex; flex-direction: column; gap: var(--space-2); }
.gi-section-title {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}

.gi-today-foot { font-size: var(--text-sm); color: var(--text-body); }

/* Horizontal label-bar-value rows (covers + nationality) */
.gi-hbar { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.gi-hbar-icon { flex: 0 0 auto; display: inline-flex; }
.gi-hbar-label {
    flex: 0 0 auto;
    width: var(--space-22);
    color: var(--text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gi-hbar-track {
    flex: 1 1 auto;
    height: var(--space-2_5);
    background: var(--bg-muted);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}
.gi-hbar-fill {
    height: 100%;
    min-width: var(--space-1);
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
    border-radius: var(--border-radius-full);
}
.gi-hbar-val {
    flex: 0 0 auto;
    min-width: var(--space-13);
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* RIGHT: next 6 days panel */
.gi-forecast {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: var(--border-width-1) solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xs);
}

.gi-chart-container { position: relative; height: 260px; width: 100%; }
.gi-chart-container canvas { width: 100% !important; height: 100% !important; }

.gi-forecast-table td,
.gi-forecast-table th { font-variant-numeric: tabular-nums; }
.gi-forecast-table td:first-child { font-weight: var(--font-weight-semibold); color: var(--text-secondary); }

/* Stack the forecast under Today on narrow viewports */
@media (max-width: 900px) {
    .gi-main { flex-direction: column; }
    .gi-today { flex: 1 1 auto; }
}