/* Custom styles for LuxWX Portal */

/* HTMX loading indicator */
.htmx-request .htmx-indicator {
    opacity: 1;
}

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

/* Smooth transitions for HTMX swaps */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Weather Icons - Color classes for SVG icons using currentColor */
.weather-icon {
    display: inline-block;
}

/* Weather icon color classes */
.wi-sunny {
    color: #f59e0b; /* amber-500 - sunny/clear day */
}

.wi-night {
    color: #6366f1; /* indigo-500 - night/moon */
}

.wi-cloudy {
    color: #6b7280; /* gray-500 - clouds */
}

.wi-rain {
    color: #3b82f6; /* blue-500 - rain */
}

.wi-snow {
    color: #93c5fd; /* blue-300 - snow */
}

.wi-storm {
    color: #8b5cf6; /* violet-500 - thunderstorm */
}

.wi-fog {
    color: #9ca3af; /* gray-400 - fog/mist */
}

.wi-wind {
    color: #14b8a6; /* teal-500 - wind */
}

/* ===== Kiosk Mode ===== */

/* Fill entire viewport - eliminates black bars on any resolution */
.kiosk-mode {
    height: 100dvh;
    overflow: hidden;
    animation: kiosk-fade-in 400ms ease-out;
}

/* Page wrapper fills viewport, main content absorbs height difference */
.kiosk-mode > .min-h-screen {
    height: 100dvh;
    min-height: 100dvh;
}

.kiosk-mode main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Content wrapper - no min-height so JS viewport-fit can measure natural size */

@keyframes kiosk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Display profile: iPad (compact density) */
.kiosk-ipad {
    --kiosk-scale: 0.9;
    --kiosk-gap: 0.5rem;
}

/* Display profile: HD 1080p (default, no overrides needed) */
.kiosk-hd {
    --kiosk-scale: 1;
    --kiosk-gap: 1rem;
}

/* Display profile: 4K / large TV (readable from distance) */
.kiosk-4k {
    --kiosk-scale: 1.4;
    --kiosk-gap: 1.5rem;
}

/* Display profile: portrait / vertical monitor */
.kiosk-portrait {
    --kiosk-scale: 1;
    --kiosk-gap: 0.75rem;
}

/* Brand-colored checkboxes: dark checkmark on cyan background */
input[type="checkbox"].text-brand-400:checked,
input[type="checkbox"].text-brand-300:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230f172a' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}