/* Shared layout contract. Load after component styles; keep visual themes in their own files. */
:root {
    --layout-space-sm: 8px;
    --layout-space-md: 16px;
    --layout-space-lg: 24px;
    --layout-page-padding: 32px;
    --layout-card-padding: 24px;
    --layout-content-width: 1450px;
}

.socialflow-body .main,
.admin-body .app-main > .conteudo,
.onboarding-main {
    width: 100%;
    max-width: var(--layout-content-width);
    margin-inline: auto;
    padding: var(--layout-page-padding);
    padding-bottom: 48px;
    min-width: 0;
}

.socialflow-content,
.admin-body .app-main > .conteudo,
.onboarding-content {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-lg);
}

/* Hidden dialogs, scripts and flash payloads must never create layout gaps. */
.conteudo [hidden] { display: none !important; }
.conteudo > :not(dialog) { min-width: 0; }
.conteudo > :is(.barra-pagina, .hero-row, .card, .filtros, .grade-metricas, .admin-metricas, .admin-dashboard-listas, .admin-secao-separada, .alerta, .detalhe-grid) {
    margin-block: 0;
}

.conteudo .barra-pagina {
    align-items: center;
    gap: var(--layout-space-lg);
    flex-wrap: wrap;
}
.conteudo .barra-pagina > div:first-child { flex: 1 1 260px; min-width: 0; }
.conteudo .barra-pagina h2 { margin: 0 0 8px; line-height: 1.25; }
.conteudo .barra-pagina p { line-height: 1.6; }
.conteudo :is(.barra-pagina, .secao-titulo, .configuracao-cabecalho) :is(h2, h3, p) { overflow-wrap: anywhere; }
.conteudo .card { min-width: 0; padding: var(--layout-card-padding); }
.conteudo .card.tabela-wrap { padding: 0; }
.conteudo .tabela-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.conteudo .tabela-wrap :is(th, td) { padding: 16px; }
/* A flex display on td breaks the alignment of the entire table row. */
.conteudo td.acoes-linha { display: table-cell; }
.conteudo td.acoes-linha > :is(form, a, button) { display: inline-flex; margin: 4px; vertical-align: middle; }
.conteudo .tabela-wrap tbody tr:last-child td { border-bottom: 0; }

.conteudo :is(.configuracoes-paineis, .form-configuracoes, .form-stack, .editor-post, .admin-dashboard-listas) {
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-lg);
    min-width: 0;
}
.conteudo .configuracoes-paineis > :is(.card, .alerta) { margin-block: 0; }
.conteudo .configuracoes-layout { gap: var(--layout-space-lg); min-width: 0; }
.conteudo .configuracao-secao { gap: var(--layout-space-lg); }
.conteudo .configuracao-secao > .configuracao-cabecalho { margin-bottom: 0; }
.conteudo .configuracao-cabecalho { gap: var(--layout-space-md); }
.conteudo .configuracao-cabecalho > div { min-width: 0; }
.conteudo .configuracao-cabecalho > span { flex: 0 0 38px; }
.conteudo .card > :is(h2, h3):first-child { margin-top: 0; margin-bottom: 12px; }
.conteudo .card.vazio { padding-block: 40px; }
.conteudo .card.vazio > .botao { margin-top: 20px; }
.conteudo .secao-titulo { gap: var(--layout-space-md); flex-wrap: wrap; margin-bottom: 20px; }
.conteudo .secao-titulo h2 { line-height: 1.3; }
.conteudo :is(.grid-campos, .destinos) { gap: var(--layout-space-md); }
.conteudo .grid-campos > * { min-width: 0; }
.conteudo .grid-campos > label { align-self: start; }
.conteudo label { line-height: 1.45; }
.conteudo label small { line-height: 1.5; }
.conteudo .opcao-checkbox { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; }
.conteudo .opcao-checkbox input { width: 16px; height: 16px; margin: 3px 0 0; }
.conteudo .opcao-checkbox small { display: block; margin-top: 6px; }
.conteudo :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.conteudo :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]), select) { min-height: 44px; }
.conteudo :is(input[type=checkbox], input[type=radio]) { flex-shrink: 0; }
.conteudo .filtros { flex-wrap: wrap; align-items: end; gap: 12px; padding: 16px; }
.conteudo .filtros > :is(input, select, label) { flex: 1 1 180px; min-width: 0; max-width: none; }
.conteudo .search-wrap input { min-height: 0; }
.conteudo :is(.acoes, .acoes-linha, .acoes-form) { gap: 12px; }
.conteudo .acoes-form { margin-top: 24px; padding-top: 20px; }
.conteudo .configuracao-acoes { margin-top: 0; padding: 16px; }
.conteudo :is(.botao, .flow-steps button) { white-space: normal; text-align: center; }
.conteudo .grade-projetos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.conteudo :is(.detalhe-grid, .form-agendamento, .dashboard-grid) > * { min-width: 0; }
.conteudo .detalhe-painel-secao { min-width: 0; overflow-wrap: anywhere; }
.conteudo .detalhe-painel-cabecalho { flex-wrap: wrap; }
.conteudo .flow-shell { width: 100%; max-width: none; margin-inline: 0; }
.conteudo .flow-shell .flow-steps { margin-top: 24px; margin-bottom: 24px; }
.conteudo .flow-shell .flow-footer { margin-top: 24px; padding-top: 20px; }
.conteudo .flow-shell .flow-body { gap: 24px; }
.conteudo .flow-shell .flow-toolbar { row-gap: 12px; }
.conteudo .flow-shell .tipo-card { margin: 0; }
.conteudo .flow-shell .flow-review { gap: 16px; }
.conteudo .flow-shell .flow-review p { margin: 0; }
.conteudo .flow-shell :is([data-publication-step], [data-topic-step]) > h3:first-child { margin-top: 0; }
.conteudo .flow-shell .flow-inline-status { margin-block: 20px 16px; }
.conteudo .flow-shell fieldset { min-width: 0; border: 1px solid var(--borda); border-radius: 12px; margin: 20px 0; padding: 16px; }
.conteudo .flow-shell legend { padding-inline: 8px; font-size: 13px; font-weight: 600; }
.conteudo .flow-shell fieldset :is(.destino, .tipo-card) { margin: 0; }
.conteudo .flow-shell .upload-zone { margin-block: 16px; }
.conteudo .flow-shell [data-publication-step] > details { margin-top: 16px; }
.conteudo .estrategia-passo > .grid-campos + .ajuda { margin-top: 16px; }
.conteudo .estrategia-passo > .acoes-form { margin-top: 24px; }

/* Legacy cards define light colors locally; map them to the active shell theme. */
html.dark .socialflow-content {
    --texto: #e7ebf2;
    --muted: #a6b1c2;
    --painel: var(--panel);
    --painel-2: var(--panel-soft);
    --borda: var(--border);
    color: var(--texto);
}
html.dark .socialflow-content .card { background: var(--panel); color: var(--texto); border-color: var(--border); }
html.dark .socialflow-content :is(.barra-pagina h2, .configuracao-cabecalho h3, label) { color: var(--texto); }
html.dark .socialflow-content :is(.barra-pagina p, .configuracao-cabecalho p) { color: var(--muted); }
html.dark .socialflow-content :is(input, select, textarea, .configuracao-resumo-marca article, .referencia-card) {
    background: var(--panel-soft);
    color: var(--texto);
    border-color: var(--border);
}

@media (max-width: 1100px) {
    :root { --layout-page-padding: 24px; }
    .conteudo .detalhe-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .conteudo .configuracoes-layout { display: flex; flex-direction: column; align-items: stretch; }
    .conteudo .configuracoes-abas { margin: 0; max-width: 100%; }
}
@media (max-width: 640px) {
    :root { --layout-page-padding: 16px; --layout-card-padding: 16px; --layout-space-lg: 20px; }
    .conteudo .barra-pagina { align-items: stretch; flex-direction: column; gap: 16px; }
    .conteudo .barra-pagina > div:first-child { flex: none; }
    .conteudo .barra-pagina > :is(.acoes, .acoes-linha) { width: 100%; }
    .conteudo .barra-pagina > :is(.acoes, .acoes-linha) > .botao { flex: 1 1 160px; }
    .conteudo .grid-campos { grid-template-columns: minmax(0, 1fr); }
    .conteudo .campo-largo { grid-column: 1 / -1; }
    .conteudo .filtros > :is(input, select, label, .botao) { flex-basis: 100%; width: 100%; }
    .conteudo .acoes-form > .botao { flex: 1 1 140px; }
    .conteudo .tabela-wrap :is(th, td) { padding: 12px; }
    .conteudo .flow-shell .flow-body { gap: 20px; }
    .conteudo .configuracoes-paineis .configuracao-cabecalho-com-acao > .botao { margin-left: 0; width: 100%; }
    .pagina-limpa { padding: 16px; }
    .pagina-limpa .login-card { padding: 24px; }
}