/*
 * filter-controls.css — единое оформление списковых фильтров планировщика (v133).
 *
 * Охват (все экземпляры спискового выбора):
 *   Desktop:
 *     - общий фильтр исполнителей: кнопка .afil-btn, меню .afil-menu, строки
 *       .afil-item с чекбоксами, счётчик .afil-count, сброс #afil-all;
 *     - кварталы Ганта: чипы #gan-quarterbar .gan-q-chip;
 *     - toolbar-селекты .toolbar .select (#filter-traffic, #view-select, ...);
 *     - Загрузка: селект .wl-quarter, режимы .wl-exec-mode, чипы .wl-exec-chip,
 *       сброс .wl-exec-reset;
 *     - дашборд Аналитики: селект #analytics-dashboard .ad-select, режимы
 *       .ad-exec-mode, чипы .ad-exec-chip, сброс .ad-exec-reset;
 *     - desktop2: .filter-select.
 *   Mobile (/m, mobile.html): фильтр-чипы .chip, селекты .dir-select,
 *     .chat-project-select, .chat-model-select.
 *   Mobile2: фильтр-чипы .chip.
 *
 * Принципы: тонкая обводка 1px, скругления (пилюли/8px), спокойные цвета,
 * отчетливое selected (тёплый тинт + цветная обводка + галочка) и focus-visible.
 * Никакой логики: DOM, id, значения, aria-атрибуты и мультивыбор не меняются.
 * Нативные select и checkbox остаются в DOM и доступны: checkbox рисуется
 * через appearance:none (не display:none), select'ы не скрываются.
 * Все цвета — через существующие токены тем (--ink/--paper/--surface/--rule/
 * --bar/--accent/--muted/--hover/--sel/--shadow/--panel/--surface-2/--mix-bg),
 * поэтому light/dark и appearance "Классика" подхватываются автоматически.
 */

/* ————————————————— Общая механика строк-опций (меню фильтров) ————————————————— */

/* Строка опции в выпадающем меню фильтра исполнителей: пилюля-строка,
   при выборе — тёплый тинт, цветная обводка и галочка справа. */
.afil-menu{
  border-radius:12px;
  max-width:min(320px, calc(100vw - 24px));
}
.afil-item{
  border:1px solid transparent;
  border-radius:8px;
  padding:6px 10px;
  gap:10px;
  transition:background-color .12s ease, border-color .12s ease;
}
.afil-item:hover{
  background:var(--hover, var(--sel, rgba(0,0,0,.04)));
  border-color:var(--rule-soft, var(--rule));
}
.afil-item:has(input:checked){
  background:color-mix(in srgb, var(--bar) 6%, var(--surface, var(--panel)));
  border-color:color-mix(in srgb, var(--bar) 45%, var(--rule));
}
.afil-item:has(input:checked)::after{
  content:'✓';
  flex:none;
  margin-left:auto;
  font-size:12px;
  font-weight:700;
  color:var(--bar);
}
.afil-item:has(input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:1px;
}
/* Длинные имена не режутся молча: переносятся внутри строки. */
.afil-item > span:not(.afil-res){
  overflow-wrap:anywhere;
  white-space:normal;
}
.afil-item .afil-res{
  flex:none;
  max-width:45%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Сам чекбокс: нативный input остаётся кликабельным и в фокусе по Tab,
   квадратная отрисовка заменена на скруглённый кастомный вид
   (appearance:none — доступно, не display:none). */
.afil-item input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  width:16px;
  height:16px;
  margin:0;
  box-sizing:border-box;
  border:1.5px solid var(--rule);
  border-radius:5px;
  background:var(--surface, var(--panel));
  cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease;
}
.afil-item input[type="checkbox"]:hover{
  border-color:var(--muted);
}
.afil-item input[type="checkbox"]:checked{
  background-color:var(--bar);
  border-color:var(--bar);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 12px;
  background-position:center;
  background-repeat:no-repeat;
}
.afil-item input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Кнопка-триггер и пункты сброса в меню. */
.toolbar .afil .afil-btn{
  border-radius:8px;
  padding:5px 12px;
  transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.toolbar .afil .afil-btn[aria-expanded="true"]{
  border-color:var(--bar);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bar) 35%, transparent);
}
.afil-btn .afil-count{
  font-weight:600;
}
.afil-menu .tg-menu-reset{
  width:100%;
  box-sizing:border-box;
  margin-top:2px;
  padding:6px 10px;
  font:inherit;
  font-size:12px;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
}
.afil-menu .tg-menu-reset:hover{
  color:var(--ink);
  background:var(--hover, var(--sel, rgba(0,0,0,.04)));
  border-color:var(--rule-soft, var(--rule));
}

/* ————————————————— Чипы-«пилюли» выбора (кварталы, исполнители) ————————————————— */
/* База: тонкая обводка, спокойный фон; выбранное — тёплый тинт, цветная
   обводка, галочка; никаких тяжёлых сплошных плашек.
   Для чипов Загрузки селектор усилен (.wl-exec-chips .wl-exec-chip): файл
   workload-view.css подключается ДИНАМИЧЕСКИ позже и при равной специфичности
   перебивал бы правила выше. */

#gan-quarterbar .gan-q-chip,
.workload .wl-exec-chips .wl-exec-chip,
#analytics-dashboard .ad-exec-chip{
  border-radius:999px;
  padding:4px 11px;
  transition:background-color .12s ease, border-color .12s ease;
}

/* Выбранный чип: тинт + обводка + галочка (вместо сплошной заливки). */
#gan-quarterbar .gan-q-chip.on{
  background:color-mix(in srgb, var(--bar) 14%, var(--surface, var(--panel)));
  border-color:var(--bar);
  color:var(--ink);
  font-weight:600;
}
#gan-quarterbar .gan-q-chip.on::before{
  content:'✓ ';
  font-weight:700;
  color:var(--bar);
}
.workload .wl-exec-chips .wl-exec-chip.is-on{
  background:color-mix(in srgb, var(--bar) 14%, var(--surface, var(--mix-bg, var(--panel))));
  border-color:var(--bar);
  color:var(--ink);
}
.workload .wl-exec-chips .wl-exec-chip.is-on::before{
  content:'✓ ';
  font-weight:700;
  color:var(--bar);
}
#analytics-dashboard .ad-exec-chip.is-on{
  background:color-mix(in srgb, var(--bar) 14%, var(--panel));
  border-color:var(--bar);
  color:var(--ink);
}
#analytics-dashboard .ad-exec-chip.is-on::before{
  content:'✓ ';
  font-weight:700;
  color:var(--bar);
}

/* ————————————————— Режимы «Все / Никто / Выбранные» ————————————————— */
/* Сегментированные режимы: спокойный selected вместо угольной плашки.
   Селектор .wl-exec-modes усиливает приоритет над динамическим workload-view.css. */

.workload .wl-exec-modes .wl-exec-mode,
#analytics-dashboard .ad-exec-mode{
  transition:background-color .12s ease, color .12s ease;
}
.workload .wl-exec-modes .wl-exec-mode.is-on{
  background:color-mix(in srgb, var(--bar) 14%, var(--surface, var(--mix-bg, var(--panel))));
  color:var(--ink);
  font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bar) 45%, transparent);
}
#analytics-dashboard .ad-exec-mode.is-on{
  background:color-mix(in srgb, var(--bar) 14%, var(--panel));
  color:var(--ink);
  font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bar) 45%, transparent);
}

/* Кнопки сброса — вторичные, тонкая обводка, пилюля. */
.workload .wl-exec-reset,
#analytics-dashboard .ad-exec-reset{
  border-radius:999px;
  color:var(--muted);
}
.workload .wl-exec-reset:hover,
#analytics-dashboard .ad-exec-reset:hover{
  color:var(--ink);
  background:var(--hover, var(--sel, rgba(0,0,0,.04)));
  border-color:var(--muted);
}

/* ————————————————— Нативные select-фильтры ————————————————— */
/* Единый вид: тонкая обводка, скругление 8px, спокойный фон,
   отчётливый focus-visible (общее правило :focus-visible уже даёт
   акцентную обводку — тут лишь форма и мягкий ховер). */

.toolbar .select,
.workload .wl-quarter,
#analytics-dashboard .ad-select,
.filter-select{
  border-radius:8px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.toolbar .select:hover,
.workload .wl-quarter:hover,
#analytics-dashboard .ad-select:hover,
.filter-select:hover{
  border-color:var(--muted);
}
.toolbar .select:focus-visible,
.workload .wl-quarter:focus-visible,
#analytics-dashboard .ad-select:focus-visible,
.filter-select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--bar);
}

/* ————————————————— Mobile (/m): чипы-фильтры и селекты ————————————————— */

/* Фильтр-чипы панели «Отбор задач»: пилюли, selected — тёплый тинт с
   цветной обводкой вместо сплошной тёмной плашки. */
.chip{
  border-radius:999px;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chip.active{
  background:color-mix(in srgb, var(--bar) 16%, var(--surface));
  border-color:var(--bar);
  color:var(--ink);
  font-weight:600;
}
/* Явный focus-visible для чипов (клавиатура/ассистив). */
.chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Селекты редактора и чата на /m: та же форма, что на desktop. */
.dir-select,
.chat-project-select,
.chat-model-select{
  border-radius:10px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.dir-select:focus-visible,
.chat-project-select:focus-visible,
.chat-model-select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--bar);
}

/* ————————————————— Тёмная тема: те же тинты читаются на тёмном ————————————————— */
/* color-mix поверх var(--surface)/var(--panel) уже темнеет сам; дополнительное
   правило лишь гарантирует достаточный контраст текста выбранного чипа. */
[data-theme="dark"] #gan-quarterbar .gan-q-chip.on,
[data-theme="dark"] .workload .wl-exec-chips .wl-exec-chip.is-on,
[data-theme="dark"] #analytics-dashboard .ad-exec-chip.is-on,
[data-theme="dark"] .workload .wl-exec-modes .wl-exec-mode.is-on,
[data-theme="dark"] #analytics-dashboard .ad-exec-mode.is-on,
[data-theme="dark"] .chip.active{
  background:color-mix(in srgb, var(--bar) 22%, var(--surface, var(--panel)));
  color:var(--ink);
}
[data-theme="dark"] .afil-item:has(input:checked){
  background:color-mix(in srgb, var(--bar) 20%, var(--surface, var(--panel)));
}

/* Мобильный тач: чипы и строки меню чуть крупнее по вертикали сохранены
   исходными правилами — здесь только цвета и форма. */

@media (prefers-reduced-motion:reduce){
  .afil-item, .toolbar .afil .afil-btn, #gan-quarterbar .gan-q-chip,
  .workload .wl-exec-chips .wl-exec-chip, .workload .wl-exec-modes .wl-exec-mode,
  #analytics-dashboard .ad-exec-chip, #analytics-dashboard .ad-exec-mode,
  .chip, .toolbar .select, .workload .wl-quarter,
  #analytics-dashboard .ad-select, .filter-select, .dir-select{
    transition:none;
  }
}