/* ============================================
   ONGLET RAPPORT - DESIGN MODERNE
   ============================================ */

.rapport-content {
    padding: 24px !important;
    background: linear-gradient(135deg, #F8FAFB 0%, #FFFFFF 100%) !important;
    min-height: 600px !important;
}

/* ============================================
   HEADER
   ============================================ */

.rapport-header {
    margin-bottom: 28px !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFB 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-left: 5px solid #0078D4 !important;
}

.rapport-header h2 {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #323130 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ============================================
   FILTRES
   ============================================ */

.rapport-filters {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 24px !important;
    border: 1px solid #E1E4E8 !important;
}

.filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.filter-row label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #323130 !important;
    min-width: 80px !important;
}

.filter-row input[type="date"] {
    padding: 10px 16px !important;
    border: 2px solid #E1E4E8 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #323130 !important;
    background: #FFFFFF !important;
    transition: all 0.2s ease !important;
    min-width: 160px !important;
}

.filter-row input[type="date"]:focus {
    outline: none !important;
    border-color: #0078D4 !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1) !important;
}

.filter-row span {
    font-size: 14px !important;
    color: #605E5C !important;
    font-weight: 500 !important;
}

.filter-row .btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.filter-row .btn-teal {
    background: linear-gradient(135deg, #0078D4 0%, #005A9E 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3) !important;
}

.filter-row .btn-teal:hover {
    background: linear-gradient(135deg, #005A9E 0%, #004578 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 120, 212, 0.4) !important;
}

.filter-row .btn-red {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.filter-row .btn-red:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
}

.filter-row .btn-green {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.filter-row .btn-green:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* ============================================
   INFO CARD
   ============================================ */

.rapport-info {
    background: linear-gradient(135deg, #E1F5FE 0%, #F0F9FF 100%) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
    border-left: 4px solid #0078D4 !important;
}

.rapport-info p {
    margin: 8px 0 !important;
    font-size: 14px !important;
    color: #005A9E !important;
    line-height: 1.6 !important;
}

.rapport-info p:first-child {
    font-weight: 700 !important;
    font-size: 16px !important;
    margin-bottom: 12px !important;
}

/* ============================================
   PREVIEW
   ============================================ */

.report-preview {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E1E4E8 !important;
    min-height: 400px !important;
    max-height: 800px !important;
    overflow-y: auto !important;
}

.report-preview:empty::before {
    content: '📋 Aucun rapport généré. Sélectionnez une période et cliquez sur "Afficher Rapport".' !important;
    display: block !important;
    text-align: center !important;
    color: #95A5A6 !important;
    font-size: 16px !important;
    padding: 60px 20px !important;
    font-style: italic !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .rapport-content {
        padding: 16px !important;
    }
    
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .filter-row label,
    .filter-row input[type="date"],
    .filter-row .btn {
        width: 100% !important;
    }
    
    .filter-row span {
        display: none !important;
    }
}