/* Tema Vidro: blocos soltos com película sobre uma foto de fundo que já vem embaçada no arquivo.
   Só vale com html[data-glass] (interruptor em Configurações do Usuário > Aparência) e combina com
   as duas bases e todas as cores. Sem backdrop-filter nos blocos: rolar o board não custa nada a mais. */
html[data-glass]{
  --glass-gap:12px;
  --glass-radius:14px;
  --glass-footer-h:36px;
  --glass-panel:hsla(var(--th),calc(26% * var(--tsm)),10%,.7);
  --glass-modal:hsla(var(--th),calc(26% * var(--tsm)),11%,.9);
  --glass-chip:hsla(0,0%,100%,.11);
  --glass-border:hsla(0,0%,100%,.14);
  --glass-shadow:0 6px 20px rgba(0,0,0,.22);
  --glass-halo:0 0 3px rgba(0,0,0,.9),0 1px 6px rgba(0,0,0,.7);
  --glass-hover:hsla(0,0%,100%,.08);
  --glass-count:rgba(0,0,0,.22);
  --glass-tree:hsla(0,0%,100%,.2);
  --glass-pill:linear-gradient(180deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,.07));
  --glass-pill-edge:inset 0 0 0 1px hsla(0,0%,100%,.34),inset 0 1px 0 hsla(0,0%,100%,.28),0 4px 14px rgba(0,0,0,.2);
  --text:hsl(var(--th),calc(40% * var(--tsm)),96%);
  --text2:hsl(var(--th),calc(30% * var(--tsm)),90%);
  --text3:hsl(var(--th),calc(24% * var(--tsm)),84%);
}
html.theme-light[data-glass]{
  --glass-panel:hsla(var(--th),calc(50% * var(--tsm)),98%,.7);
  --glass-modal:hsla(var(--th),calc(50% * var(--tsm)),98%,.92);
  --glass-chip:hsla(var(--th),calc(30% * var(--tsm)),15%,.08);
  --glass-border:hsla(0,0%,100%,.72);
  --glass-shadow:0 6px 20px rgba(0,0,0,.12);
  --glass-halo:0 0 3px rgba(255,255,255,.95),0 1px 6px rgba(255,255,255,.8);
  --glass-hover:hsla(var(--th),calc(30% * var(--tsm)),15%,.07);
  --glass-count:hsla(var(--th),calc(30% * var(--tsm)),15%,.1);
  --glass-tree:hsla(var(--th),calc(30% * var(--tsm)),15%,.18);
  --glass-pill:linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
  --glass-pill-edge:inset 0 0 0 1px hsla(0,0%,100%,.9),0 4px 14px rgba(0,0,0,.12);
  --text:hsl(var(--th),calc(30% * var(--tsm)),14%);
  --text2:hsl(var(--th),calc(20% * var(--tsm)),28%);
  --text3:hsl(var(--th),calc(16% * var(--tsm)),34%);
}

html[data-glass] body{
  --topbar-h:60px;
  background:var(--bg) url(../img/vidro-fundo.jpg) center/cover no-repeat fixed;
  padding-left:calc(var(--sidebar-w) + var(--glass-gap) * 2);
  padding-right:var(--glass-gap);
}

/* O bloco de vidro. Dentro dele, as superfícies internas (chips, botões, campos) também ficam translúcidas;
   --surface fica de fora porque é o fundo dos dropdowns, que precisam continuar sólidos. */
html[data-glass] .topbar-account-btn,
html[data-glass] .topbar-flow-btn,
html[data-glass] .topbar-right,
html[data-glass] .app-side-nav,
html[data-glass] .app-side-user,
html[data-glass] .app-footer,
html[data-glass] .col-header,
html[data-glass] .theme-flow-compact-dark .col-header,
html[data-glass] .theme-flow-compact-dark .card{
  --surface2:var(--glass-chip);
  --surface3:var(--glass-chip);
  --border:var(--glass-border);
  background:var(--glass-panel);
  border:1px solid var(--glass-border);
}
html[data-glass] .topbar-account-btn,
html[data-glass] .topbar-flow-btn,
html[data-glass] .topbar-right,
html[data-glass] .app-side-nav,
html[data-glass] .app-side-user,
html[data-glass] .app-footer{
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}
html[data-glass] .theme-flow-compact-dark .col-header,
html[data-glass] .theme-flow-compact-dark .card{border-radius:12px;}
html[data-glass] .theme-flow-compact-dark .card:hover{background:var(--glass-modal);}

/* Cabeçalho: conta, título do flow (seletor) e relógio, cada um no seu bloco. */
html[data-glass] .topbar{
  margin:var(--glass-gap) 0 0 calc(-1 * (var(--sidebar-w) + var(--glass-gap)));
  padding:0;
  height:var(--topbar-h);
  grid-template-columns:var(--sidebar-w) minmax(0,1fr) auto;
  gap:var(--glass-gap);
  background:none;
  border:none;
}
html[data-glass] .topbar-left{gap:0;}
html[data-glass] .topbar-company{display:none;}
html[data-glass] .topbar-account{width:100%;align-self:stretch;padding:0;border:none;}
html[data-glass] .topbar-account-btn{width:100%;height:100%;padding:5px 12px 5px 8px;}
html[data-glass] .topbar-flow{justify-self:stretch;align-self:stretch;max-width:none;}
html[data-glass] .topbar-flow-btn{width:100%;height:100%;justify-content:center;}
html[data-glass] .topbar-flow-btn:hover{background:var(--glass-modal);border-color:var(--accent);}
html[data-glass] .topbar-flow-btn::after{content:'⌄';font-size:.8em;line-height:1;margin-top:-.35em;}
html[data-glass] .topbar-right{align-self:stretch;padding:0 14px 0 18px;}
html[data-glass] .topbar-view-slot:empty{display:none;}

/* Lateral: menu e usuário em blocos separados. */
html[data-glass] .app-sidebar{
  inset:calc(var(--glass-gap) * 2 + var(--topbar-h)) auto calc(var(--glass-gap) * 2 + var(--glass-footer-h)) var(--glass-gap);
  gap:var(--glass-gap);
  background:none;
  border:none;
  box-shadow:none;
}
/* O menu tem o tamanho do conteúdo e o usuário fica no pé: a foto aparece entre os dois. */
html[data-glass] .app-side-nav{
  flex:0 1 auto;
  min-height:0;
  padding:14px 10px;
  gap:6px;
  border-radius:24px;
  scrollbar-width:none;
}
html[data-glass] .app-side-nav::-webkit-scrollbar{display:none;}
html[data-glass] .app-side-section{padding:8px 12px 4px;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--text2);opacity:.75;}
html[data-glass] .app-side-group-raiz > .app-side-group-head .app-side-label{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--text2);}
html[data-glass] .app-side-divisao-toggle:focus-visible{outline:1px solid var(--glass-border);outline-offset:3px;border-radius:8px;}
html[data-glass] .app-side-item{height:40px;gap:12px;padding:0 12px;border-radius:14px;font-size:13.5px;font-weight:500;color:var(--text);}
html[data-glass] .app-side-flow{height:36px;}
html[data-glass] .app-side-item .app-side-ico svg{opacity:.9;}
html[data-glass] .app-side-item:hover{background:var(--glass-hover);color:var(--text);}
html[data-glass] .app-side-item.active,
html[data-glass] .app-side-flow.active{
  background:var(--glass-pill);
  color:var(--text);
  border-radius:999px;
  box-shadow:var(--glass-pill-edge);
}
html[data-glass] .app-side-item.side-primary{margin:2px 0 4px;border-radius:999px;background:var(--accent);color:#fff;}
html[data-glass] .app-side-item.side-primary:hover{background:var(--accent2);color:#fff;}
html[data-glass] .app-side-group-body{border-left-color:var(--glass-tree);}
html[data-glass] .app-side-group-body .app-side-item{gap:8px;padding:0 8px;}
html[data-glass] .app-side-count{background:var(--glass-count);color:var(--text);}
html[data-glass] .app-side-user{flex-shrink:0;margin-top:auto;height:56px;padding:6px 10px;border-radius:24px;}
html[data-glass] .app-side-user-card{height:40px;gap:10px;border-radius:14px;}
html[data-glass] .app-side-user-card .avatar{width:30px;height:30px;font-size:11px;}
html[data-glass] .app-side-user-name{font-size:13px;font-weight:600;line-height:1.2;}
html[data-glass] .app-side-user-company{font-size:11px;line-height:1.2;}
html[data-glass] .app-side-collapse{top:16px;bottom:auto;right:-13px;width:26px;height:26px;border:none;background:var(--text);color:var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.3);}
html[data-glass] .app-side-collapse:hover{background:var(--text2);}
/* Recolhido: uma pílula só de ícones. Ela rola por dentro para os ícones não vazarem sobre o usuário e o rodapé;
   por isso o nome do item aparece pelo title do navegador, e não pelo balão, que a rolagem cortaria. */
html[data-glass] body.sidebar-collapsed .app-side-nav{overflow-y:auto;padding:14px 8px;border-radius:32px;}
html[data-glass] body.sidebar-collapsed .app-side-item{padding:0;}
html[data-glass] body.sidebar-collapsed .app-side-item::before,
html[data-glass] body.sidebar-collapsed .app-side-item::after{display:none;}
html[data-glass] body.sidebar-collapsed .app-side-user{height:auto;padding:8px;border-radius:32px;}
html[data-glass] body.sidebar-collapsed .app-side-collapse{right:-17px;}

html[data-glass] .app-footer{
  height:var(--glass-footer-h);
  margin:var(--glass-gap) 0 var(--glass-gap) calc(-1 * (var(--sidebar-w) + var(--glass-gap)));
}

/* Quadro: sem fundo próprio, sem guias (a troca é pelo seletor do cabeçalho) e sem coluna visual. */
html[data-glass] .board-tb-bar{
  --surface2:var(--glass-panel);
  --surface3:var(--glass-panel);
  --border:var(--glass-border);
  --border2:var(--glass-border);
  background:none;
  border:none;
}
html[data-glass] .board-wrapper,
html[data-glass] .board-wrapper.theme-flow-compact-dark{background:transparent;}
html[data-glass] .board-compact-flow-tabs{display:none;}
html[data-glass] .board-compact-columns{padding-top:8px;}
/* Estes dois ficam direto sobre a foto, sem película: o contorno do texto garante a leitura em área clara ou escura. */
html[data-glass] .add-card-btn{border:none;}
html[data-glass] .add-card-btn,
html[data-glass] .col-empty{color:var(--text);text-shadow:var(--glass-halo);}

html[data-glass] .modal{background:var(--glass-modal);}