/*
 * choices-daisy.css — makes Choices.js look like a native DaisyUI control.
 * Loaded globally by layout/daisy-layout.html. Reads DaisyUI theme tokens
 * (--b1/--b2/--b3/--bc/--p/--pc/--n/--rounded-btn/--rounded-box), so it
 * automatically follows all 4 themes incl. dark. Uses !important because the
 * page-level choices.css <link> loads after this file (in the body).
 *
 * NOTE: purely cosmetic — no effect on Choices behaviour or the cascades.
 */

/* ---- wrapper ---- */
.choices { margin-bottom: 0 !important; width: 100%; position: relative; }
.choices:last-child { margin-bottom: 0 !important; }

/* ---- the closed box: mimic .input.input-bordered / .select-bordered ---- */
.choices__inner {
    min-height: 2.5rem !important;
    padding: .25rem 2rem .25rem .75rem !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: .25rem;
    font-size: .9rem !important;
    line-height: 1.4 !important;
    color: oklch(var(--bc)) !important;
    background-color: oklch(var(--b1)) !important;
    border: 1px solid oklch(var(--bc) / 0.2) !important;
    border-radius: var(--rounded-btn, 0.5rem) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* focus / open state: DaisyUI focus ring in primary */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
    border-color: oklch(var(--p)) !important;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.2) !important;
    outline: none !important;
}
.choices.is-open .choices__inner {
    border-bottom-left-radius: var(--rounded-btn, 0.5rem) !important;
    border-bottom-right-radius: var(--rounded-btn, 0.5rem) !important;
}

.choices[data-type*="select-one"] .choices__inner { padding-bottom: .25rem !important; }

/* dropdown arrow */
.choices[data-type*="select-one"]::after {
    border-color: oklch(var(--bc) / 0.6) transparent transparent !important;
    right: .9rem !important;
}
.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent oklch(var(--bc) / 0.6) !important;
    margin-top: -7.5px !important;
}

/* selected value (single) + placeholder */
.choices__list--single { padding: 0 !important; }
.choices__list--single .choices__item { color: oklch(var(--bc)) !important; }
.choices__placeholder { color: oklch(var(--bc) / 0.5) !important; opacity: 1 !important; }

/* multi-select chips: DaisyUI primary badge look */
.choices__list--multiple .choices__item {
    background-color: oklch(var(--p)) !important;
    border: 1px solid oklch(var(--p)) !important;
    color: oklch(var(--pc)) !important;
    border-radius: var(--rounded-badge, 1.9rem) !important;
    font-size: .8rem !important;
    padding: .15rem .5rem !important;
    margin: .1rem !important;
}
.choices__list--multiple .choices__item.is-highlighted {
    background-color: oklch(var(--pf, var(--p))) !important;
    border-color: oklch(var(--pf, var(--p))) !important;
}
.choices__list--multiple .choices__item .choices__button {
    border-left-color: oklch(var(--pc) / 0.4) !important;
    opacity: .8;
}

/* ---- the open dropdown panel: mimic a DaisyUI card/menu ---- */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 40 !important;
    left: 0;
    width: 100%;
    margin-top: .25rem !important;
    background-color: oklch(var(--b1)) !important;
    border: 1px solid oklch(var(--bc) / 0.2) !important;
    border-radius: var(--rounded-box, 0.75rem) !important;
    box-shadow: 0 8px 24px oklch(var(--bc) / 0.14) !important;
    overflow: hidden;
}

/* the search box inside the dropdown */
.choices__list--dropdown .choices__input,
.choices__list[aria-expanded] .choices__input,
.choices__input {
    background-color: oklch(var(--b2)) !important;
    color: oklch(var(--bc)) !important;
    border: none !important;
    border-bottom: 1px solid oklch(var(--bc) / 0.15) !important;
    border-radius: 0 !important;
    padding: .5rem .75rem !important;
    margin: 0 !important;
    font-size: .875rem !important;
}
.choices__input::placeholder { color: oklch(var(--bc) / 0.5) !important; }

/* dropdown items + hover/keyboard highlight */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    color: oklch(var(--bc)) !important;
    padding: .5rem .75rem !important;
    font-size: .9rem !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.choices__list--dropdown .choices__item--selectable:hover,
.choices__list[aria-expanded] .choices__item--selectable:hover {
    background-color: oklch(var(--p) / 0.14) !important;
    color: oklch(var(--bc)) !important;
}
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
    background-color: oklch(var(--p) / 0.08) !important;
}
/* "No results" / "no choices" helper rows */
.choices__list--dropdown .has-no-results,
.choices__list--dropdown .has-no-choices {
    color: oklch(var(--bc) / 0.6) !important;
}

/* scrollbar inside long lists */
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
    max-height: 15rem;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--bc) / 0.3) transparent;
}

/* disabled */
.choices.is-disabled .choices__inner,
.choices[data-type*="select-one"].is-disabled .choices__inner {
    background-color: oklch(var(--b2)) !important;
    color: oklch(var(--bc) / 0.4) !important;
    cursor: not-allowed;
}