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