.htmx-indicator {
    opacity: 0;
    transition: opacity 1000ms ease-in;
    pointer-events: none;
    z-index: 800; /* above overlay */
    display: none;
    height: 100vh;
    width: 100vw;
    position: fixed; /* changed from absolute to fixed */
    top: 0;
    left: 0;
    /* Add flexbox properties to center the spinner */
    justify-content: center;
    align-items: center;
}

#htmx-long-spinner {
    background-color: rgba(0, 0, 0, 0.5);
}


.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
    opacity: 1;
    display: flex; /* changed from block to flex */
}

[hx-get], [hx-post], [hx-put], [hx-delete], [hx-patch] {
    cursor: pointer;
}

nav {
    /* always on top */
    position: relative;
    z-index: 900;
}

body:has(.htmx-request) {
    pointer-events: none;
}

html:has(.htmx-request) {
    cursor: wait !important;
}

/* Pastel green (success) */
.sync-success {
  background-color: #e9f7ef;   /* light pastel green */
  border-left: 4px solid #198754 !important;
}

.sync-success .card-title,
.sync-success p,
.sync-success i {
  color: #145c32; /* darker green for readability */
}

/* Pastel red (danger) */
.sync-danger {
  background-color: #fbeaea;   /* light pastel red */
  border-left: 4px solid #dc3545 !important;
}

.sync-danger .card-title,
.sync-danger p,
.sync-danger i {
  color: #842029; /* darker red for readability */
}

/* Pastel yellow (warning) */
.sync-warning {
  background-color: #fff3cd;   /* light pastel red */
  border-left: 4px solid #735b14 !important;
  color: #735b14;
}

.sync-warning .card-title,
.sync-warning p,
.sync-warning i {
  color: #735b14; /* darker red for readability */
}

.hero-title {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(90deg, #6689A1, #20c997);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.clickable {
  border-left: 4px solid #68a4ff;
  transition: all 0.2s ease-in-out;
}

.clickable:hover {
  border-left: 4px solid #0d6efd !important;
  background-color: #d5eaff;
  color: black;
}

.order-id {
  font-size: 1.1rem;
}

.customer-name {
  font-weight: 500;
}