/*
  Component — Scanner (報價速覽)
  ──────────────────────────────
  Four tabs: 自選/庫存 | 熱門 | 排行 | 熱門ETF
  自選/庫存 has scrollable chips → each chip shows a table + see-more.
  Other tabs show a table + see-more directly.
*/

.scanner {
  padding: var(--space-4) 0 var(--space-6);
}

/* ── Section header ─────────────────────────────── */
.scanner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.scanner__title {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* ── Tab bar ────────────────────────────────────── */
.scanner__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
  gap: 0;
}

.scanner__tab {
  flex: 1;
  padding: var(--space-2) var(--space-2) 10px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-align: center;
  white-space: nowrap;
  position: relative;
  transition: color 0.12s;
}

.scanner__tab.is-active {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}

.scanner__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 2.5px;
  background: var(--color-brand-blue);
  border-radius: 2px 2px 0 0;
}

/* ── Tab panels ─────────────────────────────────── */
.scanner__panel { display: none; }
.scanner__panel.is-active { display: block; }

/* ── Chip bar (自選/庫存 only) ────────────────────
   Same scroll-pad formula as shortcuts for alignment.
*/
.scanner__chips-wrap {
  --scroll-pad: calc(
    max(0px, (100vw - var(--container-max)) / 2) + var(--container-px)
  );
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: var(--space-3) 0 var(--space-2);
}
.scanner__chips-wrap::-webkit-scrollbar { display: none; }

.scanner__chips-inner {
  display: inline-flex;
  gap: var(--space-2);
  padding: 0 var(--scroll-pad);
}

.scanner__chip {
  padding: 5px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: all 0.12s;
}

.scanner__chip.is-active {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
  color: white;
}

/* ── Chip panels ────────────────────────────────── */
.scanner__chip-panel { display: none; }
.scanner__chip-panel.is-active { display: block; }

/* ── Stock table ────────────────────────────────── */
.scanner__table {
  width: 100%;
}

.scanner__thead {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}

.scanner__th {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 16px;
  text-align: right;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.12s;
}

.scanner__th::after {
  content: '';
  width: 8px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(
    50% 0,
    100% 36%,
    64% 36%,
    64% 64%,
    100% 64%,
    50% 100%,
    0 64%,
    36% 64%,
    36% 36%,
    0 36%
  );
  opacity: 0.58;
}

.scanner__th[data-sort-key="name"] {
  justify-content: flex-start;
  text-align: left;
}

.scanner__th.is-sorted {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}

.scanner__th.is-sorted[data-sort-direction="asc"]::after,
.scanner__th.is-sorted[data-sort-direction="name-asc"]::after {
  clip-path: polygon(50% 0, 100% 58%, 66% 58%, 66% 100%, 34% 100%, 34% 58%, 0 58%);
  opacity: 1;
}

.scanner__th.is-sorted[data-sort-direction="desc"]::after,
.scanner__th.is-sorted[data-sort-direction="name-desc"]::after {
  clip-path: polygon(34% 0, 66% 0, 66% 42%, 100% 42%, 50% 100%, 0 42%, 34% 42%);
  opacity: 1;
}

.scanner__row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.1s;
}

.scanner__row:last-of-type { border-bottom: none; }
.scanner__row:active { background: rgba(10, 120, 209, 0.04); }

/* Column widths */
.col-stock  { flex: 1; min-width: 0; }
.col-price  { width: 72px; text-align: right; flex-shrink: 0; }
.col-change { width: 64px; text-align: right; flex-shrink: 0; }
.col-volume { width: 82px; text-align: right; flex-shrink: 0; }

.scanner__code {
  font-size: 16px;
  color: var(--color-text-tertiary);
  line-height: 1;
}

.scanner__name {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner__price {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.scanner__chg {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
}

.scanner__volume {
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Up/Down/Flat colouring */
.is-up   .scanner__price,
.is-up   .scanner__chg      { color: var(--color-up); }

.is-down .scanner__price,
.is-down .scanner__chg      { color: var(--color-down); }

.is-flat .scanner__price,
.is-flat .scanner__chg      { color: var(--color-flat); }

/* ── Empty state ────────────────────────────────── */
.scanner__empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* ── See more button ────────────────────────────── */
.scanner__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  margin-top: var(--space-3);
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-blue);
  background: rgba(10, 120, 209, 0.06);
  transition: background 0.12s;
}

.scanner__more-btn:active {
  background: rgba(10, 120, 209, 0.12);
}

.scanner__more-btn svg {
  flex-shrink: 0;
}