/*
 * Componentes compartilhados — fatia 12b do redesign.
 *
 * Estiliza o markup gerado pelas macros de `templates/_macros/ui.html`.
 * Consome APENAS os tokens de `tokens.css` (fatia 12a): nenhuma cor literal
 * aqui, para trocar a paleta continuar sendo uma edição em um arquivo só.
 *
 * O prefixo `gp-` evita colisão com as classes do Bulma, que segue sendo o
 * framework — estes componentes convivem com ele, não o substituem.
 */

/* --- Card de indicador --------------------------------------------------- */

.gp-card {
    display: block;
    position: relative;
    padding: var(--esp-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background-color: var(--superficie-cartao);
    box-shadow: var(--sombra-1);
    color: var(--cor-texto);
    height: 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

/* Só o card clicável reage ao mouse — dar feedback de hover em bloco estático
   promete uma interação que não existe. */
a.gp-card:hover {
    box-shadow: var(--sombra-2);
    border-color: var(--cor-primaria);
    transform: translateY(-1px);
    color: var(--cor-texto);
}

a.gp-card:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

.gp-card__icone {
    position: absolute;
    top: var(--esp-3);
    right: var(--esp-3);
    font-size: 1.25rem;
    opacity: 0.65;
}

.gp-card__valor {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-display);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.gp-card__rotulo {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-base);
    font-weight: 600;
    margin-top: var(--esp-1);
}

.gp-card__desc {
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
    margin-top: var(--esp-1);
}

/* A cor entra como faixa lateral, não como fundo inteiro: o número continua
   legível e a tela não vira um mosaico colorido. */
.gp-card--perigo { border-left: 3px solid var(--cor-erro); }
.gp-card--atencao { border-left: 3px solid var(--cor-atencao); }
.gp-card--sucesso { border-left: 3px solid var(--cor-sucesso); }
.gp-card--info { border-left: 3px solid var(--cor-info); }

.gp-card--perigo .gp-card__valor { color: var(--cor-erro); }
.gp-card--sucesso .gp-card__valor { color: var(--cor-sucesso); }

/* --- Estado vazio -------------------------------------------------------- */

.gp-vazio {
    text-align: center;
    padding: var(--esp-8) var(--esp-4);
    color: var(--cor-texto-suave);
}

.gp-vazio__icone {
    display: block;
    font-size: 2.5rem;
    margin-bottom: var(--esp-2);
    opacity: 0.7;
}

.gp-vazio__titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-titulo);
    font-weight: 600;
    color: var(--cor-texto);
}

.gp-vazio__texto {
    font-size: var(--texto-base);
    margin-top: var(--esp-1);
}

/* --- Chips --------------------------------------------------------------- */

.gp-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: 0.15rem var(--esp-2);
    border-radius: var(--raio-total);
    font-size: var(--texto-rotulo);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Chips vizinhos (varios papeis na mesma celula) nao podem se encostar. */
.gp-chip + .gp-chip { margin-left: var(--esp-1); }

.gp-chip--neutro { background: var(--superficie-maxima); color: var(--cor-texto-suave); }
.gp-chip--info { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.gp-chip--sucesso { background: var(--cor-sucesso); color: #ffffff; }
.gp-chip--atencao { background: var(--cor-atencao); color: #ffffff; }
.gp-chip--perigo { background: var(--cor-erro); color: var(--cor-sobre-erro); }
/* "Pausado" não é atraso: o relógio do SLA parou de propósito (C4). */
.gp-chip--pausado { background: var(--superficie-alta); color: var(--cor-info); border: 1px solid var(--cor-info); }

/* --- Painel -------------------------------------------------------------- */

.gp-painel {
    background-color: var(--superficie-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-1);
    margin-bottom: var(--esp-5);
    overflow: hidden;
}

.gp-painel__topo {
    padding: var(--esp-4);
    border-bottom: 1px solid var(--cor-borda);
}

.gp-painel__titulo {
    font-family: var(--fonte-titulo);
    font-size: var(--texto-titulo);
    font-weight: 600;
    color: var(--cor-texto);
}

.gp-painel__desc {
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
    margin-top: var(--esp-1);
}

.gp-painel__corpo { padding: var(--esp-4); }

/* --- Tabela -------------------------------------------------------------- */

/* O wrapper é o que impede a tabela larga de empurrar a página inteira no
   celular: a rolagem fica DENTRO dela. */
.gp-tabela-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-tabela {
    background-color: transparent;
    font-size: var(--texto-base);
}

.gp-tabela th {
    font-family: var(--fonte-texto);
    font-size: var(--texto-rotulo);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-suave);
    border-bottom: 1px solid var(--cor-borda);
    white-space: nowrap;
}

.gp-tabela td {
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto);
    vertical-align: middle;
}

.gp-tabela tbody tr:hover { background-color: var(--superficie-baixa); }

/* --- Botões e modal ------------------------------------------------------ */

.gp-botao-primario {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.gp-botao-primario:hover {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
    color: var(--cor-sobre-primaria);
}

.gp-modal .modal-card-head,
.gp-modal .modal-card-foot {
    background-color: var(--superficie-baixa);
    border-color: var(--cor-borda);
}

.gp-modal .modal-card-body { background-color: var(--superficie-cartao); }
.gp-modal .modal-card-title { font-family: var(--fonte-titulo); color: var(--cor-texto); }

.gp-chip-filtro { margin-bottom: 0; }

/* --- Formulario de pagina ------------------------------------------------

   Padrao das telas de formulario (abrir chamado, editar, etc.). Mesma
   linguagem da tela de entrada: rotulo acima, campo de canto arredondado,
   ajuda discreta embaixo. Fica aqui, e nao num CSS por tela, porque sao muitas
   telas de formulario — uma copia por tela e o caminho conhecido para elas
   divergirem.
   -------------------------------------------------------------------------- */

.gp-form-pagina {
    max-width: 52rem;
    margin: 0 auto;
}

/* Trilha + atalho de volta. O "voltar" existe porque abandonar um formulario
   pelo botao do navegador e o caminho que perde o que ja foi digitado sem
   avisar. */
.gp-form-trilha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

.gp-form-trilha a { color: var(--cor-primaria); }
.gp-form-trilha__sep { margin: 0 var(--esp-2); }

.gp-form-cartao {
    padding: var(--esp-6);
    background-color: var(--superficie-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-1);
}

.gp-form-cartao__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: var(--cor-texto);
}

.gp-form-cartao__desc {
    margin: var(--esp-2) 0 var(--esp-6);
    text-align: center;
    color: var(--cor-texto-suave);
}

/* --- Campo --------------------------------------------------------------- */

.gp-form-campo { margin-bottom: var(--esp-5); }

.gp-form-campo__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin-bottom: var(--esp-2);
}

.gp-form-campo__rotulo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    color: var(--cor-texto);
}

/* Os controles do Bulma sao normalizados aqui para que input, select e textarea
   tenham a mesma moldura e a mesma altura na mesma tela. */
.gp-form-campo .input,
.gp-form-campo .textarea,
.gp-form-campo select {
    width: 100%;
    padding: 0.65rem var(--esp-3);
    background-color: var(--superficie-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: var(--texto-base);
    box-shadow: none;
    height: auto;
}

.gp-form-campo .textarea { min-height: 8rem; resize: vertical; }

.gp-form-campo .input:focus,
.gp-form-campo .textarea:focus,
.gp-form-campo select:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--superficie-alta);
    outline: none;
}

.gp-form-campo .input.is-danger,
.gp-form-campo .textarea.is-danger,
.gp-form-campo .select.is-danger select { border-color: var(--cor-erro); }

/* O wrapper `.select` do Bulma desenha a propria seta; mantida, mas com a cor
   do tema. */
.gp-form-campo .select { width: 100%; }
.gp-form-campo .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--cor-primaria); }

.gp-form-campo__ajuda {
    margin-top: var(--esp-2);
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

.gp-form-campo__erro {
    margin-top: var(--esp-2);
    font-size: var(--texto-pequeno);
    color: var(--cor-erro);
}

/* Resumo de erros no topo do formulario: aparece mesmo quando o campo com erro
   esta num bloco escondido (ex.: o formulario padrao, sob o wizard de marketing). */
.gp-form-erros {
    margin-bottom: var(--esp-5);
    padding: var(--esp-4);
    background-color: var(--superficie-baixa);
    border: 1px solid var(--cor-erro);
    border-left-width: 3px;
    border-radius: var(--raio-lg);
    color: var(--cor-texto);
}

.gp-form-erros__titulo {
    margin-bottom: var(--esp-2);
    font-weight: 600;
    color: var(--cor-erro);
}

.gp-form-erros ul { margin: 0 0 0 1.2rem; list-style: disc; }

/* --- Destaque (bloco opcional dentro do formulario) ---------------------- */

.gp-form-destaque {
    margin-bottom: var(--esp-5);
    padding: var(--esp-4);
    background-color: var(--superficie-baixa);
    border: 1px solid var(--cor-atencao);
    border-left-width: 3px;
    border-radius: var(--raio-lg);
}

.gp-form-destaque__titulo {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-weight: 600;
    color: var(--cor-texto);
}

.gp-form-destaque__desc {
    margin: var(--esp-1) 0 0 1.6rem;
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

/* --- Acoes --------------------------------------------------------------- */

.gp-form-acoes {
    display: flex;
    justify-content: center;
    gap: var(--esp-3);
    margin-top: var(--esp-6);
    padding-top: var(--esp-5);
    border-top: 1px solid var(--cor-borda);
}

@media screen and (max-width: 768px) {
    .gp-form-cartao { padding: var(--esp-4); }
    /* Empilhados e de largura total: em 360px os dois lado a lado ficam
       estreitos demais para o alvo do dedo. */
    .gp-form-acoes { flex-direction: column-reverse; }
    .gp-form-acoes > * { width: 100%; }
}

/* Listas de checkbox do wizard de marketing (publicos, locais). As regras
   viviam num <style> inline no template; aqui elas param de depender do nonce
   da CSP e passam a valer para qualquer tela que use o mesmo markup. */
.mkt-check-list ul { list-style: none; margin: 0; padding: 0; }
.mkt-check-list li { margin-bottom: var(--esp-1); }
.mkt-check-list input[type="checkbox"] { margin-right: var(--esp-2); }

/* --- Documento institucional (termos, privacidade) ----------------------- */

.gp-doc {
    max-width: 46rem;
    margin: 0 auto;
    padding: var(--esp-6);
    background-color: var(--superficie-cartao);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl);
    box-shadow: var(--sombra-1);
}

.gp-doc__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cor-texto);
}

.gp-doc__resumo {
    margin: var(--esp-2) 0 0;
    color: var(--cor-texto-suave);
}

.gp-doc__versao {
    margin: var(--esp-3) 0 0;
    padding-bottom: var(--esp-4);
    border-bottom: 1px solid var(--cor-borda);
    font-size: var(--texto-pequeno);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* Texto corrido longo: a medida (~46rem acima) e o espacamento entre secoes sao
   o que torna um documento destes legivel ate o fim. */
.gp-doc__corpo h2 {
    margin: var(--esp-6) 0 var(--esp-3);
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cor-texto);
}

.gp-doc__corpo p,
.gp-doc__corpo li {
    color: var(--cor-texto);
    line-height: 1.65;
}

.gp-doc__corpo p { margin-bottom: var(--esp-3); }

.gp-doc__corpo ul {
    margin: 0 0 var(--esp-3) var(--esp-5);
    list-style: disc;
}

.gp-doc__corpo li { margin-bottom: var(--esp-2); }

.gp-doc__corpo a,
.gp-doc__rodape a { color: var(--cor-primaria); }

.gp-doc__rodape {
    margin-top: var(--esp-6);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--cor-borda);
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-suave);
}

/* --- Calendario de eventos ------------------------------------------------

   O FullCalendar recebia a cor de cada evento em hexadecimal vindo do backend
   (paleta do Bootstrap, que nao e a deste projeto e nao tinha variante escura:
   no tema escuro o calendario ficava com blocos claros e texto ilegivel).
   Agora o backend manda so a classe do status e a cor vem daqui, dos tokens.
   -------------------------------------------------------------------------- */

.gp-evento--planejado {
    background-color: var(--superficie-maxima);
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto);
}

.gp-evento--confirmado {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.gp-evento--em-andamento {
    background-color: var(--cor-atencao);
    border-color: var(--cor-atencao);
    color: #ffffff;
}

.gp-evento--finalizado {
    background-color: var(--cor-sucesso);
    border-color: var(--cor-sucesso);
    color: #ffffff;
}

.gp-evento--cancelado {
    background-color: var(--cor-erro);
    border-color: var(--cor-erro);
    color: var(--cor-sobre-erro);
}

/* O proprio calendario: superficie e botoes seguindo os tokens. */
.gp-calendario {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--superficie-cartao);
    color: var(--cor-texto);
}

.gp-calendario .fc-button-primary {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.gp-calendario .fc-button-primary:hover,
.gp-calendario .fc-button-primary:not(:disabled).fc-button-active,
.gp-calendario .fc-button-primary:not(:disabled):active {
    background-color: var(--cor-primaria-hover);
    border-color: var(--cor-primaria-hover);
}

.gp-calendario .fc-event { cursor: pointer; }

/* --- Responsivo ---------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .gp-doc { padding: var(--esp-4); }
    .gp-card__valor { font-size: 1.5rem; }
    .gp-painel__corpo,
    .gp-painel__topo { padding: var(--esp-3); }
}