/* ==========================================================
   Venda - Responsivo para mobile
   Escopo: somente na tela com ng-controller="vendaController"
   ========================================================== */

@media (max-width: 767px) {

    /* ---------- Base / Segurança ---------- */
    section[ng-controller="vendaController"] {
        overflow-x: hidden;
    }

        section[ng-controller="vendaController"] .row {
            margin-left: 0;
            margin-right: 0;
        }

        section[ng-controller="vendaController"] [class*="col-"] {
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 12px;
        }

        /* ---------- Header (Nova Venda + botões) ---------- */
        section[ng-controller="vendaController"] .header-fixed {
            position: sticky;
            top: 56px; /* ajuste p/ 48 ou 64 se necessário */
            z-index: 1030;
            background: #fff;
            padding: 10px 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
        }

            section[ng-controller="vendaController"] .header-fixed h1 {
                margin: 0 0 10px 0;
                font-size: 18px;
                line-height: 1.2;
                white-space: normal;
            }

            section[ng-controller="vendaController"] .header-fixed .filters {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 0;
                padding: 0;
                list-style: none;
                justify-content: flex-start;
            }

                section[ng-controller="vendaController"] .header-fixed .filters .btn {
                    min-height: 36px;
                    padding: 8px 10px;
                    white-space: nowrap;
                }

        /* ---------- Painéis ---------- */
        section[ng-controller="vendaController"] .panel-heading,
        section[ng-controller="vendaController"] .panel-body {
            padding-left: 12px;
            padding-right: 12px;
        }

        /* ---------- Padrão de formulário (tudo igual) ---------- */
        section[ng-controller="vendaController"] label {
            display: block;
            width: 100%;
            margin: 0 0 6px 0;
            line-height: 1.2;
            white-space: normal;
            word-break: break-word;
        }

        section[ng-controller="vendaController"] .form-group {
            margin-bottom: 12px;
        }

        section[ng-controller="vendaController"] input.form-control,
        section[ng-controller="vendaController"] select.form-control,
        section[ng-controller="vendaController"] textarea.form-control {
            display: block;
            width: 100%;
            max-width: 100%;
        }

        section[ng-controller="vendaController"] .form-control {
            height: 40px;
        }

        section[ng-controller="vendaController"] textarea.form-control {
            height: auto;
            min-height: 90px;
        }

        /* Força 1 campo por linha no mobile (padrão único) */
        section[ng-controller="vendaController"] .panel-body .row.form-group > [class*="col-"] {
            float: none;
            width: 100%;
        }

        /* Angular Material switch alinhado */
        section[ng-controller="vendaController"] md-switch {
            margin: 6px 0 0 0;
            display: inline-flex;
            align-items: center;
        }

        /* Corrige estilos inline problemáticos da Receita */
        section[ng-controller="vendaController"] [style*="margin-left:-15px"],
        section[ng-controller="vendaController"] [style*="margin-left:-25px"] {
            margin-left: 0 !important;
        }

        section[ng-controller="vendaController"] [style*="height: 152px"] {
            height: auto !important;
        }

        /* ---------- Menu “...” do Cliente (width:200px) ---------- */
        section[ng-controller="vendaController"] .panel-body {
            position: relative;
        }

            section[ng-controller="vendaController"] .panel-body > ul.filters[style*="width:200px"] {
                width: auto !important;
                position: absolute !important;
                top: 8px;
                right: 8px;
                margin: 0 !important;
                z-index: 5;
            }

                section[ng-controller="vendaController"] .panel-body > ul.filters[style*="width:200px"] + .row.form-group {
                    padding-right: 64px;
                }

        /* ---------- Tabelas (Receita etc.) ---------- */
        section[ng-controller="vendaController"] table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

            section[ng-controller="vendaController"] table[style*="width:25%"] {
                width: 100% !important;
            }

        /* ---------- Itens (card no mobile) ---------- */
        section[ng-controller="vendaController"] .row.bottom-bordered {
            display: none; /* some o cabeçalho desktop */
        }

        section[ng-controller="vendaController"] ul.list.list-striped > li.row.list-item-unbordered.list-item-striped {
            display: block;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin: 0 0 12px 0;
            background: #fff;
        }

            section[ng-controller="vendaController"] ul.list.list-striped > li.row.list-item-unbordered.list-item-striped > [class*="col-"] {
                float: none;
                width: 100%;
                margin-bottom: 10px;
            }

            /* ações (ícones) em linha e tocáveis */
            section[ng-controller="vendaController"]
            ul.list.list-striped > li.row.list-item-unbordered.list-item-striped
            .col-sm-2.text-center .text-center {
                display: flex;
                gap: 14px;
                justify-content: flex-start;
                align-items: center;
            }

                section[ng-controller="vendaController"]
                ul.list.list-striped > li.row.list-item-unbordered.list-item-striped
                .col-sm-2.text-center .text-center > [class*="col-"] {
                    width: auto !important;
                    padding: 0 !important;
                    margin: 0 !important;
                }

            section[ng-controller="vendaController"]
            ul.list.list-striped > li.row.list-item-unbordered.list-item-striped i.glyphicon {
                font-size: 20px;
                padding: 8px;
            }

        /* Linha “Adicionar item” vira bloco */
        section[ng-controller="vendaController"] .row.form-group.background-silver {
            display: block;
            padding: 10px;
            border-radius: 10px;
        }

            section[ng-controller="vendaController"] .row.form-group.background-silver button.btn-primary {
                width: 100%;
            }

        /* ---------- Modais ---------- */
        section[ng-controller="vendaController"] .modal-dialog.modal-lg {
            width: calc(100% - 16px) !important;
            margin: 8px auto !important;
        }
}

@media (max-width: 767px) {

    /* pega as linhas que têm os totais (são .col-sm-12 repetidos) */
    section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

        /* dentro dessas linhas, as colunas ficam empilhadas */
        section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 > [class*="col-"] {
            float: none !important;
            width: 100% !important;
            margin: 0 0 10px 0 !important;
            padding-left: 8px !important;
            padding-right: 8px !important;
            text-align: left !important;
        }

        /* o texto (Subtotal:, Desconto:, etc.) vira “label” visual */
        section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 strong {
            display: block;
            margin: 0 0 6px 0;
            font-weight: 600;
        }

        /* valores em span ficam alinhados como campo */
        section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 .preco-item {
            display: block;
            width: 100%;
            text-align: left;
        }

        /* inputs de totais ocupam 100% */
        section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 input.form-control {
            width: 100% !important;
        }

        /* quando tiver colunas vazias (ex.: col-sm-7 “em branco”), remove espaço */
        section[ng-controller="vendaController"] .panel-body .col-sm-12.col-md-12.col-lg-12 .col-sm-7 {
            display: none !important;
        }
}


/* =========================
   FIX header - força layout estável no mobile
   ========================= */
@media (max-width: 767px) {

    /* header precisa “conter” tudo */
    section[ng-controller="vendaController"] .header-fixed {
        position: sticky !important;
        top: 64px !important; /* ajuste depois */
        z-index: 1030;
        background: #fff !important;
        padding: 12px !important;
        display: block !important;
        overflow: hidden !important; /* corta qualquer filho escapando */
    }

        /* titulo ok */
        section[ng-controller="vendaController"] .header-fixed h1 {
            margin: 0 0 10px 0 !important;
            font-size: 18px !important;
            line-height: 1.2 !important;
        }

        /* AQUI é o principal:
     força a UL a virar “grid” e remove qualquer estilo global */
        section[ng-controller="vendaController"] .header-fixed ul.filters {
            display: grid !important;
            grid-template-columns: 44px 1fr !important;
            gap: 10px !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
            position: static !important;
            float: none !important;
            clear: both !important;
        }

            /* remove QUALQUER posicionamento herdado nos LI e A/BUTTON */
            section[ng-controller="vendaController"] .header-fixed ul.filters > li {
                position: static !important;
                float: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

                section[ng-controller="vendaController"] .header-fixed ul.filters > li * {
                    position: static !important;
                    float: none !important;
                }

            /* botão voltar */
            section[ng-controller="vendaController"] .header-fixed ul.filters .btn.btn-default {
                width: 44px !important;
                height: 40px !important;
                padding: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* botão nova venda */
            section[ng-controller="vendaController"] .header-fixed ul.filters .btn.btn-primary {
                width: 100% !important;
                height: 40px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 12px !important;
            }

    /* garante que o conteúdo não “encoste” no header */
    section[ng-controller="vendaController"] form {
        padding-top: 8px !important;
    }
}


@media (max-width: 767px) {

    /* 1) desliga sticky/fixed do header da venda (rola normal) */
    section[ng-controller="vendaController"] .header-fixed {
        position: static !important;
        top: auto !important;
    }

    /* 2) cria “área segura” no TOPO da página inteira
        (isso empurra o header Nova Venda + tudo pra baixo do header preto) */
    section[ng-controller="vendaController"] {
        padding-top: 60px; /* ajuste: 64 / 72 / 80 / 96 */
    }
}

/* ==========================================================
   Venda (LISTA) - Mobile only
   Escopo: tela que tem h1 "Venda de Produtos"
   ========================================================== */
@media (max-width: 767px) {

    /* âncora da tela (não afeta a outra, porque exige o h1 específico) */
    section[ng-controller="vendaController"]:has(header.header-fixed > h1) {
        overflow-x: hidden;
    }

    /* aplica só quando o header desta tela é "Venda de Produtos" */
    section[ng-controller="vendaController"]:has(header.header-fixed > h1) {
        /* espaço para o header global fixo (preto) */
        padding-top: 80px; /* ajuste: 64/72/80/96 */
    }

        /* header da tela (rola normal, sem sticky) */
        section[ng-controller="vendaController"]:has(header.header-fixed > h1)
        header.header-fixed {
            position: static !important;
            top: auto !important;
            background: #fff;
            padding: 12px;
            margin-bottom: 12px;
        }

            /* título + botões */
            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            header.header-fixed h1 {
                margin: 0 0 10px 0;
                font-size: 18px;
                line-height: 1.2;
            }

            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            header.header-fixed ul.filters {
                display: grid;
                grid-template-columns: 44px 1fr;
                gap: 10px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

                section[ng-controller="vendaController"]:has(header.header-fixed > h1)
                header.header-fixed ul.filters > li {
                    margin: 0;
                    padding: 0;
                }

            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            header.header-fixed .btn.btn-default {
                width: 44px;
                height: 40px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            header.header-fixed .btn.btn-primary {
                width: 100%;
                height: 40px;
                padding: 0 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

        /* ---------- Form padrão mobile (Filtros) ---------- */
        section[ng-controller="vendaController"]:has(header.header-fixed > h1) .row {
            margin-left: 0;
            margin-right: 0;
        }

        section[ng-controller="vendaController"]:has(header.header-fixed > h1) [class*="col-"] {
            float: none !important;
            width: 100% !important;
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 12px;
        }

        section[ng-controller="vendaController"]:has(header.header-fixed > h1) label {
            display: block;
            width: 100%;
            margin: 0 0 6px 0;
        }

        section[ng-controller="vendaController"]:has(header.header-fixed > h1) .form-control {
            width: 100%;
            height: 40px;
        }

        /* ---------- Lista de vendas: vira card no mobile ---------- */
        section[ng-controller="vendaController"]:has(header.header-fixed > h1)
        ul.list.list-bordered.list-priority > li.row.list-item {
            display: block;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin: 0 8px 12px 8px;
            background: #fff;
        }

            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            ul.list.list-bordered.list-priority > li.row.list-item > [class*="col-"] {
                width: 100% !important;
                padding-left: 0;
                padding-right: 0;
                margin-bottom: 10px;
            }

            /* botão +/− fica alinhado */
            section[ng-controller="vendaController"]:has(header.header-fixed > h1)
            ul.list.list-bordered.list-priority > li.row.list-item .col-sm-1.text-center {
                text-align: left !important;
            }

        /* dropdown "Opções" não estourar */
        section[ng-controller="vendaController"]:has(header.header-fixed > h1)
        .dropdown.options {
            text-align: left !important;
        }
}

@media (max-width: 767px) {

    /* pega só o SECTION da lista (tem o voltar pro dashboard no header) */
    section[ng-controller="vendaController"] header.header-fixed
    a[ui-sref*="area:'dashboard'"] {
    }

    /* 1) empurra a página inteira pra baixo do header global fixo */
    section[ng-controller="vendaController"] header.header-fixed
    a[ui-sref*="area:'dashboard'"] {
    }

    /* sobe para o section via seletor "encadeado" (css puro) */
    section[ng-controller="vendaController"] {
        padding-top: 80px; /* ajuste 72/80/96 */
    }

        /* 2) header rola normal */
        section[ng-controller="vendaController"] header.header-fixed {
            position: static !important;
            top: auto !important;
            background: #fff;
            padding: 12px;
            margin-bottom: 12px;
        }

            /* 3) titulo */
            section[ng-controller="vendaController"] header.header-fixed h1 {
                margin: 0 0 10px 0;
                font-size: 18px;
                line-height: 1.2;
            }

            /* 4) botões do topo em grid */
            section[ng-controller="vendaController"] header.header-fixed ul.filters {
                display: grid;
                grid-template-columns: 44px 1fr;
                gap: 10px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

                section[ng-controller="vendaController"] header.header-fixed ul.filters > li {
                    margin: 0;
                    padding: 0;
                }

            section[ng-controller="vendaController"] header.header-fixed .btn.btn-default {
                width: 44px;
                height: 40px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            section[ng-controller="vendaController"] header.header-fixed .btn.btn-primary {
                width: 100%;
                height: 40px;
                padding: 0 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

        /* 5) Filtros: 1 campo por linha no mobile */
        section[ng-controller="vendaController"] .row {
            margin-left: 0;
            margin-right: 0;
        }

        section[ng-controller="vendaController"] .box.box-border [class*="col-"] {
            float: none !important;
            width: 100% !important;
            padding-left: 8px;
            padding-right: 8px;
            margin-bottom: 12px;
        }

        section[ng-controller="vendaController"] .box.box-border label {
            display: block;
            margin: 0 0 6px 0;
        }

        section[ng-controller="vendaController"] .box.box-border .form-control {
            width: 100%;
            height: 40px;
        }

        /* 6) "Nenhum registro encontrado" + botões: empilha e ocupa largura */
        section[ng-controller="vendaController"] .no-results {
            margin: 0 8px 12px 8px;
            padding: 10px;
        }

            section[ng-controller="vendaController"] .no-results .btn {
                display: block;
                width: 100%;
                margin: 8px 0 0 0 !important;
            }

        /* 7) Lista vira card */
        section[ng-controller="vendaController"] ul.list.list-bordered.list-priority > li.row.list-item {
            display: block;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin: 0 8px 12px 8px;
            background: #fff;
        }

            section[ng-controller="vendaController"] ul.list.list-bordered.list-priority > li.row.list-item > [class*="col-"] {
                float: none !important;
                width: 100% !important;
                padding: 0 !important;
                margin-bottom: 10px;
            }

        section[ng-controller="vendaController"] .dropdown.options {
            text-align: left !important;
        }
}

@media (max-width: 767px) {

    /* bloco de mensagem */
    section[ng-controller="vendaController"] .no-results {
        margin: 0 12px 12px 12px !important;
        padding: 12px !important;
        border-radius: 10px;
        text-align: left !important;
    }

        /* remove “caixa” interna se existir */
        section[ng-controller="vendaController"] .no-results > strong,
        section[ng-controller="vendaController"] .no-results {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

    /* texto sempre em bloco, sem quebrar estranho */
    section[ng-controller="vendaController"] .no-results {
        display: block;
        line-height: 1.3;
    }

        /* botões dentro do no-results: padrão full-width */
        section[ng-controller="vendaController"] .no-results .btn {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 100% !important;
            margin: 10px 0 0 0 !important;
            height: 44px;
            padding: 0 12px !important;
        }

        /* se o tema tiver classes que mexem na margem (pad-left-5), neutraliza no mobile */
        section[ng-controller="vendaController"] .no-results .pad-left-5 {
            padding-left: 0 !important;
        }
}

@media (max-width: 767px) {

    /* cada venda (card) */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item {
        position: relative;
        overflow: hidden; /* impede sobreposição por floats */
    }

        /* mata floats do bootstrap dentro do card */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item > [class*="col-"] {
            float: none !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* coluna do botão (+/-) vira “linha” no topo */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .col-sm-1.text-center {
            text-align: left !important;
            margin-bottom: 10px;
        }

        /* botão + / - fica com tamanho bom e não “flutua” */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .col-sm-1 .btn {
            width: 44px;
            height: 44px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* reduz “bagunça” dos blocos internos (dl e ul) */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item dl,
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item ul {
            margin-bottom: 10px;
        }

        /* dropdown Opções: fixa no final do card, alinhado, sem invadir texto */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options {
            float: none !important;
            width: 100%;
            text-align: left !important;
            margin-top: 8px;
        }

            /* link "Opções" não quebrar feio */
            section[ng-controller="vendaController"]
            ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options > a {
                display: inline-block;
                padding: 8px 0;
            }

        /* evita que o menu dropdown “saia” pra fora no mobile */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .dropdown-menu {
            left: 0 !important;
            right: auto !important;
        }
}

@media (max-width: 767px) {

    /* garante que nada no card use position absoluta herdada */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options {
        position: static !important;
        clear: both !important;
        display: block !important;
    }

    /* cria espaço e impede o "Opções" de invadir o texto */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options {
        margin-top: 12px !important;
        padding-top: 8px;
        border-top: 1px solid #eee;
    }

    /* deixa o conteúdo em cima sempre “limpo” */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item dl.list-feature {
        display: block !important;
        clear: both !important;
        margin: 10px 0 0 0 !important;
    }

        /* dt/dd em coluna (padrão mobile) */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item dl.list-feature dt,
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item dl.list-feature dd {
            float: none !important;
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
        }

        /* espaçamento bonito entre pares dt/dd */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item dl.list-feature dt {
            font-weight: 600;
            margin-top: 8px !important;
        }

        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item dl.list-feature dd {
            margin-top: 2px !important;
        }

    /* se existir algum estilo de “coluna” nos list-feature do tema, neutraliza */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item .list-feature {
        column-count: 1 !important;
    }
}

@media (max-width: 767px) {

    /* o container do dropdown precisa ser referência */
    section[ng-controller="vendaController"]
    ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options {
        position: relative !important;
        overflow: visible !important; /* não corta o menu */
    }

        /* quando abrir, em vez de absoluto flutuando, vira "inline" (empurra) */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options.open > .dropdown-menu {
            position: static !important;
            float: none !important;
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
            margin-top: 8px !important;
            /* visual */
            border-radius: 10px;
        }

        /* garante que o link/trigger fique alinhado */
        section[ng-controller="vendaController"]
        ul.list.list-bordered.list-priority > li.row.list-item .dropdown.options > a.dropdown-toggle {
            display: inline-block;
            padding: 8px 0;
        }
}

/* =========================================================
   VENDA - VOLUMES: "-" esquerda | campo no meio | "+" direita
   (MOBILE ONLY / bem escopado)
   ========================================================= */
@media (max-width: 767px) {

    /* pega o bloco de volumes (normalmente é uma lista com ng-repeat de vendaVolumes) */
    section[ng-controller="vendaController"] ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] {
        overflow: visible !important;
    }

        /* a “linha” que contém os botões e o input:
     normalmente são colunas do bootstrap na mesma row do item */
        section[ng-controller="vendaController"]
        ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] > [class*="col-"] {
            float: none !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* agora: a row interna que tem os campos do volume vira flex
     (isso faz parar de empilhar o - e +) */
        section[ng-controller="vendaController"]
        ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

            /* colunas dentro dessa row */
            section[ng-controller="vendaController"]
            ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group > [class*="col-"] {
                float: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }

                /* col do botão (-) e col do botão (+) ficam fixas */
                section[ng-controller="vendaController"]
                ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group > [class*="col-"]:first-child,
                section[ng-controller="vendaController"]
                ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group > [class*="col-"]:last-child {
                    flex: 0 0 44px !important;
                    width: 44px !important;
                    max-width: 44px !important;
                }

                /* col do meio (input) expande */
                section[ng-controller="vendaController"]
                ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group > [class*="col-"]:not(:first-child):not(:last-child) {
                    flex: 1 1 auto !important;
                    min-width: 0 !important;
                }

            /* botões quadradinhos, centralizados */
            section[ng-controller="vendaController"]
            ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group .btn {
                width: 44px !important;
                height: 40px !important;
                padding: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            /* input ocupa tudo do meio */
            section[ng-controller="vendaController"]
            ul.list.list-striped li.row[ng-repeat*="venda.vendaVolumes"] .row.form-group .form-control {
                width: 100% !important;
                max-width: 100% !important;
            }
}

/* =========================================================
   VENDA - dropdown “...” e modais no mobile (não serem cortados)
   ========================================================= */
@media (max-width: 767px) {

    /* deixa o menu do dropdown aparecer (não ser cortado pelo panel/row) */
    section[ng-controller="vendaController"] .panel,
    section[ng-controller="vendaController"] .panel-body,
    section[ng-controller="vendaController"] .box,
    section[ng-controller="vendaController"] .row {
        overflow: visible !important;
    }

    /* garante que o dropdown fique acima */
    section[ng-controller="vendaController"] .dropdown-menu {
        z-index: 2000 !important;
    }

    /* garante que modal/backdrop fiquem acima do header do sistema */
    .modal {
        z-index: 2050 !important;
    }

    .modal-backdrop {
        z-index: 2040 !important;
    }
}