/* ==========================================================================
   manager.css — персональные блоки менеджерского интерфейса.

   Те же токены, та же типографика и та же плотность, что и в остальном
   кабинете: менеджерский экран эмоциональнее административного за счёт
   крупных чисел и изображения награды, а не за счёт другой системы стилей.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Верхний блок
   -------------------------------------------------------------------------- */

.mgr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'lead panel'
    'actions panel';
  align-items: start;
  gap: var(--space-5) var(--space-7);
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}

.mgr-hero__lead { grid-area: lead; min-width: 0; }
.mgr-hero__panel { grid-area: panel; }
.mgr-hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--space-3); }

.mgr-hero__greeting {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
}

.mgr-hero__sub {
  margin-top: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.mgr-hero__where {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.mgr-hero__panel {
  min-width: 220px;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
}

.mgr-hero__panel-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mgr-hero__panel-value {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
}

.mgr-hero__panel-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Плитки показателей
   -------------------------------------------------------------------------- */

.mgr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.mgr-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.mgr-stat.is-clickable {
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.mgr-stat.is-clickable:hover,
.mgr-stat.is-clickable:focus-visible {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

.mgr-stat__label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mgr-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.mgr-stat__note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Мотивационный виджет «Гонка героев»
   -------------------------------------------------------------------------- */

.mgr-race__next {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-lg);
}

.mgr-race__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
}

.mgr-race__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mgr-race__eyebrow {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mgr-race__name {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.mgr-race__gap {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-brand);
}

.mgr-race__done {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-sunk);
  border-radius: var(--radius-lg);
}

.mgr-race__bar { margin-top: var(--space-5); }

.mgr-race__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  overflow: hidden;
}

.mgr-race__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-brand-dark), var(--color-brand));
  transition: width var(--dur-slower) var(--ease-soft);
}

.mgr-race__scale {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Список последних заявок
   -------------------------------------------------------------------------- */

.mgr-apps { display: flex; flex-direction: column; }

.mgr-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 84px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-hairline);
  font: inherit;
  cursor: pointer;
  transition: background var(--t-fast);
}

.mgr-app:last-child { border-bottom: 0; }
.mgr-app:hover { background: var(--color-surface-sunk); }

.mgr-app__main { min-width: 0; display: block; }

.mgr-app__client {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgr-app__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgr-app__sum {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.mgr-app__flag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  color: var(--color-warning);
}

.mgr-app__flag--quiet { color: var(--color-text-quiet); }

/* --------------------------------------------------------------------------
   Личный рейтинг
   -------------------------------------------------------------------------- */

.mgr-rank { display: flex; flex-direction: column; gap: var(--space-2); }

.mgr-rank__row {
  display: grid;
  grid-template-columns: 32px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.mgr-rank__row.is-self {
  background: var(--color-brand-softer);
  border-color: var(--color-brand-tint-hard);
}

.mgr-rank__pos {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
}

.mgr-rank__row.is-self .mgr-rank__pos { color: var(--color-brand); }

.mgr-rank__body { min-width: 0; }

.mgr-rank__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgr-rank__dept {
  display: block;
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgr-rank__points {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.mgr-rank__points span {
  margin-left: 4px;
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------------
   Планшет и мобильные

   Приоритет на узком экране: крупные показатели → задачи → прогресс гонки →
   заявки → рейтинг. Горизонтального скролла нет ни в одном блоке.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .mgr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mgr-hero {
    grid-template-columns: 1fr;
    grid-template-areas: 'lead' 'panel' 'actions';
    padding: var(--space-5);
  }

  .mgr-hero__panel { min-width: 0; }
  .mgr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .mgr-stat { padding: var(--space-4); }
  .mgr-stat__value { font-size: var(--text-h2); }

  .mgr-hero__actions { flex-direction: column; align-items: stretch; }
  .mgr-hero__actions .btn { width: 100%; justify-content: center; }

  .mgr-race__next { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }

  /* Строка заявки перестраивается в две линии — колонки не сжимаются
     до нечитаемого и не вызывают горизонтальную прокрутку */
  .mgr-app {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
  }

  .mgr-app__main { grid-column: 1 / -1; }
  .mgr-app__flag { grid-column: 2; }

  .mgr-rank__row { grid-template-columns: 26px auto minmax(0, 1fr); row-gap: var(--space-1); }
  .mgr-rank__points { grid-column: 2 / -1; }
}

@media (max-width: 400px) {
  .mgr-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Контур руководителя

   Полоса области видимости на «Главной». Появляется только у роли LEADER
   и явно называет границы данных, которые показывает экран.
   ========================================================================== */

.scope-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-lg);
}

.scope-banner__lead { min-width: 0; }

.scope-banner__eyebrow {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

.scope-banner__name {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.scope-banner__note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.scope-banner__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.scope-banner__stat { display: flex; flex-direction: column; gap: 2px; }

.scope-banner__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.scope-banner__stat-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

@media (max-width: 900px) {
  .scope-banner { grid-template-columns: 1fr; gap: var(--space-4); }
  .scope-banner__stats { gap: var(--space-5); }
}

@media (max-width: 480px) {
  .scope-banner__stats { gap: var(--space-4); }
  .scope-banner__stat-value { font-size: var(--text-h3); }
}

/* ==========================================================================
   Нижняя навигация телефона

   Показывается только ролям с коротким меню (см. navigation.js). На
   планшете и десктопе скрыта: там боковая панель всегда на виду.
   ========================================================================== */

.bottom-nav { display: none; }

@media (max-width: 768px) {
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-topbar);
    display: flex;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    /* Панель не наезжает на системный индикатор жестов */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 12px rgba(23, 22, 20, 0.05);
  }

  .bottom-nav[hidden] { display: none; }

  .bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: var(--space-2) var(--space-1);
    min-height: 56px;
    text-decoration: none;
    color: var(--color-text-tertiary);
    transition: color var(--t-fast);
  }

  .bottom-nav__item.is-active { color: var(--color-brand); }

  .bottom-nav__icon { display: inline-flex; }

  .bottom-nav__label {
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Контент не должен уходить под панель */
  .app[data-bottom-nav='on'] .main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}