/* Фирменные цвета «Агентство Налоговый консультант»: ярко-зелёный + графит + белый */
:root{
  --bg:#f5f7f1; --surface:#ffffff; --surface-2:#eef1e6; --border:#dbe2d2;
  --fg:#585c62; --fg-muted:#80877e;
  --accent:#585c62; --accent-soft:rgba(156,209,29,.18); --accent-ink:#ffffff;
  --brand-green:#9cd11d; --brand-dark:#585c62;
  --ok:#5e7d11; --ok-soft:rgba(156,209,29,.16);
  --warn:#b4790f; --warn-soft:rgba(180,121,15,.14);
  --danger:#c43d3d; --danger-soft:rgba(196,61,61,.12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1f23; --surface:#2a2e33; --surface-2:#34383e; --border:#454a51;
    --fg:#eef3e8; --fg-muted:#9aa79a;
    --accent:#9cd11d; --accent-soft:rgba(156,209,29,.2); --accent-ink:#2a2e33;
    --brand-green:#9cd11d; --brand-dark:#585c62;
    --ok:#9cd11d; --ok-soft:rgba(156,209,29,.18);
    --warn:#e3a53f; --warn-soft:rgba(227,165,63,.15);
    --danger:#e2676a; --danger-soft:rgba(226,103,106,.15);
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  padding-inline:16px; padding-block:20px 40px;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1260px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
h1{font-size:1.3rem; margin:0; letter-spacing:-.01em; color:#fff}
.sub{color:var(--fg-muted); font-size:.92rem; margin:2px 0 0}
.sub-small{font-size:.76rem; margin:2px 0 0; color:var(--fg-muted)}
.topbar .sub-small{color:rgba(255,255,255,.45)}
header.top{display:flex; flex-direction:row; align-items:center; gap:12px; flex:1; min-width:0}
header.top .sub{color:rgba(255,255,255,.65)}
.brand-mark{height:38px; width:38px; flex:none; border-radius:9px}
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--brand-dark); border-radius:14px; padding:14px 18px;
  border-top:3px solid var(--brand-green);
}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.topbar-actions .sub{color:rgba(255,255,255,.6)}
.btn-logout{border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:#fff; border-radius:8px; padding:8px 14px; font-size:.84rem; text-decoration:none; white-space:nowrap}
.btn-logout:hover{border-color:var(--brand-green); color:var(--brand-green); background:rgba(255,255,255,.12)}

.btn-plain{border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); border-radius:8px; padding:6px 12px; font-size:.82rem; cursor:pointer; font-family:inherit}
.btn-plain:hover{border-color:var(--danger); color:var(--danger)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; cursor:pointer}
.stat:hover{border-color:var(--accent)}
.stat.stat-active{box-shadow:0 0 0 2px var(--accent) inset}
.stat .num{font-family:"IBM Plex Mono",monospace; font-size:1.6rem; font-weight:500; font-variant-numeric:tabular-nums}
.stat .label{font-size:.78rem; color:var(--fg-muted); letter-spacing:.02em}
.stat.danger .num{color:var(--danger)}
.stat.warn .num{color:var(--warn)}
.stat.accent .num{color:var(--accent)}

.panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0}
.panel-title{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); font-weight:500}

.staff-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.staff-chip{display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 4px 2px 12px; gap:4px}
.staff-chip input{background:transparent; border:none; color:var(--fg); font:inherit; font-size:.86rem; width:7.5em; padding:5px 2px; min-width:0}
.staff-chip input:focus{outline:none}
.btn-add{border:1px dashed var(--border); background:transparent; color:var(--fg-muted); border-radius:999px; padding:6px 14px; font-size:.86rem; cursor:pointer; font-family:inherit}
.btn-add:hover{border-color:var(--accent); color:var(--accent)}
.btn-primary{border:none; background:var(--brand-green); color:var(--brand-dark); border-radius:999px; padding:8px 18px; font-size:.86rem; font-weight:600; cursor:pointer; font-family:inherit}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:disabled{opacity:.6; cursor:default}

.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.controls input[type=text]{flex:1; min-width:160px}
.check-field{display:flex; align-items:center; gap:6px; font-size:.84rem; color:var(--fg-muted); white-space:nowrap}
.check-field input{width:15px; height:15px}
input[type=text], input[type=password], input[type=number], input[type=date], select{
  background:var(--surface-2); border:1px solid var(--border); color:var(--fg);
  border-radius:8px; padding:8px 10px; font:inherit; font-size:.88rem;
}
input:focus, select:focus{outline:2px solid var(--accent); outline-offset:-1px}

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:1080px; font-size:.86rem}
thead th{
  position:sticky; top:0; background:var(--surface); text-align:left; font-weight:500;
  color:var(--fg-muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;
  padding:10px 10px; border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
tbody tr.inactive{opacity:.5}
tbody tr.inactive:hover{opacity:.85}
td.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
.client-name{font-weight:500}
.client-sub{display:block; color:var(--fg-muted); font-size:.78rem; margin-top:1px}
.chip{display:inline-block; font-size:.74rem; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--fg-muted); white-space:nowrap}
.chip.flag{background:var(--warn-soft); color:var(--warn)}

.pill{
  border:none; border-radius:999px; padding:5px 11px; font-size:.78rem; font-family:inherit;
  cursor:pointer; background:var(--surface-2); color:var(--fg-muted); white-space:nowrap;
}
.pill[data-state="сдано"], .pill[data-state="оплачено"], .pill[data-state="работаем"]{background:var(--ok-soft); color:var(--ok)}
.pill[data-state="просрочено"], .pill[data-state="ожидаем"]{background:var(--danger-soft); color:var(--danger); font-weight:500}
.pill[data-state="не работаем"]{background:var(--border); color:var(--fg-muted); font-weight:500}
.pill:hover{filter:brightness(0.97)}
.pill-mini{padding:2px 8px; font-size:.7rem; margin-top:3px}

.note-input{width:100%; min-width:120px; background:transparent; border:1px solid transparent; border-radius:6px; padding:4px 6px; color:var(--fg); font:inherit; font-size:.82rem}
.note-input:hover,.note-input:focus{border-color:var(--border); background:var(--surface-2); outline:none}

select.bk-select{font-size:.8rem; padding:5px 6px; max-width:140px; width:100%}
.roles{display:flex; flex-direction:row; align-items:center; gap:6px; min-width:150px}
.roles.roles-team{flex-direction:column; align-items:stretch; gap:3px}
.roles.roles-team label{display:flex; align-items:center; gap:4px; font-size:.68rem; color:var(--fg-muted)}
.roles.roles-team label span{width:4.6em; flex:none}
.roles.roles-team{min-width:170px}
.mode-toggle{border:1px solid var(--border); background:transparent; color:var(--fg-muted); border-radius:6px; padding:3px 6px; font-size:.82rem; cursor:pointer; align-self:flex-start; line-height:1}
.mode-toggle:hover{border-color:var(--accent); color:var(--accent)}

.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:50}
.modal-overlay[hidden]{display:none}

.note{border-bottom:1px solid var(--border); padding:10px 0}
.note:last-child{border-bottom:none}
.note-meta{font-size:.76rem; color:var(--fg-muted); margin-bottom:3px}

.empty{padding:40px 16px; text-align:center; color:var(--fg-muted)}
.foot{color:var(--fg-muted); font-size:.78rem; line-height:1.5}

/* --- login --- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; background:var(--brand-dark)}
.login-box{
  background:var(--surface); border:none; border-radius:18px; padding:36px 28px; width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 16px 32px rgba(0,0,0,.28), 0 40px 70px rgba(0,0,0,.22);
}
.login-mark{height:60px; width:60px; margin-bottom:10px}
.login-brand{font-size:1.05rem; font-weight:600; color:var(--fg); line-height:1.3; margin:0}
.login-box .sub{margin-bottom:14px}
.login-box input{width:100%; margin-top:4px}
.login-box button{background:var(--brand-green); color:var(--brand-dark); border:none; border-radius:8px; padding:10px; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer}
.login-box button:hover{filter:brightness(1.05)}
.login-error{color:var(--danger); font-size:.86rem; margin:0}

/* --- календарь и задачи (общие для рабочего места и карточки клиента) --- */
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cal-nav button{border:1px solid var(--border); background:var(--surface); color:var(--fg); border-radius:8px; padding:6px 12px; cursor:pointer; font:inherit}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-dow{text-align:center; font-size:.72rem; color:var(--fg-muted); padding-bottom:4px}
.cal-cell{border:1px solid var(--border); border-radius:8px; padding:6px; min-height:56px; cursor:pointer; background:var(--surface); display:flex; flex-direction:column; gap:3px}
.cal-cell:hover{border-color:var(--accent)}
.cal-cell.has-open{background:var(--danger-soft)}
.cal-cell.all-done{background:var(--ok-soft)}
.cal-cell.today{box-shadow:0 0 0 2px var(--accent) inset}
.cal-cell.selected{box-shadow:0 0 0 2px var(--fg) inset}
.cal-cell.other{opacity:.3}
.cal-daynum{font-size:.78rem; color:var(--fg-muted)}
.cal-badges{display:flex; gap:3px; align-self:flex-start}
.cal-badge{background:var(--danger); color:#fff; border-radius:999px; font-size:.66rem; padding:1px 6px}
.cal-badge.done{background:var(--brand-green); color:var(--brand-dark)}

.task-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border)}
.task-row:last-child{border-bottom:none}
.task-row.done .task-title{text-decoration:line-through; color:var(--fg-muted)}
.task-row input[type=checkbox]{width:17px; height:17px; flex:none}
.task-time{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:2px 6px; white-space:nowrap; flex:none}
.task-type-tag{font-size:.68rem; padding:1px 7px; border-radius:999px; white-space:nowrap; flex:none; font-weight:500}
.task-type-tag.tax{background:var(--danger-soft); color:var(--danger)}
.task-type-tag.routine{background:var(--ok-soft); color:var(--ok)}
.task-title{flex:1; min-width:0}
.task-client{font-size:.78rem; color:var(--accent); text-decoration:none}
.task-staff{font-size:.78rem; color:var(--fg-muted)}
.task-due{font-size:.76rem; color:var(--fg-muted); white-space:nowrap}
.task-due.over{color:var(--danger); font-weight:500}
.task-del{border:none; background:transparent; color:var(--fg-muted); cursor:pointer}
.task-del:hover{color:var(--danger)}
.task-edit{border:none; background:transparent; color:var(--fg-muted); cursor:pointer}
.task-edit:hover{color:var(--accent)}

.add-task-form{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px}
.add-task-form input[type=text]{flex:1; min-width:160px}
.add-task-form input[type=time]{width:110px}

.cal-wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start}
@media (max-width:760px){ .cal-wrap{grid-template-columns:1fr} }

.by-client-group{margin-bottom:14px}
.by-client-group:last-child{margin-bottom:0}
.by-client-name{font-weight:600; margin-bottom:2px}

.bk-calendar-empty{border:1px dashed var(--border); border-radius:10px; padding:16px; color:var(--fg-muted); font-size:.86rem; line-height:1.5}

.collapse-toggle{background:none; border:none; padding:0; font:inherit; color:var(--fg-muted); cursor:pointer; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:500}
.collapse-toggle:hover{color:var(--accent)}
.collapse-arrow{display:inline-block; transition:transform .15s}
.collapse-arrow.open{transform:rotate(90deg)}