/* platform/_layout.css — platform brand tokens + role-specific rules.
   Shared admin-shell/card/btn/form/password-widget rules live in
   common/_shell.css, loaded right after this file.
   Platform keeps a distinct accent from org/customer's teal — a visual
   signal that this is the internal ops surface, not a themeing gap —
   but per docs/brand-palette.md ("never introduce additional brand
   colors") that accent is now the sheet's own Secondary Blue rather
   than an off-palette indigo. Sidebar background aliases to --ink
   (Primary Navy) for the same reason, matching org/customer. */

:root {
  --accent:      var(--secondary-blue);
  --accent-deep: var(--secondary-blue-deep);
  --sidebar-bg:  var(--hero-ground);
  --sidebar-w:   224px;
}

/* platform's page-header puts an optional action button (e.g. "New
   organisation") alongside the title, so title+sub are wrapped in
   .page-header-left rather than stacked directly in .page-header. */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

/* Status/filter tab bar — the same underline pattern (and class names) as
   org/appointments.css's .appt-tabs, restated here with the platform accent
   instead of teal (see the header note on keeping a distinct accent). Used
   by /platform/webhooks and /platform/notification-log. */
/* Tab bar: common/_components.css. */

/* Full-width row inside a .detail-grid (organisations.css owns the grid
   itself; notifications.html renders only this modifier). */
.detail-grid--full { grid-column: 1 / -1; }

/* ── Logs section (background / webhooks / notification log / impersonation) ──
   The four machinery ledgers share one nav item and this bar; each tab
   opens on a day-by-day chart (platform/_log_chart.html, data shaped by
   api/core/log_series.py) except Impersonation, which is a visit list.
   Bar colours are the status buckets from
   common/_components.css's map — the chart answers "how much of this
   went fine"; identity is never colour alone (per-bar title tooltips,
   the counted legend, and the full table below each chart). */
.logs-tabs { margin-bottom: 20px; }
.logs-subtabs { margin-bottom: 16px; }
.log-chart-card { margin-bottom: 20px; }
.log-chart { padding: 4px 22px 16px; }
.log-chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  border-bottom: 1px solid var(--border);
}
.log-chart-col {
  flex: 1;
  max-width: 26px;
  height: 100%;
  display: flex;
  /* column-reverse: DOM order is stacking order — the first segment sits
     on the baseline, so a run of good days reads as a solid green floor. */
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
}
.log-chart-seg { min-height: 2px; }
/* With column-reverse, :last-child is the visually TOP segment — the one
   rounded data-end, anchored to the baseline below it. */
.log-chart-col .log-chart-seg:last-child { border-radius: 3px 3px 0 0; }
.log-chart-seg--good { background: var(--status-good-fg); }
.log-chart-seg--bad  { background: var(--status-bad-fg); }
.log-chart-seg--wait { background: var(--status-wait-fg); }
.log-chart-seg--idle { background: var(--status-idle-fg); }
.log-chart-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.log-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.log-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.log-chart-key strong { color: var(--ink); font-weight: 600; }
.log-chart-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.log-chart-peak { margin-left: auto; }