/* Style B v14 - 新增底部双模块（最新消息+我的值班） */

/* === 基础背景 === */
body{background:linear-gradient(135deg,#2a3a4a 0%,#1e2e40 50%,#152538 100%)!important;color:rgba(255,255,255,0.9)!important;overflow:hidden!important}
.top-bar{background:rgba(35,55,85,0.85)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid rgba(100,140,200,0.15)!important;height:50px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 20px!important;position:relative!important;z-index:200!important}
.top-bar .logo h1{color:#fff!important;font-size:17px!important;font-weight:700!important}

/* === 登录页隐藏导航和顶栏（纯CSS，安全不崩溃）=== */
body.login-bg .left-panel,
body.login-bg #globalSidebar,
body.login-bg .top-bar,
body.login-bg .main-container,
body.login-bg .right-panel { display: none !important; }

/* === 左侧导航栏：舒适间距 === */
.left-panel,#globalSidebar{background:rgba(40,70,110,0.35)!important;backdrop-filter:blur(20px)!important;border-right:1px solid rgba(100,150,220,0.1)!important;width:170px!important;min-width:170px!important;display:flex!important;flex-direction:column!important;padding-top:10px!important;overflow-y:auto!important}
.left-panel .nav-list,.left-panel nav,.left-panel ul{padding-top:0!important;margin-top:0!important}
.nav-item{color:rgba(255,255,255,0.7)!important;font-size:13.5px!important;border-radius:8px!important;padding:10px 12px!important;margin:3px 8px!important;cursor:pointer;display:flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;flex-shrink:0!important;transition:all 0.2s!important}
.nav-item:hover{background:rgba(255,255,255,0.08)!important;color:#fff!important;transform:translateX(3px)!important}
.nav-item.active{background:rgba(59,130,246,0.25)!important;color:#fff!important;font-weight:600!important;box-shadow:inset 3px 0 0 #3b82f6!important}
.nav-item img,.nav-item .nav-icon{width:18px!important;height:18px!important;flex-shrink:0!important}

/* === 全高布局 === */
.page-layout{display:flex!important;height:100vh!important;overflow:hidden!important;width:100%!important;margin:0!important;padding:0!important}
.main-container{display:flex!important;flex-direction:column!important;min-width:0!important;flex:1!important;width:100%!important;padding:0!important;margin:0!important;overflow:hidden!important;box-sizing:border-box!important;background:transparent!important}
.page.active{display:block!important;height:100%!important;min-height:0!important;overflow-y:auto!important}
/* === 驾驶舱容器：从Grid改为Flex（JS布局依赖flex）=== */
.cockpit-container{display:flex!important;flex-direction:column!important;width:100%!important;flex:1!important;padding:0!important;box-sizing:border-box!important;min-height:0!important;overflow:hidden!important;background:transparent!important;height:calc(100vh - 50px)!important}

/* === KPI栏：透明背景 + 允许横向滚动 === */
body .cockpit-container .kpi-bar,.kpi-bar{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;padding:8px 15px!important;margin:0!important;flex-wrap:nowrap!important;flex-shrink:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border:none!important;border-radius:0!important;outline:none!important;overflow-x:auto!important;overflow-y:hidden!important}

/* === 统一玻璃卡片 === */
.glass-card{background:rgba(255,255,255,0.06)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:8px!important;padding:8px 12px!important;flex-shrink:0!important;display:flex!important;align-items:center!important;gap:8px!important}

/* 环形图卡片 */
.ring-card{min-width:155px!important}
.ring-chart{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0!important}
.ring-blue{background:conic-gradient(#3b82f6 0% 45%,rgba(255,255,255,0.08) 45% 100%);width:68px!important;height:68px!important}
.ring-green{background:conic-gradient(#22c55e 0% 68%,rgba(255,255,255,0.08) 68% 100%);width:68px!important;height:68px!important}

/* 里程卡片 */
.mileage-card{background:rgba(255,255,255,0.06)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:10px!important;padding:8px 16px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:100px!important;flex-shrink:0!important}

/* === 区天气卡片：纵向排列（区名→温度→详情）=== */
.district-weather-card{background:rgba(255,255,255,0.06)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:8px!important;padding:8px 8px!important;text-align:center!important;min-width:82px!important;max-width:90px!important;flex-shrink:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important}
.district-name{color:rgba(255,255,255,0.5)!important;font-size:11px!important;margin-bottom:1px!important;width:100%!important}
.district-temp{color:#fff!important;font-size:22px!important;font-weight:700!important;line-height:1.2!important}
.district-detail{color:rgba(255,255,255,0.45)!important;font-size:10px!important;margin-top:1px!important;line-height:1.3!important;word-break:break-all!important;width:100%!important}

/* === 预警模块：仿官方气象预警 === */
#warningModule{display:flex!important;gap:8px!important;align-items:flex-start!important;flex-shrink:0!important}
.warning-card-new{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;padding:8px 10px 8px!important;border-radius:8px!important;min-width:80px!important;backdrop-filter:blur(8px)!important;border:1px solid rgba(255,255,255,0.12)!important}
.warning-card-new .w-area{color:rgba(255,255,255,0.65)!important;font-size:12px!important;font-weight:400!important;line-height:1.2!important;text-align:center!important}
.warning-card-new .w-icon{font-size:32px!important;line-height:1!important;flex-shrink:0!important}
.warning-card-new .w-bottom{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important;justify-content:center!important}
.warning-card-new .w-text{font-size:14px!important;font-weight:700!important;white-space:nowrap!important;line-height:1.3!important}
.warning-card-new .w-level{font-size:10px!important;opacity:0.8!important;font-weight:400!important}
.warning-card-new .mock-tag{font-size:9px!important;opacity:0.55!important;font-weight:400!important}
.w-level-red{background:rgba(255,0,0,0.2)!important;color:#ff4444!important;border-color:rgba(255,0,0,0.3)!important}
.w-level-orange{background:rgba(255,102,0,0.15)!important;color:#ff8800!important;border-color:rgba(255,102,0,0.25)!important}
.w-level-yellow{background:rgba(230,168,0,0.15)!important;color:#e6a800!important;border-color:rgba(230,168,0,0.25)!important}
.w-level-blue{background:rgba(51,153,255,0.15)!important;color:#66bbff!important;border-color:rgba(51,153,255,0.25)!important}

.kpi-item,.kpi-item *,.kpi-card{background:transparent!important}

/* === 主内容区：左列 + 右列 === */
.main-content-row{display:flex!important;gap:15px!important;flex:1!important;min-height:0!important;width:100%!important;padding:0 15px!important;box-sizing:border-box!important}
.left-content-col{flex:1!important;min-width:0!important;display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important}
.map-row{flex:1!important;min-height:0!important;position:relative!important}
.map-container{background:rgba(255,255,255,0.04)!important;backdrop-filter:blur(8px)!important;border-radius:12px!important;border:1px solid rgba(255,255,255,0.08)!important;width:100%!important;height:100%!important;min-height:0!important;position:relative!important;overflow:hidden!important}
.right-panel{display:none!important}

/* === IM聊天 — 右列全高（从顶到底，透明玻璃风格）=== */
.right-chat-col{width:280px!important;min-width:280px!important;flex-shrink:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;height:100%!important;align-self:stretch!important}
.im-container,#imModule{background:rgba(255,255,255,0.02)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;border:1px solid rgba(255,255,255,0.06)!important;border-radius:12px!important;width:100%!important;min-width:0!important;flex:1!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
  --im-bg-primary:rgba(255,255,255,0.02)!important;
  --im-bg-secondary:rgba(255,255,255,0.02)!important;
  --im-bg-card:rgba(255,255,255,0.02)!important;
  --im-bg-card-hover:rgba(255,255,255,0.1)!important;
  --im-bg-offline:rgba(255,255,255,0.03)!important;
}
.im-chat,.im-overlay,.im-profile,.im-chat-header,.im-chat-messages,.im-chat-input-area{display:none!important}
.im-member-list{display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important;overflow:hidden!important;position:static!important;right:auto!important;top:auto!important;max-height:none!important;width:100%!important}
.im-header{padding:12px 16px!important;background:rgba(255,255,255,0.02)!important;border-bottom:1px solid rgba(255,255,255,0.04)!important;flex-shrink:0!important}
.im-list{flex:1!important;min-height:0!important;overflow-y:auto!important;padding:4px!important;max-height:none!important}
.im-card{display:flex!important;align-items:center!important;gap:10px!important;padding:10px!important;border-radius:8px!important;cursor:pointer!important;transition:background 0.15s!important;border-bottom:1px solid rgba(255,255,255,0.03)!important;flex-shrink:0!important;background:transparent!important}
.im-card:hover{background:rgba(255,255,255,0.08)!important}
.im-avatar{width:36px!important;height:36px!important;border-radius:8px!important;flex-shrink:0!important;overflow:hidden!important}
.im-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
.im-info{flex:1!important;min-width:0!important}
.im-name{color:rgba(255,255,255,0.85)!important;font-size:13px!important;font-weight:500!important}
.im-status{font-size:11px!important;margin-top:2px!important}
.im-status.online{color:#22c55e!important}
.im-status.offline{color:rgba(255,255,255,0.35)!important}

/* 地图叠加层 → 右下角 */
.map-overlay-info{position:absolute!important;bottom:15px!important;right:15px!important;left:auto!important;display:flex!important;gap:10px!important;z-index:100!important;pointer-events:none!important}

/* 隐藏旧天气和新闻 */
.news-ticker,#newsTicker{display:none!important}

/* 滚动条 */
::-webkit-scrollbar{width:5px!important}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15)!important;border-radius:3px!important}
::-webkit-scrollbar-track{background:transparent!important}

/* 天气特效隐藏 */
.weather-layer,.sun-glow,.sunny-overlay,.clouds-container,.cloudy-overlay,#sunGlow,#sunnyOverlay,#cloudsContainer,#cloudyOverlay,#rainCanvas{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* ============================== */
/* === 底部双模块：最新消息 + 我的值班 === */
/* ============================== */
.bottom-modules-row{display:flex!important;gap:12px!important;height:85px!important;flex-shrink:0!important;width:100%!important;margin-top:10px!important}

.bm-module{flex:1!important;min-width:0!important;background:rgba(255,255,255,0.05)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;border:1px solid rgba(255,255,255,0.08)!important;border-radius:10px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}

/* 模块标题 */
.bm-header{display:flex!important;align-items:center!important;gap:6px!important;padding:4px 10px!important;border-bottom:1px solid rgba(255,255,255,0.06)!important;flex-shrink:0!important}
.bm-header .bm-icon{font-size:12px!important;line-height:1!important}
.bm-header .bm-title{font-size:12px!important;font-weight:600!important;color:rgba(255,255,255,0.85)!important}
.bm-header .bm-badge{font-size:10px!important;color:rgba(255,255,255,0.4)!important;margin-left:auto!important}

/* 模块内容 */
.bm-content{flex:1!important;min-height:0!important;overflow-y:auto!important;padding:2px 8px!important}

/* 最新消息条目（紧凑：日期标签+标题） */
.tl-item{display:flex!important;align-items:center!important;gap:6px!important;padding:3px 0!important;border-bottom:1px solid rgba(255,255,255,0.03)!important;cursor:default!important}
.tl-item:last-child{border-bottom:none!important}
.tl-date-badge{flex-shrink:0!important;font-size:9px!important;color:#64b5f6!important;background:rgba(100,181,246,0.1)!important;padding:1px 5px!important;border-radius:3px!important;min-width:48px!important;text-align:center!important;line-height:1.4!important;font-weight:500!important}
.tl-title{font-size:11.5px!important;color:rgba(255,255,255,0.8)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.4!important}

/* 我的值班内容 */
.duty-content{display:flex!important;flex-direction:column!important;gap:4px!important}
.duty-date{text-align:center!important;color:rgba(255,255,255,0.45)!important;font-size:10px!important;padding:2px 0!important}
.duty-person-row{display:flex!important;align-items:center!important;gap:8px!important;padding:4px 6px!important;background:rgba(255,255,255,0.04)!important;border-radius:6px!important}
.duty-avatar{width:28px!important;height:28px!important;border-radius:6px!important;background:rgba(59,130,246,0.2)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#64b5f6!important;font-size:12px!important;font-weight:700!important;flex-shrink:0!important}
.duty-info{flex:1!important;min-width:0!important}
.duty-name{font-size:12.5px!important;color:#fff!important;font-weight:600!important}
.duty-period{font-size:10px!important;color:rgba(255,255,255,0.4)!important;margin-top:1px!important}
.duty-contact{font-size:10px!important;color:#22c55e!important;flex-shrink:0!important}
.duty-empty{text-align:center!important;color:rgba(255,255,255,0.3)!important;font-size:11px!important;padding:20px 0!important}
.duty-status-dot{display:inline-block!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#22c55e!important;margin-right:4px!important;animation:dutyPulse 2s infinite!important}
@keyframes dutyPulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* 修复: 聊天窗口 active 状态覆盖 style-b 的 display:none */
.im-chat.active{display:flex!important;flex-direction:column!important;position:fixed!important;right:320px!important;top:100px!important;width:400px!important;height:500px!important;z-index:1001!important}
.im-chat.active .im-chat-header,.im-chat.active .im-chat-messages,.im-chat.active .im-chat-input-area{display:flex!important}

/* 值班侧边栏面板 */
.duty-sidebar-panel{background:rgba(255,255,255,0.02)!important;border:1px solid rgba(255,255,255,0.06)!important;border-radius:10px!important;padding:12px!important;margin-bottom:10px!important;backdrop-filter:blur(5px)!important}
.duty-sidebar-header{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:8px!important}
.duty-sidebar-content{max-height:120px!important;overflow-y:auto!important;font-size:11px!important}
.duty-sidebar-content::-webkit-scrollbar{width:4px!important}
.duty-sidebar-content::-webkit-scrollbar-thumb{background:rgba(100,181,246,0.3)!important;border-radius:2px!important}

/* 信息面板（水位/路况） */
.info-sidebar-panels{display:flex!important;gap:8px!important;margin-bottom:10px!important}
.info-panel{flex:1!important;background:rgba(15,25,45,0.85)!important;border:1px solid rgba(100,180,255,0.2)!important;border-radius:10px!important;padding:10px!important;backdrop-filter:blur(10px)!important}
.info-panel-header{margin-bottom:6px!important}
.info-panel-content{font-size:11px!important;line-height:1.6!important}

/* === 地图值班面板叠加层 v20260806n === */
.duty-map-overlay{width:100%!important}
.duty-map-overlay-inner{background:rgba(15,25,45,0.82)!important;backdrop-filter:blur(8px)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:10px!important;padding:10px!important;max-height:320px!important;overflow-y:auto!important}
.duty-overlay-section{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.06)}
.duty-overlay-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.duty-overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}