/* ZappyX — complemento do AdminLTE 4 (adminlte.min.css, que já traz o Bootstrap 5.3).
   Só o que é do produto; o visual base é o do AdminLTE. Tema claro/escuro por [data-bs-theme]. */

/* Variáveis do tema anterior ainda usadas por telas e por apps.css: apontam para as do Bootstrap,
   então seguem o claro/escuro sem regra própria. */
:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --default-color: var(--bs-body-color);
  --heading-color: var(--bs-emphasis-color);
  --muted-color: var(--bs-secondary-color);
  --light-color: var(--bs-tertiary-color);
  --border-color: var(--bs-border-color);
  --accent-color: var(--bs-primary);
  --primary-color: var(--bs-primary);
  --surface-color: var(--bs-body-bg);
  --background-color: var(--bs-tertiary-bg);
  --contrast-color: #fff;
  --success-color: var(--bs-success);
  --warning-color: var(--bs-warning);
  --danger-color: var(--bs-danger);
  --info-color: var(--bs-info);
  --spacing-md: 1rem;
}

/* AdminLTE põe clearfix (::after) no cabeçalho, corpo e rodapé do card. Em card com d-flex
   (justify-content-between) esse ::after vira um terceiro item e empurra os botões para o meio. */
.card-header[class*="flex"]::after,
.card-body[class*="flex"]::after,
.card-footer[class*="flex"]::after { content: none; }

/* ---------- Menu lateral ---------- */
.zx-brand-image { background: transparent; object-fit: contain; }
/* Títulos de grupo dentro de um submenu (ex.: Configurações › Atendimento) */
.sidebar-menu .nav-treeview > .zx-nav-grupo {
  padding: .6rem 1rem .25rem 2.6rem;
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
}
.sidebar-menu .nav-icon.ph-duotone { font-size: 1.15rem; }

/* ---------- Topo ---------- */
.zx-conta-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--bs-primary); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1;
}
/* avatar genérico das telas (Inbox redefine o seu em inbox.css) */
.zx-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bs-primary); color: #fff; font-weight: 600; font-size: .95rem;
}
.user-menu .user-image.zx-conta-avatar { float: none; margin: 0; }
.user-menu .user-header .zx-conta-avatar-grande {
  width: 5.5rem; height: 5.5rem; font-size: 2.2rem;
  background: rgba(255, 255, 255, .2); border: 3px solid rgba(255, 255, 255, .25);
}
.user-menu .user-header { height: auto; min-height: 175px; }
.zx-org-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.zx-org-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
@media (max-width: 991.98px) { .zx-org-name { max-width: 120px; } }

/* Presença do atendente (topo do painel e listas de atendentes) */
.zx-presenca-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.zx-presenca-rotulo { white-space: nowrap; }
.zx-presenca-ponto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.zx-presenca-ajuda { max-width: 16rem; white-space: normal; }
@media (max-width: 767.98px) { .zx-presenca-rotulo { display: none; } }

/* Logo por tema (login e prévias): variante escura da Personalização no modo escuro */
.zx-logo-escuro { display: none !important; }
[data-bs-theme=dark] .zx-logo-claro { display: none !important; }
[data-bs-theme=dark] .zx-logo-escuro { display: inline-block !important; }

/* ---------- Tema do painel (fundos coloridos do gerador do AdminLTE) ---------- */
/* topo e rodapé com fundo colorido: textos secundários e borda acompanham o texto branco */
.app-header[class*="text-bg-"], .app-header[class*="bg-gradient-"],
.app-footer[class*="text-bg-"], .app-footer[class*="bg-gradient-"] { --bs-border-color: rgba(255, 255, 255, .15); }
.app-footer[class*="text-bg-"] .text-secondary, .app-footer[class*="bg-gradient-"] .text-secondary,
.app-header[class*="text-bg-"] .text-body-secondary, .app-header[class*="bg-gradient-"] .text-body-secondary { color: rgba(255, 255, 255, .75) !important; }

/* ---------- Telas de acesso (login, senha, 2 etapas) ---------- */
/* Painel da marca na cor primária do Tema (--bs-primary), formulário em cartão à direita. */
.zx-auth-body { min-height: 100vh; margin: 0; background: var(--bs-tertiary-bg); }
.zx-auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.zx-auth-hero {
  position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column;
  padding: 3rem clamp(2rem, 5vw, 4.5rem);
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .18), transparent 45%),
    radial-gradient(circle at 10% 95%, rgba(0, 0, 0, .22), transparent 50%),
    linear-gradient(150deg, color-mix(in srgb, var(--bs-primary) 88%, #fff) 0%, var(--bs-primary) 45%, color-mix(in srgb, var(--bs-primary) 70%, #000) 100%);
}
.zx-auth-marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; font-weight: 700; font-size: 1.2rem; }
.zx-auth-marca img { height: 2.25rem; width: auto; max-width: 9rem; object-fit: contain; }
.zx-auth-hero .zx-auth-marca { color: #fff; }
.zx-auth-hero-texto { margin: auto 0; padding: 3rem 0; max-width: 36rem; }
.zx-auth-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; margin-bottom: 1rem; opacity: .85; }
.zx-auth-headline { font-size: clamp(2.2rem, 3.6vw, 3.6rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.zx-auth-lead { font-size: 1.1rem; line-height: 1.6; opacity: .9; margin: 0; }
.zx-auth-destaques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.zx-auth-destaques li {
  display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; border-radius: .75rem;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(6px);
}
.zx-auth-destaques i { font-size: 1.2rem; opacity: .9; margin-bottom: .35rem; }
.zx-auth-destaques strong { font-size: 1.35rem; line-height: 1.1; }
.zx-auth-destaques span { font-size: .85rem; opacity: .85; }

.zx-auth-lado { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem 1.5rem; background: var(--bs-body-bg); }
.zx-auth-cartao {
  width: 100%; max-width: 30rem; padding: 2.75rem 2.75rem 2.25rem; border-radius: 1rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 1rem 3rem rgba(15, 23, 42, .06);
}
.zx-auth-marca-form { display: none; margin-bottom: 1.75rem; color: var(--bs-emphasis-color); }
.zx-auth-rodape { margin: 1.5rem 0 0; font-size: .8rem; color: var(--bs-secondary-color); text-align: center; }
.zx-auth-eyebrow-form { color: var(--bs-primary); margin-bottom: .4rem; opacity: 1; }
[data-bs-theme=dark] .zx-auth-eyebrow-form { color: var(--bs-primary-text-emphasis); }

.auth-card .auth-card-header { margin-bottom: 1.5rem; }
.auth-card .auth-title { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .5rem; }
.auth-card .auth-subtitle { color: var(--bs-secondary-color); margin-bottom: 0; line-height: 1.55; }
.auth-card .auth-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 50%;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-size: 1.35rem;
}
.auth-card .form-group { margin-bottom: 1.15rem; }
.auth-card .form-label { font-weight: 600; }
.auth-card .form-control { padding: .7rem .9rem; background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.auth-card .form-control:focus { background: var(--bs-body-bg); }
.auth-card .input-group > .btn { padding-inline: .9rem; border-color: var(--bs-border-color); }
.auth-card .form-check { margin: 0 0 1.25rem; }
.auth-card .btn-block { display: block; width: 100%; }
.auth-card .zx-auth-botao, .auth-card .btn-block.btn-primary { padding: .75rem; font-weight: 600; border-radius: .5rem; }
.auth-card .auth-footer-text { text-align: center; margin: 1.25rem 0 0; }
.auth-card .auth-link { text-decoration: none; }
.zx-auth-aviso {
  display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; margin-bottom: 1.5rem; border-radius: .6rem;
  font-size: .9rem; line-height: 1.45; color: var(--bs-secondary-color);
  background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle);
}
.zx-auth-aviso i { color: var(--bs-primary); font-size: 1.05rem; }

/* sem painel da marca (página de erro, sem organização) e telas estreitas: só o cartão, com a marca em cima */
.zx-auth-simples { grid-template-columns: 1fr; }
.zx-auth-simples .zx-auth-marca-form { display: inline-flex; }
@media (max-width: 991.98px) {
  .zx-auth-split { grid-template-columns: 1fr; }
  .zx-auth-hero { display: none; }
  .zx-auth-marca-form { display: inline-flex; }
  .zx-auth-lado { background: var(--bs-tertiary-bg); }
}
@media (max-width: 575.98px) {
  .zx-auth-cartao { padding: 2rem 1.35rem 1.75rem; }
  .auth-card .auth-title { font-size: 1.6rem; }
}

/* ---------- Componentes do produto ---------- */
.zx-qr svg { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
.zx-recovery { font-family: var(--bs-font-monospace); font-size: .9rem; }
.d-contents { display: contents; }
.min-w-0 { min-width: 0; }

/* Integrações: cartão largo em duas colunas — configuração à esquerda, teste à direita,
   separados por divisor vertical (vira divisor horizontal abaixo de lg) */
@media (min-width: 992px) {
  .zx-divisor-vertical { border-left: 1px solid var(--bs-border-color); }
}
@media (max-width: 991.98px) {
  .zx-divisor-vertical { border-top: 1px solid var(--bs-border-color); }
}
.zx-destino-teste { max-width: 22rem; }

/* ---------- Telas no padrão AdminLTE ---------- */
/* Cartão principal de cada tela leva a faixa da cor primária no topo (card-primary card-outline do AdminLTE).
   Cartões que já escolhem variante (card-*), os de filtro e os aninhados ficam sem a faixa. */
.app-content > .container-fluid > .card:not([class*="card-"]),
.app-content > .container-fluid > form > .card:not([class*="card-"]),
.app-content > .container-fluid > .row > [class*="col"] > .card:not([class*="card-"]),
.app-content > .container-fluid > .row > [class*="col"] > form > .card:not([class*="card-"]),
.app-content .tab-content > .tab-pane > .card:not([class*="card-"]) {
  border-top: 3px solid var(--bs-primary);
}
/* tabelas dentro de cartão: linha acende ao passar o mouse (table-hover do AdminLTE em todas) */
.card .table:not(.table-borderless) > tbody > tr:hover > * { --bs-table-bg-state: var(--bs-table-hover-bg); }
.card .table > thead > tr > th { font-weight: 600; white-space: nowrap; }
/* indicador (partials/indicador) clicável */
.zx-indicador-link { transition: box-shadow .15s ease; }
.zx-indicador-link:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .14); }
/* cartão de filtros: cabeçalho compacto */
.zx-card-filtros > .card-header { padding-top: .5rem; padding-bottom: .5rem; }

/* Abas no topo de telas irmãs (itens 'tabs' do menu; Super-admin › Configurações) */
.zx-abas-secao, .zx-abas-config { gap: .25rem; flex-wrap: wrap; }
.zx-abas-secao .nav-link, .zx-abas-config .nav-link { padding: .35rem .85rem; }
.zx-abas-secao .nav-link:not(.active), .zx-abas-config .nav-link:not(.active) { color: var(--bs-secondary-color); }
.zx-abas-secao .nav-link:not(.active):hover, .zx-abas-config .nav-link:not(.active):hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }