/* ==========================================================================
   响应式排版：字号随浏览器宽度自适应（全站统一）
   --------------------------------------------------------------------------
   根字号使用 clamp() 流体计算，基准用 rem（尊重用户在浏览器中设置的字体大小）：
     >=768px（平板/桌面）：16px   —— 与原有一致，宽屏观感不变
     576px（大屏手机）   ：约 14.5px
     375px（主流手机）   ：约 12.9px
     320px（小屏手机）   ：12.5px  —— 下限，保证中文可读
   下方再针对标题、表格、按钮、代码块做小屏专属压缩。
   ========================================================================== */
html {
    font-size: clamp(0.78rem, 0.625rem + 0.78vw, 1rem);
}

body {
    background-color: #f8f9fa;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cf2;
}

.navbar-brand {
    font-weight: bold;
}

code {
    background: #f1f1f1;
    padding: 2px 4px;
    border-radius: 3px;
    /* 长 ApiKey 等超长内容在小屏自动换行，避免撑破容器 */
    word-break: break-all;
}

pre {
    font-size: 0.85rem;
    /* 示例代码在小屏自动折行，避免出现横向滚动 */
    white-space: pre-wrap;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   小屏（<576px，手机竖屏）：压缩标题与控件，让一屏显示更多内容
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* 标题：Bootstrap 默认 h1/h2 在手机上过大（2.5rem / 2rem） */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4, h5, h6 { font-size: 1.1rem; }

    .navbar-brand { font-size: 1.15rem; }
    .navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; }

    .lead { font-size: 1.05rem; }

    /* 首页大按钮在手机上过宽，适当收窄 */
    .btn-lg { font-size: 1.05rem; padding: 0.4rem 0.75rem; }
    /* 筛选按钮更紧凑，一行可容纳更多省份 */
    .btn-sm { padding: 0.2rem 0.45rem; }

    .card-body { padding: 0.75rem; }
}

/* 超小屏（<400px）标题再降一档 */
@media (max-width: 399.98px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
}

/* 数据表格（平板及以下）：缩小字号，减少横向滚动 */
@media (max-width: 767.98px) {
    .table { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   数据展示页（/web、/other）的表格与筛选框
   要求：字号 12px、行间距加大、文字用柔和深灰而非纯黑，降低长时间查看的视觉疲劳
   -------------------------------------------------------------------------- */

/* 柔和的正文色（非纯黑），对比度适中 */
.filter-card,
.data-table {
    color: #495057;
}

/* 筛选框 */
.filter-card {
    font-size: 12px;
    line-height: 2;
}

.filter-card .text-muted {
    color: #6c757d !important;
}

/* 筛选按钮：字号统一 12px，加内边距让行距更舒展 */
.filter-card .btn {
    font-size: 12px;
    line-height: 1.7;
    padding: 0.3em 0.7em;
}

/* 数据表格：12px 字号 + 1.9 倍行高 */
.data-table {
    font-size: 12px;
    line-height: 1.9;
}

/* 单元格内边距用 em，跟随 12px 字号缩放，保证行与行之间有足够间距 */
.data-table > :not(caption) > * > * {
    padding: 0.5em 0.7em;
}

/* 表头略浅、加粗区分，同样不使用纯黑 */
.data-table thead th {
    color: #5a6169;
    font-weight: 600;
    white-space: nowrap;
}

/* 序号列使用更浅的颜色，弱化视觉干扰
   （Bootstrap 的 .text-muted 带 !important，此处需同样声明才能覆盖） */
.data-table td.text-muted {
    color: #8a9096 !important;
}