:root {
  --tsv-bg: #0b0b0c;
  --tsv-surface: #111214;
  --tsv-surface-2: #17181a;
  --tsv-surface-3: #1d1f21;
  --tsv-border: #2b2d30;
  --tsv-border-soft: rgba(255,255,255,.08);
  --tsv-text: #f4f4f2;
  --tsv-text-soft: #989da3;
  --tsv-white: #ffffff;
  --tsv-warning: #d6a84b;
}

html, body { min-height: 100%; }
body {
  background: var(--tsv-bg);
  color: var(--tsv-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

/* Navigation */
.club-nav {
  background: #050506;
  border-bottom: 1px solid var(--tsv-border);
  box-shadow: none;
}
.nav-logo { width: 40px; height: 40px; object-fit: contain; }
.navbar-brand { letter-spacing: -.02em; }
.navbar .nav-link {
  color: #a9adb1;
  border-radius: .25rem;
  margin: 0 .08rem;
  padding: .55rem .7rem;
  font-size: .94rem;
}
.navbar .nav-link:hover { color: #fff; background: #151618; }
.navbar .nav-link.active { color: #fff; background: #1b1c1e; box-shadow: inset 0 -2px 0 #fff; }

.page-shell { max-width: 1480px; }
.text-secondary { color: var(--tsv-text-soft) !important; }
.min-w-0 { min-width: 0; }

/* Typography */
.eyebrow {
  color: #a7abb0;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.display-title {
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.page-heading { border-bottom: 1px solid var(--tsv-border); padding-bottom: 1.25rem; }

/* Panels and cards */
.card,
.panel,
.data-panel,
.filter-bar {
  background: var(--tsv-surface);
  border: 1px solid var(--tsv-border);
  border-radius: .45rem;
  box-shadow: none;
}
.panel { padding: 1.35rem; }
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.panel-icon { color: #696d72; font-size: 1.7rem; }
.sub-card {
  background: var(--tsv-surface-2);
  border: 1px solid var(--tsv-border);
  border-radius: .35rem;
}
.metric {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 720;
  letter-spacing: -.035em;
}

/* Buttons */
.btn { border-radius: .3rem; font-weight: 600; box-shadow: none !important; }
.btn-pill { border-radius: .3rem; }
.btn-light { background: #f5f5f2; border-color: #f5f5f2; color: #0b0b0c; }
.btn-light:hover { background: #fff; border-color: #fff; color: #000; }
.btn-outline-light { border-color: #5e6267; color: #f2f2f0; }
.btn-outline-light:hover { background: #f2f2f0; border-color: #f2f2f0; color: #0b0b0c; }
.btn-outline-secondary { border-color: #3b3e42; color: #aeb2b6; }
.btn-outline-secondary:hover { background: #26282b; border-color: #4b4e52; color: #fff; }

/* Dashboard */
.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: .5rem 0 1.5rem;
  border-bottom: 1px solid var(--tsv-border);
}
.dashboard-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.dashboard-logo { width: 72px; height: 72px; object-fit: contain; flex: 0 0 auto; }
.dashboard-metrics { display: flex; align-items: stretch; border: 1px solid var(--tsv-border); border-radius: .35rem; overflow: hidden; }
.dashboard-metrics > div { min-width: 130px; padding: .8rem 1rem; border-left: 1px solid var(--tsv-border); }
.dashboard-metrics > div:first-child { border-left: 0; }
.dashboard-metrics span,
.stat-block span { display: block; color: var(--tsv-text-soft); font-size: .75rem; margin-bottom: .1rem; }
.dashboard-metrics strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.training-template-list { border-top: 1px solid var(--tsv-border); }
.training-template-row {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--tsv-border);
}
.training-time {
  width: 4.35rem;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
}
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--tsv-border); border-radius: .35rem; overflow: hidden; }
.stats-strip.compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stat-block { padding: .85rem 1rem; border-left: 1px solid var(--tsv-border); background: #0f1011; }
.stat-block:first-child { border-left: 0; }
.stat-block strong { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.empty-state { color: var(--tsv-text-soft); }
.timeline-wrap { min-height: 330px; height: 40vh; max-height: 500px; }
.timeline-note { color: #80858a; font-size: .78rem; border-top: 1px solid var(--tsv-border); padding-top: .8rem; margin-top: .5rem; }
.legend-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; }
.legend-dot.open { background: var(--tsv-warning); }
.legend-dot.guest { border: 1px solid #aaa; background: transparent; }

/* Trainings / member lists */
.training-card {
  transition: border-color .12s ease, background .12s ease;
  border-radius: .35rem;
}
.training-card:hover { transform: none; border-color: #55595e; background: #151719; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.member-card { min-height: 220px; overflow: hidden; position: relative; border-radius: .4rem; }
.member-photo, .member-placeholder { width: 100%; aspect-ratio: 4/3; border-radius: .25rem; object-fit: cover; background: #222427; }
.member-placeholder { display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:750; letter-spacing:.06em; color:#dfe1e3; }

/* Attendance – deliberately compact and functional rather than card-like */
.attendance-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  border: 1px solid var(--tsv-border);
  border-radius: .35rem;
  overflow: hidden;
}
.summary-item { padding: .8rem 1rem; background: #0f1011; border-left: 1px solid var(--tsv-border); }
.summary-item:first-child { border-left: 0; }
.summary-item-accent { background: #141619; }
.summary-label { display: block; color: var(--tsv-text-soft); font-size: .73rem; }
.summary-item strong { font-size: 1.35rem; font-weight: 700; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.section-count { color:#83888d; font-size:.78rem; }
.attendance-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(330px,1fr)); gap:.65rem; }
.att-card {
  min-height: 82px;
  background: var(--tsv-surface);
  border: 1px solid var(--tsv-border);
  border-radius: .35rem;
  padding: .7rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s ease, background .12s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.att-card:hover { transform:none; background:#151719; border-color:#484b4f; }
.att-card.status-present { border-color: #397958; background:#101914; box-shadow: inset 3px 0 0 #4c9a6a; }
.att-card.status-excused { border-color: #806b37; background:#19170f; box-shadow: inset 3px 0 0 #b58f39; }
.att-card.status-absent { border-color: #7c3f46; background:#191113; box-shadow: inset 3px 0 0 #ad4d58; }
.att-person { display:flex; align-items:center; gap:.7rem; min-width:0; }
.att-name { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.att-photo, .att-placeholder {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: .25rem;
  object-fit: cover;
  background:#242629;
}
.att-placeholder { display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:750; color:#d7d9db; }
.att-actions { display:flex; align-items:center; gap:.3rem; flex:0 0 auto; }
.status-chip {
  display:inline-flex;
  align-items:center;
  min-width: 82px;
  justify-content:center;
  padding:.28rem .45rem;
  border-radius:.2rem;
  border:1px solid #3a3d40;
  font-size:.7rem;
  color:#aeb2b6;
  background:#151719;
}
.status-chip.is-present { color:#84c99e; border-color:#315d41; background:#111b15; }
.status-chip.is-excused { color:#e0c36e; border-color:#66572f; background:#1a180f; }
.status-chip.is-absent { color:#df8c95; border-color:#65373d; background:#1a1113; }
.status-button {
  width: 31px;
  height: 31px;
  padding:0;
  border-radius:.2rem;
  border:1px solid #3c3f43;
  color:#dfe1e3;
  background:#191b1d;
  font-weight:700;
}
.status-button:hover { border-color:#73777b; background:#222427; }
.status-button.present:hover { color:#8cd3a6; }
.status-button.excused:hover { color:#e0c36e; }
.status-button.absent:hover { color:#e28a94; }
.status-button.reset { color:#858a90; }
.guest-section { border:1px solid var(--tsv-border); border-radius:.35rem; overflow:hidden; }
.guest-toggle {
  width:100%;
  border:0;
  background:#111214;
  color:#f1f1ef;
  padding:.9rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  text-align:left;
}
.guest-toggle:hover { background:#151719; }
.guest-panel { border-top:1px solid var(--tsv-border); padding:1rem; background:#0e0f10; }
.guest-search { max-width:280px; }
.guest-card { background:#0f1011; }
.guest-count { display:inline-block; min-width:2rem; padding:.15rem .35rem; border:1px solid #4b4f54; border-radius:.2rem; color:#dfe1e3; }
.save-bar {
  position: sticky;
  bottom: .75rem;
  z-index: 10;
  background: rgba(10,11,12,.96);
  border: 1px solid #35383c;
  border-radius: .35rem;
  padding: .85rem 1rem;
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* Tables and forms */
.data-panel { overflow:hidden; }
.filter-bar { padding:1rem; }
.table { --bs-table-bg: transparent; --bs-table-color: #e9e9e7; }
.table > :not(caption) > * > * { border-color: var(--tsv-border); padding-top:.8rem; padding-bottom:.8rem; }
.table thead th { color:#8f9499; font-size:.72rem; font-weight:650; letter-spacing:.035em; text-transform:uppercase; border-bottom-color:#3b3e42; }
.form-control, .form-select, .form-check-input {
  background-color:#0d0e0f;
  border-color:#3a3d41;
  border-radius:.3rem;
}
.form-control:focus, .form-select:focus {
  background-color:#0d0e0f;
  border-color:#777b80;
  box-shadow:0 0 0 .15rem rgba(255,255,255,.06);
}
.form-label { color:#b6b9bc; }

/* Login */
.login-body { background:#080809; }
.login-card { width:min(100%, 430px); border-radius:.4rem; box-shadow:none !important; }
.login-logo { width:92px; height:92px; object-fit:contain; }

.avatar-sm { width:42px; height:42px; border-radius:.25rem; object-fit:cover; }
.avatar-sm.placeholder { display:flex; align-items:center; justify-content:center; background:#242629; font-weight:750; }
.badge-soft { background:#1d1f21; color:#d5d7d9; border:1px solid #34373a; }
.chart-legend-dot { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-right:.35rem; }

@media (max-width: 991.98px) {
  .dashboard-header { align-items:flex-start; flex-direction:column; }
  .dashboard-metrics { width:100%; }
  .dashboard-metrics > div { min-width:0; flex:1; }
  .stats-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-strip .stat-block:nth-child(3) { border-left:0; border-top:1px solid var(--tsv-border); }
  .stats-strip .stat-block:nth-child(4) { border-top:1px solid var(--tsv-border); }
  .stats-strip.compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stats-strip.compact .stat-block:nth-child(3) { border-left:1px solid var(--tsv-border); border-top:0; }
  .attendance-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .attendance-summary .summary-item:nth-child(4) { border-left:0; border-top:1px solid var(--tsv-border); }
  .attendance-summary .summary-item:nth-child(5) { border-top:1px solid var(--tsv-border); }
}

@media (max-width: 575.98px) {
  .dashboard-logo { width:58px; height:58px; }
  .dashboard-metrics { display:grid; grid-template-columns:repeat(3,1fr); }
  .dashboard-metrics > div { padding:.65rem; min-width:0; }
  .dashboard-metrics span { font-size:.65rem; }
  .dashboard-metrics strong { font-size:1.2rem; }
  .attendance-grid { grid-template-columns:1fr; }
  .att-card { align-items:flex-start; flex-direction:column; }
  .att-actions { width:100%; }
  .status-chip { margin-right:auto; }
  .guest-toggle { align-items:flex-start; flex-direction:column; }
  .guest-search { max-width:none; }
  .save-bar { position:static; align-items:stretch; flex-direction:column; }
  .attendance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .summary-item { border-top:1px solid var(--tsv-border); }
  .summary-item:nth-child(1), .summary-item:nth-child(2) { border-top:0; }
  .summary-item:nth-child(odd) { border-left:0; }
  .timeline-wrap { height:360px; }
  .stats-strip.compact { grid-template-columns:1fr; }
  .stats-strip.compact .stat-block { border-left:0 !important; border-top:1px solid var(--tsv-border) !important; }
  .stats-strip.compact .stat-block:first-child { border-top:0 !important; }
}