/* O Foundation colore apenas os elementos internos do cabeçalho. Os títulos
   diretos do MudTh também precisam usar a cor de texto definida no tema. */
.mud-data-grid-custom thead tr th {
    color: var(--mud-palette-drawer-text) !important;
}

/* As consultas do planejamento usam tabelas HTML para destacar a carga.
   A mesma classe dos grids aplica as cores do tema; a tipografia também deve
   acompanhar os títulos do MudDataGrid, preservando as cores das ordens. */
table.mud-data-grid-custom thead tr th {
    font-family: var(--mud-typography-subtitle2-family);
    font-size: var(--mud-typography-subtitle2-size, .875rem) !important;
    font-weight: var(--mud-typography-subtitle2-weight, 500);
    line-height: var(--mud-typography-subtitle2-lineheight, 1.5);
    letter-spacing: var(--mud-typography-subtitle2-letterspacing);
}

/* As grades de cadastro usam 78vh, mas o cabeçalho, a busca e o paginador
   também ocupam a área visível. Limitar a rolagem ao grid evita que a página
   inteira ganhe barras de rolagem em janelas mais baixas. */
.mud-main-content > .mud-paper:has(> .mud-data-grid-custom) {
    min-width: 0;
    max-width: 100%;
}

.mud-main-content > .mud-paper > .mud-data-grid-custom {
    min-width: 0;
    max-width: 100%;
}

.mud-main-content > .mud-paper > .mud-data-grid-custom .mud-table-container[style*="78vh"] {
    max-width: 100%;
    max-height: calc(100dvh - 250px) !important;
    overflow-x: auto;
}

/* MudPaper e MudTabs não recebem o atributo de isolamento CSS da página.
   Estas regras limitam os componentes reais, mantendo o paginador visível. */
.planning-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 128px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.planning-page .planning-tabs,
.planning-page .planning-tabs .mud-tabs-panels {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.planning-page .planning-tabs .mud-tabs-tabbar {
    flex: 0 0 auto;
}

.planning-page .planning-production-tabs {
    width: 100%;
    max-width: 100%;
}

.planning-page .planning-tab-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin: 0 8px 8px;
    overflow: hidden;
}

.planning-page .planning-production-grid {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
}

.planning-page .planning-tab-grid .mud-table-container {
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.planning-page .planning-tab-grid .mud-table-pagination {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
}

/* O layout do Foundation já reserva espaço para o cabeçalho e o rodapé.
   No desktop, o Planejamento ocupa a área restante sem descontá-los novamente. */
@media (min-width: 801px) {
    .mud-main-content:has(.planning-shell) {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .planning-shell {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .planning-page {
        flex: 1 1 auto;
        height: auto;
    }
}

@media (max-width: 800px) {
    .planning-page {
        height: calc(100dvh - 64px);
    }
}

/* A seleção precisa pintar as células: os fundos de faixa, hover e situação
   podem encobrir um fundo aplicado somente ao tr. Mantém os indicadores internos. */
.mud-data-grid-custom tr.row-selected > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface)) !important;
}

.mud-data-grid-custom tr.row-selected:hover > td {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-surface)) !important;
}

.mud-data-grid-custom tr.row-selected > td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

/* O shell é fornecido pelo Foundation e não recebe o isolamento CSS do dashboard.
   Limitar estas regras à presença do painel evita alterar a rolagem de outras páginas. */
html:has(.mes-studio),
body:has(.mes-studio) {
    height: 100%;
    overflow: hidden;
}

.mud-layout:has(.mes-studio) {
    height: 100dvh;
    overflow: hidden;
}

.mud-main-content:has(.mes-studio) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* O cabeçalho da ordem e as abas compartilham a altura limitada do diálogo.
   Somente o contêiner do grid rola; alturas em vh somadas ao formulário
   provocavam rolagem da janela inteira e escondiam a paginação. */
.mes-order-dialog {
    overflow: hidden;
}

.mes-order-dialog .mes-order-dialog-content,
.mes-order-dialog .mes-order-tabs,
.mes-order-dialog .mes-order-tabs > .mud-tabs-panels,
.mes-order-dialog .mes-order-tabs > .mud-tabs-panels > .mud-tab-panel-active:not(.mud-tab-panel-hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.mes-order-dialog-content > .mud-grid,
.mes-order-dialog-content > .mud-alert,
.mes-order-dialog .mud-tabs-tabbar,
.mes-order-dialog .mud-tab-panel > .mud-button-root,
.mes-order-dialog .mud-tab-panel > .mud-typography,
.mes-order-dialog .mud-table-pagination,
.mes-order-dialog .mud-dialog-title,
.mes-order-dialog .mud-dialog-actions {
    flex-shrink: 0;
}

.mes-order-dialog .mes-order-tabs .mud-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.mes-order-dialog .mes-order-tabs .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
    height: auto !important;
    overflow: auto;
    overscroll-behavior: contain;
}

/* As séries ficam no detalhe; a borda identifica os apontamentos consultáveis
   sem competir com a cor da linha selecionada. O botão também identifica a ação. */
.mes-order-dialog tr.movement-has-series > td:first-child {
    border-left: 4px solid var(--mud-palette-primary);
}

.mes-order-dialog tr.movement-has-series {
    cursor: pointer;
}

/* MudInputControl cresce em layouts flex. A faixa do filtro fica fora da área
   expansível para não empurrar o grid ao rodapé nem criar um espaço vazio. */
.mes-order-dialog .mes-order-panel-toolbar {
    flex: 0 0 auto;
    width: min(360px, 100%);
}

.mes-order-dialog .mes-order-period-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: min(720px, 100%);
}

.mes-order-dialog .mes-order-period-filters > .mud-input-control {
    flex: 1 1 240px;
}

.mes-order-dialog .mud-tab-panel > .mud-input-control {
    flex: 0 0 auto;
}