/* =============================================================================
   BeeMatchr brand theme
   Blue palette. Clean, trustworthy, professional — the busy Bee at work.
   Variable names kept as --bee-* for compatibility; values are now the blue set.
   ========================================================================== */

:root {
	/* Candidate blue palette (source of truth) */
	--primary: #1a56db;
	--primary-blue: #1a73e8;
	--secondary-blue: #4285f4;
	--light-blue: #e8f0fe;
	--dark-blue: #0d47a1;
	--text-dark: #202124;
	--text-light: #5f6368;
	--border-light: #dadce0;
	--dark: #1f2937;
	/* --dark: #0d47a1; */
	--white: #ffffff;

	/* Legacy brand tokens remapped onto the blue palette */
	--bee-yellow: #1a73e8; /* primary accent — buttons, active states */
	--bee-yellow-dk: #1557b0; /* darker accent — hover/focus */
	--bee-navy: #0d47a1; /* deep blue — dark surfaces, headings, text */
	--bee-navy-dk: #0a3578; /* darkest blue — gradient end */
	--bee-honey: #4285f4; /* lighter accent */
	--bee-charcoal: #202124; /* primary body text */
	--bee-cream: #e8f0fe; /* tinted surface */
	--bee-error: #dc3545;
	--bee-success: #198754;

	/* ---- Honey-amber accent (Direction A, 2026-06-19) ----
       Blue stays the trust/structure base; this amber is used ONLY for primary
       actions + key highlights (CTAs, the bee mascot, the "Most popular" ribbon).
       Amber means "do this"; blue means "know this / trust this". Dark ink on amber
       for AA contrast — never white text on amber. Structure, links, the Pollen
       Score, status badges and nav-active states keep --bee-yellow (= blue). */
	--accent: #f5a623;
	--accent-dk: #d98e00;
	--accent-ink: #1f2733;
}

body {
	font-family:
		"Inter",
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		sans-serif;
	background: linear-gradient(180deg, #f8faff 0%, #ffffff 80%);
	color: var(--bee-charcoal);
}

/* -----------------------------------------------------------------------------
   Brand utilities
   -------------------------------------------------------------------------- */

.text-bee-yellow {
	color: var(--bee-yellow) !important;
}
.text-bee-navy {
	color: var(--bee-navy) !important;
}
.text-bee-blue {
	color: var(--primary-blue) !important;
}
.bg-bee-yellow {
	background-color: var(--bee-yellow) !important;
}
.bg-bee-navy {
	background-color: var(--bee-navy) !important;
}
.bg-bee-cream {
	background-color: var(--bee-cream) !important;
}

/* Bee mascot */
.bee-mascot {
	font-size: 5rem;
	line-height: 1;
	filter: drop-shadow(0 4px 12px rgba(26, 115, 232, 0.35));
	animation: bee-bob 3s ease-in-out infinite;
}
.bee-mascot-sm {
	font-size: 2.5rem;
	line-height: 1;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* Brand-blue circle (was --accent amber): the bee icon is yellow-and-black, so a blue field
	   makes it far more visible and matches the blue auth top-bar. Shared by all auth/public pages. */
	background: #aecbfa;
	box-shadow: 0 4px 12px rgba(26, 115, 232, 0.35);
}
@keyframes bee-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

/* Bee logo in navbar */
.bee-logo {
	font-size: 1.5rem;
	line-height: 1;
}

/* -----------------------------------------------------------------------------
   Navbars (auth vs main)
   -------------------------------------------------------------------------- */

.main-navbar {
	background: linear-gradient(
		135deg,
		var(--bee-navy) 0%,
		var(--bee-navy-dk) 100%
	);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Auth pages (sign in / forgot password / register / verify…) use the same light Haze bar
   as the dashboards for brand consistency (decided 2026-06-20) — no more dark-navy bar. */
.auth-navbar {
	background: #aecbfa;
	border-bottom: 1px solid #8ab4f8;
	box-shadow: 0 2px 8px rgba(13, 71, 161, 0.12);
}

.main-navbar .navbar-brand {
	color: #fff !important;
}
.auth-navbar .navbar-brand,
.auth-navbar .navbar-brand .fw-bold {
	color: var(--dark-blue) !important;
}

/* Navy-outline pill — a quiet, themed secondary control on the light Haze top bars
   (e.g. Logout). Deliberately NOT amber: logout is a utility action, not a primary CTA,
   so it stays low-emphasis and doesn't compete with the amber "do this" buttons. */
.btn-navy-outline {
	color: var(--dark-blue);
	background-color: transparent;
	border: 1px solid var(--dark-blue);
}
.btn-navy-outline:hover,
.btn-navy-outline:focus,
.btn-navy-outline:active {
	color: #fff;
	background-color: var(--dark-blue);
	border-color: var(--dark-blue);
}

.main-navbar .nav-link {
	font-weight: 500;
}
.main-navbar .nav-link:hover {
	color: var(--bee-yellow) !important;
}

/* -----------------------------------------------------------------------------
   Context-aware navbars
   Public/marketing pages use a clean WHITE bar (modern, matches the hero mock-up);
   dashboard pages use a LIGHT-BLUE bar so a signed-in user can instantly tell they
   are "inside the app". Two separate classes so the contexts never share a look.
   -------------------------------------------------------------------------- */

/* Public (marketing) navbar — white */
.public-navbar {
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.public-navbar .navbar-brand .fw-bold {
	color: var(--primary-blue) !important;
}
.public-navbar .nav-link {
	color: var(--text-dark) !important;
	font-weight: 500;
	margin: 0 0.35rem;
}
.public-navbar .nav-link:hover {
	color: var(--primary-blue) !important;
}
/* Active marketing tab (For Candidates / For Employers) — the audience switch.
   A weight bump + underline makes the current side obvious from either page. */
.public-navbar .nav-link.active {
	color: var(--primary-blue) !important;
	font-weight: 600;
	border-bottom: 2px solid var(--primary-blue);
}
.public-navbar .navbar-toggler {
	border-color: var(--border-light);
}

/* Dashboard navbar — a clear light-to-medium blue so it unmistakably reads as
   "inside the app" (the pale --light-blue alone looked washed out). Dark navy
   text/brand keeps strong contrast on the deeper end of the gradient. */
.dashboard-navbar {
	background: #aecbfa; /* Haze — flat, even contrast across the bar */
	border-bottom: 1px solid #8ab4f8;
	box-shadow: 0 2px 8px rgba(13, 71, 161, 0.12);
}
.dashboard-navbar .navbar-brand .fw-bold {
	color: var(--dark-blue) !important;
}
.dashboard-navbar .nav-link,
.dashboard-navbar .navbar-text {
	color: var(--dark-blue) !important;
}

/* Employer dashboard — deliberately distinct from the candidate dashboard. Deep navy
   bar (vs the candidate light-blue) + an "Employer" pill so a recruiter always knows
   which side of the platform they are on. */
/* Same light Haze bar as the candidate dashboard — the company-name badge below
   is what tells a signed-in user they're on the company side (decided 2026-06-19). */
.employer-navbar {
	background: #aecbfa;
	border-bottom: 1px solid #8ab4f8;
	box-shadow: 0 2px 8px rgba(13, 71, 161, 0.12);
}
.employer-navbar .navbar-brand .fw-bold {
	color: var(--dark-blue) !important;
}
.employer-navbar .navbar-text {
	color: var(--dark-blue) !important;
}
.employer-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: #fff; /* white pill on the light bar — the "which side am I on" cue */
	color: var(--dark-blue);
	border: 1px solid rgba(13, 71, 161, 0.25);
}
/* Portal context pill in the title bar (EmployerCompanyChip island): a single "EMPLOYER · {company}"
   unit — white pill, navy border — matching the old Employer badge. The label stays uppercase; the
   company name keeps its own casing and truncates so a long name never breaks the bar. */
.portal-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.7rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: #fff;
	color: var(--dark-blue);
	border: 1px solid rgba(13, 71, 161, 0.25);
}
.portal-chip .fa-building { opacity: 0.7; }
.portal-chip-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.portal-chip-sep { opacity: 0.45; }
.portal-chip-name {
	font-weight: 600;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Active employer sidebar item uses the deep navy (candidate side uses the yellow accent),
   reinforcing the separate context. */
.employer-sidebar .nav-link.active {
	background: var(--bee-navy);
	color: #fff;
}
.employer-sidebar .nav-link:hover {
	background: #eef4ff;
	color: var(--bee-navy);
}

/* Pollen score ring on candidate search cards */
.pollen-ring {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	flex-shrink: 0;
}
.pollen-ring-high {
	background: var(--bee-success);
}
.pollen-ring-mid {
	background: var(--primary-blue);
}
.pollen-ring-low {
	background: #9aa6b2;
}

/* Anonymised candidate card */
.bee-card {
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	background: #fff;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}
.bee-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(13, 71, 161, 0.1);
}

/* Package tile on the billing page */
.pack-tile {
	border: 1px solid #e3e8f0;
	border-radius: 14px;
	padding: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}
.pack-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(13, 71, 161, 0.12);
}
.pack-tile.popular {
	border: 2px solid var(--accent);
}

/* Conversation thread */
.chat-scroll {
	height: 420px;
	overflow-y: auto;
	background: #f7f9fc;
}
.chat-bubble {
	max-width: 75%;
	padding: 0.55rem 0.8rem;
	border-radius: 14px;
	font-size: 0.92rem;
	line-height: 1.35;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.chat-mine {
	background: var(--primary-blue);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.chat-theirs {
	background: #fff;
	color: var(--text-dark);
	border: 1px solid #e3e8f0;
	border-bottom-left-radius: 4px;
}
.chat-time {
	font-size: 0.68rem;
	opacity: 0.7;
	margin-top: 0.2rem;
}
.conversation-item:hover {
	background: #eef4ff;
}

/* Platform admin — charcoal bar, distinct from both candidate and employer. */
.admin-navbar {
	background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.admin-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: var(--bee-error);
	color: #fff;
}

/* -----------------------------------------------------------------------------
   Rich marketing footer (ported from v2, re-themed). Deep slate so the link
   groups read clearly; used by the public MainLayout.
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--dark);
	color: #fff;
	padding: 3rem 0 1rem;
	margin-top: auto;
}
.site-footer h5 {
	margin-bottom: 1.25rem;
	font-weight: 600;
	font-size: 1rem;
}
.site-footer p {
	color: #cbd2dc;
	font-size: 0.9rem;
}
.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-footer ul li {
	margin-bottom: 0.5rem;
}
.site-footer ul li a {
	color: #cbd2dc;
	text-decoration: none;
	font-size: 0.9rem;
}
.site-footer ul li a:hover {
	color: #fff;
}
.site-footer .footer-brand {
	color: #fff;
	font-weight: 700;
}
.site-footer .footer-social a {
	color: #cbd2dc;
	transition: color 0.15s ease;
}
.site-footer .footer-social a:hover {
	color: var(--primary-blue);
}
.site-footer .footer-copyright {
	border-top: 1px solid #374151;
	padding-top: 1.25rem;
	margin-top: 2rem;
	text-align: center;
	color: #9ca3af;
	font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Primary CTA — honey-amber accent (Direction A). Dark ink, not white, for AA
   contrast on amber. This is the platform's main "do this" button across both
   portals + the public pages. */
.btn-warning {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}
.btn-warning:hover,
.btn-warning:focus {
	background-color: var(--accent-dk);
	border-color: var(--accent-dk);
	color: var(--accent-ink);
}

/* Outline accent CTAs (secondary actions: Upgrade, Go to messages, Shortlist,
   Change password, …). Themed to the refined honey-amber so they match
   .btn-warning instead of Bootstrap's harsh default #ffc107; fill amber + dark
   ink on hover. */
.btn-outline-warning {
	--bs-btn-color: var(--accent-dk);
	--bs-btn-border-color: var(--accent);
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: var(--accent);
	--bs-btn-hover-color: var(--accent-ink);
	--bs-btn-active-bg: var(--accent-dk);
	--bs-btn-active-border-color: var(--accent-dk);
	--bs-btn-active-color: var(--accent-ink);
}

.btn-outline-dark {
	border-color: var(--bee-navy);
	color: var(--bee-navy);
}
.btn-outline-dark:hover {
	background-color: var(--bee-navy);
	border-color: var(--bee-navy);
}

/* Brand-align Bootstrap's primary outline (used by the "Add another …" secondary
   buttons) so its blue matches the brand #1a73e8 rather than Bootstrap's default
   #0d6efd. Drives every .btn-outline-primary via Bootstrap's CSS-var button API. */
.btn-outline-primary {
	--bs-btn-color: var(--primary-blue);
	--bs-btn-border-color: var(--primary-blue);
	--bs-btn-hover-bg: var(--primary-blue);
	--bs-btn-hover-border-color: var(--primary-blue);
	--bs-btn-active-bg: var(--dark-blue);
	--bs-btn-active-border-color: var(--dark-blue);
	--bs-btn-focus-shadow-rgb: 26, 115, 232;
}

/* Bootstrap accent utilities remapped to blue (icons, Pollen badges, chips).
   The two-class selectors out-specify Bootstrap's .text-dark so badge text
   flips to white on the blue fill. */
.text-warning {
	color: var(--bee-yellow) !important;
}
.bg-warning {
	background-color: var(--primary-blue) !important;
}
.badge.bg-warning,
.pollen-score.bg-warning {
	background-color: var(--primary-blue) !important;
	color: #fff !important;
}

/* -----------------------------------------------------------------------------
   Auth cards
   -------------------------------------------------------------------------- */

.auth-card {
	border: none;
	border-radius: 16px;
	overflow: hidden;
}
.auth-card .card-body {
	background: #fff;
}

/* -----------------------------------------------------------------------------
   Form floating labels — POC carryover, slight bee touch
   -------------------------------------------------------------------------- */

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 1.625rem;
	padding-bottom: 0.625rem;
}

.form-floating > label {
	color: #6c757d;
	font-weight: 500;
}

.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
	border-color: var(--bee-yellow);
	box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
	color: var(--bee-navy);
	opacity: 0.85;
}

/* Checkbox styling */
.form-check-input:checked {
	background-color: var(--bee-yellow);
	border-color: var(--bee-yellow);
}
.form-check-input:focus {
	border-color: var(--bee-yellow);
	box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
}

/* -----------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */

.hero {
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}

.value-card {
	border-radius: 16px;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.value-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(26, 115, 232, 0.15) !important;
}

.value-icon {
	font-size: 2.5rem;
	color: var(--bee-yellow);
}

.employer-strip {
	background: linear-gradient(
		135deg,
		var(--bee-navy) 0%,
		var(--bee-navy-dk) 100%
	);
	color: #fff;
	padding: 3rem !important;
	position: relative;
	overflow: hidden;
}
.employer-strip::before {
	content: "🐝";
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 8rem;
	opacity: 0.08;
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Rich marketing landing (ported from the original BeeMatchr site, re-themed
   blue). Uses its own .landing-hero class so it does not collide with the
   shared .hero used by the smaller Employers/Home heroes.
   -------------------------------------------------------------------------- */

.landing-hero {
	background: linear-gradient(
		135deg,
		var(--dark-blue) 0%,
		var(--secondary-blue) 100%
	);
	color: #fff;
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}
.landing-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 85% 15%,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 45%
		),
		radial-gradient(
			circle at 10% 90%,
			rgba(255, 255, 255, 0.08) 0%,
			transparent 40%
		);
	pointer-events: none;
}
.landing-hero .container {
	position: relative;
	z-index: 1;
}
/* Tuned to the smoother v2 proportions: lighter weight, smaller cap, a constrained
   text column and a calmer image — reads refined rather than chunky. Glow kept. */
.landing-hero h1 {
	font-size: clamp(2rem, 3.5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	max-width: 600px;
}
.landing-hero h1 .text-highlight {
	display: block;
	margin-top: 0.3rem;
	font-weight: 600;
	color: #e8f0fe;
}
.landing-hero .lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	max-width: 600px;
	margin-bottom: 1.8rem;
}
.landing-hero img {
	max-width: 520px;
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------------
   Full-bleed sections
   The public <main> is width-constrained (.container), which would box the hero's
   blue band inside white margins. `.full-bleed` lets a section's background span
   edge-to-edge while its inner .container keeps the content aligned to the grid.
   `.main-shell { overflow-x: clip }` stops the 100vw width from ever producing a
   horizontal scrollbar — clip (not hidden) is used so the sticky navbar still works.
   -------------------------------------------------------------------------- */
.main-shell {
	overflow-x: clip;
}
.full-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Offset in-page anchor jumps (#pricing, #how-it-works) so the sticky navbar
   doesn't cover the section heading we land on. */
html {
	scroll-padding-top: 80px;
}
section[id] {
	scroll-margin-top: 80px;
}

/* Hero benefit chips — frosted pills under the hero subhead. Surface the concrete
   payoffs in a scannable glance without weighing the hero down with a paragraph. */
.hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.8rem;
}
.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	white-space: nowrap;
}
.hero-chip i {
	font-size: 0.8rem;
	opacity: 0.9;
}

/* Password show/hide toggle. z-index lifts it above the input; pointer-events:none
   on the icon ensures the click target is the button itself (the site.js handler
   matches the element carrying data-toggle-password, not the inner <i>). */
.pw-toggle {
	z-index: 5;
	text-decoration: none;
}
[data-toggle-password] i {
	pointer-events: none;
}

/* Tighter hero on small screens so it doesn't dominate the fold on phones. */
@media (max-width: 767.98px) {
	.landing-hero {
		padding: 3rem 0;
	}
	.landing-hero img {
		max-width: 360px;
		margin-top: 1.5rem;
	}
}

/* -----------------------------------------------------------------------------
   Employer hero — deliberately distinct from the candidate .landing-hero (deeper
   navy gradient + an eyebrow label) so the employer one-pager reads as its own
   page, not a recolour of the candidate home.
   -------------------------------------------------------------------------- */
.employer-hero {
	background: linear-gradient(
		135deg,
		var(--bee-navy-dk) 0%,
		var(--primary-blue) 100%
	);
	color: #fff;
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
}
.employer-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 88% 18%,
			rgba(255, 255, 255, 0.1) 0%,
			transparent 48%
		),
		radial-gradient(
			circle at 12% 95%,
			rgba(255, 255, 255, 0.06) 0%,
			transparent 42%
		);
	pointer-events: none;
}
.employer-hero .container {
	position: relative;
	z-index: 1;
}
.employer-hero .employer-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.78rem;
	font-weight: 700;
	color: #9ec5ff;
	margin-bottom: 0.6rem;
}
.employer-hero h1 {
	font-size: clamp(2rem, 3.5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	max-width: 600px;
}
.employer-hero h1 .text-highlight {
	display: block;
	margin-top: 0.3rem;
	font-weight: 600;
	color: #cfe0fb;
}
.employer-hero .lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1rem;
	max-width: 600px;
	margin-bottom: 1.8rem;
}
.employer-hero img {
	max-width: 520px;
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767.98px) {
	.employer-hero {
		padding: 3rem 0;
	}
	.employer-hero img {
		max-width: 360px;
		margin-top: 1.5rem;
	}
}

/* Employer pricing tiles */
.pricing-card {
	background: #fff;
	border: 1px solid #e3e8f0;
	border-radius: 14px;
	padding: 2rem 1.75rem;
	height: 100%;
	box-shadow: 0 5px 16px rgba(13, 71, 161, 0.06);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}
.pricing-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 28px rgba(13, 71, 161, 0.12);
}
.pricing-card.popular {
	border: 2px solid var(--accent);
	box-shadow: 0 12px 30px rgba(245, 166, 35, 0.2);
}
.pricing-badge {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}
.pricing-price {
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--dark-blue);
	line-height: 1;
}
.pricing-period {
	color: var(--text-light);
	font-size: 0.85rem;
	margin-bottom: 1rem;
}
.pricing-features {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0;
	flex-grow: 1;
}
.pricing-features li {
	padding: 0.35rem 0;
	font-size: 0.9rem;
	color: var(--text-dark);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.pricing-features li i {
	color: var(--bee-success);
	margin-top: 0.2rem;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Toast notifications (save confirmations, etc.) — bottom-right, auto-dismissing.
   Rendered app-wide by ToastHost in the dashboard layout.
   -------------------------------------------------------------------------- */
.bee-toast-container {
	z-index: 1090;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}
.bee-toast {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 220px;
	max-width: 360px;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	pointer-events: auto;
	animation: bee-toast-in 0.25s ease;
}
.bee-toast i {
	font-size: 1rem;
	opacity: 0.95;
}
.bee-toast-success {
	background: var(--bee-success);
}
.bee-toast-error {
	background: var(--bee-error);
}
.bee-toast-info {
	background: var(--primary-blue);
}

/* -----------------------------------------------------------------------------
   CV template live preview (resume create-link flow)
   -------------------------------------------------------------------------- */
.cv-preview-frame {
	background: #fff;
	max-height: 720px;
	overflow: auto;
	border-radius: 0 0 14px 14px;
}
/* Full-screen preview overlay */
.cv-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: #525659;
	display: flex;
	flex-direction: column;
}
.cv-fullscreen-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 1rem;
	background: #2f3133;
	color: #fff;
}
.cv-fullscreen-body {
	flex: 1;
	overflow: auto;
	padding: 24px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.cv-fullscreen-body > * {
	max-width: 1000px;
	width: 100%;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

/* Resume link card headers — clear active (green) vs inactive (grey) states. */
.link-card-header-active {
	background-color: #b2dfc7; /* clear medium-light green */
	border-bottom: 1px solid #8ccfa9;
}
.link-card-header-inactive {
	background-color: #d6d9dc; /* visible grey (not near-white) */
	border-bottom: 1px solid #c2c7cc;
}
@keyframes bee-toast-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Section helpers */
.section-tint {
	background-color: #f7f9fc;
}
.section-title {
	font-weight: 800;
	color: var(--bee-navy);
}
.section-subtitle {
	color: var(--text-light);
	max-width: 680px;
	margin: 0 auto;
}

/* Pain-point cards (dual-portal "problems we solve") */
.pain-point-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.75rem;
	box-shadow: 0 5px 16px rgba(13, 71, 161, 0.06);
	height: 100%;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.pain-point-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 28px rgba(13, 71, 161, 0.12);
}
.pain-point-icon {
	color: var(--primary-blue);
	font-size: 1.25rem;
	margin-top: 0.15rem;
	/* Fixed-width, centered icon box so the text after each icon lines up vertically
       regardless of the glyph's natural width (e.g. fa-user-shield is wider than fa-ghost). */
	width: 1.25em;
	text-align: center;
	flex-shrink: 0;
}

/* Feature cards ("how it solves these problems" + key features) */
.feature-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 5px 16px rgba(13, 71, 161, 0.06);
	padding: 2rem;
	height: 100%;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}
.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 28px rgba(13, 71, 161, 0.12);
}
.feature-icon {
	width: 70px;
	height: 70px;
	background: rgba(26, 115, 232, 0.1);
	border-radius: 50%;
	color: var(--primary-blue);
	font-size: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

/* How-it-works steps */
.step-card {
	text-align: center;
	padding: 2rem 1rem;
}
.step-number {
	width: 56px;
	height: 56px;
	background: var(--primary-blue);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 auto 1.25rem;
	box-shadow: 0 6px 16px rgba(26, 115, 232, 0.35);
}

/* Full-width CTA band */
.cta-section {
	background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary) 100%);
	color: #fff;
	text-align: center;
	padding: 4rem 0;
	border-radius: 16px;
}
.cta-section .lead {
	color: rgba(255, 255, 255, 0.9);
}

/* -----------------------------------------------------------------------------
   Footers
   -------------------------------------------------------------------------- */

.auth-footer,
.main-footer {
	background-color: #fff;
	border-top: 1px solid #eaeaea;
	margin-top: auto;
}

/* -----------------------------------------------------------------------------
   Onboarding step progress (6-step wizard)
   -------------------------------------------------------------------------- */

.step-progress {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	padding: 0 1rem;
}
.step-progress::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 8%;
	right: 8%;
	height: 3px;
	background: #e9ecef;
	z-index: 0;
}
.step {
	position: relative;
	z-index: 1;
	text-align: center;
	flex: 1;
}
.step-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #e9ecef;
	color: #adb5bd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
	font-weight: 600;
	transition: all 0.2s ease;
}
.step.active .step-icon {
	background: var(--bee-yellow);
	border-color: var(--bee-yellow);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.2);
}
.step.completed .step-icon {
	background: var(--bee-navy);
	border-color: var(--bee-navy);
	color: #fff;
}
.step-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #6c757d;
}
.step.active .step-label,
.step.completed .step-label {
	color: var(--bee-navy);
	font-weight: 600;
}
@media (max-width: 768px) {
	.step-label {
		font-size: 0.7rem;
	}
	.step-icon {
		width: 36px;
		height: 36px;
		font-size: 0.875rem;
	}
}

/* Skill chips (Skills page) */
.skill-chip {
	transition: all 0.15s ease;
}
.skill-chip:hover {
	background: var(--light-blue) !important;
}

/* Onboarding section card */
.section-card {
	border-radius: 16px;
}
.onboarding-section-title {
	color: var(--bee-navy);
}

/* -----------------------------------------------------------------------------
   Dashboard layout (sidebar + main)
   -------------------------------------------------------------------------- */

.dashboard-sidebar {
	flex: 0 0 260px;
	width: 260px;
	background: #fff;
	border-right: 1px solid #eaeaea;
	min-height: calc(100vh - 56px);
}
.dashboard-sidebar .nav-link {
	color: var(--bee-charcoal);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 2px;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.dashboard-sidebar .nav-link:hover {
	background: #eef4ff;
	color: var(--bee-navy);
}
.dashboard-sidebar .nav-link.active {
	background: var(--bee-yellow);
	color: #fff;
	font-weight: 600;
}
.dashboard-sidebar .dropdown-toggle::after {
	display: none;
}
/* Rotating caret on the collapsible sidebar sections (My Profile / Resume). Bootstrap
   toggles aria-expanded on the control as its submenu opens/closes; we rotate the caret
   to match — points down when collapsed, flips up when expanded. Also covers the employer
   sidebar (its <aside> keeps the .dashboard-sidebar class), which currently has no carets. */
.dashboard-sidebar .nav-caret {
	display: inline-block;   /* REQUIRED: CSS transforms are ignored on inline elements (FA <i> is inline). */
	font-size: 0.75rem;
	opacity: 0.55;           /* muted, so it reads as an affordance rather than a primary icon */
	transition: transform 0.2s ease;
}
/* Collapsed = points right (›); expanded = rotate 90° to point down (⌄). A clear rotational sweep. */
.dashboard-sidebar .dropdown-toggle[aria-expanded="true"] .nav-caret {
	transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
	.dashboard-sidebar .nav-caret { transition: none; }
}
.dashboard-main {
	background: #fafafa;
}

@media (max-width: 768px) {
	.dashboard-sidebar {
		position: fixed;
		left: -260px;
		z-index: 1050;
		transition: left 0.25s ease;
		height: 100vh;
	}
	.dashboard-sidebar.open {
		left: 0;
	}
}

/* Dimmed backdrop behind the off-canvas sidebar on mobile (tap to close). Rendered
   only when the sidebar is open and only shown below md via the d-md-none class. */
.dashboard-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1040;
	/* Fade in to match the sidebar's 0.25s slide (site.js inserts this element on open). */
	animation: bm-backdrop-fade 0.25s ease;
}
@keyframes bm-backdrop-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* Respect users who prefer reduced motion: show the backdrop instantly, no fade. */
@media (prefers-reduced-motion: reduce) {
	.dashboard-backdrop { animation: none; }
}

/* Dashboard metric cards */
.metric-card {
	border-radius: 14px;
	transition: transform 0.15s ease;
}
.metric-card:hover {
	transform: translateY(-2px);
}
.metric-icon i {
	opacity: 0.85;
}

/* Reveal cards */
.reveal-card {
	border-radius: 14px;
	transition: all 0.2s ease;
}
.reveal-card.expiring {
	border-left: 4px solid var(--bee-error) !important;
}
.reveal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
.pollen-score {
	font-size: 0.875rem;
}

.reveal-mini {
	background: #fff;
	transition: background 0.15s ease;
}
.reveal-mini:hover {
	background: #eef4ff;
}

/* Template selector cards */
.template-card {
	transition: all 0.2s ease;
	cursor: pointer;
}
.template-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(26, 115, 232, 0.15) !important;
}

/* Company logo placeholder */
.company-logo img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

/* ----------------------------------------------------------------
   Profile entity cards (Experience, Education, Skills, etc.)
   Blue header bar with title on the left and white icon action
   buttons (edit / delete / save / cancel) tucked into the corner.
   ---------------------------------------------------------------- */
.profile-card {
	border: 1px solid #e3e8f0;
	border-radius: 0.6rem;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(13, 71, 161, 0.06);
}
.profile-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	background: linear-gradient(
		135deg,
		var(--primary-blue) 0%,
		var(--dark-blue) 100%
	);
	color: #fff;
}
.profile-card-header .pc-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
	min-width: 0;
}
/* The title text truncates on its own; siblings (e.g. the year pill) stay put
   so a long name can never clip the pill off the header. */
.profile-card-header .pc-title-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.profile-card-header .pc-pill {
	flex-shrink: 0;
}

/* Bootstrap's .card-body padding relies on --bs-card-spacer-* vars that are only
   defined on .card, not our .profile-card — so the body would otherwise sit flush
   left while the header keeps its 1rem inset. Pin the body padding to match. */
.profile-card .card-body {
	padding: 0.85rem 1rem;
}

/* Card body meta rows — a muted brand-blue icon paired with the value, replacing
   the old "<strong>Label:</strong> value" lines. The icon echoes the matching
   form field so the read view and edit view stay visually linked and scan fast. */
.pc-meta {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.5rem;
	color: var(--text-dark);
	line-height: 1.4;
}
.pc-meta:last-child {
	margin-bottom: 0;
}
.pc-meta > i {
	color: var(--primary-blue);
	font-size: 0.85rem;
	width: 1.1rem;
	text-align: center;
	flex-shrink: 0;
	margin-top: 0.18rem;
}
.pc-meta > span {
	min-width: 0;
}
.profile-card-header .pc-title .pc-sub {
	font-weight: 400;
	font-size: 0.85rem;
	opacity: 0.85;
}
.profile-card-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}
/* Solid white circular icon buttons sitting on the blue header. The white fill
   makes them stand out clearly as controls; the icon carries the colour — blue
   for neutral actions (edit/save), red for destructive ones (delete/cancel). */
.pc-action-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--primary-blue);
	box-shadow: 0 1px 4px rgba(13, 71, 161, 0.25);
	transition:
		background 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
	cursor: pointer;
}
.pc-action-btn:hover {
	background: #fff;
	color: var(--dark-blue);
	box-shadow: 0 3px 8px rgba(13, 71, 161, 0.35);
	transform: scale(1.08);
}
/* Destructive actions (delete / cancel): red icon at rest, solid red on hover. */
.pc-action-btn.pc-danger {
	color: var(--bee-error);
}
.pc-action-btn.pc-danger:hover {
	background: var(--bee-error);
	color: #fff;
}
.pc-action-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* Frosted pill for inline proficiency badges on the blue card header */
.pc-pill {
	display: inline-flex;
	align-items: center;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	white-space: nowrap;
}

/* Top-tier section heading (e.g. Technical Skills / Interpersonal Skills).
   Rendered as a tinted banner with a colored accent bar and an icon chip so the
   grouping clearly stands out from the cards beneath it. */
.profile-section-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dark-blue);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 1.75rem 0 0.85rem;
	padding: 0.6rem 0.9rem;
	background: var(--light-blue);
	border-left: 4px solid var(--primary-blue);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(13, 71, 161, 0.06);
}
.profile-section-title:first-of-type {
	margin-top: 0.5rem;
}
/* Icon chip on the section banner */
.profile-section-title > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--primary-blue);
	color: #fff;
	font-size: 0.8rem;
	flex-shrink: 0;
}
/* Achievement rows inside an Experience card — bordered boxes that clearly
   separate each achievement (matches the work-experience mock-up). */
.achievement-item {
	border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	margin-bottom: 0.5rem;
	background: #fff;
	color: var(--text-dark);
}
.achievement-item:last-child {
	margin-bottom: 0;
}

/* Granular category chip shown under the skill name */
.pc-cat-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.95);
}

/* -----------------------------------------------------------------------------
   Global navigation loading overlay
   Bridges the gap where enhanced navigation (static shell + blazor.web.js) shows
   no indicator during page transitions. Visible by default to cover the initial
   load; site.js hides it on ready and re-shows it on internal nav / form posts.
   -------------------------------------------------------------------------- */
.app-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(248, 250, 255, 0.78);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 1;
	transition: opacity 0.2s ease;
}
.app-loading-overlay.hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
.app-loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.75rem 2.25rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(13, 71, 161, 0.18);
}
.app-loading-text {
	margin: 0;
	font-weight: 600;
	color: var(--dark-blue);
}