/*
 * 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;
}

/* ----- 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);
}

.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);
}

/* ---------------------------------------------------------------------------
 * 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);
}