/* how-enhance-components.css — 增强通用组件样式 */

.skeleton__item { padding: 16px 0; }
.skeleton__line { height: 14px; background: #E5E5EA; border-radius: 4px; margin-bottom: 8px; animation: skeleton-shimmer 1.5s infinite; }
@keyframes skeleton-shimmer { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state__icon { margin-bottom: 16px; }
.empty-state__text { font-size: 15px; color: #666666; margin-bottom: 8px; }
.empty-state__hint { font-size: 13px; color: #9E9E9E; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; }
.pagination__btn { padding: 6px 16px; border: 1px solid #E5E5EA; border-radius: 6px; background: #FFFFFF; color: #333333; cursor: pointer; font-size: 14px; }
.pagination__info { font-size: 14px; color: #666666; }
.pagination__end { text-align: center; color: #9E9E9E; font-size: 13px; padding: 16px; }
.pagination__load-more { display: block; margin: 20px auto; }
.error-boundary { text-align: center; padding: 48px 20px; }
.error-boundary__icon { margin-bottom: 16px; }
.error-boundary__text { font-size: 15px; color: #FF9500; margin-bottom: 16px; }
.network-error { text-align: center; padding: 48px 20px; }
.network-error__icon { margin-bottom: 16px; }
.network-error__text { font-size: 15px; color: #FF3B30; margin-bottom: 16px; }

#global-search-mount { display: inline-flex; vertical-align: middle; margin-left: 8px; }
.global-search { position: relative; display: inline-block; }
.global-search__input { padding: 4px 12px; border: 1px solid #E5E5EA; border-radius: 6px; font-size: 14px; width: 240px; outline: none; background: #FFFFFF; color: #333333; }
.global-search__input:focus { border-color: #007AFF; }
.global-search__suggest { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border: 1px solid #E5E5EA; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; max-height: 320px; overflow-y: auto; }
.global-search__suggest-item { padding: 8px 12px; cursor: pointer; font-size: 14px; color: #333333; }
.global-search__suggest-item:hover { background: #F5F5FA; }
.global-search__suggest-source { display: inline-block; font-size: 11px; color: #9E9E9E; margin-right: 8px; padding: 1px 6px; border-radius: 4px; background: #F5F5FA; }

#notif-badge-mount { position: absolute; top: -4px; right: -6px; }
.notif-badge-container { position: relative; display: inline-block; }
.notif-badge-mount-sidebar { position: absolute; top: -2px; right: -2px; }
.notif-badge { background: #FF3B30; color: #FFFFFF; font-size: 0.6rem; font-weight: 700; padding: 1px 4px; border-radius: 8px; line-height: 1; }
.notif-badge--active { display: inline-block; }

#dashboard-chart-area { width: 100%; margin-top: 24px; min-height: 300px; }
.dashboard-chart-error { text-align: center; padding: 40px; color: #9E9E9E; font-size: 14px; }