/**
 * Swift Offload - Image Optimizer Admin Styles
 *
 * Styles for media library optimization UI elements including:
 * - View Original links in attachment details
 * - Optimization card display
 * - Media library list columns and row actions
 * - Convert format dropdown/popover
 * - Loading spinners
 * - List view pointer notification
 */

/* Style inline View Original link */
.swift-offload-separator {
	color: #787c82;
}
.attachment-details .details .edit-attachment + .swift-offload-separator + a,
.attachment-info .details .edit-attachment + .swift-offload-separator + a {
	color: #2271b1 !important;
	text-decoration: none !important;
}
.attachment-details .details .edit-attachment + .swift-offload-separator + a:hover,
.attachment-info .details .edit-attachment + .swift-offload-separator + a:hover {
	color: #135e96 !important;
	text-decoration: underline !important;
}

/* Ensure only one optimization card is visible */
.swift-offload-media-optimization-info + .swift-offload-media-optimization-info {
	display: none !important;
}

/* Media Library list columns */
.column-swift_offload_optimize {
	width: 200px;
}

/* Row actions styling */
.swift-offload-restore-original {
	color: #2271b1;
}
.swift-offload-delete-original {
	color: #b32d2e !important;
}
.swift-offload-media-column .button-small {
	min-height: auto !important;
}
.swift-offload-convert-dropdown {
	position: relative;
}
.swift-offload-convert-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	padding: 4px 0;
	min-width: 80px;
	display: none;
}
.swift-offload-convert-menu.active {
	display: block;
}
.swift-offload-convert-menu a {
	display: block;
	padding: 4px 10px;
	font-size: 11px;
	color: #1d2327;
	text-decoration: none;
}
.swift-offload-convert-menu a:hover {
	background: #f0f0f1;
}

/* Convert Popover */
.swift-offload-convert-popover {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 120px;
	padding: 8px 0;
}
.swift-offload-convert-popover .swift-offload-popover-header {
	padding: 6px 12px 8px;
	font-size: 11px;
	color: #6b7280;
	border-bottom: 1px solid #f3f4f6;
	margin-bottom: 4px;
}
.swift-offload-convert-popover .swift-offload-convert-option {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
	transition: background 0.15s ease;
}
.swift-offload-convert-popover .swift-offload-convert-option:hover {
	background: #f9fafb;
}
.swift-offload-convert-popover .swift-offload-format-tag {
	display: inline-block;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
}
.swift-offload-media-column .swift-offload-loading {
	opacity: 0.6;
	pointer-events: none;
}
.swift-offload-media-column .swift-offload-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid #e5e7eb;
	border-top-color: #6814cd;
	border-radius: 50%;
	animation: swift-offload-spin 0.8s linear infinite;
}
@keyframes swift-offload-spin {
	to { transform: rotate(360deg); }
}

/* =============================================
   List View Pointer Notification Styles
   ============================================= */

.swift-offload-list-view-pointer {
	z-index: 100001;
	max-width: 320px;
	transform: translateX(-160px);
}
.swift-offload-list-view-pointer .wp-pointer-content {
	padding: 0;
	overflow: hidden;
}
/* Hide default WordPress pointer elements */
.swift-offload-list-view-pointer .wp-pointer-content > h3 {
	display: none !important;
}
.swift-offload-list-view-pointer .wp-pointer-buttons {
	display: none !important;
}
/* Custom header */
.swift-offload-list-view-pointer .swift-offload-pointer-header {
	background: #2271b1;
	color: #fff;
	margin: 0;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.swift-offload-list-view-pointer .swift-offload-pointer-icon {
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.swift-offload-list-view-pointer .swift-offload-pointer-icon svg {
	color: #fff;
}
.swift-offload-list-view-pointer .swift-offload-pointer-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
/* Body */
.swift-offload-list-view-pointer .swift-offload-pointer-body {
	padding: 16px;
}
.swift-offload-list-view-pointer .swift-offload-pointer-message {
	background: transparent;
	color: #3c434a;
	margin: 0 0 16px 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
}
.swift-offload-list-view-pointer .swift-offload-switch-btn {
	display: inline-block;
	background: #2271b1;
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}
.swift-offload-list-view-pointer .swift-offload-switch-btn:hover {
	background: #135e96;
	color: #fff;
}
/* Footer with buttons in one row */
.swift-offload-list-view-pointer .swift-offload-pointer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.swift-offload-list-view-pointer .swift-offload-pointer-dismiss {
	color: #2271b1;
	text-decoration: none;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1;
}
.swift-offload-list-view-pointer .swift-offload-pointer-dismiss svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: #2271b1;
}
.swift-offload-list-view-pointer .swift-offload-pointer-dismiss:hover {
	color: #135e96;
}
/* Arrow colors */
.swift-offload-list-view-pointer.wp-pointer-top .wp-pointer-arrow {
	border-bottom-color: #2271b1;
	left: 25px;
}
.swift-offload-list-view-pointer.wp-pointer-top .wp-pointer-arrow-inner {
	border-bottom-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-bottom .wp-pointer-arrow {
	border-top-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-bottom .wp-pointer-arrow-inner {
	border-top-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-left .wp-pointer-arrow {
	border-right-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-left .wp-pointer-arrow-inner {
	border-right-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-right .wp-pointer-arrow {
	border-left-color: #2271b1;
}
.swift-offload-list-view-pointer.wp-pointer-right .wp-pointer-arrow-inner {
	border-left-color: #2271b1;
}