/* Police moderne et lisible */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600&display=swap');

:root {
    --neon-pink: #ff2ced;
    --neon-blue: #2e86de; /* Bleu plus foncé pour une meilleure lisibilité */
    --neon-purple: #9d0aff;
    --light-bg: #f8f9fa;
    --bg-color: #6e8dad;
    --dark-text: #212529;
    --gray-text: #6c757d;
    --navbar-bg: #212529; /* Fond sombre de la barre de navigation */
    --btn-neon-ref: #4c6ef5; /* Bleu néon pour les boutons */
    --btn-neon-ref-hover: #3a56c9; /* Bleu néon plus foncé au survol */
    --btn-neon: #e5f0f7; /* Bleu néon pour les boutons */
    --btn-neon-hover: #3a56c9; /* Bleu néon plus foncé au survol */
}

.col-lg-2-12 {
    flex: 0 0 auto;
    width: 12%;
}

/* Style général pour le corps */
body {
    font-family: 'Rajdhani', sans-serif;
    background-color: var(--bg-color);
    color: var(--dark-text);
}

/* Barre de navigation : liens visibles */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: var(--dark-text);
    }

.bg-neon {
    --bs-bg-opacity: 1;
    background-color: rgb(110 141 173) !important;
}

.bg-neon-hidden {
    --bs-bg-opacity: 0.15;
    background-color: rgb(110 141 173) !important;
}

.bg-neon-games {
    --bs-bg-opacity: 1;
    background-color: rgb(148 196 255) !important;
}

.bg-neon-livraison {
    --bs-bg-opacity: 1;
    background-color: rgb(131 222 210) !important;
}

.bg-neon-pdf {
    --bs-bg-opacity: 1;
    background-color: rgb(255 131 112) !important;
}

.bg-neon-zip {
    --bs-bg-opacity: 1;
    background-color: rgb(255 193 7) !important;
}

/* Liens dans le contenu : couleur ajustée */
a {
    color: var(--neon-blue);
    text-decoration: none;
    transition: color 0.3s;
}

    a:hover {
        color: var(--neon-purple);
        /*text-decoration: underline;*/
    }

/* Boutons : fond bleu néon avec effet subtil */
.btn {
    /*background-color: var(--btn-neon);*/
    border: none;
    color: white;
    transition: background-color 0.3s, transform 0.2s;
    border-radius: 4px;
    font-weight: 500;
}

    .btn:hover {
        /*background-color: var(--btn-neon-hover);*/
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(76, 110, 245, 0.4);
    }

.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #6c757d;
    transition: all 0.3s;
}

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }

.btn-outline-sync {
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
    transition: all 0.3s;
}

    .btn-outline-sync:hover {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }

/* Cartes : bordure légère et effet au survol */
.card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    transition: box-shadow 0.3s, transform 0.3s;
}

    .card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

/* Badges : style cohérent */
.badge {
    font-weight: 500;
    padding: 0.3em 0.6em;
}

/* En-têtes et titres */
h1 {
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
}
h2, h3, h4, h5, h6 {
    color: var(--dark-text);
    font-weight: 600;
}
    .neon-blue {
        color: var(--neon-blue);
    }

/* Tableaux : amélioration de la lisibilité */
.table-hover tbody tr:hover {
    background-color: rgba(76, 110, 245, 0.05);
}

/* Champs de formulaire */
.form-control, .form-select {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    transition: border-color 0.3s;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--neon-blue);
        box-shadow: 0 0 0 0.2rem rgba(76, 110, 245, 0.25);
    }

/* Alertes */
.alert {
    border-radius: 0.375rem;
}

/* Zone de glisser-déposer */
#dropZone {
    border: 2px dashed #ced4da;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s;
}

    #dropZone.border-primary {
        border-color: var(--neon-blue);
        background-color: rgba(76, 110, 245, 0.05);
    }

/* Aperçu des images */
#imagePreview img {
    border: 1px solid #eee;
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Boutons spécifiques pour les actions */
.btn-outline-success {
    border-color: #28a745;
    color: #28a745;
}

    .btn-outline-success:hover {
        background-color: #28a745;
        color: white;
    }

.btn-outline-info {
    border-color: #5de1fb;
    background-color: #5de1fb;
}

    .btn-outline-info:hover {
        background-color: #5de1fb;
        color: var(--dark-text);
    }

.btn-outline-warning {
    border-color: #ffc107;
    background-color: #ffc107;
}

    .btn-outline-warning:hover {
        background-color: #ffc107;
        color: var(--dark-text);
    }

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

    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: var(--dark-text);
    }

.btn-outline-primary {
    border-color: var(--neon-blue);
    color: var(--neon-blue);
}

    .btn-outline-primary:hover {
        background-color: var(--neon-blue);
        color: white;
    }

/* Style pour les étiquettes d'état */
.etat-container .badge {
    background-color: #e9ecef;
    color: var(--dark-text);
    font-weight: normal;
}

/* Scanner de code-barres */
#scanner-container {
    margin-top: 10px;
}

    #scanner-container video {
        border-radius: 0.375rem;
        width: 100%;
        max-width: 400px;
    }