/**
 * LandDeal CRM — Premium Theme (глобально, усі модулі)
 * Мета: єдиний преміальний Light-Mode-вигляд на всю програму,
 * але БЕЗ шкоди функціональності — це система обліку, а не промо-сайт.
 *
 * Файл чіпає лише спільну «оболонку» й безпечні патерни (сайдбар, полотно,
 * типографіка, тіні, картки-контейнери, кнопки-тулбару, форм-контроли,
 * скролбари). Бізнес-розмітку модулів не переписуємо.
 *
 * Специфіка модуля «Земельні ділянки» — у lands-premium.css.
 */

/* ============================================================
   ТОКЕНИ (спільні; дублюють значення lands-premium — навмисно,
   щоб кожен файл був самодостатнім)
   ============================================================ */
:root {
    --pt-canvas: #F1F1EE;
    --pt-surface: #FFFFFF;
    --pt-sunken: #FAFAF7;

    --pt-ink: #1A1C18;
    --pt-ink-2: #5B6058;
    --pt-ink-3: #8C918A;

    --pt-line: rgba(26, 28, 24, 0.08);
    --pt-line-2: rgba(26, 28, 24, 0.13);

    --pt-accent: #2F6B4F;
    --pt-accent-deep: #22503B;
    --pt-accent-soft: rgba(47, 107, 79, 0.08);
    --pt-accent-line: rgba(47, 107, 79, 0.22);

    --pt-nav: #1B1E1A;

    --pt-shadow-sm: 0 1px 2px rgba(28, 34, 26, 0.05);
    --pt-shadow: 0 1px 2px rgba(28, 34, 26, 0.05), 0 4px 12px -6px rgba(28, 34, 26, 0.1);
    --pt-shadow-md: 0 1px 2px rgba(28, 34, 26, 0.05), 0 10px 24px -10px rgba(28, 34, 26, 0.14);
    --pt-shadow-lg: 0 2px 6px rgba(28, 34, 26, 0.06), 0 18px 40px -14px rgba(28, 34, 26, 0.18);

    --pt-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Тема-аваре: у темному режимі токени перемикаються, тож преміум-шар
   не «засвічує» dark mode білими поверхнями. Графітовий сайдбар — у обох. */
html.dark {
    --pt-canvas: #0F120E;
    --pt-surface: #171A15;
    --pt-sunken: #1C201A;
    --pt-ink: #F1F3EE;
    --pt-ink-2: #B7BCB2;
    --pt-ink-3: #7E837A;
    --pt-line: rgba(255, 255, 255, 0.09);
    --pt-line-2: rgba(255, 255, 255, 0.14);
    --pt-accent: #79C89E;
    --pt-accent-deep: #93D6AE;
    --pt-accent-soft: rgba(121, 200, 158, 0.13);
    --pt-accent-line: rgba(121, 200, 158, 0.3);
    --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pt-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -6px rgba(0, 0, 0, 0.6);
    --pt-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -10px rgba(0, 0, 0, 0.7);
    --pt-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -14px rgba(0, 0, 0, 0.8);
}
/* У темному режимі зелена кнопка має темний текст для контрасту */
html.dark .module button[class*="bg-blue-6"],
html.dark .module button[class*="bg-green-6"],
html.dark .module button[class*="bg-purple-6"],
html.dark .module a[class*="bg-green-6"] { color: #0d1410 !important; }

/* ============================================================
   ПОЛОТНО + ТИПОГРАФІКА
   ============================================================ */
body {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'ss01' 1, 'cv11' 1;
}
body.bg-gray-50 { background-color: var(--pt-canvas); }

/* Заголовки модулів (топбар) — Outfit */
.landdeal-topbar-breadcrumb .bc-label { font-family: 'Outfit', 'Manrope', sans-serif; letter-spacing: -0.01em; }

/* Sticky у топбара/панелях працює лише коли предки не є scroll-контейнерами.
   overflow-x:hidden приховано вмикає overflow-y:auto і ламає sticky — clip ні. */
body, .main-content { overflow-x: clip; overflow-y: visible; }
html { scroll-behavior: smooth; }

/* ============================================================
   ЩІЛЬНІСТЬ КОНТРОЛІВ — усі модулі
   Кнопки й поля в модулях зібрані з Tailwind-утиліт: py-2, py-2.5, py-3,
   подекуди py-4 — через це однакові за роллю елементи мали від 32 до 48px.
   Зводимо вертикальні відступи до однієї компактної величини. Горизонтальні
   (px-*) не чіпаємо: від них залежать ширини й вирівнювання колонок.
   Цілимось лише в елементи з py-*, тому власні компоненти .ld-* / .pt-*
   (у них фіксована height) сюди не потрапляють.
   ============================================================ */
.module button[class*="py-"],
.module a[class*="py-"],
.module input[class*="py-"],
.module select[class*="py-"],
.module textarea[class*="py-"],
.fixed.inset-0[class*="bg-black"] button[class*="py-"],
.fixed.inset-0[class*="bg-black"] input[class*="py-"],
.fixed.inset-0[class*="bg-black"] select[class*="py-"],
.fixed.inset-0[class*="bg-black"] textarea[class*="py-"] {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

/* Багаторядкове поле від такого падінгу стає надто вузьким */
.module textarea[class*="py-"],
.fixed.inset-0[class*="bg-black"] textarea[class*="py-"] {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Квадратні іконкові кнопки (p-2 / p-3 без py-*) */
.module button.p-3, .fixed.inset-0[class*="bg-black"] button.p-3 { padding: 0.5rem !important; }
.module button.p-2, .fixed.inset-0[class*="bg-black"] button.p-2 { padding: 0.375rem !important; }

/* Кнопка без явного text-* успадковує 16px/24px — це головна причина «високих»
   кнопок у модулях. Даємо їм ту саму типографіку, що й у власних .ld-btn.
   Тільки для кнопок із падінгами: у «голих» іконкових кнопок (padding: 0)
   розмір шрифту — це розмір самої іконки, і зменшувати його не можна.
   Виняток також — кнопки, де розмір заданий свідомо (text-xs, text-sm, …). */
.module button[class*="px-"]:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]),
.module a[class*="px-"][class*="py-"]:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]),
.fixed.inset-0[class*="bg-black"] button[class*="px-"]:not([class*="text-xs"]):not([class*="text-sm"]):not([class*="text-base"]):not([class*="text-lg"]):not([class*="text-xl"]) {
    font-size: 13.5px;
    line-height: 1.35;
}

/* ============================================================
   САЙДБАР — графіт замість синього градієнта (усі модулі)
   ============================================================ */
#sidebar.sidebar {
    background-color: var(--pt-nav);
    z-index: 40; /* тримаємо сайдбар (і кнопку згортання) над контентом модулів */
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 14px 0 40px -24px rgba(20, 24, 18, 0.5);
}
#sidebar .sidebar-logo-icon { color: #8FB79E; }

#sidebar .nav-link {
    color: rgba(238, 240, 236, 0.72);
    border-radius: 10px;
    transition: background-color 0.18s var(--pt-ease-soft), color 0.18s var(--pt-ease-soft);
}
#sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.06); color: #F4F6F2; }
#sidebar .nav-link.active,
#sidebar .nav-link.active:hover {
    background-color: var(--pt-accent);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
#sidebar .sidebar-divider,
#sidebar .sidebar-top-divider,
#sidebar .db-target-segmented button + button,
#sidebar #sidebar-db-target-wrap { border-color: rgba(255, 255, 255, 0.08); }
#sidebar .sidebar-db-label,
#sidebar .sidebar-db-hint,
#sidebar #sidebar-admin-label,
#sidebar .sidebar-user-name,
#sidebar .sidebar-version { color: rgba(226, 230, 222, 0.55); }
#sidebar .db-target-segmented {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
#sidebar .db-target-segmented button { color: rgba(238, 240, 236, 0.72); }
#sidebar .db-target-segmented button:hover { background-color: rgba(255, 255, 255, 0.07); }

/* Підказка згорнутої панелі. Живе в <body>, а не всередині nav: там
   overflow-y:auto обрізав би її по правому краю рейки. */
.rail-tip {
    position: fixed;
    z-index: 45;
    padding: 7px 11px;
    border-radius: 9px;
    background-color: var(--pt-accent);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    /* top у JS — це центр іконки, тож підказку зсуваємо на пів висоти вгору */
    transform: translate(-5px, -50%);
    transition: opacity 0.14s var(--pt-ease-soft), transform 0.14s var(--pt-ease-soft);
    box-shadow: 0 12px 26px -16px rgba(12, 18, 14, 0.85);
}
.rail-tip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: inherit;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 2px;
}
.rail-tip.is-on { opacity: 1; transform: translateY(-50%); }
html.dark .rail-tip { color: #0d1410; }

@media (prefers-reduced-motion: reduce) {
    .rail-tip { transition: none; }
}

/* Сайдбар і контент (Tailwind ml-64 = 16rem) мають сходитись впритул. Якщо в
   браузері збільшений базовий шрифт, 16rem > ширини панелі — і між панеллю та
   банером зʼявляється випадкова смуга. Фіксуємо відступ у px; числа мають
   збігатися з .sidebar / .sidebar.collapsed в index.html. */
@media (min-width: 768px) {
    .main-content { margin-left: 240px !important; }
    .main-content.sidebar-collapsed { margin-left: 64px !important; }
}

/* Єдине джерело правди для внутрішніх відступів контент-зони:
   банери рахують свої відступи від цієї ж змінної, тому гутер
   навколо них однаковий у всіх модулях і за будь-якого зума. */
:root { --pt-content-pad: 16px; }
@media (min-width: 768px) { :root { --pt-content-pad: 28px; } }
.landdeal-content { padding: var(--pt-content-pad) !important; }

/* Кнопка згортання панелі */
.collapse-btn {
    background: linear-gradient(140deg, #3d8862, #2f6b4f);
    border-color: #F1F1EE;
    box-shadow: 0 4px 14px rgba(34, 80, 59, 0.45);
}
.collapse-btn:hover { background: linear-gradient(140deg, #327256, #22503b); }
html.dark .collapse-btn { border-color: #171A15; }

/* Активний пункт «Локальна/Хмарна» — стан несе лише aria-pressed */
#sidebar .db-target-segmented button[aria-pressed="true"],
#sidebar .db-target-segmented button[aria-pressed="true"]:hover {
    background-color: var(--pt-accent);
    color: #FFFFFF;
}
html.dark #sidebar .db-target-segmented button[aria-pressed="true"] { color: #0d1410; }

/* Активний пункт меню в темній темі: акцент світлий → текст темний */
html.dark #sidebar .nav-link.active,
html.dark #sidebar .nav-link.active:hover { color: #0d1410; }
html.dark #sidebar .nav-link.active i { color: #0d1410; }

/* Таби Оренди/Фінансів: активний стан позначається utility-класами
   (text-orange-600/border-orange-600, сині варіанти) → бренд-акцент */
.module .rent-tab.text-orange-600,
.module .finance-tab.text-orange-600,
.module .rent-tab.text-blue-600,
.module .finance-tab.text-blue-600 { color: var(--pt-accent) !important; }
.module .rent-tab.border-orange-600,
.module .finance-tab.border-orange-600,
.module .rent-tab.border-blue-600,
.module .finance-tab.border-blue-600 { border-color: var(--pt-accent) !important; }
html.dark body .finance-tab.active,
html.dark body .rent-tab.active {
    color: var(--pt-accent) !important;
    border-bottom-color: var(--pt-accent) !important;
}

/* Спінер у темній темі — бренд, не синій */
html.dark body .spinner { border-top-color: var(--pt-accent) !important; }

/* Інлайн-правило html.dark input/select фарбує контроли лендс-панелі
   у синюватий #374151 — повертаємо токени (специфічність вища) */
html.dark .ld-bar .ld-search input,
html.dark .ld-bar .ld-select {
    background-color: var(--pt-surface) !important;
    border-color: var(--pt-line-2) !important;
    color: var(--pt-ink) !important;
}

/* ============================================================
   ТОПБАР — преміум поверх інлайн-стилів index.html
   (той <style> йде після <link>, тому місцями потрібен !important)
   ============================================================ */
.landdeal-topbar {
    background: color-mix(in srgb, var(--pt-canvas) 80%, transparent) !important;
    border-bottom: 1px solid var(--pt-line) !important;
    box-shadow: none !important;
}
.landdeal-topbar-breadcrumb .bc-label {
    font-family: 'Outfit', 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    color: var(--pt-ink) !important;
}
.landdeal-topbar-breadcrumb .bc-subtitle { color: var(--pt-ink-3) !important; }
.landdeal-topbar-breadcrumb .bc-icon-wrap {
    background: var(--pt-accent-soft) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
}
/* Іконка модуля в хлібних крихтах — завжди бренд-акцент, а не tone-класи */
.landdeal-topbar-breadcrumb .bc-icon-wrap i { color: var(--pt-accent) !important; }

.topbar-icon-btn { color: var(--pt-ink-2) !important; border-radius: 12px !important; }
.topbar-icon-btn:hover { background: var(--pt-accent-soft) !important; color: var(--pt-accent) !important; }
#theme-toggle-btn.topbar-icon-btn { color: var(--pt-ink-2) !important; }
#theme-toggle-btn.topbar-icon-btn:hover { color: var(--pt-accent) !important; }

.topbar-divider { background: var(--pt-line-2) !important; }

.topbar-user-chip {
    background: var(--pt-surface) !important;
    border: 1px solid var(--pt-line-2) !important;
    border-radius: 12px !important;
    color: var(--pt-ink) !important;
    box-shadow: var(--pt-shadow-sm) !important;
}
.topbar-user-chip:hover { border-color: var(--pt-accent-line) !important; background: var(--pt-surface) !important; }
.topbar-user-meta .name { color: var(--pt-ink) !important; }
.topbar-user-meta .role { color: var(--pt-ink-3) !important; }
.topbar-user-avatar {
    background: linear-gradient(140deg, #3d8862, var(--pt-accent-deep)) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
html.dark .topbar-user-avatar { color: #0d1410 !important; }
.topbar-admin-badge {
    background: var(--pt-accent-soft) !important;
    color: var(--pt-accent-deep) !important;
    border: 1px solid var(--pt-accent-line) !important;
}
.topbar-user-menu {
    background: var(--pt-surface) !important;
    border: 1px solid var(--pt-line-2) !important;
    border-radius: 14px !important;
    box-shadow: var(--pt-shadow-lg) !important;
}
.topbar-user-menu .menu-header { border-bottom: 1px solid var(--pt-line) !important; }
.topbar-user-menu .menu-header .name { color: var(--pt-ink) !important; }
.topbar-menu-item { color: var(--pt-ink-2) !important; }
.topbar-menu-item:hover { background: var(--pt-accent-soft) !important; color: var(--pt-ink) !important; }
.topbar-menu-item i { color: var(--pt-ink-3) !important; }
.topbar-menu-item:hover i { color: var(--pt-accent) !important; }
.topbar-menu-item.danger, .topbar-menu-item.danger i { color: #A8402F !important; }
.topbar-menu-item.danger:hover { background: rgba(168, 64, 47, 0.08) !important; }
.topbar-menu-divider { background: var(--pt-line) !important; }

/* ============================================================
   КАРТКИ-КОНТЕЙНЕРИ модулів (безпечний ліфт без правки JS)
   Типовий патерн: <div id="X-content" class="bg-white rounded-xl shadow-lg p-6">
   ============================================================ */
[id$="-content"].bg-white,
[id$="-module"] > .bg-white.rounded-xl,
[id$="-module"] > .bg-white.rounded-2xl {
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    border-radius: 16px;
}

/* Пом'якшуємо жорсткі тіні Tailwind до тонованих преміальних (усе застосунок) */
.shadow-lg { box-shadow: var(--pt-shadow-lg) !important; }
.shadow-md { box-shadow: var(--pt-shadow-md) !important; }
.shadow { box-shadow: var(--pt-shadow) !important; }
.shadow-sm { box-shadow: var(--pt-shadow-sm) !important; }

/* Скролбари — тонкі, у тон полотна */
* { scrollbar-width: thin; scrollbar-color: var(--pt-line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--pt-line-2);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(26, 28, 24, 0.28); background-clip: content-box; }

/* ============================================================
   ФОКУС-СТАНИ — доступність (зелений акцент на всю програму)
   ============================================================ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pt-accent-soft), 0 0 0 1.5px var(--pt-accent);
    border-radius: 8px;
}

/* Loader-спінер модулів — у бренд-колір */
.spinner { border-top-color: var(--pt-accent) !important; }

/* ============================================================
   АВТОЗАПОВНЕННЯ ТА СПОВІЩЕННЯ — єдиний стиль
   ============================================================ */

/* Автозаповнене поле: один зелений стиль для всіх джерел (ДЗК/БД/КОАТУУ) */
input.ld-autofill, select.ld-autofill, textarea.ld-autofill {
    background-color: var(--pt-accent-soft) !important;
    border-color: var(--pt-accent-line) !important;
}
html.dark input.ld-autofill, html.dark select.ld-autofill, html.dark textarea.ld-autofill {
    background-color: var(--pt-accent-soft) !important;
    border-color: var(--pt-accent-line) !important;
    color: var(--pt-ink) !important;
}

/* Чіп джерела даних у модалці (ДЗК, Геодані, КОАТУУ) */
.ld-src-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin-right: 6px;
    border-radius: 7px;
    background: var(--pt-accent-soft);
    color: var(--pt-accent-deep);
    font-size: 11px;
    font-weight: 600;
}
.ld-src-chip i { font-size: 10px; opacity: 0.8; }

/* Toast-сповіщення: преміум-поверхня з акцентною смугою зліва */
.pt-toast {
    background: var(--pt-surface);
    color: var(--pt-ink);
    border: 1px solid var(--pt-line-2);
    border-left: 4px solid var(--pt-accent);
    border-radius: 14px;
    box-shadow: var(--pt-shadow-lg);
    padding: 14px 18px;
    font-size: 13.5px;
}
.pt-toast--success { border-left-color: var(--pt-accent); }
.pt-toast--success .pt-toast__icon { color: var(--pt-accent); }
.pt-toast--error { border-left-color: #A8402F; }
.pt-toast--error .pt-toast__icon { color: #A8402F; }
.pt-toast--warning { border-left-color: #9C7526; }
.pt-toast--warning .pt-toast__icon { color: #9C7526; }
.pt-toast--info { border-left-color: #34607A; }
.pt-toast--info .pt-toast__icon { color: #34607A; }

/* Модулі з преміум-банером .ld-head ховають стару кнопку-тулбар «Додати» */
html[data-module="deals"] #deals-module > .module-toolbar { display: none; }
html[data-module="contacts"] #contacts-module > .module-toolbar { display: none; }

/* Списки «Найближчі події» / «Остання активність» на дашборді */
.dash-feed { display: flex; flex-direction: column; }
.dash-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 4px; border-bottom: 1px solid var(--pt-line);
}
.dash-item:last-child { border-bottom: 0; }
.dash-item__icon {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--pt-accent-soft); color: var(--pt-accent); font-size: 13px;
}
.dash-item__icon.is-amber { background: rgba(156,117,38,.1); color: #9C7526; }
.dash-item__icon.is-slate { background: rgba(110,115,108,.12); color: #6E736C; }
.dash-item__icon.is-clay { background: rgba(168,64,47,.1); color: #A8402F; }
.dash-item__body { min-width: 0; flex: 1; }
.dash-item__title { font-size: 13.5px; font-weight: 600; color: var(--pt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item__meta { font-size: 12px; color: var(--pt-ink-3); margin-top: 1px; }
.dash-item__aside { flex: 0 0 auto; text-align: right; font-size: 12.5px; color: var(--pt-ink-2); font-variant-numeric: tabular-nums; }
.dash-item__aside .warn { color: #9C7526; font-weight: 600; }
.dash-empty { text-align: center; padding: 32px 12px; color: var(--pt-ink-3); font-size: 13.5px; }
.dash-empty i { display: block; font-size: 26px; margin-bottom: 8px; color: var(--pt-ink-4, #B0B4AE); opacity: .7; }

/* ============================================================
   ЄДИНИЙ МОТИВ ДЛЯ ВСІХ МОДУЛІВ
   Уніфікуємо спільні патерни Tailwind до преміального вигляду,
   НЕ переписуючи бізнес-розмітку. Семантичні кольори статусів
   (світлі pill-и bg-*-100) лишаємо — вони несуть зміст.
   ============================================================ */

/* --- Захист іконок Font Awesome ---
   Утиліти розміру (.text-xl тощо) не повинні підміняти шрифт піктограм.
   Жорстко повертаємо правильний шрифт кожному стилю FA. */
.fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fa-light, .fad, .fa-duotone,
.fab, .fa-brands, i[class^="fa-"], i[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
    letter-spacing: normal !important;
}
.fas, .fa-solid { font-weight: 900 !important; }
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

/* --- Типографіка заголовків модулів (не чіпає іконки) --- */
.module h1, .module h2, .module h3,
.module .text-3xl:not(i):not([class*="fa-"]),
.module .text-2xl:not(i):not([class*="fa-"]) {
    font-family: 'Outfit', 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* --- Первинні дії: усі суцільні «брендові» кнопки → зелений акцент --- */
.module button.bg-blue-600,  .module a.bg-blue-600,  .module button.bg-blue-700,  .module a.bg-blue-700,
.module button.bg-blue-500,  .module a.bg-blue-500,
.module button.bg-indigo-600,.module a.bg-indigo-600,.module button.bg-indigo-700,
.module button.bg-purple-600,.module a.bg-purple-600,.module button.bg-purple-700, .module button.bg-purple-500,
.module button.bg-violet-600,.module a.bg-violet-600,
.module button.bg-green-600, .module a.bg-green-600, .module button.bg-green-700,
.module button.bg-emerald-600,.module a.bg-emerald-600,.module button.bg-emerald-700,
.module button.bg-teal-600,  .module a.bg-teal-600 {
    background-color: var(--pt-accent) !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--pt-shadow-md) !important;
    transition: background-color 0.2s var(--pt-ease-soft), transform 0.15s cubic-bezier(0.22,1,0.36,1) !important;
}
.module button.bg-blue-600:hover,  .module a.bg-blue-600:hover,  .module button.bg-blue-700:hover,
.module button.bg-blue-500:hover,
.module button.bg-indigo-600:hover,.module button.bg-purple-600:hover,.module a.bg-purple-600:hover,
.module button.bg-purple-700:hover,.module button.bg-purple-500:hover,.module button.bg-violet-600:hover,
.module button.bg-green-600:hover, .module a.bg-green-600:hover, .module button.bg-green-700:hover,
.module button.bg-emerald-600:hover,.module a.bg-emerald-600:hover,.module button.bg-teal-600:hover {
    background-color: var(--pt-accent-deep) !important;
}
.module button[class*="bg-blue-6"]:active, .module button[class*="bg-purple-6"]:active,
.module button[class*="bg-green-6"]:active, .module a[class*="bg-blue-6"]:active { transform: scale(0.975); }

/* Danger/експорт: приглушуємо кислотні тони до земляних, зберігаючи семантику */
.module button.bg-red-600, .module a.bg-red-600, .module button.bg-red-500, .module button.bg-rose-600 {
    background-color: #A8402F !important; background-image: none !important;
    box-shadow: var(--pt-shadow) !important;
}
.module button.bg-red-600:hover, .module button.bg-red-500:hover, .module button.bg-rose-600:hover { background-color: #8f3325 !important; }
.module button.bg-orange-500, .module button.bg-orange-600, .module button.bg-amber-500, .module button.bg-yellow-500 {
    background-color: #9C7526 !important; background-image: none !important;
    box-shadow: var(--pt-shadow) !important;
}
.module button.bg-orange-500:hover, .module button.bg-orange-600:hover { background-color: #855f1c !important; }

/* Світлі «tab/filter» кнопки з активним синім → акцент */
.module button.bg-blue-100, .module .bg-blue-50.text-blue-700 { background-color: var(--pt-accent-soft) !important; color: var(--pt-accent-deep) !important; }

/* --- Дані-таблиці всіх модулів (крім модуля «Земельні ділянки») --- */
.module table:not(.ld-table) { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.module table:not(.ld-table) thead th {
    background: var(--pt-sunken) !important;
    background-image: none !important;
    color: var(--pt-ink-2) !important;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 12px 14px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--pt-line-2);
}
.module table:not(.ld-table) tbody td { padding: 11px 14px; border-bottom: 1px solid var(--pt-line); font-size: 13px; color: var(--pt-ink); vertical-align: middle; }
.module table:not(.ld-table) tbody tr { transition: background-color 0.15s var(--pt-ease-soft); }
.module table:not(.ld-table) tbody tr:hover { background: var(--pt-accent-soft) !important; }
.module table:not(.ld-table) tbody tr:last-child td { border-bottom: 0; }

/* Заокруглення обгортки таблиці */
.module .overflow-x-auto > table:not(.ld-table),
.module .table-container > table:not(.ld-table) { border-radius: 12px; overflow: hidden; }

/* --- Преміум KPI-картки (дашборд та інші) --- */
.pt-kpi {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 20px 22px;
    background: var(--pt-surface);
    border: 1px solid var(--pt-line);
    border-radius: 18px;
    box-shadow: var(--pt-shadow);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s var(--pt-ease-soft);
}
.pt-kpi:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-md); }
.pt-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-ink-3); }
.pt-kpi__value { margin-top: 8px; font-family: 'Outfit', sans-serif; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--pt-ink); font-variant-numeric: tabular-nums; }
.pt-kpi__meta { margin-top: 4px; font-size: 12.5px; color: var(--pt-ink-2); font-variant-numeric: tabular-nums; }
.pt-kpi__icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pt-accent-soft); color: var(--pt-accent); font-size: 19px; }
.pt-kpi__icon.is-amber { background: rgba(156,117,38,0.1); color: #9C7526; }
.pt-kpi__icon.is-slate { background: rgba(110,115,108,0.12); color: #6E736C; }
.pt-kpi__icon.is-blue  { background: rgba(52,96,122,0.1); color: #34607a; }

/* --- Полегшуємо чарт-картки та контент-панелі --- */
.module .bg-white.rounded-xl, .module .bg-white.rounded-2xl,
.module .bg-white.rounded-lg {
    border: 1px solid var(--pt-line);
}

/* Іконки-акценти в заголовках секцій → бренд-зелений (уніфікація) */
.module h3 > i.text-blue-600, .module h3 > i.text-purple-600, .module h3 > i.text-indigo-600 { color: var(--pt-accent) !important; }

/* --- Приглушення кислотних текстових кольорів до земляної палітри ---
   Семантика зберігається (зелений=дохід, червоний=витрати, синій=число/лінк),
   але відтінки — з палітри мотиву (як у LDChart), а не дефолтний Tailwind. */
.module .text-blue-500, .module .text-blue-600, .module .text-blue-700,
.module .text-indigo-600, .module .text-purple-600, .module .text-purple-700,
.module .text-violet-600 { color: #34607A !important; }
.module .text-green-500, .module .text-green-600, .module .text-green-700,
.module .text-emerald-600 { color: var(--pt-accent) !important; }
.module .text-red-500, .module .text-red-600, .module .text-rose-600 { color: #A8402F !important; }
.module .text-orange-500, .module .text-orange-600,
.module .text-amber-600, .module .text-yellow-600 { color: #9C7526 !important; }

html.dark .module .text-blue-500, html.dark .module .text-blue-600, html.dark .module .text-blue-700,
html.dark .module .text-indigo-600, html.dark .module .text-purple-600, html.dark .module .text-purple-700,
html.dark .module .text-violet-600 { color: #7FA7BF !important; }
html.dark .module .text-red-500, html.dark .module .text-red-600, html.dark .module .text-rose-600 { color: #D08A7B !important; }
html.dark .module .text-orange-500, html.dark .module .text-orange-600,
html.dark .module .text-amber-600, html.dark .module .text-yellow-600 { color: #C9A25E !important; }

/* Фіолетові плитки/бейджі (тип угоди «Придбання», іконки-кошики) → сталевий тон */
.module .bg-purple-100, .module .bg-violet-100, .module .bg-indigo-100 {
    background-color: rgba(52, 96, 122, 0.1) !important;
}
.module .bg-purple-100 i, .module .text-purple-800 { color: #34607A !important; }
html.dark .module .bg-purple-100, html.dark .module .bg-violet-100, html.dark .module .bg-indigo-100 {
    background-color: rgba(127, 167, 191, 0.16) !important;
}
html.dark .module .bg-purple-100 i, html.dark .module .text-purple-800 { color: #7FA7BF !important; }

/* ============================================================
   МОДАЛЬНІ ВІКНА — єдиний преміум-стиль
   Модалки вставляються в <body> (поза .module), тому правила
   прив'язані до патерну оверлея «fixed inset-0 bg-black…».
   ============================================================ */
.fixed.inset-0[class*="bg-black"] {
    background-color: rgba(18, 22, 16, 0.55) !important;
    backdrop-filter: blur(7px) saturate(125%);
    -webkit-backdrop-filter: blur(7px) saturate(125%);
    animation: pt-modal-fade 0.22s ease both;
}

/* Картка модалки */
.fixed.inset-0[class*="bg-black"] .shadow-2xl,
.fixed.inset-0[class*="bg-black"] .shadow-xl {
    border-radius: 20px !important;
    border: 1px solid var(--pt-line-2);
    background-color: var(--pt-surface) !important;
    box-shadow: 0 30px 90px -24px rgba(18, 34, 24, 0.55), 0 10px 24px -10px rgba(0,0,0,0.22) !important;
    animation: pt-modal-pop 0.28s cubic-bezier(0.22,1,0.36,1) both;
    overflow: hidden;
}

/* Темні (text-white) градієнт-шапки → приглушений акцент-градієнт */
.fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] {
    background-image: linear-gradient(100deg, var(--pt-accent), var(--pt-accent-deep)) !important;
    color: #fff !important;
}
.fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] [class*="text-"] { color: rgba(255,255,255,0.86) !important; }
.fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h1,
.fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h2,
.fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h3 { color: #fff !important; font-family: 'Outfit', sans-serif; }
html.dark .fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] { color: #0d1410 !important; }
html.dark .fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h1,
html.dark .fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h2,
html.dark .fixed.inset-0[class*="bg-black"] .text-white[class*="bg-gradient"] h3 { color: #0d1410 !important; }

/* Світлі градієнт-шапки (from-*-50) → сункен-поверхня */
.fixed.inset-0[class*="bg-black"] [class*="from-blue-50"],
.fixed.inset-0[class*="bg-black"] [class*="from-indigo-50"],
.fixed.inset-0[class*="bg-black"] [class*="from-green-50"],
.fixed.inset-0[class*="bg-black"] [class*="from-emerald-50"],
.fixed.inset-0[class*="bg-black"] [class*="from-slate-50"] {
    background-image: none !important;
    background-color: var(--pt-sunken) !important;
}

/* Суцільні кольорові шапки → акцент */
.fixed.inset-0[class*="bg-black"] .text-white.bg-blue-600,
.fixed.inset-0[class*="bg-black"] .text-white.bg-blue-700,
.fixed.inset-0[class*="bg-black"] .text-white.bg-green-600,
.fixed.inset-0[class*="bg-black"] .text-white.bg-emerald-600 {
    background-color: var(--pt-accent) !important; background-image: none !important;
}

/* Футери/панелі bg-gray-50 усередині модалки → сункен */
.fixed.inset-0[class*="bg-black"] .bg-gray-50 { background-color: var(--pt-sunken) !important; }
.fixed.inset-0[class*="bg-black"] .border-t { border-color: var(--pt-line) !important; }
.fixed.inset-0[class*="bg-black"] .border-b { border-color: var(--pt-line) !important; }

/* ============================================================
   ЛИПКИЙ ФУТЕР МОДАЛОК — панель дій «прилипає» до низу вікна,
   коли вміст не вміщається (як web.monobank.ua), замість того
   щоб з'їжджати в кінець списку разом зі скролом.
   Діє там, де скролиться ВСЯ картка (.shadow-* + overflow-y-auto/
   overflow-auto). Футер = останній прямий нащадок картки з .border-t.
   Модалки з внутрішнім скролом тіла (картка overflow-hidden) уже
   мають прикріплений футер і сюди природно не потрапляють.
   ============================================================ */
.fixed.inset-0[class*="bg-black"] [class*="shadow-"][class*="overflow-y-auto"] > .border-t:last-child,
.fixed.inset-0[class*="bg-black"] [class*="shadow-"][class*="overflow-auto"]   > .border-t:last-child {
    position: sticky;
    bottom: 0;
    z-index: 20;
    /* м'яка тінь угору — ефект «плаваючої» смуги під час скролу */
    box-shadow: 0 -8px 16px -14px rgba(18, 34, 24, 0.30);
}
/* Прозорому футеру (без власного bg-* класу) — непрозорий фон, щоб
   контент не просвічував крізь смугу. Кольорові футери (bg-gray-50 →
   сункен, bg-amber-100 …) свій фон зберігають. */
.fixed.inset-0[class*="bg-black"] [class*="shadow-"][class*="overflow-y-auto"] > .border-t:last-child:not([class*="bg-"]),
.fixed.inset-0[class*="bg-black"] [class*="shadow-"][class*="overflow-auto"]   > .border-t:last-child:not([class*="bg-"]) {
    background-color: var(--pt-surface);
}

/* p-8 форми у модалках (Фінанси): ряд кнопок .pt-modal-actions прилипає до низу
   картки. Тут падинг p-8 стоїть на самій картці-скролері, тож компенсуємо його:
   bottom:-2rem + margin:-2rem гасять нижній/бічні відступи → бар урівень з краєм. */
.fixed.inset-0[class*="bg-black"] [class*="shadow-"][class*="p-8"][class*="overflow-y-auto"] .pt-modal-actions {
    position: sticky;
    bottom: -2rem;
    z-index: 20;
    margin: 1rem -2rem -2rem;
    padding: 1rem 2rem;
    background-color: var(--pt-surface);
    border-top: 1px solid var(--pt-line);
}

/* Первинні кнопки в модалках → акцент */
.fixed.inset-0[class*="bg-black"] button.bg-green-500,  .fixed.inset-0[class*="bg-black"] button.bg-green-600,
.fixed.inset-0[class*="bg-black"] button.bg-blue-500,   .fixed.inset-0[class*="bg-black"] button.bg-blue-600,
.fixed.inset-0[class*="bg-black"] button.bg-blue-700,   .fixed.inset-0[class*="bg-black"] button.bg-indigo-600,
.fixed.inset-0[class*="bg-black"] button.bg-purple-600, .fixed.inset-0[class*="bg-black"] button.bg-emerald-500,
.fixed.inset-0[class*="bg-black"] button.bg-emerald-600,.fixed.inset-0[class*="bg-black"] a.bg-green-600,
.fixed.inset-0[class*="bg-black"] a.bg-blue-600 {
    background-color: var(--pt-accent) !important; background-image: none !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--pt-shadow-md) !important;
}
.fixed.inset-0[class*="bg-black"] button.bg-green-500:hover,  .fixed.inset-0[class*="bg-black"] button.bg-green-600:hover,
.fixed.inset-0[class*="bg-black"] button.bg-blue-500:hover,   .fixed.inset-0[class*="bg-black"] button.bg-blue-600:hover,
.fixed.inset-0[class*="bg-black"] button.bg-blue-700:hover,   .fixed.inset-0[class*="bg-black"] button.bg-indigo-600:hover,
.fixed.inset-0[class*="bg-black"] button.bg-purple-600:hover, .fixed.inset-0[class*="bg-black"] button.bg-emerald-600:hover {
    background-color: var(--pt-accent-deep) !important;
}
html.dark .fixed.inset-0[class*="bg-black"] button[class*="bg-green-"],
html.dark .fixed.inset-0[class*="bg-black"] button[class*="bg-blue-"],
html.dark .fixed.inset-0[class*="bg-black"] button[class*="bg-emerald-"] { color: #0d1410 !important; }

/* Danger у модалках */
.fixed.inset-0[class*="bg-black"] button.bg-red-600, .fixed.inset-0[class*="bg-black"] button.bg-red-500 {
    background-color: #A8402F !important; background-image: none !important;
}
.fixed.inset-0[class*="bg-black"] button.bg-red-600:hover, .fixed.inset-0[class*="bg-black"] button.bg-red-500:hover { background-color: #8f3325 !important; }

/* Секційні панелі-групування в модалках: прибираємо сині/фіолетові плями.
   Бренд-зелені лишаємо ледь зеленими, решту — нейтральний сункен. */
.fixed.inset-0[class*="bg-black"] [class*="bg-blue-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-indigo-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-purple-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-violet-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-sky-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-cyan-50"] { background-color: var(--pt-sunken) !important; }
.fixed.inset-0[class*="bg-black"] [class*="bg-green-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-emerald-50"],
.fixed.inset-0[class*="bg-black"] [class*="bg-teal-50"] { background-color: var(--pt-accent-soft) !important; }
.fixed.inset-0[class*="bg-black"] [class*="border-blue-100"],
.fixed.inset-0[class*="bg-black"] [class*="border-indigo-100"],
.fixed.inset-0[class*="bg-black"] [class*="border-purple-100"],
.fixed.inset-0[class*="bg-black"] [class*="border-sky-100"],
.fixed.inset-0[class*="bg-black"] [class*="border-green-100"],
.fixed.inset-0[class*="bg-black"] [class*="border-emerald-100"] { border-color: var(--pt-line-2) !important; }
/* Іконки-маркери секцій (сині/фіолетові) → бренд-зелений; семантичні (red/amber) не чіпаємо */
.fixed.inset-0[class*="bg-black"] i.text-blue-600, .fixed.inset-0[class*="bg-black"] i.text-blue-500,
.fixed.inset-0[class*="bg-black"] i.text-indigo-600, .fixed.inset-0[class*="bg-black"] i.text-purple-600,
.fixed.inset-0[class*="bg-black"] i.text-purple-500, .fixed.inset-0[class*="bg-black"] i.text-sky-600 { color: var(--pt-accent) !important; }

/* Поля вводу/селекти в модалках — заокруглення (фокус — глобальний зелений) */
.fixed.inset-0[class*="bg-black"] input:not([type=checkbox]):not([type=radio]):not([type=file]),
.fixed.inset-0[class*="bg-black"] select,
.fixed.inset-0[class*="bg-black"] textarea { border-radius: 10px !important; }

@keyframes pt-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-modal-pop { from { opacity: 0; transform: translateY(14px) scale(0.975); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .fixed.inset-0[class*="bg-black"], .fixed.inset-0[class*="bg-black"] .shadow-2xl { animation: none !important; }
}

/* --- Градієнтні KPI-картки (рендеряться з JS у модулях) → преміум-поверхня --- */
.module div.text-white[class*="bg-gradient-to-br"],
.module div.text-white[class*="bg-gradient-to-r"],
.module div.text-white[class*="bg-gradient-to-tr"],
.module div.text-white[class*="bg-gradient-to-bl"],
.module a.text-white[class*="bg-gradient-to-br"] {
    background-image: none !important;
    background-color: var(--pt-surface) !important;
    color: var(--pt-ink) !important;
    border: 1px solid var(--pt-line) !important;
    box-shadow: var(--pt-shadow) !important;
    border-radius: 18px !important;
}
/* Текст усередині таких карток стає темним і читабельним */
.module div.text-white[class*="bg-gradient"] p,
.module div.text-white[class*="bg-gradient"] span,
.module div.text-white[class*="bg-gradient"] div,
.module div.text-white[class*="bg-gradient"] h1,
.module div.text-white[class*="bg-gradient"] h2,
.module div.text-white[class*="bg-gradient"] h3 { color: var(--pt-ink) !important; }
.module div.text-white[class*="bg-gradient"] .text-3xl,
.module div.text-white[class*="bg-gradient"] .text-2xl,
.module div.text-white[class*="bg-gradient"] .font-bold {
    font-family: 'Outfit', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
/* Дрібні світлі підписи (text-*-100) → приглушений сірий */
.module div.text-white[class*="bg-gradient"] [class*="text-"][class*="-100"],
.module div.text-white[class*="bg-gradient"] .text-sm,
.module div.text-white[class*="bg-gradient"] .text-xs { color: var(--pt-ink-3) !important; }
/* Кружечок-іконка → акцентна плитка */
.module div.text-white[class*="bg-gradient"] [class*="bg-opacity"],
.module div.text-white[class*="bg-gradient"] [class*="bg-white/2"],
.module div.text-white[class*="bg-gradient"] [class*="rounded-full"] {
    background-color: var(--pt-accent-soft) !important;
    border-radius: 14px !important;
    color: var(--pt-accent) !important;
}
.module div.text-white[class*="bg-gradient"] i { color: var(--pt-accent) !important; }

/* ============================================================
   Модальні вікна: картка ніколи не вища за екран — вміст
   скролиться всередині. Покриває і Utils.showModal, і кастомні
   модалки модулів (усі центровані оверлеї .fixed.inset-0).
   ============================================================ */
.fixed.inset-0.flex.items-center.justify-center > div {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* ============================================================
   Режим «пліч-о-пліч» для пов'язаних карток (RelatedLinks.open).
   Клік по ярличку не закриває поточне вікно, а зсуває його вліво
   й відкриває пов'язане праворуч — обидва записи видно разом.
   ============================================================ */
.ld-split {
    justify-content: flex-start !important;
    padding: 0 8px;
    pointer-events: none;            /* фон не ловить кліки в split-режимі */
}
.ld-split .ld-split__panel { pointer-events: auto; }
/* Лівий тримає затемнення, правий — прозорий, щоб два напівпрозорих
   шари не давали подвійного затемнення й blur не розмивав ліву картку.
   Специфічність навмисно піднята до .fixed.inset-0[class*="bg-black"]
   вище — інакше те правило перебиває це своїм !important. */
.fixed.inset-0[class*="bg-black"].ld-split--right {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
}
.ld-split--left  { justify-content: flex-start !important; }
.ld-split--right { justify-content: flex-end !important; }

.ld-split .ld-split__panel {
    width: calc(50vw - 14px) !important;
    max-width: calc(50vw - 14px) !important;
    margin: 0 !important;
    max-height: 94vh !important;
    transition: width 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.ld-split .ld-split__panel { position: relative; }

/* На вузькому екрані половинки не мають сенсу — лишаємо праву поверх */
@media (max-width: 1100px) {
    .ld-split--left { display: none !important; }
    .ld-split--right { justify-content: center !important; background: rgba(0,0,0,0.5) !important; }
    .ld-split .ld-split__panel { width: 92vw !important; max-width: 92vw !important; }
}

/* ============================================================
   ПОДАТКОВИЙ КАЛЕНДАР — чіпи, сегменти, тумблери, список подій
   Модалка «Персоналізувати» живе в <body>, поза .module, тож
   .module-оверрайди до неї не дістають: кольори беремо з токенів
   напряму, а не з утиліт Tailwind.
   ============================================================ */

/* --- Чіп-фільтр (Найближчі / Прострочені / Сплачені / Усі) --- */
.pt-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    color: var(--pt-ink-2);
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-2);
    transition: border-color 0.18s var(--pt-ease-soft), background-color 0.18s var(--pt-ease-soft), color 0.18s var(--pt-ease-soft);
}
.pt-chip:hover { border-color: var(--pt-accent-line); color: var(--pt-ink); }
.pt-chip.is-active {
    background: var(--pt-accent); border-color: var(--pt-accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
html.dark .pt-chip.is-active { color: #0d1410; }
.pt-chip__count { font-variant-numeric: tabular-nums; opacity: 0.6; }
.pt-chip i { font-size: 10px; }

/* --- Сегментований вибір (тип платника / система / група) --- */
.pt-seg {
    padding: 9px 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 500;
    color: var(--pt-ink-2);
    background: var(--pt-surface);
    border: 1px solid var(--pt-line-2);
    transition: border-color 0.18s var(--pt-ease-soft), background-color 0.18s var(--pt-ease-soft), color 0.18s var(--pt-ease-soft);
}
.pt-seg:hover { border-color: var(--pt-accent-line); color: var(--pt-ink); }
.pt-seg.is-active {
    background: var(--pt-accent); border-color: var(--pt-accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
html.dark .pt-seg.is-active { color: #0d1410; }

/* --- Тумблер --- */
.pt-switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.pt-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pt-switch__track {
    position: relative; display: block; width: 42px; height: 24px;
    border-radius: 999px; background: var(--pt-line-2);
    transition: background-color 0.22s var(--pt-ease-soft);
}
.pt-switch__track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--pt-surface); box-shadow: var(--pt-shadow-sm);
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.pt-switch input:checked + .pt-switch__track { background: var(--pt-accent); }
.pt-switch input:checked + .pt-switch__track::after { transform: translateX(18px); }
.pt-switch input:focus-visible + .pt-switch__track { box-shadow: 0 0 0 3px var(--pt-accent-soft); }

/* --- Таблиця подій у «Персоналізувати» --- */
.pt-events__head {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 12px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pt-events__group {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 8px 12px; border-radius: 10px;
    background: var(--pt-accent-soft); color: var(--pt-accent);
    font-size: 13px; font-weight: 600;
}
.pt-events__group i { font-size: 11px; }
.pt-events__row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px; border-bottom: 1px solid var(--pt-line);
    transition: background-color 0.15s var(--pt-ease-soft);
}
.pt-events__row:last-child { border-bottom: 0; }
.pt-events__row:hover { background: var(--pt-sunken); }
.pt-events__name { flex: 0 0 210px; font-size: 13.5px; font-weight: 500; color: var(--pt-ink); }
.pt-events__desc { flex: 1; font-size: 13px; color: var(--pt-ink-2); }
.pt-events__hint { color: var(--pt-ink-3); }

/* --- Стрічка строків на вкладці «Календар» --- */
.pt-deadline {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--pt-line);
    border-left: 3px solid var(--pt-line-2);
    transition: background-color 0.15s var(--pt-ease-soft), border-color 0.15s var(--pt-ease-soft);
}
.pt-deadline:hover { background: var(--pt-sunken); }
.pt-deadline.is-overdue { border-left-color: #A8402F; }
.pt-deadline.is-soon { border-left-color: #9C7526; }
.pt-deadline.is-paid { opacity: 0.55; }
.pt-deadline__day {
    flex: 0 0 46px; text-align: center;
    font-family: 'Outfit', sans-serif; font-variant-numeric: tabular-nums;
}
.pt-deadline__day b { display: block; font-size: 19px; font-weight: 600; line-height: 1; color: var(--pt-ink); }
.pt-deadline__day span { font-size: 11px; color: var(--pt-ink-3); }
.pt-deadline__name { font-size: 13.5px; font-weight: 500; color: var(--pt-ink); }
.pt-deadline.is-paid .pt-deadline__name { text-decoration: line-through; }
.pt-deadline__meta { font-size: 12px; color: var(--pt-ink-3); }
.pt-deadline__left { font-size: 13px; font-weight: 600; color: var(--pt-ink-2); font-variant-numeric: tabular-nums; }
.pt-deadline.is-overdue .pt-deadline__left { color: #A8402F; }
.pt-deadline.is-soon .pt-deadline__left { color: #9C7526; }
html.dark .pt-deadline.is-overdue { border-left-color: #D08A7B; }
html.dark .pt-deadline.is-soon { border-left-color: #C9A25E; }
html.dark .pt-deadline.is-overdue .pt-deadline__left { color: #D08A7B; }
html.dark .pt-deadline.is-soon .pt-deadline__left { color: #C9A25E; }

/* Кнопка «сплачено» на рядку строку */
.pt-deadline__check {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid var(--pt-line-2); color: var(--pt-ink-3);
    background: transparent; font-size: 12px;
    transition: border-color 0.18s var(--pt-ease-soft), color 0.18s var(--pt-ease-soft);
}
.pt-deadline__check:hover { border-color: var(--pt-accent-line); color: var(--pt-accent); }

/* Місяць-роздільник у стрічці */
.pt-month {
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pt-month::after { content: ''; flex: 1; height: 1px; background: var(--pt-line); }

@media (max-width: 640px) {
    .pt-events__row, .pt-events__head { flex-wrap: wrap; gap: 8px; }
    .pt-events__name { flex-basis: 100%; }
    .pt-events__desc { flex-basis: calc(100% - 60px); }
}

/* Сплата чи подання — різні дії, тож розрізняються не лише назвою */
.pt-kindbadge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 6px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em;
    border: 1px solid transparent; white-space: nowrap;
}
.pt-kindbadge.is-payment { background: var(--pt-accent-soft); color: var(--pt-accent); border-color: var(--pt-accent-line); }
.pt-kindbadge.is-report  { background: rgba(52, 96, 122, 0.09); color: #34607A; border-color: rgba(52, 96, 122, 0.22); }
html.dark .pt-kindbadge.is-report { background: rgba(127, 167, 191, 0.15); color: #7FA7BF; border-color: rgba(127, 167, 191, 0.3); }
.pt-kindbadge i { font-size: 9px; }

/* Подання позначаємо ще й пунктиром на лівому канті — видно скануванням */
.pt-deadline.is-report { border-left-style: dashed; }

/* ============================================================
   ПОДАТКОВИЙ КАЛЕНДАР — режим «Діаграма» (таймлайн року)
   Позиціювання по датах рахує JS у відсотках, тут — лише каркас.
   ============================================================ */
.pt-gantt { position: relative; padding-top: 4px; }

/* Смуги кварталів: сітка на всю висоту, підписи місяців знизу */
.pt-gantt__grid { position: absolute; inset: 0 0 52px 0; display: flex; pointer-events: none; }
.pt-gantt__q { flex: 1; border-right: 1px solid var(--pt-line); }
.pt-gantt__q:last-child { border-right: 0; }

.pt-gantt__qlabels { display: flex; margin-bottom: 10px; }
.pt-gantt__qlabel {
    flex: 1; padding-left: 10px;
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; color: var(--pt-ink);
}

/* Низ зарезервовано під підписи місяців (≈20px) і плашку «сьогодні» (≈26px):
   без цього вони накладалися одне на одне */
.pt-gantt__rows { position: relative; padding-bottom: 52px; }
.pt-gantt__row { position: relative; height: 34px; margin-bottom: 6px; }

.pt-gantt__bar {
    position: absolute; top: 4px; height: 26px; min-width: 4px;
    border-radius: 7px;
    /* Права зарубка кольором полотна: суміжні місячні смуги інакше зливаються
       в одну суцільну стрічку, і періодів у ній не видно */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset -2px 0 0 var(--pt-surface);
    transition: filter 0.15s var(--pt-ease-soft), transform 0.15s var(--pt-ease-soft);
    cursor: default;
}
.pt-gantt__bar:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pt-gantt__bar.is-paid { opacity: 0.34; }
/* Подання — штрихування, як пунктир на кантику в списку */
.pt-gantt__bar.is-report::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 10px);
}
/* Прострочене. Товстий outline з відступом читався як решето, коли
   прострочених десяток, — лишаємо тонку рамку по краю самої смуги. */
.pt-gantt__bar.is-overdue { box-shadow: inset 0 0 0 1.5px #A8402F, inset -2px 0 0 var(--pt-surface); }
html.dark .pt-gantt__bar.is-overdue { box-shadow: inset 0 0 0 1.5px #D08A7B, inset -2px 0 0 var(--pt-surface); }

/* Позначка «сьогодні» */
.pt-gantt__today { position: absolute; top: 0; bottom: 52px; width: 1px; background: var(--pt-ink-3); pointer-events: none; }
.pt-gantt__today::before {
    content: attr(data-label); position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%);
    padding: 3px 9px; border-radius: 6px; white-space: nowrap;
    background: var(--pt-sunken); border: 1px solid var(--pt-line-2);
    font-size: 11px; color: var(--pt-ink-2);
}

/* Підписи місяців */
.pt-gantt__months { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; }
.pt-gantt__month {
    flex: 1; text-align: center;
    font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--pt-ink-3);
}
.pt-gantt__month.is-now { color: var(--pt-ink); }

/* Легенда */
.pt-gantt__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.pt-gantt__legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pt-ink-2); }
.pt-gantt__dot { width: 10px; height: 10px; border-radius: 3px; }

/* Перемикач вигляду список / діаграма */
.pt-viewtoggle { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--pt-sunken); border: 1px solid var(--pt-line); }
.pt-viewtoggle button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500; color: var(--pt-ink-2);
    transition: background-color 0.18s var(--pt-ease-soft), color 0.18s var(--pt-ease-soft);
}
.pt-viewtoggle button.is-active { background: var(--pt-surface); color: var(--pt-ink); box-shadow: var(--pt-shadow-sm); }
.pt-viewtoggle i { font-size: 11px; }

@media (max-width: 900px) {
    .pt-gantt__month { font-size: 9px; }
    .pt-gantt__qlabel { font-size: 12px; }
}

/* Підказка на смузі діаграми. Нативний title з'являється майже за секунду і
   не пояснює, ЧОМУ смуга така довга, — тому свій. */
.pt-gantt__tip {
    position: fixed; z-index: 10050; max-width: 320px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--pt-surface); border: 1px solid var(--pt-line-2);
    box-shadow: var(--pt-shadow-lg);
    font-size: 12.5px; color: var(--pt-ink-2); line-height: 1.45;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity 0.14s var(--pt-ease-soft), transform 0.14s var(--pt-ease-soft), visibility 0.14s;
    pointer-events: none;
}
.pt-gantt__tip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pt-gantt__tip b { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 600; color: var(--pt-ink); }
.pt-gantt__tip dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin-top: 7px; }
.pt-gantt__tip dt { color: var(--pt-ink-3); }
.pt-gantt__tip dd { color: var(--pt-ink); font-variant-numeric: tabular-nums; }
.pt-gantt__bar { cursor: help; }

/* --- Виконане на діаграмі: сіра плитка з галочкою, а не приглушений колір ---
   Приглушення кольором читалося як «блідий той самий податок»; галочка каже
   «зроблено» без здогадок. */
.pt-gantt__bar.is-paid {
    background: var(--pt-sunken) !important;
    border: 1px solid var(--pt-line-2);
    opacity: 1;
    display: grid; place-items: center;
}
.pt-gantt__bar.is-paid::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 12px; color: var(--pt-accent);
}
.pt-gantt__bar.is-paid::after { content: none; }   /* без штрихування подання */

/* Вибрана смуга + притлумлення решти */
.pt-gantt__bar.is-selected { outline: 2px solid var(--pt-accent); outline-offset: 2px; z-index: 2; }
.pt-gantt.has-selection .pt-gantt__bar:not(.is-selected) { opacity: 0.38; }

/* --- Картка строку (клік по смузі або рядку списку) --- */
.pt-eventcard {
    margin-top: 18px; padding: 22px;
    border: 1px solid var(--pt-line-2); border-radius: 16px;
    background: var(--pt-surface); box-shadow: var(--pt-shadow-md);
    animation: pt-modal-fade 0.2s ease both;
}
.pt-eventcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pt-eventcard__title {
    font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 600;
    letter-spacing: -0.02em; color: var(--pt-ink);
}
.pt-eventcard__close {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
    display: grid; place-items: center; color: var(--pt-ink-3);
}
.pt-eventcard__close:hover { background: var(--pt-sunken); color: var(--pt-ink); }

.pt-eventcard__body { display: grid; grid-template-columns: 1fr 280px; gap: 28px; margin-top: 18px; }
@media (max-width: 900px) { .pt-eventcard__body { grid-template-columns: 1fr; } }

.pt-eventcard__section + .pt-eventcard__section { margin-top: 18px; }
.pt-eventcard__label { font-size: 13px; font-weight: 700; color: var(--pt-ink); margin-bottom: 5px; }
.pt-eventcard__text { font-size: 13.5px; line-height: 1.55; color: var(--pt-ink-2); }
.pt-eventcard__laws { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--pt-ink-2); }

.pt-eventcard__due {
    padding: 14px 16px; border-radius: 12px;
    background: var(--pt-sunken); border: 1px solid var(--pt-line);
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: var(--pt-ink);
}
.pt-eventcard__due.is-overdue { color: #A8402F; border-color: rgba(168,64,47,0.28); }
.pt-eventcard__due.is-done { color: var(--pt-accent); border-color: var(--pt-accent-line); }
html.dark .pt-eventcard__due.is-overdue { color: #D08A7B; }

.pt-eventcard__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pt-line);
}
.pt-eventcard__payer { font-size: 13px; color: var(--pt-ink-2); }
.pt-eventcard__payer span { color: var(--pt-ink-3); }
.pt-eventcard__note { font-size: 11.5px; color: var(--pt-ink-3); margin-top: 14px; }

/* Виконане в списку — та сама галочка на кнопці, щоб мова була одна */
.pt-deadline.is-paid .pt-deadline__check { border-color: var(--pt-accent-line); color: var(--pt-accent); }
.pt-deadline { cursor: pointer; }
.pt-gantt__tiphint { display: block; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--pt-line); font-size: 11.5px; color: var(--pt-ink-3); }

/* Вікно дії події в «Персоналізувати»: підрядок під назвою, а не окрема колонка —
   інакше таблиця з трьох колонок стає з п'яти й перестає читатись */
.pt-events__window { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--pt-ink-3); }
.pt-events__window input {
    padding: 2px 6px; border-radius: 6px; font-size: 11.5px;
    border: 1px solid var(--pt-line-2); background: var(--pt-surface); color: var(--pt-ink);
    font-variant-numeric: tabular-nums;
}
.pt-events__window input:focus { outline: none; border-color: var(--pt-accent-line); box-shadow: 0 0 0 3px var(--pt-accent-soft); }
.pt-events__row.is-off .pt-events__window { display: none; }
.pt-events__row.is-off .pt-events__name,
.pt-events__row.is-off .pt-events__desc { opacity: 0.5; }

/* Плашка з датою реєстрації над списком подій */
.pt-events__floor {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 12px 0 2px; padding: 10px 12px; border-radius: 10px;
    background: var(--pt-sunken); border: 1px solid var(--pt-line);
    font-size: 12px; color: var(--pt-ink-2); line-height: 1.5;
}
.pt-events__floor i { margin-top: 2px; color: var(--pt-ink-3); }

/* Прихований строк у списку */
.pt-deadline.is-dismissed { opacity: 0.45; border-style: dashed; }
.pt-deadline.is-dismissed .pt-deadline__name { text-decoration: line-through; }

/* --- 20-ОПП на діаграмі: згорнута доріжка внизу ---
   Ділянок бувають десятки, і кожна власним рядком розчиняє решту календаря.
   Тому за замовчуванням усі строки лежать в одній смузі, а розгортається вона
   на вимогу. */
.pt-gantt__opp { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--pt-line-2); }
.pt-gantt__opphead {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    font-size: 12px; font-weight: 600; color: var(--pt-ink-2);
}
.pt-gantt__opphead:hover { color: var(--pt-ink); }
.pt-gantt__opphead i.fa-chevron-down,
.pt-gantt__opphead i.fa-chevron-up { font-size: 9px; color: var(--pt-ink-3); }
.pt-gantt__oppcount { font-weight: 500; color: var(--pt-ink-3); font-variant-numeric: tabular-nums; }
.pt-gantt__oppcount b { font-weight: 600; color: #A8402F; }
html.dark .pt-gantt__oppcount b { color: #D08A7B; }

/* Розгорнуті доріжки тонші за звичайні: їх багато */
.pt-gantt__opp .pt-gantt__row { height: 22px; margin-bottom: 3px; overflow: visible; }
.pt-gantt__opp .pt-gantt__bar { top: 2px; height: 18px; border-radius: 5px; }

/* Підпис ділянки поруч зі смугою — всередину не влазить: строк 10 робочих
   днів це близько 4% ширини року */
.pt-gantt__barlabel {
    position: absolute; top: 3px; white-space: nowrap; pointer-events: none;
    font-size: 10.5px; color: var(--pt-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pt-gantt__barlabel.is-left { transform: translateX(-100%); padding-right: 7px; }
.pt-gantt__barlabel.is-right { padding-left: 7px; }