/* ============================================================
   compat.css — ponte para nomes de classe herdados das telas
   antigas que o design "Ink & Teal" não cobre. Complementa o
   app-extra.css. Ao migrar uma tela para as classes novas
   (.btn-ghost, .field, .input), remova a regra correspondente.
   ============================================================ */

/* Botão secundário → equivalente ao .btn-ghost do design novo */
.btn-secondary {
    background: var(--card);
    color: var(--t2);
    border: 1.5px solid var(--line-2);
}
.btn-secondary:hover { border-color: var(--t4); color: var(--t1); }

/* Botão de alternar tema (topbar/sidebar/menu mobile) */
.topbar-theme {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line-2);
    background: var(--card);
    color: var(--t2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.topbar-theme:hover { color: var(--t1); border-color: var(--t4); }
.topbar-theme .ico-sun { display: none; }
:root[data-theme="dark"] .topbar-theme .ico-moon { display: none; }
:root[data-theme="dark"] .topbar-theme .ico-sun  { display: block; }

/* Marca textual na topbar mobile (o boilerplate não tem logotipo) */
.topbar-brand-txt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading);
    text-decoration: none;
}

/* Utilitários herdados */
.container { width: 100%; }
.hidden { display: none !important; }
.text-center { text-align: center; }

/* Detalhe da rastreabilidade: grade de metadados */
.log-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.log-meta-item {
    padding: 11px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.log-meta-item strong {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 3px;
}
.log-meta-item span { font-size: .85rem; color: var(--t1); word-break: break-word; }

/* Diff antes/depois */
.diff-before { background: var(--err-bg); color: var(--err-tx); }
.diff-after  { background: var(--ok-bg);  color: var(--ok-tx); }