/**
 * Reskin do modal "Criar Alerta" nativo do addon WP Job Manager Alerts.
 * Réplica do mockup aprovado — usa exclusivamente as variáveis de variables.css.
 *
 * O CSS do próprio plugin (wp-job-manager-ui) só é enfileirado quando o modal
 * é construído, a meio do render da página, por isso carrega DEPOIS deste
 * ficheiro. Onde a especificidade seria empatada com uma classe do plugin,
 * prefixamos com "html" para garantir que a nossa reskin vence sempre,
 * independentemente da ordem de carregamento (mesma técnica já usada em
 * jobs-listing.css).
 */

/*
 * Causa raiz do modal "transparente": o próprio ui.css do WP Job Manager
 * declara --jm-ui-background-color e --jm-ui-text-color como "initial" no
 * :root. Em custom properties, "initial" é o valor garantidamente inválido —
 * quando isso acontece, o fallback de var(--jm-ui-background-color, #fff)
 * NUNCA é usado (o fallback só serve para propriedades genuinamente não
 * definidas, não para valores inválidos); a propriedade real acaba "unset",
 * o que dá background-color:transparent no cartão do modal.
 *
 * Não é uma questão de especificidade — é dar um valor real a estas duas
 * variáveis. Ao defini-las diretamente em .jm-dialog (não em :root, para não
 * afetar mais nada no site), a herança normal do CSS trata do resto: todos
 * os descendentes (.jm-dialog-modal, .jm-notice, etc.) passam a herdar estes
 * valores em vez do "initial" do plugin, sem precisar de lutar por
 * especificidade nem usar !important.
 */
.jm-dialog,
.jm-alert-page {
	--jm-ui-background-color: var(--color-background);
	--jm-ui-text-color: var(--color-text);
}

html .jm-dialog-backdrop {
	background: rgba(20, 32, 30, 0.6);
}

/*
 * v1.78.1: compactação geral — de 40px/24px/24px (var(--space-xl)/
 * var(--space-lg)) para 18px/20px/18px, nenhum token existente cobre
 * exatamente este alvo (--space-md=16px fica ligeiramente abaixo do
 * pedido), por isso valores literais aqui, deliberados. max-height +
 * overflow-y como rede de segurança (nunca a estratégia principal — a
 * compactação abaixo já elimina o scroll nas resoluções-alvo 1080p/768p,
 * confirmado ao vivo) para qualquer viewport ainda mais baixo.
 */
html .jm-dialog-modal {
	max-width: 420px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 18px 20px 18px;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -12px rgba(20, 32, 30, 0.35);
	font-family: var(--font-body);
}

/*
 * v1.78.1 — descoberta durante a medição ao vivo (768p): ".jm-dialog
 * .jm-notice" (ui.css nativo do WPJM core) tem o SEU PRÓPRIO padding
 * interno via a custom property "--jm-dialog-padding" (=
 * var(--jm-ui-space-l), 48px), empilhado por cima do padding de
 * ".jm-dialog-modal" já compactado acima — 2 camadas de padding a somar
 * ~66px de cada lado antes de qualquer campo do formulário. Corrigido
 * redefinindo a variável (herança de custom properties, mesma técnica já
 * usada acima para --jm-ui-background-color/--jm-ui-text-color) — nunca
 * lutar por especificidade contra a regra nativa. Scoped ao ID do próprio
 * dialog (nunca ".jm-dialog" genérico) para nunca afetar outro possível
 * dialog nativo do WPJM no mesmo site.
 */
#jm_add_alert_modal {
	--jm-dialog-padding: 16px;
}

/* Botão fechar circular — 28px (era 34px), acompanha a compactação geral. */
html .jm-dialog-close {
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #F3F6F5;
}

html .jm-dialog-close:hover {
	background: var(--color-primary-light);
}

/* Ícone circular no topo — injetado via ::before, o template do plugin não tem
   nenhum elemento próprio para isto. Layout base (coluna) preservado tal
   como estava para qualquer outro consumidor de .jm-notice__header (ex: o
   ecrã "Alerta Criado", .cais-job-alerts-page) — a variante em linha do
   redesenho do modal (v1.78.0) é definida mais abaixo, scoped só a
   #jm_add_alert_modal, nunca sobrepondo esta regra de base. */
.jm-notice__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.jm-notice__header::before {
	content: '';
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: var(--space-md);
	border-radius: 50%;
	background-color: var(--color-primary-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

.jm-notice__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}

/* Subtítulo — o plugin mostra uma de duas frases possíveis (com/sem email
   pré-preenchido); estilizamos ambas genericamente. Compactado em v1.78.1
   (era var(--space-lg), 24px) — só dentro do modal, nunca a página
   [job_alerts] (o mesmo ".jm-form > p" não existe lá, é uma marcação
   exclusiva do template do modal). */
html .jm-form > p {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: 10px;
}

/* ----------------------------------------------------------------------
   Redesenho v1.78.0/v1.78.1 (mockup aprovado + compactação) — tudo scoped
   a #jm_add_alert_modal, nunca afeta o ecrã "Alerta Criado"/"Alerta
   Confirmado" (.jm-notice solto em .cais-job-alerts-page) nem
   my-alerts.php, que reaproveitam as mesmas classes base
   .jm-notice__header/.jm-notice__title acima.
   ---------------------------------------------------------------------- */

/* Cabeçalho: ícone à esquerda (36px, era 44px em v1.78.0/52px de base),
   título + subtítulo empilhados à direita — nunca a coluna empilhada de
   base. */
#jm_add_alert_modal .jm-notice__header {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}

#jm_add_alert_modal .jm-notice__header::before {
	width: 36px;
	height: 36px;
	margin-bottom: 0;
	flex-shrink: 0;
	background-size: 16px 16px;
}

#jm_add_alert_modal .jm-notice__title {
	font-size: 1.05rem;
	margin-bottom: 1px;
}

.cais-alert-subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin: 0;
}

/*
 * v1.78.1: cabeçalho de secção (Email/Frequência/Província/Categoria) —
 * margem reduzida de 0.45rem para 0.3rem (compactação geral). ".cais-visually-hidden"
 * (v1.78.0) foi removida por completo — o <select> de frequência deixou de
 * ser escondido, é sempre o próprio campo visível agora.
 */
.cais-alert-field-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.3rem;
}

.cais-alert-field-group {
	margin-bottom: 10px;
}

/* Pill de destinatário — utilizador autenticado (email fixo, sem campo).
   Compactada em v1.78.1 (era 0.6rem 0.9rem). */
.user-pill {
	background: #FAFBFA;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.45rem 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--text-sm);
	color: var(--color-text);
}

.user-pill svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

/* Convidado — o <input type="email"> nativo continua a ser o campo
   submetido; só o wrapper ganha o mesmo tratamento de secção. */
.cais-alert-email-input-wrap {
	margin-bottom: 0;
}

/* A linha "Keyword" é preenchida via JS nativo do plugin só quando se chega
   ao modal a partir do link "Showing X jobs" da pesquisa nativa — no nosso
   botão fica sempre vazia, por isso escondemo-la (não faz parte do mockup). */
.job-alert-keyword {
	display: none;
}

/*
 * v1.78.1: margem reduzida (era var(--space-md), 16px) — só dentro do
 * modal (#jm_add_alert_modal), nunca a nível global: ".jm-form-field"
 * também é usada pela página [job_alerts] (wp-job-manager-alerts/
 * alert-form.php, override do tema, já estabilizada — nunca tocada aqui).
 */
#jm_add_alert_modal .jm-form-field {
	margin-bottom: 10px;
}

/*
 * v1.78.0: a pseudo-etiqueta "Email" antes injetada via ::before neste
 * campo foi substituída pelo grupo real "Email de Destino"
 * (.cais-alert-field-label, alert-modal.js::buildRecipientField()) —
 * mantê-la produziria duas etiquetas sobrepostas. A página [job_alerts]
 * nunca dependeu desta regra (já tinha sempre o seu próprio <label> real),
 * por isso removê-la aqui não afeta essa página.
 */

html .jm-form input[type="email"],
html .jm-form select {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-background);
}

html .jm-form input[type="email"]:focus,
html .jm-form select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.jm-form label[for="alert_frequency"] {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.3rem;
}

/*
 * v1.78.1 — select nativo estilizado, partilhado por Frequência
 * (#alert_frequency, sempre presente) e pelos 2 novos dropdowns de
 * Província/Categoria (alert-modal.js::buildRegionCategoryDropdowns(),
 * exclusivos de Home/[jobs]). Substitui por completo o controlo
 * segmentado do redesenho anterior (v1.78.0) — o próprio <select> nativo
 * é sempre o campo visível e submetido, nunca escondido/sincronizado por
 * JS. Cores/raio mapeados para os tokens do tema (--color-border/
 * --color-primary/--radius-md), nunca os valores literais do mockup de
 * referência (#dbe3df/#005943) — mesma convenção já usada em todo este
 * ficheiro desde a v1.78.0, para respeitar a cor primária configurável no
 * Customizer (v1.70.0) em vez de a fixar. Especificidade via
 * "#jm_add_alert_modal" (nunca "html .jm-form select", que teria
 * especificidade insuficiente para vencer a regra genérica acima).
 */
#jm_add_alert_modal .cais-alert-select {
	width: 100%;
	height: 40px;
	padding: 0 2rem 0 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362726B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 16px 16px;
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
	cursor: pointer;
}

#jm_add_alert_modal .cais-alert-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

/*
 * Dropdowns de Província/Local e Categoria (v1.78.1) — 2 <select> lado a
 * lado (empilham em ecrãs estreitos), cada um o próprio campo submetido
 * (name="alert_regions"/"alert_cats[]" diretamente, nunca um hidden input
 * paralelo). Substitui por completo a antiga secção "Categorias
 * Monitoradas" (chips, v1.78.0).
 */
.cais-alert-dropdowns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.cais-alert-dropdown-group {
	flex: 1 1 150px;
	margin-bottom: 0;
}

/* Checkbox de consentimento — regra base preservada tal-e-qual (também
   usada pela página [job_alerts], nunca tocada aqui); só a margem inferior
   é reduzida, scoped ao modal (v1.78.1, era var(--space-lg), 24px). */
html .jm-form-fine-print {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: var(--space-lg);
}

#jm_add_alert_modal .jm-form-fine-print {
	margin-bottom: 12px;
}

html .jm-form-fine-print input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-top: 2px;
	accent-color: var(--color-primary);
	flex-shrink: 0;
}

html .jm-form-fine-print label {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.4;
}

/*
 * Ações (v1.78.0) — "Ativar Alerta" (cheio, com ícone) + "Cancelar" (agora
 * um botão secundário com borda, nunca mais um link sublinhado). Ordem
 * visual invertida via "order" (flex) para bater certo com o mockup
 * (Cancelar à esquerda) sem reordenar o DOM nativo do plugin (Subscribe
 * vem sempre primeiro em add-alert-modal.php) — nunca um template
 * override só para isto.
 */
html .jm-ui-actions-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

html .jm-ui-actions-row .jm-ui-button {
	order: 2;
	flex: 1.6;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-base);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

html .jm-ui-actions-row .jm-ui-button::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

html .jm-ui-actions-row .jm-ui-button:hover {
	background: var(--color-primary-dark);
}

html .jm-ui-actions-row .jm-ui-button--link {
	order: 1;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	border-radius: var(--radius-sm);
	padding: 0.65rem 1rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--text-base);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

html .jm-ui-actions-row .jm-ui-button--link:hover {
	background: #FAFBFA;
}

/*
 * v1.78.1: mobile ainda mais compacto que a base (18px/20px/18px) — nunca
 * usa var(--space-lg)/var(--space-md) como antes (24px/16px, mais largo
 * do que a base atual). max-height + overflow-y já definidos na regra
 * base cobrem qualquer viewport residualmente baixo.
 */
@media (max-width: 480px) {
	html .jm-dialog-modal {
		padding: 14px 16px 14px;
	}

	/*
	 * Bug real encontrado ao medir ao vivo em mobile (390px): "flex: 1 1
	 * 150px" (regra base, pensada para a largura em modo row) é
	 * reinterpretado como ALTURA quando o eixo principal muda para
	 * vertical (flex-direction:column) — cada grupo esticava para ~150px
	 * de altura (310px de altura total só para os 2 selects, confirmado
	 * via getBoundingClientRect() antes desta correção). "flex: 0 0 auto"
	 * volta a deixar cada grupo com a sua altura natural de conteúdo.
	 */
	.cais-alert-dropdowns {
		flex-direction: column;
	}

	.cais-alert-dropdown-group {
		flex: 0 0 auto;
	}
}

/* ----------------------------------------------------------------------
   Página [job_alerts] (wp-job-manager-alerts/alert-form.php, override do
   tema) — reaproveita as classes acima (.jm-notice__header com o mesmo
   ícone de sino via ::before, .jm-form-field, .jm-ui-actions-row/
   .jm-ui-button), nunca duplicadas; só o enquadramento de página (nunca
   um diálogo/overlay, é conteúdo normal da página) e os elementos que o
   modal rápido não tinha (label de cada campo, título/hint da secção de
   termos de pesquisa) são definidos aqui de novo.
   ---------------------------------------------------------------------- */

/*
 * Problema 2 (v1.42.7): largura confirmada inconsistente com os outros
 * cards de formulário já estilizados do tema — 460px é o MESMO valor
 * literal já usado em ".auth-card" (assets/css/auth.css, fora da lista de
 * ficheiros a tocar — valor só lido, nunca esse ficheiro importado/
 * referenciado, para não criar uma dependência entre os dois).
 */
.jm-alert-page {
	max-width: 460px;
	margin: var(--space-xl) auto;
	padding: 0 var(--space-md);
}

.jm-alert-page-card {
	background: var(--color-background);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -12px rgba(20, 32, 30, 0.12);
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	font-family: var(--font-body);
}

/*
 * Bug real confirmado ao vivo (v1.42.6): o próprio ui.css do WPJM tem uma
 * regra ".jm-form .jm-form-field:has(label:first-child){display:flex}"
 * (documentada também em alert-modal.js, a razão pela qual os chips de
 * categoria do modal rápido usam de propósito uma classe própria em vez de
 * ".jm-form-field") — como este template TEM um <label> real como primeiro
 * filho em cada campo (ao contrário do modal rápido), cada campo ficava
 * espremido lado a lado (label|input), cortando o texto. Neutralizado só
 * dentro de ".jm-alert-page-form" (nunca a nível global — o modal rápido
 * continua a precisar do layout nativo intacto para a sua própria
 * checkbox), com o mesmo prefixo "html" já usado no resto deste ficheiro
 * para garantir especificidade suficiente independentemente da ordem de
 * carregamento face ao ui.css nativo.
 */
html .jm-alert-page-form .jm-form-field:has(label:first-child) {
	display: block;
}

html .jm-alert-page-form .jm-form-field:has(label:first-child) > * {
	flex: unset;
	width: 100%;
}

.jm-alert-page-form .jm-form-field label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.45rem;
}

.jm-alert-page-form input[type="text"] {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background: var(--color-background);
}

.jm-alert-page-form input[type="text"]:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.jm-alert-page-form .jm-form-field p {
	font-size: var(--text-base);
	color: var(--color-text);
}

.jm-alert-page-section-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--color-text);
	margin-top: var(--space-lg);
	margin-bottom: 0.3rem;
}

.jm-alert-page-section-hint {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin-bottom: var(--space-md);
}

.jm-alert-page-form select {
	width: 100%;
}

@media (max-width: 480px) {
	.jm-alert-page-card {
		padding: var(--space-lg) var(--space-md) var(--space-md);
	}
}

/*
 * Problema 1 (v1.42.7): ecrã de sucesso "Alert created" (Shortcodes::
 * create_new_guest_alert(), confirmado por leitura direta) NUNCA passa
 * por wp-job-manager-alerts/alert-form.php — é ecoado diretamente por
 * job_alerts() antes de qualquer template, como um `.jm-notice` solto,
 * filho direto de `.entry-content` (confirmado por inspeção do HTML
 * servido: `<div class="entry-content"><div class="jm-notice ...">`).
 * Por isso precisa do seu PRÓPRIO seletor (nunca `.jm-alert-page`, que só
 * envolve o formulário) — `.cais-job-alerts-page` vem do filtro
 * body_class já usado no resto do tema para este exato problema (ver
 * cais-submit-job-page/cais-job-dashboard-page, functions.php).
 *
 * `> .jm-notice` (filho direto) exclui deliberadamente o aviso de
 * "Inicia sessão..." que já vive dentro de `.jm-alert-page-card` (esse já
 * está estilizado, nunca deve ganhar um segundo cartão dentro do
 * primeiro).
 */
.cais-job-alerts-page .entry-content > .jm-notice {
	max-width: 460px;
	min-width: 0;
	margin: var(--space-xl) auto;
	background: var(--color-background);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -12px rgba(20, 32, 30, 0.12);
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	font-family: var(--font-body);
}

.cais-job-alerts-page .entry-content > .jm-notice .jm-notice__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-text);
}

.cais-job-alerts-page .entry-content > .jm-notice .jm-ui-icon {
	color: var(--color-primary);
}

.cais-job-alerts-page .entry-content > .jm-notice .jm-notice__message {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.5;
}

/*
 * Problema 3 (v1.42.7): o dropdown de Categorias/Tipo de Trabalho é um
 * widget select2 (confirmado por inspeção ao vivo — classe
 * "select2-hidden-accessible" no <select> original, gerado pelo próprio
 * script nativo wp-job-manager-term-multiselect, nunca um componente
 * nosso). O ui.css do WPJM estiliza `.select2-dropdown` com
 * `background-color:var(--jm-ui-background-color,#fff)` — a MESMA
 * variável CSS já documentada acima como "initial" (inválida) na origem
 * do plugin; a correção já aplicada (`.jm-dialog, .jm-alert-page {
 * --jm-ui-background-color: ... }`) não alcança este caso porque o
 * select2 acrescenta o dropdown diretamente ao <body> (confirmado via
 * DevTools: elemento pai é um <span> solto, fora de qualquer wrapper
 * nosso) — nunca dentro de `.jm-alert-page`, por isso a variável não é
 * herdada. Corrigido com uma cor sólida direta (nunca dependente de
 * custom properties de terceiros) — `!important` justificado aqui:
 * sobrepor um `background-color` que já vem de uma variável CSS do
 * próprio plugin, mesmo padrão de justificação já usado no Bug 2 do
 * "Draft was saved" (v1.26.0). Sem scope a `.jm-alert-page`/
 * `.cais-job-alerts-page` de propósito — o mesmo widget é usado por
 * qualquer campo `job_manager_dropdown_categories()` do site inteiro
 * (ex: filtros de categoria da listagem de vagas), e um dropdown
 * translúcido é sempre um defeito visual, nunca desejável em nenhum
 * contexto.
 */
.select2-dropdown {
	background-color: #fff !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-sm);
	box-shadow: 0 12px 32px -8px rgba(20, 32, 30, 0.25);
	z-index: 999999;
}

.select2-container--default .select2-results__option {
	background-color: #fff;
	color: var(--color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--color-primary-light) !important;
	color: var(--color-primary-dark) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #F1F3F2 !important;
}

/*
 * Problema 5 (v1.42.7): o título nativo da página (`the_title()`, gerado
 * por template-parts/content-blog-loop.php — fora da lista de ficheiros a
 * tocar) usa a tipografia genérica do WordPress, nunca o design system do
 * tema. Escondido/reestilizado só nesta página via a mesma técnica já
 * usada para "cais-submit-job-page" (esconder o título nativo duplicado)
 * — aqui não há duplicação de título, por isso só se troca a tipografia,
 * nunca se esconde.
 */
.cais-job-alerts-page .entry-header .entry-title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	letter-spacing: -0.01em;
	color: var(--color-text);
}

/*
 * Problema 1 (v1.43.0): a tipografia do título já estava corrigida (v1.42.7,
 * regra acima) — confirmado ao vivo via getComputedStyle() nas 4 páginas do
 * fluxo (formulário, "Alert created", "Alert confirmed", gestão sem conta)
 * que o font-family/peso já é Manrope/800 em todas. O que ainda ficava "no
 * canto" era só o ESPAÇAMENTO: sem nenhum padding próprio,
 * template-parts/content-blog-loop.php (fora da lista de ficheiros a tocar,
 * partilhado por qualquer página simples do site) deixa o título encostado
 * à margem esquerda/topo, sem a respiração de secção que o resto do design
 * system usa (mesmo padrão de .page-hero em jobs-listing.css). Corrigido só
 * com espaçamento/centragem, nunca tocando content-blog-loop.php.
 */
.cais-job-alerts-page .entry-header {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
	text-align: center;
}

/*
 * Problema 3 (v1.43.0): my-alerts.php nativo (override do tema,
 * wp-job-manager-alerts/my-alerts.php — mesmas classes .jm-alert*, só a
 * marcação ganhou classes extra e a data passou a cais_format_alert_next_run()
 * em vez de date_i18n() nativo) sem nenhum estilo próprio — cada alerta como
 * card branco, ações como links discretos, botão "Add alert" reaproveitando
 * .jm-ui-button/.jm-ui-actions-row já definidos acima (mesmo botão visual do
 * "Guardar Alerta"), sem duplicar CSS.
 */
.cais-job-alerts-page #job-manager-alerts {
	max-width: 700px;
	margin: 0 auto;
}

.cais-job-alerts-page .jm-alerts__my-alerts__email-info p {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	margin-bottom: var(--space-lg);
	text-align: center;
}

.cais-job-alerts-page .jm-alert {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
}

.cais-job-alerts-page .jm-alert__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.cais-job-alerts-page .jm-alert__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-text);
}

.cais-job-alerts-page .jm-alert__frequency {
	font-size: var(--text-sm);
	color: var(--color-primary);
	font-weight: 600;
	white-space: nowrap;
}

.cais-job-alerts-page .jm-alert__disabled {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
	background: #F1F3F2;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
}

.cais-job-alerts-page .jm-alert__terms {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-bottom: 0.3rem;
}

.cais-job-alerts-page .jm-alert__term-label {
	font-weight: 600;
	color: var(--color-text);
	margin-right: 0.3rem;
}

.cais-job-alerts-page .jm-alert__actions {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}

.cais-job-alerts-page .jm-alert__actions ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cais-job-alerts-page .jm-alert__action {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 0.8rem;
	font-weight: 600;
	background: var(--color-background);
	text-decoration: none;
}

.cais-job-alerts-page .jm-alert__action:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.cais-job-alerts-page .job-alerts-action-delete {
	border-color: transparent;
	color: #C0594A;
}

.cais-job-alerts-page .job-alerts-action-delete:hover {
	border-color: #C0594A;
	color: #C0594A;
}

.cais-job-alerts-page .jm-alerts__no-alerts {
	text-align: center;
}

.cais-job-alerts-page .jm-alerts__add-new {
	margin-top: var(--space-lg);
	justify-content: center;
}

@media (max-width: 560px) {
	.cais-job-alerts-page .jm-alert__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * ============ MODO ESCURO (v1.93.1) ============
 * .user-pill/.jm-ui-actions-row .jm-ui-button--link:hover/.jm-alert__disabled
 * — mesma família de bug já corrigida na v1.93.0 (#F3F6F5/#FAFBFA/#F1F3F2,
 * cinzas quase-brancos sem token equivalente, encontrados em quase todo o
 * tema por auditoria sistemática) — reaproveitam --color-border.
 *
 * .select2-dropdown/.select2-results__option — achado adicional aprovado
 * explicitamente: o dropdown nativo do WPJM (fora do âmbito original desta
 * fase, mas parte do mesmo objetivo "uniforme de ponta a ponta") tem fundo
 * branco fixo com !important (linha ~644 acima) — nunca alcançável por uma
 * simples reatribuição de variável. Corrigido com o mesmo !important
 * dentro do escopo html[data-theme="dark"], nunca removendo o !important
 * original (continua necessário para o caso claro).
 */
html[data-theme="dark"] .user-pill {
	background: var(--color-border);
}

html[data-theme="dark"] .jm-dialog-close {
	background: var(--color-border);
}

html[data-theme="dark"] .jm-ui-actions-row .jm-ui-button--link:hover {
	background: var(--color-border);
}

html[data-theme="dark"] .cais-job-alerts-page .jm-alert__disabled {
	background: var(--color-border);
}

html[data-theme="dark"] .select2-dropdown {
	background-color: var(--color-background) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option {
	background-color: var(--color-background);
}

html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--color-border) !important;
}