/*
 * 作業台としての配置。
 *
 * この画面は「データを陳列するダッシュボード」の形で作られていたが、
 * 使う人は **39,896 件を前に電話を掛ける人**である。初期表示の 45% を
 * 統計カード 7 枚と 47 本の棒グラフが占め、1 ページ 50 件のうち
 * **13 行しか見えていなかった。**
 *
 * ここが持つのは「一覧に画面を返す」ための部品だけである。既存の
 * `components.css` は割らない — 割ると実際の差分が埋もれる。
 */

/* ---- 統計は 1 行の帯にする ----
   カード 7 枚 (各 ~110px) を、ラベルと数字を横に並べた ~44px の帯に畳む。
   数字は減らさない — **場所だけを返す。** */
/* 内訳の帯を同じ枠に入れる。別の行にすると、それだけで隙間 2 つと
   8px を一覧から取り上げることになる。 */
.kpi-strip {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.kpi-strip__cards {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-xs);
  overflow-x: auto;          /* 狭い画面では横に流す。折り返すと高さが戻る */
}
.kpi-strip .stat-card {
  /* **内容より縮ませない。** `1 1 0` だと狭い画面でラベルと数字が重なる
     (実際に「24,731在 3,037絡済み」と潰れた)。`min-width: max-content` を
     下限にすると、広い画面では今までどおり等分し、狭ければ溢れて横に流れる。 */
  flex: 1 1 auto;
  min-width: max-content;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 0.45rem var(--spacing-md);
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.kpi-strip .stat-card__value {
  font-size: var(--font-size-lg);
  line-height: 1.2;
}
.kpi-strip .stat-card--active { box-shadow: none; }
.kpi-strip > .progress-bar { height: 4px; margin: 0 var(--spacing-xs) 2px; }

/* 全件は内訳ではないので、区切りを一本入れて役割を分ける。 */
.kpi-strip .stat-card--total { flex: 0 0 auto; border-right: 1px solid var(--color-border); border-radius: 0; }

/* ---- 地域チャートは畳める ----
   都道府県別の総件数は毎日ほとんど変わらない。開いたままにしておく理由が
   無い日のほうが多いので、閉じられるようにして **開閉をこの閲覧者に憶えさせる。**
   これは条件ではなく見え方の好みなので、URL ではなく localStorage に置く
   (「永続化は URL ひとつ」の唯一の例外。理由はここに書いておく)。 */
.chart-card > summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.chart-card > summary::-webkit-details-marker { display: none; }
.chart-card > summary::before {
  content: "▸";
  color: var(--color-text-faint);
  transition: transform var(--transition-fast);
}
.chart-card[open] > summary::before { transform: rotate(90deg); }
.chart-card__title { color: var(--color-text); font-weight: 600; font-size: var(--font-size-sm); }
.chart-card__peek { color: var(--color-text-muted); }

/* ---- 棒は押せる ----
   押すとその地域に絞る。押せることが判るように、点ではなく面で反応させる。 */
.chart-bar-hit { cursor: pointer; }
.chart-bar-hit:hover .chart-bar { fill: var(--color-primary-hover); }
.chart-bar-hit:focus-visible { outline: 3px solid var(--color-primary-ring); }
.chart-back {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

/* ---- 一覧に残りの高さを全部渡す ----
   `max-height: calc(100vh - 17rem)` という魔法の数字で高さを決めていた。
   ヘッダーの中身が変わるたびに合わなくなる (実際いま合わなくなった)。
   flex の連鎖で「余った分」を取らせる — 数字を持たない。
   `min-height: 0` が要るのは、flex の子が既定で内容より縮まないためである。 */
.app-shell { height: 100vh; }
.app-main {
  min-height: 0;
  /* 家具どうしの間隔。`--spacing-lg` だと 6 つ並ぶだけで 80px 消える。 */
  gap: var(--spacing-md);
}
/* **一覧以外は縮ませない。** `.app-main` は flex なので、既定では子が
   内容より縮む — 実際に KPI の帯が 44px から 21px に潰れて数字が切れた。 */
.app-main > *:not(.table-container) { flex: 0 0 auto; }
.table-container { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.table-container > .table-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }

@media (max-width: 640px) {
  /* 縦に積む画面では高さを奪い合わない。スクロールはページに任せる。 */
  .app-shell { height: auto; min-height: 100vh; }
  .table-container { display: block; }
  .kpi-strip .stat-card--total { border-right: 0; }
}

/* ---- 一覧の行を詰める ----
   1 行 38px は台帳としては緩い。数字と店名の読みやすさを保てる範囲で
   詰める — **1 行 4px が 1 画面あたり 1 行以上になる。** */
.salon-table tbody td { padding: 0.35rem 0.75rem; }
.salon-table thead th,
.th-sort { padding: 0.35rem 0.75rem; }
.pagination { padding: 0.4rem var(--spacing-md); }
.filter-bar { padding: var(--spacing-sm) var(--spacing-md); }

/* 絞り込みのチップは絞り込みバーと同じ枠に入れる。 */
.filter-bar .filter-presets { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .salon-table tbody td { padding: 0.25rem 0; }
}


/* 店舗名はボタン。見た目は本文のままにする — 一覧が青いリンクだらけに
   なると、電話番号 (本当に押す先) が埋もれる。 */
.link-cell {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.link-cell:hover { text-decoration: underline; }

/* キーボードで辿っている行を示す。 */
.salon-table tbody tr.is-focused { background: var(--color-primary-bg); }