/* ── STAMINA TOOLS — Design System ── */
:root {
  /* Couleurs STAMINA */
  --bg:       #0d0f14;
  --surface:  #161922;
  --surface2: #1e2230;
  --border:   #252838;
  --border2:  #2e3347;

  /* Accent principal : Teal STAMINA */
  --accent:   #00c4a7;
  --accent2:  #00a88e;  /* hover */
  --accent-bg: rgba(0,196,167,.12);

  /* Secondaire : Jaune STAMINA */
  --yellow:   #f5c800;
  --yellow-bg: rgba(245,200,0,.12);

  /* Orange STAMINA */
  --orange:   #f97316;
  --orange-bg: rgba(249,115,22,.12);

  /* Status */
  --green:    #22c55e;
  --red:      #ef4444;
  --purple:   #a855f7;
  --blue:     #4f8ef7;

  /* Texte */
  --text:     #e8eaf0;
  --muted:    #5a6278;
  --muted2:   #7a8299;

  --radius:   8px;
  --sidebar-w: 220px;
}

/* ── STAMINA Logo mark inline ── */
.logo-mark {
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.logo-mark img { width:100%; height:100%; object-fit:contain; }

/* ── Sidebar STAMINA ── */
.sidebar-logo .logo-text { color:var(--text); }
.sidebar-logo .logo-sub  { color:var(--accent); font-weight:700; letter-spacing:.06em; }

/* ── Accent nav link ── */
.nav-link.active { background:var(--accent-bg); color:var(--accent); }
.nav-link:hover  { background:var(--border2); color:var(--text); }

/* ── Buttons STAMINA ── */
.btn-primary { background:var(--accent); color:#000; font-weight:700; }
.btn-primary:hover { background:var(--accent2); }

/* ── Badges rôle ── */
.role-badge {
  display:inline-block; font-size:10px; font-weight:800;
  padding:2px 8px; border-radius:20px; letter-spacing:.05em; text-transform:uppercase;
}
.role-badge.admin   { background:var(--yellow-bg); color:var(--yellow); border:1px solid rgba(245,200,0,.3); }
.role-badge.manager { background:var(--orange-bg); color:var(--orange); border:1px solid rgba(249,115,22,.3); }
.role-badge.player  { background:var(--accent-bg); color:var(--accent); border:1px solid rgba(0,196,167,.3); }

/* ── Auth page ── */
.auth-page {
  min-height:100vh; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.auth-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:36px; width:100%; max-width:400px;
}
.auth-logo { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px; }
.auth-logo img { width:52px; height:52px; object-fit:contain; }
.auth-logo-text { font-size:22px; font-weight:900; color:var(--text); letter-spacing:-.02em; }
.auth-logo-sub  { font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.auth-title { font-size:16px; font-weight:700; margin-bottom:6px; text-align:center; }
.auth-sub   { font-size:12px; color:var(--muted); text-align:center; margin-bottom:24px; }
.form-field { margin-bottom:16px; }
.form-field label { display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.form-field input, .form-field select {
  width:100%; background:var(--bg); border:1px solid var(--border2);
  border-radius:var(--radius); color:var(--text); padding:12px 14px;
  font-size:14px; outline:none; transition:border-color .15s;
}
.form-field input:focus, .form-field select:focus { border-color:var(--accent); }
.form-field select option { background:var(--surface); }
.auth-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--radius); color:var(--red); font-size:12px; padding:10px 14px; margin-bottom:16px; display:none; }
.auth-error.show { display:block; }

/* ── Mobile touch fixes ── */
/* backdrop-filter on overlays traps touch events on iOS Safari — disable on mobile */
@media (max-width: 768px) {
  .nav-overlay, .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Always add cursor + tap highlight for reliable touch response on overlays */
.nav-overlay {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Prevent body scroll lock getting stuck when modal closes */
body.modal-open { overflow: hidden; }