/* =========================================================
   layout.css · 顶栏 / 主导航 / 筛选条 / 主舞台（变量化）
   ========================================================= */
.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(--border-soft);
}
.statusbar{
  position:fixed; top:calc(var(--top-h) + var(--nav-h)); left:0; right:0;
  height:var(--status-h); padding:0 18px;
  display:flex; align-items:center; gap:8px; z-index:9980;
  background: var(--status-bg);
  border-bottom:1px solid var(--border-soft);
  font-size:12px; color:var(--text-mute);
  /* 第二十七轮 P0-B：筛选条永远单行；
     终稿候选复查 P0：默认 overflow-x:hidden，1280 以下兜底切回 auto，
     消除首屏出现的"看似没必要"的横向滚动条。 */
  flex-wrap: nowrap;
  overflow-x: hidden;
}
.statusbar .lbl,
.statusbar .sep,
.statusbar .filter-select{
  flex: 0 0 auto;
  white-space: nowrap;
}
/* 第二十八轮 P0-2：筛选标签硬约束 —— 在极窄空间下也不会被压成竖排 */
.statusbar .lbl{
  word-break: keep-all;
  min-width: 24px;
}
/* 第二十七轮 P0-B + 第二十九轮 P0-5：事件框收敛到 ~184px（事件全文走 hover / 工作条）
   终稿候选复查 P0：6 个下拉框统一收窄，让首屏 1440 / 1536 / 1680 默认不出滚动条 */
#filterEvent      { width: 184px; min-width: 184px; max-width: 184px; }
#filterTown       { width: 132px; min-width: 132px; max-width: 132px; }
#filterHazard     { width: 108px; min-width: 108px; max-width: 108px; }
#filterCrop       { width: 108px; min-width: 108px; max-width: 108px; }
#filterTaskStatus { width: 126px; min-width: 126px; max-width: 126px; }
#filterTimeWindow { width: 138px; min-width: 138px; max-width: 138px; }
.statusbar .data-source{
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-mute);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
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:rgba(255,255,255,.7); letter-spacing:1.5px; margin-top:1px;}
.brand-sub-title .brand-emphasis{ color:var(--tech-cyan); font-weight:600; }

.top-mid{flex:1; min-width:0; 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,.45);
  border:1px solid rgba(255,255,255,.18); border-radius:18px;
  font-size:12px; color:rgba(255,255,255,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:680px;
}
.top-event > span{ 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;
}
.top-event .k{color:rgba(255,255,255,.55);}
.top-event .v{color:#fff; font-weight:600;}
.top-event .v.gold{color:var(--wheat-gold);}
.top-event .v.green{color:#7fe5b3;}
.top-event .v.red{color:#ff8a96;}
.top-event .sep{width:1px; height:14px; background:rgba(255,255,255,.18);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

.top-right{display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0;}

/* 主题切换 */
.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;
}

.scene-btn{
  padding:0 12px; height:28px; line-height:28px;
  border:1px solid rgba(255,255,255,.18); border-radius:14px;
  font-size:12px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
}
.scene-btn:hover{ color:#fff; border-color:var(--tech-cyan); }
.scene-btn.warn{ color:#ffc99a; border-color:rgba(255,138,61,.45); }
.scene-btn.warn:hover{ color:#fff; background:rgba(255,138,61,.18); }

.user-pill{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:15px; font-size:12px; color:#fff;
  /* 终稿候选复查 P1：右上角胶囊在 1440 / 1536 下不出屏，长名称走 ellipsis */
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-pill .role{ color:var(--tech-cyan); }
.user-pill .user-name{ color:#fff; }

/* ========== 一级菜单 ========== */
.nav-list{display:flex; gap:24px;}
.nav-item{
  padding:0 6px; font-size:14px; color:var(--text-mute);
  cursor:pointer; transition:color .2s;
  display:flex; align-items:center; gap:6px; height:var(--nav-h);
  border-bottom:2px solid transparent; position:relative;
}
.nav-item:hover{color:var(--text-main);}
.nav-item.active{
  color:var(--text-main); font-weight:600;
  border-bottom-color:var(--tech-cyan);
}
:root[data-theme="light"] .nav-item.active{
  color:var(--gov-blue); border-bottom-color:var(--gov-blue);
}
.nav-item .badge{
  background:var(--high); color:#fff;
  font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600;
}
.resp-status{
  font-size:11px; color:var(--orange);
  padding:3px 10px; border-radius:10px;
  background:rgba(255,138,61,.10); border:1px solid rgba(255,138,61,.4);
}

/* ========== 综合筛选条 ========== */
.statusbar .lbl{color:var(--text-mute); letter-spacing:1px; margin-right:4px;}
.statusbar .sep{width:1px; height:14px; background:var(--border-soft);}
.filter-select{
  background:var(--form-bg); color:var(--text-main);
  border:1px solid var(--form-border); border-radius:12px;
  padding:3px 10px; font-size:12px; min-width:96px; cursor:pointer;
}
.filter-select:hover{ border-color:var(--form-focus); }
.filter-select:focus{ outline:none; border-color:var(--form-focus); }
:root[data-theme="dark"] .filter-select option{ background:#10264a; color:var(--text-main); }
:root[data-theme="light"] .filter-select option{ background:#fff; color:var(--text-main); }
.data-source{margin-left:auto; color:var(--text-mute); max-width:480px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.data-source .data-source-link{ color:var(--tech-cyan); margin-left:8px; border-bottom:1px dashed var(--tech-cyan); }
.data-source .data-source-link:hover{ color:var(--map-label-current, var(--text-main)); }

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

/* 当前筛选上下文条 */
.context-bar{
  margin-bottom:10px; padding:8px 14px;
  background:linear-gradient(90deg,rgba(43,108,255,.10),rgba(15,30,60,.55));
  border:1px solid var(--border-soft); border-left:3px solid var(--tech-cyan);
  border-radius:6px; font-size:12px; color:var(--text-soft);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
:root[data-theme="light"] .context-bar{
  background:linear-gradient(90deg,#eef5ff 0%,#f8fbff 100%);
  border-left-color:var(--gov-blue);
}
.context-bar b{ color:var(--text-main); }
.context-bar .ctx-tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:10px;
  background:rgba(62,218,244,.10); border:1px solid rgba(62,218,244,.32);
  color:var(--tech-cyan); font-size:11px;
}
:root[data-theme="light"] .context-bar .ctx-tag{
  background:rgba(31,166,216,.10); border-color:rgba(31,166,216,.40);
}
.context-bar .ctx-tag.gold{ background:rgba(246,199,97,.12); border-color:rgba(246,199,97,.40); color:var(--wheat-gold-2); }
.context-bar .ctx-tag.warn{ background:rgba(255,138,61,.12); border-color:rgba(255,138,61,.40); color:var(--orange); }
.context-bar .ctx-tag.green{ background:rgba(55,201,138,.12); border-color:rgba(55,201,138,.40); color:var(--ok); }

/* ========== 二栏 / 三栏布局 ========== */
.layout-2col{ display:grid; grid-template-columns:300px 1fr; gap:12px; }
.layout-3col{ display:grid; grid-template-columns:300px 1fr 320px; gap:12px; }
.layout-2col-right{ display:grid; grid-template-columns:1fr 320px; gap:12px; }
.layout-2col-left{ display:grid; grid-template-columns:340px 1fr; gap:12px; }