/* Mobile layout hardening: prevents sidebar/grid/table overflow on narrow screens. */
/* Lead dashboard */
.stats>.lead-kpis{grid-column:1/-1}.lead-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lead-kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}.lead-kpi span,.lead-kpi em{display:block;color:var(--muted);font-size:12px;font-style:normal}.lead-kpi b{display:block;font-size:27px;margin:5px 0}.lead-kpi .green{color:var(--accent)}.lead-kpi .orange{color:var(--warn)}.lead-filters{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px}.lead-filter{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 11px;color:var(--muted)}.lead-filter.active,.lead-filter:hover{background:var(--accent);border-color:var(--accent);color:#fff}.lead-filter b{margin-left:3px}.lead-pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:18px}.pipeline-stage{padding:10px;background:#f6faf7;border-radius:8px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:5px}.pipeline-stage b{color:var(--ink)}.stage-dot{width:7px;height:7px;border-radius:50%;background:#b6c4bd;display:inline-block;margin-right:4px}.lead-table-wrap{overflow:auto}.lead-table{min-width:760px}.lead-note{margin-top:14px;padding:10px 12px;background:#f6faf7;border-radius:8px;color:var(--muted);font-size:12px}
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
@media (max-width: 900px) {
  .app { display: block; width: 100%; overflow-x: hidden; }
  .side { width: 100%; height: auto; padding: 10px 12px; }
  .brand { padding: 4px 8px 10px; font-size: 18px; }
  .brand small { display: block; font-size: 8px; }
  .nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; }
  .nav button { flex: 0 0 auto; font-size: 12px; white-space: nowrap; padding: 8px 9px; }
  .nav .section { display: none; }
  .main { width: 100%; max-width: 100%; padding: 0 12px 36px; overflow: hidden; }
  .top { width: 100%; height: 62px; overflow: hidden; }
  .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { width: 100%; max-width: 100%; }
  .layout { display: block; width: 100%; }
  .panel { width: 100%; margin-bottom: 14px; overflow: hidden; padding: 15px 12px; }
  .toolbar { width: 100%; flex-wrap: wrap; }
  .search { min-width: 0; width: 100%; flex: 1 1 100%; }
  .filter { width: 100%; }
  .table { display: block; width: 100%; overflow-x: hidden; }
  .table thead { display: none; }
  .table tbody, .table tr { display: block; width: 100%; }
  .table tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .table td { display: block; width: 100%; border: 0; padding: 3px 0; }
  .table td:nth-child(2)::before { content: 'Цена: '; color: var(--muted); }
  .table td:nth-child(3)::before { content: 'Ответственный: '; color: var(--muted); }
  .table td:nth-child(4) { margin-top: 5px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .stat { padding: 12px; }
  .stat strong { font-size: 22px; }
  .pagehead { width: 100%; }
  .actions { width: 100%; flex-wrap: wrap; }
  .actions .btn { max-width: 100%; }
  .dialog { width: calc(100vw - 16px); }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
  .brand { font-size: 16px; }
  .user { max-width: 40px; }
}

@media(max-width:900px){.lead-kpis{grid-template-columns:repeat(2,1fr)}.lead-pipeline{grid-template-columns:repeat(2,1fr)}.lead-table{min-width:680px}}
@media(max-width:600px){.lead-pipeline{grid-template-columns:1fr 1fr}.lead-stages .lead-stage-btn{width:100%}}
@media(max-width:420px){.lead-kpis{grid-template-columns:1fr 1fr}.lead-pipeline{grid-template-columns:1fr 1fr}}

/* Lead card (modal) */
.lead-dialog{width:min(980px,100%)}
.lead-head-actions{display:flex;align-items:center;gap:10px}
.lead-status-select{width:auto;min-width:160px}
.lead-stages{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 16px}
.lead-stage-btn{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 12px;color:var(--muted);cursor:pointer;font:inherit}
.lead-stage-btn:hover{border-color:var(--accent);color:var(--accent)}
.lead-stage-btn.passed{background:#eef3f0;color:#4a6b5d;border-color:#cfe0d8}
.lead-stage-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.lead-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.lead-col{min-width:0}
.lead-section{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.lead-section h3{font-size:14px;margin:0 0 10px}
.lead-comments{max-height:220px;overflow:auto;margin-bottom:10px}
.lead-comment{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.lead-comment small{color:var(--muted)}
.lead-comment-add{display:flex;gap:8px}
.lead-comment-add textarea{flex:1;min-height:56px;border:1px solid var(--line);border-radius:7px;padding:8px;font:inherit;resize:vertical}
.lead-tasks{margin-bottom:10px}
.lead-task{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.lead-task.done{opacity:.55;text-decoration:line-through}
.lead-task small{display:block;color:var(--muted);margin-top:2px}
.lead-task-add{display:flex;flex-direction:column;gap:8px}
.lead-task-add input{border:1px solid var(--line);border-radius:7px;padding:8px;font:inherit}
.lead-actions-row{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.lead-grid{grid-template-columns:1fr}.lead-dialog{padding:16px}.lead-head-actions{flex-wrap:wrap}}

/* === Leads Kanban board === */
#generic.leads-board-mode .pagehead{margin-bottom:6px}
#generic.leads-board-mode .pagehead .eyebrow{display:none}
#generic.leads-board-mode .pagehead h1{font-size:20px;margin:0}
#generic.leads-board-mode #moduleStats{display:none}
#generic.leads-board-mode>.panel{padding:8px;overflow:visible}
#generic.leads-board-mode .toolbar{margin-bottom:8px}
#generic.leads-board-mode .toolbar .search{max-width:420px}
.kboard{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding:4px 2px 12px;min-height:420px}
.kcol{--stage-rgb:244,247,245;flex:0 0 220px;width:220px;background:rgba(var(--stage-rgb),.52);border:1px solid rgba(var(--stage-rgb),.9);border-radius:10px;display:flex;flex-direction:column;max-height:calc(100vh - 210px);overflow:hidden}
.kcol-head{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;font-size:12px;font-weight:700;color:var(--ink);border-bottom:1px solid rgba(var(--stage-rgb),.95);background:rgba(var(--stage-rgb),.34)}
.kcol-head b{background:rgba(255,255,255,.72);border:1px solid rgba(23,33,27,.10);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--muted)}
.kcol-body{padding:8px;display:flex;flex-direction:column;gap:7px;overflow-y:auto;flex:1;min-height:60px;background:rgba(var(--stage-rgb),.18)}
.kcol.over{background:rgba(var(--stage-rgb),.78);border-color:rgba(23,33,27,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.kcol[data-stage="Новая"]{--stage-rgb:250,250,248}
.kcol[data-stage="Квалифицированная"]{--stage-rgb:205,235,216}
.kcol[data-stage="Агент"]{--stage-rgb:204,222,246}
.kcol[data-stage="В работе"]{--stage-rgb:247,226,157}
.kcol[data-stage="Ждет Вариантов"]{--stage-rgb:194,231,245}
.kcol[data-stage="Переговоры"]{--stage-rgb:247,211,171}
.kcol[data-stage="Сделка"]{--stage-rgb:235,235,232;background-color:#f3f3f0;background-image:linear-gradient(45deg,rgba(20,20,20,.14) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.14) 75%),linear-gradient(45deg,rgba(20,20,20,.14) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.14) 75%);background-position:0 0,7px 7px;background-size:14px 14px}
.kcol[data-stage="Сделка"] .kcol-head{background-color:rgba(255,255,255,.68);background-image:linear-gradient(45deg,rgba(20,20,20,.12) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.12) 75%),linear-gradient(45deg,rgba(20,20,20,.12) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.12) 75%);background-position:0 0,7px 7px;background-size:14px 14px}
.kcol[data-stage="Сделка"] .kcol-body{background-color:rgba(255,255,255,.18);background-image:linear-gradient(45deg,rgba(20,20,20,.10) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.10) 75%),linear-gradient(45deg,rgba(20,20,20,.10) 25%,transparent 25%,transparent 75%,rgba(20,20,20,.10) 75%);background-position:0 0,7px 7px;background-size:14px 14px}
.kcol[data-stage="Отказ"]{--stage-rgb:246,205,207}
.kcol[data-stage="Шлак"]{--stage-rgb:220,224,222}
.kcol[data-stage="Сделка"] .kcol-head span::before{content:"⚑";color:#b88722;margin-right:6px;font-size:13px}
.kcol[data-stage="Сделка"] .kcol-head span{display:flex;align-items:center}
.kcol[data-stage="Сделка"] .kcol-head span::after{content:"";display:inline-block;width:9px;height:9px;margin-left:6px;background:repeating-conic-gradient(#222 0 25%,#fff 0 50%) 0/6px 6px;border:1px solid rgba(0,0,0,.25)}
.kcol.over .kcol-body{background:transparent}
.kcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;cursor:grab;box-shadow:0 1px 2px rgba(20,40,30,.05);transition:box-shadow .15s,border-color .15s}
.kcard:hover{box-shadow:0 3px 10px rgba(20,40,30,.12);border-color:#c9d8d0}
.kcard.dragging{opacity:.45;cursor:grabbing}
.kcard .kname{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .kbudget{font-size:12px;color:var(--accent);font-weight:700}
.kcard .kphone{font-size:11px;color:var(--muted);margin-top:1px}
.kempty{padding:10px;text-align:center;color:var(--muted);font-size:11px;border:1px dashed #d5ded8;border-radius:7px}
@media(max-width:900px){
  .kboard{gap:8px}
  .kcol{flex:0 0 180px;width:180px;max-height:none}
  #generic.leads-board-mode>.panel{padding:6px}
}

/* Compact leads board: минимум над списком, доска выше */
#generic.leads-board-mode>.panel{margin-top:0}
#generic.leads-board-mode .pagehead{padding:0;margin-bottom:4px;align-items:center}
#generic.leads-board-mode .pagehead h1{font-size:18px;letter-spacing:-.02em}
#generic.leads-board-mode .toolbar{padding:0;margin:4px 0 6px;border:0;background:transparent}
#generic.leads-board-mode .toolbar .search{height:34px;font-size:13px}
.kboard{min-height:calc(100vh - 260px)}

/* Leads mode: minimize everything above the board */
body.leads-mode .top{height:54px}
body.leads-mode .main{padding-top:6px}
body.leads-mode #generic .pagehead{margin-bottom:2px}
body.leads-mode #generic .pagehead h1{font-size:17px}
body.leads-mode #generic .pagehead .btn{height:32px;font-size:12px;padding:0 12px}

/* Broker filter: dropdown with checkboxes */
.lead-board-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 2px 8px}.lead-visibility-btn{border:1px solid rgba(201,213,205,.82);background:rgba(255,255,255,.72);color:var(--muted);border-radius:20px;padding:6px 11px;font:inherit;font-size:12px;cursor:pointer;transition:.2s ease}.lead-visibility-btn:hover{color:var(--ink);border-color:#b7cdbf;box-shadow:0 4px 12px rgba(26,55,42,.08);transform:translateY(-1px)}.lead-visibility-btn b{background:#9ba7a0;color:#fff;border-radius:10px;padding:1px 6px;margin-left:3px;font-size:11px}.lead-eye{font-size:11px}.lead-hidden-note{color:var(--muted);font-size:11px}.lead-brokers{display:flex;align-items:center;gap:6px;padding:0 2px 8px}
.lead-brokers .lb-label{font-size:12px;color:var(--muted);margin-right:2px;white-space:nowrap}
.lb-select{position:relative}
.lb-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:12px;color:var(--ink);cursor:pointer;font:inherit;line-height:1.3;display:flex;align-items:center;gap:6px;min-width:150px;justify-content:space-between}
.lb-btn:hover{border-color:var(--accent)}
.lb-caret{color:var(--muted);font-size:10px}
.lb-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 26px rgba(20,40,30,.14);min-width:230px;max-height:340px;overflow:auto;padding:6px}
.lb-menu.hidden{display:none}
.lb-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;font-size:13px;cursor:pointer;color:var(--ink)}
.lb-opt:hover{background:#f2f6f4}
.lb-opt input{margin:0;accent-color:#4a6b5d}
.lb-opt span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-opt .lb-count{color:var(--muted);font-size:11px;flex:0 0 auto}
.lb-opt.all{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:9px;font-weight:600}

/* Leads without tasks alert tile */
.lead-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lead-attention{border:1px solid #ecd9a8;background:#fff8e6;color:#8a6d1f;border-radius:9px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1.3}
.lead-attention b{background:#c99b2e;color:#fff;border-radius:10px;padding:1px 8px;font-size:12px}
.lead-attention:hover{border-color:#c99b2e}
.lead-attention.on{background:#c99b2e;color:#fff;border-color:#c99b2e}
.lead-attention.on b{background:#fff;color:#8a6d1f}
#generic:not(.leads-board-mode) .lead-attention{display:none}

/* === Collapsible sidebar with pin === */
.nav button .ico{margin-right:8px}.nav button .ico svg{width:14px;height:14px;vertical-align:-2.5px;fill:none;stroke:url(#crmGoldGrad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.app.side-unpinned .nav button .ico svg{vertical-align:middle}.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;width:36px;height:34px;font-size:16px;cursor:pointer;line-height:1;color:var(--ink)}
.burger:hover{border-color:var(--accent)}
.top-left{display:flex;align-items:center;gap:10px;min-width:0}
.pin-btn{position:absolute;right:10px;top:10px;z-index:5;border:1px solid #2b6553;background:#1a4a3a;color:#cfe6dc;border-radius:7px;width:30px;height:28px;font-size:13px;cursor:pointer;line-height:1;opacity:.85}
.pin-btn:hover{opacity:1}
.pin-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.side{position:relative}
.side-backdrop{display:none}

@media(min-width:901px){
  .app.side-unpinned{grid-template-columns:1fr}
  .app.side-unpinned .side{position:fixed;left:0;top:0;bottom:0;width:74px;padding:18px 8px;overflow:hidden;transition:width .18s ease;z-index:60;box-shadow:2px 0 10px rgba(10,30,22,.10)}
  .app.side-unpinned .side:hover,.app.side-unpinned.side-open .side{width:230px;padding:24px 16px;overflow-y:auto;box-shadow:8px 0 30px rgba(10,30,22,.25)}
  .app.side-unpinned{padding-left:74px}
  .app.side-unpinned .burger{display:none}
  .app.side-unpinned.side-open .side-backdrop{display:block;position:fixed;inset:0;background:rgba(11,20,16,.45);z-index:55}
  /* rail (collapsed): icons only */
  .app.side-unpinned .brand{text-align:center;padding:6px 0 16px;font-size:0}
  .app.side-unpinned .brand .for,.app.side-unpinned .brand .b2{display:none}
  .app.side-unpinned .brand .b1{font-size:15px;letter-spacing:.02em}
  .app.side-unpinned .brand small{display:none}
  .app.side-unpinned .nav button{font-size:0;text-align:center;padding:12px 0}
  .app.side-unpinned .nav button .ico{font-size:0;display:block;line-height:1}
  .app.side-unpinned .nav button .lbl{display:none}
  .app.side-unpinned .nav .section{font-size:0;padding:8px 0 4px;margin:8px 10px 0;border-top:1px solid rgba(255,255,255,.14)}
  .app.side-unpinned .pin-btn{top:auto;bottom:14px;right:auto;left:50%;transform:translateX(-50%)}
  /* expanded (hover or pinned-open): restore full menu */
  .app.side-unpinned .side:hover .brand,.app.side-unpinned.side-open .side .brand{text-align:left;font-size:20px}
  .app.side-unpinned .side:hover .brand .for,.app.side-unpinned.side-open .side .brand .for{display:inline}
  .app.side-unpinned .side:hover .brand .b2,.app.side-unpinned.side-open .side .brand .b2{display:inline}
  .app.side-unpinned .side:hover .brand .b1,.app.side-unpinned.side-open .side .brand .b1{font-size:20px}
  .app.side-unpinned .side:hover .brand small,.app.side-unpinned.side-open .side .brand small{display:block}
  .app.side-unpinned .side:hover .nav button,.app.side-unpinned.side-open .side .nav button{font-size:inherit;text-align:left;padding:11px 12px}
  .app.side-unpinned .side:hover .nav button .lbl,.app.side-unpinned.side-open .side .nav button .lbl{display:inline}
  .app.side-unpinned .side:hover .nav button .ico,.app.side-unpinned.side-open .side .nav button .ico{display:inline;margin-right:8px}
  .app.side-unpinned .side:hover .nav .section,.app.side-unpinned.side-open .side .nav .section{font-size:10px;padding:24px 12px 7px;margin:0;border-top:0}
  .app.side-unpinned .side:hover .pin-btn,.app.side-unpinned.side-open .side .pin-btn{top:10px;bottom:auto;right:10px;left:auto;transform:none}
}
@media(max-width:900px){
  .pin-btn{display:none!important}
  .burger{display:none!important}
  .nav button .ico{font-size:16px}
  .nav button .ico{margin-right:0}
}

/* Softer premium CRM finish */
:root{--paper:#f5f7f4;--line:#e8ebe7}
body{background:radial-gradient(circle at 72% -10%,#fbfcf8 0,transparent 38%),var(--paper)}
.panel,.stat{border-color:rgba(207,216,209,.72);box-shadow:0 8px 24px rgba(26,55,42,.045)}
.panel{border-radius:14px}
.stat{border-radius:13px;transition:transform .2s ease,box-shadow .2s ease}
.stat:hover{box-shadow:0 10px 28px rgba(26,55,42,.08)}
.btn,.filter,.search,.lb-btn{border-color:rgba(201,213,205,.82);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.btn:hover,.filter:hover,.lb-btn:hover{box-shadow:0 4px 12px rgba(26,55,42,.08);border-color:#b7cdbf}
.btn.primary{box-shadow:0 5px 14px rgba(23,107,82,.14)}
.kboard{gap:12px;padding-top:7px}
.kcol{border-radius:14px;box-shadow:0 5px 16px rgba(26,55,42,.045);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.kcol:hover{box-shadow:0 8px 22px rgba(26,55,42,.085)}
.kcol-head{padding:11px 12px;border-bottom-color:rgba(23,33,27,.08)}
.kcol-body{padding:9px;gap:8px}
.kcard{border-color:rgba(205,215,208,.78);border-radius:11px;padding:10px 11px;box-shadow:0 2px 7px rgba(26,55,42,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.kcard:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(26,55,42,.12);border-color:#b8cfc0}
.kempty{border-radius:10px;border-color:rgba(150,170,158,.42)}
.lead-attention,.lead-filter{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.lead-attention:hover,.lead-filter:hover{box-shadow:0 4px 12px rgba(26,55,42,.08);transform:translateY(-1px)}
.dialog{border-radius:16px;box-shadow:0 24px 70px rgba(18,35,29,.18)}
.close{transition:transform .2s ease,color .2s ease}.close:hover{transform:rotate(8deg);color:var(--accent)}