/* === AUTO-GENERATED by `manage.py bundle_css` — このファイルは直接編集しない === */

/* ---- style.css ---- */

/* ---- calendar.css ---- */
/* =========================================================
   calendar.css（club_home カレンダー専用）
   目的：
   - れんらくアプリ風ヘッダー
   - カレンダー本体（コンパクト）
   - カレンダー内イベントピル（セル幅いっぱい・中央寄せ）
   色は base.css の theme vars を使用：
     --accent, --accent-dark, --accent-soft, --accent-border
   ========================================================= */


/* =========================
   0) 変えやすい調整パラメータ（サイズ/余白だけ）
   ※ 色は base.css の var(--accent...) を使う
   ========================= */
:root{
  --cal-line: #f0f1f3;

  --cell-h: 80px;
  --cell-pad-y: 4px;
  --cell-pad-x: 4px;

  --date-size: 12px;
  --date-w: 20px;
  --date-h: 20px;

  --pill-h: 22px;
  --pill-font: 12px;
  --pill-radius: 8px;
  --pill-side-gap: 12px; /* セル左右余白（pill幅の引き算用） */

  /* 日曜だけは注意色として固定（テーマと独立） */
  --cal-sun: #e55b5b;
}


/* =========================
   1) ヘッダー（れんらくアプリ風）
   ========================= */
.calendar-nav.cal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  /* テーマ色 */
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color:#fff;

  padding: 2px 12px;
  border-radius:10px;
  margin: 6px 0;

  /* ちょい立体感（好み） */
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.cal-nav-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  text-decoration:none;
  font-size:26px;
  line-height:1;
  border-radius:18px;
}
.cal-nav-btn:hover{ background: rgba(255,255,255,0.12); }

.cal-title-area{
  display:flex;
  align-items:center;
  gap:10px;
}

.cal-title{
  font-size:18px;
  letter-spacing:0.5px;
}

.cal-today-btn{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  padding:1px 12px;
  border:2px solid rgba(255,255,255,0.55);
  border-radius:999px;
}
.cal-today-btn:hover{
  border-color: rgba(255,255,255,0.85);
}


/* =========================
   2) カレンダー本体
   ========================= */
.practice-calendar{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;

  background:#fff;
  border-radius:10px;
  overflow:hidden;
  font-size: 0.85rem;

  /* 既存の table/th/td 直書きCSSがあっても
     ここは “見た目の枠” をこちらで決める */
}

/* 曜日行 */
.practice-calendar thead th{
  border:none;
  padding: 2px 0;
  font-size:0.8rem;
  font-weight:700;
  background:#fff;
  color:#9aa0a6;
}

/* 土日（ヘッダー） */
.practice-calendar thead th.weekend{ color: var(--accent); }  /* SAT */
.practice-calendar thead th:last-child{ color: var(--cal-sun); } /* SUN */

/* 日セル */
.practice-calendar tbody td{
  border:none;
  height: var(--cell-h);
  vertical-align:top;
  padding: var(--cell-pad-y) var(--cell-pad-x);
  position:relative;
}

/* 週の区切り（横線） */
.practice-calendar tbody tr + tr td{
  border-top: 1px solid var(--cal-line);
}

/* 列の区切り（縦線） */
.practice-calendar tbody td + td{
  border-left: 1px solid var(--cal-line);
}

/* 他月セル */
.practice-calendar td.other-month{
  background:#fafafa;
  color:#c7c7c7;
}

/* 日付数字 */
.day-number{
  font-size: var(--date-size);
  font-weight:600;
  color:#333;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: var(--date-w);
  height: var(--date-h);
  border-radius: 999px;
  margin-bottom: 2px;
}

/* 土曜（6列目） */
.practice-calendar tbody td:nth-child(6) .day-number{
  color: var(--accent);
}

/* 日曜（7列目） */
.practice-calendar tbody td:nth-child(7) .day-number{
  color: var(--cal-sun);
}

/* 今日の丸 */
.day-cell.today .day-number{
  background: var(--accent);
  color:#fff !important;
}

/* 今日セルをほんのり面で強調（好み） */
.day-cell.today{
  background: var(--accent-soft);
}


/* =========================
   3) カレンダー内イベント表示（ピル）
   ========================= */

/* 外側の箱は消す */
.event-card{
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ピルの配置：セル中央寄せ */
.day-cell .event-title{
  display:flex;
  justify-content:center;
}

/* ピル本体：a と span(cal-event-link) を同じ見た目にする */
.event-card .event-title a,
.event-card .event-title .cal-event-link{
  display:block;
  width: calc(100% - var(--pill-side-gap));
  margin: 0 auto;

  height: var(--pill-h);
  line-height: var(--pill-h);

  padding: 0 8px;
  border-radius: var(--pill-radius);

  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color:#fff;

  font-size: var(--pill-font);
  text-align:center;
  text-decoration:none;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}


.event-card .event-title a:hover{
  filter: brightness(0.98);
}



/* =========================
   4) “この画面では見せない”要素（保険）
   ========================= */
.practice-calendar .event-flags,
.practice-calendar .event-flag-actions{
  display:none;
}


/* =========================================================
   Calendar: cancelled event = simple greyed out
   (no border, no strike, keep original background)
   ========================================================= */

.cal-event.is-cancelled {
  opacity: 0.35;            /* ← グレーアウトの強さ（0.25〜0.45で調整） */
  filter: grayscale(0.85);  /* 色味を落とす */
  box-shadow: none !important;
}

/* 既存の背景色や枠は維持（白地化・黒枠化しない）
   念のため「取り消し線」は完全禁止 */
.cal-event.is-cancelled,
.cal-event.is-cancelled * {
  text-decoration: none !important;
}

/* 一般ユーザー側：クリック不可に“見せる”だけ（実際の無効化は JS で止める） */
.cal-event.is-cancelled.is-public-lock {
  cursor: default !important;
  pointer-events: auto; /* JSで止めるのでautoのまま */
}

/* ===============================
   ランキング表（戦績表）の列幅最適化
   - 順位は内容に応じた最小幅
   - 名前はセル内で折り返さない（長い名前でもそのまま表示）
   - 全体は必要なら横スクロール
   =============================== */
.rank-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 順位列：最小幅・中央寄せ・折り返し禁止
   （モバイルの !important ルールに負けないようこちらも !important） */
.rank-table th:first-child,
.rank-table td:first-child {
  width: 1% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* 名前列：折り返し禁止（長い名前でも縦に積まれない） */
.rank-table th:nth-child(2),
.rank-table td:nth-child(2) {
  white-space: nowrap !important;
} 

/* ---- index.css ---- */
/* ===============================
   index.html 専用スタイル
   （横方向のみ中央寄せ）
   =============================== */

.index-wrap {
  max-width: 720px;
  margin: 0 auto;        /* ← 水平方向だけ中央 */
  padding: 28px 16px;
  text-align: center;
}

/* フォーム全体 */
.index-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ラベル + 入力欄を中央に */
.index-field-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.index-field-row label {
  margin: 0;
  font-weight: 600;
}

.index-field-row input[type="text"] {
  width: 260px;
  max-width: 100%;
}

/* エラーメッセージ（中央配置） */
.index-alert {
  display: inline-block;
  text-align: left;
  max-width: 640px;
  width: 100%;
}

.club-name-input{
  width: min(360px, 92vw);
  padding: 10px 12px;

  border: none;
  border-radius: 10px;
  outline: none;

  background: #f3f6ff;
  font-size: 0.95rem;
  font-weight: 600;
}
/* トップ（クラブ登録）ページのブランド表示 */
.brand-logo {
  display: block;
  width: min(420px, 90%);
  height: auto;
  margin: 0 auto 20px;
}
.brand-tagline {
  color: #666;
  margin: 0 0 28px;
  font-size: 0.95rem;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- admin.css ---- */
/* =========================================
   ヘッダー側のピルボタン（対戦条件）
   ========================================= */

.match-settings-bar {
    margin: 10px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 左に条件ピル、右に公開ボタン */
    gap: 12px;
}

.match-pill-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 共通ピル（テニスベア風） */
.settings-pill {
    border-radius: 999px;
    border: 1px solid #2ecc71;
    padding: 4px 14px;
    background: linear-gradient(180deg, #33d47b, #29b864);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 3px 0 #1f8e4a;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        opacity 0.15s ease;
}

.settings-pill:hover {
    background: linear-gradient(180deg, #2fc972, #25a95a);
    box-shadow: 0 4px 0 #1a783f;
    transform: translateY(-1px);
}

.settings-pill:active {
    box-shadow: 0 1px 0 #1a783f;
    transform: translateY(1px);
}

/* 将来シングルス／ダブルスで差を出したいとき用 */
.game-type-pill.pill-singles,
.game-type-pill.pill-doubles {
    /* ここにスタイルを追加可能 */
}

/* ▼マーク */
.settings-pill .caret {
    margin-left: 4px;
    font-size: 0.8em;
}

/* 公開ボタン */
.publish-pill {
    margin-left: auto;
}

/* 無効状態（グレーアウト） */
.pill-disabled {
    background: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
    cursor: default !important;
    box-shadow: none !important;
    transform: none !important;
}



/* =========================================
   対戦表（テニスベア風）
   ========================================= */

.tb-schedule {
    margin-top: 8px;
}

/* ラウンド単位 */
.tb-round {
    margin-bottom: 24px;
}

.tb-round-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.tb-round-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 24px;
    border-radius: 6px;
    background: #181f4b;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 8px;
}

.tb-round-title {
    font-weight: 600;
    color: #333;
}



/* 4枚の名前カード＋中央vs */
.tb-match-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.tb-team {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 名前カード（固定幅） */
.tb-player-card {
    width: 120px;
    padding: 8px 4px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #fff;
    /* flex 中央寄せ：名前が長くても中心を軸に左右両端へ均等に溢れさせる
       （text-align:center だと溢れた1行は右だけにはみ出すため） */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    box-sizing: border-box;
    white-space: nowrap;
}

/* vs ＆ 将来のスコア欄 */
.tb-score-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 80px;
}

.tb-score {
    width: 32px;
    text-align: center;
    font-weight: 700;
    color: #444;
    font-size: 1rem;
    cursor: pointer;     /* クリックできる感じに */
}

/* クリック時に出す入力欄 */
.tb-score-input {
    width: 32px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* スピンボタン消す */
.tb-score-input::-webkit-inner-spin-button,
.tb-score-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-score-input {
    -moz-appearance: textfield;
}

.tb-vs {
    font-weight: 700;
    font-size: 0.9rem;
    color: #777;
}

/* 試合が組めないラウンド */
.tb-no-match {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    color: #666;
}

/* 休憩表示 */
.tb-rest-row {
    margin-top: 6px;
    font-size: 0.95rem;   /* 名前カードと同じ */
    color: #333;          /* 薄くしない */
    display: flex;
    align-items: center;
}

.tb-rest-label {
    font-weight: 600;     /* 強調 */
}

.tb-rest-names {
    margin-left: 6px;
    font-weight: 600;     /* 名前もカードと同じく太め */
}


/* =========================================
   参加者一覧（カードレイアウト）
   ========================================= */

#participants-table {
    width: 100%;
    table-layout: fixed;       /* colgroup の幅を優先 */
    border-collapse: separate;
    border-spacing: 0 6px;     /* 行間に余白 */
}

/* ヘッダー */
#participants-table th {
    border: none;
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* 通常セル */
#participants-table td {
    border: none;
    padding: 4px 8px;
    vertical-align: middle;
}

/* 左端の番号 */
#participants-table .participant-index {
    width: 32px;
    text-align: right;
    color: #777;
    font-size: 0.8rem;
}

/* チェックボックス列 */
#participants-table .checkbox-cell {
    text-align: center;
}



/* 行ホバー時の薄いハイライト */
#participants-table tbody tr:hover td {
    background: #fafafa;
}
/* ---- base.css ---- */
/* ===========================
   base.css  完全版
   =========================== */

/* =========================================================
   Base Theme Variables (Member / Admin)
   ========================================================= */

/* Default = 一般（青） */
:root {
  --accent: #3b82f6;         /* blue-500 */
  --accent-dark: #1e40af;    /* blue-900 */
  --accent-soft: #eff6ff;    /* blue-50 */
  --accent-border: #bfdbfe;  /* blue-200 */

  --text-main: #111827;
  --text-sub: #6b7280;
  --border-base: #d1d5db;
  --bg-soft: #f9fafb;

  /* 共通ピルボタン（緑） */
  --btn: #22c55e;        /* green-500 */
  --btn-dark: #15803d;   /* green-700 */
  --btn-soft: #dcfce7;   /* green-100 */
  --btn-border: #86efac; /* green-300 */
}

/* 幹事（薄い赤） */
body.is-admin {
  --accent: #f87171;         /* red-400 */
  --accent-dark: #dc2626;    /* red-600 */
  --accent-soft: #fef2f2;    /* red-50 */
  --accent-border: #fecaca;  /* red-200 */
}

/* =========================================================
   Reset / Base Elements
   ========================================================= */

body{
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Hiragino Sans",
    "Yu Gothic UI",
    "Microsoft YaHei",
    "PingFang SC",
    "Noto Sans CJK JP",
    sans-serif;
  margin: 0;                 /* ←最重要：上の余白を消す */
  padding: 0;
  color: var(--text-main);
  background: #fff;
}

a {
  text-decoration: none;
  color: var(--accent);
}
a:hover {
  color: var(--accent-dark);
}

hr {
  border: none;
  border-top: 1px solid var(--border-base);
  margin: 16px 0;
}

label {
  display: inline-block;
  min-width: 80px;
}

/* =========================================================
   Layout
   ========================================================= */

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;              /* ←ページ左右の余白はここで持つ */
}

/* 固定バー分だけ下げる（今のままでOK） */
.container.has-fixed-topbar{
  padding-top: calc(56px + 16px);
}

.field {
  margin-bottom: 8px;
}

/* =========================================================
   Tables (base)
   ========================================================= */

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 10px;
}

th,
td {
  border: 1px solid var(--border-base);
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}

th {
  background: var(--bg-soft);
  font-weight: 600;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  border: none;
  background: none;
  cursor: pointer;
}

/* =========================================================
   Pill Buttons (Reusable)
   - modal の btn-primary を “正” として共通化
   ========================================================= */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid var(--btn-border);
  padding: 6px 18px;

  /* 互換性重視で固定色（元の「正」） */
  background: linear-gradient(180deg, #33d47b, #29b864);
  color: #ffffff;

  cursor: pointer;
  font-size: 1.05rem;
  /* font-weight: 600; */

  box-shadow: 0 3px 0 #1f8e4a;

  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.btn-pill:hover {
  background: linear-gradient(180deg, #2fc972, #25a95a);
  box-shadow: 0 4px 0 #1a783f;
  transform: translateY(-1px);
  color: #ffffff;  /* admin の a:hover 赤(--accent-dark)に上書きさせない */
}

.btn-pill:active {
  box-shadow: 0 1px 0 #1a783f;
  transform: translateY(1px);
}

/* ピルの視認性を少し上げたい場合（任意） */
/*
.btn-pill:focus-visible {
  outline: 3px solid rgba(34,197,94,0.25);
  outline-offset: 2px;
}
*/

/* =========================================================
   Utility
   ========================================================= */

/* 長いURLを折り返して表示 */
.wrap-url {
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* テーマ追従ボックス（URL表示など） */
.theme-box {
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 6px;
}

/* =========================================================
   Header Topbar (Reusable / Content-width)
   base.html の .topbar を想定
   ========================================================= */

.topbar{
  /* 背景は画面いっぱい（左右いっぱいに伸ばす） */
  width: 100%;
  margin: 0;

  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);

  border-radius: 0;
}

/* 固定：全幅で固定 */
.topbar--fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

/* 中身はページ本文(.container)と同じ幅で中央寄せ・パディングは維持 */
.topbar-inner{
  position: relative;        /* ハンバーガー時のドロップダウン配置基準 */
  max-width: 980px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 0 16px;
}

.topbar-title{
  display: flex;
  align-items: center;
  min-width: 0;
}
.topbar-logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.topbar-wordmark{
  height: 24px;
  width: auto;
  display: block;
}

.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ハンバーガーボタン：通常時は非表示、狭幅でだけ表示 */
.topbar-hamburger{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;

  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.topbar-hamburger-bar{
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
/* 開いてる時の見た目（×に変形） */
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(2){
  opacity: 0;
}
.topbar-hamburger.is-open .topbar-hamburger-bar:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================
   狭幅時：トップバーアクションをドロップダウン化
   ========================================================= */
@media (max-width: 720px) {
  .topbar-hamburger{
    display: inline-flex;
  }
  .topbar-actions{
    /* 通常は隠す：ハンバーガーで開閉 */
    display: none;

    position: absolute;
    top: 100%;
    right: 8px;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    min-width: 160px;
    padding: 6px 0;

    background: var(--accent);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);

    z-index: 920;
  }
  .topbar-actions.is-open{
    display: flex;
  }
  .topbar-actions .topbar-link{
    padding: 10px 16px;
    border-radius: 0;
    text-align: left;
  }
  .topbar-actions .topbar-link:hover{
    background: rgba(255,255,255,0.12);
    text-decoration: none;
  }
  /* 縦並びリンク間の薄い区切り */
  .topbar-actions .topbar-link + .topbar-link{
    border-top: 1px solid rgba(255,255,255,0.18);
  }
}

/* =========================================================
   Page Topbar (Reusable / Content-width)
   ========================================================= */

.page-topbar{
  margin: 0 0 16px; /* 下のコンテンツとの間隔 */
}

/* 中央寄せ・コンテンツ幅制御 */
.page-topbar-inner{
  width: min(980px, calc(100% - 32px)); /* ← 既存コンテンツ幅に合わせる */
  margin: 0 auto;

  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* テーマカラーでベタ塗り */
  background: var(--accent);
  color: #fff;

  padding: 0 16px;

  /* ページ用なので角丸なし */
  border-radius: 0;

  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* タイトル */
.page-topbar-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右側操作エリア */
.page-topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 汎用ボタン（必要なページだけ使う） */
.page-topbar-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 0 12px;

  color: #fff;
  text-decoration: none;
  font-weight: 800;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}

.page-topbar-btn:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
}

/* =========================================================
   Section Head (title + right action)
   ========================================================= */

.section-head{
  display: flex;
  align-items: center;
  justify-content: space-between; /* ← 左にタイトル、右にボタン */
  gap: 12px;
  margin: 22px 0 12px;
}

/* ===== 共通の見出し（ヘルプ・戦績ページと統一） ===== */
/* ページ見出し（h1/h2 相当） */
.page-title{
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.3;
}
/* セクション見出し：左にティールの縦バー */
.section-title{
  font-size: 1.15rem;
  font-weight: 700;
  border-left: 4px solid #1f7a8c;
  padding-left: 10px;
  margin: 22px 0 12px;
  line-height: 1.35;
}
/* section-head 内ではバーは出すが、余白は section-head 側に任せる */
.section-head > .section-title{
  margin: 0;
}
/* サブ見出し（h3/h4 相当） */
.subsection-title{
  font-size: 1.02rem;
  font-weight: 700;
  color: #334155;
  margin: 16px 0 6px;
}

.section-head > .btn{
  flex: 0 0 auto; /* ボタンが潰れないように */
}

/* ===== URL box ===== */
.url-box { padding: 12px; }

.url-item { margin-bottom: 10px; }
.url-item:last-of-type { margin-bottom: 0; }

.url-label{
  font-weight: 700;
  margin-bottom: 4px;
}

/* 赤い四角ボタン（ピル禁止） */
.url-copy-btn.red-rect{
  float: right;                 /* ←回り込みの要 */
  margin-left: 10px;
  margin-top: 0px;

  border: 0;
  border-radius: 6px;           /* 四角寄り（角丸少し） */
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;

  color: #fff;
  background: #e74c3c;          /* テーマ赤 */
  box-shadow: 0 2px 6px rgba(231, 76, 60, 0.25);
}

.url-copy-btn.red-rect:hover{ filter: brightness(1.05); }
.url-copy-btn.red-rect:active{ transform: translateY(1px); }

/* URL本文：テキストボックス“風” だが枠線は出さない（今のビジュアル維持） */
.url-textbox{
  display: block;

  /* ★ 折り返し禁止 */
  white-space: nowrap;

  /* ★ はみ出したら横スクロールではなく、そのまま下に回り込ませる */
  overflow: hidden;
  text-overflow: clip;

  padding: 6px 8px;
  background: rgba(255,255,255,0.45);
  border-radius: 6px;

  font-size: 0.85rem;
  color: #444;
}

/* float解除（次のブロックに影響させない） */
.url-item::after{
  content: "";
  display: block;
  clear: both;
}

.url-note{
  margin-top: 8px;
  color: #666;
  font-size: 0.8rem;
}

/* =========================================
   Topbar links (force white text)
   ========================================= */
.topbar .topbar-link {
  color: #ffffff;
}

.topbar .topbar-link:hover {
  color: #ffffff;
  text-decoration: underline; /* ホバー時に分かりやすく */
}

/* =========================================
   Topbar admin badge → link と同じ見た目に
   ========================================= */
.topbar-title .topbar-admin-badge {
  font-weight: normal;          /* 太字をやめる */
  font-size: inherit;           /* 親（クラブ名）に合わせる */
  color: #ffffff;               /* リンクと同じ白 */
  margin-left: 6px;             /* 「-」の後に少し余白 */
}

/* もし既存CSSで bold が強制されている場合の保険 */
.topbar-admin-badge {
  font-weight: normal !important;
}

/* =========================================
   自動削除予告バナー（幹事モード時に表示）
   ========================================= */
.cleanup-warning-banner {
  background: #fdecec;          /* 薄い赤 */
  border: 1px solid #f5b7b7;
  border-left: 4px solid #c0392b;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  color: #6e1414;
  font-size: 0.92rem;
  line-height: 1.55;
}
.cleanup-warning-line + .cleanup-warning-line {
  margin-top: 2px;
}


/* サイトフッター（DeuceNet ワードマーク＋タグライン・アイコン無し） */
.site-footer {
  text-align: center;
  padding: 24px 16px 32px;
  margin-top: 32px;
  border-top: 1px solid #eee;
}
.site-footer-logo {
  height: 22px;
  width: auto;
  max-width: 88%;
  display: block;
  margin: 0 auto;
}
.site-footer-copyright {
  margin: 10px 0 0;
  color: #9aa6b2;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

/* ---- event.css ---- */
/* =========================================================
   Event Header (title + meta bar)
   ========================================================= */

.event-head{
  display:flex;
  align-items:center;
  gap:12px;
}

/* h2 は他ページでも使うので、class で制御 */
.event-title{
  margin:0;           /* ← これが無いと上下余白がズレる */
  line-height:1.2;
}

/* meta bar は右寄せ・文字長に合わせる */
.event-meta-bar{
  margin-left:auto;   /* 右端へ */
  display:inline-flex;
  align-items:center;

  width:fit-content;  /* 文字長に合わせる */
  max-width:70%;

  padding:6px 10px;
  border-radius:10px;
  border:1px solid #e2e5ea;
  background:#f2f3f5;

  color:#444;
  font-size:0.95rem;
  line-height:1.2;
}

/* 文字が長いときは省略 */
.event-meta-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 幹事モード：グレー背景を維持（hoverあり） */
.event-meta-bar.is-admin{
  background:rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.08);
}
.event-meta-bar.is-clickable{ cursor:pointer; }
.event-meta-bar.is-admin.is-clickable:hover{
  background:rgba(0,0,0,0.12);
}

/* 一般モード：枠・背景・余白を完全に消す（表示は右寄せのまま） */
.event-meta-bar.is-public{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;

  padding:0 !important;
  border-radius:0 !important;
}

/* 念のためテキスト側も潰す（どこかで装飾されても無効化） */
.event-meta-bar.is-public .event-meta-text{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* =========================================================
   [Event Page] cancelled tone down
   ========================================================= */

.event-page.is-cancelled {
  opacity: 0.72;
  filter: grayscale(0.25);
}

/* 文字が薄すぎる場合の救済（タイトルは少しだけ濃く） */
.event-page.is-cancelled .event-title,
.event-page.is-cancelled .section-title {
  opacity: 0.95;
}

/* キャンセルバッジ */
.event-cancel-badge {
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.06);
  color: #222;
  font-size: 0.9rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* =========================================
   Event page: Member class select (inherit modal-select look)
   ========================================= */

.member-class-cell {
  /* テーブル内での縦位置がズレやすいので保険 */
  vertical-align: middle;
}

.member-class-select {
  /* 既存 modal-select の見た目を継承 */
  width: 100%;
  max-width: 140px; /* colgroup 140px に合わせる */
  box-sizing: border-box;

  padding: 8px 34px 8px 12px;  /* 右側は矢印分を確保 */
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;

  background: #f3f4f6;
  border: none;
  border-radius: 10px;

  color: #111;
  outline: none;
  box-shadow: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* ▼ 擬似矢印（wrap不要版：SVGを背景として描画） */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* focus時もモーダル寄せ */
.member-class-select:focus {
  background: #eef0f3;
}

/* disabled（guestで member_id なしのとき） */
.member-class-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================
   Event page: Class (public mode) gray pill like comment
   ========================================= */

/* 一般モード：クラスは span なので背景を付ける */
.member-class-text{
  display: inline-block;
  width: 100%;
  max-width: 140px;          /* colgroupに合わせる。必要なら180pxへ */
  box-sizing: border-box;

  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;

  background: #f3f4f6;       /* modal-selectと同じグレー */
  border-radius: 10px;
  color: #111;

  /* 空欄でも高さを確保して見栄えを揃える */
  min-height: 34px;
}

/* 空欄のときは薄く（コメント欄の :empty 表示と同じ思想） */
.member-class-text:empty::before{
  content: " ";
}

/* ---- schedule.css ---- */
/* =========================================
   対戦表（テニスベア風）
   ========================================= */

.tb-schedule {
    margin-top: 8px;
}

/* ラウンド単位 */
.tb-round {
    margin-bottom: 24px;
}

.tb-round-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.tb-round-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 24px;
    border-radius: 6px;
    background: #181f4b;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 8px;
}

.tb-round-title {
    font-weight: 600;
    color: #333;
}

/* ラウンド内のコート群 */
.tb-round-body {
    padding: 4px 16px;
    border-top: 1px solid #eee;     /* 上の線 */
    border-bottom: 1px solid #eee;
}

.tb-court-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #eee;     /* コート間の線 */
}

.tb-court-row:first-child {
    border-top: none;
}

.tb-court-row:last-child {
    border-bottom: none;
}

/* 「Aコート」「Bコート」 */
.tb-court-name {
    width: 56px;
    font-size: 0.9rem;
    color: #555;
}

/* 4枚の名前カード＋中央vs */
.tb-match-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.tb-team {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 名前カード（固定幅） */
.tb-player-card {
    width: 120px;
    padding: 8px 4px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #fff;
    /* flex 中央寄せ：名前が長くても中心を軸に左右両端へ均等に溢れさせる
       （text-align:center だと溢れた1行は右だけにはみ出すため） */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    box-sizing: border-box;
    white-space: nowrap;
}

/* vs ＆ 将来のスコア欄 */
.tb-score-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 80px;
}

.tb-score {
    width: 32px;
    text-align: center;
    font-weight: 700;
    color: #444;
    font-size: 1rem;
    cursor: pointer;     /* クリックできる感じに */
}

/* クリック時に出す入力欄 */
.tb-score-input {
    width: 32px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* スピンボタン消す */
.tb-score-input::-webkit-inner-spin-button,
.tb-score-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tb-score-input {
    -moz-appearance: textfield;
}

.tb-vs {
    font-weight: 700;
    font-size: 0.9rem;
    color: #777;
}

/* 試合が組めないラウンド */
.tb-no-match {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    color: #666;
}

/* 休憩表示 */
.tb-rest-row {
    margin-top: 6px;
    font-size: 0.95rem;   /* 名前カードと同じ */
    color: #333;          /* 薄くしない */
    display: flex;
    align-items: center;
}

.tb-rest-label {
    font-weight: 600;     /* 強調 */
}

.tb-rest-names {
    margin-left: 6px;
    font-weight: 600;     /* 名前もカードと同じく太め */
}



/* ---- modal.css ---- */
/* ===========================
   modal.css  完全版
   =========================== */

/* =========================================
   Modal Base
   - backdrop + open animation
   ========================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);

  display: flex;                 /* 常にflex */
  align-items: center;
  justify-content: center;

  z-index: 1000;

  opacity: 0;
  visibility: hidden;            /* ←これで非表示にする */
  pointer-events: none;

  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 0.25s ease-out, visibility 0s;
}

.modal-content {
  font-size: 16px;
  background: #fff;
  padding: 24px 32px 28px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  text-align: center;

  /* ★ 下から “すっと” 出る */
  transform: translateY(56px);
  opacity: 0;

  transition:
    transform 0.28s ease-out,
    opacity 0.22s ease-out;
}

.modal-backdrop.is-open .modal-content {
  transform: translateY(0);
  opacity: 1;
}

/* 端末が低速のときのチラつき対策（任意） */
.modal-content {
  will-change: transform, opacity;
}

/* タイトル（トップバー無しモーダル用） */
.modal-content h3 {
  margin-top: 4px;
  margin-bottom: 20px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* =========================================
   Modal Form Common
   ========================================= */

.modal-form {
  margin-top: 4px;
}

.modal-close {
  position: absolute;
  right: 12px;
  top: 8px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.modal-form .field-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

/* 人数だけ少し詰める */
.field-group-count {
  margin-bottom: 12px;
}

.modal-form label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
  text-align: center;
  width: 100%;
}

.modal-number {
  font-size: 1.6rem;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.1;
}

.modal-actions {
  margin-top: 8px;
  text-align: center;
}

.modal-form small {
  text-align: center;
}

/* number input common */
.modal-form input[type="number"] {
  border: none;
  background: transparent;
  text-align: center;
  width: 60px;
}

.modal-form input[type="number"]:focus {
  outline: none;
  box-shadow: none;
}

/* hide spin buttons */
.modal-form input[type="number"]::-webkit-inner-spin-button,
.modal-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.modal-form input[type="number"] {
  -moz-appearance: textfield;
}

/* =========================================
   Modal Buttons
   - 見た目は base.css の .btn-pill を使用
   - 互換のため .btn-primary は残す（デザインは持たせない）
   ========================================= */

.modal-actions .btn-primary{
  /* intentionally empty */
}

/* =========================================
   Attendance / Toggle / Stepper (used by condition modal etc.)
   ========================================= */

.attendance-choice-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.attendance-choice {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

/* シングルス／ダブルス トグル */
.toggle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  max-width: 260px;
  width: fit-content;
  margin: 0 auto 8px;
}

.toggle-btn {
  flex: 1;
  min-width: 90px;
  padding: 8px 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.15s ease;
}

.toggle-btn.active {
  background: #2ecc71;
  color: #fff;
  box-shadow: 0 2px 4px rgba(46, 204, 113, 0.35);
}

/* 面数／ラウンド数のステッパー */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.stepper-btn {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

/* 人数ピル */
.count-pill {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  padding: 6px 50px;
  border-radius: 999px;
  color: #333;
  min-width: 90px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* =========================================
   UI Common Modals (message / confirm)
   ========================================= */

.ui-message-content { max-width: 420px; }
.ui-message-body { color: #333; font-weight: 600; }

.ui-confirm-content { max-width: 520px; }
.ui-confirm-body { margin: 12px 0 18px; color: #333; }
.ui-confirm-actions { justify-content: flex-end; }

#ui-message-modal.modal-backdrop,
#ui-confirm-modal.modal-backdrop {
  z-index: 3000; /* 1000 より上ならOK。念のため大きめ */
}

/* =========================================
   Event Modal (settings/club)
   - IMPORTANT: current "win" design = vertical time layout
   ========================================= */

.event-modal { text-align: center; }

/* 日付（表示のみ） */
.event-date-display {
  width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f4f6;
  font-weight: 700;
  color: #374151;
}

/* タイトル入力（event-modal の勝ち定義） */
.event-modal .event-title-input {
  width: 100%;
  max-width: 180px;
  padding: 10px 12px;

  border: none;
  border-radius: 10px;
  outline: none;

  background: #f3f6ff;
  font-size: 0.95rem;
  font-weight: 600;
}

.event-modal .event-title-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.event-modal .event-title-input:focus {
  background: #eaf0ff;
}

/* 時間UI（event-modal の勝ち定義：縦並び） */
.event-modal .time-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.event-modal .time-sep { display: none; }

.event-modal .time-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.event-modal .time-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
  min-width: 40px;
  text-align: right;
}

.event-modal .time-selects {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f5f5f5;
}

.event-modal .time-select {
  appearance: none;
  -webkit-appearance: none;

  border: none;
  background: transparent;

  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

.event-modal .time-colon {
  font-weight: 700;
  color: #666;
}

/* event-modal の field-group は中央寄せを維持 */
.event-modal .field-group {
  align-items: center;
}

/* =========================================
   [COMPAT] Old event-modal-topbar (legacy)
   - Not used by current club-event-modal (should use .modal-topbar)
   - Keep for safety, but isolated here.
   ========================================= */

.event-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;

  padding: 12px 14px;
  border-radius: 14px;
  margin: -8px -8px 14px;
}

.event-modal-title {
  font-weight: 800;
  letter-spacing: 0.3px;
}

.event-modal-x {
  width: 34px;
  height: 34px;
  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;

  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.event-modal-x:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   Modal Topbar (TennisBear-like band)  ★WIN DEFINITION
   - Use on .modal-content by adding .modal-has-topbar
   - No back button required; title + close only.
   ========================================= */

.modal-has-topbar {
  padding-top: 0; /* topbar があるので上余白を消す */
}

/* topbar付きのときだけ、上paddingを0にして帯を上端に密着させる */
.modal-content.modal-has-topbar{
  padding-top: 0;                 /* ← これが肝 */
}

.modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 52px;
  padding: 0 12px;

  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;

  border-radius: 0;

  /* FIX: topbar が上で見切れる問題の対策（負marginを撤去して最小限に） */
  margin-top: 0;
  margin-left: -32px;
  margin-right: -32px;
  margin-bottom: 18px;
}

.modal-topbar-title {
  flex: 1;
  text-align: left;

  font-weight: 800;
  font-size: 18px;
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-topbar-btn {
  width: 40px;
  height: 40px;

  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;

  border-radius: 10px;
}

.modal-topbar-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 編集モーダルのアクションを左右に分離（距離を置く） */
.modal-actions.modal-actions-split{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:14px;
}

/* =========================================================
   イベント中止 / 復活 専用ボタン
   ========================================================= */

/* ラッパー：中央寄せ & 更新ボタンと距離を取る（中止/削除を縦並び） */
.club-event-cancel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* 特別ピルボタン（黒 × 赤） */
.btn-cancel-special {
  position: relative;

  padding: 10px 26px;
  border-radius: 999px;

  background: #111;              /* 黒地 */
  color: #ff4d4d;                /* 赤文字 */
  border: 2px solid #ff4d4d;     /* 赤枠 */

  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;

  cursor: pointer;
  transition: all 0.18s ease;

  /* ★既存の緑レイヤー・影を完全無効化 */
  box-shadow: none !important;
}

/* 疑似要素で入ってくる影・グラデーションを殺す */
.btn-cancel-special::before,
.btn-cancel-special::after {
  content: none !important;
}

/* hover：少しだけ赤を強調 */
.btn-cancel-special:hover {
  background: #1a1a1a;
  color: #ff6b6b;
  border-color: #ff6b6b;

  /* 黒に自然な赤影 */
  box-shadow: 0 6px 16px rgba(255, 77, 77, 0.25);
}

/* active（押下時） */
.btn-cancel-special:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(255, 77, 77, 0.18);
}

/* フォーカスリング（アクセシビリティ） */
.btn-cancel-special:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 77, 77, 0.35),
    0 6px 16px rgba(255, 77, 77, 0.25);
}

/* =========================================================
   イベント削除ボタン（白×赤）
   ・btn-cancel-special と同サイズ
   ・中止中イベントのみ表示
   ========================================================= */
.btn-delete-special {
  position: relative;

  padding: 10px 26px;
  border-radius: 999px;

  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;

  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;

  cursor: pointer;
  transition: all 0.18s ease;

  box-shadow: none !important;
}
.btn-delete-special::before,
.btn-delete-special::after {
  content: none !important;
}
.btn-delete-special:hover {
  background: #fff5f5;
  color: #dc2626;          /* admin の a:hover で上書きされても固定 */
  border-color: #dc2626;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.18);
}
.btn-delete-special:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.18);
}
.btn-delete-special:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(220, 38, 38, 0.30),
    0 6px 16px rgba(220, 38, 38, 0.18);
}

/* =========================================================
   更新ボタン（disabled時の視覚調整）
   ※ event.js 側で pill-disabled を付ける前提
   ========================================================= */

#club-event-submit-btn.pill-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}

#club-event-submit-btn.pill-disabled::before,
#club-event-submit-btn.pill-disabled::after {
  content: none !important;
}

/* =========================================
   Substitute modal select (gray / borderless)
   ========================================= */
.modal-select-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;      /* 好みで */
}

.modal-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;

  background: #f3f4f6;   /* グレー背景 */
  border: none;          /* 枠なし */
  border-radius: 10px;

  color: #111;
  outline: none;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
}

/* focus時もイベント作成モーダル寄せ */
.modal-select:focus {
  background: #eef0f3;
}

/* ▼ 擬似矢印 */
.modal-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}

#substitute-modal .modal-select-wrap {
  width: 80%;
  margin: 0 auto;   /* 中央寄せ */
}

/* flag-add-modal の「入力形式」だけ、フラグ名inputと完全に同じ幅・見た目にする */
#flag-add-modal .event-title-input,
#flag-add-modal #flag-add-input-mode.flag-input-mode-select{
  width: 180px;            /* ★ここを完全固定にする（見た目ズレ防止） */
  max-width: none;         /* ★max-width運用をやめる */
  box-sizing: border-box;

  padding: 10px 12px;      /* ★ input と統一 */
  border: none;
  border-radius: 10px;
  outline: none;

  background: #f3f6ff;     /* ★ input と統一 */
  font-size: 0.95rem;
  font-weight: 600;

  display: block;          /* ★ selectの微妙な縮み対策 */
}

/* focus も input に寄せる */
#flag-add-modal .event-title-input:focus,
#flag-add-modal #flag-add-input-mode.flag-input-mode-select:focus{
  background: #eaf0ff;
}

/* select 固有（見た目安定） */
#flag-add-modal #flag-add-input-mode.flag-input-mode-select{
  height: auto;            /* 念のため */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* =========================================
   Attendance / Flag modal – 二重枠の完全排除（最終勝ち）
   フラグ用モーダルも出欠モーダルと同じ見た目に揃える
   ========================================= */
#attendance-modal .attendance-choice,
#club-flag-toggle-modal .attendance-choice,
#event-flag-toggle-modal .attendance-choice{
  border: 1px solid #e5e7eb;   /* 外枠は残す */
}

#attendance-modal .attendance-choice .attendance-icon,
#club-flag-toggle-modal .attendance-choice .attendance-icon,
#event-flag-toggle-modal .attendance-choice .attendance-icon{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================
   club-event-modal: primary buttons block
   ========================================= */

/* ボタン2つを同じ幅で縦並びにする */
#club-event-modal .club-event-primary-buttons{
  width: 100%;
  max-width: 180px;     /* ← input(=event-title-input)と同じ基準 */
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

/* 2つとも完全に同じ外寸にする（border分のズレを根絶） */
#club-event-modal .club-event-primary-buttons .btn{
  width: 100%;
  box-sizing: border-box;
}

/* 主ボタン側にも透明borderを与えて、副ボタン(2px)と外寸を一致させる */
#club-event-modal .club-event-primary-buttons .btn.btn-primary:not(.btn-display-settings){
  border: 2px solid transparent;
}

/* 表示設定：副ボタン（白地＋緑枠） */
#club-event-modal .btn-display-settings{
  background: #fff !important;
  color: #16a34a !important;

  border: 2px solid #16a34a !important;
  box-shadow: none !important;
}
#club-event-modal .btn-display-settings:hover{
  background: rgba(22,163,74,0.08) !important;
}

/* （任意）編集モーダルの縦間隔を少し詰める */
#club-event-modal .modal-form .field-group{
  margin-bottom: 18px;
}
/* 中止/復活：幅は揃えたまま、少し下に落として「別グループ感」を作る */
#club-event-modal .club-event-cancel-wrap{
  width: 100%;
  max-width: 196px;
  margin: 26px auto 0;          /* ← ここを少し増やす（22〜30で好み） */
  border-top: none;
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;


  display: flex;
  justify-content: center;
}

/* 中止ボタンが「表示されているときだけ」区切り線を出す */
#club-event-modal
  .club-event-cancel-wrap:has(#club-event-cancel-toggle:not([style*="display:none"])){
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* ============================
   Cancel / Restore button (square danger)
   ============================ */

#club-event-modal #club-event-cancel-toggle{
  width: 100%;
  box-sizing: border-box;

  /* 形状：ピルをやめる */
  border-radius: 0px;          /* ← 四角寄り（6〜10で調整可） */

  /* 色：黒地＋赤文字 */
  background: #111;
  color: #ff4d4d;

  /* 枠は完全撤去 */
  border: none;
  box-shadow: none !important;

  /* サイズ感：主ボタンと高さを揃える */
  padding: 10px 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;

  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

/* hover：赤を少しだけ強める */
#club-event-modal #club-event-cancel-toggle:hover{
  background: #1a1a1a;
  color: #ff6b6b;
  box-shadow: 0 8px 18px rgba(255,77,77,0.18);
}

/* active：軽く沈む */
#club-event-modal #club-event-cancel-toggle:active{
  transform: translateY(1px);
}

/* focus-visible：アクセシビリティ */
#club-event-modal #club-event-cancel-toggle:focus-visible{
  outline: none;
}

/* ============================
   イベント削除ボタン：中止取り消しと同じ形状（四角・全幅）に揃える
   ・色：白背景 / 赤枠 / 赤文字（btn-delete-special を維持）
   ・枠は表示するため border-radius は 0、枠は維持
   ============================ */
#club-event-modal #club-event-delete-btn{
  width: 100%;
  box-sizing: border-box;

  /* 形状：中止取り消しボタンと統一 */
  border-radius: 0px;
  padding: 10px 0;

  background: #ffffff;
  color: #dc2626;
  border: 2px solid #dc2626;
  box-shadow: none !important;

  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;

  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
#club-event-modal #club-event-delete-btn:hover{
  background: #fff5f5;
  color: #dc2626;
  border-color: #dc2626;
  box-shadow: 0 8px 18px rgba(220,38,38,0.18);
}
#club-event-modal #club-event-delete-btn:active{
  transform: translateY(1px);
}
#club-event-modal #club-event-delete-btn:focus-visible{
  outline: none;
}

/* =========================================
   Display Settings Modal - FIX (button toggle version)
   ========================================= */

/* このモーダルだけ field-group の中央寄せを無効化 */
#display-settings-modal .modal-form .field-group{
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* リスト全体：中央に置く */
#display-settings-modal .ds-list{
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

/* 1行：チェックボタン + ラベル */
#display-settings-modal .ds-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  padding: 8px 0;
}

/* ラベルが縦にならないように強制 */
#display-settings-modal .ds-label{
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;

  font-size: 0.98rem;
  font-weight: 700;
  padding-left: 0;          /* ← 余計なズレを消す */
}

/* ★重要：display-settings-modal 内だけ check-btn をアイコンサイズに固定 */
#display-settings-modal .check-btn.ds-toggle{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  padding: 0 !important;      /* ← padding-left:30px を殺す */
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* check-icon の見え方が崩れるなら（保険） */
#display-settings-modal .check-btn.ds-toggle .check-icon{
  line-height: 1;
}

/* 行ごと押せる方が自然なら：ds-rowをクリックでトグルさせる（JS側で対応） */
#display-settings-modal .ds-row{
  cursor: pointer;
}

/* 表示設定モーダルは club-event-modal より必ず上に出す */
#display-settings-modal.modal-backdrop{
  z-index: 3500; /* ui-message(3000)より上でもOK。好みで 3200〜4000 */
}

/* ============================================================
   設定ページ「デフォルト表示設定」フォーム（モーダル外でも ds-list を流用）
   - 表示設定モーダルと意匠を統一（フォント・アイコン）
   ============================================================ */
#club-display-settings-form .ds-list{
  width: 100%;
  max-width: 260px;
}
#club-display-settings-form .ds-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
#club-display-settings-form .ds-label{
  white-space: nowrap;
  font-size: 0.98rem;
  font-weight: 700;
}
#club-display-settings-form .check-btn.ds-toggle{
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#club-display-settings-form .check-btn.ds-toggle .check-icon{
  line-height: 1;
}

/* ============================================================
   戦績ランキングのルール（設定ページ）
   ============================================================ */
#club-ranking-settings-form{
  max-width: 420px;
  margin: 0 0 12px;
}
#club-ranking-settings-form .rk-presets{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
#club-ranking-settings-form .rk-preset{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
#club-ranking-settings-form .rk-preset input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex: 0 0 auto;
}
#club-ranking-settings-form .rk-preset-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#club-ranking-settings-form .rk-preset-name{
  font-weight: 700;
  font-size: 0.98rem;
}
#club-ranking-settings-form .rk-preset-desc{
  font-size: 0.82rem;
  color: #666;
  line-height: 1.4;
}
#club-ranking-settings-form .rk-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
#club-ranking-settings-form .rk-label-wrap{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 5px;
}
#club-ranking-settings-form .check-btn.rk-toggle{
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#club-ranking-settings-form .check-btn.rk-toggle .check-icon{
  line-height: 1;
}
#club-ranking-settings-form .rk-label{
  font-size: 0.95rem;
}
#club-ranking-settings-form .rk-field{
  margin-bottom: 14px;
}
#club-ranking-settings-form .rk-field-label{
  display: block;
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
  margin-bottom: 6px;
}
#club-ranking-settings-form .rk-field-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#club-ranking-settings-form .rk-field-inline .rk-field-label{
  margin-bottom: 0;
}
#club-ranking-settings-form .rk-points-inputs{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#club-ranking-settings-form .rk-points-inputs label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}
#club-ranking-settings-form input[type="number"]{
  width: 64px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
}
#club-ranking-settings-form .rk-hint{
  font-size: 0.8rem;
  color: #888;
}
/* そのプリセットで使わない項目（グレーアウト＝編集不可） */
#club-ranking-settings-form .rk-disabled{
  opacity: 0.5;
}
#club-ranking-settings-form .rk-disabled .rk-field-label{
  color: #999;
}
#club-ranking-settings-form input:disabled{
  background: #f0f0f0;
  cursor: not-allowed;
}

.event-modal .event-flag-name-input {
  width: 100%;
  max-width: 180px;
  padding: 10px 12px;

  border: none;
  border-radius: 10px;
  outline: none;

  background: #f3f6ff;
  font-size: 0.95rem;
  font-weight: 600;
}

.event-modal .event-flag-name-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

.event-modal .event-flag-name-input:focus {
  background: #eaf0ff;
}

/* =========================================================
   表示設定：固有フラグ「編集」ピル（白地＋緑枠＋緑文字）
   ※ club-event-modal の btn-display-settings と同系色
   ========================================================= */

/* 固有フラグ行を「左：チェック / 右：編集」にする */
#display-settings-modal .ds-item.ds-item-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* スリムなピル */
#display-settings-modal .pill-edit-event-flags{
  background: #fff !important;
  color: #16a34a !important;

  border: 2px solid #16a34a !important;
  box-shadow: none !important;

  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 999px;
  min-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}

#display-settings-modal .pill-edit-event-flags:hover{
  background: rgba(22,163,74,0.08) !important;
}

#display-settings-modal .pill-edit-event-flags:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- participants.css ---- */
/* tennis/static/tennis/participants.css */

/* =========================================
   参加者一覧（カードレイアウト）
   ========================================= */

#participants-table {
    width: max-content;      /* ★中身の合計幅で止める（左に詰まる） */
    max-width: 100%;         /* ★画面より大きい場合の保険 */
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 6px;
}

/* ヘッダー */
#participants-table th {
    border: none;
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* 通常セル */
#participants-table td {
    border: none;
    padding: 4px 8px;
    vertical-align: middle;
}

/* 連番セル：幅を詰める（★修正） */
#participants-table td.participant-index{
  width: 22px;           /* ★列幅を固定で小さく */
  padding: 0 4px;        /* ★左右paddingを削って左に詰める */
}

/* ラッパー：右寄せにする（★修正） */
#participants-table td.participant-index .idx{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;  /* ★中央→右寄せ */

  height: 100%;
  min-height: 34px;
  width: 100%;               /* ★右寄せを確実に効かせる */
}




/* チェックボックス列 */
#participants-table .checkbox-cell {
    text-align: center;
}

/* 対戦表の名前カードのミニ版 */
.tb-player-card-sm {
    display: inline-block;
    width: 116px;      /* 対戦表より少し小さめ */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #fff;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    box-sizing: border-box;
    white-space: nowrap;
}

/* 名前部分（個人ページへのリンク）：下線・色は親に合わせる */
.tb-player-card-sm a.name-link,
.tb-player-card-sm a.name-link:visited {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.tb-player-card-sm a.name-link:hover {
    color: #1f7a8c;
}

/* 退会者・過去イベントのゲスト：名前の後ろに付けるアスタリスク */
.withdrawn-mark {
    margin-left: 3px;
    color: #000;
    font-weight: 700;
}
/* 名前カード自体のホバー枠（リンク化に伴う視覚補助） */
.tb-player-card-sm:focus-within {
    outline: 2px solid #1f7a8c;
    outline-offset: 1px;
}

/* 行ホバー時の薄いハイライト */
#participants-table tbody tr:hover td {
    background: #fafafa;
}

/* ===== settings: 出欠（チェック表示の見た目） ===== */
.attendance-cell { text-align: center; }

.attendance-btn{
  border: none !important;          /* ←枠を消す */
  background: transparent !important;
  padding: 2px 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

/* 出欠：カラム中央に固定 */
.attendance-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;          /* ★セル幅いっぱいを基準に中央化 */
  padding: 0;           /* ★左右paddingで中心がズレるのを防ぐ */
}

.attendance-btn:focus{ outline: none; }
.attendance-btn:active{ transform: translateY(1px); }

.attendance-icon{
  display: inline-flex;           /* ★ inline-block → inline-flex */
  align-items: center;            /* ★縦中央 */
  justify-content: center;        /* ★横中央 */

  width: 26px;
  height: 26px;
  box-sizing: border-box;         /* ★枠込みで26pxに固定 */

  border: 1.5px solid #d1d5db;
  border-radius: 4px;

  font-size: 20px;                /* ★check-icon と揃える（今 22px なのでズレやすい） */
  font-weight: 900;
  line-height: 1;                 /* これはOK */
}

.attendance-none {
  /* 表示なし（空） */
}

/* 色イメージ（調整さん風） */
.attendance-yes  { color: #16a34a; }  /* 濃い緑 */
.attendance-no   { color: #cbd5e1; }  /* 薄いグレー */
.attendance-maybe{ color: #86efac; }  /* 薄い緑 */



/* ===== コメント（グレーのテキストボックス風：モーダル入力欄に寄せる） ===== */
.comment-editable{
  min-height: 34px;
  padding: 8px 10px;


  border-radius: 10px;
  background: #f2f3f5;

  outline: none;
  text-align: left;

  /* 文章が長い時に自然に折り返す */
  white-space: normal;
  word-break: break-word;

  /* セル幅いっぱいに */
  width: 100%;
  box-sizing: border-box;

  /* 触った感（inputっぽさ） */
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* hover/active で少しだけ濃く（入力欄らしさ） */
.comment-editable:hover{
  background: #eceef1;
}

.comment-editable:focus{
  background: #ffffff;
  border-color: rgba(0,0,0,0.18);
}

/* placeholder（空のとき） */
.comment-editable:empty:before{
  content: attr(data-placeholder);
  color: #9ca3af;
}


/* ===== 共通：チェックマークUI（出欠/試合参加/フラグ） ===== */

.check-cell{
  text-align: center;
}

.check-btn{
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
}

/* 試合参加/フラグ：カラム中央に固定 */
.check-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;          /* ★セル幅いっぱいを基準に中央化 */
  padding: 0;           /* ★左右paddingで中心がズレるのを防ぐ */
}

.check-btn:focus{ outline: none; }
.check-btn:active{ transform: translateY(1px); }

.check-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  border: 1.5px solid #d1d5db;   /* ★ 薄グレー枠 */
  border-radius: 4px;

  font-size: 20px;
  font-weight: 900;
  line-height: 1;

  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease;
}

/* ★ 試合参加・フラグ用（赤） */
/* 未チェック */
.check-off{
  color: transparent;
  background: transparent;
}

/* ★ チェックON（赤） */
.check-on{
  color: #dc2626;
  /* border-color: #dc2626; */
  /* background: #fff5f5; */
}

/* hover で操作感 */
.check-btn:hover .check-icon{
  background: #f8fafc;
}

/* =========================================
   フラグ追加／削除ボタン
   ========================================= */

.flag-add-btn,
.flag-delete-btn {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.flag-add-btn {
    background: linear-gradient(135deg, #3da9ff, #267dff);
}

.flag-add-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5abbff, #3d8dff);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.4);
}

.flag-add-btn:active:not(:disabled) {
    background: linear-gradient(135deg, #2c8be6, #1b6fe0);
    transform: translateY(1px);
}

.flag-add-btn:disabled {
    background: #aacbee;
    color: #eef5ff;
    cursor: not-allowed;
    box-shadow: none;
}

/* メンバー削除ボタン：黒背景・赤文字・赤縁（保存の緑と明確に区別） */
.member-delete-btn {
    margin-right: 8px;
    background: #111;
    color: #e02e2e;
    border: 1px solid #e02e2e;
    box-shadow: 0 3px 0 #7a1414;   /* btn-pill の緑影を上書き */
}
.member-delete-btn:hover:not(:disabled) {
    background: #1c1c1c;
    color: #ff4d4d;
    border-color: #ff4d4d;
    box-shadow: 0 4px 0 #5e0f0f;
    transform: translateY(-1px);
}
.member-delete-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #5e0f0f;
}
.member-delete-btn:disabled {
    background: #ccc;
    color: #888;
    border-color: #ccc;
    box-shadow: none;
}

.flag-delete-btn {
    margin-left: 6px;
    background: linear-gradient(135deg, #ff6262, #d64444);
}

.flag-delete-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff7a7a, #e55656);
}

.flag-delete-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.flag-delete-btn:disabled {
    background: #ccc;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* 出欠がyes以外の時は「試合参加」ボタンを完全に消す */
.match-toggle.is-hidden {
  display: none !important;
}

/* =========================================================
   Match checkbox hide (keep table alignment)
   - Do NOT use display:none on <td> or button.
   - Keep column width so the comment column never shifts.
   ========================================================= */

/* 行が「試合参加を隠すべき」状態のとき（出欠が yes 以外） */
.participant-row.match-hidden td.match-cell,
.participant-row.match-hidden td.match-cell * {
  visibility: hidden;   /* 見えないが、スペースは維持 */
  pointer-events: none; /* クリック不可 */
}

/* ボタンだけに付ける場合（保険） */
.toggle-check.match-hidden,
.toggle-check.match-hidden * {
  visibility: hidden;
  pointer-events: none;
}

/* ===== 出席者リスト：カラムは中央ぞろえ ===== */
#participants-table th,
#participants-table td {
  text-align: center;
  vertical-align: middle;
}


/* セル内UIだけ中央 */
#participants-table .attendance-cell > *,
#participants-table .check-cell > *,
#participants-table .participant-index {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コメント列：ボックスは中央、文字は左 */
#participants-table .comment-cell {
  text-align: center;   /* ボックスを中央 */
}

.comment-editable {
  text-align: left;     /* ← 中の文字だけ左寄せ */
}


/* ============================
   settings：メンバー管理テーブル
   ============================ */

/* テーブル自体は左詰め */
#members-table {
  margin-left: 0;
  margin-right: auto;
}

/* ヘッダ・セル内は中央寄せ */
#members-table th,
#members-table td {
  text-align: center;
  vertical-align: middle;
}

/* 名前セル内の span も中央に */
#members-table .member-name {
  display: inline-block;
  text-align: center;
}

/* 固定トグルの見た目安定 */
#members-table .check-btn {
  margin: 0 auto;
}

/* ============================
   settings：メンバー管理テーブルは左詰め
   （共通 .participants-table の margin:0 auto を上書き）
   ============================ */
#members-table.participants-table {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* セル内は中央寄せでOK */
#members-table.participants-table th,
#members-table.participants-table td {
  text-align: center;
  vertical-align: middle;
}

/* settings: メンバー管理は左詰め（テーブル自体を縮める） */
.members-admin-area{
  text-align: left; /* inline-table を左に寄せる */
}

#members-table.participants-table{
  width: fit-content !important;   /* ← これが効く */
  max-width: 100%;
  display: inline-table;          /* ← text-align に従って左に寄る */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* カラム内は中央寄せでOK */
#members-table.participants-table th,
#members-table.participants-table td{
  text-align: center;
  vertical-align: middle;
}

/* settings：メンバー管理 名前カラムだけ左寄せ（ヘッダー除外） */
#members-table tbody td:nth-child(2) {
  text-align: left;
}


/* =====================================
   Event page: Flag (digit) input style
   ===================================== */

.flag-digit-input {
  border: none;                 /* 枠線を消す */
  background: #f2f3f5;          /* 薄いグレーで塗りつぶし */
  box-shadow: none;             /* 念のため影も消す */

  border-radius: 4px;           /* 角はほんのり（不要なら0でもOK） */
  text-align: center;

  padding: 4px 6px;
}

/* フォーカス時も枠を出さない */
.flag-digit-input:focus {
  outline: none;
  border: none;
  background: #e9ebee;          /* フォーカス時だけ少し濃く（任意） */
}

/* ============================
   settings：チーム分け/フラグもメンバー管理と同じ見栄えに揃える
   - テーブル自体：縮めて左寄せ（inline-table + text-align:left）
   - カラム内：中央寄せ
   ============================ */

/* wrappers を左寄せ基準にする */
.participants-wrap{
  text-align: left; /* inline-table を左に寄せる */
}

/* classes / flags table をメンバー管理と同じ挙動に */
#classes-table.participants-table,
#flags-table.participants-table{
  width: fit-content !important;   /* 中身幅に縮める */
  max-width: 100%;
  display: inline-table;           /* wrapper の text-align に従う */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* セル内は中央寄せ */
#classes-table.participants-table th,
#classes-table.participants-table td,
#flags-table.participants-table th,
#flags-table.participants-table td{
  text-align: center;
  vertical-align: middle;
}

/* ---- responsive.css ---- */
/* =========================================================
   Mobile-first fixes (Step 1)
   ========================================================= */

/* tennis/static/tennis/responsive.css */

@media (max-width: 480px) {

    /* .container{
        padding: 0 8px;
    } */

  /* ===============================
     [0] Event header
     =============================== */

  .event-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .event-meta-bar{
    margin-left: 0;
    align-self: flex-start;
    max-width: 100%;
  }

  .event-meta-text{
    max-width: 100%;
  }

  /* ===============================
     [0.5] Match settings bar
     =============================== */

  .match-settings-bar{
    display: block;
    margin: 10px 0 12px;
  }

  .match-pill-group{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 1.2vw, 8px);
    align-items: center;
    justify-content: flex-start;
  }

  .match-pill-group .settings-pill{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;

    font-size: clamp(0.92rem, 3.3vw, 1.05rem);
    padding-block: clamp(4px, 1.2vw, 6px);
    padding-inline: clamp(10px, 2.6vw, 14px);
    line-height: 1.2;

    box-shadow: 0 2px 0 #1f8e4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .publish-pill{
    display: inline-flex;
    margin-top: 20px;
    margin-left: 0 !important;

    font-size: clamp(0.92rem, 3.3vw, 1.05rem);
    padding-block: clamp(4px, 1.2vw, 6px);
    padding-inline: clamp(10px, 2.6vw, 14px);
    line-height: 1.2;

    box-shadow: 0 2px 0 #1f8e4a;
  }

  /* ===============================
     [A] URL textbox
     - Web版レイアウトは維持
     - テキストボックス内だけ「折り返し禁止」
     =============================== */

  .url-textbox {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* 以前の折り返し系を確実に無効化 */
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* ===============================
     [B] Participants / Members table
     - Event participants: ALWAYS horizontal scroll on mobile
     =============================== */

  .event-page,
  .container {
    overflow-x: hidden;
  }

  /* スクロール面（event側 + settings側） */
  .participants-area,
  .participants-wrap,
  .participants-section,
  #participants-area,
  #participants-wrap,
  .members-admin-area {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    padding-bottom: 6px; /* スクロールバーが要素に被らない */
  }

  /* ★イベントページ：出席者リストは「中身幅を保持」して横スクロールさせる */
  #participants-table {
    display: inline-table !important;
    width: max-content !important;  /* ← fit-content だと収まる時にスクロールにならない */
    max-width: none !important;     /* ← 画面に押し込まない */
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* ★設定ページ：メンバー管理表は中身幅で止める（必要なら横スクロール） */
  #members-table {
    display: inline-table !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* ===============================
     [C] Schedule (対戦表)
     =============================== */

  .tb-round-body {
    padding: 0;
  }

  /* 行全体を縦並び */
  .tb-court-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 0;
  }

  /* ★ 1コート / 2コート：横幅いっぱいのグレー帯 */
  .tb-court-name {
    width: 100%;
    text-align: center;
    margin: 0;

    background: #f2f3f5;
    padding: 4px 0;

    font-weight: 700;
    font-size: 0.8rem;
    color: #333;
  }

  /* 試合本体 */
  .tb-match-flex {
    display: flex;
    align-items: flex-start;   /* チームは上揃え */
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }

  /* 同チーム縦積み */
  .tb-team {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* 名前カード：出欠リストと同等 */
  .tb-player-card {
    width: 110px !important;
    padding: 6px 4px !important;
    font-size: 0.9rem !important;
    font-weight: 600;

    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ★ - vs - を「上下中央」にする */
  .tb-score-area {
    min-width: 72px;
    gap: 6px;

    align-self: center;
    margin-top: auto;
    margin-bottom: auto;

    padding-top: 0;
  }

  .tb-score {
    width: 28px;
  }

  /* ===============================
    Club home: ranking table (mobile) - truly minimal width
    =============================== */

  .rank-table-wrap{
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  /* テーブルは「中身幅」 */
  .rank-table{
    display: inline-table;
    width: max-content;
    border-collapse: collapse;
  }

  /* ★インライン style="width:90px" 等を無効化して最小化 */
  .rank-table th,
  .rank-table td{
    width: auto !important;      /* ← ここが本命 */
    min-width: 0 !important;
    max-width: none !important;

    padding: 2px 4px;            /* さらに詰める */
    /* font-size: 0.68rem; */
    line-height: 1.2;
    white-space: nowrap;         /* 折り返さず “必要幅” を安定させる */
  }

  /* 名前列だけ少し読みやすく（詰めすぎ防止） */
  .rank-table th:nth-child(2),
  .rank-table td:nth-child(2){
    padding-left: 6px;
    padding-right: 6px;
    font-size: 0.72rem;
  }

  /* ===============================
   [Index] クラブ名入力欄（mobile only）
   =============================== */

  .club-name-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
  }

  /* =========================================
   Mobile fit: モーダルが画面からはみ出さない
   ========================================= */
  .modal-content {
    max-width: 100%;
    width: 100%;
    margin: 0;

  }

  /* iPhoneのセーフエリア対策（任意だが強い） */
  .modal-content {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .modal-content input,
  .modal-content select,
  .modal-content textarea {
    font-size: 16px !important;
  }

}