/**
 * 📱 DASHBOARD RESPONSIVE STYLES - ULTRA OTIMIZADO
 * 
 * CSS otimizado para máxima responsividade e performance
 * Integrado com o Responsive Manager para adaptação inteligente
 * 
 * 🎯 RECURSOS:
 * - Layout fluido e adaptável
 * - Otimizações por dispositivo
 * - Performance otimizada
 * - Acessibilidade melhorada
 * 
 * @version 2.0.0 - Ultra Responsive
 */

/* ========================================================================
   OTIMIZAÇÕES GERAIS DE PERFORMANCE
   ======================================================================== */

/* Otimização de rendering para dispositivos lentos */
.perf-slow * {
    will-change: auto !important;
    transform: translateZ(0); /* Force hardware acceleration apenas quando necessário */
}

.perf-slow .kpi-card,
.perf-slow .chart-container {
    transition: none !important;
    animation: none !important;
}

/* Otimizações para dispositivos médios */
.perf-medium .kpi-card:hover,
.perf-medium .chart-container:hover {
    transition: transform 0.2s ease !important;
}

/* Otimizações para dispositivos rápidos */
.perf-fast .kpi-card,
.perf-fast .chart-container {
    transition: all 0.3s ease !important;
}

/* ========================================================================
   LAYOUT RESPONSIVO POR DISPOSITIVO
   ======================================================================== */

/* MOBILE FIRST - BASE STYLES */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

.dashboard-header {
    flex-direction: column;
    text-align: center;
    padding: 12px;
    gap: 12px;
}

.kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
}

.kpi-card {
    flex-direction: column;
    text-align: center;
    padding: 16px;
    min-height: auto;
}

.kpi-icon {
    margin-right: 0;
    margin-bottom: 12px;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
}

.kpi-value {
    font-size: 1.8rem;
}

/* ========================================================================
   BREAKPOINT ESPECÍFICOS - MOBILE (xs, sm)
   ======================================================================== */

.bp-xs .container,
.bp-sm .container {
    padding: 6px;
}

.bp-xs .dashboard-header,
.bp-sm .dashboard-header {
    padding: 8px;
}

.bp-xs .kpi-card,
.bp-sm .kpi-card {
    padding: 12px;
}

.bp-xs .kpi-value,
.bp-sm .kpi-value {
    font-size: 1.6rem;
}

.bp-xs .header-info h1,
.bp-sm .header-info h1 {
    font-size: 1.2rem;
}

/* ========================================================================
   BREAKPOINT ESPECÍFICOS - TABLET (md, lg)
   ======================================================================== */

.bp-md .container {
    max-width: 768px;
    margin: 0 auto;
    padding: 15px;
}

.bp-md .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.bp-md .kpi-card {
    flex-direction: row;
    text-align: left;
    padding: 18px;
}

.bp-md .kpi-icon {
    margin-right: 15px;
    margin-bottom: 0;
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
}

.bp-lg .container {
    max-width: 992px;
    padding: 18px;
}

.bp-lg .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ========================================================================
   BREAKPOINT ESPECÍFICOS - DESKTOP (xl, xxl)
   ======================================================================== */

.bp-xl .container,
.bp-xxl .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--sw-surface) ;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bp-xl .dashboard-header,
.bp-xxl .dashboard-header {
    flex-direction: row;
    text-align: left;
    padding: 20px;
}

.bp-xl .kpi-grid,
.bp-xxl .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.bp-xl .kpi-card,
.bp-xxl .kpi-card {
    flex-direction: row;
    text-align: left;
    padding: 20px;
}

.bp-xl .kpi-icon,
.bp-xxl .kpi-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-right: 20px;
    margin-bottom: 0;
}

.bp-xl .kpi-value,
.bp-xxl .kpi-value {
    font-size: 2rem;
}

/* ========================================================================
   OTIMIZAÇÕES POR TIPO DE DISPOSITIVO
   ======================================================================== */

/* MOBILE - Otimizações específicas */
.device-mobile .chart-container {
    padding: 12px;
}

.device-mobile .chart-container canvas {
    max-height: 200px !important;
}

.device-mobile .data-table {
    font-size: 0.85rem;
}

.device-mobile .dollar-card {
    padding: 15px;
}

.device-mobile .dollar-rate {
    font-size: 1.8rem;
}

.device-mobile .dollar-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* TABLET - Otimizações específicas */
.device-tablet .chart-container canvas {
    max-height: 280px !important;
}

.device-tablet .charts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* DESKTOP - Otimizações específicas */
.device-desktop .charts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.device-desktop .data-tables {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* ========================================================================
   TABELAS RESPONSIVAS - SISTEMA DE CARDS MOBILE
   ======================================================================== */

.device-mobile .data-table {
    display: block;
    overflow-x: visible;
}

.device-mobile .data-table thead {
    display: none;
}

.device-mobile .data-table tbody {
    display: block;
}

.device-mobile .data-table tr {
    display: block;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid var(--sw-border) ;
    border-radius: 8px;
    background: var(--sw-surface) ;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.device-mobile .data-table td {
    display: block;
    text-align: left !important;
    padding: 8px 0;
    border: none;
    position: relative;
    padding-left: 40%;
}

.device-mobile .data-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: 0;
    top: 8px;
    font-weight: bold;
    color: var(--dashboard-dark, var(--sw-text-1));
    width: 35%;
}

/* ========================================================================
   OTIMIZAÇÕES PARA TOUCH DEVICES
   ======================================================================== */

.touch-device .btn-refresh,
.touch-device .action-button {
    min-height: 44px; /* Touch target mínimo */
    min-width: 44px;
    padding: 12px 16px;
}

.touch-device .kpi-card {
    cursor: default; /* Remover cursor pointer em touch */
}

.touch-device .dropdown-content a {
    padding: 15px 20px; /* Área de toque maior */
}

/* ========================================================================
   ANIMAÇÕES REDUZIDAS
   ======================================================================== */

.reduced-animations *,
.reduced-animations *:before,
.reduced-animations *:after {
    animation-duration: 0.1s !important;
    animation-delay: 0s !important;
    transition-duration: 0.1s !important;
    transition-delay: 0s !important;
}

.reduced-animations .fade-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================================================
   MODO PERFORMANCE
   ======================================================================== */

.performance-mode .kpi-card:hover,
.performance-mode .chart-container:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.performance-mode .loading-spinner {
    animation: none !important;
}

.performance-mode .loading-spinner i {
    animation: spin 2s linear infinite !important;
}

/* ========================================================================
   LAZY LOADING
   ======================================================================== */

.chart-container:not(.load-chart) canvas {
    opacity: 0;
    transform: translateY(20px);
}

.chart-container.load-chart canvas {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

/* ========================================================================
   OTIMIZAÇÕES ESPECÍFICAS PARA ORIENTAÇÃO
   ======================================================================== */

@media (orientation: landscape) {
    .device-mobile .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .device-mobile.bp-sm .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (orientation: portrait) {
    .device-tablet .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================================================
   DARK MODE SUPPORT (PREPARAÇÃO)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
    .container {
        background-color: var(--sw-text-1);
        color: #ecf0f1;
    }
    
    .kpi-card,
    .dashboard-header,
    .chart-container,
    .table-container {
        background-color: var(--sw-text-2);
        color: #ecf0f1;
    }
}

/* ========================================================================
   REDUCED MOTION SUPPORT
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================================================
   HIGH CONTRAST SUPPORT
   ======================================================================== */

@media (prefers-contrast: high) {
    .kpi-card,
    .dashboard-header,
    .chart-container {
        border: 2px solid #000;
    }
    
    .btn-refresh {
        border: 2px solid #000;
    }
}

/* ========================================================================
   PRINT OPTIMIZATIONS
   ======================================================================== */

@media print {
    .dashboard-header .header-actions,
    .btn-refresh {
        display: none !important;
    }
    
    .container {
        box-shadow: none !important;
        background: var(--sw-surface) !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        page-break-inside: avoid;
    }
    
    .chart-container {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ========================================================================
   UTILITIES RESPONSIVAS
   ======================================================================== */

/* Visibilidade por dispositivo */
.show-mobile { display: none; }
.show-tablet { display: none; }
.show-desktop { display: none; }

.device-mobile .show-mobile { display: block; }
.device-tablet .show-tablet { display: block; }
.device-desktop .show-desktop { display: block; }

/* Visibilidade por breakpoint */
.bp-xs .show-xs,
.bp-sm .show-sm,
.bp-md .show-md,
.bp-lg .show-lg,
.bp-xl .show-xl,
.bp-xxl .show-xxl { display: block; }

/* Esconder por breakpoint */
.bp-xs .hide-xs,
.bp-sm .hide-sm,
.bp-md .hide-md,
.bp-lg .hide-lg,
.bp-xl .hide-xl,
.bp-xxl .hide-xxl { display: none; }