/* =====================================================================================
   EFICÁCIA CRM — mod-gestao-permissoes.css · o ecrã de Gestão de Permissões

   PORQUE É QUE ISTO É UM FICHEIRO NOVO
   Estas regras viviam no fim do `mod-barrainferior.css`, que é a folha da barra de
   atalhos do rodapé. Não tinham nada a ver uma com a outra: foram parar lá porque o
   ecrã de permissões nasceu dentro de «O Meu Perfil», ao lado da barra, e ninguém
   voltou a separá-las quando o ecrã ganhou rota própria. Uma folha que carrega o CSS
   de outro módulo faz duas coisas más ao mesmo tempo — obriga a carregar a barra para
   se ver as permissões, e faz com que quem mexer na barra tenha medo de tocar no fim
   do ficheiro.

   MOBILE-FIRST, e por uma razão concreta: a linha de uma capacidade tem texto longo
   (rótulo + nota + de onde vem o valor) e três controlos. Aos 320px isso não cabe em
   linha, por isso o desenho base é EM COLUNA e só a partir dos 720px é que passa a
   linha. O contrário — desenhar para o rato e depois «arranjar» o telemóvel — foi o
   que deixou 138px de vazio na versão anterior deste ecrã.

   Prefixo `gp-`. As classes `pm-*` que aqui estavam desapareceram com a versão dos
   selos de perfil; se alguma sobrar algures, é de código morto.
   ===================================================================================== */


/* =====================================================================================
   1. AVISO — quando a API de excepções não responde
   ===================================================================================== */

.gp-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--warning-100, #FEF3C7);
    border-radius: var(--r-md, 10px);
    background: var(--warning-50, #FFFBEB);
    color: var(--warning-700, #B45309);
    font-size: var(--txt-sm, 13px);
    line-height: 1.45;
}

.gp-aviso > i {
    flex-shrink: 0;
    margin-top: 1px;
}


/* =====================================================================================
   2. ESCOLHER O ALVO

   Duas fases: enquanto não há alvo mostra-se o seletor completo (âmbito + lista
   pesquisável); depois de escolhido encolhe para uma tira com o nome e o botão de
   trocar, porque a partir daí o ecrã é sobre as permissões e não sobre a escolha.
   ===================================================================================== */

.gp-alvo {
    display: block;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 12px);
    background: var(--surface, #fff);
}

.gp-modos {
    display: flex;
    width: 100%;
    margin: 6px 0 12px;
}

/* Aos 320px os dois botões têm de partilhar a largura em partes iguais — com
   `flex: 0 1 auto` (o valor do design-system) «Por Utilizador» empurrava o grupo
   para fora do ecrã e a página ganhava barra horizontal. */
.gp-modos .ds-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
}

.gp-alvo-procura {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.gp-alvo-procura > i {
    flex-shrink: 0;
    color: var(--text-3, #6b7280);
}

.gp-alvo-procura .ds-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ds-touch, 44px);
}

/* A lista rola dentro de si própria: com 12 colaboradores ainda cabia na página, com
   80 empurrava o painel todo para baixo do ecrã. */
.gp-alvo-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-alvo-op {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: var(--ds-touch, 44px);
    padding: 8px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
    color: var(--ink-700, #374151);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.gp-alvo-op:hover,
.gp-alvo-op:focus-visible {
    border-color: var(--brand-600, #DA0A0D);
    background: var(--brand-50, #fef2f2);
}

.gp-alvo-op-nome {
    font-size: var(--txt-sm, 14px);
    font-weight: var(--fw-semibold, 600);
}

.gp-alvo-op-sub {
    flex-shrink: 0;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6b7280);
}

.gp-alvo-vazio {
    margin: 8px 0 0;
    font-size: var(--txt-sm, 13px);
    color: var(--text-3, #6b7280);
}

.gp-alvo-escolhido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.gp-alvo-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-full, 999px);
    background: var(--brand-50, #fef2f2);
    color: var(--brand-700, #b91c1c);
}

.gp-alvo-txt {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gp-alvo-nome {
    font-size: var(--txt-md, 15px);
    font-weight: var(--fw-semibold, 600);
}

.gp-alvo-sub {
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6b7280);
    line-height: 1.4;
}


/* =====================================================================================
   3. PRESETS E LEGENDA
   ===================================================================================== */

.gp-presets {
    margin: 0 0 14px;
}

.gp-presets-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 6px;
}

.gp-presets-fila .ds-btn {
    min-height: var(--ds-touch, 44px);
}

.gp-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6b7280);
}

.gp-legenda li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gp-ponto {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: var(--r-full, 999px);
    background: var(--ink-300, #cbd5e1);
}

.gp-ponto--sim { background: var(--success-600, #059669); }
.gp-ponto--nao { background: var(--danger-600, #C10E3A); }
.gp-ponto--def { background: var(--ink-300, #cbd5e1); }
.gp-ponto--ov  { background: var(--brand-600, #DA0A0D); }


/* =====================================================================================
   4. A PROCURA

   Fica colada ao topo ao rolar. São 64 capacidades em 9 categorias — se a procura
   desaparecesse ao descer, voltava tudo ao mesmo assim que se começasse a rolar.
   ===================================================================================== */

.gp-procura {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 0;
    background: var(--bg, #fff);
}

.gp-procura > i {
    flex-shrink: 0;
    color: var(--text-3, #6b7280);
}

.gp-procura .ds-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ds-touch, 44px);
}

.gp-conta {
    flex-shrink: 0;
    font-size: var(--txt-xs, 12px);
    color: var(--text-3, #6b7280);
    white-space: nowrap;
}

/* Aos 420px o campo precisa da largura toda. */
@media (max-width: 420px) {
    .gp-conta { display: none; }
}


/* =====================================================================================
   5. CATEGORIA
   ===================================================================================== */

.gp-grupo {
    margin: 0 0 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 12px);
    background: var(--surface, #fff);
    overflow: hidden;
}

.gp-grupo-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--surface-alt, #f8fafc);
}

.gp-grupo-nome {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--ds-touch, 44px);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--txt-sm, 14px);
    font-weight: var(--fw-semibold, 600);
    text-align: left;
    cursor: pointer;
}

.gp-grupo-nome > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-grupo-nome > i {
    flex-shrink: 0;
    transition: transform .15s;
}

.gp-grupo.is-recolhido .gp-grupo-nome > i { transform: rotate(-90deg); }
.gp-grupo.is-recolhido .gp-lista { display: none; }

.gp-grupo-conta {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--r-full, 999px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-3, #6b7280);
    font-size: var(--txt-xs, 12px);
    font-weight: var(--fw-medium, 500);
    white-space: nowrap;
}

.gp-mestre { flex-shrink: 0; }

.gp-mestre-off {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-3, #9ca3af);
}

/* Aos 360px a contagem por extenso («12/14 permitidas») rouba a largura ao nome da
   categoria. Encolhe-se o texto, não se esconde: é a informação que o cabeçalho existe
   para dar. */
@media (max-width: 400px) {
    .gp-grupo-conta {
        font-size: 11px;
        padding: 2px 6px;
    }
}


/* =====================================================================================
   6. A LINHA DE UMA CAPACIDADE

   Base (telemóvel): tudo em coluna — texto, e por baixo a fila com selo, interruptor e
   repor. A partir dos 720px passa a duas colunas.
   ===================================================================================== */

.gp-lista {
    display: flex;
    flex-direction: column;
}

.gp-cap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border, #f1f5f9);
}

.gp-cap:first-child { border-top: 0; }

.gp-cap-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gp-cap-nome {
    font-size: var(--txt-sm, 14px);
    font-weight: var(--fw-semibold, 600);
}

.gp-cap-nota {
    font-size: var(--txt-xs, 12px);
    color: var(--ink-500, #6b7280);
    line-height: 1.45;
}

/* De onde vem o valor, por palavras. A cor sozinha não chega — e para quem não
   distingue verde de vermelho é a única informação que resta. */
.gp-cap-origem {
    font-size: 11px;
    color: var(--text-3, #9ca3af);
    line-height: 1.4;
}

.gp-cap-fim {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gp-cap-fim .gp-selo { margin-right: auto; }


/* ---- selos ---------------------------------------------------------------------- */

.gp-selo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-full, 999px);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: var(--fw-medium, 500);
    white-space: nowrap;
}

.gp-selo--def {
    background: var(--surface-alt, #f1f5f9);
    color: var(--text-3, #6b7280);
}

.gp-selo--ov {
    background: var(--brand-50, #fef2f2);
    border-color: var(--brand-200, #fecaca);
    color: var(--brand-700, #b91c1c);
}

.gp-selo--fixa {
    background: var(--surface-alt, #f1f5f9);
    border-color: var(--border, #e5e7eb);
    color: var(--text-3, #6b7280);
}

.gp-selo--fora {
    background: var(--warning-50, #FFFBEB);
    border-color: var(--warning-100, #FEF3C7);
    color: var(--warning-700, #B45309);
}


/* ---- o interruptor, nos quatro estados ------------------------------------------
   O `.ds-switch` do design-system só sabe ligado/desligado, e ligado é sempre a cor da
   marca. Aqui a cor tem de dizer TRÊS coisas ao mesmo tempo: se está permitido, se está
   bloqueado, e se isso é uma decisão gravada ou apenas o que o código diz por omissão.

   · verde     → permitido POR EXCEPÇÃO gravada
   · vermelho  → bloqueado POR EXCEPÇÃO gravada
   · cinzento  → sem excepção neste âmbito (o valor vem de cima)
   · apagado   → fora do tecto ou fixa: desligado E desactivado
   -------------------------------------------------------------------------------- */

.gp-sw { flex-shrink: 0; }

.gp-sw--sim input:checked + .ds-switch-track { background: var(--success-600, #059669); }

.gp-sw--nao .ds-switch-track { background: var(--danger-600, #C10E3A); }

.gp-sw--def input:checked + .ds-switch-track { background: var(--ink-400, #94a3b8); }

/* Fora do tecto / fixa: o cursor diz «não» antes de a pessoa tentar. O `title` traz o
   motivo — «A função X não pode receber Y. O limite está no código.» */
.gp-sw--bloq {
    opacity: .45;
    cursor: not-allowed;
}

.gp-sw--bloq .ds-switch-track { background: var(--ink-200, #e2e8f0); }

.gp-repor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ds-touch, 44px);
    height: var(--ds-touch, 44px);
    flex-shrink: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-md, 10px);
    background: var(--surface, #fff);
    color: var(--ink-600, #4b5563);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.gp-repor:hover:not(:disabled) {
    border-color: var(--brand-600, #DA0A0D);
    color: var(--brand-700, #b91c1c);
}

.gp-repor:disabled {
    opacity: .35;
    cursor: default;
}


/* =====================================================================================
   7. A PARTIR DOS 720px — a linha em duas colunas

   Só aqui: abaixo disto o texto de uma capacidade e três controlos na mesma linha dá
   uma coluna de texto com 90px, que parte as palavras a meio.
   ===================================================================================== */

@media (min-width: 720px) {

    .gp-cap {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .gp-cap-txt {
        flex: 1 1 auto;
    }

    .gp-cap-fim {
        flex: 0 0 auto;
    }

    .gp-cap-fim .gp-selo {
        margin-right: 0;
        min-width: 108px;
        justify-content: center;
    }
}


/* =====================================================================================
   8. ESTADO VAZIO (sem alvo escolhido)
   ===================================================================================== */

.gp-vazio {
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: var(--r-lg, 12px);
    background: var(--surface, #fff);
}


/* =====================================================================================
   9. TEMA ESCURO — só o que o token não resolve sozinho
   ===================================================================================== */

@media (prefers-color-scheme: dark) {
    .gp-procura { background: var(--bg, #0f172a); }
}

:root[data-theme="dark"] .gp-procura { background: var(--bg, #0f172a); }
:root[data-theme="light"] .gp-procura { background: var(--bg, #fff); }