/* ================================================================
 * ProVsup Design System — pv-uiselect.css
 * Styles globaux pour AngularUI ui-select (simple + multiple).
 *
 * Scope : `.ui-select-bootstrap` — classe injectée par la directive
 * elle-même sur le div généré. Angular remplace <ui-select> dans le
 * DOM (replace:true), donc le sélecteur d'élément `ui-select` CSS ne
 * matche rien. `.ui-select-bootstrap` est la seule classe garantie.
 *
 * Inclure UNE FOIS dans index.html avant les CSS de page.
 * ================================================================ */


/* ── Conteneur racine ───────────────────────────────────────────── */

.pv-theme .ui-select-bootstrap {
  font-family: var(--font-ui);
  font-size: 13px;
  /* position:relative déjà fourni par .dropdown Bootstrap */
}


/* ════════════════════════════════════════════════════════════════
   SELECT SIMPLE — bouton toggle + search en overlay
   ════════════════════════════════════════════════════════════════ */

/* ── Toggle (état fermé) ────────────────────────────────────────── */
/* Template v0.8.3 : le bouton LUI-MÊME porte .ui-select-match
   Structure : .ui-select-bootstrap > button.btn.btn-default.form-control.ui-select-match
   NB: .ui-select-match .btn (descendant) ne matche RIEN.           */

.pv-theme .ui-select-bootstrap .btn.ui-select-match {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 32px 0 10px !important;
  background: var(--field-bg) !important;
  background-color: var(--field-bg) !important;
  border: 1.5px solid var(--field-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  font-weight: 400 !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: border-color 0.13s, box-shadow 0.13s !important;
}

/* Placeholder — span.text-muted dans le bouton (v0.8.3, pas .ui-select-placeholder) */
.pv-theme .ui-select-bootstrap .btn.ui-select-match .text-muted {
  color: var(--muted) !important;
  font-style: normal !important;
}

.pv-theme .ui-select-bootstrap .caret {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-top-color: var(--muted) !important;
  pointer-events: none !important;
}

/* ── Toggle invisible quand ouvert — conserve le layout (pas de saut) */
/* ng-hide="$select.open" est sur le <button> lui-même → .btn.ui-select-match.ng-hide */

.pv-theme .ui-select-bootstrap .btn.ui-select-match.ng-hide {
  display: flex !important;    /* écrase ng-hide (display:none) — garde l'espace */
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Input de recherche simple — superposé au toggle via absolute ── */
/* Cible : input direct enfant de .ui-select-bootstrap (single select).
   Pour le multiple, le search est dans .ui-select-multiple (autre règle). */

.pv-theme .ui-select-bootstrap > input.ui-select-search {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  height: 36px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: var(--field-bg) !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.pv-theme .ui-select-bootstrap > input.ui-select-search::placeholder {
  color: var(--muted) !important;
}


/* ════════════════════════════════════════════════════════════════
   SELECT MULTIPLE — conteneur tags + search inline
   ════════════════════════════════════════════════════════════════ */

.pv-theme .ui-select-bootstrap .ui-select-multiple.form-control {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
  background: var(--field-bg) !important;
  border: 1.5px solid var(--field-border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  cursor: text !important;
  height: auto !important;
  transition: border-color 0.13s, box-shadow 0.13s !important;
}

.pv-theme .ui-select-bootstrap.open .ui-select-multiple.form-control,
.pv-theme .ui-select-bootstrap .ui-select-multiple.form-control:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Tags */
.pv-theme .ui-select-bootstrap .ui-select-match-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 7px !important;
  background: var(--accent-soft) !important;
  border: 1px solid oklch(0.55 0.17 268 / 0.28) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-family: var(--font-ui) !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

.pv-theme .ui-select-bootstrap .ui-select-match-item .close {
  float: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 0.55 !important;
  color: var(--text) !important;
  text-shadow: none !important;
  transition: opacity 0.10s !important;
}

.pv-theme .ui-select-bootstrap .ui-select-match-item .close:hover {
  opacity: 1 !important;
}

/* Search inline dans le multiple */
.pv-theme .ui-select-bootstrap .ui-select-multiple input.ui-select-search {
  flex: 1 !important;
  min-width: 80px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  height: 26px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  outline: none !important;
}

.pv-theme .ui-select-bootstrap .ui-select-multiple input.ui-select-search::placeholder {
  color: var(--muted) !important;
}


/* ════════════════════════════════════════════════════════════════
   DROPDOWN DES CHOIX (commun simple + multiple)
   ════════════════════════════════════════════════════════════════ */

.pv-theme .ui-select-bootstrap .ui-select-choices.dropdown-menu {
  min-width: 100% !important;
  margin-top: 4px !important;
  padding: 4px 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-md) !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--border) transparent !important;
  font-family: var(--font-ui) !important;
}

.pv-theme .ui-select-bootstrap .ui-select-choices.dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.pv-theme .ui-select-bootstrap .ui-select-choices.dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* En-têtes de groupe */
.pv-theme .ui-select-bootstrap .ui-select-choices-group-label.dropdown-header {
  padding: 8px 12px 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  margin: 0 !important;
}

.pv-theme .ui-select-bootstrap .ui-select-choices-group-label.dropdown-header:first-child {
  border-top: none !important;
}

/* Lignes de choix */
.pv-theme .ui-select-bootstrap .ui-select-choices-row > a {
  display: block !important;
  padding: 8px 12px !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-family: var(--font-ui) !important;
  background: var(--surface) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: background 0.08s !important;
}

.pv-theme .ui-select-bootstrap .ui-select-choices-row > a:hover,
.pv-theme .ui-select-bootstrap .ui-select-choices-row.active > a {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  text-decoration: none !important;
}


/* ════════════════════════════════════════════════════════════════
   DARK MODE — couleurs hardcodées en fallback
   (cas où Bootstrap court-circuite les variables CSS)
   ════════════════════════════════════════════════════════════════ */

/* Bouton toggle fermé — sélecteur corrigé (le bouton porte .ui-select-match lui-même) */
:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .btn.ui-select-match {
  background: #1a1b1e !important;
  background-color: #1a1b1e !important;
  border-color: #303338 !important;
  color: #f0f0f2 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap > input.ui-select-search {
  background-color: #1a1b1e !important;
  color: #f0f0f2 !important;
}

/* Le class="form-control" passé à <ui-select> atterrit sur le div racine
   (.ui-select-container) — Bootstrap y injecte background:#fff.
   On cible les deux niveaux pour être sûr. */
:root[data-theme="dark"] .pv-theme .ui-select-container.ui-select-bootstrap {
  background: #1a1b1e !important;
  border-color: #303338 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-multiple.form-control {
  background: #1a1b1e !important;
  background-color: #1a1b1e !important;
  border-color: #303338 !important;
  color: #f0f0f2 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap.open .ui-select-multiple.form-control,
:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-multiple.form-control:focus-within {
  border-color: oklch(0.55 0.17 268 / 0.70) !important;
  box-shadow: 0 0 0 3px oklch(0.55 0.17 268 / 0.18) !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-match-item {
  background: oklch(0.55 0.17 268 / 0.18) !important;
  border-color: oklch(0.55 0.17 268 / 0.35) !important;
  color: #c8ccdb !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-match-item .close {
  color: #9ba1b0 !important;
  text-shadow: none !important;
  opacity: 0.7 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-match-item .close:hover {
  color: #f0f0f2 !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-multiple input.ui-select-search {
  color: #f0f0f2 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-multiple input.ui-select-search::placeholder {
  color: #4e5363 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-choices.dropdown-menu {
  background: #1e1f22 !important;
  border-color: #313133 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-choices-group-label.dropdown-header {
  background: #232528 !important;
  border-color: #313133 !important;
  color: #62687a !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-choices-row > a {
  background: #1e1f22 !important;
  color: #9ba1b0 !important;
}

:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-choices-row > a:hover,
:root[data-theme="dark"] .pv-theme .ui-select-bootstrap .ui-select-choices-row.active > a {
  background: oklch(0.55 0.17 268 / 0.16) !important;
  color: #f0f0f2 !important;
}


/* ════════════════════════════════════════════════════════════════
   SÉLECTEUR D'ICÔNES — mode grille + mode liste
   ════════════════════════════════════════════════════════════════ */

/* Mode grille — li en inline-flex pour former une grille */
.pv-theme .ui-select-bootstrap .ui-select-choices-row:has(.pv-icon-tile) {
  display: inline-flex !important;
  width: 38px;
  height: 38px;
  padding: 0;
}

.pv-theme .ui-select-bootstrap .ui-select-choices-row:has(.pv-icon-tile) > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: var(--r-sm) !important;
}

.pv-theme .pv-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
}

/* Wrapper grille — le ul lui-même */
.pv-theme .ui-select-bootstrap .ui-select-choices:has(.pv-icon-tile) {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

/* Mode liste — ligne icône + nom */
.pv-theme .pv-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-family: var(--font-ui);
}

.pv-theme .pv-icon-row > i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex: none;
  color: var(--muted);
}

.pv-theme .pv-icon-row > span {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}