/* Veola — Sega-blue palette and component overrides for Tailwind play CDN. */

:root {
  --bg:        #16224f;
  --surface:   #243a93;
  --surface-2: #2c47ad;
  --accent:    #00a4e4;
  --yellow:    #f5c400;
  --text:      #ffffff;
  --text-2:    #a8c0f0;
  --danger:    #e84040;
  --success:   #00e4a4;
  --border:    rgba(255, 255, 255, 0.12);
  --shadow:    0 4px 16px rgba(0, 0, 80, 0.4);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', system-ui, sans-serif;
}

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

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

/* Solid surfaces, per the spec's "blue mode": no glassmorphism, no blur. A
   clear value gap between --bg and --surface is what lifts cards off the
   page; a 1px top highlight + soft blue shadow gives the cartridge edge. */
.v-card {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 40, 0.25);
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease;
}
.v-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 40, 0.3);
}

.v-card-flat {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.v-divider { border-top: 1px solid var(--border); }

/* --- Console readout / page header system -------------------------------
   The dashboard's signature: a mono "terminal" kicker over a heavy display
   title, and the Spend/Saved pair styled as an arcade scoreboard readout.
   JetBrains Mono is the machine voice here (labels, counts); Outfit carries
   the title. */

.v-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.v-kicker .v-kicker-sep { color: var(--text-2); opacity: 0.6; }
.v-kicker .v-kicker-dim { color: var(--text-2); }

/* --- Refined header + metric system -------------------------------------
   Calm and spacious: type and whitespace carry the page. No glow, no
   uppercase-mono labels, no accent rules. Mono is reserved for the numbers
   themselves; Outfit carries everything else. */

.v-page-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-shadow: none;
}
.v-page-sub {
  color: var(--text-2);
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

/* Hero metric: a small quiet label over a large clean number. Presented in
   open space with a hairline, not a boxed card. */
.v-metric-label {
  color: var(--text-2);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.v-metric-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  margin-top: 0.45rem;
}
.v-metric-value.v-price-deal { color: var(--success); }
.v-metric-sub {
  color: var(--text-2);
  font-size: 0.82rem;
  margin-top: 0.5rem;
}

/* Secondary stat: smaller label/number pair for the supporting counts. */
.v-stat-label {
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.v-stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 0.3rem;
}

/* Understated section heading for list panels — sized to sit below the page
   title, sentence case, no glow. */
.v-section-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  text-shadow: none;
}

/* Hairline used to separate open sections instead of boxing them. */
.v-rule {
  border: 0;
  border-top: 1px solid var(--border);
}

/* Small uppercase group label inside forms (item form sections). */
.v-form-section-title {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Quiet empty-state line. */
.v-empty {
  color: var(--text-2);
  font-size: 0.9rem;
  padding: 0.4rem 0;
}

/* --- Product feed (thumbnails) ------------------------------------------
   Listing thumbnails are what give the data life. A square cropped image,
   the listing title as the line that earns its space, price on the right. */
.v-thumb {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: block;
}
.v-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
}
/* Compact variant for table rows. */
.v-thumb-sm { width: 40px; height: 40px; border-radius: 7px; }
.v-thumb-sm.v-thumb-empty { font-size: 0.9rem; }

.v-feed { display: block; }
.v-feed-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.v-feed-row:last-child { border-bottom: 0; }
.v-feed-name {
  display: block;
  font-weight: 500;
  color: var(--text);
}
a.v-feed-name:hover { color: var(--accent); text-decoration: none; }
.v-feed-meta {
  color: var(--text-2);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}
.v-feed-price { flex: none; white-space: nowrap; }

.v-btn {
  background: var(--accent);
  color: white;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: filter 0.1s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.v-btn:hover { filter: brightness(1.1); }
.v-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.v-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.v-btn-ghost:hover { background: rgba(255,255,255,0.05); }

.v-btn-danger {
  background: var(--danger);
  color: white;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.v-input, .v-select, .v-textarea {
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  width: 100%;
  font-family: inherit;
}
.v-input:focus, .v-select:focus, .v-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 164, 228, 0.25);
}

.v-label {
  display: block;
  color: var(--text-2);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}

.v-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v-pill-active  { background: var(--accent); color: white; }
.v-pill-paused  { background: rgba(255,255,255,0.1); color: var(--text-2); }
.v-pill-error   { background: var(--danger); color: white; }

.v-price        { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.5rem; }
.v-price-target { color: var(--yellow); }
.v-price-deal   { color: var(--success); }

.v-side-nav {
  background: var(--surface);
  border-right: 1px solid var(--border);
  width: 220px;
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.v-side-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  color: var(--text-2);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.v-side-nav a.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
  color: white;
}
.v-side-nav a:hover { color: white; }

/* Sign-out button, styled to read like a nav link (it lives in a <form>). */
.v-side-signout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.v-side-signout:hover { color: white; }

/* The brand wordmark at the top of the sidebar is also an anchor (→ /), but
   shouldn't pick up the active-item border-left / padding treatment that
   the nav links get. Higher specificity overrides .v-side-nav a defaults. */
.v-side-nav a.v-side-brand {
  border-left: 0;
  color: var(--text);
  text-decoration: none;
}
.v-side-nav a.v-side-brand:hover {
  text-decoration: none;
  filter: brightness(1.15);
}

.v-veola-portrait {
  background: #f3ead8;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.v-veola-portrait img { display: block; max-width: 100%; height: auto; }

.v-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}
.v-badge-low    { background: var(--success); color: #053b2c; }
.v-badge-avg    { background: var(--accent); color: white; }
.v-badge-target { background: var(--yellow); color: #2a2200; }

table.v-table { width: 100%; border-collapse: collapse; }
table.v-table th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-2);
  padding: 0.5rem 0.75rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
table.v-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
/* No zebra — hairline rows and a faint hover keep it calm but scannable. */
table.v-table td { transition: background 140ms ease; }
table.v-table tbody tr:last-child td { border-bottom: 0; }
table.v-table tbody tr:hover td { background: rgba(255, 255, 255, 0.04); }

.v-error-text { color: var(--danger); font-size: 0.85rem; }
.v-muted { color: var(--text-2); }

.v-flash {
  background: rgba(0, 164, 228, 0.15);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}
.v-flash-error {
  background: rgba(232, 64, 64, 0.15);
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

.v-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: v-spin 0.8s linear infinite;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* htmx indicator: hidden by default, visible during in-flight requests.
   Declared AFTER .v-spinner on purpose: an element carrying both classes
   (e.g. <span class="v-spinner htmx-indicator">) must stay hidden until a
   request is active, and equal-specificity rules resolve by source order. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }

/* flair.js adds .v-just-swapped to any htmx swap target for ~400ms, giving
   refreshed regions a soft fade-in instead of an abrupt content jump. */
@keyframes v-fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v-just-swapped { animation: v-fade-in-up 240ms ease-out; }

/* Ending-soon strip: one global "next auction to close" banner. flair.js
   keeps the countdown live. Subtle by default; pulses red when inside the
   last 5 minutes via .v-countdown-critical on the inner counter. */
.v-ending-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(245, 196, 0, 0.12), rgba(0, 164, 228, 0.08));
  border: 1px solid rgba(245, 196, 0, 0.35);
}
.v-ending-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
}
.v-ending-title { flex: 1; min-width: 0; }
.v-ending-countdown {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--yellow);
}

/* Per-row + strip countdown urgency states. Default reads as neutral muted
   text so 6-day countdowns don't shout; urgency tints kick in only when
   flair.js flips the class. */
.v-countdown { color: var(--text-2); }
.v-countdown-urgent   { color: var(--yellow); font-weight: 600; }
.v-countdown-critical {
  color: var(--danger);
  font-weight: 700;
  animation: v-pulse 1.2s ease-in-out infinite;
}
.v-countdown-ended { color: var(--text-2); font-style: italic; }

@keyframes v-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Sparkline cells in the items list. Color follows trend: green when the
   latest price is meaningfully below the running average (good news for a
   watchlist), red when it's risen, neutral otherwise. */
.v-sparkline { display: block; overflow: visible; }
.v-spark-down { color: var(--success); filter: drop-shadow(0 0 4px rgba(0, 228, 164, 0.45)); }
.v-spark-up   { color: var(--danger);  filter: drop-shadow(0 0 4px rgba(232, 64, 64, 0.40)); }
.v-spark-flat { color: var(--text-2); }

/* Trend arrow rendered next to Best Price. Same palette as the sparkline,
   so a glance at the column reads consistently. */
.v-trend { font-size: 0.95rem; font-weight: 700; }
.v-trend-down { color: var(--success); }
.v-trend-up   { color: var(--danger); }
.v-trend-flat { color: var(--text-2); }

/* Mascot "deal" moment: Veola appears next to an item's name only when the
   current best price is at or below target. Small, animated, decorative —
   purely a delight hit on top of the existing "Deal" badge. */
.v-deal-mascot {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3ead8;
  padding: 1px;
  box-shadow: 0 0 0 1px rgba(0, 228, 164, 0.6), 0 0 12px rgba(0, 228, 164, 0.45);
  animation: v-deal-bob 2.4s ease-in-out infinite;
}
@keyframes v-deal-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .v-deal-mascot { animation: none; }
}

/* --- Login / Setup chrome -----------------------------------------------
   The auth pages use the Bare layout (no sidebar) so the form has to carry
   its own visual weight. The v-auth-* classes give it that: a glassy card
   for the form, a softly-rotating conic halo behind the mascot, a
   typeset wordmark + tagline, and the right column is left translucent so
   the global aurora reaches edge-to-edge instead of stopping at a flat
   blue block. */

.v-auth-wordmark {
  font-family: 'Outfit', system-ui, sans-serif;
  text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
}

.v-auth-card {
  /* Slightly heavier shadow + inner glow ring since the card stands
     alone on the page with no sidebar context. */
  box-shadow:
    0 16px 44px rgba(0, 0, 80, 0.55),
    0 0 0 1px rgba(0, 164, 228, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.v-auth-tagline {
  margin-top: 1.5rem;
  text-align: center;
  letter-spacing: 0.34em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-2);
  text-shadow: 0 0 12px rgba(0, 164, 228, 0.35);
}

.v-auth-portrait-col {
  /* Translucent overlay instead of a solid block: a soft inward vignette
     plus a faint diagonal sheen, keeping the column distinct from the
     form side without hiding the aurora behind it. */
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(135deg, rgba(0, 164, 228, 0.05) 0%, rgba(245, 196, 0, 0.04) 100%);
  position: relative;
  overflow: hidden;
}

.v-auth-portrait-halo {
  position: relative;
  isolation: isolate;
  width: min(420px, 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: v-auth-portrait-float 7s ease-in-out infinite;
  will-change: transform;
}

/* Rotating conic-gradient halo. Sits behind the portrait via z-index -1
   inside the isolated stacking context, blurred so it reads as a glow
   rather than a hard rainbow. */
.v-auth-portrait-halo::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(0, 164, 228, 0.55),
    rgba(245, 196, 0, 0.40),
    rgba(232, 64, 64, 0.30),
    rgba(0, 228, 164, 0.40),
    rgba(0, 164, 228, 0.55)
  );
  filter: blur(50px);
  z-index: -1;
  animation: v-auth-portrait-spin 22s linear infinite;
  will-change: transform;
}

/* A second, slower halo gives the impression of depth: two layers of
   light rotating at different speeds keep the eye from locking onto a
   single repeating pattern. */
.v-auth-portrait-halo::after {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 228, 164, 0.18),
    rgba(0, 164, 228, 0.10),
    rgba(245, 196, 0, 0.14),
    rgba(0, 228, 164, 0.18)
  );
  filter: blur(70px);
  z-index: -1;
  animation: v-auth-portrait-spin 42s linear infinite reverse;
  will-change: transform;
  opacity: 0.85;
}

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

@keyframes v-auth-portrait-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .v-auth-portrait-halo,
  .v-auth-portrait-halo::before,
  .v-auth-portrait-halo::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v-card { transition: none; }
  .v-card:hover { transform: none; }
  table.v-table td, table.v-table tr { transition: none; }
  .v-just-swapped { animation: none; }
  .v-countdown-critical { animation: none; }
}

/* Budget progress bar (dashboard). Styled cross-browser without inline styles
   so it stays within the strict CSP (no style-src 'unsafe-inline'). */
.v-progress {
  height: 0.6rem;
  border-radius: 9999px;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.v-progress::-webkit-progress-bar { background: var(--surface-2); }
.v-progress::-webkit-progress-value { background: var(--accent); }
.v-progress::-moz-progress-bar { background: var(--accent); }