/* ============================================================
   Brand & Store — Affiliate v2 · 7-Tab Rebuild  ·  DRAFT
   Page-scoped styles under body[data-portal="brand-store"].
   Both themes via app tokens — no hardcoded colors.
   Prefix: .bs-affv2-*

   Tokens (from variables.css): --bg-surface, --bg-inset, --bg-hover,
     --text-primary, --text-secondary, --text-tertiary,
     --border-default, --border-subtle, --border-strong,
     --color-action, --color-action-ghost,
     --space-{1..8}, --radius-md, --radius-sm, --font-xs, --font-mono,
     --font-body.
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────────────────── */
body[data-portal="brand-store"] .bs-affv2-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  min-width: 0;
}

body[data-portal="brand-store"] .bs-affv2-page > * {
  min-width: 0;
}

/* ── Tab strip ───────────────────────────────────────────────────────────
   Wraps the canonical .bs-tabs/.bs-tab underline style from bs-shared-header.css.
   The tab strip itself is rendered inside #view-toggle slot so the underline
   border aligns with the header's border-bottom (margin-bottom: -1px trick).
   Extra class .bs-affv2-tabs for page-specific overrides without touching global.
   ─────────────────────────────────────────────────────────────────────── */
body[data-portal="brand-store"] .bs-affv2-tabs {
  flex-wrap: nowrap;          /* prefer scroll over wrap on narrow viewports */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
}

body[data-portal="brand-store"] .bs-affv2-tabs::-webkit-scrollbar {
  display: none;              /* Chrome/Safari */
}

/* Slightly larger type for a 7-tab strip at wide viewports */
@media (min-width: 1024px) {
  body[data-portal="brand-store"] .bs-affv2-tabs .bs-tab {
    font-size: 0.9rem;
  }
}

/* ── Placeholder card ────────────────────────────────────────────────────
   Centered notice card for the 6 tabs awaiting BQ datasource.
   Uses a dashed border and muted palette to signal "coming soon" clearly.
   ─────────────────────────────────────────────────────────────────────── */
body[data-portal="brand-store"] .bs-affv2-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8, 32px) var(--space-6, 24px);
  border: 1.5px dashed var(--border-default, rgba(148, 163, 184, 0.4));
  border-radius: var(--radius-md, 10px);
  background: color-mix(in srgb, var(--bg-inset, #f4f5f7) 50%, transparent);
  gap: var(--space-3, 12px);
}

body[data-portal="brand-store"] .bs-affv2-placeholder__icon {
  color: var(--text-tertiary, #94a3b8);
  opacity: 0.55;
  margin-bottom: var(--space-1, 4px);
}

body[data-portal="brand-store"] .bs-affv2-placeholder__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary, #5f6775);
  margin: 0;
}

body[data-portal="brand-store"] .bs-affv2-placeholder__sub {
  font-size: 0.8125rem;
  color: var(--text-tertiary, #94a3b8);
  margin: 0;
}

body[data-portal="brand-store"] .bs-affv2-placeholder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  max-width: 640px;
  width: 100%;
}

body[data-portal="brand-store"] .bs-affv2-placeholder__list li {
  font-size: 0.8125rem;
  color: var(--text-secondary, #5f6775);
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.2));
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  text-align: left;
  line-height: 1.45;
}

/* Light-mode tint: slightly more opaque background on list items */
[data-theme="light"] body[data-portal="brand-store"] .bs-affv2-placeholder {
  background: color-mix(in srgb, var(--bg-inset, #f3f3f0) 60%, transparent);
}

/* ── Mobile: stack responsively at 390px ─────────────────────────────── */
@media (max-width: 600px) {
  body[data-portal="brand-store"] .bs-affv2-placeholder {
    padding: var(--space-6, 24px) var(--space-4, 16px);
  }

  body[data-portal="brand-store"] .bs-affv2-placeholder__title {
    font-size: 0.9rem;
  }

  body[data-portal="brand-store"] .bs-affv2-placeholder__list li {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }
}