:root{
  --bg:#f6f7f9; --panel:#fff; --line:#e3e6ea; --ink:#1b1f24; --dim:#6b7480;
  --accent:#1f3864; --green:#2e7d32; --green-bg:#e7f5e9; --amber:#a86400; --amber-bg:#fdf3e0;
  --red:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
header{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--panel);
  border-bottom:1px solid var(--line);position:static;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;text-decoration:none;color:var(--ink)}
nav{display:flex;gap:16px;flex:1}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--accent)}
main{padding:20px;width:100%;max-width:none;margin:0}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:15px;margin:24px 0 10px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.04em}
.flash{margin:12px 20px;padding:10px 14px;background:#fffbe6;border:1px solid #f0e0a0;
  border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.card .n{font-size:26px;font-weight:700;line-height:1.1}
.card .l{color:var(--dim);font-size:12px;margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
/* overflow:hidden у таблицы ломает position:sticky — поэтому радиус делаем по углам */
.tablewrap{overflow-x:auto;margin-bottom:4px}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px}
/* Крупные таблицы делят ширину строго по процентам из шаблона — иначе на широком
   мониторе содержимое жмётся влево, а справа остаётся пустота.
   Мелкие таблицы (карточка клиента, менеджеры) считаются по содержимому. */
table.qtable,table.wide{table-layout:fixed}
table.qtable td,table.wide td{overflow-wrap:anywhere}
/* Заголовок таблицы НЕ липкий: любое sticky здесь наезжало на данные
   (шапка сайта переносится по ширине, высота плавает). Надёжность важнее. */
th{background:var(--accent);color:#fff;text-align:left;font-size:12px;font-weight:600;
  padding:8px 10px;position:static}
th:first-child{border-top-left-radius:9px}
th:last-child{border-top-right-radius:9px}
td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
tr:first-child td{border-top:none}
tr.mark td{background:var(--green-bg)}
tr:hover td{background:#eef2f7}
tr.mark:hover td{background:#d9efdd}
.tag{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:600;
  white-space:nowrap}
.t-new{background:#eceff3;color:var(--dim)}
.t-sent{background:var(--amber-bg);color:var(--amber)}
.t-commented{background:var(--green-bg);color:var(--green)}
.t-skipped{background:#f3e6e6;color:var(--red)}
.mono{font-family:Consolas,"SF Mono",monospace}
.dim{color:var(--dim)}
.small{font-size:12px}
button,.btn{font:inherit;padding:6px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;text-decoration:none;color:var(--ink)}
button:hover,.btn:hover{background:#eef2f7}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
button.primary:hover{filter:brightness(1.15)}
form.inline{display:inline}
input[type=text],input[type=time],input[type=number],select,textarea{
  font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
label.chk{display:inline-flex;align-items:center;gap:6px;margin-right:14px;padding:6px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer}
.filters{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:12px;color:var(--dim)}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:12px 14px;margin:12px 0}
.comment{background:var(--green-bg);border:1px solid #cbe6cf;border-radius:8px;
  padding:10px 12px;margin:8px 0;white-space:pre-wrap}

/* ---------- редактируемые ячейки ---------- */
.qtable td{font-size:13px}
.ed{cursor:text;border-radius:5px;padding:1px 4px;margin:-1px -4px;
  min-height:19px;white-space:pre-wrap;word-break:break-word;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.ed:hover{background:#fff;border-color:var(--line);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.ed.empty::before,.ed:empty::before{content:attr(data-placeholder);color:#aab1ba;font-style:italic}
.ed.okflash{background:var(--green-bg);border-color:#a9d3af}
.ed.errflash{background:#fde8e6;border-color:#e6b0ac}
textarea.edinput{width:100%;min-height:52px;font:inherit;padding:5px 6px;border-radius:6px;
  border:1px solid var(--accent);resize:vertical;background:#fff;display:block}
.statsel{font:inherit;font-size:12px;padding:3px 5px;border-radius:6px;
  border:1px solid var(--line);background:#fff;width:100%}
.statsel.okflash{background:var(--green-bg)}
.statsel.errflash{background:#fde8e6}

/* ---------- колонка «авто и госномера» ---------- */
.carcell{min-width:190px}
.carlist.collapsed .car:nth-child(n+4){display:none}
.car{position:relative;padding:3px 20px 3px 7px;margin-bottom:4px;border-radius:6px;
  border-left:3px solid #c9d4e4;background:#f4f7fb}
.car .plate{font-family:Consolas,"SF Mono",monospace;font-size:12px;letter-spacing:.02em}
.delcar{position:absolute;top:2px;right:2px;border:none;background:none;color:#aab1ba;
  cursor:pointer;font-size:15px;line-height:1;padding:2px 5px;border-radius:4px}
.delcar:hover{background:#fde8e6;color:var(--red)}

/* ---------- колонка комментариев ---------- */
.comcell{min-width:300px}
.comlist.collapsed .com:nth-child(n+4){display:none}
.com{border-left:3px solid #cbe6cf;background:var(--green-bg);border-radius:0 6px 6px 0;
  padding:5px 8px;margin-bottom:5px}
/* только что прилетевший ответ менеджера — подсвечиваем, чтобы заметили */
.com.fresh{animation:freshin 4s ease-out}
@keyframes freshin{
  0%{background:#fff3bf;border-left-color:#e0a800;transform:translateX(6px)}
  15%{transform:translateX(0)}
  100%{background:var(--green-bg);border-left-color:#cbe6cf}
}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}
.live::before{content:'';width:7px;height:7px;border-radius:50%;background:#2e7d32;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.comts{font-size:11px;color:#4a5560}
.comau{font-size:11px;margin-left:6px}
.comtext{font-size:13px;margin-top:1px}
.com .ed:hover{background:#fff}
/* ---------- подгрузка при прокрутке ---------- */
.loadmore{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;color:var(--dim);font-size:13px}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

button.lnk{border:none;background:none;color:var(--accent);cursor:pointer;padding:2px 0;
  font:inherit;font-size:12px;margin-right:12px;text-decoration:underline}
button.lnk:hover{background:none;filter:brightness(1.3)}