/**
 * TranslateToEnglish Admin Styles
 *
 * @package Fox4_Translate_To_English
 */

/* ============================================================
   Editor: Side-by-side layout
   ============================================================ */

.translatetoenglish-editor-columns {
	display: flex;
	gap: 24px;
	margin-top: 20px;
}

.translatetoenglish-editor-col {
	flex: 1;
	min-width: 0;
}

.translatetoenglish-editor-original {
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	padding: 20px;
	border-radius: 4px;
}

.translatetoenglish-editor-translation {
	background: #fff;
	border: 1px solid #c3c4c7;
	padding: 20px;
	border-radius: 4px;
}

.translatetoenglish-field {
	margin-bottom: 16px;
}

.translatetoenglish-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 13px;
	color: #1d2327;
}

.translatetoenglish-readonly-field {
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 8px 12px;
	border-radius: 4px;
	color: #50575e;
	min-height: 20px;
}

.translatetoenglish-readonly-content {
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 12px 16px;
	border-radius: 4px;
	color: #50575e;
	max-height: 500px;
	overflow-y: auto;
	line-height: 1.6;
}

.translatetoenglish-editor-info {
	margin-top: 16px;
	padding: 12px;
	background: #f0f6fc;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 12px;
}

.translatetoenglish-editor-info p {
	margin: 4px 0;
}

.translatetoenglish-editor-actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
}

/* ============================================================
   Dashboard cards
   ============================================================ */

.translatetoenglish-dashboard-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 20px;
}

.translatetoenglish-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	padding: 16px 20px;
	min-width: 180px;
	flex: 1;
	border-radius: 4px;
}

/* ============================================================
   Status badges
   ============================================================ */

.translatetoenglish-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
}

.translatetoenglish-status-published {
	background-color: #00a32a;
}

.translatetoenglish-status-machine {
	background-color: #dba617;
}

.translatetoenglish-status-reviewed {
	background-color: #2271b1;
}

.translatetoenglish-status-draft {
	background-color: #787c82;
}

/* ============================================================
   Metabox
   ============================================================ */

.translatetoenglish-metabox p {
	margin: 8px 0;
}

.translatetoenglish-metabox .notice {
	margin: 8px 0;
	padding: 8px;
}

.translatetoenglish-status-message {
	font-style: italic;
	color: #646970;
}

.translatetoenglish-status-message.success {
	color: #00a32a;
	font-style: normal;
}

.translatetoenglish-status-message.error {
	color: #d63638;
	font-style: normal;
}

/* ============================================================
   Translations List Table
   ============================================================ */

.translatetoenglish-translations-wrap .column-status {
	width: 120px;
}

.translatetoenglish-translations-wrap .column-provider {
	width: 100px;
}

.translatetoenglish-translations-wrap .column-source_type {
	width: 80px;
}

.translatetoenglish-translations-wrap .column-modified_at {
	width: 150px;
}

.translatetoenglish-translations-wrap .column-actions {
	width: 200px;
}

/* ============================================================
   Settings page
   ============================================================ */

.form-table .translatetoenglish-api-key-input {
	width: 400px;
	max-width: 100%;
}

#translatetoenglish-test-result,
.translatetoenglish-test-result {
	font-weight: 500;
	margin-left: 10px;
}

#translatetoenglish-test-result.success,
.translatetoenglish-test-result.success {
	color: #00a32a;
}

#translatetoenglish-test-result.error,
.translatetoenglish-test-result.error {
	color: #d63638;
}

/* ============================================================
   Post/Page List Table: Translation column
   ============================================================ */

.column-translatetoenglish_translation {
	width: 140px;
}

.translatetoenglish-col-view-link,
.translatetoenglish-col-edit-link {
	text-decoration: none;
	margin-left: 4px;
}

.translatetoenglish-col-view-link:hover,
.translatetoenglish-col-edit-link:hover {
	color: #135e96;
}

.translatetoenglish-col-no-translation {
	color: #a7aaad;
}

.translatetoenglish-col-translation-of {
	color: #646970;
	font-size: 12px;
}

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

@media screen and (max-width: 960px) {
	.translatetoenglish-editor-columns {
		flex-direction: column;
	}

	.translatetoenglish-dashboard-cards {
		flex-direction: column;
	}
}