/* The office: the city's screens restyled as a plain business dashboard. Same components as
 * the game (u-panel, u-btn, u-text...), dressed down -- white cards, hairline borders, a blue
 * accent, the system font, flat buttons, compact tables. Nothing here should look like a game
 * from across the room. */

body.office {
  --o-bg: #F4F6F9;
  --o-card: #FFFFFF;
  --o-line: #E3E7EE;
  --o-ink: #1F2933;
  --o-muted: #5B6675;
  --o-faint: #8A94A3;
  --o-accent: #2F6FEB;
  --o-accent-soft: #E8F0FE;
  --o-side: #1E2533;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #F4F6F9;
  --divider: #E3E7EE;
  --warning: #2F6FEB;

  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--o-bg);
  color: var(--o-ink);
  font: 13px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---- Frame ----------------------------------------------------------------------------- */

.o-screen { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.o-side { background: var(--o-side); color: #C9D1DC; display: flex; flex-direction: column; padding: 16px 10px; gap: 12px; overflow-y: auto; }
.o-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; font-size: 15px; padding: 4px 8px 10px; }
.o-logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--o-accent); color: #fff; font-size: 15px; }
.o-nav { display: flex; flex-direction: column; gap: 2px; }
.o-nav-item { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 6px; color: #C9D1DC; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.o-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.o-nav-item.active { background: rgba(47, 111, 235, 0.22); color: #fff; font-weight: 600; }
.o-badge { background: var(--o-accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.o-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.o-link { all: unset; cursor: pointer; color: #9FB3D1; font-size: 12px; padding: 4px 2px; }
.o-link:hover { color: #fff; text-decoration: underline; }

.o-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.o-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px; background: var(--o-card); border-bottom: 1px solid var(--o-line); }
.o-top h1 { margin: 0; font-size: 18px; font-weight: 650; }
.o-spacer { flex: 1; }
.o-menu { all: unset; display: none; cursor: pointer; font-size: 18px; padding: 2px 6px; }
.o-strip { display: flex; gap: 22px; }
.o-strip-cell { display: flex; flex-direction: column; align-items: flex-end; }
.o-strip-cell .k { font-size: 11px; color: var(--o-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.o-strip-cell .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.o-strip-cell.live .v { color: #1E8E4F; }
.o-body { flex: 1; overflow-y: auto; padding: 20px 24px 60px; }
.o-body > .u-col { max-width: 1400px; }

/* ---- The drawer -------------------------------------------------------------------------- */

.o-drawer {
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
  background: var(--o-card); border-left: 1px solid var(--o-line); box-shadow: -12px 0 30px rgba(15, 23, 42, 0.12);
  display: flex; flex-direction: column; z-index: 40;
}
.o-drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--o-line); }
.o-drawer-head > div { flex: 1; min-width: 0; }
.o-drawer-title { font-size: 16px; font-weight: 650; }
.o-drawer-sub { font-size: 12px; color: var(--o-muted); }
.o-close { all: unset; cursor: pointer; font-size: 16px; color: var(--o-muted); padding: 2px 6px; border-radius: 4px; }
.o-close:hover { background: var(--o-bg); }
.o-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 40px; }

/* ---- The city's components, dressed down --------------------------------------------------- */

.office .u-panel { background: var(--o-card) !important; border: 1px solid var(--o-line) !important; border-radius: 8px !important; box-shadow: none; }
.office .o-drawer .u-panel, .office .o-section .u-panel { background: #FAFBFC !important; }
.office .o-section { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.office .u-text { color: inherit; }
.office .s-title { font-size: 18px; font-weight: 650; letter-spacing: 0; }
.office .s-heading { font-size: 14px; font-weight: 650; }
.office .s-small { font-size: 12px; }
.office .s-number { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }

.office .u-btn, .office .btn {
  font: 600 13px/1.2 var(--font); border-radius: 6px; padding: 7px 12px; border: 1px solid var(--o-line); border-bottom-width: 1px;
  background: var(--o-card); color: var(--o-ink); transform: none !important;
}
.office .u-btn:active:not(:disabled) { padding-top: 7px; background: var(--o-bg); }
.office .u-btn.v-primary { background: var(--o-accent); border-color: var(--o-accent); color: #fff; }
.office .u-btn.v-danger { background: #fff; border-color: #E8453A; color: #C62D22; }
.office .u-btn.v-quiet { background: transparent; border-color: transparent; color: var(--o-accent); }
.office .u-btn.tall { padding: 9px 12px; font-size: 13px; }
.office .u-chip { border-radius: 4px; font-size: 11px; }
.office .u-input, .office .u-select, .office input, .office select {
  font: 13px var(--font); border-radius: 6px; border: 1px solid var(--o-line); background: #fff; color: var(--o-ink); padding: 7px 10px;
}
.office .u-meter { background: #EEF1F5; }
.office .u-link:hover { background: var(--o-accent-soft); }
.office .gem { filter: grayscale(1) brightness(0.55); width: 0.85em; height: 0.85em; }

/* KPIs */
.office .o-kpis { gap: 12px; }
.office .o-kpi .s-number { font-size: 20px; }

/* Tables */
.o-table-wrap { overflow-x: auto; max-height: none; border: 1px solid var(--o-line); border-radius: 6px; background: #fff; }
.o-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.o-table th { position: sticky; top: 0; background: #F8FAFC; text-align: left; font-weight: 600; color: var(--o-muted);
  border-bottom: 1px solid var(--o-line); padding: 0; white-space: nowrap; }
.o-table th .u-link { padding: 8px 10px; border-radius: 0; width: 100%; }
.o-table th.num .u-link { justify-content: flex-end; }
.o-table td { padding: 7px 10px; border-bottom: 1px solid #F0F2F5; vertical-align: middle; }
.o-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.o-table td.num > * { justify-content: flex-end; text-align: right; }
.o-table tr.o-row { cursor: pointer; }
.o-table tr.o-row:hover td { background: var(--o-accent-soft); }
.o-table td .u-meter { min-width: 70px; }

/* Gate and boot */
.o-boot { background: var(--o-bg); }
.o-boot .boot-card { background: #fff; border: 1px solid var(--o-line); box-shadow: none; }
.o-gate { display: grid; place-items: center; height: 100vh; height: 100dvh; }
.o-gate-card { background: #fff; border: 1px solid var(--o-line); border-radius: 10px; padding: 28px; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.o-gate-card h1 { margin: 0; font-size: 18px; }
.o-gate-card .stack { display: flex; flex-direction: column; gap: 8px; }
.o-btn { all: unset; cursor: pointer; text-align: center; padding: 9px 12px; border-radius: 6px; font-weight: 600; }
.o-btn.primary { background: var(--o-accent); color: #fff; }

/* Overlays (a rival's card, feedback, notices) in the same plain dress */
.office .overlay.dim { background: rgba(15, 23, 42, 0.35); }
.office .modal-card { border-radius: 10px !important; }
.office .toast { background: #1F2933; color: #fff; border-radius: 6px; }

/* ---- Narrow screens --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .o-screen { grid-template-columns: minmax(0, 1fr); }
  .o-side { position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; }
  body.o-nav-open .o-side { transform: none; box-shadow: 12px 0 30px rgba(0, 0, 0, 0.25); }
  .o-menu { display: inline-block; }
  .o-strip { gap: 12px; }
  .o-strip-cell:nth-child(3) { display: none; }
  .o-top { padding: 10px 14px; }
  .o-body { padding: 14px 12px 60px; }
  .o-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .o-strip-cell:nth-child(4) { display: none; }
  .o-top h1 { font-size: 16px; }
}