/* ── HTMX progress bar ────────────────────────────────────────────── */
#htmx-indicator {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, var(--primary), #a78bfa, var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    z-index: 9999;
    opacity: 0;
}
.htmx-request #htmx-indicator,
#htmx-indicator.htmx-request {
    opacity: 1;
    animation: htmx-progress 1.2s ease infinite;
}
@keyframes htmx-progress {
    0%   { transform: scaleX(0);    opacity: 1; }
    60%  { transform: scaleX(0.75); opacity: 1; }
    100% { transform: scaleX(1);    opacity: 0; }
}

/* ── Tom Select ───────────────────────────────────────────────────── */
.ts-wrapper.single .ts-control,
.ts-control {
    border: 1.5px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.875rem;
    font-size: 0.8125rem;
    font-family: var(--font);
    color: var(--text-1);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    min-height: unset;
    transition: border-color .15s, box-shadow .15s;
}
.ts-control:focus-within,
.ts-wrapper.focus .ts-control {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.ts-dropdown {
    border: 1.5px solid var(--border-med);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    font-family: var(--font);
    margin-top: 4px;
    overflow: hidden;
}
.ts-dropdown .option {
    padding: 8px 12px;
    color: var(--text-2);
    font-size: 0.8125rem;
    background: var(--surface);
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: var(--primary-soft);
    color: var(--primary);
}
.ts-dropdown .optgroup-header {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-3);
    padding: 10px 12px 4px;
    background: var(--surface-2);
}
.ts-control input { color: var(--text-1) !important; }
.ts-control input::placeholder { color: var(--text-3) !important; }

/* ── Flatpickr ────────────────────────────────────────────────────── */
.flatpickr-input {
    background: var(--surface) !important;
    color: var(--text-1) !important;
}
.flatpickr-calendar {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1.5px solid var(--border-med);
    font-family: var(--font);
    background: var(--surface);
    color: var(--text-1);
}
.flatpickr-day {
    color: var(--text-2);
    border-radius: var(--radius-md);
}
.flatpickr-day:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: transparent;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays {
    background: var(--surface-2);
    color: var(--text-2);
    fill: var(--text-2);
}
.flatpickr-weekday            { color: var(--text-3) !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--text-2); fill: var(--text-2); }
.flatpickr-current-month input.cur-year { color: var(--text-1); }