/* =============================================================
   横に広い表をスマホで読めるようにする共通スタイル
   =============================================================
   2026-08-15。銘柄一覧は列が10〜13ある。スマホでは横スクロールを
   前提にするしかないが、そのままだと2つの問題が出る。

     1. 右にスクロールすると銘柄名まで流れ、どの会社の数字か分からない
     2. 1列目に長い社名や説明文が入ると、列が画面幅より広くなる

   2 が起きると「固定した列が画面を覆い続ける」ため、**右へスクロール
   しても新しい列が出てこない＝動かないように見える**。スクリーナーで
   実際に起きた（表示幅314pxに対し1列目372px）。
   固定するなら幅の上限を必ずセットで置くこと。

   使い方: 表を囲むスクロール要素に .tv-scroll を付ける。
   ============================================================= */

.tv-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
  Tailwind の base が table に border-collapse: collapse を当てている。
  この状態では th/td の position: sticky が効かないブラウザがあるため
  separate に戻す。罫線が二重にならないよう border-spacing は 0。
*/
.tv-scroll > table {
    border-collapse: separate;
    border-spacing: 0;
}

/* セルを折り返さない（折り返すと1文字ずつ縦積みになる） */
.tv-scroll > table th,
.tv-scroll > table td {
    white-space: nowrap;
}

/* 1列目を左に固定する。背景色は必須（透明だと後ろの列が透ける） */
.tv-scroll > table th:first-child,
.tv-scroll > table td:first-child {
    position: sticky;
    left: 0;
    background: #ffffff;
    box-shadow: 1px 0 0 #ebebeb;
}
.tv-scroll > table thead th:first-child {
    background: #f9fafb;
    z-index: 3;
}
.tv-scroll > table tbody td:first-child {
    z-index: 1;
}
.tv-scroll > table tbody tr:hover td:first-child {
    background: #f9fafb;
}

/* ===== 表 / カード の切り替えボタン ===== */
.tv-toggle {
    display: inline-flex;
    background: #f0f0ec;
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}
.tv-toggle-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #737373;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tv-toggle-btn.is-on {
    background: #ffffff;
    color: #1b4332;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ===== カード表示 ===== */
.tv-cards {
    display: grid;
    /*
      min() を挟むのが肝。単に minmax(300px, 1fr) にすると、容器が
      300pxより狭いときにカードが容器からはみ出す（実測: 容器282pxに
      対しカード300pxで、スコアと操作ボタンが画面外に切れていた）。
      狭いときは容器幅にそろえる。
    */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 10px;
}
.tv-card {
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-left: 3px solid #1b4332;
    border-radius: 10px;
    padding: 12px 14px;
    transition: box-shadow 0.15s;
}
.tv-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.tv-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.tv-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tv-card-title:hover {
    color: #1b4332;
    text-decoration: underline;
}
.tv-card-sub {
    font-size: 11px;
    color: #a3a3a3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 会社名とスコアの間に置く株価。ここは元々空いていた場所で、
   一番よく見る数字なので指標のマス目に埋もれさせない。 */
.tv-card-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.tv-card-price {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}
/*
  常に2列。画面幅で列数を変えると項目の位置が動いてしまい、
  「左の上が株価」のように位置で覚えられなくなる。
*/
.tv-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tv-card-cell {
    background: #fafaf8;
    border-radius: 6px;
    padding: 6px 8px;
    min-width: 0;
}
/* いま並べ替えに使っている項目を目立たせる */
.tv-card-cell.is-sorted {
    background: #f0fdf4;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}
.tv-card-label {
    font-size: 10px;
    color: #a3a3a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-card-value {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 1px;
}
/*
  基準を満たしているかでマスごと色を変える。

  濃さは「並べ替え中のセル」と同じ**ごく薄い背景＋細い枠線**にそろえる。
  ベタ塗りにすると画面が色で埋まり、「色が付いている＝注目」という
  合図そのものが働かなくなる（実画面で見比べて確認済み）。

  is-sorted より後に書く。両方に当てはまるセルでは、
  「並べ替え中」より「基準を満たしているか」を優先して見せる。
*/
.tv-card-value.tv-good { color: #15803d; }
.tv-card-value.tv-mid  { color: #a16207; }
.tv-card-value.tv-low  { color: #b91c1c; }

.tv-card-cell.tone-good {
    background: #f0fdf4;
    box-shadow: inset 0 0 0 1px #bbf7d0;
}
.tv-card-cell.tone-mid {
    background: #fefce8;
    box-shadow: inset 0 0 0 1px #fde68a;
}
.tv-card-cell.tone-low {
    background: #fef2f2;
    box-shadow: inset 0 0 0 1px #fecaca;
}
.tv-card-note {
    font-size: 11px;
    color: #737373;
    line-height: 1.5;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tv-card-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

/* =============================================================
   スマホ向けの調整は必ずこのファイルの末尾に置く。
   前に書くと、あとから来る同じ強さの指定に上書きされる。
   ============================================================= */
@media (max-width: 640px) {
    /*
      固定した1列目が表示幅を超えないようにする。
      これが無いと横スクロールが効かなくなる（冒頭のコメント参照）。
    */
    .tv-scroll > table th:first-child,
    .tv-scroll > table td:first-child {
        max-width: 42vw;
    }
    .tv-scroll > table td:first-child > * {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}