/* =============================================================================
   theme.css — IDENTIDADE NORBELL (marinho + âmbar). FASE 1.

   Camada de OVERRIDE aditiva: NÃO edita os CSS originais. Carregada por ÚLTIMO,
   repinta os componentes existentes consumindo os tokens de tokens.css.
   - Mantém TODOS os seletores/classes/estrutura: só troca cor/gradiente/raio/
     sombra/fonte. Nenhuma mudança de layout, JS ou lógica.
   - !important é usado SOMENTE onde o Bootstrap aplica !important (utilitários
     .bg-*). No resto, vence pela ordem de carregamento (mesma especificidade).
   - Rollback: remover o <link> deste arquivo no header.
   ========================================================================== */

/* ---- Tipografia: aplica a fonte da marca (mantém o tamanho atual p/ não
        deslocar layout). Vence typography.css por carregar depois. ---------- */
html, body { font-family: var(--font); }
h1, h2, h3, h4, h5, h6,
.app-topbar__titleMain { font-family: var(--font); letter-spacing: -0.01em; }

/* ---- Fundo geral do app (cinza levemente azulado, sóbrio) ---------------- */
body { background-color: var(--c-bg); }

/* =============================================================================
   SIDEBAR
   ========================================================================== */
.sidebar {
  background: linear-gradient(180deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
}
/* Item ativo: realce translúcido + barra âmbar à esquerda (assinatura) */
.sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 0 var(--c-accent);
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.10); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .sidebar .nav-link:hover { transform: none; }
}
/* Botão "Sair": vermelho sólido (sem gradiente duplo) */
.sidebar .nav-link.sidebar-logout {
  background: var(--c-danger);
  border-color: rgba(255, 255, 255, 0.18);
}
.sidebar .nav-link.sidebar-logout:hover { background: #9a342e; }
/* Avatar com iniciais: marinho sólido */
.user-avatar { background: var(--c-primary); }

/* ---- Divisória discreta entre itens do menu ----------------------------- */
.sidebar nav.nav .nav-link:not(:first-child):not(.sidebar-logout){
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Indicador de seleção deslizante (estilo ATENDIMENTO) --------------- */
/* Um único indicador desliza do item da página anterior até o atual,
   "passando" pelos menus (posicionado por js/sidebar-indicator.js). */
.sidebar nav.nav{ position: relative; }
.sidebar nav.nav .nav-link{ position: relative; z-index: 1; }
.sidebar-nav-indicator{
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  opacity: 0; pointer-events: none;
  transition: top .42s var(--ease-spring), height .42s var(--ease-spring),
              left .42s var(--ease-spring), width .42s var(--ease-spring),
              opacity .2s ease;
}
.sidebar-nav-indicator::before{
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px;
  border-radius: 999px; background: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(192, 138, 45, 0.25);
}
.sidebar-nav-indicator.is-on{ opacity: 1; }
/* Com o indicador ativo, suprime o realce estático do item (evita caixa dupla);
   se o JS não rodar, o realce estático da Fase 1 continua como fallback. */
.sidebar nav.has-indicator .nav-link.active{
  background: transparent; box-shadow: none; font-weight: 700;
}
@media (prefers-reduced-motion: reduce){
  .sidebar-nav-indicator{ transition: opacity .2s ease; }  /* sem deslize */
}

/* =============================================================================
   TOPBAR — badges tokenizados (vidro mantido pelo sidebar.css)
   ========================================================================== */
.app-topbar__title { color: var(--c-primary); }

/* =============================================================================
   CARDS
   ========================================================================== */
.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
}
/* Cabeçalho de TODOS os cards na cor do sistema (marinho), texto branco */
.card-header {
  background: var(--c-primary);
  color: #fff;
  border-bottom: none;
}
.card-header h5, .card-header .card-title, .card-header .mb-0, .card-header i { color: #fff; }

/* Cabeçalho de TODOS os modais na cor do sistema, texto e botão X em branco */
.modal-header { background: var(--c-primary); color: #fff; border-bottom: none; }
.modal-header .modal-title, .modal-header h5, .modal-header i { color: #fff; }
.modal-header .btn-close { filter: brightness(0) invert(1); opacity: .9; }

/* =============================================================================
   STAT-CARDS — fim do arco-íris: cartão BRANCO + borda-esquerda colorida
   ========================================================================== */
.stat-card {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-primary);          /* borda fininha em volta, na cor do card */
  border-left: 6px solid var(--c-primary);     /* borda colorida mais larga à esquerda */
  box-shadow: var(--shadow-sm);
  min-height: 84px;                            /* mais fino */
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce){ .stat-card:hover { transform: none; } }
.stat-card .card-body { color: var(--c-text); }
.stat-card i { color: var(--c-primary); }
.stat-card h3 { color: var(--c-text); }
.stat-card p  { color: var(--c-text-muted); }

.stat-card.success  { background: var(--c-surface); color: var(--c-text); border-color: var(--c-success); }
.stat-card.success i  { color: var(--c-success); }
.stat-card.warning  { background: var(--c-surface); color: var(--c-text); border-color: var(--c-warning); }
.stat-card.warning i  { color: var(--c-warning); }
.stat-card.danger   { background: var(--c-surface); color: var(--c-text); border-color: var(--c-danger); }
.stat-card.danger i   { color: var(--c-danger); }
.stat-card.reopened { background: var(--c-surface); color: var(--c-text); border-color: var(--c-st-reaberto); }
.stat-card.reopened i { color: var(--c-st-reaberto); }

/* Garante legibilidade do número e do rótulo em qualquer variante */
.stat-card h3, .stat-card .card-body { color: var(--c-text); }
.stat-card p { color: var(--c-text-muted); }

/* ---- ticket-card: bordas mapeadas para os tokens ------------------------- */
.ticket-card { border-left-color: var(--c-primary); }
.ticket-card.alta    { border-left-color: var(--c-pri-alta); }
.ticket-card.critica { border-left-color: var(--c-pri-critica); }
.ticket-card.media   { border-left-color: var(--c-pri-media); }
.ticket-card.baixa   { border-left-color: var(--c-pri-baixa); }

/* =============================================================================
   BOTÕES — sólidos, sem gradiente. Hover sutil (translateY).
   ========================================================================== */
/* Bootstrap primary → marinho */
.btn-primary {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  color: #fff;
}
.btn-outline-primary {
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Botões customizados do projeto: trocar gradiente por sólido tokenizado */
.btn-blue, .btn-new-ticket, .btn-ver {
  background: var(--c-primary);
  border: none;
  color: #fff;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn-blue:hover, .btn-new-ticket:hover, .btn-ver:hover {
  background: var(--c-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-new-user, .btn-new-ticket, .btn-pegar {
  border: none;
  color: #fff;
}
.btn-pegar, .btn-new-user {
  background: var(--c-success);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn-pegar:hover, .btn-new-user:hover {
  background: #266a49;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn-blue-outline {
  background: transparent;
  border: 2px solid var(--c-primary);
  color: var(--c-primary);
}
.btn-blue-outline:hover {
  background: var(--c-primary);
  color: #fff;
}

/* ---- Animação de hover em TODOS os botões (sutil/profissional) ---------- */
.btn {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); filter: brightness(1.04); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; filter: none; }
@media (prefers-reduced-motion: reduce){
  .btn { transition: background-color .12s ease, color .12s ease; }
  .btn:hover, .btn:active { transform: none; }
}

/* =============================================================================
   BADGES — recolore os utilitários do Bootstrap (escopo .badge), p/ a paleta
   NORBELL. O JS que gera bg-primary/bg-warning/... continua igual; só a cor
   muda. !important porque o Bootstrap aplica !important em .bg-*.
   ========================================================================== */
.badge.bg-primary   { background-color: var(--c-st-aberto)    !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--c-st-atend)     !important; color: #fff !important; }
.badge.bg-info      { background-color: var(--c-info)         !important; color: #fff !important; }
.badge.bg-success   { background-color: var(--c-success)      !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--c-danger)       !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--c-st-fechado)   !important; color: #fff !important; }

/* =============================================================================
   FORMULÁRIOS — foco âmbar (assinatura da marca)
   ========================================================================== */
.form-control:focus, .form-select:focus {
  border-color: var(--c-accent);
  box-shadow: var(--focus-ring);
}

/* =============================================================================
   LINKS e TABELAS
   ========================================================================== */
a { color: var(--c-primary); }
a:hover { color: var(--c-accent-dark); }
.table-hover tbody tr:hover { background-color: var(--c-surface-2); }

/* =============================================================================
   MURAL DE AVISOS — acento âmbar (on-brand). Usado no dashboard e em avisos.php
   ========================================================================== */
.mural-header{ border-bottom: 2px solid var(--c-accent); }
.mural-list{ max-height: 320px; overflow-y: auto; padding-right: 4px; }
.mural-item{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  margin-bottom: .55rem;
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.mural-item:hover{ box-shadow: var(--shadow-sm); transform: translateX(2px); background: var(--c-surface-2); }
.mural-item__title{ font-weight: 600; color: var(--c-text); line-height: 1.25; margin-bottom: .15rem; }
.mural-item__meta{ color: var(--c-text-muted); font-size: .78rem; }
.mural-item__eye{ flex: 0 0 auto; line-height: 1; }
.mural-item__prazo{ color: var(--c-danger); font-weight: 600; font-size: .78rem; }

/* Item da lista "tickets do dia" (modal do gráfico) */
.tickets-dia-item:hover{ background: var(--c-surface-2); }

/* Campo obrigatório vazio: borda vermelha + chacoalha para chamar atenção */
.is-invalid, .form-control.is-invalid, .form-select.is-invalid{
  border-color: var(--c-danger) !important;
  box-shadow: 0 0 0 .2rem rgba(179, 65, 58, .18) !important;
}

/* Modal que "nasce" do elemento clicado (olho) e volta para ele ao fechar */
.modal-pop.fade .modal-dialog{ transition: none; transform: none; }
.modal-pop.show .modal-content{ animation: modal-pop-in .34s var(--ease-spring) both; }
@keyframes modal-pop-in{ from{ opacity: 0; transform: scale(.04); } to{ opacity: 1; transform: scale(1); } }
@keyframes modal-pop-out{ from{ opacity: 1; transform: scale(1); } to{ opacity: 0; transform: scale(.04); } }
@media (prefers-reduced-motion: reduce){
  .modal-pop.show .modal-content{ animation: none; }
}

/* Entrada animada da timeline do ticket — crescente, em cascata */
@keyframes tl-grow-in{ from{ opacity: 0; transform: translateY(14px) scale(.96); } to{ opacity: 1; transform: none; } }
.tl-grow{ animation: tl-grow-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * .1s); }
@media (prefers-reduced-motion: reduce){ .tl-grow{ animation: none; } }

/* Painel de Informações do ticket: entra em cascata (mesmo efeito da timeline) */
#painel-informacoes .card-body > .mb-3{ animation: tl-grow-in .45s var(--ease-out) both; }
#painel-informacoes .card-body > .mb-3:nth-child(1){ animation-delay: 0s; }
#painel-informacoes .card-body > .mb-3:nth-child(2){ animation-delay: .06s; }
#painel-informacoes .card-body > .mb-3:nth-child(3){ animation-delay: .12s; }
#painel-informacoes .card-body > .mb-3:nth-child(4){ animation-delay: .18s; }
#painel-informacoes .card-body > .mb-3:nth-child(5){ animation-delay: .24s; }
#painel-informacoes .card-body > .mb-3:nth-child(6){ animation-delay: .30s; }
#painel-informacoes .card-body > .mb-3:nth-child(7){ animation-delay: .36s; }
#painel-informacoes .card-body > .mb-3:nth-child(8){ animation-delay: .42s; }
#painel-informacoes .card-body > .mb-3:nth-child(9){ animation-delay: .48s; }
#painel-informacoes .card-body > .mb-3:nth-child(n+10){ animation-delay: .54s; }
@media (prefers-reduced-motion: reduce){ #painel-informacoes .card-body > .mb-3{ animation: none; } }

/* Notificações: texto sempre escuro/legível sobre os fundos claros (corrige dark-mode) */
.notification .notification-title{ color: #14202b !important; font-weight: 700; }
.notification .notification-message{ color: #33424f !important; }
@media (prefers-reduced-motion: reduce){ .mural-item:hover{ transform: none; } }

/* Cabeçalho de card na cor do sistema (marinho) com texto branco */
.card-header-brand{ background: var(--c-primary); color: #fff; border-bottom: none; }
.card-header-brand h5, .card-header-brand .card-title, .card-header-brand .mb-0, .card-header-brand i{ color: #fff; }
.mural-header.card-header-brand{ border-bottom: 2px solid var(--c-accent); } /* mantém o traço âmbar */

/* Visualizador de anexo (somente visualização — sem download) */
.anexo-viewer-body{ position: relative; max-height: 72vh; overflow: auto; background: var(--c-surface-2); border-radius: var(--radius-sm); }
.anexo-viewer-body img{ user-select: none; -webkit-user-drag: none; }
/* "Escudo" transparente sobre a imagem: bloqueia clique-direito/arraste para salvar */
.anexo-viewer-shield{ position: absolute; inset: 0; z-index: 5; }

/* =============================================================================
   AJUSTES ticket.php — painel "Informações" mais estreito e apertado.
   Escopado por #painel-informacoes (só existe no detalhe do ticket). NÃO
   interfere no minimizar/expandir: aquelas regras usam .minimizado/.expandido
   e .main-content.expanded com !important (maior especificidade) e continuam
   vencendo quando ativas. Só vale no estado normal em desktop (>= md).
   ========================================================================== */
@media (min-width: 768px){
  .main-content:not(.expanded) #painel-informacoes{
    flex: 0 0 30%; max-width: 30%; width: 30%;
  }
  .main-content:not(.expanded) #painel-timeline{
    flex: 0 0 70%; max-width: 70%; width: 70%;
  }
}
/* Conteúdo mais compacto */
#painel-informacoes .card-body{ padding: 0.7rem 0.85rem; font-size: 0.9rem; }
#painel-informacoes .card-header{ padding: 0.5rem 0.85rem; }
#painel-informacoes .card-body .mb-3{ margin-bottom: 0.5rem !important; }
#painel-informacoes #card-acoes .card-body{ padding: 0.7rem 0.85rem; }