/* Theme-aware overrides — Athos Panel
 * Elementos que não se adaptam automaticamente ao dark theme (data-bs-theme="dark")
 * quando o usuário ativa o modo escuro via toggle do layout.
 */

/* ==========================================================================
   1. Tabler Icons (.ti) — fallback para garantir que herdem font-family correto
      mesmo se o CDN demorar a carregar.
   ========================================================================== */
i.ti {
  font-family: "tabler-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. Badges "label" (bg-label-*) — backgrounds muito claros do Bootstrap padrão
      ficam ilegíveis no dark mode. Escurecer o fundo e clarear o texto.
      Em LIGHT mode, .badge tem --bs-badge-color:#fff do Bootstrap, que deixa
      o texto invisível sobre fundo claro — corrigir para cor escura.
   ========================================================================== */
.bg-label-primary,
.bg-label-secondary,
.bg-label-success,
.bg-label-danger,
.bg-label-warning,
.bg-label-info,
.bg-label-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

/* LIGHT mode: textos escuros sobre fundos claros */
.bg-label-primary   { color: #696cff !important; background-color: rgba(105, 108, 255, 0.16) !important; }
.bg-label-secondary { color: #6c757d !important; background-color: rgba(108, 117, 125, 0.16) !important; }
.bg-label-success   { color: #28a745 !important; background-color: rgba(40, 167, 69, 0.16) !important; }
.bg-label-danger    { color: #dc3545 !important; background-color: rgba(220, 53, 69, 0.16) !important; }
.bg-label-warning   { color: #b07800 !important; background-color: rgba(255, 171, 0, 0.20) !important; }
.bg-label-info      { color: #0a8aab !important; background-color: rgba(3, 195, 236, 0.16) !important; }
.bg-label-dark      { color: #232a3d !important; background-color: rgba(43, 54, 116, 0.16) !important; }

[data-bs-theme="dark"] .bg-label-primary,
html[data-bs-theme="dark"] .bg-label-primary {
  background-color: rgba(105, 108, 255, 0.16) !important;
  color: #b3b5ff !important;
}
[data-bs-theme="dark"] .bg-label-secondary,
html[data-bs-theme="dark"] .bg-label-secondary {
  background-color: rgba(133, 146, 163, 0.16) !important;
  color: #c5cad3 !important;
}
[data-bs-theme="dark"] .bg-label-success,
html[data-bs-theme="dark"] .bg-label-success {
  background-color: rgba(113, 221, 55, 0.16) !important;
  color: #85e26b !important;
}
[data-bs-theme="dark"] .bg-label-danger,
html[data-bs-theme="dark"] .bg-label-danger {
  background-color: rgba(252, 24, 90, 0.16) !important;
  color: #ff7a9c !important;
}
[data-bs-theme="dark"] .bg-label-warning,
html[data-bs-theme="dark"] .bg-label-warning {
  background-color: rgba(255, 171, 0, 0.16) !important;
  color: #ffc966 !important;
}
[data-bs-theme="dark"] .bg-label-info,
html[data-bs-theme="dark"] .bg-label-info {
  background-color: rgba(3, 195, 236, 0.16) !important;
  color: #6ee0f5 !important;
}
[data-bs-theme="dark"] .bg-label-dark,
html[data-bs-theme="dark"] .bg-label-dark {
  background-color: rgba(43, 54, 116, 0.16) !important;
  color: #b6bce0 !important;
}

/* ==========================================================================
   3. .text-muted fica cinza claro no dark — precisa clarear mais.
   ========================================================================== */
[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-muted {
  color: #a3a4a8 !important;
}

/* ==========================================================================
   4. .text-dark (legado) — em dark mode, "dark" significa escuro, fica invisível.
      .text-dark deve SEMPRE ser tratado como "cor forte" e virar claro.
   ========================================================================== */
[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] a.text-dark,
html[data-bs-theme="dark"] a.text-dark,
[data-bs-theme="dark"] h1.text-dark,
[data-bs-theme="dark"] h2.text-dark,
[data-bs-theme="dark"] h3.text-dark,
[data-bs-theme="dark"] h4.text-dark,
[data-bs-theme="dark"] h5.text-dark,
[data-bs-theme="dark"] h6.text-dark,
html[data-bs-theme="dark"] h1.text-dark,
html[data-bs-theme="dark"] h2.text-dark,
html[data-bs-theme="dark"] h3.text-dark,
html[data-bs-theme="dark"] h4.text-dark,
html[data-bs-theme="dark"] h5.text-dark,
html[data-bs-theme="dark"] h6.text-dark {
  color: #d8d8dc !important;
}

/* ==========================================================================
   5. <code> tags — bg fixo branco incompatível com dark.
   ========================================================================== */
[data-bs-theme="dark"] code,
html[data-bs-theme="dark"] code {
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffd57a;
}

/* ==========================================================================
   6. Tabelas (.table) — algumas variações têm thead claro fixo.
   ========================================================================== */
[data-bs-theme="dark"] .table thead.table-light th,
html[data-bs-theme="dark"] .table thead.table-light th,
[data-bs-theme="dark"] .table > :not(caption) > * > *.table-light,
html[data-bs-theme="dark"] .table > :not(caption) > * > *.table-light {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #d8d8dc !important;
}

/* ==========================================================================
   7. .btn-outline-* com opacity que vira texto ilegível no dark.
   ========================================================================== */
[data-bs-theme="dark"] .btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-primary { color: #b3b5ff; border-color: rgba(105, 108, 255, 0.5); }
[data-bs-theme="dark"] .btn-outline-info,
html[data-bs-theme="dark"] .btn-outline-info { color: #6ee0f5; border-color: rgba(3, 195, 236, 0.5); }
[data-bs-theme="dark"] .btn-outline-success,
html[data-bs-theme="dark"] .btn-outline-success { color: #85e26b; border-color: rgba(113, 221, 55, 0.5); }
[data-bs-theme="dark"] .btn-outline-warning,
html[data-bs-theme="dark"] .btn-outline-warning { color: #ffc966; border-color: rgba(255, 171, 0, 0.5); }
[data-bs-theme="dark"] .btn-outline-danger,
html[data-bs-theme="dark"] .btn-outline-danger { color: #ff7a9c; border-color: rgba(252, 24, 90, 0.5); }
[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-secondary { color: #c5cad3; border-color: rgba(133, 146, 163, 0.5); }

/* ==========================================================================
   8. .ti-xl (tamanho) — usado nos empty states
   ========================================================================== */
.ti-xl { font-size: 3rem !important; }

/* ==========================================================================
   9. .bg-light fixo (auth screens usam) — não acompanha dark.
   ========================================================================== */
[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-light {
  background-color: #2b2c40 !important;
}
/* ==========================================================================
   10. .list-group-item — fix de overflow em listas dentro de cards
   ========================================================================== */
/* Garante que flex containers com filhos flex-grow-1 + text-truncate
   respeitem o tamanho do parent (evita texto vazando para fora do card). */
.list-group-item {
  min-width: 0;
}
.list-group-item > .flex-grow-1,
.list-group-item > div > .flex-grow-1 {
  min-width: 0;
}