/* Inter — безкоштовний шрифт у стилі iOS (SF Pro). Кирилиця + латиниця, змінна вага. */
@font-face{
font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/static/fonts/inter-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
src:url('/static/fonts/inter-cyrillic.woff2') format('woff2');
unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
:root{
/* Фірмові кольори Sushi Icons (брендбук): navy #0F3F66 · блакить #B5D8F7 · білий */
--brand-navy:#0f3f66; --brand-blue:#b5d8f7; --brand-mid:#3f7fb8;
--paper:#eef2f7; --panel:#ffffff; --panel-2:#f2f6fb;
--ink:#132133; --ink-soft:#4f5f77; --muted:#8391a6;
--line:#e2e8f1; --line-strong:#cddaea;
--accent:#3f7fb8; --accent-soft:#e7f1fb; --accent-ink:#0f3f66;
--good:#12885e; --warn:#b7791f; --bad:#d64545;
/* Другорядні рядки «Графіків» — ТА САМА шкала, що на «Комісіях»: колір
світлий (--muted), а читабельність дає ВАГА (700–800), не темність.
Єдиний акцент — фірмовий navy (--accent-ink), як у .cmb-num.acc. */
--sub:#8391a6; --pot:#0f3f66; --pctv:#8391a6;
/* підсвітка колонок таблиці: План — блакить, Факт — навʼю */
--col-plan:rgba(181,216,247,.36); --col-fact:rgba(63,127,184,.13);
--radius:16px; --shadow:0 1px 2px rgba(15,63,102,.06),0 8px 20px -8px rgba(15,63,102,.20);
--font-body:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
--font-display:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
--sat:env(safe-area-inset-top,0px);
}
/* У встановленому застосунку (iPhone/Mac) гарантуємо відступ під системну смужку,
навіть якщо iOS не віддає safe-area (тоді використовуємо запасні 55px). */
/* Запасні 55px потрібні ЛИШЕ на телефоні (iOS інколи не віддає safe-area).
На Mac у режимі застосунку вирізу немає — там ці 55px були порожнім місцем. */
@media (display-mode:standalone) and (max-width:820px){
:root{--sat:max(env(safe-area-inset-top,0px),55px)}
}
@media (prefers-color-scheme:dark){
html:not([data-theme]){
--brand-navy:#9fc6ef; --brand-blue:#b5d8f7; --brand-mid:#79b0e6;
--paper:#0a0e15; --panel:#141b27; --panel-2:#1a2331;
--ink:#eaf0ff; --ink-soft:#a7b3c8; --muted:#71809a;
--line:#222c3d; --line-strong:#2f3b50;
--accent:#79b0e6; --accent-soft:#16283c; --accent-ink:#a9cef2;
--good:#3fd39a; --warn:#e6b45a; --bad:#ff7a7a;
--sub:#71809a; --pot:#a9cef2; --pctv:#71809a;
--col-plan:rgba(181,216,247,.11); --col-fact:rgba(120,170,225,.09);
--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.6);
}
}
*{box-sizing:border-box}
html{overscroll-behavior-x:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-x:none;
background-image:
radial-gradient(52% 40% at 12% 0%,rgba(181,216,247,.42),transparent 62%),
radial-gradient(46% 36% at 96% 6%,rgba(63,127,184,.10),transparent 60%);
background-attachment:fixed;background-repeat:no-repeat}
@media (prefers-color-scheme:dark){
html:not([data-theme]) body{background-image:
radial-gradient(52% 40% at 12% 0%,rgba(63,127,184,.16),transparent 62%),
radial-gradient(46% 36% at 96% 6%,rgba(15,63,102,.28),transparent 60%)}
}
a{color:var(--accent-ink)}
.tabnum{font-variant-numeric:tabular-nums}
/* топбар */
.top{display:flex;align-items:center;gap:14px;padding:calc(12px + var(--sat)) calc(20px + env(safe-area-inset-right,0px)) 12px calc(20px + env(safe-area-inset-left,0px));background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.top .brand{font-family:var(--font-display);font-size:17px;font-weight:400;margin-right:auto}
.top .brand small{display:block;font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.top .who{font-size:13px;color:var(--ink-soft)}
.top .who b{color:var(--ink)}
.top select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink)}
.top .out{font-size:12.5px;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 11px}
.top .out:hover{color:var(--bad);border-color:var(--bad)}
.mlabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:-6px}
@media (max-width:620px){.top{gap:8px 10px}.mlabel{display:none}}
/* ── Єдина шкала відступів. Усі поля сторінки й проміжки між блоками беруться
ЗВІДСИ, а не підбираються на око в кожному місці. ──────────────────── */
:root{
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
--page-x:24px; /* бокове поле сторінки — однакове ліворуч і праворуч */
--page-max:1720px; /* контент іде майже на всю ширину: вузька колонка
посеред екрана лишала обабіч світлі «рейки» */
}
@media (max-width:1180px){:root{--page-x:16px}}
@media (max-width:620px){:root{--page-x:12px}}
.wrap{max-width:var(--page-max);margin:0 auto;
padding:var(--sp-6) calc(var(--page-x) + env(safe-area-inset-right,0px)) 80px
calc(var(--page-x) + env(safe-area-inset-left,0px));
overflow-x:clip;overflow-clip-margin:34px}
/* блок-центр */
.center{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:clip}
.center>summary,.center .chead{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none}
.center>summary{position:sticky;top:calc(54px + var(--sat));z-index:15;background:var(--panel);border-radius:var(--radius) var(--radius) 0 0}
.center>summary::-webkit-details-marker{display:none}
.center .cname{font-weight:700;font-size:15px}
.center .clevel{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:20px;border:1px solid currentColor}
.center .clevel.edit{color:var(--accent-ink)} .center .clevel.view{color:var(--muted)}
.center .csum{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.center .chev{color:var(--muted);font-size:11px;transition:transform .18s}
details[open].center .chev{transform:rotate(90deg)}
table.arts{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
table.arts th{background:var(--panel-2);text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:8px 12px;white-space:nowrap;border-bottom:1px solid var(--line-strong)}
table.arts th:first-child,table.arts td:first-child{text-align:left}
table.arts td{padding:7px 12px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.arts td.name{text-align:left;color:var(--ink)}
table.arts td.tag{text-align:center;color:var(--muted);font-family:var(--font-mono);font-size:11.5px}
.empty{padding:18px 16px;color:var(--muted);font-size:13px;border-top:1px solid var(--line);background:var(--panel-2)}
/* логін */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px 26px}
.login-card h1{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0 0 4px}
.login-card .sub{color:var(--muted);font-size:12.5px;margin:0 0 20px}
.login-card label{display:block;font-size:12px;color:var(--ink-soft);margin:12px 0 5px;font-weight:600}
.login-card input{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--paper);color:var(--ink)}
.login-card input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.login-card button{width:100%;margin-top:18px;font:inherit;font-weight:700;font-size:14px;padding:11px;border:none;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer}
.login-card button:hover{filter:brightness(1.05)}
.login-card .err{margin-top:14px;font-size:12.5px;color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-radius:8px;padding:8px 11px}
.stage-note{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.stage-note b{color:var(--ink)}
/* на чому стоїть поділ між закладами (сторінка «Розподіл») */
.base-note{margin:0 0 16px;padding:12px 16px;border-radius:12px;font-size:12.5px;
line-height:1.5;color:var(--ink-soft);background:var(--card);
border:1px solid var(--line);border-left:3px solid var(--accent)}
.base-note b{color:var(--ink)}
.base-nohist{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--warn,#b26b00)}
.base-nohist b{color:inherit}
.base-shut{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.shut-x{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
background:color-mix(in srgb,var(--muted) 12%,transparent);font-size:11.5px}
.shut-x em{font-style:normal;color:var(--muted)}
.shut-x form{display:inline}
.shut-x button{border:none;background:none;padding:0;cursor:pointer;font:inherit;
color:var(--accent-ink,var(--accent));text-decoration:underline}
/* «закрився» — дрібна дія в рядку локації, щоб не сперечалась із цифрами */
.loc-x{display:inline}
.loc-x button{border:none;background:none;padding:0 0 0 6px;cursor:pointer;
font-size:10.5px;color:var(--muted);text-decoration:underline dotted;opacity:0;
transition:opacity .12s ease}
.drow.dloc:hover .loc-x button{opacity:1}
.loc-x button:hover{color:var(--bad)}
@media (hover:none){.loc-x button{opacity:.7}}
.base-note.warn{border-left-color:var(--bad);
background:color-mix(in srgb,var(--bad) 7%,transparent)}
.base-note.warn b{color:var(--bad)}
/* ---- Етап 2: товарообіг, grid-таблиця{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:16px}
/* grid-таблиця статей */
.grid{border-top:1px solid var(--line)}
.grid .grow{min-width:1164px}
/* остання колонка (44px) — дії рядка: у режимі перегляду там кнопка заявки
на оплату. Без неї кнопка не мала своєї комірки й падала другим рядком
під назву статті. */
.grow{display:grid;grid-template-columns:minmax(200px,2.6fr) minmax(88px,1fr) 76px 86px 74px 74px 74px 86px 74px 74px 74px 80px 44px;gap:8px;align-items:center;padding:5px 14px;
border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
font-size:12.5px;margin:0}
.grid.editable .grow{grid-template-columns:20px minmax(200px,2.6fr) minmax(88px,1fr) 76px 82px 72px 72px 72px 84px 72px 72px 72px 78px 76px}
/* сортування: заголовки клікабельні + індикатор напрямку */
.grow.head .sortable{cursor:pointer;user-select:none}
.grow.head .sortable:hover{color:var(--accent-ink)}
.grow.head .sorted-a::after{content:" ▲";font-size:8px;color:var(--accent-ink)}
.grow.head .sorted-d::after{content:" ▼";font-size:8px;color:var(--accent-ink)}
/* Поки таблиця відсортована — це тимчасовий погляд: показуємо це смужкою
зверху й прибираємо «ручку» перетягування, щоб ніхто не переставляв рядки
у вигляді, який не є справжнім порядком. */
.grid.sorted{box-shadow:inset 0 3px 0 -1px var(--accent)}
.grid.sorted .rgrip{opacity:.25;cursor:not-allowed}
.grow.head .sortable{position:relative}
.grid.sorted .grow.head .sorted-a::after,
.grid.sorted .grow.head .sorted-d::after{color:var(--accent)}
/* перетягування статей */
.draghandle{cursor:grab;color:var(--muted);font-size:14px;line-height:1;padding:0 2px;touch-action:none}
.draghandle:active{cursor:grabbing}
.grow.row.dragging{opacity:.45;background:var(--accent-soft)}
/* ПЛАНШЕТ (761–1180): повна сітка тут не вміщується — раніше таблиця їхала
вбік у власному скролі, і праві колонки (Факт, країни, Δ) просто зникали
за краєм. Тепер ховаємо розкладку по країнах (вона є в повному вигляді на
компʼютері), а головне — Стаття · Коментар · Тип · План · Факт · Δ — лишається
на екрані цілим, без горизонтального гортання. */
@media (min-width:761px) and (max-width:1180px){
.grid .grow{min-width:0}
.grow{grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) 74px minmax(0,1fr) minmax(0,1fr) 84px 40px;
gap:var(--sp-2);padding:6px 12px}
.grid.editable .grow{grid-template-columns:20px minmax(0,2fr) minmax(0,1fr) 70px minmax(0,1fr) minmax(0,1fr) 80px 76px}
.grow>.pc,.grow>.fc{display:none}
}
/* ТЕЛЕФОН: компактна таблиця — лише головне (Стаття · Тип · План · Факт · Δ),
дрібні колонки (Коментар, прапорці країн плану й факту) ховаємо; перетягування — тільки десктоп */
@media (max-width:760px){
.grid .grow{min-width:0}
.grow{grid-template-columns:minmax(0,1.55fr) 62px minmax(0,1fr) minmax(0,1fr) 56px 38px;gap:6px;padding:6px 10px}
.grid.editable .grow{grid-template-columns:minmax(0,1.4fr) 58px minmax(0,1fr) minmax(0,1fr) 52px 42px}
.grow>.hcol,.grow>.pc,.grow>.fc,.draghandle{display:none}
}
/* ── Розкладка за РЕАЛЬНОЮ шириною таблиці, а не за шириною вікна ─────────
Медіа-запити вище дивляться на вікно, а воно бреше: у застосунку на
iPhone (а надто якщо в Safari увімкнено «версію для комп'ютера») вікно
рапортує 980 і ширше, тож телефон отримував десктопну таблицю з
гортанням убік. Container query міряє саму панель — скільки місця є
насправді, — і тому працює однаково скрізь. Медіа-запити лишаються
як запасний варіант для старих браузерів. */
/* контейнером робимо саму таблицю — не .center, бо на ньому containment
ламає липку шапку колонок */
.grid{container-type:inline-size}
@container (max-width:1180px){
.grid .grow{min-width:0}
.grow{grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) 74px minmax(0,1fr) minmax(0,1fr) 84px 40px;
gap:var(--sp-2);padding:6px 12px}
.grid.editable .grow{grid-template-columns:20px minmax(0,2fr) minmax(0,1fr) 70px minmax(0,1fr) minmax(0,1fr) 80px 76px}
.grow>.pc,.grow>.fc{display:none}
.grid{overflow:visible;max-height:none}
}
@container (max-width:760px){
.grow{grid-template-columns:minmax(0,1.55fr) 62px minmax(0,1fr) minmax(0,1fr) 56px 38px;gap:6px;padding:6px 10px}
.grid.editable .grow{grid-template-columns:minmax(0,1.4fr) 58px minmax(0,1fr) minmax(0,1fr) 52px 42px}
.grow>.hcol,.grow>.pc,.grow>.fc,.draghandle{display:none}
}
/* ТЕЛЕФОН (вузька таблиця): в один ярус усе не влазить — назви й числа
починали обрізатись на півслові. Розкладаємо рядок у два яруси:
зверху назва статті на всю ширину, знизу тип і три числа. Нічого не
ховаємо — просто переносимо. */
@container (max-width:560px){
.grow{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 40px;
grid-template-areas:"nm nm nm nm act" "tp pl fc dv act";
gap:2px 6px;padding:8px 10px;align-items:center}
.grid.editable .grow{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 90px}
.grow>.cact{align-self:center;display:flex;gap:1px;justify-content:flex-end}
.grow>.c-name{grid-area:nm;white-space:normal;font-weight:600;line-height:1.25;
overflow:visible;text-overflow:clip}
.grow>.ct{grid-area:tp;justify-self:start;font-size:9.5px}
.grow>.colplan{grid-area:pl}
.grow>.colfact{grid-area:fc}
.grow>.cn:not(.colplan):not(.colfact):not(.pc):not(.fc){grid-area:dv}
.grow>.cact{grid-area:act;justify-self:end}
/* На телефоні рядок двоярусний, і в ШАПЦІ через це «Стаття» ставало
окремим верхнім ярусом, а «Тип розп.» — окремим нижнім. Виходили два
підписи, які нічого не пояснюють: під ними й так назва статті та її
теґ країн. Прибираємо обидва — лишається один рівний рядок
«План · Факт · Δ» (власник, 12.09.2026). Комірки не чіпаємо, лише
їхній вміст: колонки задані явно, тож числа нижче не поїдуть. */
.grow.head>.c-name,.grow.head>.ct{display:none}
/* поле «План» у заповненні — окремим рядком, тож фон-смуга не має
розтягуватись на всю висоту двоярусного рядка */
.grow.row input.colplan{margin-top:0;margin-bottom:0;align-self:center}
.grow.foot>.c-name{grid-area:nm}
}
.grow .fc .v,.grow .fc{color:var(--accent-ink)}
.grow.head .fc{color:var(--accent-ink);opacity:.85}
.grow .cn.fc.zero{color:var(--muted);opacity:.4}
.grow>span{min-width:0}
.grow .cn,.grow .cc{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.grow .cc{text-align:center}
.grow .ct{text-align:center}
.grow .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* У режимі заповнення значення — це із власним padding, тож текст
у ньому починається на 8px правіше краю комірки. Шапку, підсумок і
підстатті зсуваємо на ті самі 8px, щоб усе стояло під лінійку. */
.grid.editable .grow.head > .c-name,.grid.editable .grow.head > .hcol,
.grid.editable .grow.foot > .c-name,.grid.editable .grow.gsub > .c-name{padding-left:8px}
.grow .tag{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.grow.head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.06em;color:var(--muted);font-weight:600;
position:sticky;top:calc(54px + var(--sat));z-index:12}
/* Вузькі екрани: таблиця тепер вміщується (див. планшетну сітку вище), тож
пастка внутрішнього скролу більше не потрібна — гортаємо сторінку, шапка
колонок липне до верху сторінки, як на компʼютері. */
@media (max-width:1180px){
.center{overflow:clip}
.grid{overflow:visible;max-height:none}
.grow.head{top:calc(54px + var(--sat))}
.center>summary{position:static}
}
/* ТЕЛЕФОН (≤760): таблиця компактна й вміщується — прибираємо пастку внутрішнього скролу,
гортаємо СТОРІНКУ нормально, а шапку колонок липнемо до сторінки (як на десктопі) */
@media (max-width:760px){
.center{overflow:clip}
.grid{overflow:visible;max-height:none}
.grow.head{top:calc(54px + var(--sat))}
}
/* заголовки колонок не налазять один на одного на вузьких екранах */
.grow.head>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Колонка «Стаття» липка при гортанні вбік і має власний фон, тож у шапці
вона накривала початок слова «Коментар» («оМЕНТАР»). У шапці підпис
ставимо поверх — гортання від цього не страждає, бо там нема даних. */
.grow.head>.hcol{position:relative;z-index:3;background:var(--panel-2);padding-left:10px}
.grow.head span{text-align:inherit}
.grow.head .cn{text-align:right}.grow.head .ct,.grow.head .cc{text-align:center}
.grow.foot{background:var(--panel-2);font-weight:700;border-bottom:none;border-top:1px solid var(--line-strong)}
.grow.foot .cn{color:var(--ink)}
.grow:hover:not(.head):not(.foot){background:var(--accent-soft)}
/* інлайн-поля редагування */
.inl{font:inherit;font-size:12.5px;width:100%;padding:4px 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink)}
.inl:hover{border-color:var(--line)}
.inl:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.inl.mut{color:var(--ink-soft)}
.inl.num{text-align:right;font-variant-numeric:tabular-nums}
.inl.tagsel{font-family:var(--font-mono);font-size:11px;padding:4px 4px}
.cact{display:flex;gap:2px;justify-content:flex-end}
.cact button{border:none;background:none;cursor:pointer;font-size:14px;padding:2px 4px;border-radius:6px;opacity:.55}
.cact button:hover{opacity:1;background:var(--panel-2)}
.cact .del:hover{background:color-mix(in srgb,var(--bad) 15%,transparent)}
/* рядок додавання */
/* Рядок «нова стаття»: поля без важких рамок, кнопка — така сама пігулка,
як решта дій. Раніше тут були обведені прямокутники й суцільна синя
кнопка — на телефоні це виглядало найстарішим місцем сторінки. */
.addrow{display:flex;gap:8px;align-items:center;padding:10px 14px;
background:var(--panel-2);border-top:1px solid var(--line);flex-wrap:wrap}
.addrow .inl{border:1px solid transparent;background:color-mix(in srgb,var(--ink) 5%,transparent);
border-radius:9px;padding:8px 11px;flex:1;min-width:120px}
.addrow .inl:hover{border-color:var(--line-strong)}
.addrow .inl:focus{background:var(--panel);border-color:var(--accent)}
.addrow .inl.num{flex:0 0 96px;text-align:right;font-variant-numeric:tabular-nums}
.addrow .tagsel{flex:0 0 106px}
.addrow .add{font:inherit;font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;
border:none;border-radius:10px;padding:10px 15px;
background:var(--accent-ink);color:var(--panel)}
.addrow .add:hover{filter:brightness(1.15)}
@media (max-width:760px){
.addrow{gap:6px;padding:10px 16px}
.addrow .inl{min-width:0;flex:1 1 46%}
.addrow .add{flex:1 1 100%;padding:11px 15px;font-size:13px}
}
/* РАЗОМ мережа */
.grand{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-top:18px}
.grand .gname{font-family:var(--font-display);font-size:17px;margin-right:auto}
.grand .gcol{display:flex;flex-direction:column;line-height:1.2}
.grand .gcol .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.grand .gcol b{font-size:16px}
/* ---- інтерактивний вибір країн (клік по UA/PL/GE) ---- */
.grow .ct.tagind{font-family:var(--font-mono);font-size:10.5px;color:var(--accent-ink);font-weight:700;text-align:center;white-space:nowrap}
.ccell{cursor:pointer;position:relative;border-radius:6px;padding:2px 4px;transition:background .12s}
.grid.editable .ccell:hover{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.ccell .v{pointer-events:none}
.ccell.off{color:var(--muted);opacity:.4}
.ccell.off .v{text-decoration:line-through}
.cn.zero{color:var(--muted);opacity:.45}
/* незбережений рядок — підсвітити кнопку збереження */
form.grow.dirty{background:color-mix(in srgb,var(--warn) 10%,transparent)}
/* незбережений рядок: помаранчева кнопка збереження з червоною крапкою — без тексту, що налазив на цифри */
form.grow.dirty .save{opacity:1;background:var(--warn);color:#fff;border-radius:6px;position:relative}
form.grow.dirty .save::after{content:"";position:absolute;top:-2px;right:-2px;width:7px;height:7px;
border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--panel)}
form.grow{position:relative}
/* ---- зведена панель (план продажів, бюджет, співвідношення) ---- */
.summary{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.sum-top{display:flex;flex-wrap:wrap;gap:14px}
.sum-top .kpi{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--panel-2);border-radius:10px;border:1px solid var(--line)}
.sum-top .kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.sum-top .kpi b{font-size:23px;font-variant-numeric:tabular-nums;line-height:1.1}
.sum-top .kpi .u{font-size:11px;color:var(--muted)}
.sum-top .kpi.accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.sum-top .kpi.accent b{color:var(--accent-ink)}
.sum-countries{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.ccard{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--panel)}
.cc-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.cc-h .flag{font-size:19px}
.cc-h .cn{font-weight:700;font-size:14px}
.cc-h .cshare{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--accent-ink)}
.cc-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;padding:2px 0;color:var(--ink-soft)}
.cc-row b{font-variant-numeric:tabular-nums;color:var(--ink)}
.cc-row.hi{margin-top:4px;padding-top:6px;border-top:1px dashed var(--line);font-weight:600}
.cc-row.hi b{color:var(--accent-ink);font-weight:800}
.sum-note{margin-top:12px;font-size:11.5px;color:var(--muted);line-height:1.5}
@media (max-width:760px){.sum-countries{grid-template-columns:1fr}}
/* ---- Етап 3: курс НБУ, flash, адмін-секція місяця ---- */
.sum-rates{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.sum-rates .rk{color:var(--muted);font-size:12px}
.sum-rates b{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:12.5px;color:var(--ink)}
.sum-rates .rauto{font-size:11.5px;color:var(--muted)}
.mini{font:inherit;font-size:11px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink-soft);border-radius:7px;padding:3px 9px;cursor:pointer}
.mini:hover{border-color:var(--accent);color:var(--accent-ink)}
/* Повідомлення про результат дії — скляний тост поверх сторінки, а не смужка
на самому верху вмісту. Причина: кнопки дій стоять унизу довгої сторінки, і
після редіректу на якір стара смужка лишалась поза екраном — людина не
бачила, що сталось. Тост видно з будь-якої точки прокрутки; за ~9 с він
тихо зникає (visibility в останньому кадрі — щоб не ловив кліки). */
.flash{position:fixed;top:calc(66px + var(--sat));left:50%;z-index:60;
max-width:min(92vw,660px);padding:12px 18px;font-size:13px;color:var(--accent-ink);
background:color-mix(in srgb,var(--panel) 82%,transparent);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-bord);border-radius:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--glass-shadow);
animation:flash-in .25s ease-out both,flash-out .6s ease-in 9s forwards}
.flash div+div{margin-top:5px}
@keyframes flash-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes flash-out{to{opacity:0;visibility:hidden;transform:translate(-50%,-6px)}}
.admin-month{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.admin-month>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.admin-month>summary::-webkit-details-marker{display:none}
.admin-month>summary .chev{color:var(--muted);font-size:11px;transition:transform .18s}
.admin-month[open]>summary .chev{transform:rotate(90deg)}
.admin-body{padding:6px 16px 18px;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line)}.newm-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.newm-form .hint{font-size:11.5px;color:var(--muted)}
.newm-form .inl{border:1px solid var(--line-strong);background:var(--panel);max-width:220px}
/* ---- Етап 4: факт, відхилення, кошик ---- */
.grow .fact{color:var(--ink);font-weight:600}
.grow .dev.bad{color:var(--bad);font-weight:600}
.grow .dev.good{color:var(--good)}
.grow.foot .dev.bad{color:var(--bad)} .grow.foot .dev.good{color:var(--good)}
.basket-badge{color:var(--warn);font-weight:700;white-space:nowrap}
/* ---- розкриття проводок факту (клік по сумі факту) ---- */
.grow .fact.fx{cursor:pointer;color:var(--accent-ink);text-decoration:underline dotted;text-underline-offset:3px}
.grow .fact.fx .fx-arr{font-size:9px;opacity:.6;display:inline-block;transition:transform .15s}
.grow .fact.fx.on .fx-arr{transform:rotate(180deg);opacity:1}
.fdrow{display:none;min-width:940px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.fdrow.open{display:block}
.fd-inner{padding:6px 14px 10px 14px}
.fd-cap{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin:2px 0 6px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.fd-x{text-transform:none;letter-spacing:0;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--line-strong);border-radius:20px;padding:2px 10px;font-weight:600;white-space:nowrap}
.fd-cap:hover .fd-x{border-color:var(--accent);color:var(--accent)}
.fdline{display:grid;grid-template-columns:150px 1.4fr 1fr;gap:10px;align-items:baseline;padding:3px 0;border-top:1px dashed var(--line);font-size:12px}
.fdline:first-of-type{border-top:none}
.fd-sum{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;color:var(--ink)}
.fd-comm{color:var(--ink-soft);word-break:break-word}
.fd-who{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted);font-size:11px}
.fd-city{white-space:nowrap}
.fd-date{white-space:nowrap;color:var(--ink-soft);font-weight:600}
.fd-payer{color:var(--accent-ink);font-weight:600;overflow-wrap:anywhere}
@media (max-width:760px){.fdline{grid-template-columns:110px 1fr}.fd-who{grid-column:1/-1}}
/* ---- кошик незіставленого ---- */
a.basket-badge{color:var(--warn);font-weight:700;text-decoration:none;white-space:nowrap}
a.basket-badge:hover{text-decoration:underline}
.basket{display:flex;flex-direction:column;gap:8px}
.bitem{display:grid;grid-template-columns:130px minmax(0,1fr) 280px auto auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;box-shadow:var(--shadow);min-width:0;max-width:100%}
.bitem>*{min-width:0}
.bitem .bsum{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.bitem .bcomm{font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:anywhere}
.bitem .bconc{color:var(--muted);font-size:11.5px}
.bitem .bsel{display:block;min-width:0}
.bitem .add{white-space:nowrap}
.bitem .bx{cursor:pointer;user-select:none}
.bitem .bx-arr{font-size:10px;color:var(--muted);transition:transform .18s;display:inline-block}
.bitem .bx.on .bx-arr{transform:rotate(180deg);color:var(--accent)}
.bitem .bdetail{display:none;grid-column:1/-1;flex-wrap:wrap;gap:4px 14px;margin-top:2px;padding:8px 10px;
background:var(--panel-2);border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--ink-soft)}
.bitem .bdetail.open{display:flex}
.bitem .bdetail .muted{color:var(--muted)}
@media (max-width:820px){
.bitem{grid-template-columns:minmax(0,1fr) auto;gap:7px 12px}
.bitem .bsum{text-align:left;font-size:15px}
.bitem .bcomm{grid-column:1/-1;white-space:normal}
.bitem .bsel{grid-column:1/-1}
.bitem .add{grid-column:1;justify-self:start}
.bitem .del{grid-column:2;justify-self:end}
}
/* факт з кошиком у панелі */
.cc-row.bskt span{color:var(--warn)}
.cc-row.bskt b{color:var(--warn);font-weight:600}
/* кошик: видалення */
.bitem .del{border:none;background:none;cursor:pointer;font-size:15px;padding:6px 8px;border-radius:8px;opacity:.6}
.bitem .del:hover{opacity:1;background:color-mix(in srgb,var(--bad) 15%,transparent)}
.del-bulk{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);border-radius:9px;padding:8px 14px;cursor:pointer}
.del-bulk:hover{border-color:var(--bad);color:var(--bad)}
/* ---- Етап 5: адмінка користувачів ---- */
.userc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px}
/* ── Список користувачів: рядок-підсумок, деталі за кліком ───────────────── */
.us-bar{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3);flex-wrap:wrap}
/* журнал входів — згорнутий розділ */
.us-log>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.us-log>summary::-webkit-details-marker{display:none}
.us-log>summary .chev{font-size:11px;color:var(--muted);transition:transform .18s}
.us-log[open]>summary .chev{transform:rotate(90deg)}
.userc{padding:0;overflow:hidden}
.us-sum{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
list-style:none;min-width:0}
.us-sum::-webkit-details-marker{display:none}
.us-sum:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.userc[open]>.us-sum{border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--accent) 5%,transparent)}
.us-ava{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
font-weight:700;font-size:14px;color:var(--accent-ink);
background:color-mix(in srgb,var(--accent) 16%,transparent)}
.us-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:0 0 172px;width:172px}
.us-id b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.us-id small{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
/* чипси доступу — видно, що людині відкрито, не розкриваючи картку */
/* Матриця доступів: свій стовпчик на кожну вкладку, однаковий у всіх рядках —
тоді «Комісії» одного стоять точно над «Комісіями» іншого і список
читається згори вниз, а не як мішанина різнокаліберних плашок. */
.us-tags{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
gap:4px;min-width:0;flex:1}
.us-tags .us-t.own{grid-column:1/-1;justify-self:start}
.us-t{font-style:normal;font-size:10.5px;font-weight:650;padding:3px 6px;border-radius:7px;
text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:var(--ink-soft);
background:color-mix(in srgb,var(--ink) 7%,transparent)}
.us-t.own{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.us-t.fill{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.us-t.none{color:var(--muted);background:none;border:1px dashed var(--line-strong)}
.us-state{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.us-tg{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 7px;
border-radius:6px;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.us-off{font-style:normal;font-size:10.5px;font-weight:700;color:var(--bad)}
.us-sum .chev{font-size:11px;color:var(--muted);transition:transform .18s}
.userc[open] .us-sum .chev{transform:rotate(90deg)}
.userc>form,.userc>.uc-pw{padding-left:16px;padding-right:16px}
.userc>.uc-pw{padding-bottom:14px}
.userc>form{padding-top:14px}
/* права колонка теж фіксована — інакше «TG» і «вимкнено» тягнуть сітку */
.us-state{flex:none;width:92px;display:flex;align-items:center;justify-content:flex-end;gap:6px}
/* доступу немає — місце лишається порожнім, щоб колонки не поїхали */
.us-t.off{opacity:.28;background:none;border:1px dashed var(--line-strong);
color:var(--muted);font-weight:600}
@media (max-width:1100px){
/* 11 колонок у вузькому вікні нечитабельні — повертаємось до переносу,
а порожні місця ховаємо, щоб не займали рядок дарма */
.us-id{flex:0 0 auto;width:auto}
.us-tags{display:flex;flex-wrap:wrap}
.us-tags .us-t.off{display:none}
.us-state{width:auto}
}
@media (max-width:760px){
.us-tags{flex-basis:100%;order:3}
.us-sum{flex-wrap:wrap;gap:8px 10px}
}
.uc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.uc-login{font-weight:700;font-size:14px}
.uc-name{max-width:240px;border:1px solid var(--line-strong);background:var(--panel)}
.uc-tg{max-width:150px;border:1px solid var(--line-strong);background:var(--panel);
font-variant-numeric:tabular-nums;font-size:12px}
.uc-badge{font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--accent-ink);border:1px solid currentColor;border-radius:20px;padding:2px 8px}
.uc-badge.off{color:var(--bad)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:10px}
.perm-cell{display:flex;flex-direction:column;gap:3px}
.perm-cell .pc-name{font-size:11px;color:var(--muted);font-weight:600}
.perm-cell select{border:1px solid var(--line-strong);background:var(--panel)}
.uc-flags{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.uc-flags label{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;cursor:pointer}
.uc-flags .add{margin-left:auto}
.uc-pw{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.uc-pwf{display:flex;gap:8px;align-items:center}
/* видалення — праворуч і червоним, щоб не натиснути випадково поруч із паролем */
.uc-pw > form:last-child{margin-left:auto}
.mini.danger{border-color:color-mix(in srgb,var(--bad) 42%,transparent);color:var(--bad)}
.mini.danger:hover{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.uc-pw .inl{max-width:200px;border:1px solid var(--line-strong);background:var(--panel)}
.dash-alert{display:block;margin-bottom:16px;padding:11px 14px;border-radius:10px;
background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid var(--warn);
color:var(--warn);font-size:13px;font-weight:600;text-decoration:none}
.dash-alert:hover{background:color-mix(in srgb,var(--warn) 18%,transparent)}
/* головні цифри */
.dash-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.dk{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.dk.accent{background:var(--accent-soft)}
.dk-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.dk-v{font-size:23px;font-weight:700;line-height:1.15;margin-top:2px}
.dk-badge{align-self:flex-start;margin-top:4px;font-size:11px;font-weight:700;padding:2px 9px;
border-radius:20px;background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line)}
.dk-badge.ok{color:var(--good);border-color:var(--good)}
.dk-badge.warn{color:var(--warn);border-color:var(--warn)}
.dk-badge.over{color:var(--bad);border-color:var(--bad)}
/* «нема нарахувань» — не подія, а спокійний прочерк: тихий сірий бейдж
замість порожньої комірки, яка читалась як збій */
.dk-badge.none{color:var(--muted);border-style:dashed;background:transparent;font-weight:600}
@media (max-width:900px){.dash-kpi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.dash-kpi{grid-template-columns:1fr}}
.dash-sec{margin-bottom:26px}
.dash-h{font-family:var(--font-display);font-weight:400;font-size:16px;margin:0 0 12px;color:var(--ink)}
.dash-hnote{font-family:var(--font);font-size:11.5px;color:var(--muted);font-weight:400}
/* заголовок «Розподіл по концепціях» — над таблицями локацій, з відступом від блоку вище */
.dist-h2{margin:26px 0 12px}
.ce-chev{display:inline-block;transition:transform .15s;color:var(--muted);font-size:16px;font-weight:700}
.ce-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:4px 14px 14px;border-top:1px solid var(--line)}
.ce-empty{font-size:12px;color:var(--muted);padding:6px 0}
/* другий рівень: місто (розгортається) → проводки */
.ce-body2{padding:0 10px 2px;border-top:1px solid var(--line)}
.cty{border-bottom:1px solid var(--line)}
.cty:last-child{border-bottom:none}
.cty>summary{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;list-style:none;font-size:12.5px}
.cty>summary::-webkit-details-marker{display:none}
.ce-chev.sm{font-size:13px}
.cty[open]>summary .ce-chev.sm{transform:rotate(90deg)}
.cty-n{font-weight:700;color:var(--ink)}
.cty-nums{margin-left:auto;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:11.5px}
.cty.central .cty-n{color:var(--ink-soft);font-style:normal}
.cty-body{padding:2px 4px 10px 20px}
.tx-h{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;margin:8px 0 4px}
/* Колонка суми — ФІКСОВАНА. Була `auto`, і кожен рядок — свій grid, тож ширина
колонки залежала від довжини суми: через це текст сусідніх колонок «плавав»
і рядки не стояли під лінійку. */
.tx-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 116px;gap:10px;align-items:baseline;
padding:3px 0;border-bottom:1px solid var(--line);font-size:12px}
.tx-from{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-for{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-for.vp{color:var(--accent-ink)}
.tx-sum{white-space:nowrap;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
.cty-nums{font-size:10.5px;flex-basis:100%;margin-left:22px;order:5}
.cty>summary{flex-wrap:wrap}
.tx-row{grid-template-columns:1fr 104px}
.tx-for{grid-column:1/-1;order:3;font-size:11px}
}
@media (max-width:640px){
.ce-body{grid-template-columns:1fr;gap:0}
}
/* прогрес-смужка */
.bar{height:7px;border-radius:6px;background:var(--panel-2);overflow:hidden;margin:5px 0 2px}
.bar.sm{height:7px} /* усі смуги однакової товщини */
.bar-f{display:block;height:100%;background:var(--accent);border-radius:6px}
.bar-f.over{background:var(--bad)}
.bar-f.fund{background:var(--good)}
/* країни */
.dash-countries{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
@media (max-width:820px){.dash-countries{grid-template-columns:1fr}}
.dcen-pct{margin-left:auto;font-weight:700;font-size:13px}
.dcen-pct.ok{color:var(--good)}.dcen-pct.over{color:var(--bad)}
.dcen-nums{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:4px}
.dcen-nums b{color:var(--ink)}
.dcen-nums .dev.bad{color:var(--bad);font-weight:700}
.dcen-nums .dev.good{color:var(--good);font-weight:700}
@media (max-width:700px){}
/* Блок «Внесок міст — топ» (.dash-cities/.dcity) прибрано з дашборда ще раніше —
ті самі цифри є в таблиці розподілу. Його CSS лишався мертвим, але клас .dcity
збігся з рядком міста в таблиці (.drow.dcity) і протікав туди рамкою,
заокругленням 9px, фоном і падінгами: рядки міст малювались «пігулками».
Правила видалено — шаблони їх не використовують (перевірено grep-ом). */
.dash-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.dash-foot{font-size:12px;color:var(--muted);margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}
/* ---- мобільна таблиця: липка колонка «Стаття» + рівне розкриття факту ---- */
.grow .c-name{position:sticky;left:0;z-index:2;background:var(--panel)}
.grid.editable .grow > .c-name{left:28px}
.grow.head .c-name,.grow.foot .c-name{background:var(--panel-2)}
.grow:hover:not(.head):not(.foot) .c-name{background:var(--accent-soft)}
form.grow.row .c-name,input.inl.c-name{background:var(--panel)}
input.inl.c-name:focus{background:var(--panel);border-color:var(--accent)}
/* на вузьких екранах: роздільник липкої колонки + рівне розкриття факту */
@media (max-width:760px){
.grow .c-name{box-shadow:6px 0 6px -4px rgba(33,31,26,.12)}
.fd-inner{position:sticky;left:0;width:calc(100vw - 40px);box-sizing:border-box}
.fdline{grid-template-columns:96px 1fr}
.fd-who{grid-column:1/-1}
}
/* ================= Продажі та розподіл ================= */
.dist-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.dist-actions form{margin:0}
/* ═══ Розподіл по концепціях: скляні панелі країн ════════════════════════
Той самий рецепт скла, що в .dash-kpi та .dash-countries: заливка
--glass-fill, розмиття --glass-blur, тонкий світлий кант і внутрішній
відблиск угорі. Плаский білий прямокутник із сірими смугами випадав із
решти сторінки — тепер таблиця в одній системі з рештою дашборда. */
.dist-c{background:var(--glass-fill);border:1px solid var(--glass-bord);
border-radius:var(--radius);margin-bottom:16px;overflow:hidden;
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .dist-c{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
/* Окремої шапки країни (.dist-c-h) більше немає: вона займала цілу строку
заради прапора й назви, які й так є в підсумковому рядку одразу під
«ЛОКАЦІЯ». Прапор переїхав туди — назва країни тепер із прапором. */
.dtbl{overflow-x:auto}
.drow .flag{font-size:15px;margin-right:7px;line-height:1}
/* 11 колонок: після трьох стадій нарахування йдуть ЗОБОВʼЯЗАННЯ — база, від
якої рахуються «%» і «До оплати». Ширша за сусідні (128px), бо під цифрою
стоїть другий рядок «±сальдо». */
.drow{display:grid;grid-template-columns:1.5fr 132px 104px 82px 110px 110px 112px 128px 100px 92px 136px;
gap:8px;align-items:center;padding:7px 20px;font-size:12.5px;min-width:1326px;
border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
transition:background .16s}
.dtbl .drow:last-child{border-bottom:none}
/* шапка колонок — тонка скляна смуга замість суцільного сірого блоку */
.drow.dhead{background:color-mix(in srgb,var(--panel-2) 58%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid var(--line);
font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;
padding-top:10px;padding-bottom:9px}
.drow .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
letter-spacing:-.01em}
/* Перша колонка прозора — на склі вона має читатись як частина рядка.
Залипає вона ЛИШЕ на вузьких екранах, де таблиця справді їде вбік (нижче,
в медіазапиті): там їй потрібен щільний фон, інакше крізь неї просвічують
цифри, що проїжджають збоку. На широкому екрані прокрутки немає — і
непрозора плашка лише малювала б блідий прямокутник поверх тону рядка. */
.drow .c-loc{align-self:stretch;overflow:hidden;background:transparent;
text-overflow:ellipsis;white-space:nowrap;display:flex;gap:6px;align-items:center}
.drow:hover:not(.dhead):not(.dfoot){background:color-mix(in srgb,var(--accent) 9%,transparent)}
.c-loc .loc-addr{color:var(--ink-soft)}
.c-loc .edited{color:var(--warn);font-weight:700}
/* Ієрархія рядків тоном, а не сірими смугами: заклад → місто → країна.
Кожен наступний рівень трохи насиченіший за попередній. */
.drow.dfoot{background:color-mix(in srgb,var(--accent) 15%,transparent);font-weight:700;
border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.drow.dfoot .c-loc{color:var(--accent-ink)}
/* Вузький екран: таблиця їде вбік, тож назва локації залипає ліворуч і
отримує щільний фон під тон свого рядка + мʼяку тінь на правому краї. */
@media (max-width:1240px){
.drow .c-loc{position:sticky;left:0;z-index:2;
background:color-mix(in srgb,var(--panel) 92%,transparent);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:8px 0 8px -6px rgba(15,63,102,.12)}
.drow.dhead .c-loc{background:color-mix(in srgb,var(--panel-2) 90%,var(--panel))}
.drow.dcity .c-loc{background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.drow.dfoot .c-loc{background:color-mix(in srgb,var(--accent) 15%,var(--panel))}
.drow:hover:not(.dhead):not(.dfoot) .c-loc{background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
summary.drow.dcity:hover .c-loc{background:color-mix(in srgb,var(--accent) 13%,var(--panel))}
}
.drow .dev.bad{color:var(--bad)}.drow .dev.good{color:var(--good)}
.plan-f{display:flex;gap:2px;align-items:center;justify-content:flex-end}
.plan-f .inl.num{max-width:116px;width:100%}
.plan-f .save{border:none;background:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px;opacity:.55}
.plan-f .save:hover{opacity:1;background:var(--panel-2)}
.drow .accr{color:var(--ink-soft);font-weight:600}
.drow .accr-f{color:var(--accent-ink);font-weight:700}
.drow .accr-fin{font-weight:700}
.drow .accr-fin.frozen{color:var(--good)}
.drow .accr-fin.pending{color:var(--muted);font-weight:500}
/* ── зведена шапка розподілу (дашборд-стиль) ── */
/* Картки країн — рівні за висотою й достатньо широкі, щоб «31 500 000 ₴»
стояло одним рядком. На телефоні дві колонки по 150px ламали кожне число
навпіл, тому там — одна колонка. */
.dist-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:var(--sp-3);margin:0 0 var(--sp-4);align-items:stretch}
.dist-sum>*{min-width:0}
@media (max-width:620px){.dist-sum{grid-template-columns:1fr}}
.dsum-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow);padding:12px 14px;position:relative}
.dsum-card.closed{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.dsum-h{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.dsum-h .flag{font-size:17px}.dsum-h .cn{font-weight:700;font-size:14px}
.dsum-badge{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
padding:2px 7px;border-radius:20px}
.dsum-badge.closed{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.dsum-badge.open{background:var(--accent-soft);color:var(--accent-ink)}
/* Рядок картки країни. Висоти всюди ФІКСОВАНІ (16px гривня + 13px місцева
валюта), тож рядки всіх трьох карток стоять точно один навпроти одного —
і там, де місцевої валюти немає (Україна), теж. */
.dsum-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
font-size:12px;padding:2px 0;color:var(--ink-soft)}
.dsum-row>span:first-child{min-width:0;line-height:16px}
.dsum-row b{color:var(--ink);font-variant-numeric:tabular-nums}
.dsum-v{display:block;text-align:right;white-space:nowrap;flex:none}
.dsum-v>b{display:block;line-height:16px}
.dsum-v .dnat{display:block;height:13px;line-height:13px;color:var(--muted);
font-size:10.5px;font-variant-numeric:tabular-nums}
/* порожня заглушка місцевої валюти тримає місце ТІЛЬКИ в картці країни;
у таблицях нижче той самий макрос не має додавати зайвого рядка */
.dnat.ph{display:none}
.dsum-v .dnat.ph{display:block}
/* заголовок групи рядків: «Оборот (ТО)», «Нарахування КК», «Розрахунки» —
назва винесена сюди, тому самі рядки короткі й картка стала нижчою */
.dsum-cap{margin:7px 0 2px;font-size:9.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:6px}
.dsum-card .dsum-cap:first-of-type{margin-top:2px}
/* номер стадії нарахування — кружечок перед назвою */
.dsum-row .dst{display:inline-block;min-width:14px;height:14px;margin-right:6px;
border-radius:50%;background:var(--line);color:var(--muted);
font-size:9px;font-weight:700;line-height:14px;text-align:center}
.dsum-row.on .dst{background:var(--accent-soft);color:var(--accent-ink)}
.dsum-row.on>span:first-child{color:var(--ink)}
.dsum-row.on .dsum-v b{color:var(--accent-ink)}
.close-form{margin:0 0 16px}
.btn-close{background:var(--good);color:#fff;border:none;border-radius:10px;padding:9px 16px;
font-weight:700;font-size:13px;cursor:pointer}
.btn-reopen{background:none;border:1px solid var(--line-strong);color:var(--ink-soft);
border-radius:10px;padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer}
.closed-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:color-mix(in srgb,var(--good) 12%,transparent);
border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));border-radius:12px;padding:10px 14px;
font-size:13px;color:var(--ink);margin:0 0 16px}
/* ── червоний блок сповіщень про проводки закритого місяця ── */
.alert-box{border:1.5px solid var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--panel));
border-radius:14px;padding:12px 14px;margin:0 0 16px}
.alert-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--bad)}
.alert-clear{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--bad);color:var(--bad);
background:none;border-radius:8px;padding:5px 10px;cursor:pointer}
.alert-clear:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
/* дії в шапці блока — праворуч, у ряд */
.alert-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
/* «Перевірити зараз» — спокійна, не червона: це не тривога, а дія */
.alert-recheck{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line-strong);
color:var(--accent-ink);background:var(--panel);border-radius:8px;padding:5px 10px;cursor:pointer;
white-space:nowrap}
.alert-recheck:hover{border-color:var(--accent)}
.alert-recheck:disabled{opacity:.55;cursor:progress}
/* коли розбіжностей нема — той самий блок, але тихий і зелений */
.alert-box.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 6%,var(--panel));
padding:9px 14px}
.alert-box.ok .alert-h{color:var(--good);font-size:13px}
/* «станом на …» — вік збереженого результату. Тоном тихіше за заголовок:
це уточнення до нього, а не другий заголовок. */
.alert-when{font-weight:600;font-size:11.5px;color:var(--muted);white-space:nowrap}
/* у зеленому стані пояснення — останнє в блоці, зайвий відступ знизу тут
лише роздуває смугу */
.alert-box.ok .alert-sub{margin-bottom:0}
/* на телефоні дві кнопки в один рядок із заголовком ламали його на три
рядки — переносимо їх під заголовок, на всю ширину */
@media(max-width:560px){
.alert-h{flex-wrap:wrap}
.alert-acts{width:100%;margin:6px 0 0;justify-content:flex-end}
.alert-recheck,.alert-clear{flex:0 0 auto;padding:6px 12px}
}
.alert-sub{font-size:12px;color:var(--ink-soft);margin:4px 0 10px}
.alert-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--bad) 20%,var(--line))}
.al-badge{background:var(--bad);color:#fff;font-weight:800;font-size:11px;padding:2px 8px;border-radius:7px;white-space:nowrap}
.al-main{min-width:0;flex:1}
.al-cmt{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-meta{font-size:11.5px;color:var(--muted)}
/* Перейменування — не тривога: сума й дата ті самі, змінився лише текст. */
.al-badge.ren{background:var(--accent-ink)}
.alert-item.al-renamed{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.al-was{font-size:11.5px;color:var(--accent-ink);line-height:1.35}
.al-was b{font-weight:650}
.al-was em{font-style:normal;color:var(--muted);display:block}
.al-sum{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Значок «⚠ N» у меню веде сюди. Липка шапка перекривала б блок, тому
лишаємо їй запас; при переході блок на мить підсвічується, щоб око
знайшло, куди саме його привели. */
.alert-zone{scroll-margin-top:90px}
.alert-zone:target .alert-box{animation:al-pulse 1.6s ease-out 1}
@keyframes al-pulse{
0%,22%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 32%,transparent)}
100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.alert-zone:target .alert-box{animation:none}}
/* розбіжність іншого місяця — видно, що вона не з поточного екрана */
.alert-item.other-month{opacity:.86}
.al-mon{color:var(--bad);font-weight:700;text-decoration:none;border-bottom:1px dotted currentColor}
.al-mon:hover{opacity:.75}
.al-ok{border:1px solid var(--good);color:var(--good);background:none;border-radius:8px;
width:30px;height:30px;font-size:15px;font-weight:800;cursor:pointer}
.al-ok:hover{background:color-mix(in srgb,var(--good) 14%,transparent)}
/* ============================================================
iOS + Sushi Icons — верхня панель, бокове меню (drawer)
============================================================ */
body{-webkit-tap-highlight-color:transparent}
.wrap{padding:20px 16px 96px}
/* верхня панель */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:calc(54px + var(--sat));
padding:var(--sat) calc(12px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--panel) 82%,transparent);
-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
border-bottom:1px solid var(--line)}
.appbar-title{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-month{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--accent-ink);
background:var(--accent-soft);padding:5px 12px;border-radius:20px;white-space:nowrap}
.burger{width:38px;height:38px;border:none;background:none;display:flex;flex-direction:column;
justify-content:center;align-items:center;gap:4.5px;cursor:pointer;border-radius:10px;flex:none}
.burger:hover{background:var(--accent-soft)}
.burger span{width:19px;height:2px;border-radius:2px;background:var(--accent-ink);transition:.2s}
/* підкладка + шухляда */
.nav-backdrop{position:fixed;inset:0;z-index:35;background:rgba(0,32,58,.38);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.25s}
.nav-backdrop.show{opacity:1;visibility:visible}
body.nav-lock{overflow:hidden}
.drawer{position:fixed;top:0;left:0;bottom:0;width:306px;max-width:86vw;z-index:40;background:var(--panel);
border-right:1px solid var(--line);box-shadow:0 0 44px rgba(0,40,80,.20);
transform:translateX(-105%);transition:transform .3s cubic-bezier(.32,.72,0,1);
display:flex;flex-direction:column;overflow-y:auto;padding:calc(16px + var(--sat)) 0 calc(22px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none}
.dw-head{display:flex;align-items:center;gap:11px;padding:4px 18px 14px}
.dw-logo{width:40px;height:40px;border-radius:12px;background:var(--accent-ink);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:21px;flex:none}
.dw-brand{font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.12;color:var(--ink)}
.dw-brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:10.5px;
text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:3px}
.dw-month{display:flex;align-items:center;gap:8px;margin:6px 14px 12px;padding:10px 13px;
background:var(--panel-2);border-radius:13px}
.dw-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
/* Відступи меню — за спільною шкалою --sp-* (4/8/12/16/24). Раніше тут стояли
одноразові 11, 13, 40 px, і рядки читались як «трохи не на місці». */
.dw-nav{display:flex;flex-direction:column;gap:2px;padding:0 var(--sp-2)}
.dw-nav a{display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);border-radius:10px;
text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
/* У підменю стрілок немає, але праве поле лишаємо таким самим — тоді
лічильники всіх пунктів меню стоять в одній вертикалі. */
.dw-sub a{padding-right:var(--sp-4)}
.dw-nav a .ic{font-size:17px;width:22px;text-align:center}
.dw-nav a:hover{background:var(--panel-2)}
.dw-nav a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
/* Лічильники стоять в одній колонці праворуч: однакова мінімальна ширина,
однакова висота й вирівнювання по центру — інакше кружечки «стрибали»
один відносно одного залежно від кількості цифр.
ДВА РІВНІ (12.09.2026). Раніше фон тут стояв червоний БЕЗ УМОВИ, тож
червоними були геть усі лічильники — і «Смітник 16», і «Кошик 3». Коли
червоне все, воно не означає нічого. Тепер за замовчуванням лічильник
спокійний (просто кількість), а червоний лишається тим, де справді
потрібна дія: заявки казначея, взаємозаліки, комісії. */
.dw-badge{margin-left:auto;flex:none;display:inline-grid;place-items:center;
min-width:22px;height:20px;padding:0 8px;border-radius:20px;
background:var(--panel-2);color:var(--muted);border:1px solid var(--line);
font-size:11px;font-weight:700;line-height:1;
font-variant-numeric:tabular-nums}
.dw-badge.red{background:var(--bad);color:#fff;border-color:transparent}
/* Рядок, що потребує дії: тонка смужка ліворуч замість заливки на весь рядок.
Пульсацію прибрано — три рядки, що блимають одночасно, це не сигнал, а шум:
око не має за що зачепитись і починає ігнорувати всі три. */
.dw-nav a.alert{font-weight:600;position:relative}
.dw-nav a.alert::before{content:"";position:absolute;left:3px;top:9px;bottom:9px;
width:2px;border-radius:2px;background:var(--bad)}
.dw-nav a.alert .ic{filter:none}
.dw-sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:16px 20px 7px}
.dw-actions{display:flex;flex-direction:column;gap:6px;padding:0 14px}
.dw-actions form{margin:0}
.dw-act{width:100%;font:inherit;font-size:13.5px;font-weight:600;padding:10px 13px;border-radius:12px;
border:1px solid var(--line-strong);background:var(--panel);color:var(--accent-ink);cursor:pointer;text-align:left}
.dw-act:hover{background:var(--accent-soft);border-color:var(--accent)}
.dw-act.wide{text-align:center;margin-top:6px}
/* ── Кнопка «Факт витрат» під час роботи: шкала прямо на ній ───────────── */
/* Оновлення триває хвилини, і мовчазне «Виконую…» не давало зрозуміти, чи
щось відбувається. Заливка йде зліва направо на --p відсотків (значення
ставить JS за відповіддю сервера), поверх неї — назва етапу й число. */
.dw-act.prog{
position:relative;overflow:hidden;cursor:progress;
border-color:var(--accent);background:var(--panel);
/* opacity від .busy тут ні до чого: текст має лишатись читабельним */
opacity:1}
.dw-act.prog::before{
content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);
background:var(--accent-soft);
transition:width .45s ease}
.dw-act.prog .prog-t{position:relative;z-index:1;font-variant-numeric:tabular-nums}
.dw-settings{margin:12px 14px 0;border-top:1px solid var(--line);padding-top:10px}
.dw-settings summary{cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink-soft);padding:6px 4px}
.dw-settings summary::-webkit-details-marker{display:none}
.dw-settings .chev{display:inline-block;transition:transform .2s;color:var(--muted);font-weight:800}
details[open].dw-settings .chev{transform:rotate(90deg)}
.dw-form{margin:8px 0}
.dw-grid{display:grid;grid-template-columns:52px 1fr 1fr 1fr;gap:5px;align-items:center;margin-bottom:6px}
.dw-grid>span{font-size:11px;text-align:center;color:var(--muted)}
.dw-grid .dw-rl{text-align:left;font-weight:600}
.dw-grid .inl.num{font-size:12px;padding:6px;border:1px solid var(--line-strong);border-radius:9px;background:var(--panel)}
.dw-foot{margin-top:auto;padding:14px 18px 0;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line)}
.dw-user{font-size:12.5px;color:var(--ink-soft)}
.dw-logout{margin-left:auto;font-size:13px;font-weight:600;color:var(--bad);text-decoration:none;
border:1px solid var(--line);border-radius:10px;padding:6px 13px}
.dw-logout:hover{border-color:var(--bad)}
/* iOS-полірування */
.add{background:var(--accent);color:#fff;border:none;border-radius:11px;font-weight:600;
padding:9px 16px;box-shadow:0 1px 2px rgba(0,60,102,.15);cursor:pointer}
.add:hover{filter:brightness(1.06)}
.stage-note{border-radius:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.del-bulk{border-radius:11px}
.inl:focus{background:var(--panel)}
/* логін — бренд */
.login-logo{width:56px;height:56px;border-radius:16px;background:var(--accent-ink);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 16px}
.login-card{text-align:center}
.login-card h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.login-card label,.login-card .err{text-align:left}
.login-card input{border-radius:12px}
/* редагування проводок у розкритті факту */
.fd-edit{display:flex;gap:6px;align-items:center;margin:1px 0 12px;flex-wrap:wrap}
/* Підказка «оберіть статтю зі списку» — на всю ширину під рядком кнопок.
Без неї єдиним сигналом була червона рамка поля, якої на телефоні
практично не видно: людина натискає «Перенести» й вирішує, що застосунок
зламався. */
.fd-edit .fd-tip{flex-basis:100%;font-size:12px;font-weight:600;color:var(--bad);
margin-top:2px;line-height:1.3}
.fd-edit .fd-search{flex:1;min-width:150px;font-size:12px;padding:6px 10px;border:1px solid var(--line-strong);
border-radius:9px;background:var(--panel);color:var(--ink)}
.fd-edit .mini{font-size:12px;padding:6px 12px;border-radius:9px;border:1px solid var(--accent);
background:var(--accent);color:#fff;cursor:pointer;font-weight:600}
.fd-edit .mini.ghost{background:var(--panel);color:var(--ink-soft);border-color:var(--line-strong)}
.fd-edit .mini.ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){.fd-edit{position:sticky;left:0;width:calc(100vw - 40px)}}
/* власний пошук статті (combobox з підрядковим збігом) */
.acbox{position:relative;min-width:0;max-width:100%;display:block}
.acbox .acsearch{width:100%;max-width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line-strong);
border-radius:10px;background:var(--panel);color:var(--ink)}
.acbox .acsearch:focus{outline:none;border-color:var(--accent);background:var(--panel)}
/* меню приклеєне до поля — під ним на десктопі */
.acmenu{display:none;position:absolute;z-index:2000;box-sizing:border-box;left:0;right:0;top:calc(100% + 4px);
background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 8px 30px rgba(0,40,80,.22);
max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.acmenu.open{display:block}
/* на мобільному клавіатура завжди знизу — відкриваємо список НАД полем */
@media (max-width:820px){
.acmenu{top:auto;bottom:calc(100% + 6px);max-height:46vh}
}
.acitem{padding:10px 13px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);color:var(--ink)}
.acitem:last-child{border-bottom:none}
.acitem:hover,.acitem:active{background:var(--accent-soft);color:var(--accent-ink)}
.acitem.none{color:var(--muted);cursor:default}
/* iOS-шрифт скрізь, включно з формами */
button,input,select,textarea,optgroup{font-family:inherit}
/* ── Пошук у план/факт (клієнтський фільтр по всіх ключах) ── */
.pf-search{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.pf-search #pfq{flex:1;padding:11px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);
font-size:15px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.pf-search #pfq:focus{outline:none;border-color:var(--accent)}
.pf-search .pf-clear{border:none;background:var(--line);color:var(--ink);border-radius:10px;
width:34px;height:34px;font-size:15px;cursor:pointer;flex:0 0 auto}
.pf-search .pf-clear:hover{background:var(--line-strong)}
.pf-search .pf-hint{color:var(--muted);font-size:13px;white-space:nowrap;flex:0 0 auto}
body.pf-on .grow.foot,body.pf-on .addrow{display:none}
/* ── Свайп справа-наліво в кошику: капсула «🗑 Видалити» праворуч, тап видаляє (iOS Mail) ── */
.bswipe{position:relative;overflow:hidden;border-radius:12px;box-shadow:var(--shadow);
touch-action:pan-y;overscroll-behavior-x:contain}
.bswipe-del{position:absolute;top:7px;right:9px;bottom:7px;width:118px;border:none;cursor:pointer;
background:var(--bad);color:#fff;font-size:15px;font-weight:600;border-radius:16px;z-index:0;
display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.bswipe .bitem{position:relative;z-index:1;box-shadow:none;background:var(--panel);
transition:transform .2s ease;touch-action:pan-y}
/* поки відкрито список статей — не обрізати його контейнером свайпу (інакше меню
ріжеться) І ПІДНЯТИ КАРТКУ НАД НАСТУПНИМИ. Саме overflow було замало: `.bitem`
має z-index:1, а це вже власний контекст накладання, тож z-index:2000 у меню
діє лише всередині своєї картки. Сусідні картки нижче за списком стоять далі в
розмітці — і за правилами CSS малюються ПОВЕРХ нього. На екрані список статей
виглядав порізаним на смужки між картками (власник, 10.09.2026). */
.bswipe.menu-open{overflow:visible;z-index:30}
/* ── «Потребує уваги»: виконано лише одну умову з двох ── */
.attn-box{background:color-mix(in srgb,var(--warn) 10%,var(--panel));
border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:14px;
margin:0 0 16px;box-shadow:var(--shadow);overflow:hidden}
.attn-box>summary{padding:12px 15px;cursor:pointer;font-weight:700;font-size:13.5px;color:var(--warn);list-style:none}
.attn-box>summary::-webkit-details-marker{display:none}
.attn-grp{padding:10px 15px 12px;border-top:1px solid var(--line)}
.attn-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
.attn-sub{font-size:12px;color:var(--ink-soft);margin-bottom:9px;line-height:1.45}
.attn-row{display:flex;flex-wrap:wrap;gap:2px 12px;padding:6px 0;border-top:1px solid var(--line)}
.attn-sum{font-weight:700;min-width:120px}
.attn-cm{flex:1;min-width:180px;font-size:12.5px;color:var(--ink)}
.attn-dest{color:var(--warn);font-size:11.5px}
.attn-meta{font-size:11.5px;color:var(--muted);width:100%}
/* ── Вивантаження та перевірка проводок ────────────────────────────────── */
.irun-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.irun{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding:11px 14px;
background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:13px}
.irun .ir-ts{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:132px}
.irun .ir-src{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink)}
.irun .ir-src.auto{background:var(--panel-2);color:var(--muted)}
.irun .ir-who{font-weight:600;color:var(--ink-soft)}
.irun .ir-n,.irun .ir-ok,.irun .ir-bk{color:var(--ink-soft)}
.irun .ir-ok b{color:var(--good)}.irun .ir-bk b{color:var(--warn)}
.irun .ir-note{margin-left:auto;font-size:11.5px;color:var(--muted);font-family:var(--font-mono)}
.imp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.imp-tabs a{font-size:13px;font-weight:600;text-decoration:none;color:var(--ink-soft);
padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.imp-tabs a.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.imp-tabs a b{font-variant-numeric:tabular-nums}
.imp-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 13px;margin-bottom:10px;
background:var(--panel-2);border:1px solid var(--line);border-radius:12px;position:sticky;
top:calc(54px + var(--sat));z-index:11}
.imp-bar .imp-all{font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;cursor:pointer}
.imp-bar .imp-sel{font-size:12.5px;color:var(--muted);margin-right:auto}
.imp-grid{display:flex;flex-direction:column;gap:4px}
.imp-row{display:grid;grid-template-columns:22px 132px 1fr 160px 190px 128px;gap:10px;align-items:center;
padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
font-size:13px;cursor:pointer}
.imp-row:hover{border-color:var(--line-strong)}
.imp-row.ok{opacity:.62}
.imp-row.pending{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.imp-row .ip-sum{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.imp-row .ip-cm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row .ip-art{font-size:12px;color:var(--accent-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row .ip-meta{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row .ip-st{font-size:11.5px;font-weight:700;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-row .ip-st.ok{color:var(--good)}.imp-row .ip-st.pending{color:var(--warn)}.imp-row .ip-st.new{color:var(--muted)}
.imp-empty{padding:22px;text-align:center;color:var(--muted);font-size:14px;
background:var(--panel);border:1px dashed var(--line-strong);border-radius:12px}
@media(max-width:900px){
.imp-row{grid-template-columns:22px 1fr auto;grid-template-areas:"c s t" "c m t" "c a t";row-gap:3px}
.imp-row .ip-sum{grid-area:s}.imp-row .ip-cm{grid-area:m}.imp-row .ip-art{grid-area:a}
.imp-row .ip-st{grid-area:t}.imp-row .ip-meta{display:none}
}
/* ── Історія змін ──────────────────────────────────────────────────────── */
.hist-head{margin-bottom:12px}
.hist-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hist-f .inl{min-width:180px}
.hist-note{font-size:12.5px;color:var(--muted);margin-top:7px}
.hist-list{display:flex;flex-direction:column;gap:3px}
.hrow{display:grid;grid-template-columns:150px 132px 220px 1fr;gap:12px;align-items:baseline;
padding:10px 13px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px}
.hrow .h-ts{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.hrow .h-who{font-weight:600;color:var(--ink)}
.hrow .h-act{font-weight:600;color:var(--accent-ink)}
.hrow .h-det{color:var(--ink-soft);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:820px){
.hrow{grid-template-columns:1fr;row-gap:2px}
.hrow .h-ts{font-size:11px}
}
.cm-list{display:flex;flex-direction:column;gap:5px}
.cmrep{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmrep.problem{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.cmrep.unseen{box-shadow:inset 3px 0 0 var(--accent)}
.cmrep>summary{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:10px 14px;
cursor:pointer;list-style:none;font-size:13.5px}
.cmrep>summary::-webkit-details-marker{display:none}
.cmrep .cm-chev{color:var(--muted);transition:transform .2s;display:inline-block}
.cmrep[open]>summary .cm-chev{transform:rotate(90deg)}
.cmrep .cm-day{font-weight:700;font-variant-numeric:tabular-nums;min-width:92px}
.cmrep .cm-kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
padding:2px 8px;border-radius:6px;background:var(--panel-2);color:var(--muted)}
.cmrep .cm-kind.catchup{background:var(--accent-soft);color:var(--accent-ink)}
.cmrep .cm-sum{font-weight:700;margin-left:auto}
.cmrep .cm-posted{font-size:12px;color:var(--muted)}
.cmrep .cm-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.cmrep .cm-badge.ok{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.cmrep .cm-badge.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.cmrep .cm-new{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
padding:2px 8px;border-radius:6px;background:var(--accent);color:#fff}
.cm-body{padding:2px 14px 11px;border-top:1px solid var(--line)}
.cm-text{margin:12px 0 0;padding:13px 15px;background:var(--panel-2);border-radius:10px;
font-family:var(--font-mono);font-size:12.5px;line-height:1.65;color:var(--ink);
white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.cm-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px}
.cm-foot .cm-ts{font-size:11.5px;color:var(--muted);margin-right:auto}
@media(max-width:620px){
.cmrep>summary{gap:8px}
.cmrep .cm-sum{margin-left:0;width:100%}
}
/* ── Підсвітка колонок План / Факт (фірмові кольори) ───────────────────────
Смуга має бути СУЦІЛЬНОЮ по всій висоті рядка, а не «плиткою»: рядок має
padding 5px зверху/знизу — з'їдаємо його відʼємним margin, і прибираємо
заокруглення, щоб колонки читались як єдина вертикальна смуга. */
.grow > .colplan,.grow > .colfact{
align-self:stretch;border-radius:0;margin-top:-5px;margin-bottom:-5px;
display:flex;align-items:center;justify-content:flex-end}
.grow > .colplan{background:var(--col-plan)}
.grow > .colfact{background:var(--col-fact)}
.grow.head > .colplan,.grow.head > .colfact{color:var(--accent-ink)}
/* поле «План» у режимі заповнення — зливається зі смугою, без вигляду «пігулки» */
.grow.row input.colplan{background:var(--col-plan);border-radius:0;border-color:transparent;
align-self:stretch;height:auto;margin-top:-5px;margin-bottom:-5px}
.grow.row input.colplan:hover{border-color:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.grow.row input.colplan:focus{background:var(--panel);border-radius:6px;border-color:var(--accent);
box-shadow:none;align-self:center;height:auto;margin-top:0;margin-bottom:0}
.dw-rl small{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);opacity:.8}
/* ═══════════════════════════════════════════════════════════════════════
LIQUID GLASS — скляний матеріал панелей
Напівпрозора підкладка + розмиття фону + світловий кант зверху
(внутрішній блік) + мʼяка тінь. Фон сторінки дає колір, який
«просвічує» крізь скло.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* Скло має бути ПРОЗОРІШИМ за попереднє: раніше заливка .58 майже глушила
фон, і панель читалась просто як біла картка. Тепер крізь неї видно
колірні плями сторінки — це і дає ефект матового скла. */
--glass-fill:rgba(255,255,255,.44);
--glass-bord:rgba(255,255,255,.68);
--glass-shadow:0 1px 2px rgba(15,63,102,.06),0 18px 40px -16px rgba(15,63,102,.34);
--glass-blur:blur(22px) saturate(180%);
}
@media (prefers-color-scheme:dark){
html:not([data-theme]){
--glass-fill:rgba(255,255,255,.055);
--glass-bord:rgba(255,255,255,.13);
--glass-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 42px -16px rgba(0,0,0,.7);
--glass-blur:blur(22px) saturate(150%);
}
}
/* виразніший фірмовий фон — щоб скло мало що заломлювати.
Плями стоять там, де лежать панелі, і фіксовані при прокрутці: тоді
під час гортання скло «переливається», а не їде разом із вмістом. */
body{
background-image:
radial-gradient(46% 34% at 8% 2%,rgba(181,216,247,.95),transparent 64%),
radial-gradient(40% 32% at 92% 6%,rgba(63,127,184,.34),transparent 62%),
radial-gradient(52% 40% at 74% 92%,rgba(181,216,247,.62),transparent 64%),
radial-gradient(38% 30% at 30% 62%,rgba(120,180,235,.22),transparent 66%);
}
@media (prefers-color-scheme:dark){
html:not([data-theme]) body{background-image:
radial-gradient(58% 44% at 10% 0%,rgba(63,127,184,.26),transparent 62%),
radial-gradient(50% 40% at 95% 4%,rgba(15,63,102,.42),transparent 62%),
radial-gradient(60% 50% at 78% 96%,rgba(40,110,150,.20),transparent 64%)}
}
/* скляні панелі */
.dk,.dcard,.summary,.center,.attn-box,.imp-row,.irun,.hrow,.cmrep{
background:var(--glass-fill);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-bord);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow);
}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .dk,html:not([data-theme]) .dcard,html:not([data-theme]) .summary,html:not([data-theme]) .center,html:not([data-theme]) .attn-box,html:not([data-theme]) .imp-row,html:not([data-theme]) .irun,html:not([data-theme]) .hrow,html:not([data-theme]) .cmrep{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
/* липка шапка блоку — теж скло, інакше просвічує вміст під нею */
.center>summary{background:color-mix(in srgb,var(--panel) 72%,transparent);
-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
.grow.head{background:color-mix(in srgb,var(--panel-2) 78%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* внутрішні картки (країни у зведенні) — легше скло, щоб не було «скло в склі» */
.ccard{background:color-mix(in srgb,var(--panel) 55%,transparent);border-color:var(--glass-bord)}
/* верхня панель і бічне меню — скло */
.appbar{background:color-mix(in srgb,var(--panel) 68%,transparent)}
.drawer{background:color-mix(in srgb,var(--panel) 88%,transparent);
-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
/* ── Колесо місяців у меню ─────────────────────────────────────────────── */
.dw-month{display:block}
.mwheel{margin-top:8px;position:relative}
.mwtrack{display:flex;gap:5px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 0;
scrollbar-width:none;-ms-overflow-style:none}
.mwtrack::-webkit-scrollbar{display:none}
.mwi{scroll-snap-align:center;flex:none;font:inherit;font-size:14px;font-weight:700;
color:var(--ink-soft);background:none;border:none;cursor:pointer;white-space:nowrap;
padding:7px 13px;border-radius:999px;opacity:.55;transition:opacity .2s,transform .2s,background .2s;
display:flex;align-items:baseline;gap:3px}
.mwi small{font-size:9.5px;font-weight:700;opacity:.7}
.mwi:hover{opacity:.85}
.mwi.on{opacity:1;color:var(--accent-ink);font-weight:800;transform:scale(1.06);
background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-bord),0 3px 10px rgba(15,63,102,.12)}
/* ── Лінійні іконки меню (замість емодзі) ──────────────────────────────── */
.dw-nav a .ic{display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:0}
.dw-nav a .ico{width:19px;height:19px;stroke:var(--ink-soft);fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.dw-nav a:hover .ico{stroke:var(--accent-ink)}
.dw-nav a.on .ico{stroke:var(--accent-ink)}
.dw-nav a.alert .ico{stroke:var(--bad)}
/* ── Вирівнювання числових колонок ─────────────────────────────────────
Поля вводу мають власний padding 7px, а звичайні комірки — ні, через це
заголовки стояли на 7px правіше за цифри. Даємо однакове поле праворуч,
щоб «ПЛАН/ФАКТ» і прапорці стояли точно над своїми числами. */
.grow span.cn{padding-right:7px}
.cact{justify-content:center}
/* ═══ Дашборд: широкі панелі замість дрібних карток ══════════════════════ */
/* KPI — одна суцільна скляна панель із розділювачами замість 4 коробочок */
.dash-kpi{display:flex;flex-wrap:wrap;gap:0;margin-bottom:20px;padding:2px 4px;
background:var(--glass-fill);border:1px solid var(--glass-bord);border-radius:var(--radius);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
.dash-kpi .dk{flex:1;min-width:168px;background:none;border:none;border-radius:0;box-shadow:none;
padding:15px 20px;border-left:1px solid var(--line)}
.dash-kpi .dk:first-child{border-left:none}
.dash-kpi .dk.accent{background:none}
.dash-kpi .dk-v{font-size:25px;letter-spacing:-.02em;white-space:nowrap}
.dash-kpi .dk-l{white-space:normal;line-height:1.25;min-height:2.5em;display:block}
@media (max-width:900px){
.dash-kpi .dk{flex:1 1 45%;min-width:0;border-left:none;border-top:1px solid var(--line);padding:12px 14px}
.dash-kpi .dk:first-child,.dash-kpi .dk:nth-child(2){border-top:none}
.dash-kpi .dk-v{font-size:21px}
}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .dash-kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
/* Країни — широкі рядки на всю ширину замість трьох вузьких карток */
.dash-countries{display:block;padding:2px 0;
background:var(--glass-fill);border:1px solid var(--glass-bord);border-radius:var(--radius);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .dash-countries{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
.dash-countries .dcard{display:grid;grid-template-columns:158px minmax(0,1fr) minmax(0,300px);
gap:8px 16px;align-items:center;padding:16px 20px;border-top:1px solid var(--line);
background:none;border-left:none;border-right:none;border-bottom:none;border-radius:0;box-shadow:none}
.dash-countries .dcard:first-child{border-top:none}
/* Рядок заголовків: підписи стоять ОДИН раз угорі, а в рядках країн
лишаються тільки числа (і дрібні уточнення в дужках, бо вони в кожної
країни свої). Так очі читають стовпчик чисел, а не п'ять підписів. */
.dash-countries .dchead{padding:10px 20px 2px;border-top:none}
.dash-countries .dchead .m{padding-bottom:0}
.dash-countries .dcard:not(.dchead) .lt{display:none}
/* місце під дрібний підпис лишаємо в кожній клітинці, щоб числа сусідніх
стовпчиків стояли на одній лінії, а не стрибали */
/* Саме flex-start тут і тримав числа вгорі: рядок високий через шкали
праворуч, а показник притискався до верху свого стовпчика. Місце під
дрібний підпис лишаємо, сам показник ставимо по центру за висотою. */
.dash-countries .dcard:not(.dchead) .m{padding-bottom:28px;justify-content:center}
.dash-countries .dcard:not(.dchead) .m .l{flex:none}
.dash-countries .dcard:not(.dchead) .m .l:empty{display:none}
@media (max-width:920px){
/* на телефоні розкладка інша (підпис ↔ число в рядок) — шапка зайва */
.dash-countries .dchead{display:none}
.dash-countries .dcard:not(.dchead) .lt{display:inline}
/* Тут підпис іде окремим рядком під числом — виводимо його з абсолютного
позиціонування, інакше він сідає просто на число («3 833 194» і поверх
нього «2 — за планом ТО …»). */
.dash-countries .dcard:not(.dchead) .m{padding-bottom:0}
.dash-countries .dcard .m-sub{position:static;display:block;margin-top:2px;
white-space:normal;line-height:1.25}
}
.dc-id{display:flex;align-items:center;gap:10px}
.dc-id .flag{font-size:21px}
.dc-id .nm{font-weight:700;font-size:15px;line-height:1.2}
.dc-id .nm small{display:block;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
/* показники країни — рівно 6 однакових колонок, тому підписи й числа стоять
строго одне під одним у всіх трьох країнах; число притиснуте до низу підпису,
тож усі числа лежать на одній лінії навіть коли підписи різної висоти */
.dc-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 14px;
align-items:stretch;align-content:center}
/* Усе в стовпчику — по ЛІВОМУ краю: підпис у шапці, число і пояснення під ним
починаються з однієї вертикалі. */
.dc-metrics .m{display:flex;flex-direction:column;min-width:0;position:relative;
padding-bottom:15px;align-items:flex-start;text-align:left}
.dc-metrics .m .l{flex:1}
.dc-metrics .m .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);font-weight:700;white-space:normal;line-height:1.3;text-align:left}
.dc-metrics .m b{font-size:14.5px;font-weight:700;white-space:nowrap;
font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.dc-metrics .m b.mut{color:var(--muted);font-weight:600}
/* Підпис під шкалою був nowrap і в довгому варіанті («внесок = 131% від
зобовʼязань (з боргом минулих)») виїжджав за свої 206 px просто під
стовпчик з великим відсотком — два тексти лягали один на одного.
Дозволяємо перенос і замикаємо колонку по ширині. */
.dc-bars{min-width:0}
.dc-bars .bar{margin:0}
@media (max-width:920px){
/* телефон: назва і % — в один рядок, показники 2×2, шкали під ними */
.dash-countries{padding:2px 0}
.dash-countries .dcard{grid-template-columns:1fr;
grid-template-areas:"id" "met" "bars";gap:12px;padding:15px 16px}
.dc-id{grid-area:id}
.dc-metrics{grid-area:met;display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
.dc-bars{grid-area:bars}
.dc-metrics .m b{font-size:15px}
}
/* ── Підписи біля відсотків: одразу видно{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);margin-top:1px;white-space:nowrap}.dcen-pct small{display:block;font-size:9px;font-weight:700;
text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:1px;
white-space:nowrap;line-height:1.1}.dcen-pct{text-align:right;line-height:1.15;flex:none;min-width:56px}.cty-nums{min-width:0}
@media (max-width:620px){ /* на телефоні лишаємо тільки цифру */
}
/* пояснення в дужках у підписах показників — тихішим тоном */
.dk-l i,.dc-metrics .m .l i{display:block;font-style:normal;font-weight:600;text-transform:none;
letter-spacing:0;color:var(--muted);opacity:.8;white-space:normal;line-height:1.2;font-size:9.5px}.cty-nums b{display:inline-block;min-width:86px;text-align:right;
font-variant-numeric:tabular-nums}
@media (max-width:620px){.cty-nums b{min-width:0}}
/* картка країни в розподілі: пояснення стадій — у той самий рядок, дрібним */
.dsum-row i{font-style:normal;font-weight:500;font-size:10px;color:var(--muted);
margin-left:5px;line-height:1.2}
/* курс валюти — підзаголовок картки, одразу під назвою країни.
В Україні курсу немає, але порожній рядок тієї ж висоти лишається:
інакше вся картка України зʼїжджає вгору відносно Польщі та Грузії. */
.dsum-fx{height:16px;line-height:16px;margin:-4px 0 8px;font-size:11.5px;font-weight:700;
color:var(--ink-soft);font-family:var(--font-mono);white-space:nowrap;overflow:hidden}
.dsum-fx em{font-style:normal;font-weight:500;font-size:10px;color:var(--muted);
font-family:var(--font);margin-left:6px}
.dsum-fx.ph{visibility:hidden}
.dsum-pending{color:var(--muted);font-weight:600}
/* проміжний підсумок по місту в таблиці розподілу */
.drow.dcity{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:700;
border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
/* перша колонка «залипає» при горизонтальній прокрутці і має власний фон —
у рядку міста він давав білу вставку поверх кольору рядка. Робимо той самий фон. */
.drow.dcity .c-loc{color:var(--accent-ink)}
summary.drow.dcity:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.drow.dcity em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);margin-left:7px}
/* ── Стовпчик «% внеску» = внесок ÷ чинне нарахування, по кожній концепції ──
Кольори: зелений — місто/точка закрила зобовʼязання, жовтий — половина і
більше, червоний — менше половини. */
/* Зірочка «в базі є борг минулих» стоїть у власному жолобі праворуч і не
зсуває саме число: інакше рядки з нею й без неї стоять по різних краях. */
.drow .cpct{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;
position:relative;padding-right:11px}
/* Колір за правилом власника: недобір — нормальний робочий стан (зелений),
переплата — привід розібратись (червоний). Так само з відсотком: усе до
100% зелене, вище 100% — червоне, бо внесли більше, ніж нараховано. */
.drow .cpct.ok{color:var(--good)}
.drow .cpct.over{color:var(--bad)}
.drow .cpct.none{color:var(--muted);font-weight:500}
/* nowrap тут і був причиною нахлисту: підпис «внесок ÷ (нарах. + борг)» ширший
за свій стовпчик і залазив на сусідній. Дозволяємо перенос по словах. */
.drow.dhead .num i{display:block;font-style:normal;font-weight:600;font-size:9px;
text-transform:none;letter-spacing:0;color:var(--muted);opacity:.85;
white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.drow.dhead{align-items:end}
/* «До оплати» = нарахування + борг минулих − внесено. Знак і колір ТІ САМІ,
що в блоці «До оплати по містах» вгорі: плюс і червоне — ще треба внести,
мінус і зелене — переплата (у запасі), нуль — місто розрахувалось.
Раніше ця колонка показувала те саме число з протилежним знаком і
протилежним кольором, і два блоки на одній сторінці суперечили один одному. */
.drow .cdev{font-weight:700}
.drow .cdue{font-weight:700}
.drow .cdue.zero,.drow .cdue.neg{color:var(--good)}
.drow .cdue:not(.zero):not(.neg){color:var(--bad)}
/* деталі внесків усередині картки розподілу */
.dist-exec{margin-top:0;padding-top:0;border-top:none}
.tx-h.big{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);margin-bottom:6px}
/* ── Підсумок міста = розкривний рядок (деталі внесків усередині таблиці) ── */
details.citygrp{display:block}
summary.drow.dcity{cursor:pointer;list-style:none}
summary.drow.dcity::-webkit-details-marker{display:none}
summary.drow.dcity:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cg-chev{display:inline-block;margin-right:7px;color:var(--accent-ink);transition:transform .2s}
details.citygrp[open] .cg-chev{transform:rotate(90deg)}
/* рядок «Разом місто» — рівно один колір: підпис «N точок» без окремої плашки,
інакше він читався як зайва світла смуга посеред рядка */
.drow.dcity em{background:none;padding:0;border-radius:0;color:var(--accent-ink);opacity:.7}
.citytx{padding:10px 14px 14px 30px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.citytx .tx-h{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:5px}
/* ── Кнопки «назад / вперед» у шапці ──────────────────────────────────── */
.navbtns{display:flex;gap:2px;flex:none}
.navb{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:9px;
display:grid;place-items:center;padding:0}
.navb svg{width:18px;height:18px;stroke:var(--ink-soft);fill:none;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.navb:hover{background:var(--accent-soft)}
.navb:hover svg{stroke:var(--accent-ink)}
.navb:active{transform:scale(.92)}
/* «Оновити» — трохи помітніша за стрілки: нею користуються найчастіше */
.navb.reload svg{stroke:var(--accent-ink)}
.navb.reload.spin svg{animation:navspin .7s linear infinite}
@keyframes navspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.navb.reload.spin svg{animation:none;opacity:.5}}
@media (max-width:520px){.navbtns{gap:0}.navb{width:29px}}
/* вибір місяця у шапці — тепер робоча кнопка, а не підпис */
select.appbar-month{font:inherit;font-size:12.5px;font-weight:700;color:var(--accent-ink);
background:var(--accent-soft);border:1px solid transparent;padding:5px 10px;border-radius:20px;
cursor:pointer;appearance:none;-webkit-appearance:none;text-align:center}
select.appbar-month:hover{border-color:var(--accent)}
select.appbar-month:focus{outline:none;border-color:var(--accent)}
/* ══ Графіки: витрати мережі та розвиток по місяцях ═══════════════════════ */
.chart{background:var(--panel);border:1px solid var(--line);border-radius:14px;
padding:14px 12px 10px;overflow-x:auto}
.ch-cols{display:flex;align-items:flex-end;gap:10px;min-width:min-content}
.ch-col{flex:1 1 0;min-width:64px;display:grid;grid-template-rows:auto auto 150px auto;
gap:4px;justify-items:center;background:none;border:none;padding:6px 2px;border-radius:10px;
font:inherit;color:inherit}
.ch-col.dev{cursor:pointer}
.ch-col.dev:hover{background:var(--accent-soft)}
.ch-col.dev.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.ch-pct{font-size:11px;font-weight:800;color:var(--sub);white-space:nowrap}
.ch-pct.on{color:var(--accent-ink)}
.ch-val{font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.ch-track{width:100%;height:150px;display:flex;align-items:flex-end;justify-content:center}
.ch-bar{width:70%;max-width:54px;min-height:2px;border-radius:8px 8px 3px 3px;
background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--panel)))}
.ch-bar.dev{background:linear-gradient(180deg,var(--good),color-mix(in srgb,var(--good) 45%,var(--panel)))}
.ch-m{font-size:11px;font-weight:800;color:var(--sub);text-transform:uppercase;
letter-spacing:.03em;white-space:nowrap}
/* список проводок розвитку під графіком */
.devlist{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
overflow:hidden}
.dl-h{padding:10px 14px;background:var(--panel-2);font-size:12.5px;color:var(--ink-soft);
border-bottom:1px solid var(--line)}
.dl-tbl{overflow-x:auto}
.dl-row{display:grid;grid-template-columns:38px 190px minmax(0,1fr) 130px;gap:10px;
align-items:center;padding:7px 14px;border-bottom:1px solid var(--line);font-size:12.5px;
min-width:560px}
.dl-row:last-child{border-bottom:none}
.dl-row.dl-head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted);font-weight:700}
.dl-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-p{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-a{overflow:hidden;font-weight:600}
.dl-a small{display:block;font-weight:500;font-size:11px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:620px){
.ch-col{min-width:56px;grid-template-rows:auto auto 110px auto}
.ch-col.dev{min-width:80px;grid-template-rows:auto auto auto 110px auto}
.ch-track{height:110px}
.ch-val{font-size:10px}
}
/* ══ Графіки: розвиток, дохідність, дивіденди ════════════════════════════ */
.fs-sync{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fs-when{font-size:12.5px;color:var(--sub)}
/* Знак валюти. Стоїть біля КОЖНОГО числа, але дрібним і блідим — інакше
колонка цифр перетворюється на частокіл із ₴ і читати її неможливо. */
.cur{font-style:normal;font-size:.92em;font-weight:700;color:var(--sub);margin-left:3px}
.cur.pre{margin-left:0;margin-right:2px} /* долар стоїть перед числом */
.num .cur{margin-left:3px}
.dv-row b small .cur,.dl-h .cur{margin-left:2px}
/* стовпчик розвитку складається з двох кольорів: мережа і локація */
.ch-stack{width:70%;max-width:54px;min-height:2px;display:flex;flex-direction:column;
border-radius:8px 8px 3px 3px;overflow:hidden}
.ch-seg{min-height:0}
.ch-seg.net{background:linear-gradient(180deg,var(--accent),
color-mix(in srgb,var(--accent) 55%,var(--panel)))}
.ch-seg.loc{background:linear-gradient(180deg,color-mix(in srgb,var(--good) 85%,var(--panel)),
color-mix(in srgb,var(--good) 40%,var(--panel)))}
/* Стовпчик розвитку: разом великим, під ним двома дрібними рядками мережа й
локація. Раніше вони стояли в один рядок і не влазили у 64px — числа
налазили на сусідній місяць. Тепер числа скорочені (млн / тис.), рядки
стоять один під одним, а сама колонка ширша. */
.ch-col.dev{min-width:92px;grid-template-rows:auto auto auto 150px auto}
.ch-tot{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.ch-two{display:flex;flex-direction:column;gap:1px;align-items:flex-start;font-style:normal}
/* gap НЕ ставимо: у рядку три елементи (крапка, число, знак валюти), і gap
роздув би відступ ще й перед ₴ — виходило «117 тис. ₴» */
.ch-two i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--sub);
white-space:nowrap;display:flex;align-items:center}
.ch-two .sw{width:7px;height:7px;border-radius:2px;flex:none;margin-right:4px}
.sw.net{background:var(--accent)}
.sw.loc{background:var(--good)}
.ch-bar.prof{background:linear-gradient(180deg,var(--good),
color-mix(in srgb,var(--good) 45%,var(--panel)))}
.ch-bar.loss{background:linear-gradient(180deg,var(--bad),
color-mix(in srgb,var(--bad) 45%,var(--panel)))}
.ch-col.pick{cursor:pointer;text-decoration:none}
.ch-col.pick:hover{background:var(--accent-soft)}
.ch-col.pick.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.dev-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.dev-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;
margin-right:5px;vertical-align:-1px}
.dev-legend .sw.net{background:var(--accent)}
.dev-legend .sw.loc{background:var(--good)}
/* Розкриття місяця: дві окремі таблиці поруч — ліворуч локальний, праворуч
мережевий. На вузькому екрані стають одна під одною. */
.dl-split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dl-half{min-width:0;border-right:1px solid var(--line);overflow-x:auto}
.dl-half:last-child{border-right:none}
.dl-sh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:10px 14px;
background:var(--panel-2);border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.dl-sh .sw{width:9px;height:9px;border-radius:3px;flex:none;align-self:center}
.dl-sh b{font-size:13.5px}
.dl-sh small{font-weight:500;font-size:11px;color:var(--muted);flex:1 1 100%}
/* min-width, щоб на телефоні колонка «Сума» не обрізалась: половинка просто
прокручується вбік, а не ховає числа за краєм екрана */
.dl-row.dev3{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 96px;gap:8px;
padding:8px 14px;min-width:340px}
.dl-row.dev3 .dl-p{font-size:12.5px}
.dl-row.dev3 .dl-a{font-size:12.5px}
.dl-row.dev3 .dl-p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
.dl-split{grid-template-columns:1fr}
.dl-half{border-right:none;border-bottom:1px solid var(--line)}
}
.dl-a .tag{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;
letter-spacing:.03em;padding:1px 5px;border-radius:5px;margin-right:6px;vertical-align:1px}
.dl-a .tag.net{background:var(--accent-soft);color:var(--accent-ink)}
.dl-a .tag.local{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
/* дохідність і дивіденди — таблиці в тій самій рамці, що й список проводок */
.pr-box{margin-top:12px;background:var(--panel);border:1px solid var(--line);
border-radius:14px;overflow:hidden}
/* min-width, щоб при багатьох власниках таблиця прокручувалась убік,
а не стискала колонки до нечитабельного */
/* долар другим рядком під гривнею, потенційні — третім */
.sub{display:block;font-size:.9em;font-weight:700;color:var(--sub);line-height:1.45}
.sub .cur{font-size:1em;margin-left:0;margin-right:1px}
/* потенційні виділені кольором — інакше два доларові рядки під числом
зливаються і не зрозуміло, де який */
.pot{display:block;font-size:.9em;font-weight:800;color:var(--pot);line-height:1.45}
.pot .cur{font-size:1em;margin-left:0;margin-right:1px}
.pc2{display:block;font-size:.88em;font-weight:800;color:var(--pctv);line-height:1.5;
white-space:nowrap}
/* клітинка власника — клікабельна, під нею розкриваються самі проводки */
.dv-cell{background:none;border:none;padding:2px 4px;margin:-2px -4px;border-radius:7px;
font:inherit;color:inherit;cursor:pointer;text-align:right;width:calc(100% + 8px)}
.dv-cell:hover{background:var(--accent-soft)}
.dv-cell.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.dv-det{background:var(--panel-2);border-bottom:1px solid var(--line);min-width:520px}
.dvd-h{padding:9px 14px 5px;font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--sub);
text-transform:uppercase;letter-spacing:.03em}
/* Розбивка успадковує СІТКУ таблиці: назва міста йде по лівому краю під
«Власником», а сума стає рівно під колонкою того року (чи власника), який
відкрили. Інакше цифри висіли б праворуч і не читались як продовження. */
.dvd-line{background:var(--panel-2);font-size:12.5px;padding-top:5px;padding-bottom:5px;
border-bottom:1px solid var(--line)}
.dvd-line .dvd-city{font-weight:700;font-size:13px}
.dvd-line small{display:block;font-size:10.5px;font-weight:700;color:var(--sub)}
.dvd-city{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* У розбивці долар знову ОКРЕМИМ рядком. Коли він стояв поруч, комірка ставала
ширшою за колонку, число з’їжджало вліво — і кожне місто зсувалось по-своєму,
бо ширина в усіх різна. Окремим рядком гривня стає рівно під колонкою. */
.dvd-line .num{white-space:nowrap}
.dvd-line .sub{display:block;margin-left:0}
.dvd-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dvd-d{color:var(--muted);font-variant-numeric:tabular-nums}
.dvd-a,.dvd-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dvd-c{color:var(--muted)}
/* підказка, що означає кожен рядок у клітинці */
/* у шапці блока долар має лишатись у рядку, а не падати вниз */
.dl-h .sub,.dl-h .pot{display:inline;margin-left:3px}
.dv-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:10px 14px;
background:var(--panel-2);border-top:1px solid var(--line);font-size:12.5px;color:var(--sub)}
.dv-leg .sub,.dv-leg .pot,.dv-leg .pc2{display:inline-block}
.dv-leg b{color:var(--ink)}
.dv-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(var(--ny),minmax(0,1fr)) 130px;
gap:8px;padding:8px 14px;align-items:center;border-bottom:1px solid var(--line);
font-size:13px;min-width:calc(230px + var(--ny) * 104px)}
.dv-row span:first-child small{display:block;font-size:11px;color:var(--sub);font-weight:700}
.dv-row:last-child{border-bottom:none}
.dv-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.05em;color:var(--muted);font-weight:800}
.dv-tot{background:var(--panel-2);font-weight:800}
/* рядок часток обороту — під підсумком, окремим тоном */
.dv-pct{background:var(--panel-2);font-weight:700;border-top:2px solid var(--line-strong)}
.dv-pct .pctline{color:var(--accent-ink);font-weight:800;white-space:nowrap}
.dv-pct .sub{font-weight:700}
.dv-row .zero{color:var(--line-strong)}
.dv-row small.warn{display:block;font-size:10.5px;color:var(--warn);font-weight:600}
@media (max-width:900px){
.dv-row{grid-template-columns:minmax(0,1fr) 110px}
.dv-row .num:not(:last-child){display:none}
}
/* ══ Шапка центру в об'єднаному Дашборді ═════════════════════════════════
«Виконання по центрах» і «Таблиця план/факт» злиті в один блок: у шапці —
формат дашборда (назва, смуга, план/факт/Δ, великий %), а розкриття дає
ту саму таблицю статей, що була на окремій сторінці. */
/* Панель центрів — така сама, як панель «По країнах»: один блок тієї ж ширини,
всередині рядки-центри. Так усі блоки Дашборда мають однакові краї. */
.pf-panel{padding:2px 18px;background:var(--glass-fill);border:1px solid var(--glass-bord);
border-radius:var(--radius);
/* clip (а не hidden) — обрізає по краях панелі, але НЕ створює скрол-контейнер,
тож липкі шапки всередині лишаються липкими до сторінки */
overflow:clip;
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .pf-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
/* Лінія між центрами йде від краю до краю панелі: сам центр «виходить» за
бокові поля панелі негативним полем і повертає їх собі відступом. Інакше
бокові 18 px скла лишаються видимою смугою на кінцях кожної лінії —
те саме, що виправляли в блоці країн. */
.pf-panel .center.pfc{background:none;border:none;border-radius:0;box-shadow:none;
margin:0 -18px;padding:0 18px;
border-top:1px solid var(--line);overflow:visible}
.pf-panel .center.pfc:first-child{border-top:none}
/* таблиця статей іде на всю ширину панелі (компенсуємо бокові поля панелі),
інакше широкі рядки впирались би в край і обрізались */
.pf-panel .grid,.pf-panel .addrow{margin-left:-18px;margin-right:-18px}
@media (max-width:620px){.pf-panel .grid,.pf-panel .addrow{margin-left:-16px;margin-right:-16px}}
/* шапка центру — фіксовані колонки, тому назви, смуги, цифри і % стоять
строго одне під одним у всіх центрах (а не «плавають» за довжиною назви) */
.center.pfc>summary{display:grid;grid-template-columns:14px 196px 118px minmax(0,1fr) 92px;
gap:0 14px;align-items:center;padding:15px 18px;background:none;border-radius:0;
margin:0 -18px}
/* шапка центру липне під верхньою панеллю. Фон вмикаємо ЛИШЕ коли вона справді
прилипла (клас .stuck ставить IntersectionObserver) — інакше суцільний білий
лежав би плямою поверх скляної панелі. */
/* Усередині скляної панелі вкладене скло не працює (браузер не бачить крізь
backdrop-filter батька), тому липкі шапки тут — суцільні, без блюру. */
.pf-panel .center.pfc>summary{-webkit-backdrop-filter:none;backdrop-filter:none}
.pf-panel .grow.head{background:var(--panel-2);
-webkit-backdrop-filter:none;backdrop-filter:none}
.pf-panel .center.pfc>summary.stuck{background:var(--panel);
box-shadow:0 6px 14px -10px rgba(15,63,102,.45)}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .pf-panel .center.pfc>summary.stuck{box-shadow:0 6px 16px -10px rgba(0,0,0,.75)}
}
@media (max-width:620px){.center.pfc>summary{padding:15px 16px;margin:0 -16px}
.pf-panel .center.pfc{margin:0 -16px;padding:0 16px}}
.pfc-mid{display:flex;flex-direction:column;gap:5px;min-width:0}
.pfc-mid .bar{width:100%;margin:0}
/* план · факт · Δ · кількість статей — теж по колонках */
.center.pfc .dcen-nums{display:grid;grid-template-columns:164px 164px 100px auto;
gap:0 12px;margin-top:0}
.pfc-n{color:var(--muted)}
.center.pfc .dcen-pct{justify-self:end;margin-left:0;flex:none}
/* Вузький екран: та сама послідовність, що й на компʼютері — назва, смуга,
під нею один рядок «план · факт · Δ · N статей», а великий % праворуч.
Раніше числа лягали сіткою 2×2, і Δ з відсотком їхали окремими рядками —
шапка займала пів екрана й читалась як три різні блоки. */
@media (max-width:1100px){
.center.pfc>summary{grid-template-columns:14px minmax(0,1fr) auto;
grid-template-areas:"chev nm lvl" ". mid pct";gap:8px 12px;align-items:end}
.center.pfc .chev{grid-area:chev}
.center.pfc .cname{grid-area:nm}
.center.pfc .cstat{grid-area:lvl;justify-self:end}
.pfc-mid{grid-area:mid}
.center.pfc .dcen-pct{grid-area:pct;justify-self:end;text-align:right;align-self:end}
.center.pfc .dcen-nums{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px}
.center.pfc .dcen-nums>span{white-space:nowrap}
}
@media (max-width:430px){
.center.pfc .dcen-nums{gap:2px 9px;font-size:10.5px}
}
@media (max-width:620px){.pf-panel{padding:2px 16px}}
/* порожня підказка пошуку не має додавати відступ — інакше поле пошуку
виходило вужчим за решту блоків */
.pf-search .pf-hint:empty{display:none}
.pf-search{gap:0}
.pf-search .pf-clear,.pf-search .pf-hint{margin-left:8px}
/* однакові краї у всіх блоків Дашборда */
.dash-kpi,.dash-countries,.pf-panel,.grand,.pf-search,.dash-sec>.chart,.dash-sec>.devlist{
margin-left:0;margin-right:0}
/* ── ТЕЛЕФОН І ПЛАНШЕТ: блоки на всю ширину екрана ───────────────────────
Бокові поля з'їдали помітну смугу, і обабіч кожної панелі лишалась світла
вертикальна лінія фону. Тепер панелі йдуть від краю до краю, а текст
(заголовки, примітки, підписи) лишається з полями. */
@media (max-width:1180px){
.dash-kpi,.dash-countries,.pf-panel,.grand,.dash-alert,.attn-box,.alert-box,
.chart,.devlist,.pf-search,.center,.closed-banner,.dist-c,
.cmrep,.cm-board-sec,.mb-city,.py-card,.py-empty,.pr-card,.pr-sum,.pr-done,.pr-empty{
margin-left:-16px;margin-right:-16px;
border-radius:0;border-left-width:0;border-right-width:0}
/* усередині — той самий відступ, що й у решти блоків */
.cmrep>summary,.cm-board-sec>summary,.mb-city,.py-card,.pr-card,.pr-sum,.pr-empty,
.py-empty{padding-left:16px;padding-right:16px}
.pr-drow{padding-left:16px;padding-right:16px}
.pf-search #pfq{border-radius:0;border-left:none;border-right:none}
.grand{padding-left:16px;padding-right:16px}
.dash-alert,.attn-box>summary,.closed-banner{padding-left:16px;padding-right:16px}
/* Панель іде впритул до краю екрана — але ТЕКСТ усередині має відступ.
Без цього підписи й числа починались просто від краю скла, а великий
відсоток праворуч торкався межі. */
.dash-kpi{padding-left:0;padding-right:0}
.dash-kpi .dk{padding-left:16px;padding-right:16px}
/* Те саме, що для .dash-kpi вище: поля тримає КАРТКА, а не панель. Коли
відступ стояв на панелі, роздільні лінії та фон рядків обривались за
16px до краю — і на телефоні це читалось як бокові полоси. */
.dash-countries{padding-left:0;padding-right:0}
.dash-countries .dcard{padding-left:16px;padding-right:16px}
.center>summary,.cbar,.cb-note,.dist-c{padding-left:16px;padding-right:16px}
.cbar,.cb-note{margin-left:0;margin-right:0}
.center.pfc>summary{margin:0}
/* таблиця — навпаки, на всю ширину панелі: рядки й так мають свій відступ */
.pf-panel{padding-left:0;padding-right:0}
.pf-panel .grid,.pf-panel .addrow,.pf-panel .moverow{margin-left:0;margin-right:0}
}
/* ── Значок кошика — той самий лінійний, що в бічному меню (замість емодзі) ── */
.ic-bskt{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:5px;flex:none}
.dash-alert .ic-bskt{width:18px;height:18px;vertical-align:-4px}
/* ── Кнопки під таблицею розподілу — усі однакові («під лінійку») ───────── */
.dist-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:stretch}
.dist-actions form{margin:0;display:flex}
.dist-actions .del-bulk,.dist-actions .add,.dist-actions .btn-close,.dist-actions button{
font:inherit;font-size:13px;font-weight:600;line-height:1.2;
height:38px;padding:0 16px;border-radius:11px;
display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft);
box-shadow:none;cursor:pointer;text-decoration:none}
.dist-actions .del-bulk:hover,.dist-actions .add:hover{border-color:var(--accent);color:var(--accent-ink);filter:none}
/* «Закрити період» лишається акцентною — але тієї самої форми й висоти */
.dist-actions .btn-close{background:var(--good);border-color:var(--good);color:#fff;font-weight:700}
.dist-actions .btn-close:hover{filter:brightness(1.06)}
@media (max-width:620px){
/* minmax(0,1fr), а не 1fr: клітинка гріда за замовчуванням не вужча за свій
вміст, а вміст у нас nowrap — тож «Експорт нарахувань (CSV)» і «Закрити
період 2026-05» розпирали праву колонку за край екрана й обрізались. */
.dist-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:8px;align-items:stretch}
.dist-actions form,.dist-actions .add{width:100%;min-width:0;height:100%}
.dist-actions .add,.dist-actions button{
width:100%;min-width:0;
/* дозволяємо два рядки — так назва вміщається повністю, а не обрізається */
white-space:normal;text-align:center;line-height:1.15;overflow-wrap:anywhere;
/* висоту задає найвища кнопка ряду, решта тягнеться до неї (stretch) */
height:100%;min-height:44px;padding:8px 10px}
}
/* «Разом» стоїть і над таблицею, і під нею — верхній читається як продовження
шапки колонок, тож розділювач у нього знизу, а не зверху */
.drow.dfoot.dtop{border-top:none;border-bottom:1px solid var(--line-strong)}
/* значок кошика в дрібному підписі показника — менший */
.dc-metrics .m .l .ic-bskt{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
/* ── Дрібний підпис під показником («у кошику N») ─────────────────────── */
/* дрібний підпис висить під числом, але місце під нього зарезервоване в КОЖНІЙ
клітинці (padding-bottom) — інакше число з підписом стрибало б вище за сусідні */
/* Під числом тепер може стояти ДВА дрібні рядки: розклад із боргом минулих
і стадія розрахунку. Стадія завжди нижня, тому вона на одному рівні з
дрібними підписами сусідніх стовпчиків. */
.dc-metrics .m-sub{position:absolute;left:0;right:10px;bottom:0;font-size:10.5px;font-weight:600;
text-align:left;display:flex;flex-direction:column;gap:1px;
color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
/* підпис не має заповзати в сусідній стовпчик — обрізаємо по своїй колонці */
overflow:hidden;text-overflow:ellipsis}
.dc-metrics .m-sub .ic-bskt{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
/* ── Рядок «Мережа разом» — підсумок по всіх стовпчиках ───────────────── */
/* Усередині блоку — рівний фон, як у смузі плану: залитий підсумковий рядок
робив блок «смугастим». Відділяємо його не кольором, а лінією. */
.dash-countries .dcard.dtotal{background:none;
border-top:1px solid var(--line-strong)}
.dcard.dtotal .dc-id .nm{font-size:15px;color:var(--accent-ink)}
.dcard.dtotal .dc-metrics .m b{font-size:15.5px}
.dcard.dtotal .dc-metrics .m .l{color:var(--accent-ink);opacity:.75}
/* Концепції тепер лежать УСЕРЕДИНІ рядка міста (за замовчуванням згорнуті) —
даємо їм невеликий відступ, щоб було видно вкладеність */
.drow.dloc .c-loc{padding-left:18px}
.drow.dloc{background:var(--panel)}
@media (max-width:760px){.drow.dloc .c-loc{padding-left:12px}}
/* бейдж із відсотком притискаємо до низу картки — тоді картка з підписом
«у кошику» не зсуває свій бейдж нижче за сусідні */
.dash-kpi .dk-badge{margin-top:auto}
/* ══ Комісії: діловий звіт замість Telegram-повідомлення ═════════════════ */
.cmr-sec{margin:0 0 9px}
.cmr-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin:0 0 4px}
.cmr-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.cmr-row{display:grid;grid-template-columns:minmax(0,1fr) 128px 112px;gap:10px;align-items:baseline;
padding:4px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.cmr-row:last-child{border-bottom:none}
.cmr-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmr-row .st{font-size:11px;font-weight:700;text-align:right;white-space:nowrap;color:var(--muted)}
.cmr-row .st.ok{color:var(--good)}
.cmr-row .st.done{color:var(--ink-soft)}
.cmr-row .st.warn{color:var(--warn)}
.cmr-row .st.bad{color:var(--bad)}
.cmr-row .st.mut{color:var(--muted)}
.cmr-w .cmr-row{grid-template-columns:minmax(0,1.3fr) 105px 58px 140px 140px 148px 162px 96px}
.agg-cell{display:block;white-space:nowrap}
.cmr-row.cmr-head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);font-weight:700}
.cmr-row.cmr-head .st{text-align:right}
.cmr-row.cmr-city{background:var(--accent-soft);font-weight:700;color:var(--accent-ink)}
.cmr-row.cmr-city em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;opacity:.7;margin-left:8px}
.cmr-row.cmr-sub{color:var(--ink-soft)}
.cmr-row.cmr-sub > span:first-child{padding-left:16px}
.cmr-row.cmr-foot{background:var(--panel-2);font-weight:700;border-top:1px solid var(--line-strong)}
.cmr-row .mut{color:var(--muted)}
/* ── Доступ до вкладок у картці користувача ─────────────────────────────── */
.uc-tabs{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
margin:10px 0 2px;padding-top:9px;border-top:1px solid var(--line)}
.uct-all{font-size:12px;color:var(--muted);padding-top:3px}
/* усі вкладки — одним рядком: картки ділять ширину порівну і стискаються */
/* Вкладки прав — сітка рівних колонок, а не один довгий ряд. Раніше дев'ять
карток стискались в одну лінію, остання («Історія») зрізалась за краєм, а
висота стрибала від картки до картки. */
.uct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
align-items:start;gap:var(--sp-2);flex:1;min-width:0}
/* вкладка + її дії — однією колонкою, щоб було видно, що кому належить.
flex:0 1 auto — картка завширшки як її вміст, а тісно стане — стиснеться,
а не перенесеться на новий рядок (тому й нема порожніх «хвостів»). */
.uct-tab{display:flex;flex-direction:column;gap:3px;padding:7px 9px 8px;min-width:0;
border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
/* «Бюджет КК» несе всередині ще й центри витрат — даємо їй дві колонки,
інакше вона вилазила поверх сусідньої картки */
.uct-grid > .uct-tab:first-child{grid-column:span 2}
@media (max-width:900px){.uct-grid > .uct-tab:first-child{grid-column:span 1}}
/* довгі назви вкладок переносяться, а не обрізаються */
.uct-tab .uct,.uct-tab .uct-act{white-space:normal;line-height:1.3}
.uct-tab.on{border-color:var(--accent);background:var(--accent-soft)}
.uct-tab .uct{border:none;background:none;padding:1px 2px}
.uct-tab .uct:hover{border:none}
.uct-acts{display:flex;flex-direction:column;gap:1px;padding-left:16px;min-width:0}
/* у вузькій картці підпис переноситься, а не вилазить за край */
.uct-act{display:flex;align-items:flex-start;gap:5px;font-size:11.5px;line-height:1.35;
color:var(--muted);cursor:pointer}
.uct-act input{margin:1px 0 0;cursor:pointer;flex:none}
.uct-act:has(input:checked){color:var(--accent-ink);font-weight:600}
.uct-act:has(input:disabled){opacity:.42;cursor:default}
.uct{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;white-space:nowrap;
padding:3px 9px 3px 7px;border:1px solid var(--line);border-radius:999px;
background:var(--panel-2);cursor:pointer}
.uct:hover{border-color:var(--accent)}
.uct:has(input:checked){background:var(--accent-soft);border-color:var(--accent);
color:var(--accent-ink);font-weight:600}
.uct input{margin:0;cursor:pointer}
@media (max-width:760px){
}
/* ── три колонки: ФОП · комісія (+«проведено») · банк vs Syrve (+«ок») ──
Окремого стовпчика «Стан» більше нема: статус стоїть під тією цифрою,
якої стосується, — інакше було незрозуміло{grid-template-columns:minmax(0,1fr) 190px 210px;align-items:center}
/* Блідим — тільки ті, до кого ще нема доступу до виписки. Хто доступ дав,
стоїть звичайним кольором: видно, з ким уже можна працювати. */
.cmr-row.cmr-sub.idle{opacity:1}
.cmr-row.cmr-sub.idle .num{opacity:.55}
.cmr-row.cmr-sub.ready .fop-n{color:var(--ink)}
/* на компі — повне ПІБ із банку, коротке ховаємо */
.cmr-3 .h-short,.cmr-3 .n-short,.cmr-w .h-short,.cmr-w .n-short{display:none}
/* сирий текст — під спойлером, щоб нічого не загубити */
.cmr-raw{margin:4px 0 12px}
.cmr-raw > summary{cursor:pointer;font-size:11.5px;color:var(--muted);font-weight:600;
list-style:none;padding:4px 0}
.cmr-raw > summary::-webkit-details-marker{display:none}
.cmr-raw > summary:hover{color:var(--accent-ink)}
@media (max-width:620px){
.cmr-row{grid-template-columns:minmax(0,1fr) 96px;gap:6px}
.cmr-row .st{grid-column:1/-1;text-align:left;padding-left:16px}
.cmr-row.cmr-head .st{display:none}
}
/* Червоний значок «Комісії» в меню веде просто до цієї кнопки: людина
бачить сигнал → бачить, у чому річ → одним рухом закриває його. */
#unseen{scroll-margin-top:120px}
.seen-btn.lead{border-color:var(--good);color:var(--good);font-weight:700;
animation:seenpulse 1.8s ease-in-out infinite}
@keyframes seenpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 34%,transparent)}
50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.seen-btn.lead{animation:none}}
/* службовий довідник унизу — згорнутий, щоб не сперечався з цифрами дня */
.cm-ref{margin-top:18px;border:1px solid var(--line);border-radius:14px;
background:var(--panel);padding:0 14px}
.cm-ref-h{cursor:pointer;list-style:none;padding:12px 0;font-family:var(--font-display);
font-size:14px;color:var(--ink-soft);user-select:none}
.cm-ref-h::-webkit-details-marker{display:none}
.cm-ref-h::before{content:"▸ ";font-size:10px;color:var(--muted)}
.cm-ref[open] > .cm-ref-h::before{content:"▾ "}
.cm-ref[open] > .cm-ref-h{border-bottom:1px solid var(--line);color:var(--ink)}
.cm-ref > .cm-board{padding-top:12px}
/* ══ Комісії: дошка міст (4 колонки — що підключено, що чекає) ═══════════ */
.cm-board-sec{margin:0 0 14px}
/* картки міст не розтягуються одна під одну (align-items:start) — інакше Київ
із 29 ФОПами робив із Львова/Дніпра порожні прямокутники на пів-екрана */
.cm-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:start}
.cmb{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:9px 11px;box-shadow:var(--shadow);min-width:0}
.cmb.ready{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.cmb.part{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.cmb.empty{background:var(--panel-2)}
.cmb-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.cmb-city{font-weight:700;font-size:14px}
.cmb-pts{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
/* смужка готовності: підпис · шкала · лічильник — один рядок замість списку */
.cmb-m{display:flex;align-items:center;gap:7px;margin:0 0 4px}
.cmb-lbl{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);flex:none;min-width:62px}
.cmb-track{flex:1;height:5px;border-radius:3px;background:var(--panel-2);
box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;min-width:0}
.cmb-track i{display:block;height:100%;border-radius:3px;background:var(--line-strong)}
.cmb-track i.ok{background:var(--good)}
.cmb-track i.warn{background:var(--warn)}
/* «Доступ» — синім: ФОП свою частину зробив, але це ще не проводка */
.cmb-track i.acc{background:var(--accent)}
.cmb-num{flex:none;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.cmb-num.ok{color:var(--good)}.cmb-num.warn{color:var(--warn)}.cmb-num.none{color:var(--muted)}
.cmb-num.acc{color:var(--accent-ink)}
.cmb-list li .acc-tick{color:var(--accent-ink);font-weight:800;font-size:10px;flex:none}
/* повний склад — під розкривачкою, щоб не роздувати картку */
.cmb-more{margin-top:6px;border-top:1px solid var(--line);padding-top:5px}
.cmb-more>summary{cursor:pointer;list-style:none;font-size:10px;font-weight:800;
letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:1px 0}
.cmb-more>summary::-webkit-details-marker{display:none}
.cmb-more>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.cmb-more[open]>summary::before{content:"▾ "}
.cmb-more>summary:hover{color:var(--accent-ink)}
.cmb-more .cmb-list+.cmb-list{margin-top:5px;padding-top:5px;border-top:1px solid var(--line)}
.cmb-list{list-style:none;margin:0;padding:0}
.cmb-list li{display:flex;align-items:baseline;gap:6px;font-size:12px;padding:2px 0;
overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cmb-list li em{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;
color:var(--muted);white-space:nowrap}
.cmb-list li .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted)}
.cmb-list li.ok .dot{background:var(--good)}
.cmb-list li.wait .dot{background:var(--warn)}
.cmb-list li.wait em{color:var(--warn)}
@media (max-width:1100px){.cm-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cm-board{grid-template-columns:1fr}}
/* підпис під дошкою міст + кнопка оновлення плану рахунків */
.cm-board-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
font-size:11.5px;color:var(--muted)}
.cm-board-foot form{margin:0 0 0 auto}
.cmb-list li.off .dot{background:var(--line-strong)}
.cmb-list li.off{color:var(--muted)}
.cmb-list li.off em{color:var(--muted);opacity:.8}
/* Скрол усередині картки прибрано: він різав прізвища навпіл («Коморевцева М.Є.»).
Довгі списки (Київ — 29 ФОПів) тепер під розкривачкою «склад» і згорнуті. */
.cmb-list li{gap:5px}
.cmb-list li em{font-size:9.5px}
/* ── ТЕЛЕФОН: показники країни — суцільні рядки, без порожніх клітинок ────
Сітка 2×N лишала дірку там, де показників непарна кількість (права половина
останнього рядка стояла порожня), плюс кожна клітинка резервувала місце під
підпис «у кошику». Тепер це просто рядки: підпис зліва, число справа. */
@media (max-width:620px){
.dash-countries .dcard{gap:10px 12px}
.dc-metrics{display:block !important;gap:0}
.dc-metrics .m{display:flex;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap;
position:static;padding:6px 0 5px;border-top:1px solid var(--line);height:auto}
.dc-metrics .m:first-child{border-top:none;padding-top:0}
.dc-metrics .m .l{flex:1 1 auto;min-width:0;white-space:normal}
/* пояснення в дужках — окремим рядком під назвою, інакше воно розриває рядок */
.dc-metrics .m .l i{display:block;font-size:9.5px;margin-left:0}
.dc-metrics .m b{margin-left:auto;white-space:nowrap;font-size:15px}
/* «+ у кошику» — своїм рядком справа, щоб числа лишались на одній вертикалі */
.dc-metrics .m-sub{position:static;flex:0 0 100%;margin:2px 0 0;text-align:right}
/* смуги виконання йдуть одразу під показниками, без зайвої повітряної зони */
.dc-bars{margin-top:2px}
}
/* ── Права: три рівні вкладеності (вкладка → блок → центри) ─────────────── */
.uct-act.blk{font-weight:700;color:var(--ink)}
.uct-centers{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:6px 10px;margin:4px 0 8px 22px;padding:8px 10px;border-left:2px solid var(--accent-soft);
background:var(--panel-2);border-radius:0 10px 10px 0}
/* закрито, поки не відмічено сам блок «Таблиця план/факт» */
.uct-centers.off{display:none}
.uct-centers .perm-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
/* назва центру і випадашка — в один рядок, а не одне під одним */
.uct-centers .pc-row{display:flex;align-items:center;gap:6px;min-width:0}
.uct-centers .pc-name{font-size:11.5px;color:var(--ink-soft);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uct-centers select{font-size:11.5px;padding:3px 6px;flex:none;width:104px}
@media (max-width:620px){
.uct-centers{grid-template-columns:1fr;margin-left:14px}
}
/* на вузьких екранах один рядок із семи карток нечитабельний — повертаємо перенос */
@media (max-width:1180px){
.uct-grid{flex-wrap:wrap}
.uct-tab{flex:1 1 210px}
.uct-grid > .uct-tab:first-child{flex-grow:1;flex-basis:100%}
}
/* ── Підстатті всередині центру (Маркетинг: Ретеншн / Перформ / Бренд) ────
Читається як роздільник розділу: суцільна заливка на всю ширину (липка
колонка «Стаття» теж), акцентна риска зліва і жирна лінія зверху. */
.grow.gsub{background:var(--accent-soft);font-weight:700;color:var(--accent-ink);
border-top:1px solid var(--line-strong)}
.grow.gsub .c-name{background:var(--accent-soft);font-size:12.5px;
box-shadow:inset 3px 0 0 var(--accent)}
.grow.gsub:hover .c-name{background:var(--accent-soft)}
.grow.gsub .cn{color:var(--accent-ink)}
.grow.gsub em{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;opacity:.7;margin-left:8px}
@media (max-width:760px){ /* + роздільник липкої колонки, як в інших рядках */
.grow.gsub .c-name{box-shadow:inset 3px 0 0 var(--accent),6px 0 6px -4px rgba(33,31,26,.12)}
}
/* галочки підстатей — під своїм центром, у його ж комірці */
.perm-subs{display:flex;flex-wrap:wrap;gap:0 12px;margin:0 0 2px 2px}
.uct-act.sub{font-size:11px;color:var(--ink-soft)}
/* ── Сторінка «немає доступу» замість голого Forbidden ──────────────────── */
.noaccess{max-width:560px;margin:40px auto;padding:28px 26px 24px;text-align:center;
background:var(--panel);border:1px solid var(--line);border-radius:18px}
.na-ico{font-size:34px;line-height:1;margin-bottom:10px}
.na-h{margin:0 0 12px;font-size:18px;font-weight:800;color:var(--ink)}
.na-t{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.na-perm{display:inline-block;margin:0 0 14px;padding:9px 14px;font-size:13px;font-weight:700;
color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);
border-radius:10px;line-height:1.45;overflow-wrap:anywhere}
.na-act{margin-top:6px}
.na-btn{display:inline-block;text-decoration:none}
@media (max-width:620px){
.noaccess{margin:24px 0;padding:22px 16px 20px;border-radius:14px}
}
/* ── Порожній стан у «План/факт»: нема центрів або порожній місяць ───────── */
.pf-none{margin:10px 0 4px;padding:14px 16px;border-radius:12px;font-size:12.5px;
line-height:1.55;color:var(--ink-soft);background:var(--panel-2);
border:1px solid var(--line)}
.pf-none b{color:var(--ink)}
.pf-none.warn{background:color-mix(in srgb,var(--warn) 10%,transparent);
border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
/* ── Кнопка «Зберегти права»: видно стан ────────────────────────────────────
звичайна → «є незбережені зміни» (акцент + пульс) → «зберігаю…» → «збережено» */
.uc-save{transition:background-color .18s ease, box-shadow .18s ease}
.uc-save.unsaved{background:var(--warn);color:#fff;
box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 55%,transparent);
animation:ucPulse 1.8s ease-out infinite}
.uc-save.saving{background:var(--muted);color:#fff;animation:none;cursor:progress}
.uc-save.saved{background:var(--good);color:#fff;animation:none}
@keyframes ucPulse{
0% {box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 55%,transparent)}
70% {box-shadow:0 0 0 7px color-mix(in srgb,var(--warn) 0%,transparent)}
100% {box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){ .uc-save.unsaved{animation:none} }
/* ── Збереження рядка по Enter: видно результат, сторінка не стрибає ──────── */
form.grow.row{scroll-margin-top:96px;scroll-margin-bottom:56px}
form.grow.row.saved{background:color-mix(in srgb,var(--good) 13%,transparent)}
form.grow.row.failed{background:color-mix(in srgb,var(--bad) 13%,transparent)}
form.grow.row.saved,form.grow.row.failed{transition:background-color .45s ease}
/* незбережений план продажів по локації — так само помітно, як рядок статті */
form.plan-f.dirty input.inl{background:color-mix(in srgb,var(--warn) 18%,transparent);
border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
/* ── Вікно «є незбережені зміни» ─────────────────────────────────────────── */
.gd-back{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(20,30,45,.42);backdrop-filter:blur(2px)}
.gd-back[hidden]{display:none}
.gd{width:100%;max-width:420px;padding:24px 22px 20px;text-align:center;border-radius:18px;
background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 50px rgba(15,30,50,.28)}
.gd-ico{font-size:30px;line-height:1;margin-bottom:8px}
.gd-h{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--ink)}
.gd-t{margin:0 0 18px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
/* поле у вікні — напр. коментар при поверненні бюджету на доопрацювання */
.gd-in{font:inherit;font-size:13px;width:100%;margin:0 0 14px;padding:10px 12px;resize:vertical;
border-radius:10px;border:1px solid var(--line-strong);background:var(--panel-2);
color:var(--ink);text-align:left}
.gd-in:focus{outline:none;border-color:var(--accent)}
.gd-in.bad{border-color:var(--bad)}
.gd-in[hidden]{display:none}
.gd-btns{display:flex;flex-direction:column;gap:8px}
.gd-b{font:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:11px 14px;cursor:pointer;
border:1px solid transparent}
.gd-save{background:var(--accent);color:#fff}
.gd-save:hover{filter:brightness(1.06)}
.gd-leave{background:var(--panel);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.gd-leave:hover{background:color-mix(in srgb,var(--bad) 9%,transparent)}
/* поле суми, поки нема плану продажів: видно, що воно замкнене */
.grow.row input.inl.locked{cursor:not-allowed;color:var(--muted);
background:repeating-linear-gradient(135deg,transparent 0 6px,
color-mix(in srgb,var(--muted) 9%,transparent) 6px 12px)}
/* ── «Шапка рядка» зліва: за неї тягнемо рядок, як у таблицях Excel ─────── */
.rgrip{position:sticky;left:0;z-index:3;align-self:stretch;margin:-5px 0;
display:flex;align-items:center;justify-content:center;
font-size:11px;line-height:1;color:transparent;user-select:none;
background:var(--panel);border-right:1px solid var(--line)}
.grow.head > .rgrip,.grow.foot > .rgrip{background:var(--panel-2)}
.grow.gsub > .rgrip{background:var(--accent-soft)}
form.grow.row > .rgrip{cursor:grab;color:var(--muted)}
form.grow.row > .rgrip:hover{background:var(--accent-soft);color:var(--accent-ink)}
form.grow.row > .rgrip:active{cursor:grabbing}
.grow.row.dragging > .rgrip{background:var(--accent-soft);color:var(--accent-ink)}
@media (max-width:760px){ .rgrip{display:none} }
/* підказка під товарообігом: у якій валюті вводити */
.dw-hint{margin:8px 0 2px;font-size:10.5px;line-height:1.5;color:var(--muted)}
.dw-hint b{color:var(--ink-soft)}
/* валюта країни в шапці колонки товарообігу */
.dw-grid > span > small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.04em;
color:var(--muted);margin-top:1px}
/* видалена стаття, яку лишили на екрані через цифри цього місяця */
.grow.row.gone{opacity:.62}
.grow.row.gone .c-name{text-decoration:line-through;text-decoration-color:var(--muted)}
.gone-t{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--bad);text-decoration:none;margin-left:6px}
/* ── Статті, прибрані з цього місяця (повернути можна одним кліком) ─────── */
.hid-box{margin:0;padding:8px 14px 10px;border-top:1px solid var(--line);background:var(--panel-2)}
.hid-box > summary{font-size:11.5px;color:var(--muted);cursor:pointer;list-style:none}
.hid-box > summary::-webkit-details-marker{display:none}
.hid-box > summary::before{content:"▸ ";color:var(--muted)}
.hid-box[open] > summary::before{content:"▾ "}
.hid-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.hid-list form{display:flex;align-items:center;gap:10px}
/* Приховані НЕ викреслюємо (див. .hid-n нижче) — вони живі, просто не в
цьому місяці. Викреслення лишили лише для видалених із довідника. */
/* ── Сторінка-інструкція ────────────────────────────────────────────────── */
.doc{max-width:820px}
.doc-lead{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:4px 0 18px}
.doc-toc{display:flex;flex-wrap:wrap;gap:6px 10px;padding:14px 16px;margin-bottom:26px;
background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.doc-toc a{font-size:12px;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.doc-toc a:hover{text-decoration:underline}
.doc-h{margin:30px 0 10px;font-size:17px;font-weight:800;color:var(--ink);
padding-bottom:7px;border-bottom:1px solid var(--line)}
.doc p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 11px}
.doc b{color:var(--ink)}
.doc code{font-size:12.5px;background:var(--panel-2);padding:1px 5px;border-radius:5px}
.doc-ul,.doc-steps{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.65;
color:var(--ink-soft)}
.doc-ul li,.doc-steps li{margin-bottom:7px}
.doc-steps li::marker{font-weight:800;color:var(--accent-ink)}
.doc-note{padding:11px 14px;background:var(--accent-soft);border-radius:10px;
border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.doc-tbl{display:flex;flex-direction:column;gap:1px;margin:0 0 13px;
background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.doc-tbl > div{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:9px 13px;
background:var(--panel);font-size:13px;line-height:1.55}
.doc-tbl b{color:var(--ink)} .doc-tbl span{color:var(--ink-soft)}
.doc-keys{display:flex;flex-direction:column;gap:1px;margin:0 0 13px;
background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.doc-keys > div{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center;
padding:8px 13px;background:var(--panel);font-size:13px;color:var(--ink-soft)}
kbd{display:inline-block;font:inherit;font-size:11.5px;font-weight:700;padding:2px 7px;
border-radius:6px;background:var(--panel-2);border:1px solid var(--line-strong);
box-shadow:0 1px 0 var(--line-strong);color:var(--ink)}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.chip.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.chip.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.chip.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.doc-foot{margin-top:32px;padding-top:14px;border-top:1px solid var(--line);
font-size:12px;color:var(--muted);line-height:1.55}
@media (max-width:620px){
.doc-tbl > div,.doc-keys > div{grid-template-columns:1fr;gap:3px}
}
.doc-h3{margin:16px 0 7px;font-size:13.5px;font-weight:800;color:var(--ink)}
.doc-warn{padding:11px 14px;margin:0 0 11px;border-radius:10px;
background:color-mix(in srgb,var(--warn) 10%,transparent);
border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.doc s{color:var(--muted)}
/* ── Ручний вибір теми ───────────────────────────────────────────────────────
За замовчуванням тема йде за системою: медіа-запити вище діють, поки на
немає data-theme. Щойно людина обрала «Світла» або «Темна» — data-theme
зʼявляється, системний запит вимикається, а для «Темна» вмикається блок нижче. */
html[data-theme="dark"]{
--brand-navy:#9fc6ef; --brand-blue:#b5d8f7; --brand-mid:#79b0e6;
--paper:#0a0e15; --panel:#141b27; --panel-2:#1a2331;
--ink:#eaf0ff; --ink-soft:#a7b3c8; --muted:#71809a;
--line:#222c3d; --line-strong:#2f3b50;
--accent:#79b0e6; --accent-soft:#16283c; --accent-ink:#a9cef2;
--good:#3fd39a; --warn:#e6b45a; --bad:#ff7a7a;
--sub:#71809a; --pot:#a9cef2; --pctv:#71809a;
--col-plan:rgba(181,216,247,.11); --col-fact:rgba(120,170,225,.09);
--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 24px -8px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background-image:
radial-gradient(52% 40% at 12% 0%,rgba(63,127,184,.16),transparent 62%),
radial-gradient(46% 36% at 96% 6%,rgba(15,63,102,.28),transparent 60%)}
html[data-theme="dark"]{
--glass-fill:rgba(255,255,255,.06);
--glass-bord:rgba(255,255,255,.14);
--glass-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -12px rgba(0,0,0,.65);
}
html[data-theme="dark"] body{background-image:
radial-gradient(58% 44% at 10% 0%,rgba(63,127,184,.26),transparent 62%),
radial-gradient(50% 40% at 95% 4%,rgba(15,63,102,.42),transparent 62%),
radial-gradient(60% 50% at 78% 96%,rgba(40,110,150,.20),transparent 64%)}
html[data-theme="dark"] .dk,html[data-theme="dark"] .dcard,html[data-theme="dark"] .summary,html[data-theme="dark"] .center,html[data-theme="dark"] .attn-box,html[data-theme="dark"] .imp-row,html[data-theme="dark"] .irun,html[data-theme="dark"] .hrow,html[data-theme="dark"] .cmrep{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html[data-theme="dark"] .dash-kpi{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html[data-theme="dark"] .dash-countries{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html[data-theme="dark"] .pf-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html[data-theme="dark"] .pf-panel .center.pfc>summary.stuck{box-shadow:0 6px 16px -10px rgba(0,0,0,.75)}
/* перемикач теми в бічному меню */
.dw-theme{display:flex;gap:4px;margin:12px 14px 0;padding:3px;border-radius:10px;
background:var(--panel-2);border:1px solid var(--line)}
.dw-theme button{flex:1;font:inherit;font-size:11px;font-weight:700;padding:6px 4px;
border:none;border-radius:7px;background:none;color:var(--ink-soft);cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:4px}
.dw-theme button:hover{color:var(--accent-ink)}
.dw-theme button[aria-pressed="true"]{background:var(--accent);color:#fff}
/* ── Статус бюджету центру: чернетка → подано → прийнято ──────────────────
Кольори беремо з тих самих змінних, що й решта застосунку (--muted,
--warn, --good), тож у темній темі все перемальовується саме.
Емодзі свідомо НЕ використовуємо: на iPhone вони малюються кольоровими
кубиками й тягнуть увесь блок у важкий, застарілий вигляд. Замість них —
крапка кольору стану й тонкі SVG-іконки, як у бічному меню. */
.st-d{--sc:var(--muted)}
.st-s{--sc:var(--warn)}
.st-a{--sc:var(--good)}
/* пігулка в шапці центру: заливка без обведення — легша й сучасніша за
рамку з емодзі, яка там була */
.center.pfc .cstat{justify-self:start;display:inline-flex;align-items:center;gap:6px;
font-size:11px;letter-spacing:.01em;font-weight:650;padding:4px 10px 4px 8px;
border-radius:8px;color:var(--sc);white-space:nowrap;
background:color-mix(in srgb,var(--sc) 13%,transparent)}
.cstat .ci{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* ── Смуга стану під шапкою центру ───────────────────────────────────────
Один рядок на всю ширину: ліворуч — де бюджет зараз (крапка, статус, час,
пояснення), праворуч — дії. Раніше правило звалось .mk-cbar і до смуги
взагалі не застосовувалось (у розмітці клас .cbar), тому все стояло
злиплим стовпчиком; а пояснення жило окремим рядком під статусом і
з'їдало висоту там, де вільно було по ширині. */
.cbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
margin:0 -18px;padding:11px 18px;border-top:1px solid var(--line);
background:color-mix(in srgb,var(--sc) 5%,transparent)}
.cb-l{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1 1 320px}
.cb-dot{width:8px;height:8px;border-radius:50%;background:var(--sc);flex:none;
align-self:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 20%,transparent)}
/* статус, час і пояснення — в один рядок; переносяться лише коли не влазять */
.cb-t{display:flex;align-items:baseline;gap:4px 9px;flex-wrap:wrap;min-width:0}
.cb-t b{font-size:13px;font-weight:700;color:var(--sc);white-space:nowrap}
.cb-t b i{font-style:normal;font-weight:500;color:var(--muted);margin-left:8px;
font-variant-numeric:tabular-nums}
.cb-t small{font-size:12px;color:var(--muted);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-t small::before{content:"·";margin-right:9px;color:var(--line-strong)}
@media (max-width:620px){
.cb-t small::before{display:none}
/* Телефон: статус окремим рядком, кнопки під ним. Довгий хвіст підпису
(«…на доопрацювання») ховаємо — кнопка займала майже всю ширину і
обрізала текст статусу до «суми заф…». */
.cbar{gap:9px}
.cb-l{flex:1 1 100%}
.cb-r{width:100%;justify-content:flex-start;flex-wrap:wrap}
.cb-b .lg{display:none}
.cb-b{height:32px;padding:0 12px;font-size:12px}
.cb-t small{white-space:normal;overflow:visible;text-overflow:clip}
}
/* Кнопки — ЗАВЖДИ в один рядок (nowrap). Легкі, без важких обведень. */
.cb-r{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;flex:none}
.cb-f{margin:0}
/* Однакова висота, однакові поля, тонкий кант — кнопки читаються як один
набір, а не як три різні елементи. Головна дія — суцільна, решта скляні. */
/* Кнопки: одна висота, одна форма, різниця тільки в тоні. Головна дія —
заповнена, решта — контурні. Ніяких кольорових плям: у смузі стану вони
мали б підказувати, а не кричати. */
.cb-b{font:inherit;font-size:12.5px;font-weight:650;line-height:1;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
height:34px;padding:0 14px;border-radius:9px;
border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
background:color-mix(in srgb,var(--panel) 62%,transparent);color:var(--ink-soft);
transition:background .14s,color .14s,border-color .14s}
.cb-b:hover{border-color:var(--accent);color:var(--accent-ink);
background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cb-b:active{transform:translateY(.5px)}
.cb-b.go{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.cb-b.go:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;
filter:brightness(1.14)}
.cb-b.back{background:transparent;color:var(--bad);
border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.cb-b.back:hover{background:color-mix(in srgb,var(--bad) 8%,transparent);color:var(--bad);
border-color:var(--bad)}
.cb-b .bi{opacity:.75}
.cb-b.go .bi{opacity:1}
.cb-b .bi{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* коментар CFO при поверненні — видно тому, хто заповнює, прямо над таблицею */
.cb-note{margin:0 -18px;padding:10px 18px;border-top:1px solid var(--line);
background:color-mix(in srgb,var(--warn) 10%,transparent);font-size:12.5px}
.cb-note b{display:inline-flex;align-items:center;gap:5px;color:var(--warn);font-size:11px;
font-weight:650;letter-spacing:.02em}
.cb-note b .bi{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.cb-note span{display:block;margin-top:3px;color:var(--ink)}
@media (max-width:760px){
/* смуга стану на телефоні: підпис угорі, кнопки — рядком під ним, але
САМЕ рядком: довгі хвости підписів ховаємо (.lg), а не переносимо.
Відступи БЕЗ від'ємного margin. Тут стояло «margin:0 -16px» — смуга
виступала на 16px за панель, а панель на цій ширині вже сама без
бокових полів (.pf-panel{padding-left:0} вище) і має overflow:clip.
Через це ліві 16px смуги просто зрізало: помаранчева крапка статусу
наполовину зникала за краєм, а «по підрозділах ↓» починалось від
нуля (власник, 12.09.2026: «помаранчева точка за межами екрану»). */
.cbar{gap:9px 10px;margin-left:0;margin-right:0;padding:10px 16px}
.cb-note{margin-left:0;margin-right:0;padding:10px 16px}
.cb-l{flex:1 0 100%}
/* Кілька кнопок ділять рядок порівну; одна — за своїм текстом, а не на всю
ширину (розтягнута самотня кнопка читалась як банер). */
.cb-r{width:100%;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.cb-f{display:flex}
.cb-b{padding:0 16px;font-size:12.5px;min-width:0}
.cb-b>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Коли кнопка ОДНА — тримаємо її в тій самій лінії, що й статус: смуга
лишається заввишки в один рядок і читається як одне ціле. Кілька кнопок
так не влазять — там переносимо, як і було. */
.cbar:has(.cb-r > .cb-f:only-child){flex-wrap:nowrap;gap:10px}
.cbar:has(.cb-r > .cb-f:only-child) .cb-l{flex:1 1 auto;min-width:0}
.cbar:has(.cb-r > .cb-f:only-child) .cb-r{width:auto;flex:none;justify-content:flex-end}
/* Центр із підрозділами (Маркетинг): кнопок тут немає взагалі — кожен
відділ подає свій бюджет сам, а праворуч стоїть лише вказівка «по
підрозділах ↓». Смуга все одно займала ТРИ рядки: статус, довге
пояснення й та вказівка окремо. На телефоні це пів екрана ні про що
(власник, 12.09.2026: «сильно по висоті розтягнуто, зроби в одну
лінію»). Тому тут — рівно один рядок: статус із датою ліворуч,
«по підрозділах ↓» праворуч. Довге пояснення ховаємо: скільки
підрозділів подано, тепер видно з пігулок біля кожного нижче. */
.cbar:has(.cb-r > .cb-split:only-child){flex-wrap:nowrap;gap:10px}
.cbar:has(.cb-r > .cb-split:only-child) .cb-l{flex:1 1 auto;min-width:0}
.cbar:has(.cb-r > .cb-split:only-child) .cb-t{flex-wrap:nowrap}
.cbar:has(.cb-r > .cb-split:only-child) .cb-t small{display:none}
.cbar:has(.cb-r > .cb-split:only-child) .cb-r{width:auto;flex:none;justify-content:flex-end}
}
/* На телефоні кнопки ділять рядок порівну — інакше третя зривається вниз
і смуга росте ще на один ярус. */
@media (max-width:560px){
.cb-f{flex:1}
.cb-f:only-child{flex:0 0 auto}
.cb-b{flex:1;padding:0 10px}
}
/* Довгі хвости підписів («, подати», « на доопрацювання») ховаємо тільки
тоді, коли в рядку кнопок кілька і місця справді нема. */
@media (max-width:520px){
.cb-r:has(.cb-f + .cb-f) .cb-b .lg{display:none}
}
/* Місяць у шапці колонки «Тип розп.» — нагадування, що розподіл тепер
помісячний: правка тут не чіпає інші місяці. */
.grow.head .ct .ct-m{font-style:normal;margin-left:4px;padding:1px 4px;border-radius:5px;
background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-ink);
font-size:9px;letter-spacing:0}
/* «Тип розп.» разом із бейджем місяця не влазив у 76px і обрізався
(«ТИП РОЗП…»). Ставимо бейдж наступним рядком — підпис читається цілком. */
.grow.head>.ct{white-space:normal;line-height:1.15;overflow:visible}
.grow.head .ct .ct-m{display:block;margin:1px auto 0;width:max-content}
/* рядок «перенести статтю в інший центр» — під рядком додавання */
.addrow.moverow{background:transparent;border-top:1px dashed var(--line);gap:7px}
.moverow .mv-l{font-size:12px;color:var(--muted);white-space:nowrap}
.moverow select[name="article_id"]{flex:2 1 200px}
.addrow .add.ghost{background:transparent;color:var(--accent-ink);
border:1px solid var(--line-strong)}
.addrow .add.ghost:hover{border-color:var(--accent);filter:none;
background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* кнопки «приховати» і «зберегти» тепер з іконками, а не емодзі */
.grow .cact .del .bi,.grow .cact .save .bi{width:15px;height:15px;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
@media (max-width:760px){
.moverow .mv-l{display:none}
.moverow select{flex:1 1 46%}
}
/* «Статті поза таблицею» — один блок у самому кінці, під останнім центром.
Усередині два списки: ПРИХОВАНІ (живі, просто не в цьому місяці — без
викреслення) і ВИКРЕСЛЕНІ (видалені з довідника — там викреслення доречне).
Біля кожної статті стоїть її центр витрат. */
.off-box{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
/* Закритий блок — один рядок. Розкривається, лише коли треба щось повернути. */
.off-h{display:flex;align-items:baseline;gap:10px;padding:10px 16px;cursor:pointer;
font-family:var(--font-display);font-size:13px;font-weight:600;
color:var(--ink-soft);list-style:none;user-select:none}
.off-h::-webkit-details-marker{display:none}
.off-h::before{content:"▸";font-size:10px;color:var(--muted);
transition:transform .12s ease;display:inline-block}
.off-box[open] > .off-h{border-bottom:1px solid var(--line);color:var(--ink)}
.off-box[open] > .off-h::before{transform:rotate(90deg)}
.off-h:hover{background:var(--accent-soft)}
.off-h span{font-size:11.5px;font-weight:400;color:var(--muted)}
.off-box .hid-box{border-top:1px solid var(--line);background:none}
.off-box .hid-box:first-of-type{border-top:none}
/* Списки всередині не мають рости без кінця: 10+ статей — і блок знову
на пів екрана. Даємо їм власну прокрутку. */
.off-box .hid-list{max-height:44vh;overflow-y:auto}
.gone-box{background:color-mix(in srgb,var(--muted) 6%,transparent)}
.gone-box .hid-n s{color:var(--ink-soft);text-decoration-color:var(--muted)}
/* назва + центр витрат під нею */
.hid-n{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--ink-soft);
min-width:0}
.hid-n em{font-style:normal;font-size:11px;color:var(--muted)}
.hid-lock{font-size:11px;color:var(--muted);white-space:nowrap}
.hid-note{font-size:11.5px;color:var(--ink-soft);margin-top:7px;line-height:1.45}
/* Рядок списку: назва — пунктир — кнопка. Кнопка стояла аж біля правого
краю широкого екрана, і око губило, яку саме статтю повертає. Тепер
рядок має свою лінію, підсвічується при наведенні, а пунктир веде
погляд від назви прямо до кнопки. */
.hid-list{gap:0}
.hid-list form{display:flex;align-items:center;gap:10px;padding:7px 10px;
border-radius:9px;border-bottom:1px solid var(--line)}
.hid-list form:last-child{border-bottom:none}
.hid-list form:hover{background:var(--accent-soft);border-bottom-color:transparent}
.hid-list form:hover .dots{border-bottom-color:var(--accent)}
.hid-list form:hover .mini{border-color:var(--accent);color:var(--accent-ink)}
.hid-n{flex:0 1 auto}
.dots{flex:1 1 auto;min-width:24px;align-self:flex-end;margin-bottom:6px;
border-bottom:1px dotted var(--line-strong)}
.hid-list .mini{flex:none}
/* «Стерти назовсім» — єдина незворотна дія над статтею, тому червона
і лише у власника. Стоїть у тій самій формі, просто з іншим formaction. */
.mini.kill{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent);
background:transparent}
.mini.kill:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.hid-list form:hover .mini.kill{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
@media (max-width:620px){
.hid-list form{flex-wrap:wrap;gap:6px}
.dots{display:none}
.hid-list .mini{width:100%}
}
@media (max-width:620px){.off-box{margin-left:-16px;margin-right:-16px;border-radius:0}}
/* ══ Ключі інтеграцій (лише власник) ═══════════════════════════════════════
Значення ключа сюди НІКОЛИ не приходить із сервера — поле завжди порожнє,
видно лише «заведено / не заведено». */
.keys{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.key-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;
background:var(--panel);box-shadow:var(--shadow)}
.key-card.on{border-left:3px solid var(--good)}
.key-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.key-t{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.key-b{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.key-b.ok{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.key-b.off{color:var(--muted);background:color-mix(in srgb,var(--muted) 12%,transparent)}
.key-n{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:6px 0 8px}
.key-var{font-size:11px;color:var(--muted);background:var(--panel-2);
padding:2px 7px;border-radius:6px}
.key-f{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.key-f input{flex:1 1 260px;min-width:0;font:inherit;font-size:13px;padding:9px 12px;
border:1px solid var(--line-strong);border-radius:10px;background:var(--panel-2);
color:var(--ink)}
.key-f input:focus{outline:none;border-color:var(--accent)}
.key-chk{margin-top:8px}
/* ── Довгий коментар видно повністю ──────────────────────────────────────
Колонка вузька, і текст обрізався трьома крапками. При кліку (у режимі
заповнення — при фокусі) поле розгортається поверх сусідніх колонок:
читати можна все, а ширина таблиці не змінюється. */
.grow > .c-comm:focus{
position:relative;z-index:30;width:calc(100% + 300px);
background:var(--panel);border-color:var(--accent);
box-shadow:0 8px 24px rgba(15,63,102,.18);white-space:normal}
.grow > .c-comm.ro{cursor:pointer}
.grow > .c-comm.ro.open{
position:relative;z-index:30;width:calc(100% + 300px);
white-space:normal;overflow:visible;background:var(--panel);
border-radius:8px;padding:6px 9px;margin:-6px -9px;
box-shadow:0 8px 24px rgba(15,63,102,.18)}
@media (max-width:760px){
/* на телефоні колонки коментаря нема взагалі — розгортати нічого */
.grow > .c-comm:focus,.grow > .c-comm.ro.open{width:100%;box-shadow:none}
}
/* ── Смуга стану ПІДРОЗДІЛУ (Маркетинг: Ретеншн / Перформ / Бренд) ────────
Кожен відділ подає бюджет сам: одна кнопка на весь центр змушувала
швидких чекати на найповільнішого й не показувала, хто вже впорався.
Смуга йде одразу під рядком підстатті й повторює її колір статусу. */
.gbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:7px 14px 7px 18px;border-left:3px solid var(--sc);
background:color-mix(in srgb,var(--sc) 5%,transparent);
border-bottom:1px solid var(--line)}
.gb-l{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:12px}
.gb-dot{width:7px;height:7px;border-radius:50%;background:var(--sc);flex:none}
.gb-l b{color:var(--sc);font-size:12px}
.gb-l i{font-style:normal;color:var(--muted);font-size:11px}
.gb-r{display:flex;align-items:center;gap:8px;flex:none}
.gb-r .cb-b{font-size:12px;padding:5px 11px}
.gb-note{margin:0;padding:8px 14px 8px 18px;border-left:3px solid var(--warn)}
/* у шапці центру замість кнопок — підказка, що вони нижче */
.cb-split{font-size:11.5px;color:var(--muted);white-space:nowrap}
/* рядок підстатті фарбуємо в колір її стану — видно, не читаючи підписів */
.grow.gsub.st-s{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink)}
.grow.gsub.st-a{background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--ink)}
@media (max-width:620px){
.gbar{padding:8px 12px 8px 14px}
.gb-r{width:100%}
.gb-r .cb-b{flex:1;justify-content:center}
/* Те саме, що й у смузі центру: одна кнопка стоїть поруч зі статусом,
а не окремим ярусом під ним. Назва й дата за потреби переносяться
всередині свого блоку — кнопка лишається праворуч. */
.gbar:has(.gb-r > .cb-f:only-child){flex-wrap:nowrap;gap:10px}
.gbar:has(.gb-r > .cb-f:only-child) .gb-l{flex:1 1 auto;flex-wrap:wrap;row-gap:0}
.gbar:has(.gb-r > .cb-f:only-child) .gb-r{width:auto;flex:none}
.gbar:has(.gb-r > .cb-f:only-child) .cb-b{flex:none;padding:6px 12px}
}
/* ══ Маркетинг: бюджет, план продажів, щоденна аналітика ═════════════════
«Лід» тут = продаж, тому головні колонки — ціна продажу й окупність,
а не кліки: клік нічого не каже про гроші. */
.mk-tbl{border:1px solid var(--line);border-radius:14px;overflow:hidden;
background:var(--panel);box-shadow:var(--shadow);margin-top:12px}
.mk-row{display:grid;grid-template-columns:minmax(120px,1.4fr) repeat(8,minmax(0,1fr));
gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);
font-size:12.5px}
.mk-row:last-child{border-bottom:none}
.mk-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-row.mk-head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);font-weight:700}
.mk-row.mk-foot{background:var(--panel-2);font-weight:700;border-top:1px solid var(--line-strong)}
.mk-n{font-weight:600;color:var(--ink)}
.mk-ch{font-family:var(--font-mono);font-size:11px;color:var(--accent-ink)}
.mk-row .over{color:var(--bad)}
.mk-row .good{color:var(--good);font-weight:700}
.mk-row .bad{color:var(--bad);font-weight:700}
/* рядок вводу плану — під рядком свого відділу{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
padding:8px 14px 10px 26px;border-bottom:1px solid var(--line);
background:color-mix(in srgb,var(--accent) 4%,transparent);font-size:12px}
/* щоденна таблиця — колонок менше */
.mk-d .mk-row{grid-template-columns:110px 90px repeat(5,minmax(0,1fr))}
.mk-empty{margin-top:12px;padding:16px;border:1px dashed var(--line-strong);border-radius:14px;
background:var(--panel);display:flex;flex-direction:column;gap:6px;font-size:12.5px;
color:var(--ink-soft);line-height:1.5}
.mk-empty b{color:var(--ink);font-size:13.5px}
@media (max-width:900px){
.mk-tbl{overflow-x:auto}
.mk-row{grid-template-columns:minmax(110px,1fr) repeat(8,88px);min-width:800px}
.mk-d .mk-row{grid-template-columns:100px 80px repeat(5,88px);min-width:640px}
}
/* блок «звідки приходять замовлення»: 7 колонок замість 9 */
.mk-p .mk-row{grid-template-columns:minmax(120px,1.3fr) repeat(6,minmax(0,1fr))}
.mk-row .pct{color:var(--accent-ink);font-weight:700}
.mk-act{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.mk-hint{font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
.mk-p .mk-row{grid-template-columns:minmax(110px,1fr) repeat(6,92px);min-width:700px}
}
/* ══ Місячний звіт маркетингу по країнах ═════════════════════════════════
Порядок на екрані повторює порядок питань власника: спершу висновок
словами, потім шість головних цифр, потім таблиці, з яких усе взялось.
Тому висновки — вгорі й великим, а воронка кабінетів — аж унизу. */
.rep-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}
.rep-c,.rep-m{display:inline-block;padding:5px 11px;border:1px solid var(--line-strong);
border-radius:999px;font-size:12px;color:var(--ink-soft);text-decoration:none;
background:var(--panel)}
.rep-m{font-family:var(--font-mono);font-size:11px;padding:4px 9px}
.rep-c:hover,.rep-m:hover{border-color:var(--accent)}
.rep-c.on,.rep-m.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.rep-sp{flex:1 1 12px}
.rep-l{font-size:11.5px;color:var(--muted)}
.rep-h{margin:20px 0 0;font-size:13px;font-weight:700;color:var(--ink)}
/* Висновки: колір ліворуч замість іконки — читається з відстані й не
заважає, коли пунктів шість. */
.rep-notes{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.rep-note{padding:9px 13px;border-left:3px solid var(--muted);border-radius:0 10px 10px 0;
background:var(--panel);font-size:12.5px;line-height:1.5;color:var(--ink-soft);
box-shadow:var(--shadow)}
.rep-note.n-bad{border-left-color:var(--bad)}
.rep-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
margin-top:12px}
/* «Вчора» — та сама сітка, але з акцентною лівою кромкою, щоб зріз дня
не зливався з місячним рядом нижче */
.rep-y .rk{border-left:3px solid var(--accent)}
.rk{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;min-width:0}
.rk-l{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
font-weight:700}
.rk-v{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-s{font-size:11px;color:var(--muted)}
.rk-s .good{color:var(--good)}
.rk-s .bad{color:var(--bad)}
.rep-ch .mk-row{grid-template-columns:minmax(130px,1.3fr) repeat(9,minmax(0,1fr)) minmax(104px,.9fr)}
.rep-p .mk-row{grid-template-columns:minmax(120px,1.3fr) repeat(6,minmax(0,1fr))}
/* перевірка звіту: показник | звіт | джерело | назва | Δ | примітка */
.rep-vf .mk-row{grid-template-columns:minmax(140px,1.2fr) minmax(0,1fr) minmax(0,1fr)
minmax(120px,1.1fr) minmax(0,.7fr) minmax(160px,1.6fr)}
.rep-src{font-size:11px;color:var(--muted);line-height:1.35}
.vf-ok{color:var(--good);font-weight:700}
.vf-warn{color:var(--warn);font-weight:700}
.vf-alert{color:var(--bad);font-weight:700}
.vf-info,.vf-none{color:var(--muted)}
/* бюджет медіа на головній вкладці — той самий вигляд, що «Бюджет КК»:
details.center + grid. Інпути — БЕЗ власних рамок і білих підкладок:
успадковують пласкі .inl з таблиці КК (рамка лише на ховер/фокус). */
/* 9 колонок «під лінійку»: гроші/ліди — однакова ширина, вартість ліда
(де вміщується «лок / $») трохи ширша. Назви каналів — БЕЗ білої
підкладки і без прилипання: пласкі, як звичайний текст рядка. */
.grid.mgrid .grow{grid-template-columns:minmax(118px,1.2fr)
repeat(2,minmax(0,1fr)) minmax(0,1.35fr)
repeat(2,minmax(0,1fr)) minmax(0,1.35fr)
repeat(2,minmax(0,1fr)) minmax(0,1.35fr)}
.grid.mgrid .grow .c-name{position:static;background:transparent}
.grid.mgrid .grow.head .c-name,.grid.mgrid .grow.foot .c-name{background:transparent}
/* у КК шапка липка, бо таблиця одна й довга; тут сім коротких таблиць — липка
шапка при прокрутці пливла по рядках і лишала по собі порожню смугу */
.grid.mgrid .grow.head{position:static}
/* і рядки не мусять успадковувати ширину великої КК-таблиці */
.grid.mgrid .grow{min-width:0}
.grid.mgrid .grow input.inl{background:transparent}
/* Safari домальовує в полях кнопки автозаповнення (контакти/паролі) —
ховаємо їхні псевдоелементи, це офіційний перемикач */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button{visibility:hidden;display:none !important;
pointer-events:none;position:absolute;right:0}
.grid.mgrid .usd{font-style:normal;color:var(--muted);font-size:11px}
/* смуги виконання в заголовку міста: видно стан, не розгортаючи блок.
Класи з префіксом mk-: назва .cbar уже зайнята смугою стану центру
на Дашборді (_pf_body.html), і збіг стискав ту смугу до 110px. */
.mk-cbars{display:flex;gap:14px;align-items:center;margin-left:6px}
.mk-cbar{display:flex;flex-direction:column;gap:2px;width:110px}
.mk-cbar em{font-style:normal;font-size:10px;color:var(--muted);font-weight:700;
letter-spacing:.02em;white-space:nowrap}
.mk-cbar .bar{margin:0}
@media (max-width:700px){
.center>summary{flex-wrap:wrap}
.mk-cbars{width:100%;margin-left:24px}
.mk-cbar{flex:1 1 40%}
}
/* ── одна розкривашка бюджету медіа: міста — секції всередині ─────────── */
.mb-city{border-top:1px solid var(--line)}
.mb-city .chead{cursor:default}
.mb-city .chead .cname{font-size:14px}
.mb-all>summary .csum{white-space:normal}
.mbc-tot.mb-in{margin:0;border:0;border-top:1px solid var(--line-strong);border-radius:0}
.mbc-tot{margin:2px 0 14px;padding:9px 16px;border:1px solid var(--line-strong);
border-radius:12px;background:var(--panel-2);font-size:12.5px;color:var(--ink-soft)}
.mbc-tot b{color:var(--ink)}
.grid.mgrid{overflow-x:auto}
@media (max-width:1280px){
.grid.mgrid .grow{grid-template-columns:minmax(104px,1fr)
repeat(2,88px) 118px repeat(2,88px) 118px repeat(2,88px) 118px;min-width:1000px}
}
/* дашборд СМО: прибуткова плитка більша, спарклайни трендів */
.rk-hero{grid-column:span 2;border-left:3px solid var(--accent)}
.rk-hero .rk-v{font-size:22px}
.rk .rk-v.good{color:var(--good)}
.rk .rk-v.bad{color:var(--bad)}
.cmo-sparks{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:10px;
padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
box-shadow:var(--shadow)}
.cmo-sp{display:flex;align-items:center;gap:8px}
.cmo-sp-l{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.cmo-sp-l .good{color:var(--good)} .cmo-sp-l .bad{color:var(--bad)}
.cmo-sp svg{width:120px;height:26px;color:var(--accent)}
.cmo-sp-v{font-size:12.5px;font-weight:700;color:var(--ink)}
.cmo-margin label{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);
font-weight:700}
.cmo-margin input{width:64px;text-align:right;border:1px solid var(--line-strong);
border-radius:8px;background:var(--panel);padding:5px 8px;font:inherit;font-size:12.5px;
color:var(--ink)}
@media (max-width:700px){.rk-hero{grid-column:span 1}}
/* розклад частоти: 9 колонок, поточний місяць підсвічено */
.mkfreq .mk-row{grid-template-columns:minmax(84px,1fr) repeat(8,minmax(0,1fr))}
.mkfreq .mk-row.on{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:600}
@media (max-width:900px){
.mkfreq .mk-row{grid-template-columns:minmax(78px,1fr) repeat(8,86px);min-width:760px}
}
/* бюджет медіа: стан затвердження (чернетка → подано → затверджено) */
.mbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
padding:10px 14px;border:1px solid var(--line);border-left-width:4px;
border-radius:12px;background:var(--panel);box-shadow:var(--shadow);font-size:12.5px}
.mbs-draft{border-left-color:var(--muted)}
.mbs-sent{border-left-color:var(--warn)}
.mbs-done{border-left-color:var(--good)}
.mbs-t{font-weight:700;color:var(--ink)}
.mbs-sent .mbs-t{color:var(--warn)}
.mbs-done .mbs-t{color:var(--good)}
.mbs-d{color:var(--muted)}
.mbs-f{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.mbs-f .inl{font:inherit;font-size:12px;padding:5px 9px;border:1px solid var(--line-strong);
border-radius:8px;background:var(--panel);color:var(--ink);min-width:180px}
/* бюджет медіа: матриці «місто × канал» (план/факт бюджету і лідів) */
.mbx .mk-row{grid-template-columns:minmax(110px,1fr) repeat(3,minmax(0,1.4fr)) minmax(0,1.1fr)}
/* поля вводу пласкі, як у таблиці КК: рамка з'являється лише на ховер/фокус */
.mbx-in{width:100%;max-width:130px;font:inherit;font-size:12.5px;padding:5px 8px;
text-align:right;border:1px solid transparent;border-radius:8px;
background:transparent;color:var(--ink)}
.mbx-in:hover{border-color:var(--line)}
.mbx-in:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.mbx-tot{font-weight:700}
.mbx-pct{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.mbx-pct.good{color:var(--good)}
.mbx-pct.bad{color:var(--bad)}
.mbx-note{color:var(--accent-ink);cursor:help;font-style:normal}
.mini.save{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.mbx-loc .mk-row{grid-template-columns:minmax(160px,1.6fr) repeat(3,minmax(0,1fr)) minmax(0,1fr)}
@media (max-width:900px){
.mbx .mk-row{grid-template-columns:minmax(96px,1fr) repeat(3,120px) 100px;min-width:560px}
.mbx-loc .mk-row{grid-template-columns:minmax(150px,1fr) repeat(3,100px) 100px;min-width:560px}
}
/* бюджет медіа: 12 колонок, рядки клікабельні для редагування */
.mkb .mk-row{grid-template-columns:minmax(110px,1.2fr) repeat(11,minmax(0,1fr))}
.mkb-city{margin-top:14px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
color:var(--accent-ink);font-weight:700}
.mini.danger{color:var(--bad);border-color:var(--bad)}
@media (max-width:900px){
.mkb .mk-row{grid-template-columns:minmax(100px,1fr) repeat(11,84px);min-width:1030px}
}
/* план на місяць: 6 колонок */
.rep-pl .mk-row{grid-template-columns:minmax(150px,1.4fr) repeat(5,minmax(0,1fr))}
.rep-det{margin-top:8px}
.rep-det summary{cursor:pointer;font-size:12px;color:var(--accent-ink);font-weight:600;
padding:4px 2px}
.rep-s .mk-row.on{background:color-mix(in srgb,var(--accent) 7%,transparent);font-weight:600}
/* «бренд / не бренд» — це розклад Google Ads усередині, а не окремі канали:
зсуваємо й гасимо, щоб їх не читали як рядки підсумку */
.rep-ch .rep-part .mk-n{padding-left:14px;font-weight:400;color:var(--muted)}
.rep-v{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
.rep-ch .mk-row{grid-template-columns:minmax(120px,1fr) repeat(9,84px) 104px;min-width:1060px}
.rep-p .mk-row{grid-template-columns:minmax(110px,1fr) repeat(6,92px);min-width:700px}
.rep-vf .mk-row{grid-template-columns:minmax(130px,1fr) 96px 96px 120px 76px 170px;min-width:700px}
.rep-pl .mk-row{grid-template-columns:minmax(140px,1fr) repeat(5,92px);min-width:640px}
.rk-v{font-size:16px}
}
/* ── Креативи: що вимкнути, що масштабувати ──────────────────────────────
Колір несе весь сенс: червоне — гроші горять просто зараз, зелене —
можна додавати бюджет. Тому групи, а не одна довга таблиця з сортуванням. */
.cre-grp{margin-top:12px;border:1px solid var(--line);border-radius:14px;
overflow:hidden;background:var(--panel);border-left:4px solid var(--vc)}
.cre-grp.v-off{--vc:var(--bad)}
.cre-grp.v-scale{--vc:var(--good)}
.cre-grp.v-watch{--vc:var(--warn)}
.cre-grp.v-new{--vc:var(--muted)}
.cre-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 14px;
background:color-mix(in srgb,var(--vc) 8%,transparent)}
.cre-b{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--vc)}
.cre-n{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cre-hint{font-size:11.5px;color:var(--muted);margin-left:auto}
.cre-row{display:grid;grid-template-columns:38px minmax(150px,2fr) repeat(6,minmax(0,1fr));
gap:10px;align-items:center;padding:7px 14px;border-top:1px solid var(--line);
font-size:12.5px}
.cre-row.cre-hd{border-top:0;padding-top:9px;padding-bottom:2px;font-size:10px;
text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
/* видима межа між групами колонок «Вчора» і «Місяць» */
.cre-row .gsep{border-left:1px solid var(--line-strong);padding-left:12px}
/* мініатюра креативу: маленька в рядку, клік — на весь екран */
.cre-th{width:38px;height:38px;border-radius:8px;object-fit:cover;cursor:zoom-in;
border:1px solid var(--line);background:#fff;image-rendering:auto}
.cre-th-none{display:inline-block;cursor:default;background:var(--bg)}
.creo-lb{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
background:rgba(10,20,30,.82);z-index:90;cursor:zoom-out;padding:24px}
.creo-lb.on{display:flex}
.creo-lb img{max-width:min(760px,94vw);max-height:86vh;border-radius:14px;
image-rendering:auto;box-shadow:0 18px 60px rgba(0,0,0,.5);background:#fff}
.cre-row .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cre-nm{display:flex;flex-direction:column;gap:1px;min-width:0;color:var(--ink)}
.cre-nm em{font-style:normal;font-size:11px;color:var(--muted)}
.cre-cpa{font-weight:700;color:var(--vc)}
@media (max-width:760px){
.cre-row{grid-template-columns:30px minmax(0,1.6fr) repeat(6,minmax(0,1fr));gap:6px;
padding:7px 12px;font-size:12px}
.cre-th{width:30px;height:30px;border-radius:6px}
.cre-hint{margin-left:0;flex-basis:100%}
}
/* ── Комісії: рівна таблиця — без курсиву, числа під лінійку ─────────────
«проведено/ок/в дорозі» були курсивом упритул до числа — рядки пливли.
Тепер: число зверху (табличні цифри, правий край), підпис під ним дрібним
прямим шрифтом. Імена — в один рядок з трикрапкою, щоб рядки були рівні. */
.cmrep em{font-style:normal}
.cmr-tbl{font-variant-numeric:tabular-nums}
.cmr-row{align-items:start;padding-top:8px;padding-bottom:8px}
.cmr-row .num{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.cmr-row .num .tabnum{line-height:1.25;font-weight:600}
.cmr-row .num > .mut{line-height:1.25}
.cmr-row .st{font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1.2;
text-align:right;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cmr-row.cmr-head .num{display:block;text-align:right}
.cmr-sub .fop-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.35;padding-top:1px;min-width:0}
.cmr-city em{font-style:normal;font-size:10px;color:var(--muted);margin-left:8px;
font-weight:600;letter-spacing:.02em}
.cmr-city .num{flex-direction:column}
.agg-cell{line-height:1.3}
.agg-cell .st{display:inline;margin-left:4px}
.cmr-w .cmr-row{gap:14px}
@media (max-width:760px){
.cmr-w .cmr-row{gap:8px}
.cmr-row .st{font-size:9px}
}
/* ── Комісії: все по лівому краю, порядок Комісія·%·Болт·Глово·Надходження·Залишок ── */
.cmr-tbl .cmr-row .num{align-items:flex-start;text-align:left}
.cmr-tbl .cmr-row .num .st{text-align:left}
.cmr-tbl .cmr-row.cmr-head .num{text-align:left}
.cmr-w .cmr-row{grid-template-columns:minmax(0,1.3fr) 105px 58px 140px 140px 148px 162px 96px}
/* імена ФОПів — один тон для всіх; блідість лишається тільки в клітинках без даних */
.cmr-sub .fop-n,.cmr-row.cmr-sub.ready .fop-n{color:var(--ink)}
.agg-comm{display:block;font-size:10px;font-weight:500;color:var(--muted)}
/* примітка під іменем ФОПа: «переїхав з Харкова 01.09», «+ вендінг».
Рядків таких одиниці, тому окремим тонким рядком під ім'ям — у самому
імені вона б з'їла місце в усіх і обрізалась першою. У «складі міста»
(дошка готовності) місця більше, там лишаємо в тому ж рядку. */
.fop-note{display:block;font-size:10px;font-weight:600;color:var(--muted);
letter-spacing:.02em;line-height:1.2;margin-top:1px}
.cmb-list .fop-note{display:inline;margin-left:4px;font-weight:500}
/* заголовки таблиці: дозволяємо перенос на два рядки, ніщо не налазить */
.cmr-row.cmr-head span{white-space:normal;line-height:1.25;overflow:hidden}
.cmr-row .num{overflow:hidden;min-width:0}
/* журнал входів у «Користувачах» */
.lg-row{display:grid;grid-template-columns:150px minmax(0,1fr) 130px minmax(0,1.6fr) 130px;
gap:10px;padding:7px 14px;font-size:12.5px;align-items:baseline;
border-bottom:1px solid var(--line);min-width:640px}
.lg-row:last-child{border-bottom:none}
.lg-head{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.05em;color:var(--muted);font-weight:800}
.lg-row.bad{color:var(--bad)}
.lg-ua{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11.5px}
/* ── Комісії на телефоні: повна таблиця як на компі, прокрутка ВСЕРЕДИНІ картки ── */
.cmr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.cmr-scroll .cmr-tbl{min-width:1100px}
@media (max-width:1100px){
/* повні імена й усі колонки лишаються; ховати нічого не треба */
.cmr-w .h-full,.cmr-w .n-full{display:inline}
.cmr-w .h-short,.cmr-w .n-short{display:none}
}
.bal-zero{color:var(--good)}
.bal-diff{color:var(--warn)}
/* залишок: цифра у фіксованій ширині — підписи «банк/Syrve» стають у рівну колонку */
.bal-cell .tabnum{display:inline-block;min-width:98px}
.bal-cell .st{display:inline;margin-left:6px}
/* ── Прев'ю рознесення по концепціях (alloc.html) ────────────────────────
Показує, що лягло б у Syrve. Нічого не проводить — кнопка вимкнена. */
.al-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:12px}
.al-h b{font-size:17px}
.al-h span{color:var(--muted);font-size:12.5px;margin-left:10px}
.al-pick select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);
border-radius:9px;background:var(--panel);color:var(--ink)}
.al-err{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);
border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13px}
.al-warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:10px;
padding:11px 14px;margin-bottom:12px;font-size:13px;color:var(--ink)}
.al-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.al-sum>div{flex:1 1 200px;background:var(--panel);border:1px solid var(--line);
border-radius:12px;padding:12px 15px;display:flex;flex-direction:column;gap:3px}
.al-sum span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.al-sum b{font-size:19px}
.al-sum .hi{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.al-c{font-size:14px;margin:18px 0 7px}
.al-tbl{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.al-row{display:grid;grid-template-columns:34px minmax(170px,1.5fr) 108px 120px 110px 104px 116px minmax(230px,1.6fr);
gap:8px;align-items:center;padding:7px 13px;border-top:1px solid var(--line);font-size:12.5px}
.al-row:first-child{border-top:none}
.al-head{background:color-mix(in srgb,var(--accent) 5%,transparent);font-size:10.5px;
letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.al-row .num{text-align:right}
.al-zero{opacity:.5}
.al-notype{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.al-nt{font-style:normal;font-size:10px;color:var(--warn);font-weight:700}
.al-st{color:var(--muted);font-size:11.5px}
.al-have{color:var(--muted)}
.al-delta.good{color:var(--good)}
.al-delta.bad{color:var(--bad)}
.al-cm code{font-size:11px;background:color-mix(in srgb,var(--ink) 5%,transparent);
border-radius:6px;padding:2px 6px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;display:block}
.al-chk input{accent-color:var(--accent-ink)}
.al-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.al-foot span{color:var(--muted);font-size:12px;flex:1 1 260px}
.al-foot button:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:900px){
.al-tbl{overflow-x:auto}
.al-row{min-width:900px}
}
.al-sum em{font-style:normal;font-size:11px;color:var(--muted)}
.al-c small{font-weight:400;color:var(--muted);font-size:11.5px}
.al-mv{font-style:normal;font-size:10px;color:var(--accent-ink);font-weight:700}
/* Локальна валюта в колонці «До оплати»: окремим рядком ПІД гривнею, дрібно й
приглушено — як у картках країн. Правило довго стояло на .cdev, тоді як
колонку перейменували на .cdue, і злоті/ларі малювались у рядок тим самим
великим червоним кеглем. Порожній .ph сюди не приходить (nat() дає його лише
для України, а там валюти немає), але про всяк випадок ховаємо. */
.drow .cdue .dnat,.drow .cdev .dnat{display:block;color:var(--muted);font-size:10px;
font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:1px}
.drow .dnat.ph{display:none}
/* ЗОБОВʼЯЗАННЯ = нарахування + борг/запас минулих місяців. Саме від цієї бази
рахуються «% зобовʼязань» і «До оплати», тож вона виділена, як і нарахування.
Другим рядком — «±сальдо» дрібним і приглушено: без нього рядок читався як
протиріччя (нарахували більше, внесли менше, а відсоток понад 100). Порожній
.ph тримає ту саму висоту, щоб рядки без сальдо не стрибали. */
.drow .oblig{color:var(--accent-ink);font-weight:700}
.drow .oblig .oblig-x{display:block;color:var(--muted);font-size:10px;
font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:1px}
.drow .oblig .oblig-x.ph{display:block;height:12px}
/* у шапці «Зобовʼязання» — довге слово, хай тулиться, а не ріже сусідів */
.drow.dhead .num{overflow:hidden;text-overflow:ellipsis}
/* Звіт після проведення рознесення: видно одразу, що саме пройшло. */
.al-res{border-radius:12px;padding:13px 16px;margin-bottom:14px;
border:1px solid var(--line);background:var(--panel)}
.al-res.ok{border-color:var(--good);
background:color-mix(in srgb,var(--good) 8%,transparent)}
.al-res.part{border-color:var(--warn);
background:color-mix(in srgb,var(--warn) 9%,transparent)}
.al-res-h{font-size:15px;font-weight:700;margin-bottom:7px}
.al-res-b{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.al-res-c b{font-weight:650}
.al-res-c em{font-style:normal;color:var(--bad);font-size:12px}
.al-res-e{margin:9px 0 0;padding-left:20px;font-size:12px;color:var(--bad)}
.al-res-e li{margin:2px 0}
.al-res-f{margin-top:8px;font-size:11.5px;color:var(--muted)}
/* Заміна при переплаті: нова проводка на повну суму + старі на видалення.
Syrve не робить сторно, тому вниз коригуємо тільки так. */
.al-old{padding:9px 12px 11px 46px;border-top:1px dashed var(--line);
background:color-mix(in srgb,var(--bad) 5%,transparent);font-size:12px}
.al-old-h{font-weight:700;color:var(--bad);margin-bottom:5px}
.al-old ul{margin:0;padding-left:18px}
.al-old li{margin:2px 0;font-variant-numeric:tabular-nums}
.al-old li code{font-size:11px;color:var(--muted)}
.al-act{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.al-act button{font:inherit;font-size:12px;font-weight:650;cursor:pointer;
border-radius:8px;padding:5px 11px;border:1px solid var(--line);background:var(--panel)}
.al-act .rep{border-color:var(--accent);color:var(--accent-ink)}
.al-act .ver{border-color:var(--good);color:var(--good)}
.al-act button:disabled{opacity:.45;cursor:not-allowed}
.al-act em{font-style:normal;color:var(--muted);font-size:11.5px}
.al-rep{border-radius:12px;padding:13px 16px;margin-bottom:14px;border:1px solid var(--line);
background:var(--panel)}
.al-rep.ok{border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 7%,transparent)}
.al-rep.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.al-rep.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,transparent)}
.al-rep-h{font-size:15px;font-weight:700;margin-bottom:6px}
.al-rep p{margin:5px 0;font-size:13px}
.al-rep ol{margin:6px 0 0;padding-left:20px;font-size:12.5px}
.al-rep li{margin:3px 0;font-variant-numeric:tabular-nums}
.al-rep li code{font-size:11px;color:var(--muted)}
.al-rep .path{font-size:11.5px;color:var(--muted);margin-top:7px}
/* перемикач місяця вгорі вкладки маркетингу */
.mk-months{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.mk-months a{font-size:12.5px;font-weight:600;padding:5px 13px;border:1px solid var(--line-strong);
border-radius:20px;color:var(--ink-soft);text-decoration:none;background:var(--panel)}
.mk-months a.on{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
/* примітка «звіт відстає від місяця сторінки» */
.rep-lag{margin:0 0 12px;padding:9px 14px;border:1px solid var(--line-strong);
border-left:4px solid var(--warn, #c9a227);border-radius:10px;
font-size:13px;color:var(--ink-soft);background:var(--panel)}
.rep-lag b{color:var(--ink)}
/* розбіжність у порівнянні каса/таблиця понад 5% — червоним */
.mkfreq .neg{color:#b3261e;font-weight:700}
/* ── Довідник одержувачів платежів ─────────────────────────────────────── */
.py-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:14px}
.py-mut{color:var(--muted);font-size:12.5px}
/* ── Розділ «Інше» в бічному меню ───────────────────────────────────────── */
.dw-more{margin-top:2px}
.dw-more>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
padding:11px 40px 11px 12px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink);
position:relative}
.dw-more>summary::-webkit-details-marker{display:none}
.dw-more>summary .ic{display:inline-flex;width:22px;justify-content:center;flex:none}
.dw-more>summary .ico{width:18px;height:18px;fill:currentColor;stroke:none}
.dw-more>summary:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);
color:var(--accent-ink)}
.dw-more .dw-chev{position:absolute;right:4px;top:0;bottom:0;width:30px;display:grid;
place-items:center;font-size:10px;color:var(--muted);transition:transform .18s}
.dw-more[open] .dw-chev{transform:rotate(90deg)}
.dw-more[open]>summary{color:var(--ink)}
.dw-more .dw-badge{margin-left:auto}
/* ── Рядок меню з кнопкою розкриття підвкладок ──────────────────────────── */
.dw-row{position:relative}
.dw-row>a{min-width:0}
/* стрілка лежить у правій колонці ПОВЕРХ рядка: так лічильник у рядку
стоїть на тій самій вертикалі, що й у пунктів без стрілки */
.dw-tog{position:absolute;right:4px;top:0;bottom:0;width:30px;
border:none;border-radius:10px;background:none;cursor:pointer;
display:grid;place-items:center;color:var(--muted)}
.dw-tog:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-ink)}
.dw-tog .dw-chev{font-size:10px;transition:transform .18s}
.dw-tog.on .dw-chev{transform:rotate(90deg)}
/* ── Підвкладки «Бюджету КК» у бічному меню ─────────────────────────────── */
/* [hidden] має бути сильнішим за display:grid — інакше атрибут не діє
і підменю лишається на екрані попри натиснуту стрілку */
.dw-sub[hidden]{display:none}
/* Лінію вкладеності малює ::before нижче — тут її НЕ дублюємо: раніше
стояли обидві, і поруч ішли дві риски різного кольору. */
.dw-sub{display:grid;gap:2px;margin:2px 0 var(--sp-2) 0;padding-left:14px}
.dw-sub>a{font-size:13px;padding-top:7px;padding-bottom:7px}
.dw-sub>a .ico{width:16px;height:16px}
/* ── База знань по реквізитах ───────────────────────────────────────────── */
.py-search-bar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.py-q{flex:1 1 320px;font:inherit;font-size:13.5px;padding:10px 13px;border-radius:11px;
border:1px solid var(--glass-bord);background:color-mix(in srgb,var(--panel) 60%,transparent);
color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.py-q:focus{outline:none;border-color:var(--accent)}
.py-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.py-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
color:var(--ink-soft);border:1px solid var(--glass-bord);border-radius:9px;padding:7px 11px;
background:color-mix(in srgb,var(--panel) 45%,transparent);cursor:pointer}
.py-chip:has(input:checked){border-color:var(--accent);color:var(--accent-ink);
background:color-mix(in srgb,var(--accent) 10%,transparent)}
.py-found{font-size:12px;color:var(--muted)}
.py-tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.py-card.noname{border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
/* прив'язані статті — чипси, кожен знімається одним кліком */
.py-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.py-achip{font:inherit;font-size:12px;font-weight:650;cursor:pointer;display:inline-flex;
align-items:center;gap:6px;padding:5px 9px;border-radius:8px;color:var(--accent-ink);
border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
background:color-mix(in srgb,var(--accent) 9%,transparent)}
.py-achip i{font-style:normal;font-weight:500;color:var(--muted);font-size:11px}
.py-achip .x{color:var(--muted);font-size:11px}
.py-achip:hover{border-color:var(--bad);color:var(--bad)}
.py-achip:hover i,.py-achip:hover .x{color:var(--bad)}
/* поле «додати статтю» з випадним списком просто в картці */
.py-addart{position:relative;margin-top:8px;max-width:420px}
.py-aq{width:100%;font:inherit;font-size:12.5px;padding:7px 11px;border-radius:9px;
border:1px dashed var(--line-strong);background:transparent;color:var(--ink)}
.py-aq:focus{outline:none;border-style:solid;border-color:var(--accent)}
.py-amenu{display:none;position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
max-height:260px;overflow:auto;border-radius:11px;padding:5px;
background:color-mix(in srgb,var(--panel) 92%,transparent);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
border:1px solid var(--glass-bord);box-shadow:var(--glass-shadow)}
.py-amenu.on{display:block}
/* картка з відкритим списком — над сусідніми (скло робить свій контекст) */
.py-card.menu-on{position:relative;z-index:40}
.py-amenu button{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
font:inherit;font-size:12.5px;padding:7px 9px;border:none;border-radius:8px;
background:none;color:var(--ink);cursor:pointer}
.py-amenu button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.py-amenu button i{font-style:normal;color:var(--muted);font-size:11px}
.py-amenu button em{margin-left:auto;font-style:normal;color:var(--muted);font-size:10.5px}
.py-acts{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.py-exp{font-size:12.5px;font-weight:650;color:var(--accent-ink);text-decoration:none;
border:1px solid var(--glass-bord);border-radius:9px;padding:8px 13px;
background:color-mix(in srgb,var(--panel) 40%,transparent);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.py-exp:hover{border-color:var(--accent)}
/* Платіжні реквізити наявної картки без права: поле читається, але не
правиться — тому приглушений фон, а не сховане поле. */
.py-ro{background:var(--panel-2);color:var(--ink-soft);cursor:not-allowed}
.py-lock{display:block;font-style:normal;font-size:11.5px;line-height:1.35;
color:var(--warn);margin:-4px 0 8px}
.py-empty{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px;color:var(--muted);font-size:13px;line-height:1.5}
.py-empty em{display:block;margin-top:6px;font-style:normal;font-size:12px}
.py-list{display:grid;gap:10px}
.py-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.py-card.off{opacity:.55}
.py-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.py-h b{font-size:14.5px}
.py-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:7px;
background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent-ink)}
.py-tag.off{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.py-cnt{margin-left:auto;font-size:11.5px;color:var(--muted)}
.py-edit{font:inherit;font-size:12px;font-weight:650;cursor:pointer;padding:4px 10px;
border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.py-edit:hover{border-color:var(--accent)}
.py-body{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:8px;font-size:12.5px}
.py-body i{font-style:normal;color:var(--muted);font-size:10.5px;
text-transform:uppercase;letter-spacing:.04em;margin-right:5px}
.py-body code{font-size:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);
padding:1px 6px;border-radius:5px}
.py-purp{flex-basis:100%;color:var(--muted)}
.py-arts{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
font-size:12px;color:var(--muted)}
.py-arts i{font-style:normal;font-weight:650;color:var(--ink)}
.py-warn{font-style:normal;color:var(--warn)}
/* модальне вікно одержувача */
.py-modal{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);
padding:24px 16px;overflow:auto}
.py-modal.on{display:block}
.py-form{max-width:560px;margin:0 auto;background:var(--panel);border-radius:14px;
padding:18px 20px;display:grid;gap:11px}
.py-fh{display:flex;align-items:center;justify-content:space-between}
.py-fh b{font-size:16px}
.py-x{font:inherit;font-size:17px;cursor:pointer;border:none;background:none;color:var(--muted)}
.py-form label{display:grid;gap:4px;font-size:12.5px;font-weight:650}
.py-form em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.35}
.py-form input[type=text],.py-form input:not([type]),.py-form select,.py-form textarea{
font:inherit;font-size:13px;font-weight:400;padding:7px 10px;border:1px solid var(--line);
border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
.py-2col{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.req{color:var(--bad)}
.py-search{margin-top:2px}
.py-arts-box{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:9px;
padding:7px 9px;display:grid;gap:2px;background:var(--bg)}
/* Приховане має ховатись завжди. Нижче кілька правил зі display:…!important
(вони перебивають загальний label{display:block} у формах) — саме через них
пошук по статтях нічого не фільтрував: приховати елемент не виходило.
Селектори з [hidden] специфічніші за самі класи, тож виграють незалежно
від порядку правил у файлі. */
[hidden],
.py-chk[hidden],.py-inline[hidden],.pq-p[hidden],.pq-chk[hidden]{display:none!important}
.py-chk{display:flex!important;align-items:center;gap:7px;font-weight:400;font-size:12.5px;
padding:2px 0;cursor:pointer}
.py-chk i{font-style:normal;color:var(--muted);font-size:11px}
.py-inline{display:flex!important;align-items:center;gap:8px;font-weight:400}
.py-fa{display:flex;gap:10px;align-items:center;margin-top:4px}
.py-del{font:inherit;font-size:12.5px;cursor:pointer;margin-left:auto;border:none;
background:none;color:var(--bad);text-decoration:underline}
/* ── Заявки на оплату: кабінет казначея ───────────────────────────────── */
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin-bottom:14px}
.pr-sum{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:10px 16px;display:flex;align-items:baseline;gap:10px}
.pr-sum span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pr-sum b{font-size:20px}
.pr-sum em{font-style:normal;font-size:12px;color:var(--muted)}
.pr-link{font-size:13px;font-weight:650;color:var(--accent-ink);text-decoration:none}
.pr-link:hover{text-decoration:underline}
.pr-empty{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px;color:var(--muted);font-size:13px}
.pr-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:13px 15px;margin-bottom:11px}
.pr-card.urg{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 5%,transparent)}
.pr-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pr-fire{font-size:10.5px;font-weight:800;color:#fff;background:var(--bad);
padding:2px 8px;border-radius:7px}
.pr-amt{font-size:19px}
.pr-art{font-size:13px;font-weight:650}
.pr-who{margin-left:auto;font-size:11.5px;color:var(--muted);display:inline-flex;gap:5px;align-items:baseline;white-space:nowrap}
.pr-who b{font-weight:600;color:var(--fg)}
.pr-who i{font-style:normal;opacity:.75}
.pr-req{margin-top:9px;display:grid;gap:3px;padding:9px 11px;border-radius:9px;
background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pr-row{display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.pr-row i{font-style:normal;color:var(--muted);font-size:10.5px;text-transform:uppercase;
letter-spacing:.04em;min-width:118px;flex:none}
.pr-row em{font-style:normal;font-size:11px;color:var(--muted)}
.pr-row .cp{cursor:pointer;border-bottom:1px dotted var(--line)}
.pr-row .cp:hover{border-bottom-color:var(--accent)}
.pr-miss{color:var(--warn);font-size:11.5px} /* призначення не заповнили */
.pr-row .cp.copied{background:color-mix(in srgb,var(--good) 22%,transparent);border-radius:4px}
.pr-row .mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pr-row.raw span{white-space:pre-wrap;line-height:1.45}
.pr-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.pr-meta b{color:var(--ink);font-weight:650}
.pr-cm{margin-top:6px;font-size:12.5px;line-height:1.45}
.pr-act{display:flex;gap:9px;align-items:center;margin-top:11px;flex-wrap:wrap}
.pr-copy{font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:6px 12px;
border-radius:9px;border:1px solid var(--accent);background:transparent;color:var(--accent-ink)}
.pr-copy.done{border-color:var(--good);color:var(--good)}
.pr-edit{font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:6px 12px;
border-radius:9px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
background:color-mix(in srgb,var(--panel) 55%,transparent);color:var(--ink-soft)}
.pr-edit:hover{border-color:var(--accent);color:var(--accent-ink)}
.pr-cancel{font:inherit;font-size:12px;cursor:pointer;border:none;background:none;
color:var(--muted);text-decoration:underline;margin-left:auto}
.pr-del{font:inherit;font-size:12px;cursor:pointer;border:none;background:none;
color:var(--bad);text-decoration:underline}
.pr-hh{font-size:14px;margin:20px 0 8px}
.pr-hh small{font-weight:400;color:var(--muted);font-size:11.5px}
.pr-done{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pr-drow{display:grid;grid-template-columns:110px minmax(140px,1.2fr) minmax(120px,1fr) 150px 170px;
gap:10px;padding:7px 13px;border-top:1px solid var(--line);font-size:12px;align-items:center}
.pr-drow:first-child{border-top:none}
.pr-dart{font-weight:650}
.pr-dpayee,.pr-dwho{color:var(--muted)}
.pr-ok{color:var(--good);font-weight:650;font-size:11.5px}
.pr-wait{color:var(--warn);font-weight:650;font-size:11.5px}
.pr-unpayf{display:inline;margin-left:8px}
.pr-unpay{font:inherit;font-size:11px;cursor:pointer;border:none;background:none;
color:var(--muted);text-decoration:underline}
.pr-unpay:hover{color:var(--bad)}
/* Підпис проводки в оплаченій заявці — окремим рядком на всю ширину:
у сітці рядка вільної колонки немає, а обрізати коментар не можна —
його копіюють дослівно. */
.pr-dsvc{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:2px;padding-top:6px;border-top:1px dashed var(--line)}
.pr-dsvc>i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.pr-dsvc .cp{flex:1 1 200px;min-width:0;font-size:12px;font-weight:600;
word-break:break-word;cursor:pointer}
.pr-dsvc .svc-b{padding:3px 8px;font-size:11px}
@media(max-width:900px){
.pr-drow{grid-template-columns:1fr 1fr;gap:4px}
.pr-row i{min-width:96px}
}
/* ── Заявка на оплату: кнопка в рядку статті + вікно ──────────────────── */
.pq-btn{font:inherit;font-size:13px;line-height:1;cursor:pointer;border:none;
background:none;padding:2px 4px;border-radius:6px;opacity:.5}
.pq-btn:hover{opacity:1;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pq-modal{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);
padding:22px 14px;overflow:auto}
.pq-modal.on{display:block}
.pq-form{max-width:540px;margin:0 auto;background:var(--panel);border-radius:14px;
padding:17px 19px;display:grid;gap:11px}
.pq-fh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pq-fh b{font-size:16px}
.pq-fh > div > span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
/* назва статті + кнопка «скопіювати»: бухгалтер вставляє цю назву в коментар
проводки Syrve, тож копіюємо одним дотиком замість виділення пальцем */
.pq-fh .pq-artline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pq-fh .pq-artline #pq_art{display:inline;margin:0}
.pq-copy{display:inline-flex;align-items:center;gap:5px;flex:none;
font:inherit;font-size:11.5px;line-height:1;cursor:pointer;
padding:5px 9px 5px 7px;border-radius:8px;border:1px solid var(--line);
background:color-mix(in srgb,var(--panel) 55%,transparent);color:var(--muted);
transition:border-color .15s,color .15s,background .15s}
.pq-copy svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pq-copy i{font-style:normal}
.pq-copy:hover{border-color:var(--accent);color:var(--accent-ink)}
.pq-copy.ok{border-color:var(--good);color:var(--good);
background:color-mix(in srgb,var(--good) 10%,transparent)}
.pq-x{font:inherit;font-size:17px;cursor:pointer;border:none;background:none;color:var(--muted)}
.pq-nums{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;border-radius:9px;
background:color-mix(in srgb,var(--accent) 6%,transparent)}
.pq-nums span{flex:1 1 90px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted)}
.pq-nums b{display:block;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
/* «Уже подано по цій статті» — список заявок просто у вікні подання.
Досі там були самі підсумки, і відкликати заявку можна було лише з кабінету
казначея, куди той, хто подає, не заходить. */
.pq-have{display:grid;gap:5px;padding:8px 10px;border-radius:9px;
border:1px solid var(--line);background:var(--bg)}
.pq-have-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pq-have-r{display:flex;align-items:center;gap:9px;padding:5px 0;
border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.pq-have-r:first-of-type{border-top:none}
.pq-have-s{font-size:13px;font-weight:650;color:var(--ink);min-width:82px;
font-variant-numeric:tabular-nums}
.pq-have-m{flex:1;display:grid;line-height:1.35;min-width:0}
.pq-have-m b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pq-have-m i{font-style:normal;font-size:11px;color:var(--muted)}
.pq-have-x{font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
padding:4px 9px;border-radius:7px;border:1px solid var(--bad);background:none;color:var(--bad)}
.pq-have-x:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pq-have-x:disabled{opacity:.55;cursor:default}
.pq-have-lock{font-size:11.5px;color:var(--muted);padding:0 9px}
.pq-form label{display:grid;gap:4px;font-size:12.5px;font-weight:650}
.pq-form em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.4}
.pq-form input[type=text],.pq-form input:not([type]),.pq-form input[type=date],
.pq-form textarea,.pq-form select{font:inherit;font-size:13px;font-weight:400;padding:7px 10px;
border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
.pq-warn{color:var(--warn)!important;font-weight:650!important}
.pq-search{margin-bottom:2px}
.pq-payees{display:grid;gap:4px;max-height:190px;overflow:auto}
.pq-p{display:flex!important;align-items:flex-start;gap:8px;font-weight:400;
padding:6px 9px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.pq-p:has(input:checked){border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pq-p b{font-size:12.5px;font-weight:650}
.pq-p i{display:block;font-style:normal;font-size:11px;color:var(--muted);
font-variant-numeric:tabular-nums}
.pq-p em{display:inline-block;font-size:10.5px;color:var(--accent-ink);margin-top:1px}
.pq-none{font-size:12px;color:var(--muted);line-height:1.45}
/* Підтвердження вибору одержувача словами. Підсвітки рядка виявилось замало:
людина звикла, що обране «підтягується в поле», і без цього не розуміє,
чи система її вибір прийняла (Женя Попова 14.08.2026). */
.pq-chosen{margin-top:6px;padding:6px 10px;border-radius:9px;font-size:12px;
background:color-mix(in srgb,var(--good) 12%,transparent);
border:1px solid color-mix(in srgb,var(--good) 34%,transparent)}
.pq-chosen b{color:var(--good);font-weight:700;margin-right:5px}
.pq-chosen i{display:block;font-style:normal;font-size:11px;color:var(--muted);
font-variant-numeric:tabular-nums;margin-top:1px}
.pq-chosen[hidden]{display:none!important}
.pq-2col{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start}
.pq-urg{border:1px solid var(--line);border-radius:9px;padding:7px 10px;
display:grid!important;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}
.pq-urg input{grid-row:span 2}
.pq-urg em{grid-column:2}
.pq-from{display:flex;flex-wrap:wrap;gap:5px}
.pq-chk{display:flex!important;align-items:center;gap:5px;font-weight:400;font-size:12px;
border:1px solid var(--line);border-radius:8px;padding:4px 9px;cursor:pointer}
.pq-chk:has(input:checked){border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pq-fa{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:3px}
.pq-note{font-size:11.5px;color:var(--muted);flex:1 1 200px}
@media(max-width:640px){.pq-2col{grid-template-columns:1fr}}
/* лічильник заявок на кнопці статті та підпис під планом */
.pq-n{display:inline-block;min-width:14px;margin-left:1px;padding:0 3px;border-radius:6px;
background:var(--bad);color:#fff;font-size:9.5px;font-weight:800;line-height:14px;
vertical-align:top}
/* Підпис під планом. Бейджів буває два («оплачено» + «заявлено»), і в один
рядок вони не влазять у колонку плану — раніше налазили на теґ країн.
Тому кожен бейдж — окремим рядком, притиснутий праворуч під числом. */
.grow > .colplan.has-pq{display:flex;flex-direction:column;align-items:flex-end;
justify-content:center;min-width:0}
.pq-pv{line-height:1.2}
/* Раніше кожен підпис був заливкою на всю ширину колонки — суцільний
помаранчевий прямокутник важив більше, ніж саме число плану, і рядки з
заявками читались як помилки. Тепер заливки немає: кольорова крапка,
тихе слово і сума кольором стану. Другорядне й виглядає другорядним. */
.pq-sub{display:block;font-style:normal;font-size:10px;font-weight:600;
line-height:1.3;color:var(--muted);white-space:nowrap}
.pq-sp,.pq-sa{display:flex;align-items:center;justify-content:flex-end;gap:4px;
width:fit-content;max-width:100%;margin:1px 0 0 auto;
padding:0;background:none;font-size:10px;letter-spacing:0;color:var(--muted)}
.pq-sp::before,.pq-sa::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--pqc);flex:none}
.pq-sp b,.pq-sa b{font-weight:700;white-space:nowrap;color:var(--pqc)}
/* «Оплата» — це ще не факт: гроші пішли, а проводки з Syrve нема.
Тому колір не зелений (він читався б як «закрито»), а спокійний
синій — стан очікування. Зеленим лишається тільки колонка «Факт». */
.pq-sp{--pqc:var(--accent)}
.pq-sa{--pqc:var(--warn)}
/* Вузька таблиця: слово ховаємо, лишаються крапка й сума — колір каже, що
це, а повний текст є в підказці. Так підпис не наповзає на теґ країн. */
@container (max-width:760px){.pq-w{display:none}}
/* ── Заявки на оплату: скло ────────────────────────────────────────────────
Емодзі прибрані, замість них тонкі лінійні іконки. Панелі — те саме
матове скло, що й решта кабінету (--glass-*), щоб сторінка заявок не
виглядала чужою поруч із дашбордом. */
.pq-i,.pr-ci{width:16px;height:16px;flex:none;vertical-align:-3px}
.pr-ci{margin-right:6px}
.pq-btn{display:inline-flex;align-items:center;gap:2px;color:var(--muted);
opacity:.55;transition:opacity .15s,background .15s,color .15s}
.pq-btn:hover{opacity:1;color:var(--accent-ink)}
.py-empty,.py-card,.pr-sum,.pr-empty,.pr-card,.pr-done{
background:var(--glass-fill);
-webkit-backdrop-filter:var(--glass-blur);
backdrop-filter:var(--glass-blur);
border:1px solid var(--glass-bord);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow);
}
/* термінова заявка: колір лишається, скло — теж */
.pr-card.urg{border-color:color-mix(in srgb,var(--bad) 55%,transparent);
background:color-mix(in srgb,var(--bad) 7%,var(--glass-fill))}
/* вкладені блоки — легше скло, щоб не було «скло в склі» */
.pr-req,.pq-nums{border:1px solid var(--glass-bord)}
.pr-req{background:color-mix(in srgb,var(--panel) 42%,transparent)}
/* модальні вікна: тло розмиваємо, картку робимо скляною */
.pq-modal,.py-modal{background:rgba(15,32,48,.34);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pq-form,.py-form{
background:color-mix(in srgb,var(--panel) 82%,transparent);
-webkit-backdrop-filter:blur(22px) saturate(180%);
backdrop-filter:blur(22px) saturate(180%);
border:1px solid var(--glass-bord);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 24px 60px -18px rgba(15,63,102,.5);
}
.pq-form input[type=text],.pq-form input:not([type]),.pq-form input[type=date],
.pq-form textarea,.pq-form select,
.py-form input[type=text],.py-form input:not([type]),.py-form select,.py-form textarea,
.py-arts-box{background:color-mix(in srgb,var(--bg) 62%,transparent);
border-color:var(--glass-bord)}
.pq-p,.pq-chk{background:color-mix(in srgb,var(--panel) 45%,transparent);
border-color:var(--glass-bord);transition:border-color .15s,background .15s}
.pr-copy,.py-edit{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
background:color-mix(in srgb,var(--panel) 40%,transparent)}
/* у темній темі внутрішній відблиск має бути ледь помітним */
@media (prefers-color-scheme:dark){
html:not([data-theme]) .py-empty,html:not([data-theme]) .py-card,
html:not([data-theme]) .pr-sum,html:not([data-theme]) .pr-empty,
html:not([data-theme]) .pr-card,html:not([data-theme]) .pr-done{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html:not([data-theme]) .pq-form,html:not([data-theme]) .py-form{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -18px rgba(0,0,0,.8)}
}
html[data-theme="dark"] .py-empty,html[data-theme="dark"] .py-card,
html[data-theme="dark"] .pr-sum,html[data-theme="dark"] .pr-empty,
html[data-theme="dark"] .pr-card,html[data-theme="dark"] .pr-done{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
html[data-theme="dark"] .pq-form,html[data-theme="dark"] .py-form{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -18px rgba(0,0,0,.8)}
/* ═══════════════════════════════════════════════════════════════════════
КОМІСІЇ ПОЛЬЩІ — ручний журнал
Україну рахує робот, Польщу поки веде людина. Сторінка одночасно
чек-лист (що ще не закрито) і журнал сум, тому головне тут — миттєво
бачити «скільки з 32 закрито» і не шукати назви рахунків у документі.
═══════════════════════════════════════════════════════════════════════ */
/* універсальна скляна панель — щоб не плодити копії токенів */
.glass{background:var(--glass-fill);border:1px solid var(--glass-bord);
border-radius:var(--radius);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}
html[data-theme="dark"] .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
/* ── перемикач країни ─────────────────────────────────────────────────── */
.cc-sw{display:inline-flex;gap:2px;padding:3px;margin-bottom:var(--sp-4);
background:var(--glass-fill);border:1px solid var(--glass-bord);border-radius:999px;
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 8px rgba(15,63,102,.10);
max-width:100%;overflow-x:auto;scrollbar-width:none}
.cc-sw::-webkit-scrollbar{display:none}
.cc-sw a{display:flex;align-items:baseline;gap:7px;white-space:nowrap;
padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;
color:var(--ink-soft);text-decoration:none;transition:background .15s,color .15s}
.cc-sw a small{font-size:10.5px;font-weight:600;opacity:.62}
.cc-sw a:hover{color:var(--accent-ink)}
.cc-sw a.on{background:var(--panel);color:var(--accent-ink);
box-shadow:0 1px 3px rgba(15,63,102,.16)}
/* ── шапка дня ────────────────────────────────────────────────────────── */
.plday{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
gap:var(--sp-4);padding:14px 18px;margin-bottom:var(--sp-3)}
.plday-nav{display:flex;align-items:center;gap:10px;min-width:0}
.plday-t{display:flex;flex-direction:column;min-width:0}
.plday-t b{font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.plday-t small{font-size:11px;color:var(--muted)}
.plday-pick input,.plday-pick select{font:inherit;font-size:13px;font-weight:650;
padding:7px 10px;border:1px solid var(--line);border-radius:10px;
background:color-mix(in srgb,var(--panel) 55%,transparent);color:inherit;cursor:pointer}
.plday-sum{display:flex;align-items:center;gap:var(--sp-4)}
.plday-nums{text-align:right}
.plday-big{font-size:24px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.plday-big i{font-size:14px;font-weight:700;font-style:normal;color:var(--muted)}
.plday-uah{font-size:12px;color:var(--muted);white-space:nowrap}
.plday-uah small{opacity:.7}
.plnote{margin:0 0 var(--sp-4);font-size:12.5px;line-height:1.5;color:var(--muted);
max-width:78ch}
.plnote.warn{color:var(--bad)}
/* попередження просто в блоці зведення (проводка без концепції) */
.plloc-warn{margin:0 18px 14px;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.5;
background:color-mix(in srgb,var(--warn) 12%,transparent);
border:1px solid color-mix(in srgb,var(--warn) 32%,transparent)}
/* ── зведення місяця: локація × партнер ────────────────────────────────
Головна таблиця сторінки: одразу видно, який партнер у якій локації
з'їдає найбільше. Вузькі екрани — горизонтальний скрол саме таблиці,
а не всієї сторінки. */
.pm-wrap{padding:0;margin-bottom:var(--sp-6);overflow:hidden}
.pm-h{padding:13px 18px;font-weight:800;font-size:14px;border-bottom:1px solid var(--line)}
.pm-scroll{overflow-x:auto}
.pm{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.pm th,.pm td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.pm th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
color:var(--muted);text-align:left;background:color-mix(in srgb,var(--panel) 45%,transparent)}
.pm th.num,.pm td.num{text-align:right}
.pm .pm-loc{font-weight:700;position:sticky;left:0;
background:color-mix(in srgb,var(--panel) 88%,transparent)}
.pm td.zero{color:var(--line-strong)}
.pm .pm-tot{font-weight:800}
.pm tfoot td{border-bottom:none;border-top:2px solid var(--line-strong);font-weight:800;
background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pm tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,transparent)}
/* ── дні ────────────────────────────────────────────────────────────── */
.pd-h{font-weight:800;font-size:14px;margin:0 0 var(--sp-3);display:flex;
align-items:baseline;gap:9px}
.pd-h small{font-size:11.5px;font-weight:600;color:var(--muted)}
.pdday{margin-bottom:var(--sp-2);overflow:hidden}
.pdday>summary{display:grid;grid-template-columns:16px 62px minmax(0,1fr) auto;
align-items:center;gap:12px;padding:11px 18px;cursor:pointer;list-style:none}
.pdday>summary::-webkit-details-marker{display:none}
.pdday .pl-chev{color:var(--muted);transition:transform .2s;display:inline-block}
.pdday[open]>summary .pl-chev{transform:rotate(90deg)}
.pd-date{font-weight:800;font-variant-numeric:tabular-nums}
.pd-n{font-size:11.5px;color:var(--muted)}
.pd-sum{font-weight:800;white-space:nowrap}
.pd-body{padding:0 18px 12px;border-top:1px solid var(--line)}
.pd-row{display:grid;grid-template-columns:150px 130px 100px minmax(0,1fr);
gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.pd-row.pd-head{border-top:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.pd-row .num{text-align:right}
.pd-row .mut{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* ── планшет і телефон ────────────────────────────────────────────────── */
@media (max-width:900px){
.plday{padding:12px 14px}
.plday-big{font-size:21px}
.pm-h{padding:11px 14px;font-size:13px}
/* Таблицю не ламаємо на яруси: у неї 8 колонок партнерів, і будь-яке
«згортання» перетворює зведення на кашу. Даємо горизонтальний скрол
саме таблиці — назва локації лишається приклеєною зліва. */
.pm{font-size:12px;min-width:700px}
.pm th,.pm td{padding:8px 10px}
.pd-row{grid-template-columns:minmax(0,1fr) 96px;gap:4px 10px;
grid-template-areas:"loc sum" "prt sum" "src src"}
.pd-row span:nth-child(1){grid-area:loc}
.pd-row span:nth-child(2){grid-area:prt}
.pd-row span:nth-child(3){grid-area:sum;align-self:center}
.pd-row span:nth-child(4){grid-area:src;white-space:normal}
.pd-row.pd-head{display:none}
.pdday>summary{grid-template-columns:16px 54px minmax(0,1fr) auto;gap:9px;padding:11px 14px}
.pd-body{padding:0 14px 12px}
}
@media (max-width:620px){
.plday{flex-direction:column;align-items:stretch;gap:12px}
.plday-nav{flex-wrap:wrap;justify-content:space-between;gap:10px}
.plday-sum{justify-content:space-between;flex-wrap:wrap;gap:10px}
.plday-nums{text-align:left}
.cc-sw{display:flex;width:100%}
.cc-sw a{flex:1;justify-content:center;padding:9px 8px}
.cc-sw a small{display:none} /* «проводить робот» на телефоні не влазить */
}
/* «Зберегти в базу знань» — під вставленими вручну реквізитами в картці
заявки. Кнопка навмисно неяскрава: це не дія оплати, а прибирання
за собою, щоб наступного місяця той самий текст не вставляли знову. */
.pr-tobase{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.pr-tobase button{display:inline-flex;align-items:center;gap:6px;font:inherit;
font-size:12px;font-weight:650;cursor:pointer;padding:7px 12px;border-radius:9px;
border:1px solid var(--line);color:var(--accent-ink);
background:color-mix(in srgb,var(--panel) 55%,transparent);
transition:border-color .15s,background .15s}
.pr-tobase button:hover{border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pr-tobase svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pr-tobase small{font-size:11.5px;color:var(--muted)}
@media (max-width:560px){
.pr-tobase button{flex:1;justify-content:center}
.pr-tobase small{flex-basis:100%}
}
/* ── Запобіжник від двійників у довіднику ──────────────────────────────
Показуємо не сухе «дублікат», а самі знайдені записи: що збіглося,
скільки по них було заявок і посилання на них у списку. Рішення —
за людиною: законні дублі бувають (один ФОП, два банки). */
.dup-box{max-width:620px}
.dup-lead{margin:2px 0 12px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.dup-list{display:flex;flex-direction:column;gap:9px;max-height:46vh;overflow:auto;
padding-right:2px}
.dup-item{padding:11px 13px;border-radius:11px;border:1px solid var(--line);
background:color-mix(in srgb,var(--warn) 7%,transparent)}
.dup-n{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.dup-n b{font-size:14px}
.dup-n em{font-style:normal;font-size:10.5px;font-weight:650;padding:2px 7px;
border-radius:6px;color:var(--muted);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dup-n em.off{color:var(--bad)}
.dup-w{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
padding:2px 7px;border-radius:6px;color:var(--warn);
background:color-mix(in srgb,var(--warn) 15%,transparent)}
.dup-w.iban{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}
.dup-r{display:flex;gap:8px;font-size:12px;line-height:1.7;min-width:0}
.dup-r i{font-style:normal;color:var(--muted);flex:none;width:104px;font-size:11px}
.dup-r code{font-family:var(--font-mono);font-size:11.5px;word-break:break-all}
.dup-open{display:inline-block;margin-top:6px;font-size:12px;font-weight:650;
color:var(--accent-ink)}
.dup-hint{margin:12px 0 4px;font-size:12px;line-height:1.55;color:var(--muted)}
.dup-fa{justify-content:flex-start;gap:12px}
.dup-go{background:var(--warn);border-color:var(--warn)}
.dup-go:hover{background:var(--warn);border-color:var(--warn);filter:brightness(1.06)}
.dup-cancel{font:inherit;font-size:13px;font-weight:650;cursor:pointer;padding:9px 16px;
border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink-soft)}
.dup-cancel:hover{border-color:var(--accent);color:var(--accent-ink)}
/* картка, на яку привело «показати в списку» */
.py-card.flash-hit{animation:hit 2.6s ease-out;position:relative;z-index:2}
@keyframes hit{
0%,55%{box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 55%,transparent)}
100%{box-shadow:0 0 0 0 transparent}
}
@media (max-width:560px){
.dup-r i{width:88px}
.dup-fa{flex-wrap:wrap}
.dup-go,.dup-cancel{flex:1}
}
/* «Додати одержувача в базу знань» — прямо у формі заявки, під вставленими
текстом реквізитами. Стоїть увімкненою: людина вже тримає реквізити в
руках, і це найдешевший момент завести їх у довідник. */
.pq-tobase{align-items:flex-start!important;gap:9px;margin-top:2px;
padding:9px 11px;border-radius:10px;
background:color-mix(in srgb,var(--good) 8%,transparent);
border:1px solid color-mix(in srgb,var(--good) 24%,transparent)}
.pq-tobase input{margin-top:1px;accent-color:var(--good)}
.pq-tobase span{display:block;font-size:12.5px;font-weight:650;line-height:1.35}
.pq-tobase em{display:block;font-style:normal;font-size:11.5px;font-weight:400;
color:var(--muted);margin-top:2px}
/* ── Розкриття розділів меню: щоб було ВИДНО, що вони розкриваються ──────
Раніше стояла сама стрілка ▸ — її не помічали, і люди не знали, що під
«Бюджетом КК» і «Іншим» щось є. Тепер це кнопка з фоном і підписом «ще»,
а стрілка повертається при розкритті. */
.dw-tog{display:flex;align-items:center;gap:3px;width:auto;padding:0 7px;height:24px;
top:50%;transform:translateY(-50%);border-radius:999px;
background:var(--accent-soft);border:none;cursor:pointer;
color:var(--accent-ink);transition:background .15s}
.dw-tog i{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;
letter-spacing:.03em}
.dw-tog:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.dw-tog .dw-chev{font-size:9px;transition:transform .2s;display:inline-block}
.dw-tog.on .dw-chev{transform:rotate(180deg)}
/* стрілка стояла абсолютно (лишок від старого макета) і висіла вгорі —
повертаємо її в рядок, поруч із підписом «ще» */
.dw-more>summary .dw-chev{position:static;width:auto;height:auto;
transition:transform .2s;display:inline-block;font-size:9px;color:var(--accent-ink)}
.dw-more[open]>summary .dw-chev{transform:rotate(180deg)}
.dw-more-c{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;
letter-spacing:.03em;color:var(--accent-ink);background:var(--accent-soft);
padding:2px 7px;border-radius:999px;margin-left:auto}
.dw-more>summary .dw-chev{margin-left:4px}
/* підменю трохи відсунуто й підписано лінією — видно, що це «всередині» */
.dw-sub{position:relative;padding-left:10px}
.dw-sub::before{content:"";position:absolute;left:14px;top:4px;bottom:4px;width:2px;
border-radius:2px;background:var(--line-strong);opacity:.7}
/* ── Історія вивантажень: що саме принесло ──────────────────────────────
Рядок «узято 38 на 442 604 ₴» нічого не пояснює, поки не видно, ЩО це за
проводки й куди вони лягли. Тепер прогін розкривається. */
.irun{padding:0;overflow:hidden}
.irun>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:11px 14px;cursor:pointer;list-style:none}
.irun>summary::-webkit-details-marker{display:none}
.irun .ir-chev{color:var(--muted);transition:transform .2s;display:inline-block;flex:none}
.irun[open]>summary .ir-chev{transform:rotate(90deg)}
.ir-rep{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;
color:var(--muted);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ir-body{padding:0 14px 12px;border-top:1px solid var(--line)}
.irt-row{display:grid;grid-template-columns:minmax(0,1.6fr) 112px minmax(0,1.2fr) minmax(0,1fr);
gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.irt-row.irt-head{border-top:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.irt-row .num{text-align:right}
.irt-cm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irt-to b{font-weight:700}
.irt-basket{font-style:normal;color:var(--warn)}
.irt-row .mut{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.irt-none{padding:10px 0;font-size:12.5px;color:var(--muted)}
@media (max-width:760px){
.irt-row{grid-template-columns:minmax(0,1fr) 104px;gap:3px 10px;
grid-template-areas:"cm sum" "to sum" "meta meta"}
.irt-row .irt-cm{grid-area:cm;white-space:normal}
.irt-row .num{grid-area:sum}
.irt-row .irt-to{grid-area:to}
.irt-row .mut{grid-area:meta}
.irt-row.irt-head{display:none}
}
/* пояснення про червоне число — стоїть поруч із кнопкою, яка його прибирає */
.imp-why{padding:11px 14px;margin-bottom:12px;border-radius:12px;font-size:12.5px;
line-height:1.55;background:color-mix(in srgb,var(--accent) 7%,transparent);
border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.imp-allbtn{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.imp-allbtn:hover{filter:brightness(1.08);color:#fff}
/* ── За який місяць платимо ─────────────────────────────────────────────
На зламі місяця заявки йдуть одночасно за поточний бюджет і за минулий.
Якщо цього не показати обом сторонам, липневий платіж легко подати чи
провести серпнем — і зіпсувати одразу два місяці. */
.pq-mon{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
margin:-4px 0 12px;padding:9px 12px;border-radius:10px;font-size:12.5px;
background:color-mix(in srgb,var(--accent) 7%,transparent);
border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.pq-mon b{font-size:13px;color:var(--accent-ink)}
.pq-mon span{color:var(--muted);line-height:1.4}
.pq-mon.old{background:color-mix(in srgb,var(--warn) 12%,transparent);
border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.pq-mon.old b{color:var(--warn)}
/* розбивка «чекають на оплату» по місяцях бюджету */
.pr-months{display:flex;gap:8px;flex-wrap:wrap}
.prm{display:flex;align-items:baseline;gap:7px;padding:7px 12px;border-radius:10px;
background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line)}
.prm i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.prm b{font-size:14px;font-weight:800}
.prm em{font-style:normal;font-size:11px;color:var(--muted)}
.prm.old{background:color-mix(in srgb,var(--warn) 13%,transparent);
border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.prm.old i,.prm.old b{color:var(--warn)}
/* плашка місяця в картці заявки */
.pr-mon{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
padding:3px 8px;border-radius:7px;white-space:nowrap;
color:var(--muted);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pr-mon.old{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 32%,transparent)}
.pr-card:has(.pr-mon.old){box-shadow:inset 3px 0 0 var(--warn),var(--glass-shadow)}
.pr-dmon{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.pr-dmon.old{color:var(--warn)}
/* ── Контроль CFO на сторінці рознесення: UA + PL + GE = 0 ──────────────
Зведений нуль — у гривневому еквіваленті за курсом ПриватБанку.
Зелений/червоний видно здалеку; доданки поруч, щоб плюс однієї країни
не ховав мінус іншої. */
.al-ctl{margin:12px 0 16px;padding:12px 16px;border-radius:12px;border:1px solid}
.al-ctl.ok{background:color-mix(in srgb,var(--good) 8%,transparent);
border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.al-ctl.bad{background:color-mix(in srgb,var(--bad) 7%,transparent);
border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.al-ctl-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.al-ctl-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;
border-radius:50%;font-size:13px;font-weight:800;color:#fff;align-self:center}
.al-ctl.ok .al-ctl-ic{background:var(--good)}
.al-ctl.bad .al-ctl-ic{background:var(--bad)}
.al-ctl.ok .al-ctl-h b{color:var(--good)}
.al-ctl.bad .al-ctl-h b{color:var(--bad)}
.al-ctl-tot{margin-left:auto;font-size:16px;font-weight:800}
.al-ctl-rows{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;
margin-top:8px;font-size:12.5px}
.al-ctl-r{display:inline-flex;align-items:baseline;gap:6px}
.al-ctl-r i{font-style:normal;color:var(--muted);font-size:11px}
.al-ctl-r em{font-style:normal;color:var(--muted);font-size:11px}
.al-ctl-plus{color:var(--muted);font-weight:700}
.al-ctl-warn{margin-top:8px;font-size:12px;line-height:1.5;color:var(--muted)}
/* сальдо минулого місяця в рядку рознесення: видно, що ціль уже
скоригована — плюс донесеться, мінус зменшив нове нарахування */
.al-sal{font-style:normal;font-size:10.5px;font-weight:650;padding:2px 7px;border-radius:6px;
color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,transparent);
white-space:nowrap}
.al-sal.neg{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
/* ── «До оплати по містах» — наростаючим підсумком ──────────────────────
Реальний залишок зобовʼязань міста: нарахування чинної стадії + борг
минулих місяців − внесено. Мета при закритті — нуль скрізь, тому нуль
тут святкуємо зеленим, а не ховаємо. */
.due-wrap{margin:0 0 16px;padding:0;border-radius:var(--radius);overflow:hidden;
background:var(--glass-fill);border:1px solid var(--glass-bord);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow)}
.due-h{padding:13px 18px;font-weight:800;font-size:14px;border-bottom:1px solid var(--line);
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.due-h small{font-size:11.5px;font-weight:600;color:var(--muted)}
.due-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 22px;
padding:6px 18px 12px}
.due-cn{font-weight:800;font-size:13px;margin:10px 0 4px}
.due-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 92px 92px 96px;gap:8px;
align-items:baseline;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.due-row.due-head{border-top:none;font-size:10px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.due-row .num{text-align:right}
.due-city{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.due-row .neg{color:var(--good)} /* переплата = запас, це добре */
.due-v{font-weight:800}
.due-v.zero{color:var(--good)}
.due-v:not(.zero):not(.neg){color:var(--bad)}
.due-row.due-foot{border-top:2px solid var(--line-strong);font-weight:700}
/* рядок «ДО ОПЛАТИ» у зведеній картці країни */
.dsum-row.due{border-top:1.5px solid var(--line-strong);margin-top:5px;padding-top:6px;
font-weight:700;color:var(--ink)}
.dsum-row.due.settled .dsum-v b{color:var(--good)}
.dsum-row.due .dsum-v b{color:var(--bad)}
.dsum-row .due-neg{color:var(--good)!important}
/* назва статті в МИНУЛОМУ місяці — зафіксована (перейменування там заборонене) */
.grow > .c-name.frozen{background:transparent;border-color:transparent;
color:var(--ink-soft);cursor:default}
.grow > .c-name.frozen:focus{box-shadow:none;border-color:var(--line)}
/* «нема в довіднику» → кнопка, а не докір; і підсвітка поля, куди поїхав текст */
.pq-none .pq-new{display:block;width:100%;margin-top:8px;padding:9px 12px;
border-radius:10px;border:1px solid var(--accent);background:var(--accent-soft);
color:var(--accent-ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.pq-none .pq-new:hover{background:var(--accent);color:#fff}
.pq-moved{color:var(--good)}
@keyframes pqflash{0%{box-shadow:0 0 0 3px rgba(63,127,184,.35)}
100%{box-shadow:0 0 0 3px rgba(63,127,184,0)}}
#pq_text.pq-flash{animation:pqflash 1.6s ease-out;border-color:var(--accent)}
/* ── Банк (виписка ПриватБанку) ─────────────────────────────────────── */
.bk-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;
padding:12px 16px;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow)}
.bk-sum{display:flex;flex-direction:column;gap:1px}
.bk-sum>span{font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.bk-sum>b{font-size:22px;line-height:1.1}
.bk-sum>em{font-style:normal;font-size:11px;color:var(--muted)}
.bk-f{display:flex;align-items:center;gap:8px;margin-left:auto}
.bk-mon{display:flex;gap:6px;flex-wrap:wrap;flex:1 0 100%}
.bk-mon a{padding:3px 9px;border-radius:8px;border:1px solid var(--line);
font-size:12px;font-weight:700;color:var(--muted);text-decoration:none}
.bk-mon a.on{background:var(--accent-soft);color:var(--accent-ink);
border-color:var(--accent-soft)}
.bk-accs{display:grid;gap:12px;margin:0 0 20px;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.bk-acc{padding:12px 14px;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow)}
.bk-acc-h{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.bk-acc-n{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.bk-acc-i{font-size:11px;color:var(--muted);font-weight:600}
.bk-acc-v{font-size:21px;font-weight:800;line-height:1.15}
.bk-acc-v.neg{color:var(--bad)}
.bk-acc-m{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px;
font-size:11px;color:var(--muted);font-weight:600}
.bk-acc-d{margin-top:6px;font-size:10.5px;color:var(--muted)}
.bk-grp{margin:0 0 10px;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.bk-grp>summary{display:flex;align-items:center;gap:10px;padding:11px 15px;
cursor:pointer;list-style:none;font-size:13.5px}
.bk-grp>summary::-webkit-details-marker{display:none}
.bk-grp[open]>summary{border-bottom:1px solid var(--line)}
.bk-grp .chev{transition:transform .15s;color:var(--muted)}
.bk-grp[open] .chev{transform:rotate(90deg)}
.bk-gt{font-weight:800}
.bk-gn{font-size:11.5px;color:var(--muted);font-weight:600}
.bk-gs{margin-left:auto;font-weight:800}
.bk-gs.neg,.bk-day-h .neg,.bk-r-sum.neg{color:var(--bad)}
.bk-days{padding:4px 15px 12px}
.bk-day{margin-top:10px}
.bk-day-h{display:flex;align-items:baseline;gap:10px;padding:4px 0;
border-bottom:1px solid var(--line);font-size:12px;font-weight:700}
.bk-day-h .bk-day-n{color:var(--muted);font-weight:600}
.bk-day-h b{margin-left:auto}
.bk-row{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,2fr);
gap:10px;padding:4px 0;font-size:12px;align-items:baseline}
.bk-r-sum{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.bk-r-nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-r-os{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:620px){
.bk-row{grid-template-columns:96px minmax(0,1fr);row-gap:2px}
.bk-r-os{grid-column:1/-1;white-space:normal}
}
/* готовий коментар проводки Syrve — у заявці й у картці казначея */
.pq-svc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;
padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.pq-svc>i{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.pq-svc code{flex:1 1 220px;min-width:0;font-size:12.5px;font-weight:600;
word-break:break-word;line-height:1.35}
.pr-svc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;
padding:8px 11px;border:1px dashed var(--line-strong);border-radius:10px;
background:var(--panel-2)}
.pr-svc>i{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.03em;color:var(--muted)}
.pr-svc .svc-t{flex:1 1 200px;min-width:0;font-size:12.5px;font-weight:600;
word-break:break-word;cursor:pointer}
.svc-b{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;
border:1px solid var(--line);background:var(--panel);color:var(--muted);
font-size:11.5px;font-weight:700;cursor:pointer}
.svc-b svg{width:13px;height:13px}
.svc-b:hover{color:var(--ink);border-color:var(--line-strong)}
.svc-b .done{color:var(--good)}
/* борг минулих у базі відсотка: зірочка біля % і бейдж біля нарахування */
.cpct .cpct-c{position:absolute;right:0;top:0;font-style:normal;color:var(--warn);font-weight:800}
/* Кольором світиться САМА ЦИФРА боргу/запасу (.m-carryv). Слово поруч
лишається сірим: коли зеленим було і число, і підпис, підрядок важив
більше за головне число над ним. */
.dc-metrics .m-carry{display:inline;margin-left:3px;font-style:normal;font-weight:600;
color:var(--muted)}
/* На широкому екрані колонка показника — 113–190 px, а рядок «4 149 255
−617 306 запас минулих» просить 207 px. Він не влазив і обрізався просто
посеред числа: «4 149 255 −617 30…». Тому на десктопі лишаємо самі числа
(103 px — влазить навіть у найвужчу колонку), а слово несе колір: зелене
число = запас, червоне = борг. Повний підпис — у підказці на числі.
На телефоні місця вистачає, там слово лишається. */
@media (min-width:921px){
.dc-metrics .m-sub .ms-l:not(.ms-stage){font-size:9.5px}
.dc-metrics .m-carry{display:none}
}
@media (max-width:620px){
.due-grid{padding:4px 12px 10px}
.due-row{grid-template-columns:minmax(0,1fr) 74px 84px;gap:6px}
.due-row span:nth-child(2),.due-row.due-head span:nth-child(2){display:none}
.due-row span:nth-child(4),.due-row.due-head span:nth-child(4){display:none}
}
/* ── Смуга плану продажів на всю ширину ────────────────────────────────────
Замість чотирьох плиток (три з яких дублювали розбивку по країнах нижче)
лишився один показник, розкладений по всій смузі: ліворуч загальний план,
посередині країни з частками в ньому, праворуч курс валют. Частка країни —
не довідка: саме нею ділиться бюджет КК, тож вона стоїть біля числа. */
/* План і факт стоять поруч однаковими парами «сума + країни», праворуч курс.
Коли факту ще немає (початок місяця), пара факту не малюється взагалі —
тоді смуга виглядає точно як раніше. */
.dash-kpi.plan-band{display:grid;
grid-template-columns:minmax(190px,auto) minmax(0,1fr) minmax(190px,auto) minmax(0,1fr) auto;
align-items:stretch;gap:0}
.dash-kpi.plan-band:has(.pb-fact){grid-template-columns:minmax(190px,auto) minmax(0,1fr) minmax(190px,auto) minmax(0,1fr) auto}
.dash-kpi.plan-band:not(:has(.pb-fact)){grid-template-columns:minmax(230px,auto) minmax(0,1fr) auto}
.plan-band .pb-fact{border-left:1px solid var(--line)}
.plan-band .pb-main{padding:15px 22px;display:flex;flex-direction:column;gap:3px;
justify-content:center}
.plan-band .pb-main .dk-badge{align-self:flex-start;margin-top:6px}
/* Країни стоять поруч, як і стояли, — рівні стовпці їх лише розсували.
Вирівнювання тримається не сіткою, а тим, що в кожної країни однакові три
рядки: гривня, місцева валюта (в України порожня), частка. Тому гривня
завжди на одній лінії з гривнею, а дрібні рядки — під нею. */
/* Ряд країн — по центру смуги за висотою; всередині ряду колонки однакової
висоти, тому відсотки стоять в одну лінію. Роздільна лінія при цьому
лишається на всю висоту смуги, бо центрується вміст, а не сама зона. */
.plan-band .pb-split{display:flex;align-items:center;
padding:15px 24px;border-left:1px solid var(--line);min-width:0}
.pb-cols{display:flex;align-items:stretch;gap:30px;flex-wrap:wrap;min-width:0}
.plan-band .pb-rate{display:flex;flex-direction:column;justify-content:center;gap:3px;
padding:15px 22px;border-left:1px solid var(--line);font-size:11px;color:var(--muted)}
.pb-rate-l{text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:10px}
.pb-rate b{color:var(--ink-soft);font-weight:700;white-space:nowrap;font-size:12px}
.dks{display:flex;align-items:stretch;gap:8px;min-width:0}
.dks-f{font-size:19px;line-height:1;align-self:flex-start}
.dks-b{display:flex;flex-direction:column;min-width:0;flex:1}
.dks-v{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;line-height:1.2}
.dks-v i{font-style:normal;font-weight:600;font-size:11px;color:var(--muted)}
/* сума у валюті країни — рівно під гривневою, тим самим правим краєм */
.dks-n{font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;
line-height:1.3;margin-top:1px}
/* «% плану» притиснутий до низу: колонки країн однакової висоти, тому
відсотки стоять в одну лінію навіть у України, де рядка валюти немає. */
.dks-p{font-size:10.5px;font-weight:700;color:var(--muted);white-space:nowrap;margin-top:auto;
padding-top:1px}
@media (max-width:900px){
.dash-kpi.plan-band,.dash-kpi.plan-band:has(.pb-fact),
.dash-kpi.plan-band:not(:has(.pb-fact)){grid-template-columns:1fr}
.plan-band .pb-fact{border-left:none;border-top:1px solid var(--line)}
.plan-band .pb-split,.plan-band .pb-rate{border-left:none;border-top:1px solid var(--line)}
.pb-cols{gap:14px 18px}
}
/* Телефон: три країни МУСЯТЬ стояти в один ряд. Вільний flex ламався на
восьмизначних числах («31 243 853 ₴») — Грузія зʼїжджала на другий рядок,
і план виглядав інакше, ніж факт поруч. Тому тут жорстка сітка 1/3 + 1/3 +
1/3 і трохи дрібніший кегль: усі три колонки однакові й нічого не переносить. */
@media (max-width:560px){
.pb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.plan-band .pb-split{padding:13px 16px}
.dks{gap:5px;min-width:0}
.dks-f{font-size:15px}
.dks-v{font-size:12.5px;letter-spacing:-.02em}
.dks-v i{font-size:10px}
.dks-n{font-size:10px}
.dks-p{font-size:9.5px}
}
/* Найвужчі екрани (iPhone SE/mini, 360-390px): «31 243 853 ₴» не влазить
навіть у третину ширини, тому ще один щабель кегля і вужчі проміжки.
Прапор ставимо над числом, а не поруч, — так колонці лишається вся ширина. */
@media (max-width:400px){
.pb-cols{gap:7px}
.plan-band .pb-split{padding:12px 13px}
.dks{flex-direction:column;gap:1px}
.dks-f{font-size:13px;line-height:1.1}
.dks-v{font-size:12px}
.dks-n{font-size:9.5px}
.dks-p{font-size:9px}
}
/* Плашки з відсотками переїхали сюди з верхніх плиток — під шкалу, до якої
вони й належать. Дрібні уточнення («з боргом минулих», «ще внести») —
окремим рядком під плашкою{margin-top:0;display:inline-block}
/* ── Стовпчик шкал: підписані смуги ────────────────────────────────────────
Раніше тут стояли дві безіменні смуги і два бейджі — стороння людина не
могла зрозуміти, що з чим порівнюється. Тепер кожен рядок читається як
речення: «Витрати ▓▓▓ 94% бюджету». */
/* Два стовпчики — ВИТРАТИ і ВНЕСКИ. Підписи до них стоять у шапці таблиці
разом із рештою заголовків, тому тут лишаються самі значення. Кольорових
смуг більше немає: відсоток у плашці каже те саме, а смуга під ним лише
повторювала його вдруге і при цьому обрізалась на 100%. */
/* Усі три зони рядка (назва · числа · плашки) влаштовані однаково: головний
рядок по центру, під ним зарезервовані 15 px для дрібного підпису. Тільки
так назва країни, її числа і плашки стоять на ОДНІЙ висоті — раніше кожна
зона центрувалась сама по собі і головні рядки розʼїжджались. */
.dc-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
align-items:stretch}
.dash-countries .dc-bars{align-self:stretch}
.dash-countries .dcard:not(.dchead) .dc-id{padding-bottom:28px}
.bcol{display:flex;flex-direction:column;gap:5px;min-width:0;position:relative;
justify-content:center;padding-bottom:28px}
.dchead .bcol,.dchead .dc-bars{padding-bottom:0}
.bcol-n{font-size:10px;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted);font-weight:700}
.dchead .dc-bars{align-items:end}
.bcol .dk-badge{margin:0;align-self:flex-start;white-space:nowrap}
/* «переплата» / «ще внести» — такий самий дрібний підпис, як «запас минулих»
у сусідньому стовпчику, і на тому ж рівні. */
.bcol-v{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-weight:700;
line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
.rest-due{color:var(--bad)}
.rest-over,.rest-zero{color:var(--good)}
@media (max-width:920px){
.dc-bars .bl{grid-template-columns:52px minmax(50px,1fr) auto}
}
@media (max-width:920px){
.dc-bars{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
}
.ms-l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.ms-stage{color:var(--muted);font-weight:600;opacity:.9}
/* ── Підгрупи Маркетингу: окремі згортані секції ───────────────────────────
Було так (власник, 12.09.2026: «працювати зовсім не зручно і інтуїтивно
не зрозуміло»): в одному рядку заголовка сходились ТРИ різні тла —
липка колонка «Стаття» мала свій колір, решта рядка — колір стану
(зелений «прийнято» / сірий «чернетка»), а колонки План і Факт — ще й
власну підсвітку. Секція виглядала як три склеєні шматки, шеврон був
темно-синім на темно-синьому, і ніщо не казало, що по рядку треба
клацнути.
Тепер заголовок — це одна суцільна смуга-кнопка: рівне тло на всю
ширину (липка колонка теж), шеврон у рамці, стан — пігулкою поруч із
назвою (як у шапці центру), а в порожній колонці «Коментар» прямим
текстом написано «розгорнути» / «згорнути». Між секціями — повітря. */
.gwrap{display:contents}
.gwrap.gcol{display:none}
/* Одне тло на весь рядок. Перебиваємо і базовий .grow.gsub (accent-soft),
і кольори стану .st-s/.st-a — колір стану тепер живе в пігулці, а не
заливає пів таблиці. */
.grow.gsub.gtog,
.grow.gsub.gtog.st-d,.grow.gsub.gtog.st-s,.grow.gsub.gtog.st-a{
/* один тон на весь рядок; тримаємо його змінною, бо липкій колонці
«Стаття» потрібне рівно те саме тло, інакше вона знову стане окремим
прямокутником */
--gs-bg:color-mix(in srgb,var(--accent) 7%,var(--panel-2));
background:var(--gs-bg);color:var(--ink);
cursor:pointer;user-select:none;
border-top:none;
border-bottom:1px solid var(--line-strong);
margin-top:var(--sp-3)}
/* перша секція йде одразу за шапкою колонок — там повітря не треба
(:first-child тут не спрацював би: перший у сітці — рядок шапки) */
.grow.head + .grow.gsub.gtog{margin-top:0}
.grow.gsub.gtog > span{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
/* Канта зліва тут БІЛЬШЕ НЕМА. Тонка вертикальна риска біля самого краю
не читалась як межа секції: вона висіла окремо від шеврона, не діставала
країв смуги і виглядала як випадкова полоска (власник, 12.09.2026:
«полоси збоку»). Секцію і без неї видно — у неї власне тло й межа знизу,
а розкриту додатково видно за кольором тла. */
.grow.gsub.gtog > .c-name{background:var(--gs-bg);align-self:stretch;
display:flex;align-items:center;gap:var(--sp-2);min-width:0;overflow:hidden;
font-size:13.5px;letter-spacing:.01em;box-shadow:none}
/* Стану й підказці тісно в самій колонці «Коментар» — віддаємо їм ще й
порожню колонку «Тип розп.». Числа лишаються у своїх колонках: місце
звільняє схований .ct, тож наступні комірки не зсуваються. */
.grow.gsub.gtog > .gs-meta{grid-column:span 2}
.grow.gsub.gtog > .ct{display:none}
.grow.gsub.gtog .cn{color:var(--ink)}
/* у смузі-заголовку колонки План і Факт не підсвічуємо: смуга має читатись
як один суцільний блок, а не як шматок таблиці */
.grow.gsub.gtog > .colplan,.grow.gsub.gtog > .colfact{background:none}
.grow.gsub.gtog:hover,
.grow.gsub.gtog:hover > .c-name{background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
.grow.gsub.gtog:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* розкрита секція: акцентний кант і трохи виразніше тло — видно, де ти */
.grow.gsub.gtog.open,
.grow.gsub.gtog.open > .c-name{background:var(--accent-soft)}
/* «ручка» перетягування — та сама смуга, що й рядок, інакше зліва
лишався окремий прямокутник іншого кольору */
.grow.gsub.gtog > .rgrip{background:var(--gs-bg)}
.grow.gsub.gtog.open > .rgrip{background:var(--accent-soft)}
.grow.gsub.gtog .gs-name{font-weight:700}
/* специфічність тут не для краси: вище є .grow.gsub em, і без трьох класів
лічильник статей знову став би капсом кольору акценту */
.grow.gsub.gtog .gs-n{font-style:normal;font-size:11px;font-weight:650;
text-transform:none;letter-spacing:0;opacity:1;margin-left:0;
color:var(--muted);background:color-mix(in srgb,var(--muted) 16%,transparent);
padding:1px 7px;border-radius:20px;flex:none}
.grow.gsub.gtog .gs-n::after{content:" ст."}
/* Шеврон у рамці — головна підказка «це кнопка». Раніше був символом ▸
кольору акценту на акцентному тлі, тобто майже невидимим. */
.gs-chev{flex:none;width:20px;height:20px;border-radius:6px;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line-strong);background:var(--panel);
color:var(--ink-soft);transition:transform .15s ease,color .15s ease}
.gs-chev svg{width:12px;height:12px;display:block}
.grow.gsub.gtog:hover .gs-chev{color:var(--accent);border-color:var(--accent)}
.grow.gsub.gtog.open .gs-chev{transform:rotate(90deg);
color:var(--accent);border-color:var(--accent)}
/* Колонка «Коментар» у смузі-заголовку: стан підгрупи і пряма підказка,
що рядок клікається. */
.gs-meta{display:flex;align-items:center;gap:var(--sp-2);min-width:0;overflow:hidden}
/* пігулка стану — та сама мова, що й у шапці центру */
.gs-st{display:inline-flex;align-items:center;gap:5px;flex:none;
font-size:10.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
padding:2px 8px 2px 6px;border-radius:7px;color:var(--sc,var(--muted));
background:color-mix(in srgb,var(--sc,var(--muted)) 14%,transparent)}
.gs-st .ci{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.gs-hint{font-size:11px;color:var(--muted);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.grow.gsub.gtog:hover .gs-hint{color:var(--accent-ink)}
.gs-less{display:none}
.grow.gsub.gtog.open .gs-more{display:none}
.grow.gsub.gtog.open .gs-less{display:inline}
/* Друга пігулка стану — та, що стоїть біля самої назви. Потрібна для
вузької таблиці, де колонки «Коментар» немає, а отже немає й основної
пігулки. Спершу тут була просто кольорова крапка, але сам по собі
кружечок нічого не пояснює: помаранчевий він чи зелений — здогадуйся
(власник, 12.09.2026). Тому те саме слово, лише компактніше. */
.gs-sm{display:none;font-size:10px;padding:2px 7px 2px 5px}
/* тіло підгрупи: відступ, щоб рядки читались як вкладені в секцію */
.gwrap > .grow > .c-name{padding-left:20px}
.gwrap > .gbar{padding-left:20px}
/* Телефон: колонки «Коментар» там немає, отже й підпису. Пігулка стану
лишається крапкою — колір видно, місця не займає. */
/* Вузька таблиця: колонки «Коментар» немає, отже нема ні пігулки, ні
підказки — стан показує крапка біля назви, а «клікається» каже шеврон.
Міряємо саме таблицю (@container), як і решта її розкладок: на планшеті
вікно широке, а панель — ні. */
@container (max-width:760px){
.grow.gsub.gtog > .c-name{gap:6px;font-size:13px}
.grow.gsub.gtog > .gs-meta{grid-column:auto}
.grow.gsub.gtog > .ct{display:block}
.grow.gsub.gtog .gs-n{padding:1px 6px}
.grow.gsub.gtog .gs-n::after{content:""}
.gs-sm{display:inline-flex}
}
/* ── Кнопка в роботі ──────────────────────────────────────────────────────
Дії, що ходять у Syrve, тривають кілька секунд. Поки вони йдуть, кнопка
неактивна й показує кружечок — інакше людина тисне вдруге і запускає ту
саму важку операцію двічі. Ширину фіксуємо в JS, щоб кнопка не стрибала. */
.busy{opacity:.72;cursor:progress;display:inline-flex;align-items:center;justify-content:center;gap:7px}
/* УВАГА: клас саме .btn-spin, а не .spin. Короткий .spin у застосунку вже
зайнятий — це модифікатор кнопки оновлення в шапці (.navb.reload.spin).
Коли я назвав так само, при натисканні «оновити» поверх стрілки малювався
ще один кружечок. Не перейменовувати назад. */
.btn-spin{width:12px;height:12px;flex:none;border-radius:50%;
border:2px solid color-mix(in srgb,currentColor 30%,transparent);
border-top-color:currentColor;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-spin{animation-duration:2.4s}}
/* ══ ТЕЛЕФОН: таблиця розподілу стає картками ═══════════════════════════════
На екрані 390px таблиця з десяти колонок жила лише горизонтальною
прокруткою — треба було тягнути вбік, щоб дійти до «До оплати», а шапка
з підписами лишалась позаду. Тому на вузькому екрані рядок перетворюється
на картку: назва зверху, під нею пари «підпис → число». Підписи беруться
з data-l кожної комірки, тож жодна цифра не втрачена.
Головні три показники (нарахування, внесок, до оплати) видно завжди;
решта в рядках ЛОКАЦІЙ згорнута — картка розкривається дотиком. У рядках
міста і країни показуємо все: їх мало, і це головні підсумки. */
@media (max-width:760px){
.dtbl{overflow-x:visible}
.drow.dhead{display:none} /* підписи тепер у кожній комірці */
.drow{display:block;min-width:0;padding:12px 16px;font-size:13px}
/* назва локації — окремим рядком, з переносом: адреси довгі */
.drow .c-loc{position:static;display:flex;flex-wrap:wrap;align-items:baseline;
gap:4px 7px;white-space:normal;overflow:visible;text-overflow:clip;
background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
margin:0 0 8px;padding:0;font-weight:700;line-height:1.3}
.drow.dloc .c-loc{padding-left:0}
.c-loc .loc-addr{font-weight:500;font-size:12px}
/* пара «підпис → число» */
.drow .num{display:flex;align-items:baseline;gap:10px;padding:3px 0;text-align:right;
white-space:normal}
.drow .num::before{content:attr(data-l);margin-right:auto;flex:0 1 auto;
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);white-space:nowrap}
/* локальна валюта — тут поруч, а не під числом: вертикаль на телефоні дорожча */
.drow .cdue .dnat{display:inline;margin-left:5px}
/* так само розклад зобовʼязань; порожній заповнювач на телефоні зайвий —
тут рядки країн не стоять поруч, і вирівнювати нема з чим */
.drow .oblig .oblig-x{display:inline;margin-left:5px}
.drow .oblig .oblig-x.ph{display:none}
/* зірочка «враховано борг» — назад у потік, поза таблицею жолоба немає */
.drow .cpct{position:static;padding-right:0}
.cpct .cpct-c{position:static;margin-left:3px}
/* другорядне в рядках локацій — під розкриття */
.drow.dloc .num.sec{display:none}
.drow.dloc.open .num.sec{display:flex}
.drow.dloc{cursor:pointer;position:relative}
.drow.dloc::after{content:'ще ▾';position:absolute;right:16px;top:12px;
font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--accent-ink);
opacity:.75}
.drow.dloc.open::after{content:'згорнути ▴'}
/* поле плану — на всю ширину картки, щоб у нього можна було влучити пальцем */
.drow .plan-f{display:flex;gap:6px}
.drow .plan-f .inl.num{max-width:none;flex:1;text-align:right}
.drow .plan-f::before{align-self:center}
/* заклад закрився — кнопка не має тиснути назву */
.drow .loc-x{margin-left:auto}
/* Підкладка залипаючої колонки тут не потрібна: рядок уже не їде вбік, а
світлий прямокутник за назвою обривався посеред картки. Гасимо ВСІ її
варіанти поіменно — вони специфічніші за загальне правило вище. */
.drow .c-loc,.drow.dhead .c-loc,.drow.dcity .c-loc,.drow.dfoot .c-loc,
.drow:hover:not(.dhead):not(.dfoot) .c-loc,
summary.drow.dcity:hover .c-loc{background:none;box-shadow:none}
/* зірочка «враховано борг» — впритул до відсотка, а не через увесь рядок */
.drow .cpct{gap:3px}
/* нижній блок «Без привʼязки до міста»: стрілка, назва і цифри в один
стовпчик по лівому краю — інакше вони розліталися по центру */
.cty>summary{flex-wrap:wrap;gap:4px 7px;padding:9px 16px}
.cty>summary .ce-chev{flex:none}
/* flex-basis 0 і дозвіл на перенос усередині — інакше довга назва не
вміщалась поруч зі стрілкою і зʼїжджала на власний рядок, лишаючи
стрілку саму вгорі */
.cty-n{flex:1 1 0;min-width:0;white-space:normal}
.cty-nums{flex-basis:100%;margin-left:0;text-align:left;white-space:normal;
font-size:11px}
}
/* Порожня діра під назвою країни на телефоні.
На широкому екрані .dc-id має нижнє поле 28px — воно вирівнює назву з
показниками сусідніх колонок. На вузькому колонок немає, і поле лишало
помітний провал між «Україна» і першим рядком. Правило мусить стояти саме
ТУТ, у кінці файлу: те, що задає 28px, оголошене нижче за мобільний блок,
і при однаковій вазі вигравало б воно. */
@media (max-width:920px){
.dash-countries .dcard:not(.dchead) .dc-id{padding-bottom:0}
}
/* ── ТЕЛЕФОН: плашки відсотків стають звичайними рядками картки ────────────
У картці все живе за правилом «підпис ліворуч, число праворуч». Дві плашки
з відсотками були винятком: висіли без підписів, ліворуч і посередині, і
вибивалися з лінійки. Рядок «ще внести» до того ж стояв абсолютно, з
резервом 28px під нього. Тут переводимо зону в ті самі рядки. */
@media (max-width:920px){
.dash-countries .dc-bars{display:block;margin-top:0}
/* Та сама сітка, що й у рядках показників: підпис у першій колонці,
значення в другій, дрібний підсумок — під значенням. Раніше це був
flex із wrap, і рядок «переплата» відкидало на всю ширину окремою
смугою — картка від того виглядала як сходинки. */
.dash-countries .bcol{display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;column-gap:10px;row-gap:0;padding:6px 0;position:static;
min-height:0;
border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
/* підпис малюємо з CSS за data-l: у розмітці його немає, а дублювати
шаблон заради телефону не варто */
.dash-countries .bcol::before{content:attr(data-l);grid-area:1/1;
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);white-space:normal;line-height:1.2}
.dash-countries .bcol .dk-badge{grid-area:1/2;justify-self:end;align-self:center;margin:0}
/* «ще внести» / «переплата» — під своєю плашкою, тим самим дрібним
кеглем, що й «+ у кошику» в сусідньому блоці */
.dash-countries .bcol-v{grid-area:2/2;justify-self:end;position:static;
text-align:right;margin:1px 0 0;padding:0;font-size:9.5px;line-height:1.25}
}
/* ── ТЕЛЕФОН: картка країни під одну лінійку ───────────────────────────────
Дві вимоги власника: однакова висота комірок і стадія розрахунку — ПІД
словом «Нарахування», а не під числом праворуч. */
@media (max-width:920px){
/* Уся картка — одна сітка «підпис | значення» на два рядки:
рядок 1: назва показника | число
рядок 2: уточнення зліва | уточнення справа
Раніше це був flex із переносом: підрядок ставав окремою смугою на всю
ширину, а стадія й розклад суми не вміщались поруч і рвались на два
рядки. Через це рядок «Нарахування» був 65 px проти 36 у сусідів —
звідси й відчуття «шалтай-балтай». Сітка тримає обидві вертикалі
жорстко: ліві підписи по одній лінії, усі числа — по іншій. */
.dash-countries .dc-metrics .m{display:grid;
grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
column-gap:12px;row-gap:0;padding:8px 0;min-height:0}
.dash-countries .dc-metrics .m .l{grid-area:1/1;align-self:baseline;flex:none}
.dash-countries .dc-metrics .m > b{grid-area:1/2;justify-self:end;margin:0}
/* обгортка підрядка розчиняється — її частини стають клітинками сітки,
тож стадія стоїть точно під словом «Нарахування», а розклад суми —
точно під самим числом, і ніколи не наїжджають одне на одне */
.dash-countries .dc-metrics .m-sub:not(.m-basket){display:contents}
.dash-countries .dc-metrics .m-sub .ms-stage{grid-area:2/1;justify-self:start;
text-align:left}
.dash-countries .dc-metrics .m-sub .ms-l:not(.ms-stage){grid-area:2/2;
justify-self:end;text-align:right;font-size:9.5px;font-weight:700;
color:var(--muted);line-height:1.25;font-variant-numeric:tabular-nums}
}
/* Цифра боргу/запасу минулих — у тому ж кольорі, що й слово поруч:
борг червоним, запас зеленим. Раніше кольорове було лише слово, а саме
число лишалось сірим — око чіплялося за підпис, а не за суму. */
.dc-metrics .m-carryv{font-weight:700;color:var(--bad);font-variant-numeric:tabular-nums}
.dc-metrics .m-carryv.neg{color:var(--good)}
/* Стадія розрахунку — дрібніша за решту підрядка. Негативних відступів тут
бути НЕ МОЖЕ: у .m-sub стоїть overflow:hidden, і рядок, зсунутий вище своєї
коробки, просто обрізається навпіл роздільною лінією. «Ближче до назви»
дає сам кегль 9px і щільний line-height. */
.dc-metrics .ms-stage{font-size:9px;letter-spacing:.01em;line-height:1.15;
opacity:.85}
@media (max-width:920px){
/* «+ у кошику» — друга клітинка другого рядка, під самою цифрою внеску */
.dash-countries .dc-metrics .m-sub.m-basket{grid-area:2/2;justify-self:end;
margin:1px 0 0}
/* Овали однакової ШИРИНИ, а не лише висоти: інакше їхні ліві краї
стрибали (105 px проти 136 px) і два сусідні рядки виглядали кривими.
Слово в овалі на телефоні ховаємо — воно дослівно повторює підпис
рядка ліворуч («Виконання бюджету» → «96% бюджету»). */
.dash-countries .bcol .dk-badge{display:inline-flex;align-items:center;
justify-content:center;height:24px;min-width:76px;padding:0 12px;line-height:1}
.dash-countries .bcol .dk-badge i{display:none}
}
/* Слово в овалі — не курсив (тег узятий лише щоб ховати його на телефоні) */
.dash-countries .bcol .dk-badge i{font-style:normal}
/* Плашка як скляний чіп: тонкий кант і легка заливка того ж кольору замість
голого контуру. Контур сам по собі кричав гучніше за числа поруч. */
.dash-countries .bcol .dk-badge{
background:color-mix(in srgb,currentColor 11%,var(--panel));
border-color:color-mix(in srgb,currentColor 34%,transparent)}
/* «+ у кошику» — дрібним рядком під самою цифрою внеску, по правому краю,
іконка впритул до тексту й нічого не переносить. */
.dc-metrics .m-sub.m-basket{display:block;text-align:right;white-space:nowrap;
font-size:9.5px;font-weight:700;color:var(--muted);overflow:visible}
.dc-metrics .m-sub.m-basket .ic-bskt{width:10px;height:10px;vertical-align:-1px;
margin-right:2px}
/* останній стовпчик (Різниця) і числа клітинок — строго під лінійку */
.cmr-w .cmr-row > .num:last-child .tabnum{display:inline-block;min-width:88px}
.cmr-w .cmr-row .agg-cell .tabnum{display:inline-block;min-width:88px}
/* Болт/Глово: сума, під нею дата виплати, під нею комісія — нічого не ріжемо */
.pay-cell{display:block;margin-bottom:6px}
.pay-cell:last-child{margin-bottom:0}
.pay-cell .tabnum{display:block;min-width:0}
.pay-when{display:block;overflow:visible;text-overflow:clip;font-weight:600}
.pay-cell .agg-comm{display:block;overflow:visible;text-overflow:clip}
/* Болт/Глово: рядок 1 — переказ на ФОП, рядок 2 — комісія (відсоток у дужках).
Колір рядків: зелений — проведено, червоний — аномалія (не проведено). */
.pay-cell .pay-sum{display:block;font-weight:700}
.pay-cell .pay-comm{display:block;font-weight:600;font-size:11.5px;color:var(--muted)}
.pay-cell.ok .pay-sum{color:var(--good)}
.pay-cell.bad .pay-sum,.pay-cell.bad .pay-comm{color:var(--bad)}
.pay-cell.done .pay-sum{color:var(--ink-soft)}
/* Перебиваємо давніше правило .cmr-w .cmr-row .agg-cell .tabnum{display:inline-block;
min-width:88px} — воно мало вищу вагу й тримало обидві цифри в один рядок,
через що комісія з відсотком вилазила в сусідню колонку. */
.cmr-w .cmr-row .pay-cell .pay-sum,
.cmr-w .cmr-row .pay-cell .pay-comm{display:block;min-width:0;white-space:nowrap}
.cmr-w .cmr-row .pay-cell{white-space:normal}
/* прочерк у факті — клікабельний: «витрати не було» ставить підтверджений нуль */
.zf{cursor:pointer;color:var(--muted,#8a8880);border-bottom:1px dashed transparent}
.zf:hover{color:var(--accent-ink,#2a78d6);border-bottom-color:currentColor}
.zf.on{color:var(--ink,#0b0b0b);font-weight:600}
.zf.ro{cursor:default}
.zf.ro:hover{color:var(--muted,#8a8880);border-bottom-color:transparent}
/* ── План/факт місяць до місяця ─────────────────────────────────────────
Матриця «канал × місяць»: план, факт, виконання. Звичайна таблиця, а не
grid, бо кількість колонок залежить від глибини історії. */
.pf-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;
background:var(--panel);box-shadow:var(--shadow)}
table.pft{border-collapse:collapse;width:100%;min-width:760px;font-size:12.5px}
table.pft th,table.pft td{padding:7px 9px;border-bottom:1px solid var(--line);
white-space:nowrap}
table.pft thead th{background:var(--panel-2);font-size:10px;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);font-weight:700}
table.pft th.pf-m{text-align:center;border-left:1px solid var(--line-strong)}
table.pft th.pf-m.on{color:var(--accent-ink)}
table.pft th.pf-y{text-align:center;border-left:1px solid var(--line-strong);
color:var(--accent-ink)}
table.pft .num{text-align:right;font-variant-numeric:tabular-nums}
table.pft td.pf-ch{font-weight:600;position:sticky;left:0;background:var(--panel)}
table.pft tbody tr:hover td{background:var(--panel-2)}
table.pft tfoot td{background:var(--panel-2);font-weight:700;
border-top:1px solid var(--line-strong)}
table.pft .good{color:var(--good);font-weight:700}
table.pft .bad{color:var(--bad);font-weight:700}
table.pft td.pf-why{white-space:normal;color:var(--muted);font-size:11.5px;
max-width:340px}
.pf-src{font-style:normal;font-size:9px;text-transform:uppercase;margin-left:5px;
padding:1px 4px;border-radius:5px;background:var(--panel-2);color:var(--muted);
border:1px solid var(--line)}
.pf-src.s-кабінет{color:var(--accent-ink)}
.pf-src.s-каса{color:var(--good)}
.pf-st{font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-left:8px;
padding:2px 8px;border-radius:8px;border:1px solid var(--line);vertical-align:middle}
.pf-st.ok{color:var(--good);border-color:var(--good)}
.pf-st.wait{color:var(--warn);border-color:var(--warn)}
.pf-st.draft{color:var(--muted)}
.pf-bar{gap:12px;flex-wrap:wrap}
table.pfe{margin-top:10px;border:1px solid var(--line);border-radius:14px}
table.pfe input.inl{width:88px;text-align:right}
.pf-gap{font-style:normal;margin-left:4px;color:var(--warn);font-weight:700;cursor:help}
/* KPI команди: та сама таблиця, що в план/факті, плюс рядок «ворота закриті» */
table.kpit td.kpi-o{color:var(--muted)}
table.kpit tr.kpi-g td{background:color-mix(in srgb,var(--warn) 8%,transparent);
color:var(--warn);font-size:11.5px;white-space:normal;border-bottom:1px solid var(--line)}
table.kpit input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
.kpi-w .mk-row{grid-template-columns:minmax(150px,1fr) minmax(0,3fr)}
.kpi-why{white-space:normal;font-size:12px;color:var(--muted);line-height:1.5}
.kpi-why b{color:var(--ink)}
.kpi-why i{display:block;margin-top:3px;font-style:normal;color:var(--accent-ink)}
.kpi-head{margin-top:12px;padding:11px 15px;border:1px solid var(--line);
border-left:4px solid var(--accent);border-radius:12px;background:var(--panel);
box-shadow:var(--shadow);font-size:13px;line-height:1.6}
.kpi-head .good{color:var(--good)}
.kpi-head .bad{color:var(--bad)}
/* ══ Вкладка «Взаємозаліки» ═══════════════════════════════════════════════
Одна сітка й одна шкала відступів (--sp-*): картка операції — скляна
панель як на дашборді; усередині чотири рівні колонки (три ланки і
«куди зараховано»). Ієрархія — вагою і сірими тонами, один акцент. */
.vz-page{container-type:inline-size;font-size:13px}
.vz-page .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* шапка сторінки: назва + одна фраза, дії праворуч */
.vz-head{display:flex;gap:var(--sp-4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:0 0 var(--sp-4)}
.vz-head .dash-h{margin:0 0 var(--sp-1)}
.vz-lead{color:var(--ink-soft);font-size:13px;margin:0}
.vz-head-a{display:flex;gap:var(--sp-3);align-items:center;flex:none}
/* кнопки — одна форма на всю вкладку */
.vz-btn{font:inherit;font-size:12.5px;font-weight:600;line-height:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;white-space:nowrap}
.vz-btn:hover{border-color:var(--accent)}
.vz-btn.primary{background:var(--accent-ink);color:#fff;border-color:transparent}
.vz-btn.primary:hover{background:var(--brand-mid)}
.vz-btn:disabled{opacity:.6;cursor:wait}
.vz-state{font-size:12px;color:var(--muted)}
/* KPI — ті самі плитки, що на дашборді */
.vz-kpi{margin-bottom:var(--sp-4)}
.vz-kpi .dk-v.bad{color:var(--bad)}
/* статуси проводок: контур, без заливки */
.vz-st{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;white-space:nowrap;line-height:1.5;vertical-align:middle}
.vz-st.ok{color:var(--good);border:1px solid var(--good)}
.vz-st.wait{color:var(--warn);border:1px solid var(--warn)}
.vz-st.bad{color:var(--bad);border:1px solid var(--bad)}
.vz-st.mute{background:var(--line);color:var(--muted)}
.ok-t{color:var(--good)} .bad-t{color:var(--bad)}
/* скляна панель — інструкція, підказка, борги, таблиця по містах */
.vz-panel{margin:0 0 var(--sp-4);border-radius:var(--radius);background:var(--glass-fill);border:1px solid var(--glass-bord);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow);overflow:clip}
.vz-panel>summary,.vz-panel-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);list-style:none;flex-wrap:wrap}
.vz-panel>summary{cursor:pointer}
.vz-panel>summary::-webkit-details-marker{display:none}
.vz-panel-t{font-weight:700;font-size:13px;color:var(--ink)}
.vz-panel-n{font-size:12px;color:var(--muted);flex:1 1 240px;min-width:0}
.vz-chev{color:var(--muted);font-size:16px;line-height:1;transition:transform .18s;flex:none;margin-left:auto}
details[open]>summary .vz-chev{transform:rotate(90deg)}
.vz-panel-b{padding:0 var(--sp-4) var(--sp-4);line-height:1.5}
.vz-empty{color:var(--ink-soft);padding-top:0}
.vz-empty-big{padding:var(--sp-6) var(--sp-4);color:var(--ink-soft);text-align:center}
/* підказка й легенда */
.vz-howto{margin:0 0 var(--sp-3);padding-left:20px}
.vz-howto li{margin:0 0 var(--sp-1)}
.vz-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--sp-2) var(--sp-4);color:var(--ink-soft);font-size:12.5px}
.vz-legend .vz-st{margin-right:6px}
.vz-legend .vzl-place,.vz-legend .vzl-ov{display:inline-block;margin:0 6px 0 0;vertical-align:middle}
.vz-cp-l{font-size:11.5px;font-weight:600;color:var(--ink-soft);margin:var(--sp-2) 0 4px}
/* інструкція всередині панелі */
.vz-instr-b h2{font-size:14px;margin:var(--sp-4) 0 var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--line)}
.vz-instr-b p{margin:0 0 var(--sp-2)}
.vz-instr-b ul,.vz-instr-b ol{margin:0 0 var(--sp-3);padding-left:20px}
.vz-instr-b li{margin:0 0 var(--sp-1)}
.vz-instr-b code{font-family:var(--font-mono);font-size:12px;background:var(--line);padding:0 4px;border-radius:4px;white-space:normal;word-break:break-word}
.vz-instr-b table{border-collapse:collapse;width:100%;font-size:12.5px}
.vz-instr-b th{text-align:left;font-size:11px;color:var(--muted);padding:var(--sp-1) var(--sp-2) var(--sp-1) 0;border-bottom:1px solid var(--line)}
.vz-instr-b td{padding:var(--sp-2) var(--sp-2) var(--sp-2) 0;border-bottom:1px solid var(--line);vertical-align:top;min-width:0}
.vz-instr-b td.w{width:26%;color:var(--ink-soft)}
.vz-instr-b .scroller{overflow-x:auto}
.vz-instr-b svg{max-width:100%;height:auto;color:var(--ink)}
/* борги: рядок = боржник → кредитор · операції · сума праворуч */
.vz-debt-list{padding:0 var(--sp-4) var(--sp-2)}
.vz-debt{border-top:1px solid var(--line)}
.vz-debt>summary{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(120px,auto) 16px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;cursor:pointer;list-style:none}
.vz-debt>summary::-webkit-details-marker{display:none}
.vz-debt-n{font-size:12px;color:var(--muted);white-space:nowrap}
.vz-debt-sum{font-weight:800;font-size:15px;text-align:right;white-space:nowrap}
.vz-debt-b{padding:0 0 var(--sp-3)}
.vz-debt-ops{border-collapse:collapse;width:100%;font-size:12.5px;margin:0 0 var(--sp-2)}
.vz-debt-ops td{padding:var(--sp-1) var(--sp-2) var(--sp-1) 0;border-bottom:1px dashed var(--line);vertical-align:top}
.vz-debt-ops td.m{color:var(--muted);white-space:nowrap;width:64px}
.vz-debt-ops td.num{text-align:right;white-space:nowrap;font-weight:600}
.vz-debt-how{font-size:12px;color:var(--ink-soft);margin:0 0 var(--sp-1)}
/* секція операцій */
.vz-sec{font-family:var(--font-display);font-weight:400;font-size:16px;margin:var(--sp-6) 0 var(--sp-3);color:var(--ink)}
.vz-sec-n{font-size:12px;color:var(--muted);margin-left:var(--sp-3)}
/* картка операції */
.vz-card{position:relative;margin:0 0 var(--sp-4);padding:var(--sp-4);border-radius:var(--radius);background:var(--glass-fill);border:1px solid var(--glass-bord);
-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),var(--glass-shadow);display:flex;flex-direction:column;gap:var(--sp-3)}
.vz-card-h{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.vz-card-t{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 320px;min-width:0;flex-wrap:wrap;font-size:15px}
.vz-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.vz-card.ok .vz-dot{background:var(--good)} .vz-card.bad .vz-dot{background:var(--bad)} .vz-card.wait .vz-dot{background:var(--warn)}
.vz-card-who{white-space:nowrap}
.vz-chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap;line-height:1.5}
.vz-chip.acc{background:var(--accent-ink);color:#fff;border-color:transparent}
.vz-chip.ok{color:var(--good);border-color:var(--good)}
.vz-card-sum{font-size:18px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;margin-left:auto}
.vz-chev-btn{font:inherit;font-size:18px;line-height:1;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;transition:transform .18s;padding:0 0 2px}
.vz-chev-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.vz-chev-btn[aria-expanded="true"]{transform:rotate(90deg)}
.vz-card-sub{margin:0;color:var(--ink-soft);font-size:12.5px}
.vz-card-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-right:var(--sp-2)}
/* редактор бачення — один рядок на всю ширину картки */
.vz-editor{padding:var(--sp-3) var(--sp-4);border-radius:12px;background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2)}
.vz-editor-row{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap}
.vz-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:clip;flex:none}
.vz-mkb{font:inherit;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;height:30px;padding:0 var(--sp-3);border:0;border-left:1px solid var(--line-strong);background:var(--panel);cursor:pointer;color:var(--ink-soft);line-height:1}
.vz-mkb:first-child{border-left:0}
.vz-mkb.on{background:var(--accent-ink);color:#fff}
.vz-f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;min-width:0}
.vz-f.grow{flex:1 1 260px}
.vz-f>span{text-align:left;align-self:flex-start}
.vz-city,.vz-art{font:inherit;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;padding:6px var(--sp-2);border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);line-height:1.3;height:32px}
.vz-city{max-width:190px}
.vz-art{width:100%}
.vz-acts{display:flex;gap:var(--sp-2);align-items:center;height:32px}
.vz-preview{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.vz-code{font-family:var(--font-mono);font-size:12px;background:var(--line);padding:4px 8px;border-radius:6px;white-space:normal;word-break:break-word}
.vz-code mark{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-ink);border-radius:3px;padding:0 2px;font-weight:700}
.vz-acts .vz-btn:disabled{opacity:.4;cursor:default}
/* чотири рівні колонки: ланки 1–3 і «куди зараховано» */
.vz-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);align-items:stretch}
.vz-step{min-width:0;padding:var(--sp-3);border-radius:12px;background:color-mix(in srgb,var(--panel) 62%,transparent);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2)}
.vz-step-h{display:flex;align-items:flex-start;gap:var(--sp-2);min-height:40px}
.vz-n{flex:none;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;background:var(--muted)}
.vz-step.ok .vz-n{background:var(--good)} .vz-step.bad .vz-n{background:var(--bad)} .vz-step.wait .vz-n{background:var(--warn)}
.vz-n.dest{background:var(--accent-ink)}
.vz-step-t{font-weight:700;font-size:12.5px;line-height:1.35;color:var(--ink)}
/* проводка всередині ланки */
.vzl{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--sp-2);border-bottom:1px dashed var(--line)}
.vzl-sum{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:13px}
.vzl-flag{font-size:12px}
.vz-nat{color:var(--muted);font-size:11.5px}
.vzl-date{color:var(--muted);font-size:11.5px;margin-left:auto}
.vzl-acc{color:var(--ink-soft);font-size:12px}
.vzl-arr{color:var(--muted)}
.vzl-cm{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--ink);white-space:normal;word-break:break-word;overflow-wrap:anywhere;line-height:1.4}
.vzl-meta{color:var(--muted);font-size:11px}
.vzl-ov{color:var(--accent,#2563eb);margin-top:2px}
.vzl-cnt{color:var(--muted);font-weight:400;font-size:11px}
.vzl-place{align-self:flex-start;width:max-content;margin:0 0 var(--sp-2);padding:1px 7px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:600;letter-spacing:.01em}
.vzl-place.off{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad)}
/* вердикт і готовий коментар з кнопкою */
.vz-ok{color:var(--good);font-size:12px;font-weight:600}
.vz-miss{color:var(--bad);font-size:12px;font-weight:700}
.vz-how{font-size:12px;color:var(--ink-soft)}
.vz-dash{color:var(--muted);font-size:12px}
.vz-cp{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:10px;overflow:clip;background:var(--panel)}
.vz-cp code{flex:1 1 auto;min-width:0;font-family:var(--font-mono);font-size:11.5px;padding:6px var(--sp-2);white-space:normal;word-break:break-word;overflow-wrap:anywhere;line-height:1.4}
.vz-copy{flex:none;font:inherit;font-size:11.5px;font-weight:600;padding:0 var(--sp-3);border:0;border-left:1px solid var(--line-strong);background:var(--panel-2);color:var(--accent-ink);cursor:pointer}
.vz-copy.done{color:var(--good)}
.vz-cp mark{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad);border-radius:3px;padding:0 1px;font-weight:700}
.vz-diffhint{font-weight:400;color:var(--muted)}
/* колонка «куди зараховано» */
.vz-dest-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.vz-dest-i{font-size:12.5px;color:var(--ink-soft)}
.vz-after{font-size:12.5px;color:var(--ink);font-weight:600}
.vz-todo{font-size:12.5px;color:var(--ink);padding:var(--sp-3);border-radius:12px;border:1px dashed var(--warn)}
.vz-todo ol{margin:var(--sp-1) 0 0;padding-left:20px}
.vz-todo li{margin:0 0 2px}
/* таблиця по містах: стовпчик на місто, картки однакової ширини */
.vz-ctp .vz-panel-h{align-items:center}
.vz-cf{font:inherit;font-size:12.5px;padding:6px var(--sp-3);border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);min-width:280px;height:32px;margin-left:auto}
.vz-ct{border-collapse:separate;border-spacing:0;font-size:12px;min-width:0}
.vz-ct th{text-align:left;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;min-width:260px;max-width:320px;white-space:nowrap}
.vz-ct th:last-child,.vz-ct td:last-child{border-right:0}
.vz-ct-c{font-weight:700;font-size:13px}
.vz-ct-cc{font-size:11px;color:var(--muted);margin-left:6px}
.vz-ct-n{float:right;padding:0 7px;border-radius:9px;background:var(--line);color:var(--muted);font-size:11px;font-weight:700;line-height:1.6}
.vz-ct td{padding:0 var(--sp-3) var(--sp-2);vertical-align:top;border-right:1px solid var(--line);min-width:260px;max-width:320px}
.vz-ci{display:flex;flex-direction:column;gap:2px;padding:var(--sp-2) 0;border-bottom:1px dashed var(--line)}
.vz-ci:last-child{border-bottom:0}
/* телефон і планшет: міряємо саму секцію (iPhone у медіа-запиті бреше) */
@container (max-width:1040px){
.vz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:620px){
.vz-steps{grid-template-columns:minmax(0,1fr)}
.vz-card-sum{margin-left:0}
.vz-legend{grid-template-columns:1fr}
.vz-debt>summary{grid-template-columns:minmax(0,1fr) auto 16px}
.vz-debt-n{display:none}
.vz-cf{min-width:0;width:100%;margin-left:0}
}
@media (max-width:1040px){.vz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
.vz-steps{grid-template-columns:minmax(0,1fr)}
.vz-card-sum{margin-left:0}
.vz-legend{grid-template-columns:1fr}
.vz-debt>summary{grid-template-columns:minmax(0,1fr) auto 16px}
.vz-debt-n{display:none}
.vz-cf{min-width:0;width:100%;margin-left:0}
}
@media (prefers-color-scheme:dark){
html:not([data-theme]) .vz-panel,html:not([data-theme]) .vz-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--glass-shadow)}
}