/* 基础样式：政府专业统一风格 */
:root {
  --brand: #0d47a1;
  --brand-2: #1565c0;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #606a78;
  --danger: #b91c1c;
  --border: #e5e7eb;
  --focus: rgba(21, 101, 192, 0.25);
  --success: #2e7d32;
  --warning: #ed6c02;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Microsoft YaHei', sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }

.app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 100; }
.app-header h1 { font-size: 18px; margin: 0; letter-spacing: 0.5px; }
.app-header nav { display: flex; gap: 8px; }

.container { max-width: 1080px; margin: 20px auto; padding: 0 16px; }
.container.narrow { max-width: 720px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.06); transform: translateY(-1px); }
.card + .card { margin-top: 12px; }
.card-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

.form-grid label { display: block; margin-bottom: 12px; }

/* 列表卡片布局 */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.card-item .card-content { display: grid; gap: 6px; }
.card-item .card-row { display: flex; gap: 8px; font-size: 14px; align-items: baseline; }
.card-item .card-row .label { color: var(--muted); min-width: 96px; }
.card-item .card-actions { margin-top: 12px; display: flex; gap: 8px; }

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

/* 登录页优化：居中显示 */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; }
.auth-body .app-header { position: static; }
.auth-body main.container.narrow { flex: 1; display: flex; align-items: center; justify-content: center; }
.auth-body .container.narrow { margin-top: 0; }

/* 显式取消列表页分页固定/粘性定位 */
.list-footer { position: sticky; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; padding: 12px; z-index: 100; }

/* 响应式优化 */
@media (max-width: 1024px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  /* H5 移动端优化（此前已添加）：在 768px 以下提升可触控性 */
  @media (max-width: 768px) {
    /* 表单与容器内边距更友好 */
    .container { padding-left: 12px; padding-right: 12px; }
    .card { border-radius: 10px; }
  
    /* 统一输入字体为 16px，避免 iOS 缩放 */
    input, select, textarea { font-size: 16px; }
    .form-select, .form-control { padding: 10px 12px; }
    .btn { font-size: 16px; padding: 10px 12px; }
  
    /* 表单栅格更紧凑 */
    .form-grid { gap: 8px; }
  
    /* 列表卡片紧凑尺寸（通用） */
    .card-item .card-body { padding: 12px; }
    .card-item .card-content { gap: 4px; }
    .card-item .btn.btn-sm { padding: 6px 10px; font-size: 14px; }
    
    @media (max-width: 768px) {
      /* 手机端进一步收紧 */
      .card-item .card-body { padding: 10px; }
      .card-item .card-row span { font-size: 14px; }
      .card-item .btn.btn-sm { padding: 6px 10px; font-size: 14px; }
    }
  
    .card-item .card-row .label { min-width: 80px; }
  
    /* 筛选区整体更紧凑 */
    .filters { gap: 8px; }
  }

  /* 固定底部提交区（已用于 form.html） */
  .mobile-sticky-submit {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px;
    z-index: 100;
  }
  .mobile-sticky-submit .btn { width: 100%; }
  .grid-2 { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr; }
  .app-header { padding: 12px 16px; }
  .container { padding: 0 12px; }
  .card-grid { grid-template-columns: 1fr; }
  /* 列表页底部分页在手机端的内边距略小 */
  .list-footer { padding: 10px; }
}

/* 本地 SVG 图标统一样式 */
.bi-icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: -.125em;
  margin-right: .25rem;
  filter: var(--bi-filter, none);
}

/* 导航按钮强化样式 */
.navbar .btn-add { font-weight: 600; }
.navbar .btn-add:hover { box-shadow: 0 6px 14px rgba(21, 101, 192, 0.28); }
.navbar .btn-logout { color: var(--brand); border-color: transparent; }
.navbar .btn-logout:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.navbar .btn .bi-icon { width: 1.1rem; height: 1.1rem; }

/* 统一卡片表头风格 */
.card .card-header { background: #f8fafc; border-bottom: 1px solid var(--border); }
.card .card-header .btn { border-color: var(--border); }

/* 登录页渐变背景 */
.auth-gradient {
  background-image:
    radial-gradient(1200px 600px at 15% 15%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(800px 400px at 80% 20%, rgba(255,255,255,0.12), transparent 45%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, #4dabf7 100%);
  background-attachment: fixed;
}
/* 列表卡片右上角操作区域优化 */
.card-item .card-actions-top { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 768px) {
  .card-item .card-actions-top .btn { padding: 6px 10px; font-size: 14px; }
}

/* 列表页底部控件布局为三列，使页码信息居中 */
.list-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.list-footer .page-size { justify-self: start; }
.list-footer .footer-page-info { justify-self: center; }
.list-footer .footer-pagination { justify-self: end; }