/* Mobile app overrides - mobile-first, touch friendly */
:root {
  --app-bg: #071226; /* solid dark background */
  --app-text: #e6eef8;
  --app-muted: #9aa7b6;
  --nav-bg: rgba(4,6,12,0.95);
  --card-bg: rgba(6,10,18,0.96);
  --card-radius: 14px;
  --accent-color: var(--app-text);
  --primary-color: var(--app-text);
}

* { box-sizing: border-box; }
html,body { height:100%; background: var(--app-bg) !important; }
body {
  background: transparent !important;
  color: var(--app-text) !important;
  font-size: 17px !important;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

.container {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 16px !important;
  padding-bottom: 96px !important; /* espace pour la nav fixe */
}

header {
  padding: 12px 8px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-align: center !important;
}

.header-logo { gap: 10px !important; justify-content: center !important; }
.header-logo img, .club-logo { width: 56px !important; height: 56px !important; border-radius: 10px; }
header h1 { font-size: 20px !important; color: var(--app-text) !important; }
header p { color: var(--app-muted) !important; font-size: 14px !important; }

/* Make main nav a fixed bottom bar suitable for mobile apps */
nav {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: minmax(64px, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  padding: 8px 8px !important;
  background: var(--nav-bg) !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.28) !important;
  margin: 0 !important; border-radius: 0 !important; z-index: 9999 !important;
  padding-bottom: 8px; min-height: 96px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

nav button {
  background: transparent !important; color: var(--primary-color, #1e3a8a) !important; border: none !important;
  font-size: 15px !important; padding: 8px 6px !important; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width: 100% !important; box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
nav button.active { color: var(--accent-color, #10b981) !important; font-weight:700 !important; }

/* Make icons larger and labels subtle */
nav button { line-height: 1; }
nav button { font-variant: normal; }
nav button::before { content: ''; display:block; }

/* App-like header: not sticky, transparent */
header {
  position: static !important; top: auto !important; background: transparent !important; padding: 12px 12px !important; z-index: 1 !important; box-shadow: none !important; border-bottom: none !important;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Buttons look like native app actions */
.submit-btn, .add-btn, nav a > button, button.primary {
  background: var(--accent-color, #10b981) !important; color: #fff !important; border-radius: 999px !important; padding: 12px 18px !important; box-shadow: 0 6px 18px rgba(16,185,129,0.12) !important;
}

/* Cards elevated (dark/transparent) */
.section, .event-card, .match-result, .tournament-card, .player-card, .video-card {
  background: transparent !important; border-radius: 14px !important; box-shadow: 0 6px 18px rgba(2,6,12,0.35) !important; padding: 14px !important; margin-bottom: 12px !important; border: 1px solid rgba(255,255,255,0.04) !important;
}

.section-footer { position: static !important; }
.section-footer .add-btn { position: static !important; margin-top: 0 !important; }

/* Larger touch inputs */
button, .submit-btn, .add-btn { font-size: 16px !important; }

/* support anchors wrapping buttons (some pages use <a><button>) */
nav a { display: inline-block; }
nav a > button { display:inline-flex; }

/* show a subtle indicator for nav when content scrolled under it */
@supports (-webkit-overflow-scrolling: touch) {
  nav::-webkit-scrollbar { display: none; }
}

/* Bigger touch targets */
button, .submit-btn, .add-btn { padding: 12px 14px !important; border-radius: 12px !important; font-size: 17px !important; }

.section { padding: 16px !important; border-radius: 12px !important; box-shadow: none !important; background: transparent !important; }

.team-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; gap: 6px !important; }
.player-card { padding: 6px !important; display:flex !important; flex-direction:column !important; gap:6px !important; align-items:center !important; justify-content:center !important; text-align:center !important; border-radius: 8px !important; color: var(--app-text) !important; min-height: 72px !important; background: transparent !important; }
.player-card .player-avatar { margin: 0 auto 6px auto !important; }
.player-avatar { width: 32px !important; height: 32px !important; border-radius:6px !important; }
.player-name { font-size: 12px !important; line-height: 1.05 !important; }

.video-grid, .results-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.video-thumbnail { height: 160px !important; background: linear-gradient(135deg,#020617 0%, #071226 100%) !important; color: var(--app-text) !important; }

.event-card, .match-result, .tournament-card { padding: 14px !important; border-radius: 12px !important; box-shadow: none !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.04) !important; }

.modal { align-items:center !important; justify-content:center !important; background: rgba(0,0,0,0.55) !important; padding: 12px !important; overflow-y: auto !important; }
.modal-content { max-width: 100% !important; width: 100% !important; max-height: calc(100vh - 80px) !important; height: auto !important; border-radius: 12px !important; padding: 16px !important; overflow-y: auto !important; background: var(--card-bg) !important; color: var(--app-text) !important; -webkit-overflow-scrolling: touch !important; }
.close-modal { top: 10px !important; right: 12px !important; }

/* Forms and inputs touch friendly */
.form-group input, .form-group select, .form-group textarea { padding: 12px !important; font-size: 16px !important; border-radius: 10px !important; }

/* Ensure content isn't hidden behind bottom nav */
body:after { content: '' ; display:block; height: 132px; }

@media (min-width: 769px) {
  /* keep desktop styles for larger screens */
  nav { position: static !important; height: auto !important; box-shadow: none !important; border-top: none !important; }
  body:after { display:none; }
}