/* Demo Ops — the operator's live pane. Follows leads_console's tile
 * vocabulary so the two admin screens read as one family. */

.do-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.do-sub { color: var(--text-secondary, #8b93a7); font-size: 13px; max-width: 640px; margin-top: 4px; }
.do-controls { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.do-asof { color: var(--text-secondary, #8b93a7); font-size: 12px; font-variant-numeric: tabular-nums; }

.do-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.do-tiles-inner { margin: 8px 0 0; }

.do-tile {
    background: var(--surface-2, #151a26);
    border: 1px solid var(--border, #232a3a);
    border-radius: 8px;
    padding: 14px 16px;
}
.do-tile-label { color: var(--text-secondary, #8b93a7); font-size: 12px; letter-spacing: 0.02em; }
.do-tile-value { font-size: 26px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.do-tile-note { color: var(--text-secondary, #8b93a7); font-size: 11px; margin-top: 2px; }

/* Seats get state colour: the one tile someone glances at during launch. */
.do-tile.ok   .do-tile-value { color: var(--status-good, #34d399); }
.do-tile.warn .do-tile-value { color: var(--status-warn, #fbbf24); }
.do-tile.err  .do-tile-value { color: var(--status-bad, #f87171); }

.do-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.do-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.do-table th, .do-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border, #232a3a); }
.do-table th { color: var(--text-secondary, #8b93a7); font-weight: 500; font-size: 12px; }
.do-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.do-table .empty { color: var(--text-secondary, #8b93a7); font-style: italic; }