/* ==========================================================================
   app.css — WT Stock Dashboard 附加 layout（v1）
   只做版面；所有顏色／圓角／陰影／動畫一律用 tokens.css 嘅 variables，
   component class（.card/.kpi/.meter/.pill/.table/.seg）照 template 唔另造。
   ========================================================================== */

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.dash__row { margin-bottom: var(--gap); }
.dash__loading { padding: var(--gap); }

/* ---- Overview 公司列表 ---- */
.cf-score { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.cf-score .meter { width: 88px; }
.cf-table tbody tr[data-href] { cursor: pointer; transition: none; } /* 照原版：hover 變色即時跳變 */
.cf-table tbody tr[data-href]:hover { background: var(--soft); }
.cf-table .cell small { display: block; }

/* ---- Cashflow 詳細 ---- */
.cf-head { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); }
.cf-head__card { padding: var(--gap); }
.cf-head__name {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cf-head__facts { margin: 2px 0 4px; font-size: 1.05rem; }
.cf-head__mcap { font-size: 1.35rem; font-weight: 700; }
.cf-head__card .card__sub { margin: 2px 0; }
.cf-head__segcard { display: flex; flex-direction: column; justify-content: center; }
.cf-head__segcard .card__sub { margin-bottom: 8px; }

.cf-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cf-part__pts { font-size: 1.45rem; font-weight: 700; }
.cf-part__detail { display: block; margin-top: 10px; min-height: 2.6em; line-height: 1.35; }

.cf-total { position: relative; }
.cf-total__pill { position: absolute; top: var(--gap); right: var(--gap); }

/* ---- 加入股票 modal（design-tokens.md §5.5：
     min(560px,100vw-32px) · radius 24 · raised 底 · shadow-pop · backdrop --backdrop） ---- */
.modal {
  width: min(560px, 100vw - 32px);
  padding: 26px 26px 24px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: var(--backdrop); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.015em; }
.modal__sub { margin: 6px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--muted); }

.form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.form .seg { align-self: flex-start; }
.input {
  height: 42px; padding: 0 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  font: inherit; font-size: var(--fs-md); color: var(--text);
  outline: none;
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: var(--faint); }
.input[data-market='US'] { text-transform: uppercase; }
.form__status { margin: 0; min-height: 1.3em; font-size: var(--fs-sm); color: var(--muted); }
.form__status[data-tone='bad'] { color: var(--bad); }
.form__submit { width: 100%; margin-top: 2px; }
.form__submit[disabled] { opacity: .5; cursor: not-allowed; }

/* mobile：bottom sheet（§5.5 — radius 24px 24px 0 0，由底部升起） */
@media (max-width: 760px) {
  .modal {
    width: 100vw; max-width: 100vw;
    margin: auto auto 0 auto;
    border-radius: 24px 24px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
}

/* ---- Toast（§5.5：fixed bottom 24px 置中 · min(440px,100vw-24px) · gap 8 ·
     墨底（--text）radius 16 · 入場 back.out(1.8) / 退場 power2.in 由 lib.js 做） ---- */
.toasts {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(440px, 100vw - 24px);
  z-index: 80; pointer-events: none;
}
.toast {
  pointer-events: auto; max-width: 100%;
  padding: 10px 18px;
  background: var(--text); color: var(--bg);
  border-radius: 16px;
  font-size: var(--fs-md); font-weight: 600; text-align: center;
  box-shadow: var(--shadow-pop);
}

/* ---- 移除追蹤：兩步確認狀態 ---- */
.head__actions .btn.is-armed {
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  border-color: var(--bad);
  color: var(--bad);
}

/* ---- 年度數據欄位開關 chips（2026-11-11：剔＝顯示，狀態記 localStorage）----
     template 冇現成 checkbox 樣式，用 tokens 自製極簡格仔；
     off 狀態縮淡＋去底色，跳變唔做 transition（照原版手感） ---- */
.colchips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 16px; }
.colchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px;
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
}
.colchip:hover { border-color: var(--line-2); }
.colchip input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.colchip.is-off { background: transparent; color: var(--faint); border-color: var(--line); }

/* 中期／殘年標記（2026-11-11）：年度表年份 cell「至 Qn」chip + 趨勢圖 x 軸 * 註腳 */
.yrchip {
  display: inline-block; margin-left: 7px; padding: 1px 8px 2px;
  border-radius: 999px; font-size: var(--fs-xs, 11px); font-weight: 600;
  color: var(--warn); border: 1px solid var(--warn);
  vertical-align: 1px; white-space: nowrap;
}
.chartnote { margin-top: 10px; font-size: var(--fs-xs, 11px); color: var(--muted); min-height: 1em; }

/* ---- 派息紀錄（2026-11-11；同日加每年折線圖 + 年份折疊表）---- */
.div-chart { margin: 6px 0 14px; }
/* 年分組行：成行係開合掣 — 年＋條數左、現金合計＋chevron 右
   （button 撐滿 th；th 本身保持 table-cell，flex 落內層 span） */
.div-table tr.div-year th {
  padding: 14px 20px 8px;
  background: none; border-bottom: 1px solid var(--line);
  font-size: var(--fs-md); font-weight: 700; color: var(--text);
}
.div-table tr.div-year:first-child th { padding-top: 20px; }
.div-year__btn {
  display: block; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.div-year__btn:hover { color: var(--primary); }
.div-year__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
.div-year__in { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.div-year__in small { font-size: var(--fs-xs); font-weight: 600; }
.div-year__r { display: inline-flex; align-items: center; gap: 6px; }
.div-year__r b { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.div-year__chev { color: var(--muted); }
.div-year__btn[aria-expanded='true'] .div-year__chev { transform: rotate(90deg); }
/* 派息行唔係連結 — 唔好指針（.table tbody tr 預設 cursor:pointer） */
.div-table tbody tr:not(.div-year) { cursor: default; }

/* ---- 響應式（跟 template 斷點習慣） ---- */
@media (max-width: 1280px) {
  .cf-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-head { grid-template-columns: 1fr; }
}