/* Variables selon la charte graphique FATEC */
:root {
    --primary-blue: #255387;      /* Bleu primaire - R37 V83 B135 */
    --secondary-blue: #dfe9f3;    /* Bleu secondaire - R223 V233 B243 */
    --paragraph-color: #1b1e1f;   /* Couleur paragraphe - R27 V30 B31 */
    --comp-red: #a2503b;         /* Rouge complémentaire - R162 V80 B59 */
    --comp-red-hover: #8e4634;   /* Rouge hover */
    --comp-green: #8ba287;       /* Vert complémentaire - R139 V162 B135 */
    --comp-yellow: #dbb65a;      /* Jaune complémentaire - R219 V182 B90 */
    --background-color: #f4f6f8;  /* Couleur de fond */
    --border-radius: 0.75rem;     /* Rayon de bordure */
    --input-background: #f8f9fa;  /* Fond pour les inputs */
    --input-border: #d1d5db;      /* Bordure pour les inputs */
    --success-color: #48BB78;     /* Vert pour succès */
    --warning-color: #F6AD55;     /* Orange pour avertissement */
    --error-color: #F56565;       /* Rouge vif pour erreurs */
    --table-header-bg: #f9fafb;   /* Fond pour en-têtes de tableau */
    --table-border: #e5e7eb;      /* Bordure de tableau */
    --primary-blue-hover: #1e4573;
    --icon-blue: #dee4ec; /* Bleu icône version sérigraphie */
}

/* Styles globaux */
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: var(--background-color);
    color: var(--paragraph-color);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Contenu principal pour sticky footer */
.main-content {
    flex: 1;
}

/* Structure pour les pages avec menu */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Fix pour les pages avec menu */
body.flex.flex-col.min-h-screen {
    height: 100vh;
}

/* Assurer que les div principales prennent l'espace */
.flex-1 {
    flex: 1;
}

/* Classes utilitaires */
.custom-bg {
    background-color: var(--primary-blue);
}

.bg-secondary {
    background-color: var(--secondary-blue);
}

.text-primary {
    color: var(--primary-blue) !important;
}

.text-paragraph-color {
    color: var(--paragraph-color);
}

/* Focus states */
.focus-primary:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 83, 135, 0.2);
    outline: none;
}

/* Hover states */
.hover-primary:hover {
    background-color: #1e4573;
}

/* Gradient */
.bg-gradient-fatec {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #1e4573 100%);
}

/* Utilitaires de positionnement */
.relative {
    position: relative;
}

/* Utilitaires de texte */
.text-sm {
    font-size: 0.875rem;
}

.font-medium {
    font-weight: 500;
}

.text-center {
    text-align: center;
}

/* Utilitaires de marge */
.mt-1 {
    margin-top: 0.25rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

/* Utilitaires de couleur */
.text-white {
    color: white;
}

.text-red-500 {
    color: #ef4444;
}

/* Utilitaires de bordure */
.border-red-500 {
    border-color: #ef4444;
}

/* Messages d'erreur */
.error-text {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.error-message {
    background-color: #fff5f5;
    border-left: 4px solid #f56565;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.error-message i {
    color: #f56565;
}

.error-message p {
    color: #c53030;
    margin: 0;
}

/* Styles des boutons */
.btn-primary-fatec {
    background-color: var(--primary-blue);
    color: white;
    border-radius: var(--border-radius);
    font-weight: 500;
    border: none;
    box-shadow: 0 2px 4px rgba(37, 83, 135, 0.1);
    transition: all 0.2s ease;
}

.btn-primary-fatec:hover {
    background-color: #1e4573;
    box-shadow: 0 4px 6px rgba(37, 83, 135, 0.2);
    transform: translateY(-1px);
}

.btn-primary-fatec:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 83, 135, 0.3);
}

.btn-primary-fatec:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 83, 135, 0.1);
}

.btn-danger-fatec {
    background-color: var(--comp-red);
    color: white;
    border-radius: var(--border-radius);
    font-weight: 500;
    border: none;
    box-shadow: 0 2px 4px rgba(162, 80, 59, 0.1);
    transition: all 0.2s ease;
}

.btn-danger-fatec:hover {
    background-color: rgba(162, 80, 59, 0.8);
    box-shadow: 0 4px 6px rgba(162, 80, 59, 0.2);
    transform: translateY(-1px);
}

.btn-danger-fatec:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162, 80, 59, 0.3);
}

.btn-danger-fatec:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(162, 80, 59, 0.1);
}

.btn-secondary-fatec {
    background-color: var(--secondary-blue);
    color: var(--primary-blue);
    border-radius: var(--border-radius);
    font-weight: 500;
    border: none;
    box-shadow: 0 2px 4px rgba(37, 83, 135, 0.05);
    transition: all 0.2s ease;
}

.btn-secondary-fatec:hover {
    background-color: #cedbe9;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(37, 83, 135, 0.1);
}

.btn-secondary-fatec:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(223, 233, 243, 0.5);
}

.btn-secondary-fatec:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 83, 135, 0.05);
}

/* Styles des boutons standard */
.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-danger {
    background-color: var(--red-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Styles pour les inputs */
.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    background-color: #fff;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.form-input[readonly] {
    background-color: #f3f4f6;
}

/* Style pour les inputs de date */
.date-input {
    max-width: 100%;
}

.date-input::-webkit-calendar-picker-indicator {
    opacity: 0.8;
    cursor: pointer;
}

/* Style pour les tableaux */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: var(--table-header-bg);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
}

th, td {
    border: 1px solid var(--table-border);
    padding: 0.75rem 1rem;
}

.overflow-x-auto {
    overflow-x: auto;
}

/* Style pour les autocomplete */
.autocomplete-list {
    position: absolute;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    background-color: white;
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: none;
}

.autocomplete-item {
    padding: 0.5rem;
    cursor: pointer;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: var(--secondary-blue);
    color: var(--primary-blue);
}

/* Logo placeholder styling */
.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    height: 40px;
    color: #fff;
    background-color: #2563eb;
    padding: 0 16px;
    border-radius: 4px;
}

/* Styling for the menu and navigation */
.nav-link {
    /* pas de transition */
}

.profile-menu {
    /* pas de transition */
}

/* For mobile menu toggle */
.menu-toggle-icon {
    /* pas de transition */
}
.menu-open .menu-toggle-icon {
    /* pas de rotation */
}

/* Styles pour les boutons de suppression dans les modales */
.btn-delete-modal {
    background-color: white !important;
    color: var(--comp-red) !important;
    border: 2px solid var(--comp-red) !important;
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    padding: 0.5rem 1rem !important;
}

.btn-delete-modal:hover {
    background-color: var(--comp-red) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(162, 80, 59, 0.1), 0 2px 4px -1px rgba(162, 80, 59, 0.06) !important;
}

.btn-delete-modal:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(162, 80, 59, 0.2) !important;
}

/* Styles pour les boutons d'annulation dans les modales */
.btn-cancel-modal {
    background-color: #a2503b !important;
    color: var(--primary-blue) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    padding: 0.5rem 1rem !important;
}

.btn-cancel-modal:hover {
    background-color: #d1e0ed !important;
    transform: translateY(-1px) !important;
}

.btn-cancel-modal:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 83, 135, 0.2) !important;
}

/* Style pour l'icône d'avertissement dans les modales */
.warning-icon-container {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin: 0 auto 1.5rem !important;
    background-color: rgba(162, 80, 59, 0.1) !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.warning-icon {
    font-size: 1.5rem !important;
    color: var(--comp-red) !important;
}

/* Styles pour le hover du menu principal */
nav .nav-link:not(.logout-link):hover,
nav ul li a.nav-link:not(.logout-link):hover,
.profile-menu a:not(.logout-link):hover,
#mobileMenu a:not(.logout-link):hover,
.profile-btn:hover,
button.nav-link:hover {
    background-color: var(--secondary-blue) !important;
}

/* Style pour le lien de déconnexion */
.logout-link {
    color: #a2503b !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: opacity 300ms ease-in-out !important;
}

.logout-link:hover {
    opacity: 0.7 !important;
}

/* Supprimer tous les autres styles qui pourraient interférer */
.profile-menu .logout-link,
#mobileMenu .logout-link,
nav .logout-link {
    background: none !important;
}

.profile-menu .logout-link:hover,
#mobileMenu .logout-link:hover,
nav .logout-link:hover {
    background: none !important;
}

/* Styles pour la page des rapports */
.table-container {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Animation de transition pour les hovers */
.transition-all {
    transition: all 0.2s ease-in-out;
}

/* Style pour les tooltips */
.group:hover .group-hover\:block {
    display: block;
}

/* Style pour les statuts */
.text-comp-green { color: var(--comp-green); }
.text-comp-yellow { color: var(--comp-yellow); }
.text-comp-red { color: var(--comp-red); }
.text-primary-blue { color: var(--primary-blue); }

/* Style pour les liens */
.text-primary-blue { color: var(--primary-blue); }
.text-primary-blue-hover:hover { color: var(--primary-blue-hover); }
.text-icon-blue { color: var(--icon-blue); }

/* Style pour les inputs */
input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 83, 135, 0.1);
}

/* Style pour les en-têtes de tri */
th div {
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

th div:hover {
    color: var(--primary-blue);
}

th div i {
    transition: transform 0.2s ease-in-out;
    margin-left: 0.5rem;
}

/* Style actif pour la colonne triée */
th div.active {
    color: var(--primary-blue);
}

th div.active i {
    color: var(--primary-blue);
}

/* Supprimer les flèches par défaut des en-têtes de tableau */
th[aria-sort] {
    appearance: none;
    -webkit-appearance: none;
}

th[aria-sort]::after {
    content: none !important;
}

/* Add more custom styles below */
.text-comp-red { color: var(--comp-red); }
.text-comp-red:hover { color: rgba(162, 80, 59, 0.8); }

/* Style spécifique pour le lien de déconnexion */
.profile-menu .btn-logout,
#mobileMenu .btn-logout,
nav .btn-logout,
a.btn-logout {
    color: var(--comp-red) !important;
    transition: color 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

.profile-menu .btn-logout:hover,
#mobileMenu .btn-logout:hover,
nav .btn-logout:hover,
a.btn-logout:hover,
.nav-link.btn-logout:hover {
    color: var(--comp-red-hover) !important;
    background: transparent !important;
}

/* Supprimer explicitement tous les autres styles de hover */
nav .nav-link.btn-logout:hover,
.profile-menu a.btn-logout:hover,
#mobileMenu a.btn-logout:hover,
.nav-link.btn-logout:hover,
a.btn-logout:hover {
    background-color: #a2503b47 !important;
    color: var(--comp-red-hover) !important;
}

/* Désactiver spécifiquement les styles Tailwind */
.btn-logout.hover\:bg-secondary-blue:hover,
.btn-logout.hover\:bg-gray-50:hover,
.btn-logout.hover\:text-gray-500:hover {
    background-color: transparent !important;
    color: var(--comp-red-hover) !important;
}

/* Notification Styles */
.notification-success {
    background-color: #8ba287;
    color: white;
    border: 1px solid #8ba287;
}

.notification-error {
    background-color: #a2503b;
    color: white;
    border: 1px solid #a2503b;
}

.notification-warning {
    background-color: #dbb65a;
    color: white;
    border: 1px solid #dbb65a;
}

.notification-info {
    background-color: #255387;
    color: white;
    border: 1px solid #255387;
}

/* Animation pour le rafraîchissement des notifications */
.notification-refresh {
    animation: notification-pulse 0.3s ease-in-out;
}

@keyframes notification-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Container des notifications */
#notification-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Style unifié pour toutes les notifications */
.notification {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--primary-blue);
    color: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 300px;
    transition: all 0.3s ease-in-out;
}

/* Style pour l'icône */
.notification i {
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

/* Style pour le texte */
.notification p {
    font-size: 0.875rem;
    font-weight: 500;
    flex-grow: 1;
    margin: 0;
}

/* Style pour le bouton de fermeture */
.notification button {
    margin-left: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.notification button:hover {
    opacity: 1;
}