/**
 * AI Search Optimizer - Admin Styles
 *
 * @package SearchOptimizerAI
 * @since   1.0.0
 */

/* General Wrapper */
.aiseo-wrap {
	max-width: 1200px;
}

/* Form Styles */
.aiseo-audit-form {
	background: #fff;
	padding: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 20px;
}

.aiseo-form-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.aiseo-post-select {
	min-width: 300px;
	max-width: 500px;
}

/* Loading State */
.aiseo-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px;
	background: #f0f6fc;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 20px;
}

.aiseo-loading .spinner {
	float: none;
	margin: 0;
}

/* Results Container */
.aiseo-results-container {
	background: #fff;
	padding: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.aiseo-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #c3c4c7;
	padding-bottom: 15px;
	margin-bottom: 20px;
}

.aiseo-results-header h2 {
	margin: 0;
	font-size: 1.3em;
}

.aiseo-timestamp {
	color: #646970;
	font-size: 0.9em;
}

/* Site-Wide Section */
.aiseo-site-wide-section {
	margin-bottom: 25px;
}

.aiseo-site-wide-section h3 {
	margin-bottom: 15px;
	font-size: 1.1em;
}

.aiseo-site-wide-cards {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.aiseo-site-card {
	flex: 1;
	min-width: 200px;
	max-width: 300px;
	padding: 15px;
	border-radius: 4px;
	border: 1px solid #c3c4c7;
}

.aiseo-site-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.aiseo-site-card p {
	margin: 0;
	font-size: 0.9em;
	color: #646970;
}

.aiseo-site-card.aiseo-status-good {
	background: #edfaef;
	border-color: #46b450;
}

.aiseo-site-card.aiseo-status-good .dashicons {
	color: #46b450;
}

.aiseo-site-card.aiseo-status-blocked,
.aiseo-site-card.aiseo-status-invalid {
	background: #fcf0f1;
	border-color: #d63638;
}

.aiseo-site-card.aiseo-status-blocked .dashicons,
.aiseo-site-card.aiseo-status-invalid .dashicons {
	color: #d63638;
}

.aiseo-site-card.aiseo-status-missing {
	background: #fff8e5;
	border-color: #dba617;
}

.aiseo-site-card.aiseo-status-missing .dashicons {
	color: #dba617;
}

/* Overall Score */
.aiseo-overall-score {
	background: #f6f7f7;
	padding: 25px;
	border-radius: 4px;
	margin-bottom: 25px;
}

.aiseo-score-display {
	display: flex;
	align-items: center;
	gap: 30px;
}

.aiseo-score-circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 6px solid;
}

.aiseo-score-circle.aiseo-grade-a {
	background: #edfaef;
	border-color: #46b450;
	color: #1e4620;
}

.aiseo-score-circle.aiseo-grade-b {
	background: #edfaef;
	border-color: #7ad03a;
	color: #1e4620;
}

.aiseo-score-circle.aiseo-grade-c {
	background: #fff8e5;
	border-color: #ffb900;
	color: #826200;
}

.aiseo-score-circle.aiseo-grade-d {
	background: #fff8e5;
	border-color: #dba617;
	color: #826200;
}

.aiseo-score-circle.aiseo-grade-f {
	background: #fcf0f1;
	border-color: #d63638;
	color: #8a1e1e;
}

.aiseo-score-value {
	font-size: 2em;
	font-weight: 600;
	line-height: 1;
}

.aiseo-score-label {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 5px;
}

.aiseo-score-details {
	flex: 1;
}

.aiseo-grade {
	font-size: 1.2em;
	margin-bottom: 5px;
}

.aiseo-grade-value {
	font-weight: 600;
	font-size: 1.5em;
}

.aiseo-points {
	color: #646970;
	margin-bottom: 10px;
}

.aiseo-score-note {
	color: #646970;
	font-size: 0.9em;
	font-style: italic;
	margin: 0;
}

/* Category Cards */
.aiseo-category-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 25px;
}

.aiseo-category-card {
	padding: 15px;
	border-radius: 4px;
	border: 1px solid #c3c4c7;
	text-align: center;
}

.aiseo-category-card h4 {
	margin: 0 0 10px;
	font-size: 0.95em;
}

.aiseo-category-percentage {
	font-size: 2em;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 5px;
}

.aiseo-category-points {
	color: #646970;
	font-size: 0.85em;
	margin-bottom: 10px;
}

.aiseo-category-card.aiseo-status-good {
	background: #edfaef;
	border-color: #46b450;
}

.aiseo-category-card.aiseo-status-good .aiseo-category-percentage {
	color: #1e4620;
}

.aiseo-category-card.aiseo-status-warning {
	background: #fff8e5;
	border-color: #dba617;
}

.aiseo-category-card.aiseo-status-warning .aiseo-category-percentage {
	color: #826200;
}

.aiseo-category-card.aiseo-status-error {
	background: #fcf0f1;
	border-color: #d63638;
}

.aiseo-category-card.aiseo-status-error .aiseo-category-percentage {
	color: #8a1e1e;
}

/* Progress Bar */
.aiseo-progress-bar {
	height: 8px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	overflow: hidden;
}

.aiseo-progress-fill {
	height: 100%;
	border-radius: 4px;
	transition: width 0.3s ease;
}

.aiseo-status-good .aiseo-progress-fill {
	background: #46b450;
}

.aiseo-status-warning .aiseo-progress-fill {
	background: #dba617;
}

.aiseo-status-error .aiseo-progress-fill {
	background: #d63638;
}

/* Priority Fixes */
.aiseo-priority-fixes {
	background: #fff8e5;
	padding: 15px 20px;
	border-radius: 4px;
	margin-bottom: 25px;
	border-left: 4px solid #dba617;
}

.aiseo-priority-fixes h3 {
	margin: 0 0 10px;
	font-size: 1em;
}

.aiseo-priority-fixes ol {
	margin: 0;
	padding-left: 20px;
}

.aiseo-priority-fixes li {
	margin-bottom: 8px;
}

.aiseo-priority-fixes li:last-child {
	margin-bottom: 0;
}

.aiseo-potential {
	color: #46b450;
	font-weight: 500;
	margin-left: 5px;
}

/* Category Details (Expandable) */
.aiseo-category-details {
	margin-bottom: 25px;
}

.aiseo-detail-section {
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 10px;
}

.aiseo-detail-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px 15px;
	background: #f6f7f7;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 1em;
}

.aiseo-detail-toggle:hover {
	background: #f0f0f1;
}

.aiseo-detail-toggle[aria-expanded="true"] {
	border-bottom: 1px solid #c3c4c7;
}

.aiseo-detail-toggle .dashicons {
	margin-right: 10px;
	transition: transform 0.2s ease;
}

.aiseo-detail-toggle[aria-expanded="true"] .dashicons {
	transform: rotate(90deg);
}

.aiseo-detail-label {
	flex: 1;
	font-weight: 500;
}

.aiseo-detail-score {
	color: #646970;
}

.aiseo-detail-content {
	padding: 15px;
}

.aiseo-detail-content[hidden] {
	display: none;
}

/* Individual Factor */
.aiseo-factor {
	padding: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin-bottom: 10px;
}

.aiseo-factor:last-child {
	margin-bottom: 0;
}

.aiseo-factor-disabled {
	opacity: 0.6;
}

.aiseo-factor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.aiseo-factor-name {
	font-weight: 500;
}

.aiseo-factor-score {
	color: #646970;
	font-size: 0.9em;
}

.aiseo-factor-bar {
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 10px;
}

.aiseo-factor-fill {
	height: 100%;
	border-radius: 3px;
}

.aiseo-factor-fill.aiseo-status-good {
	background: #46b450;
}

.aiseo-factor-fill.aiseo-status-warning {
	background: #dba617;
}

.aiseo-factor-fill.aiseo-status-error {
	background: #d63638;
}

.aiseo-factor-fill.aiseo-status-disabled {
	background: #c3c4c7;
}

.aiseo-factor-coming-soon {
	color: #646970;
	font-style: italic;
	font-size: 0.9em;
	margin: 0;
}

.aiseo-factor-data {
	margin-bottom: 10px;
	font-size: 0.9em;
}

.aiseo-factor-data p {
	margin: 0 0 5px;
}

.aiseo-factor-data .aiseo-examples {
	color: #646970;
}

.aiseo-factor-recommendation {
	margin: 0;
	padding: 8px 12px;
	background: #f0f6fc;
	border-radius: 4px;
	font-size: 0.9em;
	color: #2271b1;
}

.aiseo-checks-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiseo-checks-list li {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
}

.aiseo-checks-list .dashicons-yes {
	color: #46b450;
}

.aiseo-checks-list .dashicons-no {
	color: #d63638;
}

/* History */
.aiseo-history {
	padding-top: 20px;
	border-top: 1px solid #c3c4c7;
}

.aiseo-history h3 {
	margin-bottom: 10px;
	font-size: 1em;
}

.aiseo-history ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aiseo-history li {
	padding: 5px 0;
	color: #646970;
}

.aiseo-history-current {
	font-weight: 500;
	color: #1d2327;
}

/* ========================================
   Traffic Dashboard Styles
   ======================================== */

/* Summary Cards */
.aiseo-summary-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.aiseo-traffic-dashboard .aiseo-card {
	background: #fff;
	padding: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	text-align: center;
}

.aiseo-card-label {
	display: block;
	color: #646970;
	font-size: 0.9em;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.aiseo-card-value {
	display: block;
	font-size: 2.5em;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.2;
}

.aiseo-card-change {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 10px;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 500;
}

.aiseo-card-change.positive {
	background: #edfaef;
	color: #1e4620;
}

.aiseo-card-change.negative {
	background: #fcf0f1;
	color: #8a1e1e;
}

.aiseo-card-subtext {
	display: block;
	color: #646970;
	font-size: 0.85em;
	margin-top: 5px;
}

/* Section Styles */
.aiseo-traffic-dashboard .aiseo-section {
	background: #fff;
	padding: 20px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	margin-bottom: 20px;
}

.aiseo-traffic-dashboard .aiseo-section h2 {
	margin: 0 0 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e0e0e0;
	font-size: 1.1em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.aiseo-view-all {
	font-size: 0.8em;
	font-weight: normal;
	text-decoration: none;
}

/* Source Bars */
.aiseo-source-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aiseo-source-row {
	display: flex;
	align-items: center;
	gap: 15px;
}

.aiseo-source-name {
	min-width: 100px;
	font-weight: 500;
}

.aiseo-source-bar-container {
	flex: 1;
	height: 20px;
	background: #f0f0f1;
	border-radius: 3px;
	overflow: hidden;
}

.aiseo-source-bar {
	height: 100%;
	background: linear-gradient(90deg, #2271b1, #135e96);
	border-radius: 3px;
	transition: width 0.3s ease;
}

.aiseo-source-count {
	min-width: 40px;
	text-align: right;
	font-weight: 500;
}

.aiseo-source-percent {
	min-width: 50px;
	color: #646970;
	font-size: 0.9em;
}

/* Top Pages */
.aiseo-top-pages {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: page-counter;
}

.aiseo-top-page {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f1;
}

.aiseo-top-page:last-child {
	border-bottom: none;
}

.aiseo-top-page::before {
	counter-increment: page-counter;
	content: counter(page-counter);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 500;
	margin-right: 12px;
}

.aiseo-page-info {
	flex: 1;
}

.aiseo-page-title {
	display: block;
	font-weight: 500;
}

.aiseo-page-url {
	display: block;
	color: #646970;
	font-size: 0.85em;
	word-break: break-all;
}

.aiseo-page-count {
	color: #646970;
	font-size: 0.9em;
	white-space: nowrap;
	margin-left: 15px;
}

/* Recent Traffic Table */
.aiseo-recent-table {
	border: none;
}

.aiseo-recent-table thead th {
	background: #f6f7f7;
	padding: 10px;
	text-align: left;
	font-weight: 500;
}

.aiseo-recent-table tbody td {
	padding: 10px;
	vertical-align: middle;
}

/* Disclaimer */
.aiseo-disclaimer {
	margin-top: 20px;
	padding: 12px 15px;
	background: #f0f6fc;
	border-radius: 4px;
	border-left: 4px solid #2271b1;
}

.aiseo-disclaimer p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #2271b1;
	font-size: 0.9em;
}

.aiseo-disclaimer .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* No Data State */
.aiseo-no-data {
	color: #646970;
	font-style: italic;
	text-align: center;
	padding: 20px;
	margin: 0;
}

/* ========================================
   Traffic Log Styles
   ======================================== */

.aiseo-traffic-log .subsubsub {
	margin-bottom: 10px;
}

.aiseo-source-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 0.85em;
	font-weight: 500;
}

.aiseo-source-badge.aiseo-source-chatgpt {
	background: #74aa9c;
	color: #fff;
}

.aiseo-source-badge.aiseo-source-perplexity {
	background: #20808d;
	color: #fff;
}

.aiseo-source-badge.aiseo-source-gemini {
	background: #4285f4;
	color: #fff;
}

.aiseo-source-badge.aiseo-source-copilot {
	background: #0078d4;
	color: #fff;
}

.aiseo-source-badge.aiseo-source-claude {
	background: #d4a27f;
	color: #1a1a1a;
}

.aiseo-no-referrer {
	color: #646970;
	font-style: italic;
}

/* ========================================
   Opt-In Section Styles
   ======================================== */

/* Opt-In Prompt */
.aiseo-optin-prompt {
	background: #f0f6fc;
	border-left: 4px solid #2271b1;
}

.aiseo-optin-prompt h2 {
	border-bottom: none;
	padding-bottom: 0;
}

.aiseo-optin-lead {
	font-size: 15px;
	color: #1d2327;
}

.aiseo-optin-benefits {
	margin: 15px 0;
	padding-left: 20px;
}

.aiseo-optin-benefits li {
	margin-bottom: 8px;
	color: #1d2327;
}

.aiseo-optin-form {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 15px;
	flex-wrap: wrap;
}

.aiseo-optin-form input[type="email"] {
	width: 300px;
	max-width: 100%;
}

/* Opted In Success State */
.aiseo-optin-success {
	background: #edfaef;
	border-left: 4px solid #00a32a;
}

.aiseo-optin-success .dashicons-yes-alt {
	color: #00a32a;
	margin-right: 5px;
}

.aiseo-optin-success p {
	margin: 5px 0;
}

/* Inline success after AJAX */
.aiseo-optin-success-inline {
	background: #edfaef;
	border-left: 4px solid #00a32a;
	padding: 15px 20px;
	border-radius: 0 4px 4px 0;
}

.aiseo-optin-success-inline .dashicons-yes-alt {
	color: #00a32a;
	margin-right: 5px;
}

.aiseo-optin-success-inline p {
	margin: 5px 0;
}

/* Coming Soon Section */
.aiseo-coming-soon {
	background: #f6f7f7;
	border-left: 4px solid #c3c4c7;
}

.aiseo-coming-soon h3 {
	margin: 0 0 10px;
	color: #1d2327;
}

.aiseo-coming-soon p {
	margin: 0;
	color: #646970;
}

/* No Data State */
.aiseo-no-data-section {
	text-align: center;
	padding: 30px;
}

.aiseo-no-data-section h2 {
	margin-bottom: 10px;
	border-bottom: none;
}

.aiseo-timing-note {
	color: #646970;
	margin: 15px 0;
}

.aiseo-timing-note .dashicons {
	vertical-align: middle;
	margin-right: 5px;
}

.aiseo-tips {
	text-align: left;
	max-width: 400px;
	margin: 20px auto;
	background: #f6f7f7;
	padding: 15px 20px;
	border-radius: 4px;
}

.aiseo-tips ul {
	margin: 10px 0;
	padding-left: 20px;
}

.aiseo-tips li {
	margin-bottom: 5px;
}

.aiseo-tips .button {
	margin-top: 10px;
}

/* Responsive */
@media screen and (max-width: 782px) {
	.aiseo-form-row {
		flex-direction: column;
		align-items: stretch;
	}

	.aiseo-post-select {
		min-width: 100%;
		max-width: 100%;
	}

	.aiseo-score-display {
		flex-direction: column;
		text-align: center;
	}

	.aiseo-category-cards {
		grid-template-columns: 1fr;
	}

	.aiseo-optin-form {
		flex-direction: column;
		align-items: stretch;
	}

	.aiseo-optin-form input[type="email"] {
		width: 100%;
	}

	.aiseo-optin-form .button {
		width: 100%;
		text-align: center;
	}
}