/**
 * ========================================
 * RESPONSIVE-PREMIUM.CSS - Responsividade Mobile-First
 * ========================================
 * 
 * Media Queries e Otimizações Responsivas:
 * - Mobile First (480px - Extra Small)
 * - Tablet Portrait (481px - 768px)
 * - Tablet Landscape (769px - 1024px)
 * - Desktop (1025px+)
 * - Orientação Landscape
 * - Preferências de acessibilidade
 * - Print styles
 * 
 * @author Dashboard Premium V3
 * @created 2025-10-01
 */

/* ========================================
   EXTRA SMALL DEVICES - Mobile (max-width: 480px)
   ======================================== */

@media (max-width: 480px) {
    /* Container Adjustments */
    .container {
        padding: var(--space-md);
    }
    
    /* Header Mobile */
    .header {
        padding: var(--space-lg) var(--space-md) !important;
        text-align: center;
    }
    
    .header img {
        height: 120px !important;
        margin-bottom: var(--space-md) !important;
    }
    
    .header h1 {
        font-size: var(--text-xl) !important;
    }
    
    /* Controls Section - Stack Vertical */
    .controls-section {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
        padding: var(--space-md) !important;
    }
    
    /* Summary Cards - Single Column */
    .summary-cards {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    .summary-card {
        padding: var(--space-lg) var(--space-md) !important;
    }
    
    .summary-card .value {
        font-size: var(--text-3xl) !important;
    }
    
    /* Service Tabs - Vertical Stack */
    .service-tabs {
        flex-direction: column;
        gap: var(--space-sm) !important;
    }
    
    .service-tab {
        padding: var(--space-md) !important;
        text-align: center;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Buttons - Full Width */
    .btn {
        width: 100%;
        padding: var(--space-lg) var(--space-md) !important;
        font-size: var(--text-base) !important;
        min-height: 48px;
    }
    
    /* Tables - Compact */
    .data-table {
        font-size: var(--text-xs) !important;
        min-width: 500px;
    }
    
    .data-table th,
    .data-table td {
        padding: var(--space-sm) var(--space-xs) !important;
    }
    
    .data-table th { 
        min-width: 60px; 
    }
    
    /* Alert Components */
    .alert-stat-card {
        padding: var(--space-md) !important;
    }
    
    .alert-card {
        padding: var(--space-md) !important;
    }
    
    .alert-stats-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    /* Touch Targets - Adequate Size */
    select, input {
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Table Controls - Stack */
    .table-controls {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    /* Fullscreen Modal - Mobile */
    .fullscreen-header {
        padding: var(--space-md);
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .fullscreen-content {
        padding: var(--space-md);
    }
    
    .fullscreen-controls {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .fullscreen-search {
        width: 100%;
    }
}

/* ========================================
   SMALL DEVICES - Tablet Portrait (481px - 768px)
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {
    /* Container */
    .container {
        padding: var(--space-lg);
    }
    
    /* Header */
    .header img {
        height: 150px !important;
    }
    
    /* Controls Section - 2 Columns */
    .controls-section {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-md) !important;
    }
    
    /* Summary Cards - 2 Columns */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Service Tabs - Wrap */
    .service-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-sm) !important;
    }
    
    .service-tab {
        min-width: 120px;
        text-align: center;
    }
    
    /* Alert Stats - 2 Columns */
    .alert-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Tables */
    .data-table {
        min-width: 600px;
    }
    
    .data-table th:nth-child(1) { min-width: 100px; }
    .data-table th:nth-child(2) { min-width: 80px; }
}

/* ========================================
   MEDIUM DEVICES - Tablet Landscape (769px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Container */
    .container {
        padding: var(--space-lg);
    }
    
    /* Controls Section - 3 Columns */
    .controls-section {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Summary Cards - 3 Columns */
    .summary-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Alert Stats - 3 Columns */
    .alert-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ========================================
   LARGE DEVICES - Desktop (1025px - 1200px)
   ======================================== */

@media (min-width: 1025px) and (max-width: 1200px) {
    /* Summary Cards - 4 Columns */
    .summary-cards {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   EXTRA LARGE DEVICES - Wide Desktop (1201px+)
   ======================================== */

@media (min-width: 1201px) {
    /* Maximum Width Container */
    .container {
        max-width: 1400px;
    }
}

/* ========================================
   LANDSCAPE MOBILE OPTIMIZATION
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Compact Header */
    .header {
        padding: var(--space-md) !important;
    }
    
    .header img {
        height: 80px !important;
        margin-bottom: var(--space-sm) !important;
    }
    
    /* Horizontal Cards */
    .summary-cards {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    .summary-card {
        padding: var(--space-md) !important;
    }
    
    .summary-card .value {
        font-size: var(--text-2xl) !important;
        margin: var(--space-sm) 0 !important;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .header img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Optimize images for retina */
    .data-table img,
    .summary-card img {
        image-rendering: optimizeQuality;
        object-fit: contain;
    }
}

/* ========================================
   DARK MODE PREFERENCE
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-opacity: 0.95;
    }
    
    /* Enhanced contrast for dark mode */
    .summary-card {
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    .data-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.2);
    }
}

/* ========================================
   REDUCED MOTION PREFERENCE - Accessibility
   ======================================== */

@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;
    }
    
    /* Disable hover effects that rely on animations */
    .summary-card:hover,
    .service-tab:hover,
    .btn:hover {
        transform: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Hide Interactive Elements */
    .btn,
    .service-tabs,
    .controls-section,
    .fullscreen-close,
    .table-scroll-indicator {
        display: none !important;
    }
    
    /* Optimize for Print */
    .summary-cards,
    .data-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .header {
        break-after: avoid;
        page-break-after: avoid;
    }
    
    /* Remove backgrounds to save ink */
    .summary-card,
    .glass-card,
    .alert-card {
        background: white !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    /* Black text for print */
    body,
    .data-table th,
    .data-table td {
        color: #000 !important;
    }
    
    /* Simplify table styling */
    .data-table {
        border: 1px solid #000;
    }
    
    .data-table th {
        background: #f0f0f0 !important;
        border: 1px solid #000 !important;
    }
    
    .data-table td {
        border: 1px solid #000 !important;
    }
}

/* ========================================
   CONTAINER QUERIES (Future-proof)
   ======================================== */

/* When container queries are fully supported */
@supports (container-type: inline-size) {
    .summary-cards {
        container-type: inline-size;
    }
    
    @container (max-width: 500px) {
        .summary-card {
            grid-template-columns: 1fr;
        }
    }
}

/* ========================================
   ORIENTATION SPECIFIC ADJUSTMENTS
   ======================================== */

/* Portrait Orientation */
@media (orientation: portrait) {
    .data-table-container {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) {
    .data-table-container {
        max-height: 50vh;
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

/* Increase touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .service-tab,
    select,
    input {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Remove hover effects on touch devices */
    .summary-card:hover,
    .service-tab:hover,
    .btn:hover {
        transform: none;
    }
    
    /* Add active states instead */
    .summary-card:active {
        transform: scale(0.98);
    }
    
    .btn:active {
        transform: scale(0.95);
    }
}

/* ========================================
   HIGH CONTRAST MODE - Accessibility
   ======================================== */

@media (prefers-contrast: high) {
    .summary-card,
    .service-tab,
    .btn {
        border-width: 2px;
        border-color: currentColor;
    }
    
    .data-table th {
        border-bottom-width: 3px;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS - Mobile
   ======================================== */

@media (max-width: 768px) {
    /* Reduce GPU load on mobile */
    .summary-card,
    .service-tab,
    .btn {
        will-change: auto;
    }
    
    /* Simplify animations */
    .alert-card {
        animation: none;
    }
    
    /* Disable backdrop-filter on mobile (performance) */
    .glass-card,
    .controls-section {
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.1);
    }
}