/* =========================================================
   responsive.css  –  Recipe Pantry Personal
   Mobile-first breakpoints
   ========================================================= */

/* ─── Base: mobile (< 480px) ────────────────────────────────────── */
:root {
    --content-max: 600px;
}

/* ─── Small phones (< 360px) ─────────────────────────────────────── */
@media (max-width: 360px) {
    .screen-title {
        font-size: 1.1rem;
    }

    .detail-name {
        font-size: 1.25rem;
    }

    .recipe-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    .detail-stats {
        grid-template-columns: 1fr;
    }
}

/* ─── Mobile (< 767px) ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .main-content {
        padding: 0 16px 100px !important;
        height: 100dvh;
        overflow-y: auto;
    }

    .main-content-scroll {
        padding-top: 16px;
    }
}

/* ─── Medium phones (481px – 767px) ─────────────────────────────── */
@media (min-width: 481px) {
    .recipe-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 20px;
    }

    .ocr-upload-area {
        padding: 56px 32px;
    }

    .login-card {
        border-radius: 28px;
        padding: 32px;
    }
}

/* ─── Tablet (768px – 1023px): sidebar colapsada ─────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .recipes-featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipes-compact-list {
        grid-template-columns: 1fr;
    }

    /* Sidebar icono + etiqueta en tablet */
    .sidebar {
        width: 96px;
        min-width: 96px;
        padding: 24px 0;
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
        background: white;
    }

    /* Ocultar textos secundarios en sidebar (tablet), pero dejar iconos e iconos de nav */
    .logo-text,
    .sidebar-user-profile .user-info-m3 {
        display: none;
    }

    .nav-item span:not(.material-symbols-outlined) {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        margin-top: 4px;
    }

    .sidebar-logo {
        padding: 0;
        justify-content: center;
        margin-bottom: 32px;
    }

    .nav-item {
        flex-direction: column;
        justify-content: center;
        padding: 12px 4px;
        gap: 0;
    }

    .main-content {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        height: 100vh;
    }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (min-width: 1024px) {
    .recipes-featured-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sidebar completa en escritorio */
    .sidebar {
        width: 240px;
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
        transition: width 0.25s ease;
    }

    /* Override for slim mode on desktop */
    .sidebar.sidebar--slim {
        width: 96px;
        min-width: 96px;
    }

    /* Textos visibles en sidebar (escritorio) */
    .logo-text,
    .nav-item span:not(.material-symbols-outlined) {
        display: block;
    }

    .sidebar--slim .logo-text,
    .sidebar--slim .nav-item span:not(.material-symbols-outlined) {
        display: none !important;
    }

    .sidebar-logo {
        padding: 0 32px;
        justify-content: flex-start;
    }

    .nav-item {
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 1.4rem;
    }

    /* Contenido principal: ocupa el espacio restante */
    .main-content {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        height: 100vh;
        padding: 0;
    }

    /* Ocultar el botón hamburguesa en escritorio */
    .hamburger-btn {
        display: none !important;
    }
}

/* ─── Utilidades de Visibilidad ─────────────────────────────────── */
.mobile-only {
    display: flex !important;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

.desktop-only {
    display: none !important;
}

@media (min-width: 768px) {
    .desktop-only {
        display: flex !important;
    }
}

/* ─── Detalle de la Receta en Escritorio ──────────────────────────── */
@media (min-width: 1024px) {
    .recipe-detail-app {
        flex-direction: row;
        background: #F8F9FA;
    }

    .detail-hero {
        width: 40%;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .detail-main {
        flex: 1;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 64px 80px;
        max-width: none;
        background: #FFFFFF;
        height: 100vh;
        overflow-y: auto;
    }

    /* Override: Single column when there is NO photo */
    .recipe-detail-app.no-image {
        flex-direction: column;
        background: #FFFFFF;
    }

    .recipe-detail-app.no-image .detail-hero {
        width: 100%;
        height: auto;
        position: static;
    }

    .recipe-detail-app.no-image .detail-main {
        height: auto;
        padding: 48px;
        max-width: 1000px;
        margin: 0 auto;
        overflow-y: visible;
    }

    .recipe-detail-app.no-image .detail-action-bar {
        padding: 24px 48px;
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* ─── Login ─────────────────────────────────────────────────────── */
.login-container {
    padding: 12px 20px;
    min-height: unset;
}

.login-brand {
    display: none;
}

/* ─── Safe areas (notch, home indicator) ─────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(72px + env(safe-area-inset-bottom));
    }
}