/* ── Force light color scheme for all form elements ── */
:root {
    color-scheme: light !important;
}

/* ── Global Form Elements — white background ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
    background-color: #fff !important;
    color: #1e293b !important;
    color-scheme: light !important;
}

/* ── Date picker icon and popup — force light theme ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    cursor: pointer;
}

/* ── Select dropdown arrow — force dark icon on white bg ── */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 12px !important;
    padding-right: 2rem !important;
}

input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff !important;
    border: 2px solid #cbd5e1 !important;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:not(.sr-only) {
    border-radius: 0.25rem;
}

input[type="radio"]:not(.sr-only) {
    border-radius: 50%;
}

input[type="checkbox"]:not(.sr-only):checked,
input[type="radio"]:not(.sr-only):checked {
    background-color: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

input[type="checkbox"]:not(.sr-only):checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"]:not(.sr-only):checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

/* ── HTMX Loading Indicator ── */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

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

/* ── Top Loading Bar Animation ── */
@keyframes loading-progress {
    0%   { width: 0%; }
    20%  { width: 25%; }
    50%  { width: 60%; }
    80%  { width: 85%; }
    100% { width: 95%; }
}

.loading-bar {
    animation: loading-progress 2s ease-in-out infinite;
}

/* ── Pulsing Status Dots ── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Skeleton loading placeholder ── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}