/*
 * Support console theme — maps Peppi design tokens onto the vendored, scoped
 * Oat UI bundle (oat-admin.css, loaded before this file) and styles the
 * support console shell chrome (topnav, sidebar nav groups, page scaffold).
 *
 * Support reuses the SAME [data-oat-root] scope and full-bleed shell as the
 * admin console (admin.css) — it is also a full-viewport staff console — but
 * gets its own topnav accent and class names (support-*), because an operator
 * can hop between /admin and /support and the bar must answer "which console
 * am I in?" at a glance. See admin.css for the token block, .mono, and the
 * unqualified rules support gets for free.
 */

/* Routed screen hosts are custom elements; give them a box (mirrors
 * admin.css's .admin-screen). */
.support-screen {
  display: block;
}

/* SupportNav is nested inside the aside; Oat's direct-child selectors
   do not reach its navigation. Keep this bridge scoped to support. */
[data-oat-root] peppi-support-nav { display: block; padding: var(--space-2); }
[data-oat-root] peppi-support-nav nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}
[data-oat-root] peppi-support-nav nav li { margin: 0; }
[data-oat-root] peppi-support-nav nav a {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-medium); text-decoration: none;
  color: var(--color-text-primary);
}
[data-oat-root] peppi-support-nav nav a:is(:hover, [aria-current="page"]) {
  background: var(--color-surface-raised);
  color: var(--color-brand-navy); font-weight: var(--font-weight-semibold);
}
.support-search > label { display: block; margin-bottom: var(--space-1); }
.support-search__controls { display: flex; align-items: center; gap: var(--space-2); }
.support-search__controls input { min-width: 0; flex: 1; }
.support-search__controls button { flex-shrink: 0; }
.support-account { margin-top: var(--space-5); }
.support-account__identity, .support-identifier, .support-case-tools {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.support-account__identity { flex-wrap: wrap; }
.support-account__identity > div { min-width: 0; }
.support-account__label { display: block; color: var(--color-text-secondary); font-size: var(--font-size-12); }
.support-account .mono, .support-identifier .mono { overflow-wrap: anywhere; }
.support-account__status { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); }
.support-account__status span { font-size: var(--font-size-14); }
.support-copy-status:empty { display: none; }
.support-copy-status { display: block; margin-top: var(--space-2); }
.support-attention { margin-block: var(--space-3); padding: var(--space-3); border-left: 3px solid var(--color-brand-navy); background: var(--color-surface-raised); }
.support-attention > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.support-attention > div + div { margin-top: var(--space-2); }
.support-sections { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-block: var(--space-5); }
[data-oat-root] .support-sections a { padding: var(--space-3); text-decoration: none; color: var(--color-text-secondary); border-bottom: 3px solid transparent; }
[data-oat-root] .support-sections a[aria-current="page"] { color: var(--color-brand-navy); border-bottom-color: var(--color-brand-navy); font-weight: var(--font-weight-semibold); }
.support-overview { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); align-items: start; }
.support-overview .card { margin-top: 0; min-width: 0; }
.support-overview h2, [id^="support-section-"] h2 { font-size: var(--font-size-18); }
.support-overview th { width: 35%; }
.support-identifier button { flex-shrink: 0; }
.support-action-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.support-permanent { margin-top: var(--space-5); }
.support-case-workspace { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: var(--space-4); margin-top: var(--space-4); }
.support-case-list { display: flex; flex-direction: column; gap: var(--space-2); }
[data-oat-root] button.support-case-choice {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.support-case-choice strong, .support-case-choice span { display: block; }
[data-oat-root] .support-case-choice[aria-pressed="true"] { border-color: var(--color-brand-navy); background: var(--color-surface-raised); }
.support-case-choice span { font-size: var(--font-size-12); }
.support-case-detail { min-width: 0; overflow-wrap: anywhere; }
.support-main [hidden] { display: none !important; }
@media (max-width: 900px) {
  .support-overview, .support-case-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  [data-oat-root] nav[data-topnav].support-topnav { padding-inline: var(--space-2); gap: var(--space-2); }
  .support-search__controls, .support-case-tools { flex-wrap: wrap; }
  .support-search__controls input { flex-basis: 100%; }
  .support-identifier { flex-wrap: wrap; }
  [data-oat-root] .support-sections a { padding: var(--space-2); }
}

/* ----- Topnav: flat navy, distinct from admin's gradient -----
 *
 * Qualified with .support-topnav (emitted by supportShell on the <nav>
 * itself) rather than relying on file-load order against admin.css's
 * identical-looking `[data-oat-root] nav[data-topnav]` selector — a
 * class-qualified selector wins on specificity regardless of load order,
 * so this stays correct even if the <link> order ever changes.
 */
[data-oat-root] nav[data-topnav].support-topnav {
  background: var(--color-brand-navy);
  border-bottom: none;
  box-shadow: var(--shadow-md);
  color: var(--color-text-inverse);
  min-height: 52px;
  gap: var(--space-3);
}

[data-oat-root] nav[data-topnav].support-topnav [data-sidebar-toggle] {
  color: var(--color-text-inverse);
  border-color: rgba(255, 255, 255, 0.35);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
}

[data-oat-root] .support-topnav__brand {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-18);
  letter-spacing: 0.01em;
}

[data-oat-root] .support-topnav__brand span {
  font-weight: var(--font-weight-regular);
  opacity: 0.85;
}

[data-oat-root] .support-topnav__role {
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

[data-oat-root] .support-topnav__org {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  color: rgba(255, 255, 255, 0.75);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* The topnav is a flex row, where an item's default `min-width: auto` means
     it never shrinks below its own content. A 26-character org id therefore
     used to widen the bar past the viewport and push the trailing item off the
     screen entirely rather than ellipsising, which is what the three
     properties above were asking for. `min-width: 0` lets it shrink and the
     ellipsis finally do its job; the sign-out button beside it refuses to
     shrink at all, so the chip is what gives way on a narrow window. */
  min-width: 0;
  flex-shrink: 1;
}

/* Sign out: the support analogue of admin.css's .admin-topnav__sign-out rule,
   and it carries the same auto-margin handoff. The org chip claims
   `margin-inline-start: auto` when it is rendered, but a session with no org id
   renders no chip at all, so this button has to claim the auto margin for
   itself and hand it back whenever the chip does precede it.

   The `nav[data-topnav]` qualifier is load-bearing, not decoration. The
   vendored bundle styles every button under
   `[data-oat-root] :is(button, [type=submit], [type=reset], [type=button], a.button)`,
   which `:is()` scores at (0,2,1) — one step above a bare
   `[data-oat-root] .support-topnav__sign-out`. Without the qualifier the fill,
   border, padding, and font size below all lose the cascade and the button
   renders as a solid primary-blue pill, the loudest thing on the bar. The
   sidebar-toggle rule above wins the same fight the same way. */
[data-oat-root] nav[data-topnav] .support-topnav__sign-out {
  margin-inline-start: auto;
  /* Never shrinks and never wraps: ending a session has to stay reachable at
     every width, and the org chip beside it is what absorbs the squeeze. */
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-medium);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-size: var(--font-size-12);
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

/* The handoff itself. Scoped above the breakpoint on purpose: `display: none`
   hides the chip's box but leaves it in the DOM, so the adjacent-sibling
   selector keeps matching below 768px and would zero the button's auto margin
   while nothing else was left to claim it — the button then sat wherever the
   role badge happened to end, mid-bar, instead of on the right edge. */
@media (min-width: 769px) {
  [data-oat-root] nav[data-topnav] .support-topnav__org + .support-topnav__sign-out {
    margin-inline-start: 0;
  }
}

[data-oat-root] nav[data-topnav] .support-topnav__sign-out:hover,
[data-oat-root] nav[data-topnav] .support-topnav__sign-out:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
}

/* On a narrow window the bar runs out of room before the org chip has finished
   ellipsising, and what falls off the right edge is the sign-out button. Drop
   the chip below the same 768px breakpoint the sidebar overlay uses: the org id
   is context an operator can also read off the page they are on, and ending a
   session is not something to make anyone scroll a topnav sideways for. The
   chip's `margin-inline-start: auto` goes with it, which is exactly why the
   button carries its own copy of that margin. */
@media (max-width: 768px) {
  [data-oat-root] nav[data-topnav] .support-topnav__org {
    display: none;
  }
}

/* ----- Sidebar (support analogue of admin.css's peppi-admin-nav rule) ----- */
[data-oat-root] aside[data-sidebar] {
  background-color: var(--color-surface-raised);
}

[data-oat-root] .support-nav__group-label {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-3) var(--space-1);
}

/* ----- Content field ----- */
.support-main {
  max-width: 1200px;
  margin: 0 auto;
}

.support-main__header {
  margin-block-end: var(--space-6);
}

/* Breadcrumb trail (components/breadcrumb.ts). The separator is drawn here so
   the markup stays a plain list; the empty alternative text keeps a screen
   reader from reading it out. */
[data-oat-root] .breadcrumb {
  margin-block-end: var(--space-3);
  font-size: var(--font-size-14);
  color: var(--color-text-secondary);
}
[data-oat-root] .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
[data-oat-root] .breadcrumb li + li::before {
  content: '>';
  content: '>' / '';
  margin-inline-end: var(--space-2);
}

.support-main__header h1 {
  font-size: var(--font-size-28);
  margin: 0 0 var(--space-1);
}

.support-main__lede {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  max-width: 70ch;
}

/* Standalone hint text outside a [data-field] context (account-summary
 * badges, empty/not-found states, the confirm-panel restriction ID). Only
 * [data-field] [data-hint] is styled by oat-admin.css:1032 — this rule gives
 * the console's other data-hint spans the same muted treatment. */
.support-main [data-hint] {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-11);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Statistics screen (SupportStatsScreen.ts, supportStatsCharts.ts)
 *
 * Colours come from the Peppi tokens only, so the screen follows the token set
 * if it ever gains a dark palette. The one exception is a legend swatch, whose
 * colour is the series colour the canvas draws with and arrives as --swatch.
 * Every box here can shrink (min-width: 0) and every wide table scrolls inside
 * its own wrapper, so the page never scrolls sideways. The 16px phone gutter is
 * the `main` padding in admin.css; this block adds nothing to it.
 *
 * Every selector carries the [data-oat-root] qualifier, like the rest of this
 * file, so a rule outranks Oat's own element selectors (`.card h2`, `table td`)
 * instead of losing to them on source order or specificity.
 * ------------------------------------------------------------------------- */

[data-oat-root] .support-stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

[data-oat-root] .support-stats-control {
  min-width: 0;
}

[data-oat-root] .support-stats-control label {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
}

[data-oat-root] .support-stats-control select {
  max-width: 100%;
}

[data-oat-root] .support-stats-status {
  font-size: var(--font-size-12);
  color: var(--color-text-muted);
}

[data-oat-root] .support-stats-status:empty {
  display: none;
}

[data-oat-root] .support-stats-computed {
  margin-block: 0 var(--space-3);
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}

/* Headline numbers: equal-width tiles that wrap, two across on a phone. */
[data-oat-root] .support-stats-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

[data-oat-root] .support-stats-tiles > peppi-kpi-tile {
  display: block;
  min-width: 0;
}

/* One metric group is one card: title, a muted group label, the legend, the
   chart, and a collapsed data table. */
[data-oat-root] .support-stats-card {
  min-width: 0;
  max-width: 100%;
}

[data-oat-root] .support-stats-card h2 {
  margin: 0;
  font-size: var(--font-size-18);
  color: var(--color-text-primary);
}

[data-oat-root] .support-stats-card > [data-hint] {
  margin-block: 0 var(--space-3);
}

[data-oat-root] .support-stats-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 220px;
}

[data-oat-root] .support-stats-canvas--funnel {
  height: var(--support-stats-funnel-height, 220px);
}

[data-oat-root] .support-stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-block-end: var(--space-2);
  font-size: var(--font-size-12);
  color: var(--color-text-secondary);
}

[data-oat-root] .support-stats-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

[data-oat-root] .support-stats-legend__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--swatch);
}

/* Tables follow the roster's: Oat's div.table wrapper and plain table. What
   this adds is alignment. The first column is the row label and reads from the
   start; every other column holds a number and lines up on its right edge in
   tabular figures, so digits stack. */
[data-oat-root] .support-stats-table {
  font-variant-numeric: tabular-nums;
}

[data-oat-root] .support-stats-table :is(th, td):not(:first-child) {
  text-align: end;
}

[data-oat-root] .support-stats-table td {
  white-space: nowrap;
}

[data-oat-root] .support-stats-table thead th {
  vertical-align: bottom;
}

[data-oat-root] .support-stats-table tbody th {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Oat's div.table sets min-width: 320px, which on a phone is wider than a card
   or an open panel. Both wrappers drop it and scroll their table instead. The
   [data-oat-root] qualifier is needed to outrank Oat's own selector. */
[data-oat-root] .support-stats-data,
[data-oat-root] .support-stats-scroll {
  min-width: 0;
}

/* A "Show data" panel scrolls on its own, header row pinned. */
[data-oat-root] .support-stats-data {
  /* Oat gives div.table width: 100% and an open panel gives its content a
     margin, so the pair would run past the panel; auto fills it instead. */
  width: auto;
  max-height: 320px;
  overflow: auto;
}

[data-oat-root] .support-stats-data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-surface-raised);
}

[data-oat-root] .support-stats-scroll {
  max-width: 100%;
}

@media (max-width: 480px) {
  [data-oat-root] .support-stats-control {
    flex: 1 1 100%;
  }

  [data-oat-root] .support-stats-control select {
    width: 100%;
  }

  [data-oat-root] .support-stats-card {
    padding: var(--space-3);
  }
}

/* ---------------------------------------------------------------------------
 * Command palette overlay
 * ------------------------------------------------------------------------- */

/* The host is a sibling of #app (see index.html) and is inert until opened. */
peppi-command-palette {
  display: contents;
}

/* The Oat wrapper is the scrim. admin.css sets `[data-oat-root] { height:
 * 100dvh; display: block }` unqualified, so the second attribute is needed to
 * take it out of document flow — same escape-hatch shape as
 * [data-oat-root][data-oat-auth] in auth-oat.css. */
[data-oat-root][data-oat-palette] {
  position: fixed;
  inset: 0;
  height: 100%;
  display: grid;
  grid-template-rows: min-content;
  justify-items: center;
  align-content: start;
  padding-block-start: 12vh;
  padding-inline: var(--space-4);
  background: rgb(0 0 0 / 0.45);
  /* Above the patient app header and tab bar (z-index 100, components.css)
   * and above the 200/500 layers used elsewhere in components.css. */
  z-index: 900;
}

[data-oat-root][data-oat-palette] .command-palette__panel {
  width: min(100%, 34rem);
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

[data-oat-root][data-oat-palette] .command-palette__panel input {
  width: 100%;
  box-sizing: border-box;
}

[data-oat-root][data-oat-palette] .command-palette__list {
  overflow-y: auto;
}

[data-oat-root][data-oat-palette] .command-palette__group-label {
  font-size: var(--font-size-11);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
}

[data-oat-root][data-oat-palette] .command-palette__option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
}

[data-oat-root][data-oat-palette] .command-palette__option--active {
  background-color: var(--color-brand-navy);
  color: var(--color-text-inverse);
}

[data-oat-root][data-oat-palette] .command-palette__option-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-12);
  color: var(--color-text-muted);
  white-space: nowrap;
}

[data-oat-root][data-oat-palette] .command-palette__option--active .command-palette__option-path {
  color: rgba(255, 255, 255, 0.75);
}

[data-oat-root][data-oat-palette] .command-palette__hint,
[data-oat-root][data-oat-palette] .command-palette__empty {
  font-size: var(--font-size-12);
  color: var(--color-text-muted);
  padding: var(--space-2);
}