/* GROW クラブ活動管理 — テーマ対応スタイル(モバイルファースト)
   デザインは data-theme(A/B/C)で切替。既定は A(Athletic Bold / ダーク)。
   :root = 案A、[data-theme="B"] = ミニマル、[data-theme="C"] = フレンドリー。 */

/* ===== 案A(既定・ダーク) ===== */
:root{
  --bg:#0b1220;
  --surface-2:#0f172a;
  --card:#121c33;
  --border:#22304d;
  --text:#e6edf7;
  --muted:#8b97ad;
  --primary:#3b82f6;
  --primary-dark:#2563eb;
  --on-primary:#ffffff;
  --input-bg:#0e1830;
  --row-hover:#0f1c37;
  --accent-soft:rgba(59,130,246,.16);
  --suspend-bg:rgba(220,38,38,.14);
  --header-bg:#0f172a;
  --header-fg:#e6edf7;
  --header-border:#22304d;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 14px 34px -20px rgba(0,0,0,.7);
  --danger:#dc2626;
  --success:#16a34a;
  --warn:#d97706;
}
/* 明示的に data-theme="A" が来た場合も同じ */
:root[data-theme="A"]{ }

/* ===== 案B(ミニマル・ニュートラル / ライト) ===== */
[data-theme="B"]{
  --bg:#faf9f7;
  --surface-2:#f4f2ee;
  --card:#ffffff;
  --border:#e7e5e4;
  --text:#292524;
  --muted:#78716c;
  --primary:#4f46e5;
  --primary-dark:#4338ca;
  --on-primary:#ffffff;
  --input-bg:#ffffff;
  --row-hover:#faf7ff;
  --accent-soft:#eef2ff;
  --suspend-bg:#fef2f2;
  --header-bg:#ffffff;
  --header-fg:#292524;
  --header-border:#e7e5e4;
  --radius:10px;
  --radius-lg:12px;
  --shadow:0 1px 2px rgba(0,0,0,.05);
}

/* ===== 案C(フレンドリー・ラウンド / ライト) ===== */
[data-theme="C"]{
  --bg:#eef4fb;
  --surface-2:#f2f7fc;
  --card:#ffffff;
  --border:#e2ecf6;
  --text:#1e293b;
  --muted:#7c8aa0;
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --on-primary:#ffffff;
  --input-bg:#ffffff;
  --row-hover:#f3f9ff;
  --accent-soft:#e0f2fe;
  --suspend-bg:#fef2f2;
  --header-bg:linear-gradient(135deg,#22d3ee,#3b82f6);
  --header-fg:#ffffff;
  --header-border:transparent;
  --radius:16px;
  --radius-lg:20px;
  --shadow:0 14px 30px -18px rgba(30,64,175,.4);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== アプリシェル(PC=左サイドバー / スマホ=下部タブバー) ===== */
.app-content{ min-width:0; }
.brand{ color:var(--header-fg); font-weight:900; font-size:20px; letter-spacing:1px; }
.brand:hover{ text-decoration:none; }

/* スマホ用 上部バー */
.mtopbar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--header-bg); color:var(--header-fg); border-bottom:1px solid var(--header-border);
  padding:0 14px; min-height:50px; position:sticky; top:0; z-index:20; }
.mtopbar .mtop-right{ display:flex; align-items:center; gap:14px; font-size:13px; }
.mtopbar a{ color:var(--header-fg); }

/* PC用 サイドバー(既定は非表示=スマホ) */
.sidebar{ display:none; }

/* スマホ用 下部タブバー */
.bottomnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--header-bg); border-top:1px solid var(--header-border);
  overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bottomnav a{ flex:1 0 auto; min-width:62px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:7px 6px 8px; color:var(--header-fg); font-size:10px; opacity:.75; text-decoration:none; white-space:nowrap; }
.bottomnav a .ic{ font-size:18px; line-height:1; }
.bottomnav a.on{ opacity:1; background:rgba(128,128,128,.2); }

/* デスクトップ(サイドバー表示・下部/上部バー非表示) */
@media (min-width:900px){
  .app{ display:flex; align-items:flex-start; }
  .sidebar{ display:flex; flex-direction:column; width:212px; flex-shrink:0;
    position:sticky; top:0; height:100vh; padding:16px 12px;
    background:var(--header-bg); color:var(--header-fg); border-right:1px solid var(--header-border); }
  .sidebar .brand{ padding:6px 10px 14px; font-size:22px; }
  .side-nav{ display:flex; flex-direction:column; gap:3px; }
  .side-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
    color:var(--header-fg); font-size:14px; font-weight:600; opacity:.85; text-decoration:none; }
  .side-nav a .ic{ width:20px; text-align:center; }
  .side-nav a:hover{ opacity:1; background:rgba(128,128,128,.15); }
  .side-nav a.on{ opacity:1; background:var(--primary); color:var(--on-primary); }
  .side-foot{ margin-top:auto; border-top:1px solid var(--header-border); padding-top:12px; font-size:13px; }
  .side-user{ display:block; color:var(--header-fg); opacity:.9; margin-bottom:8px; line-height:1.3; }
  .side-logout{ color:var(--header-fg); opacity:.8; font-size:13px; }
  .app-content{ flex:1; }
  .mtopbar{ display:none; }
  .bottomnav{ display:none; }
}

/* ===== レイアウト ===== */
.container{ max-width:1080px; margin:0 auto; padding:20px 16px 84px; }
@media (min-width:900px){ .container{ max-width:1500px; padding:24px 32px 60px; } }
.page-title{ font-size:22px; margin:4px 0 20px; border-left:5px solid var(--primary); padding-left:10px; }
.footer{ text-align:center; color:var(--muted); padding:20px; }

/* ===== カード ===== */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h2{ margin-top:0; font-size:17px; }

.grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){
  .grid.cols-2{ grid-template-columns:1fr 1fr; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
}

/* 統計タイル */
.stat{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; text-align:center; box-shadow:var(--shadow); }
.stat .num{ font-size:30px; font-weight:800; color:var(--primary); }
.stat .label{ color:var(--muted); font-size:13px; }
.stat.accent{ background:linear-gradient(135deg,var(--primary-dark),var(--primary)); border-color:transparent; }
.stat.accent .num, .stat.accent .label{ color:#fff; }

/* ===== テーブル ===== */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; background:var(--card); font-size:14px; }
table.data th, table.data td{ border-bottom:1px solid var(--border); padding:10px 12px; text-align:left; white-space:nowrap; }
table.data th{ background:var(--surface-2); color:var(--muted); font-weight:600; }
table.data tfoot th{ background:var(--surface-2); }
table.data tr:hover td{ background:var(--row-hover); }

/* ===== バッジ(意味色はテーマ共通) ===== */
.badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; color:#fff; background:var(--muted); }
.badge.role-admin{ background:#7c3aed; }
.badge.role-coach{ background:#0891b2; }
.badge.role-member{ background:#64748b; }
.badge.role-guardian{ background:#be185d; }
.badge.st-active{ background:#16a34a; }
.badge.st-rest{ background:#d97706; }
.badge.st-left{ background:#64748b; }
.badge.st-pending{ background:#d97706; }
.badge.st-suspended{ background:#b91c1c; }
.badge.club-active{ background:#16a34a; }
.badge.club-suspended{ background:#b91c1c; }
.badge.at-present{ background:#16a34a; }
.badge.at-absent{ background:#dc2626; }
.badge.at-undecided{ background:#d97706; }
.badge.at-none{ background:#94a3b8; color:#0b1220; }
.badge.type-practice{ background:#2563eb; }
.badge.type-match{ background:#dc2626; }
.badge.type-trip{ background:#059669; }

/* ===== フォーム ===== */
.form-row{ margin-bottom:14px; }
.form-row label{ display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=datetime-local],
input[type=number], input[type=tel], select, textarea{
  width:100%; padding:10px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:15px; font-family:inherit; background:var(--input-bg); color:var(--text);
}
input::placeholder, textarea::placeholder{ color:var(--muted); opacity:.8; }
textarea{ min-height:90px; resize:vertical; }
.form-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.form-inline .form-row{ margin-bottom:0; }

/* ===== ボタン ===== */
.btn{ display:inline-block; padding:9px 16px; border:1px solid var(--primary); background:var(--primary); color:var(--on-primary); border-radius:var(--radius); font-size:14px; cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--primary-dark); text-decoration:none; }
.btn.secondary{ background:var(--card); color:var(--primary); }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.small{ padding:5px 10px; font-size:13px; }
.btn.ghost{ background:transparent; border-color:var(--border); color:var(--text); }

.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.actions .spacer{ margin-left:auto; }

/* ===== フラッシュ ===== */
.flash{ padding:12px 14px; border-radius:var(--radius); margin-bottom:14px; font-size:14px; }
.flash-success{ background:#dcfce7; color:#166534; }
.flash-error{ background:#fee2e2; color:#991b1b; }
.flash-info{ background:#dbeafe; color:#1e40af; }

/* ===== ログイン等 ===== */
.login-wrap{ max-width:380px; margin:8vh auto; padding:0 16px; }
.login-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); }
.login-card h1{ text-align:center; margin-top:0; color:var(--primary); }

.muted{ color:var(--muted); }
.small{ font-size:13px; }
.mt{ margin-top:16px; }
.right{ text-align:right; }
.center{ text-align:center; }

.club-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ===== ビュー切替タブ ===== */
.view-tabs{ display:inline-flex; gap:4px; }

/* ===== 曜日ピッカー ===== */
.weekday-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.wd-chip{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-weight:600; user-select:none; background:var(--input-bg); }
.wd-chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.wd-chip:has(input:checked){ background:var(--primary); border-color:var(--primary); }
.wd-chip:has(input:checked) span{ color:#fff !important; }

/* ===== カレンダー ===== */
.cal-scroll{ overflow-x:auto; }
.cal-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:13px; color:var(--muted); }
.cal-legend span{ display:inline-flex; align-items:center; }
.cal-legend .lg{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; }
.cal-sun{ color:var(--danger); }
.cal-sat{ color:var(--primary); }

table.calendar{ width:100%; min-width:700px; border-collapse:collapse; table-layout:fixed; background:var(--card); }
table.calendar th{ border:1px solid var(--border); background:var(--surface-2); color:var(--muted); font-size:12px; padding:6px 0; text-align:center; }
table.calendar td{ border:1px solid var(--border); width:14.28%; height:96px; vertical-align:top; padding:4px; }
table.calendar td.other{ background:var(--surface-2); }
table.calendar td.other .daynum{ color:var(--muted); opacity:.6; }
table.calendar td.today{ background:var(--accent-soft); }
.calendar .daynum{ font-size:12px; font-weight:600; margin-bottom:3px; }
.cal-cell{ cursor:pointer; }
.daynum-link{ display:inline-block; text-decoration:none; color:inherit; }
.daynum-link:hover{ text-decoration:underline; }
.weekcol h3 .daynum-link{ color:inherit; }
.evt{ display:block; font-size:11px; line-height:1.4; color:#fff; background:var(--primary); border-radius:6px; padding:1px 5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt:hover{ text-decoration:none; opacity:.88; }
.more{ font-size:11px; color:var(--muted); margin-top:2px; }

.weekgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; min-width:760px; }
.weekcol{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:6px; min-height:150px; }
.weekcol.today{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.weekcol h3{ font-size:12px; margin:0 0 6px; text-align:center; line-height:1.3; }
.wk-evt{ display:block; font-size:12px; line-height:1.35; color:#fff; background:var(--primary); border-radius:8px; padding:3px 6px; margin-bottom:4px; }
.wk-evt:hover{ text-decoration:none; opacity:.88; }

/* スマホ: カレンダーを画面内に収める(横スクロールを出さない) */
@media (max-width:640px){
  .cal-scroll{ overflow-x:visible; }
  table.calendar{ min-width:0; }
  table.calendar th{ font-size:10px; padding:4px 0; }
  table.calendar td{ height:62px; padding:2px; }
  .calendar .daynum{ font-size:11px; margin-bottom:2px; }
  .evt{ font-size:9px; padding:1px 3px; border-radius:4px; }
  .more{ font-size:9px; }
  /* 週表示は縦積み(各曜日を1行) */
  .weekgrid{ min-width:0; grid-template-columns:1fr; }
  .weekcol{ min-height:auto; }

  /* 月カレンダーを画面下部(メニュー付近)まで縦に広げ、下の空白をなくす */
  .app-content{ display:flex; flex-direction:column; min-height:100dvh; }
  .container{ flex:1 0 auto; display:flex; flex-direction:column; }
  .card.cal-grow{ flex:1; display:flex; flex-direction:column; margin-bottom:0; }
  .card.cal-grow .cal-scroll{ flex:1; display:flex; }
  .card.cal-grow table.calendar{ height:100%; }
  .footer{ margin-bottom:64px; }
}

/* ===== 現在位置 ===== */
.loc-controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
#map{ width:100%; }
.leaflet-popup-content{ font-size:13px; }

/* ===== QR招待(印刷) ===== */
.qr-sheet{ text-align:center; }
.qr-box{ display:inline-block; padding:16px; background:#fff; border:1px solid var(--border); border-radius:10px; margin:12px 0; }
.qr-box canvas, .qr-box img{ display:block; }
.qr-url{ font-size:13px; word-break:break-all; color:var(--muted); max-width:320px; margin:8px auto 0; }
.print-title{ display:none; }
@media print{
  .topbar, .footer, .actions, .no-print{ display:none !important; }
  body{ background:#fff; color:#000; }
  .container{ padding:0; }
  .card{ border:none; box-shadow:none; }
  .print-title{ display:block; font-size:22px; margin-bottom:8px; color:#000; }
  .qr-box{ border-color:#ccc; }
}

/* 論理削除(サービス停止)行 */
tr.row-suspended td{ background:var(--suspend-bg); color:var(--muted); }
tr.row-suspended td strong{ color:inherit; }