/* Специфика отдельных страниц: вход, сетка графика, зарплата, лента
   событий, карточка сотрудника, касса. */

/* Верхняя граница липкого слоя: верхняя строка плюс шапка раздела.
   Высота шапки меняется (у разных страниц разное число подкатегорий
   и действий), поэтому её измеряет main.js и пишет в --pagehead-h. */
/* Каркас больше не прокручивается целиком — прокрутка живёт
   в .workspace, поэтому липкие блоки считают отступ от неё. */

/* ── Вход и онбординг ─────────────────────────────────────────────────── */
/* Экран входа — единственное место, где фон тёмный на всю страницу:
   это отделяет «ещё не в системе» от рабочего интерфейса. */

.auth {
  height: 100%;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(900px 520px at 50% -10%,
      color-mix(in srgb, var(--rail-accent) 16%, transparent), transparent),
    var(--rail-bg);
}

.auth__card {
  width: min(452px, 100%);
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}

.auth__logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-solid);
  color: var(--on-accent);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.auth__title {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

.auth__subtitle {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.auth__demo {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.auth__demo-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.auth__demo-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  font-size: var(--fs-caption);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.auth__demo-item:hover { border-color: var(--accent); background: var(--accent-weak); }

/* Шаги онбординга */
.steps {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.steps__dot {
  flex: 1 1 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
}

.steps__dot.is-done { background: var(--accent-solid); }

/* Палитра цвета рабочего дня */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: var(--space-2);
}

.swatch {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.swatch[aria-pressed="true"] {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-surface) inset;
}

.color-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}

.color-preview__chip {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
}

/* ── Сетка графика ────────────────────────────────────────────────────── */

.schedule {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: auto;
  max-height: 72vh;
  scrollbar-width: thin;
}

.schedule__table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: var(--fs-body-sm);
}

.schedule__table th,
.schedule__table td {
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0;
}

/* Шапка с датами липнет по вертикали */
.schedule__head th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-surface-2);
  padding: var(--space-2) var(--space-1);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-align: center;
  min-width: 44px;
  white-space: nowrap;
}

.schedule__head th.is-weekend { color: var(--danger); }

.schedule__head th.is-today {
  color: var(--on-accent);
  background: var(--accent-solid);
}

/* Колонка с именами липнет по горизонтали */
.schedule__name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-surface);
  padding: var(--space-2) var(--space-3);
  min-width: 196px;
  max-width: 196px;
  text-align: left;
  font-weight: var(--fw-medium);
  border-right: 1px solid var(--border-default);
}

.schedule__head .schedule__name {
  z-index: 4;
  background: var(--bg-surface-2);
}

.schedule__name-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.schedule__cell {
  width: 44px;
  height: 42px;
  position: relative;
}

/* Метка рабочего дня. Заливка непрозрачная, а цвет подписи считается
   по яркости заливки: на полупрозрачном фоне светлые значки сливались
   со светлой темой. */
.schedule__chip {
  position: absolute;
  inset: 3px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--day-color, var(--success));
  color: var(--day-text, #fff);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  cursor: grab;
  display: grid;
  place-items: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.schedule__chip:hover { box-shadow: var(--shadow-2); transform: scale(1.06); }
.schedule__chip:active { cursor: grabbing; }
.schedule__chip.is-dragging { opacity: 0.4; }

.schedule__chip--missed {
  background: var(--danger-weak);
  color: var(--danger);
  text-decoration: line-through;
  box-shadow: inset 0 0 0 1px var(--danger);
}

.schedule__chip--worked { opacity: 0.72; }

/* Пустая ячейка — цель для переназначения */
.schedule__cell--empty { cursor: pointer; }
.schedule__cell--empty:hover { background: var(--bg-inset); }

/* Подсветка цели при перетаскивании */
.schedule__cell.is-valid-target {
  background: var(--success-weak);
  box-shadow: inset 0 0 0 2px var(--success);
}

/* Непригодная цель подсвечивается до отпускания курсора */
.schedule__cell.is-invalid-target {
  background: var(--danger-weak);
  box-shadow: inset 0 0 0 2px var(--danger);
  cursor: not-allowed;
}

.schedule__cell--locked { background: var(--bg-inset); opacity: 0.6; }

.schedule__row--unassigned .schedule__name {
  color: var(--warning);
  font-style: italic;
}

/* Подсказка с причиной отказа */
.drag-tooltip {
  position: fixed;
  z-index: 160;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--danger);
  color: var(--on-danger);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  pointer-events: none;
  box-shadow: var(--shadow-2);
  max-width: 260px;
}

/* ── Зарплата ─────────────────────────────────────────────────────────── */
/* Слагаемые выплаты стоят в одном ряду с общими границами: так видно,
   что это части одной суммы, а не четыре независимые карточки. */

.pay-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: clip;
}

.pay-part {
  padding: var(--space-3) var(--space-4);
  border-left: 1px solid var(--border-subtle);
  min-width: 0;
}

.pay-part:first-child { border-left: none; }

.pay-part__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.pay-part__value {
  margin-top: var(--space-1);
  font-size: 22px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
}

.pay-part--total {
  background: var(--accent-weak);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.pay-part--total .pay-part__value { color: var(--accent); }
.pay-part--total .pay-part__label { color: var(--accent); }

/* Подпись «до уплаты налогов» — тише основного числа */
.pay-part__note {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.pay-part--total .pay-part__note {
  color: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
}

@media (max-width: 560px) {
  .pay-part { border-left: none; border-top: 1px solid var(--border-subtle); }
  .pay-part:first-child { border-top: none; }
}

.pay-breakdown {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.pay-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-body-sm);
  border-bottom: 1px dashed var(--border-subtle);
}

.pay-breakdown__row:last-child { border-bottom: none; }

.pay-breakdown__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
  border-bottom: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.pay-breakdown__value { font-variant-numeric: tabular-nums; }

/* ── Лента событий ────────────────────────────────────────────────────── */

.feed { display: flex; flex-direction: column; }

.feed__item {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.feed__item:hover {
  background: var(--bg-surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

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

.feed__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--bg-inset);
  color: var(--text-secondary);
}

.feed__icon--account { background: var(--info-weak); color: var(--info); }
.feed__icon--shift { background: var(--accent-weak); color: var(--accent); }
.feed__icon--cash { background: var(--success-weak); color: var(--success); }
.feed__icon--payroll { background: var(--warning-weak); color: var(--warning); }
.feed__icon--denied { background: var(--danger-weak); color: var(--danger); }

.feed__body { flex: 1 1 auto; min-width: 0; }

.feed__title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-tight);
}

.feed__meta {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* Фильтры ленты — один ряд с общей подложкой, как единый орган
   управления, а не рассыпанные кнопки */
.feed__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
}

/* Блок «было → стало» в карточке события */
.diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  font-size: var(--fs-body-sm);
}

.diff__col { min-width: 0; }

.diff__label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ── Список сотрудников ───────────────────────────────────────────────── */

.staff-row { display: flex; align-items: center; gap: var(--space-3); }

.staff-row__name { font-weight: var(--fw-medium); }
.staff-row__sub { font-size: var(--fs-caption); color: var(--text-muted); }

.staff-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .staff-detail { grid-template-columns: 1fr; }
}

.kv {
  display: grid;
  grid-template-columns: minmax(128px, auto) 1fr;
  gap: 0 var(--space-4);
  font-size: var(--fs-body-sm);
  align-items: center;
}

/* Обёртка строки нужна, чтобы навести можно было на всю строку целиком.
   display: contents сохраняет сетку из двух колонок. */
.kv__row { display: contents; }

.kv__key {
  color: var(--text-muted);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.kv__val {
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.kv__row:last-child .kv__key,
.kv__row:last-child .kv__val { border-bottom: none; }

/* ── Правка значения по наведению ─────────────────────────────────────── */

.kv__val--editable {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
}

.kv__edit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast),
              background var(--transition-fast);
}

/* Иконка проявляется при наведении на строку и доступна с клавиатуры */
.kv__row:hover .kv__edit,
.kv__edit:focus-visible { opacity: 1; }

.kv__edit:hover { color: var(--accent); background: var(--accent-weak); }

/* На устройствах без наведения иконка видна постоянно: иначе правка
   значения недоступна с телефона вообще. */
@media (hover: none) {
  .kv__edit { opacity: 1; }
}

.kv__editor {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.kv__editor .input {
  width: 116px;
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-body-sm);
}

.kv__editor-suffix {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* ── Виджет ленты действий сотрудника ─────────────────────────────────── */

.staff-feed {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: 540px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.staff-feed__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}

.staff-feed__title {
  flex: 1 1 auto;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}

.staff-feed__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .staff-feed { position: static; max-height: none; }
}

/* ── Касса и запросы замен ────────────────────────────────────────────── */
/* Одинаковая строка списка: цветная полоса слева кодирует состояние,
   и это видно до чтения текста. */

.cash-session,
.swap-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.cash-session--open {
  border-color: var(--border-subtle);
  border-left-color: var(--success);
  background: var(--success-weak);
}

.swap-card + .swap-card { margin-top: var(--space-2); }
.swap-card__body { flex: 1 1 auto; min-width: 0; }
.swap-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.swap-card__meta { font-size: var(--fs-caption); color: var(--text-muted); }

/* ── Мини-график ──────────────────────────────────────────────────────── */

.spark-bar { fill: var(--accent-solid); }
.spark-bar--muted { fill: var(--bg-inset); }
.spark-axis { stroke: var(--border-default); stroke-width: 1; }
.spark-label { fill: var(--text-muted); font-size: 10px; }

/* ── Отчёты продаж по дням ────────────────────────────────────────────── */
/* Строка таблицы — день; отдельные отчёты раскрываются под ней. */

.day-row__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.table tbody tr.is-open .day-row__chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.table tbody tr.is-open { background: var(--bg-surface-2); }

.table tbody tr.day-detail td {
  padding: 0;
  background: var(--bg-surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}

.day-detail__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4);
}

.day-detail__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-body-sm);
  border-bottom: 1px dashed var(--border-subtle);
}

.day-detail__row:last-child { border-bottom: none; }