/*
Shared look and feel across every page in the app (Card Review, Collections,
a single collection, Sold History) - the color palette, the masthead, the
top nav bar, and the handful of basic elements (buttons, badges, form
inputs, toasts) every page uses at least one of.

Loaded via a <link> BEFORE each page's own <style> block, so a page can
still override anything here just by redeclaring the same selector -
nothing here is !important or otherwise hard to override.
*/

:root {
  --bg-base: #100e0b;
  --bg-surface: #1c1712;
  --bg-surface-raised: #241d16;
  --border-subtle: #3a2c1c;
  --border-strong: #52402a;
  --text-primary: #ece3d3;
  --text-muted: #a89a86;
  --bronze: #c98a3f;
  --bronze-dim: #8a5c28;
  --bronze-bright: #e0a559;
  --verdant: #5fbf5a;
  --verdant-dim: #2e4a2c;
  --rust: #b5543f;
  --rust-dim: #4a2a24;
  --amber: #d9a63e;
  --amber-dim: #4a3b1e;

  /* Neon accents pulled straight from the Undercity Games artwork - the
     lightsaber green and the crimson moon behind the crest, plus the
     magenta storefront signage from the banner. Used sparingly (nav
     active state, alert badge, hover glows) - the bronze/serif look
     above stays the workhorse palette so the app doesn't turn into a
     nightclub, this is just the accent that gives it some pulse. */
  --neon-green: #5dff6e;
  --neon-green-dim: #1c4a22;
  --neon-magenta: #ff4fd8;
  --neon-crimson: #ff4433;
}

* { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  margin: 0;
}

/* --- Hero banner (landing page only) --- */
/* The full Undercity Games storefront artwork, edge to edge, fading into
   the same dark background everything else sits on so it reads as part
   of the page rather than a slapped-on header image.

   Deliberately NOT a fixed-height crop with object-fit:cover here - a
   fixed box always ends up slicing off part of the wordmark on some
   width (that's exactly what happened with the first version of this).
   Letting the image sit at its own natural width:100%/height:auto
   aspect ratio means the full "UNDERCITY GAMES" lockup is always shown
   intact, at every viewport width - it just runs a bit taller or
   shorter along with the page instead of ever getting cropped. */
.hero-banner {
  position: relative;
  width: 100%;
  line-height: 0;
}
.hero-banner img {
  width: 100%; height: auto; display: block;
}
.hero-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 14, 11, 0) 55%, var(--bg-base) 100%);
}

/* --- Masthead --- */
/* The moody undercity walkway sits behind the bar at low strength, under
   a near-opaque scrim so header text always stays readable - it's meant
   to read as "there's a whole city back there" rather than as a busy
   photo backdrop. */
.masthead {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg, rgba(16, 14, 11, 0.68) 0%, rgba(16, 14, 11, 0.72) 55%, var(--bg-base) 100%),
    radial-gradient(ellipse 600px 200px at 15% 0%, rgba(93, 255, 110, 0.08), transparent 70%),
    url('/static/masthead-bg.jpg') center 30% / cover no-repeat,
    var(--bg-base);
  padding: 22px 24px 18px;
}
.masthead-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 18px; position: relative; }
.masthead img.logo {
  width: 68px; height: 68px; border-radius: 10px; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 22px rgba(201, 138, 63, 0.35);
}
.masthead-text h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--bronze-bright), var(--bronze-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(224, 165, 89, 0.35));
}
.masthead-text .subline { font-size: 13px; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.02em; }

/* --- Top nav (Card Review / Collections / Sold History) --- */
.navbar {
  display: flex; gap: 4px; max-width: 1200px; margin: 0 auto;
  padding: 10px 24px 0; border-bottom: 1px solid var(--border-subtle);
}
.nav-link {
  padding: 8px 16px; border-radius: 6px 6px 0 0; font-size: 13px; font-weight: 500;
  color: var(--text-muted); text-decoration: none; border: 1px solid transparent;
  margin-bottom: -1px; position: relative; transition: color 0.15s ease;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-surface); }
.nav-link.active {
  color: var(--text-primary); background: var(--bg-surface);
  border-color: var(--border-subtle); border-bottom-color: var(--bg-surface);
}
/* A thin lightsaber-green blade under the active tab instead of a flat
   highlight - small, but it's the one flourish that shows up on every
   single page, so it earns its keep. */
.nav-link.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--neon-green); box-shadow: 0 0 8px 1px rgba(93, 255, 110, 0.75);
}

/* --- Buttons --- */
.btn { padding: 8px 14px; font-size: 13px; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; }
.btn-primary { background: var(--bronze); color: #1a1208; }
.btn-primary:hover { background: var(--bronze-bright); }
.btn-secondary { background: var(--bg-surface-raised); color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-upload { background: var(--verdant-dim); color: #cdeecb; border: 1px solid var(--verdant); }
.btn-upload:hover { background: #365e34; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* --- Badges --- */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge.high { background: var(--verdant-dim); color: #a8e0a0; }
.badge.medium { background: var(--amber-dim); color: #ecc978; }
.badge.low, .badge.failed { background: var(--rust-dim); color: #e6a294; }
.badge.hot { background: #3a2410; color: var(--bronze-bright); border: 1px solid var(--bronze-dim); }
.badge.foil { background: var(--verdant-dim); color: #b7e8b0; }
.badge.pick { background: #3a2f52; color: #cfc2f0; border: 1px solid #6a54a0; }

/* --- Form basics --- */
input[type=text], input[type=number], select {
  padding: 6px 8px; font-size: 13px; border-radius: 5px;
  border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-primary); margin-top: 2px;
}
input[type=text]:focus, input[type=number]:focus, select:focus { outline: none; border-color: var(--bronze); }
label.small { font-size: 11px; color: var(--text-muted); display: block; }

/* --- Shared page bits --- */
.empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
/* A settings-style table's tbody starts genuinely empty until its fetch
   resolves - this one-row placeholder fills that gap instead of leaving a
   blank table body flash by. Cleared the moment real rows (or a real
   empty list) are rendered in. */
.loading-row { text-align: center; padding: 16px; color: var(--text-muted); font-style: italic; }
/* A handful of pages point their .page-help note at a setting that moved
   to the Settings page (e.g. "configured on the Settings page") - this is
   the only place in the app .page-help text ever needed a link, so the
   styling lives here once instead of copy-pasted into each page's <style>. */
.page-help a { color: var(--bronze-bright); text-decoration: none; }
.page-help a:hover { text-decoration: underline; }
.status-note { font-size: 11px; color: #e6a294; background: var(--rust-dim); padding: 6px 8px; border-radius: 4px; }
/* Toasts stack in a fixed corner column instead of a single fixed spot -
   without this container every toast() call lands in the exact same
   position and overlapping messages become unreadable. Newest toast
   appears at the bottom of the stack and pushes earlier ones up. */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--bg-surface-raised); border: 1px solid var(--border-strong);
  padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 320px;
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  animation: toast-in 0.15s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast.err { border-color: var(--rust-dim); color: #e6a294; }
.toast .toast-action {
  background: none; border: none; color: var(--bronze-bright); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap;
}
.toast .toast-action:hover { text-decoration: underline; }
.btn-danger { background: var(--rust-dim); color: #ffd9cf; border: 1px solid var(--rust); }
.btn-danger:hover { background: var(--rust); color: #fff; }

/* --- Stat tiles ---
   Used at the top of most data pages (Price Movers, Sealed Product,
   Shopping List, Whatnot Export, Export) to show a row of at-a-glance
   numbers. This used to be copy-pasted into each of those pages' own
   <style> blocks - one shared definition here instead of five near-
   identical ones that could each drift a little differently. */
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat-tile {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 12px 16px; min-width: 140px; flex: 1;
}
.stat-tile .stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-tile .stat-value { font-size: 22px; font-weight: 600; color: var(--text-primary); margin-top: 4px; }

/* --- Section box ---
   A titled card grouping a form/table/settings block - the same shape on
   Export, Whatnot Export, Auto-Sort, Reports and now Settings. */
.section-box {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 8px;
  padding: 18px; margin-bottom: 18px;
}
.section-box h3 { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.section-box .section-help { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }

/* --- Small icon-only delete/remove button (the "x") ---
   Used on every list/table row that can be removed - Collections, Deck
   Builds, Reports, Auto-Sort, and the items table. */
.delete-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 4px;
}
.delete-btn:hover { color: var(--rust); background: var(--rust-dim); }

/* --- Semantic gain/loss color ---
   One green, one rust, matching the palette above - used wherever a page
   shows a positive or negative dollar/percent change (P&L gain, price
   trend, deck-completion state). Several pages used to hardcode a
   slightly different green (#6fbf8b) here instead of --verdant; use
   these two classes going forward instead of a page-local hex. */
.text-positive { color: var(--verdant); }
.text-negative { color: var(--rust); }

/* --- Modal shell ---
   The Add/Edit-style dialog first built for Sealed Product, promoted
   here so any page can pop up a modal without redeclaring the shell.
   confirmDialog() in common.js builds its confirm/cancel prompt on this
   same shell. */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center; z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px;
  padding: 22px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
}
.modal-box h3 { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.modal-help { font-size: 11.5px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; box-sizing: border-box; background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: 5px; padding: 7px 9px; font-size: 13px; color: var(--text-primary); margin-top: 0;
}
.confirm-modal-box { max-width: 380px; }
.confirm-modal-box .confirm-modal-message { font-size: 13px; color: var(--text-primary); margin: 0 0 18px; line-height: 1.5; white-space: pre-line; }
.confirm-modal-box .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* --- Narrow-viewport baseline ---
   Not a full mobile redesign - just enough that the shared shell (nav,
   masthead, stat tiles, section boxes, modals) doesn't visibly break on
   a phone/tablet width. Individual pages' own wide data tables may still
   need horizontal scroll; this only guarantees the chrome around them
   holds together. */
@media (max-width: 720px) {
  .masthead-inner { gap: 12px; }
  .masthead img.logo { width: 48px; height: 48px; }
  .masthead-text h1 { font-size: 19px; }
  .navbar { flex-wrap: wrap; padding: 8px 12px 0; }
  .stats-row { gap: 8px; }
  .stat-tile { min-width: 120px; padding: 10px 12px; }
  .modal-box { max-width: 94vw; padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
}