@keyframes dt-dot-pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 152, 0, 0);
    }
}

/* ===== 农业数字孪生大屏 Dashboard ===== */

/* 1. 隐藏 MudBlazor 所有布局元素 */
body.agri-dashboard-active .mud-appbar,
body.agri-dashboard-active > .mud-layout > .mud-drawer,
body.agri-dashboard-active .mud-drawer-open,
body.agri-dashboard-active .mud-drawer--open,
body.agri-dashboard-active .mud-overlay,
body.agri-dashboard-active .mud-drawer-overlay {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
}

/* 2. 重置 main content 的 margin 和 stacking context */
body.agri-dashboard-active .mud-main-content {
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    /* 关键：消除 transform 等创建的 containing block */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

/* 3. 同样处理 mud-layout */
body.agri-dashboard-active .mud-layout {
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
}

/* 4. body/html 本身 */
html.agri-dashboard-active,
body.agri-dashboard-active {
    overflow: hidden !important;
    height: 100% !important;
}

.agri-dash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; background: #0b1437; color: #ECEFF1; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; overflow: hidden; }

.agri-dash-nav { height: 6vh; min-height: 48px; max-height: 64px; background: linear-gradient(180deg, rgba(10,18,42,0.95), rgba(11,20,55,0.9)); border-bottom: 1px solid rgba(0,229,255,0.12); display: flex; align-items: center; padding: 0 20px; flex-shrink: 0; backdrop-filter: blur(8px); }
.agri-dash-nav-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.agri-dash-nav-logo { width: 32px; height: 32px; background: linear-gradient(135deg, #4CAF50, #00E5FF); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
.agri-dash-nav-title { font-size: 17px; font-weight: 600; color: #ECEFF1; letter-spacing: 1px; white-space: nowrap; }
.agri-dash-nav-center { flex: 1; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.agri-dash-tab { padding: 8px 22px; border-radius: 4px; font-size: 13px; color: #78909C; cursor: pointer; transition: all 0.25s; background: transparent; border: 1px solid transparent; user-select: none; white-space: nowrap; }
.agri-dash-tab:hover { color: #B0BEC5; background: rgba(0,229,255,0.06); }
.agri-dash-tab--active { color: #00E5FF; background: rgba(0,229,255,0.1); border-color: rgba(0,229,255,0.25); }
.agri-dash-nav-right { display: flex; align-items: center; gap: 16px; min-width: 0; justify-content: flex-end; font-size: 13px; color: #78909C; flex: 1; }
.agri-dash-time { font-size: 22px; font-weight: 300; color: #ECEFF1; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agri-dash-weather { display: flex; align-items: center; gap: 6px; }
.agri-dash-weather-temp { color: #FFA726; font-weight: 500; }
.agri-dash-back-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #78909C; cursor: pointer; transition: all 0.2s; font-size: 18px; margin-right: 8px; }
.agri-dash-back-btn:hover { background: rgba(255,255,255,0.08); color: #ECEFF1; }

.agri-dash-body { flex: 1; position: relative; overflow: hidden; }
.agri-dash-canvas { position: absolute; inset: 0; z-index: 0; }

.agri-dash-left { position: absolute; left: 1.2vw; top: 1.5vh; bottom: 24vh; width: 18vw; max-width: 300px; min-width: 200px; z-index: 1; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; overflow: hidden; }
.agri-dash-right { position: absolute; right: 1.2vw; top: 1.5vh; bottom: 24vh; width: 8vw; max-width: 120px; min-width: 90px; z-index: 1; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; overflow: hidden; }
.agri-dash-bottom { position: absolute; left: 1.2vw; right: 1.2vw; bottom: 1.5vh; height: 20vh; z-index: 1; display: flex; gap: 12px; pointer-events: auto; overflow: hidden; }

.agri-panel { background: rgba(11,20,55,0.88); border: 1px solid rgba(0,229,255,0.1); border-radius: 8px; padding: 14px; backdrop-filter: blur(6px); overflow: hidden; min-height: 0; }
.agri-panel-title { font-size: 14px; font-weight: 600; color: #00E5FF; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.agri-panel-subtitle { font-size: 10px; color: #546E7A; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }

.agri-park-img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; opacity: 0.85; }
.agri-park-name { font-size: 13px; font-weight: 600; color: #ECEFF1; margin-bottom: 4px; }
.agri-park-desc { font-size: 11px; color: #78909C; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.agri-crop-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.agri-crop-item:last-child { border-bottom: none; }
.agri-crop-icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.agri-crop-info { flex: 1; min-width: 0; }
.agri-crop-name { font-size: 12px; font-weight: 500; color: #ECEFF1; }
.agri-crop-stats { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.agri-crop-qty { font-size: 11px; color: #78909C; }
.agri-crop-maturity { font-size: 11px; font-weight: 500; }
.agri-crop-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.agri-crop-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }

.agri-gh-label { background: rgba(11,20,55,0.88); border: 1px solid rgba(0,229,255,0.12); border-radius: 6px; padding: 8px 10px; text-align: center; cursor: pointer; transition: all 0.25s; backdrop-filter: blur(6px); }
.agri-gh-label:hover { border-color: rgba(0,229,255,0.4); background: rgba(0,229,255,0.08); }
.agri-gh-label--active { border-color: rgba(76,175,80,0.5); background: rgba(76,175,80,0.1); box-shadow: 0 0 12px rgba(76,175,80,0.15); }
.agri-gh-label-name { font-size: 12px; font-weight: 600; color: #ECEFF1; }
.agri-gh-label-status { font-size: 9px; color: #4CAF50; margin-top: 2px; }

.agri-weather-card { background: rgba(11,20,55,0.75); border: 1px solid rgba(255,255,255,0.05); border-radius: 6px; padding: 6px 8px; text-align: center; font-size: 10px; color: #78909C; }
.agri-weather-card-date { color: #B0BEC5; font-weight: 500; margin-bottom: 2px; }
.agri-weather-card-icon { font-size: 16px; margin: 2px 0; }

.agri-chart-panel { background: rgba(11,20,55,0.88); border: 1px solid rgba(0,229,255,0.1); border-radius: 8px; padding: 12px; backdrop-filter: blur(6px); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agri-chart-title { font-size: 13px; font-weight: 600; color: #00E5FF; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.agri-chart-body { flex: 1; min-height: 0; position: relative; }

.agri-gauge-legend { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.agri-gauge-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #78909C; }
.agri-gauge-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.agri-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; color: #546E7A; gap: 12px; }
.agri-loading-spinner { width: 40px; height: 40px; border: 3px solid rgba(0,229,255,0.15); border-top-color: #00E5FF; border-radius: 50%; animation: agri-spin 1s linear infinite; }
@keyframes agri-spin { to { transform: rotate(360deg); } }

.agri-scene-badge { position: absolute; right: 16px; top: 70px; z-index: 2; padding: 4px 10px; border-radius: 12px; font-size: 10px; background: rgba(76,175,80,0.15); border: 1px solid rgba(76,175,80,0.3); color: #4CAF50; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.5s; }
.agri-scene-badge--visible { opacity: 1; }
.agri-scene-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; }