/**
 * RESPONSIVE DESIGN - VIOLICORP v2.1
 * 
 * Mobile-first approach
 * Breakpoints: 480px (mobile), 768px (tablet), 1024px (desktop)
 */

/* ════════════════════════════════════════════════════════════════════════════ */
/* TABLET - 481px a 768px */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .nav-bar {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .nav-logo {
        font-size: var(--font-lg);
    }
    
    .nav-links {
        gap: var(--spacing-md);
    }
    
    .nav-item {
        font-size: var(--font-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .nav-label {
        display: none;
    }
    
    .container {
        max-width: 100%;
        padding: var(--spacing-md);
    }
    
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
    }
    
    .card {
        padding: var(--spacing-lg);
    }
    
    .card-stat-value {
        font-size: var(--font-3xl);
    }
    
    h1, .h1 {
        font-size: var(--font-2xl);
    }
    
    h2, .h2 {
        font-size: var(--font-xl);
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-sm);
    }
    
    .btn-group {
        gap: var(--spacing-md);
    }
    
    .section {
        padding: var(--spacing-2xl);
        margin: var(--spacing-3xl) 0;
    }
    
    .hero {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    
    table {
        font-size: var(--font-sm);
    }
    
    th, td {
        padding: var(--spacing-md);
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* MOBILE - até 480px */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Body */
    body {
        padding-bottom: 70px;
    }
    
    /* Navbar Mobile */
    .nav-bar {
        padding: var(--spacing-xs) var(--spacing-sm);
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
    
    .nav-logo {
        font-size: var(--font-lg);
        flex: 0 0 100%;
        order: -1;
    }
    
    .nav-links {
        width: 100%;
        gap: var(--spacing-xs);
        flex: 0 0 100%;
    }
    
    .nav-item {
        flex: 1;
        font-size: var(--font-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        justify-content: center;
        border-radius: var(--radius-md);
    }
    
    .nav-item .material-symbols-rounded {
        font-size: 18px;
    }
    
    .nav-label {
        display: none;
    }
    
    /* Container */
    .container {
        max-width: 100%;
        padding: var(--spacing-sm);
    }
    
    /* Grid */
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-sm);
    }
    
    /* Typography */
    h1, .h1 {
        font-size: var(--font-2xl);
        margin-bottom: var(--spacing-md);
    }
    
    h2, .h2 {
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-md);
    }
    
    h3, .h3 {
        font-size: var(--font-lg);
    }
    
    p {
        font-size: var(--font-sm);
        margin-bottom: var(--spacing-md);
    }
    
    /* Cards */
    .card {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-md);
    }
    
    .card-title {
        font-size: var(--font-base);
    }
    
    .card-stat-value {
        font-size: var(--font-2xl);
    }
    
    /* Forms */
    .form-input,
    .form-textarea,
    .form-select {
        padding: var(--spacing-md);
        font-size: 16px; /* Previne zoom em iOS */
        border-radius: var(--radius-md);
    }
    
    .form-label {
        font-size: var(--font-xs);
    }
    
    /* Buttons */
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-sm);
        min-height: 44px; /* Touch-friendly */
        border-radius: var(--radius-lg);
    }
    
    .btn-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .btn-group {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-lg);
        margin: var(--spacing-2xl) 0;
        border-radius: var(--radius-lg);
    }
    
    .section-title {
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-lg);
    }
    
    .hero {
        padding: var(--spacing-xl) var(--spacing-lg);
        margin: var(--spacing-2xl) 0;
    }
    
    .hero h1 {
        font-size: var(--font-2xl);
    }
    
    /* Lists */
    .item-row {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-sm);
        flex-direction: column;
        align-items: flex-start;
    }
    
    .item-title {
        font-size: var(--font-base);
    }
    
    .item-subtitle {
        font-size: var(--font-xs);
    }
    
    /* Tables */
    .table-container {
        border-radius: var(--radius-md);
        margin: var(--spacing-lg) calc(-1 * var(--spacing-sm));
        border: none;
    }
    
    table {
        font-size: var(--font-xs);
    }
    
    th, td {
        padding: var(--spacing-sm);
    }
    
    /* Badges */
    .badge {
        font-size: var(--font-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Alerts */
    .alert {
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-lg);
    }
    
    .alert-title {
        font-size: var(--font-base);
        margin-bottom: var(--spacing-sm);
    }
    
    /* Empty States */
    .empty-state {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    
    .empty-state-icon {
        font-size: 48px;
        margin-bottom: var(--spacing-lg);
    }
    
    .empty-state-title {
        font-size: var(--font-lg);
    }
    
    /* Footer */
    footer {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    
    /* Utilities */
    .hidden-mobile {
        display: none !important;
    }
    
    /* Prevent horizontal scroll */
    body, html {
        overflow-x: hidden;
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* DESKTOP - 1024px+ (Padrão) */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .nav-item .material-symbols-rounded {
        margin-right: var(--spacing-xs);
    }
    
    .nav-label {
        display: inline;
    }
    
    .hidden-desktop {
        display: none !important;
    }
    
    /* Telas muito grandes */
    @media (min-width: 1440px) {
        .container {
            max-width: 1400px;
        }
        
        .grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
    }
}

/* ════████════════════════════════════════════════════════════════════════════ */
/* BREAKPOINT HELPERS */
/* ════════════════════════════════════════════════════════════════════════════ */

.hidden-xs { @media (max-width: 480px) { display: none !important; } }
.hidden-sm { @media (max-width: 768px) { display: none !important; } }
.hidden-md { @media (max-width: 1024px) { display: none !important; } }

.visible-xs { display: none !important; }
@media (max-width: 480px) { .visible-xs { display: block !important; } }

.visible-sm { display: none !important; }
@media (max-width: 768px) { .visible-sm { display: block !important; } }

.visible-md { display: none !important; }
@media (min-width: 1024px) { .visible-md { display: block !important; } }

/* ════════════════════════════════════════════════════════════════════════════ */
/* PRINT STYLES */
/* ════════════════════════════════════════════════════════════════════════════ */

@media print {
    body {
        background-color: white;
        color: black;
    }
    
    .nav-bar,
    .nav-item,
    footer,
    .no-print {
        display: none !important;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* HIGH DPI / RETINA DISPLAYS */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* LANDSCAPE MODE */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding-bottom: 50px;
    }
    
    .nav-bar {
        padding: var(--spacing-xs);
    }
    
    .hero {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
    
    .section {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
}