/* ==========================================================================
   A PELE VIDRO: paineis foscos sobre luz azul e violeta.

   Era a que o Danilo elogiou entre os tres estudos ("a vidro agrada"), com a
   ressalva que derrubou os tres: "ta muito cara de IA". Ela entra na casa
   consertada dessa ressalva, e o conserto e o seguinte:

   O QUE DAVA CARA DE IA nao era o vidro, era o EXCESSO. Degrade em cima de
   degrade, brilho em toda borda, cada caixa flutuando com sombra grande,
   nada assentado. Aqui o vidro ficou, e o excesso saiu: a luz colorida e UMA
   so, presa no fundo da pagina e nao em cada peca; o desfoque e leve; as
   bordas sao de um branco de 1 pixel, que e como vidro real pega a luz.

   CUSTO: backdrop-filter e caro em tela cheia. Por isso o desfoque esta nas
   pecas que importam (secao, janela, menu suspenso, barras) e NAO em cada
   celula de tabela, que multiplicaria o custo por centena.
   ========================================================================== */

:root {
    --vid-fundo: #0b1020;
    --vid-face: rgba(255, 255, 255, .055);
    --vid-face2: rgba(255, 255, 255, .085);
    --vid-borda: rgba(255, 255, 255, .13);
    --vid-borda-viva: rgba(255, 255, 255, .28);
    --vid-tinta: #e8edff;
    --vid-fraca: #97a3c4;
    --vid-azul: #60a5fa;
    --vid-violeta: #a78bfa;
    --vid-mal: #fb7185;
}

/* ---------- a luz, que fica no fundo e em lugar nenhum mais ----------
   Duas manchas presas na pagina, uma azul e uma violeta. Como sao fixas, o
   vidro por cima muda de tom conforme a peca anda pela tela, que e o que
   vidro de verdade faz. */
body,
.fi-body {
    background:
        radial-gradient(900px 600px at 12% -5%, rgba(96, 165, 250, .28), transparent 60%),
        radial-gradient(760px 520px at 92% 8%, rgba(167, 139, 250, .22), transparent 62%),
        var(--vid-fundo) !important;
    background-attachment: fixed !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
}

/* ---------- a lamina de vidro ----------
   Uma unica receita, repetida: fundo quase transparente, desfoque do que
   esta atras, e a borda de luz de 1px. */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel,
.fi-ta-ctn {
    background: var(--vid-face) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--vid-borda) !important;
    border-radius: 14px !important;
    /* A luz que entra pela aresta de cima: e o que faz a lamina ter espessura
       em vez de ser um retangulo pintado. */
    box-shadow: inset 0 1px 0 var(--vid-borda-viva), 0 8px 26px rgba(0, 0, 0, .3) !important;
}
.fi-section-header-heading {
    color: var(--vid-tinta) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ---------- botao ---------- */
.fi-btn {
    background: var(--vid-face2) !important;
    color: var(--vid-tinta) !important;
    border: 1px solid var(--vid-borda) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 var(--vid-borda-viva) !important;
    font-weight: 500 !important;
    min-height: 32px;
}
.fi-btn:hover { background: rgba(255, 255, 255, .13) !important; border-color: var(--vid-borda-viva) !important; }
.fi-btn.fi-color-primary {
    background: linear-gradient(135deg, rgba(96, 165, 250, .85), rgba(167, 139, 250, .85)) !important;
    color: #0a1020 !important;
    border-color: transparent !important;
}

/* ---------- campo ----------
   O campo NAO e vidro: e o buraco na lamina. Fundo escuro de verdade, para a
   letra digitada ter contraste. Vidro sobre vidro nao se le. */
.fi-input-wrp {
    background: rgba(8, 12, 26, .55) !important;
    border: 1px solid var(--vid-borda) !important;
    border-radius: 10px !important;
}
.fi-input, .fi-select-input { background: transparent !important; color: var(--vid-tinta) !important; border: 0 !important; }
.fi-input-wrp:focus-within {
    border-color: rgba(96, 165, 250, .7) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16) !important;
}
.fi-fo-field-label { color: var(--vid-fraca) !important; font-size: 12.5px !important; }

/* ---------- a tabela ----------
   Sem desfoque por celula, de proposito: ver o comentario de custo no alto.
   A lamina ja e o .fi-ta-ctn em volta. */
.fi-ta-header-cell {
    background: rgba(255, 255, 255, .05) !important;
    color: var(--vid-fraca) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--vid-borda);
}
.fi-ta-cell { border-bottom: 1px solid rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.fi-ta-row:hover .fi-ta-cell { background: rgba(255, 255, 255, .06) !important; }
.fi-ta-row:has(.fi-checkbox-input:checked) .fi-ta-cell { background: rgba(96, 165, 250, .16) !important; }

/* ---------- a coluna lateral, lamina inteira ---------- */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-footer,
.fi-sidebar > nav,
.fi-sidebar-group {
    background: rgba(255, 255, 255, .04) !important;
}
.fi-sidebar {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-right: 1px solid var(--vid-borda) !important;
}
.fi-sidebar-group-label { color: var(--vid-fraca) !important; font-size: 11px !important; letter-spacing: .06em; }
.fi-sidebar-item-btn { border-radius: 10px !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 1px 0 var(--vid-borda-viva), inset 2px 0 0 var(--vid-azul) !important;
}

/* ---------- a barra de cima e as abas ---------- */
.fi-topbar,
.fi-topbar > nav {
    background: rgba(255, 255, 255, .05) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--vid-borda);
}
.fl-aba { background: rgba(255, 255, 255, .05) !important; border-color: var(--vid-borda) !important; }
.fl-aba--ativa { background: rgba(255, 255, 255, .12) !important; border-top-color: var(--vid-azul) !important; }

/* ==========================================================================
   AS TRES BARRAS, em vidro.
   O esqueleto esta no flow.css. Aqui so as dez medidas, mais o desfoque, que
   e a unica coisa que esta pele acrescenta a forma delas.
   ========================================================================== */
:root {
    --fl-b-face: rgba(255, 255, 255, .06);
    --fl-b-tinta: var(--vid-tinta);
    --fl-b-fraca: var(--vid-fraca);
    --fl-b-linha: var(--vid-borda);
    --fl-b-luz: transparent;
    --fl-b-sombra: var(--vid-borda);
    --fl-b-realce: var(--vid-azul);
    --fl-b-fundo: rgba(96, 165, 250, .26);
    --fl-b-mal: var(--vid-mal);
    --fl-b-canto: 9px;
}

.fl-barras,
.fl-estado {
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.fl-suspenso {
    background: rgba(18, 24, 48, .82) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--vid-borda-viva), 0 14px 34px rgba(0, 0, 0, .45) !important;
}
.fl-estado__painel { background: rgba(255, 255, 255, .05); }