/**
 * Calculadora Veicular - Responsive Styles
 * Desenvolvido por B20 Conteúdo Digital
 * https://www.b20.com.br
 */

/* ========================================
   TABLET (768px+)
   ======================================== */
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }



    /* Container */
    .container {
        max-width: 720px;
        padding: var(--spacing-lg);
    }

    /* Hero Section */
    .hero-actions {
        flex-direction: row;
        justify-content: center;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Vehicles Grid */
    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Form Row */
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard Controls & Header */
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dashboard-controls {
        flex-direction: row;
        margin-top: 0;
    }

    /* Summary Grid */
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Charts Section */
    .charts-section {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Landing Page New Sections */
    .steps-container {
        flex-direction: row;
    }
    
    .step-card {
        flex-direction: column;
        text-align: center;
        flex: 1;
    }

    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    /* Toast Position */
    #toast-container {
        bottom: var(--spacing-lg);
    }
}

/* ========================================
   DESKTOP (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    /* Header Desktop Navigation */
    .desktop-nav {
        display: flex;
        gap: var(--spacing-xs);
    }

    .desktop-nav .nav-link {
        padding: var(--spacing-xs) var(--spacing-md);
        border-radius: var(--border-radius-sm);
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition-fast);
        font-weight: 500;
    }

    .desktop-nav .nav-link:hover,
    .desktop-nav .nav-link:focus,
    .desktop-nav .nav-link.active {
        background: var(--primary-color);
        color: white;
    }

    /* Hide Bottom Navigation on Desktop */
    .bottom-nav {
        display: none !important;
    }

    /* Container */
    .container {
        max-width: 960px;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Vehicles Grid */
    .vehicles-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Summary Grid */
    .summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Contact Info */
    .contact-info {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   LARGE DESKTOP (1440px+)
   ======================================== */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        padding: var(--spacing-lg) 0;
    }

    .features-section,
    .stats-section,
    .faq-section {
        padding: var(--spacing-lg) 0;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .app-header,
    .bottom-nav,
    .header-actions,
    .btn,
    #toast-container {
        display: none !important;
    }

    body {
        padding-top: 0;
        padding-bottom: 0;
    }

    .container {
        max-width: 100%;
    }

    .feature-card,
    .vehicle-card,
    .summary-card {
        break-inside: avoid;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@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 MODE
   ======================================== */
@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
    }

    .btn-outline {
        border-width: 3px;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: 3px solid currentColor;
    }
}

/* ========================================
   SAFE AREAS (iPhone X+)
   ======================================== */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: max(60px, env(safe-area-inset-top));
    }

    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(65px + env(safe-area-inset-bottom));
    }

    @media (max-width: 767px) {
        body {
            padding-bottom: calc(70px + env(safe-area-inset-bottom));
        }
    }
}

/* ========================================
   RESPONSIVE TABLE (MOBILE CARDS)
   ======================================== */
@media (max-width: 767px) {
    .expenses-table thead {
        display: none;
    }
    
    .expenses-table, .expenses-table tbody, .expenses-table tr, .expenses-table td {
        display: block;
        width: 100%;
    }
    
    .expenses-table tr {
        margin-bottom: var(--spacing-md);
        background: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
        box-shadow: var(--shadow-sm);
    }
    
    .expenses-table td {
        padding: var(--spacing-xs) 0;
        text-align: right;
        border-bottom: 1px solid var(--border-color);
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .expenses-table td:last-child {
        border-bottom: none;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        padding-top: var(--spacing-sm);
        margin-top: var(--spacing-xs);
    }
    
    .expenses-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
    }
}