/* styles.css */

/* Corps de la page */
body {
    background-color: #0d1117;
    /* Couleur de fond sombre */
    color: #c9d1d9;
    /* Couleur du texte */
    font-family: Arial, sans-serif;
    /* Police de la page */
}

/* Styles pour la navbar */
.navbar {
    background-color: #161b22;
    /* Couleur de fond de la navbar */
}

.nav-link {
    color: #c9d1d9 !important;
    /* Couleur du texte des liens */
}

.nav-link:hover {
    color: #58a6ff !important;
    /* Couleur au survol des liens */
}

.navbar-brand {
    font-size: 1.5rem;
    /* Taille de police pour le nom de la marque */
}

/* Logo navbar redimensionné */
.navbar-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    display: inline-block;
}

.navbar-brand .brand-text {
    line-height: 1;
    font-size: 1.25rem;
}

/* Styles pour les notifications */
.flash {
    background-color: #21262d;
    /* Couleur de fond pour les messages flash */
    color: #c9d1d9;
    /* Couleur du texte des messages flash */
    border-radius: 0.375rem;
    /* Arrondi des coins */
    padding: 10px;
    /* Padding autour du texte */
    margin-bottom: 20px;
    /* Marge inférieure */
}

/* Styles pour le conteneur principal */
.cover-container {
    padding: 20px;
    /* Padding autour du contenu */
    border-radius: 0.375rem;
    /* Arrondi des coins */
    background-color: #161b22;
    /* Couleur de fond du conteneur principal */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* Ombre autour du conteneur */
    width: 75% !important;
    max-width: 1400px;
}
body > div.cover-container.d-flex.w-100.h-100.p-3.mx-auto.flex-column > form {
    margin: 0 auto;
    /* Centre le formulaire dans le conteneur */
    width: 50%;
    /* Largeur du formulaire */
    max-width: 600px;
    /* Largeur maximale du formulaire */
}

/* Styles pour les titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
    /* Couleur blanche pour les titres */
}

h4 {
    margin: 0;
    /* Supprime les marges par défaut pour les titres */
}
a {
    color: #58a6ff;
    /* Couleur des liens */
    text-decoration: none;
    /* Supprime le soulignement des liens */
}
/* Boutons */
.btn {
    transition: background-color 0.3s, transform 0.2s;
    /* Animation au survol */
}

.btn-primary {
    background-color: #238636;
    /* Couleur de fond pour le bouton principal */
    border: none;
    /* Supprime la bordure */
}

.btn-primary:hover {
    background-color: #1c7c29;
    /* Couleur de fond du bouton au survol, plus sombre */
}

.btn-danger {
    background-color: #cf222e;
    /* Couleur de fond pour le bouton supprimer */
    border: none;
    /* Supprime la bordure */
}

.btn-danger:hover {
    background-color: #a61e27;
    /* Couleur de fond du bouton supprimer au survol, plus sombre */
}

/* Style pour les formulaires */
.form-control {
    background-color: #21262d;
    /* Fond sombre pour les champs de formulaire */
    color: #c9d1d9;
    /* Couleur du texte */
    border: 1px solid #6c757d;
    /* Bordure grise */
}

.form-control::placeholder {
    color: #586069;
    /* Couleur du placeholder */
    opacity: 1;
    /* Visibilité du placeholder */
}

/* Arrondi des coins des éléments */
.rounded {
    border-radius: 0.375rem;
    /* Arrondi des coins */
}

/* Styles de la table */
.table {
    border-collapse: collapse !important;
    /* Supprime les espaces entre les bordures */
    width: 100% !important;
    /* Largeur de la table */
}

.table th,
.table td {
    padding: 12px !important;
    /* Padding dans les cellules */
    text-align: center !important;
    /* Centrer le texte */
}

.table th {
    background-color: #21262d !important;
    /* Couleur de fond pour les en-têtes */
    color: #c9d1d9 !important;
    /* Couleur du texte des en-têtes */
}

.table tr:nth-child(even) {
    background-color: #21262d !important;
    /* Fond des lignes paires */
}

.table tr:hover {
    background-color: #30363d !important;
    /* Fond au survol des lignes */
}

#productTable,
#categoryTable {
    border-radius: 0.375rem !important;
    /* Arrondi les coins de la table */
    overflow: hidden !important;
    border-collapse: collapse !important;
    width: 100% !important;
    /* Important pour garder l'arrondi visible */
}

/* Style pour le placeholder */
#filterInput::placeholder {
    color: #adb5bd;
    /* Couleur du texte du placeholder */
    opacity: 1;
    /* Assure que le placeholder est visible */
}
/* === Simple‑Datatables – Dark GitHub‑like ================================= */

/* Conteneur général */
.datatable-wrapper {
    background: #161b22;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: .375rem;
}

/* Bandeau haut : sélecteur & recherche */
.datatable-top {
    background: #0d1117;
    padding: .5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.datatable-selector,
.datatable-input {
    background: #21262d;
    color: #c9d1d9;
    border: 1px solid #6c757d;
    border-radius: .375rem;
    padding: .25rem .5rem;
    font-size: .875rem;
}
.datatable-input::placeholder { color: #586069; }

/* Tableau interne (déjà .table-dark) */
.datatable-table {
    background: transparent;
}

.datatable-table th {
    background: #21262d !important;
    color: #c9d1d9 !important;
    border-bottom-color: #30363d;
}
.datatable-table td {
    background: #161b22;
    border-bottom: 1px solid #21262d;
}
.datatable-table tr:nth-child(even) td { background: #1b1f27; }
.datatable-table tr:hover td          { background: #30363d; }

/* Icône de tri */
.datatable-sorter::after {
    border: 4px solid transparent;
    border-top-color: #6c757d;
    margin-left: .35rem;
    text-decoration: none;
    opacity: .6;
}
th[aria-sort="asc"]  .datatable-sorter::after { border-top-color:#58a6ff; text-decoration: none; opacity:1; }
th[aria-sort="desc"] .datatable-sorter::after { border-bottom-color:#58a6ff; text-decoration: none; opacity:1; border-top-color:transparent; transform:rotate(180deg); }

/* Pagination & info */
.datatable-bottom {
    background: #0d1117;
    padding: .5rem 1rem;
    font-size: .875rem;
    border-top: 1px solid #30363d;
}
.datatable-info { color: #8b949e; }

.datatable-pagination-list {
    display: flex;
    /* remet les éléments en ligne */
    gap: .25rem;
    /* petit espace entre les pages */
    list-style: none;
    /* supprime les puces */
    padding: 0;
    margin: 0;
}

.datatable-pagination-list li {
    display: inline-block;
    /* évite un retour à la ligne */
}

.datatable-pagination-list li > a {
    min-width: 2.2rem;
    /* largeur fixe pour un beau carré */
    color: #c9d1d9;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: .25rem;
    padding: .25rem .5rem;
    margin-left: .25rem;
    transition: background .2s, color .2s;
}
.datatable-pagination-list li.active > a,
.datatable-pagination-list li > a:hover {
    background: #238636;
    color: #fff;
    border-color: #238636;
}

/* Fix colonnes gelées (option fixed‑columns) */
.fixed-columns .datatable-container {
    overflow: auto;                    /* scroller propre */
    scrollbar-color: #30363d #161b22;  /* Firefox */
}
.fixed-columns .datatable-container::-webkit-scrollbar {
    height: 8px; width: 8px;
}
.fixed-columns .datatable-container::-webkit-scrollbar-thumb {
    background: #30363d; border-radius: 4px;
}

/* === Fin overrides ======================================================= */