/* ============================================================
   文件：static/css/responsive.css
   说明：响应式与移动端适配（含底部固定菜单）
   作者：星球软件CEWWW
   路径：/static/css/responsive.css
   ============================================================ */

/* ---------- 移动端底部固定菜单 ---------- */
.hk-tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--hk-tabbar-h);
    background: #fff;
    box-shadow: 0 -2px 12px rgba(62,39,35,.12);
    display: none;
    z-index: 999;
    border-top: 1px solid var(--hk-gray-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.hk-tabbar-inner {
    display: flex; height: 100%; max-width: 520px; margin: 0 auto;
}
.hk-tabbar a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; color: var(--hk-gray); font-size: 11px;
    transition: color .2s;
}
.hk-tabbar a i { font-size: 19px; }
.hk-tabbar a.active, .hk-tabbar a:hover { color: var(--hk-primary); }
.hk-tabbar a.active i { transform: translateY(-1px); }

/* ---------- 响应式：平板 (<=992px) ---------- */
@media (max-width: 992px) {
    :root { --hk-header-h: 56px; }
    .hk-footer-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9, .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
    .page-title { font-size: 1.5rem; }
    .page-title small { font-size: .9rem; display: block; margin-left: 0; margin-top: 4px; }
    .hk-page-hero h1 { font-size: 1.6rem; }
}

/* ---------- 响应式：移动端 (<=768px) ---------- */
@media (max-width: 768px) {
    body { padding-bottom: calc(var(--hk-tabbar-h) + 8px); font-size: 13px; }

    /* 显示底部固定菜单 */
    .hk-tabbar { display: block; }

    /* 顶部导航折叠为汉堡菜单 */
    .hk-header-inner { position: relative; }
    .hk-nav {
        position: fixed; top: var(--hk-header-h); left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 12px; max-height: 0; overflow: hidden;
        box-shadow: var(--hk-shadow); transition: max-height .3s ease; z-index: 999;
        border-top: 1px solid var(--hk-gray-border);
    }
    .hk-nav.open { max-height: 80vh; overflow-y: auto; }
    .hk-nav-item > a { padding: 12px 12px; border-radius: var(--hk-radius-sm); border-bottom: 1px solid var(--hk-gray-bg); }
    .hk-nav-toggle { display: inline-flex !important; }

    .hk-nav-actions .user-chip span { display: none; }
    .hk-nav-actions .user-chip { padding: 4px; }

    .row { margin: 0 -6px; }
    .row > * { padding: 0 6px; }
    .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9, .col-lg-3, .col-6 {
        flex: 0 0 100%; max-width: 100%;
    }
    .col-6 { flex: 0 0 50%; max-width: 50%; }

    .page-title { font-size: 1.3rem; }
    .filter-card { padding: 16px; }
    .filter-form .form-row > * { margin-bottom: 8px; }

    .hk-page-hero { padding: 24px 0; border-radius: 0 0 var(--hk-radius) var(--hk-radius); }
    .hk-page-hero h1 { font-size: 1.4rem; }

    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card .stat-num { font-size: 20px; }

    .hk-footer { padding: 26px 0 16px; margin-bottom: var(--hk-tabbar-h); }
    .hk-footer-cols { grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
    .hk-footer-bottom { font-size: 11px; }

    .hk-table { display: block; overflow-x: auto; white-space: nowrap; }
    .hk-tabs { padding-bottom: 2px; }
    .hk-tabs a { padding: 8px 12px; font-size: 13px; }

    .hk-pagination .page-item .page-link { min-width: 32px; height: 32px; font-size: 13px; }
    .card-body { padding: 14px; }
}

/* ---------- 响应式：小手机 (<=480px) ---------- */
@media (max-width: 480px) {
    .page-title { font-size: 1.1rem; }
    .page-title small { font-size: .8rem; }
    .filter-card { padding: 12px; }
    .filter-label { font-size: 12px; }
    .form-control { font-size: 13px; padding: 8px 10px; }
    .btn { padding: 8px 14px; font-size: 13px; }
    .btn-sm { padding: 5px 10px; font-size: 12px; }
    .hk-breadcrumb { padding: 8px 12px; font-size: 12px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px; gap: 10px; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: 17px; }
    .stat-card .stat-num { font-size: 18px; }
    .container { padding: 0 10px; }
    .hk-page-hero h1 { font-size: 1.2rem; }
}

/* ---------- 汉堡按钮（默认隐藏，移动端显示） ---------- */
.hk-nav-toggle {
    display: none;
    width: 40px; height: 40px;
    background: none; border: none; color: var(--hk-dark-brown);
    font-size: 20px; align-items: center; justify-content: center;
}

/* ---------- 打印 ---------- */
@media print {
    .hk-header, .hk-footer, .hk-tabbar, .hk-breadcrumb, .hk-pagination { display: none !important; }
    body { background: #fff; padding: 0; }
}