/**
 * HTMX Custom Styles
 * Contains Bootstrap overrides, HTMX transitions, and custom UI enhancements
 * 
 * Table of Contents:
 * 1. Bootstrap Overrides & Enhancements
 * 2. Loading Indicators
 * 3. HTMX Transitions
 */

/* ========================================
   1. Bootstrap Overrides & Enhancements
   ======================================== */

/**
 * Global Search input styling
 * Ensures white background for Select2 search dropdown
 */
#search_project {
  width: 100%;
  max-width: 1000px;
  background-color: #ffffff !important;
}

/* Ensure global search input can fit at least ~30 characters comfortably */
#search_query {
  min-width: 32ch; /* at least 30 chars + padding */
}

/* Fix Select2 alignment with input-group icon */
.input-group > #search_project + .select2-container {
  flex: 1 1 auto;
  width: 1% !important;
  min-width: 0;
}

/* Ensure Select2 container matches input-group height */
#search_project + .select2-container .select2-selection--single {
  height: 38px !important;
  display: flex;
  align-items: center;
}

/* Align rendered text vertically */
#search_project + .select2-container .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 12px;
}

/* Fix input-group-text alignment with Select2 */
.input-group .select2-container ~ .input-group-text {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Target all Select2 Bootstrap 5 theme - Maximum specificity */
span.select2.select2-container.select2-container--bootstrap-5
  .select2-selection.select2-selection--single,
.select2-container--bootstrap-5 .select2-selection.select2-selection--single,
.select2-container .select2-selection--single,
span.select2-container .select2-selection--single {
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
}

/* Specific targeting for the search_project Select2 wrapper */
#search_project + span.select2-container--bootstrap-5,
#search_project ~ span.select2-container--bootstrap-5,
#search_project + .select2-container,
#search_project ~ .select2-container,
span.select2-container[data-select2-id="313"] {
  background-color: transparent !important;
}

/* Target the selection element specifically for bootstrap-5 */
span.select2-container--bootstrap-5
  span.selection
  span.select2-selection--single,
#search_project + span.select2-container span.select2-selection,
#search_project ~ span.select2-container span.select2-selection {
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
}

/* Rendered text inside selection */
.select2-selection__rendered,
span.select2-selection__rendered {
  background-color: transparent !important;
  color: #495057 !important;
}

/* Placeholder styling for Select2 */
.select2-selection__placeholder,
span.select2-selection__placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Arrow styling */
.select2-selection__arrow,
span.select2-selection__arrow {
  background-color: transparent !important;
}

/**
 * Dropdown z-index fix
 * Prevents dropdowns from being clipped behind other elements
 */
.dropdown-menu {
  z-index: 1060;
}

/**
 * Custom spinner for inline loading states
 * Used for small, inline loading indicators
 * Note: Uses htmx-spin animation to avoid conflict with loader.css
 */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #e5e7eb;
  border-top-color: #6b7280;
  border-radius: 50%;
  animation: htmx-spin 0.6s linear infinite;
}

@keyframes htmx-spin {
  to {
    transform: rotate(360deg);
  }
}

/**
 * HTMX request indicators
 * Shows/hides loading states during HTMX requests
 */
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.htmx-indicator.htmx-request {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
}

/**
 * Screen reader only text
 * Hides content visually but keeps it accessible to screen readers
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   3. HTMX Transitions
   ======================================== */

/**
 * Content swapping states
 * Provides smooth transitions during HTMX content updates
 */
/* Reduce transitions during swaps to prevent visual slide/jank */
.htmx-swapping {
  opacity: 0.85;
  transition: opacity 60ms linear;
}

.htmx-settling {
  opacity: 1;
  transition: none;
}

/* Stabilize log form region to prevent layout jumps */
#log-form {
  will-change: contents;
}

/* Centered, non-layout-affecting spinner overlay within the log form */
.log-form-wrapper {
  position: relative;
}
.log-form-wrapper .log-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 6px 10px;
}

/* Reduce transition-induced shakes on form controls */
#log-form .form-control,
#log-form .select2-selection--single,
#log-form .select2-container--bootstrap-5 .select2-selection--single {
  transition: none !important;
}

/* Keep Select2 dropdown widths stable during swaps */
#log-form .select2-container {
  width: 100% !important;
}

/* Prevent accordion content bounce during HTMX swaps */
.accordion-body {
  contain: layout paint;
}

/* ========================================
   4. Animations
   ======================================== */

/**
 * Fade in animation
 * Used for new content appearing on the page
 */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Fade out animation
 * Used for content being removed from the page
 */
.fade-out {
  animation: fadeOut 0.2s ease-out;
}

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

/**
 * Slide in animation (scoped to messages only)
 * Prevents global sliding on other HTMX swaps like the log form
 */
#messages-container .htmx-added {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========================================
   5. Interactive Elements
   ======================================== */

/**
 * Inline editable fields
 * Provides visual feedback for editable content
 */
.editable {
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  transition: background-color 0.2s, border-color 0.2s;
}

.editable:hover {
  background-color: #f8f9fa;
  border-bottom-color: #007bff;
}

/**
 * Focus states for accessibility
 * Ensures keyboard navigation is visible
 */
.editable:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* ========================================
   6. Loading Overlay
   ======================================== */

/**
 * Full-screen loading indicator
 * Displayed during heavy operations to prevent user interaction
 */
.loading-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.loading-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/**
 * Dark mode support (optional)
 * Uncomment if dark mode is needed
 */
/*
@media (prefers-color-scheme: dark) {
  .loading-overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }
}
*/