/*
 * modbus_style_mobile.css
 * 乙客户手机端适配 — 全部规则包在 media query 内，PC 端零影响
 * 覆盖顺序：本文件在 modbus_style.css 之后引入，同选择器优先级更高
 */

/* =====================================================
   底部导航栏基础（PC 端 display:none，手机端才显示）
   ===================================================== */
.mobile-bottom-nav {
    display: none;
}

/* =====================================================
   侧边栏可滚动（全尺寸生效，修复导航项被 user-info 遮挡）
   ===================================================== */
.sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* user-info 回归正常流，sidebar-nav flex:1 自动将其推至底部 */
.user-info {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0;
}

/* =====================================================
   设备卡片网格：中等屏幕（平板/窄桌面）自适应列数
   防止 repeat(4,1fr) 在窄容器下造成内容溢出
   ===================================================== */
@media (max-width: 1199px) {
    .slaves-grid-scada {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .slaves-grid-scada {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap: 8px;
    }
}

/* =====================================================
   SCADA 横屏提示（默认隐藏）
   ===================================================== */
.scada-rotate-tip {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg, #060d1f);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--txt, #cce8ff);
}

.scada-rotate-tip i {
    font-size: 48px;
    color: var(--blue, #00c8ff);
    animation: rotate-hint 2s ease-in-out infinite;
}

.scada-rotate-tip p {
    font-size: 16px;
    color: var(--txt2, #6a9cc0);
}

@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50%       { transform: rotate(90deg); }
}

/* =====================================================
   手机端通用（≤ 768px）
   ===================================================== */
@media (max-width: 768px) {

    /* ── 侧边栏：完全隐藏 ── */
    .sidebar {
        display: none !important;
    }

    /* ── 主内容区：全宽，底部留出导航栏高度 ── */
    .main-content {
        margin-left: 0 !important;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* ── 顶部导航栏：精简 ── */
    .top-navbar {
        padding: 0 12px;
        height: 48px;
    }

    .top-navbar h1,
    #page-title {
        font-size: 15px;
    }

    /* 隐藏设备统计数字、分隔线、日期行 */
    .navbar-stats,
    .navbar-divider,
    .navbar-time .time-date {
        display: none !important;
    }

    .navbar-time .time-main {
        font-size: 14px;
    }

    /* ── 内容区内边距 ── */
    .content-wrapper {
        padding: 10px;
    }

    /* ── 页面标题 ── */
    .page-title h2 {
        font-size: 16px;
    }

    .page-description {
        font-size: 12px;
    }

    /* ── 统计卡片：2列 ── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .stat-card {
        padding: 12px 14px;
    }

    .stat-value {
        font-size: 22px;
    }

    /* ── 图表行：单列堆叠 ── */
    .charts-row {
        flex-direction: column;
        height: auto;
    }

    /* !important 覆盖 chart-container 上的内联 style="flex:2"
       内联 flex:2 设置 flex-basis:0%，导致列方向下容器高度坍缩为0，ECharts 无法渲染 */
    .chart-container:first-child,
    .chart-container:last-child {
        flex: none !important;
        height: auto;
        min-height: 280px;
    }

    /* 覆盖内联 style="height:300px"，让图表适配移动端容器 */
    #device-chart {
        height: 220px !important;
    }

    /* ── 控制面板：允许换行 ── */
    .control-panel {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    /* ── 实时数据容器 ── */
    .realtime-data-container {
        padding: 12px;
    }

    /* ── 所有数据表格横向可滚动 ── */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #register-table,
    #history-table,
    #alarm-table,
    #fault-table,
    .data-table {
        min-width: 560px;
    }

    /* ── 过滤行：竖向堆叠 ── */
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-actions {
        justify-content: flex-end;
    }

    /* ── 详细视图：col-md-8 / col-md-4 改为上下堆叠 ── */
    .col-md-8,
    .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    #detail-view-container .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #detail-data-table {
        min-width: 480px;
    }

    .advanced-control-card {
        margin-top: 12px;
    }

    /* ── 弹窗：底部抽屉式 ── */
    .modal-overlay,
    .modal-backdrop {
        align-items: flex-end;
    }

    .modal-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* ── 按钮最小触控高度 ── */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        min-height: 38px;
    }

    /* ── 底部导航栏 ── */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg2);
        border-top: 1px solid var(--border);
        z-index: 1100;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        list-style: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .mobile-bottom-nav .nav-item {
        flex: 1;
        margin: 0;
    }

    .mobile-bottom-nav .nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        padding: 4px 0;
        height: 56px;
        border-left: none;
        font-size: 10px;
        color: var(--txt3);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav .nav-link:hover,
    .mobile-bottom-nav .nav-item.active .nav-link {
        background: transparent;
        color: var(--blue);
    }

    .mobile-bottom-nav .nav-icon {
        font-size: 16px;
        width: auto;
    }

    .mobile-bottom-nav .nav-text {
        font-size: 9px;
        line-height: 1;
    }

    /* 外链图标（SCADA 跳转）在底部导航里不显示 */
    .mobile-bottom-nav .fa-external-link-alt {
        display: none !important;
    }
}

/* =====================================================
   SCADA 平面图 — 竖屏：隐藏内容，显示旋转提示
   ===================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .scada-rotate-tip {
        display: flex !important;
    }

    .hdr,
    .main {
        visibility: hidden;
    }
}

/* =====================================================
   SCADA 平面图 — 横屏手机：精简 header，隐藏右侧面板
   ===================================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {

    /* Header 压缩 */
    .hdr {
        height: 38px;
        padding: 0 10px;
    }

    .hdr-logo .title {
        font-size: 14px;
    }

    .hdr-logo .sub,
    .hdr-divider,
    .hdr-stats {
        display: none !important;
    }

    .hdr-time .time {
        font-size: 16px;
    }

    .hdr-time .date {
        display: none;
    }

    /* 右侧统计面板隐藏，平面图全宽 */
    .side {
        display: none !important;
    }

    /* SCADA / 光伏：缩小设备卡片，减少叠压 */
    .dev-unit {
        width: 82px !important;
        padding: 5px 6px !important;
    }

    .du-name {
        font-size: 10px !important;
        max-width: 58px !important;
    }

    .du-temp {
        font-size: 17px !important;
    }

    .du-set,
    .du-tags {
        font-size: 9px !important;
    }
}