@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .dark .glass {
    background: rgba(17, 24, 39, 0.7);
  }
  .card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .green-gradient {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }
}

/* 侧边栏展开状态 */
.sidebar-expanded {
  width: 10rem !important;
}

/* 侧边栏收缩状态 */
.sidebar-collapsed {
  width: 4rem !important;
}
.sidebar-collapsed .nav-label {
  display: none !important;
}
.sidebar-collapsed .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.sidebar-collapsed #sidebar-user,
.sidebar-collapsed #sidebar-theme {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
/* 收起时积分卡片：竖排（上图标下数字），去边框，隐藏右侧箭头 */
.sidebar-collapsed #sidebar-credit-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-left: 0;
  padding-right: 0;
}
.sidebar-collapsed #sidebar-credit-row .credit-arrow {
  display: none !important;
}
.sidebar-collapsed #sidebar-credit {
  font-size: 0.6875rem;
}
.sidebar-collapsed #sidebar-toggle i {
  transform: rotate(180deg);
}

/* 侧栏积分图标样式 */
.credit-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 侧栏主题切换图标样式 */
.theme-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.theme-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 侧边栏图标样式 */
.sidebar-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 详情页面图标样式 */
.details-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 列表页面图标样式 */
.list-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 按钮图标和文字在同一排 */
button i {
  display: inline-block;
  vertical-align: middle;
}

button span {
  display: inline-block;
  vertical-align: middle;
}

/* 按钮图标样式 */
.btn-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 全局图标样式，确保所有Feather Icons大小一致 */
i[data-feather] {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* 错误状态和加载状态中的图标样式 */
#records-error i[data-feather],
#packages-error i[data-feather],
#records-loading i[data-feather],
#packages-loading i[data-feather],
#loading-state i[data-feather],
#error-state i[data-feather] {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto 8px;
}

/* 导航项激活状态 */
.nav-item.active {
  background-color: rgb(243 244 246);
  color: rgb(17 24 39);
}
.dark .nav-item.active {
  background-color: rgb(55 65 81);
  color: rgb(255 255 255);
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}

/* 输入框聚焦绿色边框 */
input:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  border-color: rgb(16 185 129);
}

/* 按钮过渡动画 */
button {
  transition: all 0.2s ease;
}

/* 时间线样式增强 */
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.timeline-dot.active {
  background-color: rgb(16 185 129);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
.timeline-dot.inactive {
  background-color: rgb(209 213 219);
}
.dark .timeline-dot.inactive {
  background-color: rgb(75 85 99);
}
.timeline-line {
  width: 2px;
  flex: 1;
  background-color: rgb(229 231 235);
  margin-top: 4px;
}
.dark .timeline-line {
  background-color: rgb(55 65 81);
}