/*
 * Tema SICS para o MantisBT 2.28.
 *
 * Carregado por EVENT_LAYOUT_RESOURCES, que e a ultima coisa do <head>: por
 * isso estas regras ganham do Bootstrap 3 e do Ace sem precisar de !important
 * em tudo. Onde o !important aparece e porque o Ace usa seletores muito
 * especificos naquele ponto.
 *
 * As cores vivem em variaveis no :root, entao ajustar a paleta e mexer em um
 * lugar so, nao espalhar hex pelo arquivo.
 *
 * Houve um modo escuro aqui, removido a pedido em 2026-09-07. O Bootstrap 3 e o
 * Ace fixam cor em centenas de regras, entao o escuro exigia cacar cantos
 * claros toda vez que alguem abrisse uma tela pouco usada — manutencao continua
 * em troca de pouco. Se um dia voltar, o caminho e o mesmo: variaveis
 * redefinidas sob um seletor de tema no <html>.
 */

:root {
	--sics-azul:        #1f6fc4;   /* azul do logo, para acoes e links */
	--sics-azul-escuro: #12508f;
	--sics-azul-claro:  #e8f1fb;

	--fundo:        #eef2f6;   /* fundo da pagina */
	--superficie:   #ffffff;   /* cartoes, tabelas, formularios */
	--superficie-2: #f7f9fc;   /* listras, cabecalhos de tabela */
	--borda:        #dde4ec;
	--borda-forte:  #c6d1de;

	--texto:        #1a2733;
	--texto-suave:  #5d6f80;
	--texto-fraco:  #8496a6;

	--barra-fundo:  #16324f;   /* barra superior */
	--barra-texto:  #eaf1f8;
	--menu-fundo:   #ffffff;   /* menu lateral */
	--menu-ativo:   var(--sics-azul-claro);
	--cartao-cabecalho: #2c6fa8;   /* faixa dos cartoes */

	--sombra: 0 1px 3px rgba(20, 40, 60, .10);
}

/* ------------------------------------------------------------- base */

/*
 * O <html> tambem precisa da cor.
 *
 * Em paginas curtas — o login e o caso — o <body> nao chega ao pe da janela, e
 * abaixo dele aparecia o branco padrao do <html>: a tela ficava com dois tons,
 * cinza em cima e branco embaixo.
 */
html {
	background-color: var(--fundo) !important;
	min-height: 100%;
}
body,
.main-container,
.page-content {
	background-color: var(--fundo) !important;
	color: var(--texto);
	min-height: 100vh;
}

a { color: var(--sics-azul); }
a:hover, a:focus { color: var(--sics-azul-escuro); }

hr { border-color: var(--borda); }

/* ------------------------------------------------------------- barra */

#navbar,
#navbar.navbar-default {
	background: var(--barra-fundo) !important;
	border-bottom: 0;
	box-shadow: var(--sombra);
}
#navbar .navbar-header,
#navbar .navbar-brand,
#navbar .navbar-text,
#navbar .nav > li > a {
	color: var(--barra-texto) !important;
}
#navbar .nav > li > a:hover,
#navbar .nav > li.open > a {
	background: rgba(255, 255, 255, .10) !important;
}

/* ------------------------------------------------------- menu lateral */

#sidebar,
#sidebar .nav-list {
	background: var(--menu-fundo) !important;
	border-right: 1px solid var(--borda);
}
#sidebar .nav-list > li > a {
	color: var(--texto-suave) !important;
	border-color: var(--borda) !important;
}
#sidebar .nav-list > li > a:hover {
	background: var(--superficie-2) !important;
	color: var(--sics-azul) !important;
}
#sidebar .nav-list > li.active > a,
#sidebar .nav-list > li.active > a:hover {
	background: var(--menu-ativo) !important;
	color: var(--sics-azul) !important;
	font-weight: 600;
}
#sidebar .nav-list > li.active:after { display: none; }
#sidebar .sidebar-toggle,
#sidebar .sidebar-shortcuts {
	background: var(--menu-fundo) !important;
	border-color: var(--borda) !important;
}

/* -------------------------------------------------------- cartoes */

.widget-box {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 8px;
	box-shadow: var(--sombra);
	overflow: hidden;
}
/*
 * O cabecalho do cartao CONTINUA colorido, so muda de cor.
 *
 * Tentar clarea-lo quebra: o Ace poe <a class="white"> e <h4 class="lighter">
 * dentro dele, entao o texto fica branco sobre fundo claro e some. Manter o
 * bloco colorido e trocar a cor e mais simples e funciona nos dois temas.
 */
.widget-box > .widget-header,
.widget-box.widget-color-blue2 > .widget-header {
	background: var(--cartao-cabecalho) !important;
	border-color: var(--cartao-cabecalho) !important;
	color: #fff !important;
	min-height: 40px;
}
.widget-box.widget-color-green  > .widget-header { background: #2e8b62 !important; border-color: #2e8b62 !important; }
.widget-box.widget-color-red    > .widget-header { background: #c2544f !important; border-color: #c2544f !important; }
.widget-box.widget-color-orange > .widget-header { background: #c47d21 !important; border-color: #c47d21 !important; }
.widget-box.widget-color-grey   > .widget-header { background: #5c6b7a !important; border-color: #5c6b7a !important; }

/*
 * Texto branco no cabecalho — MENOS nos botoes.
 *
 * Sem o :not(.btn) o "Ver Tarefas", que e um .btn-white, ficava com texto
 * branco sobre fundo branco: virava um retangulo vazio no canto do cartao.
 */
.widget-box > .widget-header .widget-title,
.widget-box > .widget-header > h4,
.widget-box > .widget-header a:not(.btn),
.widget-box > .widget-header a.white:not(.btn),
.widget-box > .widget-header > .widget-title .ace-icon {
	color: #fff !important;
}

/* Botoes na faixa: contorno claro sobre o azul, legiveis nos dois temas. */
.widget-box > .widget-header .btn,
.widget-box > .widget-header .btn-white {
	background: rgba(255, 255, 255, .14) !important;
	border-color: rgba(255, 255, 255, .45) !important;
	color: #fff !important;
}
.widget-box > .widget-header .btn:hover,
.widget-box > .widget-header .btn-white:hover {
	background: rgba(255, 255, 255, .26) !important;
	border-color: #fff !important;
	color: #fff !important;
}
.widget-box > .widget-header .widget-toolbar > a,
.widget-box > .widget-header .widget-toolbar .ace-icon {
	color: rgba(255, 255, 255, .85) !important;
}
.widget-box > .widget-header .badge {
	background: rgba(255, 255, 255, .22) !important;
	color: #fff !important;
}

.widget-body,
.widget-box > .widget-body,
.widget-main {
	background: var(--superficie) !important;
	color: var(--texto);
}

/* -------------------------------------------------------- tabelas */

.table { color: var(--texto); }
.table > thead > tr > th {
	background: var(--superficie-2);
	border-bottom: 2px solid var(--borda-forte) !important;
	color: var(--texto-suave);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
	border-top: 1px solid var(--borda) !important;
	vertical-align: middle;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
	background: var(--superficie-2);
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
	border-color: var(--borda) !important;
}
.table-hover > tbody > tr:hover > td { background: var(--sics-azul-claro) !important; }

/* --------------------------------------------------- formularios */

.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select {
	background: var(--superficie) !important;
	border: 1px solid var(--borda-forte) !important;
	border-radius: 5px !important;
	color: var(--texto) !important;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
	border-color: var(--sics-azul) !important;
	box-shadow: 0 0 0 3px rgba(31, 111, 196, .16) !important;
}
::placeholder { color: var(--texto-fraco); }
label, .control-label { color: var(--texto-suave); }

/* ---------------------------------------------------------- botoes */

.btn {
	border-radius: 5px !important;
	font-weight: 600;
	transition: background-color .12s ease, border-color .12s ease;
}
.btn-primary,
.btn-primary:focus {
	background: var(--sics-azul) !important;
	border-color: var(--sics-azul) !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active {
	background: var(--sics-azul-escuro) !important;
	border-color: var(--sics-azul-escuro) !important;
}
.btn-white,
.btn-white:focus {
	background: var(--superficie) !important;
	border-color: var(--borda-forte) !important;
	color: var(--texto) !important;
}
.btn-white:hover {
	background: var(--superficie-2) !important;
	border-color: var(--sics-azul) !important;
	color: var(--sics-azul) !important;
}

/* ------------------------------------------------- outros blocos */

.alert { border-radius: 6px; border-width: 1px; }
.modal-content, .popover, .dropdown-menu {
	background: var(--superficie) !important;
	border-color: var(--borda) !important;
	color: var(--texto);
}
.modal-header, .modal-footer { border-color: var(--borda) !important; }
.dropdown-menu > li > a { color: var(--texto) !important; }
.dropdown-menu > li > a:hover { background: var(--superficie-2) !important; }
.pagination > li > a, .pagination > li > span {
	background: var(--superficie) !important;
	border-color: var(--borda) !important;
	color: var(--sics-azul) !important;
}
.pagination > .active > a, .pagination > .active > span {
	background: var(--sics-azul) !important;
	border-color: var(--sics-azul) !important;
	color: #fff !important;
}
.well, pre, code {
	background: var(--superficie-2) !important;
	border-color: var(--borda) !important;
	color: var(--texto);
}
.grey, .lighter, .small-caption { color: var(--texto-suave) !important; }

/* ------------------------------------------------ logo na barra */

/* A imagem vem por <style> injetado pelo plugin, com a URL do $g_logo_image.
   Aqui so a geometria. O PNG tem fundo branco, entao o quadrinho arredondado
   e proposital: sobre a barra escura ele le como icone, nao como retangulo
   solto — mesma solucao do cabecalho do e-mail. */
#navbar .navbar-brand::before {
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 6px;
	content: "";
	display: inline-block;
	height: 30px;
	margin-right: 10px;
	vertical-align: middle;
	width: 30px;
}
#navbar .navbar-brand { align-items: center; display: inline-flex; }

/* Login: o Mantis ja renderiza o logo_image ali; so tamanho e respiro.
   O logo do login e horizontal (150x46), entao limita-se a largura. */
.login-container img,
.login-container .login-layout img {
	height: auto;
	max-height: 62px;
	max-width: 230px;
	width: auto;
}
.login-container { padding-top: 28px; }

/* ------------------------------------------------ botao do tema */

.sics-tema-item { display: inline-block; }
.sics-tema-btn {
	color: var(--barra-texto) !important;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	opacity: .85;
	padding: 14px 12px;
}
.sics-tema-btn:hover { opacity: 1; background: rgba(255, 255, 255, .10); }

/* ------------------------------------------------ ajustes do escuro */

/*
 * O Bootstrap desta build tem ".table td,.table th{background:#FFF}" e o Ace tem
 * ".widget-body{background-color:#FFF}

/* Impressao: sempre claro, independentemente do tema escolhido. */
@media print {
	:root { --fundo: #fff; --superficie: #fff; --superficie-2: #fff;
	        --texto: #000; --texto-suave: #333; --borda: #ccc; }
	#navbar, #sidebar, .sics-tema-item { display: none !important; }
}