/* overrides.css — грузится ПОВЕРХ inline-стилей index.html, с версией в URL.
   Правки оформления подхватываются сразу (кэш index.html больше не мешает). */

/* Больше воздуха между карточками — для обеих тем */
.grid-2, .grid-2b, .grid-3 { gap: 26px !important; }
.cards-row { gap: 20px !important; }
.cards-5  { gap: 20px !important; }

/* ТЁМНАЯ тема: карточки заметно светлее фона + светлая граница, чтобы отделялись
   (чёрная тень на тёмном фоне не видна). В СВЕТЛОЙ теме НЕ применяется —
   там карточки белые из CSS-переменных. */
body:not(.light) .kpi       { background: #1a2c24 !important; border: 1px solid #355040 !important; box-shadow: none !important; }
body:not(.light) .intg-card { background: #1a2c24 !important; border: 1px solid #355040 !important; padding: 18px !important; box-shadow: none !important; }
body:not(.light) .panel     { background: #17271f !important; border: 1px solid #2e4a3a !important; }
body:not(.light) .panel-h   { border-bottom: 1px solid #2e4a3a !important; }

/* СВЕТЛАЯ тема: мягкая тень, чтобы карточки тоже отделялись от светлого фона */
body.light .kpi, body.light .intg-card { box-shadow: 0 2px 10px -4px rgba(20,45,35,.16) !important; }

/* Скрыть иконку «Документы CRM» в шапке (по запросу) */
.docs-wrap { display: none !important; }

/* Воронки: колонки фиксированной ширины (280px). Без этого длинное название товара
   (nowrap) через min-width:auto раздувало колонку на всю ширину. */
.kanban .kcol  { min-width: 0 !important; }
.kanban .kcard { overflow: hidden; }

/* Продажи → «Точки → продавцы внутри»: раскрывающиеся точки (native <details>) */
.ss-wrap { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ss-store { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ss-sum { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.ss-sum::-webkit-details-marker { display: none; }
.ss-sum::before { content: "\25B8"; transition: transform .15s ease; font-size: 12px; opacity: .6; }
.ss-store[open] .ss-sum::before { transform: rotate(90deg); }
.ss-sum:hover { background: rgba(127,127,127,.08); }
.ss-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-meta { font-size: 12px; opacity: .7; white-space: nowrap; }
.ss-meta b { opacity: 1; font-weight: 700; }
.ss-tbl { margin: 0; border-top: 1px solid var(--line); }
.ss-tbl thead th { font-size: 11px; }

/* Этапы воронок (Настройки): читаемые чипы — было светло-зелёное на светло-зелёном */
#stageEditor .chip.on { color: var(--txt) !important; background: var(--accent-soft) !important; border-color: var(--accent2) !important; }
#stageEditor .chip.on [data-ren] { font-weight: 700; padding: 0 2px; }
#stageEditor .chips { gap: 9px; }
#stageEditor .chip.on [data-mv], #stageEditor .chip.on [data-del] { font-size: 13px; }

/* Воронка-аналитика: полоска в растягивающемся треке → процент конверсии всегда в фиксированной колонке справа */
.fv-track { flex: 1; min-width: 0; }
.fv-conv { text-align: right; }

/* Накопительная карта: баннер уровня в карточке клиента */
.loy-banner { margin: 12px 14px 0; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--accent2, #2e4a3a);
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.03)); }
.loy-banner .lb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.loy-banner .lb-title { font-weight: 700; font-size: 13px; }
.loy-banner .lb-badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.loy-banner .lb-badge.ok { background: rgba(22,163,74,.16); color: #16a34a; }
.loy-banner .lb-badge.warn { background: rgba(217,119,6,.16); color: #d97706; }
.loy-banner .lb-head { font-size: 15px; margin-bottom: 2px; }
.loy-banner .lb-head b { color: var(--accent, #10b981); }
.loy-banner .lb-sum { font-size: 12.5px; opacity: .85; margin-bottom: 9px; }
.loy-banner .lb-bar { height: 7px; border-radius: 5px; background: rgba(127,127,127,.18); overflow: hidden; }
.loy-banner .lb-fill { height: 100%; background: linear-gradient(90deg, #10b981, #16a34a); border-radius: 5px; transition: width .3s ease; }
.loy-banner .lb-next { font-size: 12px; margin-top: 6px; }
.loy-banner .lb-pts { font-size: 13px; margin: -4px 0 9px; display: flex; align-items: center; gap: 6px; }
.loy-banner .lb-pts b { color: var(--accent, #10b981); font-size: 15px; }
.loy-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(16,185,129,.14); color: #10b981; white-space: nowrap; }
.loy-pill.warn { background: rgba(217,119,6,.16); color: #d97706; }
/* строка «близко к порогу» — подсветка для триггера допродажи (п.13) */
tr.loy-near > td { background: rgba(220,38,38,.07); }
tr.loy-near:hover > td { background: rgba(220,38,38,.12); }
td.loy-rem { color: #dc2626; font-weight: 600; }
/* Клиенты: предупреждение о дубле телефона (п.5) */
.dup-warn { margin-top: 6px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: rgba(217,119,6,.12); border: 1px solid rgba(217,119,6,.3); color: var(--txt); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Доходность по товарам: компактная таблица без горизонтального скролла */
.dp-table { table-layout: fixed; width: 100%; }
.dp-table th, .dp-table td { font-size: 12.5px; padding: 8px 8px; }
.dp-table td.dp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }

/* Сворачиваемая панель с треугольником (карточка врача: продажи, история кэшбэка) */
details.fold { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
details.fold > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; transition: transform .15s ease; font-size: 12px; opacity: .6; flex: none; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { background: rgba(127,127,127,.05); }
details.fold > summary h3 { margin: 0; font-size: 15px; font-weight: 700; }
details.fold > summary .ph-sub { margin-left: auto; }
details.fold > summary + * { border-top: 1px solid var(--line); }

/* Заказ → «Протокол»: сворачиваемая секция с треугольником (свёрнута по умолчанию) */
details.om-log { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
details.om-log > summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; font-weight: 600; font-size: 14px; }
details.om-log > summary::-webkit-details-marker { display: none; }
details.om-log > summary::before { content: "\25B8"; transition: transform .15s ease; font-size: 12px; opacity: .6; }
details.om-log[open] > summary::before { transform: rotate(90deg); }
details.om-log > summary:hover { background: rgba(127,127,127,.06); }
details.om-log > summary .muted2 { margin-left: auto; font-size: 12px; font-weight: 400; opacity: .6; }
details.om-log > #omLog { border-top: 1px solid var(--line); }

.tpl-item:hover{background:var(--accent-soft)}

/* ===== SIP софтфон (звонки из браузера) ===== */
#sip-ui{position:fixed;z-index:9000}
.sip-bar{position:fixed;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:8px 14px;box-shadow:var(--shadow-lg);font-size:13px;color:var(--txt);cursor:pointer;z-index:9000}
.sip-bar-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.sip-bar-ready .sip-bar-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sip-bar-connecting .sip-bar-dot{background:var(--amber)}
.sip-bar-calling .sip-bar-dot,.sip-bar-ringing .sip-bar-dot{background:var(--blue);animation:sipPulse 1s infinite}
.sip-bar-in-call .sip-bar-dot{background:var(--green)}
@keyframes sipPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sip-bar-timer{font-variant-numeric:tabular-nums;color:var(--muted)}
.sip-bar-hangup{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;line-height:1;flex:none}
.sip-overlay{position:fixed;right:18px;bottom:84px;z-index:9001;display:flex;animation:sipPop .16s ease-out}
@keyframes sipPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.sip-overlay-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:22px 26px;min-width:288px;max-width:340px;text-align:center}
.sip-overlay-state{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.sip-overlay-name{font-size:20px;font-weight:700;margin-top:8px}
.sip-overlay-phone{font-size:14px;color:var(--muted);margin-top:2px}
.sip-overlay-timer{font-size:22px;font-variant-numeric:tabular-nums;margin-top:10px;font-weight:600}
.sip-dtmf-pad{margin-top:14px}
.sip-dtmf-display-row{display:flex;gap:6px;margin-bottom:8px}
.sip-dtmf-display{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-variant-numeric:tabular-nums;min-height:32px}
.sip-dtmf-clear{width:32px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}
.sip-dtmf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sip-dtmf-key{padding:11px 0;border:1px solid var(--line);border-radius:10px;font-size:16px;font-weight:600;color:var(--txt);background:var(--bg2)}
.sip-dtmf-key:hover{background:var(--accent-soft)}
.sip-overlay-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}
.sip-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);color:var(--txt)}
.sip-btn:hover{border-color:var(--line2)}
.sip-btn-active{background:var(--accent);color:#06231a}
.sip-btn-hangup-overlay{background:var(--red);color:#fff;border-color:var(--red)}
.sip-btn-answer{background:var(--green);color:#fff;border-color:var(--green)}