/*
 * UnlimitedModel.com — App Shell
 *
 * THE shared shell pattern for every page:
 *   1. Header-only shell      — public pages (landing, pricing, docs)
 *   2. Sidebar shell          — authenticated pages (dashboard, admin)
 *   3. Centered-card shell    — auth pages (login, register)
 *
 * Solid surfaces only: no gradients, no glassmorphism, no backdrop-filter.
 * The scrolled header uses a token shadow, never blur (VAL-DS-013).
 *
 * Load order: tokens.css → base.css → app-shell.css → page stylesheet.
 */

/* ===========================================
   BASE — document defaults on tokens
   =========================================== */
html {
  scroll-padding-top: calc(var(--header-height, 64px) + var(--space-4, 16px));
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--leading-tight, 1.25);
  letter-spacing: var(--tracking-tight, -0.025em);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

:focus-visible {
  outline: var(--focus-ring-width, 2px) var(--focus-ring-style, solid) var(--border-focus, var(--accent));
  outline-offset: var(--focus-ring-offset, 2px);
}

::selection {
  background: var(--accent-light);
  color: var(--text-primary);
}

/* Content column used by every shell variant */
.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ===========================================
   1. HEADER-ONLY SHELL — public pages
   =========================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky, 200);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Scroll state: solid surface + token shadow. NO backdrop-filter. */
.site-header.scrolled {
  background: var(--bg-primary);
  box-shadow: var(--shadow-md);
  border-bottom-color: transparent;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Logo renders unchanged from the shipped SVG asset (VAL-DS-010). */
.site-logo img {
  display: block;
  height: 32px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav a {
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-nav a:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

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

/* ===========================================
   2. SIDEBAR SHELL — authenticated pages
   =========================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-primary);
}

.app-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  width: var(--sidebar-width);
  overflow-y: auto;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Logo renders unchanged in the sidebar on authenticated pages. */
.app-sidebar .site-logo img {
  height: 28px;
}

.app-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.app-sidebar-nav a:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.app-sidebar-nav a.active {
  color: var(--accent);
  background: var(--accent-light);
}

.app-content {
  min-width: 0;
  padding: var(--space-6) var(--space-8);
}

/* Responsive: sidebar collapses off-canvas behind a toggle. */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-fixed, 300);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-xl);
  }

  .app-shell.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .app-content {
    padding: var(--space-4);
  }
}

/* ===========================================
   3. CENTERED-CARD SHELL — auth pages
   =========================================== */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  padding: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.auth-brand img {
  height: 36px;
  width: auto;
}

.auth-card h1 {
  font-size: var(--text-2xl);
  text-align: center;
  margin-bottom: var(--space-2);
}

.auth-card .auth-subtitle {
  color: var(--text-secondary);
  font-size: var(--text-base);
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* Inline submit spinner (admin + user login loading state).
   Hidden by default; toggled via the .is-active class (no inline styles). */
.auth-card .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}

.auth-card .spinner.is-active {
  display: block;
}

.auth-card .btn-label-hidden {
  display: none;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}