/* ============================================================
   V2 — App shell (sidebar + topbar)
   ============================================================
   Базовий каркас v2-сторінок: лівий sidebar (220px) + основна колонка
   з sticky-топбаром (48px) і скрол-зоною контенту.

   Структура:
     <body class="v2-shell">
       <aside class="v2-sidebar"> ... </aside>
       <div class="v2-main">
         <header class="v2-topbar"> ... </header>
         <main class="v2-page">
           ... контент сторінки ...
         </main>
       </div>
     </body>
   ============================================================ */

/* box-sizing reset */
.v2-shell,
.v2-shell *,
.v2-shell *::before,
.v2-shell *::after {
    box-sizing: border-box;
}

/* V2 pages own the full viewport. Keep this shared so individual templates do
   not drift back to the browser default 8px body margin. */
html,
body {
    margin: 0;
    min-height: 100%;
}

html {
    background: var(--bg-card);
}

/* === Layout root === */
.v2-shell {
    /* 204: назви модулів і пунктів («Налаштування», «Компенсація») вміщаються
       повністю навіть зі смугою прокрутки (власник 10.10). */
    --v2-sidebar-width: 204px;
    --v2-topbar-height: 48px;
    --v2-sidebar-bg: #f4fbf1;
    --v2-sidebar-bg-hover: #eaf6e6;
    --v2-sidebar-active-bg: #dff3d7;
    --v2-sidebar-active-border: #3f8a4d;
    --v2-sidebar-border: #d8e6d0;
    /* Координуємо sticky-tabs під топбаром автоматично */
    --v2-tabs-sticky-top: calc(var(--v2-topbar-height) - 2px);

    display: grid;
    grid-template-columns: var(--v2-sidebar-width) 1fr;
    min-height: 100vh;
    background: var(--bg-card);
    font-family: var(--font-sans-v2);
    color: var(--text-primary);
}

.v2-shell [hidden] {
    /* stylelint-disable-next-line declaration-no-important -- html-атрибут hidden має перемагати будь-який display компонента */
    display: none !important;
}

/* === Sidebar === */
.v2-sidebar {
    /* Експліцитна позиція в grid — захист від випадкових child-елементів
       (типу <svg> sprite) які можуть зміщувати auto-flow placement. */
    grid-column: 1;
    grid-row: 1;
    /* align-self: start — КРИТИЧНО для роботи position: sticky всередині grid.
       За замовчуванням grid-item має align-self: stretch, що розтягує його
       на всю висоту grid-row (з main-колонки можуть бути тисячі px),
       і sticky containing block стає рівним самому елементу — нема куди
       "приклеюватися". align-self: start дозволяє sticky працювати правильно. */
    align-self: start;
    background: var(--v2-sidebar-bg);
    border-right: 1px solid var(--v2-sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Захист від горизонтального скрола: жоден child не має розпирати sidebar.
       Якщо щось вилазить за 220px — обрізається (з ellipsis у тексту). */
    overflow-x: hidden;
    /* Тонкий vertical-scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--v2-sidebar-border) transparent;
}
.v2-sidebar::-webkit-scrollbar { width: 6px; }
.v2-sidebar::-webkit-scrollbar-track { background: transparent; }
.v2-sidebar::-webkit-scrollbar-thumb { background: var(--v2-sidebar-border); border-radius: var(--r-pill); }

/* Brand row */
.v2-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 2px 18px 16px;
    border-bottom: 0;
    margin-bottom: 6px;
}

.v2-sidebar-brand.enot-surface-paper {
    --logo-eye: var(--v2-sidebar-bg);
}

.v2-sidebar-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--text-inverse);
    display: grid;
    place-items: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    flex-shrink: 0;
}

.v2-sidebar-brand-name {
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

.v2-sidebar-brand-sub {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Search field у сайдбарі */
.v2-sidebar-search {
    margin: 0 14px 14px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--v2-sidebar-border);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    cursor: text;
    box-shadow: var(--shadow-xs-v2);
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.v2-sidebar-search:hover {
    border-color: var(--accent-bg-strong);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm-v2);
}
.v2-sidebar-search input {
    flex: 1;
    /* min-width: 0 — щоб flex міг стиснути input нижче його intrinsic content,
       інакше placeholder/текст розпирає search-блок за межі sidebar. */
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    outline: none;
    padding: 0;
}
.v2-sidebar-search .v2-i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.v2-sidebar-search .v2-kbd {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 1px 5px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-xs);
    background: var(--bg-card);
    margin-left: auto;
}

.v2-sidebar-nav {
    display: grid;
    /* minmax(0, 1fr): ширину меню задає сайдбар, а не найдовший пункт. Без цього
       сітка рівнялась на «Господарство» навіть у згорнутому модулі, і коли
       з'являлась смуга прокрутки (відкрито «Зв'язок»), усе праве - стрілки модулів
       і лічильники - зрізалось за краєм (власник 10.10). */
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding-bottom: 12px;
}

.v2-sidebar-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 2px 0 6px;
}

.v2-sidebar-group + .v2-sidebar-group {
    margin-top: 2px;
}

/* Group caption ("ГОЛОВНЕ", "ДОКУМЕНТИ І ФІНАНСИ" тощо) */
.v2-sidebar-section {
    padding: 7px 18px 5px;
    font-family: var(--font-sans-v2);
    font-size: var(--text-xs);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary);
    font-weight: var(--weight-semibold);
}

.v2-sidebar-group.is-active .v2-sidebar-section {
    color: var(--accent-text);
}

/* === Модуль меню (акордеон) ===
   <details>, а не JS-віджет: відкривається кліком, працює з клавіатури
   й лишається робочим, навіть якщо скрипт не виконався. Розгортання по
   наведенню свідомо не робимо — воно спрацьовує випадково під час руху
   миші до сусіднього пункту і недоступне з сенсорного екрана. */
.v2-nav-module + .v2-nav-module {
    margin-top: 2px;
}

.v2-nav-module-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    /* Праворуч вужче, ніж ліворуч: лівий край вирівняно з пошуком, а місце
       праворуч потрібне назві, стрілці й лічильнику. */
    margin: 0 6px 0 12px;
    padding: 7px 6px 7px 10px;
    border-radius: var(--r-lg);
    font-size: var(--text-sm);
    /* 600 у e-Ukraine немає - браузер малював Bold, і дев'ять модулів
       підряд кричали однаково. Акцент дає відкритий модуль, не товщина. */
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    /* Прибираємо типовий трикутник браузера — свій шеврон праворуч. */
    list-style: none;
    transition: background 0.12s, color 0.12s;
}

.v2-nav-module-head::-webkit-details-marker {
    display: none;
}

.v2-nav-module-head:hover {
    background: var(--v2-sidebar-bg-hover);
    color: var(--text-primary);
}

.v2-nav-module-head:focus-visible {
    outline: 2px solid var(--v2-sidebar-active-border);
    outline-offset: -2px;
}

.v2-nav-module.is-active > .v2-nav-module-head {
    color: var(--accent-text);
}

.v2-nav-module-head .v2-i {
    width: 16px;
    height: 16px;
    opacity: 0.78;
    flex-shrink: 0;
}

.v2-nav-module-label {
    /* Довга назва модуля не має розпирати сайдбар. min-width: 0 - щоб назва
       стискалась, а не виштовхувала стрілку: коли відкрито «Зв'язок», з'являється
       смуга прокрутки і стрілки зникали за краєм (власник 10.10). */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-nav-module-chev {
    margin-left: auto;
    opacity: 0.5;
    transition: transform 0.15s;
}

.v2-nav-module[open] > .v2-nav-module-head .v2-nav-module-chev {
    transform: rotate(180deg);
}

.v2-nav-module-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 2px 0 6px;
}

.v2-nav-module-body .v2-sidebar-link {
    /* Зсув показує вкладеність: пункт належить модулю над ним. */
    margin-left: 20px;
}

/* Довгий пункт модуля («Договори контрагентів») - у два рядки, а не з трикрапкою. */
.v2-nav-module-body .v2-sidebar-link-label {
    white-space: normal;
}

/* Link — звичайне посилання-навігації */
.v2-sidebar-link {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0 6px 0 12px;
    padding: 7px 6px 7px 10px;
    border-radius: var(--r-lg);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-left: 0;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.v2-sidebar-link:hover {
    background: var(--v2-sidebar-bg-hover);
    color: var(--text-primary);
}
.v2-sidebar-link.is-active {
    background: var(--v2-sidebar-active-bg);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px rgba(63, 138, 77, 0.18);
    font-weight: var(--weight-medium);
}

.v2-sidebar-link.is-active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: -12px;
    bottom: 8px;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--v2-sidebar-active-border);
}

.v2-sidebar-link .v2-i {
    width: 16px;
    height: 16px;
    color: currentColor;
    opacity: 0.78;
    flex-shrink: 0;
}
.v2-sidebar-link.is-active .v2-i {
    opacity: 1;
}

/* Лічильник всередині лінка (наприклад, кількість записів у розділі) */
.v2-sidebar-link .v2-badge-count {
    margin-left: auto;
    background: var(--bg-muted);
    color: var(--text-tertiary);
}
.v2-sidebar-link.is-active .v2-badge-count {
    background: var(--accent-bg-strong);
    color: var(--accent-text);
}

/* Footer-зона sidebar (опційно, для logout, версії) */
.v2-sidebar-footer {
    margin-top: auto;
    padding: 10px 0 14px;
    border-top: 1px solid var(--v2-sidebar-border);
}
.v2-sidebar-version {
    padding: 6px 12px 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* === Main column === */
.v2-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* щоб довгий контент не розпирав grid */
    background: var(--bg-card);
}

/* === Topbar === */
.v2-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--v2-topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 var(--s-7) 0 var(--s-5);
    background: var(--bg-card);
    border-bottom: 1px solid var(--v2-surface-border, var(--border-light));
    gap: var(--s-4);
}

.v2-topbar-crumbs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-md);
    color: var(--text-secondary);
    min-width: 0;
}

/* Реєстри ставили в «хлібні крихти» саму назву мережі - вона одна й та сама
   на кожній сторінці й нічого не каже. Місце віддаємо закладу. */
.v2-topbar-crumbs:has(> a:only-child[href="/"]) {
    visibility: hidden;
}
.v2-topbar-crumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.12s;
}
.v2-topbar-crumbs a:hover {
    color: var(--text-primary);
}
.v2-topbar-crumbs .sep {
    color: var(--text-muted);
    user-select: none;
}
.v2-topbar-crumbs .current {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
    /* truncate якщо breadcrumbs задовгі */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-shrink: 0;
    margin-left: auto;
}

.v2-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--r-sm);
    transition: background 0.12s;
}
.v2-topbar-user:hover {
    background: var(--bg-hover);
}

.v2-institution-scope {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 280px;
}

.v2-institution-scope-menu {
    position: relative;
}

/* Вибір закладу - звичайне поле вибору, а не сіра «пігулка»: рамка,
   значок будівлі, назва, шеврон. Обрано один заклад - зелене тло: списки
   нижче вже відфільтровані, і це видно без читання. */
.v2-institution-scope-menu > summary,
.v2-institution-scope:not(.is-selectable) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 300px;
    height: 30px;
    padding: 0 8px 0 9px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--text-sm);
    list-style: none;
}

.v2-institution-scope-menu > summary {
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.v2-institution-scope-menu > summary::-webkit-details-marker {
    display: none;
}

.v2-institution-scope-menu > summary::marker {
    content: "";
}

.v2-institution-scope-menu[open] > summary,
.v2-institution-scope-menu > summary:hover {
    border-color: var(--text-tertiary);
}

.v2-institution-scope-menu > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.v2-institution-scope.is-filtered .v2-institution-scope-menu > summary,
.v2-institution-scope.is-filtered:not(.is-selectable) {
    border-color: var(--accent-bg-strong);
    background: var(--accent-bg);
    color: var(--accent-text);
}

.v2-institution-scope-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.v2-institution-scope.is-filtered .v2-institution-scope-icon {
    color: var(--accent-text);
}

.v2-institution-scope-chev {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.12s ease;
}

.v2-institution-scope-menu[open] .v2-institution-scope-chev {
    transform: rotate(180deg);
}

.v2-institution-scope strong {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-weight: var(--weight-medium);
}

.v2-institution-scope-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 30;
    display: grid;
    gap: 3px;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.v2-institution-scope-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 32px;
    padding: 5px 9px;
    border-radius: var(--r-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.v2-institution-scope-panel a .v2-i {
    width: 14px;
    height: 14px;
    color: var(--accent-text);
    visibility: hidden;
}

.v2-institution-scope-panel a:hover {
    background: var(--bg-hover);
}

.v2-institution-scope-panel a.is-active {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
}

.v2-institution-scope-panel a.is-active .v2-i {
    visibility: visible;
}

.v2-topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-bg-strong);
    color: var(--accent-text);
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

/* === Page content area === */
.v2-page {
    flex: 1;
    min-width: 0;
    padding: var(--s-7) var(--s-8);
    background: var(--bg-card);
}

/* Variant: full-bleed page (без бокових padding для табл/реєстрів) */
.v2-page-flush {
    padding: 0;
}

/* Variant: tight page padding — для реєстрів щоб таблиця займала більше viewport */
.v2-page-tight {
    padding: var(--s-5) var(--s-6);
}

/* === Density === */
[data-v2-density="compact"].v2-shell {
    --v2-topbar-height: 42px;
}
[data-v2-density="compact"] .v2-page {
    padding: var(--s-5) var(--s-6);
}
[data-v2-density="compact"] .v2-sidebar-link {
    min-height: 28px;
    padding: 4px 10px;
    font-size: var(--text-sm);
}

[data-v2-density="compact"] .v2-sidebar-section {
    padding-top: 4px;
    padding-bottom: 2px;
}

[data-v2-density="compact"] .v2-sidebar-nav {
    gap: 4px;
}

[data-v2-density="compact"] .v2-sidebar-group {
    gap: 1px;
    padding: 1px 0 4px;
}


/* === Responsive — на вузьких екранах sidebar згортаємо до значків.
   На телефоні (до 720px) меню відкривається кнопкою «☰» поверх сторінки
   повним, тож ця смуга значків його не стосується. */
@media (min-width: 721px) and (max-width: 1100px) {
    .v2-shell {
        --v2-sidebar-width: 72px;
    }

    .v2-sidebar {
        padding: 12px 0;
    }

    .v2-sidebar-brand {
        justify-content: center;
        padding: 2px 0 14px;
    }

    .v2-sidebar-brand .enot-wm__text {
        display: none;
    }

    .v2-sidebar-search {
        justify-content: center;
        width: 40px;
        min-height: 34px;
        margin: 0 auto 10px;
        padding: 0;
    }

    .v2-sidebar-search input {
        display: none;
    }

    .v2-sidebar-search .v2-i {
        width: 16px;
        height: 16px;
    }

    .v2-sidebar-nav {
        gap: 3px;
    }

    .v2-sidebar-group {
        gap: 3px;
        padding: 3px 0;
    }

    .v2-sidebar-section {
        height: 1px;
        margin: 5px 18px;
        padding: 0;
        overflow: hidden;
        background: var(--v2-sidebar-border);
        color: transparent;
    }

    [data-v2-density="compact"] .v2-sidebar-section {
        height: 1px;
        margin: 5px 18px;
        padding: 0;
    }

    .v2-sidebar-link {
        justify-content: center;
        min-height: 38px;
        margin: 0 10px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    /* Вузький сайдбар: від модуля лишається сама іконка. */
    .v2-nav-module-head {
        justify-content: center;
        min-height: 38px;
        margin: 0 10px;
        padding: 0;
        gap: 0;
    }

    .v2-nav-module-label,
    .v2-nav-module-chev {
        display: none;
    }

    .v2-nav-module-body .v2-sidebar-link {
        margin-left: 10px;
    }

    [data-v2-density="compact"] .v2-sidebar-link {
        min-height: 38px;
        padding: 0;
        font-size: 0;
    }

    .v2-sidebar-link .v2-i {
        width: 17px;
        height: 17px;
    }

    .v2-sidebar-link .v2-badge-count {
        display: none;
    }

    .v2-sidebar-link.is-active::after {
        right: -10px;
    }

    .v2-topbar {
        padding: 0 var(--s-5);
    }
}

@media (max-width: 720px) {
    .v2-shell {
        grid-template-columns: 1fr;
    }
    .v2-sidebar {
        display: none;
    }
    /* «☰» відкриває меню поверх сторінки - на телефоні іншого шляху
       до розділів не було зовсім. */
    body.v2-nav-open .v2-sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(280px, 86vw);
        height: 100%;
        box-shadow: var(--shadow-lg);
    }
    body.v2-nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgb(20 24 20 / 32%);
    }
    .v2-institution-scope strong {
        max-width: 38vw;
    }
    /* Шлях розділів на телефоні не вміщається - лишаємо «назад» і поточне. */
    .v2-topbar-crumbs > a:not(.v2-btn),
    .v2-topbar-crumbs > .sep {
        display: none;
    }
    /* A-011: на телефоні шапка не ширша за екран - лишаються заклад, час і
       аватар; ім'я та дата є на ширших екранах. */
    .v2-topbar {
        padding: 0 var(--s-4);
        gap: var(--s-3);
    }
    /* Праворуч на телефоні лише значки (ім'я сховано) - вони не стискаються, місце
       віддають заклад і шлях: інакше значки вилазили за екран (07.10). */
    .v2-topbar-right {
        gap: var(--s-3);
        min-width: 0;
        flex-shrink: 0;
    }
    .v2-topbar-user > span:not(.v2-topbar-avatar),
    .v2-topbar-clock-date,
    .v2-topbar-clock-sub {
        display: none;
    }
    /* Позначка згорнутих попереджень (Сп-2) важливіша за годинник: на 375 px шапка
       з нею вилазила за екран на 30 px (07.10). */
    .v2-topbar-right:has(.v2-notice-chip:not([hidden])) .v2-topbar-clock {
        display: none;
    }
}

/* Значок «скільки нового» в пункті меню: рахунок, а не крапка —
   «є щось нове» замало, коли треба вирішити, чи йти туди зараз. */
/* Назва пункту стискається з трикрапкою, а лічильник - ніколи: смуга прокрутки
   меню закривала частину числа (власник 10.10). */
.v2-sidebar-link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-nav-badge {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: var(--r-pill);
    background: var(--v2-sidebar-active-bg);
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 16px;
    text-align: center;
}
.v2-sidebar-link.is-active .v2-nav-badge {
    background: var(--accent-primary, var(--v2-sidebar-active-border));
    color: var(--bg-card);
}

/* === «☰»: сховати меню ===
   Замість значка «на весь екран» над кожною таблицею - одна кнопка на
   початку верхньої смуги. Сховане меню віддає свою ширину сторінці на
   будь-якому розділі, і людина знає, де цей перемикач шукати. */
.v2-nav-toggle {
    flex-shrink: 0;
    color: var(--text-secondary);
}

@media (min-width: 721px) {
    body.v2-nav-hidden.v2-shell {
        --v2-sidebar-width: 0px;
    }
    body.v2-nav-hidden .v2-sidebar {
        display: none;
    }
}

/* === «⤢»: повний екран ===
   Для роботи з великою таблицею: зникають меню, верхня смуга, назва й
   вкладки розділу; пошук, фільтри й таблиця лишаються й отримують увесь
   екран. Вихід - «Згорнути» в правому верхньому куті або Esc.
   Fullscreen API не використовуємо: у вбудованому браузері він мовчки не
   спрацьовує і малює чорне тло. */
.v2-fullscreen-exit {
    display: none;
}

body.v2-fullscreen .v2-sidebar,
body.v2-fullscreen .v2-topbar,
body.v2-fullscreen .v2-registry-title,
body.v2-fullscreen .v2-rhead,
body.v2-fullscreen .v2-card-head,
body.v2-fullscreen .v2-tabs {
    display: none;
}

body.v2-fullscreen.v2-shell {
    --v2-sidebar-width: 0px;
}

body.v2-fullscreen .v2-page {
    padding-top: var(--s-4);
    padding-left: var(--s-4);
    padding-right: var(--s-4);
}

body.v2-fullscreen .v2-fullscreen-exit {
    display: inline-flex;
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 70;
    box-shadow: var(--shadow-sm-v2, 0 1px 3px rgb(0 0 0 / 12%));
}

@media (max-width: 720px) {
    .v2-fullscreen-toggle {
        display: none;
    }
}

@media print {
    .v2-nav-toggle,
    .v2-fullscreen-toggle,
    .v2-fullscreen-exit {
        display: none;
    }
}

/* Запас під смугу збереження (100 px у картках здобувача, представника, закладу) -
   лише коли смуга є. На вкладках без неї (Журнал змін, Документи…) це була біла
   смуга під таблицею і зайва прокрутка сторінки (власник 07.10). */
body.v2-shell main.v2-page:not(:has(.v2-stickybar-fixed, .v2-wizard-stickybar)) {
    padding-bottom: var(--s-5);
}