/* Performance.css -- ONE stylesheet for the whole Performance deck.
 *
 * Eight tabs (the seven Performance* tabs plus Guest Sentiment) share a visual
 * language, so they share a stylesheet rather than eight near-identical ones.
 * Every class carries the `perf-` prefix; every value comes from
 * design-tokens.css unless a comment on the line says no token covers it. There
 * is no panel-fill rule here -- the Panel organism owns its own frame, and the
 * one-panel rule gives a lone panel the whole tab.
 *
 * Every tab is now a pinned header (the figures, the sub-tab bar) sitting above
 * ONE panel, and the shapes that used to be hand-rolled beside those panels --
 * the as-at bar, the panel row, the hour heat strip, the sentiment meter, the
 * chips, the swatches, the KPI grid -- are drawn by atoms now or are gone
 * altogether, so their rules have gone with them. What remains is the handful of
 * shapes no component owns: the room board, the recovery list, the chain
 * matrix's clickable cell, the not-connected body, and the chart frame. */

/* ---- layout ------------------------------------------------------------- */

.perf-panel { min-width: 0; }

/* The panel header carries four things on one line: the surface and its count,
   where the figures came from, and Refresh. A subtitle is a sentence, and the
   shared organism deliberately pins a heading against shrinking (Panel.css sets
   flex-shrink to 0 on it) -- right for two words, wrong for a sentence, which
   then pushes the header past the panel. Inside THIS deck the heading may
   wrap and its subtitle may break, so a long line can never widen the page.
   Scoped to the deck panels; the organism itself is untouched. */
.perf-panel > .section-header > .section-title {
    flex-shrink: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.perf-panel > .section-header > .section-title > .section-subtitle {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A panel body that stacks more than one thing owns the space between them,
   via gap. Children never carry an external margin. */
.perf-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* ---- room board --------------------------------------------------------- */

.perf-floor {
    display: grid;
    grid-template-columns: 78px 1fr; /* floor label gutter, no token suite */
    gap: var(--space-3);
    align-items: center;
}

.perf-floor-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.perf-floor-cells {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.perf-room {
    width: 30px;  /* room tile is a fixed 30x24 swatch, no token suite */
    height: 24px; /* room tile is a fixed 30x24 swatch, no token suite */
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    border: var(--border-width-1) solid var(--border-subtle);
    background: var(--bg-layer-4);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-secondary);
}

/* Three states the data can actually support: occupied (a stay in the room),
   work open (a housekeeping job on it), and vacant with nothing open -- the
   plain tile. The PMS sync carries no housekeeping or out-of-order status, so
   there is no "clean and ready" and no "out of order" tile to draw. */
.perf-room.is-occupied { background: var(--bg-layer-2); color: var(--text-primary); }
.perf-room.is-work-open {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning-hover);
}

/* The legend's swatch is a Badge dot -- this only lays the pairs out. */
.perf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.perf-legend span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---- recovery list ------------------------------------------------------ */

.perf-recovery { display: flex; flex-direction: column; }

.perf-recovery-row {
    display: grid;
    /* room / name / signals / departs column widths, no token suite */
    grid-template-columns: 68px minmax(130px, 1fr) minmax(160px, 1.5fr) 150px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: var(--border-width-1) solid var(--border-subtle);
    font-size: var(--text-sm);
}

.perf-recovery-row:last-child { border-bottom: 0; }
.perf-recovery-room { font-family: var(--font-mono); font-weight: var(--font-weight-semibold); }
.perf-recovery-signals,
.perf-recovery-departs { font-size: var(--text-xs); color: var(--text-secondary); }

/* ---- chain matrix ------------------------------------------------------- */

.perf-chain-matrix .matrix-grid-cell { cursor: pointer; }

/* ---- not-connected state ------------------------------------------------ */

.perf-notconnected-body {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.perf-notconnected-body strong { color: var(--text-primary); }

/* ---- charts ------------------------------------------------------------- */

.perf-chart {
    position: relative;
    width: 100%;
}

/* ---- tables ------------------------------------------------------------- */

.perf-table { font-size: var(--text-sm); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 768px) {
    .perf-floor { grid-template-columns: 1fr; gap: var(--space-1); }
}