@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme: light;
  --bg:#f7f7f5;--surface:#fff;--border:#e4e4e0;--border-s:#c8c8c2;
  --accent:#1a1a1a;--blue:#2563eb;--text:#1a1a1a;--muted:#6b6b63;
  --dim:#b0b0a8;--danger:#c0392b;--ok:#16a34a;--warn:#b45309;--sw:200px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}

/* SIDEBAR */
.sidebar{width:var(--sw);background:#1e2a3a;border-right:none;display:flex;flex-direction:column;flex-shrink:0;color:#fff}
.sb-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo-t{font-size:14px;font-weight:600;letter-spacing:-.3px;color:#fff}
.sb-logo-s{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.8px;text-transform:uppercase;margin-top:1px}
.nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-s{padding:10px 16px 3px;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:18px}
.nav-s:first-child{margin-top:4px}
.nav-i{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;cursor:pointer;color:rgba(255,255,255,.55);font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;transition:color .1s,background .1s;user-select:none}
.nav-i:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.06)}
.nav-i.active{color:#fff;font-weight:500;background:rgba(255,255,255,.1)}
.nav-i.active .nav-il{border-bottom:1px solid rgba(255,255,255,.6)}
.nav-il-wrap{display:flex;align-items:center;gap:10px;min-width:0}
.nav-ic{width:15px;height:15px;flex-shrink:0;opacity:.85}
.nav-ib{font-size:10px;font-weight:500;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
.sb-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.sb-foot-n{font-size:12px;font-weight:500;color:#fff}
.sb-foot-r{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:46px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 24px;gap:12px;background:#1e2a3a;flex-shrink:0;overflow:hidden}
.bc{font-size:13px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden}
.bc span{color:rgba(255,255,255,.85);font-weight:500}
.tb-act{margin-left:auto;display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn{padding:5px 12px;border-radius:3px;font-size:12px;font-family:inherit;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .1s}
.btn-p{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-p:hover{background:#333}
.btn-g{background:transparent;color:var(--muted);border-color:var(--border-s)}.btn-g:hover{color:var(--text);border-color:var(--muted)}
.btn-d{background:transparent;color:var(--danger);border-color:var(--danger)}.btn-d:hover{background:var(--danger);color:#fff}
.btn-sm{padding:3px 9px;font-size:11px}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}
/* цвет иконки Excel — для кнопки выгрузки в XLSX */
.btn-xlsx{background:#217346;color:#fff;border-color:#217346}.btn-xlsx:hover{background:#1a5c38}

.content{flex:1;overflow-y:auto;padding:28px 32px}
.page{display:none}.page.active{display:block}
.ph{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between}
.ph-t{font-size:20px;font-weight:600;letter-spacing:-.4px}
.ph-s{font-size:12px;color:var(--muted);margin-top:2px}

/* STATS */
.stats{display:grid;gap:1px;margin-bottom:28px;background:var(--border);border:1px solid var(--border)}
.stat{background:var(--surface);padding:16px 18px}
.stat-l{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px}
.stat-v{font-size:22px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.cv-blue{color:var(--blue)}.cv-ok{color:var(--ok)}.cv-warn{color:var(--warn)}
.stat-d{font-size:11px;color:var(--dim);margin-top:3px}

/* СТАВКИ СОТРУДНИКОВ (Финансы) */
.fin-rates-box{border:1px solid var(--border);background:var(--surface);margin-bottom:24px;border-radius:3px}
.fin-rates-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);user-select:none}
.fin-rates-arrow{color:var(--muted);font-size:11px;transition:transform .1s}
.fin-rates-list{padding:4px 16px 12px;display:flex;flex-direction:column;gap:2px;max-height:320px;overflow-y:auto}
.fin-rate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border)}
.fin-rate-row:last-child{border-bottom:none}
.fin-rate-name{font-size:13px;color:var(--text)}

/* TABLE */
.si{width:220px;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 10px;font-size:12px;font-family:inherit;color:var(--text);outline:none}
.si::placeholder{color:var(--dim)}.si:focus{border-color:var(--accent)}
.fc{padding:4px 10px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:inherit;border-radius:2px;transition:all .1s}
.fc:hover{border-color:var(--accent);color:var(--text)}.fc.active{background:var(--text);color:#fff;border-color:var(--text)}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:9px 16px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);border-bottom:1px solid var(--border);background:var(--bg)}
td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:14px;line-height:1.6}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .08s}
tbody tr:hover{background:#f0f0ec}
.cl{color:var(--blue);font-weight:500;cursor:pointer}
.cm{color:var(--muted);font-size:12px}
.cn{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}
.badge{display:inline-block;padding:2px 7px;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;border-radius:2px}
.bw{color:var(--blue);background:#eff6ff}.bd{color:var(--ok);background:#f0fdf4}
.bn{color:var(--warn);background:#fffbeb}.bc2{color:var(--muted);background:#f4f4f0}
.bpay{color:var(--ok);background:#f0fdf4}
.ph-hi{font-size:11px;font-weight:600;color:var(--danger)}.ph-mi{font-size:11px;color:var(--muted)}

/* ROW ACTIONS */
.row-actions{display:none;gap:4px;align-items:center}
tbody tr:hover .row-actions{display:flex}
.ra-btn{padding:2px 7px;font-size:10px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:2px;font-family:inherit;transition:all .1s;white-space:nowrap}
.ra-btn:hover{border-color:var(--muted);color:var(--text)}
.ra-pay{color:var(--blue)!important;border-color:var(--blue)!important}
.ra-del{color:var(--danger)}.ra-del:hover{border-color:var(--danger);background:var(--danger);color:#fff}

/* STATUS INLINE SELECT */
.status-sel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border:none;background:transparent;cursor:pointer;font-family:inherit;padding:0;outline:none}
/* инлайн-дропдаун статуса и приоритета */
.il-wrap{position:relative;display:inline-flex;align-items:center}
.il-val{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;white-space:nowrap;user-select:none;display:inline-flex;align-items:center;gap:4px}
.il-arrow{display:inline-block;width:8px;height:5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='currentColor' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;opacity:.7;flex-shrink:0}
.il-drop{display:none;background:var(--surface);border:1px solid var(--border);border-radius:4px;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:130px}
.il-wrap.open .il-drop{display:block;position:fixed}
.il-item{padding:7px 12px;font-size:12px;cursor:pointer;color:var(--text);white-space:nowrap;transition:background .08s}
.il-item:hover{background:var(--bg)}
.il-item.active{font-weight:600;color:var(--accent)}
.il-blue{color:var(--blue)}.il-warn{color:var(--warn)}.il-muted{color:var(--muted)}.il-danger{color:var(--danger)}.il-text{color:var(--text)}.il-ok{color:var(--ok)}
.il-urgent{color:#dc2626;font-weight:700}
.status-sel-bw{color:var(--blue)}.status-sel-bn{color:var(--warn)}.status-sel-bc2{color:var(--muted)}.status-sel-bd{color:var(--ok)}

/* PULSE */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--surface);border:1px solid var(--border);padding:16px 18px}
.card-t{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.li:last-child{border-bottom:none}
.li-n{flex:1;font-size:12px}
.li-d{font-size:11px;font-variant-numeric:tabular-nums}
.dd{color:var(--danger)}.dw{color:var(--warn)}.dn{color:var(--muted)}
.br{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.br:last-child{margin-bottom:0}
.br-l{font-size:11px;color:var(--muted);width:64px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.br-t{flex:1;height:3px;background:var(--border)}.br-f{height:100%;background:var(--text)}
.br-v{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;width:54px;text-align:right}

/* DETAIL PANEL */
.dov{position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:100;display:none;justify-content:flex-end}
.dov.open{display:flex}
/* задача открывается поверх карточки дела, не закрывая её */
#det-task.open{z-index:101}
.dp{width:520px;height:100vh;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:sIn .18s ease;position:relative}
.dp-wide{width:600px}
@keyframes sIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.dh{padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.dh-ey{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px}
.dh-t{font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:1.3;padding-right:70px}
.dh-p{font-size:11px;color:var(--muted);margin-top:5px}
.dh-p a{color:var(--blue);cursor:pointer}
.dh-actions{display:flex;gap:6px;margin-top:10px}
.dc{position:absolute;top:14px;right:16px;background:none;border:1px solid var(--border);color:var(--muted);font-size:11px;font-family:inherit;padding:2px 8px;cursor:pointer;border-radius:2px}
.dc:hover{color:var(--text);border-color:var(--muted)}
.dtabs{display:flex;border-bottom:1px solid var(--border);padding:0 20px;background:var(--bg);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.dtabs::-webkit-scrollbar{display:none}
.dtab{padding:9px 12px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .1s;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.dtab.active{color:var(--text);border-bottom-color:var(--text)}
.db{flex:1;overflow-y:auto;padding:18px 20px}
.dtc{display:none}.dtc.active{display:block}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;overflow:visible}
.fr{margin-bottom:16px}
.dt-status-val{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.fl{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:4px}
.fv{font-size:13px;overflow:visible}

/* TIME FILTER BAR (дата / сотрудник) */
/* z-index выше календаря (.drp-popup:9999), чтобы кнопки всегда оставались
   кликабельными, даже если календарь геометрически открывается поверх них */
.tfbar{display:flex;align-items:center;gap:4px;margin-bottom:12px;flex-wrap:wrap;position:relative;z-index:10000}
.tfitem{position:relative}
/* сами кнопки должны побеждать по z-index соседний .tfpop (200) внутри
   общего контекста .tfbar — иначе открытый календарь геометрически
   перекрывает соседнюю кнопку и "ворует" клик */
.tfbtn{position:relative;z-index:300;background:none;border:1px solid var(--border);border-radius:3px;color:var(--muted);font-size:12px;font-family:inherit;padding:5px 10px;cursor:pointer;transition:border-color .1s,color .1s}
.tfbtn:hover{border-color:var(--border-s,var(--muted));color:var(--text)}
.tfbtn-val{color:var(--blue);margin-left:2px}
.tfreset{margin-left:auto;font-size:12px;color:var(--danger);cursor:pointer;text-decoration:none}
.tfreset:hover{text-decoration:underline}
.tfpop{display:none;position:fixed;z-index:200;background:var(--surface);border:1px solid var(--border);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:10px;width:230px;box-sizing:border-box}
.tfpop.open{display:block}
.tfpop-wide{width:250px}
/* календарь-пикер переиспользуем как в задачах, но триггер делаем компактным
   — тот же приём, что уже используется для #bl-drp/#blr-drp и т.п. */
#dp-tf-date-drp .drp-input,#dp-tqf-date-drp .drp-input{width:210px;height:32px;padding:5px 10px;font-size:13px;box-sizing:border-box}
.tfpop-radios{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border);padding-top:8px}
.tfradio-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text);cursor:pointer;padding:3px 2px}
.tfradio-item input{accent-color:var(--accent);flex-shrink:0}
.tfpop-search{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 9px;font-size:12px;font-family:inherit;color:var(--text);outline:none;margin-bottom:8px}
.tfpop-search:focus{border-color:var(--accent)}
.tfpop-list{max-height:180px;overflow-y:auto}
.tfstaff-item{font-size:12px;padding:6px 7px;border-radius:3px;cursor:pointer;color:var(--text)}
.tfstaff-item:hover{background:var(--bg)}
.tfstaff-item.sel{background:var(--accent);color:#fff}

/* TIME */
.tsum-radio{display:flex;gap:0;border:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tsr{flex:1;min-width:75px;padding:8px 6px;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;transition:background .1s}
.tsr:last-child{border-right:none}
.tsr:hover{background:var(--bg)}
.tsr-radio{display:none}
.tsr-info{}
.tsr-l{font-size:9px;text-transform:uppercase;letter-spacing:.2px;color:var(--muted);line-height:1.3;white-space:normal}
.tsr-v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tsr.on .tsr-v{color:var(--blue)}
.tsr.on .tsr-l{color:var(--blue)}
.tlog-head{display:grid;align-items:center;padding:7px 0;border-bottom:2px solid var(--border);margin-bottom:0}
.tlog-hd{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:6px 4px}
.tli-table{width:100%;border-collapse:collapse}
.tli-thead th{border-bottom:2px solid var(--border)}
.tli-table tr{border-bottom:1px solid var(--border)}
.tli-table tr:last-child{border-bottom:none}
.tli-table td{vertical-align:middle}
.tli{display:grid;align-items:center;border-bottom:1px solid var(--border);position:relative}
.tli:last-child{border-bottom:none}
.tli-d{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums;cursor:pointer;padding:10px 0}
.tli-d:hover{text-decoration:underline}
.tli-author{display:flex;align-items:center;gap:7px;min-width:0}
.tli-av{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0}
.tli-av-name{font-size:12px;color:var(--text);min-width:0;overflow:hidden}
.tli-av-name span{display:block;font-size:10px;color:var(--dim)}
.tli-n{font-size:12px;color:var(--blue);cursor:pointer;padding:10px 0}
.tli-n:hover{text-decoration:underline}
.tli-s{font-size:12px;color:var(--muted);white-space:nowrap;padding:10px 0}
.tli-a{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;padding:10px 0}
.tli-menu{cursor:pointer;color:var(--dim);font-size:18px;padding:0 6px;border-radius:3px;line-height:1;display:flex;align-items:center;justify-content:center;position:relative;align-self:center}
.tli-menu:hover{background:var(--border);color:var(--text)}
.tli-popup{position:absolute;right:0;top:30px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:200;min-width:160px;display:none}
.tli-popup.open{display:block}
.tli-pitem{padding:8px 14px;font-size:12px;cursor:pointer;transition:background .08s;white-space:nowrap}
.tli-pitem:hover{background:var(--bg)}
.tli-pitem.del{color:var(--danger)}
.dt-timer-bar{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.dt-timer-bar-top{margin-top:0;padding-top:0;border-top:none;margin-bottom:16px}
.dt-timer-time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--warn)}
.dt-timer-btn.dt-timer-running{background:var(--warn);border-color:var(--warn);color:#fff}
.dt-timer-btn.dt-timer-running:hover{opacity:.9}
.dt-timer-btn:disabled{opacity:.5;cursor:not-allowed}
.taf{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
.ti{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 10px;font-size:12px;font-family:inherit;color:var(--text);outline:none}
.ti:focus{border-color:var(--accent)}
.tsum{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:16px}
.tc{background:var(--surface);padding:11px 14px}
.tc-l{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:4px}
.tc-v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}

/* FINANCE */
.inv-status-draft    {color:var(--muted);background:#f4f4f0}
.inv-status-sent     {color:var(--blue);background:#eff6ff}
.inv-status-partial  {color:var(--warn);background:#fffbeb}
.inv-status-paid     {color:var(--ok);background:#f0fdf4}
.inv-status-overdue  {color:var(--danger);background:#fef2f2}
.debt-zero  {color:var(--ok);font-weight:600}
.debt-pos   {color:var(--danger);font-weight:600}

/* CLIENT FINANCE CARD */
.cfc{background:var(--surface);border:1px solid var(--border);margin-bottom:12px}
.cfc-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.cfc-head:hover{background:var(--bg)}
.cfc-name{font-size:13px;font-weight:600}
.cfc-totals{display:flex;gap:20px;font-size:12px}
.cfc-tot-item{display:flex;flex-direction:column;align-items:flex-end}
.cfc-tot-l{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.cfc-tot-v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cfc-body{padding:0}
.cfc-inv-row{display:grid;grid-template-columns:130px 90px 90px 110px 110px 110px 130px 1fr;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer;transition:background .08s}
.cfc-inv-row:last-child{border-bottom:none}
.cfc-inv-row:hover{background:#f0f0ec}
.cfc-inv-row:hover .row-actions{display:flex}
.cfc-inv-row>div:nth-child(n+2):not(:last-child){text-align:center;justify-self:center}
.cfc-inv-row>div:last-child{display:flex;justify-content:flex-end}
.cfc-inv-head{display:grid;grid-template-columns:130px 90px 90px 110px 110px 110px 130px 1fr;padding:7px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.cfc-inv-head div{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.cfc-inv-head div:nth-child(n+2):not(:last-child){text-align:center}

/* PAYMENT LOG */
.pay-item{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}
.pay-item:last-child{border-bottom:none}
.pay-date{width:90px;flex-shrink:0;color:var(--muted);font-variant-numeric:tabular-nums}
.pay-note{flex:1;color:var(--muted)}
.pay-amount{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ok)}
.pay-del{color:var(--dim);cursor:pointer;padding:2px 5px;border-radius:2px;font-size:11px}
.pay-del:hover{color:var(--danger)}

/* FILTER BAR */
.fbar{background:var(--surface);border:1px solid var(--border);border-bottom:none}
.fbar-row{display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.fbar-search-row{padding:8px 14px;gap:8px}
.fbar-group{display:flex;align-items:center;gap:6px;padding:8px 12px;border-right:1px solid var(--border);flex-shrink:0}
.fbar-label{font-size:11px;color:var(--muted);white-space:nowrap}
.fbar-sel{font-size:12px;font-family:inherit;background:transparent;border:none;color:var(--text);outline:none;cursor:pointer;padding:0 16px 0 0;appearance:none;font-weight:500;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23b0b0a8' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center}
.fbar-sel.active{color:var(--blue)}
.fbar-group.has-filter .fbar-label{color:var(--blue)}
.fbar-sep{flex:1}
.fbar-reset{background:none;border:none;font-size:12px;font-weight:500;color:var(--danger);cursor:pointer;font-family:inherit;padding:8px 14px;white-space:nowrap}
.fbar-reset:hover{text-decoration:underline}
.fbar-search{flex:1;max-width:320px;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 28px 5px 10px;font-size:12px;font-family:inherit;color:var(--text);outline:none}
.fbar-search::placeholder{color:var(--dim)}
.fbar-search:focus{border-color:var(--accent)}

/* PRIORITY ROW COLORS */
tbody tr.prio-high td:first-child { box-shadow: inset 3px 0 0 rgba(192,57,43,0.5); }
tbody tr.prio-mid  td:first-child { box-shadow: inset 3px 0 0 rgba(180,83,9,0.4); }
tbody tr.prio-low  td:first-child { box-shadow: inset 3px 0 0 rgba(22,163,74,0.4); }
tbody tr.prio-high { background: rgba(192,57,43,0.035); }
tbody tr.prio-high:hover { background: rgba(192,57,43,0.08); }
tbody tr.prio-mid  { background: rgba(180,83,9,0.03); }
tbody tr.prio-mid:hover  { background: rgba(180,83,9,0.07); }
tbody tr.prio-low  { background: rgba(22,163,74,0.03); }
tbody tr.prio-low:hover  { background: rgba(22,163,74,0.07); }

/* PRIORITY ROW COLORS — task items inside project panel */
.titem.prio-high { background: rgba(192,57,43,0.04); border-left: 3px solid rgba(192,57,43,0.25); padding-left: 7px; }
.titem.prio-mid  { background: rgba(180,83,9,0.03);  border-left: 3px solid rgba(180,83,9,0.2);  padding-left: 7px; }
.titem.prio-low  { background: rgba(22,163,74,0.03);  border-left: 3px solid rgba(22,163,74,0.2);  padding-left: 7px; }

/* TASK ITEMS */
.titem{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer}
.titem:last-child{border-bottom:none}
.titem:hover .ti-n{color:var(--blue)}
.tck{width:14px;height:14px;border:1px solid var(--border-s);border-radius:2px;flex-shrink:0;margin-top:2px}
.ti-n{font-size:12px;font-weight:500;margin-bottom:4px}
.ti-m{display:flex;gap:8px;align-items:center}
.ti-mi{font-size:11px;color:var(--muted)}

/* HISTORY */
.hitem{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.hitem:last-child{border-bottom:none}
.hav{width:24px;height:24px;background:var(--bg);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0}
.hm{font-size:11px;color:var(--muted);margin-bottom:2px}
.ht{font-size:12px}

/* CLIENT CHIP */
.cchip{display:flex;align-items:center;gap:8px}
.cini{width:24px;height:24px;border-radius:2px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0}

/* BILLING INVOICE */
.invoice-box{border:1px solid var(--border);padding:16px 18px;margin-bottom:16px}
.invoice-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.invoice-row:last-child{border-bottom:none}
.invoice-total{display:flex;justify-content:space-between;padding-top:10px;font-weight:600;font-size:14px;border-top:2px solid var(--border);margin-top:4px}

/* MODAL */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:52px 16px 16px;overflow-y:auto}
.mov.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);width:560px;max-height:calc(100vh - 104px);display:flex;flex-direction:column;animation:mIn .15s ease;overflow:hidden;flex-shrink:0;margin:auto}
.modal-w{width:640px}
@keyframes mIn{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
.mh{padding:16px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0}
.mh-t{font-size:14px;font-weight:600;letter-spacing:-.2px}
.mh-s{font-size:11px;color:var(--muted);margin-top:2px}
.mc-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:11px;font-family:inherit;padding:2px 8px;cursor:pointer;border-radius:2px;margin-top:1px;flex-shrink:0}
.mc-btn:hover{color:var(--text);border-color:var(--muted)}
.mh-close{background:none;border:none;width:28px;height:28px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}
.mh-close:hover{background:var(--bg);color:var(--text)}
.mb{padding:20px;overflow-y:auto;flex:1}
.mf{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--bg)}
.mf-left{margin-right:auto}

/* FORM */
.frow{margin-bottom:16px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
/* Приоритет/Срок в задаче — сузили первую колонку, чтобы у диапазона дат
   было достаточно места и он не обрезался многоточием (см. .drp-val) */
.frow2-prio-due{grid-template-columns:112px 1fr}
/* без min-width:0 grid-колонка растягивается по ширине длинного текста (например,
   длинного названия дела в кастомном селекте) вместо того, чтобы обрезать его
   многоточием — из-за этого текст "сползает" за границы модалки */
.frow2 > div{min-width:0}
.frow3{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px;margin-bottom:16px;overflow:visible;align-items:start}
.flabel{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:5px}
.flabel .req{color:var(--danger);margin-left:2px}
.finput,.fselect,.ftarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;transition:border-color .1s;appearance:none}
.finput:focus,.fselect:focus,.ftarea:focus{border-color:var(--accent)}
/* searchable client dropdown */
.cs-wrap{position:relative;width:100%}
.cs-trigger{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .1s;box-sizing:border-box}
.cs-trigger:hover,.cs-wrap.open .cs-trigger{border-color:var(--accent)}
.cs-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-val.placeholder{color:var(--muted)}
.cs-arrow{font-size:10px;color:var(--muted);flex-shrink:0;margin-left:6px;transition:transform .15s}
.cs-wrap.open .cs-arrow{transform:rotate(180deg)}
.cs-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:4px;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.12);overflow:hidden;display:none}
.cs-wrap.open .cs-drop{display:block}
/* показ/скрытие пароля (модалка "Новый сотрудник" + окно авторизации) */
.fpass-wrap{position:relative}
.fpass-wrap .finput{padding-right:34px}
.login-pass-inputwrap{position:relative}
.login-pass-inputwrap .login-pass{padding-right:34px}
.fpass-eye,.login-pass-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:var(--muted);opacity:.6;display:flex;align-items:center;justify-content:center}
.fpass-eye:hover,.login-pass-eye:hover{opacity:1;color:var(--text)}
.fpass-eye.pw-visible,.login-pass-eye.pw-visible{opacity:1;color:var(--accent)}
.cs-search-wrap{padding:8px}
.cs-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:6px 10px;font-size:13px;font-family:inherit;color:var(--text);outline:none;box-sizing:border-box}
.cs-search:focus{border-color:var(--accent)}
.cs-list{max-height:200px;overflow-y:auto}
.cs-item{padding:8px 12px;font-size:13px;cursor:pointer;color:var(--text);transition:background .08s}
.cs-item:hover{background:var(--bg)}
.cs-item.selected{color:var(--accent);font-weight:500}
.cs-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}
.finput::placeholder,.ftarea::placeholder{color:var(--dim)}
.fselect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b0b0a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
.ftarea{resize:vertical;min-height:72px;line-height:1.5}
.fhint{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.fsec{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);padding:14px 0 8px;border-top:1px solid var(--border);margin-top:4px}
.fsec:first-child{padding-top:0;border-top:none;margin-top:0}
.psbar{display:flex;border:1px solid var(--border);border-radius:3px;overflow:hidden;margin-bottom:16px}
.psopt{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:500;cursor:pointer;border-right:1px solid var(--border);background:var(--surface);color:var(--muted);transition:all .1s}
.psopt:last-child{border-right:none}
.psopt.active{background:var(--blue);color:#fff}
.actsel{display:flex;gap:8px;flex-wrap:wrap}
.actopt{padding:5px 12px;border:1px solid var(--border);border-radius:2px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;background:var(--surface);color:var(--muted);transition:all .1s}
.actopt.active{background:var(--text);color:#fff;border-color:var(--text)}
.actopt:hover:not(.active){border-color:var(--muted);color:var(--text)}
.alist-wrap{border:1px solid var(--border);border-radius:3px}
.alist-search-wrap{padding:7px;border-bottom:1px solid var(--border);background:var(--surface)}
.alist-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 9px;font-size:13px;font-family:inherit;color:var(--text);outline:none;box-sizing:border-box}
.alist-search:focus{border-color:var(--accent)}
.alist-items{max-height:160px;overflow-y:auto}
.aitem{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .08s}
.aitem:last-child{border-bottom:none}.aitem:hover{background:var(--bg)}
.aitem input[type=checkbox]{accent-color:var(--accent);flex-shrink:0}
.aini{width:22px;height:22px;border-radius:2px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0}
.aname{font-size:12px}
.atags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:22px}
.atag{display:flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid var(--border);font-size:11px;border-radius:2px;background:var(--bg)}
.atr{cursor:pointer;color:var(--dim);font-size:12px;line-height:1}.atr:hover{color:var(--danger)}

/* CONFIRM DIALOG */
.confirm-ov{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:300;display:none;align-items:center;justify-content:center}
.confirm-ov.open{display:flex}
.confirm-box{background:var(--surface);border:1px solid var(--border);padding:24px;width:360px;animation:mIn .12s ease}
.confirm-t{font-size:14px;font-weight:600;margin-bottom:6px}
.confirm-s{font-size:12px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.confirm-f{display:flex;gap:8px;justify-content:flex-end}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--text);color:#fff;padding:10px 16px;font-size:12px;font-weight:500;border-radius:3px;z-index:400;opacity:0;transform:translateY(8px);transition:all .2s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* EMPTY */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-t{font-size:14px;font-weight:500;margin-bottom:6px}
.empty-s{font-size:12px;color:var(--dim)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ══ REPORTS ══ */
.rep-tabs{display:flex;border:1px solid var(--border);border-bottom:none;background:var(--surface)}
.rep-tab{padding:10px 16px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .1s;margin-bottom:-1px}
.rep-tab.active{color:var(--text);border-bottom-color:var(--text)}
.rep-tab:hover:not(.active){color:var(--text);background:var(--bg)}
.rep-period{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-bottom:none;border-top:none;margin-left:auto}
.rep-period-label{font-size:11px;color:var(--muted)}
.rep-period-sel{font-size:12px;font-family:inherit;background:transparent;border:1px solid var(--border);border-radius:3px;padding:4px 24px 4px 8px;color:var(--text);outline:none;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23b0b0a8' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center}
.rep-period-sel:focus{border-color:var(--accent)}
#rep-period + .ss-wrap .ss-trigger,
.ss-wrap[data-id="rep-period"] .ss-trigger{border:1px solid var(--border);border-radius:3px;background:transparent}
#rep-period-ss{width:auto}
#rep-period-ss .ss-trigger{min-height:28px;padding:4px 28px 4px 10px;font-size:12px;width:auto}

.rep-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-top:none;margin-bottom:20px}

.rep-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rep-card{background:var(--surface);border:1px solid var(--border);padding:16px 18px}
.rep-card-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}

.rep-table-head{display:grid;column-gap:28px;padding:7px 0;border-bottom:1px solid var(--border);margin-bottom:2px}
.rep-table-head div{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}
.rep-table-head div.ca{text-align:center}
.rep-row{display:grid;column-gap:28px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.rep-row > div{text-align:left}
.rep-row > div.ca,.rep-row > div.ca.rep-num{text-align:center}
.rep-row:last-child{border-bottom:none}
.rep-row:hover{background:var(--bg);margin:0 -18px;padding:10px 18px}

.rep-av{width:28px;height:28px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0}
.rep-bar-wrap{height:4px;background:var(--border);border-radius:2px;overflow:hidden;max-width:120px}
.rep-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s}
.rep-num{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.rep-num-bold{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rep-empty{font-size:12px;color:var(--dim);padding:16px 0;text-align:center}
.ra{text-align:right}
.ca{text-align:center}

/* COLUMN CHART */
.rep-chart-wrap{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:10px}
.rep-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.rep-col-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%}
.rep-col-bar{width:100%;background:var(--blue);border-radius:2px 2px 0 0;min-height:2px;transition:height .3s}
.rep-col-label{font-size:9px;color:var(--dim);text-align:center;margin-top:4px;white-space:pre;line-height:1.3}

@media(max-width:900px){.rep-grid-2{grid-template-columns:1fr}}

/* ══ LOGIN ══ */
.login-overlay{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
}
.login-box{
  background:var(--surface);border:1px solid var(--border);
  width:360px;padding:0;
}
.login-header{
  padding:24px 28px 20px;border-bottom:1px solid var(--border);
}
.login-logo{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:3px}
.login-sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.login-body{padding:24px 28px}
.login-field-wrap{margin-bottom:14px}
.login-pass-wrap{margin-bottom:16px}
.login-pass-label{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.8px;color:var(--muted);margin-bottom:5px;display:block;
}
.login-pass{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:8px 10px;font-size:13px;
  font-family:inherit;color:var(--text);outline:none;box-sizing:border-box;
}
.login-pass:focus{border-color:var(--accent)}
.login-pass::placeholder{color:var(--dim)}
.login-err{
  font-size:11px;color:var(--danger);margin-bottom:12px;
  display:none;min-height:16px;
}
.login-err.show{display:block}
.login-btn{
  width:100%;padding:10px;font-size:13px;font-weight:500;
  font-family:inherit;background:var(--accent);color:#fff;
  border:none;cursor:pointer;border-radius:3px;
  transition:background .1s;
}
.login-btn:hover{background:#333}
.login-btn:disabled{background:#4a4a4a;color:rgba(255,255,255,.6);cursor:not-allowed}
.login-btn:disabled:hover{background:#4a4a4a}
/* badge styles */
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-green{background:rgba(34,197,94,.15);color:#16a34a}
.badge-red{background:rgba(239,68,68,.15);color:#dc2626}
/* staff table helpers */
.row-muted td{color:var(--muted)}
.av-sm{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:1px solid var(--border);
  font-size:10px;font-weight:700;color:var(--muted);
  vertical-align:middle;margin-right:6px;
}
.btn-warn{border-color:#dc2626;color:#dc2626}
.btn-warn:hover{background:rgba(239,68,68,.08)}
.btn-ok{border-color:#16a34a;color:#16a34a}
.ra-fin-on{border-color:#16a34a;color:#16a34a}
.ra-off{border-color:#dc2626;color:#dc2626}
.btn-ok:hover{background:rgba(34,197,94,.08)}
/* current user chip in topbar */
.user-chip{
  display:flex;align-items:center;gap:7px;
  padding:3px 10px 3px 4px;
  border:1px solid rgba(255,255,255,.2);border-radius:20px;
  cursor:pointer;transition:border-color .1s;
  margin-left:8px;
}
.user-chip:hover{border-color:rgba(255,255,255,.5)}
.user-chip-av{
  width:22px;height:22px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;
}
.user-chip-name{font-size:11px;font-weight:500;color:rgba(255,255,255,.8)}

/* ══ COMMENTS ══ */
.comment-item{padding:10px 0;border-bottom:1px solid var(--border)}
.comment-item:last-child{border-bottom:none}
.comment-body{min-width:0}
.comment-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.comment-author{font-size:12px;font-weight:600;color:var(--text)}
.comment-author-me{color:var(--blue)}
.comment-date{font-size:11px;color:var(--dim)}
.comment-del{font-size:11px;color:var(--muted);font-weight:600;cursor:pointer;margin-left:auto}
.comment-del:hover{color:var(--danger)}
.comment-text{font-size:12px;line-height:1.5;color:var(--text);white-space:pre-wrap;word-break:break-word}
.comment-input-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end}
.comment-textarea{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:8px 10px;font-size:12px;font-family:inherit;color:var(--text);outline:none;resize:none;min-height:38px;max-height:120px;line-height:1.5}
.comment-textarea:focus{border-color:var(--accent)}
.comment-textarea::placeholder{color:var(--dim)}

/* ══ ПОДЗАДАЧИ ══ */
.subtask-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.subtask-item:last-child{border-bottom:none}
.subtask-check{width:15px;height:15px;flex-shrink:0;cursor:pointer;accent-color:var(--blue)}
.subtask-name{flex:1;font-size:12px;color:var(--text);min-width:0;overflow-wrap:break-word}
.subtask-done .subtask-name{color:var(--dim);text-decoration:line-through}
.subtask-date{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.subtask-del{font-size:12px;color:var(--muted);cursor:pointer;flex-shrink:0;padding:0 2px}
.subtask-del:hover{color:var(--danger)}

/* ══ МАССОВЫЕ ДЕЙСТВИЯ НАД ЗАДАЧАМИ ══ */
.bulk-bar{display:none;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-top:none;font-size:12px}
.bulk-bar span{font-weight:600;color:var(--text);white-space:nowrap}
.bulk-action-pop{
  display:none;position:fixed;z-index:500;min-width:190px;max-height:280px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);padding:6px;
}
.bulk-pop-item{padding:7px 10px;font-size:12px;cursor:pointer;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-pop-item:hover{background:var(--bg)}
.bulk-resp-pop .ss-search{width:100%;box-sizing:border-box;margin-bottom:6px}
.bulk-resp-list{max-height:200px;overflow-y:auto}

/* ══ GLOBAL SEARCH ══ */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:80px}
.search-box{background:var(--surface);border:1px solid var(--border);width:560px;max-height:60vh;display:flex;flex-direction:column;box-shadow:0 8px 32px rgba(0,0,0,.12);animation:mIn .12s ease}
.search-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.search-icon{font-size:14px;color:var(--muted)}
.search-input{flex:1;background:transparent;border:none;font-size:14px;font-family:inherit;color:var(--text);outline:none}
.search-input::placeholder{color:var(--dim)}
.search-kbd{font-size:11px;color:var(--muted);font-weight:600;border:1px solid var(--border);padding:1px 5px;border-radius:3px;font-family:monospace}
.search-results{overflow-y:auto;flex:1}
.search-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .08s;border-bottom:1px solid var(--border)}
.search-item:last-child{border-bottom:none}
.search-item:hover,.search-item:focus{background:var(--bg);outline:none}
.search-item-icon{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.search-item-body{flex:1;min-width:0}
.search-item-label{font-size:13px;font-weight:500;white-space:normal;word-break:break-word}
.search-item-sub{font-size:11px;color:var(--muted);margin-top:1px;white-space:normal;word-break:break-word}
.search-item-type{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);flex-shrink:0}
.search-empty{padding:24px;text-align:center;font-size:12px;color:var(--dim)}
.search-footer{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:12px;flex-shrink:0}
.search-hint{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px}
.search-hint kbd{border:1px solid var(--border);padding:1px 4px;border-radius:2px;font-family:monospace;font-size:9px}

/* ══ TABLE HEADER ABBREVIATIONS ══ */
.th-short{display:none}
.th-full{display:inline}

@media(max-width:1100px){
  .th-full{display:none}
  .th-short{display:inline}
}

/* ══ TABLE SCROLL WRAPPER ══
   .tw wraps every table; the table itself never overflows the page.
   On any screen narrower than the table's natural width it scrolls
   horizontally while the rest of the layout stays put.
═══════════════════════════ */
.tw{
  overflow-x:auto;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.tw table{
  /* never collapse below these widths — keeps columns readable */
  min-width:680px;
  white-space:nowrap;
  table-layout:fixed;
}
/* группировка списков (задачи по делу/ответственному/приоритету, дела по
   клиенту) — каждая группа отдельной карточкой со своей рамкой, отступом и
   собственной шапкой таблицы, чтобы группы визуально не сливались друг с другом */
.task-group-card{
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  margin-bottom:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.task-group-card:last-child{margin-bottom:0}
.task-group-card-head{
  padding:12px 16px;font-size:14px;font-weight:700;color:var(--text);
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.task-group-card-cnt{font-size:12px;font-weight:500;color:var(--muted);flex-shrink:0}
.task-group-card table{width:100%;min-width:0}
.task-group-card tbody tr:last-child td{border-bottom:none}

/* дела: центрируем колонки Ответственный/Задач/Время/Статус в карточках групп */
#pr-grouped .task-group-card td:nth-child(2),
#pr-grouped .task-group-card td:nth-child(3),
#pr-grouped .task-group-card td:nth-child(4),
#pr-grouped .task-group-card td:nth-child(5),
#pr-grouped .task-group-card th:nth-child(2),
#pr-grouped .task-group-card th:nth-child(3),
#pr-grouped .task-group-card th:nth-child(4),
#pr-grouped .task-group-card th:nth-child(5){text-align:center}
#pr-grouped .task-group-card td:first-child .cl{font-size:12px}

/* finance invoices table is wider */
#tb-inv{min-width:860px}
.tw:has(#tb-inv){min-width:unset;overflow-x:auto}
.tw:has(#tb-inv) table{min-width:860px;table-layout:fixed;width:100%}

/* finance table: номер, клиент, дело, выставлен, срок, сумма, оплачено, долг, статус */
#page-finance table th:nth-child(1),#page-finance table td:nth-child(1){width:120px}
#page-finance table th:nth-child(2),#page-finance table td:nth-child(2){width:130px;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip}
#page-finance table th:nth-child(3),#page-finance table td:nth-child(3){width:110px;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip}
#page-finance table th:nth-child(4),#page-finance table td:nth-child(4){width:90px;text-align:center}
#page-finance table th:nth-child(5),#page-finance table td:nth-child(5){width:90px;text-align:center}
#page-finance table th:nth-child(6),#page-finance table td:nth-child(6){width:100px;text-align:right}
#page-finance table th:nth-child(7),#page-finance table td:nth-child(7){width:90px;text-align:right}
#page-finance table th:nth-child(8),#page-finance table td:nth-child(8){width:100px;text-align:right}
#page-finance table th:nth-child(9),#page-finance table td:nth-child(9){width:auto;text-align:center}

/* ── Finance: По делам — двухуровневая иерархия ── */
.fpc{margin-bottom:16px;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.fpc-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--surface);cursor:pointer;user-select:none}
.fpc-head:hover{background:var(--bg)}
.fpc-name-wrap{display:flex;align-items:center;gap:8px}
.fpc-name-wrap .ra-btn{opacity:0;transition:opacity .15s}
.fpc-head:hover .fpc-name-wrap .ra-btn{opacity:1}
.fpc-name{font-size:13px;font-weight:700;color:var(--text)}
.fpc-totals{display:flex;gap:12px;font-size:12px;color:var(--muted);align-items:center}
.fpc-body{padding:12px 16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}

/* Карточка одного дела */
.fpj{border:1px solid var(--border);border-radius:3px;overflow:hidden;background:var(--surface)}
.fpj-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;border-bottom:1px solid transparent}
.fpj-head:hover{background:var(--bg)}
.fpj-body:not([style*="none"]) ~ .fpj-head,
.fpj-head + .fpj-body{border-top:1px solid var(--border)}
.fpj-name-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fpj-filters{display:flex;gap:4px;align-items:center}
.fpj-name{font-size:12px;font-weight:600;color:var(--text)}
.fpj-btn-add{padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--blue);background:transparent;color:var(--blue);border-radius:3px;font-family:inherit;transition:all .1s;white-space:nowrap}
.fpj-btn-add:hover{background:var(--blue);color:#fff}
.fpj-cnt{font-size:11px;font-weight:400;color:var(--muted);margin-left:6px}
.fpj-stats{display:flex;gap:0;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.fpj-stat{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-right:1px solid var(--border);min-width:90px}
.fpj-stat:last-child{border-right:none}
.fpj-stat-l{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);white-space:nowrap}
.fpj-stat-v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.fpj-body{padding:0}

/* thin scroll-bar on the wrapper — visible hint that table scrolls */
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-track{background:var(--bg)}
.tw::-webkit-scrollbar-thumb{background:var(--border-s);border-radius:3px}
.tw::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* column min-widths so cells don't squash */
/* clients table */
#page-clients table th:nth-child(1),
#page-clients table td:nth-child(1){min-width:180px;width:30%}
#page-clients table th:nth-child(2),
#page-clients table td:nth-child(2){min-width:70px;width:70px;text-align:center}
#page-clients table th:nth-child(3),
#page-clients table td:nth-child(3){min-width:50px;width:50px;text-align:center}
#page-clients table th:nth-child(4),
#page-clients table td:nth-child(4){min-width:130px;width:20%;text-align:center}
#page-clients table th:nth-child(5),
#page-clients table td:nth-child(5){min-width:90px;width:90px;text-align:center}
#page-clients table th:nth-child(6),
#page-clients table td:nth-child(6){width:100px;min-width:100px}

/* projects table — 6 cols: name, resp, tasks, time, status, actions */
#page-projects .tw table{table-layout:auto}
#page-projects table th:nth-child(1),
#page-projects table td:nth-child(1){min-width:200px;width:40%}
#page-projects table th:nth-child(2),
#page-projects table td:nth-child(2){min-width:130px;width:20%;text-align:center}
#page-projects table th:nth-child(3),
#page-projects table td:nth-child(3){min-width:55px;width:55px;text-align:center}
#page-projects table th:nth-child(4),
#page-projects table td:nth-child(4){min-width:60px;width:60px;text-align:center}
#page-projects table th:nth-child(5),
#page-projects table td:nth-child(5){min-width:90px;width:90px;text-align:center;overflow:visible}
#page-projects table th:nth-child(6),
#page-projects table td:nth-child(6){width:170px;min-width:170px;overflow:visible;text-align:right}

/* ══ TASKS TABLE ══════════════════════════════════════════════════════ */
#page-tasks .tw table{table-layout:fixed;min-width:860px;white-space:nowrap}
#page-tasks table td{text-overflow:clip;overflow:hidden}
#page-tasks table td:nth-child(1){text-align:center;overflow:visible}
#page-tasks table td:nth-child(2){text-align:left}
#page-tasks table td:nth-child(3){text-align:center}
#page-tasks table td:nth-child(4){text-align:center}
#page-tasks table td:nth-child(4) .il-wrap{display:block;width:fit-content;margin-left:26px}
#page-tasks table td:nth-child(5) .il-wrap{display:block;width:fit-content;margin-left:12px}
#page-tasks table th:nth-child(4){padding-left:20px}
#page-tasks table td:nth-child(5){text-align:center}
#page-tasks table td:nth-child(6){text-align:center}
#page-tasks table td:nth-child(7){text-align:center}
/* колонка "Создана" удалена (было nth-child(8)) — колонка действий сдвинулась
   с nth-child(9) на nth-child(8), стили объединены в одно правило */
#page-tasks table td:nth-child(8){text-align:right;overflow:visible;padding-right:12px}
/* ══════════════════════════════════════════════════════════════════════ */

/* billing table */
#page-billing table th:nth-child(1),
#page-billing table td:nth-child(1){min-width:80px;width:80px}
#page-billing table th:nth-child(2),
#page-billing table td:nth-child(2){min-width:140px;width:20%}
#page-billing table th:nth-child(3),
#page-billing table td:nth-child(3){min-width:130px;width:18%}
#page-billing table th:nth-child(4),
#page-billing table td:nth-child(4){min-width:110px;width:14%}
#page-billing table th:nth-child(5),
#page-billing table td:nth-child(5){min-width:100px;width:100px}
#page-billing table th:nth-child(6),
#page-billing table td:nth-child(6){min-width:90px;width:90px}
#page-billing table th:nth-child(7),
#page-billing table td:nth-child(7){min-width:70px;width:70px}
#page-billing table th:nth-child(8),
#page-billing table td:nth-child(8){width:110px;min-width:110px}

/* Long text cells — clip with ellipsis instead of wrapping */
.tw table td{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* but name/link cells keep their link style */
.tw table td .cl{
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
  max-width:100%;
}
/* action cells never clip */
.tw table td:last-child{
  overflow:visible;
  white-space:nowrap;
}
/* Задачи: колонка "Дело" — не обрезаем эллипсисом, переносим по словам,
   чтобы было видно полное название дела даже без фильтрации */
.tw table td.task-case-col{
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  text-overflow:clip;
  line-height:1.3;
}
.tw table th.task-case-col{
  white-space:normal;
}
/* Задачи: чуть уменьшенный шрифт названия задачи в таблице */
#tb-tk .cl,
#tasks-grouped-view .cl{
  font-size:13px;
}
/* Универсальный класс для ячеек, где текст не должен обрезаться
   эллипсисом — переносится по словам целиком (Биллинг → Записи: Дело/Задача) */
.tw table td.wrap-cell,
.tw table th.wrap-cell{
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  text-overflow:clip;
  line-height:1.3;
}
.tw table td.wrap-cell .cl{
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  text-overflow:clip;
  display:inline;
  max-width:none;
}

/* ══ MOBILE ══ */
@media(max-width:768px){
  :root{--sw:0px}
  .sidebar{position:fixed;left:-240px;width:240px;z-index:90;transition:left .2s;height:100vh}
  .sidebar.mobile-open{left:0;box-shadow:4px 0 20px rgba(0,0,0,.15)}
  .main{width:100vw}
  .topbar{padding:0 12px;gap:8px}
  .tb-act{gap:6px}
  .tb-act .btn-g{display:none}
  .user-chip-name{display:none}
  .content{padding:12px}
  .mobile-menu-btn{display:flex !important}
  .stats{grid-template-columns:repeat(2,1fr) !important}
  .pgrid{grid-template-columns:1fr !important}
  .rep-grid-2{grid-template-columns:1fr !important}
  .cfc-inv-head,.cfc-inv-row{grid-template-columns:90px 1fr 80px 70px !important}
  .cfc-inv-head div:nth-child(n+5),.cfc-inv-row div:nth-child(n+5){display:none}
  .dp,.dp-wide{width:100vw !important}
  .modal,.modal-w{width:calc(100vw - 24px) !important}
  .mov{padding-top:24px;align-items:flex-end;padding-top:0}
  .modal,.modal-w{max-height:90vh;border-radius:0}
  .fbar-row{overflow-x:auto;flex-wrap:nowrap}
  .fbar-group{flex-shrink:0}
  .login-box{width:calc(100vw - 32px)}
  .search-box{width:calc(100vw - 24px)}
  .tsum-radio{flex-wrap:wrap}
  .tsr{min-width:120px}
  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:89;display:none}
  .mobile-overlay.show{display:block}
  .bc{font-size:12px}
  .ph-t{font-size:16px}
  /* on phones, content area must not overflow horizontally */
  .content{overflow-x:hidden}
  /* the .tw scroll stays contained within the visible area */
  .tw{max-width:calc(100vw - 24px)}
}
@media(min-width:769px){
  .mobile-menu-btn{display:none !important}
}

/* ══ PROJECTS GROUPED BY CLIENT ══ */
.pr-bar{display:flex;align-items:center;gap:8px;padding:0 0 16px;flex-wrap:wrap}

.pr-group{border:1px solid var(--border);border-radius:4px;margin-bottom:10px;overflow:hidden;background:var(--surface)}

.pr-group-hd{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;cursor:pointer;
  background:var(--surface);
  transition:background .1s;
  user-select:none;
  border-bottom:1px solid var(--border);
}
.pr-group-hd:hover{background:var(--bg)}

.pr-group-name{font-size:13px;font-weight:600;color:var(--text);flex:1}
.pr-group-cnt{font-size:11px;color:var(--muted);flex-shrink:0}
.pr-group-arrow{font-size:12px;color:var(--dim);flex-shrink:0;transition:transform .15s;line-height:1}

.pr-group-body{border-top:none}
.pr-group-body table{min-width:560px}
.pr-group-body .tw{border-radius:0}

/* no top border on table inside group */
.pr-group-body thead th{background:var(--bg)}
.pr-group-body tbody tr:last-child td{border-bottom:none}

.empty-state{padding:32px;text-align:center;font-size:12px;color:var(--dim)}

/* ══ CLIENT DRAWER ══ */
.dc-deal-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .08s;
  border-radius:2px;
}
.dc-deal-item:last-child{border-bottom:none}
.dc-deal-item:hover{background:var(--bg);padding-left:6px;margin-left:-6px;padding-right:6px}

.dc-deal-num{
  font-size:11px;font-weight:600;color:var(--muted);
  min-width:68px;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.dc-deal-info{flex:1;min-width:0}
.dc-deal-name{
  font-size:13px;font-weight:500;color:var(--blue);
  white-space:normal;word-break:break-word;
  margin-bottom:3px;
}
.dc-deal-meta{font-size:11px;color:var(--muted)}
.dc-deal-right{flex-shrink:0}

.info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;
  padding-top:4px;
}

/* ══ PROJECTS: CLIENT HEADER ROWS ══ */
/* remove old card-group styles */
.pr-group{all:unset}
.pr-group-hd,.pr-group-body,.pr-group-name,.pr-group-cnt,.pr-group-arrow{all:unset}

tr.pr-client-row{cursor:pointer}
tr.pr-client-row td{
  background:var(--bg);
  padding:0 !important;
  border-bottom:1px solid var(--border-s) !important;
}
tr.pr-client-row:hover td{background:#efefed}

.pr-client-hd{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;
}
.pr-client-arrow{
  font-size:11px;color:var(--muted);
  transition:transform .15s;
  flex-shrink:0;line-height:1;
}
.pr-client-name{
  font-size:14px;font-weight:700;
  color:var(--text);flex:1;
  letter-spacing:.01em;
}
.pr-client-cnt{
  font-size:12px;color:var(--muted);flex-shrink:0;
  width:170px;text-align:right;padding-right:4px;
}

tr.pr-deal-row td{
  font-size:12px;
}
tr.pr-deal-row td:first-child{
  padding-left:28px !important;
}
/* центрирование колонок в строках дел */
tr.pr-deal-row td:nth-child(2),
tr.pr-deal-row td:nth-child(3),
tr.pr-deal-row td:nth-child(4),
tr.pr-deal-row td:nth-child(5),
tr.pr-deal-row td:nth-child(6){text-align:center}
#pr-grouped thead th:nth-child(2),
#pr-grouped thead th:nth-child(3),
#pr-grouped thead th:nth-child(4),
#pr-grouped thead th:nth-child(5),
#pr-grouped thead th:nth-child(6){text-align:center}
tr.pr-deal-row td .cl{
  font-size:12px;
}
tr.pr-deal-row:last-child td{border-bottom:2px solid var(--border-s) !important}

/* ══ DRAFT BANNER ══ */
.draft-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 16px;
  background:#fefce8;border-bottom:1px solid #fde68a;
  font-size:12px;color:#92400e;
}
.draft-banner-btns{display:flex;gap:6px;flex-shrink:0}
.draft-banner-btns button{
  font-size:11px;font-weight:500;padding:3px 10px;border-radius:3px;
  cursor:pointer;border:1px solid currentColor;background:transparent;
  transition:background .1s;
}
.draft-banner-btns button:first-child{color:#92400e}
.draft-banner-btns button:first-child:hover{background:#fde68a}
.draft-banner-btns button:last-child{color:#b45309}
.draft-banner-btns button:last-child:hover{background:#fed7aa;border-color:#b45309}

/* ══ BELL BUTTON ══ */
.bell-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:6px;border:1px solid rgba(255,255,255,.2);
  background:transparent;cursor:pointer;color:rgba(255,255,255,.6);
  transition:color .1s,background .1s;flex-shrink:0;
}
.bell-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.bell-btn.bell-alert{color:var(--danger);border-color:#fca5a5;background:#fff5f5}
.bell-badge{
  position:absolute;top:-5px;right:-5px;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--danger);color:#fff;
  font-size:10px;font-weight:600;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);
}

/* ══ ОПОВЕЩЕНИЯ О БЕЗОПАСНОСТИ (только партнёры/admin) — тот же паттерн окна,
   что и "Просроченные задачи" (#overdue-overlay/#overdue-panel) ══ */
#sec-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  z-index:200;display:flex;align-items:flex-start;justify-content:flex-end;
  padding:56px 16px 0;
}
#sec-panel{
  width:400px;max-width:calc(100vw - 32px);
  background:var(--surface);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 80px);overflow:hidden;
  animation:ovSlide .18s ease;
}
#sec-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#sec-title{font-size:13px;font-weight:600;color:var(--text)}
#sec-close{
  background:none;border:none;cursor:pointer;
  font-size:14px;color:var(--muted);padding:2px 6px;border-radius:4px;
}
#sec-close:hover{background:var(--bg);color:var(--text)}
#sec-list{overflow-y:auto;flex:1;padding:4px 0}
.sec-alerts-empty{padding:24px 16px;font-size:12px;color:var(--dim);text-align:center}
.sec-alert-item{position:relative;padding:10px 34px 10px 16px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text)}
.sec-alert-item:last-child{border-bottom:none}
.sec-alert-meta{color:var(--muted);margin-top:2px}
.sec-alert-del{position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;font-size:12px;color:var(--muted);padding:2px 6px;border-radius:4px}
.sec-alert-del:hover{background:var(--bg);color:var(--danger)}

/* ══ OVERDUE PANEL ══ */
#overdue-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.25);
  z-index:200;display:flex;align-items:flex-start;justify-content:flex-end;
  padding:56px 16px 0;
}
#overdue-panel{
  width:400px;max-width:calc(100vw - 32px);
  background:var(--surface);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  max-height:calc(100vh - 80px);overflow:hidden;
  animation:ovSlide .18s ease;
}
@keyframes ovSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

#overdue-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#overdue-title{font-size:13px;font-weight:600;color:var(--text)}
#overdue-close{
  background:none;border:none;cursor:pointer;
  font-size:14px;color:var(--muted);padding:2px 6px;border-radius:4px;
}
#overdue-close:hover{background:var(--bg);color:var(--text)}

#overdue-tabs{
  display:flex;gap:4px;padding:10px 16px 6px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.ov-tab{
  font-size:12px;font-weight:500;padding:4px 12px;
  border-radius:4px;border:1px solid var(--border);
  background:transparent;cursor:pointer;color:var(--muted);
  transition:all .1s;
}
.ov-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.ov-tab:hover:not(.active){background:var(--bg);color:var(--text)}

#overdue-list{overflow-y:auto;flex:1;padding:4px 0}

.ov-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;cursor:pointer;
  transition:background .08s;
  border-bottom:1px solid var(--border);
}
.ov-item:last-child{border-bottom:none}
.ov-item:hover{background:var(--bg)}
.ov-item-left{flex:1;min-width:0}
.ov-item-name{
  font-size:12px;font-weight:500;color:var(--text);
  white-space:normal;word-break:break-word;
  margin-bottom:3px;
}
.ov-item-meta{font-size:11px;color:var(--muted)}
.ov-item-right{flex-shrink:0;text-align:right}
.ov-days{font-size:12px;font-weight:600;color:var(--danger)}
.ov-date{font-size:11px;color:var(--muted);margin-top:2px}
.ov-empty{padding:24px 16px;font-size:12px;color:var(--dim);text-align:center}

#overdue-footer{
  padding:10px 16px;border-top:1px solid var(--border);flex-shrink:0;
}
#overdue-footer button{
  width:100%;padding:8px;font-size:12px;font-weight:500;
  background:var(--bg);border:1px solid var(--border);
  border-radius:4px;cursor:pointer;color:var(--text);
  transition:background .1s;
}
#overdue-footer button:hover{background:var(--border)}

@media(max-width:768px){
  #overdue-overlay{padding:56px 0 0;align-items:flex-end}
  #overdue-panel{width:100%;border-radius:12px 12px 0 0;max-height:70vh}
}

/* ══ NOTIFICATION CARDS ══ */
#notif-stack{
  position:fixed;bottom:24px;right:24px;
  z-index:300;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none;
}
.notif-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:8px;
  background:var(--surface);
  box-shadow:0 4px 16px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);
  width:320px;max-width:calc(100vw - 32px);
  pointer-events:all;
  opacity:0;transform:translateX(16px);
  transition:opacity .25s,transform .25s;
}
.notif-card.notif-show{opacity:1;transform:none}
.notif-card.notif-hide{opacity:0;transform:translateX(16px)}
.notif-danger{border-left:3px solid var(--danger)}
.notif-warn{border-left:3px solid var(--warn)}
.notif-info{border-left:3px solid var(--blue)}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
.notif-text{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-close{
  background:none;border:none;cursor:pointer;
  font-size:12px;color:var(--dim);padding:0 2px;flex-shrink:0;
  line-height:1;margin-top:1px;
}
.notif-close:hover{color:var(--text)}
@media(max-width:768px){
  #notif-stack{bottom:16px;right:16px;left:16px;align-items:stretch}
  .notif-card{width:100%}
}

/* ══ PRIORITY COLORS ══
   4 разных цвета — чтобы Средний и Низкий визуально не путались */
.prio{font-size:11px;font-weight:500;white-space:nowrap}
.prio-urgent{color:#b91c1c}
.prio-high{color:#b45309}
.prio-mid{color:var(--blue)}
.prio-low{color:var(--ok)}

/* row tint for urgent/high (устаревшее, оставлено для совместимости) */
tr.prio-row-urgent{background:#fff5f5}
tr.prio-row-urgent:hover{background:#fee2e2}
tr.prio-row-high{background:#fffbeb}
tr.prio-row-high:hover{background:#fef3c7}

/* ══ СВЕТОФОР ПО СРОКУ ══
   Ярко подсвечиваем строку/карточку задачи, если срок уже прошёл
   или подходит совсем скоро — видно сразу, без разбора дат в голове. */
tr.row-overdue{background:#fee2e2}
tr.row-overdue:hover{background:#fecaca}
tr.row-due-soon{background:#fef3c7}
tr.row-due-soon:hover{background:#fde68a}

.due-badge{display:inline-block;padding:2px 8px;font-size:11px;font-weight:700;border-radius:3px;white-space:nowrap}
.due-overdue{background:#dc2626;color:#fff}
.due-soon{background:#f59e0b;color:#fff}

.titem.due-row-overdue{background:#fee2e2;border-left:3px solid #dc2626;padding-left:7px}
.titem.due-row-soon{background:#fef3c7;border-left:3px solid #f59e0b;padding-left:7px}

/* ══ ПРИОРИТЕТ "СРОЧНЫЙ" ══
   Яркая красная подсветка вне зависимости от срока. Специально ЗАМЕТНО темнее/
   насыщеннее, чем светофор по сроку (row-overdue/due-row-overdue, #fee2e2) —
   иначе задача "Срочный" визуально не отличается от просто просроченной задачи
   с любым другим приоритетом. Правило идёт ПОСЛЕ row-overdue в файле, поэтому
   при совпадении срочный-приоритет + просрочка побеждает более тёмный вариант. */
tr.row-prio-urgent{background:#fecaca}
tr.row-prio-urgent:hover{background:#fca5a5}
.titem.row-prio-urgent{background:#fecaca;border-left:4px solid #b91c1c;padding-left:6px}
.kb-card.kb-card-prio-urgent{border-left-color:#b91c1c;border-left-width:4px;background:rgba(220,38,38,.1)}

/* ══ CALENDAR ══ */
.cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 14px;gap:12px;flex-wrap:wrap;
}
.cal-filters{display:flex;align-items:center;gap:8px}
#cal-resp-wrap{width:200px}
#cal-resp-wrap .ss-trigger{min-height:auto;padding:5px 10px;font-size:12px}

/* биллинг "за другого сотрудника" — компактный дропдаун в ряду добавления
   времени, в стиле остальных .ti-полей этой строки, а не полноразмерный */
#dt-new-staff-ss{width:170px}
#dt-new-staff-ss .ss-trigger{min-height:auto;padding:5px 10px;font-size:12px}
.btn-group{display:flex}
.btn-group .btn{border-radius:0}
.btn-group .btn:first-child{border-radius:3px 0 0 3px}
.btn-group .btn:last-child{border-radius:0 3px 3px 0}
.btn-group .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.cal-head{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--bg);border:1px solid var(--border);
  border-bottom:none;
}
.cal-hcell{
  padding:7px 10px;font-size:11px;font-weight:600;
  color:var(--muted);text-align:center;letter-spacing:.5px;
}

.cal-grid-body{
  display:grid;grid-template-columns:repeat(7,1fr);
  border:1px solid var(--border);
}
.cal-cell{
  min-height:100px;padding:6px;border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);vertical-align:top;
  background:var(--surface);
}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.cal-today{background:#f0f7ff}
.cal-cell.cal-today .cal-day-num{
  background:var(--blue);color:#fff;border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
}
.cal-cell.cal-other-month{background:var(--bg)}
.cal-cell.cal-other-month .cal-day-num{color:var(--dim)}

.cal-day-num{
  font-size:11px;font-weight:600;color:var(--muted);
  margin-bottom:4px;
}

.cal-item{
  display:flex;align-items:flex-start;gap:4px;
  font-size:11px;padding:2px 4px;border-radius:3px;
  cursor:pointer;margin-bottom:2px;
  white-space:normal;overflow:hidden;
  transition:opacity .1s;
}
.cal-item:hover{opacity:.8}
.cal-item-normal{background:#e8f4fd;color:#1e40af}
.cal-item-high{background:#fef3c7;color:#92400e}
.cal-item-urgent{background:#fee2e2;color:#991b1b}
.cal-item-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;margin-top:4px}
.cal-item-name{white-space:normal;word-break:break-word;line-height:1.3}
.cal-item-closed{background:var(--bg)!important;color:var(--muted)!important;opacity:.7}
.cal-item-closed .cal-item-name{text-decoration:line-through}

/* судебное заседание: ответственный сотрудник мелким шрифтом над названием —
   видно с первого взгляда, кто и куда идёт, без открытия карточки */
.cal-item-court{align-items:flex-start;padding:3px 4px}
.cal-item-court .cal-item-dot{margin-top:4px}
.cal-item-body{min-width:0;overflow:hidden}
.cal-item-court .cal-item-name{display:block;white-space:normal;word-break:break-word}
.cal-item-resp{font-size:9px;font-weight:700;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.cal-item-court.cal-item-closed .cal-item-resp{text-decoration:none}
.cal-more{font-size:10px;color:var(--muted);padding:1px 4px;cursor:pointer;font-weight:600}
.cal-more:hover{color:var(--blue);text-decoration:underline}
.cal-more-pop{
  display:none;position:fixed;z-index:500;width:240px;max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);padding:8px 10px;
}
.cal-more-pop-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.cal-more-pop .cal-item-name{white-space:normal;overflow:visible;text-overflow:clip}

/* контекстное меню календаря — копировать/вставить задачу или заседание */
.cal-ctx-menu{
  display:none;position:fixed;z-index:600;min-width:190px;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;
}
.cal-ctx-menu.open{display:block}
.cal-ctx-item{padding:8px 10px;font-size:12px;border-radius:4px;cursor:pointer;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ctx-item:hover{background:var(--bg)}
.cal-ctx-item.disabled{color:var(--dim);cursor:default;pointer-events:none}
.cal-ctx-item.danger{color:var(--danger)}
.cal-ctx-item.danger:hover{background:#fdecea}

/* week view — taller cells */
.cal-grid-body:not(.cal-grid-month) .cal-cell{min-height:140px}

@media(max-width:768px){
  .cal-toolbar{flex-direction:column;align-items:flex-start}
  .cal-head,.cal-grid-body{grid-template-columns:repeat(7,1fr)}
  .cal-item-name{display:none}
  .cal-cell{min-height:60px;padding:3px}
}

@media(max-width:900px){
  /* убираем min-width таблиц на узких окнах */
  .tw table{min-width:unset !important}
  /* сбрасываем min-width колонок */
  .tw table th,.tw table td{min-width:0 !important}
  /* скрываем второстепенные колонки */
  .hide-mobile{display:none !important}
  .th-hide-mobile{display:none}
  #page-staff .tw table{display:none}
  #page-staff .staff-cards{display:block}
  tr.pr-deal-row td:last-child{padding-right:8px !important}
  /* задачи — только чекбокс / название / статус */
  #page-tasks .tw table{
    table-layout:fixed !important;
    width:100% !important;
    display:table !important;
  }
  #page-tasks table th:nth-child(1),
  #page-tasks table td:nth-child(1){width:28px !important;padding:6px 4px !important}
  #page-tasks table th:nth-child(2),
  #page-tasks table td:nth-child(2){width:auto !important;white-space:normal !important;word-break:break-word !important;overflow:visible !important;text-overflow:clip !important}
  #page-tasks table th:nth-child(4),
  #page-tasks table td:nth-child(4){width:75px !important;overflow:hidden !important}
  /* кнопки действий скрываем на узком экране */
  #page-tasks table th:nth-child(9),
  #page-tasks table td:nth-child(9){display:none !important}
  /* статус — меньше шрифт */
  #page-tasks .status-sel{font-size:9px;letter-spacing:0}
}
@media(min-width:901px){
  #page-staff .staff-cards{display:none}
}
/* короткий текст кнопки пока email/сотрудники скрыты */
@media(max-width:1150px){
  .staff-btn-full{display:none !important}
  .staff-btn-short{display:inline !important}
}
@media(min-width:1151px){
  .staff-btn-short{display:none !important}
  .staff-btn-full{display:inline !important}
}
/* staff table column widths */
#page-staff table th:nth-child(1),
#page-staff table td:nth-child(1){min-width:140px;width:20%}
#page-staff table th:nth-child(2),
#page-staff table td:nth-child(2){min-width:220px;width:24%;text-align:center !important}
.staff-email-col{color:var(--muted);text-align:center !important}
#page-staff table th:nth-child(3),
#page-staff table td:nth-child(3){min-width:100px;width:14%;text-align:center}
#page-staff table th:nth-child(4),
#page-staff table td:nth-child(4){min-width:112px;width:112px;text-align:center;white-space:nowrap}
#page-staff table th:nth-child(5),
#page-staff table td:nth-child(5){min-width:80px;width:80px;text-align:center}
#page-staff table th:nth-child(6),
#page-staff table td:nth-child(6){min-width:80px;width:80px;text-align:center}
#page-staff table th:nth-child(7),
#page-staff table td:nth-child(7){min-width:230px;overflow:visible !important;text-align:right;white-space:nowrap}
/* show block button always (not just on hover) */
#page-staff tbody tr .row-actions{display:flex}
/* hide email + staff-col on narrow-ish screens */
@media(max-width:1150px){
  #page-staff table th:nth-child(2),
  #page-staff table td:nth-child(2){display:none}
  #page-staff table th:nth-child(6),
  #page-staff table td:nth-child(6){display:none}
  #page-staff table th:nth-child(1),
  #page-staff table td:nth-child(1){width:25%}
  #page-staff table th:nth-child(7),
  #page-staff table td:nth-child(7){min-width:230px}
}
#page-staff table th{padding:8px 8px}
#page-staff table td{padding:8px 8px;font-size:13px}
.staff-cards{display:none}
.staff-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border);gap:8px;
}
.staff-card-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.staff-card-name{font-size:13px;font-weight:500;white-space:normal;word-break:break-word}
.staff-card-role{font-size:11px;color:var(--muted);margin-top:2px;white-space:normal;word-break:break-word}
.staff-card-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.staff-card-btn{
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.staff-card-btn-block{background:rgba(220,38,38,.1);color:#dc2626}
.staff-card-btn-block:hover{background:#dc2626;color:#fff}
.staff-card-btn-activate{background:rgba(22,163,74,.1);color:#16a34a}
.staff-card-btn-activate:hover{background:#16a34a;color:#fff}
#page-staff .tw{overflow-x:auto}
/* topbar btn overrides for dark background */
.topbar .btn-g{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.2)}
.topbar .btn-g:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.topbar .btn-p{background:#fff;color:var(--accent);border-color:#fff}
.topbar .btn-p:hover{background:#f0f0f0}

/* ══ BILLING FILTERS ══ */
.bl-filters{
  display:flex;align-items:center;gap:8px;
  padding:0 0 16px;flex-wrap:wrap;
}
.bl-period-btns{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.bl-filters .fc{padding:0 10px;height:32px;line-height:32px;display:inline-flex;align-items:center}
.bl-filters .si{height:32px;padding:0 10px;box-sizing:border-box}
.bl-filters .cs-trigger{height:32px;padding:0 10px;box-sizing:border-box}

/* ══ EXPORTS SECTION ══ */
.exports-section{margin-top:28px;margin-bottom:24px}
/* отчёт о проделанной работе — колонки по центру */
#tbl-wrk th,#tbl-wrk td{text-align:center}
/* колонка "Статус": бейдж не должен обрезаться многоточием (наследуется от .tw table td) */
#tbl-wrk td:nth-child(5){overflow:visible;text-overflow:clip;white-space:nowrap}
.exports-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:12px}
.exports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;align-items:start}
@media(max-width:900px){.exports-grid{grid-template-columns:1fr}}

.export-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:16px;
}
.export-card-icon{font-size:22px;line-height:1;flex-shrink:0;margin-top:2px}
.export-card-body{flex:1;min-width:0}
.export-card-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px}
.export-card-desc{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.export-card-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* сворачивающийся блок доп. фильтров/периода — карточки без него остаются
   компактными и примерно одной высоты, вместо "лесенки" разных размеров */
.exp-adv-toggle{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--blue);cursor:pointer;user-select:none;
}
.exp-adv-toggle:hover{text-decoration:underline}
.exp-adv-arrow{font-size:9px;display:inline-block;width:9px}
.exp-adv-body{margin-top:2px}

/* ══ EXPORT DATE RANGE ══ */
.exp-daterange{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.exp-daterange-label{
  font-size:11px;color:var(--dim);
  display:block;margin-bottom:6px;
}
.exp-daterange-inputs{
  display:flex;align-items:center;gap:6px;
}
.exp-daterange-inputs .finput{
  flex:1;padding:4px 8px;font-size:12px;
}
.exp-daterange-sep{
  font-size:12px;color:var(--muted);flex-shrink:0;
}

/* ══ BILLING TABS ══ */
.bl-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:16px}
.bl-tab{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .1s}
.bl-tab:hover{color:var(--text)}
.bl-tab.active{color:var(--text);font-weight:500;border-bottom-color:var(--text)}

/* ══ BILLING WEEK GRID ══ */
.blw-grid{border:1px solid var(--border);border-radius:4px;overflow:hidden}
.blw-head{display:grid;grid-template-columns:200px repeat(5,1fr);background:var(--bg);border-bottom:2px solid var(--border)}
.blw-row{display:grid;grid-template-columns:200px repeat(5,1fr);border-bottom:1px solid var(--border)}
.blw-row:last-child{border-bottom:none}
.blw-row:hover{background:#fafaf9}

.blw-name-col{padding:10px 12px;border-right:1px solid var(--border)}
.blw-day-col{padding:8px 10px;border-right:1px solid var(--border);min-height:60px}
.blw-day-col:last-child{border-right:none}

.blw-day-name{font-size:10px;font-weight:600;letter-spacing:.5px;color:var(--muted);text-transform:uppercase}
.blw-day-date{font-size:11px;color:var(--dim)}

.blw-staff{display:flex;align-items:center;gap:8px}
.blw-staff-name{font-size:13px;font-weight:500;color:var(--text)}
.blw-staff-total{font-size:11px;color:var(--muted);margin-top:1px}

.blw-mins{font-size:11px;font-weight:600;color:var(--blue);margin-bottom:4px}
.blw-entry{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:2px 0;cursor:pointer}
.blw-entry:hover .blw-entry-name{color:var(--blue)}
.blw-entry-name{font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.blw-entry-dur{font-size:10px;color:var(--muted);flex-shrink:0}
.blw-more{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.blw-empty{background:var(--bg)}

@media(max-width:900px){
  .blw-head,.blw-row{grid-template-columns:120px repeat(5,1fr)}
  .blw-name-col{padding:8px}
  .blw-day-col{padding:6px}
  .blw-entry-dur{display:none}
}

/* ══ BILLING REPORT FILTERS ══ */
.bl-report-filters{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 0 16px;border-bottom:1px solid var(--border);margin-bottom:0;
}
.bl-report-filters .fbar-sel{max-width:220px}
.bl-report-date{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.blr-date-btn{
  font-size:12px;padding:4px 10px;border-radius:3px;
  border:1px solid var(--border);background:transparent;
  cursor:pointer;color:var(--muted);transition:all .1s;
}
.blr-date-btn:hover{color:var(--text);border-color:var(--muted)}
.blr-date-btn.active{background:var(--text);color:#fff;border-color:var(--text)}
.bl-report-date-custom{display:flex;align-items:center;gap:8px}
.bl-report-date-custom .finput{width:130px}

.blw-staff-role{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}

/* ══ SEARCH INPUT WITH CLEAR BUTTON ══ */
.si-wrap{position:relative;display:inline-flex;align-items:center;width:fit-content}
.si-wrap .si{padding-right:26px;width:100%}
.si-clear{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:11px;color:var(--muted);font-weight:600;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s,color .1s;
  line-height:1;
  z-index:2;
}
.si-clear:hover{background:var(--border-s);color:var(--text);opacity:1}
.date-wrap{position:relative;display:inline-flex;align-items:center}
.date-wrap .finput{padding-right:26px}
.date-wrap .si-clear{right:7px}

.date-wrap{position:relative;display:inline-flex;align-items:center}
.date-wrap .finput{padding-right:28px}



/* ── уменьшить placeholder в полях поиска ── */
.si::placeholder{font-size:12px}

/* ── Скроллбар страницы ── */
.content::-webkit-scrollbar{width:6px}
.content::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb{background:var(--border-s);border-radius:3px}
.content::-webkit-scrollbar-thumb:hover{background:var(--muted)}

.fbar-search-row .si-wrap{flex:1;max-width:320px;position:relative}.fbar-search-row .si-wrap .fbar-search{width:100%;max-width:none;padding-right:28px}.fbar-search-row .si-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%)}

/* ══ BILLING REPORT DATE ROW ══ */
.bl-report-date-custom{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 12px;
  width:fit-content;
}
.bl-report-date-custom .date-wrap{display:flex;align-items:center;gap:0}
.bl-report-date-custom .finput{
  border:none;background:transparent;
  padding:0 24px 0 0;font-size:13px;
  width:110px;outline:none;color:var(--text);
}
.bl-report-date-custom .finput:focus{outline:none}
.bl-report-date-custom .si-clear{
  right:2px;font-size:12px;
  color:var(--muted);
}
.bl-report-date-sep{
  font-size:13px;color:var(--dim);
  padding:0 8px;flex-shrink:0;
}
.bl-report-date-label{
  font-size:12px;color:var(--muted);
  flex-shrink:0;font-weight:500;
}

/* ══ BILLING REPORT FILTERS LAYOUT ══ */
.bl-report-filters{display:flex;flex-direction:column;gap:10px;padding:12px 0 16px;border-bottom:1px solid var(--border);margin-bottom:0}
.blr-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blr-row .fbar-sel{flex:1;min-width:200px;max-width:280px}
.blr-row-period{gap:10px}
.blr-dates{display:flex;align-items:center;gap:6px;margin-left:auto}
.blr-dates .finput{width:130px;padding:4px 26px 4px 8px}
.blr-dates .date-wrap{position:relative;display:inline-flex;align-items:center}
.blr-dates .date-wrap .si-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
/* blr filters в одну строку */
.blr-row-filters{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:nowrap}
.blr-row-filters .ss-wrap{width:auto!important;flex:1;min-width:120px;max-width:220px}
.blr-row-filters .ss-trigger{min-height:30px;padding:4px 28px 4px 10px;font-size:12px;background:var(--surface)!important}

/* иконка календаря скрыта визуально, но кликабельна */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity:0;
  position:absolute;
  right:0;
  width:100%;
  height:100%;
  cursor:pointer;
}
input[type="date"] { position:relative; cursor:pointer; }
/* ── Searchable Select ── */
.ss-wrap{position:relative;width:100%}
.ss-trigger{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:7px 10px;font-size:13px;font-family:inherit;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:border-color .1s;box-sizing:border-box;min-height:34px}
.ss-trigger:hover,.ss-wrap.open .ss-trigger{border-color:var(--accent)}
.ss-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-val.placeholder{color:var(--muted)}
.ss-clear{font-size:12px;color:var(--dim);margin-left:4px;flex-shrink:0;cursor:pointer;line-height:1}
.ss-clear:hover{color:var(--danger)}
.ss-arrow{font-size:10px;color:var(--muted);margin-left:6px;transition:transform .15s;flex-shrink:0}
.ss-wrap.open .ss-arrow{transform:rotate(180deg)}
.ss-drop{position:absolute;top:calc(100% + 3px);left:0;min-width:100%;width:max-content;background:var(--surface);border:1px solid var(--border);border-radius:4px;z-index:600;box-shadow:0 4px 16px rgba(0,0,0,.12);overflow:hidden;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
.ss-search-wrap{padding:7px}
.ss-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:5px 9px;font-size:13px;font-family:inherit;color:var(--text);outline:none;box-sizing:border-box}
.ss-search:focus{border-color:var(--accent)}
.ss-list{max-height:200px;overflow-y:auto}
.ss-item{padding:7px 12px;font-size:13px;font-weight:400;font-family:'Inter',sans-serif;cursor:pointer;color:var(--text);transition:background .08s;white-space:normal;word-break:break-word}
.ss-item:hover{background:var(--bg)}
.ss-item.active{color:var(--accent);font-weight:500}
.ss-empty{padding:10px 12px;font-size:12px;color:var(--muted);text-align:center}
/* ── Корзина ── */
.trash-item{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);gap:12px}
.trash-item:last-child{border-bottom:none}
.trash-item:hover{background:var(--bg)}
.trash-item-info{flex:1;min-width:0}
.trash-item-type{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:2px}
.trash-item-name{font-size:13px;font-weight:600;color:var(--text);white-space:normal;word-break:break-word}
.trash-item-meta{font-size:11px;color:var(--dim);margin-top:2px}
.trash-item-actions{display:flex;gap:6px;flex-shrink:0}
/* ══ DATE RANGE PICKER ══════════════════════════════════════════════ */
.drp-wrap{position:relative;display:inline-flex;align-items:center;width:auto;flex-shrink:0;overflow:visible}
.drp-input{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:3px;font-size:13px;font-family:inherit;color:var(--text);background:var(--surface);cursor:pointer;white-space:nowrap;transition:border-color .1s;user-select:none;min-width:160px;flex-shrink:0;overflow:hidden}
.drp-input:hover{border-color:var(--border-s)}.drp-input.active{border-color:var(--accent)}
.drp-icon{color:var(--muted);font-size:12px;flex-shrink:0}
.drp-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.drp-val.empty{color:var(--dim)}
.drp-clear{color:var(--dim);font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0}.drp-clear:hover{color:var(--danger)}
.drp-popup{position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.14);padding:20px;display:none;flex-direction:column;gap:16px;width:520px;top:0;left:0}
.drp-popup.open{display:flex}
.drp-months{display:flex;gap:24px}
.drp-month{flex:1}
.drp-mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.drp-mtitle{font-size:14px;font-weight:600;color:var(--text)}
.drp-nav2{background:var(--bg);border:1px solid var(--border);border-radius:4px;width:28px;height:28px;cursor:pointer;font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:inherit;transition:all .1s;line-height:1}
.drp-nav2:hover{border-color:var(--accent);color:var(--accent)}
.drp-grid2{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.drp-dow2{font-size:10px;font-weight:600;color:var(--dim);text-align:center;padding:4px 0}
.drp-dow2.drp-weekend{color:var(--danger)}
.drp-day2{font-size:12px;text-align:center;padding:6px 2px;border-radius:3px;cursor:pointer;color:var(--text);transition:background .08s;position:relative}
.drp-day2:hover:not(.drp-other){background:var(--bg)}
.drp-day2.drp-other{color:var(--dim);cursor:default}
.drp-day2.drp-wknd:not(.drp-start):not(.drp-end){color:var(--danger)}
.drp-day2.drp-today{font-weight:700;color:var(--blue)!important;text-decoration:underline}
.drp-day2.drp-today.drp-start,.drp-day2.drp-today.drp-end{color:#fff!important;text-decoration:none}
#tk-date-drp .drp-wrap{width:100%;display:flex;align-self:start}
#tk-date-drp .drp-input{width:100%;box-sizing:border-box;padding:7px 10px;font-size:13px;height:34px;border-radius:3px;justify-content:flex-start;align-items:center;display:flex;flex-shrink:0}
#tk-date-drp .drp-clear{margin-left:auto}
#bl-drp .drp-input,#blr-drp .drp-input,#exp-proj-drp .drp-input,#exp-staff-drp .drp-input,#rep-drp .drp-input,#wrk-drp .drp-input,#tqd-due-cal .drp-input,#tqd-created-cal .drp-input{width:210px;height:32px;padding:5px 10px;font-size:13px;box-sizing:border-box}
.drp-day2.drp-start{background:var(--accent);color:#fff;border-radius:3px 0 0 3px}
.drp-day2.drp-end{background:var(--accent);color:#fff;border-radius:0 3px 3px 0}
.drp-day2.drp-start.drp-end{border-radius:3px}
.drp-day2.drp-inrange{background:#e8e8e4;border-radius:0;color:var(--text)}
.drp-day2.drp-inrange.drp-start{border-radius:3px 0 0 3px}
.drp-day2.drp-inrange.drp-end{border-radius:0 3px 3px 0}
.drp-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.drp-hint2{font-size:12px;color:var(--muted)}
.drp-apply{background:var(--accent);color:#fff;border:none;border-radius:3px;padding:7px 20px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .1s}
.drp-apply:hover{opacity:.85}
/* ════════════════════════════════════════════════════════════════════ */#pu-court-resp-ss{width:auto;min-width:120px}
#pu-court-resp-ss .ss-trigger{min-height:26px;padding:3px 24px 3px 8px;font-size:11px}
#pu-court-resp-ss{width:auto!important;min-width:100px;max-width:180px}
#pu-court-resp-ss .ss-trigger{min-height:24px!important;padding:2px 22px 2px 8px!important;font-size:11px!important;text-transform:none!important;letter-spacing:0!important}
#pu-court-resp-ss .ss-item{font-size:12px!important;text-transform:none!important;padding:5px 10px}
#pu-court-resp-ss .ss-val{font-size:11px!important;text-transform:none!important;letter-spacing:0!important}
/* Finance access restriction */
.finance-hidden .finance-only{display:none!important}
.logout-icon{font-size:36px;text-align:center;margin-bottom:4px}
/* УДАЛЕНО: старое правило ".finance-hidden #tb-bl td:nth-child(6){display:none}"
   было написано под старую вёрстку, где <td> для "Статус" рендерился ВСЕГДА
   и просто прятался через CSS. Сейчас renderBilling() при отключённых
   Финансах вообще НЕ создаёт этот <td> (см. render.js), поэтому в строке
   остаётся 7 ячеек вместо 8, и nth-child(6) — это уже "Время", а не "Статус".
   Старое правило вместо "Статуса" прятало реальные значения времени и
   визуально сдвигало кнопку "Удалить" в колонку "Время". */
#bl-staff{width:160px;max-width:160px;flex-shrink:0}
#bl-staff-ss{width:180px!important;max-width:180px;flex-shrink:0}
#bl-tab-entries .cs-wrap{width:180px!important;flex-shrink:0}

/* Billing tables alignment */
#tb-bl td { text-align:center!important; vertical-align:middle; }
#tb-bl td:nth-child(1) { text-align:left!important; }
#tb-bl td:nth-child(2) { text-align:center!important; }
#tb-bl th { text-align:center!important; }
#tb-bl th:nth-child(2) { text-align:center!important; }
#tbl-blr td { text-align:center!important; vertical-align:middle; }
#tbl-blr td:nth-child(1) { text-align:left!important; }
#tbl-blr td:nth-child(2) { text-align:center!important; }
#tbl-blr th { text-align:center!important; }
#tbl-blr th:nth-child(1) { text-align:left!important; }
#tbl-blr th:nth-child(2) { text-align:center!important; }
#tb-bl td:nth-child(1), #tb-bl th:nth-child(1) { text-align:center; }
#tb-bl td:nth-child(3), #tb-bl td:nth-child(4),
#tb-bl td:nth-child(5), #tb-bl td:nth-child(6), #tb-bl td:nth-child(7) { text-align:center; }
#tb-bl th:nth-child(3), #tb-bl th:nth-child(4),
#tb-bl th:nth-child(5), #tb-bl th:nth-child(6), #tb-bl th:nth-child(7) { text-align:center; }
/* последняя колонка (кнопка "Удалить") — у правого края таблицы, а не по
   центру; :last-child специфичнее блэнкет-правила "#tb-bl td" выше, поэтому
   переопределяет его даже при одинаковом !important */
#tb-bl td:last-child, #tb-bl th:last-child { text-align:right!important; }

/* ── Переключатель вида "Задачи": список / столбцы ── */
.tv-toggle{display:flex;gap:2px;flex-shrink:0;margin-right:14px}
.tv-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:12px;font-family:inherit;padding:5px 10px;cursor:pointer;transition:border-color .1s,color .1s,background .1s}
.tv-btn:first-child{border-radius:3px 0 0 3px}
.tv-btn:last-child{border-radius:0 3px 3px 0;margin-left:-1px}
.tv-btn:hover{color:var(--text);border-color:var(--border-s,var(--muted))}
.tv-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);z-index:1;position:relative}

/* ── Задачи: вид "Столбцы" (канбан по статусу) ── */
.kb-board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:4px 2px 16px}
.kb-col{background:var(--bg);border:1px solid var(--border);border-radius:6px;width:280px;flex-shrink:0;display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
.kb-col-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--border)}
.kb-col-count{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:600;color:var(--muted)}
.kb-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.kb-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:4px;padding:10px 12px;cursor:pointer;transition:border-color .1s,box-shadow .1s}
.kb-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.kb-card-overdue{border-left-color:var(--danger)}
.kb-card-soon{border-left-color:var(--warn)}
.kb-card-title{font-size:13px;font-weight:500;color:var(--blue);margin-bottom:4px;line-height:1.35}
.kb-card-proj{font-size:11px;color:var(--muted);margin-bottom:8px;white-space:normal;word-break:break-word}
.kb-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kb-resp{font-size:11px;color:var(--muted);white-space:normal;word-break:break-word;flex:1;min-width:0}
.kb-resp-empty{color:var(--dim)}
.kb-card-date{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.kb-due-overdue{color:var(--danger);font-weight:600}
.kb-due-soon{color:var(--warn);font-weight:600}
.kb-empty{font-size:12px;color:var(--dim);padding:12px 4px;text-align:center}