/* ============================================================ V2 — App shell (sidebar + topbar) ============================================================ Базовий каркас v2-сторінок: лівий sidebar (220px) + основна колонка з sticky-топбаром (48px) і скрол-зоною контенту. Структура:
...
... контент сторінки ...
============================================================ */ /* 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 { --v2-sidebar-width: 190px; --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-елементів (типу 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: 10px; 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: 10px; 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; gap: 7px; padding-bottom: 12px; } .v2-sidebar-group { display: grid; 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: 11px; 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); } /* === Модуль меню (акордеон) ===
, а не JS-віджет: відкривається кліком, працює з клавіатури й лишається робочим, навіть якщо скрипт не виконався. Розгортання по наведенню свідомо не робимо — воно спрацьовує випадково під час руху миші до сусіднього пункту і недоступне з сенсорного екрана. */ .v2-nav-module + .v2-nav-module { margin-top: 2px; } .v2-nav-module-head { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0 12px; padding: 7px 10px; border-radius: var(--r-lg); font-size: var(--text-sm); font-weight: var(--weight-semibold); 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 { /* Довга назва модуля не має розпирати сайдбар. */ 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; gap: 2px; padding: 2px 0 6px; } .v2-nav-module-body .v2-sidebar-link { /* Зсув показує вкладеність: пункт належить модулю над ним. */ margin-left: 24px; } /* Link — звичайне посилання-навігації */ .v2-sidebar-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0 12px; padding: 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-semibold); } .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); } /* === 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: space-between; padding: 0 var(--s-7); background: var(--bg-card); border-bottom: 1px solid var(--v2-surface-border, var(--border-light)); gap: var(--s-5); } .v2-topbar-crumbs { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-md); color: var(--text-secondary); min-width: 0; } .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; } .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: 8px; min-width: 0; max-width: 280px; height: 30px; padding: 0 9px; border: 1px solid var(--border-light); border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg-muted) 78%, var(--bg-card)); color: var(--text-secondary); font-size: 12px; list-style: none; } .v2-institution-scope-menu > summary { cursor: pointer; } .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(--accent-bg-strong); background: var(--accent-bg); } .v2-institution-scope-menu .v2-i { width: 12px; height: 12px; color: var(--text-muted); transition: transform 0.12s ease; } .v2-institution-scope-menu[open] .v2-i { transform: rotate(180deg); } .v2-institution-scope-label { color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .v2-institution-scope strong { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .v2-institution-scope-panel { position: absolute; right: 0; top: calc(100% + 7px); 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; min-height: 30px; padding: 5px 9px; border-radius: var(--r-md); color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: var(--weight-medium); white-space: nowrap; } .v2-institution-scope-panel a:hover, .v2-institution-scope-panel a.is-active { background: var(--accent-bg); color: var(--accent-text); } .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: 11px; 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 згортаємо. */ /* Поки демо-вʼюпорт широкий, лишимо як placeholder для майбутнього. */ @media (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; /* Тут потім додамо drawer-логіку. */ } } /* Значок «скільки нового» в пункті меню: рахунок, а не крапка — «є щось нове» замало, коли треба вирішити, чи йти туди зараз. */ .v2-nav-badge { margin-left: auto; min-width: 18px; padding: 1px 6px; 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); }