/* =====================================================
 * 移动端响应式适配
 * 针对窄屏（手机/平板）优化核心页面的整体布局：
 * 隐藏对窄屏不重要的装饰性元素，放大图表与内容区域，
 * 让侧边菜单、右侧自选股在小屏下让位于内容主体。
 * ===================================================== */

@media (max-width: 900px) {

    /* ========== 页首：隐藏冗余信息，让标题区紧凑 ========== */
    /* 活跃度指标说明文字块 */
    #core-header-intro {
        display: none !important;
    }

    /* 用户名 + 角色文字 */
    #core-header-user-info {
        display: none !important;
    }

    /* 用户头像（手机端简化，仅保留功能图标） */
    .ant-avatar {
        display: none !important;
    }

    /* 全屏切换按钮（手机端全屏意义不大，隐藏） */
    #core-full-screen-toggle-button {
        display: none !important;
    }

    /* 页面搜索框（含其快捷键提示） */
    #core-page-search {
        display: none !important;
    }

    /* 页首竖分隔符 */
    #core-header-divider {
        display: none !important;
    }

    /* 页首 logo 区：不再固定 350px，随内容自适应 */
    #core-header-side {
        width: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-right: none !important;
    }

    /* 页首标题字号缩小 */
    #core-header-title {
        font-size: 16px !important;
    }
    #core-header-title span,
    #core-header-title div {
        font-size: 16px !important;
    }

    /* 隐藏版本号文字 */
    #core-header-title .global-help-text {
        display: none !important;
    }

    /* 页首 logo 图片缩小 */
    #core-header-side img {
        height: 26px !important;
        width: auto !important;
    }

    /* 功能图标区：收紧间距 */
    #core-header-side + .ant-col .ant-space {
        gap: 2px !important;
    }

    /* ========== 主体：隐藏侧边菜单与右侧自选股，内容区全屏 ========== */
    /* 左侧侧边菜单及页首折叠按钮（手机端侧边栏隐藏，折叠按钮随之隐藏） */
    #core-side-menu-affix {
        display: none !important;
    }
    #core-side-menu-collapse-button {
        display: none !important;
    }

    /* 右侧自选股栏及其折叠标签 */
    #right-sidebar-col {
        display: none !important;
    }
    #watchlist-collapse-tab-wrapper {
        display: none !important;
    }
    #right-sidebar-wrapper {
        display: none !important;
    }

    /* 内容区域：缩小内边距，让图表获得更大显示空间 */
    #core-container {
        padding: 12px 4px !important;
        overflow-y: auto !important;
    }

    /* ========== 通用：表格在窄屏下横向滚动，图表自适应 ========== */
    .ant-table-wrapper {
        overflow-x: auto !important;
    }
    .ant-table {
        min-width: 640px !important;
    }

    /* 固定宽度下拉/输入框在窄屏下自适应容器宽度 */
    .ant-select,
    .ant-picker,
    .ant-input-affix-wrapper,
    .ant-input,
    .ant-input-number,
    .ant-input-number-affix-wrapper {
        max-width: 100% !important;
    }

    /* 内容区内横排操作栏在窄屏下自动换行，避免横向溢出 */
    #core-container .ant-space-horizontal {
        flex-wrap: wrap !important;
    }

    /* 图表容器高度自适应（替代固定 100vh 高度） */
    [id$="-chart-container"],
    #panorama-chart-container,
    #chart-container,
    #history-chart-container {
        height: 55vh !important;
    }
}

/* ========== 更窄的屏幕（手机 480px 以下）进一步收紧 ========== */
@media (max-width: 480px) {

    /* 页首标题继续缩小 */
    #core-header-title {
        font-size: 14px !important;
    }
    #core-header-title span,
    #core-header-title div {
        font-size: 14px !important;
    }

    /* 内容区域内边距进一步收紧 */
    #core-container {
        padding: 6px 0 !important;
    }

    /* 页面面包屑字号缩小 */
    .ant-breadcrumb {
        font-size: 12px !important;
    }
}

/* ========== 登录页：手机端性能优化，加速输入框显示与响应 ========== */
@media (max-width: 900px) {

    /* 禁用昂贵的背景模糊（blur 32px 在手机 GPU 上开销极大，
       会拖慢表单层渲染，导致账户/密码输入框迟迟无法流畅显示） */
    .login-form-center-centered {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 禁用渐变背景的持续位移动画与 will-change，
       减少手机 GPU 持续占用，让表单层优先渲染 */
    .login-gradient-content-bg {
        animation: none !important;
        will-change: auto !important;
        transform: none !important;
    }
}