/* ============================================================
   V2 — Popover (generic dropdown / column-manager / filter-dropdown)
   ============================================================
   Контейнер плаваючої панелі що відкривається на клік біля trigger-а.
   Використовується для:
   - Filter chip dropdowns (вибір значень фільтра)
   - Column visibility manager
   - User menu / context menu
   - Tooltip-like hints (без стрілки)

   Структура:
     <div class="v2-popover-host">
       <button class="v2-filterchip" data-popover-trigger="myPopover">…</button>
       <div class="v2-popover" id="myPopover" hidden>
         <div class="v2-popover-head">…</div>
         <div class="v2-popover-body">…</div>
         <div class="v2-popover-foot">…</div>
       </div>
     </div>

   Position: за замовчуванням `position: absolute` під trigger-ом.
   JS відповідає за show/hide + позицію (бо CSS-only positioning не вистачає
   для всіх кейсів).
   ============================================================ */

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

/* ============================================================
   HOST — wrap trigger + popover; задає relative для absolute popover
   ============================================================ */
.v2-popover-host {
    position: relative;
    display: inline-block;
}

/* ============================================================
   POPOVER container
   ============================================================ */
.v2-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    min-width: 220px;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg-v2);
    padding: var(--s-3);
    /* Анімація появи */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.v2-popover[hidden] {
    display: none;
}

.v2-popover.is-open {
    opacity: 1;
    transform: translateY(0);
}

/* Variant: align right (трігер ближче до правого краю) */
.v2-popover-right {
    left: auto;
    right: 0;
}

/* Variant: drop-up (popover над trigger-ом) */
.v2-popover-up {
    top: auto;
    bottom: calc(100% + 4px);
    transform: translateY(4px);
}
.v2-popover-up.is-open {
    transform: translateY(0);
}

/* ============================================================
   HEAD / BODY / FOOT
   ============================================================ */
.v2-popover-head {
    padding: var(--s-2) var(--s-3) var(--s-3);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--s-2);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.v2-popover-body {
    max-height: 360px;
    overflow-y: auto;
    /* тонкий scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.v2-popover-body::-webkit-scrollbar { width: 6px; }
.v2-popover-body::-webkit-scrollbar-track { background: transparent; }
.v2-popover-body::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--r-pill); }

.v2-popover-foot {
    padding: var(--s-3) var(--s-3) var(--s-2);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    justify-content: flex-end;
}

/* ============================================================
   POPOVER ROW — для menu items / option list
   ============================================================ */
.v2-popover-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 5px var(--s-3);
    border-radius: var(--r-xs);
    font-size: var(--text-md);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease;
    user-select: none;
}
.v2-popover-row:hover:not(.is-disabled) {
    background: var(--bg-hover);
}
.v2-popover-row:focus-visible {
    outline: none;
    background: var(--bg-hover);
    box-shadow: var(--focus-ring);
}
.v2-popover-row.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
    font-weight: var(--weight-medium);
}
.v2-popover-row.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon column всередині row */
.v2-popover-row .v2-i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--text-tertiary);
}
.v2-popover-row.is-active .v2-i {
    color: var(--accent-text);
}

/* Drag handle для column manager */
.v2-popover-row .v2-popover-grip {
    color: var(--text-muted);
    cursor: grab;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Checkbox ліворуч (для multi-select / column visibility) */
.v2-popover-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Right-side accessory (label/count/chev) */
.v2-popover-row-aside {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* ============================================================
   POPOVER SECTION — для груп items (наприклад "Колір" / "Розмір")
   ============================================================ */
.v2-popover-section {
    padding: var(--s-2) var(--s-3) var(--s-1);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: var(--s-2);
}
.v2-popover-section:first-child {
    margin-top: 0;
}

/* ============================================================
   POPOVER SEARCH input (для filter dropdowns з пошуком)
   ============================================================ */
.v2-popover-search {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--s-2);
    margin-left: calc(-1 * var(--s-3));
    margin-right: calc(-1 * var(--s-3));
    margin-top: calc(-1 * var(--s-3));
}
.v2-popover-search .v2-i {
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.v2-popover-search input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-sm);
    outline: none;
}
.v2-popover-search input::placeholder {
    color: var(--text-muted);
}

/* ============================================================
   BACKDROP — невидимий захоплювач кліків поза popover
   (для close on outside click — використовується JS)
   ============================================================ */
.v2-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
    cursor: default;
}

/* ============================================================
   DENSITY
   ============================================================ */
[data-v2-density="compact"] .v2-popover {
    padding: var(--s-2);
}
[data-v2-density="compact"] .v2-popover-row {
    padding: 3px var(--s-3);
    font-size: var(--text-sm);
}