/* ================================================================
   Premium SaaS Overlay v2 — Deep Enhancement
   Modern Linear/Vercel/Notion-inspired polish
   Additive-only: zero edits to style.css or app.js
   Rollback: remove <link> from index.html
   ================================================================ */

/* ─── Section 0: Variables & Keyframes ─── */
:root {
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --gradient-primary: linear-gradient(135deg, #00a884, #008069);
  --gradient-primary-subtle: linear-gradient(135deg, rgba(0,168,132,0.10), rgba(0,128,105,0.04));
  --shadow-card-hover: 0 8px 24px rgba(0,128,105,0.13), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-premium: 0 4px 14px rgba(0,128,105,0.10), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-glow-teal: 0 0 20px rgba(0,168,132,0.15);
  --shadow-glow-sm: 0 0 10px rgba(0,168,132,0.1);
  --premium-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
  --gradient-primary: linear-gradient(135deg, #00a884, #005c4b);
  --gradient-primary-subtle: linear-gradient(135deg, rgba(0,168,132,0.06), rgba(0,128,105,0.03));
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  --shadow-premium: 0 4px 14px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15);
  --shadow-glow-teal: 0 0 20px rgba(0,168,132,0.08);
  --shadow-glow-sm: 0 0 10px rgba(0,168,132,0.06);
}

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}
@keyframes accentPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes skeletonShimmerTeal {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,168,132,0.2); }
  50%      { box-shadow: 0 0 0 4px rgba(0,168,132,0); }
}
@keyframes navAccentSlide {
  from { height: 0; }
  to   { height: 60%; }
}

/* ─── Section 1: Custom Scrollbars ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,128,105,0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,128,105,0.35);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,128,105,0.2) transparent;
}
[data-theme="dark"] * {
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* ─── Section 2: Stat Cards (PRIORITY) ─── */
.stat-card {
  position: relative;
  overflow: hidden;
  animation: cardFadeUp 0.45s var(--spring) both;
}
.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 70ms; }
.stat-card:nth-child(3) { animation-delay: 140ms; }
.stat-card:nth-child(4) { animation-delay: 210ms; }
.stat-card:nth-child(5) { animation-delay: 280ms; }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.stat-card:hover::before { opacity: 1; }

/* Per-color accent bars */
.stat-card.blue::before   { background: linear-gradient(90deg, #027eb5, #53bdeb); }
.stat-card.green::before  { background: linear-gradient(90deg, #008069, #00a884); }
.stat-card.purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.stat-card.cyan::before   { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.stat-card.orange::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.stat-card.red::before    { background: linear-gradient(90deg, #dc2626, #f87171); }
.stat-card.yellow::before { background: linear-gradient(90deg, #ca8a04, #facc15); }
.stat-card.teal::before   { background: linear-gradient(90deg, #008069, #2dd4bf); }

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Gradient icon backgrounds */
.stat-card.blue .stat-icon   { background: linear-gradient(135deg, rgba(2,126,181,0.15), rgba(83,189,235,0.08)); }
.stat-card.green .stat-icon  { background: linear-gradient(135deg, rgba(0,168,132,0.15), rgba(0,168,132,0.05)); }
.stat-card.purple .stat-icon { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(167,139,250,0.06)); }
.stat-card.cyan .stat-icon   { background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(34,211,238,0.06)); }
.stat-card.orange .stat-icon { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.06)); }
.stat-card.red .stat-icon    { background: linear-gradient(135deg, rgba(234,0,56,0.15), rgba(248,113,113,0.06)); }
.stat-card.yellow .stat-icon { background: linear-gradient(135deg, rgba(226,185,59,0.15), rgba(250,204,21,0.06)); }
.stat-card.teal .stat-icon   { background: linear-gradient(135deg, rgba(0,128,105,0.15), rgba(45,212,191,0.06)); }

/* Stat value number transition */
.stat-card .stat-value {
  transition: color 0.3s ease;
}
.stat-card:hover .stat-value {
  color: var(--wa-teal-accent);
}

/* ─── Section 3: General Cards ─── */
.card {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-premium);
  border-color: rgba(0,168,132,0.15);
}
.card h3 {
  position: relative;
}
.card h3::after {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 20%;
  width: 3px;
  height: 60%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: height 0.25s var(--spring), top 0.25s var(--spring);
}
.card:hover h3::after {
  height: 80%;
  top: 10%;
}

/* ─── Section 4: Event Cards ─── */
.event-card {
  position: relative;
  overflow: hidden;
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.event-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 3px; height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.event-card:hover::after {
  opacity: 1;
  animation: accentPulse 2s ease-in-out infinite;
}

/* Event progress bar enhancement */
.event-progress .progress-bar,
.event-progress {
  border-radius: 99px;
}
.event-progress .progress-bar > span,
.ep-read, .ep-delivered, .ep-sent {
  transition: width 0.6s var(--spring);
}

/* Status badges micro-enhancement */
.status-badge {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.status-badge:hover {
  transform: scale(1.05);
}

/* Event stat badges */
.event-stat-badge {
  transition: transform 0.15s ease;
}
.event-stat-badge:hover {
  transform: translateY(-1px);
}

/* ─── Section 5: Tables ─── */
table tbody tr:nth-child(even) {
  background: rgba(0,168,132,0.02);
}
[data-theme="dark"] table tbody tr:nth-child(even) {
  background: rgba(0,168,132,0.015);
}
table tbody tr {
  position: relative;
  transition: background 0.15s ease;
}
table tbody tr::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.2s ease;
}
table tbody tr:hover::before {
  opacity: 1;
}
/* Table header enhancement */
table thead th {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ─── Section 6: Buttons ─── */
.btn-primary {
  background: var(--gradient-primary);
  border-color: transparent;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #008069, #005c4b);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0,128,105,0.3);
}
.btn:active {
  transform: scale(0.96);
}
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  width: 20px; height: 20px;
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}
/* Outline button hover enhancement */
.btn-outline:hover {
  box-shadow: var(--shadow-glow-sm);
}
/* Danger button glow */
.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(234,0,56,0.25);
}

/* ─── Section 7: Sidebar Navigation ─── */
.sidebar {
  transition: width 0.3s var(--spring), transform 0.3s var(--spring);
}
.sidebar-header {
  position: relative;
  overflow: hidden;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}
.sidebar-logo {
  transition: transform 0.3s var(--spring);
}
.sidebar-logo:hover {
  transform: rotate(-8deg) scale(1.05);
}
/* Nav item hover: subtle left border + glow */
.nav-item {
  transition: background var(--transition-fast), box-shadow 0.2s ease, padding 0.2s ease;
}
.nav-item:hover {
  box-shadow: inset 0 0 0 1px rgba(0,168,132,0.06);
}
.nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(0,168,132,0.08);
}
.nav-item.active::before {
  animation: navAccentSlide 0.3s var(--spring);
}
/* Nav item icon transition */
.nav-item i {
  transition: color var(--transition-fast), transform 0.2s ease;
}
.nav-item:hover i {
  transform: scale(1.08);
}
/* Nav badge pulse for unread */
.nav-badge {
  animation: subtlePulse 2s ease-in-out infinite;
}
/* Sidebar footer subtle gradient top border */
.sidebar-footer {
  position: relative;
}
.sidebar-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
/* User avatar hover */
.sidebar-user .user-avatar {
  transition: background 0.2s ease, transform 0.2s ease;
}
.sidebar-user:hover .user-avatar {
  background: rgba(0,168,132,0.1);
  transform: scale(1.05);
}
/* Logout button hover */
#logoutBtn {
  transition: background 0.2s ease, transform 0.15s ease;
}
#logoutBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(234,0,56,0.15);
}

/* ─── Section 8: Page Header (wa-header) ─── */
.wa-header {
  position: relative;
  overflow: hidden;
}
.wa-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,168,132,0.3), rgba(0,168,132,0.6), rgba(0,168,132,0.3));
}
.wa-header h1 {
  letter-spacing: -0.01em;
}

/* ─── Section 9: Modals ─── */
@supports (backdrop-filter: blur(8px)) {
  .modal {
    background: rgba(11,20,26,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  [data-theme="dark"] .modal {
    background: rgba(0,0,0,0.5);
  }
}
.modal-content {
  animation: modalEnter 0.3s var(--spring);
}
/* Modal header gradient overlay */
.modal-header {
  position: relative;
  overflow: hidden;
}
.modal-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
/* Modal close button hover */
.modal-close {
  transition: background 0.2s ease, transform 0.15s ease;
}
.modal-close:hover {
  transform: rotate(90deg) scale(1.1);
}
/* Form inputs inside modals */
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  box-shadow: 0 0 0 3px rgba(0,168,132,0.15);
  border-color: var(--wa-teal-accent);
}
/* Drop zone enhancement */
.drop-zone {
  transition: border-color var(--transition), background var(--transition), transform 0.2s ease;
}
.drop-zone:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-sm);
}
.drop-zone.dragover {
  transform: scale(1.01);
  box-shadow: var(--shadow-glow-teal);
}
/* Confirm dialog enhancement */
.confirm-dialog {
  animation: modalEnter 0.25s var(--spring);
}
@supports (backdrop-filter: blur(8px)) {
  .confirm-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ─── Section 10: Login ─── */
.login-screen {
  background: linear-gradient(-45deg, #00a884, #008069, #005c4b, #027eb5);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}
[data-theme="dark"] .login-screen {
  background: linear-gradient(-45deg, #0b141a, #111b21, #005c4b, #1f2c34);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}
.login-screen::after {
  content: '';
  position: absolute;
  bottom: 15%; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,132,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@supports (backdrop-filter: blur(12px)) {
  .login-card {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }
  [data-theme="dark"] .login-card {
    background: rgba(31,44,52,0.75);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
}
.login-card {
  position: relative;
  z-index: 1;
}
/* Login logo enhancement */
.login-logo {
  transition: transform 0.3s var(--spring);
}
.login-logo:hover {
  transform: scale(1.1) rotate(-5deg);
}
.login-btn {
  background: var(--gradient-primary);
  border: none;
  transition: box-shadow 0.25s ease, transform 0.15s ease;
}
.login-btn:hover {
  background: var(--gradient-primary);
  box-shadow: 0 4px 16px rgba(0,128,105,0.35);
}
/* Login input focus */
.login-card input:focus {
  box-shadow: 0 0 0 3px rgba(0,168,132,0.15);
  border-color: var(--wa-teal-accent);
}

/* ─── Section 11: Toast Notifications ─── */
.toast.show {
  animation: toastSlideIn 0.3s var(--spring);
}
.toast {
  box-shadow: var(--shadow-lg), var(--shadow-glow-sm);
}
.toast.success {
  box-shadow: var(--shadow-lg), 0 0 12px rgba(0,168,132,0.12);
}
.toast.error {
  box-shadow: var(--shadow-lg), 0 0 12px rgba(234,0,56,0.1);
}
.toast.warning {
  box-shadow: var(--shadow-lg), 0 0 12px rgba(245,158,11,0.1);
}

/* ─── Section 12: Tabs (Group & AI) ─── */
.group-tab, .ai-tab {
  transition: all var(--transition), transform 0.15s ease;
}
.group-tab:hover, .ai-tab:hover {
  transform: translateY(-1px);
}
.group-tab.active, .ai-tab.active {
  box-shadow: 0 2px 8px rgba(0,168,132,0.25);
}
/* AI tool tabs */
.ai-tool-tab {
  transition: all var(--transition), transform 0.15s ease;
}
.ai-tool-tab:hover {
  transform: translateY(-1px);
}

/* ─── Section 13: Search Box ─── */
.search-box input {
  transition: background var(--transition), box-shadow 0.2s ease, border-color 0.2s ease;
}
.search-box input:focus {
  box-shadow: 0 0 0 3px rgba(0,168,132,0.1);
  border-color: var(--wa-teal-accent);
  background: var(--surface);
}
.search-clear {
  transition: color 0.15s ease, transform 0.15s ease;
}
.search-clear:hover {
  color: var(--red);
  transform: translateY(-50%) scale(1.15);
}
/* Inbox search enhancement */
.inbox-search input:focus {
  box-shadow: 0 0 0 2px rgba(0,168,132,0.1);
}

/* ─── Section 14: Conversation List ─── */
.conv-item {
  transition: background var(--transition-fast), transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.conv-item:hover {
  transform: translateX(-2px);
}
.conv-item.active {
  box-shadow: inset 3px 0 0 var(--wa-teal-accent);
}
.conv-item.unread .conv-avatar {
  box-shadow: 0 0 0 2px var(--wa-teal-accent);
}
/* Conversation avatar gradient */
.conv-avatar {
  transition: transform 0.2s ease;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg));
}
.conv-item:hover .conv-avatar {
  transform: scale(1.05);
}
/* Unread badge glow */
.inbox-unread {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* ─── Section 15: Chat Bubbles ─── */
.chat-msg-bubble {
  transition: box-shadow 0.15s ease;
}
.chat-msg:hover .chat-msg-bubble {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.chat-msg.outbound .chat-msg-bubble {
  box-shadow: 0 1px 2px rgba(0,92,75,0.08);
}
/* Read ticks color enhancement */
.chat-msg-ticks.read {
  text-shadow: 0 0 4px rgba(83,189,235,0.3);
}
/* Chat reply area */
.chat-reply-area textarea:focus {
  box-shadow: 0 0 0 2px rgba(0,168,132,0.12);
  border-color: var(--wa-teal-accent);
}

/* ─── Section 16: AI Chat Interface ─── */
.ai-chat-bubble {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ai-chat-bubble.user {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.ai-chat-bubble.assistant {
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ai-chat-bubble.assistant:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* AI bubble actions fade-in */
.ai-bubble-actions {
  transition: opacity 0.2s ease;
}
.ai-bubble-action {
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.ai-bubble-action:hover {
  transform: scale(1.05);
}
/* AI streaming cursor enhancement */
.ai-stream-cursor {
  opacity: 1;
}
/* AI chat suggestions */
.ai-chat-suggestion {
  transition: all var(--transition), transform 0.15s ease;
}
.ai-chat-suggestion:hover {
  box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
/* AI chat welcome icon */
.ai-chat-welcome-icon {
  transition: transform 0.3s var(--spring);
}
.ai-chat-welcome:hover .ai-chat-welcome-icon {
  transform: scale(1.1) rotate(-5deg);
}
/* AI chat send button */
.ai-chat-send {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-chat-send:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

/* ─── Section 17: AI Provider Cards ─── */
.ai-provider-card {
  transition: all 0.2s ease, transform 0.15s ease;
}
.ai-provider-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
}
.ai-provider-card.active {
  box-shadow: 0 0 0 1px rgba(0,168,132,0.15), var(--shadow-premium);
}
/* Provider indicator online glow */
.ai-provider-indicator.online {
  animation: subtlePulse 2s ease-in-out infinite;
}
/* AI quick action buttons */
.ai-quick-btn {
  transition: all var(--transition), transform 0.15s ease;
}
.ai-quick-btn:hover {
  box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
/* AI card icon gradient */
.ai-card-icon.gen { background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(168,85,247,0.05)); }
.ai-card-icon.opt { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05)); }
.ai-card-icon.ana { background: linear-gradient(135deg, rgba(234,179,8,0.15), rgba(234,179,8,0.05)); }
.ai-card-icon.var { background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(236,72,153,0.05)); }
.ai-card-icon.trans { background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(6,182,212,0.05)); }
.ai-card-icon.parse { background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05)); }
.ai-card-icon.reply { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(249,115,22,0.05)); }
.ai-card-icon.chat { background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(99,102,241,0.05)); }
/* AI submit button */
.btn-ai-submit {
  transition: all 0.2s ease, transform 0.15s ease;
}
.btn-ai-submit:hover {
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

/* ─── Section 18: Analytics Components ─── */
/* Analytics metric cards */
.ana-metric {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: cardFadeUp 0.4s var(--spring) both;
}
.ana-metric:nth-child(1) { animation-delay: 0ms; }
.ana-metric:nth-child(2) { animation-delay: 60ms; }
.ana-metric:nth-child(3) { animation-delay: 120ms; }
.ana-metric:nth-child(4) { animation-delay: 180ms; }
.ana-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
  border-color: rgba(0,168,132,0.15);
}
/* Analytics metric icon gradient */
.ana-metric.green .ana-metric-icon { background: linear-gradient(135deg, rgba(0,168,132,0.15), rgba(0,168,132,0.05)); }
.ana-metric.blue .ana-metric-icon  { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05)); }
.ana-metric.cyan .ana-metric-icon  { background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(6,182,212,0.05)); }
.ana-metric.purple .ana-metric-icon { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.05)); }
.ana-metric.orange .ana-metric-icon { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); }

/* Funnel step hover */
.ana-funnel-step {
  transition: transform 0.2s ease, background 0.15s ease;
  padding: 8px 4px;
  border-radius: 6px;
}
.ana-funnel-step:hover {
  background: rgba(0,168,132,0.03);
}
/* Funnel bar glow */
.ana-funnel-bar {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* Heatmap cell hover */
.ana-heat-cell {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.ana-heat-cell:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1;
  position: relative;
}
.ana-heat-cell.best {
  animation: subtlePulse 2s ease-in-out infinite;
}

/* Health progress bar */
.ana-health-progress-fill {
  border-radius: 3px;
  box-shadow: 0 0 4px rgba(0,168,132,0.2);
}

/* Donut chart enhancement */
.ana-donut {
  transition: transform 0.3s var(--spring);
}
.ana-donut:hover {
  transform: scale(1.05);
}
.ana-donut-val {
  transition: color 0.2s ease;
}

/* Trend badges */
.ana-trend-badge {
  transition: transform 0.15s ease;
}
.ana-trend-badge:hover {
  transform: scale(1.05);
}

/* Weekly grid items */
.ana-weekly-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ana-weekly-item:hover {
  transform: translateY(-1px);
}

/* Mini chart bars */
.ana-mini-bar {
  transition: transform 0.15s ease;
}
.ana-mini-bar:hover {
  transform: scaleY(1.05);
}

/* ─── Section 19: Badges Enhancement ─── */
.badge {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.badge:hover {
  transform: scale(1.04);
}
/* Contact type badges micro-glow */
.badge-contact-type {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.badge-vip:hover { box-shadow: 0 0 8px rgba(245,158,11,0.2); }
.badge-speaker:hover { box-shadow: 0 0 8px rgba(139,92,246,0.2); }
.badge-sponsor:hover { box-shadow: 0 0 8px rgba(59,130,246,0.2); }
.badge-media:hover { box-shadow: 0 0 8px rgba(236,72,153,0.2); }
.badge-staff:hover { box-shadow: 0 0 8px rgba(0,168,132,0.2); }

/* ─── Section 20: Toggle Switch ─── */
.toggle-switch {
  transition: opacity 0.2s ease;
}
.toggle-slider {
  transition: background var(--transition), box-shadow 0.2s ease;
}
.toggle-switch input:checked + .toggle-slider {
  box-shadow: 0 0 8px rgba(0,168,132,0.3);
}
.toggle-slider::before {
  transition: transform var(--transition), box-shadow 0.2s ease;
}
.toggle-switch:hover .toggle-slider::before {
  box-shadow: var(--shadow), 0 0 6px rgba(0,0,0,0.08);
}

/* ─── Section 21: Connection Status & Banners ─── */
.connection-status {
  transition: transform var(--transition-slow), box-shadow 0.3s ease;
}
.connection-status.show.online {
  box-shadow: 0 2px 8px rgba(0,168,132,0.25);
}
.connection-status.show.offline {
  box-shadow: 0 2px 8px rgba(234,0,56,0.25);
}
/* Expiry banner subtle enhancement */
.expiry-banner {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ─── Section 22: Contact Detail Panel ─── */
.contact-detail-avatar {
  background: var(--gradient-primary);
  box-shadow: 0 2px 8px rgba(0,128,105,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-detail-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,128,105,0.3);
}
.contact-detail-section h4 {
  position: relative;
  padding-right: 10px;
}
/* Timeline item hover */
.contact-detail-section .timeline-item {
  transition: background 0.15s ease;
  padding: 6px 4px;
  border-radius: 4px;
}
.contact-detail-section .timeline-item:hover {
  background: rgba(0,168,132,0.03);
}

/* ─── Section 23: Onboarding Overlay ─── */
.onboarding-card {
  animation: modalEnter 0.4s var(--spring);
}
.onboarding-step {
  transition: background var(--transition), transform 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-step:hover {
  transform: translateX(-3px);
  box-shadow: var(--shadow);
}
.onboarding-step-num {
  background: var(--gradient-primary);
  box-shadow: 0 2px 6px rgba(0,168,132,0.25);
  transition: transform 0.2s ease;
}
.onboarding-step:hover .onboarding-step-num {
  transform: scale(1.1);
}

/* ─── Section 24: Session Lock & Force Password ─── */
.session-lock-card {
  animation: modalEnter 0.3s var(--spring);
}
.session-lock-card .lock-icon {
  transition: transform 0.3s var(--spring);
}
.session-lock-card:hover .lock-icon {
  transform: scale(1.1);
}
.force-pw-card {
  animation: modalEnter 0.3s var(--spring);
}

/* ─── Section 25: Quality/Intelligence ─── */
.quality-metric {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quality-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-premium);
}
.quality-metric .q-value {
  transition: color 0.2s ease;
}

/* ─── Section 26: Spinner Enhancement ─── */
.spinner {
  border-top-color: var(--wa-teal-accent);
  border-right-color: rgba(0,168,132,0.3);
}
.spinner-sm {
  border-top-color: var(--wa-teal);
  border-right-color: rgba(0,128,105,0.3);
}

/* ─── Section 27: Form Inputs Global ─── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(0,168,132,0.12);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
input[type="checkbox"] {
  accent-color: var(--wa-teal-accent);
}
/* Form labels subtle uppercase */
.form-group label {
  letter-spacing: 0.01em;
}

/* ─── Section 28: Pagination ─── */
.pagination button {
  transition: all var(--transition), transform 0.15s ease;
}
.pagination button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-sm);
}
.pagination button.active {
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,168,132,0.25);
}

/* ─── Section 29: Empty States ─── */
.empty-state {
  border: 1px dashed var(--border);
  background: var(--gradient-primary-subtle);
  transition: border-color 0.2s ease;
}
.empty-state:hover {
  border-color: rgba(0,168,132,0.3);
}
.empty-state i {
  transition: transform 0.3s var(--spring);
}
.empty-state:hover i {
  transform: scale(1.15);
}
.empty-state-card {
  transition: box-shadow 0.2s ease;
}
.empty-state-card:hover {
  box-shadow: var(--shadow);
}

/* ─── Section 30: Skeleton Shimmer ─── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg) 25%,
    rgba(0,168,132,0.08) 50%,
    var(--bg) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmerTeal 1.5s ease-in-out infinite;
}

/* ─── Section 31: Daily Chart ─── */
.chart-bar {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.chart-bar:hover {
  background: var(--gradient-primary) !important;
  box-shadow: 0 -2px 8px rgba(0,168,132,0.2);
}
.chart-bar-fill {
  transition: height 0.5s var(--spring);
}

/* ─── Section 32: Meta Diagnostics ─── */
.meta-diag-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.meta-diag-item:hover {
  transform: translateY(-1px);
}

/* ─── Section 33: Settings Cards ─── */
.settings-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.settings-card:hover {
  border-color: rgba(0,168,132,0.1);
  box-shadow: var(--shadow-premium);
}

/* ─── Section 34: Page Transitions ─── */
.page.active {
  animation: fadeSlideUp 0.25s var(--spring);
}

/* ─── Section 35: Mobile Hamburger ─── */
.mobile-hamburger {
  transition: background 0.2s ease, transform 0.15s ease;
}
.mobile-hamburger:hover {
  transform: scale(1.05);
}
.mobile-hamburger:active {
  transform: scale(0.95);
}
/* Sidebar overlay fade */
.sidebar-overlay.active {
  animation: fadeIn 0.2s ease;
}

/* ─── Section 36: Body & Global ─── */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Selection color */
::selection {
  background: rgba(0,168,132,0.2);
  color: inherit;
}
[data-theme="dark"] ::selection {
  background: rgba(0,168,132,0.3);
}

/* Focus visible outline for accessibility */
:focus-visible {
  outline: 2px solid var(--wa-teal-accent);
  outline-offset: 2px;
}

/* ─── Section 37: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .login-screen {
    background-size: 100% 100%;
    animation: none !important;
  }
}

/* ─── Section 38: Touch Devices ─── */
@media (hover: none) and (pointer: coarse) {
  .stat-card:hover,
  .card:hover,
  .event-card:hover,
  .ana-metric:hover,
  .pagination button:hover,
  .conv-item:hover,
  .ai-provider-card:hover,
  .quality-metric:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
  .stat-card:hover::before,
  .event-card:hover::after,
  table tbody tr:hover::before {
    opacity: 0;
  }
  .card:hover {
    border-color: var(--border);
  }
  .card:hover h3::after {
    height: 60%;
    top: 20%;
  }
  .nav-item:hover i {
    transform: none;
  }
  .conv-item:hover {
    transform: none;
  }
  .conv-item:hover .conv-avatar {
    transform: none;
  }
  .ana-heat-cell:hover {
    transform: none;
  }
}