/* static/style.css */

/* ============================= */
/* FONTS & VARIABLES */
/* ============================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --bg-main: #121212; /* Fond global */
  --bg-container: #1e1e1e; /* Fond des formulaires / cartes */
  --text-primary: #e0e0e0; /* Texte principal clair */
  --text-secondary: #a0a0a0; /* Texte secondaire */
  --accent: #bb86fc; /* Violet accentué */
  --accent-hover: #9f6ef4; /* Accent pour hover */
  --border-radius: 0.25rem; /* Arrondi 4px */
  --spacing: 1rem; /* 16px */
  --input-bg: #2c2c2c; /* Fond des inputs / selects */
  --input-border: #3a3a3a; /* Bordure des inputs */
  --box-shadow: none; /* Pas d'ombre, style épuré */
  --transition: all 0.2s ease-in-out;
}

/* ============================= */
/* RESETS / STRUCTURE DE BASE */
/* ============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: var(--text-primary);
}

body {
  background-color: var(--bg-main);
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--accent-hover);
}

/* ============================= */
/* CONTENEUR PRINCIPAL */
/* ============================= */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 2);
}

/* ============================= */
/* FLASH MESSAGES */
/* ============================= */
.flash {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
}

.flash-danger {
  background-color: #630000;
  color: #f0a0a0;
  border-color: #940000;
}

.flash-success {
  background-color: #004d00;
  color: #a0f0a0;
  border-color: #00a000;
}

/* ============================= */
/* FORMULAIRES & BOUTONS */
/* ============================= */
form {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing);
}

fieldset {
  border: none;
  margin-bottom: var(--spacing);
}

legend {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--accent);
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--text-secondary);
}

input[type="number"],
select {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing);
  color: var(--text-primary);
  transition: var(--transition);
}

input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

button,
button[type="submit"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--accent);
  color: #121212;
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  margin-top: var(--spacing);
}

button:hover,
button[type="submit"]:hover {
  background-color: var(--accent-hover);
}

/* ============================= */
/* SECTION DE SÉLECTION DES ÉQUIPES */
/* 3 ÉQUIPES PAR LIGNE (max)     */
/* ============================= */
.team-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing);
}

.team-card {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

.team-card h3 {
  margin-bottom: 0.5rem;
  color: var(--accent);
}

.team-card select {
  margin-bottom: var(--spacing);
}

/* ============================= */
/* RÉSULTAT DES TEAMS            */
/* ============================= */
.result-box {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}

.result-box h2 {
  margin-bottom: var(--spacing);
  color: var(--accent);
}

.result-box p {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.result-box hr {
  border: none;
  border-top: 1px solid #333;
  margin: var(--spacing) 0;
}

/* ============================= */
/* LIEN "RETOUR"                */
/* ============================= */
.back-link {
  display: inline-block;
  margin-top: var(--spacing);
  color: var(--text-secondary);
  transition: var(--transition);
}

.back-link:hover {
  color: var(--accent);
}

/* ============================= */
/* RESPONSIVE                   */
/* ============================= */
@media (max-width: 768px) {
  .team-section {
    grid-template-columns: 1fr;
  }
}
/* ============================= */
/* FOOTER                   */
/* ============================= */
/* CSS associé (static/style.css ou fichier CSS dédié) */
.site-footer {
  background-color: #121212;
  color: #cccccc;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  border-top: 1px solid #333;
  margin-top: 2rem;
}

.site-footer p {
  margin: 0.4rem 0;
  line-height: 1.5;
}

.site-footer a {
  color: #bb86fc;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .site-footer {
    font-size: 0.8rem;
    padding: 0.75rem;
  }
}

/* static/style.css */

/* Global form and heading */
h2 {
  margin-bottom: 1rem;
  color: #eee;
}

form {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-top: 0.5rem;
  color: #ddd;
}

select,
input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  background-color: #2c2c2c;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
}

input[type="number"] {
  width: 4rem;
}

/* Button */
button {
  padding: 0.5rem 1rem;
  background-color: #bb86fc;
  color: #121212;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0 nine;
}

/* Fieldset */
fieldset {
  background-color: #1e1e1e;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

legend {
  color: #bb86fc;
  font-weight: 600;
}

/* Team section */
.team-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.team-card {
  flex: 1 1 calc(33.333% - 1rem);
  background-color: #1e1e1e;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 1rem;
  box-sizing: border-box;
}

.team-card h3 {
  margin-bottom: 0.5rem;
  color: #fff;
}

/* Responsive: 1 column on narrow screens */
@media (max-width: 800px) {
  .team-card {
    flex: 1 1 100%;
  }
}

/* Enemy selector */
#enemy_type {
  margin-top: 0.5rem;
}

/* Hide default option text color */
option[disabled][selected] {
  color: #888;
}

/* ============================= */
/* STYLES POUR LE FORMULAIRE DPS */
/* ============================= */
.dps-label {
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  display: block;
}

.dps-input {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  margin-bottom: var(--spacing);
  transition: var(--transition);
}

.dps-input:focus {
  outline: none;
  border-color: var(--accent);
}

.dps-select {
  width: 100%;
  padding: 0.5rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  margin-bottom: var(--spacing);
  transition: var(--transition);
}

.dps-select:focus {
  outline: none;
  border-color: var(--accent);
}

.dps-fieldset {
  margin-top: 1rem;
  background-color: var(--bg-container);
  padding: 0.75rem;
  border-radius: var(--border-radius);
  border: none;
  margin-bottom: var(--spacing);
}

.dps-legend {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.dps-btn {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent);
  color: #121212;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.dps-btn:hover {
  background-color: var(--accent-hover);
}

.dps-back-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--accent);
  text-decoration: none;
}

.dps-back-link:hover {
  color: var(--accent-hover);
}

/* ============================= */
/* NAVIGATION PRINCIPALE         */
/* ============================= */
.main-nav {
  display: flex;
  gap: 1.5rem;
  background: #181818;
  padding: 1rem 0.5rem;
  margin-bottom: 2rem;
  border-radius: 0 0 8px 8px;
  justify-content: center;
}
.main-nav a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.main-nav a:hover,
.main-nav a:focus {
  background: var(--accent);
  color: #181818;
  outline: none;
}

/* ============================= */
/* TOAST (FLASH MESSAGE)         */
/* ============================= */
.toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 1rem;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
}
.toast.show {
  visibility: visible;
  opacity: 1;
}

/* ============================= */
/* LOADER (SPINNER)              */
/* ============================= */
.loader {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}
.loader::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  border: 6px solid var(--accent);
  border-top: 6px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 200px auto;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================= */
/* BOUTONS & LIENS VISIBLES      */
/* ============================= */
button,
.dps-btn {
  font-size: 1.1rem;
  min-width: 120px;
}
.back-link,
.dps-back-link {
  font-size: 1.05rem;
  font-weight: 500;
}

/* ============================= */
/* RESPONSIVE MOBILE             */
/* ============================= */
@media (max-width: 1100px) {
  .container {
    max-width: 98vw;
    padding: 1rem;
  }
  .team-section {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 800px) {
  .container {
    padding: 0.5rem;
  }
  .team-section {
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
  }
  .team-card {
    padding: 0.5rem;
  }
  button,
  .dps-btn {
    width: 100%;
    font-size: 1.1rem;
  }
  .main-nav {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.2rem;
    font-size: 1.1rem;
  }
}

/* ============================= */
/* HISTORIQUE DES COMPARAISONS   */
/* ============================= */
.history-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 2);
}

.history-stats {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing);
  text-align: center;
}

.history-stats p {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.history-list {
  display: grid;
  gap: var(--spacing);
}

.history-card {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  transition: var(--transition);
}

.history-card:hover {
  border-color: var(--accent);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--input-border);
}

.history-header h3 {
  color: var(--accent);
  margin: 0;
}

.history-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.history-summary {
  margin-bottom: var(--spacing);
}

.history-summary p {
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}

.history-summary .winner {
  color: var(--accent);
  font-weight: 600;
}

.history-teams-preview {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--spacing);
  flex-wrap: wrap;
}

.team-preview {
  background-color: var(--input-bg);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.team-number {
  color: var(--text-secondary);
}

.team-multiplier {
  color: var(--accent);
  font-weight: 600;
}

.history-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}

.btn-primary {
  background-color: var(--accent);
  color: #121212;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  color: #121212;
}

.btn-secondary {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
}

.btn-secondary:hover {
  background-color: var(--input-border);
  color: var(--text-primary);
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #c82333;
  color: white;
}

.empty-history {
  text-align: center;
  padding: calc(var(--spacing) * 3);
  background-color: var(--bg-container);
  border-radius: var(--border-radius);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing);
}

.empty-history h3 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.empty-history p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing);
}

.history-navigation {
  margin-top: var(--spacing);
  text-align: center;
}

/* ============================= */
/* DÉTAILS D'UNE COMPARAISON     */
/* ============================= */
.comparison-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(var(--spacing) * 2);
}

.comparison-header {
  text-align: center;
  margin-bottom: calc(var(--spacing) * 2);
}

.comparison-header h2 {
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.comparison-date {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.comparison-info {
  margin-bottom: calc(var(--spacing) * 2);
}

.info-card {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  text-align: center;
}

.info-card h3 {
  color: var(--accent);
  margin-bottom: var(--spacing);
}

.info-card p {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.info-card .winner {
  color: var(--accent);
  font-weight: 600;
}

.teams-detail {
  margin-bottom: calc(var(--spacing) * 2);
}

.teams-detail h3 {
  color: var(--accent);
  margin-bottom: var(--spacing);
  text-align: center;
}

.team-detail-card {
  background-color: var(--bg-container);
  padding: var(--spacing);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing);
  border: 1px solid var(--input-border);
  transition: var(--transition);
}

.team-detail-card.winner-team {
  border-color: var(--accent);
  background-color: rgba(187, 134, 252, 0.05);
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--input-border);
}

.team-header h4 {
  color: var(--accent);
  margin: 0;
}

.winner-badge {
  background-color: var(--accent);
  color: #121212;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: 0.8rem;
  font-weight: 600;
}

.team-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing);
}

.team-supports h5,
.team-dps h5,
.team-result h5 {
  color: var(--accent);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.team-supports ul {
  list-style: none;
  padding: 0;
}

.team-supports li {
  padding: 0.25rem 0;
  color: var(--text-secondary);
}

.team-dps p {
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}

.multiplier-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.comparison-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================= */
/* ACTIONS DU RÉSULTAT           */
/* ============================= */
.result-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: var(--spacing);
  flex-wrap: wrap;
}

.history-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--input-bg);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius);
  border: 1px solid var(--input-border);
  transition: var(--transition);
}

.history-link:hover {
  background-color: var(--accent);
  color: #121212;
}

/* ============================= */
/* RESPONSIVE POUR L'HISTORIQUE  */
/* ============================= */
@media (max-width: 768px) {
  .history-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .history-teams-preview {
    justify-content: center;
  }

  .team-content {
    grid-template-columns: 1fr;
  }

  .comparison-actions {
    flex-direction: column;
    align-items: center;
  }

  .result-actions {
    flex-direction: column;
    align-items: center;
  }
}