/* App4Scrap — Glassmorphic theme override
 * Load AFTER assets/css/app.css so these rules win.
 * Frosted translucent surfaces sit on a colorful gradient so the
 * backdrop blur is actually visible. Metal colour coding on price
 * rows is intentionally left untouched (those backgrounds are set
 * inline by JS).
 */

:root,
[data-theme="dark"] {
  --glass-bg: rgba(28, 33, 46, 0.55);
  --glass-bg-strong: rgba(28, 33, 46, 0.72);
  --glass-bg-solid: rgba(28, 33, 46, 0.92);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.24);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  --glass-blur: 14px;
  --radius: 16px;
}

[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-bg-solid: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-strong: rgba(255, 255, 255, 0.85);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(31, 38, 96, 0.18);
  --glass-blur: 14px;
  --radius: 16px;
}

/* Fallback for browsers without backdrop-filter: make glass opaque
   enough to stay readable, no blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  [data-theme="dark"] {
    --glass-bg: rgba(28, 33, 46, 0.92);
    --glass-bg-strong: rgba(28, 33, 46, 0.96);
    --glass-bg-solid: rgba(28, 33, 46, 0.96);
  }
  [data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-bg-strong: rgba(255, 255, 255, 0.97);
    --glass-bg-solid: rgba(255, 255, 255, 0.97);
  }
}

/* Vivid gradient backdrop so the frosted surfaces read as glass. */
:root body,
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 15% 12%, rgba(205, 113, 46, 0.35), transparent 45%),
    radial-gradient(circle at 85% 22%, rgba(99, 102, 241, 0.35), transparent 45%),
    radial-gradient(circle at 50% 92%, rgba(45, 212, 191, 0.28), transparent 50%),
    linear-gradient(160deg, #0f1226 0%, #1a1230 55%, #0d1b2a 100%);
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 193, 71, 0.45), transparent 45%),
    radial-gradient(circle at 82% 26%, rgba(99, 102, 241, 0.22), transparent 45%),
    radial-gradient(circle at 50% 92%, rgba(45, 212, 191, 0.30), transparent 50%),
    linear-gradient(160deg, #eef1f8 0%, #e7ecf6 55%, #e9f3f1 100%);
}

/* Large scrolling surfaces keep the glass look via a semi-opaque filled
   background, but no backdrop-filter — blur it on every scroll frame is
   expensive and causes janky vertical scrolling. */
.panel,
.dealer-card,
.yard-editor,
.admin-review {
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

/* Small popover overlays only keep the true frosted blur */
.metal-dropdown-panel,
.account-menu-panel {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}

.dealer-card {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dealer-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 34px var(--glass-shadow);
}

/* Sticky solid top bar (no transparency) */
.site-header {
  background: var(--bg-header);
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: var(--glass-shadow);
}

/* Inputs & selects as frosted fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.metal-dropdown-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* Browser autofill — keep the theme look instead of Chrome's default white/yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* Ghost buttons become frosted glass */
.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
}

.btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--accent);
  color: var(--text);
}

/* Primary button keeps its accent with a soft glow + glass edge */
.btn-primary {
  border-color: var(--accent-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px var(--glass-shadow);
}

/* Small frosted chips & toggles */
.metal-chip,
.account-menu-toggle,
.theme-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Map shell reads as glass until the map paints over it */
#map {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
}