/* TimeTracker — стили каркаса. Дизайн-референс — легаси «Time to Quad»
   (LEGACY_SYSTEM_STUDY §1): тёмно-зелёный #065439, фон #EEF7F2,
   сайдбар 224px, Bootstrap 5. Шрифт — системный стек (Figtree легаси
   не вендорим: внешние загрузки запрещены, см. VENDORED.md). */

:root {
  --tt-green: #065439;
  --tt-green-dark: #04402c;
  --tt-green-soft: rgba(6, 84, 57, .08);
  --tt-bg: #EEF7F2;
  --tt-sidebar-w: 224px;
}

body {
  background: var(--tt-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Bootstrap primary → фирменный зелёный */
.btn-primary {
  --bs-btn-bg: var(--tt-green);
  --bs-btn-border-color: var(--tt-green);
  --bs-btn-hover-bg: var(--tt-green-dark);
  --bs-btn-hover-border-color: var(--tt-green-dark);
  --bs-btn-active-bg: var(--tt-green-dark);
  --bs-btn-active-border-color: var(--tt-green-dark);
  --bs-btn-disabled-bg: var(--tt-green);
  --bs-btn-disabled-border-color: var(--tt-green);
}
.btn-outline-primary {
  --bs-btn-color: var(--tt-green);
  --bs-btn-border-color: var(--tt-green);
  --bs-btn-hover-bg: var(--tt-green);
  --bs-btn-hover-border-color: var(--tt-green);
  --bs-btn-active-bg: var(--tt-green);
  --bs-btn-active-border-color: var(--tt-green);
  --bs-btn-disabled-color: var(--tt-green);
  --bs-btn-disabled-border-color: var(--tt-green);
}
a { color: var(--tt-green); }
.form-check-input:checked { background-color: var(--tt-green); border-color: var(--tt-green); }
.form-control:focus, .form-check-input:focus, .form-select:focus {
  border-color: var(--tt-green);
  box-shadow: 0 0 0 .25rem rgba(6, 84, 57, .15);
}
.text-brand { color: var(--tt-green); }

/* ------------------------------------------------------------------ */
/* Экраны аутентификации (вход / восстановление / онбординг)          */
/* ------------------------------------------------------------------ */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(6, 84, 57, .12);
  padding: 2.2rem 2.2rem 1.8rem;
}
.auth-card.auth-card-wide { max-width: 560px; }
.auth-brand {
  color: var(--tt-green);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: .2px;
  text-align: center;
  margin-bottom: .2rem;
}
.auth-sub {
  text-align: center;
  color: #5c6d64;
  margin-bottom: 1.5rem;
}

/* Поле ввода recovery-кода */
.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Карточка recovery-кода (экран + печать)                            */
/* ------------------------------------------------------------------ */

.code-card {
  border: 2px solid var(--tt-green);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  background: #fff;
}
.code-card .code-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.75;
  word-break: break-all;
  color: #111;
}
.code-card .code-meta { color: #5c6d64; font-size: .9rem; }
.code-card .code-title {
  color: var(--tt-green);
  font-weight: 700;
  margin-bottom: .6rem;
}

/* Печать: видна только печатная зона с карточкой кода */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; padding: 2rem; }
  .code-card { box-shadow: none; }
}

/* ------------------------------------------------------------------ */
/* Каркас приложения: сайдбар + рабочая область                       */
/* ------------------------------------------------------------------ */

.tt-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--tt-sidebar-w);
  background: var(--tt-green);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.tt-sidebar .brand {
  padding: 1.25rem 1.1rem 1rem;
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.25;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.tt-sidebar .brand img { max-height: 30px; max-width: 100%; }
.tt-sidebar .nav { padding: .8rem .55rem; flex: 0 0 auto; }
.tt-sidebar .nav-link {
  color: rgba(255, 255, 255, .82);
  border-radius: 8px;
  padding: .48rem .7rem;
  margin-bottom: .15rem;
  font-size: .95rem;
}
.tt-sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tt-sidebar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: 600; }
.tt-sidebar .sidebar-spacer { flex: 1 1 auto; }

/* Блок пользователя внизу сайдбара */
.tt-userbox {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: .9rem 1.1rem 1rem;
  font-size: .9rem;
}
.tt-userbox .u-name { font-weight: 600; }
.tt-userbox .u-login { color: rgba(255, 255, 255, .65); font-size: .8rem; }
.tt-userbox .btn {
  --bs-btn-color: rgba(255, 255, 255, .85);
  --bs-btn-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
  font-size: .82rem;
}

.tt-userbox .userbox-click { cursor: pointer; }
.tt-userbox .userbox-click:hover .u-name { text-decoration: underline; }

.tt-main {
  margin-left: var(--tt-sidebar-w);
  min-height: 100vh;
  padding: 1.6rem 2rem 2.5rem;
}

/* Страница «Профиль»: вкладки в одну строку с прокруткой на узких
   экранах, формы не расползаются на всю ширину десктопа */
.profile-tabs { overflow-x: auto; overflow-y: hidden; }
.profile-tabs .nav-link { white-space: nowrap; color: var(--tt-green); }
.profile-tabs .nav-link.active { color: #1a2b23; font-weight: 600; }
.profile-form { max-width: 640px; }

/* Узкие экраны: сайдбар из фиксированной колонки становится шапкой,
   рабочая область — во всю ширину (иначе контенту остаётся ~150px) */
@media (max-width: 768px) {
  .tt-sidebar { position: static; width: auto; }
  .tt-sidebar .sidebar-spacer { display: none; }
  .tt-main { margin-left: 0; min-height: auto; padding: 1rem 1rem 2rem; }
  .tt-card { padding: 1rem; }
}

/* Переключатель контекста фирм [A | B | Все] */
.firm-switch .btn { min-width: 7rem; }
.firm-switch .btn .lock { opacity: .8; margin-left: .25rem; }

/* Бейджи состояний членств */
.badge-locked { background: #b23b3b; }
.badge-noenv  { background: #b07d1f; }

/* Белая карточка-контейнер вкладок (таблицы записей, админ) */
.tt-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(6, 84, 57, .07);
}
.tt-card .table thead th {
  color: var(--tt-green);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom-color: rgba(6, 84, 57, .25);
  white-space: nowrap;
}
.tt-card .table td { font-size: .93rem; }
.entry-desc { max-width: 26rem; overflow-wrap: anywhere; }
.row-inactive td { opacity: .5; }

/* Бейджи статусов записей */
.badge-pending  { background: #f4ede0; color: #8a6d1f; }
.badge-excluded { background: #f6e3e3; color: #8a2626; }

/* Статус записи — цветом строки (решение пользователя, 2026-07-24):
   утверждённая — бледно-зелёный фон; неоплачиваемая — белый фон и
   светло-серый текст (утверждение фон неоплачиваемой не меняет). */
.row-approved > td { background-color: #e4f1ea; }
.row-unbillable > td { color: #98a2ac; }

/* Правка записи — кликом по строке (кнопок ✏️🗑 в таблицах больше нет) */
.row-clickable { cursor: pointer; }

/* Матрица ставок (решение пользователя, 2026-07-25): источник ставки —
   цветом ячейки: белая — версия дефолтных, бледно-жёлтая — установлена
   вручную (звено проекта/клиента), красноватая — ставки нет.
   Те же классы красят образцы в легенде под матрицей. */
td.rate-manual, span.rate-manual { background-color: #fdf6dc; }
td.rate-missing, span.rate-missing { background-color: #faeeee; color: #9a7b7b; }

/* Лента «Записи» (решение 2026-07-24): фильтры — двумя колонками слева
   (участник/клиент/проект и период/статус/сброс), окно суммирования
   выборки — справа */
.feed-filters { flex: 0 1 auto; }
.feed-filter-col { width: 230px; }
.feed-side { flex: 1 1 260px; max-width: 400px; margin-left: auto; }
.feed-summary {
  background: #f7fbf9;
  border: 1px solid rgba(6, 84, 57, .18);
  border-radius: .5rem;
  padding: .7rem .9rem;
  font-size: .9rem;
}

/* Лента фирмы: исключённые из отчёта записи — зачёркнуты (легаси §5.3.1) */
.row-excluded td { opacity: .42; text-decoration: line-through; }
.row-excluded td.cell-status { text-decoration: none; }

/* Уведомления (решение 2026-07-24): непрочитанные выделены фоном и
   точкой, читаются кликом; текст записи до/после правки — блоками */
.notif {
  border: 1px solid rgba(6, 84, 57, .12);
  border-radius: .5rem;
  padding: .7rem .9rem;
  margin-bottom: .6rem;
  background: #fff;
}
.notif-unread {
  background: #f2f9f5;
  border-color: rgba(6, 84, 57, .35);
  cursor: pointer;
}
.notif-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--tt-green);
  margin-right: .45rem;
  vertical-align: middle;
}
.notif-diff { margin-top: .45rem; font-size: .93rem; }
.notif-before {
  background: #faf3f3;
  border-radius: .35rem;
  padding: .3rem .55rem;
  margin-bottom: .3rem;
}
.notif-after {
  background: #eef6f1;
  border-radius: .35rem;
  padding: .3rem .55rem;
}

/* Пилюли разделов админа */
.nav-pills .nav-link { color: var(--tt-green); }
.nav-pills .nav-link.active { background: var(--tt-green); }

/* Двуязычная карточка клиента (модалка мини-админа) */
.card-lang {
  border: 1px solid rgba(6, 84, 57, .2);
  border-radius: 10px;
  padding: .8rem 1rem;
}
.card-lang .card-lang-title {
  color: var(--tt-green);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .5rem;
}

/* Заготовка вкладки */
.tab-stub {
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  color: #5c6d64;
  border: 1px dashed rgba(6, 84, 57, .35);
}
.tab-stub h5 { color: var(--tt-green); }

/* ------------------------------------------------------------------ */
/* «Моё время» — стат-карточки, бары, heatmap (паритет легаси §5.1)   */
/* ------------------------------------------------------------------ */

.mytime-loading { color: #5c6d64; font-size: .9rem; padding: 40px 0; text-align: center; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 1rem;
}
.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(6, 84, 57, .07);
}
.stat-card-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #5c6d64;
  margin-bottom: 8px;
}
.stat-card-value {
  font-size: 26px;
  font-weight: 700;
  color: #1a2b23;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card-big { font-size: 22px; font-weight: 700; color: #1a2b23; }
.stat-card-sub { font-size: 12px; color: #5c6d64; margin-top: 2px; }

/* «Сегодня»: зелёное до нормы, оранжевая зона переработки, риска нормы */
.today-bar-wrap {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: #DDE9E3;
  margin-top: 10px;
}
.today-bar-green {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 99px;
  background: var(--tt-green);
  transition: width .4s;
}
.today-bar-orange {
  position: absolute; top: 0; bottom: 0;
  border-radius: 0 99px 99px 0;
  background: #F59E0B;
  transition: width .4s;
}
.today-bar-target {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  background: #0A7A52;
  border-radius: 2px;
}

/* «Прогресс к цели месяца» */
.goal-bar-wrap { height: 8px; border-radius: 99px; background: #DDE9E3; overflow: hidden; margin-top: 10px; }
.goal-bar-fill { height: 100%; border-radius: 99px; background: var(--tt-green); transition: width .4s; }

/* «Клиенты (текущий месяц)» — топ-6 горизонтальных баров */
.client-dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.client-dist-name {
  font-size: 13px; color: #1a2b23; width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.client-dist-bar-bg { flex: 1; height: 7px; border-radius: 99px; background: #DDE9E3; overflow: hidden; }
.client-dist-bar-fill { height: 100%; border-radius: 99px; }
.client-dist-pct { font-size: 12px; color: #5c6d64; width: 36px; text-align: right; flex-shrink: 0; }
.stat-firm-badge {
  font-size: 10px; font-weight: 600; color: var(--tt-green);
  background: var(--tt-green-soft);
  border-radius: 6px; padding: 1px 5px;
  flex-shrink: 0; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Heatmap 8 недель (GitHub-стиль 7×8) */
.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  gap: 3px;
  width: max-content;
}
.hm-cell { width: 14px; height: 14px; border-radius: 3px; cursor: default; transition: transform .1s; }
.hm-cell:hover { transform: scale(1.25); }
.heatmap-day-labels {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  margin-right: 6px;
  flex-shrink: 0;
}
.hm-day-label { font-size: 9.5px; color: #5c6d64; line-height: 14px; text-align: right; }
.hm-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.hm-legend span { font-size: 11px; color: #5c6d64; }
.hm-legend-swatch { width: 12px; height: 12px; border-radius: 2px; }
.mytime-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #5c6d64;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 14px;
}