/* Control room — app styles on top of design-kit (Swiss Rationalist). */

.muted { color: var(--ink-3); }
.small { font-size: var(--t-12); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.err { color: var(--err); }
code { font-family: var(--font-mono); font-size: var(--t-12); }
.label { font-size: var(--t-10); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--ink-3); margin-bottom: var(--s4); }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.link-btn--down { color: var(--err); font-weight: 600; }
.toolbar-row { display: flex; gap: var(--s8); flex-wrap: wrap; align-items: center; }
.content { min-width: 0; }
.page-heading { min-width: 0; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s16); flex-wrap: wrap; }

/* status dots */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-strong); flex: none; vertical-align: middle; }
.dot--up { background: var(--ok); }
.dot--degraded { background: var(--warn); }
.dot--down { background: var(--err); box-shadow: 0 0 0 3px var(--err-dim); }
.status-word { font-weight: 600; }
.status-word--up { color: var(--ok); }
.status-word--degraded { color: var(--warn); }
.status-word--down { color: var(--err); }
.env-badge { font-family: var(--font-mono); font-size: var(--t-10); text-transform: uppercase; letter-spacing: .06em; padding: 0 4px; border: 1px solid var(--warn); color: var(--warn); border-radius: var(--r1); margin-left: 4px; vertical-align: 1px; }

/* segmented control */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.segmented button { border: 0; background: none; padding: 5px 10px; font: inherit; font-size: var(--t-12); color: var(--ink-2); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.is-on { background: var(--accent-dim); color: var(--accent); font-weight: 600; }

/* sections */
.cr-section { margin-top: var(--s32); }
.cr-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s12); border-bottom: 1px solid var(--line-strong); padding-bottom: var(--s8); margin-bottom: var(--s12); }
.cr-section-head h2 { font-size: var(--t-13); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--ink-1); }
.stats-grid { margin-top: var(--s24); }

/* overall summary */
.summary { display: flex; gap: var(--s12); align-items: flex-start; margin-top: var(--s20); padding: var(--s16); border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); }
.summary .dot { width: 12px; height: 12px; margin-top: 4px; }
.summary strong { font-size: var(--t-15); }
.summary--up { border-left-color: var(--ok); }
.summary--degraded { border-left-color: var(--warn); background: var(--warn-dim); }
.summary--down { border-left-color: var(--err); background: var(--err-dim); }
.summary-list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--t-13); }

/* service list */
.svc-list { border: 1px solid var(--line); background: var(--surface); }
.svc + .svc { border-top: 1px solid var(--line); }
.svc-row { width: 100%; display: grid; grid-template-columns: 12px minmax(130px, 1fr) minmax(0, 2fr) 200px 64px 270px 56px; align-items: center; gap: var(--s12);
  padding: 10px var(--s12); background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.svc-row:hover { background: var(--bg-inset); }
.svc-name { font-weight: 600; font-size: var(--t-13); white-space: nowrap; }
.svc-desc { color: var(--ink-3); font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-latency, .svc-uptime { font-family: var(--font-mono); font-size: var(--t-11); color: var(--ink-2); text-align: right; }
.svc-flags { display: flex; gap: 4px; justify-content: flex-end; min-width: 0; }
.flag { font-size: var(--t-11); padding: 1px 6px; border-radius: var(--r1); white-space: nowrap; }
.flag--warn { background: var(--warn-dim); color: var(--warn); }
.flag--err { background: var(--err-dim); color: var(--err); }
.svc-detail { padding: var(--s12) var(--s16) var(--s16) 36px; background: var(--bg-inset); border-top: 1px solid var(--line); }
.svc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24); }
.checks { list-style: none; margin: 0; padding: 0; font-size: var(--t-13); }
.checks li { padding: 3px 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.checks li .dot { align-self: center; }

.daybars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 1px; height: 22px; }
.bar { display: block; border-radius: 1px; }
.bar--none { background: var(--line); }
.bar--up { background: var(--ok); opacity: .75; }
.bar--degraded { background: var(--warn); }
.bar--down { background: var(--err); }

/* tables */
.cr-table { width: 100%; font-size: var(--t-13); }
.cr-table td, .cr-table th { vertical-align: middle; }
.cr-table tr.clickable { cursor: pointer; }
.cr-table tr.revoked td { opacity: .5; }
.cr-table tr.sub > td { background: var(--bg-inset); padding: var(--s12); }
.cr-table.inner { background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-12); border: 1px solid var(--line); padding: 2px 8px; border-radius: var(--r2); background: var(--surface); color: var(--ink-2); font-family: inherit; cursor: default; }
button.chip { cursor: pointer; }
.chip--down { border-color: var(--err); color: var(--err); }
.chip--degraded { border-color: var(--warn); color: var(--warn); }

/* heatmap */
.heat { display: inline-block; font-family: var(--font-mono); font-size: var(--t-10); color: var(--ink-3); }
.heat-row { display: grid; grid-template-columns: 34px repeat(24, 22px); gap: 2px; align-items: center; margin-bottom: 2px; }
.heat-head span { text-align: left; }
.heat-cell { display: block; height: 18px; background: var(--bg-inset); }
.heat-cell.is-on { background: var(--accent); }

/* person × app matrix */
.matrix-wrap { overflow-x: auto; }
.matrix th.rot { height: 110px; vertical-align: bottom; white-space: nowrap; }
.matrix th.rot span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; }
.mcell { position: relative; min-width: 54px; text-align: center; font-family: var(--font-mono); font-size: var(--t-11); }
.mcell i { position: absolute; inset: 3px; background: var(--accent-dim); border: 1px solid var(--accent-mid); }
.mcell span { position: relative; }

/* person page */
.days-strip { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; min-height: 90px; }
.days-col { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 1px; width: 22px; flex: none; }
.days-col span { font-size: 9px; color: var(--ink-3); writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 4px; height: 44px; }
.days-col i { display: block; }
.app-c--0 { background: var(--accent); } .app-c--1 { background: var(--ok); } .app-c--2 { background: var(--warn); } .app-c--3 { background: #6b5ca5; }
.app-c--4 { background: #2b7a99; } .app-c--5 { background: #b3594e; } .app-c--6 { background: #7a7a74; } .app-c--7 { background: #3f8f7f; }
.tl-day { margin-bottom: var(--s16); }
.tl-day-title { font-weight: 600; font-size: var(--t-13); padding: 4px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; text-transform: capitalize; }
.tl-row { display: grid; grid-template-columns: 52px 150px 1fr; gap: var(--s12); font-size: var(--t-12); padding: 2px 0; }
.tl-time { font-family: var(--font-mono); color: var(--ink-3); }
.tl-app { color: var(--ink-2); }

/* admin */
.form-row { display: flex; gap: var(--s8); margin-bottom: var(--s12); flex-wrap: wrap; }
.form-row .form-select { width: auto; }
.key-once { display: flex; flex-wrap: wrap; gap: var(--s8); align-items: center; padding: var(--s12); border: 1px solid var(--warn); background: var(--warn-dim); margin-bottom: var(--s12); font-size: var(--t-13); }
.key-once .key { background: var(--surface); padding: 4px 8px; border: 1px solid var(--line); user-select: all; }

@media (max-width: 1100px) {
  .svc-row { grid-template-columns: 12px minmax(110px, 1fr) auto 60px 56px; }
  .svc-desc, .daybars { display: none; }
  .svc-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-row { grid-template-columns: 12px 1fr 56px; }
  .svc-flags, .svc-latency { display: none; }
  .svc-detail { padding-left: var(--s16); }
}

/* phone: same shell rules as Evolution */
@media (max-width: 700px) {
  .topbar { padding: 8px; height: auto; min-height: 48px; flex-wrap: wrap; gap: 8px; }
  .topbar .brand-page, .topbar .brand-sep, .topbar .user-tag { display: none; }
  .topbar-right { gap: 6px; }
  .shell, .shell.shell--collapsed { display: block; margin-top: 56px; }
  .shell .sidebar, .shell.shell--collapsed .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .shell .sidebar-toggle { display: none; }
  .shell .sidebar .sidebar-nav, .shell.shell--collapsed .sidebar .sidebar-nav { display: block; }
  .sidebar .nav-section { display: flex; flex-wrap: wrap; align-items: center; }
  .sidebar .nav-section-title { width: 100%; }
  .sidebar .nav-link { padding: 10px; }
  .shell .content, .shell.shell--collapsed .content { margin-left: 0; width: 100%; }
  .page { padding: 10px; }
  .page-header { display: block; }
  .page-header .page-subtitle { margin-top: 4px; }
  .page-header .segmented, .page-header .toolbar-row { margin-top: 10px; }
  .segmented { flex-wrap: wrap; }
  .cr-section-head { flex-wrap: wrap; }
  .cr-table { display: block; overflow-x: auto; }
  .heat { overflow-x: auto; max-width: 100%; display: block; }
  .tl-row { grid-template-columns: 44px 1fr; }
  .tl-what { grid-column: 2; }
}
.scroll-x { overflow-x: auto; max-width: 100%; }