/**
 * CMssOrçamentos — Design System (ERP administrativo)
 * Tokens, tipografia, espaçamento, botões, cards, tabelas, modais, formulários.
 * Carregar após Bootstrap; complementa style.css e components.css.
 */

/* ==========================================================================
   1. Breakpoints (referência — media queries em responsive.css)
   ==========================================================================
   xs:  0–575px    telefone
   sm:  576–767px  telefone grande / retrato
   md:  768–991px  tablet
   lg:  992–1199px notebook
   xl:  1200–1399px desktop
   2xl: 1400px+    desktop largo
   ========================================================================== */

:root {
    /* Breakpoints (valores para calc/media) */
    --erp-bp-sm: 576px;
    --erp-bp-md: 768px;
    --erp-bp-lg: 992px;
    --erp-bp-xl: 1200px;
    --erp-bp-2xl: 1400px;

    /* Containers */
    --erp-container-max-sm: 100%;
    --erp-container-max-md: 720px;
    --erp-container-max-lg: 960px;
    --erp-container-max-xl: 1400px;
    --erp-container-max-2xl: 1680px;
    --erp-container-max-wide: 1760px;
    --erp-container-max-fluid: 100%;
    --erp-container-gutter: 1rem;
    --erp-container-gutter-md: 1.25rem;
    --erp-container-gutter-lg: 1.5rem;

    /* Cores semânticas (alinha Bootstrap / style.css) */
    --erp-color-primary: #2563eb;
    --erp-color-primary-hover: #1e40af;
    --erp-color-surface: #ffffff;
    --erp-color-surface-muted: #f8fafc;
    --erp-color-surface-elevated: #ffffff;
    --erp-color-border: #e5e7eb;
    --erp-color-border-strong: #cbd5e1;
    --erp-color-text: #1f2937;
    --erp-color-text-muted: #6b7280;
    --erp-color-text-subtle: #94a3b8;
    --erp-color-success: #10b981;
    --erp-color-danger: #ef4444;

    /* Offset do thead sticky (abaixo do .main-header fixo) — refinado em erp-ui.js */
    --erp-header-sticky-height: 3.25rem;
    --erp-color-warning: #f59e0b;
    --erp-color-info: #0ea5e9;

    /* Tipografia */
    --erp-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --erp-font-size-xs: 0.75rem;
    --erp-font-size-sm: 0.8125rem;
    --erp-font-size-base: 0.9375rem;
    --erp-font-size-md: 1rem;
    --erp-font-size-lg: 1.125rem;
    --erp-font-size-xl: 1.25rem;
    --erp-font-size-2xl: 1.5rem;
    --erp-font-size-3xl: 1.875rem;
    --erp-line-height-tight: 1.25;
    --erp-line-height-base: 1.5;
    --erp-line-height-relaxed: 1.625;
    --erp-font-weight-normal: 400;
    --erp-font-weight-medium: 500;
    --erp-font-weight-semibold: 600;
    --erp-font-weight-bold: 700;

    /* Espaçamento (escala 4px) */
    --erp-space-0: 0;
    --erp-space-1: 0.25rem;
    --erp-space-2: 0.5rem;
    --erp-space-3: 0.75rem;
    --erp-space-4: 1rem;
    --erp-space-5: 1.25rem;
    --erp-space-6: 1.5rem;
    --erp-space-8: 2rem;
    --erp-space-10: 2.5rem;
    --erp-space-12: 3rem;

    /* Raios e sombras */
    --erp-radius-sm: 0.375rem;
    --erp-radius-md: 0.5rem;
    --erp-radius-lg: 0.65rem;
    --erp-radius-xl: 0.75rem;
    --erp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --erp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --erp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

    /* Densidade confortável (padrão) */
    --erp-density-table-cell-y: 0.625rem;
    --erp-density-table-cell-x: 0.75rem;
    --erp-density-form-gap: 1rem;
    --erp-density-card-padding: 1.25rem;
    --erp-density-btn-y: 0.4375rem;
    --erp-density-btn-x: 0.875rem;

    /* Tabelas — larguras mínimas de coluna */
    --erp-col-check: 2.5rem;
    --erp-col-icon: 3rem;
    --erp-col-xs: 4rem;
    --erp-col-sm: 5.5rem;
    --erp-col-md: 7.5rem;
    --erp-col-lg: 9.5rem;
    --erp-col-xl: 12rem;
    --erp-col-2xl: 16rem;
    --erp-col-actions-sm: 8.5rem;
    --erp-col-actions-md: 13.5rem;
    --erp-col-money: 6.5rem;
    --erp-col-date: 8.5rem;
    --erp-col-datetime: 10.5rem;

    /* Header / nav */
    --erp-header-height: 52px;
    --erp-z-header: 1035;
    --erp-z-drawer: 1030;
    --erp-z-backdrop: 1020;
    --erp-z-modal: 1055;
    --erp-z-toast: 9999;

    /* Modais */
    --erp-modal-max-width-sm: 400px;
    --erp-modal-max-width-md: 560px;
    --erp-modal-max-width-lg: 800px;
    --erp-modal-max-width-xl: 1140px;
    --erp-modal-max-width-full: calc(100vw - var(--erp-space-4));
}

/* Densidade compacta (listagens operacionais) */
[data-erp-density="compact"] {
    --erp-density-table-cell-y: 0.45rem;
    --erp-density-table-cell-x: 0.55rem;
    --erp-density-form-gap: 0.75rem;
    --erp-density-card-padding: 1rem;
    --erp-density-btn-y: 0.3125rem;
    --erp-density-btn-x: 0.65rem;
    --erp-font-size-base: 0.875rem;
}

/* ==========================================================================
   2. Tipografia
   ========================================================================== */

.erp-app {
    font-family: var(--erp-font-family);
    font-size: var(--erp-font-size-base);
    line-height: var(--erp-line-height-base);
    color: var(--erp-color-text);
}

.erp-page-title {
    font-size: var(--erp-font-size-2xl);
    font-weight: var(--erp-font-weight-semibold);
    line-height: var(--erp-line-height-tight);
    color: var(--erp-color-text);
    margin: 0;
}

.erp-page-subtitle,
.erp-text-muted {
    color: var(--erp-color-text-muted);
    font-size: var(--erp-font-size-sm);
    margin: 0;
}

.erp-section-title {
    font-size: var(--erp-font-size-lg);
    font-weight: var(--erp-font-weight-semibold);
    margin: 0 0 var(--erp-space-4);
}

.erp-label {
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-medium);
    color: var(--erp-color-text);
    margin-bottom: var(--erp-space-1);
}

.erp-kpi-value {
    font-size: var(--erp-font-size-2xl);
    font-weight: var(--erp-font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--erp-color-primary);
}

/* ==========================================================================
   3. Containers
   ========================================================================== */

.erp-container,
.main-content > .container.erp-container:not(.erp-container--fluid):not(.erp-container--narrow):not(.erp-container--wide) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--erp-container-gutter);
    padding-right: var(--erp-container-gutter);
    max-width: min(100%, var(--erp-container-max-2xl));
}

/* Sobrescreve max-width do Bootstrap (.container ≈ 1320px) em monitores grandes */
@media (min-width: 1200px) {
    .main-content > .container.erp-container:not(.erp-container--fluid):not(.erp-container--narrow):not(.erp-container--wide) {
        max-width: min(100%, var(--erp-container-max-2xl));
    }
}

.erp-container--narrow {
    max-width: min(100%, var(--erp-container-max-md)) !important;
}

.erp-container--wide {
    max-width: min(100%, var(--erp-container-max-wide)) !important;
}

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

.main-header .container.header-shell,
.main-header .site-main-nav-holder.container {
    max-width: min(100%, var(--erp-container-max-wide));
}

/* ==========================================================================
   4. Page shell
   ========================================================================== */

.erp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--erp-space-4);
    margin-bottom: var(--erp-space-6);
}

.erp-page-header__main {
    flex: 1 1 16rem;
    min-width: 0;
}

.erp-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
    flex-shrink: 0;
}

/* Cabeçalho com título, filtros centralizados e ações na mesma linha */
.erp-page-header--with-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--erp-space-3) var(--erp-space-4);
}

.erp-page-header--with-filters .erp-page-header__title {
    justify-self: start;
    grid-column: 1;
}

.erp-page-header--with-filters .erp-page-header__filters {
    justify-self: center;
    grid-column: 2;
}

.erp-page-header--with-filters .erp-page-header__actions {
    justify-self: end;
    grid-column: 3;
}

.erp-page-header--with-filters-no-actions {
    grid-template-columns: auto 1fr;
}

.erp-page-header--with-filters-no-actions .erp-page-header__filters {
    grid-column: 2;
    justify-self: center;
}

.erp-page-header__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-3);
    min-width: 0;
    margin: 0;
}

.erp-inline-field {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    min-width: 0;
}

.erp-inline-field__label {
    margin: 0;
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-medium);
    white-space: nowrap;
    color: var(--erp-color-text-muted, #64748b);
}

.erp-inline-field__control {
    width: auto;
    min-width: 9.5rem;
    max-width: 12rem;
}

.erp-inline-field__control--wide {
    min-width: 11rem;
    max-width: 16rem;
}

.erp-inline-field__control--search {
    min-width: 12rem;
    max-width: 15rem;
}

/* Campo de busca em tempo real (toolbar) */
.erp-search-live {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 14rem;
    max-width: 20rem;
}

.erp-search-live__icon {
    position: absolute;
    left: 0.65rem;
    z-index: 2;
    color: var(--erp-color-text-muted, #94a3b8);
    pointer-events: none;
    font-size: 0.9rem;
}

.erp-search-live__input {
    padding-left: 2rem;
    padding-right: 2.25rem;
    min-width: 14rem;
    max-width: 20rem;
    border-radius: var(--erp-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.erp-search-live__input:focus {
    border-color: var(--erp-color-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
}

.erp-search-live__clear {
    position: absolute;
    right: 0.35rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--erp-color-text-muted, #94a3b8);
    cursor: pointer;
}

.erp-search-live__clear:hover {
    background: var(--erp-color-surface-muted, #f1f5f9);
    color: var(--erp-color-text, #334155);
}

.erp-search-live__spinner {
    position: absolute;
    right: 0.45rem;
    z-index: 2;
    width: 1rem;
    height: 1rem;
}

.erp-search-live:has(.erp-search-live__clear:not(.d-none)) .erp-search-live__spinner {
    right: 2rem;
}

.propostas-lista-panel.is-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.erp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
}

/* ==========================================================================
   5. Botões (padrão ERP — complementa Bootstrap)
   ========================================================================== */

.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--erp-space-2);
    padding: var(--erp-density-btn-y) var(--erp-density-btn-x);
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-medium);
    line-height: var(--erp-line-height-tight);
    border-radius: var(--erp-radius-md);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.erp-btn--icon {
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
}

.erp-btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
}

/* ==========================================================================
   6. Cards
   ========================================================================== */

.erp-card {
    background: var(--erp-color-surface);
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    overflow: hidden;
}

.erp-card__header {
    padding: var(--erp-density-card-padding);
    padding-bottom: var(--erp-space-3);
    border-bottom: 1px solid var(--erp-color-border);
    background: var(--erp-color-surface-muted);
}

.erp-card__body {
    padding: var(--erp-density-card-padding);
}

.erp-card__footer {
    padding: var(--erp-space-3) var(--erp-density-card-padding);
    border-top: 1px solid var(--erp-color-border);
    background: var(--erp-color-surface-muted);
}

.erp-card--flat {
    box-shadow: none;
}

.erp-card--filter {
    margin-bottom: var(--erp-space-6);
}

/* Alias legado */
.card-custom.erp-card,
.erp-card.card-custom {
    border: 1px solid var(--erp-color-border);
}

/* ==========================================================================
   7. Tabelas de dados
   ========================================================================== */

.erp-table-panel {
    background: var(--erp-color-surface);
    border: 1px solid #e8edf3;
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    overflow: visible;
}

.erp-table-panel__scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
    max-width: 100%;
}

.erp-table-panel__scroll:focus-within {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.erp-table-panel__hint {
    display: none;
    padding: var(--erp-space-2) var(--erp-space-3);
    font-size: var(--erp-font-size-xs);
    color: var(--erp-color-text-muted);
    border-top: 1px solid var(--erp-color-border);
    background: var(--erp-color-surface-muted);
}

.erp-table-panel.is-scrollable .erp-table-panel__hint {
    display: block;
}

/* Tabela ERP */
.table.erp-data-table {
    width: 100%;
    margin-bottom: 0;
    font-size: var(--erp-font-size-sm);
}

.table.erp-data-table > :not(caption) > * > * {
    padding: var(--erp-density-table-cell-y) var(--erp-density-table-cell-x);
    vertical-align: middle;
}

.table.erp-data-table thead th {
    font-size: var(--erp-font-size-xs);
    font-weight: var(--erp-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--erp-color-text-muted);
    background: var(--erp-color-surface-muted);
    border-bottom: 1px solid var(--erp-color-border-strong);
    white-space: nowrap;
}

/* Cabeçalho fixo: scroll vertical só no painel (evita duplicar thead na página) */
.erp-table-panel--body-scroll .erp-table-panel__scroll {
    overflow-y: auto;
    max-height: min(70vh, calc(100dvh - var(--erp-header-sticky-height, 3.25rem) - 11rem));
    -webkit-overflow-scrolling: touch;
}

.erp-table-panel--body-scroll .table.table-custom {
    overflow: visible;
}

.erp-table-panel--body-scroll .table.table-custom thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

.table.erp-data-table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.04);
}

/* Larguras mínimas por tipo de coluna */
.erp-col--check { min-width: var(--erp-col-check); width: var(--erp-col-check); }
.erp-col--icon { min-width: var(--erp-col-icon); }
.erp-col--xs { min-width: var(--erp-col-xs); }
.erp-col--sm { min-width: var(--erp-col-sm); }
.erp-col--md { min-width: var(--erp-col-md); }
.erp-col--lg { min-width: var(--erp-col-lg); }
.erp-col--xl { min-width: var(--erp-col-xl); }
.erp-col--money { min-width: var(--erp-col-money); white-space: nowrap; font-variant-numeric: tabular-nums; }
.erp-col--date { min-width: var(--erp-col-date); white-space: nowrap; }
.erp-col--datetime { min-width: var(--erp-col-datetime); white-space: nowrap; }
.erp-col--actions-sm { min-width: var(--erp-col-actions-sm); }
.erp-col--actions-md { min-width: var(--erp-col-actions-md); }

.erp-data-table.text-end th,
.erp-data-table.text-end td,
.erp-data-table th.text-end,
.erp-data-table td.text-end {
    font-variant-numeric: tabular-nums;
}

/* Presets de largura mínima da tabela inteira */
.erp-data-table--min-sm { min-width: 640px; }
.erp-data-table--min-md { min-width: 960px; }
.erp-data-table--min-lg { min-width: 1200px; }
.erp-data-table--min-xl { min-width: 1280px; }
.erp-data-table--min-2xl { min-width: 1440px; }

/* Compat: painel legado propostas */
.propostas-lista-panel {
    background: var(--erp-color-surface);
    border: 1px solid #e8edf3;
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-sm);
    overflow: visible;
}

.propostas-lista-panel__scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: inherit;
    max-width: 100%;
}

/* ==========================================================================
   8. Formulários responsivos
   ========================================================================== */

.erp-form-grid {
    display: grid;
    gap: var(--erp-density-form-gap);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.erp-form-grid > .erp-field {
    grid-column: span 12;
    min-width: 0;
}

.erp-field--sm { grid-column: span 12; }
.erp-field--md { grid-column: span 12; }
.erp-field--lg { grid-column: span 12; }

@media (min-width: 576px) {
    .erp-field--sm { grid-column: span 6; }
    .erp-field--md { grid-column: span 6; }
}

@media (min-width: 768px) {
    .erp-field--sm { grid-column: span 4; }
    .erp-field--md { grid-column: span 6; }
    .erp-field--lg { grid-column: span 8; }
}

@media (min-width: 992px) {
    .erp-field--sm { grid-column: span 3; }
    .erp-field--md { grid-column: span 4; }
    .erp-field--lg { grid-column: span 6; }
    .erp-field--xl { grid-column: span 12; }
}

.erp-field .form-label {
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-medium);
    margin-bottom: var(--erp-space-1);
}

.erp-field .form-control,
.erp-field .form-select {
    font-size: var(--erp-font-size-base);
}

/* ==========================================================================
   9. Modais
   ========================================================================== */

.modal.erp-modal .modal-dialog {
    margin: var(--erp-space-4) auto;
    max-width: var(--erp-modal-max-width-lg);
}

.modal.erp-modal--sm .modal-dialog { max-width: var(--erp-modal-max-width-sm); }
.modal.erp-modal--md .modal-dialog { max-width: var(--erp-modal-max-width-md); }
.modal.erp-modal--lg .modal-dialog { max-width: var(--erp-modal-max-width-lg); }
.modal.erp-modal--xl .modal-dialog { max-width: var(--erp-modal-max-width-xl); }
.modal.erp-modal--fullscreen .modal-dialog { max-width: var(--erp-modal-max-width-full); }

.modal.erp-modal .modal-content {
    border-radius: var(--erp-radius-xl);
    border: 1px solid var(--erp-color-border);
    box-shadow: var(--erp-shadow-lg);
}

.modal.erp-modal .modal-header {
    padding: var(--erp-space-4) var(--erp-space-5);
    border-bottom: 1px solid var(--erp-color-border);
}

.modal.erp-modal .modal-body {
    padding: var(--erp-space-4) var(--erp-space-5);
}

.modal.erp-modal .modal-footer {
    padding: var(--erp-space-3) var(--erp-space-5);
    border-top: 1px solid var(--erp-color-border);
    gap: var(--erp-space-2);
}

/* ==========================================================================
   10. Utilitários
   ========================================================================== */

.erp-stack-2 > * + * { margin-top: var(--erp-space-2); }
.erp-stack-4 > * + * { margin-top: var(--erp-space-4); }
.erp-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--erp-space-2);
}

.erp-sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   11. Impressão (telas administrativas — não substitui print-industrial.css)
   ========================================================================== */

@media print {
    .erp-table-panel,
    .propostas-lista-panel {
        border: none;
        box-shadow: none;
    }

    .erp-table-panel__scroll,
    .propostas-lista-panel__scroll {
        overflow: visible !important;
    }

    .erp-page-header__actions,
    .erp-toolbar,
    .d-print-none {
        display: none !important;
    }
}