/* ══════════════════════════════════════════════════════════════════════
   WOW GLOW — v139 premium override layer
   Royal navy · antique metallic gold (+ rose-gold) · Fraunces headings
   ----------------------------------------------------------------------
   Loaded LAST in index.html + admin.html so the cascade wins without
   editing component files. PURE RESTYLE — no markup, data, or logic touched.

   ⚠ PROPOSAL FIREWALL is the first rule below: the 100-iteration proposal
   and all PDF/export output are protected. Never let this layer reach them.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0. PROPOSAL FIREWALL
   The only shared token value changed app-wide is --font-head
   (Cormorant → Fraunces). The on-screen proposal consumes it 12×,
   so re-pin the proposal subtree back to Cormorant. PDF export builds
   its own document with embedded fonts and is unaffected.
   ───────────────────────────────────────────────────────────── */
#panel-proposal,
.proposal-output,
.proposal-output * {
  --font-head: 'Cormorant Garamond', Georgia, serif;
}

/* ─────────────────────────────────────────────────────────────
   1. Keyframes
   ───────────────────────────────────────────────────────────── */
@keyframes wv-sheen   { 0% { left: -60%; } 100% { left: 160%; } }
@keyframes wv-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb),0.55); opacity: 1; }
                        50%     { box-shadow: 0 0 0 5px rgba(var(--gold-rgb),0); opacity: 0.6; } }
@keyframes wv-shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes wv-rise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wv-soft    { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ─────────────────────────────────────────────────────────────
   2. Gilded wordmarks — the ONE bold moment per screen
   Brand titles wear true metallic gold (champagne → deep → champagne).
   ───────────────────────────────────────────────────────────── */
.topbar-title,
.splash-title,
.login-heading,
.ap-hdr-brand,
.ap-login-title {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* champagne fallback when clip unsupported */
  background-color: var(--gold2);
}
/* Display serif wants a touch more weight at large sizes */
.login-heading, .ap-login-title { font-weight: 700; letter-spacing: 0.01em; }
.section-title { letter-spacing: 0.005em; }

/* ─────────────────────────────────────────────────────────────
   3. Primary CTAs — full metal gold + breathing sheen sweep + dark ink
   ───────────────────────────────────────────────────────────── */
.btn-gold,
.login-btn,
.pwa-bar-btn,
.ap-btn-approve {
  position: relative;
  overflow: hidden;
  background: var(--metal-gold);
  color: #2a1f0a;
  border: 1px solid rgba(var(--gold-rgb),0.55);
  box-shadow: 0 10px 30px -12px rgba(var(--gold-rgb),0.55);
}
.btn-gold::after,
.login-btn::after,
.pwa-bar-btn::after,
.ap-btn-approve::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-18deg);
  animation: wv-sheen 4.5s var(--ease-out) infinite;
  pointer-events: none;
}
.btn-gold:hover,
.login-btn:hover,
.pwa-bar-btn:hover,
.ap-btn-approve:hover {
  box-shadow: 0 14px 38px -12px rgba(var(--gold-rgb),0.7);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────
   4. Cinematic card depth + gold-glow lift on hover
   ───────────────────────────────────────────────────────────── */
.glass-card,
.dash-stat-card {
  box-shadow: var(--sh-deep);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s var(--ease-out);
}
.glass-card:hover,
.dash-stat-card:hover {
  border-color: rgba(var(--gold-rgb),0.32);
  box-shadow: var(--sh-deep), var(--gold-glow-lift);
  transform: translateY(-3px);
}

/* Refined eyebrow badge — mono, gilded, jewel pill */
.section-badge {
  font-family: var(--font-mono);
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.14), rgba(var(--gold-rgb),0.04));
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ─────────────────────────────────────────────────────────────
   5. Tab bar — active tab gets a soft gold underglow
   ───────────────────────────────────────────────────────────── */
.tab-btn.active {
  text-shadow: 0 0 18px rgba(var(--gold-rgb),0.35);
}

/* ─────────────────────────────────────────────────────────────
   6. Reusable utilities (breathing dot · shimmer skeleton · empty state)
   Available app-wide for current + future use.
   ───────────────────────────────────────────────────────────── */
.wv-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold2);
  animation: wv-breathe 2.6s var(--ease-out) infinite;
}
.wv-sk {
  background: linear-gradient(100deg, var(--bg2) 30%, var(--bg3) 50%, var(--bg2) 70%);
  background-size: 240% 100%;
  border-radius: 8px;
  animation: wv-shimmer 1.6s linear infinite;
}
.wv-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: var(--text3);
  animation: wv-rise 0.4s var(--ease-out);
}
.wv-empty-icon {
  width: 60px; height: 60px; padding: 15px;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.12), transparent 72%);
  border: 1px solid rgba(var(--gold-rgb),0.22);
}
.wv-empty-title { font-family: var(--font-head); font-size: 1.2rem; color: var(--text2); }
.wv-activating { animation: wv-soft 2.1s var(--ease-out) infinite; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN COMMAND CENTRE — same metal/depth language
   ═══════════════════════════════════════════════════════════════ */

/* Primary nav: active tab becomes a real metal-gold pill */
.admin-nav-btn.active,
.rev-tab-btn.active,
.comp-mkt-tab.active,
.comp-lvl-tab.active {
  background: var(--metal-gold) !important;
  color: #2a1f0a !important;
  border-color: transparent !important;
  font-weight: 700;
  box-shadow: 0 4px 14px -5px rgba(var(--gold-rgb),0.6);
}

/* Header: hairline gold separator glow under the command-centre bar */
.ap-header {
  box-shadow: 0 1px 0 rgba(var(--gold-rgb),0.18), 0 8px 28px -20px rgba(0,0,0,0.9);
}

/* ADMIN badge gilded */
.ap-user-badge {
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.16), rgba(var(--gold-rgb),0.05));
  border: 1px solid rgba(var(--gold-rgb),0.34);
  color: var(--gold2);
}

/* Revenue / data tables: gilded header row + cinematic table depth */
.rev-table,
.comparison-table {
  box-shadow: var(--sh-deep);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rev-table thead th,
.comparison-table thead th {
  background: linear-gradient(180deg, rgba(var(--gold-rgb),0.12), rgba(var(--gold-rgb),0.03));
  color: var(--gold2);
  letter-spacing: 0.04em;
}

/* Stat cards already covered by §4 (.dash-stat-card) */

/* ─────────────────────────────────────────────────────────────
   7. Touch-target floor on small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .btn-gold, .login-btn, .ap-btn-approve,
  .admin-nav-btn, .rev-tab-btn { min-height: 40px; }
}