/* ---- Палітра «Угоди» узгоджена з фірмовим сайтом компанії
   (dm-prof.trade): тепла паперова основа + темно-синій «кресленик»
   (blueprint) + помаранчевий акцент, той самий, що на сайті. Світла тема —
   це «паперові» секції сайту, темна тема — це його ж темні секції
   (blueprint), тож перемикач теми фактично перемикає між двома реальними
   секціями фірмового сайту, а не вигаданими кольорами. ---- */
:root{
    --page:#F3EFE4; --surface:#FFFFFF; --surface-2:#EAE4D4; --surface-3:#E3DCC8;
    --ink:#12202D; --ink-2:#3D4E5C; --muted:#6E7C88;
    --border:rgba(18,32,45,0.12); --border-strong:rgba(18,32,45,0.22);
    --gridline:#E3DCC8;
    --accent:#FF6A2B; --accent-ink:#FFFFFF; --accent-soft:#FFE3D2; --accent-soft-ink:#B34A1E;
    --good:#2E9B5C; --warning:#FFC145; --serious:#D9642E; --critical:#C1392B;
    --info:#2C6E9E; --stage-teal:#1F8A7A; --stage-rose:#B23A6B; --stage-slate:#5F6F8F;
    /* Етап «Виконується» (b2g, одразу за «Договір підписано») — темніший,
       спокійніший зелений, ніж --good: угоду вже виграно, але робота ще
       триває, тож колір споріднений із «підписано», а не той самий. */
    --stage-moss:#17714A;
    /* Етап «Очікуємо оплати» (b2g, одразу за «Виконується») — теплий
       золотий: роботу зроблено, лишились гроші. Навмисно не --good і не
       --stage-moss: обидва «зелених» етапи вже зайняті, а на дошці ці три
       колонки стоять поруч, і розрізняти їх треба з першого погляду.
       І не --warning (жовтий «щось не так») — тут нічого не горить. */
    --stage-gold:#9A6B12;
    --series-b2g:#FFC145;
    --series-private:#5C4B96;
    --shadow: 0 1px 2px rgba(18,32,45,0.06), 0 8px 24px -12px rgba(18,32,45,0.20);
    /* Чорні написи «zakupivli»/«pro» в значку-логотипі поруч із полем
       ProZorro (zk-logo-text, нижче) — самі зображення завжди чорні, тож у
       темній темі їх «перефарбовуємо» в білий цим CSS-фільтром (invert
       чорного на прозорому фоні = білий на тому самому прозорому фоні,
       без побічних ефектів). У світлій темі фільтр не потрібен. */
    --zk-logo-text-filter: none;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --page:#0E2942; --surface:#123551; --surface-2:#163B5C; --surface-3:#1E4F73;
      --ink:#FFFFFF; --ink-2:#A9C2D6; --muted:#7B93A6;
      --border:rgba(139,190,224,0.14); --border-strong:rgba(139,190,224,0.28);
      --gridline:#1E4F73;
      --accent:#FF6A2B; --accent-ink:#FFFFFF; --accent-soft:rgba(255,106,43,0.20); --accent-soft-ink:#FFC145;
      --good:#3ECB7A; --warning:#FFC145; --serious:#E77A46; --critical:#E2584A;
      --info:#6FA8D9; --stage-teal:#4FCCB8; --stage-rose:#E37FA8; --stage-slate:#A3B1CC;
      --stage-moss:#5BBE8E;
      --stage-gold:#D9A93E;
      --series-b2g:#FFC145;
      --series-private:#8E7BD1;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
      --zk-logo-text-filter: invert(1);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --page:#0E2942; --surface:#123551; --surface-2:#163B5C; --surface-3:#1E4F73;
    --ink:#FFFFFF; --ink-2:#A9C2D6; --muted:#7B93A6;
    --border:rgba(139,190,224,0.14); --border-strong:rgba(139,190,224,0.28);
    --gridline:#1E4F73;
    --accent:#FF6A2B; --accent-ink:#FFFFFF; --accent-soft:rgba(255,106,43,0.20); --accent-soft-ink:#FFC145;
    --good:#3ECB7A; --warning:#FFC145; --serious:#E77A46; --critical:#E2584A;
    --info:#6FA8D9; --stage-teal:#4FCCB8; --stage-rose:#E37FA8; --stage-slate:#A3B1CC;
    --stage-moss:#5BBE8E;
    --stage-gold:#D9A93E;
    --series-b2g:#FFC145;
    --series-private:#8E7BD1;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
    --zk-logo-text-filter: invert(1);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--page); color:var(--ink);
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:14px; line-height:1.45;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:"Manrope", system-ui, sans-serif; font-weight:700; margin:0; text-wrap:balance; letter-spacing:-0.01em;}
  .num, .tabular{ font-variant-numeric: tabular-nums; }
  .mono{ font-family:"JetBrains Mono", ui-monospace, monospace; }
  a{ color: var(--accent); }
  button{ font-family:inherit; font-size:inherit; }
  ::selection{ background: var(--accent-soft); }
  :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

  .app{ display:flex; min-height:100vh; }

  /* ---- Sidebar ----
     Навмисно завжди темно-синя «blueprint»-панель — той самий колір і
     стиль, що й фіксована навігація на dm-prof.trade (rgba(14,41,66)) —
     незалежно від того, світла чи темна тема обрана для решти інтерфейсу.
     Це один впізнаваний фірмовий елемент, а не тема, яку можна перемкнути. */
  .sidebar{
    width:232px; flex:none; background:#0E2942; border-right:1px solid rgba(139,190,224,0.20);
    display:flex; flex-direction:column; padding:20px 14px; gap:22px;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding:0 6px; }
  /* Логотип DM PROF — растрове зображення, вже має власне світле тло і
     заокруглені кути «зашиті» в самому PNG, тож окрема підложка під ним
     не потрібна — контейнер лишається лише для розміру й вирівнювання. */
  .brand-mark{
    width:30px; height:30px; display:flex; align-items:center; justify-content:center; flex:none;
  }
  .brand-mark-img{ width:26px; height:26px; object-fit:contain; display:block; }
  /* Широкий горизонтальний логотип (значок + напис в одному растрі) —
     використовується в сайдбарі замість окремих значка й підписів CRM/розділу.
     При наведенні трохи збільшується (клікабельний — веде на дашборд). */
  .brand-logo-wide{
    height:36px; width:auto; max-width:100%; display:block;
    transform-origin:left center; transition:transform .18s ease;
  }
  .brand:hover .brand-logo-wide{ transform:scale(1.08); }
  @media (prefers-reduced-motion: reduce){
    .brand-logo-wide{ transition:none; }
  }
  /* .brand-name — біле за замовчуванням, бо звичайне місце цього блоку — темна
     навігаційна панель. Але той самий блок ще й на екрані входу, де тло картки
     світле (var(--surface)) — там текст мав ту саму білу заливку й був
     невидимий. Тут прив'язуємо колір до тла картки, а не лишаємо фіксованим. */
  .login-card .brand-name{ color:var(--ink); }
  .brand-name{ font-family:"Manrope"; font-weight:700; font-size:15px; letter-spacing:-0.01em; color:#fff; }
  .brand-sub{ font-size:11px; color:#8FAFC4; margin-top:1px; }

  .nav-group{ display:flex; flex-direction:column; gap:2px; }
  /* Маленька акцентна риска перед підписом групи — той самий «eyebrow»
     прийом, що й перед заголовками секцій на сайті. */
  .nav-label{ display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:#7B93A6; padding:8px 10px 4px; font-weight:600; }
  .nav-label::before{ content:""; width:9px; height:2px; background:var(--accent); flex:none; }
  .nav-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:grab;
    color:#8FAFC4; font-weight:500; border-left:3px solid transparent; user-select:none;
  }
  .nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
  .nav-item.active{ background:#163B5C; border-left-color:var(--accent); color:#fff; font-weight:600; }
  .nav-item .ic{ width:16px; height:16px; flex:none; opacity:0.9; }
  /* Перетягування пунктів меню мишкою для зміни їх порядку (особисто для
     кожного, зберігається в localStorage — див. wireNavReorder() в app.js). */
  .nav-item:active{ cursor:grabbing; }
  .nav-item.dragging{ opacity:0.35; }
  .nav-count{ margin-left:auto; font-size:11px; color:#8FAFC4; font-family:"JetBrains Mono"; }

  .sidebar-foot{ margin-top:auto; padding:10px 6px; font-size:11px; color:#7B93A6; border-top:1px solid rgba(139,190,224,0.20); padding-top:12px; }
  .sync-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); margin-right:6px; }
  .sync-dot.off{ background:#7B93A6; }

  /* ---- Main ---- */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  /* ---- Градієнт і візерунок фону шапки в кольорі розділу ----
     Три шари фону поверх звичайного (напівпрозорого, для розмиття під
     скролом) кольору сторінки, усі керовані --section-accent (див.
     setView() в app.js) — без нього все зводиться до прозорого, тобто
     до попереднього вигляду:
       1) градієнт-підфарбування по діагоналі — легкий відтінок кольору
          розділу у правому нижньому куті;
       2) дрібний крапковий візерунок (той самий колір), що тайлиться по
          всій шапці;
       3) «маска» зліва направо — суцільний колір сторінки, що поступово
          зникає праворуч, аби візерунок і градієнт були помітні лише в
          порожній частині шапки, а не під назвою розділу.
     Останній шар (маска) іде першим у списку — CSS малює перший шар
     зверху. */
  .topbar{
    display:flex; align-items:center; gap:14px; padding:16px 28px; border-bottom:1px solid var(--border);
    position:sticky; top:0; backdrop-filter:blur(6px); z-index:20;
    background-color:color-mix(in srgb, var(--page) 88%, transparent);
    background-image:
      linear-gradient(to left, transparent 0%, color-mix(in srgb, var(--page) 88%, transparent) 62%),
      radial-gradient(circle at center, color-mix(in srgb, var(--section-accent, transparent) 38%, transparent) 1.3px, transparent 1.5px),
      linear-gradient(135deg, transparent, color-mix(in srgb, var(--section-accent, transparent) 16%, transparent));
    background-repeat:no-repeat, repeat, no-repeat;
    background-size:auto, 15px 15px, auto;
  }
  .topbar h1{ font-size:19px; }
  .topbar-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

  /* ---- Кольорові акценти розділів у шапках ----
     Квадратний бейдж-значок у кольорі поточного розділу (Клієнти/Компанії/
     Угоди тощо) — іконка категорії на тонованому фоні, на шапці сторінки і
     на шапках карток (modal-head). Колір задається inline через
     --section-accent на самому бейджі (див. SECTION_ACCENTS/
     sectionBadgeHtml() в app.js) — саме тому бейдж лишається кольоровим,
     навіть якщо modal-head такого атрибута не отримав. Сторінки без
     прив'язки до розділу (наприклад, вибір «Що додати?») просто не мають
     бейджа й виглядають так само, як і раніше. */
  .section-badge{
    width:34px; height:34px; border-radius:9px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--section-accent, var(--surface-3)) 18%, transparent);
  }
  .section-badge .avatar-icon{ width:18px; height:18px; color:var(--section-accent, var(--ink-2)); }
  .section-badge-lg{ width:52px; height:52px; border-radius:14px; }
  .section-badge-lg .avatar-icon{ width:26px; height:26px; }
  .topbar .section-badge{ width:40px; height:40px; border-radius:11px; }
  .topbar .section-badge .avatar-icon{ width:21px; height:21px; }
  /* Аватарка клієнта в шапці картки (з іконкою людини) також бере той
     самий тонований фон, щоб виглядати як частина одної системи бейджів,
     а не окремим стилем. */
  .modal-head .avatar{ background:color-mix(in srgb, var(--section-accent, var(--surface-3)) 18%, transparent); }
  .search{
    margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
    border-radius:8px; padding:7px 10px; width:240px; color:var(--muted);
  }
  .search input{ border:none; outline:none; background:none; color:var(--ink); width:100%; font-size:13px; }
  .search svg{ flex:none; opacity:0.7; }

  .btn{
    display:inline-flex; align-items:center; gap:6px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); padding:8px 13px; font-weight:600; font-size:13px; cursor:pointer;
    transition:transform .06s ease;
  }
  .btn:hover{ background:var(--surface-3); }
  .btn:active{ transform:scale(0.98); }
  /* Головна кнопка-заклик — великі літери й трохи розрідженого трекінгу,
     як CTA-кнопки на сайті ("ЗВ'ЯЗАТИСЬ", "ОБГОВОРИТИ ПРОЄКТ"). Другорядні
     (btn-ghost тощо) лишаються звичайним регістром — це важливо для
     щільних таблиць, де такі кнопки трапляються в кожному рядку. */
  .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); text-transform:uppercase; letter-spacing:0.03em; }
  .btn-primary:hover{ filter:brightness(1.06); background:var(--accent); }
  .btn-ghost{ background:none; border-color:transparent; }
  .btn-ghost:hover{ background:var(--surface-3); }
  .btn-danger{ color:var(--critical); }
  .btn-sm{ padding:5px 9px; font-size:12px; border-radius:7px; }
  /* Кнопки-іконки «Перевести в <воронку>» у підвалі форми угоди
     (dealConvertButtonsHtml): лише іконка + title; після першого кліку
     wireConfirmDelete підставляє текст «Підтвердити?» — тому ширина auto. */
  .deal-convert-btn{ padding:8px 10px; border:1px solid var(--border); color:var(--ink-2); }
  .deal-convert-btn .field-icon{ width:16px; height:16px; color:currentColor; }
  .deal-convert-btn:hover{ color:var(--ink); background:var(--surface-2); }
  /* «Видалити угоду» на картці перегляду — теж лише іконка (кошик), червона. */
  .deal-delete-btn{ color:var(--critical); border-color:color-mix(in srgb, var(--critical) 35%, transparent); }
  .deal-delete-btn:hover{ color:var(--critical); background:color-mix(in srgb, var(--critical) 10%, transparent); }
  .btn[disabled]{ opacity:0.45; cursor:not-allowed; }

  /* «Вибрати файл» у формах імпорту — сам <input type="file"> лишається в
     DOM (і так само реагує на клік/зміну файлу), просто візуально схований
     (стандартний прийом, доступний і для читачів з екрана): видима кнопка —
     звичайний <label for="..."> зі стилем .btn, поруч — назва вибраного
     файлу текстом. */
  .file-picker{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
  .file-picker-name{ font-size:13px; color:var(--muted); }
  .file-picker-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .content{ padding:22px 28px 60px; flex:1; }
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---- Cards / grid ---- */
  .grid{ display:grid; gap:14px; }
  .kpis{ grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); margin-bottom:18px; }
  /* Тонка помаранчево-жовта риска зверху картки, що «виїжджає» зліва при
     наведенні — той самий фірмовий прийом, що на spec-card/logi-card/
     brand-cell сайту dm-prof.trade. */
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow:var(--shadow);
    position:relative; overflow:hidden;
  }
  .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--accent), var(--warning));
    transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  .card:hover::before{ transform:scaleX(1); }
  .kpi .kpi-label{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
  /* Великі числа — вузький «ударний» шрифт Big Shoulders Display, той
     самий, яким на сайті набрано показники «49 000+ клієнтів» тощо. */
  /* Плиток у ряду стало п'ять (додалась «Чекають оплати»), тож велика сума
     на вужчому моніторі перестала вміщатись і перескакувала на другий
     рядок разом зі знаком гривні. Хай краще трохи зменшується — але
     лишається одним рядком. */
  .kpi .kpi-value{
    font-family:"Big Shoulders Display","Manrope",sans-serif;
    font-size:clamp(21px, 2.1vw, 30px); font-weight:800; margin-top:6px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .kpi .kpi-sub{ font-size:12px; color:var(--ink-2); margin-top:4px; }
  .kpi .kpi-sub.good{ color:var(--good); }
  .kpi .kpi-sub.critical{ color:var(--critical); }

  .charts-row{ grid-template-columns: 1.3fr 1fr; align-items:stretch; margin-bottom:14px;}
  .charts-row2{ grid-template-columns: 1fr 1fr; margin-bottom:14px;}
  .panel-title{ font-family:"Manrope"; font-weight:700; font-size:14px; margin-bottom:2px;}
  .panel-sub{ font-size:12px; color:var(--muted); margin-bottom:14px; }

  /* ---- Головна сторінка привітання (відкривається кліком на лого/CRM
     у бічній панелі) — компактний рядок, щоб основний акцент і місце на
     сторінці діставався календарю нижче, а не самому привітанню. ---- */
  .welcome-hero{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 22px; margin-bottom:14px;
    background:linear-gradient(135deg, var(--surface) 55%, var(--accent-soft) 160%);
  }
  .welcome-eyebrow{ font-size:12px; color:var(--muted); letter-spacing:0.02em; font-weight:600; white-space:nowrap; flex:none; }
  .welcome-title{
    font-family:"Big Shoulders Display","Manrope",sans-serif; font-weight:800;
    font-size:21px; line-height:1.2; margin:0; text-wrap:balance;
  }
  .welcome-sub{ font-size:12.5px; color:var(--ink-2); margin-top:2px; }

  .legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; flex:none; }

  /* ---- Календар на «Головній» ---- */
  .calendar-card{ padding:0; overflow:visible; }
  /* .calendar-card свідомо має overflow:visible (не hidden, як у звичайних
     .card) — інакше цей самий overflow:hidden обрізав би скруглені кути в
     ІНШИХ елементів картки. Але через це фірмова помаранчева риска зверху
     (.card::before, звичайно "обрізана" по скругленню самим overflow:hidden
     батька) лишається ГОСТРИМ прямокутником і "вилазить" за скруглені кути
     картки при наведенні. Скруглюємо саму риску — тепер вона повторює форму
     картки незалежно від overflow. */
  .calendar-card::before{ border-radius:12px 12px 0 0; }
  .calendar-wrap{ display:flex; gap:18px; align-items:flex-start; padding:16px; }
  .calendar-sidebar{ width:240px; flex:none; display:flex; flex-direction:column; gap:16px; }
  .calendar-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }

  .mini-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .mini-cal-label{ font-size:12.5px; font-weight:700; font-family:"Manrope"; }
  .mini-cal-nav{
    width:22px; height:22px; border-radius:6px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--ink-2); cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  }
  .mini-cal-nav:hover{ background:var(--surface-3); color:var(--ink); }
  .mini-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; color:var(--muted); font-weight:600; margin-bottom:4px; }
  .mini-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .mini-cal-day{
    position:relative; text-align:center; font-size:11.5px; padding:5px 0; border-radius:6px; cursor:pointer;
    color:var(--ink-2);
  }
  .mini-cal-day:hover{ background:var(--surface-3); }
  .mini-cal-day.dim{ color:var(--muted); opacity:0.55; }
  .mini-cal-day.today{ font-weight:700; color:var(--accent); }
  .mini-cal-day.selected{ background:var(--accent); color:var(--accent-ink); font-weight:700; }
  .mini-cal-day.has-events::after{
    content:""; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
    width:3px; height:3px; border-radius:50%; background:currentColor; opacity:0.7;
  }
  .mini-cal-day.selected.has-events::after{ background:var(--accent-ink); }

  .cal-legend{ margin-top:0; gap:8px; flex-direction:column; }
  /* Пункти легенди календаря — це ще й перемикачі видимості (клік
     ховає/показує події цього типу), тому, на відміну від звичайної
     .legend-item деінде, тут явно показуємо, що це клікабельно. */
  .cal-legend .legend-item{ cursor:pointer; user-select:none; border-radius:6px; padding:3px 4px; margin:-3px -4px; transition:background 0.12s; }
  .cal-legend .legend-item:hover{ background:var(--surface-2); }
  .cal-legend .legend-item-off{ color:var(--muted); opacity:0.55; }
  .cal-legend .legend-item-off .legend-swatch{ opacity:0.35; }

  /* Розкривний пункт «Угоди» — сам рядок лишається звичайним перемикачем
     (клік вмикає/вимикає всі угоди), а стрілочка ▾/▸ праворуч розгортає
     підсписок конкретних етапів ProZorro нижче (CAL_DEAL_STAGE_FILTERS у
     app.js), кожен зі своїм перемикачем видимості. */
  .legend-item-wrap{ display:flex; flex-direction:column; }
  .cal-legend .legend-item-deal{ justify-content:space-between; }
  /* Раніше кнопка розгортання була ледь помітною (10px, приглушений колір
     без фону) — користувач не міг її знайти. Тепер це завжди видимий
     квадратик з фоном, як .icon-btn.website в CRM (не коло — на прохання
     користувача), а сам символ ▾/▸ усередині збільшено, щоб не губився. */
  .legend-expand-btn{
    margin-left:auto; flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; background:var(--surface-3); color:var(--ink-2); font-size:14px; line-height:1;
  }
  .legend-expand-btn:hover{ background:var(--border-strong); color:var(--ink); }
  .legend-subitems{ display:flex; flex-direction:column; gap:2px; margin-top:2px; padding-left:16px; border-left:1px dashed var(--border); margin-left:5px; }
  .cal-legend .legend-subitem{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); cursor:pointer; user-select:none; border-radius:6px; padding:3px 4px; margin:0 -4px; transition:background 0.12s; }
  .cal-legend .legend-subitem:hover{ background:var(--surface-2); }

  .cal-agenda-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin-bottom:8px; }
  .cal-agenda-list{ display:flex; flex-direction:column; gap:2px; }
  .cal-agenda-item{ display:flex; align-items:flex-start; gap:8px; padding:7px 6px; border-radius:8px; cursor:pointer; }
  .cal-agenda-item:hover{ background:var(--surface-2); }
  .cal-agenda-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:4px; }
  .cal-agenda-text{ min-width:0; }
  .cal-agenda-item-title{ font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cal-agenda-item-sub{ font-size:11px; color:var(--muted); margin-top:1px; }

  .calendar-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .calendar-toolbar-left{ display:flex; align-items:center; gap:8px; }
  .calendar-toolbar-right{ display:flex; align-items:center; gap:10px; }
  /* .type-filter (перемикач Місяць/Тиждень/День) — той самий клас, що й
     фільтр над канбаном/списками, де margin-bottom:16px відділяє його від
     контенту нижче. Тут же він сидить у ряд з кнопкою «+ Подія» всередині
     flex-рядка з align-items:center — цей нижній відступ робив його
     margin-box асиметрично вищим знизу, тож flex центрував пігулку не по
     кнопці, а трохи вище неї. Прибираємо відступ лише в цьому контексті. */
  .calendar-toolbar-right .type-filter{ margin-bottom:0; }
  .cal-nav{ padding:5px 10px; font-size:14px; }
  .calendar-range-label{ font-family:"Manrope"; font-weight:700; font-size:14.5px; margin-left:4px; text-wrap:nowrap; }

  /* ---- Місячна сітка ---- */
  .month-grid{ border:1px solid var(--border); border-radius:10px; overflow:hidden; }
  .month-grid-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-2); border-bottom:1px solid var(--border); }
  .month-grid-weekdays > div{ padding:7px 0; text-align:center; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); }
  /* Фіксовані 92px, а не 1fr і не minmax(92px, auto): з 1fr браузер
     розтягував УСІ рядки під найвищий навіть у порожні тижні (стара
     проблема), а з minmax(...,auto) кожен тиждень підлаштовувався під
     свій вміст — але тоді тиждень із довгими назвами подій ставав вищим за
     сусідні, і сітка «стрибала». Тепер висота рядка завжди 92px незалежно
     від кількості/довжини подій: чипи, що не влазять, ховаються під «+N
     ще» (як і раніше), а повну назву й деталі показує підказка при наведенні
     курсора (див. calChipTooltipHtml у app.js) — інформація не губиться,
     просто не розпирає клітинку. */
  .month-grid-cells{ display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:92px; align-content:start; }
  .month-cell{
    height:92px; overflow:hidden; padding:6px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:background .12s;
  }
  .month-cell:hover{ background:var(--surface-2); }
  .month-cell:nth-child(7n){ border-right:none; }
  .month-cell.dim{ background:var(--page); color:var(--muted); }
  .month-cell.dim .month-cell-date{ color:var(--muted); opacity:0.6; }
  .month-cell-date{ font-size:12px; font-weight:600; color:var(--ink-2); }
  .month-cell.today .month-cell-date{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
    background:var(--accent); color:var(--accent-ink);
  }
  .month-cell-events{ display:flex; flex-direction:column; gap:2px; }

  .cal-chip{
    font-size:11px; padding:2px 6px; border-radius:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    /* Фон — «сирий» колір етапу (--chip-bg-color, той самий, що й фон
       бейджа канбану), а не приглушений --chip-color: інакше для «Прийом
       пропозицій» фон виходив тьмяно-бурим замість жовтого. */
    background:color-mix(in srgb, var(--chip-bg-color, var(--chip-color)) 16%, transparent); color:var(--chip-color); cursor:pointer; font-weight:600;
  }
  .cal-chip:hover{ filter:brightness(0.95); }
  .cal-chip-time{ font-family:"JetBrains Mono"; font-weight:600; margin-right:4px; opacity:0.85; }
  .cal-chip-more{ font-size:10.5px; color:var(--muted); font-weight:600; cursor:pointer; padding:1px 6px; }
  .cal-chip-more:hover{ color:var(--ink); text-decoration:underline; }

  /* ---- Часова сітка (тиждень/день) ----
     Показуємо всі 24 години, але не розтягуємо картку на всю їх висоту —
     .time-grid сам стає прокручуваним (overflow-y:auto + max-height), а
     «шапка» дня й рядок «Увесь день» лишаються на місці під час прокрутки
     завдяки position:sticky (кожна комірка — свій липкий елемент; оскільки
     й гутер, і колонки днів прокручуються РАЗОМ як одна флекс-стрічка,
     ширини комірок не розходяться, на відміну від окремих прокручуваних
     рядків). */
  /* align-items:flex-start (не стандартний stretch!) — інакше flex
     розтягує .time-gutter/.time-columns не до їхньої природної висоти
     контенту (1200px+ на 24 години), а до видимої (обмеженої max-height)
     висоти самого .time-grid. Через це "контейнер" для position:sticky
     виходить лише ~560px замість повної висоти доби, і липка шапка дня
     від'єднується від верху вже після ~500px прокрутки. */
  .time-grid{ display:flex; align-items:flex-start; border:1px solid var(--border); border-radius:10px; overflow-x:hidden; overflow-y:auto; max-height:560px; }
  .time-gutter{ width:52px; flex:none; border-right:1px solid var(--border); background:var(--surface-2); }
  .time-gutter-head{ height:44px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:6; background:var(--surface-2); }
  /* min-height (не height) і те саме padding/box-sizing, що в .time-col-allday
     — інакше «Увесь день» переносився на 2 рядки у вузькому гутері й робив
     цю клітинку вищою за порожню клітинку дня, зсуваючи всю годинну сітку
     відносно підписів годин (рівно на цю різницю). Однакова база тепер,
     а розбіжність через кілька подій «на весь день» вирівнює JS (див.
     syncTimeGridAllDayHeights). Власний background і z-index обов'язкові —
     інакше під час прокрутки крізь «липкий» рядок просвічують години, що
     виїжджають з-під нього (в DOM вони йдуть пізніше, тож малюються зверху). */
  .time-gutter-allday{
    box-sizing:border-box; min-height:22px; display:flex; align-items:center; justify-content:center;
    font-size:9.5px; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); font-weight:700;
    padding:2px 4px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    position:sticky; top:44px; z-index:5; background:var(--surface-2);
  }
  .time-gutter-hours{ position:relative; }
  /* Без transform:translateY — раніше мітку зсували на -6px вгору, щоб
     «на око» компенсувати лінію, яка стояла знизу свого блоку (border-bottom).
     Тепер лінія стоїть зверху блоку (border-top, див. .time-row), тож підпис
     має лишатись на природному місці — інакше сам зсув знову ламає вирівнювання. */
  .time-hour-label{ height:48px; font-size:10.5px; color:var(--muted); text-align:right; padding-right:6px; padding-top:1px; box-sizing:border-box; }
  .time-columns{ flex:1; display:flex; min-width:0; }
  .time-col{ flex:1; min-width:0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
  .time-col:last-child{ border-right:none; }
  .time-col-head{ height:44px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:6; background:var(--surface); }
  .time-col-head.today .time-col-date{ color:var(--accent); }
  .time-col-weekday{ font-size:9.5px; text-transform:uppercase; color:var(--muted); font-weight:700; }
  .time-col-date{ font-size:14px; font-weight:700; font-family:"Manrope"; }
  .time-col-allday{ min-height:22px; border-bottom:1px solid var(--border); padding:2px 4px; display:flex; flex-direction:column; gap:2px; position:sticky; top:44px; z-index:5; background:var(--surface); }
  .time-col-grid{ position:relative; flex:1; cursor:pointer; }
  /* Підказка під час перетягування на порожньому місці годинної сітки —
     створення нової події «як в Outlook»: тягнеш і одразу бачиш, на який
     час підпаде подія. */
  .time-drag-preview{
    position:absolute; left:2px; right:2px; z-index:4; pointer-events:none;
    background:color-mix(in srgb, var(--accent) 28%, transparent); border:1.5px dashed var(--accent);
    border-radius:6px; font-size:10.5px; font-weight:700; color:var(--accent-soft-ink); padding:2px 6px;
  }
  /* border-top, а не border-bottom: підпис години стоїть на ПОЧАТКУ свого
     48px-блоку (мітка «03:00» вгорі), тож і пунктирна лінія має бути там
     же — інакше лінія опинялась унизу блоку, візуально навпроти НАСТУПНОЇ
     години, а не тієї, що написана поруч. */
  .time-row{ height:48px; border-top:1px dashed var(--border); }
  .time-event{
    position:absolute; border-radius:6px; padding:3px 6px; overflow:hidden;
    /* Фон і рамка — «сирий» колір етапу (--chip-bg-color), той самий, що
       й фон/рамка бейджа канбану; текст (.time-event-title нижче) — з
       підміною для читабельності (--chip-color). */
    background:color-mix(in srgb, var(--chip-bg-color, var(--chip-color)) 18%, transparent); border-left:3px solid var(--chip-bg-color, var(--chip-color));
    cursor:pointer; display:flex; flex-direction:column; gap:1px; z-index:1;
    /* min-height у px, а не в % висоти рахунку JS — інакше "мінімум" для
       короткої події довелось би рахувати як частку від усієї доби, що для
       15-хвилинної події вже давало майже цілу годину висоти (див. app.js). */
    min-height:16px;
  }
  .time-event:hover{ filter:brightness(0.96); z-index:2; }
  .time-event-title{ font-size:11px; font-weight:700; color:var(--chip-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .time-event-time{ font-size:10px; color:var(--chip-color); opacity:0.85; font-family:"JetBrains Mono"; }
  .time-now-line{ position:absolute; left:0; right:0; height:2px; background:var(--critical); z-index:3; }
  .time-now-line::before{
    content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--critical);
  }
  /* Підпис поточного часу зліва від лінії, у гутері з годинами — той самий
     прийом, що в Outlook: щоб було видно не лише «де зараз», а й котра
     саме година. */
  .time-now-label{
    position:absolute; right:6px; transform:translateY(-50%); z-index:1;
    font-size:10.5px; font-weight:700; color:var(--critical); font-family:"JetBrains Mono"; white-space:nowrap;
    background:var(--surface-2); padding:0 3px; border-radius:3px;
  }

  @media (max-width:960px){
    .calendar-wrap{ flex-direction:column; }
    .calendar-sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; }
    .mini-cal{ flex:1; min-width:220px; }
    .cal-agenda{ flex:1; min-width:220px; }
  }

  .tooltip{
    position:fixed; pointer-events:none; background:var(--ink); color:var(--page); font-size:12px;
    padding:6px 9px; border-radius:7px; z-index:200; opacity:0; transition:opacity .08s ease; transform:translate(-50%,-100%);
    white-space:nowrap; box-shadow:var(--shadow); line-height:1.4;
  }
  :root[data-theme="dark"] .tooltip, @media (prefers-color-scheme:dark){ .tooltip{} }
  .tooltip.show{ opacity:1; }
  .tooltip b{ font-family:"JetBrains Mono"; font-weight:500; }
  /* Розширений варіант — для підказки по чипу події в місячній сітці:
     звичайний .tooltip розрахований на короткий однорядковий текст
     (white-space:nowrap), а тут може бути назва + час + нотатки, тож
     дозволяємо перенос рядків і обмежуємо ширину. */
  .tooltip.tooltip-wide{ white-space:normal; max-width:240px; }
  .tooltip-title{ font-weight:700; margin-bottom:2px; }
  .tooltip-sub{ opacity:0.75; font-size:11px; }
  .tooltip-notes{ margin-top:4px; opacity:0.85; font-size:11px; }

  /* ---- Table ---- */
  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; padding:9px 10px; border-bottom:1px solid var(--border); position:relative; }
  td{ padding:11px 10px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
  tbody tr{ cursor:pointer; }
  tbody tr:hover{ background:var(--surface-2); }
  .table-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);}
  .table-wrap table{ min-width:640px; }
  /* Маркер зміни ширини стовпця (initResizableTable() в app.js) — на
     прохання користувача «всюди де таблиці зробити можливість змінювати
     ширину стовпця». Сидить на межі колонки (право/ліво по половині своєї
     ширини за межу <th>), а не всередині неї, щоб не з'їдати місце під
     текст заголовка. Сама лінія показується лише при наведенні/перетягуванні
     — у стані спокою маркер непомітний, як і очікується від таких таблиць. */
  .col-resize-handle{
    position:absolute; top:0; right:0; bottom:0; width:10px; transform:translateX(50%);
    cursor:col-resize; z-index:3; touch-action:none;
  }
  .col-resize-handle::after{
    content:""; position:absolute; top:15%; bottom:15%; left:50%; width:2px; transform:translateX(-50%);
    background:transparent; border-radius:2px; transition:background 0.12s;
  }
  .col-resize-handle:hover::after, .col-resize-handle.active::after{ background:var(--accent); }
  /* Під час самого перетягування — курсор col-resize над усією сторінкою
     (не лише над маркером, бо миша під час drag часто виходить за його
     межі) і заборона виділення тексту, щоб не "зачепити" заголовки чи
     клітинки поруч. */
  body.col-resizing, body.col-resizing *{ cursor:col-resize !important; user-select:none !important; }

  .pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:600; border:1px solid transparent; }
  .pill-good{ background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }
  .pill-warning{ background:color-mix(in srgb, var(--warning) 20%, transparent); color:var(--accent-soft-ink); }
  .pill-critical{ background:color-mix(in srgb, var(--critical) 16%, transparent); color:var(--critical); }
  .pill-muted{ background:var(--surface-3); color:var(--ink-2); }
  .pill-tender{ background:color-mix(in srgb, var(--serious) 16%, transparent); color:var(--serious); }

  /* Редагований етап угоди в таблиці (Угоди → Таблиця) — той самий вигляд
     пілюлі, що й раніше (статичний <span class="pill">), лише тепер зверху
     невидимий <select> (opacity:0, займає весь пілюль) для самої взаємодії
     (клік будь-де по пілюлі відкриває нативний список етапів), а видимий
     текст+стрілочка — окремі <span> поруч, що успадковують колір з
     inline-style пілюлі (той самий колір, що й у статичному варіанті).
     Такий підхід — щоб не боротися з різним системним виглядом <select>
     у різних браузерах/ОС (кольори/рамки нативного select важко
     перевизначити через CSS так само надійно, як прості <span>). */
  .pill-select-wrap{ position:relative; padding-right:22px; }
  .pill-select-wrap .pill-select-arrow{ position:absolute; right:7px; top:50%; transform:translateY(-50%); width:10px; height:10px; pointer-events:none; opacity:0.8; display:flex; }
  .pill-select-wrap .pill-select-arrow svg{ width:10px; height:10px; }
  .pill-select-wrap select.pill-select{
    position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
    opacity:0; border:none; background:none; cursor:pointer;
  }
  .pill-select-wrap:hover{ filter:brightness(0.96); }
  /* Стрілки ‹ › обабіч пілюлі етапу в картці угоди (dealStageStepperHtml). */
  .deal-stage-stepper{ display:inline-flex; align-items:center; gap:4px; }
  .deal-stage-step-btn{
    width:22px; height:22px; padding:0; border-radius:6px; border:1px solid var(--border);
    background:var(--surface-2); color:var(--ink-2); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; flex:none;
  }
  .deal-stage-step-btn svg{ width:12px; height:12px; flex:none; }
  .deal-stage-step-btn:hover:not(:disabled){ filter:brightness(0.94); }
  .deal-stage-step-btn:disabled{ opacity:.35; cursor:default; }
  /* Стрілка з назвою сусіднього етапу — нейтральна сіра (без кольору
     етапу), щоб активна пілюля посередині лишалась єдиною кольоровою. */
  .deal-stage-step-btn.has-label{
    width:auto; height:auto; padding:3px 8px; gap:3px; border-radius:99px; border-color:transparent;
    background:var(--surface-3); color:var(--muted);
    font-size:11px; font-weight:600; font-family:inherit; line-height:1.4;
  }
  .deal-stage-step-btn.has-label:hover:not(:disabled){ color:var(--ink-2); filter:none; background:color-mix(in srgb, var(--ink) 12%, var(--surface-3)); }
  .deal-stage-step-label{ white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
  .pill-select-wrap:has(select:focus){ outline:2px solid var(--accent); outline-offset:1px; }
  .pill-select-wrap:has(select:disabled){ opacity:0.6; }
  .pill-select-wrap select.pill-select:disabled{ cursor:wait; }


  .avatar{
    width:30px;height:30px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;
    font-family:"Manrope"; font-weight:700; font-size:12px; color:var(--ink-2); flex:none;
  }
  .avatar-lg{ width:52px; height:52px; border-radius:14px; font-size:18px; }
  .avatar-icon{ width:16px; height:16px; color:var(--ink-2); }
  .avatar-lg .avatar-icon{ width:26px; height:26px; }
  /* Фото клієнта / логотип компанії замість іконки (entityAvatarHtml в
     app.js): та сама рамка й заокруглення, картинка заповнює її цілком
     (файл уже квадратний 512×512 — сервер обрізає фото людини по центру,
     а логотип вписує на біле тло). */
  img.avatar-photo{ object-fit:cover; background:#fff; border:1px solid var(--border); padding:0; }
  /* Аватарка-іконка в шапці картки (наприклад, у картці клієнта) бере
     колір розділу замість нейтрального --ink-2, коли той заданий — той
     самий --section-accent, що й фон бейджа/аватарки вище. */
  .modal-head .avatar-icon{ color:var(--section-accent, var(--ink-2)); }

  /* Аватарка КОРИСТУВАЧА CRM (не компанії/клієнта — тому кругла, а не
     заокруглений квадрат, як .avatar вище): фото профілю або кольорові
     ініціали, той самий стиль, що й у відправників листів у Пошті. */
  .user-avatar{
    width:26px; height:26px; border-radius:50%; flex:none; object-fit:cover;
    color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em;
    display:flex; align-items:center; justify-content:center;
  }
  .user-avatar-lg{ width:64px; height:64px; font-size:22px; }
  /* Компактний розмір — фото менеджера поруч з іменем у картках угод,
     таблиці клієнтів, комбобоксі менеджера тощо (де 26px замало міняти
     висоту рядка/картки). */
  .user-avatar-sm{ width:18px; height:18px; font-size:8px; }
  .user-chip-avatar{ display:flex; }
  .avatar-upload{ display:flex; align-items:center; gap:14px; }
  .avatar-upload-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .avatar-upload-actions .row-sub{ width:100%; margin-top:2px; }

  .row-main{ display:flex; align-items:center; gap:10px; }
  .row-title{ font-weight:600; }
  .row-sub{ font-size:12px; color:var(--muted); }

  /* ---- Картка клієнта (перегляд) ---- */
  .contact-field{ display:flex; flex-direction:column; gap:6px; }
  .contact-field-label{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); min-height:20px; }
  /* Кнопка в підписі поля («+20%» біля «Сума продажу з ПДВ») — не вища за
     сам підпис, інакше поле з кнопкою опускається нижче сусіднього без неї
     і два поля в одному рядку стоять нерівно. */
  .contact-field-label .btn-sm{ padding:0 8px; height:20px; line-height:20px; font-size:11.5px; text-transform:none; letter-spacing:0; }
  /* Той самий випадок для поля форми: підпис із кнопкою (.field-label-line) */
  .field .field-label-line{ min-height:20px; }
  /* Поля в рядку вирівнюються по НИЖНЬОМУ краю — щоб самі поля вводу
     стояли на одній лінії навіть тоді, коли в підпису одного з них є
     кнопка («+ Додати нову компанію», «+20%») і він на кілька пікселів
     вищий за сусідній. */
  .field-row > .contact-field, .field-row > .field{ align-self:end; }
  /* …але підказка ПІД полем (наприклад «+ ТТН Нової пошти: 80,00 ₴» під
     витратами на логістику) до цього правила не належить: доки вона жила
     всередині свого поля, вона робила колонку вищою — і сусідні
     «Додаткові витрати», вирівняні по низу, з'їжджали рівно на її висоту.
     Тому такі підказки виносяться окремим елементом на ВСЮ ширину рядка:
     жодна колонка від них не росте, а сама підказка стоїть просто під
     своїм полем, як і має. */
  .field-row > .field-row-note{ grid-column:1 / -1; margin-top:-2px; }
  /* Підпис поля «Посилання на ТТХ» (картка угоди) — сам підпис одразу є
     посиланням, коли воно вказане (без окремого значка-кнопки нижче): та
     сама типографіка, що й у звичайного .contact-field-label, лише з
     курсором-рукою й підкресленням при наведенні, щоб було зрозуміло, що
     це клікабельний текст, а не просто підпис поля. */
  .contact-field-label-link{ color:inherit; text-decoration:none; }
  .contact-field-label-link:hover{ color:var(--accent); text-decoration:underline; }
  .contact-field-value{ font-size:14px; }
  .contact-link{ color:var(--info); text-decoration:none; font-weight:600; }
  .contact-link:hover{ text-decoration:underline; }

  /* ---- Клікабельне ім'я менеджера (managerChipHtml) — скрізь, де в CRM
     показують ім'я менеджера з обліковим записом: клік відкриває спливне
     меню дзвінка/месенджерів (manager-contact-popover нижче). ---- */
  .manager-chip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:6px; padding:1px 4px; margin:-1px -4px; }
  .manager-chip:hover{ background:var(--surface-2); }
  .manager-contact-popover{
    position:fixed; z-index:120; min-width:220px; max-width:280px; background:var(--surface);
    border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:12px;
    display:flex; flex-direction:column; gap:6px; animation:chat-ctx-pop .12s ease-out;
  }
  @media (prefers-reduced-motion: reduce){ .manager-contact-popover{ animation:none; } }
  .manager-contact-popover-name{ font-weight:700; font-size:13px; margin-bottom:2px; }
  .contact-phone-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .msg-row{ display:flex; align-items:center; gap:8px; margin-top:2px; }
  .icon-btn{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; flex:none; text-decoration:none; transition:opacity .15s;
  }
  /* Власний display:flex вище переважив би дефолтний [hidden]{display:none}
     браузера (та сама специфічність — клас проти атрибута, — і наше
     правило йде пізніше в каскаді), тож для будь-якого icon-btn, який десь
     ховають/показують через el.hidden у JS, потрібне явне перевизначення
     тут — той самий підхід, що й .split-btn-menu[hidden]/.notif-menu[hidden]
     нижче (і .zakupivli-link-icon[hidden] далі — той самий клас гачок). */
  .icon-btn[hidden]{ display:none; }
  .icon-btn:hover{ opacity:0.85; }
  .icon-btn svg{ width:15px; height:15px; }
  .icon-btn.call{ background:var(--ink-2); }
  .icon-btn.telegram{ background:#26A5E4; }
  .icon-btn.whatsapp{ background:#25D366; }
  .icon-btn.viber{ background:#7360F2; }
  /* Значок сайту — навмисно нейтральний (не кольоровий гурток, як
     дзвінок/месенджери): світлий квадратик із приглушеною сірою іконкою,
     той самий стиль, що й у значків-аватарок компанії/клієнта. */
  .icon-btn.website{ background:var(--surface-3); color:var(--ink-2); border-radius:8px; }
  .icon-btn.website:hover{ background:var(--surface-2); opacity:1; color:var(--ink); }
  /* Компактний варіант — напр. значок сайту поруч із назвою компанії в
     заголовку картки, де повнорозмірна (30px) кнопка була б задовеликою. */
  .icon-btn.icon-btn-sm{ width:22px; height:22px; }
  .icon-btn.icon-btn-sm svg{ width:12px; height:12px; }

  /* Значок-логотип zakupivli.pro праворуч у підписі поля «ID закупівлі
     ProZorro» (prozorroIdFieldHtml в app.js) — не узагальнена іконка-кнопка
     (.icon-btn), а сам логотип сайту, тож без круглої кольорової
     «підкладки»: просто зображення з відступом зліва, притиснуте до
     правого краю підпису. Видимість/href перераховує наживо wireDealModal
     у app.js через el.hidden — тому й тут те саме явне [hidden]
     перевизначення, що й для .icon-btn вище.
     Логотип розрізаний на 3 PNG в один ряд (zk-logo-text «zakupivli»,
     zk-logo-mark — зелений значок, zk-logo-text «pro») саме для того, щоб
     у темній темі можна було перефарбувати ЛИШЕ чорні написи в білий
     (--zk-logo-text-filter, визначено разом з рештою кольорових токенів
     вище) — не займаючи зелений значок посередині. */
  .zakupivli-link-icon{
    display:inline-flex; align-items:center; margin-left:auto; padding:2px 4px;
    border-radius:6px; transition:background .15s;
  }
  .zakupivli-link-icon[hidden]{ display:none; }
  .zakupivli-link-icon:hover{ background:var(--surface-3); }
  .zakupivli-link-icon img{ height:13px; width:auto; display:block; }
  .zakupivli-link-icon .zk-logo-text{ filter:var(--zk-logo-text-filter); }
  /* SmartTender поруч із zakupivli.pro: два PNG (темно-синій напис для
     світлої теми, світло-синій — для темної), показуємо той, що пасує темі;
     margin-left:auto зайвий — значок стає одразу за zakupivli.pro. */
  .smarttender-link-icon{ margin-left:2px; }
  .smarttender-link-icon img{ height:12px; }
  .smarttender-link-icon .st-logo-dark{ display:none; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .smarttender-link-icon .st-logo-light{ display:none; }
    :root:not([data-theme="light"]) .smarttender-link-icon .st-logo-dark{ display:block; }
  }
  :root[data-theme="dark"] .smarttender-link-icon .st-logo-light{ display:none; }
  :root[data-theme="dark"] .smarttender-link-icon .st-logo-dark{ display:block; }

  /* Кнопка «копіювати» біля телефону/email/адреси в картці клієнта —
     нейтральна іконка-кнопка, що з'являється чіткіше на ховері/фокусі. */
  .copy-btn{
    width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center;
    border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer;
    padding:0; transition:background .15s, color .15s;
  }
  .copy-btn svg{ width:14px; height:14px; }
  .copy-btn:hover, .copy-btn:focus-visible{ background:var(--surface-3); color:var(--ink); }

  /* Клік ПРЯМО НА ТЕКСТІ для копіювання (ім'я/посада в шапці клієнта,
     назва/ЄДРПОУ в шапці компанії тощо) — без окремої кнопки-іконки: сам
     текст трохи «підсвічується» на ховері, щоб було зрозуміло, що він
     клікабельний. Від'ємні margin/padding — щоб підсвітка щільно облягала
     сам текст, а не всю ширину рядка заголовка. */
  .copy-click{
    cursor:pointer; width:fit-content; max-width:100%; border-radius:5px;
    padding:1px 5px; margin:-1px -5px; transition:background .12s;
  }
  .copy-click:hover{ background:var(--surface-3); }
  .copy-click:active{ background:var(--surface-2); }

  /* ---- Панель фільтрів списків (Компанії/Постачальники/Клієнти/Товари/
     Замовлення) — прихована за замовчуванням, розкривається кнопкою з
     іконкою повзунків біля кнопки «+ Додати». Поля в панелі стосуються
     конкретних полів запису цього розділу (ім'я, телефон, менеджер тощо),
     окремо від глобального швидкого пошуку в шапці. ---- */
  .list-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  /* Роздільна кнопка «+ Додати ▾» — головна дія зліва (створити запис),
     стрілка справа відкриває меню з додатковими діями над усім списком
     (поки що єдиний пункт — «Імпорт … з файлу»). Той самий колір/стиль,
     що й звичайна .btn-primary, просто розрізана вертикальною лінією. */
  .split-btn{ position:relative; display:inline-flex; align-items:stretch; }
  .split-btn .split-btn-main{ border-top-right-radius:0; border-bottom-right-radius:0; }
  .split-btn .split-btn-toggle{
    border-top-left-radius:0; border-bottom-left-radius:0; padding:8px 10px;
    border-left:1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);
  }
  .split-btn .split-btn-toggle svg{ width:14px; height:14px; }
  .split-btn-menu{
    position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:230px;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.14); padding:6px;
  }
  .split-btn-menu[hidden]{ display:none; }
  .split-btn-menu-item{
    display:block; width:100%; text-align:left; background:none; border:none; border-radius:7px;
    padding:9px 10px; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer;
  }
  .split-btn-menu-item:hover{ background:var(--surface-3); }
  /* Спадне меню фільтра за менеджером з фото (managerFilterMenuHtml в
     app.js) — спільне для Календаря, тулбару Угод і панелі фільтрів
     Клієнтів: той самий .split-btn/.split-btn-menu каркас, що й вище, лише
     одна кнопка-тригер (без другої "головної" дії поруч) і пункти меню з
     фото менеджера та галочкою на поточному виборі — на прохання
     користувача («всюди де є фільтр по менеджерам — фото»). */
  .manager-filter-btn{ display:inline-flex; align-items:center; gap:7px; }
  .manager-filter-avatar{ display:flex; flex:none; }
  .manager-filter-allicon{ width:18px; height:18px; border-radius:50%; background:var(--surface-3); color:var(--muted); display:flex; align-items:center; justify-content:center; }
  .manager-filter-allicon svg{ width:11px; height:11px; }
  .manager-filter-btn > svg{ width:14px; height:14px; flex:none; opacity:0.6; }
  .manager-filter-menu{ max-height:320px; overflow-y:auto; }
  .manager-filter-item{ display:flex; align-items:center; gap:8px; }
  .manager-filter-item-check{ width:14px; height:14px; flex:none; color:var(--accent); display:flex; }
  .manager-filter-item-check svg{ width:14px; height:14px; }
  .manager-filter-item-avatar{ display:flex; flex:none; }
  .manager-filter-item-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* У тулбарі Угод — у тому ж ряду, що й .type-filter; кнопка з рамкою, як
     раніше виглядав <select>, а меню відкривається під лівим краєм. */
  .deal-manager-filter .manager-filter-btn{ border:1px solid var(--border-strong); background:var(--page); font-weight:600; font-size:12.5px; }
  .deal-manager-filter .split-btn-menu, .filter-manager-menu .split-btn-menu{ right:auto; left:0; }
  /* Той самий фільтр над списками Компанії/Постачальники/Клієнти
     (listManagerFilterHtml) — вигляд як у звичайних кнопок .list-toolbar
     («Фільтри», «Обрати стовпчики»), тобто без btn-sm-зменшення. */
  .list-manager-filter .manager-filter-btn{ font-size:13px; padding:8px 13px; border-radius:8px; }
  .list-toolbar .suppliers-view-toggle{ margin-bottom:0; }

  /* ---- Каталог брендів-партнерів (розділ «Постачальники» → «Бренди»,
     renderBrandCatalog в app.js): групи за категоріями, у кожній — плитка
     з логотипами, як «Бренди-партнери» на сайті dm-prof.trade. ---- */
  .brand-catalog{ display:flex; flex-direction:column; gap:26px; }
  .brand-group-title{
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
  }
  .brand-group-title::after{ content:""; flex:1; height:1px; background:var(--border); }
  .brand-group-count{ color:var(--muted); font-weight:600; letter-spacing:0; }
  .brand-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  /* Плитка навмисно темна (як на сайті): логотипи брендів з сайту — білі
     на прозорому тлі, на світлій картці їх би не було видно. */
  .brand-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    min-height:118px; padding:14px 12px 10px; border:1px solid #23406a; border-radius:12px;
    background:#132a45; color:#fff; cursor:pointer; text-align:center; font:inherit;
    transition:border-color .12s, box-shadow .12s, transform .12s;
  }
  .brand-tile:hover{ border-color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-1px); }
  .brand-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .brand-tile-logo{ width:100%; height:56px; display:flex; align-items:center; justify-content:center; }
  .brand-tile-logo img{ max-width:100%; max-height:56px; object-fit:contain; }
  .brand-tile-text{ font-family:"Manrope"; font-weight:800; font-size:17px; letter-spacing:0.02em; text-transform:uppercase; line-height:1.15; color:#fff; word-break:break-word; }
  .brand-tile-name{ font-size:12px; color:rgba(255,255,255,.62); line-height:1.2; }
  .brand-chip{ font-weight:600; }
  img.avatar-brand, .modal-head img.avatar-brand{ object-fit:contain; background:#132a45; border-color:#132a45; padding:4px; }
  /* Фільтр за статусом закупівлі ProZorro (pzStatusFilterMenuHtml) — кружечок
     кольору статусу замість фото. */
  .pz-filter-dot{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
  .manager-filter-avatar .pz-filter-dot, .manager-filter-item-avatar .pz-filter-dot{ margin:0 4px; }
  /* У панелі фільтрів Клієнтів — на всю ширину поля, як сусідні input/select. */
  .filter-manager-menu{ display:block; }
  .filter-manager-menu .manager-filter-btn{ width:100%; justify-content:flex-start; border:1px solid var(--border-strong); background:var(--page); font-size:13px; font-weight:500; padding:6px 9px; }
  .filter-manager-menu .manager-filter-label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
  /* ---- Дзвіночок сповіщень у шапці ----
     Той самий "приховане меню під кнопкою" підхід, що й .split-btn-menu
     вище, тільки з бейджем-лічильником поверх іконки (абсолютне
     позиціювання в кутку кнопки — на відміну від .nav-count, який
     розрахований на вбудоване positioning поряд з підписом пункту меню). */
  .notif-bell-wrap{ position:relative; }
  .notif-bell-btn{ position:relative; }
  .notif-badge{
    position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; background:var(--critical); color:#fff; font-size:10px; font-weight:700;
    font-family:"JetBrains Mono"; line-height:16px; text-align:center; pointer-events:none;
  }
  .notif-badge:empty{ display:none; }
  .notif-menu{
    position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:360px;
    max-width:calc(100vw - 32px); max-height:70vh; overflow-y:auto;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.16);
  }
  .notif-menu[hidden]{ display:none; }
  .notif-menu-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--surface); border-radius:12px 12px 0 0;
  }
  .notif-menu-head h4{ margin:0; font-size:14px; }
  .notif-mark-all{ background:none; border:none; color:var(--info); font-size:12px; font-weight:600; cursor:pointer; padding:0; white-space:nowrap; }
  .notif-mark-all:hover{ text-decoration:underline; }
  .notif-mark-all:disabled{ opacity:.5; cursor:default; text-decoration:none; }
  .notif-list{ padding:6px; }
  .notif-item{ display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:9px; cursor:pointer; position:relative; }
  .notif-item:hover{ background:var(--surface-3); }
  .notif-item-icon{
    width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    flex:none; background:var(--surface-2); color:var(--ink-2);
  }
  .notif-item-icon svg{ width:16px; height:16px; }
  .notif-item-icon.is-critical{ background:color-mix(in srgb, var(--critical) 16%, transparent); color:var(--critical); }
  .notif-item-icon.is-warning{ background:color-mix(in srgb, var(--warning) 24%, transparent); color:var(--serious); }
  .notif-item-body{ flex:1; min-width:0; }
  .notif-item-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .notif-item-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
  .notif-item-time{ font-size:11px; color:var(--muted); margin-top:3px; font-family:"JetBrains Mono"; }
  .notif-item-dot{ position:absolute; top:14px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
  .notif-item.is-read .notif-item-title{ font-weight:500; color:var(--ink-2); }
  .notif-empty{ padding:30px 16px; text-align:center; color:var(--muted); font-size:13px; }
  /* ---- Групові дії над вибраними рядками списку (прапорці зліва в
     таблиці) — панель з'являється над таблицею, лише коли вибрано хоча б
     один рядок. Окрема від .list-toolbar (та завжди на місці, з кнопками
     "+ Додати"/фільтр/експорт/імпорт) — щоб не плутати два різні набори дій. ---- */
  .bulk-toolbar{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:12px; padding:10px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  }
  .bulk-toolbar .bulk-count{ font-weight:600; }
  .bulk-toolbar .bulk-actions{ display:flex; gap:8px; flex-wrap:wrap; }
  /* ---- Посторінковий вивід під великими таблицями (listWindow/
     listPagerHtml в app.js): «Показано 1–100 з N», ‹ 1 2 3 … N ›,
     перемикач «На сторінці: 50 100 200». ---- */
  .list-pager{
    display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap;
    margin-top:10px; padding:8px 4px; color:var(--muted); font-size:13px;
  }
  .list-pager-count, .list-pager-size{ font-variant-numeric:tabular-nums; white-space:nowrap; }
  .list-pager-nav, .list-pager-size{ display:inline-flex; align-items:center; gap:4px; }
  .list-pager-btn{
    min-width:30px; height:30px; padding:0 8px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--ink-2); font:inherit; font-size:13px; font-variant-numeric:tabular-nums;
    cursor:pointer; transition:background .12s, border-color .12s, color .12s;
  }
  .list-pager-btn:hover:not(:disabled){ background:var(--surface-2); border-color:var(--border-strong); }
  .list-pager-btn:disabled{ opacity:0.4; cursor:default; }
  .list-pager-btn.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; cursor:default; }
  .list-pager-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .list-pager-gap{ min-width:20px; text-align:center; }
  @media (max-width:720px){ .list-pager{ justify-content:center; } }
  .col-check{ width:36px; text-align:center !important; }
  .col-check input[type="checkbox"]{ width:auto; accent-color:var(--accent); cursor:pointer; }
  /* Шапка: прапорець + стрілка-меню «на сторінці / весь список»
     (bulkHeaderCheckboxHtml в app.js). Ширша за звичайну .col-check, щоб
     вмістити стрілку; сам прапорець лишається на тій самій вертикалі, що й
     прапорці рядків. */
  .col-check-head{ width:58px; text-align:left !important; padding-left:20px !important; overflow:visible; }
  .bulk-select-wrap{ display:inline-flex; align-items:center; gap:2px; vertical-align:middle; }
  .bulk-select-arrow{
    display:inline-flex; align-items:center; justify-content:center; width:18px; height:22px;
    border:none; background:none; border-radius:5px; color:var(--muted); cursor:pointer; padding:0;
  }
  .bulk-select-arrow:hover{ background:var(--surface-3); color:var(--ink); }
  .bulk-select-menu{ right:auto; left:0; min-width:260px; text-transform:none; letter-spacing:0; }
  .bulk-select-item{ display:flex; align-items:center; gap:10px; font-weight:500; }
  .bulk-select-item-box{
    flex:0 0 auto; width:16px; height:16px; border:1.5px solid var(--border-strong); border-radius:4px;
    display:inline-flex; align-items:center; justify-content:center; color:var(--accent); background:var(--surface);
  }
  .bulk-select-item[aria-checked="true"] .bulk-select-item-box{ border-color:var(--accent); }
  .bulk-select-item-box svg{ width:12px; height:12px; }
  .bulk-select-count{ margin-left:auto; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums; }
  .filter-toggle-btn{ position:relative; }
  .filter-toggle-btn.active{ background:var(--surface-3); border-color:var(--border-strong); }
  .filter-toggle-btn svg{ width:14px; height:14px; }
  .filter-badge{
    display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px;
    border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:700; margin-left:2px;
  }
  .filter-panel{
    display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-bottom:14px; padding:16px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  }
  .filter-field{ display:flex; flex-direction:column; gap:5px; min-width:150px; flex:1 1 150px; }
  .filter-field label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  .filter-field input, .filter-field select{ font-size:13px; padding:7px 9px; }
  .filter-range{ display:flex; align-items:center; gap:6px; }
  .filter-range input{ width:0; flex:1 1 auto; min-width:70px; }
  .filter-range-sep{ color:var(--muted); font-size:12.5px; flex:none; }
  .filter-panel-actions{ display:flex; align-items:center; margin-left:auto; }

  /* ---- Сортування таблиць клацанням по заголовку колонки ---- */
  th.sortable-th{ cursor:pointer; user-select:none; white-space:nowrap; }
  th.sortable-th:hover{ color:var(--ink); }
  th.sortable-th.active{ color:var(--ink); }
  .sort-arrow{ display:inline-block; margin-left:5px; font-size:9px; }
  .sort-arrow-idle{ opacity:0.35; }

  /* ---- Kanban ---- */
  /* .kanban-toolbar — рядок над дошкою канбану: перемикач типу угод зліва,
     загальна кнопка «+ Додати угоду» справа (щоб не гортати дошку в
     пошуках колонки для нової угоди) — див. renderKanban в app.js. */
  .kanban-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  .kanban-toolbar .type-filter{ margin-bottom:0; }
  .type-filter{ display:flex; gap:2px; margin-bottom:16px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:3px; width:fit-content; }
  .type-filter-btn{ padding:6px 13px; border-radius:6px; font-weight:600; font-size:12.5px; cursor:pointer; color:var(--ink-2); border:none; background:transparent; }
  .type-filter-btn:hover{ color:var(--ink); }
  .type-filter-btn.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }


  /* align-items:stretch (не flex-start) — щоб усі колонки в рядку мали
     однакову висоту (до max-height нижче), а не лише висоту своїх карток.
     Раніше коротка колонка (мало угод) закінчувалась одразу під останньою
     карткою, і скинути картку в порожній простір під нею (в межах висоти
     сусідніх довших колонок) не вдавалось — .dragover спрацьовував лише
     у верхній частині колонки. Тепер .column-body (flex:1) розтягується
     на всю висоту колонки, тож активна для скидання зона — вся колонка. */
  /* Колонки канбану тягнуться до низу вікна (а не лише по висоті вмісту з
     кнопкою «+ Угода» внизу) — на прохання користувача («колонки
     безкінечні»); картки прокручуються всередині колонки (.column-body). */
  .board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:stretch; height:calc(100vh - 230px); min-height:320px; }
  .column{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; width:252px; flex:none; display:flex; flex-direction:column; height:100%; }
  .column.dragover{ outline:2px dashed var(--accent); outline-offset:-4px; }
  .column-head{ padding:12px 12px 8px; }
  .column-head-top{ display:flex; align-items:center; justify-content:space-between; }
  .column-title{ font-weight:700; font-size:12.5px; }
  .column-count{ font-size:11px; color:var(--muted); font-family:"JetBrains Mono"; background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:1px 7px; }
  .column-sum{ font-size:11.5px; color:var(--ink-2); margin-top:3px; font-family:"JetBrains Mono"; }
  .column-body{ padding:0 8px 8px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; flex:1; }
  .column.terminal-won .column-head{ border-top:3px solid var(--good); border-radius:12px 12px 0 0;}
  .column.terminal-lost .column-head{ border-top:3px solid var(--critical); border-radius:12px 12px 0 0;}

  .deal-card{
    background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--card-stage-color, var(--border-strong));
    border-radius:10px; padding:10px 11px 10px 9px; cursor:grab;
    box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
  }
  .deal-card:active{ cursor:grabbing; }
  .deal-card.dragging{ opacity:0.4; }
  /* Угоди, які поточний користувач не може редагувати (draggable="false" —
     див. deal.canEdit у app.js), не перетягуються на канбані — звичайний
     курсор замість "grab", щоб не натякати на можливість перетягнути. */
  .deal-card[draggable="false"]{ cursor:default; }
  .deal-title{ font-weight:600; font-size:13px; }
  .deal-company{ font-size:11.5px; color:var(--muted); }
  .deal-manager{ font-size:11px; color:var(--ink-2); display:flex; align-items:center; gap:4px; }
  .deal-manager svg{ width:12px; height:12px; flex:none; opacity:0.75; }
  .deal-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
  .deal-amount{ font-family:"JetBrains Mono"; font-weight:500; font-size:12.5px; }
  .deal-date{ font-size:11px; color:var(--muted); }
  .deal-date.overdue{ color:var(--critical); font-weight:600; }
  /* Бейдж поточного статусу ProZorro на картці угоди (канбан «Публічні») —
     див. prozorroCardStatusHtml в app.js. Колір: свій на кожен активний
     етап (--stage-<key> нижче, узгоджено з PROZORRO_STAGES.color в app.js
     — на прохання користувача, щоб етапи відрізнялись візуально, а не
     лише текстом), --good (завершено), --critical (не відбулась/
     скасована), --muted (чернетка). */
  .deal-pz-status{
    display:flex; flex-direction:column; gap:2px; align-self:flex-start; max-width:100%;
    font-size:11px; font-weight:700; letter-spacing:.01em;
    padding:5px 9px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2);
  }
  .deal-pz-status-row{ display:flex; align-items:center; gap:6px; }
  .deal-pz-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--muted); }
  /* Дедлайн поточного етапу (endDate) — трохи менший і легший за підпис
     етапу, з відступом під нього (13px ≈ ширина крапки + gap над ним),
     щоб оком читалось як пояснення до статусу вище, а не окремий рядок. */
  .deal-pz-deadline{ font-size:10px; font-weight:600; opacity:0.85; padding-left:13px; white-space:nowrap; }
  /* П'ять активних етапів ProZorro — кожен свій колір (ключі stage-enquiry/
     -tendering/-auction/-qualification/-awarded дзеркалять PROZORRO_STAGES
     у app.js один-в-один). --stage-auction/-qualification навмисно
     збігаються з кольором однойменних етапів воронки «Публічні»
     (PIPELINES.b2g в app.js) — той самий реальний етап угоди позначено
     тим самим кольором і в колонці канбану, і в цьому бейджі. */
  .deal-pz-status-stage-enquiry{ border-color:color-mix(in srgb, var(--info) 45%, var(--border)); background:color-mix(in srgb, var(--info) 12%, var(--surface)); color:var(--info); }
  .deal-pz-status-stage-enquiry .deal-pz-dot{ background:var(--info); }
  .deal-pz-status-stage-tendering{ border-color:color-mix(in srgb, var(--warning) 55%, var(--border)); background:color-mix(in srgb, var(--warning) 16%, var(--surface)); color:var(--accent-soft-ink); }
  .deal-pz-status-stage-tendering .deal-pz-dot{ background:var(--warning); }
  .deal-pz-status-stage-auction{ border-color:color-mix(in srgb, var(--stage-rose) 45%, var(--border)); background:color-mix(in srgb, var(--stage-rose) 12%, var(--surface)); color:var(--stage-rose); }
  .deal-pz-status-stage-auction .deal-pz-dot{ background:var(--stage-rose); }
  .deal-pz-status-stage-qualification{ border-color:color-mix(in srgb, var(--serious) 45%, var(--border)); background:color-mix(in srgb, var(--serious) 12%, var(--surface)); color:var(--serious); }
  .deal-pz-status-stage-qualification .deal-pz-dot{ background:var(--serious); }
  .deal-pz-status-stage-awarded{ border-color:color-mix(in srgb, var(--stage-teal) 45%, var(--border)); background:color-mix(in srgb, var(--stage-teal) 12%, var(--surface)); color:var(--stage-teal); }
  .deal-pz-status-stage-awarded .deal-pz-dot{ background:var(--stage-teal); }
  /* Запасний варіант — якщо колись з'явиться активний статус ProZorro поза
     п'ятьма відомими етапами (PROZORRO_STATUS_STAGE в app.js його не
     впізнає), щоб бейдж не лишався зовсім без кольору. */
  .deal-pz-status-active{ border-color:color-mix(in srgb, var(--info) 45%, var(--border)); background:color-mix(in srgb, var(--info) 12%, var(--surface)); color:var(--info); }
  .deal-pz-status-active .deal-pz-dot{ background:var(--info); }
  .deal-pz-status-good{ border-color:color-mix(in srgb, var(--good) 45%, var(--border)); background:color-mix(in srgb, var(--good) 12%, var(--surface)); color:var(--good); }
  .deal-pz-status-good .deal-pz-dot{ background:var(--good); }
  .deal-pz-status-critical{ border-color:color-mix(in srgb, var(--critical) 45%, var(--border)); background:color-mix(in srgb, var(--critical) 12%, var(--surface)); color:var(--critical); }
  .deal-pz-status-critical .deal-pz-dot{ background:var(--critical); }
  .deal-pz-status-muted{ color:var(--muted); }
  .add-card-btn{ border:1px dashed var(--border-strong); background:none; border-radius:10px; padding:8px; color:var(--muted); font-size:12px; cursor:pointer; font-weight:600; }
  .add-card-btn:hover{ background:var(--surface); color:var(--ink); }

  /* ---- Tasks ---- */
  .task-group-title{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:700; margin:20px 0 8px; }
  .task-group-title:first-child{ margin-top:0; }
  .task-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; box-shadow:var(--shadow); }
  .task-check{ width:19px; height:19px; border-radius:6px; border:1.5px solid var(--border-strong); flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--surface); }
  .task-check.checked{ background:var(--good); border-color:var(--good); color:#fff; }
  .task-title{ font-weight:600; font-size:13.5px; }
  .task-title.done{ text-decoration:line-through; color:var(--muted); font-weight:500; }
  .task-meta{ font-size:11.5px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-top:2px;}
  .task-body{ flex:1; min-width:0; }
  .task-actions{ display:flex; gap:4px; }

  /* ---- Modal: бічна панель, що виїжджає праворуч (а не по центру) ----
     Кожне вкладене вікно (картка компанії → картка контакту → ...)
     малюється на весь зріст і притиснуте до правого краю — так само, як
     і попереднє воно закриється (закриття завжди повертає на крок назад,
     див. modalBackStack/openOver в app.js), а не «зникає» на весь екран. */
  .modal-overlay{ position:fixed; inset:0; background:rgba(11,11,11,0.4); display:flex; align-items:stretch; justify-content:flex-end; z-index:100; }
  .modal{
    background:var(--surface); border-left:1px solid var(--border); width:100%; max-width:520px; height:100%;
    box-shadow:-24px 0 48px -24px rgba(0,0,0,0.35); display:flex; flex-direction:column;
    animation:modal-slide-in 0.2s ease-out;
  }
  .modal.wide{ max-width:680px; }
  /* Форма замовлення — удвічі ширша за звичайну (1040px замість 520): у
     таблиці позицій довгі назви товарів, кількість, ціна й сума інакше
     не вміщались в один рядок. */
  .modal.modal-order{ max-width:1300px; }
  .modal.modal-order #order-items-table td:first-child{ min-width:280px; }
  @keyframes modal-slide-in{ from{ transform:translateX(28px); opacity:0.4; } to{ transform:translateX(0); opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .modal{ animation:none; } }
  /* Той самий градієнт+візерунок, що й у .topbar (див. коментар вище), тільки
     на основі --surface (фон картки), а не --page (фон сторінки). */
  .modal-head{
    display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); flex:none; position:relative;
    background-color:var(--surface);
    background-image:
      linear-gradient(to left, transparent 0%, var(--surface) 62%),
      radial-gradient(circle at center, color-mix(in srgb, var(--section-accent, transparent) 34%, transparent) 1.2px, transparent 1.4px),
      linear-gradient(135deg, transparent, color-mix(in srgb, var(--section-accent, transparent) 14%, transparent));
    background-repeat:no-repeat, repeat, no-repeat;
    background-size:auto, 14px 14px, auto;
  }
  .modal-head h3{ font-size:16px; }
  /* Ліва група шапки (іконка + назва/підписи) займає всю ширину до кнопок
     праворуч, а текстовий блок — усю ширину групи. Без цього блок
     стискався до «shrink-to-fit», і назва з .copy-click (width:fit-content,
     від'ємні margin) переносилась на другий рядок навіть коли місця було
     вдосталь («КП» / «"ВЕЛИКОДОЛИНСЬКЕ"»). */
  .modal-head > :first-child{ flex:1 1 auto; min-width:0; }
  .modal-head > :last-child{ flex:none; }
  .modal-head-text{ flex:1 1 auto; min-width:0; }
  .modal-head-text h3{ overflow-wrap:anywhere; }
  /* Вкладки картки перегляду клієнта/компанії («Загальне», «Замовлення»,
     «Угоди», «Завдання») — горизонтальний ряд під шапкою, за зразком
     картки клієнта в іншій CRM, яку показав користувач (там це вертикальна
     колонка іконок зліва — тут горизонтальний ряд, бо картка вужча). */
  .detail-tabs{ display:flex; gap:2px; padding:0 14px; border-bottom:1px solid var(--border); flex:none; overflow-x:auto; }
  .detail-tab{
    display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 16px; border:none; background:none; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
  }
  .detail-tab .field-icon{ width:18px; height:18px; }
  .detail-tab:hover{ color:var(--ink-2); }
  .detail-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .detail-tab-count{ background:var(--surface-3); color:var(--ink-2); font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px; line-height:1.4; }
  .detail-tab.active .detail-tab-count{ background:var(--accent); color:#fff; }
  .modal-body{ padding:18px 20px; display:flex; flex-direction:column; gap:14px; flex:1; min-height:0; min-width:0; overflow-y:auto; }

  /* ---- Картка угоди з «Обговоренням»: двоколонковий макет ----
     Обговорення — окрема колонка ЗЛІВА на всю висоту картки (не гортається
     разом з рештою полів), решта полів угоди — звичайна колонка праворуч
     (той самий .modal-body, що й скрізь, просто тепер не єдина дитина
     .modal, а один з двох стовпців у .modal-body-wrap). Ширша модалка
     потрібна лише тут — .modal-deal-split замість базового max-width:520px. */
  .modal.modal-deal-split{ max-width:920px; }
  .modal-body-wrap{ display:flex; flex:1; min-height:0; }
  .deal-chat-col{
    width:340px; flex:none; display:flex; flex-direction:column; min-height:0;
    border-right:1px solid var(--border); background:var(--surface-2);
  }
  .deal-chat-col-head{ padding:16px 16px 10px; flex:none; }
  /* Права колонка картки угоди: вкладки «Загальне/Замовлення/Завдання» + прокрутний .modal-body. */
  .deal-main-col{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
  .deal-tab-client-filter{ max-width:440px; }
  /* Документи із замовлення (рахунок / видаткова / КП) — блок у картці
     замовлення і реквізити в «Доступ» → «Документи». */
  /* Підсумок оплат за рахунком: у вікні «Оплати» і під блоком документів
     у картці замовлення. Зелений — коли рахунки закриті. */
  /* Панель «Чекають оплати» над списком замовлень: згорнута — один рядок
     із підсумком, розгорнута — найдавніші несплачені рахунки. */
  /* «Головна» стоїть окремим пунктом над групами розділів — без підпису
     групи, бо вона сама собі група. */
  .nav-group-home{ margin-bottom:4px; }

  /* Звіти на «Головній»: перемикач періоду й компактні таблиці. */
  .report-period{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
  .report-period-tabs{ display:flex; gap:4px; flex-wrap:wrap; background:var(--surface-3); border-radius:9px; padding:3px; }
  .report-period-tab{
    border:none; background:none; cursor:pointer; font:inherit; font-size:12.5px;
    color:var(--ink-2); padding:6px 12px; border-radius:7px; white-space:nowrap;
  }
  .report-period-tab:hover{ color:var(--ink); }
  .report-period-tab.active{ background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
  .panel-title.report-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .report-table{ margin-top:8px; }
  /* Фіксовані частки колонок: інакше довга назва товару відтісняє суму за
     край картки, а саме сума тут і головна. */
  /* Звітні таблиці вужчі за звичайні списки CRM (вони стоять по дві в
     ряд), тому знімаємо загальний min-width:640px — інакше остання
     колонка з сумою просто ховається за край картки. */
  .report-table table{ font-size:12.5px; table-layout:fixed; width:100%; min-width:0; }
  .report-table th, .report-table td{ padding:6px 8px; }
  .report-table td{ vertical-align:top; }
  .report-table td:first-child{ white-space:normal; overflow-wrap:anywhere; }
  .report-table td.mono, .report-table th{ white-space:nowrap; }
  .report-managers-table col.c-name{ width:28%; }
  .report-managers-table col.c-count{ width:13%; }
  .report-managers-table col.c-sum{ width:23%; }
  .report-managers-table col.c-margin{ width:23%; }
  .report-managers-table col.c-share{ width:13%; }
  .report-products-table col.c-name{ width:50%; }
  .report-products-table col.c-qty{ width:22%; }
  .report-products-table col.c-sum{ width:28%; }


  .unpaid-panel{ padding:0; margin-bottom:12px; overflow:hidden; }
  .unpaid-panel-head{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:10px 14px; background:none; border:none; cursor:pointer;
    font:inherit; color:var(--ink); text-align:left;
  }
  .unpaid-panel-head:hover{ background:var(--surface-2); }
  .unpaid-panel-head svg{ flex:none; width:16px; height:16px; opacity:0.85; }
  .unpaid-panel-title{ font-size:13px; }
  .unpaid-panel-title b{ font-variant-numeric:tabular-nums; }
  .unpaid-panel-head .row-sub{ margin-left:auto; }
  .unpaid-panel-arrow{ flex:none; font-size:10px; color:var(--muted); }
  .unpaid-panel-body{ padding:2px 14px 12px; border-top:1px solid var(--line); }

  .doc-pay-summary{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:8px;
    background:var(--surface-3); color:var(--ink-2);
    font-size:12.5px; line-height:1.4;
  }
  .doc-pay-summary b{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .doc-pay-summary svg{ flex:none; width:15px; height:15px; opacity:0.8; }
  .doc-pay-summary.is-paid{
    background:color-mix(in srgb, var(--good) 12%, transparent);
    color:var(--good);
  }
  .doc-pay-summary.is-paid b{ color:var(--good); }
  .pill-info{ background:color-mix(in srgb, var(--info) 16%, transparent); color:var(--info); }
  .doc-row .btn-sm{ padding:4px 7px; }
  .doc-row .btn-sm .field-icon{ width:15px; height:15px; }
  .doc-settings{ max-width:980px; }
  .doc-settings-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 16px; }
  .doc-settings-grid .doc-settings-wide{ grid-column:1 / -1; }
  .doc-images{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
  .doc-image-card{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface); }
  .doc-image-preview{ height:110px; display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; border-radius:8px; margin-bottom:8px; overflow:hidden; }
  .doc-image-preview img{ max-width:100%; max-height:100%; object-fit:contain; }
  @media (max-width:900px){ .doc-settings-grid{ grid-template-columns:1fr 1fr; } }
  .deal-chat-col-head h4{ display:flex; align-items:center; gap:8px; font-size:13px; }
  .deal-chat-col .deal-chat-pane{ flex:1; min-height:0; margin:0 16px 16px; }
  @media (max-width:900px){
    .modal-body-wrap{ flex-direction:column; }
    .deal-chat-col{ width:auto; height:320px; border-right:none; border-bottom:1px solid var(--border); }
  }
  /* Рядок «стільки-то штук / сума» над списком у вкладках «Замовлення»/
     «Угоди»/«Завдання». */
  .detail-tab-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .detail-tab-summary{ display:flex; gap:24px; }
  .detail-tab-summary-label{ font-size:11px; color:var(--muted); margin-bottom:2px; }
  .detail-tab-summary-value{ font-size:19px; font-weight:700; }
  .modal-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid var(--border); flex:none; }
  .field{ display:flex; flex-direction:column; gap:5px; }
  .field label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); }
  .field-icon{ width:14px; height:14px; flex-shrink:0; color:var(--muted); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .field-row.field-row-3{ grid-template-columns:1fr 1fr 1fr; }
  .field-row.field-row-4{ grid-template-columns:1fr 1fr 1fr 1fr; }
  @media (max-width:1100px){ .field-row.field-row-4{ grid-template-columns:1fr 1fr; } }
  .field-label-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .field-label-line label{ margin-bottom:0; flex:none; white-space:nowrap; }
  .field-label-line .btn{ padding:2px 8px; font-size:12px; white-space:nowrap; }
  /* У тісному 4-колонковому рядку (форма замовлення) кнопка «+ Додати…»
     не має вилазити на сусідній підпис: колонка не розтягується (min-width:0),
     кнопка стискається і при потребі обрізається трьома крапками. */
  .field-row-4 .field-label-line{ min-width:0; }
  /* «+20%» у заголовках колонок цін форми замовлення */
  .order-th-markup{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .order-th-markup .order-markup-btn{ padding:1px 7px; font-size:11px; line-height:16px; height:auto; font-weight:700; letter-spacing:0; text-transform:none; border:1px solid var(--border-strong); border-radius:6px; color:var(--accent); }
  .order-th-markup .order-markup-btn:hover:not(:disabled){ border-color:var(--accent); }
  /* Уже нараховано: кнопка лишається активною — повторний клік скасовує націнку. */
  .order-th-markup .order-markup-btn.is-done{ color:var(--good); border-color:var(--good); background:transparent; }
  .order-th-markup .order-markup-btn.is-done:hover:not(:disabled){ border-color:var(--critical); color:var(--critical); }
  .field-row-4 .field-label-line .btn{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  /* Міні-форма «Новий клієнт у базі CRM» у формі ТТН (openShipmentModal) */
  /* «Вписати вручну» у товарах замовлення (openOrderModal) */
  /* Рядок додавання позиції в замовленні — тепер постійний (пошук по
     довіднику + вільна назва в одному полі), тож рамка спокійна,
     суцільна, а не пунктирна «тимчасова». */
  .order-item-manual{ margin-top:8px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
  /* Підказки товарів — не спливаюче меню поверх, а звичайний список
     під полем (як пошук компанії/клієнта в інших формах): він
     розсуває блок і не перекриває кнопку «+ Додати позицію». */
  .order-item-name-field{ align-self:start; }
  .order-item-suggest{ max-height:220px; }
  /* Групи файлів замовлення (рахунки/видаткові від постачальника) */
  /* Кнопки-«чіпи» в шапці блоків «Документи клієнту» / «Файли
     постачальника»: іконка + короткий підпис, колір за типом документа. */
  .chip-add-btn{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--ink-2); font-family:inherit; font-size:12px; font-weight:600; line-height:16px; cursor:pointer; white-space:nowrap; transition:background .12s ease, border-color .12s ease, color .12s ease; }
  .chip-add-btn .field-icon{ width:14px; height:14px; flex:none; }
  .chip-add-btn:hover:not(:disabled){ background:var(--surface-2); border-color:var(--border-strong); }
  .chip-add-btn:disabled{ opacity:.55; cursor:default; }
  .chip-add-btn.tone-info{ color:var(--info); border-color:color-mix(in srgb, var(--info) 35%, var(--border)); }
  .chip-add-btn.tone-info:hover:not(:disabled){ background:color-mix(in srgb, var(--info) 12%, transparent); border-color:var(--info); }
  .chip-add-btn.tone-good{ color:var(--good); border-color:color-mix(in srgb, var(--good) 35%, var(--border)); }
  .chip-add-btn.tone-good:hover:not(:disabled){ background:color-mix(in srgb, var(--good) 12%, transparent); border-color:var(--good); }
  /* Жовтий сам по собі нечитабельний ні на світлому, ні на темному тлі,
     тому підмішуємо колір тексту теми — так підпис лишається контрастним
     в обох темах. */
  .chip-add-btn.tone-warning{ color:color-mix(in srgb, var(--warning) 60%, var(--ink)); border-color:color-mix(in srgb, var(--warning) 45%, var(--border)); }
  .chip-add-btn.tone-warning:hover:not(:disabled){ background:color-mix(in srgb, var(--warning) 18%, transparent); border-color:var(--warning); }
  .chip-add-btn.tone-muted{ color:var(--muted); }
  .chip-add-btn.tone-muted:hover:not(:disabled){ color:var(--ink-2); }

  /* Документи замовлення парами за типом: ліворуч файли від
     постачальника, праворуч наші документи клієнту; кожен тип — окрема
     «смуга» зі своїм кольором, тому рахунок стоїть навпроти рахунка. */
  .doc-pairs-head{ display:block; }
  .doc-pairs-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:2px 0 -2px; }
  .doc-pairs-cols span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding-left:15px; }
  .doc-pairs-cols span + span{ padding-left:13px; }
  .doc-pairs-cols .field-icon{ width:13px; height:13px; }
  .doc-band{ position:relative; border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:12px; background:var(--surface); margin-top:10px; overflow:hidden; }
  .doc-band-label{ display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); background:var(--surface-2); border-bottom:1px solid var(--border); }
  .doc-band-label .field-icon{ width:14px; height:14px; }
  .doc-band-grid{ display:grid; grid-template-columns:1fr 1fr; }
  .doc-band-cell{ min-width:0; padding:8px 12px 10px; display:flex; flex-direction:column; gap:6px; }
  .doc-band-cell + .doc-band-cell{ border-left:1px solid var(--border); }
  .doc-band-cell .mini-row{ margin:0; }
  .doc-band-cap{ display:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .doc-band-empty{ color:var(--muted); font-size:13px; padding:2px 2px; }
  .doc-band-empty.na{ font-size:12px; opacity:.7; }
  .doc-band-actions{ margin-top:2px; }
  /* Колір смуги за типом документа */
  .doc-band.tone-info{ border-left-color:var(--info); }
  .doc-band.tone-info .doc-band-label{ color:var(--info); background:color-mix(in srgb, var(--info) 10%, transparent); }
  .doc-band.tone-good{ border-left-color:var(--good); }
  .doc-band.tone-good .doc-band-label{ color:var(--good); background:color-mix(in srgb, var(--good) 10%, transparent); }
  .doc-band.tone-warning{ border-left-color:var(--warning); }
  .doc-band.tone-warning .doc-band-label{ color:color-mix(in srgb, var(--warning) 60%, var(--ink)); background:color-mix(in srgb, var(--warning) 14%, transparent); }
  .doc-band.tone-muted .doc-band-label{ color:var(--muted); }
  @media (max-width:1100px){
    /* Вузький екран: колонки одна під одною, тому підпис «від
       постачальника / клієнту» переїжджає всередину комірок. */
    .doc-pairs-cols{ display:none; }
    .doc-band-grid{ grid-template-columns:1fr; }
    .doc-band-cell + .doc-band-cell{ border-left:0; border-top:1px solid var(--border); }
    .doc-band-cap{ display:block; }
  }
  /* Рядок файлу замовлення: «таблетка» типу + сам файл (як у «Документах
     клієнту»), на вузькому екрані — у два рядки. */
  /* Простий перемикач на дві-три позиції (сегментований): радіо всередині,
     видно лише «таблетки». Використовується для «ПДВ у документі». */
  .seg-tiles{ display:inline-flex; flex-wrap:wrap; gap:4px; padding:3px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
  .seg-tile{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:background .12s ease, color .12s ease, box-shadow .12s ease; }
  .seg-tile input{ position:absolute; opacity:0; width:0; height:0; }
  .seg-tile:hover{ color:var(--ink); }
  .seg-tile:has(input:checked){ background:var(--surface); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .seg-tile:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:1px; }
  .seg-tile:has(input:disabled){ opacity:.55; cursor:default; }

  /* Заголовки розділів форми ТТН: Відправник → Отримувач → Вантаж → Оплата */
  .np-form-section{ margin:20px 0 10px; padding-top:12px; border-top:1px solid var(--border); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .np-form-section.is-first{ margin-top:16px; }

  /* Картка ТТН «як бачить Нова пошта»: дві сторони відправлення */
  .np-tracking-card{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:12px 14px; margin-bottom:12px; }
  .np-tracking-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
  .np-tracking-ttn{ display:flex; align-items:center; gap:8px; font-size:13px; }
  .np-tracking-ttn b{ font-size:14px; }
  .np-parties{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px; }
  .np-party{ min-width:0; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--page); display:flex; flex-direction:column; gap:3px; }
  .np-party.is-us{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); background:color-mix(in srgb, var(--accent) 6%, var(--page)); }
  .np-party-head{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .np-party-head .field-icon{ width:13px; height:13px; }
  .np-party-us{ font-size:10px; letter-spacing:0; text-transform:none; font-weight:700; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:999px; padding:0 6px; }
  .np-party-name{ font-weight:600; font-size:14px; word-break:break-word; }
  .np-party-row{ display:flex; align-items:flex-start; gap:6px; font-size:13px; color:var(--ink-2); min-width:0; }
  .np-party-row .field-icon{ width:13px; height:13px; margin-top:3px; flex:none; }
  .np-party-row span{ min-width:0; word-break:break-word; }
  .np-parties-arrow{ display:flex; align-items:center; color:var(--muted); }
  .np-parties-arrow .field-icon{ width:20px; height:20px; }
  .np-facts{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); }
  .np-fact{ display:flex; align-items:baseline; gap:6px; font-size:13px; min-width:0; }
  .np-fact-k{ color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  .np-fact-v{ font-weight:600; word-break:break-word; }
  /* Стара форма під картою — згорнута, щоб не плутала підписами полів */
  .np-raw-form{ border:1px dashed var(--border-strong); border-radius:10px; padding:0 12px; margin-bottom:12px; }
  .np-raw-form > summary{ cursor:pointer; padding:8px 0; font-size:12px; color:var(--muted); }
  .np-raw-form[open] > summary{ border-bottom:1px solid var(--border); margin-bottom:10px; }
  .np-raw-form-body{ padding-bottom:10px; }
  @media (max-width:880px){
    .np-parties{ grid-template-columns:1fr; }
    .np-parties-arrow{ justify-content:center; transform:rotate(90deg); }
  }

  .order-att-row-main{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; flex-wrap:wrap; }
  .order-att-row-main .pill{ flex:none; }
  .order-att-row-main .mail-attachment-chip{ min-width:0; }
  .order-item-suggest .company-suggestion-item .row-title{ font-size:13px; }
  .order-item-suggest .company-suggestion-item .row-sub{ font-size:11px; }
  .order-item-manual-grid{ display:grid; grid-template-columns:2fr 2fr 1fr 1fr 1.3fr 1.3fr; gap:10px; }
  .order-item-manual-grid .field{ margin-bottom:0; min-width:0; }
  @media (max-width: 900px){ .order-item-manual-grid{ grid-template-columns:1fr 1fr; } .order-item-manual-grid .field[style]{ grid-column:span 2; } }
  .ship-new-client{ margin:-2px 0 14px; padding:12px 14px; border:1px dashed var(--accent); border-radius:10px; background:var(--surface-2); }
  .ship-new-client-title{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; margin-bottom:10px; }
  .ship-new-client .field-row{ margin-bottom:8px; }
  .ship-new-client-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .company-suggestion-create{ color:var(--accent); font-weight:600; border-top:1px solid var(--border); }
  input,select,textarea{
    font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--page); color:var(--ink); outline:none; width:100%;
  }
  input:focus,select:focus,textarea:focus{ border-color:var(--accent); }
  textarea{ resize:vertical; min-height:60px; font-family:inherit; }
  .req::after{ content:" *"; color:var(--critical); }

  /* Живе відображення маржі (Сума продажу − Сума закупки) в картці угоди —
     та сама форма поля вводу поруч (однакова висота/відступи), але без
     самого input: значення лише читається, рахується автоматично з двох
     сусідніх полів (renderMarginDisplay в app.js). Тон залежить від знаку:
     --good/--critical/--muted. На канбані маржу/рентабельність навмисно НЕ
     показуємо (лише в самій картці угоди). */
  .margin-display{
    font-family:"JetBrains Mono"; font-size:13.5px; font-weight:700; padding:8px 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-2); color:var(--muted);
  }
  .margin-display.margin-good{ border-color:color-mix(in srgb, var(--good) 45%, var(--border)); background:color-mix(in srgb, var(--good) 12%, var(--surface)); color:var(--good); }
  .margin-display.margin-critical{ border-color:color-mix(in srgb, var(--critical) 45%, var(--border)); background:color-mix(in srgb, var(--critical) 12%, var(--surface)); color:var(--critical); }
  .margin-display.margin-muted{ color:var(--muted); }
  /* Сума й відсоток в одному полі: сума зліва, відсоток притиснутий до
     правого краю й трохи тихіший — це не друге число, а та сама сума,
     поділена на суму продажу. Знак стоїть лише біля суми (див.
     moneyPctInnerHtml в app.js), колір спільний для обох. */
  .margin-display.margin-money-pct{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .mp-money{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mp-pct{ flex:none; font-size:12px; font-weight:600; opacity:.72; }
  /* Маржа в підсумку таблиці позицій замовлення — лише колір, без рамки. */
  .margin-cell.margin-good{ color:var(--good); }
  .margin-cell.margin-critical{ color:var(--critical); }
  .margin-cell.margin-muted{ color:var(--muted); }
  .order-items-edit th, .order-items-edit td{ white-space:nowrap; }
  .order-items-edit td:first-child{ white-space:normal; }

  /* ---- Синхронізація з ProZorro (картка угоди, воронка «Публічні») ----
     .pz-block — картка статусу під полем ID закупівлі; .pz-timeline — п'ять
     кроків конкурсної процедури РЯДКАМИ одне під одним (а не в один рядок
     колонками — картка угоди фіксовано вузька, 520px/.modal, і п'ять
     підписів на кшталт «ПРОПОЗИЦІЇ РОЗГЛЯНУТІ» одночасно в колонку просто
     не влазять без обрізання). Поточний крок підсвічено кольором --good,
     майбутні — приглушені (--border). Для завершеної/скасованої/неуспішної
     закупівлі таймлайн не показуємо взагалі — лише підсумковий напис
     (.pz-final). */
  .pz-block{ padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }
  .pz-block-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .pz-block-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
  .pz-synced{ font-size:11px; color:var(--muted); }
  .pz-hint{ font-size:12.5px; color:var(--muted); }
  .pz-error{
    font-size:12.5px; color:var(--critical); background:color-mix(in srgb, var(--critical) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--critical) 30%, transparent); border-radius:8px; padding:8px 10px;
  }
  .pz-final{ font-size:13px; font-weight:700; }
  .pz-final-good{ color:var(--good); }
  .pz-final-critical{ color:var(--critical); }
  .pz-timeline{ display:flex; flex-direction:column; gap:11px; }
  .pz-step-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
  .pz-step-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); }
  .pz-step-dates{ font-size:11px; color:var(--muted); white-space:nowrap; }
  .pz-step-bar{ height:5px; border-radius:3px; background:var(--border); }
  .pz-step.done .pz-step-bar{ background:var(--good); opacity:0.5; }
  .pz-step.current .pz-step-bar{ background:var(--good); }
  .pz-step.current .pz-step-label{ color:var(--good); }
  /* ---- Рядок «Договір підписано …» + кнопка «Відкрити на ProZorro» —
     з'являється в .pz-block, коли синхронізація виявила підписаний договір
     (deals.prozorro_contract_signed_at, див. prozorroContractLinkHtml). ---- */
  .pz-contract-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    margin-top:12px; padding-top:12px; border-top:1px dashed var(--border);
  }
  .pz-contract-label{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); }
  .pz-contract-label .field-icon{ color:var(--good); }
  /* ---- Таблиця «Умови поставки та здійснення розрахунків» —
     prozorroMilestonesTableHtml, з'являється одразу під рядком «Договір
     підписано» вище. Картка угоди вузька (.modal без класу wide, 520px),
     а в таблиці 6 колонок — тому власний .pz-milestones-wrap із
     overflow-x:auto замість глобального .table-wrap (той розрахований на
     повноширинні списки, з min-width:640px, що тут би просто ламало
     верстку картки). Власний, компактніший td/th замість глобальних
     (менші відступи й font-size, без tbody-hover — рядки тут не клікабельні,
     на відміну від списків угод/компаній). ---- */
  .pz-milestones{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--border); }
  .pz-milestones-title{ font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; margin-bottom:8px; }
  .pz-milestones-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
  .pz-milestones-table{ width:100%; min-width:480px; border-collapse:collapse; }
  .pz-milestones-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); font-weight:600; padding:7px 8px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap; }
  .pz-milestones-table td{ padding:8px; border-bottom:1px solid var(--border); font-size:12.5px; color:var(--ink); white-space:nowrap; }
  .pz-milestones-table tbody tr:last-child td{ border-bottom:none; }

  /* ---- Власні пікери дати/часу (заміна нативного браузерного) ----
     .dfield огортає поле + іконку-«тригер»; сам попап (.dpicker-popup /
     .tpicker-popup) — спливаюча картка під полем у стилі CRM, з тим же
     оформленням, що й мінікалендар на «Головній» (.mini-cal-* — навмисно
     ті самі класи, для однакового вигляду й менше дублювання CSS). */
  .dfield{ position:relative; }
  .dfield input{ padding-right:32px; cursor:pointer; }
  .dfield-icon{ position:absolute; right:10px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); display:flex; }
  .dfield-icon .field-icon{ width:15px; height:15px; }
  .dfield input:focus + .dfield-icon{ color:var(--accent); }

  .dpicker-popup{
    position:absolute; top:calc(100% + 6px); left:0; z-index:150; width:248px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); padding:12px;
  }
  .dpicker-foot{ display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
  .dpicker-foot button{
    background:none; border:none; color:var(--accent); font-weight:600; font-size:12px; cursor:pointer;
    padding:2px 4px; font-family:inherit; width:auto;
  }
  .dpicker-foot button:hover{ text-decoration:underline; }

  .tpicker-popup{
    position:absolute; top:calc(100% + 6px); left:0; z-index:150; width:132px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:6px;
  }
  .tpicker-cols{ display:flex; gap:6px; }
  .tpicker-col{
    flex:1; max-height:184px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
    scrollbar-width:thin;
  }
  .tpicker-item{
    text-align:center; padding:5px 0; border-radius:6px; font-size:13px; font-family:"JetBrains Mono";
    cursor:pointer; color:var(--ink-2);
  }
  .tpicker-item:hover{ background:var(--surface-3); }
  .tpicker-item.selected{ background:var(--accent); color:var(--accent-ink); font-weight:700; }

  /* ---- Ползунок (toggle switch) — напр. «Постачальник» у картці компанії ---- */
  .toggle-field{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0; }
  .toggle-field .toggle-text{ display:flex; flex-direction:column; gap:2px; }
  .toggle-field .toggle-label{ font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; }
  .toggle-field .toggle-hint{ font-size:11.5px; color:var(--muted); }
  .toggle-switch{ position:relative; display:inline-block; width:40px; height:23px; flex:none; }
  .toggle-switch input{ opacity:0; width:0; height:0; position:absolute; }
  .toggle-switch .toggle-track{
    position:absolute; inset:0; background:var(--surface-3); border:1px solid var(--border-strong); border-radius:99px;
    cursor:pointer; transition:background .15s ease, border-color .15s ease;
  }
  .toggle-switch .toggle-track::before{
    content:""; position:absolute; width:17px; height:17px; left:2px; top:2px; background:var(--surface);
    border-radius:50%; box-shadow:0 1px 2px rgba(11,11,11,0.25); transition:transform .15s ease;
  }
  .toggle-switch input:checked + .toggle-track{ background:var(--accent); border-color:var(--accent); }
  .toggle-switch input:checked + .toggle-track::before{ transform:translateX(17px); background:var(--accent-ink); }
  .toggle-switch input:focus-visible + .toggle-track{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- Модалка «Обрати стовпчики» (кнопка над таблицями Угоди/Компанії/
     Постачальники/Клієнти/Товари/Замовлення) — перемикачі показати/сховати
     + перетягування рядків для зміни порядку, той самий підхід, що й
     перетягування пунктів бічного меню (.nav-item.dragging). ---- */
  .columns-picker-list{ display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow-y:auto; }
  .columns-picker-row{
    display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px;
    background:var(--surface); transition:background .12s ease;
  }
  .columns-picker-row:not(.locked){ cursor:grab; }
  .columns-picker-row:not(.locked):hover{ background:var(--surface-3); }
  .columns-picker-row.dragging{ opacity:0.4; }
  .columns-picker-row.locked{ opacity:0.75; }
  .columns-drag-handle{ display:flex; align-items:center; justify-content:center; width:16px; height:16px; flex:none; color:var(--muted); }
  .columns-picker-label{ flex:1; font-size:13.5px; color:var(--ink); }
  .company-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .company-tags:empty{ display:none; }
  .company-tag{
    display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px;
    background:var(--surface-3); border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink);
  }
  .tag-remove{
    display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
    border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; line-height:1; padding:0;
  }
  .tag-remove:hover{ background:var(--surface); color:var(--critical); }
  /* Підказки пошуку (менеджер, компанія, клієнт, товар). Поки список
     відкритий, він лежить у спільному шарі #dropdown-layer поверх
     сторінки (.is-floating) — доти він стояв у потоці й розсовував форму
     при кожному натисканні клавіші. */
  .company-suggestions{ margin-top:6px; border:1px solid var(--border); border-radius:8px; background:var(--page); max-height:170px; overflow-y:auto; }
  .company-suggestions:empty{ display:none; border:none; margin-top:0; }
  .company-suggestions.is-floating{ margin-top:0; border-radius:10px; background:var(--surface); padding:2px; }
  .company-suggestions.is-floating .company-suggestion-item{ border-radius:7px; }
  .company-suggestion-item{ padding:8px 10px; font-size:13px; cursor:pointer; }
  .company-suggestion-item:hover{ background:var(--surface-2); }
  .company-suggestion-item.active{ background:var(--surface-2); font-weight:600; }
  .company-suggestion-empty{ padding:8px 10px; font-size:13px; color:var(--muted); }
  .company-suggestion-note{ padding:6px 10px 4px; font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }

  /* Поле «Менеджер» — пошук замість спадного меню (див. managerComboboxHtml
     в app.js). Список підказок нижче навмисно перевикористовує
     .company-suggestions/-item — той самий вигляд, що й пошук компанії. */
  .manager-combo{ position:relative; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .manager-combo > .company-suggestions{ flex-basis:100%; width:100%; }
  /* Фото поточного менеджера зліва від поля пошуку — той самий підхід, що
     й скрізь по CRM (userAvatarHtml()); порожнє, якщо менеджера не вказано
     (managerAvatarHtml() повертає "" — :empty ховає контейнер). */
  .manager-combo-avatar{ flex:none; }
  .manager-combo-avatar:empty{ display:none; }
  /* Кілька менеджерів компанії (з карток її клієнтів) в один рядок */
  .manager-chips{ display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:center; vertical-align:middle; }
  .manager-chips-item{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .company-managers-line{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px; }
  .company-managers-line svg{ width:14px; height:14px; flex:none; }
  .mini-row-manager{ font-size:12.5px; color:var(--muted); }
  .np-ship-via{ color:var(--muted); font-style:italic; }
  .deal-ttn-cost{ margin-top:4px; }
  /* Пункти спадного списку менеджера — фото + ім'я в один рядок */
  .manager-combo-item{ display:flex; align-items:center; gap:8px; }
  .manager-combo-noavatar{ width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--muted); }
  .manager-combo-noavatar svg{ width:14px; height:14px; }
  .manager-combo-field{ flex:1; min-width:0; position:relative; }
  .manager-combo-input{ padding-right:30px; cursor:pointer; }
  .manager-combo-input:focus{ cursor:text; }
  /* Той самий комбобокс усередині панелі фільтрів (напр. «Компанія» —
     filterCompanySearchFieldHtml в app.js) — .filter-field input вище має
     вищу специфічність (клас + тип) за саму лише .manager-combo-input і
     переважив би її padding-right:30px, залишивши текст під стрілочкою. */
  .filter-field .manager-combo-input{ padding-right:30px; }
  .manager-combo::after{
    content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; pointer-events:none;
    background:var(--muted);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .np-suggestions{ margin-top:6px; border:1px solid var(--border); border-radius:8px; background:var(--page); max-height:170px; overflow-y:auto; }
  .np-suggestions:empty{ display:none; border:none; margin-top:0; }
  .np-suggestion-item{ padding:8px 10px; font-size:13px; cursor:pointer; }
  .np-suggestion-item:hover{ background:var(--surface-2); }
  .np-suggestion-empty{ padding:8px 10px; font-size:13px; color:var(--muted); }
  .np-address-extra{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
  .np-address-row{ grid-template-columns:2fr 1fr 1fr; }
  .np-type-radios{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px; }
  .np-radio{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; }
  .np-radio input[type="radio"],.np-radio input[type="checkbox"]{ width:auto; accent-color:var(--accent); cursor:pointer; margin:0; }
  /* «Тип вантажу» у формі ТТН — картки-плитки з іконкою замість звичайних
     радіо-кнопок (заміна на прохання користувача, іконки — його файли,
     assets/img/cargo-type-*.png). Сам <input type="radio"> лишається
     всередині — приховано лише візуально, — тож уся існуюча логіка
     (querySelectorAll('input[name="ship-cargo-type"]'), submit) працює
     без змін. Підсвітка обраної картки — через :has(), без окремого JS. */
  .np-cargo-type-tiles{ display:flex; gap:10px; margin-bottom:4px; }
  .np-cargo-type-tile{
    position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 8px 8px; border:1.5px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer; text-align:center;
    transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .np-cargo-type-tile:hover{ border-color:var(--border-strong); }
  .np-cargo-type-tile:has(input:checked){
    border-color:var(--accent); background:var(--accent-soft);
    box-shadow:0 0 0 1px var(--accent) inset;
  }
  .np-cargo-type-tile:has(input:disabled){ cursor:default; opacity:.6; }
  .np-cargo-type-tile input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .np-cargo-type-tile img{ width:40px; height:40px; object-fit:contain; }
  .np-cargo-type-tile span{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .np-cargo-type-tile:has(input:checked) span{ color:var(--accent-soft-ink); }
  /* «Відділення / Поштомат / Пункт / Адреса» (тип видачі отримувачу) у формі
     ТТН — картки 2×2 з іконкою-беджем замість рядка дрібних радіо-кнопок
     (за зразком, який показав користувач). Той самий прийом, що й вище для
     «Тип вантажу»: справжній <input type="radio"> лишається всередині,
     лише приховано візуально, — querySelectorAll('input[name="ship-delivery-
     type"]') і решта логіки (перемикання полів «Відділення»/«Вулиця» тощо)
     працюють без змін. Іконки — наявні у проєкті SVG (fieldIcon), кольори
     беджів — лише для розрізнення карток, без нового змісту. */
  .np-delivery-type-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
  .np-delivery-type-tile{
    position:relative; display:flex; align-items:center; gap:10px;
    padding:10px 12px; border:1.5px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer;
    transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .np-delivery-type-tile:hover{ border-color:var(--border-strong); }
  .np-delivery-type-tile:has(input:checked){
    border-color:var(--accent); background:var(--accent-soft);
    box-shadow:0 0 0 1px var(--accent) inset;
  }
  .np-delivery-type-tile:has(input:disabled){ cursor:default; opacity:.6; }
  .np-delivery-type-tile input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .np-delivery-type-tile span:last-child{ font-size:13px; font-weight:600; color:var(--ink); }
  .np-delivery-type-badge{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
  }
  .np-delivery-type-badge .field-icon{ width:16px; height:16px; }
  .np-delivery-type-badge-warehouse{ background:color-mix(in srgb, #E8A33D 20%, transparent); color:#B4791E; }
  .np-delivery-type-badge-postomat{ background:color-mix(in srgb, #3DAA5C 20%, transparent); color:#237A3C; }
  .np-delivery-type-badge-point{ background:color-mix(in srgb, #3D8FE8 20%, transparent); color:#1E63B4; }
  .np-delivery-type-badge-address{ background:color-mix(in srgb, #E8503D 20%, transparent); color:#B4301E; }
  /* «Спосіб здачі» у формі ТТН — той самий прийом карток-плиток, що й
     «Тип вантажу»/«Відділення-Поштомат-Пункт-Адреса» вище: замінює
     звичайний <select>, чию розкриту випадайку (нативний список ОС) CSS
     стилізувати не може. Тут — радіо-кнопки (не <select>), тож
     currentPickupType()/зміна перечитують querySelector('input[name=
     "ship-pickup-type"]:checked') замість .value єдиного select-елемента. */
  .np-pickup-type-tiles{ display:flex; gap:10px; margin-bottom:4px; }
  .np-pickup-type-tile{
    position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 8px; border:1.5px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer; text-align:center;
    transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .np-pickup-type-tile:hover{ border-color:var(--border-strong); }
  .np-pickup-type-tile:has(input:checked){
    border-color:var(--accent); background:var(--accent-soft);
    box-shadow:0 0 0 1px var(--accent) inset;
  }
  .np-pickup-type-tile:has(input:disabled){ cursor:default; opacity:.6; }
  .np-pickup-type-tile input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .np-pickup-type-tile span:last-child{ font-size:12px; font-weight:600; color:var(--ink); line-height:1.3; }
  .np-pickup-type-badge{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
  }
  .np-pickup-type-badge .field-icon{ width:16px; height:16px; }
  .np-pickup-type-badge-warehouse{ background:color-mix(in srgb, #E8A33D 20%, transparent); color:#B4791E; }
  .np-pickup-type-badge-postomat{ background:color-mix(in srgb, #3DAA5C 20%, transparent); color:#237A3C; }
  .np-pickup-type-badge-courier{ background:color-mix(in srgb, #8A5DE8 20%, transparent); color:#5E33B4; }
  /* «Платник» і «Оплата» у формі ТТН — картки з іконкою-беджем, той самий
     прийом і з тієї ж причини (нативний <select> замінено на радіо-кнопки
     "ship-payer-type"/"ship-payment-type" — читання значення тепер через
     querySelector(...:checked), а не .value одного select-елемента). */
  .np-payer-type-tiles,.np-payment-type-tiles{ display:flex; gap:10px; margin-bottom:4px; }
  .np-payer-type-tile,.np-payment-type-tile{
    position:relative; flex:1; display:flex; align-items:center; gap:10px;
    padding:10px 12px; border:1.5px solid var(--border); border-radius:12px;
    background:var(--surface); cursor:pointer;
    transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .np-payer-type-tile:hover,.np-payment-type-tile:hover{ border-color:var(--border-strong); }
  .np-payer-type-tile:has(input:checked),.np-payment-type-tile:has(input:checked){
    border-color:var(--accent); background:var(--accent-soft);
    box-shadow:0 0 0 1px var(--accent) inset;
  }
  .np-payer-type-tile:has(input:disabled),.np-payment-type-tile:has(input:disabled){ cursor:default; opacity:.6; }
  .np-payer-type-tile input[type="radio"],.np-payment-type-tile input[type="radio"]{
    position:absolute; opacity:0; width:0; height:0; pointer-events:none;
  }
  .np-payer-type-tile span:last-child,.np-payment-type-tile span:last-child{ font-size:13px; font-weight:600; color:var(--ink); }
  .np-payer-type-badge,.np-payment-type-badge{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
  }
  .np-payer-type-badge .field-icon,.np-payment-type-badge .field-icon{ width:16px; height:16px; }
  .np-payer-type-badge-recipient{ background:color-mix(in srgb, #3D8FE8 20%, transparent); color:#1E63B4; }
  .np-payer-type-badge-sender{ background:color-mix(in srgb, #E8A33D 20%, transparent); color:#B4791E; }
  .np-payer-type-badge-third{ background:color-mix(in srgb, #8A5DE8 20%, transparent); color:#5E33B4; }
  .np-payment-type-badge-cash{ background:color-mix(in srgb, #3DAA5C 20%, transparent); color:#237A3C; }
  .np-payment-type-badge-noncash{ background:color-mix(in srgb, #3D8FE8 20%, transparent); color:#1E63B4; }
  /* Місця відправлення («Загальні параметри» вимкнено — своя вага/габарити
     на кожне місце, для «Посилка» — завжди), renderSeatRows() в
     openShipmentModal. Свій контейнер, а не .field-row (той — grid на 2
     колонки, тут полів то 1, то кілька плюс кнопки копіювання/видалення).
     «Ручна обробка» (лише для «Посилка») — flex:1 1 100% примусово
     переносить її на свій рядок під полями того ж місця. */
  .np-seat-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--border); }
  .np-seat-row:last-of-type{ border-bottom:none; margin-bottom:4px; padding-bottom:0; }
  .np-seat-row .field{ min-width:90px; flex:1 1 90px; }
  .np-seat-row-copy,.np-seat-row-remove{ flex:none; }
  .np-seat-row-remove:disabled{ opacity:.35; cursor:default; }
  .np-address-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
  .np-address-tags:empty{ display:none; margin-bottom:0; }
  .np-address-tag{
    display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px;
    background:var(--surface-3); border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink);
  }
  .np-address-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
  .np-address-list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .np-address-list li .copy-btn{ margin-top:1px; }
  /* Мітка призначення адреси ("Товар", "Документи" тощо) — окрема пігулка
     перед текстом адреси в np-address-list (картка перегляду клієнта/угоди). */
  .np-address-label-pill{ font-size:10.5px; padding:2px 7px; vertical-align:1px; }
  /* Та сама мітка всередині вже доданого тега np-address-tag (форма
     редагування) — просто виділене слово перед текстом адреси, без окремого
     фону, щоб не плодити пігулку в пігулці. */
  /* .np-address-tag-label — заголовна мітка в тезі вже збереженої адреси
     (наприклад, «Товар:») — лишається для адрес, доданих ДО прибирання
     можливості вписувати мітку (див. README, «Прибрано мітку адреси
     Нової пошти в картці клієнта»); сам конструктор адреси
     (renderNpAddressBuilder в app.js) більше не показує поле для її
     введення. */
  .np-address-tag-label{ font-weight:700; color:var(--accent); margin-right:2px; }
  .np-address-tag-label::after{ content:":"; margin-right:4px; color:var(--ink-2); font-weight:600; }

  /* Банер «лише перегляд» у картці угоди (обмеження редагування по
     менеджеру — див. d.canEdit/openDealModal у app.js). */
  .deal-readonly-banner{
    display:flex; align-items:flex-start; gap:8px; padding:10px 12px; margin-bottom:14px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
    font-size:12.5px; color:var(--ink-2); line-height:1.4;
  }
  .deal-readonly-banner svg{ width:15px; height:15px; flex:none; margin-top:1px; opacity:0.75; }

  /* Блок «Додаткові редактори» в картці угоди — той самий вигляд «пігулок»,
     що й .np-address-tag вище. */
  .deal-editors-field{ margin-top:2px; }
  .deal-editors-list{ display:flex; flex-wrap:wrap; gap:6px; }
  .deal-editors-list:empty{ display:none; }
  .deal-editor-chip{
    display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 10px;
    background:var(--surface-3); border-radius:99px; font-size:12.5px; font-weight:600; color:var(--ink);
  }
  .deal-editor-remove{
    background:none; border:none; color:var(--muted); cursor:pointer; padding:2px; line-height:1;
    font-size:13px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  }
  .deal-editor-remove:hover{ background:var(--surface); color:var(--critical); }
  .deal-editors-empty{ font-size:12.5px; color:var(--muted); }
  .close-x{ background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; border-radius:6px; }
  .close-x:hover{ background:var(--surface-3); color:var(--ink); }

  .detail-section{ margin-top:4px; }
  .detail-section h4{ display:flex; align-items:center; gap:6px; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin-bottom:8px; }
  .mini-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:var(--surface-2); border-radius:8px; margin-bottom:6px; font-size:13px; }
  .empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
  .empty-state svg{ opacity:0.5; margin-bottom:10px; }

  .toast-wrap{ position:fixed; bottom:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:8px; }
  .toast{ background:var(--ink); color:var(--page); padding:10px 16px; border-radius:9px; font-size:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(6px); transition:all .18s ease; }
  .toast.show{ opacity:1; transform:translateY(0); }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:9px; }
  ::-webkit-scrollbar-track{ background:transparent; }

  /* ---- Вхід у систему ---- */
  .login-screen{
    display:none; position:fixed; inset:0; z-index:500; background:var(--page);
    align-items:center; justify-content:center; padding:20px;
  }
  body.not-authenticated .login-screen{ display:flex; }
  body.not-authenticated .app{ display:none; }
  .login-card{
    width:100%; max-width:340px; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:26px 24px; box-shadow:0 24px 60px -20px rgba(0,0,0,0.35);
    display:flex; flex-direction:column; gap:14px;
  }
  .login-card h2{ font-size:17px; margin:0; }
  .login-error{
    background:color-mix(in srgb, var(--critical) 12%, transparent); color:var(--critical);
    border-radius:8px; padding:8px 10px; font-size:12.5px; font-weight:600;
  }

  /* ---- Чіп поточного користувача (топбар) ---- */
  /* Клікабельний — відкриває редагування власного облікового запису
     (openMyAccountModal() в app.js); кнопка «Вийти» всередині зупиняє
     спливання кліку, щоб не відкривала заразом і модалку. */
  .user-chip{ display:flex; align-items:center; gap:6px; padding-left:10px; margin-left:4px; border-left:1px solid var(--border); border-radius:8px; cursor:pointer; transition:background .12s ease; }
  .user-chip:hover{ background:var(--surface-2); }
  .user-chip-name{ font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; }

  /* ---- Розділ «Доступ» ---- */
  .access-layout{ display:flex; gap:18px; align-items:flex-start; }
  .subnav{ flex:none; width:200px; display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px; box-shadow:var(--shadow); }
  .subnav-item{ padding:9px 11px; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; color:var(--ink-2); user-select:none; }
  .subnav-item:hover{ background:var(--surface-2); }
  .subnav-item.active{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .access-pane{ flex:1; min-width:0; }

  /* ---- Розділ «Логістика» (Нова пошта) ---- */
  /* Підвкладки зі значком + лічильником — той самий .subnav, що й
     «Доступ», лише кожен пункт додатково несе іконку зліва (в акуратному
     квадратику, як пункти меню в кабінеті самої Нової пошти) і лічильник
     справа, коли є що рахувати (усі, крім «Налаштування»). */
  .np-subnav-item{ display:flex; align-items:center; gap:10px; }
  .np-subnav-icon{ flex:none; width:26px; height:26px; border-radius:7px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
  .np-subnav-icon .field-icon{ width:15px; height:15px; }
  .subnav-item.active .np-subnav-icon{ background:color-mix(in srgb, var(--accent-soft-ink) 16%, transparent); color:var(--accent-soft-ink); }
  .np-subnav-label{ flex:1; min-width:0; }
  .np-subnav-count{ flex:none; font-size:11px; font-weight:700; background:var(--surface-3); color:var(--muted); padding:1px 7px; border-radius:99px; }
  .subnav-item.active .np-subnav-count{ background:color-mix(in srgb, var(--accent-soft-ink) 16%, transparent); color:var(--accent-soft-ink); }

  /* Список відправлень — картки, а не таблиця: одного погляду на рядок
     досить, щоб побачити і статус, і трекінг, без горизонтальної прокрутки
     на вузьких екранах. */
  .np-shipment-list{ display:flex; flex-direction:column; gap:8px; }
  .np-shipment-card{
    display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease;
  }
  .np-shipment-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow); }
  /* Значок статусу (вантажівка/чекбокс) — тепер обгорнутий у -wrap, щоб
     точно під ним (той самий розмір, тим самим стовпчиком) можна було
     показати ще й тип вантажу (див. .np-cargo-type-badge нижче) — на
     прохання користувача, без окремої пілюлі з підписом поруч із номером
     ТТН, як було раніше. */
  .np-shipment-icon-wrap{ flex:none; width:36px; display:flex; flex-direction:column; gap:6px; }
  .np-shipment-icon{ flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
  .np-shipment-icon .field-icon{ width:18px; height:18px; }
  .np-shipment-icon-good{ background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good); }
  .np-shipment-icon-warning{ background:color-mix(in srgb, var(--warning) 20%, transparent); color:var(--accent-soft-ink); }
  .np-shipment-icon-critical{ background:color-mix(in srgb, var(--critical) 16%, transparent); color:var(--critical); }
  .np-shipment-icon-muted{ background:var(--surface-3); color:var(--ink-2); }
  /* Значок типу вантажу — та сама картинка, що й на плитці «Тип вантажу»
     у формі ТТН (assets/img/cargo-type-*.png), тут того самого розміру,
     що й значок статусу над ним, і просто під ним, без підпису (назва й
     так у title при наведенні). */
  .np-cargo-type-badge{ flex:none; width:36px; height:36px; object-fit:contain; }
  .np-shipment-main{ flex:1; min-width:0; }
  .np-shipment-ttn{ font-weight:700; font-size:13.5px; margin-bottom:2px; }
  .np-shipment-status{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:220px; }
  .np-shipment-status .pz-error{ text-align:right; }
  /* Довільний текст статусу трекінгу від самої Нової пошти (буває довгим
     цілим реченням, напр. «Відправник самостійно створив цю накладну, але
     ще не надав до відправки») — свідомо БЕЗ пілюльки-фону (на відміну від
     короткого st.label поруч, «Створено» тощо): у форматі пілюльки таке
     довге речення виглядає надто важким і відтягує увагу від самого
     номера ТТН і одержувача. */
  .np-shipment-tracking-note{ font-size:11px; font-weight:500; text-align:right; line-height:1.35; opacity:.7; }
  .np-shipment-tracking-note-good{ color:var(--good); }
  .np-shipment-tracking-note-warning{ color:var(--accent-soft-ink); }
  .np-shipment-tracking-note-critical{ color:var(--critical); }
  .np-shipment-tracking-note-muted{ color:var(--ink-2); }
  .np-shipment-actions{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
  .np-shipment-card{ flex-wrap:wrap; }
  /* Попередження про 6-годинне вікно на завантаження в поштомат
     (npPostomatDraftWarningHtml) — той самий жовтий блок-попередження,
     що й у власному кабінеті Нової пошти («Відправка з поштомату»).
     Займає повну ширину картки (сама картка — flex-wrap:wrap вище). */
  .np-postomat-warning{
    flex-basis:100%; display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:9px 12px;
    font-size:12.5px; line-height:1.4; color:var(--accent-soft-ink);
    background:color-mix(in srgb, var(--warning) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--warning) 40%, transparent); border-radius:8px;
  }
  .np-postomat-warning .field-icon{ flex:none; width:15px; height:15px; margin-top:1px; }
  .np-postomat-warning.is-past{
    color:var(--critical); background:color-mix(in srgb, var(--critical) 10%, transparent);
    border-color:color-mix(in srgb, var(--critical) 30%, transparent);
  }
  @media (max-width:720px){
    .np-shipment-status, .np-shipment-actions{ align-items:flex-start; max-width:none; }
  }

  /* Компактний блок «Відправлення Нової пошти» в картках клієнта/компанії/
     угоди (npShipmentsBlockHtml) — той самий .mini-row, що й скрізь у цих
     картках (клієнти компанії, файли), лише з іконкою статусу праворуч
     замість кнопок керування (їх тут нема — повне керування лишається в
     самому розділі «Логістика», клік по рядку туди й веде). */
  .np-ship-mini-row{ align-items:center; flex-wrap:wrap; }

  /* Анімація доставки — лінія «Створено → В дорозі → У відділенні →
     Видано» з вантажівкою, що рухається по ній залежно від трек-статусу
     Нової пошти (npDeliveryProgressInfo() в app.js дзеркалить
     np_status_tone()/коди StatusCode). Займає весь рядок картки (і в
     повному списку «Логістика», і в компактному блоці клієнта/угоди) —
     .np-shipment-card і .np-ship-mini-row вище тому й отримали
     flex-wrap:wrap, а цей елемент — flex-basis:100%, той самий прийом,
     що й для «Ручна обробка» в картках місць «Посилки». Суто
     декоративний індикатор — уся фактична інформація (пілюля статусу,
     текст трекінгу від Нової пошти) лишається поруч, як і раніше. */
  .np-delivery-track{ flex:1 1 100%; position:relative; height:30px; margin-top:6px; }
  .np-delivery-track-line{
    position:absolute; top:50%; left:11px; right:11px; height:3px;
    background:var(--border); border-radius:2px; transform:translateY(-50%); overflow:hidden;
  }
  .np-delivery-track-fill{
    position:absolute; top:0; left:0; height:100%; border-radius:2px;
    background:var(--good); transition:width .7s cubic-bezier(.4,0,.2,1), background-color .3s ease;
  }
  .np-delivery-track[data-tone="warning"] .np-delivery-track-fill{ background:var(--warning); }
  .np-delivery-track[data-tone="critical"] .np-delivery-track-fill{ background:var(--critical); }
  .np-delivery-track[data-tone="muted"] .np-delivery-track-fill{ background:var(--ink-2); opacity:.5; }
  .np-delivery-stage{
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:15px; height:15px; border-radius:50%; background:var(--surface);
    border:2px solid var(--border); display:flex; align-items:center; justify-content:center;
    color:var(--ink-2); transition:border-color .3s ease, color .3s ease, background-color .3s ease;
  }
  /* Іконка вужча за саму позначку (8px у 15px гуртку) — на лінії тепер 6
     позначок (NP_DELIVERY_STAGES у app.js: створено/прийнято у відділенні/
     в дорозі/прибуло до міста/готово до видачі/доставлено) замість
     попередніх трьох, тож самі гуртки й іконки в них зменшено, щоб усі
     шість влазили навіть у вузький компактний блок картки клієнта. */
  .np-delivery-stage .field-icon{ width:8px; height:8px; color:inherit; } /* той самий фікс, що й у .np-delivery-truck .field-icon вище — без color:inherit іконка лишалась сірою, навіть коли сам гурток ставав зеленим (.is-active) чи червоним (.is-critical) */
  .np-delivery-stage.is-active{ border-color:var(--good); color:var(--good); background:color-mix(in srgb, var(--good) 16%, var(--surface)); }
  .np-delivery-stage.is-critical{ border-color:var(--critical); color:var(--critical); background:color-mix(in srgb, var(--critical) 16%, var(--surface)); }
  .np-delivery-truck{
    position:absolute; top:50%; transform:translate(-50%,-58%);
    width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--surface); color:var(--good); box-shadow:0 1px 3px rgba(0,0,0,.22);
    transition:left .8s cubic-bezier(.4,0,.2,1), color .3s ease; z-index:2;
  }
  .np-delivery-truck .field-icon{ width:13px; height:13px; color:inherit; } /* без color:inherit іконка лишалась завжди сірою (.field-icon{color:var(--muted)} вище має вищий пріоритет за саму властивість, ніж успадкування від батьківського data-tone) — тон вантажівки візуально не змінювався */
  .np-delivery-truck[data-tone="warning"]{ color:var(--accent-soft-ink); }
  .np-delivery-truck[data-tone="critical"]{ color:var(--critical); }
  .np-delivery-truck[data-tone="muted"]{ color:var(--ink-2); }
  .np-delivery-truck.is-reverse .field-icon{ transform:scaleX(-1); }
  .np-delivery-truck.is-moving{ animation:np-delivery-truck-bob 1s ease-in-out infinite; }
  @keyframes np-delivery-truck-bob{
    0%, 100%{ transform:translate(-50%,-58%) translateY(0); }
    50%{ transform:translate(-50%,-58%) translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce){
    .np-delivery-truck{ transition:none; }
    .np-delivery-truck.is-moving{ animation:none; }
    .np-delivery-track-fill{ transition:none; }
  }

  .perm-groups{ display:flex; flex-direction:column; gap:12px; }
  .perm-group{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
  .perm-group-title{ font-weight:700; font-size:12.5px; margin-bottom:6px; }
  .perm-row{ display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; }
  .perm-row input[type="checkbox"]{ width:auto; accent-color:var(--accent); cursor:pointer; }
  .perm-row label{ cursor:pointer; }

  .role-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:600; background:var(--surface-3); color:var(--ink-2); }
  .role-badge.system{ background:var(--accent-soft); color:var(--accent-soft-ink); }
  .status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
  .status-dot.on{ background:var(--good); }
  .status-dot.off{ background:var(--muted); }

  @media (max-width:880px){
    .access-layout{ flex-direction:column; }
    .subnav{ width:100%; flex-direction:row; overflow-x:auto; }
  }

  /* ---- Телефон / вузькі екрани (≤880px) ----
     Бічне меню — висувна панель (кнопка ☰ у шапці, клас nav-open на body,
     setNavOpen() в app.js); шапка — у два рядки (заголовок і кнопки, під
     ними пошук на всю ширину); картки/форми (.modal) — на весь екран;
     колонка «Обговорення» в угоді — під полями, а не поруч; таблиці й
     канбан гортаються по горизонталі всередині себе, а не разом зі
     сторінкою; поля вводу 16px — щоб iOS не збільшував сторінку при
     фокусі. */
  /* PWA: кнопка «Встановити додаток» у бічному меню й тост оновлення */
  .sidebar-install{ padding:0 6px; }
  .sidebar-install .btn{ width:100%; justify-content:center; color:#cfe3f5; border:1px dashed rgba(139,190,224,0.35); }
  .sidebar-install .btn:hover{ background:rgba(139,190,224,0.12); }
  .toast-update{ display:flex; align-items:center; gap:10px; }
  .toast-update-btn{ background:var(--accent); color:#fff; border:none; border-radius:6px; padding:5px 10px; font-weight:700; cursor:pointer; font-size:12.5px; }
  .nav-toggle{ display:none; }
  .nav-backdrop{ display:none; }
  @media (max-width:880px){
    html, body{ overflow-x:hidden; }
    .app{ display:block; }
    .main{ width:100%; overflow-x:clip; }
    /* Меню — поверх усього, за межами екрана; nav-open висуває */
    .sidebar{
      position:fixed; left:0; top:0; bottom:0; height:100dvh; width:min(280px, 84vw); z-index:160;
      transform:translateX(-102%); transition:transform .22s ease; box-shadow:12px 0 40px -12px rgba(0,0,0,.45);
      padding:16px 12px; gap:16px;
    }
    body.nav-open .sidebar{ transform:translateX(0); }
    .nav-backdrop{ position:fixed; inset:0; background:rgba(11,11,11,.45); z-index:150; opacity:0; pointer-events:none; transition:opacity .2s ease; }
    body.nav-open .nav-backdrop{ display:block; opacity:1; pointer-events:auto; }
    .nav-backdrop{ display:block; }
    .nav-toggle{ display:inline-flex; padding:6px; flex:none; }
    .nav-item{ padding:10px 10px; font-size:14.5px; }
    /* Шапка: рядок 1 — ☰, бейдж, заголовок, дзвіночок, аватар;
       рядок 2 — пошук і «+ Додати» на всю ширину */
    .topbar{ flex-wrap:wrap; gap:8px 10px; padding:10px 12px; }
    .topbar h1{ font-size:17px; line-height:1.2; }
    .topbar-sub{ display:none; }
    .topbar .section-badge{ width:34px; height:34px; border-radius:9px; }
    .topbar > div:not(.search):not(.notif-bell-wrap):not(.user-chip):not(.section-badge){ flex:1 1 0; min-width:0; }
    .topbar .search{ order:10; flex:1 1 100%; width:auto; margin:0; }
    .topbar #quick-add-btn{ order:11; }
    .topbar #copy-link-btn, .topbar #lang-toggle-btn{ display:none; }
    .topbar .user-chip{ padding-left:6px; margin-left:0; border-left:none; }
    .topbar .user-chip-name{ display:none; }
    .topbar #theme-toggle-btn{ padding:6px; }
    .notif-menu{ right:8px; left:8px; width:auto; max-width:none; }
    .content{ padding:12px 12px 80px; }
    /* Форми */
    .field-row, .field-row.field-row-3, .field-row.field-row-4{ grid-template-columns:1fr; }
    .np-address-row{ grid-template-columns:1fr; }
    input, select, textarea{ font-size:16px; }
    .btn{ min-height:38px; }
    /* Картки/форми — на весь екран */
    .modal, .modal.wide, .modal.modal-order, .modal.modal-deal-split, .modal.modal-sm{ max-width:100vw; width:100vw; border-left:none; }
    .modal-head{ padding:12px 14px; }
    .modal-body{ padding:14px; }
    .modal-foot{ padding:10px 14px; gap:8px; flex-wrap:wrap; }
    .modal-foot > div{ display:flex; gap:8px; flex-wrap:wrap; }
    .modal-body-wrap{ flex-direction:column; overflow-y:auto; }
    .deal-chat-col{ width:100%; border-right:none; border-top:1px solid var(--border); order:2; min-height:320px; max-height:60vh; }
    .deal-main-col{ order:1; flex:none; min-height:0; }
    .deal-main-col .modal-body{ overflow:visible; }
    /* Таблиці — горизонтальна прокрутка всередині */
    .table-wrap{ border-radius:10px; }
    #order-items-table, .order-items-edit{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
    #order-items-table table{ min-width:720px; }
    .modal.modal-order #order-items-table td:first-child{ min-width:180px; }
    .order-item-manual-grid{ grid-template-columns:1fr 1fr; }
    /* Канбан: колонки вужчі, дошка гортається пальцем */
    .board{ height:auto; min-height:60vh; gap:10px; }
    .column{ width:min(280px, 82vw); }
    .kanban-toolbar{ gap:8px; margin-bottom:10px; }
    .type-filter{ margin-bottom:8px; }
    /* Списки з інструментами */
    .list-toolbar{ justify-content:flex-start; }
    .task-row{ flex-wrap:wrap; }
    .task-actions{ width:100%; justify-content:flex-end; }
    .np-shipment-card{ gap:8px; }
    .calendar-range-label{ margin-left:0; }
    /* Спливні меню менеджера, попапи — в межах екрана */
    .manager-contact-popover{ max-width:calc(100vw - 16px); }
    .toast-wrap{ left:8px; right:8px; bottom:8px; }
    .toast{ max-width:none; }
  }

  /* ---- Пошта ---- */
  .mail-ic{ width:16px; height:16px; }
  .mail-empty{ padding:32px 16px; text-align:center; color:var(--muted); font-size:13px; }
  .mail-empty-state{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:60px 20px; text-align:center; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; box-shadow:var(--shadow);
  }
  .mail-empty-state-title{ font-size:16px; font-weight:700; color:var(--ink); }
  .mail-empty-state-sub{ font-size:13px; color:var(--ink-2); max-width:420px; }

  .mail-layout{
    /* Ширину списку листів тягне мишка (--mail-list-w, зберігається в
       localStorage), висоту виставляє mailApplyLayoutHeight() «до низу
       вікна» — 680px лишається лише як запасне значення. */
    display:grid; grid-template-columns:220px var(--mail-list-w, 340px) 1fr; height:680px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  /* Згорнута панель скриньок: лишається вузька смужка з аватарками
     скриньок і значками папок — перемикатись можна, не розгортаючи. */
  .mail-layout.is-side-collapsed{ grid-template-columns:52px var(--mail-list-w, 340px) 1fr; }
  .mail-layout.is-side-collapsed .mail-account-info,
  .mail-layout.is-side-collapsed .mail-account-sync,
  .mail-layout.is-side-collapsed .mail-account-row [data-mail-edit-account],
  .mail-layout.is-side-collapsed .mail-add-account,
  .mail-layout.is-side-collapsed .mail-folder-name,
  .mail-layout.is-side-collapsed .mail-folders-empty{ display:none; }
  .mail-layout.is-side-collapsed .mail-accounts{ padding:8px 6px; }
  .mail-layout.is-side-collapsed .mail-account-row{ padding:5px; justify-content:center; }
  .mail-layout.is-side-collapsed .mail-folders{ padding:4px 6px 10px; }
  .mail-layout.is-side-collapsed .mail-folder-row{ justify-content:center; padding:8px 4px; position:relative; }
  .mail-layout.is-side-collapsed .mail-folder-badge{
    position:absolute; top:2px; right:2px; padding:0 4px; font-size:9.5px; line-height:14px;
  }
  .mail-folder-ic{ display:flex; flex:none; color:var(--muted); }
  .mail-folder-ic .mail-ic{ width:15px; height:15px; }
  .mail-folder-row.active .mail-folder-ic{ color:var(--ink); }

  /* Межа між списком листів і самим листом. Вузька смужка на правому краї
     списку: сама непомітна, підсвічується під курсором. */
  .mail-resizer{
    position:absolute; top:0; right:-3px; width:7px; height:100%;
    cursor:col-resize; z-index:3; background:transparent;
  }
  .mail-resizer:hover{ background:color-mix(in srgb, var(--accent) 35%, transparent); }
  body.is-col-resizing{ cursor:col-resize; user-select:none; }
  body.is-col-resizing iframe{ pointer-events:none; }
  /* Кнопка згортання панелі стоїть у тулбарі, а не в рядку листа, тож
     клас .mail-row-icon-btn (який ховається до наведення на рядок) тут
     треба скасувати — інакше кнопка була б невидимою й некликабельною. */
  /* Розмови (ланцюжки листів). Шапка розмови виглядає як звичайний рядок,
     але має стрілку зліва й лічильник біля теми; листи всередині —
     з відступом і тонкою лінією-«гілкою» зліва, щоб одразу було видно,
     що вони належать розмові вище. */
  /* Смужка «У CRM» під шапкою листа: кого впізнали за адресою і що з цим
     листом можна зробити. Навмисно тиха — це підказка, а не головне в
     листі; кнопки стають помітними лише під курсором. */
  .mail-crm-panel{
    padding:8px 18px; border-bottom:1px solid var(--border); background:var(--surface-2);
    display:flex; flex-direction:column; gap:6px;
  }
  .mail-crm-panel.is-quiet{ flex-direction:row; align-items:center; gap:8px; }
  .mail-crm-panel.is-quiet svg{ width:14px; height:14px; opacity:.6; }
  .mail-crm-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .mail-crm-label{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); flex:none; }
  .mail-crm-label svg{ width:14px; height:14px; }
  .mail-crm-who{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
  .mail-crm-actions{ display:flex; align-items:center; gap:4px; margin-left:auto; flex:none; }
  .mail-crm-chip{
    display:inline-flex; align-items:center; gap:5px; max-width:320px;
    padding:3px 9px; border-radius:99px; border:1px solid var(--border);
    background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; font-weight:600;
    cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mail-crm-chip:hover{ border-color:var(--accent); color:var(--accent); }
  .mail-crm-chip svg{ width:13px; height:13px; flex:none; }
  .mail-crm-links{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-left:2px; }
  .mail-crm-link-chip{
    display:inline-flex; align-items:center; gap:5px; padding:2px 4px 2px 8px; border-radius:99px;
    background:color-mix(in srgb, var(--good) 14%, transparent); color:var(--good);
    font-size:12px; font-weight:600;
  }
  .mail-crm-link-chip svg{ width:13px; height:13px; }
  .mail-crm-unlink{
    border:none; background:none; cursor:pointer; color:inherit; opacity:.6;
    font-size:12px; line-height:1; padding:2px 4px; border-radius:99px;
  }
  .mail-crm-unlink:hover{ opacity:1; background:color-mix(in srgb, var(--critical) 18%, transparent); color:var(--critical); }

  .mail-thread-toggle{
    flex:none; width:20px; height:20px; padding:0; border:none; background:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--muted); border-radius:6px;
  }
  .mail-thread-toggle:hover{ background:var(--surface-3); color:var(--ink); }
  .mail-thread-toggle .mail-ic{ width:14px; height:14px; }
  .mail-thread-head.is-open{ background:var(--surface-2); }
  /* Тема розмови + лічильник: лічильник не має «з'їдатись» разом із
     обрізаною темою, тому це окремий flex-елемент, який не стискається. */
  .mail-thread-subject{ display:flex; align-items:center; gap:6px; }
  .mail-thread-subject-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-thread-count{
    flex:none; padding:0 6px; border-radius:99px;
    background:var(--surface-3); color:var(--ink-2);
    font-size:10.5px; font-weight:700; font-family:"JetBrains Mono"; vertical-align:1px;
  }
  .mail-message-row.unread .mail-thread-count{ background:var(--accent); color:var(--accent-ink); }
  .mail-message-row.is-thread-child{
    padding-left:38px; background:var(--surface-2);
  }
  .mail-message-row.is-thread-child::before{
    content:""; position:absolute; left:21px; top:0; bottom:0; width:2px; background:var(--border);
  }
  .mail-message-row.is-thread-child:hover{ background:var(--surface-3); }

  .mail-list-toolbar .mail-side-toggle{ flex:none; opacity:1; pointer-events:auto; color:var(--muted); }
  .mail-list-toolbar .mail-side-toggle:hover{ color:var(--ink); background:var(--surface-3); }
  .mail-side{ border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; min-width:0; }
  .mail-accounts{ padding:10px; display:flex; flex-direction:column; gap:4px; }
  .mail-account-row{
    display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; cursor:pointer;
    transition:background .12s;
  }
  .mail-account-row:hover{ background:var(--surface-2); }
  .mail-account-row.active{ background:var(--accent-soft); }
  .mail-account-avatar{
    width:28px; height:28px; border-radius:50%; background:var(--ink-2); color:#fff; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    position:relative; overflow:hidden;
  }
  /* Аватарка скриньки: картинка лежить ПОВЕРХ ініціалів. Якщо файл раптом
     зник із диска, <img> прибирає себе сам (onerror) — і знизу знову
     видно дві літери, а не порожній кружечок. */
  .mail-account-avatar img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
  }
  .mail-account-avatar-lg{ width:72px; height:72px; font-size:24px; }
  .mail-account-info{ min-width:0; flex:1; }
  .mail-account-email{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mail-account-sub{ font-size:11px; color:var(--muted); display:flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mail-account-status-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; }
  .mail-account-status-ok{ background:var(--good); }
  .mail-account-status-error{ background:var(--critical); }
  .mail-account-status-pending{ background:var(--warning); }
  .mail-account-sync, .mail-account-row [data-mail-edit-account]{
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:none; border:none; color:var(--muted); cursor:pointer; flex:none;
  }
  .mail-account-sync:hover, .mail-account-row [data-mail-edit-account]:hover{ background:var(--surface-3); color:var(--ink); }
  .mail-account-sync.spinning svg{ animation:mail-spin 1s linear infinite; }
  @keyframes mail-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .mail-add-account{ margin:2px 10px 10px; }
  .mail-folders{ padding:4px 10px 10px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--border); }
  .mail-folders-empty{ padding:10px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .mail-folder-row{
    display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--ink-2);
  }
  .mail-folder-row:hover{ background:var(--surface-2); }
  .mail-folder-row.active{ background:var(--surface-3); color:var(--ink); font-weight:600; }
  .mail-folder-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mail-folder-badge{
    background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:700; border-radius:99px;
    padding:1px 6px; font-family:"JetBrains Mono";
  }

  .mail-list-pane{ border-right:1px solid var(--border); display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative; }
  .mail-list-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); flex:none; gap:10px; }
  .mail-list-toolbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
  .mail-list-toolbar-right{ display:flex; align-items:center; gap:6px; flex:none; }
  .mail-list-toolbar .bulk-count{ font-weight:600; font-size:13px; white-space:nowrap; }
  .mail-list-title{ font-weight:700; font-size:14px; }
  /* Прапорці масового вибору листів — той самий підхід, що й у таблицях
     (.col-check), але без фіксованої 36px-колонки (список листів не
     табличний), тож власний компактний клас. Завжди видимі (не лише при
     наведенні), як прапорці в «Товари»/«Замовлення» — надійніше й
     передбачуваніше за приховані до наведення. */
  .mail-row-check{ flex:none; display:flex; align-items:center; }
  .mail-row-check input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }
  .mail-message-row.checked{ box-shadow: inset 3px 0 0 var(--accent); }
  /* Рядок пошуку над списком листів. Окремим рядком під тулбаром, а не
     всередині нього: у вузькій колонці (340 пк) поле й три перемикачі
     інакше просто не помістились би поруч із «Написати». */
  .mail-search-bar{
    padding:8px 12px; border-bottom:1px solid var(--border); flex:none;
    display:flex; flex-direction:column; gap:6px; background:var(--surface);
  }
  .mail-search-field{
    display:flex; align-items:center; gap:6px; padding:0 8px;
    border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  }
  .mail-search-field:focus-within{ border-color:var(--accent); background:var(--surface); }
  .mail-search-field .mail-ic{ width:15px; height:15px; color:var(--muted); flex:none; }
  .mail-search-field input{
    flex:1; min-width:0; border:none; background:none; outline:none;
    font:inherit; font-size:13px; color:var(--ink); padding:7px 0;
  }
  /* Власний хрестик браузера в type=search прибираємо — у нас свій. */
  .mail-search-field input::-webkit-search-cancel-button{ display:none; }
  .mail-search-clear{
    border:none; background:none; cursor:pointer; color:var(--muted);
    font-size:12px; line-height:1; padding:3px 2px; flex:none;
  }
  .mail-search-clear:hover{ color:var(--critical); }
  .mail-search-filters{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .mail-search-chip{
    border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
    font:inherit; font-size:11.5px; padding:3px 9px; border-radius:99px; cursor:pointer;
    white-space:nowrap;
  }
  .mail-search-chip:hover{ border-color:var(--border-strong); color:var(--ink); }
  .mail-search-chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-soft-ink); font-weight:600; }
  .mail-search-summary{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:7px 14px; border-bottom:1px solid var(--border); flex:none;
    background:var(--surface-2); font-size:12px; color:var(--ink-2);
  }
  .mail-search-exit{
    border:none; background:none; cursor:pointer; color:var(--accent);
    font:inherit; font-size:12px; padding:0; flex:none;
  }
  .mail-search-exit:hover{ text-decoration:underline; }
  /* У результатах пошуку по всій скриньці — де саме лежить лист. */
  .mail-message-folder{
    display:inline-flex; align-items:center; gap:4px; margin-top:3px;
    font-size:11px; color:var(--muted);
  }
  .mail-message-folder .mail-ic{ width:12px; height:12px; }

  .mail-message-list{ flex:1; overflow-y:auto; }
  .mail-date-group{
    padding:9px 14px 5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); background:var(--surface); position:sticky; top:0; z-index:1;
  }
  .mail-message-row{
    display:flex; gap:10px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background .12s; position:relative;
  }
  .mail-message-row:hover{ background:var(--surface-2); }
  .mail-message-row.active{ background:var(--accent-soft); }
  .mail-message-row.unread .mail-message-from,
  .mail-message-row.unread .mail-message-subject{ font-weight:700; color:var(--ink); }
  .mail-message-avatar{
    width:34px; height:34px; border-radius:50%; flex:none; color:#fff; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; letter-spacing:.02em;
  }
  /* .mail-message-main більше НЕ ділить ширину з .mail-row-actions (той тепер
     position:absolute, див. нижче) — тема й прев'ю листа тягнуться на всю
     ширину рядка, а не обриваються по центру, лишаючи порожнє місце праворуч
     від кнопок. Резерв під кнопки лишається лише в .mail-message-top нижче,
     бо тільки перший рядок (ім'я/дата) фізично на одній висоті з ними. */
  .mail-message-main{ min-width:0; flex:1; }
  .mail-message-top{
    display:flex; align-items:baseline; justify-content:space-between; gap:6px;
    padding-right:92px; /* місце під .mail-row-actions (4 кнопки), щоб дата не наїжджала на них */
  }
  .mail-message-from{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mail-message-date-wrap{ display:flex; align-items:center; gap:4px; flex:none; }
  .mail-message-attach{ display:flex; color:var(--muted); }
  .mail-message-attach .mail-ic{ width:12px; height:12px; }
  .mail-message-date{ font-size:11px; color:var(--muted); flex:none; font-family:"JetBrains Mono"; }
  .mail-message-subject{ font-size:13px; color:var(--ink-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mail-message-subject .mail-ic{ width:11px; height:11px; vertical-align:-1px; opacity:.6; }
  /* Прев'ю листа тепер на 2 рядки (було 1) — заповнює простір, який рядок і
     так резервує під висоту з відступами, замість того щоб лишати його
     порожнім (особливо помітно було при підсвіченні рядка фоном на
     наведенні/виборі). line-clamp — стандартний спосіб обрізати багаторядковий
     текст із "…", підтримується в усіх сучасних браузерах. */
  .mail-message-snippet{
    font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word;
  }
  .mail-star{
    background:none; border:none; padding:2px; cursor:pointer; color:var(--border-strong); flex:none; margin-top:1px;
  }
  .mail-star svg{ width:15px; height:15px; }
  .mail-star.on, .mail-star:hover{ color:var(--warning); }
  .mail-star.on svg, button.icon-btn.on svg{ fill:var(--warning); }
  /* Кластер дій рядка листа (мітка непрочитаного, закріпити, зірочка,
     видалити). Зірочка (.mail-star) лишається видимою завжди, як і раніше;
     .mail-row-icon-btn (мітка непрочитаного, закріпити, видалити) — нові
     дії, що зазвичай ховаються і зʼявляються лише при наведенні на рядок,
     як в Outlook, аби не захаращувати список іконками для кожного листа.
     Названо саме так (а не просто .icon-btn-sm) навмисно: раніше ця бара
     назва збігалась із компактним модифікатором .icon-btn.icon-btn-sm
     (значки телефону/пошти/сайту в шапці компанії, значок zakupivli.pro
     біля ID ProZorro, «Прибрати з групи» в чаті) — opacity:0 звідси
     ненавмисно ховало й ті зовсім інші значки, бо специфічність одного
     класу однакова незалежно від контексту. Знайдено й виправлено разом
     із додаванням значка zakupivli.pro. */
  /* position:absolute (не звичайний flex-сусід .mail-message-main) — інакше
     цей кластер відбирав би ширину рядка на ВСІХ трьох рядках тексту (тема,
     прев'ю), хоча візуально стоїть лише навпроти першого (ім'я/дата). Через
     це тема й прев'ю обривались по центру рядка, лишаючи порожнє місце
     праворуч, замість того щоб тягнутись до самого краю. Прибитий до
     верхнього правого кута рядка (top/right = ті самі 11px/14px, що й
     padding рядка) — .mail-message-top вище резервує під нього місце.  */
  .mail-row-actions{ display:flex; align-items:center; gap:1px; position:absolute; top:11px; right:14px; }
  .mail-row-icon-btn{
    background:none; border:none; padding:3px; border-radius:6px; cursor:pointer; color:var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .12s, color .12s, background .12s;
  }
  .mail-row-icon-btn svg{ width:14px; height:14px; }
  .mail-row-icon-btn:hover{ background:var(--surface-2); color:var(--ink-2); }
  .mail-message-row:hover .mail-row-icon-btn,
  .mail-message-row.active .mail-row-icon-btn{ opacity:1; pointer-events:auto; }
  .mail-row-delete:hover{ color:var(--critical); }
  /* "Закріпити" — лишається видимим і без наведення, коли лист уже
     закріплений (щоб можна було одразу побачити й відкріпити). */
  .mail-row-pin.on{ opacity:1; pointer-events:auto; color:var(--accent); }
  .mail-row-pin.on svg{ fill:var(--accent); }
  /* Мітка непрочитаного — суцільна крапка, поки лист непрочитаний (видно
     завжди, без наведення — так само, як жирний шрифт теми/відправника),
     контурна (клікабельна лише при наведенні) — коли вже прочитаний, щоб
     можна було повернути "непрочитаним" для нагадування собі пізніше. */
  .mail-row-toggle-read.on{ opacity:1; pointer-events:auto; color:var(--accent); }
  .mail-row-toggle-read.on svg{ fill:var(--accent); }
  .mail-load-more{ display:block; width:calc(100% - 28px); margin:10px 14px; }

  .mail-detail-pane{ display:flex; flex-direction:column; min-width:0; overflow:hidden; }
  .mail-detail-toolbar{ display:flex; align-items:center; gap:2px; padding:10px 16px; border-bottom:1px solid var(--border); flex:none; }
  .mail-detail-toolbar .icon-btn{
    width:30px; height:30px; border-radius:8px; background:none; color:var(--ink-2); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .mail-detail-toolbar .icon-btn:hover{ background:var(--surface-2); color:var(--ink); opacity:1; }
  .mail-detail-toolbar .icon-btn.on{ color:var(--warning); }
  .mail-toolbar-spacer{ flex:1; }
  .mail-detail-header{ padding:14px 18px; border-bottom:1px solid var(--border); flex:none; }
  .mail-detail-subject{ font-size:16px; font-weight:700; margin-bottom:8px; }
  .mail-detail-meta{ font-size:12.5px; color:var(--ink-2); line-height:1.6; }
  .mail-detail-meta b{ color:var(--muted); font-weight:600; margin-right:3px; }
  .mail-detail-date{ color:var(--muted); margin-top:2px; }
  .mail-attachments{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px; border-bottom:1px solid var(--border); flex:none; }
  .mail-attachment-chip{
    display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; background:var(--surface-2);
    color:var(--ink-2); text-decoration:none; font-size:12px; border:1px solid var(--border);
  }
  .mail-attachment-chip:hover{ background:var(--surface-3); color:var(--ink); }
  .mail-attachment-chip svg{ width:13px; height:13px; }
  .mail-attachment-size{ color:var(--muted); }
  .mail-detail-body{ flex:1; overflow-y:auto; padding:16px 18px; }
  .mail-body-iframe{ width:100%; height:300px; border:none; }
  .mail-body-text{ white-space:pre-wrap; word-break:break-word; font-size:13.5px; line-height:1.6; color:var(--ink); }

  .modal-wide{ max-width:640px; }
  .mail-advanced-toggle{ font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; user-select:none; }
  .mail-advanced{ display:flex; flex-direction:column; gap:12px; padding:12px; background:var(--surface-2); border-radius:10px; }
  .mail-hint{ font-size:12px; color:var(--muted); line-height:1.5; }
  .mail-file-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .mail-file-chip{
    display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:8px; background:var(--surface-2);
    font-size:12px; color:var(--ink-2); border:1px solid var(--border);
  }
  .mail-file-chip b{ cursor:pointer; color:var(--muted); font-weight:700; }
  .mail-file-chip b:hover{ color:var(--critical); }

  @media (max-width:1100px){
    /* На вузькому екрані ширину списку обмежуємо самі — навіть якщо
       колись розтягнули її мишкою на широкому моніторі. */
    .mail-layout{ grid-template-columns:180px minmax(240px, min(var(--mail-list-w, 340px), 42vw)) 1fr; }
    .mail-layout.is-side-collapsed{ grid-template-columns:52px minmax(240px, min(var(--mail-list-w, 340px), 46vw)) 1fr; }
  }
  @media (max-width:880px){
    /* Телефон: колонки одна під одною, тож і висота «до низу вікна» тут
       ні до чого — блок росте за вмістом (див. mailApplyLayoutHeight,
       яка на цій ширині нічого не робить). */
    .mail-layout, .mail-layout.is-side-collapsed{ display:flex; flex-direction:column; height:auto !important; }
    .mail-side, .mail-list-pane, .mail-detail-pane{ border-right:none; border-bottom:1px solid var(--border); max-height:340px; }
    .mail-resizer{ display:none; }
  }

  /* ---- Спільний макет розмов (список розмов + тред) — розділ «Чат» ---- */
  .tg-layout{
    display:grid; grid-template-columns:320px 1fr; height:680px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow); overflow:hidden;
  }
  .tg-chat-list-pane{ border-right:1px solid var(--border); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
  .tg-list-toolbar{ padding:12px 14px; border-bottom:1px solid var(--border); flex:none; }
  .tg-list-toolbar input{ width:100%; }
  .tg-chat-list{ flex:1; overflow-y:auto; }
  .tg-chat-row{
    display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--border);
    cursor:pointer; transition:background .12s;
  }
  .tg-chat-row:hover{ background:var(--surface-2); }
  .tg-chat-row.active{ background:var(--accent-soft); }
  .tg-chat-row.unread .tg-chat-name{ font-weight:800; color:var(--ink); }
  .tg-chat-row.unread .tg-chat-snippet{ color:var(--ink-2); font-weight:600; }
  .tg-chat-avatar{
    width:32px; height:32px; border-radius:50%; background:#26A5E4; color:#fff; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
    position:relative;
  }
  .tg-chat-main{ min-width:0; flex:1; }
  .tg-chat-top{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
  .tg-chat-name{ font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tg-chat-date{ font-size:11px; color:var(--muted); flex:none; font-family:"JetBrains Mono"; }
  .tg-chat-snippet{ font-size:12.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tg-chat-badge{
    background:#26A5E4; color:#fff; font-size:10.5px; font-weight:700; border-radius:99px;
    padding:2px 7px; font-family:"JetBrains Mono"; flex:none; align-self:center;
  }

  .tg-thread-pane{ display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--page); }
  .tg-thread-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px;
    border-bottom:1px solid var(--border); flex:none; background:var(--surface);
  }
  .tg-thread-title{ display:flex; align-items:center; gap:10px; min-width:0; }
  .tg-thread-name{ font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tg-thread-sub{ font-size:12px; color:var(--muted); }

  .tg-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:2px; }
  .tg-load-older{ align-self:center; margin-bottom:10px; }
  .tg-bubble-row{ display:flex; margin:3px 0; }
  .tg-bubble-row.out{ justify-content:flex-end; }
  .tg-bubble-row.in{ justify-content:flex-start; }
  .tg-bubble{
    max-width:62%; padding:8px 12px; border-radius:14px; font-size:13.5px; line-height:1.5;
    box-shadow:0 1px 1px rgba(18,32,45,0.06);
  }
  .tg-bubble.in{ background:var(--surface); color:var(--ink); border-bottom-left-radius:4px; }
  .tg-bubble.out{ background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; }
  .tg-bubble.failed{ background:var(--surface-2); color:var(--ink); border:1px dashed var(--critical); }
  .tg-bubble.pending{ opacity:.68; }
  .tg-bubble-text{ white-space:pre-wrap; word-break:break-word; }
  .tg-bubble-meta{ font-size:10.5px; margin-top:4px; opacity:.75; font-family:"JetBrains Mono"; }
  .tg-bubble.failed .tg-bubble-meta{ color:var(--critical); opacity:1; }

  .tg-composer{
    display:flex; align-items:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--border);
    background:var(--surface); flex:none;
  }
  .tg-composer textarea{
    flex:1; resize:none; min-height:44px; max-height:160px; height:44px; padding:11px 14px;
    border-radius:14px; border:1px solid var(--border); background:var(--page); color:var(--ink); font-size:14px;
    line-height:1.4; font-family:inherit; overflow-y:auto;
  }
  .tg-composer #tg-send-btn, .tg-composer #chat-send-btn{ flex:none; width:44px; height:44px; padding:0; border-radius:50%; justify-content:center; }
  .tg-composer #tg-send-btn svg, .tg-composer #chat-send-btn svg{ width:16px; height:16px; }

  @media (max-width:1100px){
    .tg-layout{ grid-template-columns:260px 1fr; }
  }
  @media (max-width:880px){
    .tg-layout{ display:flex; flex-direction:column; height:auto; }
    .tg-chat-list-pane{ border-right:none; border-bottom:1px solid var(--border); max-height:280px; }
    .tg-bubble{ max-width:82%; }
  }

  /* Розділ «Чат» перефарбовує аватарки/бульбашки спільного макету .tg-*
     вище у власний колір (--section-accent розділу «Чат», #7A6FD0 — див.
     SECTION_ACCENTS у app.js). */
  .chat-layout .tg-chat-avatar{ background:#7A6FD0; }
  .chat-layout .tg-chat-avatar .avatar-icon{ color:#fff; }
  .chat-layout .tg-bubble.out{ background:#7A6FD0; color:#fff; }
  .chat-bubble-sender{ font-size:11.5px; font-weight:700; color:var(--section-accent, #7A6FD0); margin-bottom:2px; }
  .chat-bubble-attachments{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
  .chat-bubble-attachments .mail-attachment-chip{ background:rgba(255,255,255,.15); }
  .tg-bubble.in .chat-bubble-attachments .mail-attachment-chip{ background:var(--surface-2); }
  .chat-attach-btn{ flex:none; width:44px; height:44px; padding:0; border-radius:50%; justify-content:center; }
  .chat-attach-btn svg{ width:16px; height:16px; }

  /* ---- «Як у Telegram»: онлайн-статус, групи ---- */
  .tg-avatar-wrap{ position:relative; display:inline-flex; flex:none; }
  .tg-online-dot{
    position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
    background:var(--good); border:2px solid var(--surface); box-sizing:content-box;
  }
  .chat-group-avatar{ background:var(--section-accent, #7A6FD0); color:#fff; }
  .chat-list-toolbar{ display:flex; justify-content:flex-end; }

  /* ---- Реакції ---- */
  .chat-reactions-row{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; position:relative; }
  /* Реакції + час в одному рядку (chatBubbleFootHtml в app.js): реакції
     зліва, час притиснутий до правого краю бульбашки й вирівняний по низу
     реакцій. gap між ними — щоб у вузькій бульбашці час не прилипав. */
  .chat-bubble-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
  .chat-bubble-foot .chat-reactions-row{ flex:1 1 auto; min-width:0; }
  .chat-bubble-foot .tg-bubble-meta{ flex:none; margin-top:6px; white-space:nowrap; }
  .chat-reaction-pill{
    display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-family:"JetBrains Mono";
    padding:2px 7px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2);
    color:var(--ink-2); cursor:pointer; line-height:1.5;
  }
  .tg-bubble.out .chat-reaction-pill{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:inherit; }
  .chat-reaction-pill.mine{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-soft-ink); }

  /* ---- Кнопка «⋮» — тригер контекстного меню повідомлення (замість
     колишнього рядка іконок при наведенні) ---- */
  .tg-bubble{ position:relative; }
  .chat-bubble-menu-btn{
    position:absolute; top:2px; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    border-radius:7px; border:none; background:none; color:var(--ink-2); cursor:pointer;
    opacity:0; pointer-events:none; transition:opacity .12s, background-color .12s;
  }
  .tg-bubble.out .chat-bubble-menu-btn{ right:2px; color:rgba(255,255,255,.85); }
  .tg-bubble.in .chat-bubble-menu-btn{ right:2px; }
  .chat-bubble-menu-btn svg{ width:14px; height:14px; }
  .tg-bubble-row:hover .chat-bubble-menu-btn{ opacity:1; pointer-events:auto; }
  .chat-bubble-menu-btn:hover{ background:var(--surface-2); color:var(--ink); }
  .tg-bubble.out .chat-bubble-menu-btn:hover{ background:rgba(255,255,255,.22); color:#fff; }

  /* ---- Контекстне меню повідомлення (правий клік / кнопка «⋮») — у стилі
     Telegram Web: рядок емодзі-реакцій зверху, список дій знизу.
     position:fixed за координатами кліку (left/top — inline style), після
     рендеру підтиснуте під межі вікна через clampFixedMenuToViewport(). ---- */
  .chat-ctx-menu{
    position:fixed; z-index:120; min-width:220px; max-width:260px; background:var(--surface);
    border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:8px;
    display:flex; flex-direction:column; gap:6px; animation:chat-ctx-pop .12s ease-out;
  }
  @keyframes chat-ctx-pop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
  @media (prefers-reduced-motion: reduce){ .chat-ctx-menu{ animation:none; } }
  .chat-ctx-reactions{ display:flex; justify-content:space-between; gap:2px; padding:2px 2px 6px; border-bottom:1px solid var(--border); }
  .chat-ctx-reaction-btn{
    flex:1; font-size:19px; line-height:1; padding:5px 0; border-radius:9px; cursor:pointer; background:none; border:none;
    text-align:center;
  }
  .chat-ctx-reaction-btn:hover{ background:var(--surface-2); transform:scale(1.15); }
  .chat-ctx-items{ display:flex; flex-direction:column; gap:1px; }
  .chat-ctx-item{
    display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:8px; border:none; background:none;
    color:var(--ink); font-size:13px; text-align:left; cursor:pointer; width:100%;
  }
  .chat-ctx-item svg, .chat-ctx-item .field-icon{ width:16px; height:16px; flex:none; color:var(--ink-2); }
  .chat-ctx-item:hover{ background:var(--surface-2); }
  .chat-ctx-item-danger, .chat-ctx-item-danger svg, .chat-ctx-item-danger .field-icon{ color:var(--critical); }
  .chat-ctx-item-danger:hover{ background:color-mix(in srgb, var(--critical) 12%, transparent); }
  .chat-ctx-divider{ height:1px; background:var(--border); margin:4px 2px; }

  /* ---- «↪ Переслано від {ім'я}» ---- */
  .chat-forwarded-label{
    display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--section-accent, #7A6FD0);
    opacity:.85; margin-bottom:3px;
  }
  .chat-forwarded-label svg{ width:12px; height:12px; }
  .tg-bubble.out .chat-forwarded-label{ color:inherit; }

  /* ---- Режим множинного вибору («Вибрати») ---- */
  .tg-bubble-row.selecting{ cursor:pointer; }
  .tg-bubble-row.selecting .chat-bubble-menu-btn{ display:none; }
  .chat-select-checkbox{
    flex:none; align-self:center; width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; color:#fff; background:var(--surface);
    transition:background-color .1s, border-color .1s;
  }
  .chat-select-checkbox svg{ width:12px; height:12px; }
  .chat-select-checkbox.checked{ background:var(--accent); border-color:var(--accent); }
  .tg-bubble-row.selected .tg-bubble{ outline:2px solid var(--accent); outline-offset:1px; }
  .chat-selection-bar, .deal-chat-selection-bar{
    display:flex; align-items:center; gap:12px; padding:0 16px; height:56px; flex:none;
    border-bottom:1px solid var(--border); background:var(--surface);
  }
  .deal-chat-selection-bar{ height:auto; padding:10px 16px; border-bottom:1px solid var(--border); }
  .chat-selection-cancel{
    width:32px; height:32px; flex:none; border-radius:50%; border:none; background:none; color:var(--ink-2); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-selection-cancel:hover{ background:var(--surface-2); color:var(--ink); }
  .chat-selection-count{ flex:1; font-size:14px; font-weight:600; }
  .chat-selection-actions{ display:flex; gap:8px; flex:none; }

  /* ---- Піквер розмови-призначення для «Переслати» ---- */
  .modal.modal-sm{ max-width:380px; }
  .chat-forward-list{ max-height:60vh; overflow-y:auto; }
  .chat-forward-list .tg-chat-row{ cursor:pointer; }
  .chat-forward-list .tg-chat-row.forwarding{ opacity:.5; pointer-events:none; }

  /* ---- Цитата-відповідь ---- */
  .chat-reply-quote{
    border-left:3px solid var(--accent); background:rgba(0,0,0,.05); border-radius:6px; padding:4px 8px;
    margin-bottom:5px; cursor:pointer; display:flex; flex-direction:column; gap:1px;
  }
  .tg-bubble.out .chat-reply-quote{ background:rgba(255,255,255,.15); border-left-color:rgba(255,255,255,.7); }
  .chat-reply-quote-sender{ font-size:11px; font-weight:700; color:var(--section-accent, #7A6FD0); }
  .tg-bubble.out .chat-reply-quote-sender{ color:inherit; opacity:.85; }
  .chat-reply-quote-text{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
  .tg-bubble.out .chat-reply-quote-text{ color:inherit; opacity:.75; }

  /* ---- Смужка «відповідаю/редагую» над композером ---- */
  .chat-composer-bar{
    display:flex; align-items:center; gap:8px; padding:8px 16px; border-top:1px solid var(--border);
    background:var(--surface-2); font-size:12.5px; color:var(--ink-2); flex:none;
  }
  .chat-composer-bar svg{ width:14px; height:14px; flex:none; }
  .chat-composer-bar-text{ display:flex; flex-direction:column; gap:0; flex:1; min-width:0; }
  .chat-composer-bar-text span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
  .chat-composer-bar-close{ flex:none; width:22px; height:22px; border:none; background:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .chat-composer-bar-close svg{ width:13px; height:13px; }
  .chat-composer-editing{ color:var(--accent-soft-ink); }

  /* ---- Індикатор «друкує…» ---- */
  .chat-typing-indicator{ padding:2px 16px 6px; font-size:12px; color:var(--muted); font-style:italic; flex:none; }

  /* ---- Видалене повідомлення ---- */
  .chat-bubble-deleted{ opacity:.6; }
  .chat-deleted-text{ font-style:italic; }

  /* ---- Закріплене повідомлення (в бульбашці й у банері) ---- */
  .chat-bubble-pinned{ box-shadow:0 0 0 1px var(--accent) inset; }
  .chat-pinned-banner{
    display:flex; align-items:flex-start; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border);
    background:var(--surface-2); flex:none; max-height:120px; overflow-y:auto;
  }
  .chat-pinned-banner svg{ width:14px; height:14px; flex:none; margin-top:3px; color:var(--accent); }
  .chat-pinned-list{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
  .chat-pinned-item{ display:flex; gap:6px; font-size:12px; cursor:pointer; min-width:0; }
  .chat-pinned-sender{ font-weight:700; color:var(--ink-2); flex:none; }
  .chat-pinned-text{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-pinned-unpin{ flex:none; width:20px; height:20px; border:none; background:none; color:var(--muted); cursor:pointer; }
  .chat-pinned-unpin svg{ width:11px; height:11px; }

  /* ---- Підсвітка повідомлення після переходу за посиланням (відповідь/закріплене/пошук) ---- */
  .chat-msg-flash .tg-bubble{ animation:chatMsgFlash 1.5s ease-out; }
  @keyframes chatMsgFlash{
    0%{ box-shadow:0 0 0 3px var(--accent); }
    100%{ box-shadow:none; }
  }

  /* ---- Пошук у розмові ---- */
  .chat-search-pane{ flex:1; display:flex; flex-direction:column; min-height:0; }
  .chat-search-input-row{ padding:10px 16px; border-bottom:1px solid var(--border); flex:none; }
  .chat-search-input-row input{ width:100%; }
  .chat-search-results{ flex:1; overflow-y:auto; padding:8px 0; }
  .chat-search-result{ padding:8px 16px; border-bottom:1px solid var(--border); cursor:pointer; }
  .chat-search-result:hover{ background:var(--surface-2); }
  .chat-search-result-head{ display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:2px; }
  .chat-search-result-head span{ color:var(--muted); font-family:"JetBrains Mono"; font-size:11px; }
  .chat-search-result-body{ font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---- «Обговорення» угоди — вбудований міні-чат у лівій колонці картки
     угоди (openDealDetail/dealChatState в app.js, .deal-chat-col вище).
     Той самий спільний макет .tg-messages/.tg-composer/.tg-bubble/.chat-*,
     що й розділ «Чат» (стилі там не прив'язані до #view-chat), але без
     бічної панелі розмов (.tg-layout) — це один-єдиний тред. Висоту задає
     сам контейнер-колонка (.deal-chat-col .deal-chat-pane{flex:1} вище) —
     тут лише вигляд, без фіксованої висоти. */
  .deal-chat-pane{
    display:flex; flex-direction:column; min-height:0;
    background:var(--page); border:1px solid var(--border); border-radius:12px;
    overflow:hidden;
  }
  .deal-chat-pane .tg-composer{ border-radius:0 0 12px 12px; }

  /* ---- Модальні вікна груп: вибір/список учасників ---- */
  .chat-group-member-picker{ display:flex; flex-direction:column; gap:2px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:6px; }
  .chat-group-member-option{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; }
  .chat-group-member-option:hover{ background:var(--surface-2); }
  .chat-group-member-option .tg-chat-avatar{ width:26px; height:26px; font-size:11px; }
  .chat-group-member-list{ display:flex; flex-direction:column; gap:2px; max-height:240px; overflow-y:auto; }
  .chat-group-member-row{ display:flex; align-items:center; gap:8px; padding:6px 2px; }
  .chat-group-member-row .tg-chat-avatar{ width:26px; height:26px; font-size:11px; }
  .chat-group-member-name{ flex:1; min-width:0; font-size:13px; }
  /* У встановленому додатку (standalone) — відступи під «чубчик» і жест
     додому на iPhone */
  @media (display-mode: standalone){
    .topbar{ padding-top:calc(16px + env(safe-area-inset-top)); }
    @media (max-width:880px){ .topbar{ padding-top:calc(10px + env(safe-area-inset-top)); } }
    .sidebar{ padding-top:calc(16px + env(safe-area-inset-top)); }
    .modal-foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
    .content{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  }

/* Таблиця чекає на сторінку з сервера (списки компаній/постачальників/
   клієнтів тепер приходять посторінково) — злегка приглушуємо, щоб було
   видно, що дані оновлюються. */
.table-wrap.is-loading{ opacity:.55; transition:opacity .15s ease; }

/* ============ ТЕНДЕРИ (моніторинг ProZorro) ============
   Список свідомо щільний: закупівель за день набігає кілька десятків, і
   картка на пів екрана кожна перетворювала б розділ на нескінченну
   стрічку. Рядок — два рядки тексту (назва + замовник) і решта дрібними
   пілюлями праворуч. Рядок НЕ клікабельний цілком: усередині вже є і
   посилання на ProZorro, і кнопки дій. */
.tender-list{ display:flex; flex-direction:column; gap:2px; }
/* Рядок + (за потреби) розгорнутий блок позицій під ним — одне ціле, щоб
   рамка обіймала обидва, а не розривалась між ними. */
.tender-item{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  transition:border-color .12s ease;
}
.tender-item:hover{ border-color:var(--border-strong); }
.tender-item.is-open{ border-color:var(--border-strong); }
.tender-row{
  display:grid;
  grid-template-columns: 28px 22px minmax(0,1fr) 130px 86px auto;
  align-items:center; gap:10px; padding:8px 12px;
}
/* Стрілка «розгорнути» — показати, що саме купують. Повертається на 180°,
   коли рядок розгорнуто, тож стан видно й без підпису. */
.tender-expand{
  width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--muted); cursor:pointer; padding:0; border-radius:6px;
  transition:background .12s, color .12s, transform .15s;
}
.tender-expand:hover{ background:var(--surface-3); color:var(--ink); }
.tender-expand .field-icon, .tender-expand svg{ width:14px; height:14px; }
.tender-item.is-open .tender-expand{ transform:rotate(180deg); color:var(--ink); }
.tender-items{ padding:2px 12px 10px 62px; border-top:1px dashed var(--border); margin-top:2px; }
.tender-items-note{ font-size:12.5px; color:var(--ink-2); padding:8px 0; }
.tender-items-table{ width:100%; font-size:12.5px; }
.tender-items-table td{ padding:4px 8px 4px 0; vertical-align:top; border-bottom:1px solid var(--border); }
.tender-items-table tr:last-child td{ border-bottom:none; }
.tender-items-qty{ width:130px; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tender-items-cpv{ width:130px; white-space:nowrap; color:var(--ink-2); }
.tender-pick{ display:flex; align-items:center; justify-content:center; width:28px; }
.tender-main{ min-width:0; }
/* Назва й посилання на майданчики — в одному рядку: назва стискається,
   посилання ніколи. Так замовник у рядку нижче лишається на повну
   ширину — а саме за замовником і назвою вирішують, чи це «наше». */
.tender-title{ font-size:13.5px; line-height:1.3; display:flex; align-items:baseline; gap:10px; min-width:0; }
.tender-title-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Те, що з'явилось після минулого заходу, — жирним, як непрочитаний лист.
   Крапка поруч дублює це не кольором і не лише насиченістю, щоб різниця
   читалась і на поганому екрані. */
.tender-row.is-unseen .tender-title-text{ font-weight:700; }
.tender-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:6px; vertical-align:middle;
}
.tender-sub{
  font-size:12px; color:var(--ink-2); margin-top:2px;
  display:flex; align-items:baseline; gap:8px; min-width:0;
}
/* Замовник і код ДК можуть бути якими завгодно довгими — вони й
   стискаються. А посилання (ProZorro і майданчики) не стискаються ніколи:
   саме ними користуються, і ховати їх у три крапки було б безглуздо. */
.tender-sub-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tender-links{ flex:none; margin-left:auto; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.tender-amount{ font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tender-deadline{ display:flex; justify-content:flex-end; }
/* Номер закупівлі складається з двох частин, і кожна робить своє: сам
   номер копіюється кліком (клас .copy-click, той самий, що на імені
   клієнта чи ЄДРПОУ компанії в інших картках), а стрілка поруч —
   відкриває сторінку закупівлі на ProZorro. Раніше номер був суцільним
   посиланням, і скопіювати його кліком було неможливо — лише виділяти
   мишею. Обидві частини негнучкі: без цього flex ламав номер на два
   рядки, і висота рядків у списку стрибала. */
.tender-num-wrap{ flex:none; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.tender-num{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tender-num-open{
  color:var(--ink-2); text-decoration:none; padding:1px 4px; border-radius:5px;
  line-height:1; transition:background .12s, color .12s;
}
.tender-num-open:hover{ background:var(--surface-3); color:var(--accent); }
/* Логотипи майданчиків у рядку списку — ті самі .zakupivli-link-icon /
   .smarttender-link-icon, що й у картці угоди (разом із заміною на
   світліший варіант у темній темі). Тут лише знімаємо margin-left:auto:
   у картці угоди він притискав значок до правого краю підпису, а тут
   значки й так стоять групою праворуч від назви. */
.tender-links .zakupivli-link-icon{ margin-left:0; }
.tender-links .smarttender-link-icon{ margin-left:0; }
.tender-actions{ display:flex; gap:6px; align-items:center; justify-content:flex-end; }
/* «Не цікаво» — хрестик, а не кнопка з підписом: у щільному списку підпис
   при кожному рядку важив би більше за саму закупівлю. */
.tender-x{
  border:1px solid var(--border); background:transparent; color:var(--ink-2);
  width:26px; height:26px; border-radius:7px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.tender-x:hover{ border-color:var(--critical); color:var(--critical); }

.tender-filterbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 12px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
}
.tender-filterbar .tender-f-text{ flex:1 1 200px; min-width:160px; width:auto; }
/* Без width:auto ці <select> успадкували б загальне width:100% з форм —
   і кожен займав би цілий рядок замість того, щоб стати в ряд. */
.tender-filterbar .tender-f-sel{ flex:0 0 auto; width:auto; min-width:0; max-width:230px; }
.tender-f-amount{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); }
.tender-f-amount label{ white-space:nowrap; }
.tender-f-amount input[type=range]{ width:130px; accent-color:var(--accent); }
.tender-f-amount-val{ min-width:96px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

.tender-listhead{
  display:flex; align-items:center; gap:12px; padding:4px 12px 8px;
  font-size:12.5px; color:var(--ink-2);
}
.tender-counts{ margin-right:auto; }
.tender-bulk{ display:flex; align-items:center; gap:8px; }
.tender-watch-table td, .tender-watch-table th{ vertical-align:top; }

/* На вузькому екрані сітка з шести стовпчиків не має сенсу — розкладаємо
   рядок у два поверхи: текст зверху, цифри й кнопки знизу. */
@media (max-width:900px){
  .tender-row{ grid-template-columns: 28px 22px minmax(0,1fr); row-gap:6px; }
  .tender-main{ grid-column:3; }
  .tender-items{ padding-left:16px; }
  .tender-amount, .tender-deadline, .tender-actions{ grid-column:3; justify-content:flex-start; text-align:left; }
  .tender-actions{ justify-content:flex-start; }
  .tender-title{ white-space:normal; }
  /* На телефоні посилання переносяться під текст, а не тиснуть його. */
  .tender-sub{ flex-wrap:wrap; }
  .tender-sub-text{ white-space:normal; overflow:visible; }
  .tender-title{ flex-wrap:wrap; gap:6px; }
  .tender-title-text{ white-space:normal; overflow:visible; }
  .tender-links{ margin-left:0; }
  .tender-f-amount{ flex:1 1 100%; }
  .tender-filterbar .tender-f-sel{ flex:1 1 140px; max-width:none; }
}

/* ---- «Тендери ProZorro» на «Головній» ---- */
.tender-stats-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tender-stats-kpis{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:12px 0 14px;
}
.tender-stats-kpis > div{ display:flex; flex-direction:column; gap:2px; }
.tender-stats-num{ font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.tender-stats-table td, .tender-stats-table th{ padding:7px 8px; }
.tender-stats-cpv{ font-size:13px; }
/* Смужка під кодом ДК — той самий показник, що й у стовпчику «Знайдено»
   поруч: не нове число, а спосіб побачити співвідношення, не читаючи
   цифри. Тому без підпису й без власної шкали. */
.tender-stats-bar{ height:4px; border-radius:3px; background:var(--surface-3); margin-top:5px; max-width:260px; }
.tender-stats-bar span{ display:block; height:100%; border-radius:3px; background:var(--accent); }

/* ---- Виконавець і швидкі дії в задачах ---- */
.task-assignee{
  display:inline-flex; align-items:center; gap:5px; padding:1px 7px 1px 2px;
  border-radius:20px; background:var(--surface-3); color:var(--ink-2); font-size:11.5px;
}
.task-assignee .user-avatar{ width:16px; height:16px; font-size:8.5px; }
/* Свої задачі — в акцентному кольорі: у списку «Усі» око одразу чіпляє
   те, що стосується саме тебе. */
.task-assignee.is-me{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-soft-ink); }
.task-assignee-none{ opacity:.75; }
.task-assignee-none .field-icon{ width:12px; height:12px; }
/* Кнопки перенесення показуються на наведенні: у спокійному стані рядок
   лишається тихим, а всі три дії поруч — коли до нього справді дійшли. */
.task-snooze{ display:flex; gap:2px; opacity:0; transition:opacity .12s; }
.task-row:hover .task-snooze, .task-snooze:focus-within{ opacity:1; }
.task-snooze .btn{ padding:3px 7px; font-size:11.5px; }
@media (max-width:900px){
  .task-snooze{ opacity:1; }
}
.task-assignee-filter{ width:auto; min-width:170px; }

/* ============ СПАДНІ СПИСКИ У СТИЛІ CRM ============
   Нативний <select> лишається в розмітці (і лишається джерелом істини для
   всіх форм), але стає невидимим: його видно лише програмно. Замість нього
   малюється кнопка .sel-trigger і меню .sel-menu — ті самі кремові
   поверхні, радіуси й акцент, що й у решті CRM.
   Див. initStyledSelects в app.js — там пояснено, чому саме так. */
.sel{ position:relative; width:100%; }
.sel-native{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  /* Не display:none і не visibility:hidden — інакше браузер не рахує поле
     як таке, що бере участь у формі, і ламається автозаповнення/валідація. */
}
.sel-trigger{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font-family:inherit; font-size:13.5px; padding:8px 10px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--page); color:var(--ink);
  cursor:pointer; transition:border-color .12s;
}
.sel-trigger:hover{ border-color:var(--ink-2); }
.sel.is-open .sel-trigger, .sel-trigger:focus-visible{ border-color:var(--accent); outline:none; }
.sel-value{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
/* Обрізання «…» — на самому підписі, а не на обгортці: поруч із ним ще
   може стояти фото співробітника, і воно не має стискатись. */
.sel-value-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sel-value.is-placeholder{ color:var(--muted); }
.sel-arrow{ flex:none; display:flex; color:var(--muted); transition:transform .15s; }
.sel-arrow .field-icon, .sel-arrow svg{ width:14px; height:14px; }
.sel.is-open .sel-arrow{ transform:rotate(180deg); color:var(--accent); }
.sel.is-disabled .sel-trigger{ opacity:.6; cursor:not-allowed; }

/* ---- Спільний шар для всіх спадних меню ----
   Меню на час, поки воно відкрите, переїжджає сюди — прямо в <body>.
   Сенс один: елемент у <body> не обрізається жодним overflow:hidden
   предка (модалка, .table-wrap, тулбар) і не займає місця у формі, тож
   нічого нікуди не з'їжджає. Координати ставить JS (placeDropdown).
   Рівень 250 навмисно між модалкою (100) і сповіщеннями (300): меню має
   бути над формою, але не перекривати toast. */
#dropdown-layer{ position:absolute; top:0; left:0; width:0; height:0; }
.is-floating{
  position:fixed !important; right:auto !important; bottom:auto !important;
  margin:0 !important; z-index:250 !important;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.sel-menu{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  display:flex; flex-direction:column; max-height:320px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
/* Прокручується САМЕ список, а не все меню: інакше поле пошуку з'їжджало б
   угору разом із варіантами — писав би наосліп. */
.sel-list{ overflow-y:auto; min-height:0; }
.sel-menu[hidden]{ display:none; }
.sel-item{
  display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:7px;
  font-size:13px; color:var(--ink); cursor:pointer;
}
/* Підсвічування ведеться клавіатурою й мишею однаково (.is-active), тож
   стрілками й курсором список поводиться передбачувано однаково. */
.sel-item.is-active{ background:var(--surface-3); }
.sel-item.is-selected{ font-weight:600; }
.sel-item.is-disabled{ opacity:.5; cursor:not-allowed; }
.sel-check{ flex:none; width:14px; display:flex; color:var(--accent); }
.sel-check .field-icon, .sel-check svg{ width:14px; height:14px; }
.sel-item-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sel-group{
  padding:8px 9px 4px; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
}
.sel-empty{ padding:10px 9px; font-size:13px; color:var(--muted); }
/* Списки, які в розмітці мають власну ширину (фільтри над таблицями), —
   щоб обгортка не розтягувала їх на весь рядок. */
.sel-of-tender-f-sel, .sel-of-task-assignee-filter{ width:auto; }

/* ---- Пошук усередині довгого списку ---- */
/* З'являється сам, коли варіантів більше восьми: для трьох пріоритетів він
   лише заважав би, а серед сотні угод без нього не обійтись. */
.sel-search{ flex:none; padding:2px 2px 6px; }
.sel-search-input{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:13px;
  padding:7px 9px; border-radius:7px; border:1px solid var(--border-strong);
  background:var(--page); color:var(--ink);
}
.sel-search-input:focus{ border-color:var(--accent); outline:none; }
/* Хрестик «очистити» від type=search у Chrome — прибираємо: поле й так
   щоразу порожнє при відкритті, а зайва іконка тільки додає шуму. */
.sel-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
/* Довгі списки малюються не повністю (SEL_RENDER_CAP в app.js) — чесно
   кажемо, скільки лишилось, замість мовчазно обрізаного списку. */
.sel-more{
  flex:none; padding:7px 9px 3px; font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--border); margin-top:4px;
}

/* ---- Фото співробітника у списку ---- */
/* Скрізь, де у списку є люди, поруч із іменем стоїть те саме фото, що й у
   решті CRM (аватар або кольорові ініціали) — і в меню, і в самому полі
   після вибору. */
.sel-avatar{ flex:none; display:flex; align-items:center; }
.sel-menu .sel-avatar .user-avatar{ width:22px; height:22px; font-size:9px; }
/* У САМОМУ полі фото рівно по висоті рядка тексту (18px). Більше — і поле
   зі співробітником стає на 6px вищим за сусіднє без нього, а два поля в
   одному рядку («Виконавець» і «Повторювати») стоять сходинкою. */
.sel-trigger .sel-avatar .user-avatar{ width:18px; height:18px; font-size:8px; }
.sel-trigger .sel-noavatar{ width:18px; height:18px; }
.sel-trigger .sel-noavatar .field-icon, .sel-trigger .sel-noavatar svg{ width:10px; height:10px; }
/* Порожній варіант («Нічия», «Усі задачі») — заглушка того самого розміру,
   щоб підписи в списку не «стрибали» вліво-вправо. */
.sel-noavatar{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--surface-3); color:var(--muted);
}
.sel-noavatar .field-icon, .sel-noavatar svg{ width:12px; height:12px; }
/* Рядки в списку зі співробітниками трохи вищі — під фото. */
.sel.has-avatars .sel-item{ padding-top:6px; padding-bottom:6px; }

/* ---- Взаємодії з клієнтом (вкладка в картках) ---- */
.event-type-chip{
  display:inline-flex; align-items:center; gap:4px; margin-right:6px; padding:1px 7px;
  border-radius:20px; background:var(--surface-3); color:var(--ink-2); font-size:11px; font-weight:600;
  vertical-align:middle;
}
.event-type-chip .field-icon, .event-type-chip svg{ width:11px; height:11px; }
.event-row{
  display:flex; align-items:flex-start; gap:12px; padding:9px 12px; margin-bottom:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; cursor:pointer;
  transition:border-color .12s;
}
.event-row:hover{ border-color:var(--border-strong); }
/* Те, що вже відбулось, — приглушено: історію переглядають, а працюють із
   тим, що попереду. */
.event-row.is-done{ background:var(--surface-2); }
.event-row-main{ flex:1; min-width:0; }
.event-row-title{ font-size:13.5px; font-weight:600; }
.event-row-sub{ font-size:12px; color:var(--ink-2); margin-top:2px; }
/* Дата в минулому без позначки «відбулось» — найімовірніше про зустріч
   просто забули; підсвічуємо, щоб це не загубилось у списку. */
.event-row-missed{ color:var(--warning); font-weight:600; }
.event-row-outcome{
  font-size:12.5px; color:var(--ink); margin-top:6px; padding-left:10px;
  border-left:2px solid var(--border-strong);
}
.event-row-state{ flex:none; }