:root {
  --blue: #0b5fa5;
  --blue-dark: #073e6e;
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --border: #e0e4ea;
  --text: #1c2733;
  --text-light: #6b7686;
  --green: #1f9d55;
  --orange: #e2891d;
  --red: #d03b3b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
body.login-active {
  background: none;
}
.hidden { display: none !important; }

.app {
  background: var(--bg);
}

/* Login */
.login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  background: url('suiviarbitre.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #073e6e;
  z-index: 1000;
}
.login-box {
  background: linear-gradient(135deg, #00a8e8 0%, #0088b8 50%, #006b92 100%);
  padding: 40px;
  border-radius: 20px;
  width: 320px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 168, 232, 0.4);
  text-align: center;
  transform: perspective(1000px) rotateX(5deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
}
.login-box:hover {
  transform: perspective(1000px) rotateX(2deg);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 0 50px rgba(0, 168, 232, 0.5);
}


.login-box input {
  width: 100%; padding: 10px 12px; margin-bottom: 12px;
  border: none; border-radius: 8px; font-size: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: none;
}
.login-box input::placeholder {
  color: var(--text-light);
}
.login-box button {
  width: 100%; padding: 10px; background: linear-gradient(135deg, #ffffff, #f0f0f0);
  color: #0088b8; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 600;
  box-shadow: none;
  transition: all 0.3s ease;
}
.login-box button:hover { 
  background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
  transform: translateY(-2px);
  box-shadow: none;
}
.error-msg { color: #ff6b6b; font-size: 13px; min-height: 18px; margin-top: 8px; font-weight: 500; }

/* App shell */
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--blue-dark); color: #fff; padding: 0 20px; height: 56px;
}
.brand { font-weight: 700; white-space: nowrap; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab-btn {
  background: transparent; border: none; color: #cfe0f0; padding: 10px 14px;
  cursor: pointer; border-radius: 6px; font-size: 14px;
}
.tab-btn:hover { background: rgba(255,255,255,0.1); }
.tab-btn.active { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-menu button {
  background: rgba(255,255,255,0.15); border: none; color: #fff; padding: 6px 12px;
  border-radius: 6px; cursor: pointer;
}
.user-menu button:hover { background: rgba(255,255,255,0.28); }
#clear-arbitres-btn {
  background: rgba(220, 59, 59, 0.3) !important;
}
#clear-arbitres-btn:hover {
  background: rgba(220, 59, 59, 0.5) !important;
}

.content { padding: 24px; max-width: 1100px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
body.dashboard-actif {
  background-image: url('arbitres_piscine.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* L'image de fond doit rester visible derriere les sections (cartes/panneaux
   opaques), donc on rend le conteneur applicatif transparent uniquement ici. */
body.dashboard-actif .app { background: transparent; }
body.dashboard-actif #tab-dashboard > h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.arbitres-actif {
  background-image: url('piscine_olympique.jpg');
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.arbitres-actif .app { background: transparent; }
body.arbitres-actif #tab-arbitres .panel-header h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.historique-actif {
  background-image: url('parchemin_maillot.jpg');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.historique-actif .app { background: transparent; }
body.historique-actif #tab-historique .panel-header h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.users-actif {
  background-image: url('utilisateurs_info.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.users-actif .app { background: transparent; }
body.users-actif #tab-users .panel-header h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.importation-actif {
  background-image: url('importation_fond.jpg');
  background-size: cover;
  background-position: center 45%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.importation-actif .app { background: transparent; }
body.importation-actif #tab-importation .panel-header h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.competitions-actif {
  background-image: url('competitions_fond.jpg');
  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body.competitions-actif .app { background: transparent; }
body.competitions-actif #tab-competitions .panel-header h2 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.panel-header-actions { display: flex; gap: 10px; align-items: center; }
h2 { margin: 0 0 16px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
}
.card .num { font-size: 28px; font-weight: 700; color: var(--blue); }
.card .label { font-size: 13px; color: var(--text-light); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.panel h3 { margin-top: 0; font-size: 15px; }
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li {
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; display: flex; justify-content: space-between;
}
.simple-list li:last-child { border-bottom: none; }
.simple-list .muted { color: var(--text-light); font-size: 13px; }
.empty-msg { color: var(--text-light); font-size: 13px; padding: 8px 0; }

/* Arborescence des clubs (region > departement > clubs) */
.clubs-region {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 10px;
}
.clubs-region > summary { font-weight: 700; font-size: 15px; cursor: pointer; padding: 4px 0; }
.clubs-departement { margin: 8px 0 8px 16px; }
.clubs-departement > summary { font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; color: var(--text); }
.clubs-departement .simple-list { margin-left: 12px; }
.clubs-departement .simple-list li { padding: 6px 0; }

.filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filters input, .filters select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.filters input { flex: 1; min-width: 200px; }

.data-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: 10px; overflow: hidden; }
.data-table th, .data-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.data-table th { background: #eef2f7; color: var(--text-light); font-weight: 600; text-transform: uppercase; font-size: 11px; }
.data-table tr:hover td { background: #f8fafc; }
.data-table .row-actions button {
  background: none; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
  cursor: pointer; font-size: 12px; margin-right: 4px;
}
.data-table .row-actions button:hover { background: #eef2f7; }
.btn-fusion-select, .btn-fusion-merge {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--text-light);
}
.btn-fusion-select:hover, .btn-fusion-merge:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-fusion-select { margin-right: 6px; }
.btn-fusion-merge { margin-left: 6px; }
tr.ligne-selectionnee-fusion td { background: #dbe8fb !important; }

@keyframes clignotement-rose {
  0%, 100% { background: #ffe0ec; }
  50% { background: #ff6fa5; }
}
tr.ligne-alerte-honorabilite td {
  animation: clignotement-rose 1.2s ease-in-out infinite;
}

@keyframes clignotement-jaune {
  0%, 100% { background: #fffbe0; }
  50% { background: #ffe680; }
}
tr.ligne-alerte-licence-expiree td {
  animation: clignotement-jaune 1.2s ease-in-out infinite;
}
.ligne-ancienne td { background: #fbdada; color: #8a1f1f; font-weight: 600; }
.ligne-ancienne:hover td { background: #f5c6c6; }
.ligne-groupe:hover td { background: #eef2f7; }
.ligne-groupe.ligne-ancienne:hover td { background: #f5c6c6; }
.ligne-detail-groupe td { background: #fafbfc; }
.ligne-detail-groupe.ligne-ancienne td { background: #fbdada; }
.inline-edit {
  width: 100%; border: 1px solid transparent; background: transparent; font-size: 13px;
  padding: 4px 6px; border-radius: 6px; color: var(--text);
}
.inline-edit:hover { border-color: var(--border); }
.inline-edit:focus { border-color: var(--blue); background: #fff; outline: none; }
.inline-edit:disabled { color: var(--text-light); cursor: default; }
.inline-edit-ok { border-color: var(--green) !important; background: #e1f5ea !important; }
.inline-edit-erreur { border-color: #d03b3b !important; }

.btn-primary {
  background: var(--blue); color: #fff; border: none; padding: 9px 16px; border-radius: 7px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-primary:hover { background: var(--blue-dark); }

.badge { padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-block; }
.badge-actif, .badge-a_venir, .badge-disponible, .badge-confirme { background: #e1f5ea; color: var(--green); }
.badge-inactif, .badge-terminee { background: #eee; color: var(--text-light); }
.badge-suspendu, .badge-annulee, .badge-refuse, .badge-indisponible { background: #fbe4e4; color: var(--red); }
.badge-en_cours, .badge-propose { background: #fdf1de; color: var(--orange); }

.btn-frise {
  background: #eef2f7; border: none; padding: 2px 8px; border-radius: 12px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--blue-dark); vertical-align: middle;
}
.btn-frise:hover { background: #dde6f0; }

/* Frise chronologique (modale arbitre) */
.frise-legende { display: flex; gap: 18px; font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
.frise-puce { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.frise-puce-competition { background: var(--blue); }
.frise-puce-diplome { background: var(--orange); }
.frise-filtre-annees { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-annee {
  border: 1px solid var(--border); background: #fff; color: var(--text-light);
  padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.chip-annee:hover { border-color: var(--blue); color: var(--blue-dark); }
.chip-annee.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.frise-track {
  position: relative; height: 460px; margin: 190px 50px 0; min-width: 1000px;
}
.frise-axe {
  position: absolute; top: 50%; left: 0; right: 14px; height: 3px; background: var(--border); transform: translateY(-50%);
}
/* Fleche indiquant le sens chronologique (plus ancien -> plus recent) */
.frise-axe::after {
  content: ''; position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 13px solid var(--text-light);
}
.frise-point { position: absolute; top: 50%; transform: translateX(-50%); }
.frise-dot {
  position: relative; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; margin-top: -7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12); cursor: default; z-index: 2;
}
.frise-dot-competition { background: var(--blue); }
.frise-dot-diplome { background: var(--orange); }
.frise-tige { position: absolute; left: 50%; width: 1px; background: var(--border); transform: translateX(-50%); }
.frise-tige-haut { bottom: 7px; height: 16px; }
.frise-tige-bas { top: 7px; height: 16px; }
/* Etiquettes quasi verticales, legerement inclinees, pour tenir sur peu de
   largeur horizontale meme quand plusieurs dates sont proches. Le pivot de la
   rotation est cale sur le centre du point (left:50%, sans recentrage) pour
   que le texte parte bien de la puce. Le texte se lit de bas en haut (points
   au-dessus de l'axe) ou de haut en bas (en dessous), avec l'annee/mois
   affichee en dernier (donc du cote le plus eloigne du point). */
.frise-label {
  position: absolute; left: 50%; white-space: nowrap; font-size: 12px; line-height: 1.3;
}
.frise-label-haut {
  bottom: 22px; transform-origin: left bottom; transform: rotate(-70deg);
}
.frise-label-bas {
  top: 22px; transform-origin: left top; transform: rotate(70deg);
}
.frise-label .frise-titre { font-weight: 600; margin-right: 5px; }
.frise-label .frise-date { color: var(--text-light); font-weight: 700; white-space: nowrap; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,20,35,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
}
.modal h3 { margin-top: 0; }
.modal form { display: flex; flex-direction: column; gap: 10px; }
.modal label { font-size: 12px; color: var(--text-light); font-weight: 600; margin-bottom: -6px; }
.modal input, .modal select, .modal textarea {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 14px; width: 100%;
  font-family: inherit;
}
.modal .form-row { display: flex; gap: 10px; }
.modal .form-row > div { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.btn-secondary {
  background: #eef2f7; border: none; padding: 9px 16px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.modal .subsection { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }

/* Modal plein ecran (cartographie) */
.modal-overlay.modal-overlay-xl { padding: 0; }
.modal.modal-xl {
  width: 95vw; height: 95vh; max-width: 95vw; max-height: 95vh;
  display: flex; flex-direction: column;
}
.modal.modal-lg {
  width: 90vw; height: 90vh; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal-xl .modal-body, .modal-lg .modal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Cartographie des arbitres */
.carte-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.carte-legende { font-size: 13px; color: var(--text-light); display: flex; align-items: center; gap: 8px; }
.carte-degrade { display: inline-block; width: 120px; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #dbe8fb, var(--blue-dark)); vertical-align: middle; }
.carte-conteneur {
  flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; position: relative; background: #f4f8fc; cursor: grab;
}
.carte-conteneur.grabbing { cursor: grabbing; }
.carte-conteneur svg { width: 100%; height: 100%; display: block; }
.carte-departement { stroke: #fff; stroke-width: 0.6; cursor: pointer; transition: opacity 0.15s; }
.carte-departement:hover { opacity: 0.75; stroke: var(--blue-dark); stroke-width: 1.4; }
.carte-departement.carte-vide { fill: #e9edf2; cursor: default; }
.carte-departement.carte-vide:hover { opacity: 1; stroke: #fff; stroke-width: 0.6; }
.carte-label { font-size: 9px; fill: #1c2733; text-anchor: middle; pointer-events: none; font-weight: 600; }
.carte-badge { cursor: pointer; }
.carte-badge-cercle {
  fill: #ffd83d; stroke: #b8860b; stroke-width: 0.8;
  transition: fill 0.15s, stroke-width 0.15s;
}
.carte-badge:hover .carte-badge-cercle { fill: #ffc400; stroke-width: 1.2; }
.carte-badge-texte {
  font-size: 10px; font-weight: 700; fill: #4a3400; text-anchor: middle;
  dominant-baseline: central; pointer-events: none;
}
.carte-outremer-grille { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.carte-outremer-item { width: 90px; text-align: center; }
.carte-outremer-item svg { width: 90px; height: 70px; }
.carte-outremer-item .carte-outremer-nom { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.carte-tooltip {
  position: absolute; pointer-events: none; background: #1c2733; color: #fff; font-size: 12px;
  padding: 5px 9px; border-radius: 6px; z-index: 10; white-space: nowrap; transform: translate(-50%, -120%);
}

/* Carte des lieux d'arbitrage (fond neutre + marqueurs de competitions) */
.carte-departement-neutre { fill: #eef2f7; stroke: #fff; stroke-width: 0.6; }
.carte-marqueur-lieu { cursor: pointer; }
.carte-marqueur-cercle {
  fill: #e0562f; stroke: #8a2e14; stroke-width: 0.8; opacity: 0.9;
  transition: fill 0.15s, stroke-width 0.15s;
}
.carte-marqueur-lieu:hover .carte-marqueur-cercle { fill: #ff6a3d; stroke-width: 1.2; }
.carte-marqueur-texte {
  font-size: 10px; font-weight: 700; fill: #fff; text-anchor: middle;
  dominant-baseline: central; pointer-events: none;
}
.btn-lieux-arbitrage {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 11px; font-weight: 700;
  color: var(--text-light); margin-right: 6px;
}
.btn-lieux-arbitrage:hover { background: var(--blue); color: #fff; border-color: var(--blue); }