/*
 * Wellness CRM — the dashboard page on the website (/dashboard/).
 * An app shell (sidebar + top bar) plus the few wp-admin building blocks the
 * sections use (buttons, notices, tables), which the front end doesn't load.
 */

.wcrm-portal-page { background: #EEF4FA; }
.wcrm-portal-page .site-main.wcrm-portal { padding: 0; }
.wcrm-portal { --wcrm-side: 248px; --wcrm-top: 0px; }
.admin-bar .wcrm-portal { --wcrm-top: 32px; }
@media (max-width: 782px) { .admin-bar .wcrm-portal { --wcrm-top: 46px; } }

/* ---------- App shell ---------- */
.wcrm-app {
	position: relative;
	display: grid;
	grid-template-columns: var(--wcrm-side) minmax(0, 1fr);
	max-width: 1480px;
	min-height: 80vh;
	margin: 0 auto;
	color: #0F2338;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	/* The sidebar colour runs the full height of the page. */
	background: linear-gradient(90deg, #0A2440 0, #0A2440 var(--wcrm-side), transparent var(--wcrm-side));
}
.wcrm-app *, .wcrm-app *::before, .wcrm-app *::after { box-sizing: border-box; }
.wcrm-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wcrm-side {
	position: sticky;
	top: var(--wcrm-top);
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--wcrm-top));
	padding: 18px 14px;
	overflow-y: auto;
	background: linear-gradient(180deg, #0F2F51 0%, #0A2440 100%);
	color: #FFFFFF;
}
.wcrm-side-head { display: flex; align-items: center; gap: 10px; margin: 0 6px 18px; }
.wcrm-side-head img { flex: none; width: 38px; height: 38px; padding: 3px; border-radius: 11px; background: #FFFFFF; }
.wcrm-side-head strong { display: block; font-size: 15px; line-height: 1.2; }
.wcrm-side-head small { display: block; overflow: hidden; color: rgba(255, 255, 255, 0.65); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wcrm-side-head div { min-width: 0; }

.wcrm-nav, .wcrm-side-foot { display: flex; flex-direction: column; gap: 2px; }
.wcrm-nav { flex: 1; }
.wcrm-side-foot { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.wcrm-side a {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.wcrm-side a:hover, .wcrm-side a:focus-visible { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; }
.wcrm-side a:focus-visible { outline: 2px solid #7DD3FC; outline-offset: -2px; }
.wcrm-side a.is-active { background: #FFFFFF; color: #0F2F51; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }
.wcrm-side a.is-active .ws-icon { color: #0284C7; }
.wcrm-side a span { flex: 1; min-width: 0; }
.wcrm-side-foot a { min-height: 36px; font-size: 13px; }
.wcrm-badge {
	display: inline-grid;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	place-items: center;
	border-radius: 999px;
	background: #F59E0B;
	color: #0F2338;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}

.wcrm-main { min-width: 0; }
.wcrm-topbar {
	position: sticky;
	top: var(--wcrm-top);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	padding: 10px 28px;
	border-bottom: 1px solid #DCE8F3;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
.wcrm-topbar-title { flex: 1; min-width: 0; overflow: hidden; color: #0F2F51; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wcrm-menu-btn { display: none; }
.wcrm-me { display: flex; align-items: center; gap: 8px; min-width: 0; color: #475569; font-size: 13px; font-weight: 600; }
.wcrm-me-name { overflow: hidden; max-width: 180px; text-overflow: ellipsis; white-space: nowrap; }
.wcrm-avatar { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #005399, #0284C7); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.wcrm-content { padding: 22px 28px 40px; }
.wcrm-scrim { display: none; }

/* ---------- Sections on the website ---------- */
.ws-crm-front { max-width: none; margin: 0; }
.ws-crm-front .ws-crm-head { margin-bottom: 4px; }
.ws-crm-front .ws-crm-head h1 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.ws-crm-front a { color: #005399; }
.ws-crm-front a:hover { color: #0F2F51; }
.ws-crm-front .ws-kpi, .ws-crm-front .ws-hub-card, .ws-crm-front .ws-kpi:hover { color: #0F2338; }
.ws-crm-front h2 { font-family: inherit; letter-spacing: -0.2px; }
.ws-crm-front .ws-jump { top: calc(var(--wcrm-top) + 60px); margin: 0 0 16px; padding: 10px 0; background: #EEF4FA; }
.ws-crm-front .ws-sticky-save { margin: 0; padding: 14px 0 4px; background: linear-gradient(180deg, rgba(238, 244, 250, 0) 0%, #EEF4FA 38%); }
.ws-crm-front .ws-content-form .ws-card, .ws-crm-front .ws-mail-form .ws-card { scroll-margin-top: calc(var(--wcrm-top) + 130px); }
.ws-crm-front .ws-list li, .ws-crm-front .ws-people > li { margin: 0; }
.ws-crm-front ul, .ws-crm-front ol { margin-left: 0; }

/* Form controls: the theme's input styles are reset to the dashboard's. */
.ws-crm-front input[type="text"], .ws-crm-front input[type="email"], .ws-crm-front input[type="tel"], .ws-crm-front input[type="url"],
.ws-crm-front input[type="password"], .ws-crm-front input[type="number"], .ws-crm-front input[type="date"], .ws-crm-front input[type="datetime-local"],
.ws-crm-front input[type="search"], .ws-crm-front select, .ws-crm-front textarea {
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #C9DBEA;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	color: #0F2338;
	font: inherit;
	font-size: 14px;
}
.ws-crm-front select { padding-right: 32px; }
.ws-crm-front textarea { min-height: 80px; line-height: 1.5; }
.ws-crm-front input:focus, .ws-crm-front select:focus, .ws-crm-front textarea:focus { border-color: #005399; outline: 0; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18); }
.ws-crm-front input[type="checkbox"], .ws-crm-front input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: #005399; }
.ws-crm-front .ws-search input[type="search"] { width: auto; }
.ws-crm-front .ws-filters input[type="search"], .ws-crm-front .ws-filters select { width: auto; }
.ws-crm-front label { cursor: default; }
.ws-crm-front .ws-form label { font-family: inherit; }

/* Buttons (wp-admin look, brand colours) */
.ws-crm-front .button, .ws-crm-front button.button, .ws-crm-front a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	margin: 0;
	padding: 7px 16px;
	border: 1px solid #B9D3E8;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: none;
	color: #005399;
	font: 600 13px/1.2 'Inter', sans-serif;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ws-crm-front .button:hover, .ws-crm-front .button:focus-visible { border-color: #005399; background: #F4F9FD; color: #0F2F51; transform: none; }
.ws-crm-front .button:focus-visible { outline: 2px solid #0284C7; outline-offset: 2px; }
.ws-crm-front .button-primary, .ws-crm-front .button.button-primary, .ws-crm-front button.button-primary, .ws-crm-front a.button.button-primary {
	border-color: #005399;
	background: linear-gradient(135deg, #005399 0%, #0284C7 100%);
	box-shadow: 0 6px 14px -6px rgba(0, 83, 153, 0.55);
	color: #FFFFFF;
}
.ws-crm-front .button.button-primary:hover, .ws-crm-front .button.button-primary:focus-visible, .ws-crm-front button.button-primary:hover { border-color: #004077; background: linear-gradient(135deg, #004077 0%, #005399 100%); color: #FFFFFF; }
.ws-crm-front .button-hero { min-height: 46px; padding: 10px 26px; font-size: 15px; }
.ws-crm-front .button-link {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #005399;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ws-crm-front .button-link:hover { color: #0F2F51; text-decoration: underline; }
.ws-crm-front .button-link.ws-delete { color: #B91C1C; }
.ws-crm-front .button-secondary { color: #005399; }

/* Notices */
.ws-crm-front .notice { position: relative; margin: 14px 0 6px; padding: 12px 16px 12px 18px; border: 1px solid #DCE8F3; border-left: 4px solid #0284C7; border-radius: 12px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(15, 47, 81, 0.05); }
.ws-crm-front .notice p { margin: 0; }
.ws-crm-front .notice-success { border-left-color: #16A34A; background: #F0FDF4; }
.ws-crm-front .notice-error { border-left-color: #DC2626; background: #FEF2F2; }
.ws-crm-front .notice-warning { border-left-color: #F59E0B; background: #FFFBEB; }
.ws-crm-front .notice-info { border-left-color: #0284C7; }

/* Tables */
.ws-crm-front table.widefat { width: 100%; margin: 0 0 16px; border: 1px solid #DCE8F3; border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; background: #FFFFFF; font-size: 14px; }
.ws-crm-front .widefat th, .ws-crm-front .widefat td { padding: 12px 14px; border: 0; border-bottom: 1px solid #E8F0F7; text-align: left; vertical-align: middle; }
.ws-crm-front .widefat thead th { background: #F4F9FD; color: #475569; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.ws-crm-front .widefat tbody tr:last-child td { border-bottom: 0; }
.ws-crm-front .widefat.striped tbody tr:nth-child(even) { background: #FBFDFF; }
.ws-crm-front .widefat tbody tr:hover { background: #F4F9FD; }
.ws-crm-front .subsubsub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 14px 0 6px; padding: 0; list-style: none; font-size: 13px; }
.ws-crm-front .subsubsub li { margin: 0; }
.ws-crm-front .subsubsub a { text-decoration: none; }
.ws-crm-front .subsubsub .current { color: #0F2F51; font-weight: 700; }
.ws-crm-front .tablenav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.ws-crm-front .tablenav .page-numbers { display: inline-grid; min-width: 34px; height: 34px; padding: 0 8px; place-items: center; border: 1px solid #DCE8F3; border-radius: 9px; background: #FFFFFF; text-decoration: none; }
.ws-crm-front .tablenav .page-numbers.current { border-color: #0F2F51; background: #0F2F51; color: #FFFFFF; }
.ws-crm-front .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }

/* wp_editor on the website */
.ws-crm-front .wp-editor-tabs button { min-height: 0; }
.ws-crm-front .wp-editor-area { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: Consolas, Monaco, monospace; }
.ws-crm-front .mce-toolbar .mce-btn button { min-height: 0; padding: 4px 6px; border: 0; background: none; box-shadow: none; }

/* ---------- Sign-in card ---------- */
.wcrm-login { display: grid; min-height: 70vh; padding: 48px 16px; place-items: center; }
.wcrm-login-card {
	width: 100%;
	max-width: 420px;
	padding: 34px 30px 26px;
	border: 1px solid #DCE8F3;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px -30px rgba(15, 47, 81, 0.45);
	text-align: center;
}
.wcrm-login-logo { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.wcrm-login-card h1 { margin: 0 0 6px; color: #0F2F51; font-size: 24px; }
.wcrm-login-card > p { margin: 0 0 20px; color: #5B6B7D; font-size: 14px; }
.wcrm-login-card form { text-align: left; }
.wcrm-login-card form p { margin: 0 0 14px; }
.wcrm-login-card label { display: block; margin-bottom: 6px; color: #0F2338; font-size: 13px; font-weight: 600; }
.wcrm-login-card input[type="text"], .wcrm-login-card input[type="password"] { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #C9DBEA; border-radius: 12px; font-size: 15px; }
.wcrm-login-card input:focus { border-color: #005399; outline: 0; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18); }
.wcrm-login-card .login-remember label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.wcrm-login-card .login-submit input {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #005399 0%, #0284C7 100%);
	box-shadow: 0 10px 22px -10px rgba(0, 83, 153, 0.6);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.wcrm-login-card .login-submit input:hover { background: linear-gradient(135deg, #004077 0%, #005399 100%); }
.wcrm-login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 13px; }
.wcrm-login-links a { color: #005399; text-decoration: none; }
.wcrm-login-links a:hover { text-decoration: underline; }

/* ---------- Tablet & phone: the sidebar becomes a drawer ---------- */
@media (max-width: 1024px) {
	.wcrm-app { grid-template-columns: minmax(0, 1fr); background: none; }
	.wcrm-side {
		position: fixed;
		top: var(--wcrm-top);
		bottom: 0;
		left: 0;
		z-index: 1001;
		width: min(290px, 86vw);
		height: auto;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}
	.wcrm-nav-toggle:checked ~ .wcrm-side { box-shadow: 18px 0 40px -20px rgba(0, 0, 0, 0.5); transform: none; visibility: visible; transition: transform 0.25s ease; }
	.wcrm-scrim { position: fixed; inset: var(--wcrm-top) 0 0 0; z-index: 1000; display: block; background: rgba(15, 35, 56, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
	.wcrm-nav-toggle:checked ~ .wcrm-scrim { opacity: 1; pointer-events: auto; }
	.wcrm-menu-btn {
		display: grid;
		flex: none;
		width: 40px;
		height: 40px;
		place-items: center;
		border: 1px solid #DCE8F3;
		border-radius: 11px;
		background: #FFFFFF;
		color: #0F2F51;
		cursor: pointer;
	}
	.wcrm-menu-btn:focus-visible { outline: 2px solid #0284C7; outline-offset: 2px; }
	.wcrm-topbar { padding: 10px 18px; }
	.wcrm-content { padding: 18px 18px 36px; }
}
@media (max-width: 600px) {
	.wcrm-me-name { display: none; }
	.wcrm-topbar { min-height: 56px; padding: 8px 16px; }
	.wcrm-content { padding: 14px 16px 32px; }
	.ws-crm-front .ws-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ws-crm-front .ws-kpi { padding: 14px; }
	.ws-crm-front .ws-kpi strong { font-size: 24px; }
	.ws-crm-front .ws-kpi:has(> .ws-kpi-text) { grid-column: 1 / -1; }
	.ws-crm-front .ws-kpi strong.ws-kpi-text { font-size: 16px; overflow-wrap: anywhere; }
	.ws-crm-front .ws-recipient .ws-toggle { flex: 1 1 calc(50% - 4px); white-space: normal; line-height: 1.25; }
	.ws-crm-front .ws-kpi span { font-size: 10px; }
	.ws-crm-front .ws-crm-head { align-items: flex-start; }
	.ws-crm-front .ws-crm-actions { width: 100%; }
	.ws-crm-front .ws-crm-actions .button { flex: 1 1 auto; }
	.ws-crm-front .ws-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ws-crm-front .ws-hub-card { padding: 12px; }
	.ws-crm-front .ws-hub-card small { display: none; }
	.ws-crm-front .ws-sticky-save .button-hero { width: 100%; }
	.ws-crm-front .ws-filters { align-items: stretch; }
	.ws-crm-front .ws-filters > * { flex: 1 1 100%; }
	.ws-crm-front .ws-filters input[type="search"], .ws-crm-front .ws-filters select { width: 100%; min-width: 0; }
	.ws-crm-front .ws-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.ws-crm-front .ws-jump a { flex: none; }
	.ws-crm-front .ws-bars a { grid-template-columns: 86px 1fr 30px; gap: 8px; }
	.ws-crm-front .ws-facts { grid-template-columns: 1fr; gap: 2px; }
	.ws-crm-front .ws-facts dd { margin-bottom: 8px; }
	.wcrm-login-card { padding: 28px 20px 22px; }
}
@media (max-width: 360px) {
	.ws-crm-front .ws-kpis, .ws-crm-front .ws-hub { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.wcrm-side, .wcrm-scrim { transition: none; }
}