/* forms.css — native elements styled to match Shoelace */
:root {
    --sl-input-height-large: 48px;
    --sl-input-border-radius: 4px;
    --sl-input-border-color: #c4c9cf;
    --sl-input-border-color-focus: var(--type-color);
    --sl-input-font-size-large: 16px;
    --sl-input-padding-x: 12px;
    --sl-input-focus-ring: 0 0 0 3px var(--accent-color-1);
    --sl-button-height-large: 48px;
    --sl-button-border-radius: 4px;
}

input[type="text"],
input[type="date"],
select {
    font: var(--sl-font-sans);
    height: var(--sl-input-height-large);
    border: 1px solid var(--sl-input-border-color);
    border-radius: var(--sl-input-border-radius);
    font-size: var(--sl-input-font-size-large);
    padding: 0 var(--sl-input-padding-x);
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    width: 100%;
}

input:focus,
select:focus {
    border-color: var(--sl-input-border-color-focus);
    box-shadow: var(--sl-input-focus-ring);
}

/* Custom select arrow */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #fff;
    padding-right: 36px;
}

select[multiple] {
    height: auto;
    padding: 8px var(--sl-input-padding-x);
    background-image: none;
}

button {
    height: var(--sl-button-height-large);
    border: 1px solid #c4c9cf;
    border-radius: var(--sl-button-border-radius);
    font-size: var(--sl-input-font-size-large);
    padding: 0 20px;
    cursor: pointer;
    background: oklch(0.2945 0.0302 202.54);
    color: #fff;
}

option {
    font: var(--sl-font-sans);
}
.htmx-indicator {
    display: none;
}

.htmx-indicator sl-spinner {
    display: inline-block;
    font-size: 1rem;
    --track-width: 2px;
    vertical-align: sub;
    --indicator-color: var(--accent-color-3);
    --track-color: var(--accent-color-2);
    --speed: 5s;
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
    display: inline-block;
}

.re-highlight {
    background: var(--accent-color-1)