/* Style général */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

/* Centrer le contenu */
.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Boutons */
button, .btn {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

button:hover, .btn:hover {
    background-color: #0056b3;
}

/* Champs de formulaire */
input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Liens */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Login Page */
.login-header {
    text-align: center;
    margin-bottom: 20px;
}

.login-header h1 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #007bff;
}

/* Dashboard */
.dashboard-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
    border-bottom: 4px solid #0056b3;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 24px;
}

.dashboard-nav {
    margin: 20px 0;
    text-align: center;
}

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

.dashboard-nav ul li {
    display: inline-block;
    margin: 0 10px;
}

.dashboard-nav ul li a {
    color: white;
    padding: 10px 20px;
    background-color: #0056b3;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.dashboard-nav ul li a:hover {
    background-color: #003d80;
}

/* Sections du tableau de bord */
.dashboard-content {
    padding: 20px;
}

.dashboard-content h2 {
    color: #007bff;
}

.dashboard-content p {
    line-height: 1.6;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

table th {
    background-color: #007bff;
    color: white;
}

/* Réduire la largeur des champs dans le formulaire */
.filter-form input, .filter-form button {
    width: auto; /* Permet aux champs de s'ajuster automatiquement */
    padding: 10px; /* Réduction de la taille des champs */
    font-size: 14px; /* Réduction de la taille de la police */
    margin-right: 5px;
}

.filter-form label {
    margin-right: 5px;
}

/* Limiter la largeur du tableau */
table {
    max-width: 100%;
    width: 90%; /* Réduit la largeur globale du tableau */
    margin: 0 auto;
    border-collapse: collapse;
    margin-top: 20px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

table th {
    background-color: #007bff;
    color: white;
    font-size: 14px;
}

/* Liens de tri */
table th a {
    color: white;
    text-decoration: none;
}

table th a:hover {
    text-decoration: underline;
}

/* Sélecteur pour lignes par page */
#rows-per-page {
    padding: 5px;
    margin: 10px 0;
}

/* Style des flèches de tri */
table th a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    color: white;
}

table th a:hover {
    text-decoration: underline;
}

table th a span {
    font-size: 12px;
    color: white;
}

.pagination {
    margin: 20px 0;
    text-align: center;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #007bff;
    transition: background-color 0.3s;
}

.pagination a.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}

.pagination a:hover {
    background-color: #0056b3;
    color: white;
}

.pagination .page {
    padding: 5px 10px;
    margin: 2px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #007bff;
}

.pagination .page.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    pointer-events: none; /* Désactiver les clics sur la page active */
}