/* Ajustes específicos das telas (perfis). O padrão comum fica em css/apr-padrao.css. */

/* ---------------------------------------------------------------------------
   Seção Módulos: cartão inteiro clicável, switch à direita.
   Decide pela largura do CONTÊINER (container query), não da janela: o formulário tem no máximo 1280 px.
   Contêiner abaixo de 1400 px: um cartão por linha, horizontal e compacto (cerca de 68 a 76 px):
   linha 1: título | estado ("Ligado · 4 de 5 permissões") | switch;
   linha 2: descrição na largura toda até antes do switch, até 2 linhas, sem reticências.
   Contêiner a partir de 1400 px: três colunas; descrição e estado por baixo do título e do switch.
   --------------------------------------------------------------------------- */
.apr-modulos-contenedor {
    container-type: inline-size;
    container-name: apr-modulos;
}
.apr-modulos-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
@container apr-modulos (min-width: 1400px) {
    .apr-modulos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.apr-modulo-item { min-width: 0; }

.apr-modulo-cartao {
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px 10px 14px;
    background-color: var(--mud-palette-surface);
    transition: border-color 120ms ease, background-color 120ms ease;
    min-width: 0;
}
/* Ligado: borda de 2 px na cor primária (#007C50) e fundo verde bem claro (vale também no tema escuro) */
.apr-modulo-cartao.apr-modulo-cartao--ligado {
    border: 2px solid var(--mud-palette-primary);
    padding: 9px 11px 9px 13px; /* compensa a borda de 2 px */
    background-color: rgba(var(--mud-palette-primary-rgb), .10);
}
.apr-modulo-cartao-linha {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) max-content auto;
    grid-template-areas:
        "icone titulo estado switch"
        "icone descricao descricao .";
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    min-height: 40px;
    cursor: pointer;
    min-width: 0;
}
.apr-modulo-cartao--desabilitado .apr-modulo-cartao-linha { cursor: default; }
.apr-modulo-icone {
    grid-area: icone;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}
.apr-modulo-cartao--ligado .apr-modulo-icone {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}
.apr-modulo-titulo {
    grid-area: titulo;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.3;
    white-space: nowrap;
}
.apr-modulo-descricao {
    grid-area: descricao;
    min-width: 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    white-space: normal;
    text-wrap: pretty;
}
.apr-modulo-estado {
    grid-area: estado;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.apr-modulo-cartao--ligado .apr-modulo-estado strong { color: var(--mud-palette-primary); }
.apr-modulo-switch { grid-area: switch; margin: -6px -8px -6px 0; align-self: center; }
.apr-modulo-nota {
    display: block;
    color: var(--mud-palette-text-secondary);
    padding-left: 50px;
}

/* Três colunas (contêiner >= 1400 px) e contêiner estreito (< 760 px): descrição e estado embaixo, na largura toda */
@container apr-modulos (min-width: 1400px) or (max-width: 759.98px) {
    .apr-modulo-cartao-linha {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas:
            "icone titulo switch"
            ". descricao descricao"
            ". estado estado";
        row-gap: 2px;
        align-items: center;
    }
    .apr-modulo-descricao {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* ---------------------------------------------------------------------------
   Permissões do perfil: grupos, itens e busca
   --------------------------------------------------------------------------- */
.apr-perm-busca { width: 280px; max-width: 100%; }
.apr-perm-mostrar-chaves { margin: 0 4px 0 0; }
.apr-perm-mostrar-chaves .mud-switch-label-small { white-space: nowrap; }
.apr-perm-busca.mud-input-control { margin: 0; }

/* Grupos separados por um fio de 1 px, com 16 px de respiro; a faixa cinza fica só no grupo de módulo desligado */
/* As colunas da lista decidem pela largura dos grupos (container query), não pela da janela */
.apr-perm-grupos {
    container-type: inline-size;
    container-name: apr-perm;
}
.apr-perm-grupos .apr-perm-grupo {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0 !important;
    background-color: transparent;
}
.apr-perm-grupos .apr-perm-grupo .mud-expand-panel-header { padding: 12px 16px; }
/* A caixa do item fica embaixo do ícone do grupo: 16 (margem) + 32 (caixa do grupo) + 10 (espaço) - 6 (centra a caixa de 32 px no ícone de 20 px) */
.apr-perm-grupos .apr-perm-grupo .mud-expand-panel-content { padding: 0 16px 16px 52px; }

/* Caixas de seleção com a mesma geometria no grupo e nos itens: 32 x 32 px, sem margem negativa */
.apr-perm-grupo-cabecalho .mud-checkbox,
.apr-perm-item .mud-checkbox { margin: 0; }
.apr-perm-grupo-cabecalho .mud-checkbox > .mud-icon-button,
.apr-perm-item .mud-checkbox > .mud-icon-button { padding: 4px; }
.apr-perm-grupo-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.apr-perm-grupo-titulos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.apr-perm-grupo-titulo {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.apr-perm-grupo-aviso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--mud-palette-warning);
}
.apr-perm-grupo-contador {
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    margin-right: 8px;
}
/* Grupo de módulo desligado: fundo cinza e título em cinza escuro (sem opacidade, para não perder contraste) */
.apr-perm-grupo.apr-perm-grupo--desligado .mud-expand-panel-header {
    background-color: var(--mud-palette-background-gray);
}
.apr-perm-grupo.apr-perm-grupo--desligado .apr-perm-grupo-titulo { color: var(--mud-palette-text-secondary); }

/* Lista de permissões: 1 coluna; 2 com os grupos a partir de 700 px; 3 só a partir de 1400 px (não acontece no
   formulário de 1280 px, então ficam 2 colunas também em 1920); linha de 40 px */
.apr-perm-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 24px;
    row-gap: 0;
}
@container apr-perm (min-width: 700px) {
    .apr-perm-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container apr-perm (min-width: 1400px) {
    .apr-perm-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Subtítulos do grupo Administração alinhados à borda esquerda das caixas dos itens: a caixa de 32 px tem 4 px
   de padding e o desenho do quadrado começa 3 px dentro do ícone de 24 px (4 + 3 = 7 px) */
.apr-perm-subgrupo {
    padding-left: 7px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 14px 0 2px;
}
.apr-perm-subgrupo:first-child { margin-top: 2px; }

/* Rótulo de 1 linha: a caixa (32 px) fica centrada no texto; de 2 linhas: centrada na primeira linha */
.apr-perm-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 40px;
    padding: 4px 0;
}
.apr-perm-item .mud-input-control-boolean-input { flex-shrink: 0; }
.apr-perm-textos {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px; /* (32 - 20) / 2: a primeira linha (20 px) centrada na caixa de 32 px */
    cursor: pointer;
}
.apr-perm-rotulo {
    font-size: .9375rem;
    line-height: 20px;
    font-weight: 400; /* o estado aparece na caixa; o peso não muda ao marcar */
    min-width: 0;
    overflow-wrap: break-word;
    text-wrap: pretty;
}
/* Linha de apoio das permissões parecidas (notificações): sempre visível, sem depender do tooltip */
.apr-perm-explicacao {
    margin-top: 1px;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}
/* Chave técnica: só com "Mostrar chaves técnicas" (Super Administrador); discreta, numa linha só */
.apr-perm-chave {
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Dados do perfil
   --------------------------------------------------------------------------- */
.apr-perfil-padrao { padding-top: 6px; }
.apr-perfil-padrao .apr-texto-apoio { display: block; padding-left: 4px; text-wrap: pretty; }

/* Cabeçalho do Editar perfil: nome do perfil no subtítulo, numa linha, com reticências (texto inteiro no tooltip) */
.apr-perfil-subtitulo {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.apr-perfil-subtitulo strong { color: var(--mud-palette-text-primary); }