/* ============================================================
   V2 — Side preview panel (Pattern 01)
   ============================================================
   Права док-панель (~360px) що відкривається при кліку на рядок
   реєстру. Показує summary + actions (Відкрити / Редагувати / PDF).

   Структура:
     <aside class="v2-sidepanel">
       <header class="v2-sidepanel-head">
         <div>
           <div class="v2-sidepanel-eyebrow">№253/О</div>
           <h3 class="v2-sidepanel-title">Ковальчук Софія</h3>
         </div>
         <button class="v2-sidepanel-close" aria-label="Закрити">×</button>
       </header>
       <div class="v2-sidepanel-body">
         <div class="v2-sidepanel-row"><div class="k">Заклад</div><div class="v">SGE</div></div>
         …
       </div>
       <footer class="v2-sidepanel-foot">
         <button class="v2-btn v2-btn-secondary">PDF</button>
         <button class="v2-btn v2-btn-primary">Відкрити</button>
       </footer>
     </aside>

   Розміщення:
     .v2-sidepanel-fixed   — fixed до viewport (правий край, на всю висоту);
                              overlay-mode для модальних preview
     .v2-sidepanel-docked  — position absolute всередині relative-контейнера
                              (типове використання: docked у tablewrap)
   За замовчуванням position: relative (інлайн поруч з таблицею у grid).
   ============================================================ */

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

/* === Container === */
.v2-sidepanel {
    width: 360px;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md-v2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* За замовчуванням не позиціонується — стає інлайн-блоком поряд з таблицею.
       Для overlay-варіантів див. модифікатори нижче. */
}

/* Variant: docked всередині positioned-контейнера (наприклад, праворуч у tablewrap) */
.v2-sidepanel-docked {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    bottom: var(--s-2);
    border-radius: var(--v2-surface-radius, var(--r-md));
    border-color: var(--v2-surface-border, var(--border-light));
    box-shadow: var(--shadow-lg-v2);
}

/* Variant: fixed — overlay поверх усього main-area, повна висота viewport */
.v2-sidepanel-fixed {
    position: fixed;
    top: calc(var(--v2-topbar-height, 0) + var(--s-2));
    right: var(--s-2);
    bottom: var(--s-2);
    border-radius: var(--v2-surface-radius, var(--r-md));
    border-color: var(--v2-surface-border, var(--border-light));
    box-shadow: var(--shadow-lg-v2);
    z-index: 8; /* нижче за topbar(10), вище за tabs(4) і stickybar(5) */
}

/* === Head === */
.v2-sidepanel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.v2-sidepanel-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.v2-sidepanel-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.v2-sidepanel-meta {
    margin-top: var(--s-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Close × */
.v2-sidepanel-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -2px -2px 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.v2-sidepanel-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.v2-sidepanel-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.v2-sidepanel-close svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* === Body — скрол-зона з k/v рядками === */
.v2-sidepanel-body {
    flex: 1;
    min-height: 0;
    padding: var(--s-3) var(--s-6);
    overflow-y: auto;
    /* тонкий scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.v2-sidepanel-body::-webkit-scrollbar { width: 6px; }
.v2-sidepanel-body::-webkit-scrollbar-track { background: transparent; }
.v2-sidepanel-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--r-pill); }

/* k/v рядок з dashed-роздільником */
.v2-sidepanel-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    font-size: var(--text-md);
    border-bottom: 1px dashed var(--border-subtle);
}
.v2-sidepanel-row:last-child {
    border-bottom: 0;
}
.v2-sidepanel-row .k {
    color: var(--text-tertiary);
    overflow-wrap: anywhere;
}
.v2-sidepanel-row .v {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Section title всередині body (для групування) */
.v2-sidepanel-section-title {
    margin: var(--s-5) 0 var(--s-2);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border-subtle);
}
.v2-sidepanel-section-title:first-child {
    margin-top: 0;
}

/* === Foot — sticky bottom з action-кнопками === */
.v2-sidepanel-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-6);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
    flex-shrink: 0;
}

/* === Density === */
[data-v2-density="compact"] .v2-sidepanel {
    width: 320px;
}
[data-v2-density="compact"] .v2-sidepanel-head {
    padding: var(--s-4) var(--s-5);
}
[data-v2-density="compact"] .v2-sidepanel-body {
    padding: var(--s-2) var(--s-5);
}
[data-v2-density="compact"] .v2-sidepanel-row {
    padding: var(--s-3) 0;
    font-size: var(--text-sm);
    grid-template-columns: 90px 1fr;
}

[data-v2-density="spacious"] .v2-sidepanel {
    width: 400px;
}
[data-v2-density="spacious"] .v2-sidepanel-head {
    padding: var(--s-6) var(--s-7);
}
[data-v2-density="spacious"] .v2-sidepanel-body {
    padding: var(--s-4) var(--s-7);
}