/* ===== base =====
   Tipos de letra, tokens do tema e as sobreposições aos componentes do Bootstrap. É o
   primeiro da cadeia porque todos os outros contam com estas variáveis já definidas: uma
   regra só entra aqui se valer para a página toda. */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/Poppins-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/Poppins-Bold.woff2') format('woff2');
}

/* ===== a paleta da marca =====
   O navy estava escrito 24 vezes, e as suas sombras mais 10. Mudar a cor da marca era um
   find-and-replace por 34 sítios, e bastava falhar um para ficar um botão de outra cor.

   Fica aqui em cima e sozinha porque é a identidade, não o tema: o bloco de baixo é que a
   liga aos nomes do Bootstrap. Um tema escuro reescreve estas nove linhas e o resto do
   ficheiro -- e do projecto -- não muda uma vírgula.

   O `#070e28` juntou-se ao `#070d26`: dois em sete e dois em quarenta de diferença num canal
   é meia unidade de ΔE, e o olho separa a partir de duas. Eram a mesma cor escrita duas
   vezes, e uma paleta com um tom a menos é um tom a menos para espelhar no escuro. */
:root {
    --brand: #0b163f;
    --brand-rgb: 11, 22, 63;
    --brand-hover: #091233;
    --brand-active: #08102d;
    --brand-emphasis: #070d26;
    --brand-emphasis-rgb: 7, 13, 38;
    /* Os subtis são o navy diluído e não um cinzento: o `#d5d8e1` que aqui estava tinha
       perdido o azul pelo caminho, e uma linha seleccionada ficava cinzenta ao lado de um
       botão navy. Estes mantêm o tom e só lhe tiram saturação. */
    --brand-subtle: #dde3f0;
    --brand-subtle-hover: #d0d8ea;
    --brand-subtle-active: #c3cde4;
    --brand-subtle-border: #b3bfda;
    /* A superfície da marca: a barra de navegação e mais nada.
       Separada do `--brand` porque as duas coisas divergem no escuro. O `--brand` é o que
       reage ao toque -- botões, links, o que está seleccionado -- e no escuro tem de subir de
       luminosidade para se ver. Uma barra que suba com ele deixa de ser a barra da marca e
       passa a ser uma faixa azul viva no topo da página. */
    --brand-bar: #0b163f;
    /* O texto que assenta sobre o navy. Um nome e não `#fff`, porque no escuro deixa de o ser.
       O par em RGB é para as camadas translúcidas da barra de navegação, que são tons desta
       cor e não do branco: seguem-na sozinhas quando ela mudar. */
    --brand-on: #fff;
    --brand-on-rgb: 255, 255, 255;
}

/* ===== o mesmo navy, no escuro =====
   O Bootstrap 5.3 já vira os seus próprios tokens em `[data-bs-theme="dark"]`, e como quase
   tudo neste projecto pede a cor por `var(--bs-*)`, quase tudo vira sozinho. O que faltava
   era isto: nove valores da marca escritos à mão, que no escuro ficavam onde estavam.
   Esta é a razão de terem virado tokens primeiro.

   O navy sobe de luminosidade: a #0b163f um botão desaparecia contra o fundo escuro. A
   ênfase faz o contrário e passa a ser o tom claro -- é o que o Bootstrap faz aos seus
   `-text-emphasis`, porque no escuro quem realça é a luz e não a sombra.

   O quanto sobe não é gosto: a barra de navegação é este navy sobre o corpo da página, e a
   #2c4a8f a diferença entre os dois era de 1,8 para 1 -- a barra desaparecia como banda. A
   #3a5eb0 são 2,5 para 1 contra o corpo e 6,2 para 1 para o texto branco que assenta nela,
   que é o equilíbrio entre ver-se a barra e ler-se o que lá está dentro. */
[data-bs-theme="dark"] {
    --brand: #3f6fe0;
    --brand-rgb: 63, 111, 224;
    --brand-hover: #4b79e8;
    --brand-active: #5885f0;
    --brand-emphasis: #a8c0f8;
    --brand-emphasis-rgb: 168, 192, 248;
    --brand-subtle: #16223d;
    --brand-subtle-hover: #1c2a4a;
    --brand-subtle-active: #223257;
    --brand-subtle-border: #2b3b63;
    /* A barra desce em vez de subir. No claro é o navy sobre uma página clara; no escuro
       continua a ser navy, e é a página que se afunda por baixo dela. Contra o corpo dá 1,14
       para 1 -- o mesmo degrau que separa um cartão do fundo -- e 16,8 para 1 para o branco
       que assenta nela. Antes subia até `#3a5eb0` e lia-se como uma barra azul genérica em
       cima de uma aplicação cinzenta. */
    --brand-bar: #131d33;
}

/* ===== as superfícies do escuro =====
   O tema escuro do Bootstrap é cinzento neutro, e o da marca é navy: a aplicação lia-se como
   duas peças de sítios diferentes -- um corpo cinzento com uma faixa azul colada em cima.
   Estes cinco valores puxam as superfícies para a mesma família da marca, tirando saturação
   em vez de tirando o tom.

   Os degraus entre elas são de 1,10 e 1,12 para 1, que é o mesmo que separa o cartão branco
   do corpo `#f4f5f7` no tema claro: a mesma leitura de profundidade nos dois temas, e não uma
   hierarquia mais rasa no escuro. O texto assenta a 15,8 para 1 e o texto suave a 7,7. */
[data-bs-theme="dark"] {
    --bs-body-bg: #0a0f1a;
    --bs-body-bg-rgb: 10, 15, 26;
    --bs-body-color: #e6e9f2;
    --bs-body-color-rgb: 230, 233, 242;
    --bs-emphasis-color: #f2f4fa;
    --bs-secondary-color: rgba(230, 233, 242, .68);
    --bs-secondary-bg: #121a2b;
    --bs-secondary-bg-rgb: 18, 26, 43;
    --bs-tertiary-color: rgba(230, 233, 242, .45);
    --bs-tertiary-bg: #1a2438;
    --bs-tertiary-bg-rgb: 26, 36, 56;
    --bs-border-color: #26314b;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
}

/* ===== o SweetAlert =====
   O tema `bootstrap-5` do próprio SweetAlert dá-lhe a forma -- os raios, os espaços e os
   botões do Bootstrap. As cores é que não: traz as do Bootstrap de fábrica, e o azul
   `#0d6efd` não é o navy da casa. Estas seis linhas são a paleta, e seguem o tema porque
   pedem os tokens que já viram no escuro.

   O selector leva o `body` à frente para ganhar ao ficheiro do tema, que declara o mesmo no
   mesmo sítio; o atributo é posto pelo `theme.js`. */
body[data-swal2-theme] {
    --swal2-background: var(--bs-body-bg);
    --swal2-color: var(--bs-body-color);
    --swal2-border: 1px solid var(--bs-border-color);
    --swal2-toast-border: 1px solid var(--bs-border-color);
    --swal2-confirm-button-background-color: var(--brand);
    --swal2-confirm-button-color: var(--brand-on);
    --swal2-action-button-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25);
}

/* ===== a escala tipográfica =====
   Dezanove tamanhos de letra, quase todos medidos a régua sobre uma maqueta: 12,48px, 12,5px,
   12,8px e 13px viviam em quatro regras vizinhas, e não há olho que os separe. O que a
   diferença fazia era obrigar a inventar um número novo a cada regra que se escrevia.

   Seis degraus. O `--fs-body` é o próprio `--bs-body-font-size` e não uma cópia dele, que
   ficaria para trás no dia em que o corpo do texto mudar; os outros cinco são passos à volta
   dele. Os extremos existem por uma razão concreta e não por simetria: o `--fs-micro` é o
   visto dentro de uma caixa de 14px, o `--fs-xl` é o ícone do cartão do assistente. Escolher
   um tamanho passa a ser escolher um papel. */
:root {
    --fs-micro: .625rem;
    --fs-label: .6875rem;
    --fs-sm: .8125rem;
    --fs-body: var(--bs-body-font-size);
    --fs-lg: 1.0625rem;
    --fs-xl: 1.4rem;
}

:root,
[data-bs-theme="light"] {
    --bs-body-font-size: .875rem;
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-text-emphasis: var(--brand-emphasis);
    --bs-primary-bg-subtle: var(--brand-subtle);
    --bs-primary-border-subtle: var(--brand-subtle-border);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-emphasis);
    --bs-link-hover-color-rgb: var(--brand-emphasis-rgb);
    --bs-focus-ring-color: rgba(var(--brand-rgb), .25);
}

.btn-primary {
    --bs-btn-color: var(--brand-on);
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-on);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-active);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-on);
    --bs-btn-active-bg: var(--brand-active);
    --bs-btn-active-border-color: var(--brand-emphasis);
    --bs-btn-disabled-color: var(--brand-on);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* ===== as grelhas =====
   O `themeQuartz` do AG Grid veste-se a si próprio; daqui vai só o que ele não sabe da
   plataforma. A linha de filtros usa os campos do Bootstrap, e as folgas dele à volta deles
   têm de sair. */
/* A altura é do `domLayout: "autoHeight"` do AG Grid, que pede a das linhas que tem. */

/*
 * O AG Grid centra o texto de uma célula dando-lhe a altura da linha como `line-height`.
 * Um desenho próprio -- a pastilha de estado, os botões da linha -- herda-a: cresce até
 * transbordar a linha, e assenta na linha de base em vez de ficar ao centro.
 */
.settings-grid .ag-cell {
    display: flex;
    align-items: center;
    line-height: var(--bs-body-line-height);
}

.ag-header-row-column-filter .ag-header-cell {
    padding-inline: .4rem;
}

.ag-floating-filter-body,
.ag-floating-filter-full-body {
    display: flex;
    align-items: center;
}

/* O botão que abre o menu de condições do filtro de texto: no servidor só há "contém", e
   um botão que abre uma escolha de uma opção só é ruído. */
.ag-floating-filter-button {
    display: none !important;
}

/* O campo de texto do AG Grid vestido como um `form-control-sm`, já que esse não se lhe
   pode dar por classe. */
.ag-header-cell .ag-text-field-input {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.ag-header-cell .ag-text-field-input:focus {
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
    outline: 0;
}

/* A coluna da engrenagem não tem conteúdo: as células não desenham nada. */
.grid-settings-cell {
    border: 0 !important;
    background: transparent !important;
}

.grid-settings-button {
    color: var(--bs-body-color);
    opacity: .65;
    line-height: 1;
}

.grid-settings-button:hover,
.grid-settings-button:focus-visible {
    color: var(--bs-body-color);
    opacity: 1;
}

/* O painel da engrenagem é um `dropdown-menu`, posicionado à mão dentro da grelha. Uma área
   de scroll só: com a lista de colunas a rolar por dentro havia duas barras encaixadas. */
.grid-settings {
    position: absolute;
    z-index: 5;
    min-width: 15rem;
    max-height: min(28rem, 60vh);
    overflow-y: auto;
    --bs-dropdown-item-padding-y: .3rem;
}

.grid-settings.show {
    display: block;
}

.grid-settings .dropdown-item {
    cursor: pointer;
}

/* ===== o cabeçalho de uma tabela de listagem =====
   No telemóvel as células empilham e cada uma leva a sua etiqueta ao lado do valor, por isso
   o cabeçalho nomearia colunas que ali não existem.

   Isto é CSS próprio porque o Bootstrap não gera utilitário para `table-header-group` -- só
   `d-*-table`, `d-*-table-row` e `d-*-table-cell`. O `d-sm-table-header-group` que aqui
   estava não existia, e por isso o `d-none` ganhava sempre: o cabeçalho nunca apareceu em
   ecrã nenhum. */
.table-head-wide {
    display: none;
}

@media (min-width: 576px) {
    .table-head-wide {
        display: table-header-group;
    }
}

/* ===== a base do telemóvel =====
   As únicas coisas desta página que os utilitários do Bootstrap não sabem fazer: não há
   `fs-sm-*` nem tamanho de botão por breakpoint. Todo o resto está na marcação, onde se vê
   ao lado do elemento a que se aplica. */
@media (max-width: 575.98px) {
    /* Um campo com menos de 16px faz o Safari do iPhone dar zoom à página ao focar, e não
       volta atrás. O par com `input-group-sm` está cá porque o Bootstrap serve esse caso
       com dois selectores, e ganharia ao de um só. */
    .form-control,
    .form-select,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select {
        font-size: 1rem;
    }

    /* 44px é o alvo de toque mínimo, e os botões desta página são quase todos `btn-sm`,
       que dá 31. O texto continua pequeno; o que cresce é a área de toque. */
    .btn {
        min-height: 44px;
    }

    /* Um cartão que só serve de moldura em ecrã largo. O padding sai por `p-0 p-sm-3` na
       marcação; a borda e o fundo vêm cá ter porque não há `border-sm` nem `bg-sm-*`. */
    .card-flush-sm {
        border: 0;
        background: transparent;
    }

}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-on);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
    --bs-btn-active-color: var(--brand-on);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--brand);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--brand);
    border-color: var(--brand);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
}

.pagination {
    --bs-pagination-active-bg: var(--brand);
    --bs-pagination-active-border-color: var(--brand);
}

.list-group {
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
}

.list-group-item-primary {
    --bs-list-group-color: var(--brand-emphasis);
    --bs-list-group-bg: var(--brand-subtle);
    --bs-list-group-border-color: var(--brand-subtle-border);
    --bs-list-group-action-hover-color: var(--brand-emphasis);
    --bs-list-group-action-hover-bg: var(--brand-subtle-hover);
    --bs-list-group-action-active-color: var(--brand-emphasis);
    --bs-list-group-action-active-bg: var(--brand-subtle-active);
    --bs-list-group-active-color: var(--brand-on);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand);
}

body {
    font-family: 'Poppins', sans-serif;
}