:root {
	--pm-color-primary: #2563eb;
	--pm-color-primary-dark: #1d4ed8;
	--pm-color-secondary: #0f172a;
	--pm-color-background: #f1f5f9;
	--pm-color-surface: #ffffff;
	--pm-color-text: #0f172a;
	--pm-color-muted: #64748b;
	--pm-color-border: #dbe3ec;
	--pm-color-success: #15803d;
	--pm-color-success-bg: #dcfce7;
	--pm-color-error: #b91c1c;
	--pm-color-error-bg: #fee2e2;
	--pm-color-info: #1d4ed8;
	--pm-color-info-bg: #dbeafe;
	--pm-shadow-small: 0 8px 24px rgba(15, 23, 42, 0.08);
	--pm-shadow-medium: 0 20px 50px rgba(15, 23, 42, 0.12);
	--pm-radius-small: 10px;
	--pm-radius-medium: 16px;
	--pm-radius-large: 24px;
	--pm-transition: 180ms ease;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	margin: 0;
	padding: 0;
	background: var(--pm-color-background);
}

body.pm-app-body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background:
		radial-gradient(
			circle at top left,
			rgba(37, 99, 235, 0.12),
			transparent 36%
		),
		linear-gradient(
			135deg,
			#f8fafc 0%,
			#eef2ff 50%,
			#f8fafc 100%
		);
	color: var(--pm-color-text);
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
	line-height: 1.5;
}

body.pm-app-body.admin-bar {
	min-height: calc(100vh - 32px);
}

.pm-app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.pm-app-header {
	width: 100%;
	padding: 24px 32px;
	border-bottom: 1px solid rgba(219, 227, 236, 0.9);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.pm-app-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	width: min(1180px, 100%);
	margin: 0 auto;
}

.pm-app-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 14px;
	background: linear-gradient(
		135deg,
		var(--pm-color-primary),
		var(--pm-color-primary-dark)
	);
	color: #ffffff;
	font-size: 22px;
	font-weight: 800;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.pm-app-brand-content {
	min-width: 0;
}

.pm-app-company-name {
	color: var(--pm-color-secondary);
	font-size: 18px;
	font-weight: 750;
	line-height: 1.2;
}

.pm-app-product-name {
	margin-top: 3px;
	color: var(--pm-color-muted);
	font-size: 13px;
	font-weight: 500;
}

.pm-app-main {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 48px 24px;
}

.pm-app-container {
	width: min(1180px, 100%);
	margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Login and registration
|--------------------------------------------------------------------------
*/

.pm-app-login-page .pm-app-container,
.pm-app-registration-page .pm-app-container {
	width: min(520px, 100%);
}

.pm-auth-page,
.pm-registration-card {
	width: 100%;
}

.pm-auth-card,
.pm-registration-card {
	width: 100%;
	padding: 36px;
	border: 1px solid rgba(219, 227, 236, 0.95);
	border-radius: var(--pm-radius-large);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--pm-shadow-medium);
}

.pm-auth-header,
.pm-registration-card > h2,
.pm-registration-card > p {
	text-align: center;
}

.pm-auth-header {
	margin-bottom: 28px;
}

.pm-auth-header h1,
.pm-registration-card h2 {
	margin: 0;
	color: var(--pm-color-secondary);
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.pm-auth-header p,
.pm-registration-card > p {
	margin: 12px 0 0;
	color: var(--pm-color-muted);
	font-size: 15px;
	line-height: 1.7;
}

.pm-auth-card form,
.pm-registration-card form {
	margin-top: 28px;
}

.pm-auth-card form p,
.pm-registration-card form p {
	margin: 0 0 18px;
}

.pm-auth-card label,
.pm-registration-card label,
.pm-form-field label {
	display: block;
	margin-bottom: 8px;
	color: var(--pm-color-secondary);
	font-size: 14px;
	font-weight: 700;
}

.pm-form-field {
	margin-bottom: 20px;
}

.pm-auth-card input[type="text"],
.pm-auth-card input[type="email"],
.pm-auth-card input[type="password"],
.pm-registration-card input[type="text"],
.pm-registration-card input[type="email"],
.pm-registration-card input[type="password"],
.pm-registration-card input[type="date"] {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-small);
	outline: none;
	background: #ffffff;
	color: var(--pm-color-text);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition:
		border-color var(--pm-transition),
		box-shadow var(--pm-transition),
		background var(--pm-transition);
}

.pm-auth-card input:focus,
.pm-registration-card input:focus {
	border-color: var(--pm-color-primary);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.pm-auth-card input::placeholder,
.pm-registration-card input::placeholder {
	color: #94a3b8;
}

.pm-auth-card input[type="submit"],
.pm-auth-card .button,
.pm-registration-card button,
.pm-registration-card .button,
.pm-registration-login-link .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--pm-radius-small);
	background: linear-gradient(
		135deg,
		var(--pm-color-primary),
		var(--pm-color-primary-dark)
	);
	color: #ffffff;
	font-size: 15px;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
	transition:
		transform var(--pm-transition),
		box-shadow var(--pm-transition),
		filter var(--pm-transition);
}

.pm-auth-card input[type="submit"]:hover,
.pm-auth-card .button:hover,
.pm-registration-card button:hover,
.pm-registration-card .button:hover,
.pm-registration-login-link .button:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
	box-shadow: 0 14px 26px rgba(37, 99, 235, 0.25);
	color: #ffffff;
}

.pm-auth-card input[type="submit"]:active,
.pm-auth-card .button:active,
.pm-registration-card button:active,
.pm-registration-card .button:active {
	transform: translateY(0);
}

.pm-auth-card .login-remember {
	display: flex;
	align-items: center;
	margin-top: 4px;
}

.pm-auth-card .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--pm-color-muted);
	font-weight: 500;
	cursor: pointer;
}

.pm-auth-card input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--pm-color-primary);
}

.pm-auth-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	color: #94a3b8;
	font-size: 14px;
	text-align: center;
}

.pm-auth-links a {
	color: var(--pm-color-primary);
	font-weight: 650;
	text-decoration: none;
}

.pm-auth-links a:hover {
	color: var(--pm-color-primary-dark);
	text-decoration: underline;
}

.pm-form-field small {
	display: block;
	margin-top: 7px;
	color: var(--pm-color-muted);
	font-size: 12px;
	line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Messages
|--------------------------------------------------------------------------
*/

.pm-auth-message,
.pm-registration-message {
	margin: 0 0 22px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: var(--pm-radius-small);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.pm-auth-message p,
.pm-registration-message p {
	margin: 0;
}

.pm-auth-message-error,
.pm-registration-message-error {
	border-color: #fecaca;
	background: var(--pm-color-error-bg);
	color: var(--pm-color-error);
}

.pm-registration-message-success {
	border-color: #bbf7d0;
	background: var(--pm-color-success-bg);
	color: var(--pm-color-success);
}

.pm-registration-message-info {
	border-color: #bfdbfe;
	background: var(--pm-color-info-bg);
	color: var(--pm-color-info);
}

.pm-password-match-message {
	min-height: 22px;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 700;
}

.pm-password-match-error {
	color: var(--pm-color-error);
}

.pm-password-match-success {
	color: var(--pm-color-success);
}

.pm-registration-login-link {
	margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| Employee dashboard
|--------------------------------------------------------------------------
*/

.pm-app-dashboard-page .pm-app-main {
	align-items: flex-start;
}

.pm-employee-portal {
	width: 100%;
}

.pm-portal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 30px;
	padding: 28px;
	border: 1px solid rgba(219, 227, 236, 0.9);
	border-radius: var(--pm-radius-large);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--pm-shadow-small);
}

.pm-portal-eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--pm-color-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pm-portal-header h1 {
	margin: 0;
	color: var(--pm-color-secondary);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.pm-portal-header p {
	margin: 10px 0 0;
	color: var(--pm-color-muted);
	font-size: 16px;
}

.pm-logout-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--pm-color-border);
	border-radius: var(--pm-radius-small);
	background: #ffffff;
	color: var(--pm-color-secondary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition:
		border-color var(--pm-transition),
		background var(--pm-transition),
		color var(--pm-transition);
}

.pm-logout-button:hover {
	border-color: #fecaca;
	background: #fff1f2;
	color: #be123c;
}

.pm-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.pm-dashboard-card {
	position: relative;
	min-height: 230px;
	padding: 28px;
	overflow: hidden;
	border: 1px solid rgba(219, 227, 236, 0.95);
	border-radius: var(--pm-radius-medium);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--pm-shadow-small);
	transition:
		transform var(--pm-transition),
		box-shadow var(--pm-transition),
		border-color var(--pm-transition);
}

.pm-dashboard-card:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: var(--pm-shadow-medium);
}

.pm-dashboard-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 22px;
	border-radius: 16px;
	background: #eff6ff;
	font-size: 26px;
}

.pm-dashboard-card h2 {
	margin: 0;
	color: var(--pm-color-secondary);
	font-size: 22px;
	font-weight: 800;
}

.pm-dashboard-card p {
	margin: 12px 0 20px;
	color: var(--pm-color-muted);
	font-size: 15px;
	line-height: 1.65;
}

.pm-card-coming {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 999px;
	background: #eef2ff;
	color: var(--pm-color-primary-dark);
	font-size: 12px;
	font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| WordPress cleanup
|--------------------------------------------------------------------------
*/

.pm-app-page #wpadminbar {
	display: none;
}

body.pm-app-page.admin-bar {
	margin-top: 0 !important;
}

.pm-app-page .entry-header,
.pm-app-page .page-header,
.pm-app-page .entry-title,
.pm-app-page .page-title,
.pm-app-page .site-header,
.pm-app-page .site-footer,
.pm-app-page .site-navigation,
.pm-app-page .main-navigation,
.pm-app-page .sidebar,
.pm-app-page .widget-area {
	display: none !important;
}

/*
|--------------------------------------------------------------------------
| Accessibility
|--------------------------------------------------------------------------
*/

.pm-auth-card a:focus-visible,
.pm-registration-card a:focus-visible,
.pm-auth-card button:focus-visible,
.pm-registration-card button:focus-visible,
.pm-logout-button:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.35);
	outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 782px) {

	body.pm-app-body.admin-bar {
		min-height: 100vh;
	}

	.pm-app-header {
		padding: 18px 20px;
	}

	.pm-app-main {
		padding: 30px 18px;
	}

	.pm-auth-card,
	.pm-registration-card {
		padding: 28px 22px;
		border-radius: var(--pm-radius-medium);
	}

	.pm-portal-header {
		flex-direction: column;
		padding: 24px;
	}

	.pm-logout-button {
		width: 100%;
	}

	.pm-dashboard-grid {
		grid-template-columns: 1fr;
	}

}

@media screen and (max-width: 480px) {

	.pm-app-header {
		padding: 15px 16px;
	}

	.pm-app-logo {
		width: 42px;
		height: 42px;
		flex-basis: 42px;
		border-radius: 12px;
		font-size: 19px;
	}

	.pm-app-company-name {
		font-size: 16px;
	}

	.pm-app-product-name {
		font-size: 12px;
	}

	.pm-app-main {
		padding: 22px 14px;
	}

	.pm-auth-card,
	.pm-registration-card {
		padding: 24px 18px;
	}

	.pm-auth-header h1,
	.pm-registration-card h2 {
		font-size: 27px;
	}

	.pm-auth-links {
		flex-direction: column;
		gap: 8px;
	}

	.pm-auth-links span {
		display: none;
	}

	.pm-portal-header {
		padding: 20px;
	}

	.pm-dashboard-card {
		min-height: auto;
		padding: 22px;
	}

}