@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;
}

/* Fundo da página de login. No modo escuro o Elastic já cuida disso
   (dark.less); no modo claro o padrão do Elastic é branco puro, então
   adicionamos um cinza-azulado bem claro pra dar contraste com o cartão. */
html:not(.dark-mode) body.task-login {
  background: #eef2f7 !important;
}

/* O Elastic não desenha nenhuma caixa ao redor do formulário de login por
   padrão (fica flutuando direto no fundo da página) — adiciona um cartão
   visível em ambos os temas, igual ao .login-card do NuvemGermani. */
#login-form {
  border-radius: 14px !important;
  padding: 36px 32px !important;
}
html.dark-mode #login-form {
  background: #0f1218 !important;
  border: 1px solid #232a38 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}
html:not(.dark-mode) #login-form {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12) !important;
}

.task-login #logo {
  max-height: 70px !important;
}

/* A logo (traço claro) foi feita para fundo escuro; se algum contexto
   renderizar em modo claro, escurece pra continuar visível.
   Nota: no template do Elastic o id="logo" fica direto na tag <img>, não
   num elemento pai — por isso o seletor é "#logo", sem "img" depois. */
html:not(.dark-mode) .task-login #logo {
  filter: brightness(0) invert(0.25);
}

/* 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;
}
.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);
  padding: 0;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}
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 antigo (.fc-button-group, com
   ícones em sprite, feito pro tema Larry) e um em Bootstrap
   (.btn-group.btn-group-toggle, com classes btn/btn-secondary, feito pro
   Elastic). Confirmado inspecionando o HTML real. Esconde só o conjunto
   nativo antigo, mantém o Bootstrap (que já combina com o resto do Elastic). */
#calendar .fc-header-toolbar .fc-left > .fc-button-group,
#calendar .fc-header-toolbar .fc-right > .fc-button-group,
#calendar .fc-header-toolbar .fc-right > .fc-today-button {
  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;
}