/**
 * SLM WooCommerce Integration - 前端样式
 * 
 * 设计原则：
 * - 模块化：按功能模块组织样式
 * - 可维护：清晰的注释和分组
 * - 响应式：移动端优先
 * - 一致性：统一的间距、颜色、字体
 */

/* ============================================
   变量定义（使用 CSS 自定义属性）
   ============================================ */

:root {
	--slm-wc-primary: #0073aa;
	--slm-wc-primary-hover: #005a87;
	--slm-wc-success: #28a745;
	--slm-wc-success-hover: #218838;
	--slm-wc-danger: #dc3545;
	--slm-wc-danger-hover: #c82333;
	--slm-wc-warning: #ffc107;
	--slm-wc-info: #17a2b8;
	
	--slm-wc-text-primary: #333;
	--slm-wc-text-secondary: #666;
	--slm-wc-text-muted: #999;
	
	--slm-wc-bg-primary: #fff;
	--slm-wc-bg-secondary: #f9f9f9;
	--slm-wc-bg-tertiary: #f5f5f5;
	
	--slm-wc-border: #e0e0e0;
	--slm-wc-border-light: #eee;
	
	--slm-wc-radius: 4px;
	--slm-wc-radius-sm: 3px;
	--slm-wc-radius-lg: 6px;
	
	--slm-wc-shadow: 0 1px 3px rgba(0,0,0,0.1);
	--slm-wc-shadow-lg: 0 2px 10px rgba(0,0,0,0.15);
	
	--slm-wc-spacing-xs: 4px;
	--slm-wc-spacing-sm: 8px;
	--slm-wc-spacing-md: 12px;
	--slm-wc-spacing-lg: 16px;
	--slm-wc-spacing-xl: 20px;
	--slm-wc-spacing-xxl: 24px;
	
	--slm-wc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--slm-wc-font-mono: 'Courier New', monospace;
	
	--slm-wc-transition: 0.2s ease;
	--slm-wc-transition-slow: 0.3s ease;
	
	--slm-wc-z-overlay: 999998;
	--slm-wc-z-sidebar: 999999;
	--slm-wc-z-notification: 1000000;
}

/* ============================================
   1. 基础布局
   ============================================ */

.slm-wc-licenses-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--slm-wc-spacing-xl);
	font-family: var(--slm-wc-font-family);
	color: var(--slm-wc-text-primary);
}

.slm-wc-licenses-title {
	margin: 0 0 30px 0;
	font-size: 28px;
	font-weight: 600;
	color: var(--slm-wc-text-primary);
	line-height: 1.2;
}

.slm-wc-licenses-empty {
	padding: 40px;
	text-align: center;
	background: var(--slm-wc-bg-secondary);
	border: 1px solid var(--slm-wc-border);
	border-radius: var(--slm-wc-radius);
}

.slm-wc-licenses-empty p {
	margin: var(--slm-wc-spacing-md) 0;
	color: var(--slm-wc-text-secondary);
}

.slm-wc-licenses-empty a {
	color: var(--slm-wc-primary);
	text-decoration: none;
}

.slm-wc-licenses-empty a:hover {
	text-decoration: underline;
}

/* ============================================
   2. 表格样式
   ============================================ */

.slm-wc-licenses-table-wrapper {
	overflow-x: auto;
	margin-bottom: var(--slm-wc-spacing-xl);
	-webkit-overflow-scrolling: touch;
}

.slm-wc-licenses-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--slm-wc-bg-primary);
	box-shadow: var(--slm-wc-shadow);
	border-radius: var(--slm-wc-radius);
	overflow: hidden;
}

.slm-wc-licenses-table thead {
	background: var(--slm-wc-bg-tertiary);
}

.slm-wc-licenses-table th {
	padding: var(--slm-wc-spacing-lg);
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--slm-wc-border);
	color: var(--slm-wc-text-primary);
	font-size: 14px;
}

.slm-wc-licenses-table td {
	padding: var(--slm-wc-spacing-lg);
	border-bottom: 1px solid var(--slm-wc-border-light);
	color: var(--slm-wc-text-secondary);
	font-size: 14px;
	vertical-align: middle;
}

.slm-wc-licenses-table tbody tr:hover {
	background: var(--slm-wc-bg-secondary);
}

.slm-wc-licenses-table tbody tr:last-child td {
	border-bottom: none;
}

.slm-wc-licenses-table a {
	color: var(--slm-wc-primary);
	text-decoration: none;
	transition: color var(--slm-wc-transition);
}

.slm-wc-licenses-table a:hover {
	color: var(--slm-wc-primary-hover);
	text-decoration: underline;
}

.slm-wc-license-actions {
	white-space: nowrap;
}

.slm-wc-no-expiry {
	color: var(--slm-wc-text-secondary);
	font-style: italic;
	font-size: 13px;
}

/* ============================================
   3. 许可证密钥
   ============================================ */

.slm-wc-license-key-code {
	display: inline-block;
	padding: 5px var(--slm-wc-spacing-md);
	background: #f0f0f0;
	border-radius: var(--slm-wc-radius-sm);
	font-family: var(--slm-wc-font-mono);
	font-size: 13px;
	color: var(--slm-wc-text-primary);
	word-break: break-all;
	cursor: pointer;
	user-select: none;
	transition: all var(--slm-wc-transition-slow);
}

.slm-wc-license-key-code:hover {
	background: #e0e0e0;
	transform: scale(1.02);
}

.slm-wc-license-key-code:active {
	background: #d0d0d0;
	transform: scale(0.98);
}

.slm-wc-license-key-code.copied {
	background: #d4edda;
	color: #155724;
}

/* ============================================
   4. 状态徽章
   ============================================ */

.slm-wc-status-badge {
	display: inline-block;
	padding: 4px var(--slm-wc-spacing-md);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	line-height: 1.4;
}

.slm-wc-status-已激活,
.slm-wc-status-active {
	background: #d4edda;
	color: #155724;
}

.slm-wc-status-待激活,
.slm-wc-status-pending {
	background: #fff3cd;
	color: #856404;
}

.slm-wc-status-已禁用,
.slm-wc-status-blocked,
.slm-wc-status-disabled {
	background: #f8d7da;
	color: #721c24;
}

.slm-wc-status-已过期,
.slm-wc-status-expired {
	background: #e2e3e5;
	color: #383d41;
}

.slm-wc-status-未知,
.slm-wc-status-unknown {
	background: #e2e3e5;
	color: var(--slm-wc-text-secondary);
}

/* ============================================
   5. 按钮组件
   ============================================ */

.slm-wc-btn-config,
.slm-wc-btn-change-domain,
.slm-wc-btn-deactivate-domain,
.slm-wc-btn-add-domain {
	border: none;
	border-radius: var(--slm-wc-radius-sm);
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: background var(--slm-wc-transition), color var(--slm-wc-transition);
	color: #fff;
	text-decoration: none;
	display: inline-block;
	font-family: inherit;
}

.slm-wc-btn-config {
	padding: 6px var(--slm-wc-spacing-md);
	margin: 0 5px;
	background: var(--slm-wc-primary);
}

.slm-wc-btn-config:hover {
	background: var(--slm-wc-primary-hover);
	color: #fff;
}

.slm-wc-btn-config:active {
	background: var(--slm-wc-primary-hover);
	color: #fff;
}

.slm-wc-btn-change-domain {
	padding: 6px var(--slm-wc-spacing-md);
	background: var(--slm-wc-primary);
	white-space: nowrap;
}

.slm-wc-btn-change-domain:hover {
	background: var(--slm-wc-primary-hover);
	color: #fff;
}

.slm-wc-btn-change-domain:active {
	background: var(--slm-wc-primary-hover);
	color: #fff;
}

.slm-wc-btn-change-domain:disabled {
	background: #6c757d;
	cursor: not-allowed;
	color: #fff;
	opacity: 0.6;
}

.slm-wc-btn-deactivate-domain {
	padding: 6px var(--slm-wc-spacing-md);
	background: var(--slm-wc-danger);
	white-space: nowrap;
}

.slm-wc-btn-deactivate-domain:hover {
	background: var(--slm-wc-danger-hover);
	color: #fff;
}

.slm-wc-btn-deactivate-domain:active {
	background: var(--slm-wc-danger-hover);
	color: #fff;
}

.slm-wc-btn-deactivate-domain:disabled {
	background: #6c757d;
	cursor: not-allowed;
	color: #fff;
	opacity: 0.6;
}

.slm-wc-btn-add-domain {
	width: 100%;
	padding: var(--slm-wc-spacing-sm) var(--slm-wc-spacing-lg);
	font-size: 14px;
	background: var(--slm-wc-success);
}

.slm-wc-btn-add-domain:hover {
	background: var(--slm-wc-success-hover);
	color: #fff;
}

.slm-wc-btn-add-domain:active {
	background: var(--slm-wc-success-hover);
	color: #fff;
}

.slm-wc-btn-add-domain:disabled {
	background: #6c757d;
	cursor: not-allowed;
	color: #fff;
	opacity: 0.6;
}

.slm-wc-sidebar-close,
.slm-wc-btn-refresh-license {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 24px;
	color: var(--slm-wc-text-secondary);
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--slm-wc-text-secondary);
	transition: background var(--slm-wc-transition-slow), color var(--slm-wc-transition-slow);
	border-radius: var(--slm-wc-radius);
}

.slm-wc-sidebar-close:hover,
.slm-wc-btn-refresh-license:hover {
	color: var(--slm-wc-text-primary);
	background: #f0f0f0;
}

.slm-wc-sidebar-close:active,
.slm-wc-btn-refresh-license:active {
	color: var(--slm-wc-text-primary);
	background: #e0e0e0;
}

.slm-wc-sidebar-close:disabled,
.slm-wc-btn-refresh-license:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.slm-wc-btn-refresh-license {
	font-size: 20px;
}

.slm-wc-btn-refresh-license.loading {
	cursor: wait;
}

.slm-wc-btn-refresh-license.loading span {
	display: inline-block;
	animation: slm-wc-spin 1s linear infinite;
}

.slm-wc-sidebar-close span,
.slm-wc-btn-refresh-license span {
	line-height: 1;
	display: inline-block;
}

/* ============================================
   6. 侧边栏系统
   ============================================ */

.slm-wc-sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: var(--slm-wc-z-overlay);
	opacity: 0;
	transition: opacity var(--slm-wc-transition-slow);
	pointer-events: none;
}

.slm-wc-sidebar-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.slm-wc-sidebar {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: var(--slm-wc-bg-primary);
	box-shadow: var(--slm-wc-shadow-lg);
	z-index: var(--slm-wc-z-sidebar);
	transition: right var(--slm-wc-transition-slow);
	display: flex;
	flex-direction: column;
	pointer-events: none;
	overflow: hidden;
}

.slm-wc-sidebar.active {
	right: 0;
	pointer-events: auto;
}

.slm-wc-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--slm-wc-spacing-xl);
	border-bottom: 1px solid var(--slm-wc-border-light);
	background: var(--slm-wc-bg-secondary);
	flex-shrink: 0;
}

.slm-wc-sidebar-header-actions {
	display: flex;
	align-items: center;
	gap: var(--slm-wc-spacing-sm);
}

.slm-wc-sidebar-header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--slm-wc-text-primary);
	font-weight: 600;
	line-height: 1.2;
}

.slm-wc-sidebar-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: var(--slm-wc-spacing-xl);
	-webkit-overflow-scrolling: touch;
}

.slm-wc-sidebar-content h4 {
	margin: 0 0 var(--slm-wc-spacing-lg) 0;
	font-size: 15px;
	color: var(--slm-wc-text-primary);
	font-weight: 600;
	line-height: 1.4;
}

.slm-wc-config-section {
	margin-bottom: 28px;
}

.slm-wc-config-section:last-child {
	margin-bottom: 0;
}

.slm-wc-config-section p {
	margin: 0 0 var(--slm-wc-spacing-sm) 0;
	color: var(--slm-wc-text-secondary);
	font-size: 13px;
	line-height: 1.6;
}

.slm-wc-config-section p:last-child {
	margin-bottom: 0;
}

/* ============================================
   7. 域名管理
   ============================================ */

.slm-wc-domain-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--slm-wc-spacing-md);
	padding: var(--slm-wc-spacing-lg);
	margin-bottom: var(--slm-wc-spacing-xxl);
	background: #e8f5e9;
	border-radius: var(--slm-wc-radius-lg);
	color: var(--slm-wc-text-primary);
}

.slm-wc-domain-stats-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--slm-wc-spacing-xs);
}

.slm-wc-domain-stats-label {
	font-size: 13px;
	color: var(--slm-wc-text-secondary);
}

.slm-wc-domain-stats-value {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: var(--slm-wc-text-primary);
}

.slm-wc-domain-stats-divider {
	font-size: 18px;
	color: var(--slm-wc-text-muted);
	font-weight: 400;
}

.slm-wc-domain-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.slm-wc-domain-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--slm-wc-spacing-md);
	margin-bottom: 10px;
	background: var(--slm-wc-bg-primary);
	border-radius: var(--slm-wc-radius);
	border: 1px solid var(--slm-wc-border);
}

.slm-wc-domain-item:last-child {
	margin-bottom: 0;
}

.slm-wc-domain-info {
	display: flex;
	align-items: center;
	flex: 1;
	margin-right: var(--slm-wc-spacing-md);
	min-width: 0;
}

.slm-wc-domain-name {
	flex: 1;
	font-family: var(--slm-wc-font-mono);
	color: var(--slm-wc-text-primary);
	font-size: 13px;
	word-break: break-all;
	line-height: 1.5;
}

.slm-wc-domain-actions {
	display: flex;
	gap: var(--slm-wc-spacing-sm);
	flex-shrink: 0;
}

.slm-wc-add-domain-section {
	background: var(--slm-wc-bg-tertiary);
	padding: var(--slm-wc-spacing-lg);
	border-radius: var(--slm-wc-radius);
	border: 1px solid var(--slm-wc-border);
}

.slm-wc-add-domain-form {
	display: flex;
	flex-direction: column;
	gap: var(--slm-wc-spacing-md);
}

.slm-wc-new-domain-input {
	width: 100%;
	padding: var(--slm-wc-spacing-sm) var(--slm-wc-spacing-md);
	border: 1px solid var(--slm-wc-border);
	border-radius: var(--slm-wc-radius-sm);
	font-size: 14px;
	font-family: var(--slm-wc-font-mono);
	transition: border-color var(--slm-wc-transition);
	box-sizing: border-box;
}

.slm-wc-new-domain-input:focus {
	outline: none;
	border-color: var(--slm-wc-primary);
}

.slm-wc-new-domain-input::placeholder {
	color: var(--slm-wc-text-muted);
}

.slm-wc-domain-limit-reached {
	margin: 0;
	padding: var(--slm-wc-spacing-md);
	background: #fff3cd;
	border: 1px solid var(--slm-wc-warning);
	border-radius: var(--slm-wc-radius);
	color: #856404;
	font-size: 13px;
	line-height: 1.6;
}

/* ============================================
   8. 通知系统
   ============================================ */

.slm-wc-notification {
	position: fixed;
	top: var(--slm-wc-spacing-xl);
	right: var(--slm-wc-spacing-xl);
	min-width: 300px;
	max-width: 500px;
	padding: var(--slm-wc-spacing-lg) var(--slm-wc-spacing-xl);
	background: var(--slm-wc-bg-primary);
	border-radius: var(--slm-wc-radius);
	box-shadow: var(--slm-wc-shadow-lg);
	z-index: var(--slm-wc-z-notification);
	opacity: 0;
	transform: translateX(400px);
	transition: all var(--slm-wc-transition-slow);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--slm-wc-spacing-lg);
}

.slm-wc-notification-show {
	opacity: 1;
	transform: translateX(0);
}

.slm-wc-notification-message {
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--slm-wc-text-primary);
}

.slm-wc-notification-close {
	background: transparent;
	border: none;
	font-size: 20px;
	color: var(--slm-wc-text-muted);
	cursor: pointer;
	padding: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: color var(--slm-wc-transition);
}

.slm-wc-notification-close:hover {
	color: var(--slm-wc-text-primary);
}

.slm-wc-notification-success {
	border-left: 4px solid var(--slm-wc-success);
}

.slm-wc-notification-success .slm-wc-notification-message {
	color: #155724;
}

.slm-wc-notification-error {
	border-left: 4px solid var(--slm-wc-danger);
}

.slm-wc-notification-error .slm-wc-notification-message {
	color: #721c24;
}

.slm-wc-notification-info {
	border-left: 4px solid var(--slm-wc-primary);
}

.slm-wc-notification-info .slm-wc-notification-message {
	color: #004085;
}

/* ============================================
   9. 加载状态
   ============================================ */

.slm-wc-loading,
.slm-wc-processing {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.slm-wc-loading::after,
.slm-wc-processing::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid #ccc;
	border-top-color: var(--slm-wc-primary);
	border-radius: 50%;
	animation: slm-wc-spin 0.6s linear infinite;
}

/* ============================================
   10. 动画
   ============================================ */

@keyframes slm-wc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================
   11. 响应式设计
   ============================================ */

@media (max-width: 768px) {
	:root {
		--slm-wc-spacing-xl: 10px;
	}
	
	.slm-wc-licenses-page {
		padding: var(--slm-wc-spacing-md);
	}
	
	.slm-wc-licenses-title {
		font-size: 22px;
		margin-bottom: var(--slm-wc-spacing-xl);
	}
	
	.slm-wc-licenses-table-wrapper {
		margin-bottom: 0;
	}
	
	.slm-wc-licenses-table {
		display: block;
		border: none;
		box-shadow: none;
	}
	
	.slm-wc-licenses-table thead {
		display: none;
	}
	
	.slm-wc-licenses-table tbody {
		display: block;
		padding: 0;
	}
	
	.slm-wc-licenses-table tr {
		display: block;
		width: 100%;
		margin-bottom: var(--slm-wc-spacing-lg);
		background: var(--slm-wc-bg-primary);
		border: 1px solid var(--slm-wc-border);
		border-radius: var(--slm-wc-radius-lg);
		padding: 0;
		box-shadow: var(--slm-wc-shadow);
		overflow: hidden;
	}
	
	.slm-wc-licenses-table td {
		display: flex;
		align-items: flex-start;
		width: 100%;
		padding: var(--slm-wc-spacing-md) var(--slm-wc-spacing-lg);
		border: none;
		border-bottom: 1px solid var(--slm-wc-border-light);
		text-align: left;
	}
	
	.slm-wc-licenses-table td:last-child {
		border-bottom: none;
	}
	
	.slm-wc-licenses-table td:before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--slm-wc-text-secondary);
		font-size: 13px;
		min-width: 90px;
		margin-right: var(--slm-wc-spacing-md);
		flex-shrink: 0;
		line-height: 1.5;
	}
	
	.slm-wc-licenses-table td > * {
		flex: 1;
		min-width: 0;
		word-break: break-word;
	}
	
	.slm-wc-license-order a,
	.slm-wc-license-date time,
	.slm-wc-license-product-name,
	.slm-wc-license-expiry time,
	.slm-wc-license-expiry .slm-wc-no-expiry {
		flex: 1;
		word-break: break-word;
	}
	
	.slm-wc-license-order,
	.slm-wc-license-date,
	.slm-wc-license-product-name,
	.slm-wc-license-expiry {
		flex-direction: row;
		align-items: center;
	}
	
	.slm-wc-license-key {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--slm-wc-spacing-sm);
	}
	
	.slm-wc-license-key:before {
		margin-bottom: var(--slm-wc-spacing-xs);
	}
	
	.slm-wc-license-status {
		flex-direction: row;
		align-items: center;
	}
	
	.slm-wc-license-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: var(--slm-wc-spacing-md) var(--slm-wc-spacing-lg);
	}
	
	.slm-wc-license-actions:before {
		margin-bottom: var(--slm-wc-spacing-sm);
	}
	
	.slm-wc-no-expiry {
		display: block;
	}
	
	.slm-wc-license-key-code {
		display: block;
		width: 100%;
		margin: 0;
		padding: 10px var(--slm-wc-spacing-md);
		font-size: 12px;
		word-break: break-all;
		text-align: left;
		box-sizing: border-box;
		line-height: 1.5;
	}
	
	.slm-wc-license-key-code:hover {
		transform: none;
		background: #e0e0e0;
	}
	
	.slm-wc-status-badge {
		margin-left: 0;
		flex-shrink: 0;
	}
	
	.slm-wc-btn-config {
		display: block;
		width: 100%;
		margin: 0;
		padding: 10px var(--slm-wc-spacing-lg);
		font-size: 14px;
		text-align: center;
	}
	
	.slm-wc-sidebar {
		width: 100vw;
		max-width: 100vw;
		right: -100vw;
	}
	
	.slm-wc-sidebar.active {
		right: 0;
	}
	
	.slm-wc-domain-stats {
		padding: var(--slm-wc-spacing-md);
		gap: var(--slm-wc-spacing-sm);
	}
	
	.slm-wc-domain-stats-value {
		font-size: 18px;
	}
	
	.slm-wc-domain-item {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--slm-wc-spacing-md);
	}
	
	.slm-wc-domain-info {
		width: 100%;
		margin-bottom: var(--slm-wc-spacing-md);
		margin-right: 0;
	}
	
	.slm-wc-domain-name {
		margin: 0;
	}
	
	.slm-wc-domain-actions {
		width: 100%;
		flex-direction: column;
		gap: var(--slm-wc-spacing-sm);
	}
	
	.slm-wc-btn-change-domain,
	.slm-wc-btn-deactivate-domain {
		width: 100%;
	}
	
	.slm-wc-add-domain-section {
		padding: var(--slm-wc-spacing-md);
	}
	
	.slm-wc-add-domain-form {
		flex-direction: column;
	}
	
	.slm-wc-new-domain-input {
		margin-bottom: 0;
	}
	
	.slm-wc-btn-add-domain {
		width: 100%;
	}
	
	.slm-wc-notification {
		right: var(--slm-wc-spacing-md);
		left: var(--slm-wc-spacing-md);
		min-width: auto;
		max-width: none;
	}
}