/* =====================================================================
 * m/market.css — Mobile dedicated market page (R331)
 * 2026-05-12 (flamboyant-bell)
 *
 * Mobile-first design language using dp-* shell from m/arcade.css +
 * m/marine-theme.css. Built for touch (≥44px tap targets), stacked
 * sections, bottom-sheet modals (R240 inventory pattern), native-app feel.
 *
 * IDs reuse market.js: marketList / marketSearch / marketSort /
 * myMarketTabs / myListingsSection / myBuyOrdersSection / etc.
 * ===================================================================== */

/* ===== Page shell ===== */
body.dp-body--market {
  background-color: #050a1c;
  color: #f0fdff;
  min-height: 100svh;
  overflow-x: clip;
}

.dp-market-main {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  padding: 6px 12px calc(var(--dp-tabbar-h, 76px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Headline ===== */
.dp-market-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 4px;
}
.dp-market-headline__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.45), rgba(8, 145, 178, 0.58));
  border: 1px solid rgba(165, 243, 252, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.32);
}
.dp-market-headline__icon img {
  width: 26px; height: 26px;
}
.dp-market-headline__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-market-headline__label {
  font-size: 12.1px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.78);
  font-weight: 700;
}
.dp-market-headline__title {
  font-size: 24.2px;
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, #fbbf24, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dp-market-headline__hint {
  margin: 4px 0 0;
  font-size: 13.2px;
  color: rgba(165, 243, 252, 0.72);
  line-height: 1.5;
}

/* ===== Section panel (rounded translucent card) ===== */
.dp-market-section {
  background: linear-gradient(180deg, rgba(18, 24, 45, 0.78), rgba(12, 18, 34, 0.86));
  border: 1px solid rgba(102, 124, 164, 0.22);
  border-radius: 20px;
  padding: 16px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.dp-market-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dp-market-section__head h2 {
  margin: 0;
  font-size: 18.7px;
  font-weight: 800;
  color: #edf6ff;
}
.dp-market-section__head p {
  margin: 4px 0 0;
  font-size: 13.2px;
  color: rgba(165, 243, 252, 0.72);
  flex-basis: 100%;
}

/* ===== Filter bar (toolbar) ===== */
.dp-market-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.dp-market-search {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid rgba(111, 125, 165, 0.3);
  border-radius: 999px;
  padding: 0 14px 0 36px;
  /* WCAG 2.5.5 ≥44px tap target */
  min-height: 44px;
}
.dp-market-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(165, 243, 252, 0.66);
  pointer-events: none;
}
.dp-market-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  /* R355 flamboyant-bell (2026-05-12): 16px 防 iOS Safari focus auto-zoom
     (input font-size < 16px 在 iPhone 會放大 viewport 1.5x). */
  font-size: 17.6px;
  color: #f8fafc;
  padding: 0;
  min-height: 44px;
}
.dp-market-search input::placeholder {
  color: rgba(165, 243, 252, 0.55);
}

.dp-market-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dp-market-filter-row .input-inline,
.dp-market-filter-row .market-sort {
  flex: 1 1 auto;
  min-width: 110px;
  min-height: 44px;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid rgba(111, 125, 165, 0.3);
  border-radius: 999px;
  padding: 0 14px;
  color: #f8fafc;
  /* R355: 16px 防 iOS Safari focus auto-zoom (input/select <16px 觸發) */
  font-size: 17.6px;
}
.dp-market-filter-row .btn,
.dp-market-filter-row .btn-compact {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14.3px;
}

/* Toggle pill (checkbox) */
.dp-market-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid rgba(111, 125, 165, 0.3);
  border-radius: 999px;
  padding: 0 14px;
  min-height: 44px;
  font-size: 14.3px;
  color: rgba(226, 232, 240, 0.84);
  cursor: pointer;
  user-select: none;
}
.dp-market-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #00d4ff;
}
.dp-market-toggle:has(input:checked) {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(0, 255, 136, 0.18));
  border-color: rgba(0, 212, 255, 0.55);
  color: #edf6ff;
}

/* ===== Market grid (override 1-col stack on mobile) ===== */
.dp-market-grid.market-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 420px) {
  .dp-market-grid.market-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== 我的市集 tabs (3 個 pill) ===== */
.dp-market-mytabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid rgba(111, 125, 165, 0.3);
  border-radius: 999px;
}
.dp-market-mytabs.is-hidden {
  display: none;
}
.dp-market-mytab {
  flex: 1;
  /* WCAG 2.5.5 ≥44px tap target */
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 232, 240, 0.7);
  font-size: 14.3px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.dp-market-mytab.is-active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 255, 136, 0.24));
  color: #edf6ff;
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25);
}
.dp-market-tab-hidden {
  display: none;
}

/* ===== Summary (我的成交 kv-list) ===== */
.dp-market-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.dp-market-summary .kv-row {
  background: rgba(6, 11, 24, 0.66);
  border: 1px solid rgba(111, 125, 165, 0.24);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dp-market-summary .kv-row span {
  font-size: 12.1px;
  color: rgba(165, 243, 252, 0.72);
  letter-spacing: 0.04em;
}
.dp-market-summary .kv-row strong {
  font-size: 16.5px;
  color: #edf6ff;
  font-weight: 800;
}

/* ===== Trades table (horizontal scroll wrap) ===== */
.dp-market-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(111, 125, 165, 0.24);
}
.dp-market-table-wrap .admin-table {
  width: max-content;
  min-width: 100%;
  font-size: 13.2px;
}

/* ===== Modal — bottom-sheet 95dvh pattern (R240 / R308 / R309 inventory standard) ===== */
.dp-market-modal {
  /* base .modal class handles display:none / display:grid via .is-hidden /
     .is-visible toggle. Below adapts modal-card to bottom-sheet for mobile.
     R501me (2026-05-26): z-index 80 > .dp-tabbar (60) — base .modal z-index 20
     被 tabbar 蓋住, 「確認購買」按鈕 disappear 在底部 76px tabbar 後面.
     user 報「手機端海市購買商品時，按鈕被下方功能欄遮擋住」. */
  z-index: 80;
}
.dp-market-modal .modal-card {
  /* R240: 唯一 scroll container 是 modal-card，子元素禁 nested scroll/sticky */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  width: 100%;
  max-width: 480px;
  margin: auto 8px 8px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(28, 28, 50, 0.98), rgba(18, 19, 35, 0.99));
  border: 1px solid rgba(102, 124, 164, 0.28);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}
.dp-market-modal .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dp-market-modal .modal-head h3 {
  margin: 0;
  font-size: 17.6px;
  font-weight: 800;
  color: #edf6ff;
}
.dp-market-modal .modal-head__close {
  /* WCAG 2.5.5 ≥44px (R292 inventory standard) */
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: rgba(226, 232, 240, 0.7);
  font-size: 26.4px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.dp-market-modal .modal-head__close:hover,
.dp-market-modal .modal-head__close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
.dp-market-modal .market-list-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.dp-market-modal .market-list-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dp-market-modal .market-list-field > span {
  font-size: 13.2px;
  color: rgba(165, 243, 252, 0.78);
  font-weight: 600;
}
.dp-market-modal .market-list-field input {
  /* WCAG 2.5.5 ≥44px tap target */
  min-height: 44px;
  background: rgba(6, 11, 24, 0.72);
  border: 1px solid rgba(111, 125, 165, 0.34);
  border-radius: 12px;
  padding: 0 14px;
  color: #f8fafc;
  /* R355: 16px 防 iOS Safari focus auto-zoom */
  font-size: 17.6px;
}
.dp-market-modal .market-list-field input:focus {
  outline: 2px solid rgba(0, 212, 255, 0.7);
  outline-offset: 1px;
}
.dp-market-modal .form-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.dp-market-modal .form-actions .btn {
  flex: 1;
  /* WCAG 2.5.5 ≥44px */
  min-height: 48px;
  border-radius: 999px;
  font-weight: 800;
}

/* ===== Refresh / action buttons on section heads (touch-friendly) ===== */
.dp-market-section__head .btn,
.dp-market-section__head .btn-compact {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14.3px;
}

/* ===== Footer spacer to clear tabbar ===== */
.dp-footer-spacer {
  height: var(--dp-tabbar-h, 76px);
}

/* ===== Empty state polish ===== */
.dp-market-section .market-empty,
.dp-market-section .empty-state {
  padding: 32px 16px;
  text-align: center;
}
.dp-market-section .market-empty__title,
.dp-market-section .empty-state__title {
  font-size: 16.5px;
  font-weight: 800;
  margin: 8px 0 4px;
  color: #edf6ff;
}
.dp-market-section .market-empty__hint,
.dp-market-section .empty-state__hint {
  font-size: 13.8px;
  color: rgba(165, 243, 252, 0.7);
  line-height: 1.6;
}
.dp-market-section .market-empty__cta {
  margin-top: 12px;
  min-height: 44px;
}