/* ===============================
   RESPONSIVE.CSS - MEDIA QUERIES OPTIMISÉES
   =============================== */

/* Media Queries pour mobile - OPTIMISÉ POUR AFFICHAGE COMPLET */
@media (max-width: 480px) {
    .content { 
        padding: 12px 10px calc(130px + env(safe-area-inset-bottom)); 
    }
    
    .dashboard-grid { 
        gap: 6px; 
    }
    
    .fab { 
        width: 56px !important; 
        height: 56px !important; 
        right: 16px !important; 
        bottom: calc(120px + env(safe-area-inset-bottom)) !important; 
        font-size: 1.6rem; 
    }
    
    .nav { 
        padding: 8px 0 max(30px, env(safe-area-inset-bottom)); 
    }
    
    .nav-tabs { 
        padding: 0 10px; 
    }
    
    .nav-tab { 
        max-width: 70px; 
        padding: 6px 4px; 
    }
    
    .nav-text { 
        font-size: 0.55rem; 
    }
    
    .nav-icon { 
        width: 24px; 
        height: 24px; 
    }
    
    .nav-icon svg { 
        width: 20px; 
        height: 20px; 
    }

    /* VUE D'ENSEMBLE MOBILE - COMPACTE POUR ÉVITER LE SCROLL */
    .overview-master-card {
        padding: 16px;
        border-radius: 20px;
        margin-bottom: 12px;
    }

    .overview-header-redesigned {
        gap: 12px;
        margin-bottom: 32px;
    }

    .overview-icon-wrapper {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .overview-icon {
        width: 26px;
        height: 26px;
    }

    .overview-main-title {
        font-size: 1.4rem;
    }

    .overview-subtitle-text {
        font-size: 0.85rem;
    }

    /* Métriques principales - PLUS COMPACTES */
    .main-metrics {
        gap: 12px;
        margin-bottom: 16px;
    }

    .metric-row {
        padding: 14px;
        border-radius: 16px;
    }

    .metric-content {
        gap: 12px;
    }

    .metric-icon-large {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .metric-icon-large svg {
        width: 20px;
        height: 20px;
    }

    .metric-value-large {
        font-size: 1.6rem;
    }

    .metric-label-large {
        font-size: 0.75rem;
        margin-bottom: 6px;
    }

    .metric-extra {
        margin-top: 8px;
    }

    /* Badge ROI compact */
    .roi-badge-new {
        padding: 4px 8px;
        font-size: 0.65rem;
        gap: 4px;
    }

    /* Statistiques secondaires - PLUS COMPACTES */
    .secondary-stats-redesigned {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

    .stat-item-fluid {
        padding: 12px;
        border-radius: 14px;
        gap: 10px;
    }

    .stat-icon-circle {
        width: 32px;
        height: 32px;
    }

    .stat-icon-circle svg {
        width: 16px;
        height: 16px;
    }

    .stat-value-fluid {
        font-size: 1rem;
    }

    .stat-label-fluid {
        font-size: 0.65rem;
    }

    /* Section graphique - RÉDUITE POUR ÉVITER LE SCROLL */
    .chart-section-redesigned {
        padding-top: 16px;
    }

    .chart-header-redesigned {
        margin-bottom: 12px;
    }

    .chart-title-wrapper {
        gap: 8px;
    }

    .chart-title-icon {
        width: 22px;
        height: 22px;
    }

    .chart-title {
        font-size: 0.95rem;
    }

    /* Légère augmentation pour le confort visuel tout en restant sans scroll */
    .chart-container-redesigned {
        height: 100px; /* +10px pour aération */
        padding: 10px;
        border-radius: 12px;
    }

    /* SECTION ACTIVITÉ RÉCENTE - TRÈS COMPACTE */
    .recent-activity-section {
        padding: 14px;
        border-radius: 16px;
        margin-top: 12px;
    }

    .recent-activity-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .recent-activity-icon-wrapper {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .recent-activity-icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .recent-activity-title {
        font-size: 1rem;
    }

    .recent-activity-subtitle {
        font-size: 0.75rem;
    }

    /* Optimisation des cartes KPI sur mobile */
    .stat-card {
        padding: 10px 6px;
    }
    
    .stat-value {
        font-size: 1.4rem !important;
        line-height: 1.1;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
        margin-bottom: 4px;
        word-break: keep-all;
        hyphens: none;
    }
    
    .stat-label {
        font-size: 0.7rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Optimisation spécifique pour "Retour sur investissement" sur mobile */
    .stat-label[data-i18n="home.totalROI"],
    .stat-label[data-i18n="stats.globalROI"] {
        font-size: 0.6rem;
        line-height: 1;
        padding: 0 2px;
    }

    /* Optimisation des cartes dashboard sur mobile */
    .dashboard-card {
        padding: 10px 6px;
    }
    
    .dashboard-value {
        font-size: 1.1rem !important;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        margin-bottom: 3px;
    }
    
    .dashboard-label {
        font-size: 0.6rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Optimisation des indicateurs ROI sur mobile */
    .roi-indicator {
        font-size: 0.65rem;
        padding: 2px 6px;
        margin-top: 4px;
    }
    
    .roi-indicator .icon-sm {
        width: 12px;
        height: 12px;
    }

    /* Barre de recherche responsive */
    .search-bar {
        padding: 10px;
        border-radius: 14px;
        margin-bottom: 10px;
    }
    
    .search-input {
        padding: 10px 75px 10px 36px;
        font-size: 0.85rem;
        border-radius: 10px;
        width: 100%;
    }
    
    .search-icon {
        left: 10px;
        width: 16px;
        height: 16px;
    }
    
    .validate-search-btn {
        right: 40px;
        width: 26px;
        height: 26px;
    }
    
    .validate-search-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .clear-search-btn {
        right: 8px;
        width: 26px;
        height: 26px;
    }
    
    .clear-search-btn svg {
        width: 12px;
        height: 12px;
    }
    
    /* Résumé de recherche responsive */
    .search-summary {
        padding: 1px 4px !important;
        margin-bottom: 8px;
    }
    
    /* Force le padding du search-summary sur mobile */
    #searchSummary.search-summary {
        padding: 1px 4px !important;
    }
    
    /* Règle encore plus spécifique */
    .page#history .enhanced-card .search-summary {
        padding: 1px 4px !important;
    }
    
    /* Règle avec spécificité maximale */
    body .page#history .enhanced-card .search-summary#searchSummary {
        padding: 1px 4px !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Force tous les éléments du summary */
    .search-summary * {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .search-summary .summary-content {
        padding: 1px 4px !important;
    }
    
    .summary-content {
        gap: 8px;
        font-size: 0.7rem;
    }
    
    .summary-content span {
        padding: 2px 4px;
    }
    
    .net-balance {
        font-size: 0.75rem !important;
    }

    /* Cards d'historique responsive */
    .simple-history-card {
        padding: 6px;
        margin-bottom: 4px;
        border-radius: 10px;
    }
    
    .transaction-header {
        flex-direction: row;
        align-items: center;
    }
    
    .transaction-info {
        gap: 6px;
    }
    
    .transaction-type-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }
    
    .prop-firm-name {
        font-size: 0.85rem;
        margin-bottom: 1px;
    }
    
    .transaction-meta {
        flex-wrap: wrap;
        gap: 3px;
        font-size: 0.65rem;
    }
    
    .transaction-amount-simple {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
    }

    /* Pagination responsive */
    .pagination-container {
        gap: 8px;
        margin-top: 10px;
        padding: 8px;
        flex-wrap: wrap;
    }
    
    .pagination-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
        border-radius: 8px;
    }
    
    .pagination-info {
        padding: 4px 8px;
        font-size: 0.7rem;
        border-radius: 6px;
        order: 3;
        width: 100%;
        text-align: center;
    }

    .modal { 
        padding: 8px !important; 
    }
    
    /* Filtres temporels responsive */
    .chart-filters {
        gap: 6px;
        margin-bottom: 16px;
    }
    
    .filter-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    /* Cards responsive */
    .card {
        padding: 12px !important;
        margin-bottom: 8px !important;
    }
    
    .modal-content { 
        max-width: none !important; 
        width: calc(100% - 16px) !important; 
        max-height: 90vh !important; 
        padding: 14px !important; 
    }
    
    .modal-title { 
        font-size: 1rem !important; 
    }
    
    .close-btn { 
        width: 28px !important; 
        height: 28px !important; 
        font-size: 0.9rem !important; 
    }

    .quick-type-selector { 
        display: grid !important; 
        grid-template-columns: 1fr 1fr !important; 
        gap: 6px !important; 
    }
    
    .quick-type-btn { 
        padding: 12px 6px !important; 
        font-size: 0.8rem !important; 
        min-height: 50px !important; 
    }
    
    .quick-form-row { 
        display: flex !important; 
        gap: 6px !important; 
        flex-wrap: wrap !important; 
    }
    
    .quick-form-group { 
        flex: 1 !important; 
        min-width: calc(50% - 3px) !important; 
    }
    
    .quick-form-input { 
        padding: 10px !important; 
        font-size: 0.85rem !important; 
        border-radius: 6px !important; 
    }
    
    .submit-btn { 
        padding: 10px !important; 
        font-size: 0.85rem !important; 
        margin-top: 6px !important; 
    }

    .quick-form-group:has(#quickPropFirm), 
    .quick-form-group:has(#editPropFirm), 
    .quick-form-group:has(#quickExpenseType), 
    .quick-form-group:has(#editExpenseType) { 
        min-width: 100% !important; 
    }
}

/* Media queries pour très petits écrans - ULTRA COMPACT */
@media (max-width: 360px) { 
    .nav-text { 
        font-size: 0.5rem; 
    } 
    
    .nav-tab { 
        max-width: 55px; 
        padding: 4px 2px; 
    }

    /* VUE D'ENSEMBLE - TRÈS PETITS ÉCRANS - ULTRA COMPACT */
    .overview-master-card {
        padding: 12px;
        border-radius: 16px;
    }

    .overview-header-redesigned {
        gap: 8px;
        margin-bottom: 12px;
    }

    .overview-icon-wrapper {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .overview-icon {
        width: 22px;
        height: 22px;
    }

    .overview-main-title {
        font-size: 1.2rem;
    }

    .overview-subtitle-text {
        font-size: 0.85rem;
    }

    /* Métriques principales - ULTRA COMPACTES */
    .main-metrics {
        gap: 8px;
        margin-bottom: 12px;
    }

    .metric-row {
        padding: 10px;
        border-radius: 12px;
    }

    .metric-content {
        gap: 8px;
    }

    .metric-icon-large {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .metric-icon-large svg {
        width: 18px;
        height: 18px;
    }

    .metric-value-large {
        font-size: 1.4rem;
    }

    .metric-label-large {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .metric-extra {
        margin-top: 6px;
    }

    /* Badge ROI ultra compact */
    .roi-badge-new {
        padding: 3px 6px;
        font-size: 0.6rem;
        gap: 3px;
    }

    /* Statistiques secondaires - ULTRA COMPACTES */
    .secondary-stats-redesigned {
        gap: 8px;
        margin-bottom: 12px;
    }

    .stat-item-fluid {
        padding: 8px;
        border-radius: 10px;
        gap: 8px;
    }

    .stat-icon-circle {
        width: 28px;
        height: 28px;
    }

    .stat-icon-circle svg {
        width: 14px;
        height: 14px;
    }

    .stat-value-fluid {
        font-size: 0.9rem;
    }

    .stat-label-fluid {
        font-size: 0.6rem;
    }

    /* Section graphique - ULTRA COMPACTE */
    .chart-section-redesigned {
        padding-top: 12px;
    }

    .chart-header-redesigned {
        margin-bottom: 8px;
    }

    .chart-title-wrapper {
        gap: 6px;
    }

    .chart-title-icon {
        width: 20px;
        height: 20px;
    }

    .chart-title {
        font-size: 0.85rem;
    }

    .chart-container-redesigned {
        height: 90px; /* ULTRA RÉDUIT POUR ÉVITER TOUT SCROLL */
        padding: 6px;
        border-radius: 10px;
    }

    /* SECTION ACTIVITÉ RÉCENTE - ULTRA COMPACTE */
    .recent-activity-section {
        padding: 10px;
        border-radius: 12px;
        margin-top: 8px;
    }

    .recent-activity-header {
        gap: 8px;
        margin-bottom: 8px;
    }

    .recent-activity-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .recent-activity-icon-wrapper svg {
        width: 18px;
        height: 18px;
    }

    .recent-activity-title {
        font-size: 0.9rem;
    }

    .recent-activity-subtitle {
        font-size: 0.7rem;
    }

    /* Barre de recherche très petits écrans */
    .search-input {
        padding: 8px 65px 8px 32px;
        font-size: 0.8rem;
    }
    
    .search-icon {
        left: 8px;
        width: 14px;
        height: 14px;
    }
    
    .validate-search-btn {
        right: 34px;
        width: 24px;
        height: 24px;
    }
    
    .validate-search-btn svg {
        width: 10px;
        height: 10px;
    }
    
    .clear-search-btn {
        right: 6px;
        width: 24px;
        height: 24px;
    }

    /* Cards très petits écrans */
    .simple-history-card {
        padding: 4px;
        margin-bottom: 2px;
    }
    
    .transaction-type-icon {
        width: 24px;
        height: 24px;
    }
    
    .prop-firm-name {
        font-size: 0.8rem;
    }
    
    .transaction-meta {
        font-size: 0.6rem;
        gap: 2px;
    }
    
    .transaction-amount-simple {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    /* Résumé très compact */
    .summary-content {
        gap: 6px;
        padding: 6px 0;
    }
    
    .summary-item {
        padding: 6px;
    }
    
    .summary-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }
    
    .summary-value {
        font-size: 0.9rem;
    }
    
    .net-balance {
        font-size: 0.9rem !important;
    }

    .quick-stats {
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .quick-stat-item {
        padding: 8px;
        border-radius: 10px;
    }
    
    .quick-stat-value {
        font-size: 1rem;
        margin-bottom: 2px;
    }
    
    .quick-stat-label {
        font-size: 0.65rem;
    }
    
    /* KPI Cards responsive */
    .kpi-row {
        gap: 8px;
    }
    
    .kpi-card {
        min-height: 80px;
        padding: 12px !important;
    }
    
    .kpi-value {
        font-size: 1.4rem;
    }
    
    .kpi-label {
        font-size: 0.7rem;
    }
    
    .kpi-icon {
        width: 28px;
        height: 28px;
    }
    
    .kpi-icon svg {
        width: 14px;
        height: 14px;
    }
    
    /* Salaire moyen responsive */
    .salary-display {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 8px 0;
    }
    
    .salary-value {
        font-size: 1.2rem;
    }
    
    .salary-info {
        text-align: center;
    }
    
    .salary-period {
        font-size: 0.7rem;
        margin-bottom: 1px;
    }
    
    .salary-trend {
        font-size: 0.75rem;
        color: #667eea;
    }
}

/* Media queries pour tablettes */
@media (min-width: 481px) and (max-width: 768px) {
    .overview-master-card {
        padding: 28px;
        border-radius: 24px;
    }

    .overview-header-redesigned {
        gap: 18px;
        margin-bottom: 24px;
    }

    .overview-icon-wrapper {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .overview-icon {
        width: 30px;
        height: 30px;
    }

    .overview-main-title {
        font-size: 1.7rem;
    }

    .main-metrics {
        gap: 18px;
        margin-bottom: 20px;
    }

    .metric-row {
        padding: 20px;
        border-radius: 18px;
    }

    .metric-content {
        gap: 18px;
    }

    .metric-icon-large {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .metric-icon-large svg {
        width: 25px;
        height: 25px;
    }

    .metric-value-large {
        font-size: 2rem;
    }

    .secondary-stats-redesigned {
        gap: 14px;
        margin-bottom: 20px;
    }

    .stat-item-fluid {
        padding: 18px;
        border-radius: 16px;
        gap: 14px;
    }

    .stat-icon-circle {
        width: 38px;
        height: 38px;
    }

    .stat-icon-circle svg {
        width: 19px;
        height: 19px;
    }

    .stat-value-fluid {
        font-size: 1.2rem;
    }

    .chart-container-redesigned {
        height: 150px;
        padding: 16px;
        border-radius: 16px;
    }

    .recent-activity-section {
        padding: 20px;
        border-radius: 18px;
        margin-top: 16px;
    }
}

/* Super compact Accueil pour inclure le graphique sans scroll */
@media (max-width: 480px) {
    .overview-header-redesigned {
        margin-bottom: 8px;
        gap: 8px;
    }

    .overview-main-title.card-title {
        font-size: 1rem;
    }

    .overview-subtitle-text.card-subtitle {
        font-size: 0.85rem;
    }

    .main-metrics {
        gap: 8px;
        margin-bottom: 10px;
    }

    .metric-row {
        padding: 10px;
        border-radius: 12px;
    }

    .metric-content {
        gap: 8px;
    }

    .metric-icon-large {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .metric-icon-large svg {
        width: 16px;
        height: 16px;
    }

    .metric-value-large {
        font-size: 1.3rem;
    }

    .metric-label-large {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    /* Repasser les stats secondaires en ligne pour réduire la hauteur */
    .secondary-stats-redesigned {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 10px;
    }

    .stat-item-fluid {
        padding: 10px;
        border-radius: 12px;
        gap: 8px;
    }

    .stat-icon-circle {
        width: 28px;
        height: 28px;
    }

    .stat-icon-circle svg {
        width: 14px;
        height: 14px;
    }

    .stat-value-fluid { font-size: 0.95rem; }
    .stat-label-fluid { font-size: 0.6rem; }

    /* Masquer l’en-tête du graphique pour gagner de la hauteur */
    .chart-section-redesigned .card-header { display: none; }

    /* Réduire l’espace au-dessus du graphique */
    .chart-section-redesigned { padding-top: 8px; }

    /* Réduire l’espace de la section activité récente */
    .recent-activity-section {
        padding: 12px;
        margin-top: 10px;
        border-radius: 14px;
    }
}