/**
 * Stylesheet for the application
 * @file style.css
 * @version 1.0.0
 * @description This file contains the main styles for the application, including layout, typography, and
 */
*{font-family: "Montserrat", sans-serif;}

/* Scrollbar global - Style moderne et minimaliste */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

::-webkit-scrollbar-corner {
    background: #f1f5f9;
}

/* Scrollbar pour Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Scrollbar fin pour les petits éléments */
.thin-scrollbar::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.thin-scrollbar::-webkit-scrollbar-track {
    background: #f8fafc;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

 .pal-1{padding-left: 1px;}.pal-2{padding-left: 2px;}.pal-3{padding-left: 3px;}.pal-4{padding-left: 4px;}.pal-5{padding-left: 5px;}.pal-6{padding-left: 6px;}.pal-7{padding-left: 7px;}.pal-8{padding-left: 8px;}.pal-9{padding-left: 9px;}.pal-10{padding-left: 10px;}
 .par-1{padding-right: 1px;}.par-2{padding-right: 2px;}.par-3{padding-right: 3px;}.par-4{padding-right: 4px;}.par-5{padding-right: 5px;}.par-6{padding-right: 6px;}.par-7{padding-right: 7px;}.par-8{padding-right: 8px;}.par-9{padding-right: 9px;}.par-10{padding-right: 10px;}
 .pat-1{padding-top: 1px;}.pat-2{padding-top: 2px;}.pat-3{padding-top: 3px;}.pat-4{padding-top: 4px;}.pat-5{padding-top: 5px;}.pat-6{padding-top: 6px;}.pat-7{padding-top: 7px;}.pat-8{padding-top: 8px;}.pat-9{padding-top: 9px;}.pat-10{padding-top: 10px;}
 .pab-1{padding-bottom: 1px;}.pab-2{padding-bottom: 2px;}.pab-3{padding-bottom: 3px;}.pab-4{padding-bottom: 4px;}.pab-5{padding-bottom: 5px;}.pab-6{padding-bottom: 6px;}.pab-7{padding-bottom: 7px;}.pab-8{padding-bottom: 8px;}.pab-9{padding-bottom: 9px;}.pab-10{padding-bottom: 10px;}
 .mal-1{margin-left: 1px;}.mal-2{margin-left: 2px;}.mal-3{margin-left: 3px;}.mal-4{margin-left: 4px;}.mal-5{margin-left: 5px;}.mal-6{margin-left: 6px;}.mal-7{margin-left: 7px;}.mal-8{margin-left: 8px;}.mal-9{margin-left: 9px;}.mal-10{margin-left: 10px;}
 .mar-1{margin-right: 1px;}.mar-2{margin-right: 2px;}.mar-3{margin-right: 3px;}.mar-4{margin-right: 4px;}.mar-5{margin-right: 5px;}.mar-6{margin-right: 6px;}.mar-7{margin-right: 7px;}.mar-8{margin-right: 8px;}.mar-9{margin-right: 9px;}.mar-10{margin-right: 10px;}
 .mat-1{margin-top: 1px;}.mat-2{margin-top: 2px;}.mat-3{margin-top: 3px;}.mat-4{margin-top: 4px;}.mat-5{margin-top: 5px;}.mat-6{margin-top: 6px;}.mat-7{margin-top: 7px;}.mat-8{margin-top: 8px;}.mat-9{margin-top: 9px;}.mat-10{margin-top: 10px;}
 .mab-1{margin-bottom: 1px;}.mab-2{margin-bottom: 2px;}.mab-3{margin-bottom: 3px;}.mab-4{margin-bottom: 4px;}.mab-5{margin-bottom: 5px;}.mab-6{margin-bottom: 6px;}.mab-7{margin-bottom: 7px;}.mab-8{margin-bottom: 8px;}.mab-9{margin-bottom: 9px;}.mab-10{margin-bottom: 10px;}
 .fs-1{font-size: 1px;}.fs-2{font-size: 2px;}.fs-3{font-size: 3px;}.fs-4{font-size: 4px;}.fs-5{font-size: 5px;}.fs-6{font-size: 6px;}.fs-7{font-size: 7px;}.fs-8{font-size: 8px;}.fs-9{font-size: 9px;}.fs-10{font-size: 10px;}.fs-11{font-size: 11px;}.fs-12{font-size: 12px;}.fs-13{font-size: 13px;}.fs-14{font-size: 14px;}.fs-15{font-size: 15px;}.fs-16{font-size: 16px;}.fs-17{font-size: 17px;}.fs-18{font-size: 18px;}.fs-19{font-size: 19px;}.fs-20{font-size: 20px;}
 .fw-100{font-weight: 100;}.fw-200{font-weight: 200;}.fw-300{font-weight: 300;}.fw-400{font-weight: 400;}.fw-500{font-weight: 500;}.fw-600{font-weight: 600;}.fw-700{font-weight: 700;}.fw-800{font-weight: 800;}.fw-900{font-weight: 900;}
 .lh-1{line-height: 1;}.lh-2{line-height: 2;}.lh-3{line-height: 3;}.lh-4{line-height: 4;}.lh-5{line-height: 5;}.lh-6{line-height: 6;}.lh-7{line-height: 7;}.lh-8{line-height: 8;}.lh-9{line-height: 9;}.lh-10{line-height: 10;}
 .opa-1{opacity: 0.1;}.opa-2{opacity: 0.2;}.opa-3{opacity: 0.3;}.opa-4{opacity: 0.4;}.opa-5{opacity: 0.5;}.opa-6{opacity: 0.6;}.opa-7{opacity: 0.7;}.opa-8{opacity: 0.8;}.opa-9{opacity: 0.9;}.opa-10{opacity: 1;}
 .wd-1{width: 1px;}.wd-2{width: 2px;}.wd-3{width: 3px;}.wd-4{width: 4px;}.wd-5{width: 5px;}.wd-6{width: 6px;}.wd-7{width: 7px;}.wd-8{width: 8px;}.wd-9{width: 9px;}.wd-10{width: 10px;}.wd-11{width: 11px;}.wd-12{width: 12px;}.wd-13{width: 13px;}.wd-14{width: 14px;}.wd-15{width: 15px;}.wd-16{width: 16px;}.wd-17{width: 17px;}.wd-18{width: 18px;}.wd-19{width: 19px;}.wd-20{width: 20px;}.wd-21{width: 21px;}.wd-22{width: 22px;}.wd-23{width: 23px;}.wd-24{width: 24px;}.wd-25{width: 25px;}.wd-26{width: 26px;}.wd-27{width: 27px;}.wd-28{width: 28px;}.wd-29{width: 29px;}.wd-30{width: 30px;}.wd-31{width: 31px;}.wd-32{width: 32px;}.wd-33{width: 33px;}.wd-34{width: 34px;}.wd-35{width: 35px;}.wd-36{width: 36px;}.wd-37{width: 37px;}.wd-38{width: 38px;}.wd-39{width: 39px;}.wd-40{width: 40px;}
 .ht-1{height: 1px;}.ht-2{height: 2px;}.ht-3{height: 3px;}.ht-4{height: 4px;}.ht-5{height: 5px;}.ht-6{height: 6px;}.ht-7{height: 7px;}.ht-8{height: 8px;}.ht-9{height: 9px;}.ht-10{height: 10px;}.ht-11{height: 11px;}.ht-12{height: 12px;}.ht-13{height: 13px;}.ht-14{height: 14px;}.ht-15{height: 15px;}.ht-16{height: 16px;}.ht-17{height: 17px;}.ht-18{height: 18px;}.ht-19{height: 19px;}.ht-20{height: 20px;}.ht-21{height: 21px;}.ht-22{height: 22px;}.ht-23{height: 23px;}.ht-24{height: 24px;}.ht-25{height: 25px;}.ht-26{height: 26px;}.ht-27{height: 27px;}.ht-28{height: 28px;}.ht-29{height: 29px;}.ht-30{height: 30px;}.ht-31{height: 31px;}.ht-32{height: 32px;}.ht-33{height: 33px;}.ht-34{height: 34px;}.ht-35{height: 35px;}.ht-36{height: 36px;}.ht-37{height: 37px;}.ht-38{height: 38px;}.ht-39{height: 39px;}.ht-40{height: 40px;}

/* Transitions fluides pour le footer */
#footer {
    transition: all 0.3s ease-in-out;
    transform: translateZ(0);
    backface-visibility: hidden;
}

#footer * {
    transition: all 0.3s ease-in-out;
}

/* Styles pour les actualités */
.news-card {
    transition: all 0.3s ease-in-out;
}

.news-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Animation pour les cartes d'actualités */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.news-card {
    animation: fadeInUp 0.6s ease-out;
}

.news-card:nth-child(1) { animation-delay: 0.1s; }
.news-card:nth-child(2) { animation-delay: 0.2s; }
.news-card:nth-child(3) { animation-delay: 0.3s; }
.news-card:nth-child(4) { animation-delay: 0.4s; }
.news-card:nth-child(5) { animation-delay: 0.5s; }
.news-card:nth-child(6) { animation-delay: 0.6s; }

/* Styles pour les barres de progression d'upload */
.upload-progress-container {
    max-height: 300px;
    overflow-y: auto;
}

.progress-bar-animated {
    animation: progress-pulse 2s infinite;
}

@keyframes progress-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0);
    }
}

.upload-file-item {
    transition: all 0.3s ease;
}

.upload-file-item.success {
    background-color: #f0f9ff;
    border-color: #10b981;
}

.upload-file-item.error {
    background-color: #fef2f2;
    border-color: #ef4444;
}

/* Animation d'apparition pour les barres de progression */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#upload-progress-section {
    animation: slideInDown 0.4s ease-out;
}

#upload-progress-section .upload-file-item {
    animation: slideInDown 0.3s ease-out;
}

#upload-progress-section .upload-file-item:nth-child(1) { animation-delay: 0.1s; }
#upload-progress-section .upload-file-item:nth-child(2) { animation-delay: 0.2s; }
#upload-progress-section .upload-file-item:nth-child(3) { animation-delay: 0.3s; }
#upload-progress-section .upload-file-item:nth-child(4) { animation-delay: 0.4s; }
#upload-progress-section .upload-file-item:nth-child(5) { animation-delay: 0.5s; }

/* Styles pour les onglets avec gradient Gemini */
[data-tabs-active-classes] [aria-selected="true"] {
    background: linear-gradient(to right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248)) !important;
    background-image: linear-gradient(to right, rgb(37 99 235), rgb(147 51 234), rgb(219 39 119)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    border-left: 4px solid rgb(37 99 235) !important;
    font-weight: 600 !important;
    position: relative !important;
}

[data-tabs-active-classes] [aria-selected="true"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248)) !important;
    border-radius: 0.375rem !important;
    z-index: -1 !important;
}

/* Styles spécifiques pour les onglets secondaires (comme les utilisateurs) */
#default-users-tab [aria-selected="true"], #default-school-tab [aria-selected="true"] {
    background: linear-gradient(to right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248)) !important;
    background-image: linear-gradient(to right, rgb(37 99 235), rgb(147 51 234), rgb(219 39 119)) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    border-left: none !important;
    border-bottom: 2px solid rgb(37 99 235) !important;
    font-weight: 600 !important;
    position: relative !important;
}

#default-users-tab [aria-selected="true"]::before, #default-school-tab [aria-selected="true"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248)) !important;
    z-index: -1 !important;
}

/* Styles pour le calendrier */
.calendar-container {
    height: calc(100vh - 40px);
    overflow: hidden;
}

.calendar-toolbar {
    flex-shrink: 0;
}

.calendar-content {
    flex: 1;
    height: 100%;
    overflow: auto;
}

/* Vue semaine */
.week-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.week-header {
    flex-shrink: 0;
    z-index: 20;
}

.week-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.time-row {
    border-bottom: 1px solid #e5e7eb;
}

.time-label {
    writing-mode: horizontal-tb;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    font-size: 11px;
    line-height: 1;
}

.day-cell {
    min-height: 60px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.day-cell:hover {
    background-color: #f8fafc;
}

/* Vue mois */
.month-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.month-header {
    flex-shrink: 0;
}

.month-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.week-row {
    flex: 1;
    min-height: 0;
}

.month-view .day-cell {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.month-view .day-number {
    flex-shrink: 0;
}

.month-view .events-container {
    flex: 1;
    overflow: hidden;
}

/* Événements */
.event {
    transition: all 0.2s ease;
    font-size: 11px;
    line-height: 1.2;
}

.event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-course {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
}

.event-exam {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
}

.event-meeting {
    background-color: #f3e8ff !important;
    border-color: #8b5cf6 !important;
}

.event-break {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
}

.event-other {
    background-color: #f1f5f9 !important;
    border-color: #64748b !important;
}

/* Modal */
#event-modal .bg-white {
    max-height: 90vh;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-toolbar {
        padding: 12px;
    }
    
    .calendar-toolbar .flex {
        flex-direction: column;
        gap: 12px;
    }
    
    .calendar-toolbar .flex-wrap {
        flex-wrap: wrap;
    }
    
    .week-header .grid-cols-8 {
        grid-template-columns: 60px repeat(7, 1fr);
    }
    
    .time-row .grid-cols-8 {
        grid-template-columns: 60px repeat(7, 1fr);
    }
    
    .time-label {
        font-size: 10px;
    }
}

/* Scrollbar pour le calendrier - hérite du style global mais avec taille fine */
.week-grid::-webkit-scrollbar {
    width: 3px;
}

.week-grid::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

.week-grid::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.week-grid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scrollbar pour les éléments de contenu spécifiques */
.upload-progress-container::-webkit-scrollbar,
.news-container::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 3px;
}

.upload-progress-container::-webkit-scrollbar-track,
.news-container::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 2px;
}

.upload-progress-container::-webkit-scrollbar-thumb,
.news-container::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 2px;
}

.upload-progress-container::-webkit-scrollbar-thumb:hover,
.news-container::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Styles pour le calendrier - vue semaine */
.calendar-container {
    max-height: 100vh;
    overflow: hidden;
}

.week-view {
    height: calc(100vh - 250px) !important;
    max-height: calc(100vh - 250px) !important;
}

.week-header {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

.week-grid {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 320px) !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.time-label {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important;
    background: #f9fafb !important;
}

.time-row {
    min-height: 60px !important;
}

/* Styles pour les documents home */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#documents-list .bg-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.documents-stats-card {
    transition: all 0.2s ease-in-out;
}

.documents-stats-card:hover {
    transform: translateY(-1px);
}