@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-primary: #07090e;
  --bg-secondary: #0d121f;
  --card-bg: rgba(15, 23, 42, 0.75);
  --card-border: rgba(255, 255, 255, 0.08);
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-pink: #ec4899;
  --accent-emerald: #10b981;
}

* {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
  background-color: var(--bg-primary);
  color: #f1f5f9;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Glassmorphism effects */
.glass-panel {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
}

.glass-panel-hover {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -10px rgba(139, 92, 246, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* Neon & Gradients */
.gradient-text-purple {
  background: linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #3b82f6 100%);
  box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.4);
  transition: all 0.2s ease;
}

.gradient-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px -2px rgba(99, 102, 241, 0.6);
}

.gradient-btn:active {
  transform: translateY(0);
}

/* Ambient glow blobs */
.glow-blob-1 {
  position: fixed;
  top: -10%;
  left: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

.glow-blob-2 {
  position: fixed;
  bottom: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

/* Animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.03); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s infinite ease-in-out;
}

/* Switch styling */
.toggle-checkbox:checked {
  right: 0;
  border-color: #8b5cf6;
}
.toggle-checkbox:checked + .toggle-label {
  background-color: #8b5cf6;
}

/* ======================================================== */
/* MOBILE NATIVE POLISH (Emil Kowalski Philosophy)          */
/* ======================================================== */

/* 1. Kill gray/blue tap highlight flash globally on iOS/Android */
html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

/* 2. Prevent overscroll rubber-banding hijacking on root */
html, body {
  overscroll-behavior-y: none;
}

/* 3. Inputs at least 16px on mobile to prevent iOS Safari auto-zoom */
@media (max-width: 640px) {
  input, 
  select, 
  textarea {
    font-size: 16px !important;
  }
}

/* 4. Instant touch response & remove 300ms tap delay */
button, 
a, 
[role="button"], 
.tab-btn, 
.client-filter-btn, 
.quick-date-btn, 
.direct-preset-btn,
.mobile-nav-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 5. Physical press feedback (100ms scale feedback) */
button:active, 
a:active, 
.tab-btn:active, 
.direct-preset-btn:active,
.mobile-nav-btn:active {
  transform: scale(0.96);
  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
}

/* 6. Safe Area Insets Helpers */
.safe-top {
  padding-top: max(1rem, env(safe-area-inset-top));
}
.safe-bottom {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* 7. Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 8. Mobile Bottom Sheet Drawer animation */
@media (max-width: 640px) {
  .mobile-sheet {
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 90dvh !important;
    animation: slideUpMobile 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes slideUpMobile {
  from {
    transform: translateY(100%);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}