/*
 * Organograma Municipal — estilos da visualização.
 * Backend/dados: org_chart_nodes (migration 030). Hooks da página mantidos
 * (.org-chart-toolbar, .org-chart-viewport, #org-chart-root, .org-chart-legend).
 * Visual: cards com ícone por tipo, sigla em pill, conectores em árvore
 * (técnica de pseudo-elementos), toggle na borda do card, e modo lista/mobile
 * em árvore vertical recuada. Cores por tipo casam com a legenda.
 */

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.org-chart-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap;
}
.org-chart-toolbar-group { display: flex; gap: 8px; }
.org-chart-toolbar .br-button.is-active {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* ── Viewport + raiz ─────────────────────────────────────────────────────── */
.org-chart-viewport {
    overflow-x: auto; padding: var(--space-2) 0 var(--space-4);
    -webkit-overflow-scrolling: touch;
}
.org-chart-root { display: block; }
.org-chart-loading {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-6) 0; color: var(--c-text-muted);
}

/* ── Árvore (top-down com conectores) ────────────────────────────────────── */
.org-tree, .org-children { list-style: none; margin: 0; padding: 0; }
.org-tree { display: flex; justify-content: center; min-width: max-content; }
.org-children { display: flex; justify-content: center; position: relative; padding-top: 22px; }
.org-li {
    position: relative; padding: 22px 12px 0;
    display: flex; flex-direction: column; align-items: center;
}
.org-li::before, .org-li::after {
    content: ''; position: absolute; top: 0; height: 22px; width: 50%;
    border-top: 2px solid var(--c-border);
}
.org-li::before { right: 50%; }
.org-li::after  { left: 50%; border-left: 2px solid var(--c-border); }
.org-li:only-child::before, .org-li:only-child::after { display: none; }
.org-li:only-child { padding-top: 0; }
.org-li:first-child::before, .org-li:last-child::after { border-top: 0; }
.org-li:last-child::before { border-right: 2px solid var(--c-border); }
.org-children::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 0; height: 22px; border-left: 2px solid var(--c-border);
}
.org-li.is-collapsed > .org-children { display: none; }

/* ── Nó (card + toggle) ──────────────────────────────────────────────────── */
.org-node { display: inline-flex; flex-direction: column; align-items: center; position: relative; }
.org-card {
    display: inline-flex; flex-direction: column; gap: 2px;
    min-width: 184px; max-width: 240px; padding: 13px 18px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--c-text); text-align: center;
    transition: box-shadow .15s, transform .12s, border-color .15s;
}
.org-card.is-link { cursor: pointer; }
.org-card.is-link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.org-card.is-link:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.org-node-head { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--c-primary); }
.org-node-head .fas { font-size: 1.02rem; }
.org-sigla {
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    background: var(--c-primary-light); color: var(--c-primary-dark);
    padding: 1px 8px; border-radius: 100px;
}
.org-title { font-weight: 600; line-height: 1.25; margin-top: 2px; }
.org-role { font-size: .78rem; color: var(--c-text-muted); }
.org-person { font-size: .82rem; font-weight: 600; color: var(--c-primary-dark); margin-top: 2px; }
.org-link-hint { font-size: .72rem; color: var(--c-primary); margin-top: 4px; opacity: 0; transition: opacity .15s; }
.org-card.is-link:hover .org-link-hint, .org-card.is-link:focus-visible .org-link-hint { opacity: 1; }

/* Acentos por tipo (mesmas cores da legenda) */
.org-card.type-root       { border-top-color: var(--c-primary-darker); min-width: 200px; }
.org-card.type-root .org-title { font-size: 1.02rem; }
.org-card.type-root .org-node-head, .org-card.type-root .org-person { color: var(--c-primary-darker); }
.org-card.type-entity     { border-top-color: var(--c-primary); }
.org-card.type-department { border-top-color: #3b82f6; }
.org-card.type-department .org-node-head { color: #3b82f6; }
.org-card.type-special    { border-top-color: var(--c-accent); }

/* Botão expandir/recolher (na borda inferior do card) */
.org-toggle {
    margin-top: -11px; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-primary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15,23,42,.12); transition: background .15s, color .15s;
}
.org-toggle:hover { background: var(--c-primary); color: #fff; }
.org-toggle:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.org-toggle .fas { transition: transform .15s; }
.org-li.is-collapsed > .org-node > .org-toggle .fas { transform: rotate(-90deg); }

/* ── Legenda ─────────────────────────────────────────────────────────────── */
.org-chart-legend {
    display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--space-4);
    padding: var(--space-2) 0; border-top: 1px solid var(--c-border);
    font-size: .82rem; color: var(--c-text-muted);
}
.org-legend-item { display: flex; align-items: center; gap: 8px; }
.org-legend-badge { display: inline-block; width: 32px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.org-legend-badge.org-type-root       { background: var(--c-primary-darker); }
.org-legend-badge.org-type-entity     { background: var(--c-primary); }
.org-legend-badge.org-type-department { background: #3b82f6; }
.org-legend-badge.org-type-special    { background: var(--c-accent); }

/* ── Modo Lista (e mobile): árvore vertical recuada ──────────────────────── */
.org-chart-root.is-list-view .org-tree,
.org-chart-root.is-list-view .org-children { display: block; }
.org-chart-root.is-list-view .org-tree { min-width: 0; }
.org-chart-root.is-list-view .org-children {
    padding: 8px 0 0 22px; margin-left: 16px; border-left: 2px solid var(--c-border);
}
.org-chart-root.is-list-view .org-li { display: block; padding: 8px 0 0; align-items: stretch; }
.org-chart-root.is-list-view .org-li::before,
.org-chart-root.is-list-view .org-li::after,
.org-chart-root.is-list-view .org-children::before { display: none; }
.org-chart-root.is-list-view .org-node { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.org-chart-root.is-list-view .org-card { text-align: left; align-items: flex-start; max-width: none; width: 100%; }
.org-chart-root.is-list-view .org-node-head { justify-content: flex-start; }
.org-chart-root.is-list-view .org-toggle { margin: 0; order: -1; flex: 0 0 auto; }

@media (max-width: 640px) {
    .org-chart-viewport { overflow-x: visible; }
    .org-tree { display: block; min-width: 0; }
    .org-tree > .org-li { padding: 0; }
    .org-children { display: block; padding: 8px 0 0 22px; margin-left: 16px; border-left: 2px solid var(--c-border); }
    .org-li { display: block; padding: 8px 0 0; align-items: stretch; }
    .org-li::before, .org-li::after, .org-children::before { display: none; }
    .org-node { display: flex; flex-direction: row; align-items: center; gap: 8px; }
    .org-card { text-align: left; align-items: flex-start; max-width: none; width: 100%; }
    .org-node-head { justify-content: flex-start; }
    .org-toggle { margin: 0; order: -1; flex: 0 0 auto; }
}