/* ==========================================================================================
   Branding IMFx Tech / "O Funcionário do Mês" — tema ink & ouro (arte oficial IMFx Tech:
   ink #0b1423 com grade de pontos, ouro #d8a954, serifa Playfair Display no título, Inter
   (fonte do próprio Element) no texto corrido).
   ========================================================================================== */

/* Playfair Display (variável 400–900), empacotada em /branding/fonts/ — sem CDN externo. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/branding/fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/branding/fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Painel esquerdo do login (onde fica o selo IMFx Tech) --------------------------------
   Ink com grade de pontos e brilho dourado no topo, em vez do cinza padrão. */
.mx_AuthHeader {
  background-color: #0b1423 !important;
  background-image:
    radial-gradient(90% 55% at 50% 0%, rgba(216, 169, 84, 0.20) 0%, rgba(216, 169, 84, 0) 70%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1.1px, transparent 1.6px),
    linear-gradient(170deg, #122036 0%, #0b1423 55%, #070d17 100%) !important;
  background-size: auto, 18px 18px, auto !important;
}
/* casa com o raio do card (24px) nos cantos do lado esquerdo — seletor mais
   específico p/ vencer a regra do Element */
.mx_AuthPage_modal .mx_AuthHeader,
.mx_AuthPage_modalContent .mx_AuthHeader {
  border-radius: 24px 0 0 24px !important;
}
/* Seletor de idioma: só o VALOR FECHADO fica claro (sobre o painel ink).
   O menu aberto (popup branco) NÃO é tocado — mantém o texto escuro padrão. */
.mx_AuthHeader .mx_Dropdown_input,
.mx_AuthHeader .mx_Dropdown_input .mx_Dropdown_option,
.mx_AuthHeader .mx_Dropdown_input span {
  color: #d2d7e2 !important;
}
.mx_AuthHeader .mx_Dropdown_arrow {
  background-color: #d8a954 !important;
}
/* Logo do produto (balão 3D) com sombra suave sobre o painel ink */
.mx_AuthHeader .mx_AuthHeaderLogo img {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
}

/* ---- Formulários de login/cadastro (card claro) ----------------------------------------
   Botão primário, links e foco em ouro, em vez do preto/azul do Compound. */
.mx_AuthBody {
  --cpd-color-border-focused: #d8a954;
}
.mx_AuthBody button[data-kind="primary"],
.mx_AuthBody .mx_SSOButton_primary,
.mx_AuthBody .mx_Login_submit,
.mx_AuthBody .mx_AccessibleButton_kind_primary {
  background: #d8a954 !important;
  border-color: #d8a954 !important;
  color: #0b1423 !important;
  font-weight: 800;
}
.mx_AuthBody button[data-kind="primary"]:hover,
.mx_AuthBody .mx_SSOButton_primary:hover,
.mx_AuthBody .mx_Login_submit:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover {
  background: #e9d089 !important;
  border-color: #e9d089 !important;
}
.mx_AuthBody a,
.mx_AuthBody .mx_AccessibleButton_kind_link,
.mx_AuthBody .mx_AccessibleButton_kind_link_inline,
.mx_AuthBody .mx_ServerPicker_change,
.mx_AuthBody .mx_ServerPicker_server {
  color: #b98a35 !important;
}
/* a borda visível fica no wrapper .mx_Field (focus-within), não no input */
.mx_AuthBody .mx_Field:focus-within,
.mx_AuthBody .mx_Field_focused,
.mx_AuthBody .mx_Field input:focus {
  border-color: #d8a954 !important;
  outline-color: #d8a954 !important;
}
.mx_AuthBody .mx_Field_focused label,
.mx_AuthBody .mx_Field input:focus + label {
  color: #b98a35 !important;
}

/* ---- Página de boas-vindas (welcome.html): card escuro no estilo da arte -----------------
   O Element sanitiza o HTML embutido (remove class/style), então todo o visual vem daqui,
   por seletores estruturais. .mx_Welcome é o card; o wrapper "glass" fica com tom dourado. */
/* card mais largo que o padrão do Element (~600px): 780px, ou 94% da tela no celular */
.mx_AuthPage_modal:has(.mx_Welcome) {
  width: min(780px, 94vw) !important;
  max-width: none !important;
}
.mx_AuthPage_modalContent:has(.mx_Welcome),
.mx_AuthPage_modalContent > div:has(> .mx_Welcome),
.mx_AuthPage_modalContent .mx_Welcome {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.mx_AuthPage_modalContent > div:has(> .mx_Welcome) {
  background: rgba(216, 169, 84, 0.10) !important;
}
.mx_Welcome {
  background-color: #0b1423 !important;
  background-image:
    radial-gradient(70% 50% at 50% 28%, rgba(216, 169, 84, 0.16) 0%, rgba(216, 169, 84, 0) 70%),
    radial-gradient(rgba(255, 255, 255, 0.075) 1.1px, transparent 1.6px) !important;
  background-size: auto, 18px 18px !important;
  border: 1px solid rgba(216, 169, 84, 0.38);
  box-shadow: 0 0 70px rgba(216, 169, 84, 0.14), 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  color: #eef1f6;
}
.mx_WelcomePage .mx_WelcomePage_body > div {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 0 0;
}
/* eyebrow "BEM-VINDO AO CHAT" */
.mx_WelcomePage .mx_WelcomePage_body h2 {
  font-size: 0.74rem !important;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #d8a954;
  margin: 0 0 4px;
  padding-left: 0.42em; /* compensa o tracking no centro */
}
/* logo do produto (balão com check + selo "AI", fundo transparente) */
.mx_WelcomePage .mx_WelcomePage_body img {
  display: block;
  width: 184px;
  height: 184px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
}
/* título em serifa: "IMFxTech" em degradê dourado */
.mx_WelcomePage .mx_WelcomePage_body h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 2.8rem !important;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #f4f6fa;
  margin: 0 0 14px;
}
.mx_WelcomePage .mx_WelcomePage_body h1 span {
  background: linear-gradient(90deg, #f3dc9a 0%, #d8a954 55%, #b98a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
@media (max-width: 480px) {
  .mx_WelcomePage .mx_WelcomePage_body h1 {
    font-size: 2.2rem !important;
  }
}
/* filete dourado */
.mx_WelcomePage .mx_WelcomePage_body hr {
  width: 260px;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, rgba(216, 169, 84, 0) 0%, #d8a954 50%, rgba(216, 169, 84, 0) 100%);
  margin: 0 auto 26px;
}
.mx_WelcomePage .mx_WelcomePage_body p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #d2d7e2;
  margin: 0 auto 22px;
  max-width: 470px;
}
.mx_WelcomePage .mx_WelcomePage_body p strong {
  color: #e9d089;
  font-weight: 700;
}
/* botão "Entrar" (link para a URL pública + #/login) */
.mx_WelcomePage .mx_WelcomePage_body p a[href$="#/login"] {
  display: inline-block;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  padding: 14px 34px;
  border-radius: 14px;
  background: #d8a954;
  color: #0b1423;
  box-shadow: 0 10px 26px rgba(216, 169, 84, 0.35);
}
.mx_WelcomePage .mx_WelcomePage_body p a[href$="#/login"]:hover {
  background: #e9d089;
}
/* rodapé */
.mx_WelcomePage .mx_WelcomePage_body p:last-child {
  font-size: 0.88rem;
  color: #94a0b8;
  margin: 4px 0 0;
}
.mx_WelcomePage .mx_WelcomePage_body p:last-child a {
  color: #d8a954;
  font-weight: 700;
  text-decoration: none;
}
/* seletor de idioma dentro do card escuro (só o valor fechado; o popup continua claro) */
.mx_Welcome .mx_Dropdown_input,
.mx_Welcome .mx_Dropdown_input span {
  color: #d2d7e2 !important;
}
.mx_Welcome .mx_Dropdown_arrow {
  background-color: #d8a954 !important;
}

/* ---- Acento padrão do app (pós-login): azul escuro no lugar do verde --------------------
   Element v1.12+ migrou boa parte da UI pro Compound, cujos tokens semânticos "action/accent"
   (--cpd-color-text-action-accent e as ~10 variáveis abaixo, usadas em ~66 seletores do bundle:
   botões da Home, links, badges, abas ativas, bordas de foco etc.) apontam pra escala de verde
   fixa do Compound e NÃO são cobertos pelo tema "IMFxTech" (custom_themes do config.json —
   esse é um mecanismo mais antigo, ignorado pelos componentes novos).
   Como o próprio Element declara esses tokens dentro de @layer, e regra fora de @layer sempre
   vence uma regra em @layer independente de ordem/especificidade, basta redeclarar em :root
   sem !important — sem precisar tocar na escala --cpd-color-green-* (que também alimenta
   estados/opacidades que não usamos aqui) nem replicar seletor por seletor.
   Tom escolhido (~#2c4870, entre o ink #0b1423 do fundo e o dourado do tema): escuro o
   bastante pra "azul escuro", mas ainda legível como texto/borda sobre o próprio fundo ink
   (sidebar/timeline) — um tom tão escuro quanto o ink de fundo ficaria invisível como texto. */
:root, [class*="cpd-theme-"] {
  --cpd-color-text-action-accent: #2c4870;
  --cpd-color-text-badge-accent: #1b2c49;
  --cpd-color-bg-accent-rest: #2c4870;
  --cpd-color-bg-accent-hovered: #23395c;
  --cpd-color-bg-accent-pressed: #1b2c49;
  --cpd-color-bg-accent-selected: rgba(44, 72, 112, 0.14);
  --cpd-color-bg-badge-accent: #d7e2f0;
  --cpd-color-border-accent-subtle: #4a6fa5;
  --cpd-color-border-accent-primary: #2c4870;
  --cpd-color-icon-accent-tertiary: #35578a;
  --cpd-color-icon-accent-primary: #2c4870;
}