/* njira: общий слой оформления для СВОИХ элементов интерфейса.
 *
 * Зачем файл появился: наши окна (форма создания, подсказки тегов, окно фильтров)
 * рисовались без фона и брали цвет «как у body». В тёмной теме это случайно
 * выглядело правильно, а в светлой — форма была прозрачной, сквозь неё просвечивала
 * доска, а окно фильтров получало тёмный запасной цвет и становилось чёрным
 * на белом (t1, t5 от 22.09.2026).
 *
 * Как устроено: все цвета берутся из токенов --nj-*. Их задаёт ТЕМА (тёмная —
 * в effects.css, который вшивается в theme-<имя>.css). У штатной светлой темы
 * токенов нет, поэтому работают запасные значения прямо здесь — они светлые.
 * Значит новая тема = один блок :root с токенами, а не правка этого файла.
 *
 * Файл подключается в index.html ПОСЛЕ темы, поэтому при равной силе селектора
 * побеждает он.
 */

/* ---------- запасные (светлые) значения токенов ---------- */

:root {
  --nj-panel-d: #ffffff;              /* окно/всплывашка */
  --nj-field-d: #ffffff;              /* поле ввода */
  --nj-fg-d: #2e3440;                 /* текст */
  --nj-muted-d: #70728f;              /* подписи */
  --nj-line-d: rgba(46, 52, 64, .2);  /* рамки */
  --nj-accent-d: #008aa8;             /* главная кнопка */
  --nj-accent-fg-d: #ffffff;
  --nj-backdrop-d: rgba(46, 52, 64, .45);
  --nj-chip-d: #eceef3;               /* бейдж статуса */
  --nj-hover-d: rgba(46, 52, 64, .07);
  --nj-shadow-d: 0 20px 60px rgba(46, 52, 64, .25);
}

/* ---------- своя форма создания задачи ---------- */

#njc-back {
  background: var(--nj-backdrop, var(--nj-backdrop-d));
}

#njc {
  background: var(--nj-panel, var(--nj-panel-d));
  border: 1px solid var(--nj-line, var(--nj-line-d));
  box-shadow: var(--nj-shadow, var(--nj-shadow-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

#njc h2 {
  color: var(--nj-fg, var(--nj-fg-d));
}

#njc label {
  color: var(--nj-muted, var(--nj-muted-d));
  opacity: 1;
}

#njc input,
#njc select,
#njc textarea {
  background: var(--nj-field, var(--nj-field-d));
  border-color: var(--nj-line, var(--nj-line-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

#njc .njc-bar button {
  border-color: var(--nj-line, var(--nj-line-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

#njc .njc-go {
  background: var(--nj-accent, var(--nj-accent-d));
  color: var(--nj-accent-fg, var(--nj-accent-fg-d));
}

#njc .njc-cancel {
  border-color: var(--nj-line, var(--nj-line-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

#njc .njc-msg {
  color: var(--nj-muted, var(--nj-muted-d));
}

/* ---------- подсказки тегов ---------- */

.njff-tags {
  background: var(--nj-panel, var(--nj-panel-d)) !important;
  border-color: var(--nj-line, var(--nj-line-d));
  box-shadow: var(--nj-shadow, var(--nj-shadow-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

.njff-tags div:hover,
.njff-tags div.njff-on {
  background: var(--nj-hover, var(--nj-hover-d));
}

/* ---------- окно фильтров ---------- *
 * Панель фильтров у Taiga живёт в боковой колонке и своего фона почти не имеет.
 * Мы показываем её всплывающим окном над доской, поэтому фон задаём сами —
 * токеном, а не «цветом body» (в светлой теме он прозрачный, и раньше подставлялся
 * тёмный запасной цвет). */

.kanban-filter[data-njf-popup],
.taskboard-filter[data-njf-popup],
.backlog-filter[data-njf-popup] {
  background: var(--nj-panel, var(--nj-panel-d)) !important;
  border: 1px solid var(--nj-line, var(--nj-line-d)) !important;
  box-shadow: var(--nj-shadow, var(--nj-shadow-d));
  color: var(--nj-fg, var(--nj-fg-d));
}

.kanban-filter[data-njf-popup] .custom-filters-title,
.taskboard-filter[data-njf-popup] .custom-filters-title,
.backlog-filter[data-njf-popup] .custom-filters-title {
  color: var(--nj-fg, var(--nj-fg-d));
}

/* ---------- бейдж статуса на карточках и в строках ---------- */

.njf-st {
  align-items: center;
  background: var(--nj-chip, var(--nj-chip-d));
  border-radius: 8px;
  color: var(--nj-fg, var(--nj-fg-d));
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  gap: 4px;
  letter-spacing: .01em;
  line-height: 14px;
  margin-left: 6px;
  max-width: 108px;
  opacity: .85;
  overflow: hidden;
  padding: 0 6px 0 4px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.njf-st i {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

/* в строке истории на доске спринта и в бэклоге бейдж стоит отдельно */
.njf-st.njf-st-row {
  margin-left: 8px;
}

/* ---------- поле «Приоритет» в карточке ---------- */

.njp-box {
  font-size: 13px;
  margin: 0 0 14px;
}

.njp-box .njp-k {
  color: var(--nj-muted, var(--nj-muted-d));
  display: block;
  font-size: 11px;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.njp-box select {
  background: var(--nj-field, var(--nj-field-d));
  border: 1px solid var(--nj-line, var(--nj-line-d));
  border-radius: 4px;
  color: var(--nj-fg, var(--nj-fg-d));
  font-size: 13px;
  padding: 5px 6px;
  width: 100%;
}

.njp-box select:disabled {
  opacity: .45;
}

.njp-note {
  color: var(--nj-muted, var(--nj-muted-d));
  font-size: 11px;
  line-height: 1.3;
  margin: 4px 0 0;
}

.njp-note.njp-bad {
  color: #d04437;
}

.njp-dot {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-right: 6px;
}

/* ---------- статус в карточке: не теряться серым значком ---------- *
 * Жалоба «нельзя выставить статус через саму задачу» (t4): кнопка статуса есть,
 * но выглядит как неактивная подпись, и её не замечают. Делаем её похожей на
 * кнопку — с рамкой, курсором-рукой и заметной стрелкой. */

.detail-status .detail-status-inner,
.status-data .status-data-inner {
  border: 1px solid var(--nj-line, var(--nj-line-d));
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
}

.detail-status .detail-status-inner:hover,
.status-data .status-data-inner:hover {
  background: var(--nj-hover, var(--nj-hover-d));
}