/* UI 修复和响应式优化 - 全局应用 */

/* ========== 容器和布局修复 ========== */

/* 确保所有容器不超出屏幕 */
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

.container {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== 模态框修复 ========== */

/* 确保模态框内容不溢出 */
dialog,
.modal,
[role="dialog"] {
  max-width: 95vw !important;
  max-height: 95vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

dialog .modal-content,
.modal .modal-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 模态框内的输入框 */
dialog input,
dialog textarea,
dialog select,
.modal input,
.modal textarea,
.modal select {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ========== 表单修复 ========== */

/* 确保表单元素不超出容器 */
form {
  max-width: 100%;
  overflow-x: hidden;
}

input,
textarea,
select,
button {
  max-width: 100%;
  box-sizing: border-box;
}

/* 长文本自动换行 */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ========== 图片和媒体修复 ========== */

img {
  max-width: 100%;
  height: auto;
}

video,
iframe {
  max-width: 100%;
}

/* ========== 表格修复 ========== */

table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }
}

/* ========== 卡片和网格修复 ========== */

.card,
.stat-card,
.order-card,
.package-card {
  max-width: 100%;
  overflow: hidden;
}

/* 网格布局在小屏幕自动变为单列 */
@media (max-width: 768px) {
  .grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ========== 移动端优化 ========== */

@media (max-width: 768px) {
  /* 减小标题字号 */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  /* 减小容器内边距 */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 按钮全宽 */
  button,
  .btn,
  input[type="submit"] {
    width: 100%;
    margin-bottom: 10px;
  }

  /* 表单间距优化 */
  form input,
  form textarea,
  form select {
    margin-bottom: 12px;
  }

  /* 模态框内边距 */
  dialog,
  .modal {
    padding: 15px;
  }

  /* 统计卡片字号 */
  .stat-value {
    font-size: 1.5rem !important;
  }

  /* 订单卡片内边距 */
  .order-card {
    padding: 15px !important;
  }

  /* Flex 布局改为垂直 */
  .flex-row,
  [style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ========== 超小屏幕优化 (手机横屏) ========== */

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 进一步减小标题 */
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  /* 按钮内边距 */
  button,
  .btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  /* 输入框内边距 */
  input,
  textarea,
  select {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  /* 卡片内边距 */
  .card,
  .stat-card,
  .order-card {
    padding: 12px !important;
  }
}

/* ========== 特定组件修复 ========== */

/* 订单信息网格 - 移动端单列 */
@media (max-width: 768px) {
  .order-info {
    grid-template-columns: 1fr !important;
  }

  .order-body {
    grid-template-columns: 1fr !important;
  }

  .order-actions {
    flex-direction: column !important;
  }

  .order-actions button {
    width: 100% !important;
  }
}

/* 筛选栏 - 移动端堆叠 */
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .filter-bar select,
  .filter-bar button {
    width: 100% !important;
  }
}

/* 统计网格 - 移动端两列 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ========== 文本溢出处理 ========== */

/* 长文本截断 */
.text-ellipsis,
.order-number,
.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 允许换行的文本 */
.text-wrap,
.content,
.description,
.note {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* ========== 滚动优化 ========== */

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 移动端滚动优化 */
body {
  -webkit-overflow-scrolling: touch;
}

/* 横向滚动容器 */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ========== 触摸优化 ========== */

/* 增大移动端点击区域 */
@media (max-width: 768px) {
  a,
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 44px; /* Apple 推荐的最小触摸目标 */
    min-width: 44px;
  }
}

/* ========== 图片预览模态框优化 ========== */

.image-modal {
  padding: 20px;
  box-sizing: border-box;
}

.image-modal img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

@media (max-width: 768px) {
  .image-modal {
    padding: 10px;
  }

  .image-modal-close {
    font-size: 2rem !important;
    top: 10px !important;
    right: 20px !important;
  }
}