/* ============================================================
   FLAMING THEME — single source of truth
   Replaces the 49-theme system. Matches FlamingPanel 1:1.
   Loaded AFTER base.css so these tokens + glass rules win.
   Palette: flame #f97316 -> ember #ef4444 on near-black,
   glassmorphic surfaces, Inter / Poppins / JetBrains Mono.
   ============================================================ */

:root,
[data-theme="ember-dark"] {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Surfaces — translucent glass over the near-black base (Panel look) */
  --bg-base: #0d0d0d;
  --bg-surface: rgba(255, 255, 255, 0.03);
  --bg-elevated: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.09);
  --bg-glass: rgba(13, 13, 13, 0.72);

  /* Text — pure white + neutral grays */
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --text-muted: #4b5563;

  /* Borders — hairline white overlays */
  --border: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-hover: rgba(255, 255, 255, 0.12);

  /* Accent — flame orange -> ember red */
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-muted: rgba(249, 115, 22, 0.10);
  --accent-glow: rgba(249, 115, 22, 0.25);
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #ef4444 100%);

  /* Status */
  --success: #22c55e;
  --success-muted: rgba(34, 197, 94, 0.12);
  --warning: #eab308;
  --warning-muted: rgba(234, 179, 8, 0.12);
  --danger: #ef4444;
  --danger-muted: rgba(239, 68, 68, 0.12);

  /* Ember-specific tokens (used by base.css brand rules) */
  --ember-core: #f97316;
  --ember-hot: #ef4444;
  --ember-warm: #eab308;
  --ember-glow: rgba(249, 115, 22, 0.30);
  --ember-gradient: linear-gradient(135deg, #f97316 0%, #ef4444 100%);

  /* Glass tokens */
  --bg-glass-surface: rgba(255, 255, 255, 0.03);
  --bg-glass-elevated: rgba(255, 255, 255, 0.06);
  --shadow-flame: 0 0 20px rgba(249, 115, 22, 0.30);
  --shadow-flame-lg: 0 0 40px rgba(249, 115, 22, 0.40);
}

/* ------------------------------------------------------------
   Glassmorphism — add backdrop blur to the major card containers
   (base.css gives them translucent bg via --bg-surface above;
   this adds the frosted blur that defines the Panel aesthetic).
   ------------------------------------------------------------ */
.bento-card,
.card,
.items-list,
.item-card-simple,
.item-card-grouped,
.group-section,
.settings-section,
.display-mode-card,
.form-container,
.auth-card,
.modal,
.seg-tabs,
.more-sheet,
.mobile-nav {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Gradient brand text (works regardless of data-theme) */
.brand-highlight {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ------------------------------------------------------------
   TOP BAR — match FlamingPanel exactly
   (loaded after base.css so these win)
   ------------------------------------------------------------ */
/* vertical divider before the Admin link */
.topnav .nav-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 0.5rem;
  flex-shrink: 0;
}

/* user menu trigger: avatar + name + chevron */
.topnav .user-menu { position: relative; }
.topnav .user-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  transition: background 0.15s;
}
.topnav .user-trigger:hover { background: rgba(255, 255, 255, 0.05); }
.topnav .user-name { font-size: 0.875rem; font-weight: 500; color: #d1d5db; }
.topnav .user-caret { width: 1rem; height: 1rem; color: #6b7280; transition: transform 0.2s; }
.topnav .user-menu.open .user-caret { transform: rotate(180deg); }

/* dropdown panel */
.topnav .user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 13rem;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  z-index: 60;
  display: none;
}
.topnav .user-menu.open .user-dropdown { display: block; }

.topnav .user-dropdown-head { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.topnav .user-dropdown-head .ud-name { font-size: 0.875rem; font-weight: 600; color: #fff; }
.topnav .user-dropdown-head .ud-role { font-size: 0.75rem; color: #6b7280; text-transform: capitalize; }

.topnav .ud-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #9ca3af;
  text-decoration: none;
  transition: all 0.15s;
}
.topnav .ud-item:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.topnav .ud-item svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.topnav .ud-sep { height: 1px; background: rgba(255, 255, 255, 0.06); }
.topnav .ud-danger { color: #f87171; }
.topnav .ud-danger:hover { color: #f87171; background: rgba(255, 255, 255, 0.05); }

/* ------------------------------------------------------------
   Native <select> dropdowns — force dark (option list was white)
   ------------------------------------------------------------ */
select { color-scheme: dark; }
select option,
select optgroup {
  background-color: #1a1a1a;
  color: #f3f4f6;
}


/* ------------------------------------------------------------
   Admin dropdown (matches Panel) + dropdown active item
   ------------------------------------------------------------ */
.topnav .admin-menu { position: relative; display: inline-flex; }
.topnav .admin-trigger {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: none; cursor: pointer; font-family: var(--font-primary);
}
.topnav .admin-caret { width: 0.875rem; height: 0.875rem; transition: transform 0.2s; }
.topnav .admin-menu.open .admin-caret { transform: rotate(180deg); }
.topnav .admin-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
  width: 12rem; background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45); overflow: hidden; z-index: 60; display: none;
}
.topnav .admin-menu.open .admin-dropdown { display: block; }
.topnav .ud-item.active { color: #f97316; background: rgba(255,255,255,0.05); }

/* ------------------------------------------------------------
   Page headers — Panel uses a bare heading, not a bordered card
   ------------------------------------------------------------ */
.welcome-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.welcome-card::before { display: none; }
.welcome-card h1 {
  /* Panel's dashboard heading is <h1 class="text-2xl font-bold text-white"> with
     NO font-display class, so it renders in Inter (the font-sans default), NOT
     Poppins. font-display/Poppins on the dashboard is used only for the wordmark
     logo. The old handoff note said "Poppins" but the real Panel source disagrees. */
  font-family: var(--font-primary);  /* Inter — matches Panel font-sans */
  font-size: 1.5rem;       /* text-2xl (Panel) */
  line-height: 2rem;
  font-weight: 700;        /* font-bold */
  letter-spacing: normal;  /* Panel h1 has no tracking utility (base.css forced -0.03em) */
}

/* ============================================================
   FLAMING-PARITY-V1 -- Panel 1:1 spacing (idempotent; do not duplicate)
   base.css already supplies glass bg, hairline border, 16px radius and the
   1280/px-6 container, so this only patches the real spacing deltas vs Panel.
     - bento cards   p~1.15/1.25rem -> p-6 (1.5rem)
     - settings      header+body two padded boxes -> ONE p-6 card (collapse)
     - settings card margin 1rem -> mb-6 (1.5rem)
     - heading       margin-bottom 1.5rem -> mb-8 (2rem)
     - backdrop blur 20px -> blur-xl (24px)
   NOTE: .settings-section bg/border are intentionally NOT set here so the
   .danger-zone red tint survives. .card padding is left for the Task #2 sweep.
   ============================================================ */

/* NOTE: welcome-card bottom margin is set in the V3 block (2rem / mb-8) —
   the stale 1.5rem line that used to live here was removed to keep one
   source of truth. */

.bento-card {
  padding: 1.5rem !important;                                /* p-6 */
  backdrop-filter: blur(24px);                               /* blur-xl */
  -webkit-backdrop-filter: blur(24px);
}

.settings-section {
  padding: 1.5rem !important;                                /* p-6 */
  margin-bottom: 1.5rem !important;                          /* mb-6 */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.settings-header { padding: 0 0 1rem 0 !important; border: none !important; background: none !important; }
.settings-body   { padding: 0 !important; }

/* ============================================================
   FLAMING-PARITY-V2 -- shared chrome (idempotent; do not duplicate)
   base.css forces min-height/min-width:44px on every button/.nav-link as an
   iOS touch target, but it is GLOBAL -- so on desktop it inflates the nav
   pills, the bell, the user/admin menus, and buttons (incl. the 2FA Dismiss,
   which makes the nag banner too tall). Scope it to touch so desktop matches
   Panel, where elements size to their padding.
   ============================================================ */

@media (pointer: fine) {
  button, a.btn, .nav-btn, .nav-link { min-height: 0; min-width: 0; }
}

/* nav links -> Panel px-3 py-1.5 rounded-lg text-sm */
.topnav .nav-link {
  padding: 0.375rem 0.75rem;       /* px-3 py-1.5 */
  font-size: 0.875rem;              /* text-sm */
  border-radius: var(--radius-sm);  /* rounded-lg (8px) */
}

/* ============================================================
   FLAMING-PARITY-V3 -- Dashboard page (idempotent; do not duplicate)
   Reconciled against Panel src/routes/dashboard/+page.svelte. base.css
   already gives glass cards (--bg-card rgba .03), 16px radius and the
   1280/px-6 container; V1/V2 fixed cards/nav/heading. This patches the
   remaining dashboard deltas: welcome margin, white heading, flat card
   sheen, the usage progress bars, and the Recent/By-Group tab group.
   ============================================================ */

/* Welcome header -> Panel: one stacked block (h1, nag, subtitle), mb-8.
   base.css makes .welcome-card a flex space-between ROW (old h1+p / button
   layout); now the button's gone and content stacks vertically like Panel. */
.welcome-card {
  display: block;                  /* was flex row */
  margin-bottom: 2rem !important;  /* mb-8 */
}
.welcome-card h1 {
  color: #fff;                     /* Panel text-white */
  margin-bottom: 0;                /* Panel h1 has no margin; gaps come from nag/sub */
}
.welcome-card .welcome-sub {
  margin-top: 0.25rem;             /* Panel subtitle mt-1 */
  color: var(--text-secondary);    /* Panel text-gray-400 */
  font-size: 1rem;                 /* Panel subtitle has no text-* class -> body default 1rem */
}

/* Panel stat cards are flat glass -- drop the 3% flame gradient sheen
   (welcome-card::before is already killed above; do the same for bento) */
.bento-card::before { display: none; }

/* Usage progress bars -> Panel h-2 track on bg-white/10 */
.track {
  height: 8px;                                        /* Panel h-2 (was 6px) */
  background: rgba(255, 255, 255, 0.10);              /* Panel bg-white/10 */
}

/* Recent / By-Group tab group -> Panel pill tabs
   container: bg-white/[0.03] rounded-xl p-1 border-white/[0.06]
   tab:       px-4 py-2 rounded-lg text-sm font-medium
   active:    bg-flame-500/15 text-flame-400 ; idle: gray-400 -> hover white */
.seg-tabs {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}
.seg-tab {
  padding: 0.5rem 1rem;                               /* px-4 py-2 */
  font-size: 0.875rem;                                /* text-sm */
  color: #9ca3af;                                     /* gray-400 */
}
.seg-tab.active {
  background: rgba(249, 115, 22, 0.15);               /* flame-500/15 */
  color: #fb923c;                                     /* flame-400 */
}
.seg-tab:hover:not(.active) { color: #fff; }          /* hover white */

/* Right-side controls in the "Your Items" header (Add Item + Export + tabs)
   grouped together so the title stays left and actions sit cleanly at right. */
.section-head .section-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============================================================
   FLAMING-PARITY-V4 -- global font rendering (idempotent)
   Panel's <body> is Tailwind `antialiased` (-webkit-font-smoothing:
   antialiased + -moz-osx-font-smoothing: grayscale). base.css never sets
   this, so Inter rendered heavier/larger -- the "same look, wrong size"
   effect. Match Panel so glyph weight/size line up 1:1.
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   FLAMING-PARITY-V5 -- content top gap (idempotent)
   Panel's page content wrapper is <main><div class="max-w-[1280px] mx-auto p-6">,
   i.e. padding-top: 1.5rem (24px) below the 58px nav. base.css's .content uses
   `padding: 2rem 1.5rem 5rem` -- top 2rem (32px), 8px too tall, so the gap from
   the nav to "Welcome back" sat lower than Panel. Match Panel's p-6 top.
   (Horizontal 1.5rem already matches p-6; bottom scroll space left as-is.)
   Scoped to desktop (>768px) so base.css's tighter mobile .content padding
   (1.25rem @≤768px, smaller below) is untouched.
   ============================================================ */
@media (min-width: 769px) {
  .content {
    padding-top: 1.5rem;   /* p-6 (Panel) -- was 2rem */
  }
}

/* ============================================================
   Price-status pill (top nav) — mirrors Panel's server pill.
   green: latest price near the item's historical low (good buy)
   yellow: mid · red: near its historical high (overpriced)
   ============================================================ */
.topnav .price-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.75rem; line-height: 1; font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.topnav .price-pill:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-hover); }
.topnav .price-pill .pp-seg { display: inline-flex; align-items: center; gap: 0.3rem; }
.topnav .price-pill .pp-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; display: inline-block; }
.topnav .price-pill .pp-div { color: var(--text-muted); }
.topnav .price-pill .pp-under { color: #34d399; }
.topnav .price-pill .pp-under .pp-dot { background: #10b981; }
.topnav .price-pill .pp-mid { color: #eab308; }
.topnav .price-pill .pp-mid .pp-dot { background: #eab308; }
.topnav .price-pill .pp-over { color: #f87171; }
.topnav .price-pill .pp-over .pp-dot { background: #ef4444; }
@media (max-width: 640px) { .topnav .price-pill { display: none; } }

/* ============================================================
   Site-wide announcement banners (admin-posted, dismissible).
   ============================================================ */
.site-banners { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.site-banner { border-radius: 0.5rem; margin-top: 0.75rem; border: 1px solid; }
.site-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; }
.site-banner p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-primary); }
.site-banner strong { color: #fff; }
.site-banner-x { background: none; border: none; color: var(--text-tertiary); font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0 0.25rem; }
.site-banner-x:hover { color: #fff; }
.site-banner.sb-info { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.30); }
.site-banner.sb-warning { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.30); }
.site-banner.sb-error { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.30); }

/* ============================================================
   Product-title rows: fixed-width column so every item name clips
   to the SAME width (identical right edge) regardless of its length,
   instead of stretching to its natural width and ending wherever.
   Single-line ellipsis already comes from base.css .item-title;
   here we just pin the box width. Scoped via the .item-title-fixed
   modifier so admin-activity / alert / saved-search rows (same markup,
   different content) keep their full width.
   ============================================================ */
.item-title.item-title-fixed {
  width: 15rem;
  max-width: 100%;
}