/* =========================================================
   MÁXIMAHUB — PEDIDOS
   LAYOUT FINAL
   ========================================================= */

:root{
    --ff-side-open:220px;
    --ff-side-mini:58px;
    --ff-content-gap:14px;

    --mh-bg:#f4f7fa;
    --mh-white:#ffffff;
    --mh-border:#e2e8ee;
    --mh-text:#263746;

    --mh-blue:#1677ff;
    --mh-red:#df0035;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

body{
    background:var(--mh-bg);
    overflow-x:hidden;
}


/* =========================================================
   REMOVE BOOTSTRAP COMO CONTROLADOR HORIZONTAL
   ========================================================= */

.container-fluid{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}

.container-fluid > .row{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;
}

main,
main.col-md-10,
.main,
.main-content,
.content-wrapper{
    display:block !important;

    float:none !important;
    flex:none !important;

    max-width:none !important;

    box-sizing:border-box !important;
}


/* =========================================================
   MAIN — SIDEBAR ABERTA
   ========================================================= */

body:not(.ff-side-mini) main,
body:not(.ff-side-mini) main.col-md-10{

    margin-left:var(--ff-side-open) !important;
    margin-right:0 !important;

    width:calc(100% - var(--ff-side-open)) !important;
    max-width:calc(100% - var(--ff-side-open)) !important;

    padding-left:var(--ff-content-gap) !important;
    padding-right:var(--ff-content-gap) !important;

    box-sizing:border-box !important;

    transition:
        margin-left .18s ease,
        width .18s ease !important;
}


/* =========================================================
   MAIN — SIDEBAR RECOLHIDA
   58px + 14px
   ========================================================= */

body.ff-side-mini main,
body.ff-side-mini main.col-md-10{

    margin-left:var(--ff-side-mini) !important;
    margin-right:0 !important;

    width:calc(100% - var(--ff-side-mini)) !important;
    max-width:calc(100% - var(--ff-side-mini)) !important;

    padding-left:var(--ff-content-gap) !important;
    padding-right:var(--ff-content-gap) !important;

    box-sizing:border-box !important;

    transition:
        margin-left .18s ease,
        width .18s ease !important;
}


/* =========================================================
   REGRA MAIS IMPORTANTE
   FILHOS DO MAIN NÃO RECEBEM OUTRO RECUO
   ========================================================= */

main > *,
.mh-pedidos-page-title,
.orders-header,
.filters-card,
.order-modes,
.order-actions,
.order-actions.ff-maximahub-actions,
.selected-count,
.sync-status,
.orders-table-card,
.table-responsive,
.orders-pagination{

    position:relative !important;

    left:auto !important;
    right:auto !important;

    margin-left:0 !important;
    margin-right:0 !important;

    transform:none !important;

    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.mh-pedidos-page-title{

    min-height:58px !important;

    display:flex !important;
    align-items:center !important;

    gap:12px !important;

    padding:0 14px !important;

    background:var(--mh-white) !important;

    border:0 !important;
    border-bottom:1px solid var(--mh-border) !important;

    border-radius:0 !important;

    font-size:22px !important;
    font-weight:650 !important;

    color:#152536 !important;

    box-shadow:none !important;
}

.mh-title-icon{
    font-size:25px !important;
}


/* =========================================================
   FILTROS
   ========================================================= */

.orders-header,
.filters-card{

    background:#fff !important;

    border:0 !important;
    border-bottom:1px solid var(--mh-border) !important;

    border-radius:0 !important;

    box-shadow:none !important;
}

.filters-card{

    margin:0 !important;

    padding:12px 14px 8px !important;

    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
}

.filters-area,
.filters-container,
.filters-wrapper,
.orders-filters{

    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
}


/* =========================================================
   GRID DOS FILTROS
   ========================================================= */

.ff-filter-grid,
.filters-grid,
.filters-secondary,
.search-strip{

    width:100% !important;

    margin:0 !important;

    column-gap:14px !important;
    row-gap:8px !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.ff-filter label,
.form-label{

    display:block !important;

    margin:0 0 3px !important;

    color:#344354 !important;

    font-size:11px !important;
    line-height:15px !important;

    font-weight:500 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.ff-filter input,
.ff-filter select,
.form-control,
.form-select{

    height:31px !important;
    min-height:31px !important;

    padding:4px 9px !important;

    background:#fff !important;

    border:1px solid #d7e0e8 !important;
    border-radius:5px !important;

    font-size:11px !important;

    box-shadow:none !important;
}

.ff-filter input:focus,
.ff-filter select:focus,
.form-control:focus,
.form-select:focus{

    outline:none !important;

    border-color:#9cc3ef !important;

    box-shadow:none !important;
}


/* =========================================================
   DATAS
   ========================================================= */

.ff-datetime-range{

    display:flex !important;
    align-items:center !important;

    gap:5px !important;
}

.ff-datetime-range input{
    min-width:0 !important;
}

.ff-datetime-arrow{

    color:#8995a1 !important;

    font-size:11px !important;
}


/* =========================================================
   ERRO NFE
   ========================================================= */

.ff-nfe-error-row{

    min-height:31px !important;

    margin-top:5px !important;

    padding:0 !important;
}

.ff-nfe-error-label{

    color:#344354 !important;

    font-size:11px !important;
}


/* =========================================================
   MOSTRAR MAIS / MENOS
   ========================================================= */

.filters-toggle-row{

    margin:7px 0 0 !important;

    padding:0 !important;
}

.filters-toggle-btn{

    min-height:31px !important;

    padding:5px 11px !important;

    background:#fff !important;

    color:#344354 !important;

    border:1px solid #d7dfe6 !important;
    border-radius:5px !important;

    font-size:11.5px !important;

    box-shadow:none !important;
}


/* =========================================================
   LIMPAR / FILTRAR
   ========================================================= */

.filters-footer,
.filter-actions{

    margin:5px 0 0 !important;

    padding:0 !important;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
}

.search-actions{

    display:flex !important;
    align-items:center !important;

    gap:8px !important;
}

.filters-footer .btn,
.search-actions .btn{

    height:31px !important;
    min-height:31px !important;

    padding:0 14px !important;

    border-radius:5px !important;

    font-size:11px !important;

    box-shadow:none !important;
}


/* =========================================================
   PADRÃO / FLEX / FULL
   ========================================================= */

.order-modes{

    height:39px !important;
    min-height:39px !important;

    margin:0 !important;

    padding:0 14px !important;

    display:flex !important;
    align-items:flex-end !important;

    gap:30px !important;

    background:#fff !important;

    border:0 !important;
    border-bottom:1px solid var(--mh-border) !important;

    border-radius:0 !important;

    box-shadow:none !important;
}

.order-mode{

    position:relative !important;

    height:39px !important;

    margin:0 !important;

    padding:0 0 9px !important;

    background:transparent !important;

    border:0 !important;

    font-size:12px !important;
    font-weight:600 !important;
}

.order-mode.active{
    color:#1677ff !important;
}

.order-mode.flex{
    color:#e4482f !important;
}

.order-mode.full{
    color:#14963f !important;
}


/* =========================================================
   BARRA DE AÇÕES
   ========================================================= */

.order-actions,
.order-actions.ff-maximahub-actions{

    min-height:43px !important;
    height:auto !important;

    margin:0 !important;

    padding:6px 14px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    flex-wrap:nowrap !important;

    background:#fff !important;

    border:0 !important;
    border-bottom:1px solid var(--mh-border) !important;

    border-radius:0 !important;

    box-shadow:none !important;
}


/* =========================================================
   BOTÕES OPERACIONAIS
   ========================================================= */

.order-actions .order-action-btn,
.order-actions.ff-maximahub-actions .order-action-btn,
#acaoEmitirNota,
#acaoEtiqueta,
#acaoExpedicao,
#acaoMais{

    height:31px !important;
    min-height:31px !important;

    padding:0 12px !important;

    border-radius:6px !important;

    font-size:11px !important;
    font-weight:600 !important;

    line-height:1 !important;

    white-space:nowrap !important;

    box-shadow:none !important;
}


/* mantém o visual vermelho atual dos botões ativos */
.order-actions .order-action-btn:not(:disabled),
.order-actions.ff-maximahub-actions .order-action-btn:not(:disabled),
#acaoEmitirNota:not(:disabled),
#acaoEtiqueta:not(:disabled),
#acaoExpedicao:not(:disabled),
#acaoMais:not(:disabled){

    background:var(--mh-red) !important;
    background-color:var(--mh-red) !important;
    background-image:none !important;

    border:1px solid var(--mh-red) !important;

    color:#fff !important;

    opacity:1 !important;
}


/* =========================================================
   PEDIDOS SELECIONADOS
   ========================================================= */

.selected-count{

    min-height:35px !important;

    margin:0 !important;

    padding:6px 14px !important;

    display:flex !important;
    align-items:center !important;

    background:#fff !important;

    color:#344354 !important;

    border:0 !important;
    border-bottom:1px solid var(--mh-border) !important;

    border-radius:0 !important;

    font-size:11.5px !important;
}

.selected-count .refresh-icon{
    color:#1677ff !important;
}


/* =========================================================
   CARD DA TABELA
   ========================================================= */

.orders-table-card{

    margin:0 !important;

    padding:0 14px !important;

    background:#fff !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    overflow:hidden !important;
}

.orders-table-card .table-responsive,
.table-responsive{

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow-x:auto !important;

    transform:none !important;
}


/* =========================================================
   TABELA
   ========================================================= */

.orders-table{

    width:100% !important;

    min-width:980px !important;

    margin:0 !important;

    table-layout:fixed !important;
}

.orders-table thead th{

    padding:8px 6px !important;

    background:#f3f7fa !important;

    color:#344354 !important;

    border-bottom:1px solid #dce3e9 !important;

    font-size:10.5px !important;
    font-weight:650 !important;

    white-space:nowrap !important;
}

.orders-table td{

    padding:8px 6px !important;

    border-bottom:1px solid #e8edf1 !important;

    font-size:10.5px !important;

    line-height:1.3 !important;

    vertical-align:middle !important;
}

.orders-table tbody tr{

    height:52px !important;

    background:#fff !important;
}

.orders-table tbody tr:hover{

    background:#f6faff !important;
}


/* =========================================================
   PAGINAÇÃO
   ========================================================= */

.orders-pagination{

    margin:0 !important;

    padding:9px 14px !important;

    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;

    gap:8px !important;

    background:#fff !important;

    border-top:1px solid var(--mh-border) !important;
}


/* =========================================================
   REMOVE TODOS OS AJUSTES VISUAIS DE TESTE
   ========================================================= */

#mhOperacionalHandle,
#mhContentDragHandle,
#mhSidebarResizeHandle,
#mhResetVisualAdjust,
#mhOperacionalReset,
.mh-adjust-handle{

    display:none !important;
}


/* =========================================================
   GARANTIA — SIDEBAR ABERTA
   ========================================================= */

body:not(.ff-side-mini) .mh-pedidos-page-title,
body:not(.ff-side-mini) .orders-header,
body:not(.ff-side-mini) .filters-card,
body:not(.ff-side-mini) .order-modes,
body:not(.ff-side-mini) .order-actions,
body:not(.ff-side-mini) .selected-count,
body:not(.ff-side-mini) .orders-table-card{

    margin-left:0 !important;

    transform:none !important;
}


/* =========================================================
   GARANTIA — SIDEBAR RECOLHIDA
   ========================================================= */

body.ff-side-mini .mh-pedidos-page-title,
body.ff-side-mini .orders-header,
body.ff-side-mini .filters-card,
body.ff-side-mini .order-modes,
body.ff-side-mini .order-actions,
body.ff-side-mini .selected-count,
body.ff-side-mini .orders-table-card{

    margin-left:0 !important;

    transform:none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:800px){

    body main,
    body main.col-md-10,
    body.ff-side-mini main,
    body.ff-side-mini main.col-md-10{

        margin-left:0 !important;

        width:100% !important;
        max-width:100% !important;

        padding-left:10px !important;
        padding-right:10px !important;
    }

    .ff-filter-grid,
    .filters-grid{

        grid-template-columns:1fr !important;
    }

    .order-modes{

        overflow-x:auto !important;

        gap:22px !important;
    }

    .order-actions,
    .order-actions.ff-maximahub-actions{

        overflow-x:auto !important;

        flex-wrap:nowrap !important;
    }

    .orders-table-card{

        padding-left:8px !important;
        padding-right:8px !important;
    }

    .orders-table{

        min-width:980px !important;
    }
}
/* =========================================================
   PEDIDOS — CORREÇÃO SOMENTE SIDEBAR RECOLHIDA
   ========================================================= */

@media screen and (min-width:801px){

    body.mh-shell-ready.ff-side-mini main,
    body.mh-shell-ready.ff-side-mini main.col-md-10,
    body.mh-shell-ready.ff-side-mini main.ms-sm-auto,
    body.mh-shell-ready.ff-side-mini main.col-md-10.ms-sm-auto{

        /* mata o 16.666% / margin-auto do Bootstrap */
        margin-left:58px !important;
        margin-right:0 !important;

        flex:0 0 calc(100% - 58px) !important;

        width:calc(100% - 58px) !important;
        max-width:calc(100% - 58px) !important;

        padding-left:14px !important;
        padding-right:14px !important;

        float:none !important;

        box-sizing:border-box !important;
    }

    /* impede a ROW/Bootstrap de recentralizar o main */
    body.mh-shell-ready.ff-side-mini .container-fluid > .row{
        display:block !important;

        margin:0 !important;
        padding:0 !important;

        width:100% !important;
        max-width:100% !important;
    }

    /* todos os blocos começam no mesmo ponto */
    body.mh-shell-ready.ff-side-mini .mh-pedidos-page-title,
    body.mh-shell-ready.ff-side-mini .orders-header,
    body.mh-shell-ready.ff-side-mini .filters-card,
    body.mh-shell-ready.ff-side-mini .order-modes,
    body.mh-shell-ready.ff-side-mini .order-actions,
    body.mh-shell-ready.ff-side-mini .selected-count,
    body.mh-shell-ready.ff-side-mini .orders-table-card{

        margin-left:0 !important;
        margin-right:0 !important;

        transform:none !important;

        width:100% !important;
        max-width:100% !important;
    }
}

/* =========================================================
   FIX FINAL — MOBILE CONTROLADO PELO MH-SHELL
   ========================================================= */
@media screen and (max-width:800px){

    body.mh-shell-ready main,
    body.mh-shell-ready main.col-md-10,
    body.mh-shell-ready.ff-side-mini main,
    body.mh-shell-ready.ff-side-mini main.col-md-10{
        margin-left:0 !important;
        margin-right:0 !important;
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
        box-sizing:border-box !important;
    }
}