/**
 * Sprigly Admin Styles
 *
 * Warm, friendly design matching the portal aesthetic.
 * Forest green + SD blue palette on cream background.
 *
 * @package Sprigly
 * @since   1.2.0
 */

:root {
	--spa-primary: #1a5632;
	--spa-primary-light: #2D8659;
	--spa-primary-dark: #0f3d22;
	--spa-accent: #314562;
	--spa-accent-dark: #243347;
	--spa-bg: #f7f6f3;
	--spa-card: #fff;
	--spa-border: #d0cec7;
	--spa-border-light: #e2e0da;
	--spa-text: #1f2937;
	--spa-text-muted: #6b7280;
	--spa-text-light: #9ca3af;
	--spa-radius: 10px;
	--spa-radius-lg: 14px;
	--spa-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* Page background — Sprigly admin pages only */
.toplevel_page_sprigly-dashboard #wpcontent,
.sprigly_page_sprigly-journeys #wpcontent,
.sprigly_page_sprigly-clients #wpcontent,
.sprigly_page_sprigly-resources #wpcontent,
.sprigly_page_sprigly-settings #wpcontent,
.sprigly_page_sprigly-team #wpcontent {
	background: var(--spa-bg);
	min-height: 100vh;
}

/* Max-width wrapper */
.sprigly-admin-wrap {
	max-width: 1500px;
	font-family: 'Poppins', sans-serif;
}

/* Headings */
.sprigly-admin-wrap h1 {
	color: var(--spa-text);
	font-weight: 700;
}

.sprigly-admin-wrap h2 {
	color: var(--spa-text);
	font-weight: 600;
}

.sprigly-admin-wrap .page-title-action {
	background: var(--spa-accent) !important;
	border-color: var(--spa-accent) !important;
	border-radius: 8px !important;
	color: #fff !important;
}
.sprigly-admin-wrap .page-title-action:hover {
	background: var(--spa-accent-dark) !important;
	border-color: var(--spa-accent-dark) !important;
	color: #fff !important;
}

/* Stat cards */
.sp-admin-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 20px;
	max-width: 900px;
}
.sp-admin-stat {
	background: #f7f6f3 !important;
	border: 0.5px solid #e2e0da !important;
	border-top: 3px solid transparent;
	border-radius: var(--spa-radius-lg);
	padding: 22px 20px;
	text-align: center;
	box-shadow: var(--spa-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sp-admin-stat:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.sp-admin-stat.stat-journeys,
.sp-admin-stat.stat-milestones { border-top-color: var(--spa-primary); }
.sp-admin-stat.stat-clients,
.sp-admin-stat.stat-reflections { border-top-color: var(--spa-accent); }
.sp-admin-stat-value {
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
}
.sp-admin-stat-value.green { color: var(--spa-primary); }
.sp-admin-stat-value.blue { color: var(--spa-accent); }
.sp-admin-stat-label {
	color: var(--spa-text-muted);
	font-size: 13px;
	margin-top: 6px;
}

/* Panels (activity + progress) */
.sp-admin-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
	max-width: 900px;
}
.sp-admin-panel {
	background: var(--spa-card);
	border: 0.5px solid #e2e0da !important;
	border-radius: var(--spa-radius-lg);
	padding: 22px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.05);
}
.sp-admin-panel-title {
	margin: 0 0 16px;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--spa-text-muted);
	font-weight: 600;
}
.sp-admin-panel-scroll {
	max-height: 420px;
	overflow-y: auto;
}

/* Activity items */
.sp-activity-item {
	display: flex;
	gap: 12px;
	padding: 12px 8px;
	border-bottom: none !important;
	border-radius: 6px;
	transition: background 0.15s;
}
.sp-activity-item:hover { background: #f7f6f3 !important; }
.sp-activity-item:last-child { border-bottom: none; }
.sp-activity-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.sp-activity-icon svg {
	width: 14px;
	height: 14px;
}
.sp-activity-icon.green { background: var(--spa-primary); }
.sp-activity-icon.blue { background: var(--spa-accent); }
.sp-activity-text { font-size: 14px !important; line-height: 1.5; }
.sp-activity-preview { font-size: 13px !important; color: var(--spa-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-activity-time { font-size: 12px !important; color: var(--spa-text-light); margin-top: 3px; }

/* Client progress */
.sp-progress-item {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid #e2e0da;
	text-decoration: none;
	color: inherit;
}
.sp-progress-item:last-child { border-bottom: none; }
.sp-progress-item:hover { opacity: 0.8; }
.sp-progress-row { display: flex; justify-content: space-between; align-items: center; }
.sp-progress-name { font-weight: 600; font-size: 14px !important; color: var(--spa-text); }
.sp-progress-journey { font-size: 13px !important; color: var(--spa-text-muted); margin-left: 8px; }
.sp-progress-pct { font-size: 14px !important; font-weight: 600; }
.sp-progress-pct.complete { color: var(--spa-primary); }
.sp-progress-pct.in-progress { color: var(--spa-accent); }
.sp-admin-bar { background: var(--spa-border-light); border-radius: 6px; height: 8px; margin-top: 8px; overflow: hidden; }
.sp-admin-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; }
.sp-admin-bar-fill.complete { background: var(--spa-primary); }
.sp-admin-bar-fill.in-progress { background: var(--spa-accent); }
.sp-admin-bar-fill.low { background: #b45309; }
.sp-progress-pct.low { color: #b45309; }

/* Cards */
.sp-admin-card {
	background: var(--spa-card);
	border: 1px solid #e2e0da;
	border-radius: var(--spa-radius);
	padding: 18px;
	box-shadow: var(--spa-shadow);
	margin-bottom: 10px;
}
.sp-admin-card-completed { border-color: var(--spa-primary); }

/* Welcome / empty */
.sp-admin-welcome {
	background: var(--spa-card);
	border: 1px solid #e2e0da;
	border-radius: var(--spa-radius-lg);
	padding: 40px 30px;
	margin-top: 20px;
	text-align: center;
	max-width: 900px;
	box-shadow: var(--spa-shadow);
}
.sp-admin-welcome h2 { margin-top: 0; color: var(--spa-text); }
.sp-admin-welcome p { color: var(--spa-text-muted); }

/* Tables */
.sprigly-admin-wrap .wp-list-table { border-color: #e2e0da; border-radius: var(--spa-radius); overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,0.05); }
.sprigly-admin-wrap .wp-list-table th { background: var(--spa-bg) !important; border-color: #e2e0da !important; color: #000 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; font-weight: 600 !important; text-align: left !important; }
.sprigly-admin-wrap .wp-list-table td,
.sprigly-admin-wrap .widefat td,
.sprigly-admin-wrap .widefat td ol,
.sprigly-admin-wrap .widefat td p,
.sprigly-admin-wrap .widefat td ul { font-size: 14px !important; line-height: 1.5em !important; text-align: left !important; border-color: #e2e0da !important; vertical-align: middle !important; }
.sprigly-admin-wrap .wp-list-table td { vertical-align: middle !important; text-align: left !important; }
.sprigly-admin-wrap .wp-list-table th { vertical-align: middle !important; }
.sprigly-admin-wrap .wp-list-table tbody tr:hover td { background: #faf9f6 !important; }
.sprigly-admin-wrap .striped > tbody > :nth-child(odd) { background: #fdfcfa; }

/* Rich text content (reflections, notes) — restore list styling stripped by WP admin */
.sprigly-admin-wrap ul { list-style: disc !important; padding-left: 20px !important; }
.sprigly-admin-wrap ol { list-style: decimal !important; padding-left: 20px !important; }
.sprigly-admin-wrap ul li, .sprigly-admin-wrap ol li { list-style: inherit !important; }

/* Admin links */
.sprigly-admin-wrap a { color: var(--spa-accent) !important; }
.sprigly-admin-wrap a:hover { color: var(--spa-accent-dark) !important; }
.sprigly-admin-wrap .button-primary,
.sprigly-admin-wrap .button-primary:hover,
.sprigly-admin-wrap .sp-mark-complete-btn,
.sprigly-admin-wrap .sp-mark-complete-btn:hover,
.sprigly-admin-wrap .page-title-action,
.sprigly-admin-wrap .page-title-action:hover { color: #fff !important; }

/* Buttons */
.sprigly-admin-wrap .button-primary,
.sprigly-admin-wrap .button-primary:focus,
.sprigly-admin-wrap .button-primary:active {
	background: var(--spa-primary) !important;
	border-color: var(--spa-primary-dark) !important;
	color: #fff !important;
	border-radius: 8px;
	box-shadow: none !important;
	text-shadow: none !important;
}
.sprigly-admin-wrap .button-primary:hover {
	background: var(--spa-primary-dark) !important;
	border-color: var(--spa-primary-dark) !important;
	color: #fff !important;
}
.sprigly-admin-wrap .button {
	border-color: #e2e0da;
	border-radius: 8px;
	color: var(--spa-accent);
}
.sprigly-admin-wrap .button:hover {
	border-color: var(--spa-accent);
	background: var(--spa-bg);
}

/* Keyboard-only reorder buttons (audit DIM-4.5, hidden styling v1.30.24).
   Drag-and-drop is the primary mouse UX, so these buttons are visually
   invisible but Tab-focusable. On focus they pop back into view so the
   keyboard user can SEE which control has focus. Standard WP a11y pattern
   matching `.screen-reader-text` semantics. */
.sprigly-admin-wrap .sp-reorder-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.sprigly-admin-wrap .sp-reorder-sr-only:focus,
.sprigly-admin-wrap .sp-reorder-sr-only:focus-visible {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 4px 0 0 !important;
	padding: 0 8px !important;
	overflow: visible !important;
	clip: auto !important;
	min-width: 32px !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
	color: var(--spa-accent) !important;
	border-color: var(--spa-accent) !important;
	outline: 2px solid var(--spa-primary) !important;
	outline-offset: 2px !important;
}

/* Empty-state cards (audit DIM-3.4). Standard styling for "No X yet" panels
   used across journeys, clients, resources, client-directory, and team
   admin pages. Each existing call site already passes the same inline
   styles — this rule lets new call sites just add `sprigly-empty-state`
   without repeating the styling, and keeps the look consistent if we
   ever evolve the design. */
.sprigly-admin-wrap .sprigly-empty-state {
	text-align: center;
	padding: 60px 20px;
	margin-top: 20px;
	color: var(--spa-text-muted, #6b7280);
}
.sprigly-admin-wrap .sprigly-empty-state h2 {
	color: var(--spa-text, #1f2937);
	margin: 0 0 8px;
}
.sprigly-admin-wrap .sprigly-empty-state p {
	margin: 0 0 18px;
	font-size: 14px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* Destructive buttons (delete / remove / archive flows). Audit DIM-3.3.
   Replaces a mix of inline `style="color:#a00"` and `style="color:#b32d2e"`
   declarations across handlers. Use `.sp-btn-danger` on top of `.button` or
   `.button button-small` for any destructive action so users get a single
   consistent visual signal. */
.sprigly-admin-wrap .button.sp-btn-danger,
.sprigly-admin-wrap .sp-btn-danger {
	color: #b32d2e !important;
	border-color: #b32d2e !important;
}
.sprigly-admin-wrap .button.sp-btn-danger:hover,
.sprigly-admin-wrap .sp-btn-danger:hover {
	background: #fef2f2 !important;
	border-color: #991b1b !important;
	color: #991b1b !important;
}

/* Notices */
.sprigly-admin-wrap .notice-success { border-left-color: var(--spa-primary); }
.sprigly-admin-wrap .notice-error { border-left-color: #b91c1c; }

/* Filters */
.sp-admin-filters {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 15px;
	flex-wrap: wrap;
}
.sp-admin-filters input[type="search"],
.sp-admin-filters select { border-color: #e2e0da; border-radius: 8px; }
.sp-admin-filters input[type="search"]:focus,
.sp-admin-filters select:focus { border-color: var(--spa-primary); box-shadow: 0 0 0 1px var(--spa-primary); }
.sp-admin-count { color: var(--spa-text-muted); font-size: 13px; margin-left: auto; }

/* Settings */
.sprigly-admin-wrap .nav-tab-wrapper { border-color: #e2e0da !important; }
.sprigly-admin-wrap .nav-tab { border-color: #e2e0da !important; border-radius: 8px 8px 0 0 !important; color: var(--spa-text-muted) !important; background: var(--spa-card) !important; }
.sprigly-admin-wrap .nav-tab:not(.nav-tab-active):hover { color: var(--spa-primary) !important; }
.sprigly-admin-wrap .form-table th { color: var(--spa-text); font-weight: 500; }

/* Reflections indented */
.sp-admin-reflection {
	background: var(--spa-card);
	border: 1px solid #e2e0da;
	border-left: 3px solid var(--spa-accent);
	border-radius: 2px 8px 8px 2px;
	padding: 12px 16px;
	margin-bottom: 6px;
}

/* Mark complete */
.sp-mark-complete-btn {
	background: var(--spa-primary) !important;
	color: #fff !important;
	border-color: var(--spa-primary-dark) !important;
	border-radius: 6px !important;
	text-shadow: none !important;
	box-shadow: none !important;
	margin-top: 12px !important;
}
.sp-mark-complete-btn:hover {
	background: var(--spa-primary-dark) !important;
}

/* Progress bar in tables */
.sp-table-bar {
	background: var(--spa-border-light);
	border-radius: 10px;
	height: 12px;
	overflow: hidden;
	flex: 1;
}
.sp-table-bar-fill {
	height: 100%;
	border-radius: 10px;
	transition: width 0.3s;
}

/* =============================================================
   RESPONSIVE — TABLET COLUMN ADJUSTMENTS
   ============================================================= */

@media screen and (min-width: 851px) and (max-width: 1100px) {
	/* Journeys: reduce title, hide industry */
	.sp-table-journeys th:nth-child(1),
	.sp-table-journeys td:nth-child(1) { width: 28% !important; }
	.sp-table-journeys th:nth-child(2),
	.sp-table-journeys td:nth-child(2) { width: 12% !important; }
	.sp-table-journeys th:nth-child(3),
	.sp-table-journeys td:nth-child(3) { width: 12% !important; }
	.sp-table-journeys th:nth-child(4),
	.sp-table-journeys td:nth-child(4) { display: none !important; } /* Hide Industry */
	.sp-table-journeys th:nth-child(5),
	.sp-table-journeys td:nth-child(5) { width: 18% !important; }
	.sp-table-journeys th:nth-child(6),
	.sp-table-journeys td:nth-child(6) { width: 20% !important; }

	/* Clients: tighten columns */
	.sp-table-clients th:nth-child(1),
	.sp-table-clients td:nth-child(1) { width: 22% !important; }
	.sp-table-clients th:nth-child(2),
	.sp-table-clients td:nth-child(2) { width: 22% !important; }
	.sp-table-clients th:nth-child(3),
	.sp-table-clients td:nth-child(3) { width: 22% !important; }
	.sp-table-clients th:nth-child(4),
	.sp-table-clients td:nth-child(4) { width: 12% !important; }
	.sp-table-clients th:nth-child(5),
	.sp-table-clients td:nth-child(5) { width: 12% !important; }
	.sp-table-clients th:nth-child(6),
	.sp-table-clients td:nth-child(6) { width: 10% !important; }
}

/* Mobile-only helper — hidden on desktop, shown in card view */
.sp-mobile-only { display: none !important; }

/* =============================================================
   RESPONSIVE — MOBILE STACKED CARDS (StrataDesk style)
   ============================================================= */

/* ============================================================================
 * MOBILE TABLE STYLES — single 850px block (audit DIM-3.1, v1.30.23)
 * ----------------------------------------------------------------------------
 * Selectors here use a `table.sp-table-X` prefix (rather than `.sp-table-X`)
 * to match WP core's `table.wp-list-table td` specificity at the 782px
 * breakpoint. Without that prefix, WP's responsive table rules win below
 * 782px and silently override us. With it, we're at equal specificity AND
 * load later, so we win cleanly across the full <850px range.
 *
 * The separate `@media (max-width: 782px)` block lower in this file holds
 * ONLY WP-admin-frame fixes (sidebar overflow, content padding) — those
 * are tied to WP's 782px sidebar-collapse breakpoint, not to our table
 * styling.
 * ========================================================================= */
@media screen and (max-width: 850px) {
	.sp-admin-stats { grid-template-columns: 1fr 1fr; }
	.sp-admin-panels { grid-template-columns: 1fr; }
	.sp-mobile-only { display: block !important; }

	/* ─── Shared: hide headers, convert rows to cards ─── */
	table.sp-table-journeys,
	table.sp-table-clients,
	table.sp-table-resources,
	table.sp-table-milestones,
	table.sp-table-directory,
	table.sp-table-team ,
	table.sp-table-enrollments {
		display: block !important;
		overflow: visible !important;
		border: none !important;
		box-shadow: none !important;
		background: none !important;
		background-color: transparent !important;
	}

	table.sp-table-journeys thead,
	table.sp-table-clients thead,
	table.sp-table-resources thead,
	table.sp-table-milestones thead,
	table.sp-table-directory thead,
	table.sp-table-team thead ,
	table.sp-table-enrollments thead {
		display: none !important;
	}

	table.sp-table-journeys tbody,
	table.sp-table-clients tbody,
	table.sp-table-resources tbody,
	table.sp-table-milestones tbody,
	table.sp-table-directory tbody,
	table.sp-table-team tbody ,
	table.sp-table-enrollments tbody {
		display: block !important;
		width: 100% !important;
		background: transparent !important;
	}

	/* ─── Card row styling ─── */
	table.sp-table-journeys tbody tr,
	table.sp-table-clients tbody tr,
	table.sp-table-resources tbody tr,
	table.sp-table-milestones tbody tr,
	table.sp-table-directory tbody tr,
	table.sp-table-team tbody tr ,
	table.sp-table-enrollments tbody tr {
		display: block !important;
		background: #fff;
		border: 1px solid #E5E3DD !important;
		border-radius: 12px !important;
		padding: 0 20px !important;
		margin-bottom: 16px !important;
		box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
		overflow: hidden !important;
	}

	/* ─── Cell layout: label left, value right ─── */
	table.sp-table-journeys td,
	table.sp-table-clients td,
	table.sp-table-resources td,
	table.sp-table-milestones td,
	table.sp-table-directory td,
	table.sp-table-team td ,
	table.sp-table-enrollments td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-start !important;
		padding: 10px 20px !important;
		margin: 0 -20px !important;
		border: none !important;
		border-bottom: 1px solid #F0EFE9 !important;
		background: transparent !important;
		width: auto !important;
		font-size: 14px !important;
		text-align: right !important;
	}

	/* Kill WordPress alternating row backgrounds */
	table.sp-table-journeys tbody tr,
	table.sp-table-clients tbody tr,
	table.sp-table-resources tbody tr,
	table.sp-table-milestones tbody tr,
	table.sp-table-directory tbody tr,
	table.sp-table-team tbody tr,
	table.sp-table-enrollments tbody tr,
	table.sp-table-journeys tbody tr.alternate,
	table.sp-table-clients tbody tr.alternate,
	table.sp-table-resources tbody tr.alternate,
	table.sp-table-milestones tbody tr.alternate,
	table.sp-table-directory tbody tr.alternate,
	table.sp-table-team tbody tr.alternate,
	table.sp-table-enrollments tbody tr.alternate,
	table.sp-table-journeys.striped > tbody > :nth-child(odd),
	table.sp-table-clients.striped > tbody > :nth-child(odd),
	table.sp-table-resources.striped > tbody > :nth-child(odd),
	table.sp-table-milestones.striped > tbody > :nth-child(odd),
	table.sp-table-directory.striped > tbody > :nth-child(odd),
	table.sp-table-team.striped > tbody > :nth-child(odd) ,
	table.sp-table-enrollments.striped > tbody > :nth-child(odd) {
		background: #fff !important;
	}

	/* Kill WordPress fixed column widths */
	table.sp-table-journeys.fixed td,
	table.sp-table-clients.fixed td,
	table.sp-table-resources.fixed td,
	table.sp-table-milestones.fixed td,
	table.sp-table-directory.fixed td,
	table.sp-table-team.fixed td ,
	table.sp-table-enrollments.fixed td {
		width: 100% !important;
		overflow: visible !important;
		text-overflow: unset !important;
		white-space: normal !important;
	}

	table.sp-table-journeys td:last-child,
	table.sp-table-clients td:last-child,
	table.sp-table-resources td:last-child,
	table.sp-table-milestones td:last-child,
	table.sp-table-directory td:last-child,
	table.sp-table-team td:last-child ,
	table.sp-table-enrollments td:last-child {
		border-bottom: none !important;
		padding-bottom: 16px !important;
	}

	/* ─── Data labels (left side) ─── */
	table.sp-table-journeys td[data-label]::before,
	table.sp-table-clients td[data-label]::before,
	table.sp-table-resources td[data-label]::before,
	table.sp-table-milestones td[data-label]::before,
	table.sp-table-directory td[data-label]::before,
	table.sp-table-team td[data-label]::before ,
	table.sp-table-enrollments td[data-label]::before {
		content: attr(data-label) !important;
		display: block !important;
		font-family: 'Poppins', sans-serif !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		color: #64748B !important;
		text-transform: uppercase !important;
		letter-spacing: 0.5px !important;
		flex-shrink: 0 !important;
		width: 40% !important;
		min-width: 90px !important;
		padding-top: 2px !important;
		text-align: left !important;
	}

	/* Values align right.
	   Note: overflow-wrap is `break-word` (NOT `anywhere`). `anywhere`
	   tells the flex/grid sizing algorithm the item's min-content is
	   zero, which can collapse the value track under some cascades and
	   wrap text 2–3 chars per line. `break-word` only kicks in on
	   actual overflow and leaves natural word-width sizing intact. */
	table.sp-table-journeys td > *,
	table.sp-table-clients td > *,
	table.sp-table-resources td > *,
	table.sp-table-milestones td > *,
	table.sp-table-directory td > *,
	table.sp-table-team td > * ,
	table.sp-table-enrollments td > * {
		text-align: right !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		overflow-wrap: break-word !important;
	}

	/* ─── Title cell: centered header, no label (milestones intentionally
	   excluded — its Title renders as a regular label/value row) ─── */
	table.sp-table-journeys td.sp-cell-title,
	table.sp-table-clients td.sp-cell-title,
	table.sp-table-resources td:first-child,
	table.sp-table-directory td.sp-cell-title,
	table.sp-table-team td.sp-cell-title ,
	table.sp-table-enrollments td.sp-cell-title {
		display: block !important;
		text-align: center !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		padding: 20px 20px 14px !important;
		margin: 0 -20px 4px !important;
		border-bottom: 1px solid #E5E3DD !important;
	}

	table.sp-table-journeys td.sp-cell-title::before,
	table.sp-table-clients td.sp-cell-title::before,
	table.sp-table-resources td:first-child::before,
	table.sp-table-directory td.sp-cell-title::before,
	table.sp-table-team td.sp-cell-title::before ,
	table.sp-table-enrollments td.sp-cell-title::before {
		display: none !important;
	}

	table.sp-table-journeys td.sp-cell-title *,
	table.sp-table-clients td.sp-cell-title *,
	table.sp-table-resources td:first-child *,
	table.sp-table-directory td.sp-cell-title *,
	table.sp-table-team td.sp-cell-title * ,
	table.sp-table-enrollments td.sp-cell-title * {
		text-align: center !important;
	}

	/* Actions cell: centered, no label */
	table.sp-table-journeys td[data-label="Actions"],
	table.sp-table-clients td[data-label="Actions"],
	table.sp-table-resources td[data-label="Actions"],
	table.sp-table-milestones td[data-label="Actions"],
	table.sp-table-directory td[data-label="Actions"],
	table.sp-table-team td[data-label="Actions"] ,
	table.sp-table-enrollments td[data-label="Actions"] {
		justify-content: center !important;
		text-align: center !important;
	}

	table.sp-table-journeys td[data-label="Actions"]::before,
	table.sp-table-clients td[data-label="Actions"]::before,
	table.sp-table-resources td[data-label="Actions"]::before,
	table.sp-table-milestones td[data-label="Actions"]::before,
	table.sp-table-directory td[data-label="Actions"]::before,
	table.sp-table-team td[data-label="Actions"]::before ,
	table.sp-table-enrollments td[data-label="Actions"]::before {
		display: none !important;
		content: none !important;
	}

	/* Client email under name */
	.sp-table-clients td.sp-cell-title span,
	.sp-table-directory td.sp-cell-title span {
		display: block !important;
		font-weight: 400 !important;
		font-size: 12px !important;
		color: #6b7280 !important;
		margin-top: 2px;
	}

	/* ─── Progress bar: full width ─── */
	.sp-table-clients td[data-label="Progress"] {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.sp-table-clients td[data-label="Progress"]::before {
		width: 100% !important;
		margin-bottom: 6px;
	}

	.sp-table-clients td[data-label="Progress"] > div {
		text-align: left !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
		margin-left: 25%;
		width: 75% !important;
	}

	.sp-table-clients td[data-label="Progress"] {
		overflow: hidden !important;
	}

	.sp-table-clients .sp-progress-track {
		height: 8px !important;
		flex: 1 !important;
	}

	.sp-table-clients .sp-progress-bar {
		height: 8px !important;
	}

	.sp-table-clients .sp-progress-wrap {
		max-width: 100% !important;
	}

	/* ─── Directory: hide email column (shown under name in card) ─── */
	.sp-table-directory td[data-label="Email"] {
		display: none !important;
	}

	/* ─── Enrollments: progress bar styling ─── */
	.sp-table-team td[data-label="Progress"] ,
	.sp-table-enrollments td[data-label="Progress"] {
		flex-direction: column !important;
		align-items: stretch !important;
		overflow: hidden !important;
	}

	.sp-table-team td[data-label="Progress"]::before ,

	.sp-table-enrollments td[data-label="Progress"]::before {
		width: 100% !important;
		margin-bottom: 6px;
	}

	.sp-table-team td[data-label="Progress"] > div ,

	.sp-table-enrollments td[data-label="Progress"] > div {
		text-align: left !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
		margin-left: 25%;
		width: 75% !important;
	}

	.sp-table-team .sp-progress-track ,

	.sp-table-enrollments .sp-progress-track {
		height: 8px !important;
		flex: 1 !important;
	}

	.sp-table-team .sp-progress-bar ,

	.sp-table-enrollments .sp-progress-bar {
		height: 8px !important;
	}

	.sp-table-team .sp-progress-wrap ,

	.sp-table-enrollments .sp-progress-wrap {
		max-width: 100% !important;
	}

	/* ─── Profile cards: full width on mobile ─── */
	.sp-admin-card {
		max-width: 100% !important;
	}

	/* ─── Actions: centered links ─── */
	.sp-table-journeys td[data-label="Actions"],
	.sp-table-clients td[data-label="Actions"],
	.sp-table-resources td[data-label="Actions"],
	.sp-table-milestones td[data-label="Actions"],
	.sp-table-directory td[data-label="Actions"],
	.sp-table-team td[data-label="Actions"] ,
	.sp-table-enrollments td[data-label="Actions"] {
		justify-content: center !important;
		gap: 4px;
		padding-top: 14px !important;
	}

	.sp-table-journeys td[data-label="Actions"]::before,
	.sp-table-clients td[data-label="Actions"]::before,
	.sp-table-resources td[data-label="Actions"]::before,
	.sp-table-milestones td[data-label="Actions"]::before,
	.sp-table-directory td[data-label="Actions"]::before,
	.sp-table-team td[data-label="Actions"]::before ,
	.sp-table-enrollments td[data-label="Actions"]::before {
		display: none !important;
		content: none !important;
	}

	.sp-table-journeys td[data-label="Actions"] *,
	.sp-table-clients td[data-label="Actions"] *,
	.sp-table-resources td[data-label="Actions"] *,
	.sp-table-milestones td[data-label="Actions"] *,
	.sp-table-directory td[data-label="Actions"] *,
	.sp-table-team td[data-label="Actions"] * ,
	.sp-table-enrollments td[data-label="Actions"] * {
		text-align: center !important;
	}

	/* Actions buttons: equal size on mobile, bell stays circular */
	.sp-table-clients td[data-label="Actions"] {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}

	.sp-table-clients td[data-label="Actions"] .button,
	.sp-table-clients td[data-label="Actions"] button {
		flex: 1 1 auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.sp-table-clients td[data-label="Actions"] form {
		flex: 1 1 auto !important;
		max-width: 100% !important;
	}

	.sp-table-clients td[data-label="Actions"] form button {
		width: 100% !important;
		max-width: none !important;
	}

	/* ─── General mobile admin fixes ─── */
	.sprigly-admin-wrap {
		padding: 10px !important;
	}

	.sprigly-admin-wrap h1 {
		font-size: 22px !important;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}

	.auto-fold #wpcontent {
		padding-left: 10px;
		padding-right: 10px !important;
	}

	/* Filter row */
	.sp-admin-filters {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.sp-admin-filters form {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 8px !important;
	}

	.sp-admin-filters select,
	.sp-admin-filters input[type="search"] {
		width: 100% !important;
	}

	/* Filter + Clear buttons side by side */
	.sp-admin-filters form {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.sp-admin-filters .button {
		display: inline-block !important;
		width: auto !important;
		flex: 0 0 auto !important;
	}

	/* Dashboard stat cards - 2x2 grid */
	.sp-admin-stats {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.sp-admin-stat {
		padding: 14px !important;
		text-align: center;
	}

	.sp-admin-stat-value {
		font-size: 26px !important;
	}

	.sp-admin-stat-label {
		font-size: 12px !important;
	}

	/* Dashboard panels stack */
	.sp-admin-panels {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.sp-admin-panel {
		padding: 16px !important;
	}

	.sp-admin-panel-title {
		font-size: 14px !important;
	}

	/* Activity feed items */
	.sp-admin-panel-scroll {
		max-height: 400px !important;
	}

	/* Client view milestone cards */
	.sp-admin-card {
		padding: 16px !important;
	}

	/* Settings form */
	.sprigly-admin-wrap .form-table th {
		display: block !important;
		padding-bottom: 4px !important;
	}

	.sprigly-admin-wrap .form-table td {
		display: block !important;
		padding-left: 0 !important;
	}

	/* Nav tabs wrap */
	.sprigly-admin-wrap .nav-tab-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}

	.sprigly-admin-wrap .nav-tab {
		font-size: 13px !important;
		padding: 6px 12px !important;
	}
}

/* ============= ADMIN VIDEO EMBED ============= */
.sprigly-admin-wrap iframe[src*="youtube"],
.sprigly-admin-wrap iframe[src*="vimeo"],
.sprigly-admin-wrap iframe[src*="youtu.be"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 8px !important;
}

/* =============================================================
   RESPONSIVE — RE-ENFORCE BELOW WP's 782px BREAKPOINT
   WordPress core resets .widefat td to display:block at 782px.
   This overrides it back to our card layout.
   ============================================================= */

/* ============================================================================
 * WP-ADMIN FRAME FIXES (782px) — audit DIM-3.1, v1.30.23
 * ----------------------------------------------------------------------------
 * Below 782px WordPress core collapses the admin sidebar and switches the
 * admin frame to mobile mode. These rules contain the Sprigly admin wrap
 * within the new viewport and prevent horizontal overflow on the dashboard
 * stats grid + panel layout. Table/card rules used to live here too — those
 * are now in the consolidated 850px block above (specificity-bumped to
 * `table.sp-table-X` so they win against WP core's `table.wp-list-table`
 * rules without needing duplication).
 * ========================================================================= */
@media screen and (max-width: 782px) {
	/* Dashboard width fix */
	.sprigly-admin-wrap {
		max-width: 100% !important;
		overflow-x: hidden !important;
		padding: 8px !important;
	}

	.sp-admin-stats {
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		width: 100% !important;
	}

	.sp-admin-stat {
		min-width: 0 !important;
		overflow: hidden !important;
	}

	.sp-admin-panels {
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}

	.sp-admin-panel {
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* Contain the admin wrap */
	#wpcontent {
		overflow-x: hidden !important;
	}

	#wpbody-content {
		overflow-x: hidden !important;
		padding-bottom: 20px !important;
	}

	.wrap.sprigly-admin-wrap {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Stack First Name / Last Name on mobile (Add Client form, v1.30.24).
	   The grid stays 2-up on desktop; on narrow viewports the columns get
	   too tight and the inputs visually crowd each other. v1.30.25: bump
	   the row-gap so the now-stacked inputs get the same ~16px breathing
	   room used elsewhere in the form. */
	.sprigly-admin-wrap .sp-name-row {
		grid-template-columns: 1fr !important;
		row-gap: 16px !important;
	}

	/* Hide drag-handle cell on mobile (v1.30.24). Drag-and-drop reorder
	   doesn't work reliably on touch devices, and the cell would otherwise
	   render as an empty flex row at the top of every card (the drag icon
	   is opacity:0 until hover). Keyboard-accessible reorder buttons in
	   the Actions column remain available via Tab. */
	table.sp-table-milestones td.sp-drag-handle {
		display: none !important;
	}

	/* ─── Milestones Title: regular label/value row (not centered card) ──
	   The default flex layout (shared with other tables) now handles the
	   label/value split correctly — v1.30.9's switch from overflow-wrap
	   `anywhere` to `break-word` fixed the intrinsic-size collapse. All
	   milestones needs on top of that is to opt its Title cell out of
	   the centered-card header styling, which used to live in the
	   `.sp-cell-title` groups above. */
	.sprigly-admin-wrap table.sp-table-milestones tbody td[data-label="Title"] {
		font-size: 14px !important;
		font-weight: normal !important;
		border-bottom: 1px solid #F0EFE9 !important;
	}

	.sprigly-admin-wrap table.sp-table-milestones tbody td[data-label="Title"] strong {
		font-weight: 600 !important;
	}

	/* Description: extra left padding on the value span to tighten the
	   wrap width. Without this the description fills the whole 60% flex
	   track and looks visually heavy next to the short Title/Type values. */
	.sprigly-admin-wrap table.sp-table-milestones tbody td[data-label="Description"] > * {
		padding-left: 100px !important;
	}

	/* Button text swap: Duplicate → Copy on narrow viewports. "Duplicate"
	   overflows the small admin button on mobile and visually truncates. */
	.sprigly-admin-wrap .sp-btn-duplicate .sp-btn-text-full {
		display: none !important;
	}

	.sprigly-admin-wrap .sp-btn-duplicate .sp-btn-text-short {
		display: inline !important;
	}
}

/* Duplicate button: default state (desktop) shows the full word */
.sprigly-admin-wrap .sp-btn-duplicate .sp-btn-text-short {
	display: none;
}

/* ============= SOFTER INPUT BORDERS ============= */
.sprigly-admin-wrap input[type="text"],
.sprigly-admin-wrap input[type="url"],
.sprigly-admin-wrap input[type="email"],
.sprigly-admin-wrap input[type="number"],
.sprigly-admin-wrap input[type="search"],
.sprigly-admin-wrap input[type="password"],
.sprigly-admin-wrap textarea,
.sprigly-admin-wrap select {
	border-color: #e2e0da !important;
}

.sprigly-admin-wrap input[type="text"]:focus,
.sprigly-admin-wrap input[type="url"]:focus,
.sprigly-admin-wrap input[type="email"]:focus,
.sprigly-admin-wrap input[type="number"]:focus,
.sprigly-admin-wrap input[type="search"]:focus,
.sprigly-admin-wrap input[type="password"]:focus,
.sprigly-admin-wrap textarea:focus,
.sprigly-admin-wrap select:focus {
	border-color: #d0cec7 !important;
	box-shadow: 0 0 0 1px #e2e0da !important;
}

/* ============= BORDER & SPACING TWEAKS ============= */
table.widefat {
	border: 0.5px solid #e2e0da !important;
}

td.sp-cell-title a {
	font-size: 14px !important;
}

.sprigly-admin-wrap .button {
	margin-bottom: 4px;
	margin-top: 4px;
}

.toplevel_page_sprigly-dashboard #wpcontent,
.sprigly_page_sprigly-journeys #wpcontent,
.sprigly_page_sprigly-clients #wpcontent,
.sprigly_page_sprigly-client-directory #wpcontent,
.sprigly_page_sprigly-resources #wpcontent,
.sprigly_page_sprigly-settings #wpcontent,
.sprigly_page_sprigly-practitioner-settings #wpcontent,
.sprigly_page_sprigly-team #wpcontent {
	background: #ffffff !important;
}

.sprigly-admin-wrap .wp-list-table td,
.sprigly-admin-wrap .widefat td,
.sprigly-admin-wrap .widefat td ol,
.sprigly-admin-wrap .widefat td p,
.sprigly-admin-wrap .widefat td ul {
	font-size: 14px !important;
}

.sprigly-admin-wrap .striped > tbody > :nth-child(odd) {
	background: var(--spa-bg, #f7f6f3) !important;
}

.sp-admin-card {
	border: 0.5px solid #e2e0da !important;
}

.sprigly-admin-wrap .wp-list-table th {
	background: #314562 !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
}

.sp-admin-panel-scroll .sp-activity-item:nth-child(odd) {
	/* background removed — no tiger stripes on activity feed */
}

.sprigly-admin-wrap .wp-list-table tbody tr:hover td {
	background: inherit !important;
}

.sp-table-clients td.sp-cell-title span,
.sp-table-directory td.sp-cell-title span,
.sp-table-team td.sp-cell-title span ,
.sp-table-enrollments td.sp-cell-title span {
	display: block;
	font-size: 12px;
	color: var(--spa-text-muted);
	margin-top: 1px;
	line-height: 1.3;
}

@media screen and (min-width: 851px) and (max-width: 1400px) {
	.sp-table-directory td.sp-cell-title span {
		word-break: break-all;
	}
}

body.toplevel_page_sprigly-dashboard,
body.sprigly_page_sprigly-journeys,
body.sprigly_page_sprigly-clients,
body.sprigly_page_sprigly-client-directory,
body.sprigly_page_sprigly-resources,
body.sprigly_page_sprigly-settings,
body.sprigly_page_sprigly-practitioner-settings,
body.sprigly_page_sprigly-team {
	background: #fff !important;
}

/* Settings tabs — inactive = navy, active = white */
.sprigly-admin-wrap .nav-tab-wrapper .nav-tab {
	background: #314562 !important;
	color: #fff !important;
	border: 1px solid #314562 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}
.sprigly-admin-wrap .nav-tab-wrapper .nav-tab:not(.nav-tab-active):hover {
	background: #243347 !important;
	color: #fff !important;
}
.sprigly-admin-wrap .nav-tab-wrapper .nav-tab-active {
	background: #fff !important;
	color: #314562 !important;
	border-bottom-color: #fff !important;
}
.sprigly-admin-wrap .nav-tab-wrapper .nav-tab-active:hover {
	color: white !important;
	background: #314562 !important;
}

#sp-download-report {
	line-height: 1 !important;
}

.wp-core-ui .button {
	border-width: 0.5px;
}

/* Primary submit buttons — green styled (excludes small action buttons) */
.sprigly-admin-wrap .submit .button-primary,
.sprigly-admin-wrap p.submit .button-primary,
.sprigly-admin-wrap .button-primary:not(.button-small):not(.page-title-action):not(.button-hero) {
	background: #1a5632 !important;
	border-color: #1a5632 !important;
	color: #fff !important;
	padding: 10px 24px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	height: auto !important;
}
.sprigly-admin-wrap .submit .button-primary:hover,
.sprigly-admin-wrap .button-primary:not(.button-small):not(.page-title-action):not(.button-hero):hover {
	background: #0f3d22 !important;
	border-color: #0f3d22 !important;
}