@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

body, .boxfooter, input, textarea, select, button {
  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif !important;
}

h1, h2, h3, .header-title, #layout-menu .logo {
  font-family: 'Syne', 'Outfit', sans-serif !important;
}

code, pre, .message-part pre {
  font-family: 'JetBrains Mono', monospace !important;
}

/* Cor de destaque igual ao Modoboa/NuvemGermani (o azul-ciano #37beff é o
   padrão do Elastic) — troca só onde a cor aparece, sem reescrever o skin. */
.btn-primary {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.5) !important;
}

.listing li.selected,
.listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background-color: rgba(59, 130, 246, 0.16) !important;
}

#taskmenu a.selected {
  background: #3b82f6 !important;
}

/* ================================================================
   Tela de LOGIN — refinamento NuvemGermani (2026-08-21, versao SEGURA:
   mexe SO em fundo, cartao, logo, saudacao e botao. NAO toca na tabela
   de campos do Elastic (td.title/td.input/inputs) — foi isso que quebrou
   o layout na 1a tentativa. Os campos ficam como o Elastic desenha.
   ================================================================ */

/* fundo: gradiente suave + halo de nuvem (era branco/cinza chapado) */
html:not(.dark-mode) body.task-login {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(59, 130, 246, .07), transparent 60%),
    linear-gradient(160deg, #eef2f7, #dfe7f1) !important;
}
html.dark-mode body.task-login {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(59, 130, 246, .12), transparent 60%),
    linear-gradient(160deg, #0b0f16, #0f1420) !important;
}

/* cartao do formulario */
#login-form {
  border-radius: 18px !important;
  padding: 34px 32px 28px !important;
  max-width: 400px !important;
}
html.dark-mode #login-form {
  background: #161b24 !important;
  border: 1px solid #232a38 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .4) !important;
}
html:not(.dark-mode) #login-form {
  background: #ffffff !important;
  border: 1px solid #e6ebf2 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .06) !important;
}

/* logo NuvemGermani — movida para DENTRO do cartao pelo nuvemgermani.js;
   centralizada com margin auto (sem text-align no form, pra nao afetar a
   tabela de campos do Elastic). */
.task-login #logo {
  display: block !important;
  /* o Elastic usa position:relative + top:16vh pra jogar a logo pra cima do
     formulario; dentro do cartao isso a empurrava pra baixo sobre os campos.
     Zera o deslocamento e coloca a logo no fluxo normal, no topo do cartao. */
  position: static !important;
  top: auto !important;
  max-height: 48px !important;
  margin: 4px auto 16px !important;
  float: none !important;
}
html:not(.dark-mode) .task-login #logo {
  filter: brightness(0) invert(0.22);
}

/* saudacao (inserida pelo nuvemgermani.js como 1o item dentro do cartao) */
#ng-login-welcome {
  text-align: center !important;
  font-size: 14px !important;
  margin: 0 0 22px !important;
  font-weight: 400 !important;
}
html:not(.dark-mode) #ng-login-welcome { color: #64748b !important; }
html.dark-mode #ng-login-welcome { color: #8a97a8 !important; }

/* botao Entrar (dentro de p.formbuttons) — largura total, azul da marca */
.task-login #rcmloginsubmit {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, .28) !important;
  transition: background .15s, box-shadow .15s, transform .05s !important;
}
.task-login #rcmloginsubmit:hover,
.task-login #rcmloginsubmit:focus {
  background: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 10px 24px rgba(59, 130, 246, .36) !important;
}
.task-login #rcmloginsubmit:active { transform: translateY(1px) !important; }
.task-login #login-form .formbuttons { text-align: center !important; margin-top: 10px !important; }

/* Mini-calendário (datepicker) da barra lateral: sem CSS do Elastic ele
   vira um popup solto por cima do conteúdo. Prende ele dentro da própria
   barra lateral, sem sobrepor a área de eventos. */
#datepicker.calendar-datepicker {
  position: relative !important;
  max-width: 100%;
  z-index: 1;
}
#datepicker .ui-datepicker {
  position: relative !important;
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Botão "data" do rodapé (mobile/elastic) abre o mesmo mini-calendário
   dentro de um jQuery UI Dialog — o tema Elastic não traz CSS pra esse
   componente, então ele aparecia sem moldura, sem fundo escurecido e
   solto na tela. Estiliza o essencial: fundo escurecido, caixa centralizada
   com cartão e botão de fechar. */
.ui-widget-overlay {
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
}
/* Sem "overflow"/"max-height" aqui: o Elastic ja estiliza ".ui-dialog" com
   layout flex proprio (altura 100%, rolagem so' dentro de ".ui-dialog-content")
   pra dialogos como o de editar evento. Adicionar overflow:auto aqui tambem
   criava uma SEGUNDA rolagem por fora, resultando em duas barras de rolagem
   empilhadas nesses dialogos. Isto so' cobre a aparencia (cor/borda/sombra)
   pro popup do mini-calendario no rodape mobile, que o Elastic nao estiliza. */
.ui-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  max-width: 90vw;
}
html.dark-mode .ui-dialog {
  background: #21292c;
  border-color: #7c949c;
  color: #c5d1d3;
}
.ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar {
  border-bottom-color: #7c949c;
}
.ui-dialog .ui-dialog-titlebar-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;
  width: 24px;
  height: 24px;
  position: relative;
  opacity: 0.6;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  opacity: 1;
}
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}
.ui-dialog .ui-dialog-titlebar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.ui-dialog .ui-dialog-titlebar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.ui-dialog .ui-dialog-content {
  padding: 18px;
}
.ui-dialog .ui-dialog-buttonpane {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
}
html.dark-mode .ui-dialog .ui-dialog-buttonpane {
  border-top-color: #7c949c;
}
.ui-dialog .ui-dialog-buttonpane button {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #3b82f6;
  color: #fff;
  cursor: pointer;
}

/* Calendário: a barra do FullCalendar sempre teve DOIS conjuntos de botões
   dentro dela ao mesmo tempo — o nativo (.fc-button-group / .fc-today-button,
   com ícones, feito pro tema Larry) e um clone em Bootstrap
   (.btn-group.btn-group-toggle, com classes btn/btn-secondary, feito pro
   Elastic, montado via JS em calendar_ui.js). Em .fc-left (seletor de visão
   Dia/Semana/Mês) o clone Bootstrap fica certo - esconde o nativo duplicado.
   Em .fc-right (anterior/hoje/próximo) e' o INVERSO: o clone Bootstrap sai
   sem o botão "anterior" (texto vazio ao clonar), enquanto o nativo mostra
   os dois corretamente - por isso aqui escondemos o clone Bootstrap e
   deixamos o nativo aparecer. */
#calendar .fc-header-toolbar .fc-left > .fc-button-group,
#calendar .fc-header-toolbar .fc-right > .btn-group.btn-group-toggle {
  display: none !important;
}

/* Reordena visualmente pra "< Hoje >" (o DOM nativo vem como
   grupo[anterior,próximo] + botão "hoje" separado, nessa ordem). Com
   display:contents o grupo "some" como caixa e os botões anterior/próximo
   viram itens diretos do flex, aí dá pra intercalar o "hoje" no meio via
   "order" sem mexer no DOM/JS. */
#calendar .fc-header-toolbar .fc-right {
  display: flex;
  align-items: stretch;
  gap: 0;
}
#calendar .fc-header-toolbar .fc-right > .fc-button-group {
  display: contents;
}
#calendar .fc-header-toolbar .fc-right .fc-prev-button {
  order: 1;
}
#calendar .fc-header-toolbar .fc-right .fc-today-button {
  order: 2;
}
#calendar .fc-header-toolbar .fc-right .fc-next-button {
  order: 3;
}

/* Visual novo pro trio anterior/hoje/próximo: um bloco único, sem gap entre
   os botões (bordas coladas, cantos arredondados só nas pontas), no mesmo
   estilo azul do resto do Elastic - substitui o gradiente cinza antigo do
   FullCalendar (bootstrap 2), que ficava destoando do tema. */
#calendar .fc-header-toolbar .fc-right .fc-prev-button,
#calendar .fc-header-toolbar .fc-right .fc-today-button,
#calendar .fc-header-toolbar .fc-right .fc-next-button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #d1d9e0 !important;
  border-left-width: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  float: none !important;
  color: #334155 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  font-weight: 500;
  position: relative;
}
#calendar .fc-header-toolbar .fc-right .fc-prev-button {
  border-left-width: 1px !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#calendar .fc-header-toolbar .fc-right .fc-next-button {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
#calendar .fc-header-toolbar .fc-right .fc-prev-button:hover,
#calendar .fc-header-toolbar .fc-right .fc-today-button:hover,
#calendar .fc-header-toolbar .fc-right .fc-next-button:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
  z-index: 1;
}

/* Remove o texto do fuso horário (ex: "America/Sao_Paulo") que o
   calendar_ui.js exibe no centro da barra de ferramentas. */
#timezone-display {
  display: none !important;
}

/* O calendar.css copiado do tema antigo (Larry) tem uma regra
   "#calendar { position: absolute; top:0; left:276px; right:0; bottom:0; }"
   pensada pro layout dele — no Elastic isso faz o calendário estourar de
   tamanho, já que o normal do Elastic é "#layout-content > .content" com
   height:100%/flex:1 dentro do espaço certo. Restaura esse comportamento. */
#calendar.content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: 100% !important;
  width: 100% !important;
  flex: 1;
}

/* Remove o botão de alternar para modo escuro do menu — o tema fica
   sempre no modo claro (nuvemgermani.js já força isso a cada carregamento,
   isso só tira a opção de trocar manualmente pela interface). */
#taskmenu a.theme {
  display: none !important;
}

/* Remove o botão "Sobre" do menu lateral. */
#taskmenu a.about {
  display: none !important;
}