/*
 * O que o 98.css não traz: fonte de interface, densidade de ERP e o
 * comportamento de aplicação (janela que ocupa a tela, menu no alto, grade).
 *
 * O 98.css desenha os controles — inclusive os botões da barra de título, que o
 * classic-stylesheets não desenhava. Foi por isso que trocamos de base.
 */

/* A pixelada do Windows 98. Fica de reserva: a Tahoma lê melhor em tela
   moderna, mas quando ela falta é a MS Sans Serif que segura o tom.
   ⚠️ Os dois formatos vão num `src` só. O 98.css declara dois `src`
   separados, e o segundo apaga o primeiro — é por isso que ele pedia um
   .woff2 que não existia e devolvia 404 no console. */
@font-face {
    font-family: "MS Sans Serif";
    src: url("ms_sans_serif.woff2") format("woff2"),
         url("ms_sans_serif.woff") format("woff");
    font-weight: normal;
}
@font-face {
    font-family: "MS Sans Serif";
    src: url("ms_sans_serif_bold.woff2") format("woff2"),
         url("ms_sans_serif_bold.woff") format("woff");
    font-weight: bold;
}

:root {
    --fonte: Tahoma, "Segoe UI", "MS Sans Serif", Geneva, sans-serif;

    /* Era 11px. Subiu por pedido — e o A-/A+ da barra de status mexe daqui,
       entre 11 e 16, guardando a escolha no navegador. */
    --corpo: 12px;
}

html, body {
    font-family: var(--fonte);
    font-size: var(--corpo);
    margin: 0;
    height: 100%;
    color: #222;
}

button, input, select, textarea, table, legend, .title-bar-text {
    font-family: var(--fonte);
    font-size: var(--corpo);
}

/* --- A janela ocupa a tela, como aplicação, não como cartão centralizado --- */
body.aplicacao {
    padding: 6px;
    box-sizing: border-box;
    background: #008080;   /* o verde-azulado da área de trabalho */
    overflow: hidden;
}
body.aplicacao > .window {
    height: calc(100vh - 12px);
    display: flex;
    flex-direction: column;
}
body.aplicacao > .window > .window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 4px 4px 2px;
}

/* Maximizada: sem margem nenhuma, a janela é a tela. */
body.aplicacao.cheia { padding: 0; }
body.aplicacao.cheia > .window { height: 100vh; }

/* Minimizada: sobra a barra de título, como janela recolhida. */
body.aplicacao.recolhida > .window { height: auto; }
body.aplicacao.recolhida > .window > .window-body,
body.aplicacao.recolhida > .window > .status-bar { display: none; }

/* --- Barra de título: mais alta, e colorida sempre --- */
/* O cinza do tema anterior vinha de InactiveCaption, cor de sistema que muda
   quando a janela perde foco. Aqui o gradiente é literal: não desbota. */
.title-bar {
    padding: 5px 3px 5px 6px;
    flex-shrink: 0;
}
.title-bar-text {
    font-size: calc(var(--corpo) + 1px);
    margin-right: 24px;
}
.title-bar-controls button {
    min-height: 16px;
    min-width: 18px;
}

/* --- Barra de menu, no alto, alinhada à esquerda --- */
.barra-menu {
    display: flex;
    align-items: center;
    gap: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid grey;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.barra-menu a {
    padding: 3px 10px;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}
.barra-menu a:hover { border: 1px outset; }
.barra-menu a[aria-current="page"] { border: 1px inset; font-weight: bold; }
.barra-menu .quem { padding: 3px 8px; color: #444; }
.barra-menu button { min-width: 54px; padding: 2px 8px; }

/* --- Conteúdo rola; o resto fica fixo --- */
/* É flex column para que a tela cheia possa esticar até o rodapé. Sem isto,
   `height:100%` dentro dele resolve para auto — o pai é um flex item, cuja
   altura vem do flex, não de uma altura declarada — e a grade para na última
   linha deixando faixa cinza embaixo. */
.conteudo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    display: flex;
    flex-direction: column;
}
.conteudo > * { flex-shrink: 0; }
.conteudo > .tela-cheia { flex: 1; min-height: 0; }

/* --- Grade densa, no espírito do DBGrid --- */
table.grade { width: 100%; border-collapse: collapse; background: #fff; }
table.grade th, table.grade td {
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid #c0c0c0;
}
table.grade th {
    position: sticky; top: 0; z-index: 1;
    background: silver;
    font-weight: normal;
    border-bottom: 1px solid grey;
    box-shadow: inset -1px -1px grey, inset 1px 1px #fff;
}
table.grade td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grade tbody tr:nth-child(2n) { background: #f2f2f2; }
table.grade tbody tr:hover { background: navy; color: #fff; }
table.grade tbody tr:hover a { color: #fff; }
table.grade a { color: navy; }

/* O rodapé de totais: fica colado embaixo enquanto a grade rola. */
table.grade tfoot td {
    position: sticky; bottom: 0; z-index: 1;
    background: silver;
    font-weight: bold;
    border-top: 1px solid grey;
    box-shadow: inset 1px 1px #fff;
}

/* .sunken-panel é do 98.css e substitui a antiga .rolagem. Esta classe faz
   a grade ocupar toda a altura que sobrar, em vez de uma fração da tela. */
.painel-cheio { flex: 1; min-height: 0; }
.tela-cheia { display: flex; flex-direction: column; }
.tela-cheia > fieldset { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }

/* --- Barra de ferramentas das telas: filtros e busca --- */
.ferramentas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.ferramentas input[type="search"], .ferramentas input[type="text"] { width: 220px; }
.ferramentas .separador { flex: 1; }
.ferramentas .aba {
    padding: 3px 10px;
    text-decoration: none;
    color: inherit;
    border: 1px outset;
    background: silver;
}
.ferramentas .aba[aria-current="page"] { border: 1px inset; font-weight: bold; }
.ferramentas .contagem { color: #444; }

/* --- Indicadores --- */
.indicadores { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.indicador {
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey;
    background: #fff; padding: 5px 12px; min-width: 96px;
}
.indicador b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.indicador span { color: #444; }
.indicador a { color: inherit; text-decoration: none; }

/* --- Barra de status, colada embaixo --- */
.status-bar { margin: 4px 1px 0; flex-shrink: 0; }
.status-bar-field:first-child { flex-grow: 6; }
.status-bar .zoom { flex-grow: 0; display: flex; gap: 3px; align-items: center; }
.status-bar .zoom button { min-width: 20px; padding: 0 4px; line-height: 1.4; }

fieldset { margin: 0 0 8px; padding: 6px 8px; }
legend { padding: 0 4px; }

.vazio { padding: 24px; text-align: center; color: #444; }
.ok { color: #005500; } .erro { color: #8b0000; }
.aviso { color: #7a4a00; }

/* --- Janelas internas (MDI): o menu abre form sobre a área de trabalho --- */
.area-mdi {
    position: fixed;
    inset: 0;
    pointer-events: none;   /* só as janelas capturam o clique */
    z-index: 50;
}
.janela-mdi {
    position: absolute;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    min-width: 320px;
    min-height: 160px;
}
.janela-mdi .title-bar { cursor: move; user-select: none; }
.janela-mdi.inativa .title-bar { background: linear-gradient(90deg, #808080, #b5b5b5); }
.janela-mdi > .window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: 6px;
    min-height: 0;
}
/* O fragmento é só um invólucro: precisa repassar a altura para a tela que
   está dentro, senão a grade de Duplicatas não sabe até onde crescer. */
.janela-mdi .fragmento-conteudo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.janela-mdi .fragmento-conteudo > * { flex-shrink: 0; }
.janela-mdi .fragmento-conteudo > .tela-cheia { flex: 1; min-height: 0; }
.janela-mdi > .status-bar { margin: 0 1px 1px; }
.janela-mdi.recolhida { height: auto !important; min-height: 0; }
.janela-mdi.recolhida > .window-body { display: none; }
.janela-mdi .redimensiona {
    position: absolute;
    right: 0; bottom: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
}
.carregando { padding: 24px; text-align: center; color: #444; }