/**
 * Dashboard Tab Styles
 *
 * The dashboard is the command center for trial and paid users,
 * showing status, metrics, and the content calendar.
 */

/* ==========================================================================
   Dashboard Container
   ========================================================================== */

.saiap-dashboard {
	max-width: 1200px;
	padding: 20px 0;
}

.saiap-dashboard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 16px;
}

.saiap-dashboard__header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

/* ==========================================================================
   Status Indicator
   ========================================================================== */

.saiap-dashboard-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 24px;
}

.saiap-dashboard-status--running {
	background: transparent;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-dashboard-status--running .dashicons {
	color: var(--saiap-text-secondary, #555);
}

.saiap-dashboard-status--paused {
	background: rgba(128, 128, 128, 0.1);
	color: #666;
}

.saiap-dashboard-status--paused .dashicons {
	color: #666;
}

.saiap-dashboard-status--ready {
	background: rgba(99, 102, 241, 0.1);
	color: #6366f1;
}

.saiap-dashboard-status--ready .dashicons {
	color: #6366f1;
}

/* ==========================================================================
   Multi-Step Status Display
   ========================================================================== */

.saiap-dashboard-status-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.saiap-dashboard-status-step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 8px;
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	font-size: 14px;
	transition: all 0.2s ease;
}

.saiap-dashboard-status-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #6b7280;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.saiap-dashboard-status-step__number {
	line-height: 1;
}

.saiap-dashboard-status-step__label {
	font-weight: 500;
	color: var(--saiap-text-primary, #1e1e1e);
}

/* Step States - Complete */
.saiap-dashboard-status-step--complete {
	background: #fff;
	border-color: #e5e7eb;
}

.saiap-dashboard-status-step--complete .saiap-dashboard-status-step__icon {
	background: #10b981;
	color: #fff;
}

.saiap-dashboard-status-step--complete .saiap-dashboard-status-step__label {
	color: var(--saiap-text-primary, #1e1e1e);
}

/* Step States - In Progress */
.saiap-dashboard-status-step--in-progress {
	background: #eef2ff;
	border-color: #c7d2fe;
}

.saiap-dashboard-status-step--in-progress .saiap-dashboard-status-step__icon {
	background: #6366f1;
	color: #fff;
}

.saiap-dashboard-status-step--in-progress .saiap-dashboard-status-step__label {
	color: #4f46e5;
}

/* Custom spinner animation */
.saiap-dashboard-status-step__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: saiap-spin 0.8s linear infinite;
}

@keyframes saiap-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Step States - Pending */
.saiap-dashboard-status-step--pending {
	background: #f9fafb;
	border-color: #e5e7eb;
}

.saiap-dashboard-status-step--pending .saiap-dashboard-status-step__icon {
	background: #e5e7eb;
	color: #9ca3af;
}

.saiap-dashboard-status-step--pending .saiap-dashboard-status-step__label {
	color: #9ca3af;
}

/* Responsive: Stack vertically on mobile */
@media (max-width: 768px) {
	.saiap-dashboard-status-steps {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.saiap-dashboard-status-step {
		width: 100%;
	}
}

/* ==========================================================================
   Dashboard Top Row (Metrics + Autopilot Settings)
   ========================================================================== */

.saiap-dashboard-top-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin-bottom: 32px;
	align-items: stretch;
	overflow-x: visible;
	width: 100%;
	box-sizing: border-box;
}

.saiap-metric-card {
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
	max-width: 130px;
	box-sizing: border-box;
}

.saiap-metric-card__value {
	font-size: 36px;
	font-weight: 700;
	color: var(--saiap-text-primary, #1e1e1e);
	line-height: 1.2;
}

.saiap-metric-card__label {
	font-size: 14px;
	color: var(--saiap-text-secondary, #555);
	margin-top: 4px;
}

.saiap-metric-card__sublabel {
	font-size: 12px;
	color: var(--saiap-text-muted, #888);
	margin-top: 4px;
}

/* Toggleable Panel (GSC Chart / Autopilot Settings) */
.saiap-panel-toggle {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid var(--saiap-border, #e5e7eb);
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

.saiap-panel-toggle__icons {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 2px;
	z-index: 1;
}

.saiap-panel-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	border-radius: 6px;
	cursor: pointer;
	color: var(--saiap-text-muted, #9ca3af);
	transition: color 0.15s, background 0.15s;
	padding: 0;
}

.saiap-panel-toggle__icon:hover {
	color: var(--saiap-text-primary, #1e1e1e);
	background: rgba(0, 0, 0, 0.05);
}

.saiap-panel-toggle__icon--active {
	color: var(--saiap-primary, #6366f1);
}

.saiap-panel-toggle__icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 18px;
}

.saiap-panel-toggle__content {
	display: none;
	flex: 1;
	min-height: 0;
	position: relative;
}

.saiap-panel-toggle__content--active {
	display: block;
}

.saiap-panel-toggle__content[data-panel="settings"].saiap-panel-toggle__content--active {
	display: flex;
	align-items: center;
}

/* GSC Chart Area — positioned to fill panel content */
#saiap-gsc-chart-area {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#saiap-gsc-chart-canvas {
	width: 100%;
	display: block;
}

/* GSC chart tagline — pinned to bottom edge of panel card */
.saiap-gsc-chart-tagline {
	position: absolute;
	bottom: -19px;
	left: -20px;
	right: -20px;
	font-size: 11px;
	color: var(--saiap-text-muted, #9ca3af);
	margin: 0;
	padding: 4px 0;
	text-align: center;
	background: transparent;
	pointer-events: none;
}

/* GSC CTA container — vertically centered in chart area */
#saiap-gsc-chart-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* GSC CTA (connect prompt / empty state) */
.saiap-gsc-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: var(--saiap-text-muted, #6b7280);
	font-size: 13px;
}

.saiap-gsc-cta__icon {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: var(--saiap-primary, #6366f1);
	opacity: 0.6;
	flex-shrink: 0;
}

.saiap-gsc-cta__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.saiap-gsc-cta__text strong {
	color: var(--saiap-text-primary, #1e1e1e);
	font-size: 14px;
}

/* Inline Autopilot Settings */
.saiap-autopilot-inline {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
	flex: 1 1 auto;
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #e5e7eb);
	border-radius: 12px;
	padding: 16px 20px;
	min-width: 0;
	max-width: none;
	overflow: visible;
	box-sizing: border-box;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	position: relative;
}

/* When inside toggle panel, remove redundant styling */
.saiap-panel-toggle .saiap-autopilot-inline {
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
}

.saiap-autopilot-inline--disabled {
	opacity: 0.6;
	pointer-events: none;
}

.saiap-autopilot-inline__control {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	white-space: nowrap;
	position: relative;
	justify-content: flex-start;
}

.saiap-autopilot-inline__control:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: var(--saiap-border, #e5e7eb);
}

.saiap-autopilot-inline__control:first-child {
	flex: 0 0 auto;
	min-width: auto;
}

.saiap-toggle-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--saiap-text-primary, #1e1e1e);
	cursor: pointer;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	vertical-align: middle;
}

.saiap-toggle-label input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	cursor: pointer;
	flex-shrink: 0;
	margin: 0 !important;
	vertical-align: middle;
	position: relative;
	display: inline-block;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
	border: 2px solid #d1d5db !important;
	border-radius: 4px;
	transition: all 0.2s ease;
	box-sizing: border-box;
	padding: 0 !important;
	overflow: hidden;
	/* Remove any default browser styling */
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline: none;
	/* Ensure no default checkmark shows */
	accent-color: transparent !important;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.saiap-toggle-label input[type="checkbox"]:checked {
	background-color: var(--saiap-primary, #6366f1) !important;
	border-color: var(--saiap-primary, #6366f1) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 7l2.5 2.5 5.5-5.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50% !important;
	background-size: 11px 11px !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	/* Hide any default checkmark */
	accent-color: transparent !important;
}

/* Hide any pseudo-elements that might show default checkmark */
.saiap-toggle-label input[type="checkbox"]::before,
.saiap-toggle-label input[type="checkbox"]::after {
	display: none !important;
	content: none !important;
}

.saiap-toggle-label input[type="checkbox"]:hover {
	border-color: var(--saiap-primary, #6366f1);
}

.saiap-toggle-label input[type="checkbox"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.saiap-toggle-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-autopilot-inline__hint {
	font-size: 13px;
	color: var(--saiap-text-muted, #6b7280);
	margin: 0;
	white-space: nowrap;
	font-weight: 400;
	line-height: 1.4;
}

.saiap-select-label {
	font-size: 13px;
	color: var(--saiap-text-secondary, #4b5563);
	margin: 0;
	white-space: nowrap;
	font-weight: 500;
	line-height: 1.4;
}

.saiap-autopilot-inline select {
	min-width: 60px;
	width: auto;
	padding: 7px 24px 7px 10px;
	font-size: 13px;
	border-radius: 8px;
	border: 1px solid var(--saiap-border, #d1d5db);
	background: var(--saiap-card-bg, #fff);
	color: var(--saiap-text-primary, #1e1e1e);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	font-weight: 500;
	text-align: center;
	text-align-last: center;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 12px;
	line-height: 1.4;
	vertical-align: middle;
	display: inline-block;
	height: 32px;
	box-sizing: border-box;
}

.saiap-autopilot-inline select option {
	text-align: center;
	padding: 4px;
}

.saiap-autopilot-inline select:hover:not(:disabled) {
	border-color: var(--saiap-primary, #6366f1);
}

.saiap-autopilot-inline select:focus {
	outline: none;
	border-color: var(--saiap-primary, #6366f1);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.saiap-autopilot-inline .saiap-save-autopilot-settings {
	align-self: center;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	/* Let WordPress handle button styling */
}

/* Legacy Metrics Grid (kept for backward compatibility) */
.saiap-dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

/* ==========================================================================
   Upcoming Posts
   ========================================================================== */

.saiap-upcoming-posts {
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
}

.saiap-upcoming-posts h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-upcoming-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.saiap-upcoming-posts__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--saiap-border, #eee);
}

.saiap-upcoming-posts__item:last-child {
	border-bottom: none;
}

.saiap-upcoming-posts__title {
	flex: 1;
	font-weight: 500;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-upcoming-posts__date {
	font-size: 13px;
	color: var(--saiap-text-secondary, #555);
}

.saiap-upcoming-posts__edit {
	font-size: 13px;
	text-decoration: none;
}

.saiap-upcoming-posts--empty {
	text-align: center;
	color: var(--saiap-text-secondary, #555);
}

.saiap-upcoming-posts--empty p {
	margin: 0;
}

/* ==========================================================================
   Trial CTA Overlay (Locked State)
   ========================================================================== */

.saiap-dashboard--locked {
	position: relative;
}

.saiap-dashboard-cta-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}

.saiap-dashboard-cta-card {
	text-align: center;
	max-width: 500px;
	padding: 40px;
	background: var(--saiap-card-bg, #fff);
	border: 2px solid var(--saiap-primary, #6366f1);
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
}

.saiap-dashboard-cta-card h2 {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 700;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-dashboard-cta-card p {
	margin: 0 0 24px;
	font-size: 16px;
	color: var(--saiap-text-secondary, #555);
	line-height: 1.5;
}

.saiap-dashboard-cta-card .button-hero {
	font-size: 16px;
	padding: 12px 32px;
	height: auto;
	line-height: 1.5;
}

.saiap-dashboard-cta-secondary {
	margin-top: 16px;
	font-size: 13px;
	color: var(--saiap-text-muted, #888);
}

.saiap-dashboard-cta-expired {
	color: var(--saiap-warning, #b45309);
	font-weight: 500;
	margin-bottom: 16px;
}

/* ==========================================================================
   Expired Trial Notice
   ========================================================================== */

.saiap-dashboard-expired-notice {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #fbbf24;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	margin-bottom: 32px;
}

.saiap-dashboard-expired-notice h3 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: #92400e;
}

.saiap-dashboard-expired-notice p {
	margin: 0 0 16px;
	color: #78350f;
}

.saiap-dashboard-expired-notice .button-hero {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border: none;
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saiap-dashboard-expired-notice .button-hero:hover {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
	color: #fff;
}

.saiap-expired-secondary {
	margin-top: 12px;
	font-size: 13px;
	color: #92400e;
}

/* Frozen World variant - more prominent CTA */
.saiap-dashboard-expired-notice--frozen-world {
	background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
	border-color: #a78bfa;
}

.saiap-dashboard-expired-notice--frozen-world h3 {
	color: #5b21b6;
}

.saiap-dashboard-expired-notice--frozen-world p {
	color: #6d28d9;
}

.saiap-dashboard-expired-notice--frozen-world .saiap-expired-secondary {
	color: #7c3aed;
}

.saiap-expired-notice__message {
	font-size: 15px;
	line-height: 1.5;
}

/* ==========================================================================
   Subscribe CTA (During Trial)
   ========================================================================== */

.saiap-dashboard-subscribe-cta {
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 12px;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
}

.saiap-dashboard-subscribe-cta p {
	margin: 0;
	color: var(--saiap-text-secondary, #555);
}

/* ==========================================================================
   SEO Calendar
   ========================================================================== */

.saiap-seo-calendar {
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
	position: relative;
}

.saiap-seo-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.saiap-seo-calendar__header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-seo-calendar__actions {
	display: flex;
	gap: 8px;
}

.saiap-seo-calendar__actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 32px;
	height: 32px;
}

.saiap-seo-calendar__actions .saiap-pipeline-rerun {
	width: auto;
	padding: 0 12px;
	gap: 4px;
}

.saiap-seo-calendar__actions .saiap-pipeline-rerun .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.saiap-seo-calendar__actions .saiap-pipeline-rerun .spinner {
	margin: 0;
}

.saiap-seo-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 16px;
}

.saiap-calendar-nav-btn {
	background: none;
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	color: #000;
}

.saiap-calendar-nav-btn:hover {
	background: var(--saiap-bg-hover, #f5f5f5);
}

.saiap-calendar-nav-btn .dashicons {
	color: #000;
}

.saiap-calendar-month-label {
	font-size: 16px;
	font-weight: 600;
	min-width: 150px;
	text-align: center;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-seo-calendar__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--saiap-border, #eee);
}

.saiap-seo-calendar__weekdays span {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--saiap-text-secondary, #555);
	text-transform: uppercase;
}

.saiap-seo-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	min-height: 400px;
}

.saiap-seo-calendar__loading {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px;
	color: var(--saiap-text-muted, #888);
}

.saiap-seo-calendar__loading .spinner {
	margin-bottom: 12px;
}

/* Calendar Day Cell */
.saiap-calendar-day {
	min-height: 110px;
	padding: 8px;
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #eee);
	border-radius: 8px;
	position: relative;
	transition: box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.saiap-calendar-day:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.saiap-calendar-day--other-month {
	background: var(--saiap-bg-alt, #f9f9f9);
	opacity: 0.6;
}

.saiap-calendar-day--today {
	border-color: var(--saiap-primary, #6366f1);
	border-width: 2px;
}

.saiap-calendar-day--has-item {
	cursor: default;
}

/* Items container for stacking multiple cards */
.saiap-calendar-day__items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

/* Calendar Item Card - clickable cards within day cells */
.saiap-calendar-item-card {
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
}

.saiap-calendar-item-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Status colors for calendar item cards.
   Calendar item statuses: planned, pending_review, queued, generating, processing, completed, published, failed, skipped
   NOTE: These are NOT the same as WordPress post statuses (draft, publish, pending, future). */
.saiap-calendar-item-card--scheduled {
	background: linear-gradient(135deg, rgba(156, 163, 175, 0.15) 0%, rgba(156, 163, 175, 0.08) 100%);
	border: 1px solid rgba(156, 163, 175, 0.3);
}

.saiap-calendar-item-card--pending-review {
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
	border: 2px solid #fbbf24;
	border-radius: 8px;
}

.saiap-calendar-item-card--pending-review:hover {
	box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.saiap-calendar-item-card--published {
	background: #fff;
	border: 2px solid #22c55e;
	border-radius: 8px;
}

.saiap-calendar-item-card--published:hover {
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Status badge inside card */
.saiap-calendar-item-card__status-badge {
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

.saiap-calendar-item-card__status-badge--published {
	color: #22c55e;
}

.saiap-calendar-item-card__status-badge--pending-review {
	color: #d97706;
}

.saiap-calendar-item-card__status-badge--orphan {
	color: #6b7280;
	font-style: italic;
}

/* Orphan card styling - subtle indicator for posts created outside calendar workflow */
.saiap-calendar-item-card--orphan {
	border-style: dashed;
	opacity: 0.85;
}

/* View Post button for published cards */
.saiap-calendar-item-card__view-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	color: #4338ca;
	background: #eef2ff;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	margin-top: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
}

.saiap-calendar-item-card__view-link:hover {
	background: #e0e7ff;
	color: #4338ca;
	text-decoration: none;
}

/* Edit link variant for pending_review items */
.saiap-calendar-item-card__view-link--edit {
	background: #fef3c7;
	color: #92400e;
}

.saiap-calendar-item-card__view-link--edit:hover {
	background: #fde68a;
	color: #92400e;
}

.saiap-calendar-item-card__keyword {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	font-size: 11px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	margin: 4px 0 6px;
}

.saiap-calendar-item-card__volume,
.saiap-calendar-item-card__difficulty {
	display: block;
	font-size: 9px;
	color: var(--saiap-text-muted, #888);
	line-height: 1.4;
}

.saiap-calendar-day__number {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--saiap-text-secondary, #555);
	margin-bottom: 4px;
}

.saiap-calendar-day--today .saiap-calendar-day__number {
	color: var(--saiap-primary, #6366f1);
}

.saiap-calendar-day__content {
	font-size: 11px;
}

.saiap-calendar-day__title {
	display: block;
	font-weight: 500;
	color: var(--saiap-text-primary, #1e1e1e);
	line-height: 1.3;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.saiap-calendar-day__badge {
	display: inline-block;
	margin-left: 4px;
	font-size: 10px;
}

.saiap-calendar-day__status {
	display: inline-block;
	font-size: 9px;
	padding: 2px 6px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: 600;
}

.saiap-calendar-day__status--queued {
	background: rgba(99, 102, 241, 0.15);
	color: #6366f1;
}

.saiap-calendar-day__status--generating {
	background: rgba(234, 179, 8, 0.15);
	color: #b45309;
}

.saiap-calendar-day__status--published {
	background: rgba(34, 197, 94, 0.15);
	color: #166534;
}

.saiap-calendar-day__status--pending_review {
	background: rgba(168, 85, 247, 0.15);
	color: #7c3aed;
}

/* ==========================================================================
   Frozen World: Status-based item states for expired trials
   - Published items: Full visibility, checkmark indicator
   - Locked items: Blurred, grayscale, lock icon overlay
   ========================================================================== */

/* Published state - day cell containing published items (subtle) */
.saiap-calendar-day--published {
	/* Keep day cell styling neutral - the card itself shows published state */
}

/* Locked state - items user didn't publish (FOMO) */
.saiap-calendar-day--locked {
	opacity: 0.85;
	cursor: pointer;
	filter: blur(1px) grayscale(60%);
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.saiap-calendar-day--locked:hover {
	filter: blur(0.5px) grayscale(40%);
	opacity: 0.95;
}

.saiap-calendar-day--locked .saiap-calendar-day__content {
	filter: blur(2px);
}

.saiap-calendar-day--locked .saiap-calendar-day__title {
	color: var(--saiap-text-muted, #888);
}

.saiap-calendar-day__lock {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.saiap-calendar-day--locked:hover .saiap-calendar-day__lock {
	background: rgba(99, 102, 241, 0.9);
	transform: translate(-50%, -50%) scale(1.1);
}

.saiap-calendar-day__lock .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Tooltip for locked items */
.saiap-calendar-day--locked::before {
	content: 'Subscribe to continue';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #1e1e1e;
	color: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 100;
	pointer-events: none;
}

.saiap-calendar-day--locked:hover::before {
	opacity: 1;
	visibility: visible;
}

/* Calendar overlay for expired trial */
.saiap-seo-calendar--locked {
	position: relative;
}

.saiap-seo-calendar__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	z-index: 10;
}

.saiap-seo-calendar__overlay-content {
	text-align: center;
	max-width: 300px;
	padding: 24px;
}

.saiap-seo-calendar__overlay-content .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--saiap-text-muted, #888);
	margin-bottom: 16px;
}

.saiap-seo-calendar__overlay-content h4 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-seo-calendar__overlay-content p {
	margin: 0 0 16px;
	color: var(--saiap-text-secondary, #555);
}

/* Mock calendar preview (pre-trial) */
.saiap-calendar-item-card--mock {
	pointer-events: none;
	cursor: default;
}

.saiap-calendar-item-card--mock:hover {
	transform: none;
	box-shadow: none;
}

.saiap-seo-calendar--preview {
	position: relative;
}

.saiap-seo-calendar__preview-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #f0f0ff 0%, #faf5ff 100%);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 0 0 12px 12px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--saiap-text-secondary, #555);
}

.saiap-seo-calendar__preview-cta .dashicons {
	color: var(--saiap-primary, #6366f1);
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.saiap-seo-calendar__preview-cta .button-primary {
	margin-left: auto;
	white-space: nowrap;
}

/* ==========================================================================
   Autopilot Controls
   ========================================================================== */

.saiap-autopilot-controls {
	background: var(--saiap-card-bg, #fff);
	border: 1px solid var(--saiap-border, #ddd);
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
}

.saiap-autopilot-controls--disabled {
	opacity: 0.6;
	pointer-events: none;
}

.saiap-autopilot-controls__header h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-autopilot-toggle {
	margin-bottom: 16px;
}

.saiap-autopilot-toggle label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

.saiap-autopilot-toggle .description {
	margin-top: 4px;
	margin-left: 24px;
}

.saiap-autopilot-setting {
	margin-bottom: 12px;
}

.saiap-autopilot-setting label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.saiap-autopilot-setting select {
	width: auto;
	min-width: 80px;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.saiap-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.saiap-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}

.saiap-modal__content {
	position: relative;
	background: var(--saiap-card-bg, #fff);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-width: 600px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
}

.saiap-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--saiap-text-secondary, #555);
	z-index: 1;
}

.saiap-modal__close:hover {
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-modal__body {
	padding: 48px 24px 24px 24px; /* extra top padding for close button clearance */
}

/* Calendar Item Detail (in modal) */
.saiap-calendar-item-detail__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
	padding-right: 32px;
}

.saiap-calendar-item-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.saiap-calendar-item-detail__date,
.saiap-calendar-item-detail__type,
.saiap-calendar-item-detail__status {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--saiap-bg-alt, #f5f5f5);
	color: var(--saiap-text-secondary, #555);
}

/* Draft Review Banner - prominent yellow banner for posts ready to review */
.saiap-draft-review-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 2px solid #f59e0b;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.saiap-draft-review-banner__icon {
	font-size: 28px;
	flex-shrink: 0;
}

.saiap-draft-review-banner__content {
	flex: 1;
}

.saiap-draft-review-banner__content strong {
	display: block;
	font-size: 16px;
	color: #92400e;
	margin-bottom: 4px;
}

.saiap-draft-review-banner__content p {
	margin: 0;
	font-size: 14px;
	color: #b45309;
}

.saiap-draft-review-banner__cta {
	flex-shrink: 0;
	background: #f59e0b !important;
	border-color: #d97706 !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.saiap-draft-review-banner__cta:hover {
	background: #d97706 !important;
	border-color: #b45309 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Generate Progress Banner - shown while generating */
.saiap-generate-progress-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
	border: 2px solid #6366f1;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.saiap-generate-progress-banner__icon {
	flex-shrink: 0;
}

.saiap-generate-progress-banner__icon .spinner {
	float: none;
	margin: 0;
}

.saiap-generate-progress-banner__content {
	flex: 1;
}

.saiap-generate-progress-banner__content strong {
	display: block;
	font-size: 16px;
	color: #4338ca;
	margin-bottom: 4px;
}

.saiap-generate-progress-banner__content p {
	margin: 0;
	font-size: 14px;
	color: #6366f1;
}

/* Generate Success Banner - shown after successful generation */
.saiap-generate-success-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border: 2px solid #10b981;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.saiap-generate-success-banner__icon {
	font-size: 28px;
	flex-shrink: 0;
	color: #10b981;
}

.saiap-generate-success-banner__content {
	flex: 1;
}

.saiap-generate-success-banner__content strong {
	display: block;
	font-size: 16px;
	color: #065f46;
	margin-bottom: 4px;
}

.saiap-generate-success-banner__content p {
	margin: 0;
	font-size: 14px;
	color: #047857;
}

.saiap-generate-success-banner__cta {
	flex-shrink: 0;
	background: #10b981 !important;
	border-color: #059669 !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.saiap-generate-success-banner__cta:hover {
	background: #059669 !important;
	border-color: #047857 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Modal Error Banner */
.saiap-modal-error-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
	border: 2px solid #ef4444;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.saiap-modal-error-banner__icon {
	font-size: 28px;
	flex-shrink: 0;
	color: #ef4444;
}

.saiap-modal-error-banner__content {
	flex: 1;
}

.saiap-modal-error-banner__content strong {
	display: block;
	font-size: 16px;
	color: #b91c1c;
	margin-bottom: 4px;
}

.saiap-modal-error-banner__content p {
	margin: 0;
	font-size: 14px;
	color: #dc2626;
}

.saiap-calendar-item-detail__type--pillar {
	background: rgba(234, 179, 8, 0.15);
	color: #b45309;
}

/* Funnel Stage badges */
.saiap-calendar-item-detail__funnel-stage {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--saiap-bg-alt, #f5f5f5);
	color: var(--saiap-text-secondary, #555);
}

.saiap-calendar-item-detail__funnel-stage--informational {
	background: rgba(59, 130, 246, 0.15);
	color: #1d4ed8;
}

.saiap-calendar-item-detail__funnel-stage--consideration {
	background: rgba(245, 158, 11, 0.15);
	color: #b45309;
}

.saiap-calendar-item-detail__funnel-stage--decision {
	background: rgba(34, 197, 94, 0.15);
	color: #15803d;
}

.saiap-calendar-item-detail__keyword {
	padding: 12px;
	background: var(--saiap-bg-alt, #f5f5f5);
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
}

.saiap-kw-volume {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(99, 102, 241, 0.15);
	color: #4f46e5;
}

.saiap-kw-metrics {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.saiap-kw-difficulty {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
}

.saiap-kw-difficulty--easy {
	background: rgba(34, 197, 94, 0.15);
	color: #166534;
}

.saiap-kw-difficulty--medium {
	background: rgba(234, 179, 8, 0.15);
	color: #b45309;
}

.saiap-kw-difficulty--hard {
	background: rgba(239, 68, 68, 0.15);
	color: #b91c1c;
}

.saiap-calendar-item-detail__post-type {
	margin-bottom: 16px;
	font-size: 14px;
}

.saiap-post-type-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	background: rgba(139, 92, 246, 0.15);
	color: #7c3aed;
	margin-left: 4px;
}

.saiap-calendar-item-detail__section {
	margin-bottom: 16px;
}

.saiap-calendar-item-detail__section h4 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--saiap-text-secondary, #555);
}

.saiap-calendar-item-detail__section p {
	margin: 0;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-calendar-item-detail__section pre {
	background: var(--saiap-bg-alt, #f5f5f5);
	padding: 12px;
	border-radius: 8px;
	font-size: 13px;
	overflow-x: auto;
	white-space: pre-wrap;
	margin: 0;
}

.saiap-calendar-item-detail__actions {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--saiap-border, #eee);
	flex-wrap: wrap;
}

.saiap-date-edit-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.saiap-date-edit-inline input[type="date"] {
	padding: 4px 8px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 13px;
}

/* ==========================================================================
   Start Trial Button
   ========================================================================== */

.saiap-start-trial-btn {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	border: none;
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.saiap-start-trial-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
	color: #fff;
}

.saiap-start-trial-btn:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
	outline: none;
	color: #fff;
}

.saiap-start-trial-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   Setup Loader (Automated Trial Setup Progress)
   ========================================================================== */

.saiap-setup-loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	z-index: 15;
}

.saiap-setup-loader__content {
	text-align: center;
	max-width: 400px;
	padding: 40px;
}

.saiap-setup-loader__spinner {
	margin-bottom: 24px;
}

.saiap-spinner-svg {
	width: 64px;
	height: 64px;
	animation: saiap-spin 1.5s linear infinite;
}

.saiap-spinner-path {
	stroke: var(--saiap-primary, #6366f1);
	stroke-linecap: round;
	animation: saiap-spinner-dash 1.5s ease-in-out infinite;
}

@keyframes saiap-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes saiap-spinner-dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

.saiap-setup-loader__text {
	margin-bottom: 16px;
}

.saiap-setup-loader__status {
	font-size: 18px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
	display: block;
	min-height: 28px;
	transition: opacity 0.3s ease;
}

.saiap-setup-loader__status.saiap-status-fade {
	opacity: 0;
}

.saiap-setup-loader__hint {
	font-size: 14px;
	color: var(--saiap-text-secondary, #555);
	margin: 0;
}

/* Timeout state */
.saiap-setup-loader__timeout {
	text-align: center;
	max-width: 350px;
	padding: 24px;
}

.saiap-setup-loader__timeout .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--saiap-warning, #f59e0b);
	margin-bottom: 16px;
}

.saiap-setup-loader__timeout h4 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
}

.saiap-setup-loader__timeout p {
	margin: 0 0 12px;
	color: var(--saiap-text-secondary, #555);
	font-size: 14px;
}

.saiap-setup-loader__support-link {
	color: var(--saiap-primary, #6366f1);
	text-decoration: none;
	font-weight: 500;
}

.saiap-setup-loader__support-link:hover {
	text-decoration: underline;
}

/* Hide loader when calendar has items */
.saiap-seo-calendar.saiap-seo-calendar--has-items .saiap-setup-loader {
	display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.saiap-dashboard-top-row {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.saiap-dashboard-top-row .saiap-metric-card {
		flex: 0 0 auto;
		min-width: 110px;
		max-width: 130px;
	}

	.saiap-autopilot-inline {
		min-width: 280px;
		flex: 1 1 auto;
	}
}

@media (max-width: 782px) {
	.saiap-dashboard__header {
		flex-direction: column;
		align-items: flex-start;
	}

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

	.saiap-dashboard-top-row {
		flex-direction: column;
		flex-wrap: wrap;
	}

	.saiap-dashboard-top-row .saiap-metric-card {
		max-width: 100%;
		width: 100%;
	}

	.saiap-autopilot-inline {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		min-width: 100%;
		padding: 16px;
	}

	.saiap-autopilot-inline__control::after {
		display: none;
	}

	.saiap-autopilot-inline__control {
		width: 100%;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--saiap-border, #e5e7eb);
	}

	.saiap-autopilot-inline__control:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.saiap-autopilot-inline .saiap-save-autopilot-settings {
		margin-left: 0;
		margin-top: 4px;
		width: 100%;
		justify-content: center;
	}

	.saiap-dashboard-subscribe-cta {
		flex-direction: column;
		text-align: center;
	}

	.saiap-upcoming-posts__item {
		flex-wrap: wrap;
	}

	.saiap-upcoming-posts__title {
		width: 100%;
	}
}

/* ==========================================================================
   First Post Generating Indicator
   ========================================================================== */

.saiap-first-post-generating {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #f59e0b;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.saiap-first-post-generating__content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.saiap-first-post-generating__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #f59e0b;
	border-top-color: transparent;
	border-radius: 50%;
	animation: saiap-spin 0.8s linear infinite;
}

.saiap-first-post-generating__text {
	font-size: 14px;
	font-weight: 500;
	color: #92400e;
}

@keyframes saiap-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Ready state (success) */
.saiap-first-post-generating--ready {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border-color: #10b981;
}

.saiap-first-post-generating--ready .saiap-first-post-generating__text {
	color: #065f46;
}

.saiap-first-post-generating__checkmark {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	color: #10b981;
}

.saiap-first-post-generating__button {
	margin-left: auto;
}

/* ==========================================================================
   Regenerating Calendar Banner
   ========================================================================== */

.saiap-regenerating-banner {
	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	border: 1px solid #3b82f6;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.saiap-regenerating-banner__content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.saiap-regenerating-banner__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #3b82f6;
	border-top-color: transparent;
	border-radius: 50%;
	animation: saiap-spin 0.8s linear infinite;
	flex-shrink: 0;
}

.saiap-regenerating-banner__text {
	font-size: 14px;
	font-weight: 500;
	color: #1e40af;
	transition: opacity 0.3s ease;
}

.saiap-regenerating-banner__text.saiap-status-fade {
	opacity: 0;
}

/* Success state */
.saiap-regenerating-banner--success {
	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
	border-color: #10b981;
}

.saiap-regenerating-banner--success .saiap-regenerating-banner__text {
	color: #065f46;
}

.saiap-regenerating-banner__checkmark {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: bold;
	color: #10b981;
	flex-shrink: 0;
}

/* Disabled button state */
.saiap-btn-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* =========================================================================
   Review Prompt — Persistent Nudge + Sentiment Gate Modal
   ========================================================================= */

.saiap-review-nudge {
	text-align: center;
	color: var(--saiap-text-secondary, #888);
	font-size: 13px;
	margin: 0 0 12px 0;
	padding: 0;
}

.saiap-review-nudge a {
	color: var(--saiap-text-secondary, #888);
	text-decoration: underline;
}

.saiap-review-nudge a:hover {
	color: var(--saiap-text-primary, #1e1e1e);
}

/* Modal content sizing */
.saiap-review-modal__content {
	max-width: 440px;
	text-align: center;
}

.saiap-review-modal__content h2 {
	margin: 0 0 8px 0;
	font-size: 20px;
}

.saiap-review-modal__content p {
	margin: 0 0 20px 0;
	color: var(--saiap-text-secondary, #555);
	font-size: 14px;
	line-height: 1.5;
}

.saiap-review-modal__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.saiap-review-modal__actions .button-primary {
	min-width: 180px;
}

.saiap-review-modal__actions .button {
	min-width: 140px;
}

.saiap-review-dismiss-permanent,
.saiap-review-dismiss-temp {
	display: inline-block;
	color: var(--saiap-text-secondary, #888);
	font-size: 12px;
	text-decoration: none;
	cursor: pointer;
}

.saiap-review-dismiss-permanent:hover,
.saiap-review-dismiss-temp:hover {
	color: var(--saiap-text-primary, #1e1e1e);
	text-decoration: underline;
}

#saiap-review-feedback-text {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px;
	font-size: 14px;
	resize: vertical;
	margin-bottom: 12px;
}

#saiap-review-feedback-text:focus {
	border-color: #6366f1;
	outline: none;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* ==========================================================================
   GSC Onboarding Interstitial
   ========================================================================== */

.saiap-gsc-interstitial {
	background: #fff;
	border: 1px solid var(--saiap-border, #e5e7eb);
	border-radius: 12px;
	padding: 48px 32px;
	text-align: center;
	margin-bottom: 24px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.saiap-gsc-interstitial__icon {
	margin-bottom: 16px;
}

.saiap-gsc-interstitial__icon .dashicons {
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: var(--saiap-primary, #4f46e5);
	background: #eef2ff;
	border-radius: 12px;
	padding: 12px;
	box-sizing: content-box;
}

.saiap-gsc-interstitial__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--saiap-text-primary, #1e1e1e);
	margin: 0 0 8px;
}

.saiap-gsc-interstitial__description {
	font-size: 14px;
	color: var(--saiap-text-secondary, #6b7280);
	max-width: 500px;
	margin: 0 auto 24px;
	line-height: 1.6;
}

.saiap-gsc-interstitial__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.saiap-gsc-interstitial__connect.button-hero,
.saiap-gsc-interstitial__skip.button-hero {
	font-size: 14px !important;
	padding: 8px 24px !important;
	height: auto !important;
	line-height: 1.6 !important;
}

.saiap-gsc-interstitial__connect {
	text-decoration: none !important;
}

.saiap-gsc-interstitial__footnote {
	font-size: 12px;
	color: var(--saiap-text-muted, #9ca3af);
	margin: 16px 0 0;
}

.saiap-gsc-interstitial__countdown {
	display: none;
	font-size: 13px;
	color: var(--saiap-text-muted, #9ca3af);
	margin: 12px 0 0;
}