/* ============================================================
   Complementos do admin (sobre o Tabler).
   Apenas badges de status/tipo, cliente novo e a tela de login.
   O layout/cards/tabelas/botões vêm do Tabler.
   ============================================================ */

/* Badges de status/tipo (carregado APÓS o Tabler para sobrepor) */
.badge.s-ATIVA, .badge.s-ATIVO, .badge.s-PAGA { background:#d3f9e0 !important; color:#0f6e56 !important; }
.badge.s-VENCIDA, .badge.s-REJEITADO { background:#ffd9d9 !important; color:#a32d2d !important; }
.badge.s-PENDENTE, .badge.s-SUSPENSA, .badge.s-SUSPENSO { background:#fff3bf !important; color:#854d0e !important; }
.badge.s-CANCELADA, .badge.s-CANCELADO { background:#e9ecef !important; color:#5f6470 !important; }
.badge.s-CONGELADO { background:#d7eafd !important; color:#0b5aa2 !important; }
/* Tickets — status */
.badge.tk-ABERTO             { background:#d7eafd !important; color:#0b5aa2 !important; }
.badge.tk-EM_ANDAMENTO       { background:#fff3bf !important; color:#854d0e !important; }
.badge.tk-AGUARDANDO_CLIENTE { background:#d7f0f3 !important; color:#0a6c78 !important; }
.badge.tk-RESOLVIDO          { background:#d3f9e0 !important; color:#0f6e56 !important; }
.badge.tk-FECHADO            { background:#e9ecef !important; color:#5f6470 !important; }
/* Tickets — prioridade */
.badge.pri-URGENTE { background:#ffd9d9 !important; color:#a32d2d !important; }
.badge.pri-ALTA    { background:#ffe3cf !important; color:#9a4a12 !important; }
.badge.pri-MEDIA   { background:#e6ecff !important; color:#2f44a6 !important; }
.badge.pri-BAIXA   { background:#eef0f3 !important; color:#5f6470 !important; }
/* Tickets — imagens coladas no editor/mensagens não estouram a largura */
.ticket-editor img, .ticket-msg img { max-width:100%; height:auto; border-radius:6px; }
.ticket-editor:focus { outline:2px solid #b9c4ff; }
/* Cartões de permissões (Ver/Gerenciar) no cadastro de usuário */
.perm-group .list-group-item:hover { background:#f8f9fb; }
.perm-group .form-switch { padding-left:0; min-height:auto; }
.perm-group .form-switch .form-check-input { margin-left:0; float:none; cursor:pointer; }

/* ============================================================
   TEMA ESCURO ("visual ICP") — vale quando data-bs-theme="dark"
   (habilitado globalmente no pagehead). Paleta: navy profundo,
   cards escuros, bordas sutis e primário roxo/índigo.
   ============================================================ */
:root { --accent: #5b6cf0; }
:root[data-bs-theme="dark"] {
  --tblr-body-bg: #0b0f17;
  --tblr-body-color: #c2c9d6;
  --tblr-border-color: rgba(255,255,255,.07);
  --tblr-border-color-translucent: rgba(255,255,255,.07);
  --tblr-primary: #5b6cf0;
  --tblr-primary-rgb: 91,108,240;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page,
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .page-body { background:#0b0f17; }

/* Cards / painéis */
[data-bs-theme="dark"] .card {
  background:#141a27;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}
[data-bs-theme="dark"] .card-header { border-bottom-color:rgba(255,255,255,.06); }
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] .h3 { color:#e7ebf3; }
[data-bs-theme="dark"] .text-muted { color:#8b93a7 !important; }
[data-bs-theme="dark"] hr { border-color:rgba(255,255,255,.08); }

/* Sidebar combinando com o fundo */
[data-bs-theme="dark"] .navbar-vertical { background:#0e1320 !important; border-right:1px solid rgba(255,255,255,.06); }

/* Topbar transparente */
[data-bs-theme="dark"] .page-wrapper > .navbar { background:transparent; border-bottom:1px solid rgba(255,255,255,.05); }
[data-bs-theme="dark"] .page-title { color:#e7ebf3; }

/* Tabelas */
[data-bs-theme="dark"] .table { color:#c2c9d6; --tblr-table-bg:transparent; --tblr-table-color:#c2c9d6; }
[data-bs-theme="dark"] .table thead th { color:#8b93a7; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
[data-bs-theme="dark"] .table td,[data-bs-theme="dark"] .table th { border-color:rgba(255,255,255,.06); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background:rgba(255,255,255,.03); color:#e7ebf3; }

/* Inputs / selects / textarea */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background:#0f1421; border-color:rgba(255,255,255,.10); color:#e7ebf3;
}
[data-bs-theme="dark"] .form-control::placeholder { color:#6b7488; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color:#5b6cf0; box-shadow:0 0 0 .2rem rgba(91,108,240,.18); }

/* Cor de destaque por seção: definida em JS conforme o item de menu ativo (--accent). */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-primary:focus {
  background: var(--accent, #5b6cf0) !important; border-color: var(--accent, #5b6cf0) !important; color:#fff;
}
[data-bs-theme="dark"] .btn-primary:hover { filter: brightness(.92); }
/* Texto secundário (cinza) dentro de botão ativo/colorido fica legível (claro) */
.btn-primary .text-muted, .btn-primary small, .btn-primary .small,
.btn-success .text-muted, .btn-success small, .btn-success .small,
.btn-danger .text-muted,  .btn-danger small,  .btn-danger .small {
  color: rgba(255,255,255,.85) !important;
}
/* Garante texto branco no item de menu ativo (qualquer sub-texto) */
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-item.active > .nav-link .nav-link-title,
.navbar-vertical .nav-item.active > .nav-link small,
.navbar-vertical .nav-item.active > .nav-link .text-muted { color: #fff !important; }

/* Botões neutros (sem variante de cor) — chips escuros como na referência */
[data-bs-theme="dark"] .btn:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-outline-warning"]):not([class*="btn-outline-danger"]):not(.nav-link) {
  background:#1a2233; border:1px solid rgba(255,255,255,.08); color:#c2c9d6;
}
[data-bs-theme="dark"] .btn:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not(.nav-link):hover {
  background:#222c41; color:#fff;
}

/* Abas */
[data-bs-theme="dark"] .nav-tabs { border-bottom-color:rgba(255,255,255,.08); }
[data-bs-theme="dark"] .nav-tabs .nav-link { color:#8b93a7; border:0; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color:#fff; background:transparent; border-bottom:2px solid var(--accent, #5b6cf0); }

/* Dropdowns / popovers */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .popover .popover-body,
[data-bs-theme="dark"] .modal-content { background:#141a27; border-color:rgba(255,255,255,.08); color:#c2c9d6; }
[data-bs-theme="dark"] .dropdown-item { color:#c2c9d6; }
[data-bs-theme="dark"] .dropdown-item:hover { background:rgba(255,255,255,.05); color:#fff; }
[data-bs-theme="dark"] .list-group-item { background:transparent; border-color:rgba(255,255,255,.06); color:#c2c9d6; }

/* Topbar: saudação + pílula de sessão no escuro */
[data-bs-theme="dark"] .topbar-user:hover { background:rgba(255,255,255,.06); }
[data-bs-theme="dark"] .topbar-name { color:#e7ebf3; }
[data-bs-theme="dark"] .topbar-pill { background:rgba(91,108,240,.15); color:#aeb7ff; border-color:rgba(91,108,240,.3); }

/* Empty states e textos secundários */
[data-bs-theme="dark"] .empty-title { color:#e7ebf3; }

/* Editor de ticket / blocos claros fixos → escurecer */
[data-bs-theme="dark"] .ticket-editor { background:#0f1421; color:#e7ebf3; }

/* Bolhas da conversa do ticket (claro/escuro) */
.tk-bubble { border-radius:10px; }
.tk-note    { background:#fff8e1; border:1px solid #ffe8a3; }
.tk-admin   { background:#eef3ff; border:1px solid #dbe4ff; }
.tk-cliente { background:#f3f4f6; border:1px solid #e6e7eb; }
[data-bs-theme="dark"] .tk-note    { background:#2a2410; border-color:#4a3f12; color:#e7ebf3; }
[data-bs-theme="dark"] .tk-admin   { background:#151d33; border-color:#27406e; color:#e7ebf3; }
[data-bs-theme="dark"] .tk-cliente { background:#161b26; border-color:rgba(255,255,255,.08); color:#e7ebf3; }

/* Caixas utilitárias claras que aparecem no admin → escurecer no dark */
[data-bs-theme="dark"] .bg-light { background:#161b26 !important; color:#c2c9d6 !important; }

/* Botões de ação por ícone (tamanho ajustado) */
.btn-icon .ti { font-size: 1.15rem; line-height: 1; }
.btn.btn-icon { width: auto; height: auto; min-width: 2rem; padding: .25rem .4rem; }

/* ============================================================
   Texto do admin um pouco maior (legibilidade)
   ============================================================ */
html { font-size: 16.66px; }              /* base do texto do admin (−2%) */
.page-body { font-size: .97rem; }
.table, .card-table { font-size: .95rem; }
.navbar-vertical .nav-item .nav-link { font-size: 15px; }
.form-control, .form-select { font-size: .95rem; }
.small, small { font-size: .85rem; }

/* ============================================================
   Detalhamento de serviços do cliente (painel no hover do ⓘ)
   ============================================================ */
.svc-wrap { display:inline-flex; align-items:center; gap:6px; }
.svc-trigger { cursor:pointer; color:#8b93a7; font-size:16px; line-height:1; }
.svc-trigger:hover { color:#5b6cf0; }
/* Badge vermelho com a quantidade em branco */
.badge.svc-count { background:#e24b4a !important; color:#fff !important; font-weight:700; }
/* Bloco-fonte do conteúdo: fica oculto no DOM (é clonado para o painel flutuante) */
.svc-pop { display:none; }
/* Painel flutuante: fixo, posicionado por JS, ACIMA de tudo (não é cortado por overflow) */
.svc-pop-float {
  position:fixed; z-index:3000; width:236px; display:none;
  background:#fff; color:#2a2f3a; border:1px solid #e6e7eb; border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.28); padding:12px 14px; font-size:13px;
}
.svc-pop-title { font-weight:700; margin-bottom:8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; }
.svc-pop-float .svc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 0; }
.svc-pop-float .dot { display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:5px; }
.svc-pop-float .dot.bg-green{background:#2fb344} .svc-pop-float .dot.bg-yellow{background:#f59f00}
.svc-pop-float .dot.bg-blue{background:#4299e1} .svc-pop-float .dot.bg-secondary{background:#9aa1ad}
/* Tema escuro */
[data-bs-theme="dark"] .svc-pop-float { background:#1a2233; color:#e7ebf3; border-color:rgba(255,255,255,.10); box-shadow:0 16px 44px rgba(0,0,0,.6); }
[data-bs-theme="dark"] .svc-pop-float .svc-pop-title { color:#8b93a7; }
[data-bs-theme="dark"] .svc-pop-float hr { border-color:rgba(255,255,255,.10); }
.badge.t-icp   { background:#d7e9fb !important; color:#0c447c !important; }
.badge.t-linux { background:#e3f3cf !important; color:#27500a !important; }
.badge.b-ativo { background:#d3f9e0 !important; color:#0f6e56 !important; }
.badge.b-inativo { background:#ffd9d9 !important; color:#a32d2d !important; }
.badge.b-novo  { background:#fff3bf !important; color:#854d0e !important; }

/* ============================================================
   Sidebar (estilo agrupado com ícones coloridos)
   ============================================================ */
.navbar-vertical { background: #161b29 !important; border-right: 1px solid rgba(255,255,255,.05); width: 20rem; }
/* desloca o conteúdo de acordo com a sidebar mais larga */
@media (min-width: 992px) {
  .navbar-vertical:not(.navbar-right) ~ .page-wrapper,
  .navbar-vertical:not(.navbar-right) ~ .navbar { margin-inline-start: 20rem; }
}
/* itens de duas palavras em uma linha */
.navbar-vertical .nav-link-title { white-space: nowrap; }
.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand a { color: #fff !important; }

.navbar-vertical .app-nav { padding: 4px 10px 16px; width: 100%; }
.sidebar-section {
  list-style: none; padding: 16px 12px 6px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: #5b6680; font-weight: 700;
}
.navbar-vertical .nav-item .nav-link {
  color: #c3cad9; border-radius: 0; padding: 9px 12px; margin: 2px 0;
  display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: 14px;
}
.navbar-vertical .nav-item .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.navbar-vertical .nav-link-icon { font-size: 18px; width: 22px; display: flex; align-items: center; justify-content: center; }
.navbar-vertical .nav-item.active > .nav-link {
  color: #fff; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
}
/* Remove qualquer indicador/traço (pseudo-elementos) que o tema base adicione no item ativo */
.navbar-vertical .nav-item .nav-link::before,
.navbar-vertical .nav-item .nav-link::after { content: none !important; display: none !important; }
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon { color: #fff !important; }

/* cor do item ATIVO = cor do próprio grupo */
.navbar-vertical .nav-item.active > .nav-link.grp-brand  { background: #fb5e7f; }
.navbar-vertical .nav-item.active > .nav-link.grp-purple { background: #7a6cf0; }
.navbar-vertical .nav-item.active > .nav-link.grp-cyan   { background: #1aa6bd; }
.navbar-vertical .nav-item.active > .nav-link.grp-green  { background: #16a37a; }
.navbar-vertical .nav-item.active > .nav-link.grp-amber  { background: #d98e2b; }
.navbar-vertical .nav-item.active > .nav-link.grp-indigo { background: #4f5bd5; }
.navbar-vertical .nav-item.active > .nav-link.grp-slate  { background: #5a6b7b; }
.navbar-vertical .nav-item.active > .nav-link.grp-rose   { background: #c44d86; }
.navbar-vertical .nav-item.active > .nav-link.grp-teal   { background: #0a9ba8; }
.navbar-vertical .nav-item.active > .nav-link.grp-red    { background: #e8484a; }
.navbar-vertical .nav-item.active > .nav-link.grp-orange { background: #e8590c; }

/* cores dos ícones por área */
.ic-brand  { color: #fb5e7f; }
.ic-purple { color: #9a8cff; }
.ic-cyan   { color: #3bc9db; }
.ic-green  { color: #2fd6a6; }
.ic-amber  { color: #f2a93b; }
.ic-indigo { color: #748ffc; }
.ic-slate  { color: #94a3b8; }
.ic-rose   { color: #ec7bb0; }
.ic-teal   { color: #2bc9d4; }
.ic-red    { color: #ff6b6b; }
.ic-orange { color: #ff922b; }

/* badge "Ativo" na mesma cor do item ativo do menu */
.badge.b-ativo { background: #5a4ad1 !important; color: #fff !important; }

/* ============================================================
   Login (standalone, sem Tabler shell)
   ============================================================ */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(251,94,127,.25), transparent),
              linear-gradient(160deg, #2a0a6e 0%, #14043a 100%); }
.login-card { background:#fff; width:100%; max-width:380px; border-radius:18px; padding:34px 30px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.login-card .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:#2a0a6e; margin-bottom:4px; }
.login-card .brand .dot { width:12px; height:12px; border-radius:50%; background:#fb5e7f; }
.login-card p.sub { margin:0 0 22px; color:#6b7280; font-size:14px; }
.login-alert { background:#ffd9d9; color:#a32d2d; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; }
.login-ok { background:#d3f9e0; color:#0f6e56; padding:10px 14px; border-radius:10px; font-size:13px; margin-bottom:16px; }
/* Login: o card é branco — forçar inputs/labels claros (sobrepondo o tema escuro do painel) */
.login-card .form-label { color:#444b59 !important; font-weight:600; }
.login-card .form-control {
  background:#fff !important; color:#1f2430 !important;
  border:1px solid #d7dbe6 !important; border-radius:10px;
}
.login-card .form-control::placeholder { color:#9aa1ad !important; }
.login-card .form-control:focus { border-color:#5b6cf0 !important; box-shadow:0 0 0 .2rem rgba(91,108,240,.18) !important; }
.login-card .btn-primary { background:#5b6cf0 !important; border-color:#5b6cf0 !important; color:#fff !important; filter:none; }
.login-card .btn-primary:hover { background:#4b56d8 !important; border-color:#4b56d8 !important; }
.login-card .btn:not(.btn-primary) { background:#f1f3f9 !important; color:#444b59 !important; border:1px solid #d7dbe6 !important; }
.login-card .text-muted { color:#6b7280 !important; }

/* ===== Topbar: saudação + sessão ===== */
/* Pílula do contador de sessão */
.topbar-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:#eef2ff; color:#3b53c4;
  border:1px solid #dfe6ff; border-radius:999px;
  padding:5px 12px; font-size:13px; font-weight:600; line-height:1;
  font-variant-numeric: tabular-nums;
}
.topbar-pill .ti { font-size:15px; }
.topbar-pill #sessao-timer { letter-spacing:.5px; }
/* Último minuto: alerta */
.topbar-pill--warn {
  background:#ffe4e6; color:#c0344d; border-color:#ffccd1;
  animation: pillpulse 1s ease-in-out infinite;
}
@keyframes pillpulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* Usuário (avatar + saudação + dropdown) */
.topbar-user {
  display:inline-flex; align-items:center; gap:10px;
  padding:4px 10px 4px 4px; border-radius:999px;
  text-decoration:none; color:inherit; transition:background .15s;
}
.topbar-user:hover { background:#f1f3f9; }
.topbar-avatar {
  width:2.2em; height:2.2em; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7a6cf0,#fb5e7f); color:#fff;
  font-weight:700; font-size:1em; flex:0 0 auto;
}
.topbar-hello { font-size:11px; color:#9aa1ad; }
.topbar-name  { font-size:13px; color:#2a2f3a; }

/* ============================================================
   AJAX (HTMX): spinner no botão da ação + toasts
   ============================================================ */
/* Enquanto a requisição roda, o próprio botão mostra um spinner
   (usa currentColor, então adapta a cor do botão automaticamente). */
.btn.htmx-request { pointer-events:none; opacity:.8; }
.btn.htmx-request::before {
  content:""; display:inline-block; width:13px; height:13px; margin-right:7px;
  vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation: btnspin .6s linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }
/* Indicador genérico para áreas que recarregam via AJAX (hx-indicator) */
.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }

/* Toasts flutuantes (avisos de sucesso/erro das ações) */
.toast-host {
  position:fixed; right:16px; bottom:16px; z-index:1090;
  display:flex; flex-direction:column; gap:10px;
  max-width:calc(100vw - 32px);
}
.app-toast {
  background:#2a3142; color:#fff; padding:11px 15px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:14px; line-height:1.35;
  opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s;
}
.app-toast.is-in { opacity:1; transform:none; }
.app-toast--success { background:#16a37a; }
.app-toast--error   { background:#e14b4b; }
.app-toast--info    { background:#2a3142; }

/* ============================================================
   Responsividade (uso em celular)
   ============================================================ */
@media (max-width: 991.98px) {
  /* Sem sidebar fixa: o menu vira topo retrátil (toggler). */
  .navbar-vertical { width:100%; }
  .navbar-vertical:not(.navbar-right) ~ .page-wrapper,
  .navbar-vertical:not(.navbar-right) ~ .navbar { margin-inline-start:0 !important; }
  .container-xl { padding-left:12px; padding-right:12px; }
  /* Botões de ação em tabela quebram linha em vez de estourar. */
  .btn-list.flex-nowrap { flex-wrap:wrap !important; }
}
@media (max-width: 575.98px) {
  .toast-host { left:12px; right:12px; bottom:12px; }
  .page-title { font-size:1.05rem; }
  /* Abas roláveis na horizontal quando não cabem. */
  .nav-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-tabs .nav-link { white-space:nowrap; }
}