/* Superfícies de vidro ("Liquid Glass"), camada CSS.
   Adaptado de stormaref/LiquidGlassSkill (MIT), que por sua vez porta dashersw/liquid-glass-js.
   Só a camada CSS foi trazida: tinta incolor + aro polido + blur do fundo. A refração por filtro SVG
   (diretiva Angular, só Chromium) ficou de fora de propósito: o fallback já lê como vidro.

   Regras que valem aqui (ver notas do repositório original):
   1. Vidro precisa de um fundo com variação atrás; por isso o login ganha a malha ambiente.
   2. A tinta é incolor (branco → cinza a 6%); a cor vem do que está atrás.
   3. Filhos do painel não pintam fundo nem borda próprios.
   4. Nada de @supports para refração; o blur simples é o caminho comum.

   Uso piloto: topbar (nível "menu": precisa ficar legível sobre qualquer conteúdo) e card de login
   (nível "modal": camada de geada por cima da tinta). Os tokens seguem o esquema de tema do app.css. */

:root{
  --glass-tint-top:rgba(255,255,255,.06); --glass-tint-bottom:rgba(179,179,179,.06);
  --glass-rim-top:rgba(255,255,255,.55); --glass-rim-hairline:rgba(255,255,255,.12); --glass-rim-bottom:rgba(255,255,255,.06);
  --glass-border:rgba(20,24,33,.12);
  --glass-shadow:0 10px 30px rgba(20,24,33,.10);
  --glass-modal-tint:rgba(255,255,255,.50);
  --glass-bar-wash:72%;
  /* malha ambiente na identidade da casa: navy e ouro, bem discretos */
  --glass-mesh-navy:rgba(19,60,99,.16); --glass-mesh-gold:rgba(220,154,86,.14);
  --glass-mesh-navy-2:rgba(31,82,136,.10); --glass-mesh-corner:rgba(19,60,99,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass-rim-top:rgba(255,255,255,.35); --glass-rim-hairline:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.09);
    --glass-shadow:0 18px 40px rgba(0,0,0,.35);
    --glass-modal-tint:rgba(0,0,0,.30);
    --glass-bar-wash:68%;
    --glass-mesh-navy:rgba(60,110,170,.32); --glass-mesh-gold:rgba(220,154,86,.16);
    --glass-mesh-navy-2:rgba(90,140,200,.16); --glass-mesh-corner:rgba(19,60,99,.45);
  }
}
:root[data-theme="dark"]{
  --glass-rim-top:rgba(255,255,255,.35); --glass-rim-hairline:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.09);
  --glass-shadow:0 18px 40px rgba(0,0,0,.35);
  --glass-modal-tint:rgba(0,0,0,.30);
  --glass-bar-wash:68%;
  --glass-mesh-navy:rgba(60,110,170,.32); --glass-mesh-gold:rgba(220,154,86,.16);
  --glass-mesh-navy-2:rgba(90,140,200,.16); --glass-mesh-corner:rgba(19,60,99,.45);
}

/* ---------- fundo ambiente (regra 1) ---------- */
.liquid-glass-backdrop{position:relative; isolation:isolate; background:var(--bg)}
.liquid-glass-backdrop::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42rem 34rem at 30% 30%, var(--glass-mesh-navy), transparent 62%),
    radial-gradient(36rem 30rem at 68% 58%, var(--glass-mesh-gold), transparent 62%),
    radial-gradient(40rem 36rem at 50% 80%, var(--glass-mesh-navy-2), transparent 64%),
    radial-gradient(60rem 40rem at 100% -10%, var(--glass-mesh-corner), transparent 60%);
}

/* ---------- painel (tinta + aro) ---------- */
.liquid-glass{
  position:relative;
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  box-shadow:var(--glass-shadow),
    inset 0 1px 0 var(--glass-rim-top),
    inset 0 0 0 1px var(--glass-rim-hairline),
    inset 0 -1px 0 var(--glass-rim-bottom);
  backdrop-filter:blur(3px) saturate(125%);
  -webkit-backdrop-filter:blur(3px) saturate(125%);
}
/* nível modal: geada por cima da tinta para o texto não depender do fundo */
.liquid-glass--modal{
  border-radius:16px;
  background:linear-gradient(180deg, var(--glass-modal-tint), var(--glass-modal-tint)),
             linear-gradient(180deg, var(--glass-tint-top), var(--glass-tint-bottom));
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

/* ---------- topbar: nível "menu" (lavagem da superfície + blur forte) ---------- */
.topbar{
  background:color-mix(in srgb, var(--surface) var(--glass-bar-wash), transparent);
  border-bottom:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-rim-top), 0 1px 0 rgba(20,24,33,.03);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){ .topbar{background:var(--surface)} }
/* regra 3: filhos do vidro não pintam superfície própria */
.topbar .tema{background:transparent}
.topbar .tema button[aria-pressed="true"]{background:var(--accent)}

/* ---------- login ---------- */
.login-wrap{background:transparent}
.login-card > header{border-bottom-color:transparent; padding-bottom:6px}
.login-card .body{padding-top:10px}
.login-card input{background:color-mix(in srgb, var(--surface-2) 78%, transparent)}
.login-card .notice{background:color-mix(in srgb, var(--accent-soft) 70%, transparent)}

@media print{ .topbar{backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface)} }