/* ============================================================
   移动端全局增强样式 - 趣法律股票维权平台
   仅在小屏 (<=768px) 生效，不影响 PC 端布局。
   通过 /static/css/mobile.css 引入，全站统一生效。
   ============================================================ */

/* 0. 根级防横向溢出 */
html, body { max-width: 100%; overflow-x: hidden; }

/* 1. 媒体自适应 */
img, video, iframe { max-width: 100%; height: auto; }

/* 2. 表格：移动端横向滚动兜底，避免撑破布局 */
table { width: 100%; }
@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table td, .table th { white-space: nowrap; }
}

/* 3. 表单控件：16px 字号防止 iOS Safari 自动放大；主操作按钮小屏全宽 */
@media (max-width: 768px) {
    input, select, textarea, button,
    .form-control, .form-select, .input-group-text {
        font-size: 16px !important;
    }
    .form-control, .form-select {
        height: auto;
        padding: 11px 12px;
    }
    /* 表单内的主提交按钮、明确的全宽类：小屏占满 */
    form .btn-primary,
    .btn-block-mobile,
    .modal-footer .btn-primary,
    .sticky-bottom .btn {
        width: 100%;
    }
    /* 并排按钮组在小屏平分 */
    .d-flex.gap-2 > .btn,
    .d-flex.gap-3 > .btn { flex: 1 1 auto; }
}

/* 4. 按钮最小触控区 (44px) */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* 5. 容器与间距收紧 */
@media (max-width: 768px) {
    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
    .card { border-radius: 10px; }
    .card-body { padding: 14px; }
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    p, li, td, th, .small, .text-muted { font-size: 0.9rem; line-height: 1.6; }
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-4 { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mt-4 { margin-top: 1rem !important; }
}

/* 6. 弹窗近全屏 */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
    .modal-content { border-radius: 12px; }
    .modal-body { padding: 16px; }
}

/* 7. 导航折叠面板样式（移动端展开态） */
@media (max-width: 992px) {
    .navbar-collapse {
        background: var(--ql-black, #1A1A1A);
        margin-top: 8px;
        padding: 10px 14px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .navbar-collapse .nav-link-ql { padding: 10px 6px; }
}

/* 8. 通知/用户下拉面板在移动端全宽置顶 */
@media (max-width: 768px) {
    .notification-panel.dropdown-menu,
    .user-dropdown .dropdown-menu-ql {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 0 14px 14px;
        margin: 0;
        max-height: 75vh;
        overflow-y: auto;
    }
}

/* 9. 隐藏桌面专用装饰（按需，类名约定 .desktop-only） */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
}

/* 10. 底部固定操作栏（移动端主操作吸底，用法：<div class="mobile-fab">） */
@media (max-width: 768px) {
    .mobile-fab {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
        z-index: 1030;
        display: flex;
        gap: 10px;
    }
    .mobile-fab .btn { flex: 1; }
    /* 有吸底栏时给底部留白 */
    body.has-mobile-fab { padding-bottom: 76px; }
}

/* 11. 导航与通用组件移动端微调（通用，全站受益） */
@media (max-width: 768px) {
    .navbar-ql { padding: 8px 0; }
    .navbar-brand-ql { font-size: 1.2rem; }
    .navbar-brand-ql .logo-icon { width: 34px; height: 34px; }
    /* 下拉菜单文字与触控区 */
    .dropdown-menu .dropdown-item { padding: 11px 16px; font-size: 0.95rem; }
    /* 列表组 */
    .list-group-item { padding: 12px 14px; font-size: 0.92rem; }
    /* 区块标题 */
    .section-title { font-size: 1.5rem; }
    .section-desc { font-size: 0.95rem; }
    /* 小按钮也保持可点 */
    .btn-sm { min-height: 38px; }
    /* 提交类按钮小屏占满且触控友好（非 Bootstrap .btn 类，需单独处理） */
    .btn-submit { width: 100%; min-height: 48px; }
}

/* 12. 移动端频道快捷条：替代纯汉堡菜单，让小白用户直达各频道 */
.mobile-channel-bar {
    background: var(--ql-black, #1A1A1A);
    border-bottom: 1px solid rgba(255,140,0,0.22);
    overflow: hidden;
}
.mobile-channel-scroll {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mobile-channel-scroll::-webkit-scrollbar { display: none; }
.mc-link {
    flex: 0 0 auto;
    white-space: nowrap;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    transition: all 0.2s;
}
.mc-link:hover, .mc-link:active, .mc-link.active {
    color: #fff;
    background: var(--ql-orange, #FF8C00);
    border-color: var(--ql-orange, #FF8C00);
}

/* 汉堡按钮增加「菜单」文字，提升可发现性（移动端） */
@media (max-width: 992px) {
    /* 深色导航栏下强制白色，避免黑底黑字 */
    .navbar-toggler {
        color: #fff !important;
    }
    /* Bootstrap 5 的汉堡图标是内嵌黑色 SVG，需强制换成白色 */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    .navbar-toggler .toggler-label {
        color: #fff !important;
        font-size: 0.82rem;
        margin-left: 6px;
        font-weight: 500;
    }
}
@media (min-width: 993px) {
    .navbar-toggler .toggler-label { display: none; }
}