/* ============================================================
   多终端自适应样式 (responsive)
   断点约定: 1100px(顶部导航汉堡) / 992px(表格滚动) / 768px(布局堆叠) / 480px(手机细化)
   置于 style.css / admin.css / role-nav.css 之后加载
   ============================================================ */

/* ---------- 1. 顶部导航：移动端始终展示，多行自动换行 (≤1100px) ---------- */
/* 汉堡按钮已废弃：用户要求导航默认直接可见，不再藏到点击后才出现 */
.topbar-toggle { display: none !important; }

@media (max-width: 1100px) {
    /* 顶栏允许多行（高度自适应），整体仍维持 flex 横向布局 */
    .topbar-inner {
        height: auto;
        min-height: 64px;
        padding: 12px 0 12px;
        flex-wrap: wrap;
        row-gap: 6px;
        /* min-width:0 + max-width:100% 让顶栏跟容器宽度收缩，链接自然换行不被右侧截断 */
        min-width: 0;
        max-width: 100%;
        justify-content: flex-start;
    }
    /* 手机版 logo 独占整行 + 内部水平居中（红方块 + 站名作为一组居中显示），并放大更醒目 */
    .logo {
        flex: 0 0 100%;
        justify-content: center;
        font-size: 32px;          /* 比 PC 40px 略小，手机端仍醒目 */
        letter-spacing: 1px;
        margin-top: 10px;         /* 控制上方留白，使 logo 与顶栏顶部距离适中 */
    }
    /* 导航链接整体居中、留白充足、触摸友好（≥40px 高），与上方居中 logo 呼应更协调；
       所有链接默认直接可见（用户要求，不用汉堡） */
    .nav-right {
        flex-wrap: wrap;
        gap: 6px 2px;             /* 行间距 6px / 链接间距 2px，极紧凑 */
        justify-content: center;
        width: 100%;
        /* 与 logo 之间用细分隔线划出独立「链接带」，结构更清晰 */
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 6px;
        margin-top: 0;
        min-width: 0;
        max-width: 100%;
    }
    .nav-right .nav-link {
        padding: 8px 6px;
        font-size: 22px;          /* 放大：原 13px → 22px，与正文协调 */
        line-height: 1.2;
        min-width: 0;
    }
    /* 积分 pill 在手机端取消背景/圆角，改为纯文字 inline，跟在「退出」后面；放大至 14px */
    .nav-credits {
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-left: 8px;
        font-size: 20px;
        font-weight: 600;
        color: #fbbf24;
        align-self: center;
    }
}
/* 极窄屏 ≤480px：在放大基础上适度回缩，保证不溢出 */
@media (max-width: 480px) {
    .topbar-inner { row-gap: 6px; padding: 12px 0 12px; }
    .logo { font-size: 30px; }
    .nav-right { gap: 5px 2px; padding-top: 6px; }
    .nav-right .nav-link { padding: 8px 6px; font-size: 21px; }
    .nav-credits { font-size: 19px; margin-left: 6px; }
}
/* 极窄屏 ≤414px（iPhone 标准）：再次微调，窄屏下也能完整显示 */
@media (max-width: 414px) {
    .nav-right { gap: 4px 2px; }
    .nav-right .nav-link { padding: 7px 6px; font-size: 20px; }
    .nav-credits { font-size: 18px; margin-left: 4px; }
}

/* ---------- 2. 表格横向滚动兜底 (≤992px) ---------- */
@media (max-width: 992px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius);
    }
    .table th { white-space: nowrap; }
    .table td.ops { min-width: 300px; }
}

/* ---------- 3. 首页幻灯片自适应 ---------- */
@media (max-width: 768px) {
    .home-slider .slide { height: 240px; }
    .home-slider .slide-caption { padding: 18px 20px; }
    .home-slider .slide-caption h2 { font-size: 20px; margin-bottom: 6px; }
    .home-slider .slide-caption p { font-size: 13px; margin-bottom: 10px; }
    .home-slider .slider-arrow { width: 34px; height: 34px; font-size: 15px; }
    .home-slider .slide-actions { flex-wrap: wrap; }
    .home-slider .slide-actions .btn { padding: 6px 14px; font-size: 13px; }
}
@media (max-width: 480px) {
    .home-slider .slide { height: 190px; }
    .home-slider .slide-caption { padding: 14px 16px; }
    .home-slider .slide-caption h2 { font-size: 17px; }
    .home-slider .slide-caption p { font-size: 12px; margin-bottom: 8px; }
    .home-slider .slide-tag { margin-bottom: 6px; padding: 2px 8px; font-size: 11px; }
    .home-slider .slider-arrow.prev { left: 8px; }
    .home-slider .slider-arrow.next { right: 8px; }
}

/* ---------- 4. 布局 / 容器 / 字号 ---------- */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .main-content { padding: 16px 0; }
    .hero-content h1 { font-size: 26px; }
    .hero-subtitle { font-size: 15px; }
    .section-header h2 { font-size: 18px; }
    .page-header h1, .role-header h1 { font-size: 20px; }
    .panel-header { flex-wrap: wrap; padding: 14px 16px; }
    .panel-body { padding: 16px; }
    .auth-box { padding: 28px 22px; }
}
@media (max-width: 480px) {
    .container { padding: 0 12px; }
    .main-content { padding: 12px 0; }
    .auth-box { padding: 22px 16px; }
    .card-body { padding: 10px 12px; }
    .stat-card { padding: 14px; gap: 12px; }
    .stat-info .stat-value { font-size: 18px; }
    .big-price { font-size: 24px; }
}

/* ---------- 5. 表单 / 筛选 ---------- */
@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 0; }
    .form-inline .form-group { flex: 1 1 100%; }
    .form-wide { max-width: 100%; }
    .filter-form, .filter-bar { flex-wrap: wrap; }
    .filter-input, .filter-select { flex: 1 1 130px; min-width: 100px; }
}

/* ---------- 6. 卡片 / 面板移动端堆叠 ---------- */
@media (max-width: 768px) {
    .demand-card { flex-direction: column; gap: 12px; }
    .demand-side { text-align: left; min-width: 0; }
    .model-header { flex-direction: column; gap: 12px; align-items: center; text-align: center; }
    .invitation-header { flex-wrap: wrap; gap: 8px; }
    .crowd-stats { grid-template-columns: repeat(2, 1fr); }
    .gallery-thumbs .thumb { width: 64px; height: 48px; }
    .table-detail td:first-child { width: 96px; }
    .qr-item img { max-width: 160px; }
    .pagination { flex-wrap: wrap; }
    .page-link { padding: 8px 12px; }
    .btn-sm { padding: 6px 12px; }
}

/* ---------- 7. 角色中心侧边栏：移动端两列网格 ---------- */
@media (max-width: 768px) {
    .role-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .role-nav > a { flex: 1 1 calc(50% - 4px); padding: 10px 12px; text-align: center; }
    .role-nav-group { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .role-nav-group a { flex: 1 1 calc(50% - 4px); padding: 10px 12px; text-align: center; }
    .role-user-card { padding: 16px; }
}

/* ---------- 8. 管理后台移动端细化 (≤768px) ---------- */
@media (max-width: 768px) {
    .admin-content { padding: 14px 12px; }
    .admin-panel .panel-body { padding: 14px 12px; }
    .admin-topbar { padding: 0 12px; }
    .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .admin-tabs a { white-space: nowrap; }
}
@media (max-width: 480px) {
    .admin-breadcrumb { font-size: 14px; }
    .admin-user { display: none; }
}