/* Tailwind CSS will be loaded via CDN in the HTML templates */
/* This file is a placeholder for any custom CSS we might need */

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

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

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

/* Custom loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body {
    background: linear-gradient(120deg, #f8fafc 0%, #f0f4fd 60%, #f0f4fd 100%);
    background-color: rgba(248, 250, 252, 0.85); /* subtle transparency */
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 300px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.13;
    background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%2399c6fd" fill-opacity="0.25" d="M0,160L60,170.7C120,181,240,203,360,197.3C480,192,600,160,720,133.3C840,107,960,85,1080,101.3C1200,117,1320,171,1380,197.3L1440,224L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

body > * {
    position: relative;
    z-index: 1;
}

.border-indigo-500 {
    --tw-border-opacity: 1;
    border-color: #4EC8ED!important;
}

button#filter-toggle:hover {
  color: #4EC8ED;
}