/* «Посещаемость» (#/attendance): один экран, виды переключаются вкладками. Только токены, без своих цветов. */
.att-tabs { margin-bottom: var(--space-3); }
.att-view-wrap { min-width: 0; }

/* Виды, которые раньше были отдельными страницами, внутри экрана не дублируют свои заголовки и поля страницы */
.att-view .page { padding: 0; max-width: none; animation: none; }
.att-view .page-header { display: none; }
.att-view .ttd-top h1, .att-view .ttd-top a[href="#/dashboard"] { display: none; }
.att-view .ttd-top { margin-top: 0; }

/* Панель периода у «Мой», «Сводный отчёт», «По подразделениям» */
.att-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.att-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.att-chip { font: inherit; font-size: var(--text-xs); padding: 5px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-elevated); color: var(--text-muted); cursor: pointer; }
.att-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.att-chip--on { border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 600; }
.att-chip:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.att-f { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.att-f--grow { flex: 1; min-width: 180px; }
.att-problem { margin: 0 0 var(--space-3); color: var(--status-danger); font-size: var(--text-sm); }
.att-late { color: var(--status-danger); font-variant-numeric: tabular-nums; }
.att-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); max-width: 70ch; }
.att-pane table td, .att-pane table th { font-variant-numeric: tabular-nums; }