/* ---------- Палитра ---------- */

:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --text: #17181a;
  --muted: #75777c;
  --line: #e5e5e1;
  --line-strong: #d3d3ce;
  --accent: #2e7d5b;
  --accent-soft: #e8f2ed;
  --warn: #b46b1f;
  --btn-bg: #17181a;
  --btn-text: #fbfbfa;
  --focus: #2e7d5b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121213;
    --surface: #191a1b;
    --text: #ececeb;
    --muted: #9a9a9e;
    --line: #2a2b2d;
    --line-strong: #3a3b3e;
    --accent: #57ab86;
    --accent-soft: #1c2b25;
    --warn: #d69b52;
    --btn-bg: #ececeb;
    --btn-text: #121213;
    --focus: #57ab86;
  }
}

/* ---------- Основа ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибут hidden должен прятать элемент всегда. Без !important его перебивают
   правила вроде .field { display: block } — и спрятанное поле остаётся видимым. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 72px) 20px 96px;
}

/* История шире рабочего экрана: в строке записи три колонки, и на 560px
   длинные названия задач ужимались бы в два-три слова. */
.app--wide { max-width: 680px; }

/* ---------- Шапка ---------- */

.head { text-align: center; margin-bottom: clamp(28px, 6vw, 48px); }

.head__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.head__subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Поля ---------- */

.field { display: block; }

.field__label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.field__input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}

.field__input::placeholder { color: var(--muted); opacity: 0.75; }
.field__input:hover { border-color: var(--muted); }

/* ---------- Кнопка и ошибки ---------- */

.error {
  margin: 16px 0 0;
  text-align: center;
  color: var(--warn);
  font-size: 13px;
}

.action {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: 13px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}

.action:hover { opacity: 0.85; }

/* Кнопка на время запроса выключена — это должно быть видно. */
.action:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Вход ---------- */

.app--narrow { max-width: 380px; }

.auth {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px 24px;
}

.auth__hint {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.auth__form .field + .field { margin-top: 14px; }
.auth__form .action { margin-top: 20px; }

/* ---------- Полоса вошедшего ---------- */

/* Полоса переносится на вторую строку, когда всё в одну не помещается.
   Без переноса на телефоне (375px) ссылки разделов и «Выйти» забирали всю
   ширину, а имя вошедшего сжималось до нескольких точек. Теперь имя и
   «Выйти» уходят вниз, к правому краю, и имя сокращается многоточием только
   там, если оно длиннее оставшегося места. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  margin-bottom: 20px;
  min-height: 28px;
}

.topbar__name {
  color: var(--muted);
  font-size: 13px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ссылки на разделы — слева, имя и «Выйти» остаются справа: margin-right
   отжимает их к краю, не меняя выравнивания остальной полосы. */
.topbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

/* Название раздела не разламывается на две строки («Мои / задачи»). */
.navlink {
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.navlink:hover { color: var(--text); }

/* Раздел, в котором человек сейчас находится. */
.navlink[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.linkbtn {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.linkbtn:hover { color: var(--text); border-color: var(--muted); }

/* ---------- Разделы рабочего экрана ---------- */

.section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 20px;
}

/* ---------- Секундомер ---------- */

.stopwatch { margin-bottom: 20px; }

/* Пока таймер идёт, рамка блока цветная — видно с первого взгляда. */
.stopwatch[data-state="running"] { border-color: var(--accent); }

.stopwatch__idle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.stopwatch__task {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* tabular-nums — все цифры одной ширины, и время не дёргается вбок при
   смене секунд. */
.stopwatch__time {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: clamp(40px, 12vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stopwatch .stopwatch__stop { margin-top: 14px; }

.stopwatch__message {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Пустое сообщение не занимает места, но остаётся на странице — почему,
   сказано в index.html. */
.stopwatch__message:empty {
  margin: 0;
  padding: 0;
  border: none;
}

/* ---------- Оборванные таймеры ---------- */

/* Рамка и заголовок цвета предупреждения: эти записи ждут, что человек
   их поправит, и не должны теряться среди задач. */
.abandoned {
  margin-top: 20px;
  border-color: var(--warn);
}

.abandoned .section-title { color: var(--warn); }

.abandoned__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abandoned__item + .abandoned__item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Пометка и название в одну строку; длинное название переносится, а
   пометка остаётся целой. */
.abandoned__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.abandoned__task {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.abandoned-mark {
  flex: none;
  padding: 0 8px;
  border: 1px solid var(--warn);
  border-radius: 999px;
  color: var(--warn);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.abandoned__text {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* Ссылка на страницу правок внизу блока — там, где человек дочитал, что
   с записью что-то не так. */
.panel__link {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- Записи времени: «Сегодня» и история ---------- */

.today { margin-bottom: 20px; }

/* Заголовок блока и ссылка «Вся история» в одну строку. */
.today__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.today__head .section-title { margin-bottom: 14px; }

.today__note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Три колонки: время — задача с пометками — длительность. Время и итог
   одинаковой ширины у всех строк, поэтому столбец читается сверху вниз. */
.entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.entry:last-child { border-bottom: none; }

/* tabular-nums — цифры одной ширины, и время в столбце не разъезжается. */
.entry__time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry__body {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.entry__task { overflow-wrap: anywhere; }

.entry__duration {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}

/* Пометка «вручную»: тише остальных — это не предупреждение, а уточнение. */
.entry-mark {
  flex: none;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Пометка «идёт» у записи — мельче, чем у задачи: строк в списке много. */
.entry .running-mark,
.entry .abandoned-mark {
  font-size: 12px;
  padding: 0 8px;
}

/* Оборванная запись: полоса слева цвета предупреждения. Её часы не входят
   в сумму, пока человек не поправит запись, — и она не должна выглядеть
   как остальные строки (PLAN.md, п.4.4). */
.entry--abandoned {
  padding-left: 10px;
  border-left: 3px solid var(--warn);
}

/* Правки и дата правки — отдельным рядом под записью, во всю ширину строки:
   кнопки не должны сжимать название задачи на узком экране. */
.entry__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Дата правки прижата влево, кнопки — к правому краю. */
.entry__edited {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}

/* Кнопки правки ниже обычных: их много на экране, и в полную высоту они
   превратили бы список записей в список кнопок. На телефоне высота
   возвращается к 44px — ниже палец не попадает (см. раздел «Телефон»). */
.entry__actions .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

/* ---------- Форма правок в истории ---------- */

.entry-form { margin-bottom: 20px; }

/* Тот же вид у подсказки в форме смены пароля на рабочем экране: своих
   правил ей не нужно, это такая же тихая строка над полями. */
.entry-form__hint,
.password-form__hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.entry-form .field + .field,
.entry-form__times + .field { margin-top: 14px; }

/* Начало и конец рядом: это одна мысль «с такого-то по такое-то». На узком
   экране столбцы схлопываются в один. */
.entry-form__times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

/* И тот же — у ответа «пароль сменён»: удачный итог, а не ошибка, поэтому
   цвет приложения, а не предупреждения. Ошибки показываются общим
   сообщением внизу экрана. */
.entry-form__preview,
.password-form__result {
  margin: 14px 0 0;
  color: var(--accent);
  font-size: 14px;
}

.entry-form__preview:empty,
.password-form__result:empty { margin: 0; }

.entry-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- Итоги ---------- */

.today__totals {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.total {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.total--big {
  font-size: clamp(24px, 7vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.total--week {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
}

.total__hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.total__hint--warn { color: var(--warn); }

.totals__list {
  margin: 14px 0 0;
  padding: 0;
}

.totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.totals__name {
  color: var(--muted);
  font-size: 14px;
}

.totals__value {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Выбор периода ---------- */

.period { margin-bottom: 20px; }

.period__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Стрелки и подпись периода: подпись занимает всё место между ними. */
.period__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.period__arrow {
  flex: none;
  min-width: 44px;
  padding: 0 12px;
}

.period__label {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.period__custom { margin-top: 16px; }
.period__custom .field + .field { margin-top: 12px; }
.period__custom .action { margin-top: 14px; }

/* ---------- История: дни и задачи ---------- */

.history { margin-top: clamp(28px, 6vw, 40px); }

.day + .day { margin-top: 22px; }

.day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
}

.day__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.day__total {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.task-totals {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.task-total:last-child { border-bottom: none; }

.task-total__title { overflow-wrap: anywhere; }

.task-total__count {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.task-total__seconds {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Форма новой задачи ---------- */

.task-form .field + .field { margin-top: 14px; }
.task-form .action { margin-top: 18px; }

.field__input--area {
  display: block;
  min-height: 76px;
  resize: vertical;
}

.tasks { margin-top: clamp(32px, 7vw, 48px); }

.tasks__note {
  margin: 0;
  padding: 20px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ---------- Задачи ---------- */

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.task:last-child { border-bottom: none; }

.task__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* overflow-wrap: anywhere — длинное слово без пробелов переносится, а не
   распирает экран телефона вбок. */
.task__title {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* pre-wrap сохраняет переносы строк, которые человек поставил в описании. */
.task__description {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* У задачи с идущим таймером справа две пометки. Если рядом с названием
   им тесно, они переходят на следующую строку, а не сжимают название
   до пары букв на узком экране. */
.task--running .task__head { flex-wrap: wrap; }

.task__marks {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.running-mark {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.task__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge[data-status="in_progress"] {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.badge[data-status="done"] { color: var(--text); }

.badge[data-status="archived"]::before {
  background: transparent;
  border: 1px solid currentColor;
}

/* Кнопки у задачи. Высота 44px — палец попадает с первого раза. */
.btn {
  appearance: none;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s;
}

.btn:hover { border-color: var(--muted); }

.btn--primary {
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--btn-text);
}

.btn--primary:hover { opacity: 0.85; }

/* «Стоп» у задачи — в цвет идущего таймера, чтобы не спутать со «Старт». */
.btn--stop,
.btn--stop:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.btn--stop:hover { opacity: 0.85; }

/* ---------- Свёрнутые разделы: готовые и архив ---------- */

.group {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.group__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.group__summary::-webkit-details-marker { display: none; }

/* Свой треугольник: стандартный пропадает, когда у summary display: flex. */
.group__summary::before {
  content: "";
  flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}

.group[open] > .group__summary::before { transform: rotate(90deg); }
.group__summary:hover { color: var(--text); }

/* ---------- Админка: сотрудники ---------- */

.new-user__hint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}

/* Временный пароль. Рамка в цвет предупреждения: блок нельзя пролистать
   мимо — второй раз пароль не покажут. */
.secret {
  margin-bottom: 20px;
  border-color: var(--warn);
}

.secret .section-title { color: var(--warn); }

.secret__who {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Моноширинный шрифт и крупный кегль: пароль переписывают глазами, и «l»,
   «1» и «I» в таком шрифте отличаются друг от друга.
   user-select: all — щелчок выделяет пароль целиком, если кнопка копирования
   не сработала. */
.secret__value {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  user-select: all;
}

.secret__warn {
  margin: 12px 0 0;
  color: var(--warn);
  font-size: 14px;
}

.secret__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.secret__hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.secret__hint:empty { margin: 0; }

.people { margin-top: clamp(32px, 7vw, 48px); }

.people__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.person {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.person:last-child { border-bottom: none; }

/* Пометок рядом с именем может быть несколько сразу («администратор» плюс
   «пароль временный»), поэтому строка переносится, а не сжимает имя. */
.person__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.person__name {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.person__marks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.role-mark {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.blocked-mark {
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.person__email,
.person__meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.person__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- Админка: вкладки ---------- */

/* Админка шире остальных страниц: таблицы отчёта в семь колонок на 680px не
   помещаются. Вкладка «Сотрудники» при этом остаётся прежней ширины — форма
   во всю ширину большого экрана читалась бы хуже. */
.app--admin { max-width: 960px; }

.admin-tab--narrow {
  max-width: 640px;
  margin: 0 auto;
}

/* Вкладки — подчёркнутые ссылки в одну линию, по центру, как заголовок. */
.tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text); }

/* Открытая сейчас вкладка. */
.tab[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------- Админка: отчёт ---------- */

/* Свой период: два дня и кнопка в одну строку. На телефоне — столбиком
   (см. раздел «Телефон»). */
.report__custom {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}

.report__range {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}

.report__zone {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.report__back { margin-top: 20px; }

.report__totals { margin-top: 20px; }

.report-block { margin-top: clamp(28px, 6vw, 40px); }

.report__hint {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.report__footnote {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.report__footnote--warn { color: var(--warn); }

/* Прокрутка вбок — внутри рамки таблицы, а не у всей страницы: на телефоне
   семь колонок в ширину экрана не лягут, а сдвигать вбок весь экран вместе
   с шапкой и кнопками неудобно. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Ниже этой ширины колонки не сжимаются, а таблица уезжает в прокрутку:
   иначе «12 ч 05 мин» разламывалось бы на три строки. */
.report-table--people { min-width: 760px; }
.report-table--tasks { min-width: 620px; }
.report-table--person-tasks { min-width: 480px; }
.report-table--entries { min-width: 680px; }

.report-table th,
.report-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.report-table tbody tr:last-child > * { border-bottom: none; }

.report-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: bottom;
}

/* Заголовки строк (имя, задача, день) — обычным весом: жирным выделены
   только сами имена-ссылки. */
.report-table tbody th { font-weight: 400; }

/* Числа — вправо и цифрами одной ширины: столбец читается сверху вниз. */
.report-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.report-table thead .num { white-space: normal; }

/* Длинное название задачи или имя без пробелов переносится, а не распирает
   колонку. */
.report-table__who,
.report-table__title {
  min-width: 160px;
  overflow-wrap: anywhere;
}

/* Имя в таблице сотрудников не уезжает при прокрутке вбок: иначе на
   телефоне непонятно, чьи это цифры. */
.report-table--people .report-table__who,
.report-table--people thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}

.report-row--link { cursor: pointer; }
.report-row--link:hover > * { background: var(--bg); }

.report__person-link {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.report__person-link:hover { text-decoration-color: currentColor; }

.report__email {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.report__marks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
  vertical-align: 1px;
}

.report__marks .running-mark,
.report__marks .blocked-mark {
  font-size: 12px;
  padding: 0 8px;
}

/* Две строки в ячейке: главное число и уточнение под ним. */
.report__main { display: block; }

.report__sub {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.report__muted { color: var(--muted); }

/* Предупреждение «итог без учёта…» стоит над самим итогом — отступ снизу. */
.report__not-counted { margin: 0 0 8px; }

/* Оборванные часы — цветом предупреждения: в итог они не входят. Уточнение
   под ними того же цвета, иначе подпись казалась бы про другое. */
.report__warn,
.report__warn .report__sub { color: var(--warn); }

/* Записи сотрудника. */
.report-table__day,
.report-table__time {
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.report-table__marks .entry-mark,
.report-table__marks .running-mark,
.report-table__marks .abandoned-mark {
  display: inline-block;
  margin: 0 6px 4px 0;
  font-size: 12px;
  padding: 0 8px;
}

/* Новый день — линия заметнее: список читается как дневник. */
.report-row--new-day > * { border-top: 1px solid var(--line-strong); }

/* Оборванная запись — полоса слева цвета предупреждения, как в «Истории». */
.report-row--abandoned > :first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* Шапка разворота: имя и пометки в одну строку, адрес почты под ними. */
.report__person-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.report__person-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.report__person-email {
  margin: 2px 0 12px;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* ---------- Админка: журнал ---------- */

/* Что показать: две даты в первом ряду, сотрудник и тип события во втором,
   кнопка — под ними. На телефоне — столбиком (см. раздел «Телефон»). */
.audit__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}

/* Без min-width: 0 выпадающий список растягивается по самому длинному
   варианту («Анна Смирнова (anna.smirnova@…) — заблокирован») и выталкивает
   страницу вбок на узком экране. */
.audit__filters .field { min-width: 0; }

.audit__submit { justify-self: start; }

/* Рамка вокруг таблицы — как у отчёта, но без прокрутки вбок: три колонки
   умещаются в любую ширину, длинное переносится (overflow-wrap ниже).
   overflow-x: auto — только страховка: даже если что-то не перенесётся,
   прокручиваться будет рамка, а не вся страница. */
.audit-frame {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

.audit-table th,
.audit-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.audit-table tbody tr:last-child > * { border-bottom: none; }

.audit-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Время — узкая колонка «10:05», кто — примерно треть, остальное — что
   произошло: там самые длинные строки. */
.audit-table__time {
  width: 72px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.audit-table__who { width: 30%; }

/* Строка-разделитель с днём: события дня идут под ней. */
.audit-day th {
  padding-top: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.audit__name,
.audit__main { display: block; }

.audit__name { font-weight: 500; }

/* «Система» — действие самого сервера, а не человека: другим цветом, чтобы
   не спутать с именем. */
.audit__system {
  display: block;
  color: var(--muted);
  font-style: italic;
}

.audit__sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

/* То, на что админу стоит обратить внимание: блокировка, попытка войти в
   заблокированную учётку, оборванный таймер. Полоса слева и цвет
   предупреждения у главной строки. */
.audit-row--warn > :first-child { box-shadow: inset 3px 0 0 var(--warn); }
.audit-row--warn .audit__main { color: var(--warn); }

.audit__more { margin-top: 12px; }

/* ---------- Ошибки на рабочем экране ---------- */

/* Прилипает к низу экрана: ошибку видно, даже если кнопку нажали в конце
   длинного списка. */
.notice {
  position: sticky;
  bottom: 16px;
  z-index: 1;
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--warn);
  border-radius: 12px;
  background: var(--surface);
  color: var(--warn);
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* ---------- Телефон ---------- */

@media (max-width: 600px), (pointer: coarse) {
  /* Кнопка «Выйти» тоже должна попадаться пальцем. */
  .linkbtn {
    min-height: 44px;
    padding: 0 16px;
  }

  /* Шрифт полей меньше 16px заставляет iPhone увеличивать страницу при
     каждом нажатии на поле. */
  .field__input { font-size: 16px; }

  /* Строка записи разворачивается в два ряда: сверху время и длительность,
     под ними задача с пометками. Иначе на телефоне название задачи сжимается
     до пары слов, а время и итог всё равно не переносятся. */
  .entry { grid-template-columns: auto minmax(0, 1fr); }
  .entry__time { grid-area: 1 / 1; }
  .entry__duration { grid-area: 1 / 2; }
  .entry__body { grid-area: 2 / 1 / 3 / 3; }

  /* То же в разрезе по задачам: название во всю ширину, числа под ним. */
  .task-total { grid-template-columns: minmax(0, 1fr) auto; }
  .task-total__title { grid-area: 1 / 1 / 2 / 3; }
  .task-total__count { grid-area: 2 / 1; }
  .task-total__seconds { grid-area: 2 / 2; text-align: right; }

  /* Кнопки правки на телефоне — обычной высоты: 34px пальцем не попасть. */
  .entry__actions .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  /* Начало и конец друг под другом: два поля времени в ряд на узком экране
     сжимаются так, что в них не попасть. */
  .entry-form__times { grid-template-columns: 1fr; }

  /* Свой период в отчёте — тоже столбиком, кнопка во всю ширину. */
  .report__custom { grid-template-columns: 1fr; }

  /* Колонка с именем закреплена при прокрутке вбок — пусть занимает меньше
     места, чтобы цифрам рядом оставался хоть какой-то простор. */
  .report-table__who,
  .report-table__title { min-width: 130px; }
}

/* ---------- Журнал на узком экране ---------- */

/* Отдельно от блока «Телефон» выше: там стоит ещё и «палец вместо мыши»,
   а на планшете таблица журнала в три колонки прекрасно помещается.
   Здесь важна только ширина. */
@media (max-width: 600px) {
  .audit__filters { grid-template-columns: minmax(0, 1fr); }
  .audit__submit { justify-self: stretch; }

  /* Строка таблицы складывается в карточку: сверху время и кто, под ними —
     что произошло во всю ширину. Прокручивать вбок нечего. Шапка таблицы
     на экране не нужна (подписи и так понятны по виду строки), но остаётся
     для программ чтения с экрана. */
  .audit-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .audit-table,
  .audit-table tbody { display: block; }

  .audit-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }

  .audit-table tbody tr:last-child { border-bottom: none; }

  .audit-table th,
  .audit-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  .audit-table__what {
    grid-column: 1 / -1;
    margin-top: 6px;
  }

  .audit-day { background: var(--bg); }
  .audit-day th { grid-column: 1 / -1; padding: 6px 0 0; background: none; }

  /* Полоса «обратите внимание» — у всей карточки, а не только у времени. */
  .audit-row--warn { box-shadow: inset 3px 0 0 var(--warn); }
  .audit-row--warn > :first-child { box-shadow: none; }
}