/* ═══════════════════════════════════════════════════════════════════════════
   D-DEY PMS — OVERRIDES & INLINE STYLE FIXES v4.0
   Phase 4: Remove rainbow profile cards, improve plan cards, fix inline styles
   This file overrides specific bad patterns without touching original JS
═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   PROFILE PAGE — Remove rainbow card backgrounds
   Override inline styles with unified neutral surface
══════════════════════════════════════════════════════ */

/* ALL profile cards — unified neutral surface */
#btn-open-gst,
#btn-open-qr,
#btn-install-app,
#btn-open-subscription,
#btn-open-usage,
#btn-open-staff,
#btn-open-import,
#btn-open-settings,
#btn-open-about,
#btn-open-support {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
}

/* Override inline background colors on icons — unified teal */
#btn-open-gst .p-card-icon {
  background: rgba(13,148,136,0.10) !important;
  color: var(--primary) !important;
}

#btn-open-qr .p-card-icon {
  background: rgba(13,148,136,0.10) !important;
  color: var(--primary) !important;
}

#btn-install-app .p-card-icon {
  background: rgba(13,148,136,0.10) !important;
  color: var(--primary) !important;
}

#btn-open-subscription .p-card-icon {
  background: rgba(13,148,136,0.10) !important;
  color: var(--primary) !important;
}

#btn-open-usage .p-card-icon {
  background: rgba(245,158,11,0.10) !important;
  color: var(--warning) !important;
}

#btn-open-staff .p-card-icon {
  background: rgba(16,185,129,0.10) !important;
  color: var(--success) !important;
}

#btn-open-import .p-card-icon {
  background: rgba(14,165,233,0.10) !important;
  color: var(--brand-sky) !important;
}

#btn-open-settings .p-card-icon {
  background: rgba(13,148,136,0.10) !important;
  color: var(--primary) !important;
}

#btn-open-about .p-card-icon {
  background: rgba(148,163,184,0.12) !important;
  color: var(--text-secondary) !important;
}

#btn-open-support .p-card-icon {
  background: rgba(245,158,11,0.10) !important;
  color: var(--warning) !important;
}

/* Profile card h3 text — remove inline color overrides */
#btn-open-gst .p-card-text h3,
#btn-open-qr .p-card-text h3,
#btn-open-support .p-card-text h3 {
  color: var(--text-main) !important;
}

/* Arrow — consistent */
.profile-card .arrow {
  color: var(--text-light) !important;
  opacity: 0.35 !important;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease !important;
}
.profile-card:hover .arrow {
  transform: translateX(3px) !important;
  opacity: 0.6 !important;
}

/* ══════════════════════════════════════════════════════
   HEADER — Remove inline styles
══════════════════════════════════════════════════════ */

/* Header company name — override inline color */
#header-company-name {
  color: var(--text-main) !important;
}

/* User name — override inline */
#user-name {
  font-size: 0.72rem !important;
  color: var(--text-secondary) !important;
}

/* header voice btn */
#header-voice-btn {
  color: var(--brand-sky) !important;
}

/* Notif badge */
#notif-badge {
  background: var(--danger) !important;
  border: 1.5px solid var(--surface) !important;
}

/* ══════════════════════════════════════════════════════
   ANALYTICS PAGE — Override inline styles
══════════════════════════════════════════════════════ */

/* Analytics heading — use DM Serif */
.analytics-scroll-container h2 {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* KPI cards — override inline styles for dark mode compat */
/* Revenue KPI card (the teal gradient one) - keep as is, it's good */
/* Bills KPI card - make border consistent */

/* Section labels in analytics */
.analytics-scroll-container > div > div[style*="text-transform:uppercase"] {
  font-family: 'DM Sans', sans-serif !important;
}

/* Analytics filter pills — override inline styles */
.an-filter-pill {
  background: var(--card-bg) !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--border) !important;
}

.an-filter-pill.active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

/* Inline styled search field — override with system */
#analytics-search {
  font-family: 'DM Sans', sans-serif !important;
}

/* ══════════════════════════════════════════════════════
   BILLING PAGE — Inventory inline style fixes
══════════════════════════════════════════════════════ */

/* Stock filter emojis look out of place, add consistent styling */
#filter-expiry {
  color: var(--danger) !important;
}

#filter-low {
  color: var(--warning) !important;
}

/* Payment mode label */
#payment-mode + * label,
.summary-actions label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

/* Developer credit */
.developer-credit {
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════
   ONBOARDING WIZARD — Plan cards upgrade
══════════════════════════════════════════════════════ */

/* Wizard overlay */
.wiz-overlay {
  background: var(--bg-gradient) !important;
}

/* Wizard step title */
.wiz-step-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-main) !important;
}

.wiz-step-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--text-secondary) !important;
}

/* Plan cards — upgrade design */
.wiz-plans {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.wiz-plan-card {
  flex: 1;
  background: var(--card-bg) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px 10px !important;
  cursor: pointer;
  transition: all var(--t-base) var(--ease-spring) !important;
  position: relative;
  text-align: center;
}

.wiz-plan-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-primary) !important;
  transform: translateY(-2px);
}

.wiz-plan-card:active { transform: scale(0.97) !important; }

.wiz-plan-selected {
  border-color: var(--primary) !important;
  background: rgba(13,148,136,0.06) !important;
  box-shadow: var(--shadow-primary), 0 0 0 3px rgba(13,148,136,0.12) !important;
}

.wiz-plan-popular {
  border-color: rgba(13,148,136,0.35) !important;
}

.wiz-plan-name {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: var(--text-main) !important;
  margin-bottom: 6px;
}

.wiz-plan-price {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1;
}

.wiz-plan-price small {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.65rem !important;
  color: var(--text-light) !important;
  font-weight: 400 !important;
}

.wiz-plan-badge {
  background: linear-gradient(135deg, var(--primary), var(--brand-sky)) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}

.wiz-plan-features {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiz-plan-features li {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.70rem !important;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
}

/* Wizard buttons */
.wiz-btn-primary {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  background: var(--primary) !important;
  box-shadow: var(--shadow-primary) !important;
  letter-spacing: 0.01em !important;
  transition: all var(--t-base) var(--ease-spring) !important;
}

.wiz-btn-primary:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
}

.wiz-btn-secondary {
  font-family: 'DM Sans', sans-serif !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-secondary) !important;
  transition: all var(--t-base) var(--ease-out) !important;
}

.wiz-btn-secondary:hover {
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
}

/* Wizard inputs */
.wiz-input {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--text-main) !important;
}

.wiz-label {
  font-family: 'DM Sans', sans-serif !important;
  color: var(--text-light) !important;
}

/* Wizard input group */
.wiz-input-group {
  border-radius: var(--radius-md) !important;
  background: var(--card-bg) !important;
  border: 1.5px solid var(--border) !important;
  transition: border-color var(--t-base) !important;
}

.wiz-input-group:focus-within {
  border-color: var(--primary) !important;
  box-shadow: var(--glow-teal) !important;
}

/* ══════════════════════════════════════════════════════
   EXPIRY SCREEN — Refined
══════════════════════════════════════════════════════ */
.expiry-overlay {
  background: var(--bg-gradient) !important;
}

.expiry-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 340px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
}

.expiry-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: rgba(13,148,136,0.10);
  color: var(--primary);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
}

/* Expiry renew button */
.expiry-renew-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: all var(--t-base) var(--ease-spring);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.expiry-renew-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.38);
}

.expiry-renew-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════
   STATUS SCREEN — Approval pending
══════════════════════════════════════════════════════ */
#status-screen {
  background: var(--bg-gradient) !important;
  font-family: 'DM Sans', sans-serif !important;
}

#status-title {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-main) !important;
}

/* ══════════════════════════════════════════════════════
   SUBSCRIPTION MODAL — Billing tab
══════════════════════════════════════════════════════ */
.sub-plan-card {
  position: relative;
}

/* Plan header */
#fs-plan-card {
  overflow: visible;
}

/* ══════════════════════════════════════════════════════
   GLOBAL FONT OVERRIDE
   Force all text to DM Sans (body) except headings
══════════════════════════════════════════════════════ */

/* Override Outfit font globally */
body, input, select, button, textarea {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
}

/* But keep heading elements with DM Serif */
h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, serif !important;
}

/* Mono numbers */
.mono-num,
#cart-total,
#cart-subtotal,
#cart-base-total,
#cart-tax-total,
#total-sales-amount,
#total-orders-count {
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE FIXES — Ensure surfaces look right
══════════════════════════════════════════════════════ */

body.dark-mode .profile-card:hover {
  background: rgba(255,255,255,0.04) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

body.dark-mode .wiz-plan-card {
  background: var(--card-bg) !important;
}

body.dark-mode .filter-btn,
body.dark-mode .an-filter-pill {
  background: var(--card-bg) !important;
}

/* ══════════════════════════════════════════════════════
   SUPPORT MODAL — Remove Cormorant Garamond
══════════════════════════════════════════════════════ */
/* Any modal headings using old font */
[style*="Cormorant Garamond"],
[style*="cormorant"] {
  font-family: 'DM Serif Display', serif !important;
}

/* ══════════════════════════════════════════════════════
   BOTTOM NAV LABEL VISIBILITY
══════════════════════════════════════════════════════ */

/* Ensure nav labels exist (JS adds them) */
#nav-billing .nav-label,
#nav-inventory .nav-label,
#nav-analytics .nav-label,
#nav-profile .nav-label {
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: 'DM Sans', sans-serif;
}

/* ══════════════════════════════════════════════════════
   GST MODAL — Tab styling
══════════════════════════════════════════════════════ */
.gst-tab {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  transition: all var(--t-base) var(--ease-out) !important;
}

.gst-tab.active {
  background: var(--primary) !important;
  color: white !important;
}

/* ══════════════════════════════════════════════════════
   NOTIFICATION DROPDOWN
══════════════════════════════════════════════════════ */
#notif-dropdown {
  font-family: 'DM Sans', sans-serif !important;
}

#notif-dropdown > div:first-child {
  font-family: 'DM Serif Display', serif !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
}

/* ══════════════════════════════════════════════════════
   STOCK PAGE INLINE FIXES
══════════════════════════════════════════════════════ */

/* Stock search override */
#stock-search {
  max-width: 150px !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════
   EXIT TEST MODE BUTTON
══════════════════════════════════════════════════════ */
#exit-test-mode-btn {
  background: rgba(234,179,8,0.12) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(234,179,8,0.25) !important;
  border-radius: var(--radius-md) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all var(--t-base) !important;
}

#exit-test-mode-btn:hover {
  background: rgba(234,179,8,0.20) !important;
}


/* ═══════════════════════════════════════════════════
   HOTFIXES — v4.1 (from screenshot review)
═══════════════════════════════════════════════════ */

/* ── FIX 1: Mobile billing — Invoice Items card visible ──────────────── */
/* Root cause: overflow:hidden on parent + no explicit height collapses left card */
@media (max-width: 1023px) {
  .billing-main-layout {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 12px;
  }

  .billing-left-card {
    flex: none !important;
    min-height: 52vh !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .billing-right-card {
    flex: none !important;
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Make scrollable-list fill available space inside left card */
  .scrollable-list {
    min-height: 140px;
    max-height: 35vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── FIX 2: nav-item overflow ─────────────────────────────────────────── */
/* overflow:visible needed so desktop left-bar accent (::before) isn't clipped */
.nav-item {
  overflow: visible !important;
}
/* Desktop active::before = left accent bar (set in index.html media query).
   Mobile has no ::before active state — only color change. No override needed. */

/* ── FIX 3: "Main" (exit test mode) button — style only when JS shows it ── */
/* Button already has class="hidden" in HTML, JS removes it when in test mode */
/* We just improve the styling - DO NOT add display:none here */
#exit-test-mode-btn:not(.hidden) {
  background: rgba(234,179,8,0.12) !important;
  color: #92400e !important;
  border: 1px solid rgba(234,179,8,0.3) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
}


/* ── FIX 4: VOICE AGENT FLOATING BOTTOM SHEET ────────────────────────── */

/* Remove old full-screen overlay behavior */
#voice-agent-overlay.modal-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
  align-items: flex-end !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Floating sheet */
.va-sheet {
  position: fixed;
  bottom: calc(var(--nav-height) + 8px + var(--safe-bottom));
  left: 12px;
  right: 12px;
  z-index: 4000;
  pointer-events: all;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(14,165,233,0.12);
  overflow: hidden;
  animation: sheetSlideUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
  /* Subtle sky blue glow — voice is sky blue brand color */
  outline: 1.5px solid rgba(14,165,233,0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.va-sheet.hidden {
  display: none !important;
}

body.dark-mode .va-sheet {
  background: #0D1B2A;
  border-color: rgba(14,165,233,0.2);
}

/* Top accent line — sky blue for voice */
.va-sheet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-sky), rgba(14,165,233,0.3), transparent);
}

/* Drag handle */
.va-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: var(--radius-full);
  margin: 10px auto 0;
}

/* Inner layout */
.va-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 16px;
}

/* Visualizer ring */
.va-pulse-ring {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(14,165,233,0.10);
  border: 1.5px solid rgba(14,165,233,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  animation: vaPulseRing 2s ease infinite;
}

@keyframes vaPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
}

.va-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-sky);
  animation: livePulse 1.4s ease infinite;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

/* Audio bars visualizer */
.va-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.va-bar {
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--brand-sky);
  opacity: 0.7;
  animation: vaBarDance 0.9s ease infinite;
  display: block;
}

.va-bar:nth-child(1) { height: 4px; animation-delay: 0ms; }
.va-bar:nth-child(2) { height: 8px; animation-delay: 120ms; }
.va-bar:nth-child(3) { height: 12px; animation-delay: 60ms; }
.va-bar:nth-child(4) { height: 8px; animation-delay: 180ms; }
.va-bar:nth-child(5) { height: 4px; animation-delay: 90ms; }

@keyframes vaBarDance {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Center text */
.va-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.va-name {
  font-family: 'DM Serif Display', serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.va-status {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: var(--brand-sky);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* End call button */
.va-end-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(239,68,68,0.12);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-base) var(--ease-spring);
  border: 1px solid rgba(239,68,68,0.2);
}

.va-end-btn:hover {
  background: var(--danger);
  color: white;
  box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}

.va-end-btn:active { transform: scale(0.88); }

.va-end-btn .material-icons-outlined { font-size: 1.2rem; }

/* When voice sheet is visible, nudge bottom nav up slightly */
body.voice-active #bottom-nav {
  transform: translateY(0); /* nav stays, sheet sits above */
}


/* ═══════════════════════════════════════════════════
   HOTFIXES v4.2 — Voice Agent Gemini Orb + Nav Gap
═══════════════════════════════════════════════════ */

/* ── Remove old va-pulse-ring / va-bar styles (replaced by orb) ───── */
.va-pulse-ring, .va-pulse-dot, .va-bars, .va-bar { display: none !important; }

/* ── GEMINI-STYLE SPINNING ORB ──────────────────────────────────────── */
.va-gemini-orb {
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Rotating rings — each at different speed & color like Gemini */
.va-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.va-orb-ring-1 {
  width: 48px;
  height: 48px;
  border-top-color: #4285F4;
  border-right-color: rgba(66,133,244,0.3);
  animation: vaOrbSpin 1.4s linear infinite;
}

.va-orb-ring-2 {
  width: 36px;
  height: 36px;
  border-top-color: #34A853;
  border-left-color: rgba(52,168,83,0.3);
  animation: vaOrbSpin 2.1s linear infinite reverse;
}

.va-orb-ring-3 {
  width: 24px;
  height: 24px;
  border-top-color: #FBBC05;
  border-bottom-color: rgba(234,67,53,0.4);
  animation: vaOrbSpin 1.8s linear infinite;
  animation-delay: -0.4s;
}

/* Inner glowing core */
.va-orb-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(66,133,244,0.8) 60%, transparent 100%);
  animation: vaOrbCorePulse 1.8s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes vaOrbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes vaOrbCorePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}

/* ── GEMINI BADGE ───────────────────────────────────────────────────── */
.va-gemini-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.60rem;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.02em;
  opacity: 0.7;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make va-center accommodate 3 lines */
.va-center {
  gap: 1px !important;
}

.va-name {
  font-size: 0.88rem !important;
}

/* ── FIX: Bottom nav blank gap above it ─────────────────────────────── */
/* Gap caused by page-view height being 100% but billing content not filling it */
/* Fix: ensure main-content is tight, remove any extra margin */
#main-content {
  background: var(--bg-gradient) !important;
}

/* On mobile, billing page should scroll naturally, not leave blank */
@media (max-width: 1023px) {
  #billing-page {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .billing-main-layout {
    flex-direction: column !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: none !important;
  }

  .billing-left-card {
    flex: none !important;
    min-height: 55vh !important;
    width: 100% !important;
  }

  .billing-right-card {
    flex: none !important;
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
    margin-bottom: 80px; /* clearance for va-sheet when active */
  }
}

/* ── Nav blank gap: sidebar has its own padding, no extra needed ────── */
/* padding handled in index.html desktop media query */

/* Ensure app-container fills full height with no gap */
#app-container {
  height: 100dvh !important;
  overflow: hidden !important;
}

/* ── va-sheet: keep above nav, proper stacking ──────────────────────── */
.va-sheet {
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 6px) !important;
}

/* ══════════════════════════════════════════════════
   GLOBAL SMOOTH POLISH LAYER
══════════════════════════════════════════════════ */

/* Profile cards — smooth hover lift */
.profile-card {
  transition:
    transform 0.28s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.28s cubic-bezier(0.22,1,0.36,1),
    background 0.2s ease !important;
  will-change: transform;
  backface-visibility: hidden;
}
.profile-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}
.profile-card:active {
  transform: scale(0.98) !important;
}
body.dark-mode .profile-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

/* Smoother modal overlay appearance */
.modal-overlay {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Smooth select dropdown */
select.full-input {
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
}
select.full-input:hover {
  border-color: var(--primary) !important;
}

/* Filter buttons — smoother transitions */
.filter-btn,
.an-filter-pill {
  transition:
    background 0.22s cubic-bezier(0.22,1,0.36,1),
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    transform 0.12s cubic-bezier(0.22,1,0.36,1) !important;
  backface-visibility: hidden;
}

/* Table rows — smooth hover */
tbody tr {
  transition: background 0.18s ease !important;
}
tbody tr:hover {
  background: rgba(13,148,136,0.03) !important;
}
body.dark-mode tbody tr:hover {
  background: rgba(45,212,191,0.04) !important;
}

/* GPU acceleration for animated elements */
.nav-item,
.dash-card,
.dm-mini,
.dash-qa-btn,
.wiz-plan-card,
.filter-btn,
.an-filter-pill {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}