/*
 * 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.
 */

/* Form Validation Styles */

/* Field wrapper states */
[data-state="error"] input,
[data-state="error"] select {
  @apply border-red-500 ring-red-500;
}

[data-state="valid"] input,
[data-state="valid"] select {
  @apply border-emerald-500 ring-emerald-500;
}

/* Error container visibility */
[data-state="error"] [data-error-container] {
  @apply block;
}

/* Form-level state indicators */
form[data-form-state="error"] .form-status-indicator {
  @apply text-red-500;
}

form[data-form-state="valid"] .form-status-indicator {
  @apply text-emerald-500;
}

form[data-form-state="validating"] .form-status-indicator {
  @apply text-blue-500;
}

/* Newly Added Provider Highlight Animation */
.newly-added-highlight {
  animation: highlightFade 3s ease-out;
}

@keyframes highlightFade {
  0% {
    background-color: rgb(34 197 94 / 0.2); /* green-500 with 20% opacity */
    transform: scale(1.02);
  }
  50% {
    background-color: rgb(34 197 94 / 0.1); /* green-500 with 10% opacity */
    transform: scale(1);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Updated Element Highlight Animation */
.updated-element-highlight {
  animation: updateHighlight 2s ease-out;
  position: relative;
}

@keyframes updateHighlight {
  0% {
    color: rgb(217 119 6); /* amber-600 */
    text-shadow: 0 0 20px rgb(251 191 36 / 0.5); /* amber-400 with glow */
  }
  50% {
    color: rgb(146 64 14); /* amber-800 */
    text-shadow: 0 0 10px rgb(251 191 36 / 0.3);
  }
  100% {
    color: inherit;
    text-shadow: none;
  }
}

/* Modal Transition Styles */

/* Smooth transitions for modal list updates */
turbo-frame#modal_managers_list,
turbo-frame#modal_providers_list,
turbo-frame#modal_providers_content,
turbo-frame#modal_providers_info,
turbo-frame#modal_managers_content,
turbo-frame#modal_managers_info {
  transition: opacity 200ms ease-out;
}

turbo-frame#modal_managers_list[busy],
turbo-frame#modal_providers_list[busy],
turbo-frame#modal_providers_content[busy],
turbo-frame#modal_providers_info[busy],
turbo-frame#modal_managers_content[busy],
turbo-frame#modal_managers_info[busy] {
  opacity: 0.6;
}

/* Ensure the fixed height container transitions smoothly */
turbo-frame#modal_managers_list > div,
turbo-frame#modal_providers_list > div,
turbo-frame#modal_providers_content > div,
turbo-frame#modal_managers_content > div {
  transition: all 200ms ease-out;
}

/* Smooth height transitions for the modal panel itself */
[data-content-modal-target="panel"] {
  transition: all 300ms ease-out;
}

/* Fixed height for modal forms to prevent resizing */
#modal_add_provider_form.h-96,
#modal_add_manager_form.h-96 {
  height: 24rem; /* 384px - same as h-96 */
}

/* Prevent layout shift during search */
.min-h-\[24rem\] {
  transition: height 200ms ease-out;
}

/* Time-off/OOO Pattern */
.time-off-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(239, 68, 68, 0.1) 10px,
    rgba(239, 68, 68, 0.1) 20px
  );
}

/* Subtle pattern for full day OOO background */
.time-off-pattern-subtle {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(239, 68, 68, 0.05) 20px,
    rgba(239, 68, 68, 0.05) 40px
  );
}