/**
 * Leadite premium dashboard & admin styles.
 * Aesthetic: Warm Human (warm backgrounds, soft elegant curves, generous spacing, fine typography).
 * Naming: BEM.
 * Internationalization: Built using CSS logical properties for native LTR/RTL support.
 */

.leadite,
.lh {
	/* Theme Tokens */
	--leadite-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--leadite-bg-warm: #faf7f2;
	--leadite-bg-card: #ffffff;

	--leadite-color-indigo: #4f46e5;
	--leadite-color-indigo-soft: #eef2ff;
	--leadite-color-teal: #0d9488;
	--leadite-color-teal-soft: #f0fdfa;
	--leadite-color-amber: #d97706;
	--leadite-color-amber-soft: #fffbeb;
	--leadite-color-pink: #db2777;
	--leadite-color-pink-soft: #fdf2f8;
	--leadite-color-blue: #2563eb;
	--leadite-color-blue-soft: #eff6ff;
	--leadite-color-slate: #475569;
	--leadite-color-slate-soft: #f1f5f9;
	--leadite-color-green: #10b981;
	--leadite-color-green-soft: #ecfdf5;
	--leadite-color-red: #ef4444;
	--leadite-color-red-soft: #fdf2f2;

	--leadite-border: #e6dec9;
	--leadite-border-light: #f5efe0;
	--leadite-text: #2d3139;
	--leadite-text-soft: #666e7a;

	/* Interactive States */
	--leadite-transition-ease: 200ms cubic-bezier(0.23, 1, 0.32, 1);
	--leadite-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
	--leadite-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	--leadite-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);

	font-family: var(--leadite-font-sans);
	color: var(--leadite-text);
	box-sizing: border-box;
}

.lh * {
	box-sizing: inherit;
}

/* Layout & Base */
.lh.wrap {
	margin-block: 24px;
	margin-inline-start: 2px;
	margin-inline-end: 20px;
}

/* Typography base */
.lh h1 {
	font-family: var(--leadite-font-sans);
	font-weight: 700;
	font-size: 28px;
	color: var(--leadite-text);
	margin: 0;
	letter-spacing: -0.02em;
}

/* Dashboard Grid */
.leadite-dashboard-header {
	margin-block-end: 24px;
}

.leadite-dashboard-subtitle {
	font-size: 14px;
	color: var(--leadite-text-soft);
	margin-block-start: 4px;
	margin-block-end: 0;
}

/* KPI Cards Grid */
.leadite-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-block-end: 24px;
}

@media (max-width: 1200px) {
	.leadite-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.leadite-kpi-grid {
		grid-template-columns: 1fr;
	}
}

.leadite-kpi-card {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 16px;
	padding: 20px;
	box-shadow: var(--leadite-shadow-sm);
	transition: transform var(--leadite-transition-ease), box-shadow var(--leadite-transition-ease);
}

.leadite-kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--leadite-shadow-md);
}

.leadite-kpi-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 12px;
}

.leadite-kpi-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--leadite-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.leadite-kpi-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
}

.leadite-kpi-icon {
	width: 18px;
	height: 18px;
}

/* KPI Variant Themes */
.leadite-kpi-card--total .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-indigo-soft);
	color: var(--leadite-color-indigo);
}

.leadite-kpi-card--today .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-teal-soft);
	color: var(--leadite-color-teal);
}

.leadite-kpi-card--week .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-amber-soft);
	color: var(--leadite-color-amber);
}

.leadite-kpi-card--new .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-pink-soft);
	color: var(--leadite-color-pink);
}

.leadite-kpi-card--growth-up .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-green-soft);
	color: var(--leadite-color-green);
}

.leadite-kpi-card--growth-down .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-red-soft);
	color: var(--leadite-color-red);
}

.leadite-kpi-card--growth-flat .leadite-kpi-icon-wrapper {
	background: var(--leadite-color-slate-soft);
	color: var(--leadite-color-slate);
}

.leadite-kpi-value {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--leadite-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.leadite-kpi-label {
	display: block;
	font-size: 12px;
	color: var(--leadite-text-soft);
	margin-block-start: 6px;
	unicode-bidi: plaintext;
	float: inline-start;
}

/* Two-column dashboard grid */
.leadite-dashboard-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	margin-block-end: 24px;
	align-items: start;
}

@media (max-width: 960px) {
	.leadite-dashboard-grid {
		grid-template-columns: 1fr;
	}
}

/* Premium Card container */
.leadite-card {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--leadite-shadow-sm);
}

.leadite-card-header {
	margin-block-end: 20px;
}

.leadite-card h2 {
	font-family: var(--leadite-font-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--leadite-text);
	margin: 0;
	letter-spacing: -0.01em;
}

.leadite-card-subtitle {
	font-size: 12px;
	color: var(--leadite-text-soft);
	margin-block-start: 4px;
	margin-block-end: 0;
}

/* Sidebar structure */
.leadite-dashboard-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* SVG Analytics Charts */
.leadite-chart-wrapper {
	position: relative;
	margin-block-start: 10px;
	direction: ltr;
}

.leadite-svg-chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Chart Paths */
.leadite-chart-stroke-line {
	filter: drop-shadow(0px 4px 6px rgba(79, 70, 229, 0.15));
}

.leadite-chart-dot {
	transition: r var(--leadite-transition-ease), stroke-width var(--leadite-transition-ease);
}

.leadite-chart-trigger:hover+.leadite-chart-dot,
.leadite-chart-dot.is-active {
	r: 6px;
	stroke-width: 3px;
}

/* Chart Axis & Grid */
.leadite-chart-axis-text {
	font-family: var(--leadite-font-sans);
	font-weight: 500;
}

.leadite-chart-grid-line {
	stroke: var(--leadite-border);
}

/* Tooltip on Line Chart */
.leadite-chart-tooltip {
	background: #1e293b;
	color: #ffffff;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 500;
	box-shadow: var(--leadite-shadow-lg);
	transition: opacity 120ms ease, transform 120ms ease;
	z-index: 100;
	pointer-events: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.leadite-chart-tooltip strong {
	font-size: 13px;
	display: block;
	margin-block-start: 2px;
	color: #a5b4fc;
}

/* Donut Chart Styling */
.leadite-donut-flex {
	display: flex;
	gap: 20px;
	align-items: center;
}

@media (max-width: 1200px) and (min-width: 960px) {
	.leadite-donut-flex {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.leadite-donut-flex {
		flex-direction: column;
	}
}

.leadite-donut-svg-container {
	flex: 0 0 130px;
	width: 130px;
	position: relative;
}

.leadite-donut-svg {
	display: block;
	overflow: visible;
}

.leadite-donut-segment {
	transition: stroke-width var(--leadite-transition-ease), opacity var(--leadite-transition-ease);
	cursor: pointer;
}

.leadite-donut-segment:hover {
	stroke-width: 22;
}

.leadite-donut-segment.is-dimmed {
	opacity: 0.3;
}

.leadite-donut-center-value {
	font-size: 28px;
	font-weight: 700;
	fill: var(--leadite-text);
	font-family: var(--leadite-font-sans);
	letter-spacing: -0.03em;
}

.leadite-donut-center-label {
	font-size: 10px;
	font-weight: 600;
	fill: var(--leadite-text-soft);
	font-family: var(--leadite-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.leadite-donut-legend {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.leadite-legend-item {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--leadite-text-soft);
	padding: 8px 10px;
	border-radius: 8px;
	transition: background var(--leadite-transition-ease);
	cursor: pointer;
}

.leadite-legend-item:hover,
.leadite-legend-item.is-active {
	background: var(--leadite-bg-warm);
	color: var(--leadite-text);
}

.leadite-legend-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-inline-end: 10px;
	flex-shrink: 0;
}

.leadite-legend-name {
	flex: 1;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.leadite-legend-stats {
	margin-inline-start: 10px;
	font-variant-numeric: tabular-nums;
}

.leadite-donut-empty-text,
.leadite-empty-text {
	font-size: 13px;
	color: var(--leadite-text-soft);
	font-style: italic;
	margin: 0;
}

/* Top performing forms progress rows */
.leadite-forms-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.leadite-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.leadite-form-row-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.leadite-form-row-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--leadite-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	margin-inline-end: 8px;
}

.leadite-form-row-badge {
	font-size: 10px;
	padding: 1px 6px;
	line-height: 1.4;
}

.leadite-form-row-bar-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.leadite-form-row-bar-fill {
	height: 8px;
	background: var(--leadite-color-indigo);
	border-radius: 999px;
	min-width: 4px;
}

/* Background track is simulated by the container layout or style */
.leadite-form-row-bar-wrapper::before {
	content: '';
	position: absolute;
	z-index: 1;
	height: 8px;
	background: var(--leadite-border-light);
	border-radius: 999px;
	flex: 1;
}

/* Let's style track nicely using CSS */
.leadite-form-row-bar-wrapper {
	position: relative;
	background: var(--leadite-border-light);
	height: 8px;
	border-radius: 999px;
}

.leadite-form-row-bar-fill {
	position: relative;
	z-index: 2;
	height: 100%;
}

.leadite-form-row-count {
	position: absolute;
	inset-inline-end: -28px;
	font-size: 11px;
	font-weight: 700;
	color: var(--leadite-text-soft);
	font-variant-numeric: tabular-nums;
	width: 20px;
	text-align: end;
}

.leadite-form-row {
	/* leave room for absolute count label */
	margin-inline-end: 28px;
}

/* Recent submissions header flex */
.leadite-recent-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* Table Layout Overrides */
.leadite-table-responsive {
	width: 100%;
	overflow-x: auto;
	margin-block-start: 10px;
	border-radius: 8px;
	border: 1px solid var(--leadite-border);
}

.leadite-recent-table {
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

.leadite-recent-table th {
	font-weight: 700 !important;
	color: var(--leadite-text) !important;
	background: var(--leadite-bg-warm) !important;
}

/* General WP list table styles inside LeadHub */
.lh .wp-list-table {
	border: 1px solid var(--leadite-border);
	box-shadow: var(--leadite-shadow-sm);
	border-radius: 12px;
	overflow: hidden;
}

.lh .wp-list-table th {
	font-family: var(--leadite-font-sans);
	font-weight: 600;
}

.lh .wp-list-table td {
	vertical-align: middle;
}

/* Summary chips */
.leadite-summary {
	display: flex;
	gap: 12px;
	margin: 12px 0 20px;
	flex-wrap: wrap;
	align-items: center;
}

.leadite-chip {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--leadite-text);
	box-shadow: var(--leadite-shadow-sm);
	display: inline-flex;
	align-items: center;
}

.leadite-chip strong {
	margin-inline-start: 6px;
	color: var(--leadite-text);
	font-weight: 700;
}

.leadite-export-links {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-inline-start: 8px;
}

.leadite-export-link {
	text-decoration: none !important;
	font-size: 11px;
	font-weight: 700;
	color: var(--leadite-color-indigo) !important;
	background: var(--leadite-color-indigo-soft);
	padding: 4px 8px;
	border-radius: 6px;
	transition: background-color var(--leadite-transition-ease), color var(--leadite-transition-ease);
}

.leadite-export-link:hover {
	background-color: var(--leadite-color-indigo);
	color: #ffffff !important;
}

.leadite-chip--new {
	border-color: var(--leadite-color-pink);
	color: var(--leadite-color-pink);
	background: var(--leadite-color-pink-soft);
}

/* Filters row */
.leadite-filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-block: 12px;
}

.leadite-filters select,
.leadite-filters input[type="date"] {
	border: 1px solid var(--leadite-border) !important;
	border-radius: 8px !important;
	height: 36px !important;
	padding-inline: 12px !important;
	background: var(--leadite-bg-card) !important;
	color: var(--leadite-text) !important;
}

.leadite-filters select:hover,
.leadite-filters input[type="date"]:hover {
	border-color: var(--leadite-color-indigo) !important;
}

/* WP Table Navigation Override to prevent layout jumping */
.lh .tablenav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: auto !important;
	padding: 8px 10px;
	background: var(--leadite-bg-warm);
	border-radius: 12px 12px 0 0;
	border-bottom: 1px solid var(--leadite-border);
}

.lh .tablenav .actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lh .tablenav-pages {
	float: none !important;
	margin: 0 !important;
}

/* Badges styling */
.leadite-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}

.leadite-badge--source {
	background: var(--leadite-color-indigo-soft);
	color: var(--leadite-color-indigo);
	border: 1px solid rgba(79, 70, 229, 0.15);
	text-transform: capitalize;
}

.leadite-badge--new {
	background: var(--leadite-color-pink-soft);
	color: var(--leadite-color-pink);
	border: 1px solid rgba(219, 39, 119, 0.15);
}

.leadite-badge--read {
	background: var(--leadite-color-slate-soft);
	color: var(--leadite-color-slate);
	border: 1px solid rgba(71, 85, 105, 0.1);
}

.leadite-badge--in_progress {
	background: var(--leadite-color-amber-soft);
	color: var(--leadite-color-amber);
	border: 1px solid rgba(217, 119, 6, 0.15);
}

.leadite-badge--closed {
	background: var(--leadite-color-slate-soft);
	color: var(--leadite-text-soft);
	border: 1px solid rgba(0, 0, 0, 0.05);
	opacity: 0.75;
}

.leadite-badge--spam {
	background: var(--leadite-color-blue-soft);
	/* custom palette override */
	color: var(--leadite-color-blue);
	border: 1px solid rgba(37, 99, 235, 0.15);
}

.leadite-list__sub {
	color: var(--leadite-text-soft);
	font-size: 12px;
	display: block;
	margin-block-start: 2px;
}

/* Single Lead details view */
.leadite-single h1 .leadite-id {
	color: var(--leadite-text-soft);
	font-weight: 400;
	font-size: 18px;
	margin-inline-start: 8px;
}

.leadite-back {
	display: inline-flex;
	align-items: center;
	margin-block: 12px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--leadite-color-indigo);
	transition: color var(--leadite-transition-ease);
}

.leadite-back:hover {
	color: var(--leadite-color-indigo);
	text-decoration: underline;
}

.leadite-quick {
	margin-block-end: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.leadite-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	align-items: start;
}

@media (max-width: 900px) {
	.leadite-grid {
		grid-template-columns: 1fr;
	}
}

.leadite-kv {
	width: 100%;
	border-collapse: collapse;
}

.leadite-kv th {
	text-align: start;
	vertical-align: top;
	padding: 12px 10px;
	width: 35%;
	color: var(--leadite-text-soft);
	font-weight: 600;
	font-size: 13px;
	border-block-end: 1px solid var(--leadite-border-light);
}

.leadite-kv td {
	padding: 12px 10px;
	border-block-end: 1px solid var(--leadite-border-light);
	word-break: break-word;
	font-size: 13px;
	line-height: 1.5;
}

.leadite-kv tr:last-child th,
.leadite-kv tr:last-child td {
	border-block-end: none;
}

.leadite-card--meta {
	background: var(--leadite-bg-warm);
	border-color: var(--leadite-border);
}

.leadite-card--meta h2 {
	border-block-end-color: var(--leadite-border);
}

.leadite-status-form {
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--leadite-border);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.leadite-status-form select {
	border: 1px solid var(--leadite-border) !important;
	border-radius: 8px !important;
	height: 36px !important;
	padding-inline: 12px !important;
}

.leadite-powered {
	margin-block-start: 36px;
	color: #9ca3af;
	font-size: 11px;
	font-weight: 500;
	text-align: center;
}

/* Accessibility & Interaction States */

/* Visible focus rings only for keyboard users (WCAG 2.4.7). */
.lh a:focus-visible,
.lh button:focus-visible,
.lh input:focus-visible,
.lh select:focus-visible,
.lh .button:focus-visible,
.lh .leadite-legend-item:focus-visible {
	outline: 2px solid var(--leadite-color-indigo);
	outline-offset: 2px;
}

/* Pressable feedback + no 300ms mobile delay + pointer cursor. */
.lh button,
.lh .button,
.lh select,
.lh input[type="submit"] {
	touch-action: manipulation;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {

	.lh button,
	.lh .button,
	.lh input[type="submit"] {
		transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease, border-color 150ms ease;
	}

	.lh button:active,
	.lh .button:active,
	.lh input[type="submit"]:active {
		transform: scale(0.97);
	}

	.leadite-kpi-card,
	.leadite-card {
		transition: transform 200ms var(--leadite-transition-ease), box-shadow 200ms var(--leadite-transition-ease);
	}
}

/* Numerals align in columns (dates, ids, counts). */
.lh .wp-list-table td,
.leadite-chip strong,
.leadite-kv td,
.leadite-kpi-value,
.leadite-form-row-count,
.leadite-legend-stats {
	font-variant-numeric: tabular-nums;
}

/* Headings avoid widowed words. */
.lh h1,
.leadite-card h2 {
	text-wrap: balance;
}

/* Keep focused rows clear of any sticky admin bar. */
.lh :target,
.lh :focus {
	scroll-margin-top: 60px;
}

/* Screen-reader-only helper. */
.lh .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.leadite-row-title-wrap {
	margin-block-end: 4px;
}

.leadite-row-meta-line {
	margin-block-end: 2px;
	font-size: 13px;
	color: var(--leadite-text-soft);
}

.leadite-row-meta-line:last-child {
	margin-block-end: 0;
}

/* Kanban Board */
.leadite-view-toggle .button {
	height: 36px !important;
	line-height: 34px !important;
	padding-inline: 16px !important;
	border-radius: 8px !important;
	font-weight: 500 !important;
}

.leadite-view-toggle .button.button-primary {
	background: var(--leadite-color-indigo) !important;
	border-color: var(--leadite-color-indigo) !important;
	color: #ffffff !important;
}

.leadite-kanban-board {
	display: flex;
	gap: 16px;
	align-items: start;
	overflow-x: auto;
	padding-block-end: 20px;
	margin-block-start: 16px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.leadite-kanban-column {
	flex: 1 0 260px;
	max-width: 320px;
	background: var(--leadite-bg-warm);
	border: 1px solid var(--leadite-border);
	border-radius: 16px;
	padding: 16px;
	box-shadow: var(--leadite-shadow-sm);
	transition: background-color var(--leadite-transition-ease), border-color var(--leadite-transition-ease);
}

.leadite-kanban-column.is-dragover {
	background-color: var(--leadite-color-indigo-soft);
	border-color: var(--leadite-color-indigo);
}

.leadite-kanban-column-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 16px;
}

.leadite-kanban-column-header h3 {
	font-family: var(--leadite-font-sans);
	font-size: 13px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--leadite-text);
}

.leadite-kanban-column-count {
	background: var(--leadite-border);
	color: var(--leadite-text);
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.leadite-kanban-column-cards {
	min-height: 450px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.leadite-kanban-card {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border-light);
	border-radius: 12px;
	padding: 14px;
	box-shadow: var(--leadite-shadow-sm);
	cursor: grab;
	transition: transform var(--leadite-transition-ease), box-shadow var(--leadite-transition-ease), opacity var(--leadite-transition-ease);
}

.leadite-kanban-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--leadite-shadow-md);
}

.leadite-kanban-card:active {
	cursor: grabbing;
}

.leadite-kanban-card.is-dragging {
	opacity: 0.4;
	border-style: dashed;
	border-color: var(--leadite-color-indigo);
}

.leadite-kanban-card-title {
	font-size: 13px;
	font-weight: 600;
	margin-block-end: 6px;
	line-height: 1.4;
}

.leadite-kanban-card-title a {
	text-decoration: none !important;
	color: var(--leadite-text) !important;
}

.leadite-kanban-card-title a:hover {
	color: var(--leadite-color-indigo) !important;
}

.leadite-kanban-card-meta {
	font-size: 12px;
	color: var(--leadite-text-soft);
	margin-block-end: 4px;
	word-break: break-all;
}

.leadite-kanban-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-start: 12px;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--leadite-border-light);
}

.leadite-kanban-card-footer .leadite-badge {
	padding: 2px 8px;
	font-size: 10px;
}

.leadite-kanban-card-date {
	font-size: 11px;
	color: var(--leadite-text-soft);
}

.leadite-kanban-empty {
	font-size: 12px;
	color: var(--leadite-text-soft);
	font-style: italic;
	text-align: center;
	padding: 32px 16px;
	border: 1px dashed var(--leadite-border);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.01);
}

/* Timeline & Notes */
.leadite-timeline {
	position: relative;
	padding-inline-start: 32px;
	margin-block-start: 20px;
}

.leadite-timeline::before {
	content: '';
	position: absolute;
	inset-inline-start: 15px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--leadite-border);
}

.leadite-timeline-item {
	position: relative;
	margin-block-end: 24px;
}

.leadite-timeline-item:last-child {
	margin-block-end: 0;
}

.leadite-timeline-icon {
	position: absolute;
	inset-inline-start: -25px;
	/* -32px pad + 7px offset */
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--leadite-bg-card);
	border: 2px solid var(--leadite-border);
	color: var(--leadite-text-soft);
	z-index: 2;
}

.leadite-timeline-icon svg {
	width: 10px;
	height: 10px;
}

.leadite-timeline-item--note .leadite-timeline-icon {
	border-color: var(--leadite-color-indigo);
	color: var(--leadite-color-indigo);
	background: var(--leadite-color-indigo-soft);
}

.leadite-timeline-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.leadite-timeline-meta {
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.leadite-timeline-author {
	font-weight: 700;
	color: var(--leadite-text);
}

.leadite-timeline-date {
	color: var(--leadite-text-soft);
}

.leadite-timeline-body {
	font-size: 13px;
	line-height: 1.5;
	color: var(--leadite-text);
}

.leadite-timeline-warning-text {
	color: var(--leadite-color-red);
	display: inline-flex;
	align-items: center;
	font-weight: 500;
}

.leadite-timeline-warning-text svg {
	color: var(--leadite-color-red);
	margin-right: 4px;
	flex-shrink: 0;
}

.leadite-timeline-item--note .leadite-timeline-body {
	background: var(--leadite-bg-warm);
	border: 1px solid var(--leadite-border-light);
	border-radius: 12px;
	padding: 10px 14px;
	margin-block-start: 4px;
	display: inline-block;
	max-width: 100%;
	word-break: break-word;
	box-shadow: var(--leadite-shadow-sm);
}

.leadite-timeline-empty {
	font-size: 13px;
	color: var(--leadite-text-soft);
	font-style: italic;
	margin: 0;
	text-align: center;
	padding: 20px 0;
}

@keyframes lhFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.leadite-timeline-item--new {
	animation: lhFadeIn 350ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Settings Tabs & Pro Badges */
.leadite-settings-tabs {
	margin-block: 24px !important;
	border-bottom: 1px solid var(--leadite-border) !important;
}

.leadite-settings-tabs .nav-tab {
	font-family: var(--leadite-font-sans);
	font-weight: 600;
	font-size: 13px !important;
	border-color: var(--leadite-border) !important;
	background: var(--leadite-bg-warm) !important;
	color: var(--leadite-text-soft) !important;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding: 8px 16px !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color var(--leadite-transition-ease), color var(--leadite-transition-ease);
}

.leadite-settings-tabs .nav-tab:hover {
	background: #fdfcf9 !important;
	color: var(--leadite-text) !important;
}

.leadite-settings-tabs .nav-tab-active {
	background: var(--leadite-bg-card) !important;
	color: var(--leadite-text) !important;
	border-bottom-color: var(--leadite-bg-card) !important;
}

.leadite-tab-pro-badge {
	background: var(--leadite-color-indigo);
	color: #ffffff;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 5px;
	border-radius: 4px;
	line-height: 1;
}

.leadite-badge--pro {
	background: var(--leadite-color-indigo-soft);
	color: var(--leadite-color-indigo);
	border: 1px solid rgba(79, 70, 229, 0.15);
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.leadite-pro-settings-container h3 {
	font-family: var(--leadite-font-sans);
	font-weight: 700;
	color: var(--leadite-text);
}

/* Field Mapper UI */
.leadite-fm-group {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
	box-shadow: var(--leadite-shadow-sm);
}

.leadite-fm-group-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--leadite-border-light);
}

.leadite-fm-group-header strong {
	font-size: 14px;
	color: var(--leadite-text);
}

.leadite-fm-group-id {
	font-size: 11px;
	color: var(--leadite-text-soft);
	margin-inline-start: auto;
}

.leadite-fm-table {
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
	width: 100%;
}

.leadite-fm-table th {
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--leadite-text-soft) !important;
	background: transparent !important;
	padding: 10px !important;
	border-bottom: 1px solid var(--leadite-border-light) !important;
}

.leadite-fm-row td {
	padding: 12px 10px !important;
	vertical-align: middle !important;
	border-bottom: 1px solid var(--leadite-border-light) !important;
}

.leadite-fm-row:last-child td {
	border-bottom: none !important;
}

.leadite-fm-row--overridden {
	background-color: var(--leadite-color-indigo-soft) !important;
}

.leadite-fm-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	background: var(--leadite-bg-warm);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--leadite-color-indigo);
	border: 1px solid rgba(79, 70, 229, 0.1);
}

.leadite-fm-auto-badge {
	font-size: 10px;
	background: var(--leadite-color-slate-soft);
	color: var(--leadite-text-soft);
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.leadite-fm-select {
	font-size: 12px !important;
	height: 30px !important;
	padding: 0 8px !important;
	border-radius: 6px !important;
	border: 1px solid var(--leadite-border) !important;
	background: var(--leadite-bg-card) !important;
}

/* AJAX Details Modal Styles */
body.leadite-modal-open {
	overflow: hidden;
}

.leadite-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	/* overlay above WP admin bar & menus */
	padding: 20px;
}

.leadite-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(30, 41, 59, 0.4);
	backdrop-filter: blur(4px);
}

.leadite-modal-container {
	position: relative;
	z-index: 10;
	background: #ffffff;
	border: 1px solid var(--leadite-border);
	border-radius: 20px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	width: 100%;
	max-width: 900px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: lhModalZoomIn 250ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes lhModalZoomIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.leadite-modal-content {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.leadite-modal-header {
	padding: 18px 24px;
	border-bottom: 1px solid var(--leadite-border-light);
	background: var(--leadite-bg-warm);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.leadite-modal-header h2 {
	margin: 0;
	font-family: var(--leadite-font-sans);
	font-size: 18px;
	font-weight: 700;
	color: var(--leadite-text);
}

.leadite-modal-header .leadite-id {
	font-size: 14px;
	color: var(--leadite-text-soft);
	font-weight: 400;
	margin-inline-start: 8px;
}

.leadite-modal-close {
	background: transparent;
	border: none;
	font-size: 32px;
	line-height: 1;
	color: var(--leadite-text-soft);
	cursor: pointer;
	padding: 0;
	transition: color var(--leadite-transition-ease), transform var(--leadite-transition-ease);
}

.leadite-modal-close:hover {
	color: var(--leadite-color-red);
	transform: scale(1.1);
}

.leadite-modal-close:active {
	transform: scale(0.95);
}

.leadite-modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

.leadite-modal-body .leadite-quick {
	margin-block-end: 16px;
}

.leadite-modal-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 0;
	flex: 1;
}

.leadite-spinner {
	border: 3px solid var(--leadite-border-light);
	border-top: 3px solid var(--leadite-color-indigo);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: lhSpin 800ms linear infinite;
}

@keyframes lhSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Unified Migrator Grid Styles */
.leadite-migration-section {
	margin-top: 32px;
}

.leadite-migration-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.leadite-migration-card {
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: var(--leadite-shadow-sm);
	transition: transform var(--leadite-transition-ease), box-shadow var(--leadite-transition-ease), border-color var(--leadite-transition-ease);
}

.leadite-migration-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--leadite-shadow-md);
	border-color: var(--leadite-color-indigo);
}

.leadite-migration-card-info h3 {
	margin: 0 0 8px 0;
	font-family: var(--leadite-font-sans);
	font-size: 15px;
	font-weight: 700;
	color: var(--leadite-text);
}

.leadite-migration-card-info p {
	margin: 0 0 20px 0;
	color: var(--leadite-text-soft);
	font-size: 13px;
	line-height: 1.5;
}

.leadite-migration-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.85);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 16px;
	z-index: 10;
}

/* ── Phase 1: Star / Favourite ───────────────────────────────────────────── */
.leadite-star-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--leadite-text-soft);
	padding: 4px;
	border-radius: 6px;
	transition: color var(--leadite-transition-ease), transform var(--leadite-transition-ease);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--leadite-font-sans);
	font-size: 14px;
	font-weight: 500;
}

.leadite-star-btn:hover,
.leadite-star-btn:focus-visible {
	color: #d97706;
	outline: none;
}

.leadite-star-btn.is-starred {
	color: #d97706;
}

.leadite-star-btn--list {
	font-size: 18px;
	padding: 2px 4px;
	gap: 0;
}

/* Narrow column width for the star icon in the list table */
.lh .column-starred {
	width: 36px;
	text-align: center;
	padding-inline: 4px !important;
}

/* ── Phase 1: Assigned to ────────────────────────────────────────────────── */
.leadite-assign-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-block-start: 10px;
}

.leadite-assign-row select {
	flex: 1;
	min-width: 140px;
	border: 1px solid var(--leadite-border) !important;
	border-radius: 8px !important;
	height: 36px !important;
	padding-inline: 10px !important;
	background: var(--leadite-bg-card) !important;
	color: var(--leadite-text) !important;
	font-family: var(--leadite-font-sans);
	font-size: 13px;
}

/* ── Item 1: Extracted inline styles ─────────────────────────────────────── */

/* Title row on leads list page */
.leadite-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-block-end: 20px;
}

/* Gap between view-toggle buttons */
.leadite-view-toggle .button+.button {
	margin-inline-start: 8px;
}

/* Export chip pushed to the end of the summary bar */
.leadite-chip--export {
	margin-inline-start: auto;
}

/* Files card follows the data card */
.leadite-card--files {
	margin-block-start: 20px;
}

/* Image preview in attachment card */
.leadite-file-preview {
	margin-block-end: 8px;
}

.leadite-file-thumb {
	max-width: 150px;
	max-height: 150px;
	border-radius: 8px;
	border: 1px solid var(--leadite-border);
	object-fit: cover;
	display: block;
}

/* Attachment row status badges (pending / failed remote fetch) */
.leadite-file-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 6px;
	cursor: default;
}

.leadite-file-status--pending {
	background: #fef9c3;
	color: #713f12;
	border: 1px solid #fde68a;
}

.leadite-file-status--failed {
	background: #fee2e2;
	color: #7f1d1d;
	border: 1px solid #fca5a5;
}

/* Note form wrapper (above timeline feed) */
.leadite-note-form-wrapper {
	margin-block-end: 20px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--leadite-border-light);
}

/* Note textarea */
.leadite-note-textarea {
	width: 100%;
	min-height: 80px;
	border: 1px solid var(--leadite-border) !important;
	border-radius: 8px !important;
	padding: 10px !important;
	font-family: var(--leadite-font-sans);
	resize: vertical;
	display: block;
	margin-block-end: 10px;
}

/* Timeline card follows attachments */
.leadite-timeline-card {
	margin-block-start: 20px;
}

/* Starred card in sidebar */
.leadite-card--starred {
	margin-block-start: 16px;
	padding: 14px 16px;
}

/* Assign card in sidebar */
.leadite-card--assign {
	margin-block-start: 16px;
}

/* Kanban info banners */
.leadite-kanban-info-banner {
	margin-block-end: 20px;
	padding: 12px 16px;
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--leadite-text-soft);
}

.leadite-kanban-info-banner__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--leadite-color-indigo);
}

.leadite-kanban-instruction {
	margin-block-start: 20px;
	font-size: 13px;
	color: var(--leadite-text-soft);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Settings Pro sections */
.leadite-settings-section {
	margin-block-end: 24px;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--leadite-border-light);
}

.leadite-settings-section--last {
	margin-block-end: 12px;
	border-block-end: none;
	padding-block-end: 0;
}

.leadite-settings-section-title {
	margin-block-start: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--leadite-font-sans);
	font-weight: 700;
	color: var(--leadite-text);
}

.leadite-settings-table {
	margin-block-start: 0 !important;
}

/* Danger Zone */
.leadite-danger-zone {
	margin-block-start: 40px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--leadite-border);
}

.leadite-danger-zone__title {
	color: var(--leadite-color-amber);
	margin-block-start: 0;
}

/* ── Item 6: Kanban card star + assignee ─────────────────────────────────── */

/* Card header: title + star on same row */
.leadite-kanban-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
	margin-block-end: 6px;
}

.leadite-kanban-card-header .leadite-kanban-card-title {
	margin-block-end: 0;
	flex: 1;
}

/* Assignee initials badge in kanban footer */
.leadite-kanban-assignee {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--leadite-color-indigo);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	flex-shrink: 0;
	cursor: default;
}

/* Imported badge on kanban cards */
.leadite-badge--imported {
	background: var(--leadite-color-amber);
	color: #fff;
	margin-inline-start: 4px;
}

/* ── Item 8: Show / hide secret field ────────────────────────────────────── */

.leadite-secret-field-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.leadite-secret-field-wrap input {
	flex: 1;
}

.leadite-secret-reveal {
	flex-shrink: 0;
	padding: 4px 8px !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: var(--leadite-text-soft) !important;
	background: var(--leadite-bg-warm) !important;
	border-color: var(--leadite-border) !important;
	transition: color var(--leadite-transition-ease), background-color var(--leadite-transition-ease);
}

.leadite-secret-reveal:hover,
.leadite-secret-reveal--visible {
	color: var(--leadite-color-indigo) !important;
	background: var(--leadite-color-indigo-soft) !important;
	border-color: var(--leadite-color-indigo) !important;
}

/* ── Pro tier: teaser cards ─────────────────────────────────────────────── */

/* Pro badge used inline in headings */
.leadite-badge--pro {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
	margin-inline-start: 6px;
}

/* Pro teaser card wrapper — same base card but with a subtle Pro tint */
.leadite-card--pro-teaser {
	background: linear-gradient(135deg, #fafbff 0%, #f4f2ff 100%);
	border: 1px solid #c7d2fe;
	position: relative;
	overflow: hidden;
}

.leadite-card--pro-teaser::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 3px;
	background: linear-gradient(90deg, #4f46e5, #7c3aed);
	border-radius: 16px 16px 0 0;
}

.leadite-card--pro-teaser h2 {
	color: #3730a3;
}

/* Body of the teaser block */
.leadite-pro-teaser-body {
	margin-block-start: 12px;
}

.leadite-pro-teaser-desc {
	font-size: 13px;
	color: var(--leadite-text-soft);
	margin: 0 0 10px;
	line-height: 1.6;
}

.leadite-pro-teaser-list {
	margin: 0 0 14px;
	padding-inline-start: 18px;
	font-size: 13px;
	color: var(--leadite-text-soft);
	line-height: 1.9;
}

.leadite-pro-teaser-list li::marker {
	color: #7c3aed;
}

.leadite-pro-teaser-cta {
	margin: 0;
}

.leadite-pro-upgrade-btn {
	background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
	border-color: transparent !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 7px 18px !important;
	height: auto !important;
	border-radius: 8px !important;
	transition: opacity var(--leadite-transition-ease) !important;
}

.leadite-pro-upgrade-btn:hover {
	opacity: 0.9 !important;
}

/* ── Pro settings: locked section visual ────────────────────────────────── */

/* Sections in Free mode that are shown-but-locked */
.leadite-settings-section.leadite-field-locked,
.leadite-settings-section--last.leadite-field-locked {
	opacity: 0.65;
	position: relative;
	pointer-events: none;
	user-select: none;
}

/* Individual locked inputs & buttons */
.leadite-field-locked input,
.leadite-field-locked textarea,
.leadite-field-locked select,
.leadite-field-locked button,
input.leadite-field-locked,
textarea.leadite-field-locked,
select.leadite-field-locked,
button.leadite-field-locked {
	cursor: not-allowed !important;
	background: #f8f9ff !important;
	border-color: #c7d2fe !important;
	color: #94a3b8 !important;
}

/* ── Pro Settings tab: top notice banner ────────────────────────────────── */

.leadite-pro-tab-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	padding: 14px 18px;
	margin-block-end: 24px;
	font-size: 13px;
	line-height: 1.6;
	color: #1e3a5f;
}

.leadite-pro-tab-notice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(79, 70, 229, 0.1);
	color: #3b82f6;
}

.leadite-pro-notice-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.leadite-pro-tab-notice__body a {
	color: #1d4ed8;
}

/* Section-level hint in locked mode */
.leadite-pro-section-hint {
	font-size: 12px;
	color: #7c3aed;
	background: #f5f3ff;
	border-inline-start: 3px solid #7c3aed;
	padding: 6px 12px;
	margin: 0 0 12px;
	border-radius: 0 6px 6px 0;
	line-height: 1.5;
}

/* ── "Soon" badge ────────────────────────────────────────────────────────── */

.leadite-badge--soon {
	background: #f59e0b;
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
	margin-inline-start: 6px;
}

/* leadite-card--tags is fully defined further below — no duplicate rules here */


/* ── Field Mapper tab ────────────────────────────────────────────────────── */

.leadite-field-mapper-tab {
	max-width: 900px;
	padding-block-start: 8px;
}

/* Mockup table wrapper */
.leadite-fm-mockup {
	position: relative;
	margin-block-end: 0;
}

.leadite-fm-mockup--locked {
	user-select: none;
}

.leadite-fm-table {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--leadite-border) !important;
	box-shadow: var(--leadite-shadow-sm);
}

.leadite-fm-table thead th {
	background: var(--leadite-bg-warm) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--leadite-text-soft) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.leadite-fm-table td {
	vertical-align: middle !important;
	padding: 10px 12px !important;
	font-size: 13px;
}

.leadite-fm-table code {
	background: var(--leadite-color-indigo-soft);
	color: var(--leadite-color-indigo);
	padding: 2px 7px;
	border-radius: 5px;
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Mockup-mode select: locked appearance (only applies when NOT .leadite-fm-select--live) */
.leadite-fm-select:not(.leadite-fm-select--live) {
	border: 1px solid var(--leadite-border) !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 13px !important;
	background: #f8f9ff !important;
	color: #94a3b8 !important;
	cursor: not-allowed !important;
	min-width: 120px;
}

/* Locked overlay on the mockup */
.leadite-fm-mockup--locked .leadite-fm-table {
	opacity: 0.55;
}

.leadite-fm-mockup-overlay {
	text-align: center;
	padding: 20px 24px;
	background: linear-gradient(180deg, rgba(250, 251, 255, 0) 0%, rgba(240, 238, 255, 0.97) 40%);
	position: relative;
	margin-block-start: -60px;
	border-radius: 0 0 10px 10px;
}

.leadite-fm-mockup-overlay p {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: #3730a3;
}

/* Canonical field chips list */
.leadite-fm-canonical-chips {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.leadite-fm-canonical-chips li {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--leadite-bg-card);
	border: 1px solid var(--leadite-border);
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 12px;
}

.leadite-fm-chip {
	background: linear-gradient(135deg, #eef2ff, #f5f3ff);
	color: #4338ca;
	padding: 2px 8px;
	border-radius: 5px;
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 600;
}

.leadite-fm-canonical-chips li span {
	color: var(--leadite-text-soft);
}

/* ── Pro sidebar notice ──────────────────────────────────────────────────── */

.leadite-pro-sidebar-notice {
	font-size: 12px;
	color: var(--leadite-text-soft);
	background: linear-gradient(135deg, #faf5ff, #eff6ff);
	border: 1px solid #e0d9fb;
	border-radius: 8px;
	padding: 8px 12px;
	margin-block-end: 12px;
	line-height: 1.5;
}

.leadite-pro-sidebar-notice a {
	color: #6366f1;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.leadite-pro-sidebar-notice a:hover {
	text-decoration: underline;
}

/* ── Tag chips ───────────────────────────────────────────────────────────── */

.leadite-tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--tag-color, #6366f1);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.4;
}

.leadite-row-tags-line,
.leadite-kanban-card-tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-block-start: 6px;
}

.leadite-tag-chip--small {
	font-size: 10px;
	font-weight: 500;
	padding: 2px 8px;
}

.leadite-tag-chip--micro {
	font-size: 9px;
	font-weight: 500;
	padding: 1px 6px;
	line-height: 1.2;
}

.leadite-tag-remove {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	margin-inline-start: 2px;
	transition: color 0.15s;
}

.leadite-tag-remove:hover {
	color: #fff;
}

/* ── Tags card ───────────────────────────────────────────────────────────── */

.leadite-card--tags {
	background: var(--leadite-bg-card);
	margin-block-start: 16px;
}

.leadite-card--tags h2 {
	margin-block-end: 10px;
}

.leadite-tags-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 28px;
	margin-block-end: 10px;
}

.leadite-tags-empty {
	font-size: 12px;
	color: var(--leadite-text-soft);
	font-style: italic;
}

.leadite-tags-add-row {
	margin-block-end: 8px;
}

.leadite-tag-add-select {
	width: 100%;
	border-radius: 6px !important;
	font-size: 13px !important;
}

.leadite-tags-create-row {
	display: flex;
	gap: 6px;
	align-items: center;
	padding-block-start: 6px;
	border-block-start: 1px dashed var(--leadite-border);
}

.leadite-new-tag-name {
	flex: 1;
	min-width: 0;
	font-size: 12px !important;
	border-radius: 6px !important;
}

.leadite-new-tag-color {
	width: 32px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--leadite-border);
	border-radius: 5px;
	cursor: pointer;
	flex-shrink: 0;
}

/* ── Tags management table (Settings → Pro tab) ──────────────────────────── */

.leadite-tags-mgmt-table {
	margin-block-end: 16px !important;
	max-width: 600px;
}

.leadite-tags-mgmt-table thead th {
	background: var(--leadite-bg-warm) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--leadite-text-soft) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.leadite-tags-mgmt-table td {
	vertical-align: middle;
	padding: 8px 10px;
}

/* ── Tags create row (Settings page version) ─────────────────────────────── */

.leadite-tags-create-settings {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-block-start: 4px;
}

.leadite-new-tag-color-settings {
	width: 40px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--leadite-border);
	border-radius: 5px;
	cursor: pointer;
	flex-shrink: 0;
}

/* ── Pro features highlight list ─────────────────────────────────────────── */

.leadite-pro-features-list {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 700px;
}

.leadite-pro-features-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	color: var(--leadite-text-soft);
	line-height: 1.5;
	padding: 10px 14px;
	background: var(--leadite-bg-warm);
	border: 1px solid var(--leadite-border-light);
	border-radius: 8px;
}

.leadite-pro-features-list li strong {
	color: var(--leadite-text);
	font-weight: 600;
}

.leadite-feat-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: rgba(99, 102, 241, 0.1);
	color: var(--leadite-color-indigo, #6366f1);
	margin-block-start: 1px;
}

.leadite-feat-icon {
	display: block;
	width: 14px;
	height: 14px;
}



/* ── Field Mapper — group header ─────────────────────────────────────────── */

.leadite-fm-group {
	margin-block-end: 24px;
}

.leadite-fm-group-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--leadite-bg-warm);
	border: 1px solid var(--leadite-border);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	font-size: 13px;
}

.leadite-fm-group-header strong {
	font-weight: 700;
	color: var(--leadite-text);
}

.leadite-fm-group-id {
	font-size: 11px;
	color: var(--leadite-text-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.leadite-fm-group .leadite-fm-table {
	border-radius: 0 0 10px 10px;
}

/* Overridden row highlight */
.leadite-fm-row--overridden {
	background: #f0fdf4 !important;
}

.leadite-fm-row--overridden code.leadite-fm-key {
	color: #16a34a;
}

/* Auto-detected badge */
.leadite-fm-auto-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 5px;
	background: #f1f5f9;
	color: #64748b;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Live select (Pro) */
.leadite-fm-select--live {
	border: 1px solid var(--leadite-border) !important;
	border-radius: 6px !important;
	padding: 4px 8px !important;
	font-size: 13px !important;
	min-width: 130px;
}

.leadite-fm-select--live:focus {
	border-color: #6366f1 !important;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
}

/* Field key in mapper table */
.leadite-fm-key {
	background: var(--leadite-color-indigo-soft, #eef2ff);
	color: var(--leadite-color-indigo, #4338ca);
	padding: 2px 7px;
	border-radius: 5px;
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Follow-Up Guard — Smart View tabs
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-smart-view-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 24px;
	padding: 0;
	border-bottom: none;
}

.leadite-tab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--leadite-border, #e2e8f0);
	background: var(--leadite-bg-card, #fff);
	color: var(--leadite-text-soft, #64748b);
	font-size: 13px;
	font-weight: 500;
	font-family: var(--leadite-font-sans);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	cursor: pointer;
	white-space: nowrap;
}

.leadite-tab:hover {
	background: #f5f3ff;
	border-color: #a5b4fc;
	color: #4338ca;
	text-decoration: none;
}

.leadite-tab--active {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	border-color: transparent;
	color: #fff !important;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.leadite-tab--active:hover {
	background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
	color: #fff;
}

.leadite-smart-view-desc {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--leadite-text-soft, #64748b);
	background: var(--leadite-bg-warm, #f8fafc);
	border: 1px solid var(--leadite-border-light, #f1f5f9);
	border-radius: 8px;
	padding: 10px 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Follow-Up Guard — Priority badges (list table + detail view)
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-fug-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: middle;
	line-height: 1.4;
}

/* Hot (flame icon) */
.leadite-fug-badge--hot {
	background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
	color: #92400e;
	border: 1px solid #fbbf24;
}

/* Warm (warning) */
.leadite-fug-badge--warm {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
}

/* Cold */
.leadite-fug-badge--cold {
	background: #f1f5f9;
	color: #64748b;
	border: 1px solid #e2e8f0;
}

/* Overdue (danger) */
.leadite-fug-badge--danger {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

/* Needs attention (warning) */
.leadite-fug-badge--warn {
	background: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
}

/* Returning */
.leadite-fug-badge--info {
	background: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Follow-Up Guard — Lead detail block
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-fug-block {
	margin-block-start: 16px;
}

.leadite-fug-block .leadite-card-header {
	border-bottom: 1px solid var(--leadite-border-light, #f1f5f9);
	margin-bottom: 14px;
	padding-bottom: 10px;
}

.leadite-fug-block .leadite-card-header h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--leadite-text, #1e293b);
	display: flex;
	align-items: center;
	gap: 6px;
}

.leadite-fug-block .leadite-card-header h3::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E") center/contain no-repeat;
	flex-shrink: 0;
}

.leadite-fug-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.leadite-fug-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.leadite-fug-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--leadite-text-soft, #64748b);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.leadite-fug-value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.leadite-fug-due {
	font-size: 12px;
	color: var(--leadite-text-soft, #64748b);
	margin-top: 2px;
}

/* Score breakdown <details> */
.leadite-fug-breakdown {
	margin-top: 6px;
	font-size: 12px;
}

.leadite-fug-breakdown summary {
	cursor: pointer;
	color: var(--leadite-color-indigo, #4f46e5);
	font-weight: 500;
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
}

.leadite-fug-breakdown summary::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
	flex-shrink: 0;
	transition: transform 0.15s;
}

.leadite-fug-breakdown[open] summary::before {
	transform: rotate(90deg);
}

.leadite-fug-breakdown ul {
	margin: 8px 0 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.leadite-fug-breakdown ul li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: var(--leadite-bg-warm, #f8fafc);
	border-radius: 6px;
	border: 1px solid var(--leadite-border-light, #f1f5f9);
	font-size: 12px;
	color: var(--leadite-text, #1e293b);
}

.leadite-fug-delta {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
	flex-shrink: 0;
}

.leadite-fug-delta--pos {
	background: #dcfce7;
	color: #166534;
}

.leadite-fug-delta--neg {
	background: #fee2e2;
	color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Follow-Up Guard — Dashboard widget
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-fug-dashboard-card {
	margin-block-start: 20px;
}

.leadite-fug-dashboard-card .leadite-card-header h2 {
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.leadite-fug-widget-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 0;
}

.leadite-fug-widget-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid var(--leadite-border-light, #f1f5f9);
	background: var(--leadite-bg-warm, #f8fafc);
	text-decoration: none;
	color: var(--leadite-text, #1e293b);
	font-size: 13px;
	transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.leadite-fug-widget-row:hover {
	background: #f5f3ff;
	border-color: #c4b5fd;
	transform: translateX(2px);
	text-decoration: none;
	color: #3730a3;
}

.leadite-fug-widget-row strong {
	margin-left: auto;
	font-weight: 600;
}

.leadite-fug-widget-row--danger {
	background: #fff1f2;
	border-color: #fecdd3;
}

.leadite-fug-widget-row--danger:hover {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #991b1b;
}

.leadite-fug-widget-row--warn {
	background: #fffbeb;
	border-color: #fde68a;
}

.leadite-fug-widget-row--warn:hover {
	background: #fef3c7;
	border-color: #fcd34d;
	color: #92400e;
}

.leadite-fug-widget-row--hot {
	background: #fffbeb;
	border-color: #fde68a;
}

.leadite-fug-widget-row--hot:hover {
	background: #fef9c3;
	border-color: #fbbf24;
	color: #78350f;
}

.leadite-fug-widget-row--ok {
	background: var(--leadite-bg-warm, #f8fafc);
	border-color: var(--leadite-border-light, #f1f5f9);
	color: var(--leadite-text-soft, #64748b);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Follow-Up Guard — Pro blur wrapper (Smart Views page — Free tier)
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-pro-blur-wrapper {
	position: relative;
	margin-top: 16px;
	border-radius: 12px;
	overflow: hidden;
}

.leadite-pro-blur-content {
	pointer-events: none;
	user-select: none;
}

.leadite-pro-blur-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(2px);
	border-radius: 12px;
	border: 1px solid #e0e7ff;
}

.leadite-pro-blur-cta {
	text-align: center;
	max-width: 420px;
	padding: 32px 24px;
}

.leadite-pro-blur-icon {
	font-size: 36px;
	display: block;
	margin-bottom: 12px;
}

.leadite-pro-blur-cta h2 {
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 8px;
}

.leadite-pro-blur-cta p {
	font-size: 13px;
	color: var(--leadite-text-soft, #64748b);
	line-height: 1.6;
	margin: 0 0 18px;
}

.leadite-fake-table {
	padding: 16px;
}

.leadite-fake-row {
	background: #f9f9f9;
	height: 40px;
	margin-bottom: 4px;
	border-radius: 4px;
}

/* Smart Views page layout */
.leadite-smart-views-page h1 {
	margin-bottom: 4px;
}

.leadite-smart-views-page .leadite-dashboard-subtitle {
	margin-bottom: 16px;
	color: var(--leadite-text-soft, #64748b);
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SVG icon utilities (replaces all emoji throughout the plugin UI)
   ═══════════════════════════════════════════════════════════════════════════ */

.leadite-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	line-height: 0;
	transition: color 0.15s, opacity 0.15s;
}

/* Coloured semantic variants */
.leadite-icon--hot {
	color: #d97706;
}

.leadite-icon--overdue {
	color: #dc2626;
}

.leadite-icon--warn {
	color: #b45309;
}

.leadite-icon--pending {
	color: #6366f1;
}

.leadite-icon--skipped {
	color: #94a3b8;
}

.leadite-icon--unassigned {
	color: #64748b;
}

.leadite-icon--returning {
	color: #0369a1;
}

.leadite-icon--pro-star {
	color: #f59e0b;
}

/* Star icon inside buttons — inherits button colour */
.leadite-star-btn .leadite-star-icon,
.leadite-star-btn--list .leadite-star-icon {
	display: block;
	transition: transform 0.2s ease, color 0.15s;
}

.leadite-star-btn:hover .leadite-star-icon,
.leadite-star-btn--list:hover .leadite-star-icon {
	transform: scale(1.2);
}

.leadite-star-btn.is-starred .leadite-star-icon,
.leadite-star-btn--list.is-starred .leadite-star-icon {
	color: #f59e0b;
}

/* Pro sidebar notice icon alignment */
.leadite-pro-sidebar-notice .leadite-icon {
	vertical-align: text-bottom;
	margin-inline-end: 3px;
	color: #f59e0b;
}

/* File status icons */
.leadite-file-status .leadite-icon {
	vertical-align: text-bottom;
	margin-inline-end: 3px;
}

/* Icon inside smart-view tabs */
.leadite-tab .leadite-icon {
	flex-shrink: 0;
}