/* ============================================================================
   style-extras.css — Overrides visuais do IMOBSYSTEM admin (2026-05-28)
   Incluído via requires/title.php em todas as páginas admin.
   Carregado ANTES do style.min.css, então usa !important onde precisa vencer.
   ============================================================================ */

/* --- Submit buttons antigos (input type=submit sem classe btn) --- */
/* Aplica visual de Bootstrap btn-primary nos inputs submit/reset que não
   tenham classe btn explícita. Cobre 100+ forms espalhados pelo sistema. */
input[type="submit"]:not(.btn):not(.form-control),
input[type="reset"]:not(.btn):not(.form-control),
input[type="button"]:not(.btn):not(.form-control):not([onclick*="show_pass"]) {
	display: inline-block;
	padding: 0.5rem 1.2rem;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	background-color: #1976d2;
	border: 1px solid #1976d2;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, transform 0.05s;
	margin: 4px 2px;
}
input[type="submit"]:not(.btn):not(.form-control):hover,
input[type="reset"]:not(.btn):not(.form-control):hover {
	background-color: #1565c0;
	border-color: #1565c0;
}
input[type="submit"]:not(.btn):not(.form-control):active,
input[type="reset"]:not(.btn):not(.form-control):active {
	transform: translateY(1px);
}
input[type="reset"]:not(.btn):not(.form-control) {
	background-color: #6c757d;
	border-color: #6c757d;
}
input[type="reset"]:not(.btn):not(.form-control):hover {
	background-color: #5a6268;
	border-color: #5a6268;
}

/* --- Tabelas cruas (sem class) --- */
/* Aplica padding, borda e hover suaves em <table> sem nenhuma classe. */
table:not([class]),
table.product-overview {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin-bottom: 1rem;
}
table:not([class]) > * > tr:hover,
table.product-overview tr:hover {
	background-color: #f8f9fa;
}
table:not([class]) th,
table.product-overview th {
	padding: 0.65rem 0.75rem;
	font-weight: 600;
	color: #495057;
	background-color: #f1f3f5;
	border-bottom: 2px solid #dee2e6;
	font-size: 0.9rem;
}
table:not([class]) td,
table.product-overview td {
	padding: 0.55rem 0.75rem;
	vertical-align: middle;
	border-bottom: 1px solid #e9ecef;
}

/* --- Inputs sem form-control ---
   Exclui select2-search__field (input interno do Select2 multi) e chosen-search
   (Chosen.js) — esses são gerenciados pelos plugins e não devem ser estilizados. */
input[type="text"]:not(.form-control):not(.btn):not(.select2-search__field),
input[type="email"]:not(.form-control):not(.btn),
input[type="number"]:not(.form-control):not(.btn),
input[type="tel"]:not(.form-control):not(.btn),
input[type="url"]:not(.form-control):not(.btn),
input[type="search"]:not(.form-control):not(.btn):not(.select2-search__field),
input[type="date"]:not(.form-control):not(.btn),
input[type="time"]:not(.form-control):not(.btn),
input[type="password"]:not(.form-control):not(.btn),
select:not(.form-control):not(.select2-hidden-accessible),
textarea:not(.form-control) {
	padding: 0.4rem 0.65rem;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background-color: #fff;
	color: #495057;
	font-size: 0.9rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	max-width: 100%;
}
input[type="text"]:not(.form-control):not(.select2-search__field):focus,
input[type="email"]:not(.form-control):focus,
input[type="number"]:not(.form-control):focus,
input[type="tel"]:not(.form-control):focus,
input[type="date"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
textarea:not(.form-control):focus {
	border-color: #80bdff;
	box-shadow: 0 0 0 0.15rem rgba(25, 118, 210, 0.15);
	outline: 0;
}

/* Reset: garantir que select2-search__field não herde estilos genéricos.
   Sem isso, o input interno do select2-multiple aparece como caixa alta vazia. */
.select2-search__field {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-height: 24px !important;
	box-shadow: none !important;
}

/* Selectos multiplos com altura natural (não esticar) */
.select2-selection--multiple {
	min-height: 38px;
	padding: 2px 4px !important;
}
.select2-selection__rendered {
	padding: 0 !important;
}

/* --- Botões de ação na lista de imóveis/leads --- */
/* Ícones de editar/excluir mais legíveis */
td a[title="Editar"], td a[title="Excluir"], td a[title="Detalhes"] {
	display: inline-block;
	padding: 4px 6px;
	border-radius: 4px;
	margin: 0 2px;
	transition: background-color 0.15s;
	text-decoration: none;
}
td a[title="Editar"]:hover { background-color: #fff3cd; }
td a[title="Excluir"]:hover { background-color: #f8d7da; }
td a[title="Detalhes"]:hover { background-color: #d1ecf1; }

/* --- Cards modernos --- */
.card { border: 1px solid #e9ecef; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: box-shadow 0.2s; }

/* --- Alerts dismissíveis com transição mais suave --- */
.alert-dismissible .close { opacity: 0.6; }
.alert-dismissible .close:hover { opacity: 1; }

/* --- Breadcrumb mais elegante --- */
.breadcrumb {
	background-color: transparent;
	padding: 0;
	font-size: 0.85rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; }

/* --- Page titles mais limpos --- */
.text-themecolor { color: #1976d2 !important; font-weight: 500; }

/* --- Tooltips mais legíveis (Bootstrap padrão é meio pequeno) --- */
.tooltip-inner { font-size: 0.85rem; padding: 6px 10px; }

/* --- Scroll suave para anchors --- */
html { scroll-behavior: smooth; }

/* --- Loading mais elegante (substitui o preloader cinza) --- */
.preloader { background-color: #fff; }

/* --- Badges com peso e cor melhores --- */
.badge { font-weight: 500; padding: 0.35em 0.6em; font-size: 80%; }
.badge-pill { padding-left: 0.7em; padding-right: 0.7em; }


/* ═══════════════════════════════════════════════════════════════════════════
   MODO ESCURO DO PAINEL (2026-07-31)
   ---------------------------------------------------------------------------
   Ativado pelo ícone do rolo de tinta → "Escurecer o painel inteiro", que põe a
   classe `tema-escuro` no <body> e guarda a escolha no navegador.

   Por que existe: os temas "com menu escuro" do template escurecem APENAS o menu
   lateral — o conteúdo continuava branco, que é o que cansa a vista à noite.
   Aqui escurecemos fundo, cartões, tabelas, campos e menus suspensos.

   Só age quando a classe está presente: sem ela, nada muda. As cores saem de
   variáveis — para calibrar o tom, altere apenas o bloco :root abaixo.
   ═══════════════════════════════════════════════════════════════════════════ */
body.tema-escuro {
	--esc-fundo:   #151a23;   /* fundo da página            */
	--esc-cartao:  #1e2530;   /* cartões, tabelas, modais   */
	--esc-campo:   #232b38;   /* campos de formulário       */
	--esc-borda:   #2f3947;   /* bordas e divisórias        */
	--esc-texto:   #e4e8ef;   /* texto principal            */
	--esc-texto2:  #a7b0bd;   /* texto secundário/apoio     */
	background-color: var(--esc-fundo) !important;
	color: var(--esc-texto);
}
body.tema-escuro .page-wrapper,
body.tema-escuro .container-fluid { background-color: var(--esc-fundo) !important; }

/* Cartões, tabelas e caixas */
body.tema-escuro .card,
body.tema-escuro .modal-content,
body.tema-escuro .dropdown-menu,
body.tema-escuro .list-group-item,
body.tema-escuro .right-sidebar { background-color: var(--esc-cartao) !important; color: var(--esc-texto); border-color: var(--esc-borda) !important; }
body.tema-escuro .card-body,
body.tema-escuro .card-header,
body.tema-escuro .card-footer { background-color: transparent !important; color: var(--esc-texto); }

body.tema-escuro table,
body.tema-escuro .table { color: var(--esc-texto) !important; }
body.tema-escuro .table thead th { background-color: rgba(255,255,255,.04); color: var(--esc-texto); border-color: var(--esc-borda) !important; }
body.tema-escuro .table td,
body.tema-escuro .table th { border-color: var(--esc-borda) !important; }
body.tema-escuro .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025); }
body.tema-escuro .table-hover tbody tr:hover { background-color: rgba(255,255,255,.06); }

/* Formulários */
body.tema-escuro .form-control,
body.tema-escuro input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.tema-escuro select,
body.tema-escuro textarea,
body.tema-escuro .select2-selection,
body.tema-escuro .select2-dropdown {
	background-color: var(--esc-campo) !important;
	color: var(--esc-texto) !important;
	border-color: var(--esc-borda) !important;
}
body.tema-escuro .form-control::placeholder { color: #7c8697; }
body.tema-escuro .select2-selection__rendered,
body.tema-escuro .select2-results__option { color: var(--esc-texto) !important; }
body.tema-escuro .select2-results__option--highlighted { background-color: #2c3648 !important; }
body.tema-escuro .input-group-text { background-color: var(--esc-campo); color: var(--esc-texto2); border-color: var(--esc-borda); }

/* Texto de apoio e divisórias */
body.tema-escuro .text-muted, body.tema-escuro small, body.tema-escuro .breadcrumb { color: var(--esc-texto2) !important; }
body.tema-escuro .text-dark, body.tema-escuro h1, body.tema-escuro h2, body.tema-escuro h3,
body.tema-escuro h4, body.tema-escuro h5, body.tema-escuro h6 { color: var(--esc-texto) !important; }
body.tema-escuro hr, body.tema-escuro .dropdown-divider { border-color: var(--esc-borda) !important; }
body.tema-escuro .nav-tabs .nav-link.active { background-color: var(--esc-cartao); border-color: var(--esc-borda) var(--esc-borda) transparent; color: var(--esc-texto); }
body.tema-escuro .dropdown-item { color: var(--esc-texto); }
body.tema-escuro .dropdown-item:hover { background-color: #2c3648; color: #fff; }

/* Avisos continuam coloridos, mas legíveis no escuro */
body.tema-escuro .alert { border: 0; }
body.tema-escuro .alert-info    { background-color: #16323f; color: #cfe9f5; }
body.tema-escuro .alert-success { background-color: #17331f; color: #d6f0dc; }
body.tema-escuro .alert-warning { background-color: #3a3018; color: #f6e6c4; }
body.tema-escuro .alert-danger  { background-color: #3b1e1e; color: #f6d5d5; }
body.tema-escuro .alert a, body.tema-escuro .alert .alert-link { color: inherit; text-decoration: underline; }

/* ── PONTOS QUE O TEMPLATE FORÇA EM BRANCO ──────────────────────────────────
   O style.min.css declara `background:#fff` (ou #f8f9fa) em vários seletores.
   Como ele é carregado ANTES deste arquivo mas com especificidade própria, cada
   um precisa ser desfeito explicitamente — senão sobram "ilhas" claras no meio
   do tema escuro. A lista abaixo saiu de uma varredura do próprio template. */

/* Faixa do título da tela ("Painel de Administrador") e rodapé */
body.tema-escuro .page-titles { background: var(--esc-cartao) !important; }
body.tema-escuro .footer {
	background: var(--esc-cartao) !important;
	color: var(--esc-texto2) !important;
	border-top-color: var(--esc-borda) !important;
}
body.tema-escuro .footer a { color: var(--esc-texto) !important; }

/* HOVER DE LINHA — o template usa #f8f9fa com texto escuro (#212529): a linha
   "acendia" e o texto sumia. Cobrimos todas as variações de tabela do tema. */
body.tema-escuro table tbody tr:hover,
body.tema-escuro .table tbody tr:hover,
body.tema-escuro .table-hover tbody tr:hover,
body.tema-escuro .full-color-table tbody tr:hover,
body.tema-escuro .list-group-item-action:hover,
body.tema-escuro .list-group-item-action:focus {
	background-color: #2b3547 !important;
	color: var(--esc-texto) !important;
}
body.tema-escuro table tbody tr:hover td,
body.tema-escuro table tbody tr:hover th,
body.tema-escuro table tbody tr:hover a:not(.btn) { color: var(--esc-texto) !important; }

/* CABEÇALHO (<thead>) NO HOVER — as regras acima param no `tbody`, mas a regra de
   tabela crua lá em cima é `table:not([class]) > * > tr:hover`: o `> * >` pega
   thead e tfoot também. Resultado: o corpo escurecia certinho e só o cabeçalho
   continuava acendendo em #f8f9fa. Aqui o thead mantém o MESMO tom que já tem
   parado (não clareia no hover) — cabeçalho não é linha clicável, destacá-lo
   não significa nada para quem está lendo a tabela. */
body.tema-escuro table thead tr:hover,
body.tema-escuro table thead tr:hover > th,
body.tema-escuro table thead tr:hover > td,
body.tema-escuro table tfoot tr:hover,
body.tema-escuro table tfoot tr:hover > th,
body.tema-escuro table tfoot tr:hover > td,
body.tema-escuro .table thead tr:hover,
body.tema-escuro .table thead tr:hover > th {
	background-color: rgba(255,255,255,.04) !important;
	color: var(--esc-texto) !important;
}
body.tema-escuro table thead tr:hover a:not(.btn),
body.tema-escuro table tfoot tr:hover a:not(.btn) { color: #ff7600 !important; }

/* Linhas destacadas do Bootstrap (aviso/ativa) ficariam brancas */
body.tema-escuro .table-active, body.tema-escuro .table-active > td, body.tema-escuro .table-active > th {
	background-color: rgba(255,255,255,.07) !important; color: var(--esc-texto) !important;
}
body.tema-escuro .table-warning, body.tema-escuro .table-warning > td, body.tema-escuro .table-warning > th {
	background-color: #3a3018 !important; color: #f6e6c4 !important;
}

/* Listas, abas, paginação, migalhas e barras de progresso */
body.tema-escuro .list-group-item { background-color: var(--esc-cartao) !important; color: var(--esc-texto); border-color: var(--esc-borda) !important; }
body.tema-escuro .breadcrumb { background: transparent !important; }
body.tema-escuro .nav-tabs .nav-link.active,
body.tema-escuro .nav-tabs .nav-item.show .nav-link { background-color: var(--esc-cartao) !important; color: var(--esc-texto) !important; }
body.tema-escuro .page-link { background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }
body.tema-escuro .page-item.disabled .page-link { background-color: var(--esc-cartao) !important; color: var(--esc-texto2) !important; }
body.tema-escuro .progress { background-color: var(--esc-campo) !important; }

/* Botões claros do template (secondary/light) viravam blocos brancos */
body.tema-escuro .btn-light, body.tema-escuro .btn-secondary,
body.tema-escuro .btn-outline-secondary:hover, body.tema-escuro .btn-outline-light:hover {
	background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important;
}

/* Campos em foco e itens de menu suspenso */
body.tema-escuro .form-control:focus { background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; }
body.tema-escuro .dropdown-item:hover, body.tema-escuro .dropdown-item:focus { background-color: #2c3648 !important; color: #fff !important; }
body.tema-escuro .custom-select, body.tema-escuro .custom-file-label,
body.tema-escuro .custom-file-label::after { background-color: var(--esc-campo) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important; }

/* Rede de segurança: qualquer caixa branca genérica do tema */
body.tema-escuro .white-box, body.tema-escuro .bg-white, body.tema-escuro .panel, body.tema-escuro .box,
body.tema-escuro .modal-header, body.tema-escuro .modal-footer {
	background-color: var(--esc-cartao) !important; color: var(--esc-texto) !important; border-color: var(--esc-borda) !important;
}

/* LINKS — no escuro o tom do template (#af2800) fica quase invisível no fundo
   escuro. Usamos o laranja da marca, que tem contraste bom sobre o fundo. */
body.tema-escuro a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) { color: #ff7600; }
body.tema-escuro a:not(.btn):not(.dropdown-item):not(.nav-link):hover { color: #ff9433; }

/* LINHAS DESTACADAS POR ESTILO INLINE (repasse garantido = #fff9d9).
   A cor é escrita direto no <tr style="..."> por aluguel_index.php,
   aluguel_relatorio.php e produto_detalhes_hist_locacoes.php. Estilo inline
   vence CSS normal, então casamos pelo próprio atributo + !important — assim
   vale para as três telas e para qualquer outra que use o mesmo amarelo. */
body.tema-escuro tr[style*="fff9d9"],
body.tema-escuro tr[style*="FFF9D9"],
body.tema-escuro tr[style*="fff9d9"] > td,
body.tema-escuro tr[style*="FFF9D9"] > td {
	background-color: #b39600 !important;
	color: #fff !important;
}
body.tema-escuro tr[style*="fff9d9"]:hover,
body.tema-escuro tr[style*="fff9d9"]:hover > td { background-color: #c9a800 !important; }
body.tema-escuro tr[style*="fff9d9"] a:not(.btn) { color: #fff !important; text-decoration: underline; }

/* Impressão nunca sai escura (economiza tinta e mantém o documento legível) */
@media print { body.tema-escuro, body.tema-escuro * { background: #fff !important; color: #000 !important; } }


/* ═══════════════════════════════════════════════════════════════════════════
   CAMADA MOBILE (2026-07-31)
   ---------------------------------------------------------------------------
   O painel foi desenhado para computador e várias telas abriam apertadas ou
   "vazando" a largura no celular. Em vez de mexer em ~200 arquivos, tudo fica
   AQUI: este arquivo já é carregado pelas telas do painel, então a correção
   vale para todas de uma vez.

   REGRA DE OURO: nada aqui pode alterar o visual no computador — todo bloco
   está dentro de @media com largura máxima. Se algum ajuste incomodar, basta
   remover o bloco correspondente; nenhuma tela depende dele para funcionar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Celular (até 767px) ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

	/* 1. A PÁGINA NUNCA ROLA DE LADO.
	   Era o defeito mais visível: uma tabela larga empurrava a tela inteira e
	   o menu/topo saíam do lugar. Agora quem rola é o conteúdo largo, não a página. */
	html, body { overflow-x: hidden; max-width: 100%; }
	.page-wrapper, .container-fluid { padding-left: 10px; padding-right: 10px; }
	img, video, iframe, canvas { max-width: 100%; height: auto; }
	pre, code { white-space: pre-wrap; word-break: break-word; }

	/* 2. TABELAS: rolagem horizontal DENTRO do cartão.
	   Muitas telas têm <table> sem o wrapper .table-responsive do Bootstrap. */
	.table-responsive { -webkit-overflow-scrolling: touch; }
	.card-body > table, .card-body > form > table, table.table, table.footable {
		display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
	}
	table td, table th { word-break: normal; }

	/* 3. ALVO DE TOQUE CONFORTÁVEL (dedo ≠ mouse).
	   Botões de ação em tabela ficavam pequenos demais para acertar. */
	.btn { min-height: 40px; padding: 8px 14px; }
	.btn-sm, .btn-xs { min-height: 34px; padding: 6px 10px; }
	td .btn, td a, .actions a { display: inline-block; margin: 2px 3px 2px 0; }
	.custom-checkbox label, .form-check-label { padding: 4px 0; }

	/* 4. iOS NÃO DÁ MAIS ZOOM AO TOCAR NUM CAMPO.
	   O Safari amplia a página sozinho quando a fonte do campo é menor que 16px —
	   é o que fazia a tela "pular" e sair do enquadramento ao começar a digitar. */
	input, select, textarea, .form-control { font-size: 16px !important; }
	.form-control { height: auto; padding: 9px 12px; }
	textarea.form-control { min-height: 90px; }

	/* 5. CABEÇALHO DA TELA mais enxuto (sobra mais altura para o conteúdo) */
	.card-body { padding: 12px; }
	.card { margin-bottom: 12px; }
	.page-titles { padding: 8px 0; margin-bottom: 8px; }
	.page-titles h4, h4.text-themecolor { font-size: 1.05rem; line-height: 1.3; }
	.page-titles .breadcrumb { font-size: .78rem; padding: 4px 0; flex-wrap: wrap; }

	/* 6. BARRA DE AÇÕES quebra linha em vez de espremer os botões */
	.page-titles .d-flex, .d-flex.justify-content-end {
		flex-wrap: wrap; justify-content: flex-start !important; gap: 6px;
	}
	.page-titles .text-right, .text-right.align-self-center { text-align: left !important; }
	.form-inline { flex-wrap: wrap; gap: 6px; }
	.form-inline .form-control, .form-inline select { width: 100%; }

	/* 7. MODAIS aproveitam a tela inteira */
	.modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
	.modal-body { padding: 14px; }

	/* 8. Colunas empilhadas ganham respiro */
	[class*="col-"] { margin-bottom: 6px; }
	.form-group { margin-bottom: 14px; }

	/* 9. Rodapé e tooltips não atrapalham */
	.footer { font-size: .78rem; padding: 10px; text-align: center; }
}

/* ── Tablet / celular deitado (768–991px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
	.card-body { padding: 14px; }
	.page-titles .breadcrumb { font-size: .82rem; }
	table.table { display: block; width: 100%; overflow-x: auto; }
}

/* ── Impressão: sem menu, sem botões (o que sai no papel é o conteúdo) ────── */
@media print {
	.left-sidebar, .topbar, .footer, .btn, .no-print, .page-titles .d-flex { display: none !important; }
	.page-wrapper { margin: 0 !important; padding: 0 !important; }
	.card { border: 0 !important; box-shadow: none !important; }
}

/* ── TOOLTIP: não pode roubar o hover de quem a abriu ────────────────────────
   Sintoma: passando o mouse na METADE DE CIMA de uma imagem, a tooltip piscava
   sem parar; na metade de baixo funcionava.
   Causa: a tooltip do Bootstrap nasce com placement "top", ou seja, EM CIMA do
   elemento. Quando o cursor está na parte de cima, ela abre debaixo do ponteiro
   e passa a receber o mouse — o elemento original recebe mouseleave, a tooltip
   some, o ponteiro volta a ficar sobre a imagem, a tooltip reabre... em loop.
   O Bootstrap 4 não traz pointer-events:none (o 5 traz). Com a regra abaixo a
   tooltip fica "atravessável" e o hover nunca sai do elemento. */
.tooltip, .tooltip * { pointer-events: none !important; }

/* ── MENU RECOLHIDO: só o ícone, sem a escrita ───────────────────────────────
   Ao clicar no ☰ o template recolhe o menu e esconde a escrita "ImobSystem" com
   jQuery .hide(). Isso é estilo inline: some ao recarregar a página, e aí voltava
   o menu estreito COM a escrita ao lado — que era o defeito relatado.
   Agora a escolha fica salva (ver requires/topbar.php) e quem esconde a escrita é
   esta regra, presa à classe do <body>. O !important existe porque o .show() do
   template deixa um display inline quando o menu é reaberto. */
body.mini-sidebar .navbar-brand span { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   MODO ESCURO — ILHAS CLARAS QUE FALTAVAM (2026-08-02)
   Cada bloco abaixo veio de uma tela relatada pelo dono. O padrão se repete:
   fundo claro definido FORA do style.min.css (regra própria da página, estilo
   inline, ou — em dois casos — regra deste mesmo arquivo que só existia no tema
   claro). Por isso o override anterior não pegava.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) ABAS NÃO SELECIONADAS (usuario_detalhes.php: "Atividade", "Banco Inter",
      "E-mail (SMTP)"). A aba ATIVA já estava tratada; as inativas herdavam o
      texto escuro do template sobre o fundo escuro — letra da cor do fundo,
      ilegível. */
body.tema-escuro .nav-tabs { border-bottom-color: var(--esc-borda); }
body.tema-escuro .nav-tabs .nav-link {
	color: var(--esc-texto2) !important;
	background-color: transparent;
	border-color: transparent;
}
body.tema-escuro .nav-tabs .nav-link:hover {
	color: var(--esc-texto) !important;
	border-color: var(--esc-borda) var(--esc-borda) transparent;
}

/* 2) CABEÇALHO DE TABELA SEM CLASSE (st360tour_index.php,
      captacao_imobsystem_index_porimobiliaria.php: "Integrar?", "Capa"…).
      A culpa é NOSSA: lá no começo deste arquivo, `table:not([class]) th` pinta
      o cabeçalho de #f1f3f5 para dar acabamento às tabelas cruas — e isso nunca
      foi desfeito no escuro. */
body.tema-escuro table:not([class]) th,
body.tema-escuro table.product-overview th,
body.tema-escuro table:not([class]) thead td {
	background-color: rgba(255,255,255,.05) !important;
	color: var(--esc-texto) !important;
	border-bottom-color: var(--esc-borda) !important;
}
body.tema-escuro table:not([class]) td,
body.tema-escuro table.product-overview td {
	border-bottom-color: var(--esc-borda) !important;
	color: var(--esc-texto);
}

/* 3) LINHAS COLORIDAS DO BOOTSTRAP (contas_index.php marca as contas com
      table-success / table-danger conforme pagas ou vencidas). São fundos
      pastel com texto escuro: no tema escuro a linha "acendia" e o texto sumia.
      Mantemos o SIGNIFICADO da cor (verde = ok, vermelho = atenção), só que em
      tom escuro e com texto claro. */
body.tema-escuro .table-success, body.tema-escuro .table-success > td, body.tema-escuro .table-success > th { background-color: #1c3b2e !important; color: #d8f3e5 !important; }
body.tema-escuro .table-danger,  body.tema-escuro .table-danger  > td, body.tema-escuro .table-danger  > th { background-color: #45242a !important; color: #ffd9de !important; }
body.tema-escuro .table-info,    body.tema-escuro .table-info    > td, body.tema-escuro .table-info    > th { background-color: #1b3540 !important; color: #d5eef8 !important; }
body.tema-escuro .table-primary, body.tema-escuro .table-primary > td, body.tema-escuro .table-primary > th { background-color: #1e2f45 !important; color: #d9e6f7 !important; }
body.tema-escuro .table-secondary,body.tema-escuro .table-secondary>td,body.tema-escuro .table-secondary>th { background-color: #2a303a !important; color: var(--esc-texto) !important; }
body.tema-escuro .table-light,   body.tema-escuro .table-light   > td, body.tema-escuro .table-light   > th { background-color: #262d38 !important; color: var(--esc-texto) !important; }
body.tema-escuro tr[class*="table-"] a:not(.btn) { color: inherit !important; text-decoration: underline; }

/* 4) CAIXAS DE AJUDA COM FUNDO CLARO POR ESTILO INLINE
      (integracao_portais_area.php: "Como integrar seus imóveis aos portais").
      Não dá para alcançar estilo inline por classe — casamos pelo valor da cor
      escrita no atributo, como já fazemos com o #fff9d9 do repasse garantido.
      Cobrimos os tons pastel usados nas caixas de ajuda do painel. */
body.tema-escuro [style*="#f0f4ff"], body.tema-escuro [style*="#F0F4FF"],
body.tema-escuro [style*="#f8f9fa"], body.tema-escuro [style*="#F8F9FA"],
body.tema-escuro [style*="#eef2ff"], body.tema-escuro [style*="#EEF2FF"],
body.tema-escuro [style*="#f6f8fa"], body.tema-escuro [style*="#F6F8FA"],
body.tema-escuro [style*="#fff8e1"], body.tema-escuro [style*="#FFF8E1"],
body.tema-escuro [style*="#e8f5e9"], body.tema-escuro [style*="#E8F5E9"] {
	background-color: var(--esc-campo) !important;
	color: var(--esc-texto) !important;
}

/* 5) BLOCOS COM FUNDO CLARO DEFINIDO NO <style> DA PRÓPRIA PÁGINA
      (graficos_index.php: .tipo-section). Como este arquivo é carregado ANTES
      do <style> da página, só o !important vence. */
body.tema-escuro .tipo-section {
	background-color: var(--esc-campo) !important;
	color: var(--esc-texto) !important;
}
body.tema-escuro .tipo-section h6,
body.tema-escuro .tipo-section h1, body.tema-escuro .tipo-section h2,
body.tema-escuro .tipo-section h3, body.tema-escuro .tipo-section h4,
body.tema-escuro .tipo-section h5 { color: var(--esc-texto) !important; }