/* =========================================================================
   Studiuns - Sidebar compacto (desktop) + navegacao inferior (mobile)
   Arquivo carregado automaticamente pelo Perfex (assets_helper.php) depois
   de assets/css/style.min.css. Nenhuma regra abaixo edita o core.

   Estrutura real usada como referencia:
   #menu.sidebar / #side-menu / #wrapper / #header
   body.hide-sidebar  -> recolhido (desktop)
   body.show-sidebar  -> expandido (mobile, drawer nativo - NAO USADO MAIS)
   body.page-small    -> modo mobile
   Breakpoint: 768/769px

   IMPORTANTE (licao aprendida): o link <link id="custom-css"> que o core
   registra automaticamente (assets_helper.php) NAO tem cache-busting por
   query string, entao pode ficar preso em cache de borda (Cloudflare) por
   tempo indeterminado, servindo uma versao antiga deste arquivo. Por isso,
   toda regra de mobile abaixo usa "!important": assim, mesmo que a versao
   em cache antiga ainda carregue com uma regra conflitante, esta aqui
   sempre vence (importance bate specificity/ordem na cascata do CSS).
   ========================================================================= */

:root {
  --studiuns-rail-width: 60px;
  --studiuns-bottomnav-height: 60px;
}

/* -------------------------------------------------------------------------
   1) DESKTOP COMPACTO
   body.hide-sidebar:not(.show-sidebar):not(.page-small)
   Em vez do comportamento nativo (sidebar totalmente fora da tela,
   margin-left:-230px), a sidebar fica visivel como uma faixa de icones.
   Isso NAO muda no mobile: no mobile a sidebar e' removida por completo
   (ver secao 5) e substituida pela navegacao inferior (secao 6).
   ---------------------------------------------------------------------- */
body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu {
  margin-left: 0 !important;
  width: var(--studiuns-rail-width) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) #wrapper,
body.hide-sidebar:not(.show-sidebar):not(.page-small) #header {
  margin-left: var(--studiuns-rail-width) !important;
}

/* -------------------------------------------------------------------------
   2) CONTEUDO INTERNO DA SIDEBAR NO ESTADO COMPACTO (somente desktop)
   Esconde textos/setas/badges, centraliza icones. No mobile a sidebar
   inteira fica display:none (secao 5), entao essas regras nao se aplicam
   la - sao exclusivas do modo "rail" do desktop.
   ---------------------------------------------------------------------- */
body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu .menu-text,
body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu .arrow,
body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu .badge,
body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu .sidebar-user-profile .profile > span > span {
  display: none !important;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu.sidebar {
  padding-left: 0;
  padding-right: 0;
}

/* Projetos fixados (pinned) nunca ficam na lista lateral - viram uma faixa
   horizontal deslizavel, montada por JS logo no topo de #wrapper. Isso vale
   tanto no desktop compacto quanto no mobile. */
#side-menu > li.pinned_project,
#side-menu > li.pinned-separator {
  display: none !important;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  margin: 2px 6px;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li > a i.menu-icon {
  float: none;
  margin-right: 0;
  width: auto;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) .sidebar-user-profile {
  display: flex;
  justify-content: center;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.hide-sidebar:not(.show-sidebar):not(.page-small) .sidebar-user-profile .profile {
  padding: 6px !important;
  display: inline-flex;
}

/* -------------------------------------------------------------------------
   3) SUBMENU FLUTUANTE (painel injetado via JS - assets/js/custom-sidebar.js)
   Usado tanto no hover do desktop compacto quanto no toque da navegacao
   inferior do mobile (a posicao e' calculada em JS conforme o contexto).
   Nao aumenta a largura do documento: e' position:fixed, fora do fluxo.
   ---------------------------------------------------------------------- */
.studiuns-floating-submenu {
  position: fixed;
  display: none;
  min-width: 210px;
  max-width: 280px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 1085;
  padding: 6px;
}

.studiuns-floating-submenu.is-open {
  display: block;
}

.studiuns-floating-submenu .studiuns-floating-submenu-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 6px 10px 4px;
}

.studiuns-floating-submenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.studiuns-floating-submenu ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0.375rem;
  color: #374151 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent !important;
}

.studiuns-floating-submenu ul li a:hover,
.studiuns-floating-submenu ul li a:focus {
  background: #f3f4f6 !important;
  color: #111827 !important;
  text-decoration: none;
}

.studiuns-floating-submenu ul li.active > a {
  color: #111827 !important;
  font-weight: 600;
}

/* Marca visual do icone que possui o submenu aberto (desktop compacto) */
body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li.studiuns-submenu-open > a {
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid rgb(15 23 42 / 0.15);
}

/* Tema escuro - cores extraidas dos componentes nativos (.dropdown-menu) do
   proprio Perfex em html[data-perfex-theme="dark"], para o submenu flutuante
   parecer parte do sistema em vez de sempre branco. */
[data-perfex-theme="dark"] .studiuns-floating-submenu {
  background: #31324a;
  border-color: #3f3f54;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);
}

[data-perfex-theme="dark"] .studiuns-floating-submenu ul li a {
  color: #e4e4e7 !important;
  background: transparent !important;
}

[data-perfex-theme="dark"] .studiuns-floating-submenu ul li a:hover,
[data-perfex-theme="dark"] .studiuns-floating-submenu ul li a:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

[data-perfex-theme="dark"] .studiuns-floating-submenu ul li.active > a {
  color: #fff !important;
}

[data-perfex-theme="dark"] body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li.studiuns-submenu-open > a {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------------------------------
   4) FAIXA HORIZONTAL DE PROJETOS FIXADOS (pinned)
   Montada por JS (custom-sidebar.js) como primeiro filho de #wrapper.
   O scroll horizontal fica contido dentro da faixa (overflow-x:auto),
   nunca no documento inteiro - por isso nao contribui para o overflow
   horizontal da pagina. Ativa tanto no desktop compacto quanto no mobile.
   ---------------------------------------------------------------------- */
.studiuns-pinned-strip {
  display: -webkit-box;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  gap: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
  max-width: 100%;
  background: transparent;
}

.studiuns-pinned-strip::-webkit-scrollbar {
  height: 6px;
}

.studiuns-pinned-strip::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, 0.15);
  border-radius: 3px;
}

.studiuns-pinned-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.12);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  text-decoration: none;
  cursor: pointer;
}

.studiuns-pinned-card:hover,
.studiuns-pinned-card:focus {
  border-color: rgba(37, 99, 235, 0.4);
  text-decoration: none;
}

.studiuns-pinned-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.studiuns-pinned-card-company {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}

.studiuns-pinned-card-progress {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

.studiuns-pinned-card-progress > span {
  display: block;
  height: 100%;
  background: #2563eb;
}

[data-perfex-theme="dark"] .studiuns-pinned-card {
  background: #31324a;
  border-color: #3f3f54;
}

[data-perfex-theme="dark"] .studiuns-pinned-card:hover,
[data-perfex-theme="dark"] .studiuns-pinned-card:focus {
  border-color: rgba(96, 165, 250, 0.5);
}

[data-perfex-theme="dark"] .studiuns-pinned-card-name {
  color: #e4e4e7;
}

[data-perfex-theme="dark"] .studiuns-pinned-card-company {
  color: #a1a1aa;
}

[data-perfex-theme="dark"] .studiuns-pinned-card-progress {
  background: rgba(255, 255, 255, 0.1);
}

[data-perfex-theme="dark"] .studiuns-pinned-strip::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  .studiuns-pinned-strip {
    padding: 8px 12px;
  }

  .studiuns-pinned-card {
    min-width: 140px;
    max-width: 180px;
  }
}

/* -------------------------------------------------------------------------
   5) MOBILE - REMOCAO TOTAL DA SIDEBAR + CONTEUDO EM LARGURA TOTAL
   Nao existe mais "rail" de icones no mobile. A sidebar inteira sai do
   fluxo visual e do espaco ocupado, e o conteudo passa a usar 100% da
   largura disponivel. A navegacao passa a ser feita pela barra inferior
   (secao 6).
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* A sidebar sai do fluxo por completo: nao ocupa largura, nao ocupa
     espaco reservado por margem, e sai da area visivel mesmo que algum
     outro seletor tente reexibi-la. */
  body.page-small #menu.sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
  }

  /* #wrapper/#header no core do Perfex (assets/css/style.css) nunca tem
     "width" explicito, so "margin-left" - por isso aqui tambem so
     zeramos a margem e deixamos a largura ser calculada automaticamente
     pelo navegador (width:auto preenche 100% do espaco disponivel).
     Definir "width: calc(100vw - Xpx)" foi o que causava o espaco vazio
     horizontal em uma versao anterior: 100vw inclui a largura da barra
     de rolagem vertical, entao o elemento ficava mais largo que a area
     realmente visivel. Nao repetimos esse erro aqui - width fica livre.

     Especificidade reforcada de proposito (":not(.studiuns-a):not(.studiuns-b)"
     sao classes que nunca existem no body - servem so para somar peso de
     especificidade, nao mudam o que a regra seleciona). Motivo: a versao
     antiga deste arquivo, presa em cache de borda (Cloudflare) no link
     sem cache-busting (#custom-css), ainda contem uma regra residual de
     uma fase anterior do projeto -
     "body.page-small:not(.show-sidebar) #wrapper { margin-left: 60px }" -
     com especificidade MAIOR que uma regra simples "body.page-small
     #wrapper" (2 classes contra 1). Mesmo com !important dos dois lados,
     especificidade decide o empate, e a regra antiga vencia, reservando
     60px de margem fantasma no mobile (bug real reportado: "espaco" preto
     do lado esquerdo). Aqui igualamos e ultrapassamos essa especificidade
     para blindar contra esse cache antigo, sem depender da ordem de
     carregamento dos links. */
  html body.page-small #wrapper,
  html body.page-small #header,
  body.page-small:not(.studiuns-a):not(.studiuns-b) #wrapper,
  body.page-small:not(.studiuns-a):not(.studiuns-b) #header {
    margin-left: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #wrapper,
  #header,
  .content,
  .container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Espaco lateral consistente para o conteudo, agora que ele ocupa a
     largura total (antes ficava reservado para a sidebar). */
  body.page-small .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Espaco inferior reservado para a barra de navegacao fixa (secao 6),
     incluindo a area segura de aparelhos com gestos/notch. Sem isso o
     ultimo conteudo da pagina ficaria escondido atras da barra. */
  body.page-small #wrapper {
    padding-bottom: calc(var(--studiuns-bottomnav-height) + env(safe-area-inset-bottom, 0px) + 14px) !important;
  }

  .studiuns-floating-submenu {
    max-width: calc(100vw - 24px);
  }

  /* Tabelas largas ganham rolagem propria em vez de empurrar a pagina */
  .table-responsive,
  table.dataTable {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   6) MOBILE - NAVEGACAO INFERIOR (bottom nav)
   Substitui por completo a sidebar lateral no mobile. Barra fixa na parte
   de baixo da tela, com rolagem horizontal por toque. Montada por JS
   (custom-sidebar.js / buildBottomNav()) a partir dos mesmos itens do
   #side-menu, mas com marcacao e estilo proprios - nao e' a sidebar
   reaproveitada, e' um componente novo.
   ---------------------------------------------------------------------- */
.studiuns-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  body.page-small .studiuns-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1090 !important;
    align-items: stretch !important;
    height: var(--studiuns-bottomnav-height) !important;
    padding: 0 4px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin: 0 !important;
    background: #fff !important;
    border-top: 1px solid rgba(17, 24, 39, 0.1) !important;
    box-shadow: 0 -2px 8px rgb(0 0 0 / 0.06) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.page-small .studiuns-bottom-nav::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  .studiuns-bottom-nav-item {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 66px !important;
    padding: 6px 10px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .studiuns-bottom-nav-item i {
    font-size: 18px !important;
    line-height: 1 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }

  .studiuns-bottom-nav-item span {
    max-width: 76px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  .studiuns-bottom-nav-item.is-active {
    color: #2563eb !important;
  }

  .studiuns-bottom-nav-item:active {
    opacity: 0.7 !important;
  }
}

@media (min-width: 769px) {
  .studiuns-bottom-nav {
    display: none !important;
  }
}

[data-perfex-theme="dark"] body.page-small .studiuns-bottom-nav {
  background: #383a52 !important;
  border-top-color: #3f3f54 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35) !important;
}

[data-perfex-theme="dark"] body.page-small .studiuns-bottom-nav-item {
  color: #a1a1aa !important;
}

[data-perfex-theme="dark"] body.page-small .studiuns-bottom-nav-item.is-active {
  color: #5b67ff !important;
}

/* -------------------------------------------------------------------------
   7) RTL
   ---------------------------------------------------------------------- */
[dir="rtl"] body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu {
  margin-right: 0 !important;
  margin-left: auto !important;
}

[dir="rtl"] body.hide-sidebar:not(.show-sidebar):not(.page-small) #wrapper,
[dir="rtl"] body.hide-sidebar:not(.show-sidebar):not(.page-small) #header {
  margin-right: var(--studiuns-rail-width) !important;
  margin-left: 0 !important;
}

/* -------------------------------------------------------------------------
   8) Foco visivel (acessibilidade) - nao remove outline, so deixa consistente
   ---------------------------------------------------------------------- */
#side-menu > li > a:focus-visible,
.studiuns-bottom-nav-item:focus-visible,
.hide-menu:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------
   9) COMPATIBILIDADE COM ELEMENTO DE TERCEIRO NO CANTO INFERIOR DIREITO
   O tema injeta um <div style="position:fixed; bottom:5px; right:15px;
   z-index:999999"> (sem classe/id) fixo no canto inferior direito da
   tela. Antes da barra de navegacao inferior existir, esse elemento nao
   colidia com nada. Agora ele fica sobreposto/misturado visualmente com o
   ultimo item da barra. Como o elemento nao tem classe nem id, o unico
   seletor CSS possivel e' por um trecho do proprio atributo style (valor
   bem especifico e improvavel de colidir com outro elemento).
   Empurramos ele para cima da barra e baixamos seu z-index para ficar
   atras dela, sem remover o elemento.
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.page-small div[style*="999999"] {
    display: none !important;
  }
}


/* -------------------------------------------------------------------------
   10) MOBILE - HEADER FIXO NO TOPO
   Contraparte superior da navegacao inferior (secao 6). O #header nativo
   do Perfex passa a ser fixo no topo no mobile, sempre visivel durante o
   scroll, contendo (da esquerda para a direita): Mailbox (com badge de
   nao lidas), busca global, notificacoes (sino), atividades (relogio) e
   o avatar do usuario (abre o painel nativo #mobile-collapse). Demais
   itens do header ficam ocultos no mobile. Montagem dos itens novos:
   custom-sidebar.js / buildMobileTopHeader(). Desktop permanece intacto.
   ---------------------------------------------------------------------- */
:root {
  --studiuns-topheader-height: 60px;
}

.studiuns-mobile-mailbox,
.studiuns-mobile-avatar {
  display: none;
}

@media (max-width: 768px) {
  body.page-small #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 1100 !important;
    min-height: calc(var(--studiuns-topheader-height) + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.1) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06) !important;
  }

  body.page-small #header nav {
    height: 100% !important;
  }

  body.page-small #header nav > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: var(--studiuns-topheader-height) !important;
    padding: 0 12px !important;
  }

  body.page-small #wrapper {
    padding-top: calc(var(--studiuns-topheader-height) + env(safe-area-inset-top, 0px) + 10px) !important;
  }

  body.page-small #header .mobile-menu-toggle,
  body.page-small #header .hide-menu {
    display: none !important;
  }

  body.page-small #header ul.navbar-right {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
  }

  body.page-small #header ul.navbar-right > li {
    display: none !important;
  }

  body.page-small #header ul.navbar-right > li.header-timers,
  body.page-small #header ul.navbar-right > li.notifications-wrapper {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  body.page-small #header #search_input {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  body.page-small .studiuns-mobile-mailbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.page-small .studiuns-mobile-mailbox.is-active {
    color: #2563eb !important;
  }

  body.page-small .studiuns-mobile-mailbox:active {
    opacity: 0.7 !important;
  }

  body.page-small .studiuns-mobile-mailbox .studiuns-mailbox-badge {
    display: none;
    position: absolute !important;
    top: 1px !important;
    right: 0 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-align: center !important;
  }

  body.page-small .studiuns-mobile-mailbox.has-unread .studiuns-mailbox-badge {
    display: block !important;
  }

  body.page-small .studiuns-mobile-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: rgba(107, 114, 128, 0.15) !important;
    color: #6b7280 !important;
    font-size: 17px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body.page-small .studiuns-mobile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  body.page-small #mobile-collapse {
    position: fixed !important;
    top: calc(var(--studiuns-topheader-height) + env(safe-area-inset-top, 0px) + 6px) !important;
    right: 8px !important;
    left: auto !important;
    width: min(300px, calc(100vw - 16px)) !important;
    max-height: calc(100vh - var(--studiuns-topheader-height) - var(--studiuns-bottomnav-height) - 40px) !important;
    overflow-y: auto !important;
    z-index: 1099 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: #fff !important;
    border: 1px solid rgba(17, 24, 39, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.18) !important;
  }

  body.page-small #header li.notifications-wrapper .dropdown-menu,
  body.page-small #header li.header-timers .dropdown-menu {
    position: fixed !important;
    top: calc(var(--studiuns-topheader-height) + env(safe-area-inset-top, 0px) + 6px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: min(420px, calc(100vh - var(--studiuns-topheader-height) - var(--studiuns-bottomnav-height) - 60px)) !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 769px) {
  .studiuns-mobile-mailbox,
  .studiuns-mobile-avatar {
    display: none !important;
  }
}

[data-perfex-theme='dark'] body.page-small #header {
  background: #383a52 !important;
  border-bottom-color: #3f3f54 !important;
}

[data-perfex-theme='dark'] body.page-small .studiuns-mobile-mailbox {
  color: #a1a1aa !important;
}

[data-perfex-theme='dark'] body.page-small .studiuns-mobile-mailbox.is-active {
  color: #5b67ff !important;
}

[data-perfex-theme='dark'] body.page-small .studiuns-mobile-avatar {
  background: rgba(161, 161, 170, 0.2) !important;
  color: #a1a1aa !important;
}

[data-perfex-theme='dark'] body.page-small #mobile-collapse {
  background: #383a52 !important;
  border-color: #3f3f54 !important;
}


/* -------------------------------------------------------------------------
   11) MOBILE - PRIMEIRO PAINT SEM FLASH (independente de body.page-small)
   O core do Perfex so adiciona body.page-small DEPOIS que o JS roda
   (~800ms). Ate la, a sidebar e todos os icones nativos do header
   aparecem por instantes (flash) - foi o que gerou a "duplicacao" de
   sino/timer no carregamento e a sidebar piscando. As regras abaixo
   valem por LARGURA DE VIEWPORT (o link custom.css esta no <head>),
   aplicando ja no primeiro paint, sem depender de JS. O estado final
   (sino + timer + mailbox + avatar) continua sendo montado pelas
   secoes 5/6/10 quando o page-small entra (maior especificidade).
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Sidebar fora da tela desde o primeiro paint */
  #menu.sidebar,
  #menu {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    visibility: hidden !important;
  }

  /* Conteudo e header em largura total, sem a margem reservada a sidebar */
  #wrapper,
  #header {
    margin-left: 0 !important;
    left: 0 !important;
    width: auto !important;
  }

  /* Header fixo desde o primeiro paint (evita salto de layout) */
  #header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(17, 24, 39, 0.1) !important;
  }

  /* Sanduiche e TODOS os icones nativos do header ocultos ja no primeiro
     paint. As secoes 6/10 reexibem apenas sino + timer quando o
     page-small entra. Impede a duplicacao transitoria de sino/timer/
     newsfeed durante o carregamento. */
  #header .hide-menu,
  #header .mobile-menu-toggle,
  #header ul.navbar-right > li {
    display: none !important;
  }

  /* Coerencia de cor do header no primeiro paint em tema escuro (mobile) */
  [data-perfex-theme='dark'] #header {
    background: #383a52 !important;
    border-bottom-color: #3f3f54 !important;
  }
}


/* -------------------------------------------------------------------------
   12) DUPLICACAO REAL DE SINO/TIMER EM USER-AGENT MOBILE
   Causa raiz (confirmada em application/views/admin/includes/header.php):
   quando is_mobile() e' verdadeiro (User-Agent de celular/tablet), o
   Perfex renderiza uma barra EXTRA <ul class="mobile-icon-menu"> com
   COPIAS de notifications (sino) e header-timers (timer), ALEM das que
   ja existem sempre no ul.navbar-right. Como os icones do navbar-right
   NAO tem hidden-xs, eles continuam sendo a fonte unica; a mobile-icon-menu
   e' pura duplicata (vazia no HTML de UA desktop, redundante no de UA
   mobile). Por isso a duplicidade so aparecia em UA mobile e NAO era
   cache. Ocultamos a barra duplicada de forma incondicional (sem media
   query), garantindo 1 sino + 1 timer em qualquer User-Agent/viewport.
   ---------------------------------------------------------------------- */
#header .mobile-icon-menu {
  display: none !important;
}

/* STUDIUNS sidebar (studiuns-custom) */
body:not(.hide-sidebar):not(.page-small) #menu.sidebar{display:flex!important;flex-direction:column!important;top:54px!important;bottom:0!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
body:not(.hide-sidebar):not(.page-small) #menu.sidebar>.sidebar-user-profile{flex:0 0 auto!important;margin-top:12px!important;position:relative!important}
body:not(.hide-sidebar):not(.page-small) #menu.sidebar>#side-menu{flex:1 1 auto!important;min-height:0!important;margin-top:10px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important}
body:not(.hide-sidebar):not(.page-small) #menu.sidebar>#side-menu::-webkit-scrollbar{width:6px}
body:not(.hide-sidebar):not(.page-small) #menu.sidebar>#side-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
body:not(.hide-sidebar):not(.page-small) #menu .sidebar-user-profile .dropdown-toggle.profile{padding-right:40px!important}
#menu .sidebar-logout{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:inherit;opacity:.7;z-index:5;text-decoration:none;transition:background .15s ease,opacity .15s ease}
#menu .sidebar-logout:hover{opacity:1;background:rgba(255,255,255,.10)}
#menu .sidebar-logout i{font-size:15px;line-height:1}
body.hide-sidebar #menu .sidebar-logout,body.page-small #menu .sidebar-logout{display:none!important}
body.hide-sidebar:not(.page-small) #menu.sidebar{display:flex!important;flex-direction:column!important;top:54px!important;bottom:0!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
body.hide-sidebar:not(.page-small) #menu.sidebar>.sidebar-user-profile{flex:0 0 auto!important;overflow:visible!important}
body.hide-sidebar:not(.page-small) #menu.sidebar>#side-menu{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:none!important}
body.hide-sidebar:not(.page-small) #menu.sidebar>#side-menu::-webkit-scrollbar{width:0!important;height:0!important}
body.hide-sidebar:not(.page-small) #menu #side-menu>li>a{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding-left:0!important;padding-right:0!important;border-right-width:3px!important;border-right-color:transparent!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;position:relative!important;left:0!important}
body.hide-sidebar:not(.page-small) #menu #side-menu>li>a>i,body.hide-sidebar:not(.page-small) #menu #side-menu>li>a .menu-icon{margin:0!important;flex:0 0 auto!important}
body.sidebar-glass:not(.page-small) #menu.sidebar{background:rgba(24,26,42,.60)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-right:1px solid rgba(255,255,255,.08)!important;box-shadow:10px 0 30px rgba(0,0,0,.22)!important}
body.sidebar-glass:not(.page-small) #side-menu>li>a{background:transparent!important;transition:background .15s ease}
body.sidebar-glass:not(.page-small) #side-menu>li>a:hover{background:rgba(255,255,255,.06)!important}
body.sidebar-glass:not(.page-small) #side-menu>li.active>a{background:rgba(91,103,255,.20)!important;border-left-color:rgb(123,138,243)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important}
body.sidebar-glass:not(.page-small) #menu .sidebar-user-profile{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px!important}
@media (max-width:768px){
body.page-small.sidebar-glass #header{background:rgba(18,20,36,.68)!important;-webkit-backdrop-filter:blur(20px) saturate(135%);backdrop-filter:blur(20px) saturate(135%);border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important;transition:transform 220ms ease,opacity 180ms ease;will-change:transform}
body.page-small.sidebar-glass.nav-hide-top #header{transform:translateY(-120%)!important;opacity:0!important;pointer-events:none!important}
body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(18,20,36,.70)!important;-webkit-backdrop-filter:blur(20px) saturate(135%);backdrop-filter:blur(20px) saturate(135%);border-top:1px solid rgba(255,255,255,.10)!important;box-shadow:0 -8px 24px rgba(0,0,0,.28)!important;transition:transform 220ms ease,opacity 180ms ease;will-change:transform}
body.page-small.sidebar-glass.nav-hide-bottom .studiuns-bottom-nav{transform:translateY(120%)!important;opacity:0!important;pointer-events:none!important}
body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item{min-width:44px!important;min-height:44px!important;color:rgba(255,255,255,.82)!important;border-radius:10px!important;transition:background .15s ease,transform .1s ease}
body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item i{font-size:22px!important}
body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item:active{transform:scale(.94);background:rgba(255,255,255,.08)!important}
body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item.is-active{color:rgb(150,162,255)!important;background:rgba(91,103,255,.20)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important}
}
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
body.sidebar-glass:not(.page-small) #menu.sidebar{background:rgba(24,26,42,.96)!important}
body.sidebar-glass:not(.page-small) #menu .sidebar-user-profile{background:rgba(255,255,255,.10)!important}
body.page-small.sidebar-glass #header,body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(18,20,36,.97)!important}
}
@media (prefers-reduced-motion:reduce){
body.sidebar-glass #menu.sidebar,body.sidebar-glass #side-menu>li>a,body.page-small.sidebar-glass #header,body.page-small.sidebar-glass .studiuns-bottom-nav{transition:none!important}
}
/* end studiuns-custom */

/* =========================================================
   FIX 23/07/2026 - Painel de Configuracoes (#setup-menu-wrapper)
   Sintoma: ao clicar na engrenagem (Configuracoes), o painel de
   Definicoes nao aparecia (sidebar expandida) ou aparecia cortado
   (sidebar recolhida).
   Causa: #setup-menu-wrapper tem z-index:9 (core), mas o menu
   lateral #menu tem z-index:1100 (tema) -> o painel abria ATRAS.
   O cabecalho #header tem z-index:1200.
   Correcao: z-index do painel = 1150 (acima do menu, abaixo do
   cabecalho). Resolve nos dois estados. !important pelo motivo de
   cache de borda descrito no topo deste arquivo.
   ========================================================= */
body #setup-menu-wrapper{z-index:1150 !important;}


/* =========================================================
   MELHORIA 23/07/2026 - Botao de Configuracoes fixo no rodape
   da sidebar (mesmo comportamento do quadro de Perfil no topo).
   Estrutura: #menu.sidebar e flex-column. O Perfil (.sidebar-user-
   profile) fica no topo como item flex fixo; #side-menu (lista) rola.
   O botao (li#setup-menu-item) era o ultimo item da lista que rola,
   por isso sua posicao variava. Aqui ele e fixado no rodape com
   position:sticky;bottom:0 (fica visivel mesmo com a lista rolada)
   e margin-top:auto (vai ao rodape mesmo quando ha poucos itens).
   Escopo em @media(min-width:769px) para NAO afetar o mobile, que
   usa a navegacao inferior. !important pelo motivo de cache descrito
   no topo deste arquivo e para vencer regras do estado recolhido.
   ========================================================= */
@media (min-width:769px){
  body.sidebar-glass #menu #side-menu{ display:flex !important; flex-direction:column !important; }
  body.sidebar-glass #menu #side-menu > li#setup-menu-item{
    margin-top:auto !important;
    position:sticky !important; top:auto !important; bottom:0 !important; z-index:3 !important;
    background-color:rgba(24,26,42,0.92);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 -10px 14px -8px rgba(0,0,0,.45);
  }
}

/* =========================================================
   REVISAO 24/07/2026 - Glassmorphism NATIVO por tema (desktop).
   Substitui a versao anterior do cabecalho (que forcava cor
   escura fixa em qualquer tema). Agora Dark e Light compartilham
   a mesma linguagem de vidro, mudando so as cores, conforme o
   atributo <html data-perfex-theme="dark|light">.
   O backdrop-filter ja funciona (testado); o que fazia parecer
   'so um fundo escuro' era a opacidade alta demais encobrindo o
   blur. Por isso o fundo aqui e bem translucido.
   ========================================================= */

/* ----- DARK: vidro escuro translucido ----- */
html[data-perfex-theme="dark"] body.sidebar-glass:not(.page-small) #header{
  background-color: rgba(18,20,36,0.28) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.4);
}

/* ----- LIGHT: vidro claro translucido (header + sidebar + rodape) ----- */
html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #header{
  background-color: rgba(255,255,255,0.55) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  text-shadow: none;
}
html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #menu.sidebar{
  background-color: rgba(255,255,255,0.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid rgba(0,0,0,0.06) !important;
}
html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #side-menu > li#setup-menu-item{
  background-color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 -10px 14px -8px rgba(0,0,0,0.12) !important;
}

/* sombra de texto nao se aplica a menus suspensos nem a busca */
body.sidebar-glass:not(.page-small) #header .dropdown-menu,
body.sidebar-glass:not(.page-small) #header .dropdown-menu *,
body.sidebar-glass:not(.page-small) #header input{ text-shadow: none; }

/* fallback sem backdrop-filter: fundo mais opaco por tema */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-perfex-theme="dark"] body.sidebar-glass:not(.page-small) #header{ background-color: rgba(18,20,36,0.92) !important; }
  html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #header{ background-color: rgba(255,255,255,0.9) !important; }
  html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #menu.sidebar{ background-color: rgba(255,255,255,0.95) !important; }
}

/* ==== FIX GLASS DESKTOP - conteudo atras do header (Studiuns 24/07/2026) ==== */
/* Causa raiz: modulo theme_style deixava #wrapper position:fixed;top:54px, um  */
/* scroller proprio ABAIXO do header; o conteudo nunca passava atras dele, entao */
/* o backdrop-filter so via o fundo chapado. Correcao: #wrapper volta a top:0 e   */
/* reserva a altura do header via padding-top, rolando o conteudo POR TRAS do     */
/* header (igual ao mobile). Especificidade alta p/ vencer o CSS inline do modulo.*/
@media (min-width:769px){
  html body.app.admin.sidebar-glass:not(.page-small) #wrapper{
    top:0 !important;
    bottom:0 !important;
    height:auto !important;
    padding-top:54px !important;
  }
}

/* ==== STUDIUNS - Projetos fixados: submenu + widget Tarefas (24/07/2026) ==== */
#side-menu .studiuns-pin-child{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.studiuns-pin-widget{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.08);}
.studiuns-pin-widget-label{font-size:12px;font-weight:600;opacity:.7;margin-right:4px;white-space:nowrap;}
.studiuns-pin-chips{display:flex;flex-wrap:wrap;gap:8px;}
.studiuns-pin-chip{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:6px 12px;border-radius:999px;font-size:13px;line-height:1;text-decoration:none;background:#fff;border:1px solid rgba(0,0,0,0.12);color:inherit;transition:transform .12s ease, box-shadow .12s ease;}
.studiuns-pin-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.12);}
.studiuns-pin-chip .studiuns-pin-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.studiuns-pin-chip i{opacity:.6;}
html[data-perfex-theme="dark"] .studiuns-pin-widget{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);}
html[data-perfex-theme="dark"] .studiuns-pin-chip{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);}
@media (max-width:768px){.studiuns-pin-widget{gap:6px;padding:8px;}.studiuns-pin-chip{max-width:160px;}}

/* ==== STUDIUNS - Projetos fixados v2: cards premium + sticky (24/07/2026) ==== */
.studiuns-pin-widget{position:sticky;top:0;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 18px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,0.72);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid rgba(0,0,0,0.08);box-shadow:0 6px 18px rgba(0,0,0,0.06);transition:box-shadow .2s ease, background .2s ease;}
.studiuns-pin-widget-label{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;opacity:.55;white-space:nowrap;}
.studiuns-pin-cards{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 auto;}
.studiuns-pin-card{display:flex;align-items:center;gap:10px;min-width:150px;max-width:230px;padding:10px 14px;border-radius:12px;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(0,0,0,0.10);box-shadow:0 1px 2px rgba(0,0,0,0.04);transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;}
.studiuns-pin-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.18);}
.studiuns-pin-card-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:rgba(99,102,241,0.12);color:#6366f1;font-size:13px;}
.studiuns-pin-card-body{display:flex;flex-direction:column;min-width:0;}
.studiuns-pin-card-name{font-size:14px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-perfex-theme="dark"] .studiuns-pin-widget{background:rgba(18,20,36,0.55);border-color:rgba(255,255,255,0.10);box-shadow:0 6px 18px rgba(0,0,0,0.35);}
html[data-perfex-theme="dark"] .studiuns-pin-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);box-shadow:none;}
html[data-perfex-theme="dark"] .studiuns-pin-card:hover{border-color:rgba(255,255,255,0.22);box-shadow:0 8px 18px rgba(0,0,0,0.45);}
html[data-perfex-theme="dark"] .studiuns-pin-card-ico{background:rgba(129,140,248,0.18);color:#a5b4fc;}
@media (max-width:768px){.studiuns-pin-widget{gap:8px;padding:10px 12px;border-radius:12px;}.studiuns-pin-card{min-width:120px;max-width:100%;flex:1 1 140px;padding:8px 10px;}.studiuns-pin-card-ico{width:26px;height:26px;flex-basis:26px;}}

/* ==== STUDIUNS - Alfinete desfixar no submenu (24/07/2026) ==== */
#side-menu li[class*="sub-menu-item-studiuns-pinned-"] .sub-menu-text{display:flex;align-items:center;width:100%;}
#side-menu li[class*="sub-menu-item-studiuns-pinned-"] .studiuns-pin-child{flex:1 1 auto;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.studiuns-pin-unpin{flex:0 0 auto;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;cursor:pointer;opacity:.45;font-size:11px;transition:opacity .15s ease, background .15s ease, color .15s ease;}
.studiuns-pin-unpin:hover{opacity:1;background:rgba(239,68,68,0.12);color:#ef4444;}
.studiuns-pin-unpin:focus-visible{opacity:1;outline:none;background:rgba(239,68,68,0.12);color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,0.45);}
.studiuns-pin-unpin.is-loading{pointer-events:none;opacity:.6;}
html[data-perfex-theme="dark"] .studiuns-pin-unpin:hover,html[data-perfex-theme="dark"] .studiuns-pin-unpin:focus-visible{background:rgba(248,113,113,0.18);color:#fca5a5;}

/* ==== STUDIUNS - Toggle fixar/desfixar junto ao nome (v4) 24/07/2026 ==== */
.studiuns-pin-widget.is-empty{display:none !important;}
.studiuns-pin-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;cursor:pointer;vertical-align:middle;margin-right:8px;opacity:.32;font-size:11px;color:inherit;transition:opacity .15s ease,background .15s ease,color .15s ease;}
.studiuns-pin-toggle:hover{opacity:.85;background:rgba(0,0,0,0.06);}
.studiuns-pin-toggle:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px rgba(99,102,241,0.4);}
.studiuns-pin-toggle.is-pinned{opacity:1;color:#6366f1;}
.studiuns-pin-toggle.is-loading{pointer-events:none;opacity:.6;}
.studiuns-pin-toggle-hd{width:28px;height:28px;font-size:14px;margin-right:10px;border-radius:8px;}
html[data-perfex-theme="dark"] .studiuns-pin-toggle:hover{background:rgba(255,255,255,0.08);}
html[data-perfex-theme="dark"] .studiuns-pin-toggle.is-pinned{color:#a5b4fc;}

/* ==== STUDIUNS - Mobile fix tema Light + widget nao-sticky (25/07/2026) ==== */
@media (max-width:768px){
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass #header{background-color:rgba(255,255,255,0.72)!important;}
  html[data-perfex-theme="light"] body.page-small.sidebar-glass #header{background-color:rgba(255,255,255,0.72)!important;}
  body.page-small .studiuns-pin-widget{position:static!important;top:auto!important;box-shadow:none!important;}
}

/* ==== STUDIUNS - Mobile refino v2 (25/07/2026): bottom-nav Light real ==== */
@media (max-width:768px){
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(255,255,255,0.82)!important;border-top:1px solid rgba(17,24,39,0.10)!important;box-shadow:0 -8px 24px rgba(0,0,0,0.10)!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item{color:rgb(75,85,99)!important;background:transparent!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass .studiuns-bottom-nav .studiuns-bottom-nav-item.is-active{color:rgb(37,99,235)!important;background:rgba(37,99,235,0.10)!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass #header{border-bottom:1px solid rgba(17,24,39,0.08)!important;box-shadow:0 8px 24px rgba(0,0,0,0.08)!important;}
}

/* ==== STUDIUNS - Mobile refino v2 (25/07/2026): faixa fixados horizontal ==== */
@media (max-width:768px){
  body.page-small .studiuns-pin-widget{display:flex!important;flex-direction:column!important;align-items:stretch!important;max-height:none!important;}
  body.page-small .studiuns-pin-cards{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;gap:8px!important;min-width:0!important;padding-bottom:4px;scrollbar-width:thin;}
  body.page-small .studiuns-pin-cards::-webkit-scrollbar{height:4px;}
  body.page-small .studiuns-pin-cards::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.18);border-radius:999px;}
  body.page-small .studiuns-pin-card{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:72vw!important;scroll-snap-align:start;}
}

/* ==== STUDIUNS - Glass v3 translucido + mobile flutuante (25/07/2026) ==== */
@media (min-width:769px){
  html[data-perfex-theme="light"] body.sidebar-glass:not(.page-small) #header{background-color:rgba(255,255,255,0.42)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;backdrop-filter:blur(26px) saturate(150%)!important;border-bottom:1px solid rgba(17,24,39,0.06)!important;box-shadow:0 6px 22px rgba(0,0,0,0.06)!important;}
  html[data-perfex-theme="dark"] body.sidebar-glass:not(.page-small) #header{background-color:rgba(18,20,36,0.34)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;backdrop-filter:blur(26px) saturate(150%)!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;box-shadow:0 6px 22px rgba(0,0,0,0.22)!important;}
  body.sidebar-glass:not(.page-small) #sidebar,body.sidebar-glass:not(.page-small) .setup-menu-wrapper,body.sidebar-glass:not(.page-small) .left-sidebar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
}
@media (max-width:768px){
  body.page-small.sidebar-glass #header{-webkit-backdrop-filter:blur(22px) saturate(140%)!important;backdrop-filter:blur(22px) saturate(140%)!important;border-radius:0!important;}
  body.page-small.sidebar-glass .studiuns-bottom-nav{-webkit-backdrop-filter:blur(22px) saturate(140%)!important;backdrop-filter:blur(22px) saturate(140%)!important;border-radius:0!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass #header{background-color:rgba(255,255,255,0.55)!important;}
  html[data-perfex-theme="dark"] body.page-small.sidebar-glass #header{background-color:rgba(18,20,36,0.50)!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(255,255,255,0.60)!important;}
  html[data-perfex-theme="dark"] body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(18,20,36,0.52)!important;}
  body.page-small.sidebar-glass.nav-hide-top #header{transform:translateY(-120%)!important;}
  body.page-small.sidebar-glass.nav-hide-bottom .studiuns-bottom-nav{transform:translateY(120%)!important;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-perfex-theme="light"] body.sidebar-glass #header{background-color:rgba(255,255,255,0.94)!important;}
  html[data-perfex-theme="dark"] body.sidebar-glass #header{background-color:rgba(18,20,36,0.94)!important;}
  html:not([data-perfex-theme="dark"]) body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(255,255,255,0.96)!important;}
  html[data-perfex-theme="dark"] body.page-small.sidebar-glass .studiuns-bottom-nav{background:rgba(18,20,36,0.96)!important;}
}


/* ==== STUDIUNS - Cabecalho mobile: geometria final (26/07/2026) ==== */
@media (max-width:768px){
  body.page-small #header{height:56px!important;min-height:56px!important;padding:0 12px!important;box-sizing:border-box!important;}
  body.page-small #header nav{height:56px!important;}
  body.page-small #header nav > div{display:flex!important;align-items:center!important;column-gap:0!important;height:56px!important;min-height:56px!important;width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;}
  body.page-small #header nav > div > .studiuns-mobile-mailbox,
  body.page-small #header nav > div > .tw-overflow-hidden,
  body.page-small #header nav > div > .mobile-menu{margin:0!important;}
  body.page-small #header nav > div > div.tw-flex-1{margin:0 8px!important;flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center!important;height:56px!important;}
  body.page-small #header nav > div > .studiuns-mobile-avatar{margin:0 0 0 8px!important;}
  body.page-small #header nav > div > .studiuns-mobile-mailbox,
  body.page-small #header nav > div > ul > li > a,
  body.page-small #header nav > div > .studiuns-mobile-avatar{width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;box-sizing:border-box!important;flex-shrink:0!important;}
  body.page-small #header nav > div > .studiuns-mobile-mailbox > span,
  body.page-small #header nav > div > ul > li > a > span{margin:0!important;transform:none!important;}
  body.page-small #header nav > div > .studiuns-mobile-mailbox i,
  body.page-small #header nav > div > .studiuns-mobile-mailbox svg,
  body.page-small #header nav > div > ul > li > a i,
  body.page-small #header nav > div > ul > li > a svg{width:20px!important;height:20px!important;font-size:20px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;vertical-align:middle!important;}
  body.page-small #header nav > div > ul > li{display:flex!important;align-items:center!important;height:40px!important;margin:0!important;padding:0!important;float:none!important;}
  body.page-small #header nav > div > .studiuns-mobile-avatar img,
  body.page-small #header nav > div > ul > li > a img{width:32px!important;height:32px!important;border-radius:50%!important;display:block!important;margin:0!important;flex-shrink:0!important;}
  body.page-small #header #top_search{position:relative!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;margin:0!important;display:flex!important;align-items:center!important;height:38px!important;}
  body.page-small #header #search_input{width:100%!important;height:38px!important;margin:0!important;padding:0 12px 0 36px!important;line-height:normal!important;box-sizing:border-box!important;border-radius:9px!important;}
  body.page-small #header #top_search i.fa-search,
  body.page-small #header #top_search .fa-search{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;width:16px!important;height:16px!important;font-size:15px!important;line-height:1!important;margin:0!important;}
}