/* ============================================================
   page-edm.css  —  Turn A：Token-ize inline styles
   範圍: /edm 與 /festival 共用模板
   group: ops · accent: --momo-warm-mahogany
   ============================================================ */

/* ---------- Page scope ---------- */
.edm-page {
  background: var(--momo-surface-1);
  color: var(--momo-ink-primary);
  padding-bottom: var(--momo-space-12);
}

/* ---------- Sub-nav tabs (動態頁籤切換) ---------- */
.edm-page .sub-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--momo-space-2);
  margin-bottom: var(--momo-space-4);
}

.edm-page .sub-nav-tabs .btn {
  border-radius: var(--momo-radius-pill);
  padding: var(--momo-space-2) var(--momo-space-4);
  font-weight: var(--momo-font-medium);
  font-size: var(--momo-text-sm);
  transition: all 0.18s ease;
}

.edm-page .sub-nav-tabs .btn-primary {
  background: var(--momo-warm-mahogany);
  border-color: var(--momo-warm-mahogany);
  color: var(--momo-on-accent, #fff8ef);
  box-shadow: var(--momo-shadow-soft);
}

.edm-page .sub-nav-tabs .btn-outline-secondary {
  border-color: var(--momo-border-strong);
  color: var(--momo-ink-secondary);
  background: var(--momo-surface-0);
}

.edm-page .sub-nav-tabs .btn-outline-secondary:hover {
  background: var(--momo-surface-2);
  color: var(--momo-ink-primary);
  border-color: var(--momo-warm-mahogany);
}

/* ---------- Slot pills (時段頁籤) ---------- */
.edm-page .nav-pills {
  gap: var(--momo-space-2);
  border-bottom: 1px solid var(--momo-border);
  padding-bottom: var(--momo-space-3);
  margin-bottom: var(--momo-space-4);
}

.edm-page .nav-pills .nav-link {
  color: var(--momo-ink-secondary);
  font-weight: var(--momo-font-medium);
  font-size: var(--momo-text-sm);
  padding: var(--momo-space-2) var(--momo-space-4);
  border-radius: var(--momo-radius-pill);
  background: var(--momo-surface-0);
  border: 1px solid var(--momo-border);
  transition: all 0.18s ease;
}

.edm-page .nav-pills .nav-link:hover {
  background: var(--momo-surface-2);
  color: var(--momo-warm-mahogany);
  border-color: var(--momo-warm-mahogany-soft);
}

.edm-page .nav-pills .nav-link.active {
  background: var(--momo-warm-mahogany);
  border-color: var(--momo-warm-mahogany);
  color: var(--momo-on-accent, #fff8ef);
  box-shadow: var(--momo-shadow-soft);
}

.edm-page .nav-pills .nav-link .badge {
  background: rgba(255, 248, 239, 0.92) !important;
  color: var(--momo-warm-mahogany) !important;
  border: 1px solid transparent;
  margin-left: var(--momo-space-2);
  font-weight: var(--momo-font-semibold);
}

.edm-page .nav-pills .nav-link:not(.active) .badge {
  background: var(--momo-surface-2) !important;
  color: var(--momo-ink-primary) !important;
  border-color: var(--momo-border) !important;
}

/* ---------- Table container ---------- */
.edm-page .table-container {
  background: var(--momo-surface-0);
  border-radius: var(--momo-radius-md);
  box-shadow: var(--momo-shadow-soft);
  border: 1px solid var(--momo-border-light);
  padding: var(--momo-space-5);
  margin-bottom: var(--momo-space-5);
}

/* ---------- Stats badges row ---------- */
.edm-page .table-container .badge.bg-primary {
  background: var(--momo-warm-mahogany) !important;
}

.edm-page .table-container .badge.bg-danger {
  background: var(--momo-warm-honey) !important;
  color: var(--momo-on-accent, #fff8ef) !important;
}

.edm-page .table-container .badge.bg-success {
  background: var(--momo-warm-olive) !important;
}

.edm-page .table-container .badge.bg-secondary {
  background: var(--momo-ink-tertiary) !important;
}

/* ---------- Status soft badges ---------- */
.edm-page .bg-success-soft {
  background-color: var(--momo-warm-olive-soft) !important;
}

.edm-page .bg-secondary-soft {
  background-color: var(--momo-surface-2) !important;
}

.edm-page .bg-danger-soft {
  background-color: var(--momo-warm-honey-soft) !important;
}

/* ---------- Table ---------- */
.edm-page .table {
  margin-bottom: 0;
  font-size: var(--momo-text-sm);
}

.edm-page .table > :not(caption) > * > * {
  padding: var(--momo-space-3) var(--momo-space-3);
}

.edm-page .table thead th {
  background: var(--momo-surface-2);
  color: var(--momo-ink-secondary);
  font-weight: var(--momo-font-semibold);
  font-size: var(--momo-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--momo-border);
}

.edm-page .table thead th a {
  color: var(--momo-ink-secondary);
  text-decoration: none;
}

.edm-page .table thead th a:hover {
  color: var(--momo-warm-mahogany);
}

.edm-page .table tbody tr {
  border-bottom: 1px solid var(--momo-border-light);
  transition: background 0.12s ease;
}

.edm-page .table tbody tr:hover {
  background: var(--momo-surface-1);
}

.edm-page .table tbody tr:last-child {
  border-bottom: none;
}

/* ---------- Product cell ---------- */
.edm-page .product-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--momo-radius-sm);
  border: 1px solid var(--momo-border-light);
  margin-right: var(--momo-space-3);
  background: var(--momo-surface-2);
}

.edm-page .product-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--momo-ink-tertiary);
  font-size: var(--momo-text-xs);
}

.edm-page .product-link {
  text-decoration: none;
  color: var(--momo-ink-primary);
  font-weight: var(--momo-font-semibold);
  font-size: var(--momo-text-sm);
  display: block;
  line-height: 1.4;
  margin-bottom: var(--momo-space-1);
}

.edm-page .product-link:hover {
  color: var(--momo-warm-mahogany);
}

/* ---------- Price ---------- */
.edm-page .price-current {
  font-family: var(--momo-font-mono);
  font-weight: var(--momo-font-bold);
  font-size: var(--momo-text-base);
  color: var(--momo-ink-primary);
}

.edm-page .price-current.text-success { color: var(--momo-warm-olive) !important; }
.edm-page .price-current.text-danger  { color: var(--momo-warm-honey-deep) !important; }

.edm-page .price-old {
  text-decoration: line-through;
  color: var(--momo-ink-tertiary);
  font-size: var(--momo-text-xs);
  margin-right: var(--momo-space-1);
  font-family: var(--momo-font-mono);
}

.edm-page .price-up   { color: var(--momo-warm-honey-deep); font-weight: var(--momo-font-bold); }
.edm-page .price-down { color: var(--momo-warm-olive); font-weight: var(--momo-font-bold); }

/* ---------- Status badges (NEW/降價/漲價/下架/折扣) ---------- */
.edm-page .badge-status {
  font-size: var(--momo-text-xs);
  vertical-align: middle;
  margin-left: var(--momo-space-1);
  padding: 0.22em 0.55em;
  border-radius: var(--momo-radius-pill);
  font-weight: var(--momo-font-semibold);
}

.edm-page .badge.bg-warning.text-dark {
  background: var(--momo-warm-honey-soft) !important;
  color: var(--momo-warm-honey-deep) !important;
  border-color: var(--momo-warm-honey) !important;
}

.edm-page .badge.bg-light.text-dark,
.edm-page .badge.bg-light.text-muted {
  background: var(--momo-surface-2) !important;
  color: var(--momo-ink-secondary) !important;
  border: 1px solid var(--momo-border) !important;
}

/* ---------- I-code copy chip ---------- */
.edm-page small.cursor-pointer {
  font-size: var(--momo-text-xs);
  color: var(--momo-ink-tertiary);
  font-weight: var(--momo-font-medium);
  font-family: var(--momo-font-mono);
  cursor: pointer;
  transition: color 0.12s ease;
}

.edm-page small.cursor-pointer:hover {
  color: var(--momo-warm-mahogany);
}

.edm-page small.cursor-pointer.text-success {
  color: var(--momo-warm-olive) !important;
}

/* ---------- Header buttons ---------- */
.edm-page .btn-outline-primary {
  border-color: var(--momo-warm-mahogany-soft);
  color: var(--momo-warm-mahogany);
  background: var(--momo-surface-0);
  font-weight: var(--momo-font-medium);
}

.edm-page .btn-outline-primary:hover {
  background: var(--momo-warm-mahogany);
  border-color: var(--momo-warm-mahogany);
  color: var(--momo-on-accent, #fff8ef);
}

.edm-page .btn-outline-success {
  border-color: var(--momo-warm-olive-soft);
  color: var(--momo-warm-olive);
  background: var(--momo-surface-0);
  font-weight: var(--momo-font-medium);
}

.edm-page .btn-outline-success:hover {
  background: var(--momo-warm-olive);
  border-color: var(--momo-warm-olive);
  color: var(--momo-on-accent, #fff8ef);
}

/* ---------- Alert ---------- */
.edm-page .alert.alert-info {
  background: var(--momo-warm-caramel-soft);
  border: 1px solid var(--momo-warm-caramel);
  color: var(--momo-ink-primary);
  border-radius: var(--momo-radius-sm);
  padding: var(--momo-space-2) var(--momo-space-3);
  font-size: var(--momo-text-xs);
}

.edm-page .alert.alert-info .badge.bg-success {
  background: var(--momo-warm-olive) !important;
}

.edm-page .alert.alert-info .badge.bg-danger {
  background: var(--momo-warm-honey-deep) !important;
}

/* ---------- Page header ---------- */
.edm-page .page-head {
  margin-bottom: var(--momo-space-5);
}

.edm-page .page-head h2 {
  font-family: var(--momo-font-heading);
  font-weight: var(--momo-font-bold);
  font-size: var(--momo-text-2xl);
  color: var(--momo-ink-primary);
  margin-bottom: var(--momo-space-2);
  letter-spacing: 0;
}

.edm-page .page-head .text-muted {
  color: var(--momo-ink-tertiary) !important;
  font-size: var(--momo-text-sm);
}

/* ---------- Section title (商品列表 N 筆) ---------- */
.edm-page .table-container h5 {
  font-family: var(--momo-font-heading);
  font-weight: var(--momo-font-semibold);
  font-size: var(--momo-text-lg);
  color: var(--momo-ink-primary);
  margin: 0;
}

/* ============================================================
   Activity theme overrides — 共用 edm 模板的活動主題色
   用法：<body class="edm-page" data-promo="mothers_day">
   ============================================================ */

/* ── Mothers Day · 母親節暖桃橘 ── */
.edm-page[data-promo="mothers_day"] {
  --edm-theme: var(--momo-warm-honey);
  --edm-theme-soft: rgba(212, 158, 96, 0.14);
}

/* ── Valentine 520 · 玫瑰粉紅 ── */
.edm-page[data-promo="valentine_520"] {
  --edm-theme: #c47b8a;
  --edm-theme-soft: rgba(196, 123, 138, 0.14);
}

/* ── Labor Day · 沉穩棕 ── */
.edm-page[data-promo="labor_day"] {
  --edm-theme: var(--momo-warm-rust);
  --edm-theme-soft: rgba(166, 82, 56, 0.14);
}

/* ── Apply theme color to page accents ── */
.edm-page[data-promo="mothers_day"] .sub-nav-tabs .btn-primary,
.edm-page[data-promo="valentine_520"] .sub-nav-tabs .btn-primary,
.edm-page[data-promo="labor_day"] .sub-nav-tabs .btn-primary {
  background: var(--edm-theme);
  border-color: var(--edm-theme);
}

.edm-page[data-promo="mothers_day"] .edm-head__icon,
.edm-page[data-promo="valentine_520"] .edm-head__icon,
.edm-page[data-promo="labor_day"] .edm-head__icon {
  background: var(--edm-theme);
}

.edm-page[data-promo="mothers_day"] .edm-promonav__pill.is-active,
.edm-page[data-promo="valentine_520"] .edm-promonav__pill.is-active,
.edm-page[data-promo="labor_day"] .edm-promonav__pill.is-active {
  background: var(--edm-theme);
  border-color: var(--edm-theme);
  color: var(--momo-on-accent, #fff8ef);
}

.edm-page[data-promo="mothers_day"] .edm-chip--new,
.edm-page[data-promo="valentine_520"] .edm-chip--new,
.edm-page[data-promo="labor_day"] .edm-chip--new {
  background: var(--edm-theme-soft);
  color: var(--edm-theme);
  border-color: var(--edm-theme);
}

.edm-page[data-promo="mothers_day"] .nav-pills .nav-link.active,
.edm-page[data-promo="valentine_520"] .nav-pills .nav-link.active,
.edm-page[data-promo="labor_day"] .nav-pills .nav-link.active {
  background: var(--edm-theme);
  border-color: var(--edm-theme);
}

/* ============================================================
   Campaign v2 responsive containment
   edm_dashboard_v2.html still owns the component styling inline;
   these overrides keep wide tabs/tables inside local scroll containers.
   ============================================================ */

.edm-page.campaign-stack,
.edm-page.campaign-stack > section,
.edm-page .campaign-hero-grid,
.edm-page .tab-content,
.edm-page .tab-pane,
.edm-page .campaign-table-card,
.edm-page .campaign-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.edm-page .campaign-switcher {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.edm-page .campaign-tab {
  flex: 0 0 auto;
}

.edm-page .campaign-hero,
.edm-page .campaign-kpi-panel,
.edm-page .campaign-hero-content,
.edm-page .campaign-eyebrow,
.edm-page .campaign-meta-grid,
.edm-page .campaign-actions {
  min-width: 0;
  max-width: 100%;
}

.edm-page .campaign-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.edm-page .campaign-table {
  width: 100%;
}

.edm-page .campaign-product-cell > div {
  min-width: 0;
}

@media (max-width: 640px) {
  .edm-page.campaign-stack {
    gap: 14px;
  }

  .edm-page .campaign-switcher {
    scrollbar-width: thin;
  }

  .edm-page .campaign-hero {
    min-height: auto;
    padding: 22px 18px;
  }

  .edm-page .campaign-hero-content {
    min-height: auto;
  }

  .edm-page .campaign-title {
    font-size: 28px;
    line-height: 1.16;
  }

  .edm-page .campaign-meta-grid,
  .edm-page .campaign-actions,
  .edm-page .campaign-table-head,
  .edm-page .campaign-stat-badges {
    width: 100%;
  }

  .edm-page .campaign-filterbar {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .edm-page .campaign-filter-chip {
    flex: 0 0 auto;
  }

  .edm-page .campaign-table-wrap::before {
    content: '左右滑動查看完整商品列表';
    position: sticky;
    left: 0;
    display: block;
    width: fit-content;
    max-width: calc(100vw - 28px);
    margin: 0 0 8px;
    padding: 6px 9px;
    color: var(--momo-text-secondary);
    background: var(--momo-bg-paper);
    border: 1px solid var(--momo-border-light);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
  }
}