/*
 * platform-theme.css — SD-Agile Platform UI theme (Wave D, FR-421).
 *
 * Layered ON TOP of the vendored USWDS 3.0 dist (/static/uswds/css/uswds.min.css).
 * "USWDS + Stripe aesthetic": federal-compliant USWDS components (Section 508 / WCAG
 * 2.1 AA) with a premium surface treatment — soft off-white background, white cards
 * with gentle shadows, rounded corners, generous spacing, a strong visible focus ring.
 *
 * This file is hand-authored plain CSS (no Sass, no bundler — per CONSTITUTION §1.2.1).
 * The :root token block below is the CANONICAL shared palette: the generated-apps
 * chassis USWDS theme reuses the same token values so the platform UI and generated
 * apps look consistent (operator decision 2026-06-18).
 *
 * This single sheet replaces the two legacy conflicting stylesheets
 * (css/style.css #4A90E2 and css/styles.css #007bff) as pages migrate to USWDS.
 */

:root {
  /* ---- Shared design tokens (canonical; mirrored by the chassis theme) ---- */
  --sda-color-primary:        #005ea2; /* USWDS primary (blue-60v) */
  --sda-color-primary-dark:   #1a4480; /* USWDS primary-dark */
  --sda-color-primary-darker: #162e51;
  --sda-color-accent:         #00bde3; /* USWDS accent-cool */
  --sda-color-bg:             #f6f9fc; /* Stripe-style off-white canvas */
  --sda-color-surface:        #ffffff;
  --sda-color-ink:            #1b1b1b; /* USWDS ink */
  --sda-color-ink-muted:      #565c65; /* USWDS gray-cool-60 */
  --sda-color-border:         #dfe1e2; /* USWDS gray-cool-10 */
  --sda-color-error:          #b50909; /* USWDS error-dark */
  --sda-color-success:        #00a91c; /* USWDS success */
  --sda-color-warning:        #ffbe2e; /* USWDS warning */

  --sda-radius:        8px;
  --sda-radius-lg:     12px;
  --sda-shadow-card:     0 4px 16px rgba(10, 37, 64, 0.08);
  --sda-shadow-elevated: 0 12px 40px rgba(10, 37, 64, 0.16);

  --sda-space-xs: 0.5rem;
  --sda-space-sm: 0.75rem;
  --sda-space:    1rem;
  --sda-space-lg: 1.5rem;
  --sda-space-xl: 2.5rem;

  --sda-font-sans: "Public Sans Web", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Stripe-aesthetic canvas ---- */
body {
  background-color: var(--sda-color-bg);
  color: var(--sda-color-ink);
}

/* ---- Strong, always-visible focus ring (508 / WCAG 2.4.7) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.usa-button:focus-visible {
  outline: 0.25rem solid var(--sda-color-accent);
  outline-offset: 2px;
}

/* ---- Brand button: USWDS primary tinted to the shared palette ----
 * Rounded corners apply to ALL buttons; the background tint applies ONLY to the
 * DEFAULT (primary) button — never to variants (--outline/--unstyled/--secondary/
 * --base/--accent-*/--inverse), which carry their own USWDS bg+text and would
 * otherwise get a blue fill with mismatched (failing-contrast) text. */
.usa-button { border-radius: var(--sda-radius); }
.usa-button:not(.usa-button--outline):not(.usa-button--unstyled):not(.usa-button--secondary):not(.usa-button--base):not(.usa-button--accent-warm):not(.usa-button--accent-cool):not(.usa-button--inverse) {
  background-color: var(--sda-color-primary);
}
.usa-button:not(.usa-button--outline):not(.usa-button--unstyled):not(.usa-button--secondary):not(.usa-button--base):not(.usa-button--accent-warm):not(.usa-button--accent-cool):not(.usa-button--inverse):hover {
  background-color: var(--sda-color-primary-dark);
}
.usa-button:not(.usa-button--outline):not(.usa-button--unstyled):not(.usa-button--secondary):not(.usa-button--base):not(.usa-button--accent-warm):not(.usa-button--accent-cool):not(.usa-button--inverse):active {
  background-color: var(--sda-color-primary-darker);
}

/* ---- Card surface (Stripe soft shadow) ---- */
.sda-card {
  background: var(--sda-color-surface);
  border-radius: var(--sda-radius-lg);
  box-shadow: var(--sda-shadow-card);
  padding: var(--sda-space-xl);
}

/* ---- Centered auth layout (login/register) ---- */
.sda-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sda-space-lg);
}
.sda-auth .sda-card { width: 100%; max-width: 28rem; }
.sda-auth__logo { display: block; height: 96px; width: auto; margin: 0 auto var(--sda-space); }
.sda-auth__title { text-align: center; margin: 0 0 var(--sda-space-xs); }
.sda-auth__subtitle { text-align: center; color: var(--sda-color-ink-muted); margin: 0 0 var(--sda-space-lg); }
.sda-auth__footer { margin-top: var(--sda-space-lg); padding-top: var(--sda-space); border-top: 1px solid var(--sda-color-border); text-align: center; color: var(--sda-color-ink-muted); font-size: 0.875rem; }

/* ---- Accessible modal (a11y.js, FR-422) ---- */
.sda-modal__overlay {
  position: fixed; inset: 0;
  background: rgba(10, 37, 64, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sda-space-lg);
  z-index: 1000;
}
.sda-modal {
  background: var(--sda-color-surface);
  border-radius: var(--sda-radius-lg);
  box-shadow: var(--sda-shadow-elevated);
  width: 100%; max-width: 32rem;
  padding: var(--sda-space-xl);
}
.sda-modal__title { margin: 0 0 var(--sda-space); }
.sda-modal__body { margin: 0 0 var(--sda-space-lg); color: var(--sda-color-ink); white-space: pre-line; }
.sda-modal__actions { display: flex; gap: var(--sda-space-sm); justify-content: flex-end; }

/* ---- Visually-hidden utility (for sr-only labels / live regions) ---- */
.sda-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- usa-tag color-utility AA fixes ----
 * usa-tag renders white text; several USWDS bg-* utilities are too light for white
 * text (fail WCAG AA). Darken those when used on a tag so status pills stay readable.
 * (bg-error #b50909 and bg-primary #005ea2 already pass — left alone.) */
.usa-tag.bg-success, .usa-tag.bg-green, .usa-tag.bg-mint { background-color: #2e7d32 !important; color: #fff !important; }
.usa-tag.bg-gold, .usa-tag.bg-warning, .usa-tag.bg-accent-warm, .usa-tag.bg-yellow { background-color: #8a4b08 !important; color: #fff !important; }
.usa-tag.bg-info, .usa-tag.bg-accent-cool, .usa-tag.bg-cyan { background-color: #117a8b !important; color: #fff !important; }
.usa-tag.bg-base-light, .usa-tag.bg-base-lighter, .usa-tag.bg-gray-30 { background-color: #565c65 !important; color: #fff !important; }

/* ---- platform-chrome.js init() injects branding/user with colors built for a
 * DARK sidebar; on our light admin sidebars (.admin-sidebar/.sidebar) force
 * readable dark-on-light so the injected text meets AA contrast. ---- */
.admin-sidebar .chrome-brand-title, .sidebar .chrome-brand-title { color: var(--sda-color-primary) !important; }
.admin-sidebar .chrome-org-name, .sidebar .chrome-org-name { color: var(--sda-color-ink-muted) !important; }
.admin-sidebar .chrome-user-info, .admin-sidebar .chrome-user-info *,
.sidebar .chrome-user-info, .sidebar .chrome-user-info * { color: var(--sda-color-ink) !important; }
.admin-sidebar .chrome-logout, .sidebar .chrome-logout { color: var(--sda-color-error) !important; }

/* ---- Generic utilities shared by shell pages ---- */
.sda-hidden { display: none !important; }

.sda-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--sda-color-border);
  border-top-color: var(--sda-color-primary);
  border-radius: 50%;
  animation: sda-spin 0.8s linear infinite;
  margin: var(--sda-space-xl) auto;
}
@keyframes sda-spin { to { transform: rotate(360deg); } }

/* ======================================================================
 * Shared application shell (Wave D, FR-422) — light USWDS sidenav chrome.
 * Rendered by platform-chrome.js renderShell(); the canonical chrome for
 * every sidebar/app-shell page (dashboard, builder, admin, org-admin).
 * ==================================================================== */
.sda-shell { display: flex; min-height: 100vh; }

.sda-sidebar {
  width: 16rem;            /* 256px */
  flex: 0 0 16rem;
  background: var(--sda-color-surface);
  border-right: 1px solid var(--sda-color-border);
  padding: var(--sda-space-lg) var(--sda-space);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 500;
}

.sda-main {
  flex: 1 1 auto;
  margin-left: 16rem;
  padding: var(--sda-space-xl);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Brand block at the top of the sidebar */
.sda-sidebar__brand { margin-bottom: var(--sda-space-lg); }
.sda-sidebar__logo { display: block; height: 64px; width: auto; margin-bottom: var(--sda-space-xs); }
.sda-sidebar__title { font-size: 1.125rem; font-weight: 700; color: var(--sda-color-primary); margin: 0; letter-spacing: 0.3px; }
.sda-sidebar__org { font-size: 0.8125rem; color: var(--sda-color-ink-muted); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Section labels between nav groups */
.sda-nav-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sda-color-ink-muted);
  font-weight: 700;
  margin: var(--sda-space) 0 var(--sda-space-xs);
  padding: 0 var(--sda-space-xs);
}
.sda-nav-label:first-of-type { margin-top: 0; }

/* USWDS sidenav tinted to the shared palette */
.sda-sidebar .usa-sidenav { margin: 0; border: 0; }
.sda-sidebar .usa-sidenav__item { border: 0; }
.sda-sidebar .usa-sidenav a {
  display: flex; align-items: center; gap: var(--sda-space-xs);
  border-radius: var(--sda-radius);
  color: var(--sda-color-ink);
  padding: var(--sda-space-xs) var(--sda-space-sm);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.sda-sidebar .usa-sidenav a:hover { background: #eaf2fa; color: var(--sda-color-primary-dark); text-decoration: none; }
.sda-sidebar .usa-sidenav a.usa-current,
.sda-sidebar .usa-sidenav a[aria-current="page"] {
  background: var(--sda-color-primary);
  color: #fff;
  font-weight: 600;
}
.sda-sidebar .usa-sidenav a.usa-current::after,
.sda-sidebar .usa-sidenav a[aria-current="page"]::after { display: none; }

/* Non-interactive "coming soon" nav rows */
.sda-nav-soon {
  display: flex; align-items: center; gap: var(--sda-space-xs);
  padding: var(--sda-space-xs) var(--sda-space-sm);
  font-size: 0.9375rem;
  color: var(--sda-color-ink-muted);
}
.sda-nav-icon { font-size: 1rem; }

/* User identity + logout at the bottom of the sidebar */
.sda-sidebar__user {
  margin-top: auto;
  padding-top: var(--sda-space);
  border-top: 1px solid var(--sda-color-border);
  font-size: 0.8125rem;
}
.sda-sidebar__user-name { font-weight: 600; color: var(--sda-color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sda-sidebar__user-role { color: var(--sda-color-ink-muted); text-transform: capitalize; }
.sda-sidebar__logout { margin-top: var(--sda-space-xs); }

/* Responsive: stack the shell on narrow viewports */
@media (max-width: 40rem) {
  .sda-shell { flex-direction: column; }
  .sda-sidebar { position: static; width: auto; flex-basis: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--sda-color-border); }
  .sda-main { margin-left: 0; padding: var(--sda-space-lg); }
}