.mud-input.mud-disabled,
.mud-input-control.mud-readonly {
    background-color: var(--mud-palette-background-gray);
}

    .mud-input.mud-disabled ~ .mud-input-label-outlined,
    .mud-input-control.mud-readonly .mud-input-label-outlined {
        background-color: var(--mud-palette-background-gray);
    }

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--mud-palette-text-secondary);
}

/* =====================================================================
   campo-leitura: apresentação somente leitura de alto contraste (opt-in
   via ModoLeitura nos componentes de Forms). Mantém o valor legível e a
   geometria do campo, sem affordance de edição (seta, busca, limpar).
   ===================================================================== */
.campo-leitura .mud-input,
.campo-leitura .mud-input.mud-disabled,
.campo-leitura .mud-input input,
.campo-leitura .mud-input.mud-disabled input,
.campo-leitura .mud-input.mud-disabled textarea,
.campo-leitura .mud-input.mud-disabled .mud-input-slot {
    color: var(--mud-palette-text-primary);
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    opacity: 1;
    background-color: var(--mud-palette-background-gray);
}

.campo-leitura .mud-input.mud-disabled ~ .mud-input-label-outlined,
.campo-leitura .mud-input ~ .mud-input-label-outlined {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.campo-leitura .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-default);
}

/* Sem affordance de edição no modo leitura */
.campo-leitura .mud-input-adornment,
.campo-leitura .mud-input-clear-button {
    display: none;
}


.mud-dialog {
    background-color: var(--mud-palette-background);
}

.mud-tab.mud-tab-active {
    border-bottom: 2px solid var(--mud-palette-primary)
}

.mud-list-item.mud-list-item-gutters.mud-list-item-clickable.mud-ripple.active {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* =====================================================================
   Refinamento visual (minimalista / sóbrio) - SmartProcess Web
   Ajustes puramente de CSS, aditivos e reversíveis. Não alteram
   contratos, parâmetros ou comportamento dos componentes.
   ===================================================================== */

/* Tipografia: botões sem CAIXA ALTA deixam a interface mais moderna e menos "crua" */
.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
}

/* AppBar: sombra sutil no lugar de bloco chapado, mantendo a cor da identidade */
.main-layout__appbar {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Cartões/painéis: elevação e borda mais discretas, respiração interna maior */
.mud-paper {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-2 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Título de seção (usado em BuscaPadrao/BaseCadastro) com hierarquia mais clara */
.mud-typography-h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Menu lateral: itens com ritmo, cantos suaves e estado ativo mais legível */
.mud-navmenu .mud-nav-link {
    position: relative;
    border-radius: 6px;
    margin: 2px 4px;
    transition: background-color 120ms ease, color 120ms ease;
}

.mud-navmenu .mud-nav-link.active {
    background-color: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

.mud-navmenu .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--mud-palette-primary);
}

/* Drawer em azul tonal: hover/seleção derivados de branco translúcido,
   garantindo contraste sobre o fundo escuro da identidade. */
.mud-drawer .mud-navmenu .mud-nav-link,
.mud-drawer .mud-navmenu .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-drawer-text);
}

.mud-drawer .mud-navmenu .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-drawer-icon);
}

.mud-drawer .mud-navmenu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* Item ativo: fundo claro translúcido + texto/ícone brancos.
   !important vence as regras de cor do próprio MudBlazor (que usariam
   a cor primária escura, ilegível sobre o drawer azul). */
.mud-drawer .mud-navmenu .mud-nav-link.active,
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root {
    color: #FFFFFF !important;
}

.mud-drawer .mud-navmenu .mud-nav-link.active {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.mud-drawer .mud-navmenu .mud-nav-link.active::before {
    background-color: #FFFFFF;
}

.mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Campo de filtro do menu lateral (sobre o azul escuro) */
.menu-filtro {
    padding: 12px 12px 0;
}

.menu-filtro .mud-input,
.menu-filtro .mud-input input {
    color: #FFFFFF;
}

.menu-filtro .mud-input input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.menu-filtro .mud-input.mud-input-underline:before {
    border-color: rgba(255, 255, 255, 0.3);
}

.menu-filtro .mud-input.mud-input-underline:hover:not(.mud-disabled):before {
    border-color: rgba(255, 255, 255, 0.6);
}

.menu-filtro .mud-input.mud-input-underline:after {
    border-color: #FFFFFF;
}

.menu-filtro .mud-icon-root,
.menu-filtro .mud-input-adornment .mud-icon-root,
.menu-filtro .mud-input-clear-button .mud-icon-root {
    color: rgba(255, 255, 255, 0.7);
}

.menu-filtro__vazio {
    padding: 8px 16px;
    color: var(--mud-palette-drawer-text);
    opacity: 0.7;
}

/* Alvos de toque confortáveis no menu em telas de toque */
@media (max-width: 959.98px) {
    .mud-drawer .mud-navmenu .mud-nav-link {
        min-height: 44px;
    }
}

/* Abas: transição suave, sem caixa alta e cabeçalho mais leve */
.mud-tabs .mud-tab {
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 6px 6px 0 0;
}

.mud-tabs .mud-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* =====================================================================
   Cabeçalho padrão das telas de cadastro (BaseCadastro)
   ===================================================================== */
.base-cadastro__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.base-cadastro__header-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.base-cadastro__header-titulo .mud-typography-h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.base-cadastro__header-contexto {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicador de modo (Visualizando/Editando), exibido junto às ações */
.base-cadastro__modo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    white-space: nowrap;
    margin-right: 4px;
}

.base-cadastro__modo--edicao {
    color: var(--mud-palette-primary);
    background-color: rgba(0, 93, 170, 0.1);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border: 1px solid rgba(0, 93, 170, 0.3);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.base-cadastro__header-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Contexto de registro (ex.: status real) exibido como etiqueta neutra */
.registro-contexto {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    white-space: nowrap;
}

/* =====================================================================
   Seções de formulário agrupadas por contexto (padrão iniciado na tela
   piloto Gerenciar OS; reutilizável em outras telas)
   ===================================================================== */
.form-secao {
    margin-bottom: 16px;
    padding: 12px 16px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background-color: var(--mud-palette-surface);
}

.form-secao__titulo {
    display: block;
    color: var(--mud-palette-primary);
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

/* =====================================================================
   Hierarquia de abas: registro (áreas da tela) > contextuais (conteúdo)
   As abas globais do shell usam .main-layout__tabs.
   ===================================================================== */
.tabs-registro > .mud-tabs-tabbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tabs-registro > .mud-tabs-tabbar .mud-tab {
    min-width: auto;
    min-height: 44px;
    padding: 6px 18px;
    font-weight: 500;
    border-radius: 6px 6px 0 0;
}

.tabs-registro > .mud-tabs-tabbar .mud-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.tabs-registro > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Contextuais: barra segmentada (pílulas), sem sublinhado */
.tabs-contextuais > .mud-tabs-tabbar {
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    padding: 4px;
}

.tabs-contextuais > .mud-tabs-tabbar .mud-tab {
    min-width: auto;
    min-height: 34px;
    padding: 4px 14px;
    font-size: 0.8rem;
    border-radius: 6px;
    border-bottom: none;
}

.tabs-contextuais > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    border-bottom: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.tabs-contextuais > .mud-tabs-tabbar .mud-tab-slider {
    display: none;
}

/* Menu do usuário (avatar): segue o padrão do drawer azul */
.user-menu-popover,
.user-menu-popover .mud-list,
.user-menu-popover .mud-menu-list {
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-drawer-text);
}

.user-menu-popover .user-menu,
.user-menu-popover .user-menu .mud-typography {
    color: #FFFFFF;
}

.user-menu-popover .user-menu__secundario,
.user-menu-popover .user-menu .user-menu__secundario.mud-typography {
    color: rgba(255, 255, 255, 0.75);
}

.user-menu-popover .user-menu__divisor {
    border-color: rgba(255, 255, 255, 0.16);
}

.user-menu-popover .user-menu__botao-secundario {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.5);
}

.user-menu-popover .user-menu__botao-secundario:hover {
    border-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.08);
}

.user-menu-popover .user-menu__botao-principal {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--mud-palette-primary);
}

.user-menu-popover .user-menu__botao-principal:hover {
    background-color: #FFFFFF;
}

/* Faixa de abas do shell (somente o MudTabs do layout principal) */
.main-layout__tabs > .mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.main-layout__tabs > .mud-tabs-tabbar .mud-tab {
    min-height: 44px;
    padding: 6px 16px;
    margin-right: 4px;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-layout__tabs > .mud-tabs-tabbar .mud-tab .mud-icon-root {
    font-size: 1.15rem;
}

.main-layout__tabs > .mud-tabs-tabbar .mud-tab.mud-tab-active {
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    border-bottom-color: transparent;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Barra de abas recolhida (botao no canto da propria barra): a faixa some inteira
   e o conteudo ganha a altura; as paginas continuam vivas. O puxador de restaurar
   flutua no canto direito sem consumir espaco vertical. */
.main-layout__tabs.main-layout__tabs--recolhidas > .mud-tabs-tabbar {
    display: none;
}

.main-layout__tabs-restaurar {
    position: relative;
    height: 0;
    z-index: 20;
}

.main-layout__tabs-restaurar .mud-icon-button {
    position: absolute;
    top: -2px;
    right: 0;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* Diálogo de personalização de atalhos */
.personalizar-atalhos .personalizar-atalhos__disponiveis {
    max-height: min(320px, 45vh);
    overflow-y: auto;
    margin-top: 8px;
}

/* CommandPalette / Todos os módulos */
.command-palette .mud-dialog-content {
    padding: 0;
}

.command-palette__header {
    padding: 8px 20px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.command-palette__body {
    height: min(420px, 65vh);
    overflow-y: auto;
    padding: 4px 12px 12px;
}

.command-palette__categoria {
    display: block;
    margin: 12px 8px 0;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.command-palette__body .mud-list-item {
    border-radius: 6px;
    min-height: 44px;
}

.command-palette__body .mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* DataGrid: cabeçalho com leve destaque e linhas com hover discreto */
.mud-table-head .mud-table-cell {
    font-weight: 600;
}

.mud-table-hover tbody .mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Barra de rolagem fina e discreta (melhora a percepção de acabamento) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 120, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(120, 120, 120, 0.35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(120, 120, 120, 0.55);
}

/* Estado vazio reutilizável (grids/listas sem registros) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.empty-state .mud-icon-root {
    font-size: 3rem;
    opacity: 0.5;
}

/* A tela de busca ocupa exatamente a altura que sobra na janela, e a grade fica com o
   que sobrar depois dos filtros: assim o paginador nunca cai para fora e nao sobra
   faixa vazia embaixo. A altura vem da cadeia do layout, nao de uma conta com a
   viewport - descontar um valor fixo errava para os dois lados, porque o cabecalho e
   os filtros mudam de altura.

   O layout ja entrega quase tudo: o conteudo e uma coluna flex, o MudTabs tambem, e o
   painel ativo usa display:contents, entao a pagina e, na pratica, filha direta dos
   paineis. Falta so deixar esses dois niveis crescerem e permitirem encolher. As regras
   valem so quando existe uma tela de busca dentro, para nao mexer nas demais paginas. */
/* O layout usa min-height: 100dvh, que e um minimo: se a grade for alta, tudo cresce e
   a janela inteira passa a rolar. Para a rolagem ficar so na grade, algum ancestral
   precisa de altura DEFINIDA. O teto e aplicado apenas enquanto a aba ativa e uma tela
   de busca, para nao prender nenhuma outra pagina que precise crescer. */
.main-layout-page:has(.mud-tab-panel-active .busca-padrao-page),
.main-layout-page:has(.mud-tab-panel-active .busca-tipada-page) {
    height: 100dvh;
    overflow: hidden;
}

/* MudMainContent e um bloco dentro do MudLayout (nao um item flex). Sem uma altura
   definida, ele cresce pela altura natural das 20 linhas da tabela; os descendentes
   flex nunca recebem um limite real e o overflow do layout apenas corta o paginador.
   A regra e restrita a aba de busca ativa para as demais telas continuarem crescendo
   normalmente. O box-sizing global faz o 100% incluir os paddings do conteudo. */
.main-layout__content:has(.mud-tab-panel-active .busca-padrao-page),
.main-layout__content:has(.mud-tab-panel-active .busca-tipada-page) {
    height: 100%;
    overflow: hidden;
}

.main-layout-page:has(.mud-tab-panel-active .busca-padrao-page) .main-layout__tabs,
.main-layout-page:has(.mud-tab-panel-active .busca-tipada-page) .main-layout__tabs {
    flex: 1 1 auto;
    min-height: 0;
}

.main-layout__content > .mud-tabs:has(.busca-padrao-page),
.main-layout__content > .mud-tabs:has(.busca-tipada-page) {
    flex: 1 1 auto;
    min-height: 0;
}

.mud-tabs-panels:has(.busca-padrao-page),
.mud-tabs-panels:has(.busca-tipada-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* A busca tipada normalmente vive dentro do BaseSemCadastro. O MudPaper do conteúdo
   ficava entre a cadeia flex do layout e a página da busca, crescia pela altura natural
   da grade e empurrava o paginador para baixo da viewport. As classes são aditivas no
   componente base; só o conteúdo que realmente contém uma busca tipada passa a ocupar o
   espaço restante. O cabeçalho do BaseSemCadastro mantém sua altura natural. */
.mud-tab-panel-active > .base-sem-cadastro__conteudo:has(> .busca-tipada-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.busca-padrao-page,
.busca-tipada-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* A grade e o item que cresce; o resto da tela mantem a altura natural. */
.busca-padrao-page > .busca-padrao-grid,
.busca-tipada-page > .busca-tipada-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* ColumnResizeMode.Container injeta overflow-x:auto na raiz do MudDataGrid.
       Como o paginador tambem e filho dessa raiz, ela passa a rolar e corta o rodape.
       A rolagem pertence exclusivamente ao container da tabela, logo abaixo. */
    overflow: hidden !important;
}

/* Dentro da grade, quem rola e o corpo: cabecalho e paginador ficam visiveis. */
.busca-padrao-grid .mud-table-container,
.busca-tipada-grid .mud-table-container {
    flex: 1 1 auto;
    min-height: 6rem;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto;
}

/* O MudDataGrid deixa o paginador encolher quando sua raiz vira uma coluna flex.
   Ele precisa conservar a altura natural; todo o encolhimento fica no corpo acima. */
.busca-padrao-grid > .mud-table-pagination,
.busca-tipada-grid > .mud-table-pagination {
    flex: 0 0 auto;
    min-height: 52px;
}

.busca-padrao-grid .empty-state {
    min-height: 14rem;
}

/* ==========================================================================
   Grade padrão do sistema

   Receituário visual único das telas de busca. Vale para os dois componentes:
   o BuscaPadrao (consulta configurada no banco, a maioria das telas) e o
   BuscaPadraoTipada (consulta tipada e paginada no servidor, como o CRM).
   Fica aqui, e não no CSS isolado de cada um, porque a única forma de os dois
   ficarem realmente iguais é terem uma fonte só.

   A altura da linha não é fixa: o espaçamento vem do padding, então a linha de
   um valor simples fica confortável e a célula de duas linhas (título e
   complemento, como cliente e contato no CRM) cresce em vez de ser esmagada.
   ========================================================================== */

.grade-padrao .mud-table-head .mud-table-cell {
    padding: 8px 12px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 2px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
    line-height: 1.35;
    white-space: nowrap;
}

.grade-padrao .mud-table-body .mud-table-cell {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.875rem;
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

/* Sem divisória vertical entre colunas: a linha horizontal já separa os
   registros e a leitura fica limpa, como na lista de atendimentos. */
.grade-padrao .mud-table-cell {
    border-inline-end: 0;
}

.grade-padrao .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* --------------------------------------------------------------------------
   Modo card: só no celular.

   O corte é 600px porque é onde o MudDataGrid entra no layout mobile por causa
   de Breakpoint="Breakpoint.Xs". Numa janela de desktop encolhida a tabela com
   rolagem horizontal continua sendo mais útil do que uma lista de campos
   empilhados: são muitas colunas por registro.

   As larguras são impostas porque a grade pode ter largura própria vinda do
   redimensionamento de colunas, e nesse caso o card não ocuparia a tela toda.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    /* No celular os registros viram cards e a rolagem volta a ser da página. */
    .main-layout-page:has(.mud-tab-panel-active .busca-padrao-page),
    .main-layout-page:has(.mud-tab-panel-active .busca-tipada-page) {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }

    .main-layout__content:has(.mud-tab-panel-active .busca-padrao-page),
    .main-layout__content:has(.mud-tab-panel-active .busca-tipada-page) {
        height: auto;
        overflow: visible;
    }

    .mud-tabs-panels:has(.busca-padrao-page),
    .mud-tabs-panels:has(.busca-tipada-page),
    .mud-tab-panel-active > .base-sem-cadastro__conteudo:has(> .busca-tipada-page) {
        display: block;
        overflow: visible;
    }

    /* A página da busca é uma coluna flex; no modo card nada depende disso, e o
       bloco simples evita qualquer interferência do contexto flex na largura. */
    .busca-padrao-page,
    .busca-tipada-page {
        display: block;
        flex: none;
        height: auto;
        min-height: 0;
    }

    /* No card a largura e imposta em todos os niveis: a grade pode ter largura propria
       vinda do redimensionamento de colunas, e ai o card nao ocupa a tela. O contexto
       flex da altura tambem sai de cena, porque no celular quem rola e a pagina. */
    .grade-padrao,
    .busca-padrao-page > .busca-padrao-grid,
    .busca-tipada-page > .busca-tipada-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .grade-padrao .mud-table-container {
        display: block !important;
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible;
    }

    /* O cabeçalho de colunas não faz sentido quando cada linha vira um card. */
    .grade-padrao thead,
    .grade-padrao .mud-table-head {
        display: none;
    }

    /* Larguras de coluna definidas pelo redimensionamento não valem no card. */
    .grade-padrao colgroup,
    .grade-padrao col {
        display: none !important;
        width: auto !important;
    }

    /* A tabela inteira vira bloco: assim ela preenche o container em vez de encolher
       ate o conteudo, e as celulas empilham mantendo rotulo e valor na mesma linha.
       Com a tabela em layout fixo a largura ficava certa, mas o
       valor do campo sumia: so o rotulo aparecia no card. */
    .grade-padrao table,
    .grade-padrao .mud-table-root {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .grade-padrao tbody,
    .grade-padrao .mud-table-body {
        display: block !important;
        width: 100% !important;
    }

    /* Cada linha vira um card que ocupa a largura toda. */
    .grade-padrao tbody tr,
    .grade-padrao .mud-table-body .mud-table-row {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        margin-bottom: 8px;
        background-color: var(--mud-palette-surface);
    }

    /* Rótulo à esquerda, valor à direita, com o texto quebrando livremente. */
    .grade-padrao tbody td,
    .grade-padrao .mud-table-body .mud-table-cell {
        display: flex !important;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        height: auto !important;
        white-space: normal;
    }

    .grade-padrao .mud-table-body .mud-table-row .mud-table-cell:last-child {
        border-bottom: 0;
    }

    .grade-padrao .empty-state {
        min-height: 0;
    }
}

/* ==========================================================================
   Campo com botão de ação ao lado

   Receituário único dos blocos "campo + botão" do CRM: cadastro rápido de
   cliente na abertura, adicionar produto e as ações do campo adicional de
   arquivo. Fica aqui, e não no CSS isolado de cada componente, porque as três
   cópias anteriores já haviam divergido entre si e é justamente essa
   divergência que desalinhava os botões.

   O alinhamento é o ponto sensível. O MudBlazor dá 8px de margem superior ao
   campo denso outlined com rótulo
   (.mud-input-control-margin-dense.mud-input-outlined-with-label), então
   alinhar o botão pelo topo do container o deixava 8px acima da caixa do
   campo. Zerar a margem do campo alinhava os dois entre si, mas levantava a
   célula inteira em relação aos campos vizinhos da mesma linha. O botão
   acompanhar a margem do campo é o único jeito de ficar alinhado com o campo
   ao lado E com a linha.

   A caixa do campo denso outlined tem 40px (padding de 10.5px em cima e
   embaixo), que é a medida do botão: com o box-sizing border-box global do
   MudBlazor, o quadrado de 40px fecha exatamente com o campo.
   ========================================================================== */

.crm-campo-com-acao {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.crm-campo-com-acao > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* O botão pode vir embrulhado num tooltip: o wrapper não pode virar uma caixa
   de largura própria nem deixar o botão encolher. */
.crm-campo-com-acao .mud-tooltip-root {
    display: flex;
    flex: 0 0 auto;
}

/* Só o botão de AÇÃO ao lado do campo — filho direto ou dentro do tooltip.
   O seletor descendente pegava também o X de limpar DENTRO do MudTextField
   (que também é .mud-icon-button): com 40px e margem, o X esticava o campo
   de 40 para 48px assim que um registro era selecionado. */
.crm-campo-com-acao > .mud-icon-button,
.crm-campo-com-acao .mud-tooltip-root > .mud-icon-button {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-top: 8px;
    border-radius: var(--mud-default-borderradius);
}

/* ==========================================================================
   Workspace do atendimento: altura da cadeia do layout e rolagem por coluna

   Mesma decisão já tomada para as telas de busca — a altura vem da cadeia do
   layout, nunca de uma conta com a viewport — mas aqui o objetivo é outro: o
   atendente precisa ler o fim da linha do tempo e, ao mesmo tempo, conferir um
   dado do card da esquerda ou um campo adicional lá embaixo, sem arrastar a
   página inteira e perder a conversa de vista.

   Para uma coluna rolar sozinha, algum ancestral precisa ter altura DEFINIDA.
   O layout usa min-height: 100dvh, que é um mínimo: sem um teto real, tudo
   cresce e quem rola volta a ser a janela. As regras valem apenas enquanto a
   aba ativa contém o workspace, para não prender nenhuma outra tela.
   ========================================================================== */

.main-layout-page:has(.mud-tab-panel-active .crm-workspace-page) {
    height: 100dvh;
    overflow: hidden;
}

.main-layout__content:has(.mud-tab-panel-active .crm-workspace-page) {
    height: 100%;
    overflow: hidden;
}

.main-layout-page:has(.mud-tab-panel-active .crm-workspace-page) .main-layout__tabs {
    flex: 1 1 auto;
    min-height: 0;
}

.main-layout__content > .mud-tabs:has(.crm-workspace-page) {
    flex: 1 1 auto;
    min-height: 0;
}

.mud-tabs-panels:has(.crm-workspace-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* O MudPaper de conteúdo do BaseSemCadastro fica entre a cadeia flex do layout e a
   página do workspace; sem participar do flex ele cresce pela altura natural das três
   colunas e o teto nunca chega até elas. */
.mud-tab-panel-active > .base-sem-cadastro__conteudo:has(> .crm-workspace-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Abaixo de 1280px as colunas empilham e quem rola volta a ser a página: três áreas de
   rolagem pequenas, uma embaixo da outra, seriam piores do que uma só. */
@media (max-width: 1279.98px) {
    .main-layout-page:has(.mud-tab-panel-active .crm-workspace-page) {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }

    .main-layout__content:has(.mud-tab-panel-active .crm-workspace-page) {
        height: auto;
        overflow: visible;
    }

    .mud-tabs-panels:has(.crm-workspace-page),
    .mud-tab-panel-active > .base-sem-cadastro__conteudo:has(> .crm-workspace-page) {
        display: block;
        overflow: visible;
    }
}

/* ===== Início em altura total =====
   Mesmo mecanismo das telas de busca e do workspace de CRM: com a aba "Início" ativa,
   a cadeia do layout recebe altura definida e a página cresce até o fim da área útil,
   sem faixa vazia entre os cards e o fim da página. Se faltar altura (telas baixas),
   a rolagem acontece dentro da própria página do Início (overflow-y no .home-page).
   As regras valem só com o Início ativo, para não mexer nas demais páginas. */
.main-layout-page:has(.mud-tab-panel-active > .home-page) {
    height: 100dvh;
    overflow: hidden;
}

.main-layout__content:has(.mud-tab-panel-active > .home-page) {
    height: 100%;
    overflow: hidden;
}

.main-layout-page:has(.mud-tab-panel-active > .home-page) .main-layout__tabs {
    flex: 1 1 auto;
    min-height: 0;
}

.mud-tabs-panels:has(> .mud-tab-panel-active > .home-page) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ===== Menu recolhido: trilho de ícones + flyout à direita ===== */
.menu-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}

.menu-rail .menu-rail__btn {
    color: var(--mud-palette-drawer-icon);
}

.menu-rail .menu-rail__btn:hover,
.menu-rail .menu-rail__btn:focus-visible {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.12);
}

.mud-popover.menu-rail__flyout {
    min-width: 240px;
    padding: 6px 4px;
}

.menu-rail__flyout-titulo {
    padding: 6px 16px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ===== Popovers de seleção (MudSelect, MudMenu, autocomplete) =====
   Cartão flutuante único para todo dropdown do sistema: cantos arredondados,
   borda sutil, sombra suave e itens com respiro e raio próprio. */
.mud-popover:has(.mud-list) {
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 4px;
    /* O MudSelect aplica o mesmo max-height no popover e na lista interna
       (que o herda via max-height: inherit). Com border-box, o padding e a
       borda acima comem 10px do popover e a lista estoura, criando um
       segundo scroll de 10px por fora do scroll da lista. Com content-box
       o teto vale para o conteudo — a lista cabe exata e sobra um scroll. */
    box-sizing: content-box;
}

.mud-popover .mud-list .mud-list-item {
    border-radius: 6px;
    margin: 1px 2px;
    min-height: 38px;
}

.mud-popover .mud-list .mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Opcao de macro com o olho de pre-visualizacao (compositor de e-mail do CRM).
   A regra vive aqui porque o popover do MudSelect e teleportado para fora da
   pagina e o CSS isolado do compositor nao o alcanca. */
.mud-popover .crm-macro-opcao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.mud-popover .crm-macro-opcao__olho {
    display: inline-flex;
}

/* Item selecionado: tom primário discreto em vez da barra chapada */
.mud-popover .mud-list .mud-list-item.mud-selected-item {
    background-color: rgba(0, 93, 170, 0.10);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* ===== Diálogos: acabamento padrão ===== */
.mud-dialog:not(.mud-dialog-fullscreen) {
    border-radius: 10px;
}

.mud-dialog .mud-dialog-title {
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px 24px;
    gap: 8px;
}

/* ===== Diálogo de busca padrão (.busca-dialog) =====
   Mesmo receituário visual da tela de busca: filtros em linha, grade com
   cabeçalho cinza e densidade legível, seleção tonal com filete primário. */
.busca-dialog__filtros {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* Zera a margem do rótulo dos campos dense/outlined para a linha partir do topo.
   Especificidade 0,3,0: precisa vencer .mud-input-control-margin-dense
   .mud-input-outlined-with-label do MudBlazor (mesmo efeito do CSS escopado da
   tela de busca, que ganha pelo atributo de escopo). */
.busca-dialog__filtros .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
}

.busca-dialog__filtro-campo,
.busca-dialog__filtro-condicao {
    flex: 1 1 160px;
    min-width: 140px;
}

@media (min-width: 960px) {
    .busca-dialog__filtro-campo,
    .busca-dialog__filtro-condicao {
        max-width: 240px;
    }
}

.busca-dialog__filtro-valor {
    flex: 3 1 240px;
    min-width: 200px;
}

.busca-dialog__filtro-acao {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
}

.busca-dialog__filtro-acao .mud-tooltip-root {
    display: flex;
}

.busca-dialog__filtro-acao .mud-button-root {
    height: 40px;
    margin-top: 0;
}

/* Toolbar da grade: filtro rápido à esquerda, contagem à direita */
.busca-dialog .mud-table-toolbar {
    height: auto;
    padding: 10px 12px 4px;
    gap: 12px;
    align-items: center;
}

.busca-dialog__toolbar-filtro {
    flex: 1 1 auto;
    max-width: 420px;
}

.busca-dialog__contagem {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}


/* Linha selecionada nas grades de busca: destaque tonal com filete primário,
   no lugar do bloco azul chapado com texto branco. */
.busca-padrao-grid .mud-table-row.selected > .mud-table-cell {
    background-color: rgba(0, 93, 170, 0.12) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.busca-padrao-grid .mud-table-row.selected > .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* O cabeçalho da coluna também seleciona o campo do filtro (gesto do Desktop). */
.busca-dialog .busca-padrao-grid .mud-table-head .mud-table-cell {
    cursor: pointer;
}

/* Coluna do filtro ativa: o cabeçalho clicado fica destacado até trocar de campo. */
.busca-padrao-grid .mud-table-head .mud-table-cell.bp-coluna-ativa {
    color: var(--mud-palette-primary);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--mud-palette-primary);
}

/* A setinha de ordenação fica sempre visível (é ela que ordena; o título só
   escolhe o campo do filtro). Opacidade cheia no hover e quando ordenada. */
.busca-padrao-grid .mud-table-head .sort-direction-icon {
    opacity: 0.35;
    transition: opacity 120ms ease;
}

.busca-padrao-grid .mud-table-head .mud-table-cell:hover .sort-direction-icon,
.busca-padrao-grid .mud-table-head .sort-direction-icon.mud-direction-asc,
.busca-padrao-grid .mud-table-head .sort-direction-icon.mud-direction-desc {
    opacity: 1;
}

.busca-dialog .busca-padrao-grid .mud-table-body .mud-table-row {
    cursor: pointer;
}