/* ==========================================================================
   Hub Mercado — Isolated Stylesheet for Mercado SPA Module (v0.15.0)
   Estilo visual premium seguindo os padrões do DESIGN_SYSTEM.md (chumbo/HSL)
   Todos os seletores são estritamente escopados para evitar vazamentos na SPA.
   ========================================================================== */

/* 1. Módulo Container Layout */
.beto-view.view-market {
    display: none;
    min-height: 100%;
    height: calc(100vh - (var(--hub-view-section-gap) * 2));
    gap: var(--hub-view-section-gap, var(--space-s));
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: hidden;
}
.beto-view.view-market.is-active {
    display: grid;
}

/* 2. Cabeçalho de Metadados Escopado */
.view-market .hub-meta-badge {
    background: var(--hub-surface-hover, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--hub-border);
    padding: 6px 12px;
    border-radius: var(--hub-radius);
    font-size: var(--hub-text-table);
    font-weight: var(--hub-weight-bold);
    color: var(--hub-primary);
}
.view-market .hub-meta-timestamp {
    font-size: var(--hub-text-label);
    color: var(--hub-text-muted);
}

/* 3. Barra de Filtros Compacta Baseada em .hub-form-grid */
.view-market .market-filter-bar {
    padding: 10px var(--space-m);
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    margin-bottom: 0;
}
.view-market .market-filters-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 0.6fr 0.7fr 1.5fr 1fr 0.8fr 0.8fr auto;
    gap: var(--space-xs);
    align-items: flex-end;
}
.view-market .filter-actions {
    display: flex;
    justify-content: flex-end;
}
.view-market .filter-actions button {
    width: 100%;
    height: var(--hub-control-height, 36px);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. Painel Raio-X (MarketSummary) */
.view-market .market-summary-block {
    margin-bottom: 0;
}

.view-market .market-summary-block:empty {
    display: none;
}
.view-market .market-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-s);
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    padding: var(--space-m);
}
.view-market .summary-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.view-market .summary-card .card-label {
    font-size: var(--hub-text-eyebrow);
    color: var(--hub-text-muted);
    text-transform: uppercase;
    font-weight: var(--hub-weight-bold);
    letter-spacing: 0.05em;
}
.view-market .summary-card .card-value {
    font-size: var(--hub-text-page);
    font-weight: var(--hub-weight-bold);
    color: var(--hub-text);
}
.view-market .summary-card .card-value.highlighted {
    color: var(--hub-primary);
}
.view-market .summary-card .card-subtext {
    font-size: var(--hub-text-label);
    color: var(--hub-text-muted);
}

.view-market .market-summary-note {
    font-size: var(--hub-text-eyebrow);
    font-weight: var(--hub-weight-medium);
    color: var(--hub-warning);
}
.view-market .summary-metadata-row {
    grid-column: span 6;
    display: flex;
    gap: var(--space-l);
    padding-top: var(--space-s);
    border-top: 1px dashed var(--hub-border);
    font-size: var(--hub-text-table);
    color: var(--hub-text-muted);
}

/* Classes para mover inline styles dos cards estatísticos */
.view-market .market-summary-card-full {
    grid-column: span 6;
}
.view-market .market-price-range-value {
    font-size: var(--hub-text-card-title);
    margin-top: 5px;
}
.view-market .summary-card .market-distribution-value {
    font-size: var(--hub-text-eyebrow);
    font-weight: var(--hub-weight-medium);
    margin-top: 8px;
    line-height: var(--hub-leading-normal);
    color: var(--hub-info);
}
.view-market .market-age-value {
    font-size: var(--hub-text-heading);
    margin-top: 4px;
}

/* 5. Alertas de Estado e Vazio */
.view-market .market-alert-banner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-m);
    background: rgba(222, 183, 118, 0.08);
    border: 1px solid rgba(222, 183, 118, 0.28);
    border-radius: var(--hub-radius);
    color: var(--hub-text-muted);
    font-size: var(--hub-text-body);
    line-height: var(--hub-leading-normal);
}
.view-market .market-alert-banner strong {
    color: var(--hub-text);
    margin-right: 4px;
}
.view-market .market-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-m);
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    text-align: center;
    gap: var(--space-s);
    min-height: 250px;
}
.view-market .market-empty-icon {
    font-size: 48px;
    opacity: 0.38;
}
.view-market .market-empty-state h3 {
    margin: 0;
    font-size: var(--hub-text-heading);
    font-weight: var(--hub-weight-bold);
    color: var(--hub-text);
}
.view-market .market-empty-state p {
    margin: 0;
    font-size: var(--hub-text-body);
    color: var(--hub-text-muted);
    max-width: 420px;
}

/* 6. Tabela Operacional Densa */
.view-market .market-table-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: none;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    overflow: hidden;
}
.view-market .market-table-panel .hub-table-wrap {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.view-market .market-pagination-buttons {
    display: flex;
    gap: 8px;
}
.view-market .hub-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s;
}
.view-market .hub-table tbody tr:hover {
    background: var(--hub-surface-hover, rgba(255, 255, 255, 0.025)) !important;
}

/* Sub-classes escopadas da tabela */
.view-market .hub-table td.cell-bold {
    font-weight: var(--hub-weight-bold);
    color: var(--hub-text);
}
.view-market .cell-subtitle {
    font-size: var(--hub-text-label);
    color: var(--hub-text-muted);
    margin-top: 2px;
    display: block;
    font-weight: var(--hub-weight-medium);
}
.view-market .price-value-row {
    font-size: var(--hub-text-card-title);
    font-weight: var(--hub-weight-bold);
    color: var(--hub-primary);
}
.view-market .market-price-basis-label {
    margin-top: 2px;
}
.view-market .market-badge-anomaly {
    vertical-align: middle;
}

/* 7. Esqueletos de Carregamento */
.view-market .market-skeleton-row td {
    padding: 16px 8px;
}
.view-market .market-skeleton-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.035);
    border-radius: 4px;
    animation: marketPulse 1.5s infinite ease-in-out;
}
@keyframes marketPulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

/* 8. Estilos do Drawer de Observação (Escopado) */
.market-observation-drawer .hub-drawer__panel {
    width: 460px;
    max-width: 90vw;
}
.market-observation-drawer .drawer-section {
    margin-bottom: var(--space-m);
    padding-bottom: var(--space-s);
    border-bottom: 1px dashed var(--hub-border);
}
.market-observation-drawer .drawer-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.market-observation-drawer .drawer-section h4 {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--hub-text-table);
    text-transform: uppercase;
    color: var(--hub-primary);
    letter-spacing: 0.05em;
    font-weight: var(--hub-weight-bold);
}
.market-observation-drawer .drawer-property-title {
    font-size: var(--hub-text-heading);
    font-weight: var(--hub-weight-bold);
    color: var(--hub-text);
    margin-bottom: var(--space-s);
    line-height: var(--hub-leading-normal);
}

/* Classes para mover inline styles do drawer */
.market-observation-drawer .market-drawer-price {
    color: var(--hub-primary);
    font-weight: var(--hub-weight-bold);
}
.market-observation-drawer .market-drawer-specs {
    font-size: var(--hub-text-table);
    font-weight: var(--hub-weight-medium);
    color: var(--hub-text-muted);
}
.market-observation-drawer .market-drawer-reasons {
    font-size: var(--hub-text-label);
    font-weight: var(--hub-weight-medium);
    color: var(--hub-text-muted);
    font-style: italic;
    text-align: right;
    max-width: 250px;
}
.market-observation-drawer .market-drawer-source {
    text-transform: capitalize;
}
.market-observation-drawer .market-drawer-link {
    color: var(--hub-info);
    text-decoration: underline;
    font-weight: var(--hub-weight-bold);
}
.market-observation-drawer .market-drawer-mono {
    font-family: monospace;
    font-size: var(--hub-text-label);
}
.market-observation-drawer .market-drawer-immutable {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.market-observation-drawer .market-drawer-immutable-note {
    font-size: var(--hub-text-eyebrow);
    color: var(--hub-text-muted);
    font-style: italic;
}
.market-observation-drawer .market-drawer-helper {
    margin: 0 0 var(--space-s) 0;
    font-size: var(--hub-text-table);
    color: var(--hub-text-muted);
    line-height: var(--hub-leading-normal);
}
.market-observation-drawer .market-drawer-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.market-observation-drawer .market-inline-field {
    min-width: 220px;
}

/* 9. Modal de Instruções (Classes para mover inline styles do modal de instruções) */
#market-instructions-modal .market-instructions-title {
    margin-top: 16px;
    margin-bottom: 0;
    font-size: var(--hub-text-heading);
    line-height: var(--hub-leading-snug);
    font-weight: var(--hub-weight-semibold);
    color: var(--hub-text);
}
#market-instructions-modal .market-instructions-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#market-instructions-modal .market-instructions-intro,
#market-instructions-modal .market-instructions-steps,
#market-instructions-modal .market-warning-box {
    margin-top: 0;
}
#market-instructions-modal .market-instructions-intro .hub-info-panel__head h4,
#market-instructions-modal .market-instructions-steps .hub-info-panel__head h4 {
    color: var(--hub-text);
}
#market-instructions-modal .market-instructions-list {
    margin: 8px 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#market-instructions-modal .market-instructions-list li {
    color: var(--hub-text);
    font-size: var(--hub-text-body);
    font-weight: var(--hub-weight-light);
    line-height: var(--hub-leading-normal);
    padding-left: 4px;
}
#market-instructions-modal .market-warning-box {
    background: rgba(193, 145, 56, 0.08);
    border: 1px solid rgba(193, 145, 56, 0.18);
    border-left: 4px solid var(--hub-warning);
    padding: 14px 16px;
    border-radius: var(--hub-radius);
}
#market-instructions-modal .market-warning-box .hub-info-panel__head h4 {
    color: var(--hub-warning);
}
#market-instructions-modal .market-warning-box p {
    color: var(--hub-text-muted);
}