/**
 * CMssOrçamentos — Responsividade global (ERP)
 * Media queries e comportamentos por breakpoint.
 * Depende de design-system.css
 */

/* ==========================================================================
   Containers por breakpoint
   ========================================================================== */

@media (min-width: 576px) {
    :root {
        --erp-container-gutter: var(--erp-container-gutter-md);
    }
}

@media (min-width: 992px) {
    :root {
        --erp-container-gutter: var(--erp-container-gutter-lg);
    }

    .erp-container,
    .main-content > .container:not(.erp-container--fluid):not(.erp-container--narrow):not(.erp-container--wide) {
        max-width: min(100%, var(--erp-container-max-xl));
    }
}

@media (min-width: 1200px) {
    .erp-container,
    .main-content > .container:not(.erp-container--fluid):not(.erp-container--narrow):not(.erp-container--wide) {
        max-width: min(100%, var(--erp-container-max-2xl));
    }
}

@media (min-width: 1400px) {
    .erp-container--wide,
    .main-content > .container.erp-container--wide {
        max-width: min(100%, var(--erp-container-max-wide)) !important;
    }
}

/* ==========================================================================
   Main content
   ========================================================================== */

@media (max-width: 767.98px) {
    .main-content {
        padding: var(--erp-space-4) 0;
    }

    .main-content .mb-4:has(.breadcrumb) {
        margin-bottom: var(--erp-space-4) !important;
    }

    .main-content h2.mb-0 {
        font-size: var(--erp-font-size-xl);
    }

    .breadcrumb-custom {
        margin-bottom: var(--erp-space-3) !important;
        font-size: var(--erp-font-size-sm);
    }
}

/* ==========================================================================
   Page header
   ========================================================================== */

@media (max-width: 575.98px) {
    .erp-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-page-header--with-filters {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .erp-page-header--with-filters .erp-page-header__title,
    .erp-page-header--with-filters .erp-page-header__filters,
    .erp-page-header--with-filters .erp-page-header__actions {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
    }

    .erp-page-header--with-filters .erp-page-header__filters {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .erp-page-header--with-filters .erp-inline-field {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-page-header--with-filters .erp-inline-field__control,
    .erp-page-header--with-filters .erp-inline-field__control--wide {
        width: 100%;
        max-width: none;
    }

    .erp-search-live,
    .erp-search-live__input {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .erp-page-header__actions {
        width: 100%;
    }

    .erp-page-header__actions .btn,
    .erp-page-header__actions .btn-group {
        flex: 1 1 auto;
    }

    .erp-page-header__actions .btn-group .dropdown-toggle {
        width: 100%;
    }
}

/* ==========================================================================
   Tabelas — scroll horizontal
   ========================================================================== */

/*
 * Regra: ativar scroll quando min-width da tabela > largura do painel.
 * Use erp-data-table--min-* no <table> conforme número de colunas.
 * Painel: .erp-table-panel > .erp-table-panel__scroll > table
 */

.erp-table-panel__scroll {
    scrollbar-gutter: stable;
}

@supports (overflow-x: auto) {
    .erp-table-panel.is-scrollable .erp-table-panel__scroll {
        cursor: grab;
    }
}

.erp-table-panel__scroll::-webkit-scrollbar {
    height: 8px;
}

.erp-table-panel__scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.erp-table-panel__scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}

/* Mobile: fonte ligeiramente menor, mantém legibilidade */
@media (max-width: 767.98px) {
    .table.erp-data-table {
        font-size: var(--erp-font-size-xs);
    }

    .table.erp-data-table > :not(caption) > * > * {
        padding: 0.4rem 0.5rem;
    }

    /* Colunas de ação: ícones sem esmagar */
    .erp-col--actions-md {
        min-width: var(--erp-col-actions-sm);
    }
}

/* Tablet: hint de scroll mais visível */
@media (max-width: 991.98px) {
    .erp-table-panel.is-scrollable .erp-table-panel__hint::before {
        content: '← ';
    }

    .erp-table-panel.is-scrollable .erp-table-panel__hint::after {
        content: ' →';
    }
}

/* ==========================================================================
   Cards e dashboard
   ========================================================================== */

@media (max-width: 767.98px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--erp-space-4);
    }

    .erp-card__header,
    .erp-card__body,
    .erp-card__footer {
        padding: var(--erp-space-4);
    }

    .welcome-section {
        padding: var(--erp-space-6) var(--erp-space-4);
    }
}

/* ==========================================================================
   Formulários
   ========================================================================== */

@media (max-width: 575.98px) {
    .erp-form-grid > [class*="erp-field"] {
        grid-column: span 12 !important;
    }

    /* Filtros em cards: empilhar */
    .erp-card--filter .row > [class*="col-"] {
        margin-bottom: var(--erp-space-2);
    }

    .input-group {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Modais
   ========================================================================== */

@media (max-width: 575.98px) {
    .modal.erp-modal .modal-dialog,
    .modal.modal-fullscreen-sm-down .modal-dialog,
    .modal-proposta-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
    }

    .modal.erp-modal .modal-content,
    .modal-proposta-dialog .modal-content {
        min-height: 100dvh;
        border-radius: 0;
    }

    .modal.erp-modal .modal-header,
    .modal.erp-modal .modal-body,
    .modal.erp-modal .modal-footer {
        padding-left: var(--erp-space-4);
        padding-right: var(--erp-space-4);
    }

    .modal-footer.flex-wrap {
        flex-direction: column-reverse;
        align-items: stretch !important;
    }

    .modal-footer .btn,
    .modal-footer .btn-group {
        width: 100%;
    }

    .modal-footer .btn-group .dropdown-toggle {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .modal.erp-modal--xl .modal-dialog,
    .modal-xl {
        max-width: min(94vw, var(--erp-modal-max-width-xl));
    }

    .modal-lista-bom-dialog .modal-dialog,
    .modal-resumo-desenho-dialog .modal-dialog {
        max-width: min(96vw, 900px);
    }
}

/* ==========================================================================
   Header (reforço mobile — complementa style.css)
   ========================================================================== */

@media (max-width: 991.98px) {
    :root {
        --nav-drawer-top: var(--erp-header-height, 56px);
    }

    .header-toolbar {
        min-height: var(--erp-header-height);
    }
}

@media (max-width: 575.98px) {
    .header-actions .btn-voltar span,
    .header-actions .btn-voltar .bi + span {
        /* mantém só ícone se necessário — opcional */
    }

    .btn-voltar .bi {
        margin: 0;
    }
}

/* ==========================================================================
   Sidebar / nav drawer — já em style.css; reforços de toque
   ========================================================================== */

@media (max-width: 991.98px) {
    .site-main-nav a:not(.dropdown-item) {
        min-height: 44px;
    }

    .site-main-nav .dropdown-item {
        min-height: 44px;
    }
}

/* ==========================================================================
   Utilitários responsivos
   ========================================================================== */

.erp-hide-mobile {
    display: revert;
}

.erp-show-mobile {
    display: none !important;
}

@media (max-width: 767.98px) {
    .erp-hide-mobile {
        display: none !important;
    }

    .erp-show-mobile {
        display: revert !important;
    }

    .erp-show-mobile-block {
        display: block !important;
    }

    .erp-text-truncate-mobile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}

/* Stack vertical de botões em toolbars estreitas */
@media (max-width: 575.98px) {
    .erp-btn-group-responsive {
        flex-direction: column;
        width: 100%;
    }

    .erp-btn-group-responsive > .btn,
    .erp-btn-group-responsive > .btn-group {
        width: 100%;
    }
}

/* ==========================================================================
   Preferências de acessibilidade
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .erp-card,
    .erp-btn,
    .table.erp-data-table tbody tr {
        transition: none !important;
    }
}