/* 后台管理页面增强样式 - 高对比度优化 */

/* 确保在各种主题下都有高对比度的文字和背景色 */
.tech-card,
.config-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 表格样式 - 高对比度 */
table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

th {
    background: var(--primary-color) !important;
    color: #ffffff !important; /* 确保表头文字始终是白色，高对比度 */
    font-weight: 600 !important;
}

td {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

/* 表格行悬停效果 */
tbody tr:hover {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.1) !important;
}

/* 输入框样式 - 高对比度 */
.search-input,
.tech-input,
.form-input,
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    background: var(--bg-card) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.search-input::placeholder,
.tech-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
}

/* 输入框聚焦状态 */
.search-input:focus,
.tech-input:focus,
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 99, 102, 241), 0.1) !important;
}

/* 标签文字 - 高对比度 */
.config-label,
.form-label,
label,
.stat-label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.config-desc,
.form-desc,
.stat-desc {
    color: var(--text-secondary) !important;
}

/* 按钮样式 - 确保在各种主题下都有高对比度 */
.tech-btn {
    background: var(--accent-gradient) !important;
    color: #ffffff !important; /* 按钮文字始终是白色 */
    border: 2px solid transparent !important;
    font-weight: 500 !important;
}

.tech-btn.secondary {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.tech-btn.secondary:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

.tech-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
}

/* 模态框样式 - 高对比度 */
.modal-content,
.toast-modal,
.confirm-modal {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-title,
.confirm-title {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.modal-message,
.confirm-message,
.toast-message {
    color: var(--text-primary) !important;
}

/* 统计卡片 - 高对比度 */
.stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.stat-value {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* 徽章样式 - 高对比度 */
.status-badge,
.type-badge {
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
}

.status-online {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.status-offline {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.type-recharge {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22c55e !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.type-gift {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.type-consume {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* 分页样式 - 高对比度 */
.pagination {
    color: var(--text-primary) !important;
}

.pagination a,
.pagination button {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.pagination a:hover,
.pagination button:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

.pagination .active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* 开关样式 - 高对比度 */
.switch .slider {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.switch input:checked + .slider {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.switch .slider:before {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 链接样式 - 高对比度 */
a {
    color: var(--primary-color) !important;
}

a:hover {
    color: var(--primary-hover) !important;
    text-decoration: underline !important;
}

/* 确保所有文字都有足够的对比度 */
* {
    /* WCAG AA标准：正常文字至少4.5:1，大文字至少3:1 */
    /* 通过使用CSS变量，确保在各种主题下都有足够的对比度 */
}

/* 明亮主题下的特殊优化 */
html[data-theme^="light"] .tech-card,
html[data-theme^="light"] .config-section {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html[data-theme^="light"] th {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme^="light"] td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 暗黑主题下的特殊优化 */
html[data-theme^="dark"] .tech-card,
html[data-theme^="dark"] .config-section {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme^="dark"] th {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

html[data-theme^="dark"] td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 确保按钮文字在所有主题下都清晰可见 */
.tech-btn,
.btn-primary,
.btn-secondary,
.btn-confirm {
    text-shadow: none !important;
}

/* 确保输入框文字在所有主题下都清晰可见 */
input,
select,
textarea {
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* 确保占位符文字有足够的对比度但不会与正常文字混淆 */
input::placeholder,
select::placeholder,
textarea::placeholder {
    opacity: 0.6 !important;
}

/* ==========================
   通用：Alert 提示块（修复暗色主题下“看不见”问题）
   ========================== */
.alert {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    line-height: 1.6;
}

.alert strong {
    color: var(--text-primary);
}

.alert code {
    background: rgba(var(--primary-color-rgb, 99, 102, 241), 0.12);
    border: 1px solid rgba(var(--primary-color-rgb, 99, 102, 241), 0.25);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.alert.alert-info {
    border-color: rgba(96, 165, 250, 0.35);
    background: rgba(96, 165, 250, 0.10);
}

.alert.alert-warning {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.10);
}

.alert.alert-error {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.10);
}

.alert.alert-success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.10);
}

/* ==========================
   修复：浏览器自动填充导致 input 背景色异常
   ========================== */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    box-shadow: 0 0 0px 1000px var(--bg-card) inset !important;
    border: 2px solid var(--border-color) !important;
}

/* Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
    box-shadow: 0 0 0px 1000px var(--bg-card) inset !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

/* ==========================
   闪送页面：提升对比度与排版一致性
   ========================== */
.ss-page .ss-pre {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 12px;
}

.ss-page .ss-mini {
    color: var(--text-secondary) !important;
    opacity: 0.95 !important;
}

.ss-page .ss-badge {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.ss-page .ss-badge.ok {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: var(--text-primary) !important;
}

.ss-page .ss-badge.warn {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: var(--text-primary) !important;
}

.ss-page .ss-badge.bad {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: var(--text-primary) !important;
}

.ss-page .ss-badge.info {
    background: rgba(96, 165, 250, 0.10) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: var(--text-primary) !important;
}