/**
 * ATRAY - tema Tabler (Studio 2.0)
 *
 * Carregado em TODAS as telas do Studio (T-630), entre vendor/tabler/tabler.min.css e
 * main.css. A ordem importa: o Tabler é a base, este arquivo ajusta a base para a ATRAY,
 * e o main.css (que vem depois) segue mandando nas telas ainda não migradas.
 *
 * Estratégia de tema: sobrescrever as CSS variables do Tabler (--tblr-*) com as cores da
 * ATRAY, em vez de recompilar o SCSS. Assim o upgrade do @tabler/core é só trocar o arquivo
 * vendorado.
 */

:root {
  /* Azul ATRAY (mesmo --primary do main.css) */
  --tblr-primary: #2563eb;
  --tblr-primary-rgb: 37, 99, 235;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #2563eb;
  --tblr-link-hover-color: #1d4ed8;

  /* Densidade: a Studio é ferramenta de trabalho diário, não landing page. */
  --tblr-body-font-size: 0.875rem;
  --tblr-border-radius: 6px;

  /* Item ativo da navbar: quem desenha o indicador é o Tabler (.nav-item.active::after).
     Aqui só trocamos a cor dele para o azul ATRAY - ver o bloco "Item ativo" abaixo. */
  --tblr-navbar-active-color: #2563eb;
  --tblr-navbar-active-border-color: #2563eb;
  --tblr-navbar-active-bg: rgba(37, 99, 235, 0.1);
}

/* No escuro o azul cheio some no fundo; um tom mais claro mantém o contraste. */
[data-bs-theme="dark"] {
  --tblr-navbar-active-color: #60a5fa;
  --tblr-navbar-active-border-color: #60a5fa;
  --tblr-navbar-active-bg: rgba(96, 165, 250, 0.16);
}

/* Cor de foco/seleção consistente com o azul ATRAY */
.btn-primary {
  --tblr-btn-bg: #2563eb;
  --tblr-btn-border-color: #2563eb;
  --tblr-btn-hover-bg: #1d4ed8;
  --tblr-btn-hover-border-color: #1d4ed8;
  --tblr-btn-active-bg: #1d4ed8;
  --tblr-btn-active-border-color: #1d4ed8;
}

/* ---------------------------------------------------------------------------
 * Botões (T-641)
 *
 * As telas usavam .atray-btn/.atray-btn-primary/.atray-btn-secondary do main.css;
 * agora usam .btn/.btn-primary do Tabler. Duas diferenças do padrão Tabler ficam
 * aqui porque são decisão visual da ATRAY, não estilo de tela:
 *
 * 1. Altura mínima de 42px, para o botão alinhar com input/select (o
 *    --atray-control-min-h do main.css). O padrão do Tabler é mais baixo.
 * 2. No escuro, primário e secundário são BRANCOS com texto preto - é o visual
 *    aprovado hoje (era [data-theme=dark] .atray-btn-primary no main.css). O
 *    padrão do Tabler manteria o azul. .btn-danger e .btn-link ficam de fora.
 * ------------------------------------------------------------------------- */

.btn {
  min-height: 42px;
}
.btn.btn-sm {
  min-height: 34px;
}
/* btn-link é texto, não controle: não segue a altura de input. */
.btn.btn-link {
  min-height: 0;
  padding: 0.25rem 0;
}

[data-bs-theme="dark"] .btn:not(.btn-danger):not(.btn-link) {
  --tblr-btn-bg: #fff;
  --tblr-btn-color: #000;
  --tblr-btn-border-color: rgba(255, 255, 255, 0.3);
  --tblr-btn-hover-bg: #e5e5e5;
  --tblr-btn-hover-color: #000;
  --tblr-btn-hover-border-color: rgba(255, 255, 255, 0.3);
  --tblr-btn-active-bg: #e5e5e5;
  --tblr-btn-active-color: #000;
}

/* Secundário com ênfase de alerta (ex.: Desconectar conta) */
.btn.btn--danger-text {
  color: var(--tblr-danger);
}
[data-bs-theme="dark"] .btn.btn--danger-text {
  --tblr-btn-color: #dc2626;
  --tblr-btn-hover-color: #b91c1c;
}

/* ---------------------------------------------------------------------------
 * Topbar condensed
 * Uma navbar única (decisão do Morris): marca à esquerda, os grupos de navegação do
 * épico T-628 na sequência e as ações da conta à direita. No mobile o menu colapsa
 * sob o hamburger e vira lista vertical.
 * ------------------------------------------------------------------------- */

.atray-navbar-brand-logo {
  height: 26px;
  width: auto;
}

/*
 * [hidden] tem que ganhar dentro da navbar (T-640).
 *
 * O partial nasce com [hidden] no menu e nas ações; quem tira é o layout.js depois de
 * confirmar a sessão. Só que `.navbar-expand-md .navbar-collapse{display:flex!important}` do
 * Tabler tem especificidade maior que o `[hidden]{display:none!important}` do reboot, então no
 * desktop o menu aparecia sozinho - inclusive fora de sessão (login/cadastro) - enquanto as
 * ações da direita continuavam escondidas. Resultado: topbar pela metade, e um estado que
 * dependia da largura da janela. Aqui o [hidden] volta a ser a palavra final nos dois.
 */
.atray-navbar .navbar-collapse[hidden],
.atray-navbar .atray-navbar-actions[hidden] {
  display: none !important;
}

/* Menu principal: um pouco mais compacto que o padrão do Tabler */
.atray-navbar-menu .nav-link {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
}

/* Numa linha só o menu encosta na marca; o respiro vem daqui, não de outra linha. */
@media (min-width: 768px) {
  .atray-navbar-menu {
    margin-left: 0.5rem;
  }
}

/* Colapsado no mobile: a lista ocupa a largura toda, abaixo da linha da marca. */
@media (max-width: 767.98px) {
  .atray-navbar .navbar-collapse {
    flex-basis: 100%;
    margin-top: 0.5rem;
  }
  .atray-navbar-menu {
    width: 100%;
  }
}

/*
 * Item ativo: UM indicador só (T-640).
 *
 * O Tabler já desenha o indicador do item ativo em `.nav-item.active::after` - sublinhado
 * de 2px em `bottom:-.25rem` no desktop, barra lateral de 3px no menu colapsado. A regra
 * antiga daqui desenhava um SEGUNDO sublinhado com `box-shadow: inset 0 -2px 0`, colado na
 * borda do link em vez de -.25rem: os dois apareciam juntos, desalinhados (o "sublinhado
 * duplicado" do relato). Agora só recolorimos o indicador do Tabler via --tblr-navbar-*
 * (ver :root acima) e o layout.js marca o `.nav-item`, que é o gancho que o Tabler espera.
 */
.atray-navbar-menu .nav-item.active > .nav-link {
  color: var(--tblr-navbar-active-color);
}

/* Saldo de créditos no header */
.atray-credits {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tblr-primary);
  background: rgba(var(--tblr-primary-rgb), 0.1);
}
.atray-credits:hover {
  background: rgba(var(--tblr-primary-rgb), 0.18);
  color: var(--tblr-primary);
}

/* O toggle de tema mostra só o ícone do tema que será aplicado no clique. */
.atray-theme-toggle .atray-icon-moon { display: inline-flex; }
.atray-theme-toggle .atray-icon-sun { display: none; }
[data-bs-theme="dark"] .atray-theme-toggle .atray-icon-moon { display: none; }
[data-bs-theme="dark"] .atray-theme-toggle .atray-icon-sun { display: inline-flex; }

/* Badge de mensagens não lidas no item "Conversas" */
.atray-nav-unread {
  margin-left: 0.35rem;
  font-size: 0.6875rem;
  padding: 0.1rem 0.35rem;
}
.atray-nav-unread[hidden] {
  display: none !important;
}

/* Nome + e-mail no primeiro item do menu da conta */
.atray-user-menu-line {
  display: block;
  font-weight: 600;
}
.atray-user-menu-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatar com foto (sobrescreve o quadrado de iniciais) */
.atray-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Barra de breadcrumb
 * O breadcrumb saiu do header (que agora é a navbar) e ganhou uma faixa própria logo
 * abaixo. O conteúdo dela continua vindo de data-breadcrumb (layout.js), sem mudar
 * nenhuma tela.
 * ------------------------------------------------------------------------- */

.atray-breadcrumb-bar {
  flex: 0 0 auto;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
  font-size: 0.875rem;
}
.atray-breadcrumb-bar[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Shell: a navbar é a primeira linha da coluna de conteúdo e não encolhe.
 * ------------------------------------------------------------------------- */

.atray-right > [data-include="partials/topbar.html"] {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * Compatibilidade com as telas ainda não migradas
 *
 * O reboot do Tabler (Bootstrap) muda as margens padrão de título, parágrafo e lista.
 * As telas de hoje foram escritas contra o padrão do browser, então dentro de #main os
 * padrões antigos são restaurados. Isto é ANDAIME: sai junto com a última tela migrada
 * para componentes Tabler (T-631/T-632), e é por isso que está num bloco só.
 * ------------------------------------------------------------------------- */

#main h1 { margin: 0.67em 0; }
#main h2 { margin: 0.83em 0; }
#main h3 { margin: 1em 0; }
#main h4 { margin: 1.33em 0; }
#main h5 { margin: 1.67em 0; }
#main h6 { margin: 2.33em 0; }
#main p { margin: 1em 0; }
#main ul,
#main ol { margin: 1em 0; padding-left: 40px; }
#main dl { margin: 1em 0; }

/* ---------------------------------------------------------------------------
 * Gráfico de barras em CSS puro
 * A POC não carrega ApexCharts: a CSP só libera script de cdnjs e o objetivo aqui é
 * aprovar a direção visual, não a biblioteca de gráfico.
 * ------------------------------------------------------------------------- */

.atray-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
}
.atray-bars__bar {
  flex: 1;
  min-width: 0;
  background: var(--tblr-primary);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}
.atray-bars__bar:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Tabelas (T-642 fatia 3)
 *
 * As telas usavam .atray-table-wrap/.atray-table do main.css; agora usam
 * .table-responsive/.table.table-vcenter do Tabler. Duas coisas ficam aqui:
 *
 * 1. O CABEÇALHO. O padrão do Tabler é MAIÚSCULA, 0.75rem e cinza; o da ATRAY é
 *    caixa normal, 14px, escuro, sobre fundo cinza. São 10 telas de listagem
 *    (campanhas, contatos, negócios, equipe, chaves de API, faturamento...) e
 *    mudar isso é decisão de produto, não de migração - então o visual atual foi
 *    preservado, no mesmo espírito da altura de 42px do botão na fatia 1.
 *    Se o Morris preferir o cabeçalho nativo do Tabler, é só apagar este bloco.
 * 2. A ORDENAÇÃO por coluna (th.sortable), que o Tabler não tem. O gancho de JS
 *    de campanhas passou de '.atray-table th.sortable' para '#campaigns-table
 *    th.sortable' no mesmo commit.
 * ------------------------------------------------------------------------- */

.table thead th {
  background: var(--tblr-bg-surface-secondary);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--tblr-body-color);
  padding: 0.6rem 0.75rem;
}
.table th,
.table td {
  padding: 0.6rem 0.75rem;
}

/* Coluna de checkbox: largura fixa, para não roubar espaço das colunas de dado. */
.table th.col-check,
.table td.col-check {
  width: 2.5rem;
  max-width: 2.5rem;
  min-width: 2.5rem;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Ordenação por coluna (campanhas) */
.table th.sortable {
  cursor: pointer;
  user-select: none;
}
.table th.sortable:hover {
  color: var(--tblr-primary);
}
.table th .sort-icon {
  opacity: 0.4;
  margin-left: 0.25rem;
}
.table th.sorted-asc .sort-icon,
.table th.sorted-desc .sort-icon {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Conversas: layout de 3 painéis (lista | thread | contato)
 * Ocupa a altura da janela menos o header, para a thread rolar sozinha - é a tela
 * onde o atendente passa o dia.
 * ------------------------------------------------------------------------- */

.atray-inbox {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  gap: 0;
  height: calc(100vh - var(--atray-header-h, 110px));
  overflow: hidden;
  border-top: 1px solid var(--tblr-border-color);
}

.atray-inbox__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--tblr-bg-surface);
}
.atray-inbox__col + .atray-inbox__col {
  border-left: 1px solid var(--tblr-border-color);
}
.atray-inbox__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.atray-conv {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--tblr-border-color);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.atray-conv:hover {
  background: var(--tblr-bg-surface-secondary);
}
.atray-conv.active {
  background: rgba(var(--tblr-primary-rgb), 0.08);
  box-shadow: inset 3px 0 0 0 var(--tblr-primary);
}
.atray-conv__body {
  min-width: 0;
  flex: 1;
}
.atray-conv__preview {
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bolhas da conversa */
.atray-msg {
  max-width: 68%;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.atray-msg--in {
  background: var(--tblr-bg-surface-secondary);
  border-bottom-left-radius: 3px;
}
.atray-msg--out {
  background: var(--tblr-primary);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 3px;
}
.atray-msg__meta {
  font-size: 0.6875rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}

@media (max-width: 1200px) {
  .atray-inbox { grid-template-columns: 280px minmax(0, 1fr); }
  .atray-inbox__col--contact { display: none; }
}
@media (max-width: 768px) {
  .atray-inbox { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .atray-inbox__col--thread,
  .atray-inbox__col--contact { display: none; }
}

/* ---------------------------------------------------------------------------
 * Formulários — T-642, fatia 5a
 *
 * Os campos agora são primitivos do Tabler: .form-control, .form-select e
 * .form-label. O bloco `.atray-form ...` do main.css (label, input, textarea,
 * select, focus, is-invalid) saiu inteiro — o Tabler faz tudo aquilo.
 *
 * O que sobrou aqui é só o que o Tabler NÃO tem e a regra 6 da T-641 manda
 * preservar, mesmo critério dos 42px do botão (fatia 1) e do cabeçalho de
 * tabela (fatia 3). É também a única razão de o wrapper continuar existindo —
 * agora como o atributo [data-atray-form], não mais como classe de estilo.
 * ------------------------------------------------------------------------ */

/* Cap de largura de campo: marca visual do Studio (o padrão do Tabler é o campo
   ocupar a largura do bloco).
   PENDENTE DE DECISÃO DO MORRIS: duas telas já derrubam o cap na mão
   (`#brand-form` e `.wizard`, no main.css). Se o padrão do Tabler for aceito,
   apagar este bloco resolve as três de uma vez e some com o wrapper. */
[data-atray-form] .form-control,
[data-atray-form] .form-select {
  max-width: 320px;
}
[data-atray-form] textarea.form-control {
  max-width: 100%;
  min-height: 100px;
  resize: vertical;
}

/* Estrutura de campo da ATRAY. Não é o .form-hint do Tabler: aqui o hint fica
   ACIMA do input (entre o label e o campo), e no Tabler ele vem abaixo. */
[data-atray-form] .field {
  margin-bottom: 1rem;
}
[data-atray-form] .field .hint {
  display: block;
  font-size: 12px;
  color: var(--tblr-secondary);
  margin-bottom: 0.35rem;
}
[data-atray-form] .field .hint.hint--error {
  color: var(--tblr-danger);
}