/* ═══════════════════════════════════════════════════════════════
   wow-features.css — Clean & Techy Overrides for Bakes Dashboard
   Style: white + #007aff blue, DigitalOcean/Stripe aesthetic
   Loaded LAST after all other stylesheets — uses !important where needed
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Variables (Theme Override) ─── */
:root {
  --wow-accent: #007aff !important;
  --wow-accent-hover: #005bbf !important;
  --wow-accent-light: rgba(0, 122, 255, 0.08) !important;
  --wow-accent-subtle: rgba(0, 122, 255, 0.04) !important;
  --wow-bg: #ffffff !important;
  --wow-surface: #ffffff !important;
  --wow-text: #1d1d1f !important;
  --wow-text-secondary: #86868b !important;
  --wow-border: rgba(0, 0, 0, 0.06) !important;
  --wow-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  --wow-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  --wow-radius: 16px !important;
  --wow-radius-sm: 10px !important;
  --wow-blur: saturate(180%) blur(20px) !important;
  --wow-green: #34c759 !important;
  --wow-orange: #ff9500 !important;
  --wow-red: #ff3b30 !important;
  --wow-chart-bg: #f5f7fa !important;
}

/* Dark theme override */
body.light-mode {
  --wow-bg: #f7f9fc !important;
  --wow-surface: #ffffff !important;
  --wow-text: #1d1d1f !important;
  --wow-text-secondary: #86868b !important;
  --wow-border: rgba(0, 0, 0, 0.06) !important;
  --wow-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  --wow-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Default body (dark mode) */
body:not(.light-mode) {
  --wow-bg: #1c1c1e !important;
  --wow-surface: #2c2c2e !important;
  --wow-text: #f5f5f7 !important;
  --wow-text-secondary: #aeaeb2 !important;
  --wow-border: rgba(255, 255, 255, 0.08) !important;
  --wow-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  --wow-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  --wow-chart-bg: #3a3a3c !important;
}

/* ─── Sticky Topbar with backdrop-filter blur ─── */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  -webkit-backdrop-filter: var(--wow-blur) !important;
  backdrop-filter: var(--wow-blur) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid var(--wow-border) !important;
  transition: background 0.3s ease !important;
}

body:not(.light-mode) .nav {
  background: rgba(28, 28, 30, 0.78) !important;
  border-bottom: 1px solid var(--wow-border) !important;
}

/* ─── Card Hover Lift ─── */
.card, .stat-card, .health-breakdown-card,
[class*="card"] {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease !important;
}

.card:hover, .stat-card:hover, 
[class*="card"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* ─── Button Ripple Effect ─── */
.ripple-btn {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.ripple-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), 
              rgba(0, 122, 255, 0.25) 0%, transparent 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}

.ripple-btn:active::after {
  opacity: 1 !important;
  transition: opacity 0s !important;
}

/* ─── Health Score Widget ─── */
.health-score-widget {
  background: var(--wow-surface) !important;
  border-radius: var(--wow-radius) !important;
  border: 1px solid var(--wow-border) !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}

.health-score-ring {
  width: 100px !important;
  height: 100px !important;
  display: block !important;
  margin: 0 auto 12px !important;
}

.health-score-ring .ring-bg {
  fill: none !important;
  stroke: var(--wow-chart-bg) !important;
  stroke-width: 6 !important;
}

.health-score-ring .ring-fg {
  fill: none !important;
  stroke: var(--wow-accent) !important;
  stroke-width: 6 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.health-score-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--wow-text) !important;
  text-align: center !important;
  line-height: 1 !important;
}

.health-score-grade {
  display: inline-block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wow-surface) !important;
  background: var(--wow-accent) !important;
  border-radius: 8px !important;
  padding: 2px 10px !important;
  margin-left: 6px !important;
}

.health-score-label {
  font-size: 13px !important;
  color: var(--wow-text-secondary) !important;
  text-align: center !important;
  margin-top: 4px !important;
}

.breakdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--wow-border) !important;
  font-size: 13px !important;
}

.breakdown-item:last-child {
  border-bottom: none !important;
}

.breakdown-bar {
  flex: 1 !important;
  height: 4px !important;
  background: var(--wow-chart-bg) !important;
  border-radius: 2px !important;
  margin: 0 12px !important;
  overflow: hidden !important;
}

.breakdown-bar-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: var(--wow-accent) !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.breakdown-label {
  color: var(--wow-text) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.breakdown-score {
  color: var(--wow-text-secondary) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  min-width: 40px !important;
  text-align: right !important;
}

/* ─── Quick-Log FAB ─── */
.fab-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999 !important;
}

.fab-btn {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--wow-accent) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4) !important;
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.fab-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(0, 122, 255, 0.5) !important;
}

.fab-btn:active {
  transform: scale(0.95) !important;
}

.fab-panel {
  position: fixed !important;
  bottom: 92px !important;
  right: 24px !important;
  width: 380px !important;
  max-height: calc(100vh - 160px) !important;
  overflow-y: auto !important;
  background: var(--wow-surface) !important;
  border-radius: var(--wow-radius) !important;
  border: 1px solid var(--wow-border) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
  padding: 20px !important;
  z-index: 998 !important;
  transform: translateY(12px) scale(0.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.25s ease !important;
  transform-origin: bottom right !important;
}

.fab-panel.open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.fab-panel h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--wow-text) !important;
  margin: 0 0 16px 0 !important;
}

.fab-panel .form-group {
  margin-bottom: 14px !important;
}

.fab-panel label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--wow-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

.fab-panel input[type="number"],
.fab-panel input[type="text"] {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: var(--wow-radius-sm) !important;
  border: 1px solid var(--wow-border) !important;
  background: var(--wow-bg) !important;
  color: var(--wow-text) !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.fab-panel input:focus {
  border-color: var(--wow-accent) !important;
  box-shadow: 0 0 0 3px var(--wow-accent-light) !important;
}

.water-btns {
  display: flex !important;
  gap: 8px !important;
}

.water-btn {
  flex: 1 !important;
  padding: 10px !important;
  border-radius: var(--wow-radius-sm) !important;
  border: 1px solid var(--wow-border) !important;
  background: var(--wow-bg) !important;
  color: var(--wow-accent) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.water-btn:hover {
  background: var(--wow-accent-light) !important;
  border-color: var(--wow-accent) !important;
}

.water-btn:active {
  transform: scale(0.97) !important;
}

.fab-panel .peptide-checklist {
  max-height: 160px !important;
  overflow-y: auto !important;
  border: 1px solid var(--wow-border) !important;
  border-radius: var(--wow-radius-sm) !important;
  padding: 4px !important;
}

.fab-panel .peptide-check-item {
  display: flex !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.fab-panel .peptide-check-item:hover {
  background: var(--wow-accent-subtle) !important;
}

.fab-panel .peptide-check-item input[type="checkbox"] {
  margin-right: 8px !important;
  accent-color: var(--wow-accent) !important;
}

.fab-panel textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: var(--wow-radius-sm) !important;
  border: 1px solid var(--wow-border) !important;
  background: var(--wow-bg) !important;
  color: var(--wow-text) !important;
  font-size: 13px !important;
  resize: vertical !important;
  min-height: 60px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
  font-family: inherit !important;
}

.fab-panel textarea:focus {
  border-color: var(--wow-accent) !important;
  box-shadow: 0 0 0 3px var(--wow-accent-light) !important;
}

.fab-submit-btn {
  width: 100% !important;
  padding: 12px !important;
  border-radius: var(--wow-radius-sm) !important;
  border: none !important;
  background: var(--wow-accent) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

.fab-submit-btn:hover {
  background: var(--wow-accent-hover) !important;
}

.fab-submit-btn:active {
  transform: scale(0.98) !important;
}

.fab-toast {
  position: fixed !important;
  bottom: 90px !important;
  right: 24px !important;
  background: var(--wow-green) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: var(--wow-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none !important;
}

.fab-toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ─── Live Clock + Service Status ─── */
.topbar-strip {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 13px !important;
  color: var(--wow-text-secondary) !important;
}

.live-clock-display {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--wow-text) !important;
  letter-spacing: 0.3px !important;
  font-variant-numeric: tabular-nums !important;
}

.live-date-display {
  font-size: 12px !important;
  color: var(--wow-text-secondary) !important;
}

.service-status-strip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.service-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.service-dot.online {
  background: var(--wow-green) !important;
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.5) !important;
}

.service-dot.offline {
  background: var(--wow-red) !important;
}

.service-dot.checking {
  background: var(--wow-orange) !important;
  animation: pulse-dot 1.2s ease-in-out infinite !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ─── Theme Toggle Wow Animation ─── */
.theme-toggle {
  position: relative !important;
  overflow: hidden !important;
}

.theme-toggle.wow-spin .sun-icon,
.theme-toggle.wow-spin .moon-icon {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.25s ease !important;
}

.theme-toggle:active .sun-icon {
  transform: rotate(60deg) scale(0.8) !important;
}

.theme-toggle:active .moon-icon {
  transform: rotate(-60deg) scale(0.8) !important;
}

/* ─── Smooth Page Transitions ─── */
.main {
  animation: fade-slide-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes fade-slide-in {
  from {
    opacity: 0 !important;
    transform: translateY(8px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ─── Health Score Detail Cards ─── */
.health-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.health-detail-card {
  background: var(--wow-chart-bg) !important;
  border-radius: var(--wow-radius-sm) !important;
  padding: 12px !important;
  transition: background 0.2s ease !important;
}

.health-detail-card:hover {
  background: var(--wow-accent-light) !important;
}

.health-detail-card .hd-label {
  font-size: 11px !important;
  color: var(--wow-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-weight: 600 !important;
}

.health-detail-card .hd-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wow-text) !important;
  margin-top: 2px !important;
}

.health-detail-card .hd-sub {
  font-size: 11px !important;
  color: var(--wow-text-secondary) !important;
  margin-top: 1px !important;
}

/* ─── Grade Color Variants ─── */
.grade-A { background: #34c759 !important; }
.grade-B { background: #007aff !important; }
.grade-C { background: #ff9500 !important; }
.grade-D { background: #ff9500 !important; }
.grade-F { background: #ff3b30 !important; }

/* ─── Scrollbar for panels ─── */
.fab-panel::-webkit-scrollbar,
.peptide-checklist::-webkit-scrollbar {
  width: 4px !important;
}

.fab-panel::-webkit-scrollbar-track,
.peptide-checklist::-webkit-scrollbar-track {
  background: transparent !important;
}

.fab-panel::-webkit-scrollbar-thumb,
.peptide-checklist::-webkit-scrollbar-thumb {
  background: var(--wow-border) !important;
  border-radius: 2px !important;
}

/* ─── FAB Backdrop ─── */
.fab-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 997 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.fab-backdrop.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ─── Status Badge ─── */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
}

.status-badge.online {
  background: rgba(52, 199, 89, 0.12) !important;
  color: var(--wow-green) !important;
}

.status-badge.offline {
  background: rgba(255, 59, 48, 0.12) !important;
  color: var(--wow-red) !important;
}

/* ─── Responsive adjustments ─── */
@media (max-width: 640px) {
  .fab-panel {
    width: calc(100% - 32px) !important;
    right: 16px !important;
    bottom: 84px !important;
  }
  .fab-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }
  .health-detail-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}