/**
 * PC Changelog Manager - Admin Styles
 *
 * @package PCChangelogManager
 */

/* CSS Variables for WordPress Admin Color Scheme Compatibility */
:root {
	--pc-clm-admin-primary: #2271b1;
	--pc-clm-admin-primary-hover: #135e96;
	--pc-clm-admin-secondary: #f6f7f7;
	--pc-clm-admin-text: #3c434a;
	--pc-clm-admin-text-muted: #646970;
	--pc-clm-admin-border: #dcdcde;
	--pc-clm-admin-bg: #ffffff;
	--pc-clm-admin-bg-alt: #f0f0f1;
	--pc-clm-success: #00a32a;
	--pc-clm-warning: #dba617;
	--pc-clm-error: #dc3232;
	--pc-clm-info: #72aee6;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	:root {
		--pc-clm-admin-primary: #2271b1;
		--pc-clm-admin-secondary: #1d2327;
		--pc-clm-admin-text: #f0f0f1;
		--pc-clm-admin-text-muted: #a7aaad;
		--pc-clm-admin-border: #3c434a;
		--pc-clm-admin-bg: #1d2327;
		--pc-clm-admin-bg-alt: #2c3338;
	}
}

/* ========================================
   Meta Box Styles
   ======================================== */

/* Entry Details Meta Box */
#pc_clm_entry_details {
	background: var(--pc-clm-admin-bg);
}

#pc_clm_entry_details .inside {
	padding: 16px 20px;
}

.pc-clm-meta-fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pc-clm-field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pc-clm-field-group label {
	font-weight: 600;
	font-size: 13px;
	color: var(--pc-clm-admin-text);
	margin: 0;
}

.pc-clm-field-group input[type="text"],
.pc-clm-field-group input[type="date"],
.pc-clm-field-group select {
	max-width: 400px;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	font-size: 14px;
	border: 1px solid var(--pc-clm-admin-border);
	border-radius: 4px;
	background-color: var(--pc-clm-admin-bg);
	color: var(--pc-clm-admin-text);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pc-clm-field-group input[type="text"]:focus,
.pc-clm-field-group input[type="date"]:focus,
.pc-clm-field-group select:focus {
	border-color: var(--pc-clm-admin-primary);
	box-shadow: 0 0 0 1px var(--pc-clm-admin-primary);
	outline: none;
}

.pc-clm-field-group .description {
	font-size: 12px;
	color: var(--pc-clm-admin-text-muted);
	margin: 0;
}

/* Preview Meta Box */
#pc_clm_preview .inside {
	padding: 16px 20px;
}

.pc-clm-preview-box {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pc-clm-preview-box p {
	margin: 0;
	font-size: 13px;
	color: var(--pc-clm-admin-text-muted);
}

.pc-clm-preview-box .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ========================================
   Category Badges
   ======================================== */

.pc-clm-category-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 12px;
	background-color: var(--pc-clm-admin-bg-alt);
	color: var(--pc-clm-admin-text);
}

.pc-clm-category-new-features {
	background-color: #e3fcef;
	color: #006d26;
}

.pc-clm-category-bug-fixes {
	background-color: #fbe4e4;
	color: #c01e1e;
}

.pc-clm-category-improvements {
	background-color: #e3f2fd;
	color: #0d4fdd;
}

.pc-clm-category-security {
	background-color: #fff3cd;
	color: #856404;
}

.pc-clm-category-deprecated {
	background-color: #f5f5f5;
	color: #616161;
}

.pc-clm-category-removed {
	background-color: #e8e8e8;
	color: #424242;
}

/* Dark mode category badges */
@media (prefers-color-scheme: dark) {
	.pc-clm-category-new-features {
		background-color: #004d26;
		color: #a7ebc3;
	}

	.pc-clm-category-bug-fixes {
		background-color: #4d1a1a;
		color: #f5b5b5;
	}

	.pc-clm-category-improvements {
		background-color: #1a3659;
		color: #a5c8ff;
	}

	.pc-clm-category-security {
		background-color: #4d4200;
		color: #ffecb3;
	}

	.pc-clm-category-deprecated {
		background-color: #424242;
		color: #bdbdbd;
	}

	.pc-clm-category-removed {
		background-color: #616161;
		color: #e0e0e0;
	}
}

/* ========================================
   Admin List Table Styles
   ======================================== */

.fixed .column-version {
	width: 100px;
}

.fixed .column-release_date {
	width: 120px;
}

.fixed .column-category {
	width: 120px;
}

/* Version column styling */
.column-version {
	font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
	font-weight: 600;
	font-size: 13px;
}

/* ========================================
   Post Editor Styles
   ======================================== */

/* Editor title styling for changelog entries */
#title-prompt-text {
	color: var(--pc-clm-admin-text-muted);
}

#post-body-content {
	margin-bottom: 0;
}

/* ========================================
   Notices and Messages
   ======================================== */

.pc-clm-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	margin: 16px 0;
	border-radius: 4px;
	background-color: var(--pc-clm-admin-bg-alt);
	border-left: 4px solid var(--pc-clm-admin-info);
}

.pc-clm-notice.success {
	border-left-color: var(--pc-clm-success);
}

.pc-clm-notice.warning {
	border-left-color: var(--pc-clm-warning);
}

.pc-clm-notice.error {
	border-left-color: var(--pc-clm-error);
}

.pc-clm-notice-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

.pc-clm-notice-content {
	flex: 1;
}

.pc-clm-notice-title {
	font-weight: 600;
	margin: 0 0 4px 0;
	font-size: 14px;
	color: var(--pc-clm-admin-text);
}

.pc-clm-notice-message {
	margin: 0;
	font-size: 13px;
	color: var(--pc-clm-admin-text-muted);
}

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

@media screen and (max-width: 782px) {
	/* Stack meta fields on mobile */
	.pc-clm-meta-fields {
		gap: 16px;
	}

	.pc-clm-field-group input[type="text"],
	.pc-clm-field-group input[type="date"],
	.pc-clm-field-group select {
		max-width: 100%;
	}

	/* Adjust column widths on mobile */
	.fixed .column-version,
	.fixed .column-release_date,
	.fixed .column-category {
		width: auto;
	}

	/* Hide some columns on mobile */
	.column-release_date,
	.column-category {
		display: none;
	}

	/* Category badges wrap properly */
	.pc-clm-category-badge {
		display: inline-flex;
		margin: 2px;
	}
}

@media screen and (max-width: 480px) {
	#pc_clm_entry_details .inside {
		padding: 12px 16px;
	}

	.pc-clm-preview-box {
		gap: 10px;
	}

	.pc-clm-preview-box .button {
		width: 100%;
		justify-content: center;
	}
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
	.pc-clm-meta-fields {
		display: block;
	}

	.pc-clm-field-group {
		margin-bottom: 16px;
	}

	.pc-clm-field-group input,
	.pc-clm-field-group select {
		border: 1px solid #000;
	}

	.pc-clm-preview-box {
		display: none;
	}
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

.pc-clm-field-group input:focus,
.pc-clm-field-group select:focus {
	outline: 2px solid var(--pc-clm-admin-primary);
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.pc-clm-field-group input,
	.pc-clm-field-group select {
		border-width: 2px;
	}

	.pc-clm-category-badge {
		border: 1px solid currentColor;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.pc-clm-field-group input,
	.pc-clm-field-group select,
	.pc-clm-category-badge {
		transition: none;
	}
}

/* ========================================
   Tooltip Styles for Help Text
   ======================================== */

.pc-clm-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--pc-clm-admin-text-muted);
	background-color: var(--pc-clm-admin-bg-alt);
	border-radius: 50%;
	cursor: help;
}

.pc-clm-tooltip:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 12px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	color: #fff;
	background-color: #1d2327;
	border-radius: 4px;
	z-index: 1000;
}

.pc-clm-tooltip::after {
	pointer-events: none;
}

/* ========================================
   Animation for Loading States
   ======================================== */

@keyframes pc-clm-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.pc-clm-loading {
	animation: pc-clm-fade-in 0.3s ease-out;
}

/* ========================================
   Empty State Styling
   ======================================== */

.pc-clm-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--pc-clm-admin-text-muted);
}

.pc-clm-empty-state-icon {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.pc-clm-empty-state-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--pc-clm-admin-text);
}

.pc-clm-empty-state-description {
	margin: 0;
	font-size: 14px;
}

/* ========================================
   Admin View Changelog Page
   ======================================== */

.pc-clm-admin-view-list {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	margin-top: 0;
 }

 .pc-clm-admin-entry {
 	padding: 20px;
 	background: #ffffff;
 	border: 1px solid #dcdcde;
 	border-radius: 4px;
 	transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }

 .pc-clm-admin-entry:hover {
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 	border-color: #2271b1;
 }

 .pc-clm-admin-entry-header {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 12px;
 	margin-bottom: 12px;
 }

 .pc-clm-admin-version {
 	display: inline-block;
 	padding: 4px 12px;
 	font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
 	font-size: 13px;
 	font-weight: 600;
 	color: #2271b1;
 	background-color: #f0f0f1;
 	border-radius: 4px;
 }

 .pc-clm-admin-date {
 	font-size: 13px;
 	color: #646970;
 }

 .pc-clm-admin-entry-title {
 	margin: 0 0 12px 0;
 	font-size: 18px;
 	font-weight: 600;
 	line-height: 1.3;
 }

 .pc-clm-admin-entry-title a {
 	color: #1d2327;
 	text-decoration: none;
 	transition: color 0.15s ease-in-out;
 }

 .pc-clm-admin-entry-title a:hover {
 	color: #2271b1;
 }

 .pc-clm-admin-entry-content {
 	margin-bottom: 16px;
 	font-size: 14px;
 	line-height: 1.6;
 	color: #3c434a;
 }

 .pc-clm-admin-entry-actions {
 	display: flex;
 	gap: 8px;
 	padding-top: 12px;
 	border-top: 1px solid #dcdcde;
 }

/* ========================================
   Admin Add New Page
   ======================================== */

.pc-clm-admin-add-form {
	margin-top: 20px;
	max-width: 900px;
}

.pc-clm-admin-add-form .form-table th {
	width: 200px;
	font-weight: 600;
}

.pc-clm-admin-add-form .required {
	color: var(--pc-clm-error);
}

/* ========================================
   Admin Empty State
   ======================================== */

.pc-clm-admin-empty {
	text-align: center;
	padding: 80px 20px;
	background: var(--pc-clm-admin-bg-alt);
	border: 2px dashed var(--pc-clm-admin-border);
	border-radius: 8px;
	margin-top: 20px;
}

.pc-clm-admin-empty p {
	margin: 0 0 20px 0;
	font-size: 16px;
	color: var(--pc-clm-admin-text-muted);
}

/* ========================================
   Dark Mode for Admin Pages
   ======================================== */

@media (prefers-color-scheme: dark) {
	.pc-clm-admin-entry {
		background: #1d2327;
		border-color: #3c434a;
	}

	.pc-clm-admin-entry:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
		border-color: #2271b1;
	}

	.pc-clm-admin-version {
		background-color: #2c3338;
		color: #72aee6;
	}

	.pc-clm-admin-entry-title a {
		color: #f0f0f1;
	}

	.pc-clm-admin-entry-title a:hover {
		color: #72aee6;
	}

	.pc-clm-admin-entry-content {
		color: #a7aaad;
	}

	.pc-clm-admin-entry-actions {
		border-top-color: #3c434a;
	}

	.pc-clm-admin-empty {
		background-color: #1d2327;
		border-color: #3c434a;
	}

	.pc-clm-admin-empty p {
		color: #a7aaad;
	}
}