/* ============================================================
   URBINO · POPOVER
   Anchored floating surface. Foundational primitive — used by
   filter popovers, dropdown menus, column choosers, date pickers.

   The CSS handles surface + slots + show/hide. *Positioning*
   (anchor detection, viewport clipping, flip on overflow) is
   consumer JS (Floating UI / Popper recommended).

   Composition (free-form):
     .u-popover
       ├─ .u-popover__header  — optional title row
       ├─ .u-popover__body    — main content
       └─ .u-popover__footer  — optional action row

   Or as a menu:
     .u-popover .u-popover--menu
       └─ .u-popover-menu (role="menu")
            ├─ .u-popover-menu__section-label
            ├─ .u-popover-menu__item (role="menuitem") × N
            └─ .u-popover-menu__divider
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.u-popover {
  position: absolute;                 /* default; consumer JS sets top/left */
  z-index: var(--u-popover-z);
  background: var(--u-popover-bg);
  color: var(--u-popover-fg);
  border: var(--u-popover-border);
  border-radius: var(--u-popover-radius);
  box-shadow: var(--u-popover-shadow);
  padding: var(--u-popover-py) var(--u-popover-px);
  min-width: var(--u-popover-min-width);
  max-width: var(--u-popover-max-width);
  font-family: var(--u-font-sans);
  font-size: 13px;
  color: var(--u-fg-1);
  box-sizing: border-box;
  outline: none;
  transition:
    opacity var(--u-dur-fast) var(--u-ease-out),
    transform var(--u-dur-fast) var(--u-ease-out);
}
.u-popover[hidden],
.u-popover[aria-hidden="true"] { display: none; }


/* ============================================================
   SLOTS (free-form composition)
   Optional — most popovers don't need a header/footer.
   ============================================================ */

.u-popover__header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u-fg-3);
  padding: 0 var(--u-space-1) var(--u-space-2);
  border-bottom: 1px solid var(--u-divider);
  margin: 0 calc(var(--u-popover-px) * -1) var(--u-space-2);
  padding-left: var(--u-popover-px);
  padding-right: var(--u-popover-px);
}

.u-popover__body {
  display: flex;
  flex-direction: column;
  gap: var(--u-popover-gap);
}

.u-popover__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-space-2);
  padding-top: var(--u-space-2);
  margin: var(--u-space-2) calc(var(--u-popover-px) * -1) 0;
  padding-left: var(--u-popover-px);
  padding-right: var(--u-popover-px);
  border-top: 1px solid var(--u-divider);
}


/* ============================================================
   PADDING MODIFIERS
   ============================================================ */

.u-popover--p-0 { padding: 0; }                 /* for full-bleed lists / menus */


/* ============================================================
   ANCHOR / SIDE MODIFIERS — for the arrow only
   The actual positioning is consumer JS; these classes pair with
   the arrow pseudo-element to point at the anchor.
   ============================================================ */

.u-popover--arrow {
  /* Reserve space so the arrow doesn't clip on rounded corners */
}
.u-popover--arrow::before {
  content: "";
  position: absolute;
  width: var(--u-popover-arrow-size);
  height: var(--u-popover-arrow-size);
  background: var(--u-popover-bg);
  border: var(--u-popover-border);
  transform: rotate(45deg);
}

/* Arrow pointing UP — popover is below its anchor */
.u-popover--arrow.u-popover--top::before {
  top: calc(var(--u-popover-arrow-size) * -0.5 - 1px);
  left: var(--u-space-4);
  border-right: 0;
  border-bottom: 0;
}
/* Arrow pointing DOWN — popover is above its anchor */
.u-popover--arrow.u-popover--bottom::before {
  bottom: calc(var(--u-popover-arrow-size) * -0.5 - 1px);
  left: var(--u-space-4);
  border-left: 0;
  border-top: 0;
}
/* Arrow pointing LEFT — popover is to the right of its anchor */
.u-popover--arrow.u-popover--right::before {
  left: calc(var(--u-popover-arrow-size) * -0.5 - 1px);
  top: var(--u-space-4);
  border-right: 0;
  border-top: 0;
}
/* Arrow pointing RIGHT — popover is to the left of its anchor */
.u-popover--arrow.u-popover--left::before {
  right: calc(var(--u-popover-arrow-size) * -0.5 - 1px);
  top: var(--u-space-4);
  border-left: 0;
  border-bottom: 0;
}


/* ============================================================
   MENU VARIANT — list of choices
   .u-popover .u-popover--menu carries a .u-popover-menu inside.
   ============================================================ */

.u-popover--menu {
  padding: var(--u-popover-menu-py) var(--u-popover-menu-px);
  min-width: 200px;
}

.u-popover-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1px;
}

.u-popover-menu__item {
  display: flex;
  align-items: center;
  gap: var(--u-popover-menu-item-gap);
  padding: var(--u-popover-menu-item-py) var(--u-popover-menu-item-px);
  border-radius: var(--u-popover-menu-item-radius);
  background: transparent;
  border: 0;
  font-family: var(--u-font-sans);
  font-size: var(--u-popover-menu-item-font);
  color: var(--u-fg-1);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 28px;
  transition: background var(--u-dur-fast) var(--u-ease-out), color var(--u-dur-fast) var(--u-ease-out);
}
.u-popover-menu__item:hover,
.u-popover-menu__item.is-hover {
  background: var(--u-surface-alt);
  color: var(--u-fg-1);
}
.u-popover-menu__item:focus-visible,
.u-popover-menu__item.is-focus {
  outline: none;
  background: var(--u-surface-alt);
  box-shadow: inset 0 0 0 2px var(--u-primary);
}
.u-popover-menu__item.is-selected,
.u-popover-menu__item[aria-checked="true"] {
  background: var(--u-primary-soft);
  color: var(--u-primary-press);
  font-weight: 600;
}
.u-popover-menu__item[disabled],
.u-popover-menu__item.is-disabled {
  color: var(--u-fg-4);
  cursor: not-allowed;
  pointer-events: none;
}

/* Slot helpers */
.u-popover-menu__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  color: var(--u-fg-3);
}
.u-popover-menu__icon img,
.u-popover-menu__icon svg { width: 100%; height: 100%; display: block; }
.u-popover-menu__item:hover .u-popover-menu__icon,
.u-popover-menu__item.is-selected .u-popover-menu__icon { color: inherit; }

.u-popover-menu__label { flex: 1; min-width: 0; }

.u-popover-menu__shortcut {
  margin-left: var(--u-space-4);
  font-family: var(--u-font-mono);
  font-size: 11px;
  color: var(--u-fg-3);
  font-variant-numeric: tabular-nums;
}

.u-popover-menu__check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--u-primary);
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.u-popover-menu__check img,
.u-popover-menu__check svg {
  width: 100%;
  height: 100%;
  display: block;
}
.u-popover-menu__item[aria-checked="true"] .u-popover-menu__check,
.u-popover-menu__item.is-selected .u-popover-menu__check { visibility: visible; }

/* Section label */
.u-popover-menu__section-label {
  padding: var(--u-popover-menu-section-py) var(--u-popover-menu-item-px);
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-popover-menu-section-color);
  cursor: default;
  user-select: none;
}

/* Divider row */
.u-popover-menu__divider {
  height: 1px;
  background: var(--u-divider);
  margin: var(--u-space-1) calc(var(--u-popover-menu-item-px) * -1 + 2px);
  list-style: none;
}


/* ============================================================
   ENTRY / EXIT ANIMATION HOOKS
   Direction-aware — pair with the side modifier.
   ============================================================ */

.u-popover--enter { opacity: 0; transform: scale(0.96); }
.u-popover--top.u-popover--enter    { transform: translateY(-4px); }
.u-popover--bottom.u-popover--enter { transform: translateY(4px); }
.u-popover--right.u-popover--enter  { transform: translateX(-4px); }
.u-popover--left.u-popover--enter   { transform: translateX(4px); }

.u-popover--leave { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .u-popover { transition: opacity var(--u-dur-fast); }
  .u-popover--enter, .u-popover--leave { transform: none; }
}