/* McFly 3.0 — Ajustes globais para mobile e tablets */

/* —— Base —— */
@media (max-width: 768px) {
    :root {
        --header-height: 76px;
        /* Header: usuário + cliente + origem com folga */
        --header-offset: 80px;
        --mobile-fab-clearance: 76px;
        --sidebar-width: 0px;
    }

    html {
        -webkit-text-size-adjust: 100%;
        --sidebar-width: 0px;
    }

    html.sidebar-collapsed {
        --sidebar-width: 0px;
    }

    .app-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Sobrescreve margin-left das páginas (*-layout.css / home.css / dashboard.css) */
    html body .main-content,
    html body .main-content.home-page,
    html body .main-content.cotacao-page,
    html body .main-content.pedido-page,
    html body .main-content.dashboard-page,
    html body .main-content.gerenciamento-page,
    html body .main-content.meus-pedidos-page,
    html body .main-content.relatorios-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: auto !important;
        transform: none !important;
        box-sizing: border-box;
        padding-top: calc(var(--header-offset) + 12px) !important;
        padding-bottom: calc(24px + var(--mobile-fab-clearance)) !important;
        overflow-x: hidden;
    }

    .top-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .section-title {
        font-size: 18px;
        flex-wrap: wrap;
    }

    /* Área de toque mínima */
    button,
    .btn,
    .btn-adicionar,
    .filter-btn,
    .menu-item,
    .submenu-link,
    .pagination-button,
    .btn-acao,
    select {
        min-height: 44px;
    }

    .btn-acao {
        min-width: 44px;
    }

    /* Tabelas: rolagem horizontal com indicador */
    .table-container,
    .cotacao-table-wrap,
    .table-container-produto,
    .pedido-table-wrap,
    .pedido-table-card,
    .mp-table-wrap,
    .rep-table-wrap,
    .rep-table-scroll,
    .dash-table-wrap,
    .dash-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin-left: -4px;
        margin-right: -4px;
        padding-bottom: 4px;
    }

    .import-table,
    .cotacao-table-itens,
    .cotacao-table-produtos,
    .pedido-table,
    .mp-data-table,
    .rep-data-table,
    .dash-data-table {
        min-width: 520px;
    }

    /* Modais */
    .modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .modal-content,
    .modal-box {
        width: 100% !important;
        max-width: none !important;
        max-height: 92vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
    }

    .modal-actions,
    .modal-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .modal-actions .btn,
    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    /* Paginação */
    .pagination,
    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Formulários em coluna */
    .filtro-grid,
    .filtro-row,
    .search-row,
    .form-row-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .filtro-grid > *,
    .search-row > * {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* —— Header mobile (cliente visível para MASTER) —— */
@media (max-width: 768px) {
    .top-header {
        height: var(--header-height);
        min-height: var(--header-height);
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        overflow: visible;
    }

    .header-start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-end {
        flex: 0 0 auto;
        gap: 4px;
    }

    .header-toolbar {
        flex-wrap: nowrap;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        gap: 4px;
    }

    .header-user-card {
        padding: 4px 10px 4px 4px;
        max-width: 100%;
        gap: 8px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
        border-radius: 8px;
    }

    .user-name {
        font-size: 13px;
        max-width: 32vw;
    }

    .header-meta {
        max-width: 100%;
        gap: 4px;
        margin-top: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .header-cliente,
    .header-origem {
        display: inline-flex !important;
        font-size: 9px;
        padding: 0 5px 0 2px;
    }

    .header-origem {
        flex: 0 1 auto !important;
        max-width: 46% !important;
        overflow: hidden !important;
    }

    .header-origem-nome {
        max-width: min(140px, 28vw);
    }

    .header-cliente {
        flex: 0 1 auto !important;
        max-width: 52% !important;
        min-width: 0 !important;
    }

    .header-cliente-fantasia {
        max-width: min(120px, 30vw);
    }

    .last-access {
        display: none;
    }

    .origem-picker-btn {
        max-width: min(110px, 28vw);
        padding: 0 8px;
        height: 32px;
    }

    .origem-picker-label {
        font-size: 10px;
    }

    .sidebar-toggle-btn {
        display: none;
    }

    .sidebar-mobile-fab {
        bottom: max(18px, env(safe-area-inset-bottom, 0px));
        right: max(14px, env(safe-area-inset-right, 0px));
        left: auto;
    }

    /* Painéis flutuantes: largura da tela no mobile */
    .theme-picker,
    .origem-picker {
        position: static;
    }

    .theme-picker-panel,
    .origem-picker-panel {
        position: fixed !important;
        top: calc(var(--header-offset) + 6px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(50vh, 360px) !important;
        margin: 0;
        z-index: calc(var(--z-header) + 50);
        box-shadow: var(--shadow-lg);
    }

    .origem-picker-panel.open {
        display: flex !important;
    }

    .theme-picker-panel.open {
        animation: themePanelInMobile 0.2s ease;
    }

    @keyframes themePanelInMobile {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .cards-cotacao,
    .cotacao-page-header,
    .home-welcome-hero {
        scroll-margin-top: calc(var(--header-offset) + 8px);
    }
}

@media (max-width: 480px) {
    :root {
        --header-offset: 76px;
    }

    .top-header {
        padding: 8px 10px;
        flex-wrap: nowrap;
        align-items: center;
        height: var(--header-height);
        min-height: var(--header-height);
    }

    .header-start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-end {
        flex: 0 0 auto;
    }

    .header-toolbar {
        flex-wrap: nowrap;
    }

    .origem-picker-btn {
        max-width: 44px;
        padding: 0;
        width: 40px;
        justify-content: center;
    }

    .origem-picker-btn .origem-picker-label {
        display: none;
    }

    .user-name {
        max-width: 72vw;
    }

    .header-cliente span {
        max-width: 68vw;
    }

    html body .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* —— Cotação —— */
@media (max-width: 768px) {
    .cotacao-page-title {
        font-size: 20px;
    }

    .cotacao-page-title i {
        font-size: 24px;
    }

    .cotacao-table-itens th:nth-child(6),
    .cotacao-table-itens td:nth-child(6),
    .cotacao-table-itens th:nth-child(7),
    .cotacao-table-itens td:nth-child(7) {
        display: none;
    }

    .cotacao-table-produtos th:nth-child(3),
    .cotacao-table-produtos td:nth-child(3) {
        display: none;
    }

    .cotacao-count-badge {
        align-self: flex-start;
    }

    .cotacao-hint {
        display: none;
    }
}

/* —— Pedido —— */
@media (max-width: 768px) {
    .pedido-page .pedido-filtro-grid,
    .pedido-page .summary-cards {
        grid-template-columns: 1fr !important;
    }

    .pedido-page .pedido-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .pedido-page .pedido-actions-bar .btn {
        width: 100%;
        justify-content: center;
    }
}

/* —— Meus pedidos —— */
@media (max-width: 768px) {
    .meus-pedidos-page .mp-filtro-grid {
        grid-template-columns: 1fr !important;
    }

    .mp-data-table th:nth-child(n+5),
    .mp-data-table td:nth-child(n+5) {
        /* mantém scroll; opcional ocultar colunas extras em telas muito estreitas */
    }
}

/* —— Dashboard —— */
@media (max-width: 768px) {
    .dash-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .dash-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .dash-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-side-panel {
        grid-template-columns: 1fr !important;
    }
}

/* —— Home —— */
@media (max-width: 768px) {
    .banner-slider {
        height: 220px;
        border-radius: var(--radius-md);
    }

    .banner-title {
        font-size: 20px !important;
    }

    .banner-subtitle {
        font-size: 13px !important;
    }

    .home-welcome-hero-inner {
        padding: 20px 16px !important;
    }
}

/* —— Gerenciamento —— */
@media (max-width: 768px) {
    .gm-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .gm-cliente-busca-row {
        flex-direction: column;
    }

    .gm-cliente-busca-row input,
    .gm-cliente-busca-row button {
        width: 100%;
    }

    .gm-grid {
        grid-template-columns: 1fr !important;
    }

    .gm-theme-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* —— Relatórios —— */
@media (max-width: 768px) {
    .rep-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .rep-filtro-grid {
        grid-template-columns: 1fr !important;
    }

    .rep-filtro-grid .rep-filtro-wide {
        grid-column: span 1 !important;
    }

    .rep-toolbar-actions {
        flex-direction: column;
        width: 100%;
    }

    .rep-toolbar-actions .btn {
        width: 100%;
    }
}

/* —— Login —— */
@media (max-width: 768px) {
    body.login-page,
    body:has(.login-box) {
        padding: 24px 16px !important;
    }

    .login-container,
    .login-box {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    body.login-page,
    body:has(.login-box) {
        padding: 16px 12px !important;
    }

    .login-container,
    .login-box {
        padding: 24px 20px;
        margin: 0 auto;
        width: 100%;
    }
}