/*
 * Tema Resultam para o login e o painel do Resultam Manda (Sendy 7.1.6).
 * Carregado por uma linha marcada <!-- resultam-theme --> antes do </head> de includes/header.php,
 * depois de css/(dark/)all.css e all2.css. Ajusta as variáveis --bf-* do Sendy e troca os roxos
 * fixos pela paleta da Resultam. Modo escuro detectado pela folha css/dark/ carregada na página.
 * Seletores que dependem do HTML do Sendy: docs/fragile-points.md.
 */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/outfit-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/outfit-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/outfit-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/outfit-latin-700.woff2") format("woff2"); }

/* ---------- Claro (padrão dos clientes) ---------- */
:root {
	--rm-black: #0B0B0C;
	--rm-white: #FFFFFF;
	--rm-mist: #F5F5F5;
	--rm-graphite: #16181A;
	--rm-graphite-2: #111315;
	--rm-blue: #29ABE2;
	--rm-blue-dark: #0B76A3;
	--rm-font: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--bf-font: var(--rm-font);
	--bf-bg: var(--rm-mist);
	--bf-bg-soft: var(--rm-mist);
	--bf-panel: var(--rm-white);
	--bf-panel-soft: var(--rm-white);
	--bf-panel-elevated: var(--rm-white);
	--bf-ink: var(--rm-black);
	--bf-ink-soft: var(--rm-graphite);
	--bf-muted: rgba(11, 11, 12, 0.68);        /* preto da paleta com transparência */
	--bf-border: rgba(11, 11, 12, 0.12);
	--bf-border-strong: rgba(11, 11, 12, 0.5);
	--bf-accent: var(--rm-black);
	--bf-accent-strong: var(--rm-blue-dark);
	--bf-accent-soft: rgba(41, 171, 226, 0.12);
	--bf-highlight: rgba(11, 11, 12, 0.04);
	--bf-highlight-strong: rgba(11, 11, 12, 0.08);
	--bf-nav: var(--rm-white);
	--bf-nav-soft: var(--rm-white);
	--bf-shadow: none;
	--bf-shadow-soft: none;

	/* Botão principal e foco */
	--rm-cta-bg: var(--rm-blue);
	--rm-cta-ink: var(--rm-black);              /* preto sobre #29ABE2: 8,1:1 (branco daria 2,6:1) */
	--rm-cta-hover: #0B76A3;
	--rm-cta-hover-ink: var(--rm-white);
	--rm-focus: var(--rm-blue-dark);
	--rm-link: var(--rm-blue-dark);
}

/* ---------- Escuro (quando a página carrega css/dark/) ---------- */
:root:has(link[href*="/css/dark/"]) {
	--bf-bg: var(--rm-black);
	--bf-bg-soft: var(--rm-graphite-2);
	--bf-panel: var(--rm-graphite);
	--bf-panel-soft: var(--rm-graphite);
	--bf-panel-elevated: var(--rm-graphite);
	--bf-ink: var(--rm-white);
	--bf-ink-soft: rgba(255, 255, 255, 0.86);
	--bf-muted: rgba(255, 255, 255, 0.68);
	--bf-border: rgba(255, 255, 255, 0.12);
	--bf-border-strong: rgba(255, 255, 255, 0.5);
	--bf-accent: var(--rm-white);
	--bf-accent-strong: var(--rm-blue);
	--bf-accent-soft: rgba(41, 171, 226, 0.16);
	--bf-highlight: rgba(255, 255, 255, 0.05);
	--bf-highlight-strong: rgba(255, 255, 255, 0.1);
	--bf-nav: var(--rm-graphite-2);
	--bf-nav-soft: var(--rm-graphite-2);
	--rm-focus: var(--rm-blue);
	--rm-link: var(--rm-blue);
}

/* ---------- Base ---------- */
html,
html:has(link[href*="/css/dark/"]) {
	background: var(--bf-bg);
}

html body {
	background: var(--bf-bg);
	color: var(--bf-ink);
	font-family: var(--rm-font);
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body .btn,
html body .navbar,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
	font-family: var(--rm-font);
}

html body a {
	color: var(--rm-link);
}

html body a:focus-visible,
html body button:focus-visible,
html body .btn:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
	outline: 2px solid var(--rm-focus) !important;
	outline-offset: 2px;
}

/* ---------- Barra superior ---------- */
html body .navbar .navbar-inner {
	background: var(--bf-nav);
	border-bottom: 1px solid var(--bf-border);
	box-shadow: none;
	backdrop-filter: none;
}

html body .navbar .brand {
	color: var(--bf-ink);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* ---------- Cartões, menu lateral, tabelas ---------- */
html body .well,
html body .sidebar-nav,
html body .sidebar-box {
	background: var(--bf-panel);
	border-color: var(--bf-border);
	box-shadow: none;
}

html body .well,
html body .sidebar-nav,
html body .sidebar-box,
html body .modal,
html body .dropdown-menu,
html body table.table,
html body .container-fluid > .row-fluid > [class*="span"],   /* o Sendy 7 usa a coluna .span10 como cartão */
html body .container-fluid > .row-fluid > .sendy-report-card {
	border-radius: 12px;
}

/* Etiquetas de status: azul-escuro com texto branco (5,1:1); aviso e erro em preto ou branco. */
html body .badge-success,
html body .label-success {
	background: var(--rm-blue-dark);
	border-color: var(--rm-blue-dark);
	color: var(--rm-white);
	text-shadow: none;
}

html body .badge-warning,
html body .label-warning,
html body .badge-important,
html body .label-important {
	background: var(--bf-ink);
	border-color: var(--bf-ink);
	color: var(--bf-bg);
	text-shadow: none;
}

html body .modal-header,
html body .modal-footer {
	background: var(--bf-panel);
	border-color: var(--bf-border);
}

/* ---------- Botões ---------- */
html body .btn {
	border-radius: 8px;
	box-shadow: none;
	font-weight: 500;
	transform: none;
}

html body .btn-primary,
html body .btn-inverse,
html body .btn-primary:active,
html body .btn-inverse:active {
	background: var(--rm-cta-bg);
	border-color: var(--rm-cta-bg);
	box-shadow: none;
	color: var(--rm-cta-ink) !important;   /* css/dark/bootstrap.css força .btn-inverse { color: #fff !important } */
	text-shadow: none;
}

html body .btn-primary i,
html body .btn-inverse i {
	color: inherit;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-inverse:hover,
html body .btn-inverse:focus {
	background: var(--rm-cta-hover);
	border-color: var(--rm-cta-hover);
	box-shadow: none;
	color: var(--rm-cta-hover-ink) !important;
}

/* css/dark/bootstrap.css força cinza #292929 !important no hover das linhas da tabela. */
html body .table tbody tr:hover td,
html body .table tbody tr:hover th {
	background-color: var(--bf-highlight-strong) !important;
	color: var(--bf-ink) !important;
}

html body .btn-white:hover,
html body .btn-white:focus {
	background: var(--bf-highlight);
}

/* ---------- Campos ---------- */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="number"],
html body input[type="url"],
html body select,
html body textarea {
	border-color: var(--bf-border-strong);
	border-radius: 8px;
	box-shadow: none;
}

html body input:focus,
html body input[type]:focus,   /* vence input[type="email"]:focus do Sendy, que é roxo */
html body select:focus,
html body textarea:focus {
	border-color: var(--rm-focus);
	box-shadow: none;
	border-radius: 8px;
}

/* Logo da Resultam no lugar do Gravatar, só na barra do admin e no login (img vinda do gravatar.com).
   Com um cliente logado, o Sendy mostra o logo e o nome da marca dele, e isso fica. */
html body .navbar .brand:has(> img.main-gravatar[src*="gravatar.com"]) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0;
}

html body .navbar .brand > img.main-gravatar[src*="gravatar.com"] {
	display: none;
}

html body .navbar .brand:has(> img.main-gravatar[src*="gravatar.com"])::before {
	content: "";
	display: block;
	width: 112px;
	height: 23px;
	background: url("logo.svg") no-repeat left center / contain;
}

html:has(link[href*="/css/dark/"]) body .navbar .brand:has(> img.main-gravatar[src*="gravatar.com"])::before {
	background-image: url("logo-white.svg");
}

html body .navbar .brand:has(> img.main-gravatar[src*="gravatar.com"])::after {
	content: "Manda";
	color: var(--bf-ink);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* ---------- Roxos fixos do Sendy trocados pela paleta ---------- */
html body .label-info,
html body .badge-info {
	background: var(--rm-blue-dark);
	border-color: var(--rm-blue-dark);
	color: var(--rm-white);
	text-shadow: none;
}

html body .alert-info {
	background: var(--bf-accent-soft);
	border-color: var(--bf-border);
	color: var(--bf-ink);
}

html body .sendy-report-score-bar span {
	background: var(--rm-blue);
}

html body #sendy-report-analysis-content > strong,
html body #sendy-report-analysis-content > p > strong:only-child,
html body #sendy-report-analysis-content h3 strong,
html body #sendy-report-analysis-content h4 strong,
html body .sendy-content-improvements-content > strong,
html body .sendy-content-improvements-content > p > strong:only-child,
html body .sendy-content-improvements-content h3 strong,
html body .sendy-content-improvements-content h4 strong {
	color: var(--rm-link);
}

html body textarea#html + .ck.ck-editor {
	--ck-color-focus-border: var(--rm-focus);
	--ck-color-button-default-hover-background: var(--bf-highlight);
	--ck-color-button-default-active-background: var(--bf-highlight-strong);
	--ck-color-button-on-background: var(--bf-accent-soft);
	--ck-color-button-on-hover-background: var(--bf-accent-soft);
	--ck-color-button-on-active-background: var(--bf-accent-soft);
	--ck-color-button-on-color: var(--bf-ink);
}

html body textarea#html + .ck.ck-editor .ck-editor__main > .ck-editor__editable.ck-focused,
html body textarea#html + .ck.ck-editor .ck-editor__main > .ck-source-editing-area:focus-within {
	border-color: var(--rm-focus);
	box-shadow: none;
}

/* ---------- Login ---------- */
html body #login-form,
html body #forgot {
	background: var(--bf-panel);
	border: 1px solid var(--bf-border);
	border-radius: 12px;
	box-shadow: none;
}

html body #login-form #password-login-btn {
	background: var(--rm-cta-bg);
	border-color: var(--rm-cta-bg);
	color: var(--rm-cta-ink);
	padding-left: 20px;
	padding-right: 20px;
}

html body #login-form #password-login-btn:hover,
html body #login-form #password-login-btn:focus {
	background: var(--rm-cta-hover);
	border-color: var(--rm-cta-hover);
	color: var(--rm-cta-hover-ink);
}

/* =====================================================================
   Usabilidade (1.0.2): leitura, alvos de clique e hierarquia das ações.
   Só aparência: nenhum texto, campo ou fluxo do Sendy muda.
   ===================================================================== */

/* ---------- Tabelas (listas, assinantes, campanhas, relatórios) ---------- */
html body .table th {
	padding: 12px;
	color: var(--bf-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;   /* caixa alta de 11 px com espaçamento era difícil de ler */
	vertical-align: bottom;
}

html body .table td {
	padding: 14px 12px;
	font-size: 15px;
	line-height: 1.4;
	vertical-align: middle;
}

/* Ícones de ação (editar, ocultar, excluir, duplicar) com área de clique de 36 px. */
html body .table td a:has(> i[class*="icon"]:only-child) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border-radius: 8px;
	text-decoration: none;
}

html body .table td a:has(> i[class*="icon"]:only-child):hover {
	background: var(--bf-highlight-strong);
}

html body .table td a > i[class*="icon"]:only-child {
	font-size: 16px;
}

/* Contadores e status dentro das tabelas: maiores e sem caixa alta espaçada. */
html body .table .label,
html body .table .badge {
	padding: 4px 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
}

/* ---------- Formulários (campanha, lista, marca) ---------- */
html body .control-label,
html body form label {
	margin-bottom: 6px;
	color: var(--bf-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
}

html body .container-fluid input[type="text"],
html body .container-fluid input[type="email"],
html body .container-fluid input[type="password"],
html body .container-fluid input[type="number"],
html body .container-fluid input[type="url"],
html body .container-fluid input[type="search"],
html body .container-fluid select:not([multiple]) {
	box-sizing: border-box;
	height: auto;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 15px;
	line-height: 22px;
}

/* Caixa de escolha de listas e segmentos na tela de envio. */
html body .container-fluid select[multiple] {
	box-sizing: border-box;
	padding: 8px;
	font-size: 15px;
	line-height: 1.5;
}

html body .container-fluid textarea {
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.5;
}

html body ::placeholder {
	color: var(--bf-muted);
	opacity: 1;
}

/* Textos de ajuda em itálico pequeno do Sendy. */
html body .container-fluid form em,
html body .container-fluid .help-block {
	color: var(--bf-muted);
	font-size: 13px;
	font-style: normal;
}

/* ---------- Botões: ação principal mais forte que as secundárias ---------- */
html body .container-fluid .btn {
	white-space: nowrap;
	padding: 10px 16px;
	font-size: 14px;
	line-height: 20px;
}

/* O Sendy estiliza o botão Salvar da campanha e da autoresposta pelo ID. */
html body #campaign-save-only-btn,
html body #autoresponder-save-only-btn {
	display: inline-block;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}

html body .container-fluid .btn-primary,
html body .container-fluid .btn-inverse {
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 600;
}

/* ---------- Menu lateral ---------- */
html body .sidebar-nav .nav-list > li > a {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 15px;
}

html body .sidebar-nav .nav-list > li.active > a,
html body .sidebar-nav .nav-list > li.active > a:hover {
	background: var(--bf-accent-soft);
	box-shadow: inset 3px 0 0 var(--rm-blue);
	color: var(--bf-ink);
}

html body .sidebar-nav .nav-list > li > a:hover {
	background: var(--bf-highlight-strong);
}

html body .sidebar-nav .nav-header {
	margin-top: 14px;
	color: var(--bf-muted);
	font-size: 12px;
	letter-spacing: 0.06em;
}

/* ---------- Mensagens de sucesso e erro ---------- */
html body .alert {
	padding: 14px 16px;
	border-width: 1px 1px 1px 4px;
	border-radius: 8px;
	font-size: 15px;
	text-shadow: none;
}

html body .alert-success {
	background: var(--bf-accent-soft);
	border-color: var(--rm-blue);
	color: var(--bf-ink);
}

html body .alert-error,
html body .alert-danger {
	background: var(--bf-panel);
	border-color: var(--bf-ink);
	color: var(--bf-ink);
}

/* ---------- Celular: área de toque de 44 px ---------- */
@media (max-width: 767px) {
	html body .container-fluid .btn,
	html body .sidebar-nav .nav-list > li > a {
		min-height: 44px;
	}
	html body .table td a:has(> i[class*="icon"]:only-child) {
		min-width: 44px;
		min-height: 44px;
	}
}

/* =====================================================================
   1.0.3: modo escuro sem degradês, barra superior legível, menu mais largo.
   ===================================================================== */

:root {
	--rm-btn-bg: var(--rm-white);
	--rm-btn-border: rgba(11, 11, 12, 0.16);
	--rm-btn-hover: var(--rm-mist);
}

:root:has(link[href*="/css/dark/"]) {
	--rm-btn-bg: var(--rm-graphite);
	--rm-btn-border: rgba(255, 255, 255, 0.16);
	--rm-btn-hover: rgba(255, 255, 255, 0.08);
}

/* Altura mínima conta o padding (o Bootstrap usa content-box nos botões). */
html body .btn,
html body #campaign-save-only-btn,
html body #autoresponder-save-only-btn {
	box-sizing: border-box;
}

/* Etiquetas sem cor própria (contadores "0"): sem o cinza do Sendy. */
html body .label:not([class*="label-"]),
html body .badge:not([class*="badge-"]) {
	background-color: var(--bf-highlight-strong);
	color: var(--bf-ink);
}

/* Sem degradês: o Sendy e o Bootstrap usam degradê em botões, menus, abas e cartões. */
html body .btn,
html body .navbar-inner,
html body .dropdown-menu,
html body .dropdown-menu li > a,
html body .well,
html body .modal,
html body .nav-tabs > li > a,
html body .pagination ul,
html body .sidebar-box,
html body .sidebar-box .nav-list > li > a,
html body .input-prepend .add-on,
html body .input-append .add-on,
html body .label,
html body .badge,
html body .grand_total,
html body #attachments li,
html body .rounded-dashed-box,
html body .dashed-box,
html body .container-fluid > .row-fluid > .span10,
html body .container-fluid > .row-fluid > .sendy-report-card {
	background-image: none !important;
	text-shadow: none !important;
}

html body .container-fluid > .row-fluid > .span10,
html body .container-fluid > .row-fluid > .sendy-report-card,
html body .sidebar-box,
html body .well,
html body .modal,
html body .grand_total,
html body #attachments li,
html body .rounded-dashed-box,
html body .dashed-box {
	background-color: var(--bf-panel);
	border-color: var(--bf-border);
	box-shadow: none;
}

/* Botões secundários: superfície sólida com borda, hover suave. Os principais ficam de fora. */
html body .btn:not(.btn-primary):not(.btn-inverse),
html body #campaign-save-only-btn,
html body #autoresponder-save-only-btn {
	background-color: var(--rm-btn-bg);
	border: 1px solid var(--rm-btn-border);
	box-shadow: none;
	color: var(--bf-ink);
}

html body .btn:not(.btn-primary):not(.btn-inverse):hover,
html body .btn:not(.btn-primary):not(.btn-inverse):focus,
html body #campaign-save-only-btn:hover,
html body #campaign-save-only-btn:focus,
html body #autoresponder-save-only-btn:hover,
html body #autoresponder-save-only-btn:focus {
	background-color: var(--rm-btn-hover);
	border-color: var(--rm-btn-border);
	box-shadow: none;
	color: var(--bf-ink);
	transform: none;
}

/* Botões de opção (Sim / Não, rastreamento): a opção marcada em azul suave com borda azul. */
html body .btn-group[data-toggle] > .btn.active,
html body .btn-group.tracking > .btn.active,
html body .btn-group > .btn:active {
	background-color: var(--bf-accent-soft) !important;
	border-color: var(--rm-blue) !important;
	box-shadow: none !important;
	color: var(--bf-ink) !important;
}

/* Menus suspensos */
html body .dropdown-menu {
	background-color: var(--bf-panel);
	border: 1px solid var(--bf-border);
	box-shadow: 0 8px 24px rgba(11, 11, 12, 0.16);
}

html body .dropdown-menu li > a {
	color: var(--bf-ink);
}

html body .dropdown-menu li > a:hover,
html body .dropdown-menu li > a:focus,
html body .dropdown-menu .active > a,
html body .dropdown-menu .active > a:hover {
	background-color: var(--bf-highlight-strong);
	color: var(--bf-ink);
}

/* Abas */
html body .nav-tabs > li > a:hover,
html body .nav-tabs > li > a:focus,
html body .nav-tabs > .active > a,
html body .nav-tabs > .active > a:hover,
html body .nav-tabs > .active > a:focus {
	background-color: var(--bf-panel);
	border-color: var(--bf-border);
	color: var(--bf-ink);
}

html body .pagination ul {
	background-color: transparent;
	box-shadow: none;
}

html body .input-prepend .add-on,
html body .input-append .add-on {
	background-color: var(--bf-highlight-strong);
	border-color: var(--bf-border-strong);
	color: var(--bf-ink);
}

/* Listas escolhidas na tela de envio. */
html body select option:checked {
	background: var(--rm-blue-dark) linear-gradient(0deg, var(--rm-blue-dark), var(--rm-blue-dark));
	color: var(--rm-white);
}

/* Linhas alternadas das tabelas sem o cinza do Sendy. */
html body .table-striped tbody > tr:nth-child(odd) > td,
html body .table-striped tbody > tr:nth-child(odd) > th {
	background-color: var(--bf-highlight);
}

/* Barra superior: seu nome e a troca de marca são botões btn-inverse transparentes.
   Sem esta regra herdavam o texto preto dos botões principais e sumiam no modo escuro. */
html body .navbar .btn,
html body .navbar .btn-inverse,
html body .navbar .btn-group > .btn {
	padding: 8px 10px;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--bf-ink) !important;
	font-size: 15px;
	font-weight: 500;
}

html body .navbar .btn:hover,
html body .navbar .btn:focus,
html body .navbar .btn-inverse:hover,
html body .navbar .btn-inverse:focus,
html body .navbar .open > .btn {
	background: var(--bf-highlight-strong) !important;
	border-color: transparent !important;
	color: var(--bf-ink) !important;
}

html body .navbar .btn .caret {
	border-top-color: var(--bf-ink);
}

/* Menu lateral mais largo no computador, para os itens caberem numa linha. */
@media (min-width: 980px) {
	html body .container-fluid > .row-fluid > .span2 {
		flex: 0 0 256px;
		width: 256px;
		max-width: 256px;
	}
}