/* Photo.art — responsivo mobile (Galaxy S23 ~360px, iPhone 16/17 ~390–430px) */

@media (max-width: 480px) {
    body.admin-layout .admin-main {
        padding: 12px;
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    body.admin-layout .card,
    .admin-content .card {
        padding: 14px;
        border-radius: 14px;
    }

    .admin-mobile-bar {
        margin: 0 0 12px;
        padding: 6px 0;
        background: #e8eef5;
        border-radius: 12px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .stat-grid,
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .stat-card strong,
    .admin-stat-card strong {
        font-size: 1.15rem;
    }

    .btn-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .status-pill {
        white-space: nowrap;
        font-size: 10px;
    }
}

/* Tabelas → cards empilhados no celular */
@media (max-width: 640px) {
    .table-responsive {
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .data-table.is-stack-ready {
        display: block;
        width: 100%;
        table-layout: auto;
        border: 0;
    }

    .data-table.is-stack-ready thead,
    .data-table.is-stack-ready > tr:first-child {
        display: none;
    }

    .data-table.is-stack-ready tbody,
    .data-table.is-stack-ready {
        display: block;
    }

    .data-table.is-stack-ready tbody tr,
    .data-table.is-stack-ready > tr:not(:first-child) {
        display: block;
        margin-bottom: 12px;
        padding: 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(0, 39, 118, 0.04);
    }

    .data-table.is-stack-ready tbody tr:last-child,
    .data-table.is-stack-ready > tr:not(:first-child):last-child {
        margin-bottom: 0;
    }

    .data-table.is-stack-ready td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        text-align: right;
        overflow-wrap: normal;
        word-break: normal;
        white-space: normal;
        min-width: 0;
    }

    .data-table.is-stack-ready td:first-child {
        padding-top: 0;
    }

    .data-table.is-stack-ready td:last-child {
        padding-bottom: 0;
    }

    .data-table.is-stack-ready td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex: 0 0 38%;
        max-width: 42%;
    }

    .data-table.is-stack-ready td:not([data-label])::before,
    .data-table.is-stack-ready td[data-label=""]::before {
        display: none;
    }

    .data-table.is-stack-ready td:not([data-label]),
    .data-table.is-stack-ready td[data-label=""] {
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .data-table.is-stack-ready td .seller-photo-thumb,
    .data-table.is-stack-ready td img {
        max-width: 100%;
        height: auto;
    }

    .data-table.is-stack-ready td a.btn,
    .data-table.is-stack-ready td a.btn-ghost {
        text-align: right;
        max-width: 58%;
        white-space: normal;
        line-height: 1.35;
    }
}

/* Header da home (barra branca) */
.home-top-bar {
    z-index: 50;
}

.home-top-bar .mobile-menu-btn {
    display: flex;
    flex-shrink: 0;
    background: rgba(0, 39, 118, 0.06);
    border: 1px solid rgba(0, 39, 118, 0.14);
}

@media (min-width: 769px) {
    .home-top-bar .mobile-menu-btn {
        display: none !important;
    }
}

.home-top-bar .mobile-menu-bar {
    background: var(--blue, #002776);
}

.home-top-bar .home-top-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.home-top-bar .btn-painel-seller {
    background: var(--primary, #006B3F) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 700;
    white-space: nowrap;
}

/* Site header verde — hamburger sempre visível no painel */
@media (max-width: 900px) {
    body.admin-layout header.site-header .mobile-menu-btn {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    body.admin-layout header.site-header .site-header-brand {
        flex: 1;
        min-width: 0;
    }

    body.admin-layout header.site-header .user-env-nav {
        display: none !important;
    }
}

/* Banner flutuante abaixo do header */
.floating-home-promo-wrap {
    z-index: 45;
}

@media (max-width: 639px) {
    .floating-home-promo-wrap {
        top: var(--floating-promo-top, 4.5rem);
    }
}

/* Bottom nav — reforço mobile (Galaxy / iPhone) */
@media (max-width: 900px) {
    nav.bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: block;
    }

    nav.bottom-nav .bottom-nav-inner,
    nav.bottom-nav .bottom-nav-row,
    nav.bottom-nav > div:not(.seller-more-sheet) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: flex-end;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 4px;
    }

    nav.bottom-nav .bottom-nav-item,
    nav.bottom-nav a,
    nav.bottom-nav .bottom-nav-more-btn {
        flex: 1 1 0;
        min-width: 0;
        max-width: 5.5rem;
    }

    nav.bottom-nav .bottom-nav-label {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

.bottom-nav-mobile-only {
    display: block;
}

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

.buyer-bottom-nav .bottom-nav-item-accent,
.buyer-bottom-nav .bottom-nav-item-accent .nav-menu-icon {
    color: var(--primary, #006B3F);
    font-weight: 700;
}

.buyer-bottom-nav .bottom-nav-item-accent.active,
.buyer-bottom-nav .bottom-nav-item-accent.active .nav-menu-icon {
    color: var(--blue, #002776);
}