/* ==========================================================================
   legacy-bridge.css — ANDAIME TEMPORÁRIO
   --------------------------------------------------------------------------
   Carregado SOMENTE quando system/load.page.php serviu a página legada
   (pages/<slug>.php) em vez da convertida. É o que mantém as páginas ainda
   não migradas legíveis dentro do shell novo, que não carrega basic.css.

   O que isto NÃO é: a "camada de compatibilidade" que substituiria a
   reescrita. Não há aqui fidelidade de pixel, moldura de GIF, nem intenção
   de ficar bonito — só "tabela legível, botão visível, espaçamento são".

   Deliberadamente NÃO carregamos basic.css (9.926 linhas, 204 KB, 140
   !important): os !important venceriam os utilitários do Tailwind e o
   resultado visual seria enganoso — pareceria funcionar e quebraria depois.

   Cada página convertida deixa uma regra daqui sem uso. O tamanho deste
   arquivo é a barra de progresso; ele é deletado inteiro no Lote 9.
   ========================================================================== */

:root {
    --lb-surface: #ffffff;
    --lb-bg: #f8fafc;
    --lb-border: #e2e8f0;
    --lb-text: #0f172a;
    --lb-muted: #64748b;
    --lb-accent: #4f46e5;
    --lb-zebra: #f8fafc;
}

html.dark {
    --lb-surface: #2b2d31;
    --lb-bg: #313338;
    --lb-border: #1e1f22;
    --lb-text: #dbdee1;
    --lb-muted: #949ba4;
    --lb-accent: #818cf8;
    --lb-zebra: rgba(255, 255, 255, .02);
}

/* --------------------------------------------------------------------------
   1. Molduras ornamentais: some.
   São <span> vazios cujo único conteúdo era um background-image de GIF
   (box-frame-edge.gif, box-frame-vertical.gif, table-headline-border.gif).
   Sem as imagens do layout antigo eles viram faixas cinzas sem sentido.
   -------------------------------------------------------------------------- */
#ui-main .CaptionEdgeLeftTop,
#ui-main .CaptionEdgeRightTop,
#ui-main .CaptionEdgeLeftBottom,
#ui-main .CaptionEdgeRightBottom,
#ui-main .CaptionBorderTop,
#ui-main .CaptionBorderBottom,
#ui-main .CaptionVerticalLeft,
#ui-main .CaptionVerticalRight,
#ui-main .BoxFrameEdgeLeftTop,
#ui-main .BoxFrameEdgeRightTop,
#ui-main .BoxFrameEdgeLeftBottom,
#ui-main .BoxFrameEdgeRightBottom,
#ui-main .BoxFrameHorizontal,
#ui-main .BoxFrameVerticalLeft,
#ui-main .BoxFrameVerticalRight,
#ui-main .LeftChain,
#ui-main .RightChain,
#ui-main .ActiveSubmenuItemIcon,
#ui-main .CornerWrapper,
#ui-main .Corner-tl,
#ui-main .Corner-tr,
#ui-main .Corner-bl,
#ui-main .Corner-br {
    display: none !important;
}

/* --------------------------------------------------------------------------
   2. TableContainer -> cartão.  CaptionContainer -> cabeçalho do cartão.
   -------------------------------------------------------------------------- */
#ui-main .TableContainer,
#ui-main .BoxFrame {
    margin: 0 0 1.25rem;
    border: 1px solid var(--lb-border);
    border-radius: .75rem;
    background: var(--lb-surface);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

#ui-main .CaptionContainer {
    border-bottom: 1px solid var(--lb-border);
    background: var(--lb-bg);
}

#ui-main .CaptionInnerContainer {
    padding: .625rem 1rem;
}

#ui-main .CaptionContainer .Text,
#ui-main .Text {
    font-size: .875rem;
    font-weight: 600;
    color: var(--lb-text);
}

/* --------------------------------------------------------------------------
   3. Tabelas. O markup legado aninha 3-4 níveis de <table> com width=,
   cellpadding= e bgcolor= no HTML; aqui só se garante legibilidade.
   -------------------------------------------------------------------------- */
#ui-main .TableContentContainer,
#ui-main .InnerTableContainer,
#ui-main .TableScrollbarWrapper {
    max-width: 100% !important;
    overflow-x: auto;
}

#ui-main .TableScrollbarContainer {
    display: none !important;
}

#ui-main table {
    border-collapse: collapse;
    max-width: 100%;
    font-size: .875rem;
    color: var(--lb-text);
}

#ui-main .Table1,
#ui-main .Table2,
#ui-main .Table3,
#ui-main .Table4,
#ui-main .Table5,
#ui-main .TableContent {
    width: 100%;
    background: transparent !important;
}

#ui-main .TableContent td,
#ui-main .Table1 td,
#ui-main .Table2 td,
#ui-main .Table3 td,
#ui-main .Table4 td,
#ui-main .Table5 td {
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--lb-border);
    vertical-align: middle;
}

/* Os bgcolor= vêm calculados no PHP a partir de darkborder/lightborder e
   ficam ilegíveis no tema escuro. Neutralizados; a zebra vira CSS. */
#ui-main .TableContent tr[bgcolor],
#ui-main table tr[bgcolor],
#ui-main td[bgcolor],
#ui-main tr[style*="background-color"] {
    background-color: transparent !important;
}

#ui-main .TableContent tr:nth-child(even),
#ui-main .Table1 tr:nth-child(even),
#ui-main .Table3 tr:nth-child(even) {
    background-color: var(--lb-zebra) !important;
}

#ui-main .LabelV,
#ui-main [class^="LabelV"],
#ui-main .LabelH,
#ui-main [class^="LabelH"] {
    font-weight: 600;
    color: var(--lb-muted);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Botões.
   -------------------------------------------------------------------------- */
#ui-main .BigButton {
    display: inline-block;
    margin: .25rem;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
}

#ui-main .BigButtonText,
#ui-main input.BigButtonText,
#ui-main .BigButton input[type="submit"],
#ui-main .BigButton input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    border: 0;
    border-radius: .5rem;
    background: var(--lb-accent);
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    cursor: pointer;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
}

#ui-main .BigButtonText:hover {
    filter: brightness(1.1);
}

/* --------------------------------------------------------------------------
   5. Mensagens.
   -------------------------------------------------------------------------- */
#ui-main .MessageContainer,
#ui-main .Message {
    padding: .75rem 1rem;
    border: 1px solid var(--lb-border);
    border-radius: .5rem;
    background: var(--lb-bg);
    color: var(--lb-text);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   6. Formulários legados.
   -------------------------------------------------------------------------- */
#ui-main input[type="text"],
#ui-main input[type="password"],
#ui-main input[type="email"],
#ui-main input[type="number"],
#ui-main input[type="search"],
#ui-main select,
#ui-main textarea {
    padding: .4375rem .625rem;
    border: 1px solid var(--lb-border);
    border-radius: .5rem;
    background: var(--lb-surface);
    color: var(--lb-text);
    font-size: .875rem;
    max-width: 100%;
}

#ui-main a {
    color: var(--lb-accent);
}

#ui-main a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Higiene geral do conteúdo legado.
   -------------------------------------------------------------------------- */
#ui-main img {
    max-width: 100%;
    height: auto;
}

/* O markup legado usa width= e style="width:NNNpx" fixos; no celular isso
   força rolagem horizontal do documento inteiro. */
#ui-main > div {
    max-width: 100%;
    overflow-x: auto;
}

#ui-main font {
    color: inherit !important;
}

#ui-main .HeaderPagesText {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lb-text);
}

/* Fundos brancos fixos no HTML legado ficam ilegíveis no tema escuro. */
html.dark #ui-main [style*="background-color: white"],
html.dark #ui-main [style*="background-color:#fff"],
html.dark #ui-main [style*="background: white"] {
    background-color: var(--lb-surface) !important;
}

html.dark #ui-main [style*="color: black"],
html.dark #ui-main [style*="color:#000"] {
    color: var(--lb-text) !important;
}