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

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    color: #292524;
    background-image: url('images/background.jpg');
    background-repeat: repeat;
    background-size: auto;
    position: relative;
}

/* Легкий блакитний відтінок поверх фону (як на лендінгу) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(100, 150, 200, 0.1);
    z-index: -1;
}

/* ===== HEADER ===== */
.header {
    position: sticky;
    top: 0;
    background: rgba(225, 238, 248, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 0.55rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    z-index: 200;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.header-logo img { height: 31px; vertical-align: middle; }

.header-logo span {
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, #4d7d5e, #6da283);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-menu a {
    text-decoration: none;
    color: #292524;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.header-menu a:hover { color: #4d7d5e; }

/* ===== PAGE LAYOUT ===== */
.page-container {
    display: flex;
    height: calc(100vh - 52px);
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 235px;
    min-width: 235px;
    background: #e8f0f6;
    border-right: 1px solid rgba(0,0,0,0.08);
    padding: 12px 8px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100%;
}

/* ===== USER CARD ===== */
.user-card {
    background: rgba(255,255,255,0.85);
    border-radius:4px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    cursor: pointer;
    transition: background 0.2s;
}
.user-card:hover { background: rgba(255,255,255,0.98); }

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius:50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    color: #fff;
}
.user-avatar.free  { background: #78716c; }
.user-avatar.pro   { background: #4d7d5e; }
.user-avatar.super { background: #7c3aed; }

.user-info { flex: 1; min-width: 0; }

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: #1c1917;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-status {
    font-size: 13px;
    margin-top: 2px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-status.free  { color: #78716c; }
.user-status.pro   { color: #4d7d5e; }
.user-status.super { color: #7c3aed; }

/* Sidebar auth links */
.sidebar-auth {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sidebar-auth a,
.sidebar-auth button {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    border-radius:4px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #d6d3d1;
    background: rgba(255,255,255,0.85);
    color: #44403c;
    font-family: inherit;
}
.sidebar-auth a:hover,
.sidebar-auth button:hover {
    background: #f5f5f4;
    color: #4d7d5e;
    border-color: #4d7d5e;
}

/* ===== SIDEBAR BUTTONS ===== */
.sidebar-btn {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border-radius:4px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s;
    margin-bottom: 6px;
    text-decoration: none;
    font-family: inherit;
}

.sidebar-btn.primary {
    background: linear-gradient(135deg, #6da283, #4d7d5e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(63, 107, 79,0.3);
}
.sidebar-btn.primary:hover {
    background: linear-gradient(135deg, #4d7d5e, #3a5f45);
}

.sidebar-btn.secondary {
    background: rgba(255,255,255,0.8);
    color: #57534e;
    border: 1px solid #d6d3d1;
}
.sidebar-btn.secondary:hover {
    background: #f5f5f4;
    color: #292524;
}

.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin: 8px 0;
}

/* ===== FILE ACCORDION ===== */
.file-accordion {
    border: 1px solid #d6d3d1;
    border-radius:4px;
    background: rgba(255,255,255,0.8);
    margin-bottom: 6px;
    overflow: hidden;
}

.file-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #44403c;
    user-select: none;
}

.file-accordion-header:hover { background: rgba(255,255,255,0.95); }

.file-accordion-arrow {
    transition: transform 0.2s;
    font-size: 10px;
    color: #78716c;
}
.file-accordion-arrow.open { transform: rotate(180deg); }

.file-accordion-body { display: none; border-top: 1px solid #e7e5e4; }
.file-accordion-body.open { display: block; max-height: 327px; overflow-y: auto; }

.file-accordion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    font-size: 13px;
    color: #44403c;
    border-bottom: 1px solid #f5f5f4;
}
.file-accordion-item:last-child { border-bottom: none; }

/* Short summary shown in sidebar after calculation, replacing the file accordion */
.files-summary-text {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    color: #78716c;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.file-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #a8a29e;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.2s;
    font-family: inherit;
}
.file-delete-btn:hover { color: #dc2626; }

/* ===== SIDEBAR MENU ===== */
.sidebar-menu {
    list-style: none;
    margin-bottom: 8px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius:4px;
    text-decoration: none;
    color: #44403c;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 2px;
    gap: 6px;
}

.sidebar-menu li a:hover {
    background: rgba(255,255,255,0.75);
    color: #1c1917;
}

.sidebar-menu li a.active {
    background: #6da283;
    color: #fff;
    font-weight: 600;
}
.sidebar-menu li a.active .badge {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.badge {
    background: rgba(15,23,42,0.08);
    color: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius:4px;
    flex-shrink: 0;
    min-width: 22px;
    text-align: center;
}

.menu-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
    overflow-y: auto;
    height: 100%;
}

/* ===== CARD ===== */
.card {
    background: #fff;
    border-radius:4px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

/* Flat variant — no white box, sits directly on page background (report pages) */
.card.card-flat {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== TABLES ===== */
.table-responsive {
    overflow-x: auto;
    margin-bottom: 10px;
    border-radius:4px;
    border: 1px solid #d6d3d1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

table thead tr { background: #f5f5f4; }

table th {
    padding: 10px 13px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: #57534e;
    border-bottom: 2px solid #e7e5e4;
    border-right: 1px solid #e7e5e4;
    white-space: nowrap;
    vertical-align: top;
}
table th:last-child { border-right: none; }

table td {
    padding: 9px 13px;
    border-bottom: 1px solid #f5f5f4;
    border-right: 1px solid #f5f5f4;
    color: #292524;
    font-size: 14px;
    white-space: nowrap;
    text-align: center;
    vertical-align: top;
}
table td:last-child { border-right: none; }

table tbody tr:last-child td { border-bottom: none; }
table tbody tr:hover { background: #fafaf9; }

/* Header wrapping — only for Dywidendy and Inne koszty i przychody
   (Portfolio's "Główna tabela portfela" uses .portfolio-table instead —
   дивись нижче — бо тут заголовки МАЮТЬ переноситись, а ДАНІ мають
   лишатись повного розміру, на відміну від .wrap-headers, який зменшує і
   те, і те) */
.wrap-headers table th {
    white-space: normal;
    word-break: keep-all;
    min-width: 62px;
    padding: 8px 5px;
    font-size: 12px;
}
.wrap-headers table td {
    padding: 8px 6px;
    font-size: 13px;
}
.wrap-headers table th .col-header-cell {
    align-items: flex-start;
}
.wrap-headers table th .col-menu-btn {
    margin-top: 1px;
    flex-shrink: 0;
}
.wrap-headers table th .col-label {
    text-align: center;
    line-height: 1.3;
}

/* Раніше border-right у шапці збігався кольором із фоном шапки (#e7e5e4 на
   #e7e5e4) — лінія технічно була, але візуально невидима, тому в шапці
   таблиці виглядала суцільною, хоча в самих даних клітинки видно чітко.
   Тепер лінія в шапці — того ж кольору, що й border-bottom, тому помітна. */
table.dataframe th { background: #e7e5e4; font-weight: 600; font-size: 13px; color: #44403c; border-bottom: 2px solid #d6d3d1; border-right: 1px solid #d6d3d1; text-align: center; }
table.dataframe th:last-child { border-right: none; }

/* PIT-38 — Akcje i Koszty / Dywidendy: однакові ширини колонок (Komorka / Nazwa / Wartosc) */
.pit38-table table { table-layout: fixed; }
.pit38-table th:nth-child(1),
.pit38-table td:nth-child(1) { width: 13%; }
.pit38-table th:nth-child(3),
.pit38-table td:nth-child(3) { width: 13%; }
.pit38-table th:nth-child(2) { text-align: center; }
.pit38-table td:nth-child(2) { text-align: left; white-space: normal; }

/* .dodatkowa-informacja-table — та сама таблиця PIT-38 стилістично, АЛЕ
   лише 2 колонки (Nazwa/Wartosc, без Komorka) — правила вище розраховані
   на 3 колонки і рахували б колонки за номером (nth-child), тому 1-ша
   колонка (тут Nazwa) отримувала б вузьку 13%-ширину замість широкої, а
   2-га (тут Wartosc) — усе, що лишилось (замість вузької). Тому тут — свої
   окремі правила, що перекривають ті вище саме для цієї таблиці. */
.dodatkowa-informacja-table th:nth-child(1),
.dodatkowa-informacja-table td:nth-child(1) { width: auto; text-align: left; white-space: normal; }
.dodatkowa-informacja-table th:nth-child(2),
.dodatkowa-informacja-table td:nth-child(2) { width: 15%; text-align: right; }

/* PIT/ZG — Zagraniczne przychody: чотири рівні колонки (Poz. 6/7/29/30) */
.pit38-zg-table table { table-layout: fixed; }
.pit38-zg-table th,
.pit38-zg-table td { width: 25%; }
/* Довгі назви колонок (напр. "Inne przychody, w tym uzyskane za granicą -
   Dochod") інакше йдуть одним рядком (white-space: nowrap за замовчуванням
   з базового "table th") і не влазять у фіксовану ширину 25% — таблиця
   вилазить за межі екрана. Тут дозволяємо перенос саме в цій таблиці. */
.pit38-zg-table th {
    white-space: normal;
    word-break: break-word;
    padding: 8px 8px;
    line-height: 1.3;
}

/* Другий рядок у шапці колонок PIT/ZG — де саме в бланку PIT-ZG вписувати
   це число (напр. "Poz. 6 z PIT-ZG"), дивись pages/report_pages.py::
   _add_zg_position_labels. Трохи менше й світліше за основну назву колонки,
   щоб не сперечатись з нею за увагу. */
.pit38-poz-label {
    display: inline-block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: #78716c;
}

/* Панель "Czy posiadasz PIT-8C?" / "Czy masz straty z lat ubiegłych?" над
   таблицею PIT-38 — Akcje i Koszty. */
.pit38-adjustments-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    background: #fafaf9;
    border: 1px solid #e7e5e4;
    border-radius:4px;
    padding: 10px 16px;
    margin-bottom: 12px;
}
.pit38-adjustment-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pit38-adjustment-row label {
    font-size: 13px;
    color: #44403c;
}

/* Комірки C.20 / C.21 / D.30 — редаговані інпути. Задизейблені (за
   замовчуванням, поки не обрано "Tak" у перемикачі вище) виглядають
   сірими і некликабельними; коли увімкнені — біле поле з рамкою. */
.pit38-input {
    width: 100%;
    max-width: 130px;
    box-sizing: border-box;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    padding: 4px 8px;
    border: 1px solid #d6d3d1;
    border-radius:4px;
    background: #fff;
    color: #1c1917;
}
.pit38-input:disabled {
    background: #f5f5f4;
    color: #a8a29e;
    border-color: #e7e5e4;
    cursor: not-allowed;
}
.pit38-input:focus:not(:disabled) {
    outline: none;
    border-color: #4d7d5e;
    box-shadow: 0 0 0 2px rgba(63, 107, 79, 0.15);
}

/* Обгортка навколо .pit38-input — потрібна лише для позиціювання
   попередження нижче (position: relative), сама по собі невидима. */
.pit38-input-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 130px;
}

/* Маленьке попередження "Tylko cyfry — bez minusa i liter." — з'являється
   прямо під полем, поки користувач вводить мінус чи літери (обидва
   значення завжди невід'ємні, мінус там не потрібен ніколи). Той самий
   принцип позиціювання, що й .tooltip-box вище: position:absolute, щоб
   не розтягувати вузьку колонку таблиці (10% ширини). */
.pit38-input-warning {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
    color: #92400e;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius:4px;
    padding: 2px 6px;
    width: 130px;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    z-index: 5;
}
/* .table-responsive has overflow-x:auto, which (per the CSS overflow spec)
   also clips the vertical axis once any axis is non-visible — so the plain
   position:absolute rule above gets silently cut off. When shown, JS moves
   the warning out to <body> (position:fixed, computed from the input's
   on-screen position) and adds this class — same fix/pattern already used
   for .col-menu-dropdown / .col-menu-detached in base.html + style.css. */
.pit38-input-warning.pit38-warning-detached {
    position: fixed;
    right: auto;
    top: auto;
    margin-top: 0;
    z-index: 40;
}

/* Підфарбування комірки (не просто тексту) на основі знаку значення —
   "чи цей продаж/рядок був у плюс чи в мінус". table td має padding
   9px 13px (дивись правило "table td" вище) — span тут спеціально
   "з'їдає" цей padding від'ємним margin і повертає своїм власним, щоб
   ЗАЛИВКА покривала всю комірку, а не тільки текст всередині. Прозорий
   (напівпрозорий) відтінок — щоб не сперечався з чорним текстом поверх. */
.cell-fill-positive, .cell-fill-negative {
    display: block;
    margin: -9px -13px;
    padding: 9px 13px;
}
.cell-fill-positive { background: rgba(63, 107, 79, 0.14); }
.cell-fill-negative { background: rgba(220, 38, 38, 0.14); }

/* ===== СПІЛЬНА "РАМКА" ДЛЯ БУДЬ-ЯКОЇ ДІАГРАМИ (bar chart / donut row) ===== */
.chart-frame {
    border: 1px solid #e7e5e4;
    border-radius:4px;
    padding: 16px;
    margin-bottom: 20px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* ===== GROUPED BAR CHART (Przelewy: wpłaty/wypłaty) — два стовпчики на
   період, ОБИДВА ростуть вгору від спільної нижньої лінії (зелений —
   wpłaty, червоний — wypłaty), впритул один до одного. Раніше було
   "дивергентно" (зелений вгору / червоний вниз від нульової лінії
   посередині) — коли в періоді не було зняття коштів, під нульовою лінією
   лишалось велике порожнє поле аж до підпису місяця. Тепер порожнього
   місця немає — обидва стовпчики завжди ростуть від тієї самої нижньої
   межі, просто один з них може бути висотою 0. Чистий CSS, без JS;
   підказка при наведенні — той самий .tooltip-wrapper/.tooltip-box
   компонент, що й деінде в застосунку (дивись base.html — position:fixed
   на hover). ===== */
.bar-chart-wrap {
    width: 100%;
}
.bar-chart-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.bar-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
    flex: 1;
}
.bar-chart-zone {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}
.bar-chart-bar-pos, .bar-chart-bar-neg {
    width: 38%;
    min-width: 5px;
    min-height: 2px;
    border-radius:4px 4px 0 0;
    /* Хітбокс для .tooltip-wrapper — сам стовпчик і Є wrapper'ом, дивись
       _bar_chart.html: <div class="bar-chart-bar-pos tooltip-wrapper"> */
    position: relative;
    cursor: default;
}
.bar-chart-bar-pos { background: #4d7d5e; }
.bar-chart-bar-neg { background: #dc2626; }
.bar-chart-baseline {
    width: 100%;
    height: 1px;
    background: #d6d3d1;
}
.bar-chart-label {
    font-size: 11px;
    color: #78716c;
    margin-top: 4px;
    white-space: nowrap;
}
.bar-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: #44403c;
    margin-top: 10px;
}
.bar-chart-legend span.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius:4px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===== PORTFOLIO — KARTY PODSUMOWANIA (Wartość portfela / Zainwestowano /
   Zysk-strata / Wartość według waluty), nad diagramami "Skład portfela" ===== */
.portfolio-summary-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.portfolio-summary-card {
    flex: 1;
    min-width: 150px;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius:4px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.portfolio-summary-label {
    font-size: 12px;
    color: #78716c;
    font-weight: 600;
    margin: 0 0 8px;
}
.portfolio-summary-value {
    font-size: 21px;
    font-weight: 700;
    color: #1c1917;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.portfolio-summary-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius:4px;
}
.badge-positive { color: #4d7d5e; background: rgba(63, 107, 79, 0.12); }
.badge-negative { color: #dc2626; background: rgba(220, 38, 38, 0.12); }
.text-positive { color: #4d7d5e; }
.text-negative { color: #dc2626; }
.portfolio-summary-currency-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.portfolio-summary-currency-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #1c1917;
}
.portfolio-summary-currency-row span:first-child {
    color: #44403c;
    font-weight: 600;
}

/* ===== PORTFOLIO — "Główna tabela portfela": заголовки переносяться по
   словах, ДАНІ лишаються звичайного розміру (14px, як у всіх інших
   таблицях) — на відміну від .wrap-headers, який зменшує ОБИДВОЄ.
   table-layout:fixed з явною шириною кожної колонки (nth-child, той самий
   прийом, що вже є в .pit38-table нижче) — без цього auto-layout просто
   розтягує таблицю ширше за екран і .table-responsive показує
   горизонтальний повзунок, замість того щоб перенести текст заголовка. */
.portfolio-table table { table-layout: fixed; }
.portfolio-table table th {
    white-space: normal;
    word-break: normal;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.3;
}
.portfolio-table table th .col-header-cell { align-items: flex-start; }
.portfolio-table table td { overflow-wrap: break-word; }
.portfolio-table table th:nth-child(1)  { width: 7%; }   /* Ticker */
.portfolio-table table th:nth-child(2)  { width: 7%; }   /* Kategoria */
.portfolio-table table th:nth-child(3)  { width: 9%; }   /* Podkategoria */
.portfolio-table table th:nth-child(4)  { width: 8%; }   /* Kraj giełdy */
.portfolio-table table th:nth-child(5)  { width: 9%; }   /* Giełda */
.portfolio-table table th:nth-child(6)  { width: 6%; }   /* Waluta */
.portfolio-table table th:nth-child(7)  { width: 6%; }   /* Ilość */
.portfolio-table table th:nth-child(8)  { width: 9%; }   /* Koszt średni */
.portfolio-table table th:nth-child(9)  { width: 10%; }  /* Suma zakupu */
.portfolio-table table th:nth-child(10) { width: 9%; }   /* Cena aktualna */
.portfolio-table table th:nth-child(11) { width: 10%; }  /* Wartość aktualna */
.portfolio-table table th:nth-child(12) { width: 10%; }  /* Różnica */

/* ===== DONUT CHARTS (Portfolio: skład ETF/Akcje, tickery, waluty) ===== */
/* Чистий CSS conic-gradient + порожній центр — без жодної JS-бібліотеки,
   узгоджено з рештою застосунку (просте HTML/CSS, без нових залежностей).
   Підсвітка легенди при наведенні на сектор — невеликий JS у base.html
   (рахує кут курсора відносно центру кола), дивись коментар там. */
.donut-charts-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.donut-chart-card {
    flex: 0 1 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.donut-chart-wrap {
    width: 184px;
    height: 184px;
    position: relative;
    flex-shrink: 0;
}
.donut-chart {
    width: 100%;
    height: 100%;
    /* overflow:visible — щоб сектор, який трохи "виїжджає" (transform:
       translate, дивись .donut-slice-active) при наведенні на рядок легенди,
       не обрізався межами SVG viewBox. */
    overflow: visible;
}
.donut-slice {
    transition: transform 0.15s ease;
    cursor: default;
    /* Наведення на САМ сектор бублика НІЧОГО в самому бублику не міняє —
       тільки підсвічує відповідний рядок легенди нижче (.donut-legend-active,
       фон, без зміни розміру — дивись base.html і правило нижче). */
}
.donut-slice.donut-slice-active {
    /* "Виїжджання" сектора НАЗОВНІ — вмикається лише коли курсор на
       ВІДПОВІДНОМУ РЯДКУ ЛЕГЕНДИ (клас додає JS у base.html), не при
       наведенні на сам сектор. --dx/--dy — зсув уздовж променя від центру
       кола до середини дуги ЦЬОГО сектора, однаковий за довжиною для
       БУДЬ-ЯКОГО сектора (рахується в pages/report_pages.py,
       _donut_slice_offset()) — тому "виростання" виглядає рівномірно і для
       великого, і для маленького сектора (на відміну від попереднього
       transform: scale(), який масштабував сектори НЕрівномірно — великий
       сектор "розростався" помітно більше за малі). */
    transform: translate(var(--dx, 0px), var(--dy, 0px));
}
.donut-chart-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 106px;
    height: 106px;
    border-radius:50%;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
    pointer-events: none;
}
.donut-legend {
    list-style: none;
    width: 100%;
    font-size: 13px;
    color: #44403c;
    border: 1px solid #e7e5e4;
    border-radius:4px;
    padding: 10px 12px;
    background: #fafaf9;
}
.donut-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius:4px;
    background: transparent;
    transition: background-color 0.15s;
    cursor: default;
}
.donut-legend li.donut-legend-active {
    /* Підсвітка рядка легенди — ТІЛЬКИ фон, без зміни розміру/масштабу
       (раніше тут був transform: scale(), через який текст сусідніх
       колонок "рохзʼїжджався" при наведенні — рядок займав більше місця
       і штовхав решту). Спрацьовує і при наведенні на сам сектор бублика,
       і при наведенні на цей рядок (дивись base.html). */
    background: #f5f5f4;
}
.donut-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius:4px;
    flex-shrink: 0;
}
.donut-legend-pct {
    margin-left: auto;
    font-weight: 600;
    color: #78716c;
}

/* ===== TABLE SECTION TITLES (e.g. "Podsumowanie sprzedaży") ===== */
/* Same size/weight as the sidebar menu labels, for visual consistency across all tabs.
   margin-top дає видимий відступ МІЖ таблицями по всьому звіту (раніше таблиці
   стояли впритул одна до одної) — але ПЕРШИЙ заголовок на сторінці не повинен
   мати зайвого відступу зверху (там і так немає нічого вище), тому для нього
   є окремий модифікатор .table-section-title--first (margin-top: 0). */
.table-section-title {
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: #44403c;
    margin-top: 32px;
    margin-bottom: 8px;
}
.table-section-title--first {
    margin-top: 0;
}

/* ===== NARROW SIDE-BY-SIDE SUMMARY TABLES ===== */
/* Used when two small summary tables (few columns) sit next to each other —
   keeps them compact instead of stretching to the full page width */
.summary-table-pair {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.summary-table-pair .summary-table-col {
    flex: 0 1 320px;
    max-width: 320px;
    min-width: 200px;
}

/* Single summary table (no pair), now displayed HORIZONTALLY after transpose
   (row labels became column headers) — used for reconciliation preview on
   report_super_user.html: shrunk to fit its (few) columns and centered. */
.table-responsive.summary-table-single {
    display: table;
    margin: 0 auto;
    width: auto;
}
.summary-table-single table {
    width: auto;
}

/* Те саме, що .summary-table-single, але ФІКСОВАНА ширина 70% картки (у %,
   не px, — щоб однаково масштабувалось на будь-якому екрані) — саме цим
   класом (ДОДАТКОВО до .summary-table-single) позначені "Podsumowanie"
   на Przelewy, "Podsumowanie (PLN)" на Dywidendy й Inne koszty i przychody,
   щоб усі три мали ОДНАКОВУ ширину незалежно від того, скільки в кожній
   реально колонок (раніше кожна стискалась "по своєму контенту" —
   width:auto — і виходила різної ширини). Діаграма під таблицею на кожній
   із цих трьох сторінок підлаштовує свою ширину під ЦЮ таблицю через
   невеликий JS (вимірює реальну відрендерену ширину) — дивись
   report_cash.html/report_dividends.html/report_interest.html — тому їй
   окремо нічого міняти не треба, вона й так піде за новими 70%. */
.table-responsive.summary-table-70 {
    width: 70% !important;
}
.summary-table-70 table {
    width: 100% !important;
}

/* ===== TOOLBAR ROW (year selector + download buttons on the same line) ===== */
.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.report-toolbar .year-selector {
    margin-bottom: 0;
}
.report-toolbar .toolbar-downloads {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== SORTABLE + FILTERABLE TABLE HEADERS (Excel-style column menu) ===== */
/* Each <th> contains: column label + a small funnel/arrow icon. Clicking the
   icon toggles a dropdown with two sort links (ASC/DESC) and a checkbox list
   of every unique value in that column (multi-select) + Zastosuj/Wyczyść
   buttons. Opening/closing the dropdown is the ONLY client-side JS involved —
   submitting filters/sorting still reloads the page via a normal GET form. */
table th .col-header-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}
table th .col-label {
    color: inherit;
}
table th .col-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #a8a29e;
    font-size: 10px;
    border-radius:4px;
}
table th .col-menu-btn:hover { color: #44403c; background: #e7e5e4; }
table th .col-menu-btn.has-sort { color: #4d7d5e; }
table th .col-menu-btn.has-filter { color: #2563eb; }
table th .col-menu-btn.has-sort.has-filter { color: #4d7d5e; }

/* Base look of the dropdown — written WITHOUT a "table th" ancestor selector,
   because on open it gets temporarily moved into <body> (see toggleColMenu in
   base.html) to escape .table-responsive's overflow clipping; if these rules
   required a "table th" ancestor, the dropdown would lose all its styling
   the moment it's detached. */
.col-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius:4px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 8px;
    min-width: 200px;
    max-width: 260px;
    text-align: left;
    font-weight: 400;
    margin-top: 6px;
}
.col-menu-dropdown.open { display: block; }
.col-menu-dropdown.col-menu-detached { margin-top: 0; }
.col-menu-dropdown .col-sort-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f5f5f4;
    margin-bottom: 6px;
}
.col-menu-dropdown .col-sort-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius:4px;
    color: #44403c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.col-menu-dropdown .col-sort-link:hover { background: #f5f5f4; }
.col-menu-dropdown .col-sort-link.active { background: #f0f5ee; color: #4d7d5e; }
.col-menu-dropdown .col-filter-search {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid #e7e5e4;
    border-radius:4px;
    font-size: 12px;
}
.col-menu-dropdown .col-filter-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 8px;
}
.col-menu-dropdown .col-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius:4px;
    font-size: 12.5px;
    font-weight: 400;
    color: #44403c;
    cursor: pointer;
}
.col-menu-dropdown .col-filter-option:hover { background: #fafaf9; }
.col-menu-dropdown .col-filter-option input { margin: 0; cursor: pointer; }
.col-menu-dropdown .col-filter-actions {
    display: flex;
    gap: 6px;
}
.col-menu-dropdown .col-filter-btn {
    flex: 1;
    padding: 6px 8px;
    border-radius:4px;
    border: 1px solid #e7e5e4;
    background: #fff;
    color: #44403c;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.col-menu-dropdown .col-filter-btn.apply { background: #4d7d5e; border-color: #4d7d5e; color: #fff; }
.col-menu-dropdown .col-filter-btn.apply:hover { background: #3a5f45; }
.col-menu-dropdown .col-filter-btn.clear:hover { background: #f5f5f4; }

/* ===== PAGINATION BAR (row size selector + page navigation, under a table) ===== */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e7e5e4;
}
.page-size-select {
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-size-select label {
    font-size: 13px;
    color: #57534e;
}
.page-size-form { display: inline-flex; }
.page-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.page-range {
    font-size: 12px;
    color: #78716c;
    margin-right: 8px;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius:4px;
    border: 1px solid #e7e5e4;
    background: #fff;
    color: #44403c;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}
.page-btn:hover:not(.disabled) { background: #f5f5f4; border-color: #d6d3d1; }
.page-btn.active { background: #4d7d5e; border-color: #4d7d5e; color: #fff; font-weight: 600; }
.page-btn.disabled { opacity: 0.4; pointer-events: none; }
.page-ellipsis { color: #a8a29e; padding: 0 2px; }

/* ===== YEAR SELECTOR ===== */
.year-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.year-selector label {
    font-size: 13px;
    font-weight: 500;
    color: #57534e;
}

.year-selector select, .report-select {
    padding: 6px 10px;
    border-radius:4px;
    border: 1px solid #d6d3d1;
    font-size: 13px;
    background: #fff;
    color: #292524;
    cursor: pointer;
    font-family: inherit;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius:4px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-primary, .btn-success {
    background: linear-gradient(135deg, #6da283, #4d7d5e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(63, 107, 79,0.25);
}
.btn-primary:hover, .btn-success:hover {
    background: linear-gradient(135deg, #4d7d5e, #3a5f45);
    color: #fff;
}
.btn-premium {
    background: linear-gradient(135deg, #6da283, #4d7d5e);
    color: #fff;
}
.btn-secondary {
    background: rgba(255,255,255,0.85);
    color: #57534e;
    border: 1px solid #d6d3d1;
}
.btn-secondary:hover { background: #f5f5f4; color: #292524; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ===== ALERTS ===== */
.alert {
    padding: 12px 16px;
    border-radius:4px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}
.alert p { margin-bottom: 4px; }
.alert p:last-child { margin-bottom: 0; }

.alert-danger  { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border: 2px solid #f59e0b; border-left: 4px solid #f59e0b; }
.alert-success { background: #f0f5ee; color: #4d7d5e; border: 1px solid #cfdccb; }
.alert-info    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; text-align: center; }
/* pit38-info-box — довший інструктивний текст (кілька абзаців), а не
   коротке "даних немає" повідомлення — тут по центру виглядало б погано. */
#pit38-info-box { text-align: left; }

/* ===== DEMO BANNER ===== */
.demo-banner {
    background: #fff8e1;
    border: 2px solid #f9a825;
    border-radius:4px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.demo-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.demo-banner-title { font-weight: 700; font-size: 14px; color: #e65100; margin-bottom: 4px; }
.demo-banner-text { font-size: 13px; color: #5d4037; line-height: 1.6; }

/* ===== TOOLTIP ===== */
.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    border-radius:50%;
    background: #a8a29e;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    cursor: help;
    margin-left: 5px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.tooltip-icon:hover { background: #4d7d5e; }

/* .tooltip-box — це лише ПОЗИЦІЮВАННЯ і "хітбокс" (сам по собі прозорий,
   без фону). Видимість керується КЛАСОМ .tooltip-box-visible (JS у
   base.html), А НЕ через CSS :hover — бо сам .tooltip-box переноситься в
   position:fixed на інші екранні координати (щоб не губитись під
   overflow:hidden контейнерами), тобто візуально ВІДРИВАЄТЬСЯ від
   .tooltip-wrapper з реальним проміжком в кілька пікселів — а через цей
   проміжок курсор губить :hover ще ДО того, як доїде до самої підказки
   (особливо помітно, якщо всередині є посилання — клікнути не встигаєш).
   JS натомість ховає підказку з невеликою затримкою (300мс) і скасовує
   її, якщо курсор встиг заїхати в саму підказку — розрив більше неважливий. */
.tooltip-box {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: 8px;
    width: 330px;
    z-index: 999;
}

/* .tooltip-box-inner — це вже видима темна "бульбашка" підказки. */
.tooltip-box-inner {
    display: block;
    background: #292524;
    color: #fafaf9;
    padding: 8px 12px;
    border-radius:4px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-weight: 400;
}
.tooltip-box-inner a {
    color: #7dd3fc;
    text-decoration: underline;
}
.tooltip-box-inner a:hover { color: #bae6fd; }
.tooltip-box::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    border: 5px solid transparent;
    border-bottom-color: #292524;
    border-top: none;
}
.tooltip-box.tooltip-box-visible { display: block; }

/* ===== TABS ===== */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e7e5e4;
    margin-bottom: 20px;
}
.tab-btn {
    padding: 8px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #78716c;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
}
.tab-btn:hover { color: #4d7d5e; }
.tab-btn.active { color: #4d7d5e; border-bottom-color: #4d7d5e; font-weight: 600; }

/* ===== PROFILE ===== */
.profile-status-box {
    border-radius:4px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.status-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; }

.profile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    gap: 12px;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { color: #78716c; }
.profile-info-value { font-weight: 600; color: #1c1917; text-align: right; }

/* ===== FORM ===== */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 13px; font-weight: 500; color: #44403c; margin-bottom: 5px; }

.form-control {
    width: 100%;
    padding: 8px 12px;
    border-radius:4px;
    border: 1px solid #d6d3d1;
    font-size: 13px;
    color: #292524;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.form-control:focus {
    outline: none;
    border-color: #4d7d5e;
    box-shadow: 0 0 0 3px rgba(63, 107, 79,0.1);
}

/* ===== MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal-box {
    background: #fff;
    border-radius:4px;
    padding: 28px 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    position: relative;
    animation: modalIn 0.2s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(-10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #78716c;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}
.modal-close:hover { color: #1c1917; }

.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 20px;
}

/* ===== COOKIE BANNER ===== */
#cookieBanner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.97);
    color: #292524;
    padding: 10px 20px;
    border-radius:4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 13px;
    max-width: 90%;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
}
#cookieBanner a { color: #4d7d5e; text-decoration: none; font-weight: 500; }
#cookieBanner button {
    background: linear-gradient(135deg, #6da283, #4d7d5e);
    color: #fff;
    border: none;
    padding: 5px 16px;
    border-radius:4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
}

/* ===== LOCK ICON ===== */
.lock-icon { font-size: 13px; opacity: 0.6; filter: grayscale(1); color: #a8a29e; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .page-container { flex-direction: column; height: auto; overflow: visible; }
    .sidebar { width: 100%; min-width: unset; height: auto; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
    .main-content { height: auto; overflow-y: visible; padding: 12px; }
    .header { padding: 0.55rem 1rem; }
    .header-menu { gap: 0.75rem; font-size: 0.82rem; }
}