/**
 * Pampered Paws — Shared Pampered green glass tokens
 * Forest-green atmosphere for staff + customer portals (overrides glass-velaris.css).
 */

#pp-staff-dashboard-root.pp-glass-shell,
#pp-customer-dashboard-root.pp-glass-shell,
body.pp-v4.pp-glass-shell:has(.staff-dashboard),
body.pp-v4.pp-glass-shell:has(.dashboard-wrapper),
.pp-v4.pp-glass-shell.staff-dashboard,
.pp-v4 .pp-glass-shell.staff-dashboard,
.pp-v4.pp-glass-shell.dashboard-wrapper,
.pp-v4 .pp-glass-shell.dashboard-wrapper {
  --pp-brand-deep: #0f2b1d;
  --pp-brand-mid: #1e3a2f;
  --pp-brand-forest: #2d5016;
  --pp-brand-leaf: #4a7c28;
  --pp-brand-bright: #6ba33e;
  --pp-brand-glow: rgba(107, 163, 62, 0.35);
  --pp-shell-gap: 28px;
  --pp-section-gap: 24px;

  --pp-bg-gradient:
    radial-gradient(ellipse 88% 68% at 8% 6%, rgba(107, 163, 62, 0.32) 0%, transparent 54%),
    radial-gradient(ellipse 72% 52% at 94% 10%, rgba(34, 197, 94, 0.2) 0%, transparent 48%),
    radial-gradient(ellipse 58% 58% at 48% 100%, rgba(45, 80, 22, 0.38) 0%, transparent 56%),
    radial-gradient(ellipse 42% 38% at 72% 48%, rgba(254, 252, 232, 0.06) 0%, transparent 48%),
    linear-gradient(158deg, #081a12 0%, #0f2b1d 20%, #1e3a2f 46%, #2d5016 70%, #183828 88%, #0f2419 100%);

  --pp-glass: linear-gradient(148deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.7) 100%);
  --pp-glass-strong: linear-gradient(148deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 255, 250, 0.78) 100%);
  --pp-glass-border: rgba(255, 255, 255, 0.62);
  --pp-glass-rim: rgba(255, 255, 255, 0.94);
  --pp-glass-blur: blur(26px) saturate(160%);
  --pp-glass-shadow:
    0 12px 40px rgba(8, 26, 16, 0.24),
    0 3px 12px rgba(8, 26, 16, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --pp-glass-accent: var(--pp-brand-bright);
  --pp-glass-accent-soft: rgba(74, 124, 40, 0.22);
  --pp-float-nav-bg: rgba(12, 38, 26, 0.94);
  --pp-cta: var(--pp-brand-forest);
  --pp-cta-hover: var(--pp-brand-leaf);
}

#pp-staff-dashboard-root.pp-glass-shell::before,
#pp-customer-dashboard-root.pp-glass-shell::before,
body.pp-v4.pp-glass-shell:has(.staff-dashboard)::before,
body.pp-v4.pp-glass-shell:has(.dashboard-wrapper)::before {
  background:
    radial-gradient(circle at 14% 20%, rgba(107, 163, 62, 0.16) 0%, transparent 32%),
    radial-gradient(circle at 86% 14%, rgba(34, 197, 94, 0.11) 0%, transparent 28%),
    radial-gradient(circle at 52% 94%, rgba(45, 80, 22, 0.14) 0%, transparent 34%);
}

/* Shared: green CTAs (override velaris navy) */
#pp-staff-dashboard-root .dash-btn-primary,
#pp-customer-dashboard-root .dash-btn-primary,
.pp-v4.pp-glass-shell .dash-topbar-actions .dash-btn-primary,
.pp-v4 .pp-glass-shell .dash-topbar-actions .dash-btn-primary {
  background: linear-gradient(135deg, var(--pp-brand-forest) 0%, var(--pp-brand-leaf) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 20px rgba(45, 80, 22, 0.32) !important;
  color: #fff !important;
}

#pp-staff-dashboard-root .dash-btn-primary:hover,
#pp-customer-dashboard-root .dash-btn-primary:hover,
.pp-v4.pp-glass-shell .dash-topbar-actions .dash-btn-primary:hover,
.pp-v4 .pp-glass-shell .dash-topbar-actions .dash-btn-primary:hover {
  background: linear-gradient(135deg, var(--pp-brand-leaf) 0%, var(--pp-brand-bright) 100%) !important;
  transform: translateY(-1px);
}

#pp-staff-dashboard-root .dash-nav-item.active,
#pp-customer-dashboard-root .dash-nav-item.active,
.pp-v4.pp-glass-shell .dash-nav-item.active,
.pp-v4 .pp-glass-shell .dash-nav-item.active {
  background: linear-gradient(135deg, var(--pp-brand-forest) 0%, var(--pp-brand-leaf) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(45, 80, 22, 0.3) !important;
}

#pp-staff-dashboard-root .pp-bottom-nav,
#pp-customer-dashboard-root .pp-bottom-nav,
.pp-v4.pp-glass-shell .pp-bottom-nav,
.pp-v4 .pp-glass-shell .pp-bottom-nav {
  background: var(--pp-float-nav-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#pp-staff-dashboard-root .pp-bottom-nav__item.is-active,
#pp-customer-dashboard-root .pp-bottom-nav__item.is-active,
.pp-v4.pp-glass-shell .pp-bottom-nav__item.is-active,
.pp-v4 .pp-glass-shell .pp-bottom-nav__item.is-active {
  color: var(--pp-brand-bright) !important;
}

#pp-staff-dashboard-root .pp-bottom-nav__item--book .pp-bottom-nav__fab,
#pp-customer-dashboard-root .pp-bottom-nav__item--book .pp-bottom-nav__fab,
.pp-v4.pp-glass-shell .pp-bottom-nav__item--book .pp-bottom-nav__fab,
.pp-v4 .pp-glass-shell .pp-bottom-nav__item--book .pp-bottom-nav__fab {
  background: linear-gradient(135deg, var(--pp-brand-forest), var(--pp-brand-leaf)) !important;
  box-shadow: 0 8px 24px rgba(45, 80, 22, 0.4) !important;
}

#pp-staff-dashboard-root .pp-action-tile:hover,
#pp-customer-dashboard-root .pp-action-tile:hover,
.pp-v4.pp-glass-shell .pp-action-tile:hover,
.pp-v4 .pp-glass-shell .pp-action-tile:hover {
  border-color: rgba(74, 124, 40, 0.42) !important;
}

/* ── Bottom nav: viewport-fixed when reparented to body ── */
body > .pp-bottom-nav,
body > .pp-bottom-nav.pp-v4 {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: var(--pp-float-nav-width, min(calc(100% - 32px), 420px)) !important;
  max-width: min(calc(100% - 24px), 440px) !important;
  height: auto !important;
  min-height: 58px !important;
  margin: 0 !important;
  border-radius: var(--pp-radius-full) !important;
  overflow: visible;
  z-index: 10002 !important;
  pointer-events: auto;
}