/*
 * FULL_EXATA_UI_STANDARD_V1 — base compartilhada (D-UI-01).
 *
 * Esta folha complementa Bootstrap e shell.css sem substituir componentes
 * específicos de domínio. Telas migradas usam as classes fx-page-*,
 * fx-search-*, fx-filter-*, fx-field-* e fx-table-* abaixo.
 */

:root {
    --fx-font-size-xs: .75rem;
    --fx-font-size-sm: .875rem;
    --fx-font-size-md: 1rem;
    --fx-font-size-lg: 1.25rem;
    --fx-font-size-xl: 1.5rem;
    --fx-font-weight-medium: 500;
    --fx-font-weight-semibold: 600;
    --fx-font-weight-bold: 700;
    --fx-space-1: .25rem;
    --fx-space-2: .5rem;
    --fx-space-3: .75rem;
    --fx-space-4: 1rem;
    --fx-space-5: 1.5rem;
    --fx-space-6: 2rem;
    --fx-space-7: 3rem;
    --fx-control-height-sm: 34px;
    --fx-control-height: 38px;
    --fx-control-height-lg: 44px;
    --fx-control-radius: .375rem;
    --fx-panel-radius: .5rem;
    --fx-modal-radius: .625rem;
    --fx-border-color: #dee2e6;
    --fx-panel-border: 1px solid var(--fx-border-color);
    --fx-text-primary: #212529;
    --fx-text-muted: #6c757d;
    --fx-action-primary: var(--fx-azul, #0056b3);
    --fx-action-secondary: #6c757d;
    --fx-status-success: #198754;
    --fx-status-warning: #ffc107;
    --fx-status-danger: #dc3545;
    --fx-status-info: #0dcaf0;
    --fx-status-neutral: #6c757d;
    --fx-panel-bg: #fff;
    --fx-panel-shadow: 0 .125rem .35rem rgba(0, 0, 0, .06);
    --fx-panel-shadow-raised: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
    --fx-focus-ring: 0 0 0 .2rem color-mix(in srgb, var(--fx-action-primary) 24%, transparent);
}

/* Contenção estrutural: conteúdo largo rola dentro do componente, nunca no body. */
.main-container,
.main-content,
#conteudo-modulo {
    min-width: 0;
    max-width: 100%;
}

.main-content > * {
    min-width: 0;
    max-width: 100%;
}

.fx-page-shell {
    display: flex;
    flex-direction: column;
    gap: var(--fx-space-4);
    min-width: 0;
}

.fx-page-header,
.fx-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fx-space-3) var(--fx-space-4);
    min-width: 0;
}

/*
 * D-UI-01: composição oficial do painel operacional homologada em Produtos.
 * A busca ocupa o espaço disponível; filtros, Mais ações e demais comandos
 * permanecem agrupados e alinhados no lado direito.
 */
.fx-operation-toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: center;
    gap: var(--fx-space-3);
}

.fx-operation-search,
.fx-operation-search .fx-search-bar {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.fx-operation-commands {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fx-space-2);
    min-width: 0;
}

.fx-operation-toolbar-actions-only {
    grid-template-columns: minmax(0, 1fr);
}

.fx-operation-toolbar-actions-only .fx-operation-commands {
    justify-content: flex-end;
}

.fx-page-heading {
    min-width: 0;
}

.fx-page-title {
    margin: 0;
    color: var(--fx-text-primary);
    font-size: var(--fx-font-size-xl);
    font-weight: 700;
    line-height: 1.2;
}

.fx-page-description {
    margin: var(--fx-space-1) 0 0;
    color: var(--fx-text-muted);
    font-size: var(--fx-font-size-sm);
}

.fx-page-heading-icon {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: var(--fx-panel-radius);
    background: color-mix(in srgb, var(--fx-action-primary) 12%, #fff);
    color: var(--fx-action-primary);
    font-size: 1.125rem;
}

.fx-page-heading-row {
    display: flex;
    align-items: center;
    gap: var(--fx-space-3);
    min-width: 0;
}

.fx-page-actions,
.fx-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--fx-space-2);
}

.fx-btn-primary,
.fx-btn-secondary,
.fx-btn-danger,
.fx-btn-warning {
    min-height: var(--fx-control-height);
    border-radius: var(--fx-control-radius);
    font-weight: var(--fx-font-weight-semibold);
}

.fx-btn-primary {
    border-color: var(--fx-action-primary);
    background: var(--fx-action-primary);
    color: #fff;
}

.fx-btn-primary:hover,
.fx-btn-primary:focus-visible {
    border-color: color-mix(in srgb, var(--fx-action-primary) 82%, #000);
    background: color-mix(in srgb, var(--fx-action-primary) 82%, #000);
    color: #fff;
}

.fx-btn-secondary {
    border-color: var(--fx-border-color);
    background: #fff;
    color: var(--fx-text-primary);
}

.fx-btn-secondary:hover,
.fx-btn-secondary:focus-visible {
    border-color: #adb5bd;
    background: #f1f3f5;
    color: var(--fx-text-primary);
}

.fx-btn-danger {
    border-color: var(--fx-status-danger);
    background: var(--fx-status-danger);
    color: #fff;
}

.fx-btn-warning {
    border-color: var(--fx-status-warning);
    background: var(--fx-status-warning);
    color: #212529;
}

.fx-btn-primary:focus-visible,
.fx-btn-secondary:focus-visible,
.fx-btn-danger:focus-visible,
.fx-btn-warning:focus-visible,
.fx-page-shell :is(a, button, input, select, textarea):focus-visible {
    outline: 0;
    box-shadow: var(--fx-focus-ring);
}

.fx-search-bar {
    width: min(100%, 34rem);
    min-width: min(100%, 280px);
}

.fx-search-bar .form-control,
.fx-search-bar .btn,
.fx-filter-panel .form-control,
.fx-filter-panel .form-select {
    min-height: var(--fx-control-height);
}

.fx-filter-panel,
.fx-content-panel {
    min-width: 0;
    border: var(--fx-panel-border);
    border-radius: var(--fx-panel-radius);
    background: var(--fx-panel-bg);
    box-shadow: var(--fx-panel-shadow);
}

.fx-filter-panel {
    overflow: hidden;
}

.fx-panel-header,
.fx-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fx-space-2) var(--fx-space-3);
    padding: var(--fx-space-3) var(--fx-space-4);
    border-bottom: var(--fx-panel-border);
}

.fx-panel-title,
.fx-filter-title {
    margin: 0;
    color: var(--fx-text-primary);
    font-size: var(--fx-font-size-md);
    font-weight: var(--fx-font-weight-bold);
}

.fx-panel-body,
.fx-filter-body {
    padding: var(--fx-space-4);
}

.fx-filter-actions {
    padding-top: var(--fx-space-3);
    border-top: var(--fx-panel-border);
}

.fx-filter-count {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-action-primary) 12%, #fff);
    color: var(--fx-action-primary);
    font-size: var(--fx-font-size-xs);
    font-weight: var(--fx-font-weight-bold);
}

.fx-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--fx-space-3);
    align-items: end;
}

.fx-field-group {
    display: grid;
    grid-template-rows: auto auto minmax(0, auto);
    align-content: start;
    gap: var(--fx-space-1);
    min-width: 0;
}

.fx-field-group > label,
.fx-field-label {
    margin: 0;
    color: var(--fx-text-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
}

.fx-field-help,
.fx-field-validation {
    min-height: 1rem;
    color: var(--fx-text-muted);
    font-size: .75rem;
    line-height: 1.25;
}

.fx-field-validation {
    color: var(--fx-status-danger);
}

.fx-table-shell,
.table-responsive {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.fx-table-shell > .table,
.table-responsive > .table {
    margin-bottom: 0;
}

/* D-UI-01: resumo dos cards recolhíveis fica restrito ao celular compacto. */
.fx-mobile-card-summary {
    display: none !important;
}

.fx-table-shell .table > :not(caption) > * > * {
    padding-top: .7rem;
    padding-bottom: .7rem;
    border-color: #e9ecef;
    vertical-align: middle;
}

.fx-table-shell .table thead th {
    color: #495057;
    font-size: var(--fx-font-size-xs);
    font-weight: var(--fx-font-weight-bold);
    letter-spacing: .01em;
    white-space: nowrap;
}

.fx-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--fx-space-2) var(--fx-space-3);
    padding: var(--fx-space-3) var(--fx-space-4);
    border-top: var(--fx-panel-border);
    background: #f8f9fa;
}

.fx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fx-space-3);
}

.fx-kpi-card {
    min-width: 0;
    padding: var(--fx-space-4);
    border: var(--fx-panel-border);
    border-radius: var(--fx-panel-radius);
    background: var(--fx-panel-bg);
    box-shadow: var(--fx-panel-shadow);
}

.fx-kpi-label {
    color: var(--fx-text-muted);
    font-size: var(--fx-font-size-sm);
    font-weight: var(--fx-font-weight-medium);
}

.fx-kpi-value {
    margin-top: var(--fx-space-1);
    color: var(--fx-text-primary);
    font-size: var(--fx-font-size-xl);
    font-weight: var(--fx-font-weight-bold);
    line-height: 1.2;
}

.fx-kpi-value.is-danger { color: var(--fx-status-danger); }
.fx-kpi-value.is-warning { color: #8a6100; }
.fx-kpi-value.is-success { color: var(--fx-status-success); }

.fx-empty-state,
.fx-error-state,
.fx-loading-state {
    padding: var(--fx-space-6) var(--fx-space-4);
    text-align: center;
    color: var(--fx-text-muted);
}

.fx-state-icon {
    display: block;
    margin-bottom: var(--fx-space-2);
    font-size: 1.5rem;
}

.fx-modal-responsive .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--fx-modal-radius);
    box-shadow: var(--fx-panel-shadow-raised);
}

.fx-modal-responsive .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.fx-modal-responsive .modal-header,
.fx-modal-responsive .modal-footer {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    border-color: var(--fx-border-color);
    background: #fff;
}

.fx-modal-responsive .modal-title {
    color: var(--fx-text-primary);
}

.fx-modal-responsive .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.fx-modal-lg .modal-dialog { max-width: min(94vw, 1140px); }
.fx-modal-md .modal-dialog { max-width: min(92vw, 720px); }
.fx-modal-sm .modal-dialog { max-width: min(90vw, 480px); }

.fx-status-success { background-color: var(--fx-status-success); color: #fff; }
.fx-status-warning { background-color: var(--fx-status-warning); color: #212529; }
.fx-status-danger { background-color: var(--fx-status-danger); color: #fff; }
.fx-status-info { background-color: var(--fx-status-info); color: #212529; }
.fx-status-neutral { background-color: var(--fx-status-neutral); color: #fff; }

/* D-UI-01: barra operacional de listagens comerciais e controles auxiliares. */
.fx-commercial-list-toolbar {
    justify-content: flex-start;
    align-items: stretch;
}

.fx-commercial-list-toolbar .fx-search-bar {
    flex: 2 1 420px;
    max-width: none;
}

.fx-commercial-toolbar-actions {
    display: grid;
    flex: 1 1 320px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--fx-space-2);
}

.fx-commercial-toolbar-actions > .btn,
.fx-commercial-toolbar-actions > .dropdown,
.fx-commercial-toolbar-actions > .dropdown > .btn {
    width: 100%;
}

.fx-filter-multiempresa:has(.fx-multiempresa-toggle-listagem) {
    margin-top: var(--fx-space-3);
    padding: var(--fx-space-3);
    border: 1px solid var(--fx-border-color);
    border-radius: var(--fx-panel-radius);
    background: #f8f9fa;
}

.fx-filter-multiempresa .fx-multiempresa-toggle-listagem {
    width: 100%;
    min-width: 0 !important;
    margin-left: 0 !important;
}

@media (max-width: 991.98px) {
    .main-content {
        padding: var(--fx-space-4);
    }

    .fx-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .fx-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fx-operation-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-operation-commands {
        justify-content: flex-start;
    }

    .fx-modal-responsive .modal-dialog {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .fx-modal-responsive .modal-content {
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .fx-modal-responsive .modal-body {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: var(--fx-space-3);
    }

    .fx-page-header,
    .fx-page-toolbar {
        align-items: stretch;
    }

    .fx-page-heading,
    .fx-search-bar,
    .fx-page-actions,
    .fx-filter-actions {
        width: 100%;
    }

    .fx-page-actions,
    .fx-filter-actions {
        justify-content: flex-start;
    }

    .fx-page-actions > .btn,
    .fx-filter-actions > .btn {
        flex: 1 1 auto;
    }

    .fx-operation-search .fx-search-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
    }

    .fx-operation-search .fx-search-bar > .input-group-text {
        grid-column: 1;
    }

    .fx-operation-search .fx-search-bar > .form-control {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

    .fx-operation-search .fx-search-bar > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .fx-operation-commands {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .fx-operation-commands > .btn,
    .fx-operation-commands > .dropdown,
    .fx-operation-commands > .dropdown > .btn {
        width: 100%;
    }

    .fx-operation-commands > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .fx-commercial-list-toolbar .fx-search-bar,
    .fx-commercial-toolbar-actions {
        flex-basis: 100%;
    }

    .fx-commercial-toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fx-commercial-toolbar-actions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .fx-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-mobile-full {
        width: 100%;
    }

    .fx-table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .fx-table-mobile-cards {
        overflow: visible;
    }

    .fx-table-mobile-cards table,
    .fx-table-mobile-cards tbody,
    .fx-table-mobile-cards tr,
    .fx-table-mobile-cards td {
        display: block;
        width: 100%;
    }

    .fx-table-mobile-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .fx-table-mobile-cards tbody {
        display: grid;
        gap: var(--fx-space-3);
        padding: var(--fx-space-3);
        background: #f8f9fa;
    }

    .fx-table-mobile-cards tbody tr {
        overflow: hidden;
        border: var(--fx-panel-border);
        border-radius: var(--fx-panel-radius);
        background: #fff;
        box-shadow: var(--fx-panel-shadow);
    }

    .fx-table-mobile-cards tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--fx-space-3);
        min-height: 2.5rem;
        padding: var(--fx-space-2) var(--fx-space-3) !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .fx-table-mobile-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        color: var(--fx-text-muted);
        font-size: var(--fx-font-size-xs);
        font-weight: var(--fx-font-weight-semibold);
        text-align: left;
    }

    .fx-table-mobile-cards tbody td[data-label="Produto"] {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--fx-space-1);
        text-align: left !important;
    }

    .fx-table-mobile-cards tbody td[data-label="Produto"]::before {
        flex-basis: auto;
    }

    .fx-table-mobile-cards tbody td[data-label="Selecionar"],
    .fx-table-mobile-cards tbody td[data-label="Ações"] {
        display: inline-flex;
        width: 50%;
        border-bottom: 0;
    }

    .fx-table-mobile-cards tbody td[data-label="Ações"] {
        float: right;
    }

    .fx-table-mobile-cards tbody td[data-label="Selecionar"]::before,
    .fx-table-mobile-cards tbody td[data-label="Ações"]::before {
        flex-basis: auto;
    }

    .fx-table-mobile-cards tbody tr.fx-produtos-state-row td {
        display: block;
        width: 100%;
        text-align: center !important;
    }

    .fx-table-mobile-cards tbody tr.fx-produtos-state-row td::before {
        display: none;
    }

    /*
     * Padrão oficial para listagens operacionais móveis recolhíveis.
     * A tela inclui `fx-mobile-collapsible` no contêiner, `fx-mobile-card` em
     * cada linha, `fx-mobile-card-summary` no resumo e `data-mobile-detail`
     * apenas nos campos revelados após o toque.
     */
    .fx-mobile-collapsible .fx-mobile-card > td {
        display: none !important;
    }

    .fx-mobile-collapsible .fx-mobile-card > .fx-mobile-card-summary {
        display: block !important;
        width: 100%;
        padding: 0 !important;
        border: 0 !important;
    }

    .fx-mobile-collapsible .fx-mobile-card > .fx-mobile-card-summary::before {
        content: none;
        display: none;
    }

    .fx-mobile-card-toggle {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--fx-space-1);
        width: 100%;
        min-height: 5.5rem;
        padding: var(--fx-space-3);
        border: 0;
        border-radius: var(--fx-panel-radius);
        background: #fff;
        color: var(--fx-text-primary);
        text-align: left;
    }

    .fx-mobile-card-toggle:hover,
    .fx-mobile-card-toggle:focus-visible {
        background: color-mix(in srgb, var(--fx-action-primary) 5%, #fff);
    }

    .fx-mobile-card-toggle:focus-visible {
        outline: 2px solid var(--fx-action-primary);
        outline-offset: -3px;
        box-shadow: var(--fx-focus-ring);
    }

    .fx-mobile-card-main,
    .fx-mobile-card-hint,
    .fx-mobile-card-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--fx-space-2);
    }

    .fx-mobile-card-kicker {
        color: var(--fx-action-primary);
        font-size: var(--fx-font-size-md);
        font-weight: var(--fx-font-weight-bold);
    }

    .fx-mobile-card-title {
        overflow: hidden;
        color: var(--fx-text-primary);
        font-weight: var(--fx-font-weight-semibold);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fx-mobile-card-hint,
    .fx-mobile-card-meta {
        color: var(--fx-text-muted);
        font-size: var(--fx-font-size-xs);
    }

    .fx-mobile-collapsible .fx-mobile-card.fx-mobile-card-expanded > td[data-mobile-detail] {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        float: none;
        gap: var(--fx-space-3);
        width: 100%;
        min-height: 2.5rem;
        padding: var(--fx-space-2) var(--fx-space-3) !important;
        border-bottom: 1px solid #eef2f7 !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .fx-mobile-collapsible .fx-mobile-card.fx-mobile-card-expanded > td[data-mobile-detail]::before {
        content: attr(data-label);
        display: block;
        flex: 0 0 42%;
        margin-bottom: 0;
        color: var(--fx-text-muted);
        font-size: var(--fx-font-size-xs);
        font-weight: var(--fx-font-weight-semibold);
        text-align: left;
        text-transform: uppercase;
    }

    .fx-mobile-collapsible .fx-mobile-card.fx-mobile-card-expanded > td[data-mobile-detail]:last-child {
        border-bottom: 0 !important;
    }

    .fx-mobile-collapsible .fx-mobile-card.fx-mobile-card-expanded > td[data-mobile-detail] .dropdown {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}