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

@layer base {
  :root {
    color-scheme: light;
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }
  :root[class~="dark"] {
    color-scheme: dark;
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

/* Add smooth transitions for dark mode changes */
* {
  @apply transition-colors duration-100;
}

/* Ensure the body fills the viewport and has proper scrolling */
html,
body {
  @apply h-full overflow-x-hidden;
  scroll-behavior: smooth;
}

@layer components {
  .container-custom {
    @apply max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* CSS-only dropdown menu for desktop */
  .group:hover .group-hover\:visible,
  .group:focus-within .group-hover\:visible {
    visibility: visible;
    opacity: 1;
  }

  /* CSS-only dropdown for mobile with checkbox hack */
  .mobile-dropdown .peer:checked ~ div {
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-top: 0.5rem !important;
    padding-left: 1.5rem !important;
  }

  /* Mobile menu styles */
  body.overflow-hidden {
    overflow: hidden !important;
  }

  /* Fixed header styles */
  .fixed-header {
    @apply fixed top-0 left-0 right-0 w-full shadow-md;
    position: fixed !important; /* Ensure it stays fixed */
    z-index: 9999 !important; /* Highest z-index to ensure it stays on top */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease-in-out;
    background-color: rgba(255, 255, 255, 0.95);
    width: 100vw; /* Full viewport width */
  }

  .dark .fixed-header {
    background-color: rgba(
      38,
      38,
      38,
      0.95
    ); /* dark:bg-neutral-800 with opacity */
  }

  /* Pagination styles */
  .pagination {
    @apply inline-flex shadow-sm rounded-md;
  }

  .pagination .page,
  .pagination .first,
  .pagination .prev,
  .pagination .next,
  .pagination .last,
  .pagination .gap {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-teal-800 dark:text-gray-300 hover:bg-teal-800 hover:text-white dark:hover:bg-gray-700;
  }

  .pagination .page.current {
    @apply relative inline-flex items-center px-4 py-2 border border-teal-800 bg-teal-700 text-sm font-medium text-white dark:text-teal-600 dark:bg-teal-600;
  }

  .pagination .first {
    @apply rounded-l-lg;
  }

  .pagination .last {
    @apply rounded-r-lg;
  }

  .image-load-error {
    @apply opacity-50 grayscale;
  }

  /* Mobile-specific styles for improved touch interactions */
  .button-active,
  button:active,
  a.btn:active,
  [role="button"]:active {
    @apply scale-95 opacity-90 transition-all duration-100 ease-in-out;
  }

  /* Feedback for player controls */
  .player-control-highlight {
    @apply scale-95 opacity-80 bg-gray-500 bg-opacity-10 rounded-full transition-all duration-200 ease-in-out;
  }

  /* Prevent unintended zooming and double-tap behaviors on iOS */
  button,
  [role="button"],
  .fixed-header a,
  input[type="button"],
  input[type="submit"] {
    @apply touch-manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Apply playing state visually for audio play buttons */
  [data-play-button-stream-url-value].playing {
    @apply text-teal-600;
  }

  .dark [data-play-button-stream-url-value].playing {
    @apply text-teal-400;
  }

  /* Animated feedback for audio player buttons */
  #player-play-pause:active,
  #player-backward:active,
  #player-forward:active,
  #player-mini-play-pause:active,
  #player-expand-collapse:active {
    @apply scale-95 opacity-85 transition-all duration-100 ease-in-out;
  }

  /* Enhanced touch targets for mobile - make interactive elements easier to touch */
  @media (max-width: 767px) {
    button,
    [role="button"],
    .fixed-header a,
    input[type="button"],
    input[type="submit"],
    .play-button {
      min-height: 44px; /* Apple's recommended minimum touch target size */
      min-width: 44px;
    }

    /* Prevent iOS zoom on focus for inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
      @apply text-base; /* Ensure text is at least 16px to prevent zoom */
      font-size: 16px !important; /* Double ensure with a specific rule */
    }

    /* Enhanced styling for the seek bar in mobile view */
    #player-seek {
      touch-action: none; /* Prevent browser handling of touches */
      -webkit-appearance: none;
      appearance: none; /* Standard property for cross-browser compatibility */
      height: 8px;
      border-radius: 4px;
      background-color: rgba(229, 231, 235, 0.5);
      transition: height 0.15s ease;
    }

    #player-seek.seeking {
      height: 12px; /* Increase height when user is seeking */
      background-color: rgba(229, 231, 235, 0.7);
    }

    /* Custom styling for seek bar thumb on mobile */
    #player-seek::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #10b981; /* Emerald-500 to match theme */
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    }

    #player-seek.seeking::-webkit-slider-thumb {
      transform: scale(1.2);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    }

    /* Ensure proper spacing between touch targets */
    nav button,
    nav [role="button"],
    nav a {
      @apply my-1;
    }

    /* Fix for iOS Safari inputs */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 28px;
      height: 28px;
    }

    /* Fix for button icon alignment on small screens */
    button svg,
    [role="button"] svg {
      pointer-events: none;
    }

    /* Improve scrolling behavior */
    .overflow-scroll {
      -webkit-overflow-scrolling: touch;
    }

    @supports (-webkit-touch-callout: none) {
      /* Safari iOS specific styles */
      #player-seek,
      #player-volume {
        @apply opacity-85;
      }

      /* Fix for text selection on double-tap */
      * {
        -webkit-touch-callout: none;
      }
    }
  }

  /* Bookmark marker styles */
  .bookmark-marker {
    @apply absolute transform -translate-x-1/2 cursor-pointer;
    z-index: 30;
    width: 3px;
    background-color: #52ae32;
    height: 24px;
    top: -10px; /* Position it higher above the progress bar */
    opacity: 0.8;
    transition: all 0.2s ease;
    border-radius: 2px;
    pointer-events: auto; /* Ensure clicks are registered */
  }

  .bookmark-marker::after {
    content: "";
    @apply absolute left-1/2 -translate-x-1/2 -bottom-1;
    width: 6px;
    height: 6px;
    background-color: inherit;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
  }

  .bookmark-marker:hover {
    opacity: 1;
    height: 28px;
    top: -12px;
    width: 4px;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
  }

  /* Make sure the progress bar container has proper positioning and height */
  .relative.w-full.h-3.bg-muted {
    height: 12px; /* Increase height of the progress bar */
    margin: 12px 0; /* Add margin to accommodate the markers */
    overflow: visible !important; /* Force overflow visible */
  }

  /* Ensure the progress indicator doesn't hide markers */
  #player-progress {
    height: 100%; /* Match parent height */
  }

  /* Ensure the seek input is above markers but doesn't hide them completely */
  #player-seek {
    opacity: 0.001; /* Almost transparent but still clickable */
    margin: -12px 0; /* Compensate for the container margin */
    height: calc(100% + 24px); /* Extend the touch area */
  }

  /* Mobile-specific enhancements for bookmark markers */
  @media (max-width: 767px) {
    .bookmark-marker {
      height: 32px;
      top: -14px; /* Position higher on mobile */
      width: 4px;
    }

    .bookmark-marker:hover {
      height: 36px;
      top: -16px;
      width: 6px;
    }

    /* Increase touch target size */
    .bookmark-marker::after {
      width: 12px;
      height: 12px;
    }

    /* Adjust progress bar container for mobile */
    .relative.w-full.h-3.bg-muted {
      margin: 16px 0; /* More margin on mobile */
    }

    #player-seek {
      margin: -16px 0; /* Compensate for the larger container margin */
      height: calc(100% + 32px); /* Larger touch area on mobile */
    }
  }
}

.username_login_field {
  display: none;
}

.tooltip {
  position: relative;
  display: inline-block;
  z-index: 100;
  border-bottom: 1px dotted #c6e5de;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: #c6e5de;
  color: #07404b;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  bottom: 100%;
  left: 50%;
  margin-left: -120px;

  position: absolute;
  z-index: 100;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

button.playing .play-icon {
  @apply hidden;
}

button.playing .pause-icon {
  @apply block;
}

[data-play-button-stream-url-value].playing .play-icon {
  @apply hidden;
}

[data-play-button-stream-url-value].playing .pause-icon {
  @apply block;
}

.z-150 {
  z-index: 150 !important;
}