/* ================================================
   app-fixes.css
   Correções de compatibilidade dark mode
   Carregado após style.css e o tema ativo para
   ter precedência sobre ambos.
   ================================================ */


/* ── 0. Cards — fundo branco hardcoded no tema ───────────────────────────── */

/* claro-red.css força .card { background-color: #ffffff !important }
   Como este arquivo carrega depois, nosso !important ganha. */
body.dark .card {
  background-color: #24272d !important;
  color: #eaeaec;
}

/* Cabeçalho e rodapé do card */
body.dark .card .card-header,
body.dark .card .card-footer {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

/* Títulos e textos do card header (style.css usa rgba(var(--dark),...))
   No dark --dark = 234,234,236 → já seria claro, mas garantimos */
body.dark .card .card-header h5,
body.dark .card .card-header .card-title,
body.dark .card .card-footer h5 {
  color: #eaeaec !important;
}

body.dark .card .card-header p,
body.dark .card .card-footer p {
  color: rgba(234, 234, 236, 0.65) !important;
}

/* Textos genéricos dentro do card */
body.dark .card .card-body {
  color: #eaeaec;
}

body.dark .card .text-muted {
  color: rgba(234, 234, 236, 0.55) !important;
}


/* ── 0b. Checkboxes no dark ─────────────────────────────────────────────── */

/* Bootstrap form-check-input desmarcado: fundo branco com borda cinza
   — no dark precisa de fundo translúcido escuro */
body.dark .form-check-input:not(:checked) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

body.dark .form-check-input:checked {
  background-color: rgba(var(--primary), 1) !important;
  border-color: rgba(var(--primary), 1) !important;
}

body.dark .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary), 0.25) !important;
}


/* ── 0c. Indicadores / banners contextuais no dark ──────────────────────── */

/* #perm-indicator e qualquer div com bg-light-primary no dark */
body.dark [id$="-indicator"],
body.dark .perm-indicator {
  background: rgba(var(--primary), 0.12) !important;
}

body.dark .bg-light-primary {
  background-color: rgba(var(--primary), 0.15) !important;
  color: rgba(var(--primary), 0.9) !important;
}

body.dark .bg-light-secondary {
  background-color: rgba(var(--secondary), 0.15) !important;
  color: rgba(234, 234, 236, 0.85) !important;
}

body.dark .bg-light-success {
  background-color: rgba(var(--success), 0.15) !important;
  color: rgba(var(--success), 0.9) !important;
}

body.dark .bg-light-danger {
  background-color: rgba(var(--danger), 0.15) !important;
  color: rgba(var(--danger), 0.9) !important;
}

body.dark .bg-light-warning {
  background-color: rgba(var(--warning), 0.15) !important;
  color: rgba(var(--warning), 0.9) !important;
}

body.dark .bg-light-info {
  background-color: rgba(var(--info), 0.15) !important;
  color: rgba(var(--info), 0.9) !important;
}


/* ── 0d. Botões outline no dark ─────────────────────────────────────────── */

body.dark .btn-outline-secondary {
  color: rgba(234, 234, 236, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark .btn-outline-secondary:hover,
body.dark .btn-outline-secondary:focus {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

body.dark .btn-outline-danger {
  color: rgba(var(--danger), 0.9) !important;
  border-color: rgba(var(--danger), 0.5) !important;
}

body.dark .btn-outline-danger:hover {
  background-color: rgba(var(--danger), 0.15) !important;
  color: rgba(var(--danger), 1) !important;
}

body.dark .btn-outline-primary {
  color: rgba(var(--primary), 1) !important;
  border-color: rgba(var(--primary), 0.6) !important;
}

body.dark .btn-outline-primary:hover {
  background-color: rgba(var(--primary), 0.15) !important;
  color: rgba(var(--primary), 1) !important;
}


/* ── 0e. List-group (modal de seleção de perfil/usuário) ────────────────── */

body.dark .list-group-item {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.09);
  color: #eaeaec;
}

body.dark .list-group-item-action:hover,
body.dark .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #fff;
}

body.dark .list-group-item.active {
  background-color: rgba(var(--primary), 0.15) !important;
  border-color: rgba(var(--primary), 0.3) !important;
  color: rgba(var(--primary), 1) !important;
}


/* ── 0f. Modais no dark ─────────────────────────────────────────────────── */

body.dark .modal-content {
  background-color: #2a2d35 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #eaeaec;
}

body.dark .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}

body.dark .modal-title {
  color: #eaeaec !important;
}

body.dark .btn-close {
  filter: invert(1) grayscale(1) brightness(1.5);
}


/* ── 0g. Inputs e selects no dark ───────────────────────────────────────── */

body.dark .form-control,
body.dark .form-select {
  background-color: #1e2129 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #eaeaec !important;
}

body.dark .form-control:focus,
body.dark .form-select:focus {
  background-color: #1e2129 !important;
  border-color: rgba(var(--primary), 0.6) !important;
  color: #eaeaec !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary), 0.15) !important;
}

body.dark .form-control::placeholder {
  color: rgba(234, 234, 236, 0.4) !important;
}

body.dark .input-group-text {
  background-color: #1e2129 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(234, 234, 236, 0.6) !important;
}


/* ── 0h. DataTable child rows (linhas expandidas) no dark ──────────────── */

/* tr.child é inserido pelo DataTable após a linha pai quando se chama row.child().show() */
body.dark #projectTable tr.child td,
body.dark table.dataTable tr.child td {
  background-color: #1e2129 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.dark .child-detail-card {
  background-color: #2a2d35;
  color: #eaeaec;
}

body.dark .child-detail-item label {
  color: rgba(234, 234, 236, 0.50) !important;
}

body.dark .child-detail-item span {
  color: #eaeaec !important;
}

body.dark .child-msgs-title {
  color: rgba(234, 234, 236, 0.50) !important;
}

body.dark .app-timeline-box .timeline-content {
  color: #eaeaec;
}

body.dark .app-timeline-box .timeline-content p,
body.dark .app-timeline-box .timeline-content small {
  color: rgba(234, 234, 236, 0.75) !important;
}


/* ── 1. Bootstrap .table-light — fundo e texto no dark ──────────────────── */

/* Thead: Bootstrap hardcoda #f8f9fa — substitui por superfície escura */
body.dark .table-light > thead > tr > th,
body.dark .table-light > thead > tr > td {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #eaeaec !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Tbody: limpa background explícito que Bootstrap injeta via .table-light */
body.dark .table-light > tbody > tr > td,
body.dark .table-light > tbody > tr > th {
  background-color: transparent !important;
  color: #eaeaec !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* BS table-light override na variável raiz do componente */
body.dark .table-light {
  --bs-table-bg: rgba(255, 255, 255, 0.04);
  --bs-table-border-color: rgba(255, 255, 255, 0.10);
  --bs-table-color: #eaeaec;
  color: #eaeaec;
}

/* Template style.css: .table-light thead usa color: rgba(var(--white), 1)
   No dark --white = 34,37,44 (cor escura) → forçamos cor clara */
body.dark .table-light thead tr th {
  color: #eaeaec !important;
}


/* ── 2. Bordas hardcoded do DataTable ────────────────────────────────────── */

/* thead/tfoot: border rgba(0,0,0,0.3) — invisível no dark */
body.dark table.dataTable thead th,
body.dark table.dataTable thead td {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark table.dataTable tfoot th,
body.dark table.dataTable tfoot td {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* Linhas do corpo (classes .row-border e .display) */
body.dark table.dataTable.row-border tbody th,
body.dark table.dataTable.row-border tbody td,
body.dark table.dataTable.display tbody th,
body.dark table.dataTable.display tbody td {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cell-border */
body.dark table.dataTable.cell-border tbody th,
body.dark table.dataTable.cell-border tbody td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ── 3. DataTable stripe — linhas ímpares ────────────────────────────────── */

/* No dark rgba(0,0,0,0.023) escurece ainda mais; substitui por clareamento sutil */
body.dark table.dataTable.stripe > tbody > tr.odd > *,
body.dark table.dataTable.display > tbody > tr.odd > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.04) !important;
}


/* ── 4. DataTable hover ───────────────────────────────────────────────────── */

body.dark table.dataTable.hover > tbody > tr:hover > *,
body.dark table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.07) !important;
}


/* ── 5. DataTable paginate buttons ───────────────────────────────────────── */

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #eaeaec !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  border-color: rgba(var(--primary), 0.8) !important;
  background: rgba(var(--primary), 0.8) !important;
  box-shadow: none !important;
}

body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
}


/* ── 6. DataTable info / length / filter textos ─────────────────────────── */

body.dark .dataTables_wrapper .dataTables_info,
body.dark .dataTables_wrapper .dataTables_length,
body.dark .dataTables_wrapper .dataTables_filter {
  color: #adb5bd;
}

body.dark .dataTables_wrapper .dataTables_length select,
body.dark .dataTables_wrapper .dataTables_filter input {
  background-color: #2c2f36;
  border-color: rgba(255, 255, 255, 0.15);
  color: #eaeaec;
}


/* ── 7. Tabelas genéricas Bootstrap no dark (não-DataTable) ──────────────── */

body.dark .table > :not(caption) > * > * {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #eaeaec;
}

body.dark .table-bordered > :not(caption) > * > * {
  border-color: rgba(255, 255, 255, 0.10);
}

body.dark .table > thead {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}


/* ── 8. Scrollbar da tabela no dark ──────────────────────────────────────── */

body.dark .app-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

body.dark .app-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

body.dark .app-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.30);
}


/* ── 9. WhatsApp — botão com identidade visual da marca ────────────────────── */

.btn-whatsapp {
    background-color: #25D366 !important;
    border-color:     #25D366 !important;
    color:            #fff    !important;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
    background-color: #1db954 !important;
    border-color:     #1db954 !important;
    color:            #fff    !important;
}

.btn-whatsapp:active {
    background-color: #17a348 !important;
    border-color:     #17a348 !important;
    color:            #fff    !important;
}

.btn-whatsapp:disabled,
.btn-whatsapp.disabled {
    background-color: #25D366        !important;
    border-color:     #25D366        !important;
    color:            rgba(255,255,255,.6) !important;
    opacity:          .75;
}

.btn-whatsapp i,
.btn-whatsapp i::before,
.btn-whatsapp [class*="ph"],
.btn-whatsapp [class*="ph"]::before,
.btn-whatsapp [class*="ti"],
.btn-whatsapp [class*="ti"]::before,
.btn-whatsapp svg,
.btn-whatsapp svg * {
    color: #fff !important;
    fill:  #fff !important;
}

/* mantém a mesma cor no dark mode — verde WhatsApp é sempre verde */
body.dark .btn-whatsapp,
body.dark .btn-whatsapp:hover,
body.dark .btn-whatsapp:active {
    background-color: #25D366 !important;
    border-color:     #25D366 !important;
    color:            #fff    !important;
}


/* ── 10. Sidebar — links diretos (sem collapse) usam seta para direita ──────── */

/* O template usa \e9fe (seta ↓) para todos os <a> de nível raiz por padrão.
   Links sem aria-expanded não têm collapse — substituímos pela seta → (\ea00). */
nav .app-nav .main-nav > li:not(.menu-title) > a:not([aria-expanded])::after {
  content: "\ea00";
}

nav .app-nav .main-nav > li:not(.menu-title) > a:not([aria-expanded]) {
  border-bottom: 2px solid var(--bodybg-color) !important;
}


/* ── 11. SweetAlert2 — diálogos menores em toda a aplicação ──────────────────── */

/* Padrão da lib é width:32em (~512px) — grande demais pra confirmações/mensagens
   simples (login, clientes, oportunidades, planos, usuários, WhatsApp). Reduz o
   tamanho padrão em todas as telas; abaixo de 480px aperta ainda mais. */
.swal2-popup {
  width: 24em !important;
  padding: 1.25rem !important;
}
.swal2-title {
  font-size: 1.25rem !important;
  padding: .5rem 0 !important;
}
.swal2-html-container {
  font-size: .95rem !important;
}

@media (max-width: 480px) {
  .swal2-popup {
    width: min(85vw, 320px) !important;
    padding: 1rem !important;
  }
  .swal2-title {
    font-size: 1.15rem !important;
  }
  .swal2-html-container {
    font-size: .9rem !important;
  }
}


/* ── 12. Modal Bootstrap — backdrop cobrindo a viewport inteira ──────────────── */

/* Em algumas telas (ex: login com .sign-in-bg) o backdrop do modal aparecia
   cobrindo só parte da tela, deixando o fundo da página visível nas bordas.
   Força o backdrop a ser sempre um overlay fixo de viewport inteira,
   independente do container/página onde o modal é aberto. */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}


/* ── 13. Sidebar (nav#app-sidebar) — 100% em vez de 100vh ────────────────────── */

/* style.css define `nav { height: 100vh; }` (linha ~12073). Como o app tem uma
   feature de zoom (document.documentElement.style.zoom), vh não acompanha o
   zoom de forma confiável em alguns navegadores — a sidebar ficava mais curta
   que a página, sobrando um triângulo do fundo visível no canto inferior.
   position:fixed usa a viewport como containing block mesmo com height:100%,
   então não precisa de html/body com height definido pra isso funcionar. */
#app-sidebar {
  height: 100% !important;
}