/* Метражи CRM — «планшет прораба»: чертёжная бумага, ель, дуб. */
:root{
  --pine:#1f3d2b; --pine-deep:#152b1e; --pine-soft:#2c5540;
  --paper:#eef1ea; --card:#ffffff; --line:#d5dccf; --line-strong:#b9c3ae;
  --ink:#1e241b; --ink-soft:#5c675a; --ink-faint:#8b958a;
  --oak:#b8834a; --oak-deep:#96682f;
  --yes:#2e7d4f; --work:#d9a03c; --no:#c4452e; --hold:#7a8699;
  --r:10px; --shadow:0 1px 2px rgba(30,36,27,.08),0 4px 14px rgba(30,36,27,.07);
  --mono:ui-monospace,"Cascadia Mono","PT Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:
    linear-gradient(rgba(31,61,43,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,61,43,.035) 1px,transparent 1px),
    var(--paper);
  background-size:24px 24px,24px 24px,auto;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--pine)}
.hide{display:none !important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- вход ---------- */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:38px 34px;width:100%;max-width:380px}
.brand{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.brand-mark{width:30px;height:30px;flex:none;align-self:center}
.brand h1{font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:700;letter-spacing:.4px;color:var(--pine)}
.brand small{color:var(--oak-deep);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.login-card p.sub{color:var(--ink-soft);margin:2px 0 22px;font-size:13px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--pine-soft);outline-offset:0;border-color:var(--pine-soft)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;font-weight:600;
  border:1px solid transparent;transition:filter .12s}
.btn:hover{filter:brightness(1.06)}
.btn-primary{background:var(--pine);color:#fff}
.btn-oak{background:var(--oak);color:#fff}
.btn-ghost{border-color:var(--line-strong);background:#fff;color:var(--ink)}
.btn-danger{background:var(--no);color:#fff}
.btn-block{width:100%;justify-content:center}
.err{color:var(--no);font-size:13px;margin-top:10px;min-height:18px}

/* ---------- каркас приложения ---------- */
#app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.sidebar{background:var(--pine-deep);color:#e8ede6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar .brand h1{color:#fff;font-size:20px}
.sidebar .brand small{color:var(--oak)}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#cdd8cc;
  text-align:left;font-weight:500}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button.active{background:var(--pine-soft);color:#fff}
.nav svg{width:17px;height:17px;flex:none;opacity:.85}
.sidebar .spacer{flex:1}
.userbox{padding:14px 16px;border-top:1px solid rgba(255,255,255,.09);font-size:13px}
.userbox b{display:block;color:#fff}
.userbox span{color:#9fb09e;font-size:12px}
.userbox button{margin-top:8px;color:var(--oak);font-size:12px;letter-spacing:.05em;text-transform:uppercase}

.main{padding:22px 26px 40px;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.topbar h2{font-family:Georgia,serif;font-size:22px;color:var(--pine);margin-right:auto}
.search{position:relative}
.search input{padding:8px 12px 8px 32px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;width:230px}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-faint)}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;font-size:12.5px;
  color:var(--ink-soft);font-weight:500}
.chip.active{background:var(--pine);border-color:var(--pine);color:#fff}
.chip .cnt{font-family:var(--mono);margin-left:5px;opacity:.75}

/* ---------- доска ---------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:262px;gap:12px;overflow-x:auto;
  padding-bottom:14px;align-items:start}
.col{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:12px;min-height:120px}
.col-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px dashed var(--line-strong)}
.col-head .n{font-family:var(--mono);font-size:11px;color:var(--oak-deep);font-weight:700}
.col-head b{font-size:12.5px;letter-spacing:.02em;color:var(--pine)}
.col-head .cnt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.col-body{padding:8px;display:flex;flex-direction:column;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:10px 12px 11px;cursor:pointer;transition:transform .08s, box-shadow .08s}
.card:hover{transform:translateY(-1px);box-shadow:0 3px 6px rgba(30,36,27,.1),0 8px 20px rgba(30,36,27,.1)}
.card .row1{display:flex;align-items:baseline;gap:8px}
.card .name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .fc{font-family:var(--mono);font-size:12.5px;font-weight:700}
.fc-hi{color:var(--yes)} .fc-mid{color:var(--work)} .fc-lo{color:var(--ink-faint)}
.card .row2{display:flex;gap:6px;align-items:center;margin-top:3px;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.tag{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:11px}
.tag.oak{color:var(--oak-deep);border-color:#e3cfae;background:#faf3e7}
.card .money{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.card .due{font-size:11px;margin-top:5px;color:var(--ink-soft)}
.card .due.overdue{color:var(--no);font-weight:600}

/* фирменный элемент: каркас сделки — 9 сегментов */
.frame{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;margin-top:8px}
.frame i{height:5px;border-radius:2px;background:var(--line)}
.frame i.on{background:var(--yes)}
.frame i.half{background:var(--work)}
.frame i.no{background:var(--no)}
.frame-lg{margin:2px 0 4px}
.frame-lg i{height:8px}

/* ---------- таблица ---------- */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:auto;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:1050px}
th{position:sticky;top:0;background:var(--pine);color:#fff;text-align:left;padding:8px 10px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;z-index:1}
td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:#f5f7f1}
.st{font-size:11px;font-weight:700;padding:2px 8px;border-radius:5px;letter-spacing:.03em}
.st-work{background:#eaf3ee;color:var(--yes)}
.st-hold{background:#eef0f4;color:var(--hold)}
.st-deal{background:var(--pine);color:#fff}
.st-cancel{background:#f9e9e5;color:var(--no)}
.cls{font-family:var(--mono);font-size:11.5px}

/* ---------- задачи ---------- */
.tasklist{display:flex;flex-direction:column;gap:8px;max-width:760px}
.task{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--work);border-radius:10px;
  padding:11px 14px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.task.overdue{border-left-color:var(--no)}
.task .when{font-family:var(--mono);font-size:12px;color:var(--ink-soft);width:86px;flex:none}
.task.overdue .when{color:var(--no);font-weight:700}
.task .what{flex:1;min-width:0}
.task .what b{display:block}
.task .what span{font-size:12px;color:var(--ink-soft)}
.task button{color:var(--yes);font-weight:600;font-size:13px}

/* ---------- дашборд ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .v{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--pine)}
.kpi .v.oakv{color:var(--oak-deep)}
.kpi .l{font-size:12px;color:var(--ink-soft);margin-top:2px}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.panel h3{font-family:Georgia,serif;font-size:15px;color:var(--pine);margin-bottom:12px}
.hbar{display:grid;grid-template-columns:150px 1fr 52px;gap:8px;align-items:center;margin-bottom:7px;font-size:12.5px}
.hbar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.hbar .bar{height:14px;border-radius:4px;background:var(--paper);overflow:hidden}
.hbar .bar i{display:block;height:100%;background:var(--pine-soft);border-radius:4px}
.hbar .bar i.oakbar{background:var(--oak)}
.hbar .val{font-family:var(--mono);text-align:right;font-size:12px}
.mgr-table{width:100%;font-size:13px;min-width:0}
.mgr-table th{position:static;background:none;color:var(--ink-soft);border-bottom:1px solid var(--line-strong);
  padding:4px 6px}
.mgr-table td{padding:5px 6px;border-top:1px solid var(--line);white-space:normal}

/* ---------- ящик лида ---------- */
.overlay{position:fixed;inset:0;background:rgba(21,43,30,.45);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(860px,100%);background:var(--paper);z-index:41;
  box-shadow:-8px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;
  animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}.card{transition:none}}
.drawer-head{background:var(--pine);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px}
.drawer-head h3{font-family:Georgia,serif;font-size:19px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-head .fcbig{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--oak)}
.drawer-head button{color:#fff;font-size:22px;line-height:1;opacity:.8}
.drawer-head button:hover{opacity:1}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px 30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.drawer-body{grid-template-columns:1fr}}
.sec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.sec.full{grid-column:1/-1}
.sec h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--oak-deep);margin-bottom:11px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stage-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.stage-row:last-child{border-bottom:none}
.stage-row .sn{font-family:var(--mono);font-size:11px;color:var(--ink-faint);width:16px}
.stage-row .sl{flex:1;font-size:13px}
.stage-btns{display:flex;gap:4px}
.sbtn{padding:3px 9px;border-radius:6px;border:1px solid var(--line-strong);font-size:11px;font-weight:600;background:#fff;color:var(--ink-soft)}
.sbtn.sel-da{background:var(--yes);border-color:var(--yes);color:#fff}
.sbtn.sel-rab{background:var(--work);border-color:var(--work);color:#fff}
.sbtn.sel-net{background:var(--no);border-color:var(--no);color:#fff}
.comment{border-left:3px solid var(--oak);padding:6px 10px;margin-bottom:8px;background:#fbfaf6;border-radius:0 8px 8px 0}
.comment .meta{font-size:11px;color:var(--ink-faint);font-family:var(--mono)}
.comment p{font-size:13px;margin-top:2px;white-space:pre-wrap}
.inline-form{display:flex;gap:8px;margin-top:10px}
.inline-form input,.inline-form textarea{flex:1;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:#fff}
.task-mini{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.task-mini:last-child{border:none}
.task-mini .d{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.task-mini.done{opacity:.5;text-decoration:line-through}
.stars{display:flex;gap:3px}
.stars button{font-size:18px;color:var(--line-strong)}
.stars button.on{color:var(--oak)}
.footer-actions{display:flex;gap:10px;justify-content:flex-end;padding:12px 22px;background:var(--card);
  border-top:1px solid var(--line)}

/* ---------- справочники / импорт ---------- */
.dict-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.dict-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.dict-item button{color:var(--no);font-size:15px;opacity:.6}
.dict-item button:hover{opacity:1}
.dropzone{border:2px dashed var(--line-strong);border-radius:14px;padding:44px;text-align:center;color:var(--ink-soft);
  background:rgba(255,255,255,.6);max-width:640px}
.dropzone b{color:var(--pine)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--pine-deep);color:#fff;
  padding:10px 20px;border-radius:10px;box-shadow:var(--shadow);z-index:60;font-size:14px}
.empty{color:var(--ink-faint);text-align:center;padding:34px 10px;font-size:13px}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap}
  .sidebar .brand{border:none;padding:12px 16px}
  .nav{flex-direction:row;flex-wrap:wrap}
  .sidebar .spacer{display:none}
  .userbox{margin-left:auto;border:none}
}

/* ---- телефония ---- */
.calls-list { display:flex; flex-direction:column; gap:8px; }
.call-row { background:var(--card,#fff); border:1px solid var(--line,#dfe3d8); border-radius:10px; padding:10px 14px; }
.call-main { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.call-who { flex:1; min-width:180px; display:flex; flex-direction:column; }
.call-who .meta { font-size:12px; color:var(--mut,#7a8073); }
.cdir { font-size:18px; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.cdir-in { background:#e7f0e9; color:var(--yes,#2e7d4f); }
.cdir-out { background:#f3ead9; color:var(--oak,#b8834a); }
.call-extra { margin-top:10px; border-top:1px dashed var(--line,#dfe3d8); padding-top:10px; }
.ai-box { background:#f4f6f0; border-left:3px solid var(--pine,#1f3d2b); padding:10px 12px; border-radius:0 8px 8px 0; font-size:14px; line-height:1.5; white-space:normal; }
.transcript summary { cursor:pointer; color:var(--oak,#b8834a); font-size:13px; margin-top:8px; }
.transcript p { font-size:13px; color:#444; line-height:1.55; margin-top:6px; }
.ai-state { font-size:12px; color:var(--mut,#7a8073); font-style:italic; }
.ai-err { color:var(--no,#c4452e); }
.btn-sm { padding:4px 10px; font-size:13px; }
.attn { color:var(--no,#c4452e); font-size:15px; margin-right:4px; }
.dial-link { float:right; font-size:12px; color:var(--oak,#b8834a); text-decoration:none; }
.dial-link:hover { text-decoration:underline; }
.copyrow { display:flex; gap:8px; align-items:center; }
.copyrow code { background:#f4f6f0; padding:6px 10px; border-radius:6px; font-size:12px; word-break:break-all; flex:1; }
.map-row { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.map-row code { min-width:160px; background:#f4f6f0; padding:5px 10px; border-radius:6px; font-size:13px; }
.map-row select { flex:1; }
.hint { font-size:12px; color:var(--mut,#7a8073); margin:4px 0 10px; }
.call-player { margin-top:8px; }
.ats-name { min-width:180px; font-size:13px; color:var(--mut,#7a8073); }