/* =============================================
   Responsivo v2 — Mobile-first breakpoints
   Mobile: default
   Tablet: >= 768px
   Desktop: >= 1024px
   Large: >= 1400px
   ============================================= */

/* ========== Tablet (>= 768px) ========== */
@media (min-width: 768px) {
    .page-content {
        padding: var(--space-6);
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .toolbar {
        flex-wrap: nowrap;
    }

    /* Modal vira centralizado no tablet */
    .modal-backdrop {
        align-items: center;
        padding: var(--space-6);
    }

    .modal {
        border-radius: var(--radius-2xl);
        max-height: 85vh;
    }

    .modal-backdrop.active .modal {
        transform: translateY(0) scale(1);
    }

    .modal-handle {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Sidebar overlay mode (mobile/tablet) */
@media (max-width: 1023px) {
    .sidebar.open {
        display: flex;
        transform: translateX(0);
        position: fixed;
        z-index: var(--z-nav);
        box-shadow: var(--shadow-xl);
    }
}

/* ========== Desktop (>= 1024px) ========== */
@media (min-width: 1024px) {
    /* Mostra sidebar, esconde bottom nav */
    .sidebar {
        display: flex;
    }

    .bottom-nav {
        display: none;
    }

    .main-content {
        margin-left: var(--sidebar-width);
        padding-bottom: 0;
    }

    .header {
        padding: 0 var(--space-6);
    }

    .header-brand {
        display: none; /* já está na sidebar */
    }

    .header-divider {
        display: none;
    }

    .page-content {
        padding: var(--space-6) var(--space-8);
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-5);
    }

    .modal-lg {
        max-width: 800px;
    }

    /* Menu toggle some */
    .menu-toggle {
        display: none;
    }
}

/* ========== Desktop grande (>= 1400px) ========== */
@media (min-width: 1400px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .page-content {
        padding: var(--space-8) var(--space-10);
    }
}

/* ========== Touch devices ========== */
@media (hover: none) {
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-card);
    }

    .galeria-item .galeria-actions {
        opacity: 1;
    }
}

/* ========== Safe area (notch devices) ========== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .main-content {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-4));
    }

    @media (min-width: 1024px) {
        .main-content {
            padding-bottom: 0;
        }
    }
}

/* ========== Landscape mobile ========== */
@media (max-height: 500px) and (orientation: landscape) {
    .auth-page {
        padding: var(--space-2);
    }

    .auth-card {
        padding: var(--space-4);
        max-width: 360px;
    }

    .auth-card .logo {
        margin-bottom: var(--space-4);
    }

    .auth-card .logo h1 {
        font-size: var(--text-xl);
    }
}