/* Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import other stylesheets after Tailwind directives */
@import "./fullcalendar.css";
@import "./components/filepond.css";
@import "./components/simple_sidebar.css";
@import "./calendar_popup.css";

/* Your custom components layer */
@layer components {
  /* Form styles */
  .form-input {
    @apply block w-full rounded-md border-0 py-2.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6 transition duration-150 ease-in-out;
  }

  .form-label {
    @apply block text-sm text-gray-600;
  }

  .form-field {
    @apply relative;
  }

  .form-field-hint {
    @apply mt-2 text-sm text-gray-500;
  }

  .form-field-error {
    @apply mt-2 text-sm text-red-600;
  }

  .form-submit {
    @apply inline-flex justify-center rounded-md bg-gray-900 px-4 py-2.5 text-sm text-white shadow-sm hover:bg-gray-700 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-600;
  }

  .form-cancel {
    @apply inline-flex justify-center rounded-md bg-white px-4 py-2.5 text-sm text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-600;
  }

  /* Form containers */
  .form-container {
    @apply bg-white shadow-lg ring-1 ring-gray-900/5 sm:rounded-xl overflow-hidden transition duration-150 ease-in-out;
  }

  .form-section {
    @apply p-8;
  }

  .form-divider {
    @apply mb-8 pb-6 border-b border-gray-100;
  }

  /* Validation states */
  .validation-icon {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none;
  }

  .validation-icon svg {
    @apply hidden peer-valid:block h-5 w-5 text-green-500;
  }

  /* Form field spacing */
  .form-field-group {
    @apply space-y-8;
  }

  .form-field-wrapper {
    @apply mt-2;
  }

  /* Form actions */
  .form-actions {
    @apply flex justify-end space-x-4 pt-5;
  }
}

/* Your custom utilities layer */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* Define custom properties for toast animations */
@property --toast-translate-y {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

@property --toast-opacity {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

@layer base {
  body {
    @apply bg-gray-100;
  }
}

/* Toast animation keyframes */
@keyframes toast-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes toast-slide-out-up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes toast-collapse {
  from {
    transform: translateY(1rem);
  }
  to {
    transform: translateY(1rem);
  }
}

/* Dropzone styling */
.dropzone {
  @apply border border-dashed border-gray-300 rounded-md bg-white p-3 text-center cursor-pointer transition-all hover:bg-gray-50;
}

.dropzone.dz-clickable {
  @apply cursor-pointer;
}

.dropzone.dz-drag-hover {
  @apply border-indigo-500 bg-indigo-50;
}

.dropzone .dz-preview {
  @apply inline-block relative m-1 bg-white border border-gray-200 rounded-md shadow-sm overflow-hidden;
  width: 80px;
}

.dropzone .dz-preview .dz-image {
  @apply rounded-t-md overflow-hidden w-full h-[50px] flex items-center justify-center bg-gray-50 border-b border-gray-100;
}

.dropzone .dz-preview .dz-image img {
  @apply object-contain w-full h-full p-1;
}

.dropzone .dz-preview .dz-details {
  @apply text-[9px] text-gray-700 p-1.5;
}

.dropzone .dz-preview .dz-details .dz-filename {
  @apply font-medium truncate text-[9px];
}

.dropzone .dz-preview .dz-details .dz-size {
  @apply text-gray-500 text-[8px] mt-0.5;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  @apply absolute top-1 right-1 transform z-10;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  @apply w-3 h-3;
}

.dropzone .dz-preview .dz-success-mark svg {
  @apply text-green-500;
}

.dropzone .dz-preview .dz-error-mark svg {
  @apply text-red-500;
}

.dropzone .dz-preview .dz-progress {
  @apply w-full h-1 bg-gray-200 absolute left-0 top-0 rounded-none overflow-hidden z-10;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  @apply bg-indigo-500 h-full transition-all duration-300;
}

.dropzone .dz-preview .dz-remove {
  @apply block text-[8px] text-red-600 hover:text-red-800 mt-0 text-center py-0.5 border-t border-gray-100 transition-colors hover:bg-red-50;
}

.dropzone .dz-preview.dz-success .dz-details {
  @apply pb-0.5;
}

.dropzone .dz-message {
  @apply text-xs text-gray-600;
}

.dropzone .dz-message .dz-button {
  @apply bg-transparent border-0 p-0 cursor-pointer;
}

/* Touch targets for mobile */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  @apply touch-manipulation;
}