/* Uses your core CSS variables already defined in epcore core.css */
/* Light/Dark theme bridge to align with site-wide variables. These
   provide safe defaults when the host theme doesn't define them. */
:root,
html[data-theme="light"],
body[data-theme="light"],
body.light,
body.theme-light{
  --eps-site-blue: #3b82f6;
  /* Site green used for active Team chips */
  --eps-site-green: #4d969b;
  --eps-site-red:  #b23a48;
  --bg-elev: #ffffff;
  --bg-elev-alt: #f7f7f7;
  --color-text: #111827;
  --color-border: rgba(0,0,0,0.14);
  --color-accent: var(--eps-site-blue, #0073aa);
  --color-error: var(--eps-site-red, #b23a48);
  --color-surface: #ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) {
    --eps-site-blue: #3b82f6;
    --eps-site-red:  #ef4444;
    --bg-elev: #111827;
    --bg-elev-alt: #0f172a;
    --color-text: #e5e7eb;
    --color-border: rgba(148,163,184,0.35);
    --color-accent: var(--eps-site-blue, #3b82f6);
    --color-error: var(--eps-site-red, #ef4444);
    --color-surface: #111827;
  }
}
/* Dark-mode variable bridge: support multiple site toggles */
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
html.dark,
body.theme-dark,
html.theme-dark,
body.dark-mode,
html.dark-mode,
body.is-dark-theme,
html.is-dark-theme,
[data-bs-theme="dark"],
html[data-bs-theme="dark"]{
  --eps-site-blue: #3b82f6;
  --eps-site-green: #4d969b;
  --eps-site-red:  #ef4444;
  --bg-elev: #111827;
  --bg-elev-alt: #0f172a;
  --color-text: #e5e7eb;
  --color-border: rgba(148,163,184,0.35);
  --color-accent: var(--eps-site-blue, #3b82f6);
  --color-error: var(--eps-site-red, #ef4444);
  --color-surface: #111827;
}

.ep-create { background: var(--bg-elev); color: var(--color-text); border-radius: 10px; border:1px solid var(--color-border); padding: 16px; max-width: 1280px; margin-left: auto; margin-right: auto; }

/* Step-specific max-widths */
.epc-step-players, .epc-step-games { max-width: 1024px; margin-left: auto; margin-right: auto; }
.epc-step-groups, .epc-step-scores, .epc-step-results { max-width: 1280px; margin-left: auto; margin-right: auto; }
.epc-step-confirm { max-width: 1024px; margin-left: auto; margin-right: auto; }
.ep-create .muted { opacity:.75; font-size:.9em; }
.ep-create .ep-pill,
.ep-create .ep-pill-primary {
    border: none; border-radius: 20px; padding: .5rem 1rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    line-height: 1.2; font-size: .95rem; transition: background .2s ease, color .2s ease;
}
.ep-create .ep-pill { background: var(--bg-elev-alt, #f7f7f7); color: var(--color-text, #111); border:1px solid var(--color-border, rgba(0,0,0,0.12)); }
.ep-create .ep-pill:hover { background: color-mix(in srgb, var(--color-accent, #0073aa) 10%, var(--bg-elev-alt, #f7f7f7)); }
.ep-create .ep-pill-primary { background: var(--color-accent, #0073aa); color:#fff; border:1px solid color-mix(in srgb, var(--color-accent, #0073aa) 40%, rgba(0,0,0,0.12)); }
.ep-create .ep-pill-primary:hover { background: color-mix(in srgb, var(--color-accent, #0073aa) 85%, #000); }
/* Ensure visible in light mode even if theme paints buttons white */
.ep-create .ep-pill, .ep-create .ep-pill-primary{ box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* Dark mode */
[data-theme="dark"] .ep-create .ep-pill{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); border-color: rgba(148,163,184,0.35); }
[data-theme="dark"] .ep-create .ep-pill-primary{ background: color-mix(in srgb, var(--color-accent, #3b82f6) 75%, #000); color:#fff; border-color: rgba(148,163,184,0.35); }

.epc-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--color-border); padding:8px 10px; margin:-8px -10px 12px; background: color-mix(in srgb, var(--bg-elev, #fff) 85%, var(--color-accent, #0073aa)); }
.epc-header .epc-title{ color: var(--color-text); text-shadow: 0 1px 0 rgba(0,0,0,0.06); }
[data-theme="dark"] .epc-header{ background: color-mix(in srgb, var(--color-surface, #111827) 75%, var(--color-accent, #3b82f6)); border-color: rgba(148,163,184,0.35); }
.epc-title { margin:0; font-size:1.1rem; }
.epc-steps { display:flex; gap:10px; font-size:.9rem; }
.epc-steps span { opacity:.6; }
.epc-steps span.is-active { opacity:1; font-weight:700; }

/* Hide the outer page title within the Create/Edit wizard context to avoid duplicate headings */
body.ep-create-active h1.entry-title,
body.ep-create-active .elementor-widget-theme-post-title,
body.ep-create-active .page-title,
body.ep-create-active .tribe-events-single-event-title{
  display: none !important;
}

/* Anchor/link color inside Create/Edit wizard — use site accent instead of TEC red */
.ep-create a{ color: var(--color-accent, #3b82f6); text-decoration-color: color-mix(in srgb, var(--color-accent, #3b82f6) 65%, transparent); }
.ep-create a:hover{ color: color-mix(in srgb, var(--color-accent, #3b82f6) 85%, #000); }
[data-theme="dark"] .ep-create a:hover{ color: color-mix(in srgb, var(--color-accent, #3b82f6) 92%, #fff); }
/* Some themes still force red links inside these sections — increase specificity */
.ep-create .epc-step-players a,
.ep-create .epc-step-players .epc-list a,
.ep-create .epc-step-groups a,
.ep-create #epc-groups-ui a,
.ep-create .epc-step-players a:visited,
.ep-create .epc-step-groups a:visited{
  color: var(--color-accent, #3b82f6) !important;
}

/* Sticky Bench (Ungrouped) — avoid hardcoded light backgrounds so dark mode is consistent */
.ep-create .epc-bench-sticky{
  background: var(--bg-elev);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.10);
}
.ep-create .epc-bench-sticky.is-dragover{
  background: color-mix(in srgb, var(--color-accent, #3b82f6) 12%, var(--bg-elev));
}
.ep-create .epc-step-players a:hover,
.ep-create .epc-step-players .epc-list a:hover,
.ep-create .epc-step-groups a:hover,
.ep-create #epc-groups-ui a:hover,
.ep-create .epc-step-players a:active,
.ep-create .epc-step-groups a:active{
  color: color-mix(in srgb, var(--color-accent, #3b82f6) 88%, #000) !important;
}
[data-theme="dark"] .ep-create .epc-step-players a:hover,
[data-theme="dark"] .ep-create .epc-step-players .epc-list a:hover,
[data-theme="dark"] .ep-create .epc-step-groups a:hover,
[data-theme="dark"] .ep-create #epc-groups-ui a:hover,
[data-theme="dark"] .ep-create .epc-step-players a:active,
[data-theme="dark"] .ep-create .epc-step-groups a:active{
  color: color-mix(in srgb, var(--color-accent, #3b82f6) 94%, #fff) !important;
}

.epc-step { padding: 8px 0; }
.epc-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.epc-field-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.epc-field input, .epc-field select { background: var(--bg-elev); color: var(--color-text); border:1px solid var(--color-border); border-radius:8px; padding:.5rem .6rem; }
/* Step 2 (Course): Recent Venues dropdown */
#epc-recent-venues{ width: 100%; }
#epc-recent-venues:disabled{ opacity: .7; }
/* Description textarea styling (light + dark) */
#epc-desc{
  background: var(--bg-elev, #fff);
  color: var(--color-text, #111);
  border: 1px solid var(--color-border, rgba(0,0,0,0.14));
  border-radius: 8px;
  padding: .6rem .7rem;
  resize: vertical;
  min-height: 84px;
}
#epc-desc::placeholder{ color: color-mix(in srgb, var(--color-text, #111) 55%, transparent); opacity: .6; }
#epc-desc:focus{ outline: none; border-color: color-mix(in srgb, var(--color-accent, #0073aa) 45%, var(--color-border, rgba(0,0,0,0.14))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #0073aa) 18%, transparent); }
[data-theme="dark"] #epc-desc{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); border-color: rgba(148,163,184,0.35); }
[data-theme="dark"] #epc-desc::placeholder{ color: #cbd5e1; opacity: .55; }
[data-theme="dark"] #epc-desc:focus{ border-color: #4D969B; box-shadow: 0 0 0 3px rgba(77,150,155,0.28); }
/* Improve contrast for built-in date/time picker icons - LIGHT MODE ONLY */
#ep-create:not([data-theme="dark"]) input[type="date"]::-webkit-calendar-picker-indicator,
#ep-create:not([data-theme="dark"]) input[type="time"]::-webkit-calendar-picker-indicator,
#ep-create[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
#ep-create[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter: contrast(1.5) saturate(1.2);
  opacity: .9;
  cursor: pointer;
}

/* Dark mode: Use color-scheme to get native dark icons from browser */
#ep-create[data-theme="dark"] input[type="date"],
#ep-create[data-theme="dark"] input[type="time"],
#ep-create[data-theme="dark"] #epc-date,
#ep-create[data-theme="dark"] #epc-time,
#ep-create[data-theme="dark"] .epc-datetime-input,
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] .epc-datetime-input,
html.theme-dark input[type="date"],
html.theme-dark input[type="time"],
body.theme-dark input[type="date"],
body.theme-dark input[type="time"],
html.dark input[type="date"],
html.dark input[type="time"],
body.dark input[type="date"],
body.dark input[type="time"],
.ep-create[data-theme="dark"] input[type="date"],
.ep-create[data-theme="dark"] input[type="time"]{
  color-scheme: dark;
}

/* Dark mode: Replace native calendar/clock icons with custom white SVG icons */
/* Hide native icon and use background-image with white SVG data URI */
#ep-create[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
#ep-create[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
html.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
body.dark input[type="date"]::-webkit-calendar-picker-indicator,
body.dark input[type="time"]::-webkit-calendar-picker-indicator,
.ep-create[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
.ep-create[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  width: 20px !important;
  height: 20px !important;
  cursor: pointer !important;
  opacity: 0.9 !important;
}
/* Time input gets a clock icon */
#ep-create[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
body.dark input[type="time"]::-webkit-calendar-picker-indicator,
.ep-create[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Combined Groups + Teams UI */
.epc-gt-group{ padding:6px; }
/* Force group containers to behave like normal blocks even if theme CSS makes cards flex/grid */
:is(#ep-create, .ep-create) .epc-gt-group{
  display:block !important;
}
.epc-gt-teambox{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  grid-column: 1 / -1 !important;
  flex: 0 0 100% !important;
}
/* Generic vertical stacking wrapper for any multi-container group layout (e.g., M1/M2, Team A/B) */
.epc-gt-stackwrap{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  grid-column: 1 / -1 !important;
}
.epc-gt-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:6px; padding:4px 6px; border:1px dashed transparent; border-radius:8px;
}
.epc-gt-row + .epc-gt-row{ margin-top:2px; }
.epc-gt-row[draggable="true"]{ cursor: grab; }
.epc-gt-row[draggable="true"]:active{ cursor: grabbing; }
.epc-gt-group.drag-over, .epc-gt-row.drag-over{ border-color: var(--color-border); background: color-mix(in srgb, var(--bg-elev) 92%, var(--color-accent)); }
.epc-gt-left{ display:flex; align-items:center; gap:6px; min-width:0; }
/* Fix a consistent column for Team chips and center header over it */
.epc-gt-right{
  display:flex; align-items:center; justify-content:center; gap:4px;
  width: 44px; min-width:44px; /* accommodates circle + hit slop */
}
.epc-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme] .ep-cap-btn,
.ep-cap-btn{
  width:26px; height:26px; min-width:26px; min-height:26px;
  aspect-ratio: 1 / 1; box-sizing: border-box; padding:0; /* ensure perfect circle, no oval */
  border-radius:50%; border:1px solid var(--color-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 92%, #fff), color-mix(in srgb, var(--bg-elev) 82%, #000));
  color: var(--color-text);
  font-weight:800; line-height:26px; text-align:center; cursor:pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}
.ep-cap-btn:hover{ box-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.08); }
[data-theme="dark"] .ep-cap-btn{ background: var(--color-surface); }

/* Active Captain: solid site blue with white letter (FORCE VISIBILITY) */
.ep-cap-btn.is-on,
[data-theme="dark"] .ep-cap-btn.is-on,
button.ep-cap-btn.is-on {
  background: var(--eps-site-blue, #3b82f6) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--eps-site-blue, #3b82f6) 65%, var(--color-border)) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18) !important;
}
.ep-team-letter{ /* legacy input style kept for back-compat (unused now) */
  width: 34px; text-align:center; border:1px solid var(--color-border); border-radius:6px; padding:.25rem .25rem;
  background: var(--bg-elev); color: var(--color-text); font-weight:600; letter-spacing:.5px;
}
.ep-team-select{
  width: 48px; min-width:48px; height:26px;
  border:1px solid var(--color-border); border-radius:6px;
  background: var(--bg-elev); color: var(--color-text); font-weight:600;
}
.ep-team-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:24px; min-width:28px;
  border:1px solid var(--color-border); border-radius:6px;
  background: var(--bg-elev); color: var(--color-text);
  font-weight:700; letter-spacing:.2px; cursor:pointer;
}
.ep-team-chip.is-active{ background: color-mix(in srgb, var(--color-accent) 85%, #fff); color:#fff; border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border)); }
[data-theme="dark"] .ep-team-chip{ background: var(--color-surface); }
/* Support additional dark-mode toggles used by different themes */
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, html[data-bs-theme="dark"], body[data-bs-theme="dark"]) .ep-team-chip{ background: var(--color-surface); color: var(--color-text); border-color: rgba(148,163,184,0.35); }
.ep-team-selector{ position: relative; }
[data-theme] .ep-team-circle,
.ep-team-circle{
  width: 26px; height: 26px; min-width:26px; min-height:26px;
  aspect-ratio: 1 / 1; box-sizing: border-box; padding:0; /* ensure perfect circle, no oval */
  border-radius: 50%; border:1px solid var(--color-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 92%, #fff), color-mix(in srgb, var(--bg-elev) 82%, #000));
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: .2px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}
.ep-team-circle:hover{ box-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.08); }
/* Active Team chip: solid site green with white letter (light and dark) */
.ep-team-circle.is-set{
  background: var(--eps-site-green);
  color:#fff;
  border-color: color-mix(in srgb, var(--eps-site-green) 60%, var(--color-border));
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.ep-team-circle.is-empty{ border-style: dashed; color: color-mix(in srgb, var(--color-text) 55%, transparent); opacity: .9; }
[data-theme="dark"] .ep-team-circle{ background: var(--color-surface); }
/* Extra dark-mode bridges (in case site toggles classes instead of attributes) */
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, html[data-bs-theme="dark"], body[data-bs-theme="dark"]) .ep-team-circle{ background: var(--color-surface); color: var(--color-text); border-color: rgba(148,163,184,0.35); }
/* Ensure active Team chip is always solid green with white text in dark mode */
[data-theme="dark"] .ep-team-circle.is-set{
  background: var(--eps-site-green);
  color: #fff;
  border-color: color-mix(in srgb, var(--eps-site-green) 60%, var(--color-border));
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
/* Mirror active Team chip state for other dark-mode toggles */
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, html[data-bs-theme="dark"], body[data-bs-theme="dark"]) .ep-team-circle.is-set{
  background: var(--eps-site-green);
  color:#fff;
  border-color: color-mix(in srgb, var(--eps-site-green) 60%, var(--color-border));
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.ep-team-menu{ position:absolute; right:0; top: calc(100% + 6px); z-index: 9999; border:1px solid var(--color-border); background: var(--bg-elev); border-radius:8px; padding:6px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
/* Drop-up variation to avoid forcing scroll on last items */
.ep-team-menu.drop-up{ top: auto; bottom: calc(100% + 6px); }
.ep-team-menu ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.ep-team-menu li{ margin:0; }
.ep-team-option{
  background: var(--bg-elev-alt);
  border:1px solid var(--color-border);
  /* Default text muted light grey per request */
  color: #dbdfe4 !important; /* site-requested light grey; strong to defeat theme overrides */
  cursor: pointer;
  padding:4px 10px;
  border-radius:999px; /* short pill */
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; line-height:1; font-weight:600; font-size:.9rem;
}
.ep-team-option:hover{ background: color-mix(in srgb, var(--color-accent) 10%, var(--bg-elev-alt)); color:#fff !important; }
.ep-team-option[aria-current="true"], .ep-team-option.is-active{
  background: color-mix(in srgb, var(--color-accent) 85%, #fff);
  color: #fff !important; /* active → white text */
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border));
}
[data-theme="dark"] .ep-team-option{ background: var(--color-surface); }
.ep-team-option[aria-current="true"], .ep-team-option:hover{ background: color-mix(in srgb, var(--color-accent) 14%, var(--bg-elev)); }
.epc-ghost-banner{ margin-bottom:6px; }
.epc-gt-group{ position: relative; overflow: visible; }
.epc-gt-row{ overflow: visible; }
.epc-legend{ margin-top:8px; }
@media (max-width:700px){ .epc-field-grid { grid-template-columns: 1fr; } }

.epc-actions { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--color-border); padding-top:10px; margin-top:10px; }
/* Some themes hide empty action rows with display:none; ensure our actions bar is always visible */
.ep-create .epc-actions{ display:flex !important; visibility: visible !important; }
/* Ensure action buttons are visible even if theme applies button resets */
.ep-create .epc-actions .ep-pill,
.ep-create .epc-actions .ep-pill-primary{ display: inline-flex !important; }

/* Venue suggestions dropdown */
.epc-suggest-list{ list-style: none; margin: 4px 0 0; padding: 6px; border:1px solid var(--color-border, rgba(0,0,0,0.12)); background: var(--bg-elev, #fff); border-radius: 8px; }
.epc-suggest-item{ padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.epc-suggest-item:hover{ background: color-mix(in srgb, var(--color-accent, #0073aa) 10%, transparent); }
[data-theme="dark"] .epc-suggest-list{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); border-color: rgba(148,163,184,0.35); }

/* Mobile-first enhancements */
@media (max-width: 720px){
  .ep-create{ padding: 10px; }
  .epc-header{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .epc-steps{ flex-wrap: wrap; gap: 6px; }
  .epc-title{ font-size: 1.15rem; }
  /* Make actions stick to the bottom on small screens so Next is always visible */
  .epc-step{ padding-bottom: 56px; }
  .epc-actions{
    position: sticky; bottom: 0; left: 0; right: 0;
    padding: 10px 0; margin-top: 16px; border-top: 1px solid var(--color-border);
    background: linear-gradient(to bottom, transparent, var(--bg-elev) 32px);
    z-index: 5;
  }
  .ep-create .ep-pill, .ep-create .ep-pill-primary{ min-height: 40px; padding: .6rem 1.1rem; font-size: 1rem; }
  .epc-field input, .epc-field select{ font-size: 1rem; }
}

.epc-two { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:900px){ .epc-two { grid-template-columns: 1fr; } }

/* Groups step uses single column that stretches full width */
.epc-step-groups .epc-two { grid-template-columns: 1fr; justify-content: stretch; }
.epc-step-groups .epc-col { width: 100%; max-width: 100%; }

.epc-col { background: var(--bg-elev, #fff); border:1px solid var(--color-border, rgba(0,0,0,0.18)); border-radius:8px; overflow:hidden; }
.epc-col > h3 { margin:0; padding:8px 12px; background: var(--bg-elev-alt, #f5f5f5); border-bottom:1px solid var(--color-border, rgba(0,0,0,0.18)); font-size:14px; }
.epc-list { max-height: 50vh; overflow:auto; padding:10px; background: var(--bg-elev, #fff); }
/* Create/Edit → Groups & Teams should expand naturally without inner scrolling */
#epc-groups-ui.epc-list{ max-height: none; overflow: visible; padding:10px; }
/* Ensure the containing column does not clip popovers and can grow in height */
.epc-step-groups .epc-two, .epc-step-groups .epc-col{ overflow: visible; }

/* ---------------- Player Card (uniform avatar + full name + CH) ---------------- */
.epc-player-card{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--color-border); border-radius:10px; background: var(--bg-elev); }
.epc-player-card .epc-avatar{
  width: 28px !important; height: 28px !important; min-width:28px; min-height:28px;
  aspect-ratio: 1 / 1; /* ensure perfect circle */
  border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--bg-elev, #fff) 88%, #000);
  color: var(--color-text, #111);
  font-weight:600; font-size:.9rem;
  border:1px solid var(--color-border);
  overflow: hidden;
}
.epc-player-card img.epc-avatar{ width:28px !important; height:28px !important; object-fit:cover; border-radius:50%; display:block; aspect-ratio: 1 / 1; }
.epc-player-card .epc-player-name{ max-width: 220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epc-player-card .epc-player-hcp{ opacity:.7; font-weight:600; }
/* Balloon for full name on click (Create/Edit) */
.epc-name-balloon{
  background: var(--bg-elev, #fff);
  color: var(--color-text, #111);
  border: 1px solid var(--color-border, rgba(0,0,0,0.12));
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  padding: 6px 10px;
  z-index: 1000; max-width: 320px; pointer-events: none;
}

/* Organizers picker (sticky at bottom of Selected column) */
.epc-organizers-box{ 
  position: sticky; bottom: 0; 
  border-top: 1px solid var(--color-border);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-elev) 50%, transparent), var(--bg-elev) 36px);
  padding: 8px 10px;
}
.epc-organizers-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight: 700; margin-bottom: 0; }
.epc-org-toggle{ display:inline-flex; align-items:center; gap:8px; font-weight:700; cursor:pointer; user-select:none; }
.epc-org-toggle input{ width: 18px; height: 18px; }
.epc-org-count{ opacity: .7; font-weight: 600; }
.epc-organizers-body{ margin-top: 8px; }
.epc-organizers-selected{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:6px; margin-bottom: 6px; }
.epc-organizers-selected .epc-chip{ margin:0; padding:6px 8px; }
.epc-organizers-search input{ width:100%; padding:.45rem .6rem; border:1px solid var(--color-border); border-radius:6px; background: var(--bg-elev); color: var(--color-text); }
[data-theme="dark"] .epc-organizers-search input{ background: var(--color-surface); color: var(--color-text); border-color: rgba(148,163,184,0.35); }
.epc-organizers-search .epc-list{ max-height: 28vh; margin-top:6px; }

.epc-chip { display:flex; align-items:center; gap:8px; padding:6px 10px; margin:0 0 6px; border-radius:8px; background: var(--bg-elev-alt, #f7f7f7) !important; border:1px solid color-mix(in srgb, var(--color-border, rgba(0,0,0,0.18)) 100%, rgba(0,0,0,0.18)) !important; cursor:pointer; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,0.04); }
.epc-chip.is-hidden { opacity:.3; pointer-events:none; }
.epc-chip.is-selected { background: #eff6ff !important; color: #1e40af !important; border-color: #dbeafe !important; font-weight:700; }
/* Dark mode for selected chips */
:is([data-theme="dark"], html.theme-dark, body.theme-dark, html.dark, body.dark, html[data-bs-theme="dark"], body[data-bs-theme="dark"]) .epc-chip.is-selected {
  background: #334155 !important; 
  color: #f8fafc !important; 
  border-color: #475569 !important; 
}
@media (prefers-color-scheme: dark) {
  .epc-chip.is-selected { background: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; }
}
.epc-avatar { width:28px; height:28px; border-radius:50% !important; display:grid; place-items:center; background: color-mix(in srgb, var(--bg-elev, #fff) 88%, #000) !important; color: var(--color-text) !important; font-weight:600; font-size:13px; flex: 0 0 28px; border:1px solid var(--color-border) !important; overflow:hidden; }
/* If an image is used as avatar, guarantee round crop and sizing */
.epc-chip img.epc-avatar{ width:28px !important; height:28px !important; border-radius:50% !important; object-fit:cover; display:block; }
/* Dark-mode bridge for avatar background/border across theme toggles */
[data-theme="dark"] .epc-avatar{ background: var(--color-surface) !important; color: var(--color-text) !important; border-color: rgba(148,163,184,0.35) !important; }
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, html[data-bs-theme="dark"], body[data-bs-theme="dark"]) .epc-avatar{ background: var(--color-surface) !important; color: var(--color-text) !important; border-color: rgba(148,163,184,0.35) !important; }
.epc-chip .epc-chip-label{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
/* On mobile, constrain chip labels more aggressively for full names */
@media (max-width: 600px){
  .epc-chip .epc-chip-label{ max-width: 120px; }
}
@media (max-width: 420px){
  .epc-chip .epc-chip-label{ max-width: 90px; }
}
.epc-chip .epc-chip-fav{ margin-left:auto; background:transparent; border:0; color: currentColor; font-size: 16px; line-height: 1; cursor:pointer; }

.epc-card { border:1px solid var(--color-border); border-radius:8px; padding:10px; background: var(--bg-elev); }

.epc-games { display:flex; flex-direction:column; gap:10px; }
.epc-switch { display:flex; align-items:center; gap:8px; }
.epc-subfields { border-left:3px solid var(--color-border); padding-left:10px; margin-left:6px; }

/* Players step: responsive layout - fixed left, flexible right on desktop */
.epc-two-players{ grid-template-columns: minmax(280px, 400px) 1fr; gap:12px; }
/* Ensure proper column sizing even if themes override grid in containers */
.epc-step-players .epc-two-players{ grid-template-columns: minmax(280px, 400px) 1fr !important; }
/* Mobile: stack vertically */
@media (max-width: 900px){
  .epc-two-players{ grid-template-columns: 1fr !important; }
}
.epc-col-left .epc-list, .epc-col-right .epc-list{ max-height: 55vh; }
@media (max-width: 480px){
  /* Remove as much outer gutter as possible on mobile for Players step */
  .ep-create{ padding-left: 6px; padding-right: 6px; }
  .epc-step-players{ margin-left: -6px; margin-right: -6px; }
  .epc-two-players{ grid-template-columns: 1fr 1fr; gap:6px; }
  .epc-col-left, .epc-col-right{ min-width: 0; border-radius: 6px; }
  .epc-col > h3{ padding:6px 8px; font-size:13px; }
  .epc-list{ padding:4px 2px; }
  .epc-accordion{ padding:6px; }
  .epc-acc-item{ margin-bottom:6px; }
  .epc-acc-head{ padding:6px 8px; }
  .epc-col-left .epc-list, .epc-col-right .epc-list{ max-height: 50vh; }
  /* Hide avatars and compress chips for higher density */
  .epc-chip .epc-avatar{ display:none; }
  .epc-chip{ padding:4px 7px; gap:6px; margin: 0 2px 4px; font-size: 0.95rem; min-height: 34px; }
  .epc-selected-grid .epc-avatar{ display:none; }
}

/* Page-level background: when Create Event is active, let the whole page follow theme vars */
body.ep-create-active{ background: var(--bg-elev); }

/* Players step density tweaks: slimmer chips and tighter side gutters */
.epc-step-players .epc-list{ padding: 8px 6px; }
.epc-step-players .epc-list .epc-chip{
  margin: 0 3px 5px; /* very small side margins */
  padding: 5px 9px;  /* slightly shorter height while maintaining tapability */
  min-height: 36px;  /* compact but finger-tappable */
}
/* Selected Players column — hide the Favorite star to save space */
.epc-col-right .epc-chip .epc-chip-fav{ display:none !important; }
/* Left columns — keep a compact star button */
.epc-col-left .epc-chip .epc-chip-fav{ width:22px; height:22px; line-height:1; padding:0; border-radius:6px; opacity:.8; }
.epc-col-left .epc-chip .epc-chip-fav:hover{ opacity:1; }

/* Details image upload preview */
.epc-image-preview{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.epc-image-preview img{ max-width: 160px; max-height: 120px; border-radius:8px; border:1px solid var(--color-border); object-fit: cover; }

/* Selected list compact grid — supports hundreds of names */
.epc-selected-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.epc-selected-grid .epc-chip{
  margin: 0; /* grid uses gap */
  padding: 6px 8px;
}
.epc-selected-grid .epc-avatar{ width:28px; height:28px; font-size:13px; }
@media (max-width: 420px){ .epc-selected-grid{ grid-template-columns: repeat(2, 1fr); } }

/* Accordion */
.epc-accordion{ padding:8px; }
.epc-acc-item{ border:1px solid var(--color-border); border-radius:8px; background: var(--bg-elev); margin-bottom:8px; overflow:hidden; }
/* Improve contrast in light mode */
.epc-acc-head{ width:100%; text-align:left; background: var(--bg-elev-alt, #f7f7f7); color: #374151; padding:8px 10px; border:0; border-bottom:1px solid var(--color-border, rgba(0,0,0,0.18)); cursor:pointer; font-weight:700; }
.epc-acc-head:hover, .epc-acc-head:focus{ color:#111827; outline:none; }
.epc-acc-body{ padding:8px 10px; }
[data-theme="dark"] .epc-acc-item{ background: var(--color-surface, #111827); border-color: rgba(148,163,184,0.35); }
[data-theme="dark"] .epc-acc-head{ background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.35); }

/* Favorite groups section */
.epc-group-block{ border:1px dashed var(--color-border); border-radius:6px; padding:6px; margin-bottom:8px; }
.epc-group-title{ font-weight:600; margin-bottom:6px; font-size:.9rem; display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Favorite Groups: Add button */
.epc-fav-group-add{ padding: .35rem .6rem; font-size: .9rem; white-space: nowrap; }

/* Favorite Groups list (Step 3): collapsible rows showing name + Add button */
.epc-fg-row{ border:1px dashed var(--color-border); border-radius:8px; overflow:hidden; margin-bottom:8px; background: var(--bg-elev); }
.epc-fg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; background: var(--bg-elev-alt, #f7f7f7); border-bottom:1px solid var(--color-border); }
.epc-fg-toggle{
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-weight: 700;
  text-align: left;
  padding: 6px 4px;
  cursor: pointer;
  line-height: 1.2;
}
.epc-fg-toggle::after{ content: '▾'; float: right; opacity: .65; }
.epc-fg-toggle[aria-expanded="true"]::after{ content: '▴'; }
.epc-fg-body{ padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.epc-fg-body[hidden]{ display:none !important; }
.epc-fg-member{ font-size: .92rem; opacity: .9; }

[data-theme="dark"] .epc-fg-head{ background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.35); }

/* Favorite Groups: Star toggle (used on Step 5 Group cards) */
.epc-fav-group-star{
  border:0; background:transparent; color: currentColor;
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 4px 6px; margin-left: 6px;
  opacity: .85;
}
.epc-fav-group-star:hover, .epc-fav-group-star:focus{ opacity: 1; outline: none; }
.epc-fav-group-star[disabled]{ opacity: .4; cursor: default; }

/* Simple modal (used for Favorite Group naming) */
.epc-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.epc-modal{
  width: 100%;
  max-width: 420px;
  background: var(--bg-elev);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.epc-modal-title{ font-weight: 800; margin-bottom: 6px; }
.epc-modal-input{
  width: 100%;
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--bg-elev);
  color: var(--color-text);
}
.epc-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; }

.ep-create.ep-create-gate { text-align:center; padding:24px; }

/* -----------------------------------------------------------
   Specificity bridges for Playing Groups & Teams
   Ensures captain buttons, team chips, and team menu pills
   render with the intended styles even if host theme overrides
   add competing rules. No animations, minimal !important usage.
   ----------------------------------------------------------- */
#epc-groups-ui .epc-gt-row .ep-cap-btn,
.epc-step-groups #epc-groups-ui .ep-cap-btn {
  width:26px; height:26px; min-width:26px; min-height:26px;
  border-radius:50%; border:1px solid var(--color-border) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 92%, #fff), color-mix(in srgb, var(--bg-elev) 82%, #000)) !important;
  color: var(--color-text) !important; font-weight:800; line-height:26px; text-align:center;
}
#epc-groups-ui .epc-gt-row .ep-cap-btn.is-on,
.epc-step-groups #epc-groups-ui .ep-cap-btn.is-on{
  background: var(--eps-site-blue) !important;
  color:#fff !important;
  border-color: color-mix(in srgb, var(--eps-site-blue) 65%, var(--color-border)) !important;
}

#epc-groups-ui .epc-gt-row .ep-team-circle,
.epc-step-groups #epc-groups-ui .ep-team-circle{
  width:26px; height:26px; min-width:26px; min-height:26px;
  border-radius:50%; border:1px solid var(--color-border) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 92%, #fff), color-mix(in srgb, var(--bg-elev) 82%, #000)) !important;
  color: var(--color-text) !important; display:inline-flex; align-items:center; justify-content:center;
}
#epc-groups-ui .epc-gt-row .ep-team-circle.is-set,
.epc-step-groups #epc-groups-ui .ep-team-circle.is-set{
  background: var(--eps-site-green) !important; color:#fff !important;
  border-color: color-mix(in srgb, var(--eps-site-green) 60%, var(--color-border)) !important;
}

#epc-groups-ui .ep-team-menu{ z-index: 10000; }
#epc-groups-ui .ep-team-menu .ep-team-option{
  background: var(--bg-elev-alt) !important; border:1px solid var(--color-border) !important;
  color: #dbdfe4 !important; border-radius:999px; padding:4px 10px; font-weight:600;
}
#epc-groups-ui .ep-team-menu .ep-team-option[aria-current="true"],
#epc-groups-ui .ep-team-menu .ep-team-option.is-active{
  background: color-mix(in srgb, var(--color-accent) 85%, #fff) !important; color:#fff !important;
  border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border)) !important;
}

/* Dark bridges */
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) #epc-groups-ui .ep-cap-btn{
  background: var(--color-surface) !important; color: var(--color-text) !important; border-color: rgba(148,163,184,0.35) !important;
}
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) #epc-groups-ui .ep-cap-btn.is-on{
  background: var(--eps-site-blue) !important; color:#fff !important;
}
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) #epc-groups-ui .ep-team-circle{
  background: var(--color-surface) !important; color: var(--color-text) !important; border-color: rgba(148,163,184,0.35) !important;
}
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) #epc-groups-ui .ep-team-circle.is-set{
  background: var(--eps-site-green) !important; color:#fff !important;
}