/* WrapServicer v2 — Shared UI primitives.
 * Layered on top of Tailwind utilities and brand.css design tokens.
 * All selectors are scoped to .ui-* classes and [data-ui-*] hooks so this
 * file cannot bleed into unrelated templates.
 *
 * Token fallback convention (matches portal.css):
 *   var(--color-ink-*, #hex)   Tailwind-generated tokens from base.html
 *   var(--ws-shadow-*, css)    brand.css custom properties
 *   Hex/css fallback keeps cascade working in email/PDF renderers.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   STICKY ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-sticky-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.ui-sticky-action-bar__surface {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border-top: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: var(--ws-radius-lg, 0.75rem) var(--ws-radius-lg, 0.75rem) 0 0;
  box-shadow: var(--ws-shadow-lift, 0 -2px 12px 0 rgba(15, 23, 42, 0.08));
  /* Safe area inset so bar clears iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ui-sticky-action-bar__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.ui-tabs {
  display: flex;
  flex-direction: column;
}

/* ── Tablist ──────────────────────────────────────────────────────────────── */

.ui-tabs__list {
  display: flex;
  flex-wrap: wrap;          /* wraps gracefully on narrow screens */
  gap: 0;
  border-bottom: 1px solid var(--color-ink-200, #E2E8F0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox — hide scrollbar while still scrollable */
}

.ui-tabs__list::-webkit-scrollbar {
  display: none;
}

/* ── Tab triggers ─────────────────────────────────────────────────────────── */

.ui-tabs__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;          /* 14px */
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--color-ink-500, #64748B);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;          /* overlap the tablist border */
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease;
  outline: none;
}

.ui-tabs__trigger:hover {
  color: var(--color-ink-800, #1E293B);
  background-color: var(--color-ink-50, #F8FAFC);
}

.ui-tabs__trigger--active,
.ui-tabs__trigger[aria-selected="true"] {
  color: var(--color-brand-600, #4F46E5);
  border-bottom-color: var(--color-brand-600, #4F46E5);
}

.ui-tabs__trigger:focus-visible {
  color: var(--color-brand-600, #4F46E5);
  outline: 2px solid var(--color-brand-600, #4F46E5);
  outline-offset: -2px;
  border-radius: 4px 4px 0 0;
}

/* ── Tab panels ───────────────────────────────────────────────────────────── */

.ui-tabs__panel {
  padding-top: 1.25rem;
}

.ui-tabs__panel[hidden] {
  display: none;
}

/* ── Responsive: allow horizontal scroll on very narrow viewports ─────────── */

@media (max-width: 480px) {
  .ui-tabs__list {
    flex-wrap: nowrap;
  }

  .ui-tabs__trigger {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;   /* 13px */
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ui-tabs__trigger {
    transition: none;
  }
}