/* Base app stylesheet. Imports the design tokens and wires them into
   primitive elements and the reusable layout shells used by both the
   public portal and the authenticated app. */

@import url("./tokens.css");

* { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-settings);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  line-height: 1.55;
  font-size: 0.9375rem;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only, .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* "Skip to content" link: invisible until focused, then becomes a
   highly-visible button anchored at the top-left of the viewport.
   Required by WCAG 2.4.1 Bypass Blocks (level A). */
a.sr-only:focus, a.sr-only:focus-visible {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  width: auto; height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  clip: auto;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 10000;
}

/* Honour user motion preferences (WCAG 2.3.3 + Animations from Interactions). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reusable primitives ------------------------------------------ */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.badge.badge-primary {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}

.kbd {
  display: inline-block;
  padding: 0.1rem 0.375rem;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/* ---- Headings / prose --------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 2.2vw, 2.4rem); }
h2 { font-size: 1.375rem; margin-top: var(--space-8); }
h3 { font-size: 1.125rem; margin-top: var(--space-6); }

p { margin: 0 0 var(--space-3); }

.prose { max-width: 64ch; }
.prose ul { padding-left: 1.25rem; }
.prose ul li { margin-bottom: var(--space-2); }

/* ---- Public portal shell ------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}
.brand-mark {
  width: 1.75rem; height: 1.75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  display: grid; place-items: center;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
}

.nav {
  display: none;
  gap: var(--space-6);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.nav a { color: inherit; }
.nav a:hover, .nav a:focus { color: var(--color-text); text-decoration: none; }
@media (min-width: 48rem) {
  .nav { display: flex; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-16);
  padding-block: var(--space-6);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: center;
}
.site-footer a { color: inherit; }

/* ---- Landing hero / features / CTA -------------------------------- */

.hero {
  padding-block: var(--space-16) var(--space-12);
  text-align: left;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: 1.2fr 1fr; padding-block: 6rem var(--space-16); }
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
  margin-bottom: var(--space-4);
}
.hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  margin: 0 0 var(--space-4);
  line-height: 1.1;
}
.hero .lede {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  max-width: 36rem;
}
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

.hero-visual {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background:
    radial-gradient(600px circle at 80% -20%, color-mix(in oklab, var(--primary-500) 20%, transparent), transparent 40%),
    var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.features-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.feature {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feature sl-icon,
.feature .icon {
  width: 1.25rem; height: 1.25rem;
  color: var(--color-primary);
}
.feature-title { font-weight: 600; }
.feature-body { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.5; }

.cta-band {
  margin-top: var(--space-16);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary-700), var(--primary-500));
  color: white;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.cta-band h2 { color: white; margin: 0; }
.cta-band p  { color: rgb(255 255 255 / 0.85); margin: 0; max-width: 40rem; }

/* ---- Authenticated app shell -------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 64rem) {
  .app-shell {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
}

.sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
@media (min-width: 64rem) { .sidebar { display: flex; } }

/* Mobile: the ``.is-open`` class (toggled by the hamburger button in the
   top bar) flips the sidebar into a fixed overlay so it is actually
   visible. Below 64rem we always render it off-grid and rely on a
   semi-transparent backdrop plus click-outside to close it. */
@media (max-width: 63.9375rem) {
  .sidebar.is-open {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 20rem);
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  }
  /* Backdrop: rendered on the body (not nested inside the sidebar's
     stacking context) so it sits cleanly *below* the drawer instead
     of leaking over it. The previous ``.sidebar.is-open::before``
     with ``z-index: -1`` ended up painted on top of the nav items in
     some browsers, which made the whole menu look washed-out and
     disabled on phones. */
  body:has(.sidebar.is-open)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 999;
  }
  /* Prevent the body scrolling under the drawer. */
  body:has(.sidebar.is-open) { overflow: hidden; }
}

.sidebar .brand {
  padding: var(--space-2);
  margin-bottom: var(--space-4);
}

.nav-section {
  display: flex; flex-direction: column; gap: 2px;
}
.nav-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-2) var(--space-1);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-item:hover { background: var(--color-surface-muted); color: var(--color-text); text-decoration: none; }
.nav-item.is-active { background: color-mix(in oklab, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.nav-item .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }

.app-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-topbar {
  position: sticky; top: 0; z-index: 15;
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding-inline: var(--space-6);
}
.app-topbar .title { font-weight: 600; letter-spacing: -0.01em; }
.app-topbar .spacer { flex: 1; }

.app-content {
  padding: var(--space-6);
  max-width: var(--content-max);
  width: 100%;
}
@media (min-width: 48rem) {
  .app-content { padding: var(--space-8); }
}

/* Responsive widget grid used by the dashboard. */
.grid-widgets {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(12, 1fr);
}
.widget { grid-column: span 12; }
@media (min-width: 48rem) {
  .widget.span-6 { grid-column: span 6; }
  .widget.span-4 { grid-column: span 4; }
  .widget.span-8 { grid-column: span 8; }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

/* HTMX + Shoelace friendliness: subtle transition when swapping. */
[hx-swap], .htmx-swapping { transition: opacity 120ms ease; }
.htmx-swapping { opacity: 0.5; }

/* Toast container (Shoelace alerts injected via JS). */
sl-alert[variant="primary"]::part(base),
sl-alert[variant="success"]::part(base),
sl-alert[variant="warning"]::part(base),
sl-alert[variant="danger"]::part(base) {
  border-radius: var(--radius-md);
}

/* Utility rows */
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.push-right { margin-left: auto; }
.grow { flex: 1; }