/* ═══════════════════════════════════════════════════════════════
   VibeCheck — Tailwind Custom Enhancements
   ═══════════════════════════════════════════════════════════════ */

body {
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
}

.glass-nav {
  background: rgba(254, 248, 243, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.floating-blob {
  background: radial-gradient(circle at center, #4c6647 0%, #cdebc4 100%);
  filter: blur(40px);
  opacity: 0.4;
  border-radius: 50%;
}

.hero-gradient {
  background: radial-gradient(circle at top right, #cdebc4 0%, transparent 70%);
}

.vibe-gradient {
  background: radial-gradient(circle at top left, #4c6647, #cdebc4);
}

.custom-shadow, .shadow-ambient, .editorial-shadow {
  box-shadow: 0 4px 24px rgba(52, 50, 45, 0.06);
}

.stat-card-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(2deg) translateY(-2px);
  box-shadow: 0 8px 32px rgba(52, 50, 45, 0.12);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.stat-card-tilt {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Custom Scrollbar for dashboard/history */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #dfd9d1;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #b6b1aa;
}

/* Base structural fixes for Chart.js container */
.chart-wrapper {
  position: relative;
  height: 280px;
  width: 100%;
}

/* Spinner */
.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #ede7e0;
  border-top-color: #4c6647;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Hidden table row for filtering */
.hidden-row {
  display: none !important;
}

/* Ensure empty state formatting */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}