/*=============================================
  THÈME SOMBRE MAT - v1.0
=============================================*/

/* ----- VARIABLES DE COULEUR (MAT) ----- */
:root {
    --bg-dark: #1e1e1e;
    --bg-container: #2d2d2d;
    --border-color: #4a4a4a;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --accent-color: #00c9b7;
    --accent-hover: #00a090;
    --color-success: #2dd580;
    --color-error: #ff5050;
}

/* ----- STYLES GLOBAUX ----- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    /* --- AJOUTE CES LIGNES --- */
    background-image: url('/assets/images/background.png'); /* Chemin vers ton image */
    background-size: cover; /* Fait en sorte que l'image couvre tout l'écran */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    background-attachment: fixed; /* Fixe l'image pour qu'elle ne défile pas avec le contenu */
    /* --- FIN DE L'AJOUT --- */
}

/* ----- CONTENEUR PRINCIPAL ----- */
.container {
    max-width: 1000px;
    margin: 30px auto;
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 25px;
}

/* ----- TYPOGRAPHIE ET LIENS ----- */
h1, h2, h3, h4 {
    color: var(--accent-color);
    margin-bottom: 10px;
    font-weight: 600;
}

p {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

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

/* ----- HEADER ET NAVIGATION ----- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}

header nav a {
    margin-left: 20px;
    font-weight: bold;
}

/* ----- BOUTONS ET FORMULAIRES ----- */
button, input[type="text"], input[type="email"], input[type="password"] {
    font-family: inherit;
    font-size: 1em;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: #3a3a3a;
    color: var(--text-primary);
}

button {
    background-color: var(--accent-color);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease-in-out;
}

button:hover {
    background-color: var(--accent-hover);
}

button:disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
}

form div {
    margin-bottom: 15px;
}

/* ----- ÉLÉMENTS SPÉCIFIQUES DU JEU ----- */
#resources ul {
    list-style-type: none;
    display: flex;
    gap: 20px;
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 4px;
}

#construction-queue {
    background-color: #262626;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-color);
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}

.error { color: #fff; background-color: rgba(255, 80, 80, 0.8); padding: 10px; border-radius: 4px; margin-bottom: 15px; }
.success { color: #fff; background-color: rgba(45, 213, 128, 0.8); padding: 10px; border-radius: 4px; margin-bottom: 15px; }

/* ----- LISTE DES BÂTIMENTS ----- */
.building-list .building-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 4px;
    background-color: #333333;
}

.building-list img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border-radius: 4px;
}

.costs { margin: 10px 0; font-weight: 600; color: var(--text-secondary); }
.costs span { margin-right: 15px; }
.costs span[style*="color:red"] { color: var(--color-error) !important; font-weight: bold; } /* Force la couleur rouge pour les ressources manquantes */


/* ----- TABLES ----- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    color: var(--accent-color);
    font-size: 1.1em;
}

tbody tr:last-child td {
    border-bottom: none;
}
/* ----- EN-TÊTE DE JEU (GAME HEADER) ----- */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-container);
    padding: 10px 20px;
    border-bottom: 2px solid var(--accent-color);
    position: sticky; /* Pour qu'il reste en haut de la page */
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left .logo {
    height: 40px;
    margin-right: 15px;
}

.header-left .game-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-primary);
}

.header-middle {
    display: flex;
    gap: 25px;
}

.header-middle .resource-item {
    display: flex;
    align-items: center;
    font-size: 1.1em;
}

.header-middle .resource-item img {
    height: 24px;
    margin-right: 8px;
}

.header-right {
    display: flex;
    gap: 15px;
}

.header-right .header-button {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-weight: bold;
    transition: all 0.2s ease;
}

.header-right .header-button:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* On ajuste le body pour que le header ne cache pas le début du contenu */
body {
    padding-top: 62px; /* Hauteur du game-header */
}

/* On retire le padding-top du .container car le body s'en charge */
.container {
    margin-top: 0;
}
/* ----- STRUCTURE PRINCIPALE DU JEU ----- */
.game-wrapper {
    display: flex;
    align-items: flex-start;
}

main {
    flex-grow: 1; /* Le contenu principal prend toute la place restante */
    padding-top: 30px; /* On redonne le padding au main */
}

/* On retire le padding-top du body car on a déjà le header sticky */
body {
    padding-top: 62px;
}

/* Le .container est maintenant dans le main, on peut le laisser centré */
.container {
    margin: 0 auto; /* Garde le contenu centré dans la colonne de droite */
}


/* ----- MENU VERTICAL ----- */
.vertical-nav {
    width: 240px;
    height: calc(100vh - 62px); /* La hauteur de l'écran moins le header */
    background-color: var(--bg-container);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0; /* Empêche le menu de rétrécir */

    /* --- LES LIGNES MAGIQUES --- */
    position: sticky;   /* On le rend "collant" */
    top: 62px;          /* On lui dit de s'arrêter à 62px du haut (la hauteur du header) */
    align-self: start;  /* Une bonne pratique pour les éléments "collants" dans un flex container */
}

.vertical-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vertical-nav ul a {
    display: block;
    padding: 12px 20px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
    position: relative;
}

.vertical-nav ul a:hover {
    background-color: var(--accent-hover);
    color: #fff;
}

/* Sous-menu */
.vertical-nav .submenu {
    background-color: var(--bg-dark);
    display: none; /* Caché par défaut */
}

.vertical-nav .submenu a {
    padding-left: 40px; /* Indentation */
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* Style pour l'état ouvert */
.vertical-nav li.open > .submenu {
    display: block;
}

/* Ajout d'une icône pour les menus avec sous-sections */
.vertical-nav .has-submenu > a::after {
    content: '▸'; /* Flèche vers la droite */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

.vertical-nav li.open > a::after {
    transform: translateY(-50%) rotate(90deg); /* La flèche tourne vers le bas */
}
/* ----- IMAGE DE LA PLANÈTE (VUE GÉNÉRALE) ----- */
.planet-image {
    display: block;
    width: 250px;
    height: 250px;
    border-radius: 50%; /* Pour la rendre parfaitement ronde */
    object-fit: cover; /* Assure que l'image remplit le cercle sans se déformer */
    margin: 20px auto 30px auto; /* Centre l'image horizontalement */
    border: 3px solid var(--border-color);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
/* ----- VUE GALAXIE ----- */
.galaxy-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-dark);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.galaxy-form input {
    width: 80px;
    text-align: center;
}

.galaxy-arrows {
    display: flex;
    align-items: center;
    gap: 15px;
}

.galaxy-arrows span {
    font-weight: bold;
    color: var(--text-primary);
}

.system-table {
    width: 100%;
    border-collapse: collapse;
}

.system-table th, .system-table td {
    text-align: center;
}

.system-table .empty-slot {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}
/* ----- FORMULAIRES DE CONNEXION / INSCRIPTION ----- */
.auth-container {
    max-width: 420px; /* Une largeur idéale pour ce type de formulaire */
    margin: 60px auto; /* Centre la carte verticalement et horizontalement */
    padding: 30px 40px;
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.form-group input {
    width: 100%;
    background-color: var(--bg-dark); /* Un fond plus sombre pour le contraste */
    transition: border-color 0.2s;
}

/* Effet visuel quand on clique dans un champ */
.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Bouton sur toute la largeur */
.auth-container .auth-button {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    margin-top: 10px;
}

/* Lien pour changer de page (ex: "Déjà un compte ?") */
.auth-link {
    text-align: center;
    margin-top: 25px;
    font-size: 0.9em;
}

.auth-link a {
    font-weight: bold;
}
/* AJOUTE CECI À LA FIN DE assets/css/style.css */

.energy-info {
    margin: 10px 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.energy-info span {
    font-weight: bold;
}
/* AJOUTE CECI À LA FIN DE assets/css/style.css */

/* ----- SYSTÈME D'ONGLETS (TABS) ----- */
.tabs {
    display: flex;
    flex-wrap: wrap; /* <-- AJOUTE CETTE LIGNE */
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1em;
    font-weight: bold;
    border-bottom: 3px solid transparent; /* Bordure inactive */
    transform: translateY(2px); /* Pour l'alignement avec la bordure du bas */
}

.tab-button.active {
    color: var(--accent-color);
    border-bottom: 3px solid var(--accent-color); /* Bordure active */
}

.tab-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.tab-pane {
    display: none; /* Tous les panneaux sont cachés par défaut */
}

.tab-pane.active {
    display: block; /* Seul le panneau actif est visible */
}
.success-button {
    background-color: var(--color-success) !important;
    color: var(--bg-dark) !important; /* Ajoute cette ligne pour un texte sombre */
}

.error-button {
    background-color: var(--color-error) !important;
}

/* S'assurer que les petits boutons ne sont pas trop grands */
.small-button {
    padding: 5px 10px;
    font-size: 0.8em;
}
/* ----- INFOS PLANÈTE (VUE GÉNÉRALE) ----- */
.planet-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.planet-info-box {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 4px;
}

.planet-info-box h4 {
    color: var(--accent-color);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.planet-info-box p {
    color: var(--text-primary);
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
}
.settings-box {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 25px;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.form-group-checkbox input[type="checkbox"] {
    width: auto; /* Annule la largeur de 100% des autres inputs */
}
.form-group-checkbox label {
    margin-bottom: 0; /* Annule la marge des autres labels */
    font-weight: normal;
}
/* Amélioration pour les onglets (déjà existants) */
.tab-pane {
    padding-top: 20px; /* Ajoute un peu d'espace au-dessus du contenu */
}
/* ----- PAGE MESSAGES ----- */
.message-item {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 15px;
}
.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--bg-container);
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
    flex-wrap: wrap; /* Pour les petits écrans */
}
.message-header span {
    font-size: 0.9em;
}
.message-content {
    padding: 15px;
    color: var(--text-secondary);
}
.message-content p {
    color: var(--text-primary);
}

/* Couleurs pour les rapports de combat */
.color-success {
    color: var(--color-success) !important;
}
.color-error {
    color: var(--color-error) !important;
}
.color-draw {
    color: var(--text-secondary) !important;
}
/* ----- MOUVEMENTS DE FLOTTE (VUE GÉNÉRALE) ----- */
.fleet-movement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; /* Pour les petits écrans */
}
/* Retire la bordure du dernier élément */
.fleet-movement:last-child {
    border-bottom: none;
}
.fleet-movement span {
    color: var(--text-primary);
    margin-right: 15px;
}

/* Couleurs (déjà dans ton CSS, mais juste au cas où) */
.color-success { color: var(--color-success); }
.color-error { color: var(--color-error); }
/* Style pour la file d'attente de recherche (copié de #construction-queue) */
#research-queue {
    background-color: #262626;
    border: 1px solid var(--border-color);
    /* On change la couleur de la bordure pour la différencier */
    border-left: 4px solid var(--color-success); 
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}
/* ----- Calendrier Bonus Quotidien ----- */
.reward-calendar {
    display: grid;
    /* Crée 5 colonnes de largeur égale */
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; /* Espace entre les cases */
    margin-top: 20px;
}

.reward-item {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    position: relative; /* Pour le positionnement du bouton */
}

.reward-day {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-weight: bold;
}

.reward-image {
    max-width: 60px; /* Ajuste si besoin */
    max-height: 60px;
    display: block;
    margin: 5px auto;
}

.reward-name {
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 5px;
    color: var(--text-primary);
}

.reward-quantity {
    font-size: 0.8em;
    color: var(--accent-color);
}

/* État : Réclamé */
.reward-claimed {
    filter: grayscale(80%); /* Grise l'élément */
    opacity: 0.6;
}
.reward-claimed::after { /* Ajoute un petit V */
    content: '✔';
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--color-success);
    font-size: 1.2em;
    font-weight: bold;
}


/* État : Réclamable */
.reward-claimable {
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 201, 183, 0.5); /* Lueur */
}

.claim-button {
    margin-top: 10px;
    width: calc(100% - 10px); /* Prend presque toute la largeur */
    padding: 6px;
}

/* État : Futur (Optionnel, si tu veux le griser un peu) */
.reward-future {
     opacity: 0.8; 
}
/* Heure du serveur dans le header */
.server-time {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-right: 15px; /* Espace avant les boutons */
}
/* ----- PAGE MISSIONS (Journal de Quêtes) ----- */
.quest-item {
    transition: all 0.3s ease;
}

.quest-item.quest-completed {
    opacity: 0.6;
    border-left: 5px solid var(--color-success);
}

.quest-item.quest-active {
    border-left: 5px solid var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 201, 183, 0.3);
}

.quest-item.quest-locked {
    opacity: 0.4;
    border-left: 5px solid var(--border-color);
}

/* Style pour l'en-tête de la quête (Titre à gauche, Statut à droite) */
.quest-item h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quest-state {
    font-size: 0.8em;
    font-weight: bold;
    flex-shrink: 0; /* Empêche le statut de passer à la ligne */
    margin-left: 15px;
}
/* ----- ALLIANCE CHAT ----- */
.chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 600px; /* Hauteur fixe pour le chat */
}

.chat-box {
    flex-grow: 1; /* Prend toute la place sauf le formulaire */
    overflow-y: auto; /* Ajoute une barre de scroll si besoin */
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Les messages s'empilent */
}

.chat-message {
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    max-width: 80%;
    align-self: flex-start; /* Messages des autres à gauche */
}

.chat-message.own-message {
    align-self: flex-end; /* Nos propres messages à droite */
    background-color: #004d40; /* Couleur accentuée pour nos messages */
    border-color: var(--accent-color);
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.chat-message-header strong {
    color: var(--accent-color);
}
.chat-message.own-message strong {
    color: #fff;
}

.chat-timestamp {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.chat-message p {
    margin: 0;
    word-wrap: break-word; /* Coupe les mots longs */
}

.chat-form textarea {
    width: 100%;
    height: 80px;
    resize: vertical;
    padding: 10px;
}
/* ----- ALLIANCE BANQUE ----- */
.bank-display {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-top: 10px;
    flex-wrap: wrap; /* Pour petits écrans */
    gap: 20px;
}

/* On réutilise le style du header */
.bank-display .resource-item {
    display: flex;
    align-items: center;
    font-size: 1.2em; /* Un peu plus gros */
    font-weight: bold;
}

.bank-display .resource-item img {
    height: 30px; /* Un peu plus gros */
    margin-right: 10px;
}
/* ----- SURLIGNAGE OBJECTIF MISSION ----- */
.mission-objective {
    border: 2px solid var(--accent-color) !important; /* Bordure plus épaisse */
    box-shadow: 0 0 15px rgba(0, 201, 183, 0.5); /* Lueur */
    position: relative; /* Pour le pseudo-élément */
    overflow: hidden; /* Pour que l'icône ne dépasse pas */
}

/* Optionnel : Ajoute une petite icône "cible" */
.mission-objective::before {
    content: '🎯'; /* Ou une icône FontAwesome si tu l'utilises */
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.5em;
    opacity: 0.7;
}

/* ----- BADGE MENU MISSIONS ----- */
.menu-badge {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--bg-dark); /* Texte sombre sur fond clair */
    border-radius: 50%; /* Rond */
    width: 20px;
    height: 20px;
    line-height: 20px; /* Centre le texte verticalement */
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 8px;
    vertical-align: middle; /* Alignement avec le texte */
}

/* ----- TUTORIEL HIGHLIGHT ----- */
.tutorial-highlight {
    outline: 3px solid yellow !important; /* Bordure jaune vive */
    box-shadow: 0 0 20px yellow !important; /* Lueur jaune */
    animation: tutorial-pulse 1.5s infinite; /* Animation de pulsation */
    z-index: 1000; /* S'assurer qu'il est au-dessus */
    position: relative; /* Pour z-index */
}

@keyframes tutorial-pulse {
    0% { box-shadow: 0 0 20px yellow; }
    50% { box-shadow: 0 0 35px gold; }
    100% { box-shadow: 0 0 20px yellow; }
}

/* ----- TUTORIEL TOOLTIP ----- */
#tutorial-tooltip {
    position: fixed; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: var(--bg-container); 
    color: var(--text-primary); 
    border: 3px solid var(--accent-color); 
    
    /* MODIFIE ICI - Padding vertical très petit */
    padding: 5px 25px; /* Essaie 5px en haut/bas */
    
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    z-index: 1001; 
    font-weight: bold;
    max-width: 600px; 
    width: auto; 
    height: auto; 
    min-height: 0; 

    /* AJOUTE CECI - Force une hauteur de ligne normale */
    line-height: 1.4; /* Ou 1.5 si tu préfères */
    
    text-align: center; 
}

#tutorial-tooltip strong { 
    color: var(--accent-color); 
    font-weight: 900; 
}

/* Style pour la file d'attente Hangar (copié de #construction-queue) */
#hangar-queue {
    background-color: #262626;
    border: 1px solid var(--border-color);
    /* On change la couleur de la bordure pour la différencier */
    border-left: 4px solid #ff9800; /* Exemple: Orange */
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}
/* ----- NOTIFICATION DE PROGRESSION (POST-ACTION) ----- */
#progress-notification {
    position: fixed;
    top: 80px; /* En dessous du header */
    right: 20px;
    background-color: var(--bg-container);
    color: var(--text-primary);
    border: 2px solid var(--accent-color);
    padding: 15px 40px 15px 15px; /* Plus d'espace à droite pour le bouton X */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 2000; /* Très haut pour être toujours visible */
    max-width: 350px;
    min-width: 250px;
    opacity: 0; /* Caché par défaut (animation) */
    transform: translateX(100%); /* Départ hors écran */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#progress-notification.show {
    opacity: 1;
    transform: translateX(0); /* Arrivée en place */
}

#progress-notification p {
    margin: 0;
    color: var(--text-primary);
    font-weight: bold;
}

/* Style pour l'emoji de fermeture */
.notification-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
}

.notification-close-btn:hover {
    color: var(--color-error);
}
/* --- NOUVEAUX STYLES POUR OVERVIEW.PHP --- */

/* Style pour aligner la production */
.production-details {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-bottom: 10px;
}

.production-details .resource-item {
    display: flex;
    align-items: center;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-primary);
}

.production-details .resource-item img {
    height: 24px;
    margin-right: 8px;
}

/* Grille détaillée du Hangar */
.hangar-details-grid {
    display: flex; /* Utiliser flex pour un défilement horizontal si trop d'éléments */
    flex-wrap: wrap; /* Permet le retour à la ligne si beaucoup d'unités */
    gap: 15px;
    justify-content: flex-start;
    padding: 5px;
}

.unit-item {
    text-align: center;
    width: 60px; /* Taille fixe pour l'image */
    position: relative;
    padding-bottom: 5px;
    transition: transform 0.2s;
}
.unit-item:hover {
    transform: translateY(-2px);
}

.unit-item img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.unit-quantity {
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    color: var(--accent-color);
    margin-top: 5px;
}

/* Mettre les boîtes de coordonnées et de production sur une seule ligne (3 colonnes) */
.planet-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes de largeur égale */
    gap: 20px;
    margin-top: 20px;
}

/* Sur petits écrans, on redevient vertical */
@media (max-width: 768px) {
    .planet-details-grid {
        grid-template-columns: 1fr;
    }
}
/* Style pour la file d'attente de Réparation */
#repair-queue {
    background-color: #262626;
    border: 1px solid var(--border-color);
    /* Utilise le vert (succès) ou une couleur spécifique (ex: violet #9c27b0) */
    border-left: 4px solid #9c27b0; 
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}
/* DANS /assets/css/style.css */

/*=============================================
  RÉVISION STYLE ADMIN (Ajouts/Modifications)
=============================================*/

/* --- 1. AMÉLIORATION DU CADRE DE GESTION --- */
.admin-gestion-cadre { /* Nouvelle classe de conteneur pour le joueur sélectionné */
    border: 2px solid var(--accent-color);
    border-radius: 6px;
    background-color: #262626; /* Fond sombre pour le contraste */
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 10px rgba(0, 201, 183, 0.2);
}

.admin-gestion-cadre h4 {
    color: var(--accent-color);
    border-bottom: 2px solid #4a4a4a; /* Ligne épaisse de séparation */
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 1.4em;
}

/* --- 2. BLOCS D'INFORMATION CLÉS (Ressources / MV / Tuto) --- */
.info-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 colonnes pour les infos rapides */
    gap: 20px;
    margin-bottom: 20px;
}

.info-status-box {
    background-color: var(--bg-dark); /* Rendre l'information encore plus sombre */
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid var(--text-secondary);
}

.info-status-box h5 {
    color: var(--text-primary);
    margin-top: 0;
    font-size: 1.1em;
}

/* Style spécifique au statut MV (en haut à droite dans tab-users) */
.mv-status.active {
    border-left-color: var(--color-error);
    box-shadow: 0 0 5px rgba(255, 80, 80, 0.5);
}

/* --- 3. AMÉLIORATION DU HANGAR DÉTAILLÉ (DETAILS/SUMMARY) --- */
details.hangar-details-admin {
    margin: 25px 0;
    border: 1px solid #555;
    background-color: #383838;
}

summary {
    color: var(--color-success) !important; /* Mettre l'accent sur le vert pour l'inventaire */
    background-color: #333;
}
summary:hover {
    background-color: #444;
}

/* --- 4. BLOC ACTIONS DANGEREUSES (Remboursement, MV Toggle, etc.) --- */
.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.action-buttons-grid .mechanics-box {
    border-top: 4px solid var(--accent-color); /* Nouvelle bordure de bloc d'action */
    padding: 15px;
    background-color: var(--bg-dark);
}

/* Boutons d'action critique (VIDER FILE) */
.action-buttons-grid .error-button {
    margin-top: 10px;
    /* Rendu plus agressif */
    border: 2px solid var(--color-error); 
    box-shadow: 0 0 10px rgba(255, 80, 80, 0.7); 
}
/*=============================================
  RÉVISION STYLE ADMIN : STATISTIQUES
=============================================*/

/* --- 1. GRILLE PRINCIPALE (Population & Moteur) --- */

/* Surcharge des conteneurs pour les rendre plus lisibles */
.admin-stats-grid .mechanics-box {
    /* Utilise l'ombre pour un effet "carte" */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    background-color: #262626; /* Fond sombre */
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--accent-color);
    padding: 20px;
}

/* Titres des catégories (Population, Moteur) */
.admin-stats-grid .mechanics-box h5 {
    color: var(--accent-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    font-size: 1.2em;
}

/* Mise en page des lignes de stats (alignement nom / valeur) */
.admin-stats-grid .mechanics-box ul {
    list-style: none;
    padding: 0;
}
.admin-stats-grid .mechanics-box li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(74, 74, 74, 0.5);
    font-size: 0.95em;
}

/* Mettre en évidence les valeurs numériques */
.admin-stats-grid .mechanics-box strong {
    font-weight: bold;
    color: var(--color-success); /* Par défaut : Vert pour les métriques saines */
}

/* Mettre en rouge les valeurs critiques (MV, Attaques) */
/* MV est la 2e ligne, Attaques la 3e (dans tab_stats.php) */
.admin-stats-grid .mechanics-box:first-child li:nth-child(2) strong, /* Joueurs en MV */
.admin-stats-grid .mechanics-box:last-child li:nth-child(2) strong {  /* Total Attaques */
    color: var(--color-error);
}

/* --- 2. RESSOURCES TOTALES INJECTÉES (Bas de page) --- */

.total-resources-box {
    background-color: #1a1a1a;
    border: 2px solid var(--color-success);
    padding: 20px;
    border-radius: 6px;
    margin-top: 25px;
    text-align: center;
    /* Lueur verte pour le "trésor" */
    box-shadow: 0 0 12px rgba(45, 213, 128, 0.5); 
}
.total-resources-box h5 {
    color: var(--color-success);
    margin: 0 0 10px 0;
    font-size: 1.1em;
}
.total-resources-box strong {
    font-size: 1.3em;
    margin: 0 20px;
    display: inline-block; /* Pour l'alignement */
}
/* =============================================
   AJOUT POUR LE RESPONSIVE MOBILE RAPIDE
============================================= */

/* S'applique à tous les écrans de 768px ou moins */
@media (max-width: 768px) {

    /* --- 1. Corriger le layout principal --- */
    .game-wrapper {
        flex-direction: column; /* Le menu passe AU-DESSUS du contenu */
    }

    .vertical-nav {
        width: 100%; /* Le menu prend toute la largeur */
        height: auto; /* Hauteur auto */
        position: static; /* Annule le "sticky" sur le côté */
    }

    /* --- 2. Conteneur principal --- */
    .container {
        max-width: 100%; /* Prend toute la largeur de l'écran */
        padding: 10px; /* Réduit les marges */
        margin: 0;
    }

    /* --- 3. Rendre les TABLES utilisables --- */
    /* Cela ajoute un scroll horizontal à tes tables (Galaxie, Classement...) */
    table, .system-table {
        display: block; /* Force la table à se comporter comme un bloc */
        width: 100%;
        overflow-x: auto; /* AJOUTE UN SCROLL HORIZONTAL */
        white-space: nowrap; /* Empêche le texte de revenir à la ligne */
    }

    /* --- 4. Simplifier le Header --- */
    .game-header .game-title, 
    .game-header .server-time {
        display: none; /* Cache le texte pour gagner de la place */
    }
    
    .header-middle {
        flex-grow: 1; /* Permet aux ressources de s'étaler */
        justify-content: center; /* Centre les ressources */
        gap: 15px; /* Réduit l'espace */
    }

    /* --- 5. Corriger les grilles (Ex: Vue Générale) --- */
    .planet-details-grid {
        /* Force une seule colonne */
        grid-template-columns: 1fr; 
    }

    /* --- 6. Corriger les formulaires (Ex: Connexion) --- */
    .auth-container {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }
}
/* =============================================
   STYLE PAGE D'ACCUEIL (INDEX.PHP)
============================================= */

/* On utilise un fond sombre uni pour la page d'accueil */
body.auth-page {
    background-image: url('/assets/images/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding-top: 0; /* Annule le padding du header de jeu */
}

.landing-wrapper {
    display: flex;
    max-width: 1000px;
    margin: 5vh auto; /* Centre la boîte */
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden; /* Pour les coins arrondis */
}

/* Colonne de gauche (Infos) */
.landing-info {
    width: 50%;
    padding: 40px;
    background-color: var(--bg-dark); /* Plus sombre pour le contraste */
    border-right: 1px solid var(--border-color);
}

.landing-info img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 50%;
}

.landing-info h1 {
    color: var(--text-primary);
    text-align: center;
    font-size: 1.8em;
}

.landing-info h2 {
    color: var(--accent-color);
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 30px;
}

.landing-info p {
    color: var(--text-secondary);
    font-size: 1.1em;
    margin-bottom: 20px;
    line-height: 1.7;
}

.landing-info ul {
    list-style: none;
    padding-left: 0;
}

.landing-info li {
    color: var(--text-primary);
    font-size: 1.1em;
    margin-bottom: 10px;
}

/* Ajoute un emoji 'check' pour les fonctionnalités */
.landing-info li::before {
    content: '🚀';
    margin-right: 10px;
    color: var(--accent-color);
}

/* Colonne de droite (Formulaires) */
.landing-forms {
    width: 50%;
    padding: 20px 30px 30px 30px;
}

/* On réinitialise l'ancien conteneur pour qu'il s'intègre */
.landing-forms .auth-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

/* On s'assure que les onglets prennent toute la largeur */
.landing-forms .tabs {
    display: flex;
}
.landing-forms .tab-button {
    flex: 1; /* Les deux boutons auront la même taille */
    text-align: center;
}
.landing-forms .tab-pane {
    padding-top: 30px; /* Espace au-dessus du formulaire */
}

/* Adaptation mobile pour la page d'accueil */
@media (max-width: 800px) {
    .landing-wrapper {
        flex-direction: column;
        margin: 2vh auto;
        width: 95%;
    }
    .landing-info, .landing-forms {
        width: 100%;
    }
    .landing-info {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}
/* =============================================
   STYLE POUR LE CODEX (INFO.PHP)
============================================= */

/* Le conteneur principal (Nav à gauche, Contenu à droite) */
.codex-wrapper {
    display: flex;
    gap: 20px;
    background-color: var(--bg-dark); /* Fond sombre pour le cadre */
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 6px;
}

/* 1. La barre de navigation de gauche */
.codex-nav {
    width: 200px; /* Largeur fixe pour la nav */
    flex-shrink: 0;
    background-color: var(--bg-container);
    border-radius: 4px;
}

.codex-nav h4 {
    color: var(--text-primary);
    padding: 10px 15px;
    margin: 0;
    border-bottom: 2px solid var(--accent-color);
    font-size: 1.1em;
}

.codex-nav a {
    display: block;
    padding: 12px 15px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.codex-nav a:hover {
    background-color: var(--accent-hover);
    color: #fff;
}

.codex-nav a.active {
    background-color: var(--accent-color);
    color: var(--bg-dark);
}

/* 2. Le conteneur de contenu de droite */
.codex-content {
    flex-grow: 1; /* Prend le reste de la place */
    height: 75vh; /* Hauteur fixe */
    overflow-y: auto; /* Ajoute un scroll SEULEMENT au contenu */
    padding-right: 10px; /* Espace pour la barre de scroll */
}

/* 3. Les sections de contenu (ex: "Production") */
.codex-section {
    /* (vide pour l'instant, sert de cible de scroll) */
}

.codex-section h3 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-top: 10px;
}
.codex-section:first-child h3 {
    margin-top: 0;
}

/* 4. La carte d'un item (ex: "Mine de Ferrovia") */
.codex-item {
    display: flex;
    background-color: var(--bg-container);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
}

.codex-item-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
}

.codex-item-info {
    padding: 15px;
    flex-grow: 1;
}
.codex-item-info h4 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 5px;
}
.codex-item-info p {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* On réutilise les classes .costs et .requirements que tu as déjà */
.codex-item-info .costs {
    font-size: 0.85em;
    margin-bottom: 5px;
}
.codex-item-info .requirements {
    font-size: 0.85em;
    margin-top: 10px;
}
.codex-item-info .req-item {
    font-size: 1em; /* Rétablir la taille dans ce contexte */
}
/* =============================================
   STYLE POUR LE "TAB-GENERAL" MODERNE (INFO.PHP)
============================================= */
.feature-grid {
    display: grid;
    /* Crée 3 colonnes de taille égale */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.feature-card {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 25px;
    text-align: center; /* Centre tout */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 201, 183, 0.2);
    border-color: var(--accent-color);
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    /* On utilise object-fit pour éviter de déformer les icônes */
    object-fit: contain; 
}

.feature-card h4 {
    color: var(--accent-color);
    font-size: 1.2em;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}