/* Variables globales */
:root {
    --light-bg: #ffffff;
    --light-text: #000000;
    
    /* Nouvelle palette de couleurs sombres */
    --dark-bg: #121212;            /* Fond principal très sombre */
    --dark-card-header: #2c2c2c;   /* En-tête de carte plus claire */
    --dark-card-bg: #1e1e1e;       /* Fond de carte légèrement plus clair que le fond */
    --dark-input-bg: #333333;      /* Champs de saisie encore plus clairs */
    --dark-text: #ffffff;
    --dark-border: #404040;
    --dark-hover: #3a3a3a;
    --dark-secondary-bg: #1e1e1e;
    --dark-primary: #0d6efd;
    --dark-primary-hover: #0b5ed7;
    --border-radius: 10px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
}

/* Reset et styles de base */
body {
    background-color: #ffffff;
    color: #000000;
    transition: all 0.3s ease;
}

/* Styles spécifiques pour le mode sombre */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-mode .navbar.navbar-dark.bg-dark {
    background-color: #1f1f1f !important;
}

body.dark-mode .table,
body.dark-mode .table > :not(caption) > * > * {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .btn-secondary {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-primary);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body.dark-mode .list-group-item {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #666666 !important;
}

/* Styles pour les éléments spécifiques en mode sombre */
body.dark-mode .card {
    background-color: var(--dark-card-bg);
    border: 1px solid var(--dark-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .card-header {
    background-color: var(--dark-card-header);
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .dropdown-menu {
    background-color: #333333 !important;
}

body.dark-mode .dropdown-item {
    color: #ffffff !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #444444 !important;
}

/* Upload zone styles */
.custom-file-upload {
    border: 2px dashed #ccc;
    border-radius: var(--border-radius);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-file-upload:hover {
    border-color: #666;
    background-color: #f8f9f9;
}

.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.upload-text {
    margin: 0;
    color: #666;
}

.selected-file-name {
    margin-top: var(--spacing-sm);
    font-weight: bold;
    color: #28a745;
}

/* Layout components */
.top-image {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.general-info {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.players-container {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 10%;
}

.players-column {
    width: 45%;
}

/* Form styles */
#edit-page fieldset {
    margin-bottom: var(--spacing-md);
    background: #f9f9f9;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
}

#edit-page legend {
    font-weight: bold;
}

#edit-page label {
    display: inline-block;
    width: 120px;
    text-align: right;
    margin-right: var(--spacing-sm);
}

#edit-page input {
    margin-bottom: var(--spacing-sm);
}

/* Table styles */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Form controls */
.form-control, .form-select {
    border-radius: var(--border-radius);
}

/* Buttons */
.btn {
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

/* Alerts */
.alert {
    border-radius: var(--border-radius);
}

/* Styles pour les placeholders en mode sombre */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Pour Firefox */
body.dark-mode input::-moz-placeholder,
body.dark-mode textarea::-moz-placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Pour Chrome/Safari/Opera */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Pour IE */
body.dark-mode input:-ms-input-placeholder,
body.dark-mode textarea:-ms-input-placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Pour Edge */
body.dark-mode input::-ms-input-placeholder,
body.dark-mode textarea::-ms-input-placeholder {
    color: #999999 !important;
    opacity: 1;
}

/* Style des boutons radio en mode sombre */
body.dark-mode .btn-outline-primary {
    color: #fff;
    border-color: #0d6efd;
}

body.dark-mode .btn-outline-primary:hover {
    color: #fff;
    background-color: #0d6efd;
}

body.dark-mode .btn-check:checked + .btn-outline-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Mode sombre - Boutons radio */
body.dark-mode .btn-check + .btn-outline-primary {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: transparent;
}

/* Mode sombre - Labels */
body.dark-mode .form-label {
    color: #e0e0e0;
}

/* Mode sombre - Placeholders */
body.dark-mode .form-control::placeholder {
    color: #888888;
}

/* Mode sombre - Titres des sections */
body.dark-mode .card-header h4 {
    color: #ffffff;  /* Pour "Informations Générales" et "Informations des Joueurs" */
}

body.dark-mode h5 {
    color: #ffffff;  /* Pour "Équipe 1" et "Équipe 2" */
}