/* ============================================================================
   9. CASCA · MENU PRINCIPAL (#sidebar)
   Reescrita ESTRUTURAL (rodada 2). O menu alterna entre 240px textual e rail
   compacto de 56px: fundo void,
   marca lime no topo, botão quadrado de 34px, ativo em pill obsidian com
   marcador lime de 2px, tooltip pelo title= nativo (igual ao protótipo).

   Contrato com o JS e com o gating de nível:
     - .sidebar, .sidebar-nav, .nav-item, .nav-icon e .sidebar-label continuam
       no DOM; o gating de app.css usa display:flex nos .nav-item, então aqui
       NUNCA se declara `display` em .nav-item (só geometria e cor);
     - .sidebar mantém overflow visível para o #ctx-menu poder voar para fora;
       quem rola é a .sidebar-nav;
     - abaixo de 1024px o comportamento de gaveta (260px, com rótulo) da base
       continua valendo: a geometria do rail está dentro de @media min-width.
   ========================================================================== */
:root[data-theme] .sidebar .logout-btn > svg{
  display:block;
  flex:0 0 18px;
  width:18px;
  height:18px;
}
:root[data-theme] .sidebar #ctx-switcher .lx-ctx-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
  width:18px;
  height:18px;
}
:root[data-theme] .sidebar #ctx-switcher .lx-ctx-mark > svg{
  display:none;
  width:18px;
  height:18px;
}
:root[data-theme] .sidebar #ctx-switcher .lx-ctx-mark-org{ display:block; }
:root[data-theme] body[data-ctx="operating"] #ctx-switcher .lx-ctx-mark-org{ display:none; }
:root[data-theme] body[data-ctx="operating"] #ctx-switcher .lx-ctx-mark-acc{ display:block; }
:root[data-theme] .sidebar #theme-icon-sidebar{
  display:inline-block;
  width:18px;
  font-size:15px;
  line-height:1;
  text-align:center;
}

:root[data-theme] .sidebar{
  background:var(--lx-void) !important;
  border-right:1px solid var(--lx-graphite) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  overflow:visible;
}

:root[data-theme="hybrid"] .sidebar{
  --lx-void:#08090a;
  --lx-carbon:#0f1011;
  --lx-obsidian:#161718;
  --lx-graphite:#23252a;
  --lx-smoke:#383b3f;
  --lx-ash:#62666d;
  --lx-fog:#8a8f98;
  --lx-mist:#d0d6e0;
  --lx-bone:#e5e5e6;
  --lx-paper:#fff;
  --lx-wash-hover:rgba(255,255,255,.04);
  --lx-wash-hover-2:rgba(255,255,255,.06);
  --lx-wash-active:rgba(255,255,255,.08);
  background:var(--lx-void) !important;
  color:var(--lx-mist) !important;
}

/* Ícones monocromáticos: o Linear não usa ícone colorido por rota.
   Vence os `color:#fdba74 !important` de app.css 156-159/262/275/291/441
   por especificidade (0,5,0 contra 0,3,0). */
:root[data-theme] .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon,
:root[data-theme] .sidebar .sidebar-nav .nav-item[data-page] > .nav-icon > svg,
:root[data-theme] .sidebar .nav-item .nav-icon{
  color:currentColor !important;
  opacity:1;
}
:root[data-theme] .sidebar .nav-item .nav-icon > svg{
  width:18px;
  height:18px;
  display:block;
}

/* Marca */
:root[data-theme] .sidebar .sidebar-logo .icon{
  background:var(--lx-acid-lime) !important;
  border:1px solid var(--lx-acid-lime) !important;
  border-radius:var(--lx-r-md);
  color:var(--lx-on-lime) !important;
  box-shadow:none !important;
}
:root[data-theme] .sidebar .sidebar-logo .icon > svg{
  width:17px;
  height:17px;
  display:block;
}

/* ───────────────────────── GEOMETRIA DO RAIL ───────────────────────── */
@media (min-width:1024px){

  /* Geometria-base compacta; o estado expandido é aplicado logo abaixo. */
  :root[data-theme] .sidebar,
  :root[data-theme] .sidebar.collapsed{
    width:56px !important;
    min-width:56px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px 0 10px;
    transition:none;
  }

  /* O canvas encosta no rail nos três seletores que a base usa. */
  :root[data-theme] .main-area,
  :root[data-theme] .sidebar.collapsed ~ .main-area,
  :root[data-theme] body:has(.sidebar.collapsed) .main-area{
    margin-left:56px !important;
  }

  /* Tudo que é texto sai de cena — o DOM continua inteiro para o JS e para o
     gating; some só o pixel. */
  :root[data-theme] .sidebar .sidebar-label,
  :root[data-theme] .sidebar .sidebar-logo-txt,
  :root[data-theme] .sidebar .sidebar-logo-sub,
  :root[data-theme] .sidebar #ctx-sw-name,
  :root[data-theme] .sidebar .ctx-sw-name,
  :root[data-theme] .sidebar .ctx-sw-caret,
  :root[data-theme] .sidebar .ctx-sw-ico,
  :root[data-theme] .sidebar .sidebar-collapse-btn{
    display:none !important;
  }

  /* Marca no topo do rail */
  :root[data-theme] .sidebar .sidebar-logo{
    flex:0 0 auto;
    min-height:0;
    width:28px;
    height:28px;
    padding:0;
    margin:0 0 10px;
    gap:0;
    justify-content:center;
  }
  :root[data-theme] .sidebar .sidebar-logo .icon{
    width:28px;
    height:28px;
    font-size:0;
  }

  /* Seletor de contexto: quadrado de 34px */
  :root[data-theme] .sidebar #ctx-switcher{
    flex:0 0 auto;
    width:34px;
    height:34px;
    min-height:34px;
    margin:0 0 8px;
    padding:0;
    gap:0;
    justify-content:center;
    background:transparent;
    border:1px solid var(--lx-graphite);
    border-radius:var(--lx-r-md);
    color:var(--lx-fog) !important;
    transition:background-color .12s ease,border-color .12s ease,color .12s ease;
  }
  :root[data-theme] .sidebar #ctx-switcher:hover{
    background:var(--lx-obsidian) !important;
    border-color:var(--lx-smoke);
    color:var(--lx-bone) !important;
  }
  :root[data-theme] .sidebar #ctx-switcher[aria-expanded="true"]{
    background:var(--lx-obsidian) !important;
    border-color:var(--lx-smoke);
    color:var(--lx-paper) !important;
  }
  /* Marca do contexto em SVG de linha, dirigida por body[data-ctx].
     O glifo emoji que o app.js injeta em #ctx-sw-ico fica oculto acima. */
  :root[data-theme] #ctx-switcher .lx-ctx-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
  }
  :root[data-theme] #ctx-switcher .lx-ctx-mark > svg{ display:none; width:18px; height:18px; }
  :root[data-theme] #ctx-switcher .lx-ctx-mark-org{ display:block; }
  :root[data-theme] body[data-ctx="operating"] #ctx-switcher .lx-ctx-mark-org{ display:none; }
  :root[data-theme] body[data-ctx="operating"] #ctx-switcher .lx-ctx-mark-acc{ display:block; }

  /* Menu de contexto: voa para fora do rail */
  :root[data-theme] .sidebar #ctx-menu{
    left:64px !important;
    right:auto !important;
    top:12px !important;
    width:296px;
    max-height:min(70vh,560px);
  }

  /* Coluna de navegação: rola sozinha quando não cabe, sem barra visível */
  :root[data-theme] .sidebar .sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    width:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
  }
  :root[data-theme] .sidebar .sidebar-nav::-webkit-scrollbar{ width:0; height:0; }

  /* Botão do rail */
  :root[data-theme] .sidebar .sidebar-nav .nav-item{
    position:relative;
    flex:0 0 auto;
    width:34px;
    height:34px;
    min-height:34px;
    padding:0 !important;
    margin:0 !important;
    gap:0;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:var(--lx-r-md);
    color:var(--lx-ash) !important;
    transition:background-color .12s ease,color .12s ease;
  }
  :root[data-theme] .sidebar .sidebar-nav .nav-item:hover,
  :root[data-theme] .sidebar .nav-item:hover{
    background:var(--lx-wash-hover-2) !important;
    background-color:var(--lx-wash-hover-2) !important;
    border-color:transparent;
    color:var(--lx-mist) !important;
  }
  @media (hover:hover) and (pointer:fine){
    :root[data-theme] .sidebar .sidebar-nav .nav-item:hover,
    :root[data-theme] .sidebar .nav-item:hover{
      background:var(--lx-wash-hover-2) !important;
      background-color:var(--lx-wash-hover-2) !important;
      color:var(--lx-mist) !important;
    }
  }

  /* Ativo: pill obsidian + marcador lime de 2px encostado na borda do rail */
  :root[data-theme] .sidebar .sidebar-nav .nav-item.active,
  :root[data-theme] .sidebar .nav-item.active{
    background:var(--lx-obsidian) !important;
    background-color:var(--lx-obsidian) !important;
    background-image:none !important;
    border-color:transparent !important;
    outline:none !important;
    color:var(--lx-paper) !important;
  }
  :root[data-theme] .sidebar .sidebar-nav .nav-item.active::before{
    content:"";
    display:block;
    position:absolute;
    left:-10px;
    top:9px;
    width:2px;
    height:16px;
    border-radius:var(--lx-r-pill);
    background:var(--lx-acid-lime);
    transform:none;
  }

  /* Separador de grupo. Segue EXATAMENTE o gating dos nav-item do nível, senão
     sobra risco solto quando o menu troca de contexto. */
  :root[data-theme] .lx-rail-sep{
    flex:0 0 auto;
    width:20px;
    height:1px;
    margin:5px 0;
    background:var(--lx-graphite);
    display:block;
  }
  :root[data-theme] .lx-rail-sep[data-lvl="owner"],
  :root[data-theme] .lx-rail-sep[data-lvl="agency"]{ display:none; }
  :root[data-theme] body[data-ctx="owner"] .lx-rail-sep[data-lvl="owner"],
  :root[data-theme] body[data-ctx="agency"] .lx-rail-sep[data-lvl="agency"]{ display:block; }
  :root[data-theme] body[data-ctx="owner"] .sidebar-nav .lx-rail-sep:not([data-lvl]),
  :root[data-theme] body[data-ctx="agency"] .sidebar-nav .lx-rail-sep:not([data-lvl]){ display:none; }

  /* Rodapé do rail */
  :root[data-theme] .sidebar .sidebar-footer{
    flex:0 0 auto;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:8px 0 0;
    margin-top:8px;
    border-top:1px solid var(--lx-graphite);
  }
  :root[data-theme] .sidebar .sidebar-footer > .sidebar-label{ display:none !important; }
  :root[data-theme] .sidebar .logout-btn{
    position:relative;
    width:34px;
    height:34px;
    min-height:34px;
    padding:0 !important;
    margin:0 !important;
    gap:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent !important;
    border:1px solid transparent;
    border-radius:var(--lx-r-md);
    color:var(--lx-ash) !important;
    font-size:14px;
    line-height:1;
  }
  :root[data-theme] .sidebar .logout-btn > svg{ width:18px; height:18px; display:block; }
  :root[data-theme] .sidebar .logout-btn:hover{
    background:var(--lx-wash-hover-2) !important;
    border-color:transparent;
    color:var(--lx-bone) !important;
  }
  /* Só o Sair fica vermelho no hover. */
  :root[data-theme] .sidebar .logout-btn[data-label="Sair"]:hover{
    background:rgba(var(--lx-coral-rgb),.10) !important;
    color:var(--lx-coral-red) !important;
  }
  :root[data-theme] .sidebar #theme-icon-sidebar{
    font-size:15px;
    line-height:1;
    width:18px;
    text-align:center;
    display:inline-block;
  }

  /* A base desenha um tooltip ::after por data-label quando .collapsed.
     O rail nunca é .collapsed, mas o seletor fica anulado por segurança:
     o tooltip do rail é o title= nativo, como no protótipo. */
  :root[data-theme] .sidebar.collapsed .nav-item::after,
  :root[data-theme] .sidebar.collapsed .logout-btn::after{
    content:none;
    display:none;
  }
}

/* O rail Refero continua compacto quando .collapsed, mas volta a oferecer o
   estado textual completo e um controle sempre acessível entre os dois modos. */
@media (min-width:1024px){
  :root[data-theme] .sidebar:not(.collapsed){
    width:240px !important;
    min-width:240px !important;
    align-items:stretch;
    padding:12px 10px 10px;
  }
  :root[data-theme] .sidebar:not(.collapsed) ~ .main-area,
  :root[data-theme] body:not(:has(.sidebar.collapsed)) .main-area{
    margin-left:240px !important;
  }
  :root[data-theme] .sidebar .sidebar-collapse-btn{
    position:absolute;
    z-index:20;
    top:50px;
    right:-13px;
    display:grid !important;
    width:26px;
    height:26px;
    min-height:26px;
    padding:0;
    place-items:center;
    border:1px solid var(--lx-graphite);
    border-radius:var(--lx-r-pill);
    background:var(--lx-obsidian);
    color:var(--lx-fog);
    box-shadow:var(--lx-sh-subtle);
    cursor:pointer;
  }
  :root[data-theme] .sidebar .sidebar-collapse-btn:hover{
    border-color:var(--lx-smoke);
    background:var(--lx-carbon);
    color:var(--lx-paper);
  }
  :root[data-theme] .sidebar .sidebar-collapse-btn:focus-visible{
    outline:2px solid var(--lx-acid-lime);
    outline-offset:2px;
  }
  :root[data-theme] .sidebar .sidebar-collapse-btn > svg{
    width:14px;
    height:14px;
  }
  :root[data-theme] .sidebar.collapsed .sidebar-collapse-btn{ right:-13px; }

  :root[data-theme] .sidebar:not(.collapsed) .sidebar-label,
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo-txt,
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo-sub,
  :root[data-theme] .sidebar:not(.collapsed) #ctx-sw-name,
  :root[data-theme] .sidebar:not(.collapsed) .ctx-sw-name,
  :root[data-theme] .sidebar:not(.collapsed) .ctx-sw-caret{
    display:block !important;
    width:auto;
    opacity:1;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo{
    width:auto;
    height:40px;
    margin:0 6px 10px;
    padding:0;
    justify-content:flex-start;
    gap:10px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo .icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo-txt{
    min-width:0;
    color:var(--lx-paper);
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-logo-sub{
    margin-top:2px;
    color:var(--lx-ash);
    font-size:8px;
    line-height:1.2;
  }
  :root[data-theme] .sidebar:not(.collapsed) #ctx-switcher{
    width:auto;
    height:36px;
    min-height:36px;
    margin:0 2px 10px;
    padding:0 10px;
    justify-content:flex-start;
    gap:9px;
  }
  :root[data-theme] .sidebar:not(.collapsed) #ctx-switcher .ctx-sw-name{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
  }
  :root[data-theme] .sidebar:not(.collapsed) #ctx-menu{
    left:248px !important;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-nav{
    align-items:stretch;
    padding:0 2px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-nav .nav-item{
    width:auto;
    height:34px;
    padding:0 10px !important;
    justify-content:flex-start;
    gap:10px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-nav .nav-item.active::before{
    left:-12px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .lx-rail-sep{
    width:calc(100% - 20px);
    margin:5px 10px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-footer{
    align-items:stretch;
    padding:8px 2px 0;
  }
  :root[data-theme] .sidebar:not(.collapsed) .sidebar-footer > .sidebar-label{
    display:block !important;
    padding:7px 10px 0;
    color:var(--lx-ash);
    font-size:10px;
  }
  :root[data-theme] .sidebar:not(.collapsed) .logout-btn{
    width:auto;
    padding:0 10px !important;
    justify-content:flex-start;
    gap:10px;
  }
}


/* ============================================================================
   10. CASCA · CTX-MENU (#ctx-menu) — conteúdo do dropdown
   ========================================================================== */
:root[data-theme] #ctx-menu{
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-card);
  box-shadow:var(--lx-sh-xl);
  padding:6px;
}
:root[data-theme] .ctx-menu-search input{
  padding:0 10px;
  height:var(--lx-h-btn);
  border-radius:var(--lx-r-md);
  background:var(--lx-void);
  border:1px solid var(--lx-graphite);
  color:var(--lx-mist);
  font-size:13px;
}
:root[data-theme] .ctx-menu-search input:focus{
  border-color:var(--lx-mist);
}
:root[data-theme] .ctx-opt{
  padding:0 8px;
  min-height:32px;
  border-radius:var(--lx-r-md);
  color:var(--lx-mist);
  font-size:13px;
}
:root[data-theme] .ctx-opt:hover{
  background:var(--lx-wash-hover);
  color:var(--lx-bone);
}
:root[data-theme] .ctx-opt.active{
  background:var(--lx-graphite);
  color:var(--lx-paper);
}
/* O app.js (bundle app.bf274c1a6575.js) injeta SVG de linha em .ctx-opt-ico
   via CTX_ICO_ORG/CTX_ICO_ACC. O span vira só a moldura de 14px. */
:root[data-theme] .ctx-opt .ctx-opt-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:var(--lx-ash);
}
:root[data-theme] .ctx-opt .ctx-opt-ico > svg{ width:14px; height:14px; display:block; }
:root[data-theme] .ctx-opt.active .ctx-opt-ico{ color:var(--lx-lime-ink); }
:root[data-theme] .ctx-opt .ctx-opt-txt small{
  color:var(--lx-ash);
  font-size:11px;
}
:root[data-theme] .ctx-opt .ctx-opt-chev{ color:var(--lx-ash); opacity:1; }
:root[data-theme] .ctx-opt .ctx-opt-check{ color:var(--lx-lime-ink); }
:root[data-theme] .ctx-sec-title{
  color:var(--lx-ash);
  font-family:var(--lx-font-ui);
  font-size:10px;
  font-weight:var(--lx-w-510);
  letter-spacing:.04em;
  padding:10px 8px 4px;
}
:root[data-theme] .ctx-back{
  color:var(--lx-fog);
  border-bottom:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  font-size:12px;
}
:root[data-theme] .ctx-back:hover{ color:var(--lx-bone); }
:root[data-theme] .ctx-menu-empty{ color:var(--lx-ash); font-size:12px; }


/* ============================================================================
   11. CASCA · MAIN AREA e TOPBAR
   Canvas void; a topbar de cada página é uma faixa carbon de 52px com filete
   graphite embaixo. .lx-topbar é a versão estrutural nova (dashboard); o
   seletor genérico header.glass continua atendendo as páginas ainda antigas.
   ========================================================================== */
:root[data-theme] .main-area{
  background-color:var(--lx-void) !important;
  background-image:none !important;
  color:var(--lx-mist) !important;
}

:root[data-theme] .main-area .page > header.glass{
  min-height:var(--lx-h-topbar);
  padding:0 var(--lx-s20) !important;
  background:var(--lx-carbon) !important;
  background-image:none !important;
  border-bottom:1px solid var(--lx-graphite) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

/* Topbar estrutural: uma linha de 52px, título à esquerda, controles à direita. */
:root[data-theme] .main-area .page > header.lx-topbar{
  display:flex;
  align-items:center;
  gap:var(--lx-s12);
  height:var(--lx-h-topbar);
  min-height:var(--lx-h-topbar);
  padding:0 var(--lx-s20) !important;
  flex:0 0 auto;
}
:root[data-theme] .lx-topbar-l{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
:root[data-theme] .lx-topbar-r{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  margin-left:auto;
  min-width:0;
  flex:0 0 auto;
}
:root[data-theme] .lx-topbar-title{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--lx-paper) !important;
  font-family:var(--lx-font-ui);
  font-size:24px;
  font-weight:var(--lx-w-510);
  letter-spacing:-.288px;
  line-height:1.33;
  white-space:nowrap;
  /* Item 6 — o h1 dá prioridade à própria largura (não encolhe): em telas como
     Métricas Instagram, os dois selects de 470px na esquerda espremiam o título
     a 92px ("Métric..."). Com flex 0 0 auto o título fica inteiro (213px) e os
     selects encolhem (410px) sem estourar a topbar. */
  flex:0 0 auto;
}
:root[data-theme] .lx-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:20px;
  padding:0 6px;
  border-radius:var(--lx-r-badge);
  background:var(--lx-wash-hover);
  color:var(--lx-fog);
  font-family:var(--lx-font-ui);
  font-size:12px;
  line-height:1.4;
  white-space:nowrap;
}
:root[data-theme] .lx-badge:empty{ display:none; }

:root[data-theme] .lx-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--lx-fog);
  font-size:12px;
  white-space:nowrap;
}
:root[data-theme] .lx-live-dot{
  width:6px;
  height:6px;
  border-radius:var(--lx-r-pill);
  background:var(--lx-pulse-green);
  flex:0 0 auto;
}

/* Botão de ícone da topbar (theme-toggle e fullscreen carregam .lx-ibtn) */
:root[data-theme] .lx-ibtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--lx-r-md);
  background:transparent !important;
  color:var(--lx-fog) !important;
  font-size:14px;
  line-height:1;
}
:root[data-theme] .lx-ibtn:hover{
  background:var(--lx-wash-hover-2) !important;
  color:var(--lx-bone) !important;
}

/* Botão de texto */
:root[data-theme] .lx-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:var(--lx-h-btn);
  padding:0 12px;
  border:1px solid var(--lx-graphite);
  border-radius:var(--lx-r-md);
  background:transparent;
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:13px;
  font-weight:var(--lx-w-510);
  white-space:nowrap;
  cursor:pointer;
}
:root[data-theme] .lx-btn:hover{
  background:var(--lx-wash-hover);
  border-color:var(--lx-smoke);
  color:var(--lx-bone);
}
:root[data-theme] .lx-btn-sm{ height:var(--lx-h-btn-sm); padding:0 8px; font-size:12px; }
:root[data-theme] .lx-btn-plain{ border-color:transparent; color:var(--lx-fog); }
:root[data-theme] .lx-btn-plain:hover{ border-color:transparent; background:var(--lx-wash-hover-2); color:var(--lx-bone); }

/* Faixa de data personalizada */
:root[data-theme] .lx-daterange{
  align-items:center;
  gap:6px;
}
:root[data-theme] .lx-daterange-sep{ color:var(--lx-ash); font-size:12px; }

/* Selects e inputs de data do topbar */
:root[data-theme] .main-area .page > header.glass :where(select,input[type="date"]){
  background:var(--lx-obsidian) !important;
  background-image:none !important;
  border:1px solid var(--lx-graphite) !important;
  border-radius:var(--lx-r-md) !important;
  color:var(--lx-mist) !important;
  font-family:var(--lx-font-ui) !important;
  font-size:12px !important;
  height:var(--lx-h-btn);
  padding:0 10px !important;
}
:root[data-theme] .main-area .page > header.glass :where(select,input[type="date"]):focus{
  border-color:var(--lx-mist) !important;
}
:root[data-theme] .main-area .page > header.glass select option{
  background:var(--lx-obsidian);
  color:var(--lx-mist);
}
/* custom-select.js envelopa cada <select> num .cs-root; o gatilho vira o
   controle visível e o <select> nativo fica escondido por ele. A base declara
   .cs-root{width:100%} e .cs-trigger{min-height:42px}, o que estoura uma
   topbar de 52px — daí o teto de largura e a altura de 32px aqui. */
:root[data-theme] .lx-topbar-r > *{ flex:0 0 auto; }
:root[data-theme] .lx-topbar-r .cs-root{
  width:auto;
  min-width:0;
  max-width:186px;
  flex:0 1 186px;
}
:root[data-theme] .lx-topbar-r .cs-trigger{
  width:100%;
  height:var(--lx-h-btn);
  min-height:var(--lx-h-btn);
  padding:0 10px;
  gap:8px;
  border-radius:var(--lx-r-md);
  background:var(--lx-obsidian);
  border:1px solid var(--lx-graphite);
  color:var(--lx-mist);
  font-family:var(--lx-font-ui);
  font-size:12px;
  box-shadow:none;
}
:root[data-theme] .lx-topbar-r .cs-trigger:hover,
:root[data-theme] .lx-topbar-r .cs-root.is-open .cs-trigger{
  background:var(--lx-graphite);
  border-color:var(--lx-smoke);
  color:var(--lx-bone);
}
:root[data-theme] .lx-topbar-r .cs-label{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:root[data-theme] .lx-topbar-r .cs-caret{ flex:0 0 auto; width:12px; height:12px; opacity:.7; }