/* Оформление рассчитано на телефон в первую очередь: чек-листы отмечают
   со склада и из машины, а не за рабочим столом. */
:root{
  --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --text:#1c2430; --muted:#7b8794;
  --accent:#1c5cab; --ok:#1f8a4c; --warn:#c8791a; --bad:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1100px;margin:0 auto;padding:18px 14px 60px}

/* шапка */
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:12px 16px}
.top nav{min-width:0}
/* Логотип вместо текста. Высота задана в px, ширина auto — картинка 1000×197,
   на любом экране отдаёт достаточную плотность точек. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:0}
.brand img{height:22px;width:auto;display:block}
/* Подпись раздела нужна только на телефоне: на широком экране роль и так
   видна по пунктам меню, которые на мобильном сворачиваются. */
.brand-sub{display:none}
/* align-items:center — иначе плашка выбранного пункта растягивается на всю
   высоту строки: когда меню переносится на две строки, выделение у «Задач»
   становилось вдвое выше соседей. */
.top nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
/* Верхнее меню. Выбранный раздел — плашкой, а не подчёркиванием: подчёркивание
   в две точки толщиной теряется, особенно на телефоне, где меню уезжает
   в отдельную строку и прокручивается вбок. */
/* Разделов стало десять, и на ноутбучном экране строка меню упиралась в имя
   пользователя — оно уезжало на вторую строку, а шапка становилась двойной.
   Поджимаем отступы и размер: смысл пунктов от этого не теряется, а место
   экономится ощутимо. */
.top nav a{padding:6px 9px;border-radius:9px;color:var(--muted);
  font-size:14px;white-space:nowrap;
  transition:background .12s,color .12s}
@media (max-width:1400px){
  .top nav a{padding:6px 7px;font-size:13.5px}
  .top{gap:12px;padding:10px 14px}
}
.top nav a:hover{background:#f2f5f9;color:var(--text);text-decoration:none}
.top nav a.on{background:#e9f0fa;color:var(--accent);font-weight:600}
/* Имя и выход держим в одной строке с меню и не даём им переноситься
   по словам: «Притула Дмитрий» разрывалось пополам. */
.me{margin-left:auto;color:var(--muted);font-size:14px;white-space:nowrap;
  display:flex;align-items:center;gap:10px}
@media (max-width:1400px){ .me{font-size:13px} }

/* вход */
.login{max-width:340px;margin:12vh auto;background:var(--card);padding:28px;
  border:1px solid var(--line);border-radius:12px;text-align:center}
.login .logo{width:190px;max-width:100%;height:auto;margin:0 auto 2px;display:block}
.login .sub{color:var(--muted);margin:4px 0 22px}
.login input{width:100%;margin-bottom:10px}
.login button{width:100%}
.err{background:#fdecea;color:var(--bad);padding:8px;border-radius:6px;font-size:14px}

/* поля */
input,select,textarea,button{font:inherit;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--text)}
textarea{width:100%;resize:vertical}
/* Кнопки: обводка и скруглённые углы.
   Заливка серым делала кнопку похожей на поле ввода — на светлом фоне они
   сливались, и было непонятно, куда нажимать. Обводка отделяет кнопку от
   формы, а при наведении она наливается цветом. */
button{cursor:pointer;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 16px;color:var(--text);font-weight:500;
  transition:background .12s,border-color .12s,color .12s}
button:hover{background:#f2f5f9;border-color:#c9d2dc}
button:active{background:#e8edf3}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{background:#fff;border-color:var(--line)}

/* Главное действие на экране — одно, и оно залито цветом. Если залить два,
   человек перестаёт понимать, какое из них основное. */
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover{background:#174f95;border-color:#174f95}

/* Опасное действие: обводка красная, заливается только при наведении —
   чтобы не пугала постоянно, но и не путалась с обычной. */
button.del,button.del-task,.danger button{border-color:#f0c8c3;color:var(--bad)}
button.del:hover,button.del-task:hover,.danger button:hover{
  background:#fdecea;border-color:var(--bad)}

.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bar h1{font-size:20px;margin:0}
.bar .primary{margin-left:auto}
.filters{display:flex;gap:8px;flex-wrap:wrap}

/* кнопки шаблонов */
.tpl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  color:var(--muted);font-size:14px}
/* Фишка — та же кнопка, только компактнее: ими помечают шаблоны, фильтры
   и второстепенные действия. Скругление то же, чтобы формы не выглядели
   собранными из разных наборов. */
.chip{display:inline-block;background:#fff;border:1px solid var(--line);
  color:var(--text);padding:6px 13px;border-radius:10px;font-size:14px;
  transition:background .12s,border-color .12s,color .12s}
.chip:hover{background:#f2f5f9;border-color:var(--accent);color:var(--accent);
  text-decoration:none}
.chip.on{background:#e9f0fa;border-color:var(--accent);color:var(--accent);
  font-weight:600}

/* таблица */
.grid{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;
  padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfc}
.grid td{padding:11px 12px;border-bottom:1px solid var(--line)}
.grid tr:last-child td{border-bottom:none}
.grid tr.p-high td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.empty{text-align:center;color:var(--muted);padding:26px}
.late{color:var(--bad);font-weight:600}
.flag{background:#fdecea;color:var(--bad);font-size:11px;padding:1px 6px;
  border-radius:4px;margin-left:6px}

.st{font-size:13px;padding:3px 9px;border-radius:12px;white-space:nowrap}
.s-new{background:#e8f0fb;color:var(--accent)}
.s-in_work{background:#fff3e0;color:var(--warn)}
.s-on_review{background:#ede7f6;color:#6a3fb5}
.s-done{background:#e7f6ec;color:var(--ok)}
.s-deferred{background:#eef1f4;color:var(--muted)}
.cl{font-size:13px;color:var(--muted)}
.cl.full{color:var(--ok);font-weight:600}

/* карточка задачи */
.back{display:inline-block;margin-bottom:10px;color:var(--muted)}
.task{display:grid;grid-template-columns:1fr 260px;gap:18px;align-items:start}
.task .main,.task aside,.narrow{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:18px}
.task h1{font-size:20px;margin:0 0 8px}
.task h2{font-size:15px;margin:22px 0 10px;color:var(--muted)}
.desc{white-space:pre-wrap;margin:0}
.narrow{max-width:640px}
.narrow input,.narrow select{margin-bottom:10px}
.narrow textarea{margin-bottom:10px}

.checklist{list-style:none;padding:0;margin:0;counter-reset:cl}
.checklist li{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line);counter-increment:cl}
/* Номер пункта. Считает браузер, а не шаблон: пункт можно добавить или
   убрать, и нумерация пересчитается сама, без перезагрузки страницы.
   tabular-nums — чтобы цифры стояли ровным столбиком. */
.checklist li::before{content:counter(cl) ".";flex:none;min-width:24px;
  text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.checklist form{display:contents}
.box{width:26px;height:26px;padding:0;border-radius:6px;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;background:#fff}
.box.on{background:var(--ok);border-color:var(--ok)}
.struck{color:var(--muted);text-decoration:line-through}
.checklist em{margin-left:auto;color:var(--muted);font-size:12px;font-style:normal}

.add{display:flex;gap:8px;margin-top:10px}
.add input,.add textarea{flex:1}
.cmt{border-bottom:1px solid var(--line);padding:8px 0}
.cmt em{color:var(--muted);font-size:12px;font-style:normal;margin-left:6px}
.cmt p{margin:4px 0 0;white-space:pre-wrap}
.muted{color:var(--muted);font-size:13px}

aside label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px}
aside select,aside input{width:100%;margin-top:4px}
.hist{list-style:none;padding:0;margin:8px 0 0;font-size:13px}
.hist li{padding:4px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.hist b{color:var(--text)}
details summary{cursor:pointer;color:var(--muted);font-size:13px;margin-top:10px}

/* модальные окна */
dialog{border:none;border-radius:12px;padding:22px;width:min(520px,94vw);
  box-shadow:0 12px 40px rgba(0,0,0,.18)}
dialog::backdrop{background:rgba(20,28,38,.45)}
dialog h3{margin:0 0 14px}
dialog input,dialog select,dialog textarea{width:100%;margin-bottom:10px}
dialog .row{display:flex;gap:8px}
dialog .row>*{flex:1;min-width:0}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

@media (max-width:760px){
  .brand img{height:19px}
  .task{grid-template-columns:1fr}
  .grid thead{display:none}
  .grid tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .grid td{display:flex;justify-content:space-between;align-items:center;
    border:none;padding:4px 12px;gap:12px}
  .grid td:first-child{font-weight:600;padding-bottom:6px}
  /* подпись поля: заголовок столбца на телефоне скрыт, берём его из data-l */
  .grid td[data-l]::before{content:attr(data-l);color:var(--muted);
    font-size:12px;font-weight:400;flex:none}
  .bar .primary{margin-left:0;width:100%}
  .filters{width:100%;box-sizing:border-box}
  .filters input,.filters select{flex:1 1 130px;min-width:0;max-width:100%}
  .filters button{flex:none}
  .bar{width:100%}
}

/* управление сотрудниками */
.pwd-box{background:#fff8e1;border:1px solid #f0d48a;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.pwd-box code{font-size:19px;background:#fff;padding:3px 10px;border-radius:6px;
  border:1px solid var(--line);letter-spacing:1px}
.pwd-box p{margin:8px 0 0;color:var(--muted);font-size:13px}
.ok-box{background:#e7f6ec;color:var(--ok);padding:9px 12px;border-radius:6px}
tr.off td{opacity:.5}
.acts{white-space:nowrap;display:flex;gap:6px;justify-content:flex-end}
.grid code{background:#f2f4f7;padding:1px 6px;border-radius:4px;font-size:13px}

/* правка названия и описания задачи */
.edit-btn{font-size:12px;padding:3px 9px;border-radius:12px;color:var(--muted);
  background:#f2f4f7;vertical-align:middle;margin-left:8px;font-weight:400}
.edit-btn:hover{color:var(--accent)}
#edit textarea{font:inherit;line-height:1.5}

/* вложения */
.files{list-style:none;padding:0;margin:0}
.files{margin-bottom:4px}
.files li{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.files form{display:contents}
.thumb{flex:none;line-height:0}
.thumb img{width:44px;height:44px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line)}
.ficon{flex:none;width:44px;height:44px;border-radius:6px;background:#eef1f4;
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.5px}
.fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files em{color:var(--muted);font-size:12px;font-style:normal;white-space:nowrap}
.del{flex:none;width:26px;height:26px;padding:0;border-radius:6px;
  color:var(--muted);font-size:17px;line-height:1}
.del:hover{background:#fdecea;color:var(--bad);border-color:#f3c6c1}
input[type=file]{padding:7px;background:#fff}
@media (max-width:760px){
  .files li{flex-wrap:wrap}
  .files em{width:100%;padding-left:54px}
}

section > .muted:first-of-type{margin:-4px 0 10px}

/* доска по срокам */
.board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;
  align-items:start}
.kcol{background:#eef1f4;border-radius:10px;padding:10px;min-height:120px}
.kcol h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted);
  display:flex;justify-content:space-between;align-items:center}
.kcol h3 b{background:#fff;border-radius:10px;padding:1px 8px;font-size:12px;color:var(--text)}
.kcol.late{background:#fdecea}
.kcol.late h3{color:var(--bad)}
.kcol.today{background:#fff3e0}
.kcol.today h3{color:var(--warn)}
.kcol.done{background:#e7f6ec}
.kcol.done h3{color:var(--ok)}
.kcard{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;margin-bottom:8px;color:var(--text)}
.kcard:hover{text-decoration:none;border-color:var(--accent)}
.kcard.hi{border-left:3px solid var(--bad)}
/* Номер сделки в правом верхнем углу карточки: по нему её называют вслух
   и ищут в переписке. */
.kcard{position:relative}
.kno{position:absolute;top:6px;right:8px;font-size:11px;color:var(--muted)}
.kt{padding-right:36px}
.kt{font-size:13px;line-height:1.35;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.km{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:11px;color:var(--muted)}
.km .kd{margin-left:auto;white-space:nowrap}
.km .kd.late{color:var(--bad);font-weight:600}
.km .clip::before{content:"📎 "}
.kempty{color:var(--muted);font-size:12px;text-align:center;padding:10px 0;margin:0}
.kdays{margin:-4px 0 8px;font-size:11px;color:var(--muted)}
.kdays a{color:var(--muted);margin-left:5px}
.kdays a.on{color:var(--ok);font-weight:600}
@media (max-width:1000px){
  .board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .board{grid-template-columns:1fr}
}

/* вторая строка меню — появляется внутри раздела «Задачи» */
.subnav{background:var(--card);border-bottom:1px solid var(--line);
  padding:0 16px;display:flex;gap:6px;flex-wrap:wrap}
.subnav a{padding:6px 12px;margin:6px 0;font-size:14px;color:var(--muted);
  border-radius:9px;transition:background .12s,color .12s}
.subnav a:hover{text-decoration:none;color:var(--text);background:#f2f5f9}
.subnav a.cur{color:var(--accent);background:#e9f0fa;font-weight:600}

/* доски лидов и воронки */
.board.leads{grid-template-columns:repeat(5,minmax(190px,1fr))}
.board.funnel{grid-template-columns:repeat(14,minmax(180px,1fr));overflow-x:auto;
  padding-bottom:10px}

/* Полоса прокрутки над названиями этапов. Этапов четырнадцать, доска шире
   экрана, а нижняя полоса оказывается за краем видимой части — чтобы её
   найти, приходилось листать страницу вниз. Эта повторяет ту же прокрутку,
   но всегда на виду. */
.board-scroll{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:6px}
.board-scroll div{height:1px}
@media (max-width:1100px){ .board-scroll{display:none} }
.kcol.s-new{background:#e8f0fb}
.kcol.s-qualified{background:#eef6ff}
.kcol.s-assigned{background:#fff3e0}
.kcol.s-won{background:#e7f6ec}
.kcol.s-lost{background:#fdecea}
/* Название этапа умещаем в три строки: у новых этапов формулировки длинные
   («Согласованы технические вопросы с покупателем»), и в двух строках от них
   оставался огрызок. */
.kcol h3 span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.3}
.kcol h3{align-items:flex-start}
.kcol h3 b{flex:none;margin-left:6px}
.ksub{font-size:12px;color:var(--muted);margin:-3px 0 5px}
.kamt{font-size:13px;font-weight:600;color:var(--ok);margin-bottom:5px}
.ksum{margin:-6px 0 8px;font-size:12px;color:var(--muted);font-weight:600}
.kmove{margin-top:7px}
.kmove select{width:100%;font-size:12px;padding:5px 7px}
.kdone{margin:6px 0 0;font-size:12px;color:var(--ok)}
.chip.wide{width:100%;margin-top:6px}
.tel{color:var(--accent)}
.pipe{color:var(--muted);font-size:14px}
.pipe b{color:var(--ok)}
@media (max-width:1000px){
  .board.leads,.board.funnel{grid-template-columns:repeat(2,1fr)}
  .board.funnel{overflow-x:visible}
}
@media (max-width:600px){
  .board.leads,.board.funnel{grid-template-columns:1fr}
  .subnav{gap:14px;overflow-x:auto}
  .subnav a{white-space:nowrap}
}

/* справка о доступе */
.access{margin:16px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px}
.access summary{cursor:pointer;color:var(--muted);font-size:14px}
.access[open] summary{margin-bottom:12px;color:var(--text)}
.grid.mini td,.grid.mini th{padding:7px 10px;font-size:13px}
.grid.mini td:not(:first-child){text-align:center;width:120px}
.grid.mini .y{color:var(--ok);font-weight:600}
.grid.mini .n{color:var(--muted)}

/* исполнитель без выбора и удаление задачи */
.fixed{display:block;margin-top:4px;padding:9px 11px;background:#f2f4f7;
  border:1px solid var(--line);border-radius:8px;color:var(--text)}
.danger{margin:14px 0 0}
.del-task{width:100%;color:var(--bad);border-color:#f3c6c1;background:#fff;font-size:13px}
.del-task:hover{background:#fdecea}

/* приёмка работы */
.ready-form{margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ready{padding:11px 18px}
.ready:disabled{background:#dfe4ea;border-color:#dfe4ea;color:#98a2ad;cursor:not-allowed}
.review{margin-top:16px;padding:14px 16px;border-radius:10px}
.review b{display:block;margin-bottom:4px}
.review p{margin:0 0 10px;font-size:13px;color:var(--muted)}
.review.wait{background:#ede7f6;border:1px solid #d6c9ee}
.review.wait b{color:#5b32a8}
.review.ok{background:#e7f6ec;border:1px solid #bde2c9}
.review.ok b{color:var(--ok)}
.review.ok p{margin:0}
.rev-form{display:flex;gap:8px;margin-top:8px}
.rev-form input{flex:1}
.mat{white-space:nowrap}
.mat .clip::before{content:"📎 "}
.mat .cmt-n::before{content:"💬 "}
.mat span{margin-right:8px;font-size:12px;color:var(--muted)}

/* панель управления */
.period{color:var(--muted);font-size:13px;margin-left:auto}
.period a{color:var(--muted);margin-left:6px}
.period a.on{color:var(--accent);font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;display:block;color:var(--text)}
.tile:hover{text-decoration:none;border-color:var(--accent)}
.tile b{display:block;font-size:26px;line-height:1.1}
.tile span{font-size:12px;color:var(--muted)}
.tile.bad{background:#fdecea;border-color:#f3c6c1}
.tile.bad b{color:var(--bad)}
.tile.warn{background:#ede7f6;border-color:#d6c9ee}
.tile.warn b{color:#5b32a8}
.tile.ok{background:#e7f6ec;border-color:#bde2c9}
.tile.ok b{color:var(--ok)}
.tile.mute{opacity:.75}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px;margin-bottom:14px}
.panel h2{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:10px}
.panel .pipe{margin-left:auto;font-weight:400}
.bars{list-style:none;padding:0;margin:0}
.bars li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px}
.bars .bl{width:130px;flex:none;color:var(--muted)}
.bars .bar{flex:1;height:8px;background:#eef1f4;border-radius:4px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bars b{width:32px;text-align:right}
.grid.mini tr.dim td{color:#b6bec7}
.grid.mini .n-bad{color:var(--bad);font-weight:600}
.grid.mini tr.sum td{font-weight:600;border-top:1px solid var(--line)}
.grid.mini tr.ok-row td{color:var(--ok)}
.grid.mini tr.bad-row td{color:var(--bad)}
@media (max-width:820px){ .two{grid-template-columns:1fr} }

/* пустой раздел панели */
.stub{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:28px;max-width:620px}
.stub-t{margin:0 0 10px;font-size:16px;font-weight:600}
.stub p{margin:0 0 8px}

/* копирование задачи */
.copy-form{margin:-2px 0 10px}
.copy-btn{font-size:13px;padding:6px 12px;color:var(--accent);
  border-color:#c5d7ee;background:#f4f8fd}
.copy-btn:hover{background:#e8f0fb}

/* редактор чек-листа шаблона */
.fl{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
.tpl-items{list-style:none;padding:0;margin:0 0 10px;counter-reset:ti}
.tpl-items li{display:flex;align-items:center;gap:9px;margin-bottom:6px;
  counter-increment:ti}
.tpl-items li::before{content:counter(ti) ".";flex:none;min-width:24px;
  text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.box-view{flex:none;width:22px;height:22px;border:1px solid var(--line);
  border-radius:5px;background:#fff}
.tpl-items input{flex:1;min-width:0}
.tpl-items .del{flex:none;width:28px;height:28px;padding:0;font-size:17px;line-height:1;
  color:var(--muted)}
.tpl-items .del:hover{background:#fdecea;color:var(--bad);border-color:#f3c6c1}

/* кнопка выхода */
.logout{display:inline-block;margin-left:10px;padding:6px 15px;border-radius:10px;
  background:var(--bad);color:#fff;font-size:13px;line-height:1.4;
  border:1px solid var(--bad)}
.logout:hover{background:#a5322a;text-decoration:none;color:#fff}

/* телефон: меню прокручивается вбок, а не рвёт вёрстку */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .top{gap:10px;padding:10px 12px}
  .brand-sub{display:block;font-size:12px;line-height:1.2;color:var(--muted);
    white-space:nowrap}
  .top nav{order:3;width:100%;overflow-x:auto;gap:16px;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{white-space:nowrap;font-size:14px}
  .me{margin-left:auto;display:flex;align-items:center;gap:8px}
  .subnav{padding:0 12px}
  main{padding:14px 12px 50px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .bar h1{font-size:18px}
}

/* телефон: карточка задачи */
@media (max-width:760px){
  /* элементы грида по умолчанию не уже своего содержимого — из-за поля выбора
     файла блок раздувался шире экрана */
  .task > *{min-width:0}
  .task .main,.task aside{padding:14px}
  /* поле выбора файла на телефоне занимает строку, кнопка — под ним */
  .add{flex-direction:column;align-items:stretch}
  .add button{width:100%}
  input[type=file]{max-width:100%;font-size:13px}
  .task h1{font-size:17px;word-break:break-word}
  .review .rev-form{flex-direction:column}
  .ready{width:100%}
  .ready-form{flex-direction:column;align-items:stretch}
}

/* телефон: сводные таблицы остаются таблицами
   Превращать их в карточки, как список задач, нельзя: там по три-четыре
   числовых столбца, и без шапки колонок цифры теряют смысл. Поэтому такие
   таблицы прокручиваются вбок внутри своей рамки. */
@media (max-width:760px){
  .panel{overflow-x:auto}
  .panel .grid.mini{min-width:460px}
  .grid.mini thead{display:table-header-group}
  .grid.mini tr{display:table-row;padding:0}
  .grid.mini td,.grid.mini th{display:table-cell;padding:7px 10px}
  .grid.mini td::before{content:none}
  .grid.mini td:first-child{padding-bottom:7px}
  .access{overflow-x:auto}
  .access .grid.mini{min-width:420px}
  .bars .bl{width:96px;font-size:12px}
  .tiles{gap:8px}
  .tile{padding:12px}
  .tile b{font-size:22px}
  .panel h2{flex-wrap:wrap}
  .panel .pipe{margin-left:0;width:100%}
}

/* Подсказку под кнопкой «Задача готова» скрипт прячет атрибутом hidden,
   когда отмечены все пункты. В флекс-строке правило браузера по умолчанию
   иногда перебивается — поэтому задаём явно. */
[hidden]{display:none !important}

/* Список пунктов, оставшихся без отметки, — менеджеру при приёмке.
   Не ошибка и не тревога: часть пунктов к конкретной отгрузке не относится,
   поэтому цвет спокойный, а не красный. */
.review .skipped{margin-top:8px;padding:8px 10px;border-radius:8px;
  background:#fff;border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.5}
.review .skipped b{color:var(--ink)}

/* Окно постановки задачи по шаблону. Памятка длинная — окно должно
   прокручиваться само, а не растягивать страницу за края экрана. */
.tpl-dlg{width:min(680px,94vw);max-height:88vh}
.tpl-dlg form{display:flex;flex-direction:column;gap:2px}
.tpl-dlg h3{margin:0 0 12px}
.tpl-dlg .fl{display:block;margin-top:12px;font-size:13px;color:var(--ink)}
.tpl-dlg .fl .muted{font-weight:400;font-size:12px;margin-left:6px}
.tpl-dlg input,.tpl-dlg textarea,.tpl-dlg select{width:100%;margin-top:4px}
.tpl-dlg textarea{font-family:inherit;line-height:1.5;resize:vertical}
.tpl-dlg .row{display:flex;gap:12px;margin-top:0}
.tpl-dlg .row .fl{flex:1;min-width:0}
.tpl-dlg > form > .muted{margin:14px 0 0;font-size:13px}
.tpl-dlg .actions{margin-top:16px}
@media (max-width:760px){
  .tpl-dlg{width:96vw;max-height:92vh}
  .tpl-dlg .row{flex-direction:column;gap:0}
}

/* Редактор шаблона. Полей мало, но они длинные: название задачи вида
   «Счет ХХХ Клиент ХХХХХ Деловые Линии отгрузка» в узкой колонке обрезалось,
   и целиком его было не видно. Поэтому страница шире обычной формы, а поля
   тянутся на всю ширину — у input по умолчанию ширина около 20 знаков,
   и без этого правила длинное название не помещается. */
.narrow.wide{max-width:900px}
.narrow input,.narrow select,.narrow textarea{width:100%;display:block}
/* подпись поля и пояснение к ней: подпись читаемая, пояснение вторым планом */
.narrow .fl{color:var(--ink);font-size:13px;margin:16px 0 0}
.narrow .fl .muted{font-size:12px;margin-left:6px;font-weight:400}
.narrow .fl input,.narrow .fl select{margin-top:5px}
/* Исполнитель, срок и приоритет — в одну строку равными долями.
   stretch, а не flex-end: подписи разной длины переносятся на две строки,
   и при выравнивании по низу поля вставали ступенькой. */
.narrow .row{display:flex;gap:14px;align-items:stretch}
.narrow .row > .fl{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:flex-end}
@media (max-width:760px){
  .narrow.wide{max-width:100%}
  .narrow .row{flex-direction:column;gap:0}
}

/* Те же подписи в окне создания шаблона */
dialog .row > .fl{flex:1;min-width:0;margin:0}
dialog .fl{color:var(--ink)}
dialog .row .fl input,dialog .row .fl select{margin-top:5px;width:100%}
@media (max-width:760px){ dialog .row{flex-direction:column;gap:0} }

/* Кнопка необратимого удаления в корзине. Она стоит рядом с «Восстановить»,
   поэтому должна отличаться на вид, но не кричать: обычно нажимают соседнюю. */
.danger-chip{border-color:#f0c8c3;color:var(--bad)}
.danger-chip:hover{background:#fdecea;border-color:var(--bad)}

/* График отсутствий: сначала карточки «кто на месте прямо сейчас» — это то,
   ради чего страницу открывают, — и только под ними полный список. */
.who-now{display:grid;gap:10px;margin:14px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.who-now .card{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.who-now .card.off{background:#fffaf3;border-color:#f0dcc2}
.who-now .card b{font-size:14px}
.who-now .card .muted{font-size:12px}
.who-now .card em{align-self:flex-start;margin-top:4px;font-style:normal}
h2.sec{font-size:15px;color:var(--muted);margin:26px 0 10px}
tr.off td{opacity:.55}

/* Метка «нет на месте» на карточке лида: лид назначен человеку, которого
   сейчас нет, — значит, обращение может зависнуть до его выхода. */
.away{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;
  background:#fdf0dc;color:#8a5a12;font-size:11px;font-weight:600;
  vertical-align:middle;cursor:help}

/* Сумма КП прямо в карточке сделки: менеджеру не нужно никуда проваливаться,
   чтобы её поставить или поправить — это происходит десятки раз в день. */
.kamt-f{display:flex;align-items:center;gap:4px;margin:6px 0 2px}
.kamt-f input{flex:1;min-width:0;padding:3px 7px;font-size:13px;
  font-variant-numeric:tabular-nums;text-align:right;border-radius:6px}
.kamt-f span{color:var(--muted);font-size:13px}
.ksum.none{color:var(--muted);font-weight:400;font-size:11px;font-style:italic}
.kcol .km .owner{color:var(--muted);font-size:12px}

/* Отчёты с раскрытием (год → месяц → неделя → день). Общее оформление для
   всех разделов панели: цифры столбиком, уровни различаются фоном. */
.tree-tools{display:flex;gap:8px;margin:14px 0 12px;flex-wrap:wrap}
.tree-tools button{padding:7px 14px;border-radius:10px;font-size:14px}
.tree-box{background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:auto}
table.tree{border-collapse:collapse;width:100%;min-width:780px}
table.tree th{position:sticky;top:0;background:var(--card);text-align:right;
  font-size:12px;color:var(--muted);font-weight:600;padding:11px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;z-index:2}
table.tree th:first-child{text-align:left}
table.tree td{padding:8px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.tree td.n{text-align:right;font-variant-numeric:tabular-nums}
table.tree td.big{font-weight:600}
table.tree td.s{font-size:12px}
table.tree td.name{text-align:left;padding-left:calc(12px + var(--d) * 22px)}
table.tree .knob{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-right:8px;border:1px solid var(--line);
  border-radius:4px;font-size:12px;line-height:1;color:var(--muted);
  cursor:pointer;user-select:none;background:var(--card)}
table.tree .knob:hover{border-color:var(--accent);color:var(--accent)}
table.tree tr.lv-year{background:#eef3fa;font-weight:600}
table.tree tr.lv-month{background:#fafbfd}
table.tree tr.lv-day td.name span{color:var(--muted)}
table.tree td.up{color:var(--ok)}
table.tree td.down{color:var(--bad)}
table.tree tr:hover{background:#f0f4f9}
.tree-note{background:#fff8e6;border:1px solid #f0e0b8;border-radius:9px;
  padding:11px 14px;margin:0 0 4px;font-size:13px;line-height:1.6}
.tree-legend{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.7}

/* Переключатель каналов продаж. Сразу видно и сумму по каждому, и долю —
   иначе, чтобы сравнить Озон с прямыми продажами, пришлось бы щёлкать. */
.chan-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 12px}
.chan-row .chip{display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 15px;border-radius:10px;font-size:13px;color:var(--muted)}
.chan-row .chip b{color:var(--ink);font-variant-numeric:tabular-nums}
.chan-row .chip .sh{font-size:11px;color:var(--muted)}
.chan-row .chip.on{border-color:var(--accent);background:#e9f0fa;
  color:var(--accent)}
table.tree .sh{font-size:11px;color:var(--muted)}

/* Широкий отчёт с двухэтажной шапкой (посещаемость по каналам). */
table.tree.wide{min-width:1120px}
table.tree th.grp{text-align:center;border-bottom:1px solid var(--line);
  color:var(--ink);padding-bottom:6px}
table.tree th.sub{top:36px;font-weight:500}
table.tree th[rowspan]{vertical-align:bottom}

/* Сумма на этапе, где её ещё не считают: поле рабочее, но видно, что цифра
   пока ни на что не влияет — в итог воронки она попадёт с этапа КП. */
.kamt-f input.pending{color:var(--muted);border-style:dashed}
.kcol .kt a{color:var(--ink)}
.kcol .kt a:hover{color:var(--accent)}
/* Карточка сделки: заголовки разделов внутри формы */
.deal-form h2.sec{font-size:14px;color:var(--muted);margin:24px 0 4px;
  padding-top:14px;border-top:1px solid var(--line)}
.deal-form .actions{margin-top:22px}
.deal-form .actions .chip{display:inline-flex;align-items:center}

/* Условия перехода по этапу — в правой колонке карточки сделки, рядом с
   переключателем этапа: решение «двигать или нет» принимается тут же. */
.deal-steps{margin:6px 0 10px}
.deal-steps li{padding:6px 0;align-items:flex-start}
.deal-steps li::before{content:none}
.deal-steps .box{width:22px;height:22px;margin-top:1px}
.deal-steps span{font-size:13px;line-height:1.45}
.deal-steps em{font-size:11px}
.muted.small{font-size:12px;line-height:1.5}
.ok-note{color:var(--ok);font-size:13px;font-weight:600;margin:6px 0 10px}

/* Окно причины отказа: варианты списком, чтобы выбирали из готовых, а не
   писали каждый по-своему — иначе причины потом не сосчитать. */
.reasons{display:grid;gap:2px;margin-top:6px}
.reasons .rr{display:flex;align-items:flex-start;gap:9px;padding:7px 9px;
  border-radius:8px;cursor:pointer;font-size:13px;line-height:1.4}
.reasons .rr:hover{background:#f0f4f9}
.reasons .rr input{width:auto;margin:2px 0 0;flex:none}
.lose-note{background:#fdecea;border:1px solid #f3c6c1;border-radius:8px;
  padding:9px 11px;font-size:13px;line-height:1.5;margin:10px 0}
.klose{margin:5px 0 2px;font-size:11px;color:var(--bad);line-height:1.4}

/* Незакрытый этап: и на доске, и в карточке видно до попытки, а не после. */
.kleft{margin-top:4px;font-size:11px;color:var(--warn)}
.warn-note{background:#fff8e6;border:1px solid #f0e0b8;border-radius:8px;
  padding:9px 11px;font-size:13px;line-height:1.5;margin:6px 0 10px}
.kmove select option:disabled{color:#b8bfc7}

/* Галочка-признак в форме: подпись справа, пояснение под ней. */
.check{display:flex;align-items:flex-start;gap:10px;margin:18px 0 4px;
  cursor:pointer;font-size:14px}
.check input{width:auto;margin:2px 0 0;flex:none}
.check em{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:2px}

/* Вкладки внутри «Финансов»: оплаты и отгрузки. Подпись под названием
   объясняет разницу — иначе их путают и складывают. */
.fin-tabs{display:flex;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
.fin-tabs a{padding:9px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--muted);font-size:14px;line-height:1.3}
.fin-tabs a em{display:block;font-style:normal;font-size:11px;margin-top:2px}
.fin-tabs a:hover{border-color:var(--accent);text-decoration:none}
.fin-tabs a.on{border-color:var(--accent);background:#eef4fc;color:var(--ink);
  font-weight:600}

/* Почта. Двухколоночная раскладка: слева папки, справа письма. Третью
   колонку с текстом не делаем — на 13-дюймовом экране письмо в ней нечитаемо,
   а открыть его отдельной страницей ничего не стоит. */
.mail-top{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  justify-content:space-between}
.mail-search{display:flex;gap:8px;margin:14px 0 12px}
.mail-search input{min-width:240px}
.mail-wrap{display:grid;grid-template-columns:190px 1fr;gap:14px;
  align-items:start}
.mail-folders{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px}
.mail-folders a{padding:8px 11px;border-radius:7px;color:var(--muted);
  font-size:14px}
.mail-folders a:hover{background:#f0f4f9;text-decoration:none}
.mail-folders a.on{background:#eef4fc;color:var(--ink);font-weight:600}
.mail-list{background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.mline{display:flex;align-items:center;gap:8px;padding-right:10px;
  border-bottom:1px solid var(--line)}
.mline:last-child{border-bottom:0}
.mline:hover{background:#f0f4f9}
.mrow{flex:1;min-width:0;display:grid;
  grid-template-columns:220px 1fr 130px;gap:12px;
  padding:11px 4px 11px 14px;color:var(--ink);align-items:baseline}
.mrow:hover{text-decoration:none}
.mline.unread .msubj,.mline.unread .mfrom{font-weight:600}
/* Кнопка видна всегда, но приглушена, чтобы не спорить с темой письма;
   под курсором становится обычной. Прятать её совсем нельзя: с телефона
   наводить нечем, да и невидимой кнопкой никто не пользуется. */
.mlead{opacity:.55;transition:opacity .12s}
.mline:hover .mlead,.mlead.done{opacity:1}
.mlead .chip{padding:4px 10px;font-size:12px;white-space:nowrap}
.mlead.done{color:var(--ok);border-color:#bfe0c9}
.mfrom{color:var(--muted);font-size:13px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mline.unread .mfrom{color:var(--ink)}
.msubj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdate{color:var(--muted);font-size:12px;text-align:right;white-space:nowrap}
.cli{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:8px;
  background:#e8f4ea;color:var(--ok);font-size:10px;font-weight:600}
.mail-pages{display:flex;gap:10px;align-items:center;padding:12px 14px}
.mail-body{white-space:pre-wrap;word-break:break-word;font:14px/1.6 inherit;
  margin:0;background:#fafbfd;border:1px solid var(--line);border-radius:8px;
  padding:14px;max-height:60vh;overflow:auto}
@media (max-width:760px){
  .mail-wrap{grid-template-columns:1fr}
  .mail-folders{flex-direction:row;overflow-x:auto}
  .mrow{grid-template-columns:1fr;gap:3px}
  .mdate{text-align:left}
  .mlead{opacity:1}
}

/* Мелкие кнопки в таблицах и карточках: та же обводка, но компактнее —
   иначе строка таблицы разъезжается по высоте. */
.acts .chip,.grid .chip,.kcol .chip{padding:5px 11px;font-size:13px}
.box{width:26px;height:26px;padding:0;border-radius:7px}
.tpl-items .del,.checklist .del,.files .del{padding:0;width:28px;height:28px;
  border-radius:8px}
.knob{border-radius:5px}
/* Кнопка удаления пункта в редакторе шаблона — красная только при наведении */
.tpl-items .del{color:var(--muted);border-color:var(--line)}
.tpl-items .del:hover{background:#fdecea;color:var(--bad);border-color:#f0c8c3}
/* Отмена рядом с «Сохранить»: ссылка выглядит как кнопка, чтобы пара
   действий читалась одинаково */
.actions .chip{padding:9px 16px;border-radius:10px;font-size:15px}

/* Длинные пути и команды в подсказках. На телефоне «/home/DmitryP/…/mail.conf»
   в одну строку не помещается и растягивает страницу — разрешаем перенос
   внутри слова: адрес файла читается и по частям. */
code{background:#f2f5f9;border-radius:6px;padding:1px 6px;font-size:13px;
  word-break:break-all;overflow-wrap:anywhere}
.stub code{display:inline-block;max-width:100%}

/* Чаты. Две колонки: слева список, справа переписка. Высоту задаём от окна,
   чтобы поле ввода всегда было на виду — иначе после десятка сообщений
   приходится листать страницу вниз, чтобы ответить. */
.chat-wrap{display:grid;grid-template-columns:280px 1fr;gap:14px;
  align-items:start}
.chat-side{display:flex;flex-direction:column;gap:10px}
.chat-list{background:var(--card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.chat-item{display:flex;flex-direction:column;gap:3px;padding:11px 13px;
  border-bottom:1px solid var(--line);color:var(--text)}
.chat-item:last-child{border-bottom:0}
.chat-item:hover{background:#f2f5f9;text-decoration:none}
.chat-item.on{background:#e9f0fa}
.ci-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ci-last{color:var(--muted);font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 6px;border-radius:10px;
  background:var(--bad);color:#fff;font-size:11px;font-style:normal;
  font-weight:700;line-height:1}
.top nav .badge{margin-left:5px}
.chat-people{display:flex;flex-wrap:wrap;gap:6px}
.chat-people .chip{font-size:13px;padding:5px 11px}

.chat-main{background:var(--card);border:1px solid var(--line);
  border-radius:10px;display:flex;flex-direction:column;height:72vh;
  min-height:420px;overflow:hidden}
.chat-head{padding:12px 15px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.chat-head .muted{font-size:12px}
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;
  flex-direction:column;gap:8px;background:#fbfcfd}
.msg{max-width:76%;align-self:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:8px 12px;
  display:flex;flex-direction:column;gap:2px}
/* свои сообщения справа и цветом — так переписка читается с одного взгляда */
.msg.mine{align-self:flex-end;background:#e9f0fa;border-color:#cfe0f5}
.msg .who{font-size:11px;color:var(--muted);font-weight:600}
.msg.mine .who{color:var(--accent)}
.msg .txt{white-space:pre-wrap;word-break:break-word;line-height:1.45}
.msg .at{font-size:11px;color:var(--muted);align-self:flex-end}
.chat-send{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);
  align-items:flex-end}
.chat-send textarea{flex:1;margin:0;resize:none}
@media (max-width:760px){
  .chat-wrap{grid-template-columns:1fr}
  .chat-main{height:66vh}
  .msg{max-width:88%}
}

/* Роли и таблица доступов */
.inline-role select{margin:0;padding:5px 8px;font-size:13px;max-width:190px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.access-grid{min-width:640px}
.access-grid th{font-size:12px;font-weight:600;line-height:1.25;
  vertical-align:bottom}
.access-grid td:first-child,.access-grid th:first-child{text-align:left;
  white-space:nowrap}
.access-grid td:not(:first-child),
.access-grid th:not(:first-child){text-align:center}
.access-grid .y{color:var(--ok);font-weight:600}
.access-grid .n{color:var(--muted)}

/* Адрес в таблице не рвём по буквам: «m2@ea / stvac / uum.ru» в три строки
   читается хуже, чем горизонтальная прокрутка таблицы целиком. */
.grid code{white-space:nowrap;word-break:normal}

/* Карточка лида */
.crumbs{margin:0 0 6px}
/* Тело письма. Читают его целиком и подолгу — поэтому крупнее основного
   текста, с воздухом между строк и высоким окном: раньше письмо на три
   тысячи знаков лежало в узкой полоске, и приходилось скроллить вслепую. */
.mailbody{white-space:pre-wrap;word-break:break-word;font-family:inherit;
  font-size:14.5px;line-height:1.7;color:#1c2530;
  background:#fbfcfd;border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;max-height:70vh;overflow:auto;margin:0 0 8px;
  resize:vertical}
.mailbody.full{max-height:none}
/* Цитата из прошлого письма отступает и гаснет — как в почтовом клиенте. */
.mailbody .q{color:#8a94a2;border-left:2px solid var(--line);
  padding-left:10px;display:block}
.mailbody-more{margin:0 0 12px}
.props{width:100%;border-collapse:collapse}
.props th{text-align:left;font-weight:500;color:var(--muted);padding:5px 10px 5px 0;
  vertical-align:top;white-space:nowrap;font-size:13px}
.props td{padding:5px 0;vertical-align:top}
.kcard .kt a{color:inherit}
.kcard .kt a:hover{color:var(--accent)}
.kcard .when{color:var(--muted);font-size:12px}

/* Контрагенты */
.subnav.seg b{font-weight:600;color:var(--muted);margin-left:4px;font-size:12px}
.subnav.seg a.cur b{color:var(--accent)}
.segs .st{margin:0 3px 3px 0}
.pager{display:flex;align-items:center;gap:10px;margin:12px 0}
.filters input[name=q]{min-width:230px}

/* Переписка в карточке обращения */
.thread{border:1px solid var(--line);border-radius:10px;padding:8px 12px;
  margin-bottom:8px;background:var(--card)}
.thread.out{background:#f4f8fd}
.thread summary{cursor:pointer;display:flex;gap:8px;flex-wrap:wrap;
  align-items:baseline}
.thread summary em{margin-left:auto;font-style:normal;font-size:12px}
.thread .mailbody{margin-top:10px}
.bad-note{color:var(--bad)}
.qnote{font-size:13px;line-height:1.45;margin:10px 0}

/* Переписка в сделке идёт под формой, в первой колонке: справа этап и
   контрольные отметки, им место наверху. */
.deal-mail{grid-column:1}
.deal-mail h2.sec{font-size:14px;color:var(--muted);margin:6px 0 8px}

/* Настройка доступа */
.access-grid .cellbox{display:flex;justify-content:center;cursor:pointer;
  padding:2px}
.access-grid .cellbox input{width:17px;height:17px;margin:0;cursor:pointer}
.access-grid tr.always td{color:var(--ok)}
.access-grid th .muted{display:block;font-weight:400;font-size:11px}
.access-grid th .flag{display:block;font-style:normal;font-size:10px;
  color:var(--warn)}
.actions.left{justify-content:flex-start;margin:14px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip[disabled]{opacity:.45;cursor:default}

.access-edit{display:flex;align-items:center;gap:10px;margin:10px 0 12px}

/* Планирование: план-факт */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-bottom:16px}
.cards .card{background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.cards .card h3{margin:0 0 6px;font-size:12px;font-weight:600;
  color:var(--muted);text-transform:none}
.cards .big{margin:0;font-size:20px;font-weight:600;line-height:1.2}
.cards .big.ok{color:var(--ok)}
.cards .big.bad{color:var(--bad)}
.cards .card .muted{margin:6px 0 0;font-size:12px}
.grid td.num,.grid th.num{text-align:right;white-space:nowrap}
.grid td.num.ok{color:var(--ok)}
.grid td.num.bad{color:var(--bad)}
.plan-in{width:130px;text-align:right;margin:0;padding:5px 8px;font-size:13px}
tr.cur-month td{background:#f6f9fe}
.grid tfoot th{background:#f2f5f9;font-weight:600}
.seg-switch{display:inline-flex;gap:6px}
.seg-switch .chip.on{background:#e9f0fa;color:var(--accent);font-weight:600}

/* Подготовленный, но не отправленный ответ */
.draft{border:1px solid var(--warn);border-radius:10px;padding:12px 14px;
  background:#fffdf7;margin:14px 0}
.draft h2.sec{margin:0 0 8px;color:var(--warn);font-size:14px}
.draft textarea{width:100%;font-family:inherit;font-size:13px;line-height:1.5}

/* Повторное обращение */
.repeat-note{background:#fff6e5;border:1px solid #f0d9a8;border-radius:8px;
  padding:8px 11px;font-size:13px;line-height:1.45;margin:10px 0}
.ksub.repeat{color:var(--warn);font-weight:600}

/* Предложение убрать нецелевое обращение */
.purge-ask{background:#fdf3f2;border:1px solid #f0c8c3;border-radius:10px;
  padding:11px 14px;margin:0 0 14px;font-size:13px;line-height:1.5}
.purge-acts{display:inline-flex;gap:8px;margin-left:8px;vertical-align:middle}
.purge-acts form{display:inline}

/* Фамилия в таблице нагрузки не должна ломаться пополам: «Притула Дмитрий»
   в две строки растягивал всю строку таблицы вдвое. */
.grid td.who,.grid th.who{white-space:nowrap}

/* Путь обращения в карточке сделки */
.path{list-style:none;margin:0 0 18px;padding:0;position:relative}
.path li{position:relative;padding:0 0 12px 18px;font-size:13px;line-height:1.45;
  border-left:2px solid var(--line)}
.path li:last-child{border-left-color:transparent;padding-bottom:0}
.path li::before{content:"";position:absolute;left:-5px;top:4px;width:8px;
  height:8px;border-radius:50%;background:var(--accent)}
.path li b{display:block}
.path li em{font-style:normal;color:var(--muted);font-size:12px}
.path li .muted{display:block;font-size:12px}
.path li .repeat{display:block;font-size:12px;color:var(--warn)}
.mini-chip{display:inline-block;margin-top:5px;padding:3px 9px;font-size:12px}

/* Подсказка с реквизитами: свёрнута, пока не понадобится */
.req-hint{margin:8px 0 4px;font-size:13px}
.req-hint summary{cursor:pointer;color:var(--accent)}
.req-hint .mailbody{margin:8px 0;max-height:200px}

/* Выбор письма в карточке воронки */
.letter-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.letter-kinds form{display:inline}

/* Карточки порогов безубыточности */
.cards .card.ok-card{border-color:#bfe0c9;background:#f6fbf7}
.cards .card.bad-card{border-color:#f0c8c3;background:#fdf7f6}
.cards .card .ok{color:var(--ok)}
.cards .card .bad{color:var(--bad)}

.warn-text{color:var(--warn)}

/* Таблица безубыточности: статьи слева, месяцы по столбцам. Первый столбец
   закреплён — иначе при прокрутке вбок непонятно, к какой статье относится
   цифра. */
.bep{min-width:900px;font-size:13px}
.bep td,.bep th{padding:7px 10px;white-space:nowrap}
.bep .art{position:sticky;left:0;background:var(--card);text-align:left;
  min-width:230px;z-index:1}
.bep thead th{background:#fafbfc}
.bep thead th.art{background:#fafbfc}
.bep .total-col{background:#f7f9fb;font-weight:600}
.bep tr.b td{font-weight:600}
.bep tr.r-head td{background:#f2f5f9;color:var(--muted);text-transform:none}
.bep tr.r-head td.art{background:#f2f5f9}
.bep tr.r-sub td.art{padding-left:26px;color:var(--text)}
.bep tr.r-sum td{border-top:1px solid var(--line);background:#fbfcfd}
.bep tr.r-sum td.art{background:#fbfcfd}
.bep tr.r-calc td{background:#eef4fc}
.bep tr.r-calc td.art{background:#eef4fc}
.bep tr.r-result td{background:#f3f7f4;border-top:2px solid var(--line)}
.bep tr.r-result td.art{background:#f3f7f4}

.bep td.num a{color:var(--text);border-bottom:1px dashed #c3ccd6}
.bep td.num a:hover{color:var(--accent);border-bottom-color:var(--accent);
  text-decoration:none}

/* Документы в расшифровке: плюсик раскрывает состав */
.docs td,.docs th{padding:8px 10px}
.docs .w1{width:34px;padding-left:8px;padding-right:0}
.knob-btn{width:24px;height:24px;padding:0;line-height:1;border-radius:6px;
  font-size:14px;color:var(--muted)}
.knob-btn:hover{color:var(--accent);border-color:var(--accent)}
.docs tr.items-row > td{background:#fafbfd;padding:0 10px 12px 10px}
.docs table.inner{margin:0;border:1px solid var(--line)}
.docs table.inner th{background:#f2f5f9;font-size:12px}
.docs table.inner td{font-size:13px}

/* Всплывающая расшифровка: широкое окно, шапка с заголовком и закрытием */
dialog.wide-dlg{width:min(1100px,94vw);max-height:88vh;overflow:auto;
  border:1px solid var(--line);border-radius:12px;padding:18px 20px}
dialog.wide-dlg::backdrop{background:rgba(20,28,38,.42)}
.dlg-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dlg-head h3{margin:0;font-size:17px}
.dlg-head .chip{margin-left:auto}
dialog.wide-dlg .scroll-x{max-width:100%}

/* Каждое следующее окно чуть уже предыдущего — видно, что оно лежит поверх */
dialog.wide-dlg + dialog.wide-dlg{width:min(1040px,90vw)}
dialog.wide-dlg .dlg-body{min-height:60px}

/* Суть запроса в сделке — это письмо клиента целиком, поэтому поле читается
   как письмо: тот же кегль и межстрочный интервал, что в блоке письма. */
.request-box{font-size:14.5px;line-height:1.7;padding:14px 16px;
  background:#fbfcfd;resize:vertical}

/* Итог по документам стоит над таблицей: его читают первым. */
.docs-total{margin:0 0 10px;font-size:13px;color:var(--muted)}
.docs-total b{color:var(--text);font-weight:600}

/* Список статей, вынесенных из расчёта. */
.skip-box{margin:14px 0;border:1px solid var(--line);border-radius:10px;
  background:var(--card);padding:10px 14px}
.skip-box summary{cursor:pointer;font-weight:600;font-size:13px}
.skip-box table{margin-top:10px}

/* Вложения из письма */
.att-list{list-style:none;padding:0;margin:0 0 14px}
.att-list li{padding:6px 0;border-bottom:1px solid var(--line)}
.att-list li:last-child{border-bottom:0}
.att-list .muted{margin-left:8px;font-size:12px}

/* Пометка «сохранено» рядом с выбором состояния в ИстКоине */
.saved-mark{margin-left:8px;font-size:12px;color:var(--ok)}

/* Удаление сделки — внизу карточки, отдельно от рабочих кнопок */
.del-deal{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* Памятка этапа: задача, инструменты, материалы */
.play{background:#f4f7fb;border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:12px}
/* Задача этапа стоит прямо под заголовком «Этап», без рамки: это не
   вспомогательный блок, а сама суть того, что сейчас делают. */
.play-title{margin:-4px 0 10px;font-weight:600;line-height:1.4;font-size:14px}
.play-h{margin:8px 0 4px;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
.play-list{margin:0;padding-left:18px}
.play-list li{margin:3px 0}
.play-list form{display:inline}
button.linkish{background:none;border:0;padding:0;color:var(--accent);
  cursor:pointer;font:inherit;text-decoration:underline}
button.linkish:hover{color:var(--text)}

/* Скрипт разговора — окно сбоку: карточка остаётся видна */
/* Окно живёт у правого края экрана, а карточка на время его открытия
   сдвигается влево (см. .side-open ниже): так окно ничего не заслоняет —
   ни поля сделки, ни этап с чек-листом. */
.script-box{position:fixed;top:80px;right:16px;width:min(520px,42vw);
  max-height:82vh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 34px rgba(20,30,50,.18);padding:14px 16px;z-index:60}
.script-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:8px}
.script-text{white-space:pre-wrap;font-family:inherit;font-size:13.5px;
  line-height:1.55;margin:0}
/* Пока окно открыто, страница уступает ему место: содержимое смещается
   влево ровно на ширину окна, и ничего не перекрывается. */
body.side-open main{margin-left:0;margin-right:min(560px,44vw);
  transition:margin-right .15s}

@media (max-width:1100px){
  /* На узком экране двигать нечего: окно встаёт в поток страницы. */
  .script-box{position:static;width:auto;max-height:none;box-shadow:none;
    margin:10px 0}
  body.side-open main{margin-right:auto}
}

/* Отметка «выполнено» справа от пункта */
.checklist .done-mark{margin-left:8px;font-size:12px;color:var(--ok)}

/* «Отмена» стоит рядом с отправкой, но выглядит скромнее: это выход,
   а не действие. */
.draft-cancel{margin-top:-6px}

#script-materials{width:min(620px,48vw);max-height:86vh;overflow-x:hidden}
body.side-open main{margin-right:min(660px,50vw)}

/* Окно материалов: список разделов с плюсиками */
.mat-list{list-style:none;margin:0;padding:0}
.mat-item{padding:8px 0;border-bottom:1px solid var(--line)}
.mat-item:last-child{border-bottom:0}
.mat-name{font-size:14px}
.mat-knob{margin-right:8px}
.mat-hint{margin:6px 0 0;font-size:12px}
.mat-sub{margin:8px 0 0 26px}
.mat-sub ul{margin:0;padding-left:16px}

.mat-vendor{padding:6px 0}
.mat-files{list-style:none;margin:6px 0 6px 26px;padding:0}
.mat-files li{padding:3px 0}
/* Строка файла: галочка — название — размер. Сеткой, а не flex: у длинных
   имён flex распирал окно и появлялась горизонтальная прокрутка. */
.mat-files label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;align-items:baseline;cursor:pointer;font-size:13.5px}
.mat-files label>span{overflow-wrap:anywhere}
.mat-files label .muted{white-space:nowrap}
.mat-files input{margin:0}
.mat-actions{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}