/* ===== VARIÁVEIS GLOBAIS ===== */
/* -------------------------------------------------------------------------
   L2SHIELD

   Esta camada guarda os tokens que TODAS as regras antigas do painel usam
   (var(--primary-color), var(--font-display), var(--gray-300)...). Os nomes
   foram mantidos de proposito: repontando os VALORES para a paleta do
   L2Shield, cada regra que ja existia passa a desenhar no tema novo, sem
   precisar reescrever as centenas de regras que dependem delas.

   Os valores espelham os tokens --shield-* do shield-ucp.css, que por sua vez
   espelham o site principal (assets/site/templates/default/css/app.css).
   Ao mudar a cor de destaque, mude nos dois lugares.
   ------------------------------------------------------------------------- */
:root {
  /* Fontes do site principal (declaradas em @font-face no shield-ucp.css) */
  --font-body: "SegoeUI", system-ui, -apple-system, sans-serif;
  --font-display: "StrongSword", "SegoeUI", sans-serif;

  /* Cores principais - accent do site */
  --primary-color: #35c1e0;
  --primary-dark: #070910;
  --secondary-color: #6fd6ee;

  /* Cores de estado */
  --success-color: var(--shield-ok);
  --danger-color: var(--shield-bad);
  --warning-color: #e0a52c;
  --info-color: #35c1e0;

  /* Tons escuros / neutros */
  --gray-50:  var(--shield-bg);
  --gray-100: var(--shield-panel-solid);
  --gray-200: rgba(53,193,224,0.13);
  --gray-300: rgba(255,255,255,0.14);
  --gray-400: #6f7b8c;
  --gray-500: #6f7b8c;
  --gray-600: #a9b3c1;
  --gray-700: #a9b3c1;
  --gray-800: #eef2f7;
  --gray-900: #eef2f7;

  /* Cores de texto */
  --text-color: #a9b3c1;
  --text-muted: #6f7b8c;
  --text-light: #55606f;

  /* Cores de fundo: OPACAS. As translucidas eram o que fazia o conteudo
     brigar com a arte do jogo no fundo. */
  --bg-color: var(--shield-bg);
  --bg-muted: var(--shield-panel-solid);
  --bg-dark:  #070910;

  /* Gradientes: o azulado antigo saiu, agora sao superficies chapadas */
  --gradient-primary: #171c25;
  --gradient-secondary: #171c25;

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.7);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.8);

  /* Bordas: cantos discretos, o tema antigo era muito arredondado */
  --border-radius: 4px;
  --border-radius-lg: 6px;
  --border-radius-xl: 8px;
  --border-color: rgba(255,255,255,0.14);
}

/* ===== ESTILOS GLOBAIS ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  line-height: 1.6;
  background: var(--bg-color);
}

* {
  font-family: var(--font-body);
}

/* Titulos usam a fonte de display do site.

   Os botoes SAIRAM desta lista. O seletor button[type="submit"] tem
   especificidade (0,1,1), maior que .login-button / .sup-cta (0,1,0), e por
   isso vencia o shield-ucp.css: a fonte e o fundo de todo botao de envio do
   painel vinham daqui, ou seja, da camada do tema antigo. A tipografia dos
   botoes agora e definida por classe no shield-ucp.css. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Links */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--secondary-color);
}

/* Os botoes nao sao mais estilizados aqui.

   Este bloco pintava TODO button/input[type="submit"] do painel com o
   gradiente e o raio do tema antigo, e por especificidade (0,1,1) vencia as
   regras por classe do shield-ucp.css. Era o motivo de o botao de login sair
   escuro em vez do laranja do tema, com a fonte errada.

   Todos os submits do painel tem classe (.login-button, .sup-cta, .sup-btn,
   .payment-button, input.default), entao nao ha necessidade de regra
   generica: cada um e estilizado por nome no shield-ucp.css. */

/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fz-md);
  line-height: 1.25;
  color: var(--gray-800);
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Tipografia */
h1, h2, h3, h4, h5, h6 {
  color: var(--gray-900);
  font-weight: 600;
  line-height: 1.25;
}

/* Utilitários */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.font-medium { font-weight: 500 !important; }
.font-normal { font-weight: 400 !important; }

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-info { background-color: var(--info-color) !important; }

/* ===== ESTILOS PARA ÍCONES ===== */
/* Ícones em geral */
.fa,
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands,
[class^="fa-"],
[class*=" fa-"] {
  color: inherit !important;
  opacity: 0.9 !important;
  transition: all 0.2s ease !important;
}

/* Ícones dentro de .box e .lines */
.box h1 i,
.lines i {
  margin-right: 0.75rem !important;
  width: 1.25rem !important;
  text-align: center !important;
  font-size: var(--fz-lg) !important;
}

.box h1 {
  color: var(--gray-900);
}

/* Sem !important de proposito: o layout e as cores finais de .lines vivem na
   camada legado do shield-ucp.css, que carrega depois desta folha. */
.lines > div {
  color: var(--text-color);
}

.lines > div.two {
  background: rgba(255,255,255,0.04);
}

.lines > div span {
  font-weight: 500;
}

/* Ícones em elementos com cores de fundo */
[class*="bg-"] i,
[style*="background"] i {
  opacity: 1 !important;
}

/* Ícones dentro de botões */
/* Sem os seletores por elemento+atributo: eram o resto do bloco de botoes
   removido acima, e a especificidade deles atropelava as regras por classe
   do shield-ucp.css. */
.btn i,
.sup-btn i,
.action-btn i {
  opacity: 1 !important;
}

/* Ícones dentro de cabeçalhos */
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  opacity: 0.9 !important;
}

/* Ícones dentro de links */
a i {
  opacity: 0.9 !important;
}

/* Ícones em estados específicos */
.success i, .rmsg.success i,
.warning i, .rmsg.warning i,
.danger i, .error i, .rmsg.error i,
.info i, .rmsg.info i {
  opacity: 1 !important;
}

/* Ícones na navegação SIDEBAR (não afeta .top-navbar) */
.logado nav i {
  opacity: 0.8 !important;
  margin-right: 0.65rem !important;
  width: 1.1rem !important;
  text-align: center !important;
  font-size: var(--fz-sm) !important;
  transition: all 0.2s ease !important;
}

.logado nav > a:hover i,
.logado nav > span > span:hover i {
  opacity: 1 !important;
}

/* Ícones em linhas */
.lines i {
  margin-right: 0.75rem !important;
  width: 1.25rem !important;
  text-align: center !important;
  opacity: 0.8 !important;
}

.lines div:hover i {
  opacity: 1 !important;
}

/* Ícones em mensagens e alertas */
.rmsg i {
  font-size: var(--fz-lg) !important;
  flex-shrink: 0 !important;
}

/* Ícones em formulários */
.form-group i {
  opacity: 0.8 !important;
}

.form-group:focus-within i {
  opacity: 1 !important;
}

/* Ícones em botões de ação */
.action-links i,
.bottom-links i {
  margin-right: 0.5rem !important;
  font-size: var(--fz-sm) !important;
}

/* Ícones em badges e status */
.badge i, .status i {
  margin-right: 0.25rem !important;
  font-size: var(--fz-sm) !important;
}

/* Ícones em cards */
.card i, .box i {
  opacity: 0.9 !important;
}

/* Ícones em dropdowns */
.dropdown i {
  margin-right: 0.5rem !important;
  width: 1rem !important;
  text-align: center !important;
}

/* Animações para ícones de loading/spinner */
.loading i, .spinner i {
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  from { transform: rotate(0deg) !important; }
  to   { transform: rotate(360deg) !important; }
}

/* ===== FIM ESTILOS GLOBAIS ===== */