/*
 * SQ Scout 共通テーマ（Angular本体と、バッチ生成の静的ページ stocks/*.html の両方が読み込む）。
 *
 * ・色は「RGB三つ組」のCSS変数(--c-*)で持ち、Tailwind側は theme.js の tailwind.config で
 *   rgb(var(--c-*) / <alpha-value>) として参照する。これでライト/ダークを変数の差し替えだけで切り替える。
 * ・切替は <html data-theme="light|dark">。未設定ならOS設定(prefers-color-scheme)に従う。
 *   data-theme は theme.js が描画前に付与する（JS無効時でもOS設定で正しく表示される）。
 * ・Tailwindで書きにくいもの（行グリッド・スコアバー・チップ・チャート）だけここにクラスを置く。
 */

:root {
  color-scheme: light;

  --c-page: 238 242 247;      /* ページ背景 */
  --c-surface: 255 255 255;   /* カード */
  --c-sunken: 244 247 251;    /* テーブルヘッダ・入力欄・薄い面 */
  --c-line: 226 232 240;      /* 罫線 */
  --c-ink: 15 27 51;          /* 本文 */
  --c-ink2: 51 65 85;         /* 準本文 */
  --c-muted: 100 116 139;     /* 補足 */
  --c-brand: 30 78 160;       /* ブランド(ネイビー) */
  --c-link: 30 78 160;        /* 文字としてのブランド色 */
  --c-brand-soft: 230 238 251;
  --c-danger: 220 38 38;
  --c-danger-soft: 254 226 226;
  --c-warn: 234 88 12;
  --c-warn-soft: 255 237 213;
  --c-caution: 161 98 7;
  --c-caution-soft: 254 243 199;
  --c-ok: 22 163 74;
  --c-ok-soft: 220 252 231;
  --c-down: 2 132 199;        /* 株価下落(日本の慣習: 上昇=赤 / 下落=青) */

  --shadow-card: 0 1px 2px rgb(15 27 51 / 0.04), 0 6px 20px -8px rgb(15 27 51 / 0.12);
  --header-h: 60px;
  --bottomnav-h: 0px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --c-page: 10 16 28;
  --c-surface: 19 28 45;
  --c-sunken: 14 22 37;
  --c-line: 37 50 74;
  --c-ink: 232 238 247;
  --c-ink2: 193 204 220;
  --c-muted: 133 148 171;
  --c-brand: 59 110 214;
  --c-link: 128 170 255;
  --c-brand-soft: 27 42 74;
  --c-danger: 248 113 113;
  --c-danger-soft: 69 26 33;
  --c-warn: 251 146 60;
  --c-warn-soft: 66 36 18;
  --c-caution: 250 204 21;
  --c-caution-soft: 58 48 14;
  --c-ok: 74 222 128;
  --c-ok-soft: 20 54 36;
  --c-down: 56 189 248;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.5);
}

/* data-theme が付く前(JS無効など)はOS設定に従う */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --c-page: 10 16 28;
    --c-surface: 19 28 45;
    --c-sunken: 14 22 37;
    --c-line: 37 50 74;
    --c-ink: 232 238 247;
    --c-ink2: 193 204 220;
    --c-muted: 133 148 171;
    --c-brand: 59 110 214;
    --c-link: 128 170 255;
    --c-brand-soft: 27 42 74;
    --c-danger: 248 113 113;
    --c-danger-soft: 69 26 33;
    --c-warn: 251 146 60;
    --c-warn-soft: 66 36 18;
    --c-caution: 250 204 21;
    --c-caution-soft: 58 48 14;
    --c-ok: 74 222 128;
    --c-ok-soft: 20 54 36;
    --c-down: 56 189 248;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.5);
  }
}

@media (max-width: 767px) {
  :root { --header-h: 56px; --bottomnav-h: 64px; }
}

html, body {
  background: rgb(var(--c-page));
  color: rgb(var(--c-ink));
}
body {
  font-family: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'palt';
}
.mono { font-family: 'JetBrains Mono', 'Noto Sans JP', monospace; font-feature-settings: normal; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: normal; }

::-webkit-scrollbar { display: none; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid rgb(var(--c-brand));
  outline-offset: 2px;
}

/* ---------- カード ---------- */
.sq-card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* ---------- 市場タブ ---------- */
.sq-tabs { display: flex; gap: 8px; }
.sq-tab {
  flex: 1;
  white-space: nowrap;
  padding: 10px 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(var(--c-ink2));
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.sq-tab:hover { border-color: rgb(var(--c-brand) / 0.5); color: rgb(var(--c-link)); }
.sq-tab.active {
  background: rgb(var(--c-brand));
  border-color: rgb(var(--c-brand));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgb(var(--c-brand) / 0.6);
}
@media (min-width: 768px) {
  .sq-tab { flex: 0 0 auto; min-width: 128px; padding: 10px 18px; }
}

/* ---------- 状態バッジ ---------- */
.sq-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.3;
}
.sq-badge.tier-high    { background: rgb(var(--c-danger-soft));  color: rgb(var(--c-danger)); }
.sq-badge.tier-mid     { background: rgb(var(--c-warn-soft));    color: rgb(var(--c-warn)); }
.sq-badge.tier-caution { background: rgb(var(--c-caution-soft)); color: rgb(var(--c-caution)); }
.sq-badge.tier-calm    { background: rgb(var(--c-sunken));       color: rgb(var(--c-muted)); }

.chip {
  font-size: 10px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  background: rgb(var(--c-sunken)); color: rgb(var(--c-ink2)); border: 1px solid rgb(var(--c-line));
}

/* ---------- スコア ---------- */
.score-num.tier-high    { color: rgb(var(--c-danger)); }
.score-num.tier-mid     { color: rgb(var(--c-warn)); }
.score-num.tier-caution { color: rgb(var(--c-caution)); }
.score-num.tier-calm    { color: rgb(var(--c-ink2)); }

.score-track { height: 8px; border-radius: 999px; background: rgb(var(--c-line) / 0.7); overflow: hidden; }
.score-fill { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.score-fill.tier-high    { background: linear-gradient(90deg, #f97316, #ef4444); }
.score-fill.tier-mid     { background: linear-gradient(90deg, #fbbf24, #f97316); }
.score-fill.tier-caution { background: linear-gradient(90deg, #fde047, #fbbf24); }
.score-fill.tier-calm    { background: linear-gradient(90deg, #94a3b8, #64748b); }

/* ---------- 順位メダル ---------- */
.rank-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #fff;
}
.rank-medal.r1 { background: linear-gradient(135deg, #fcd34d, #d97706); }
.rank-medal.r2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.rank-medal.r3 { background: linear-gradient(135deg, #e0a070, #b45f2b); }
.rank-plain { font-size: 15px; font-weight: 700; color: rgb(var(--c-ink2)); }

/* ---------- ランキング行（モバイル=カード / md以上=テーブル行） ---------- */
.sq-row {
  --row-h: 148px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas:
    'rank name fav'
    'score score score'
    'delta delta status';
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  height: var(--row-h);
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  overflow: hidden;
}
.sq-row:hover { border-color: rgb(var(--c-brand) / 0.55); }
.sq-row:active { transform: scale(0.992); }
.sq-row .c-rank   { grid-area: rank; display: flex; justify-content: center; }
.sq-row .c-name   { grid-area: name; min-width: 0; }
.sq-row .c-fav    { grid-area: fav; display: flex; align-items: center; gap: 4px; }
.sq-row .c-score  { grid-area: score; display: flex; align-items: center; gap: 12px; }
.sq-row .c-delta  { grid-area: delta; }
.sq-row .c-status { grid-area: status; justify-self: end; }
.sq-row .c-code, .sq-row .c-price, .sq-row .c-chev { display: none; }
.sq-row .c-subline { display: flex; }
.sq-row .c-score .score-track { flex: 1; }
.sq-row .c-score .mobile-label { display: inline; }

.sq-row.tier-high { border-color: rgb(var(--c-danger) / 0.35); }

.sq-thead { display: none; }

@media (min-width: 768px) {
  .sq-table {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .sq-thead, .sq-row {
    --cols: 64px minmax(0, 1.5fr) 64px minmax(170px, 1.3fr) 84px 112px 40px 24px;
    display: grid;
    grid-template-columns: var(--cols);
    grid-template-areas: 'rank name code score delta status fav chev';
    align-items: center;
    column-gap: 12px;
    padding: 0 20px 0 12px;
  }
  .sq-thead {
    height: 44px;
    background: rgb(var(--c-sunken));
    border-bottom: 1px solid rgb(var(--c-line));
    font-size: 12px; font-weight: 700; color: rgb(var(--c-muted));
  }
  .sq-thead > :first-child { text-align: center; }
  .sq-row {
    --row-h: 64px;
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid rgb(var(--c-line));
    border-radius: 0;
    box-shadow: none;
  }
  .sq-row:hover { background: rgb(var(--c-sunken)); }
  .sq-row:active { transform: none; }
  .sq-row.tier-high { border-color: rgb(var(--c-line)); }
  .sq-table > .sq-row:last-child, .sq-table .last-row { border-bottom: 0; }
  .sq-row .c-code, .sq-row .c-chev { display: block; }
  .sq-row .c-subline { display: none; }
  .sq-row .mobile-label { display: none; }
  .sq-row .c-status { justify-self: start; }
  .sq-row .c-fav { justify-content: center; }
  .sq-row .c-chev { grid-area: chev; color: rgb(var(--c-muted)); font-size: 12px; text-align: right; }
}
@media (min-width: 1024px) {
  .sq-thead, .sq-row {
    --cols: 64px minmax(0, 1.5fr) 64px 124px minmax(170px, 1.3fr) 84px 112px 40px 24px;
    grid-template-areas: 'rank name code price score delta status fav chev';
  }
  .sq-row .c-price { display: block; grid-area: price; }
  .sq-row .c-code { grid-area: code; }
}

/* 星(お気に入り) */
.fav-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: rgb(var(--c-muted)); transition: color 0.15s, background 0.15s; cursor: pointer;
}
.fav-btn:hover { color: rgb(245 158 11); background: rgb(var(--c-sunken)); }
.fav-btn.on { color: rgb(245 158 11); }

/* ---------- 株価・前日比の色（上昇=赤 / 下落=青） ---------- */
.px-up { color: rgb(var(--c-danger)); }
.px-down { color: rgb(var(--c-down)); }
.px-flat { color: rgb(var(--c-muted)); }
.dl-up { color: rgb(var(--c-danger)); }     /* スコア上昇＝警戒度上昇 */
.dl-down { color: rgb(var(--c-ok)); }
.dl-flat { color: rgb(var(--c-muted)); }

/* ---------- 汎用 ---------- */
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }

.fade-in { animation: fadeIn 0.18s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-input:focus { outline: none; border-color: rgb(var(--c-brand)); box-shadow: 0 0 0 3px rgb(var(--c-brand) / 0.18); }

/* フィルタ用ピル */
.sq-pill {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgb(var(--c-sunken)); color: rgb(var(--c-ink2)); border: 1px solid rgb(var(--c-line));
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sq-pill:hover { border-color: rgb(var(--c-brand) / 0.5); }
.sq-pill.active { background: rgb(var(--c-brand)); color: #fff; border-color: rgb(var(--c-brand)); }

/* ---------- 折れ線チャート (SVG) ---------- */
.sq-chart text { fill: rgb(var(--c-muted)); font-size: 10px; }
.sq-chart .grid { stroke: rgb(var(--c-line)); stroke-width: 1; }
.sq-chart .line-a { stroke: rgb(var(--c-brand)); }
.sq-chart .line-b { stroke: rgb(var(--c-down)); }
.sq-chart .area-a { fill: rgb(var(--c-brand) / 0.12); }
.sq-chart .dot-a { fill: rgb(var(--c-brand)); }
.sq-chart .dot-b { fill: rgb(var(--c-down)); }