/* ==========================================================================
   Fichario Zoom: sistema visual do painel Omie + FTD.
   Cada etapa do fluxo tem a cor de uma divisoria tirada do logo Zoom:
   Omie azul, NF amarelo, FTD laranja, concluido verde. Vermelho so para falha.
   ========================================================================== */

:root {
    /* Papel e tinta */
    --paper: #f3f6f9;
    --sheet: #ffffff;
    --sheet-2: #f1f4f7;
    --sheet-3: #e8edf2;
    --ink: #14212b;
    --ink-2: #384955;
    --muted: #5b6b78;
    --rule: #dfe5eb;
    --rule-strong: #c9d2da;
    --night: #0e2233;
    --night-2: #16324a;

    /* Divisorias (etapas) */
    --omie: #0b82c6;
    --omie-ink: #0a6399;
    /* Azul de acao: o azul Zoom levemente escurecido para texto branco passar de 4.5:1. */
    --omie-action: #0975b3;
    --omie-soft: #e3f0f9;
    --nf: #ffd000;
    --nf-ink: #6b5500;
    --nf-soft: #fff5c7;
    --ftd: #f26726;
    --ftd-ink: #a8400e;
    --ftd-soft: #fde8dd;
    --done: #8db82f;
    --done-ink: #4a6c10;
    --done-soft: #edf5dc;
    --fail: #c8322b;
    --fail-ink: #a1231d;
    --fail-soft: #fbe6e4;
    --warn: #8a5f0a;
    --warn-soft: #fbf0d8;

    /* Nomes antigos, usados pelos blocos funcionais (grafico FTD, historico, chaves) */
    --bg: var(--paper);
    --panel: var(--sheet);
    --panel-strong: var(--sheet);
    --line: var(--rule);
    --text: var(--ink);
    --accent: var(--omie-action);
    --accent-strong: var(--omie-ink);
    --accent-soft: var(--omie-soft);
    --accent-lime: var(--done);
    --accent-lime-soft: var(--done-soft);
    --accent-gold: var(--nf);
    --accent-gold-soft: var(--nf-soft);
    --accent-orange: var(--ftd);
    --accent-orange-soft: var(--ftd-soft);
    --chart-outbound: #5e8a1a;
    --info: var(--omie-ink);
    --info-soft: var(--omie-soft);
    --warning: var(--warn);
    --warning-soft: var(--warn-soft);
    --neutral: var(--ink-2);
    --neutral-soft: var(--sheet-3);
    --danger: var(--fail);
    --danger-soft: var(--fail-soft);
    --success: var(--done-ink);
    --success-soft: var(--done-soft);
    --sidebar-bg: var(--night);
    --shadow: 0 1px 2px rgba(20, 33, 43, 0.06), 0 2px 8px rgba(20, 33, 43, 0.04);
    --shadow-raised: 0 3px 8px rgba(20, 33, 43, 0.14);

    --radius: 10px;
    --radius-sm: 7px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--omie);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--nf);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

h1, h2, h3, h4, h5 {
    color: var(--ink);
    line-height: 1.25;
    text-wrap: balance;
}

p {
    margin: 0;
}

code {
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: var(--sheet-2);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Estrutura: menu lateral (capa do fichario) + area de trabalho
   -------------------------------------------------------------------------- */

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
}

.shell-no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0.75rem 1.5rem;
    background: var(--night);
    color: #dbe5ee;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Etiqueta da capa: o logo sobre papel, como a etiqueta do fichario. */
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius);
    background: var(--sheet);
}

.brand strong {
    display: block;
    font-size: 1rem;
}

.brand-logo {
    width: 100%;
    max-width: 11rem;
    height: auto;
    display: block;
}

.nav {
    display: grid;
    gap: 2px;
}

.nav-link {
    --tab: var(--omie);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem 0.45rem 0.8rem;
    border-radius: var(--radius-sm);
    color: rgba(219, 229, 238, 0.78);
    font-size: 0.875rem;
    font-weight: 550;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link[href="/modules/ftd-monitor"] { --tab: var(--ftd); }
.nav-link[href="/modules/erros"] { --tab: var(--fail); }

.nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* Aba ativa: a divisoria aparece na borda da capa. */
.nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--tab);
}

.nav-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    color: currentColor;
    opacity: 0.85;
}

.nav-link.active .nav-icon {
    color: var(--tab);
    opacity: 1;
}

.nav-text {
    font-size: 0.875rem;
    font-weight: 550;
}

.sidebar-footer {
    margin-top: auto;
}

.main {
    min-width: 0;
    padding: 0 1.75rem 2.5rem;
}

/* --------------------------------------------------------------------------
   Barra superior e faixa de homologacao
   -------------------------------------------------------------------------- */

.environment-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin: 0 -1.75rem;
    padding: 0.5rem 1.75rem;
    background: var(--nf);
    color: var(--ink);
    font-size: 0.8125rem;
}

.environment-banner strong {
    letter-spacing: 0.08em;
    font-weight: 800;
}

/* Faixa dentro do conteudo (monitor FTD): contida na coluna, nao sangra ate a borda. */
.content .environment-banner {
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.topbar-brand-block,
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.topbar-brand strong {
    display: block;
    color: var(--ink-2);
    font-size: 0.9375rem;
    font-weight: 600;
}

.topbar-logo {
    width: 5.5rem;
    height: auto;
    display: block;
}

/* Com menu lateral o logo ja esta na capa; na barra fica so o nome. */
.shell:not(.shell-no-sidebar) .topbar-logo {
    display: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-card {
    display: grid;
    text-align: right;
    line-height: 1.2;
}

.user-card strong {
    font-size: 0.875rem;
}

.user-card span {
    color: var(--muted);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Cabecalho de pagina (compacto: titulo, uma linha, acoes)
   -------------------------------------------------------------------------- */

.content {
    display: grid;
    gap: 1rem;
}

.panel.page-header,
.page-header {
    padding: 0 0 0.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.page-header-row {
    align-items: flex-end;
}

.page-header-copy {
    display: grid;
    gap: 0.2rem;
    min-width: min(100%, 22rem);
    flex: 1 1 22rem;
}

.page-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-description {
    max-width: 78ch;
    color: var(--muted);
    font-size: 0.875rem;
}

.page-header-actions {
    align-self: flex-end;
}

.eyebrow {
    color: var(--muted);
}

.section-tag,
.badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--sheet-3);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Folhas (paineis) e grades
   -------------------------------------------------------------------------- */

.grid,
.hero {
    display: grid;
    gap: 1rem;
}

.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-dashboard {
    grid-template-columns: 1.3fr 1fr;
}

.hero {
    grid-template-columns: 1.4fr 1fr;
}

.metric-stack,
.status-list,
.feature-list,
.auth-form {
    display: grid;
    gap: 0.9rem;
}

.hero-copy,
.hero-panel,
.panel,
.auth-card {
    min-width: 0;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--sheet);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.panel h2,
.panel h3,
.panel h4,
.hero h2,
.auth-card h2,
.topbar h1 {
    margin: 0;
}

.panel h2 {
    font-size: 1.25rem;
}

.panel h3 {
    font-size: 1rem;
    font-weight: 650;
}

.panel h4 {
    font-size: 0.875rem;
    font-weight: 650;
}

.panel p,
.hero p,
.auth-card p,
.status-list p,
.metric-card p {
    color: var(--muted);
}

.panel > * + * {
    margin-top: 0.9rem;
}

/* Folhas que ja sao grid usam o gap; sem margem somada. */
.admin-card > * + *,
.artifact-card > * + *,
.hero-panel > * + *,
.tools-panel > * + * {
    margin-top: 0;
}

.admin-card h3 + p {
    margin-top: -0.5rem;
}

.panel-intro {
    margin: 0 0 0.9rem;
}

.section-row,
.inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 0.75rem;
    flex-wrap: wrap;
}

.inline-actions {
    justify-content: flex-start;
}

.page-header-actions.inline-actions {
    justify-content: flex-end;
}

.table-summary,
.stack-sm {
    display: grid;
    gap: 0.15rem;
}

.table-summary p {
    font-size: 0.8125rem;
}

.soft-note {
    color: var(--muted);
    font-size: 0.8125rem;
}

.feature-list,
.status-list {
    margin: 0;
    padding-left: 1.1rem;
}

.status-line {
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--sheet-2);
}

.status-line span {
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
}

.status-line strong {
    display: block;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Contadores em linha de livro-razao: uma regua por grupo, colunas separadas por
   fio fino (o gap de 1px deixa o fio aparecer em qualquer quebra de linha).
   -------------------------------------------------------------------------- */

.status-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--rule);
}

.metric-card {
    --figure: var(--ink);
    display: grid;
    align-content: start;
    gap: 0.1rem;
    min-width: 0;
}

.status-card-grid .metric-card {
    padding: 0.75rem 1rem 0.85rem;
    background: var(--sheet);
}

.metric-card span {
    display: block;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.metric-card strong {
    display: block;
    color: var(--figure);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.metric-card p {
    font-size: 0.78rem;
    line-height: 1.4;
}

.metric-card-danger { --figure: var(--fail-ink); }

/* Estacoes do fluxo: uma linha na ordem Omie -> NF -> FTD -> Concluido, falha por ultimo.
   O vao mais grosso antes da FTD marca o ponto sem volta (envio sem retry automatico). */
.grid-stations {
    grid-template-columns: minmax(0, 1fr);
}

.station-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--rule);
}

.station {
    --tab: var(--rule-strong);
    --figure: var(--ink);
    display: grid;
    align-content: start;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.8rem 1.1rem 0.9rem;
    border-top: 4px solid var(--tab);
    background: var(--sheet);
    color: inherit;
    transition: background-color 0.15s ease;
}

a.station:hover {
    background: var(--sheet-2);
}

.station-label {
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.station-count {
    color: var(--figure);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.station-omie { --tab: var(--omie); }
.station-nf { --tab: var(--nf); }
.station-ftd {
    --tab: var(--ftd);
    margin-left: 5px;
}
.station-done { --tab: var(--done); }
.station-queue { --tab: var(--rule-strong); }
.station-fail {
    --tab: var(--fail);
    --figure: var(--fail-ink);
    background: var(--fail-soft);
}

a.station-fail:hover {
    background: #f7d9d6;
}

.station-note {
    color: var(--ftd-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Botoes: um so vocabulario de estado em todas as telas
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button-primary {
    background: var(--omie-action);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--omie-ink);
}

.button-secondary {
    background: var(--sheet);
    border-color: var(--rule-strong);
    color: var(--ink);
}

.button-secondary:hover {
    background: var(--sheet-2);
    border-color: #b5c0ca;
}

.button:active {
    transform: translateY(1px);
}

.button-compact {
    min-height: 1.95rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.8125rem;
}

.button-danger {
    background: var(--fail-soft);
    border-color: #efc2be;
    color: var(--fail-ink);
}

.button-danger:hover {
    background: #f7d4d1;
}

.button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.button-disabled {
    pointer-events: none;
    opacity: 0.45;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

/* --------------------------------------------------------------------------
   Selos de status
   -------------------------------------------------------------------------- */

.status-pill,
.artifact-badge,
.artifact-status,
.event-kind {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--sheet-3);
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.35;
}

.status-pill small {
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.68rem;
    font-weight: 600;
}

.status-pill-danger,
.artifact-status-danger,
.artifact-badge-danger,
.artifact-missing,
.event-kind-danger {
    background: var(--fail-soft);
    color: var(--fail-ink);
}

.status-pill-success,
.artifact-status-success,
.artifact-ok,
.event-kind-success {
    background: var(--done-soft);
    color: var(--done-ink);
}

.status-pill-warning,
.artifact-status-warning,
.event-kind-warning {
    background: var(--nf-soft);
    color: var(--nf-ink);
}

.status-pill-info,
.artifact-status-info,
.artifact-badge-info,
.artifact-badge,
.event-kind-info,
.event-kind-external {
    background: var(--omie-soft);
    color: var(--omie-ink);
}

.artifact-badge-ftd {
    background: var(--ftd-soft);
    color: var(--ftd-ink);
}

.status-pill-neutral,
.status-pill-skip,
.artifact-status-neutral,
.artifact-badge-neutral,
.artifact-badge-skip,
.event-kind-neutral,
.event-kind-internal {
    background: var(--sheet-3);
    color: var(--ink-2);
}

.inline-badges,
.top-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.top-badges {
    margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */

.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th,
.data-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.data-table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom-color: var(--rule-strong);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table tbody tr:hover {
    background: #f8fafc;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.table-actions-column,
.table-actions {
    text-align: right;
}

.table-actions {
    white-space: nowrap;
}

.table-actions .button + .button {
    margin-left: 0.3rem;
}

.table-row-link {
    color: var(--ink);
    font-weight: 650;
}

a.table-row-link:hover {
    color: var(--omie-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.table-subline {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.78rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.truncate-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Formularios e filtros
   -------------------------------------------------------------------------- */

.admin-card-grid,
.form-grid,
.filters-grid,
.flag-grid,
.artifact-grid {
    display: grid;
    gap: 0.9rem;
}

.admin-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid,
.flag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0.75rem;
}

.artifact-grid {
    grid-template-columns: 1fr;
}

.filter-panel {
    gap: 0.9rem;
}

.filter-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

.filter-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

.admin-card,
.artifact-card,
.admin-form {
    display: grid;
    gap: 0.9rem;
}

.form-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.form-field > span,
.form-field label,
.auth-form label {
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.auth-form label {
    display: grid;
    gap: 0.3rem;
}

.form-field input,
.form-field select,
.form-field textarea,
.auth-form input {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.auth-form input::placeholder {
    color: #8795a1;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.auth-form input:hover {
    border-color: #b5c0ca;
}

.auth-form input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--omie);
    box-shadow: 0 0 0 3px var(--omie-soft);
}

.form-field textarea {
    min-height: 7rem;
    resize: vertical;
}

.form-field small {
    color: var(--muted);
    font-size: 0.78rem;
}

.form-field-check {
    align-content: center;
}

.form-field-check input {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    accent-color: var(--omie);
}

.field-error {
    color: var(--fail-ink) !important;
    font-weight: 600;
}

.filter-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.queue-action-form {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.queue-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.queue-force-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Importacao de planilha nos cadastros
   -------------------------------------------------------------------------- */

.import-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
}

.import-form .table-summary {
    flex: 1 1 26rem;
}

.import-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.import-file {
    max-width: 22rem;
    padding: 0.3rem;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet-2);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.8125rem;
}

.import-file::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.import-report {
    display: grid;
    gap: 0.6rem;
}

.import-line-column {
    width: 7rem;
}

/* --------------------------------------------------------------------------
   Mensagens, estados vazios e dicas
   -------------------------------------------------------------------------- */

.flash-stack {
    display: grid;
    gap: 0.6rem;
}

.alert {
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    font-size: 0.875rem;
    font-weight: 600;
}

.alert-error {
    border-color: #efc2be;
    background: var(--fail-soft);
    color: var(--fail-ink);
}

.alert-success {
    border-color: #d3e6ad;
    background: var(--done-soft);
    color: var(--done-ink);
}

.alert-info {
    border-color: #bcdcf0;
    background: var(--omie-soft);
    color: var(--omie-ink);
}

.empty-state,
.hint-box {
    padding: 1rem 1.1rem;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet-2);
}

.empty-state strong,
.hint-box strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.9375rem;
}

.empty-state p,
.hint-box p {
    font-size: 0.875rem;
}

.error-panel {
    border-color: #efc2be;
    background: var(--fail-soft);
}

.skip-panel {
    border-color: #f3dc85;
    background: var(--nf-soft);
}

/* --------------------------------------------------------------------------
   Detalhe: campos lidos como formulario, sem uma caixa por campo
   -------------------------------------------------------------------------- */

.detail-shell {
    display: grid;
    gap: 1rem;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    margin: 0;
}

.details-grid div {
    min-width: 0;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule);
}

.details-grid dt {
    margin: 0 0 0.1rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.details-grid dd {
    margin: 0;
    font-size: 0.9375rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.95rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--sheet);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}

.link-chip:hover {
    background: var(--sheet-2);
}

.link-chip-info {
    border-color: #bcdcf0;
    background: var(--omie-soft);
    color: var(--omie-ink);
}

.link-chip-danger {
    border-color: #efc2be;
    background: var(--fail-soft);
    color: var(--fail-ink);
}

.link-chip-success {
    border-color: #d3e6ad;
    background: var(--done-soft);
    color: var(--done-ink);
}

/* --------------------------------------------------------------------------
   Payloads, arvores e linha do tempo legada
   -------------------------------------------------------------------------- */

.json-block {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: #0f1b26;
    color: #e6edf3;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    max-height: 34rem;
    overflow: auto;
}

.json-block-soft {
    min-height: 3.5rem;
}

.json-tree {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--sheet-2);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 34rem;
    overflow: auto;
}

.json-node {
    margin-left: 0.35rem;
}

.json-children {
    margin-left: 1rem;
    padding-left: 0.65rem;
    border-left: 1px dashed var(--rule-strong);
}

.json-leaf {
    padding: 0.15rem 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.content-viewer {
    display: grid;
    gap: 0.6rem;
}

.viewer-shell,
.viewer-body {
    min-width: 0;
}

.viewer-mode-active {
    border-color: var(--omie);
    box-shadow: inset 0 0 0 1px var(--omie);
    color: var(--omie-ink);
}

.viewer-fallback {
    margin-top: 0.6rem;
}

.artifact-actions,
.event-header,
.viewer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.artifact-actions {
    margin-top: 0.6rem;
}

.event-header {
    justify-content: space-between;
    margin-top: 0.3rem;
}

.artifact-path,
.event-note {
    margin-top: 0.4rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.timeline {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline li {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    overflow: hidden;
}

.timeline span {
    display: block;
    margin-top: 0.2rem;
    font-weight: 650;
}

.timeline p {
    margin: 0.3rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.event-error-card {
    border-color: #efc2be !important;
    background: var(--fail-soft) !important;
}

.event-block {
    margin-top: 0.75rem;
}

.event-block h4 {
    margin: 0 0 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-2);
}

.event-summary {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #bcdcf0;
    border-radius: var(--radius-sm);
    background: var(--omie-soft);
}

.event-summary strong {
    display: block;
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   Paginacao
   -------------------------------------------------------------------------- */

.pagination,
.pagination-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.pagination {
    justify-content: space-between;
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.pagination-link {
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    background: var(--sheet);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.pagination-link:hover {
    background: var(--sheet-2);
}

.pagination-link-active:hover {
    background: var(--omie-ink);
}

.pagination-link-active {
    border-color: var(--omie-action);
    background: var(--omie-action);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Atualizacao automatica
   -------------------------------------------------------------------------- */

.live-region-shell {
    display: grid;
    gap: 1rem;
}

.realtime-controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    padding: 0.2rem 0.25rem 0.2rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--sheet);
}

.live-pill,
.live-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 650;
}

.live-pill::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
}

.live-meta {
    color: var(--muted);
    font-weight: 500;
}

.live-pill-active { color: var(--done-ink); }
.live-pill-refreshing { color: var(--omie-ink); }
.live-pill-paused { color: var(--warn); }
.live-pill-error { color: var(--fail-ink); }

.live-pill-refreshing::before {
    animation: live-pulse 0.9s ease-in-out infinite;
}

.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.button-loading::after {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 999px;
    animation: spin 0.7s linear infinite;
}

.button-secondary.button-loading::after,
.button-danger.button-loading::after {
    border-color: rgba(20, 33, 43, 0.15);
    border-top-color: currentColor;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes live-pulse {
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Login e pagina publica
   -------------------------------------------------------------------------- */

.auth-shell {
    min-height: calc(100vh - 12rem);
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 440px);
}

.auth-brand {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.auth-logo {
    width: min(100%, 15rem);
    height: auto;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .shell,
    .hero,
    .grid,
    .grid-dashboard,
    .admin-card-grid,
    .form-grid,
    .flag-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar {
        position: static;
        height: auto;
        padding-bottom: 0.9rem;
    }

    .nav {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    }

    .nav-link.active::before {
        left: 0;
        top: auto;
        bottom: 0;
        right: 0;
        width: auto;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }
}

@media (max-width: 720px) {
    .main {
        padding: 0 1rem 1.5rem;
    }

    /* Celular: capa compacta e menu como faixa de abas rolavel, o conteudo aparece logo. */
    .sidebar {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.75rem;
        overflow: visible;
    }

    .brand {
        flex: none;
        padding: 0.35rem 0.5rem;
    }

    .brand-logo {
        width: 4.5rem;
    }

    .nav {
        display: flex;
        gap: 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav-link {
        flex: none;
        min-height: 2.25rem;
        padding: 0.35rem 0.6rem;
    }

    .nav-link.active::before {
        left: 0.4rem;
        right: 0.4rem;
    }

    .environment-banner {
        margin: 0 -1rem;
        padding: 0.5rem 1rem;
    }

    .filters-grid,
    .details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .topbar {
        flex-wrap: wrap;
        padding: 0.6rem 0;
    }

    .page-header-actions.inline-actions {
        justify-content: flex-start;
    }

    .realtime-controls {
        border-radius: var(--radius-sm);
    }

    /* Estacoes empilhadas: rotulo a esquerda, numero a direita, mesma ordem do fluxo. */
    .station-strip {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .station {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-top-width: 3px;
        padding: 0.6rem 0.9rem;
    }

    .station-ftd {
        margin-left: 0;
        margin-top: 5px;
    }

    .station-count {
        font-size: 1.75rem;
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .data-table {
        min-width: 44rem;
    }

    .filter-actions,
    .pagination,
    .pagination-pages {
        width: 100%;
    }

    .table-actions-column,
    .table-actions {
        text-align: left;
    }
}

/* Painel compartilhado FTD x Integrador: grafico sem dependencia externa. */
.traffic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.traffic-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.traffic-swatch {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.traffic-swatch-inbound {
    background: var(--info);
}

.traffic-swatch-outbound {
    /* Verde da marca escurecido: passa contraste 3:1 e separacao CVD contra o azul (validate_palette). */
    background: var(--chart-outbound);
}

.traffic-columns {
    margin: 0 0 1rem;
}

.traffic-plot {
    position: relative;
    height: 18rem;
    margin-left: 3.25rem;
}

.traffic-grid {
    position: absolute;
    inset: 0 0 1.6rem 0;
    pointer-events: none;
}

.traffic-gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}

.traffic-gridline span {
    position: absolute;
    right: calc(100% + 0.5rem);
    top: 0;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.traffic-days {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--traffic-days), minmax(0, 1fr));
}

.traffic-day {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 1.6rem;
    min-width: 0;
    border-radius: 0.35rem;
    outline: none;
    cursor: default;
}

.traffic-day:hover,
.traffic-day:focus-visible {
    background: var(--accent-soft);
}

.traffic-day:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.traffic-day-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    padding: 0 12%;
}

.traffic-column {
    flex: 1 1 0;
    max-width: 24px;
    min-width: 0;
    border-radius: 4px 4px 0 0;
}

.traffic-column-inbound {
    background: var(--info);
}

.traffic-column-outbound {
    background: var(--chart-outbound);
}

.traffic-day time {
    align-self: center;
    justify-self: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.traffic-day time.is-hidden-label {
    visibility: hidden;
}

.traffic-tooltip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.25rem;
    min-width: 11rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--panel-strong);
    box-shadow: var(--shadow-raised);
    color: var(--text);
    font-size: 0.82rem;
    pointer-events: none;
    top: 0.5rem;
    transform: translateX(-50%);
}

.traffic-tooltip[hidden] {
    display: none;
}

.traffic-tooltip strong {
    color: var(--muted);
    font-size: 0.76rem;
}

.traffic-tooltip span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
}

.traffic-tooltip b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.traffic-key {
    display: inline-block;
    width: 0.8rem;
    height: 2px;
    border-radius: 1px;
}

.traffic-key-inbound {
    background: var(--info);
}

.traffic-key-outbound {
    background: var(--chart-outbound);
}

.traffic-table-toggle summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
}

.traffic-table-toggle[open] summary {
    margin-bottom: 0.75rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.traffic-freshness {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.traffic-json p {
    margin-bottom: 0.55rem;
}

.code-block {
    margin: 0 0 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--sheet-2);
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.code-block code {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
}

.traffic-definition p {
    margin-bottom: 0.55rem;
}

.button.is-selected {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}


.public-home {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 460px));
    justify-content: center;
    align-items: start;
    align-content: center;
    gap: 1.5rem;
}

.public-health {
    width: 100%;
}

.public-health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.public-health-header h2 {
    margin: 0;
}

.public-health-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-health-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}

.public-health-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Modo homologacao */
.environment-card {
    margin-bottom: 1.5rem;
}

.environment-card-hml {
    border-color: #f3dc85;
    background: var(--nf-soft);
}

.environment-card-warning {
    color: var(--danger);
    font-weight: 700;
}

.environment-toggle {
    display: flex;
    align-items: center;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 700;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch-track {
    position: relative;
    width: 3rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--neutral-soft);
    border: 1px solid var(--line);
    transition: background 0.18s ease;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--panel-strong);
    box-shadow: 0 1px 3px rgba(20, 33, 43, 0.3);
    transition: transform 0.18s ease;
}

.switch input:checked + .switch-track {
    background: var(--warning);
}

.switch input:checked + .switch-track::after {
    transform: translateX(1.4rem);
}

.switch input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.switch input:disabled + .switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.environment-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.environment-tabs a {
    padding: 0.5rem 0.9rem;
    border-radius: 0.7rem;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.environment-tabs a.is-active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.environment-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.4rem;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* Ferramentas (consultas Omie) */
.tools-panel {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tools-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.tools-label {
    color: var(--muted);
    font-weight: 700;
}

.tools-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Historico de eventos compacto */
.event-timeline-compact {
    display: grid;
    gap: 0.85rem;
}

.timeline-failure-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #efc2be;
    border-radius: 0.9rem;
    background: var(--danger-soft);
}

.timeline-failure-focus div {
    display: grid;
    gap: 0.2rem;
}

.timeline-failure-focus p {
    margin: 0.15rem 0 0;
    color: var(--muted);
}

.timeline-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.timeline-filter-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--text);
    padding: 0.42rem 0.7rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.timeline-filter-chip span {
    margin-left: 0.25rem;
    color: var(--muted);
}

.timeline-filter-chip.is-active {
    border-color: var(--omie);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.timeline-hidden-runs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border: 1px dashed var(--line);
    border-radius: 0.8rem;
    color: var(--muted);
}

.timeline-runs {
    display: grid;
    gap: 0.6rem;
}

.timeline-run {
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--panel-strong);
    overflow: clip;
}

.timeline-run > summary {
    list-style: none;
}

.timeline-run > summary::-webkit-details-marker {
    display: none;
}

.timeline-run-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    background: var(--sheet-2);
}

.timeline-run[open] > .timeline-run-summary {
    border-bottom: 1px solid var(--line);
}

.timeline-run-result {
    color: var(--muted);
    font-size: 0.82rem;
    text-align: right;
}

.timeline-run-body {
    display: grid;
}

.timeline-stage-group + .timeline-stage-group {
    border-top: 1px solid var(--line);
}

.timeline-stage-group h4 {
    margin: 0;
    padding: 0.45rem 0.8rem;
    background: var(--sheet-2);
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-rows {
    display: grid;
}

.event-row {
    display: grid;
    grid-template-columns: 7.6rem 6rem minmax(10rem, 1.15fr) 5.8rem minmax(12rem, 2fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-height: 40px;
    padding: 0.42rem 0.75rem;
    border-top: 1px solid var(--rule);
}

.event-row:first-child {
    border-top: 0;
}

.event-row-falha {
    background: var(--fail-soft);
}

.event-row-tentativa_com_erro {
    background: var(--warn-soft);
}

.event-time-cell {
    display: grid;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.event-date {
    color: var(--muted);
    font-size: 0.72rem;
}

.event-time-cell time {
    font-size: 0.82rem;
    font-weight: 700;
}

.event-stage-chip {
    display: inline-flex;
    width: fit-content;
    padding: 0.25rem 0.48rem;
    border-radius: 999px;
    background: var(--neutral-soft);
    color: var(--neutral);
    font-size: 0.73rem;
    font-weight: 800;
}

.event-stage-omie { background: var(--omie-soft); color: var(--omie-ink); }
.event-stage-nf { background: var(--nf-soft); color: var(--nf-ink); }
.event-stage-ftd { background: var(--ftd-soft); color: var(--ftd-ink); }
.event-stage-conclusao { background: var(--done-soft); color: var(--done-ink); }

.event-label {
    min-width: 0;
    font-size: 0.84rem;
}

.event-row-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.8rem;
}

.event-http-cell {
    min-width: 0;
}

.event-detail-cell {
    min-width: 7.2rem;
}

.event-inline-details {
    position: relative;
}

.event-inline-details > summary {
    list-style: none;
    cursor: pointer;
}

.event-inline-details > summary::-webkit-details-marker {
    display: none;
}

.event-detail-content {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
}

.event-detail-fragment {
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--sheet-2);
}

.event-detail-grid {
    display: grid;
    gap: 0.8rem;
}

.event-detail-error {
    margin: 0;
    color: var(--danger);
}

.timeline-run-lazy {
    padding: 0.75rem;
}

@media (max-width: 900px) {
    .event-row {
        grid-template-columns: 6.5rem 5.4rem minmax(0, 1fr) auto;
        gap: 0.45rem;
    }

    .event-http-cell {
        grid-column: 4;
    }

    .event-row-summary {
        grid-column: 2 / -1;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .event-detail-cell {
        grid-column: 2 / -1;
        min-width: 0;
    }

    .event-detail-content {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .timeline-run-summary,
    .timeline-failure-focus,
    .timeline-hidden-runs {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeline-run-result {
        text-align: left;
    }

    .event-row {
        grid-template-columns: 5.8rem minmax(0, 1fr);
    }

    .event-stage-chip,
    .event-label,
    .event-http-cell,
    .event-row-summary,
    .event-detail-cell {
        grid-column: 2;
    }
}
.event-row[data-severidade="falha"] { background: var(--fail-soft); }
.event-row[data-severidade="tentativa_com_erro"] { background: var(--warn-soft); }
.event-time-cell i { color: var(--muted); font-size: 0.72rem; font-style: normal; }
[data-event-row] {
    display: grid;
    grid-template-columns: 7.6rem 6rem minmax(10rem, 1.15fr) 5.8rem minmax(12rem, 2fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-height: 40px;
    padding: 0.42rem 0.75rem;
    border-top: 1px solid var(--rule);
}
[data-event-row]:first-child { border-top: 0; }
[data-event-row][data-severidade="falha"] { background: var(--fail-soft); }
[data-event-row][data-severidade="tentativa_com_erro"] { background: var(--warn-soft); }
[data-event-row] > time { display: grid; line-height: 1.05; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-event-row] > time i { color: var(--muted); font-size: 0.72rem; font-style: normal; font-weight: 400; }
[data-event-row] > [data-etapa] { display: inline-flex; width: fit-content; padding: 0.25rem 0.48rem; border-radius: 999px; background: var(--neutral-soft); color: var(--neutral); font-size: 0.73rem; font-weight: 800; }
[data-event-row] > [data-etapa="omie"] { background: var(--omie-soft); color: var(--omie-ink); }
[data-event-row] > [data-etapa="nf"] { background: var(--nf-soft); color: var(--nf-ink); }
[data-event-row] > [data-etapa="ftd"] { background: var(--ftd-soft); color: var(--ftd-ink); }
[data-event-row] > [data-etapa="conclusao"] { background: var(--done-soft); color: var(--done-ink); }
[data-event-row] > strong { min-width: 0; font-size: 0.84rem; }
[data-event-row] > [data-http] { grid-column: 4; }
[data-event-row] > [data-resumo] { grid-column: 5; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
[data-event-row] > details { grid-column: 6; position: relative; }
[data-event-row] > details > summary { list-style: none; cursor: pointer; }
[data-event-row] > details > summary::-webkit-details-marker { display: none; }
[data-event-row] > details > [data-event-detail-content] { margin-top: 0.55rem; min-width: 0; }
/* Detalhe aberto: o painel ocupa uma segunda faixa da linha, de ponta a ponta, em vez de esticar a coluna do botao
   para fora da tela. O botao continua no mesmo lugar (ancorado no canto da primeira faixa) e a coluna dele mantem a
   largura para o resumo nao correr por baixo. Nao depende de grid dentro do <details> (o conteudo fica num slot interno
   que os navegadores tratam de formas diferentes). */
@media (min-width: 901px) {
    [data-event-row] { position: relative; }
    [data-event-row]:has(> details[open]) {
        grid-template-columns: 7.6rem 6rem minmax(10rem, 1.15fr) 5.8rem minmax(12rem, 2fr) var(--event-toggle-width, 7.2rem);
        grid-template-rows: minmax(2.6rem, auto) auto;
    }
    [data-event-row] > details[open] { grid-column: 1 / -1; grid-row: 2; position: static; min-width: 0; }
    [data-event-row] > details[open] > summary { position: absolute; top: 0.42rem; right: 0.75rem; }
    [data-event-row] > details[open] > [data-event-detail-content] { margin-top: 0.1rem; }
}
@media (max-width: 900px) {
    [data-event-row] { grid-template-columns: 6.5rem 5.4rem minmax(0, 1fr) auto; gap: 0.45rem; }
    [data-event-row] > [data-http] { grid-column: 4; }
    [data-event-row] > [data-resumo], [data-event-row] > details { grid-column: 2 / -1; }
    [data-event-row] > [data-resumo] { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
    [data-event-row] > details > [data-event-detail-content] { min-width: 0; width: 100%; }
}
@media (max-width: 520px) {
    [data-event-row] { grid-template-columns: 5.8rem minmax(0, 1fr); }
    [data-event-row] > [data-etapa], [data-event-row] > strong, [data-event-row] > [data-http], [data-event-row] > [data-resumo], [data-event-row] > details { grid-column: 2; }
}