/* ══════════════════════════════════════════════════════════════════
   CustomSelect — Personnalisations Tom Select v2.4.3
   Theme-agnostic : toutes les couleurs passent par des CSS variables
   --ord-ac-* avec fallbacks neutres.
   Le thème (ord_tailwind, Bootstrap…) peut les surcharger.

   IMPORTANT : ce fichier neutralise TOUTES les valeurs hardcodées
   du vendor tom-select.min.css. Chaque override est documenté.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens par défaut — alignés sur #26 forms revamp + dark mode aware ──
   Chaque var(--color-*) DaisyUI a un fallback neutre (2e arg) pour les
   contextes où ord_tailwind n'est pas chargé (Django admin, projets sans
   DaisyUI, etc.) — sinon la var est `unset` et le widget est invisible. */
:root {
    /* Backgrounds & text — utilisent les tokens DaisyUI qui flippent
       automatiquement avec le thème (light → dark).
       --ord-ac-bg : editable subtle off-white (option E #26 — 1.5 %). */
    --ord-ac-bg:              color-mix(in oklab, var(--color-base-content, #1f2937) 1.5%, var(--color-base-100, #ffffff));
    --ord-ac-bg-focus:        color-mix(in oklab, var(--color-base-content, #1f2937) 1.5%, var(--color-base-100, #ffffff));
    --ord-ac-text:            var(--color-base-content, #1f2937);
    --ord-ac-placeholder:     color-mix(in oklab, var(--color-base-content, #1f2937) 60%, transparent);

    /* Borders & states (alignés sur .ord-input — #26) */
    --ord-ac-border:          var(--color-base-300, #d1d5db);
    --ord-ac-border-focus:    var(--color-primary, #2563eb);
    --ord-ac-border-error:    var(--color-error, #dc2626);
    --ord-ac-focus-ring:      0 0 0 3px color-mix(in oklab, var(--color-primary, #2563eb) 20%, transparent);
    --ord-ac-error-ring:      0 0 0 3px color-mix(in oklab, var(--color-error, #dc2626) 20%, transparent);

    /* Sizing (canonique md) */
    --ord-ac-radius:          6px;
    --ord-ac-height-min:      38px;
    --ord-ac-padding:         5px 12px;
    --ord-ac-font-size:       14px;

    /* Primary brand color (boutons "Sélectionné", focus, etc.) */
    --ord-ac-primary:         var(--color-primary, #2563eb);
    --ord-ac-selected:        var(--color-primary, #2563eb);
    --ord-ac-selected-text:   var(--color-primary-content, #ffffff);
    --ord-ac-selected-hover:  color-mix(in oklab, var(--color-primary, #2563eb) 12%, var(--color-base-100, #ffffff));
    --ord-ac-selected-hover-text: var(--color-base-content, #1f2937);

    /* Tags / chips */
    --ord-ac-tag-bg:          color-mix(in oklab, var(--color-primary, #2563eb) 15%, transparent);
    --ord-ac-tag-color:       var(--color-primary, #2563eb);
    --ord-ac-tag-radius:      4px;

    /* Misc */
    --ord-ac-clear-hover:     var(--color-error, #dc2626);
    --ord-ac-clear-hover-bg:  color-mix(in oklab, var(--color-error, #dc2626) 8%, transparent);
    --ord-ac-dropdown-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --ord-ac-scrollbar:       var(--color-base-300, #d1d5db);
    --ord-ac-scrollbar-hover: var(--color-base-content, #1f2937);
    --ord-ac-arrow:           color-mix(in oklab, var(--color-base-content, #1f2937) 60%, transparent);
    --ord-ac-highlight:       color-mix(in oklab, var(--color-base-content, #1f2937) 6%, transparent);
}

/* ══════════════════════════════════════════
   Wrapper
   ══════════════════════════════════════════ */
.ts-wrapper {
    font-size: 0.925rem;
    font-family: inherit;
    /* Stabilise la largeur du widget. Sans width:100%, Tom Select dimensionne
       le wrapper sur son contenu interne (selected item label + boutons) :
       reflow visible au focus/clear (mesuré 271px → 217px en admin Django,
       cf. issue orderly 2026-05-02). En forçant 100%, le wrapper occupe le
       container du formfield peu importe l'état (vide/rempli/ouvert/fermé).
       L'override existant `.ts-wrapper.loading { width: 100% !important; }`
       plus bas confirme la convention. */
    width: 100%;
    /* Neutraliser les classes CSS de framework (DaisyUI .select, Bootstrap .form-select,
       et notre .ord-select qui est copiée du <select> original par Tom Select sur le wrapper).
       Sans ces resets, la bordure de .ord-select se cumule avec celle de .ts-control à
       l'intérieur → "double bordure" visible. La chrome visuelle vit sur .ts-control. */
    overflow: visible !important;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 0;
}

/* ══════════════════════════════════════════
   Control (zone de sélection)
   ══════════════════════════════════════════ */
.ts-wrapper .ts-control {
    min-height: 38px;
    padding: 4px 8px;
    /* !important sur bg + color : le vendor tom-select.min.css a
       .ts-control{background-color:#fff} hardcoded, et DaisyUI 5 ship aussi
       sa propre version de .ts-control. Sans !important, ces overrides
       gagnent en dark mode → fond blanc dans une UI dark. */
    background-color: var(--ord-ac-bg) !important;
    color: var(--ord-ac-text) !important;
    border: 1px solid var(--ord-ac-border) !important;
    border-radius: var(--ord-ac-radius);
    font-size: inherit;
    box-shadow: none !important;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.ts-wrapper .ts-control > input {
    /* L'input réel de recherche à l'intérieur du wrapper — DOIT être transparent
       pour ne pas afficher une "input dans un input" (issue #26 forms revamp). */
    color: var(--ord-ac-text);
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: inherit;
}

.ts-wrapper .ts-control > input::placeholder {
    color: var(--ord-ac-placeholder);
    opacity: 1;
}

/* Focus & open states — focus ring aligné sur .ord-input (#26) */
.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
    background-color: var(--ord-ac-bg-focus);
    /* !important pour battre l'override DaisyUI 5 sur l'état focus */
    border-color: var(--ord-ac-border-focus) !important;
    color: var(--ord-ac-text);
    box-shadow: var(--ord-ac-focus-ring) !important;
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
    background-color: var(--ord-ac-bg);
    opacity: 0.6;
}

/* ══════════════════════════════════════════
   Single-select : caret (chevron) via CSS mask
   ══════════════════════════════════════════ */
.ts-wrapper.single .ts-control::after {
    content: "";
    display: block;
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    opacity: 0.35;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border: none;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Cacher le chevron quand le clear button (×) est visible — les deux sont
   positionnés au même endroit (right ~0.625rem) et se superposeraient. */
.ts-wrapper.plugin-clear_button:hover .ts-control::after,
.ts-wrapper.plugin-clear_button.focus .ts-control::after,
.ts-wrapper.plugin-clear_button.dropdown-active .ts-control::after {
    display: none;
}

/* ══════════════════════════════════════════
   Placeholder
   ══════════════════════════════════════════ */
.ts-wrapper .ts-control > .item[data-value=""] {
    color: var(--ord-ac-placeholder);
}
.ts-wrapper .ts-control > input.items-placeholder {
    color: var(--ord-ac-placeholder) !important;
    opacity: 1;
}

/* ══════════════════════════════════════════
   Dropdown
   ══════════════════════════════════════════ */
.ts-dropdown {
    /* !important sur bg + color : le vendor tom-select.min.css a
       .ts-dropdown{background:#fff;color:#303030} hardcoded — sans !important
       le texte des options reste grey foncé sur fond dark, illisible.
       Note : le dropdown utilise --color-base-100 PUR (pas la subtle off-white
       du control), pour que les options soient parfaitement lisibles sur fond clean.
       Fallback hex obligatoire — sans DaisyUI (admin Django, projets sans token),
       --color-base-100 est unset → la propriété devient invalide et le bg
       transparent du .ts-wrapper cascade jusqu'ici (rapport orderly 2026-05-02). */
    background-color: var(--color-base-100, #ffffff) !important;
    color: var(--ord-ac-text) !important;
    border: 1px solid var(--ord-ac-border);
    border-radius: var(--ord-ac-radius);
    box-shadow: var(--ord-ac-dropdown-shadow);
    z-index: 1050;
    margin-top: 4px;
    /* Pas de !important sur padding : les contextes spécifiques
       (.ord-inline-table .ts-dropdown, .ord-fg-fk-body .ts-dropdown) ont 0,2,0
       spécificité > 0,1,0 ici → ils gagnent naturellement leur padding contextuel. */
    padding: 0;
    overflow: hidden;
}

/* Dropdown content (scrollable) */
.ts-dropdown .ts-dropdown-content {
    /* Bg explicite ceinture+bretelles : dans certains contextes (clip-path,
       stacking context inattendu) le bg du .ts-dropdown parent ne couvre pas
       toute la zone scrollable. */
    background-color: var(--color-base-100, #ffffff);
    max-height: 16rem;
    overflow-y: auto;
    padding: 4px;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* ══════════════════════════════════════════
   Dropdown items — options
   ══════════════════════════════════════════ */
.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 0.375rem 0.75rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--ord-ac-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ts-dropdown .option.active {
    background: var(--ord-ac-highlight);
    color: var(--ord-ac-text);
}

.ts-dropdown .option[data-selectable]:hover {
    background: var(--ord-ac-highlight);
}

/* Already selected items in dropdown */
.ts-dropdown .option.selected {
    background: var(--ord-ac-selected);
    color: var(--ord-ac-selected-text);
}

.ts-dropdown .option.selected.active {
    background: var(--ord-ac-selected-hover);
    color: var(--ord-ac-selected-hover-text);
}

/* Disabled options */
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] .option {
    opacity: 1;
}

/* No results message */
.ts-dropdown .no-results {
    color: var(--ord-ac-placeholder);
    cursor: default;
}

/* ══════════════════════════════════════════
   Tags (multi-select items)
   ══════════════════════════════════════════ */

/* Override vendor overflow:hidden so multi-select tags wrap properly */
.ts-wrapper.multi .ts-control {
    overflow: visible;
    flex-wrap: wrap;
    height: auto;
}

.ts-wrapper.multi .ts-control > div {
    background: var(--ord-ac-tag-bg);
    border: none;
    color: var(--ord-ac-text);
    border-radius: 4px;
    font-size: 0.82rem;
    padding: 2px 8px;
    cursor: pointer;
}

.ts-wrapper.multi .ts-control > div.active {
    background: var(--ord-ac-tag-bg);
}

/* Remove button on tags (via plugin-remove_button) */
.ts-wrapper.plugin-remove_button .item .remove {
    border-left-color: transparent;
    color: var(--ord-ac-text);
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: none;
    color: var(--ord-ac-clear-hover);
    opacity: 1;
}

/* ══════════════════════════════════════════
   Single-select : selected item display
   ══════════════════════════════════════════ */
.ts-wrapper.single .ts-control > .item {
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1.5rem;
    color: var(--ord-ac-text);
}

/* ══════════════════════════════════════════
   Dropdown input search (plugin-dropdown_input)
   ══════════════════════════════════════════ */
.ts-wrapper.plugin-dropdown_input .dropdown-input {
    /* Search input dans le dropdown — aligné sur les tokens canoniques #26.
       Ne porte que la bordure du bas (séparateur visuel des options dessous),
       pas de bordure complète (le panel .ts-dropdown a déjà la sienne). */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--ord-ac-bg);
    border: 0 !important;
    border-bottom: 1px solid var(--ord-ac-border) !important;
    border-radius: 0;
    color: var(--ord-ac-text);
    height: var(--ord-ac-height-min);
    padding: 0 12px;
    margin: 0;
    font-size: var(--ord-ac-font-size);
    line-height: 1.4;
    outline: 0 !important;
    box-shadow: none !important;
}

.ts-wrapper.plugin-dropdown_input .dropdown-input::placeholder {
    color: var(--ord-ac-placeholder);
    opacity: 1;
}

/* ══════════════════════════════════════════
   Clear button (plugin-clear_button)
   ══════════════════════════════════════════ */
.ts-wrapper.plugin-clear_button .clear-button {
    color: var(--ord-ac-placeholder);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ts-wrapper.plugin-clear_button:hover .clear-button,
.ts-wrapper.plugin-clear_button.focus .clear-button {
    opacity: 1;
}

.ts-wrapper.plugin-clear_button .clear-button:hover {
    color: var(--ord-ac-clear-hover);
}

/* ══════════════════════════════════════════
   Loading state
   ══════════════════════════════════════════ */

/* Neutraliser DaisyUI .loading (spinner mask-image, aspect-ratio, pointer-events)
   que Tom Select hérite quand il ajoute la classe `loading` au wrapper. */
.ts-wrapper.loading {
    pointer-events: auto !important;
    aspect-ratio: auto !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    display: flex !important;
    width: 100% !important;
}

/* Spinner — override vendor default (30px → 16px) */
.ts-dropdown .spinner {
    display: block;
    width: 16px;
    height: 16px;
    margin: 6px auto;
    border: 2px solid var(--ord-ac-border, #d1d5db);
    border-top-color: var(--ord-ac-primary, #1e40af);
    border-radius: 50%;
    animation: ord-ac-spin 0.6s linear infinite;
    /* Neutraliser DaisyUI .loading si appliqué ici aussi */
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    aspect-ratio: auto;
    pointer-events: none;
}

/* Remove the vendor's ::after pseudo-element spinner */
.ts-dropdown .spinner::after {
    display: none;
}

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

/* ══════════════════════════════════════════
   Scrollbar
   ══════════════════════════════════════════ */
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background: var(--ord-ac-scrollbar);
    border-radius: 3px;
}

.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: var(--ord-ac-scrollbar-hover);
}

/* Note : les overrides spécifiques à Django admin (overflow visible sur
   .form-row / .flex-container, sizing 30em) sont dans `admin.css`, chargé
   uniquement par AdminCustomSelect.Media. */