/* ==========================================================================
   VOX Agri — CSS Responsivo Compartilhado
   Regras mobile-first para adaptar o sistema a telas pequenas.
   Breakpoints alinhados com Bootstrap 5: sm < 576px, md < 768px, lg < 992px
   ========================================================================== */

/* --------------- Touch Targets --------------- */
@media (max-width: 767.98px) {
    /* Botões de ação em tabelas — mínimo 44px para toque (WCAG 2.5.5) */
    .table .btn-sm,
    .table .btn-group .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
    }

    /* Links de ação */
    .table a.btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* --------------- Tabelas Responsivas --------------- */
/* Colunas que devem ser ocultas em telas pequenas */
@media (max-width: 767.98px) {
    .d-mobile-none {
        display: none !important;
    }
}

/* --------------- Formulários --------------- */
@media (max-width: 767.98px) {
    /* Labels com tamanho legível */
    .form-label,
    label {
        font-size: 0.9rem;
    }

    /* Inputs com altura adequada para toque */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* --------------- Paginação --------------- */
@media (max-width: 767.98px) {
    /* Centralizar paginação no mobile */
    .pagination {
        justify-content: center;
    }

    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
    }

    /* Items por página - esconder texto, manter dropdown */
    .pagination-info .d-flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* --------------- Cards e Listas --------------- */
@media (max-width: 767.98px) {
    /* Cards com menos padding no mobile */
    .card-body {
        padding: 0.75rem;
    }

    /* Títulos de card menores */
    .card-title {
        font-size: 1rem;
    }
}

/* --------------- Dropdowns Custom --------------- */
@media (max-width: 767.98px) {
    .custom-dropdown-menu {
        max-width: calc(100vw - 2rem);
    }
}

/* --------------- Controles de Mapa Leaflet --------------- */
@media (max-width: 767.98px) {
    /* Botões de zoom maiores para toque */
    .leaflet-control-zoom a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 18px !important;
    }

    /* Controles com mais espaçamento */
    .leaflet-top.leaflet-left {
        top: 10px;
        left: 10px;
    }
}

/* --------------- Modais --------------- */
@media (max-width: 575.98px) {
    /* Modais full-width no mobile */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-body {
        padding: 0.75rem 1rem;
    }

    .modal-footer {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* --------------- Cabeçalho de Páginas --------------- */
@media (max-width: 767.98px) {
    /* Título + botões em coluna no mobile */
    .page-header .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .page-header .d-flex .btn,
    .page-header .d-flex .btn-group {
        width: 100%;
    }
}

/* --------------- Breadcrumbs --------------- */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.85rem;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.3rem;
    }
}

/* --------------- Filtros em Listas --------------- */
@media (max-width: 767.98px) {
    /* Filtros empilhados */
    .filter-form .row > [class*="col-md"] {
        margin-bottom: 0.5rem;
    }
}

/* =========================================================================
   BARRA DE AÇÕES STICKY — Responsividade
   ========================================================================= */

/* Tablet: rótulos hidden, só ícones */
@media (max-width: 991px) {
    .barra-acoes-sticky {
        left: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .barra-acoes-sticky {
        padding: 8px 12px;
        gap: 8px;
    }

    .btn-acao-barra .acao-rotulo {
        display: none;
    }

    .btn-acao-barra {
        min-width: 40px;
        padding: 6px 8px;
    }

    .btn-progresso {
        font-size: 13px;
        padding: 0 14px;
        height: 38px;
    }

    .secao-resumo {
        max-width: 200px;
    }
}

/* Mobile: Cancelar vira ícone, gap mínimo */
@media (max-width: 575.98px) {
    .barra-acoes-sticky {
        padding: 8px 10px;
        gap: 6px;
        border-radius: 12px 12px 0 0;
    }

    .btn-cancelar-barra .cancelar-texto {
        display: none;
    }

    .btn-cancelar-barra {
        padding: 8px 10px;
    }

    .btn-progresso {
        font-size: 12px;
        padding: 0 10px;
        height: 36px;
        flex: 2 1 0;
    }

    .secao-resumo {
        max-width: 140px;
        font-size: 11px;
    }

    /* Wizard: step labels hidden, only numbers */
    .wizard-step .step-label {
        display: none;
    }

    .wizard-step-separator {
        width: 24px;
    }
}