/*
 * Mobile Responsive + Group Name Fix + Share Button
 * 追加到现有 theme-override.css 之后
 */

/* ===================================================================
   Mobile: 手机端适配优化
   =================================================================== */
@media (max-width: 768px) {
  /* 主区域内边距缩小 */
  main.flex-1 {
    padding: 12px !important;
  }
  /* 标题区域 */
  .text-xl.font-semibold {
    font-size: 16px !important;
  }
  /* 统计卡片网格 - 手机2列 */
  .grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* 统计卡片内边距 */
  .grid.grid-cols-2.sm\:grid-cols-4 .p-4 {
    padding: 10px !important;
  }
  /* 统计数字大小 */
  .text-2xl.font-bold {
    font-size: 18px !important;
  }
  /* 时间文字 */
  .text-sm.font-medium.text-foreground.flex.items-center.gap-1\.5 {
    font-size: 11px !important;
  }
  /* 卡片标题 */
  [data-slot="card-header"] .text-base {
    font-size: 14px !important;
  }
  /* 群组列表项内边距 */
  .p-3.rounded-lg.cursor-pointer {
    padding: 10px !important;
  }
  /* 邀请明细表格 - 手机端优化 */
  [role="table"] {
    font-size: 12px !important;
  }
  [role="table"] th,
  [role="table"] td,
  [data-slot="table-head"],
  [data-slot="table-cell"] {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  /* 按钮缩小 */
  [data-slot="button"][data-size="sm"] {
    font-size: 11px !important;
    padding: 4px 8px !important;
    height: auto !important;
  }
  /* 筛选下拉框缩小 */
  .w-\[180px\] {
    width: 120px !important;
    min-width: 100px !important;
  }
  /* 侧边栏在手机端隐藏时主区域全宽 */
  [data-slot="sidebar"] {
    width: 0 !important;
    min-width: 0 !important;
  }
  /* 顶部导航栏 */
  .flex.border-b.h-14 {
    height: 48px !important;
    padding: 0 8px !important;
  }
  /* 卡片圆角 */
  [data-slot="card"] {
    border-radius: 10px !important;
  }
  /* 返回按钮和标题间距 */
  .flex.items-center.gap-3 {
    gap: 8px !important;
  }
  /* 邀请明细标题区域换行 */
  .flex.items-center.justify-between.flex-wrap.gap-3 {
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  main.flex-1 {
    padding: 8px !important;
  }
  .text-xl.font-semibold {
    font-size: 15px !important;
  }
  .text-2xl.font-bold {
    font-size: 16px !important;
  }
  /* 统计卡片更紧凑 */
  .grid.grid-cols-2.sm\:grid-cols-4 {
    gap: 6px !important;
  }
  .grid.grid-cols-2.sm\:grid-cols-4 .p-4 {
    padding: 8px !important;
  }
  /* 时间字段更小 */
  .text-sm.font-medium.text-foreground.flex.items-center.gap-1\.5 {
    font-size: 10px !important;
    word-break: break-all !important;
  }
}

/* ===================================================================
   群组名称完整显示修复 (邀请明细表格中的群组列)
   =================================================================== */
/* 表格容器 - 允许横向滚动 */
[data-slot="table"],
table {
  min-width: 700px !important;
}

/* 邀请明细表格中群组列 - 不截断 */
[role="table"] [data-slot="table-cell"]:nth-child(3),
[role="table"] td:nth-child(3),
table td:nth-child(3),
table th:nth-child(3) {
  white-space: nowrap !important;
  min-width: 150px !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* 表格外层容器允许横向滚动 - 修复 overflow-x:hidden 截断群组列 */
.overflow-auto,
.overflow-x-auto,
[class*="overflow"] {
  overflow-x: auto !important;
}

/* 修复滚动容器的 overflow-x:hidden 问题 */
.size-full.rounded-\[inherit\],
[class*="size-full"][class*="rounded-"] {
  overflow-x: auto !important;
}

/* 确保 max-h 容器也允许横向滚动 */
.max-h-\[500px\] {
  overflow-x: auto !important;
}

/* 群组统计列表中的群组名称 - 不截断 */
.p-3.rounded-lg.cursor-pointer .text-sm.font-medium.text-foreground.truncate,
.p-3.rounded-lg.cursor-pointer .text-sm.font-medium.text-foreground,
.truncate {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* ===================================================================
   分享按钮样式
   =================================================================== */
[data-share-btn] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  transition: all 0.15s;
}
[data-share-btn]:hover {
  border-color: #2aabee;
  color: #2aabee;
  background: #f0f9ff;
}