/* Custom styles that complement Tailwind/daisyUI */

/* Alpine.js: hide elements with x-cloak until Alpine processes them. */
[x-cloak] { display: none !important; }

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* WBS tree indentation */
.wbs-tree-node {
  padding-left: calc(var(--level, 0) * 1.5rem);
}

/* Toast animation */
.toast-enter {
  animation: slideIn 0.3s ease-out;
}
.toast-exit {
  animation: slideOut 0.3s ease-in;
}

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

/* Flatpickr inside <dialog>: ensure the calendar sits above the modal box.
 * When appendTo=<dialog>, the calendar becomes a DOM child of the dialog
 * and inherits the top-layer, but z-index must still clear the modal-box. */
dialog .flatpickr-calendar {
  z-index: 9999;
}