/* ------------------------------------------------------------------
 * match — global styles
 * Brand: #10B7AB (teal) primary, #FF7A45 (orange) accent
 * ------------------------------------------------------------------ */

html { -webkit-font-smoothing: antialiased; }

/* Selection */
::selection {
  background: #BAEAE7;
  color: #0F1F2E;
}

/* Toasts */
.toast {
  pointer-events: auto;
  background: white;
  color: #0F1F2E;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 10px 30px -8px rgba(15, 31, 46, 0.2);
  font-weight: 500;
  font-size: 14px;
  min-width: 240px;
  max-width: 380px;
  border-left: 4px solid #10B7AB;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.toast.show {
  transform: translateX(0);
  opacity: 1;
}
.toast-success { border-left-color: #10b981; }
.toast-error   { border-left-color: #ef4444; }
.toast-info    { border-left-color: #10B7AB; }

/* Leaflet polish */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 4px;
}
.leaflet-popup-content {
  margin: 12px 14px;
  font-size: 13px;
}
.leaflet-container a.leaflet-popup-close-button {
  padding: 8px 8px 0 0;
  color: #64748b;
}
.leaflet-control-zoom a {
  border-radius: 8px !important;
  color: #0F1F2E !important;
}

/* Custom map marker — teal gradient pin with white sport icon */
.match-marker {
  background: linear-gradient(135deg, #10B7AB 0%, #0B7C74 100%);
  width: 40px;
  height: 40px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
  box-shadow: 0 6px 14px -2px rgba(11, 124, 116, 0.55);
  color: white;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.match-marker:hover {
  background: linear-gradient(135deg, #FF7A45 0%, #E84A0F 100%);
  box-shadow: 0 8px 20px -2px rgba(232, 74, 15, 0.55);
}
.match-marker > svg {
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* When a card is hovered on the list, its marker gets focus */
.match-marker.is-focused {
  transform: rotate(-45deg) scale(1.25);
  z-index: 1000;
  background: linear-gradient(135deg, #FF7A45 0%, #E84A0F 100%);
}

/* City (Ville de Genève) events use the accent orange so they read as a
   distinct layer from community (teal) events on the map. */
.match-marker--city {
  background: linear-gradient(135deg, #FF7A45 0%, #E84A0F 100%);
  box-shadow: 0 6px 14px -2px rgba(232, 74, 15, 0.45);
}

/* ------------------------------------------------------------------
 * Form controls — reset native browser styles + apply theme.
 *
 * SPECIFICITY DANCE:
 * Tailwind CDN injects its preflight AFTER our styles.css. The relevant
 * preflight rules:
 *   `*                     { border-width: 0 }`              → 0,0,0
 *   `button, input, ...    { padding: 0; font-size: 100%; }` → 0,0,1
 *
 * To win on padding/font-size/etc, our selector must be > 0,0,1. We
 * prefix the BASE rule with `body ` → 0,0,2 → beats preflight, loses to
 * any utility class (0,1,0) so `.border-brand-500`, `.rounded-full`,
 * `.p-3` etc. still override per input.
 *
 * Pseudo-state rules (:hover, :focus) don't conflict with preflight, so
 * the `body ` prefix is unnecessary there.
 *
 * Special types (checkbox/radio/file) use bare attribute selectors
 * `[type="checkbox"]` (0,1,0) — same as `.sr-only`. Since Tailwind's
 * utilities are injected after us, `.sr-only` correctly wins on tied
 * specificity (radio-cards stay hidden).
 * ------------------------------------------------------------------ */
body input,
body textarea,
body select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #0F1F2E;
  background-color: #fff;
  background-image: none;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input:hover,
textarea:hover,
select:hover {
  border-color: #CBD5E1;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #10B7AB;
  box-shadow: 0 0 0 3px rgba(16, 183, 171, 0.18);
  background-color: #fff;
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8;
  opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: #F8FAFC;
  color: #94A3B8;
  cursor: not-allowed;
}

/* Textarea specifics — also need `body` prefix because preflight resets
   padding on textarea too. */
body textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.6;
  padding-top: 12px;
}

/* Select specifics — same reasoning, custom chevron. */
body select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748B' stroke-width='2' viewBox='0 0 24 24'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
body select:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2310B7AB' stroke-width='2.5' viewBox='0 0 24 24'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
}

/* Hidden input shouldn't get the styled look. */
input[type="hidden"] {
  display: none;
}

/* ------------------------------------------------------------------
 * Flatpickr theme — match the brand (teal + orange, rounded 16px,
 * Inter font). Overrides the default white-and-blue look.
 *
 * Selector spec for `.flatpickr-calendar input` is 0,1,1 which beats
 * our base `body input` (0,0,2) — so calendar internals don't inherit
 * our generic input padding/border styles.
 * ------------------------------------------------------------------ */
/* CONTAINER & FONT — pure visual, no layout interference. */
.flatpickr-calendar {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #F3F4F6;
  box-shadow: 0 10px 30px -8px rgba(15, 31, 46, 0.18);
  font-family: 'Inter', system-ui, sans-serif;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }

/* HEADER — recolor only, leave geometry to Flatpickr. */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #10B7AB; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #0E9D93; }

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color: #0F1F2E; font-weight: 700; }

/* WEEKDAYS — uppercase, gray. */
.flatpickr-weekday { color: #94A3B8; font-weight: 700; font-size: 11px; }

/* DAYS — branded states. Don't touch dimensions, Flatpickr handles them. */
.flatpickr-day { border-radius: 8px; color: #0F1F2E; font-weight: 500; border: 0; }
.flatpickr-day:hover,
.flatpickr-day:focus { background: #E6F7F6; color: #0B7C74; border: 0; }
.flatpickr-day.today { border: 1.5px solid #FF7A45; color: #FF7A45; font-weight: 700; }
.flatpickr-day.today:hover { background: #FFF1EB; color: #FF5A1F; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today,
.flatpickr-day.selected:focus {
  background: #10B7AB; border-color: #10B7AB; color: #fff; font-weight: 700;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #CBD5E1; font-weight: 400; }

/* TIME PICKER — branded hover only. */
.flatpickr-time .flatpickr-time-separator { color: #94A3B8; font-weight: 700; }
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time input:hover,
.flatpickr-time input:focus { background: #E6F7F6 !important; }

/* ------------------------------------------------------------------
 * CRITICAL: defeat our base `body input` / `body select` resets that
 * would otherwise turn Flatpickr's internal year/hour/minute/month
 * fields into full-width bordered boxes. We use `!important` here
 * because Flatpickr's stylesheet is loaded BEFORE ours, and we need
 * to be sure that no leak from our reset bleeds into the calendar.
 * ------------------------------------------------------------------ */
.flatpickr-calendar input,
.flatpickr-calendar select {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
.flatpickr-calendar input:focus,
.flatpickr-calendar input:hover,
.flatpickr-calendar select:focus,
.flatpickr-calendar select:hover {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
/* Keep the month dropdown looking selectable — restore the native
   chevron via `appearance: menulist` (which Flatpickr sets by default
   but our `!important` reset above wipes). */
.flatpickr-calendar .flatpickr-monthDropdown-months {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  cursor: pointer;
  padding-right: 4px !important;
}

/* The "altInput" Flatpickr renders is the visible, formatted version.
   It inherits classes from the original input, so our base reset already
   styles it correctly — we just need to make sure the cursor signals
   that it's a date picker. */
input.flatpickr-input,
input[readonly].flatpickr-input,
input.flatpickr-alt-input {
  cursor: pointer;
}

/* Checkboxes and radios — branded look.
   Use [type="checkbox"] without `input` prefix → specificity 0,1,0, equal
   to `.sr-only`. Since Tailwind utility classes are injected AFTER our
   styles.css, the cascade order makes `.sr-only` win when applied (used
   in group_create.js for hidden radio-cards). */
[type="checkbox"],
[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid #CBD5E1;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
[type="checkbox"] { border-radius: 5px; }
[type="radio"] { border-radius: 50%; }
[type="checkbox"]:hover,
[type="radio"]:hover {
  border-color: #10B7AB;
}
[type="checkbox"]:checked,
[type="radio"]:checked {
  background-color: #10B7AB;
  border-color: #10B7AB;
}
[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='3' viewBox='0 0 24 24'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3e%3c/svg%3e");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 33%, transparent 36%);
}
[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 183, 171, 0.22);
  outline: none;
}

/* File input — dashed border, branded "browse" pill */
[type="file"] {
  font-size: 13px;
  color: #33495D;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  cursor: pointer;
}
[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 14px;
  border: 0;
  border-radius: 9999px;
  background: #E6F7F6;
  color: #0B7C74;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}
[type="file"]::file-selector-button:hover {
  background: #BAEAE7;
}

/* Number input — kill the up/down spinner */
[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[type="number"] { -moz-appearance: textfield; }

/* Date / datetime indicator — keep tinted teal for theme consistency */
[type="date"]::-webkit-calendar-picker-indicator,
[type="datetime-local"]::-webkit-calendar-picker-indicator,
[type="time"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(50%) sepia(50%) saturate(500%) hue-rotate(150deg);
  opacity: 0.7;
}
[type="date"]:focus::-webkit-calendar-picker-indicator,
[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Search input — remove the leftover "x" clear cross on some browsers */
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Autofill — kill the yellow Chrome autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #0F1F2E;
  transition: background-color 5000s ease-in-out 0s;
}

/* Compact variant — for inline filters and dense UIs.
   Apply with class="input-sm" on the element. */
.input-sm {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* SR-only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Sport icon container — used in cards, headers, etc. */
.sport-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E6F7F6;
  color: #0B7C74;
  border-radius: 14px;
}
.sport-tile svg { display: block; }

/* Star button reset (rating UI) */
.star-btn { background: none; border: 0; padding: 4px; cursor: pointer; }

/* Filter chip — active state */
.chip-btn.chip-active {
  background: #10B7AB;
  color: white;
  border-color: #10B7AB;
  box-shadow: 0 4px 14px -4px rgba(16, 183, 171, 0.5);
}

/* Hero gradient ambient */
.hero-gradient {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 122, 69, 0.18), transparent 50%),
    linear-gradient(135deg, #10B7AB 0%, #0E9D93 60%, #0B7C74 100%);
}

/* Pulse for new chat message indicator */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ------------------------------------------------------------------
 * Bottom tab bar (mobile)
 * ------------------------------------------------------------------ */
#bottom-nav .bnav.bnav-active {
  color: #10B7AB;
}
#bottom-nav .bnav.bnav-active span,
#bottom-nav .bnav.bnav-active svg { color: #10B7AB; }

/* ------------------------------------------------------------------
 * Sport tile selector — horizontal scroll row (home)
 * ------------------------------------------------------------------ */
.sport-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.sport-strip::-webkit-scrollbar { display: none; }
.sport-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 9999px;
  background: white;
  border: 1px solid #E5E7EB;
  font-size: 13px;
  font-weight: 600;
  color: #33495D;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sport-pill:hover {
  border-color: #5CCEC8;
  color: #0E9D93;
}
.sport-pill .sport-pill-icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #E6F7F6;
  color: #0B7C74;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sport-pill .sport-pill-icon > div { width: 16px; height: 16px; }
.sport-pill.sport-pill-active {
  background: #10B7AB;
  color: white;
  border-color: #10B7AB;
  box-shadow: 0 4px 14px -4px rgba(16, 183, 171, 0.5);
}
.sport-pill.sport-pill-active .sport-pill-icon {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ------------------------------------------------------------------
 * Sticky CTA on event detail (mobile only)
 * ------------------------------------------------------------------ */
.sticky-cta-mobile {
  position: fixed;
  left: 0; right: 0;
  bottom: 64px; /* above bottom nav */
  z-index: 25;
  background: white;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #E5E7EB;
  box-shadow: 0 -4px 20px -4px rgba(15, 31, 46, 0.08);
}
@media (min-width: 768px) {
  .sticky-cta-mobile { display: none; }
}

/* ------------------------------------------------------------------
 * Group switcher dropdown
 * ------------------------------------------------------------------ */
.gswitch {
  position: relative;
}
.gswitch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 9999px;
  background: #F1F5F9;
  font-size: 13px;
  font-weight: 600;
  color: #33495D;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.gswitch-btn:hover { background: #E2E8F0; }
.gswitch-btn .gswitch-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  background: #10B7AB;
  font-size: 11px;
}
.gswitch-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px -8px rgba(15, 31, 46, 0.18);
  border: 1px solid #F3F4F6;
  padding: 6px;
  z-index: 50;
}
.gswitch-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #0F1F2E;
}
.gswitch-menu a:hover { background: #F9FAFB; }
.gswitch-menu .gswitch-divider {
  height: 1px;
  background: #F3F4F6;
  margin: 6px 4px;
}

/* ------------------------------------------------------------------
 * Karma badge in header
 * ------------------------------------------------------------------ */
.karma-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s;
}
.karma-badge:hover { transform: scale(1.04); }
.karma-badge .karma-dot {
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 800;
}

/* ------------------------------------------------------------------
 * Onboarding multi-step
 * ------------------------------------------------------------------ */
.onb-step { display: none; }
.onb-step.onb-step-active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Onboarding sport grid — bigger cards than the home strip */
.onb-sport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.onb-sport-card {
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  user-select: none;
}
.onb-sport-card:hover {
  border-color: #5CCEC8;
  transform: translateY(-2px);
}
.onb-sport-card.is-picked {
  border-color: #10B7AB;
  background: #E6F7F6;
  box-shadow: 0 6px 16px -6px rgba(16, 183, 171, 0.4);
}
.onb-sport-card .onb-icon {
  width: 36px; height: 36px;
  margin: 0 auto 6px;
  color: #0B7C74;
}
.onb-sport-card .onb-icon > div { width: 28px; height: 28px; margin: 4px auto; }
.onb-sport-card .onb-name {
  font-size: 12px;
  font-weight: 600;
  color: #33495D;
}

/* ------------------------------------------------------------------
 * Page transitions (subtle)
 * ------------------------------------------------------------------ */
#main-view { animation: pageIn 0.18s ease; }
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------------
 * Group category badge
 * ------------------------------------------------------------------ */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cat-badge-company { background: #FEF3C7; color: #92400E; }
.cat-badge-club { background: #DBEAFE; color: #1E40AF; }
.cat-badge-community { background: #E0E7FF; color: #3730A3; }