/* ==========================================================================
   collink · responsive.css —— 多断点适配规则
   断点: xs 320 / sm 480 / md 768 / lg 1024 / xl 1280
   本文件位于加载链末尾，可安全覆盖所有前置样式。
   ========================================================================== */

/* ── 1. 表格 · 移动端横向滚动优化 ───────────────────────── */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.table-wrap::-webkit-scrollbar { height: 5px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ── 2. 滚动条全局美化 ───────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 3. 加载态 Shimmer 动画 ──────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── 4. 数字滚动出现 ──────────────────────────────────────── */
@keyframes countup {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat .v { animation: countup .4s var(--ease-out) both; }

/* ── 5. 卡片淡入 ─────────────────────────────────────────── */
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .stat { animation: fadein .3s var(--ease-out) both; }
/* ── 6. 超小屏 (<480px) 紧凑模式 ───────────────────────── */
@media (max-width: 479px) {
  .grid.c2, .grid.c3 { grid-template-columns: 1fr; }
  .grid.c4            { grid-template-columns: 1fr 1fr; }
  .stat .v            { font-size: 18px; }
  .card, .stat        { padding: var(--sp-3); }
  .form-actions       { flex-direction: column; }
  .form-actions .btn  { width: 100%; }
  #topbar h2          { font-size: 13px; max-width: 120px;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── 7. 宽屏 (≥1280px) 内容宽度上限 ───────────────────── */
@media (min-width: 1280px) {
  #content { padding: var(--sp-6) var(--sp-8); }
  .grid.c2 { grid-template-columns: repeat(2, 1fr); }
  .grid.c3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── 8. 表格移动端：水平滚动提示 ───────────────────────── */
@media (max-width: 767px) {
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 24px; height: 100%; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-2));
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  /* 表格行转卡片：只对带 data-card 属性的表格启用，避免误伤 */
  table[data-card] thead        { display: none; }
  table[data-card] tr           { display: block; margin-bottom: var(--sp-3);
                                   border-radius: var(--r-sm); overflow: hidden; }
  table[data-card] td           { display: flex; justify-content: space-between;
                                   align-items: center; padding: var(--sp-2) var(--sp-3);
                                   white-space: normal; }
  table[data-card] td::before   { content: attr(data-label);
                                   font-weight: 600; color: var(--fg-2);
                                   font-size: 11.5px; flex: none; margin-right: var(--sp-3); }
  table[data-card] tr:last-child td { border-bottom: none; }

  /* 仪表盘的平台概览在手机上改为键值卡片，避免六列表格被裁切。 */
  #dash-plat { min-width: 0; }
}

/* ── 9. 打印样式 ─────────────────────────────────────────── */
@media print {
  #sidebar, #topbar, #bottom-nav,
  #sidebar-scrim, #toast-wrap,
  .icon-btn, .color-toggle,
  .form-actions { display: none !important; }
  #main  { margin-left: 0 !important; }
  body   { background: #fff; color: #000; }
  .card  { box-shadow: none; border: 1px solid #ddd; }
}