@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque.woff2?v=1') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

/* Ensure font is loaded */
body {
  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar styles for location dropdowns */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

@layer base {
  html, body {
    font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    @apply overflow-x-hidden;
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
    touch-action: pan-y pinch-zoom;
    overflow-x: hidden !important;
  }
  #root {
    font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    @apply overflow-x-hidden;
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translate(-50%, -50%);
  }
  to {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(250, 204, 21, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
  }
  100% {
    box-shadow: 0 0 5px rgba(250, 204, 21, 0.2);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.animate-fade-scale {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-fade-up {
  animation: fadeUp 0.3s ease-out forwards;
}

.animate-ping {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse-scale {
  animation: pulse 0.5s ease-in-out;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 2s ease-in-out infinite;
}

/* Add base styles for analytics components */
.analytics-card {
  @apply bg-white rounded-lg shadow-sm p-6;
}

.analytics-title {
  @apply text-lg font-medium text-gray-900 mb-6;
}

.analytics-stat {
  @apply text-3xl font-bold text-gray-900;
}

.analytics-label {
  @apply text-sm font-medium text-gray-600;
}

.analytics-icon {
  @apply p-3 bg-yellow-100 rounded-lg;
}

.analytics-icon svg {
  @apply h-6 w-6 text-yellow-600;
}

/* Glassmorphism styles */
.glass-card {
  @apply relative overflow-hidden;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.glass-card::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-br from-white/40 to-transparent rounded-lg;
  pointer-events: none;
}

.glass-card::after {
  content: '';
  @apply absolute inset-0 bg-white/5 rounded-lg;
  pointer-events: none;
}

/* Active Users Card Styles */
.active-users-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.active-users-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-emerald-400/20 to-emerald-500/20 backdrop-blur-sm;
}

.active-users-label {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.active-users-value {
  @apply text-4xl font-bold text-gray-900 mt-1 transition-all duration-300;
}

.active-users-trend {
  @apply flex items-center mt-2 text-sm;
}

.active-users-status {
  @apply flex items-center mt-4 text-sm text-gray-600;
}

.active-users-pulse {
  @apply relative flex h-3 w-3;
}

.active-users-pulse::before {
  content: '';
  @apply absolute inset-0 rounded-full bg-emerald-500 animate-breathe;
}

.active-users-pulse::after {
  content: '';
  @apply absolute inset-0 rounded-full bg-emerald-500 animate-ping;
}

/* Popular pages card specific styles */
.popular-pages-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.popular-pages-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-indigo-400/20 to-indigo-500/20 backdrop-blur-sm;
}

.popular-pages-title {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.popular-pages-list {
  @apply mt-4 space-y-3;
}

.popular-page-item {
  @apply flex items-center justify-between p-3 rounded-lg transition-all duration-200 hover:bg-gray-50;
}

.popular-page-item.new {
  @apply animate-glow;
}

.popular-page-link {
  @apply flex items-center space-x-3 flex-1;
}

.popular-page-icon {
  @apply p-2 rounded-lg bg-indigo-100 text-indigo-600;
}

.popular-page-path {
  @apply font-medium text-gray-900 truncate max-w-[200px];
}

.popular-page-visits {
  @apply text-sm font-medium text-gray-500;
}

.popular-page-percentage {
  @apply text-xs text-gray-400;
}

/* Live indicator styles */
.live-indicator {
  @apply flex items-center space-x-2 bg-white/30 backdrop-blur-sm px-3 py-1.5 rounded-full border border-gray-200 shadow-sm;
}

.live-dot {
  @apply relative w-2 h-2;
}

.live-dot::before {
  content: '';
  @apply absolute inset-0 w-2 h-2 rounded-full bg-emerald-500;
}

.live-dot::after {
  content: '';
  @apply absolute inset-0 w-2 h-2 rounded-full bg-emerald-500 animate-ping;
}

.live-text {
  @apply text-sm font-medium text-gray-600;
}

.live-divider {
  @apply w-px h-4 bg-gray-200;
}

.live-timestamp {
  @apply text-sm text-gray-500 font-light;
}

/* Total visits card specific styles */
.total-visits-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.total-visits-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-yellow-400/20 to-yellow-500/20 backdrop-blur-sm;
}

.total-visits-label {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.total-visits-value {
  @apply text-4xl font-bold text-gray-900 mt-1 transition-all duration-300;
}

.total-visits-trend {
  @apply flex items-center mt-2 text-sm;
}

.total-visits-trend-up {
  @apply text-green-600;
}

.total-visits-trend-down {
  @apply text-red-600;
}

/* Unique visitors card specific styles */
.unique-visitors-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.unique-visitors-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-blue-400/20 to-blue-500/20 backdrop-blur-sm;
}

.unique-visitors-label {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.unique-visitors-value {
  @apply text-4xl font-bold text-gray-900 mt-1 transition-all duration-300;
}

.unique-visitors-trend {
  @apply flex items-center mt-2 text-sm;
}

.unique-visitors-trend-up {
  @apply text-green-600;
}

.unique-visitors-trend-down {
  @apply text-red-600;
}

/* Time on site card specific styles */
.time-on-site-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.time-on-site-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-purple-400/20 to-purple-500/20 backdrop-blur-sm;
}

.time-on-site-label {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.time-on-site-value {
  @apply text-4xl font-bold text-gray-900 mt-1 transition-all duration-300;
}

.time-on-site-trend {
  @apply flex items-center mt-2 text-sm;
}

.time-on-site-trend-up {
  @apply text-green-600;
}

.time-on-site-trend-down {
  @apply text-red-600;
}

@keyframes fadeNumber {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-number {
  animation: fadeNumber 0.5s ease-out forwards;
}

/* Device Usage Chart Styles */
.device-usage-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.device-usage-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-blue-400/20 to-blue-500/20 backdrop-blur-sm;
}

.device-usage-title {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.device-usage-chart {
  @apply mt-4 relative;
}

.device-usage-legend {
  @apply mt-6 space-y-3;
}

.device-usage-legend-item {
  @apply flex items-center space-x-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50;
}

.device-usage-legend-color {
  @apply w-4 h-4 rounded transition-transform duration-200;
}

.device-usage-legend-item:hover .device-usage-legend-color {
  @apply transform scale-110;
}

.device-usage-legend-text {
  @apply flex-1;
}

.device-usage-legend-label {
  @apply font-medium text-gray-900;
}

.device-usage-legend-value {
  @apply text-sm text-gray-500;
}

/* Custom chart tooltip */
.device-usage-tooltip {
  @apply bg-white/90 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg p-3;
}

/* 3D effect for pie chart */
.recharts-pie-sector {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.recharts-pie-sector:hover {
  transform: scale(1.03) translateY(-2px);
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.15));
}

/* Traffic Sources Chart Styles */
.traffic-sources-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.traffic-sources-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-purple-400/20 to-purple-500/20 backdrop-blur-sm;
}

.traffic-sources-title {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.traffic-sources-chart {
  @apply mt-4 relative;
}

.traffic-sources-legend {
  @apply mt-6 space-y-3;
}

.traffic-sources-legend-item {
  @apply flex items-center space-x-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50;
}

.traffic-sources-legend-color {
  @apply w-4 h-4 rounded transition-transform duration-200;
}

.traffic-sources-legend-item:hover .traffic-sources-legend-color {
  @apply transform scale-110;
}

.traffic-sources-legend-text {
  @apply flex-1;
}

.traffic-sources-legend-label {
  @apply font-medium text-gray-900;
}

.traffic-sources-legend-value {
  @apply text-sm text-gray-500;
}

/* Custom chart tooltip */
.traffic-sources-tooltip {
  @apply bg-white/90 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg p-3;
}

/* 3D effect for pie chart */
.recharts-pie-sector {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.recharts-pie-sector:hover {
  transform: scale(1.03) translateY(-2px);
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.15));
}

/* Browser Usage Chart Styles */
.browser-usage-card {
  @apply relative p-6 rounded-xl glass-card transition-all duration-300 hover:shadow-lg;
}

.browser-usage-icon {
  @apply absolute top-4 right-4 p-3 rounded-full bg-gradient-to-br from-blue-400/20 to-blue-500/20 backdrop-blur-sm;
}

.browser-usage-title {
  @apply text-sm font-medium text-gray-500 uppercase tracking-wide;
}

.browser-usage-chart {
  @apply mt-4 relative;
}

.browser-usage-legend {
  @apply mt-6 space-y-3;
}

.browser-usage-legend-item {
  @apply flex items-center space-x-3 p-2 rounded-lg transition-all duration-200 hover:bg-gray-50;
}

.browser-usage-legend-color {
  @apply w-4 h-4 rounded transition-transform duration-200;
}

.browser-usage-legend-item:hover .browser-usage-legend-color {
  @apply transform scale-110;
}

.browser-usage-legend-text {
  @apply flex-1;
}

.browser-usage-legend-label {
  @apply font-medium text-gray-900;
}

.browser-usage-legend-value {
  @apply text-sm text-gray-500;
}

/* Custom chart tooltip */
.browser-usage-tooltip {
  @apply bg-white/90 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg p-3;
}

/* 3D effect for pie chart */
.recharts-pie-sector {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.recharts-pie-sector:hover {
  transform: scale(1.03) translateY(-2px);
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.15));
}

/* Calendar and Date Picker Z-Index Fix */
.react-datepicker-wrapper,
.react-datepicker__portal,
.react-datepicker-popper,
.react-datepicker {
  z-index: 9999 !important;
}

.react-datepicker__portal {
  z-index: 9999 !important;
  position: fixed !important;
}

/* Location dropdown fix */
.location-dropdown .absolute {
  z-index: 9999 !important;
}

/* DateTimePicker container */
.date-time-picker-container {
  position: relative;
  z-index: 999;
}

.date-time-picker-container .react-datepicker {
  z-index: 9999 !important;
}

/* Mobile Calendar Fixes */
@media (max-width: 768px) {
  .calendar-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    width: 90vw !important;
    max-width: 340px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  
  .calendar-header h2 {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  
  .calendar-day-names {
    color: #4b5563 !important;
    font-weight: 500 !important;
  }
  
  .calendar-grid {
    gap: 0.25rem !important;
  }
  
  .calendar-day-button {
    min-height: 2rem !important;
    min-width: 2rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }
  
  /* Mobile TimePicker Fixes */
  .timepicker-container {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    width: 90vw !important;
    max-width: 340px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  
  .timepicker-header h3 {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  
  .timepicker-grid {
    gap: 0.5rem !important;
  }
  
  .timepicker-button {
    min-height: 2.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.5rem !important;
  }
  
  /* Mobile SearchResults expanded details fixes */
  .search-details-mobile h4 {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
  
  .search-details-mobile h5 {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }
  
  .search-details-mobile .text-sm:not(.text-green-600):not(.text-green-700):not(.text-green-500) {
    color: #374151 !important;
  }
  
  .search-details-mobile .text-gray-600 {
    color: #4b5563 !important;
  }
  
  /* Keep green styling for included/protection elements */
  .search-details-mobile .text-green-600 {
    color: #059669 !important;
  }
  
  .search-details-mobile .text-green-700 {
    color: #047857 !important;
  }
  
  .search-details-mobile .text-green-500 {
    color: #10b981 !important;
  }
  
  /* Mobile Modal Fixes */
  .modal-content h2 {
    color: #111827 !important;
    font-weight: 700 !important;
  }
  
  .modal-content h3 {
    color: #111827 !important;
    font-weight: 600 !important;
  }
  
  .modal-content .text-gray-600 {
    color: #4b5563 !important;
  }
  
  .modal-content .text-gray-900 {
    color: #111827 !important;
  }
  
  /* Modal price and included text visibility */
  .modal-content .text-xl {
    color: #111827 !important;
  }
  
  .modal-content span {
    color: inherit !important;
  }
  
  /* Modal headings visibility */
  .modal-content .text-lg {
    color: #111827 !important;
    font-weight: 600 !important;
  }

  /* Review Page Mobile Fixes */
  @media (max-width: 768px) {
    .text-sm.font-medium {
      color: #111827 !important;
    }
    
    .text-sm.text-gray-500 {
      color: #6b7280 !important;
    }
    
    .font-medium.text-gray-900 {
      color: #111827 !important;
    }
    
    /* Protection plan price visibility in booking summary */
    .text-sm.font-medium.text-gray-900 {
      color: #111827 !important;
    }
  }
}