/* custom css overwrites */

/* alpine-js cloaks are invisible to the user until alpine is ready */
[x-cloak] { display: none !important; }

/* HTMX transition classes for smooth page changes */
.htmx-swapping {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.htmx-settling {
  opacity: 1;
  transition: opacity 200ms ease-in;
}

/* Prevent layout shift during navigation */
.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* Smooth fade for page content */
#content {
  transition: opacity 150ms ease-in-out;
}

#content.htmx-swapping {
  opacity: 0.7;
}

/* Prevent FOUC on initial load */
body {
  opacity: 1 !important;
}

/* globally overwrite input field colors here */
/*
input[type="radio"]:checked {
  // = tailwind teal-800
  border-color: #115e59 !important;
}

@media (prefers-color-scheme: dark) {
  // = tailwind teal-200
  input[type="radio"]:checked {
    border-color: #99f6e4 !important;
  }
}
*/