/**
 * Werang Dark Glassmorphism — Dribbble-style production theme
 * Base: #121214 · Accent: #3B82F6 · Success: #10B981 · Warning: #F59E0B
 *
 * body.werang-app only gets dark glass under OS dark mode.
 * Auth pages (body.werang-auth) are light by default; dark via prefers-color-scheme.
 */

:root {
  --werang-bg: #121214;
  --werang-surface: rgba(30, 32, 34, 0.65);
  --werang-surface-solid: #1e2022;
  --werang-accent: #3b82f6;
  --werang-accent-glow: rgba(59, 130, 246, 0.35);
  --werang-success: #10b981;
  --werang-warning: #f59e0b;
  --werang-text: #e8eaed;
  --werang-text-muted: #9ca3af;
  --werang-border: rgba(255, 255, 255, 0.06);
  --werang-radius: 14px;
  --werang-blur: blur(16px);
}

@media (prefers-color-scheme: dark) {
  body.werang-app {
    background: var(--werang-bg) !important;
    color: var(--werang-text);
    min-height: 100dvh;
    --bg: var(--werang-bg);
    --surface: var(--werang-surface-solid);
    --primary: var(--werang-accent);
    --primary-h: #2563eb;
    --text: var(--werang-text);
    --text-muted: var(--werang-text-muted);
    --border: var(--werang-border);
    --radius: var(--werang-radius);
  }

  /* Glass cards */
  body.werang-app .card,
  body.werang-app .stat-card,
  body.werang-app .integration-hub-card,
  body.werang-app .login-card {
    background: var(--werang-surface);
    backdrop-filter: var(--werang-blur);
    -webkit-backdrop-filter: var(--werang-blur);
    border: 1px solid var(--werang-border);
    border-radius: var(--werang-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  }

  body.werang-app .card:hover,
  body.werang-app .stat-card:hover,
  body.werang-app .integration-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--werang-accent-glow);
  }

  body.werang-app .card-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--werang-border);
    color: var(--werang-text);
  }

  body.werang-app .card-body,
  body.werang-app .page-content {
    color: var(--werang-text);
  }

  /* Sidebar */
  body.werang-app .sidebar {
    background: rgba(18, 18, 20, 0.92);
    backdrop-filter: var(--werang-blur);
    border-right: 1px solid var(--werang-border);
  }

  body.werang-app .sidebar-logo-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  }

  body.werang-app .sidebar-link.active {
    background: rgba(59, 130, 246, 0.18);
    color: #fff;
  }

  body.werang-app .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Topbar */
  body.werang-app .topbar {
    background: var(--werang-surface);
    backdrop-filter: var(--werang-blur);
    border-bottom: 1px solid var(--werang-border);
  }

  /* Buttons */
  body.werang-app .btn-primary {
    background: var(--werang-accent);
    border-color: var(--werang-accent);
  }

  body.werang-app .btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 0 20px var(--werang-accent-glow);
  }

  body.werang-app .btn-outline-primary {
    color: var(--werang-accent);
    border-color: var(--werang-accent);
  }

  body.werang-app .status-chip.on,
  body.werang-app .integration-status.on {
    color: var(--werang-success);
  }

  body.werang-app .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
  }

  body.werang-app .alert-info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
  }

  /* Forms */
  body.werang-app .form-control,
  body.werang-app input,
  body.werang-app select,
  body.werang-app textarea {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--werang-border);
    color: var(--werang-text);
    border-radius: 10px;
  }

  body.werang-app .form-control:focus {
    border-color: var(--werang-accent);
    box-shadow: 0 0 0 3px var(--werang-accent-glow);
  }

  /* Bottom nav */
  body.werang-app .bottom-nav {
    background: var(--werang-surface);
    backdrop-filter: var(--werang-blur);
    border-top: 1px solid var(--werang-border);
  }

  body.werang-app .bottom-nav-item.active {
    color: var(--werang-accent);
  }

  /* Settings tabs */
  body.werang-app .settings-tab.active {
    background: rgba(59, 130, 246, 0.15);
    color: var(--werang-accent);
  }

  body.werang-app .settings-tabs {
    border-bottom: 1px solid var(--werang-border);
  }

  /* Page hero */
  body.werang-app .page-hero-title {
    color: var(--werang-text);
  }

  body.werang-app .page-hero-sub,
  body.werang-app .page-hero-eyebrow {
    color: var(--werang-text-muted);
  }

  /* Chat thread */
  body.werang-app .chat-thread {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--werang-border);
    border-radius: var(--werang-radius);
  }
}

/* Auth cards: glass only when OS dark (Quicken-hybrid = light default) */
@media (prefers-color-scheme: dark) {
  body.werang-auth .login-card,
  body.werang-auth .register-card,
  body.werang-dark .login-card {
    background: var(--werang-surface);
    backdrop-filter: var(--werang-blur);
    -webkit-backdrop-filter: var(--werang-blur);
    border: 1px solid var(--werang-border);
    border-radius: var(--werang-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  }

  body.werang-auth,
  body.werang-dark {
    background: var(--werang-bg);
    color: var(--werang-text);
    min-height: 100dvh;
  }

  body.werang-auth .login-page,
  body.werang-auth .register-page,
  body.werang-dark .login-page {
    background: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.08), transparent 50%),
                var(--werang-bg);
  }

  body.werang-auth .login-logo-icon,
  body.werang-dark .login-logo-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  }

  body.werang-auth .login-logo-text,
  body.werang-dark .login-logo-text {
    color: var(--werang-text);
  }

  body.werang-auth .login-logo-sub,
  body.werang-dark .login-logo-sub {
    color: var(--werang-text-muted);
  }

  body.werang-auth .login-title,
  body.werang-dark .login-title {
    color: var(--werang-text);
  }

  body.werang-auth .login-subtitle,
  body.werang-dark .login-subtitle {
    color: var(--werang-text-muted);
  }

  body.werang-auth .form-label,
  body.werang-auth .form-check-label,
  body.werang-auth .text-muted,
  body.werang-dark .form-label,
  body.werang-dark .form-check-label,
  body.werang-dark .text-muted {
    color: var(--werang-text-muted) !important;
  }
}

/* Process banner — always styled dark (component is hidden via display:none
   in style.css/ui-2026.css regardless of theme, so this is not user-visible). */
.werang-process-banner {
  background: var(--werang-surface) !important;
  backdrop-filter: var(--werang-blur);
  border: 1px solid var(--werang-border) !important;
  border-radius: var(--werang-radius);
  color: var(--werang-text-muted);
  border-left: 3px solid var(--werang-accent) !important;
}

.werang-process-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--werang-accent);
  background: rgba(59, 130, 246, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.werang-process-title {
  color: var(--werang-text);
  font-size: 0.9rem;
}

.werang-process-kv {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 0.25rem;
}

.werang-process-kv code {
  color: var(--werang-success);
  background: rgba(16, 185, 129, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.78rem;
}

.werang-process-accordion {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--werang-border);
}

.werang-process-accordion-head {
  font-weight: 600;
  color: var(--werang-text);
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.werang-process-steps {
  padding-left: 1.25rem;
  font-size: 0.82rem;
  color: var(--werang-text-muted);
}

.werang-process-steps li {
  margin-bottom: 0.35rem;
}

.werang-process-toggle {
  border-color: var(--werang-border) !important;
  color: var(--werang-text-muted) !important;
}

/* (auth dark styles moved into prefers-color-scheme block above) */