/* Layout e tema compartilhados pelas etapas exibidas no shell do Update Journey.
   Carregado depois dos <style> de cada página para sobrescrever o layout centralizado. */

/* ---------- Área de trabalho em largura total ---------- */
body.min-h-screen { min-height: 100vh; padding: 24px 32px !important; font-size: 14px; line-height: 1.5; }
body > .max-w-6xl,
body > main.max-w-6xl { max-width: none !important; margin: 0 !important; }
#stepper { margin-bottom: 24px; }

/* Subtítulo da etapa: único título visível, em destaque no canto superior esquerdo. */
html .step > h2:first-child {
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ink) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: -0.01em;
}
.step > h2:first-child + p { max-width: 80ch; }

/* Etapas sem cartão: o conteúdo ocupa o espaço disponível. */
.step.active { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 0 6rem !important; }

/* Barra de navegação fixa no rodapé acompanha a largura total. */
.step > div.flex.justify-between.mt-6,
.step > div.flex.justify-start.mt-6,
.step > div.flex.justify-end.mt-6 { left: 0; right: 0; width: auto; transform: none; padding: 12px 32px max(12px, env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
    body.min-h-screen { padding: 16px !important; }
    .step > div.flex.justify-between.mt-6,
    .step > div.flex.justify-start.mt-6,
    .step > div.flex.justify-end.mt-6 { width: auto; padding-left: 16px; padding-right: 16px; }
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #ececee;
    --ink-soft: #a1a1aa;
    --paper: #111113;
    --card: #18181b;
    --line: #2c2c31;
    --brand: #3ea3bc;
    --brand-dark: #7ac0d3;
}
html[data-theme="dark"] body { background: var(--paper) !important; color: var(--ink) !important; }
html[data-theme="dark"] *, html[data-theme="dark"] ::before, html[data-theme="dark"] ::after { border-color: var(--line); }
html[data-theme="dark"] ::placeholder { color: #71717a; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: #1f1f23 !important; border-color: var(--line) !important; color: var(--ink) !important; }

/* Superfícies neutras */
html[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: #1f1f23 !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #26262b !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: #2e2e34 !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: #232327 !important; }
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #2a2a30 !important; }
html[data-theme="dark"] .hover\:bg-gray-300:hover { background-color: #3a3a41 !important; }
html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--line) !important; }

/* Texto neutro */
html[data-theme="dark"] .text-gray-400 { color: #71717a !important; }
html[data-theme="dark"] .text-gray-500 { color: #8b8b94 !important; }
html[data-theme="dark"] .text-gray-600 { color: #a1a1aa !important; }
html[data-theme="dark"] .text-gray-700 { color: #c4c4ca !important; }
html[data-theme="dark"] .text-gray-800 { color: #dcdce0 !important; }
html[data-theme="dark"] .text-gray-900 { color: #ececee !important; }
html[data-theme="dark"] .hover\:text-gray-600:hover { color: #c4c4ca !important; }
html[data-theme="dark"] .hover\:text-gray-800:hover { color: #ececee !important; }

/* Bordas */
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 { border-color: var(--line) !important; }
html[data-theme="dark"] .border-transparent { border-color: transparent !important; }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200, html[data-theme="dark"] .border-red-300 { border-color: rgba(248,113,113,0.35) !important; }
html[data-theme="dark"] .border-red-400, html[data-theme="dark"] .border-red-500, html[data-theme="dark"] .border-red-600 { border-color: #f87171 !important; }
html[data-theme="dark"] .border-green-200, html[data-theme="dark"] .border-green-300, html[data-theme="dark"] .border-emerald-200 { border-color: rgba(74,222,128,0.3) !important; }
html[data-theme="dark"] .border-yellow-200, html[data-theme="dark"] .border-yellow-300, html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-300, html[data-theme="dark"] .border-orange-200, html[data-theme="dark"] .border-orange-300 { border-color: rgba(250,204,21,0.3) !important; }
html[data-theme="dark"] .border-yellow-400 { border-color: #facc15 !important; }
html[data-theme="dark"] .border-blue-200, html[data-theme="dark"] .border-blue-300, html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-teal-200, html[data-theme="dark"] .border-teal-300, html[data-theme="dark"] .border-purple-200,
html[data-theme="dark"] .border-purple-300 { border-color: rgba(62,163,188,0.35) !important; }
html[data-theme="dark"] .border-blue-400, html[data-theme="dark"] .border-blue-500, html[data-theme="dark"] .border-indigo-500,
html[data-theme="dark"] .border-brand-500 { border-color: #3ea3bc !important; }

/* Fundos de status (tons translúcidos sobre a superfície escura) */
html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,0.10) !important; }
html[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,0.18) !important; }
html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(34,197,94,0.10) !important; }
html[data-theme="dark"] .bg-green-100 { background-color: rgba(34,197,94,0.18) !important; }
html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-orange-50 { background-color: rgba(234,179,8,0.10) !important; }
html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234,179,8,0.18) !important; }
html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-teal-50,
html[data-theme="dark"] .bg-purple-50, html[data-theme="dark"] .bg-brand-50, html[data-theme="dark"] .hover\:bg-blue-50:hover,
html[data-theme="dark"] .hover\:bg-brand-50:hover { background-color: rgba(62,163,188,0.10) !important; }
html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-indigo-100, html[data-theme="dark"] .bg-teal-100,
html[data-theme="dark"] .bg-purple-100, html[data-theme="dark"] .bg-brand-100 { background-color: rgba(62,163,188,0.18) !important; }

/* Texto colorido: tons claros para manter contraste */
html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .hover\:text-red-600:hover { color: #f87171 !important; }
html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-800, html[data-theme="dark"] .text-red-950 { color: #fca5a5 !important; }
html[data-theme="dark"] .text-green-600 { color: #4ade80 !important; }
html[data-theme="dark"] .text-green-700, html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-emerald-900 { color: #86efac !important; }
html[data-theme="dark"] .text-yellow-700, html[data-theme="dark"] .text-yellow-800, html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800, html[data-theme="dark"] .text-amber-900,
html[data-theme="dark"] .text-amber-950 { color: #fcd34d !important; }
html[data-theme="dark"] .text-brand-600, html[data-theme="dark"] .text-blue-500, html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-indigo-500, html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-teal-500,
html[data-theme="dark"] .text-teal-600, html[data-theme="dark"] .text-purple-500, html[data-theme="dark"] .text-purple-600 { color: #5ab6cc !important; }
html[data-theme="dark"] .text-brand-700, html[data-theme="dark"] .text-brand-800, html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-900, html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800, html[data-theme="dark"] .text-indigo-900, html[data-theme="dark"] .text-teal-700,
html[data-theme="dark"] .text-teal-800, html[data-theme="dark"] .text-purple-700, html[data-theme="dark"] .text-purple-800 { color: #aed8e6 !important; }

/* Componentes com cores fixas nas páginas */
html[data-theme="dark"] .step > div.flex.justify-between.mt-6,
html[data-theme="dark"] .step > div.flex.justify-start.mt-6,
html[data-theme="dark"] .step > div.flex.justify-end.mt-6 { background: rgba(17,17,19,0.94); }
html[data-theme="dark"] #loading-overlay { background: rgba(17,17,19,0.85); }
html[data-theme="dark"] #stepper .seg.current { background: #1f6f86; }
html[data-theme="dark"] .result-card { box-shadow: 0 0 0 1px var(--line) !important; }
html[data-theme="dark"] .roadmap li::before { background: var(--card); }
html[data-theme="dark"] .diff-mark { background: rgba(250,204,21,0.35); }
html[data-theme="dark"] .step > h2 { color: var(--ink); }
html[data-theme="dark"] .review-tab[aria-selected="true"],
html[data-theme="dark"] .triage-recommendation h4 { color: #aed8e6; }
html[data-theme="dark"] .review-tab-count { background: rgba(62,163,188,0.18); color: #aed8e6; }
html[data-theme="dark"] .tab-review-count,
html[data-theme="dark"] .triage-status[data-state="review"] { background: rgba(234,179,8,0.14); color: #fcd34d; }
html[data-theme="dark"] .triage-status[data-state="ready"] { background: rgba(34,197,94,0.14); color: #86efac; }
html[data-theme="dark"] .triage-status[data-state="blocked"] { background: rgba(239,68,68,0.14); color: #fca5a5; }
html[data-theme="dark"] .triage-status[data-state="neutral"] { background: #26262b; color: var(--ink-soft); }
html[data-theme="dark"] .correlation-flow,
html[data-theme="dark"] .triage-regua { background: #1f1f23; }
html[data-theme="dark"] .triage-recommendation { background: rgba(62,163,188,0.10); }
html[data-theme="dark"] .decision-count strong { color: var(--ink); }

@media print {
    html[data-theme="dark"] { color-scheme: light; }
}

/* ---------- Loading com progresso ---------- */
#loading-overlay { position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 24px; background: rgba(245,245,244,0.82); backdrop-filter: blur(3px); }
#loading-overlay:not(.hidden) { display: flex; }
.uj-loading-box { display: flex; width: min(420px, 100%); flex-direction: column; align-items: center; gap: 8px; padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 12px 32px rgba(28,28,31,0.12); text-align: center; }
.uj-loading-box .spinner { width: 36px; height: 36px; margin-bottom: 8px; border: 3px solid var(--line); border-top-color: var(--brand, #13789e); border-radius: 50%; animation: uj-spin 0.8s linear infinite; }
.uj-loading-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 22px; }
.uj-loading-meta { margin: 0; color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.uj-loading-bar { position: relative; width: 100%; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--line); }
.uj-loading-bar span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit; background: var(--brand, #13789e); animation: uj-indeterminate 1.4s ease-in-out infinite; }
.uj-loading-last { min-height: 16px; margin: 0; max-width: 100%; overflow: hidden; color: var(--ink-soft); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; }
.uj-loading-hint { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 18px; }
.uj-loading-hint:empty { display: none; }
@keyframes uj-spin { to { transform: rotate(360deg); } }
@keyframes uj-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .uj-loading-box .spinner { animation-duration: 2.4s; }
    .uj-loading-bar span { animation-duration: 3s; }
}
html[data-theme="dark"] .uj-loading-box { box-shadow: 0 12px 32px rgba(0,0,0,0.5); }

/* Migrar: tags dos módulos unificados e contador de divergências */
html[data-theme="dark"] .module-tag { border-color: rgba(62,163,188,0.35); background: rgba(62,163,188,0.12); color: #aed8e6; }
html[data-theme="dark"] .module-config > summary .config-diff-count { background: rgba(234,179,8,0.14); color: #fcd34d; }