/* ── Home page ── */
.home-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;height:100%;padding:0 0 90px;}

.home-hero{
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:auto auto;
  column-gap:13px;row-gap:2px;
  align-items:center;
  padding:18px 18px 16px;
  background:#0d1410;
  margin:-16px -16px 0 -16px;
  position:relative;overflow:hidden;
}

.home-hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse 70% 120% at 15% 50%, rgba(22,163,74,0.18) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
}

.home-hero > *{position:relative;z-index:1;}

.home-crest{
  grid-column:1;grid-row:1 / 3;
  width:46px;height:46px;object-fit:contain;
  border-radius:0;background:transparent;padding:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  mix-blend-mode:screen;
  align-self:center;
}

.home-club-name{
  grid-column:2;grid-row:1;
  font-size:14px;font-weight:700;color:#fff;letter-spacing:-.1px;
  text-align:left;line-height:1.2;align-self:end;
}

.home-subtitle{
  grid-column:2;grid-row:2;
  font-size:12px;font-weight:400;color:rgba(255,255,255,.45);
  text-transform:none;letter-spacing:.1px;align-self:start;
}

.home-section{
  padding:0 14px;margin-bottom:20px;
}

/* ── 2-column panel row (Training + Weather) ── */
.home-panel-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 14px;
  margin-bottom:20px;
  align-items:stretch;
}

/* Sections inside the panel row lose their own padding/margin */
.home-panel-row > .home-section{
  padding:0;
  margin-bottom:0;
  margin-top:0;
  display:flex;
  flex-direction:column;
}

/* Card container div (the #homeMatchCard / #homeTrainingCard wrapper) must
   stretch to fill the section column — without this flex:1 on the card
   has nothing to expand into */
.home-panel-row > .home-section > div:not(.home-section-title){
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Cards inside panel row fill the full column height */
.home-panel-row .home-card,
.home-panel-row .home-card--empty{
  margin-bottom:0;
  flex:1;
}

/* First panel row: gap below the hero panel */
#pg-home .home-panel-row:first-of-type{margin-top:28px;}
.home-section:first-of-type{margin-top:20px;}
/* Override: sections INSIDE panel rows must never inherit first-of-type margin */
.home-panel-row > .home-section:first-of-type{margin-top:0;}

/* No separator between panel rows */

.home-section-title{
  font-size:16px;font-weight:700;color:var(--cream);text-transform:none;letter-spacing:-.1px;
  margin-bottom:12px;padding:0;
}

.home-card{
  background:var(--surf);border-radius:14px;padding:14px 16px;margin-bottom:10px;
  border:none;
  box-shadow:0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  transition:box-shadow .2s ease, transform .2s ease;
}

.home-card--match{}
.home-card--training{}
.home-card--weather{}

.home-card--empty{
  background:var(--surf2);border:1px solid var(--bdr);border-radius:14px;text-align:center;
  color:var(--muted);font-size:13px;padding:18px 16px;box-shadow:none;
}

/* ── Empty state with create CTA ── */
.home-card--create{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}

.home-create-msg{
  font-size:12px;color:var(--muted);
}

.home-create-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:8px;
  background:var(--green);color:#fff;
  font-size:12px;font-weight:700;border:none;cursor:pointer;
  transition:background .15s, opacity .15s;
}

.home-create-btn [data-lucide]{width:13px;height:13px;}

.home-create-btn:active{opacity:.8;}

#pg-home .home-create-btn{
  background:rgba(22,163,74,.25);
  color:#4ade80;
}

#pg-home .home-create-btn:hover{
  background:rgba(22,163,74,.38);
}

.home-card--tappable{
  cursor:pointer;
}

.home-card--tappable:hover{
  box-shadow:0 6px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  transform:translateY(-1px);
}

.home-card--tappable:active{
  transform:scale(0.97);
  opacity:0.88;
  transition:transform 0.1s ease, opacity 0.1s ease;
}

.home-card-hd{
  display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:12px;
}

.home-card-date{
  font-size:13px;font-weight:600;color:var(--muted);
}

.home-card-badge{
  font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;
  text-transform:none;letter-spacing:.1px;
  white-space:nowrap;flex-shrink:0;
}

/* Match Day — blue */
.home-card-badge--match{background:#dbeafe;color:#1d4ed8;}
/* Today — green pulse */
.home-card-badge--today{background:#dcfce7;color:#15803d;}
/* Tomorrow — amber */
.home-card-badge--soon{background:#fef3c7;color:#92400e;}
/* Training — green: brand, recurring */
.home-card-badge--training{background:var(--dim);color:var(--green);}
/* Weather — slate: informational, neutral */
.home-card-badge--weather{background:#f1f5f9;color:#475569;}
/* Attendance */
.home-card-badge--att{background:var(--dim);color:var(--green);}

.home-match-teams{
  display:flex;flex-direction:column;gap:10px;margin-bottom:12px;padding:8px 0 4px;
}

/* VS block — centred bold matchup layout */
.home-match-vs-block{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}

.home-match-vs-team{
  display:flex;align-items:center;gap:8px;
}

.home-match-vs-name{
  font-size:14px;font-weight:800;color:var(--cream);letter-spacing:-.1px;
}

.home-match-vs-divider{
  font-size:9px;font-weight:900;color:var(--muted);letter-spacing:2px;
  opacity:.5;flex-shrink:0;
}

.home-match-vs-opp{
  font-size:14px;font-weight:700;color:var(--cream);letter-spacing:-.1px;text-align:right;
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.home-match-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}

.home-match-dot--g{background:var(--green);}
.home-match-dot--w{background:#94a3b8;}

/* legacy row — kept for compatibility */
.home-match-row{display:flex;align-items:center;gap:10px;}
.home-match-label{font-size:15px;font-weight:700;color:var(--cream);}
.home-match-vs{font-size:13px;font-weight:500;color:var(--muted);margin-left:4px;}

.home-match-vs{
  font-size:13px;font-weight:500;color:var(--muted);margin-left:4px;
}

.home-card-detail{
  display:flex;flex-direction:column;gap:10px;margin-top:12px;
}

.home-card-detail-item{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
}

.home-card-detail-item [data-lucide]{
  width:16px;height:16px;flex-shrink:0;color:var(--green);
}

.home-card-detail-item a{
  color:var(--green);text-decoration:none;font-weight:500;
}

.home-card-detail-item a:hover{
  text-decoration:underline;
}

.home-train-sport{
  font-size:14px;font-weight:700;color:var(--green);margin-bottom:12px;text-transform:none;
}

/* Weather */
.home-weather-main{
  display:flex;align-items:center;gap:16px;margin-bottom:16px;
}

.home-weather-temp{
  font-size:44px;font-weight:700;color:var(--cream);line-height:1;
}

.home-weather-info{
  display:flex;flex-direction:column;gap:4px;
}

.home-weather-cond{
  font-size:16px;font-weight:600;color:var(--cream);
}

.home-weather-feel{
  font-size:13px;color:var(--muted);
}

.home-weather-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr);
}

.home-weather-stat{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
}

.home-weather-stat [data-lucide]{
  width:16px;height:16px;flex-shrink:0;color:var(--green);
}

.home-weather-emoji{
  font-size:44px;line-height:1;
}

/* ── Skeleton shimmer loader ── */
.home-skeleton-line{
  height:14px;border-radius:8px;margin-bottom:10px;
  background:linear-gradient(90deg, var(--bdr) 25%, #f0f4f2 50%, var(--bdr) 75%);
  background-size:200% 100%;
  animation:home-shimmer 1.5s infinite;
}

@keyframes home-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ── Attendance metric panel ── */
.att-metric{
  display:flex;flex-direction:column;gap:3px;
}

.att-metric-pct{
  font-size:48px;font-weight:800;color:var(--cream);
  line-height:1;letter-spacing:-2px;
}

.att-metric-label{
  font-size:12px;font-weight:500;color:var(--muted);
}

.att-metric-warn{
  font-size:11px;font-weight:600;color:#d97706;margin-top:2px;
}

/* ── Season footer ── */
.home-season-footer{
  margin-top:24px;
  text-align:center;
  font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.12);
  padding:0 0 6px;
}

/* ── Today's session card ── */
.home-today-card{
  background:linear-gradient(135deg,rgba(22,163,74,.22) 0%,rgba(22,163,74,.08) 100%);
  border:1px solid rgba(22,163,74,.3);
}

.home-today-label{
  font-size:13px;font-weight:700;color:#fff;margin-bottom:10px;
}

.home-today-sub{
  font-size:12px;color:rgba(255,255,255,.45);margin-bottom:2px;
}

.home-today-btn{
  display:block;width:100%;padding:11px;border-radius:10px;
  background:var(--green);color:#fff;
  font-size:13px;font-weight:700;border:none;cursor:pointer;text-align:center;
  transition:background .15s;
}

.home-today-btn:active{opacity:.85;}

.home-today-btn--done{
  background:rgba(22,163,74,.22);color:#4ade80;
}

/* ── Attendance widget (home card) ── */
.home-card-badge--att{background:var(--dim);color:var(--green);}

.att-widget-card{border:none;}

.att-widget-stats{
  display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:14px;
}

.att-widget-stat{
  font-size:14px;color:var(--muted);
}

.att-widget-stat strong{
  color:var(--cream);font-weight:700;
}

.att-widget-stat--warn{
  color:#dc2626;
}

.att-widget-sep{
  color:var(--bdr);
}

.att-widget-btn{
  display:inline-block;padding:10px 18px;border-radius:8px;
  background:var(--green);color:#fff;
  font-size:13px;font-weight:700;border:none;cursor:pointer;
  transition:background .2s;
}

.att-widget-btn:hover{
  background:var(--bright);
}

.att-widget-btn:active{
  opacity:.9;
}

.att-widget-btn--done{
  background:var(--dim);color:var(--green);
}

.att-widget-view{
  font-size:13px;font-weight:600;color:var(--green);
  background:none;border:none;cursor:pointer;padding:0;
  text-decoration:none;
}

.att-widget-view:hover{
  text-decoration:underline;
}

/* ── Attendance page container ── */
#pg-att{overflow-y:auto;-webkit-overflow-scrolling:touch;}
#attMain{padding:0 0 90px;}

/* Match bar in trend chart (blue instead of green) */
.att-trend-bar--match{background:#3b82f6 !important;}
/* Match bar in player mini chart */
.att-mini-bar--match.pas-mini-bar--on{background:#3b82f6;}
/* Type badges inside player drill-down sheet */
.att-type-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;white-space:nowrap;flex-shrink:0;}
.att-type-badge--match{background:#dbeafe;color:#1d4ed8;}
.att-type-badge--train{background:var(--dim);color:var(--green);}

/* ── Admin Panel ── */
/* Admin tabs bar */
.admin-tabs-bar{display:flex;gap:6px;padding-bottom:12px;border-bottom:2px solid var(--bdr);margin-bottom:16px;flex-wrap:wrap;}

.admin-tab-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 14px;border:none;background:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.admin-tab-btn:hover{color:var(--cream);}
.admin-tab-btn--on{color:var(--cream);border-bottom-color:var(--bright);border-bottom-width:3px;padding-bottom:6px;}
.admin-tab-content{display:none;}
.admin-tab-content.on{display:block;padding-top:8px;}

.admin-team-row,.admin-user-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:12px;align-items:center;padding:14px 12px;border-radius:8px;background:var(--surf);margin-bottom:8px;font-size:13px;transition:background .15s;}
.admin-team-row:hover,.admin-user-row:hover{background:var(--surf2);}
.admin-team-row:last-child,.admin-user-row:last-child{margin-bottom:0;}
.admin-team-name{font-weight:600;color:var(--cream);}
.admin-user-name{font-weight:600;color:var(--cream);}

.admin-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:9999;}
.admin-modal{background:var(--surf);border-radius:12px;padding:24px;max-width:500px;width:90%;box-shadow:0 20px 25px rgba(0,0,0,0.15);}
.admin-modal-hd{font-size:16px;font-weight:700;color:var(--cream);margin-bottom:16px;}
.admin-modal-ft{display:flex;gap:8px;margin-top:16px;}
.admin-input{display:block;width:100%;padding:8px 12px;border:1px solid var(--bdr);border-radius:6px;font-size:13px;margin-bottom:10px;box-sizing:border-box;font-family:-apple-system,'Roboto',sans-serif;color:var(--cream);background:var(--surf);transition:border-color .15s,box-shadow .15s;}
.admin-input:last-child{margin-bottom:0;}
.admin-input:focus{outline:none;border-color:var(--bright);box-shadow:0 0 0 3px rgba(22,163,74,0.1);}
.admin-checkbox{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;}
.admin-checkbox input[type="checkbox"]{cursor:pointer;}

/* Dropdown styling */
select {
  font-family: -apple-system, 'Roboto', sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  background-color: var(--surf);
  color: var(--cream);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

select:hover {
  border-color: var(--green);
}

select:focus {
  outline: none;
  border-color: var(--bright);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* Form groups and labels */
.admin-form-group{margin-bottom:16px;}
.admin-form-group:last-of-type{margin-bottom:12px;}
.admin-form-label{display:block;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}

/* Date inputs */
input[type="date"]{
  font-family:-apple-system,'Roboto',sans-serif;
  font-size:13px;
  padding:10px 12px;
  background-color:var(--surf);
  color:var(--cream);
  border:1px solid var(--bdr);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}

input[type="date"]:hover{
  border-color:var(--green);
}

input[type="date"]:focus{
  outline:none;
  border-color:var(--bright);
  box-shadow:0 0 0 3px rgba(22,163,74,0.1);
}

/* ════════════════════════════════════════════════
   HOME PAGE — APPLE FITNESS DARK THEME
   All rules scoped to #pg-home — zero impact on
   other pages.
   ════════════════════════════════════════════════ */

#pg-home,
#pg-home .home-scroll {
  background: #000;
}

/* Hero: panel card — matches the other home cards */
#pg-home .home-hero {
  background: #1c1c1e;
  border-radius: 18px;
  margin: 16px 14px 0;   /* overrides the flush -16px margins */
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 24px rgba(0,0,0,.55);
  overflow: hidden;
}

/* Section titles: small uppercase gray — classic Apple Fitness label style */
#pg-home .home-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: rgba(255,255,255,.38);
  margin-bottom: 10px;
}

/* Dark elevated cards */
#pg-home .home-card {
  background: #1c1c1e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 24px rgba(0,0,0,.55);
}

#pg-home .home-card--empty {
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.28);
}

#pg-home .home-card--tappable:hover {
  background: #2c2c2e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.65);
  transform: translateY(-1px);
}

/* Card header date */
#pg-home .home-card-date {
  color: rgba(255,255,255,.4);
}

/* Badges — adjust for dark surface */
#pg-home .home-card-badge--match {
  background: rgba(59,130,246,.22);
  color: #93c5fd;
}
#pg-home .home-card-badge--today {
  background: rgba(22,163,74,.3);
  color: #4ade80;
}
#pg-home .home-card-badge--soon {
  background: rgba(251,191,36,.2);
  color: #fbbf24;
}
#pg-home .home-card-badge--training {
  background: rgba(22,163,74,.22);
  color: #4ade80;
}
#pg-home .home-card-badge--weather {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}
#pg-home .home-card-badge--att {
  background: rgba(22,163,74,.22);
  color: #4ade80;
}

/* Match VS layout on dark */
#pg-home .home-match-vs-name,
#pg-home .home-match-vs-opp,
#pg-home .home-match-label {
  color: #fff;
}

/* Detail rows (time, location, player count) */
#pg-home .home-card-detail-item {
  color: rgba(255,255,255,.48);
}
#pg-home .home-card-detail-item [data-lucide] {
  color: #4ade80;
}
#pg-home .home-card-detail-item a {
  color: #4ade80;
}

/* Training sport label */
#pg-home .home-train-sport {
  color: #4ade80;
}

/* Weather card */
#pg-home .home-weather-temp,
#pg-home .home-weather-cond {
  color: #fff;
}
#pg-home .home-weather-feel {
  color: rgba(255,255,255,.42);
}
#pg-home .home-weather-grid {
  border-top-color: rgba(255,255,255,.1);
}
#pg-home .home-weather-stat {
  color: rgba(255,255,255,.48);
}
#pg-home .home-weather-stat [data-lucide] {
  color: #4ade80;
}

/* Skeleton shimmer — dark variant */
#pg-home .home-skeleton-line {
  background: linear-gradient(90deg, #2c2c2e 25%, #3a3a3c 50%, #2c2c2e 75%);
  background-size: 200% 100%;
}

/* ── White bottom fix: ensure dark bg fills full viewport ── */
#pg-home{
  min-height:100vh;
}

/* ── Narrow match card VS layout ── */
#pg-home .home-panel-row .home-match-teams{
  padding:4px 0 2px;gap:8px;
}

#pg-home .home-panel-row .home-match-vs-block{
  flex-direction:column;align-items:flex-start;gap:2px;
}

#pg-home .home-panel-row .home-match-vs-divider{
  display:none;
}

#pg-home .home-panel-row .home-match-vs-opp{
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.6);
  text-align:left;padding-left:18px;
  overflow:visible;white-space:normal;
}

#pg-home .home-panel-row .home-match-vs-opp::before{
  content:'vs ';font-size:10px;font-weight:500;opacity:.7;
}

#pg-home .home-panel-row .home-match-vs-name{
  font-size:13px;
}

/* ── Attendance metric on dark ── */
#pg-home .att-metric-pct{
  color:#fff;
}

#pg-home .att-metric-label{
  color:rgba(255,255,255,.42);
}

#pg-home .att-metric-warn{
  color:#fb923c;
}

/* ── Narrow panel (Training / Weather half-column) ── */
#pg-home .home-panel-row .home-section-title{
  font-size:10px;letter-spacing:.6px;margin-bottom:7px;
}

#pg-home .home-panel-row .home-weather-main{
  gap:8px;margin-bottom:10px;
}

#pg-home .home-panel-row .home-weather-temp{
  font-size:30px;
}

#pg-home .home-panel-row .home-weather-emoji{
  font-size:28px;line-height:1;
}

#pg-home .home-panel-row .home-weather-cond{
  font-size:13px;
}

#pg-home .home-panel-row .home-weather-feel{
  font-size:11px;
}

#pg-home .home-panel-row .home-weather-grid{
  grid-template-columns:1fr;gap:5px;
}

#pg-home .home-panel-row .home-card-date{
  font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;
}

#pg-home .home-panel-row .home-card-hd{
  margin-bottom:8px;
}

#pg-home .home-panel-row .home-card-detail{
  gap:6px;
}

#pg-home .home-panel-row .home-card-detail-item{
  font-size:12px;
}

/* Attendance widget on dark */
#pg-home .att-widget-stats {
  color: rgba(255,255,255,.48);
}
#pg-home .att-widget-stat {
  color: rgba(255,255,255,.48);
}
#pg-home .att-widget-stat strong {
  color: #fff;
}
#pg-home .att-widget-stat--warn {
  color: #f87171;
}
#pg-home .att-widget-btn--done {
  background: rgba(22,163,74,.2);
  color: #4ade80;
}
#pg-home .att-widget-view {
  color: #4ade80;
}