/* ═══════════════════════════════════════════════════════════════════════════ */
/* HAMILTON ROCK - PROJECT CSS                                                  */
/* Only styles that cannot be achieved with Tailwind classes                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HTMX INDICATORS                                                              */
/* Required for HTMX loading state management                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* Subtle loading state for buttons during HTMX requests */
.htmx-request button[type="submit"],
button.htmx-request {
  opacity: 0.7;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TRANSACTION ROW HIGHLIGHT ANIMATION                                          */
/* Used for OOB-inserted transaction rows to draw attention to new entries      */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes row-highlight-fade {
  0% {
    background-color: rgb(219 234 254); /* blue-100 - matches brand */
  }
  100% {
    background-color: transparent;
  }
}

.animate-row-highlight {
  animation: row-highlight-fade 2s ease-out forwards;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  @keyframes row-highlight-fade {
    0% {
      background-color: rgb(30 58 138 / 0.3); /* blue-900 with opacity */
    }
    100% {
      background-color: transparent;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SKELETON LOADING ANIMATION                                                   */
/* Shimmer effect for loading placeholders                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, rgb(229 231 235) 25%, rgb(243 244 246) 50%, rgb(229 231 235) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DRAWER ANIMATIONS                                                           */
/* Slide-in/out for native <dialog> drawers                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STAFF DASHBOARD ANIMATIONS                                                  */
/* Card entrance and bar chart fill animations for staff home page            */
/* ═══════════════════════════════════════════════════════════════════════════ */

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bar-grow {
  from {
    width: 0;
  }
  to {
    width: var(--bar-width);
  }
}

.animate-card-enter {
  animation: card-enter 0.4s ease-out both;
}

.animate-bar-fill {
  animation: bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.4s;
}

dialog.drawer::backdrop {
  background-color: transparent;
}

@keyframes drawer-open {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes drawer-close {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}