/* ============================================================
   STACK — Global Stylesheet
   Fonts: Unbounded (headers) + Geologica (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Geologica:wght@300;400;500;600&display=swap');

:root {
    /* Layout */
    --sidebar-width: 280px;

    /* Brand colors */
    --navy:          #0f1e3d;
    --navy-mid:      #1a2f57;
    --navy-light:    #1e3a6e;
    --blue:          #1e4fc2;
    --blue-light:    #3b6ef5;
    --accent:        #e8a020;
    --accent-light:  rgba(232,160,32,0.15);

    /* UI colors */
    --bg:            #f5f7fb;
    --surface:       #ffffff;
    --border:        #dde3f0;
    --border-light:  #eef1f8;

    /* Text */
    --text:          #0f1e3d;
    --text-muted:    #6b7a99;
    --text-light:    #9aa3be;
    --sidebar-text:  #8fa3cc;

    /* Semantic */
    --danger:        #d63b3b;
    --danger-bg:     #fff1f1;
    --success:       #1a8a5a;
    --success-bg:    #e8f5ee;
    --warning:       #d97706;

    /* Form */
    --field-bg:      #f0f3fa;
    --field-focus-bg: #ffffff;
    --field-focus-border: var(--blue-light);
    --field-focus-shadow: 0 0 0 4px rgba(59,110,245,0.1);

    /* Radii */
    --radius-sm:     8px;
    --radius:        12px;
    --radius-lg:     16px;
    --radius-xl:     20px;

    /* Shadows */
    --shadow-sm:     0 1px 3px rgba(15,30,61,0.06);
    --shadow:        0 4px 16px rgba(15,30,61,0.08);
    --shadow-lg:     0 10px 32px rgba(15,30,61,0.10);

    /* Transitions */
    /* ⚠️ БУЛО `all 0.25s` і вживалося 272 рази — тобто майже весь продукт анімував
       БУДЬ-ЯКУ зміну будь-якої властивості. Три наслідки: непрохані анімації там, де
       автор правки жодної анімації не писав; неможливість передбачити, що саме
       рухатиметься; і 250 мс на відгук кнопки замість миттєвого.
       Тепер перелік явний. Звуження безпечне за ВИМІРЮВАННЯМ: жодне станове правило
       (:hover / .open / .active / .selected / :focus) не анімує через цю змінну
       розкладкову властивість — 0 таких на 206 селекторів.
       ⚠️ `transform` навмисно ШВИДШИЙ за решту (120 мс): рух має встигати за
       пальцем, а колір може згасати повільніше. */
    --transition:    background 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                     color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                     box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                     fill 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    cursor: pointer;
    accent-color: var(--blue);
    flex-shrink: 0;
}

body {
    font-family: 'Geologica', sans-serif;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;          /* фіксована висота viewport — щоб flex-chain обмежував висоту */
    overflow: hidden;       /* скрол — у .content-area (overflow-y:auto), не в body */
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(170deg, #1c2f55 0%, #0f1e3d 40%, #091529 100%);
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: 4px 0 32px rgba(0,0,0,0.28), inset -1px 0 0 rgba(255,255,255,0.05);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 10;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
}

.sidebar-header {
    padding: 20px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-header-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.sidebar-logo-mark {
    height: 20px;
    width: auto;
    flex-shrink: 0;
    display: block;
}

.sidebar-logo-text {
    font-family: 'Unbounded', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1;
    color: white;
}

.sidebar-logo-text span { color: var(--accent); }

.sidebar-toggle-btn {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sidebar-toggle-btn:hover { background: rgba(255,255,255,0.16); color: white; }

.sidebar-toggle-btn .material-icons-round {
    font-size: 18px;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}

.menu-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Nav sections & dividers */
.nav-section { padding: 4px 0; }

.nav-divider {
    height: 1px;
    margin: 6px 16px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* Secondary and system sections — visually lighter */
.nav-section--secondary .group-title,
.nav-section--secondary .menu-item--standalone {
    font-size: 13.5px;
    color: rgba(255,255,255,0.65);
}
.nav-section--secondary .group-title .material-icons-round {
    font-size: 18px;
    color: rgba(255,255,255,0.35);
}

.nav-section--system .group-title,
.nav-section--system .menu-item--standalone {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.nav-section--system .group-title .material-icons-round {
    font-size: 17px;
    color: rgba(255,255,255,0.28);
}

.menu-scroll::-webkit-scrollbar { width: 4px; }
.menu-scroll::-webkit-scrollbar-track { background: transparent; }
.menu-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.menu-group {
    border-bottom: none;
    padding: 2px 0;
}

.group-header {
    padding: 10px 14px;
    margin: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    user-select: none;
}

.group-header:hover {
    background: rgba(255,255,255,0.07);
    transform: translateX(2px);
}
@media (hover: none) { .group-header:hover { transform: none; } }
.group-header:hover .group-title { color: white; }
.group-header:hover .arrow-icon { color: rgba(255,255,255,0.7); }

.group-title {
    font-family: 'Geologica', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255,255,255,0.88);
    display: flex;
    align-items: center;
    gap: 11px;
    transition: color 0.15s;
}

.arrow-icon {
    font-size: 20px;
    color: rgba(255,255,255,0.45);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.15s;
    flex-shrink: 0;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    /* ⚠️ visibility ОБОВ'ЯЗКОВА разом із max-height: 0. Без неї посилання
       ЗГОРНУТОГО меню лишаються в порядку Tab: фокус провалюється в обрізаний блок,
       на екрані його не видно, і клавіша Tab виглядає як зламана. Затримка 0.3s
       тримає пункти видимими, доки грає згортання; при розкритті знімається миттєво. */
    visibility: hidden;
    background: transparent;
    transition: max-height 0.3s ease-out, visibility 0s linear 0.3s;
    padding: 0 0 4px;
    position: relative;
}

/* Vertical track line */
.submenu::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 4px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
    border-radius: 1px;
    pointer-events: none;
}

.menu-group.open .submenu {
    max-height: 500px;
    visibility: visible;
    transition: max-height 0.3s ease-out, visibility 0s;
}
/* ⚠️ Колір кільця фокуса задається ЗМІННОЮ і успадковується вниз по дереву, тож
   темні поверхні перевизначають його один раз на контейнер, а не на кожен елемент.
   Сайдбар темний: синє кільце дає на ньому лише 3.72:1 і майже не видно, акцентне —
   7.44:1. Відʼємний зсув тримає кільце всередині: сайдбар вузький, назовні воно
   обрізалося б краєм. */
.sidebar {
    --focus-ring: var(--accent);
    --focus-ring-offset: -2px;
}
.group-header:focus-visible,
.menu-item:focus-visible,
.menu-item--standalone:focus-visible { border-radius: var(--radius-sm); }
.tech-profile-item:focus-visible { --focus-ring-offset: -2px; }

.menu-group.open .arrow-icon { transform: rotate(180deg); color: rgba(255,255,255,0.7); }
.menu-group.open .group-title { color: white; }
.menu-group.open .group-title .material-icons-round { color: var(--accent); }

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 18px;
    margin: 1px 8px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.menu-item .material-icons-round { font-size: 17px; flex-shrink: 0; transition: color 0.15s; color: rgba(255,255,255,0.4); }
.menu-item-text { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-item:hover {
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    transform: translateX(3px);
}
@media (hover: none) { .menu-item:hover { transform: none; } }

.menu-item:hover .material-icons-round { color: rgba(255,255,255,0.75); }

.menu-item.active {
    color: var(--accent);
    font-weight: 500;
    background: linear-gradient(90deg, rgba(232,160,32,0.18) 0%, rgba(232,160,32,0.07) 100%);
    box-shadow: inset 3px 0 0 var(--accent);
}

.menu-item.active .material-icons-round { color: var(--accent); }
.menu-item.active::before { display: none; }

.menu-item--standalone {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    margin: 2px 8px;
    font-family: 'Geologica', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.menu-item--standalone .material-icons-round { font-size: 20px; flex-shrink: 0; transition: color 0.15s; color: rgba(255,255,255,0.55); }
.menu-item--standalone:hover .material-icons-round { color: rgba(255,255,255,0.9); }
.menu-item--standalone.active .material-icons-round { color: var(--accent); }
.group-title .material-icons-round { font-size: 20px; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.group-title-text { white-space: nowrap; }
.group-flyout-label { display: none; }
.menu-item--standalone:hover {
    background: rgba(255,255,255,0.08);
    color: white;
    transform: translateX(3px);
}
@media (hover: none) { .menu-item--standalone:hover { transform: none; } }
.menu-item--standalone.active {
    color: var(--accent);
    font-weight: 600;
    background: rgba(232,160,32,0.13);
}
.menu-item--standalone.active::before { display: none; }

.badge {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

/* SIDEBAR FOOTER */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.promo-banner {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.promo-banner:hover { background: rgba(255,255,255,0.1); }
.promo-banner strong { display: block; color: white; font-weight: 500; font-size: 13px; }
.promo-banner-text { display: flex; flex-direction: column; }

/* ── COLLAPSED SIDEBAR ──────────────────────────────────────────────────── */

.sidebar.collapsed { width: 64px; }

/* Reset translateX lift in collapsed mode — no room for it */
.sidebar.collapsed .menu-item:hover,
.sidebar.collapsed .menu-item--standalone:hover,
.sidebar.collapsed .group-header:hover { transform: none; }

/* Nav sections: no horizontal margin in collapsed mode */
.sidebar.collapsed .nav-section { padding: 2px 0; }
.sidebar.collapsed .nav-divider { margin: 4px 8px; }

/* Header */
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 18px 0; }
.sidebar.collapsed .sidebar-header-logo { display: none; }
.sidebar.collapsed .sidebar-toggle-btn .material-icons-round { transform: rotate(180deg); }

/* Group headers: icon only, centered, no arrow */
.sidebar.collapsed .group-header { justify-content: center; padding: 14px 0; }
.sidebar.collapsed .group-title { gap: 0; }
.sidebar.collapsed .group-title-text { display: none; }
.sidebar.collapsed .arrow-icon { display: none; }
.sidebar.collapsed .group-title .material-icons-round { font-size: 20px; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.sidebar.collapsed .group-header:hover .group-title .material-icons-round { color: rgba(255,255,255,0.9); }

/* Standalone items: icon only, centered */
.sidebar.collapsed .menu-item--standalone { justify-content: center; padding: 8px 0; margin: 1px 0; border-radius: 0; }
.sidebar.collapsed .menu-item--standalone .menu-item-text { display: none; }

/* Tooltip for standalone items */
.sidebar.collapsed .menu-item--standalone::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy-mid);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 300;
    box-shadow: 4px 4px 16px rgba(0,0,0,.35);
    transition: opacity 0.15s;
}
.sidebar.collapsed .menu-item--standalone:hover::after { opacity: 1; }

/* Hide vertical track line and active stripe in collapsed mode */
.sidebar.collapsed .submenu::before { display: none; }
.sidebar.collapsed .menu-item.active,
.sidebar.collapsed .menu-item--standalone.active {
    background: rgba(232,160,32,0.18);
    box-shadow: none;
}

/* Flyout submenus on hover */
.sidebar.collapsed .menu-group { position: relative; }
.sidebar.collapsed .submenu {
    position: absolute !important;
    left: 64px !important;
    top: 0 !important;
    min-width: 210px;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    background: var(--navy-mid);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 6px 0 24px rgba(0,0,0,.4);
    z-index: 200;
    transition: max-height 0.2s ease !important;
}
/* ⚠️ `:focus-within` поруч із `:hover` обов'язковий: у згорнутому сайдбарі підменю
   показується лише під мишею, а миші в клавіатурного користувача немає — без цього
   рядка згорнутий сайдбар для нього повністю глухий. */
.sidebar.collapsed .menu-group:hover .submenu,
.sidebar.collapsed .menu-group:focus-within .submenu {
    max-height: 500px !important;
    visibility: visible !important;
}

/* Inside flyout: show text again, reset margin/padding */
.sidebar.collapsed .menu-group:hover .submenu .menu-item,
.sidebar.collapsed .menu-group:focus-within .submenu .menu-item { padding: 8px 12px; margin: 1px 8px; }
.sidebar.collapsed .menu-group:hover .submenu .menu-item-text,
.sidebar.collapsed .menu-group:focus-within .submenu .menu-item-text { display: inline; }

/* Flyout group label */
.sidebar.collapsed .group-flyout-label {
    display: block;
    padding: 10px 20px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 2px;
}

/* Footer */
.sidebar.collapsed .sidebar-footer { padding: 10px; }
.sidebar.collapsed .promo-banner { justify-content: center; padding: 10px; }
.sidebar.collapsed .promo-banner-text { display: none; }

/* ============================================================
   MAIN WRAPPER
   ============================================================ */

.main-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* ⚠️ min-width:0 — БЕЗ нього flex-елемент має min-width:auto і НЕ стискається
       вужче за свій вміст: широка таблиця/елемент розпирає колонку ширше за viewport,
       і екран «вилазить» за край. Це універсальна причина горизонтального переповнення. */
    min-width: 0;
}

/* TOP BAR */
.top-bar {
    height: 64px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 36px;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.top-bar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
}

.logout-btn-minimal {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.logout-btn-minimal:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

/* ── Швидкий пошук «хто дзвонить» у верхній панелі ──────────────────────────
   Виконавцю телефонує незнайомий номер: він набирає останні цифри з будь-якого
   екрана і одразу бачить, хто це. Поле стоїть ЛІВОРУЧ (margin-right:auto), щоб
   не тіснити блок користувача праворуч. */
.qs-wrap {
    position: relative;
    margin-right: auto;
}
.qs-field {
    position: relative;
    display: flex;
    align-items: center;
}
.qs-icon {
    position: absolute;
    left: 12px;
    font-size: 19px;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition);
}
.qs-field:focus-within .qs-icon { color: var(--blue); }

/* Глобальні правила для input задають height:48px і padding-left:44px —
   у смузі висотою 64px це завелико, тому перекриваємо явно. */
.qs-input {
    width: 320px;
    max-width: 34vw;
    height: 38px;
    padding: 0 12px 0 38px;
    font-size: 13px;
    margin-bottom: 0;
    background: var(--bg);
    border: 1.5px solid transparent;
    transition: width .18s ease, border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.qs-input:focus {
    background: var(--surface);
    border-color: var(--blue-light);
}

.qs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 360px;
    max-width: 460px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 9100;
    padding: 4px 0;
    display: none;
}
.qs-dropdown.open { display: block; }

.qs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background .1s;
}
.qs-item--active,
.qs-item:hover { background: var(--bg); }

.qs-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.qs-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qs-item-phone {
    font-size: 12px;
    color: var(--text-muted);
}
.qs-item-weight {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--blue);
    background: var(--field-bg);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

/* ⚠️ «Нічого не знайдено» і «пошук не спрацював» — РІЗНІ стани й різний вигляд
   (правило №46): порожній результат не має маскувати несправність. */
.qs-empty,
.qs-error,
.qs-hint {
    padding: 10px 14px;
    font-size: 12px;
}
.qs-empty { color: var(--text-muted); }
.qs-error { color: var(--danger); }
.qs-hint {
    color: var(--text-light);
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
}

/* Вузький екран: поле згортається до іконки й розкривається у фокусі.
   ⚠️ Клас `.qs-wrap--open` ставить JS (focus / непорожнє значення), а не лише
   `:focus`: інакше поле з уже набраним текстом схлопувалось би, щойно людина
   клацнула в список результатів, і вона переставала б бачити свій запит. */
@media (max-width: 900px) {
    .qs-input { width: 42px; max-width: none; padding-right: 4px; }
    .qs-input:focus,
    .qs-wrap--open .qs-input { width: 240px; }
    .qs-dropdown { min-width: 260px; }
}

/* Топбар — шестерня технічного профілю */
.topbar-icon-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.topbar-icon-btn:hover { color: var(--navy); background: var(--bg); }
.topbar-icon-btn.active { color: var(--navy); background: var(--bg); }

/* Дропдаун технічного профілю */
.tech-profile-dropdown {
    position: fixed;
    top: 52px;
    right: 16px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 9100;
    min-width: 220px;
    padding: 6px 0;
    display: none;
}
.tech-profile-dropdown.open { display: block; }
.tech-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: background .1s;
}
.tech-profile-item .material-icons-round { font-size: 18px; color: var(--text-muted); }
.tech-profile-item:hover { background: var(--bg); }
.tech-profile-item--muted { color: var(--text-muted); }
.tech-profile-item--muted:hover { background: none; }
.tech-profile-item--danger { color: var(--danger); }
.tech-profile-item--danger .material-icons-round { color: var(--danger); }
.tech-profile-item--danger:hover { background: #fff5f5; }
.tech-profile-divider { height: 1px; background: var(--border-light); margin: 4px 0; }

/* Модальне вікно зміни пароля */
.change-password-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9200;
    display: none;
    align-items: center;
    justify-content: center;
}
.change-password-overlay.open { display: flex; }
.change-password-modal {
    background: white;
    border-radius: var(--radius-xl);
    padding: 28px;
    width: 360px;
    max-width: 95vw;
    box-shadow: var(--shadow-lg);
}
.change-password-modal h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    color: var(--navy);
    margin: 0 0 18px;
}
.change-password-modal label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin: 12px 0 4px;
}
.change-password-modal input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}
.change-password-modal input:focus { border-color: var(--blue-light); }
.change-password-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
}
.cp-btn-cancel {
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    background: white;
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    cursor: pointer;
}
.cp-btn-save {
    padding: 8px 18px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.cp-btn-save:hover { background: var(--blue); }

/* Примусова зміна пароля (тимчасовий пароль) — overlay не закривається */
.change-password-overlay.forced { pointer-events: none; }
.change-password-overlay.forced .change-password-modal { pointer-events: auto; }
.change-password-overlay.forced .cp-btn-cancel { display: none; }
.change-password-overlay.forced .cp-force-hint {
    display: block !important;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fff8e6;
    border: 1px solid #f5c842;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: #7a5a00;
    line-height: 1.4;
}

/* CONTENT AREA */
.content-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 36px 40px;
    min-width: 0;   /* та сама причина, що й у .main-wrapper — колонка мусить могти стискатися */
}

.content-area::-webkit-scrollbar { width: 6px; }
.content-area::-webkit-scrollbar-track { background: transparent; }
.content-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

/* ============================================================
   CARDS
   ============================================================ */

.glass-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
}

/* ============================================================
   TOAST — глобальний, не дублювати в локальних <style>
   ============================================================ */

.toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--navy);
    color: white;
    padding: 14px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    /* ⚠️ ЗСУВ У ВІДСОТКАХ ВЛАСНОЇ ВИСОТИ, а не в пікселях. Було 80px — а виміряна
       висота довгого повідомлення про помилку 181px, тобто плашка проїжджала менше
       половини себе і не так їхала, як згасала. `100%` — це завжди вся її висота,
       скільки б рядків не вийшло; `+ 32px` — щоб вийти за нижній відступ. */
    transform: translateY(calc(100% + 32px));
    opacity: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.toast.show    { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--accent); }

/* ============================================================
   CARDS
   ============================================================ */

.card-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 14px;
}

.card-icon {
    width: 38px; height: 38px;
    background: #eef2ff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.card-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.02em;
}

.card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 300;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}

.input-group {
    position: relative;
    margin-bottom: 14px;
}

.input-group .material-icons-round {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 19px;
    pointer-events: none;
    transition: var(--transition);
}

.input-group:focus-within .material-icons-round {
    color: var(--blue-light);
}

input, select {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 44px;
    background: var(--field-bg);
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    transition: var(--transition);
    outline: none;
    box-sizing: border-box;
}

input::placeholder { color: var(--text-light); font-weight: 300; }

input:focus, select:focus {
    background: var(--field-focus-bg);
    border-color: var(--field-focus-border);
    box-shadow: var(--field-focus-shadow);
}

/* Поля без іконки */
.np-pib-row input,
.np-addr-row input {
    padding-left: 14px;
}

.np-pib-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.np-addr-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
}

.form-sections-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.5fr;
    gap: 28px;
    margin-bottom: 20px;
    align-items: start;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-save {
    height: 48px;
    min-width: 180px;
    padding: 0 28px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-save:hover {
    background: var(--blue);
    box-shadow: 0 6px 20px rgba(15,30,61,0.2);
    transform: translateY(-1px);
}
@media (hover: none) { .btn-save:hover { transform: none; } }

.btn-save:active {
    transform: scale(0.97);
    background: var(--blue);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0 4px;
}

/* ============================================================
   TOOLBAR & STATS
   ============================================================ */

.toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.stats-badge {
    background: #eef2ff;
    color: var(--blue);
    border: 1px solid #c5d4ff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

/* ============================================================
   TABLE
   ============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    padding: 14px 16px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
}

td {
    padding: 14px 16px;
    border-top: 1px solid var(--border-light);
    vertical-align: middle;
    font-size: 13px;
    color: var(--text);
}

table tr:hover td {
    background: rgba(59,110,245,0.025);
    transition: background 0.15s;
}

.pib-main {
    font-weight: 500;
    color: var(--navy);
    display: block;
    margin-bottom: 2px;
}

.sub-info {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    font-weight: 300;
}

.phone-link {
    cursor: pointer;
    color: var(--blue);
    font-family: 'Geologica', monospace;
    font-weight: 500;
    font-size: 13px;
}

/* ============================================================
   MESSENGER ICONS
   ============================================================ */

.chat-link-icon { transition: var(--transition); }
.chat-link-icon:hover { opacity: 0.75; transform: scale(1.12); }
@media (hover: none) { .chat-link-icon:hover { transform: none; } }
.chat-link-icon[title="telegram"] { color: #0088cc; }
.chat-link-icon[title="whatsapp"] { color: #25D366; }
.chat-link-icon[title="viber"]    { color: #7360f2; }
.chat-link-icon[title="phone"]    { color: var(--blue-light); }

/* ============================================================
   MODAL
   ============================================================ */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(10,20,50,0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ⚠️ КАНОНІЧНЕ ВІКНО. Донедавна тут жив `.modal-content`, якого не вживала
   ЖОДНА сторінка (виміряно: 1 визначення, 0 вживань), а справжні вікна описував
   `.modal-box` — клас, якого в цьому файлі не було ЗОВСІМ. Тому шість сторінок
   тримали шість власних копій, і анімація появи існувала в СЕМИ примірниках із
   ТРЬОМА різними значеннями: та сама дія відчувалась по-різному залежно від екрана.
   Тепер опис один, а сторінки лишають у себе тільки те, чим справді відрізняються
   (ширина, тло, відступ). */
.modal-box {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 32px;
    width: 90%;
    max-width: 860px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.2s ease;
}

/* ⚠️ Значення взяте з БІЛЬШОСТІ (5 сторінок із 6), щоб зведення не змінило того,
   що люди бачать щодня. Варіант адмінки (12px) і мертвий варіант цього файлу
   (20px, інша крива) відрізнялись непомітно, тож ними й пожертвувано. */
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.97) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ⚠️ ВИХІД КОРОТШИЙ ЗА ВХІД. Коли вікно відкривається, людина ще не знає, що
   всередині, і чверть секунди дає їй зорієнтуватись. Коли закриває — рішення вже
   ухвалене, і будь-яка затримка читається як гальмування. Тому 0.2с проти 0.14с.
   ⚠️ `forwards` обовʼязковий: без нього останній кадр скидається, і вікно на мить
   блимає повністю видимим перед тим, як зникнути. */
@keyframes modalOut {
    from { opacity: 1; transform: scale(1)    translateY(0);    }
    to   { opacity: 0; transform: scale(0.98) translateY(6px);  }
}

/* Клас вішає modal-exit.js на час згасання — і на саме вікно, і на тло. */
.is-closing > .modal-box,
.modal-box.is-closing { animation: modalOut 0.14s ease forwards; }
.is-closing { animation: overlayOut 0.14s ease forwards; }

/* ⚠️ БІЧНА ПАНЕЛЬ. Клік по ліду миттєво підміняв увесь список щільною панеллю —
   найрізкіший перехід у продукті. Але панель відкривають ДЕСЯТКИ РАЗІВ НА ДЕНЬ, тож
   тут потрібне не «красиво», а «не смикається»: 120 мс і зсув на 8px. Довша анімація
   на такій частоті почала б заважати.
   ⚠️ Правило живе тут, хоч сама панель описана в трьох сторінках: опис у них
   ІДЕНТИЧНИЙ, а `animation` жодна з них не задає, тож конфлікту немає. */
.side-panel.open { animation: panelIn 0.12s ease; }

@keyframes panelIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: none; }
}

/* ⚠️ ПОПАПИ. Пʼять випадайок системи зʼявлялись голим `display` — без руху й без
   звʼязку з тим, звідки вони виросли. `transform-origin: top` робить точкою росту
   верхній край, тобто саме те місце, під яким вони й розкриваються.
   ⚠️ 100 мс, а не 200: випадайку відкривають, коли вже знають, що хочуть у ній
   вибрати, і будь-яка затримка тут читається як гальмування. */
.qs-dropdown.open,
.tech-profile-dropdown.open,
.cl-dropdown.open,
.np-drop.open,
.shared-tip.open { animation: popIn 0.1s ease; transform-origin: top center; }

@keyframes popIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .side-panel.open,
    .qs-dropdown.open, .tech-profile-dropdown.open, .cl-dropdown.open,
    .np-drop.open, .shared-tip.open { animation: none; }
}

@keyframes overlayOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ⚠️ Рух прибираємо, згасання лишаємо: без переходу зовсім вікно знову зникало б
   ривком, а це і є те, що виправлялось. */
@media (prefers-reduced-motion: reduce) {
    .modal-box { animation: none; }
    .is-closing > .modal-box,
    .modal-box.is-closing { animation: modalFade 0.1s linear forwards; }
    @keyframes modalFade { to { opacity: 0; } }
}

.close-modal {
    position: absolute;
    right: 20px; top: 20px;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
    border-radius: 6px;
    padding: 2px;
}

.close-modal:hover { color: var(--danger); background: var(--danger-bg); }

/* ============================================================
   AUTH PAGES (login / register)
   ============================================================ */

.auth-card {
    background: var(--surface);
    padding: 44px 40px;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.auth-card h2 {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 28px;
    letter-spacing: 0.02em;
}

.auth-card input {
    padding-left: 44px;
    margin-bottom: 12px;
}

.btn {
    width: 100%;
    height: 52px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 4px;
}

.btn:hover {
    background: var(--blue);
    box-shadow: 0 6px 20px rgba(15,30,61,0.2);
    transform: translateY(-1px);
}
@media (hover: none) { .btn:hover { transform: none; } }

/* ============================================================
   INTEGRATION CARDS
   ============================================================ */

.integration-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    transition: var(--transition);
}

.integration-card:hover {
    box-shadow: var(--shadow);
    border-color: #c5d4ff;
}

.integration-info { display: flex; align-items: center; gap: 20px; }
.integration-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; }

.api-input-group { display: flex; gap: 10px; margin-top: 10px; }
.api-input-group input { padding-left: 14px; }

/* ── How-to instructions (integrations page) ── */
.how-to-details {
    margin-top: 10px;
}
.how-to-details summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 3px 0;
    transition: opacity .15s;
}
.how-to-details summary::-webkit-details-marker { display: none; }
.how-to-details summary:hover { opacity: .75; }
.how-to-details summary .material-icons-round { font-size: 15px; }
.how-to-chevron { transition: transform .2s; }
.how-to-details[open] .how-to-chevron { transform: rotate(180deg); }

.how-to-steps {
    margin-top: 12px;
    padding: 14px 16px;
    background: #f4f7ff;
    border: 1px solid #dce6ff;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.how-to-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
.how-to-num {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.how-to-link {
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
}
.how-to-link:hover { text-decoration: underline; }

.status-active {
    color: var(--success);
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

/* ============================================================
   VALIDATION ERRORS
   ============================================================ */

.field-error-msg {
    display: block;
    font-size: 11px;
    color: var(--danger);
    margin-top: 3px;
    margin-bottom: 2px;
    padding-left: 2px;
    line-height: 1.3;
    animation: fadeIn .15s ease;
}

/* ============================================================
   UTILITY
   ============================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* Info block (used in public pages) */
.info-block {
    background: #eef5ff;
    border: 1px solid #c5d8ff;
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
    font-size: 13px;
    color: #2a4a8a;
    line-height: 1.6;
}

/* Page title */
.page-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 300;
    margin-bottom: 24px;
}

.accordion-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
}

.accordion-toggle {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    border-bottom: 1px solid transparent;
}

.accordion-toggle:hover { background: var(--bg); }
.accordion-toggle.open { border-bottom-color: var(--border-light); }

.acc-icon {
    width: 36px; height: 36px;
    background: #eef2ff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--blue);
    font-weight: 300;
    line-height: 1;
    transition: var(--transition);
    flex-shrink: 0;
}

.acc-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
}

.acc-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 300;
    margin-top: 2px;
}

.acc-arrow {
    font-size: 24px;
    color: var(--text-muted);
    line-height: 1;
    font-weight: 300;
    transition: var(--transition);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 28px;
}

.accordion-body.open {
    max-height: 1200px;
    padding: 24px 28px;
}


/* ============================================================
   Техпідтримка — модальне вікно
   ============================================================ */

.support-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,30,61,.45);
    backdrop-filter: blur(3px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}
.support-overlay.open { display: flex; }

.support-modal {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.support-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-light);
}
.support-modal-header h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    color: var(--navy);
    margin: 0;
    flex: 1;
}
.support-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    transition: var(--transition);
}
.support-close-btn:hover { background: var(--bg); color: var(--text); }

/* Таби */
.support-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--border-light);
}
.support-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    margin-bottom: -1px;
    transition: var(--transition);
}
.support-tab:hover { color: var(--text); }
.support-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Форма */
.support-tab-panel { padding: 18px 20px; overflow-y: auto; flex: 1; }

.sf-row { margin-bottom: 14px; }
.sf-row:last-child { margin-bottom: 0; }
.sf-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}
.sf-input, .sf-select, .sf-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    color: var(--text);
    background: white;
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
    border-color: var(--blue-light);
    box-shadow: var(--field-focus-shadow);
}
.sf-textarea { min-height: 100px; resize: vertical; }
.sf-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-muted);
    transition: var(--transition);
}
.sf-file-btn:hover { border-color: var(--blue-light); color: var(--blue); }
.sf-file-btn .material-icons-round { font-size: 18px; }
.sf-error { color: var(--danger); font-size: 12px; min-height: 16px; margin-bottom: 8px; }
/* Банер автозбору tech_info (у формі нового звернення) */
.sf-tech-banner {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: #1d4ed8;
    line-height: 1.5;
    margin-bottom: 14px;
}
.sf-tech-banner .material-icons-round { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sf-submit-btn {
    width: 100%;
    padding: 11px;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 4px;
}
.sf-submit-btn:hover { background: var(--navy-mid); }
.sf-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Список тікетів */
.support-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.support-ticket-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px; }
.support-ticket-item {
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: var(--transition);
}
.support-ticket-item:hover { border-color: var(--border); }
.st-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.st-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.st-open     { background: #eef2ff; color: var(--blue); }
.st-progress { background: #fffbeb; color: var(--warning); }
.st-closed   { background: var(--success-bg); color: var(--success); }
.st-dept  { font-size: 11px; color: var(--text-muted); flex: 1; }
.st-date  { font-size: 11px; color: var(--text-light); }
.st-subject { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.st-message { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.st-file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--blue);
    text-decoration: none;
    margin-top: 6px;
}
.st-file:hover { text-decoration: underline; }

/* Відповідь підтримки у тікеті (видна користувачеві) */
.st-reply {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--success-bg);
    border: 1px solid #bbf7d0;
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
}
.st-reply-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    margin-bottom: 6px;
}
.st-reply-label .material-icons-round { font-size: 14px; }
.st-reply-date {
    font-size: 10px;
    color: var(--text-light);
    font-weight: 400;
    margin-left: auto;
}
.st-reply-text {
    font-size: 12px;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Кнопка «Завантажити ще» (documents.js, leads) */
.load-more-btn {
    display: block;
    margin: 20px auto 8px;
    padding: 10px 40px;
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    border-radius: var(--radius);
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.load-more-btn:hover { background: var(--blue); color: #fff; }

/* Шапка документів (admin.html → Templates) */
.doc-header-divider { border: none; border-top: 1px solid var(--border-light); margin: 16px 0 14px; }
.doc-header-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.doc-header-section-title .material-icons-round { font-size: 16px; }
.doc-header-info { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.doc-header-status-row { margin-bottom: 12px; }
.doc-header-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
    background: var(--bg); color: var(--text-muted); border: 1px solid var(--border);
}
.doc-header-badge--custom { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.doc-header-btns-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-header-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: var(--transition);
}
.doc-header-btn:hover { background: var(--border-light); }
.doc-header-btn .material-icons-round { font-size: 16px; }
.doc-header-btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.doc-header-btn--primary:hover { opacity: .88; }
.doc-header-btn--danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.doc-header-btn--danger:hover { background: #fff0f0; }

/* Заголовок сторінки офісу */
.page-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.page-header-row h1 { font-family: 'Unbounded', sans-serif; font-size: 18px; color: var(--navy); margin: 0; }
.enf-id-chip { background: var(--navy); color: white; font-family: monospace; font-size: 12px; padding: 3px 10px; border-radius: 20px; }

/* Модальне вікно помічника (office.html, admin.html) */
.asst-overlay {
    position: fixed; inset: 0; background: rgba(15,30,61,.45);
    backdrop-filter: blur(2px); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.asst-modal { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 360px; max-width: calc(100vw - 32px); overflow: hidden; }
.asst-modal-head {
    background: var(--navy); color: white; padding: 14px 18px;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.asst-modal-head .material-icons-round { font-size: 16px; opacity: .75; }
.asst-modal-close { margin-left: auto; background: none; border: none; color: white; opacity: .6; cursor: pointer; display: flex; padding: 2px; }
.asst-modal-close:hover { opacity: 1; }
.asst-modal-body { padding: 18px; }
.asst-modal-footer { padding: 12px 18px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 8px; }

/* Credentials після створення помічника */
.asst-creds { background: var(--bg); border-radius: var(--radius); padding: 14px 16px; margin-top: 4px; }
.asst-creds-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.asst-creds-row:last-child { margin-bottom: 0; }
.asst-creds-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; width: 58px; flex-shrink: 0; }
.asst-creds-value { font-family: monospace; font-size: 14px; font-weight: 600; color: var(--navy); flex: 1; }
.asst-copy-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; padding: 4px; border-radius: var(--radius-sm); transition: var(--transition); }
.asst-copy-btn:hover { color: var(--navy); background: var(--border-light); }
.asst-copy-btn .material-icons-round { font-size: 16px; }

/* ── VF-pattern: View-Edit fields (proceedings, leads) ── */
.vf { margin-bottom:8px; }
.vf-label { font-size:10px; color:var(--text-muted); font-weight:500; margin-bottom:2px; display:block; }
.vf-row { display:flex; align-items:baseline; gap:4px; min-height:22px; }
.vf-value { font-size:13px; color:var(--text); flex:1; line-height:1.4; word-break:break-word; }
.vf-value.empty { color:var(--text-light); }
/* ⚠️ Олівець тепер <button>, тож тут скид типових стилів кнопки (фон, межа, шрифт).
   ⚠️ `min-width/min-height: 24px` — мінімальна площа натискання за WCAG 2.5.8 навіть
   для миші. Значок лишається 13px і центрується всередині; ряд від цього не виростає,
   бо його висоту й так задає текст значення (виміряно). */
.vf-edit {
    font-size:13px!important; color:var(--text-muted); cursor:pointer; opacity:0;
    transition:opacity .15s; flex-shrink:0; user-select:none; border-radius:3px;
    background:none; border:0; margin:0; padding:0; font-family:inherit; line-height:1;
    min-width:24px; min-height:24px;
    display:inline-flex; align-items:center; justify-content:center;
}
.vf:hover .vf-edit { opacity:.5; }
.vf:hover .vf-edit:hover { opacity:1; color:var(--blue); background:#eef2ff; }
/* ⚠️ Клавіатурний фокус мусить ПОКАЗУВАТИ олівець: наведення миші при роботі з
   клавіатури не відбувається, і без цього рядка людина вела б фокус по невидимих кнопках. */
.vf-edit:focus-visible { opacity:1; color:var(--blue); background:#eef2ff; }
/* ⚠️ НА ДОТИКУ НАВЕДЕННЯ НЕ ІСНУЄ. Доки олівець проявлявся лише під мишею, на
   планшеті значення виглядали як звичайний текст — зрозуміти, що їх можна редагувати,
   було неможливо, і екран читався як доступний лише для перегляду. */
@media (pointer: coarse) {
    .vf-edit { opacity:.55; }
}
.vf-input { flex:1; font-size:13px; }
.asvp-vf-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:6px 12px; align-items:start; }
.doc-vf-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }

/* ============================================================
   NOTES & TASKS — використовуються в proceedings.js і proceeding.js
   ============================================================ */

.note-item { background:white; border-radius:10px; padding:10px 12px; margin-bottom:8px; box-shadow:0 2px 6px rgba(15,23,42,0.05); }
.note-meta { display:flex; gap:6px; margin-bottom:4px; align-items:center; }
.note-type-badge { font-size:10px; padding:1px 6px; border-radius:4px; font-weight:500; background:#eef2ff; color:var(--blue); }
.note-date { font-size:11px; color:var(--text-muted); }
.note-content { font-size:12px; color:var(--text); line-height:1.5; }

.task-item { display:flex; align-items:flex-start; gap:8px; background:white; border-radius:10px; padding:8px 10px; margin-bottom:6px; box-shadow:0 1px 4px rgba(15,23,42,0.05); }
.task-check { width:18px; height:18px; border:2px solid var(--border); border-radius:4px; cursor:pointer; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.task-check:hover { border-color:var(--blue); }
.task-check.done { background:var(--success); border-color:var(--success); }
.task-check.done::after { content:'✓'; color:white; font-size:11px; }
.task-title-text { font-size:12px; color:var(--text); }
.task-title-text.done { text-decoration:line-through; color:var(--text-muted); }
.task-due-date { font-size:11px; color:var(--text-muted); margin-top:2px; }
.task-due-date.overdue { color:var(--danger); font-weight:500; }

.btn-sm { height:28px; padding:0 12px; background:var(--navy); color:white; border:none; border-radius:var(--radius-sm); font-family:'Geologica',sans-serif; font-size:12px; font-weight:500; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.btn-sm:hover { background:var(--blue); }

/* ============================================================
   SHARED PANEL COMPONENTS
   Використовуються у proceedings.js (side panel) і proceeding.js (окрема сторінка).
   Не дублювати в локальних <style> сторінок.
   ============================================================ */

.panel-section {
    padding: 16px 18px; background: white; border-radius: 14px;
    margin-bottom: 10px; box-shadow: 0 2px 8px rgba(15,23,42,0.06);
}
.panel-section-title {
    font-size: 11px; font-weight: 600; color: #64748B;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px;
}
.panel-input {
    width: 100%; height: 24px; padding: 0 7px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    font-family: 'Geologica', sans-serif; font-size: 11px; line-height: 24px;
    outline: none; transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box; color: var(--text); background: #F9FBFD;
}
textarea.panel-input { height: auto; min-height: 44px; line-height: 1.4; padding: 5px 7px; }
select.panel-input   { height: 24px; padding: 0 7px; }
.panel-input:focus   { border-color: #2563EB; background: white; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.panel-input:hover:not(:focus) { border-color: #c0c8e0; }


.panel-action-link {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--blue); text-decoration: none; white-space: nowrap;
}
.panel-action-link:hover { text-decoration: underline; }
.panel-action-link .material-icons-round { font-size: 13px; }

/* Панель перевірки в реєстрах (Надійшло / Зареєстровано) */
.check-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: #f0f4ff; border: 1px solid #c7d4f5; border-radius: var(--radius);
    padding: 8px 12px; margin-bottom: 10px;
}
.check-bar-label {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; margin-right: 2px;
}
.check-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px;
    border: 1.5px solid #c7d4f5; background: white;
    font-family: 'Geologica', sans-serif; font-size: 11px; font-weight: 500;
    color: var(--blue); text-decoration: none; white-space: nowrap;
    transition: var(--transition);
}
.check-link:hover { border-color: var(--blue); background: #e8eeff; }
.check-link .material-icons-round { font-size: 12px; opacity: .7; }

/* ── Публічна подача — банер прийняти/відхилити ─────────────────────────── */
.pub-review-banner {
    background: linear-gradient(135deg, #ede9fe 0%, #f0f4ff 100%);
    border: 1.5px solid #c4b5fd;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.pub-review-title {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 13px; color: #5b21b6;
    margin-bottom: 6px;
}
.pub-review-title .material-icons-round { font-size: 18px; }
.pub-review-sub {
    font-size: 12px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5;
}
.pub-review-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-review-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: var(--transition);
}
.pub-review-btn .material-icons-round { font-size: 16px; }
.pub-review-btn--approve {
    background: var(--success); color: #fff;
}
.pub-review-btn--approve:hover { filter: brightness(1.08); }
.pub-review-btn--reject {
    background: transparent; color: var(--danger);
    border: 1.5px solid var(--danger);
}
.pub-review-btn--reject:hover { background: #fff1f1; }
.pub-review-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Закріплений рядок публічної подачі «Очікує рішення» у таблиці лідів
   (leads.js → renderTable, _pinnedPending). Палітра — як у .pub-review-banner */
.pending-review-row td { background: #f5f3ff; }
.pending-review-row td:first-child { border-left: 3px solid #8b5cf6; }
.pending-review-row:hover td { background: #ede9fe; }

.parties-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.party-col {
    background: white; border-radius: 14px; padding: 14px;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06); position: relative;
}
.party-col-title {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px;
}

.esits-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 20px; font-size: 10px; font-weight: 600; cursor: pointer;
    transition: all .15s; user-select: none;
    border: 1.5px dashed var(--border); color: var(--text-muted); background: var(--bg);
}
/* ⚠️ Абсолютне розташування — ЛИШЕ всередині картки сторони (.party-col має
   position:relative) на екрані провадження. Як ГЛОБАЛЬНЕ правило воно «протікало»
   на таблицю «Сторони», де немає позиціонованого предка, і бейдж тікав у правий
   верхній кут ВІКНА (над топбаром). У таблиці він має лишатися inline у клітинці. */
.party-col .esits-badge { position: absolute; top: 8px; right: 8px; }
.esits-badge:hover { border-style: solid; opacity: .85; }
.esits-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background .15s; }
.esits-badge.active { border: 1.5px solid #16a34a; color: #16a34a; background: #f0fdf4; }
.esits-badge.active .esits-dot { background: #16a34a; }
.esits-badge.checked-no { border: 1.5px solid #dc2626; color: #dc2626; background: #fef2f2; }
.esits-badge.checked-no .esits-dot { background: #dc2626; }

.autosave-indicator {
    display: flex; align-items: center; gap: 4px; font-size: 11px;
    color: var(--success); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.autosave-indicator.visible { opacity: 1; }
.autosave-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; opacity: 0; transition: opacity .3s; }
.autosave-dot.show { opacity: 1; }
.autosave-indicator .autosave-dot { opacity: 1; } /* всередині індикатора крапка завжди видима — контейнер керує прозорістю */
/* ⚠️ Стан «НЕ збережено» — та сама позначка, але червона і БЕЗ автоматичного
   зникнення (ховає її лише наступне успішне збереження). Доти збій автозбереження
   не показувався ніяк, і єдиним сигналом була відсутність зеленої позначки —
   тобто відсутність сигналу взагалі (правило №46). */
.autosave-indicator.autosave-failed { color: var(--danger); }
.autosave-indicator.autosave-failed .autosave-dot { background: var(--danger); }

/* ============================================================
   PROCEEDING PAGE — /proceeding.html
   ============================================================ */

/* Банер критичної помилки завантаження провадження */
.proc-load-error {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; margin-bottom: 12px;
    background: #fff3f3; border: 1px solid #fca5a5;
    border-radius: var(--radius); color: var(--danger);
    font-size: 14px;
}
.proc-load-error .material-icons-round { font-size: 20px; flex-shrink: 0; }
.proc-load-error a { color: var(--danger); font-weight: 600; }
.proc-load-error a:hover { text-decoration: underline; }

/* Back button */
.proc-back {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--text-muted); background: none; border: none;
    cursor: pointer; padding: 0; margin-bottom: 14px;
    font-family: 'Geologica', sans-serif; transition: color .2s;
}
.proc-back:hover { color: var(--navy); }
.proc-back .material-icons-round { font-size: 17px; }

/* Hero card */
.proc-hero {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 12px 24px; margin-bottom: 16px; border-left: 4px solid var(--navy);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.proc-hero-num {
    font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 700;
    color: var(--navy); white-space: nowrap; flex-shrink: 0; letter-spacing: .02em;
}
.proc-hero-parties { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.proc-hero-party {
    font-size: 13px; color: var(--text); display: flex; align-items: baseline; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proc-hero-party-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 600; flex-shrink: 0; min-width: 58px;
}
.proc-hero-amount {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 8px 16px; text-align: right; flex-shrink: 0;
}
.proc-hero-amount-label {
    font-size: 10px; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 600; display: block; margin-bottom: 2px;
}
.proc-hero-amount-value {
    font-size: 17px; font-weight: 700; color: var(--navy);
    white-space: nowrap; font-family: 'Unbounded', sans-serif;
}

/* Tab navigation */
.proc-tabs-bar {
    display: flex; border-bottom: 2px solid var(--border-light);
    margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
}
.proc-tabs-bar::-webkit-scrollbar { display: none; }
.proc-tab-btn {
    background: none; border: none; border-bottom: 2.5px solid transparent;
    margin-bottom: -2px; padding: 10px 16px;
    font-family: 'Geologica', sans-serif; font-size: 13px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
    transition: color .2s; outline: none;
    display: flex; align-items: center; gap: 6px;
}
.proc-tab-btn .material-icons-round { font-size: 17px; flex-shrink: 0; }
.proc-tab-btn:hover { color: var(--navy); }
.proc-tab-btn.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }

/* Main layout */
.proc-layout { display: flex; gap: 18px; align-items: flex-start; }
.proc-tab-content { flex: 1; min-width: 0; }
.proc-tab-panel { display: none; }
.proc-tab-panel.active { display: block; }

/* Activity feed (right column, sticky) */
.proc-activity {
    width: 290px; flex-shrink: 0; background: #fff;
    border-radius: var(--radius); border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
    max-height: calc(100vh - 240px); position: sticky; top: 20px;
}
.proc-activity-header {
    padding: 13px 16px 10px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;
    font-size: 11px; font-weight: 600; color: var(--navy);
    text-transform: uppercase; letter-spacing: .06em;
}
.proc-activity-scroll {
    flex: 1; overflow-y: auto; padding: 10px 12px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.proc-activity-scroll::-webkit-scrollbar { width: 3px; }
.proc-activity-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.proc-activity-add { border-top: 1px solid var(--border-light); padding: 10px 12px; flex-shrink: 0; }

/* Activity sub-section label */
.act-section-lbl {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 7px;
}
.act-section-lbl + .act-section-lbl, .act-section-lbl:not(:first-child) { margin-top: 12px; }

/* Note / task add inputs inside activity */
.act-add-ta {
    width: 100%; min-height: 56px; resize: vertical; padding: 7px 9px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif; font-size: 12px; color: var(--text);
    background: var(--bg); margin-bottom: 6px; box-sizing: border-box; outline: none;
    transition: border-color .2s;
}
.act-add-ta:focus { border-color: var(--blue-light); background: #fff; }
.act-add-row { display: flex; gap: 6px; align-items: center; }
.act-type-sel {
    flex: 1; height: 28px; padding: 0 8px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 12px; color: var(--text); background: var(--bg); outline: none;
}
.act-type-sel:focus { border-color: var(--blue-light); }
.act-add-btn {
    height: 28px; padding: 0 12px; background: var(--navy); color: #fff; border: none;
    border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background .2s; flex-shrink: 0;
}
.act-add-btn:hover { background: var(--blue); }
.act-task-inp {
    width: 100%; height: 28px; padding: 0 9px; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 12px; color: var(--text); background: var(--bg); outline: none;
    box-sizing: border-box; margin-bottom: 5px; transition: border-color .2s;
}
.act-task-inp:focus { border-color: var(--blue-light); background: #fff; }

/* Two-column row in proceeding tab (АСВП + right column) */
.proc-sections-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.proc-sections-row .panel-section { margin-bottom: 0; }
.proc-sections-row .proc-section-main { flex: 1; min-width: 0; }

/* Панель «Реквізити ВД в АСВП» — з'являється лише на стадії «Надійшло» */
.asvp-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef1ff;
    border: 1px solid #c7d4f5;
    border-radius: var(--radius);
    padding: 7px 12px;
    margin-bottom: 10px;
}
.asvp-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.asvp-bar-btn:hover { opacity: 0.82; }
.asvp-bar-btn .material-icons-round { font-size: 14px; }
.asvp-bar-install {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: underline dotted;
    white-space: nowrap;
}

/* Права колонка: Доставка постанови + Генерація документів */
.proc-right-col {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Генерація документів у правій колонці — виглядає як panel-section */
.proc-right-col .doc-gen-section {
    border-bottom: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    background: white;
}
.proc-right-col .doc-gen-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

/* «Не отримано» toggle */
.not-received-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    user-select: none;
}
.not-received-toggle.active { color: var(--danger); font-weight: 600; }
.not-received-toggle .material-icons-round { font-size: 16px; }

/* ЄСІТС hint у вкладці Провадження */
.esits-delivery-hint {
    margin-top: 12px;
    padding: 8px 10px;
    background: #f0faf5;
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--success);
    line-height: 1.4;
}

/* Document generation — shared across leads, proceedings, documents_incoming */
.doc-gen-section { padding: 10px 12px; border-bottom: 1px solid var(--border-light); background: white; }
.doc-gen-title { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.doc-gen-icons { display: flex; gap: 6px; }
.doc-gen-btn {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 6px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: white; cursor: pointer; transition: var(--transition);
    font-family: 'Geologica', sans-serif;
}
.doc-gen-btn:hover { border-color: var(--blue); background: #f0f4ff; }
.doc-gen-btn .material-icons-round { font-size: 20px; color: var(--navy); }
.doc-gen-btn span.doc-gen-label { font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.2; }
/* Бракує реквізитів, а документ уже на руках — генерація неможлива (правило №46:
   вимкнена кнопка ЗАВЖДИ пояснює причину — у title і в рядку .gen-note під нею). */
.doc-gen-btn--blocked { opacity: .45; cursor: not-allowed; }
.doc-gen-btn--blocked:hover { border-color: var(--border); background: white; }
/* Документ сформується, але усічено — попередження, не заборона. */
.doc-gen-btn--partial { border-style: dashed; }
.gen-note { font-size: 11px; color: var(--text-muted); line-height: 1.35; margin-top: 8px; }


/* Placeholder for unimplemented tabs */
.proc-tab-placeholder {
    text-align: center; padding: 60px 20px; color: var(--text-muted);
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.proc-tab-placeholder .material-icons-round { font-size: 40px; opacity: .22; display: block; margin-bottom: 10px; }
.proc-tab-placeholder .proc-placeholder-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.proc-tab-placeholder p { font-size: 13px; }

/* ============================================================
   OFFICE PAGE
   ============================================================ */

.office-glass { padding: 28px 32px; }

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 960px;
}
.profile-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.profile-card--full { grid-column: 1 / -1; }
.profile-card-header {
    background: var(--navy);
    color: white;
    padding: 12px 20px;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profile-card-header .material-icons-round { font-size: 16px; opacity: .75; }
.profile-card-header .lock-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    opacity: .6;
    font-family: 'Geologica', sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.profile-card-body { padding: 16px 20px; }

.pf-row { margin-bottom: 14px; }
.pf-row:last-child { margin-bottom: 0; }
.pf-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}
.pf-value {
    font-size: 13px;
    color: var(--text);
    padding: 6px 0;
    border-bottom: 1.5px solid transparent;
    min-height: 32px;
    display: flex;
    align-items: center;
}
.pf-value.empty { color: var(--text-light); font-style: italic; }
.pf-value.readonly { color: var(--text); background: none; }
.pf-enf-id {
    font-family: monospace;
    font-size: 13px;
    background: var(--bg);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    color: var(--navy);
    font-weight: 600;
    display: inline-block;
}
.pf-input, .pf-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
    background: white;
}
.pf-input:focus, .pf-textarea:focus { border-color: var(--blue-light); }
.pf-textarea { resize: vertical; min-height: 64px; }
.pf-input::placeholder, .pf-textarea::placeholder { color: var(--text-light); }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.delivery-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.delivery-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--transition);
    user-select: none;
}
.delivery-option:hover { border-color: var(--blue-light); color: var(--text); }
.delivery-option.selected { border-color: var(--navy); color: var(--navy); background: #f0f4ff; }
.delivery-option .material-icons-round { font-size: 20px; }
.np-fields { display: none; }
.np-fields.visible { display: block; }
.np-fields .pf-grid2 { margin-top: 0; }

.sources-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.source-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: grab;
    transition: var(--transition);
}
.source-item:hover { border-color: var(--border); background: white; }
.source-item.dragging { opacity: .4; }
.source-item.drag-over { border-color: var(--blue); background: #f0f4ff; }
.source-drag-handle { font-size: 18px; color: var(--text-light); cursor: grab; flex-shrink: 0; }
.source-item-name { flex: 1; font-size: 13px; color: var(--text); }
.source-delete-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-light); padding: 2px; border-radius: 4px; display: flex;
    transition: var(--transition);
}
.source-delete-btn:hover { color: var(--danger); background: #fff0f0; }
.source-delete-btn .material-icons-round { font-size: 16px; }
.source-add-row { display: flex; gap: 8px; margin-top: 4px; }
.source-add-input {
    flex: 1; padding: 7px 10px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif; font-size: 13px; color: var(--text);
    outline: none; transition: var(--transition);
}
.source-add-input:focus { border-color: var(--blue-light); }
.source-add-btn {
    padding: 7px 16px; background: var(--navy); color: white;
    border: none; border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition);
    white-space: nowrap;
}
.source-add-btn:hover { opacity: .88; }
.source-add-btn:disabled { opacity: .5; cursor: not-allowed; }

.assistants-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.assistant-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; background: var(--bg);
    border-radius: var(--radius-sm); border: 1.5px solid transparent;
}
.assistant-item.assistant-inactive { opacity: .55; }
.assistant-marker { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.assistant-info { flex: 1; }
.assistant-name { font-size: 13px; font-weight: 500; }
.assistant-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.assistant-actions { display: flex; gap: 6px; }
.assistant-action-btn {
    background: none; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px 6px; cursor: pointer; display: flex; align-items: center;
    color: var(--text-muted); transition: var(--transition);
}
.assistant-action-btn:hover { border-color: var(--blue); color: var(--blue); }
.assistant-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.assistant-action-btn .material-icons-round { font-size: 16px; }
.tariff-note {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted); margin-bottom: 10px;
}
.tariff-note .material-icons-round { font-size: 14px; }

.assistant-form {
    margin-top: 12px; padding: 16px;
    background: var(--bg); border-radius: var(--radius);
    border: 1.5px solid var(--border);
}
.assistant-form-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 12px; }
.assistant-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.af-row { margin-bottom: 10px; }
.af-label {
    display: block; font-size: 10px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.af-input, .af-select {
    width: 100%; padding: 7px 10px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif; font-size: 13px; color: var(--text);
    outline: none; background: white; box-sizing: border-box; transition: var(--transition);
}
.af-input:focus, .af-select:focus { border-color: var(--blue-light); }
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.color-swatch {
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: var(--transition);
}
.color-swatch.selected { border-color: var(--navy); transform: scale(1.2); }
.assistant-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.af-cancel-btn {
    padding: 7px 16px; background: none; border: 1.5px solid var(--border);
    border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 13px; color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.af-cancel-btn:hover { border-color: var(--text-muted); color: var(--text); }
.af-save-btn {
    padding: 7px 20px; background: var(--navy); color: white; border: none;
    border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition);
}
.af-save-btn:hover { opacity: .88; }
.af-save-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Витрати ВП (expenses_settings) --- */
.exp-section { margin-bottom: 24px; }
.exp-section-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.exp-section-title .material-icons-round { font-size: 18px; color: var(--blue); }
.rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.rate-field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.rate-input-wrap { display: flex; align-items: center; gap: 6px; }
.rate-input { width: 100px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif; font-size: 13px; color: var(--text); outline: none; background: white; transition: var(--transition); box-sizing: border-box; text-align: right; }
.rate-input:focus { border-color: var(--blue-light); }
.rate-unit { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.inline-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.inline-table th { text-align: left; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px 6px; background: transparent; border-bottom: 1.5px solid var(--border); }
.inline-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.inline-table tr:last-child td { border-bottom: none; }
.inline-table input.it-input { padding: 4px 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif; font-size: 13px; color: var(--text); outline: none; background: white; transition: var(--transition); box-sizing: border-box; width: 100%; }
.inline-table input.it-input:focus { border-color: var(--blue-light); }
.inline-table input.it-input.num { width: 90px; text-align: right; }
.inline-table .it-del { background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--text-muted); border-radius: var(--radius-sm); transition: var(--transition); display: flex; align-items: center; }
.inline-table .it-del:hover { color: var(--danger); background: #fff0f0; }
.add-row-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--blue); font-weight: 500; background: none; border: 1px dashed var(--blue-light); border-radius: var(--radius-sm); padding: 5px 12px; cursor: pointer; margin-top: 8px; transition: var(--transition); }
.add-row-btn:hover { background: #eff6ff; }
.decree-accordion {
    margin-bottom: 10px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
    border-left: 3px solid var(--border);
    overflow: hidden;
    transition: border-left-color .2s, box-shadow .2s;
}
.decree-accordion:hover { box-shadow: 0 2px 10px rgba(15,23,42,.10); }
.decree-accordion:has(.decree-accordion-btn.open) {
    border-left-color: var(--navy);
    box-shadow: 0 2px 10px rgba(15,23,42,.10);
}
.decree-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-align: left;
    transition: background .15s;
}
.decree-accordion-btn:hover { background: #f5f8ff; }
.decree-accordion-btn .material-icons-round { font-size: 18px; color: var(--blue); transition: transform .2s, color .2s; }
.decree-accordion-btn .material-icons-round:last-child { font-size: 20px; color: var(--text-muted); margin-left: auto; }
.decree-accordion-btn.open .material-icons-round:last-child { transform: rotate(180deg); color: var(--navy); }
.decree-accordion-body { display: none; padding: 12px 18px 16px; border-top: 1px solid var(--border-light); overflow-x: auto; }
.decree-accordion-body.open { display: block; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 680px; }
.cost-table th { background: var(--navy); color: white; padding: 6px 8px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.cost-table th.left { text-align: left; }
.cost-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.cost-table tr.tfoot td { background: #f0f4ff; font-weight: 600; color: var(--navy); border-top: 2px solid var(--border); }
.cost-table .ct-num { width: 62px; padding: 3px 6px; text-align: right; border: 1.5px solid var(--border); border-radius: 4px; font-family: 'Geologica', sans-serif; font-size: 12px; color: var(--text); outline: none; background: white; transition: var(--transition); }
.cost-table .ct-num:focus { border-color: var(--blue-light); }
.cost-table .ct-num.ct-zero { color: var(--text-light); }
.cost-table .ct-sum { text-align: right; color: var(--text); font-weight: 500; }
.cost-table td.ct-sum-fixed { text-align: center; color: var(--text); font-weight: 500; background: #f5f5f5; }
.cost-table .ct-esits0 { background: #fff8e1; }
.cost-table .ct-esits1 { background: #f0fff4; }
.cost-table .ct-esits2 { background: #f0f8ff; }
.cost-table .esits-head0 { background: #c07800 !important; }
.cost-table .esits-head1 { background: #2a7a3a !important; }
.cost-table .esits-head2 { background: #1a5a8a !important; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calc-table th { background: var(--navy); color: white; padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-align: right; }
.calc-table th:first-child { text-align: left; }
.calc-table td { padding: 7px 12px; border-bottom: 1px solid var(--border-light); }
.calc-table td:not(:first-child) { text-align: right; }
.calc-table .calc-total td { font-weight: 700; color: var(--navy); background: #e8f0ff; border-top: 2px solid var(--navy); font-size: 14px; }
.exp-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.exp-type-card { padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: white; }
.exp-type-card-name { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.exp-type-card-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
/* Картка шаблону (акордеон) */
/* Template accordion cards — identical look to .decree-accordion */
.tmpl-card { margin-bottom: 10px; background: white; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(15,23,42,.06); border-left: 3px solid var(--border); overflow: hidden; transition: border-left-color .2s, box-shadow .2s; }
.tmpl-card:hover { box-shadow: 0 2px 10px rgba(15,23,42,.10); }
.tmpl-card.open { border-left-color: var(--navy); box-shadow: 0 2px 10px rgba(15,23,42,.10); }
/* Шапка: іконка зліва + назва + стрілка справа — ідентично .decree-accordion-btn */
.tmpl-card-header { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: transparent; border: none; cursor: pointer; font-family: 'Geologica', sans-serif; font-size: 13px; font-weight: 600; color: var(--navy); user-select: none; transition: background .15s; }
.tmpl-card-header:hover { background: #f5f8ff; }
/* Ліва іконка — ідентично .decree-accordion-btn .material-icons-round (перша) */
.tmpl-card-header > .material-icons-round:first-child { font-size: 18px; color: var(--blue); flex-shrink: 0; }
/* Стрілка — ідентично .decree-accordion-btn .material-icons-round:last-child */
.tmpl-toggle-icon { font-size: 20px; color: var(--text-muted); transition: transform .22s cubic-bezier(.4,0,.2,1); flex-shrink: 0; margin-left: auto; }
.tmpl-card.open .tmpl-toggle-icon { transform: rotate(180deg); color: var(--navy); }
/* Назва: у згорнутому — статичний текст (pointer-events:none), у розгорнутому — редагований input */
.tmpl-name-input { flex: 1; min-width: 0; padding: 0 8px; height: 20px; line-height: 20px; box-sizing: border-box; border: 1.5px solid transparent; border-radius: var(--radius-sm); font-family: 'Geologica', sans-serif; font-size: 13px; font-weight: 600; color: var(--navy); outline: none; background: transparent; pointer-events: none; cursor: default; transition: border-color .15s, background .15s; }
.tmpl-card.open .tmpl-name-input { pointer-events: auto; cursor: text; border-color: var(--border); background: white; height: auto; line-height: normal; padding: 4px 8px; }
.tmpl-card.open .tmpl-name-input:hover { border-color: var(--blue-light); }
.tmpl-card.open .tmpl-name-input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
/* Тіло картки — сховане за замовч. */
.tmpl-body { display: none; border-top: 1px solid var(--border-light); overflow-x: auto; }
.tmpl-card.open .tmpl-body { display: block; }
/* Нижній рядок тіла: кнопка видалення */
.tmpl-body-footer { padding: 8px 14px; border-top: 1px solid var(--border-light); background: #fafafa; }
.tmpl-del-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border); padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); font-family: 'Geologica', sans-serif; font-size: 12px; transition: var(--transition); }
.tmpl-del-btn .material-icons-round { font-size: 15px; }
.tmpl-del-btn:hover { color: var(--danger); border-color: var(--danger); background: #fff5f5; }

/* ── Модалка створення шаблону витрат ────────────────────────────────────── */
.tmpl-create-overlay { display:none; position:fixed; inset:0; background:rgba(15,30,61,.45); backdrop-filter:blur(3px); z-index:400; align-items:center; justify-content:center; }
.tmpl-create-overlay.open { display:flex; }
.tmpl-create-modal { background:#fff; border-radius:var(--radius-xl); width:min(960px,96vw); height:92vh; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; }
.tmpl-create-hd { display:flex; align-items:center; padding:16px 24px 12px; border-bottom:1px solid var(--border-light); gap:10px; flex-shrink:0; }
.tmpl-create-hd h3 { margin:0; font-size:15px; font-weight:700; color:var(--navy); flex-grow:1; font-family:'Unbounded',sans-serif; }
.tmpl-create-close-btn { width:28px; height:28px; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:var(--transition); }
.tmpl-create-close-btn:hover { background:var(--bg); color:var(--danger); }
.tmpl-create-bd { padding:16px 24px 12px; overflow-y:auto; flex-grow:1; display:flex; flex-direction:column; gap:12px; }
.tmpl-create-ft { padding:10px 24px; border-top:1px solid var(--border-light); display:flex; justify-content:flex-end; gap:8px; background:#fafafa; flex-shrink:0; }
/* Тип + назва — в один рядок */
.tmpl-top-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end; }
.tmpl-field-group { display:flex; flex-direction:column; gap:5px; }
.tmpl-field-lbl { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
/* Поле назви у модалці — та ж висота, що й .exptype-trigger */
.tmpl-top-row .panel-input { height:40px; padding:0 12px; font-size:14px; box-sizing:border-box; }

/* custom card-dropdown для типу витрат */
.exptype-select { position:relative; }
.exptype-trigger { display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 12px; border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; background:#fff; transition:var(--transition); user-select:none; font-size:14px; font-family:'Geologica',sans-serif; color:var(--text); box-sizing:border-box; }
.exptype-trigger:hover { border-color:var(--blue-light); }
.exptype-trigger.open { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.exptype-trigger-text--placeholder { color:var(--text-muted); }
.exptype-arrow { font-size:20px; color:var(--text-muted); transition:transform .2s; }
.exptype-trigger.open .exptype-arrow { transform:rotate(180deg); }
.exptype-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:60; overflow:hidden; display:none; }
.exptype-menu.open { display:block; }
.exptype-option { padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--border-light); transition:background .13s; }
.exptype-option:last-child { border-bottom:none; }
.exptype-option:hover { background:#f0f6ff; }
.exptype-option.selected { background:#eff6ff; }
.exptype-option-name { font-weight:700; font-size:13px; color:var(--navy); margin-bottom:2px; }
.exptype-option-desc { font-size:12px; color:var(--text-muted); line-height:1.45; }

.tmpl-modal-other-note td { font-size:12px; color:var(--text-muted); padding:9px 10px; background:#fffbeb; border-left:3px solid var(--accent); font-style:italic; }

/* кнопка "Зберегти шаблон" */
.btn-primary { height:32px; padding:0 14px; background:var(--navy); color:#fff; border:none; border-radius:var(--radius); cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:5px; transition:var(--transition); font-family:'Geologica',sans-serif; }
.btn-primary:hover { opacity:.88; }
.btn-primary:disabled { opacity:.45; cursor:not-allowed; }

/* Другорядна кнопка модалки (Скасувати/Назад) — той самий розмір що .btn-primary, щоб пара
   кнопок у футері модалки виглядала однаково, лише з іншим акцентом. НЕ використовувати
   голий .btn для цього — та кнопка розрахована на full-width форми (width:100%, height:52px). */
.btn-secondary { height:32px; padding:0 14px; background:#fff; color:var(--navy); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:5px; transition:var(--transition); font-family:'Geologica',sans-serif; }
.btn-secondary:hover { background:var(--bg); border-color:var(--blue-light); }
.btn-secondary:disabled { opacity:.45; cursor:not-allowed; }

/* Маленька кругла кнопка закриття (X) у правому верхньому куті модалки — НЕ .btn (та розтягується
   на 52px заввишки й на всю ширину). Стандарт UI: маленька, у кутку, не привертає зайвої уваги. */
.modal-close-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; border-radius:50%; border:none; background:transparent; cursor:pointer; color:var(--text-muted); transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-close-btn:hover { background:var(--bg); color:var(--text); }
.modal-close-btn .material-icons-round { font-size:20px; }

.section-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.section-toggle .toggle-icon { font-size: 18px; color: var(--text-muted); transition: transform .2s; }
.section-toggle.open .toggle-icon { transform: rotate(180deg); }
.section-body.hidden { display: none; }
.exp-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.exp-full  { grid-column: 1 / -1; }
.exp-col-2 { grid-column: span 2; }
.exp-col-1 { grid-column: span 1; }
@media (max-width: 900px) { .exp-mosaic { grid-template-columns: 1fr; } .exp-col-2, .exp-col-1 { grid-column: 1 / -1; } }

.exp-top-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.exp-top-blocks .panel-section { margin-bottom: 0; }
.exp-data-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .exp-data-pair { grid-template-columns: 1fr; } }

/* ── Filter tabs (demands.html та інші сторінки) ────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.filter-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-light);
    background: #fff;
    font-size: 12.5px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.filter-tab:hover { border-color: var(--blue-light); color: var(--blue); }
.filter-tab.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 600;
}

/* ── Sidebar badge (лічильник вимог) ─────────────────────────────────────────── */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
.sidebar.collapsed .nav-badge { display: none; }

/* Мітка джерела ліда: надійшло через STACK (публічна форма / кабінет / матеріалізоване подання) */
.lead-src-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--navy);
    color: var(--accent);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    vertical-align: middle;
    cursor: default;
}

/* ── Вимоги / запити / виклики (proceeding.html → tab-demands) ──────────────── */
.demands-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.demands-header h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}
.demands-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 14px;
}
.demands-empty .material-icons-round {
    font-size: 40px;
    display: block;
    margin-bottom: 8px;
    opacity: .35;
}

/* Картка вимоги */
.demand-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-card:last-child { margin-bottom: 0; }
.demand-card:hover { box-shadow: var(--shadow); }

.demand-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: #fafafa;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-card.open .demand-card-head {
    border-bottom-color: var(--border-light);
}

.demand-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.demand-type-badge.vymoga           { background: #fff0f0; color: #c0392b; }
.demand-type-badge.zapyt            { background: #fffbec; color: #b7770d; }
.demand-type-badge.vyklyk           { background: #f0f6ff; color: #2563eb; }
.demand-type-badge.vyklyk_protocol  { background: #e8f0fe; color: #1a56db; }
.demand-type-badge.postanova        { background: #f5f0ff; color: #7c3aed; }

.demand-card-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.demand-card-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demand-card-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Індикатори стану у заголовку */
.demand-status-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    flex-shrink: 0;
}
.demand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    title: '';
}
.demand-dot.active   { background: var(--blue); }
.demand-dot.done     { background: var(--success); }
.demand-dot.overdue  { background: var(--danger); }

.demand-card-arrow {
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.demand-card.open .demand-card-arrow { transform: rotate(180deg); }

/* Велика кнопка «Додати вимогу» у шапці */
.demands-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.demands-add-btn .material-icons-round { font-size: 20px; }

/* Небезпечна зона всередині блоку вимоги (подалі від стрілки згортання) */
.demand-danger-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
/* Кнопка видалити — всередині блоку вимоги */
.demand-delete-btn {
    background: none;
    cursor: pointer;
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.demand-delete-btn:hover { background: #fdecea; border-color: var(--danger); }
.demand-delete-btn .material-icons-round { font-size: 17px; }

/* Тіло картки вимоги */
.demand-card-body {
    display: none;
    padding: 16px;
    flex-direction: column;
    gap: 0;
}
.demand-card.open .demand-card-body { display: flex; }

/* Секції всередині картки */
.demand-section {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}
.demand-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.demand-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

/* Сітка полів у секції */
.demand-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 16px;
}
.demand-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.demand-field-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.demand-field input[type="text"],
.demand-field input[type="date"] {
    font-size: 13px;
    font-family: 'Geologica', sans-serif;
    color: var(--text);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    background: #fff;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
}
.demand-field input:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

/* Поле "Адресат" — рядок з чекбоксом */
.demand-recipient-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.demand-recipient-row input[type="text"] {
    flex: 1;
    font-size: 13px;
    font-family: 'Geologica', sans-serif;
    color: var(--text);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    background: #fff;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-recipient-row input[type="text"]:focus {
    outline: none;
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.demand-debtor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.demand-debtor-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--blue);
}

/* Позначка «не отримано» */
.demand-not-received-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.demand-not-received-chk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
}
.demand-not-received-chk input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--danger);
}
.demand-reason-sel {
    font-size: 12.5px;
    font-family: 'Geologica', sans-serif;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    background: #fff;
    color: var(--text);
    display: none;
}
.demand-reason-sel.visible { display: inline-block; }

/* Секція «Відпрацювання» */
.demand-resolution {
    background: #f8fffe;
    border: 1px solid #c6e8df;
    border-radius: var(--radius);
    padding: 12px 14px;
}
.demand-resolution-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #3a7d6d;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.demand-resolution-hint {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Чіп стану відпрацювання */
.demand-outcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Geologica', sans-serif;
}
.demand-outcome-chip .material-icons-round { font-size: 16px; }
.demand-outcome-chip.done     { background: #c8f0d8; color: #1a7a42; }
.demand-outcome-chip.violated { background: #ffe0d9; color: #c0392b; }
.demand-outcome-chip.pending  { background: #f0f0f0; color: var(--text-muted); }

/* Кнопка «Скасувати» (відміна позначки виконано) */
.demand-revert-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: #fff;
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-revert-btn:hover { color: var(--danger); border-color: var(--danger); }
.demand-revert-btn .material-icons-round { font-size: 14px; }

/* Кнопка «Позначити як виконано» / «Виконано toggle» */
.demand-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: 12.5px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted);
}
.demand-complete-btn .material-icons-round { font-size: 16px; }
.demand-complete-btn:hover {
    border-color: var(--success);
    color: var(--success);
    background: #f0fff7;
}
.demand-complete-btn.done {
    background: #e6f9ef;
    border-color: var(--success);
    color: var(--success);
    font-weight: 600;
}
.demand-complete-btn.done:hover {
    background: #fff0f0;
    border-color: var(--danger);
    color: var(--danger);
}

/* Toggle «Відпрацьовано» (is_processed) */
.demand-processed-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px dashed var(--border);
    background: #fff;
    font-size: 12.5px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-processed-btn .material-icons-round { font-size: 16px; }
.demand-processed-btn:hover {
    border-color: #7c6fcd;
    color: #7c6fcd;
    background: #f5f0ff;
    border-style: solid;
}
.demand-processed-btn.active {
    background: #ede9ff;
    border-color: #7c6fcd;
    border-style: solid;
    color: #5b4fc7;
    font-weight: 600;
}
.demand-processed-btn.active:hover {
    background: #fff0f0;
    border-color: var(--danger);
    color: var(--danger);
}

/* Кнопка "Скласти акт" — заглушка */
.demand-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: transparent;
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.demand-act-btn:hover { border-color: var(--blue); color: var(--blue); }
.demand-act-btn .material-icons-round { font-size: 15px; }

/* Секція «Текст для акту» */
.demand-text-section .demand-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.demand-text-section .demand-section-title > span:first-child {
    flex: 1;
}
.demand-act-textarea {
    width: 100%;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text);
    background: #f7f8fc;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
    resize: vertical;
    min-height: 140px;
    margin-top: 6px;
    font-family: Geologica, sans-serif;
    box-sizing: border-box;
    transition: border-color .2s;
}
.demand-act-textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
}
.demand-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 11.5px;
    font-family: Geologica, sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.demand-copy-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}
.demand-copy-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.demand-copy-btn .material-icons-round { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   КАЛЕНДАР  (calendar.html / calendar.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Сторінка ── */
.cal-page {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* content-area.cal-page — перекриваємо overflow-y:auto щоб скрол був тільки
   в cal-time-grid-wrap, а не в зовнішньому контейнері */
.content-area.cal-page {
    overflow: hidden;
    min-height: 0;
}
.cal-layout {
    display: flex;
    flex: 1;
    height: 100%;
    overflow: hidden;
    gap: 0;
}

/* ── Ліва панель ── */
.cal-side {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px;
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    background: #fff;
}

/* ── Кнопка "Нова подія" ── */
.cal-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 24px;
    border: none;
    background: var(--navy);
    color: #fff;
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,30,61,.18);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-create-btn:hover {
    background: #162d5c;
    box-shadow: 0 4px 14px rgba(15,30,61,.28);
}
.cal-create-btn .material-icons-round { font-size: 20px; }

/* ── Підпис секцій лівої панелі ── */
.cal-side-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ── Міні-календар ── */
.cal-mini { user-select: none; }
.cal-mini-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.cal-mini-hdr span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.cal-mini-nav {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-mini-nav:hover { color: var(--navy); }
.cal-mini-nav .material-icons-round { font-size: 18px; }
.cal-mini-wdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 2px;
}
.cal-mini-wdays span {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 0;
}
.cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.cal-mini-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    color: var(--text);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-mini-day:hover { background: var(--bg); }
.cal-mini-day.other { color: var(--text-muted); opacity: .5; }
.cal-mini-day.today { font-weight: 700; color: var(--blue); }
.cal-mini-day.selected {
    background: var(--navy) !important;
    color: #fff !important;
    font-weight: 700;
}
.cal-mini-day.has-events::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
}
.cal-mini-day.selected::after { background: rgba(255,255,255,.7); }

/* ── Фільтр команди ── */
.cal-team-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.cal-team-item:hover { background: var(--bg); }
.cal-team-item.active { background: #eff6ff; color: var(--navy); font-weight: 600; }
.cal-team-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Легенда типів ── */
.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    color: var(--text);
}
.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Головна область ── */
.cal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Шапка: навігація + вигляди ── */
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    flex-shrink: 0;
    gap: 12px;
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-nav-btn:hover { background: var(--bg); border-color: var(--blue-light); }
.cal-nav-btn .material-icons-round { font-size: 20px; }
.cal-today-btn { padding: 6px 14px; font-weight: 600; }
.cal-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-left: 8px;
    white-space: nowrap;
}

.cal-views {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.cal-view-btn {
    padding: 6px 14px;
    border: none;
    border-left: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-view-btn:first-child { border-left: none; }
.cal-view-btn:hover { background: var(--bg); color: var(--navy); }
.cal-view-btn.active { background: var(--navy); color: #fff; font-weight: 600; }

/* ── Тіло (прокрутка) ── */
.cal-body {
    flex: 1;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ══════════ МІСЯЦЬ ══════════ */
.cal-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
}
.cal-month-weekday {
    padding: 8px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    border-left: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    background: var(--bg);
}
.cal-month-cell {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 4px;
    min-height: 100px;
    background: #fff;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-month-cell.other-month { background: #fafafa; }
.cal-month-cell.today { background: #f0f7ff; }
.cal-month-cell.drag-over { background: #dbeafe; }
/* Рядок «номер дня + бейдж завдань» у місячній сітці (варіант C) */
.cal-month-day-num-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.cal-month-day-num {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.cal-month-task-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6B21A8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.cal-today-circle {
    background: var(--navy);
    color: #fff !important;
    font-weight: 700;
}
.cal-month-events { display: flex; flex-direction: column; gap: 2px; }
.cal-month-chip {
    display: block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-month-chip:hover { filter: brightness(.92); }
.cal-month-more {
    font-size: 11px;
    color: var(--blue);
    padding: 1px 6px;
    cursor: pointer;
    font-weight: 600;
}
.cal-month-more:hover { text-decoration: underline; }

/* ══════════ ТИЖДЕНЬ / ДЕНЬ ══════════ */
.cal-week-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;   /* sticky-заголовки + окремий скрол у cal-time-grid-wrap */
    min-height: 0;
}

/* Шапка днів */
.cal-week-head-row {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 3;
}
.cal-gutter {
    width: 52px;
    flex-shrink: 0;
}
.cal-week-day-head {
    flex: 1;
    text-align: center;
    padding: 8px 4px 6px;
    border-left: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-week-day-head:hover { background: var(--bg); }
.cal-week-day-head.today { background: #f0f7ff; }
.cal-head-dayname {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.cal-head-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
}
.cal-week-day-head.today .cal-head-daynum {
    background: var(--navy);
    color: #fff;
}

/* Компактний рядок завдань у тижневому/денному вигляді (варіант B) */
.cal-tasks-row {
    display: flex;
    height: 32px;           /* фіксована висота → allday-row top = 57+32 = 89px */
    border-bottom: 1px solid var(--border-light);
    background: #fdf6ff;
    position: sticky;
    top: 57px;   /* відразу під cal-week-head-row */
    z-index: 2;
    flex-shrink: 0;
}
.cal-tasks-gutter {
    width: 52px;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    color: #6B21A8;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 2px;
    border-right: 1px solid var(--border-light);
}
.cal-tasks-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px;
    border-left: 1px solid var(--border-light);
    min-width: 0;
    overflow: hidden;
}

/* Індикатор-кнопка кількості завдань у рядку */
.cal-task-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(107,33,168,.12);
    color: #6B21A8;
    border-radius: 10px;
    padding: 2px 7px 2px 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.cal-task-day-btn:hover { background: rgba(107,33,168,.24); }
.cal-task-day-btn.all-done { background: rgba(22,163,74,.10); color: #15803d; }
.cal-task-day-btn.all-done:hover { background: rgba(22,163,74,.2); }
.cal-task-day-btn .material-icons-round { font-size: 13px; }

/* Попап списку завдань на день */
.cal-task-day-pop {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 260px;
    max-height: 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cal-task-day-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
}
.cal-task-day-pop-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-task-day-pop-close:hover { background: var(--bg); color: var(--text); }
.cal-task-day-pop-close .material-icons-round { font-size: 16px; }
.cal-task-day-pop-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}
.cal-task-day-pop-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-task-day-pop-item:hover { background: var(--bg); }
.cal-task-day-pop-item.done { opacity: .5; }
.cal-task-day-pop-chk {
    font-size: 18px;
    color: #6B21A8;
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-task-day-pop-chk:hover { color: #4c1d95; }
.cal-task-day-pop-lbl {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    cursor: pointer;
}
.cal-task-day-pop-item.done .cal-task-day-pop-lbl { text-decoration: line-through; }

/* Рядок «Весь день» */
.cal-allday-row {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    background: #fff;
    position: sticky;
    top: 57px;   /* змінюється динамічно в JS коли відображається рядок завдань */
    z-index: 2;
}
.cal-allday-label {
    width: 52px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px 6px 4px 8px;
    text-align: right;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cal-allday-cell {
    flex: 1;
    border-left: 1px solid var(--border-light);
    padding: 3px 4px;
    min-height: 28px;
}
.cal-allday-chip {
    display: block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Сітка годин */
.cal-time-grid-wrap {
    display: flex;
    flex: 1;
    position: relative;
    overflow-y: auto;   /* скрол тільки тут — заголовки днів залишаються sticky */
    overflow-x: hidden;
    min-height: 0;
}
.cal-gutter--hours {
    width: 52px;
    flex-shrink: 0;
    position: relative;
    flex-shrink: 0;
}
.cal-hour-lbl {
    position: absolute;
    right: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    transform: translateY(-50%);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.cal-cols-wrap {
    flex: 1;
    display: flex;
    position: relative;
    border-left: 1px solid var(--border-light);
}
.cal-time-col {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-time-col:first-child { border-left: none; }
.cal-time-col.today { background: #fafeff; }
.cal-time-col.drag-over { background: #dbeafe; }
.cal-hline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-light);
    pointer-events: none;
}
.cal-hline--half {
    border-top-style: dashed;
    opacity: .5;
}

/* Подія у таймгріді */
.cal-event {
    position: absolute;
    border-radius: 5px;
    padding: 2px 6px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.cal-event:hover {
    filter: brightness(.94);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 10 !important;
}
.cal-event-title {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event-time {
    font-size: 10px;
    opacity: .8;
    line-height: 1.2;
}
.cal-event-resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    cursor: s-resize;
    border-radius: 0 0 4px 4px;
}
.cal-event.resizing { opacity: .7; pointer-events: none; }

/* Лінія "зараз" */
.cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ef4444;
    pointer-events: none;
    z-index: 5;
}
.cal-now-dot {
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
}

/* ══════════ СПИСОК (AGENDA) ══════════ */
.cal-agenda {
    padding: 20px;
    max-width: 860px;
}
.cal-agenda-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 15px;
}
.cal-agenda-group { margin-bottom: 24px; }
.cal-agenda-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.cal-agenda-date::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.cal-agenda-date span:first-child {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    min-width: 32px;
    text-align: center;
}
.cal-agenda-date span:last-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.cal-agenda-date.today span:first-child { color: var(--navy); }
.cal-agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-agenda-item:hover { background: var(--bg); }
.cal-agenda-time {
    width: 52px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 2px;
}
.cal-agenda-content { flex: 1; min-width: 0; }
.cal-agenda-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 600;
    margin-bottom: 3px;
}
.cal-agenda-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.cal-agenda-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* ══════════ ПОПОВЕР ══════════ */
.cal-popover {
    position: fixed;
    z-index: 1000;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    width: 300px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.cal-pop-strip {
    height: 5px;
}
.cal-pop-acts {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px 10px 0;
}
.cal-pop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-pop-btn:hover { background: var(--bg); color: var(--navy); }
.cal-pop-btn.del:hover { background: #fff0f0; color: var(--danger); }
.cal-pop-btn .material-icons-round { font-size: 18px; }
.cal-pop-body { padding: 0 16px 16px; }
.cal-pop-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.cal-pop-badge .material-icons-round { font-size: 14px; }
.cal-pop-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.3;
}
.cal-pop-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.cal-pop-meta span { display: flex; align-items: center; gap: 6px; }
.cal-pop-meta .material-icons-round { font-size: 15px; }
.cal-pop-desc {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text);
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
    line-height: 1.5;
}

/* ══════════ МОДАЛЬНЕ ВІКНО ══════════ */
.cal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,20,40,.45);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cal-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}
.cal-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    margin-bottom: 4px;
}
.cal-modal-hdr h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}
.cal-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-modal-close:hover { background: var(--bg); }
.cal-modal-close .material-icons-round { font-size: 20px; }
.cal-modal-body { padding: 16px 24px; flex: 1; }
.cal-modal-row { margin-bottom: 14px; }
.cal-modal-row--inline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cal-modal-lbl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.cal-modal-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}
.cal-modal-input:focus {
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.cal-modal-input[readonly] { background: var(--bg); color: var(--text-muted); }

/* Сітка типів подій */
.cal-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.cal-type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background: var(--bg);
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.cal-type-btn span.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-type-btn:hover { background: #eff6ff; }
.cal-type-btn.active {
    border-color: currentColor;
    font-weight: 700;
}

/* Тогл «Весь день» */
.cal-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    color: var(--text);
}
.cal-toggle input { display: none; }
.cal-toggle-slider {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--border);
    position: relative;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.cal-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-toggle input:checked + .cal-toggle-slider { background: var(--blue); }
.cal-toggle input:checked + .cal-toggle-slider::after { transform: translateX(16px); }

/* Рядок дат/часу */
.cal-dt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-dt-sep {
    color: var(--text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

/* Підвал модалки */
.cal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border-light);
}
.cal-modal-btn {
    padding: 9px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    font-family: 'Geologica', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.cal-modal-btn:hover { background: var(--bg); }
.cal-modal-btn--save {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.cal-modal-btn--save:hover {
    background: #162d5c;
    border-color: #162d5c;
}
.cal-modal-btn--cancel { color: var(--text-muted); }
.cal-modal-btn--del {
    margin-right: auto;
    color: var(--danger);
    border-color: var(--danger);
    background: #fff;
}
.cal-modal-btn--del:hover { background: #fff0f0; }

/* ══════════ ШАР ЗАВДАНЬ ══════════ */

/* Панель завдань у лівій колонці */
.cal-tasks-panel {
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
}
.cal-tasks-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cal-tasks-hdr .cal-side-lbl { margin-bottom: 0; }
.cal-tasks-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-tasks-toggle:hover { border-color: var(--blue-light); color: var(--navy); }
.cal-tasks-toggle.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-tasks-toggle .material-icons-round { font-size: 16px; }

/* Елемент завдання в боковій панелі */
.cal-task-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 2px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-task-item:hover { background: var(--bg); }
.cal-task-item.done { opacity: .55; }

.cal-task-chk {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
}
.cal-task-chk:hover { color: var(--navy); }
.cal-task-item.done .cal-task-chk { color: var(--success); }

.cal-task-info { flex: 1; min-width: 0; }
.cal-task-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.cal-task-item.done .cal-task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.cal-task-due {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.cal-task-due.overdue { color: var(--danger); font-weight: 600; }

.cal-tasks-sep {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-light);
    margin: 10px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.cal-tasks-empty {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    padding: 12px 0;
}

/* Чіп завдання у місячній сітці та all-day рядку */
.cal-task-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(107,33,168,.07);
    border: 1px solid rgba(107,33,168,.18);
    margin-bottom: 2px;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-task-chip:hover { background: rgba(107,33,168,.14); }
.cal-task-chip.done {
    opacity: .5;
    text-decoration: line-through;
}
.cal-task-chip .cal-task-chk {
    font-size: 13px;
    color: #6B21A8;
}
.cal-task-chip-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #6B21A8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* ── Pipeline stages editor (service.html) ── */
.stages-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.stage-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-item:hover { background: var(--field-bg); border-color: var(--border); }
.stage-item.dragging { opacity: 0.35; }
.stage-item.drag-over {
    background: #eff6ff;
    outline: 2px dashed var(--blue-light);
}
.stage-drag-handle {
    color: var(--text-light);
    cursor: grab;
    font-size: 20px;
    flex-shrink: 0;
}
.stage-drag-handle:active { cursor: grabbing; }
.stage-color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
    padding: 0;
    background: transparent;
}
.stage-color-btn input[type=color] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: none;
    padding: 0;
}
.stage-name-inp {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    color: var(--text);
    padding: 3px 7px;
    border-radius: 5px;
    outline: none;
    min-width: 0;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.stage-name-inp:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--field-focus-border);
}
.stage-name-inp[readonly] {
    cursor: default;
    color: var(--text-muted);
}
.stage-system-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--border-light);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
.stage-delete-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.stage-delete-btn:hover { color: var(--danger); background: var(--danger-bg); }
.stage-delete-btn .material-icons-round { font-size: 16px; }
.stage-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
}
.stage-add-color {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.stage-add-color input[type=color] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.stage-add-input {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--field-bg);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-family: 'Geologica', sans-serif;
    font-size: 13.5px;
    color: var(--text);
    outline: none;
}
.stage-add-input:focus {
    border-color: var(--field-focus-border);
    box-shadow: var(--field-focus-shadow);
    background: #fff;
}
.stage-add-btn {
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--blue);
    background: #fff;
    color: var(--blue);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}
.stage-add-btn:hover { background: var(--blue); color: #fff; }

/* ── Вкладка «Кошти» (proceeding.html) ───────────────────────────────────── */

/* Тип-чіп (Відкриття, Санкція, …) */
.funds-type-chip {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--field-bg);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.funds-type-chip.decree { background: #e8f0fe; color: var(--blue); }
.funds-type-chip.esits  { background: #f0fdf4; color: var(--success); }

/* Картка постанови у вкладці «Кошти» */
.funds-decree-card {
    background: white;
    border: 1.5px solid var(--border);
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

/* Верхній рядок вкладки «Кошти»: картка + кнопка «Надходження» */
.funds-top-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: stretch;
}

/* Зведена картка 3×2 (АСВП-порядок) */
.funds-summary-card {
    flex: 4;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px 24px;
    box-shadow: var(--shadow);
}

/* Окрема клітинка суми */
.funds-sum-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.funds-sum-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.funds-sum-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}

/* Клітинка з можливістю редагування (клік → інпут) */
.funds-sum-block--edit .funds-sum-value {
    cursor: text;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 1px;
    transition: border-color .15s;
}
.funds-sum-block--edit .funds-sum-value:hover {
    border-color: var(--blue-light);
    color: var(--blue);
}
.funds-sum-inp {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Geologica', sans-serif;
    border: 1.5px solid var(--blue-light);
    border-radius: 4px;
    padding: 2px 6px;
    width: 100%;
    box-sizing: border-box;
    color: var(--navy);
    outline: none;
}
.funds-sum-inp:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(59,110,245,.12);
}

/* Кнопка «Надходження» (квадратна, праворуч від картки) */
.funds-nadh-btn {
    flex: 1;
    background: var(--navy);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    transition: background .15s;
    font-family: 'Geologica', sans-serif;
}
.funds-nadh-btn:hover { background: var(--blue); }
.funds-nadh-btn .material-icons-round { font-size: 28px; }
.funds-nadh-lbl {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Акордеон (аванси стягувача та ін.) */
.funds-accordion {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: white;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.funds-accordion-hdr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    user-select: none;
    gap: 10px;
}
.funds-accordion-hdr:hover { background: #f5f8ff; }
.funds-accordion-body {
    display: none;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-light);
}
.funds-accordion-body.open { display: block; }
.funds-accordion-arrow {
    font-size: 20px;
    color: var(--text-muted);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
.funds-accordion-hdr .funds-accordion-total {
    margin-left: auto;
}
.funds-accordion-total {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--field-bg);
    color: var(--navy);
    white-space: nowrap;
}

/* Список авансів всередині акордеону */
.funds-adv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.funds-adv-row:last-of-type { border-bottom: none; }
.funds-adv-date {
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 80px;
}
.funds-adv-amt {
    font-weight: 600;
    white-space: nowrap;
    color: var(--navy);
}
.funds-adv-note {
    flex: 1;
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.funds-adv-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 2px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.funds-adv-del:hover { color: var(--danger); background: var(--danger-bg); }
.funds-adv-del .material-icons-round { font-size: 17px; }

/* Форма додавання авансу */
.funds-adv-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.funds-adv-inp {
    padding: 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: 'Geologica', sans-serif;
    color: var(--navy);
    outline: none;
    transition: border-color .15s;
}
.funds-adv-inp:focus { border-color: var(--blue-light); }
.funds-adv-inp[type="number"] { width: 120px; }
.funds-adv-inp.funds-adv-note-inp { flex: 1; min-width: 120px; }
.funds-adv-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 0;
    margin-top: 4px;
    border-top: 1px solid var(--border-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

/* Стягнуто — зведена сітка (внизу вкладки) */
.funds-coll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
}
.funds-coll-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}
.funds-coll-row:last-child { border-bottom: none; }
.funds-coll-lbl { color: var(--text-muted); }
.funds-coll-val { font-weight: 600; color: var(--navy); }

/* ── Баланс заборгованості: «на день відкриття» + «залишок» ─────────────── */
/* Верхній рядок вкладки «Кошти»: знімок ліворуч (компактний, сірий),
   залишок у центрі (головний акцент), кнопка «Надходження» праворуч. */
.funds-balance-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Знімок на день відкриття — довідковий, приглушений */
.funds-open-card {
    flex: 2 1 220px;
    background: var(--bg);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Залишок — головний блок вкладки */
.funds-rem-card {
    flex: 5 1 380px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.funds-bal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.funds-bal-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.funds-rem-card .funds-bal-title {
    font-size: 12px;
    color: var(--navy);
}
/* Рядок складової заборгованості */
.funds-bal-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.funds-bal-lbl {
    font-size: 12px;
    color: var(--text-muted);
}
.funds-rem-card .funds-bal-lbl { font-size: 13px; }
.funds-bal-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}
.funds-rem-card .funds-bal-val { font-size: 15px; }

/* Підрядок «у т.ч. АСВП» */
.funds-bal-sub {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 3px 12px;
    font-size: 11px;
    color: var(--text-light);
}

/* Кнопка «Надходження» під блоками балансу — горизонтальна смуга.
   Колонка вкладки вузька (праворуч — стрічка активності), тож квадратна
   кнопка збоку не вміщується разом із двома картками. */
.funds-nadh-bar {
    width: 100%;
    flex-direction: row;
    min-height: 52px;
    margin-bottom: 20px;
    gap: 10px;
}
.funds-nadh-bar .material-icons-round { font-size: 20px; }

/* Рядок дій під блоками балансу: головна кнопка + «Реквізити боржнику» */
.funds-actions-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.funds-actions-row .funds-nadh-bar { flex: 3 1 240px; margin-bottom: 0; }

/* Група «Реквізити боржнику»: підпис + два рівноцінні формати */
.funds-req-group {
    flex: 2 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 12px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
}
.funds-req-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}
.funds-req-lbl .material-icons-round { font-size: 19px; color: var(--text-muted); flex-shrink: 0; }
.funds-req-fmt {
    flex-shrink: 0;
    min-width: 46px;
    padding: 6px 10px;
    background: var(--bg);
    color: var(--navy);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.funds-req-fmt:hover { background: var(--navy); border-color: var(--navy); color: white; }
.funds-req-fmt:disabled { opacity: .55; cursor: default; }

/* Разом */
.funds-bal-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.funds-bal-total .funds-bal-lbl {
    font-weight: 600;
    color: var(--navy);
}
.funds-rem-card .funds-bal-total .funds-bal-val {
    font-size: 19px;
    font-family: 'Unbounded', sans-serif;
}

/* Значення залишку — клік для редагування */
.funds-bal-val--edit {
    cursor: text;
    border-bottom: 1px dashed var(--border);
    transition: border-color .15s, color .15s;
}
.funds-bal-val--edit:hover {
    border-color: var(--blue-light);
    color: var(--blue);
}
.funds-bal-inp {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Geologica', sans-serif;
    border: 1.5px solid var(--blue-light);
    border-radius: 4px;
    padding: 1px 6px;
    width: 130px;
    text-align: right;
    box-sizing: border-box;
    color: var(--navy);
    outline: none;
}
.funds-bal-inp:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(59, 110, 245, .12);
}
.funds-bal-hint {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 8px;
}

/* ── Таблиця стягнень ───────────────────────────────────────────────────── */
.funds-collections-scroller { overflow-x: auto; }
.funds-collections-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.funds-collections-table th {
    background: transparent;   /* перекриває глобальне th { background: var(--navy) } */
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: right;
    padding: 6px 10px;
    border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.funds-collections-table th:first-child,
.funds-collections-table td:first-child { text-align: left; }
.funds-collections-table td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-light);
    color: var(--navy);
    white-space: nowrap;
}
.funds-collections-table tbody tr:hover { background: #f7f9fd; }
.funds-coll-zero { color: var(--text-light); }
.funds-coll-note {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}
.funds-collections-table tfoot td {
    font-weight: 700;
    border-top: 1.5px solid var(--border);
    border-bottom: none;
    padding-top: 9px;
}
.funds-coll-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
}
.funds-coll-del:hover { color: var(--danger); background: var(--danger-bg); }
.funds-coll-del .material-icons-round { font-size: 16px; }

/* ── Timeline витрат ВП (proceeding.html → вкладка «Кошти») ─────────────── */

/* Заголовки колонок */
.exp-tl-headers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 0 4px;
}
.exp-tl-h-left,
.exp-tl-h-right {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-light);
}

/* Група витрат: ліворуч items, по центру лінія, праворуч постанова */
.exp-tl-group {
    display: flex;
    align-items: stretch;
    margin-bottom: 6px;
}
.exp-tl-group-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.exp-tl-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    min-height: 34px;
    border-radius: var(--radius-sm);
    transition: background .12s;
}
.exp-tl-item-row:hover { background: #f4f7ff; }
.exp-tl-item-del {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-light);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s;
    display: flex;
    align-items: center;
    line-height: 0;
}
.exp-tl-item-row:hover .exp-tl-item-del { opacity: 1; }
.exp-tl-item-del:hover { color: var(--danger); }
.exp-tl-label {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    line-height: 1.3;
}
.exp-tl-amt-inp {
    width: 78px;
    text-align: right;
    padding: 3px 5px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Geologica', sans-serif;
    color: var(--navy);
    outline: none;
    transition: border-color .15s;
    flex-shrink: 0;
}
.exp-tl-amt-inp:focus { border-color: var(--blue-light); }
.exp-tl-amt-inp[readonly] { background: var(--bg); color: var(--text-muted); cursor: default; }
.exp-tl-qty-inp {
    width: 48px;
    text-align: center;
    padding: 3px 5px;
    border: 1.5px solid #bfdbfe;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    font-family: 'Geologica', sans-serif;
    color: var(--navy);
    background: #eff6ff;
    outline: none;
    flex-shrink: 0;
}
.exp-tl-qty-inp:focus { border-color: var(--blue); }
.exp-tl-qty-x { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.exp-tl-uah { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

/* Центральна вертикальна лінія */
.exp-tl-group-center {
    width: 28px;
    flex-shrink: 0;
    position: relative;
}
.exp-tl-group-center::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: var(--border-light);
    transform: translateX(-50%);
}

/* Права колонка — постанова */
.exp-tl-group-right {
    width: 205px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}

/* Картка постанови — займає всю висоту групи */
.exp-tl-decree-card {
    position: relative;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.exp-tl-decree-head {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding-right: 18px; /* leave room for del btn */
}
.exp-tl-decree-ico {
    font-size: 14px !important;
    color: var(--success);
    flex-shrink: 0;
    margin-top: 1px;
}
.exp-tl-decree-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.exp-tl-decree-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.exp-tl-decree-amt {
    font-weight: 700;
    font-size: 13px;
    color: var(--navy);
    flex-shrink: 0;
}
.exp-tl-decree-date-inp {
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Geologica', sans-serif;
    padding: 0;
    cursor: pointer;
    min-width: 0;
    max-width: 100px;
}
.exp-tl-decree-date-inp:focus {
    outline: none;
    border-bottom: 1px dashed var(--success);
}
.exp-tl-decree-del-btn {
    position: absolute;
    top: 5px; right: 5px;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-light);
    opacity: 0;
    transition: opacity .12s;
    display: flex;
    align-items: center;
    line-height: 0;
}
.exp-tl-decree-card:hover .exp-tl-decree-del-btn { opacity: 1; }
.exp-tl-decree-del-btn:hover { color: var(--danger); }

/* Кнопка «Скопіювати для АСВП» (всередині картки постанови) */
.exp-tl-copy-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: transparent;
    border: 1.5px dashed rgba(34,197,94,.45);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--success);
    transition: border-color .15s, background .15s;
    margin-top: auto;
}
.exp-tl-copy-btn:hover {
    border-color: var(--success);
    background: rgba(34,197,94,.08);
}
.exp-tl-copy-btn--done {
    border-color: var(--success) !important;
    color: var(--success) !important;
    background: rgba(34,197,94,.1) !important;
    border-style: solid !important;
}

/* Рядок кнопок дій (знизу timeline) */
.exp-tl-act-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.exp-tl-add-exp-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--blue);
    border: none;
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: opacity .15s;
}
.exp-tl-add-exp-btn:hover { opacity: .88; }
.exp-tl-add-dec-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--success);
    border: none;
    color: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: opacity .15s;
}
.exp-tl-add-dec-btn:hover:not(:disabled) { opacity: .88; }
.exp-tl-add-dec-btn:disabled {
    background: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.7;
}


/* ── Модулі (enforcer_edit.html, modules.html) ─────────────────────────── */
.module-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.module-card:not(:last-child) { margin-bottom: 10px; }
.module-card.enabled {
    border-color: var(--blue-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.07);
}
.module-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.module-card.enabled .module-card-icon { background: rgba(59,130,246,.12); }
.module-card-icon .material-icons-round { font-size: 22px; color: var(--text-muted); }
.module-card.enabled .module-card-icon .material-icons-round { color: var(--blue); }
.module-card-body { flex: 1; min-width: 0; }
.module-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 2px;
}
.module-card-desc { font-size: 12px; color: var(--text-muted); }

/* Toggle-перемикач */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s;
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--blue); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle-switch input:disabled + .toggle-track { opacity: .5; cursor: not-allowed; }

/* ============================================================
   ADOC — Пункт сайдбару «Додати документ»
   ============================================================ */
.adoc-sidebar-link { color: var(--blue-light); font-weight: 500; }
.adoc-sidebar-link .material-icons-round { color: var(--blue-light); }
.adoc-sidebar-link:hover { color: var(--blue); background: rgba(30,79,194,0.07); }

/* ============================================================
   CONTROLS — сторінка «Контролі»
   ============================================================ */

/* Сітка карток контролів (2 рядки × 3 стовпці) */
.ctrl-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

/* Картка-контроль */
.control-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px 28px;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    user-select: none;
}
.control-card:hover {
    border-color: var(--blue-light);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
@media (hover: none) { .control-card:hover { transform: none; } }
.control-card.active {
    border-color: var(--blue);
    background: #f0f4ff;
    box-shadow: 0 0 0 4px rgba(30,79,194,0.10), var(--shadow);
}

/* Навігаційна картка (веде на окрему сторінку, не відкриває inline-панель) */
.ctrl-card-nav:hover { border-color: var(--accent); }
.ctrl-card-nav:hover .ctrl-card-icon { background: var(--accent-light); }
.ctrl-card-nav:hover .ctrl-card-icon .material-icons-round { color: var(--accent); }

/* Іконка всередині картки */
.ctrl-card-icon {
    width: 60px;
    height: 60px;
    background: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.control-card.active .ctrl-card-icon { background: rgba(30,79,194,0.10); }
.ctrl-card-icon .material-icons-round { font-size: 30px; color: var(--blue); }

/* Велике число-лічильник */
.ctrl-count-num {
    font-family: 'Unbounded', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--danger);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ctrl-count-num.ctrl-count-zero { color: var(--success); }

/* Назва і опис картки */
.ctrl-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    line-height: 1.35;
}
.ctrl-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Панель деталей ── */
.ctrl-detail-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ctrl-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
}
.ctrl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: 'Geologica', sans-serif;
    transition: var(--transition);
    flex-shrink: 0;
}
.ctrl-back-btn:hover { background: var(--border-light); color: var(--text); }
.ctrl-back-btn .material-icons-round { font-size: 18px; }

.ctrl-detail-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.ctrl-detail-count {
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Таблиця ── */
.ctrl-table-scroller { overflow-x: auto; }

.ctrl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ctrl-table th {
    background: var(--navy);
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
.ctrl-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.ctrl-table tr:last-child td { border-bottom: none; }
.ctrl-table tr:hover td { background: var(--bg); }

/* ── Inline inputs ── */
.ctrl-inp {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-size: 13px;
    font-family: 'Geologica', sans-serif;
    background: var(--field-bg);
    color: var(--text);
    width: 100%;
    transition: var(--transition);
}
.ctrl-inp:focus {
    outline: none;
    border-color: var(--blue-light);
    background: #fff;
    box-shadow: var(--field-focus-shadow);
}
.ctrl-inp.ctrl-inp-saved {
    border-color: var(--success);
    background: var(--success-bg);
}
.ctrl-inp:disabled { opacity: 0.45; cursor: not-allowed; background: var(--bg); }

/* ── Кнопки дій ── */
.ctrl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    white-space: nowrap;
    transition: var(--transition);
    text-decoration: none;
    vertical-align: middle;
}
.ctrl-btn:hover { background: var(--bg); }

.ctrl-btn-icon { padding: 5px 7px; }

.ctrl-btn-go { color: var(--blue); border-color: var(--blue); }
.ctrl-btn-go:hover { background: rgba(30,79,194,0.06); }

.ctrl-btn-skip { color: var(--text-muted); }
.ctrl-btn-skip:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.ctrl-btn-act { background: var(--navy); color: #fff; border-color: var(--navy); }
.ctrl-btn-act:hover { background: var(--navy-mid); border-color: var(--navy-mid); }

.ctrl-btn-track { color: var(--accent); border-color: var(--accent); padding: 5px 8px; }
.ctrl-btn-track:hover { background: var(--accent-light); }

/* ── Порожній стан і підвал пропущених ── */
.ctrl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 52px 24px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}
.ctrl-empty .material-icons-round { font-size: 48px; opacity: 0.35; }

.ctrl-skip-footer {
    padding: 10px 20px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
}
.ctrl-skip-footer a { color: var(--blue); }

/* Стан помилки завантаження — навмисно НЕ схожий на порожній результат */
.ctrl-empty.ctrl-error { color: var(--danger); }
.ctrl-empty.ctrl-error .material-icons-round { color: var(--danger); opacity: 0.6; }

/* Напрямок відправлення протоколу (правопорушнику / до суду) */
.ctrl-dir-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.ctrl-dir-person { background: var(--accent-light); color: var(--navy); }
.ctrl-dir-court  { background: rgba(30,79,194,0.10); color: var(--blue); }

/* Рядок, умова якого щойно закрита: приглушуємо, але не прибираємо різко */
.ctrl-table tr.ctrl-row-done td { opacity: 0.5; }
.ctrl-table tr.ctrl-row-done:hover td { opacity: 0.75; }
.ctrl-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--success);
    white-space: nowrap;
    opacity: 1;
}
.ctrl-done-badge .material-icons-round { font-size: 14px; }

/* ── Черга дозаповнення: чого бракує в записі (онбординг з АСВП) ── */
.ctrl-miss-chip {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-light);
    color: var(--navy);
    font-size: 11px;
    white-space: nowrap;
}
.ctrl-miss-more {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: default;
}

/* ── Панель дії «Дозаповнити з постанов» над таблицею черги ── */
.ctrl-fill-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
}
.ctrl-fill-text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.ctrl-fill-btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Вікно пакетної обробки постанов ──
   СПІЛЬНИЙ набір для ДВОХ екранів: дозаповнення виконавця
   (static/decree-completion.js) і папка постанов стягувача
   (static/creditor-decrees.js). ⚙ Другий набір класів на ту саму
   візуальну мову розійшовся б з першим (правило №25) ── */
.dcf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.dcf-modal {
    width: 100%;
    max-width: 720px;
    max-height: 88vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dcf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border-light);
}
.dcf-title { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 18px; }
.dcf-body { padding: 20px 24px; overflow-y: auto; flex: 1 1 auto; }
.dcf-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-light);
}

.dcf-intro p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text); }
.dcf-note { color: var(--text-muted); font-size: 12px; }

.dcf-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.dcf-pick-btn { display: inline-flex; align-items: center; gap: 6px; }

.dcf-progress { padding: 24px 0; }
.dcf-progress-text { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.dcf-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--border-light);
    overflow: hidden;
}
.dcf-bar-fill {
    height: 100%;
    width: 0;
    background: var(--blue);
    transition: width .18s ease;
}

.dcf-sum-head { text-align: center; padding: 8px 0 2px; }
.dcf-sum-num {
    font-family: 'Unbounded', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}
.dcf-sum-lbl { font-size: 13px; color: var(--text-muted); }
.dcf-sum-sub {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 14px;
}

.dcf-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}
.dcf-group {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    font-size: 12px;
    color: var(--text-muted);
}
.dcf-group-num { font-weight: 700; color: var(--text); }
.dcf-group--paid { border-color: var(--accent); background: var(--accent-light); }

.dcf-cost {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--accent-light);
    border: 1px solid var(--accent);
    margin-bottom: 14px;
}
.dcf-cost-txt { font-size: 12px; line-height: 1.55; color: var(--navy); }

/* Пропозиція платного розпізнавання сканів: сума → галочка → кнопка.
   ⚠️ Блок вертикальний саме тому, що згода мусить бути кроком, а не випадковим
   кліком: спершу число, тоді свідома галочка, і лише тоді активна кнопка. */
.dcf-cost--offer { flex-direction: column; }
.dcf-cost-line { display: flex; align-items: flex-start; gap: 8px; }
.dcf-cost-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}
.dcf-ai-btn { margin-top: 8px; align-self: flex-start; }
/* Факт списання — не попередження: спокійний зелений, а не акцентний жовтий. */
.dcf-cost--done {
    background: #eaf7ef;
    border-color: var(--success);
}

.dcf-files { border-top: 1px solid var(--border-light); padding-top: 10px; }
.dcf-files-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--blue);
    user-select: none;
}
.dcf-files-toggle .material-icons-round { font-size: 18px; }
.dcf-files-body { display: none; margin-top: 10px; }
.dcf-files-body.open { display: block; }
.dcf-file {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}
.dcf-file:last-child { border-bottom: none; }
.dcf-file-st { flex: 0 0 16px; font-weight: 700; }
.dcf-file-st.ok { color: var(--success); }
.dcf-file-st.skip { color: var(--text-light); }
.dcf-file-main { min-width: 0; flex: 1 1 auto; }
.dcf-file-name {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dcf-file-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

.dcf-fatal {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 28px 0;
    color: var(--danger);
    font-size: 13px;
}
.dcf-done { text-align: center; padding: 18px 0; }

/* ── Відкладена підписка стягувача (docs/design_asvp_onboarding.md §13) ──
   ⚠️ Картка НАВМИСНО не схожа на картку провадження: пунктирна рамка й теплий
   фон кажуть, що це дані з паперу самого стягувача, а не дзеркало запису
   виконавця. Однаковий вигляд означав би обіцянку статусу й сум, яких у цьому
   записі немає й не буде, доки виконавець не приєднається ── */
.cpw-card {
    border: 1px dashed var(--accent);
    background: #fffdf5;
}
.cpw-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
    color: #92400e; background: #fef3c7;
}
.cpw-chip .material-icons-round { color: #92400e; }
.cpw-note {
    font-size: 12px; color: var(--text-muted);
    line-height: 1.5; margin-bottom: 8px;
}
.cpw-claim {
    font-size: 12px; color: var(--text); line-height: 1.5;
    margin-bottom: 8px; padding: 8px 10px;
    background: #fff; border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    max-height: 84px; overflow: auto;
}
.cpw-nolink {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-muted);
}
/* Блок «чекатимуть на виконавця» у підсумку вікна завантаження */
.cpw-group-wait { border-color: var(--accent); background: #fffdf5; }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Вкладка «Перевірки» (proceeding.html → tab-checks)
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.ck-wrap { display: flex; flex-direction: column; gap: 0; padding: 0 0 32px; }

.ck-meta {
    font-size: 11px; color: var(--text-muted);
    padding: 8px 20px 0; text-align: right;
}

.ck-group-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--navy);
    padding: 20px 20px 8px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.ck-group-title .material-icons-round {
    font-size: 15px; color: var(--blue); opacity: .75; flex-shrink: 0;
}

.ck-cols2 {
    display: grid; grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border-light);
}
.ck-cols2 > .ck-card { border-bottom: none; }
.ck-cols2 > .ck-card:first-child { border-right: 1px solid var(--border-light); }

.ck-card { border-bottom: 1px solid var(--border-light); padding: 12px 20px; }
.ck-card:last-child { border-bottom: none; }

.ck-card-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ck-card-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }

.ck-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    flex-shrink: 0; transition: box-shadow .15s; padding: 0;
}
.ck-dot:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.1); }
.ck-dot--not_checked { background: #e8eaf0; border-color: #c5c9d8; }
.ck-dot--found { background: var(--success); border-color: var(--success); }
.ck-dot--not_found { background: #fff; border-color: #f59e0b; box-shadow: inset 0 0 0 3px #f59e0b; }

.ck-hint-badge {
    font-size: 10px; font-weight: 600; color: #92400e;
    background: #fef3c7; border: 1px solid #f59e0b;
    border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.ck-hint-badge--sm { font-size: 9px; padding: 0 4px; }

.ck-body { padding: 8px 0 4px; }
.ck-body--rows { display: flex; flex-direction: column; gap: 6px; }

.ck-notes {
    width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 8px; font-size: 12px; font-family: inherit;
    color: var(--text); resize: vertical; min-height: 52px; box-sizing: border-box;
}
.ck-notes:focus { outline: none; border-color: var(--blue); }

.ck-input {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 5px 8px; font-size: 12px; font-family: inherit; color: var(--text);
}
.ck-input:focus { outline: none; border-color: var(--blue); }
.ck-input:disabled { background: var(--bg); color: var(--text-muted); cursor: default; }

.ck-subrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-subrow-label { font-size: 12px; color: var(--text-muted); width: 140px; flex-shrink: 0; }
.ck-subrow .ck-input { flex: 1; min-width: 120px; }
.ck-subrow-notes { flex-basis: 100%; margin-top: 4px; min-height: 40px; }
.ck-subrow-link { color: var(--text-muted); display: flex; align-items: center; }
.ck-subrow-link .material-icons-round { font-size: 14px; }

.ck-field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ck-field-label { font-size: 12px; color: var(--text-muted); width: 120px; flex-shrink: 0; }
.ck-field-row .ck-input { flex: 1; }

.ck-ext-link {
    font-size: 11px; color: var(--blue); display: flex;
    align-items: center; gap: 2px; text-decoration: none;
    white-space: nowrap; margin-left: auto;
}
.ck-ext-link .material-icons-round { font-size: 13px; }
.ck-ext-link:hover { text-decoration: underline; }

.ck-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; }
.ck-list-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; background: var(--bg); border-radius: var(--radius-sm);
}
.ck-list-info { flex: 1; min-width: 0; }
.ck-list-main { font-size: 13px; color: var(--text); display: block; }
.ck-list-sub { font-size: 11px; color: var(--text-muted); display: block; }
.ck-list-del {
    color: var(--text-muted); background: none; border: none;
    cursor: pointer; padding: 2px; border-radius: 4px;
    display: flex; align-items: center;
}
.ck-list-del:hover { color: var(--danger); background: #fef2f2; }
.ck-list-del .material-icons-round { font-size: 16px; }

.ck-add-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.ck-add-inp {
    flex: 1; border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 5px 8px; font-size: 12px; font-family: inherit; color: var(--text);
}
.ck-add-inp--sm { flex: 0 0 130px; }
.ck-add-inp:focus { outline: none; border-color: var(--blue); border-style: solid; }
.ck-add-sel {
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
    padding: 5px 6px; font-size: 12px; font-family: inherit;
    background: #fff; color: var(--text); flex: 0 0 130px;
}
.ck-add-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    border: none; background: var(--blue); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ck-add-btn:hover { opacity: .85; }
.ck-add-btn .material-icons-round { font-size: 18px; }

.ck-vehicle-search {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light);
}
.ck-vehicle-search .ck-input { width: 100%; }

.ck-banks-btn {
    display: flex; align-items: center; gap: 6px;
    margin: 8px 0 4px; padding: 8px 14px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 13px;
    color: var(--text); cursor: pointer; width: 100%;
}
.ck-banks-btn:hover { background: #eef2ff; border-color: var(--blue); color: var(--blue); }
.ck-banks-btn .material-icons-round { font-size: 18px; }
.ck-banks-summary { font-size: 11px; color: var(--text-muted); margin-left: auto; }

.ck-contact-ico { font-size: 18px; color: var(--text-muted); width: 24px; flex-shrink: 0; }

.ck-sync-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin: 0 0 8px;
    background: #eff6ff; border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm); font-size: 12px; color: #1e40af;
}
.ck-sync-banner .material-icons-round { font-size: 18px; flex-shrink: 0; }
.ck-sync-banner span:nth-child(2) { flex: 1; }
.ck-sync-btn {
    border: none; background: var(--blue); color: #fff;
    padding: 5px 12px; border-radius: var(--radius-sm);
    font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ck-sync-btn:hover { opacity: .85; }

/* Модальне вікно банків */
.ck-modal-overlay {
    position: fixed; inset: 0; background: rgba(15,30,61,.45);
    display: flex; align-items: center; justify-content: center; z-index: 1100;
}
.ck-modal {
    background: #fff; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); width: min(900px,96vw);
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.ck-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.ck-modal-title { font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.ck-modal-search {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 10px; font-size: 13px; font-family: inherit;
}
.ck-modal-search:focus { outline: none; border-color: var(--blue); }
.ck-modal-close {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center; border-radius: 50%; padding: 4px;
}
.ck-modal-close:hover { background: var(--bg); color: var(--text); }
.ck-modal-legend {
    padding: 8px 20px; font-size: 11px; color: var(--text-muted);
    display: flex; align-items: center; gap: 4px;
    border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.ck-modal-legend .ck-dot { pointer-events: none; }
.ck-modal-body { overflow-y: auto; flex: 1; }

.ck-banks-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ck-banks-table th {
    background: transparent; color: var(--text-muted);
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: 8px 12px; text-align: left;
    border-bottom: 1px solid var(--border-light);
    position: sticky; top: 0; background: #fff; z-index: 1;
}
.ck-banks-table td {
    padding: 7px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle;
}
.ck-banks-table tr:hover td { background: #f8fafc; }
.ck-banks-copy-cell { white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.ck-banks-status-cell { text-align: center; }
.ck-banks-check-cell { text-align: center; }

.ck-copy-btn {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 3px; border-radius: 4px; display: flex; align-items: center;
}
.ck-copy-btn:hover { background: var(--bg); color: var(--blue); }
.ck-copy-btn .material-icons-round { font-size: 15px; }

.ck-chk { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue); }

/* ============================================================
   DASHBOARD — Дашборд виконавця
   ============================================================ */

/* ── KPI-рядок (компактні чіпи) ───────────────────────────── */
/* KPI-рядок: 4fr 2.5fr 2.5fr 3fr — зеркало колонок 4fr|5fr|3fr */
.dash-kpi-row {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(0,2.5fr) minmax(0,2.5fr) minmax(0,3fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 1200px) {
    .dash-kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
    .dash-kpi-row { grid-template-columns: 1fr 1fr; }
}
.dash-kpi-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
}
.dash-kpi-chip:hover {
    border-color: var(--blue-light);
    box-shadow: var(--shadow-sm);
}
.dash-kpi-chip.danger {
    background: var(--danger-bg);
    border-color: var(--danger);
}
.dash-kpi-chip.danger .dash-kpi-ico { color: var(--danger); }
.dash-kpi-chip.danger .dash-kpi-val { color: var(--danger); }

.dash-kpi-ico {
    font-size: 20px;
    color: var(--text-muted);
    opacity: .55;
    flex-shrink: 0;
}
.dash-kpi-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.dash-kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* ── Сітка дашборду: 2 рядки × 3 колонки ───────────────────── */
/*    Ряд 1: Вимоги | Воронка | Фінанси                        */
/*    Ряд 2: Завдання | Активність (span 2 cols)                */
.dash-main-grid {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
    grid-template-rows: minmax(270px, auto) minmax(220px, auto);
    gap: 16px;
    margin-bottom: 16px;
}

/* ── Позиціювання областей ─────────────────────────────────── */
.dash-area {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dash-area-demands   { grid-column: 1; grid-row: 1; }
.dash-area-pipeline  { grid-column: 2; grid-row: 1; }
.dash-area-financial { grid-column: 3; grid-row: 1; }
.dash-area-tasks     { grid-column: 1; grid-row: 2; }
.dash-area-activity  { grid-column: 2 / 4; grid-row: 2; }
.dash-area-worklog   { grid-column: 1 / 4; grid-row: 3; }

/* Картка розтягується на всю висоту своєї клітинки */
.dash-area > .dash-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Тіло картки скролить якщо контент не вміщається */
.dash-area > .dash-card > .dash-card-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dash-main-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .dash-area-demands   { grid-column: 1; grid-row: 1; }
    .dash-area-pipeline  { grid-column: 2; grid-row: 1; }
    .dash-area-financial { grid-column: 1; grid-row: 2; }
    .dash-area-tasks     { grid-column: 2; grid-row: 2; }
    .dash-area-activity  { grid-column: 1 / 3; grid-row: 3; }
    .dash-area-worklog   { grid-column: 1 / 3; grid-row: 4; }
}
@media (max-width: 720px) {
    .dash-main-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .dash-area-demands,
    .dash-area-pipeline,
    .dash-area-financial,
    .dash-area-tasks,
    .dash-area-activity,
    .dash-area-worklog { grid-column: 1; grid-row: auto; }
}

/* ── Картки ────────────────────────────────────────────────── */
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dash-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg);
}
.dash-card-link {
    margin-left: auto;
    font-size: 11px;
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.dash-card-link:hover { text-decoration: underline; }

.dash-card-ico { font-size: 16px; opacity: .6; }
.danger-ico { color: var(--danger) !important; opacity: 1 !important; }
.blue-ico   { color: var(--blue)   !important; opacity: 1 !important; }
.accent-ico { color: var(--accent) !important; opacity: 1 !important; }

.dash-card-body { padding: 0; }

/* ── Загальні рядки списків ────────────────────────────────── */
.dash-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    transition: background .12s;
    min-width: 0;
}
.dash-list-row:hover { background: var(--bg); }
.dash-list-left {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}
.dash-type-chip {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    background: #edf0f8;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.dash-list-name {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;   /* без цього flex-елемент не стискається і ellipsis не спрацьовує → текст тягне рядок за край */
}
.dash-list-date {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.dash-list-date.overdue { color: var(--danger); font-weight: 600; }

.dash-task-ico {
    font-size: 16px;
    color: var(--text-light);
    flex-shrink: 0;
}

/* ── Воронка лідів ─────────────────────────────────────────── */
.dash-pipe-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    transition: background .12s;
}
.dash-pipe-row:hover { background: var(--bg); }
.dash-pipe-label {
    font-size: 11px;
    color: var(--text-muted);
    width: 110px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-pipe-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.dash-pipe-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
    min-width: 4px;
}
.dash-pipe-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    width: 26px;
    text-align: right;
    flex-shrink: 0;
}

/* ── Фінанси місяця ────────────────────────────────────────── */
.dash-fin-body { padding: 4px 0 !important; }
.dash-fin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-light);
}
.dash-fin-row:last-child { border-bottom: none; }
.dash-fin-label {
    font-size: 12px;
    color: var(--text-muted);
}
.dash-fin-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    font-family: 'Unbounded', sans-serif;
}
.dash-fin-val.accent { color: var(--accent); }

/* ── Активність ────────────────────────────────────────────── */
.dash-act-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    transition: background .12s;
}
.dash-act-item:hover { background: var(--bg); }
.dash-act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.dash-act-body { flex: 1; min-width: 0; }
.dash-act-title {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-act-sub {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-act-ts {
    font-size: 10px;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Спільні утиліти ───────────────────────────────────────── */
.dash-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.dash-loading {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--text-muted);
}
.dash-see-all {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--blue);
    padding: 7px 14px;
    text-decoration: none;
    border-top: 1px solid var(--border-light);
}
.dash-see-all:hover { background: var(--bg); }

/* ── Місячна аналітика ─────────────────────────────────────── */
.dash-analytics-wrap { margin-bottom: 8px; }

.dash-month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.dash-month-label {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    min-width: 170px;
    text-align: center;
}
.dash-month-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
}
.dash-month-btn:hover { background: var(--bg); border-color: var(--blue-light); color: var(--blue); }
.dash-month-btn .material-icons-round { font-size: 20px; }

.dash-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 800px) {
    .dash-analytics-grid { grid-template-columns: 1fr; }
}

.dash-analytic-card { padding: 18px 20px; }

/* Заголовок секції аналітики */
.dash-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.dash-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.dash-section-count {
    font-family: 'Unbounded', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

/* Рядок чіпів закритих ВП */
.dash-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dash-stat-chip {
    flex: 1;
    min-width: 100px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 8px 12px;
}
.dash-stat-chip.accent {
    background: var(--accent-light);
    border-color: rgba(232,160,32,.35);
}
.dash-stat-chip-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 3px;
}
.dash-stat-chip-val {
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.dash-stat-chip.accent .dash-stat-chip-val { color: var(--accent); }

/* Таблиці розбивки */
.dash-bd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .dash-bd-grid { grid-template-columns: 1fr; }
}
.dash-bd-col { min-width: 0; }
.dash-bd-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.dash-bd-table { width: 100%; border-collapse: collapse; }
.dash-bd-table tr + tr td { border-top: 1px solid var(--border-light); }
.dash-bd-name {
    padding: 5px 0;
    font-size: 12px;
    color: var(--text);
}
.dash-bd-val {
    padding: 5px 0 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    text-align: right;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Адмінпрактика (вкладка «admin» у proceeding.js)
══════════════════════════════════════════════════════════════════════════════ */

/* Pipeline */
.ap-pipeline { display: flex; align-items: center; gap: 0; }
.ap-pipe-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--border); border: 2px solid var(--border); flex-shrink: 0; transition: background .2s, border-color .2s;
}
.ap-pipe-dot.done   { background: var(--success); border-color: var(--success); }
.ap-pipe-dot.active { background: var(--blue);    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.ap-pipe-line { flex: 1; min-width: 10px; height: 2px; background: var(--border); transition: background .2s; }
.ap-pipe-line.done  { background: var(--success); }
.ap-pipe-step-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-top: 3px; text-align: right; }

/* Cards */
.ap-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.ap-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; transition: background .15s; }
.ap-card-head:hover { background: var(--bg); }
.ap-card-del {
    flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
    transition: color .15s, background .15s;
}
.ap-card-del:hover { color: var(--danger); background: rgba(239,68,68,.08); }
.ap-card-head-info { flex: 1; min-width: 0; }
.ap-card-title    { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ap-card-pipe     { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ap-card-arrow    { color: var(--text-muted); flex-shrink: 0; transition: transform 0.22s; }
.ap-card-arrow.open { transform: rotate(180deg); }

/* Smooth expand / collapse */
.ap-card-body {
    max-height: 0; overflow: hidden; background: var(--bg);
    border-top: 1px solid transparent; padding: 0 16px;
    transition: max-height .28s ease, padding .25s ease, border-top-color .1s;
}
.ap-card-body.open { max-height: 3000px; padding: 16px; border-top-color: var(--border-light); }

/* Step sections */
.ap-step-section { padding-bottom: 16px; }
.ap-step-section + .ap-step-section { border-top: 1px dashed var(--border-light); padding-top: 16px; }
.ap-step-section:last-child { padding-bottom: 0; }
.ap-step-label {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.ap-step-label.done { color: var(--success); }
.ap-step-label.done::before { content: '✓'; font-size: 11px; }
.ap-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ap-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.ap-field-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.ap-inp { font-size: 13px !important; padding: 6px 10px !important; }
select.ap-inp { height: 32px; padding: 0 8px !important; }

/* Radio group — тип порушення (крок 1) */
.ap-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-radio-label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .15s, background .15s; user-select: none;
}
.ap-radio-label:hover { border-color: var(--blue-light); background: #f0f4ff; }
.ap-radio-label input[type="radio"] { width: 14px; height: 14px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
.ap-radio-label.selected { border-color: var(--blue); background: #eff6ff; color: var(--blue); font-weight: 500; }

/* Toggle — явка (крок 3) */
.ap-toggle-group { display: flex; }
.ap-toggle-btn {
    padding: 5px 12px; font-size: 12px; cursor: pointer; border: 1px solid var(--border);
    background: #fff; color: var(--text-muted); transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.ap-toggle-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ap-toggle-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.ap-toggle-btn.active-not-appeared { background: #fef2f2; color: var(--danger);  border-color: var(--danger);  font-weight: 600; }
.ap-toggle-btn.active-appeared     { background: #f0fdf4; color: var(--success); border-color: var(--success); font-weight: 600; }

/* Групи полів особи (крок 4) */
.ap-person-group { margin-bottom: 12px; }
.ap-person-group-label { font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); }

/* Revision cards */
.ap-rev-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ap-rev-card { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); padding: 12px 14px; }


/* ── Модаль закриття провадження ──────────────────────────────────────────── */
.cp-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9300; display:none; align-items:center; justify-content:center; padding:16px; }
.cp-modal-overlay.open { display:flex; }
.close-proc-modal { background:#fff; border-radius:var(--radius-xl); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }

.close-proc-head { display:flex; align-items:center; justify-content:space-between; padding:16px 24px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.close-proc-head-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--navy); }
.close-proc-head-title .material-icons-round { font-size:18px; color:var(--text-muted); }
.close-proc-x { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:0; display:flex; align-items:center; }
.close-proc-x .material-icons-round { font-size:20px; }
.close-proc-x:hover { color:var(--text); }
.cp-subhead { padding:8px 24px 10px; font-size:12px; color:var(--text-muted); background:var(--bg); border-bottom:1px solid var(--border-light); flex-shrink:0; }
.cp-subhead strong { color:var(--navy); }

.close-proc-body { padding:20px 24px 16px; display:flex; flex-direction:column; gap:16px; flex:1; }

/* Мітка секції */
.cp-section-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }

/* Картки результату */
.cp-outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cp-outcome-card { border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 10px; cursor:pointer; text-align:center; transition:var(--transition); }
.cp-outcome-card:hover:not(.selected) { border-color:var(--text-muted); background:var(--bg); }
.cp-oc-icon { font-size:22px; display:block; margin-bottom:6px; color:var(--text-muted); }
.cp-oc-title { font-size:13px; font-weight:600; color:var(--text); }
.cp-oc-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.cp-outcome-card.selected.outcome-enforced { border-color:var(--success); background:var(--success-bg); }
.cp-outcome-card.selected.outcome-enforced .cp-oc-icon,
.cp-outcome-card.selected.outcome-enforced .cp-oc-title { color:var(--success); }
.cp-outcome-card.selected.outcome-returned { border-color:var(--accent); background:var(--accent-light); }
.cp-outcome-card.selected.outcome-returned .cp-oc-icon,
.cp-outcome-card.selected.outcome-returned .cp-oc-title { color:#9a6a10; }
.cp-outcome-card.selected.outcome-closed { border-color:var(--blue-light); background:rgba(30,79,194,.06); }
.cp-outcome-card.selected.outcome-closed .cp-oc-icon,
.cp-outcome-card.selected.outcome-closed .cp-oc-title { color:var(--blue); }

/* Пілюлі підстав */
.cp-basis-area { margin-top:-4px; }
.cp-pill-grid { display:flex; flex-wrap:wrap; gap:6px; }
.cp-pill-grid--2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cp-pill { border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; cursor:pointer; transition:var(--transition); line-height:1.3; }
.cp-pill:hover:not(.selected) { border-color:var(--text-muted); background:var(--bg); }
.cp-pill.selected { border-color:var(--blue-light); background:rgba(30,79,194,.07); }
.cp-pill-para { font-size:10px; font-weight:700; color:var(--text-muted); display:block; margin-bottom:2px; letter-spacing:.04em; }
.cp-pill.selected .cp-pill-para { color:var(--blue); }
.cp-pill-label { font-size:12px; color:var(--text); display:block; }
.cp-pill-grid--2 .cp-pill { padding:10px 14px; }
.cp-pill-grid--2 .cp-pill-label { font-size:13px; font-weight:500; }

/* Фінансовий блок */
.cp-fin-box { background:var(--bg); border-radius:var(--radius); padding:2px 14px; }
.cp-fin-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-light); }
.cp-fin-label { font-size:13px; color:var(--text-muted); }
.cp-fin-inp-wrap { display:flex; align-items:center; gap:6px; }
.cp-fin-inp { width:120px; font-size:13px; text-align:right; padding:4px 8px; height:30px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; color:var(--text); background:#fff; }
.cp-fin-inp:focus { outline:none; border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(30,79,194,.1); }
.cp-fin-currency { font-size:12px; color:var(--text-muted); min-width:12px; }
.cp-extra-rows { display:none; }
.cp-extra-rows.open { display:block; }
.cp-more-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:12px; padding:8px 0 2px; display:flex; align-items:center; gap:4px; font-family:inherit; }
.cp-more-btn:hover { color:var(--text); }
.cp-more-btn .material-icons-round { font-size:14px; }
.cp-fin-total { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 8px; border-top:1px solid var(--border); margin-top:6px; }
.cp-fin-total-lbl { font-size:12px; color:var(--text-muted); }
.cp-fin-total-val { font-size:16px; font-weight:700; color:var(--navy); }

/* Поле дати */
.cp-date-inp { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:13px; width:180px; box-sizing:border-box; font-family:inherit; color:var(--text); }
.cp-date-inp:focus { outline:none; border-color:var(--blue-light); box-shadow:0 0 0 3px rgba(30,79,194,.1); }

.close-proc-foot { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px 20px; border-top:1px solid var(--border); flex-shrink:0; }
.close-proc-btn { padding:9px 18px; border-radius:var(--radius); border:1px solid var(--border); background:#fff; cursor:pointer; font-size:13px; font-weight:500; font-family:inherit; transition:var(--transition); }
.close-proc-btn:hover { border-color:var(--text-muted); }
.close-proc-btn-success { background:var(--success); color:#fff; border-color:var(--success); display:flex; align-items:center; gap:6px; }
.close-proc-btn-success:hover:not(:disabled) { background:#156e48; border-color:#156e48; }
.close-proc-btn-success:disabled { opacity:.6; cursor:not-allowed; }
.close-proc-btn-success .material-icons-round { font-size:16px; }

/* Кнопка відкриття модалі */
.proc-hero-close-btn {
    display:flex; align-items:center; justify-content:center; gap:5px;
    padding:8px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--danger); background:transparent;
    color:var(--danger); font-size:11px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:var(--transition);
    white-space:nowrap; flex-shrink:0; align-self:stretch;
}
.proc-hero-close-btn:hover { background:var(--danger); color:#fff; }
.proc-hero-close-btn .material-icons-round { font-size:14px; }

/* Банер закритого ВП */
.proc-closed-banner { display:flex; align-items:center; gap:12px; margin-top:20px; padding:14px 16px; background:#f1f5f9; border-radius:var(--radius); border-left:4px solid var(--text-muted); }
.proc-closed-banner .material-icons-round { font-size:22px; color:var(--text-muted); flex-shrink:0; }
.proc-closed-banner-title { font-size:13px; font-weight:600; color:var(--text); }
.proc-closed-banner-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ── Теги проваджень ───────────────────────────────────────────────────────── */
.proc-tag-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 6px; border-radius:20px; font-size:11px; font-weight:500; white-space:nowrap; cursor:default; }
.proc-tag-dot  { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* Фільтр-рядок тегів на сторінці проваджень */
.tag-filter-bar  { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px 0 10px; }
.tag-filter-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; margin-right:2px; }
.tag-filter-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer; border:1.5px solid var(--border); background:white; color:var(--text-muted); transition:all .15s; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.tag-filter-chip:hover { color:var(--text); box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.tag-filter-chip.active { border-width:2px; color:inherit; box-shadow:0 2px 8px rgba(15,23,42,0.14); }
.tag-filter-chip .tag-filter-count { font-size:10px; font-weight:600; opacity:.7; }

/* Управління тегами у service.html */
.tag-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:white; border-radius:var(--radius); border:1.5px solid var(--border-light); margin-bottom:6px; transition:var(--transition); }
.tag-item:hover { border-color:var(--border); }
.tag-item.dragging { opacity:.45; }
.tag-item.drag-over { border-color:var(--blue-light); background:#f0f4ff; }
.tag-drag-handle { color:var(--text-light); cursor:grab; font-size:18px; flex-shrink:0; }
.tag-drag-handle:active { cursor:grabbing; }
.tag-color-btn { width:22px; height:22px; border-radius:50%; border:none; cursor:pointer; padding:0; flex-shrink:0; position:relative; overflow:hidden; }
.tag-color-btn input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }
.tag-name-inp { flex:1; height:28px; padding:0 8px; border:1.5px solid transparent; border-radius:6px; font-family:'Geologica',sans-serif; font-size:13px; color:var(--text); background:transparent; outline:none; transition:border-color .15s; }
.tag-name-inp:hover { border-color:var(--border); background:white; }
.tag-name-inp:focus { border-color:var(--blue-light); background:white; }
.tag-delete-btn { background:none; border:none; cursor:pointer; color:var(--text-light); padding:4px; border-radius:4px; display:flex; transition:var(--transition); flex-shrink:0; }
.tag-delete-btn:hover { color:var(--danger); background:#fff1f1; }
.tag-add-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.tag-add-color { width:22px; height:22px; border-radius:50%; border:none; cursor:pointer; padding:0; flex-shrink:0; position:relative; overflow:hidden; }
.tag-add-color input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; border:none; padding:0; }
.tag-add-input { flex:1; height:34px; padding:0 10px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:'Geologica',sans-serif; font-size:13px; outline:none; transition:border-color .15s; }
.tag-add-input:focus { border-color:var(--blue-light); }
.tag-add-btn { height:34px; padding:0 16px; background:var(--navy); color:white; border:none; border-radius:var(--radius); font-family:'Geologica',sans-serif; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; transition:var(--transition); }
.tag-add-btn:hover { background:var(--blue); }
.tag-add-btn:disabled { opacity:.5; cursor:default; }

/* ============================================================
   Скан ВД — секція у бічній панелі ліда і вкладці провадження
   ============================================================ */

.scan-section { margin-top: 4px; }

/* Рядок з іконкою, назвою файлу і кнопками */
.scan-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.scan-file-ico { color: var(--blue); font-size: 20px; flex-shrink: 0; }
.scan-file-name {
    flex: 1;
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scan-file-size { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.scan-view-btn {
    height: 28px;
    padding: 0 12px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
}
.scan-view-btn:hover { background: var(--navy); }
.scan-view-btn .material-icons-round { font-size: 16px; }
.scan-delete-btn {
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.scan-delete-btn:hover { color: var(--danger); border-color: var(--danger); background: #fff1f1; }
.scan-delete-btn .material-icons-round { font-size: 16px; }

/* Зона завантаження (якщо скан відсутній) */
.scan-upload-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}
.scan-upload-btn {
    height: 32px;
    padding: 0 14px;
    background: none;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}
.scan-upload-btn:hover { border-color: var(--blue); color: var(--blue); background: #f0f4ff; }
.scan-upload-btn .material-icons-round { font-size: 16px; }

/* Повноекранний переглядач скану */
.scan-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 3000;
    display: none;
    flex-direction: column;
}
.scan-viewer-overlay.open { display: flex; }
.scan-viewer-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(15,30,61,0.95);
    flex-shrink: 0;
}
.scan-viewer-back {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-family: 'Geologica', sans-serif;
    opacity: .8;
    transition: opacity .15s;
    padding: 4px 8px;
    border-radius: 6px;
}
.scan-viewer-back:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.scan-viewer-back .material-icons-round { font-size: 18px; }
.scan-viewer-title {
    flex: 1;
    color: white;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scan-viewer-download {
    height: 32px;
    padding: 0 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-family: 'Geologica', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    text-decoration: none;
}
.scan-viewer-download:hover { background: rgba(255,255,255,0.2); }
.scan-viewer-download .material-icons-round { font-size: 16px; }
.scan-viewer-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.scan-viewer-body iframe,
.scan-viewer-body img {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    background: white;
}

/* ── Секція «Віджет для сайту» (office.html) ──────────────────────────────── */
.widget-info-box {
    background: rgba(59,130,246,.06);
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.widget-info-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 8px;
}
.widget-info-title .material-icons-round { font-size: 16px; }
.widget-info-text { font-size: 13px; color: var(--text); line-height: 1.6; }

.widget-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.widget-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.widget-logo-preview {
    width: 120px; height: 64px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    flex-shrink: 0;
    overflow: hidden;
}
.widget-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.widget-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

.widget-colors-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.widget-color-item {}
.widget-color-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.widget-color-row { display: flex; align-items: center; gap: 8px; }
.widget-color-inp {
    width: 48px; height: 36px;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    background: none;
}
.widget-color-reset {
    background: none; border: 1px solid var(--border); border-radius: 6px;
    padding: 6px; cursor: pointer; color: var(--text-muted);
    display: flex; align-items: center;
    transition: var(--transition);
}
.widget-color-reset:hover { border-color: var(--text-muted); color: var(--text); }
.widget-color-reset .material-icons-round { font-size: 14px; }

.widget-code-wrap {
    position: relative;
    margin-bottom: 6px;
}
.widget-code-ta {
    width: 100%;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px 44px 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    resize: none;
    outline: none;
}
.widget-code-copy {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px;
    cursor: pointer;
    display: flex; align-items: center;
    color: var(--text-muted);
    transition: var(--transition);
}
.widget-code-copy:hover { color: var(--navy); border-color: var(--navy); }
.widget-code-copy .material-icons-round { font-size: 15px; }

.widget-how-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.widget-how-item { display: flex; gap: 14px; align-items: flex-start; }
.widget-how-num {
    width: 28px; height: 28px; flex-shrink: 0;
    background: var(--navy);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    margin-top: 1px;
}
.widget-how-content {}
.widget-how-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.widget-how-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.widget-alt-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(15,30,61,.04);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
}

/* ── Notifications ──────────────────────────────────────────────────────────── */
.notif-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    background: var(--danger);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

.notif-section { padding: 4px 0; }

.notif-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 4px;
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}

.notif-read-all-btn {
    background: none; border: none; cursor: pointer;
    font-size: 11px; color: var(--blue); padding: 0;
}
.notif-read-all-btn:hover { text-decoration: underline; }

.notif-item {
    padding: 8px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { border-left-color: var(--blue); background: #f0f7ff; }

.notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-item-body  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-item-time  { font-size: 11px; color: var(--text-light); margin-top: 2px; }

/* ═══════════════ Кабінет стягувача — «Справи» ═══════════════ */
.mt-section { max-width: 680px; }
.mt-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.mt-section-title {
    font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy);
}
.mt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mt-field { display: flex; flex-direction: column; gap: 5px; }
.mt-field.full { grid-column: 1 / -1; }
.mt-field-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.mt-stage-badge {
    display: inline-block; padding: 3px 11px; border-radius: 12px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.mt-track { font-size: 11px; color: var(--text-light); margin-left: auto; }

/* Випадаюча підказка автодоповнення — спільна для address-input.js (нас. пункт КАТОТТГ)
   і адмінського пошуку нас. пункту (admin.html «Відділи ДВС»). Раніше була продубльована
   лише в admin.html — перенесено сюди, бо address-input.js рендериться на кількох сторінках. */
.dvs-drop {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: white; border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; margin-top: 4px;
}
.dvs-drop-item { padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-light); }
.dvs-drop-item:last-child { border-bottom: none; }
.dvs-drop-item:hover { background: var(--bg); }
.dvs-drop-item .dvs-drop-sub { font-size: 11px; color: var(--text-muted); }

/* Стягувач і Відповідачі — дві рівнозначні сторони справи, показані на одному рівні.
   minmax(0,1fr), а не просто 1fr: інакше ширший вміст (кнопка «Додати відповідача» в шапці)
   продавлює свою колонку і робить дві сторони візуально нерівнозначними. */
.mt-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 720px) { .mt-two-col { grid-template-columns: 1fr; } }

/* Картка справи у списку */
.mt-list-card {
    background: white; border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; transition: var(--transition);
}
.mt-list-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
@media (hover: none) { .mt-list-card:hover { transform: none; } }
.mt-list-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mt-list-title { font-weight: 600; color: var(--navy); }
.mt-list-court { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.mt-list-meta { display: flex; gap: 18px; font-size: 12px; color: var(--text-muted); }
.mt-chip { display: inline-flex; align-items: center; gap: 5px; }
.mt-chip .material-icons-round { font-size: 15px; }

/* Відповідачі */
.mt-def-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg); padding: 10px 14px; border-radius: var(--radius-sm);
}
.mt-def-name { font-weight: 600; }
.mt-def-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.mt-del-btn {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.mt-del-btn:hover { color: var(--danger); background: #fef2f2; }

/* Виконавчі документи */
.mt-vd-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--border-light); padding: 12px 14px; border-radius: var(--radius);
}
.mt-vd-title { font-weight: 600; color: var(--navy); }
.mt-vd-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 3px; }
.mt-vd-status {
    padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mt-deadline-warn { color: var(--danger); font-weight: 600; }
.mt-empty { font-size: 13px; color: var(--text-light); padding: 6px 0; }

/* Прогрес-бар стадій справи (journey) */
.mt-journey {
    display: flex; align-items: center;
    background: white; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 24px;
    margin-bottom: 20px; max-width: 680px; gap: 0;
}
.mt-journey-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.mt-journey-node {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Unbounded', sans-serif; font-size: 12px; font-weight: 700;
    transition: var(--transition);
}
.mt-journey-node.done { background: var(--success); color: white; }
.mt-journey-node.done .material-icons-round { font-size: 16px; }
.mt-journey-node.current { background: var(--navy); color: white; box-shadow: 0 0 0 4px rgba(15,30,61,.15); }
.mt-journey-node.future { background: white; color: var(--text-muted); border: 2px solid var(--border); }
.mt-journey-line { flex: 1; height: 2px; background: var(--border); min-width: 16px; }
.mt-journey-line.done { background: var(--success); }
.mt-journey-label { font-size: 11px; font-weight: 600; white-space: nowrap; }
.mt-journey-label.done { color: var(--success); }
.mt-journey-label.current { color: var(--navy); }
.mt-journey-label.future { color: var(--text-light); }

/* Секція-розділювач всередині картки даних справи */
.mt-form-section { padding-top: 18px; border-top: 1px solid var(--border-light); margin-top: 18px; }
.mt-form-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mt-form-section-title { font-size: 13px; font-weight: 700; color: var(--navy); }

/* Підказка-контекст (amber) */
.mt-hint {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 12px; color: #78350f; margin-bottom: 12px; line-height: 1.5;
}
.mt-hint .material-icons-round { font-size: 16px; color: #d97706; flex-shrink: 0; margin-top: 1px; }

/* Крос-навігація «Справа ↔ ВД ↔ Провадження» — власний виразний рядок, окремо від фінансових даних.
   Іконки навмисно повторюють іконки відповідних пунктів сайдбару (gavel/description/assignment_turned_in),
   щоб користувач одразу впізнавав куди веде посилання. */
.rel-links-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.rel-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border-light);
    color: var(--navy); font-size: 12px; font-weight: 600;
    text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.rel-link:hover { background: #eef2ff; border-color: var(--blue-light); color: var(--blue); }
.rel-link .material-icons-round { font-size: 15px; }

/* «Момент успіху» стягувача — виконавець щойно прийняв ВД (ready_to_present).
   Навмисно виразний/святковий блок: це єдина мить радості в усьому процесі подання. */
.mt-celebrate-box {
    background: linear-gradient(135deg, #e8f5ee 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-top: 10px;
}
.mt-celebrate-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Unbounded', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--success); margin-bottom: 4px;
}
.mt-celebrate-title .material-icons-round { font-size: 20px; }
.mt-celebrate-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.mt-celebrate-delivery {
    display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-muted);
    padding: 8px 10px; background: rgba(255, 255, 255, .6); border-radius: 8px; margin-bottom: 12px;
}
.mt-celebrate-delivery .material-icons-round { font-size: 15px; color: var(--success); }

.btn-celebrate {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 20px;
    background: linear-gradient(135deg, #22c56e 0%, #1a8a5a 100%);
    color: #fff; border: none; border-radius: var(--radius);
    font-family: 'Geologica', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; box-shadow: 0 3px 10px rgba(26, 138, 90, .35);
    transition: var(--transition);
}
.btn-celebrate:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(26, 138, 90, .45); }
@media (hover: none) { .btn-celebrate:hover { transform: none; } }
.btn-celebrate:active { transform: translateY(0); }
.btn-celebrate:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-celebrate .material-icons-round { font-size: 18px; }

/* Модалка */
.mt-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 30, 61, .55);
    z-index: 1000; align-items: center; justify-content: center;
}
.mt-overlay.open { display: flex; }
.mt-modal { max-width: 560px; width: 92%; max-height: 90vh; overflow-y: auto; }
.mt-modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }

/* ═══════════════ Стягувачі представника — плитки (creditor_parties.html) ═══════════════ */
.party-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.party-tile {
    display: flex; flex-direction: column; gap: 10px;
    background: white; border: 1.5px solid var(--border);
    border-radius: var(--radius-xl); padding: 20px;
    transition: var(--transition);
}
.party-tile:hover { border-color: var(--blue-light); box-shadow: var(--shadow); }
.party-tile-head { display: flex; align-items: flex-start; gap: 12px; }
.party-tile-ico {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--blue);
}
.party-tile-name { font-weight: 600; font-size: 15px; color: var(--navy); line-height: 1.3; overflow-wrap: anywhere; }
.party-tile-code { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.party-tile-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.party-tile-badge {
    font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px;
    background: #ede9fe; color: #5b21b6;
}
.party-tile-badge.gov { background: #fef3c7; color: #92400e; }
.party-tile-rows { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text); flex: 1; }
.party-tile-row { display: flex; gap: 6px; min-width: 0; }
.party-tile-row .material-icons-round { font-size: 14px; color: var(--text-light); flex-shrink: 0; margin-top: 2px; }
.party-tile-row span:last-child { overflow-wrap: anywhere; }
.party-tile-actions { display: flex; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border-light); }

/* Рядок з чекбоксом у формах кабінету стягувача (модалки Party / народження ВД) */
.check-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.35;
}
.check-row input[type="checkbox"] { margin-top: 1px; }
.check-row-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ═══ Звірення дублів ВД (Крок A) — екран порівняння «зразок ↔ кандидати» у модалці «Додати провадження» ═══ */
.rec-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 14px;
    margin-bottom: 14px;
}
.rec-question {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 10px;
}
.rec-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    align-items: start;
}
.rec-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.rec-card.rec-sample { border-style: dashed; }
.rec-card.rec-cand.selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 2px var(--blue-light);
}
.rec-card-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    margin-bottom: 2px;
}
.rec-field { display: flex; flex-direction: column; gap: 1px; }
.rec-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-light); }
.rec-field-value { font-size: 13px; line-height: 1.35; word-break: break-word; }
.rec-field-value.rec-same { color: var(--text-muted); }
.rec-field-value.rec-diff {
    color: var(--text); font-weight: 600;
    background: #fff7e0;
    border-radius: var(--radius-sm);
    padding: 1px 5px;
    align-self: flex-start;
}
.rec-yes-btn {
    margin-top: 8px;
    border: 1px solid var(--success); background: var(--success); color: #fff;
    border-radius: var(--radius-sm); padding: 7px 12px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.rec-yes-btn:hover { filter: brightness(1.07); }
.rec-btn-row { margin-top: 10px; display: flex; justify-content: flex-end; }
.rec-no-btn {
    border: 1px solid var(--border); background: #fff; color: var(--text);
    border-radius: var(--radius-sm); padding: 7px 12px;
    font-size: 13px; cursor: pointer; transition: var(--transition);
}
.rec-no-btn:hover { border-color: var(--blue); color: var(--blue); }
.rec-choice-note {
    margin-top: 10px; font-size: 12px; color: var(--text-muted);
    border-left: 3px solid var(--blue); padding-left: 8px; line-height: 1.4;
}
.rec-hard-banner {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fdeaea; border: 1px solid var(--danger);
    border-radius: var(--radius); padding: 10px 12px;
    font-size: 13px; color: var(--text); line-height: 1.45;
    margin-bottom: 10px;
}
.rec-hard-banner .material-icons-round { color: var(--danger); font-size: 20px; }
.rec-own-note {
    font-size: 12px; color: var(--text-muted); line-height: 1.45;
    border-left: 3px solid var(--accent); padding-left: 8px;
    margin-bottom: 10px;
}

/* ── Дублі у власному кабінеті (Крок D щита цілісності): підказка в панелі ліда ── */
.dup-hint {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: #f0f4ff; border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius); padding: 9px 12px;
    font-size: 13px; color: var(--text); line-height: 1.4;
    margin-bottom: 10px;
}
.dup-hint .material-icons-round { color: var(--blue); font-size: 18px; }
.dup-hint-text { flex: 1; min-width: 180px; }
.dup-hint-btn {
    border: 1px solid var(--blue); background: #fff; color: var(--blue);
    border-radius: var(--radius-sm); padding: 5px 12px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.dup-hint-btn:hover { background: var(--blue); color: #fff; }

/* ── Системні тікети підтримки (Крок B щита цілісності ВД): витяг АСВП + порівняння ── */
.sys-kind-row { margin-top: 10px; }
.sys-kind-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd;
}
.sys-nums-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sys-num-chip {
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 14px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
}
.sys-resolution-box {
    font-size: 12.5px; line-height: 1.5; color: var(--text);
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm);
    padding: 10px 12px; margin-top: 4px; white-space: pre-wrap;
}
.sys-resolve-hint {
    font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 8px;
    border-left: 3px solid var(--accent); padding-left: 8px;
}
.sys-extract-section { margin-top: 16px; border-top: 1px solid var(--border-light); padding-top: 14px; }
.sys-extract-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.sys-upload-btn { display: inline-flex; align-items: center; gap: 6px; }
.sys-cmp-wrap { display: flex; flex-direction: column; gap: 14px; }
.sys-cmp-empty { font-size: 12.5px; color: var(--text-muted); padding: 8px 0; }
.sys-cmp-block {
    border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 12px 14px; background: white;
}
.sys-cmp-num-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.sys-cmp-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 12.5px; }
.sys-cmp-table th {
    background: transparent; color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-light);
}
.sys-cmp-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); }
.sys-cmp-table tr.cmp-same td { color: var(--text-muted); }
.sys-cmp-table tr.cmp-diff td { background: #fef2f2; color: var(--danger); font-weight: 600; }
.sys-release-btn {
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 7px 14px; border-radius: var(--radius-sm);
    background: transparent; color: var(--danger); border: 1.5px solid var(--danger);
    transition: var(--transition);
}
.sys-release-btn:hover { background: var(--danger); color: white; }

/* ─── Портфель представника (D6: creditor_portfolio) ───────────────────────── */
.pf-totals { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pf-total-chip {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 180px;
    padding: 14px 16px; background: white; border: 1px solid var(--border-light);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.pf-total-chip .material-icons-round { font-size: 26px; color: var(--blue); flex-shrink: 0; }
.pf-total-val { font-family: 'Unbounded', sans-serif; font-size: 19px; font-weight: 600; color: var(--navy); }
.pf-total-lbl { font-size: 12px; color: var(--text-muted); }

.pf-card {
    display: block; text-decoration: none; color: inherit;
    background: white; border: 1px solid var(--border-light); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 12px;
    transition: var(--transition);
}
a.pf-card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
@media (hover: none) { a.pf-card:hover { transform: none; } }
.pf-card-head { display: flex; align-items: center; gap: 12px; }
.pf-card-ico { font-size: 30px; color: var(--blue); flex-shrink: 0; }
.pf-card-name { font-size: 15px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card-code { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pf-card-arrow { color: var(--text-light); flex-shrink: 0; }
.pf-card-stats { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.pf-stat { display: flex; align-items: baseline; gap: 6px; }
.pf-stat-num { font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy); }
.pf-stat-lbl { font-size: 12px; color: var(--text-muted); }
.pf-card-amount { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--text); }

/* Банер drill-down у списку ВД (?creditor=) */
.doc-creditor-banner {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    padding: 10px 14px; background: #f0f4ff; border: 1px solid var(--border-light);
    border-radius: var(--radius); font-size: 13px; color: var(--navy);
}
.doc-creditor-banner .material-icons-round { font-size: 18px; color: var(--blue); }
.doc-creditor-clear {
    margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--blue);
    text-decoration: none;
}
.doc-creditor-clear:hover { text-decoration: underline; }

/* ============================================================
   ВХІД: ДВА РІВНОЦІННІ БЛОКИ (auth.html)
   ============================================================ */

.authx-page {
    /* Див. коментар у .pub-body — той самий override глобального body{height:100vh;overflow:hidden}.
       Тут критично на вузьких екранах, де два блоки стають один під одним. */
    height: auto;
    overflow: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 32px 20px;
}

.authx-inner { width: 100%; max-width: 900px; }

.authx-brand { text-align: center; margin-bottom: 28px; }

.authx-brand-logo {
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 2px;
}

.authx-brand-logo span { color: var(--accent); }

.authx-brand-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
    font-weight: 300;
}

.authx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.authx-panel {
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.authx-panel--login {
    background: var(--surface);
    border: 1px solid var(--border);
}

.authx-panel--cta {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-light) 100%);
    border: 1px solid var(--navy-mid);
    position: relative;
    overflow: hidden;
}

.authx-panel--cta::after {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(232,160,32,0.22) 0%, transparent 70%);
    pointer-events: none;
}

.authx-panel-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
}

.authx-panel-sub {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.55;
    margin-bottom: 22px;
}

.authx-panel--cta .authx-panel-title { color: #fff; position: relative; z-index: 1; }
.authx-panel--cta .authx-panel-sub  { color: rgba(255,255,255,0.62); position: relative; z-index: 1; }

.authx-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: rgba(232,160,32,0.15);
    border: 1px solid rgba(232,160,32,0.35);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.authx-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    position: relative;
    z-index: 1;
}

.authx-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.82);
    line-height: 1.5;
    margin-bottom: 12px;
    font-weight: 300;
}

.authx-list .material-icons-round {
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

.authx-cta-btn {
    margin-top: auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--navy);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: var(--transition);
}

.authx-cta-btn:hover {
    background: #f4b13a;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(232,160,32,0.28);
}
@media (hover: none) { .authx-cta-btn:hover { transform: none; } }

.authx-links { margin-top: 18px; text-align: center; }

.authx-links a {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.authx-links a:hover { color: var(--blue); }

@media (max-width: 860px) {
    .authx-split { grid-template-columns: 1fr; }
    .authx-panel { padding: 28px 22px; }
}

/* ============================================================
   ПУБЛІЧНІ СТОРІНКИ РЕЄСТРАЦІЇ (register.html, dvs_register.html)
   ============================================================ */

.pub-body {
    background: var(--bg);
    color: var(--text);
    /* ⚠️ height:auto + overflow:auto ОБОВ'ЯЗКОВІ: глобальне правило body (height:100vh;
       overflow:hidden) написане для каркасу застосунку, де скрол живе у .content-area.
       Публічна сторінка того каркасу не має — без цього override вміст нижче першого
       екрана недосяжний. Див. .authx-page — там та сама причина. */
    height: auto;
    overflow: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Geologica', sans-serif;
}

.pub-header {
    background: var(--navy);
    padding: 0 48px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.pub-logo {
    font-family: 'Unbounded', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
}

.pub-logo span { color: var(--accent); }

.pub-header-link {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: var(--transition);
}

.pub-header-link:hover { color: #fff; }

.pub-hero {
    background: var(--navy);
    padding: 52px 48px 44px;
    position: relative;
    overflow: hidden;
}

.pub-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(30,79,194,0.35) 0%, transparent 70%);
    pointer-events: none;
}

.pub-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,160,32,0.15);
    border: 1px solid rgba(232,160,32,0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.pub-hero-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    max-width: 620px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.pub-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    max-width: 620px;
    line-height: 1.65;
    font-weight: 300;
    position: relative;
    z-index: 1;
}

.pub-main {
    flex: 1;
    padding: 36px 48px 56px;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
}

.pub-footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 300;
}

.pub-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 20px;
    animation: pubFadeUp 0.4s ease both;
}

@keyframes pubFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pub-card-head {
    padding: 22px 30px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
}

.pub-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #eef2ff;
    display: flex; align-items: center; justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
}

.pub-card-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.03em;
}

.pub-card-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 300;
}

.pub-card-body { padding: 26px 30px; }

.pub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.pub-field-full { grid-column: 1 / -1; }

.pub-field { display: flex; flex-direction: column; gap: 6px; }

.pub-field label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pub-field label .req { color: var(--blue-light); margin-left: 2px; }

.pub-field input,
.pub-field select {
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    transition: var(--transition);
    outline: none;
    width: 100%;
}

.pub-field input:focus,
.pub-field select:focus {
    border-color: var(--field-focus-border);
    background: var(--surface);
    box-shadow: var(--field-focus-shadow);
}

.pub-field .hint { font-size: 11px; color: var(--text-muted); font-weight: 300; }

.pub-field .err-msg { font-size: 11px; color: var(--danger); display: none; }

.pub-field.has-error .err-msg { display: block; }
.pub-field.has-error input,
.pub-field.has-error select { border-color: var(--danger); background: var(--danger-bg); }

.pub-info {
    background: #eef5ff;
    border: 1px solid #c5d8ff;
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.pub-info .material-icons-round { font-size: 20px; color: var(--blue); flex-shrink: 0; }

.pub-info-text {
    font-size: 13px;
    color: #2a4a8a;
    line-height: 1.6;
    font-weight: 300;
}

.pub-info-text strong { font-weight: 500; }

.pub-submit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.pub-submit-note {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 300;
    max-width: 420px;
    line-height: 1.55;
}

.pub-btn {
    height: 52px;
    padding: 0 34px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
}

.pub-btn:hover {
    background: var(--blue);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15,30,61,0.2);
}
@media (hover: none) { .pub-btn:hover { transform: none; } }

.pub-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.pub-btn--accent { background: var(--accent); color: var(--navy); }
.pub-btn--accent:hover { background: #f4b13a; box-shadow: 0 8px 24px rgba(232,160,32,0.28); }

.pub-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pubSpin 0.7s linear infinite;
    display: none;
}

@keyframes pubSpin { to { transform: rotate(360deg); } }

.pub-error-banner {
    display: none;
    background: var(--danger-bg);
    border: 1px solid #fca5a5;
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 13px;
    color: var(--danger);
    margin-bottom: 16px;
}

.pub-success {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 44px 32px;
    text-align: center;
}

.pub-success-icon {
    width: 72px; height: 72px;
    background: var(--success-bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
    color: var(--success);
}

.pub-success-icon .material-icons-round { font-size: 36px; }

.pub-success h2 {
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 12px;
}

.pub-success p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 14px;
    font-weight: 300;
}

.pub-steps-box {
    text-align: left;
    max-width: 560px;
    margin: 22px auto 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.pub-steps-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.pub-step-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 12px;
}

.pub-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.pub-step-row strong { font-weight: 500; }

@media (max-width: 720px) {
    .pub-header, .pub-hero, .pub-main { padding-left: 20px; padding-right: 20px; }
    .pub-card-head, .pub-card-body, .pub-submit-area { padding-left: 20px; padding-right: 20px; }
    .pub-grid { grid-template-columns: 1fr; }
    .pub-field-full { grid-column: 1; }
    .pub-submit-area { flex-direction: column; align-items: stretch; }
    .pub-btn { justify-content: center; }
    .pub-hero-title { font-size: 21px; }
}

/* ============================================================
   ХАБ РЕЄСТРАЦІЇ (register.html)
   ============================================================ */

.reg-hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.reg-tile {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 28px 30px 26px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    animation: pubFadeUp 0.45s ease both;
    position: relative;
    overflow: hidden;
}

.reg-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-light);
}
@media (hover: none) { .reg-tile:hover { transform: none; } }

.reg-tile--primary {
    grid-column: 1 / -1;
    background: linear-gradient(140deg, var(--navy) 0%, var(--navy-light) 100%);
    border-color: var(--navy-mid);
    color: #fff;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 34px 36px;
}

.reg-tile--primary:hover { border-color: var(--accent); }

.reg-tile--enforcer { background: linear-gradient(160deg, #ffffff 0%, #eef3ff 100%); animation-delay: 0.08s; }
.reg-tile--dvs      { background: linear-gradient(160deg, #ffffff 0%, #fdf4e6 100%); animation-delay: 0.16s; }

.reg-tile-art {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.reg-tile--primary .reg-tile-art { margin-bottom: 0; }

.reg-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.reg-tile-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}

.reg-tile--primary .reg-tile-title { color: #fff; font-size: 22px; }

.reg-tile-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-muted);
    font-weight: 300;
    margin-bottom: 12px;
}

.reg-tile--primary .reg-tile-text { color: rgba(255,255,255,0.72); font-size: 14.5px; }

.reg-tile-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-light);
    font-weight: 300;
    border-left: 3px solid var(--border);
    padding-left: 12px;
    margin-bottom: 18px;
}

.reg-tile--primary .reg-tile-note {
    color: rgba(255,255,255,0.6);
    border-left-color: rgba(232,160,32,0.6);
}

.reg-tile-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--blue);
    align-self: flex-start;
}

.reg-tile--primary .reg-tile-cta {
    color: var(--navy);
    background: var(--accent);
    border-radius: var(--radius);
    padding: 13px 26px;
    transition: var(--transition);
}

.reg-tile--primary:hover .reg-tile-cta { background: #f4b13a; }

.reg-tile-cta .material-icons-round { font-size: 18px; transition: transform 0.2s; }
.reg-tile:hover .reg-tile-cta .material-icons-round { transform: translateX(4px); }
@media (hover: none) { .reg-tile:hover .reg-tile-cta .material-icons-round { transform: none; } }

/* Анімації інлайн-SVG на плитках */
.reg-art-pulse   { animation: regPulse 2.8s ease-in-out infinite; transform-origin: center; }
.reg-art-pulse-2 { animation: regPulse 2.8s ease-in-out infinite 0.5s; transform-origin: center; }
.reg-art-pulse-3 { animation: regPulse 2.8s ease-in-out infinite 1s; transform-origin: center; }
.reg-art-float   { animation: regFloat 3.6s ease-in-out infinite; }
.reg-art-sway    { animation: regSway 3.2s ease-in-out infinite; transform-origin: 50% 18%; }
.reg-art-draw    { stroke-dasharray: 120; stroke-dashoffset: 120; animation: regDraw 2.6s ease-in-out infinite; }

@keyframes regPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.94); }
    50%      { opacity: 1;    transform: scale(1); }
}

@keyframes regFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes regSway {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

@keyframes regDraw {
    0%   { stroke-dashoffset: 120; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .reg-art-pulse, .reg-art-pulse-2, .reg-art-pulse-3,
    .reg-art-float, .reg-art-sway, .reg-art-draw { animation: none; }
    .reg-tile, .pub-card { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Модуль «Рішення з ЄДРСР» (edrsr.html/.js) — робоче місце холодного обдзвону.
   docs/design_edrsr_prospecting.md §9.2
   ══════════════════════════════════════════════════════════════════════════════ */

/* Перемикач поглядів (Справи / За стягувачами / За адвокатами) */
.edrsr-view-switch { display: flex; gap: 4px; margin-left: auto; }
.edrsr-view-btn {
    padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border-light);
    background: #fff; font-size: 12.5px; font-family: 'Geologica', sans-serif;
    cursor: pointer; color: var(--text-muted); transition: var(--transition);
}
.edrsr-view-btn:hover { border-color: var(--blue-light); color: var(--blue); }
.edrsr-view-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* Рядок фільтрів */
.edrsr-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.edrsr-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }

/* Чіп активного фільтра-цілі («Стягувач: …» / «Адвокат: …») */
.edrsr-target-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 20px; background: #eef2ff; border: 1px solid var(--blue-light);
    color: var(--navy); font-size: 12.5px; font-weight: 600;
}
.edrsr-target-chip-x {
    border: none; background: none; cursor: pointer; color: var(--text-muted);
    font-size: 16px; line-height: 1; padding: 0 2px;
}
.edrsr-target-chip-x:hover { color: var(--danger); }

/* Картка справи */
.edrsr-case-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 10px; overflow: hidden; transition: var(--transition);
}
.edrsr-case-card.open { border-color: var(--blue-light); box-shadow: var(--shadow); }
.edrsr-case-head {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; cursor: pointer;
}
.edrsr-case-head:hover { background: var(--bg); }

.edrsr-signal-badge {
    flex-shrink: 0; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
    letter-spacing: .2px; white-space: nowrap; margin-top: 2px;
}
.edrsr-signal-1 { background: #fff0e8; color: #c2410c; }
.edrsr-signal-2 { background: #e8f0fe; color: #1a56db; }
.edrsr-signal-3 { background: #f1f5f9; color: #64748b; }
.edrsr-signal-alimony { background: #f5f0ff; color: #7c3aed; }
.edrsr-signal-snoozed { background: #fef9c3; color: #854d0e; }
.edrsr-signal-foreign { background: #e0f2fe; color: #075985; }

/* Іконка «?» біля вибору сортування. ⚠️ Сама підказка малюється спільним `initTips()` з utils.js
   (блок .shared-tip з position:fixed), а НЕ через ::after: рядок фільтрів лежить у контейнері з
   прокруткою, який обрізав би абсолютно позиційований блок (правило №40 CLAUDE.md). */
.edrsr-sort-wrap { display: inline-flex; align-items: center; gap: 6px; }
.edrsr-help-ico {
    font-size: 18px; color: var(--text-light); cursor: help; user-select: none;
    border-radius: 50%; transition: var(--transition);
}
.edrsr-help-ico:hover, .edrsr-help-ico:focus { color: var(--blue); outline: none; }

.edrsr-case-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.edrsr-case-amount { font-family: 'Unbounded', sans-serif; font-size: 16px; color: var(--navy); }
.edrsr-case-parties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.edrsr-case-creditor { font-weight: 600; color: var(--text); }
.edrsr-case-debtor { color: var(--text-muted); }
.edrsr-case-arrow-sep { color: var(--text-light); }

.edrsr-target-inline-chip {
    border: 1px solid var(--border-light); background: #fff; border-radius: 20px;
    padding: 2px 9px; font-size: 11px; font-weight: 600; color: var(--blue); cursor: pointer;
}
.edrsr-target-inline-chip:hover { background: #eef2ff; border-color: var(--blue-light); }

.edrsr-case-rep-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #7c3aed; }
.edrsr-rep-ico { font-size: 15px !important; }
.edrsr-case-rep-name { font-weight: 600; }

.edrsr-case-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.edrsr-meta-dot { color: var(--text-light); }

.edrsr-withdrawn-badge {
    background: #fff0f0; color: #c0392b; border-radius: 4px; padding: 1px 6px;
    font-size: 10px; font-weight: 600;
}
.edrsr-taken-badge {
    background: #eafaf1; color: #1e8449; border-radius: 4px; padding: 1px 6px;
    font-size: 10px; font-weight: 600;
}

.edrsr-case-arrow { color: var(--text-light); flex-shrink: 0; }

/* Розкрита картка */
.edrsr-case-body { padding: 0 16px 16px; border-top: 1px solid var(--border-light); display: none; }
.edrsr-case-card.open .edrsr-case-body { display: block; padding-top: 14px; }

.edrsr-block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 8px; }
.edrsr-contacts-block { margin-bottom: 14px; }
.edrsr-contact-links { display: flex; flex-wrap: wrap; gap: 8px; }
.edrsr-contact-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border-radius: 20px; background: var(--bg); border: 1px solid var(--border-light);
    color: var(--navy); font-size: 12.5px; font-weight: 600; text-decoration: none;
    transition: var(--transition);
}
.edrsr-contact-link:hover { background: #eef2ff; border-color: var(--blue-light); color: var(--blue); }
.edrsr-contact-link .material-icons-round { font-size: 16px; }

.edrsr-claim-text {
    font-size: 12.5px; color: var(--text); background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 12px; white-space: pre-wrap; line-height: 1.5;
    max-height: 140px; overflow-y: auto;
}

/* ⚠️ minmax(0,1fr), а НЕ 1fr: колонка `1fr` не вужча за свій вміст, тож довга назва стягувача
   або суцільний код розпирали картку ширше за екран (та сама пастка, що вже ловилась у
   `.mt-two-col`). Разом з `overflow-wrap` це тримає картку в межах ширини списку. */
.edrsr-details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; margin-bottom: 12px; }
.edrsr-detail-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.edrsr-detail-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-light); }
.edrsr-detail-value { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }

.edrsr-docs-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.edrsr-doc-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.edrsr-doc-link { color: var(--blue); text-decoration: none; font-weight: 600; }
.edrsr-doc-link:hover { text-decoration: underline; }

.edrsr-hints { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.edrsr-case-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.edrsr-hidden-reason { font-size: 12px; color: var(--text-muted); }

/* Короткий опис стану справи в суді (доробка §6) — факти без юридичних висновків */
.edrsr-state-summary {
    font-size: 12.5px; color: var(--text-muted); background: #f8fafc;
    border-left: 3px solid var(--border-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 12px; margin-bottom: 12px; line-height: 1.5;
}

/* Значення деталі з опційною кнопкою копіювання коду (доробка §4) */
.edrsr-detail-value-wrap { display: flex; align-items: center; gap: 6px; }
.edrsr-copy-btn {
    border: none; background: none; cursor: pointer; color: var(--text-light);
    display: inline-flex; align-items: center; padding: 1px; border-radius: 4px; transition: var(--transition);
}
.edrsr-copy-btn:hover { color: var(--blue); background: #eef2ff; }
.edrsr-copy-btn .material-icons-round { font-size: 14px; }

/* Записник (доробка §7) — до «Взяти в роботу» */
.edrsr-notes-block { margin-bottom: 14px; }
.edrsr-notes-ta { width: 100%; min-height: 60px; resize: vertical; font-size: 13px; }
.edrsr-notes-saved {
    display: inline-block; font-size: 11px; color: var(--success); margin-top: 4px;
    opacity: 0; transition: opacity .2s ease;
}
.edrsr-notes-saved.visible { opacity: 1; }
.edrsr-notes-readonly {
    font-size: 12.5px; color: var(--text-muted); background: var(--bg); border-radius: var(--radius-sm);
    padding: 8px 12px; white-space: pre-wrap; line-height: 1.5;
}

/* Погляди «за стягувачами» / «за адвокатами» */
/* Широка таблиця агрегатів прокручується всередині своєї картки, а не обрізається */
.edrsr-table-scroller { overflow-x: auto; overflow-y: hidden; }

/* Модалка «Відкласти» — на кістяку модалки «Взяти в роботу», але вужча */
.edrsr-snooze-modal { max-width: 460px; }
.edrsr-snooze-case { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.edrsr-snooze-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.edrsr-snooze-presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.edrsr-snooze-presets button { justify-content: flex-start; text-align: left; }
.edrsr-snooze-custom { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.edrsr-snooze-custom-label { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.edrsr-snooze-custom input { max-width: 90px; }

.edrsr-agg-row td { vertical-align: middle; }
.edrsr-agg-code { font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* Винятки — картка service.html: бейдж «кого виключено» + toggle стягувач/боржник */
.edrsr-excl-target-badge {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .2px;
}
.edrsr-excl-target-creditor { background: #eef2ff; color: var(--blue); }
.edrsr-excl-target-debtor { background: #fff0e8; color: #c2410c; }
.edrsr-excl-toggle-group { display: inline-flex; gap: 4px; }
.edrsr-excl-toggle-btn {
    padding: 5px 14px; border-radius: 16px; border: 1.5px solid var(--border-light);
    background: #fff; font-size: 12.5px; font-family: 'Geologica', sans-serif;
    cursor: pointer; color: var(--text-muted); transition: var(--transition);
}
.edrsr-excl-toggle-btn:hover { border-color: var(--blue-light); color: var(--blue); }
.edrsr-excl-toggle-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* «Взяти в роботу» (Крок 7, §10 дизайну) — модалка */
.edrsr-take-overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 30, 61, .55);
    z-index: 2100; align-items: center; justify-content: center; padding: 16px;
}
.edrsr-take-overlay.open { display: flex; }
.edrsr-take-modal {
    background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto;
}
.edrsr-take-head {
    display: flex; align-items: center; gap: 10px; padding: 16px 22px;
    background: var(--navy); color: #fff; position: sticky; top: 0;
}
.edrsr-take-head .material-icons-round { font-size: 20px; opacity: .85; }
.edrsr-take-close { margin-left: auto; background: none; border: none; color: #fff; opacity: .7; cursor: pointer; display: flex; padding: 2px; }
.edrsr-take-close:hover { opacity: 1; }
.edrsr-take-body { padding: 20px 22px; }
.edrsr-take-foot { padding: 14px 22px; border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: #fff; }

.edrsr-take-summary { background: var(--bg); border-radius: var(--radius); padding: 12px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.edrsr-take-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px; }
.edrsr-take-hint { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
.edrsr-take-already { color: var(--danger); font-size: 13.5px; }

.edrsr-take-client-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
    margin-bottom: 8px; cursor: pointer; transition: var(--transition);
}
.edrsr-take-client-opt:hover { border-color: var(--blue-light); }
.edrsr-take-client-opt.selected { border-color: var(--blue); background: #f0f7ff; }
.edrsr-take-client-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.edrsr-take-client-meta { font-size: 11.5px; color: var(--text-muted); }
.edrsr-take-new-fields { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }

@media (max-width: 720px) {
    .reg-hub-grid { grid-template-columns: 1fr; }
    .reg-tile--primary { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
    .reg-tile { padding: 24px 22px; }
    .reg-tile--primary .reg-tile-title { font-size: 19px; }
}

/* ═══════════════ Адмінка — вкладка «ЄДРСР» (admin.html, Крок 8 друга половина) ═══════════════
   Специфікація: docs/design_edrsr_prospecting.md §6.1, §9.4. Простір імен .edrsr-adm-* — окремий
   від .edrsr-take-* (модалка «Взяти в роботу» на робочому місці виконавця edrsr.html). */
.edrsr-adm-card { margin-bottom: 20px; }
.edrsr-adm-card-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy);
    margin-bottom: 10px;
}
.edrsr-adm-card-title .material-icons-round { font-size: 18px; color: var(--blue); }
.edrsr-adm-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }

.edrsr-adm-source-add { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }

.edrsr-adm-table-wrap { overflow-x: auto; }
.edrsr-adm-table { width: 100%; border-collapse: collapse; }
.edrsr-adm-table th {
    background: transparent; text-align: left; font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
    padding: 8px 10px; border-bottom: 1px solid var(--border-light);
}
.edrsr-adm-table td {
    padding: 9px 10px; font-size: 13px; border-bottom: 1px solid var(--border-light); vertical-align: middle;
}
.edrsr-adm-table tbody tr:last-child td { border-bottom: none; }
.edrsr-adm-link { color: var(--blue); text-decoration: none; word-break: break-all; }
.edrsr-adm-link:hover { text-decoration: underline; }
.edrsr-adm-muted { color: var(--text-light); font-size: 12px; }

.edrsr-adm-run-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 980px) { .edrsr-adm-run-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .edrsr-adm-run-grid { grid-template-columns: 1fr; } }
.edrsr-adm-run-btn { display: flex; flex-direction: column; gap: 6px; }
.edrsr-adm-run-btn .action-btn { width: 100%; justify-content: center; }
.edrsr-adm-run-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* Підказка при наведенні: короткий підпис видимий завжди, детальне роз'яснення — на hover.
   ⚠️ Використовується ЛИШЕ поза .edrsr-adm-table-wrap (у того overflow-x:auto, який обрізав би
   абсолютно позиційований блок); у таблицях детальні пояснення йдуть через атрибут title. */
.edrsr-adm-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--border); }
.edrsr-adm-tip::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
    width: max-content; max-width: 290px;
    background: var(--navy); color: #fff;
    font-size: 12px; line-height: 1.45; font-weight: 400; text-transform: none;
    padding: 8px 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
    pointer-events: none; white-space: pre-line;
}
.edrsr-adm-tip:hover::after { opacity: 1; visibility: visible; }

/* Кнопка «Відкрити» замість довгого посилання: адмін його НЕ читає, а натискає. */
.edrsr-adm-open-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #fff; color: var(--blue); font-size: 12px; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.edrsr-adm-open-btn:hover { background: var(--bg); border-color: var(--blue); }
.edrsr-adm-open-btn .material-icons-round { font-size: 14px; }

/* Рядок історії з підказкою-розповіддю (курсор підказує, що є що дивитись) */
.edrsr-adm-table tbody tr[title] { cursor: help; }
.edrsr-adm-result { font-size: 12.5px; color: var(--text); white-space: nowrap; }
.edrsr-adm-result-muted { color: var(--text-muted); }
.edrsr-adm-run-status {
    margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
    background: #f0f7ff; border: 1px solid var(--blue-light); color: var(--navy); font-size: 13px;
}

.edrsr-adm-stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.edrsr-adm-stat-chip {
    background: white; border: 1px solid var(--border-light); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 130px;
}
.edrsr-adm-stat-num { font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); }
.edrsr-adm-stat-lbl { font-size: 11px; color: var(--text-muted); }

.edrsr-adm-status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
}
.edrsr-adm-status-running { background: #fef3c7; color: #92400e; }
.edrsr-adm-status-done    { background: #dcfce7; color: #166534; }
.edrsr-adm-status-failed  { background: #fee2e2; color: #991b1b; }

.edrsr-adm-error-cell {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--danger); font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЗВЕДЕНЕ ВИКОНАВЧЕ ПРОВАДЖЕННЯ (ЗВП)
   consolidated.html / consolidated.js + слот у hero-картці proceeding.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Слот у картці провадження: «входить до складу № …» — */
.proc-hero-numwrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proc-hero-cons { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proc-cons-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); white-space: nowrap;
}
/* Дрібний, але яскравий — виконавець має одразу побачити, що ВП не самотнє */
.proc-cons-num {
    font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--blue); text-decoration: none; border-bottom: 1.5px solid var(--blue);
    transition: var(--transition);
}
.proc-cons-num:hover { color: var(--navy); border-bottom-color: var(--navy); }
.proc-cons-add {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: 'Geologica', sans-serif; font-size: 12px; color: var(--text-muted);
    transition: var(--transition);
}
.proc-cons-add:hover { color: var(--blue); }
.proc-cons-add .material-icons-round { font-size: 15px; }

/* — Сторінка ЗВП — */
.cons-hero-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted);
}
.cons-hero-merged { font-size: 12px; color: var(--text-muted); }
.cons-card { margin-bottom: 20px; }
.cons-note {
    font-size: 13px; color: var(--text-muted); line-height: 1.6;
    margin: 0 0 16px; max-width: 780px;
}
.cons-error {
    background: #fef2f2; border: 1.5px solid var(--danger); color: var(--danger);
    border-radius: var(--radius); padding: 12px 16px; margin-bottom: 20px; font-size: 13px;
}

/* Кошти: залишок + дії */
.cons-money-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.cons-rem-card {
    flex: 1 1 320px; min-width: 280px; background: #fff;
    border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
    box-shadow: var(--shadow);
}
.cons-rem-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: 12px;
}
.cons-rem-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.cons-rem-lbl { color: var(--text-muted); }
.cons-rem-val { font-weight: 500; white-space: nowrap; }
.cons-rem-total {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--border);
    font-family: 'Unbounded', sans-serif; font-size: 15px; color: var(--navy);
}
.cons-money-actions { flex: 0 1 320px; display: flex; flex-direction: column; gap: 12px; }
.cons-nadh-btn { width: 100%; }

/* Склад зведеного */
.cons-table-scroller { overflow-x: auto; margin: 0 -24px; padding: 0 24px 8px; }
.cons-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cons-table th {
    background: transparent; color: var(--text-muted); font-weight: 500;
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    text-align: left; padding: 8px 10px; border-bottom: 1.5px solid var(--border);
    white-space: nowrap;
}
.cons-table td { padding: 10px; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.cons-table tbody tr:hover { background: var(--bg); }
.cons-cell-strong { font-weight: 600; color: var(--navy); }
.cons-proc-link { color: var(--blue); text-decoration: none; font-weight: 500; }
.cons-proc-link:hover { text-decoration: underline; }
.cons-del-btn {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 4px; border-radius: var(--radius-sm); transition: var(--transition);
    display: inline-flex; align-items: center;
}
.cons-del-btn:hover { color: var(--danger); background: #fef2f2; }
.cons-del-btn .material-icons-round { font-size: 18px; }

/* Журнал надходжень */
.cons-coll {
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 12px;
}
.cons-coll-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.cons-coll-date { font-size: 12px; color: var(--text-muted); margin-right: 10px; }
.cons-coll-sum { font-family: 'Unbounded', sans-serif; font-size: 14px; color: var(--navy); }
.cons-coll-note { font-size: 12px; color: var(--text-muted); margin-left: 10px; }
.cons-chip {
    display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); color: var(--text-muted); font-size: 11px;
}
.cons-coll-row {
    display: flex; align-items: baseline; gap: 10px; padding: 4px 0;
    border-top: 1px solid var(--border-light); font-size: 12px;
}
.cons-coll-proc { color: var(--blue); min-width: 110px; }
.cons-coll-detail { color: var(--text-muted); flex: 1; }
.cons-coll-total { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* Помилка у вікні «+ Додати»: причина відмови має лишатися на екрані,
   а не зникати разом із тостом (правило №46 — різні новини виглядають по-різному) */
.cons-add-err {
    margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
    background: #fef2f2; border: 1.5px solid var(--danger);
    color: var(--danger); font-size: 12px; line-height: 1.5;
}

/* Перемикач «звести провадження одного стягувача» */
.cons-group-row { align-items: flex-start; margin-bottom: 14px; }
.cons-group-title { display: block; font-size: 13px; color: var(--text); }
.cons-group-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }

/* Покроковий показ розрахунку — головна вимога наочності */
.cons-plan-total {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--navy); color: #fff; border-radius: var(--radius-sm);
    padding: 10px 14px; margin-bottom: 14px;
    font-family: 'Unbounded', sans-serif; font-size: 14px;
}
.cons-step {
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 10px 12px; margin-bottom: 10px;
}
.cons-step-head { display: flex; align-items: center; gap: 10px; }
.cons-step-num {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: var(--navy); color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.cons-step-lbl { flex: 1; font-size: 13px; font-weight: 500; color: var(--navy); }
.cons-step-sum { font-family: 'Unbounded', sans-serif; font-size: 13px; color: var(--navy); }
.cons-step-expl { font-size: 11px; color: var(--text-muted); margin: 6px 0 8px 30px; line-height: 1.5; }
.cons-calc-line { margin: 6px 0 6px 30px; }
.cons-calc-top { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.cons-calc-simple { margin: 5px 0 5px 30px; }
.cons-calc-who { color: var(--text); min-width: 120px; }
.cons-calc-math { flex: 1; color: var(--text-muted); font-size: 11px; }
.cons-calc-got { font-weight: 600; color: var(--navy); white-space: nowrap; }
.cons-calc-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cons-plan-foot {
    display: flex; justify-content: flex-end; font-size: 12px; color: var(--text-muted);
    padding-top: 8px; border-top: 1.5px solid var(--border);
}
.cons-plan-left { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: right; }

@media (max-width: 860px) {
    .cons-money-actions { flex: 1 1 100%; }
}

/* ── Резервні копії (admin.html → вкладка «Резервні копії») ────────────────── */
.bk-warn {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff7ed; border: 1px solid #fed7aa; border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px;
    font-size: 13px; color: #7c2d12;
}
.bk-warn .material-icons-round { font-size: 18px; color: var(--accent); flex-shrink: 0; }

.bk-stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.bk-stat {
    flex: 1 1 150px; background: var(--bg); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); padding: 14px 16px;
}
.bk-stat--ok  { border-left: 3px solid var(--success); }
.bk-stat--bad { border-left: 3px solid var(--danger); }
.bk-stat--muted { border-left: 3px solid var(--border); }
.bk-stat-val { font-family: 'Unbounded', sans-serif; font-size: 17px; color: var(--navy); }
.bk-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }

.bk-hint {
    font-size: 12px; color: var(--text-muted); background: var(--bg);
    border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px;
}
.bk-hint code { background: #fff; border: 1px solid var(--border-light); border-radius: 3px; padding: 1px 5px; }

.bk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Глобальне правило th { background: var(--navy) } тут не потрібне — таблиця легка */
.bk-table th {
    background: transparent; text-align: left; font-size: 11px; text-transform: uppercase;
    letter-spacing: .3px; color: var(--text-muted); padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}
.bk-table td { padding: 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.bk-table tr:last-child td { border-bottom: none; }

.bk-chip {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.bk-chip--ok    { background: #dcfce7; color: #166534; }
.bk-chip--bad   { background: #fee2e2; color: #991b1b; }
.bk-chip--muted { background: var(--bg); color: var(--text-muted); }
.bk-chip--core  { background: #dbeafe; color: #1e40af; }
.bk-chip--full  { background: #ede9fe; color: #5b21b6; }

/* ═══ Конвеєр офісу (work_setup.html) ═══════════════════════════════════════ */

.wk-help{position:relative;background:#f0f4ff;border:1px solid var(--border-light);
  border-radius:var(--radius);padding:14px 40px 14px 16px;margin-bottom:20px;
  font-size:13px;color:var(--text-muted);line-height:1.55}
.wk-help-title{font-weight:600;color:var(--navy);margin-bottom:6px;font-size:13px}
.wk-help p{margin:0 0 6px}
.wk-help p:last-child{margin-bottom:0}
.wk-help-close{position:absolute;top:8px;right:10px;background:none;border:none;
  font-size:20px;line-height:1;color:var(--text-light);cursor:pointer}
.wk-help-close:hover{color:var(--danger)}

.wk-count{color:var(--text-light);font-size:11px;margin-left:2px}

.wk-table-scroller{overflow-x:auto;margin-top:16px}
.wk-table{width:100%;border-collapse:collapse;font-size:13px}
/* ⚠️ Глобальне правило th{background:var(--navy)} діє на всі таблиці — тут воно зайве */
.wk-table th{background:transparent;color:var(--text-muted);font-weight:600;
  font-size:11px;text-transform:uppercase;letter-spacing:.3px;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.wk-table td{padding:10px;border-bottom:1px solid var(--border-light);vertical-align:top}
.wk-table tr:hover td{background:var(--bg)}
.wk-row-off td{opacity:.5}
/* ⚠️ Назва станції при імпорті «сирої» таблиці береться з тексту алгоритму, а він
   буває цілим абзацом — без обмеження висоти таблиця розповзається. Повний текст
   лишається доступним при наведенні (атрибут title). */
.wk-cell-strong{font-weight:600;color:var(--navy);max-width:360px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.wk-cell-sub{font-size:11px;color:var(--text-light);margin-top:2px;
  max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-cell-sched{font-size:12px;color:var(--text-muted)}

.wk-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;
  margin-left:6px;white-space:nowrap}
.wk-chip-auto{background:#e6f4ea;color:#1e7a3c}
.wk-chip-manual{background:var(--bg);color:var(--text-muted)}

.wk-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 10px;font-size:12px;color:var(--text-muted);cursor:pointer;margin-right:6px}
.wk-btn:hover{border-color:var(--blue);color:var(--blue)}
.wk-btn-danger:hover{border-color:var(--danger);color:var(--danger)}

.wk-empty{text-align:center;padding:48px 24px;color:var(--text-muted)}
.wk-empty-title{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:8px}
.wk-empty-hint{font-size:13px;max-width:520px;margin:0 auto;line-height:1.55}

/* Форми модалок */
.wk-form{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow-y:auto;
  padding-right:4px}
.wk-lbl{display:block;font-size:12px;font-weight:600;color:var(--text-muted);
  margin:12px 0 4px}
.wk-sub{font-size:12px;font-weight:600;color:var(--navy);text-transform:uppercase;
  letter-spacing:.3px;margin:18px 0 4px;padding-top:12px;border-top:1px solid var(--border-light)}
.wk-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.wk-hint{font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:6px}
.wk-flags{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.wk-days{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.wk-day{display:flex;align-items:center;gap:4px;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;cursor:pointer}
.wk-day:hover{border-color:var(--blue)}

.wk-preview{margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);
  font-size:12px;background:var(--bg);color:var(--text-muted);line-height:1.5}
.wk-preview-ok{background:#e6f4ea;color:#1e7a3c}
.wk-preview-bad{background:#fdecea;color:var(--danger)}
.wk-preview-text{font-weight:600}
.wk-preview-dates{margin-top:4px;opacity:.85}

/* Підказка при наведенні.
   ⚠️ Всередині контейнера з горизонтальною прокруткою такий блок обрізається —
   там використовувати атрибут title, а не цей клас (пастка з адмінки ЄДРСР). */
.wk-tip{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--border);
  color:var(--text-muted);font-size:10px;font-weight:700;margin-left:5px;
  cursor:help;position:relative;vertical-align:middle}
.wk-tip:hover{background:var(--blue);color:#fff}
/* ⚠️ Саму підказку малює НЕ цей елемент: блок ::after всередині нього обрізався б
   тілом модального вікна та будь-яким контейнером з прокруткою. Єдиний спільний
   блок .shared-tip живе в кінці сторінки — див. initTips() в utils.js. */

.shared-tip{position:fixed;z-index:2147483000;display:none;background:var(--navy);color:#fff;
  padding:8px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:400;
  line-height:1.45;max-width:280px;text-align:left;box-shadow:var(--shadow-lg);
  pointer-events:none;white-space:normal}
.shared-tip.open{display:block}
/* Абзаци підказки — окремими блоками: `white-space:normal` вище збирає переноси
   рядка в один суцільний абзац, тож ділити текст переносами не можна. */
.shared-tip-p + .shared-tip-p{margin-top:7px}
/* Сталий номер підказки (docs/design_hints.md §3) — рядок унизу, приглушений і
   відділений: він потрібен, щоб на нього послатись, а не щоб його читали. */
.shared-tip-num{margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.22);
  font-size:11px;letter-spacing:.3px;opacity:.72}

/* Імпорт */
.wk-stats{display:flex;gap:12px;margin:16px 0}
.wk-stat{flex:1;background:var(--bg);border-radius:var(--radius-sm);padding:12px;
  text-align:center}
.wk-stat-num{font-family:'Unbounded',sans-serif;font-size:22px;color:var(--navy)}
.wk-stat-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.3px;margin-top:2px}
.wk-warn{background:#fff8e6;border:1px solid #f0d9a0;border-radius:var(--radius-sm);
  padding:12px;margin:12px 0}
.wk-warn-title{font-size:12px;font-weight:600;color:#8a6100;margin-bottom:6px}
.wk-warn-item{font-size:12px;color:#8a6100;line-height:1.5;margin-bottom:4px}
.wk-mode{margin-top:16px;padding-top:12px;border-top:1px solid var(--border-light)}

/* ═══ Екран «Завдання» (tasks.html) ═════════════════════════════════════════ */

.tk-daynav{display:flex;align-items:center;gap:6px;margin-left:16px}
.tk-day-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-muted);padding:0}
.tk-day-btn:hover{border-color:var(--blue);color:var(--blue)}
.tk-day-btn .material-icons-round{font-size:18px}
.tk-day-label{font-size:13px;font-weight:600;color:var(--navy);min-width:150px;text-align:center}
.tk-today-btn{background:none;border:none;color:var(--blue);font-size:12px;cursor:pointer}
.tk-today-btn:hover{text-decoration:underline}

/* Смуга «На вашу перевірку» — не четвертий стовпець (їх рівно три) */
.tk-review-bar{background:#f0f4ff;border:1px solid #c7d6f7;border-radius:var(--radius);
  padding:10px 14px;margin-bottom:16px}
.tk-review-head{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:600;color:var(--navy)}
.tk-review-head .material-icons-round{font-size:18px;color:var(--blue)}
.tk-review-toggle{margin-left:auto;background:none;border:none;color:var(--blue);
  font-size:12px;cursor:pointer}
.tk-review-toggle:hover{text-decoration:underline}
.tk-review-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.tk-review-item{display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:var(--radius-sm);padding:8px 10px}
.tk-review-name{font-size:13px;font-weight:600;color:var(--navy)}
.tk-review-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.tk-review-acts{margin-left:auto;display:flex;gap:6px}

/* Три стовпці */
.tk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  align-items:start}
@media (max-width:1100px){.tk-cols{grid-template-columns:minmax(0,1fr)}}
.tk-col{background:var(--bg);border-radius:var(--radius);padding:12px;min-height:120px}
.tk-col-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border-light)}
.tk-col-title{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--text-muted)}
.tk-col-count{margin-left:auto;font-size:12px;color:var(--text-light)}
.tk-col-body{display:flex;flex-direction:column;gap:8px}
.tk-col-empty{font-size:12px;color:var(--text-light);text-align:center;padding:16px 0}

/* Риска між зоною «Сьогодні» і рештою */
.tk-divider{height:1px;background:var(--border);margin:6px 0 2px}

/* Картка. Кольором відрізняємо реально термінове від «просто сьогодні дата». */
.tk-card{background:#fff;border:1px solid var(--border-light);border-left:3px solid transparent;
  border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;transition:var(--transition)}
.tk-card:hover{box-shadow:var(--shadow);border-color:var(--border)}
.tk-card--today.tk-card--urgent{background:#fdecea;border-left-color:var(--danger)}
.tk-card--today.tk-card--routine{background:#fff8e6;border-left-color:var(--accent)}
.tk-card--today.tk-card--backlog{border-left-color:var(--border);border-style:dashed}
.tk-card--overdue{border-left-color:var(--danger)}
.tk-card--review{background:#f0f4ff;border-left-color:var(--blue)}
.tk-card-title{font-size:13px;font-weight:600;color:var(--navy);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tk-card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tk-chip{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;
  background:var(--bg);color:var(--text-muted);white-space:nowrap}
.tk-chip-date{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;
  background:var(--bg);color:var(--text-muted)}
.tk-chip-overdue{background:var(--danger);color:#fff}
.tk-chip-control{background:#ede9fe;color:#5b21b6}
.tk-chip-surge{background:var(--accent);color:var(--navy);font-weight:600}
/* Станцію сьогодні веде не її постійний виконавець (той недоступний) */
.tk-chip-temp{background:#e6f4ea;color:#1e7a3c}
.tk-card-state{font-size:11px;color:var(--blue);margin-top:6px}
.tk-card-state--rework{color:var(--danger)}
.tk-card-acts{display:flex;gap:6px;margin-top:8px}
.tk-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:3px 10px;font-size:11px;color:var(--text-muted);cursor:pointer}
.tk-btn:hover{border-color:var(--blue);color:var(--blue)}
.tk-btn-done:hover{border-color:var(--success);color:var(--success)}
.tk-btn-accept{border-color:var(--success);color:var(--success)}
.tk-btn-accept:hover{background:var(--success);color:#fff}

/* Картка завдання у вікні */
.tk-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border-light)}
.tk-row-lbl{font-size:12px;color:var(--text-muted);min-width:110px}
.tk-row-val{font-size:13px;color:var(--text);flex:1}
.tk-basis{background:#fdecea;border-radius:var(--radius-sm);padding:8px 10px;margin-bottom:10px}
.tk-basis-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--danger);font-weight:700;margin-bottom:2px}
.tk-basis-val{font-size:13px;color:var(--navy)}
.tk-note{background:#fdecea;border-radius:var(--radius-sm);padding:8px 10px;margin-top:10px;
  font-size:13px;color:var(--text)}
.tk-note-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--danger);font-weight:700;margin-bottom:2px}
.tk-instruction{margin-top:12px;background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px}
.tk-instruction-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--text-muted);font-weight:700;margin-bottom:4px}
.tk-instruction-text{font-size:12px;line-height:1.6;color:var(--text);
  max-height:260px;overflow-y:auto;white-space:pre-wrap}

/* Живий лічильник лотка (конвеєр) */
.wk-count-num{font-weight:600;color:var(--navy)}
.wk-count-zero{color:var(--text-light);font-weight:400}
.wk-count-unknown{font-size:11px;color:var(--text-light);font-style:italic}

/* «Надійшло нове» — станція ожила сама */
.tk-new-badge{display:flex;align-items:center;gap:4px;margin-bottom:6px;
  font-size:11px;font-weight:600;color:#1e7a3c;background:#e6f4ea;
  border-radius:9px;padding:2px 8px;width:fit-content}
.tk-new-badge .material-icons-round{font-size:14px}
.tk-chip-queue{background:#e8f0fe;color:#1a56db;font-weight:600}

/* ============================================================
   WIKI — база знань (docs/design_wiki.md)
   ⚠️ Сторінка НЕ загортається в один .glass-card: суцільне біле полотно
      прибирає всі орієнтири. Кожна зона — власна поверхня на сірому тлі
      .content-area: дерево (біла картка) | стаття (біла картка) | зміст
      (без фону). Так око одразу бачить, де навігація, а де текст.
   ============================================================ */

/* ── Верхня смуга: простір + пошук ─────────────────────────────────────── */
.wiki-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.wiki-space{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--navy);color:#fff;border-radius:var(--radius);font-size:13px;font-weight:600;
  white-space:nowrap}
.wiki-space .material-icons-round{font-size:18px;color:var(--accent)}
.wiki-space-sub{font-size:11px;font-weight:400;opacity:.7;margin-left:2px}

.wiki-search-wrap{position:relative;flex-grow:1;min-width:220px;max-width:460px}
.wiki-search-inp{width:100%;padding:10px 14px 10px 40px;border:1px solid var(--border);
  border-radius:var(--radius);font-family:inherit;font-size:14px;background:#fff;color:var(--text);
  box-shadow:var(--shadow)}
.wiki-search-inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,79,194,.12)}
.wiki-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:20px;color:var(--text-light);pointer-events:none}
.wiki-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);max-height:60vh;overflow-y:auto;display:none}
.wiki-search-results.open{display:block}
.wiki-sr-item{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--border-light)}
.wiki-sr-item:last-child{border-bottom:none}
.wiki-sr-item:hover{background:#f5f8ff}
.wiki-sr-title{font-size:13px;font-weight:600;color:var(--navy)}
.wiki-sr-section{font-size:11px;color:var(--text-light);margin-top:1px}
.wiki-sr-snippet{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.45}
.wiki-sr-empty{padding:14px;font-size:13px;color:var(--text-muted);text-align:center}

.wiki-as-switch{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px}
.wiki-as-switch select{padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:12px;background:#fff;color:var(--text)}

/* ── Каркас ────────────────────────────────────────────────────────────── */
.wiki-layout{display:grid;grid-template-columns:264px minmax(0,1fr) 216px;gap:24px;align-items:start}

/* ── Дерево розділів (окрема біла картка) ──────────────────────────────── */
.wiki-tree{position:sticky;top:0;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:8px;
  max-height:calc(100vh - 210px);overflow-y:auto}
.wiki-tree::-webkit-scrollbar{width:5px}
.wiki-tree::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}
.wiki-tree-section{padding:6px 0}
.wiki-tree-section + .wiki-tree-section{border-top:1px solid var(--border-light);margin-top:2px}
.wiki-tree-title{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light)}
.wiki-tree-title .material-icons-round{font-size:17px;color:var(--blue);opacity:.75}
.wiki-tree-link{display:block;padding:8px 10px 8px 34px;border-radius:var(--radius-sm);
  font-size:13px;color:var(--text);text-decoration:none;cursor:pointer;line-height:1.4;
  position:relative;transition:var(--transition)}
.wiki-tree-link::before{content:"";position:absolute;left:17px;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--border);transition:var(--transition)}
.wiki-tree-link:hover{background:var(--bg);color:var(--navy)}
.wiki-tree-link:hover::before{background:var(--text-light)}
.wiki-tree-link.active{background:#eaf1ff;color:var(--blue);font-weight:600}
.wiki-tree-link.active::before{background:var(--blue);box-shadow:0 0 0 3px rgba(30,79,194,.15)}

/* ── Стаття (окрема біла картка) ───────────────────────────────────────── */
.wiki-article{min-width:0;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:30px 34px 34px;
  font-size:15px;line-height:1.7;color:var(--text)}
.wiki-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;
  color:var(--text-light);margin-bottom:10px}
.wiki-crumb-link{color:var(--text-muted);text-decoration:none;cursor:pointer}
.wiki-crumb-link:hover{color:var(--blue)}
.wiki-crumb-sep{opacity:.5}
.wiki-article-head{margin-bottom:22px;padding-bottom:16px;border-bottom:2px solid var(--border-light)}
.wiki-article-title{font-family:Unbounded,sans-serif;font-size:27px;font-weight:600;
  color:var(--navy);line-height:1.25;margin:0}
.wiki-article-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:11px;font-size:12px;color:var(--text-light)}
.wiki-meta-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);
  border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11px;color:var(--text-muted)}
.wiki-meta-chip .material-icons-round{font-size:14px}

.wiki-body h2{font-family:Unbounded,sans-serif;font-size:19px;font-weight:600;color:var(--navy);
  margin:34px 0 13px;line-height:1.35;scroll-margin-top:20px;position:relative}
.wiki-body h3{font-size:16px;font-weight:600;color:var(--navy);margin:26px 0 10px;
  scroll-margin-top:20px;position:relative}
.wiki-body h4{font-size:14px;font-weight:600;color:var(--text);margin:20px 0 8px}
.wiki-body > :first-child{margin-top:0}
.wiki-body p{margin:0 0 14px}
.wiki-body ul,.wiki-body ol{margin:0 0 16px;padding-left:22px}
.wiki-body li{margin-bottom:7px}
.wiki-body li > ul,.wiki-body li > ol{margin-top:7px}
.wiki-body a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(30,79,194,.3)}
.wiki-body a:hover{border-bottom-color:var(--blue)}
.wiki-body strong{font-weight:600;color:var(--navy)}
.wiki-body code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;
  background:#eef1f7;border:1px solid var(--border-light);border-radius:4px;padding:1px 5px}
.wiki-body pre{background:var(--navy);color:#e8eefc;border-radius:var(--radius);
  padding:14px 16px;overflow-x:auto;margin:0 0 16px;font-size:13px;line-height:1.55}
.wiki-body pre code{background:none;border:none;padding:0;color:inherit}
.wiki-body blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--border);
  color:var(--text-muted)}
.wiki-body hr{border:none;border-top:1px solid var(--border-light);margin:28px 0}
.wiki-body img{max-width:100%;height:auto;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);margin:6px 0 20px;display:block}
/* ⚠️ th { background: var(--navy) } — глобальне правило; у статті перекриваємо */
.wiki-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;
  display:block;overflow-x:auto}
.wiki-body th{background:#eef1f7;color:var(--navy);font-weight:600;text-align:left;
  padding:10px 12px;border:1px solid var(--border)}
.wiki-body td{padding:10px 12px;border:1px solid var(--border);vertical-align:top}
.wiki-body tbody tr:nth-child(even){background:#fafbfd}

/* Заголовок-крок: «Крок 3. Назва» → номер у кружечку (візуальні сходинки) */
.wiki-step{display:flex;align-items:flex-start;gap:12px}
.wiki-step-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--navy);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;margin-top:-2px}

/* Кнопка «скопіювати посилання на розділ» — щоб модератор кидав користувачу
   посилання САМЕ на потрібний абзац, а не на статтю цілком */
.wiki-anchor{opacity:0;margin-left:8px;background:none;border:none;cursor:pointer;padding:2px;
  color:var(--text-light);vertical-align:middle;transition:var(--transition)}
.wiki-anchor .material-icons-round{font-size:17px}
.wiki-body h2:hover .wiki-anchor,.wiki-body h3:hover .wiki-anchor,.wiki-anchor:focus{opacity:1}
.wiki-anchor:hover{color:var(--blue)}

/* Callout-блоки */
.wiki-callout{border-radius:var(--radius);padding:14px 16px;margin:0 0 20px;
  border-left:4px solid;font-size:14px;line-height:1.62}
.wiki-callout p:last-child{margin-bottom:0}
.wiki-callout ul,.wiki-callout ol{margin-bottom:0}
.wiki-callout-title{display:flex;align-items:center;gap:6px;font-weight:700;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.wiki-callout-title .material-icons-round{font-size:17px}
.wiki-callout--warning{background:#fff7ea;border-left-color:#e0902b}
.wiki-callout--warning .wiki-callout-title{color:#a35c07}
.wiki-callout--tip{background:#eef6ff;border-left-color:var(--blue)}
.wiki-callout--tip .wiki-callout-title{color:var(--blue)}
.wiki-callout--law{background:#f4f1ff;border-left-color:#7c5cd6}
.wiki-callout--law .wiki-callout-title{color:#5b3fbf}
.wiki-callout--note{background:#f1f5f9;border-left-color:#64748b}
.wiki-callout--note .wiki-callout-title{color:#475569}

/* Підвал статті */
.wiki-related{margin-top:34px;padding-top:20px;border-top:1px solid var(--border-light)}
.wiki-related-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-light);margin-bottom:10px}
.wiki-related-link{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;margin:0 8px 8px 0;
  background:var(--bg);border:1px solid var(--border);border-radius:20px;font-size:13px;
  color:var(--navy);text-decoration:none;cursor:pointer;transition:var(--transition)}
.wiki-related-link:hover{border-color:var(--blue);color:var(--blue);background:#f5f8ff}
.wiki-related-link .material-icons-round{font-size:15px}
.wiki-help-row{margin-top:24px;padding:15px 17px;background:var(--bg);border:1px solid var(--border-light);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:13px;color:var(--text-muted)}
.wiki-help-btn{background:none;border:none;color:var(--blue);font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;padding:0}
.wiki-help-btn:hover{text-decoration:underline}

/* ── «На цій сторінці» ─────────────────────────────────────────────────── */
.wiki-toc{position:sticky;top:0;font-size:12px;max-height:calc(100vh - 210px);overflow-y:auto;
  padding-left:4px}
.wiki-toc-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-light);margin-bottom:10px}
.wiki-toc-link{display:block;padding:5px 0 5px 12px;color:var(--text-muted);text-decoration:none;
  border-left:2px solid var(--border);line-height:1.4;cursor:pointer;transition:var(--transition)}
.wiki-toc-link:hover{color:var(--blue);border-left-color:var(--text-light)}
.wiki-toc-link.lvl3{padding-left:22px;font-size:11.5px}
.wiki-toc-link.active{color:var(--blue);border-left-color:var(--blue);font-weight:600}

/* ── Головна простору ──────────────────────────────────────────────────── */
.wiki-home-head{margin-bottom:22px}
.wiki-home-title{font-family:Unbounded,sans-serif;font-size:25px;font-weight:600;
  color:var(--navy);margin:0 0 8px}
.wiki-home-lead{font-size:14.5px;color:var(--text-muted);line-height:1.65;max-width:640px}
.wiki-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.wiki-home-card{border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;
  cursor:pointer;background:#fff;transition:var(--transition)}
.wiki-home-card:hover{border-color:var(--blue);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
@media (hover: none) { .wiki-home-card:hover { transform: none; } }
.wiki-home-card-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.wiki-home-card-ico{width:32px;height:32px;border-radius:9px;background:#eaf1ff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wiki-home-card-ico .material-icons-round{font-size:19px}
.wiki-home-card-sec{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3}
.wiki-home-card-item{font-size:12.5px;color:var(--text-muted);margin-bottom:6px;line-height:1.45;
  padding-left:12px;position:relative}
.wiki-home-card-item::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--border)}
.wiki-home-card-item:last-child{margin-bottom:0}
.wiki-home-card-more{font-size:11.5px;color:var(--text-light);margin-top:8px;padding-left:12px}
.wiki-home-start{background:linear-gradient(135deg,var(--navy),#1b3566);color:#fff;border:none}
.wiki-home-start:hover{border:none}
.wiki-home-start .wiki-home-card-ico{background:rgba(255,255,255,.14);color:var(--accent)}
.wiki-home-start .wiki-home-card-sec{color:#fff}
.wiki-home-start .wiki-home-card-item{color:rgba(255,255,255,.8)}
.wiki-home-start .wiki-home-card-item::before{background:rgba(255,255,255,.4)}
.wiki-home-start .wiki-home-card-more{color:rgba(255,255,255,.6)}

/* ── Гостьовий режим ───────────────────────────────────────────────────── */
.wiki-guest-bar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}
.wiki-guest-logo{display:flex;align-items:center;gap:9px;font-family:Unbounded,sans-serif;
  font-weight:600;font-size:17px;color:var(--navy);text-decoration:none}
.wiki-guest-logo span.material-icons-round{color:var(--accent)}
.wiki-guest-actions{display:flex;align-items:center;gap:10px}
.wiki-hero{background:linear-gradient(135deg,var(--navy),#1b3566);border-radius:var(--radius-xl);
  padding:32px 34px;margin-bottom:22px;color:#fff}
.wiki-hero-title{font-family:Unbounded,sans-serif;font-size:26px;font-weight:600;
  margin:0 0 8px;line-height:1.25}
.wiki-hero-sub{font-size:14px;opacity:.85;line-height:1.6;max-width:640px;margin:0}
.wiki-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.wiki-hero-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--radius);
  font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;transition:var(--transition)}
.wiki-hero-btn:hover{background:rgba(255,255,255,.12)}
.wiki-hero-btn--accent{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.wiki-hero-btn--accent:hover{filter:brightness(1.06);background:var(--accent)}
.wiki-cta{margin-top:34px;background:linear-gradient(135deg,#eef3ff,#f7f9ff);
  border:1px solid #cfdcfa;border-radius:var(--radius);padding:20px 22px}
.wiki-cta-title{font-family:Unbounded,sans-serif;font-size:16px;font-weight:600;
  color:var(--navy);margin-bottom:6px}
.wiki-cta-text{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin-bottom:14px}

.wiki-loading,.wiki-empty{padding:40px 10px;text-align:center;color:var(--text-muted);font-size:14px}
.wiki-error{padding:16px 18px;background:#fdecea;border:1px solid #f5c2bd;border-radius:var(--radius);
  color:#a4262c;font-size:14px}
.wiki-tree-toggle{display:none}

/* ── Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .wiki-layout{grid-template-columns:240px minmax(0,1fr)}
  .wiki-toc{display:none}
}
@media (max-width:860px){
  .wiki-layout{grid-template-columns:minmax(0,1fr)}
  .wiki-tree{position:static;max-height:none;display:none;margin-bottom:16px}
  .wiki-tree.open{display:block}
  .wiki-tree-toggle{display:inline-flex;align-items:center;gap:6px}
  .wiki-article{padding:22px 18px 26px}
  .wiki-article-title{font-size:21px}
  .wiki-hero{padding:24px 20px}
  .wiki-hero-title{font-size:21px}
}

/* ═══ Графік і зміни (вкладка конвеєра) ═════════════════════════════════════ */

.wk-sched-card{margin-top:20px}
.wk-sched-row{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--border-light)}
.wk-sched-day{width:34px;font-size:12px;font-weight:700;color:var(--navy);
  text-transform:uppercase}
.wk-sched-shifts{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.wk-sched-place{width:110px;font-size:12px;padding:4px 8px}

/* Сигнал про непокриту станцію — головна цінність розкладу */
.wk-cover{border-radius:var(--radius);padding:12px 14px;margin-bottom:4px}
.wk-cover-off{background:var(--bg);color:var(--text-muted)}
.wk-cover-ok{background:#e6f4ea;color:#1e7a3c}
.wk-cover-bad{background:#fdecea;color:var(--danger)}
.wk-cover-title{font-size:13px;font-weight:700;margin-bottom:4px}
.wk-cover-text{font-size:12px;line-height:1.5}
.wk-cover-list{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.wk-cover-item{display:flex;gap:10px;font-size:12px;background:#fff;
  border-radius:var(--radius-sm);padding:6px 10px}
.wk-cover-station{font-weight:600;color:var(--navy);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-cover-reason{color:var(--text-muted);white-space:nowrap}

/* Смуга покриття та заміщення на екрані «Завдання» */
.tk-warn{background:#fdecea;border:1px solid #f5b7b1;border-radius:var(--radius);
  padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--danger)}
.tk-warn-title{font-weight:700;margin-bottom:4px}
/* ⚠️ Назва станції при імпорті «сирої» таблиці буває цілим абзацом —
   без обмеження попередження займало б пів екрана. */
.tk-warn-item{font-size:12px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tk-info{background:#f0f4ff;border:1px solid #c7d6f7;border-radius:var(--radius);
  padding:8px 14px;margin-bottom:16px;font-size:12px;color:var(--navy)}

/* Посилання на екран системи: відкривається в новій вкладці — позначаємо це
   іконкою, щоб перехід не був несподіванкою (docs/design_wiki.md §10.0 вимога 10) */
.wiki-body a[target="_blank"]{white-space:normal}
.wiki-body a[target="_blank"]::after{content:"open_in_new";font-family:"Material Icons Round";
  font-size:14px;vertical-align:-2px;margin-left:3px;opacity:.65;border:none}

/* ═══════════════════════════════════════════════════════════════════════════
   МОДУЛЬ «МАПА» — планування виїздів (docs/design_map.md)
   ═══════════════════════════════════════════════════════════════════════════ */

.map-toolbar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.map-toolbar-spacer { flex: 1 1 auto; }
.map-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.map-count { font-size: 13px; color: var(--text-muted); }

.map-wrap {
    display: flex; gap: 16px; align-items: stretch;
    min-height: 520px; height: calc(100vh - 260px);
}
.map-canvas {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
}
.map-side {
    flex: 0 0 320px; display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; overflow: hidden;
}
.map-side-head {
    padding: 12px 14px; border-bottom: 1px solid var(--border-light);
    font-family: 'Unbounded', sans-serif; font-size: 13px; color: var(--navy);
}
.map-side-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.map-side-empty {
    padding: 24px 14px; text-align: center;
    color: var(--text-light); font-size: 13px;
}

/* Маркер піна — DivIcon, а не картинка: колір і форма кодують ТОЧНІСТЬ */
.map-pin {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--blue); color: #fff;
    font-size: 12px; font-weight: 600;
    border: 2px solid #fff; box-shadow: var(--shadow);
}
/* ⚠️ Приблизна точність МУСИТЬ виглядати інакше: інакше виконавець поїде
   «за адресою», а потрапить у центр села (docs/design_map.md §8). */
.map-pin--approx { background: var(--accent); color: var(--navy); border-style: dashed; }
.map-pin--inactive { background: var(--text-light); }
.map-pin--selected { outline: 3px solid var(--blue-light); }

/* ── Планування виїзду: роль піна в чернетці ──
   ⚠️ Головне тут — щоб було ВИДНО, наскільки щільно лежать обрані адреси, ще до
   складання маршрутного листа. Тому решта пінів гасне, а не зникає: зникнення
   приховало б сусідів, яких варто було б захопити (вимога власника). */
.map-pin--chosen {
    background: var(--success); color: #fff;
    border-style: solid;
    outline: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 0 0 2px var(--success), var(--shadow-lg);
}
.map-pin--cand {
    background: #fff; color: var(--navy);
    border: 2px dashed var(--success);
}
.map-pin--out { opacity: .28; }

/* ── Лінія маршруту складеного виїзду ──
   ⚠️ Пунктир навмисно: суцільна лінія читалася б як «їхати саме так», а маршрут
   прокладено по прямій, без урахування доріг. */
.map-route-num {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #1a8a5a; color: #fff;
    font-size: 11px; font-weight: 700;
    border: 2px solid #fff; box-shadow: var(--shadow);
    pointer-events: none;
}
/* Продовження того самого заїзду (ще одне провадження за тією ж адресою) */
.map-stop-num--same { background: transparent; border-color: transparent; }

.map-route-end {
    position: absolute; transform: translate(-50%, -50%);
    padding: 2px 7px; border-radius: 10px; white-space: nowrap;
    background: var(--navy); color: #fff;
    font-size: 10px; font-weight: 600;
    pointer-events: none;
}

/* ── Номери будинків (наш адресний довідник; у підкладці їх немає) ──
   ⚠️ Навмисно тьмяні й дрібні: це орієнтир, а не зміст мапи. Клік крізь них
   проходить (`interactive:false` + pointer-events), інакше вони заважали б
   ставити точку кліком і відкривати піни. */
.map-house {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    color: #6b7a99;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
    pointer-events: none;
    user-select: none;
}
.map-pin--hover {
    transform: scale(1.45);
    transition: transform .12s ease;
    z-index: 500;
}

.map-legend {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 10px; font-size: 12px; color: var(--text-muted);
}
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-legend-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--blue); flex-shrink: 0;
}
.map-legend-dot--approx { background: var(--accent); }
.map-legend-dot--inactive { background: var(--text-light); }
/* Легенда планувальника виїзду — ті самі кольори, що в пінів на мапі */
.map-legend-dot--chosen { background: var(--success); }
.map-legend-dot--cand   { background: #fff; border: 2px dashed var(--success); }
.map-legend-dot--out    { background: var(--blue); opacity: .28; }

/* Режим встановлення піна */
.map-placing-hint {
    display: none; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 12px;
    border: 1px dashed var(--blue);
    border-radius: var(--radius-sm);
    background: var(--blue-light);
    color: var(--navy); font-size: 13px;
}
.map-placing-hint.visible { display: flex; }

/* Картка вибраного піна */
.map-pin-title {
    font-family: 'Unbounded', sans-serif; font-size: 14px;
    color: var(--navy); margin-bottom: 4px;
}
.map-pin-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.map-pin-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.map-pin-row-label { color: var(--text-muted); flex-shrink: 0; }
.map-pin-row-value { text-align: right; word-break: break-word; }
.map-pin-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; background: var(--bg); color: var(--text-muted);
}
.map-pin-badge--approx { background: var(--accent); color: var(--navy); }
.map-pin-badge--inactive { background: var(--border); color: var(--text-muted); }
.map-pin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Журнал відвідувань */
.map-visits { margin-top: 18px; border-top: 1px solid var(--border-light); padding-top: 14px; }
.map-visits-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin-bottom: 10px;
}
.map-visit { padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.map-visit:last-child { border-bottom: none; }
.map-visit-head { display: flex; justify-content: space-between; gap: 8px; }
.map-visit-date { color: var(--text-muted); font-size: 12px; }
.map-visit-note { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.map-visit-flag { color: var(--danger); font-size: 12px; margin-top: 4px; }

/* Результати пошуку провадження в модалці */
.map-proc-results { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.map-proc-item {
    padding: 8px 10px; border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer;
}
.map-proc-item:hover { border-color: var(--blue); background: var(--bg); }
.map-proc-item.selected { border-color: var(--blue); background: var(--blue-light); }
.map-proc-num { font-weight: 600; font-size: 13px; }
.map-proc-sub { font-size: 12px; color: var(--text-muted); }

@media (max-width: 1100px) {
    .map-wrap { flex-direction: column; height: auto; }
    .map-canvas { height: 460px; }
    .map-side { flex: 1 1 auto; max-height: 420px; }
}

/* Модуль «Мапа», крок M2 — введення адреси у вікні додавання піна */
.map-locate-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.map-coords-box {
    margin-top: 10px; padding: 8px 10px;
    border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    background: var(--bg); font-size: 12px; color: var(--text-muted);
}
.map-coords-box.ready { border-color: var(--success); color: var(--text); }
/* Маркер-лічильник: адреси, у яких відомий лише населений пункт.
   ⚠️ Форма НАВМИСНО інша, ніж у піна — це не адреса, а «тут N адрес без точки». */
.map-cluster {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px;
    background: var(--navy); color: #fff;
    font-size: 13px; font-weight: 600;
    border: 2px dashed var(--accent); box-shadow: var(--shadow);
}
.map-unresolved-note {
    margin-top: 10px; padding: 8px 10px;
    border-left: 3px solid var(--accent); background: var(--bg);
    font-size: 12px; color: var(--text-muted);
}
.map-refine-btn { margin-top: 10px; }

/* ── Блок уточнення місця в картці піна ──
   ⚠️ Коли точку не визначено точно, блок підсвічений: це не косметика, а
   попередження — виїзд «за адресою» на вісь вулиці означає марну поїздку. */
.map-refine-box {
    margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--border-light); border-radius: var(--radius);
    background: var(--bg);
}
.map-refine-box--needed {
    border-color: var(--accent);
    background: #fff9ec;
}
.map-refine-title {
    font-size: 13px; font-weight: 600; color: var(--navy);
    margin-bottom: 4px;
}
.map-refine-box--needed .map-refine-title { color: #8a5a00; }

/* ============================================================
   ЮРИДИЧНІ СТОРІНКИ (privacy.html, terms.html)
   Решта оформлення цих сторінок живе в їхніх власних <style>
   (історичний патерн публічних сторінок). Тут — лише те, що
   стосується широких таблиць: за правилом «широкий вміст
   скролиться у власному контейнері, а сторінка ніколи не
   скролиться горизонтально».
   ============================================================ */
.doc-table-scroll { overflow-x: auto; margin: 16px 0 20px; }
.doc-table-scroll .doc-table { margin: 0; min-width: 560px; }

/* ============================================================
   ЖУРНАЛ ПРИЙНЯТТЯ ОФЕРТИ І ПОЛІТИКИ (.lgl-*)
   Картка користувача в адмінці: enforcer_edit.html (секція)
   та модалка редагування акаунту в admin.html.
   ============================================================ */
.lgl-list { display: flex; flex-direction: column; gap: 8px; }
.lgl-empty, .lgl-loading { font-size: 13px; color: var(--text-muted); }
.lgl-row {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 12px; background: #fff;
}
.lgl-row-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.lgl-doc { font-size: 13px; font-weight: 600; color: var(--navy); }
.lgl-ver {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px;
    background: rgba(59,110,245,.10); color: var(--blue);
}
.lgl-ver.lgl-outdated { background: rgba(232,160,32,.14); color: #8a5d00; }
.lgl-ver.lgl-mismatch  { background: rgba(214,59,59,.10); color: var(--danger); }
.lgl-when { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.lgl-meta { font-size: 12px; color: var(--text-muted); }
.lgl-meta span + span::before { content: '·'; margin: 0 6px; color: var(--border); }
.lgl-ua {
    display: block; margin-top: 4px; font-size: 11px; color: var(--text-light);
    overflow-wrap: anywhere;
}
.lgl-badge-email {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 4px;
    background: var(--bg); color: var(--text-muted);
}
.lgl-current-note { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ОПЛАТА — тарифи (billing.html) · docs/design_billing.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* Плашка поточного стану */
.bill-status { display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
    border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg);
    margin-bottom:22px; }
.bill-status.active { background:#f0fdf4; border-color:#86efac; }
.bill-status.pending { background:#fffbeb; border-color:#fcd34d; }
.bill-status-ico { font-size:26px; color:var(--text-muted); flex-shrink:0; }
.bill-status.active .bill-status-ico { color:var(--success); }
.bill-status-title { font-weight:700; font-size:15px; color:var(--navy); margin-bottom:3px; }
.bill-status-sub { font-size:13px; color:var(--text-muted); line-height:1.5; }

/* Дві картки тарифів */
.bill-plans { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
@media (max-width: 900px) { .bill-plans { grid-template-columns:minmax(0,1fr); } }
.bill-plan { display:flex; flex-direction:column; border:2px solid var(--border);
    border-radius:var(--radius-xl); padding:22px; background:white; transition:var(--transition); }
.bill-plan:hover { border-color:var(--blue-light); box-shadow:var(--shadow); }
.bill-plan.selected { border-color:var(--blue); box-shadow:var(--shadow-lg); }
.bill-plan-badge { align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:10px;
    background:var(--bg); color:var(--text-muted); }
.bill-plan.selected .bill-plan-badge { background:var(--blue); color:white; }
.bill-plan-name { font-family:'Unbounded',sans-serif; font-size:19px; font-weight:700;
    color:var(--navy); margin-bottom:6px; }
.bill-plan-sub { font-size:13px; color:var(--text-muted); line-height:1.55; margin-bottom:16px; }
.bill-plan-price { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.bill-plan-amount { font-family:'Unbounded',sans-serif; font-size:30px; font-weight:700;
    color:var(--navy); }
.bill-plan-unit { font-size:13px; color:var(--text-muted); }
.bill-plan-hint { font-size:12px; color:var(--text-light); margin-bottom:16px; min-height:18px; }
.bill-plan-list { list-style:none; padding:0; margin:0 0 18px; display:flex;
    flex-direction:column; gap:9px; flex-grow:1; }
.bill-plan-list li { display:flex; align-items:flex-start; gap:9px; font-size:13px;
    color:var(--text); line-height:1.45; }
.bill-plan-list .material-icons-round { font-size:17px; color:var(--success); flex-shrink:0;
    margin-top:1px; }
.bill-plan-list li.muted { color:var(--text-muted); }
.bill-plan-list li.muted .material-icons-round { color:var(--text-light); }
.bill-plan-btn { width:100%; height:44px; border:none; border-radius:var(--radius);
    background:var(--blue); color:white; font-family:inherit; font-size:14px; font-weight:600;
    cursor:pointer; transition:var(--transition); }
.bill-plan-btn:hover { filter:brightness(1.08); }
.bill-plan-btn:disabled { background:var(--bg); color:var(--text-light); cursor:default;
    border:1.5px solid var(--border); }

/* Таблиці прайсу і порівняння. ⚠️ th перекриває глобальний navy-фон */
.bill-table { width:100%; border-collapse:collapse; }
.bill-table th { background:transparent; padding:9px 12px; text-align:left; font-size:11px;
    font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:.04em;
    border-bottom:1.5px solid var(--border); }
.bill-table td { padding:11px 12px; border-top:1px solid var(--border-light); font-size:13px;
    color:var(--text); vertical-align:top; }
.bill-table td.num { text-align:right; white-space:nowrap; font-weight:600; color:var(--navy); }
.bill-table td.free { text-align:right; white-space:nowrap; font-weight:600; color:var(--success); }
.bill-table tr.off td { color:var(--text-light); }

.bill-note { font-size:13px; color:var(--text-muted); line-height:1.6; margin-top:14px; }
.bill-note strong { color:var(--text); }

/* Правило нарахування тарифу «за провадженнями» */
.bill-rule { display:flex; flex-direction:column; gap:12px; margin:4px 0 16px; }
.bill-rule-item { display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
    background:var(--bg); border-radius:var(--radius); }
.bill-rule-num { width:26px; height:26px; border-radius:50%; background:var(--navy); color:white;
    font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; }
.bill-rule-text { font-size:13.5px; color:var(--text); line-height:1.55; }
.bill-rule-text b { color:var(--navy); }

.bill-section-title { font-family:'Unbounded',sans-serif; font-size:16px; font-weight:600;
    color:var(--navy); margin:0 0 6px; }
.bill-section-sub { font-size:13px; color:var(--text-muted); line-height:1.55; margin:0 0 18px; }

/* Баланс і журнал операцій (billing.html) */
.bill-balance { display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:20px 22px; border-radius:var(--radius-xl); margin-bottom:18px;
    background:linear-gradient(135deg, var(--navy), #1a2f5c); color:white; }
.bill-balance.negative { background:linear-gradient(135deg, #7f1d1d, #b91c1c); }
.bill-balance-label { font-size:11px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:4px; }
.bill-balance-val { font-family:'Unbounded',sans-serif; font-size:34px; font-weight:700;
    line-height:1.1; }
.bill-balance-hint { font-size:13px; color:rgba(255,255,255,.75); margin-top:6px; }

.bill-tx-wrap { overflow-x:auto; }
.bill-tx-table { min-width:560px; }
.bill-tx-date { color:var(--text-muted); white-space:nowrap; }
.bill-tx-title { font-weight:600; color:var(--text); }
.bill-tx-note { font-size:12px; color:var(--text-muted); margin-top:2px; }
.bill-tx-amount { text-align:right; white-space:nowrap; font-weight:700; }
.bill-tx-amount.credit { color:var(--success); }
.bill-tx-amount.debit { color:var(--text); }
.bill-tx-balance { text-align:right; white-space:nowrap; color:var(--text-muted); }
.bill-cmp td:first-child { color:var(--text-muted); width:34%; }

/* ── Промокоди (billing.html: введення; admin.html: керування) ────────────────
   docs/design_billing.md §13. Блок навмисно КОМПАКТНИЙ і стоїть одразу під
   балансом: більшість виконавців промокоду не мають, і він не має перетягувати
   увагу з тарифів. */
.promo-box { display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap; padding:14px 18px; margin-bottom:18px;
    border:1.5px dashed var(--border); border-radius:var(--radius); background:var(--bg); }
.promo-box-title { display:flex; align-items:center; gap:8px; font-size:13.5px;
    font-weight:700; color:var(--navy); }
.promo-box-title .material-icons-round { font-size:18px; color:var(--accent); }
.promo-box-sub { font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.promo-form { display:flex; align-items:center; gap:8px; }
.promo-input { width:210px; height:38px; text-transform:uppercase; letter-spacing:.04em;
    font-weight:600; }
.promo-input::placeholder { text-transform:none; letter-spacing:normal; font-weight:400; }
.promo-btn { height:38px; }
@media (max-width: 700px) {
    .promo-form { width:100%; }
    .promo-input { flex:1; width:auto; }
}

/* Керування промокодами в адмінці */
.promo-adm-form { display:flex; flex-direction:column; gap:10px; }
.promo-adm-row { display:flex; gap:10px; flex-wrap:wrap; }
.promo-adm-row > * { flex:1; min-width:0; }
.promo-adm-hint { font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.promo-adm-table { min-width:640px; }
.promo-adm-table th { background:transparent; }   /* перекриває глобальний navy-th */
.promo-code-cell { font-weight:700; color:var(--navy); letter-spacing:.03em; }
.promo-kind { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--bg);
    color:var(--text-muted); white-space:nowrap; }
.promo-state { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
    white-space:nowrap; }
.promo-state.on { background:#f0fdf4; color:#15803d; }
.promo-state.off { background:#f1f5f9; color:var(--text-muted); }
.promo-state.spent { background:#fffbeb; color:#b45309; }
.promo-used { white-space:nowrap; color:var(--text); }
.promo-used-total { font-size:11.5px; color:var(--text-muted); }
.promo-detail { background:var(--bg); }
.promo-detail-inner { padding:12px 14px; }
.promo-detail-title { font-size:12px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.promo-detail-row { display:flex; justify-content:space-between; gap:12px; font-size:12.5px;
    padding:4px 0; border-top:1px solid var(--border-light); }
.promo-detail-row:first-of-type { border-top:none; }
.promo-detail-who { color:var(--text); }
.promo-detail-when { color:var(--text-muted); white-space:nowrap; }
.promo-empty { font-size:12.5px; color:var(--text-muted); padding:8px 0; }

/* Оплата в адмінпанелі (admin.html → «Операційне» → «Оплата») */
.bill-adm-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;
    margin-bottom:22px; }
@media (max-width: 1000px) { .bill-adm-grid { grid-template-columns:minmax(0,1fr); } }
.bill-adm-card { border:1.5px solid var(--border); border-radius:var(--radius);
    padding:18px; background:white; }
.bill-adm-title { font-size:13px; font-weight:700; color:var(--navy); margin-bottom:4px; }
.bill-adm-sub { font-size:12px; color:var(--text-muted); margin-bottom:14px; line-height:1.5; }
.bill-adm-price-row { display:flex; align-items:center; gap:10px; padding:7px 0;
    border-top:1px solid var(--border-light); }
.bill-adm-price-name { flex:1; font-size:13px; }
.bill-adm-price-inp { width:110px; height:34px; text-align:right; }
.bill-adm-bal { font-weight:700; color:var(--navy); white-space:nowrap; }
.bill-adm-bal.negative { color:var(--danger); }
.bill-adm-plan { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--bg);
    color:var(--text-muted); white-space:nowrap; }

/* Рахунки на оплату (billing.html) */
.bill-status.restricted { background:#fef2f2; border-color:#fecaca; }
.bill-status.restricted .bill-status-ico { color:var(--danger); }
.bill-inv { border:1.5px solid var(--border); border-radius:var(--radius); padding:16px 18px;
    margin-bottom:12px; background:white; }
.bill-inv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    flex-wrap:wrap; }
.bill-inv-num { font-weight:700; font-size:15px; color:var(--navy); }
.bill-inv-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.bill-inv-right { text-align:right; }
.bill-inv-amount { font-family:'Unbounded',sans-serif; font-size:20px; font-weight:700;
    color:var(--navy); }
.bill-inv-chip { display:inline-block; margin-top:4px; font-size:11px; font-weight:600;
    padding:3px 10px; border-radius:999px; }
.bill-inv-chip.wait { background:#fffbeb; color:#b45309; }
.bill-inv-chip.check { background:#eff6ff; color:#1d4ed8; }
.bill-inv-chip.paid { background:#f0fdf4; color:#15803d; }
/* Прострочений і замінений наступним рахунком — приглушено, без дій */
.bill-inv-chip.over { background:#f3f4f6; color:var(--text-muted); }
.bill-inv--over { opacity:.6; border-style:dashed; }
.bill-inv--over .bill-inv-amount { color:var(--text-muted); }
.bill-inv-lines { margin:12px 0 4px; border-top:1px solid var(--border-light); padding-top:10px; }
.bill-inv-line { display:flex; justify-content:space-between; gap:12px; font-size:12.5px;
    color:var(--text); padding:3px 0; }
.bill-inv-line.muted { color:var(--text-light); }
.bill-inv-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.bill-inv-btn, .bill-inv-upload { display:inline-flex; align-items:center; gap:6px; height:36px;
    padding:0 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
    background:white; font-family:inherit; font-size:13px; color:var(--text);
    cursor:pointer; transition:var(--transition); }
.bill-inv-btn:hover, .bill-inv-upload:hover { border-color:var(--blue); color:var(--blue); }
.bill-inv-btn .material-icons-round, .bill-inv-upload .material-icons-round { font-size:17px; }
.bill-inv-upload { background:var(--navy); border-color:var(--navy); color:white; }
.bill-inv-upload:hover { filter:brightness(1.15); color:white; border-color:var(--navy); }
.bill-inv-hint { margin-top:10px; font-size:12px; color:var(--text-muted); }
.bill-adm-issuer { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.bill-adm-inv-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Попередження про пізнє формування рахунків — ПОСТІЙНИЙ блок, а не тост:
   тост зникає, а висновок «наступного разу раніше» роблять не в ту саму секунду. */
.bill-warn { margin:12px 0 0; padding:11px 14px; background:#fffbeb;
    border:1.5px solid #fcd34d; border-radius:var(--radius-sm);
    font-size:13px; line-height:1.5; color:#92400e; }
/* Черга на звірку заявлених оплат (адмінка → «Оплата») + мітка заміни рахунка */
.bill-pending { margin:12px 0 0; padding:11px 14px; background:#eff6ff;
    border:1.5px solid #bfdbfe; border-radius:var(--radius-sm);
    font-size:13px; line-height:1.5; color:#1e3a8a; }
.bill-pending-title { font-weight:700; margin-bottom:6px; }
.bill-pending-row { font-size:12.5px; }
.bill-pending-note { margin-top:6px; color:var(--text-muted); }
.bill-adm-sup { font-size:11px; color:var(--text-muted); margin-top:3px; }
.bill-inv-purpose { margin-top:12px; padding:12px 14px; background:#fffbeb;
    border:1.5px solid #fcd34d; border-radius:var(--radius-sm); }
.bill-inv-purpose-label { font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:#92400e; margin-bottom:6px; }
.bill-inv-purpose-text { font-size:13px; font-weight:600; color:var(--text);
    line-height:1.5; word-break:break-word; }
.bill-inv-copy { display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    height:32px; padding:0 12px; border:1.5px solid #fcd34d; border-radius:var(--radius-sm);
    background:white; font-family:inherit; font-size:12.5px; color:#92400e; cursor:pointer;
    transition:var(--transition); }
.bill-inv-copy:hover { background:#fef3c7; }
.bill-inv-copy .material-icons-round { font-size:16px; }

/* Журнал AI-розпізнавань (адмінка → «Оплата») */
.ai-stat-row { display:flex; gap:10px; flex-wrap:wrap; }
.ai-stat { flex:1; min-width:120px; padding:12px 14px; background:var(--bg);
    border-radius:var(--radius-sm); text-align:center; }
.ai-stat-val { font-family:'Unbounded',sans-serif; font-size:18px; font-weight:700;
    color:var(--navy); }
.ai-stat-lbl { font-size:11px; color:var(--text-muted); margin-top:3px; }
.ai-stat--key { background:#eff6ff; border:1.5px solid #bfdbfe; }
.ai-stat--key .ai-stat-val { color:var(--blue); }
.ai-stat--warn { background:#fffbeb; border:1.5px solid #fde68a; }
.ai-stat--warn .ai-stat-val { color:#b45309; }

/* Канонічний адресний віджет усередині модалки «Новий документ».
   ⚠️ Віджет будує власну сітку .mt-grid; тут лише відступ, щоб він не злипався
   із сусідніми полями форми. */
.addr-widget-wrap { margin-bottom: 12px; }
.addr-widget-wrap .mt-grid { gap: 8px; }

/* Модуль «Мапа», крок M4 — перемикачі виду/ваги, фільтри, громади */
.map-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.map-seg-btn {
    padding: 6px 12px; font-size: 12px; border: none; cursor: pointer;
    background: #fff; color: var(--text-muted); transition: var(--transition);
}
.map-seg-btn:hover { background: var(--bg); }
.map-seg-btn.active { background: var(--navy); color: #fff; }

.map-filters {
    display: none; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    padding: 14px; margin-bottom: 16px;
    border: 1px solid var(--border-light); border-radius: var(--radius);
    background: var(--bg);
}
.map-filters.open { display: flex; }
.map-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.map-filter .panel-input { min-width: 160px; }

/* Бульбашка громади — далекий зум. ⚠️ Форма інша, ніж у піна й лічильника:
   це не адреса і не «потребує уточнення», а скупчення справ у місцевості. */
.map-hromada {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--blue); color: #fff;
    border: 3px solid #fff; box-shadow: var(--shadow-lg);
    font-weight: 600; line-height: 1.1; cursor: pointer;
}
.map-hromada-num { font-size: 14px; }
.map-hromada-sub { font-size: 9px; opacity: .85; }
.map-hromada--outside { background: var(--text-light); }

/* Пін поза виконавчим округом — контур замість заливки (docs/design_map.md §10) */
.map-pin--outside { background: #fff; color: var(--navy); border-color: var(--text-muted); }
.map-legend-dot--outside { background: #fff; border: 2px solid var(--text-muted); }

/* Модуль «Мапа», крок M5 — планування виїзду */
.map-trip-start {
    padding: 10px; margin: 10px 0;
    border: 1px solid var(--border-light); border-radius: var(--radius-sm);
    background: var(--bg);
}
.map-cand {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--border-light); cursor: pointer;
}
.map-cand:last-of-type { border-bottom: none; }
.map-stop {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--border-light); cursor: pointer;
}
.map-stop:hover { background: var(--bg); }
.map-stop-num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--navy); color: #fff;
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.map-stop--visited .map-stop-num { background: var(--success); }
.map-stop--not_reached .map-stop-num { background: var(--accent); color: var(--navy); }
.map-stop--skipped .map-stop-num { background: var(--text-light); }
.map-close-row {
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--border-light);
}
.map-close-row .panel-input { max-width: 160px; }

/* Модуль «Мапа», крок M8 — підказка про власний темп.
   ⚠️ Оформлення навмисно спокійне: це спостереження за фактом, а не порада
   системи, і воно не має виглядати вагоміше за рішення самого працівника. */
.map-pace {
    margin: 8px 0 4px; padding: 8px 10px;
    border-left: 3px solid var(--blue);
    background: var(--bg);
    font-size: 12px; color: var(--text-muted);
}

/* Модуль «Мапа», крок M9 — доопрацювання планувальника */
.map-point-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.map-point-row .map-visits-title { margin: 0; flex: 0 0 100%; }
.map-point-row .map-pin-sub { flex: 1 1 auto; margin: 0; }
/* ⚠️ Цільова адреса в режимі «навколо» має бути видно одразу: саме заради неї
   виконавець і їде, решта — принагідно. */
.map-cand--target {
    background: var(--blue-light);
    border-left: 3px solid var(--blue);
    padding-left: 8px;
}

/* ── Bulk-імпорт: стягувач за замовчуванням (creditor_import.html, крок 2) ──
   ⚠️ Потрібен, бо код і назва стягувача обов'язкові для рядка партії, а реєстр
   великого стягувача часто веде справи ОДНОГО стягувача і колонки про нього не
   містить — без цього поля така партія цілком стала б на ручний розбір. */
.imp-default-creditor {
    border-top: 1px solid var(--border-light);
    padding-top: 14px;
    margin-bottom: 16px;
}
.imp-default-creditor label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.imp-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}
.imp-hint.required {
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   МОДУЛЬ «КЛІЄНТИ» — спільний віджет (client-picker.js), довідник (clients.js)
   і повна картка (client_card.js).

   ⚠️ Ці класи раніше жили копіями у <style>-блоках leads.html,
      documents_incoming.html, documents.html і proceedings.html, а в
      proceeding.html не було їх зовсім — тому віджет там виглядав інакше.
      Єдине місце — тут (правило №25).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — кнопки звʼязку (месенджери) — спільні для всіх екранів — */
.messenger-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-sm);
    text-decoration: none; font-size: 12px; font-weight: 500;
    transition: var(--transition);
    border: 1px solid var(--border); color: var(--text); background: var(--bg);
    white-space: nowrap;
}
.messenger-btn:hover { transform: scale(1.03); }
@media (hover: none) { .messenger-btn:hover { transform: none; } }
.messenger-tg { color: #0088cc; border-color: #0088cc; background: #e8f4fb; }
.messenger-wa { color: #25D366; border-color: #25D366; background: #e8faf0; }
.messenger-vb { color: #7360f2; border-color: #7360f2; background: #f0eeff; }
.messenger-ph { color: var(--blue); border-color: var(--blue); background: #eef2ff; }

.client-icon-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg); border: 1px solid var(--border);
    text-decoration: none; transition: var(--transition); color: var(--text-muted);
}
.client-icon-wrap:hover { transform: scale(1.1); }
@media (hover: none) { .client-icon-wrap:hover { transform: none; } }
.client-icon-wrap .material-icons-round { font-size: 18px; }

/* — віджет вибору клієнта — */
.cl-picker { display: block; }
.cl-ico-sm { font-size: 16px; }
.cl-empty { font-size: 12px; color: var(--text-muted); margin: 4px 0; }

.cl-warn {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--danger);
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px;
}
.cl-warn .material-icons-round { font-size: 16px; }

.cl-current { margin-bottom: 4px; }
.cl-current-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
.cl-current-info { min-width: 0; }
.cl-current-name { font-weight: 500; color: var(--navy); font-size: 13px; }
.cl-current-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.cl-role-badge {
    display: inline-block; margin-top: 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: var(--blue); background: #eef2ff; border: 1px solid #c7d2fe;
    border-radius: 20px; padding: 2px 8px;
}

.cl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cl-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: 'Geologica', sans-serif; font-size: 12px;
    color: var(--blue); text-decoration: none;
}
.cl-link:hover { text-decoration: underline; }
.cl-link--danger { color: var(--danger); }

.cl-note {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 11px; color: var(--text-muted);
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 8px 10px; margin-bottom: 8px;
}
.cl-note .material-icons-round { color: var(--blue); }

.cl-search { position: relative; }
.cl-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: white; border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    z-index: 200; max-height: 220px; overflow-y: auto; margin-top: 3px;
}
.cl-dropdown.open { display: block; }
.cl-dropdown-item {
    display: flex; flex-direction: column; padding: 9px 12px; cursor: pointer;
    border-bottom: 1px solid var(--border-light); transition: background .1s;
}
.cl-dropdown-item:last-child { border-bottom: none; }
.cl-dropdown-item:hover { background: #f0f4ff; }
.cl-dropdown-name { font-size: 13px; font-weight: 500; color: var(--navy); }
.cl-dropdown-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cl-dropdown-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); }

.cl-divider {
    display: flex; align-items: center; gap: 12px; margin: 10px 0 6px;
    font-size: 11px; color: var(--text-muted);
}
.cl-divider::before, .cl-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-light);
}

.cl-newform {
    display: none; padding: 12px; margin: 8px 0;
    background: var(--bg); border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.cl-newform.open { display: block; }
.cl-grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.cl-field { margin-bottom: 8px; }
.cl-field-label {
    display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.cl-hint { font-size: 11px; color: var(--success); margin-bottom: 6px; }

/* — додаткові контакти ВД — */
.cl-extras { margin-top: 12px; border-top: 1px solid var(--border-light); padding-top: 10px; }
.cl-extras-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-extras-body { display: none; margin-top: 8px; }
.cl-extras-body.open { display: block; }
.cl-extra-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--border-light);
}
.cl-extra-row:last-child { border-bottom: none; }
.cl-extra-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-extra-name { font-size: 12px; font-weight: 500; color: var(--navy); }
.cl-extra-meta { font-size: 11px; color: var(--text-muted); }
.cl-extra-add { position: relative; margin-top: 8px; }
.cl-icon-btn {
    background: none; border: none; cursor: pointer; padding: 2px;
    display: flex; color: var(--text-light); border-radius: 50%;
    transition: var(--transition);
}
.cl-icon-btn:hover { color: var(--danger); background: #fee2e2; }

/* — прихована історія закріплення (показується лише коли заміна БУЛА) — */
.cl-history-link { margin-top: 8px; }
.cl-history {
    margin-top: 10px; padding: 10px;
    background: var(--bg); border-radius: var(--radius-sm);
}
.cl-history-title {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px;
}
.cl-history-row {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    font-size: 11px; padding: 3px 0;
}
.cl-history-name { font-weight: 500; color: var(--navy); }
.cl-history-when { color: var(--text-muted); }
.cl-history-who { color: var(--text-light); }

/* — довідник «Клієнти» (clients.html) — */
.cll-toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px;
}
.cll-search-wrap { position: relative; flex: 1; min-width: 220px; }
.cll-search-wrap .material-icons-round {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-light); font-size: 20px; pointer-events: none;
}
.cll-search-wrap input { padding-left: 44px; }
.cll-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.cll-table { width: 100%; border-collapse: collapse; }
.cll-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.cll-table tbody tr { cursor: pointer; transition: background .12s; }
.cll-table tbody tr:hover { background: #f7f9ff; }
.cll-name { font-size: 13px; font-weight: 500; color: var(--navy); }
.cll-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cll-archived-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    color: var(--text-muted); background: var(--bg);
    border: 1px solid var(--border); border-radius: 20px;
    padding: 1px 7px; margin-left: 6px;
}
.cll-bd {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--accent); font-weight: 500;
}
.cll-bd .material-icons-round { font-size: 14px; }
.cll-actions { display: flex; gap: 8px; align-items: center; }
.cll-more { display: flex; justify-content: center; padding: 14px; }

/* — повна картка клієнта (client_card.html) — */
.ccard-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.ccard-title { font-family: 'Unbounded', sans-serif; font-size: 20px; color: var(--navy); margin: 0; }
.ccard-badges { display: flex; gap: 8px; align-items: center; }
.ccard-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px; align-items: start;
}
@media (max-width: 1000px) { .ccard-grid { grid-template-columns: minmax(0, 1fr); } }
.ccard-section { margin-bottom: 20px; }
.ccard-section-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light);
}
.ccard-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.ccard-fields .full { grid-column: 1 / -1; }
.ccard-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.ccard-readonly-note {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-muted);
    background: #eef2ff; border: 1px solid #c7d2fe;
    border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px;
}
.ccard-readonly-note .material-icons-round { color: var(--blue); font-size: 18px; }
.ccard-portfolio-item { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.ccard-portfolio-item:last-child { border-bottom: none; }
.ccard-pf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ccard-pf-case { font-size: 13px; font-weight: 500; color: var(--navy); }
.ccard-pf-sub { font-size: 11px; color: var(--text-muted); }
.ccard-pf-extra {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg);
    border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px;
}
.ccard-delivery { display: flex; gap: 10px; margin-bottom: 12px; }
.ccard-delivery-opt {
    flex: 1; text-align: center; padding: 10px; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font-size: 12px; transition: var(--transition); background: white;
}
.ccard-delivery-opt.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); font-weight: 500; }
.ccard-np { display: none; }
.ccard-np.visible { display: block; }

/* — компактний чіп вибраного клієнта (модалка «Новий документ») — */
.cl-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 20px;
    padding: 5px 8px 5px 12px; margin-top: 8px;
}
.cl-chip-name { font-size: 13px; font-weight: 500; color: var(--navy); }
.cl-chip-meta { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.cl-chip-clear {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 2px; display: flex; border-radius: 50%; transition: var(--transition);
}
.cl-chip-clear:hover { color: var(--danger); background: #fee2e2; }

/* ── Нова Пошта: вибір міста і відділення з довідника (np-input.js) ────────────
   ⚠️ Власна випадайка, а не <datalist>: потрібно окремо тримати «що показуємо»
   (повний опис відділення) і «що зберігаємо» (його НОМЕР для накладної). */
.np-block { margin-top: 12px; }
.np-block-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-muted); margin-bottom: 10px;
}
.np-toggle { margin-bottom: 6px; }
.np-block-body { display: none; }
.np-block-body.open { display: block; }

.np-drop {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 260px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    z-index: 9200; padding: 4px 0; display: none;
}
.np-drop.open { display: block; }
.np-drop-item { padding: 8px 12px; cursor: pointer; transition: background .1s; }
.np-drop-item:hover { background: var(--bg); }
.np-drop-main { font-size: 13px; color: var(--navy); }
.np-drop-sub  { font-size: 11px; color: var(--text-muted); }
.np-drop-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); }

/* ⚠️ Пояснення показується ЗАВЖДИ, коли довідник недоступний (правило №46):
   «список порожній» і «ключа API немає» — різні новини для людини. */
.np-hint {
    grid-column: 1 / -1;
    font-size: 11px; color: var(--text-muted);
    margin-top: 6px; line-height: 1.45;
}
.np-hint--error { color: var(--danger); }

/* ── Універсальний пошук верхньої панелі: групи результатів ───────────────────
   Поле шукає по всій системі (клієнти, сторони, ВД, провадження, ліди), тому
   результат розбитий на групи з підписами — інакше рядки різної природи
   зливаються в один список і незрозуміло, куди саме веде перехід. */
.qs-group-label {
    padding: 8px 14px 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-light);
}
.qs-group + .qs-group .qs-group-label { border-top: 1px solid var(--border-light); margin-top: 4px; }
.qs-item-ico {
    flex-shrink: 0; font-size: 18px; color: var(--text-light);
}
.qs-item-sub {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Календар: вказівник на модуль «Завдання» замість власного списку завдань.
   Розмежування — Календар планує ЧАС, Завдання планують РОБОТУ. */
.cal-tasks-note{font-size:12px;color:var(--text-muted);line-height:1.5;padding:8px 0}
.cal-tasks-link{display:inline-block;font-size:12px;color:var(--blue);
  text-decoration:none;font-weight:600}
.cal-tasks-link:hover{text-decoration:underline}

/* Смуга «над чим працюю зараз» — відлік іде сам, без секундоміра */
.tk-active-bar{display:flex;align-items:center;gap:8px;background:#e6f4ea;
  border:1px solid #b7dfc4;border-radius:var(--radius);padding:8px 14px;
  margin-bottom:12px;font-size:13px;color:#1e7a3c}
.tk-active-bar .material-icons-round{font-size:18px}
.tk-active-title{font-weight:600}
.tk-active-time{margin-left:auto;font-variant-numeric:tabular-nums}

/* Історія робіт на головній (модуль «Завдання», блок 5) */
.dash-worklog-nav{margin-left:auto;display:flex;gap:4px}
.dash-worklog-btn{background:none;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:2px 8px;font-size:11px;
  color:var(--text-muted);cursor:pointer}
.dash-worklog-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.dash-worklog-user{display:flex;align-items:center;font-size:12px;font-weight:600;
  color:var(--navy);margin:10px 0 4px;padding-bottom:4px;
  border-bottom:1px solid var(--border-light)}
.dash-worklog-user:first-child{margin-top:0}
.dash-worklog-total{margin-left:auto;color:var(--text-muted);font-weight:400}
.dash-worklog-more{font-size:11px;color:var(--text-light);padding:2px 0 6px}

/* ═══ Чеклист перевірки ВД (модуль «Завдання», блок 6) ══════════════════════ */
/* ⚠️ Стану не зберігає — це шпаргалка. Кліків не вимагає взагалі. */

.chk-box{border:1px solid var(--border-light);border-radius:var(--radius-sm);
  margin-bottom:14px;background:#fff}
.chk-head{display:flex;align-items:center;gap:8px;width:100%;background:none;
  border:none;padding:9px 12px;font-size:13px;font-weight:600;color:var(--navy);
  cursor:pointer;text-align:left;font-family:inherit}
.chk-head .material-icons-round{font-size:17px;color:var(--blue)}
.chk-head-badge{margin-left:auto;font-size:11px;font-weight:400;
  color:var(--text-muted);background:var(--bg);border-radius:9px;padding:1px 8px}
.chk-head-badge--block{background:var(--danger);color:#fff;font-weight:600}
.chk-arrow{transition:var(--transition)}
.chk-box.open .chk-arrow{transform:rotate(180deg)}
.chk-body{display:none;padding:0 12px 12px}
.chk-box.open .chk-body{display:block}
.chk-note{font-size:11px;color:var(--text-light);line-height:1.5;padding:4px 0 8px}
.chk-group{font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--text-muted);font-weight:700;margin:10px 0 4px}
.chk-item{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:12px;
  line-height:1.45}
.chk-item-ico{font-size:16px;flex-shrink:0;margin-top:1px}
.chk-item-text{flex:1;color:var(--text)}
.chk-item-detail{font-size:11px;color:var(--text-muted);margin-top:1px}
.chk-auto .chk-item-ico{color:var(--success)}
.chk-auto .chk-item-text{color:var(--text-muted)}
.chk-block .chk-item-ico{color:var(--danger)}
.chk-block .chk-item-text{color:var(--danger);font-weight:600}
.chk-warn .chk-item-ico{color:var(--accent)}
.chk-warn .chk-item-text{color:var(--text);font-weight:600}
.chk-manual .chk-item-ico{color:var(--border)}
.chk-registry .chk-item-ico{color:var(--blue)}
.chk-reg-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:2px 9px;font-size:11px;color:var(--blue);cursor:pointer;flex-shrink:0}
.chk-reg-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ─── Каталог сигналів (Налаштування → Конвеєр → Сигнали) ─────────────────── */
/* Сигнал = подія, що САМА створює термінове завдання. Картка навмисно велика:
   вмикати/вимикати їх будуть рідко, а читати опис — уважно.                    */
.sg-card{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;
    margin-bottom:12px;background:#fff;transition:var(--transition)}
.sg-card.sg-off{opacity:.55;background:var(--bg)}
.sg-head{display:flex;align-items:flex-start;gap:10px}
.sg-name-wrap{min-width:0}
.sg-name{font-weight:600;color:var(--navy);font-size:14px}
.sg-creates{font-size:12px;color:var(--text-muted);margin-top:2px}
.sg-why{font-size:12px;color:var(--text-muted);margin:8px 0 10px;line-height:1.5}
.sg-row{display:grid;grid-template-columns:120px 140px minmax(0,1fr);gap:10px;
    align-items:end;margin-bottom:10px}
.sg-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-basis{margin-top:8px;font-size:11px;color:var(--text-light);
    border-top:1px dashed var(--border-light);padding-top:6px}
@media (max-width:720px){.sg-row{grid-template-columns:minmax(0,1fr)}}

/* Завдання, поставлене сигналом, а не людиною (див. work_signals.py) */
.tk-chip-signal{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}

/* ─── Позначки завдання в картці ліда і провадження ───────────────────────── */
/* Дрібні мітки, що пояснюють природу завдання без переходу на екран «Завдання».
   ⚠️ Свідомо не копіюють .tk-chip з екрана завдань: там чіп у рядку картки,
   тут — у вузькій бічній панелі, де потрібен менший розмір.                   */
.task-mark {
    display: inline-block; padding: 1px 6px; border-radius: 8px;
    font-size: 10px; line-height: 15px; background: var(--bg);
    color: var(--text-muted); border: 1px solid var(--border-light);
}
.task-mark-urgent { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
/* Завдання на перевірці закриває контролер на екрані «Завдання», не тут */
.task-check-review {
    cursor: not-allowed; opacity: .55;
    border-style: dashed !important; border-color: var(--accent) !important;
}

/* ── Листи стягувачу (картка ліда, модуль «Рішення з ЄДРСР») ────────────── */
.lt-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: white;
    margin-bottom: 8px;
}
.lt-card-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.lt-card-recipient { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lt-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lt-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px;
    font-size: 11px; font-family: inherit;
    color: var(--navy);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.lt-btn:hover:not(:disabled) { border-color: var(--blue); background: #f0f4ff; }
.lt-btn:disabled { opacity: .45; cursor: not-allowed; }
.lt-btn .material-icons-round { font-size: 16px; }
.lt-btn--accent { border-color: var(--accent); }
.lt-btn--accent:hover:not(:disabled) { background: #fffaf0; border-color: var(--accent); }
.lt-warn {
    font-size: 11px; color: var(--danger);
    margin-top: 6px; line-height: 1.35;
}
.lt-hint {
    font-size: 11px; color: var(--text-muted);
    margin-top: 6px; line-height: 1.35;
}
.lt-error {
    font-size: 12px; color: var(--danger);
    padding: 6px 0;
}

/* Вікно «Текст для e-mail» */
.lt-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.lt-modal { width: 100%; max-width: 680px; padding: 24px; max-height: 90vh; overflow-y: auto; }
.lt-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.lt-modal-head h3 { font-size: 16px; margin: 0; }
.lt-modal-body { display: flex; flex-direction: column; gap: 10px; }
.lt-field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-field-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-muted); min-width: 48px;
}
.lt-field-value { font-size: 13px; color: var(--text); flex: 1; word-break: break-word; }
.lt-copy-btn { flex-shrink: 0; }
.lt-email-text { font-size: 13px; line-height: 1.5; resize: vertical; min-height: 260px; }
.lt-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.fx-preview { margin: 10px 0; }
.fx-preview-img {
    max-width: 260px; max-height: 110px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
    padding: 4px;
}

.pf-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: -6px 0 10px;
    padding-left: 2px;
}

/* Листи: вікно зі списком, вкладки тексту, прев'ю HTML */
.lt-modal--list { max-width: 760px; }
.lt-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-card-desc { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.lt-card--suggested { border-color: var(--blue); background: #f7faff; }
.lt-badge {
    font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
    color: var(--blue); background: #e8f0ff;
    border-radius: 999px; padding: 2px 8px;
}
.lt-tabs { margin: 4px 0 2px; }
.lt-preview {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: white;
    max-height: 340px;
    overflow-y: auto;
}
.lt-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Перенесення портфеля з витягу АСВП (docs/design_asvp_onboarding.md §15)
   Екран /asvp_import.html + мітки імпортованих ВП у списку і в картці.
   ⚠️ Кольори — лише через змінні: жодного хардкоду (правило №24 CLAUDE.md).
   ═══════════════════════════════════════════════════════════════════════════ */

.asvp-h2 { font-size: 17px; }

.asvp-intro {
    font-size: 13px; color: var(--text-muted);
    line-height: 1.55; margin-bottom: 18px; max-width: 860px;
}

/* Плашка «у чий профіль іде імпорт» — ПОСТІЙНА, не тост (§15.1):
   модератор має бачити адресата весь час роботи з екраном. */
.asvp-target {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff8e6; border: 1.5px solid var(--accent);
    border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 16px;
}
.asvp-target .material-icons-round { color: #b45309; font-size: 22px; flex-shrink: 0; }
.asvp-target-title { font-size: 14px; color: var(--navy); }
.asvp-target-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Інструкція «де взяти файл» */
.asvp-howto {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 16px 20px; margin-bottom: 18px;
}
.asvp-howto-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px;
}
.asvp-howto-title .material-icons-round { font-size: 16px; color: var(--blue); }
.asvp-howto-list { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.75; color: var(--text); }
.asvp-howto-note { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

/* Зона завантаження */
.asvp-drop {
    border: 2px dashed var(--border); border-radius: var(--radius-xl);
    padding: 24px; text-align: center; background: white;
}
.asvp-drop-ico { font-size: 40px; color: var(--blue); opacity: .6; display: block; margin-bottom: 8px; }
.asvp-drop-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.asvp-drop input[type="file"] { max-width: 420px; margin: 0 auto 8px; }
.asvp-drop-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }

.asvp-file-line { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }

/* Числа попереднього розбору і підсумку */
.asvp-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.asvp-stat {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
}
.asvp-stat--ok   { background: #f0fdf4; border-color: #86efac; }
.asvp-stat--warn { background: #fff8e6; border-color: #fde68a; }
.asvp-stat-val { font-family: "Unbounded", sans-serif; font-size: 22px; color: var(--navy); }
.asvp-stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.asvp-stat-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; line-height: 1.4; }

/* Ворота §5: файл чужого виконавця — головне повідомлення екрана */
.asvp-block {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff1f1; border: 1.5px solid var(--danger);
    border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 16px;
}
.asvp-block .material-icons-round { color: var(--danger); font-size: 22px; flex-shrink: 0; }
.asvp-block-title { font-size: 14px; font-weight: 600; color: var(--danger); margin-bottom: 4px; }
.asvp-block-txt { font-size: 13px; color: var(--text); line-height: 1.55; }

.asvp-warn {
    display: flex; gap: 8px; align-items: flex-start;
    background: #fff8e6; border: 1px solid #fde68a;
    border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px;
    font-size: 12px; color: var(--text); line-height: 1.5;
}
.asvp-warn .material-icons-round { font-size: 18px; color: #b45309; flex-shrink: 0; }

/* Збій і порожній результат МУСЯТЬ виглядати по-різному (правило №46):
   постійний блок, а не тост, що зникає через три секунди. */
.asvp-error {
    display: flex; gap: 8px; align-items: center;
    background: #fff1f1; border: 1px solid #fca5a5;
    border-radius: var(--radius); padding: 12px 14px;
    font-size: 13px; color: var(--danger);
}
.asvp-error .material-icons-round { font-size: 18px; }

.asvp-sub-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin: 18px 0 8px;
}
.asvp-note { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; max-width: 860px; }

.asvp-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* Зразок рядків. ⚠️ th прозорий — перекриває глобальне th { background: var(--navy) } */
.asvp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.asvp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.asvp-table th {
    background: transparent; color: var(--text-muted);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    padding: 9px 12px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.asvp-table td { padding: 8px 12px; border-top: 1px solid var(--border-light); font-size: 12px; }
.asvp-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.asvp-amount { text-align: right; font-weight: 600; white-space: nowrap; }
.asvp-chip {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 11px; background: var(--bg); color: var(--text-muted); white-space: nowrap;
}
.asvp-chip--warn { background: #fff8e6; color: #b45309; }

/* Історія завантажень */
.asvp-batch {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: 10px; background: white;
}
.asvp-batch-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.asvp-batch-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.asvp-batch-date { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.asvp-batch-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.asvp-batch-chip {
    font-size: 11px; color: var(--text-muted);
    background: var(--bg); border-radius: 12px; padding: 2px 9px;
}
.asvp-batch-chip b { color: var(--navy); }

/* ── Походження файлу і журнал змін актуалізації (§12.3, §12.4) ──────────────
   ⚠️ Неоригінальний файл — НЕ звинувачення (людина могла просто відкрити його в
   Excel), тому плашка жовта-нейтральна, а не червона-блокувальна: імпорт іде далі. */
.asvp-origin {
    display: flex; gap: 10px; align-items: flex-start;
    border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
    font-size: 13px; line-height: 1.55;
}
.asvp-origin .material-icons-round { font-size: 18px; flex-shrink: 0; }
.asvp-origin--ok  { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.asvp-origin--ok .material-icons-round { color: #16a34a; }
.asvp-origin--mod { background: #fff8e6; border: 1px solid #fde68a; color: var(--text); }
.asvp-origin--mod .material-icons-round { color: #b45309; }
.asvp-origin-title { font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.asvp-origin-txt { color: var(--text-muted); font-size: 12px; }
.asvp-origin-reason { font-size: 11px; color: var(--text-light); margin-top: 3px; }

/* «Було → стало» по кожному провадженню: мовчазне оновлення сотень записів
   неприпустиме, тож зміна називається поіменно. */
.asvp-chg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.asvp-chg {
    border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 9px 12px; background: white;
}
.asvp-chg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asvp-chg-debtor { font-size: 12px; color: var(--navy); font-weight: 500; }
.asvp-chg-line {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; margin-top: 6px;
}
.asvp-chg-field { color: var(--text-muted); min-width: 150px; }
.asvp-chg-from { color: var(--text-muted); text-decoration: line-through; }
.asvp-chg-arrow { color: var(--text-light); }
.asvp-chg-to { color: var(--navy); font-weight: 600; }
.asvp-chg-extra {
    font-size: 11px; color: var(--text-muted);
    background: var(--bg); border-radius: 10px; padding: 1px 8px;
}
.asvp-chg-reason { font-size: 11px; color: #b45309; margin-top: 4px; line-height: 1.5; }

/* Розбіжності — ПИТАННЯ, а не твердження (§12.2): ніколи не «провадження зникло». */
.asvp-ask {
    background: #fff8e6; border: 1px solid #fde68a; border-radius: var(--radius-xl);
    padding: 14px 18px; margin-top: 16px;
}
.asvp-ask-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.asvp-ask-txt { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ── Мітки імпортованого ВП (§8) ─────────────────────────────────────────────
   ⚠️ Неповнота називається ВГОЛОС: без мітки порожня суть стягнення читалася б
   як несправність системи, а не як керований стан онбордингу. */
.asvp-imported-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 2px 8px; border-radius: 12px;
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); white-space: nowrap;
}
.asvp-imported-badge .material-icons-round { font-size: 13px; }
.asvp-imported-badge--row { margin-top: 3px; }
/* §12.4 — запис прийшов із файлу, який перезберігали: мітка не бреше про походження */
.asvp-imported-badge--resaved { background: #fff8e6; border-color: #fde68a; color: #b45309; }

/* Плашка «визначте стан» у картці ВП (§4.4) */
.asvp-state-box {
    display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
    background: #fff8e6; border: 1.5px solid var(--accent);
    border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 14px;
}
.asvp-state-box .material-icons-round { color: #b45309; font-size: 22px; flex-shrink: 0; }
.asvp-state-main { flex: 1; min-width: 260px; }
.asvp-state-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.asvp-state-raw { font-size: 13px; color: var(--text); line-height: 1.5; }
.asvp-state-raw i { color: #b45309; font-style: normal; font-weight: 600; }
.asvp-state-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.asvp-state-pick { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.asvp-state-pick select { max-width: 260px; }

/* Банер онбордингу на дашборді (§15) */
.dash-asvp-banner {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--navy), #1a2f57);
    border-radius: var(--radius-xl); padding: 18px 22px; margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.dash-asvp-banner .material-icons-round { color: var(--accent); font-size: 30px; flex-shrink: 0; }
.dash-asvp-txt { flex: 1; min-width: 240px; }
.dash-asvp-title { font-family: "Unbounded", sans-serif; font-size: 15px; color: white; margin-bottom: 4px; }
.dash-asvp-sub { font-size: 12px; color: rgba(255, 255, 255, .75); line-height: 1.5; }
.dash-asvp-btn {
    background: var(--accent); color: var(--navy); border: none;
    border-radius: var(--radius); padding: 10px 18px;
    font-family: "Geologica", sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
    text-decoration: none; display: inline-block;
}
.dash-asvp-btn:hover { filter: brightness(1.06); }

/* Рядок-нагадування «давно не звіряли» + рядок «ВП без визначеного стану» */
.dash-asvp-note {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px;
    font-size: 12px; color: var(--text-muted);
}
.dash-asvp-note .material-icons-round { font-size: 17px; color: var(--text-light); }
.dash-asvp-note a { color: var(--blue); text-decoration: none; font-weight: 600; }
.dash-asvp-note a:hover { text-decoration: underline; }

/* Кнопка входу в імпорт на сторінці «Провадження» — посилання у вигляді кнопки */
.asvp-import-btn {
    display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none; white-space: nowrap;
}
.asvp-import-btn .material-icons-round { font-size: 17px; }


/* ── Мультивалютність (docs/design_asvp_onboarding.md §11) ──────────────────
   Правило одне: валютна сума ніде не виглядає як гривнева, а пропущений
   гривневий еквівалент видно як пропуск, а не як «усе гаразд». */

/* Поле «Еквівалент у гривні» у формах ВД — з'являється лише для валютних */
.cur-uah-row { margin-top: 4px; }
.cur-uah-hint {
    margin: 6px 0 0; font-size: 11px; line-height: 1.45;
    color: var(--text-muted); max-width: 460px;
}

/* Довідка «≈ N ₴» під сумою в шапці провадження */
.proc-hero-amount-uah {
    margin-top: 2px; font-size: 12px; color: var(--text-light); white-space: nowrap;
}
.proc-hero-amount-uah--missing { color: var(--accent); }

/* Плашка «розподіл ведеться вручну» на вкладці «Кошти» */
.funds-cur-warn {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin: 12px 0 0;
    background: #fff8e6; border: 1px solid #f0d99a; border-radius: var(--radius);
}
.funds-cur-warn .material-icons-round { font-size: 20px; color: #a8791a; flex-shrink: 0; }
.funds-cur-warn-title { font-size: 13px; font-weight: 600; color: var(--navy); }
.funds-cur-warn-sub {
    margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-muted);
}

/* Другий підсумковий рядок («витрати і штраф») — тонший за перший */
.funds-bal-total--sub { border-top: none; padding-top: 2px; }
.funds-bal-total--sub .funds-bal-val { font-weight: 500; }

/* Поле суми платіжки для валютного ВП */
.funds-req-amt {
    width: 110px; padding: 5px 8px; font-size: 12px; text-align: right;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Рядок про валютні провадження у фінансовій картці дашборда */
.dash-fin-note {
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-light);
    font-size: 11px; line-height: 1.5; color: var(--text-muted);
}
.dash-fin-note--warn { margin-top: 3px; color: var(--accent); font-weight: 500; }

/* ── Wiki: редактор статей в адмінці (лише admin) ──────────────────────── */
.wk-note{background:#eef6ff;border:1px solid #cfe0fa;border-radius:var(--radius);
  padding:12px 14px;font-size:13px;line-height:1.6;color:var(--text-muted);margin-bottom:16px}
.wk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.wk-search{max-width:320px}
.wk-stale{display:flex;align-items:center;gap:8px;background:#fff7ea;border:1px solid #f0c98a;
  border-radius:var(--radius);padding:11px 14px;font-size:13px;color:#8a5a08;margin-bottom:14px;line-height:1.55}
.wk-stale .material-icons-round{font-size:19px;flex-shrink:0}
.wk-list{display:flex;flex-direction:column;gap:8px}
.wk-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius)}
.wk-row:hover{border-color:var(--blue)}
.wk-row-title{font-size:14px;font-weight:600;color:var(--navy);line-height:1.35}
.wk-row-sub{font-size:11.5px;color:var(--text-light);margin-top:2px;font-family:ui-monospace,Consolas,monospace}
.wk-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.wk-st-factory{background:var(--bg);color:var(--text-muted)}
.wk-st-over{background:#eaf1ff;color:var(--blue)}
.wk-st-custom{background:#e9f7ee;color:#14532d}
.wk-st-hidden{background:#f3f4f6;color:var(--text-light)}
.wk-st-stale{background:#fff2d8;color:#8a5a08}
.wk-empty{padding:30px;text-align:center;color:var(--text-muted);font-size:14px}

.wk-modal{width:100%;max-width:900px;max-height:92vh;overflow-y:auto;padding:24px}
.wk-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin:14px 0 6px}
.wk-ta{width:100%;min-height:320px;font-family:ui-monospace,Consolas,monospace;font-size:13px;
  line-height:1.6;resize:vertical}
.wk-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.wk-hint{font-size:11.5px;color:var(--text-light);line-height:1.5}
.wk-factory{margin-top:16px;border:1px solid var(--border-light);border-radius:var(--radius);
  background:var(--bg);padding:10px 14px}
.wk-factory summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-muted)}
.wk-factory pre{margin:10px 0 0;white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;
  font-size:12px;line-height:1.55;color:var(--text);max-height:320px;overflow-y:auto}
.wk-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--border-light)}

/* ── Контекстна довідка «?» (docs/design_wiki.md §7) ───────────────────── */
.wkh-overlay{position:fixed;inset:0;background:rgba(15,30,61,.28);z-index:1200;
  display:none;justify-content:flex-end}
.wkh-overlay.open{display:flex}
.wkh-panel{width:min(560px,100%);height:100%;background:#fff;display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(15,30,61,.18);animation:wkhSlide .18s ease}
@keyframes wkhSlide{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
.wkh-head{display:flex;align-items:center;gap:9px;padding:16px 18px;background:var(--navy);color:#fff}
.wkh-head .material-icons-round{font-size:20px;color:var(--accent)}
.wkh-head-title{flex:1;font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;line-height:1.3}
.wkh-close{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  opacity:.75;padding:0 2px}
.wkh-close:hover{opacity:1}
.wkh-picker{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px 0}
.wkh-chip{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:5px 12px;
  font-family:inherit;font-size:12px;color:var(--text-muted);cursor:pointer;transition:var(--transition)}
.wkh-chip:hover{border-color:var(--blue);color:var(--blue)}
.wkh-chip.active{background:#eaf1ff;border-color:var(--blue);color:var(--blue);font-weight:600}
.wkh-body{flex:1;overflow-y:auto;padding:18px}
.wkh-body .wiki-body{font-size:14px}
.wkh-body .wiki-body h2{font-size:17px;margin:24px 0 10px}
.wkh-body .wiki-body h3{font-size:15px;margin:18px 0 8px}
.wkh-loading,.wkh-error{padding:26px 4px;text-align:center;font-size:14px;color:var(--text-muted)}
.wkh-error{color:#a4262c}
.wkh-foot{padding:12px 18px;border-top:1px solid var(--border-light);background:var(--bg)}
.wkh-full{font-size:13px;font-weight:600;color:var(--blue);text-decoration:none}
.wkh-full:hover{text-decoration:underline}
@media (max-width:640px){ .wkh-panel{width:100%} }
.wkh-chip--more{text-decoration:none;display:inline-flex;align-items:center}

/* ── Чеклист першого входу (docs/design_wiki.md §7) ────────────────────────── */
.onb-card{background:#fff;border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:20px}
.onb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.onb-head-ico{color:var(--accent);font-size:22px}
.onb-head-txt{flex:1;min-width:200px}
.onb-title{font-family:Unbounded,sans-serif;font-size:14px;font-weight:600;color:var(--navy)}
.onb-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.onb-bar{width:120px;height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.onb-bar-fill{height:100%;background:var(--accent);border-radius:3px;transition:var(--transition)}
.onb-steps{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.onb-step{display:flex;gap:10px;align-items:flex-start}
.onb-mark{font-size:20px;color:var(--border);flex-shrink:0;margin-top:1px}
.onb-step--done .onb-mark{color:var(--success)}
.onb-step-body{flex:1;min-width:0}
.onb-step-title{font-size:13.5px;font-weight:600;color:var(--text)}
.onb-step--done .onb-step-title{font-weight:500;color:var(--text-muted);text-decoration:line-through}
.onb-step-hint{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.45}
.onb-step-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:7px}
.onb-go{font-size:12.5px;font-weight:600;color:#fff;background:var(--blue);border-radius:var(--radius-sm);
  padding:5px 12px;text-decoration:none;transition:var(--transition)}
.onb-go:hover{background:var(--navy)}
.onb-help{font-size:12px;color:var(--blue);text-decoration:none}
.onb-help:hover{text-decoration:underline}
.onb-skip{background:none;border:none;font-family:inherit;font-size:12px;color:var(--text-light);
  cursor:pointer;padding:0}
.onb-skip:hover{color:var(--text-muted);text-decoration:underline}
@media (max-width:640px){ .onb-bar{width:100%} }

/* ═══════════════ Довідник банків (banks.html) ═══════════════
   ⚠️ Довідник ОДИН на всю систему: виконавець читає, адмін веде.
   Та сама сторінка в двох режимах — кнопки дії показуються за
   `can_edit` З ВІДПОВІДІ СЕРВЕРА, а не за роллю з localStorage. */
.bnk-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.bnk-search-wrap{position:relative;flex:1;min-width:220px}
.bnk-search-wrap .material-icons-round{position:absolute;left:14px;top:50%;
  transform:translateY(-50%);color:var(--text-light);font-size:19px;pointer-events:none}
.bnk-search-wrap input{padding-left:44px;background:#fff;border:1.5px solid var(--border)}
.bnk-count{height:40px;padding:0 16px;background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);font-size:12px;font-weight:600;color:var(--text-muted);
  display:flex;align-items:center;white-space:nowrap}

.bnk-table{width:100%;border-collapse:collapse}
.bnk-table thead tr{background:var(--navy)}
.bnk-table th{padding:11px 14px;text-align:left;font-size:11px;font-weight:600;
  color:rgba(255,255,255,.85);letter-spacing:.04em;white-space:nowrap}
.bnk-table td{padding:10px 14px;border-top:1px solid var(--border-light);font-size:13px;
  vertical-align:middle;color:var(--text)}
.bnk-table tr{transition:background .15s}
.bnk-table tbody tr:hover td{background:#f5f7ff}
.bnk-name{font-weight:600}
.bnk-addr{color:var(--text-muted);font-size:12px}
.bnk-mail{font-family:monospace;font-size:12px}

/* Вимкнений банк — приглушений, але видимий: його треба мати змогу повернути */
.bnk-row--off td{opacity:.45}
.bnk-row--off .bnk-chip-off{opacity:1}
.bnk-chip-off{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;
  font-size:11px;font-weight:500;background:#fee2e2;color:#b91c1c;white-space:nowrap}

.bnk-actions{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.bnk-icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:#fff;border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text-muted);transition:var(--transition);padding:0}
.bnk-icon-btn:hover{background:var(--bg);color:var(--navy);border-color:var(--blue-light)}
.bnk-icon-btn .material-icons-round{font-size:17px}
.bnk-icon-btn:disabled{opacity:.3;cursor:default}
.bnk-icon-btn--danger:hover{color:var(--danger);border-color:var(--danger)}

.bnk-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.bnk-empty .material-icons-round{font-size:48px;opacity:.3;display:block;margin-bottom:12px}
.bnk-readonly-note{font-size:12px;color:var(--text-muted);margin-bottom:14px;
  display:flex;align-items:center;gap:6px}
.bnk-readonly-note .material-icons-round{font-size:16px;opacity:.6}

.bnk-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.bnk-form-grid .bnk-field--full{grid-column:1 / -1}
.bnk-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);
  margin-bottom:5px}
.bnk-hint{font-size:11px;color:var(--text-light);margin-top:4px}
@media (max-width:640px){ .bnk-form-grid{grid-template-columns:minmax(0,1fr)} }

/* ═══════════════ Сайдбар адміністратора: підпис групи ═══════════════
   ⚠️ САМЕ ПІДПИС, а не згортна група: у адміна близько двадцяти
   призначень, і шість акордеонів означали б постійне відкривання-
   закривання. Підпис дає групам назву без жодного кліку.
   У згорнутому сайдбарі ховається — там роль розділювача бере на себе
   .nav-divider. */
.nav-section-label{padding:10px 20px 4px;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38);
  white-space:nowrap;user-select:none}
.sidebar.collapsed .nav-section-label{display:none}

/* ═══════════════ Головна адміністратора — черги роботи ═══════════════
   ⚠️ Картки черг переюзують клас-набір .ctrl-* зі сторінки «Контролі»
   (правило №25): візуальна мова та сама — велике число, нуль зелений.
   Власні класи — лише те, чого там немає: стан системи і підрядки. */
.adq-intro{font-size:13px;color:var(--text-muted);margin:-6px 0 22px;line-height:1.5}
.adq-sub{font-size:11px;color:var(--text-light);line-height:1.35;min-height:15px}
.adq-sub--warn{color:var(--danger);font-weight:600}

/* Число, яке НЕ вдалося порахувати: «нуль» і «збій» мусять виглядати
   по-різному (правило №46) */
.ctrl-count-num.adq-count-fail{color:var(--text-light);font-size:28px}

/* Смуга стану системи — не черга, а показник: копія, нічний прогін */
.adq-state-title{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-light);margin:6px 0 12px}
.adq-state-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.adq-state{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  text-decoration:none;color:inherit;transition:var(--transition)}
.adq-state:hover{border-color:var(--blue-light);box-shadow:var(--shadow)}
.adq-state-ico{width:44px;height:44px;flex-shrink:0;border-radius:50%;
  background:var(--bg);display:flex;align-items:center;justify-content:center}
.adq-state-ico .material-icons-round{font-size:22px;color:var(--blue)}
.adq-state--ok    .adq-state-ico{background:#e8f7ee}
.adq-state--ok    .adq-state-ico .material-icons-round{color:var(--success)}
.adq-state--warn  .adq-state-ico{background:#fef3e2}
.adq-state--warn  .adq-state-ico .material-icons-round{color:#b45309}
.adq-state--bad   .adq-state-ico{background:#fee2e2}
.adq-state--bad   .adq-state-ico .material-icons-round{color:var(--danger)}
.adq-state-body{min-width:0}
.adq-state-name{font-size:13px;font-weight:600;color:var(--text)}
.adq-state-val{font-size:12px;color:var(--text-muted);margin-top:2px}
.adq-state--bad .adq-state-val{color:var(--danger);font-weight:600}

.adq-error{background:#fef2f2;border:1.5px solid #fecaca;border-radius:var(--radius);
  padding:14px 16px;color:#b91c1c;font-size:13px;margin-bottom:20px}

@media (max-width:1100px){ .ctrl-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .ctrl-cards-grid{grid-template-columns:minmax(0,1fr)}
  .adq-state-row{grid-template-columns:minmax(0,1fr)}
}

/* Чіп стану ВП — ЛИШЕ в режимі «усі статуси» (адмін/модератор), де список змішаний.
   У звичайних режимах стан задано фільтром, і чіп був би шумом. */
.proc-status-chip{display:inline-flex;align-items:center;padding:1px 8px;border-radius:20px;
  font-size:10.5px;font-weight:600;white-space:nowrap;vertical-align:middle}
.proc-status-registered{background:#eef2ff;color:#4338ca}
.proc-status-open      {background:#e0f2fe;color:#0369a1}
.proc-status-enforced  {background:#e8f7ee;color:#15803d}
.proc-status-closed    {background:#f1f5f9;color:#475569}
.proc-status-returned  {background:#fef3e2;color:#b45309}
.proc-status-rejected  {background:#fee2e2;color:#b91c1c}

/* Рядок-посилання у переліках адмінки: клік по рядку відкриває картку.
   ⚠️ Кнопки всередині мусять робити event.stopPropagation(), інакше дія
   заразом відкриє картку — типова пастка клікабельних рядків. */
.row-clickable{cursor:pointer;transition:background .15s}
.row-clickable:hover td{background:#f5f7ff}
.row-open-hint{font-size:18px;color:var(--text-light);opacity:.5;transition:var(--transition)}
.row-clickable:hover .row-open-hint{opacity:1;color:var(--blue);transform:translateX(2px)}
@media (hover: none) { .row-clickable:hover .row-open-hint { transform: none; } }

/* ═══════════ Картка виконавця: журнал дій і помічники ═══════════ */
.enf-act-note{font-size:12px;color:var(--text-muted);line-height:1.45;margin:0 0 14px}
.enf-act-team{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.enf-act-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
  font-size:11.5px;background:var(--bg);border:1px solid var(--border);color:var(--text-muted)}
.enf-act-chip b{font-weight:600;color:var(--text)}
.enf-act-list{max-height:420px;overflow-y:auto;border:1px solid var(--border-light);
  border-radius:var(--radius);background:#fff}
.enf-act-row{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border-light);
  font-size:13px;align-items:flex-start}
.enf-act-row:last-child{border-bottom:none}
.enf-act-row:hover{background:#f8fafc}
.enf-act-row--critical{background:#fffbeb}
.enf-act-row--critical:hover{background:#fef3c7}
.enf-act-when{flex:0 0 116px;font-size:11.5px;color:var(--text-light);font-family:monospace;
  padding-top:2px;white-space:nowrap}
.enf-act-who{flex:0 0 160px;min-width:0;font-size:12px;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enf-act-who small{display:block;font-size:10.5px;color:var(--text-light);text-transform:uppercase;
  letter-spacing:.05em}
.enf-act-what{flex:1;min-width:0}
.enf-act-what a{color:var(--blue);text-decoration:none}
.enf-act-what a:hover{text-decoration:underline}
.enf-act-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis}
.enf-act-crit-mark{display:inline-block;font-size:10px;font-weight:700;color:#b45309;
  background:#fef3c7;border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.enf-act-empty{padding:26px;text-align:center;font-size:13px;color:var(--text-muted)}

/* Помічники в картці виконавця */
.enf-asst-row{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--border-light);border-radius:var(--radius);background:#fff;margin-bottom:8px}
.enf-asst-row--off{opacity:.5}
.enf-asst-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.enf-asst-main{flex:1;min-width:0}
.enf-asst-name{font-size:13px;font-weight:600;color:var(--text)}
.enf-asst-meta{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.enf-asst-acts{display:flex;gap:6px;flex-shrink:0}
.enf-asst-chip-off{font-size:10.5px;font-weight:600;color:#b91c1c;background:#fee2e2;
  border-radius:20px;padding:2px 8px}
.enf-creds{background:#e8f7ee;border:1px solid #a7f3d0;border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px;font-size:13px}
.enf-creds-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.enf-creds-row code{background:#fff;border:1px solid var(--border);border-radius:4px;
  padding:3px 8px;font-size:12px}
/* Підказка під полем у картці виконавця */
.enf-hint{font-size:11px;color:var(--text-light);margin-top:4px;line-height:1.35}
.enf-hint--error{color:var(--danger)}

/* ═══════════ Режим «кабінет виконавця» — плашка адміністратора ═══════════
   ⚠️ Плашку бачить ЛИШЕ адміністратор: це індикатор ЙОГО стану. Виконавець
   не дізнається, що його кабінет переглядали (рішення власника 2026-08-26).
   ⚠️ Саме СМУГА, а не тост: тост зникне за три секунди, а людина може
   відкрити не ту картку й не помітити цього годину. */
.vw-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:9px 20px;background:linear-gradient(90deg,#7c3aed,#5b21b6);color:#fff;
  font-size:13px;box-shadow:0 2px 10px rgba(91,33,182,.25)}
.vw-bar .material-icons-round{font-size:19px;opacity:.9;flex-shrink:0}
.vw-bar-text{flex:1;min-width:0;line-height:1.35}
.vw-bar-text b{font-weight:700}
.vw-bar-sub{display:block;font-size:11.5px;opacity:.78;margin-top:1px}
.vw-bar-exit{flex-shrink:0;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  color:#fff;font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 14px;
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:5px}
.vw-bar-exit:hover{background:rgba(255,255,255,.28)}
.vw-bar-exit .material-icons-round{font-size:16px}
.vw-bar--stale{background:linear-gradient(90deg,#b91c1c,#7f1d1d)}
@media (max-width:640px){ .vw-bar{padding:8px 12px;font-size:12px} }

/* Кнопка входу в режим — у картці виконавця */
.vw-open-btn{display:inline-flex;align-items:center;gap:6px;background:#f5f3ff;
  border:1.5px solid #ddd6fe;color:#5b21b6;font-family:inherit;font-size:12.5px;
  font-weight:600;padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;
  transition:var(--transition)}
.vw-open-btn:hover{background:#ede9fe;border-color:#c4b5fd}
.vw-open-btn .material-icons-round{font-size:16px}

/* ═══════════ Перемикач типу (2–3 взаємовиключні варіанти) ═══════════
   Загальний нейтральний сегмент-контрол: вибір ТИПУ, а не результату «так/ні»
   (для останнього є .ap-toggle-* з червоно-зеленими станами адмінпрактики). */
.type-toggle { display: flex; }
.type-toggle-btn {
    flex: 1; padding: 9px 14px; font-family: 'Geologica', sans-serif; font-size: 13px;
    cursor: pointer; border: 1.5px solid var(--border); background: #fff;
    color: var(--text-muted); transition: var(--transition); white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.type-toggle-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.type-toggle-btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.type-toggle-btn:hover:not(.active) { background: var(--bg); color: var(--text); }
.type-toggle-btn.active {
    background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600;
}
.type-toggle-btn .material-icons-round { font-size: 17px; }

/* ═══════════ Довідка ЄДР за кодом сторони (edr-lookup.js) ═══════════
   Рядок-підтвердження під полем коду + блок попередження про стан юрособи.
   ⚠️ Порожній результат, збіг і збій мусять виглядати ПО-РІЗНОМУ (правило №46),
   тому кольору тут три, а не один. */
.edr-line {
    font-size: 11.5px; line-height: 1.45; margin-top: 4px;
    color: var(--text-muted); word-break: break-word;
}
.edr-line--ok    { color: var(--text); }
.edr-line--none  { color: var(--text-muted); }
.edr-line--wait  { color: var(--text-light); font-style: italic; }
.edr-line--error { color: var(--danger); }
.edr-line-name   { font-weight: 600; }
.edr-line-meta   { color: var(--text-muted); font-weight: 400; }

/* Попередження про стан: помітне, але НЕ блокувальне — пред'явити виконавчий
   документ проти припиненої юрособи стягувач має право, це його рішення. */
.edr-warn {
    margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg); font-size: 12px;
}
.edr-warn--danger  { border-color: #fca5a5; background: #fef2f2; }
.edr-warn--caution { border-color: #fcd34d; background: #fffbeb; }
.edr-warn-title {
    display: flex; align-items: flex-start; gap: 6px;
    font-weight: 600; line-height: 1.4;
}
.edr-warn--danger  .edr-warn-title { color: #b91c1c; }
.edr-warn--caution .edr-warn-title { color: #92400e; }
.edr-warn-title .material-icons-round { font-size: 17px; flex-shrink: 0; }
.edr-warn-detail {
    margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}

/* ══ Блок «Санкції» на дашборді + екран виявлених ═══════════════════════════
   docs/design_sanctions_registry.md §7.1.
   ⚠️ Блок ПОСТІЙНИЙ: спокійний стан — теж результат, бо він і є доказом, що
   перевірку виконано. Кнопки «перевірити» немає — прогін автоматичний. */
.snc-box {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 16px;
    border: 1px solid var(--border); background: #fff;
    box-shadow: var(--shadow); transition: var(--transition);
}
.snc-box .material-icons-round { font-size: 26px; flex-shrink: 0; }
.snc-txt { flex: 1; min-width: 240px; }
.snc-title { font-family: "Unbounded", sans-serif; font-size: 14px; margin-bottom: 3px; }
.snc-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* спокійний стан — стримано, без «святкового» зеленого */
.snc-box--clean .material-icons-round { color: var(--success); }
.snc-box--clean .snc-title { color: var(--text); }

/* ⚠️ ВИЯВЛЕНО — блок яскраво світиться червоним і стає клікабельним */
.snc-box--found {
    background: linear-gradient(135deg, #b3261e, #d93025);
    border-color: #8c1d18; cursor: pointer;
    box-shadow: 0 6px 20px rgba(217, 48, 37, .35);
    animation: sncPulse 2.4s ease-in-out infinite;
}
.snc-box--found .material-icons-round { color: #fff; }
.snc-box--found .snc-title { color: #fff; font-size: 15px; }
.snc-box--found .snc-sub { color: rgba(255, 255, 255, .85); }
.snc-box--found:hover { filter: brightness(1.05); }
.snc-go { color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
@keyframes sncPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(217, 48, 37, .35); }
    50%      { box-shadow: 0 6px 26px rgba(217, 48, 37, .60); }
}
@media (prefers-reduced-motion: reduce) { .snc-box--found { animation: none; } }

/* ⚠️ Збій перевірки — окремий стан. Показати спокійне «не виявлено», коли
   перевірка не відбулася, було б гірше за відсутність блоку (правило №46). */
.snc-box--error { background: #fff8e1; border-color: #f0c36d; }
.snc-box--error .material-icons-round { color: #b8860b; }
.snc-box--never { background: var(--bg); }
.snc-box--never .material-icons-round { color: var(--text-light); }

/* ── Екран «Виявлені підсанкційні сторони» ── */
.snc-hit {
    border: 1px solid var(--border); border-left: 4px solid var(--danger);
    border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
    background: #fff; box-shadow: var(--shadow);
}
/* ⚠️ Санкційний СТЯГУВАЧ гостріший за боржника: виконавець зобов'язаний
   перерахувати йому кошти, а блокування активів це забороняє. */
.snc-hit--creditor { border-left-color: #b3261e; background: #fff5f5; }
.snc-hit-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.snc-side {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 999px; background: var(--danger); color: #fff;
}
.snc-side--creditor { background: #b3261e; }
.snc-hit-name { font-family: "Unbounded", sans-serif; font-size: 15px; flex: 1; min-width: 200px; }
.snc-hit-warn { font-size: 12px; color: #b3261e; font-weight: 600; margin-bottom: 10px; }
.snc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; margin-bottom: 10px; }
.snc-field-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.snc-field-val { font-size: 13px; }
.snc-mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.snc-points { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.snc-point {
    font-size: 11px; padding: 3px 9px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.snc-point--enf { background: #fdecea; border-color: #f5c2c0; color: #8c1d18; font-weight: 600; }
.snc-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.snc-nolink { font-size: 12px; color: var(--text-muted); font-style: italic; }
.snc-note { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
.snc-meta-bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 12px; color: var(--text-muted); margin-bottom: 18px;
}

/* ── Плашка в картці ліда (§7.2) ── */
.snc-lead-warn {
    background: #fdecea; border: 1px solid #f5c2c0; border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 14px;
}
.snc-lead-title {
    display: flex; gap: 8px; align-items: center;
    font-size: 13px; font-weight: 700; color: #8c1d18; margin-bottom: 6px;
}
.snc-lead-title .material-icons-round { font-size: 19px; }
.snc-lead-row { font-size: 12px; color: var(--text); line-height: 1.6; }
.snc-lead-sub { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* ── Адмінка: довідник реєстру ── */
.snc-adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.snc-adm-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.snc-adm-val { font-family: "Unbounded", sans-serif; font-size: 22px; }
.snc-adm-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.snc-adm-table th { background: transparent; color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.snc-adm-hint { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 10px 0 16px; }
.snc-run-ok { color: var(--success); font-weight: 600; }
.snc-run-fail { color: var(--danger); font-weight: 600; }

/* Стан банку за ЄДР (довідник банків). ⚠️ Не плутати з .bnk-chip-off — той про
   НАШЕ вимкнення запису, а цей про фактичний стан установи в реєстрі. */
.bnk-chip-state{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:10px;
    font-size:11px;font-weight:600;vertical-align:middle;white-space:nowrap}
.bnk-chip-state--in_termination{background:#fff4e5;color:#8a4b00;border:1px solid #f0c48a}
.bnk-chip-state--terminated{background:#fdecec;color:#8a1c1c;border:1px solid #f0a0a0}

/* Результат звірки з відкритими реєстрами активів у вкладці «Перевірки».
   ⚠️ Це відповідь РЕЄСТРУ, а не позначка виконавця: крапка статусу лишається
   його інструментом, і система її не чіпає (docs/design_asset_registries.md). */
.ck-reg{margin:8px 0 4px;padding:10px 12px;border:1px solid var(--border-light);
    border-left:3px solid var(--blue);border-radius:var(--radius-sm);background:var(--bg)}
.ck-reg-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.ck-reg-chip{padding:2px 9px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.ck-reg-chip--found{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7}
.ck-reg-chip--absent{background:#eef2f7;color:#3d4a5c;border:1px solid #c9d4e2}
.ck-reg-chip--namesakes{background:#fff4e5;color:#8a4b00;border:1px solid #f0c48a}
/* ⚠️ «Не завантажено» ВІЗУАЛЬНО не схоже на «не виявлено»: сірий чіп «немає»
   читався б як результат перевірки, якої не було (правило №46). */
.ck-reg-chip--nodata{background:#fdf6e3;color:#7a5c00;border:1px dashed #e0c56b}
/* Стосується ІНШОЇ сторони (санкційний стягувач) — не зливається з рядком про боржника */
.ck-reg-warn{margin-top:8px;padding:8px 10px;border-radius:var(--radius-sm);
  background:#fdecea;border:1px solid #f5c2bd;color:#8a1c12;font-size:12px;line-height:1.45}
/* Крапку намалювала СИСТЕМА, а не людина: пунктирне кільце — єдина ознака,
   що перевірку ще не підтверджено виконавцем */
.ck-dot--auto{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--border);opacity:.75}
/* «Інші провадження» — це не перевірка майна, тож без крапки статусу */
.ck-other{border-left:3px solid var(--blue)}
.ck-other-note{margin-top:8px;font-size:11px;color:var(--text-light);line-height:1.45}
/* Декларації НАЗК — єдина перевірка, що ходить до чужого сервісу за кнопкою */
.ck-nazk{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-light)}
.ck-nazk-btn{padding:6px 12px;border:1px solid var(--blue);background:transparent;
  color:var(--blue);border-radius:var(--radius-sm);font-size:12px;cursor:pointer;
  transition:var(--transition)}
.ck-nazk-btn:hover:not(:disabled){background:var(--blue);color:#fff}
.ck-nazk-btn:disabled{opacity:.6;cursor:default}
.ck-nazk-out{margin-top:8px}
.ck-nazk-note{font-size:11px;color:var(--text-muted);line-height:1.45;margin-bottom:6px}
.ck-nazk-err{font-size:11px;color:var(--danger);line-height:1.45}
.ck-nazk-person{padding:8px 10px;margin-top:6px;background:var(--bg);border-radius:var(--radius-sm)}
.ck-nazk-person-name{font-size:12px;font-weight:600}
.ck-nazk-person-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.ck-nazk-open{margin-top:6px;padding:4px 10px;border:1px solid var(--border);
  background:#fff;border-radius:var(--radius-sm);font-size:11px;cursor:pointer}
.ck-nazk-decl{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.ck-nazk-sec{font-size:11px;font-weight:600;margin-top:8px;color:var(--navy)}
.ck-nazk-item{font-size:11px;color:var(--text-muted);line-height:1.5;padding-left:8px}
.ck-reg-date{font-size:11px;color:var(--text-light)}
.ck-reg-phrase{font-size:12px;color:var(--text-muted);line-height:1.45}
.ck-reg-item{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-light)}
.ck-reg-ref{font-weight:600;font-size:12px;margin-right:8px}
.ck-reg-sub{font-size:11px;color:var(--text-muted)}
.ck-reg-owner{font-size:11px;color:var(--text-light);margin-top:2px}

/* ─── Карта ринку (docs/design_debtor_registry_and_market.md §6) ─────────── */
.mk-intro{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:20px}
.mk-snapshot{font-size:12px;color:var(--text-light)}
.mk-count{font-size:12px;color:var(--text-muted)}
.mk-error{padding:16px;border-radius:var(--radius-sm);background:#fdecea;border:1px solid #f5c2bd;color:#8a1c12;font-size:13px}
.mk-empty{padding:28px;text-align:center}
.mk-empty-title{font-family:Unbounded,sans-serif;font-size:16px;margin-bottom:6px}
.mk-empty-sub{font-size:12px;color:var(--text-muted);line-height:1.5}
.mk-note{margin-top:14px;font-size:12px;color:var(--text-muted);line-height:1.5;padding:10px 12px;background:var(--bg);border-radius:var(--radius-sm)}
.mk-note--warn{background:#fdf6e3;color:#7a5c00}
.mk-share{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-top:18px;background:var(--border-light)}
.mk-share-seg{height:100%}
.mk-share-private{background:var(--blue)}
.mk-share-dvs{background:var(--accent)}
.mk-share-legend{font-size:12px;color:var(--text-muted);margin-top:6px}
.mk-section{margin-top:24px}
.mk-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px}
.mk-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.mk-bar-label{width:230px;flex-shrink:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-bar-wrap{flex:1;background:var(--border-light);height:8px;border-radius:4px;overflow:hidden}
.mk-bar{height:100%;background:var(--blue);border-radius:4px}
.mk-bar-val{width:90px;text-align:right;font-size:12px;font-weight:600}
.mk-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.mk-filters .input-group{flex:1;min-width:220px}
.mk-filters select{max-width:220px}
.mk-org{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:var(--transition)}
.mk-org:hover{background:var(--bg)}
.mk-org-main{flex:1;min-width:0}
.mk-org-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-org-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.mk-org-num{font-family:Unbounded,sans-serif;font-size:15px;min-width:90px;text-align:right}
.mk-chip{font-size:10px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.mk-chip--target{background:#fff4e5;color:#8a4b00;border:1px solid #f0c48a}
.mk-chip--client{background:#e8f5e9;color:#1b5e20;border:1px solid #a5d6a7}
.mk-more-row{text-align:center;padding-top:14px}
.mk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.mk-overlay.open{display:flex}
.mk-detail{width:100%;max-width:720px;max-height:88vh;overflow-y:auto;padding:24px}
.mk-profile{margin-top:16px;padding:12px 14px;background:var(--bg);border-radius:var(--radius-sm)}
.mk-profile-title{font-size:13px;font-weight:500}
.mk-profile-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.mk-profile-link{display:inline-block;margin-top:8px;font-size:12px;color:var(--blue);text-decoration:none}
.mk-profile-link:hover{text-decoration:underline}

/* ── Редактор підказок «?» (docs/design_hints.md) ─────────────────────────
   ⚠️ Переюзує набір .wk-* сусідньої вкладки Wiki (badge, note, bar, list,
      empty): це та сама візуальна мова «фабричне + перекриття», і другий
      набір класів на неї розійшовся б із першим (правило №25). Власні класи
      — лише там, де потрібен номер і акордеон. */
.hnt-group{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text-muted);margin:16px 0 2px;padding-left:2px}
.hnt-group:first-child{margin-top:0}
.hnt-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.hnt-item:hover{border-color:var(--blue)}
.hnt-head{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
/* Номер — головний орієнтир рядка: саме за ним підказку шукають після дзвінка. */
.hnt-num{flex-shrink:0;min-width:52px;font-family:'Unbounded',sans-serif;font-size:13px;
  color:var(--navy);background:var(--bg);border-radius:20px;padding:4px 10px;text-align:center}
.hnt-info{flex:1;min-width:0}
.hnt-title{font-size:14px;font-weight:600;color:var(--navy);line-height:1.35}
.hnt-sub{font-size:12px;color:var(--text-muted);margin-top:2px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hnt-arrow{color:var(--text-light);transition:transform .18s ease;flex-shrink:0}
@media (prefers-reduced-motion: reduce){.hnt-arrow{transition:none}}
.hnt-item.open .hnt-arrow{transform:rotate(180deg)}
.hnt-body{display:none;padding:0 14px 14px;border-top:1px solid var(--border-light)}
.hnt-item.open .hnt-body{display:block}
.hnt-lbl{font-size:12px;font-weight:600;color:var(--text-muted);margin:14px 0 6px}
.hnt-factory{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-sm);
  padding:10px 12px;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap}
.hnt-ta{width:100%;min-height:110px;font-size:13px;line-height:1.6;resize:vertical}
.hnt-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.hnt-code{font-size:11px;color:var(--text-light);font-family:ui-monospace,Consolas,monospace;
  margin-left:auto}
.hnt-warn{background:#fff7ea;border:1px solid #f0c98a;border-radius:var(--radius-sm);
  padding:10px 12px;font-size:12.5px;line-height:1.55;color:#8a5a08;margin-top:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   ВІДГУК НА НАТИСК, ЗМЕНШЕНИЙ РУХ І ПОВЕДІНКА НА ДОТИК
   Спільні правила для всіх 60 екранів. Додано за ревʼю apple-design 2026-08-30.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ ГОЛОВНЕ: до цього в системі було 310 станів наведення і ДВА реальні стани
   натиску (ще два з чотирьох лише міняли курсор при перетягуванні). Наведення на
   сенсорному екрані НЕ ІСНУЄ — пальця не можна піднести й потримати. Тож на телефоні
   й планшеті кнопка не відповідала на натиск НІЧИМ до появи наступного екрана, і при
   повільній відповіді сервера людина тиснула вдруге. У системі є дії, що створюють
   записи (подання документа, відкриття провадження, нарахування), тож подвійний
   натиск — не косметика.
   Масштаб 0.97 обрано не випадково: зміна кольору читається як «кнопка стала іншою»,
   а зменшення — як «кнопка піддалася під пальцем». Це фізична метафора, яку мозок
   розпізнає без навчання.
   У системі 390 елементів <button> проти 14 саморобних, тож селектор за тегом
   покриває майже все; :disabled виключено — вимкнена кнопка не має «піддаватися». */
button:not(:disabled):active,
[role="button"]:active,
.btn:active,
a.btn-primary:active {
    transform: scale(0.97);
}
button, [role="button"], .btn, a.btn-primary {
    /* Короткий перехід саме на трансформацію: 120 мс — межа, за якою натиск
       перестає відчуватись миттєвим (§1). Решту властивостей не чіпаємо, щоб не
       перебити наявні переходи кольору. */
    transition-property: transform;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
    /* Прибирає ~300 мс затримки тапу на мобільних браузерах. */
    touch-action: manipulation;
    /* Сірий блимкіт Android більше не потрібен — його замінив масштаб.
       ⚠️ Прибирати підсвітку можна ЛИШЕ там, де є власний відгук; саме тому
       правило стоїть у тому самому селекторі, а не глобально на body. */
    -webkit-tap-highlight-color: transparent;
}

/* Великі клікабельні картки тиснемо делікатніше: 0.97 на картці завширшки з екран
   виглядає як провал, а не як натиск. */
.control-card:active,
.dash-card-link:active,
.reg-tile:active,
.cl-dropdown-item:active {
    transform: scale(0.99);
}

/* Прокрутка всередині панелі не має «протягувати» сторінку під нею. */
.content-area,
.modal-body,
.lp-step,
.ctrl-table-scroller,
.cons-table-scroller,
.funds-collections-scroller {
    overscroll-behavior: contain;
}

/* ⚠️ ЗМЕНШЕНИЙ РУХ — на весь продукт, а не на дві декорації.
   Системний перемикач «зменшити рух» вмикають люди з вестибулярними розладами,
   мігренями, після струсу мозку: рух на екрані викликає в них справжню фізичну
   нудоту. Аудиторія системи — переважно люди середнього й старшого віку, і сидять
   вони в ній зміну, а не дві хвилини.
   ⚠️ «Зменшити» НЕ означає «вимкнути»: рух прибираємо, згасання лишаємо.
   Тому `transition-property` звужено до кольору й прозорості — переходи кольору
   далі працюють, а зсуви й масштабування стають миттєвими. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-property: opacity, background, background-color, color,
                             border-color, box-shadow, fill, stroke !important;
        transition-duration: 120ms !important;
        scroll-behavior: auto !important;
    }
    /* ⚠️ Спінери — виняток: вони повідомляють СТАН («іде робота»), а не
       прикрашають. Зупинений спінер читається як «застрягло». */
    [class*="spin"] {
        animation-duration: 0.7s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   КІЛЬЦЕ ФОКУСА — ОДНЕ НА ВСЮ СИСТЕМУ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ ПРИЧИНА: у продукті 40 разів стояло `outline: none` (і ще 25 по файлах), а
   видима заміна була приблизно в третині випадків. `:focus-visible` не було ЖОДНОГО
   на 11 тисяч рядків. Наслідок: людина, яка йде інтерфейсом клавішею Tab, не бачить,
   де вона зараз. Довгу форму так не заповнити наосліп — а саме з клавіатури працюють
   ті, кому важко з мишею, і ті, хто цілий день вводить дані.

   ⚠️ `!important` тут ДОРЕЧНИЙ і потрібен: 8 із цих правил стоять саме на `:focus`
   з класом, тобто мають вищу вагу за будь-який розумний селектор. Видимий фокус —
   вимога доступності, і окреме правило не повинно мати змоги її скасувати.

   ⚠️ Саме `:focus-visible`, а не `:focus`: браузер сам вирішує, чи показувати
   кільце. При кліку мишею воно не зʼявляється — тобто зникає та причина, через яку
   `outline: none` колись і написали. */
:focus-visible {
    outline: 2px solid var(--focus-ring, var(--blue)) !important;
    outline-offset: var(--focus-ring-offset, 2px) !important;
}

/* Поля вводу вже мають власний виразний фокус (фон + межа + тінь), тож кільце тут —
   третій сигнал поспіль. Кладемо його ВПРИТУЛ до межі: читається як потовщення
   рамки, а не як ореол навколо поля. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.panel-input:focus-visible {
    --focus-ring-offset: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ТИПОГРАФІКА ЧИСЕЛ І ВЕЛИКОГО ТЕКСТУ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ ЦИФРИ ОДНАКОВОЇ ШИРИНИ. У пропорційному наборі «1» вужча за «8», тож у
   стовпці сум розряди не стають один під одним і колонку неможливо читати згори
   вниз — око не бачить, де тисячі, а де сотні. Для грошей і лічильників це не
   естетика, а читабельність. До цієї правки `tabular-nums` вживалося в системі
   РІВНО ОДИН раз, хоча грошових колонок десятки.
   ⚠️ Застосовуємо і до `td`: у таблицях провадження, документи й суми стоять
   поруч, і вирівняти треба саме колонку, а не окремий клас. На текст у клітинці це
   не впливає — змінюється лише ширина цифр. */
td,
.ctrl-count-num, .adq-count,
.dash-kpi-val, .dash-fin-val,
.bill-balance-val, .bill-plan-amount,
.dcf-sum-num, .asvp-amount,
.funds-bal-val, .cons-rem-val, .cons-coll-sum,
.proc-hero-amount {
    font-variant-numeric: tabular-nums;
}

/* ⚠️ Великий текст просить ВІДʼЄМНОГО трекінгу: чим більший кегль, тим далі одна
   від одної здаються літери. Стосується лише справді великого тексту — заголовки
   екранів у застосунку 18px і його не потребують. */
.pub-hero-title,
.hero h1 {
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ДОСТУПНІСТЬ: ЗАГОЛОВОК СТОРІНКИ Й ПРОПУСК НАВІГАЦІЇ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ Видимий лише для скрінрідера. НЕ `display: none` і НЕ `visibility: hidden` —
   обидва прибрали б елемент і з озвучення теж. Класичний прийом: елемент розміром
   1px, обрізаний повністю, але присутній у дереві доступності. */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ⚠️ Пропуск навігації. Без нього людина зі скрінрідером або з клавіатурою мусить
   щоразу проходити ~27 пунктів сайдбару, щоб дістатись вмісту — на кожному екрані
   заново. Посилання невидиме, доки не отримає фокус: перший Tab на сторінці показує
   його, Enter переносить одразу до вмісту. */
.skip-link {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    font-family: 'Geologica', sans-serif;
    font-size: 13px;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transform: translateY(-200%);
    transition: transform 150ms ease-out;
}
.skip-link:focus { transform: translateY(0); }
/* Ціль пропуску не має малювати кільце: фокус на ній службовий, не для ока. */
/* ⚠️ САМЕ `:focus-visible` І `!important` — інакше правило не діє.
   Перевірено справжнім натисканням клавіші: посилання «Перейти до вмісту»
   переводить фокус сюди програмно, і Chrome вважає такий фокус
   КЛАВІАТУРНИМ — `:focus-visible` збігається, а глобальне кільце має
   `!important` і перебиває звичайний `outline: none`. Результат був:
   рамка 2px навколо УСІЄЇ робочої області після кожного пропуску навігації.
   ⚠️ Кільця тут не має бути: область вмісту — це контейнер прокрутки, а не
   елемент керування; рамка на весь екран читається як стан помилки.
   Підтвердження, що пропуск спрацював, дає наступний Tab — він потрапляє
   всередину вмісту, а не назад у сайдбар. */
.content-area:focus,
.content-area:focus-visible { outline: none !important; }

/* ── Динаміка ринку за витягами з АСВП (docs/design_debtor_registry_and_market.md §13) ── */
/* ⚠️ Локальний токен, а не правка глобального --text-muted (#6b7a99, контраст 4.31 при
   нормі 4.5 і 492 вживання по продукту): міняти його — це редизайн усього застосунку,
   а не правка одного екрана. Тут 5.18 на білому. Прецедент — --lp-muted лендінгу. */
.mkd-table-wrap,.mkd-legend,.mkd-scope,.mkd-modal{--mkd-note:#5f6d8c}
.mkd-head-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mkd-head-row h1{flex:1;min-width:200px}
.mkd-upload-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);
  background:#fff;border-radius:var(--radius-sm);font-size:12px;font-family:Geologica,sans-serif;
  color:var(--text);cursor:pointer;transition:var(--transition)}
.mkd-upload-btn:hover{background:var(--bg);border-color:var(--blue);color:var(--blue)}
.mkd-upload-btn .material-icons-round{font-size:16px}
/* ⚠️ Таблиця широка (8 колонок) — прокручується ВСЕРЕДИНІ себе. Без цього сторінка
   виїжджала б за край на вузькому екрані (правило: тіло сторінки не скролиться вбік). */
.mkd-table-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
.mkd-table{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}
/* ⚠️ Заголовок ПЕРЕНОСИТЬСЯ, а не тримається в один рядок: із nowrap найдовші
   підписи («Винагорода в серед. на 1 ПВ» — 222px) роздували таблицю понад ширину
   картки, і на ноутбуці доводилось прокручувати вбік заради головної таблиці екрана. */
.mkd-table th{padding:9px 10px;text-align:right;font-size:11px;font-weight:500;
  white-space:normal;vertical-align:bottom;line-height:1.3}
.mkd-table th:first-child{text-align:left}
.mkd-table td{padding:10px;border-bottom:1px solid var(--border-light);text-align:right;white-space:nowrap}
.mkd-table td:first-child{text-align:left}
.mkd-table tbody tr:hover{background:var(--bg)}
.mkd-period{font-weight:600;font-size:13px}
.mkd-period-sub{font-size:11px;color:var(--mkd-note);font-weight:400;margin-top:2px}
.mkd-num{font-family:Unbounded,sans-serif;font-size:13px}
.mkd-num--muted{color:var(--text-muted);font-family:Geologica,sans-serif;font-size:12px}
/* ⚠️ «—» означає «витягу ще немає», а не нуль. Порожнеча і нуль — різні новини,
   і плутати їх у таблиці про гроші не можна (правило №46). */
.mkd-none{color:var(--text-muted);font-size:13px}
/* ⚠️ Ці підписи несуть саме те, без чого числа вводили б в оману: скільки ВД у
   валюті, скільки завершених БЕЗ винагороди. Тому вони темніші за звичайний
   --text-muted (виміряно 4.31 — нижче норми 4.5) і на пункт більші: локальний
   токен заведено за прецедентом --lp-muted лендінгу, глобальний не чіпаємо. */
.mkd-cell-note{font-size:11px;color:var(--mkd-note);margin-top:2px;font-weight:400}
.mkd-cell-note--warn{color:#8a5b00}
.mkd-share{display:inline-block;padding:2px 8px;border-radius:10px;background:#eaf1ff;color:#1a3f8f;
  font-size:11px;font-weight:600}
.mkd-row-actions{width:34px}
.mkd-del{background:none;border:none;cursor:pointer;color:var(--mkd-note);padding:4px;
  border-radius:4px;display:inline-flex;transition:var(--transition)}
.mkd-del:hover{background:#fdecea;color:var(--danger)}
.mkd-del .material-icons-round{font-size:16px}
.mkd-filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.mkd-filter-row .input-group{flex:1;min-width:240px;max-width:420px}
.mkd-clear{background:none;border:none;color:var(--blue);cursor:pointer;font-size:12px;
  font-family:Geologica,sans-serif;text-decoration:underline}
.mkd-scope{font-size:12px;color:var(--mkd-note)}
.mkd-legend{margin-top:14px;font-size:11px;color:var(--mkd-note);line-height:1.6}
.mkd-origin{display:inline-block;padding:1px 6px;border-radius:8px;background:#fdf6e3;color:#7a5c00;
  font-size:10px;margin-left:6px}

/* ── Вікно завантаження витягу ── */
.mkd-modal{width:100%;max-width:640px;max-height:88vh;overflow-y:auto;padding:24px}
.mkd-drop{border:2px dashed var(--border);border-radius:var(--radius);padding:26px;text-align:center;
  cursor:pointer;transition:var(--transition);background:var(--bg)}
.mkd-drop:hover{border-color:var(--blue);background:#f5f9ff}
.mkd-drop-ico{font-size:34px;color:var(--blue)}
.mkd-drop-label{font-size:13px;font-weight:500;margin-top:6px}
.mkd-drop-hint{font-size:11px;color:var(--text-muted);margin-top:4px}
.mkd-file{font-size:12px;margin-top:12px;padding:8px 10px;background:var(--bg);border-radius:var(--radius-sm)}
.mkd-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:16px}
.mkd-sum-cell{padding:10px 12px;background:var(--bg);border-radius:var(--radius-sm)}
.mkd-sum-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.mkd-sum-val{font-family:Unbounded,sans-serif;font-size:14px;margin-top:3px}
.mkd-field{margin-top:14px}
.mkd-field-lbl{font-size:11px;color:var(--text-muted);margin-bottom:5px;display:block}
.mkd-rates{display:flex;gap:10px;flex-wrap:wrap}
.mkd-rate{display:flex;align-items:center;gap:6px}
.mkd-rate span{font-size:12px;font-weight:500;min-width:34px}
.mkd-rate input{width:110px}
.mkd-dates{display:flex;gap:10px;flex-wrap:wrap}
.mkd-dates input{flex:1;min-width:130px}
.mkd-warn{margin-top:14px;padding:10px 12px;border-radius:var(--radius-sm);background:#fdf6e3;
  color:#7a5c00;font-size:12px;line-height:1.5}
.mkd-err{margin-top:14px;padding:10px 12px;border-radius:var(--radius-sm);background:#fdecea;
  border:1px solid #f5c2bd;color:#8a1c12;font-size:12px;line-height:1.5}
.mkd-ok{margin-top:14px;padding:10px 12px;border-radius:var(--radius-sm);background:#e8f5e9;
  color:#1b5e20;font-size:12px;line-height:1.5}
.mkd-modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media (max-width:768px){
  .mkd-table-wrap{margin:0 -16px;padding:0 16px}
  .mkd-sum{grid-template-columns:minmax(0,1fr)}
}
/* ⚠️ Площа дотику — за ТИПОМ ВВОДУ, а не за шириною екрана: планшет має 834px і
   сенсор, тож правило на max-width його б не покрило. .panel-input у продукті 24px
   заввишки — для миші це свідома щільність, для пальця замало. */
@media (pointer: coarse){
  .mkd-upload-btn{min-height:44px}
  .mkd-del{min-height:44px;min-width:44px;align-items:center;justify-content:center}
  .mkd-clear{min-height:44px}
  .mkd-filter-row .panel-input,.mkd-modal .panel-input,.mkd-rate input{min-height:44px}
  .mkd-drop{padding:32px 26px}
}