/* ============================================================
   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-slot-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  width: 100%;
  max-width: 100%;
  gap: 8px;
  overflow: visible;
}

.edm-page .campaign-slot-tab {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: space-between;
}

.edm-page .campaign-slot-tab > .momo-mono:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.18;
}

.edm-page .campaign-slot-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.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-slot-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edm-page .campaign-slot-tab {
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .edm-page .campaign-table-wrap::before {
    content: none;
  }

  .edm-page .campaign-table-wrap {
    overflow-x: visible;
  }

  .edm-page .campaign-table,
  .edm-page .campaign-table tbody,
  .edm-page .campaign-table tr,
  .edm-page .campaign-table td {
    display: block;
    width: 100%;
  }

  .edm-page .campaign-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .edm-page .campaign-table thead {
    display: none;
  }

  .edm-page .campaign-table tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .edm-page .campaign-table tr {
    overflow: hidden;
    border: 1px solid var(--momo-border-light);
    border-radius: 8px;
    background: var(--momo-bg-surface);
  }

  .edm-page .campaign-table td {
    display: grid;
    grid-template-columns: minmax(72px, 0.32fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--momo-border-light);
    text-align: left !important;
    overflow-wrap: anywhere;
  }

  .edm-page .campaign-table td:last-child {
    border-bottom: 0;
  }

  .edm-page .campaign-table td::before {
    color: var(--momo-text-tertiary);
    font-family: var(--momo-font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .edm-page .campaign-table td:nth-child(1)::before { content: '分類'; }
  .edm-page .campaign-table td:nth-child(2)::before { content: '商品'; }
  .edm-page .campaign-table td:nth-child(3)::before { content: '價格'; }
  .edm-page .campaign-table td:nth-child(4)::before { content: '銷售'; }
  .edm-page .campaign-table td:nth-child(5)::before { content: '追蹤'; }

  .edm-page .campaign-table td[colspan] {
    display: block;
  }

  .edm-page .campaign-table td[colspan]::before {
    content: none;
  }

  .edm-page .campaign-product-cell {
    align-items: flex-start;
    gap: 10px;
  }

  .edm-page .campaign-product-thumb {
    width: 48px;
    height: 48px;
  }

  .edm-page .campaign-history-button {
    justify-content: flex-start;
    text-align: left;
  }

  .edm-page .campaign-sales-stack,
  .edm-page .campaign-track-stack {
    gap: 4px;
  }
}