/* Importation des directives Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Configuration globale */
html {
    direction: rtl;
    font-family: 'Amiri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    @apply text-gray-900;
}

body {
    @apply bg-gray-100 min-h-screen;
}

/* Conteneurs principaux */
.awp-container {
    @apply max-w-4xl mx-auto p-4;
}

/* Annonces (announcements.php) */
.awp-announcement {
    @apply bg-white p-6 rounded-lg shadow-md mb-4 transition-all duration-300;
}

.awp-announcement h2 {
    @apply text-xl font-bold mb-2 text-blue-600;
}

.awp-announcement p {
    @apply text-gray-700 mb-4;
}

.awp-announcement .awp-close-button {
    @apply bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500;
}

/* Profil (profile.php) */
.awp-profile {
    @apply bg-gradient-to-br from-gray-50 to-blue-100 p-6 rounded-xl shadow-lg border-2 border-gray-200;
}

.awp-profile h1, .awp-profile h2, .awp-profile h3 {
    @apply text-xl font-bold mb-4 text-blue-600;
}

.awp-profile img.rounded-full {
    @apply w-24 h-24 mx-auto mb-4 border-4 border-white shadow-md;
}

.awp-profile form {
    @apply space-y-4;
}

.awp-profile input,
.awp-profile select,
.awp-profile textarea {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 text-gray-900;
}

.awp-profile button {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300;
}

.awp-profile .awp-friend-request {
    @apply bg-gray-100 p-4 rounded-md mb-2;
}

.awp-profile .awp-friend-request button {
    @apply px-3 py-1 rounded-md;
}

.awp-profile .awp-friend-request button:first-child {
    @apply bg-green-500 text-white hover:bg-green-600;
}

.awp-profile .awp-friend-request button:last-child {
    @apply bg-red-500 text-white hover:bg-red-600;
}

.awp-profile ul.space-y-2 li {
    @apply bg-gray-50 p-4 rounded-md;
}

.awp-profile .social-links a {
    @apply inline-block transition-transform duration-200 hover:scale-125;
}

/* Section Certificates (profile.php) */
.awp-certificates {
    @apply bg-white p-6 rounded-lg shadow-md mt-6;
}

.awp-certificates h3 {
    @apply text-lg font-medium mb-4 text-blue-600;
}

.awp-certificates ul li {
    @apply bg-gray-50 p-4 rounded-md mb-2 flex justify-between items-center;
}

.awp-certificates ul li a {
    @apply text-blue-600 hover:underline;
}

/* Formulaire de soumission (submissions.php) */
.awp-submission-form {
    @apply bg-white p-6 rounded-lg shadow-md fade-in;
}

.awp-submission-form h2 {
    @apply text-xl font-bold mb-4 text-blue-600;
}

.awp-submission-form .awp-form {
    @apply space-y-4;
}

.awp-submission-form input,
.awp-submission-form textarea {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 text-gray-900;
}

.awp-submission-form button {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300;
}

.awp-submission-form .awp-message {
    @apply text-center mt-4 p-4 rounded-md font-medium;
    position: relative;
    z-index: 10;
    display: none;
}

.awp-submission-form .awp-message:not(.hidden) {
    display: block !important;
}

.awp-submission-form .awp-message.text-green-600 {
    @apply bg-green-100 text-green-600;
}

.awp-submission-form .awp-message.text-red-600 {
    @apply bg-red-100 text-red-600;
}

/* Formulaire de vérification de certificat (certificate.php) */
.awp-verify-certificate-form {
    @apply bg-white p-6 rounded-lg shadow-md max-w-md mx-auto;
}

.awp-verify-certificate-form h2 {
    @apply text-xl font-bold mb-4 text-blue-600;
}

.awp-verify-certificate-form input {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4 text-gray-900;
}

.awp-verify-certificate-form button {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300;
}

#verify-message .bg-green-100 {
    @apply p-4 rounded-md text-green-700;
}

#verify-message .text-red-600 {
    @apply p-4 rounded-md bg-red-100 text-red-700;
}

/* Mur d'activité (activity.php) */
.awp-activity {
    @apply bg-white p-6 rounded-lg shadow-md;
}

.awp-activity h2 {
    @apply text-xl font-bold mb-4 text-blue-600;
}

.awp-activity select {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 mb-4 text-gray-900;
}

.awp-activity-item {
    @apply bg-gray-100 p-4 rounded-md mb-4;
}

.awp-activity-item img {
    @apply w-12 h-12 rounded-full;
}

.awp-activity-item h3 {
    @apply text-lg font-bold;
}

.awp-activity-item p {
    @apply text-gray-600;
}

.awp-activity-item a {
    @apply text-blue-600 hover:underline;
}

.awp-activity button {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300;
}

/* Chargeur AJAX (script.js) */
.awp-loader {
    @apply fixed inset-0 bg-gray-500 bg-opacity-50 flex items-center justify-center z-50;
}

.awp-loader .animate-spin {
    @apply rounded-full h-12 w-12 border-4 border-gray-200 border-t-blue-600 animate-spin;
}

/* Responsive design */
@media (max-width: 640px) {
    .awp-container {
        @apply p-2;
    }

    .awp-profile img.rounded-full {
        @apply w-16 h-16;
    }

    .awp-certificates ul li {
        @apply flex-col items-start;
    }

    .awp-activity-item img {
        @apply w-10 h-10;
    }
}

/* Accessibilité */
:focus {
    @apply outline-none ring-2 ring-blue-500;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Animations */
.animate__animated {
    animation-duration: 0.5s;
}

.animate__fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Classes potentiellement utilisées dans activity.php ou announcements.php */
.awp-filter.active {
    @apply bg-blue-700 text-white;
}

.badge {
    @apply inline-block bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded;
}