/* club.css — 予約・記録 (club) section. Same look as the rest of Flight Tools:
   uses the variables and card/table conventions from app.css. */

.club-subnav { display: flex; gap: 1rem; align-items: center; margin: -0.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.club-subnav a { color: var(--muted); font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.club-subnav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.club-subnav .spacer, .club-page-head .spacer, .club-cal-toolbar .spacer, .club-actions .spacer { flex: 1; }

.btn { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--fg); font: inherit; cursor: pointer; line-height: 1.3; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #0958a3; }
.btn-danger { color: var(--danger); border-color: #e6b8b4; }
.btn-danger:hover { background: #fbeceb; border-color: var(--danger); }
.btn-small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

.club-page-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; }
.club-page-head h1, .club-page-head h2 { margin: 0; }
.club-narrow { max-width: 720px; }
.club-auth { max-width: 420px; margin: 3rem auto; padding: 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.club-auth h1 { margin-top: 0; }
.club-inline { display: inline-flex; align-items: center; gap: 0.4rem; }
.club-list { padding-left: 1.25rem; }

/* forms */
.club-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.75rem; }
.club-form input, .club-form select, .club-form textarea, .club-inline select, .club-inline input, .club-table input {
  font: inherit; font-size: 0.95rem; color: var(--fg); padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.club-form input:focus, .club-form select:focus, .club-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak); }
.club-form input[type=color] { padding: 0.1rem; height: 2.3rem; width: 4rem; }
.club-form .club-check, .club-inline .club-check { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--fg); }
.club-form small { font-size: 0.8rem; }
.club-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.club-row > label { flex: 1 1 140px; }
.club-row-fuel { padding: 0.5rem 0.75rem; background: var(--accent-weak); border-radius: 6px; margin-bottom: 0.75rem; }
.club-row-fuel > span { flex: 1 1 100%; font-size: 0.85rem; }
.club-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

/* messages */
.club-error { color: var(--danger); background: #fbeceb; border: 1px solid #e6b8b4; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
ul.club-error { padding-left: 1.75rem; }
.club-ok { color: #1b6e3a; background: #e6f4ea; border: 1px solid #b7dfc4; border-radius: 6px; padding: 0.5rem 0.75rem; }
.club-conflicts { background: #fff7e0; border: 1px solid #f2d98a; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0.5rem 0; }
.club-conflicts ul { margin: 0.25rem 0 0; padding-left: 1.25rem; }

/* chips, key/value, tables */
.club-chip { display: inline-block; color: #fff; font-weight: 600; font-size: 0.8rem; padding: 0.05rem 0.45rem; border-radius: 4px; vertical-align: middle; }
.club-kv { border-collapse: collapse; margin: 0.5rem 0 1rem; }
.club-kv th { text-align: left; color: var(--muted); font-weight: 500; padding: 0.35rem 1rem 0.35rem 0; vertical-align: top; }
.club-kv td { padding: 0.35rem 0; }
.club-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.club-table th, .club-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.club-table th { background: #f0f3f7; color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.club-table tbody tr:last-child td { border-bottom: none; }
.club-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.club-table tr.inactive td { color: var(--muted); }
.club-status { display: inline-block; font-size: 0.8rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #e6f4ea; color: #1b6e3a; }
tr.status-warn .club-status { background: #fff3cd; color: #7a5a00; }
tr.status-overdue .club-status { background: #fbeceb; color: var(--danger); }
tr.status-unknown .club-status { background: #eef1f5; color: var(--muted); }
tr.status-overdue td { background: #fff8f7; }
tr.status-warn td { background: #fffdf3; }

/* stat cards */
.club-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.club-stat { flex: 1 1 200px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
.club-stat-label { color: var(--muted); font-size: 0.85rem; }
.club-stat-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.club-stat-inline { margin-bottom: 1rem; }
.club-stat-inline.status-warn { border-color: #f2d98a; background: #fffdf3; }
.club-stat-inline.status-overdue { border-color: #e6b8b4; background: #fff8f7; }

/* alerts strip */
.club-alerts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.club-alert { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.9rem; color: inherit; border: 1px solid; }
.club-alert.warn { background: #fff3cd; border-color: #f2d98a; color: #7a5a00; }
.club-alert.overdue { background: #fbeceb; border-color: #e6b8b4; color: var(--danger); }
.club-alert:hover { text-decoration: none; filter: brightness(0.97); }

/* month calendar */
.club-cal-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.club-cal-title { margin: 0 0.5rem; font-size: 1.4rem; }
.club-cal { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.club-cal-head, .club-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.club-cal-head div { padding: 0.4rem 0; text-align: center; font-size: 0.85rem; color: var(--muted); background: #f0f3f7; border-bottom: 1px solid var(--border); }
.club-cal-head div:first-child { color: #c0392b; }
.club-cal-head div:last-child { color: #2f6fd6; }
.club-cal-day { min-height: 110px; padding: 0.3rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.club-cal-day:hover { background: #f7fafd; }
.club-cal-day:nth-child(7) { border-right: none; }
.club-cal-week:last-child .club-cal-day { border-bottom: none; }
.club-cal-day.out { background: #fafbfc; color: #aab2bd; }
.club-cal-day.out:hover { background: #f3f5f8; }
.club-cal-daynum { font-size: 0.85rem; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.club-cal-day.dow0 .club-cal-daynum { color: #c0392b; }
.club-cal-day.dow6 .club-cal-daynum { color: #2f6fd6; }
.club-cal-day.out .club-cal-daynum { color: #aab2bd; }
.club-cal-day.today .club-cal-daynum { background: var(--accent); color: #fff; }
.club-ev { display: block; font-size: 0.78rem; line-height: 1.3; padding: 1px 4px 1px 5px; border-left: 3px solid var(--accent); background: #eef4fb; border-radius: 3px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-ev:hover { background: #dfeafa; text-decoration: none; }
.club-ev-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.club-ev-mx { border-left-color: #e08a00; background: #fff3dd; }
.club-ev-mx:hover { background: #ffe9c2; }
.club-mine { margin-top: 1.25rem; }
.club-mine ul { padding-left: 1.25rem; }

/* flight record: legs */
.club-details { margin: 0.5rem 0; }
.club-details summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.club-details form { margin-top: 0.5rem; }
.club-leg { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.club-leg-new { border-style: dashed; background: transparent; }
.club-leg-new h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.club-leg-head { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.club-leg-fuel { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; font-size: 0.9rem; }
.club-fuel { background: var(--accent-weak); border-radius: 4px; padding: 0.1rem 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.club-x { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.1rem; }
.club-x:hover { color: var(--danger); }
.club-fuel-add input { padding: 0.2rem 0.4rem; font-size: 0.85rem; }
.club-leg-form .club-row > label { flex: 1 1 120px; }
.club-danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.club-done { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.club-done h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }

@media (max-width: 720px) {
  .club-cal-day { min-height: 70px; padding: 0.2rem; }
  .club-ev { font-size: 0.7rem; }
  .club-ev-time { display: none; }
  .club-cal-title { font-size: 1.15rem; }
  .club-auth { margin: 1.5rem auto; }
}

/* leg clocks: 発進・離陸・着陸・停止 + live block/flight time */
.club-clocks > label { flex: 0 1 110px; }
.club-clocks input.clock { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.club-calc { display: flex; gap: 1.25rem; align-items: flex-end; padding: 0 0 0.75rem 0.5rem; font-size: 0.9rem; }
.club-calc strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.club-leg-times { font-variant-numeric: tabular-nums; }

/* fuel as a leg field: none / FULL / litres */
.club-fuelset { flex: 1 1 260px; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.75rem 0.5rem; margin: 0 0 0.75rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.club-fuelset legend { font-size: 0.85rem; color: var(--muted); padding: 0 0.3rem; }
.club-fuelset .club-check { margin: 0; }
.club-fuelset input[type=radio] { accent-color: var(--accent); }
.club-fuelset input.fuel-liters:disabled { background: #f0f3f7; color: var(--muted); }

/* Flight record completion ("飛行記録の登録を完了する") */
.club-status-done {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #e6f4ea;
  border: 1px solid #b7dfc4;
  color: #1b6e3a;
  font-size: 0.85rem;
  font-weight: 600;
}
.club-status-done .muted { font-weight: 400; font-size: 0.8rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover { border-color: var(--border); }

/* 飛行記録 = aircraft logbook */
.mono { font-variant-numeric: tabular-nums; }
.logbook-inspections { margin-top: 1.5rem; }
.logbook-insp { max-width: 720px; }
.logbook-wrap { overflow-x: auto; }
.logbook { min-width: 1000px; }
.logbook th, .logbook td { padding: 0.4rem 0.55rem; white-space: nowrap; }
.logbook td.num { font-variant-numeric: tabular-nums; }
.logbook tbody tr:nth-child(even) td { background: #fafbfd; }
.logbook .logbook-note { white-space: normal; min-width: 8rem; font-size: 0.85rem; }
.club-pager { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.club-pager .btn.disabled { pointer-events: none; opacity: 0.45; }

/* reservation popup on the calendar */
.club-dialog { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; min-width: 320px; max-width: 92vw; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.35); }
.club-dialog::backdrop { background: rgba(31, 38, 48, 0.35); }
.club-dialog-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.club-dialog-head strong { font-variant-numeric: tabular-nums; }
.club-dialog-head .club-x { margin-left: auto; font-size: 1.3rem; }
.club-dialog .club-kv { margin: 0.25rem 0 0.75rem; }

/* reservation states on the calendar */
.club-ev-cancelled { text-decoration: line-through; color: var(--muted); background: #f3f5f8; border-left-style: dashed; }
.club-ev-flown { background: #e9f5ec; }
.club-mine li.cancelled { text-decoration: line-through; color: var(--muted); }
.club-status-cancelled { display: inline-block; margin: 0.25rem 0; padding: 0.1rem 0.6rem; border-radius: 999px; background: #eef1f5; color: var(--muted); font-size: 0.85rem; }

/* The popup toggles elements with the hidden attribute; make sure no display rule above overrides it. */
[hidden] { display: none !important; }

/* flight detail: legs as a logbook table with inline edit rows */
.logbook-legs { min-width: 960px; }
.logbook-legs tfoot th { background: #f0f3f7; text-align: left; font-weight: 600; white-space: nowrap; }
.logbook-legs tfoot th.num { text-align: right; font-variant-numeric: tabular-nums; }
.logbook-editrow td { background: #f7fafd; padding: 0.75rem 1rem 0.5rem; white-space: normal; }
.logbook-editrow .club-form label { margin-bottom: 0.5rem; }