/* Блок вибору таймера у вікнах відправки (js/timerpick.js). ОДИН файл на обидва застосунки: frontend/css/timerpick.css
   і frontend-supplier/css/timerpick.css збігаються байт у байт (tests/test_timerpick.py). Кольори — змінні теми
   застосунку: «Клієнти» називають їх --text / --text-dim / --text-muted / --bg-hover / --accent-strong / --badge,
   «Постачальники» — --txt / --muted / --muted2 / --bg3 / --accent2 / --ok; беремо ті, що є.
   Розкладка залежить від ШИРИНИ САМОГО БЛОКА (container query), а не екрана: у вузькому вікні й на телефоні сітка
   складається. Блок має стояти в контейнері, який дає йому ширину (звичайний блок чи колонка). */
.tpk{
  --tpk-text:var(--text,var(--txt,#fff));
  --tpk-dim:var(--text-dim,var(--muted,#7d8e9b));
  --tpk-mut:var(--text-muted,var(--muted2,#6d7f8c));
  --tpk-chip:var(--bg-hover,var(--bg3,#202b36));
  --tpk-acc:var(--accent,#5288c1);
  --tpk-acc2:var(--accent-strong,var(--accent2,#6ab3f3));
  --tpk-ok:var(--badge,var(--ok,#4fae4e));
  --tpk-warn:var(--warn,#e0a42b);
  --tpk-edge:color-mix(in srgb,var(--tpk-mut) 40%,transparent);
  container:tpk / inline-size;
  min-width:0;font-size:12.5px;line-height:1.3;color:var(--tpk-text);
}
.tpk [hidden]{display:none !important}

/* сітка: заголовок, під ним ряди «підпис + сім строків»; стовпці спільні для обох рядів — строки стоять один під
   одним, а жирний шрифт обраного чипа сусідів не зсуває. «Без таймера» — окремою кнопкою праворуч на висоту рядів */
.tpk-grid{display:grid;gap:6px;align-items:stretch;max-width:1060px;
  grid-template-columns:max-content repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.15fr)) minmax(0,1.9fr) minmax(0,1.8fr) max-content}
.tpk-title{grid-column:1 / -1;margin:0 0 1px;color:var(--tpk-dim)}
.tpk-title i{margin-right:7px;font-size:12px;color:var(--tpk-acc2)}
.tpk-title b{font-weight:600;color:var(--tpk-text)}
.tpk-label{display:flex;align-items:center;gap:7px;padding-right:8px;white-space:nowrap;color:var(--tpk-dim)}
.tpk-label i{width:15px;text-align:center;font-size:12px;color:var(--tpk-mut)}
.tpk-label.on,.tpk-label.on i{color:var(--tpk-acc2)}
.tpk-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:32px;margin:0;padding:0 5px;
  border:1px solid var(--tpk-edge);border-radius:8px;background:var(--tpk-chip);color:var(--tpk-text);
  font:inherit;font-size:12.5px;line-height:1.15;white-space:nowrap;cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s}
.tpk-chip-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tpk-chip i{flex:none;font-size:11px;opacity:.7}
.tpk-chip:hover:not(:disabled){border-color:var(--tpk-acc);filter:brightness(1.12)}
.tpk-chip:focus-visible{outline:2px solid var(--tpk-acc2);outline-offset:1px}
.tpk-chip.on{background:var(--tpk-acc2);border-color:var(--tpk-acc2);color:#0c1118;font-weight:600;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tpk-acc2) 30%,transparent)}
.tpk-chip.on i{opacity:1}
/* обраний «До часу…» показує сам час («завтра 09:00») — значок прибираємо, щоб година не обрізалась у вузькому вікні */
.tpk-chip.tpk-custom.on i{display:none}
.tpk-chip:disabled{opacity:.42;cursor:not-allowed}
/* «Без таймера»: обраний — спокійніше за строк (рамка й легкий фон): це «нічого не ставити», а не дія */
.tpk-chip.tpk-off{grid-column:9;grid-row:2 / span 2;flex-direction:column;gap:5px;width:88px;height:auto;min-height:32px;
  padding:4px 8px;border-style:dashed;background:transparent;color:var(--tpk-dim);white-space:normal;text-align:center}
.tpk-chip.tpk-off.on{border-style:solid;border-color:var(--tpk-acc2);background:color-mix(in srgb,var(--tpk-acc2) 15%,transparent);
  color:var(--tpk-text);box-shadow:none}
.tpk-chip.tpk-off.on i{color:var(--tpk-acc2)}
.tpk-one .tpk-chip.tpk-off{grid-row:2;flex-direction:row;gap:6px;width:auto;padding:0 12px;white-space:nowrap}

/* під сіткою — що буде: «оберіть…» (жовтим), «нагадаємо …» (зеленим), «без таймера»; поруч — таймер, який уже стоїть
   у чаті адресата (обрали строк — попередження, що новий його замінить) */
.tpk-state{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;min-height:17px;margin-top:8px}
.tpk-hint{font-weight:600}
.tpk-hint i{margin-right:6px;font-size:12px}
.tpk-hint.need{color:var(--tpk-warn)}
.tpk-hint.ok{color:var(--tpk-ok)}
.tpk-hint.off{color:var(--tpk-dim);font-weight:400}
.tpk-exist{color:var(--tpk-mut)}
.tpk-exist.warn{color:var(--tpk-warn)}

@container tpk (min-width:900px){
  .tpk-chip:not(.tpk-off){height:34px;font-size:13px}
}
/* вужче 700: підпис ряду — окремим рядком над строками, «Без таймера» — у рядку заголовка праворуч */
@container tpk (max-width:699px){
  .tpk-grid{grid-template-columns:repeat(3,minmax(0,1fr)) repeat(2,minmax(0,1.15fr)) minmax(0,1.9fr) minmax(0,1.8fr)}
  .tpk-title{grid-column:1 / span 5;align-self:center;margin:0}
  .tpk-label{grid-column:1 / -1;padding:2px 0 0}
  .tpk-chip.tpk-off,.tpk-one .tpk-chip.tpk-off{grid-column:6 / -1;grid-row:1;justify-self:end;flex-direction:row;gap:6px;
    width:auto;height:30px;min-height:0;padding:0 10px;white-space:nowrap}
}
/* телефон: чотири строки в ряд, під ними ще три */
@container tpk (max-width:559px){
  .tpk-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .tpk-chip{grid-column:span 2}
  .tpk-chip.tpk-w3{grid-column:span 3}
  .tpk-chip.tpk-off,.tpk-one .tpk-chip.tpk-off{grid-column:6 / -1}
}