/* ============================================================
   DarJadida — composant select wilaya/commune (TomSelect)
   Thèmes light (formulaires) + dark (hero recherche), RTL-safe.
   Base : tom-select.bootstrap5 (CDN). Ici : overrides.

   Le dropdown peut être monté hors du wrapper → on le tague via
   dropdownClass='ts-dropdown ts-dark-dd' pour le styler partout.
   !important : nécessaire pour battre la spécificité du thème bootstrap5.
   ============================================================ */

/* Tap target 40-55 ans : hauteur min 44px sur le contrôle visible.
   Padding RTL — GLOBAL, comme la hauteur ci-dessus et le text-align
   plus bas (l.126) : TomSelect n'active sa propre logique RTL QUE via
   une classe .rtl que rien, nulle part dans le projet, ne lui passe.
   Sa formule de padding réservée au caret référence des variables CSS
   (--ts-pr-caret etc.) jamais définies dans notre intégration → se
   résout invalide → 0 padding effectif sur ce côté. Invisible en FR/EN
   (texte aligné à gauche, ne l'atteint jamais) mais flagrant en arabe :
   text-align:right (déjà global, l.126) colle alors le texte contre ce
   bord à 0. Propriétés LOGIQUES (padding-inline-start/end) : gauche en
   FR/EN, droite en AR, sans règle [dir="rtl"] séparée. !important
   nécessaire pour battre les règles !important propres à TomSelect
   (.ts-control:not(.rtl){padding-right:...!important} etc.). Couvre
   TOUS les usages du composant en un seul endroit : accueil KACEM
   (search_cascade.php), annonces/form.php (wizard), profil/index.php,
   annonces/liste.php (barre de filtres) — remplace le correctif
   scopé .filter-grid .ts-control retiré de liste.php (redondant). */
.dj-wilaya-select-ts .ts-control,
.ts-wrapper .ts-control {
    min-height: 44px;
    font-size: 15px;
    padding-inline-start: .75rem !important;
    padding-inline-end: .75rem !important;
}
select.dj-wilaya-select { min-height: 44px; font-size: 15px; }

/* En-têtes de groupes (Populaires / Toutes) lisibles (thème light) */
.ts-dropdown .optgroup-header {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--dj-vert, #006233);
    opacity: .9;
}

/* ════════════ THÈME DARK (hero immersif) ════════════ */

/* ── Contrôle (champ fermé) ───────────────────────────────
   Ciblage .ts-dark UNIQUEMENT — classe posée par JS de façon fiable
   (wilaya_select_init.php ET search_cascade.php la posent en double,
   via wrapperClass ET classList.add en ceinture-bretelles). Le filet
   .cs-container (contexte hero) a été retiré : ce sélecteur supposait
   "dans le hero = toujours sombre", faux depuis le passage de
   search_cascade.php en thème clair (dark=false, LOT tics IA) — le
   wrapper .cs-container reste rendu même en clair, donc ce filet
   forçait un texte blanc sur un fond désormais clair (valeur
   sélectionnée invisible). Le contrôle fermé du hero ne doit JAMAIS
   être blanc EN THÈME SOMBRE. */
.ts-wrapper.ts-dark .ts-control,
.ts-dark .ts-control {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, .85) !important;
    box-shadow: none !important;
}
.ts-dark .ts-control .item { color: #fff !important; }

.ts-dark .ts-control input {
    color: #fff !important;
    background: transparent !important;
}
/* Placeholder (selon version : .ts-placeholder ou .placeholder, + input) */
.ts-dark .ts-control .ts-placeholder,
.ts-dark .ts-control .placeholder { color: rgba(255, 255, 255, .55) !important; }
.ts-dark .ts-control input::placeholder { color: rgba(255, 255, 255, .55) !important; }

/* Focus : liseré vert clair cohérent avec les autres champs du hero */
.ts-wrapper.ts-dark.focus .ts-control,
.ts-dark .ts-control:focus-within {
    background: rgba(255, 255, 255, .12) !important;
    border-color: var(--dj-vert-clair, #66A185) !important;
    box-shadow: 0 0 0 3px rgba(102, 161, 133, .15) !important;
}

/* Caret (flèche) clair */
.ts-dark .ts-control::after { border-color: rgba(255, 255, 255, .7) transparent transparent !important; }

/* État désactivé : signal "en attente" (terne + pointillé) SANS faner le
   texte → contraste AA conservé (commune tant que wilaya non choisie). */
.ts-wrapper.ts-dark.disabled .ts-control,
.ts-dark.disabled .ts-control {
    opacity: 1 !important;
    background: rgba(255, 255, 255, .04) !important;
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: rgba(255, 255, 255, .85) !important;
    cursor: not-allowed;
}

/* ── Dropdown (liste + recherche) ─────────────────────── */
.ts-dropdown.ts-dark-dd,
.ts-dark .ts-dropdown {
    background: #1a1f2e !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}
.ts-dropdown.ts-dark-dd .option,
.ts-dark .ts-dropdown .option {
    color: rgba(255, 255, 255, .9) !important;
    background: transparent !important;
}
.ts-dropdown.ts-dark-dd .option.active,
.ts-dropdown.ts-dark-dd .option:hover,
.ts-dark .ts-dropdown .option.active {
    background: rgba(102, 161, 133, .28) !important;
    color: #fff !important;
}
.ts-dropdown.ts-dark-dd .optgroup-header,
.ts-dark .ts-dropdown .optgroup-header {
    background: #1a1f2e !important;
    color: var(--dj-vert-clair, #66A185) !important;
}
.ts-dropdown.ts-dark-dd .no-results,
.ts-dark .ts-dropdown .no-results { color: rgba(255, 255, 255, .6) !important; }

/* Champ de recherche du plugin dropdown_input (en haut du dropdown) */
.ts-dropdown.ts-dark-dd .dropdown-input-wrap,
.ts-dark .ts-dropdown .dropdown-input-wrap {
    background: #1a1f2e !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.ts-dropdown.ts-dark-dd .dropdown-input,
.ts-dark .ts-dropdown .dropdown-input {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 8px !important;
    color: #fff !important;
}
.ts-dropdown.ts-dark-dd .dropdown-input::placeholder { color: rgba(255, 255, 255, .65) !important; }

/* ── RTL : texte aligné à droite ──────────────────────── */
[dir="rtl"] .ts-control,
[dir="rtl"] .ts-dropdown .option,
[dir="rtl"] .ts-dropdown .dropdown-input { text-align: right; }