/* Styles personnalisés pour Mon Quotidien */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animations légères */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-pop {
    animation: fadeInScale 0.15s ease-out forwards;
}

/* Résumé d'horoscope : 4 lignes maximum, au-delà ellipsis */
.clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Règles d'impression : n'imprimer QUE le planning en mode A4 Paysage */
@media print {
    body * {
        visibility: hidden !important;
    }
    #module-modal, #module-modal * {
        visibility: visible !important;
    }
    #module-modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #module-modal-container {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        resize: none !important;
    }
    /* Masquer tous les éléments interactifs à l'impression */
    #hours-config-drawer,
    #new-planning-drawer,
    #calendar-sync-box,
    #new-subject-box,
    #modal-resize-handle,
    #auth-screen,
    header,
    footer,
    #modules-grid,
    button,
    .no-print {
        display: none !important;
    }
    table {
        width: 100% !important;
        page-break-inside: auto;
    }
    /* Les colonnes collantes (scroll mobile) doivent être statiques à l'impression */
    thead, thead th, tbody td {
        position: static !important;
    }
    tr {
        page-break-inside: avoid;
    }
}
/* -- Responsive Mobile (max-width 640px) -- */
@media (max-width: 640px) {
    /* Empilement des cartes du dashboard */
    .dashboard-widgets > div {
        margin-bottom: 1rem;
    }
    
    /* Tables et formulaires en plein largeur */
    table, .form-group, .input-group {
        width: 100%;
    }
    
    /* Cibles tactiles minimales */
    button, input, select, a {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem;
    }
    
    /* Modales en plein écran sur mobile */
    .modal-container, .modal-window {
        margin: 0.5rem;
        width: calc(100% - 1rem);
        max-width: calc(100% - 1rem);
    }
    
    /* Grille de modules encolonnée */
    .modules-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* En-tête sticky */
    header.sticky {
        top: 0;
        z-index: 100;
    }
    
    /* Réduction de la navigation */
    .nav-left, .nav-right {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Espacement accru */
    .gap-4, .gap-6 {
        gap: 0.75rem !important;
    }
}

/* -- Improvements for all screens but especially mobile -- */
@media (max-width: 480px) {
    /* Titre plus petit */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    
    /* Icônes plus grosses */
    .icon-large { font-size: 1.5rem; }
    
    /* Texte lisible sans zoom */
    body { zoom: 1; -moz-zoom: 1; -webkit-zoom: 1; }
}