/* ==========================================================================
   LIQUID-GLASS.CSS — liquid glass (API do expo-glass-effect em CSS)

   expo-glass-effect          →  atributo HTML
   ------------------------------------------------------------------
   glassEffectStyle           →  data-glass="regular | clear | none"
   tintColor                  →  data-glass-tint  + --glass-tint
   isInteractive              →  data-glass-interactive
   colorScheme                →  data-glass-scheme="light | dark"
   <GlassContainer spacing>   →  data-glass-container + data-glass-spacing

   Visual baseado no codepen Petr-Knoll/QwWLZdx (anel conic + sombras internas
   + brilho deslizante), em CSS puro: sem filtro SVG, bem leve.

   Vidro SOMENTE em: topbar, botões, item ativo/opções do menu, avisos e toast.
   O menu lateral tem fundo sólido #001737 (sem vidro próprio).
   Os atributos são aplicados por js/glass.js (tabela GLASS_MAP).
   Carregar DEPOIS de glass.css.
   ========================================================================== */

:root { --float-gap: 12px; }

/* ângulos animáveis (mesma técnica do codepen Petr-Knoll/QwWLZdx) */
@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

:root {
  --g-ease: cubic-bezier(.25, 1, .5, 1);
  --g-time: 400ms;
}

/* ---------- esquemas de cor ---------- */
:root,
[data-glass-scheme="light"] {
  --g-a1: .03;                         /* extremidades do degradê base */
  --g-a2: .18;                         /* centro do degradê base       */
  --g-ring: 0 0 0;                     /* cor do anel conic            */
  --g-ring-a: .22;
  --g-sheen: 255 255 255;
  --g-inset-top: rgb(0 0 0 / .03);
  --g-inset-bot: rgb(255 255 255 / .35);
  --g-drop: rgb(0 23 55 / .12);
  --g-halo: rgb(255 255 255 / .18);
}

[data-glass-scheme="dark"] {
  --g-a1: 0;
  --g-a2: .03;
  --g-ring: 255 255 255;
  --g-ring-a: .38;
  --g-sheen: 255 255 255;
  --g-sheen-a: .07;
  --g-inset-top: rgb(0 0 0 / .10);
  --g-inset-bot: rgb(255 255 255 / .14);
  --g-drop: rgb(0 8 24 / .35);
  --g-halo: rgb(255 255 255 / .03);
}

/* ---------- estilos (glassEffectStyle) ---------- */
[data-glass="regular"] { --g-blur: blur(12px) saturate(150%); }
[data-glass="clear"]   { --g-blur: blur(3px); }

/* botões: desfoque mínimo, como no codepen (barato) */
[data-glass-interactive][data-glass] { --g-blur: blur(clamp(1px, .125em, 4px)); }

/* ---------- superfície de vidro ---------- */
/* seletor repetido de propósito: precisa vencer glass.css/components.css */
body [data-glass][data-glass][data-glass]:not([data-glass="none"]) {
  --border-width: 1px;
  --g-tint-layer: linear-gradient(transparent, transparent);
  position: relative;
  background-color: transparent;
  background-image:
    /* brilho que desliza */
    linear-gradient(var(--angle-2),
      rgb(var(--g-sheen) / 0) 0%,
      rgb(var(--g-sheen) / var(--g-sheen-a, .22)) 40% 50%,
      rgb(var(--g-sheen) / 0) 55%),
    var(--g-tint-layer),
    /* base */
    linear-gradient(-75deg,
      rgb(255 255 255 / var(--g-a1)),
      rgb(255 255 255 / var(--g-a2)),
      rgb(255 255 255 / var(--g-a1)));
  background-size: 200% 200%, auto, auto;
  background-position: 0% 50%, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 0;
  box-shadow:
    inset 0 .125em .125em var(--g-inset-top),
    inset 0 -.125em .125em var(--g-inset-bot),
    0 .25em .125em -.125em var(--g-drop),
    inset 0 0 .1em .15em var(--g-halo);
  transition:
    transform var(--g-time) var(--g-ease),
    background-position calc(var(--g-time) * 1.25) var(--g-ease),
    --angle-2 calc(var(--g-time) * 1.25) var(--g-ease),
    box-shadow var(--g-time) var(--g-ease),
    backdrop-filter var(--g-time) var(--g-ease);
}

body [data-glass][data-glass][data-glass][data-glass-tint] {
  --g-tint-layer: linear-gradient(
    color-mix(in srgb, var(--glass-tint) 22%, transparent),
    color-mix(in srgb, var(--glass-tint) 22%, transparent)
  );
}

body [data-glass="none"][data-glass][data-glass] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* anel de borda: conic-gradient mascarado (a "luz" que contorna o vidro) */
body [data-glass]:not([data-glass="none"])::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-width) * -.5);
  z-index: 1;
  border-radius: inherit;
  padding: var(--border-width);
  box-sizing: border-box;
  pointer-events: none;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgb(var(--g-ring) / var(--g-ring-a)),
      rgb(var(--g-ring) / 0) 5% 40%,
      rgb(var(--g-ring) / var(--g-ring-a)) 50%,
      rgb(var(--g-ring) / 0) 60% 95%,
      rgb(var(--g-ring) / var(--g-ring-a))),
    linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgb(255 255 255 / .25);
  transition: --angle-1 500ms ease;
}

/* vidro dentro de vidro (e dentro do menu sólido): sem backdrop-filter → mais leve */
body [data-glass-nested][data-glass][data-glass][data-glass],
body .sidebar [data-glass][data-glass][data-glass] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- isInteractive: hover / active (igual ao codepen) ---------- */
body [data-glass-interactive][data-glass] { cursor: pointer; isolation: isolate; }

body [data-glass-interactive][data-glass]:not([data-glass="none"]):hover {
  transform: scale(.985);
  --angle-2: -45deg;
  background-position: 25% 50%, 0 0, 0 0;
  -webkit-backdrop-filter: var(--g-fx-hover, blur(.01em));
  backdrop-filter: var(--g-fx-hover, blur(.01em));
  box-shadow:
    inset 0 .125em .125em var(--g-inset-top),
    inset 0 -.125em .125em var(--g-inset-bot),
    0 .15em .05em -.1em var(--g-drop),
    inset 0 0 .05em .1em rgb(255 255 255 / .25);
}

body [data-glass-interactive][data-glass]:not([data-glass="none"]):hover::after { --angle-1: -125deg; }

body [data-glass-interactive][data-glass]:not([data-glass="none"]):active {
  --angle-2: -15deg;
  background-position: 50% 15%, 0 0, 0 0;
  box-shadow:
    inset 0 .125em .125em var(--g-inset-top),
    inset 0 -.125em .125em var(--g-inset-bot),
    0 .125em .125em -.125em var(--g-drop),
    inset 0 0 .1em .25em rgb(255 255 255 / .2),
    0 .225em .05em 0 rgb(0 0 0 / .05),
    inset 0 .25em .05em 0 rgb(0 0 0 / .15);
}

body [data-glass-interactive][data-glass]:not([data-glass="none"]):active::after { --angle-1: -75deg; }

body [data-glass-interactive][data-glass="none"]:hover { background-color: rgb(255 255 255 / .08); }

/* itens do menu: vidro só no ativo e no hover */
body .nav-item[data-glass][data-glass][data-glass]:not(.active):not(:hover) {
  background-image: none;
  box-shadow: none;
}
body .nav-item[data-glass]:not(.active):not(:hover)::after { display: none; }

@media (hover: none) and (pointer: coarse) {
  body [data-glass]::after { --angle-1: -75deg !important; }
  body [data-glass] { --angle-2: -45deg !important; }
}

/* menu escuro: tinta quase imperceptível, só um respiro de cor */
body .sidebar [data-glass][data-glass][data-glass][data-glass-tint] {
  --g-tint-layer: linear-gradient(
    color-mix(in srgb, var(--glass-tint) 7%, transparent),
    color-mix(in srgb, var(--glass-tint) 7%, transparent)
  );
}

/* ---------- GlassContainer ---------- */
[data-glass-container] {
  display: flex;
  align-items: center;
  gap: var(--glass-spacing, 8px);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* menu lateral: fundo sólido #001737, sem vidro, sem efeitos de fundo */
.sidebar {
  background: #001737;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-right: 1px solid rgb(255 255 255 / .06);
  box-shadow: none;
}

.sidebar::before { display: none; }

.sidebar .nav-item { border-radius: 12px; color: #b4c3d6; }
.sidebar .nav-item:hover,
.sidebar .nav-item.active { color: #fff; }
.sidebar .nav-label { color: #7f95b1; }
.sidebar .workspace-switch { border-radius: 14px; position: relative; }

/* dropdown do perfil: opaco o bastante para ler por cima dos itens */
body .sidebar .profile-dropdown[data-glass] {
  background-color: rgb(10 40 82 / .97);
  border-radius: 16px;
}

/* topbar flutuante de vidro */
.topbar {
  top: var(--float-gap);
  height: 64px;
  margin: var(--float-gap) 24px 0;
  padding: 0 14px 0 22px;
  border-radius: 24px;
}

/* o desfoque da topbar fica num pseudo-elemento: assim ela NÃO vira "raiz de backdrop"
   e os botões dentro dela conseguem refratar o conteúdo da página */
body .topbar[data-glass][data-glass][data-glass] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

/* botões em cápsula */
.icon-button,
.text-button,
.brand-toggle,
.profile-menu-trigger { border-radius: 999px; }
.outline-button,
.banner-ghost,
.period-select { border-radius: 999px; padding-inline: 18px; }
.notice-row { border-radius: 20px; }
.notice-row::before { display: none; }
.toast { border-radius: 999px; padding-inline: 24px; }


/* ==========================================================================
   MENU LATERAL — fino, delicado, com movimento
   ========================================================================== */
.sidebar-navigation { position: relative; padding: 2px; margin: -2px; }

/* itens: sem moldura própria; quem dá o vidro é o .nav-glider */
.sidebar .nav-item,
.sidebar .nav-item:hover,
.sidebar .nav-item.active {
  background: none;
  box-shadow: none;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
.sidebar .nav-item::before,
.sidebar .nav-item.active::before { display: none; }

.sidebar .nav-item {
  height: 42px;
  padding: 0 14px;
  gap: 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: .1px;
  color: #93a7c2;
  z-index: 1;
  transition: color .25s ease;
}
.sidebar .nav-item svg { width: 17px; height: 17px; stroke-width: 1.5; transition: transform .35s var(--g-ease), opacity .25s; opacity: .85; }
.sidebar .nav-item:hover,
.sidebar .nav-item.active { color: #fff; font-weight: 500; }
.sidebar .nav-item:hover svg { transform: translateX(2px) scale(1.06); opacity: 1; }
.sidebar .nav-item.active svg { opacity: 1; }

.sidebar .nav-count {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 8px;
  color: #b9c9de;
  background: rgb(255 255 255 / .07);
}

.sidebar .nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.7px;
  color: #6f86a6;
  opacity: .85;
  padding: 0 14px 8px;
}

/* a pílula de vidro que desliza */
body .nav-glider[data-glass][data-glass][data-glass][data-glass] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height;
  transition:
    transform .55s cubic-bezier(.34, 1.25, .5, 1),
    width .4s var(--g-ease),
    height .4s var(--g-ease),
    opacity .3s ease,
    box-shadow .3s ease;
}
body .nav-glider[data-glass][data-glass][data-glass][data-glass]:not(.ready) { transition: none; }

/* parado no item ativo: mais calmo; passando o mouse: ganha vida */
.nav-glider { --g-a2: .035; --g-ring-a: .28; }
.nav-glider.hovering { --g-a2: .07; --g-ring-a: .5; }
.nav-glider.pressed { transform-origin: center; filter: brightness(1.15); }

/* filtro e brilho deslizante dentro do glider */
.nav-glider::after { opacity: .9; }

/* seletor de escritório e botões: finos e discretos */
.sidebar .workspace-switch { border-radius: 22px; padding: 9px 10px; margin-bottom: 20px; }
.sidebar .workspace-avatar { width: 34px; height: 34px; border-radius: 50%; }
.sidebar .workspace-info strong { font-size: 13px; font-weight: 550; }
.sidebar .workspace-info span { font-size: 11.5px; color: #8199b8; }
.sidebar .bare-icon { color: #7f96b6; }

.sidebar .brand-toggle,
.sidebar .profile-menu-trigger { width: 34px; height: 34px; }
.sidebar .brand-toggle svg { width: 16px; height: 16px; stroke-width: 1.6; }
.sidebar .profile-menu-trigger svg { width: 17px; height: 17px; }

.sidebar .profile-text strong { font-size: 13px; font-weight: 550; }
.sidebar .profile-text small { font-size: 11.5px; color: #8199b8; }
.sidebar .profile-row { border-top-color: rgb(255 255 255 / .07); }

/* entrada suave */
@keyframes navIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sidebar .nav-label,
.sidebar .nav-item,
.sidebar .workspace-switch {
  animation: navIn .6s var(--g-ease) both;
}
.sidebar .workspace-switch { animation-delay: .05s; }
.sidebar .nav-list .nav-item:nth-child(1) { animation-delay: .10s; }
.sidebar .nav-list .nav-item:nth-child(2) { animation-delay: .14s; }
.sidebar .nav-list .nav-item:nth-child(3) { animation-delay: .18s; }
.sidebar .nav-list .nav-item:nth-child(4) { animation-delay: .22s; }
.sidebar .nav-list .nav-item:nth-child(5) { animation-delay: .26s; }
.sidebar .nav-list .nav-item:nth-child(6) { animation-delay: .30s; }
.sidebar .nav-list .nav-item:nth-child(7) { animation-delay: .34s; }
.sidebar .nav-list .nav-item:nth-child(8) { animation-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-label, .sidebar .nav-item, .sidebar .workspace-switch { animation: none; }
  body .nav-glider[data-glass][data-glass][data-glass][data-glass] { transition: none; }
}

/* recolhido: item vira círculo, glider acompanha */
@media (min-width: 761px) {
  .sidebar-collapsed .nav-item { border-radius: 999px; }
  .sidebar-collapsed .nav-label { display: none; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  .topbar { margin: 8px 10px 0; top: 8px; height: 58px; padding: 0 8px 0 14px; border-radius: 20px; }
}

/* ---------- fallbacks ---------- */
html[data-liquid-glass="false"] body [data-glass][data-glass][data-glass]:not([data-glass="none"]) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgb(255 255 255 / .85);
}

@media (prefers-reduced-transparency: reduce) {
  body [data-glass][data-glass][data-glass]:not([data-glass="none"]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgb(255 255 255 / .85);
  }
}

@media (prefers-reduced-motion: reduce) {
  body [data-glass][data-glass][data-glass],
  body [data-glass]::after { transition: none; }
  body [data-glass-interactive][data-glass]:hover { transform: none; }
}

/* ==========================================================================
   BARRAS DE ROLAGEM OCULTAS (a rolagem continua funcionando)
   ========================================================================== */
html,
body,
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge antigo */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;                  /* Chrome, Edge, Safari */
  width: 0;
  height: 0;
}

/* sem rolagem horizontal da página (clip não quebra o position: sticky da topbar) */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* topbar fixa no topo: o sticky precisa estar no contêiner do parcial (#topbarMount),
   senão ele só "gruda" dentro de um pai com a altura da própria barra */
#topbarMount {
  position: sticky;
  top: var(--float-gap);   /* mantém o respiro de cima */
  z-index: 15;
}
#topbarMount .topbar {
  position: relative;
  top: auto;
}

@media (max-width: 760px) { #topbarMount { top: 8px; } }