/* =========================================================
   layout.css · 顶栏 / 二级导航 / 综合筛选条 / 主舞台
   ========================================================= */

/* 顶部三栏 fixed */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--top-h); padding:0 24px;
  display:flex; align-items:center; z-index:10000;
  background:var(--top-bg);
  border-bottom:1px solid rgba(47,109,255,.45);
}
.mainnav{
  position:fixed; top:var(--top-h); left:0; right:0;
  height:var(--nav-h); padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; z-index:9990;
  background:var(--nav-bg);
  border-bottom:1px solid var(--bd-soft);
}
.statusbar{
  position:fixed; top:calc(var(--top-h) + var(--nav-h)); left:0; right:0;
  height:var(--status-h); padding:0 24px;
  display:flex; align-items:center; gap:10px; z-index:9980;
  background:var(--status-bg);
  border-bottom:1px solid var(--bd-soft);
  font-size:12px; color:var(--tx-3);
}
body{ padding-top: calc(var(--top-h) + var(--nav-h) + var(--status-h)); }

.brand{display:flex; align-items:center; gap:14px;}
.brand-logo{
  width:40px; height:40px; border-radius:9px;
  background:linear-gradient(135deg,#2f7cff 0%,#22d3ee 100%);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:13px; font-weight:700; letter-spacing:1px;
  box-shadow:0 0 14px rgba(62,218,244,.45);
  text-align:center; line-height:1.1;
}
.brand-title-wrap{line-height:1.25;}
.brand-main-title{
  font-size:17px; font-weight:600; color:#fff; letter-spacing:1px;
}
.brand-sub-title{font-size:11px; color:var(--tx-3); letter-spacing:1.5px; margin-top:1px;}

.top-mid{flex:1; display:flex; align-items:center; justify-content:center; gap:14px;}
.top-event{
  display:flex; align-items:center; gap:14px;
  padding:7px 14px; background:rgba(15,30,60,.7);
  border:1px solid var(--bd-soft); border-radius:18px;
  font-size:12px; color:var(--tx-2);
  /* v4.5-1238+ 顶栏整体放宽，给"口径"区域更多空间，避免"冬小麦+病虫害+7天"被截断 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:760px;
}
.top-event > span{ white-space:nowrap; flex:0 0 auto; }

/* v4.5-1238+ 顶栏"口径"区域：短标签 + 完整 tooltip + 更宽容器（用户实测扩宽建议） */
.top-event{ min-width:0; }
.top-scene-wrap{
  display:inline-flex; align-items:center; gap:4px;
  min-width:0; max-width:420px;
}
.top-scene-wrap .k{ flex:0 0 auto; }
#topSceneLabel{
  flex:1 1 auto; min-width:0; max-width:360px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  vertical-align:bottom;
}
@media(max-width:1400px){
  .top-scene-wrap{ max-width:300px; }
  #topSceneLabel{ max-width:240px; }
}

/* v4.5-UI5 P0-3：窄屏顶栏整体压缩，避免 1440/1366 拥挤 */
@media(max-width:1440px){
  .brand-main-title{ font-size:15px; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-sub-title{ max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top-event{ max-width:600px; gap:8px; padding:6px 10px; }
  .top-event .k{ display:none; }
  .scene-btn{ padding:0 8px; font-size:11px; }
  .user-pill .role{ display:none; }
}
@media(max-width:1366px){
  .topbar{ padding:0 14px; }
  .mainnav{ padding:0 18px; }
  .statusbar{ padding:0 18px; }
  .top-event{ max-width:500px; }
  .scene-btn{ max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.top-event .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--tech-cyan); box-shadow:0 0 8px var(--tech-cyan);
  animation:pulse 1.5s infinite;
}
body.emergency .top-event .dot{background:var(--high); box-shadow:0 0 8px var(--high);}
.top-event .k{color:var(--tx-3);}
.top-event .v{color:#fff; font-weight:600;}
.top-event .v.gold{color:var(--wheat-gold);}
.top-event .v.green{color:var(--agri-green);}
.top-event .v.red{color:var(--high);}
.top-event .sep{width:1px; height:14px; background:var(--bd);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

.top-right{display:flex; align-items:center; gap:10px;}
.mode-switch{
  display:flex; background:rgba(8,18,38,.7);
  border:1px solid var(--bd); border-radius:18px; overflow:hidden;
}
.mode-switch button{padding:6px 14px; font-size:12px; color:var(--tx-3);}
.mode-switch button.active{
  background:linear-gradient(90deg,var(--agri-green-2),var(--agri-green));
  color:#fff;
}
body.emergency .mode-switch button.active{
  background:linear-gradient(90deg,#b91c1c,var(--high));
}
.avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#4a8bff,#a974ff);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#fff; font-weight:600;
}

/* 一级菜单 */
.nav-list{display:flex; gap:24px;}
.nav-item{
  padding:0 4px; font-size:14px; color:var(--tx-3);
  cursor:pointer; transition:color .2s;
  display:flex; align-items:center; gap:5px; height:var(--nav-h);
  border-bottom:2px solid transparent;
}
.nav-item:hover{color:var(--text-main);}
.nav-item.active{
  color:var(--text-main); font-weight:600;
  border-bottom-color:var(--tech-cyan);
}
.nav-item .badge{
  background:var(--high); color:#fff;
  font-size:10px; padding:1px 6px; border-radius:8px;
}
.resp-status{
  font-size:11px; color:var(--tx-3);
  padding:3px 10px; border-radius:10px;
  background:var(--card-bg); border:1px solid var(--bd-soft);
}
.resp-status.active{
  background:rgba(255,61,79,.10); border-color:rgba(255,61,79,.4);
  color:var(--high);
}

/* 综合筛选条 */
.statusbar .lbl{color:var(--tx-3); letter-spacing:1px; margin-right:4px;}
.statusbar .sep{width:1px; height:14px; background:var(--bd-soft);}
.scene-chips{display:flex; align-items:center; gap:6px;}
.chip{
  padding:3px 12px; font-size:11px; color:var(--tx-2);
  background:var(--card-bg); border:1px solid var(--bd-soft);
  border-radius:12px; transition:all .2s;
  /* v4.5-UI3+ P1-1：作物/灾种 chip 过长时省略 */
  max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip:hover{color:var(--text-main); border-color:var(--tech-cyan);}
.chip.active{
  color:#fff; background:linear-gradient(90deg,var(--gov-blue),var(--gov-blue-2));
  border-color:transparent;
}
/* v4.5-UI3+ P1-1：1440 以内进一步压缩 */
@media(max-width:1440px){
  .chip{ max-width:110px; padding:3px 9px; }
}
.data-source{margin-left:auto; color:var(--tx-3); max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.data-source b{color:var(--tx-1); font-weight:500; margin-left:4px;}
/* v4.5-UI2 P1-2：窄屏隐藏 data-source 避免拥挤 */
@media(max-width:1500px){ .data-source{display:none;} }

/* 主舞台 */
.stage{padding:14px var(--stage-pad-x); min-height:calc(100vh - var(--top-h) - var(--nav-h) - var(--status-h));}
.page{display:none;}
.page.active{display:block;}

/* 左侧二级菜单 + 右侧主区（monitor/dispatch/verify） */
.section-with-side{display:block;}
.sidenav{
  position:fixed; left:var(--stage-pad-x);
  top:calc(var(--top-h) + var(--nav-h) + var(--status-h) + 14px);
  width:var(--side-w);
  max-height:calc(100vh - var(--top-h) - var(--nav-h) - var(--status-h) - 28px);
  overflow-y:auto; overflow-x:hidden;
  background:var(--sidenav-bg);
  border:1px solid var(--bd-soft); border-radius:8px;
  padding:10px 8px; z-index:8500;
}
.sidenav-head{padding:6px 8px; border-bottom:1px solid var(--bd-soft); margin-bottom:8px;}
.sidenav-head .ttl{font-size:13px; color:var(--text-main); font-weight:600; margin-bottom:2px;}
.sidenav-head div:last-child{font-size:10px; color:var(--tx-4); letter-spacing:1px;}
.sidenav-item{
  padding:8px 10px; font-size:12.5px; color:var(--tx-2);
  cursor:pointer; border-left:3px solid transparent;
  border-radius:0 4px 4px 0; transition:all .2s;
  display:flex; align-items:center; justify-content:space-between;
}
.sidenav-item:hover{color:var(--text-main); background:rgba(43,108,255,.06);}
.sidenav-item.active{
  color:var(--text-main); background:linear-gradient(90deg,rgba(43,108,255,.26),rgba(43,108,255,.06));
  border-left-color:var(--tech-cyan);
}
.sidenav-item .badge{background:var(--high); color:#fff; font-size:10px; padding:1px 6px; border-radius:8px;}

.section-main{margin-left:calc(var(--side-w) + var(--side-gap)); min-width:0;}

/* v4.5-UI4/UI5/UI6 P0-1：作战条 fixed + grid 强约束（workbar-h 在 tokens.css 中定义为 108px）*/
:root{
  --workbar-top: calc(var(--top-h) + var(--nav-h) + var(--status-h) + 12px);
  --business-top: var(--workbar-top);
}
/* v4.5-UI6 P0-4：左侧 sidenav 与右侧作战条共用同一 top，确保对齐 */
.sidenav{ top:var(--business-top) !important; }
#page-monitor.active .event-workbar,
#page-dispatch.active .event-workbar,
#page-verify.active .event-workbar,
#page-replay.active .event-workbar{
  position:fixed;
  top:var(--workbar-top);
  left:calc(var(--stage-pad-x) + var(--side-w) + var(--side-gap));
  right:var(--stage-pad-x);
  height:var(--workbar-h) !important;
  min-height:var(--workbar-h) !important;
  max-height:var(--workbar-h) !important;
  overflow:hidden !important;
  z-index:8600;
  /* v4.5-UI6 P0-3：改用 grid 三行严格定义高度 */
  display:grid !important;
  grid-template-rows:22px 34px 28px !important;
  row-gap:4px;
  background:var(--panel-bg);
  border:1px solid rgba(62,218,244,.24); border-radius:8px;
  padding:8px 10px; box-shadow:0 10px 22px rgba(0,0,0,.26);
  backdrop-filter:blur(6px);
}

/* v4.5-UI5 P0-1：内部元素高度强约束（覆盖 pages.css .event-ctx height:48px 的潜在干扰） */
.event-workbar .event-hint-line{
  flex:0 0 22px !important; height:22px !important; line-height:22px !important;
  padding:0 8px; font-size:11px; color:var(--tx-2);
  background:linear-gradient(90deg,rgba(62,218,244,.10),rgba(62,218,244,.02));
  border-left:3px solid var(--tech-cyan); border-radius:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.event-workbar .event-hint-line b{color:var(--tech-cyan);}
.event-workbar .event-ctx{
  flex:0 0 34px !important; height:34px !important;
  min-height:34px !important; max-height:34px !important;
  padding:3px 10px !important; overflow:hidden;
}
.event-workbar .ec-top{
  height:28px !important; margin:0 !important;
  display:flex; align-items:center; gap:10px; min-width:0;
}
/* v4.5-UI6-0712 P0-6：作战条 65/35 固定比例，meta 区可省略次要项 */
.event-workbar .ec-name{
  flex:0 0 65%; max-width:65%; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.event-workbar .ec-meta{
  flex:0 0 35%; max-width:35%;
  display:flex; gap:8px; white-space:nowrap; overflow:hidden;
  justify-content:flex-end;
}
.event-workbar .ec-meta span{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 次要 meta 项（id-tag 等）在 1440 以下自动隐藏，保留 影响面积、响应建议 */
@media (max-width: 1440px){
  .event-workbar .ec-meta .ec-meta-secondary{ display:none !important; }
}
.event-workbar .workbar-progress{
  flex:0 0 24px !important; height:24px !important; max-height:24px !important;
  margin-top:2px !important; padding-top:2px !important;
  overflow-x:auto; overflow-y:hidden;
}

/* fix-S1：4 个业务页统一 section-main 让出左侧菜单宽度 + 让出 workbar 高度 */
#page-monitor.active .section-main,
#page-dispatch.active .section-main,
#page-verify.active .section-main,
#page-replay.active .section-main{
  margin-left:calc(var(--side-w) + var(--side-gap));
  min-width:0;
  padding-top:calc(var(--workbar-h) + 16px) !important;
}

/* sub-page 切换 */
.subpage{ }
.subpage[style*="display:none"]{ }

/* 双皮肤切换按钮（顶栏始终深蓝底） */
.theme-toggle{
  display:flex; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); border-radius:14px; overflow:hidden;
}
.theme-toggle button{
  padding:0 12px; height:28px; line-height:28px; font-size:12px;
  color:rgba(255,255,255,.7);
}
.theme-toggle button.active{
  background:linear-gradient(90deg,var(--gov-blue),var(--gov-blue-2));
  color:#fff; font-weight:600;
}

/* =========================================================
   LIGHT FIX · 省厅端浅色态对齐市县端业务态（v5 像素级修正）
   仅作用于 :root[data-theme="light"]，不影响经典色汇报态
   ========================================================= */
:root[data-theme="light"] .brand-sub-title{ color:rgba(255,255,255,.70); }
:root[data-theme="light"] .top-event{
  background:rgba(15,30,60,.45);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
:root[data-theme="light"] .top-event .k{ color:rgba(255,255,255,.55); }
:root[data-theme="light"] .top-event .v{ color:#fff; font-weight:600; }
:root[data-theme="light"] .top-event .v.green{ color:#7fe5b3; }
:root[data-theme="light"] .top-event .v.red{ color:#ff8a96; }
:root[data-theme="light"] .top-event .sep{ background:rgba(255,255,255,.18); }
:root[data-theme="light"] .scene-btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
:root[data-theme="light"] .scene-btn:hover{ color:#fff; border-color:var(--tech-cyan); }
:root[data-theme="light"] .scene-btn.warn{
  color:#ffc99a;
  border-color:rgba(255,138,61,.45);
  background:rgba(255,138,61,.10);
}
:root[data-theme="light"] .user-pill{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
:root[data-theme="light"] .user-pill .role{ color:rgba(255,255,255,.72); }

:root[data-theme="light"] .nav-item.active{
  color:var(--gov-blue);
  border-bottom-color:var(--gov-blue);
  font-weight:600;
}
:root[data-theme="light"] .nav-item:hover{ color:var(--gov-blue); }

:root[data-theme="light"] .statusbar{
  padding:0 18px;
  gap:8px;
  color:var(--text-mute);
  overflow-x:hidden;
}
:root[data-theme="light"] .statusbar .lbl{ color:var(--text-mute); }
:root[data-theme="light"] .chip{
  min-height:24px;
  padding:3px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #d8e2f0;
  color:var(--text-main);
  font-size:12px;
}
:root[data-theme="light"] .chip:hover{
  border-color:var(--gov-blue);
  color:var(--gov-blue);
  background:#fff;
}
:root[data-theme="light"] .chip.active{
  background:#eef5ff;
  border-color:#b9cee8;
  color:var(--gov-blue);
  box-shadow:none;
}

:root[data-theme="light"] .sidenav{
  background:#fff;
  border-color:#dde6f2;
  box-shadow:0 1px 4px rgba(31,55,98,.06);
}
:root[data-theme="light"] .sidenav-head{
  color:var(--text-mute);
  border-bottom-color:#dde6f2;
}
:root[data-theme="light"] .sidenav-item{
  color:var(--text-soft);
  border-left-color:transparent;
}
:root[data-theme="light"] .sidenav-item:hover{
  background:#f8fbff;
  color:var(--gov-blue);
}
:root[data-theme="light"] .sidenav-item.active{
  background:linear-gradient(90deg,#eef5ff 0%,#ffffff 100%);
  border-left-color:var(--gov-blue);
  color:var(--gov-blue);
  font-weight:600;
}

:root[data-theme="light"] #page-monitor.active .event-workbar,
:root[data-theme="light"] #page-dispatch.active .event-workbar,
:root[data-theme="light"] #page-verify.active .event-workbar,
:root[data-theme="light"] #page-replay.active .event-workbar{
  background:#fff;
  border-color:#dde6f2;
  box-shadow:0 1px 4px rgba(31,55,98,.06);
  backdrop-filter:none;
}
:root[data-theme="light"] .event-workbar .event-hint-line{
  background:linear-gradient(90deg,#eef5ff 0%,#f8fbff 100%);
  border-left-color:var(--gov-blue);
  color:var(--text-soft);
}
:root[data-theme="light"] .event-workbar .event-hint-line b{ color:var(--gov-blue); }

/* =========================================================
   LIGHT FINAL FIX · 顶栏右侧控件统一为市县端玻璃胶囊风格（§2）
   只作用于浅色业务态，不影响经典色汇报态
   ========================================================= */
:root[data-theme="light"] .top-right{ gap:8px; }

:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .mode-switch{
  height:30px;
  padding:2px;
  display:inline-flex;
  align-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  box-shadow:none;
}
:root[data-theme="light"] .theme-toggle button,
:root[data-theme="light"] .mode-switch button{
  height:24px;
  line-height:24px;
  padding:0 12px;
  border-radius:13px;
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,.68);
  background:transparent;
  box-shadow:none;
}
/* 主题切换保持市县端的蓝色选中态 */
:root[data-theme="light"] .theme-toggle button.active{
  background:linear-gradient(90deg,var(--gov-blue),var(--gov-blue-2));
  color:#fff;
  font-weight:600;
}
/* 模式切换不再用大面积绿色，日常运行用白色胶囊，弱化为状态选择 */
:root[data-theme="light"] .mode-switch button.active{
  background:rgba(255,255,255,.92);
  color:#0f2f63;
  font-weight:600;
}
/* 应急态选中时只改变文字色，不做大面积红块 */
html[data-theme="light"] body.emergency .mode-switch button.active[data-mode="emergency"]{
  background:rgba(255,255,255,.92);
  color:#b91c1c;
  font-weight:700;
}
:root[data-theme="light"] .scene-btn{
  height:30px;
  padding:0 12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
  box-shadow:none;
  margin-left:0;
}
:root[data-theme="light"] .scene-btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.30);
  color:#fff;
}
:root[data-theme="light"] .user-pill{
  height:30px;
  padding:0 12px 0 4px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:none;
  margin-left:0;
}