/* v130 — UX-пакет Ганта/таблицы:
     1) компактная панель кварталов с множественным выбором (чипы);
     2) общий фильтр исполнителей с множественным выбором (выпадающий список);
     3) имя проекта и период в шапке — по выбранным кварталам.

   Файл подключается статически из index.html и (страховкой) из app.js, если
   статической ссылки нет. Панель кварталов строит gantt.js, поэтому селекторы
   панели начинаются с её id: файл gantt-quarter-filter.css подключается
   ДИНАМИЧЕСКИ позже и при равной специфичности перебивал бы обычные правила. */

/* v137: компактные группы шапки, без растягиваемой пустоты перед статистикой.
   Перенос органов управления вместо их обрезания; ширина grid-pane не меняется. */
@media screen {
  body:has(> .topbar){display:flex;flex-direction:column}
  body > .topbar{height:auto;min-height:48px;flex:none;flex-wrap:wrap;gap:8px 12px;padding:8px 16px;justify-content:flex-start}
  body > .topbar + .layout{height:auto;flex:1;min-height:0}
  .topbar > .stats{margin-left:0;flex-wrap:wrap;gap:8px 12px}
  .topbar > .user{min-width:0;flex-wrap:wrap;gap:8px;margin-left:auto}
  .topbar > h1{min-width:0;max-width:260px}
  .topbar #btn-profile{max-width:min(220px,calc(100vw - 32px))}
  .toolbar{height:auto;min-height:44px;flex-wrap:wrap;padding:6px 8px;justify-content:flex-start;overflow:visible}
  .toolbar > .grow{display:none}
  #workspace #gan-quarterbar{flex-wrap:wrap}
  .toolbar .afil{max-width:100%;min-width:0}
  .toolbar .afil-btn{max-width:100%;min-width:0}
  .toolbar .afil-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media (max-width:600px){
    .toolbar #mode-tabs{flex-wrap:wrap;max-width:100%}
    #workspace #gan-quarterbar .gan-navigation{margin-left:0;flex-wrap:wrap;max-width:100%}
  }
}

/* ————— 1. Квартальная панель: компактная строка чипов ————— */
#gan-quarterbar{padding:1px 10px;gap:6px;flex-wrap:nowrap;overflow:visible;border-top:0;border-bottom:0}
/* v150: панель — компактный фильтр, но цели внутри 36px (typography) */





#gan-quarter-menu{position:relative;flex:none}
#gan-quarter-menu > summary{cursor:pointer;list-style:none}
#gan-quarter-menu:not([open]) > #gan-quarter-chips{display:none}
#gan-quarter-menu[open] > #gan-quarter-chips{display:flex;position:absolute;left:0;top:100%;z-index:30;flex-direction:column;align-items:stretch;min-width:180px;max-height:60vh;overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 8px 24px var(--shadow)}
.gan-quarter-option{display:flex;gap:8px;align-items:center;padding:6px;white-space:nowrap}
.gan-quarter-option input{width:auto}
#gan-quarterbar .gan-navigation{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
#gan-quarterbar .gan-q-slot{flex:0 1 auto;min-width:0;overflow:hidden}
#gan-quarterbar .gan-q-label{
  font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);flex:none;
}
#gan-quarterbar .gan-q-label::after{content:":"}
/* Нативный селект оставлен в разметке как программный и доступный двойник
   (Gantt.selectQuarter, внешние сценарии, скринридеры), но визуально свёрнут:
   видимый выбор — чипы. Класс .gan-quarter скрываем только внутри панели. */
#gan-quarterbar .gan-quarter{
  position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0;min-width:0;
}
.gan-q-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.gan-q-chip{
  font:inherit;font-size:11px;line-height:1.25;padding:4px 8px;cursor:pointer;min-height:0;height:auto;min-width:0;
  color:var(--muted);background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  white-space:nowrap;
}
.gan-q-chip:hover{background:var(--hover);color:var(--ink)}
.gan-q-chip.on{background:var(--bar);border-color:var(--bar);color:#fff}
.gan-q-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gan-q-count{font-size:11px;color:var(--muted);white-space:nowrap}

/* ————— 2. Фильтр исполнителей: множественный выбор ————— */
/* #filter-assignee остаётся настоящим select[multiple]: он зеркалит выбор и
   принимает его из кода/тестов (onchange). Видимый орган управления — кнопка
   с выпадающим списком флажков, она пишет в этот же селект. */
.toolbar .afil-native{
  position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);border:0;padding:0;
}
.afil{position:relative;display:inline-flex;flex:none}
.afil-btn{
  font:inherit;font-size:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:6px;cursor:pointer;
}
.afil-btn:hover{background:var(--hover)}
.afil-btn[aria-expanded="true"]{background:var(--sel);border-color:var(--bar)}
.afil-btn .afil-caret{font-size:11px;color:var(--muted)}
.afil-btn .afil-count{
  font-size:11px;background:var(--bar);color:#fff;border-radius:999px;padding:1px 6px;
}
.afil-menu{
  position:absolute;z-index:80;top:calc(100% + 4px);left:0;min-width:210px;max-width:320px;
  max-height:320px;overflow:auto;padding:6px;font-size:12px;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:8px;box-shadow:0 8px 24px var(--shadow);
}
.afil-menu[hidden]{display:none}
.afil-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:5px;cursor:pointer}
.afil-item:hover{background:var(--hover)}
.afil-item input{width:auto;margin:0}
.afil-item .afil-res{font-size:11px;color:var(--muted);margin-left:auto}
.afil-sep{height:1px;margin:4px 6px;background:var(--rule-soft)}
.afil-empty{padding:6px 8px;color:var(--muted)}

/* ————— 3. Правка даты прямо в ячейке (ПКМ → «Изменить здесь» / «Календарь…») ————— */
.c.date{cursor:context-menu}
.c.date .cell-date{
  width:100%;min-width:0;font:inherit;font-size:11px;padding:1px 2px;
  color:var(--ink);background:var(--surface);border:1px solid var(--bar);border-radius:3px;
}
.c.date.editing{outline:1px solid var(--bar);outline-offset:-1px}
.c.date .cell-date-hint{
  position:absolute;z-index:70;margin-top:16px;padding:2px 6px;font-size:11px;
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;box-shadow:0 4px 14px var(--shadow);
  color:var(--muted);white-space:nowrap;
}

/* ————— 4. Шапка проекта: период по выбранным кварталам ————— */
.print-header .proj-quarters{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:4px;font-size:12px;color:var(--muted);
}
.print-header .proj-quarters b{color:var(--ink);font-weight:600}
.print-header .proj-quarters .pq-chip{
  font-size:11px;padding:1px 7px;border:1px solid var(--rule);border-radius:999px;background:var(--surface-2);
}


/* v150: скрытый нативный select остаётся 1x1 вне потока */
#gan-quarterbar .gan-quarter{position:absolute !important;width:1px;height:1px;min-width:0;min-height:0;clip:rect(0 0 0 0);clip-path:inset(50%)}
#gan-quarterbar{padding:2px 10px;flex-wrap:nowrap;overflow:visible}