/* =============================================================================
   Estrutura organizacional — folha única partilhada pelo hub /estrutura,
   pelas suas tabs, pelo organograma e pelos diálogos de estrutura.

   Substitui os blocos <style> que estavam repetidos em Direction, Department,
   Seccao e UsuarioDepartamento. Carregada no App.razor, por isso qualquer
   <style> dentro de um componente continua a ganhar (vem depois no documento).
   ============================================================================= */

/* ---------- cabeçalho de página ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.page-title {
    font-weight: 600;
    color: #111827;
}

.page-subtitle {
    color: #64748b;
    margin-top: 4px;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ---------- contadores ---------- */

.mini-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 8px;
    padding: 6px 8px;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-right: 1px solid #eef0f3;
    white-space: nowrap;
}

.mini-stat:last-child {
    border-right: none;
}

.mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.mini-label {
    font-size: .75rem;
    color: #64748b;
}

.mini-stat strong {
    font-size: .85rem;
    font-weight: 600;
}

/* ---------- botões ---------- */

.btn-primary-main {
    background: #E4002B !important;
    color: #fff !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 500;
    border-radius: 6px;
    height: 40px;
    min-width: 160px;
}

.btn-refresh {
    text-transform: none !important;
    font-weight: 400 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    box-shadow: none !important;
    height: 40px;
}

.btn-search {
    background: #188038 !important;
    color: #fff !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 500;
    border-radius: 5px;
    height: 38px;
    width: 100%;
}

.btn-stamp {
    text-transform: none !important;
    color: #FF7043 !important;
    border-color: #FFCCBC !important;
}

/* ---------- painel de filtros ---------- */

.filter-panel .mud-expand-panel {
    box-shadow: none !important;
}

.filter-panel .mud-expand-panel-header {
    min-height: 54px;
    padding-left: 14px;
    padding-right: 14px;
}

.filter-grid {
    padding: 16px 14px 6px 14px;
}

/* ---------- listagem ---------- */

.list-shell {
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e7eaf0;
    padding: 18px 18px 24px 18px;
}

.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 4px 18px 4px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 10px;
}

.toolbar-title {
    font-weight: 600;
    color: #111827;
}

.toolbar-subtitle {
    color: #64748b;
    margin-top: 2px;
}

.list-grid {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.list-grid th {
    font-weight: 500 !important;
    color: #111827 !important;
    font-size: .85rem !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.list-grid td {
    border-bottom: 1px solid #eef0f3 !important;
    height: 52px;
    color: #374151;
}

.cell-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cell-code {
    min-width: 52px;
    height: 32px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #111827;
    font-weight: 600;
    font-size: .78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    white-space: nowrap;
}

.cell-code--seccao {
    background: #eef4ff;
    color: #1d4ed8;
}

.cell-name {
    font-weight: 500;
    color: #111827;
}

.cell-meta {
    color: #94a3b8;
}

.actions-cell {
    text-align: right;
    width: 70px;
}

.empty-state {
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- células de utilizador ---------- */

.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.initial-avatar {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
}

.funcao-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.chief-chip {
    height: 20px !important;
    font-size: .68rem !important;
    font-weight: 600;
    padding: 0 6px !important;
    border-radius: 999px !important;
}

.chief-chip .mud-chip-content {
    gap: 3px;
}

.chief-chip .mud-icon-root {
    font-size: 12px;
}

.tab-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 14px 0;
}

.tab-search {
    width: 260px;
}

.tab-filter {
    width: 150px;
}

/* ---------- formulários dos diálogos ---------- */

.form-shell {
    padding: 22px 24px;
    background: #fff;
}

.form-title {
    font-weight: 600;
    color: #111827;
}

.form-subtitle {
    color: #64748b;
    margin-top: 4px;
}

.form-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #eef0f3;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.save-btn {
    min-width: 120px;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 500;
}

/* ---------- hub /estrutura ---------- */

.estrutura-page {
    color: #111827;
}

/* Páginas de ecrã cheio (organograma, instituições, dashboard DMS, logs): tabelas
   e árvores largas ganham em ocupar o ecrã todo, sem o cap do MudContainer nem
   o padding lateral que ele traz. */
.estrutura-page,
.institution-page,
.dash-page,
.logs-page {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.estrutura-contexto {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.estrutura-tabs {
    background: transparent;
}

.estrutura-tabs .mud-tabs-toolbar {
    background: transparent;
}

.estrutura-tabs .mud-tabs-panel {
    padding-top: 16px;
}

/* =============================================================================
   ORGANOGRAMA
   ============================================================================= */

.org-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 4px 14px 4px;
    border-bottom: 1px solid #eef0f3;
    margin-bottom: 8px;
}

.org-breadcrumb {
    min-width: 0;
}

.org-zoom-valor {
    font-size: .75rem;
    color: #64748b;
    min-width: 46px;
    text-align: center;
}

.org-chefia {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px 4px 4px;
}

.org-chefia-rotulo {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #94a3b8;
}

.org-viewport {
    overflow: auto;
    padding: 16px 8px 32px 8px;
    /* ocupa o resto do ecrã: barra da app + tabs + toolbar do organograma */
    height: calc(100dvh - 300px);
    min-height: 420px;
}

.org-canvas {
    width: max-content;
    margin: 0 auto;
}

/* --- a árvore: ligações desenhadas com pseudo-elementos --- */

.org-tree,
.org-tree ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 24px 0 0 0;
    position: relative;
}

.org-tree {
    padding-top: 0;
}

.org-tree li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 10px 0 10px;
    list-style: none;
}

/* traço horizontal até ao irmão + traço vertical até ao pai */
.org-tree li::before,
.org-tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 24px;
    border-top: 2px solid #D6DADE;
}

.org-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #D6DADE;
}

.org-tree li:only-child::before,
.org-tree li:only-child::after {
    border-top: 0 none;
}

.org-tree li:first-child::before,
.org-tree li:last-child::after {
    border: 0 none;
}

.org-tree li:last-child::before {
    border-right: 2px solid #D6DADE;
    border-radius: 0 8px 0 0;
}

.org-tree li:first-child::after {
    border-radius: 8px 0 0 0;
}

/* traço que desce do cartão para a fila de filhos */
.org-tree ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 24px;
    border-left: 2px solid #D6DADE;
}

/* a raiz não tem ligação para cima */
.org-tree > li {
    padding-top: 0;
}

.org-tree > li::before,
.org-tree > li::after {
    display: none;
}

/* --- cartões de unidade --- */

.org-card {
    width: 240px;
    background: #fff;
    border: 1px solid #E7EAF0;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 20, 29, .04);
}

.org-card--empresa {
    border-top: 3px solid #0F141D;
}

.org-card--direcao {
    border-top: 3px solid #E4002B;
}

.org-card--departamento {
    border-top: 3px solid #00A449;
}

.org-card--seccao {
    border-top: 3px solid #1976D2;
}

.org-card--foco {
    border-color: #E4002B;
}

.org-card--hit {
    box-shadow: 0 0 0 3px rgba(228, 0, 43, .25);
}

.org-card-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.org-codigo {
    font-size: .7rem;
    font-weight: 700;
    background: #F1F5F9;
    color: #334155;
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.org-nome {
    font-weight: 600;
    color: #111827;
    font-size: .82rem;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.org-resp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    min-width: 0;
}

.org-resp-texto {
    min-width: 0;
    flex: 1 1 auto;
}

.org-resp-nome {
    display: block;
    font-size: .76rem;
    font-weight: 600;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-resp-funcao {
    display: block;
    font-size: .68rem;
    color: #94A3B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-resp--vazio {
    color: #94A3B8;
    font-style: italic;
    font-size: .72rem;
    margin-top: 8px;
}

.org-contagens {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.org-chip {
    height: 20px !important;
    font-size: .66rem !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
}

.org-card-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 4px;
    border-top: 1px solid #F1F5F9;
    padding-top: 4px;
}

/* --- membros --- */

.org-membros {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 240px;
}

.org-membros-rotulo {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #94A3B8;
}

.org-membro {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #EEF0F3;
    border-radius: 10px;
    padding: 6px 8px;
    background: #FAFBFC;
    min-width: 0;
}

.org-membro--inactivo {
    opacity: .55;
}

.org-membro-texto {
    min-width: 0;
    flex: 1 1 auto;
}

.org-membro-nome {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-membro-funcao {
    display: block;
    font-size: .66rem;
    color: #94A3B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-vazio {
    padding: 36px;
    text-align: center;
    color: #94A3B8;
}

/* ---------- responsivo ---------- */

@media (max-width: 960px) {
    .page-header,
    .page-header-actions,
    .list-toolbar,
    .tab-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mini-stats {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .btn-primary-main,
    .tab-search,
    .tab-filter {
        width: 100%;
    }
}

/* Abaixo de 900px a árvore passa a lista indentada: as ligações desenhadas
   deixam de fazer sentido em ecrã estreito e o zoom é desligado. */
@media (max-width: 900px) {
    /* sem altura fixa: a lista faz scroll com a página, não dentro de si */
    .org-viewport {
        height: auto;
    }

    .org-canvas {
        width: 100%;
        zoom: 1 !important;
    }

    .org-tree,
    .org-tree ul {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0 0 0 14px;
        border-left: 2px solid #D6DADE;
    }

    .org-tree {
        border-left: 0 none;
        padding-left: 0;
    }

    .org-tree li {
        align-items: stretch;
        padding: 8px 0 0 8px;
    }

    .org-tree li::before,
    .org-tree li::after,
    .org-tree ul::before {
        display: none;
    }

    .org-card,
    .org-membros {
        width: 100%;
    }
}

/* ===========================================================================
   Pré-visualização de anexos (PreviewDialog) — quase ecrã cheio, documento
   centrado. Sem isto o diálogo herda a largura do MaxWidth de cada chamador e
   o documento fica numa caixa pequena a meio de um diálogo grande.
   =========================================================================== */

.mud-dialog:has(.ci-preview-full) {
    width: 96vw;
    max-width: 96vw;
    height: 94vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
}

.mud-dialog:has(.ci-preview-full) .mud-dialog-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
}

.ci-preview-full {
    height: 100%;
}

/* ===========================================================================
   Botão flutuante das listas (CI, Cartas, Propostas) — telemóvel.
   A acção principal — nova comunicação, nova carta, nova proposta — deixa de
   ocupar uma faixa no topo e passa a seguir o polegar, como na Gestão
   Documental. Aqui não há barra de navegação fixa por baixo, por isso o botão
   assenta na margem inferior.
   =========================================================================== */

.lista-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1250;
}

/* ===========================================================================
   Diálogos no telemóvel — ecrã cheio.
   Quase todos os diálogos do eDocs fixam uma largura mínima no conteúdo
   (min-width: 420px e parecidos) para não ficarem espremidos no computador.
   Num ecrã de 360px isso empurra o conteúdo para fora: o que fica à direita
   — botões, campos, o X — deixa de se ver. Aqui a largura mínima cede, e o
   diálogo passa a ocupar o ecrã, sem margens nem cantos arredondados.
   =========================================================================== */

@media (max-width: 599px) {

    .mud-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    /* Bate a largura mínima que vem no atributo style do conteúdo. */
    .mud-dialog .mud-dialog-content > * {
        min-width: 0 !important;
    }

    .mud-dialog .mud-dialog-content {
        overflow-x: hidden;
    }
}

/* ===========================================================================
   Pré-visualização de documentos (CI / Carta / Proposta) — camada mobile.
   O desktop mantém as 2/3 colunas definidas nas folhas inline dos previews;
   abaixo de 960px o diálogo passa a ecrã cheio e mostra uma secção de cada
   vez, comandada pela barra inferior (PreviewNavMobile.razor).
   =========================================================================== */

.ci-mob-nav {
    display: none;
}

@media (max-width: 960px) {

    /* No telemóvel a pré-visualização de anexos não tem margem a perder. */
    .mud-dialog:has(.ci-preview-full) {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    /* Diálogo ocupa o ecrã todo — sem margens nem cantos arredondados. */
    .mud-dialog:has(.ci-preview-wrapper) {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    /* Espaço no fundo para a barra fixa não tapar conteúdo. Os 12px laterais
       igualam a margem negativa do MudGrid (Spacing="3") — com menos, o grid
       transborda e aparece scroll horizontal. */
    .ci-preview-wrapper {
        padding: 12px 12px calc(78px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden;
        min-height: 100%;
    }

    /* Uma secção de cada vez, conforme data-mob no wrapper. */
    .ci-preview-wrapper .ci-mob {
        display: none !important;
    }

    /* :not(.d-none) preserva o corte que o próprio preview faz à coluna de anexos. */
    .ci-preview-wrapper[data-mob="doc"] .ci-mob-doc:not(.d-none),
    .ci-preview-wrapper[data-mob="accoes"] .ci-mob-accoes:not(.d-none),
    .ci-preview-wrapper[data-mob="fluxo"] .ci-mob-fluxo:not(.d-none),
    .ci-preview-wrapper[data-mob="anexos"] .ci-mob-anexos:not(.d-none) {
        display: block !important;
    }

    /* O documento aproveita o ecrã todo (título do diálogo + barra inferior). */
    .ci-preview-wrapper .ci-pdf-box {
        height: calc(100dvh - 200px);
        min-height: 0;
    }

    /* Barra inferior: mesmo padrão de .dms-locais em MeuDesktop.razor. */
    .ci-mob-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1400;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: #FFFFFF;
        border-top: 1px solid #EEF0F2;
        box-shadow: 0 -4px 16px rgba(15, 20, 29, .06);
        justify-content: space-around;
        gap: 2px;
    }

    .ci-mob-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        border: none;
        background: transparent;
        border-radius: 10px;
        cursor: pointer;
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
        color: #7A828C;
        transition: background .15s ease, color .15s ease;
    }

        .ci-mob-item.ativo {
            color: #A20C28;
            background: #FDF2F4;
        }

    /* Contador de anexos sobreposto ao ícone. */
    .ci-mob-icone {
        position: relative;
        display: inline-flex;
    }

    .ci-mob-contador {
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 15px;
        padding: 0 3px;
        border-radius: 999px;
        background: #A20C28;
        color: #FFFFFF;
        font-size: 9px;
        line-height: 15px;
        font-weight: 600;
    }
}


/* Barra do editor do corpo: botões de tabela fora de uma tabela (editor-quill.js) */
.ql-toolbar button:disabled { opacity: .35; cursor: default; }