:root{
  --paper:#f6f6f4;        /* нейтральная бумага, не кремовая */
  --card:#fff;
  --ink:#171a1c;
  --muted:#6e7276;
  --line:#e0e0dc;
  --shift:#1f6f4a;        /* та же зелёная, что на экране выдачи */
  --shift-soft:#e4efe9;
  --stop:#b3261e;
  --stop-soft:#fbeae8;
  --warn:#a66a00;
  --warn-soft:#fdf3e2;
  --tap:44px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
     "Helvetica Neue",Arial,sans-serif;
     padding-bottom:env(safe-area-inset-bottom)}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* шапка */
.bar{position:sticky;top:0;z-index:5;background:var(--paper);
     border-bottom:1px solid var(--line);padding:10px 14px}
.bar-row{display:flex;gap:10px;align-items:center}
.bar select{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
     border-radius:9px;padding:9px 10px;appearance:none}
.bar .who{font-size:13px;color:var(--shift);margin-top:4px}
.bar .sum{font-size:13px;color:var(--muted);margin-top:8px;
     font-variant-numeric:tabular-nums}
.back{background:none;border:0;padding:6px 10px 6px 0;font-size:17px;color:var(--shift)}

main{padding:8px 14px 84px;max-width:560px;margin:0 auto}

/* список людей */
.person{background:var(--card);border:1px solid var(--line);border-radius:11px;
     padding:11px 12px;margin-bottom:8px;display:block;width:100%;text-align:left}
.person-top{display:flex;align-items:baseline;gap:8px}
.name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
     white-space:nowrap}
.hours{font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px}
.tag{font-size:11px;font-weight:700;padding:2px 5px;border-radius:5px;
     letter-spacing:.2px}
.tag.critical{background:var(--stop-soft);color:var(--stop)}
.tag.warning{background:var(--warn-soft);color:var(--warn)}
.tag.info{background:#eef0f1;color:var(--muted)}

/* полоса месяца: ритм виден с одного взгляда */
.strip{display:flex;gap:2px;margin-top:9px}
.strip i{flex:1;height:14px;border-radius:2px;background:#eceeed}
.strip i.on{background:var(--shift)}
.strip i.stop{background:repeating-linear-gradient(45deg,
     var(--stop-soft),var(--stop-soft) 2px,#f5d4d0 2px,#f5d4d0 4px)}
.strip i.limited{background:var(--warn-soft);box-shadow:inset 0 0 0 1px #edd9b0}
.strip i.on.limited{background:var(--shift);box-shadow:inset 0 0 0 2px var(--warn)}
.strip i.sun{background:#e2e4e3}
.strip i.on.sun{background:var(--shift)}

/* календарь одного человека */
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
     font-size:12px;color:var(--muted);padding:2px 0 6px;text-align:center}
/* touch-action: none — иначе браузер перехватывает движение пальцем
   как прокрутку и протяжка не работает */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
     touch-action:none;user-select:none;-webkit-user-select:none}
.day{aspect-ratio:1;min-height:var(--tap);border:1px solid var(--line);
     border-radius:9px;background:var(--card);display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:1px;padding:0}
.day .n{font-size:14px;font-variant-numeric:tabular-nums}
.day .h{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.day.empty{border:0;background:none}
.day.on{background:var(--shift);border-color:var(--shift);color:#fff}
.day.on .h{color:#cfe4da}
.day.stop{background:var(--stop-soft);border-color:#f0cfcb;color:var(--stop)}
.day.limited{border-color:var(--warn);background:var(--warn-soft)}
.day.on.limited{background:var(--shift);border-color:var(--warn);border-width:2px}
.day.today{box-shadow:0 0 0 2px var(--ink)}
.day.locked{opacity:.55}
.day:disabled{cursor:default}
.day:focus-visible{outline:2px solid var(--shift);outline-offset:2px}

/* панель действий */
.tools{position:fixed;left:0;right:0;bottom:0;background:var(--card);
     border-top:1px solid var(--line);padding:10px 14px
     calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;
     max-width:560px;margin:0 auto}
.tools button{flex:1;padding:12px;border-radius:10px;border:1px solid var(--line);
     background:var(--card);font-weight:600;font-size:15px}
.tools button.primary{background:var(--shift);border-color:var(--shift);color:#fff}

/* недели: закрытие — последний шаг работы табельщика */
.week{display:flex;align-items:center;gap:10px;background:var(--card);
     border:1px solid var(--line);border-radius:11px;padding:10px 12px;
     margin-bottom:6px}
.week-main{flex:1;min-width:0}
.week-dates{font-weight:600;font-size:15px}
.week-meta{font-size:12px;color:var(--muted);margin-top:2px}
.week button{border:1px solid var(--shift);background:var(--card);
     color:var(--shift);border-radius:9px;padding:9px 14px;font-weight:600;
     font-size:14px;white-space:nowrap}
.week button:disabled{border-color:var(--line);color:var(--muted);
     background:var(--paper)}
.week.done{opacity:.6}
.week.done .week-dates::after{content:" · закрыта";font-weight:400;
     color:var(--muted);font-size:13px}

/* Форма выезжает снизу: на телефоне это ближе к большому пальцу,
   чем модальное окно по центру, и не перекрывает то, что человек
   только что читал. */
.sheet-bg{position:fixed;inset:0;background:rgba(23,26,28,.45);z-index:30;
     display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;
     border-radius:16px 16px 0 0;padding:18px 16px
     calc(16px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto}
.sheet h2{font-size:18px;margin:0 0 4px;font-weight:600}
.sheet .sub{font-size:13px;color:var(--muted);margin-bottom:14px}
.sheet label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}
.sheet input,.sheet select{width:100%;padding:12px;border:1px solid var(--line);
     border-radius:10px;background:var(--card);font-size:16px}
.sheet input:focus,.sheet select:focus{outline:2px solid var(--shift);
     outline-offset:-1px;border-color:var(--shift)}
.sheet input.bad,.sheet select.bad{border-color:var(--stop);background:var(--stop-soft)}
.sheet .hint{font-size:12px;color:var(--muted);margin-top:4px}
.sheet .bad-msg{font-size:12px;color:var(--stop);margin-top:4px}
.sheet-actions{display:flex;gap:8px;margin-top:20px}
.sheet-actions button{flex:1;padding:13px;border-radius:10px;font-weight:600;
     font-size:15px;border:1px solid var(--line);background:var(--card)}
.sheet-actions button.primary{background:var(--shift);border-color:var(--shift);
     color:#fff}

/* нижние вкладки кабинета */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);
     border-top:1px solid var(--line);max-width:560px;margin:0 auto;
     padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;border:0;background:none;padding:12px 2px;font-size:12px;
     color:var(--muted);border-top:2px solid transparent}
.tabs button.on{color:var(--shift);border-top-color:var(--shift);font-weight:600}

/* строки денег и отпусков */
.row-item{background:var(--card);border:1px solid var(--line);border-radius:11px;
     padding:11px 13px;margin-bottom:8px}
.row-head{display:flex;align-items:baseline;gap:10px}
.row-head .grow{flex:1;min-width:0}
.amount{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.amount.out{color:var(--shift)}
.lead{background:var(--shift-soft);border:1px solid #cfe0d7;border-radius:11px;
     padding:13px;margin-bottom:12px}
.lead .big{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.lead.attention{background:var(--warn-soft);border-color:#edd9b0}
.field{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;
     background:var(--card);border:1px solid var(--line);border-radius:11px;
     margin-bottom:6px}
.field span:first-child{color:var(--muted);font-size:14px}
.pill{display:inline-block;font-size:12px;padding:3px 8px;border-radius:12px;
     background:#eef0f1;color:var(--muted)}
.pill.act{background:var(--shift-soft);color:var(--shift);font-weight:600}

/* Выбор людей галочками: строка целиком — цель нажатия, попадать
   в маленький квадратик пальцем на ходу невозможно. */
.pick{display:flex;align-items:center;gap:11px;background:var(--card);
     border:1px solid var(--line);border-radius:11px;padding:11px 13px;
     margin-bottom:6px;width:100%;text-align:left}
.pick.on{border-color:var(--shift);background:var(--shift-soft)}
.pick .box{flex:0 0 22px;height:22px;border:2px solid var(--line);
     border-radius:6px;display:flex;align-items:center;justify-content:center;
     font-size:14px;color:#fff}
.pick.on .box{background:var(--shift);border-color:var(--shift)}
.pick .who{flex:1;min-width:0}
.pick .who b{display:block;font-weight:600;overflow:hidden;
     text-overflow:ellipsis;white-space:nowrap}
.pick .who span{font-size:12px;color:var(--muted)}
.filters{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;
     padding-bottom:2px}
.filters button{flex:0 0 auto;border:1px solid var(--line);background:var(--card);
     border-radius:16px;padding:7px 13px;font-size:13px;color:var(--muted)}
.filters button.on{border-color:var(--shift);color:var(--shift);
     background:var(--shift-soft);font-weight:600}
.bulk{position:sticky;bottom:60px;background:var(--card);border:1px solid var(--line);
     border-radius:11px;padding:10px 12px;display:flex;gap:8px;align-items:center;
     margin-top:10px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.bulk .count{flex:1;font-size:14px;font-variant-numeric:tabular-nums}
.act-btn{border:1px solid var(--shift);background:var(--card);color:var(--shift);
     border-radius:9px;padding:9px 14px;font-weight:600;font-size:14px;margin-top:10px}

.note{font-size:13px;color:var(--muted);margin:10px 0}
.err{background:var(--stop-soft);border:1px solid #f0cfcb;color:var(--stop);
     padding:10px 12px;border-radius:9px;margin:10px 0;font-size:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;
     background:var(--ink);color:#fff;padding:9px 16px;border-radius:20px;
     font-size:14px;z-index:20;max-width:90%;text-align:center}

/* вход */
.login{max-width:340px;margin:12vh auto;padding:0 20px}
.login h1{font-size:22px;margin:0 0 20px;font-weight:600}
.login label{display:block;font-size:13px;color:var(--muted);margin:14px 0 5px}
.login input{width:100%;padding:11px 12px;border:1px solid var(--line);
     border-radius:9px;background:var(--card)}
.login button{width:100%;margin-top:20px;padding:13px;border:0;border-radius:10px;
     background:var(--shift);color:#fff;font-weight:600}

@media (prefers-reduced-motion:no-preference){
  .toast{animation:rise .18s ease-out}
  @keyframes rise{from{opacity:0;transform:translate(-50%,8px)}}
}