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

/*
 * Mobile-First Touch Target Utilities
 * All interactive elements should meet WCAG 2.1 Level AAA standards
 * Minimum touch target size: 44x44px
 */

@layer components {
  /* Touch target utilities - 44x44px minimum */
  .touch-target {
    @apply min-h-[44px] min-w-[44px] inline-flex items-center justify-center;
  }

  .touch-target-sm {
    @apply min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-sm;
  }

  .touch-target-lg {
    @apply min-h-[48px] min-w-[48px] inline-flex items-center justify-center text-base;
  }

  /* Button touch targets */
  .btn-touch {
    @apply touch-target px-4 rounded-lg font-medium transition-all duration-200;
  }

  .btn-touch-primary {
    @apply btn-touch bg-purple-600 text-white hover:bg-purple-700 active:bg-purple-800;
  }

  .btn-touch-secondary {
    @apply btn-touch bg-gray-200 text-gray-800 hover:bg-gray-300 active:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
  }

  .btn-touch-danger {
    @apply btn-touch bg-red-600 text-white hover:bg-red-700 active:bg-red-800;
  }

  /* Link touch targets with proper padding */
  .link-touch {
    @apply inline-flex items-center min-h-[44px] px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
  }

  /* Icon button touch targets */
  .icon-btn-touch {
    @apply touch-target rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
  }

  /* Form input touch targets */
  .input-touch {
    @apply h-[44px] px-4 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white transition-all duration-200;
  }

  .select-touch {
    @apply h-[44px] px-4 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white transition-all duration-200;
  }

  .textarea-touch {
    @apply min-h-[88px] px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white transition-all duration-200;
  }

  /* Native date input for mobile devices */
  .native-date-input {
    @apply h-[44px] px-4 rounded-lg border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-purple-500 dark:bg-gray-800 dark:text-white transition-all duration-200;
    /* Ensure the native date picker icon is visible */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239333ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
    /* Ensure minimum font size to prevent iOS zoom */
    font-size: 16px;
    /* Better tap target */
    min-height: 44px;
  }

  /* Dark mode icon for native date input */
  .dark .native-date-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  }

  /* iOS specific adjustments */
  @supports (-webkit-touch-callout: none) {
    .native-date-input {
      /* Remove custom icon on iOS to show native icon */
      background-image: none;
      padding-right: 12px;
    }
  }

  /* Android specific adjustments - keep custom icon */
  @supports not (-webkit-touch-callout: none) {
    .native-date-input::-webkit-calendar-picker-indicator {
      /* Hide default Android calendar icon since we have our own */
      opacity: 0;
      position: absolute;
      right: 0;
      width: 44px;
      height: 44px;
      cursor: pointer;
    }
  }

  /* Validation states for form inputs */
  input.validating,
  select.validating,
  textarea.validating {
    @apply border-blue-400 dark:border-blue-500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10' opacity='0.25'/%3E%3Cpath d='M12 2 A10 10 0 0 1 22 12' opacity='1'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 40px;
  }

  input:invalid:not(:focus):not(:placeholder-shown),
  select:invalid:not(:focus),
  textarea:invalid:not(:focus):not(:placeholder-shown) {
    @apply border-red-500 dark:border-red-500;
  }

  input:valid:not(:focus):not(:placeholder-shown):not([type="password"]),
  select:valid:not(:focus):not([value=""]),
  textarea:valid:not(:focus):not(:placeholder-shown) {
    @apply border-green-500 dark:border-green-500;
  }

  /* Checkbox and radio touch targets */
  .checkbox-touch,
  .radio-touch {
    @apply h-5 w-5 min-h-[44px] min-w-[44px] p-3 rounded border-gray-300 text-purple-600 focus:ring-purple-500;
  }

  /* Mobile navigation touch targets */
  .nav-item-touch {
    @apply flex items-center min-h-[48px] px-4 py-2 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 transition-colors;
  }

  /* Card interactive areas */
  .card-touch {
    @apply block p-4 rounded-lg hover:shadow-md transition-shadow cursor-pointer min-h-[60px];
  }

  /* Tab touch targets */
  .tab-touch {
    @apply inline-flex items-center justify-center min-h-[44px] px-4 py-2 border-b-2 font-medium transition-colors;
  }

  /* Loading States */
  .spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-purple-600 rounded-full animate-spin;
  }

  .spinner-sm {
    @apply inline-block w-5 h-5 border-2 border-gray-200 border-t-purple-600 rounded-full animate-spin;
  }

  .spinner-lg {
    @apply inline-block w-12 h-12 border-4 border-gray-200 border-t-purple-600 rounded-full animate-spin;
  }

  /* Skeleton loaders for content */
  .skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
  }

  .skeleton-text {
    @apply skeleton h-4 w-full mb-2;
  }

  .skeleton-title {
    @apply skeleton h-6 w-3/4 mb-4;
  }

  .skeleton-avatar {
    @apply skeleton h-12 w-12 rounded-full;
  }

  .skeleton-card {
    @apply skeleton h-32 w-full rounded-lg;
  }

  /* Loading overlay */
  .loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
  }

  .loading-container {
    @apply bg-white dark:bg-gray-800 rounded-lg p-6 flex flex-col items-center gap-4 shadow-xl;
  }

  /* Flash Message Animations */
  .flash-message {
    @apply transition-all duration-300 ease-out;
    user-select: none;
    touch-action: pan-y;
  }

  .flash-enter {
    @apply opacity-0 transform translate-y-[-100%];
  }

  .flash-enter-active {
    @apply opacity-100 transform translate-y-0;
  }

  .flash-exit {
    @apply opacity-0 transform translate-x-full;
  }

  /* Sticky Action Bar - Mobile-optimized approval buttons */
  .sticky-action-bar {
    @apply transition-all duration-300 ease-out;
  }

  /* Mobile: Fixed at bottom */
  .sticky-action-bar.sticky-enabled {
    @apply fixed bottom-0 left-0 right-0 z-30 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
  }

  /* Desktop: Inline flow */
  @screen lg {
    .sticky-action-bar {
      @apply relative border-t-0;
    }
  }

  /* Add shadow when scrolled */
  .sticky-action-bar.scrolled {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  /* Safe area support for devices with notch */
  .sticky-action-bar.sticky-enabled {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Mobile Dashboard Components */
  .stat-card {
    @apply transition-transform duration-200 hover:scale-105 active:scale-95;
  }

  .stat-icon {
    @apply transition-all duration-200;
  }

  .stat-card:hover .stat-icon {
    @apply scale-110;
  }

  .quick-action-card {
    @apply relative flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-xl border-2 border-gray-200 dark:border-gray-700 transition-all duration-200 hover:border-purple-500 dark:hover:border-purple-500 hover:shadow-lg active:scale-95;
  }

  .quick-action-icon {
    @apply w-12 h-12 md:w-14 md:h-14 rounded-full flex items-center justify-center mb-2 transition-transform duration-200 group-hover:scale-110;
  }

  .quick-action-label {
    @apply text-xs md:text-sm font-medium text-gray-700 dark:text-gray-300 text-center;
  }

  .procedure-card {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 transition-all duration-200 hover:border-purple-500 dark:hover:border-purple-500 hover:shadow-md active:scale-95;
  }

  .procedure-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center;
  }

  .procedure-badge {
    @apply px-2 py-1 text-xs font-medium rounded-full whitespace-nowrap;
  }

  /* Approval Timeline Components */
  .approval-timeline {
    @apply transition-all duration-300;
  }

  .timeline-step {
    @apply transition-all duration-300;
  }

  .timeline-icon {
    @apply transition-all duration-200 hover:scale-110;
  }

  .timeline-line {
    @apply transition-all duration-500 ease-in-out;
    animation: growDown 0.5s ease-out forwards;
  }

  @keyframes growDown {
    from {
      transform: scaleY(0);
      transform-origin: top;
    }
    to {
      transform: scaleY(1);
      transform-origin: top;
    }
  }

  /* Stagger animation for timeline steps */
  .timeline-step:nth-child(1) {
    animation: slideInLeft 0.4s ease-out 0.1s both;
  }

  .timeline-step:nth-child(2) {
    animation: slideInLeft 0.4s ease-out 0.2s both;
  }

  .timeline-step:nth-child(3) {
    animation: slideInLeft 0.4s ease-out 0.3s both;
  }

  .timeline-step:nth-child(4) {
    animation: slideInLeft 0.4s ease-out 0.4s both;
  }

  .timeline-step:nth-child(5) {
    animation: slideInLeft 0.4s ease-out 0.5s both;
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* Estilos personalizados para paginación Pagy - Touch optimizado */
.pagy {
  @apply flex items-center justify-center font-medium text-sm;
}

.pagy a,
.pagy span {
  /* Touch target compliant: 44x44px minimum */
  @apply inline-flex items-center justify-center min-w-[44px] min-h-[44px] mx-0.5 text-sm leading-tight text-purple-600 bg-white border border-purple-300 rounded-lg hover:bg-purple-50 hover:text-purple-700 dark:bg-gray-800 dark:border-gray-700 dark:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200;
}

.pagy .current {
  @apply text-white bg-purple-600 border-purple-600 hover:bg-purple-700 hover:border-purple-700 dark:bg-purple-600 dark:border-purple-600 font-semibold;
}

.pagy .disabled {
  @apply text-purple-300 bg-purple-50 border-purple-200 cursor-not-allowed hover:bg-purple-50 hover:text-purple-300 dark:text-gray-600 dark:bg-gray-800 dark:border-gray-700;
}

.pagy .gap {
  @apply text-purple-400 bg-white border-purple-300 cursor-default dark:bg-gray-800 dark:border-gray-700 dark:text-gray-500;
}

/* Estilos específicos para los enlaces de navegación */
.pagy .prev,
.pagy .next {
  @apply font-medium;
}

.pagy .prev:before {
  content: "‹";
  @apply mr-1;
}

.pagy .next:after {
  content: "›";
  @apply ml-1;
}
/* dropzone */
@keyframes passing-through{0%{opacity:0;transform:translateY(40px)}30%,70%{opacity:1;transform:translateY(0px)}100%{opacity:0;transform:translateY(-40px)}}@keyframes slide-in{0%{opacity:0;transform:translateY(40px)}30%{opacity:1;transform:translateY(0px)}}@keyframes pulse{0%{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:1px solid rgba(0,0,0,.8);border-radius:5px;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:.5}.dropzone .dz-message{text-align:center;margin:3em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:#fff}.dropzone .dz-preview.dz-image-preview .dz-details{transition:opacity .2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,.8);background-color:rgba(255,255,255,.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,.4);padding:0 .4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{transform:scale(1.05, 1.05);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px;background:rgba(0,0,0,.8);border-radius:50%}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px;fill:#fff}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;transition:all .2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;transition:opacity .4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:20px;top:50%;margin-top:-10px;left:15%;right:15%;border:3px solid rgba(0,0,0,.8);background:rgba(0,0,0,.8);border-radius:10px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#fff;display:block;position:relative;height:100%;width:0;transition:width 300ms ease-in-out;border-radius:17px}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;transition:opacity .3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#b10606;padding:.5em 1em;color:#fff}.dropzone .dz-preview .dz-error-message:after{content:"";position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #b10606}/*# sourceMappingURL=dropzone.css.map */

.dz-preview {
  transition: opacity 0.3s ease;
}

.dz-preview:hover {
  opacity: 0.8;
}

.dz-remove {
  transition: transform 0.2s ease;
}

.dz-remove:hover {
  transform: scale(1.1);
}

/* app/assets/stylesheets/application.css */
.direct-upload--pending {
  opacity: 0.6;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #4299e1;
  opacity: 0.2;
  transition: width 200ms;
}

.direct-upload__error {
  color: #e53e3e;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

turbo-frame {
  display: block;
}

/* Turbo Frame loading states - Enhanced */
turbo-frame[busy] {
  position: relative;
  min-height: 200px;
}

turbo-frame[busy]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

turbo-frame[busy]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #9333ea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 11;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Dark mode support for turbo frames */
.dark turbo-frame[busy]::before {
  background: rgba(17, 24, 39, 0.8);
}

.dark turbo-frame[busy]::after {
  border-color: #374151;
  border-top-color: #a855f7;
}


/* datepicker */
/* Easepick styles */
.easepick-wrapper {
  @apply z-50;
}

.easepick-wrapper .container {
  @apply border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg bg-white dark:bg-gray-800;
}

.easepick-wrapper .header {
  @apply bg-purple-600 text-white rounded-t-lg px-4 py-2;
}

.easepick-wrapper .month {
  @apply text-white font-medium;
}

.easepick-wrapper .year {
  @apply text-white font-medium;
}

.easepick-wrapper .calendars {
  @apply p-4;
}

.easepick-wrapper .calendar {
  @apply text-gray-900 dark:text-white;
}

.easepick-wrapper .day {
  /* Touch target compliant: increased from 32x32 to 40x40 for better mobile interaction */
  @apply w-10 h-10 text-sm rounded hover:bg-purple-100 dark:hover:bg-purple-900 flex items-center justify-center cursor-pointer;
}

.easepick-wrapper .day.today {
  @apply bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 font-semibold;
}

.easepick-wrapper .day.selected {
  @apply bg-purple-600 text-white font-semibold;
}

.easepick-wrapper .day.disabled {
  @apply text-gray-400 dark:text-gray-600 cursor-not-allowed;
}

.easepick-wrapper .day.not-available {
  @apply text-gray-300 dark:text-gray-700 cursor-not-allowed;
}

.easepick-wrapper .weekday {
  @apply text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8 h-6 flex items-center justify-center;
}

.easepick-wrapper .month-dropdown,
.easepick-wrapper .year-dropdown {
  @apply bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded text-gray-900 dark:text-white;
}

.easepick-wrapper .month-dropdown option,
.easepick-wrapper .year-dropdown option {
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
}

.easepick-wrapper .prev-button,
.easepick-wrapper .next-button {
  @apply w-8 h-8 rounded hover:bg-purple-100 dark:hover:bg-purple-900 flex items-center justify-center cursor-pointer text-white;
}

.easepick-wrapper .reset-button {
  @apply px-3 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600;
}

/* Estilos para modo oscuro */
.dark .easepick-wrapper .container {
  @apply bg-gray-800 border-gray-600;
}

.dark .easepick-wrapper .day {
  @apply text-gray-300;
}

.dark .easepick-wrapper .day:hover {
  @apply bg-purple-900;
}

/* Prevenir conflictos entre datepickers */
.custom-datepicker + .datepicker,
.custom-datepicker ~ .datepicker {
  display: none !important;
}

/* Ocultar datepickers de Flowbite cuando tenemos controlador Stimulus */
[data-controller*="datepicker"] + .datepicker,
[data-controller*="datepicker"] ~ .datepicker {
  display: none !important;
}

/* Asegurar que los datepickers de Flowbite no aparezcan en campos personalizados */
[data-easepick-initialized="true"] + .datepicker,
[data-picker-instance="true"] + .datepicker {
  display: none !important;
}

/* Mobile-optimized datepicker */
.easepick-mobile-optimized {
  @apply rounded-2xl shadow-2xl;
}

.easepick-mobile-optimized .container {
  @apply rounded-2xl overflow-hidden;
}

.easepick-mobile-optimized .day {
  @apply transition-all duration-200 active:scale-90;
}

.easepick-mobile-optimized .day:active {
  @apply bg-purple-200 dark:bg-purple-800;
}

/* Overlay para datepicker en móvil */
.easepick-overlay {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Estilos para el dropdown personalizado de empleados */
.employee-dropdown {
  @apply relative;
}

.employee-dropdown-panel {
  @apply absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg;
  max-height: 320px;
}

.employee-dropdown-search {
  @apply sticky top-0 p-3 border-b border-gray-200 bg-white;
}

.employee-dropdown-list {
  @apply max-h-60 overflow-y-auto;
}

.employee-option {
  @apply px-3 py-2 hover:bg-gray-100 cursor-pointer transition-colors duration-150;
}

.employee-option:hover {
  @apply bg-purple-50;
}

/* Modo oscuro para el dropdown */
.dark .employee-dropdown-panel {
  @apply bg-gray-700 border-gray-600;
}

.dark .employee-dropdown-search {
  @apply bg-gray-700 border-gray-600;
}

.dark .employee-option {
  @apply hover:bg-gray-600;
}

.dark .employee-option:hover {
  @apply bg-purple-900;
}

/* Alphabet Filter Utilities */
@layer utilities {
  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }

  /* Smooth momentum scrolling on iOS */
  .scroll-smooth-ios {
    -webkit-overflow-scrolling: touch;
  }

  /* Scroll snap for horizontal scrolling */
  .snap-x {
    scroll-snap-type: x mandatory;
  }

  .snap-start {
    scroll-snap-align: start;
  }

  .snap-center {
    scroll-snap-align: center;
  }

  /* Custom bg color for dark mode gray-750 (between 700 and 800) */
  .dark .bg-gray-750 {
    background-color: rgb(44, 49, 60);
  }

  .dark .from-gray-750 {
    --tw-gradient-from: rgb(44, 49, 60);
    --tw-gradient-to: rgb(44 49 60 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
}