/* ===== Galvao Informatica - Tela de Login personalizada ===== */

/* Fundo tecnologico: gradiente navy->preto + grid blueprint + brilho radial */
.bg-image {
  background:
    radial-gradient(circle at 50% 35%, rgba(37,99,235,.18) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #00050f 0%, #001129 45%, #000a1a 100%) !important;
  position: relative;
  overflow: hidden;
}
/* Grade de linhas finas (efeito blueprint/circuito) */
.bg-image::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}
/* Brilho pulsante suave no topo */
.bg-image::after {
  content: "";
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(56,189,248,.16) 0%, transparent 65%);
  pointer-events: none;
  animation: galvaoGlow 6s ease-in-out infinite;
}
@keyframes galvaoGlow {
  0%,100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

/* Card de login: escuro translucido, borda azul, glow */
.bg-image .q-card {
  background: rgba(10, 20, 40, .72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59,130,246,.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.08), 0 18px 50px rgba(0,0,0,.6),
              0 0 60px rgba(37,99,235,.15) !important;
  position: relative;
}
/* Linha superior gradiente (detalhe tech) */
.bg-image .q-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1e3a8a, #38bdf8, #1e3a8a);
  border-radius: 16px 16px 0 0;
}

/* Logo da Galvao injetada acima do titulo */
.bg-image .text-center.q-pt-lg::before {
  content: "";
  display: block;
  margin: 4px auto 14px auto;
  width: 110px; height: 110px;
  background: url("/galvao-brand-logo.png") center/contain no-repeat;
  filter: drop-shadow(0 0 20px rgba(56,189,248,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
/* Titulo Galvao Informatica estilizado */
.bg-image .text-h4.ellipsis {
  color: #e8f0ff !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  text-shadow: 0 2px 12px rgba(56,189,248,.3);
}
/* Subtitulo tech abaixo do nome */
.bg-image .text-center.q-pt-lg::after {
  content: "Gestao e Monitoramento de TI";
  display: block;
  margin-top: 6px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #6b8cc4;
}

/* Botao de login na cor da marca */
.bg-image .q-btn.bg-primary,
.bg-image button[type="submit"] {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.4) !important;
}

/* ===== Painel logado: cabecalho azul da Galvao + logo ===== */
.q-header.bg-grey-9 {
  background: linear-gradient(90deg, #00194b 0%, #002d6e 55%, #00194b 100%) !important;
  border-bottom: 2px solid #2563eb;
}
/* Logo da Galvao antes do titulo no cabecalho */
.q-header .q-toolbar__title::before {
  content: "";
  display: inline-block;
  width: 26px; height: 26px;
  margin-right: 10px;
  vertical-align: middle;
  background: url("/galvao-brand-logo.png") center/contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(56,189,248,.5));
}
/* Ajuste fino: alinha o titulo com a logo */
.q-header .q-toolbar__title {
  display: flex;
  align-items: center;
}