/**
 * Painel do Candidato ("Visão Geral", v1.41.0) do tema Cais.
 * Réplica do mockup aprovado — usa exclusivamente os tokens reais de
 * variables.css (nunca os valores de exemplo do próprio ficheiro do
 * mockup, que usava uma paleta/escala de espaçamento próprias só para a
 * demonstração isolada): --font-display do mockup -> --font-heading do
 * tema, --color-primary #0F6B62 do mockup -> --color-primary #0F766E real,
 * etc. .site-header/.site-logo do mockup ficam de fora de propósito — o
 * cabeçalho real do site já vem de header.php/header.css (fora da lista
 * de ficheiros a tocar).
 *
 * Estrutura de sidebar/drawer mobile REPLICADA (nunca partilhada via
 * enqueue) de employer-dashboard.css — mesmo mecanismo já validado em
 * produção no Painel do Empregador, ficheiro fora da lista de ficheiros a
 * tocar nesta fase.
 */

.dashboard-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: calc(100vh - 200px);
}

/* ---------------- Sidebar ---------------- */

.dash-sidebar {
	background: var(--color-background);
	border-right: 1px solid var(--color-border);
}

/* Padding/scroll do conteúdo do menu vivem aqui, não em .dash-sidebar — em
   mobile .dash-sidebar precisa de overflow:visible (para o
   .dash-drawer-close poder "pendurar-se" fora da borda direita sem ser
   cortado), e overflow-y:auto num elemento com overflow:visible no eixo X
   não é possível (overflow é um único eixo lógico em CSS) — por isso o
   scroll do conteúdo passa para este wrapper interno dedicado. */
.dash-sidebar-inner {
	height: 100%;
	overflow-y: auto;
	padding: var(--space-lg) var(--space-md);
}

.dash-fab-tab {
	display: none;
}

.dash-drawer-close {
	display: none;
}

.dash-sidebar-overlay {
	display: none;
}

.dash-profile {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: var(--space-sm);
	margin-bottom: var(--space-lg);
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
}

.dash-profile-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary-contrast, #ffffff) !important;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1rem;
	flex-shrink: 0;
}

.dash-profile-avatar-img {
	object-fit: cover;
}

/* Modo Escuro (v1.93.1) — mesmo bug/correção de employer-dashboard.css:
   nunca teve "color" próprio, herdava preto absoluto do browser. */
.dash-profile-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--color-heading, #0f172a);
	line-height: 1.3;
}

.dash-profile-sub {
	font-size: 0.72rem;
	color: var(--color-primary-dark);
	margin-top: 2px;
}

.dash-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dash-nav-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.8rem;
	border-radius: var(--radius-sm);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.dash-nav-item svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

.dash-nav-item:hover {
	background: #F3F6F5;
	color: var(--color-text);
}

.dash-nav-item.is-active {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

/* Badge de percentagem (v1.42.0) — usado só pelo item "O Meu Currículo",
   percentagem calculada por cais_get_candidate_profile_completion(), a
   mesma função já usada nos cards de "Visão Geral" (nunca duplicada). */
.dash-nav-badge {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-accent);
	background: #FBF0DC;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	flex-shrink: 0;
}

.dash-nav-divider {
	height: 1px;
	background: var(--color-border);
	margin: var(--space-md) 0.8rem;
}

/* ---------------- Conteúdo principal ---------------- */

.dash-main {
	padding: var(--space-xl);
	/* Item de .dashboard-layout (CSS Grid) sem min-width:0 herda o
	   automatic minimum size = largura mínima do seu conteúdo — mesmo bug
	   já documentado e corrigido no Painel do Empregador (Problema 4,
	   v1.33.0). Aplicado aqui desde o início, nunca reintroduzido. */
	min-width: 0;
}

.dash-header {
	margin-bottom: var(--space-lg);
}

.dash-header h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.dash-header p {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-top: 0.2rem;
}

/* ---------------- Cards de resumo ---------------- */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.stat-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.stat-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-sm);
}

.stat-icon svg {
	width: 18px;
	height: 18px;
	stroke: var(--color-primary);
}

.stat-value {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-2xl);
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.stat-label {
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	margin-top: 0.2rem;
}

/* ---------------- Completa o teu perfil ---------------- */

.completion-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.completion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.7rem;
}

.completion-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-text);
}

.completion-pct {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--color-primary);
}

.bar-track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: #F3F6F5;
	overflow: hidden;
	margin-bottom: 0.6rem;
}

.bar-fill {
	height: 100%;
	background: var(--color-primary);
	border-radius: var(--radius-pill);
}

.completion-hint {
	font-size: 0.82rem;
	color: var(--color-text-secondary);
}

.completion-hint a {
	color: var(--color-primary);
	font-weight: 600;
}

/* ---------------- Tabelas (Candidaturas Recentes / Vagas Guardadas) ---------------- */

.table-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: var(--space-lg);
}

.table-card-padded {
	padding: var(--space-lg);
}

.table-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.table-card-head-flush {
	padding: 0 0 var(--space-md);
	border-bottom: none;
}

.table-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--color-text);
}

.table-link {
	font-size: 0.85rem;
	color: var(--color-primary);
	font-weight: 600;
}

.dash-empty-state {
	padding: var(--space-lg);
	font-size: 0.88rem;
	color: var(--color-text-secondary);
}

.table-card-padded .dash-empty-state {
	padding: 0;
}

.app-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	gap: var(--space-md);
	flex-wrap: wrap;
}

.app-row:last-child {
	border-bottom: none;
}

.app-row-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--color-text);
	margin-bottom: 0.25rem;
}

.app-row-meta {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
}

.status-badge {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	white-space: nowrap;
}

.status-badge.review {
	background: #FBF0DC;
	color: #8A5F16;
}

.status-badge.interview {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
}

.status-badge.rejected {
	background: #FDF2F0;
	color: #C0594A;
}

.status-badge.default {
	background: #F1F3F2;
	color: var(--color-text-secondary);
}

.saved-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.saved-card {
	display: block;
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.saved-card:hover {
	border-color: var(--color-primary);
}

.saved-card-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-text);
	margin-bottom: 0.3rem;
}

.saved-card-meta {
	font-size: 0.78rem;
	color: var(--color-text-secondary);
}

/* ---------------- Responsivo ---------------- */

@media (max-width: 980px) {
	.dashboard-layout {
		grid-template-columns: 1fr;
	}

	/*
	 * Botão de abrir (fab-tab) e botão de fechar (drawer-close) — dois
	 * elementos distintos, réplica exata do mecanismo já validado em
	 * produção no Painel do Empregador (employer-dashboard.css). Aba fixa
	 * na lateral esquerda do ecrã (6px de respiro), quadrada com cantos
	 * arredondados; botão de fechar circular, preso à borda direita da
	 * própria drawer (right:-15px — metade do diâmetro de 30px fica fora
	 * da drawer). Ambos à mesma altura vertical.
	 */
	.dash-fab-tab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50%;
		left: 6px;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		border-radius: 8px;
		border: none;
		background: var(--color-primary);
		box-shadow: 2px 3px 10px -2px rgba(15, 118, 110, 0.5);
		cursor: pointer;
		z-index: 110;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.15s ease;
	}

	.dash-fab-tab.is-hidden {
		opacity: 0;
		pointer-events: none;
	}

	.dash-fab-tab svg {
		width: 15px;
		height: 15px;
		stroke: #fff;
		flex-shrink: 0;
	}

	/* Overlay semi-transparente atrás da drawer — mesmo tom/opacidade já
	   usado no Painel do Empregador (rgba(20, 32, 30, 0.6), consistente
	   com o backdrop do modal nativo "Criar Alerta"). Fade sincronizado
	   com o slide da drawer, nunca display:none/block. */
	.dash-sidebar-overlay {
		position: fixed;
		inset: 0;
		background: rgba(20, 32, 30, 0.6);
		z-index: 99;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.dash-sidebar-overlay.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Desliza via transform:translateX(), nunca display/visibility — um
	   elemento não pode animar a partir de "não renderizado".
	   overflow:visible (em vez de overflow-y:auto diretamente aqui) é o
	   que permite ao .dash-drawer-close pendurar-se fora da borda direita
	   sem ser cortado — o scroll do conteúdo passa para
	   .dash-sidebar-inner. */
	.dash-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 280px;
		max-width: 84vw;
		z-index: 100;
		box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
		overflow: visible;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.dash-sidebar.is-open {
		transform: translateX(0);
	}

	.dash-drawer-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: -15px;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: none;
		background: var(--color-primary);
		box-shadow: 2px 3px 10px -2px rgba(15, 118, 110, 0.5);
		cursor: pointer;
		z-index: 101;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
	}

	.dash-sidebar.is-open .dash-drawer-close {
		opacity: 1;
		pointer-events: auto;
	}

	.dash-drawer-close svg {
		width: 12px;
		height: 12px;
		stroke: #fff;
		flex-shrink: 0;
	}

	.dash-main {
		padding: var(--space-lg) var(--space-md);
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr;
	}

	.saved-grid {
		grid-template-columns: 1fr;
	}

	.app-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.stats-grid {
		grid-template-columns: 1fr;
	}
}

/* Modo Escuro (v1.93.1) — mesma família de bug já corrigida na v1.93.0
   (single-job.css): #F3F6F5/#F1F3F2 sem token equivalente. Os 3 já usam
   var(--color-text-secondary) no texto (correto), só o fundo precisava
   de correção. */
html[data-theme="dark"] .dash-nav-item:hover,
html[data-theme="dark"] .bar-track,
html[data-theme="dark"] .status-badge.default {
	background: var(--color-border);
}