:root{
  --bg:#0f172a; --bg2:#1e293b; --side:#111827; --side2:#1f2937;
  --accent:#16a34a; --accent2:#22c55e; --accent-d:#15803d;
  --text:#0f172a; --muted:#64748b; --line:#e2e8f0; --card:#ffffff;
  --head:#f1f5f9; --hover:#f8fafc; --danger:#dc2626; --warn:#d97706;
  --blue:#2563eb; --chip:#e2e8f0;
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#f1f5f9}
button{font-family:inherit;cursor:pointer}
#app{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
#sidebar{width:250px;min-width:250px;background:var(--side);color:#cbd5e1;display:flex;flex-direction:column;overflow-y:auto}
.brand{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #1f2937}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent2),var(--accent-d));display:flex;align-items:center;justify-content:center;font-size:19px}
.brand b{color:#fff;font-size:16px;line-height:1.1}
.nav{padding:8px 8px 20px;flex:1}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#cbd5e1;text-decoration:none;font-size:14px;margin:2px 0;user-select:none}
.nav a .ic{width:20px;text-align:center;font-size:15px}
.nav a:hover{background:var(--side2);color:#fff}
.nav a.active{background:var(--accent-d);color:#fff}

/* Main */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:60px;min-height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:14px}
.topbar h1{font-size:19px;margin:0;font-weight:650}
.topbar .sub{color:var(--muted);font-size:13px}
.topbar .spacer{flex:1}
.content{flex:1;overflow:auto;padding:20px 22px}

/* Buttons */
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:8px 14px;border-radius:8px;font-size:13px;font-weight:550;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.danger{color:var(--danger);border-color:#fecaca}
.btn.danger:hover{background:#fef2f2}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent}

/* Toolbar / filters */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.search{position:relative}
.search input{padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:8px;font-size:13px;width:260px;background:#fff}
.search::before{content:"🔎";position:absolute;left:10px;top:7px;font-size:13px;opacity:.6}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters select,.filters input{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;background:#fff;max-width:190px}
.chip-clear{color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}
.count{color:var(--muted);font-size:12.5px;margin-left:auto}

/* Table */
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto;box-shadow:var(--shadow);max-height:calc(100vh - 190px)}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;white-space:nowrap}
table.grid th,table.grid td{padding:8px 11px;border-bottom:1px solid var(--line);border-right:1px solid #f1f5f9;text-align:left;vertical-align:top}
table.grid thead th{position:sticky;top:0;background:var(--head);z-index:3;font-weight:600;color:#334155;border-bottom:1px solid var(--line)}
table.grid thead tr.groups th{background:#e2e8f0;text-align:center;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#475569;top:0;z-index:4}
table.grid tbody tr:hover{background:var(--hover)}
table.grid td.num{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
/* Кнопок у групі «Дії» стало багато (до п'яти), тож у таблицях вони компактніші
   за звичайні .btn.sm — інакше колонка з'їдає пів екрана. */
table.grid .rowact{display:flex;gap:4px}
table.grid .rowact .btn.sm{padding:3px 6px;font-size:11.5px;gap:4px;line-height:1.2}
table.grid .idx{color:var(--muted);text-align:center}
/* ⚠️ Зсув `top` кожного рядка шапки рахує JS (`stickyHead`), а не CSS: рядків
   буває один, два чи три (групи, назви колонок, фільтри), і їхня висота
   залежить від шрифту й від полів вводу у фільтрах. Зашиті 31px давали
   накладання — рядок назв ховався під групами, а фільтри лізли на нього. */
.filterrow th{background:#fff;position:sticky;z-index:2}
.filterrow input,.filterrow select{width:100%;min-width:90px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;font-size:11.5px;background:#fff}
.empty{padding:40px;text-align:center;color:var(--muted)}
.coordcell{width:130px;padding:4px 7px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:#f0fdf4;color:#166534;font-variant-numeric:tabular-nums}
.coordcell:focus{outline:none;border-color:var(--accent2);background:#fff}
.coordcell::placeholder{color:#94a3b8}
.linkish{color:var(--blue);cursor:pointer;text-decoration:none}
.linkish:hover{text-decoration:underline}

/* status chips */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.b-green{background:#dcfce7;color:#15803d}
.b-blue{background:#dbeafe;color:#1d4ed8}
.b-amber{background:#fef3c7;color:#b45309}
.b-gray{background:#e2e8f0;color:#475569}
.b-red{background:#fee2e2;color:#b91c1c}
.b-purple{background:#ede9fe;color:#6d28d9}
.prio{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:12px}
.prio-1{background:#dc2626}.prio-2{background:#d97706}.prio-3{background:#16a34a}

/* Cards (suppliers) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.scard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.scard .sc-head{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.scard .sc-av{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex-shrink:0}
.scard h3{margin:0;font-size:15px}
.scard .sc-meta{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}
.scard .sc-body{padding:12px 16px;flex:1}
.scard .sc-body h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.eq-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;font-size:12.5px}
.eq-item .et{font-size:15px}
.eq-item .en{font-weight:600}
.eq-item .ed{color:var(--muted)}
.eq-item .sp{margin-left:auto;display:flex;gap:5px}
.scard .sc-foot{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:8px}

/* Постачальники — формат списку */
.slist{display:flex;flex-direction:column;gap:10px}
.srow{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;display:grid;grid-template-columns:minmax(230px,290px) 1fr auto;gap:16px;align-items:center}
.srow .si{display:flex;gap:11px;align-items:center;cursor:pointer;border-radius:8px}
.srow .si:hover{background:var(--hover)}
.srow .si .sc-av{width:40px;height:40px;font-size:15px;flex-shrink:0}
.srow .sname{font-weight:650;font-size:14px}
/* ID одиниці техніки (машина «КМ-0007», агрегат «КМ-0007/ЖЗ») */
.unit-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:#4338ca;background:#e0e7ff;border-radius:5px;padding:1px 6px;white-space:nowrap}
td.unit-id{background:transparent;padding:8px 10px;color:#4338ca}
.srow .smeta{color:var(--muted);font-size:12px;margin-top:3px;line-height:1.5}
/* Частина рядка, яку не можна розривати переносом: у вузькому вікні «🌱 планових 2»
   ламалось між значком і словом (v358). */
.srow .smeta .nb{white-space:nowrap}
.srow .seq{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Попередження про нерозподілені агрегати просто в рядку списку постачальників */
.srow .freeagg{display:inline-flex;align-items:center;background:#fff7ed;color:#c2410c;
  border:1px solid #fdba74;border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:600;white-space:nowrap}
.srow .seqlabel{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.srow .eqchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:12px;background:#f8fafc;cursor:pointer;white-space:nowrap}
/* Чип тех. операції в рядку постачальника. На відміну від .eqchip не клікабельний:
   це не конкретна машина, а узагальнення — редагувати нема чого. */
.srow .opchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:12px;background:#f8fafc;white-space:nowrap}
.srow .eqchip:hover{background:#ecfdf5;border-color:var(--accent2)}
.srow .sacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Рядок замовника: назва, локації, банк і замовлення — три рядки тексту,
   тож перша колонка ширша, ніж у постачальника (v283). */
.srow.crow{grid-template-columns:minmax(300px,1.7fr) minmax(150px,1fr) auto;align-items:start}
/* Кружечка з ініціалами в замовників немає (v284): він не ніс жодної
   інформації, крім першої літери назви, яка й так поруч. */
.srow.crow .si{align-items:flex-start}
.srow.crow .seq{padding-top:2px}
.srow.crow .seqlabel{flex-basis:100%;margin:0 0 2px}
@media(max-width:920px){.srow,.srow.crow{grid-template-columns:1fr}.srow .sacts{justify-content:flex-start}}
.tag{display:inline-block;background:var(--chip);color:#475569;border-radius:6px;padding:2px 8px;font-size:11px;margin:0 5px 5px 0}

/* Type picker (equipment) */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;max-width:1000px}
.ptile{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px;cursor:pointer;box-shadow:var(--shadow);transition:.15s;text-align:left}
.ptile:hover{border-color:var(--accent2);transform:translateY(-2px)}
/* Видалення плитки (v443, «Облік обʼєму»): кнопка в кутку, клік по ній не має
   відкривати саму плитку — тому власний stopPropagation в обробнику. */
.ptile-del{position:absolute;top:8px;right:8px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;line-height:1}
.ptile-del:hover{background:#fee2e2;color:#dc2626}
.ptile .pi{font-size:30px}
/* ---------- Власний значок замість смайлика (v373) ----------
   В Unicode комбайна немає, тож там, де він потрібен, стоїть картинка. Розмір
   задано в `em`, тож вона підлаштовується під текст сама: у плитці (30px) буде
   велика, у значку карти (16px) — маленька, і жодних окремих правил на кожне
   місце не треба. */
.ico-img{width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.22em;display:inline-block}
/* ⚠️ На плитках Бази техніки картинка ВДВІЧІ більша за смайлик (v374, вимога
   користувача): смайлик на 30px читається сам собою, а фото комбайна на такому
   розмірі перетворювалось на зелену пляму. Плитка від цього не роз'їжджається —
   висота рядка значка задана явно, тож текст під ним лишається на місці. */
.ptile .pi .ico-img{width:2.1em;height:2.1em;vertical-align:middle}
.ptile .pi{line-height:1.1;min-height:1.15em}
/* На значку карти картинку трохи збільшуємо: смайлик там займає всю площу
   кружечка, а фото з полями виглядало б дрібнішим за сусідні. */
.leaflet-marker-icon .ico-img{width:1.5em;height:1.5em;vertical-align:middle}
.ptile h3{margin:12px 0 4px;font-size:16px}
.ptile p{margin:0;color:var(--muted);font-size:12.5px}
.ptile .pc{margin-top:12px;font-size:12px;color:var(--accent-d);font-weight:600}
.ptile.suppliers{background:linear-gradient(135deg,#f0fdf4,#ecfeff);border-color:#bbf7d0}
.ptile.suppliers:hover{border-color:var(--accent)}
.backlink{color:var(--muted);cursor:pointer;font-size:13px;margin-bottom:12px;display:inline-flex;gap:6px;align-items:center}
.backlink:hover{color:var(--text)}

/* Modal */
/* ⚠️ Шар вищий за Leaflet. Карта ставить свої панелі на 400–700, а елементи
   керування — на 1000, тож при z-index:100 вона перекривала модальні вікна:
   комерційна пропозиція відкривалась ПІД картою. Тримати вище за 1000. */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:flex-start;justify-content:center;z-index:5000;padding:36px 16px;overflow:auto}
.modal{background:#fff;border-radius:16px;width:100%;max-width:760px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;animation:pop .15s ease}
@keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:scale(1);opacity:1}}
.modal .m-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .m-head h2{margin:0;font-size:17px}
.modal .m-head .x{margin-left:auto;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;border:none;background:none}
.modal .m-body{padding:18px 20px;max-height:66vh;overflow:auto}
.modal .m-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#f8fafc}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.form-grid.one{grid-template-columns:1fr}
.fgroup{grid-column:1/-1;margin:6px 0 -2px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-d);border-bottom:1px solid var(--line);padding-bottom:5px}
.field label{display:block;font-size:12px;color:#475569;margin-bottom:4px;font-weight:550}
.field input,.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;font-family:inherit}
.field textarea{min-height:60px;resize:vertical}
.field.full{grid-column:1/-1}
.field .hint{font-size:11px;color:var(--muted);margin-top:3px}
.newsupplier{grid-column:1/-1;border:1px dashed var(--accent2);border-radius:10px;padding:12px;background:#f0fdf4;display:none}
.newsupplier.show{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Tasks (kanban / list) */
.task-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.task-col{background:#f1f5f9;border-radius:12px;padding:12px;min-height:200px}
.task-col h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:#475569;display:flex;align-items:center;gap:7px}
.task-col h3 .cnt{background:#cbd5e1;border-radius:20px;padding:1px 8px;font-size:11px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow)}
.tcard .tt{font-weight:600;font-size:13.5px;margin-bottom:5px}
.tcard.done .tt{text-decoration:line-through;color:var(--muted)}
.tcard .tm{font-size:11.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.tcard .who{background:#e0e7ff;color:#4338ca;border-radius:20px;padding:1px 8px;font-weight:600}
.tcard .tact{display:flex;gap:6px}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}

/* Map */
/* Множинний фільтр (галочки) */
/* Результати пошуку населеного пункту під полем введення */
.place-res{flex-basis:100%;max-height:230px;overflow:auto}
.place-res:empty{display:none}
.place-item{padding:7px 10px;border:1px solid var(--line);border-radius:8px;margin-top:6px;background:#fff;font-size:12.5px;cursor:pointer}
.place-item:hover{background:#f0fdf4;border-color:var(--accent2)}
.place-item.muted{color:var(--muted);cursor:default}
.place-item.muted:hover{background:#fff;border-color:var(--line)}
.lost-link{display:flex;align-items:center;gap:6px;margin-top:4px;color:#b91c1c;font-size:11px}
.msel{position:relative;display:inline-block}
.msel-btn{padding:7px 26px 7px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;background:#fff;position:relative}
.msel-btn::after{content:"▾";position:absolute;right:9px;top:7px;color:var(--muted)}
.msel-btn.active{border-color:var(--accent2);background:#f0fdf4;color:var(--accent-d);font-weight:600}
.msel-panel{display:none;position:absolute;z-index:1000;top:calc(100% + 4px);left:0;min-width:210px;max-height:320px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;flex-direction:column}
.msel-panel.show{display:flex}
/* Прокручується лише список: «Показати всі» й пошук мають лишатись на місці */
.msel-list{overflow:auto}
.msel-q{width:100%;padding:6px 9px;margin-bottom:4px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}
/* Історія дзвінків стоїть ПРАВОРУЧ від блоку даних, тож ряд не переносимо:
   з flex-wrap кнопка падала під текст, бо той займає всю ширину модалки. */
.cust-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cust-info{flex:1;min-width:0}
.cust-info .smeta{margin-top:3px}
.cust-side{flex:0 0 auto}
.cust-acts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}
.cust-list{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:4px 0 0 22px}
.msel-add{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--line);margin-top:4px}
.msel-add input{flex:1;padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;min-width:0}
.msel-none{padding:8px 9px;color:var(--muted);font-size:12.5px}
.msel-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;font-size:13px;cursor:pointer;user-select:none}
.msel-item:hover{background:var(--hover)}
.msel-item input{width:15px;height:15px;accent-color:var(--accent)}
.msel-item.all{color:var(--muted);border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px;font-weight:600}

#map{height:calc(100vh - 200px);min-height:420px;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.leaflet-popup-content{font-size:13px}
.pulse-marker{animation:pulseGlow 1.5s ease-in-out infinite}
@keyframes pulseGlow{0%{filter:drop-shadow(0 0 0 rgba(253,224,71,.85))}70%{filter:drop-shadow(0 0 9px rgba(253,224,71,0))}100%{filter:drop-shadow(0 0 0 rgba(253,224,71,0))}}


/* Вкладки Карти: «Загальна карта» + окрема вкладка на кожен підбір техніки */
.maintabs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin-bottom:0;border-bottom:2px solid var(--line);padding-bottom:0}
.maintab-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:10px 10px 0 0;border:1px solid var(--line);border-bottom:none;background:#f1f5f9;color:#475569;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:-2px}
.maintab-btn:hover{background:#e2e8f0}
.maintab-btn.active{background:#fff;color:var(--text);box-shadow:0 -2px 8px rgba(0,0,0,.05);border-bottom:2px solid #fff;position:relative;z-index:1}
.maintab-x{border:none;background:rgba(0,0,0,.08);color:inherit;width:16px;height:16px;border-radius:50%;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.maintab-x:hover{background:rgba(0,0,0,.2)}

/* Вміст однієї вкладки підбору техніки — своя карта і свій список */
.pickcard{background:#fff;border:1px solid var(--line);border-radius:0 12px 12px 12px;box-shadow:var(--shadow);overflow:hidden;margin-top:0}
.pickcard-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fffbeb;border-bottom:1px solid #fde68a}
.pickcard-title{flex:1;font-size:13.5px;color:#78350f}
.pickcard-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.pickcard-controls .pp-dist{display:flex;align-items:center;gap:6px;font-size:13px;color:#475569}
.pickcard-controls .pp-dist input{width:70px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px}
.pickcard-map{height:280px;width:100%}
.pickcard-map-full{height:calc(100vh - 350px);min-height:380px}
.pickcard-list .picklist-head{border-bottom:1px solid var(--line)}
.pickcard-list .picklist-rows{max-height:none}

.picklist-head{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:#475569;background:#f8fafc}
.picklist-rows{max-height:320px;overflow:auto}
.pickrow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #f1f5f9}
.pickrow:last-child{border-bottom:none}
.pickrow:hover{background:var(--hover)}
.pickrow .pr-i{color:var(--muted);font-size:12px;width:18px}
.pickrow .pr-icon{font-size:18px}
.pickrow .pr-main{flex:1;min-width:0}
.pickrow .pr-name{font-weight:650;font-size:13.5px}
.pickrow .pr-sub{color:var(--muted);font-size:12px;margin-top:2px}
.pickrow .pr-dist{font-weight:650;color:#16a34a;font-size:13px;white-space:nowrap}

/* Спливне вікно карти (для 2 моніторів) */
body.popout-mode #sidebar,body.popout-mode .topbar{display:none}
body.popout-mode #main{width:100%}
body.popout-mode .content{padding:10px 14px;height:100vh;box-sizing:border-box}
body.popout-mode #map{height:calc(100vh - 150px)}

.popout-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:13.5px}
.popout-banner span{flex:1;min-width:200px;font-weight:550}

/* Settings */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.panel .p-head{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:650;font-size:14px;display:flex;align-items:center;gap:8px}
.panel .p-body{padding:14px 16px}
.reflist{list-style:none;margin:0;padding:0}
.reflist li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.reflist li .x{margin-left:auto;color:var(--danger);cursor:pointer;border:none;background:none;font-size:16px}
.addref{display:flex;gap:8px;margin-top:10px}
.addref input{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}

/* toast */
/* ---------- Підказки на кнопках ----------
   Свої замість стандартного `title`: браузер показує його аж через ~1 секунду,
   і цю затримку не змінити ні з коду, ні з CSS — це поведінка ОС. Тому атрибут
   скрізь замінено на `data-tip`, а підпис малюємо самі, миттєво при наведенні.
   ⚠️ Не повертати `title=` — інакше зʼявляться ДВІ підказки: наша одразу
   і стандартна поверх неї через секунду. */
[data-tip]{position:relative}
/* ⚠️ Підказка — ОКРЕМИЙ елемент у <body> (`#tipbox`), а не `::after` на самій
   кнопці (v369). Псевдоелемент лежить усередині `.tablewrap`, у якого
   `overflow:auto`, тож біля лівого краю таблиці підказку обрізало на півслові
   («…підписані — перенести угоду…» замість «Договори підписані…»). Елемент у
   body з `position:fixed` не обрізається нічим, а `positionTip()` ще й не дає
   йому вилізти за край екрана.
   ⚠️ Не повертати `::after` — обрізання повернеться разом із ним. */
#tipbox{
  position:fixed;left:0;top:0;max-width:min(340px,92vw);
  background:#0f172a;color:#fff;padding:5px 9px;border-radius:6px;
  font-size:11.5px;font-weight:500;line-height:1.35;white-space:pre-line;
  box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none;z-index:7000;
  opacity:0;visibility:hidden}
#tipbox.show{opacity:1;visibility:visible}
/* Стрілочка. `--tipx` — де саме вона стоїть: підказку могло зсунути від краю
   екрана, і тоді стрілка має лишитись над кнопкою, а не посередині підказки. */
#tipbox::after{content:'';position:absolute;bottom:100%;left:var(--tipx,50%);
  transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#0f172a}
#tipbox.above::after{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:#0f172a}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:6000;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .kv{font-size:24px;font-weight:700}
.kpi .kl{color:var(--muted);font-size:12.5px;margin-top:2px}
.kpi .ki{float:right;font-size:20px;opacity:.5}

/* ---------- Підбір техніки: під-вкладки, таблиця роботи по дзвінках ---------- */
.picktabs{display:flex;gap:6px;padding:10px 14px 0;border-bottom:1px solid var(--line);background:#f8fafc;flex-wrap:wrap}
.picktab-btn{background:transparent;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;
  padding:8px 14px;font:inherit;font-size:13px;font-weight:600;color:#475569;cursor:pointer}
.picktab-btn:hover{background:#eef2f7}
.picktab-btn.active{background:#fff;border-color:var(--line);color:var(--accent-d);box-shadow:0 -2px 0 var(--accent) inset}
.picktab-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;
  background:#e2e8f0;color:#475569;font-size:11px;font-weight:700;text-align:center}
.picktab-btn.active .picktab-count{background:var(--accent);color:#fff}
table.picktable td{vertical-align:middle}
table.picktable .pk-sub{color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.35}
table.picktable .pk-phone{white-space:nowrap;font-variant-numeric:tabular-nums}
table.picktable .pk-dist{white-space:nowrap;color:#475569}
table.picktable select.pk-call{min-width:150px;padding:5px 7px;font-size:12.5px}
table.picktable input.pk-comment{width:100%;min-width:150px;padding:5px 7px;font-size:12.5px}
table.picktable .pk-cwrap{min-width:170px}
/* Кнопка «✓ Запропоновано»: виглядає як позначка стану, але клікається —
   повертає техніку з «Пропозиції клієнту» назад у «Зацікавлені». */
.pk-done-btn{background:#dcfce7;color:#15803d;border-color:#bbf7d0;font-weight:600;white-space:nowrap}
.pk-done-btn:hover{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.pk-done{display:inline-block;background:#dcfce7;color:#15803d;border-radius:6px;padding:3px 8px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
/* окреме вікно карти підбору */
.pickpopout-map{height:calc(100vh - 78px);min-height:360px;border-radius:0}
.popout-pickhead{padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);font-size:14px}
.popout-pickhead .muted{color:var(--muted);font-size:12.5px}
.picklist-head{display:flex;align-items:center;gap:12px}
.picklist-head .btn{margin-left:auto}
/* ⚠️ Саме max-width тримає колонку: без нього довгий підпис («2018 · колісний ·
   роторний · без картографії · Актуальний») розгортався в один рядок і
   розтягував таблицю на пів екрана. Тепер він переноситься на два рядки. */
table.picktable .pk-machine{min-width:170px;max-width:215px;white-space:normal}
table.picktable .pk-aggs{min-width:210px;max-width:260px;white-space:normal}
/* Орієнтовна ціна з Бази техніки. Свідомо НЕ схожа на погоджені ціни в
   «Зацікавлених»/«Пропозиції клієнту»: ті — поля вводу в білих рамках, ця —
   сірий курсив без рамки, який неможливо натиснути й відредагувати. */
/* Попап замовлення на карті: 13 полів, тож потрібна власна ширина й щільність.
   Без max-width Leaflet розтягує попап під найдовший рядок («Умови проживання
   і харчування» роз'їжджалися на пів екрана).
   ⚠️ Замовлення з кількома тех. операціями (v345) розтягує попап вище карти —
   скарга користувача, що інформація не влазить і не прокручується. Той самий
   max-height+overflow, що вже стояв на «Примітках» (`.op-note`) і на
   груповому значку техніки (`.eq-pop-multi`), тепер і на всьому попапі. */
.op-pop{min-width:210px;max-width:280px;line-height:1.5;max-height:340px;overflow-y:auto}
.op-pop .op-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--accent);margin:2px 0 5px}
.op-pop .op-l{color:#64748b}
/* Примітки бувають на кілька абзаців — тримаємо переноси й обмежуємо висоту,
   інакше попап виростає вище карти й хвіст не прочитати. */
.op-pop .op-note{white-space:pre-wrap;max-height:110px;overflow-y:auto;
  margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
/* Попап техніки: той самий вміст, що в рядку підбору, тож і ті самі класи
   (.pk-sub, .pk-agg, .pk-refprice, .unit-id) — стилі не дублюємо. */
/* Фільтри машини в підборі: окремий рядок на кожен тип техніки, щоб було видно,
   до чого саме застосовується «Рік випуску» — до комбайна чи до трактора. */
/* Стоїть усередині списку, одразу під «Знайдено N…», тож відбиваємо її від
   таблиці лінією — інакше зливається із шапкою колонок. */
.mfbar{padding:8px 14px 10px;border-bottom:1px solid var(--line);background:#fff}
.mfrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.mflabel{font-size:12.5px;font-weight:600;color:var(--muted);min-width:150px}
.mfrange{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.mfrange input{width:66px;padding:4px 6px;font-size:12px;border:1px solid var(--line);border-radius:6px}
/* Обгортка списку в рядку: потрібна, щоб `enhanceSelect` мав куди вставити
   поле пошуку (v386). */
.inl-sel{min-width:140px}
.inl-sel .sqwrap{min-width:140px}
/* Період двома датами в одній комірці (v379). */
.inl-period{display:flex;align-items:center;gap:4px;min-width:0}
.inl-period .inl-in{min-width:118px}
.inl-dash{color:var(--muted);font-size:12px}
/* ---------- Коментар як журнал із підписами (v378) ----------
   Угорі — попередні записи (лише перегляд, прокручуються), нижче — поле для
   нового. Візуально розділені, щоб було видно: старе не правиться. */
.notebox{display:flex;flex-direction:column;gap:5px;min-width:0}
.note-log{max-height:88px;overflow-y:auto;white-space:pre-line;font-size:12px;
  line-height:1.4;color:#475569;background:#f8fafc;border:1px solid var(--line);
  border-radius:6px;padding:5px 7px}
.note-new{width:100%;min-width:0}
textarea.textview-new{min-height:120px}
/* «Продзвін бази» — у тому самому ряду, що вкладки категорій, але притиснута
   до правого краю (v377). `margin-left:auto` в flex-контейнері `.picktabs`. */
.picktabs .cold-btn{margin-left:auto}
/* Підсвітка рядка, до якого щойно перейшли (v389) — щоб серед десятка дзвінків
   було видно саме той, по якому клікнули в підборі. */
.trow.row-hl{box-shadow:0 0 0 2px var(--accent2),0 4px 14px rgba(37,99,235,.25);
  transition:box-shadow .2s}
/* Картка задачі в режимі редагування (v371): поля сіткою, дії — праворуч,
   як і в звичайному рядку. */
.trow.row-edit{background:#f0f9ff;box-shadow:inset 3px 0 0 var(--accent2)}
.trow-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px 12px;grid-column:1/-1}
.trow-edit .field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.trow-edit .field.full{grid-column:1/-1}
/* ---------- Редагування прямо в рядку (v370) ---------- */
.grid tbody tr.row-edit{background:#f0f9ff;box-shadow:inset 3px 0 0 var(--accent2)}
.grid tbody tr.row-edit:hover{background:#e0f2fe}
.grid td.inl-cell{padding:4px 6px;vertical-align:middle}
.inl-in{width:100%;min-width:110px;max-width:260px;padding:4px 7px;font-size:12px;
  border:1px solid var(--accent2);border-radius:6px;background:#fff}
.inl-in:focus{outline:2px solid rgba(37,99,235,.25)}
textarea.inl-ta{min-width:180px;resize:vertical;line-height:1.35}
.inl-multi{min-width:150px}
/* Той самий недолік, що й у попапу замовлення (`.op-pop`): техніка з великою
   кількістю агрегатів чи довгим коментарем розтягує попап вище карти без
   можливості прокрутити. */
.eq-pop{min-width:220px;max-width:300px;line-height:1.5;max-height:340px;overflow-y:auto}
.eq-pop .eq-part{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.eq-pop .eq-note{white-space:pre-wrap;max-height:90px;overflow-y:auto}
/* Кілька одиниць на одній точці: прокручуємо список, а не розтягуємо карту. */
.eq-pop-multi{max-width:310px;max-height:340px;overflow-y:auto}
/* Шапка постачальника, винесена на весь груповий значок (v360): відділяємо її
   від переліку одиниць так само, як блоки одне від одного. */
.eq-pop-multi .eq-multi-sup{margin-top:6px;padding-top:6px;border-top:2px solid var(--line);line-height:1.5}
.eq-pop-multi .eq-one{margin-top:6px;padding-top:6px;border-top:2px solid var(--line)}
.eq-pop-multi .eq-pop{max-width:none}
/* Перспективна угода: бузкова смуга й фон — той самий прийом, що для
   пріоритетної техніки в підборі, але свій колір, щоб не сплутати. */
/* Задачі: підсвічена картка й рядки авто-задач (замовлення, дзвінки). */
.tcard.hot,.trow.hot{background:#fff7ed;border-color:#fdba74}
.done-sec{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.done-toggle{color:var(--muted)}
.trow.ready{border-color:#86efac;background:#f0fdf4}
.trow.overdue{border-color:#fca5a5;background:#fef2f2}
.tw-late{color:#b91c1c}
.daytabs{margin:2px 0 8px}
.picktab-btn.day-late{color:#b91c1c}
.trow.done{opacity:.6}
.trow.done .tt{text-decoration:line-through}
.task-list{display:flex;flex-direction:column;gap:8px}
.trow{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.trow .tt{font-size:13.5px;font-weight:600}
/* Контрагент — між суттю й датами (v288): темніший і більший за дати, бо це
   те, кому дзвонити, а не службова інформація. */
.trow .tw-who{grid-column:1;color:#334155;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 10px}
.trow .tm{grid-column:1;color:var(--muted);font-size:12px}
/* ⚠️ 1/-1, а не 1/3: рядків тепер може бути три (суть, контрагент, дати). */
.trow .tact{grid-column:2;grid-row:1/-1;display:flex;gap:6px;align-items:center}
table.grid tbody tr.deal-hot{background:#fff7ed;box-shadow:inset 3px 0 0 #ea580c}
table.grid tbody tr.deal-hot:hover{background:#ffedd5}
table.picktable .pk-refprice{color:#94a3b8;font-size:11px;font-style:italic;margin-top:3px}
table.picktable .pk-agg{padding:3px 0}
table.picktable .pk-agg + .pk-agg{border-top:1px dashed var(--line);margin-top:3px}
table.picktable .pk-agg .unit-id{font-size:10.5px;padding:0 5px;margin-right:5px}
table.picktable .pk-phone{white-space:nowrap}

/* Взаємне підсвічування «карта ↔ список» у підборі */
table.picktable tbody tr.pk-hl{background:#fef9c3;box-shadow:inset 3px 0 0 #eab308}
table.picktable tbody tr.pk-hl:hover{background:#fef08a}
/* Значки підбору мають клас .pulse-marker з нескінченною анімацією, яка задає filter.
   Анімований filter перебиває звичайне правило в каскаді, тому підсвітку не було видно —
   гасимо анімацію на час наведення, інакше drop-shadow нижче не має жодного ефекту. */
.pin-hl{animation:none!important;filter:drop-shadow(0 0 8px #eab308) drop-shadow(0 0 4px #eab308)!important;z-index:1000!important}
.pin-hl>div{transform:scale(1.22);transition:transform .1s ease-out}
/* Пріоритетний («найгарячіший») постачальник у Зацікавлених */
/* Пріоритетний постачальник — ФІОЛЕТОВА смуга зліва плюс легкий фон.
   Колір навмисно не жовтий/червоний/зелений: ті зайняті реакцією клієнта.
   Пріоритет переходить разом із технікою у вкладку «Пропозиція клієнту»,
   тож обидві позначки мають читатись на одному рядку одночасно. */
table.picktable tbody tr.pk-prio{background:#f5f3ff;box-shadow:inset 3px 0 0 #7c3aed}
/* Реакція клієнта задає і фон, і смугу — тобто ПОВНІСТЮ перекриває фіолетовий
   колір пріоритету (рішення користувача v119): щойно клієнт відреагував, саме
   його реакція визначає, як читається рядок. Оголошено після .pk-prio. */
table.picktable tbody tr.pk-cli-offered{background:#fefce8;box-shadow:inset 3px 0 0 #ca8a04}
table.picktable tbody tr.pk-cli-declined{background:#fef2f2;box-shadow:inset 3px 0 0 #dc2626}
table.picktable tbody tr.pk-cli-agreed{background:#f0fdf4;box-shadow:inset 3px 0 0 #16a34a}
table.picktable tbody tr.pk-prio:hover{background:#ffedd5}
table.picktable tbody tr.pk-prio.pk-hl{background:#fef08a}
table.picktable tbody tr.pk-prio .pk-machine b::after{content:" 🔥"}
table.picktable .pk-loc{min-width:160px;white-space:normal}
/* Ініціали того, хто переніс техніку на цю вкладку (v356). Колонка вузька —
   у ній лише ініціали; повне імʼя показує підказка при наведенні. */
table.picktable .pk-by{white-space:nowrap;text-align:center;font-size:12.5px}
/* «Сейл» і «Диспетчер» замовлення (v380): значення однакове в усіх рядках
   підбору, тож колонки вузькі й не мають розтягувати таблицю. */
table.picktable .pk-who{white-space:nowrap;font-size:12.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* «Коментар загальний» у підборі — не поле вводу, а обрізаний перегляд:
   журнал буває на кілька абзаців і розтягував рядок (v277). Правиться кліком. */
table.picktable .pk-gen{width:100%;min-width:200px;max-width:260px;padding:5px 7px;font-size:12px;
  line-height:1.35;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
  white-space:pre-line;max-height:3.1em;overflow:hidden;position:relative}
table.picktable .pk-gen:hover{border-color:var(--accent2);background:#f8fafc}
/* ⚠️ Обидві колонки коментарів вирівняні ПО ЦЕНТРУ рядка (v359, вимога
   користувача). Доти тут стояло `vertical-align:top` — залишок з першої версії
   таблиці, ще до списків записів і запланованих дзвінків під полем. Через нього
   поля коментарів висіли вгорі, поки локація, дзвінок і статус у тому самому
   рядку стояли посередині. Загальне правило таблиці — `td{vertical-align:middle}`
   вище, тож тут просто не треба його перебивати. */
table.picktable .pk-cwrap{min-width:190px;vertical-align:middle}
table.grid td.cell-pre{white-space:pre-line;min-width:220px;max-width:340px;line-height:1.4}
/* Обрізана комірка: три рядки, далі — розчинення в білому й клік по ній
   відкриває повний текст. Обрізаємо саме CSS, щоб пошук по таблиці й
   Excel-експорт і далі бачили повне значення (v277). */
/* Лише max-width: min-width у колонок, де він потрібен, уже свій
   (`cell-pre` 220px), а для ID-колонок був би просто зайвою шириною. */
table.grid td.cell-clip{max-width:340px}
table.grid td.cell-clip.is-clipped{cursor:pointer}
/* Той самий обріз у попапі карти: коментар буває на абзац, а попап і так вузький. */
.eq-note.cell-clip{cursor:pointer}
.eq-note.cell-clip .cell-clip-in{max-height:4.3em;overflow:hidden;position:relative}
.eq-note.cell-clip.is-clipped .cell-clip-in::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1.3em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 85%);pointer-events:none}
table.grid td.cell-clip .cell-clip-in{max-height:4.3em;overflow:hidden;position:relative}
/* ⚠️ Градієнт «розчинення» — ЛИШЕ коли текст справді не вміщується
   (`is-clipped`, ставить `markClipped()`). Доти він малювався завжди й з'їдав
   нижній рядок навіть тоді, коли той повністю вліз: у комірці з двома рядками
   другий виглядав напівстертим (v344). */
table.grid td.cell-clip.is-clipped .cell-clip-in::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1.3em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 85%);pointer-events:none}
table.grid tbody tr:hover td.cell-clip{background:#f1f5f9}
table.grid tbody tr:hover td.cell-clip.is-clipped .cell-clip-in::before{background:linear-gradient(to bottom,rgba(241,245,249,0),#f1f5f9 85%)}
textarea.textview{width:100%;min-height:280px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:13.5px;line-height:1.5;resize:vertical;white-space:pre-wrap}
.reflist input.me-name{flex:1;min-width:140px;padding:4px 8px;border:1px solid var(--line);
  border-radius:6px;font-size:13px;font-weight:600}

/* ---------- Екран входу ---------- */
#loginBg{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,#0f172a,#1e293b);
  display:flex;align-items:center;justify-content:center;padding:20px}
#loginBox{background:#fff;border-radius:16px;padding:26px 28px;width:340px;max-width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:14px}
#loginBox .lg-brand{display:flex;align-items:center;gap:11px;margin-bottom:4px}
#loginBox .lg-logo{width:38px;height:38px;border-radius:10px;font-size:20px;
  background:linear-gradient(135deg,var(--accent2),var(--accent-d));display:flex;align-items:center;justify-content:center}
#loginBox b{font-size:16px;display:block}
#loginBox small{color:var(--muted);font-size:11.5px}
#loginBox label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:#475569}
#loginBox input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px}
#loginBox input:focus{outline:none;border-color:var(--accent2)}
#loginBox button{justify-content:center;padding:10px}
#loginBox .lg-err{color:var(--danger);font-size:12.5px;min-height:16px}
/* смуга «немає зв'язку» */
#offlineBar{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#b91c1c;color:#fff;
  padding:8px 14px;font-size:13px;text-align:center}
/* техніка, що відповідає активному фільтру типу, у картці постачальника */
.eqchip-hit{outline:2px solid var(--accent2);outline-offset:1px;background:#f0fdf4}

/* ---------- Картка постачальника: повна інформація по техніці ---------- */
.ef-bar{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.ef-bar h4{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.ef-bar .btn{margin-left:auto}
/* ⚠️ Ані власної висоти, ані прокрутки: доти .ef-list був флекс-колонкою з
   max-height, і таблиці всередині стискались — від «Комбайни (2)» було видно
   півтора рядка. Прокручується тільки тіло модалки. */
.ef-list{display:block}
/* flex:none обовʼязково: у флекс-колонці з max-height блоки інакше стискаються
   майже до нуля, а overflow:hidden обрізає вміст — картка виглядає порожньою */
.eqfull{flex:none;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ef-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 12px;
  background:var(--head);border-bottom:1px solid var(--line);font-size:13.5px}
.ef-head .muted{color:var(--muted);font-size:12px}
.ef-head .btn{margin-left:auto}
.ef-body{padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 18px}
.ef-group{break-inside:avoid}
/* Блок реквізитів однієї юр. особи — і в перегляді картки, і в редакторі.
   Рамка потрібна саме тому, що юр. осіб буває кілька: без неї поля сусідніх
   контрагентів зливаються в одну простирадло-таблицю. */
/* Машини й агрегати в картці постачальника — списком, а не таблицею:
   у кожної одиниці мало полів, і рядок таблиці на 50 колонок тут зайвий. */
/* Підгрупа всередині «Машини» / «Агрегати»: комбайни, трактори, жатки, плуги… */
.ugroup{font-size:11.5px;font-weight:650;color:#334155;margin:10px 0 2px}
/* ⚠️ У картці таблиці показуються ПОВНІСТЮ, без власної прокрутки: у постачальника
   одиниць небагато, а внутрішній скрол ховав частину списку — «Комбайни (2)»
   показували лише один рядок. Прокручується сама модалка. */
/* Таблиці картки показуються повністю: одиниць у постачальника небагато,
   а внутрішній скрол ховав частину списку. */
.ef-list .tablewrap{max-height:none;overflow:visible;margin-bottom:12px}
.ulist{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.urow{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-size:12.5px;cursor:pointer}
.urow:hover{background:var(--hover);border-color:var(--accent2)}
.urow>div{flex:1;min-width:0}
/* Агрегат без машини — помаранчева смуга в таблиці картки. Не помилка,
   а привід перевірити: агрегатів буває більше, ніж машин. */
table.grid tbody tr.u-free{background:#fff7ed;box-shadow:inset 3px 0 0 #ea580c}
/* Позначено вручну «так і має бути» — попередження знято, але видно, що вільний. */
table.grid tbody tr.u-freeok{background:#f8fafc;box-shadow:inset 3px 0 0 #94a3b8}
.uprice{margin-top:3px;color:var(--accent-d);font-size:12px}
/* Які культури збирає ця жатка / цей комбайн */
.ucult{margin-top:3px;color:#475569;font-size:11.5px}
.ucult.warn{color:#c2410c;font-weight:600}
/* Поля одиниці в картці — дві колонки, щоб довгий перелік не тягнувся вниз */
.ufields{margin-top:5px;columns:2;column-gap:22px}
.ufields .ef-row{break-inside:avoid}
@media(max-width:900px){.ufields{columns:1}}
/* Поле «На машині» в рядку агрегата */
.uon{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.uon select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px;
  background:#fff;max-width:230px;text-transform:none;letter-spacing:0;color:var(--text)}
.reqbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:#fff}
.reqbox .ef-gt{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0}
.ef-gt{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#475569;
  font-weight:700;padding:3px 0 5px;border-bottom:1px solid var(--line);margin-bottom:5px}
.ef-row{display:flex;gap:10px;align-items:baseline;padding:2px 0;font-size:12.5px}
.ef-l{color:var(--muted);flex:1;min-width:0}
.ef-v{font-weight:600;text-align:right;white-space:pre-line;max-width:60%}
.ef-empty{color:var(--muted);font-size:12.5px;padding:4px 0}
/* Категорія постачальника A/B/C/D */
.cat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:6px;color:#fff;font-size:11.5px;font-weight:800;vertical-align:1px}
.cat-A{background:#16a34a}.cat-B{background:#2563eb}.cat-C{background:#d97706}.cat-D{background:#64748b}

/* ---------- Довідники: плитки + редактор в окремому вікні ---------- */
.reftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.reftile{display:flex;align-items:center;gap:10px;padding:11px 13px;background:#fff;
  border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;text-align:left;
  cursor:pointer;box-shadow:var(--shadow)}
.reftile:hover{border-color:var(--accent2);background:var(--hover)}
.rt-name{flex:1;font-weight:600}
.rt-count{background:var(--chip);color:#475569;border-radius:20px;padding:1px 9px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.reflist-modal{max-height:52vh;overflow:auto;margin:0 0 12px}
.reflist-modal li{display:flex;align-items:center;gap:8px}
.ref-inp{flex:1;padding:6px 9px;border:1px solid transparent;border-radius:7px;font-size:13px;background:transparent}
.ref-inp:hover{border-color:var(--line);background:#fff}
.ref-inp:focus{outline:none;border-color:var(--accent2);background:#fff}
.ref-empty{color:var(--muted);font-size:12.5px;padding:8px 2px}
/* Плитка та розділ «Шукають роботу» */
.ptile.seeking .pi{filter:hue-rotate(35deg)}
table.picktable .sw-when{white-space:nowrap}
table.picktable input.sw-note{width:100%;min-width:170px;padding:5px 7px;font-size:12.5px;
  border:1px solid var(--line);border-radius:6px}

/* Кілька юр. осіб і контактів у постачальника */
.more-badge{display:inline-block;margin-left:6px;background:#e0e7ff;color:#4338ca;border-radius:20px;
  padding:1px 8px;font-size:11px;font-weight:700;cursor:help}
.dynrows{margin:0 0 12px}
/* ⚠️ `flex-wrap` і `min-width:0` — щоб рядок із шести полів (тех. операції,
   v341) не вилазив за край вікна. Без `min-width:0` поля дати й числа не
   стискаються нижче своєї «природної» ширини, з'їдають рядок, а списки
   схлопуються майже в нуль і кнопка «×» опиняється за краєм. */
.dynrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.dynrow>*{min-width:0}
.dynrow input[type=date],.dynrow input[type=number]{min-width:96px}
.dynrow .sqwrap{min-width:108px}
.dynrow input{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.dynrow input:focus{outline:none;border-color:var(--accent2)}
.dynrow .x{flex:none}
.sup-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-bottom:14px}
.sup-li{font-size:13px;padding:3px 0;border-bottom:1px solid #f1f5f9}
.sup-li:last-child{border-bottom:none}
.sup-main{margin-left:6px;background:#dcfce7;color:#15803d;border-radius:20px;padding:0 7px;font-size:10.5px;font-weight:700}

/* Ціни в підборі: сума + валюта + форма розрахунку */
table.picktable input.pk-num{width:100px;padding:5px 7px;font-size:12.5px;
  border:1px solid var(--line);border-radius:6px;text-align:right;font-variant-numeric:tabular-nums}
table.picktable select.pk-sel{min-width:120px;padding:5px 6px;font-size:12px}
table.picktable input.pk-date{padding:5px 7px;font-size:12.5px;border:1px solid var(--line);border-radius:6px}
table.picktable .pk-money{white-space:nowrap}
/* Комерційна пропозиція */
.offer-text{width:100%;min-height:220px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  line-height:1.55;resize:vertical;background:#fff}
.offer-bar{display:flex;justify-content:flex-end;margin-top:10px}

/* Загальна карта: перемикачі «Замовлення / Техніка» і списки під картою */
.showtoggle{display:inline-flex;gap:6px;margin-right:4px}
.showtoggle .btn{padding:7px 13px}
#mapLists{margin-top:14px}
#mapLists .picktabs{border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:none}
#mapLists .tablewrap{border-radius:0 0 12px 12px;max-height:46vh}
.sup-cat-line{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#475569}
.sup-nocat{color:var(--muted);font-weight:400;font-style:italic}
/* колонки з кількома юр. особами / контактами */
table.grid td.cell-multi{min-width:180px;max-width:320px;line-height:1.45}
/* техніка з підбору, яку ще не внесли в Базу техніки */
.draft-badge{display:inline-block;margin-left:6px;background:#fef3c7;color:#b45309;
  border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:700;vertical-align:1px}

/* «Графік роботи» (v274, поширено на всю техніку v444). Згори — той самий
   опис техніки, що в рядку переліку, нижче — шкала 12 місяців, далі таблиця:
   у комбайна на чотири культури, у решти типів — довільний список робіт. */
.wp-head{display:flex;gap:18px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;background:#fff;margin-bottom:8px}
.wp-head .wp-mach{flex:1 1 240px;min-width:220px}
.wp-head .wp-aggs{flex:2 1 320px;min-width:260px;display:flex;flex-wrap:wrap;gap:10px}
.wp-note{font-size:12px;color:var(--muted);margin:0 0 10px}
.wp-per{display:flex;gap:6px}
.wp-per input{width:120px}
/* Шкала 12 місяців: зелена клітинка — вільно, червона — є період зайнятості. */
.wp-scale{margin-bottom:10px}
.wp-scale-nav{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.wp-scale-year{font-size:13.5px;min-width:38px;text-align:center}
.wp-scale-row{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.wp-m{padding:6px 2px;text-align:center;border-radius:6px;font-size:11px;
  font-weight:700;color:#fff;text-transform:capitalize;cursor:default}
.wp-m-busy{background:#dc2626}
.wp-m-free{background:#16a34a}
.wp-scale-legend{display:flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--muted);margin-top:6px}
.wp-leg{display:inline-block;width:10px;height:10px;border-radius:3px}
/* Попап карти: ID комбайна і кнопка плану в один рядок. */
.eq-idrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Вісім колонок у вузьку модалку не влазять: вікно ширше, а таблиця
   прокручується вбік у власному контейнері — сторінка вбік не їде. */
.modal.wide{max-width:1180px}
.wp-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.wp-table table{min-width:1000px}
.modal table.grid td select,.modal table.grid td input{padding:5px 8px;
  border:1px solid var(--line);border-radius:6px;font-size:12px;background:#fff;max-width:100%}

/* ---------- Облік обʼєму: різниця, звірені рядки, підсумок (v278) ---------- */
table.grid td.ha-diff{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Звірений рядок: зелений і на наведення теж — інакше позначка «блимає». */
table.grid tbody tr.ha-ok{background:#dcfce7}
table.grid tbody tr.ha-ok:hover{background:#bbf7d0}
table.grid tbody tr.ha-ok td:first-child{box-shadow:inset 3px 0 0 #16a34a}
.ha-total{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow)}
.ha-total-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ha-total-head input[type=date]{padding:5px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12.5px}
.ha-total-l{color:var(--muted);font-size:12.5px}
.ha-total-sub{color:var(--muted);font-size:12px;margin-top:8px}
table.ha-total-tbl{width:auto;min-width:520px}
table.ha-total-tbl td{font-variant-numeric:tabular-nums;white-space:nowrap}
table.ha-total-tbl td.ha-plus{color:#15803d;font-weight:700}
table.ha-total-tbl td.ha-minus{color:#b91c1c;font-weight:700}

/* Заголовок групи-перемикача: блок «Для договору» в потенційних угодах (v279). */
table.grid thead tr.groups th.grp-toggle{cursor:pointer;user-select:none}
table.grid thead tr.groups th.grp-toggle:hover{background:#cbd5e1;color:#0f172a}
table.grid td.deal-doc{white-space:nowrap}

/* Заплановані дзвінки просто в рядку підбору (v280): видно, що по цій машині
   в цьому замовленні вже є домовленість передзвонити. */
.pk-calls{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pk-callchip{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:999px;
  padding:2px 8px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.pk-callchip:hover{background:#dbeafe;border-color:#93c5fd}
.pk-callchip.late{border-color:#fecaca;background:#fef2f2;color:#b91c1c}
.pk-callchip.late:hover{background:#fee2e2;border-color:#fca5a5}

/* Холдинг у дужках біля назви господарства (v283) — тонше за саму назву,
   щоб не сперечалося з нею за увагу. */
.sname .s-hold{font-weight:500;color:var(--muted)}

/* Раніше внесені записи цього підбору (v286): додавання — у полі вище,
   правка — кліком по самому запису. */
/* ⚠️ Список записів НЕ росте разом з їх кількістю (v287): він обмежений по
   висоті й прокручується всередині себе, інакше десяток дзвінків розтягував би
   рядок таблиці на пів екрана. Сам запис — один рядок із трикрапкою; повний
   текст видно у вікні по кліку. */
.pk-notes{display:flex;flex-direction:column;gap:3px;margin-top:5px;
  max-height:46px;overflow-y:auto;overscroll-behavior:contain}
.pk-note{text-align:left;border:1px solid var(--line);background:#f8fafc;border-radius:8px;
  padding:3px 8px;font:inherit;font-size:11.5px;line-height:1.35;color:#334155;cursor:pointer;
  flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-note:hover{background:#eef2f7;border-color:var(--accent2)}
.pk-note-d{color:var(--muted);font-weight:600;margin-right:5px;white-space:nowrap}
.pk-notes::-webkit-scrollbar{width:6px}
.pk-notes::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ---------- Пошук у довгих списках (v302) ----------
   Рідний select лишається в DOM (джерело істини), але не показується. */
.sqwrap{position:relative}
.sqwrap .sq-native{display:none}
.sq-input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:13.5px;background:#fff;cursor:text}
.sq-input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.sq-panel{display:none;position:absolute;z-index:7100;left:0;right:0;top:calc(100% + 4px);
  max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.sq-panel.show{display:block}
.sq-item{padding:7px 11px;font-size:13px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sq-item:hover,.sq-item.on{background:#ecfdf5}
.sq-none{padding:9px 11px;font-size:12.5px;color:var(--muted)}

/* Шлях кроків у розділі «Документи» (v309): сторона · тип договору · операція.
   Пройдені кроки клікабельні — щоб змінити операцію, не повертаючись на
   початок. Останній (поточний) не клікається: він і так відкритий. */
.docpath{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 14px}
.docpath .docstep{font-size:13px;color:var(--muted)}
.docpath .docstep+.docstep::before{content:'›';margin-right:6px;color:var(--muted)}
.docpath .docstep.on{color:var(--accent);cursor:pointer}
.docpath .docstep.on:hover{text-decoration:underline}

/* Список наших юр. осіб (v316): назва + рядок реквізитів, праворуч дії. */
.reflist li.own-li{align-items:flex-start;padding:9px 0}
.own-li .own-l{flex:1;min-width:0}
.own-li .own-sub{color:var(--muted);font-size:12px;margin-top:2px}

/* Пояснення під підписом поля форми (v320): чому саме це значення тут. */
.field .fnote{margin:-2px 0 5px;line-height:1.35}

/* Локації замовника — кожна з нового рядка (v323): склеєні через «·» назви
   переносились посеред слова, і межу між локаціями було не видно. */
.smeta.cust-locs{display:flex;gap:5px;align-items:flex-start}
.cust-locs .cl{display:block}

/* Перелік рядків усередині підсумку (v324): колонка «Дії» тут порожня —
   записи правлять у таблиці вище, а тут лише зріз для звірки. */
.ha-total .tablewrap th:nth-child(2),
.ha-total .tablewrap td:nth-child(2){display:none}

/* Підсумковий рядок усередині переліку (v325): числа стоять рівно під тими
   колонками, які вони підсумовують, бо це та сама таблиця. */
.ha-total tfoot .ha-sum-row td{background:#f1f5f9;font-weight:700;border-top:2px solid var(--line)}

/* Вибір тех. операції перед пропозицією клієнту (v339). */
.op-choose{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.op-choose .btn{justify-content:flex-start;text-align:left}

/* Колонки з переліком тех. операцій: їх буває 3–4, і обрізати на трьох рядках,
   як довгий коментар, тут немає сенсу — це короткі рядки (v344).
   ⚠️ Правило стоїть У КІНЦІ файлу навмисно: у нього та сама вагомість, що в
   `td.cell-clip .cell-clip-in{max-height:4.3em}`, тож виграє те, яке нижче. */
table.grid td.cell-ops .cell-clip-in{max-height:8.6em}

/* Перелік тех. операцій у попапі замовлення (v345): кожна окремим блоком,
   щоб не злипались, коли їх три-чотири. */
.op-pop .op-ops{margin:3px 0}
.op-pop .op-one{padding:3px 0 3px 8px;border-left:2px solid #e2e8f0;margin-top:4px}
.op-pop .op-one .op-sub{color:#475569;font-size:11.5px;line-height:1.35}

/* Вибір операцій і цін при перенесенні техніки (v346). */
.op-price{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.op-price-row{border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.op-price-l{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.op-price-f{display:flex;gap:6px;margin-top:6px}
.op-price-f input,.op-price-f select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}
.op-price-num{flex:1;min-width:0}
/* Підпис операції в заголовку цінової колонки. */
.pk-th-op{font-weight:400;font-size:10.5px;color:#64748b;text-transform:none;letter-spacing:0;margin-top:2px}
.pk-money-sel{display:flex;gap:4px;margin-top:4px}
.pk-money-sel select{min-width:0;flex:1}

/* Вкладки підборів у винесеному вікні (v350) — той самий вигляд, що в
   головному вікні, лише без «Загальної карти». */
.popout-mode .maptabs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 0;background:#fff}
.popout-mode .maptab{padding:7px 12px;border:1px solid var(--line);border-bottom:none;
  border-radius:10px 10px 0 0;background:#f8fafc;cursor:pointer;font-size:12.5px;white-space:nowrap}
.popout-mode .maptab:hover{background:#f1f5f9}
.popout-mode .maptab.active{background:#fff;font-weight:600;box-shadow:0 -2px 0 var(--accent) inset}

/* ---------- Кілька операторів в одній комірці (v394) ----------
   Рядки складаються стовпчиком, щоб ПІБ і телефон у сусідніх колонках стояли
   на однаковій висоті. ⚠️ Висота рядка МУСИТЬ збігатися в обох колонках, тому
   і поле, і хрестик мають ту саму `min-height`: інакше «Петренко» опинився б
   навпроти номера Василенка. */
.inl-lines{display:flex;flex-direction:column;gap:4px;min-width:150px}
.inl-line{display:flex;gap:4px;align-items:center;min-height:26px}
.inl-line .inl-in{flex:1;min-width:0}
.inl-line-x{flex:none;padding:0 6px;min-height:26px;line-height:1;color:#b91c1c}
.inl-line-x:hover{background:#fee2e2;border-color:#fca5a5}
.inl-line-add{align-self:flex-start;white-space:nowrap}
/* ⚠️ Комірка з кількома операторами переносить рядки, попри `td.deal-doc`
   (v394). Правило стоїть НИЖЧЕ за `td.deal-doc{white-space:nowrap}` — вагомість
   однакова, тож виграє те, що нижче (та сама пастка, що з `cell-ops` у v343). */
table.grid td.deal-doc.cell-pre{white-space:pre-line;min-width:180px}

/* ---------- Планування оплат (v396) ----------
   Два рядки на спільній шкалі: план (світлі картки, тягнуться) і факт (заливка).
   ⚠️ Картки позиціюються абсолютно, тож у рядка МУСИТЬ бути `position:relative`
   і явна висота — її ставить JS за кількістю рівнів (рівень = замовлення). */
.pp-box{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:12px 10px;margin-bottom:14px}
.pp-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.pp-title{font-weight:600}
.pp-lane-l{font-size:12px;color:#6b7280;margin:10px 0 12px}
.pp-lane{position:relative}
.pp-rows{position:relative;overflow:visible}
.pp-chip{position:absolute;box-sizing:border-box;border-radius:6px;padding:5px 3px;text-align:center;overflow:hidden;z-index:2}
.pp-chip.pp-drag{cursor:grab;touch-action:none;user-select:none}
.pp-chip.pp-drag:active{cursor:grabbing}
.pp-oc{font-size:11px;line-height:1.1;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-nm{font-size:11px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-am{font-size:13px;font-weight:600;margin-top:1px;white-space:nowrap}
.pp-chip.pp-out{background:#eb6834;color:#4a1b0c}
.pp-chip.pp-in{background:#1baf7a;color:#04342c}
.pp-chip.pp-plan.pp-out{background:#faeeda;color:#633806}
.pp-chip.pp-plan.pp-in{background:#e1f5ee;color:#085041}
.pp-grid{position:absolute;top:0;bottom:0;width:0;border-left:1px solid #f1f5f9}
.pp-today{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #e24b4a;z-index:1}
.pp-axis{position:relative;height:24px;border-top:1px solid #cbd5e1;margin-top:2px}
.pp-date{position:absolute;top:5px;font-size:12px;transform:translateX(-50%);white-space:nowrap}
.pp-date.pp-fut{color:#9ca3af}
.pp-bal{position:relative;height:46px}
.pp-bz{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.pp-bz svg{display:block;margin:0 auto}
.pp-bt{font-size:12px;white-space:nowrap;line-height:1.2;margin-top:2px}
.pp-bz.pp-neg{color:#b91c1c}
.pp-bz.pp-pos{color:#0f6e56}
.pp-sum{margin-top:4px;font-size:12px;color:#6b7280}
.pp-sum b.pp-neg{color:#b91c1c}
.pp-sum b.pp-pos{color:#0f6e56}
.pp-strip{display:flex;align-items:center;gap:10px;margin-top:6px}
.pp-slabel{font-size:11px;color:#6b7280;white-space:nowrap}
.pp-sbar{display:flex;height:18px;border-radius:4px;overflow:hidden}
.pp-sneg{background:#e24b4a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.pp-spos{background:#1baf7a;color:#04342c;display:flex;align-items:center;justify-content:center;font-size:11px}
.pp-gap{margin-top:10px;background:#fef2f2;border-radius:8px;padding:9px 12px;font-size:12px;color:#b91c1c}
.pp-warn{background:#fffbeb;border-radius:8px;padding:10px 13px;font-size:12px;color:#92400e;margin-top:6px}
/* ⚠️ Прокрутка спільна на всі три шари рядка (v396): картки, вісь і баланси
   мусять їхати разом, інакше баланс опиниться під чужою датою. */
.pp-scroll{overflow-x:auto;overflow-y:visible;padding-bottom:2px}
/* Рядок списку в Плануванні оплат: ліворуч назва й дрібниці, праворуч баланси. */
.srow.pp-row{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.srow.pp-row:hover{background:#f8fafc}
.pp-rowsum{text-align:right;font-size:12px;white-space:nowrap}
.pp-rowsum .pp-sub{color:#6b7280;margin-top:2px}
.pp-rowsum b.pp-neg{color:#b91c1c}
.pp-rowsum b.pp-pos{color:#0f6e56}
/* Підпис рядка в редакторі «значення по агрегатах» (v400): ID агрегата зліва. */
.inl-line-tag{flex:none;min-width:62px;font-size:11px;color:#6b7280;font-variant-numeric:tabular-nums}
/* Підпис рядка може бути назвою культури чи операції — обрізаємо довгі. */
.inl-line-tag{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Часові рамки й підсумки Планування оплат (v404). */
.toolbar.pp-range{margin:-4px 0 12px;gap:6px}
.pp-date.pp-empty{color:#cbd5e1}
.pp-tot{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px}
.pp-tot-row{display:flex;gap:8px;align-items:baseline}
.pp-tot-row span{color:#6b7280}
.pp-tot-row b{font-variant-numeric:tabular-nums}
.pp-tot-row b.pp-neg{color:#b91c1c}
.pp-tot-row b.pp-pos{color:#0f6e56}

/* ---------- Аналітика (v406): звіти списком один під одним ---------- */
.an-list{display:flex;flex-direction:column;gap:10px;max-width:560px}
.an-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:15px;cursor:pointer;transition:border-color .12s,background .12s}
.an-btn:hover{background:#f8fafc;border-color:#cbd5e1}
.an-ic{font-size:20px;flex:none}
.an-l{flex:1}
.an-go{color:#9ca3af;flex:none}

/* ---------- Виконання плану (v407) ---------- */
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1400px}
.pw{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.pw-t{font-size:19px;font-weight:700;margin-bottom:12px}
.pw-unit{font-style:normal;font-size:12px;font-weight:600;color:#6b7280;
         background:#f1f5f9;border-radius:6px;padding:2px 7px;margin-left:8px;vertical-align:2px}
/* Валюта й форма розрахунку — праворуч від суми (v440) */
.pw-u{font-style:normal;font-weight:600;color:#9ca3af;white-space:nowrap}
.pw-val .pw-u{font-size:13px}
.pw-abs .pw-u{font-size:11px}
/* ⚠️⚠️ ЦЕЙ БЛОК БУВ ВТРАЧЕНИЙ У v438 і повернутий у v441. Блокова заміна
   «від .pw-grid до .pw-sw-t» захопила ще й сусідні групи правил — план на
   місяць, поля актів, курс і саму розшифровку, — тож таблиці розшифровки
   лишились без стилів (підсумок злипався з підписом, колонки сум виїжджали).
   Не замінювати діапазони CSS «на око»: звіряти, ЩО саме потрапило всередину. */
/* План на оборот і маржу (v407) */
.pt-table td{padding:6px 8px}
.pt-in{width:130px;padding:5px 8px;border:1px solid var(--line);border-radius:6px}

/* Сума акта виконаних робіт (v408): поля в один рядок із датою й статусом. */
/* Обсяг робіт в акті (v426): вужчий за суму — там 3–4 цифри, не тисячі. */
.act-vol{width:88px}
.act-unit{width:74px}
.act-sum{width:110px}
.act-cur{width:72px}
.act-form{width:150px}
.act-tot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.act-tot span{color:#6b7280}
.act-tot b{font-variant-numeric:tabular-nums}

/* Курс $/грн (v413) */
.usd-now{font-size:22px;margin-bottom:10px}
.usd-now .usd-src{font-size:12px;color:#6b7280;margin-left:8px}
.usd-in{width:120px;padding:6px 10px;border:1px solid var(--line);border-radius:6px}

/* Таблиця курсів по днях (v417) */
.usd-wrap{max-height:52vh;overflow:auto;margin-top:10px}
.usd-table{width:100%;font-size:12px}
.usd-table td,.usd-table th{padding:5px 10px}

/* Розшифровка показників «Виконання плану» (v416, оновлено v438–v441) */
.pd-table{width:100%;font-size:13px}
.pd-table td,.pd-table th{padding:6px 8px;vertical-align:top}
.pd-how{color:#6b7280;white-space:normal}
.pd-sum{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pd-main{font-weight:700;color:#111}
.pd-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.pd-total b{font-variant-numeric:tabular-nums}
.pd-unit{font-style:normal;font-size:11px;font-weight:600;color:#9ca3af;margin-left:6px}
.pd-click{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.pd-click:hover{background:#f1f5f9}
/* ---------- Вибір місяців (v439) ---------- */
.pm-bar{align-items:center;gap:10px}
.pm-year{display:flex;align-items:center;gap:6px}
.pm-y{font-size:14px;min-width:46px;text-align:center}
.pm-chips{display:flex;flex-wrap:wrap;gap:4px}
.pm-chip{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;
         font-size:12px;cursor:pointer;color:#374151}
.pm-chip:hover{background:#f1f5f9}
.pm-chip.has{border-color:#cbd5e1;font-weight:600}
.pm-chip.on{background:#0f6e56;border-color:#0f6e56;color:#fff}
.pm-sel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px}
.pm-tag{border:1px solid #0f6e56;background:#eaf5f1;color:#0f6e56;border-radius:8px;
        padding:3px 8px;font-size:12px;cursor:pointer}
.pm-tag.other{border-color:#b45309;background:#fef3c7;color:#92400e}
.pm-tag i{font-style:normal;opacity:.7;margin-left:4px}
/* Дзеркальний віджет (Маржа): шкала й підписи біля ПРАВОГО краю */
.pw.mirror .pw-vis{flex-direction:row-reverse;padding-right:0;padding-left:70px}
.pw.mirror .pw-arrow{align-items:flex-start}
.pw.mirror .pw-a-line{align-self:flex-start}
.pw.mirror .pw-lab{left:auto;right:104px}
.pw.mirror .pw-leg{padding-left:0;padding-right:112px;justify-content:flex-end}
.pw-plan{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
         padding-bottom:10px;border-bottom:1px solid var(--line)}
.pw-l{font-size:13px;color:#6b7280}
.pw-val{font-size:28px;font-variant-numeric:tabular-nums}
.pw-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
        padding:9px 0;font-size:14px}
.pw-row span:first-child{color:#6b7280;white-space:nowrap}
.pw-row b{font-size:20px;font-variant-numeric:tabular-nums;text-align:right;min-width:78px}
.pw-row b.pw-fact{color:#0f6e56}
/* ⚠️ Потенціал теж ЗЕЛЕНИЙ, лише світліший (v438, вимога користувача): це та
   сама шкала виконання, а синій читався як інша величина. */
.pw-row b.pw-pot{color:#3ea37f}
.pw-abs{font-size:13px;color:#9ca3af;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pw-info{border:1px solid var(--line);background:#fff;border-radius:50%;width:20px;height:20px;
         font-size:12px;line-height:1;cursor:pointer;color:#6b7280;padding:0}
.pw-info:hover{background:#f1f5f9;color:#111}
/* ---------- Шкала під віджетом (v438) ---------- */
.pw-visw{margin-top:16px}
.pw-vis{display:flex;align-items:flex-end;gap:18px;height:210px;padding-right:70px}
.pw-noplan{color:#9ca3af;font-size:13px;align-self:center}
.pw-arrow{display:flex;flex-direction:column;align-items:flex-end;height:100%;min-width:96px}
.pw-a-top{font-size:18px;font-weight:700;color:#334155;font-variant-numeric:tabular-nums}
.pw-a-cap{font-size:12px;color:#9ca3af;margin-bottom:2px}
.pw-a-line{flex:1;position:relative;width:14px;align-self:flex-end}
.pw-a-line::before{content:"";position:absolute;left:6px;top:9px;bottom:0;border-left:2px solid #94a3b8}
.pw-a-head{position:absolute;left:0;top:0;width:0;height:0;
           border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #94a3b8}
.pw-bar{position:relative;width:96px;height:100%;background:#f1f5f9;border-radius:10px;
        border:1px solid var(--line)}
.pw-bar-pot,.pw-bar-fact{position:absolute;left:0;right:0;bottom:0;border-radius:0 0 9px 9px}
.pw-bar-pot{background:rgba(15,110,86,.24)}
.pw-bar-fact{background:#0f6e56}
.pw-lab{position:absolute;left:104px;font-size:13px;font-weight:600;white-space:nowrap;
        transform:translateY(50%);font-variant-numeric:tabular-nums}
.pw-lab-pot{color:#3ea37f}
.pw-lab-fact{color:#0f6e56}
.pw-over{position:absolute;left:0;right:0;top:-18px;text-align:center;font-size:12px;color:#b45309}
.pw-leg{display:flex;gap:18px;font-size:12px;color:#6b7280;margin-top:10px;padding-left:112px}
.pw-leg span{display:flex;align-items:center;gap:6px}
.pw-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.pw-sw-f{background:#0f6e56}
.pw-sw-p{background:rgba(15,110,86,.24)}

/* ---------- Обʼєднані комірки в Моніторингу й угодах (v433) ----------
   Рядок таблиці — одна МАШИНА; комірки замовлення й постачальника накривають
   свої машини через rowspan, як у зведеній таблиці Excel. */
td.cell-span{vertical-align:middle;background:#fbfcfd}
tr.mon-obeg>td{border-top:2px solid #cbd5e1}

/* Статус машини — колір рядка (вимога користувача): «Завершені роботи»
   світло-зелений, «Завершено повністю» темно-зелений. */
table.grid tbody tr.mon-st-done>td{background:#bbf7d0}
table.grid tbody tr.mon-st-done:hover>td{background:#86efac}
table.grid tbody tr.mon-st-full>td{background:#4ade80}
table.grid tbody tr.mon-st-full:hover>td{background:#34d399}

/* ---------- Сповіщення (v476) ---------- */
.bell{position:relative;background:none;border:0;font-size:19px;cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1}
.bell:hover{background:#f1f5f9}
.bell-dot{position:absolute;top:0;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:#dc2626;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.notif-panel{max-height:60vh;overflow:auto}
.notif-item{padding:9px 11px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;cursor:pointer;background:#f8fafc}
.notif-item:hover{background:#eff6ff;border-color:#bfdbfe}
.notif-item.read{opacity:.55}
.notif-item b{display:block;font-size:14px}
.notif-item span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}