/* 页面布局。颜色、尺寸一律用 Tide UI 令牌。 */

.mono { font-family: var(--ui-font-mono); font-size: var(--ui-text-sm); letter-spacing: .02em; }
[hidden] { display: none !important; }

/* 登录 */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--ui-space-4); }
.login .card { width: 100%; max-width: 400px; }
.login .card-body { padding: var(--ui-space-8); }
.login-art { border-radius: var(--ui-radius-md); padding: var(--ui-space-4); display: grid; place-content: center; }
.login-art svg { width: 140px; }

/* 骨架 */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--ui-space-6);
  padding: var(--ui-space-6) var(--ui-space-4);
}
.brand { display: flex; align-items: center; gap: var(--ui-space-2); font-weight: 700; font-size: var(--ui-text-lg); color: var(--ui-text); text-decoration: none; padding-inline: var(--ui-space-2); }
.sidenav .count { margin-left: auto; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--ui-space-2); }

.main { padding: var(--ui-space-6) clamp(16px, 3vw, 40px) var(--ui-space-12); min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ui-space-4); margin-bottom: var(--ui-space-6); flex-wrap: wrap; }

/* 统计 */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ui-space-4); }
.stats-row .card-body { padding: var(--ui-space-5); }

/* 图表 */
.chart { position: relative; height: 200px; margin-top: var(--ui-space-5); border-radius: var(--ui-radius-sm); }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-x { display: flex; justify-content: space-between; margin-top: var(--ui-space-2); }
.chart-y { font: 500 11px var(--ui-font-mono); fill: var(--ui-text-3); letter-spacing: .04em; }
.legend { display: flex; gap: var(--ui-space-4); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 1.25px solid var(--ui-text); }
.legend i.lg-dash { border-top: 1px dashed var(--ui-text-3); }

/* 列表 */
.toolbar { display: flex; gap: var(--ui-space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--ui-space-4); }
.toolbar .input { max-width: 360px; }
.table-flat { box-shadow: none; border-radius: 0; }
.table td { vertical-align: middle; }
.note-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by { font-size: var(--ui-text-xs); color: var(--ui-text-3); margin-top: 2px; }
.unset { color: var(--ui-text-3); }
td.actions { white-space: nowrap; text-align: right; }
td.actions .dropdown { display: inline-block; vertical-align: middle; margin-left: var(--ui-space-1); }
td.actions .menu { min-width: 140px; }
.card .empty { padding-block: var(--ui-space-12); }
.card-footer .pagination { margin-left: auto; }

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); padding-bottom: var(--ui-space-2); }
  .sidenav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin-top: 0; flex-direction: row; margin-left: auto; }
  .side-foot .btn-block { width: auto; }
  .main { padding-top: var(--ui-space-3); }
}