/*
 * Base visual do Teamlr (Fase 4.1): tokens de cor e tipografia sobre o Bootstrap 5.3 e os ajustes que o markup das
 * telas espera do Bootstrap 4. Carregado depois do Bootstrap e antes do CSS de cada área.
 *
 * Cores com contraste mínimo de 4,5:1 (WCAG 2.1 AA) para texto: o azul da marca (#1782B6, 4,3:1 sobre branco)
 * ficou um pouco mais escuro no texto e nos botões.
 */
:root {
	--tl-azul: #1478a8;
	--tl-azul-rgb: 20, 120, 168;
	--tl-azul-escuro: #005f8d;
	--tl-azul-claro: #d2e8ff;
	--tl-fundo: #eaeaea;
	--tl-superficie: #ffffff;
	--tl-borda: #dddddd;
	--tl-texto: #333333;
	--tl-texto-suave: #6b6b6b;
	--tl-sucesso: #1e7e34;
	--tl-perigo: #b22222;
	--tl-raio: 0.25rem;
	--tl-fonte: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	--bs-body-font-family: var(--tl-fonte);
	--bs-body-color: var(--tl-texto);
	--bs-primary: var(--tl-azul);
	--bs-primary-rgb: var(--tl-azul-rgb);
	--bs-link-color: var(--tl-azul);
	--bs-link-color-rgb: var(--tl-azul-rgb);
	--bs-link-hover-color: var(--tl-azul-escuro);
	--bs-link-hover-color-rgb: 0, 95, 141;
	--bs-secondary-color: var(--tl-texto-suave);
	--bs-focus-ring-color: rgba(var(--tl-azul-rgb), 0.35);
}

/* Botões e textos na cor da marca */
.btn-primary {
	--bs-btn-bg: var(--tl-azul);
	--bs-btn-border-color: var(--tl-azul);
	--bs-btn-hover-bg: var(--tl-azul-escuro);
	--bs-btn-hover-border-color: var(--tl-azul-escuro);
	--bs-btn-active-bg: var(--tl-azul-escuro);
	--bs-btn-active-border-color: var(--tl-azul-escuro);
	--bs-btn-disabled-bg: var(--tl-azul);
	--bs-btn-disabled-border-color: var(--tl-azul);
	--bs-btn-focus-shadow-rgb: var(--tl-azul-rgb);
}

.btn-outline-primary {
	--bs-btn-color: var(--tl-azul);
	--bs-btn-border-color: var(--tl-azul);
	--bs-btn-hover-bg: var(--tl-azul);
	--bs-btn-hover-border-color: var(--tl-azul);
	--bs-btn-active-bg: var(--tl-azul-escuro);
	--bs-btn-active-border-color: var(--tl-azul-escuro);
	--bs-btn-focus-shadow-rgb: var(--tl-azul-rgb);
}

.text-primary { color: var(--tl-azul) !important; }
.text-muted, .text-body-secondary { color: var(--tl-texto-suave) !important; }

/* O Bootstrap 5 sublinha todo link; nas telas, os links são de navegação e botões */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn, .nav-link, .dropdown-item, .navbar-brand { text-decoration: none !important; }

/* Foco visível para quem navega pelo teclado */
:focus-visible {
	outline: 2px solid var(--tl-azul);
	outline-offset: 2px;
}

/* Classes do Bootstrap 4 que as telas ainda usam como gancho */
.form-group { margin-bottom: 1rem; }
.help-block { display: block; font-size: 0.8rem; }
.has-error .help-block, .help-block.with-errors { color: var(--tl-perigo); }

/* Validação: o Teamlr.js marca o campo com is-invalid; os campos de linha (rótulo depois do input) não mostram o
   ícone do Bootstrap */
.sistema-form .form-control.is-invalid { background-image: none; padding-right: 0; }

/* Avisos acima dos modais */
#teamlr-avisos { z-index: 2000; }

/* Botão de fechar do Bootstrap 4 (×), ainda usado nos cabeçalhos dos modais e nos alertas até a Fase 4.4 */
.close {
	float: right;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	background: transparent;
	border: 0;
	opacity: 0.5;
}
.close:hover { color: #000; opacity: 0.75; }
.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }
.alert .close { margin-left: 1rem; color: inherit; }

/* Listas de filtro (projetos, usuários) com rolagem nativa, no lugar do SlimScroll */
.filtro-scroll {
	max-height: 300px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--tl-azul) #eeeeee;
}

/* Selects: no Bootstrap 5 o .form-control tira a seta nativa (o 5 usa .form-select); volta a seta do .form-select.
   O !important vence o "background: transparent" dos campos de linha (Elementos.css) */
select.form-control {
	padding-right: 1.75rem !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.25rem center !important;
	background-size: 16px 12px !important;
}

/* Checkbox do Bootstrap 5 dentro dos formulários de linha, que tiram a borda e o fundo dos inputs */
.sistema-form .form-group input.form-check-input {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	padding: 0;
	border: 1px solid #8a8a8a;
	border-radius: 0.25em;
	background-color: #fff;
	background-image: var(--bs-form-check-bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.sistema-form .form-group input.form-check-input:checked { background-color: var(--tl-azul); border-color: var(--tl-azul); }

/* Abas e pílulas na cor da marca */
.nav-pills { --bs-nav-pills-link-active-bg: var(--tl-azul); }
.nav { --bs-nav-link-color: var(--tl-azul); --bs-nav-link-hover-color: var(--tl-azul-escuro); }

/* Pedidos de desbloqueio (tela de desbloqueios) */
.pedidos-desbloqueio .pedido-motivo { white-space: pre-line; max-width: 28rem; }
.pedidos-vazio { color: var(--tl-texto-suave); padding: 1rem 0; }

/* Tela Registros (Fase 4.6): totais da busca e paginação no servidor */
.registros-resumo { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 4px 0 10px; color: var(--tl-texto-suave); }
.registros-resumo strong { color: var(--tl-texto); }
.registros-tabela { font-size: 0.9rem; }
.registros-tabela .td-acoes { width: 1%; white-space: nowrap; }
.registros-paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 16px; }
.registros-paginas-info { font-size: 0.85rem; color: var(--tl-texto-suave); }
.registros-paginas .page-link { color: var(--tl-azul); }
.registros-paginas .page-item.active .page-link { background-color: var(--tl-azul); border-color: var(--tl-azul); color: #fff; }

/* Tempo Real (Fase 4.7): hora da última atualização */
.tempo-real-status { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 0.85rem; color: var(--tl-texto-suave); padding: 0 0 6px; }

/* Calendário (bootstrap-datepicker): dias de outros meses e o dia escolhido com contraste AA */
/* body na frente: a folha do calendário carrega depois desta */
body .datepicker table tr td.old, body .datepicker table tr td.new { color: var(--tl-texto-suave); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.active { background: var(--tl-azul) !important; color: #fff; }

/* Checkbox desenhado (em.checkmark): o input fica invisível, então o foco aparece no quadrado */
.sistema-form .form-group.checkbox input:focus-visible ~ .checkmark { outline: 2px solid var(--tl-azul); outline-offset: 2px; }

/* Ferramentas acima das listas (busca e ações) e cabeçalho dos projetos em Minhas Horas */
.lista-ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.lista-ferramentas .form-control { flex: 1 1 16rem; max-width: 28rem; }
.filtro-projetos-cabecalho { display: flex; justify-content: center; align-items: center; margin: 0 5px; }
.tempo-real-vazio { color: var(--tl-texto-suave); text-align: center; padding: 4rem 1rem; }