/* Aurora — painel: servidor
   Arquivo EXCLUSIVO deste grupo. Carrega depois do kit e antes do
   aurora-legacy-reset.css (que segue sendo a ultima camada antidoto).

   Este painel nao herda o visual do kit "de graca": css/11-refinos.css e
   css/20-panel-console.css pintam #view-servidor com hex cru (header roxo,
   sidebar branca solida, item ativo tonal). Como aqui carregamos DEPOIS com a
   mesma especificidade (#view-servidor ...), vencemos por ordem de cascata —
   sem !important — desde que cada propriedade herdada de la seja REPOSTA
   explicitamente, inclusive os ::before/::after decorativos (content:none).

   Unico hex do arquivo: --srv-on-brand (#fff), texto sobre gradiente roxo —
   mesma excecao que o proprio kit faz em .aur .btn.primary. Todo o resto e token.

   INDICE
   1. Base do escopo
   2. Header (faixa de identidade)
   3. Sidebar + itens de menu (contrato .intranet-menu-item)
   4. Corpo: fim da moldura dupla + ritmo das secoes
   5. Banco de horas: hierarquia do saldo
   6. Formularios: grupos, identidade discreta, rodape
   7. Botoes-ponte (.srv-crosslink)
   8. Listas injetadas por JS
   9. Responsivo
  10. Escuro
*/

/* ========================== 1. BASE DO ESCOPO ========================== */
#view-servidor{
  --srv-on-brand:#fff;
  --srv-rail:2px;
}

/* .shell ja da o gap vertical; a margem legada do header duplicava o respiro */
#view-servidor .intranet-header{ margin-bottom:0 }

#view-servidor .intranet-grid{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:18px;
  align-items:start;
}

/* grid-column:1/-1 dentro de .au-form. A classe legada .servidor-form-field-full
   vive em css/03-dashboard-kanban.css (fora do meu conjunto de escrita): e
   redeclarada aqui para o markup nao depender daquele arquivo. */
#view-servidor .servidor-form-field-full,
#view-servidor .srv-full{ grid-column:1/-1 }

/* ===================== 2. HEADER — FAIXA DE IDENTIDADE ===================== */
/* Deixa de ser um bloco roxo saturado (que so existia por causa do legado, e
   nem esta na allowlist de css/aurora.css) e vira vidro, como o resto do kit.
   O header carrega SO navegacao de sessao — nenhuma acao operacional, porque
   ele desaparece no embed (.embedded-in-shell .intranet-header{display:none}). */
#view-servidor .intranet-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 18px;
  border-radius:20px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  overflow:visible;
}
/* brilho radial e barra-acento do overlay console: fora */
#view-servidor .intranet-header::after,
#view-servidor .intranet-header-brand::before{ content:none }

#view-servidor .intranet-header-brand{ display:flex; align-items:center; gap:13px; min-width:0 }
#view-servidor .intranet-header-logo{
  width:40px; height:40px; flex:none;
  border:none; border-radius:13px;
  display:grid; place-items:center;
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 8px 22px -8px rgba(57,72,32,.6);
}
#view-servidor .intranet-header-title{
  margin:0; font-size:18px; font-weight:750; letter-spacing:-.02em; line-height:1.15;
  color:var(--ink);
}
/* o console transformava o subtitulo em chip translucido; volta a ser texto */
#view-servidor .intranet-header-sub{
  display:block; margin:2px 0 0; padding:0;
  border:none; border-radius:0; background:none;
  font-size:12px; font-weight:500; letter-spacing:normal;
  color:var(--ink-soft);
}
#view-servidor .intranet-header-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
#view-servidor .intranet-header .btn{
  font-size:13px; font-weight:600; border-radius:11px; padding:9px 14px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  transition:.18s;
}
#view-servidor .intranet-header .btn:hover{ background:rgba(92,111,58,.10); transform:translateY(-1px) }
#view-servidor .intranet-header .btn.btn-danger{
  color:var(--err); background:transparent; border-color:var(--line);
}
#view-servidor .intranet-header .btn.btn-danger:hover{ background:rgba(226,58,109,.12); border-color:rgba(226,58,109,.28) }

/* ===================== 3. SIDEBAR + MENU ===================== */
/* .intranet-sidebar / .intranet-menu-item sao CONTRATO, nao decoracao: o
   delegate de js/init/05.js casa em '#view-servidor .intranet-menu-item'.
   Reestilizar pode; renomear nao. */
#view-servidor .intranet-sidebar{
  position:sticky; top:14px;
  padding:8px;
  border-radius:20px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
}
#view-servidor .intranet-sidebar-section{ padding:8px 4px 6px }
#view-servidor .intranet-sidebar-section + .intranet-sidebar-section{
  margin-top:4px; padding-top:12px; border-top:1px solid var(--line);
}
#view-servidor .intranet-sidebar-label{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.85;
  margin:0 0 7px; padding-left:10px;
}

#view-servidor .intranet-menu-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  margin-bottom:3px; padding:9px 12px;
  border:1px solid transparent; border-radius:13px;
  background:transparent;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-soft);
  text-align:left; cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease;
  box-shadow:none;
}
/* bolinha decorativa do legado: substituida pelo icone lucide, que ja e o sinal */
#view-servidor .intranet-menu-item::before{ content:none }
#view-servidor .intranet-menu-item > i,
#view-servidor .intranet-menu-item > svg{ width:17px; height:17px; flex:none; opacity:.9 }
#view-servidor .intranet-menu-item:hover:not(:disabled){
  background:rgba(92,111,58,.10); color:var(--brand); transform:translateX(1px);
}
#view-servidor .intranet-menu-item:disabled{ opacity:.5; cursor:not-allowed; transform:none }

/* Ativo = pilula solida de marca (a pilula BRANCA do padrao vale sobre o
   trilho roxo do casco; aqui a superficie e clara e sumiria). */
#view-servidor .intranet-menu-item.is-active{
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(78,98,44,.8);
  transform:none;
}
#view-servidor .intranet-menu-item.is-active > i,
#view-servidor .intranet-menu-item.is-active > svg{ opacity:1 }

/* Espelho de estado: o par acao/historico de um assunto mora em UM item de
   menu, mas o clique do botao-ponte marca o botao do corpo. :has() devolve o
   destaque ao item do assunto. E enhancement: sem :has, .is-active continua
   funcionando no clique direto. */
#view-servidor .intranet-grid:has(#servidor-forms-card:not(.hidden)) #btn-servidor-menu-form,
#view-servidor .intranet-grid:has(#servidor-panel-ferias-form:not(.hidden)) #btn-servidor-menu-ferias-form,
#view-servidor .intranet-grid:has(#servidor-panel-ferias-list:not(.hidden)) #btn-servidor-menu-ferias-form{
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(78,98,44,.8);
}

/* onboarding.js injeta <span class="ob-assigned-badge"> como ultimo filho de
   #btn-servidor-menu-integracoes; garante que ele continue colado a direita. */
#view-servidor #btn-servidor-menu-integracoes > span:last-child{ margin-left:auto }

/* ===================== 4. CORPO ===================== */
/* Fim da moldura dupla: .ubs-main-card ja e vidro com padding. As secoes
   internas deixam de ser um segundo vidro e viram apenas blocos de conteudo.
   (Tambem resolve o defeito de .au-sec nao ter padding nenhum: quem da o
   respiro agora e o card externo.) */
#view-servidor .intranet-main{
  display:flex; flex-direction:column; gap:0; min-width:0;
}
#view-servidor #servidor-main-content > section.glass{
  margin:0; padding:0;
  background:none; border:none; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  display:flex; flex-direction:column; gap:16px;
}
#view-servidor #servidor-main-content > section.glass::after{ content:none }

/* cabecalho de secao: titulo + subtitulo a esquerda, acoes a direita */
#view-servidor #servidor-main-content > section > .au-sec-head:first-child{
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
#view-servidor #servidor-main-content h3{ font-size:17px; font-weight:750; letter-spacing:-.02em }
#view-servidor #servidor-main-content .k-ico{ flex:none }

/* rodape de acao das secoes com formulario */
#view-servidor .srv-footer{
  margin-top:2px; padding-top:14px; border-top:1px solid var(--line);
}
#view-servidor .srv-footer .k-sub{ min-width:0 }

/* ============ 5. BANCO DE HORAS — hierarquia do saldo ============ */
/* O JS (app.servidor.renderSummary) emite 7 .kpi em ordem fixa:
   1 saldo · 2 positivas · 3 negativas · 4 pendentes · 5 aprovados
   6 rejeitados · 7 lancamentos.
   Eram 7 ladrilhos iguais para dois somatorios. Aqui o saldo lidera (bloco
   duplo), positivas/negativas ficam ao lado como suas parcelas e o tramite
   (4-7) vira uma faixa compacta embaixo. Sem tocar no JS. */
#view-servidor #servidor-summary-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
/* Estados sem KPI (loadSummary injeta um unico .au-empty: "Carregando
   resumo...", "Erro ao carregar resumo", "Erro de conexao"). Sem isto o bloco
   cai em 1 das 4 colunas e vira uma tira estreita — e o primeiro estado que
   todo mundo ve ao abrir o painel. */
#view-servidor #servidor-summary-cards > .au-empty{ grid-column:1/-1 }

#view-servidor #servidor-summary-cards > .kpi:first-child{
  grid-column:span 2; grid-row:span 2;
  justify-content:center;
  padding:20px 22px;
  border-color:rgba(92,111,58,.28);
}
#view-servidor #servidor-summary-cards > .kpi:first-child .k-val{
  font-size:26px; /* teto do sistema: numero de KPI nunca passa disso */
}
#view-servidor #servidor-summary-cards > .kpi:first-child .k-bar{ height:9px; margin-top:12px }
#view-servidor #servidor-summary-cards > .kpi:nth-child(2),
#view-servidor #servidor-summary-cards > .kpi:nth-child(3){
  grid-column:span 2; min-height:0; padding:13px 15px;
}
#view-servidor #servidor-summary-cards > .kpi:nth-child(2) .k-val,
#view-servidor #servidor-summary-cards > .kpi:nth-child(3) .k-val{ font-size:20px }
/* faixa de tramite: numero pequeno, ainda com a microvisualizacao (.k-bar) */
#view-servidor #servidor-summary-cards > .kpi:nth-child(n+4){
  min-height:0; padding:12px 14px; gap:6px;
}
#view-servidor #servidor-summary-cards > .kpi:nth-child(n+4) .k-val{ font-size:18px }
#view-servidor #servidor-summary-cards > .kpi:nth-child(n+4) .k-val em{ font-size:10.5px }
#view-servidor #servidor-summary-cards > .kpi:nth-child(n+4) .k-sub{ display:none }
#view-servidor #servidor-summary-cards > .kpi:nth-child(n+4) .k-bar{ height:4px }

/* ============ 6. FORMULARIOS ============ */
/* 19 campos numa folha unica viravam parede. Quatro blocos numerados dao
   ordem de leitura sem precisar de JS de wizard. */
#view-servidor .srv-group{
  display:flex; flex-direction:column; gap:12px;
  padding:0 0 0 16px;
  border-left:var(--srv-rail) solid var(--line);
}
#view-servidor .srv-group + .srv-group{ margin-top:4px }
#view-servidor .srv-group-head{ display:flex; align-items:flex-start; gap:11px }
#view-servidor .srv-group-head h4{
  margin:0; font-size:13px; font-weight:750; letter-spacing:-.01em; color:var(--ink);
}
#view-servidor .srv-group-head .k-sub{ margin-top:2px }
#view-servidor .srv-step{
  width:23px; height:23px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  font-size:12px; font-weight:800;
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));
}

/* Identidade do formulario de ausencia: os 4 campos vem prontos do perfil
   (servidor.js _applyProfileToForm). Continuam editaveis, mas leem como
   confirmacao — nao como 4 caixas brancas a preencher. */
#view-servidor .srv-quiet input{
  background:rgba(92,111,58,.06);
  border-color:transparent;
  font-weight:600;
}
#view-servidor .srv-quiet input:hover{ border-color:var(--line) }
#view-servidor .srv-quiet input:focus{ background:transparent }

/* Perfil: nome e CPF em leitura, com uma unica mencao a origem (RH) */
#view-servidor .srv-idbar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:13px 16px; border-radius:15px;
  background:rgba(92,111,58,.07);
  border:1px solid var(--line);
}
#view-servidor .srv-idcell{ display:flex; flex-direction:column; gap:2px; min-width:0 }
#view-servidor .srv-idlabel{
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft);
}
#view-servidor .srv-idbar .proto{ font-size:14.5px; font-weight:700; color:var(--ink) }
#view-servidor .srv-idbar > .chip{ margin-left:auto; cursor:default }
#view-servidor .srv-idbar > .chip:hover{ transform:none }

/* botao de visualizar anexo: alinhado ao campo de arquivo, largura propria */
#view-servidor #srv-form-anexo-view{ align-self:flex-start }

/* ============ 7. BOTOES-PONTE ============ */
/* Precisam da classe .intranet-menu-item para o delegate global fechar os
   demais paineis — mas nao podem PARECER item de menu. Aqui a aparencia de
   menu e desfeita e a de botao do kit, reposta. */
#view-servidor .intranet-menu-item.srv-crosslink,
#view-servidor .intranet-menu-item.srv-crosslink.is-active{
  width:auto; margin:0;
  padding:9px 14px; border-radius:11px;
  font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  white-space:nowrap; transform:none;
}
#view-servidor .intranet-menu-item.srv-crosslink.primary,
#view-servidor .intranet-menu-item.srv-crosslink.primary.is-active{
  color:var(--srv-on-brand); border-color:transparent;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 10px 24px -8px rgba(78,98,44,.7);
}
#view-servidor .intranet-menu-item.srv-crosslink.soft,
#view-servidor .intranet-menu-item.srv-crosslink.soft.is-active{
  color:var(--brand); background:rgba(92,111,58,.12);
  border:1px solid rgba(92,111,58,.22); box-shadow:none;
}
#view-servidor .intranet-menu-item.srv-crosslink:hover:not(:disabled){ transform:translateY(-1px) }
#view-servidor .intranet-menu-item.srv-crosslink > i,
#view-servidor .intranet-menu-item.srv-crosslink > svg{ width:14px; height:14px; opacity:1 }

/* ============ 8. LISTAS INJETADAS POR JS ============ */
/* os cartoes de lista (contracheques, ferias, formularios) sao .glass criados
   por innerHTML: mantem o vidro, mas com raio menor que a secao. */
#view-servidor #servidor-forms-list > .glass,
#view-servidor #servidor-ferias-list > .glass,
#view-servidor #servidor-contracheques-list > .glass{ border-radius:15px }
#view-servidor #servidor-rendimento-content canvas{ max-width:100% }

/* ============ 9. RESPONSIVO ============ */
@media (max-width:1100px){
  #view-servidor #servidor-summary-cards > .kpi:nth-child(n+4){ grid-column:span 2 }
}
@media (max-width:920px){
  #view-servidor .intranet-grid{ grid-template-columns:1fr }
  #view-servidor .intranet-sidebar{ position:static }
  #view-servidor .intranet-sidebar-section{ padding-bottom:2px }
}
@media (max-width:720px){
  #view-servidor #servidor-summary-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  #view-servidor #servidor-summary-cards > .kpi:first-child,
  #view-servidor #servidor-summary-cards > .kpi:nth-child(2),
  #view-servidor #servidor-summary-cards > .kpi:nth-child(3),
  #view-servidor #servidor-summary-cards > .kpi:nth-child(n+4){ grid-column:span 2; grid-row:auto }
  #view-servidor .srv-group{ padding-left:12px }
  #view-servidor .srv-idbar > .chip{ margin-left:0 }
}

/* ============ 10. ESCURO ============ */
/* css/20-panel-console.css tem um bloco body.theme-dark #view-servidor (1,2,0)
   com superficies solidas escuras; as regras abaixo tem a mesma especificidade
   e carregam depois. NUNCA fundo preto: as superficies vem de var(--glass). */
body.theme-dark #view-servidor .intranet-header,
.aur[data-theme="dark"]#view-servidor .intranet-header{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
}
body.theme-dark #view-servidor .intranet-sidebar,
.aur[data-theme="dark"]#view-servidor .intranet-sidebar{
  background:var(--glass);
  border-color:var(--glass-brd);
  box-shadow:var(--shadow);
}
body.theme-dark #view-servidor .intranet-sidebar-section + .intranet-sidebar-section,
.aur[data-theme="dark"]#view-servidor .intranet-sidebar-section + .intranet-sidebar-section{
  border-top-color:var(--line);
}
body.theme-dark #view-servidor .intranet-sidebar-label,
.aur[data-theme="dark"]#view-servidor .intranet-sidebar-label{ color:var(--ink-soft) }
body.theme-dark #view-servidor .intranet-menu-item,
.aur[data-theme="dark"]#view-servidor .intranet-menu-item{ color:var(--ink-soft); background:transparent }
body.theme-dark #view-servidor .intranet-menu-item:hover:not(:disabled),
.aur[data-theme="dark"]#view-servidor .intranet-menu-item:hover:not(:disabled){
  background:rgba(147,185,80,.14); color:var(--ink);
}
body.theme-dark #view-servidor .intranet-menu-item.is-active,
.aur[data-theme="dark"]#view-servidor .intranet-menu-item.is-active{
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--acc),var(--brand2));
  box-shadow:0 10px 22px -12px rgba(0,0,0,.7);
}
body.theme-dark #view-servidor .intranet-grid:has(#servidor-forms-card:not(.hidden)) #btn-servidor-menu-form,
body.theme-dark #view-servidor .intranet-grid:has(#servidor-panel-ferias-form:not(.hidden)) #btn-servidor-menu-ferias-form,
body.theme-dark #view-servidor .intranet-grid:has(#servidor-panel-ferias-list:not(.hidden)) #btn-servidor-menu-ferias-form,
.aur[data-theme="dark"]#view-servidor .intranet-grid:has(#servidor-forms-card:not(.hidden)) #btn-servidor-menu-form,
.aur[data-theme="dark"]#view-servidor .intranet-grid:has(#servidor-panel-ferias-form:not(.hidden)) #btn-servidor-menu-ferias-form,
.aur[data-theme="dark"]#view-servidor .intranet-grid:has(#servidor-panel-ferias-list:not(.hidden)) #btn-servidor-menu-ferias-form{
  color:var(--srv-on-brand);
  background:linear-gradient(135deg,var(--acc),var(--brand2));
}
body.theme-dark #view-servidor .intranet-header .btn,
.aur[data-theme="dark"]#view-servidor .intranet-header .btn{
  background:transparent; color:var(--ink); border-color:var(--line);
}
body.theme-dark #view-servidor .intranet-header .btn:hover,
.aur[data-theme="dark"]#view-servidor .intranet-header .btn:hover{ background:rgba(147,185,80,.14) }
body.theme-dark #view-servidor .intranet-header .btn.btn-danger,
.aur[data-theme="dark"]#view-servidor .intranet-header .btn.btn-danger{ color:var(--err); background:transparent }
body.theme-dark #view-servidor .srv-quiet input,
.aur[data-theme="dark"]#view-servidor .srv-quiet input{ background:rgba(147,185,80,.10) }
body.theme-dark #view-servidor .srv-idbar,
.aur[data-theme="dark"]#view-servidor .srv-idbar{ background:rgba(147,185,80,.10) }
body.theme-dark #view-servidor .intranet-menu-item.srv-crosslink.soft,
.aur[data-theme="dark"]#view-servidor .intranet-menu-item.srv-crosslink.soft{
  color:var(--brand2); background:rgba(147,185,80,.14);
}