/* =========================================================================
   Module Tâches — Lot E : filtres, vues sauvegardées, recherche
   -------------------------------------------------------------------------
   Tout est préfixé `.tkv-` pour ne jamais entrer en collision avec
   tablette.css ni taches-core.css. On ne se sert que des variables de
   tablette.css (--card, --txt, --txt2, --sep, --blue, --red…) : le mode
   sombre suit donc automatiquement.
   ========================================================================= */

/* ===================== barre des vues sauvegardées ====================== */
.tkv-bar {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px; padding-bottom: 2px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tkv-bar::-webkit-scrollbar { display: none; }
.tkv-bar[hidden] { display: none; }

.tkv-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  max-width: 240px; padding: 7px 12px;
  border-radius: 13px; border: 1.5px solid transparent;
  background: var(--fill); color: var(--txt);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .12s ease;
}
.tkv-chip:hover { background: var(--fill-2); }
.tkv-chip:active { transform: scale(.97); }
.tkv-chip.on {
  background: rgba(0, 122, 255, .14);
  border-color: var(--blue); color: var(--blue);
}
.tkv-chip .tkv-nom {
  overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.tkv-ic { font-size: 15px; line-height: 1; }
.tkv-flag { font-size: 11px; opacity: .8; }
.tkv-n {
  min-width: 18px; padding: 0 6px; border-radius: 9px;
  background: var(--fill-2); color: var(--txt2);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.tkv-chip.on .tkv-n { background: rgba(0, 122, 255, .2); color: var(--blue); }
.tkv-ghost { background: transparent; color: var(--txt2); padding: 7px 10px; }
.tkv-ghost:hover { background: var(--fill); color: var(--txt); }

/* ======================== panneau de filtres ============================ */
.tkv-panneau { padding-bottom: 4px; }

.tkv-live {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 8px;
  margin: -4px 0 10px; padding: 9px 13px;
  border-radius: 13px;
  background: rgba(0, 122, 255, .1); color: var(--blue);
  font-size: 14px; font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.tkv-live-n { font-size: 21px; font-weight: 800; line-height: 1; }
.tkv-live.zero { background: rgba(255, 59, 48, .12); color: var(--red); }

.tkv-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.tkv-aide {
  font-size: 13px; color: var(--txt2); line-height: 1.4; margin: 4px 0 2px;
}
.tkv-intro { margin: -6px 0 12px; }
.tkv-sslb {
  margin: 18px 0 -2px; padding-top: 12px;
  border-top: 1px solid var(--sep);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--txt2);
}
.tkv-multi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tkv-actions { flex-wrap: wrap; }

/* aperçu des résultats (avec surlignage) */
.tkv-apercu { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.tkv-ap {
  padding: 7px 11px; border-radius: 10px;
  background: var(--fill-3);
  font-size: 14px; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkv-ap small { color: var(--txt2); margin-left: 8px; font-size: 12px; }
.tkv-ap-vide { color: var(--txt2); background: transparent; font-style: italic; }
.tkv-ap mark {
  background: rgba(255, 204, 0, .38); color: inherit;
  border-radius: 4px; padding: 0 1px; font-weight: 700;
}

/* ======================== gestion des vues ============================== */
.tkv-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.tkv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 13px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--sep);
  transition: background .18s ease, box-shadow .18s ease, opacity .12s ease;
}
.tkv-row.on { box-shadow: inset 0 0 0 1.5px var(--blue); }
.tkv-row.tkv-drag {
  opacity: .9; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  transform: scale(1.01);
}
.tkv-dragging { cursor: grabbing; }
.tkv-dragging .tkv-row { transition: none; }

.tkv-grip {
  flex: 0 0 auto; width: 26px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--txt2); font-size: 15px; cursor: grab;
  touch-action: none;                 /* indispensable au drag tactile */
  user-select: none; -webkit-user-select: none;
}
.tkv-grip.off { opacity: .25; cursor: default; }
.tkv-grip:active { cursor: grabbing; }

.tkv-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  text-align: left; padding: 4px 2px; background: none; color: var(--txt);
}
.tkv-open .tkv-ic { font-size: 20px; flex: 0 0 auto; }
.tkv-lbl { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.tkv-lbl b {
  font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkv-lbl small {
  font-size: 12px; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ========================== choix d'icône =============================== */
.tkv-emos {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 10px; max-height: 132px; overflow-y: auto;
}
.tkv-emo {
  width: 38px; height: 38px; border-radius: 11px; font-size: 19px;
  background: rgba(120, 120, 128, .1); border: 1.5px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.tkv-emo:hover { background: var(--fill-2); }
.tkv-emo:active { transform: scale(.92); }
.tkv-emo.on { border-color: var(--blue); background: rgba(0, 122, 255, .14); }

/* ============================ responsive ================================ */
@media (max-width: 699px) {
  .tkv-bar { margin-bottom: 8px; gap: 6px; }
  .tkv-chip { font-size: 13px; padding: 7px 10px; max-width: 190px; }
  .tkv-chip .tkv-nom { max-width: 110px; }
  .tkv-live { padding: 8px 11px; font-size: 13px; }
  .tkv-live-n { font-size: 19px; }
  .tkv-emo { width: 34px; height: 34px; font-size: 17px; }
  .tkv-row { padding: 7px 8px; gap: 6px; }
  .tkv-lbl b { font-size: 14px; }
}

/* confort au clavier */
.tkv-chip:focus-visible,
.tkv-emo:focus-visible,
.tkv-open:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tkv-chip, .tkv-row, .tkv-emo, .tkv-live { transition: none; }
  .tkv-row.tkv-drag { transform: none; }
}