/* Токены по макету: светлая тема, Inter, синий акцент. */
:root{--bg:#F4F4F1;--surface:#fff;--border:#E3E2DD;--border-soft:#EEEDE8;--text:#1B1B1A;--muted:#5E5D58;--accent:#2B5BD7;--accent-dark:#1E44A8;
--p-bg:#E8EDFB;--p-fg:#1E44A8;--s-bg:#ECE6F8;--s-fg:#5B3BA6;--g-bg:#E3F3EA;--g-fg:#1F7A4D;--o-bg:#FCEBD9;--o-fg:#B45309;--r-bg:#FDE8E6;--r-fg:#B42318;--gray-bg:#F0EFEB;--gray-fg:#3B3A36}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.45}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-dark)}
h1{margin:0;font-size:24px;font-weight:700}h2{margin:0;font-size:15px;font-weight:600}
b{font-weight:600}
.muted{color:var(--muted)}.red{color:var(--r-fg)}.orange{color:var(--o-fg)}.green{color:var(--g-fg)}
.hidden{display:none!important}.mt{margin-top:10px}.grow{flex:1;min-width:0}.grow2{flex:3 1 460px}

/* layout */
.layout{display:flex;flex-wrap:wrap;min-height:100vh}
.sidebar{width:232px;padding:20px 14px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 12px 20px;color:var(--text);font-weight:700;font-size:15px}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--text);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;padding:10px 12px;border-radius:8px;color:var(--gray-fg);font-weight:500;min-height:44px}
.nav a:hover{background:var(--gray-bg);color:var(--text)}.nav a.on{background:var(--p-bg);color:var(--p-fg)}
.sidebar-foot{margin-top:auto;padding:12px;font-size:12px;color:var(--muted);line-height:1.5}
.main{flex:999 1 560px;min-width:0;padding:28px 32px;display:flex;flex-direction:column;gap:20px}
@media (max-width:900px){
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px;border-right:0;border-bottom:1px solid var(--border)}
  .brand{padding:4px 8px}.nav{flex-direction:row;flex-wrap:wrap;gap:2px}.nav a{min-height:40px;padding:8px 10px}.sidebar-foot{display:none}
  .main{padding:16px}
}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px}
.pad{padding:16px}.pad-x{padding-left:16px;padding-right:16px}.pad-b{padding-bottom:12px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.card-foot{padding:12px 16px;border-top:1px solid var(--border-soft)}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border-soft)}
.card > .row:first-of-type, .card-head + .row{border-top:0}
.sub{font-size:12px;margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.empty{padding:16px;color:var(--muted)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:16px 18px;color:var(--text)}.stat .num{font-size:30px;font-weight:700;margin-top:4px}.stat-red{border-color:#F2B8B5}
.two-col{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.two-col > .card{flex:3 1 420px;min-width:0}.two-col > .stack{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.head-card{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.head-main{flex:1 1 320px;min-width:0}.head-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.next-step{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;background:#F7F7F4;border-radius:10px;border:1px solid var(--border-soft)}
.back{font-size:13px;font-weight:500}
.avatar{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.av-p{background:var(--p-bg);color:var(--p-fg)}.av-s{background:var(--s-bg);color:var(--s-fg)}

/* chips, badges, dots */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.chip-p{background:var(--p-bg);color:var(--p-fg)}.chip-s{background:var(--s-bg);color:var(--s-fg)}.chip-pr{background:var(--gray-bg);color:var(--gray-fg)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-blue{background:var(--p-bg);color:var(--p-fg)}.b-green{background:var(--g-bg);color:var(--g-fg)}.b-orange{background:var(--o-bg);color:var(--o-fg)}.b-red{background:var(--r-bg);color:var(--r-fg)}.b-gray{background:var(--gray-bg);color:var(--gray-fg)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-green{background:var(--g-fg)}.dot-yellow{background:var(--o-fg)}.dot-red{background:var(--r-fg)}.dot-gray{background:#A9A8A1}

/* controls */
.btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font:inherit;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#B9B8B2}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-xs{min-height:30px;padding:0 9px;font-size:12px}.btn-danger{color:var(--r-fg)}
.inp,.sel,textarea.inp{min-height:36px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:13px;background:var(--surface);color:var(--text);width:100%;max-width:100%}
.inp:focus,.sel:focus{outline:2px solid var(--p-bg);border-color:var(--accent)}
.sel{appearance:auto}
.inp-date{width:150px}.inp-title{font-weight:500;border-color:transparent;background:transparent;padding-left:4px}.inp-title:hover{border-color:var(--border)}.inp-title:focus{background:var(--surface)}
.inp.is-overdue{border-color:#F2B8B5}
.sel-ждём{background:var(--o-bg);color:var(--o-fg);border-color:transparent}.sel-готово{background:var(--g-bg);color:var(--g-fg);border-color:transparent}.sel-в-работе{background:var(--p-bg);color:var(--p-fg);border-color:transparent}
.inline{display:inline;margin:0}
.actions{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:28px}.check input{width:18px;height:18px}
.new-task{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.new-task .inp:first-child{flex:1 1 260px}.new-task .sel{width:auto;max-width:260px}
.form-grid{display:flex;flex-direction:column;gap:12px}.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500}
.hint{font-size:11px;color:var(--muted);font-weight:400}
.md p{margin:0 0 8px}.md ul{margin:0;padding-left:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.filters .sel{width:auto;max-width:280px}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto}
.tabs a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;white-space:nowrap;margin-bottom:-1px}
.tabs a.on{color:var(--text);border-bottom-color:var(--text)}
.tabs b{margin-left:6px;padding:0 7px;border-radius:999px;background:var(--border-soft);font-size:11px;font-weight:600;color:var(--gray-fg);line-height:18px}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
.tasks td{vertical-align:middle}
.col-status{width:120px}.col-date{width:170px;white-space:nowrap}.col-actions{width:1%;white-space:nowrap}.col-num{width:80px;text-align:right}.col-wait{min-width:180px}
.col-status .sel{width:112px;padding:4px 6px;min-height:30px;font-size:12px;font-weight:600}
.col-date .inp-date{min-height:30px;padding:3px 6px;font-size:12px;width:138px}
.col-wait .sel{min-height:30px;padding:3px 6px;font-size:12px;width:150px}
.row-overdue{background:#FFF8F7}.row-remind{background:#FFFAF3}.row-done{opacity:.7}
.row-done .inp-title{text-decoration:line-through}
.products .inp{min-height:32px;padding:4px 8px;font-size:13px}
.template-row{background:#FBFBF9}

/* grid of counterparties */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pc{display:flex;flex-direction:column;gap:12px;padding:16px;color:var(--text)}.pc:hover{border-color:#B9B8B2}.pc-red{border-color:#F2B8B5}
.pc-head{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.pc-step{font-size:13px;line-height:1.4}
.meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px;align-items:center}
.bar{height:6px;border-radius:999px;background:var(--border-soft);overflow:hidden}.bar i{display:block;height:100%}
details summary{cursor:pointer;padding:10px 0}

/* --- правки после первого визуального прогона --- */
.tasks .col-title{min-width:260px;width:38%}
.tasks .inp-title{min-width:220px}
.products th:first-child,.products td:first-child{min-width:180px}
.products .inp{min-width:90px}
.products td:nth-child(4) .inp{min-width:160px}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:1100px){.three-col{grid-template-columns:1fr}}

/* --- доска контрагентов --- */
#board{display:flex;flex-direction:column;gap:16px}
.board-section{padding:12px 16px 16px}
.board-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.drag-handle{cursor:grab;color:#A9A8A1;font-size:16px;letter-spacing:-2px;user-select:none;padding:4px}
.drag-handle:active{cursor:grabbing}
.board-title{font:inherit;font-size:15px;font-weight:600;border:1px solid transparent;border-radius:6px;padding:4px 8px;background:transparent;min-width:120px;max-width:420px;flex:1}
.board-title:hover{border-color:var(--border)}.board-title:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.board-items{min-height:72px;padding:4px;border-radius:10px;transition:background .2s}
.board-items:empty{background:repeating-linear-gradient(45deg,#F7F7F4,#F7F7F4 8px,#F1F1EE 8px,#F1F1EE 16px)}
.board-items .pc{cursor:grab;transition:transform .18s ease,box-shadow .18s ease}
.board-items .pc:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,27,26,.08)}
.drag-ghost{opacity:.35;background:var(--p-bg);border-style:dashed}
.drag-chosen{box-shadow:0 10px 28px rgba(27,27,26,.18)!important;transform:scale(1.02)!important;cursor:grabbing!important}
.drag-moving{opacity:.95}

.board-plus{width:30px;padding:0;justify-content:center;font-size:16px;line-height:1}
.board-add{display:flex;gap:6px;align-items:center;margin:0}
.board-add.hidden{display:none}
.board-add .inp{min-height:30px;padding:3px 10px;font-size:13px;width:220px}

.wait-since{display:flex;align-items:center;gap:6px;margin-top:4px}
.wait-since .inp-date{width:138px;min-height:28px;padding:2px 6px;font-size:12px}

/* подробная плитка на доске: проекты и все открытые задачи */
.pc-detailed{gap:10px}
.pc-project{border-top:1px solid var(--border-soft);padding-top:8px;display:flex;flex-direction:column;gap:4px}
.pc-project-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pc-project-title .badge{font-size:11px;padding:1px 6px}
.pc-task{display:flex;align-items:baseline;gap:6px;font-size:12px;line-height:1.35}
.pc-task-mark{flex-shrink:0;width:14px;text-align:center;color:var(--muted)}
.pc-task-text{flex:1;min-width:0}
.pc-task-meta{flex-shrink:0;color:var(--muted);white-space:nowrap}
.pc-task-wait .pc-task-meta{color:var(--o-fg)}.pc-task-wait .pc-task-mark{color:var(--o-fg)}
.pc-task-overdue .pc-task-meta{color:var(--r-fg)}

.pc{cursor:pointer}.pc-name{color:var(--text)}.pc-name:hover{color:var(--accent)}
.pc-project-title a{color:var(--text)}.pc-project-title a:hover{color:var(--accent);text-decoration:underline}

.form-field{display:flex;flex-direction:column;gap:4px}
.form-label{font-size:12px;color:var(--muted);font-weight:500}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px}
.check-grid .check{min-height:28px;font-size:13px}

.picker{position:relative}
.picker-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;min-height:36px}
.picker-summary::-webkit-details-marker{display:none}
.picker-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-caret{color:var(--muted);font-size:12px}
.picker-panel{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;box-shadow:0 10px 28px rgba(27,27,26,.12);max-height:320px;overflow:auto}

#cp-projects .row-closed{display:none;opacity:.75}
#cp-projects.show-closed .row-closed{display:flex}
#cp-projects .only-when-hidden{display:block}
#cp-projects.show-closed .only-when-hidden{display:none}

.closed-tasks{display:none;opacity:.8}.closed-tasks.show-closed{display:block}

#board .pc-closed{display:none;opacity:.7}
#board.show-closed .pc-closed{display:flex}

/* --- Записи (встречи) --- */
.tabs{display:flex;gap:6px;margin-left:16px}
.tab{padding:6px 12px;border-radius:8px;border:1px solid var(--line,#ddd);text-decoration:none}
.tab.on{background:var(--accent,#2b6cb0);color:#fff;border-color:transparent}
.filters{display:flex;gap:8px;align-items:center;margin:12px 0}
.transcript{max-height:70vh;overflow:auto;font-size:14px;line-height:1.5}
.t-line{padding:2px 0;border-bottom:1px dotted var(--line,#eee)}
.warn{background:#fff7e6;border-left:3px solid #e6a23c}
.chip-warn{background:#fff1d6}
.checks{display:flex;flex-wrap:wrap;gap:4px 12px;max-height:220px;overflow:auto}
.inline-form{display:flex;gap:6px;align-items:center}
.row-closed{opacity:.55}
.md ul{margin:4px 0 4px 18px}