/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

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

/* Flatpickr styles */
@import url("https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css");


/* Hide native-only content by default on web */
.native-only {
  display: none !important;
}

/* Show native-only content in turbo native - must be after the hide rule */
body.turbo-native .native-only {
  display: block !important;
}

body.turbo-native .native-only.inline { display: inline !important; }
body.turbo-native .native-only.inline-block { display: inline-block !important; }
body.turbo-native .native-only.flex { display: flex !important; }
body.turbo-native .native-only.inline-flex { display: inline-flex !important; }

/* Import turbo_native.css after to ensure its rules take precedence */
@import "turbo_native.css";

/* Fix for orphaned Flatpickr calendars appearing below footer */
/* Hide all direct-child calendars, then show only when properly opened */
body > .flatpickr-calendar {
  display: none !important;
}

/* Show calendars when they have the open class AND are properly positioned */
.flatpickr-calendar.open {
  display: block !important;
}

/* Custom base styles */
@layer base {
  body {
    @apply font-sans antialiased;
    @apply bg-gray-50 text-gray-900;
  }
}

/* Custom component styles */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:pointer-events-none;
  }
  
  .btn-primary {
    @apply bg-[#4d5ba6] text-white hover:bg-[#3d4b86] focus:ring-[#4d5ba6];
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500;
  }
  
  .btn-outline {
    @apply border-2 border-[#4d5ba6] text-[#4d5ba6] hover:bg-[#4d5ba6]/10 bg-transparent focus:ring-[#4d5ba6];
  }
  
  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }
  
  .btn-ghost {
    @apply hover:bg-gray-100 text-gray-700 focus:ring-gray-500;
  }
  
  .btn-sm {
    @apply h-8 px-3 text-sm;
  }
  
  .btn-md {
    @apply h-10 px-4 text-sm;
  }
  
  .btn-lg {
    @apply h-12 px-6 text-base;
  }
  
  .btn-xl {
    @apply h-14 px-8 text-lg;
  }
  
  /* Expandable Panel Component */
  .expandable-panel-content {
    @apply overflow-hidden;
  }
  
  .expandable-panel-trigger {
    @apply cursor-pointer select-none;
  }
  
  /* Animation for smooth height transitions */
  .expandable-panel-content {
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Ensure inner content doesn't overflow during animation */
  .expandable-panel-inner {
    @apply overflow-hidden;
  }
}