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

html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
  background-color: #000;
}

section {
  padding-top: 80px;
  padding-bottom: 80px;
  scroll-margin-top: 90px;
}

/* Mobile responsive scroll margin */
@media (max-width: 1024px) {
  section {
    scroll-margin-top: 380px;
  }
}

@media (max-width: 640px) {
  section {
    scroll-margin-top: 400px;
  }
}

#apps-carousel {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.scrollbar-hidden {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* ========================================
   SCROLLBAR STYLES - ALL BROWSERS
   ======================================== */

/* Base Scrollbar Styles - Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #777;
  border-radius: 10px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #777 transparent;
}

/* Hide carousel scrollbar */
#apps-carousel::-webkit-scrollbar {
  display: none;
}

/* ========================================
   MODAL SCROLLBAR - SPECIFIC TARGETING
   ======================================== */

/* Modal content scrollbar - Chrome, Edge, Safari */
.modal-scroll-content::-webkit-scrollbar {
  width: 8px !important;
  -webkit-appearance: none; /* Important for Safari */
}

.modal-scroll-content::-webkit-scrollbar-track {
  background: #1A1A1A !important;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Safari shadow */
}

.modal-scroll-content::-webkit-scrollbar-thumb {
  background: #444 !important;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); /* Safari shadow */
}

.modal-scroll-content::-webkit-scrollbar-thumb:hover {
  background: #666 !important;
}

/* Modal scrollbar - Firefox */
.modal-scroll-content {
  scrollbar-width: thin;
  scrollbar-color: #444 #1A1A1A;
}

/* Fallback for overflow-y-auto class (legacy support) */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
  -webkit-appearance: none;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: #1A1A1A;
  border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* ========================================
   SECTION WRAPPERS - RESPONSIVE PADDING
   ======================================== */

.section-wrapper {
  padding-left: 1rem;   /* 16px */
  padding-right: 1rem;
}

.section-left-wrapper {
  padding-left: 1rem;   /* 16px */
}

/* Large mobile / small tablets: ≥896px */
@media (min-width: 896px) {
  .section-wrapper {
    padding-left: 2rem;   /* 32px */
    padding-right: 2rem;
  }
  .section-left-wrapper {
    padding-left: 2rem;
  }
}

/* Small laptops / standard desktops: ≥1024px */
@media (min-width: 1024px) {
  .section-wrapper {
    padding-left: 4.875rem;   /* 78px */
    padding-right: 4.875rem;
  }
  .section-left-wrapper {
    padding-left: 4.875rem;
  }
}

/* Large desktops / widescreens: ≥1280px */
@media (min-width: 1280px) {
  .section-wrapper {
    padding-left: 6.875rem;   /* 110px */
    padding-right: 6.875rem;
  }
  .section-left-wrapper {
    padding-left: 6.875rem;
  }
}

/* ========================================
   EVENT CONTAINER - MOBILE SNAP SCROLL
   ======================================== */

@media (max-width: 768px) {
  #eventContainer {
    scroll-snap-type: x mandatory;
  }

  #eventContainer .event-card {
    scroll-snap-align: start;
  }
}

/* ========================================
   MODAL ANIMATIONS
   ======================================== */

.modal-enter {
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}