/* =============================================================================
   Design tokens
   -------------------------------------------------------------------------
   Brand colors (rarely change with theme) live as named constants.
   Surfaces, text, borders, shadows, and themed badge colors are kept under
   semantic variables that flip values between light and dark mode.

   Dark mode is activated by `<html class="wa-dark">` — see the
   FOUC-prevention inline script in each HTML page's <head>.
   ========================================================================= */

:root {
  /* Brand */
  --primary-color: #3a86ff;
  --secondary-color: #8338ec;
  --success-color: #38b000;
  --danger-color: #e5383b;
  --warning-color: #ffaa00;

  /* Geometry */
  --border-radius: 8px;
  --transition: all 0.2s ease;

  /* --- Semantic surfaces (light theme defaults) --- */
  --bg-page: #f5f7fa;
  --bg-card: #ffffff;
  --bg-section: #f8f9fa;
  --bg-image-placeholder: #f5f7fa;
  --bg-error-row: #fff4e0;
  --bg-bulk-bar: #eaf3ff;
  --border-bulk-bar: #b8d6ff;
  --text-bulk-bar: #1f3a68;

  /* Text */
  --text-primary: #212529;
  --text-secondary: #555a61;
  --text-muted: #6c757d;
  --text-faint: #8a8f96;

  /* Borders & dividers */
  --border-default: #e6e8eb;
  --border-subtle: #eef0f2;

  /* Elevation */
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  --box-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-footer: 0 -2px 5px rgba(0, 0, 0, 0.05);

  /* Stock pills (light theme: soft pastel) */
  --pill-stock-in-bg: #d4edda;
  --pill-stock-in-fg: #155724;
  --pill-stock-delayed-bg: #fff3cd;
  --pill-stock-delayed-fg: #856404;
  --pill-stock-third-bg: #ffe5cc;
  --pill-stock-third-fg: #7a3e00;
  --pill-stock-out-bg: #f8d7da;
  --pill-stock-out-fg: #721c24;

  /* Dashboard stat colors */
  --stat-positive: #c0392b;   /* price went UP — bad for buyer */
  --stat-negative: #1e7e34;   /* price went DOWN — good for buyer */
  --stat-neutral: #555;
  --vol-stable: #1e7e34;
  --vol-moderate: #b8860b;
  --vol-volatile: #c0392b;
  --vol-insufficient: #888;
}

/* =============================================================================
   Dark theme overrides
   -------------------------------------------------------------------------
   Inherits Shoelace's dark theme tokens (loaded via dark.css) and overlays
   our own semantic variables.
   ========================================================================= */
html.wa-dark {
  --bg-page: #15181c;
  --bg-card: #1e2126;
  --bg-section: #23272e;
  --bg-image-placeholder: #2a2e35;
  --bg-error-row: #3a2820;
  --bg-bulk-bar: #1e2a40;
  --border-bulk-bar: #2b4570;
  --text-bulk-bar: #b8d6ff;

  --text-primary: #e6e7ea;
  --text-secondary: #b6bac1;
  --text-muted: #8a8f97;
  --text-faint: #6b6f76;

  --border-default: #2c313a;
  --border-subtle: #252930;

  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  --box-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-footer: 0 -2px 8px rgba(0, 0, 0, 0.4);

  /* Stock pills — tinted backgrounds with brighter text for contrast on dark */
  --pill-stock-in-bg: rgba(56, 176, 0, 0.22);
  --pill-stock-in-fg: #6ee36e;
  --pill-stock-delayed-bg: rgba(255, 170, 0, 0.22);
  --pill-stock-delayed-fg: #ffd24a;
  --pill-stock-third-bg: rgba(251, 86, 7, 0.22);
  --pill-stock-third-fg: #ffaa7a;
  --pill-stock-out-bg: rgba(229, 56, 59, 0.28);
  --pill-stock-out-fg: #ff9a9a;

  /* Stats — punchier in dark mode */
  --stat-positive: #ff6b6b;
  --stat-negative: #6ee36e;
  --stat-neutral: #b6bac1;
  --vol-stable: #6ee36e;
  --vol-moderate: #ffd24a;
  --vol-volatile: #ff6b6b;
  --vol-insufficient: #8a8f97;
}

/* =============================================================================
   Reset + base typography
   ========================================================================= */

/* Universal box-sizing is safe, but the margin/padding zeroing must NOT be
   universal anymore: Web Awesome styles its component HOSTS from layered
   global CSS, and an unlayered `* { padding: 0 }` beats every cascade layer
   — it was silently stripping the built-in padding off wa-badge, button-
   style wa-radio, wa-callout (toasts), etc. Reset only native elements that
   actually carry UA default margins/padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p,
ul, ol, li, dl, dd,
figure, blockquote, fieldset, legend,
th, td {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--wa-font-family-body);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-page);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =============================================================================
   Header
   ========================================================================= */

header {
  background-color: var(--bg-card);
  box-shadow: var(--box-shadow-soft);
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

header h1 {
  color: var(--primary-color);
  font-size: 1.8rem;
}

header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Quick theme toggle button in the header */
.theme-toggle-button {
  color: var(--text-secondary);
}
.theme-toggle-button::part(base):hover {
  color: var(--primary-color);
}

/* =============================================================================
   Main content + sections
   ========================================================================= */

main {
  flex: 1;
  padding-bottom: 3rem;
}

section {
  margin-bottom: 2rem;
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--box-shadow-soft);
  color: var(--text-primary);
}

h2 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}
h3, h4 {
  color: var(--text-primary);
}

/* =============================================================================
   Forms
   ========================================================================= */

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

wa-input {
  width: 100%;
}

#submit-button {
  align-self: flex-start;
}

/* =============================================================================
   Alerts & utilities
   ========================================================================= */

.alert {
  margin: 1rem 0;
}

.hidden {
  display: none !important;
}

/* =============================================================================
   Product grid (home page)
   ========================================================================= */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.product-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-image {
  height: 200px;
  object-fit: contain;
  background-color: var(--bg-image-placeholder);
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-name {
  font-size: 1.1rem;
  margin-right: 1rem;
  color: var(--text-primary);
}

.product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* =============================================================================
   Dashboard
   ========================================================================= */

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-actions {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 2rem;
}

.chart-card {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--box-shadow-soft);
  color: var(--text-primary);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.chart-info {
  flex: 1;
  min-width: 0;
}

.chart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.chart-container {
  height: 300px;
  margin: 1rem 0;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

/* Loading spinner */
wa-spinner {
  font-size: 3rem;
  margin: 2rem auto;
  display: block;
}

/* =============================================================================
   Footer
   ========================================================================= */

footer {
  background-color: var(--bg-card);
  padding: 1.5rem 0;
  box-shadow: var(--shadow-footer);
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
}

footer p {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* =============================================================================
   Misc utilities used across pages
   ========================================================================= */

/* Price-changed flash highlight */
.price-changed {
  animation: price-flash 1.6s ease-out;
}
@keyframes price-flash {
  0%   { background: var(--success-color); color: white; }
  100% { background: inherit; color: inherit; }
}

/* =============================================================================
   Responsive
   ========================================================================= */

@media (max-width: 768px) {
  .charts-container {
    grid-template-columns: 1fr;
  }

  header .container {
    flex-direction: column;
    gap: 1rem;
  }

  header nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dashboard-actions {
    flex-direction: column;
  }
}

/* =============================================================================
   DIY toast stack — Web Awesome's <wa-toast> is Pro-only, so auth.showToast()
   renders <wa-callout> items into this fixed stack (see js/auth.js).
   ============================================================================= */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(420px, calc(100vw - 2rem));
  /* Above wa-dialog's native <dialog> is impossible (top layer), but toasts
     and dialogs don't overlap in practice; above everything else. */
  z-index: 9999;
}
.toast-item {
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: toast-slide-in 0.25s ease-out;
}
.toast-item-leaving {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}