/* =========================================================================
 * ESX UI — modernização visual e responsividade (GLPI 11)
 * -------------------------------------------------------------------------
 * Só ADICIONA regras por cima do tema nativo (Tabler) do GLPI — nunca
 * sobrescreve cor de marca nem estrutura. Usa as variáveis CSS do próprio
 * tema (--tblr-*) sempre que possível, pra se adaptar automaticamente se
 * o palette/tema mudar (confirmado via inspeção real da instância em
 * 18/08/2026: tema "midnight", modo escuro, --tblr-body-bg, --tblr-primary
 * -rgb existem de verdade no DOM).
 *
 * v1.1 (19/08/2026): ampliação grande — a v1.0 só tinha ajustes sutis
 * (sombra de card, especificidade de alerta, tabela sticky). Pedido do
 * usuário: "está bem feio, com a interface padrão" — essa versão cobre
 * tokens visuais, tipografia, botões, formulários, badges/status, tabelas,
 * navegação (topbar/abas/breadcrumb/paginação), dropdowns, modais,
 * avatares, scrollbar e dashboards de forma bem mais visível.
 *
 * v1.2 (19/08/2026, mesmo dia): a v1.1 ainda ficou sutil demais ("mudança
 * segura, mas pouco visível" — feedback direto do usuário depois de ver
 * ao vivo). Essa versão usa seletores confirmados por inspeção real da
 * instância (.navbar.topbar, .breadcrumb.breadcrumb-alternate,
 * .grid-stack-item — cards do dashboard, .search-form) pra aplicar cor de
 * destaque, mais espaçamento e mais profundidade de forma bem mais visível
 * — continua tudo aditivo/via variável de tema, mas com muito mais
 * intensidade que a v1.1.
 *
 * v2.0 (19/08/2026, mesmo dia): pedido explícito do usuário — "quero mudar
 * 100% a interface [...] com a paleta de cores da ESX, com o logo [...]
 * nem precisa se parecer com o GLPI mais". Vira a decisão de design da
 * v1.1 de cabeça pra baixo: ali eu dizia "nunca redefine variável --tblr-*"
 * pra ser conservador; agora redefino as variáveis de cor do próprio tema
 * (--tblr-primary, --tblr-body-bg, --tblr-bg-surface, etc.) direto pra
 * paleta da ESX — é o jeito de mais alto impacto de rebrandear TUDO de
 * uma vez (botão, badge, link, estado ativo de menu, foco de campo — tudo
 * já lê dessas variáveis nativamente), continua 100% aditivo (só o NOSSO
 * CSS, carregado por cima do do GLPI, nenhum arquivo do core tocado).
 * Cores extraídas de verdade do arquivo de logo que o usuário mandou
 * (extração por script, não "no olho"): fundo #01081b (navy quase preto),
 * dourado principal #fdca39, dourado claro/hover #ffea3b.
 * Valores atuais confirmados por inspeção ao vivo antes de mudar (tema
 * "midnight" logado): --tblr-primary era rgb(182,195,224) (azul-acinzentado
 * claro), --tblr-body-bg era #000 puro, --tblr-bg-surface praticamente
 * idêntico ao body-bg (cards quase não se destacavam do fundo).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Tokens — variáveis NOSSAS (prefixo --esx-) usadas no resto do
 *    arquivo, mais a paleta de marca extraída do logo.
 * ---------------------------------------------------------------------- */
:root {
  --esx-radius-sm: 8px;
  --esx-radius: 12px;
  --esx-radius-lg: 16px;
  --esx-shadow-sm: 0 1px 3px rgba(0, 0, 0, .25);
  --esx-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  --esx-transition: .15s ease;

  /* Paleta ESX — extraída do logo oficial (script de amostragem de cor,
     19/08/2026), não "achismo visual". */
  --esx-navy-900: #01081b;   /* fundo — igual ao fundo do logo */
  --esx-navy-800: #0a1226;   /* superfície elevada (cards) — visivelmente
                                 mais clara que o fundo, pra dar profundidade
                                 de verdade (o tema padrão usava um tom quase
                                 idêntico ao fundo, cards "sumiam") */
  --esx-navy-700: #141d38;   /* superfície ainda mais elevada (hover, popover) */
  --esx-navy-border: #263056; /* borda/divisor com tom de marca */
  --esx-gold-400: #ffea3b;   /* dourado claro — hover/destaque */
  --esx-gold-500: #fdca39;   /* dourado principal — botão/link/ativo */
  --esx-gold-600: #c98a1d;   /* dourado escuro — gradiente/pressed */
  --esx-ink: #1a1200;        /* texto escuro em cima de fundo dourado */
}

/* -------------------------------------------------------------------------
 * 2. Rebrand de verdade: redefine as variáveis que o TEMA (Tabler/GLPI)
 *    usa em todo lugar. Isso é o que faz botão, badge, link, tab ativa,
 *    anel de foco de campo, etc — tudo que já lê --tblr-primary* — virar
 *    dourado ESX automaticamente, sem precisar reescrever regra por
 *    regra de cada componente.
 * ---------------------------------------------------------------------- */
/* !important em cada propriedade: confirmado ao vivo em 19/08/2026 que o
   GLPI define essas mesmas variáveis num seletor MAIS específico
   (:root[data-glpi-theme="..."], dentro de css_core_palettes.min.css) —
   sem !important, um :root simples nosso perde pra esse seletor mais
   específico mesmo carregando depois, e a cor não muda de verdade
   (confirmado: --tblr-primary-rgb continuava no azul antigo até eu
   adicionar !important, mesmo com --tblr-primary já dourado). */
:root {
  --tblr-primary: var(--esx-gold-500) !important;
  --tblr-primary-rgb: 253, 202, 57 !important;
  --tblr-primary-fg: var(--esx-ink) !important;
  --tblr-primary-darken: var(--esx-gold-600) !important;

  --tblr-body-bg: var(--esx-navy-900) !important;
  --tblr-bg-surface: var(--esx-navy-800) !important;
  --tblr-bg-surface-tertiary: var(--esx-navy-700) !important;
  --tblr-bg-surface-dark: var(--esx-navy-900) !important;
  --tblr-border-color: var(--esx-navy-border) !important;
  --tblr-navbar-color: var(--esx-navy-900) !important;

  --tblr-link-color: var(--esx-gold-400) !important;
  --tblr-link-color-rgb: 255, 234, 59 !important;
}

/* -------------------------------------------------------------------------
 * 2. Tipografia
 * ---------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.card-title {
  letter-spacing: -.01em;
}
a {
  transition: color var(--esx-transition);
}

/* -------------------------------------------------------------------------
 * 3. Scrollbar (Chrome/Edge + Firefox) — detalhe pequeno que muda muito a
 *    sensação de "app moderno" vs "site dos anos 2000".
 * ---------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), .5) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), .4);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), .65);
}

/* -------------------------------------------------------------------------
 * 4. Cards
 * ---------------------------------------------------------------------- */
.card {
  border-radius: var(--esx-radius);
  box-shadow: var(--esx-shadow-sm);
  transition: box-shadow var(--esx-transition), transform var(--esx-transition);
}
.card.card-clickable:hover,
a.card:hover {
  box-shadow: var(--esx-shadow);
  transform: translateY(-1px);
}
.card-header {
  border-top-left-radius: var(--esx-radius);
  border-top-right-radius: var(--esx-radius);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 5. Botões — micro-interação de clique + cantos levemente mais
 *    arredondados + botões-ícone mais "redondos" (comum em UI moderna).
 * ---------------------------------------------------------------------- */
.btn {
  border-radius: var(--esx-radius-sm);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active {
  transform: scale(.97);
}
.btn:hover {
  filter: brightness(1.06);
}
.btn-primary,
.btn.btn-primary {
  box-shadow: 0 2px 8px rgba(var(--tblr-primary-rgb, 32, 107, 196), .35);
}
.btn-icon {
  border-radius: 50%;
}

/* -------------------------------------------------------------------------
 * 6. Formulários — inputs com cantos suaves e foco mais visível (melhora
 *    acessibilidade e sensação de "clicável").
 * ---------------------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control {
  border-radius: var(--esx-radius-sm);
  transition: border-color var(--esx-transition), box-shadow var(--esx-transition);
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb, 32, 107, 196), .2);
}
.form-check-input {
  transition: background-color var(--esx-transition), border-color var(--esx-transition);
}
:focus-visible {
  outline: 2px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), .6);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 7. Badges / status de chamado — pill mais arredondado e com leve
 *    profundidade, sem mudar as cores nativas de cada status.
 * ---------------------------------------------------------------------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
 * 8. Navegação — topbar, abas, breadcrumb, paginação, dropdown, modal.
 * ---------------------------------------------------------------------- */
.navbar {
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}
.nav-tabs .nav-link {
  border-radius: var(--esx-radius-sm) var(--esx-radius-sm) 0 0;
  transition: background-color var(--esx-transition);
}
.nav-tabs .nav-link.active {
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before {
  opacity: .5;
}
.pagination .page-link {
  border-radius: var(--esx-radius-sm);
  margin: 0 2px;
}
.dropdown-menu {
  border-radius: var(--esx-radius);
  box-shadow: var(--esx-shadow);
  overflow: hidden;
}
.dropdown-item {
  transition: background-color var(--esx-transition);
}
.modal-content {
  border-radius: var(--esx-radius-lg);
  box-shadow: var(--esx-shadow);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 9. Avatares — círculo perfeito + leve borda, comum em UI moderna pra
 *    dar sensação de "foto de perfil" mesmo quando é só iniciais.
 * ---------------------------------------------------------------------- */
.avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--tblr-body-bg, #000);
}

/* -------------------------------------------------------------------------
 * 10. Alvos de toque maiores em mobile
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar-nav .nav-link,
  .dropdown-item,
  .search-results td a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
}

/* =========================================================================
 * Avisos "importantes" (ex: banner de manutenção/migração de banco no
 * Dashboard). Especificidade igual/maior que a regra nativa do GLPI (que
 * encadeia .alert.alert-important.alert-warning, 3 classes).
 * ========================================================================= */
.alert.alert-important,
.alert.alert-important.alert-warning,
.alert.alert-important.alert-danger,
.alert.alert-important.alert-info,
.alert.alert-important.alert-success {
  padding: .6rem 1rem !important;
  font-size: .85rem !important;
  align-items: center;
  border-radius: var(--esx-radius-sm) !important;
}
.alert.alert-important .ti {
  font-size: 1.5rem !important;
}
.alert.alert-important ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}
.alert.alert-important li {
  margin-bottom: .15rem;
}
.alert {
  border-radius: var(--esx-radius-sm);
}

/* =========================================================================
 * Tabelas de busca/listagem (.search-results)
 * ========================================================================= */
.search-results {
  font-size: .875rem;
}
.search-results thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--tblr-body-bg, #000);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .03em;
  opacity: .85;
}
.search-results tbody tr {
  transition: background-color var(--esx-transition);
}
.search-results tbody tr:hover td {
  background-color: rgba(var(--tblr-primary-rgb, 32, 107, 196), .10);
}
@media (max-width: 991px) {
  .table-responsive-lg .search-results th:first-child,
  .table-responsive-lg .search-results td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--tblr-body-bg, #000);
  }
}

/* =========================================================================
 * Dashboards
 * ========================================================================= */
.dashboard .card,
[class*="dashboard"] .card {
  overflow: hidden;
}
.dashboard .card-body {
  padding: 1rem;
}

/* =========================================================================
 * Acessibilidade: respeita quem pediu menos animação no sistema.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================================
 * v1.2 — visual mais ousado (seletores confirmados por inspeção ao vivo
 * em 19/08/2026 na instância real).
 * ========================================================================= */

/* ---- Logo (span.glpi-logo — confirmado ao vivo em 19/08/2026): o GLPI
   desenha o logo como IMAGEM DE FUNDO com tamanho "auto" (tamanho natural
   do arquivo) numa caixa fixa de 100×55px. O logo padrão do GLPI cabia
   nessa caixa; o nosso (mais largo, com o subtítulo "Sistemas da
   Informação") ficava cortado, só aparecia o canto. "contain" encolhe o
   logo pra caber inteiro na caixa, mantendo a proporção. ---- */
.glpi-logo {
  background-size: contain !important;
  background-position: center center !important;
}

/* ---- Barra superior (.navbar.topbar): faixa de cor de destaque embaixo,
   dá identidade visual imediata em qualquer tela do sistema. ---- */
.navbar.topbar {
  border-bottom: 3px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), .7);
  background-image: linear-gradient(180deg, rgba(var(--tblr-primary-rgb, 32, 107, 196), .06), transparent 60%);
}

/* ---- Breadcrumb: item atual (a página em que você está) em destaque. ---- */
.breadcrumb.breadcrumb-alternate .breadcrumb-item:last-child {
  font-weight: 700;
  color: rgb(var(--tblr-primary-rgb, 32, 107, 196));
}
.breadcrumb.breadcrumb-alternate {
  font-size: .95rem;
}

/* ---- Cards: mais arredondados, com uma faixa colorida fina no topo do
   cabeçalho — assinatura visual consistente em cards com header. ---- */
.card {
  border-radius: var(--esx-radius-lg);
}
.card.card-clickable:hover,
a.card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  transform: translateY(-2px);
}
.card > .card-header:first-child {
  position: relative;
  border-top-left-radius: var(--esx-radius-lg);
  border-top-right-radius: var(--esx-radius-lg);
}
.card > .card-header:first-child::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--tblr-primary-rgb, 32, 107, 196)), rgba(var(--tblr-primary-rgb, 32, 107, 196), .2));
  border-top-left-radius: var(--esx-radius-lg);
  border-top-right-radius: var(--esx-radius-lg);
}

/* ---- Widgets do Dashboard (.grid-stack-item — confirmado via inspeção
   real): mais respiro, sombra mais presente e leve elevação no hover,
   pra parecer mais "cartão de app" e menos "tabela HTML". ---- */
.grid-stack-item .card {
  border-radius: var(--esx-radius-lg);
  box-shadow: var(--esx-shadow);
  transition: transform var(--esx-transition), box-shadow var(--esx-transition);
}
.grid-stack-item:hover .card {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.grid-stack-item .card-body {
  padding: 1.1rem 1.25rem;
}

/* ---- Caixa de filtro de busca (.search-form — confirmado via inspeção
   real): mais arredondada e com respiro, deixa de parecer uma barra
   colada no resto da página. ---- */
.search-form.card {
  border-radius: var(--esx-radius-lg);
  box-shadow: var(--esx-shadow-sm);
}

/* ---- Botões primários: leve gradiente em vez de cor chapada — dá
   sensação de "botão de app" moderno sem mudar o matiz da cor da marca. ---- */
.btn-primary,
.btn.btn-primary {
  background-image: linear-gradient(135deg, rgb(var(--tblr-primary-rgb, 32, 107, 196)), rgba(var(--tblr-primary-rgb, 32, 107, 196), .78));
  border: none;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(var(--tblr-primary-rgb, 32, 107, 196), .5);
}

/* ---- Tabelas: mais respiro entre linhas + zebra bem sutil, facilita
   acompanhar uma linha longa sem perder a régua visual. ---- */
.search-results td,
.search-results th {
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.search-results tbody tr:nth-child(even) td {
  background-color: rgba(127, 127, 127, .035);
}

/* ---- Badges/status: mais "cheios", com sombra leve pra sensação de
   "etiqueta física" em vez de texto plano colorido. ---- */
.badge {
  padding: .38em .7em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* =========================================================================
 * Painel de chat do WhatsApp (plugin whatsappbot, front/chat.php) — o
 * refinamento específico de cores/bolhas/emoji fica no próprio CSS
 * inline do chat.php (estilo WhatsApp de verdade), mantendo aquele
 * plugin independente deste. Aqui só garante que os cards/botões dele
 * herdam os mesmos tokens acima.
 * ========================================================================= */