/* Corrige o atributo HTML "hidden": sem esta regra, o display:flex
   declarado abaixo para .login-screen/.app-shell teria prioridade
   sobre o hidden do navegador e as duas telas ficariam visiveis
   juntas. */
[hidden] { display: none !important; }

:root {
    --cor-fundo: #f4f5f7;
    --cor-texto: #1f2430;
    --cor-borda: #e2e4e9;
    --cor-primaria: #2563eb;
    --cor-primaria-escura: #1d4ed8;
    --cor-sidebar: #111827;
    --cor-sidebar-texto: #d1d5db;
    --cor-erro: #dc2626;
    --sombra: 0 1px 3px rgba(0,0,0,.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

/* ---------- Login ---------- */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #111827, #1f2937);
}
.login-box {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
}
.login-box h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.login-sub { margin: 0 0 1.25rem; font-size: .85rem; color: #6b7280; }
.login-box label { font-size: .8rem; margin: .5rem 0 .25rem; font-weight: 600; }
.login-box input {
    padding: .55rem .65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: .9rem;
}
.login-box button {
    margin-top: 1.25rem;
    padding: .65rem;
    border: none;
    border-radius: 6px;
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.login-box button:hover { background: var(--cor-primaria-escura); }
.login-error { color: var(--cor-erro); font-size: .8rem; margin-top: .75rem; }

/* ---------- Layout geral do app ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: 240px;
    background: var(--cor-sidebar);
    color: var(--cor-sidebar-texto);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sidebar-header {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
}
.sidebar-header strong { color: #fff; font-size: 1.05rem; }
.sidebar-sub { font-size: .72rem; color: #9ca3af; margin-top: .15rem; }

.sidebar-nav { flex: 1; padding: .75rem .5rem; display: flex; flex-direction: column; gap: .25rem; }
.nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    border: none;
    color: var(--cor-sidebar-texto);
    padding: .6rem .75rem;
    border-radius: 8px;
    text-align: left;
    font-size: .88rem;
    cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.active { background: var(--cor-primaria); color: #fff; }
.nav-icon {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,.1);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
}
.nav-item.active .nav-icon { background: rgba(255,255,255,.25); }

.sidebar-footer {
    padding: .9rem 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}
.link-btn {
    background: none; border: none; color: #93c5fd; cursor: pointer; font-size: .8rem;
    padding: 0;
}

.content { flex: 1; padding: 1.75rem 2rem; overflow-x: hidden; }
.view-section { max-width: 1300px; }
.section-header h2 { margin: 0 0 .15rem; font-size: 1.3rem; }
.section-header p { margin: 0 0 1.25rem; color: #6b7280; font-size: .88rem; }

/* ---------- Toolbar / tabela ---------- */
.toolbar { display: flex; gap: .6rem; margin-bottom: .9rem; }
.toolbar input, .toolbar select {
    padding: .5rem .65rem;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    font-size: .85rem;
}
.toolbar input[type="search"] { flex: 1; max-width: 420px; }

.table-wrap { background: #fff; border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--cor-borda); }
th { background: #f9fafb; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
tbody tr:hover { background: #f5f7fb; cursor: pointer; }
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-ativo { background: #dcfce7; color: #166534; }
.badge-inativo { background: #fee2e2; color: #991b1b; }

.pagination { display: flex; gap: .4rem; align-items: center; margin-top: .9rem; font-size: .82rem; }
.pagination button {
    padding: .35rem .65rem;
    border: 1px solid var(--cor-borda);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
}
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Modal de detalhe ---------- */
.modal {
    position: fixed; inset: 0; background: rgba(17,24,39,.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 3rem 1rem; overflow-y: auto; z-index: 50;
}
.modal-box {
    background: #fff; border-radius: 10px; padding: 1.75rem 2rem;
    width: 100%; max-width: 680px; position: relative;
}
.modal-fechar {
    position: absolute; top: .75rem; right: .9rem;
    background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #6b7280;
}
.detalhe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; margin: 1rem 0; font-size: .85rem; }
.detalhe-grid dt { color: #6b7280; font-size: .72rem; text-transform: uppercase; }
.detalhe-grid dd { margin: 0 0 .5rem; }
.raw-json {
    background: #0b1020; color: #d1d5db; padding: .9rem; border-radius: 8px;
    font-size: .74rem; max-height: 260px; overflow: auto; white-space: pre-wrap;
}
details.raw-toggle summary { cursor: pointer; font-size: .8rem; color: var(--cor-primaria); margin-top: .5rem; }

/* ---------- Fluxos ---------- */
.fluxos-layout {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 1rem;
    height: calc(100vh - 160px);
}
.fluxos-lista {
    background: #fff; border-radius: 10px; box-shadow: var(--sombra);
    padding: .75rem; display: flex; flex-direction: column; overflow: hidden;
}
.fluxos-lista input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--cor-borda); border-radius: 6px; font-size: .8rem; margin-bottom: .6rem; }
.fluxos-lista ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.fluxos-lista li {
    padding: .5rem .55rem; border-radius: 6px; font-size: .82rem; cursor: pointer; color: #374151;
}
.fluxos-lista li:hover { background: #f3f4f6; }
.fluxos-lista li.active { background: var(--cor-primaria); color: #fff; }
.fluxos-lista li .node-count { font-size: .7rem; color: inherit; opacity: .7; }

.fluxos-diagrama-wrap { background: #fff; border-radius: 10px; box-shadow: var(--sombra); overflow: hidden; position: relative; }
#fluxos-diagrama-scroll { width: 100%; height: 100%; overflow: auto; }
#fluxos-diagrama { position: relative; }

.flow-node {
    position: absolute;
    width: 190px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    padding: .5rem .6rem;
    font-size: .74rem;
    cursor: pointer;
}
.flow-node:hover { border-color: var(--cor-primaria); }
.flow-node.selected { border-color: var(--cor-primaria-escura); box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
.flow-node .flow-node-tipo {
    display: inline-block; font-size: .65rem; font-weight: 700; color: #fff;
    padding: .1rem .4rem; border-radius: 999px; margin-bottom: .3rem;
}
.flow-node .flow-node-texto { color: #374151; line-height: 1.35; }

.fluxos-lateral { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.fluxos-detalhe-no, .fluxos-legenda {
    background: #fff; border-radius: 10px; box-shadow: var(--sombra); padding: .9rem 1rem;
    font-size: .82rem;
}
.fluxos-detalhe-no .hint { color: #9ca3af; margin: 0; }
.fluxos-legenda h3 { margin: 0 0 .5rem; font-size: .85rem; }
.fluxos-legenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.fluxos-legenda li { display: flex; gap: .5rem; align-items: flex-start; }
.legenda-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .25rem; flex-shrink: 0; }
.legenda-texto strong { display: block; font-size: .8rem; }
.legenda-texto span { color: #6b7280; font-size: .74rem; }

@media (max-width: 1100px) {
    .fluxos-layout { grid-template-columns: 1fr; height: auto; }
    #fluxos-diagrama-scroll { height: 480px; }
}