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

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