/*
 * Admin console theme — maps Peppi design tokens onto the vendored, scoped
 * Oat UI bundle (oat-admin.css, loaded just before this file) and styles the
 * operator shell chrome (topnav, sidebar nav groups, page scaffold).
 *
 * Scope: everything here applies only inside [data-oat-root] — the wrapper
 * rendered by screens/admin/adminShell.ts. The patient app is untouched.
 *
 * Light-only by design: the Peppi token set has no dark palette (see
 * peppi-design-tokens.css), so Oat's automatic light-dark() switching is
 * pinned to light to avoid a half-themed dark mode.
 */

[data-oat-root] {
  display: block;
  height: 100dvh;
  box-sizing: border-box;
  color-scheme: light;

  /* ----- Oat theme tokens ← Peppi design tokens ----- */
  --background: var(--color-surface-page);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface-raised);
  --card-foreground: var(--color-text-primary);
  --primary: var(--color-brand-primary);
  --primary-foreground: var(--color-text-inverse);
  --secondary: var(--color-surface-tint);
  --secondary-foreground: var(--color-brand-navy);
  --muted: var(--color-surface-tint);
  --muted-foreground: var(--color-text-secondary);
  --faint: #fafcfe;
  --faint-foreground: var(--color-text-muted);
  --accent: var(--color-surface-tint);
  --danger: var(--color-danger);
  --danger-foreground: var(--color-text-inverse);
  --success: var(--color-success);
  --success-foreground: var(--color-text-inverse);
  --warning: var(--color-warning);
  --warning-foreground: var(--color-brand-ink);
  --border: var(--color-border);
  --input: #b9d2ec; /* one step darker than --color-border for affordance */
  --ring: var(--color-brand-blue-bright);

  /* Oat and Peppi share the --font-sans custom-property name, so the Oat
   * value set on this element shadows the :root one; restate the Peppi
   * stack literally (var(--font-sans) here would be a self-reference). */
  --font-sans: 'DM Sans', Inter, Montserrat, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius-small: 6px;
  --radius-medium: var(--border-radius-tile); /* 10px */
  --radius-large: 14px;

  --shadow-small: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-large: var(--shadow-lg);

  --font-bold: var(--font-weight-bold);

  --sidebar-width: 16rem;
}

/* The vendored Oat bundle maps --_variant-color only for success/warning/
 * danger/error; "info" (informational badges, e.g. a batch-provision
 * duplicate) would otherwise render as the unstyled default. */
[data-oat-root] [data-variant='info'] {
  --_variant-color: var(--color-brand-blue-bright);
}

/* Admin screens run full-bleed: drop the #app padding reserved for the
 * patient header/tab-bar (base.css). */
#app:has([data-oat-root]) {
  padding: 0;
  display: block;
}

/* The fixed patient header (z-index 100) is NOT reliably self-hidden on
 * operator routes: PeppiAppHeader._applyVisibility shows it whenever
 * onboarding status is not exactly `false`, and an operator session has no
 * patientId so the status stays 'unknown' forever — leaving the blue patient
 * bar covering the admin topnav. Hide it whenever the admin shell is
 * mounted. Safe against the component's own inline styles: when visible it
 * sets style.display = '' (no inline value), so this rule wins. */
body:has(#app [data-oat-root]) peppi-app-header {
  display: none;
}

/* Routed screen hosts are custom elements; give them a box. */
.admin-screen {
  display: block;
}

/* ----- Topnav: the one signature element — clinical navy gradient bar ----- */
[data-oat-root] nav[data-topnav] {
  background: var(--gradient-clinical-header);
  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] [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] .admin-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] .admin-topnav__brand span {
  font-weight: var(--font-weight-regular);
  opacity: 0.85;
}

[data-oat-root] .admin-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] .admin-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 last thing in the bar, and the thing that pushes the trailing
   group right. The org chip above 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] .admin-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] .admin-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] .admin-topnav__org + .admin-topnav__sign-out {
    margin-inline-start: 0;
  }
}

[data-oat-root] nav[data-topnav] .admin-topnav__sign-out:hover,
[data-oat-root] nav[data-topnav] .admin-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] .admin-topnav__org {
    display: none;
  }
}

/* ----- Sidebar ----- */
[data-oat-root] peppi-admin-nav[data-sidebar] {
  background-color: var(--color-surface-raised);
}

[data-oat-root] .admin-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);
}

[data-oat-root] [data-sidebar] nav ul + .admin-nav__group-label {
  margin-block-start: var(--space-2);
}

[data-oat-root] [data-sidebar] nav a {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
}

[data-oat-root] [data-sidebar] nav a[aria-current='page'] {
  background-color: var(--color-surface-tint);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
}

/* ----- Content field ----- */
[data-oat-root] [data-sidebar-layout] > main {
  background-color: var(--color-surface-page);
  padding: var(--space-6) var(--space-8) var(--space-12);
}

@media (max-width: 768px) {
  [data-oat-root] [data-sidebar-layout] > main {
    padding: var(--space-4) var(--space-4) var(--space-10);
  }
}

[data-oat-root] .admin-main {
  max-width: 1200px;
  margin: 0 auto;
}

[data-oat-root] .admin-main__header {
  margin-block-end: var(--space-6);
}

[data-oat-root] .admin-main__header h1 {
  font-size: var(--font-size-28);
  margin: 0 0 var(--space-1);
}

[data-oat-root] .admin-main__lede {
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  max-width: 70ch;
}

/* ----- Shared bits ----- */
[data-oat-root] .mono {
  font-family: var(--font-mono);
  font-size: 0.8125em;
}

/* The vendored Oat bundle ships mt/mb utilities for steps 2, 4, 6, and 8
 * only. Admin and support screens also space with step 3. */
[data-oat-root] .mt-3 { margin-block-start: var(--space-3); }
[data-oat-root] .mb-3 { margin-block-end: var(--space-3); }

/* Wide matrix tables (Flags by Org): first column stays pinned while the
 * rest scrolls horizontally inside Oat's div.table overflow wrapper. */
[data-oat-root] .table--sticky-first table :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--color-surface-raised);
  box-shadow: 1px 0 0 var(--color-border);
}

/* Admin-home surface cards */
[data-oat-root] .admin-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

[data-oat-root] .admin-home__grid a {
  display: block;
  height: 100%;
  text-decoration: none;
}

[data-oat-root] .admin-home__grid .card {
  height: 100%;
  transition:
    border-color var(--motion-fast) var(--easing-standard),
    box-shadow var(--motion-fast) var(--easing-standard),
    translate var(--motion-fast) var(--easing-standard);
}

[data-oat-root] .admin-home__grid a:hover .card,
[data-oat-root] .admin-home__grid a:focus-visible .card {
  border-color: var(--color-brand-blue-light);
  box-shadow: var(--shadow-md);
  translate: 0 -1px;
}

[data-oat-root] .admin-home__grid h3 {
  font-size: var(--font-size-16);
  margin: 0 0 var(--space-1);
  color: var(--color-brand-navy);
}

[data-oat-root] .admin-home__grid p {
  font-size: var(--font-size-13);
  color: var(--color-text-secondary);
}

/* ----- Changelog (one screen under both /admin and /support) ----- */
[data-oat-root] .changelog-controls {
  align-items: flex-end;
}

[data-oat-root] .changelog-search {
  flex: 1 1 18rem;
}

[data-oat-root] .changelog-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block-end: var(--space-1);
}

[data-oat-root] .changelog-chip {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-regular);
}

[data-oat-root] .changelog-chip[aria-pressed='true'] {
  background-color: var(--color-surface-tint);
  border-color: var(--color-brand-blue-light);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
}

[data-oat-root] .changelog-error {
  align-items: center;
  justify-content: space-between;
}

[data-oat-root] .changelog-day + .changelog-day {
  margin-block-start: var(--space-4);
}

[data-oat-root] .changelog-day__heading {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-2) 0;
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

[data-oat-root] .changelog-list {
  margin: 0;
}

[data-oat-root] .changelog-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

[data-oat-root] .changelog-entry:last-child {
  border-bottom: none;
}

[data-oat-root] .changelog-entry__description {
  margin: 0;
  font-size: var(--font-size-14);
}

[data-oat-root] .changelog-entry__meta {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

[data-oat-root] .changelog-entry__time {
  white-space: nowrap;
  font-size: var(--font-size-12);
}

[data-oat-root] .changelog-count {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-13);
}