/* ===========================================================================
   Exibição: o tema, a densidade e o tamanho da fonte que a pessoa escolhe (exibicao.js), e a janela em que ela
   escolhe. Entra por último em toda página do sistema (pageNova, em _controllers/index.php), depois das folhas
   da página, porque muda medidas e cores que elas definem.

   =========================================================================== */

/* ---------------------------------------------------------------------------
   Tamanho da fonte: o exibicao.js põe em --fx-fonte quanto a pessoa quer (0,8 a 1,3) e a fonte da página inteira
   é multiplicada por isso; o que é medido em rem acompanha. O 1.2rem é o tamanho que o base.css dá a todo
   elemento, o <html> inclusive ("* { font-size: 1.2rem }").
   --------------------------------------------------------------------------- */
html{
    font-size: calc(1.2rem * var(--fx-fonte, 1));
}

/* ---------------------------------------------------------------------------
   Tema escuro. As folhas do sistema pintam tudo com os nomes de cor de .fs-app (styles.css do gestor do field
   service); aqui os mesmos nomes ganham os valores do tema escuro do app dos técnicos
   (fs_flutter/lib/core/tema.dart, padraoEscuro).

   Fica de fora o conteúdo das telas escritas à mão (fx-manual), que ainda tem cores próprias: nelas o tema vale
   para a barra do topo, o rodapé e as janelas do sistema.
   --------------------------------------------------------------------------- */
html[data-fx-tema="escuro"] body.fx-novo:not(.fx-manual){
    background: #101418;
    color-scheme: dark;
}

html[data-fx-tema="escuro"] .fs-app:not(body.fx-manual .pg > :not(.pg-barra, .pg-rodape), body.fx-manual .pg > :not(.pg-barra, .pg-rodape) *){
    --fs-primary: #83CBEB;
    --fs-on-primary: #003257;
    --fs-appbar: #161A1F;
    --fs-on-appbar: #E1E2E8;
    --fs-background: #101418;
    --fs-surface: #1F2329;
    --fs-surface-alto: #2A3038;
    --fs-cartao: #191C20;
    --fs-text: #E1E2E8;
    --fs-muted: #A9B1BC;
    --fs-outline: #3A414A;
    --fs-grad-a: #0B4A86;
    --fs-grad-b: #062B4D;
    --fs-success: #5CC25C;
    --fs-warning: #E8A64C;
    --fs-error: #FF8A80;

    color-scheme: dark;
}

/* a janela "Exibição" fica um tom acima do fundo da página */
html[data-fx-tema="escuro"] .fs-app.ex-janela .modal-content{
    background: var(--fs-cartao);
}

/* a barra do topo, escura, se separa da página por uma linha (no claro é a cor que a separa) */
html[data-fx-tema="escuro"] .pg .pg-barra{
    border-bottom: 1px solid #2A3038;
}

/* ---------------------------------------------------------------------------
   Densidade: o quanto de espaço fica entre as coisas. São dois fatores, como no app: um para os espaços
   (denso 0,7; espaçado 1,35) e um mais brando para a altura do que se toca (botão, campo, item de menu), que não
   pode ficar pequeno demais para o dedo. A linha das listas tem a altura escrita em cada densidade, em pixels
   inteiros, porque a lista calcula quantas linhas cabem na janela (crud.js: alturaDaLinha).
   --------------------------------------------------------------------------- */
html{
    --fx-d: 1;
    --fx-dc: 1;
    --fx-linha: 44px;
}

html[data-fx-densidade="denso"]{
    --fx-d: 0.7;
    --fx-dc: 0.86;
    --fx-linha: 34px;
}

html[data-fx-densidade="espacado"]{
    --fx-d: 1.35;
    --fx-dc: 1.14;
    --fx-linha: 56px;
}

/* a moldura (pagina.css) */
.pg .pg-faixa{
    padding: calc(28px * var(--fx-d)) 0 calc(30px * var(--fx-d)) 0;
}

/* a home (home.css) e a home dos apps (app.css) */
.pg .hm-app{
    gap: calc(10px * var(--fx-d));
    padding: calc(18px * var(--fx-d)) 10px calc(14px * var(--fx-d)) 10px;
}

.pg .ap-grupo{
    margin-bottom: calc(14px * var(--fx-d));
    padding: calc(8px * var(--fx-d)) 8px;
}

.pg .ap-item{
    min-height: calc(40px * var(--fx-dc));
    padding: calc(5px * var(--fx-d)) 8px;
}

/* os cartões dos widgets (widgets.css) */
.wg{
    padding: calc(16px * var(--fx-d)) 18px calc(18px * var(--fx-d)) 18px;
}

/* os cadastros (crud.css) */
.cr .cr-tabela th,
.cr .cr-tabela td,
.cr-janela .cr-tabela th,
.cr-janela .cr-tabela td{
    height: var(--fx-linha);
}

.cr .cr-botao,
.cr-janela .cr-botao{
    min-height: calc(40px * var(--fx-dc));
}

.cr .cr-ficha{
    min-height: calc(34px * var(--fx-dc));
}

.cr .cr-cartoes{
    gap: calc(8px * var(--fx-d));
}

.cr .cr-item{
    padding: calc(12px * var(--fx-d)) 8px calc(12px * var(--fx-d)) 14px;
}

.cr .cr-secao{
    margin-bottom: calc(14px * var(--fx-d));
    padding: calc(18px * var(--fx-d)) 18px;
}

.cr .cr-campos,
.cr-janela .cr-campos{
    gap: calc(14px * var(--fx-d)) 14px;
}

.cr-campo > label,
.cr-campo > .cr-rotulo{
    margin-bottom: calc(5px * var(--fx-d));
}

.cr-campo .cr-entrada{
    min-height: calc(42px * var(--fx-dc));
    padding-top: calc(8px * var(--fx-d));
    padding-bottom: calc(8px * var(--fx-d));
}

/* o painel do servidor (stats.css) */
.st .st-grade,
.st .st-linhas{
    gap: calc(14px * var(--fx-d));
}

.st .st-cartao{
    padding: calc(18px * var(--fx-d)) 20px calc(20px * var(--fx-d)) 20px;
}

@media (max-width: 767.98px){
    .pg .pg-faixa{
        padding: calc(20px * var(--fx-d)) 0 calc(22px * var(--fx-d)) 0;
    }

    .cr .cr-secao{
        padding: calc(14px * var(--fx-d)) 14px;
    }

    .st .st-cartao{
        padding: calc(16px * var(--fx-d)) 16px;
    }
}

/* ---------------------------------------------------------------------------
   O botão da barra e a janela "Exibição", como a do app: um grupo para cada escolha, as opções em cartões e a
   régua da fonte entre um A pequeno e um A grande. Cada escolha vale na hora.
   --------------------------------------------------------------------------- */
.fs-app.ex-janela .modal-dialog{
    max-width: 380px;
}

.fs-app.ex-janela .modal-content{
    overflow: hidden;
    border: 0;
    border-radius: 26px;
    background: var(--fs-background);
    color: var(--fs-text);
}

.fs-app.ex-janela .modal-body{
    padding: 22px 22px 6px 22px;
    background: transparent;
}

.ex-janela .ex-topo{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--fs-primary);
    font-size: 1.5rem;
}

.ex-janela .ex-topo h5{
    margin: 0;
    color: var(--fs-text);
    font-size: 1.35rem;
    font-weight: 800;
}

.ex-janela .ex-grupo{
    margin-top: 18px;
}

.ex-janela .ex-grupo h6{
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px 0;
    color: var(--fs-text);
    font-size: 1rem;
    font-weight: 800;
}

.ex-janela .ex-grupo h6 i{
    color: var(--fs-primary);
    font-size: 1.1rem;
}

.ex-janela .ex-opcoes{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ex-janela .ex-opcao{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 74px;
    padding: 10px 4px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--fs-text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.1;
}

.ex-janela .ex-opcao i.bi{
    font-size: 1.35rem;
}

.ex-janela .ex-opcao:hover{
    background: var(--fs-surface-alto);
}

.ex-janela .ex-opcao[aria-checked="true"]{
    border-color: var(--fs-primary);
    background: color-mix(in srgb, var(--fs-primary) 12%, var(--fs-cartao, #fff));
    color: var(--fs-primary);
    font-weight: 800;
}

.ex-janela .ex-opcao:focus-visible,
.ex-janela .ex-texto-botao:focus-visible{
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

/* as três linhas da densidade: mais juntas, normais ou mais afastadas */
.ex-janela .ex-linhas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.ex-janela .ex-linhas i{
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.ex-janela .ex-fonte{
    display: flex;
    align-items: center;
    gap: 12px;
}

.ex-janela .ex-a-pequeno{
    font-size: 0.8rem;
    font-weight: 800;
}

.ex-janela .ex-a-grande{
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.ex-janela .ex-regua{
    flex: 1;
    min-width: 0;
    accent-color: var(--fs-primary);
}

.ex-janela .ex-fonte-rodape{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.ex-janela .ex-quanto{
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ex-janela .ex-texto-botao{
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fs-primary);
    font-size: 0.98rem;
    font-weight: 800;
}

.ex-janela .ex-texto-botao:hover:not(:disabled){
    background: var(--fs-surface-alto);
}

.ex-janela .ex-texto-botao:disabled{
    opacity: 0.4;
}

.ex-janela .ex-rodape{
    display: flex;
    justify-content: flex-end;
    padding: 0 14px 14px 14px;
}