/* ================= табель ================= */
:root { --we: #fbf1f1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --we: #221a1f; } }
:root[data-theme="dark"] { --we: #221a1f; }

.month-switch { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 3px; height: 38px; }
.month-label { min-width: 128px; text-align: center; font-weight: 650; }

.ts-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: -6px 0 18px; color: var(--text-2); font-size: 12.5px; }
.ts-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.ts-legend .muted { color: var(--text-3); }
.tc-demo { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.tc-demo.we { background: var(--we); }

.ts-empty { padding: 20px 22px; margin-bottom: 16px; border-style: dashed; }
.ts-section { margin-bottom: 16px; overflow: hidden; }
.ts-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 10px; }
.ts-section:not(.collapsed) .ts-head { border-bottom: 1px solid var(--border); }
.ts-toggle svg { transition: transform .15s; }
.ts-section.collapsed .ts-toggle svg { transform: rotate(-90deg); }
.ts-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ts-title .card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-stats { color: var(--text-2); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-stats b { color: var(--text); }
.ts-head .group-actions { opacity: 1; margin-left: 6px; align-items: center; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

.ts-wrap { overflow-x: auto; }
.ts-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.ts-table th, .ts-table td { border-bottom: 1px solid var(--border); padding: 0; height: 38px; }
.ts-table th { background: var(--surface-2); color: var(--text-3); font-weight: 600; font-size: 11px; }
.ts-table .ts-num { position: sticky; left: 0; z-index: 2; width: 38px; min-width: 38px; text-align: right; padding-right: 8px; color: var(--text-3); background: var(--surface); font-variant-numeric: tabular-nums; }
.ts-table .ts-name {
  --w: min(var(--ts-name-w, 250px), 60vw);
  position: sticky; left: 38px; z-index: 2; width: var(--w); min-width: var(--w); max-width: var(--w);
  background: var(--surface); border-right: 1px solid var(--border-strong); text-align: left; padding: 0 8px;
}
.ts-table th.ts-num, .ts-table th.ts-name { background: var(--surface-2); text-transform: uppercase; letter-spacing: .04em; }
.col-resizer { position: absolute; top: 0; right: -5px; bottom: 0; width: 10px; cursor: col-resize; z-index: 5; touch-action: none; }
.col-resizer::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--text-3) 45%, transparent); transition: background .15s, top .15s, bottom .15s; }
.col-resizer:hover::after, body.col-resizing .col-resizer::after { top: 3px; bottom: 3px; }
.col-resizer:hover::after, body.col-resizing .col-resizer::after { background: var(--accent); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
.ts-table tbody tr:hover td.ts-num, .ts-table tbody tr:hover td.ts-name { background: var(--surface-2); }

.ts-person { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: none; padding: 3px 4px; border-radius: 7px; cursor: pointer; text-align: left; }
.ts-person:hover { background: var(--accent-soft); }
.ts-person .fio, .pick .fio { font-weight: 600; font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-person .job, .pick .job { color: var(--text-3); font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ts-person .job i { color: var(--warn); font-style: normal; }

.ts-day { width: 34px; min-width: 34px; text-align: center; border-left: 1px solid var(--border); }
th.ts-day { line-height: 1.1; padding-top: 3px; }
th.ts-day span { display: block; color: var(--text-2); font-size: 12px; }
th.ts-day small { font-size: 9.5px; font-weight: 500; }
.ts-day.we { background: var(--we); }
th.ts-day.we { background: color-mix(in srgb, var(--we) 60%, var(--surface-2)); }
th.ts-day.we span, th.ts-day.we small { color: var(--danger); }
th.ts-day.today { background: var(--accent); }
th.ts-day.today span, th.ts-day.today small { color: #fff; }
td.ts-day.today { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); }

.tc { width: 100%; height: 37px; border: 0; background: transparent; text-align: center; font-weight: 650; font-size: 12.5px;
  outline: none; padding: 0; color: var(--text); font-variant-numeric: tabular-nums; display: block; }
.tc:hover { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.tc:focus { background-color: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 4px; }
.tc.h, .tc-demo.h { color: var(--st-work-fg); background-color: color-mix(in srgb, var(--st-work-bg) 75%, transparent); }
.tc[data-code="ОТ"], .tc-demo[data-code="ОТ"] { color: var(--st-vac-fg); background-color: var(--st-vac-bg); }
.tc[data-code="Б"], .tc-demo[data-code="Б"] { color: var(--st-sick-fg); background-color: var(--st-sick-bg); }
.tc[data-code="ДО"], .tc-demo[data-code="ДО"] { color: var(--st-own-fg); background-color: var(--st-own-bg); }
.tc[data-code="ПР"], .tc-demo[data-code="ПР"] { color: var(--st-truant-fg); background-color: var(--st-truant-bg); }
.tc[data-code="НН"], .tc-demo[data-code="НН"] { color: var(--st-other-fg); background-color: var(--st-other-bg); }
.tc[data-code="В"], .tc-demo[data-code="В"] { color: var(--text-3); }
/* уголок — ручная правка */
.tc.man, .tc-demo.man { background-image: linear-gradient(225deg, var(--accent) 5px, transparent 5px); }

.ts-sum { width: 58px; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-2); border-left: 1px solid var(--border-strong); }
.ts-sum.strong { font-weight: 700; color: var(--text); border-left: 1px solid var(--border); }
th.ts-sum { text-transform: uppercase; letter-spacing: .04em; }
.ts-act { width: 100px; min-width: 100px; padding: 0 6px !important; }
.ts-table tbody tr:hover .row-actions { opacity: 1; }
.ts-table tfoot td { background: var(--surface-2); color: var(--text-2); font-weight: 600; text-align: center; border-bottom: 0; }
.ts-table tfoot td.ts-day.we { background: color-mix(in srgb, var(--we) 60%, var(--surface-2)); }
.foot-label { font-size: 12px; color: var(--text-2); }

/* окна табеля */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.check { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font-size: 13px; }
.check:hover { background: var(--surface-2); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.modal:has(.check-grid), .modal:has(.pick-list) { width: min(560px, calc(100vw - 32px)); }
.pick-list { max-height: 280px; overflow-y: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.pick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left; }
.pick:hover { background: var(--accent-soft); }

@media (max-width: 860px) {
  .ts-head { flex-wrap: wrap; }
}

.tag.muted-tag { background: none; border-style: dashed; color: var(--text-3); }

/* выбор одного из вариантов в окне */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; }
.seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

.onsheet-box { border-top: 1px solid var(--border); padding-top: 14px; }
.onsheet-group { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.onsheet-group label { font-weight: 600; font-size: 13px; }

/* ---------- выделение клеток ---------- */
th.ts-day[data-day] { cursor: s-resize; }
.tc.sel { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--accent) 20%, transparent); }
.tc.sel:focus { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 999px color-mix(in srgb, var(--accent) 20%, transparent); }
body.ts-selecting, body.ts-selecting * { user-select: none; }
.ts-selbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; width: max-content;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 20, 35, .18); font-size: 13px; }
.ts-selbar-info b { font-weight: 700; }
.ts-selbar-hint { color: var(--text-3); font-size: 12px; }
.ts-selbar-btns { display: flex; align-items: center; gap: 4px; }
.ts-selbar-btns .tc-demo { border: 0; cursor: pointer; min-width: 30px; height: 26px; font: inherit; font-weight: 700; font-size: 12px; }
.ts-selbar-btns .tc-demo:hover { outline: 2px solid var(--accent); }

/* праздник в шапке — число с точкой-меткой */
th.ts-day.hol span { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- проще: итоги всегда видны, меньше шума ---------- */
.ts-table th.ts-sum, .ts-table td.ts-sum { position: sticky; z-index: 2; background: var(--surface); }
.ts-table .ts-sum.hours { right: 0; }
.ts-table .ts-sum.days { right: 58px; box-shadow: -6px 0 8px -6px rgba(20, 30, 60, .18); }
.ts-table thead .ts-sum { background: var(--surface-2); }
.ts-table tbody tr:hover td.ts-sum { background: var(--surface-2); }
.ts-sec-actions { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.ts-legend .lg.help { color: var(--accent); font-weight: 600; cursor: help; margin-left: auto; }

/* ---------- наглядно: весь месяц в ширину экрана ---------- */
.ts-kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ts-kpi { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; }
.ts-kpi b { color: var(--text); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.ts-table { width: 100%; }
.ts-table .ts-name { --w: min(var(--ts-name-w, 230px), 40vw); }
.ts-day { width: auto; min-width: 27px; }
th.ts-day small { font-size: 9px; }
/* начало недели — линия потолще, легче считать дни */
.ts-day.wk { border-left: 1px solid var(--border-strong); }
/* будущее — бледно, чтобы было видно, до какого числа табель уже заполнен */
th.ts-day.future span, th.ts-day.future small { opacity: .45; }
td.ts-day.future { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--text-3) 7%, transparent) 5px 6px); }
td.ts-day.future .tc:not(:focus):placeholder-shown { background: transparent; }
/* сегодня — столбец */
td.ts-day.today { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
/* перекрестие: строка и день под мышью */
.ts-table tbody tr:hover td.ts-day { background-color: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.ts-table tbody tr:hover td.ts-day.we { background-color: color-mix(in srgb, var(--accent) 5%, var(--we)); }
th.ts-day.hl:not(.today) { background: var(--accent-soft); }
th.ts-day.hl:not(.today) span, th.ts-day.hl:not(.today) small { color: var(--accent); opacity: 1; }

/* часы и полоска от нормы */
.ts-table .ts-sum.hours { width: 64px; min-width: 64px; }
.ts-table .ts-sum.days { right: 64px; width: 44px; min-width: 44px; }
.ts-hrs { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 8px; cursor: default; }
.ts-hrs b { font-size: 13px; line-height: 1; }
.ts-bar { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.ts-bar i { display: block; height: 100%; border-radius: 4px; background: var(--st-work-fg); }