@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");

/*
 * Tema visual do CRM — identidade Active Line (www.activeline.com.br): tema escuro,
 * acento laranja #ff6b2c, fontes Manrope e DM Mono.
 *
 * Camada de sobreposição: NÃO substitui style.css, ThemeOffice/theme.css nem tabs/tabpane.css,
 * só os sobrescreve. Por isso precisa ser carregado DEPOIS dos três (ver sys/pages/loading.php,
 * sys/include.php e index.php). As páginas estão em quirks mode (sem doctype): em quirks a tabela
 * não herda font-size, então td/th/span recebem o tamanho explícito, e não "inherit".
 */

:root {
	color-scheme: dark;
	--bg: #080b0f;
	--surface: #11161d;
	--surface-2: #141b23;
	--line: rgba(201, 208, 216, .12);
	--line-strong: rgba(201, 208, 216, .24);
	--text: #f2f3ee;
	--muted: #9ca6b4;
	--accent: #ff6b2c;
	--accent-dark: #e8571a;
	--accent-weak: rgba(255, 107, 44, .12);
	--accent-sel: rgba(255, 107, 44, .22);
	--on-accent: #080b0f;
	--nav: #0d1117;
	--nav-text: #c9d0d8;
	--danger: #ff8a7a;
	--danger-bg: rgba(180, 35, 24, .22);
	--info-bg: rgba(56, 140, 220, .14);
	--warn-bg: rgba(255, 184, 0, .12);
	--warn-line: rgba(255, 184, 0, .35);
	--warn-text: #ffd479;
	--r: 8px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
	--glow: 0 0 100px rgba(255, 107, 44, .2);
	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
}

body {
	background: var(--bg);
	color: var(--text);
	font: 13px/1.45 var(--font);
}

table, td, th, span, div, p, li, label {
	font-family: var(--font);
}

td, th, span {
	font-size: 13px;
}

a, a:hover {
	font: 13px var(--font);
	color: var(--accent);
	text-decoration: none;
}

a:hover { text-decoration: underline; }
a u { text-decoration: none; }

/* ---------- menu (JSCookMenu / ThemeOffice) ---------- */

#menu {
	background: var(--nav);
	border: 0;
	height: auto;
}

#myMenuID { background: transparent !important; }

.ThemeOfficeMenu { font-family: var(--font); }

td.ThemeOfficeMainItem,
td.ThemeOfficeMainItemHover,
td.ThemeOfficeMainItemActive {
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--nav-text);
	font: 500 13px var(--font);
	text-align: left;
}

td.ThemeOfficeMainItemHover,
td.ThemeOfficeMainItemActive {
	background: rgba(255, 255, 255, .1);
	border-bottom-color: var(--accent);
	color: #fff;
}

/* nos itens do menu principal esquerda/direita são só   (spans) */
span.ThemeOfficeMainFolderLeft,
span.ThemeOfficeMainFolderRight,
span.ThemeOfficeMainItemLeft,
span.ThemeOfficeMainItemRight { display: none; }

span.ThemeOfficeMainFolderText,
span.ThemeOfficeMainItemText {
	display: inline-block;
	padding: 11px 14px;
	font: 500 13px var(--font);
}

.ThemeOfficeSubMenu {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
	padding: 6px;
}

.ThemeOfficeSubMenuTable { min-width: 190px; }

.ThemeOfficeSubMenu td {
	border: 0 !important;
	background: transparent !important;
	padding: 7px 10px !important;
	color: var(--text);
}

.ThemeOfficeMenuItemText,
.ThemeOfficeMenuFolderText {
	width: auto;
	height: auto;
	font: 13px var(--font);
	white-space: nowrap;
}

.ThemeOfficeSubMenu tr.ThemeOfficeMenuItem { background: var(--surface); }

.ThemeOfficeSubMenu tr.ThemeOfficeMenuItemHover,
.ThemeOfficeSubMenu tr.ThemeOfficeMenuItemActive {
	background: var(--accent-weak);
}

.ThemeOfficeSubMenu tr.ThemeOfficeMenuItemHover td,
.ThemeOfficeSubMenu tr.ThemeOfficeMenuItemActive td { color: var(--accent); }

/* ---------- barra conta/usuário/licença e topo ---------- */

.bar_sup {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.bar_sup td {
	padding: 8px 4px 8px 12px;
	color: var(--muted);
	font: 500 12px var(--font);
}

.topo-crm {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 20px;
	background: var(--nav);
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.topo-crm .logo {
	display: block;
	width: 88px;
	height: 35px;
	background: url(../images/logo-activeline.svg) no-repeat left center / contain;
}

.topo-crm .titulo { font: 600 17px var(--font); color: var(--text); letter-spacing: .02em; }
.topo-crm .titulo:before { content: ""; display: inline-block; width: 1px; height: 18px; margin-right: 10px; background: var(--line-strong); vertical-align: -3px; }
.topo-crm .ultimo-login { margin-left: auto; font: 12px var(--font); color: var(--muted); }

#copy {
	width: 100%;
	padding: 16px 0;
	font: 12px var(--font);
	color: var(--muted);
}

/* ---------- abas (WebFXTabPane) ---------- */

.dynamic-tab-pane-control .tab-row .tab,
.dynamic-tab-pane-control .tab-row .tab.hover {
	width: auto;
	height: auto;
	margin: 0 4px 0 0;
	padding: 10px 16px;
	top: 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font: 500 13px var(--font);
}

.dynamic-tab-pane-control .tab-row .tab.hover { color: var(--text); }

.dynamic-tab-pane-control .tab-row .tab.selected {
	width: auto !important;
	height: auto !important;
	margin: 0 4px 0 0;
	padding: 10px 16px;
	top: 0;
	background: none !important;
	border-bottom: 2px solid var(--accent);
	color: var(--accent);
	font: 500 13px var(--font);
}

.dynamic-tab-pane-control .tab-row .tab a {
	color: inherit;
	font: inherit;
}

.dynamic-tab-pane-control .tab-page {
	width: 100%;
	top: 0;
	padding: 16px 0 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	color: var(--text);
	font: 13px var(--font);
}

/* ---------- avisos ---------- */

.warning {
	height: auto;
	min-height: 32px;
	width: 100%;
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
	border-radius: var(--r);
	color: var(--warn-text);
	font-weight: 500;
}

/* ---------- formulários ---------- */

input:not([type=checkbox]):not([type=radio]):not([type=image]):not([type=file]),
select {
	box-sizing: border-box;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--text);
	font: 13px var(--font);
}

textarea {
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--text);
	font: 13px var(--font);
}

input[type=checkbox],
input[type=radio] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

input:focus, select:focus, textarea:focus {
	outline: 0;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-weak);
}

input[type=button], input[type=submit], input[type=reset], button {
	width: auto;
	min-width: 80px;
	padding: 0 16px;
	background: var(--surface);
	color: var(--text);
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--shadow);
}

input[type=button]:hover, button:hover { background: var(--surface-2); border-color: var(--accent); }

input[type=submit], button.primario {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 700;
}

input[type=submit]:hover, button.primario:hover { background: var(--accent-dark); box-shadow: var(--glow); }

/*
 * Respiro dos controles: style.css força width:100% e as tabelas legadas têm cellpadding 0/1,
 * então os campos (agora com 32px) ocupavam a célula inteira e se encostavam. O espaço vai na
 * célula que contém o controle (largura 100% + margin estouraria a célula).
 */
td:has(> input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not([type=hidden])),
td:has(> select),
td:has(> textarea) { padding: 3px 4px; }

textarea { margin: 2px 0; }

select[multiple] { height: auto; padding: 4px 6px; }

input[type=button], input[type=submit], input[type=reset] { margin: 2px; }
.publico .acoes input { margin: 0; }

/* ---------- grids ---------- */

.subcorpo {
	border: 1px solid var(--line);
	background: var(--surface);
	font: 13px var(--font);
}

.subcorpo th {
	padding: 9px 10px;
	background: var(--surface-2);
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font: 600 12px var(--font);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.subcorpo th a,
.subcorpo th a:link,
.subcorpo th a:visited,
.subcorpo th a:hover { background: transparent; color: var(--muted); font: inherit; }

.subcorpo td {
	padding: 8px 10px;
	border: 0;
	border-bottom: 1px solid var(--line);
	font: 13px var(--font);
}

.subcorpo a:link, .subcorpo a:visited { color: var(--accent); }

/*
 * Linhas: odd1/odd2 = zebra, oddX = inadimplente, oddZ = destaque azul.
 * Sufixo "c" = linha marcada (checkbox), "s" = mouse sobre a linha (M_Over/M_Out em script.php).
 */
.odd1 { background-color: var(--surface-2); }
.odd2 { background-color: var(--surface); }
.odd1c, .odd2c { background-color: var(--accent-sel); }
.odd1s, .odd2s { background-color: var(--accent-weak); }

.oddX1, .oddX2 { background-color: var(--danger-bg); }
.oddX1c, .oddX2c { background-color: rgba(180, 35, 24, .38); }
.oddX1s, .oddX2s { background-color: rgba(180, 35, 24, .3); }

.oddZ1, .oddZ2 { background-color: var(--info-bg); }
.oddZ1c, .oddZ2c { background-color: rgba(56, 140, 220, .3); }
.oddZ1s, .oddZ2s { background-color: rgba(56, 140, 220, .22); }

.menuABC { font-size: 13px; padding: 6px 0; }
.menuABC A:LINK, .menuABC A:VISITED { color: var(--accent); }
.menuABC A:HOVER, .menuABC A:ACTIVE { color: var(--accent-dark); }

/* ---------- telas públicas (login, esqueci minha senha, acesso inválido) ---------- */

.publico {
	display: flex;
	justify-content: center;
	padding: 48px 16px;
}

.publico .cartao {
	width: 400px;
	max-width: 100%;
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow), var(--glow);
	text-align: left;
}

.publico h1 { margin: 0 0 6px; font: 600 20px var(--font); color: var(--text); }
.publico .sub { margin: 0 0 20px; color: var(--muted); font: 13px var(--font); }
.publico label { display: block; margin: 0 0 4px; color: var(--muted); font: 500 13px var(--font); }
.publico .campo { margin-bottom: 14px; }
.publico .campo input { width: 100%; height: 38px; }
.publico .captcha { margin: 4px 0 16px; }
.publico .acoes { display: flex; gap: 8px; align-items: center; }
.publico .acoes input[type=submit], .publico .acoes .botao { flex: 1; height: 38px; }
.publico .links { margin-top: 16px; font-size: 13px; }
.publico .aviso {
	margin-bottom: 16px;
	padding: 10px 12px;
	background: var(--warn-bg);
	border: 1px solid var(--warn-line);
	border-radius: 6px;
	color: var(--warn-text);
	font: 500 13px var(--font);
}

.publico .botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	color: var(--text);
	font: 500 13px var(--font);
}

.publico .botao:hover { background: var(--surface-2); text-decoration: none; }

/* ---------- legado: neutraliza cores de atributo HTML e de style.css / ThemeOffice ---------- */

table[bgcolor], td[bgcolor], th[bgcolor], tr[bgcolor] { background-color: var(--surface); }
font[color] { color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--accent); color: var(--on-accent); }

.menu th, .tlogintitle { color: var(--accent); }

/* barras de filtros/parâmetros e opcionais (antes em style inline azul/verde nos módulos) */
.barra-parametros, .barra-opcionais {
	height: 30px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--text);
}

.barra-parametros { border-left: 3px solid var(--accent); }

.corpo-parametros, .corpo-opcionais {
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text);
}

.caixa-info {
	background: var(--info-bg);
	border: 1px solid var(--line);
	color: var(--text);
}

/* tela inicial (Stats): links do menu/contadores e coluna de destaque Dia/Total */
.menu_cadastro a, .menu_cadastro a:link, .menu_cadastro a:visited { color: var(--text); }
.menu_cadastro a:hover { color: var(--accent); }
.menu_cadastro td[align=right] a { font-family: var(--mono); }
.col-destaque { background: var(--surface-2); }

/* scrollbars */
* { scrollbar-color: var(--line-strong) var(--bg); }

/* impressão: sempre em papel claro */
@media print {
	:root {
		color-scheme: light;
		--bg: #fff; --surface: #fff; --surface-2: #fff; --line: #ddd; --line-strong: #bbb;
		--text: #000; --muted: #444; --nav: #fff; --nav-text: #000;
	}
	body { background: #fff; color: #000; }
}