/**
 * Readmo AI Admin Styles
 *
 * Styles for the WordPress admin interface and plugin settings page.
 *
 * @package ReadmoAI
 * @subpackage Assets/CSS
 * @since 1.0.0
 */

/* Settings Page Container */
.readmo-ai-settings-container {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 24px;
	padding: 32px 0;
	font-family: Noto Sans TC, PingFang TC, Arial, Helvetica, LiHei Pro, Microsoft JhengHei, MingLiU, sans-serif;
}

/* Notice Styles */
.readmo-ai-notice {
	min-width: 720px;
	border-radius: 12px;
}

.readmo-ai-notice-content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
}

.notice-success {
	background: var(--Core-Read-50, rgba(242, 251, 251, 1));
	border: 1px solid var(--Core-Read-200, rgba(82, 196, 216, 1));
}

.notice-error {
	background: var(--Red-100, rgba(254, 246, 246, 1));
	border: 1px solid var(--Red-300, rgba(239, 68, 68, 1))
}

.readmo-ai-notice-msg {
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	vertical-align: middle;
}

/* Main Panel */
.readmo-ai-panel {
	display: flex;
	flex-direction: column;
	width: 50vw;
	max-width: 100%;
	background-color: #ffffff;
	border-radius: 12px;
	border: 1px solid rgba(229, 231, 235, 1);
}

/* Field Container */
.readmo-ai-field {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 32px;
	border-bottom: 1px solid rgba(221, 221, 221, 0.5);
}

.readmo-ai-title {
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	vertical-align: middle;
}

.readmo-ai-input-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.readmo-ai-api-key {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid rgba(221, 221, 221, 1);
	border-radius: 12px;
	background: var(--Text-White, rgba(255, 255, 255, 1));
}

.readmo-ai-api-key input[type="text"],
.readmo-ai-api-key input[type="password"] {
	display: inline;
	flex: 1;
	min-height: 24px;
	font-size: 16px;
	line-height: 100%;
	padding: 0;
	border: none;
	outline: none;
	background: transparent;
	box-shadow: none;
}

.readmo-ai-basic-input::placeholder {
	font-weight: 400;
	color: rgba(183, 183, 183, 1);
	font-size: 16px;
	opacity: 1;
	vertical-align: middle;
}

/* Password Toggle Button */
.readmo-ai-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: 0.3s ease;
}

.readmo-ai-toggle-btn:hover {
	opacity: 0.7;
}

.readmo-ai-toggle-btn:focus {
	outline: none;
}

/* Description Box */
.readmo-ai-description {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	background-color: var(--Core-Read-50, rgba(242, 251, 251, 1));
}

.readmo-ai-text {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	vertical-align: middle;
	color: var(--Text-Neutral-400, rgba(74, 75, 88, 1));
	align-content: center;
}

/* Button Styles */
.btn {
	padding: 10px 20px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	vertical-align: middle;
	cursor: pointer;
}

.btn-primary {
	background: linear-gradient(88.9deg, #00BCEC 0.27%, #94A6F9 100%);
	box-shadow: 0px 1px 15px 2px rgba(213, 247, 255, 1) inset;
	color: #ffffff;
	border: none;
}

.btn-secondary {
	background: rgba(0, 134, 168, 1);
	color: #ffffff;
	border: none;
	padding: 16px 20px;
}

.btn-tertiary {
	background: var(--UI-Disable, rgba(221, 221, 221, 0.465));
	color: var(--Text-Neutral-100, rgb(154, 154, 154));
	border: none;
	padding: 16px 20px;
}

/* Ban Button (Disabled State) */
.btn-ban,
.btn:disabled {
	background: rgb(246, 246, 246);
	color: var(--Text-Neutral-200, rgb(220, 220, 220));
	border: none;
	padding: 16px 20px;
	cursor: not-allowed;
	pointer-events: none;
}

/* Action Container */
.readmo-ai-action {
	display: flex;
	justify-content: center;
	padding: 20px;
	gap: 20px;
	border-bottom: 1px solid rgba(221, 221, 221, 0.5);
}

/* Help Info Section */
.readmo-ai-help-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.readmo-ai-helper-text {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
	color: var(--Text-Neutral-300, rgba(113, 113, 113, 1));
}

.readmo-ai-helper-mail-group {
	display: flex;
	align-items: center;
	gap: 4px;
}

.readmo-ai-helper-mail {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	vertical-align: middle;
	text-decoration-style: solid;
	text-decoration-thickness: 0%;
	color:  var(--Text-Neutral-300, rgba(113, 113, 113, 1));
	transition: 0.3s ease;
}

.readmo-ai-helper-mail:hover {
	color: var(--Text-Neutral-300, rgb(72, 72, 72));
}

.readmo-ai-helper-mail:focus {
	outline: none;
	box-shadow: none;
	border: none;
}

/* Auto-Insert Settings Panel */
.readmo-ai-setting-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2px;
}

.readmo-ai-setting-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.readmo-ai-comment {
	font-size: 14px;
	line-height: 1.5;
	color: var(--Text-Neutral-300, rgb(155, 155, 155));
}

/* Text Input Styles */
.readmo-ai-text-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	border: 1px solid rgba(221, 221, 221, 1);
	border-radius: 8px;
	background: var(--Text-White, rgba(255, 255, 255, 1));
	color: var(--Text-Neutral-400, rgba(74, 75, 88, 1));
	transition: border-color 0.2s ease;
}

.readmo-ai-text-input:focus {
	outline: none;
	border-color: rgba(0, 134, 168, 1);
	box-shadow: 0 0 0 2px rgba(0, 134, 168, 0.1);
}

.readmo-ai-text-input::placeholder {
	color: var(--Text-Neutral-200, rgba(183, 183, 183, 1));
}

/* Toggle Switch Styles */
.readmo-ai-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.readmo-ai-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}

.readmo-ai-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.readmo-ai-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--UI-Disable, rgba(221, 221, 221, 1));
	transition: 0.3s ease;
	border-radius: 24px;
}

.readmo-ai-toggle-slider::before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.3s ease;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.readmo-ai-toggle input:checked + .readmo-ai-toggle-slider {
	background-color: rgba(0, 134, 168, 1);
}

.readmo-ai-toggle input:checked + .readmo-ai-toggle-slider::before {
	transform: translateX(20px);
}

.readmo-ai-toggle input:focus + .readmo-ai-toggle-slider {
	box-shadow: 0 0 0 2px rgba(0, 134, 168, 0.2);
}

/* Checkbox and Radio Styles */
.readmo-ai-checkbox-group,
.readmo-ai-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.readmo-ai-checkbox-label,
.readmo-ai-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: var(--Text-Neutral-400, rgba(74, 75, 88, 1));
}

.readmo-ai-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: rgba(0, 134, 168, 1);
}

/* Custom Radio Button */
.readmo-ai-radio-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.readmo-ai-radio-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid var(--Text-Neutral-200, rgba(183, 183, 183, 1));
	border-radius: 50%;
	background: #ffffff;
	transition: border-color 0.2s ease;
}

.readmo-ai-radio-dot::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.2s ease;
}

.readmo-ai-radio-label input[type="radio"]:checked + .readmo-ai-radio-dot {
	border-color: rgba(0, 134, 168, 1);
}

.readmo-ai-radio-label input[type="radio"]:checked + .readmo-ai-radio-dot::after {
	background: rgba(0, 134, 168, 1);
}

.readmo-ai-radio-label:hover .readmo-ai-radio-dot {
	border-color: rgba(0, 134, 168, 0.6);
}

.readmo-ai-radio-text {
	line-height: 1;
}

/* Content Tree Selector Styles */
.readmo-ai-content-tree {
	max-height: 400px;
	max-width: 100%;
	overflow: auto;
	padding: 12px;
	border: 1px solid rgba(221, 221, 221, 1);
	border-radius: 8px;
	background: var(--Text-White, rgba(255, 255, 255, 1));
}

.readmo-ai-tree-node {
	user-select: none;
}

.readmo-ai-tree-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.readmo-ai-tree-item:hover {
	background-color: rgba(0, 134, 168, 0.05);
}

.readmo-ai-tree-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	cursor: pointer;
	color: var(--Text-Neutral-300, rgba(113, 113, 113, 1));
	transition: transform 0.2s ease;
}

.readmo-ai-tree-toggle svg {
	transition: transform 0.2s ease;
}

.readmo-ai-tree-node.expanded > .readmo-ai-tree-item > .readmo-ai-tree-toggle svg {
	transform: rotate(90deg);
}

.readmo-ai-tree-leaf .readmo-ai-tree-toggle {
	visibility: hidden;
}

.readmo-ai-tree-leaf {
	padding-left: 32px;
}

.readmo-ai-tree-checkbox {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

input[type="checkbox"].readmo-ai-tree-input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	border: 2px solid var(--Text-Neutral-200, rgba(183, 183, 183, 1));
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type="checkbox"].readmo-ai-tree-input:checked {
	background-color: rgba(0, 134, 168, 1);
	border-color: rgba(0, 134, 168, 1);
}

input[type="checkbox"].readmo-ai-tree-input:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

input[type="checkbox"].readmo-ai-tree-input:indeterminate {
	background-color: rgba(0, 134, 168, 1);
	border-color: rgba(0, 134, 168, 1);
}

input[type="checkbox"].readmo-ai-tree-input:indeterminate::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: #ffffff;
	transform: translate(-50%, -50%);
}

input[type="checkbox"].readmo-ai-tree-input:hover {
	border-color: rgba(0, 134, 168, 0.6);
}

input[type="checkbox"].readmo-ai-tree-input:focus {
	outline: none;
	box-shadow: none;
}

.readmo-ai-tree-label {
	font-size: 16px;
	color: var(--Text-Neutral-400, rgba(74, 75, 88, 1));
	transition: color 0.15s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.readmo-ai-tree-label small {
	color: var(--Text-Neutral-300, rgba(113, 113, 113, 1));
}

/* Gray style for unchecked items */
.readmo-ai-tree-node.unchecked > .readmo-ai-tree-item .readmo-ai-tree-label {
	color: var(--Text-Neutral-200, rgba(183, 183, 183, 1));
}

.readmo-ai-tree-node.unchecked > .readmo-ai-tree-item .readmo-ai-tree-label small {
	color: var(--Text-Neutral-200, rgba(183, 183, 183, 1));
}

/* Children container */
.readmo-ai-tree-children {
	margin-left: 18px;
	display: none;
	border-left: 1px solid rgba(221, 221, 221, 0.5);
	padding-left: 12px;
}

.readmo-ai-tree-node.expanded > .readmo-ai-tree-children {
	display: block;
}

.readmo-ai-empty-msg {
	color: var(--Text-Neutral-300, rgba(113, 113, 113, 1));
	font-size: 14px;
	font-style: italic;
}

@media screen and (max-width: 767px) {
	.readmo-ai-settings-container {
		margin: 16px 0;
	}

	.readmo-ai-notice {
		min-width: 95%;
	}

	.readmo-ai-panel {
		min-width: 95%;
	}

	.readmo-ai-text {
		font-size: 14px;
	}

	.btn {
		font-size: 12px;
		line-height: 16px;
		padding: 10px 14px;
	}

	.btn-secondary, .btn-tertiary {
		width: 160px;
		padding: 12px 16px;
	}

	.readmo-ai-checkbox-group,
	.readmo-ai-radio-group {
		flex-direction: column;
		gap: 12px;
	}
}