/* Сводка поручений в боковой панели — видна с любой страницы.
 *
 * Отдельным файлом, а не приписком к side_panel.css: панель общая для семи
 * страниц, её правят работники, и две руки в одном файле затирают работу.
 *
 * Всё оформление токенами: своё число вместо токена ловит /api/design/discord.
 */

.side-work-card {
  margin: var(--sp-2) var(--sp-2) 0;
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  /* Блок вставляется в поток панели, а не поверх неё: иначе он наезжает
     на карточку Маэстро внизу — так и вышло при первой попытке. */
  position: relative;
  flex: 0 0 auto;
}

.side-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  cursor: pointer;
  min-height: 34px;
  padding: var(--sp-1) 0;
  box-sizing: border-box;
}

.side-work-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.side-work-wave {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.side-work-body[hidden] { display: none; }

/* Даже раскрытым блок не выталкивает карточку Маэстро за край:
   тело панели не прокручивается, потому предел ставим себе сами. */
.side-work-body {
  max-height: 40vh;
  overflow-y: auto;
}

.side-work-nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

/* Пилюля здесь законна: один ряд, высота заведомо меньше сорока точек. */
.side-work-num {
  padding: 1px var(--sp-1);
  border-radius: var(--r-full);
  background: var(--bg-code);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: 1.7;
  white-space: nowrap;
}

.side-work-num.is-run    { background: var(--accent-primary-alpha-15); color: var(--accent-primary); }
.side-work-num.is-ok     { background: var(--green-alpha-12); color: var(--green); }
.side-work-num.is-reject { background: var(--red-alpha-12);   color: var(--red); }

.side-work-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  min-width: 0;
}

.side-work-face {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-code);
}

.side-work-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Имена граждан длинные — пусть переносятся, а не прячутся многоточием.
   Маэстро уже жаловался на «Ловец Дв…» вместо имени. */
.side-work-name {
  font-size: var(--fs-xs);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.side-work-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.side-work-empty {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.side-work-more {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--accent-primary);
  text-decoration: none;
}

.side-work-more:hover { text-decoration: underline; }

/* Телефон: пол читаемости 12px, мельче Маэстро не разбирает. */
@media (max-width: 600px) {
  .side-work-title,
  .side-work-wave,
  .side-work-num,
  .side-work-name,
  .side-work-sub,
  .side-work-empty,
  .side-work-more { font-size: var(--fs-sm); }
}

/* Приёмка. Отличается от работы цветом, а не только словом: Маэстро смотрит
   панель боковым зрением и должен различать «пишут» и «судят» не читая. */
.side-work-row.is-judging { opacity: 0.92; }

.side-work-row.is-judging .side-work-name { color: var(--amber); }

/* Пилюля законна: один ряд, высота заведомо меньше сорока точек. */
.side-work-num.is-judge {
  background: var(--amber-alpha-12);
  color: var(--amber);
}