/* ============================================================
   釈迦堂川花火大会 検討チーム サイト共通スタイル
   テーマ: 夜空と花火
   ============================================================ */
:root {
  --night-deep:   #0a1029;
  --night:        #131c42;
  --night-soft:   #1e2a5e;
  --accent:       #ff6b57;   /* 花火の朱 */
  --accent-soft:  #ff8a73;
  --gold:         #ffc24b;   /* 花火の金 */
  --bs-primary:   #2c3e6b;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: #f3f5fa;
  color: #1f2430;
}

h1, h2, h3, .navbar-brand { letter-spacing: .02em; }

/* ---------- ナビゲーション ---------- */
.site-nav {
  background: linear-gradient(120deg, var(--night-deep) 0%, var(--night) 55%, #2a1e4e 100%);
  border-bottom: 2px solid rgba(255, 194, 75, .35);
}
.site-nav .navbar-brand {
  font-weight: 700;
}
.site-nav .nav-link {
  color: rgba(255,255,255,.75);
  border-radius: 2rem;
  padding: .4rem 1rem;
  margin: 0 .15rem;
  transition: all .2s;
}
.site-nav .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.site-nav .nav-link.active {
  color: #fff;
  background: linear-gradient(120deg, var(--accent), #e8474f);
  box-shadow: 0 2px 10px rgba(255,107,87,.45);
}
.site-nav .dropdown-menu {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(10,16,41,.2);
}

/* ---------- カード ---------- */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(20, 30, 70, .07);
  transition: box-shadow .25s, transform .25s;
}
.card.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(20, 30, 70, .14);
}
.card-header {
  border-radius: 1rem 1rem 0 0 !important;
  border-bottom: 1px solid #eef0f6;
  font-weight: 600;
}
.card-header.bg-white {
  background: #fff !important;
}

/* セクション見出しのアクセント */
.section-title {
  position: relative;
  padding-left: .85rem;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--gold));
}

/* ---------- ボタン ---------- */
.btn { border-radius: .65rem; }
.btn-primary {
  background: linear-gradient(120deg, #2c3e6b, #1e2a5e);
  border: none;
  box-shadow: 0 3px 10px rgba(30, 42, 94, .3);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(120deg, #38508c, #25346f);
  box-shadow: 0 5px 16px rgba(30, 42, 94, .4);
}
.btn-accent {
  background: linear-gradient(120deg, var(--accent), #e8474f);
  border: none;
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 107, 87, .4);
}
.btn-accent:hover { color:#fff; filter: brightness(1.07); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(255,194,75,.25), transparent 60%),
    radial-gradient(ellipse 50% 60% at 15% 90%, rgba(255,107,87,.22), transparent 60%),
    linear-gradient(135deg, var(--night-deep) 0%, var(--night) 50%, #2a1e4e 100%);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 32% 64%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 51% 18%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 67% 51%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 84% 32%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 92% 72%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.65), transparent);
  animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .45; }
  to   { opacity: 1; }
}
.hero > * { position: relative; }

/* 統計バッジ */
.stat-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1rem;
  backdrop-filter: blur(4px);
}
.stat-card .stat-num {
  font-size: 1.9rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--gold), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- ログイン画面 ---------- */
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 75% 15%, rgba(60,60,140,.55), transparent 65%),
    linear-gradient(165deg, #060a1c 0%, #0e1638 45%, #261b4a 80%, #3b1e44 100%);
}
/* 星空 */
.login-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%,  rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px     at 19% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px     at 28% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px     at 37% 78%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 49% 33%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px     at 58% 65%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px     at 71% 21%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px     at 82% 47%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 91% 76%, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px     at 14% 88%, rgba(255,255,255,.5), transparent);
  animation: twinkle 3.5s ease-in-out infinite alternate;
}
/* 打ち上げ花火キャンバス */
#fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.login-card {
  max-width: 470px;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 194, 75, .12);
  position: relative;
  z-index: 2;
}
.login-title-sub {
  letter-spacing: .35em;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
}
.firework-emoji {
  font-size: 2.8rem;
  display: inline-block;
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- D&Dドロップゾーン ---------- */
.dropzone {
  border: 2px dashed #c3cadf;
  border-radius: 1rem;
  padding: 2.75rem 1rem;
  text-align: center;
  color: #7a8299;
  cursor: pointer;
  transition: all .25s;
  background: linear-gradient(180deg, #fbfcff, #f4f6fc);
}
.dropzone:hover {
  border-color: var(--night-soft);
  color: var(--night-soft);
}
.dropzone.dragover {
  border-color: var(--accent);
  background: #fff4f2;
  color: var(--accent);
  transform: scale(1.01);
  box-shadow: 0 6px 24px rgba(255,107,87,.18);
}

/* ---------- タイムライン ---------- */
.timeline-item {
  border-left: 4px solid var(--night-soft);
}
.timeline-item:has(.badge-minutes) { border-left-color: #1e7a4f; }
.timeline-item:has(.badge-photo)   { border-left-color: #b3541e; }
.minutes-body {
  white-space: pre-wrap;
  font-size: .95rem;
  line-height: 1.85;
}
.photo-thumb {
  max-height: 340px;
  object-fit: contain;
  border-radius: .75rem;
  transition: transform .25s;
}
.photo-thumb:hover { transform: scale(1.015); }

.badge-document { background: linear-gradient(120deg, #2c3e6b, #1e2a5e); }
.badge-minutes  { background: linear-gradient(120deg, #1e7a4f, #14613e); }
.badge-photo    { background: linear-gradient(120deg, #c56a2b, #a34a16); }

/* ---------- テーブル・フォーム ---------- */
.table thead th {
  font-size: .82rem;
  color: #5a6275;
  text-transform: none;
}
.form-control, .form-select {
  border-radius: .6rem;
  border-color: #d7dcea;
}
.form-control:focus, .form-select:focus {
  border-color: var(--night-soft);
  box-shadow: 0 0 0 .2rem rgba(30, 42, 94, .12);
}

.breadcrumb { font-size: .88rem; }

/* ---------- フッター ---------- */
.site-footer {
  background: linear-gradient(120deg, var(--night-deep), var(--night));
  color: rgba(255,255,255,.55);
  border-top: 2px solid rgba(255, 194, 75, .3);
}

/* ===== トップページ: 最近の投稿サムネイル ===== */
.home-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: .5rem;
}

/* ===== 掲示板: トップページから飛んできた投稿をハイライト ===== */
.timeline-item {
  scroll-margin-top: 90px;
}
.timeline-item:target {
  border: 2px solid #f4a261;
  box-shadow: 0 0 0 .25rem rgba(244, 162, 97, .25) !important;
}

/* ===== 写真サムネイルグリッド（掲示板） ===== */
.photo-thumb-sm {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: .5rem;
  transition: transform .15s ease;
}
.photo-tile:hover .photo-thumb-sm {
  transform: scale(1.05);
}