/* Portfel Ongoing — frontend baseline + brand reskin.
 *
 * Strategy: every consultant-facing template was built with Tailwind
 * utility classes (bg-white, text-slate-900, etc). Instead of editing
 * each template, we override those utilities inside `body.pfo-app` so
 * the entire app inherits the dark Portfel brand without per-component
 * churn. Switching back to a light theme would only require commenting
 * out the override block.
 */

[x-cloak] { display: none !important; }

/* ----------------------------- Hard overrides -------------------------- */
/* Bullet-proof rules that win over any theme CSS (both light + dark). */

.pfo-auth header > div:first-child {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	margin: 0 0 0.75rem 0 !important;
	text-align: center !important;
}

.pfo-auth header h1,
.pfo-auth header p {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Primary CTA: failsafe color so it's visible even if Tailwind didn't
 * generate `bg-portfel-600` (Play CDN sometimes misses classes inside
 * conditionally-rendered fragments). */
.pfo-btn-primary {
	background: linear-gradient(135deg, #2f6bff 0%, #5b8bff 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px -4px rgba(47, 107, 255, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.pfo-btn-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, #1d4ed8 0%, #2f6bff 100%) !important;
	box-shadow: 0 6px 20px -4px rgba(47, 107, 255, 0.7),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.pfo-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ----------------------------- App shell ------------------------------- */

body.pfo-app,
body.pfo-app-body {
	margin: 0;
	padding: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	color: #f5f7fb;
	background: #040816;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.pfo-app {
	background-image:
		radial-gradient(ellipse 80% 60% at 50% -10%,
			rgba(47, 107, 255, 0.18), transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 100%,
			rgba(47, 107, 255, 0.08), transparent 60%),
		radial-gradient(ellipse 60% 40% at 20% 100%,
			rgba(91, 139, 255, 0.06), transparent 60%);
	background-attachment: fixed;
}

body.pfo-app .wp-site-blocks,
body.pfo-app #page,
body.pfo-app #content {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ----------------------------- Backgrounds ----------------------------- */

body.pfo-app .bg-white,
body.pfo-app .bg-slate-50 {
	background-color: rgba(10, 16, 36, 0.85) !important;
	backdrop-filter: blur(8px);
}

body.pfo-app .bg-slate-100   { background-color: #111a36 !important; }
body.pfo-app .bg-slate-200   { background-color: #1c2748 !important; }
body.pfo-app .bg-slate-900   { background-color: #040816 !important; }
body.pfo-app .bg-slate-900\/50 { background-color: rgba(0, 0, 0, 0.7) !important; }

body.pfo-app .bg-portfel-50  { background-color: rgba(47, 107, 255, 0.10) !important; }
body.pfo-app .bg-portfel-100 { background-color: rgba(47, 107, 255, 0.18) !important; }
body.pfo-app .bg-portfel-900 { background: linear-gradient(135deg, #2f6bff, #1d4ed8) !important; }

/* Primary CTA buttons — gradient pill look. */
body.pfo-app .bg-portfel-600 {
	background: linear-gradient(135deg, #2f6bff 0%, #5b8bff 100%) !important;
	box-shadow: 0 4px 16px -4px rgba(47, 107, 255, 0.5),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.pfo-app .hover\:bg-portfel-700:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #2f6bff 100%) !important;
	box-shadow: 0 6px 20px -4px rgba(47, 107, 255, 0.7),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Tinted backgrounds in cards stay readable on dark. */
body.pfo-app .bg-emerald-50  { background-color: rgba(34, 197, 94, 0.12) !important; }
body.pfo-app .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.18) !important; }
body.pfo-app .bg-amber-50    { background-color: rgba(245, 158, 11, 0.12) !important; }
body.pfo-app .bg-amber-100   { background-color: rgba(245, 158, 11, 0.18) !important; }
body.pfo-app .bg-red-50      { background-color: rgba(244, 63, 94, 0.12) !important; }
body.pfo-app .bg-red-100     { background-color: rgba(244, 63, 94, 0.18) !important; }
body.pfo-app .bg-blue-50     { background-color: rgba(59, 130, 246, 0.12) !important; }
body.pfo-app .bg-rose-50     { background-color: rgba(244, 63, 94, 0.12) !important; }

/* ----------------------------- Borders --------------------------------- */

body.pfo-app .border-slate-100 { border-color: rgba(28, 39, 72, 0.5) !important; }
body.pfo-app .border-slate-200 { border-color: rgba(28, 39, 72, 0.8) !important; }
body.pfo-app .border-slate-300 { border-color: #2c3a5e !important; }
body.pfo-app .border-portfel-300 { border-color: rgba(47, 107, 255, 0.5) !important; }
body.pfo-app .border-emerald-200 { border-color: rgba(34, 197, 94, 0.3) !important; }
body.pfo-app .border-emerald-100 { border-color: rgba(34, 197, 94, 0.2) !important; }
body.pfo-app .border-red-200     { border-color: rgba(244, 63, 94, 0.3) !important; }
body.pfo-app .border-amber-100   { border-color: rgba(245, 158, 11, 0.2) !important; }

body.pfo-app .divide-slate-100 > * + * { border-top-color: rgba(28, 39, 72, 0.5) !important; }
body.pfo-app .divide-slate-200 > * + * { border-top-color: rgba(28, 39, 72, 0.8) !important; }

/* ----------------------------- Text ------------------------------------ */

body.pfo-app .text-slate-900 { color: #f5f7fb !important; }
body.pfo-app .text-slate-700 { color: #cdd5e3 !important; }
body.pfo-app .text-slate-600 { color: #aab4c8 !important; }
body.pfo-app .text-slate-500 { color: #9aa7c2 !important; }
body.pfo-app .text-slate-400 { color: #6b7592 !important; }
body.pfo-app .text-slate-300 { color: #4a5170 !important; }

body.pfo-app .text-portfel-600 { color: #5b8bff !important; }
body.pfo-app .text-portfel-700 { color: #8fb0ff !important; }
body.pfo-app .text-portfel-900 { color: #ffffff !important; }

body.pfo-app .text-emerald-600 { color: #34d399 !important; }
body.pfo-app .text-emerald-700 { color: #6ee7b7 !important; }
body.pfo-app .text-amber-500   { color: #fbbf24 !important; }
body.pfo-app .text-amber-600   { color: #fbbf24 !important; }
body.pfo-app .text-amber-700   { color: #fcd34d !important; }
body.pfo-app .text-red-600     { color: #fb7185 !important; }
body.pfo-app .text-red-700     { color: #fda4af !important; }
body.pfo-app .text-blue-700    { color: #93c5fd !important; }
body.pfo-app .text-rose-700    { color: #fb7185 !important; }

/* ----------------------------- Hover states ---------------------------- */

body.pfo-app .hover\:bg-slate-50:hover  { background-color: rgba(17, 26, 54, 0.5) !important; }
body.pfo-app .hover\:bg-slate-100:hover { background-color: #111a36 !important; }
body.pfo-app .hover\:bg-red-50:hover    { background-color: rgba(244, 63, 94, 0.15) !important; }
body.pfo-app .hover\:bg-portfel-50:hover { background-color: rgba(47, 107, 255, 0.15) !important; }

body.pfo-app .hover\:text-slate-900:hover { color: #f5f7fb !important; }
body.pfo-app .hover\:text-portfel-700:hover { color: #8fb0ff !important; }
body.pfo-app .hover\:text-portfel-900:hover { color: #ffffff !important; }

body.pfo-app .hover\:border-portfel-300:hover {
	border-color: rgba(47, 107, 255, 0.6) !important;
	box-shadow: 0 0 0 1px rgba(47, 107, 255, 0.3),
	            0 8px 24px -8px rgba(47, 107, 255, 0.4);
}

/* ----------------------------- Form fields ----------------------------- */

body.pfo-app input[type="text"],
body.pfo-app input[type="email"],
body.pfo-app input[type="search"],
body.pfo-app input[type="date"],
body.pfo-app input[type="number"],
body.pfo-app input[type="url"],
body.pfo-app input[type="password"],
body.pfo-app textarea,
body.pfo-app select {
	background-color: rgba(17, 26, 54, 0.6) !important;
	color: #f5f7fb !important;
	border-color: rgba(28, 39, 72, 0.8) !important;
	-webkit-appearance: none;
	appearance: none;
}

body.pfo-app input::placeholder,
body.pfo-app textarea::placeholder { color: #6b7592 !important; }

body.pfo-app input:focus,
body.pfo-app textarea:focus,
body.pfo-app select:focus {
	border-color: #2f6bff !important;
	box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.2) !important;
	outline: none;
}

body.pfo-app .focus\:ring-portfel-100:focus {
	--tw-ring-color: rgba(47, 107, 255, 0.2) !important;
}

/* Native select arrow */
body.pfo-app select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa7c2' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px !important;
}

body.pfo-app input[type="checkbox"],
body.pfo-app input[type="radio"] {
	accent-color: #2f6bff;
}

/* ----------------------------- Cards / surfaces ------------------------ */

body.pfo-app .rounded-2xl,
body.pfo-app .rounded-xl {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
	            0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

body.pfo-app .pfo-auth .rounded-2xl {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 0 0 1px rgba(47, 107, 255, 0.15),
		0 24px 64px -16px rgba(0, 0, 0, 0.7);
}

/* Brand "P" badge becomes a gradient logo. */
body.pfo-app .bg-portfel-900,
body.pfo-app header .bg-portfel-900 {
	background: linear-gradient(135deg, #2f6bff 0%, #1d4ed8 100%) !important;
	box-shadow: 0 4px 12px -2px rgba(47, 107, 255, 0.5);
}

/* ----------------------------- Misc ------------------------------------ */

body.pfo-app code {
	background: rgba(47, 107, 255, 0.1);
	color: #8fb0ff;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}

/* Sticky header gets a frosted look that sits over the gradient. */
body.pfo-app header.bg-white {
	background-color: rgba(4, 8, 22, 0.75) !important;
	backdrop-filter: blur(12px);
	border-bottom-color: rgba(28, 39, 72, 0.8) !important;
}

/* ----------------------------- Auth screens ---------------------------- */
/* Auth shell uses .pfo-auth (not .pfo-app), keeps the same defaults. */

.pfo-auth {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             Helvetica, Arial, sans-serif;
	color: #0f172a;
}

body.pfo-app .pfo-auth { color: #f5f7fb; }

body.pfo-app .pfo-auth.bg-portfel-50,
body.pfo-app .pfo-auth .bg-portfel-50 { background: transparent !important; }

.pfo-auth :focus-visible {
	outline: 2px solid #2f6bff;
	outline-offset: 2px;
}

.pfo-auth button { cursor: pointer; }
.pfo-auth button[disabled] { cursor: not-allowed; }

.pfo-auth input[type="radio"].sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}