/* MDI (abas por rotina, estilo TOTVS) — rotinas em iframes + página de abas abertas + botão "Abas".
   Injetado globalmente via UNFOLD['STYLES']. Usa as variáveis de cor do Unfold (tema claro/escuro).
   Progressivo: se o JS não rodar, nada disto aparece e a navegação é a normal. */

/* Sem isto, o navegador não sabe que o tema está escuro e desenha os controles NATIVOS (barra de
   rolagem, inputs de data/hora, etc.) sempre no estilo claro — aparecia como uma faixa clara/branca
   se destacando muito em cima do fundo escuro (parecia um "espaço em branco" na tela). */
html.dark { color-scheme: dark; }
html:not(.dark) { color-scheme: light; }

/* Barra de rolagem discreta em toda página (mesmo estilo já usado no menu lateral, `.menu-scroll`
   em navigation.html) — evita a barra padrão do navegador (larga, cinza-chapada) chamando atenção
   demais quando sobra só uma tira pequena de conteúdo pra rolar. */
html { scrollbar-width: thin; scrollbar-color: rgba(120,120,120,.45) transparent; }
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(120,120,120,.45); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
html:hover::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb:hover { background: rgba(120,120,120,.75); background-clip: content-box; }

/* ---------- Modo EMBUTIDO (a rotina renderizada dentro de uma aba/iframe) ----------
   Esconde só o menu lateral. O CABEÇALHO da rotina PERMANECE — é ele que traz o título, o badge de
   filial, o botão "Colunas" (informações visíveis), o "+" adicionar e as ações da tela.
   #main vira uma coluna flex do tamanho exato da tela (sem rolar a página toda): o cabeçalho/
   mensagens ficam FIXOS, e só o bloco que envolve #content (busca, filtros, tabela) rola por
   dentro. Antes (min-height:100vh) a página inteira crescia e rolava junto — o cabeçalho sumia de
   vista ao rolar pra ver a tabela, e sobrava uma barra de rolagem de página só por causa disso. */
html.mdi-embedded #page > div:first-child { display: none !important; }   /* coluna do menu */
html.mdi-embedded #main { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* O rodapé da listagem ({% block footer %} do change_list.html — a contagem/paginação, ex.: "13
   Pedidos de Venda") vem com `position: sticky; bottom: 0`, pensado pro modelo antigo (a PÁGINA
   TODA rolando). Nesse modelo novo (só a tabela rola, #main tem altura fixa), esse "sticky" gruda
   sempre no fundo de #main inteiro — cobrindo por cima o canto onde ficaria a barra de rolagem
   HORIZONTAL da tabela (ela existe, funciona, só não aparece nem recebe clique, tampada por esse
   rodapé). `static` faz ele só ocupar o espaço dele mesmo, no lugar certo, sem sobrepor nada. */
html.mdi-embedded #main > div:last-child { position: static !important; }

/* A busca a seguir tentou primeiro deixar só UM ancestral rolando (com `position: sticky` na barra
   de busca/filtros por cima). Só que a TABELA já tem sua própria rolagem própria, via uma
   biblioteca (simplebar) que desenha a barrinha dela mesma — com um ancestral TAMBÉM rolando
   (overflow-y:auto), sobravam 3 barras juntas (a minha + a nativa por baixo do simplebar + a do
   simplebar). Correção: NENHUM ancestral rola — só repasso a ALTURA (flex + min-height:0) até
   chegar no container que o simplebar já controla, pra ele ser o ÚNICO a rolar de verdade. Cada
   seletor abaixo é um nível dessa cadeia, do #main até a tabela (ver change_list.html do Unfold). */
html.mdi-embedded #main > div:has(> #content) { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
html.mdi-embedded #content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* A cadeia daqui pra baixo (#changelist, .overflow-x-auto) só existe em telas de LISTAGEM — nelas,
   #content não rola (a tabela, mais abaixo, é quem rola, via simplebar). Em QUALQUER outra tela
   (formulário de edição, telas customizadas, dashboard...) não existe essa cadeia, então #content
   TEM que rolar ele mesmo — senão o conteúdo mais alto que a tela fica preso, sem jeito de ver o
   resto (foi o que quebrou: toda tela SEM tabela perdeu a rolagem). */
html.mdi-embedded #content:not(:has(#changelist)) { overflow-y: auto; }
html.mdi-embedded #content:has(#changelist) { overflow: hidden; }
/* #content-main é um DIV comum (display:block) entre #content e #changelist — sem esta regra, a
   cadeia flex parava aqui: #changelist crescia do tamanho natural dela (maior que o espaço
   sobrando), #content-main acompanhava esse tamanho, e o overflow:hidden do #content (acima) só
   CORTAVA o excesso ao invés de deixar a tabela encolher pra rolar por dentro — cortava bem a
   faixa de baixo, onde ficaria a barra de rolagem horizontal (por isso ela nunca aparecia). */
html.mdi-embedded #content:has(#changelist) #content-main { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
html.mdi-embedded #changelist { flex: 1 1 auto; min-height: 0; overflow: hidden; }
html.mdi-embedded #changelist .result-list-wrapper { min-height: 0; overflow: hidden; }
html.mdi-embedded #changelist .result-list-wrapper > .grow.min-w-0 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
html.mdi-embedded #changelist-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* NÃO force overflow-y aqui (já tentei "hidden": a lib de rolagem da tabela, simplebar, lê esse
   valor pra decidir se ativa a rolagem vertical — "hidden" faz ela DESISTIR de rolar, e as linhas
   de baixo ficam inacessíveis, sem barra nenhuma). Só o tamanho (flex + min-height:0); o resto é
   o simplebar quem cuida, inclusive escondendo a rolagem nativa dele mesmo — só que, com a altura
   agora vindo do flex, sobra ~2px de overflow VERTICAL neste mesmo elemento (fora do simplebar),
   o suficiente pra o navegador desenhar a PRÓPRIA barra dele, colada ao lado da do simplebar (2
   barras). Solução: escondemos só a APARÊNCIA dessa nativa VERTICAL (":vertical", webkit) — a
   horizontal (rolagem da tabela larga) continua normal, e o overflow-y continua "auto" (é isso
   que o simplebar precisa ler pra funcionar; só a pele da barra nativa que não aparece mais). */
/* flex-grow ZERO (não 1): com grow, esta caixa (que tem borda visível) sempre ESTICAVA até o fundo
   do espaço disponível, mesmo com poucas linhas — sobrava um vão vazio enorme dentro da borda, com
   a barra horizontal "flutuando" longe da última linha. Sem grow ela abraça o tamanho do CONTEÚDO;
   o max-height (que só existe porque toda a cadeia acima tem altura definida, via flex) é quem
   entra em ação SÓ quando a tabela é mais alta que o espaço — aí sim ela para no limite e rola por
   dentro (o comportamento que já tínhamos pra tabelas grandes continua igual). */
html.mdi-embedded #changelist-form > .overflow-x-auto { flex: 0 1 auto; min-height: 0; max-height: 100%; }
html.mdi-embedded #changelist-form > .overflow-x-auto::-webkit-scrollbar:vertical { width: 0; height: 0; }

/* ---------- Casca (janela do topo) ---------- */
html.mdi-shell #main { height: 100vh; overflow: hidden; }
/* Esconde TUDO que o Django/Unfold renderizou dentro de #main no primeiro carregamento — cabeçalho,
   conteúdo (reaparece no iframe da 1ª aba) e também o RODAPÉ (contagem de itens/paginação, que vem
   de {% block footer %} no change_list.html). Regra genérica por exclusão (":not(#mdi-host)"), em
   vez de listar cada bloco um por um — assim cobre qualquer bloco novo do Django/Unfold sem
   precisar lembrar de atualizar aqui. Sem isto, o rodapé (ex.: "1 Pedido de Compra") não tinha
   regra que o escondesse e sobrava flutuando no topo da tela (o que vinha antes dele colapsava).*/
html.mdi-shell #main > *:not(#mdi-host) { display: none !important; }

/* Área das rotinas (iframes empilhados) */
#mdi-host { flex: 1 1 auto; min-height: 0; position: relative; background: var(--color-base-50); }
.dark #mdi-host, :root[data-theme="dark"] #mdi-host { background: var(--color-base-900); }
.mdi-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mdi-frame[hidden] { display: none; }

/* ---------- Botão "Abas" (no topo do menu lateral) ---------- */
#mdi-abas-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 0 auto;
    margin: 2px 12px 8px; padding: 9px 14px; border-radius: 9px;
    border: 1px solid var(--color-primary-700);
    background: var(--color-primary-600); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
#mdi-abas-btn:hover { background: var(--color-primary-700); }
#mdi-abas-btn .material-symbols-outlined { font-size: 20px; }
#mdi-abas-btn.aberto { background: var(--color-base-700); border-color: var(--color-base-600); }
/* Fallback (sem menu na tela): flutua no canto inferior direito. */
#mdi-abas-btn.flutuante {
    position: fixed; bottom: 16px; right: 16px; z-index: 60; margin: 0;
    border-radius: 9999px; padding: 10px 16px; box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* ---------- Página de abas abertas (só-leitura) ---------- */
#mdi-overview {
    position: absolute; inset: 0; z-index: 20;
    background: var(--color-base-50); overflow: auto;
    padding: 28px 28px 90px 28px;
}
.dark #mdi-overview, :root[data-theme="dark"] #mdi-overview { background: var(--color-base-900); }
.mdi-ov-cab { font-size: 16px; font-weight: 700; color: var(--color-font-important-light, #111827); }
.dark .mdi-ov-cab, :root[data-theme="dark"] .mdi-ov-cab { color: var(--color-font-important-dark, #f9fafb); }
.mdi-ov-sub { font-size: 12px; color: var(--color-font-subtle-light, #6b7280); margin: 4px 0 20px; }
.dark .mdi-ov-sub, :root[data-theme="dark"] .mdi-ov-sub { color: var(--color-font-subtle-dark, #9ca3af); }

.mdi-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

.mdi-card {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 12px; border-radius: 10px;
    border: 1px solid var(--color-base-200);
    background: var(--color-base-100);
    cursor: pointer; user-select: none;
}
.dark .mdi-card, :root[data-theme="dark"] .mdi-card { background: var(--color-base-800); border-color: var(--color-base-700); }
.mdi-card:hover { border-color: var(--color-base-300); }
.dark .mdi-card:hover, :root[data-theme="dark"] .mdi-card:hover { border-color: var(--color-base-600); }
.mdi-card.ativa { border-color: var(--color-primary-500); }
.mdi-card.sel { outline: 2px solid var(--color-primary-400); outline-offset: 1px; }

.mdi-card .ic { font-size: 22px; color: var(--color-primary-600); flex: 0 0 auto; }
.dark .mdi-card .ic, :root[data-theme="dark"] .mdi-card .ic { color: var(--color-primary-400); }
.mdi-card .tit {
    flex: 1 1 auto; font-size: 13px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-font-default-light, #374151);
}
.dark .mdi-card .tit, :root[data-theme="dark"] .mdi-card .tit { color: var(--color-font-default-dark, #d1d5db); }
.mdi-card .atual {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 9999px;
    background: var(--color-primary-100); color: var(--color-primary-700); flex: 0 0 auto;
}
.dark .mdi-card .atual, :root[data-theme="dark"] .mdi-card .atual { background: rgba(1,156,222,.2); color: var(--color-primary-300); }
.mdi-card .x { font-size: 18px; color: var(--color-font-subtle-light, #9ca3af); flex: 0 0 auto; opacity: .6; }
.mdi-card .x:hover { opacity: 1; color: var(--color-primary-600); }

/* ---------- Diálogo "qual aba fechar" (ao abrir a 5ª com o limite atingido) ---------- */
#mdi-modal {
    position: fixed; inset: 0; z-index: 80;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.mdi-modal-box {
    width: 100%; max-width: 440px;
    background: var(--color-base-50); border: 1px solid var(--color-base-200);
    border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    padding: 20px;
}
.dark .mdi-modal-box, :root[data-theme="dark"] .mdi-modal-box { background: var(--color-base-900); border-color: var(--color-base-700); }
.mdi-modal-tit { font-size: 15px; font-weight: 700; color: var(--color-font-important-light, #111827); }
.dark .mdi-modal-tit, :root[data-theme="dark"] .mdi-modal-tit { color: var(--color-font-important-dark, #f9fafb); }
.mdi-modal-txt { font-size: 13px; color: var(--color-font-subtle-light, #6b7280); margin: 6px 0 14px; }
.dark .mdi-modal-txt, :root[data-theme="dark"] .mdi-modal-txt { color: var(--color-font-subtle-dark, #9ca3af); }

.mdi-modal-lista { display: flex; flex-direction: column; gap: 8px; }
.mdi-modal-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border-radius: 9px; cursor: pointer; text-align: left;
    border: 1px solid var(--color-base-200); background: var(--color-base-100);
}
.dark .mdi-modal-item, :root[data-theme="dark"] .mdi-modal-item { background: var(--color-base-800); border-color: var(--color-base-700); }
.mdi-modal-item:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); }
.dark .mdi-modal-item:hover, :root[data-theme="dark"] .mdi-modal-item:hover { background: rgba(1,156,222,.15); }
.mdi-modal-item .ic { font-size: 20px; color: var(--color-primary-600); flex: 0 0 auto; }
.dark .mdi-modal-item .ic, :root[data-theme="dark"] .mdi-modal-item .ic { color: var(--color-primary-400); }
.mdi-modal-item .tit {
    flex: 1 1 auto; font-size: 13px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-font-default-light, #374151);
}
.dark .mdi-modal-item .tit, :root[data-theme="dark"] .mdi-modal-item .tit { color: var(--color-font-default-dark, #d1d5db); }
.mdi-modal-item .fech { font-size: 17px; color: var(--color-font-subtle-light, #9ca3af); flex: 0 0 auto; }
.mdi-modal-item:hover .fech { color: var(--color-primary-600); }

.mdi-modal-acoes { display: flex; justify-content: flex-end; margin-top: 16px; }
.mdi-modal-cancelar {
    padding: 8px 16px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
    border: 1px solid var(--color-base-300); background: var(--color-base-100);
    color: var(--color-font-default-light, #374151);
}
.dark .mdi-modal-cancelar, :root[data-theme="dark"] .mdi-modal-cancelar { background: var(--color-base-800); border-color: var(--color-base-600); color: var(--color-font-default-dark, #d1d5db); }
.mdi-modal-cancelar:hover { border-color: var(--color-base-400); }

/* ---------- Etiquetas (chips) de filtros ativos, abaixo da busca ---------- */
.mdi-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; }
.mdi-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px;
    border: 1px solid var(--color-base-200); border-radius: 999px; background: var(--color-base-50);
    font-size: 12px; line-height: 1; white-space: nowrap;
    color: var(--color-font-default-light, #374151);
}
.dark .mdi-chip, :root[data-theme="dark"] .mdi-chip {
    background: var(--color-base-800); border-color: var(--color-base-700);
    color: var(--color-font-default-dark, #d1d5db);
}
.mdi-chip .rot { font-weight: 500; }
.mdi-chip button {
    border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center;
    padding: 2px; border-radius: 999px; color: var(--color-font-subtle-light, #9ca3af);
}
.mdi-chip button:hover { color: var(--color-primary-600); background: var(--color-base-200); }
.dark .mdi-chip button:hover, :root[data-theme="dark"] .mdi-chip button:hover { background: var(--color-base-700); }
.mdi-chip button .material-symbols-outlined { font-size: 15px; }
.mdi-chip-limpar {
    font-size: 12px; font-weight: 500; color: var(--color-primary-600); text-decoration: none;
    cursor: pointer; margin-left: 4px; white-space: nowrap; background: transparent; border: 0;
}
.mdi-chip-limpar:hover { text-decoration: underline; }

/* Colunas como ícone (só o símbolo; rótulo via tooltip title) */
.mdi-colunas-icone { padding-left: 9px !important; padding-right: 9px !important; gap: 0 !important; }

/* "Todas as filiais" reposicionado ao lado do chip de filial (topo) */
.mdi-filiais-topo { font-size: 12px !important; }

/* ---------- Filtro avançado (gatilho + modal construtor) ---------- */
.mdi-af-gatilho {
    display: flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 4px;
    padding: 8px 10px; border: 1px dashed var(--color-base-300); border-radius: 8px;
    background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--color-primary-600);
}
.mdi-af-gatilho:hover { background: var(--color-base-50); border-color: var(--color-primary-500); }
.dark .mdi-af-gatilho:hover, :root[data-theme="dark"] .mdi-af-gatilho:hover { background: var(--color-base-800); }
.mdi-af-gatilho .material-symbols-outlined { font-size: 18px; }

.mdi-af-overlay {
    position: fixed; inset: 0; z-index: 100000; background: rgba(17,24,39,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mdi-af-modal {
    width: 100%; max-width: 680px; max-height: 88vh; overflow: auto;
    background: var(--color-base-50); border: 1px solid var(--color-base-200); border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3); color: var(--color-font-default-light, #374151);
}
.dark .mdi-af-modal, :root[data-theme="dark"] .mdi-af-modal {
    background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-font-default-dark, #d1d5db);
}
.mdi-af-cabec { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--color-base-200); }
.dark .mdi-af-cabec, :root[data-theme="dark"] .mdi-af-cabec { border-color: var(--color-base-700); }
.mdi-af-titulo { font-size: 15px; font-weight: 600; }
.mdi-af-x { margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--color-font-subtle-light, #9ca3af); display: inline-flex; }
.mdi-af-x:hover { color: var(--color-primary-600); }
.mdi-af-corpo { padding: 16px 18px; }
.mdi-af-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mdi-af-topo-rot { font-size: 13px; color: var(--color-font-subtle-light, #6b7280); }
.mdi-af-linhas { display: flex; flex-direction: column; gap: 8px; }
.mdi-af-linha { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr auto; gap: 8px; align-items: center; }
.mdi-af-valor { display: flex; gap: 6px; }
.mdi-af-modal select, .mdi-af-modal input {
    width: 100%; min-width: 0; height: 34px; padding: 0 8px; font-size: 13px;
    border: 1px solid var(--color-base-300); border-radius: 8px;
    background: var(--color-base-50); color: inherit;
}
.dark .mdi-af-modal select, .dark .mdi-af-modal input,
:root[data-theme="dark"] .mdi-af-modal select, :root[data-theme="dark"] .mdi-af-modal input {
    background: var(--color-base-800); border-color: var(--color-base-600);
}
.mdi-af-modal select[multiple] { height: auto; min-height: 60px; }
.mdi-af-rem { border: 0; background: transparent; cursor: pointer; color: var(--color-font-subtle-light, #9ca3af); display: inline-flex; }
.mdi-af-rem:hover { color: var(--color-primary-600); }
.mdi-af-add {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
    border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--color-primary-600);
}
.mdi-af-add .material-symbols-outlined { font-size: 18px; }
.mdi-af-rodape { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--color-base-200); }
.dark .mdi-af-rodape, :root[data-theme="dark"] .mdi-af-rodape { border-color: var(--color-base-700); }
.mdi-af-espaco { flex: 1; }
.mdi-af-aplicar {
    padding: 8px 18px; border-radius: 8px; border: 0; cursor: pointer; font-size: 13px; font-weight: 600;
    background: var(--color-primary-600); color: #fff;
}
.mdi-af-aplicar:hover { background: var(--color-primary-700); }
.mdi-af-limpar, .mdi-af-cancelar {
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500;
    border: 1px solid var(--color-base-300); background: transparent; color: inherit;
}
.mdi-af-limpar:hover, .mdi-af-cancelar:hover { border-color: var(--color-base-400); }