/* /Components/AlertMapModal.razor.rz.scp.css */
/* Modal overlay */
.alert-map-modal[b-fa6nyl90h0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ion-backdrop-color, rgba(0, 0, 0, 0.32));
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease-in-out;
    backdrop-filter: blur(10px);
}

.alert-map-modal.modal-open[b-fa6nyl90h0] {
    opacity: 1;
    visibility: visible;
}

/* Modal content */
.modal-content[b-fa6nyl90h0] {
    background: var(--ion-color-step-50, var(--ion-background-color));
    border-radius: var(--ion-border-radius, 12px);
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: var(--ion-box-shadow, 0 28px 48px rgba(0, 0, 0, 0.4));
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s ease-in-out;
    border: 1px solid var(--ion-color-step-100, var(--ion-border-color));
}

.alert-map-modal.modal-open .modal-content[b-fa6nyl90h0] {
    transform: scale(1) translateY(0);
}

/* Modal header */
.modal-header[b-fa6nyl90h0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ion-color-step-150, var(--ion-border-color));
    background: var(--ion-color-step-100, var(--ion-background-color));
    min-height: 64px;
}

.modal-title[b-fa6nyl90h0] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 1.2em;
    color: var(--ion-color-step-850, var(--ion-text-color));
    flex: 1;
}

.modal-title img[b-fa6nyl90h0] {
    border-radius: 6px;
    flex-shrink: 0;
}

.modal-header ion-button[b-fa6nyl90h0] {
    --color: var(--ion-color-medium);
    --background: transparent;
    --border-radius: 50%;
    --padding: 8px;
    margin: 0;
}

.modal-header ion-button:hover[b-fa6nyl90h0] {
    --background: var(--ion-color-step-100, rgba(var(--ion-color-primary-rgb), 0.1));
}

/* Alert details */
.alert-details[b-fa6nyl90h0] {
    padding: 24px;
    border-bottom: 1px solid var(--ion-color-step-150, var(--ion-border-color));
    background: var(--ion-color-step-50, var(--ion-background-color));
}

.detail-item[b-fa6nyl90h0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 1em;
    line-height: 1.4;
}

.detail-item:last-child[b-fa6nyl90h0] {
    margin-bottom: 0;
}

.detail-item ion-icon[b-fa6nyl90h0] {
    color: var(--ion-color-step-600, var(--ion-color-medium));
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 1.2em;
}

.detail-item span[b-fa6nyl90h0] {
    color: var(--ion-color-step-800, var(--ion-text-color));
    flex: 1;
}

.detail-item.message[b-fa6nyl90h0] {
    align-items: flex-start;
}

.detail-item.message span[b-fa6nyl90h0] {
    line-height: 1.5;
    font-weight: 400;
}

/* Map container */
.map-container[b-fa6nyl90h0] {
    height: 320px;
    width: 100%;
    position: relative;
    background: var(--ion-color-step-100, var(--ion-background-color-secondary));
    border-top: 1px solid var(--ion-color-step-150, var(--ion-border-color));
    border-bottom: 1px solid var(--ion-color-step-150, var(--ion-border-color));
}

.leaflet-map[b-fa6nyl90h0] {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

/* Override Leaflet styles for theme consistency */
.leaflet-map .leaflet-control-container[b-fa6nyl90h0] {
    filter: var(--ion-color-filter, none);
}

.leaflet-map .leaflet-popup-content-wrapper[b-fa6nyl90h0] {
    background: var(--ion-color-step-50, white) !important;
    color: var(--ion-color-step-850, var(--ion-text-color)) !important;
    box-shadow: var(--ion-box-shadow, 0 4px 16px rgba(0,0,0,0.12)) !important;
    border: 1px solid var(--ion-color-step-200, var(--ion-border-color)) !important;
}

.leaflet-map .leaflet-popup-tip[b-fa6nyl90h0] {
    background: var(--ion-color-step-50, white) !important;
    border: 1px solid var(--ion-color-step-200, var(--ion-border-color)) !important;
}

/* No position state */
.no-position[b-fa6nyl90h0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 240px;
    color: var(--ion-color-step-600, var(--ion-color-medium));
    gap: 20px;
    background: var(--ion-color-step-100, var(--ion-background-color-secondary));
    border-top: 1px solid var(--ion-color-step-150, var(--ion-border-color));
    border-bottom: 1px solid var(--ion-color-step-150, var(--ion-border-color));
}

.no-position ion-icon[b-fa6nyl90h0] {
    font-size: 3em;
    opacity: 0.6;
}

.no-position p[b-fa6nyl90h0] {
    margin: 0;
    text-align: center;
    font-size: 1em;
    font-weight: 400;
}

/* Modal actions */
.modal-actions[b-fa6nyl90h0] {
    display: flex;
    gap: 12px;
    padding: 24px;
    justify-content: flex-end;
    background: var(--ion-color-step-50, var(--ion-background-color));
    border-top: 1px solid var(--ion-color-step-150, var(--ion-border-color));
}

.modal-actions ion-button[b-fa6nyl90h0] {
    --border-radius: 8px;
    --padding-start: 16px;
    --padding-end: 16px;
    --padding-top: 12px;
    --padding-bottom: 12px;
    font-weight: 500;
    text-transform: none;
}

.modal-actions ion-button[fill="outline"][b-fa6nyl90h0] {
    --color: var(--ion-color-step-700, var(--ion-color-primary));
    --border-color: var(--ion-color-step-300, var(--ion-color-primary));
    --background: transparent;
}

.modal-actions ion-button[fill="outline"]:hover[b-fa6nyl90h0] {
    --background: var(--ion-color-step-100, rgba(var(--ion-color-primary-rgb), 0.1));
}

.modal-actions ion-button[fill="solid"][b-fa6nyl90h0] {
    --background: var(--ion-color-primary);
    --color: var(--ion-color-primary-contrast);
}

.modal-actions ion-button[fill="solid"]:hover[b-fa6nyl90h0] {
    --background: var(--ion-color-primary-shade);
}

/* Responsive design */
@media (max-width: 768px) {
    .alert-map-modal[b-fa6nyl90h0] {
        padding: 8px;
        align-items: flex-end;
    }
    
    .modal-content[b-fa6nyl90h0] {
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .alert-map-modal.modal-open .modal-content[b-fa6nyl90h0] {
        transform: translateY(0);
    }
    
    .modal-header[b-fa6nyl90h0] {
        padding: 16px 20px;
    }

    .modal-title[b-fa6nyl90h0] {
        font-size: 1.1em;
    }
    
    .alert-details[b-fa6nyl90h0] {
        padding: 20px;
    }
    
    .map-container[b-fa6nyl90h0] {
        height: 280px;
    }
    
    .modal-actions[b-fa6nyl90h0] {
        flex-direction: column;
        padding: 20px;
        gap: 8px;
    }
    
    .modal-actions ion-button[b-fa6nyl90h0] {
        width: 100%;
        margin: 0;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .modal-header[b-fa6nyl90h0] {
        padding: 12px 16px;
    }

    .modal-title[b-fa6nyl90h0] {
        font-size: 1em;
        gap: 10px;
    }

    .modal-title img[b-fa6nyl90h0] {
        width: 20px;
        height: 20px;
    }

    .alert-details[b-fa6nyl90h0] {
        padding: 16px;
    }

    .detail-item[b-fa6nyl90h0] {
        gap: 12px;
        margin-bottom: 14px;
        font-size: 0.95em;
    }

    .map-container[b-fa6nyl90h0] {
        height: 240px;
    }

    .modal-actions[b-fa6nyl90h0] {
        padding: 16px;
    }
}

/* Animation and interaction improvements */
.modal-content[b-fa6nyl90h0] {
    will-change: transform;
}

.modal-header ion-button[b-fa6nyl90h0] {
    transition: all 0.2s ease;
}

.detail-item[b-fa6nyl90h0] {
    transition: color 0.2s ease;
}

.modal-actions ion-button[b-fa6nyl90h0] {
    transition: all 0.2s ease;
}

/* Focus states for accessibility */
.modal-header ion-button:focus-visible[b-fa6nyl90h0] {
    outline: 2px solid var(--ion-color-primary);
    outline-offset: 2px;
}

.modal-actions ion-button:focus-visible[b-fa6nyl90h0] {
    outline: 2px solid var(--ion-color-primary);
    outline-offset: 2px;
}

/* Loading state for map */
.map-container.loading[b-fa6nyl90h0] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-container.loading[b-fa6nyl90h0]::before {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid var(--ion-color-step-300, var(--ion-color-light));
    border-top: 3px solid var(--ion-color-primary);
    border-radius: 50%;
    animation: spin-b-fa6nyl90h0 1s linear infinite;
}

@keyframes spin-b-fa6nyl90h0 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modal-content[b-fa6nyl90h0] {
        border: 2px solid var(--ion-color-step-400, var(--ion-text-color));
    }

    .modal-header[b-fa6nyl90h0] {
        border-bottom-width: 2px;
    }

    .alert-details[b-fa6nyl90h0] {
        border-bottom-width: 2px;
    }

    .map-container[b-fa6nyl90h0] {
        border-top-width: 2px;
        border-bottom-width: 2px;
    }

    .modal-actions[b-fa6nyl90h0] {
        border-top-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .alert-map-modal[b-fa6nyl90h0],
    .modal-content[b-fa6nyl90h0],
    .modal-header ion-button[b-fa6nyl90h0],
    .detail-item[b-fa6nyl90h0],
    .modal-actions ion-button[b-fa6nyl90h0] {
        transition: none;
    }

    .map-container.loading[b-fa6nyl90h0]::before {
        animation: none;
    }
}
/* /Components/DailyParcSearchOverlay.razor.rz.scp.css */
/* DailyParcSearchOverlay.razor.css */

.daily-parc-search-overlay[b-qpu1safrfs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.overlay-card[b-qpu1safrfs] {
    background: var(--background-color);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
}

/* Variables CSS pour le mode sombre/clair */
.daily-parc-search-overlay[data-theme="light"][b-qpu1safrfs] {
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --primary-color: #007bff;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --hover-color: #f8f9fa;
    --selected-color: #e3f2fd;
    --input-bg: #ffffff;
    --input-border: #ddd;
}

.daily-parc-search-overlay[data-theme="dark"][b-qpu1safrfs] {
    --background-color: #2d2d2d;
    --text-color: #e0e0e0;
    --border-color: #444444;
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --hover-color: #3a3a3a;
    --selected-color: #1e3a5f;
    --input-bg: #3a3a3a;
    --input-border: #555;
}

.close-icon[b-qpu1safrfs] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--danger-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 10;
    transition: all 0.2s ease;
}

.close-icon:hover[b-qpu1safrfs] {
    transform: scale(1.1);
    background: #c82333;
}

.overlay-title[b-qpu1safrfs] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 1.5rem 1.5rem 1rem 1.5rem;
    padding-right: 2rem; /* Pour éviter le conflit avec l'icône de fermeture */
}

.form-group[b-qpu1safrfs] {
    margin: 1.5rem;
}

.form-group label[b-qpu1safrfs] {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Search Container */
.search-container[b-qpu1safrfs] {
    position: relative;
    margin-bottom: 1rem;
}

.search-input[b-qpu1safrfs] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-qpu1safrfs] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-icon[b-qpu1safrfs] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    font-size: 1.1rem;
}

/* Selection Actions */
.selection-actions[b-qpu1safrfs] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.action-btn[b-qpu1safrfs] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.action-btn:hover[b-qpu1safrfs] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

.select-all-btn:hover[b-qpu1safrfs] {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.deselect-all-btn:hover[b-qpu1safrfs] {
    background: var(--warning-color);
    color: white;
    border-color: var(--warning-color);
}

/* Vehicles List */
.vehicles-list[b-qpu1safrfs] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
}

.vehicle-checkbox-item[b-qpu1safrfs] {
    border-bottom: 1px solid var(--border-color);
}

.vehicle-checkbox-item:last-child[b-qpu1safrfs] {
    border-bottom: none;
}

.vehicle-checkbox-label[b-qpu1safrfs] {
    display: block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.vehicle-checkbox-label:hover[b-qpu1safrfs] {
    background: var(--hover-color);
}

.vehicle-checkbox[b-qpu1safrfs] {
    display: none;
}

.vehicle-checkbox-content[b-qpu1safrfs] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    position: relative;
}

.vehicle-brand-icon[b-qpu1safrfs] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: white;
    border: 1px solid var(--border-color);
}

.vehicle-info[b-qpu1safrfs] {
    flex: 1;
    min-width: 0;
}

.vehicle-name[b-qpu1safrfs] {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 2px;
}

.vehicle-details[b-qpu1safrfs] {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 0.85rem;
}

.checkbox-indicator[b-qpu1safrfs] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--input-bg);
}

.checkbox-indicator i[b-qpu1safrfs] {
    font-size: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vehicle-checkbox:checked + .vehicle-checkbox-content[b-qpu1safrfs] {
    background: var(--selected-color);
}

.vehicle-checkbox:checked + .vehicle-checkbox-content .checkbox-indicator[b-qpu1safrfs] {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.vehicle-checkbox:checked + .vehicle-checkbox-content .checkbox-indicator i[b-qpu1safrfs] {
    opacity: 1;
}

/* No vehicles found */
.no-vehicles-found[b-qpu1safrfs] {
    text-align: center;
    padding: 2rem;
    color: var(--text-color);
    opacity: 0.7;
}

.no-vehicles-found i[b-qpu1safrfs] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-vehicles-found p[b-qpu1safrfs] {
    margin: 0;
    font-size: 1rem;
}

/* Selection Summary */
.selection-summary[b-qpu1safrfs] {
    margin-top: 1rem;
    padding: 12px 16px;
    background: var(--selected-color);
    border-radius: 8px;
    border: 1px solid var(--primary-color);
}

.selection-count[b-qpu1safrfs] {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Date Picker Container */
.date-picker-container[b-qpu1safrfs] {
    position: relative;
}

.form-label[b-qpu1safrfs] {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.input-help[b-qpu1safrfs] {
    display: block;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Info Section */
.info-section[b-qpu1safrfs] {
    margin: 1.5rem;
}

.info-card[b-qpu1safrfs] {
    background: var(--hover-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.info-card h4[b-qpu1safrfs] {
    margin: 0 0 0.75rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.info-card p[b-qpu1safrfs] {
    margin: 0.25rem 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

.selected-vehicles-preview ul[b-qpu1safrfs] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.selected-vehicles-preview li[b-qpu1safrfs] {
    margin: 0.25rem 0;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* Button Group */
.button-group[b-qpu1safrfs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-qpu1safrfs] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary[b-qpu1safrfs] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-qpu1safrfs] {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:disabled[b-qpu1safrfs] {
    background: var(--border-color);
    color: var(--text-color);
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-qpu1safrfs] {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-qpu1safrfs] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .overlay-card[b-qpu1safrfs] {
        margin: 0.5rem;
        max-width: none;
        max-height: 95vh;
    }
    
    .overlay-title[b-qpu1safrfs] {
        font-size: 1.3rem;
        margin: 1rem 1rem 0.75rem 1rem;
    }
    
    .form-group[b-qpu1safrfs] {
        margin: 1rem;
    }
    
    .vehicles-list[b-qpu1safrfs] {
        max-height: 250px;
    }
    
    .vehicle-checkbox-content[b-qpu1safrfs] {
        padding: 10px 12px;
    }
    
    .vehicle-brand-icon[b-qpu1safrfs] {
        width: 28px;
        height: 28px;
    }
    
    .button-group[b-qpu1safrfs] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .overlay-card[b-qpu1safrfs] {
        border-radius: 8px;
        margin: 0.25rem;
    }
    
    .overlay-title[b-qpu1safrfs] {
        font-size: 1.2rem;
    }
    
    .vehicle-name[b-qpu1safrfs] {
        font-size: 0.95rem;
    }
    
    .vehicle-details[b-qpu1safrfs] {
        font-size: 0.8rem;
    }
    
    .vehicles-list[b-qpu1safrfs] {
        max-height: 200px;
    }
    
    .selection-actions[b-qpu1safrfs] {
        flex-direction: column;
    }
    
    .action-btn[b-qpu1safrfs] {
        font-size: 0.85rem;
        padding: 10px;
    }
}

/* Animation */
.overlay-card[b-qpu1safrfs] {
    animation: slideIn-b-qpu1safrfs 0.3s ease-out;
}

@keyframes slideIn-b-qpu1safrfs {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Custom scrollbar for vehicles list */
.vehicles-list[b-qpu1safrfs]::-webkit-scrollbar {
    width: 6px;
}

.vehicles-list[b-qpu1safrfs]::-webkit-scrollbar-track {
    background: var(--hover-color);
}

.vehicles-list[b-qpu1safrfs]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.vehicles-list[b-qpu1safrfs]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
/* /Components/EcoDriveMap.razor.rz.scp.css */
/* Composant EcoDriveMap - Carte des trajets avec eco-scores */

.ecodrive-map-container[b-57bx7p7u8w] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.map-header[b-57bx7p7u8w] {
    padding: 16px;
    background: var(--ion-card-background);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--ion-item-border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.map-legend[b-57bx7p7u8w] {
    background: var(--ion-card-background);
    color: var(--ion-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.map-legend h5[b-57bx7p7u8w] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ion-text-color);
}

.legend-items[b-57bx7p7u8w] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.legend-item[b-57bx7p7u8w] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ion-color-step-600);
}

.legend-line[b-57bx7p7u8w] {
    width: 20px;
    height: 4px;
    border-radius: 2px;
}

.legend-line.excellent[b-57bx7p7u8w] {
    background-color: #2DD36F;
}

.legend-line.good[b-57bx7p7u8w] {
    background-color: #FFD500;
}

.legend-line.average[b-57bx7p7u8w] {
    background-color: #FF8C00;
}

.legend-line.poor[b-57bx7p7u8w] {
    background-color: #FF4444;
}

.ecodrive-map[b-57bx7p7u8w] {
    flex: 1;
    min-height: 400px;
    height: 500px;
    width: 100%;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    position: relative;
}

.map-loading[b-57bx7p7u8w],
.map-error[b-57bx7p7u8w],
.map-no-data[b-57bx7p7u8w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--ion-card-background);
    min-height: 300px;
}

.map-loading ion-spinner[b-57bx7p7u8w],
.map-error ion-icon[b-57bx7p7u8w],
.map-no-data ion-icon[b-57bx7p7u8w] {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--ion-color-primary);
    opacity: 0.7;
}

.map-loading p[b-57bx7p7u8w],
.map-error p[b-57bx7p7u8w],
.map-no-data p[b-57bx7p7u8w] {
    margin: 0;
    color: var(--ion-color-step-600);
    font-size: 14px;
    line-height: 1.4;
}

.map-no-data h4[b-57bx7p7u8w] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ion-text-color);
}

.map-error ion-button[b-57bx7p7u8w] {
    margin-top: 16px;
}

.map-stats[b-57bx7p7u8w] {
    display: flex;
    padding: 16px;
    background: var(--ion-card-background);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--ion-item-border-color);
    gap: 20px;
    justify-content: space-around;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stat-item[b-57bx7p7u8w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-value[b-57bx7p7u8w] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ion-text-color);
    line-height: 1;
}

.stat-label[b-57bx7p7u8w] {
    font-size: 12px;
    color: var(--ion-color-step-600);
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .legend-items[b-57bx7p7u8w] {
        gap: 12px;
    }
    
    .legend-item[b-57bx7p7u8w] {
        font-size: 12px;
    }
    
    .ecodrive-map[b-57bx7p7u8w] {
        min-height: 350px;
        height: 400px;
    }
    
    .map-stats[b-57bx7p7u8w] {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .stat-item[b-57bx7p7u8w] {
        flex: 1;
        min-width: 80px;
    }
}

/* Tooltips et popups de la carte */
.trip-popup[b-57bx7p7u8w] {
    font-family: var(--ion-font-family);
    max-width: 250px;
}

.trip-popup h6[b-57bx7p7u8w] {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ion-text-color);
}

.trip-popup .popup-score[b-57bx7p7u8w] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    margin-bottom: 8px;
}

.trip-popup .popup-info[b-57bx7p7u8w] {
    font-size: 12px;
    color: var(--ion-color-step-600);
    line-height: 1.4;
}

.trip-popup .popup-info div[b-57bx7p7u8w] {
    margin-bottom: 4px;
}

.trip-popup .popup-info div:last-child[b-57bx7p7u8w] {
    margin-bottom: 0;
}
/* /Components/HistorySearchOverlay.razor.rz.scp.css */
/* HistorySearchOverlay - Dark/Light Mode Support */

/* Light mode styles (default) */
.overlay-card[b-x4nk6gzdgg] {
    background: white;
    color: #333;
}

.overlay-title[b-x4nk6gzdgg] {
    color: #333;
}

.period-btn[b-x4nk6gzdgg] {
    background: #f8f9fa;
    border-color: #ddd;
    color: #333;
}

.period-btn:hover[b-x4nk6gzdgg] {
    background: #e9ecef;
    border-color: #adb5bd;
}

.validate-btn[b-x4nk6gzdgg] {
    background: #0071c1;
    color: white;
}

.validate-btn:hover[b-x4nk6gzdgg] {
    background: #005a9a;
}

.close-btn[b-x4nk6gzdgg] {
    background: #6c757d;
    color: white;
}

.close-btn:hover[b-x4nk6gzdgg] {
    background: #545b62;
}

.vehicle-dropdown-section label[b-x4nk6gzdgg],
.date-row label[b-x4nk6gzdgg] {
    color: #555;
}

/* Dark mode styles */
[data-theme="dark"] .overlay-card[b-x4nk6gzdgg] {
    background: #2d3748;
    color: #e2e8f0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .overlay-title[b-x4nk6gzdgg] {
    color: #e2e8f0;
}

[data-theme="dark"] .period-btn[b-x4nk6gzdgg] {
    background: #4a5568;
    border-color: #718096;
    color: #e2e8f0;
}

[data-theme="dark"] .period-btn:hover[b-x4nk6gzdgg] {
    background: #5a6478;
    border-color: #a0aec0;
}

[data-theme="dark"] .validate-btn[b-x4nk6gzdgg] {
    background: #3182ce;
    color: white;
}

[data-theme="dark"] .validate-btn:hover[b-x4nk6gzdgg] {
    background: #2c5aa0;
}

[data-theme="dark"] .close-btn[b-x4nk6gzdgg] {
    background: #718096;
    color: white;
}

[data-theme="dark"] .close-btn:hover[b-x4nk6gzdgg] {
    background: #4a5568;
}

[data-theme="dark"] .vehicle-dropdown-section label[b-x4nk6gzdgg],
[data-theme="dark"] .date-row label[b-x4nk6gzdgg] {
    color: #cbd5e0;
}

/* Syncfusion components dark mode support */
[data-theme="dark"] .vehicle-dropdown .e-input-group[b-x4nk6gzdgg],
[data-theme="dark"] .vehicle-dropdown .e-ddl[b-x4nk6gzdgg] {
    background: #4a5568;
    border-color: #718096;
}

[data-theme="dark"] .vehicle-dropdown .e-input[b-x4nk6gzdgg],
[data-theme="dark"] .date-row .e-input[b-x4nk6gzdgg] {
    background: #4a5568 !important;
    border-color: #718096 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .vehicle-dropdown .e-input[b-x4nk6gzdgg]::placeholder,
[data-theme="dark"] .date-row .e-input[b-x4nk6gzdgg]::placeholder {
    color: #a0aec0 !important;
}

[data-theme="dark"] .vehicle-dropdown .e-input:focus[b-x4nk6gzdgg],
[data-theme="dark"] .date-row .e-input:focus[b-x4nk6gzdgg] {
    border-color: #3182ce !important;
    box-shadow: 0 0 0 0.2rem rgba(49, 130, 206, 0.25) !important;
}

/* Vehicle dropdown items dark mode */
[data-theme="dark"] .vehicle-item[b-x4nk6gzdgg] {
    border-bottom-color: #4a5568;
}

[data-theme="dark"] .vehicle-name[b-x4nk6gzdgg] {
    color: #e2e8f0;
}

[data-theme="dark"] .vehicle-details[b-x4nk6gzdgg] {
    color: #cbd5e0;
}

/* Dropdown header dark mode */
[data-theme="dark"] .dropdown-header[b-x4nk6gzdgg] {
    color: #e2e8f0;
}

[data-theme="dark"] .selected-vehicle[b-x4nk6gzdgg] {
    color: #e2e8f0;
}
/* /Components/LoginComponent.razor.rz.scp.css */
/* Dark Theme Login Modal Styles */
.login-modal-overlay[b-9ixxdklhqn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
ion-header[b-9ixxdklhqn] {
    background: transparent;
    backdrop-filter: none;
    flex-shrink: 0;
}

.header-content[b-9ixxdklhqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 15px 20px;
}

.logo-avatar[b-9ixxdklhqn] {
    width: 120px;
    height: 120px;
    /*background-color: #21262D;*/
    padding: 3px;
    border-radius: 50%;
}

.slogan-text[b-9ixxdklhqn] {
    color: #FFFFFF;
    font-size: 0.75em;
    text-align: center;
    margin-top: 8px;
    padding: 0 15px;
    line-height: 1.3;
}

/* Content Styles */
.login-content[b-9ixxdklhqn] {
    --background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-container[b-9ixxdklhqn] {
    background-color: #161B22;
    padding: 15px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
}

.auth-message[b-9ixxdklhqn] {
    color: #A0A0A0;
    display: block;
    text-align: center;
    margin-bottom: 15px;
    font-size: 0.8em;
}

/* List and Item Styles */
.login-list[b-9ixxdklhqn] {
    background-color: transparent;
    padding: 0;
    margin-bottom: 15px;
}

.login-item[b-9ixxdklhqn] {
    --background: #21262D;
    border-radius: 8px;
    margin-bottom: 10px;
    --border-color: transparent;
    --padding-start: 12px;
    --padding-end: 12px;
    --inner-padding-end: 6px;
    --min-height: 44px;
}

.item-icon[b-9ixxdklhqn] {
    color: #A0A0A0;
    margin-right: 8px;
}

.password-toggle[b-9ixxdklhqn] {
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-toggle:hover[b-9ixxdklhqn] {
    color: #F78F1E;
}

/* Input Styles */
ion-input[b-9ixxdklhqn] {
    --color: #FFFFFF;
    --placeholder-color: #888888;
    font-size: 14px;
}

ion-select[b-9ixxdklhqn] {
    --color: #FFFFFF;
    --placeholder-color: #888888;
    font-size: 14px;
}

/* Error Styles */
.error-text[b-9ixxdklhqn] {
    color: #FF6B6B;
    text-align: center;
    display: block;
    margin: 8px 0;
    font-size: 0.8em;
}

/* Options Container */
.options-container[b-9ixxdklhqn] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    padding: 0 5px;
}

/* Toggle Styles */
.toggle-container[b-9ixxdklhqn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.remember-toggle[b-9ixxdklhqn] {
    --handle-background: #FFFFFF;
    --handle-background-checked: #FFFFFF;
    --background: #30363D;
    --background-checked: #F78F1E;
    transform: scale(0.9);
}

.toggle-label[b-9ixxdklhqn] {
    color: #A0A0A0;
    font-size: 0.85em;
}

/* Login Buttons Container */
.login-buttons-container[b-9ixxdklhqn] {
    margin-top: auto;
    padding-bottom: 20px;
}

/* Saved Connection Info */
.saved-connection-info[b-9ixxdklhqn] {
    background-color: #21262D;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-left: 3px solid #F78F1E;
}

.saved-user-text[b-9ixxdklhqn] {
    color: #A0A0A0;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.saved-user-text ion-icon[b-9ixxdklhqn] {
    color: #F78F1E;
    font-size: 1.1em;
}

/* Main Buttons Row */
.main-buttons-row[b-9ixxdklhqn] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Main Connect Button */
.main-connect-button[b-9ixxdklhqn] {
    --background: #F78F1E;
    --background-hover: #E67E00;
    --background-focused: #E67E00;
    --color: #FFFFFF;
    --border-radius: 10px;
    height: 44px;
    font-weight: 600;
    font-size: 0.95em;
    flex: 1;
}

/* Biometric Login Button */
.biometric-login-button[b-9ixxdklhqn] {
    --color: #F78F1E;
    --border-color: #F78F1E;
    --background: transparent;
    --border-radius: 10px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

/* Test Credentials Button */
.test-credentials-button[b-9ixxdklhqn] {
    --color: #888888;
    --background: transparent;
    height: 36px;
    font-size: 0.8em;
    margin-top: 5px;
}

/* Version Text */
.version-text[b-9ixxdklhqn] {
    color: #666666;
    display: block;
    text-align: center;
    font-size: 0.7em;
    margin-top: auto;
    padding-top: 10px;
}

/* Spinner */
ion-spinner[b-9ixxdklhqn] {
    width: 20px;
    height: 20px;
    --color: #FFFFFF;
}

/* Mobile Optimization */
@media (max-height: 700px) {
    .header-content[b-9ixxdklhqn] {
        padding: 15px 20px 10px 20px;
    }
    
    .logo-avatar[b-9ixxdklhqn] {
        width: 45px;
        height: 45px;
    }
    
    .slogan-text[b-9ixxdklhqn] {
        font-size: 0.7em;
        margin-top: 6px;
    }
    
    .form-container[b-9ixxdklhqn] {
        padding: 12px;
    }
    
    .login-item[b-9ixxdklhqn] {
        --min-height: 40px;
        margin-bottom: 8px;
    }
}

@media (max-height: 600px) {
    .header-content[b-9ixxdklhqn] {
        padding: 10px 20px 8px 20px;
    }
    
    .logo-avatar[b-9ixxdklhqn] {
        width: 40px;
        height: 40px;
    }
    
    .slogan-text[b-9ixxdklhqn] {
        font-size: 0.65em;
        margin-top: 4px;
    }
    
    .auth-message[b-9ixxdklhqn] {
        margin-bottom: 10px;
        font-size: 0.75em;
    }
    
    .login-item[b-9ixxdklhqn] {
        --min-height: 38px;
        margin-bottom: 6px;
    }
    
    .main-connect-button[b-9ixxdklhqn] {
        height: 40px;
        font-size: 0.9em;
    }
    
    .biometric-login-button[b-9ixxdklhqn] {
        width: 40px;
        height: 40px;
    }
}

/* Custom Ionic overrides for dark theme */
ion-item[b-9ixxdklhqn] {
    --color: #FFFFFF;
}

ion-label[b-9ixxdklhqn] {
    --color: #FFFFFF;
}

ion-select-option[b-9ixxdklhqn] {
    --color: #000000;
}

/* Focus states */
ion-input:focus-within[b-9ixxdklhqn],
ion-select:focus-within[b-9ixxdklhqn] {
    --border-color: #F78F1E;
}

/* Animation for smooth transitions */
.login-modal-overlay[b-9ixxdklhqn] {
    animation: slideUp-b-9ixxdklhqn 0.3s ease-out;
}

@keyframes slideUp-b-9ixxdklhqn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Biometric Prompt Styles */
.biometric-overlay[b-9ixxdklhqn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: fadeIn-b-9ixxdklhqn 0.3s ease-out;
}

.biometric-modal[b-9ixxdklhqn] {
    background-color: #161B22;
    border-radius: 15px;
    padding: 30px 25px;
    margin: 20px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    border: 1px solid #30363D;
    animation: scaleIn-b-9ixxdklhqn 0.3s ease-out;
}

.biometric-content h3[b-9ixxdklhqn] {
    color: #FFFFFF;
    margin: 15px 0 10px 0;
    font-size: 1.2em;
    font-weight: 600;
}

.biometric-content p[b-9ixxdklhqn] {
    color: #A0A0A0;
    margin: 0 0 25px 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.biometric-icon[b-9ixxdklhqn] {
    font-size: 3em;
    color: #F78F1E;
    margin-bottom: 5px;
}

.biometric-buttons[b-9ixxdklhqn] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.biometric-buttons ion-button[b-9ixxdklhqn] {
    --border-radius: 10px;
    height: 44px;
    font-weight: 500;
    min-width: 100px;
}

.biometric-buttons ion-button[fill="outline"][b-9ixxdklhqn] {
    --color: #A0A0A0;
    --border-color: #30363D;
}

.biometric-buttons ion-button:not([fill="outline"])[b-9ixxdklhqn] {
    --background: #F78F1E;
    --background-hover: #E67E00;
    --color: #FFFFFF;
}

@keyframes fadeIn-b-9ixxdklhqn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-9ixxdklhqn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Auto-login loading styles */
.auto-login-loading[b-9ixxdklhqn] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0D1117 0%, #161B22 100%);
    z-index: 1001;
}

.loading-content[b-9ixxdklhqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.auto-login-spinner[b-9ixxdklhqn] {
    --color: #F78F1E;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

.loading-message h3[b-9ixxdklhqn] {
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.loading-message p[b-9ixxdklhqn] {
    color: #A0A0A0;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}
/* /Components/MenuComponent.razor.rz.scp.css */
:root[b-6iiscyqvfo] {
    --dashboard-padding: 16px;
}

.menu-section[b-6iiscyqvfo] {
    margin-bottom: 24px;
    height: auto;
    min-height: 0;
}

.menu-section-title[b-6iiscyqvfo] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 12px 8px;
    color: var(--text-primary);
}

.menu-grid[b-6iiscyqvfo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    padding: 0 var(--dashboard-padding);
    height: auto;
    min-height: 0;
}

@media (max-width: 700px) {
    .menu-grid[b-6iiscyqvfo] {
        grid-template-columns: repeat(2, 1fr);
    }
} 

.menu-card[b-6iiscyqvfo] {
    border-radius: 18px;
    box-shadow: none;
    transition: transform 0.1s;
    cursor: pointer;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin:5px;
    opacity: 0;
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

.menu-card:hover[b-6iiscyqvfo] {
    transform: scale(1.02);
}

.menu-card:active[b-6iiscyqvfo] {
    transform: scale(0.98);
}

    .menu-card .card-content-inner[b-6iiscyqvfo] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .menu-card .menu-card-icon[b-6iiscyqvfo] {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    .menu-card .menu-card-label[b-6iiscyqvfo] {
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
        margin-bottom: 0;
    }

    .menu-card .menu-card-sub[b-6iiscyqvfo] {
        font-size: 0.8rem;
        color: var(--ion-color-medium, #888);
        text-align: center;
    }
      
.card-effect-bg[b-6iiscyqvfo] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto;
    opacity: 0.09;
    pointer-events: none;
    border-radius: 18px; 
    z-index: 1;
}


.menu-card .card-content-inner[b-6iiscyqvfo] {
  position: relative;
  z-index: 2;
}

ion-content[b-6iiscyqvfo] {
    --background: var(--background-primary);
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
}

@media (max-width: 500px) {
    .menu-grid[b-6iiscyqvfo] {
        grid-template-columns: 1fr;
    }
}

ion-header[b-6iiscyqvfo] {
    --background: var(--background-secondary);
}

ion-title[b-6iiscyqvfo] {
    color: var(--text-primary);
}

ion-header ion-button[b-6iiscyqvfo] {
    --color: var(--text-primary);
}

ion-header ion-button:hover[b-6iiscyqvfo] {
    --background: var(--background-tertiary);
}

.menu-grid-reports[b-6iiscyqvfo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    padding: 0 var(--dashboard-padding);
    height: auto;
    min-height: 0;
}

menu-section-last[b-6iiscyqvfo] {
    height: 120px;
    background-color: red
}

.menu-grid-3-rep[b-6iiscyqvfo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    padding: 0 var(--dashboard-padding);
    height: auto;
    min-height: 0;
}

.menu-grid-2-rep[b-6iiscyqvfo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    padding: 0 var(--dashboard-padding);
    height: auto;
    min-height: 0;
}

/* Animations d'entrée pour cards */
@keyframes card-fade-in-b-6iiscyqvfo {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes card-slide-up-b-6iiscyqvfo {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes card-rotate-in-b-6iiscyqvfo {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes card-slide-left-b-6iiscyqvfo {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes card-scale-in-b-6iiscyqvfo {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.menu-card.anim-fade[b-6iiscyqvfo] { animation-name: card-fade-in-b-6iiscyqvfo; }
.menu-card.anim-slide-up[b-6iiscyqvfo] { animation-name: card-slide-up-b-6iiscyqvfo; }
.menu-card.anim-rotate[b-6iiscyqvfo] { animation-name: card-rotate-in-b-6iiscyqvfo; }
.menu-card.anim-slide-left[b-6iiscyqvfo] { animation-name: card-slide-left-b-6iiscyqvfo; }
.menu-card.anim-scale[b-6iiscyqvfo] { animation-name: card-scale-in-b-6iiscyqvfo; }

/* Delays pour effet cascade/aléatoire */
.menu-card.anim-delay-0[b-6iiscyqvfo] { animation-delay: 0.05s; }
.menu-card.anim-delay-1[b-6iiscyqvfo] { animation-delay: 0.12s; }
.menu-card.anim-delay-2[b-6iiscyqvfo] { animation-delay: 0.19s; }
.menu-card.anim-delay-3[b-6iiscyqvfo] { animation-delay: 0.26s; }
.menu-card.anim-delay-4[b-6iiscyqvfo] { animation-delay: 0.33s; }
.menu-card.anim-delay-5[b-6iiscyqvfo] { animation-delay: 0.40s; }
.menu-card.anim-delay-6[b-6iiscyqvfo] { animation-delay: 0.47s; }
.menu-card.anim-delay-7[b-6iiscyqvfo] { animation-delay: 0.54s; }
.menu-card.anim-delay-8[b-6iiscyqvfo] { animation-delay: 0.61s; }
.menu-card.anim-delay-9[b-6iiscyqvfo] { animation-delay: 0.68s; }

/* Loading spinner styles */
.loading-spinner[b-6iiscyqvfo] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.loading-spinner ion-spinner[b-6iiscyqvfo] {
    --color: var(--text-primary);
    width: 40px;
    height: 40px;
}

/* Styles pour les cartes désactivées */
.menu-card-disabled[b-6iiscyqvfo] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    position: relative;
}

.menu-card-disabled:hover[b-6iiscyqvfo] {
    transform: none !important;
}

.menu-card-disabled:active[b-6iiscyqvfo] {
    transform: none !important;
}

.menu-card-disabled[b-6iiscyqvfo]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.1) 2px,
        rgba(255, 255, 255, 0.1) 4px
    );
    border-radius: 18px;
    z-index: 3;
    pointer-events: none;
}

.service-unavailable-badge[b-6iiscyqvfo] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--ion-color-warning, #ffc409);
    color: var(--ion-color-warning-contrast, #000);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 4;
}
/* /Components/MonthlyParcSearchOverlay.razor.rz.scp.css */
/* MonthlyParcSearchOverlay.razor.css */

.monthly-parc-search-overlay[b-lvmxcvj0et] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.overlay-card[b-lvmxcvj0et] {
    background: var(--background-color);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color);
}

/* Variables CSS pour le mode sombre/clair */
.monthly-parc-search-overlay[data-theme="light"][b-lvmxcvj0et] {
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --primary-color: #007bff;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --hover-color: #f8f9fa;
    --selected-color: #e3f2fd;
    --input-bg: #ffffff;
    --input-border: #ddd;
}

.monthly-parc-search-overlay[data-theme="dark"][b-lvmxcvj0et] {
    --background-color: #2d2d2d;
    --text-color: #e0e0e0;
    --border-color: #444444;
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --hover-color: #3a3a3a;
    --selected-color: #1e3a5f;
    --input-bg: #3a3a3a;
    --input-border: #555;
}

.close-icon[b-lvmxcvj0et] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--danger-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 10;
    transition: all 0.2s ease;
}

.close-icon:hover[b-lvmxcvj0et] {
    transform: scale(1.1);
    background: #c82333;
}

.overlay-title[b-lvmxcvj0et] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 1.5rem 1.5rem 1rem 1.5rem;
    padding-right: 2rem; /* Pour éviter le conflit avec l'icône de fermeture */
}

.form-group[b-lvmxcvj0et] {
    margin: 1.5rem;
}

.form-group label[b-lvmxcvj0et] {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

/* Search Container */
.search-container[b-lvmxcvj0et] {
    position: relative;
    margin-bottom: 1rem;
}

.search-input[b-lvmxcvj0et] {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.search-input:focus[b-lvmxcvj0et] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-icon[b-lvmxcvj0et] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    font-size: 1.1rem;
}

/* Selection Actions */
.selection-actions[b-lvmxcvj0et] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.action-btn[b-lvmxcvj0et] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.action-btn:hover[b-lvmxcvj0et] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

.select-all-btn:hover[b-lvmxcvj0et] {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.deselect-all-btn:hover[b-lvmxcvj0et] {
    background: var(--warning-color);
    color: white;
    border-color: var(--warning-color);
}

/* Vehicles List */
.vehicles-list[b-lvmxcvj0et] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
}

.vehicle-checkbox-item[b-lvmxcvj0et] {
    border-bottom: 1px solid var(--border-color);
}

.vehicle-checkbox-item:last-child[b-lvmxcvj0et] {
    border-bottom: none;
}

.vehicle-checkbox-label[b-lvmxcvj0et] {
    display: block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.vehicle-checkbox-label:hover[b-lvmxcvj0et] {
    background: var(--hover-color);
}

.vehicle-checkbox[b-lvmxcvj0et] {
    display: none;
}

.vehicle-checkbox-content[b-lvmxcvj0et] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    position: relative;
}

.vehicle-brand-icon[b-lvmxcvj0et] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: contain;
    background: white;
    border: 1px solid var(--border-color);
}

.vehicle-info[b-lvmxcvj0et] {
    flex: 1;
    min-width: 0;
}

.vehicle-name[b-lvmxcvj0et] {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 2px;
}

.vehicle-details[b-lvmxcvj0et] {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 0.9rem;
}

.checkbox-indicator[b-lvmxcvj0et] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--input-bg);
}

.checkbox-indicator i[b-lvmxcvj0et] {
    font-size: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vehicle-checkbox:checked + .vehicle-checkbox-content[b-lvmxcvj0et] {
    background: var(--selected-color);
}

.vehicle-checkbox:checked + .vehicle-checkbox-content .checkbox-indicator[b-lvmxcvj0et] {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.vehicle-checkbox:checked + .vehicle-checkbox-content .checkbox-indicator i[b-lvmxcvj0et] {
    opacity: 1;
}

/* No vehicles found */
.no-vehicles-found[b-lvmxcvj0et] {
    text-align: center;
    padding: 2rem;
    color: var(--text-color);
    opacity: 0.7;
}

.no-vehicles-found i[b-lvmxcvj0et] {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-vehicles-found p[b-lvmxcvj0et] {
    margin: 0;
    font-size: 1rem;
}

/* Selection Summary */
.selection-summary[b-lvmxcvj0et] {
    margin-top: 1rem;
    padding: 12px 16px;
    background: var(--selected-color);
    border-radius: 8px;
    border: 1px solid var(--primary-color);
}

.selection-count[b-lvmxcvj0et] {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Date Picker Container */
.date-picker-container[b-lvmxcvj0et] {
    position: relative;
}

.form-label[b-lvmxcvj0et] {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.input-help[b-lvmxcvj0et] {
    display: block;
    color: var(--text-color);
    opacity: 0.6;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Info Section */
.info-section[b-lvmxcvj0et] {
    margin: 1.5rem;
}

.info-card[b-lvmxcvj0et] {
    background: var(--hover-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

.info-card h4[b-lvmxcvj0et] {
    margin: 0 0 0.75rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.info-card p[b-lvmxcvj0et] {
    margin: 0.25rem 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

.selected-vehicles-preview ul[b-lvmxcvj0et] {
    margin: 0.5rem 0 0 0;
    padding-left: 1.25rem;
}

.selected-vehicles-preview li[b-lvmxcvj0et] {
    margin: 0.25rem 0;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* Button Group */
.button-group[b-lvmxcvj0et] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-lvmxcvj0et] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary[b-lvmxcvj0et] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-lvmxcvj0et] {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-primary:disabled[b-lvmxcvj0et] {
    background: var(--border-color);
    color: var(--text-color);
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-lvmxcvj0et] {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-lvmxcvj0et] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .overlay-card[b-lvmxcvj0et] {
        margin: 0.5rem;
        max-width: none;
        max-height: 95vh;
    }
    
    .overlay-title[b-lvmxcvj0et] {
        font-size: 1.3rem;
        margin: 1rem 1rem 0.75rem 1rem;
    }
    
    .form-group[b-lvmxcvj0et] {
        margin: 1rem;
    }
    
    .vehicles-list[b-lvmxcvj0et] {
        max-height: 250px;
    }
    
    .vehicle-checkbox-content[b-lvmxcvj0et] {
        padding: 10px 12px;
    }
    
    .vehicle-brand-icon[b-lvmxcvj0et] {
        width: 28px;
        height: 28px;
    }
    
    .button-group[b-lvmxcvj0et] {
        padding: 1rem;
        gap: 0.5rem;
    }
    
    .selection-actions[b-lvmxcvj0et] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .monthly-parc-search-overlay[b-lvmxcvj0et] {
        padding: 0.5rem;
    }
    
    .overlay-card[b-lvmxcvj0et] {
        margin: 0;
        border-radius: 12px;
    }
    
    .overlay-title[b-lvmxcvj0et] {
        font-size: 1.2rem;
        margin: 0.75rem 0.75rem 0.5rem 0.75rem;
    }
    
    .form-group[b-lvmxcvj0et] {
        margin: 0.75rem;
    }
    
    .vehicles-list[b-lvmxcvj0et] {
        max-height: 200px;
    }
    
    .vehicle-checkbox-content[b-lvmxcvj0et] {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .vehicle-brand-icon[b-lvmxcvj0et] {
        width: 24px;
        height: 24px;
    }
    
    .vehicle-name[b-lvmxcvj0et] {
        font-size: 0.9rem;
    }
    
    .vehicle-details[b-lvmxcvj0et] {
        font-size: 0.8rem;
    }
    
    .checkbox-indicator[b-lvmxcvj0et] {
        width: 20px;
        height: 20px;
    }
    
    .checkbox-indicator i[b-lvmxcvj0et] {
        font-size: 12px;
    }
    
    .btn[b-lvmxcvj0et] {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .action-btn[b-lvmxcvj0et] {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* Syncfusion DatePicker customization */
[b-lvmxcvj0et] .date-picker {
    width: 100%;
}

[b-lvmxcvj0et] .date-picker .e-input-group {
    border: 2px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
}

[b-lvmxcvj0et] .date-picker .e-input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

[b-lvmxcvj0et] .date-picker .e-input {
    padding: 12px 16px;
    font-size: 1rem;
    color: var(--text-color);
    background: transparent;
    border: none;
}

[b-lvmxcvj0et] .date-picker .e-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

[b-lvmxcvj0et] .date-picker .e-input-group-icon {
    color: var(--text-color);
    opacity: 0.6;
    font-size: 1.1rem;
}

/* Scrollbar customization */
.vehicles-list[b-lvmxcvj0et]::-webkit-scrollbar {
    width: 6px;
}

.vehicles-list[b-lvmxcvj0et]::-webkit-scrollbar-track {
    background: var(--hover-color);
    border-radius: 3px;
}

.vehicles-list[b-lvmxcvj0et]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.vehicles-list[b-lvmxcvj0et]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.overlay-card[b-lvmxcvj0et]::-webkit-scrollbar {
    width: 6px;
}

.overlay-card[b-lvmxcvj0et]::-webkit-scrollbar-track {
    background: var(--hover-color);
    border-radius: 3px;
}

.overlay-card[b-lvmxcvj0et]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.overlay-card[b-lvmxcvj0et]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
/* /Components/NotificationSettingsModal.razor.rz.scp.css */
.notification-settings-content[b-98im3duc2m] {
    --background: var(--ion-background-color);
    --color: var(--ion-text-color);
}

.loading-container[b-98im3duc2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-container ion-spinner[b-98im3duc2m] {
    margin-bottom: 1rem;
    --color: var(--ion-color-primary);
}

.loading-container p[b-98im3duc2m] {
    color: var(--ion-color-medium);
    margin: 0;
}

.error-container[b-98im3duc2m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.error-container ion-icon[b-98im3duc2m] {
    color: var(--ion-color-danger);
    margin-bottom: 1rem;
}

.error-container p[b-98im3duc2m] {
    color: var(--ion-color-medium);
    margin-bottom: 1.5rem;
}

.save-button-container[b-98im3duc2m] {
    padding: 1rem;
    background: var(--ion-background-color);
    border-top: 1px solid var(--ion-color-light);
    margin-top: 1rem;
}

/* Styles pour les items */
ion-item[b-98im3duc2m] {
    --border-color: var(--ion-color-light);
    --background: var(--ion-background-color);
    --color: var(--ion-text-color);
    --padding-start: 16px;
    --padding-end: 16px;
}

ion-item ion-label[b-98im3duc2m] {
    font-weight: 500;
}

ion-item ion-toggle[b-98im3duc2m] {
    --background: var(--ion-color-light);
    --background-checked: var(--ion-color-primary);
    --handle-background: var(--ion-color-light-contrast);
    --handle-background-checked: var(--ion-color-primary-contrast);
}

ion-item ion-select[b-98im3duc2m] {
    --color: var(--ion-text-color);
}

ion-item ion-input[b-98im3duc2m] {
    --color: var(--ion-text-color);
    --placeholder-color: var(--ion-color-medium);
}

/* Responsive design */
@media (max-width: 768px) {
    .save-button-container[b-98im3duc2m] {
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }
}

/* Animation pour l'apparition du modal */
ion-modal[b-98im3duc2m] {
    --border-radius: 16px 16px 0 0;
}

@media (min-width: 768px) {
    ion-modal[b-98im3duc2m] {
        --border-radius: 16px;
        --width: 500px;
        --height: auto;
        --max-height: 80vh;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .save-button-container[b-98im3duc2m] {
        border-top-color: var(--ion-color-dark);
    }
}
/* /Components/RealtimeMap.razor.rz.scp.css */
.realtime-map-root[b-dg55qr2ija] {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: var(--map-bg, #fff);
}
.realtime-map-header[b-dg55qr2ija] {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px 12px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 60px;
}
.realtime-map-title[b-dg55qr2ija] {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 32px;
}
.realtime-map-back-btn[b-dg55qr2ija] {
    background: none;
    border: none;
    color: inherit;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    height: 40px;
    width: 40px;
}
.realtime-map-actions[b-dg55qr2ija] {
    display: flex;
    gap: 8px;
}
.realtime-map-action[b-dg55qr2ija] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}
 

.vehicle-details-drawer[b-dg55qr2ija] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -350px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.13);
    transition: bottom 0.35s cubic-bezier(.4,1.4,.6,1);
    z-index: 2001;
    min-height: 180px;
    max-height: 60vh;
    padding-bottom: 16px;
    will-change: bottom;
    pointer-events: none;
}

/* Dark mode pour le drawer */
[data-theme="dark"] .vehicle-details-drawer[b-dg55qr2ija] {
    background: #1e1e1e;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.3);
}
.vehicle-details-drawer.open[b-dg55qr2ija] {
    bottom: 0;
    pointer-events: auto;
}
.drawer-content[b-dg55qr2ija] {
    padding: 18px 24px 0 24px;
}
.drawer-header[b-dg55qr2ija] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.drawer-title[b-dg55qr2ija] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
}

/* Dark mode pour le titre du drawer */
[data-theme="dark"] .drawer-title[b-dg55qr2ija] {
    color: #fff;
}
.drawer-close-btn[b-dg55qr2ija] {
    background: none;
    border: none;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

/* Dark mode pour le bouton de fermeture */
[data-theme="dark"] .drawer-close-btn[b-dg55qr2ija] {
    color: #aaa;
}
.drawer-details[b-dg55qr2ija] {
    font-size: 1.05rem;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Dark mode pour les détails du drawer */
[data-theme="dark"] .drawer-details[b-dg55qr2ija] {
    color: #ccc;
}


/* Bouton flottant pour le fond de carte (Ionic style) */
.map-base-layer-fab[b-dg55qr2ija] {
    position: fixed;
    bottom: 30%;
    right: 24px;
    z-index: 1200;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2DD36F 60%, #3880ff 100%);
    color: #ffff;
    border: none;
    box-shadow: 0 4px 16px rgba(56,128,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    cursor: pointer;
    transition: box-shadow 0.18s, background 0.18s, transform 0.12s;
}

.map-base-layer-fab:hover[b-dg55qr2ija] {
        box-shadow: 0 8px 24px rgba(45,211,111,0.22);
        background: linear-gradient(135deg, #3880ff 60%, #2DD36F 100%);
        transform: scale(1.07);
    }


.show-details-btn[b-dg55qr2ija] {
    position: fixed;
    bottom: 30%;
    right: 24px;
    z-index: 1200;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2DD36F 60%, #3880ff 100%);
    color: #ffff;
    border: none;
    box-shadow: 0 4px 16px rgba(56,128,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9em;
    cursor: pointer;
    transition: box-shadow 0.18s, background 0.18s, transform 0.12s;
}

    .show-details-btn:hover[b-dg55qr2ija] {
        box-shadow: 0 8px 24px rgba(45,211,111,0.22);
        background: linear-gradient(135deg, #3880ff 60%, #2DD36F 100%);
        transform: scale(1.07);
    }

@media (max-width: 600px) {
    .map-base-layer-fab[b-dg55qr2ija] {
        bottom: 10%;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 1.2em;
    }

    .show-details-btn[b-dg55qr2ija] {
        bottom: 16%;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 1.9em;
    }
}

.map-overlay-controls[b-dg55qr2ija] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
}

.overlay-btn[b-dg55qr2ija] {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(56,128,255,0.10);
    font-size: 1.3em;
    color: #3880ff;
    cursor: pointer;
    transition: background 0.15s;
}

    .overlay-btn:hover[b-dg55qr2ija] {
        background: #e0e0e0;
    }

/* Dark mode pour les boutons overlay */
[data-theme="dark"] .overlay-btn[b-dg55qr2ija] {
    background: #2a2a2a;
    color: #2dd36f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .overlay-btn:hover[b-dg55qr2ija] {
    background: #3a3a3a;
}
/* /Components/RealtimeVehicleCard.razor.rz.scp.css */
.realtime-filter-menu[b-84vb9l27mo] {
    position: absolute;
    top: 60px;
    right: 24px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    z-index: 9999;
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid #e0e0e0;
}

/* Dark mode pour le menu de filtre */
[data-theme="dark"] .realtime-filter-menu[b-84vb9l27mo] {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.realtime-sort-menu[b-84vb9l27mo] {
    position: absolute;
    top: 60px;
    right: 24px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    z-index: 9999;
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid #e0e0e0;
}

/* Dark mode pour le menu de tri */
[data-theme="dark"] .realtime-sort-menu[b-84vb9l27mo] {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.realtime-sort-title[b-84vb9l27mo] {
    font-weight: 600;
    font-size: 1.08rem;
    padding: 8px 18px 6px 18px;
    color: #2DD36F;
}

.realtime-sort-item[b-84vb9l27mo] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 18px;
    font-size: 1rem;
    color: #222;
    cursor: pointer;
    transition: background 0.15s;
}

    .realtime-sort-item:hover[b-84vb9l27mo] {
        background: #f4f5f7;
    }

/* Dark mode pour les éléments de tri */
[data-theme="dark"] .realtime-sort-item[b-84vb9l27mo] {
    color: #fff;
}

[data-theme="dark"] .realtime-sort-item:hover[b-84vb9l27mo] {
    background: #3a3a3a;
}

.realtime-icon-bg[b-84vb9l27mo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    background: var(--icon-bg, #e0e0e0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: background 0.2s;
}

.realtime-root[b-84vb9l27mo] {
    min-height: 100vh;
    padding-bottom: 32px;
}

.realtime-header[b-84vb9l27mo] {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px 12px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.realtime-header-title[b-84vb9l27mo] {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 32px;
}

.realtime-back-btn[b-84vb9l27mo] {
    background: none;
    border: none;
    color: inherit;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    height: 40px;
    width: 40px;
}

.realtime-header-actions[b-84vb9l27mo] {
    display: flex;
    gap: 8px;
}

.realtime-header-action[b-84vb9l27mo] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

.realtime-segment[b-84vb9l27mo] {
    display: flex;
    gap: 8px;
    margin: 16px 0 8px 0;
    justify-content: center;
}

.realtime-segment-btn[b-84vb9l27mo] {
    border: none;
    border-radius: 16px;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .realtime-segment-btn.active[b-84vb9l27mo] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

.realtime-list-container[b-84vb9l27mo] {
    background: none;
    margin: 0 0 12px 0;
    max-height: 80vh;
    overflow-y: auto;
}

.realtime-list-summary[b-84vb9l27mo] {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #6C757D;
}

.realtime-search[b-84vb9l27mo] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    margin-bottom: 12px;
    font-size: 1rem;
}

.realtime-vehicle-list[b-84vb9l27mo] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.realtime-vehicle-card[b-84vb9l27mo] {
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 16px 14px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    width: 100% !important;
}

/* Dark mode pour les cartes de véhicules */
[data-theme="dark"] .realtime-vehicle-card[b-84vb9l27mo] {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.realtime-vehicle-main[b-84vb9l27mo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.realtime-vehicle-info[b-84vb9l27mo] {
    flex: 1;
}

.realtime-vehicle-title[b-84vb9l27mo] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

/* Dark mode pour le titre du véhicule */
[data-theme="dark"] .realtime-vehicle-title[b-84vb9l27mo] {
    color: #fff;
}

.realtime-vehicle-speed[b-84vb9l27mo] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
}

/* Dark mode pour la vitesse */
[data-theme="dark"] .realtime-vehicle-speed[b-84vb9l27mo] {
    color: #fff;
}

.realtime-vehicle-unit[b-84vb9l27mo] {
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

.realtime-vehicle-status-dot[b-84vb9l27mo] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 8px;
}

.realtime-vehicle-details[b-84vb9l27mo] {
    display: grid;
    gap: 6px;
    font-size: 0.98rem;
    color: #888;
}

.realtime-vehicle-detail ion-icon[b-84vb9l27mo] {
    font-size: 1.4rem;
}

.realtime-vehicle-status-icons[b-84vb9l27mo] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

    .realtime-vehicle-status-icons ion-icon[b-84vb9l27mo] {
        font-size: 1.3rem;
        opacity: 0.5;
        transition: opacity 0.2s;
    }

        .realtime-vehicle-status-icons ion-icon.active[b-84vb9l27mo] {
            opacity: 1;
            color: #2DD36F;
        }

.realtime-map-placeholder[b-84vb9l27mo] {
    text-align: center;
    color: #888;
    font-size: 1.2rem;
    margin-top: 40px;
}
/* /Components/Report360SearchOverlay.razor.rz.scp.css */
/* Report 360 Search Overlay Styles */
.report-360-search-overlay[b-2honhsblpy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.overlay-card[b-2honhsblpy] {
    background: var(--ion-background-color);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--ion-color-light);
    position: relative;
    animation: slideIn-b-2honhsblpy 0.3s ease-out;
}

@keyframes slideIn-b-2honhsblpy {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.close-icon[b-2honhsblpy] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: var(--ion-color-light);
    color: var(--ion-color-medium);
    font-size: 20px;
    font-weight: bold;
    transition: all 0.2s ease;
    z-index: 1;
}

.close-icon:hover[b-2honhsblpy] {
    background: var(--ion-color-danger);
    color: white;
    transform: scale(1.1);
}

.overlay-title[b-2honhsblpy] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ion-color-primary);
    margin-bottom: 24px;
    text-align: center;
    padding-right: 40px; /* Space for close button */
}

/* Form Groups */
.form-group[b-2honhsblpy] {
    margin-bottom: 20px;
}

.form-group label[b-2honhsblpy],
.form-label[b-2honhsblpy] {
    display: block;
    font-weight: 600;
    color: var(--ion-text-color);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Date Picker Container */
.date-picker-container[b-2honhsblpy] {
    width: 100%;
}

.input-help[b-2honhsblpy] {
    display: block;
    font-size: 0.8rem;
    color: var(--ion-color-medium);
    margin-top: 4px;
    font-style: italic;
}

/* Vehicle Dropdown Styles */
[b-2honhsblpy] .vehicle-dropdown {
    width: 100% !important;
    border-radius: 8px !important;
}

.vehicle-item[b-2honhsblpy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.vehicle-brand-icon[b-2honhsblpy] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: contain;
}

.vehicle-info[b-2honhsblpy] {
    flex: 1;
}

.vehicle-name[b-2honhsblpy] {
    font-weight: 600;
    color: var(--ion-text-color);
    margin-bottom: 2px;
    font-size: 0.95rem;
}

.vehicle-details[b-2honhsblpy] {
    font-size: 0.85rem;
    color: var(--ion-color-medium);
}

.dropdown-header[b-2honhsblpy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ion-color-light);
    border-radius: 6px;
    margin-bottom: 8px;
}

.header-icon[b-2honhsblpy] {
    font-size: 1.1rem;
}

.header-text[b-2honhsblpy] {
    font-weight: 600;
    color: var(--ion-color-medium);
    font-size: 0.9rem;
}

.selected-vehicle[b-2honhsblpy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-brand-icon[b-2honhsblpy] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: contain;
}

.selected-name[b-2honhsblpy] {
    font-weight: 500;
    color: var(--ion-text-color);
}

/* Info Section */
.info-section[b-2honhsblpy] {
    margin: 20px 0;
}

.info-card[b-2honhsblpy] {
    background: var(--ion-color-light-tint);
    border-radius: 12px;
    padding: 16px;
    border-left: 4px solid var(--ion-color-primary);
}

.info-card h4[b-2honhsblpy] {
    margin: 0 0 12px 0;
    color: var(--ion-color-primary);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-card p[b-2honhsblpy] {
    margin: 6px 0;
    font-size: 0.9rem;
    color: var(--ion-text-color);
}

.info-card p strong[b-2honhsblpy] {
    color: var(--ion-color-primary);
    font-weight: 600;
}

/* Button Group */
.button-group[b-2honhsblpy] {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.btn[b-2honhsblpy] {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-primary[b-2honhsblpy] {
    background: var(--ion-color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2honhsblpy] {
    background: var(--ion-color-primary-shade);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
}

.btn-primary:disabled[b-2honhsblpy] {
    background: var(--ion-color-light);
    color: var(--ion-color-medium);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-secondary[b-2honhsblpy] {
    background: transparent;
    color: var(--ion-color-medium);
    border: 2px solid var(--ion-color-light);
}

.btn-secondary:hover[b-2honhsblpy] {
    background: var(--ion-color-light);
    color: var(--ion-text-color);
    transform: translateY(-2px);
}

/* Dark Theme Adjustments */
[data-theme="dark"] .overlay-card[b-2honhsblpy] {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .close-icon[b-2honhsblpy] {
    background: #404040;
    color: #cccccc;
}

[data-theme="dark"] .close-icon:hover[b-2honhsblpy] {
    background: var(--ion-color-danger);
    color: white;
}

[data-theme="dark"] .info-card[b-2honhsblpy] {
    background: #3a3a3a;
    border-left-color: var(--ion-color-primary);
}

[data-theme="dark"] .dropdown-header[b-2honhsblpy] {
    background: #404040;
}

[data-theme="dark"] .btn-secondary[b-2honhsblpy] {
    border-color: #404040;
    color: #cccccc;
}

[data-theme="dark"] .btn-secondary:hover[b-2honhsblpy] {
    background: #404040;
    color: white;
}

/* Syncfusion Component Overrides */
[b-2honhsblpy] .e-input-group.e-control-wrapper,
[b-2honhsblpy] .e-ddl.e-control-wrapper {
    border-radius: 8px !important;
    border: 2px solid var(--ion-color-light) !important;
    background: var(--ion-item-background, var(--ion-background-color)) !important;
}

[b-2honhsblpy] .e-input-group.e-control-wrapper:hover,
[b-2honhsblpy] .e-ddl.e-control-wrapper:hover {
    border-color: var(--ion-color-primary) !important;
}

[b-2honhsblpy] .e-input-group.e-control-wrapper.e-input-focus,
[b-2honhsblpy] .e-ddl.e-control-wrapper.e-input-focus {
    border-color: var(--ion-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--ion-color-primary-rgb), 0.1) !important;
}

[b-2honhsblpy] .e-input,
[b-2honhsblpy] .e-ddl .e-input {
    background: transparent !important;
    color: var(--ion-text-color) !important;
    font-size: 0.95rem !important;
}

[b-2honhsblpy] .e-calendar {
    border: 1px solid var(--ion-color-light) !important;
    border-radius: 8px !important;
    background: var(--ion-background-color) !important;
}

/* Dark theme for Syncfusion components */
[data-theme="dark"][b-2honhsblpy]  .e-input-group.e-control-wrapper,
[data-theme="dark"][b-2honhsblpy]  .e-ddl.e-control-wrapper {
    border-color: #404040 !important;
    background: #2d2d2d !important;
}

[data-theme="dark"][b-2honhsblpy]  .e-input,
[data-theme="dark"][b-2honhsblpy]  .e-ddl .e-input {
    color: #ffffff !important;
}

[data-theme="dark"][b-2honhsblpy]  .e-calendar {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

/* Responsive Design */
@media (max-width: 600px) {
    .report-360-search-overlay[b-2honhsblpy] {
        padding: 16px;
    }
    
    .overlay-card[b-2honhsblpy] {
        padding: 20px;
        max-height: 95vh;
    }
    
    .overlay-title[b-2honhsblpy] {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    
    .button-group[b-2honhsblpy] {
        flex-direction: column;
    }
    
    .btn[b-2honhsblpy] {
        padding: 14px 20px;
    }
}
/* /Components/ReportAnnualSearchOverlay.razor.rz.scp.css */
/* Overlay pour Rapport Annuel - Support Dark/Light Mode */
.report-annual-search-overlay[b-tis6fge06f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.overlay-card[b-tis6fge06f] {
    border-radius: 15px;
    padding: 25px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid #F5A623;
    transition: background-color 0.3s ease;
}

/* Light theme overlay */
[data-theme="light"] .overlay-card[b-tis6fge06f] {
    background: #ffffff;
}

/* Dark theme overlay */
[data-theme="dark"] .overlay-card[b-tis6fge06f] {
    background: #1E1E1E;
}

.overlay-title[b-tis6fge06f] {
    color: #F5A623;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.overlay-title[b-tis6fge06f]::before {
    content: "📊";
    font-size: 24px;
}

/* Section Véhicule - Support Dark/Light Mode */
.vehicle-dropdown-section[b-tis6fge06f] {
    margin-bottom: 20px;
}

[data-theme="light"] .vehicle-dropdown-section label[b-tis6fge06f] {
    display: block;
    color: #000000;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

[data-theme="dark"] .vehicle-dropdown-section label[b-tis6fge06f] {
    display: block;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

/* Section Année - Support Dark/Light Mode */
.year-dropdown-section[b-tis6fge06f] {
    margin-bottom: 20px;
}

[data-theme="light"] .year-dropdown-section label[b-tis6fge06f] {
    display: block;
    color: #000000;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

[data-theme="dark"] .year-dropdown-section label[b-tis6fge06f] {
    display: block;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

/* Customisation des dropdowns Syncfusion - Support Dark/Light Mode */

/* Light theme dropdowns */
[data-theme="light"] .vehicle-dropdown .e-input-group[b-tis6fge06f],
[data-theme="light"] .year-dropdown .e-input-group[b-tis6fge06f] {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
}

[data-theme="light"] .vehicle-dropdown .e-input[b-tis6fge06f],
[data-theme="light"] .year-dropdown .e-input[b-tis6fge06f] {
    background: transparent !important;
    color: #000000 !important;
    padding: 12px !important;
    font-size: 14px !important;
}

[data-theme="light"] .vehicle-dropdown .e-input[b-tis6fge06f]::placeholder,
[data-theme="light"] .year-dropdown .e-input[b-tis6fge06f]::placeholder {
    color: #666666 !important;
}

/* Dark theme dropdowns */
[data-theme="dark"] .vehicle-dropdown .e-input-group[b-tis6fge06f],
[data-theme="dark"] .year-dropdown .e-input-group[b-tis6fge06f] {
    background: #2C2C2C !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .vehicle-dropdown .e-input[b-tis6fge06f],
[data-theme="dark"] .year-dropdown .e-input[b-tis6fge06f] {
    background: transparent !important;
    color: #FFFFFF !important;
    padding: 12px !important;
    font-size: 14px !important;
}

[data-theme="dark"] .vehicle-dropdown .e-input[b-tis6fge06f]::placeholder,
[data-theme="dark"] .year-dropdown .e-input[b-tis6fge06f]::placeholder {
    color: #888 !important;
}

/* Templates des dropdowns - Support Dark/Light Mode */
.vehicle-item[b-tis6fge06f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
}

.vehicle-brand-icon[b-tis6fge06f] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.vehicle-info[b-tis6fge06f] {
    flex: 1;
}

[data-theme="light"] .vehicle-name[b-tis6fge06f] {
    font-weight: bold;
    color: #000000;
    font-size: 14px;
}

[data-theme="dark"] .vehicle-name[b-tis6fge06f] {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 14px;
}

[data-theme="light"] .vehicle-details[b-tis6fge06f] {
    color: #666666;
    font-size: 12px;
}

[data-theme="dark"] .vehicle-details[b-tis6fge06f] {
    color: #888;
    font-size: 12px;
}

.selected-vehicle[b-tis6fge06f] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selected-brand-icon[b-tis6fge06f] {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

[data-theme="light"] .selected-name[b-tis6fge06f] {
    color: #000000;
    font-weight: 500;
}

[data-theme="dark"] .selected-name[b-tis6fge06f] {
    color: #FFFFFF;
    font-weight: 500;
}

/* Templates année - Support Dark/Light Mode */
.year-item[b-tis6fge06f] {
    display: flex;
    flex-direction: column;
    padding: 8px;
}

[data-theme="light"] .year-text[b-tis6fge06f] {
    font-weight: bold;
    color: #000000;
    font-size: 16px;
}

[data-theme="dark"] .year-text[b-tis6fge06f] {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 16px;
}

[data-theme="light"] .year-description[b-tis6fge06f] {
    color: #666666;
    font-size: 12px;
    margin-top: 2px;
}

[data-theme="dark"] .year-description[b-tis6fge06f] {
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}

.selected-year[b-tis6fge06f] {
    display: flex;
    align-items: center;
}

[data-theme="light"] .selected-year-text[b-tis6fge06f] {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

[data-theme="dark"] .selected-year-text[b-tis6fge06f] {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
}

/* Section info - Support Dark/Light Mode */
.info-section[b-tis6fge06f] {
    margin-bottom: 25px;
}

[data-theme="light"] .year-info[b-tis6fge06f] {
    background: #f8f9fa;
    border: 1px solid #007bff;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000000;
    font-size: 14px;
}

[data-theme="dark"] .year-info[b-tis6fge06f] {
    background: #2C2C2C;
    border: 1px solid #F5A623;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    font-size: 14px;
}

[data-theme="light"] .year-info ion-icon[b-tis6fge06f] {
    color: #007bff;
    font-size: 18px;
}

[data-theme="dark"] .year-info ion-icon[b-tis6fge06f] {
    color: #F5A623;
    font-size: 18px;
}

/* Boutons - Support Dark/Light Mode */
.validate-btn[b-tis6fge06f] {
    width: 100%;
    background: linear-gradient(135deg, #F5A623, #FF8C00);
    color: #000000;
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.validate-btn:hover:not(:disabled)[b-tis6fge06f] {
    background: linear-gradient(135deg, #FF8C00, #F5A623);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 166, 35, 0.3);
}

.validate-btn:disabled[b-tis6fge06f] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[data-theme="light"] .close-btn[b-tis6fge06f] {
    width: 100%;
    background: #e9ecef;
    color: #000000;
    border: 1px solid #ced4da;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="light"] .close-btn:hover:not(:disabled)[b-tis6fge06f] {
    background: #dee2e6;
    border-color: #adb5bd;
}

[data-theme="dark"] .close-btn[b-tis6fge06f] {
    width: 100%;
    background: #444444;
    color: #FFFFFF;
    border: 1px solid #666;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-theme="dark"] .close-btn:hover:not(:disabled)[b-tis6fge06f] {
    background: #555555;
    border-color: #888;
}

.close-btn:disabled[b-tis6fge06f] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Header des dropdowns - Support Dark/Light Mode */
.dropdown-header[b-tis6fge06f] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid #555;
}

[data-theme="light"] .dropdown-header[b-tis6fge06f] {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

[data-theme="dark"] .dropdown-header[b-tis6fge06f] {
    background: #2C2C2C;
    border-bottom: 1px solid #555;
}

.header-icon[b-tis6fge06f] {
    font-size: 16px;
}

.header-text[b-tis6fge06f] {
    color: #F5A623;
    font-weight: bold;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 600px) {
    .overlay-card[b-tis6fge06f] {
        margin: 10px;
        padding: 20px;
        max-width: none;
    }
    
    .overlay-title[b-tis6fge06f] {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* Animation d'apparition */
@keyframes slideIn-b-tis6fge06f {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.report-annual-search-overlay .overlay-card[b-tis6fge06f] {
    animation: slideIn-b-tis6fge06f 0.3s ease-out;
}
/* /Components/ReportDailySearchOverlay.razor.rz.scp.css */
/* Overlay pour Rapport Journalier - Support Dark/Light Mode */
.report-daily-search-overlay[b-ib9s1p6vih] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.overlay-card[b-ib9s1p6vih] {
    border-radius: 15px;
    padding: 25px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid #F5A623;
    transition: background-color 0.3s ease;
}

/* Light theme overlay */
[data-theme="light"] .overlay-card[b-ib9s1p6vih] {
    background: #ffffff;
}

/* Dark theme overlay */
[data-theme="dark"] .overlay-card[b-ib9s1p6vih] {
    background: #1E1E1E;
}

.overlay-title[b-ib9s1p6vih] {
    color: #F5A623;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.overlay-title[b-ib9s1p6vih]::before {
    content: "📅";
}

.form-group[b-ib9s1p6vih] {
    margin-bottom: 20px;
}

.form-label[b-ib9s1p6vih] {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}

[data-theme="dark"] .form-label[b-ib9s1p6vih] {
    color: #E0E0E0;
}

.form-control[b-ib9s1p6vih] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 14px;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus[b-ib9s1p6vih] {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3);
}

[data-theme="dark"] .form-control[b-ib9s1p6vih] {
    background-color: #2A2A2A;
    border-color: #444;
    color: #E0E0E0;
}

[data-theme="dark"] .form-control:focus[b-ib9s1p6vih] {
    border-color: #F5A623;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3);
}

/* Styles pour SfDatePicker */
.date-picker-container[b-ib9s1p6vih] {
    width: 100%;
}

.date-picker-container .e-datepicker[b-ib9s1p6vih] {
    width: 100% !important;
}

.date-picker-container .e-input-group[b-ib9s1p6vih] {
    border: 2px solid #E0E0E0 !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.date-picker-container .e-input-group:focus-within[b-ib9s1p6vih] {
    border-color: #F5A623 !important;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3) !important;
}

.date-picker-container .e-input[b-ib9s1p6vih] {
    padding: 12px 15px !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .date-picker-container .e-input-group[b-ib9s1p6vih] {
    background-color: #2A2A2A !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .date-picker-container .e-input[b-ib9s1p6vih] {
    color: #E0E0E0 !important;
}

.input-help[b-ib9s1p6vih] {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

[data-theme="dark"] .input-help[b-ib9s1p6vih] {
    color: #AAA;
}

/* Styles pour les info cards */
.info-section[b-ib9s1p6vih] {
    margin: 20px 0;
}

.info-card[b-ib9s1p6vih] {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

[data-theme="dark"] .info-card[b-ib9s1p6vih] {
    background-color: #3A3A3A;
    border-color: #555;
    color: #E0E0E0;
}

.info-card h4[b-ib9s1p6vih] {
    margin: 0 0 12px 0;
    color: #F5A623;
    font-size: 16px;
}

.info-card p[b-ib9s1p6vih] {
    margin: 4px 0;
    font-size: 14px;
}

[data-theme="light"] .info-card p[b-ib9s1p6vih] {
    color: #333;
}

[data-theme="dark"] .info-card p[b-ib9s1p6vih] {
    color: #E0E0E0;
}

/* Carte d'avertissement */
.warning-card[b-ib9s1p6vih] {
    background-color: #fff3cd;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

[data-theme="dark"] .warning-card[b-ib9s1p6vih] {
    background-color: #3d2914;
    border-color: #664d03;
    color: #ffecb5;
}

.warning-card h4[b-ib9s1p6vih] {
    margin: 0 0 8px 0;
    color: #856404;
    font-size: 14px;
}

[data-theme="dark"] .warning-card h4[b-ib9s1p6vih] {
    color: #ffecb5;
}

.warning-card p[b-ib9s1p6vih] {
    margin: 0;
    font-size: 13px;
    color: #856404;
}

[data-theme="dark"] .warning-card p[b-ib9s1p6vih] {
    color: #ffecb5;
}

.vehicle-dropdown-container[b-ib9s1p6vih] {
    width: 100%;
}

.vehicle-dropdown-container .e-ddl[b-ib9s1p6vih] {
    width: 100% !important;
}

.vehicle-dropdown-container .e-input-group[b-ib9s1p6vih] {
    border: 2px solid #E0E0E0 !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.vehicle-dropdown-container .e-input-group:focus-within[b-ib9s1p6vih] {
    border-color: #F5A623 !important;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3) !important;
}

.vehicle-dropdown-container .e-input[b-ib9s1p6vih] {
    padding: 12px 15px !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .vehicle-dropdown-container .e-input-group[b-ib9s1p6vih] {
    background-color: #2A2A2A !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .vehicle-dropdown-container .e-input[b-ib9s1p6vih] {
    color: #E0E0E0 !important;
}

.vehicle-item[b-ib9s1p6vih] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.vehicle-item:hover[b-ib9s1p6vih] {
    background-color: #F8F9FA;
}

[data-theme="dark"] .vehicle-item[b-ib9s1p6vih] {
    border-bottom-color: #444;
}

[data-theme="dark"] .vehicle-item:hover[b-ib9s1p6vih] {
    background-color: #3A3A3A;
}

.vehicle-brand-icon[b-ib9s1p6vih] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 4px;
    object-fit: contain;
}

.selected-brand-icon[b-ib9s1p6vih] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 4px;
    object-fit: contain;
}

.vehicle-info[b-ib9s1p6vih] {
    flex: 1;
}

.vehicle-name[b-ib9s1p6vih] {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    font-size: 14px;
}

.vehicle-details[b-ib9s1p6vih] {
    font-size: 12px;
    color: #666;
}

[data-theme="dark"] .vehicle-name[b-ib9s1p6vih] {
    color: #E0E0E0;
}

[data-theme="dark"] .vehicle-details[b-ib9s1p6vih] {
    color: #AAA;
}

.dropdown-header[b-ib9s1p6vih] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E0E0E0;
    font-weight: 600;
    color: #F5A623;
    font-size: 14px;
}

[data-theme="dark"] .dropdown-header[b-ib9s1p6vih] {
    background-color: #3A3A3A;
    border-bottom-color: #555;
}

.header-icon[b-ib9s1p6vih] {
    margin-right: 8px;
}

.selected-vehicle[b-ib9s1p6vih] {
    display: flex;
    align-items: center;
}

.selected-name[b-ib9s1p6vih] {
    font-weight: 500;
    color: #333;
}

[data-theme="dark"] .selected-name[b-ib9s1p6vih] {
    color: #E0E0E0;
}

.button-group[b-ib9s1p6vih] {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn[b-ib9s1p6vih] {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
}

.btn:disabled[b-ib9s1p6vih] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary[b-ib9s1p6vih] {
    background: linear-gradient(135deg, #F5A623, #E89611);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-ib9s1p6vih] {
    background: linear-gradient(135deg, #E89611, #D48806);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 166, 35, 0.4);
}

.btn-secondary[b-ib9s1p6vih] {
    background: #E0E0E0;
    color: #333;
}

.btn-secondary:hover[b-ib9s1p6vih] {
    background: #D0D0D0;
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary[b-ib9s1p6vih] {
    background: #444;
    color: #E0E0E0;
}

[data-theme="dark"] .btn-secondary:hover[b-ib9s1p6vih] {
    background: #555;
}

.close-icon[b-ib9s1p6vih] {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid #F5A623;
    color: #F5A623;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.close-icon:hover[b-ib9s1p6vih] {
    background: #F5A623;
    color: white;
    transform: scale(1.1);
}

/* Responsive design */
@media (max-width: 480px) {
    .report-daily-search-overlay[b-ib9s1p6vih] {
        padding: 10px;
    }
    
    .overlay-card[b-ib9s1p6vih] {
        padding: 20px;
        max-width: 100%;
    }
    
    .overlay-title[b-ib9s1p6vih] {
        font-size: 18px;
    }
    
    .button-group[b-ib9s1p6vih] {
        flex-direction: column;
        gap: 10px;
    }
    
    .vehicle-brand-icon[b-ib9s1p6vih] {
        width: 20px;
        height: 20px;
    }
}
/* /Components/ReportMonthlySearchOverlay.razor.rz.scp.css */
/* Overlay pour Rapport Mensuel - Support Dark/Light Mode */
.report-monthly-search-overlay[b-oeeqvvp175] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.overlay-card[b-oeeqvvp175] {
    border-radius: 15px;
    padding: 25px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid #F5A623;
    transition: background-color 0.3s ease;
}

/* Light theme overlay */
[data-theme="light"] .overlay-card[b-oeeqvvp175] {
    background: #ffffff;
}

/* Dark theme overlay */
[data-theme="dark"] .overlay-card[b-oeeqvvp175] {
    background: #1E1E1E;
}

.overlay-title[b-oeeqvvp175] {
    color: #F5A623;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.overlay-title[b-oeeqvvp175]::before {
    content: "📊";
}

.form-group[b-oeeqvvp175] {
    margin-bottom: 20px;
}

.form-label[b-oeeqvvp175] {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}

[data-theme="dark"] .form-label[b-oeeqvvp175] {
    color: #E0E0E0;
}

.form-control[b-oeeqvvp175] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 14px;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus[b-oeeqvvp175] {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3);
}

[data-theme="dark"] .form-control[b-oeeqvvp175] {
    background-color: #2A2A2A;
    border-color: #444;
    color: #E0E0E0;
}

[data-theme="dark"] .form-control:focus[b-oeeqvvp175] {
    border-color: #F5A623;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3);
}

/* Styles pour SfDatePicker */
.date-picker-container[b-oeeqvvp175] {
    width: 100%;
}

.date-picker-container .e-datepicker[b-oeeqvvp175] {
    width: 100% !important;
}

.date-picker-container .e-input-group[b-oeeqvvp175] {
    border: 2px solid #E0E0E0 !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.date-picker-container .e-input-group:focus-within[b-oeeqvvp175] {
    border-color: #F5A623 !important;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3) !important;
}

.date-picker-container .e-input[b-oeeqvvp175] {
    padding: 12px 15px !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .date-picker-container .e-input-group[b-oeeqvvp175] {
    background-color: #2A2A2A !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .date-picker-container .e-input[b-oeeqvvp175] {
    color: #E0E0E0 !important;
}

.input-help[b-oeeqvvp175] {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

[data-theme="dark"] .input-help[b-oeeqvvp175] {
    color: #AAA;
}

/* Styles pour les info cards */
.info-section[b-oeeqvvp175] {
    margin: 20px 0;
}

.info-card[b-oeeqvvp175] {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

[data-theme="dark"] .info-card[b-oeeqvvp175] {
    background-color: #3A3A3A;
    border-color: #555;
    color: #E0E0E0;
}

.info-card h4[b-oeeqvvp175] {
    margin: 0 0 12px 0;
    color: #F5A623;
    font-size: 16px;
}

.info-card p[b-oeeqvvp175] {
    margin: 4px 0;
    font-size: 14px;
}

[data-theme="light"] .info-card p[b-oeeqvvp175] {
    color: #333;
}

[data-theme="dark"] .info-card p[b-oeeqvvp175] {
    color: #E0E0E0;
}
.vehicle-dropdown-container[b-oeeqvvp175] {
    width: 100%;
}

.vehicle-dropdown-container .e-ddl[b-oeeqvvp175] {
    width: 100% !important;
}

.vehicle-dropdown-container .e-input-group[b-oeeqvvp175] {
    border: 2px solid #E0E0E0 !important;
    border-radius: 10px !important;
    background-color: #FFFFFF !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.vehicle-dropdown-container .e-input-group:focus-within[b-oeeqvvp175] {
    border-color: #F5A623 !important;
    box-shadow: 0 0 5px rgba(245, 166, 35, 0.3) !important;
}

.vehicle-dropdown-container .e-input[b-oeeqvvp175] {
    padding: 12px 15px !important;
    font-size: 14px !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .vehicle-dropdown-container .e-input-group[b-oeeqvvp175] {
    background-color: #2A2A2A !important;
    border-color: #444 !important;
    color: #E0E0E0 !important;
}

[data-theme="dark"] .vehicle-dropdown-container .e-input[b-oeeqvvp175] {
    color: #E0E0E0 !important;
}

.vehicle-item[b-oeeqvvp175] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #F0F0F0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.vehicle-item:hover[b-oeeqvvp175] {
    background-color: #F8F9FA;
}

[data-theme="dark"] .vehicle-item[b-oeeqvvp175] {
    border-bottom-color: #444;
}

[data-theme="dark"] .vehicle-item:hover[b-oeeqvvp175] {
    background-color: #3A3A3A;
}

.vehicle-icon[b-oeeqvvp175] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 4px;
    object-fit: contain;
}

.vehicle-info[b-oeeqvvp175] {
    flex: 1;
}

.vehicle-name[b-oeeqvvp175] {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    font-size: 14px;
}

.vehicle-details[b-oeeqvvp175] {
    font-size: 12px;
    color: #666;
}

[data-theme="dark"] .vehicle-name[b-oeeqvvp175] {
    color: #E0E0E0;
}

[data-theme="dark"] .vehicle-details[b-oeeqvvp175] {
    color: #AAA;
}

.button-group[b-oeeqvvp175] {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn[b-oeeqvvp175] {
    flex: 1;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
}

.btn-primary[b-oeeqvvp175] {
    background: linear-gradient(135deg, #F5A623, #E89611);
    color: white;
}

.btn-primary:hover[b-oeeqvvp175] {
    background: linear-gradient(135deg, #E89611, #D48806);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 166, 35, 0.4);
}

.btn-secondary[b-oeeqvvp175] {
    background: #E0E0E0;
    color: #333;
}

.btn-secondary:hover[b-oeeqvvp175] {
    background: #D0D0D0;
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary[b-oeeqvvp175] {
    background: #444;
    color: #E0E0E0;
}

[data-theme="dark"] .btn-secondary:hover[b-oeeqvvp175] {
    background: #555;
}

.close-icon[b-oeeqvvp175] {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid #F5A623;
    color: #F5A623;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.close-icon:hover[b-oeeqvvp175] {
    background: #F5A623;
    color: white;
    transform: scale(1.1);
}

/* Responsive design */
@media (max-width: 480px) {
    .report-monthly-search-overlay[b-oeeqvvp175] {
        padding: 10px;
    }
    
    .overlay-card[b-oeeqvvp175] {
        padding: 20px;
        max-width: 100%;
    }
    
    .overlay-title[b-oeeqvvp175] {
        font-size: 18px;
    }
    
    .button-group[b-oeeqvvp175] {
        flex-direction: column;
        gap: 10px;
    }
    
    .vehicle-icon[b-oeeqvvp175] {
        width: 20px;
        height: 20px;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ra174p3mxn] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ra174p3mxn] {
    flex: 1;
}

.sidebar[b-ra174p3mxn] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ra174p3mxn] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ra174p3mxn]  a, .top-row[b-ra174p3mxn]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ra174p3mxn]  a:hover, .top-row[b-ra174p3mxn]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ra174p3mxn]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ra174p3mxn] {
        justify-content: space-between;
    }

    .top-row[b-ra174p3mxn]  a, .top-row[b-ra174p3mxn]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ra174p3mxn] {
        flex-direction: row;
    }

    .sidebar[b-ra174p3mxn] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ra174p3mxn] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ra174p3mxn]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ra174p3mxn], article[b-ra174p3mxn] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/AdminServices.razor.rz.scp.css */
.services-grid[b-bk4ffvak86] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.service-card[b-bk4ffvak86] {
    margin: 0;
}

.service-status[b-bk4ffvak86] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0;
}

.unavailable-info[b-bk4ffvak86] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px;
    background: var(--ion-color-warning-tint);
    border-radius: 8px;
    font-size: 0.9rem;
}

.admin-actions[b-bk4ffvak86] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

@media (min-width: 600px) {
    .admin-actions[b-bk4ffvak86] {
        flex-direction: row;
    }
}
/* /Pages/Alerts.razor.rz.scp.css */
/* ================================
   ALERTS PAGE STYLES
   ================================ */

/* Page Layout - Full Height */
ion-page[b-ag4eand8uw] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

ion-content[b-ag4eand8uw] {
    height: 100%;
    flex: 1;
}

/* Ensure content scrollable area takes full height */
ion-content .scroll-content[b-ag4eand8uw] {
    height: 100%;
    min-height: 100%;
}

/* Batch Actions */
.batch-actions[b-ag4eand8uw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ion-color-primary);
    color: white;
    margin: 0 -16px 16px -16px;
}

.batch-actions span[b-ag4eand8uw] {
    font-weight: 500;
    font-size: 14px;
}

.batch-buttons[b-ag4eand8uw] {
    display: flex;
    gap: 6px;
}

.batch-buttons ion-button[b-ag4eand8uw] {
    --color: white;
    --background: transparent;
    --border-color: rgba(255, 255, 255, 0.3);
    height: 32px;
    font-size: 11px;
    min-width: 80px;
}

.batch-buttons ion-button[fill="solid"][b-ag4eand8uw] {
    --background: rgba(255, 255, 255, 0.2);
    --color: white;
}

/* Mark All Action */
.mark-all-action[b-ag4eand8uw] {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    margin: 0 -16px 16px -16px;
}

.mark-all-action ion-button[b-ag4eand8uw] {
    --color: white;
    --background: var(--ion-color-primary);
    min-width: 200px;
    height: 36px;
    font-weight: 500;
}

/* Usage Hint */
.usage-hint[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(var(--ion-color-primary-rgb), 0.1);
    border-radius: 8px;
    margin: 0 -16px 16px -16px;
    font-size: 13px;
    color: var(--ion-color-primary);
}

.usage-hint ion-icon[b-ag4eand8uw] {
    font-size: 16px;
    flex-shrink: 0;
}

/* Loading and Error States */
.loading-container[b-ag4eand8uw],
.error-container[b-ag4eand8uw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: calc(100vh - 160px); /* Account for header and segment */
}

.loading-container ion-spinner[b-ag4eand8uw] {
    margin-bottom: 16px;
}

.error-container ion-icon[b-ag4eand8uw] {
    color: var(--ion-color-danger);
    margin-bottom: 16px;
}

.error-container p[b-ag4eand8uw] {
    color: var(--ion-color-medium);
    margin-bottom: 20px;
}

/* Empty State */
.empty-state[b-ag4eand8uw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: calc(100vh - 160px); /* Account for header and segment */
}

.empty-state ion-icon[b-ag4eand8uw] {
    color: var(--ion-color-medium);
    margin-bottom: 20px;
}

.empty-state h3[b-ag4eand8uw] {
    color: var(--ion-text-color);
    margin-bottom: 8px;
}

.empty-state p[b-ag4eand8uw] {
    color: var(--ion-color-medium);
}

/* Segment Styles */
ion-segment[b-ag4eand8uw] {
    margin: 16px;
    border-radius: 12px;
}

/* Alert Filters - Horizontal Carousel */
.alert-filters[b-ag4eand8uw] {
    padding: 16px;
    background: var(--ion-background-color);
    border-bottom: 1px solid var(--ion-color-light);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.filter-header[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--ion-text-color);
    font-size: 14px;
}

.filter-header ion-icon[b-ag4eand8uw] {
    color: var(--ion-color-medium);
}

.filter-header ion-button[b-ag4eand8uw] {
    margin-left: auto;
    --padding-start: 8px;
    --padding-end: 8px;
}

.filter-chips[b-ag4eand8uw] {
    display: flex;
    gap: 12px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.filter-chips[b-ag4eand8uw]::-webkit-scrollbar {
    display: none;
}

/* Scroll indicators */
.filter-chips[b-ag4eand8uw]::before,
.filter-chips[b-ag4eand8uw]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 1;
}

.filter-chips[b-ag4eand8uw]::before {
    left: 0;
    background: linear-gradient(to right, var(--ion-background-color), transparent);
}

.filter-chips[b-ag4eand8uw]::after {
    right: 0;
    background: linear-gradient(to left, var(--ion-background-color), transparent);
}

.filter-chip[b-ag4eand8uw] {
    --background: var(--ion-color-light);
    --color: var(--ion-text-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    flex-shrink: 0; /* Empêche le rétrécissement dans le carrousel */
    white-space: nowrap; /* Empêche le retour à la ligne du texte */
    min-width: fit-content; /* Largeur minimale basée sur le contenu */
}

.filter-chip:hover[b-ag4eand8uw] {
    --background: var(--ion-color-step-200);
    transform: scale(1.02);
    z-index: 2; /* Au-dessus des autres chips lors du hover */
}

.filter-chip.selected[b-ag4eand8uw] {
    --background: var(--ion-color-primary);
    --color: white;
    border-color: var(--ion-color-primary-shade);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3);
    z-index: 2; /* Au-dessus des autres chips quand sélectionné */
}

.filter-chip img[b-ag4eand8uw] {
    width: 32px;
    height: 32px;
    margin-right: 4px;
    opacity: 0.8;
}

.filter-chip.selected img[b-ag4eand8uw] {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.filter-chip ion-label[b-ag4eand8uw] {
    font-size: 12px;
    font-weight: 500;
    margin: 0 4px;
}

.filter-chip ion-icon[b-ag4eand8uw] {
    font-size: 14px;
    margin-left: 4px;
}

/* Alert List Styles */
.alerts-list[b-ag4eand8uw] {
    padding: 16px;
    min-height: calc(100vh - 280px); /* Account for header, segment, and sticky filters */
    padding-top: 0; /* Le filtre étant sticky, pas besoin de padding-top */
    position: relative; /* Pour le positionnement du bouton back to top */
    display: flex;
    flex-direction: column;
}

/* Back to Top Button Container */
.back-to-top-container[b-ag4eand8uw] {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 1000;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 20px;
    padding-bottom: 20px;
}

/* Back to Top Button */
.back-to-top[b-ag4eand8uw] {
    position: relative;
    bottom: 0;
    right: 0;
    margin: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--ion-color-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.back-to-top.visible[b-ag4eand8uw] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover[b-ag4eand8uw] {
    background: var(--ion-color-primary-shade);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--ion-color-primary-rgb), 0.4);
}

.back-to-top:active[b-ag4eand8uw] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3);
}

.back-to-top ion-icon[b-ag4eand8uw] {
    font-size: 24px;
}

.alert-card[b-ag4eand8uw] {
    margin-bottom: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* Swipe Item Styles */
.alert-item[b-ag4eand8uw] {
    --padding-start: 0;
    --padding-end: 0;
    --inner-padding-start: 0;
    --inner-padding-end: 0;
    margin-bottom: 16px;
}

.alert-item ion-card[b-ag4eand8uw] {
    margin: 0;
    width: 100%;
}

ion-item-sliding[b-ag4eand8uw] {
    margin-bottom: 16px;
}

ion-item-options ion-item-option[b-ag4eand8uw] {
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ion-item-options ion-item-option ion-icon[b-ag4eand8uw] {
    font-size: 24px;
}

.alert-header[b-ag4eand8uw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.alert-type[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-type ion-icon[b-ag4eand8uw] {
    font-size: 20px;
}

.alert-title[b-ag4eand8uw] {
    font-weight: 600;
    font-size: 16px;
    color: var(--ion-text-color);
}

.alert-date[b-ag4eand8uw] {
    font-size: 12px;
    color: var(--ion-color-medium);
    text-align: right;
}

.alert-message[b-ag4eand8uw] {
    color: var(--ion-color-medium);
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.alert-position[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ion-color-medium);
    margin-bottom: 12px;
}

.alert-position ion-icon[b-ag4eand8uw] {
    font-size: 14px;
}

.speed-info[b-ag4eand8uw] {
    font-weight: 500;
    color: var(--ion-color-primary);
}

.alert-actions[b-ag4eand8uw] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.alert-actions ion-button[b-ag4eand8uw] {
    flex: 1;
    --padding-start: 8px;
    --padding-end: 8px;
}

/* Report Content Styles */
.report-content[b-ag4eand8uw] {
    padding: 16px;
    min-height: 100%;
}

/* Stat Card */
.stat-card[b-ag4eand8uw] {
    border-radius: 16px;
    margin-bottom: 20px;
    background: var(--ion-card-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.main-stat[b-ag4eand8uw] {
    text-align: center;
    margin-bottom: 24px;
}

.main-value[b-ag4eand8uw] {
    font-size: 48px;
    font-weight: 700;
    color: var(--ion-color-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.main-label[b-ag4eand8uw] {
    font-size: 16px;
    color: var(--ion-color-medium);
    font-weight: 500;
}

.stat-grid[b-ag4eand8uw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.stat-item[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--ion-color-light);
    border-radius: 12px;
}

.stat-icon[b-ag4eand8uw] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--ion-color-primary-rgb), 0.1);
}

.stat-icon ion-icon[b-ag4eand8uw] {
    font-size: 20px;
}

.stat-info[b-ag4eand8uw] {
    flex: 1;
}

.stat-label[b-ag4eand8uw] {
    font-size: 13px;
    color: var(--ion-color-medium);
    margin-bottom: 2px;
}

.stat-value[b-ag4eand8uw] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ion-text-color);
}

/* List View Card */
.list-view-card[b-ag4eand8uw] {
    border-radius: 16px;
    background: var(--ion-card-background);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.progress-list[b-ag4eand8uw] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.progress-item[b-ag4eand8uw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-header[b-ag4eand8uw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label[b-ag4eand8uw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--ion-text-color);
}

.progress-label ion-icon[b-ag4eand8uw] {
    font-size: 16px;
}

.progress-value[b-ag4eand8uw] {
    font-size: 14px;
    color: var(--ion-color-medium);
    font-weight: 500;
}

.progress-bar[b-ag4eand8uw] {
    width: 100%;
    height: 8px;
    background: var(--ion-color-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-ag4eand8uw] {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 480px) {
    .alerts-list[b-ag4eand8uw],
    .report-content[b-ag4eand8uw] {
        padding: 12px;
    }
    
    .alert-filters[b-ag4eand8uw] {
        padding: 12px;
    }
    
    .filter-chips[b-ag4eand8uw] {
        gap: 8px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    
    .filter-chip[b-ag4eand8uw] {
        font-size: 12px;
    }
    
    .filter-chip ion-label[b-ag4eand8uw] {
        font-size: 11px;
    }
    
    .back-to-top-container[b-ag4eand8uw] {
        padding-right: 15px;
        padding-bottom: 15px;
    }
    
    .back-to-top[b-ag4eand8uw] {
        width: 45px;
        height: 45px;
    }
    
    .back-to-top ion-icon[b-ag4eand8uw] {
        font-size: 20px;
    }
    
    .stat-grid[b-ag4eand8uw] {
        grid-template-columns: 1fr;
    }
    
    .alert-actions[b-ag4eand8uw] {
        flex-direction: column;
    }
    
    .alert-actions ion-button[b-ag4eand8uw] {
        margin-bottom: 4px;
    }
    
    .main-value[b-ag4eand8uw] {
        font-size: 36px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .alert-card[b-ag4eand8uw],
    .stat-card[b-ag4eand8uw],
    .list-view-card[b-ag4eand8uw] {
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
    }
    
    .stat-item[b-ag4eand8uw] {
        background: var(--ion-color-dark);
    }
}

/* Animation pour les alertes */
.alert-card[b-ag4eand8uw] {
    animation: slideInUp-b-ag4eand8uw 0.3s ease-out;
}

/* Animation pour le carrousel */
.filter-chips[b-ag4eand8uw] {
    scroll-behavior: smooth; /* Scroll fluide */
}

/* Animation pour les filtres */
.filter-chip[b-ag4eand8uw] {
    animation: filterFadeIn-b-ag4eand8uw 0.4s ease-out;
}

/* Animation pour le bouton back to top */
.back-to-top[b-ag4eand8uw] {
    animation: backToTopPulse-b-ag4eand8uw 2s ease-in-out infinite;
}

@keyframes backToTopPulse-b-ag4eand8uw {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(var(--ion-color-primary-rgb), 0.5);
    }
}

@keyframes filterFadeIn-b-ag4eand8uw {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideInUp-b-ag4eand8uw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations pour les statistiques */
.stat-item[b-ag4eand8uw],
.progress-item[b-ag4eand8uw] {
    animation: fadeIn-b-ag4eand8uw 0.4s ease-out;
}

@keyframes fadeIn-b-ag4eand8uw {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.progress-fill[b-ag4eand8uw] {
    animation: progressFill-b-ag4eand8uw 0.8s ease-out;
}

@keyframes progressFill-b-ag4eand8uw {
    from {
        width: 0%;
    }
}
/* /Pages/AnnualReport.razor.rz.scp.css */
/* Page Rapport Annuel - Support Dark/Light Mode */
.annual-report-page[b-wwseplhzjt] {
    min-height: 100vh;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Theme */
.annual-report-page[data-theme="light"][b-wwseplhzjt] {
    background-color: #ffffff;
    color: #000000;
}

/* Dark Theme */
.annual-report-page[data-theme="dark"][b-wwseplhzjt] {
    background-color: #1E1E1E;
    color: #FFFFFF;
}

/* Header */
.header[b-wwseplhzjt] {
    background-color: #F5A623;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header ion-button[b-wwseplhzjt] {
    --color: #000000;
    --background: transparent;
}

.page-title[b-wwseplhzjt] {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    flex: 1;
    margin: 0;
}

.header-icons[b-wwseplhzjt] {
    display: flex;
    gap: 10px;
}

.header-icon-btn[b-wwseplhzjt] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    --background: rgba(0, 0, 0, 0.1);
    --color: #000000;
    transition: all 0.3s ease;
}

.header-icon-btn i[b-wwseplhzjt] {
    font-size: 20px;
    font-weight: 400;
}

.header ion-button i[b-wwseplhzjt] {
    font-size: 22px;
    font-weight: 400;
}

.header-icon-btn:hover[b-wwseplhzjt] {
    --background: rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.header-icon-btn:disabled[b-wwseplhzjt] {
    --background: rgba(0, 0, 0, 0.05);
    --color: rgba(0, 0, 0, 0.3);
    transform: none;
}

/* Boutons d'export spécifiques */
.export-pdf-btn[b-wwseplhzjt] {
    --background: rgba(220, 53, 69, 0.1);
    --color: #dc3545;
}

.export-pdf-btn:hover:not(:disabled)[b-wwseplhzjt] {
    --background: rgba(220, 53, 69, 0.2);
}

.export-excel-btn[b-wwseplhzjt] {
    --background: rgba(25, 135, 84, 0.1);
    --color: #198754;
}

.export-excel-btn:hover:not(:disabled)[b-wwseplhzjt] {
    --background: rgba(25, 135, 84, 0.2);
}

.header-icon-btn[b-wwseplhzjt] {
    --background: #333333;
    --border-radius: 5px;
    width: 40px;
    height: 40px;
}

.document-btn[b-wwseplhzjt] {
    --color: #F5A623;
}

.menu-btn[b-wwseplhzjt] {
    --color: #FFFFFF;
}

/* Content */
.content[b-wwseplhzjt] {
    padding: 16px;
}

/* Loading - Support Dark/Light Mode */
.loading-container[b-wwseplhzjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-container ion-spinner[b-wwseplhzjt] {
    --color: #F5A623;
    margin-bottom: 20px;
    width: 40px;
    height: 40px;
}

[data-theme="light"] .loading-container p[b-wwseplhzjt] {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
}

[data-theme="dark"] .loading-container p[b-wwseplhzjt] {
    color: #FFFFFF;
    font-size: 16px;
    margin-bottom: 10px;
}

.progress-info[b-wwseplhzjt] {
    color: #F5A623;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Progress Bar - Support Dark/Light Mode */
.progress-bar-container[b-wwseplhzjt] {
    width: 100%;
    margin-top: 16px;
}

.progress-bar[b-wwseplhzjt] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

[data-theme="light"] .progress-bar[b-wwseplhzjt] {
    background-color: #e0e0e0;
}

[data-theme="dark"] .progress-bar[b-wwseplhzjt] {
    background-color: #333333;
}

.progress-fill[b-wwseplhzjt] {
    height: 100%;
    background: linear-gradient(90deg, #F5A623, #FF8C00);
    border-radius: 4px;
    transition: width 0.3s ease;
}

[data-theme="light"] .progress-text[b-wwseplhzjt] {
    color: #666666;
    font-size: 12px;
    text-align: center;
    display: block;
}

[data-theme="dark"] .progress-text[b-wwseplhzjt] {
    color: #CCCCCC;
    font-size: 12px;
    text-align: center;
    display: block;
}

/* Data Grid Container - Support Dark/Light Mode */
.data-grid-container[b-wwseplhzjt] {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 16px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme styles */
[data-theme="light"] .data-grid-container[b-wwseplhzjt] {
    background: #f8f9fa;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Dark theme styles */
[data-theme="dark"] .data-grid-container[b-wwseplhzjt] {
    background: #2C2C2C;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Loading Grid Styles */
.loading-grid[b-wwseplhzjt] {
    position: relative;
}

.loading-header[b-wwseplhzjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    border-bottom: 2px solid #F5A623;
    margin-bottom: 16px;
    gap: 12px;
}

.loading-header ion-spinner[b-wwseplhzjt] {
    --color: #F5A623;
    width: 24px;
    height: 24px;
}

.loading-header span[b-wwseplhzjt] {
    color: #F5A623;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.loading-header .progress-bar-container[b-wwseplhzjt] {
    width: 100%;
    max-width: 300px;
}

.loading-header .cancel-btn[b-wwseplhzjt] {
    --background: transparent;
    --color: #f44336;
    --border-color: #f44336;
    --border-radius: 6px;
    height: 32px;
    font-size: 12px;
}

.loading-header .cancel-btn:hover[b-wwseplhzjt] {
    --background: rgba(244, 67, 54, 0.1);
}

/* Syncfusion Grid Theming - Support Dark/Light Mode avec priorité élevée */

/* Common styles for all themes */
.data-grid-container .e-grid[b-wwseplhzjt] {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

/* Padding 0 pour toutes les cellules de la grille */
.data-grid-container .e-grid .e-rowcell[b-wwseplhzjt] {
    padding: 0 !important;
    border-right: none !important;
    font-size: 13px !important;
    text-align: center !important;
}

.data-grid-container .e-grid .e-headercell[b-wwseplhzjt] {
    padding: 0 !important;
    border-right: none !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Styles globaux pour Syncfusion - Light Theme */
[data-theme="light"] .e-grid[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid[b-wwseplhzjt] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

[data-theme="light"] .e-grid .e-headercell[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-headercell[b-wwseplhzjt] {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border-bottom: 2px solid #007bff !important;
}

[data-theme="light"] .e-grid .e-row[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-row[b-wwseplhzjt] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

[data-theme="light"] .e-grid .e-row:hover[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-row:hover[b-wwseplhzjt] {
    background-color: #f5f5f5 !important;
}

[data-theme="light"] .e-grid .e-altrow[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-altrow[b-wwseplhzjt] {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .e-grid .e-altrow:hover[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-altrow:hover[b-wwseplhzjt] {
    background-color: #e9ecef !important;
}

/* Styles globaux pour Syncfusion - Dark Theme */
[data-theme="dark"] .e-grid[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid[b-wwseplhzjt] {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
    border: 1px solid #444444 !important;
}

[data-theme="dark"] .e-grid .e-headercell[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-headercell[b-wwseplhzjt] {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #F5A623 !important;
}

[data-theme="dark"] .e-grid .e-row[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-row[b-wwseplhzjt] {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #444444 !important;
}

[data-theme="dark"] .e-grid .e-row:hover[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-row:hover[b-wwseplhzjt] {
    background-color: #353535 !important;
}

[data-theme="dark"] .e-grid .e-altrow[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-altrow[b-wwseplhzjt] {
    background-color: #2A2A2A !important;
}

[data-theme="dark"] .e-grid .e-altrow:hover[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-altrow:hover[b-wwseplhzjt] {
    background-color: #353535 !important;
}

/* Style spécial pour la ligne de récapitulatif - Light theme */
[data-theme="light"] .e-grid .summary-row[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .summary-row[b-wwseplhzjt] {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    font-weight: bold !important;
    border-top: 2px solid #1976d2 !important;
    border-bottom: 2px solid #1976d2 !important;
}

[data-theme="light"] .e-grid .summary-row:hover[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .summary-row:hover[b-wwseplhzjt] {
    background-color: #bbdefb !important;
}

[data-theme="light"] .e-grid .summary-row .e-rowcell[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .summary-row .e-rowcell[b-wwseplhzjt] {
    font-weight: bold !important;
    color: #1976d2 !important;
    background-color: transparent !important;
}

/* Style spécial pour la ligne de récapitulatif - Dark theme */
[data-theme="dark"] .e-grid .summary-row[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .summary-row[b-wwseplhzjt] {
    background-color: #444444 !important;
    color: #F5A623 !important;
    font-weight: bold !important;
    border-top: 2px solid #F5A623 !important;
    border-bottom: 2px solid #F5A623 !important;
}

[data-theme="dark"] .e-grid .summary-row:hover[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .summary-row:hover[b-wwseplhzjt] {
    background-color: #4a4a4a !important;
}

[data-theme="dark"] .e-grid .summary-row .e-rowcell[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .summary-row .e-rowcell[b-wwseplhzjt] {
    font-weight: bold !important;
    color: #F5A623 !important;
    background-color: transparent !important;
}

/* Pagination - Light theme */
[data-theme="light"] .e-grid .e-pager[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-pager[b-wwseplhzjt] {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border-top: 1px solid #007bff !important;
}

[data-theme="light"] .e-grid .e-pager .e-numericitem[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-pager .e-numericitem[b-wwseplhzjt] {
    color: #000000 !important;
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
}

[data-theme="light"] .e-grid .e-pager .e-currentitem[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-pager .e-currentitem[b-wwseplhzjt] {
    background-color: #007bff !important;
    color: #ffffff !important;
}

[data-theme="light"] .e-grid .e-pager .e-pagercontainer .e-icons[b-wwseplhzjt],
[data-theme="light"] .data-grid-container .e-grid .e-pager .e-pagercontainer .e-icons[b-wwseplhzjt] {
    color: #007bff !important;
}

/* Pagination - Dark theme */
[data-theme="dark"] .e-grid .e-pager[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-pager[b-wwseplhzjt] {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-top: 1px solid #F5A623 !important;
}

[data-theme="dark"] .e-grid .e-pager .e-numericitem[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-pager .e-numericitem[b-wwseplhzjt] {
    color: #FFFFFF !important;
    background-color: transparent !important;
    border: 1px solid #555555 !important;
}

[data-theme="dark"] .e-grid .e-pager .e-currentitem[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-pager .e-currentitem[b-wwseplhzjt] {
    background-color: #F5A623 !important;
    color: #000000 !important;
}

[data-theme="dark"] .e-grid .e-pager .e-pagercontainer .e-icons[b-wwseplhzjt],
[data-theme="dark"] .data-grid-container .e-grid .e-pager .e-pagercontainer .e-icons[b-wwseplhzjt] {
    color: #F5A623 !important;
}

/* Data Table (remove old styles) */
.data-table[b-wwseplhzjt] {
    background: #2C2C2C;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Table Header */
.table-header[b-wwseplhzjt] {
    background-color: #333333;
    color: #FFFFFF;
    font-weight: bold;
    padding: 12px 8px;
    border-bottom: 2px solid #F5A623;
    display: flex;
    align-items: center;
}

.header-cell[b-wwseplhzjt] {
    padding: 0 8px;
    font-size: 14px;
    text-align: center;
}

.date-col[b-wwseplhzjt] {
    flex: 2;
    text-align: left !important;
}

.duration-col[b-wwseplhzjt] {
    flex: 1.5;
}

.distance-col[b-wwseplhzjt] {
    flex: 1;
}

.stops-col[b-wwseplhzjt] {
    flex: 1;
}

/* Table Rows */
.table-row[b-wwseplhzjt] {
    background-color: #2C2C2C;
    color: #FFFFFF;
    padding: 12px 8px;
    border-bottom: 1px solid #444444;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}

.table-row:hover[b-wwseplhzjt] {
    background-color: #353535;
}

.table-row:last-child[b-wwseplhzjt] {
    border-bottom: none;
}

.cell[b-wwseplhzjt] {
    padding: 0 8px;
    font-size: 14px;
    text-align: center;
}

.cell.date-col[b-wwseplhzjt] {
    text-align: left;
    font-weight: 500;
}

/* Recap Row */
.recap-row[b-wwseplhzjt] {
    background-color: #444444 !important;
    color: #F5A623 !important;
    font-weight: bold;
    border-top: 2px solid #F5A623 !important;
    border-bottom: none !important;
}

.recap-row:hover[b-wwseplhzjt] {
    background-color: #4a4a4a !important;
}

/* Actions Section */
.actions-section[b-wwseplhzjt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.export-btn[b-wwseplhzjt] {
    --background: linear-gradient(135deg, #F5A623, #FF8C00);
    --color: #000000;
    --border-radius: 10px;
    font-weight: bold;
    height: 50px;
}

.export-btn:hover[b-wwseplhzjt] {
    --background: linear-gradient(135deg, #FF8C00, #F5A623);
}

.new-report-btn[b-wwseplhzjt] {
    --background: transparent;
    --color: #F5A623;
    --border-color: #F5A623;
    --border-radius: 10px;
    font-weight: bold;
    height: 50px;
}

.new-report-btn:hover[b-wwseplhzjt] {
    --background: rgba(245, 166, 35, 0.1);
}

/* Empty State - Support Dark/Light Mode */
.empty-state[b-wwseplhzjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state ion-icon[b-wwseplhzjt] {
    font-size: 64px;
    color: #555;
    margin-bottom: 20px;
}

[data-theme="light"] .empty-state h3[b-wwseplhzjt] {
    color: #000000;
    font-size: 20px;
    margin-bottom: 10px;
}

[data-theme="dark"] .empty-state h3[b-wwseplhzjt] {
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 10px;
}

[data-theme="light"] .empty-state p[b-wwseplhzjt] {
    color: #666666;
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 300px;
}

[data-theme="dark"] .empty-state p[b-wwseplhzjt] {
    color: #888;
    font-size: 16px;
    margin-bottom: 30px;
    max-width: 300px;
}

.empty-state ion-button[b-wwseplhzjt] {
    --background: linear-gradient(135deg, #F5A623, #FF8C00);
    --color: #000000;
    --border-radius: 10px;
    font-weight: bold;
    height: 50px;
    min-width: 200px;
}

/* Error Container - Support Dark/Light Mode */
.error-container[b-wwseplhzjt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #f44336;
}

[data-theme="light"] .error-container[b-wwseplhzjt] {
    background: #fff5f5;
}

[data-theme="dark"] .error-container[b-wwseplhzjt] {
    background: #2C2C2C;
}

.error-container ion-icon[b-wwseplhzjt] {
    font-size: 48px;
    color: #f44336;
    margin-bottom: 15px;
}

.error-container h3[b-wwseplhzjt] {
    color: #f44336;
    font-size: 18px;
    margin-bottom: 10px;
}

[data-theme="light"] .error-container p[b-wwseplhzjt] {
    color: #000000;
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 300px;
}

[data-theme="dark"] .error-container p[b-wwseplhzjt] {
    color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 20px;
    max-width: 300px;
}

.error-container ion-button[b-wwseplhzjt] {
    --background: #f44336;
    --color: #FFFFFF;
    --border-radius: 8px;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header[b-wwseplhzjt] {
        height: 56px;
        padding: 0 12px;
    }

    .page-title[b-wwseplhzjt] {
        font-size: 18px;
    }

    .content[b-wwseplhzjt] {
        padding: 12px;
    }

    .data-grid-container[b-wwseplhzjt] {
        padding: 12px;
    }

    .data-grid-container .e-grid .e-headercell[b-wwseplhzjt] {
        font-size: 12px;
        padding: 6px 8px;
    }

    .data-grid-container .e-grid .e-rowcell[b-wwseplhzjt] {
        font-size: 12px;
        padding: 6px 8px;
    }

    .header-cell[b-wwseplhzjt],
    .cell[b-wwseplhzjt] {
        font-size: 12px;
        padding: 0 4px;
    }

    .table-header[b-wwseplhzjt],
    .table-row[b-wwseplhzjt] {
        padding: 10px 6px;
    }

    .date-col[b-wwseplhzjt] {
        flex: 1.8;
    }

    .duration-col[b-wwseplhzjt] {
        flex: 1.2;
    }

    .distance-col[b-wwseplhzjt],
    .stops-col[b-wwseplhzjt] {
        flex: 0.8;
    }
}

@media (max-width: 480px) {
    .header-icons[b-wwseplhzjt] {
        gap: 5px;
    }

    .header-icon-btn[b-wwseplhzjt] {
        width: 36px;
        height: 36px;
    }

    .page-title[b-wwseplhzjt] {
        font-size: 16px;
    }

    .content[b-wwseplhzjt] {
        padding: 8px;
    }

    .data-grid-container[b-wwseplhzjt] {
        padding: 8px;
    }

    .data-grid-container .e-grid .e-headercell[b-wwseplhzjt] {
        font-size: 11px;
        padding: 4px 6px;
    }

    .data-grid-container .e-grid .e-rowcell[b-wwseplhzjt] {
        font-size: 11px;
        padding: 4px 6px;
    }

    .header-cell[b-wwseplhzjt],
    .cell[b-wwseplhzjt] {
        font-size: 11px;
        padding: 0 2px;
    }

    .table-header[b-wwseplhzjt],
    .table-row[b-wwseplhzjt] {
        padding: 8px 4px;
    }

    /* Stack layout for very small screens */
    .actions-section[b-wwseplhzjt] {
        gap: 8px;
    }

    .export-btn[b-wwseplhzjt],
    .new-report-btn[b-wwseplhzjt] {
        height: 45px;
        font-size: 14px;
    }
}

/* Animation d'apparition */
@keyframes fadeInUp-b-wwseplhzjt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.data-grid-container[b-wwseplhzjt] {
    animation: fadeInUp-b-wwseplhzjt 0.5s ease-out;
}

.actions-section[b-wwseplhzjt] {
    animation: fadeInUp-b-wwseplhzjt 0.6s ease-out;
}
/* /Pages/Assurance.razor.rz.scp.css */
/* Conteneurs principaux */
.loading-container[b-83nkqdkrbu], .error-container[b-83nkqdkrbu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 16px;
}

.error-container h3[b-83nkqdkrbu] {
    color: var(--ion-color-danger);
    margin: 8px 0;
}

.error-container p[b-83nkqdkrbu] {
    color: var(--ion-color-medium);
    max-width: 400px;
}

/* Barre de recherche */
.search-container[b-83nkqdkrbu] {
    margin-bottom: 20px;
}

.search-container .search-input[b-83nkqdkrbu] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-container .search-input:focus[b-83nkqdkrbu] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.search-container .search-input[b-83nkqdkrbu]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Filtres d'état */
.filter-container[b-83nkqdkrbu] {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.filter-button[b-83nkqdkrbu] {
    min-width: 120px;
    height: 36px;
    font-size: 0.85rem;
    border-radius: 18px;
    transition: all 0.3s ease;
    border: 2px solid var(--ion-color-primary);
    background: transparent;
    color: var(--ion-color-primary);
}

.filter-button.active[b-83nkqdkrbu] {
    background: var(--ion-color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3);
}

.filter-button:hover:not(.active)[b-83nkqdkrbu] {
    background: var(--ion-color-primary-tint);
    transform: translateY(-1px);
}

/* Grid container */
.grid-container[b-83nkqdkrbu] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ion-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 100vw;
    border: 1px solid var(--ion-color-step-150);
}

/* Styles pour les lignes du grid selon l'état */
[b-83nkqdkrbu] .row-non-configure {
    background-color: var(--ion-color-step-100) !important;
    border-left: 4px solid var(--ion-color-step-600) !important;
}

[b-83nkqdkrbu] .row-non-configure .e-indentcell {
    background-color: var(--ion-color-step-150) !important;
}

[b-83nkqdkrbu] .row-non-configure .e-recordplusexpand {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-non-configure .e-grouptopleftcell {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-a-verifier {
    background-color: var(--ion-color-warning-tint) !important;
    border-left: 4px solid var(--ion-color-warning) !important;
}

[b-83nkqdkrbu] .row-a-verifier .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
}

[b-83nkqdkrbu] .row-a-verifier .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-a-verifier .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-en-regle {
    background-color: var(--ion-color-success-tint) !important;
    border-left: 4px solid var(--ion-color-success) !important;
}

[b-83nkqdkrbu] .row-en-regle .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
}

[b-83nkqdkrbu] .row-en-regle .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-en-regle .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-urgent {
    background-color: var(--ion-color-danger-tint) !important;
    border-left: 4px solid var(--ion-color-danger) !important;
}

[b-83nkqdkrbu] .row-urgent .e-indentcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
}

[b-83nkqdkrbu] .row-urgent .e-recordplusexpand {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-urgent .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-depasse {
    background-color: rgba(211, 47, 47, 0.15) !important;
    border-left: 4px solid #d32f2f !important;
}

[b-83nkqdkrbu] .row-depasse .e-indentcell {
    background-color: rgba(211, 47, 47, 0.2) !important;
}

[b-83nkqdkrbu] .row-depasse .e-recordplusexpand {
    background-color: rgba(211, 47, 47, 0.2) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .row-depasse .e-grouptopleftcell {
    background-color: rgba(211, 47, 47, 0.2) !important;
    color: var(--ion-text-color) !important;
}

/* Hover effects pour les lignes */
[b-83nkqdkrbu] .row-non-configure:hover {
    background-color: var(--ion-color-step-150) !important;
}

[b-83nkqdkrbu] .row-non-configure:hover .e-indentcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-83nkqdkrbu] .row-non-configure:hover .e-recordplusexpand {
    background-color: var(--ion-color-step-200) !important;
}

[b-83nkqdkrbu] .row-non-configure:hover .e-grouptopleftcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-83nkqdkrbu] .row-a-verifier:hover {
    background-color: var(--ion-color-warning-shade) !important;
}

[b-83nkqdkrbu] .row-a-verifier:hover .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-a-verifier:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-a-verifier:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-en-regle:hover {
    background-color: var(--ion-color-success-shade) !important;
}

[b-83nkqdkrbu] .row-en-regle:hover .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-en-regle:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-en-regle:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-urgent:hover {
    background-color: var(--ion-color-danger-shade) !important;
}

[b-83nkqdkrbu] .row-urgent:hover .e-indentcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-urgent:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-urgent:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-83nkqdkrbu] .row-depasse:hover {
    background-color: rgba(211, 47, 47, 0.25) !important;
}

[b-83nkqdkrbu] .row-depasse:hover .e-indentcell {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

[b-83nkqdkrbu] .row-depasse:hover .e-recordplusexpand {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

[b-83nkqdkrbu] .row-depasse:hover .e-grouptopleftcell {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

/* Styles pour la sélection de ligne complète */
[b-83nkqdkrbu] .e-grid .e-row.e-active {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.2)) !important;
    border: 2px solid var(--ion-color-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3) !important;
    border-radius: 4px !important;
}

[b-83nkqdkrbu] .e-grid .e-row.e-active:hover {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.3)) !important;
}

[b-83nkqdkrbu] .e-grid .e-row.e-active .e-rowcell {
    border-color: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast, var(--ion-text-color)) !important;
}

/* Style de survol général pour les lignes */
[b-83nkqdkrbu] .e-grid .e-row:hover {
    background-color: var(--ion-color-step-150) !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

/* Améliorer l'apparence des cellules sélectionnées */
[b-83nkqdkrbu] .e-grid .e-row.e-active .vehicle-name {
    color: var(--ion-color-primary-shade, var(--ion-text-color)) !important;
    font-weight: 700 !important;
}

[b-83nkqdkrbu] .e-grid .e-row.e-active .vehicle-matricule {
    color: var(--ion-color-primary, var(--ion-color-medium)) !important;
}

/* Personnalisation du Grid Syncfusion */
[b-83nkqdkrbu] .e-grid .e-gridheader {
    background: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast) !important;
}

[b-83nkqdkrbu] .e-grid .e-headercell {
    border-right: 1px solid var(--ion-color-primary-shade) !important;
    font-weight: 600 !important;
    color: var(--ion-color-primary-contrast) !important;
    background: var(--ion-color-primary) !important;
}

[b-83nkqdkrbu] .e-grid .e-content {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
}

[b-83nkqdkrbu] .e-grid .e-rowcell {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    border-right: 1px solid var(--ion-color-step-150) !important;
}

[b-83nkqdkrbu] .e-grid .e-groupdroparea {
    background: var(--ion-color-step-100) !important;
    border: 2px dashed var(--ion-color-step-400) !important;
    border-radius: 8px !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .e-grid .e-groupheadercell {
    background: var(--ion-color-secondary) !important;
    color: var(--ion-color-secondary-contrast) !important;
    font-weight: 600 !important;
}

[b-83nkqdkrbu] .e-grid .e-groupcaption {
    background: var(--ion-color-step-100) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-200) !important;
}

[b-83nkqdkrbu] .e-grid .e-summarycell {
    background: var(--ion-color-step-50) !important;
    color: var(--ion-text-color) !important;
    border-top: 1px solid var(--ion-color-step-200) !important;
}

/* Cellules d'indentation pour les groupes */
[b-83nkqdkrbu] .e-grid .e-indentcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
}

/* Effet hover pour les cellules d'indentation */
[b-83nkqdkrbu] .e-grid .e-row:hover .e-indentcell {
    background: var(--ion-color-step-150) !important;
}

/* Cellules d'expansion pour les groupes */
[b-83nkqdkrbu] .e-grid .e-recordplusexpand {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .e-grid .e-row:hover .e-recordplusexpand {
    background: var(--ion-color-step-150) !important;
}

/* Cellule supérieure gauche des groupes */
[b-83nkqdkrbu] .e-grid .e-grouptopleftcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .e-grid .e-row:hover .e-grouptopleftcell {
    background: var(--ion-color-step-150) !important;
}

/* Amélioration des styles pour mode sombre/clair */
[b-83nkqdkrbu] .e-grid .e-icon-grpexpand,
[b-83nkqdkrbu] .e-grid .e-icon-grpcollapse {
    color: var(--ion-text-color) !important;
}

[b-83nkqdkrbu] .e-grid .e-groupheadercell .e-headertext {
    color: var(--ion-color-secondary-contrast) !important;
}

[b-83nkqdkrbu] .e-grid .e-recordplusexpand,
[b-83nkqdkrbu] .e-grid .e-recordpluscollapse {
    color: var(--ion-color-primary) !important;
}

[b-83nkqdkrbu] .e-grid .e-selectionbackground {
    background: var(--ion-color-primary-tint) !important;
}

/* Amélioration des animations */
[b-83nkqdkrbu] .e-grid .e-row {
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

[b-83nkqdkrbu] .e-grid .e-rowcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-83nkqdkrbu] .e-grid .e-indentcell {
    transition: background-color 0.2s ease !important;
}

[b-83nkqdkrbu] .e-grid .e-recordplusexpand {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-83nkqdkrbu] .e-grid .e-grouptopleftcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Informations véhicule dans le grid */
.vehicle-info[b-83nkqdkrbu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-header[b-83nkqdkrbu] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vehicle-details[b-83nkqdkrbu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-name[b-83nkqdkrbu] {
    font-weight: 600;
    color: var(--ion-text-color);
    font-size: 0.95rem;
}

.vehicle-matricule[b-83nkqdkrbu] {
    font-size: 0.8rem;
    color: var(--ion-color-step-600);
    font-style: italic;
}

/* Style pour le bouton d'édition */
.vehicle-header ion-button[b-83nkqdkrbu] {
    --padding-start: 4px;
    --padding-end: 4px;
    --padding-top: 4px;
    --padding-bottom: 4px;
    min-height: 28px;
    width: 28px;
    flex-shrink: 0;
}

.vehicle-header ion-button:hover[b-83nkqdkrbu] {
    --background: rgba(var(--ion-color-primary-rgb), 0.1);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Styles pour les dates */
.date-undefined[b-83nkqdkrbu] {
    color: var(--ion-color-medium);
    font-style: italic;
}

.date-ok[b-83nkqdkrbu] {
    color: var(--ion-color-success);
    font-weight: 500;
}

.date-warning[b-83nkqdkrbu] {
    color: var(--ion-color-warning);
    font-weight: 500;
}

.date-urgent[b-83nkqdkrbu] {
    color: var(--ion-color-danger);
    font-weight: 600;
}

.date-expired[b-83nkqdkrbu] {
    color: var(--ion-color-danger);
    font-weight: 700;
    text-decoration: line-through;
}

.date-diff[b-83nkqdkrbu] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 2px;
}

/* Modal de configuration d'assurance */
.assurance-modal[b-83nkqdkrbu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.assurance-modal.modal-open[b-83nkqdkrbu] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-83nkqdkrbu] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.assurance-modal.modal-open .modal-content[b-83nkqdkrbu] {
    transform: scale(1);
}

.modal-header[b-83nkqdkrbu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ion-color-step-200);
}

.modal-title[b-83nkqdkrbu] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ion-text-color);
}

.modal-title ion-icon[b-83nkqdkrbu] {
    font-size: 1.5rem;
    color: var(--ion-color-primary);
}

/* Section informations véhicule */
.vehicle-info-section[b-83nkqdkrbu] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ion-color-step-200);
    background: var(--ion-color-step-50);
}

.vehicle-info-section h4[b-83nkqdkrbu] {
    margin: 0 0 8px 0;
    color: var(--ion-text-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.vehicle-info-section p[b-83nkqdkrbu] {
    margin: 4px 0;
    color: var(--ion-color-medium);
    font-size: 0.9rem;
}

/* Section formulaire */
.form-section[b-83nkqdkrbu] {
    padding: 24px;
}

.form-group[b-83nkqdkrbu] {
    margin-bottom: 20px;
}

.form-group label[b-83nkqdkrbu] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--ion-text-color);
    font-size: 0.9rem;
}

.form-control[b-83nkqdkrbu] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus[b-83nkqdkrbu] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.form-control[b-83nkqdkrbu]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Message d'erreur dans le modal */
.error-message[b-83nkqdkrbu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(var(--ion-color-danger-rgb), 0.1);
    border: 1px solid var(--ion-color-danger-tint);
    border-radius: 8px;
    color: var(--ion-color-danger);
    font-size: 0.9rem;
    margin-top: 16px;
}

.error-message ion-icon[b-83nkqdkrbu] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Actions du modal */
.modal-actions[b-83nkqdkrbu] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--ion-color-step-200);
    background: var(--ion-color-step-50);
}

.modal-actions ion-button[b-83nkqdkrbu] {
    flex: 1;
    height: 44px;
    font-weight: 500;
}

.modal-actions ion-button[fill="outline"][b-83nkqdkrbu] {
    --border-width: 2px;
}

/* Responsive design */
@media (max-width: 1024px) {
    .grid-container[b-83nkqdkrbu] {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .assurance-modal[b-83nkqdkrbu] {
        padding: 10px;
    }
    
    .modal-content[b-83nkqdkrbu] {
        max-height: 95vh;
    }
    
    .modal-header[b-83nkqdkrbu],
    .vehicle-info-section[b-83nkqdkrbu],
    .form-section[b-83nkqdkrbu],
    .modal-actions[b-83nkqdkrbu] {
        padding: 16px 20px;
    }
    
    .form-group[b-83nkqdkrbu] {
        margin-bottom: 16px;
    }
    
    .modal-actions[b-83nkqdkrbu] {
        flex-direction: column;
    }
    
    .modal-actions ion-button[b-83nkqdkrbu] {
        flex: none;
    }
    
    .filter-container[b-83nkqdkrbu] {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    
    .filter-button[b-83nkqdkrbu] {
        min-width: 100px;
        flex-shrink: 0;
    }
    
    .search-container[b-83nkqdkrbu],
    .filter-container[b-83nkqdkrbu] {
        margin: 0 -16px 16px -16px;
        padding: 16px;
        border-radius: 0;
    }
    
    .grid-container[b-83nkqdkrbu] {
        margin: 0 -16px;
        border-radius: 0;
        overflow-x: hidden;
    }
    
    /* Force la grille à rester fixe sur mobile */
    [b-83nkqdkrbu] .e-grid {
        min-width: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    [b-83nkqdkrbu] .e-gridheader,
    [b-83nkqdkrbu] .e-gridcontent {
        overflow-x: hidden !important;
    }
    
    /* Ajuster les colonnes pour mobile */
    [b-83nkqdkrbu] .e-headercell,
    [b-83nkqdkrbu] .e-rowcell {
        min-width: auto !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .vehicle-info[b-83nkqdkrbu] {
        min-width: 150px;
    }
}

/* Animations */
@keyframes slideInUp-b-83nkqdkrbu {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content[b-83nkqdkrbu] {
    animation: slideInUp-b-83nkqdkrbu 0.3s ease;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .search-container .search-input[b-83nkqdkrbu] {
        border-color: var(--ion-color-step-600);
    }
    
    .form-control[b-83nkqdkrbu] {
        border-color: var(--ion-color-step-600);
    }
    
    .grid-container[b-83nkqdkrbu] {
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
    }
    
    .modal-content[b-83nkqdkrbu] {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    }
    
    /* Styles spécifiques pour Syncfusion Grid en mode sombre */
    ::ng-deep .e-grid[b-83nkqdkrbu] {
        background: var(--ion-color-step-100) !important;
        border-color: var(--ion-color-step-400) !important;
    }
    
    ::ng-deep .e-grid .e-gridheader[b-83nkqdkrbu] {
        background: var(--ion-color-step-200) !important;
        border-bottom-color: var(--ion-color-step-400) !important;
    }
    
    ::ng-deep .e-grid .e-gridheader .e-headercell[b-83nkqdkrbu] {
        background: var(--ion-color-step-200) !important;
        border-right-color: var(--ion-color-step-400) !important;
    }
    
    ::ng-deep .e-grid .e-row[b-83nkqdkrbu] {
        border-bottom-color: var(--ion-color-step-300) !important;
    }
    
    ::ng-deep .e-grid .e-row .e-rowcell[b-83nkqdkrbu] {
        border-right-color: var(--ion-color-step-300) !important;
    }
    
    ::ng-deep .e-grid .e-altrow[b-83nkqdkrbu] {
        background: var(--ion-color-step-150) !important;
    }
    
    ::ng-deep .e-grid .e-row:hover[b-83nkqdkrbu] {
        background: var(--ion-color-step-250) !important;
    }
    
    ::ng-deep .e-grid .e-altrow:hover[b-83nkqdkrbu] {
        background: var(--ion-color-step-300) !important;
    }
}

/* Styles pour les thèmes Ionic dynamiques */
.ios.dark .grid-container[b-83nkqdkrbu],
.md.dark .grid-container[b-83nkqdkrbu] {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
}

.ios.dark ::ng-deep .e-grid[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid[b-83nkqdkrbu] {
    background: var(--ion-color-step-100) !important;
    border-color: var(--ion-color-step-400) !important;
}

.ios.dark ::ng-deep .e-grid .e-gridheader[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-gridheader[b-83nkqdkrbu] {
    background: var(--ion-color-step-200) !important;
    border-bottom-color: var(--ion-color-step-400) !important;
}

.ios.dark ::ng-deep .e-grid .e-gridheader .e-headercell[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-gridheader .e-headercell[b-83nkqdkrbu] {
    background: var(--ion-color-step-200) !important;
    border-right-color: var(--ion-color-step-400) !important;
}

.ios.dark ::ng-deep .e-grid .e-row[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-row[b-83nkqdkrbu] {
    border-bottom-color: var(--ion-color-step-300) !important;
}

.ios.dark ::ng-deep .e-grid .e-row .e-rowcell[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-row .e-rowcell[b-83nkqdkrbu] {
    border-right-color: var(--ion-color-step-300) !important;
}

.ios.dark ::ng-deep .e-grid .e-altrow[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-altrow[b-83nkqdkrbu] {
    background: var(--ion-color-step-150) !important;
}

.ios.dark ::ng-deep .e-grid .e-row:hover[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-row:hover[b-83nkqdkrbu] {
    background: var(--ion-color-step-250) !important;
}

.ios.dark ::ng-deep .e-grid .e-altrow:hover[b-83nkqdkrbu],
.md.dark ::ng-deep .e-grid .e-altrow:hover[b-83nkqdkrbu] {
    background: var(--ion-color-step-300) !important;
}

/* États spécifiques pour l'assurance */
.assurance-state-0[b-83nkqdkrbu] { color: #9e9e9e; } /* Non configuré */
.assurance-state-1[b-83nkqdkrbu] { color: #ff9800; } /* À vérifier */
.assurance-state-2[b-83nkqdkrbu] { color: #4caf50; } /* En ordre */
.assurance-state-3[b-83nkqdkrbu] { color: #f44336; } /* Urgent */
.assurance-state-4[b-83nkqdkrbu] { color: #d32f2f; } /* Dépassé */

/* Badges d'état */
.state-badge[b-83nkqdkrbu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.state-badge.non-configure[b-83nkqdkrbu] {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
}

.state-badge.a-verifier[b-83nkqdkrbu] {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.state-badge.en-ordre[b-83nkqdkrbu] {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.state-badge.urgent[b-83nkqdkrbu] {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.state-badge.depasse[b-83nkqdkrbu] {
    background: rgba(211, 47, 47, 0.2);
    color: #d32f2f;
}
/* /Pages/Contact.razor.rz.scp.css */
/* ================================
   CONTACT PAGE STYLES
   ================================ */

/* Page Layout - Full Height */
ion-page[b-w7e6vv2n1r] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

ion-header[b-w7e6vv2n1r] {
    background: var(--ion-color-primary);
}

ion-header ion-toolbar[b-w7e6vv2n1r] {
    --background: var(--ion-color-primary);
    --color: var(--ion-color-primary-contrast);
}

ion-header ion-title[b-w7e6vv2n1r] {
    color: var(--ion-color-primary-contrast);
    font-weight: 600;
}

ion-header ion-button[b-w7e6vv2n1r] {
    --color: var(--ion-color-primary-contrast);
}

ion-content[b-w7e6vv2n1r] {
    height: 100%;
    flex: 1;
    --background: var(--ion-background-color);
    --color: var(--ion-text-color);
}

/* Ensure content scrollable area takes full height */
ion-content .scroll-content[b-w7e6vv2n1r] {
    height: 100%;
    min-height: 100%;
    padding: 0;
}

/* Contact container */
.contact-container[b-w7e6vv2n1r] {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100%;
    background: var(--ion-background-color);
    color: var(--ion-text-color);
}

.contact-header[b-w7e6vv2n1r] {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
    color: var(--ion-color-primary-contrast);
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--ion-color-step-150);
}

.contact-header h1[b-w7e6vv2n1r] {
    margin: 0 0 10px 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ion-color-primary-contrast);
}

.contact-header p[b-w7e6vv2n1r] {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
    color: var(--ion-color-primary-contrast);
}

.contact-card[b-w7e6vv2n1r] {
    background: var(--ion-color-step-50);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px var(--ion-color-step-150);
    margin-bottom: 25px;
    border: 1px solid var(--ion-color-step-100);
}

.company-info[b-w7e6vv2n1r] {
    text-align: center;
    margin-bottom: 30px;
}

.company-info h3[b-w7e6vv2n1r] {
    color: var(--ion-color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    font-weight: 600;
}

.company-info p[b-w7e6vv2n1r] {
    color: var(--ion-color-step-600);
    line-height: 1.6;
    margin: 0;
}

.contact-methods[b-w7e6vv2n1r] {
    display: grid;
    gap: 15px;
}

.contact-method[b-w7e6vv2n1r] {
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--ion-color-step-100);
    border-radius: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.contact-method:hover[b-w7e6vv2n1r] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--ion-color-step-200);
    border-color: var(--ion-color-primary);
    background: var(--ion-color-step-150);
}

.contact-icon[b-w7e6vv2n1r] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 22px;
    color: white;
}

.whatsapp-icon[b-w7e6vv2n1r] { background: #25D366; }
.email-icon[b-w7e6vv2n1r] { background: #EA4335; }
.phone-icon[b-w7e6vv2n1r] { background: #4285F4; }
.website-icon[b-w7e6vv2n1r] { background: var(--ion-color-tertiary); }

.contact-info h4[b-w7e6vv2n1r] {
    margin: 0 0 5px 0;
    color: var(--ion-text-color);
    font-weight: 600;
    font-size: 1.1rem;
}

.contact-info p[b-w7e6vv2n1r] {
    margin: 0;
    color: var(--ion-color-step-600);
    font-size: 0.95rem;
}

.contact-info a[b-w7e6vv2n1r] {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.whatsapp-special[b-w7e6vv2n1r] {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    margin-bottom: 20px;
}

.whatsapp-special .contact-info h4[b-w7e6vv2n1r],
.whatsapp-special .contact-info p[b-w7e6vv2n1r] {
    color: white;
}

.whatsapp-special:hover[b-w7e6vv2n1r] {
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    background: linear-gradient(135deg, #128C7E, #25D366);
}

.contact-form-section[b-w7e6vv2n1r] {
    margin-top: 30px;
}

.contact-form-section h3[b-w7e6vv2n1r] {
    text-align: center;
    margin-bottom: 25px;
    color: var(--ion-text-color);
}

.contact-form[b-w7e6vv2n1r] {
    display: grid;
    gap: 20px;
}

.form-group[b-w7e6vv2n1r] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-w7e6vv2n1r] {
    font-weight: 600;
    color: var(--ion-text-color);
    margin-bottom: 8px;
}

.form-group input[b-w7e6vv2n1r],
.form-group textarea[b-w7e6vv2n1r] {
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background: var(--ion-background-color);
    color: var(--ion-text-color);
}

.form-group input:focus[b-w7e6vv2n1r],
.form-group textarea:focus[b-w7e6vv2n1r] {
    outline: none;
    border-color: var(--ion-color-primary);
    background: var(--ion-color-step-50);
}

.form-group textarea[b-w7e6vv2n1r] {
    resize: vertical;
    min-height: 120px;
}

.submit-btn[b-w7e6vv2n1r] {
    background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
    color: var(--ion-color-primary-contrast);
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover[b-w7e6vv2n1r] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--ion-color-primary-tint);
}

/* Contact page specific animations */
.contact-container .contact-method[b-w7e6vv2n1r] {
    position: relative;
    overflow: hidden;
}

.contact-container .contact-method[b-w7e6vv2n1r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.contact-container .contact-method:hover[b-w7e6vv2n1r]::before {
    left: 100%;
}

.contact-container .whatsapp-special[b-w7e6vv2n1r] {
    position: relative;
    overflow: hidden;
}

.contact-container .whatsapp-special[b-w7e6vv2n1r]::after {
    content: '💬';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    opacity: 0.7;
}

/* Form animations */
.contact-container .form-group input:focus[b-w7e6vv2n1r],
.contact-container .form-group textarea:focus[b-w7e6vv2n1r] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--ion-color-primary-tint);
}

/* Submit button animation */
.contact-container .submit-btn[b-w7e6vv2n1r] {
    position: relative;
    overflow: hidden;
}

.contact-container .submit-btn[b-w7e6vv2n1r]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.contact-container .submit-btn:active[b-w7e6vv2n1r]::before {
    width: 300px;
    height: 300px;
}

/* Dark theme specific styles */
@media (prefers-color-scheme: dark) {
    .contact-container .contact-method[b-w7e6vv2n1r]::before {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-container[b-w7e6vv2n1r] {
        padding: 15px;
    }
    
    .contact-header h1[b-w7e6vv2n1r] {
        font-size: 1.8rem;
    }
    
    .contact-card[b-w7e6vv2n1r] {
        padding: 20px;
    }
    
    .contact-method[b-w7e6vv2n1r] {
        padding: 15px;
    }
    
    .contact-icon[b-w7e6vv2n1r] {
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }
}

/* Mobile responsive animations */
@media (max-width: 480px) {
    .contact-container .contact-method[b-w7e6vv2n1r] {
        padding: 12px;
    }
    
    .contact-container .contact-method .contact-icon[b-w7e6vv2n1r] {
        width: 35px;
        height: 35px;
        margin-right: 12px;
        font-size: 18px;
    }
    
    .contact-header[b-w7e6vv2n1r] {
        padding: 20px 15px;
    }
    
    .contact-header h1[b-w7e6vv2n1r] {
        font-size: 1.6rem;
    }
}
/* /Pages/Controle.razor.rz.scp.css */
/* Conteneurs principaux */
.loading-container[b-pasks5li14], .error-container[b-pasks5li14] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 16px;
}

.error-container h3[b-pasks5li14] {
    color: var(--ion-color-danger);
    margin: 8px 0;
}

.error-container p[b-pasks5li14] {
    color: var(--ion-color-medium);
    max-width: 400px;
}

/* Barre de recherche */
.search-container[b-pasks5li14] {
    margin-bottom: 20px;
}

.search-container .search-input[b-pasks5li14] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-container .search-input:focus[b-pasks5li14] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.search-container .search-input[b-pasks5li14]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Filtres d'état */
.filter-container[b-pasks5li14] {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.filter-button[b-pasks5li14] {
    min-width: 120px;
    height: 36px;
    font-size: 0.85rem;
    border-radius: 18px;
    transition: all 0.3s ease;
    border: 2px solid var(--ion-color-primary);
    background: transparent;
    color: var(--ion-color-primary);
}

.filter-button.active[b-pasks5li14] {
    background: var(--ion-color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3);
}

.filter-button:hover:not(.active)[b-pasks5li14] {
    background: var(--ion-color-primary-tint);
    transform: translateY(-1px);
}

/* Grid container */
.grid-container[b-pasks5li14] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ion-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 100vw;
    border: 1px solid var(--ion-color-step-150);
}

/* Styles pour les lignes du grid selon l'état */
[b-pasks5li14] .row-non-configure {
    background-color: var(--ion-color-step-100) !important;
    border-left: 4px solid var(--ion-color-step-600) !important;
}

[b-pasks5li14] .row-non-configure .e-indentcell {
    background-color: var(--ion-color-step-150) !important;
}

[b-pasks5li14] .row-non-configure .e-recordplusexpand {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-non-configure .e-grouptopleftcell {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-a-verifier {
    background-color: var(--ion-color-warning-tint) !important;
    border-left: 4px solid var(--ion-color-warning) !important;
}

[b-pasks5li14] .row-a-verifier .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
}

[b-pasks5li14] .row-a-verifier .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-a-verifier .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-en-regle {
    background-color: var(--ion-color-success-tint) !important;
    border-left: 4px solid var(--ion-color-success) !important;
}

[b-pasks5li14] .row-en-regle .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
}

[b-pasks5li14] .row-en-regle .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-en-regle .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-urgent {
    background-color: var(--ion-color-danger-tint) !important;
    border-left: 4px solid var(--ion-color-danger) !important;
}

[b-pasks5li14] .row-urgent .e-indentcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
}

[b-pasks5li14] .row-urgent .e-recordplusexpand {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-urgent .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-depasse {
    background-color: rgba(211, 47, 47, 0.15) !important;
    border-left: 4px solid #d32f2f !important;
}

[b-pasks5li14] .row-depasse .e-indentcell {
    background-color: rgba(211, 47, 47, 0.2) !important;
}

[b-pasks5li14] .row-depasse .e-recordplusexpand {
    background-color: rgba(211, 47, 47, 0.2) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .row-depasse .e-grouptopleftcell {
    background-color: rgba(211, 47, 47, 0.2) !important;
    color: var(--ion-text-color) !important;
}

/* Hover effects pour les lignes */
[b-pasks5li14] .row-non-configure:hover {
    background-color: var(--ion-color-step-150) !important;
}

[b-pasks5li14] .row-non-configure:hover .e-indentcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-pasks5li14] .row-non-configure:hover .e-recordplusexpand {
    background-color: var(--ion-color-step-200) !important;
}

[b-pasks5li14] .row-non-configure:hover .e-grouptopleftcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-pasks5li14] .row-a-verifier:hover {
    background-color: var(--ion-color-warning-shade) !important;
}

[b-pasks5li14] .row-a-verifier:hover .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-pasks5li14] .row-a-verifier:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-pasks5li14] .row-a-verifier:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-pasks5li14] .row-en-regle:hover {
    background-color: var(--ion-color-success-shade) !important;
}

[b-pasks5li14] .row-en-regle:hover .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-pasks5li14] .row-en-regle:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-pasks5li14] .row-en-regle:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-pasks5li14] .row-urgent:hover {
    background-color: var(--ion-color-danger-shade) !important;
}

[b-pasks5li14] .row-urgent:hover .e-indentcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-pasks5li14] .row-urgent:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-pasks5li14] .row-urgent:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-danger-rgb), 0.25) !important;
}

[b-pasks5li14] .row-depasse:hover {
    background-color: rgba(211, 47, 47, 0.25) !important;
}

[b-pasks5li14] .row-depasse:hover .e-indentcell {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

[b-pasks5li14] .row-depasse:hover .e-recordplusexpand {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

[b-pasks5li14] .row-depasse:hover .e-grouptopleftcell {
    background-color: rgba(211, 47, 47, 0.35) !important;
}

/* Styles pour la sélection de ligne complète */
[b-pasks5li14] .e-grid .e-row.e-active {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.2)) !important;
    border: 2px solid var(--ion-color-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3) !important;
    border-radius: 4px !important;
}

[b-pasks5li14] .e-grid .e-row.e-active:hover {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.3)) !important;
}

[b-pasks5li14] .e-grid .e-row.e-active .e-rowcell {
    border-color: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast, var(--ion-text-color)) !important;
}

/* Style de survol général pour les lignes */
[b-pasks5li14] .e-grid .e-row:hover {
    background-color: var(--ion-color-step-150) !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

/* Améliorer l'apparence des cellules sélectionnées */
[b-pasks5li14] .e-grid .e-row.e-active .vehicle-name {
    color: var(--ion-color-primary-shade, var(--ion-text-color)) !important;
    font-weight: 700 !important;
}

[b-pasks5li14] .e-grid .e-row.e-active .vehicle-matricule {
    color: var(--ion-color-primary, var(--ion-color-medium)) !important;
}

/* Personnalisation du Grid Syncfusion */
[b-pasks5li14] .e-grid .e-gridheader {
    background: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast) !important;
}

[b-pasks5li14] .e-grid .e-headercell {
    border-right: 1px solid var(--ion-color-primary-shade) !important;
    font-weight: 600 !important;
    color: var(--ion-color-primary-contrast) !important;
    background: var(--ion-color-primary) !important;
}

[b-pasks5li14] .e-grid .e-content {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
}

[b-pasks5li14] .e-grid .e-rowcell {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    border-right: 1px solid var(--ion-color-step-150) !important;
}

[b-pasks5li14] .e-grid .e-groupdroparea {
    background: var(--ion-color-step-100) !important;
    border: 2px dashed var(--ion-color-step-400) !important;
    border-radius: 8px !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .e-grid .e-groupheadercell {
    background: var(--ion-color-secondary) !important;
    color: var(--ion-color-secondary-contrast) !important;
    font-weight: 600 !important;
}

[b-pasks5li14] .e-grid .e-groupcaption {
    background: var(--ion-color-step-100) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-200) !important;
}

[b-pasks5li14] .e-grid .e-summarycell {
    background: var(--ion-color-step-50) !important;
    color: var(--ion-text-color) !important;
    border-top: 1px solid var(--ion-color-step-200) !important;
}

/* Cellules d'indentation pour les groupes */
[b-pasks5li14] .e-grid .e-indentcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
}

/* Effet hover pour les cellules d'indentation */
[b-pasks5li14] .e-grid .e-row:hover .e-indentcell {
    background: var(--ion-color-step-150) !important;
}

/* Cellules d'expansion pour les groupes */
[b-pasks5li14] .e-grid .e-recordplusexpand {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .e-grid .e-row:hover .e-recordplusexpand {
    background: var(--ion-color-step-150) !important;
}

/* Cellule supérieure gauche des groupes */
[b-pasks5li14] .e-grid .e-grouptopleftcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .e-grid .e-row:hover .e-grouptopleftcell {
    background: var(--ion-color-step-150) !important;
}

/* Amélioration des styles pour mode sombre/clair */
[b-pasks5li14] .e-grid .e-icon-grpexpand,
[b-pasks5li14] .e-grid .e-icon-grpcollapse {
    color: var(--ion-text-color) !important;
}

[b-pasks5li14] .e-grid .e-groupheadercell .e-headertext {
    color: var(--ion-color-secondary-contrast) !important;
}

[b-pasks5li14] .e-grid .e-recordplusexpand,
[b-pasks5li14] .e-grid .e-recordpluscollapse {
    color: var(--ion-color-primary) !important;
}

[b-pasks5li14] .e-grid .e-selectionbackground {
    background: var(--ion-color-primary-tint) !important;
}

/* Amélioration des animations */
[b-pasks5li14] .e-grid .e-row {
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

[b-pasks5li14] .e-grid .e-rowcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-pasks5li14] .e-grid .e-indentcell {
    transition: background-color 0.2s ease !important;
}

[b-pasks5li14] .e-grid .e-recordplusexpand {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-pasks5li14] .e-grid .e-grouptopleftcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Informations véhicule dans le grid */
.vehicle-info[b-pasks5li14] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-header[b-pasks5li14] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vehicle-details[b-pasks5li14] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-name[b-pasks5li14] {
    font-weight: 600;
    color: var(--ion-text-color);
    font-size: 0.95rem;
}

.vehicle-matricule[b-pasks5li14] {
    font-size: 0.8rem;
    color: var(--ion-color-step-600);
    font-style: italic;
}

/* Style pour le bouton d'édition */
.vehicle-header ion-button[b-pasks5li14] {
    --padding-start: 4px;
    --padding-end: 4px;
    --padding-top: 4px;
    --padding-bottom: 4px;
    min-height: 28px;
    width: 28px;
    flex-shrink: 0;
}

.vehicle-header ion-button:hover[b-pasks5li14] {
    --background: rgba(var(--ion-color-primary-rgb), 0.1);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Styles pour les dates */
.date-undefined[b-pasks5li14] {
    color: var(--ion-color-medium);
    font-style: italic;
}

.date-ok[b-pasks5li14] {
    color: var(--ion-color-success);
    font-weight: 500;
}

.date-warning[b-pasks5li14] {
    color: var(--ion-color-warning);
    font-weight: 500;
}

.date-urgent[b-pasks5li14] {
    color: var(--ion-color-danger);
    font-weight: 600;
}

.date-expired[b-pasks5li14] {
    color: var(--ion-color-danger);
    font-weight: 700;
    text-decoration: line-through;
}

.date-diff[b-pasks5li14] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 2px;
}

/* Modal de configuration de contrôle technique */
.controle-modal[b-pasks5li14] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.controle-modal.modal-open[b-pasks5li14] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-pasks5li14] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.controle-modal.modal-open .modal-content[b-pasks5li14] {
    transform: scale(1);
}

.modal-header[b-pasks5li14] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ion-color-step-200);
}

.modal-title[b-pasks5li14] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ion-text-color);
}

.modal-title ion-icon[b-pasks5li14] {
    font-size: 1.5rem;
    color: var(--ion-color-primary);
}

/* Section informations véhicule */
.vehicle-info-section[b-pasks5li14] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--ion-color-step-200);
    background: var(--ion-color-step-50);
}

.vehicle-info-section h4[b-pasks5li14] {
    margin: 0 0 8px 0;
    color: var(--ion-text-color);
    font-size: 1.1rem;
    font-weight: 600;
}

.vehicle-info-section p[b-pasks5li14] {
    margin: 4px 0;
    color: var(--ion-color-medium);
    font-size: 0.9rem;
}

/* Section formulaire */
.form-section[b-pasks5li14] {
    padding: 24px;
}

.form-group[b-pasks5li14] {
    margin-bottom: 20px;
}

.form-group label[b-pasks5li14] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--ion-text-color);
    font-size: 0.9rem;
}

.form-control[b-pasks5li14] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus[b-pasks5li14] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.form-control[b-pasks5li14]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Message d'erreur dans le modal */
.error-message[b-pasks5li14] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(var(--ion-color-danger-rgb), 0.1);
    border: 1px solid var(--ion-color-danger-tint);
    border-radius: 8px;
    color: var(--ion-color-danger);
    font-size: 0.9rem;
    margin-top: 16px;
}

.error-message ion-icon[b-pasks5li14] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Actions du modal */
.modal-actions[b-pasks5li14] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--ion-color-step-200);
    background: var(--ion-color-step-50);
}

.modal-actions ion-button[b-pasks5li14] {
    flex: 1;
    height: 44px;
    font-weight: 500;
}

.modal-actions ion-button[fill="outline"][b-pasks5li14] {
    --border-width: 2px;
}

/* Responsive design */
@media (max-width: 1024px) {
    .grid-container[b-pasks5li14] {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .controle-modal[b-pasks5li14] {
        padding: 10px;
    }
    
    .modal-content[b-pasks5li14] {
        max-height: 95vh;
    }
    
    .modal-header[b-pasks5li14],
    .vehicle-info-section[b-pasks5li14],
    .form-section[b-pasks5li14],
    .modal-actions[b-pasks5li14] {
        padding: 16px 20px;
    }
    
    .form-group[b-pasks5li14] {
        margin-bottom: 16px;
    }
    
    .modal-actions[b-pasks5li14] {
        flex-direction: column;
    }
    
    .modal-actions ion-button[b-pasks5li14] {
        flex: none;
    }
    
    .filter-container[b-pasks5li14] {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
    }
    
    .filter-button[b-pasks5li14] {
        min-width: 100px;
        flex-shrink: 0;
    }
    
    .search-container[b-pasks5li14],
    .filter-container[b-pasks5li14] {
        margin: 0 -16px 16px -16px;
        padding: 16px;
        border-radius: 0;
    }
    
    .grid-container[b-pasks5li14] {
        margin: 0 -16px;
        border-radius: 0;
        overflow-x: hidden;
    }
    
    /* Force la grille à rester fixe sur mobile */
    [b-pasks5li14] .e-grid {
        min-width: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    [b-pasks5li14] .e-gridheader,
    [b-pasks5li14] .e-gridcontent {
        overflow-x: hidden !important;
    }
    
    /* Ajuster les colonnes pour mobile */
    [b-pasks5li14] .e-headercell,
    [b-pasks5li14] .e-rowcell {
        min-width: auto !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 480px) {
    .vehicle-info[b-pasks5li14] {
        min-width: 150px;
    }
}

/* Animations */
@keyframes slideInUp-b-pasks5li14 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content[b-pasks5li14] {
    animation: slideInUp-b-pasks5li14 0.3s ease;
}

/* États spécifiques pour le contrôle technique */
.controle-state-0[b-pasks5li14] { color: #9e9e9e; } /* Non configuré */
.controle-state-1[b-pasks5li14] { color: #ff9800; } /* À vérifier */
.controle-state-2[b-pasks5li14] { color: #4caf50; } /* En ordre */
.controle-state-3[b-pasks5li14] { color: #f44336; } /* Urgent */
.controle-state-4[b-pasks5li14] { color: #d32f2f; } /* Dépassé */

/* Badges d'état */
.state-badge[b-pasks5li14] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.state-badge.non-configure[b-pasks5li14] {
    background: rgba(158, 158, 158, 0.2);
    color: #9e9e9e;
}

.state-badge.a-verifier[b-pasks5li14] {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.state-badge.en-ordre[b-pasks5li14] {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.state-badge.urgent[b-pasks5li14] {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.state-badge.depasse[b-pasks5li14] {
    background: rgba(211, 47, 47, 0.2);
    color: #d32f2f;
}
/* /Pages/DailyParcReport.razor.rz.scp.css */
/* DailyParcReport.razor.css */

.daily-parc-report-page[b-ksqyowgcjr] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    color: var(--text-color);
}

/* Variables CSS pour le mode sombre/clair */
.daily-parc-report-page[data-theme="light"][b-ksqyowgcjr] {
    --background-color: #ffffff;
    --text-color: #333333;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
    --primary-color: #007bff;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --loading-bg: rgba(255, 255, 255, 0.95);
}

.daily-parc-report-page[data-theme="dark"][b-ksqyowgcjr] {
    --background-color: #1a1a1a;
    --text-color: #e0e0e0;
    --card-bg: #2d2d2d;
    --border-color: #444444;
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --loading-bg: rgba(26, 26, 26, 0.95);
}

/* Header */
.header[b-ksqyowgcjr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-title[b-ksqyowgcjr] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.header-icons[b-ksqyowgcjr] {
    display: flex;
    gap: 0.5rem;
}

.header-icon-btn[b-ksqyowgcjr] {
    --border-radius: 8px;
    --padding-start: 8px;
    --padding-end: 8px;
    --min-height: 36px;
    font-size: 1.1rem;
}

.export-pdf-btn[b-ksqyowgcjr] {
    --color: #dc3545;
}

.export-excel-btn[b-ksqyowgcjr] {
    --color: #198754;
}

.document-btn[b-ksqyowgcjr] {
    --color: var(--primary-color);
}

/* Content */
.content[b-ksqyowgcjr] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

/* Loading Container */
.loading-container[b-ksqyowgcjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: var(--loading-bg);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.loading-header[b-ksqyowgcjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
}

.progress-bar-container[b-ksqyowgcjr] {
    width: 100%;
    max-width: 300px;
    margin: 1rem 0;
}

.progress-bar[b-ksqyowgcjr] {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-ksqyowgcjr] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
    transition: width 0.3s ease;
}

.progress-text[b-ksqyowgcjr] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

.cancel-btn[b-ksqyowgcjr] {
    --background: var(--danger-color);
    --color: white;
    margin-top: 1rem;
}

.loading-message[b-ksqyowgcjr] {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-color);
    opacity: 0.8;
}

.loading-message p[b-ksqyowgcjr] {
    margin: 0.5rem 0;
}

/* Data Grid Container */
.data-grid-container[b-ksqyowgcjr] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.data-grid-container h3[b-ksqyowgcjr] {
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 600;
}

.data-grid-container p[b-ksqyowgcjr] {
    margin: 0 0 1.5rem 0;
    color: var(--text-color);
    opacity: 0.8;
}

/* Actions Section */
.actions-section[b-ksqyowgcjr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.export-btn[b-ksqyowgcjr] {
    --background: var(--success-color);
    --color: white;
    --border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.new-report-btn[b-ksqyowgcjr] {
    --color: var(--primary-color);
    --border-color: var(--primary-color);
    --border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
}

/* Error Container */
.error-container[b-ksqyowgcjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--danger-color);
}

.error-container ion-icon[b-ksqyowgcjr] {
    font-size: 4rem;
    color: var(--danger-color);
    margin-bottom: 1rem;
}

.error-container h3[b-ksqyowgcjr] {
    color: var(--danger-color);
    margin: 0 0 1rem 0;
}

.error-container p[b-ksqyowgcjr] {
    color: var(--text-color);
    margin: 0 0 2rem 0;
    opacity: 0.8;
}

.error-container ion-button[b-ksqyowgcjr] {
    --background: var(--danger-color);
    --color: white;
}

/* Empty State */
.empty-state[b-ksqyowgcjr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.empty-state ion-icon[b-ksqyowgcjr] {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h3[b-ksqyowgcjr] {
    color: var(--text-color);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.empty-state p[b-ksqyowgcjr] {
    color: var(--text-color);
    margin: 0 0 2rem 0;
    opacity: 0.7;
    line-height: 1.5;
}

.empty-state ion-button[b-ksqyowgcjr] {
    --background: var(--primary-color);
    --color: white;
    --border-radius: 10px;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header[b-ksqyowgcjr] {
        padding: 0.75rem;
    }
    
    .page-title[b-ksqyowgcjr] {
        font-size: 1.1rem;
    }
    
    .header-icon-btn[b-ksqyowgcjr] {
        --min-height: 32px;
        font-size: 1rem;
    }
    
    .content[b-ksqyowgcjr] {
        padding: 0.75rem;
    }
    
    .data-grid-container[b-ksqyowgcjr] {
        padding: 1rem;
    }
    
    .data-grid-container h3[b-ksqyowgcjr] {
        font-size: 1.1rem;
    }
    
    .loading-container[b-ksqyowgcjr],
    .empty-state[b-ksqyowgcjr],
    .error-container[b-ksqyowgcjr] {
        padding: 1.5rem;
        min-height: 50vh;
    }
}

@media (max-width: 480px) {
    .header[b-ksqyowgcjr] {
        padding: 0.5rem;
    }
    
    .page-title[b-ksqyowgcjr] {
        font-size: 1rem;
    }
    
    .header-icons[b-ksqyowgcjr] {
        gap: 0.25rem;
    }
    
    .header-icon-btn[b-ksqyowgcjr] {
        --min-height: 28px;
        --padding-start: 6px;
        --padding-end: 6px;
        font-size: 0.9rem;
    }
    
    .content[b-ksqyowgcjr] {
        padding: 0.5rem;
    }
    
    .data-grid-container[b-ksqyowgcjr] {
        padding: 0.75rem;
    }
    
    .actions-section[b-ksqyowgcjr] {
        margin-top: 1rem;
    }
    
    .loading-container[b-ksqyowgcjr],
    .empty-state[b-ksqyowgcjr],
    .error-container[b-ksqyowgcjr] {
        padding: 1rem;
        min-height: 40vh;
    }
}

/* Animation */
.loading-header ion-spinner[b-ksqyowgcjr] {
    animation: pulse-b-ksqyowgcjr 2s infinite;
}

@keyframes pulse-b-ksqyowgcjr {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Grid customization */
[b-ksqyowgcjr] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

[b-ksqyowgcjr] .e-grid .e-gridheader {
    background: var(--primary-color);
    color: white;
}

[b-ksqyowgcjr] .e-grid .e-headercell {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

[b-ksqyowgcjr] .e-grid .e-rowcell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
}

[b-ksqyowgcjr] .e-grid .e-row:hover .e-rowcell {
    background: var(--border-color);
}

/* Dark mode specific grid styling */
[data-theme="dark"][b-ksqyowgcjr]  .e-grid {
    background: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"][b-ksqyowgcjr]  .e-grid .e-rowcell {
    background: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"][b-ksqyowgcjr]  .e-grid .e-row:hover .e-rowcell {
    background: #3a3a3a;
}
/* /Pages/DailyReport.razor.rz.scp.css */
/* Page Rapport Journalier - Support Dark/Light Mode - Style identique à AnnualReport */
.daily-report-page[b-4jswc29xkd] {
    min-height: 100vh;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Light Theme */
    .daily-report-page[data-theme="light"][b-4jswc29xkd] {
        background-color: #ffffff;
        color: #000000;
    }

    /* Dark Theme */
    .daily-report-page[data-theme="dark"][b-4jswc29xkd] {
        background-color: #1E1E1E;
        color: #FFFFFF;
    }

/* Header */
.header[b-4jswc29xkd] {
    background-color: #F5A623;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

    .header ion-button[b-4jswc29xkd] {
        --color: #000000;
        --background: transparent;
    }

.page-title[b-4jswc29xkd] {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    flex: 1;
    margin: 0;
}

.header-icons[b-4jswc29xkd] {
    display: flex;
    gap: 10px;
}

.header-icon-btn[b-4jswc29xkd] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    --background: rgba(0, 0, 0, 0.1);
    --color: #000000;
    transition: all 0.3s ease;
}

    .header-icon-btn i[b-4jswc29xkd] {
        font-size: 20px;
        font-weight: 400;
    }

.header ion-button i[b-4jswc29xkd] {
    font-size: 22px;
    font-weight: 400;
}

.header-icon-btn:hover[b-4jswc29xkd] {
    --background: rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.header-icon-btn:disabled[b-4jswc29xkd] {
    --background: rgba(0, 0, 0, 0.05);
    --color: rgba(0, 0, 0, 0.3);
    transform: none;
}

/* Boutons d'export spécifiques */
.export-pdf-btn[b-4jswc29xkd] {
    --background: rgba(220, 53, 69, 0.1);
    --color: #dc3545;
}

    .export-pdf-btn:hover:not(:disabled)[b-4jswc29xkd] {
        --background: rgba(220, 53, 69, 0.2);
    }

.export-excel-btn[b-4jswc29xkd] {
    --background: rgba(25, 135, 84, 0.1);
    --color: #198754;
}

    .export-excel-btn:hover:not(:disabled)[b-4jswc29xkd] {
        --background: rgba(25, 135, 84, 0.2);
    }

.document-btn[b-4jswc29xkd] {
    --background: rgba(13, 110, 253, 0.1);
    --color: #0d6efd;
}

    .document-btn:hover:not(:disabled)[b-4jswc29xkd] {
        --background: rgba(13, 110, 253, 0.2);
    }

/* Content */
.content[b-4jswc29xkd] {
    padding: 16px;
}

/* Loading - Support Dark/Light Mode */
.loading-container[b-4jswc29xkd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

    .loading-container ion-spinner[b-4jswc29xkd] {
        --color: #F5A623;
        margin-bottom: 20px;
        width: 40px;
        height: 40px;
    }

[data-theme="light"] .loading-container p[b-4jswc29xkd] {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
}

[data-theme="dark"] .loading-container p[b-4jswc29xkd] {
    color: #FFFFFF;
    font-size: 16px;
    margin-bottom: 10px;
}

.progress-info[b-4jswc29xkd] {
    color: #F5A623;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Progress Bar - Support Dark/Light Mode */
.progress-bar-container[b-4jswc29xkd] {
    width: 100%;
    margin-top: 16px;
}

.progress-bar[b-4jswc29xkd] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

[data-theme="light"] .progress-bar[b-4jswc29xkd] {
    background-color: #e0e0e0;
}

[data-theme="dark"] .progress-bar[b-4jswc29xkd] {
    background-color: #333333;
}

.progress-fill[b-4jswc29xkd] {
    height: 100%;
    background: linear-gradient(90deg, #F5A623, #FF8C00);
    border-radius: 4px;
    transition: width 0.3s ease;
}

[data-theme="light"] .progress-text[b-4jswc29xkd] {
    color: #666666;
    font-size: 12px;
    text-align: center;
    display: block;
}

[data-theme="dark"] .progress-text[b-4jswc29xkd] {
    color: #CCCCCC;
    font-size: 12px;
    text-align: center;
    display: block;
}

/* Data Grid Container - Support Dark/Light Mode */
.data-grid-container[b-4jswc29xkd] {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 16px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme styles */
[data-theme="light"] .data-grid-container[b-4jswc29xkd] {
    background: #f8f9fa;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Dark theme styles */
[data-theme="dark"] .data-grid-container[b-4jswc29xkd] {
    background: #2C2C2C;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Loading Grid Styles */
.loading-grid[b-4jswc29xkd] {
    position: relative;
}

.loading-header[b-4jswc29xkd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    border-bottom: 2px solid #F5A623;
    margin-bottom: 16px;
    gap: 12px;
}

    .loading-header ion-spinner[b-4jswc29xkd] {
        --color: #F5A623;
        width: 24px;
        height: 24px;
    }

    .loading-header span[b-4jswc29xkd] {
        color: #F5A623;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }

    .loading-header .progress-bar-container[b-4jswc29xkd] {
        width: 100%;
        max-width: 300px;
    }

    .loading-header .cancel-btn[b-4jswc29xkd] {
        --background: transparent;
        --color: #f44336;
        --border-color: #f44336;
        --border-radius: 6px;
        height: 32px;
        font-size: 12px;
    }

        .loading-header .cancel-btn:hover[b-4jswc29xkd] {
            --background: rgba(244, 67, 54, 0.1);
        }

/* Syncfusion Grid Theming - Support Dark/Light Mode avec priorité élevée */

/* Common styles for all themes */
.data-grid-container .e-grid[b-4jswc29xkd] {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

    /* Padding 0 pour toutes les cellules de la grille */
    .data-grid-container .e-grid .e-rowcell[b-4jswc29xkd] {
        padding: 0 !important;
        border-right: none !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    .data-grid-container .e-grid .e-headercell[b-4jswc29xkd] {
        padding: 0 !important;
        border-right: none !important;
        font-weight: bold !important;
        font-size: 14px !important;
        text-align: center !important;
    }

[data-theme="light"] .e-grid .e-headercell[b-4jswc29xkd],
[data-theme="light"] .data-grid-container .e-grid .e-headercell[b-4jswc29xkd] {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border-bottom: 2px solid #007bff !important;
}

[data-theme="light"] .e-grid .e-row[b-4jswc29xkd],
[data-theme="light"] .data-grid-container .e-grid .e-row[b-4jswc29xkd] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

    [data-theme="light"] .e-grid .e-row:hover[b-4jswc29xkd],
    [data-theme="light"] .data-grid-container .e-grid .e-row:hover[b-4jswc29xkd] {
        background-color: #f5f5f5 !important;
    }

[data-theme="light"] .e-grid .e-altrow[b-4jswc29xkd],
[data-theme="light"] .data-grid-container .e-grid .e-altrow[b-4jswc29xkd] {
    background-color: #f8f9fa !important;
}

    [data-theme="light"] .e-grid .e-altrow:hover[b-4jswc29xkd],
    [data-theme="light"] .data-grid-container .e-grid .e-altrow:hover[b-4jswc29xkd] {
        background-color: #e9ecef !important;
    }

/* Styles globaux pour Syncfusion - Dark Theme */
[data-theme="dark"] .e-grid[b-4jswc29xkd],
[data-theme="dark"] .data-grid-container .e-grid[b-4jswc29xkd] {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
    border: 1px solid #444444 !important;
}

    [data-theme="dark"] .e-grid .e-headercell[b-4jswc29xkd],
    [data-theme="dark"] .data-grid-container .e-grid .e-headercell[b-4jswc29xkd] {
        background-color: #333333 !important;
        color: #FFFFFF !important;
        border-bottom: 2px solid #F5A623 !important;
    }

    [data-theme="dark"] .e-grid .e-row[b-4jswc29xkd],
    [data-theme="dark"] .data-grid-container .e-grid .e-row[b-4jswc29xkd] {
        background-color: #2C2C2C !important;
        color: #FFFFFF !important;
        border-bottom: 1px solid #444444 !important;
    }

        [data-theme="dark"] .e-grid .e-row:hover[b-4jswc29xkd],
        [data-theme="dark"] .data-grid-container .e-grid .e-row:hover[b-4jswc29xkd] {
            background-color: #353535 !important;
        }

    [data-theme="dark"] .e-grid .e-altrow[b-4jswc29xkd],
    [data-theme="dark"] .data-grid-container .e-grid .e-altrow[b-4jswc29xkd] {
        background-color: #2A2A2A !important;
    }

        [data-theme="dark"] .e-grid .e-altrow:hover[b-4jswc29xkd],
        [data-theme="dark"] .data-grid-container .e-grid .e-altrow:hover[b-4jswc29xkd] {
            background-color: #353535 !important;
        }

/* Style spécial pour la ligne de récapitulatif - Light theme */
[data-theme="light"] .e-grid .summary-row[b-4jswc29xkd],
[data-theme="light"] .data-grid-container .e-grid .summary-row[b-4jswc29xkd] {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    font-weight: bold !important;
    border-top: 2px solid #1976d2 !important;
    border-bottom: 2px solid #1976d2 !important;
}

    [data-theme="light"] .e-grid .summary-row:hover[b-4jswc29xkd],
    [data-theme="light"] .data-grid-container .e-grid .summary-row:hover[b-4jswc29xkd] {
        background-color: #bbdefb !important;
    }

    [data-theme="light"] .e-grid .summary-row .e-rowcell[b-4jswc29xkd],
    [data-theme="light"] .data-grid-container .e-grid .summary-row .e-rowcell[b-4jswc29xkd] {
        font-weight: bold !important;
        color: #1976d2 !important;
        background-color: transparent !important;
    }

/* Style spécial pour la ligne de récapitulatif - Dark theme */
[data-theme="dark"] .e-grid .summary-row[b-4jswc29xkd],
[data-theme="dark"] .data-grid-container .e-grid .summary-row[b-4jswc29xkd] {
    background-color: #444444 !important;
    color: #F5A623 !important;
    font-weight: bold !important;
    border-top: 2px solid #F5A623 !important;
    border-bottom: 2px solid #F5A623 !important;
}

    [data-theme="dark"] .e-grid .summary-row:hover[b-4jswc29xkd],
    [data-theme="dark"] .data-grid-container .e-grid .summary-row:hover[b-4jswc29xkd] {
        background-color: #4a4a4a !important;
    }

    [data-theme="dark"] .e-grid .summary-row .e-rowcell[b-4jswc29xkd],
    [data-theme="dark"] .data-grid-container .e-grid .summary-row .e-rowcell[b-4jswc29xkd] {
        font-weight: bold !important;
        color: #F5A623 !important;
        background-color: transparent !important;
    }

/* Actions Section - Support Dark/Light Mode */
.actions-section[b-4jswc29xkd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

    .actions-section ion-button[b-4jswc29xkd] {
        margin: 0;
        height: 44px;
        --border-radius: 8px;
        font-weight: 500;
    }

.export-btn[b-4jswc29xkd] {
    --background: #4CAF50;
    --color: white;
}

    .export-btn:hover[b-4jswc29xkd] {
        --background: #45A049;
    }

.new-report-btn[b-4jswc29xkd] {
    --background: transparent;
    --color: #F5A623;
    --border-color: #F5A623;
    --border-width: 2px;
    --border-style: solid;
}

    .new-report-btn:hover[b-4jswc29xkd] {
        --background: rgba(245, 166, 35, 0.1);
    }

/* Empty State - Support Dark/Light Mode */
.empty-state[b-4jswc29xkd] {
    text-align: center;
    padding: 60px 20px;
}

    .empty-state ion-icon[b-4jswc29xkd] {
        font-size: 64px;
        margin-bottom: 16px;
        color: #F5A623;
    }

[data-theme="light"] .empty-state h3[b-4jswc29xkd] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}

[data-theme="dark"] .empty-state h3[b-4jswc29xkd] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}

[data-theme="light"] .empty-state p[b-4jswc29xkd] {
    margin: 0 0 24px 0;
    color: #666666;
}

[data-theme="dark"] .empty-state p[b-4jswc29xkd] {
    margin: 0 0 24px 0;
    color: #CCCCCC;
}

/* Error State - Support Dark/Light Mode */
.error-container[b-4jswc29xkd] {
    text-align: center;
    padding: 60px 20px;
}

    .error-container ion-icon[b-4jswc29xkd] {
        font-size: 64px;
        color: #d32f2f;
        margin-bottom: 16px;
    }

[data-theme="light"] .error-container h3[b-4jswc29xkd] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #d32f2f;
}

[data-theme="dark"] .error-container h3[b-4jswc29xkd] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #f44336;
}

[data-theme="light"] .error-container p[b-4jswc29xkd] {
    margin: 0 0 24px 0;
    color: #666666;
}

[data-theme="dark"] .error-container p[b-4jswc29xkd] {
    margin: 0 0 24px 0;
    color: #CCCCCC;
}

/* Responsive design */
@media (max-width: 768px) {
    .header[b-4jswc29xkd] {
        padding: 8px 12px;
    }

    .content[b-4jswc29xkd] {
        padding: 12px;
    }

    .data-grid-container[b-4jswc29xkd] {
        padding: 12px;
    }

    .header-icons[b-4jswc29xkd] {
        gap: 6px;
    }

    .header-icon-btn[b-4jswc29xkd] {
        width: 36px;
        height: 36px;
    }

        .header-icon-btn i[b-4jswc29xkd] {
            font-size: 18px;
        }

    .page-title[b-4jswc29xkd] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header[b-4jswc29xkd] {
        padding: 6px 8px;
    }

    .content[b-4jswc29xkd] {
        padding: 8px;
    }

    .data-grid-container[b-4jswc29xkd] {
        padding: 8px;
    }

    .header-icons[b-4jswc29xkd] {
        gap: 4px;
    }

    .header-icon-btn[b-4jswc29xkd] {
        width: 32px;
        height: 32px;
    }

        .header-icon-btn i[b-4jswc29xkd] {
            font-size: 16px;
        }

    .page-title[b-4jswc29xkd] {
        font-size: 14px;
    }
}
/* /Pages/EcoDrive.razor.rz.scp.css */
/* Page Eco-Drive - Styles avec support thème dark/light */

/* Variables pour les thèmes */
:root[b-rd5buuxmml] {
    --ecodrive-bg-primary: var(--ion-color-light);
    --ecodrive-bg-secondary: var(--ion-color-light-shade);
    --ecodrive-text-primary: var(--ion-color-dark);
    --ecodrive-text-secondary: var(--ion-color-medium);
    --ecodrive-border: var(--ion-color-light-shade);
    --ecodrive-shadow: rgba(0, 0, 0, 0.1);
    --ecodrive-card-shadow: 0 2px 8px var(--ecodrive-shadow);
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root[b-rd5buuxmml] {
        --ecodrive-bg-primary: var(--ion-color-dark-tint);
        --ecodrive-bg-secondary: var(--ion-color-dark-shade);
        --ecodrive-text-primary: var(--ion-color-light);
        --ecodrive-text-secondary: var(--ion-color-medium);
        --ecodrive-border: var(--ion-color-dark-shade);
        --ecodrive-shadow: rgba(255, 255, 255, 0.05);
        --ecodrive-card-shadow: 0 2px 8px var(--ecodrive-shadow);
    }
}

/* Container principal de la page */
.ecodrive-page[b-rd5buuxmml] {
    background: var(--ion-background-color);
    min-height: 100vh;
    padding-bottom: 20px;
}

/* En-tête de page */
.page-header[b-rd5buuxmml] {
    background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
    color: white;
    padding: 24px 16px;
    text-align: center;
    margin-bottom: 16px;
}

.page-header h2[b-rd5buuxmml] {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-header p[b-rd5buuxmml] {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Section critères de recherche */
.search-criteria[b-rd5buuxmml] {
    background: var(--ecodrive-bg-primary);
    margin: 0 16px 16px 16px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: var(--ecodrive-card-shadow);
}

.criteria-header[b-rd5buuxmml] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.criteria-header h4[b-rd5buuxmml] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

.criteria-header ion-button[b-rd5buuxmml] {
    --height: 36px;
    --padding-start: 12px;
    --padding-end: 12px;
    font-size: 14px;
}

/* Critères actifs */
.active-criteria[b-rd5buuxmml] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.criteria-item[b-rd5buuxmml] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--ecodrive-bg-secondary);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ecodrive-text-primary);
}

.criteria-icon[b-rd5buuxmml] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--ion-color-primary-tint);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ion-color-primary);
}

.criteria-details[b-rd5buuxmml] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.criteria-label[b-rd5buuxmml] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ecodrive-text-secondary);
    margin: 0;
}

.criteria-value[b-rd5buuxmml] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
    margin: 0;
}

.no-criteria[b-rd5buuxmml] {
    text-align: center;
    padding: 20px;
    color: var(--ecodrive-text-secondary);
    font-style: italic;
}

.no-criteria p[b-rd5buuxmml] {
    margin: 0;
}

/* Loading container */
.loading-container[b-rd5buuxmml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-container p[b-rd5buuxmml] {
    margin-top: 16px;
    color: var(--ecodrive-text-secondary);
}

/* Carte score global */
.global-score-card[b-rd5buuxmml], .global-score-section[b-rd5buuxmml] {
    background: var(--ecodrive-bg-primary);
    margin: 0 16px 16px 16px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--ecodrive-card-shadow);
    display: flex;
    align-items: center;
    gap: 20px;
}

.score-circle[b-rd5buuxmml] {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ecodrive-bg-secondary) 0%, var(--ecodrive-border) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 3px solid var(--ion-color-primary-tint);
}

.score-circle.small[b-rd5buuxmml] {
    width: 32px;
    height: 32px;
    border-width: 2px;
    font-size: 11px;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .score-circle[b-rd5buuxmml] {
        background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
        border: 3px solid var(--ion-color-primary);
    }
    
    .score-circle.small[b-rd5buuxmml] {
        border-width: 2px;
    }
}

.score-value[b-rd5buuxmml] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.score-label[b-rd5buuxmml] {
    font-size: 12px;
    color: var(--ecodrive-text-secondary);
    margin-top: 4px;
    text-align: center;
}

.score-metrics[b-rd5buuxmml] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric[b-rd5buuxmml] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ecodrive-border);
}

.metric:last-child[b-rd5buuxmml] {
    border-bottom: none;
}

.metric-label[b-rd5buuxmml] {
    font-size: 14px;
    color: var(--ecodrive-text-secondary);
}

.metric-value[b-rd5buuxmml] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

/* Container des onglets */
.tabs-container[b-rd5buuxmml] {
    margin: 16px 0;
}

/* Boutons d'onglets */
.tabs[b-rd5buuxmml] {
    display: flex;
    background: var(--ecodrive-bg-primary);
    border-radius: 12px;
    padding: 4px;
    margin: 0 16px 16px 16px;
    box-shadow: var(--ecodrive-card-shadow);
    gap: 4px;
}

.tab-button[b-rd5buuxmml] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--ecodrive-text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.tab-button ion-icon[b-rd5buuxmml] {
    font-size: 20px;
    transition: all 0.3s ease;
}

.tab-button.active[b-rd5buuxmml] {
    background: var(--ion-color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3);
}

.tab-button.active ion-icon[b-rd5buuxmml] {
    transform: scale(1.1);
}

.tab-button:hover:not(.active)[b-rd5buuxmml] {
    background: var(--ecodrive-bg-secondary);
    color: var(--ecodrive-text-primary);
}

/* Contenu des onglets */
.tab-content[b-rd5buuxmml] {
    min-height: 300px;
}

.analytics-content[b-rd5buuxmml] {
    margin: 0 16px;
}

.trips-content[b-rd5buuxmml] {
    margin: 0 16px;
}

/* Section trajets */
.trips-section[b-rd5buuxmml], .trips-content[b-rd5buuxmml] {
    margin: 0 16px;
}

.trips-section h4[b-rd5buuxmml], .trips-content h4[b-rd5buuxmml] {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

.trips-list[b-rd5buuxmml] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trip-card[b-rd5buuxmml] {
    background: var(--ecodrive-bg-primary);
    padding: 16px;
    border-radius: 12px;
    box-shadow: var(--ecodrive-card-shadow);
    display: flex;
    gap: 12px;
}

.trip-icon[b-rd5buuxmml] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ecodrive-bg-secondary) 0%, var(--ecodrive-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ecodrive-border);
}

@media (prefers-color-scheme: dark) {
    .trip-icon[b-rd5buuxmml] {
        background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
        border: 1px solid var(--ion-color-dark-shade);
    }
}

.trip-icon img[b-rd5buuxmml] {
    width: 24px;
    height: 24px;
}

.trip-details[b-rd5buuxmml] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trip-header[b-rd5buuxmml] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trip-type[b-rd5buuxmml] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

.trip-score[b-rd5buuxmml] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trip-score .score-circle.small[b-rd5buuxmml] {
    width: 32px;
    height: 32px;
    font-size: 11px;
    font-weight: 600;
    border: 2px solid var(--ion-color-primary-tint);
}

.trip-time[b-rd5buuxmml] {
    font-size: 12px;
    color: var(--ecodrive-text-secondary);
    font-weight: 500;
}

.trip-stats[b-rd5buuxmml], .trip-info[b-rd5buuxmml] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--ecodrive-text-secondary);
}

.trip-stats > div[b-rd5buuxmml], .trip-info > div[b-rd5buuxmml] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trip-stats ion-icon[b-rd5buuxmml], .trip-info ion-icon[b-rd5buuxmml] {
    font-size: 14px;
    opacity: 0.8;
}

.trip-score-bar[b-rd5buuxmml], .trip-eco-score[b-rd5buuxmml] {
    margin-top: 8px;
}

.score-bar-bg[b-rd5buuxmml], .score-bar[b-rd5buuxmml] {
    width: 100%;
    height: 6px;
    background: var(--ecodrive-bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    .score-bar-bg[b-rd5buuxmml], .score-bar[b-rd5buuxmml] {
        background: var(--ion-color-dark-shade);
    }
}

.score-bar-fill[b-rd5buuxmml] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Message aucun trajet */
.no-trips[b-rd5buuxmml] {
    text-align: center;
    padding: 40px 20px;
    color: var(--ecodrive-text-secondary);
    background: var(--ecodrive-bg-primary);
    margin: 0 16px;
    border-radius: 16px;
    box-shadow: var(--ecodrive-card-shadow);
}

.no-trips ion-icon[b-rd5buuxmml] {
    font-size: 56px;
    margin-bottom: 16px;
    color: var(--ion-color-primary);
    opacity: 0.7;
}

.no-trips p[b-rd5buuxmml] {
    margin: 0;
    font-size: 16px;
    color: var(--ecodrive-text-primary);
    font-weight: 500;
}

/* Message pas de données - Style moderne et intuitif */
.no-data[b-rd5buuxmml] {
    text-align: center;
    padding: 60px 20px 40px 20px;
    color: var(--ecodrive-text-secondary);
    background: var(--ecodrive-bg-primary);
    margin: 0 16px;
    border-radius: 20px;
    box-shadow: var(--ecodrive-card-shadow);
    position: relative;
    overflow: hidden;
}

.no-data[b-rd5buuxmml]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2DD36F 0%, #FFD500 25%, #FF8C00 50%, #FF4444 75%, #2DD36F 100%);
}

.no-data ion-icon[b-rd5buuxmml] {
    font-size: 80px;
    margin-bottom: 24px;
    color: var(--ion-color-primary);
    opacity: 0.8;
    animation: pulse-b-rd5buuxmml 2s infinite;
}

@keyframes pulse-b-rd5buuxmml {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

.no-data h3[b-rd5buuxmml] {
    margin: 0 0 16px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--ecodrive-text-primary);
    background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.no-data p[b-rd5buuxmml] {
    margin: 0 0 32px 0;
    font-size: 16px;
    line-height: 1.5;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    color: var(--ecodrive-text-secondary);
}

.no-data .features-list[b-rd5buuxmml] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.no-data .feature-item[b-rd5buuxmml] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ecodrive-bg-secondary);
    border-radius: 20px;
    font-size: 14px;
    color: var(--ecodrive-text-primary);
    font-weight: 500;
}

.no-data .feature-item ion-icon[b-rd5buuxmml] {
    font-size: 18px;
    margin: 0;
    animation: none;
}

.no-data ion-button[b-rd5buuxmml] {
    --border-radius: 30px;
    --padding-start: 24px;
    --padding-end: 24px;
    --padding-top: 12px;
    --padding-bottom: 12px;
    --height: 48px;
    font-weight: 600;
    font-size: 16px;
    margin: 16px auto 0 auto;
    display: block;
    width: fit-content;
    min-width: 200px;
    max-width: 240px;
    box-shadow: 0 4px 12px rgba(var(--ion-color-primary-rgb), 0.3);
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.5px;
}

.no-data ion-button:hover[b-rd5buuxmml] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.4);
}

.no-data ion-button ion-icon[b-rd5buuxmml] {
    margin-right: 8px;
    font-size: 18px;
}

/* Contenu de l'onglet carte */
.map-tab-content[b-rd5buuxmml] {
    margin: 0 16px;
    background: var(--ecodrive-bg-primary);
    border-radius: 12px;
    box-shadow: var(--ecodrive-card-shadow);
    overflow: hidden;
    height: 600px;
}

/* Styles pour la carte intégrée directement dans EcoDrive */
.ecodrive-map-container[b-rd5buuxmml] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ecodrive-bg-primary);
    border-radius: 12px;
    box-shadow: var(--ecodrive-card-shadow);
    overflow: hidden;
}

.map-header[b-rd5buuxmml] {
    padding: 16px;
    background: var(--ecodrive-bg-secondary);
    border-bottom: 1px solid var(--ecodrive-border);
}

.map-legend h5[b-rd5buuxmml] {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

.legend-items[b-rd5buuxmml] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item[b-rd5buuxmml] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ecodrive-text-secondary);
}

.legend-line[b-rd5buuxmml] {
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

.legend-color[b-rd5buuxmml] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.legend-line.excellent[b-rd5buuxmml], .legend-color.excellent[b-rd5buuxmml] {
    background: #2DD36F;
}

.legend-line.good[b-rd5buuxmml], .legend-color.good[b-rd5buuxmml] {
    background: #FFD500;
}

.legend-line.average[b-rd5buuxmml], .legend-color.average[b-rd5buuxmml] {
    background: #FF8C00;
}

.legend-line.poor[b-rd5buuxmml], .legend-color.poor[b-rd5buuxmml] {
    background: #FF4444;
}

.ecodrive-map[b-rd5buuxmml] {
    flex: 1;
    min-height: 400px;
    height: 400px;
    width: 100%;
    position: relative;
}

.map-stats[b-rd5buuxmml] {
    display: flex;
    justify-content: space-around;
    background: var(--ecodrive-bg-secondary);
    border-top: 1px solid var(--ecodrive-border);
    padding: 16px;
}

.stat-item[b-rd5buuxmml] {
    text-align: center;
}

.stat-value[b-rd5buuxmml] {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--ion-color-primary);
}

.stat-label[b-rd5buuxmml] {
    font-size: 0.85rem;
    color: var(--ecodrive-text-secondary);
    margin-top: 4px;
}

.map-loading[b-rd5buuxmml], .map-error[b-rd5buuxmml], .map-no-data[b-rd5buuxmml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: var(--ecodrive-bg-secondary);
    min-height: 300px;
}

.map-loading ion-spinner[b-rd5buuxmml] {
    margin-bottom: 16px;
}

.map-error ion-icon[b-rd5buuxmml], .map-no-data ion-icon[b-rd5buuxmml] {
    font-size: 3rem;
    color: var(--ecodrive-text-secondary);
    margin-bottom: 16px;
}

.map-error p[b-rd5buuxmml], .map-no-data p[b-rd5buuxmml] {
    margin: 0;
    color: var(--ecodrive-text-secondary);
}

.map-no-data h4[b-rd5buuxmml] {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

/* Actions et boutons */
.action-buttons[b-rd5buuxmml] {
    padding: 16px;
    display: flex;
    gap: 12px;
}

.action-buttons ion-button[b-rd5buuxmml] {
    flex: 1;
}

/* Légende des scores */
.score-legend[b-rd5buuxmml] {
    margin: 16px;
    padding: 16px;
    background: var(--ecodrive-bg-primary);
    border-radius: 12px;
    box-shadow: var(--ecodrive-card-shadow);
}

.score-legend h5[b-rd5buuxmml] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ecodrive-text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-rd5buuxmml] {
        padding: 20px 16px;
    }
    
    .page-header h2[b-rd5buuxmml] {
        font-size: 24px;
    }
    
    .page-header p[b-rd5buuxmml] {
        font-size: 14px;
    }
    
    .global-score-card[b-rd5buuxmml], .global-score-section[b-rd5buuxmml] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .score-metrics[b-rd5buuxmml] {
        width: 100%;
    }
    
    .legend-items[b-rd5buuxmml] {
        justify-content: center;
        gap: 8px;
    }
    
    .legend-item[b-rd5buuxmml] {
        font-size: 12px;
    }
    
    .ecodrive-map[b-rd5buuxmml] {
        min-height: 350px;
        height: 350px;
    }
    
    .map-stats[b-rd5buuxmml] {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .stat-item[b-rd5buuxmml] {
        flex: 1;
        min-width: 80px;
    }
    
    .action-buttons[b-rd5buuxmml] {
        flex-direction: column;
    }
    
    .criteria-header[b-rd5buuxmml] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .criteria-header h4[b-rd5buuxmml] {
        text-align: center;
    }
    
    .tab-button[b-rd5buuxmml] {
        font-size: 11px;
        padding: 10px 6px;
    }
    
    .no-data h3[b-rd5buuxmml] {
        font-size: 24px;
    }
    
    .no-data ion-button[b-rd5buuxmml] {
        min-width: 180px;
        font-size: 14px;
    }
}
/* /Pages/FleetPage.razor.rz.scp.css */
/* Theme Variables */
.fleet-page[b-u3sr15i504] {
    /* Primary Color */
    --primary-color: #00b4d8;
    --primary-color-rgb: 0, 180, 216;
    --primary-shade: #0090bb;
    --primary-tint: #1ac3db;
    
    /* Secondary Color */
    --secondary-color: #6f56c4;
    --secondary-color-rgb: 111, 86, 196;
    --secondary-shade: #5c47a3;
    --secondary-tint: #7e69ca;
    
    /* Success Color */
    --success-color: #28a745;
    --success-color-rgb: 40, 167, 69;
    --success-shade: #1e7e34;
    --success-tint: #34ce57;
    
    /* Warning Color */
    --warning-color: #ffc107;
    --warning-color-rgb: 255, 193, 7;
    --warning-shade: #d39e00;
    --warning-tint: #ffcd39;
    
    /* Danger Color */
    --danger-color: #dc3545;
    --danger-color-rgb: 220, 53, 69;
    --danger-shade: #b52d3a;
    --danger-tint: #e14eca;
    
    /* Background Colors */
    --background-color: #f8f9fa;
    --surface-color: #ffffff;
    --card-bg: #ffffff;
    --overlay-bg: rgba(255, 255, 255, 0.95);
    --loading-bg: rgba(255, 255, 255, 0.9);
    
    /* Text Colors */
    --text-color: #212529;
    --text-secondary: #6c757d;
    --text-light: #6c757d;
    
    /* Border Colors */
    --border-color: #dee2e6;
    --divider-color: #e9ecef;
    
    /* Shadows */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    /* Status Colors */
    --status-online: #28a745;
    --status-offline: #dc3545;
    --status-idle: #ffc107;
    --status-parked: #6c757d;
    --status-unknown: #868e96;
}

/* Dark theme overrides */
[data-theme="dark"] .fleet-page[b-u3sr15i504] {
    /* Primary Color (keep same for brand consistency) */
    --primary-color: #00b4d8;
    
    /* Background Colors */
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --card-bg: #2d2d2d;
    --overlay-bg: rgba(30, 30, 30, 0.95);
    --loading-bg: rgba(30, 30, 30, 0.9);
    
    /* Text Colors */
    --text-color: #ffffff;
    --text-secondary: #b3b3b3;
    --text-light: #999999;
    
    /* Border Colors */
    --border-color: #404040;
    --divider-color: #333333;
    
    /* Shadows */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Container */
.fleet-page[b-u3sr15i504] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    color: var(--text-color);
}

/* Header */
.header[b-u3sr15i504] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}

.page-title[b-u3sr15i504] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.header-actions[b-u3sr15i504] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.refresh-btn[b-u3sr15i504] {
    --background: var(--primary-color);
    --color: white;
    --border-radius: 8px;
    font-weight: 500;
}

/* Content */
.content[b-u3sr15i504] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tabs Container */
.tabs-container[b-u3sr15i504] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tab Content */
.tab-content[b-u3sr15i504] {
    padding: 1rem;
    height: calc(100vh - 180px);
    overflow-y: auto;
}

.grid-tab[b-u3sr15i504] {
    padding: 0;
}

.summary-tab[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading Container */
.loading-container[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: var(--loading-bg);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.loading-header[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
}

.loading-message[b-u3sr15i504] {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-color);
    opacity: 0.8;
}

.loading-message p[b-u3sr15i504] {
    margin: 0.5rem 0;
}

/* Error Container */
.error-container[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--danger-color);
}

.error-container ion-icon[b-u3sr15i504] {
    font-size: 4rem;
    color: var(--danger-color);
    margin-bottom: 1rem;
}

.error-container h3[b-u3sr15i504] {
    color: var(--danger-color);
    margin: 0 0 1rem 0;
}

.error-container p[b-u3sr15i504] {
    color: var(--text-color);
    margin: 0 0 2rem 0;
    opacity: 0.8;
}

/* Empty State */
.empty-state[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.empty-state ion-icon[b-u3sr15i504] {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    opacity: 0.6;
}

.empty-state h3[b-u3sr15i504] {
    color: var(--text-color);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.empty-state p[b-u3sr15i504] {
    color: var(--text-color);
    margin: 0 0 2rem 0;
    opacity: 0.7;
    line-height: 1.5;
}

/* Summary Container */
.summary-container[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-shrink: 0;
    padding-bottom: 2rem;
}

.summary-section[b-u3sr15i504] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.summary-header[b-u3sr15i504] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    flex-shrink: 0;
}

.summary-title[b-u3sr15i504] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.summary-actions[b-u3sr15i504] {
    display: flex;
    gap: 0.5rem;
}

.summary-actions .export-btn[b-u3sr15i504] {
    padding: 6px 12px;
    font-size: 0.875rem;
}

/* Grid container inside summary */
.summary-section > .e-grid[b-u3sr15i504] {
    flex: 1;
    min-height: 0;
    height: 100% !important;
}

.summary-cards[b-u3sr15i504] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.summary-card[b-u3sr15i504] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    flex: 1;
    min-width: 180px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover[b-u3sr15i504] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.summary-card ion-icon[b-u3sr15i504] {
    font-size: 2rem;
    opacity: 0.8;
}

.summary-text[b-u3sr15i504] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.summary-number[b-u3sr15i504] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.summary-label[b-u3sr15i504] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.summary-percentage[b-u3sr15i504] {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 0.125rem;
}

.category-card[b-u3sr15i504] {
    border-left: 4px solid var(--primary-color);
}

.brand-card[b-u3sr15i504] {
    border-left: 4px solid var(--secondary-color);
}

.export-btn[b-u3sr15i504] {
    margin-left: 0.5rem;
}

/* Tab Styling */
[b-u3sr15i504] .fleet-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}

[b-u3sr15i504] .fleet-tabs .e-tab-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .fleet-tabs .e-tab-header .e-toolbar-item {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
}

[b-u3sr15i504] .fleet-tabs .e-tab-header .e-toolbar-item.e-active {
    background: var(--primary-color);
    color: white;
    border-radius: 8px 8px 0 0;
}

[b-u3sr15i504] .fleet-tabs .e-tab-header .e-toolbar-item:hover {
    background: var(--surface-color);
    color: var(--text-color);
}

[b-u3sr15i504] .fleet-tabs .e-tab-header .e-toolbar-item.e-active:hover {
    background: var(--primary-color);
    color: white;
}

[b-u3sr15i504] .fleet-tabs .e-content {
    flex: 1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

/* Dark mode tab styling */
[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-tab-header {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-tab-header .e-toolbar-item {
    color: var(--text-secondary);
}

[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-tab-header .e-toolbar-item.e-active {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-tab-header .e-toolbar-item:hover {
    background: var(--surface-color);
    color: var(--text-color);
}

[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-tab-header .e-toolbar-item.e-active:hover {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"][b-u3sr15i504]  .fleet-tabs .e-content {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Grid customization */
[b-u3sr15i504] .e-grid {
    border-radius: 8px;
    overflow: auto;
    border: 1px solid var(--border-color);
    font-family: inherit;
    height: 100%;
    flex: 1;
    background: var(--card-bg);
    color: var(--text-color);
    width: 100%;
    min-width: 0;
}

[b-u3sr15i504] .e-grid .e-content {
    overflow: auto;
    background: var(--card-bg);
}

[b-u3sr15i504] .e-grid .e-gridcontent {
    overflow: auto;
    background: var(--card-bg);
}

/* Summary grids specific styling */
.summary-section .e-grid[b-u3sr15i504] {
    height: auto !important;
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
}

.summary-section .e-grid .e-content[b-u3sr15i504] {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: auto;
}

.summary-section .e-grid .e-gridcontent[b-u3sr15i504] {
    overflow: visible;
}

/* Ensure horizontal scroll works */
[b-u3sr15i504] .summary-section .e-grid table {
    min-width: 480px;
    width: 100%;
}

[b-u3sr15i504] .summary-section .e-grid .e-headercontent,
[b-u3sr15i504] .summary-section .e-grid .e-content {
    overflow-x: auto;
    overflow-y: auto;
}

[b-u3sr15i504] .e-grid .e-gridheader {
    background: var(--primary-color);
    color: white;
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-headercell {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

[b-u3sr15i504] .e-grid .e-rowcell {
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 12px;
    background: var(--card-bg);
    color: var(--text-color);
}

[b-u3sr15i504] .e-grid .e-row:hover .e-rowcell {
    background: var(--surface-color);
}

[b-u3sr15i504] .e-grid .e-groupheadercell {
    background: var(--surface-color);
    color: var(--text-color);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-groupcaptionrow {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-groupcaptionrow .e-rowcell {
    background: var(--surface-color);
    color: var(--text-color);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-groupdroparea {
    background: var(--surface-color);
    border: 2px dashed var(--border-color);
    color: var(--text-secondary);
}

[b-u3sr15i504] .e-grid .e-groupdroparea.e-hover {
    border-color: var(--primary-color);
    background: rgba(0, 180, 216, 0.1);
    color: var(--primary-color);
}

[b-u3sr15i504] .e-grid .e-grouptopleftcell {
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-recordplusexpand,
[b-u3sr15i504] .e-grid .e-recordpluscollapse {
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

[b-u3sr15i504] .e-grid .e-recordplusexpand:hover,
[b-u3sr15i504] .e-grid .e-recordpluscollapse:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[b-u3sr15i504] .e-grid .e-groupsummary {
    background: rgba(0, 180, 216, 0.05);
    color: var(--text-color);
    font-weight: 500;
    border-top: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-summaryrow .e-rowcell {
    background: rgba(0, 180, 216, 0.05);
    color: var(--text-color);
    font-weight: 500;
    border-right: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-content {
    background: var(--card-bg);
}

[b-u3sr15i504] .e-grid .e-gridcontent {
    background: var(--card-bg);
}

[b-u3sr15i504] .e-grid .e-pager {
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

[b-u3sr15i504] .e-grid .e-pager .e-pagercontainer {
    background: var(--card-bg);
    color: var(--text-color);
}

[b-u3sr15i504] .e-grid .e-pager .e-numericcontainer .e-link {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

[b-u3sr15i504] .e-grid .e-pager .e-numericcontainer .e-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[b-u3sr15i504] .e-grid .e-pager .e-currentitem {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Filter row styling */
[b-u3sr15i504] .e-grid .e-filterbar {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

[b-u3sr15i504] .e-grid .e-filterbar input {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

[b-u3sr15i504] .e-grid .e-filterbar input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
}

/* Dark mode specific grid styling */
[data-theme="dark"][b-u3sr15i504]  .e-grid {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-gridheader {
    background: var(--primary-color);
    color: white;
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-headercell {
    background: var(--primary-color);
    color: white;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-rowcell {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-row:hover .e-rowcell {
    background: var(--surface-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-row:nth-child(even) .e-rowcell {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupheadercell {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupcaptionrow {
    background: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupcaptionrow .e-rowcell {
    background: var(--surface-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupdroparea {
    background: var(--surface-color);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupdroparea.e-hover {
    border-color: var(--primary-color);
    background: rgba(0, 180, 216, 0.2);
    color: var(--primary-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-grouptopleftcell {
    background: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-recordplusexpand,
[data-theme="dark"][b-u3sr15i504]  .e-grid .e-recordpluscollapse {
    color: var(--primary-color);
    border-color: var(--border-color);
    background: var(--card-bg);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-recordplusexpand:hover,
[data-theme="dark"][b-u3sr15i504]  .e-grid .e-recordpluscollapse:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-groupsummary {
    background: rgba(0, 180, 216, 0.1);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-summaryrow .e-rowcell {
    background: rgba(0, 180, 216, 0.1);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-content {
    background: var(--card-bg);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-gridcontent {
    background: var(--card-bg);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-pager {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-pager .e-pagercontainer {
    background: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-pager .e-numericcontainer .e-link {
    color: var(--text-color);
    border-color: var(--border-color);
    background: var(--card-bg);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-pager .e-numericcontainer .e-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-filterbar {
    background: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-filterbar input {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-filterbar input::placeholder {
    color: var(--text-secondary);
}

/* Dropdown styling */
[b-u3sr15i504] .e-dropdownlist .e-input-group {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}

[b-u3sr15i504] .e-dropdownlist .e-input {
    color: var(--text-color);
    background: transparent;
}

[b-u3sr15i504] .e-dropdownlist .e-input::placeholder {
    color: var(--text-secondary);
}

[b-u3sr15i504] .e-dropdownlist .e-ddl-icon {
    color: var(--text-secondary);
}

[b-u3sr15i504] .e-dropdownlist:hover .e-input-group {
    border-color: var(--primary-color);
}

[b-u3sr15i504] .e-dropdownlist.e-input-focus .e-input-group {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
}

/* Button styling */
[b-u3sr15i504] .e-btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

[b-u3sr15i504] .e-btn.e-success {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

[b-u3sr15i504] .e-btn.e-success:hover {
    background: var(--success-shade);
    border-color: var(--success-shade);
}

[b-u3sr15i504] .e-btn.e-danger {
    background: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}

[b-u3sr15i504] .e-btn.e-danger:hover {
    background: var(--danger-shade);
    border-color: var(--danger-shade);
}

[b-u3sr15i504] .e-btn.e-info {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

[b-u3sr15i504] .e-btn.e-info:hover {
    background: var(--primary-shade);
    border-color: var(--primary-shade);
}

[data-theme="dark"][b-u3sr15i504]  .e-dropdownlist .e-input-group {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-dropdownlist .e-input {
    color: var(--text-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-dropdownlist .e-ddl-icon {
    color: var(--text-secondary);
}

[data-theme="dark"][b-u3sr15i504]  .e-dropdownlist:hover .e-input-group {
    border-color: var(--primary-color);
}

/* Popup styling for dropdown */
[data-theme="dark"][b-u3sr15i504]  .e-popup {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"][b-u3sr15i504]  .e-popup .e-list-item {
    background: var(--card-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-popup .e-list-item:hover {
    background: var(--surface-color);
    color: var(--text-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-popup .e-list-item.e-active {
    background: var(--primary-color);
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .header[b-u3sr15i504] {
        padding: 0.75rem 1rem;
    }
    
    .page-title[b-u3sr15i504] {
        font-size: 1.25rem;
    }
    
    .header-actions[b-u3sr15i504] {
        gap: 0.5rem;
    }
    
    .tab-content[b-u3sr15i504] {
        height: calc(100vh - 160px);
        padding: 0.75rem;
    }
    
    .grid-tab[b-u3sr15i504] {
        padding: 0;
    }
    
    .summary-container[b-u3sr15i504] {
        gap: 0.5rem;
    }
    
    .summary-section[b-u3sr15i504] {
        padding: 1rem;
        min-height: 200px;
    }
    
    .summary-cards[b-u3sr15i504] {
        gap: 0.5rem;
    }
    
    .summary-card[b-u3sr15i504] {
        min-width: 140px;
        padding: 0.75rem;
    }
    
    /* Summary grids on medium screens */
    [b-u3sr15i504] .summary-section .e-grid table {
        min-width: 400px;
    }
}

@media (max-width: 768px) {
    .header[b-u3sr15i504] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        padding: 1rem;
    }
    
    .header-actions[b-u3sr15i504] {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .content[b-u3sr15i504] {
        padding: 0.75rem;
    }
    
    .tab-content[b-u3sr15i504] {
        height: calc(100vh - 140px);
        padding: 0.5rem;
    }
    
    .grid-tab[b-u3sr15i504] {
        padding: 0;
    }
    
    .summary-container[b-u3sr15i504] {
        flex-direction: column;
    }
    
    .summary-section[b-u3sr15i504] {
        padding: 0.75rem;
        min-height: 180px;
    }
    
    .summary-title[b-u3sr15i504] {
        font-size: 1.1rem;
    }
    
    .summary-header[b-u3sr15i504] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    
    .summary-actions[b-u3sr15i504] {
        justify-content: center;
    }
    
    .summary-cards[b-u3sr15i504] {
        flex-direction: column;
    }
    
    .summary-card[b-u3sr15i504] {
        min-width: unset;
    }
    
    [b-u3sr15i504] .e-grid .e-gridheader .e-headercell {
        font-size: 0.875rem;
        padding: 6px 8px;
    }
    
    [b-u3sr15i504] .e-grid .e-rowcell {
        font-size: 0.875rem;
        padding: 6px 8px;
    }
    
    /* Summary grids on small screens */
    [b-u3sr15i504] .summary-section .e-grid table {
        min-width: 350px;
    }
    
    [b-u3sr15i504] .summary-section .e-grid .e-headercell,
    [b-u3sr15i504] .summary-section .e-grid .e-rowcell {
        font-size: 0.8rem;
        padding: 4px 6px;
    }
}

@media (max-width: 480px) {
    .header[b-u3sr15i504] {
        padding: 0.75rem;
    }
    
    .page-title[b-u3sr15i504] {
        font-size: 1.1rem;
        text-align: center;
    }
    
    .content[b-u3sr15i504] {
        padding: 0.5rem;
    }
    
    .tab-content[b-u3sr15i504] {
        height: calc(100vh - 120px);
        padding: 0.5rem;
    }
    
    .grid-tab[b-u3sr15i504] {
        padding: 0;
    }
    
    .summary-section[b-u3sr15i504] {
        min-height: 150px;
    }
    
    .summary-card[b-u3sr15i504] {
        padding: 0.75rem;
    }
    
    .summary-number[b-u3sr15i504] {
        font-size: 1.25rem;
    }
    
    .summary-label[b-u3sr15i504] {
        font-size: 0.8rem;
    }
    
    [b-u3sr15i504] .fleet-tabs .e-tab-header .e-toolbar-item {
        font-size: 0.875rem;
        padding: 8px 12px;
    }
    
    /* Summary grids on very small screens */
    [b-u3sr15i504] .summary-section .e-grid table {
        min-width: 300px;
    }
    
    .summary-actions .export-btn[b-u3sr15i504] {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Scrollbar styling */
[b-u3sr15i504] .e-grid .e-content::-webkit-scrollbar,
.tab-content[b-u3sr15i504]::-webkit-scrollbar,
.summary-section[b-u3sr15i504]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-u3sr15i504] .e-grid .e-content::-webkit-scrollbar-track,
.tab-content[b-u3sr15i504]::-webkit-scrollbar-track,
.summary-section[b-u3sr15i504]::-webkit-scrollbar-track {
    background: var(--surface-color);
    border-radius: 4px;
}

[b-u3sr15i504] .e-grid .e-content::-webkit-scrollbar-thumb,
.tab-content[b-u3sr15i504]::-webkit-scrollbar-thumb,
.summary-section[b-u3sr15i504]::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
    opacity: 0.5;
}

[b-u3sr15i504] .e-grid .e-content::-webkit-scrollbar-thumb:hover,
.tab-content[b-u3sr15i504]::-webkit-scrollbar-thumb:hover,
.summary-section[b-u3sr15i504]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Dark mode scrollbar */
[data-theme="dark"][b-u3sr15i504]  .e-grid .e-content::-webkit-scrollbar-track,
[data-theme="dark"] .tab-content[b-u3sr15i504]::-webkit-scrollbar-track,
[data-theme="dark"] .summary-section[b-u3sr15i504]::-webkit-scrollbar-track {
    background: var(--surface-color);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .tab-content[b-u3sr15i504]::-webkit-scrollbar-thumb,
[data-theme="dark"] .summary-section[b-u3sr15i504]::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
}

[data-theme="dark"][b-u3sr15i504]  .e-grid .e-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .tab-content[b-u3sr15i504]::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .summary-section[b-u3sr15i504]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
/* /Pages/HeatMapReport.razor.rz.scp.css */
/* HeatMapReport.razor.css */
.leaflet-control-attribution[b-ba7vs3sm3i] {
    display: none !important;
}
.heatmap-report-page[b-ba7vs3sm3i] {
    min-height: 100vh;
    background: var(--ion-background-color);
    color: var(--ion-text-color);
    display: flex;
    flex-direction: column;
}

 

/* Header */
.header[b-ba7vs3sm3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--ion-background-color);
    border-bottom: 1px solid var(--ion-border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.header ion-button[b-ba7vs3sm3i] {
    --color: var(--ion-text-color);
    --background: transparent;
    --background-hover: rgba(var(--ion-text-color-rgb), 0.1);
    --padding-start: 8px;
    --padding-end: 8px;
    margin: 0 4px;
}

.page-title[b-ba7vs3sm3i] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0;
    flex: 1;
    text-align: center;
}

.header-icons[b-ba7vs3sm3i] {
    display: flex;
    gap: 8px;
}

.header-icon-btn[b-ba7vs3sm3i] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content */
.content[b-ba7vs3sm3i] {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

/* Loading and Map Container for Progressive Display */
.loading-and-map-container[b-ba7vs3sm3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 60vh;
    text-align: center;
    padding: 16px;
}

.loading-header[b-ba7vs3sm3i] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.loading-header ion-spinner[b-ba7vs3sm3i] {
    --color: var(--ion-color-primary);
    width: 32px;
    height: 32px;
}

.loading-header span[b-ba7vs3sm3i] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ion-text-color);
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.cancel-btn[b-ba7vs3sm3i] {
    --color: var(--ion-color-danger);
    --border-color: var(--ion-color-danger);
    --background: transparent;
    font-size: 0.85rem;
    height: 32px;
}

/* Progressive Map Container */
.progressive-map-container[b-ba7vs3sm3i] {
    width: 100%;
    margin-bottom: 16px;
}

.progressive-map-container h3[b-ba7vs3sm3i] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0 0 8px 0;
    text-align: center;
}

.progressive-map-container p[b-ba7vs3sm3i] {
    color: var(--ion-color-medium);
    text-align: center;
    margin: 0 0 16px 0;
    font-size: 0.9rem;
}

/* Loading Message */
.loading-message[b-ba7vs3sm3i] {
    color: var(--ion-color-medium);
    text-align: center;
    margin-top: 16px;
}

.loading-message p[b-ba7vs3sm3i] {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Main Interface for Complete Heatmap */
.main-interface[b-ba7vs3sm3i] {
    width: 100%;
}

/* Stats Container */
.stats-container[b-ba7vs3sm3i] {
    margin-bottom: 24px;
}

.stats-grid[b-ba7vs3sm3i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item[b-ba7vs3sm3i] {
    background: var(--ion-item-background);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--ion-border-color);
}

.stat-value[b-ba7vs3sm3i] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ion-color-primary);
    margin-bottom: 4px;
}

.stat-label[b-ba7vs3sm3i] {
    font-size: 0.8rem;
    color: var(--ion-color-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Leaflet Heatmap Container */
.heatmap-leaflet-container[b-ba7vs3sm3i] {
    width: 100%;
    height: 550px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ion-border-color);
    margin-bottom: 16px;
    background: #f8f9fa;
    position: relative;
    z-index: 1;
}

/* Container fixe - ne se re-rend jamais */
#heatMapContainer[b-ba7vs3sm3i] {
    width: 100%;
    height: 550px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ion-border-color);
    margin: 16px 0;
    background: #f8f9fa;
    position: relative;
    z-index: 10;
    /* Protection contre le re-rendu */
    contain: layout style paint;
}

[data-theme="dark"] #heatMapContainer[b-ba7vs3sm3i],
[data-theme="dark"] .heatmap-leaflet-container[b-ba7vs3sm3i] {
    background: #2d3748;
    border-color: #4a5568;
}

/* No Data Container */
.no-data-container[b-ba7vs3sm3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 32px 16px;
}

/* Initial State Container */
.initial-state-container[b-ba7vs3sm3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: 32px 16px;
}

.initial-icon[b-ba7vs3sm3i] {
    font-size: 5rem;
    color: var(--ion-color-primary);
    margin-bottom: 24px;
}

.initial-state-container h3[b-ba7vs3sm3i] {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0 0 16px 0;
}

.initial-state-container p[b-ba7vs3sm3i] {
    color: var(--ion-color-medium);
    margin: 0 0 16px 0;
    line-height: 1.6;
    max-width: 400px;
}

.initial-state-container ion-button[b-ba7vs3sm3i] {
    --color: white;
    --background: var(--ion-color-primary);
    font-weight: 600;
    height: 48px;
    margin-top: 16px;
    border-radius: 12px;
    --padding-start: 24px;
    --padding-end: 24px;
}

.no-data-icon[b-ba7vs3sm3i] {
    font-size: 4rem;
    color: var(--ion-color-medium);
    margin-bottom: 16px;
}

.no-data-container h3[b-ba7vs3sm3i] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0 0 8px 0;
}

.no-data-container p[b-ba7vs3sm3i] {
    color: var(--ion-color-medium);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* Error Container */
.error-container[b-ba7vs3sm3i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 32px 16px;
}

.error-icon[b-ba7vs3sm3i] {
    font-size: 4rem;
    color: var(--ion-color-danger);
    margin-bottom: 16px;
}

.error-container h3[b-ba7vs3sm3i] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0 0 8px 0;
}

.error-container p[b-ba7vs3sm3i] {
    color: var(--ion-color-medium);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.error-container ion-button[b-ba7vs3sm3i],
.no-data-container ion-button[b-ba7vs3sm3i] {
    --color: var(--ion-color-primary);
    --background: transparent;
    --border-color: var(--ion-color-primary);
    font-weight: 500;
    height: 48px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content[b-ba7vs3sm3i] {
        padding: 12px;
    }
    
    .heatmap-leaflet-container[b-ba7vs3sm3i] {
        height: 450px;
    }
    
    .page-title[b-ba7vs3sm3i] {
        font-size: 1.1rem;
    }
    
    .stats-grid[b-ba7vs3sm3i] {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
    
    .stat-item[b-ba7vs3sm3i] {
        padding: 12px;
    }
    
    .stat-value[b-ba7vs3sm3i] {
        font-size: 1.3rem;
    }
    
    .stat-label[b-ba7vs3sm3i] {
        font-size: 0.75rem;
    }
    
    .loading-header[b-ba7vs3sm3i] {
        flex-direction: column;
        gap: 12px;
    }
    
    .loading-header span[b-ba7vs3sm3i] {
        min-width: auto;
    }
}

/* Dark Theme Adjustments */
[data-theme="dark"] .stat-item[b-ba7vs3sm3i] {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .loading-and-map-container[b-ba7vs3sm3i],
[data-theme="dark"] .error-container[b-ba7vs3sm3i],
[data-theme="dark"] .no-data-container[b-ba7vs3sm3i] {
    background: var(--ion-background-color);
}

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

.main-interface[b-ba7vs3sm3i],
.stats-container[b-ba7vs3sm3i],
.progressive-map-container[b-ba7vs3sm3i] {
    animation: fadeIn-b-ba7vs3sm3i 0.6s ease-out;
}

/* Leaflet CSS overrides for theme */
[data-theme="dark"] .leaflet-control-container .leaflet-control[b-ba7vs3sm3i] {
    background: #2d3748;
    border-color: #4a5568;
}

[data-theme="dark"] .leaflet-control-container .leaflet-control a[b-ba7vs3sm3i] {
    color: #e2e8f0;
}

[data-theme="dark"] .leaflet-popup-content-wrapper[b-ba7vs3sm3i] {
    background: #2d3748;
    color: #e2e8f0;
}

[data-theme="dark"] .leaflet-popup-tip[b-ba7vs3sm3i] {
    background: #2d3748;
}

/* Layer switcher button styles */
.leaflet-control-custom[b-ba7vs3sm3i] {
    transition: all 0.2s ease;
}

.leaflet-control-custom:hover[b-ba7vs3sm3i] {
    background-color: #f0f0f0 !important;
    transform: scale(1.05);
}

[data-theme="dark"] .leaflet-control-custom[b-ba7vs3sm3i] {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

[data-theme="dark"] .leaflet-control-custom:hover[b-ba7vs3sm3i] {
    background-color: #4a5568 !important;
}

[data-theme="dark"] .leaflet-control-custom div[b-ba7vs3sm3i] {
    color: #e2e8f0 !important;
}

/* Layer notification */
.layer-notification[b-ba7vs3sm3i] {
    animation: slideInFromTop-b-ba7vs3sm3i 0.3s ease-out;
}

@keyframes slideInFromTop-b-ba7vs3sm3i {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
/* /Pages/HistoryPlayback.razor.rz.scp.css */
.history-root[b-zwocfzpasn] {
    position: relative;
    min-height: 100vh;
    background: var(--ion-background-color);
    display: flex;
    flex-direction: column;
}

.history-header-controls[b-zwocfzpasn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 16px 20px 12px 12px;
    background: var(--ion-color-primary);
    color: var(--ion-color-primary-contrast);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    min-height: 56px;
    gap: 12px;
}

.back-btn[b-zwocfzpasn] {
    background: none;
    border: none;
    color: inherit;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
}

.history-details-header[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-align: center;
    margin-right: 32px;
}

.history-vehicle-info[b-zwocfzpasn],
.history-period-info[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ion-color-primary-contrast);
    min-width: 0;
}

.history-vehicle-info[b-zwocfzpasn] {
    font-size: 1.1rem;
    font-weight: 600;
}

.history-vehicle-info ion-icon[b-zwocfzpasn],
.history-period-info ion-icon[b-zwocfzpasn] {
    font-size: 16px;
    color: var(--ion-color-primary-contrast);
    flex-shrink: 0;
}

.vehicle-name[b-zwocfzpasn] {
    font-weight: 600;
    color: var(--ion-color-primary-contrast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-brand-icon[b-zwocfzpasn] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.period-text[b-zwocfzpasn] {
    font-size: 13px;
    color: var(--ion-color-primary-contrast);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.history-header-actions[b-zwocfzpasn] {
    position: absolute;
    right: 20px;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.header-action[b-zwocfzpasn] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.4em;
    cursor: pointer;
    padding: 0 6px;
}

.history-map-container[b-zwocfzpasn] {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    height: 45vh;
    margin-top: 64px; /* Espace pour le header fixe */
}
#history-leaflet-map[b-zwocfzpasn] {
    width: 100%;
    height: 100%;
    min-height: 320px;
  
}
.map-overlay-controls[b-zwocfzpasn] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
}
.overlay-btn[b-zwocfzpasn] {
    background: var(--ion-item-background);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 1.3em;
    color: var(--ion-color-primary);
    cursor: pointer;
    transition: all 0.15s;
}

.overlay-btn:hover[b-zwocfzpasn] {
    background: var(--ion-color-light-shade);
    transform: scale(1.05);
}
.zoom-controls[b-zwocfzpasn] {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}
.zoom-btn[b-zwocfzpasn] {
    background: var(--ion-item-background);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.3em;
    color: var(--ion-color-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2px;
    transition: all 0.15s;
}

.zoom-btn:hover[b-zwocfzpasn] {
    background: var(--ion-color-light-shade);
    transform: scale(1.05);
}
.playback-controls[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 0 0;
}
.playback-btn[b-zwocfzpasn] {
    background: var(--ion-color-primary);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: var(--ion-color-primary-contrast);
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.15s;
}

.playback-btn:hover[b-zwocfzpasn] {
    background: var(--ion-color-success);
    transform: scale(1.05);
}
.playback-slider[b-zwocfzpasn] {
    width: 60%;
    accent-color: var(--ion-color-primary);
    height: 6px;
    border-radius: 4px;
}

.history-controls[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 18px 0 0 0;
}

.vehicle-select[b-zwocfzpasn] {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--ion-item-border-color);
    font-size: 1em;
    background: var(--ion-item-background);
    color: var(--ion-text-color);
}
.date-range-controls[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-input[b-zwocfzpasn] {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--ion-item-border-color);
    font-size: 1em;
    background: var(--ion-item-background);
    color: var(--ion-text-color);
}

.bottom-swiper[b-zwocfzpasn] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ion-item-background);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 99999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.bottom-swiper.visible[b-zwocfzpasn] {
    transform: translateY(0);
}

.bottom-swiper.hidden[b-zwocfzpasn] {
    transform: translateY(calc(100% - 60px));
}

.swiper-handle[b-zwocfzpasn] {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 12px 0;
    background: transparent;
}

.swiper-handle-bar[b-zwocfzpasn] {
    width: 40px;
    height: 4px;
    background: var(--ion-color-medium);
    border-radius: 2px;
    transition: background 0.2s, transform 0.2s;
}

.swiper-handle:hover .swiper-handle-bar[b-zwocfzpasn] {
    background: var(--ion-color-primary);
    transform: scaleY(1.5);
}

.bottom-tabs[b-zwocfzpasn] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--ion-item-background);
    border-bottom: 1px solid var(--ion-item-border-color);
    height: 60px;
    flex-shrink: 0;
}

.tab[b-zwocfzpasn] {
    flex: 1 1 0;
    background: none;
    border: none;
    font-size: 0.9em;
    color: var(--ion-color-medium);
    font-weight: 600;
    padding: 8px 4px;
    cursor: pointer;
    transition: color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tab ion-icon[b-zwocfzpasn] {
    font-size: 1.4em;
}

.tab span[b-zwocfzpasn] {
    font-size: 0.8em;
    letter-spacing: 0.5px;
}

.tab.active[b-zwocfzpasn] {
    color: var(--ion-color-primary);
}

.tab.active[b-zwocfzpasn]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--ion-color-primary);
}

.tab-content[b-zwocfzpasn] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.tab-panel[b-zwocfzpasn] {
    height: 100%;
    overflow-y: auto;
}

.panel-section[b-zwocfzpasn] {
    padding: 20px;
}

.panel-section h3[b-zwocfzpasn] {
    margin: 0 0 16px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--ion-text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-section h3 ion-icon[b-zwocfzpasn] {
    color: var(--ion-color-primary);
    font-size: 1.2em;
}

.summary-grid[b-zwocfzpasn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.summary-item[b-zwocfzpasn] {
    background: var(--ion-color-light-tint);
    padding: 16px;
    border-radius: 12px;
    text-align: center;
}

.summary-label[b-zwocfzpasn] {
    display: block;
    font-size: 0.85em;
    color: var(--ion-color-medium);
    margin-bottom: 4px;
    font-weight: 500;
}

.summary-value[b-zwocfzpasn] {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--ion-text-color);
}
@media (max-width: 600px) {
    .history-map-container[b-zwocfzpasn] {
        min-height: 220px;
        height: 32vh;
    }
    .playback-slider[b-zwocfzpasn] {
        width: 90%;
    }
    .bottom-swiper[b-zwocfzpasn] {
        height: 90vh;
    }
    .bottom-swiper.hidden[b-zwocfzpasn] {
        transform: translateY(calc(100% - 50px));
    }
    .bottom-tabs[b-zwocfzpasn] {
        height: 50px;
    }
    .tab[b-zwocfzpasn] {
        font-size: 0.8em;
        gap: 2px;
    }
    .tab ion-icon[b-zwocfzpasn] {
        font-size: 1.2em;
    }
    .tab span[b-zwocfzpasn] {
        font-size: 0.7em;
    }
    .summary-grid[b-zwocfzpasn] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .period-text[b-zwocfzpasn] {
        font-size: 11px;
    }
    .history-vehicle-info[b-zwocfzpasn],
    .history-period-info[b-zwocfzpasn] {
        font-size: 13px;
    }
    .history-header-controls[b-zwocfzpasn] {
        padding: 8px 12px;
        min-height: 52px;
    }
}

/* Overlay recherche historique */
#history-search-overlay[b-zwocfzpasn] {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.32);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInMenu-b-zwocfzpasn 0.25s;
}
#history-search-overlay > div[b-zwocfzpasn] {
    background: var(--ion-item-background);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 28px 18px 18px 18px;
    min-width: 320px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: fadeInMenu-b-zwocfzpasn 0.25s;
}
#history-search-overlay input[type="text"][b-zwocfzpasn] {
    margin-bottom: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--ion-item-border-color);
    background: var(--ion-item-background);
    color: var(--ion-text-color);
}
#history-search-overlay select[b-zwocfzpasn] {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--ion-item-border-color);
    background: var(--ion-color-light-tint);
    color: var(--ion-text-color);
    font-size: 1em;
}
#history-search-overlay input[type="date"][b-zwocfzpasn],
#history-search-overlay input[type="time"][b-zwocfzpasn] {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--ion-item-border-color);
    font-size: 1em;
    background: var(--ion-item-background);
    color: var(--ion-text-color);
}
#history-search-overlay button[b-zwocfzpasn] {
    background: var(--ion-color-primary);
    color: var(--ion-color-primary-contrast);
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    font-weight: bold;
    margin-top: 10px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background 0.15s;
}
#history-search-overlay button:hover[b-zwocfzpasn] {
    background: var(--ion-color-success);
}
@keyframes fadeInMenu-b-zwocfzpasn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}
/* Spinner loading overlay */
#history-loading-overlay[b-zwocfzpasn] {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.32);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.history-spinner[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
}
/* Optionnel: icône véhicule dans select (si supporté) */
#history-search-overlay select option[b-zwocfzpasn] {
    padding-left: 28px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: 2px center;
}

/* ================================
   STYLES POUR LA TIMELINE DES TRIPS
   ================================ */

/* Header Summary */
.header-summary[b-zwocfzpasn] {
    background: var(--ion-item-background);
    border-radius: 12px;
    padding: 16px;
    margin: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.vehicle-title[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    color: var(--ion-color-primary);
}

.vehicle-title ion-icon[b-zwocfzpasn] {
    font-size: 20px;
}

.stats-grid[b-zwocfzpasn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    background: var(--ion-color-light-tint);
    border-radius: 8px;
}

.stat-item ion-icon[b-zwocfzpasn] {
    font-size: 24px;
    color: var(--ion-color-primary);
    margin-bottom: 4px;
}

.stat-value[b-zwocfzpasn] {
    font-size: 18px;
    font-weight: bold;
    color: var(--ion-text-color);
}

.stat-unit[b-zwocfzpasn] {
    font-size: 12px;
    color: var(--ion-color-medium);
    text-transform: uppercase;
}

.options[b-zwocfzpasn] {
    padding: 12px 0 0 0;
    border-top: 1px solid var(--ion-item-border-color);
}

.option-toggle[b-zwocfzpasn] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.option-toggle input[type="checkbox"][b-zwocfzpasn] {
    display: none;
}

.toggle-slider[b-zwocfzpasn] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--ion-color-medium);
    border-radius: 24px;
    transition: background 0.3s;
}

.toggle-slider[b-zwocfzpasn]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--ion-item-background);
    border-radius: 50%;
    transition: transform 0.3s;
}

.option-toggle input[type="checkbox"]:checked + .toggle-slider[b-zwocfzpasn] {
    background: var(--ion-color-primary);
}

.option-toggle input[type="checkbox"]:checked + .toggle-slider[b-zwocfzpasn]::before {
    transform: translateX(20px);
}

.toggle-label[b-zwocfzpasn] {
    color: var(--ion-text-color);
    font-weight: 500;
}

/* Timeline Container */
.timeline-container[b-zwocfzpasn] {
    padding: 0 16px 16px 16px;
    max-height: calc(65vh - 200px);
    overflow-y: auto;
}

.timeline[b-zwocfzpasn] {
    position: relative;
    margin-left: 20px;
}

.timeline[b-zwocfzpasn]::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ion-color-light-shade);
}

/* Timeline Events */
.timeline-event[b-zwocfzpasn] {
    position: relative;
    margin-bottom: 20px;
    padding-left: 50px;
}

.timeline-marker[b-zwocfzpasn] {
    position: absolute;
    left: 4px;
    top: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ion-item-background);
    border: 3px solid var(--ion-color-light-shade);
    z-index: 1;
}

.timeline-marker ion-icon[b-zwocfzpasn] {
    font-size: 16px;
    color: var(--ion-color-medium);
}

    .timeline-marker img[b-zwocfzpasn] {
        width: 24px;
        height: 24px;
    }


.timeline-content[b-zwocfzpasn] {
    background: var(--ion-item-background);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--ion-color-light-shade);
}

.event-header[b-zwocfzpasn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.event-title[b-zwocfzpasn] {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: var(--ion-text-color);
}

.event-time[b-zwocfzpasn] {
    font-size: 12px;
    color: var(--ion-color-medium);
    background: var(--ion-color-light-tint);
    padding: 4px 8px;
    border-radius: 4px;
}

.event-details[b-zwocfzpasn] {
    display: grid;
    gap: 8px;
}

.detail-row[b-zwocfzpasn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.detail-label[b-zwocfzpasn] {
    color: var(--ion-color-medium);
    font-weight: 500;
}

.detail-value[b-zwocfzpasn] {
    color: var(--ion-text-color);
    font-weight: 600;
    text-align: right;
}

/* Event Type Specific Styles */
.event-trip .timeline-marker[b-zwocfzpasn] {
    border-color: var(--ion-color-primary);
}

.event-trip .timeline-marker ion-icon[b-zwocfzpasn] {
    color: var(--ion-color-primary);
}

.event-trip .timeline-content[b-zwocfzpasn] {
    border-left-color: var(--ion-color-primary);
}

.event-stop .timeline-marker[b-zwocfzpasn] {
    border-color: var(--ion-color-warning);
}

.event-stop .timeline-marker ion-icon[b-zwocfzpasn] {
    color: var(--ion-color-warning);
}

.event-stop .timeline-content[b-zwocfzpasn] {
    border-left-color: var(--ion-color-warning);
}

.event-start .timeline-marker[b-zwocfzpasn] {
    border-color: var(--ion-color-success);
}

.event-start .timeline-marker ion-icon[b-zwocfzpasn] {
    color: var(--ion-color-success);
}

.event-start .timeline-content[b-zwocfzpasn] {
    border-left-color: var(--ion-color-success);
}

/* Empty State */
.empty-state[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--ion-color-medium);
}

.empty-state ion-icon[b-zwocfzpasn] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-zwocfzpasn] {
    margin: 0;
    font-size: 16px;
    text-align: center;
}

/* Responsive Design for Timeline */
@media (max-width: 480px) {
    .stats-grid[b-zwocfzpasn] {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stat-item[b-zwocfzpasn] {
        padding: 8px 4px;
    }
    
    .stat-value[b-zwocfzpasn] {
        font-size: 16px;
    }
    
    .timeline-container[b-zwocfzpasn] {
        padding: 0 8px 16px 8px;
    }
    
    .timeline-event[b-zwocfzpasn] {
        padding-left: 40px;
    }
    
    .timeline-marker[b-zwocfzpasn] {
        width: 40px;
        height: 40px;
        left: -3px;
    }
    
    .timeline-marker ion-icon[b-zwocfzpasn] {
        font-size: 14px;
    }
    
    .timeline-content[b-zwocfzpasn] {
        padding: 12px;
    }
    
    .event-title[b-zwocfzpasn] {
        font-size: 14px;
    }
    
    .detail-row[b-zwocfzpasn] {
        font-size: 12px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] .history-root[b-zwocfzpasn] {
    background: var(--ion-background-color);
}

[data-theme="dark"] .overlay-btn[b-zwocfzpasn],
[data-theme="dark"] .zoom-btn[b-zwocfzpasn] {
    background: var(--ion-color-step-100);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .overlay-btn:hover[b-zwocfzpasn],
[data-theme="dark"] .zoom-btn:hover[b-zwocfzpasn] {
    background: var(--ion-color-step-200);
}

[data-theme="dark"] .header-summary[b-zwocfzpasn],
[data-theme="dark"] .timeline-content[b-zwocfzpasn],
[data-theme="dark"] .bottom-swiper[b-zwocfzpasn],
[data-theme="dark"] .bottom-tabs[b-zwocfzpasn] {
    background: var(--ion-color-step-100);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vehicle-title[b-zwocfzpasn],
[data-theme="dark"] .event-title[b-zwocfzpasn],
[data-theme="dark"] .detail-value[b-zwocfzpasn],
[data-theme="dark"] .stat-value[b-zwocfzpasn],
[data-theme="dark"] .toggle-label[b-zwocfzpasn] {
    color: var(--ion-text-color);
}

[data-theme="dark"] .stat-item[b-zwocfzpasn],
[data-theme="dark"] .summary-item[b-zwocfzpasn] {
    background: var(--ion-color-step-200);
}

[data-theme="dark"] .event-time[b-zwocfzpasn] {
    background: var(--ion-color-step-200);
    color: var(--ion-color-medium);
}

[data-theme="dark"] .timeline[b-zwocfzpasn]::before {
    background: var(--ion-color-step-300);
}

[data-theme="dark"] .timeline-marker[b-zwocfzpasn] {
    background: var(--ion-color-step-100);
    border-color: var(--ion-color-step-300);
}

[data-theme="dark"] .timeline-content[b-zwocfzpasn] {
    border-left-color: var(--ion-color-step-300);
}

[data-theme="dark"] .options[b-zwocfzpasn] {
    border-top-color: var(--ion-color-step-300);
}

[data-theme="dark"] #history-search-overlay > div[b-zwocfzpasn] {
    background: var(--ion-color-step-100);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Light Theme Explicit Styles */
[data-theme="light"] .history-root[b-zwocfzpasn] {
    background: var(--ion-background-color);
}

[data-theme="light"] .overlay-btn[b-zwocfzpasn],
[data-theme="light"] .zoom-btn[b-zwocfzpasn] {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .overlay-btn:hover[b-zwocfzpasn],
[data-theme="light"] .zoom-btn:hover[b-zwocfzpasn] {
    background: #f0f0f0;
}

[data-theme="light"] .header-summary[b-zwocfzpasn],
[data-theme="light"] .timeline-content[b-zwocfzpasn],
[data-theme="light"] .bottom-swiper[b-zwocfzpasn],
[data-theme="light"] .bottom-tabs[b-zwocfzpasn] {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-item[b-zwocfzpasn],
[data-theme="light"] .summary-item[b-zwocfzpasn] {
    background: #f8f9fa;
}

[data-theme="light"] .event-time[b-zwocfzpasn] {
    background: #f8f9fa;
    color: #666666;
}

[data-theme="light"] .timeline[b-zwocfzpasn]::before {
    background: #dee2e6;
}

[data-theme="light"] .timeline-marker[b-zwocfzpasn] {
    background: #ffffff;
    border-color: #dee2e6;
}

[data-theme="light"] .timeline-content[b-zwocfzpasn] {
    border-left-color: #dee2e6;
}

[data-theme="light"] .options[b-zwocfzpasn] {
    border-top-color: #e0e0e0;
}

[data-theme="light"] #history-search-overlay > div[b-zwocfzpasn] {
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Styles pour les marqueurs de vitesse */
.speed-markers-visible[b-zwocfzpasn] {
    background: rgba(255, 152, 0, 0.2) !important;
    border: 2px solid #FF9800 !important;
    color: #FF9800 !important;
}

.speed-markers-hidden[b-zwocfzpasn] {
    background: rgba(158, 158, 158, 0.1) !important;
    border: 2px solid #9e9e9e !important;
    color: #9e9e9e !important;
}

.speed-indicator[b-zwocfzpasn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9800;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.speed-indicator.active[b-zwocfzpasn] {
    opacity: 1;
}

/* Indicateurs pour les différents types de marqueurs */
.warning-indicator[b-zwocfzpasn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF9800;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.warning-indicator.active[b-zwocfzpasn] {
    opacity: 1;
}

.danger-indicator[b-zwocfzpasn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F44336;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.danger-indicator.active[b-zwocfzpasn] {
    opacity: 1;
}

.parking-indicator[b-zwocfzpasn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2196F3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.parking-indicator.active[b-zwocfzpasn] {
    opacity: 1;
}

/* Animation pour les boutons de marqueurs */
.speed-markers-visible:hover[b-zwocfzpasn] {
    background: rgba(255, 152, 0, 0.3) !important;
    transform: scale(1.05);
}

.speed-markers-hidden:hover[b-zwocfzpasn] {
    background: rgba(158, 158, 158, 0.2) !important;
    transform: scale(1.05);
}

.warning-markers-visible:hover[b-zwocfzpasn] {
    background: rgba(255, 152, 0, 0.3) !important;
    transform: scale(1.05);
}

.warning-markers-hidden:hover[b-zwocfzpasn] {
    background: rgba(158, 158, 158, 0.2) !important;
    transform: scale(1.05);
}

.danger-markers-visible:hover[b-zwocfzpasn] {
    background: rgba(244, 67, 54, 0.3) !important;
    transform: scale(1.05);
}

.danger-markers-hidden:hover[b-zwocfzpasn] {
    background: rgba(158, 158, 158, 0.2) !important;
    transform: scale(1.05);
}

.parking-markers-visible:hover[b-zwocfzpasn] {
    background: rgba(33, 150, 243, 0.3) !important;
    transform: scale(1.05);
}

.parking-markers-hidden:hover[b-zwocfzpasn] {
    background: rgba(158, 158, 158, 0.2) !important;
    transform: scale(1.05);
}

/* =====================================
   ANALYTICS STYLES
   ===================================== */

.analytique-panel[b-zwocfzpasn] {
    padding: 16px;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.analytics-kpis[b-zwocfzpasn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-card[b-zwocfzpasn] {
    background: var(--ion-color-light);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--ion-color-light-shade);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover[b-zwocfzpasn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.kpi-icon[b-zwocfzpasn] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.kpi-card:nth-child(1) .kpi-icon[b-zwocfzpasn] { background: #2196F3; }
.kpi-card:nth-child(2) .kpi-icon[b-zwocfzpasn] { background: #4CAF50; }
.kpi-card:nth-child(3) .kpi-icon[b-zwocfzpasn] { background: #FF9800; }
.kpi-card:nth-child(4) .kpi-icon[b-zwocfzpasn] { background: #9C27B0; }

.kpi-content[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kpi-value[b-zwocfzpasn] {
    font-size: 20px;
    font-weight: bold;
    color: var(--ion-color-dark);
    line-height: 1;
}

.kpi-label[b-zwocfzpasn] {
    font-size: 12px;
    color: var(--ion-color-medium);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.analytics-charts[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chart-container[b-zwocfzpasn] {
    background: var(--ion-color-light);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--ion-color-light-shade);
}

.chart-container h4[b-zwocfzpasn] {
    margin: 0 0 16px 0;
    color: var(--ion-color-dark);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-container h4 i[b-zwocfzpasn] {
    color: var(--ion-color-primary);
}

/* Responsive design pour les analytics */
@media (max-width: 768px) {
    .analytics-kpis[b-zwocfzpasn] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .kpi-card[b-zwocfzpasn] {
        padding: 12px;
        gap: 8px;
    }
    
    .kpi-icon[b-zwocfzpasn] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .kpi-value[b-zwocfzpasn] {
        font-size: 16px;
    }
    
    .kpi-label[b-zwocfzpasn] {
        font-size: 10px;
    }
    
    .chart-container[b-zwocfzpasn] {
        padding: 16px;
    }
    
    .chart-container h4[b-zwocfzpasn] {
        font-size: 14px;
    }
}

/* Dark theme pour les analytics */
[data-theme="dark"] .kpi-card[b-zwocfzpasn],
[data-theme="dark"] .chart-container[b-zwocfzpasn] {
    background: var(--ion-color-dark-shade);
    border-color: var(--ion-color-dark-tint);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .kpi-value[b-zwocfzpasn],
[data-theme="dark"] .chart-container h4[b-zwocfzpasn] {
    color: var(--ion-color-light);
}

[data-theme="dark"] .kpi-label[b-zwocfzpasn] {
    color: var(--ion-color-light-shade);
}

/* Light theme pour les analytics */
[data-theme="light"] .kpi-card[b-zwocfzpasn],
[data-theme="light"] .chart-container[b-zwocfzpasn] {
    background: #ffffff;
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .kpi-value[b-zwocfzpasn],
[data-theme="light"] .chart-container h4[b-zwocfzpasn] {
    color: #333333;
}

[data-theme="light"] .kpi-label[b-zwocfzpasn] {
    color: #666666;
}

/* ======================
   ✨ CHART LOADING STYLES 
   ====================== */

.chart-loading[b-zwocfzpasn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 2px dashed #e0e0e0;
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;
}

.loading-spinner[b-zwocfzpasn] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2196F3;
    border-radius: 50%;
    animation: spin-b-zwocfzpasn 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin-b-zwocfzpasn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.chart-loading span[b-zwocfzpasn] {
    font-weight: 500;
    color: #2196F3;
}

/* Chart Container Loading States */
.chart-container.loading[b-zwocfzpasn] {
    opacity: 0.6;
    pointer-events: none;
}

.chart-container.loaded[b-zwocfzpasn] {
    animation: fadeInChart-b-zwocfzpasn 0.5s ease-in;
}

@keyframes fadeInChart-b-zwocfzpasn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark theme pour les loading states */
[data-theme="dark"] .chart-loading[b-zwocfzpasn] {
    background: rgba(38, 38, 38, 0.8);
    border-color: var(--ion-color-dark-tint);
    color: var(--ion-color-light-shade);
}

[data-theme="dark"] .chart-loading span[b-zwocfzpasn] {
    color: var(--ion-color-primary);
}

[data-theme="dark"] .loading-spinner[b-zwocfzpasn] {
    border-color: var(--ion-color-dark-tint);
    border-top-color: var(--ion-color-primary);
}
/* /Pages/MonthlyParcReport.razor.rz.scp.css */
/* monthlyParcReport.razor.css */

.monthly-parc-report-page[b-kzb3qa28wb] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    color: var(--text-color);
}

    /* Variables CSS pour le mode sombre/clair */
    .monthly-parc-report-page[data-theme="light"][b-kzb3qa28wb] {
        --background-color: #ffffff;
        --text-color: #333333;
        --card-bg: #ffffff;
        --border-color: #e0e0e0;
        --primary-color: #007bff;
        --success-color: #28a745;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
        --loading-bg: rgba(255, 255, 255, 0.95);
    }

    .monthly-parc-report-page[data-theme="dark"][b-kzb3qa28wb] {
        --background-color: #1a1a1a;
        --text-color: #e0e0e0;
        --card-bg: #2d2d2d;
        --border-color: #444444;
        --primary-color: #0d6efd;
        --success-color: #198754;
        --danger-color: #dc3545;
        --warning-color: #ffc107;
        --loading-bg: rgba(26, 26, 26, 0.95);
    }

/* Header */
.header[b-kzb3qa28wb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.page-title[b-kzb3qa28wb] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.header-icons[b-kzb3qa28wb] {
    display: flex;
    gap: 0.5rem;
}

.header-icon-btn[b-kzb3qa28wb] {
    --border-radius: 8px;
    --padding-start: 8px;
    --padding-end: 8px;
    --min-height: 36px;
    font-size: 1.1rem;
}

.export-pdf-btn[b-kzb3qa28wb] {
    --color: #dc3545;
}

.export-excel-btn[b-kzb3qa28wb] {
    --color: #198754;
}

.document-btn[b-kzb3qa28wb] {
    --color: var(--primary-color);
}

/* Content */
.content[b-kzb3qa28wb] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

/* Loading Container */
.loading-container[b-kzb3qa28wb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: var(--loading-bg);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.loading-header[b-kzb3qa28wb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
}

.progress-bar-container[b-kzb3qa28wb] {
    width: 100%;
    max-width: 300px;
    margin: 1rem 0;
}

.progress-bar[b-kzb3qa28wb] {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-kzb3qa28wb] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
    transition: width 0.3s ease;
}

.progress-text[b-kzb3qa28wb] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

.cancel-btn[b-kzb3qa28wb] {
    --background: var(--danger-color);
    --color: white;
    margin-top: 1rem;
}

.loading-message[b-kzb3qa28wb] {
    margin-top: 2rem;
    text-align: center;
    color: var(--text-color);
    opacity: 0.8;
}

    .loading-message p[b-kzb3qa28wb] {
        margin: 0.5rem 0;
    }

/* Data Grid Container */
.data-grid-container[b-kzb3qa28wb] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

    .data-grid-container h3[b-kzb3qa28wb] {
        margin: 0 0 0.5rem 0;
        color: var(--primary-color);
        font-size: 1.3rem;
        font-weight: 600;
    }

    .data-grid-container p[b-kzb3qa28wb] {
        margin: 0 0 1.5rem 0;
        color: var(--text-color);
        opacity: 0.8;
    }

/* Actions Section */
.actions-section[b-kzb3qa28wb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.export-btn[b-kzb3qa28wb] {
    --background: var(--success-color);
    --color: white;
    --border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
}

.new-report-btn[b-kzb3qa28wb] {
    --color: var(--primary-color);
    --border-color: var(--primary-color);
    --border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
}

/* Error Container */
.error-container[b-kzb3qa28wb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--danger-color);
}

    .error-container ion-icon[b-kzb3qa28wb] {
        font-size: 4rem;
        color: var(--danger-color);
        margin-bottom: 1rem;
    }

    .error-container h3[b-kzb3qa28wb] {
        color: var(--danger-color);
        margin: 0 0 1rem 0;
    }

    .error-container p[b-kzb3qa28wb] {
        color: var(--text-color);
        margin: 0 0 2rem 0;
        opacity: 0.8;
    }

    .error-container ion-button[b-kzb3qa28wb] {
        --background: var(--danger-color);
        --color: white;
    }

/* Empty State */
.empty-state[b-kzb3qa28wb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

    .empty-state ion-icon[b-kzb3qa28wb] {
        font-size: 4rem;
        color: var(--primary-color);
        margin-bottom: 1rem;
        opacity: 0.6;
    }

    .empty-state h3[b-kzb3qa28wb] {
        color: var(--text-color);
        margin: 0 0 1rem 0;
        font-weight: 600;
    }

    .empty-state p[b-kzb3qa28wb] {
        color: var(--text-color);
        margin: 0 0 2rem 0;
        opacity: 0.7;
        line-height: 1.5;
    }

    .empty-state ion-button[b-kzb3qa28wb] {
        --background: var(--primary-color);
        --color: white;
        --border-radius: 10px;
        font-weight: 600;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .header[b-kzb3qa28wb] {
        padding: 0.75rem;
    }

    .page-title[b-kzb3qa28wb] {
        font-size: 1.1rem;
    }

    .header-icon-btn[b-kzb3qa28wb] {
        --min-height: 32px;
        font-size: 1rem;
    }

    .content[b-kzb3qa28wb] {
        padding: 0.75rem;
    }

    .data-grid-container[b-kzb3qa28wb] {
        padding: 1rem;
    }

        .data-grid-container h3[b-kzb3qa28wb] {
            font-size: 1.1rem;
        }

    .loading-container[b-kzb3qa28wb],
    .empty-state[b-kzb3qa28wb],
    .error-container[b-kzb3qa28wb] {
        padding: 1.5rem;
        min-height: 50vh;
    }
}

@media (max-width: 480px) {
    .header[b-kzb3qa28wb] {
        padding: 0.5rem;
    }

    .page-title[b-kzb3qa28wb] {
        font-size: 1rem;
    }

    .header-icons[b-kzb3qa28wb] {
        gap: 0.25rem;
    }

    .header-icon-btn[b-kzb3qa28wb] {
        --min-height: 28px;
        --padding-start: 6px;
        --padding-end: 6px;
        font-size: 0.9rem;
    }

    .content[b-kzb3qa28wb] {
        padding: 0.5rem;
    }

    .data-grid-container[b-kzb3qa28wb] {
        padding: 0.75rem;
    }

    .actions-section[b-kzb3qa28wb] {
        margin-top: 1rem;
    }

    .loading-container[b-kzb3qa28wb],
    .empty-state[b-kzb3qa28wb],
    .error-container[b-kzb3qa28wb] {
        padding: 1rem;
        min-height: 40vh;
    }
}

/* Animation */
.loading-header ion-spinner[b-kzb3qa28wb] {
    animation: pulse-b-kzb3qa28wb 2s infinite;
}

@keyframes pulse-b-kzb3qa28wb {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Grid customization */
[b-kzb3qa28wb] .e-grid {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

    [b-kzb3qa28wb] .e-grid .e-gridheader {
        background: var(--primary-color);
        color: white;
    }

    [b-kzb3qa28wb] .e-grid .e-headercell {
        background: var(--primary-color);
        color: white;
        font-weight: 600;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    [b-kzb3qa28wb] .e-grid .e-rowcell {
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 8px 12px;
    }

    [b-kzb3qa28wb] .e-grid .e-row:hover .e-rowcell {
        background: var(--border-color);
    }

/* Dark mode specific grid styling */
[data-theme="dark"][b-kzb3qa28wb]  .e-grid {
    background: var(--card-bg);
    color: var(--text-color);
}

    [data-theme="dark"][b-kzb3qa28wb]  .e-grid .e-rowcell {
        background: var(--card-bg);
        color: var(--text-color);
    }

    [data-theme="dark"][b-kzb3qa28wb]  .e-grid .e-row:hover .e-rowcell {
        background: #3a3a3a;
    }
/* /Pages/MonthlyReport.razor.rz.scp.css */
/* Page Rapport Mensuel - Support Dark/Light Mode - Style identique à AnnualReport */
.monthly-report-page[b-ck8owcguyo] {
    min-height: 100vh;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Theme */
.monthly-report-page[data-theme="light"][b-ck8owcguyo] {
    background-color: #ffffff;
    color: #000000;
}

/* Dark Theme */
.monthly-report-page[data-theme="dark"][b-ck8owcguyo] {
    background-color: #1E1E1E;
    color: #FFFFFF;
}

/* Header */
.header[b-ck8owcguyo] {
    background-color: #F5A623;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header ion-button[b-ck8owcguyo] {
    --color: #000000;
    --background: transparent;
}

.page-title[b-ck8owcguyo] {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    flex: 1;
    margin: 0;
}

.header-icons[b-ck8owcguyo] {
    display: flex;
    gap: 10px;
}

.header-icon-btn[b-ck8owcguyo] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    --background: rgba(0, 0, 0, 0.1);
    --color: #000000;
    transition: all 0.3s ease;
}

.header-icon-btn i[b-ck8owcguyo] {
    font-size: 20px;
    font-weight: 400;
}

.header ion-button i[b-ck8owcguyo] {
    font-size: 22px;
    font-weight: 400;
}

.header-icon-btn:hover[b-ck8owcguyo] {
    --background: rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.header-icon-btn:disabled[b-ck8owcguyo] {
    --background: rgba(0, 0, 0, 0.05);
    --color: rgba(0, 0, 0, 0.3);
    transform: none;
}

/* Boutons d'export spécifiques */
.export-pdf-btn[b-ck8owcguyo] {
    --background: rgba(220, 53, 69, 0.1);
    --color: #dc3545;
}

.export-pdf-btn:hover:not(:disabled)[b-ck8owcguyo] {
    --background: rgba(220, 53, 69, 0.2);
}

.export-excel-btn[b-ck8owcguyo] {
    --background: rgba(25, 135, 84, 0.1);
    --color: #198754;
}

.export-excel-btn:hover:not(:disabled)[b-ck8owcguyo] {
    --background: rgba(25, 135, 84, 0.2);
}

.document-btn[b-ck8owcguyo] {
    --background: rgba(13, 110, 253, 0.1);
    --color: #0d6efd;
}

.document-btn:hover:not(:disabled)[b-ck8owcguyo] {
    --background: rgba(13, 110, 253, 0.2);
}

/* Content */
.content[b-ck8owcguyo] {
    padding: 16px;
}

/* Loading - Support Dark/Light Mode */
.loading-container[b-ck8owcguyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.loading-container ion-spinner[b-ck8owcguyo] {
    --color: #F5A623;
    margin-bottom: 20px;
    width: 40px;
    height: 40px;
}

[data-theme="light"] .loading-container p[b-ck8owcguyo] {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
}

[data-theme="dark"] .loading-container p[b-ck8owcguyo] {
    color: #FFFFFF;
    font-size: 16px;
    margin-bottom: 10px;
}

.progress-info[b-ck8owcguyo] {
    color: #F5A623;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Progress Bar - Support Dark/Light Mode */
.progress-bar-container[b-ck8owcguyo] {
    width: 100%;
    margin-top: 16px;
}

.progress-bar[b-ck8owcguyo] {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

[data-theme="light"] .progress-bar[b-ck8owcguyo] {
    background-color: #e0e0e0;
}

[data-theme="dark"] .progress-bar[b-ck8owcguyo] {
    background-color: #333333;
}

.progress-fill[b-ck8owcguyo] {
    height: 100%;
    background: linear-gradient(90deg, #F5A623, #FF8C00);
    border-radius: 4px;
    transition: width 0.3s ease;
}

[data-theme="light"] .progress-text[b-ck8owcguyo] {
    color: #666666;
    font-size: 12px;
    text-align: center;
    display: block;
}

[data-theme="dark"] .progress-text[b-ck8owcguyo] {
    color: #CCCCCC;
    font-size: 12px;
    text-align: center;
    display: block;
}

/* Data Grid Container - Support Dark/Light Mode */
.data-grid-container[b-ck8owcguyo] {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 16px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light theme styles */
[data-theme="light"] .data-grid-container[b-ck8owcguyo] {
    background: #f8f9fa;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Dark theme styles */
[data-theme="dark"] .data-grid-container[b-ck8owcguyo] {
    background: #2C2C2C;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Loading Grid Styles */
.loading-grid[b-ck8owcguyo] {
    position: relative;
}

.loading-header[b-ck8owcguyo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    border-bottom: 2px solid #F5A623;
    margin-bottom: 16px;
    gap: 12px;
}

.loading-header ion-spinner[b-ck8owcguyo] {
    --color: #F5A623;
    width: 24px;
    height: 24px;
}

.loading-header span[b-ck8owcguyo] {
    color: #F5A623;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.loading-header .progress-bar-container[b-ck8owcguyo] {
    width: 100%;
    max-width: 300px;
}

.loading-header .cancel-btn[b-ck8owcguyo] {
    --background: transparent;
    --color: #f44336;
    --border-color: #f44336;
    --border-radius: 6px;
    height: 32px;
    font-size: 12px;
}

.loading-header .cancel-btn:hover[b-ck8owcguyo] {
    --background: rgba(244, 67, 54, 0.1);
}

/* Syncfusion Grid Theming - Support Dark/Light Mode avec priorité élevée */

/* Common styles for all themes */
.data-grid-container .e-grid[b-ck8owcguyo] {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: inherit !important;
}

/* Padding 0 pour toutes les cellules de la grille */
.data-grid-container .e-grid .e-rowcell[b-ck8owcguyo] {
    padding: 0 !important;
    border-right: none !important;
    font-size: 13px !important;
    text-align: center !important;
}

.data-grid-container .e-grid .e-headercell[b-ck8owcguyo] {
    padding: 0 !important;
    border-right: none !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
}

[data-theme="light"] .e-grid .e-headercell[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .e-headercell[b-ck8owcguyo] {
    background-color: #f8f9fa !important;
    color: #000000 !important;
    border-bottom: 2px solid #007bff !important;
}

[data-theme="light"] .e-grid .e-row[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .e-row[b-ck8owcguyo] {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

[data-theme="light"] .e-grid .e-row:hover[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .e-row:hover[b-ck8owcguyo] {
    background-color: #f5f5f5 !important;
}

[data-theme="light"] .e-grid .e-altrow[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .e-altrow[b-ck8owcguyo] {
    background-color: #f8f9fa !important;
}

[data-theme="light"] .e-grid .e-altrow:hover[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .e-altrow:hover[b-ck8owcguyo] {
    background-color: #e9ecef !important;
}

/* Styles globaux pour Syncfusion - Dark Theme */
[data-theme="dark"] .e-grid[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid[b-ck8owcguyo] {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
    border: 1px solid #444444 !important;
}

[data-theme="dark"] .e-grid .e-headercell[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .e-headercell[b-ck8owcguyo] {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid #F5A623 !important;
}

[data-theme="dark"] .e-grid .e-row[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .e-row[b-ck8owcguyo] {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid #444444 !important;
}

[data-theme="dark"] .e-grid .e-row:hover[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .e-row:hover[b-ck8owcguyo] {
    background-color: #353535 !important;
}

[data-theme="dark"] .e-grid .e-altrow[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .e-altrow[b-ck8owcguyo] {
    background-color: #2A2A2A !important;
}

[data-theme="dark"] .e-grid .e-altrow:hover[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .e-altrow:hover[b-ck8owcguyo] {
    background-color: #353535 !important;
}

/* Style spécial pour la ligne de récapitulatif - Light theme */
[data-theme="light"] .e-grid .summary-row[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .summary-row[b-ck8owcguyo] {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    font-weight: bold !important;
    border-top: 2px solid #1976d2 !important;
    border-bottom: 2px solid #1976d2 !important;
}

[data-theme="light"] .e-grid .summary-row:hover[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .summary-row:hover[b-ck8owcguyo] {
    background-color: #bbdefb !important;
}

[data-theme="light"] .e-grid .summary-row .e-rowcell[b-ck8owcguyo],
[data-theme="light"] .data-grid-container .e-grid .summary-row .e-rowcell[b-ck8owcguyo] {
    font-weight: bold !important;
    color: #1976d2 !important;
    background-color: transparent !important;
}

/* Style spécial pour la ligne de récapitulatif - Dark theme */
[data-theme="dark"] .e-grid .summary-row[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .summary-row[b-ck8owcguyo] {
    background-color: #444444 !important;
    color: #F5A623 !important;
    font-weight: bold !important;
    border-top: 2px solid #F5A623 !important;
    border-bottom: 2px solid #F5A623 !important;
}

[data-theme="dark"] .e-grid .summary-row:hover[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .summary-row:hover[b-ck8owcguyo] {
    background-color: #4a4a4a !important;
}

[data-theme="dark"] .e-grid .summary-row .e-rowcell[b-ck8owcguyo],
[data-theme="dark"] .data-grid-container .e-grid .summary-row .e-rowcell[b-ck8owcguyo] {
    font-weight: bold !important;
    color: #F5A623 !important;
    background-color: transparent !important;
}

/* Actions Section - Support Dark/Light Mode */
.actions-section[b-ck8owcguyo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.actions-section ion-button[b-ck8owcguyo] {
    margin: 0;
    height: 44px;
    --border-radius: 8px;
    font-weight: 500;
}

.export-btn[b-ck8owcguyo] {
    --background: #4CAF50;
    --color: white;
}

.export-btn:hover[b-ck8owcguyo] {
    --background: #45A049;
}

.new-report-btn[b-ck8owcguyo] {
    --background: transparent;
    --color: #F5A623;
    --border-color: #F5A623;
    --border-width: 2px;
    --border-style: solid;
}

.new-report-btn:hover[b-ck8owcguyo] {
    --background: rgba(245, 166, 35, 0.1);
}

/* Empty State - Support Dark/Light Mode */
.empty-state[b-ck8owcguyo] {
    text-align: center;
    padding: 60px 20px;
}

.empty-state ion-icon[b-ck8owcguyo] {
    font-size: 64px;
    margin-bottom: 16px;
    color: #F5A623;
}

[data-theme="light"] .empty-state h3[b-ck8owcguyo] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
}

[data-theme="dark"] .empty-state h3[b-ck8owcguyo] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}

[data-theme="light"] .empty-state p[b-ck8owcguyo] {
    margin: 0 0 24px 0;
    color: #666666;
}

[data-theme="dark"] .empty-state p[b-ck8owcguyo] {
    margin: 0 0 24px 0;
    color: #CCCCCC;
}

/* Error State - Support Dark/Light Mode */
.error-container[b-ck8owcguyo] {
    text-align: center;
    padding: 60px 20px;
}

.error-container ion-icon[b-ck8owcguyo] {
    font-size: 64px;
    color: #d32f2f;
    margin-bottom: 16px;
}

[data-theme="light"] .error-container h3[b-ck8owcguyo] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #d32f2f;
}

[data-theme="dark"] .error-container h3[b-ck8owcguyo] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #f44336;
}

[data-theme="light"] .error-container p[b-ck8owcguyo] {
    margin: 0 0 24px 0;
    color: #666666;
}

[data-theme="dark"] .error-container p[b-ck8owcguyo] {
    margin: 0 0 24px 0;
    color: #CCCCCC;
}

/* Responsive design */
@media (max-width: 768px) {
    .header[b-ck8owcguyo] {
        padding: 8px 12px;
    }
    
    .content[b-ck8owcguyo] {
        padding: 12px;
    }
    
    .data-grid-container[b-ck8owcguyo] {
        padding: 12px;
    }
    
    .header-icons[b-ck8owcguyo] {
        gap: 6px;
    }
    
    .header-icon-btn[b-ck8owcguyo] {
        width: 36px;
        height: 36px;
    }
    
    .header-icon-btn i[b-ck8owcguyo] {
        font-size: 18px;
    }
    
    .page-title[b-ck8owcguyo] {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header[b-ck8owcguyo] {
        padding: 6px 8px;
    }
    
    .content[b-ck8owcguyo] {
        padding: 8px;
    }
    
    .data-grid-container[b-ck8owcguyo] {
        padding: 8px;
    }
    
    .header-icons[b-ck8owcguyo] {
        gap: 4px;
    }
    
    .header-icon-btn[b-ck8owcguyo] {
        width: 32px;
        height: 32px;
    }
    
    .header-icon-btn i[b-ck8owcguyo] {
        font-size: 16px;
    }
    
    .page-title[b-ck8owcguyo] {
        font-size: 14px;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* Profile Page Styles - Theme-aware */
.profile-section[b-n8nukp46nd] {
    padding: 20px 16px;
    background: var(--ion-background-color);
   
}

.user-info-card[b-n8nukp46nd] {
    display: flex;
    align-items: center;
    background: var(--ion-item-background);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid var(--ion-item-border-color);
}

.user-avatar[b-n8nukp46nd] {
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

.user-avatar ion-icon[b-n8nukp46nd] {
    font-size: 60px;
    color: var(--ion-color-primary);
}

.user-details[b-n8nukp46nd] {
    flex: 1;
}

.username[b-n8nukp46nd] {
    font-size: 24px;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0 0 4px 0;
}

.user-email[b-n8nukp46nd] {
    font-size: 16px;
    color: var(--ion-text-color);
    opacity: 0.7;
    margin: 0 0 8px 0;
}

.last-login[b-n8nukp46nd] {
    font-size: 14px;
    color: var(--ion-text-color);
    opacity: 0.6;
}

/* Settings Container */
.settings-container[b-n8nukp46nd] {
    padding: 0 16px 80px 16px;
}

.settings-section[b-n8nukp46nd] {
    margin-bottom: 24px;
}

.section-header[b-n8nukp46nd] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 4px;
}

.section-icon[b-n8nukp46nd] {
    font-size: 20px;
    color: var(--ion-color-primary);
    margin-right: 12px;
}

.section-header h3[b-n8nukp46nd] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ion-text-color);
    margin: 0;
}

.settings-list[b-n8nukp46nd] {
    background: var(--ion-item-background);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid var(--ion-item-border-color);
}

.setting-item[b-n8nukp46nd] {
    --padding-start: 16px;
    --padding-end: 16px;
    --min-height: 60px;
    --background: var(--ion-item-background);
    --color: var(--ion-item-color);
    border-bottom: 1px solid var(--ion-item-border-color);
}

.setting-item:last-child[b-n8nukp46nd] {
    border-bottom: none;
}

.setting-item ion-icon[slot="start"][b-n8nukp46nd] {
    font-size: 20px;
    margin-right: 16px;
    color: var(--ion-text-color);
    opacity: 0.7;
}

.setting-item ion-label h3[b-n8nukp46nd] {
    font-size: 16px;
    font-weight: 500;
    color: var(--ion-text-color);
    margin: 0 0 4px 0;
}

.setting-item ion-label p[b-n8nukp46nd] {
    font-size: 14px;
    color: var(--ion-text-color);
    opacity: 0.7;
    margin: 0;
}

/* Theme Preview */
.theme-preview[b-n8nukp46nd] {
    --padding-start: 16px;
    --padding-end: 16px;
    --padding-top: 16px;
    --padding-bottom: 16px;
}

.theme-indicators[b-n8nukp46nd] {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: space-around;
}

.theme-indicator[b-n8nukp46nd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
    opacity: 0.6;
}

.theme-indicator.active[b-n8nukp46nd] {
    opacity: 1;
    background: var(--ion-color-primary-tint, rgba(56, 128, 255, 0.1));
}

.theme-circle[b-n8nukp46nd] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--ion-color-medium);
    position: relative;
    overflow: hidden;
}

.theme-circle.light[b-n8nukp46nd] {
    background: linear-gradient(45deg, #ffffff 50%, #f4f5f8 50%);
    border-color: #3880ff;
}

.theme-circle.dark[b-n8nukp46nd] {
    background: linear-gradient(45deg, #121212 50%, #1e1e1e 50%);
    border-color: #3880ff;
}

.theme-circle.auto[b-n8nukp46nd] {
    background: linear-gradient(45deg, #ffffff 25%, #121212 25%, #121212 50%, #ffffff 50%, #ffffff 75%, #121212 75%);
    border-color: #3880ff;
}

.theme-indicator span[b-n8nukp46nd] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ion-color-dark);
}

/* Theme Select Styling */
.theme-select[b-n8nukp46nd] {
    background: var(--ion-item-background);
    color: var(--ion-text-color);
    border: 1px solid var(--ion-item-border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    min-width: 120px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 8.5L2.5 5h7L6 8.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px;
}

.theme-select:focus[b-n8nukp46nd] {
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 2px var(--ion-color-primary-tint);
}

.theme-select option[b-n8nukp46nd] {
    background: var(--ion-item-background);
    color: var(--ion-text-color);
    padding: 8px;
}

[data-theme="dark"] .theme-select[b-n8nukp46nd] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999999' d='M6 8.5L2.5 5h7L6 8.5z'/%3E%3C/svg%3E");
}

/* Modal Styles */
.modal-overlay[b-n8nukp46nd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.password-modal[b-n8nukp46nd] {
    background: var(--ion-color-background, white);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-header[b-n8nukp46nd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid var(--ion-color-light-shade, #e0e0e0);
}

.modal-header h3[b-n8nukp46nd] {
    font-size: 20px;
    font-weight: 600;
    color: var(--ion-color-dark, #222428);
    margin: 0;
}

.modal-content[b-n8nukp46nd] {
    padding: 20px;
}

.modal-item[b-n8nukp46nd] {
    --padding-start: 0;
    --padding-end: 0;
    --inner-padding-end: 0;
    margin-bottom: 16px;
    border: 1px solid var(--ion-color-light-shade, #e0e0e0);
    border-radius: 8px;
}

.modal-item ion-icon[slot="start"][b-n8nukp46nd] {
    margin-right: 12px;
    color: var(--ion-color-medium);
}

.modal-item ion-icon[slot="end"][b-n8nukp46nd] {
    color: var(--ion-color-medium);
    cursor: pointer;
}

.modal-actions[b-n8nukp46nd] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.modal-actions ion-button[b-n8nukp46nd] {
    flex: 1;
}

/* Error Text */
.error-text[b-n8nukp46nd] {
    color: var(--ion-color-danger);
    font-size: 14px;
    padding: 12px 16px;
    background: var(--ion-color-danger-tint, rgba(235, 68, 90, 0.1));
    border-radius: 8px;
    margin: 16px 0;
    display: block;
}

/* Success Toast */
.success-toast[b-n8nukp46nd] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ion-color-success);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10001;
    box-shadow: 0 4px 16px rgba(45, 211, 111, 0.3);
    animation: slideDown-b-n8nukp46nd 0.3s ease-out;
}

.success-toast ion-icon[b-n8nukp46nd] {
    font-size: 20px;
}

@keyframes slideDown-b-n8nukp46nd {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Dark Theme Support */
[data-theme="dark"] .profile-section[b-n8nukp46nd] {
    background: var(--ion-background-color, #121212);
}

[data-theme="dark"] .user-info-card[b-n8nukp46nd],
[data-theme="dark"] .settings-list[b-n8nukp46nd],
[data-theme="dark"] .password-modal[b-n8nukp46nd] {
    background: var(--ion-color-light, #1e1e1e);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .username[b-n8nukp46nd] {
    color: var(--ion-color-primary-tint, #4c8dff);
}

[data-theme="dark"] .user-email[b-n8nukp46nd],
[data-theme="dark"] .last-login[b-n8nukp46nd] {
    color: var(--ion-color-medium, #999999);
}

[data-theme="dark"] .section-header h3[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}

[data-theme="dark"] .setting-item[b-n8nukp46nd] {
    border-bottom-color: var(--ion-color-step-200, #333333);
}

[data-theme="dark"] .setting-item ion-label h3[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}

[data-theme="dark"] .setting-item ion-label p[b-n8nukp46nd] {
    color: var(--ion-color-medium, #999999);
}

[data-theme="dark"] .setting-item ion-icon[slot="start"][b-n8nukp46nd] {
    color: var(--ion-color-medium, #999999);
}

[data-theme="dark"] .modal-header[b-n8nukp46nd] {
    border-bottom-color: var(--ion-color-step-200, #333333);
}

[data-theme="dark"] .modal-header h3[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}

[data-theme="dark"] .modal-item[b-n8nukp46nd] {
    border-color: var(--ion-color-step-200, #333333);
    background: var(--ion-color-step-100, #1a1a1a);
}

[data-theme="dark"] .modal-item ion-icon[b-n8nukp46nd] {
    color: var(--ion-color-medium, #999999);
}

[data-theme="dark"] .theme-indicator span[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}

[data-theme="dark"] .theme-indicator.active[b-n8nukp46nd] {
    background: var(--ion-color-primary-tint, rgba(76, 141, 255, 0.1));
}

[data-theme="dark"] .success-toast[b-n8nukp46nd] {
    box-shadow: 0 4px 16px rgba(45, 211, 111, 0.5);
}

[data-theme="dark"] .error-text[b-n8nukp46nd] {
    background: var(--ion-color-danger-tint, rgba(235, 68, 90, 0.2));
    color: var(--ion-color-danger, #eb445a);
}

/* Light theme explicit styles for better contrast */
[data-theme="light"] .user-info-card[b-n8nukp46nd],
[data-theme="light"] .settings-list[b-n8nukp46nd],
[data-theme="light"] .password-modal[b-n8nukp46nd] {
    background: var(--ion-color-background, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .setting-item[b-n8nukp46nd] {
    border-bottom-color: var(--ion-color-light-shade, #e0e0e0);
}

[data-theme="light"] .modal-item[b-n8nukp46nd] {
    border-color: var(--ion-color-light-shade, #e0e0e0);
    background: var(--ion-color-background, #ffffff);
}

[data-theme="light"] .modal-header[b-n8nukp46nd] {
    border-bottom-color: var(--ion-color-light-shade, #e0e0e0);
}

/* Responsive Design */
@media (max-width: 480px) {
    .user-info-card[b-n8nukp46nd] {
        padding: 16px;
    }
    
    .user-avatar[b-n8nukp46nd] {
        width: 60px;
        height: 60px;
    }
    
    .user-avatar ion-icon[b-n8nukp46nd] {
        font-size: 45px;
    }
    
    .username[b-n8nukp46nd] {
        font-size: 20px;
    }
    
    .theme-indicators[b-n8nukp46nd] {
        gap: 12px;
    }
    
    .theme-circle[b-n8nukp46nd] {
        width: 28px;
        height: 28px;
    }
    
    .modal-overlay[b-n8nukp46nd] {
        padding: 12px;
    }
    
    .modal-content[b-n8nukp46nd] {
        padding: 16px;
    }
}

/* Push Notifications Styles */
.sub-item[b-n8nukp46nd] {
    padding-left: 32px;
    margin-left: 16px;
    border-left: 2px solid var(--ion-color-primary-tint);
    background: var(--ion-color-light-tint);
}

.sub-item ion-label h4[b-n8nukp46nd] {
    font-size: 14px;
    color: var(--ion-text-color);
    opacity: 0.8;
    margin: 0;
}

.error-text[b-n8nukp46nd] {
    color: var(--ion-color-danger);
    font-size: 12px;
    font-style: italic;
}

.loading-text[b-n8nukp46nd] {
    color: var(--ion-color-primary);
    font-size: 12px;
    font-style: italic;
}

/* Push notification status indicators */
.push-status-enabled[b-n8nukp46nd] {
    color: var(--ion-color-success);
}

.push-status-disabled[b-n8nukp46nd] {
    color: var(--ion-color-medium);
}

.push-status-denied[b-n8nukp46nd] {
    color: var(--ion-color-danger);
}

/* Dark theme specific push notification styles */
[data-theme="dark"] .sub-item[b-n8nukp46nd] {
    background: var(--ion-color-dark-tint);
    border-left-color: var(--ion-color-primary-shade);
}

[data-theme="dark"] .error-text[b-n8nukp46nd] {
    color: var(--ion-color-danger-tint);
}

/* Light theme specific push notification styles */
[data-theme="light"] .sub-item[b-n8nukp46nd] {
    background: var(--ion-color-light);
    border-left-color: var(--ion-color-primary);
}

/* Animation for test button */
.setting-item ion-button[disabled][b-n8nukp46nd] {
    opacity: 0.6;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.setting-item ion-button:not([disabled])[b-n8nukp46nd] {
    transform: scale(1);
    transition: all 0.2s ease;
}

.setting-item ion-button:not([disabled]):hover[b-n8nukp46nd] {
    transform: scale(1.05);
}

/* PWA Install Instructions Modal Styles */
.install-instructions[b-n8nukp46nd] {
    text-align: left;
}

.platform-instructions[b-n8nukp46nd] {
    margin-bottom: 24px;
    text-align: center;
}

.platform-instructions ion-icon[b-n8nukp46nd] {
    margin-bottom: 16px;
}

.platform-instructions h4[b-n8nukp46nd] {
    color: var(--ion-color-dark);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.platform-instructions ol[b-n8nukp46nd] {
    text-align: left;
    margin: 0;
    padding: 0 0 0 20px;
    color: var(--ion-color-dark);
}

.platform-instructions li[b-n8nukp46nd] {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 0.95rem;
}

.platform-instructions li strong[b-n8nukp46nd] {
    color: var(--ion-color-primary);
    font-weight: 600;
}

.install-benefits[b-n8nukp46nd] {
    background: var(--ion-color-light);
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.install-benefits h4[b-n8nukp46nd] {
    color: var(--ion-color-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.install-benefits ul[b-n8nukp46nd] {
    margin: 0;
    padding: 0 0 0 20px;
    color: var(--ion-color-dark);
}

.install-benefits li[b-n8nukp46nd] {
    margin-bottom: 6px;
    line-height: 1.3;
    font-size: 0.9rem;
}

/* PWA Install section specific styles */
.setting-item ion-button[slot="end"][b-n8nukp46nd] {
    margin-left: 12px;
}

.setting-item ion-icon[slot="end"][color="success"][b-n8nukp46nd] {
    font-size: 1.5rem;
}

/* Dark theme support for install modal */
[data-theme="dark"] .platform-instructions h4[b-n8nukp46nd],
[data-theme="dark"] .platform-instructions ol[b-n8nukp46nd],
[data-theme="dark"] .platform-instructions li[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}

[data-theme="dark"] .install-benefits[b-n8nukp46nd] {
    background: var(--ion-color-step-100, #1e1e1e);
}

[data-theme="dark"] .install-benefits ul[b-n8nukp46nd],
[data-theme="dark"] .install-benefits li[b-n8nukp46nd] {
    color: var(--ion-text-color, #ffffff);
}
/* /Pages/Realtime.razor.rz.scp.css */
.realtime-filter-menu[b-x0fnpcmzd0] {
    position: absolute;
    top: 60px;
    right: 24px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    z-index: 9999;
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid #e0e0e0;
}

.realtime-sort-menu[b-x0fnpcmzd0] {
    position: absolute;
    top: 60px;
    right: 24px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    z-index: 9999;
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid #e0e0e0;
}

.realtime-sort-title[b-x0fnpcmzd0] {
    font-weight: 600;
    font-size: 1.08rem;
    padding: 8px 18px 6px 18px;
    color: #2DD36F;
}

.realtime-sort-item[b-x0fnpcmzd0] {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 8px 18px;
    font-size: 1rem;
    color: #222;
    cursor: pointer;
    transition: background 0.15s;
}

    .realtime-sort-item:hover[b-x0fnpcmzd0] {
        background: #f4f5f7;
    }

.realtime-icon-bg[b-x0fnpcmzd0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    background: var(--icon-bg, #e0e0e0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: background 0.2s;
}

.realtime-root[b-x0fnpcmzd0] {
    min-height: 100vh;
    padding-bottom: 32px;
}

.realtime-header[b-x0fnpcmzd0] {
    display: flex;
    align-items: center;
    padding: 16px 20px 12px 12px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.realtime-header-title[b-x0fnpcmzd0] {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 32px;
}

.realtime-back-btn[b-x0fnpcmzd0] {
    background: none;
    border: none;
    color: inherit;
    padding: 0 8px 0 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    height: 40px;
    width: 40px;
}

.realtime-header-actions[b-x0fnpcmzd0] {
    display: flex;
    gap: 8px;
}

.realtime-header-action[b-x0fnpcmzd0] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

.realtime-segment[b-x0fnpcmzd0] {
    display: flex;
    gap: 8px;
    margin: 16px 0 8px 0;
    justify-content: center;
}

.realtime-segment-btn[b-x0fnpcmzd0] {
    border: none;
    border-radius: 16px;
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .realtime-segment-btn.active[b-x0fnpcmzd0] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

.realtime-list-container[b-x0fnpcmzd0] {
    background: none;
    margin: 0 0 12px 0;
    max-height: 80vh;
    overflow-y: auto;
}

.realtime-list-summary[b-x0fnpcmzd0] {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: #6C757D;
}

.realtime-search[b-x0fnpcmzd0] {
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    margin-bottom: 12px;
    font-size: 1rem;
}

.realtime-vehicle-list[b-x0fnpcmzd0] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.realtime-vehicle-card[b-x0fnpcmzd0] {
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 16px 14px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100% !important;
}

.realtime-vehicle-main[b-x0fnpcmzd0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.realtime-vehicle-info[b-x0fnpcmzd0] {
    flex: 1;
}

.realtime-vehicle-title[b-x0fnpcmzd0] {
    font-size: 1.1rem;
    font-weight: 600;
}

.realtime-vehicle-speed[b-x0fnpcmzd0] {
    font-size: 1.5rem;
    font-weight: 800;
}

.realtime-vehicle-unit[b-x0fnpcmzd0] {
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
}

.realtime-vehicle-status-dot[b-x0fnpcmzd0] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 8px;
}

.realtime-vehicle-details[b-x0fnpcmzd0] {
    display: grid;
    gap: 6px;
    font-size: 0.98rem;
    color: #888;
}

.realtime-vehicle-detail ion-icon[b-x0fnpcmzd0] {
    font-size: 1.4rem;
}

.realtime-vehicle-status-icons[b-x0fnpcmzd0] {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

    .realtime-vehicle-status-icons ion-icon[b-x0fnpcmzd0] {
        font-size: 1.3rem;
        opacity: 0.5;
        transition: opacity 0.2s;
    }

        .realtime-vehicle-status-icons ion-icon.active[b-x0fnpcmzd0] {
            opacity: 1;
            color: #2DD36F;
        }

.realtime-map-placeholder[b-x0fnpcmzd0] {
    text-align: center;
    color: #888;
    font-size: 1.2rem;
    margin-top: 40px;
}

/* Styles pour les slides Ionic */
.realtime-vehicle-list ion-item-sliding[b-x0fnpcmzd0] {
    margin-bottom: 12px;
}

.realtime-vehicle-list ion-item[b-x0fnpcmzd0] {
    --background: transparent;
    --padding-start: 0;
    --padding-end: 0;
    --inner-padding-start: 0;
    --inner-padding-end: 0;
    --border-radius: 12px;
    --min-height: auto;
}

.realtime-vehicle-list ion-item-option[b-x0fnpcmzd0] {
    --color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
}

    .realtime-vehicle-list ion-item-option ion-icon[b-x0fnpcmzd0] {
        font-size: 24px;
    }

/* Adaptation du container de liste */
.realtime-vehicle-list[b-x0fnpcmzd0] {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Maintenir le style existant des cards */
.realtime-vehicle-card[b-x0fnpcmzd0] {
    width:100%!important;
    border-radius: 12px;
    padding: 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

    .realtime-vehicle-card.selected[b-x0fnpcmzd0] {
        border: 2px solid #2DD36F;
        box-shadow: 0 4px 16px rgba(45, 211, 111, 0.2);
    }

/* Responsive pour les actions de slide */
@media (max-width: 600px) {
    .realtime-vehicle-list ion-item-option[b-x0fnpcmzd0] {
        min-width: 60px;
    }

        .realtime-vehicle-list ion-item-option ion-icon[b-x0fnpcmzd0] {
            font-size: 20px;
        }
}
/* /Pages/Report360.razor.rz.scp.css */
.report-360-page[b-8cs71j9kzh] {
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ion-background-color);
    color: var(--ion-text-color);
}

/* Header */
.header[b-8cs71j9kzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--ion-color-primary);
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title[b-8cs71j9kzh] {
    font-weight: 600;
    font-size: 1.2rem;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.header-icons[b-8cs71j9kzh] {
    display: flex;
    gap: 8px;
}

.header-icon-btn[b-8cs71j9kzh] {
    --background: transparent;
    --color: white;
    --border-radius: 8px;
    width: 40px;
    height: 40px;
    margin: 0;
}

.header-icon-btn:hover[b-8cs71j9kzh] {
    --background: rgba(255, 255, 255, 0.1);
}

.header-icon-btn:disabled[b-8cs71j9kzh] {
    --color: rgba(255, 255, 255, 0.5);
    --background: transparent;
}

/* Content */
.content[b-8cs71j9kzh] {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* Loading Container */
.loading-container[b-8cs71j9kzh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
}

.loading-header[b-8cs71j9kzh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.progress-bar-container[b-8cs71j9kzh] {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-bar[b-8cs71j9kzh] {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-8cs71j9kzh] {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s ease;
}

.progress-text[b-8cs71j9kzh] {
    font-size: 0.9rem;
    color: var(--ion-color-medium);
}

.cancel-btn[b-8cs71j9kzh] {
    --color: var(--ion-color-danger);
    --border-color: var(--ion-color-danger);
}

.loading-message[b-8cs71j9kzh] {
    color: var(--ion-color-medium);
    line-height: 1.5;
}

/* Charts Container */
.charts-container[b-8cs71j9kzh] {
    max-width: 1200px;
    margin: 0 auto;
}

.charts-container h3[b-8cs71j9kzh] {
    text-align: center;
    margin-bottom: 8px;
    color: var(--ion-color-primary);
    font-weight: 600;
}

.charts-container p[b-8cs71j9kzh] {
    text-align: center;
    margin-bottom: 32px;
    color: var(--ion-color-medium);
}

/* Chart Cards */
.chart-card[b-8cs71j9kzh] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--ion-color-light);
}

.chart-card h4[b-8cs71j9kzh] {
    margin: 0 0 16px 0;
    color: var(--ion-color-primary);
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-card canvas[b-8cs71j9kzh] {
    width: 100% !important;
    height: 300px !important;
    max-height: 300px;
}

/* Actions Section */
.actions-section[b-8cs71j9kzh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.export-btn[b-8cs71j9kzh] {
    --background: var(--ion-color-success);
    --color: white;
    --border-radius: 8px;
    height: 48px;
    font-weight: 600;
}

.new-report-btn[b-8cs71j9kzh] {
    --color: var(--ion-color-primary);
    --border-color: var(--ion-color-primary);
    --border-radius: 8px;
    height: 48px;
    font-weight: 600;
}

/* Error Container */
.error-container[b-8cs71j9kzh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
    color: var(--ion-color-danger);
}

.error-container ion-icon[b-8cs71j9kzh] {
    font-size: 4rem;
    margin-bottom: 16px;
}

.error-container h3[b-8cs71j9kzh] {
    margin: 0 0 8px 0;
    font-weight: 600;
}

.error-container p[b-8cs71j9kzh] {
    margin: 0 0 24px 0;
    color: var(--ion-color-medium);
}

/* Empty State */
.empty-state[b-8cs71j9kzh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    text-align: center;
    color: var(--ion-color-medium);
}

.empty-state ion-icon[b-8cs71j9kzh] {
    font-size: 4rem;
    margin-bottom: 16px;
    color: var(--ion-color-light);
}

.empty-state h3[b-8cs71j9kzh] {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--ion-text-color);
}

.empty-state p[b-8cs71j9kzh] {
    margin: 0 0 24px 0;
    max-width: 300px;
    line-height: 1.5;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .chart-card[b-8cs71j9kzh] {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .progress-bar[b-8cs71j9kzh] {
    background-color: #404040;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content[b-8cs71j9kzh] {
        padding: 16px;
    }
    
    .chart-card[b-8cs71j9kzh] {
        padding: 16px;
        margin-bottom: 16px;
    }
    
    .chart-card canvas[b-8cs71j9kzh] {
        height: 250px !important;
    }
    
    .header[b-8cs71j9kzh] {
        padding: 12px 16px;
    }
    
    .page-title[b-8cs71j9kzh] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .chart-card canvas[b-8cs71j9kzh] {
        height: 200px !important;
    }
    
    .chart-card h4[b-8cs71j9kzh] {
        font-size: 1rem;
    }
}
/* /Pages/Support.razor.rz.scp.css */
/* ================================
   SUPPORT PAGE STYLES
   ================================ */

/* Page Layout - Full Height */
ion-page[b-oyh9u02d2o] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

ion-header[b-oyh9u02d2o] {
    background: var(--ion-color-primary);
}

ion-header ion-toolbar[b-oyh9u02d2o] {
    --background: var(--ion-color-primary);
    --color: var(--ion-color-primary-contrast);
}

ion-header ion-title[b-oyh9u02d2o] {
    color: var(--ion-color-primary-contrast);
    font-weight: 600;
}

ion-header ion-button[b-oyh9u02d2o] {
    --color: var(--ion-color-primary-contrast);
}

ion-content[b-oyh9u02d2o] {
    height: 100%;
    flex: 1;
    --background: var(--ion-background-color);
    --color: var(--ion-text-color);
}

/* Ensure content scrollable area takes full height */
ion-content .scroll-content[b-oyh9u02d2o] {
    height: 100%;
    min-height: 100%;
    padding: 0;
}

/* Support container */
.support-container[b-oyh9u02d2o] {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--ion-background-color);
    color: var(--ion-text-color);
    min-height: 100%;
}

.support-header[b-oyh9u02d2o] {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--ion-color-primary) 0%, var(--ion-color-secondary) 100%);
    color: var(--ion-color-primary-contrast);
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--ion-color-step-150);
}

.support-header h1[b-oyh9u02d2o] {
    margin: 0 0 10px 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ion-color-primary-contrast);
}

.support-header p[b-oyh9u02d2o] {
    margin: 0;
    font-size: 1.2rem;
    opacity: 0.9;
    color: var(--ion-color-primary-contrast);
}

.business-hours[b-oyh9u02d2o] {
    background: var(--ion-color-step-50);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid var(--ion-color-step-100);
    box-shadow: 0 4px 15px var(--ion-color-step-150);
}

.business-hours h3[b-oyh9u02d2o] {
    color: var(--ion-color-primary);
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 600;
}

.business-hours p[b-oyh9u02d2o] {
    margin: 8px 0;
    color: var(--ion-text-color);
    line-height: 1.5;
}

.business-hours strong[b-oyh9u02d2o] {
    color: var(--ion-color-primary);
}

.business-hours em[b-oyh9u02d2o] {
    color: var(--ion-color-tertiary);
    font-weight: 600;
}

.support-grid[b-oyh9u02d2o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.support-card[b-oyh9u02d2o] {
    background: var(--ion-color-step-50);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 8px 25px var(--ion-color-step-150);
    border: 1px solid var(--ion-color-step-100);
    overflow: hidden;
    transition: all 0.3s ease;
}

.support-card:hover[b-oyh9u02d2o] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--ion-color-step-200);
}

.support-card-header[b-oyh9u02d2o] {
    padding: 25px 20px 15px;
    text-align: center;
    background: linear-gradient(135deg, var(--ion-color-step-100) 0%, var(--ion-color-step-150) 100%);
}

.support-card-icon[b-oyh9u02d2o] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 32px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.whatsapp-icon[b-oyh9u02d2o] { background: linear-gradient(135deg, #25D366, #128C7E); }
.email-icon[b-oyh9u02d2o] { background: linear-gradient(135deg, #EA4335, #D33B2C); }
.phone-icon[b-oyh9u02d2o] { background: linear-gradient(135deg, #4285F4, #3367D6); }

.support-card h3[b-oyh9u02d2o] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ion-text-color);
}

.support-card-body[b-oyh9u02d2o] {
    padding: 20px;
    text-align: center;
}

.support-card-body p[b-oyh9u02d2o] {
    margin: 8px 0;
    color: var(--ion-color-step-600);
    line-height: 1.5;
}

.support-card-body strong[b-oyh9u02d2o] {
    color: var(--ion-color-primary);
}

.support-card-footer[b-oyh9u02d2o] {
    padding: 20px;
    background: var(--ion-color-step-100);
}

.support-btn[b-oyh9u02d2o] {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
}

.whatsapp-btn[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.whatsapp-btn:hover[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #128C7E, #25D366);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.email-btn[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #EA4335, #D33B2C);
}

.email-btn:hover[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #D33B2C, #EA4335);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(234, 67, 53, 0.3);
}

.phone-btn[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #4285F4, #3367D6);
}

.phone-btn:hover[b-oyh9u02d2o] {
    background: linear-gradient(135deg, #3367D6, #4285F4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
}

.faq-section[b-oyh9u02d2o] {
    background: var(--ion-color-step-50);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--ion-color-step-100);
    box-shadow: 0 8px 25px var(--ion-color-step-150);
}

.faq-section h2[b-oyh9u02d2o] {
    color: var(--ion-color-primary);
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.faq-item[b-oyh9u02d2o] {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--ion-color-step-100);
    border-radius: 12px;
    border: 1px solid var(--ion-color-step-200);
}

.faq-item h4[b-oyh9u02d2o] {
    color: var(--ion-color-primary);
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.faq-item h4 i[b-oyh9u02d2o] {
    color: var(--ion-color-tertiary);
}

.faq-item p[b-oyh9u02d2o] {
    margin: 0;
    color: var(--ion-color-step-600);
    line-height: 1.6;
}

/* Button animations */
.support-container .support-btn[b-oyh9u02d2o] {
    position: relative;
    overflow: hidden;
}

.support-container .support-btn[b-oyh9u02d2o]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.support-container .support-btn:active[b-oyh9u02d2o]::before {
    width: 300px;
    height: 300px;
}

/* Card hover animations */
.support-container .support-card:hover .support-card-icon[b-oyh9u02d2o] {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.support-container .faq-item:hover[b-oyh9u02d2o] {
    background: var(--ion-color-step-150);
    transition: all 0.3s ease;
}

/* Dark theme specific styles */
@media (prefers-color-scheme: dark) {
    .support-card-icon[b-oyh9u02d2o] {
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .support-container[b-oyh9u02d2o] {
        padding: 15px;
    }
    
    .support-header h1[b-oyh9u02d2o] {
        font-size: 2rem;
    }
    
    .support-grid[b-oyh9u02d2o] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .support-card-icon[b-oyh9u02d2o] {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .faq-section[b-oyh9u02d2o] {
        padding: 20px;
    }
    
    .faq-section h2[b-oyh9u02d2o] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .support-header[b-oyh9u02d2o] {
        padding: 20px 15px;
    }
    
    .support-header h1[b-oyh9u02d2o] {
        font-size: 1.7rem;
    }
    
    .support-header p[b-oyh9u02d2o] {
        font-size: 1rem;
    }
    
    .business-hours[b-oyh9u02d2o] {
        padding: 20px;
    }
    
    .faq-item[b-oyh9u02d2o] {
        padding: 15px;
    }
}
/* /Pages/Vidange.razor.rz.scp.css */
/* Conteneurs principaux */
.loading-container[b-40sw2dbaqy], .error-container[b-40sw2dbaqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    gap: 16px;
}

.error-container h3[b-40sw2dbaqy] {
    color: var(--ion-color-danger);
    margin: 8px 0;
}

.error-container p[b-40sw2dbaqy] {
    color: var(--ion-color-medium);
    max-width: 400px;
}

/* Barre de recherche */
.search-container[b-40sw2dbaqy] {
    margin-bottom: 20px;
}

.search-container .search-input[b-40sw2dbaqy] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-container .search-input:focus[b-40sw2dbaqy] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.search-container .search-input[b-40sw2dbaqy]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Filtres d'état */
.filter-container[b-40sw2dbaqy] {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--ion-color-step-50);
    border-radius: 8px;
    border: 1px solid var(--ion-color-step-150);
}

.filter-container h4[b-40sw2dbaqy] {
    margin: 0 0 12px 0;
    color: var(--ion-text-color);
    font-size: 1rem;
    font-weight: 600;
}

.filter-buttons[b-40sw2dbaqy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-button[b-40sw2dbaqy] {
    min-width: 120px;
    height: 32px;
    font-size: 0.9rem;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.filter-button.active[b-40sw2dbaqy] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .filter-buttons[b-40sw2dbaqy] {
        flex-direction: column;
    }
    
    .filter-button[b-40sw2dbaqy] {
        width: 100%;
        min-width: unset;
    }
}

/* Grid container */
.grid-container[b-40sw2dbaqy] {
    background: var(--ion-item-background, var(--ion-background-color));
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--ion-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
    width: 100%;
    max-width: 100vw;
    border: 1px solid var(--ion-color-step-150);
}

/* Styles pour les colonnes du grid */
.vehicle-info[b-40sw2dbaqy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-header[b-40sw2dbaqy] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.vehicle-details[b-40sw2dbaqy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vehicle-name[b-40sw2dbaqy] {
    font-weight: 600;
    color: var(--ion-text-color);
    font-size: 0.95rem;
}

.vehicle-matricule[b-40sw2dbaqy] {
    font-size: 0.8rem;
    color: var(--ion-color-step-600);
    font-style: italic;
}

/* Style pour le bouton d'édition */
.vehicle-header ion-button[b-40sw2dbaqy] {
    --padding-start: 4px;
    --padding-end: 4px;
    --padding-top: 4px;
    --padding-bottom: 4px;
    min-height: 28px;
    width: 28px;
    flex-shrink: 0;
}

.vehicle-header ion-button:hover[b-40sw2dbaqy] {
    --background: rgba(var(--ion-color-primary-rgb), 0.1);
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Styles des lignes selon l'état de maintenance */
[b-40sw2dbaqy] .row-non-configure {
    background-color: var(--ion-color-step-100) !important;
    border-left: 4px solid var(--ion-color-step-600);
}

[b-40sw2dbaqy] .row-non-configure .e-indentcell {
    background-color: var(--ion-color-step-150) !important;
}

[b-40sw2dbaqy] .row-non-configure .e-recordplusexpand {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .row-non-configure .e-grouptopleftcell {
    background-color: var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .row-a-verifier {
    background-color: var(--ion-color-warning-tint) !important;
    border-left: 4px solid var(--ion-color-warning);
}

[b-40sw2dbaqy] .row-a-verifier .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
}

[b-40sw2dbaqy] .row-a-verifier .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .row-a-verifier .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .row-en-regle {
    background-color: var(--ion-color-success-tint) !important;
    border-left: 4px solid var(--ion-color-success);
}

[b-40sw2dbaqy] .row-en-regle .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
}

[b-40sw2dbaqy] .row-en-regle .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .row-en-regle .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.15) !important;
    color: var(--ion-text-color) !important;
}

/* Hover effects pour les lignes */
[b-40sw2dbaqy] .row-non-configure:hover {
    background-color: var(--ion-color-step-150) !important;
}

[b-40sw2dbaqy] .row-non-configure:hover .e-indentcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-40sw2dbaqy] .row-non-configure:hover .e-recordplusexpand {
    background-color: var(--ion-color-step-200) !important;
}

[b-40sw2dbaqy] .row-non-configure:hover .e-grouptopleftcell {
    background-color: var(--ion-color-step-200) !important;
}

[b-40sw2dbaqy] .row-a-verifier:hover {
    background-color: var(--ion-color-warning-shade) !important;
}

[b-40sw2dbaqy] .row-a-verifier:hover .e-indentcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-40sw2dbaqy] .row-a-verifier:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-40sw2dbaqy] .row-a-verifier:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-warning-rgb), 0.25) !important;
}

[b-40sw2dbaqy] .row-en-regle:hover {
    background-color: var(--ion-color-success-shade) !important;
}

[b-40sw2dbaqy] .row-en-regle:hover .e-indentcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-40sw2dbaqy] .row-en-regle:hover .e-recordplusexpand {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

[b-40sw2dbaqy] .row-en-regle:hover .e-grouptopleftcell {
    background-color: rgba(var(--ion-color-success-rgb), 0.25) !important;
}

/* Styles pour la sélection de ligne complète */
[b-40sw2dbaqy] .e-grid .e-row.e-active {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.2)) !important;
    border: 2px solid var(--ion-color-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--ion-color-primary-rgb), 0.3) !important;
    border-radius: 4px !important;
}

[b-40sw2dbaqy] .e-grid .e-row.e-active:hover {
    background-color: var(--ion-color-primary-tint, rgba(var(--ion-color-primary-rgb), 0.3)) !important;
}

[b-40sw2dbaqy] .e-grid .e-row.e-active .e-rowcell {
    border-color: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast, var(--ion-text-color)) !important;
}

/* Style de survol général pour les lignes */
[b-40sw2dbaqy] .e-grid .e-row:hover {
    background-color: var(--ion-color-step-150) !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

/* Améliorer l'apparence des cellules sélectionnées */
[b-40sw2dbaqy] .e-grid .e-row.e-active .vehicle-name {
    color: var(--ion-color-primary-shade, var(--ion-text-color)) !important;
    font-weight: 700 !important;
}

[b-40sw2dbaqy] .e-grid .e-row.e-active .vehicle-matricule {
    color: var(--ion-color-primary, var(--ion-color-medium)) !important;
}

/* Responsive design */
@media (max-width: 1024px) {
    .grid-container[b-40sw2dbaqy] {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .search-container[b-40sw2dbaqy],
    .filter-container[b-40sw2dbaqy] {
        margin: 0 -16px 16px -16px;
        padding: 16px;
        border-radius: 0;
    }
    
    .grid-container[b-40sw2dbaqy] {
        margin: 0 -16px;
        border-radius: 0;
        overflow-x: hidden;
    }
    
    /* Force la grille à rester fixe sur mobile */
    [b-40sw2dbaqy] .e-grid {
        min-width: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    [b-40sw2dbaqy] .e-gridheader,
    [b-40sw2dbaqy] .e-gridcontent {
        overflow-x: hidden !important;
    }
    
    /* Ajuster les colonnes pour mobile */
    [b-40sw2dbaqy] .e-headercell,
    [b-40sw2dbaqy] .e-rowcell {
        min-width: auto !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Personnalisation du Grid Syncfusion */
[b-40sw2dbaqy] .e-grid .e-gridheader {
    background: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast) !important;
}

[b-40sw2dbaqy] .e-grid .e-headercell {
    border-right: 1px solid var(--ion-color-primary-shade) !important;
    font-weight: 600 !important;
    color: var(--ion-color-primary-contrast) !important;
    background: var(--ion-color-primary) !important;
}

[b-40sw2dbaqy] .e-grid .e-content {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
}

[b-40sw2dbaqy] .e-grid .e-rowcell {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    border-right: 1px solid var(--ion-color-step-150) !important;
}

[b-40sw2dbaqy] .e-grid .e-groupdroparea {
    background: var(--ion-color-step-100) !important;
    border: 2px dashed var(--ion-color-step-400) !important;
    border-radius: 8px !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-grid .e-groupheadercell {
    background: var(--ion-color-secondary) !important;
    color: var(--ion-color-secondary-contrast) !important;
    font-weight: 600 !important;
}

[b-40sw2dbaqy] .e-grid .e-groupcaption {
    background: var(--ion-color-step-100) !important;
    color: var(--ion-text-color) !important;
    border-bottom: 1px solid var(--ion-color-step-200) !important;
}

[b-40sw2dbaqy] .e-grid .e-summarycell {
    background: var(--ion-color-step-50) !important;
    color: var(--ion-text-color) !important;
    border-top: 1px solid var(--ion-color-step-200) !important;
}

/* Pagination */
[b-40sw2dbaqy] .e-pager {
    background: var(--ion-color-step-50) !important;
    border-top: 1px solid var(--ion-color-step-200) !important;
    padding: 12px !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-pager .e-numericitem,
[b-40sw2dbaqy] .e-pager .e-navigateitem {
    border-radius: 4px !important;
    margin: 0 2px !important;
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
    border: 1px solid var(--ion-color-step-200) !important;
}

[b-40sw2dbaqy] .e-pager .e-currentitem {
    background: var(--ion-color-primary) !important;
    color: var(--ion-color-primary-contrast) !important;
    border-color: var(--ion-color-primary) !important;
}

[b-40sw2dbaqy] .e-pager .e-numericitem:hover,
[b-40sw2dbaqy] .e-pager .e-navigateitem:hover {
    background: var(--ion-color-step-100) !important;
}

/* Menu de colonne */
[b-40sw2dbaqy] .e-columnmenu .e-menu-item {
    padding: 8px 12px !important;
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-columnmenu .e-menu-item:hover {
    background: var(--ion-color-primary-tint) !important;
}

[b-40sw2dbaqy] .e-columnmenu {
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    border: 1px solid var(--ion-color-step-200) !important;
    box-shadow: var(--ion-box-shadow, 0 4px 16px rgba(0, 0, 0, 0.12)) !important;
}

/* Filtres */
[b-40sw2dbaqy] .e-filterbar input {
    border-radius: 4px !important;
    border: 1px solid var(--ion-color-step-300) !important;
    background: var(--ion-item-background, var(--ion-background-color)) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-filterbar input:focus {
    border-color: var(--ion-color-primary) !important;
    box-shadow: 0 0 0 2px var(--ion-color-primary-tint) !important;
}

[b-40sw2dbaqy] .e-filterbar input::placeholder {
    color: var(--ion-color-step-600) !important;
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
    .vehicle-info[b-40sw2dbaqy] {
        min-width: 150px;
    }
}

/* Amélioration des styles pour mode sombre/clair */
[b-40sw2dbaqy] .e-grid .e-icon-grpexpand,
[b-40sw2dbaqy] .e-grid .e-icon-grpcollapse {
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-grid .e-groupheadercell .e-headertext {
    color: var(--ion-color-secondary-contrast) !important;
}

[b-40sw2dbaqy] .e-grid .e-recordplusexpand,
[b-40sw2dbaqy] .e-grid .e-recordpluscollapse {
    color: var(--ion-color-primary) !important;
}

[b-40sw2dbaqy] .e-grid .e-selectionbackground {
    background: var(--ion-color-primary-tint) !important;
}

/* Cellules d'indentation pour les groupes */
[b-40sw2dbaqy] .e-grid .e-indentcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
}

/* Effet hover pour les cellules d'indentation */
[b-40sw2dbaqy] .e-grid .e-row:hover .e-indentcell {
    background: var(--ion-color-step-150) !important;
}

/* Cellules d'expansion pour les groupes */
[b-40sw2dbaqy] .e-grid .e-recordplusexpand {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-grid .e-row:hover .e-recordplusexpand {
    background: var(--ion-color-step-150) !important;
}

/* Cellule supérieure gauche des groupes */
[b-40sw2dbaqy] .e-grid .e-grouptopleftcell {
    background: var(--ion-color-step-100) !important;
    border-right: 1px solid var(--ion-color-step-200) !important;
    border-bottom: 1px solid var(--ion-color-step-150) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-grid .e-row:hover .e-grouptopleftcell {
    background: var(--ion-color-step-150) !important;
}

/* Style spécifique pour les lignes groupées avec indentation */
[b-40sw2dbaqy] .e-grid .e-row.e-summaryrow .e-indentcell {
    background: var(--ion-color-step-50) !important;
}

[b-40sw2dbaqy] .e-grid .e-row.e-summaryrow .e-recordplusexpand {
    background: var(--ion-color-step-50) !important;
    color: var(--ion-text-color) !important;
}

[b-40sw2dbaqy] .e-grid .e-row.e-summaryrow .e-grouptopleftcell {
    background: var(--ion-color-step-50) !important;
    color: var(--ion-text-color) !important;
}

/* Amélioration des animations */
[b-40sw2dbaqy] .e-grid .e-row {
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

[b-40sw2dbaqy] .e-grid .e-rowcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-40sw2dbaqy] .e-grid .e-indentcell {
    transition: background-color 0.2s ease !important;
}

[b-40sw2dbaqy] .e-grid .e-recordplusexpand {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

[b-40sw2dbaqy] .e-grid .e-grouptopleftcell {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Modal de vidange */
.vidange-modal[b-40sw2dbaqy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--ion-backdrop-color-rgb, 0, 0, 0), var(--ion-backdrop-opacity, 0.32));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vidange-modal.modal-closed[b-40sw2dbaqy] {
    opacity: 0;
    visibility: hidden;
}

.vidange-modal.modal-open[b-40sw2dbaqy] {
    opacity: 1;
    visibility: visible;
}

.modal-content[b-40sw2dbaqy] {
    background: var(--ion-background-color);
    color: var(--ion-text-color);
    border-radius: 12px;
    box-shadow: var(--ion-box-shadow, 0 10px 30px rgba(0, 0, 0, 0.3));
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-40sw2dbaqy 0.3s ease-out;
}

@keyframes slideIn-b-40sw2dbaqy {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header du modal */
.modal-header[b-40sw2dbaqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--ion-color-step-150);
    background: var(--ion-color-primary);
    color: var(--ion-color-primary-contrast);
    border-radius: 12px 12px 0 0;
}

.modal-title[b-40sw2dbaqy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.modal-title ion-icon[b-40sw2dbaqy] {
    font-size: 1.5rem;
}

.modal-header ion-button[b-40sw2dbaqy] {
    --color: var(--ion-color-primary-contrast);
    --background: transparent;
}

.modal-header ion-button:hover[b-40sw2dbaqy] {
    --background: rgba(var(--ion-color-primary-contrast-rgb), 0.1);
}

/* Section info véhicule */
.vehicle-info-section[b-40sw2dbaqy] {
    padding: 1.5rem;
    background: var(--ion-color-step-50);
    border-bottom: 1px solid var(--ion-color-step-150);
}

.vehicle-info-section h4[b-40sw2dbaqy] {
    margin: 0 0 0.5rem 0;
    color: var(--ion-color-primary);
    font-weight: 600;
    font-size: 1.3rem;
}

.vehicle-info-section p[b-40sw2dbaqy] {
    margin: 0.25rem 0;
    color: var(--ion-color-step-600);
    font-size: 0.95rem;
}

/* Section formulaire */
.form-section[b-40sw2dbaqy] {
    padding: 1.5rem;
    background: var(--ion-background-color);
}

.form-group[b-40sw2dbaqy] {
    margin-bottom: 1.5rem;
}

.form-group label[b-40sw2dbaqy] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ion-text-color);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Styles pour les inputs HTML standard */
.form-group .form-control[b-40sw2dbaqy] {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--ion-color-step-300);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--ion-item-background, var(--ion-background-color));
    color: var(--ion-text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group .form-control:focus[b-40sw2dbaqy] {
    outline: none;
    border-color: var(--ion-color-primary);
    box-shadow: 0 0 0 3px var(--ion-color-primary-tint);
}

.form-group .form-control[b-40sw2dbaqy]::placeholder {
    color: var(--ion-color-step-600);
    opacity: 0.7;
}

/* Message d'erreur du modal */
.error-message[b-40sw2dbaqy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--ion-color-danger-tint);
    border: 1px solid var(--ion-color-danger);
    border-radius: 8px;
    color: var(--ion-color-danger);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.error-message ion-icon[b-40sw2dbaqy] {
    font-size: 1.2rem;
    color: var(--ion-color-danger);
}

/* Actions du modal */
.modal-actions[b-40sw2dbaqy] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--ion-color-step-50);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--ion-color-step-150);
}

.modal-actions ion-button[b-40sw2dbaqy] {
    min-width: 120px;
    height: 44px;
    font-weight: 500;
}

.modal-actions ion-button[fill="outline"][b-40sw2dbaqy] {
    --border-color: var(--ion-color-step-600);
    --color: var(--ion-color-step-600);
}

.modal-actions ion-button[fill="solid"][b-40sw2dbaqy] {
    --background: var(--ion-color-primary);
    --color: var(--ion-color-primary-contrast);
}

.modal-actions ion-button[disabled][b-40sw2dbaqy] {
    --opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive pour le modal */
@media (max-width: 768px) {
    .modal-content[b-40sw2dbaqy] {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-actions[b-40sw2dbaqy] {
        flex-direction: column;
    }
    
    .modal-actions ion-button[b-40sw2dbaqy] {
        width: 100%;
    }
}
/* /Pages/WhatsAppDirect.razor.rz.scp.css */
/* WhatsApp Direct page styles */

.whatsapp-direct-container[b-e0vemf3umn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.whatsapp-card[b-e0vemf3umn] {
    background: white;
    border-radius: 30px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
    animation: slideUp-b-e0vemf3umn 0.8s ease-out;
}

@keyframes slideUp-b-e0vemf3umn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.whatsapp-icon-large[b-e0vemf3umn] {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
    animation: pulse-b-e0vemf3umn 2s infinite;
}

@keyframes pulse-b-e0vemf3umn {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
    }
}

.whatsapp-icon-large i[b-e0vemf3umn] {
    font-size: 60px;
    color: white;
}

.whatsapp-card h1[b-e0vemf3umn] {
    color: #333;
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.whatsapp-card p[b-e0vemf3umn] {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}

.whatsapp-btn-large[b-e0vemf3umn] {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-width: 200px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.whatsapp-btn-large[b-e0vemf3umn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.whatsapp-btn-large:hover[b-e0vemf3umn]::before {
    left: 100%;
}

.whatsapp-btn-large:hover[b-e0vemf3umn] {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}

.whatsapp-btn-large i[b-e0vemf3umn] {
    margin-right: 12px;
    font-size: 24px;
}

.phone-display[b-e0vemf3umn] {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 20px;
    margin: 30px 0;
    border: 2px solid #e9ecef;
}

.phone-display h3[b-e0vemf3umn] {
    color: #25D366;
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.phone-display p[b-e0vemf3umn] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.back-btn[b-e0vemf3umn] {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-btn:hover[b-e0vemf3umn] {
    background: #5a6268;
    transform: translateY(-2px);
}

.features-list[b-e0vemf3umn] {
    text-align: left;
    margin: 30px 0;
    background: #f8f9fa;
    border-radius: 15px;
    padding: 25px;
}

.features-list h3[b-e0vemf3umn] {
    text-align: center;
    color: #25D366;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.features-list ul[b-e0vemf3umn] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li[b-e0vemf3umn] {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #333;
}

.features-list li[b-e0vemf3umn]::before {
    content: "✓";
    background: #25D366;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .whatsapp-card[b-e0vemf3umn] {
        padding: 30px 25px;
        border-radius: 20px;
    }

    .whatsapp-card h1[b-e0vemf3umn] {
        font-size: 1.8rem;
    }

    .whatsapp-icon-large[b-e0vemf3umn] {
        width: 100px;
        height: 100px;
    }

    .whatsapp-icon-large i[b-e0vemf3umn] {
        font-size: 50px;
    }
}