/* ==========================================================================
   縁日参加人数 ＝ このアプリだけの追加スタイル
   形の土台は admin.css（共通）、色は themes.css の data-theme="supporter"
   ここには「共通に無い部品」だけを書く。共通で足りるものは書かない。
   ========================================================================== */


/* .pill は display:inline-flex なので hidden 属性が効かない。効くようにする */
[hidden] { display:none !important; }

/* 共通テーマの補助文字（#8C8578）は生成りの地に対して3.5:1しか無く、
   このアプリでいちばん大事な「まだ人数を入れていない」の断り書きが読みにくかったので、
   このアプリの中だけ濃くする。⚠共通の themes.css は触らない（5事業ぶん一斉に変わるため） */
body[data-theme="supporter"] { --th-soft:#6E6862; }

/* ---- ヘッダーは貼りつけ（スクロールしてもタブと「＋追加」に手が届くように） ---- */
.ar-head { position:sticky; top:0; z-index:20; background:var(--th-bg);
  border-bottom:1px solid transparent; transition:border-color .18s ease; }
.ar-head.stuck { border-bottom-color:var(--th-line); }

/* ---- 接続の状態（オフラインで黙って壊れないように） ---- */
.conn { display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700;
  color:var(--th-soft); padding:6px 14px; border-radius:999px; background:#fff;
  border:1px solid var(--th-line); }
.conn i { width:8px; height:8px; border-radius:50%; background:var(--th-soft); flex:none; }
.conn.ok i { background:var(--th-a2); }
.conn.ng i { background:var(--th-danger); }
.conn.ng { color:var(--th-danger); border-color:var(--th-danger); }

/* ---- 年度のえらび ---- */
.years { display:flex; gap:6px; flex-wrap:wrap; }
.years button { padding:7px 15px; border-radius:999px; font-size:.82rem; font-weight:700;
  color:var(--th-soft); border:1px solid transparent; }
.years button:hover { background:#fff; }
.years button.on { background:var(--th-ink); color:#fff; }

/* ---- 記録の一覧（表というより行カード） ---- */
.rows { display:flex; flex-direction:column; gap:8px; }
.row { background:#fff; border:1px solid var(--th-line); border-radius:18px;
  display:grid; grid-template-columns:64px minmax(0,1fr) auto auto auto; align-items:center;
  gap:14px; padding:12px 16px; cursor:pointer; }
.row:hover { background:var(--th-hover); }
.row .no { font-family:var(--ar-font-disp); font-weight:900; font-size:1.15rem;
  color:var(--th-soft); text-align:center; line-height:1.1; }
.row .no small { display:block; font-size:.7rem; letter-spacing:.06em; font-weight:700; }
.row .ttl { min-width:0; }
.row .ttl b { font-weight:800; font-size:.94rem; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .ttl .when { font-size:.74rem; color:var(--th-soft); font-weight:700; }
.row .mix { display:flex; gap:3px; align-items:center; }
.row .mix i { display:block; width:9px; height:26px; border-radius:3px; }
.row .num { font-family:var(--ar-font-disp); font-weight:900; font-size:1.4rem;
  min-width:74px; text-align:right; }
.row .num small { font-size:.72rem; font-weight:700; color:var(--th-soft); margin-left:3px; }
.row .num .kibo { display:block; font-family:var(--ar-font); font-size:.68rem;
  font-weight:700; color:var(--th-soft); margin-top:-4px; }
.row.empty .num { color:var(--th-soft); }
.row .num .yet { display:inline-block; font-family:var(--ar-font); font-size:.76rem;
  font-weight:800; color:var(--th-body); background:var(--th-track);
  border-radius:999px; padding:3px 12px; }
.row.empty { background:var(--th-hover); border-style:dashed; }
.row .quick { display:flex; gap:6px; }
.row .quick button { padding:6px 14px; border-radius:999px; font-size:.76rem;
  font-weight:700; border:2px solid var(--th-ink); white-space:nowrap; }
.row .quick button:hover { background:var(--th-ink); color:#fff; }

/* ---- 人数がまだの回（まとめのいちばん上） ---- */
#todo-sec .alert h3 { font-size:.92rem; }
#todo-sec .alert .dot { background:var(--th-main); }
#todo-sec .alert li button { font-size:.88rem; gap:10px; }
#todo-sec .alert li button .muted { margin-left:auto; }

/* ---- 内訳の凡例 ---- */
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.74rem;
  font-weight:700; color:var(--th-soft); }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:10px; height:10px; border-radius:3px; }

/* ---- 年度グラフの補助 ---- */
.spark-col .x.done { font-size:.64rem; color:var(--th-soft); font-weight:700; margin-top:-4px; }
.spark-col.todo i { background:#fff; border:2px solid var(--th-ink); }
.spark-col.todo.now i { background:var(--th-pop); border-color:var(--th-ink); }
.spark-col.todo .x.done { color:var(--th-ink); }

/* ---- ダイアログ ---- */
dialog { border:0; padding:0; background:transparent; max-width:min(760px, 94vw); width:100%; }
dialog::backdrop { background:rgba(20,18,14,.42); }
.dlg { background:var(--th-card); border-radius:var(--ar-radius);
  border:1px solid var(--th-line); max-height:88vh; display:flex; flex-direction:column; }
.dlg-head { padding:22px 26px 12px; }
.dlg-head h3 { font-family:var(--ar-font-disp); font-weight:900; font-size:1.2rem; margin:0; }
.dlg-body { padding:4px 26px 20px; overflow:auto; }
.acts { position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
  padding:14px 26px 18px; background:var(--th-card);
  border-top:1px solid var(--th-line); border-radius:0 0 var(--ar-radius) var(--ar-radius); }
.acts .sp { margin-left:auto; }
.acts-total { font-family:var(--ar-font-disp); font-weight:900; font-size:1.02rem; margin-left:14px; }

.offline { margin:0; padding:11px 26px; background:var(--th-danger); color:#fff;
  font-size:.8rem; font-weight:700; text-align:center; }
.acts button:disabled { opacity:.4; cursor:not-allowed; }

/* ---- 入力まわり ---- */
.fields { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:6px; }
.f { display:flex; flex-direction:column; gap:4px; }
.f label { font-size:.7rem; font-weight:700; color:var(--th-soft); letter-spacing:.06em; }
.f input, .f select, .f textarea { border:1px solid var(--th-line); border-radius:12px;
  padding:9px 12px; background:#fff; font-size:.9rem; font-weight:700; width:100%; }
.f input:focus, .f select:focus, .f textarea:focus { outline:2px solid var(--th-main); outline-offset:1px; }
.f.wide { grid-column:span 4; }
.f.full { grid-column:1 / -1; }
.f.s2 { grid-column:span 2; }
.f textarea { font-weight:500; resize:vertical; min-height:60px; }

.grp { border:1px solid var(--th-line); border-radius:18px; padding:14px 16px 16px; margin-top:14px; }
.grp > h4 { margin:0 0 10px; font-size:.84rem; font-weight:800;
  display:flex; align-items:center; gap:8px; }
.grp > h4 i { width:10px; height:10px; border-radius:3px; flex:none; }
.grp > h4 .g { margin-left:auto; font-family:var(--ar-font-disp); font-weight:900; font-size:1.05rem; }
.nums { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.nums .f input { text-align:center; font-family:var(--ar-font-disp); font-weight:900; font-size:1.05rem; }
.nums .f label { text-align:center; }

.total { display:flex; align-items:baseline; gap:10px; margin-top:16px;
  padding:14px 18px; border-radius:18px; background:var(--th-main-s); }
.total b { font-size:.82rem; font-weight:800; }
.total .v { font-family:var(--ar-font-disp); font-weight:900; font-size:2rem; margin-left:auto; }
.total .v small { font-size:.9rem; margin-left:3px; }

.kibo-box { margin-top:14px; padding:14px 18px; border-radius:18px;
  background:var(--th-a1-s); font-size:.84rem; }
.kibo-box b { font-weight:800; }
.kibo-box .r { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }

/* ---- クロス表（分析） ---- */
.cross { width:100%; border-collapse:collapse; font-size:.82rem; }
.cross th, .cross td { padding:9px 10px; text-align:right; white-space:nowrap; }
.cross thead th { font-size:.68rem; letter-spacing:.06em; color:var(--th-soft);
  font-weight:700; border-bottom:1px solid var(--th-line); }
.cross tbody th { text-align:left; font-weight:800; }
.cross tbody tr:hover td { background:var(--th-hover); }
.cross tfoot td, .cross tfoot th { border-top:1px solid var(--th-line); font-weight:800; }
.cross .z { color:#B9B2A4; }
.cross tbody th, .cross tfoot th, .cross thead th:first-child {
  position:sticky; left:0; background:var(--th-card); z-index:1; }
.cross .don { font-weight:700; color:var(--th-soft); }
.cross .don.todo { color:var(--th-ink); background:var(--th-main-s); border-radius:8px; }
.cross .tot { font-weight:800; }
.cross thead th { font-size:.72rem; }
.cross .g0 { border-left:2px solid var(--th-line); padding-left:14px; }
.cross thead .g0 { text-align:right; }
.scroller { overflow-x:auto; }

/* ---- からっぽ ---- */
.blank { text-align:center; color:var(--th-soft); font-size:.86rem; padding:34px 10px; }

/* 共通の .store はスマホで数字が2つとも全幅の行になり、1項目4段・バー88pxに潰れる。
   このアプリでは棒の長さで比べるのが目的なので、バーを全幅の下段に置き直す */
@media (max-width: 940px) {
  .store { grid-template-columns:1fr auto auto; column-gap:10px; row-gap:5px; }
  .store .n { font-size:.95rem; white-space:nowrap; }
  .store .amt { grid-column:auto; white-space:nowrap; }
  .store .bar { grid-column:1 / -1; }
}

/* ---- 狭い画面：共通CSSはタブを隠す（バーガー前提）が、このアプリはタブが要なので出す ---- */
@media (max-width: 940px) {
  .ar-head { flex-wrap:wrap; gap:10px 12px; padding:16px 0 18px; }
  .ar-nav { display:flex; order:3; width:100%; margin-left:0; }
  .ar-nav button { flex:1; padding:9px 6px; }
  #conn { order:2; margin-left:auto !important; }
  #btn-add { order:4; width:100%; justify-content:center; margin-left:0 !important; }
  /* ヘッダーは3段になって画面の1/4を占めるので、狭い画面では貼りつけない */
  .ar-head { position:static; }
  /* スマホではバーを隠しているので、色の凡例も一緒に隠す（読みようがないため） */
  #legend { display:none; }
}

@media (max-width: 860px) {
  .wrap { padding:0 14px 70px; }
  .fields { grid-template-columns:repeat(4, 1fr); }
  .f.wide { grid-column:1 / -1; }
  .nums { grid-template-columns:repeat(3, 1fr); }
  .row { grid-template-columns:48px minmax(0,1fr) auto; gap:10px 12px; padding:11px 13px; }
  .row .mix { display:none; }
  .row .quick { grid-column:1 / -1; }
  .row .quick button { width:100%; }
}
/* スマホ：[削除][やめる] を1段目に並べ、主ボタン（保存する）は幅いっぱいで最下段 */
@media (max-width: 560px) {
  .hero h1 { font-size:1.5rem; word-break:normal; line-break:strict; }
  .hero-main { padding:26px 22px 24px; }
  .hero .blobs { display:none; }
  .side-num { font-size:2.8rem; }
  .acts { flex-wrap:wrap; gap:8px; padding:12px 16px 16px; }
  .acts .sp { display:none; }
  .acts-total { order:-1; margin-left:0; width:100%; text-align:center; font-size:.95rem; }
  .acts .del, .acts #btn-cancel { flex:1 1 0; justify-content:center; padding-left:14px; padding-right:14px; }
  .acts #btn-again, .acts .primary { flex:1 0 100%; justify-content:center; }
  .dlg-head, .dlg-body { padding-left:18px; padding-right:18px; }
}