/* Styles personnalisés pour CPBVRC */

/* Fond d'écran aléatoire - Toutes les pages sauf admin */
body:not(.admin-page) {
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Navigation */
.nav-item {
    @apply relative flex items-center space-x-3 px-4 py-3 rounded-xl transition-all duration-300;
    @apply text-gray-600 hover:bg-gradient-to-r hover:from-orange-50 hover:to-red-50 hover:text-orange-600;
}

.nav-item.active {
    @apply bg-gradient-to-r from-orange-500 to-red-500 text-white shadow-lg transform scale-105;
}

.mobile-nav-item {
    @apply flex items-center space-x-3 px-4 py-2 transition-all duration-300;
    @apply text-gray-600 hover:text-orange-600;
    display: flex !important;
    width: fit-content !important;
    border-radius: 20px;
}

.mobile-nav-item.bg-gradient-to-r {
    @apply text-white;
    background: linear-gradient(to right, #f97316, #ef4444) !important;
    border-radius: 20px;
    padding: 0.5rem 1rem;
}

.mobile-nav-submenu {
    padding-left: 2.5rem !important;
}

/* Boutons */
.btn-primary {
    @apply bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600;
    @apply text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg;
}

.btn-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-xl font-semibold;
    @apply transition-all duration-300 backdrop-blur-sm border border-white/20;
}

.btn-outline {
    @apply bg-transparent border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white;
    @apply px-6 py-3 rounded-xl font-semibold transition-all duration-300;
}

/* Cards */
.card {
    @apply bg-white rounded-2xl p-6 shadow-lg border border-gray-100;
    @apply hover:shadow-xl transition-all duration-300 hover:transform hover:scale-105;
}

.card-hover {
    @apply hover:bg-gray-50 transition-colors cursor-pointer;
}

/* Badges de niveau utilisateur */
.badge-admin {
    @apply bg-gradient-to-r from-orange-100 to-red-100 text-orange-800 border-orange-200;
    @apply px-3 py-1 text-xs font-semibold rounded-full border;
}

.badge-bureau {
    @apply bg-gradient-to-r from-red-100 to-pink-100 text-red-800 border-red-200;
    @apply px-3 py-1 text-xs font-semibold rounded-full border;
}

.badge-membre {
    @apply bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-800 border-blue-200;
    @apply px-3 py-1 text-xs font-semibold rounded-full border;
}

.badge-inscrit {
    @apply bg-gray-100 text-gray-600 border-gray-200;
    @apply px-3 py-1 text-xs font-semibold rounded-full border;
}

/* Forum */
.forum-topic {
    @apply p-6 hover:bg-gray-50 transition-colors cursor-pointer;
}

.forum-topic.sticky {
    @apply bg-gradient-to-r from-orange-50 to-red-50 border-l-4 border-l-orange-500;
}

.forum-category {
    @apply px-3 py-1 text-xs font-medium rounded-full;
}

/* Messages */
.message-unread {
    @apply bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-l-blue-500;
}

/* Formulaires */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl;
    @apply focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl resize-none;
    @apply focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300;
}

.form-select {
    @apply px-4 py-3 border border-gray-300 rounded-xl;
    @apply focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-all duration-300;
}

/* Alertes */
.alert {
    @apply p-4 rounded-xl border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .card {
        @apply hover:transform-none hover:scale-100;
    }
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

::-webkit-scrollbar-thumb {
    @apply bg-gradient-to-b from-orange-400 to-red-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply from-orange-500 to-red-500;
}

/* Utilitaires */
.text-gradient {
    @apply bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent;
}

.bg-gradient-primary {
    @apply bg-gradient-to-r from-orange-500 to-red-500;
}

.border-gradient {
    border-image: linear-gradient(45deg, #f97316, #ef4444) 1;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-orange-500 rounded-full animate-spin;
}

/* Tooltips */
.tooltip {
    @apply relative;
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2;
    @apply bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-50;
}

/* Tables */
.table {
    @apply w-full border-collapse;
}

.table th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
}

.table tr:hover {
    @apply bg-gray-50;
}

/* Styles de liens - Sans Bootstrap */
header a,
nav a,
.nav-item,
.mobile-nav-item {
    text-decoration: none !important;
}

/* Limiter la taille des images dans les signatures */
.text-xs.text-gray-500.italic img,
.signature-image {
    max-width: 150px !important;
    max-height: 150px !important;
    height: auto;
    width: auto;
}

/* Styles pour l'affichage du contenu Quill dans les messages */
.ql-editor-display {
    line-height: 1.6;
}

.ql-editor-display p {
    margin-bottom: 0.5rem;
}

.ql-editor-display ul,
.ql-editor-display ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.ql-editor-display ul {
    list-style-type: disc;
}

.ql-editor-display ol {
    list-style-type: decimal;
}

.ql-editor-display h1 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.ql-editor-display h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.ql-editor-display h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.ql-editor-display a {
    text-decoration: underline;
}

.ql-editor-display strong,
.ql-editor-display b {
    font-weight: bold;
}

.ql-editor-display em,
.ql-editor-display i {
    font-style: italic;
}

.ql-editor-display u {
    text-decoration: underline;
}

.ql-editor-display s {
    text-decoration: line-through;
}

.ql-editor-display img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.5rem 0;
}

.ql-editor-display iframe {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.5rem 0;
}

/* Styles pour les vidéos Quill */
.ql-video {
    display: block;
    max-width: 600px;
    width: 100%;
    height: 338px;
}

.prose .ql-video {
    display: block;
    max-width: 600px;
    width: 100%;
    height: 338px;
    margin: 1rem 0;
}

/* Styles personnalisés pour les éditeurs Quill dans les messages */
#message-editor .ql-container,
#reply-editor .ql-container {
    border-radius: 0 0 16px 16px !important;
    font-size: 16px;
    border: 1px solid #d1d5db !important;
}

#message-editor .ql-toolbar,
#reply-editor .ql-toolbar {
    border-radius: 16px 16px 0 0 !important;
    background: #f9fafb;
    border: 1px solid #d1d5db !important;
    border-bottom: none !important;
}

#message-editor .ql-editor,
#reply-editor .ql-editor {
    min-height: 200px;
    padding: 15px;
}

#message-editor,
#reply-editor {
    border-radius: 16px;
    overflow: visible;
	border-radius: 0 0 0.75rem 0.75rem;
}

/* Largeur maximale personnalisée */
.max-w-7xl {
    max-width: 82rem !important;
}