:root{
  --bg:#f4f6fa; --panel:#fff; --ink:#1b2330; --muted:#6b7688; --line:#dfe4ec;
  --blue:#1f6feb; --green:#0f9d58; --red:#d93025; --amber:#a87b00;
  --blue-soft:#eaf2ff; --green-soft:#e8f7ef; --red-soft:#fdecea; --amber-soft:#fff7e0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--ink); font:15px/1.4 "Segoe UI",Roboto,Arial,sans-serif}

/* ---------- шапка ---------- */
.top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; background:var(--panel); border-bottom:1px solid var(--line); padding:10px 14px;
}
.brand{font-size:16px; font-weight:700}
.brand .obj{color:var(--muted); font-weight:400; font-size:13px; margin-left:6px}
.top-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.msg{font-size:13px; color:var(--green); min-width:50px}
.msg.err{color:var(--red)}

/* ---------- кнопки ---------- */
.btn{background:var(--blue); color:#fff; border:0; border-radius:8px; padding:9px 14px; font:inherit; font-size:14px; cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:default}
.btn-quiet{background:#e7ebf2; color:var(--ink)}
.btn-green{background:var(--green)}
.btn-small{padding:5px 10px; font-size:13px}
.btn-x{background:transparent; color:var(--red); border:1px solid var(--line); border-radius:6px; cursor:pointer; padding:2px 8px; font-size:13px}
a.btn{text-decoration:none; display:inline-block}

/* ---------- панели ---------- */
.wrap{padding:14px; max-width:1500px; margin:0 auto}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:14px}
.panel h2{font-size:14px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin:0 0 10px}
.hint{color:var(--muted); font-size:12.5px; margin:4px 0 8px}

/* ---------- переключатель План/Факт ---------- */
.tabs{display:inline-flex; background:#e9eef6; border-radius:9px; padding:3px; gap:3px}
.tabs button{border:0; background:transparent; padding:7px 16px; border-radius:7px; font:inherit; font-size:14px; cursor:pointer; color:var(--ink)}
.tabs button.on{background:#fff; box-shadow:0 1px 3px rgba(20,30,50,.14); font-weight:600}

/* ---------- сетка ---------- */
.grid-scroll{overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:10px}
table.sheet{border-collapse:separate; border-spacing:0; font-size:13px; min-width:100%}
table.sheet th, table.sheet td{border-right:1px solid #eef1f6; border-bottom:1px solid #eef1f6; padding:0; text-align:center}
table.sheet thead th{
  position:sticky; top:0; z-index:3; background:#f7f9fc; font-weight:600; font-size:11.5px;
  color:var(--muted); padding:6px 4px; white-space:nowrap;
}
table.sheet thead th.wk{background:#eef3fb}
table.sheet thead th.today{background:#fff2c9; color:#8a6a00}
table.sheet .nm{
  position:sticky; left:0; z-index:2; background:#fff; text-align:left; padding:6px 10px;
  min-width:190px; border-right:1px solid var(--line);
}
table.sheet thead th.nm{z-index:4; background:#f7f9fc}
table.sheet tfoot td{position:sticky; bottom:0; background:#f7f9fc; font-weight:600; z-index:3}
table.sheet .nm small{display:block; color:var(--muted); font-size:11px; font-weight:400}

.cell{width:100%; border:0; background:transparent; text-align:center; font:inherit; font-size:14px; padding:7px 2px; border-radius:0}
.cell:focus{outline:2px solid var(--blue-soft); background:#fffdf0}
.cell.fact{} 
.cell.otm{background:var(--amber-soft); color:var(--amber); font-weight:700; font-size:12px}
td.today{background:#fffaf0}
tr.off .nm{color:var(--muted)}
.sum-col{font-weight:700; background:#f7f9fc; padding:6px 8px; min-width:62px}
.sum-row{font-weight:700; background:#f7f9fc}

/* отметки (флаг) */
.flag{font-size:11px; color:var(--muted); display:block; margin-top:-2px}
.flag.nn{color:var(--red); font-weight:700}
.flag.sick{color:var(--amber); font-weight:700}

/* ---------- карточка человека ---------- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(20,30,50,.45); display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow:auto}
.modal[hidden]{display:none}
.modal-box{background:var(--panel); border-radius:12px; width:100%; max-width:620px; box-shadow:0 10px 40px rgba(20,30,50,.3)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); font-weight:700}
.modal-body{padding:16px 18px}
.field{margin-bottom:10px}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:3px}
.field input, .field select{width:100%; padding:8px 10px; font:inherit; font-size:14px; border:1px solid var(--line); border-radius:8px; background:#fff}
.field input:focus, .field select:focus{outline:2px solid var(--blue-soft); border-color:var(--blue)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.alert{padding:10px 12px; border-radius:9px; font-size:13.5px; background:var(--red-soft); color:#8c1d13; border:1px solid #f6cfca}
.alert.ok{background:var(--green-soft); color:#0a6b3c; border-color:#c6ecd6}

/* ---------- вход ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; background:linear-gradient(160deg,#eef3fb,#f7f9fc 60%,#eef6f1)}
.login-box{width:100%; max-width:390px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:0 8px 30px rgba(20,30,50,.10)}
.login-brand{margin-bottom:18px; text-align:center}
.login-brand b{display:block; font-size:19px}
.login-brand span{display:block; color:var(--muted); font-size:13px; margin-top:3px}
.login-box label{margin-bottom:12px; display:block}
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:38px; height:34px; display:flex; align-items:center; justify-content:center; border:0; background:transparent; cursor:pointer; color:#5b6b82; border-radius:6px}
.pw-eye:hover{background:#eef2f8}
.login-btn{width:100%; margin-top:6px; padding:11px; font-size:15px}
.login-err{color:var(--red); font-size:13px; min-height:20px; margin:2px 0 4px}

/* ---------- мобильный бригадир ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:8px}
  .panel{padding:10px; border-radius:10px}
  table.sheet .nm{min-width:140px; font-size:13px}
  .cell{font-size:16px; padding:10px 2px}   /* крупнее — ввод пальцем */
  .top{padding:8px 10px}
  .brand{font-size:15px}
  .btn{padding:10px 14px}
  .tabs button{padding:9px 14px; font-size:15px}
  .row2{grid-template-columns:1fr}
}