/* 咸鱼电竞设计系统 · 04-components
   职责：全站通用组件的视觉（按钮、卡片、板块标题、标签、表单、表格、指标、tabs、
   抽屉、确认框、toast、空状态、流水列表）。只改视觉属性（色、边、圆角、阴影、字形），
   不改布局属性 —— 布局仍由各页面自己的结构与 05-pages 负责，避免误伤旧页面。
   加载顺序：01-tokens → 02-base → 03-shell → 04-components → 05-pages → 06-responsive。 */
@layer xy.components {
  /* ── 按钮 ── */
  button, .primary, .secondary, .ghost, .danger {
    font-family: var(--font-ui);
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
  }
  button:active:not(:disabled) { transform: scale(.98); }
  .primary, button.primary, a.primary {
    border: 0; border-radius: var(--r-pill);
    background: var(--accent); color: var(--accent-ink); font-weight: 600;
    box-shadow: 0 8px 20px -12px rgba(244, 179, 207, .7);
  }
  .primary:hover:not(:disabled), button.primary:hover:not(:disabled) { background: var(--accent-hover); }
  .secondary, button.secondary, .ghost, button.ghost {
    border: 0; border-radius: var(--r-pill);
    background: var(--bg-raised); color: var(--text-1);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
    text-decoration: none;   /* 写成 <a> 的按钮（首页「全部」）不带链接下划线 */
  }
  .ghost, button.ghost { background: transparent; color: var(--text-2); }
  .secondary:hover:not(:disabled), .ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }
  .danger, button.danger { border: 0; border-radius: var(--r-pill); background: var(--st-err-tint); color: var(--st-err); box-shadow: inset 0 0 0 1px rgba(242, 143, 152, .28); }
  .danger:hover:not(:disabled) { background: rgba(242, 143, 152, .2); }
  .icon-btn, button.icon-btn { border-radius: var(--r-pill); }
  button:disabled, .primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

  /* ── 卡片：一层表面 + 顶部极淡高光，不再嵌套描边 ── */
  .card {
    border: 0; border-radius: var(--card-radius);
    background: var(--card-bg); box-shadow: var(--shadow-card);
  }
  .card .card { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--hairline); border-radius: var(--item-radius); }

  /* 板块标题：宋体 + 斜体英文副标（em.latin），来自店铺长图版式 */
  .section-head h2, .section-head h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: .06em; color: var(--text-1); }
  .section-head h2 .latin, .section-head h3 .latin, em.latin {
    font-family: var(--font-accent); font-style: italic; font-weight: 400;
    letter-spacing: .02em; color: var(--text-4); font-size: .76em; margin-left: 8px;
  }
  .section-head > span, .section-head p { color: var(--text-4); }

  /* ── 标签 / 状态 / 身份 ── */
  .tag, .status { border-radius: var(--r-pill); }
  .role-tag { border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent); box-shadow: none; }
  .role-tag.role-player { background: var(--st-info-tint); color: var(--role-player); }
  .role-tag.role-staff { background: var(--st-err-tint); color: var(--role-staff); }
  .role-tag.role-customer { background: var(--st-warn-tint); color: var(--role-customer); }

  /* ── 表单 ── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea {
    border-color: var(--hairline-strong); border-radius: var(--r-sm);
    background-color: var(--bg-sunken); color: var(--text-1);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  }
  input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: rgba(255, 228, 240, .2); }
  input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: rgba(244, 179, 207, .55); box-shadow: 0 0 0 3px rgba(244, 179, 207, .12); outline: none;
  }
  input::placeholder, textarea::placeholder { color: var(--text-4); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
  /* 咸鱼 2026-11-02：深色底上原生复选框没勾时是「灰框套灰框」，全站自己画：空框 = 细边，勾上 = 主色底 + 白勾 */
  input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center;
    width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 1.5px solid var(--hairline-strong); border-radius: 5px;
    background: transparent; cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast);
  }
  input[type="checkbox"]::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border: solid var(--accent-ink); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform var(--t-fast); }
  input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
  input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
  input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
  label > span, .field > span { color: var(--text-3); }

  /* ── 表格 ── */
  .table-wrap { border-radius: var(--r-md); }
  table th { color: var(--text-3); font-weight: 600; background: transparent; }
  table td, table th { border-color: var(--hairline); }
  table tbody tr:hover td { background: rgba(255, 236, 245, .025); }

  /* ── 指标 ── */
  .card.metric { border-radius: var(--item-radius); background: var(--bg-surface); box-shadow: var(--shadow-card); }
  .card.metric label { color: var(--text-3); }
  .card.metric strong { font-family: var(--font-num); font-weight: 500; color: var(--text-1); letter-spacing: -.01em; }

  /* ── tabs：胶囊分段 ── */
  .tabs button { border-radius: var(--r-pill); color: var(--text-3); }
  .tabs button:hover { color: var(--text-1); }
  .tabs button.active, .tabs button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(244, 179, 207, .22); }

  /* ── 抽屉 / 确认框 / 图片弹层 ── */
  .drawer { background: var(--bg-surface); box-shadow: var(--shadow-float); border-color: var(--hairline); }
  .drawer header, .drawer .drawer-head { border-color: var(--hairline); }
  .drawer h2, .drawer header h3 { font-family: var(--font-serif); letter-spacing: .06em; }
  .ui-confirm-panel, .ui-confirm .panel { border-radius: var(--r-xl); background: var(--bg-surface); box-shadow: var(--shadow-float); }
  #backdrop { background: rgba(6, 3, 8, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

  /* ── toast：一枚浮起的胶囊；位置由 ui-redesign 决定（手机端在底栏之上） ── */
  #toast {
    border: 0; border-radius: var(--r-lg);
    background: var(--ink-700); color: var(--text-1);
    box-shadow: var(--shadow-float), inset 0 0 0 1px var(--hairline-strong);
  }

  /* ── 空状态 ── */
  .empty, .empty-state { color: var(--text-3); }

  /* ── 流水列表（最近充值等） ── */
  .ledger-item { border-color: var(--hairline); }
  .ledger-item strong { color: var(--text-1); font-weight: 600; }
  .ledger-item span { color: var(--text-4); }

  /* ── 派单卡：每单一张独立石墨卡，外层面板有底与 1px 线（回归脚本口径，业主 2026-09-22） ── */
  .dispatch-page .dispatch-card, .player-dispatches-page .dispatch-card {
    background-image: none; border: 0; border-radius: 8px;
    background-color: var(--bg-raised); box-shadow: none;
  }
  .dispatch-page .dispatch-grid, .player-dispatches-page .player-dispatch-groups {
    border: 1px solid var(--hairline); background-color: var(--bg-surface);
  }

  /* ── 键盘焦点 ── */
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}