/*
  Component — Trade page (交易 / 下單)
  ─────────────────────────────────────
  Dense order-entry screen. Top tabs (下單/委託/明細/庫存) switch
  sub-views; the 下單 view holds product search, order-type controls,
  the 五檔 order book, an info ladder, and sticky 買進/賣出 actions.
*/

.trade-page {
  /* clear the fixed 買進/賣出 bar that floats above the bottom nav */
  padding-bottom: calc(72px + var(--space-4));
}

/* ── Top tab bar (下單 / 委託 / 明細 / 庫存) ───────── */
.trade-tabs {
  display: flex;
  align-items: center;
  padding-top: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.trade-tabs__list {
  flex: 1;
  display: flex;
}

.trade-tab {
  flex: 1;
  padding: var(--space-2) var(--space-1) 10px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-align: center;
  position: relative;
  transition: color 0.12s;
}
.trade-tab.is-active {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}
.trade-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18%;
  right: 18%;
  height: 2.5px;
  background: var(--color-brand-blue);
  border-radius: 2px 2px 0 0;
}

.trade-tabs__refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: var(--space-1);
  border-radius: var(--radius-full);
  transition: background 0.12s;
}
.trade-tabs__refresh:active { background: rgba(10, 120, 209, 0.08); }
.trade-tabs__refresh img { width: 20px; height: 20px; opacity: 0.6; }
.trade-tabs__refresh.is-spinning img { animation: trade-refresh-spin 0.6s ease; }

@keyframes trade-refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Panels ────────────────────────────────────── */
.trade-panel { display: none; }
.trade-panel.is-active { display: block; }

.trade-panel__placeholder {
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* ── Account selector ──────────────────────────── */
.trade-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
}
.trade-account__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.trade-account__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.trade-account__caret { width: 14px; height: 14px; opacity: 0.5; }
.trade-account__spacer { flex: 1; }

/* ── Product card ──────────────────────────────── */
.trade-product {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 零股 mode tint — gradient fades in over the white card */
.trade-product::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #E8F1FF 0%, #F1ECFF 55%, #FCEFF6 100%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.trade-product.is-odd-lot::before { opacity: 1; }
.trade-product.is-odd-lot {
  box-shadow: 0 8px 24px rgba(96, 122, 224, 0.18);
}

/* Highlighted product quote area; tapping opens the stock page */
.trade-product__id {
  position: relative;   /* sit above the tint overlay */
  z-index: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 11px var(--space-3);
  border: none;
  background: rgba(10, 120, 209, 0.08);
  box-shadow: inset 0 0 0 1px rgba(10, 120, 209, 0.18);
  text-align: left;
  border-radius: var(--radius-md);
  transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.trade-product__id:active {
  transform: scale(0.99);
  background: rgba(10, 120, 209, 0.12);
  box-shadow: inset 0 0 0 1px rgba(10, 120, 209, 0.28);
}

.trade-product__controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.trade-product__identity {
  min-width: 0;
  flex: 1;
}

.trade-product__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.trade-product__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-primary);
}
.trade-product__code {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-blue-dark);
  margin-top: 2px;
}
.trade-product__tags {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.trade-product__tag {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-up);
  background: var(--color-up-bg);
}
.trade-product__quote {
  flex-shrink: 0;
  min-width: 0;
  text-align: right;
}
.trade-product__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.trade-product__change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: 2px;
}

.trade-product__search {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transition: background 0.12s, box-shadow 0.12s, transform 0.12s;
}
.trade-product__search img {
  width: 17px;
  height: 17px;
  opacity: 0.7;
}
.trade-product__search:active {
  transform: scale(0.96);
  background: rgba(10, 120, 209, 0.08);
  box-shadow: inset 0 0 0 1px rgba(10, 120, 209, 0.22);
}

/* Lot switch (整股 / 零股) — top-right corner of the card */
.trade-lot {
  display: inline-flex;
  flex: 1;
  padding: 2px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
}
.trade-lot__btn {
  flex: 1;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.trade-lot__btn.is-active {
  background: var(--color-surface);
  color: var(--color-brand-blue);
  box-shadow: var(--shadow-sm);
}

/* Up / down trend colors (shared) */
.trade-product__price.is-up,
.trade-product__change.is-up   { color: var(--color-up); }
.trade-product__price.is-down,
.trade-product__change.is-down { color: var(--color-down); }
.trade-product__price.is-flat,
.trade-product__change.is-flat { color: var(--color-flat); }

/* ── Segmented tabs (現股 / 融資 / …) ──────────── */
.trade-segments {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: 3px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.trade-segment {
  flex: 1;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}
.trade-segment.is-active {
  background: var(--color-surface);
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* ── Order-type dropdowns (整股ROD / 當日委託 / 限價) ── */
.trade-options {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.trade-dropdown {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s;
}
.trade-dropdown:active {
  border-color: var(--color-brand-blue);
  background: rgba(10, 120, 209, 0.05);
}
.trade-dropdown img { width: 12px; height: 12px; opacity: 0.5; }

/* ── Steppers (單位 / 金額約) ─────────────────────── */
.trade-steppers {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.trade-stepper {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.trade-stepper__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.trade-stepper__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.trade-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: opacity 0.12s;
}
.trade-stepper__btn:active { opacity: 0.6; }
.trade-stepper__btn img { width: 16px; height: 16px; }
.trade-stepper__value {
  flex: 1;
  width: 0;          /* let the input shrink inside its flex column */
  min-width: 0;
  text-align: center;
  border: none;
  background: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  outline: none;
}

/* ── 五檔 order book ──────────────────────────────── */
.trade-book {
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.trade-book__head,
.trade-book__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.trade-book__head {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.trade-book__th {
  padding: 6px var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: right;
}
.trade-book__row {
  border-bottom: 1px solid var(--color-border);
}
.trade-book__row:last-child { border-bottom: none; }

.trade-book__cell {
  position: relative;
  padding: 7px var(--space-3);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  z-index: 0;
}
.trade-book__qty { color: var(--color-text-secondary); }
.trade-book__bid { color: var(--color-up); font-weight: var(--font-weight-semibold); }
.trade-book__ask { color: var(--color-down); font-weight: var(--font-weight-semibold); }

/* Volume depth bars */
.trade-book__cell--bidqty::after,
.trade-book__cell--askqty::after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: var(--bar, 0%);
  z-index: -1;
  border-radius: var(--radius-sm);
}
.trade-book__cell--bidqty::after {
  right: 0;
  background: var(--color-up-bg);
}
.trade-book__cell--askqty::after {
  left: 0;
  background: var(--color-down-bg);
}

/* ── Info ladder (rounded segmented + table) ─────── */
.trade-info { margin-top: var(--space-4); }

.trade-info__tabs {
  display: flex;
  gap: var(--space-1);
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
}
.trade-info__tab {
  flex: 1;
  padding: 7px 4px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, box-shadow 0.12s;
}
.trade-info__tab.is-active {
  background: var(--color-surface);
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.trade-info__panel { display: none; padding-top: var(--space-2); }
.trade-info__panel.is-active { display: block; }

/* Time & sales table (分時明細) */
.trade-ticks__head,
.trade-ticks__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr;
}
.trade-ticks__head {
  border-bottom: 1px solid var(--color-border);
}
.trade-ticks__th {
  padding: 8px var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: right;
}
.trade-ticks__th:first-child { text-align: left; }
.trade-ticks__row { border-bottom: 1px solid var(--color-border); }
.trade-ticks__row:last-child { border-bottom: none; }
.trade-ticks__cell {
  padding: 8px var(--space-2);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-primary);
}
.trade-ticks__cell:first-child { text-align: left; color: var(--color-text-secondary); }
.trade-ticks__cell.is-up   { color: var(--color-up); }
.trade-ticks__cell.is-down { color: var(--color-down); }

/* 庫存損益 — 4 columns (庫存 / 盈虧 / 可下單數 / 均價) */
[data-trade-info-panel="pnl"] .trade-ticks__head,
[data-trade-info-panel="pnl"] .trade-ticks__row {
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}
.trade-ticks__cell--name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.trade-ticks__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.trade-ticks__sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* 額度/餘額查詢 — two cards */
.trade-quota {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.trade-quota__card {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.trade-quota__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}
.trade-quota__row + .trade-quota__row { border-top: 1px solid var(--color-border); }
.trade-quota__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.trade-quota__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.trade-quota__card--balance {
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(10, 120, 209, 0.07) 0%, rgba(11, 61, 145, 0.05) 100%);
}
.trade-quota__card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.trade-quota__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.trade-quota__amount {
  margin-top: var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue);
  font-variant-numeric: tabular-nums;
}
.trade-quota__amount span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-left: 2px;
}

.trade-info__empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* ── Sticky 買進 / 賣出 actions ───────────────────── */
.trade-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  display: flex;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--container-px);
}
.trade-action {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: opacity 0.12s, transform 0.08s;
}
.trade-action:active { transform: scale(0.985); opacity: 0.92; }
.trade-action--buy  { background: linear-gradient(160deg, #F2685C 0%, #E8503A 100%); }
.trade-action--sell { background: linear-gradient(160deg, #34D277 0%, #20C060 100%); }

/* 買進/賣出 only apply to the 下單 view */
.trade-page.is-hide-actions .trade-actions { display: none; }

/* ── 16px typography baseline ─────────────────────
   Keep the trade page dense, but make every visible text control
   use a consistent 16px size.
*/
.trade-page,
.trade-page :where(
  button,
  input,
  span,
  div,
  .trade-tab,
  .trade-panel__placeholder,
  .trade-account__label,
  .trade-account__value,
  .trade-product__name,
  .trade-product__code,
  .trade-product__tag,
  .trade-product__price,
  .trade-product__change,
  .trade-lot__btn,
  .trade-segment,
  .trade-dropdown,
  .trade-stepper__label,
  .trade-stepper__value,
  .trade-book__th,
  .trade-book__cell,
  .trade-info__tab,
  .trade-ticks__th,
  .trade-ticks__cell,
  .trade-ticks__title,
  .trade-ticks__sub,
  .trade-quota__label,
  .trade-quota__value,
  .trade-quota__card-title,
  .trade-quota__date,
  .trade-quota__amount,
  .trade-quota__amount span,
  .trade-info__empty,
  .trade-action
) {
  font-size: 16px;
}

#trade-sheet :where(
  .lists-sheet__title,
  .lists-sheet__option,
  .lists-sheet__cancel
) {
  font-size: 16px;
}