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

/* Font Definitions */
@font-face {
  font-family: 'RacingSansOne';
  src: url("/assets/racing-sans-one-f240da97.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Custom Properties */
:root {
  interpolate-size: allow-keywords;
  --iraceplan-blue: #0051a3;
  --iraceplan-blue-light: #0077f3;
  --iraceplan-red: #c41230;
  --iraceplan-red-light: #d4293f;
  --border-angle: 0deg;
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

input, select, textarea, button {
  @apply transition;
}

.simple_form {
  @apply w-full;
}

select option {
  @apply bg-zinc-900;
}

/* Base Element Styles */
@layer components {
  /* Typography */
  p {
    @apply text-sm text-zinc-500 sm:text-sm/6 dark:text-zinc-400;
  }

  a {
    @apply font-semibold text-zinc-950 hover:text-zinc-700 dark:text-white dark:hover:text-zinc-300 transition-all;
  }

  h2 {
    @apply text-2xl font-semibold tracking-[-0.015em] text-zinc-950 dark:text-white;
  }

  h3 {
    @apply text-lg font-semibold tracking-[-0.015em] text-zinc-950 dark:text-white;
  }

  button {
    @apply transition-colors;
  }

  /* Form Elements */
  .form-input {
    @apply transition relative block w-full mt-2 appearance-none rounded-lg px-[calc(theme(spacing[2.5])-1px)] py-[calc(theme(spacing[1.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 text-sm/6 dark:text-white border border-zinc-950/10 dark:border-white/10 bg-transparent dark:bg-white/5 focus:outline-none focus:ring-zinc-950 focus:border-zinc-950 dark:focus:ring-zinc-500/75 dark:focus:border-zinc-500/75;
  }

  .form-inputs {
    @apply space-y-4 mb-4;
  }

  .form-label {
    @apply select-none font-medium text-zinc-950 text-sm/6 dark:text-white;
  }

  .form-error {
    @apply mt-2 !text-red-500 dark:!text-red-400 text-xs italic;
  }

  .form-hint {
    @apply mt-2 text-zinc-500 text-xs italic;
  }

  .checkbox-input {
    @apply focus:ring-2 focus:ring-zinc-500 ring-offset-2 h-4 w-4 text-zinc-600 border border-zinc-950/10 dark:border-white/10 rounded bg-transparent dark:bg-white/5;
  }

  /* Buttons */
  .btn {
    @apply w-full relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-sm/6 font-semibold px-[calc(theme(spacing[2])-1px)] py-[calc(theme(spacing[1])-1px)] sm:px-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1])-1px)] focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 disabled:opacity-50 [&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText] border-zinc-950/10 text-zinc-950 active:bg-zinc-950/[2.5%] hover:bg-zinc-950/[2.5%] dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:active:bg-white/5 dark:hover:bg-white/5 [--btn-icon:theme(colors.zinc.500)] active:[--btn-icon:theme(colors.zinc.700)] hover:[--btn-icon:theme(colors.zinc.700)] dark:active:[--btn-icon:theme(colors.zinc.400)] dark:hover:[--btn-icon:theme(colors.zinc.400)] cursor-pointer;
  }

  .btn-primary {
    @apply before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg] before:shadow dark:before:hidden dark:border-white/5;
    @apply after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] dark:after:-inset-px dark:after:rounded-lg;
    @apply btn !bg-primary-500 hover:!bg-primary-600;
  }

  .btn-secondary {
    @apply btn border-zinc-950/10 dark:border-white/10;
  }

  .btn-danger {
    @apply btn !bg-red-500 hover:!bg-red-600 !text-white;
  }

  .btn-danger-outline {
    @apply btn !border-red-500 !text-red-500 hover:!bg-red-500 hover:!text-white;
  }

  .btn-success {
    @apply btn !bg-green-500 hover:!bg-green-600 !text-white;
  }

  .btn-warning {
    @apply btn !bg-yellow-500 hover:!bg-yellow-600 !text-white;
  }

  .btn-warning-outline {
    @apply btn !border-yellow-500 !text-yellow-500 hover:!bg-yellow-500 hover:!text-white;
  }

  .btn-sm {
    @apply px-[calc(theme(spacing[2])-1px)] py-[calc(theme(spacing[1])-1px)] text-xs/5 [&>[data-slot=icon]]:size-3.5;
  }

  .btn.disabled {
    @apply opacity-50 pointer-events-none !cursor-not-allowed;
  }

  /* Badges */
  .badge {
    @apply inline-flex items-center rounded-md px-1 py-0.5 sm:px-2 sm:py-1 text-xs font-medium;
  }

  .badge-rookie {
    @apply badge bg-[#fc0706]/10 text-[#fc0706] ring-1 ring-inset ring-[#fc0706]/20 dark:bg-[#fc0706]/20 dark:text-[#fc0706] dark:ring-[#fc0706]/30;
  }

  .badge-class-d {
    @apply badge bg-[#fc8a27]/10 text-[#fc8a27] ring-1 ring-inset ring-[#fc8a27]/20 dark:bg-[#fc8a27]/20 dark:text-[#fc8a27] dark:ring-[#fc8a27]/30;
  }

  .badge-class-c {
    @apply badge bg-[#feec04]/10 text-[#feec04] ring-1 ring-inset ring-[#feec04]/20 dark:bg-[#feec04]/20 dark:text-[#feec04] dark:ring-[#feec04]/30;
  }

  .badge-class-b {
    @apply badge bg-[#00c702]/10 text-[#00c702] ring-1 ring-inset ring-[#00c702]/20 dark:bg-[#00c702]/20 dark:text-[#00c702] dark:ring-[#00c702]/30;
  }

  .badge-class-a {
    @apply badge bg-[#0153db]/10 text-[#0153db] ring-1 ring-inset ring-[#0153db]/20 dark:bg-[#0153db]/20 dark:text-[#0153db] dark:ring-[#0153db]/30;
  }

  .badge-pro {
    @apply badge bg-[#000000]/10 text-[#000000] ring-1 ring-inset ring-[#000000]/20 dark:bg-[#000000]/20 dark:text-[#000000] dark:ring-[#000000]/30;
  }

  .badge-pro-wc {
    @apply badge bg-[#000000]/10 text-[#000000] ring-1 ring-inset ring-[#000000]/20 dark:bg-[#000000]/20 dark:text-[#000000] dark:ring-[#000000]/30;
  }

  .badge-icon > svg {
    @apply !w-3 !h-3;
  }

  /* Gray badge */
  .badge-zinc {
    @apply badge bg-zinc-50 text-zinc-600 ring-1 ring-inset ring-zinc-500/10 dark:bg-zinc-400/10 dark:text-zinc-400 dark:ring-zinc-400/20;
  }

  /* Red badge */
  .badge-red {
    @apply badge bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20;
  }

  /* Yellow badge */
  .badge-yellow {
    @apply badge bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20;
  }

  /* Green badge */
  .badge-green {
    @apply badge bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20;
  }

  /* Blue badge */
  .badge-blue {
    @apply badge bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30;
  }

  /* primary badge */
  .badge-primary {
    @apply badge bg-primary-50 text-primary-700 ring-1 ring-inset ring-primary-700/10 dark:bg-primary-400/10 dark:text-primary-400 dark:ring-primary-400/30;
  }

  /* Purple badge */
  .badge-purple {
    @apply badge bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-700/10 dark:bg-purple-400/10 dark:text-purple-400 dark:ring-purple-400/30;
  }

  /* Pink badge */
  .badge-pink {
    @apply badge bg-pink-50 text-pink-700 ring-1 ring-inset ring-pink-700/10 dark:bg-pink-400/10 dark:text-pink-400 dark:ring-pink-400/20;
  }

  /* Flash Messages */
  .flash {
    @apply text-white transform ease-out duration-300 transition translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-zinc-950 shadow-lg ring-1 ring-black ring-opacity-5;

    &.open {
      @apply translate-y-0 opacity-100 sm:translate-x-0;
    }

    &.close {
      @apply opacity-0;
    }

    &.flash-alert,
    &.flash-error {
      .flash-progress {
        @apply bg-red-500;
      }
    }

    &.flash-success {
      .flash-progress {
        @apply bg-green-500;
      }
    }

    &.flash-notice {
      .flash-progress {
        @apply bg-blue-500;
      }
    }

    &.flash-warning {
      .flash-progress {
        @apply bg-orange-500;
      }
    }

    .flash-progress {
      @apply h-1 rounded-full bg-zinc-500;
    }
  }

  /* Navigation */
  .nav-link {
    @apply flex 
      w-full 
      items-center
      gap-3 
      rounded-lg
      px-2
      py-2
      text-left
      text-sm/5
      font-medium 
      text-zinc-950 
      data-[slot=icon]:*:size-5
      data-[slot=icon]:*:shrink-0 
      data-[slot=icon]:*:fill-zinc-500 
      data-[slot=icon]:last:*:ml-auto 
      data-[slot=icon]:last:*:size-4
      data-[slot=avatar]:*:-m-0.5 
      data-[slot=avatar]:*:size-6
      data-[slot=avatar]:*:[--ring-opacity:10%] 
      hover:bg-zinc-950/5 
      data-[slot=icon]:*:hover:fill-zinc-950 
      active:bg-zinc-950/5 
      data-[slot=icon]:*:active:fill-zinc-950 
      data-[slot=icon]:*:data-[current]:fill-zinc-950 
      dark:text-white 
      dark:data-[slot=icon]:*:fill-zinc-400 
      dark:hover:bg-white/5 
      dark:data-[slot=icon]:*:hover:fill-white 
      dark:active:bg-white/5 
      dark:data-[slot=icon]:*:active:fill-white 
      dark:data-[slot=icon]:*:data-[current]:fill-white;
  }

  /* Icons */
  .icon {
    svg {
      @apply w-6 h-6;
    }
  }

  .icon.icon-sm {
    svg {
      @apply w-5 h-5;
    }
  }

  /* Utilities */
  .bg-gradient-brand {
    @apply bg-gradient-to-tr from-[--iraceplan-blue] via-[--iraceplan-blue-light] to-[--iraceplan-red] opacity-30;
  }

  .racing-sans-one {
    font-family: 'RacingSansOne', sans-serif;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .scrollbar {
    @apply [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-zinc-100 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-track]:bg-zinc-800 dark:[&::-webkit-scrollbar-thumb]:bg-zinc-600;
  }

  .no-transition {
    transition: none !important;
  }
}

/* Animations */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@layer utilities {
  .animate-marquee {
    animation: marquee 5s linear infinite alternate;
  }
}

/* Loading Indicators */
.small-loader {
  @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-zinc-500 dark:text-zinc-400;
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-zinc-100 dark:bg-zinc-800;
    &:hover {
      @apply bg-zinc-200 dark:bg-zinc-700;
    }
    &:not([href]) { /* disabled links */
      @apply text-zinc-300 dark:text-zinc-600 bg-zinc-50 dark:bg-zinc-900 cursor-default;
    }
    &.current {
      @apply text-white bg-zinc-500 dark:bg-zinc-600;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 rounded-lg px-3 py-0.5;
    input {
      @apply bg-zinc-50 dark:bg-zinc-900 border-none rounded-md;


    }
  }
}

.timeline-color-0 {
  @apply bg-blue-100 dark:bg-blue-900 border-blue-200 dark:border-blue-800 hover:bg-blue-200 dark:hover:bg-blue-800 text-blue-950 dark:text-blue-100;
}

.timeline-color-1 {
  @apply bg-emerald-100 dark:bg-emerald-900 border-emerald-200 dark:border-emerald-800 hover:bg-emerald-200 dark:hover:bg-emerald-800 text-emerald-950 dark:text-emerald-100;
}

.timeline-color-2 {
  @apply bg-purple-100 dark:bg-purple-900 border-purple-200 dark:border-purple-800 hover:bg-purple-200 dark:hover:bg-purple-800 text-purple-950 dark:text-purple-100;
}

.timeline-color-3 {
  @apply bg-orange-100 dark:bg-orange-900 border-orange-200 dark:border-orange-800 hover:bg-orange-200 dark:hover:bg-orange-800 text-orange-950 dark:text-orange-100;
}

.timeline-color-4 {
  @apply bg-pink-100 dark:bg-pink-900 border-pink-200 dark:border-pink-800 hover:bg-pink-200 dark:hover:bg-pink-800 text-pink-950 dark:text-pink-100;
}

.timeline-color-5 {
  @apply bg-teal-100 dark:bg-teal-900 border-teal-200 dark:border-teal-800 hover:bg-teal-200 dark:hover:bg-teal-800 text-teal-950 dark:text-teal-100;
}

/* Replace the previous modal overflow rule with this */
body:has(turbo-frame#modal:not(:empty)) {
  @apply overflow-hidden;
}

[data-batch-edit-target="editButton"],
[data-batch-edit-target="cancelButton"],
[data-batch-edit-target="selectButton"] {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: fit-content;
}

/* Selection mode styling */
.selection-mode .stint-selectable {
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.selection-mode .stint-selectable:hover {
  border-color: #e2e8f0; /* Light gray border on hover */
  background-color: rgba(226, 232, 240, 0.3);
}

.selection-mode .stint-selectable.selected {
  border-color: #3b82f6; /* Primary blue for selected items */
  background-color: rgba(59, 130, 246, 0.05);
}

/* Checkmark for selected items */
.selection-mode .stint-selectable.selected::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #3b82f6;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}

/* Dark mode adjustments */
.dark .selection-mode .stint-selectable:hover {
  border-color: #374151;
  background-color: rgba(55, 65, 81, 0.3);
}

.dark .selection-mode .stint-selectable.selected {
  background-color: rgba(59, 130, 246, 0.1);
}

.time {
  div {
    @apply flex items-center gap-2;

    select {
      @apply w-14;
    }
  }
}

/* Tooltip styles */
.tooltip {
  position: absolute;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 50;
  pointer-events: none;
}

/* Mobile-friendly styles */
@media (max-width: 640px) {
  .tooltip {
    max-width: 200px;
  }
}

/* Add styles for the range slider thumbs */
.range-slider {
  position: absolute;
  width: 100%;
  height: 20px;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
  margin: 0;
  top: 0;
}

.range-slider::-webkit-slider-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #0051a3;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  margin-top: 0px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  position: relative;
  z-index: 5;
}

.range-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid #0051a3;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Z-index to ensure thumbs are on top of the slider */
.range-slider.start-thumb {
  z-index: 3;
  margin-top: -2px;
}

.range-slider.end-thumb {
  z-index: 4;
  margin-top: -2px;
}

/* Sortable.js styles */
.sortable-ghost {
  @apply bg-zinc-100 dark:bg-zinc-700 opacity-70;
}

.prose-lg > p, .prose-lg > section > p, .prose-lg > ul, .prose-lg > ol {
  @apply text-base;
}