/*
 * analytics.css（売上の画面専用。接頭辞 .an- だけを使う）
 *   仕様: docs/UI_SPEC.md（色・余白・文字の大きさ）。base.css の部品（.btn .card .fc-N など）は上書きしない。
 *   CSP のため style 属性が使えないので、棒の長さは 5%刻みのクラス（.an-bar-0 〜 .an-bar-100）で表す。
 *   .an-bar-N は「割合」を CSS 変数 --an-bar に入れるだけ。
 *   横棒（施設・経路）は width に、縦棒（12か月のグラフ）は height に使う。
 *   .fc-N を付けた棒には background / color を書かない（施設色が消えるため）。
 */

/* ================= 上部: 月の切り替え ================= */
.an-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 56px;
  margin-bottom: var(--sp-3);
}
.an-nav { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.an-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  color: var(--c-brown);
  transition: background-color var(--dur);
}
.an-nav-btn:hover { background: var(--c-surface-2); color: var(--c-brown); }
/* 押せない向き（今月より先など）は場所だけ空けて、年月の位置が動かないようにする */
.an-nav-space { display: inline-block; flex: none; width: 48px; height: 48px; }
.an-month { padding: 0 var(--sp-1); font-size: var(--fs-lg); white-space: nowrap; }
.an-today-btn { flex: none; }

/* ================= 大きな数字のカード4つ ================= */
/* スマホは「売上（横幅いっぱい）」＋「宿泊者数・泊数・稼働率（3つ横並び）」。
   売上はいちばん見たい数字で桁も多いので広く、残りの3つは高さがそろうように同じ行に置く。
   6列のグリッドにしておくと、6 = 1×6 でも 3×2 でも割り切れて、両方の並びを作れる。 */
.an-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}
.an-card {
  grid-column: span 2;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.an-card-wide { grid-column: span 6; }
.an-card-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-sub); }
.an-card-num {
  margin: 2px 0 0;
  font-family: var(--font-round);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.2;
  color: var(--c-brown);
  word-break: break-all; /* 桁の多い金額でも、はみ出さずに折り返す */
}
.an-card-wide .an-card-num { font-size: var(--fs-2xl); }
.an-card-unit { margin-left: 2px; font-size: var(--fs-base); }
.an-card-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text-sub); }

/* 集計の決まりの説明（数字のすぐ下に短く置く） */
.an-rule { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--c-text-sub); }

/* まだ金額が入っていない予約のお知らせ（控えめに） */
.an-unset {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-warn-text);
}
.an-unset .icon { flex: none; width: 20px; height: 20px; margin-top: 0.1em; }

/* セクション見出しとカードの間 */
.an-section-title { margin-bottom: var(--sp-3); }
/* 最初のセクションは base の「.section + .section」が効かないので、ここで上の余白を付ける */
.an .an-rule + .section,
.an .an-unset + .section,
.an .empty-state + .section { margin-top: var(--sp-8); }

/* ================= 支払いの状況 ================= */
.an-pay { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; }
.an-pay-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.an-pay-label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 600; color: var(--c-green-text); }
.an-pay-row.is-unpaid .an-pay-label { color: var(--c-warn-text); }
.an-pay-label .icon { width: 20px; height: 20px; }
.an-pay-value {
  margin: 0;
  font-family: var(--font-round);
  font-size: var(--fs-md);
  font-weight: 700;
  font-synthesis: none;
  color: var(--c-brown);
}
.an-pay-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-sub); }
.an-paid-all { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 600; color: var(--c-green-text); }
.an-paid-all .icon { flex: none; width: 24px; height: 24px; }

/* ================= 内訳（施設ごと・経路ごと） ================= */
.an-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.an-item { min-width: 0; }
.an-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.an-item-name { flex: 1 1 8em; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.an-item-value {
  flex: none;
  font-family: var(--font-round);
  font-size: var(--fs-md);
  font-weight: 700;
  font-synthesis: none;
  color: var(--c-brown);
}
.an-item-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-text-sub); }

/* 横棒。背景の帯（全体）の中に、売上の割合ぶんの棒を置く */
.an-bar {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: var(--sp-2);
  background: var(--c-muted);
  border-radius: var(--r-full);
  overflow: hidden;
}
.an-bar-fill {
  box-shadow: inset 0 0 0 1px rgba(61,36,24,.45); /* 薄い施設色でも棒の範囲が分かるように */ display: block; width: var(--an-bar, 0%); height: 100%; border-radius: var(--r-full); }
/* 予約経路には施設色がないので、リンクなどと同じこげオレンジを使う */
.an-bar-fill.is-source { background-color: var(--c-accent); }

/* ================= 直近12か月の棒グラフ ================= */
.an-chart-note { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-sub); }
.an-chart { padding-top: var(--sp-4); }
.an-chart-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.an-chart-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; }
/* 棒に添える金額。棒1本の幅（60〜80px）に「1,346,000円」は入らないので、
   広い画面（1200px〜）だけに、短くした形（134.6万円）で出す。
   正確な金額は .sr-only の「2026年9月 1,346,000円」で読み上げられ、上のカードにも出ている。
   2行になっても、棒と月は下ぞろえなので位置はずれない。 */
.an-chart-value { display: none; font-size: var(--fs-sm); line-height: 1.3; color: var(--c-text-sub); text-align: center; }
.an-chart-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 120px;
  border-bottom: 1px solid var(--c-line-strong); /* 0円の月も「ここが0」と分かるように土台の線を引く */
}
.an-chart-bar {
  display: block;
  width: 100%;
  height: var(--an-bar, 0%);
  background-color: var(--c-accent);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.an-chart-label {
  font-family: var(--font-round);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.4;
  color: var(--c-text-sub);
  white-space: nowrap;
}
/* 狭い画面は数字だけ（「12月」は列の幅に入らないため）、600px〜 は「12月」 */
.an-chart-label-long { display: none; }
/* 今いる月: 色だけに頼らず、砂色の丸い背景を付けて見分けられるようにする */
.an-chart-item.is-current .an-chart-label {
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--c-sand);
  color: var(--c-brown);
}

/* ================= 棒の長さ（5%刻み。CSP のため style 属性の代わり） ================= */
.an-bar-0   { --an-bar: 0%; }
.an-bar-5   { --an-bar: 5%; }
.an-bar-10  { --an-bar: 10%; }
.an-bar-15  { --an-bar: 15%; }
.an-bar-20  { --an-bar: 20%; }
.an-bar-25  { --an-bar: 25%; }
.an-bar-30  { --an-bar: 30%; }
.an-bar-35  { --an-bar: 35%; }
.an-bar-40  { --an-bar: 40%; }
.an-bar-45  { --an-bar: 45%; }
.an-bar-50  { --an-bar: 50%; }
.an-bar-55  { --an-bar: 55%; }
.an-bar-60  { --an-bar: 60%; }
.an-bar-65  { --an-bar: 65%; }
.an-bar-70  { --an-bar: 70%; }
.an-bar-75  { --an-bar: 75%; }
.an-bar-80  { --an-bar: 80%; }
.an-bar-85  { --an-bar: 85%; }
.an-bar-90  { --an-bar: 90%; }
.an-bar-95  { --an-bar: 95%; }
.an-bar-100 { --an-bar: 100%; }

/* ================= 画面が広いとき ================= */
@media (min-width: 600px) {
  .an-cards { gap: var(--sp-3); }
  .an-card { padding: var(--sp-4); }
  .an-card-num { font-size: var(--fs-2xl); }
  .an-chart-list { gap: var(--sp-1); }
  .an-chart-label-short { display: none; }
  .an-chart-label-long { display: inline; }
}
@media (min-width: 900px) {
  /* PC は4つ横並び。売上も同じ幅でそろえる */
  .an-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .an-card, .an-card-wide { grid-column: span 1; }
  .an-chart-track { height: 160px; }
  .an-chart-list { gap: var(--sp-2); }
}
@media (min-width: 1200px) {
  .an-chart-value { display: block; }
}