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

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

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

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