/* =============================================
   Style.css - Styles spécifiques et login
   Tous les autres styles sont dans les fichiers modulaires
   ============================================= */

/* Page de connexion */
#login-screen.active {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-container {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 100%;
    border-top: 8px solid var(--primary-color);
    border-bottom: 8px solid var(--secondary-color);
}

.login-container h1 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--secondary-color);
    font-size: 20px;
}

.login-container img {
    display: block;
    margin: 0 auto 20px;
    max-width: 320px;
    height: auto;
}

.login-container p {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-info {
    margin-top: 30px;
    padding: 20px;
    background: #FFF9E6;
    border-radius: 10px;
    border-left: 5px solid var(--accent-yellow);
}

.demo-info h3 {
    margin-bottom: 10px;
    color: var(--secondary-dark);
    font-size: 16px;
}

.demo-info ul {
    list-style: none;
}

.demo-info li {
    padding: 5px 0;
    font-size: 14px;
}

/* Styles utilitaires génériques */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Classes pour les messages vides */
.empty-message {
    color: #999;
}

.empty-row {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* Classes pour les actualités du dashboard */
.actualite-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.actualite-date {
    font-size: 12px;
    color: #666;
}

/* Classes pour les filtres */
.filter-input-flex {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Classes pour les groupes de boutons d'action */
.action-buttons {
    display: flex;
    gap: 5px;
}

/* Classes pour les prix */
.price-total {
    font-size: 18px;
    font-weight: bold;
    color: #4CAF50;
}

.price-highlight {
    font-size: 18px;
    color: #4CAF50;
}

/* Classes pour les calendriers */
.calendar-day-indicator {
    margin-top: 5px;
}

.badge-pending-sm {
    background: #FF9800;
    font-size: 10px;
    padding: 2px 6px;
}

.badge-confirmed-sm {
    background: #2196F3;
    font-size: 10px;
    padding: 2px 6px;
}

.badge-delivered-sm {
    background: #4CAF50;
    font-size: 10px;
    padding: 2px 6px;
}

/* Classes pour les informations client */
.client-info {
    color: #666;
}

/* Classes pour les dates personnalisées */
.custom-dates-hidden {
    display: none;
    margin-bottom: 20px;
}

/* Classes pour les actualités détaillées */
.actualite-full-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.actualite-full-content {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Classes pour les widgets d'actualités */
.empty-widget-message {
    color: #999;
    text-align: center;
}

.actualite-widget-item {
    cursor: pointer;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.actualite-widget-item:hover {
    background: #f5f5f5;
}

.important-marker {
    color: #F44336;
    margin-right: 4px;
}

.actualite-widget-date {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Classes pour la pagination */
.pagination-info-text {
    text-align: center;
    color: #666;
    margin: 20px 0;
}

/* =============================================
   Classes pour remplacer les styles inline
   ============================================= */

/* Layout et flex */
.flex-gap-10-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.flex-gap-20 {
    display: flex;
    gap: 20px;
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-align-end {
    display: flex;
    align-items: flex-end;
}

.flex-space-between-mb-20 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.flex-space-between-mb-15-pb-10-border-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E0E0E0;
}

/* Grid layouts */
.grid-2cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-4cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid-7cols-gap-5 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.grid-auto-fit-200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.grid-roles-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 2px solid #E0E0E0;
}

/* Marges */
.mb-15 {
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-5 {
    margin-top: 5px;
}

.mt-3 {
    margin-top: 3px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-4 {
    margin-right: 4px;
}

.mr-2 {
    margin-right: 2px;
}

.ml-10 {
    margin-left: 10px;
}

/* Padding */
.p-15 {
    padding: 15px;
}

.p-20 {
    padding: 20px;
}

.p-10 {
    padding: 10px;
}

.p-8 {
    padding: 8px;
}

/* Couleurs de texte */
.text-green {
    color: green;
}

.text-red {
    color: red;
}

.text-orange {
    color: orange;
}

.text-gray-666 {
    color: #666;
}

.text-gray-999 {
    color: #999;
}

.text-primary {
    color: var(--primary-color);
}

.text-primary-dark {
    color: var(--primary-dark);
}

.text-secondary {
    color: var(--secondary-color);
}

.text-white {
    color: white;
}

.text-yellow {
    color: #F39C12;
}

.text-blue {
    color: #3498DB;
}

.text-purple {
    color: #9B59B6;
}

.text-pink {
    color: #E74C8B;
}

/* Tailles de texte */
.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

/* Poids de police */
.font-bold {
    font-weight: bold;
}

.font-600 {
    font-weight: 600;
}

/* Alignements */
.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

/* Backgrounds */
.bg-light-green {
    background: #E8F8F5;
}

.bg-light-blue {
    background: #F0F9FF;
}

.bg-light-yellow {
    background: #FFF9E6;
}

.bg-light-gray {
    background: #F5F5F5;
}

.bg-white {
    background: white;
}

.bg-pink-light {
    background: #FFE4E1;
}

.bg-blue-light {
    background: #E3F2FD;
}

.bg-primary-light {
    background: var(--primary-light);
}

/* Bordures */
.border-radius-8 {
    border-radius: 8px;
}

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-2-gray {
    border: 2px solid #E0E0E0;
}

.border-1-gray {
    border: 1px solid #E0E0E0;
}

.border-left-primary {
    border-left: 4px solid var(--primary-color);
}

.border-today {
    border: 3px solid var(--primary-dark);
}

/* Overflow */
.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.max-height-150 {
    max-height: 150px;
}

.max-height-200 {
    max-height: 200px;
}

.max-height-300 {
    max-height: 300px;
}

.max-height-500 {
    max-height: 500px;
}

.max-height-600 {
    max-height: 600px;
}

.max-width-300 {
    max-width: 300px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-700 {
    max-width: 700px;
}

/* Inputs et filtres */
.filter-input-full {
    width: 100%;
    padding: 10px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
}

.filter-input-full-100 {
    width: 100%;
}

/* Labels */
.label-checkbox-flex {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}

.label-checkbox-flex-8 {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Checkbox personnalisé */
.checkbox-18 {
    width: 18px;
    height: 18px;
}

/* Status et badges inline */
.status-recorded {
    color: green;
}

.status-no-ticket {
    color: red;
}

.status-warning-ticket {
    color: orange;
}

.status-info-ticket {
    color: #666;
}

/* Boutons inline */
.btn-inline-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 5px;
}

/* Cartes calendrier */
.calendar-grid-header-day {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    background: #E3F2FD;
    border-radius: 5px;
}

.calendar-day-empty {
    padding: 10px;
    background: #F5F5F5;
    border-radius: 5px;
    min-height: 80px;
}

.calendar-day-cell {
    padding: 8px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    min-height: 80px;
    position: relative;
}

.calendar-day-number {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

.calendar-day-number-today {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #F39C12;
}

.calendar-badge-ferie {
    font-size: 11px;
    color: #E74C3C;
}

.calendar-badge-vacances {
    font-size: 11px;
    color: #F39C12;
}

.calendar-badge-ferme {
    font-size: 11px;
    color: #95A5A6;
}

.calendar-badge-ferie-9 {
    font-size: 9px;
    color: #E74C8B;
    font-weight: bold;
}

.calendar-badge-vacances-9 {
    font-size: 9px;
    color: #F39C12;
    font-weight: bold;
}

/* Zones de checkboxes calendrier */
.calendar-checkbox-zone {
    margin-top: 8px;
    font-size: 12px;
}

.calendar-empty-message {
    margin-top: 8px;
    font-size: 11px;
    color: #999;
}

/* Informations volontaires */
.volontaires-info {
    font-size: 10px;
    color: #9B59B6;
    margin-top: 3px;
}

/* Indicateurs de présence avec détails */
.presence-indicator-detailed {
    font-weight: bold;
    font-size: 11px;
}

.presence-detail-small {
    font-size: 9px;
}

/* Capacité info */
.capacite-info-box {
    padding: 10px;
    background: #E8F8F5;
    border-radius: 8px;
}

.solde-info-box {
    padding: 10px;
    background: #F0F9FF;
    border-radius: 8px;
    display: none;
}

/* Planning récapitulatif */
.recap-date-card {
    margin-bottom: 20px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    padding: 15px;
    background: white;
}

.recap-empty-message {
    text-align: center;
    color: #666;
    padding: 20px;
}

/* Badges personnalisés */
.badge-inline-ferie {
    background: #E74C3C;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
}

.badge-inline-vacances {
    background: #F39C12;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
}

.badge-inline-categorie-mat {
    background: #FFE4E1;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
}

.badge-inline-categorie-pri {
    background: #E3F2FD;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
}

/* Tables personnalisées */
.table-recap-header-midi {
    background: #FFF9E6;
}

.table-recap-header-soir {
    background: #E3F2FD;
}

.table-recap-th {
    padding: 8px;
    text-align: left;
    border: 1px solid #E0E0E0;
}

.table-recap-th-center {
    padding: 8px;
    text-align: center;
    border: 1px solid #E0E0E0;
}

.table-recap-td {
    padding: 8px;
    border: 1px solid #E0E0E0;
}

.table-recap-td-center {
    padding: 8px;
    text-align: center;
    border: 1px solid #E0E0E0;
}

.table-full-width-13 {
    width: 100%;
    font-size: 13px;
}

/* Preview et détails */
.preview-box {
    padding: 15px;
    background: #E8F8F5;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.preview-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-color);
}

.preview-list {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

/* Modal content personnalisé */
.modal-details-content {
    padding: 20px;
}

.modal-list {
    margin: 10px 0;
}

.modal-empty-text {
    color: #666;
}

/* Audit et statistiques */
.audit-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.stat-value-success {
    color: #4CAF50;
}

.stat-value-warning {
    color: #FF9800;
}

.stat-value-danger {
    color: #F44336;
}

/* Actions et textes complexes */
.text-ellipsis-300 {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pre-code-box {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    font-size: 11px;
    max-height: 200px;
    overflow: auto;
}

/* Styles d'opacité */
.opacity-50 {
    opacity: 0.5;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

/* Canvas et graphiques */
.canvas-max-height-300 {
    max-height: 300px;
}

.canvas-centered-400 {
    max-height: 300px;
    max-width: 400px;
    margin: 0 auto;
}

/* Styles de repas */
.repas-indicator {
    background: var(--secondary-color);
    color: #333;
    padding: 5px;
    border-radius: 8px;
    font-weight: bold;
    margin-top: 5px;
}

/* Séparateurs */
.border-bottom-gray {
    border-bottom: 2px solid #E0E0E0;
}

/* Font style */
.font-italic {
    font-style: italic;
}

/* Text transform */
.text-capitalize {
    text-transform: capitalize;
}

/* Margin 0 */
.m-0 {
    margin: 0;
}

/* Line height */
.line-height-16 {
    line-height: 1.6;
}

/* White space */
.white-space-pre-wrap {
    white-space: pre-wrap;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* Badge avec marge */
.badge-mr-2 {
    margin: 2px;
}

/* =============================================
   Classes pour js/modules/presences.js
   ============================================= */

/* Filtres et inputs presences */
.presences-filter-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.presences-filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Modals et info boxes presences */
.presences-modal-info-box {
    background: #E3F2FD;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.presences-modal-info-p {
    margin: 0 0 10px 0;
}

.presences-modal-info-list {
    margin: 0;
    padding-left: 20px;
}

.presences-modal-enfant-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.presences-modal-calendar {
    margin: 20px 0;
}

.presences-modal-summary {
    background: #F5F5F5;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.presences-modal-summary-empty {
    margin: 0;
    color: #666;
}

.presences-modal-summary-title {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.presences-modal-summary-list {
    margin: 0;
    padding-left: 20px;
}

.presences-modal-summary-total {
    margin: 10px 0 0 0;
    font-weight: bold;
}

/* Info box modeles */
.presences-info-box {
    background: #E3F2FD;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.presences-info-warning {
    background: #FFF3E0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.presences-info-p {
    margin: 0 0 10px 0;
}

.presences-info-p-last {
    margin: 0;
}

/* Actions header */
.presences-header-actions {
    margin-bottom: 20px;
}

/* Tables */
.presences-table-empty {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* Inline small text */
.presences-inline-small {
    color: #666;
}

/* Checkboxes et labels */
.presences-checkbox-label-flex {
    display: flex;
    align-items: center;
    gap: 5px;
}

.presences-checkbox-label-flex-gap10 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.presences-checkbox-label-flex-gap15 {
    display: flex;
    gap: 15px;
}

/* Form groups spacing */
.presences-form-group-20 {
    margin: 20px 0;
}

/* Textarea modal */
.presences-modal-textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

/* Input date */
.presences-modal-input-date {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

/* Small text helper */
.presences-helper-text {
    color: #666;
}

/* Model fields */
.presences-modele-fields {
    display: none;
}

.presences-modele-fields-day-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Generate modal list */
.presences-generate-list {
    margin: 10px 0;
    padding-left: 20px;
}

/* Details responsable */
.presences-details-responsable-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* =============================================
   Classes pour js/parent.js
   ============================================= */

/* Alert et info boxes */
.parent-alert-warning {
    margin-bottom: 20px;
}

/* Actions rapides */
.parent-actions-flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Solde display */
.parent-solde-item-divider {
    border-top: 2px solid #667eea;
    padding-top: 10px;
}

.parent-solde-value-large {
    font-size: 18px;
}

/* Historique et filtres */
.parent-filter-input {
    width: 100%;
    padding: 10px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
}

.parent-form-group-mb15 {
    margin-bottom: 15px;
}

/* Calendrier styles */
.parent-calendar-day-style-today {
    border: 3px solid var(--primary-dark);
    background: #E8F8F5;
}

.parent-calendar-day-style-ferie {
    background: #FFE4E1;
    opacity: 0.7;
}

.parent-calendar-day-style-ferie-badge {
    font-size: 9px;
    color: #E74C8B;
    font-weight: bold;
}

.parent-calendar-day-style-vacances {
    background: #FFF9E6;
    opacity: 0.8;
}

.parent-calendar-day-style-vacances-badge {
    font-size: 9px;
    color: #F39C12;
    font-weight: bold;
}

.parent-calendar-day-style-weekend {
    background: #F5F5F5;
    opacity: 0.6;
}

/* =============================================
   Classes pour js/modules/volontaires.js
   ============================================= */

/* Filtres volontaires */
.volontaires-filter-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.volontaires-filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Modal volontaires */
.volontaires-modal-info-box {
    background: #E8F5E9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.volontaires-modal-info-p {
    margin: 0 0 10px 0;
}

.volontaires-modal-info-list {
    margin: 0;
    padding-left: 20px;
}

.volontaires-form-group-mb20 {
    margin-bottom: 20px;
}

.volontaires-modal-user-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.volontaires-modal-calendar {
    margin: 20px 0;
}

.volontaires-modal-summary {
    background: #F5F5F5;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.volontaires-modal-summary-empty {
    margin: 0;
    color: #666;
}

.volontaires-modal-summary-title {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.volontaires-modal-summary-list {
    margin: 0;
    padding-left: 20px;
}

.volontaires-modal-summary-total {
    margin: 10px 0 0 0;
    font-weight: bold;
}

.volontaires-form-group-20 {
    margin: 20px 0;
}

.volontaires-modal-textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

/* =============================================
   Classes pour js/modules/users.js
   ============================================= */

/* Filtres users */
.users-filter-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.users-filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Roles checkboxes */
.users-roles-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.users-role-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.users-role-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.users-role-label span {
    user-select: none;
}

/* =============================================
   Classes pour js/modules/planning.js
   ============================================= */

/* Panel de planning */
.planning-enfant-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

.planning-btn-confirm {
    width: 100%;
}

.planning-btn-clear {
    width: 100%;
    margin-top: 8px;
}

/* Modal planning */
.planning-modal-info-box {
    background: #E3F2FD;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.planning-modal-info-p {
    margin: 0 0 10px 0;
}

.planning-modal-info-list {
    margin: 0;
    padding-left: 20px;
}

.planning-modal-calendar {
    margin: 20px 0;
}

.planning-form-group-20 {
    margin: 20px 0;
}

.planning-modal-enfant-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.planning-modal-summary {
    background: #F5F5F5;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
}

.planning-modal-summary-empty {
    margin: 0;
    color: #666;
}

.planning-modal-summary-title {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.planning-modal-summary-list {
    margin: 0;
    padding-left: 20px;
}

.planning-modal-summary-total {
    margin: 10px 0 0 0;
    font-weight: bold;
}

/* =============================================
   Responsive Mobile
   ============================================= */
@media (max-width: 768px) {
    /* Page de connexion mobile */
    #login-screen.active {
        padding: 15px;
    }

    .login-container {
        padding: 20px;
        max-width: 100%;
    }

    .login-container h1 {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .login-container h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .login-container img,
    .login-logo {
        max-width: 200px !important;
        width: 100%;
        height: auto;
    }

    /* Grids responsive */
    .grid-2cols,
    .grid-4cols,
    .grid-7cols-gap-5,
    .grid-auto-fit-200,
    .grid-roles-checkboxes {
        grid-template-columns: 1fr;
    }

    /* Filters responsive - 2 par ligne en mobile */
    .filters-bar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px 6px;
        align-items: stretch;
    }

    .filter-input-flex,
    .filter-input,
    .filter-select {
        width: 100%;
        padding: 6px 8px;
        font-size: 11px;
    }

    /* Si un filtre doit prendre toute la largeur */
    .filter-full-width {
        grid-column: 1 / -1;
    }

    /* Action buttons responsive */
    .action-buttons {
        flex-direction: column;
    }

    .action-buttons button {
        width: 100%;
    }
}