/**
 * Guidance Monitoring System - Main Stylesheet
 * All application styles consolidated from inline/embedded sources.
 */

/* ============================================
   Alpine.js & HTMX Utilities
   ============================================ */
[x-cloak] {
    display: none !important;
}

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

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* ============================================
   Public Booking - Slot Buttons
   ============================================ */
.slot-btn.selected {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

/* ============================================
   Public Booking - Step Indicators
   ============================================ */
.step-indicator.active {
    background-color: #4f46e5;
    color: white;
}

.step-indicator.completed {
    background-color: #10b981;
    color: white;
}

/* ============================================
   Calendar Grid
   ============================================ */
.calendar-grid {
    min-height: 480px;
}

/* ============================================
   Reports - Progress Bars
   ============================================ */
.progress-bar {
    height: 0.5rem;
    border-radius: 9999px;
}