/* «Табель» (pages/timesheet.js): сетка сотрудники × дни, телефон — карточки. Цвета — только токены темы и цвет кода, пришедший от сервера. */
.ts-page { max-width: 1480px; margin: 0 auto; padding: var(--space-6, 24px) var(--space-6, 24px) var(--space-10, 48px); display: flex; flex-direction: column; gap: 14px; }
.ts-busy { opacity: .6; pointer-events: none; transition: opacity .15s; }
.ts-h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.ts-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.ts-nav { display: flex; align-items: center; gap: 8px; }
.ts-per { min-width: 150px; text-align: center; font-size: 1.05rem; color: var(--text-primary); }
.ts-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-f > span { font-size: 12px; color: var(--text-muted); }
.ts-f--q { flex: 1 1 200px; max-width: 320px; }
.ts-muted, .ts-hint { margin: 0; font-size: var(--text-sm, 13px); color: var(--text-muted); line-height: 1.5; }
.ts-err { margin: 0; font-size: var(--text-sm, 13px); color: var(--status-danger); }
.ts-warn { color: var(--status-warning, #f5b942); }
.ts-empty { display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px dashed var(--border-default); border-radius: var(--radius-lg, 14px); color: var(--text-muted); max-width: 640px; }
.ts-empty b { color: var(--text-primary); }

.ts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ts-st { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border-default); color: var(--text-secondary, var(--text-primary)); }
.ts-st--ok { color: var(--status-success); border-color: color-mix(in srgb, var(--status-success) 45%, transparent); }
.ts-st--warn { color: var(--status-warning, #f5b942); border-color: color-mix(in srgb, var(--status-warning, #f5b942) 45%, transparent); }
.ts-st--info { color: var(--accent-primary); border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.ts-sum { font-size: var(--text-sm, 13px); color: var(--text-muted); flex: 1 1 260px; }
.ts-sum b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ts-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-appr { margin: 0; font-size: 12.5px; color: var(--text-muted); }

.ts-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-lg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary, var(--text-primary)); font-size: 12px; cursor: pointer; }
.ts-lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.ts-lg:hover { border-color: var(--c); }
.ts-lg--on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ts-lg:focus-visible, .ts-cell:focus-visible { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 1px; }

/* Сетка: имя и итоги липкие, шапка с датами липкая */
.ts-scroll { overflow: auto; max-height: calc(100vh - 340px); min-height: 220px; border: 1px solid var(--border-default); border-radius: var(--radius-lg, 14px); background: var(--surface-primary); }
.ts-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.ts-grid th, .ts-grid td { padding: 0; border-bottom: 1px solid var(--border-default); }
.ts-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-elevated); font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text-primary)); padding: 6px 0; text-align: center; min-width: 34px; }
.ts-grid thead th small { display: block; font-size: 10px; font-weight: 400; color: var(--text-muted); }
.ts-d--we, .ts-d--ho { color: var(--status-danger) !important; }
.ts-d--ho { background: color-mix(in srgb, var(--status-danger) 10%, var(--surface-elevated)) !important; }
.ts-n { position: sticky; left: 0; z-index: 1; background: var(--surface-primary); text-align: left; min-width: 230px; max-width: 280px; padding: 6px 12px !important; border-right: 1px solid var(--border-default); }
.ts-n b { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-n small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-n--h { z-index: 3 !important; background: var(--surface-elevated) !important; font-size: 12px; }
.ts-t { position: sticky; right: 0; text-align: center; background: var(--surface-primary); font-size: 13px; color: var(--text-primary); }
.ts-t1 { right: 56px; border-left: 1px solid var(--border-default); }
.ts-t2 { right: 0; }
.ts-t { width: 56px; min-width: 56px; }
.ts-grid thead .ts-t { z-index: 3; background: var(--surface-elevated); }
.ts-c { text-align: center; min-width: 34px; height: 38px; }
.ts-cell { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-primary); background: color-mix(in srgb, var(--c) 24%, transparent); cursor: default; }
button.ts-cell { cursor: pointer; }
button.ts-cell:hover { background: color-mix(in srgb, var(--c) 40%, transparent); }
.ts-cell--none { background: transparent; color: var(--text-muted); }
.ts-cell--none.ts-cell--off { background: color-mix(in srgb, var(--text-muted) 7%, transparent); }
.ts-cell--dim { opacity: .22; }
.ts-man { position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: 7px solid var(--status-warning, #f5b942); border-left: 7px solid transparent; }
.ts-grid tbody tr:hover .ts-n, .ts-grid tbody tr:hover .ts-t { background: var(--surface-elevated); }

/* Диалог и журнал */
.ts-form { display: flex; flex-direction: column; gap: 12px; }
.ts-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; font-size: 13px; }
.ts-log time { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.ts-log small { color: var(--text-muted); }

/* Телефон: только просмотр, карточки */
.ts-m { display: none; }
@media (max-width: 767px) {
  .ts-page { padding: var(--space-4, 16px); gap: 12px; }
  .ts-scroll { display: none; }
  .ts-m { display: flex; flex-direction: column; gap: 8px; }
  .ts-acts .js-ts-act, .ts-acts .js-ts-recalc { display: none; }
  .ts-f--q { max-width: none; flex-basis: 100%; }
  .ts-per { min-width: 0; flex: 1; }
  .ts-nav { width: 100%; }
  .ts-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ts-lg { flex: none; }
}
.ts-mc { border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px); background: var(--surface-primary); }
.ts-mc summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ts-mc summary::-webkit-details-marker { display: none; }
.ts-mc__n { display: flex; flex-direction: column; min-width: 0; }
.ts-mc__n b { font-size: 14px; color: var(--text-primary); }
.ts-mc__n small { font-size: 12px; color: var(--text-muted); }
.ts-mc__t { font-size: 12.5px; color: var(--text-secondary, var(--text-primary)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 0 10px 12px; }
.ts-mwd { font-style: normal; text-align: center; font-size: 10.5px; color: var(--text-muted); }
.ts-mt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--text-primary); background: color-mix(in srgb, var(--c) 26%, transparent); }
.ts-mt small { font-size: 9.5px; font-weight: 400; color: var(--text-muted); line-height: 1; }
.ts-mt--none { background: transparent; border: 1px dashed var(--border-default); }
.ts-mt--man::after { content: ''; position: absolute; top: 2px; right: 2px; border-top: 6px solid var(--status-warning, #f5b942); border-left: 6px solid transparent; }
/* «Настройки → Табель»: список кодов */
.ts-set { max-width: 1100px; }
.ts-set__lead { max-width: 74ch; }
.ts-set__box { max-height: none; }
.ts-set__t { width: 100%; border-collapse: collapse; }
.ts-set__t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border-default); background: var(--surface-elevated); white-space: nowrap; }
.ts-set__t td { padding: 6px 10px; border-bottom: 1px solid var(--border-default); vertical-align: middle; }
.ts-set__t .form-input { min-width: 0; width: 100%; }
.ts-set__code { width: 84px !important; text-align: center; font-weight: 700; }
.ts-set__ord { white-space: nowrap; }
.ts-set__ord .c3-arrow { display: inline-flex; margin-right: 4px; }
.ts-set__ord .c3-arrow:disabled { opacity: .3; cursor: default; }
.ts-set__color { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-primary); cursor: pointer; }
.ts-set__act label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ts-set__off td { opacity: .55; }
.ts-set__off td:last-child, .ts-set__off .ts-set__act { opacity: 1; }
.ts-bad { border-color: var(--status-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 18%, transparent); }
@media (max-width: 767px) { .ts-set .ts-scroll { display: block; overflow-x: auto; } .ts-set__t { min-width: 760px; } }
@media (prefers-reduced-motion: reduce) { .ts-busy { transition: none; } }