/* ==========================================
优化说明：
1. 使用 @layer 管理样式优先级，避免权重混乱
2. 变量体系：补充通用变量、修正错误、语义化命名
3. 消除硬编码颜色/尺寸，统一使用变量
4. 精简选择器层级，提升渲染性能
5. 补充无障碍焦点样式、优化交互体验
6. 统一响应式断点变量，兼容跨浏览器样式
7. 修正拼写错误、提升颜色对比度（符合WCAG 2.1）
========================================== */
@layer base, utils, components;

/* ---------------- 基础层：变量 + 全局重置 ---------------- */
@layer base {
  :root {
    /* 主色调变量 */
    --color-primary: #249cfa;
    --color-primary-hover: #2575cf;
    --color-secondary: #f27b04;
    --color-secondary-hover: #d45500;

    --color-red: #e53e3e;
    --color-red-hover: #c53030;
    --color-green: #38a169;
    --color-green-hover: #2f855a;
    --color-blue: #3182ce;
    --color-blue-hover: #2b6cb0;
    --color-orange: #ed8936;
    --color-orange-hover: #dd6b20;
    --color-gray: #718096;
    --color-gray-hover: #4a5568;

    /* 功能色变量 */
    --color-danger: #ff0000;
    --color-danger-hover: #cf3317;
    --color-success: #1aad19;
    --color-success-hover: #598c17;
    --color-warning: #ffb515;
    --color-warning-hover: #fc9200;

    /* 中性色变量（提升对比度） */
    --color-text-main: #666;
    --color-text-light: #888; /* 原#ccc对比度不足，优化为#888 */
    --color-text-dark: #444;
    --color-text-black: #333;
    --color-text-white: #fff;
    --color-placeholder: var(--color-text-light); /* 统一placeholder颜色 */

    /* 边框色变量（补充语义化） */
    --border-color: #dfdfdf;
    --border-color-light: #f3f3f3;
    --border-color-extra-light: #f1f1f1;
    --border-color-ultra-light: #eee; /* 极浅边框/分割线 */
    --border-color-super-light: #fafafa; /* 超浅边框 */
    --border-color-table: #f3f3f3;

    /* 背景色变量（修正错误 + 补充） */
    --bg-light: #fff;
    --bg-dark: #444;
    --bg-white: #fff;
    --bg-table-header: #f8f8f8;
    --bg-table-header-hover: var(--bg-table-header);
    --bg-pagination-active: #c0c0c0; /* 修正silver拼写错误，替换为十六进制值 */
    --bg-pagination-hover: #e8f4ff; /* 提升对比度，原#f1f1f1 */
    --bg-hover-base: #f5f7fa; /* 通用hover背景 */
    --bg-grey: #ccc;
    --bg-grey-hover: #bbb;
    --bg-button-default: rgba(54, 54, 54, 0.53);

    /* 尺寸变量（补充半径/断点） */
    --gap-sm: 6px;
    --gap-md: 8px;
    --gap-lg: 16px;
    --gap-xl: 20px;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --font-xs: 10px;
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 18px;
    --height-btn: 32px;
    --height-input: 32px;
    --height-table-th: 35px;
    --height-table-tr: 28px;

    /* 响应式断点变量（统一管理） */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
  }

  /* 全局重置（精简 + 现代化） */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    font:
      var(--font-sm) / 1.6em 宋体,
      Helvetica,
      Arial,
      sans-serif;
    margin: var(--gap-md);
    color: var(--color-text-main);
    background-color: var(--bg-light);
  }

  a {
    text-decoration: none;
    color: var(--color-text-main);
    transition: color 0.3s ease;
  }

  a:hover,
  a:active {
    color: var(--color-danger-hover);
  }

  dl,
  li,
  ol,
  ul {
    list-style-type: none;
  }

  em,
  i,
  tt {
    font-style: normal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-sm);
  }

  h1 small,
  h1 span,
  h2 small,
  h2 span,
  h3 small,
  h3 span,
  h4 small,
  h4 span,
  h5 small,
  h5 span,
  h6 small,
  h6 span {
    float: right;
    font-weight: 200;
    cursor: pointer;
  }

  img {
    border: none;
    vertical-align: middle;
  }

  /* 统一表单元素样式（跨浏览器兼容） */
  input,
  textarea,
  select {
    outline: 0;
    font-family: inherit;
    font-size: var(--font-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 var(--gap-md);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--color-primary);
    outline: none;
  }
}

/* ---------------- 工具层：通用工具类 ---------------- */
@layer utils {
  .clear {
    clear: both;
    height: 0;
    overflow: hidden;
  }

  .right {
    float: right;
  }

  .left {
    float: left;
  }

  .center {
    margin: 0 auto;
  }

  .mouse {
    color: var(--color-blue); /* 替换硬编码#00f */
    cursor: pointer;
  }

  /* 通用hover过渡（减少重复代码） */
  .hover-transition {
    transition: all 0.2s ease;
  }

  /* 通用按钮基础样式 */
  .btn-base {
    display: inline-block;
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s ease;
  }

  /* 色彩工具类（替换硬编码） */
  .red {
    color: var(--color-danger);
  }

  .blue {
    color: var(--color-primary);
  }

  .green {
    color: var(--color-success);
  }

  .orange {
    color: var(--color-secondary);
  }

  .yellow {
    color: var(--color-warning);
  }

  .purple {
    color: #6f42c1; /* 业务特殊色，保留 */
  }

  .teal {
    color: #20c997; /* 业务特殊色，保留 */
  }

  .gray {
    color: var(--color-gray);
  }

  .filter {
    opacity: 0;
    filter: alpha(Opacity=0);
  }
}

/* ---------------- 组件层：业务组件样式 ---------------- */
@layer components {
  /* 3.1 表格 */
  .table {
    margin: 0 auto var(--gap-md);
    width: 99.9%;
    border: 1px solid var(--border-color-table);
    border-top: none;
    background: var(--bg-white);
    font-size: var(--font-sm);
    border-collapse: collapse;
  }

  .table tr {
    width: 100%;
    height: var(--height-table-tr);
    transition: background-color 0.2s ease;
  }

  .table tr:hover {
    background-color: var(--bg-hover-base); /* 替换硬编码#f5f7fa */
  }

  .table tr th:hover {
    background-color: var(--bg-table-header-hover);
  }

  .table caption {
    height: var(--height-table-th);
    font-weight: 700;
    line-height: var(--height-table-th);
  }

  .table tr th {
    height: var(--height-table-th);
    background: var(--bg-table-header);
    text-align: center;
    font-size: var(--font-md);
    line-height: var(--height-table-th);
    vertical-align: middle;
  }

  .table tr th small {
    padding-left: var(--gap-sm);
    font-weight: 100;
    font-size: var(--font-xs);
  }

  .table tr td {
    padding: var(--gap-sm);
    height: auto;
    border-top: 1px solid var(--border-color-table);
    line-height: 25px;
  }

  /* 简化选择器层级（原.table tr td img） */
  .table td img {
    display: block;
    margin: 0 2px;
    width: 80px;
    border: 1px solid var(--border-color-extra-light);
  }

  .table tr .button {
    font-weight: 200;
  }

  .table tr .red.button,
  .table tr .blue.button,
  .table tr .yellow.button {
    color: var(--color-text-white);
  }

  .centerTD tr td {
    text-align: center;
  }

  .tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-lg); /* 替换硬编码4px */
    font-size: var(--font-sm);
  }

  /* 3.2分页（合并重复样式，删除旧版float布局） */
  .page {
    margin: var(--gap-sm) var(--gap-sm) var(--gap-xl);
    width: 99.9%;
    height: 30px;
    line-height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-md);
    padding: var(--gap-md) var(--gap-lg);
  }

  /* 分页信息区域 */
  .page-info {
    color: var(--color-text-main);
    font-size: var(--font-sm);
    line-height: var(--height-btn);
  }

  /* 页码选择器容器 */
  .page-size-selector {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-sm);
  }

  .page-size-selector select {
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-white);
    color: var(--color-text-main);
    height: var(--height-input);
    box-sizing: border-box;
  }

  /* 分页按钮容器 */
  .pagination {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* 分页按钮基础样式 */
  .page-btn {
    min-width: 32px;
    height: var(--height-btn);
    padding: 0 var(--gap-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-white);
    color: var(--color-text-main);
    font-size: var(--font-sm);
    line-height: var(--height-btn);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    transform-origin: center; /* 避免过渡抖动 */
  }

  /* 按钮交互状态 + 焦点样式（无障碍） */
  .page-btn:hover:not(.disabled):not(.active) {
    background-color: var(--bg-pagination-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
  }

  .page-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .page-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: 500;
  }

  .page-btn.disabled {
    color: var(--color-text-light);
    background-color: var(--bg-light);
    border-color: var(--border-color-light);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
  }

  .page p {
    float: right;
    display: block;
    margin-right: var(--gap-lg);
  }

  .page p a,
  .page p b,
  .page p i {
    display: inline-block;
    margin: 1px 1px 0;
    padding: 0 var(--gap-md);
    border: 1px solid var(--bg-grey);
    transition: background-color 0.3s ease;
  }

  .page p a:hover,
  .page p i:hover {
    background: var(--bg-pagination-hover);
    cursor: pointer;
  }

  .page b {
    background: var(--bg-pagination-active);
  }

  /* 3.4 表单 */
  .form {
    display: block;
    margin-top: var(--gap-md);
    border-top: none;
    background-color: var(--bg-white);
    padding: 0 var(--gap-xl);
  }

  .form h2 {
    display: block;
    color: var(--color-text-light);
    text-align: center;
    font-size: var(--font-md);
    margin-bottom: var(--gap-lg);
  }

  .form ul {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }

  .form ul li {
    display: flex;
    align-items: center;
    padding: var(--gap-md);
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border-color-super-light); /* 替换硬编码#fafafa */
    text-align: left;
    font-size: var(--font-sm);
    line-height: var(--height-input);
  }

  .form ul li label,
  .form ol li label {
    display: inline-block;
    padding-right: var(--gap-md);
    width: 100px;
    height: var(--height-input);
    color: #737373; /* 业务特殊色，保留 */
    text-align: right;
    font-weight: 600;
  }

  .form ul li input,
  .form ol li input {
    padding: 0 var(--gap-md);
    width: 300px;
    max-width: 100%;
    color: var(--color-text-black);
    height: var(--height-input);
    border-radius: var(--radius-md);
  }

  .form ul li span,
  .form ol li span {
    font-size: var(--font-xs);
    font-weight: 200;
    color: var(--color-text-light);
  }
  .form ul li span i {
    padding: 10px;
  }
  .form ul li textarea {
    width: 400px;
    max-width: 100%;
    height: auto;
    min-height: 80px;
    color: var(--color-text-light);
    border: 1px solid var(--border-color);
    line-height: 20px;
    border-radius: var(--radius-md);
    resize: vertical;
  }

  .form ul li small {
    margin-left: var(--gap-sm);
    color: var(--color-text-light);
  }

  .form ol {
    display: inline;
    height: auto;
  }

  .form ol li {
    display: inline-block;
    width: auto;
  }

  .form ol li input {
    width: 150px;
    max-width: 100%;
  }

  .form .form_check {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    align-items: center;
  }

  .form .form_check label {
    box-sizing: border-box;
    font-weight: 200;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .form input[type='radio'],
  .form input[type='checkbox'],
  .table input[type='checkbox'],
  .field-item input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    margin: 0;
  }

  /* 选中状态的样式 */
  .form input[type='radio']:checked,
  .form input[type='checkbox']:checked,
  .table input[type='checkbox']:checked,
  .field-item input[type='checkbox']:checked {
    border-color: #007bff;
    background-color: #fff;
  }

  /* 选中状态的内部圆点 */
  .form input[type='radio']:checked::after,
  .form input[type='checkbox']:checked::after,
  .table input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #007bff; /* 内部圆点颜色，可自定义 */
  }

  .form .form_tips {
    display: inline-block;
    margin-left: var(--gap-sm);
    color: var(--color-text-light);
  }

  .form .title {
    margin: var(--gap-md) 0 var(--gap-xl) 0;
    padding: 0 25px;
    height: 38px;
    color: var(--color-secondary);
    font-weight: 700;
    font-size: var(--font-lg);
    line-height: 38px;
  }

  .form input::placeholder {
    font-size: var(--font-sm);
    letter-spacing: 1px;
    color: var(--color-placeholder) !important;
  }

  .form select,
  .select {
    position: relative;
    width: auto;
    height: var(--height-input);
    padding-left: var(--gap-md);
    color: var(--color-text-black);
    line-height: 28px;
    border-radius: var(--radius-md);
  }

  /* 3.5 按钮 */
  .button,
  .button:visited {
    @extend .btn-base; /* 复用通用按钮样式，无SCSS则直接写属性 */
    padding: 0 var(--gap-lg);
    height: var(--height-btn);
    background-color: var(--bg-button-default);
    color: var(--color-text-white);
    border: none;
    font-size: var(--font-sm);
    font-weight: 400;
    margin: 1px;
    line-height: var(--height-btn);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    position: relative;
  }

  /* 按钮disabled状态（无障碍优化） */
  .button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .button:hover {
    color: var(--color-text-white);
  }

  .button:active {
    top: 1px;
  }

  /* 按钮焦点样式（无障碍） */
  .button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* 按钮颜色变体 */
  .button.green,
  .green.button {
    background-color: var(--color-success);
  }

  .button.red,
  .red.button {
    background-color: var(--color-danger);
  }

  .button.orange {
    background-color: var(--color-secondary);
  }

  .button.blue {
    background-color: var(--color-primary);
  }

  .button.wx {
    background-color: var(--color-success);
  }

  .button.yellow {
    background-color: var(--color-warning);
  }

  .button.grey {
    background-color: var(--bg-grey);
  }

  /* 按钮hover状态 */
  .button.green:hover {
    background-color: var(--color-success-hover);
  }

  .button.red:hover {
    background-color: var(--color-danger-hover);
  }

  .button.orange:hover {
    background-color: var(--color-secondary-hover);
  }

  .button.blue:hover {
    background-color: var(--color-primary-hover);
  }

  .button.wx:hover {
    background-color: var(--color-success-hover);
  }

  .button.yellow:hover {
    background-color: var(--color-warning-hover);
  }

  .button.grey:hover {
    background-color: var(--bg-grey-hover);
  }

  /* 按钮尺寸变体 */
  .button.large {
    font-size: var(--font-sm);
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    padding: 0 var(--gap-xl);
  }

  .button.max {
    display: block;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    width: 100%;
  }

  .button.small {
    display: block;
    padding: 0 var(--gap-md);
    height: 24px;
    line-height: 24px;
    font-size: var(--font-xs);
  }

  /* 按钮布局变体 */
  .button.center {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-right: 0;
    padding-left: 0;
    width: 50%;
  }

  .button.submit {
    display: block;
    margin: 0 auto;
    min-width: 100px;
  }

  /* 按钮特殊效果 */
  .button.fancy {
    border-radius: var(--radius-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.21);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.21);
  }

  .button.norm {
    padding-left: 0;
    padding-right: 0;
  }

  .edit-btn,
  .delete-btn {
    margin: 2px;
  }

  /* 图标交互优化 */
  .edit-btn i,
  .delete-btn i {
    font-size: var(--font-lg);
    transition: transform 0.3s ease;
    transform-origin: center; /* 避免抖动 */
  }

  .edit-btn i:hover,
  .delete-btn i:hover {
    transform: scale(1.2);
  }

  /* 详情区域 */
  .detail-section {
    margin: var(--gap-xl) auto;
    padding: var(--gap-xl);
    width: 99.9%;
    border: 1px solid var(--border-color-light);
    background: var(--bg-white);
    line-height: 1.8em;
  }

  .detail-section h2 {
    margin-bottom: var(--gap-lg);
    color: var(--color-text-dark);
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color-ultra-light); /* 替换硬编码#eee */
    padding-bottom: var(--gap-md);
  }

  .detail-section p {
    margin-bottom: var(--gap-lg);
    color: var(--color-text-main);
  }

  .detail-section ul {
    margin-left: var(--gap-xl);
    margin-bottom: var(--gap-lg);
    list-style-type: disc;
  }

  .detail-section ul li {
    margin-bottom: var(--gap-sm);
    color: var(--color-text-main);
  }

  .detail-section .sub-title {
    font-weight: bold;
    color: var(--color-text-dark);
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-md);
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-md) 0;
    margin-bottom: var(--gap-lg);
  }

  .btn-link {
    @extend .btn-base; /* 复用通用按钮样式 */
    margin-right: var(--gap-md);
    cursor: pointer;
    text-decoration: none;
  }

  .btn-link i {
    vertical-align: middle;
    margin-right: var(--gap-sm);
  }

  /* btn-link hover效果（修正拼写错误：原btn-link.yellow:hover少.） */
  .btn-link:hover {
    opacity: 0.9;
    color: var(--color-text-white);
  }

  .btn-link.green:hover {
    background-color: var(--color-success-hover);
  }

  .btn-link.red:hover {
    background-color: var(--color-danger-hover);
  }

  .btn-link.blue:hover {
    background-color: var(--color-primary-hover);
  }

  .btn-link.orange:hover {
    background-color: var(--color-secondary-hover);
  }

  .btn-link.yellow:hover {
    background-color: var(--color-warning-hover);
  }

  .btn-link.grey:hover {
    background-color: var(--bg-grey-hover);
    color: var(--color-text-black);
  }

  /* btn-link焦点样式（无障碍） */
  .btn-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .buttons form.right {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
  }

  .fields-list {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--gap-md);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
  }

  .field-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm); /* 替换硬编码2px */
    transition: background-color 0.2s;
  }

  .field-item:hover {
    background-color: var(--bg-hover-base); /* 替换硬编码#f5f7fa */
  }

  .field-item input {
    vertical-align: middle;
  }
}

/* ---------------- 响应式样式（统一断点变量） ---------------- */
@layer components {
  @media (max-width: var(--breakpoint-md)) {
    /* 768px → 变量 */
    .page {
      flex-direction: column;
      align-items: stretch;
      gap: var(--gap-md);
      padding: var(--gap-md);
    }

    .page-info,
    .page-size-selector,
    .pagination {
      width: 100%;
      justify-content: center;
      text-align: center;
    }

    .pagination {
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
    }

    .page-btn {
      min-width: 28px;
      height: 28px;
      line-height: 28px;
      padding: 0 var(--gap-md);
      font-size: var(--font-xs);
    }
  }

  @media (max-width: var(--breakpoint-sm)) {
    /* 480px → 变量 */
    .form ul li span.form_tips {
      position: absolute;
      right: 0px;
      top: calc(var(--height-input) + var(--gap-sm) + 8px);
      z-index: 99;
      padding: var(--gap-md) var(--gap-lg);
      border-radius: var(--radius-md);
      font-size: var(--font-xs);
      line-height: 1;
      font-weight: 200;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
      max-width: calc(100% - clamp(70px, 20vw, 90px) - var(--gap-xl));
      min-width: 180px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      background-color: rgba(0, 0, 0, 0.056);
      opacity: 0.6;
      transform: translateY(0);
      transition: all 0.25s ease;
      background-image: none !important;
    }
    .page-size-selector {
      flex-direction: column;
      align-items: center;
      gap: var(--gap-md);
    }
  }
}