/**
 * 全局滚动条样式
 * 统一的滚动条设计，支持亮色和暗色主题
 */

/* CSS变量定义 */
:root {
  /* 滚动条尺寸 */
  --scrollbar-width: 8px;
  --scrollbar-height: 8px;

  /* 轨道要求：始终透明，仅显示滑块 */
  --scrollbar-track: transparent;

  /* 亮色主题：颜色取自主题变量，避免硬编码 */
  --scrollbar-thumb: rgba(var(--light-border-color-rgb), 0.45);
  --scrollbar-thumb-hover: rgba(var(--light-border-color-rgb), 0.65);
  --scrollbar-thumb-active: rgba(var(--light-border-color-rgb), 0.85);

  /* 圆角 */
  --scrollbar-radius: 4px;
}

/* 暗色主题颜色 */
:root.dark {
  --scrollbar-track: transparent;

  --scrollbar-thumb: rgba(var(--dark-border-color-rgb), 0.55);
  --scrollbar-thumb-hover: rgba(var(--dark-border-color-rgb), 0.75);
  --scrollbar-thumb-active: rgba(var(--dark-border-color-rgb), 0.9);
}

/* ===== 统一交互策略 =====
 * - 默认：滚动条透明隐藏（滑块/轨道都透明）
 * - hover：显示滑块
 * - 触控：滚动时通过 `.is-scrolling` 临时显示滑块（JS 负责加/去 class）
 */

/* 性能考虑：仅对“明确可滚动容器”生效，避免对全元素设置 scrollbar-color */
:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  /* 组件内常见滚动容器 */
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
) {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
):hover,
:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
).is-scrolling {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* WebKit：默认滑块透明，hover / is-scrolling 时显示 */
:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
)::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-height);
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
)::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--scrollbar-radius);
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
)::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--scrollbar-radius);
  transition: background-color 0.12s ease;
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
):hover::-webkit-scrollbar-thumb,
:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
).is-scrolling::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
):hover::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
):hover::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active);
}

:is(
  html,
  body,
  .overflow-auto,
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-scroll,
  .table-container,
  pre,
  code,
  .sidebar,
  aside,
  .modal-content,
  [role="dialog"],
  select[multiple],
  .admin-sidebar nav,
  .dropdown-menu__content,
  .nav-tabs,
  .ai-tabs,
  .tab-container,
  .icon-grid-categories,
  .custom-scrollbar,
  .scrollbar-auto-hide,
  .scrollbar-thin,
  .scrollbar-micro
)::-webkit-scrollbar-corner {
  background: transparent;
}

/* 特殊组件的滚动条样式覆盖 */

/* 更细的滚动条 */
.scrollbar-thin {
  --scrollbar-width: 6px;
  --scrollbar-height: 6px;
}

/* 极细滚动条 */
.scrollbar-micro {
  --scrollbar-width: 4px;
  --scrollbar-height: 4px;
}

/* 隐藏滚动条但保持可滚动 */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* 自动隐藏滚动条 - 仅在滚动时显示 */
/* 性能优化：移除 scrollbar-color 过渡动画（GPU 无法合成） */
.scrollbar-auto-hide {
  /* 兼容旧用法：全局已默认 auto-hide，这里仅保留语义类 */
}

.scrollbar-auto-hide:hover {
  /* 兼容旧用法：hover 显示由全局规则负责 */
}

.scrollbar-auto-hide::-webkit-scrollbar {
  /* 兼容旧用法：尺寸由 CSS 变量控制 */
}

.scrollbar-auto-hide::-webkit-scrollbar-track {
  /* 轨道始终透明 */
}

.scrollbar-auto-hide::-webkit-scrollbar-thumb {
  /* 默认透明，显示由全局规则负责 */
}

.scrollbar-auto-hide:hover::-webkit-scrollbar-track {
  /* 轨道始终透明 */
}

.scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
  /* 兼容旧用法：hover 显示由全局规则负责 */
}

/* 代码块和预格式化文本的滚动条 */
pre::-webkit-scrollbar,
code::-webkit-scrollbar {
  height: 6px;
}

/* 表格容器的滚动条 */
.table-container::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
}

/* 侧边栏的滚动条 */
.sidebar::-webkit-scrollbar,
aside::-webkit-scrollbar {
  width: 6px;
}

/* 模态框内容的滚动条 */
.modal-content::-webkit-scrollbar,
[role="dialog"]::-webkit-scrollbar {
  width: 6px;
}

/* 下拉菜单的滚动条 - 更细更轻量 */
.dropdown-menu::-webkit-scrollbar,
select[multiple]::-webkit-scrollbar {
  width: 4px;
}

/* 打印时隐藏滚动条 */
@media print {
  *::-webkit-scrollbar {
    display: none;
  }
  
  * {
    scrollbar-width: none;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --scrollbar-thumb: #64748b;
    --scrollbar-thumb-hover: #475569;
    --scrollbar-thumb-active: #334155;
  }
  
  :root.dark {
    --scrollbar-thumb: #94a3b8;
    --scrollbar-thumb-hover: #cbd5e1;
    --scrollbar-thumb-active: #e2e8f0;
  }
}

/* 动画和过渡效果 */
@media (prefers-reduced-motion: no-preference) {
  /* 过渡已在 thumb 上定义，轨道恒透明无需过渡 */
}