body {
    @apply bg-gray-100 font-sans antialiased;
}
.container {
    @apply max-w-6xl mx-auto py-10 sm:px-6 lg:px-8;
}
.bg-white-rounded-shadow {
    @apply bg-white p-6 rounded shadow;
}
.text-xl-font-semibold-mb-4 {
    @apply text-2xl font-semibold mb-4;
}
.text-lg-font-semibold-mb-2 {
    @apply text-lg font-semibold mb-2;
}
.mb-4 {
    @apply mb-4;
}
.block-text-sm-font-medium-text-gray-700 {
    @apply block text-sm font-medium text-gray-700;
}
.mt-1-block-w-full-border-border-gray-300-rounded-md-p-2 {
    @apply mt-1 block w-full border border-gray-300 rounded-md p-2;
}
.bg-indigo-600-text-white-px-4-py-2-rounded-hover-bg-indigo-700 {
    @apply bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700;
}
.bg-green-100-border-border-green-400-text-green-700-px-4-py-3-rounded-relative-mb-4 {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4;
}
.bg-red-100-border-border-red-400-text-red-700-px-4-py-3-rounded-relative-mb-4 {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4;
}

/* Styles pour les modales */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #111827;
}

.modal-header button {
    color: #6b7280;
    transition: color 0.2s;
}

.modal-header button:hover {
    color: #374151;
}

/* Styles for form containers */
.form-container {
    @apply max-h-[80vh] overflow-y-auto p-6 rounded-lg;
}

/* Styles for modal dialogs with forms */
.modal-content {
    @apply bg-white rounded-lg p-8 max-w-lg w-full max-h-[80vh] overflow-y-auto border border-gray-300 shadow-xl;
}

/* Styles for tables that might overflow */
.table-container {
    @apply overflow-x-auto max-w-full;
}

/* Custom scrollbar styles for better visibility */
.form-container::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
    @apply w-2;
}

.form-container::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
}

.form-container::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded hover:bg-gray-500;
}

/* Styles pour les modals */
.modal {
    @apply fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center z-50 overflow-y-auto py-6;
}

.modal-content {
    @apply bg-white rounded-lg p-8 max-w-lg w-full max-h-[80vh] overflow-y-auto border-2 border-gray-300 shadow-xl;
}

.modal-header {
    @apply flex justify-between items-center mb-6;
}

.modal-title {
    @apply text-lg font-medium text-gray-900;
}

.modal-close {
    @apply text-gray-400 hover:text-gray-500;
}

.modal-body {
    @apply space-y-6 overflow-y-auto;
}

/* Custom scrollbars for all modal dialogs */
.modal-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    @apply w-2;
}

.modal-body::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
}

.modal-body::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded hover:bg-gray-500;
}

/* Add styles for specific modals */
div[id$="Modal"] {
    @apply fixed inset-0 bg-gray-700 bg-opacity-75 flex items-center justify-center z-50 p-4;
}

div[id$="Modal"] > div {
    @apply bg-white rounded-lg border-2 border-gray-300 shadow-xl w-full max-w-2xl overflow-y-auto max-h-[90vh];
}

/* Style for modal form containers - ensures scrolling works on form content */
div[id$="Modal"] form {
    @apply overflow-y-auto max-h-[70vh] p-6;
}

/* Better scrollbar visibility */
div[id$="Modal"]::-webkit-scrollbar,
div[id$="Modal"] > div::-webkit-scrollbar,
div[id$="Modal"] form::-webkit-scrollbar {
    @apply w-2 h-2;
}

div[id$="Modal"]::-webkit-scrollbar-track,
div[id$="Modal"] > div::-webkit-scrollbar-track,
div[id$="Modal"] form::-webkit-scrollbar-track {
    @apply bg-gray-200;
}

div[id$="Modal"]::-webkit-scrollbar-thumb,
div[id$="Modal"] > div::-webkit-scrollbar-thumb,
div[id$="Modal"] form::-webkit-scrollbar-thumb {
    @apply bg-gray-500 hover:bg-gray-600 rounded;
}

.modal-footer {
    @apply flex justify-end space-x-3 mt-6;
}
.w-full-table-auto {
    @apply w-full table-auto;
}
.bg-gray-200-text-left {
    @apply bg-gray-200 text-left;
}
.p-2 {
    @apply p-2;
}
.border-t {
    @apply border-t;
}
.inline-block-mr-2 {
    @apply inline-block mr-2;
}
.border-border-gray-300-rounded-md-p-1-text-sm {
    @apply border border-gray-300 rounded-md p-1 text-sm;
}
.bg-blue-500-text-white-px-2-py-1-rounded-hover-bg-blue-600-focus-outline-none-focus-ring-focus-ring-blue-200 {
    @apply bg-blue-500 text-white px-2 py-1 rounded hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-200;
}
.bg-red-500-text-white-px-2-py-1-rounded-hover-bg-red-600-focus-outline-none-focus-ring-focus-ring-red-200 {
    @apply bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-200;
}

/* Styles spécifiques pour les modales */
div[id$="Modal"] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
    overflow-y: auto;
}

div[id$="Modal"] > div {
    background-color: white;
    border-radius: 0.5rem;
    max-width: 32rem;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    margin: 0 auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.modal-scroll-container {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.modal-footer button {
    padding: 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    transition: all 150ms ease-in-out;
}

.modal-footer button[type="submit"], 
.modal-footer button.btn-submit {
    background-color: #4f46e5;
    color: white;
    border: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.modal-footer button[type="submit"]:hover, 
.modal-footer button.btn-submit:hover {
    background-color: #4338ca;
}

.modal-footer button.cancel-button {
    background-color: white;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.modal-footer button.cancel-button:hover {
    background-color: #f9fafb;
}

/* Améliorations pour les tableaux */
.table-container {
    @apply overflow-x-auto max-w-full rounded-lg;
    /* Assurer que la barre de défilement est toujours visible */
    overflow-y: scroll;
    scrollbar-width: thin;
}

/* Centre le texte dans les en-têtes des tableaux */
table thead th {
    @apply text-center;
}

/* Centre le contenu dans les cellules des tableaux */
table td {
    @apply text-center;
}

/* Styles améliorés pour les modales */
div[id$="Modal"] {
    @apply fixed inset-0 bg-gray-800 bg-opacity-80 flex items-center justify-center z-50 p-4 overflow-auto;
    backdrop-filter: blur(3px);
}

div[id$="Modal"] > div {
    @apply bg-white rounded-xl border-4 border-indigo-300 shadow-2xl w-full max-w-2xl overflow-hidden;
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

/* Conteneur de défilement pour le contenu de la modale */
div[id$="Modal"] > div > .modal-scroll-container,
div[id$="Modal"] form {
    @apply overflow-y-auto p-6;
    max-height: 60vh;
    scrollbar-width: thin;
    overflow-y: scroll; /* Toujours afficher la barre de défilement */
}

/* En-tête de modale fixe */
div[id$="Modal"] > div > .modal-header {
    @apply sticky top-0 bg-gradient-to-r from-indigo-100 to-purple-100 px-6 py-4 border-b-2 border-indigo-200 flex justify-between items-center;
    z-index: 10;
}

/* Pied de modale fixe */
div[id$="Modal"] > div > .modal-footer {
    @apply sticky bottom-0 bg-gradient-to-r from-indigo-100 to-purple-100 px-6 py-4 border-t-2 border-indigo-200 flex justify-end space-x-3;
    z-index: 10;
}

/* Boutons de modale */
div[id$="Modal"] button[type="submit"] {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg hover:from-indigo-700 hover:to-purple-700 shadow-md transition-all duration-200 font-medium;
}

div[id$="Modal"] button.cancel-button {
    @apply bg-white border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all duration-200 font-medium;
}

/* Amélioration des barres de défilement */
div[id$="Modal"]::-webkit-scrollbar,
div[id$="Modal"] > div::-webkit-scrollbar,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar,
div[id$="Modal"] form::-webkit-scrollbar {
    @apply w-2 h-2;
}

div[id$="Modal"]::-webkit-scrollbar-track,
div[id$="Modal"] > div::-webkit-scrollbar-track,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar-track,
div[id$="Modal"] form::-webkit-scrollbar-track {
    @apply bg-indigo-50 rounded-full;
}

div[id$="Modal"]::-webkit-scrollbar-thumb,
div[id$="Modal"] > div::-webkit-scrollbar-thumb,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar-thumb,
div[id$="Modal"] form::-webkit-scrollbar-thumb {
    @apply bg-indigo-300 hover:bg-indigo-400 rounded-full;
}

/* Améliorations pour les tableaux */
.table-container {
    @apply overflow-x-auto max-w-full rounded-lg;
    /* Assurer que la barre de défilement est toujours visible */
    overflow-y: scroll;
    scrollbar-width: thin;
}

/* Centre le texte dans les en-têtes des tableaux */
table thead th {
    @apply text-center;
}

/* Centre le contenu dans les cellules des tableaux */
table td {
    @apply text-center;
}

/* Styles améliorés pour les modales */
div[id$="Modal"] {
    @apply fixed inset-0 bg-gray-800 bg-opacity-80 flex items-center justify-center z-50 p-4 overflow-auto;
    backdrop-filter: blur(3px);
}

div[id$="Modal"] > div {
    @apply bg-white rounded-xl border-4 border-indigo-300 shadow-2xl w-full max-w-2xl overflow-hidden;
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

/* Conteneur de défilement pour le contenu de la modale */
div[id$="Modal"] > div > .modal-scroll-container,
div[id$="Modal"] form {
    @apply overflow-y-auto p-6;
    max-height: 60vh;
    scrollbar-width: thin;
    overflow-y: scroll; /* Toujours afficher la barre de défilement */
}

/* En-tête de modale fixe */
div[id$="Modal"] > div > .modal-header {
    @apply sticky top-0 bg-gradient-to-r from-indigo-100 to-purple-100 px-6 py-4 border-b-2 border-indigo-200 flex justify-between items-center;
    z-index: 10;
}

/* Pied de modale fixe */
div[id$="Modal"] > div > .modal-footer {
    @apply sticky bottom-0 bg-gradient-to-r from-indigo-100 to-purple-100 px-6 py-4 border-t-2 border-indigo-200 flex justify-end space-x-3;
    z-index: 10;
}

/* Boutons de modale */
div[id$="Modal"] button[type="submit"] {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg hover:from-indigo-700 hover:to-purple-700 shadow-md transition-all duration-200 font-medium;
}

div[id$="Modal"] button.cancel-button {
    @apply bg-white border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all duration-200 font-medium;
}

/* Amélioration des barres de défilement */
div[id$="Modal"]::-webkit-scrollbar,
div[id$="Modal"] > div::-webkit-scrollbar,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar,
div[id$="Modal"] form::-webkit-scrollbar {
    @apply w-2 h-2;
}

div[id$="Modal"]::-webkit-scrollbar-track,
div[id$="Modal"] > div::-webkit-scrollbar-track,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar-track,
div[id$="Modal"] form::-webkit-scrollbar-track {
    @apply bg-indigo-50 rounded-full;
}

div[id$="Modal"]::-webkit-scrollbar-thumb,
div[id$="Modal"] > div::-webkit-scrollbar-thumb,
div[id$="Modal"] .modal-scroll-container::-webkit-scrollbar-thumb,
div[id$="Modal"] form::-webkit-scrollbar-thumb {
    @apply bg-indigo-300 hover:bg-indigo-400 rounded-full;