:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1c2430; --muted:#6b7a8d; --line:#dfe5ec;
  --brand:#1f4e79; --brand-soft:#e8f0f8; --ok:#1d7a4c; --warn:#b26a00; --bad:#b3261e;
  --weekend:#fdeaea; --holiday:#fbdcc9; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brand)}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:7px 13px;border-radius:8px}
button:hover{border-color:var(--brand);color:var(--brand)}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.primary:hover{background:#17395a;color:#fff}
button.danger{color:var(--bad);border-color:#f0c9c6}
button.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:4px 7px}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
h1,h2,h3{margin:0 0 10px}
h1{font-size:20px} h2{font-size:17px} h3{font-size:15px}

header.top{background:var(--brand);color:#fff;padding:0 18px;display:flex;align-items:center;
  gap:18px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
header.top .brand{font-weight:700;padding:12px 0;letter-spacing:.2px}
header.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
header.top nav a{color:#cfe0f0;text-decoration:none;padding:13px 11px;border-bottom:3px solid transparent}
header.top nav a.active,header.top nav a:hover{color:#fff;border-bottom-color:#fff}
header.top .who{font-size:12px;color:#cfe0f0;text-align:right;padding:8px 0}
header.top .who b{display:block;color:#fff;font-size:13px}

main{padding:18px;max-width:1700px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>div{min-width:130px}
.grid{display:grid;gap:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.center{text-align:center}
.hidden{display:none !important}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:middle}
th{background:#f0f3f7;font-weight:600;position:sticky;top:0;z-index:2}
tbody tr:hover{background:#fafcff}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.total td{background:#eef2f7;font-weight:700}

.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.b-draft{background:#eef1f5;color:#5a6a7d}
.b-calculated{background:#e3f0ff;color:#14538c}
.b-approved{background:#e2f3e9;color:var(--ok)}
.b-warn{background:#fff2dd;color:var(--warn)}
.b-bad{background:#fdeceb;color:var(--bad)}

.ts-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.ts{border-collapse:separate;border-spacing:0;font-size:12px}
.ts th,.ts td{border:1px solid var(--line);padding:2px 4px;white-space:nowrap}
.ts th.d,.ts td.d{width:38px;min-width:38px;text-align:center;padding:2px}
.ts th.name,.ts td.name{position:sticky;left:0;background:#fff;z-index:3;min-width:230px;max-width:230px;
  overflow:hidden;text-overflow:ellipsis}
.ts thead th{position:sticky;top:0;background:#f0f3f7;z-index:4}
.ts thead th.name{z-index:6}
.ts td.we{background:var(--weekend)} .ts td.hol{background:var(--holiday)}
.ts th.we{background:#f6e2e2} .ts th.hol{background:#f2d3bf}
.ts td.cell{cursor:pointer}
.ts td.cell:hover{outline:2px solid var(--brand)}
.ts td.warn{box-shadow:inset 0 0 0 2px #e8a33d}
.ts td.off{background:#f6f7f9;color:#b9c2cd;cursor:not-allowed}
.ts td.num{text-align:right}
.chip{font-size:10px;padding:0 3px;border-radius:3px;background:#eef1f5;color:#5a6a7d}

.modal-bg{position:fixed;inset:0;background:rgba(18,26,36,.45);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:16px}
.modal{background:#fff;border-radius:12px;padding:20px;max-width:760px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal h2{margin-bottom:14px}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

.toast{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast div{background:#22303f;color:#fff;padding:11px 15px;border-radius:9px;max-width:460px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:13px}
.toast div.err{background:var(--bad)} .toast div.ok{background:var(--ok)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px}
.kpi .box .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .box .t{font-size:12px;color:var(--muted)}
.kpi .box.accent{background:var(--brand-soft);border-color:#c5dbef}

.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:8px 0}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:13px;height:13px;border-radius:3px;border:1px solid var(--line);display:inline-block}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:none;background:none;padding:9px 13px;border-bottom:3px solid transparent;
  border-radius:0;color:var(--muted)}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.hint{background:#f7fafd;border-left:3px solid var(--brand);padding:9px 12px;border-radius:0 8px 8px 0;
  font-size:12.5px;color:#41536a;margin-bottom:12px}
.warnbox{background:#fff8ec;border-left:3px solid #e8a33d;padding:9px 12px;border-radius:0 8px 8px 0;
  font-size:12.5px;margin-bottom:12px}
.bar{height:8px;background:#eef1f5;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.login-wrap{max-width:380px;margin:9vh auto}
.help{cursor:help;border-bottom:1px dotted var(--muted);color:var(--muted)}
details summary{cursor:pointer;color:var(--brand);font-size:13px;padding:4px 0}

/* Итоговый расчёт: имя сотрудника не должно переноситься по буквам */
.tbl-payroll td:first-child,.tbl-payroll th:first-child{min-width:230px;max-width:280px}
.tbl-payroll th{white-space:nowrap}
.tbl-payroll td:first-child a{font-weight:600}