/* ============================================================
 * File: /httpdocs/practice/assets/css/style.css
 * 機能: 練習会システム独自スタイル
 *      - gymkinki.com/entry/ に準じたカラーリング(濃紺×レッドアクセント)
 *      - レスポンシブ対応(Bootstrap 5 ベース)
 * ============================================================ */

:root {
  --pk-primary: #0a2342;     /* 濃紺 */
  --pk-primary-2: #143768;
  --pk-accent: #d62828;      /* レッド */
  --pk-bg-soft: #f5f7fb;
  --pk-text: #1a1a1a;
  --pk-muted: #6b7280;
}

/* ---- ナビゲーション ----------------------------------------- */
.practice-navbar {
  background: linear-gradient(90deg, var(--pk-primary), var(--pk-primary-2));
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.practice-navbar .navbar-brand { letter-spacing: .03em; }
.practice-navbar .nav-link.active,
.practice-navbar .nav-link:hover { color: #ffd166 !important; }

/* ---- フッター ------------------------------------------------ */
.practice-footer {
  background: var(--pk-primary);
  color: #fff;
}

/* ---- 見出し -------------------------------------------------- */
.page-title {
  border-left: 5px solid var(--pk-accent);
  padding-left: .75rem;
  color: var(--pk-primary);
  font-weight: 700;
}

/* ---- カード -------------------------------------------------- */
.event-card {
  transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid #e3e6ee;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10,35,66,.12);
}
.event-card .badge-venue {
  background: var(--pk-primary);
}
.event-card .event-date {
  font-size: 1.4rem;
  color: var(--pk-primary);
  font-weight: 700;
}
.event-card .event-status-open    { background: #1d9b5e; }
.event-card .event-status-soon    { background: #e3a008; }
.event-card .event-status-closed  { background: #6b7280; }
.event-card .event-status-full    { background: var(--pk-accent); }

/* ---- ボタン -------------------------------------------------- */
.btn-primary {
  background: var(--pk-primary);
  border-color: var(--pk-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--pk-primary-2);
  border-color: var(--pk-primary-2);
}
.btn-accent {
  background: var(--pk-accent);
  border-color: var(--pk-accent);
  color: #fff;
}
.btn-accent:hover { background: #b71c1c; color: #fff; }

/* ---- テーブル(管理者) -------------------------------------- */
.table thead {
  background: var(--pk-primary);
  color: #fff;
}

/* ---- フォーム ----------------------------------------------- */
.form-required::after {
  content: '必須';
  background: var(--pk-accent);
  color: #fff;
  font-size: .7rem;
  padding: .1em .5em;
  border-radius: 3px;
  margin-left: .4em;
  vertical-align: middle;
}

/* ---- 確認画面 ----------------------------------------------- */
.confirm-table th {
  background: var(--pk-bg-soft);
  width: 32%;
  vertical-align: middle;
}

/* ---- スマホ最適化 ------------------------------------------- */
@media (max-width: 575.98px) {
  .page-title { font-size: 1.25rem; }
  .event-card .event-date { font-size: 1.15rem; }
  .container { padding-left: .75rem; padding-right: .75rem; }
}