/* =====================================================================
   GEO 站点视觉 / 交互收口层
   参考 sem.ibj.cn（AWS Cloudscape 控制台）的设计语言，在各页内联 <style>
   之后由 index.php 统一注入到 </head>，作为最后一道「收口」：
     · 统一圆角 / 阴影 / 悬停反馈 / 焦点环 / 滚动条
     · 统一侧栏、顶栏、卡片、KPI、表格行反馈、表单、标签、Toast
     · 把闭环层（loop.css）的蓝色体系收敛到同一套 AWS 配色
   原则：只做「收敛与增强」，不推翻各页刻意的强调样式（如橙色表头、
   左侧色条），因此选择器带 body / .main 前缀以获得更高优先级，
   且表头、强调边框等不做覆盖。
   ===================================================================== */

/* ---------- 1. 设计令牌 ----------
   2026-10-11 起所有令牌（--aws-* / --lp-* / --r-* / --sh-* / 短别名）
   统一收敛到 site-theme.css（唯一令牌源），本文件不再重复定义。
   theme.css 被全部控制台页面引用，polish 晚于它注入，var() 引用始终有效。 */

/* 注意：不设 html{scroll-behavior:smooth} —— 全局平滑会让「进页面时侧栏定位」
   变成可见的滚动动画（左侧跳动），也会影响其它程序化滚动。
   「回到顶部」按钮自行使用 behavior:smooth，不受影响。 */

/* ---------- 1.1 基础字体统一（收口层最后加载，覆盖各页内联声明） ----------
   历史页面内联写了 body{font-family:-apple-system,"Segoe UI",…;font-size:14px}，
   在 Windows 上落到 Segoe UI + 14px，而其余页面走 --font-sans（微软雅黑）+ 13px，
   导致同一段文字（含侧栏 logo 旁标题）在不同页面看起来大小不一。 */
body{font-family:var(--font-sans);font-size:var(--font-size-base)}

/* 键盘可达性 + 文本选区（部分页面未加载 site-theme.css，这里补齐） */
:focus-visible{outline:2px solid var(--aws-orange);outline-offset:2px;border-radius:2px}
::selection{background:rgba(255,153,0,.18);color:var(--aws-text)}

/* 细滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9CED4;border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#AEB4BB;border:2px solid transparent;background-clip:content-box}

/* ---------- 2. 左侧导航（侧栏样式的唯一来源；本文件带版本号，缓存可控） ---------- */
@view-transition{navigation:auto} /* 跨页面导航平滑过渡（Chrome），消除整页白闪式跳动 */
html{scrollbar-gutter:stable} /* 滚动条空间常驻：内容异步加载变长时整页不再横移 */
.sidebar{
  width:var(--geo-sidebar-w);background:var(--aws-navy);
  position:fixed;height:100vh;top:0;left:0;overflow-y:auto;
  display:flex;flex-direction:column;
  scroll-behavior:auto;        /* 侧栏定位瞬时生效，避免看到滚来滚去 */
}
.sidebar .logo{padding:0 20px;min-height:56px;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.logo-icon{width:36px;height:36px;background:var(--aws-orange);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--aws-navy);font-size:15px;font-weight:800}
.logo-text{font-size:16px;font-weight:700}
.logo-sub{font-size:12px;color:rgba(255,255,255,.45)}
.nav{flex:1;padding:12px 0 18px}
/* 2026-10-12：左栏改为「组目录」形态 —— 组内栏目已移到顶栏二级导航，
   左栏不再有组内折叠（.nav-group / group-arrow 相关规则随之删除）。
   .nav-group-head（组名行，可点）与 .nav-sub-title（账户与设置小标题）
   由 includes/sidebar.php 就近定义，此处不重复。 */
.nav-item{
  display:flex;align-items:center;gap:10px;min-height:36px;
  margin:1px 10px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:13.5px;color:rgba(255,255,255,.82);text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,153,0,.16);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--aws-orange)}
/* 导航图标：统一 24px 线性 SVG（stroke=currentColor），与深色侧栏同一套视觉语言 */
.nav-item .ni{width:17px;height:17px;flex:0 0 17px;opacity:.72;transition:opacity .15s ease,color .15s ease}
.nav-item .nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover .ni{opacity:1}
.nav-item.active .ni{color:var(--aws-orange);opacity:1}

/* 侧栏 chrome 防泄漏：个别页面写了通用选择器，会波及侧栏内的「客户视角」块，
   使该块高度随页面变化（实测 66px ↔ 76px），整列导航因此上下跳动 10px：
     · sup_import.php：select/input{width:100%;padding:9px 10px;font-size:14px} 波及下拉
                       另 label{display:block;…;margin:10px 0 4px} 波及「客户视角」标签
     · facts.php：      select/input/textarea{…} 使下拉 font-family 变成页面字体（高度差 2px）
   这里用更高优先级把侧栏 chrome 的盒模型与字体完全钉死，不受各页通用规则影响。 */
body .sidebar .sb-view{padding:10px 14px 2px}
body .sidebar .sb-view-label{
  display:block;margin:0 0 5px;padding:0;font-size:11px;line-height:1.4;
  letter-spacing:.04em;font-weight:400;color:rgba(255,255,255,.55);
}
body .sidebar .sb-view-sel{
  width:100%;height:31px;margin:0;padding:0 8px;box-sizing:border-box;
  font-family:var(--font-sans);font-size:13px;font-weight:400;line-height:29px;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);color:#fff;box-shadow:none;
}
body .sidebar .sb-view-sel option{color:var(--aws-text);background:var(--aws-white)}
body .sidebar .sb-view-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.5)}
body .sidebar select,
body .sidebar input,
body .sidebar button{
  font-family:var(--font-sans);font-size:13px;line-height:1.4;margin:0;
  border-radius:var(--r-sm);box-shadow:none;
}

/* 侧栏底部工具条（使用文档 / 退出登录） */
.sidebar-foot{
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.sidebar-foot a{color:rgba(255,255,255,.62);font-size:12.5px;text-decoration:none;transition:color .15s}
.sidebar-foot a:hover{color:var(--aws-orange)}

/* ---------- 3. 顶栏 / 内容容器 ---------- */
body .main .topbar{
  position:sticky;top:0;z-index:60;
  box-shadow:0 1px 2px rgba(16,24,40,.14);
}
body .main .topbar h1{font-size:16px;letter-spacing:-.01em}
/* ---------- 3.1 顶栏「当前组」二级导航（2026-10-12，单行版）----------
   背景：左侧导航收敛为「组目录」（只列组名），组内栏目改由顶栏承载 ——
   既让左栏不再滚动一屏，也填掉顶栏标题右侧的空白。
   实现：tabs 由 includes/nav.php 生成、DOMContentLoaded 时插到顶栏 <h1> 之后
   同一行（标题左 · tabs 段 · 右侧操作不动，顶栏保持 56px 单行），页面文件零改动。
   布局：标题列固定 150px，tabs 起点因此在各页之间完全一致 —— 否则标题长一点
   短一点就让整条 tabs 左右飘（用户反馈「不要变来变去的」）；因此顶栏标题必须
   是纯页面名（动态上下文如项目/品类请放内容区，不要塞进 h1）。
   窄屏：tabs 自身横向滚动（不换行、不把顶栏撑高）；真放不下时允许整行 wrap 兜底。 */
/* gap:0：个别页自带 .topbar{gap:12px}（如竞品渠道分析），会让 tabs 起点比别的页多 12px */
body .main .topbar,
body .lp-main .lp-topbar{height:auto;min-height:56px;flex-wrap:wrap;gap:0}
body .main .topbar>*,
body .lp-main .lp-topbar>*{min-height:56px;display:flex;align-items:center}
body .main .topbar>h1,
body .lp-main .lp-topbar>h1{
  flex:0 0 140px;width:140px;max-width:140px;
  display:block;line-height:56px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.geo-subnav{
  /* flex-basis:0（不是 auto）：换行的行分割按「假设主轴尺寸」算，若用 auto，
     右侧操作会被误判为放不下而折到第二行（顶栏变 112px）；置 0 后整行先排下，
     再让 tabs 吸收剩余空间，空间不够时 tabs 自己横向滚动。 */
  flex:1 1 0;min-width:0;height:56px;box-sizing:border-box;
  display:flex;align-items:center;gap:0;padding-left:10px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.geo-subnav::-webkit-scrollbar{display:none}
/* 尺寸刻意收紧（7 个一级栏目 + 右侧操作要挤在一条 56px 里）；
   宽度吃紧时宁可 tabs 略窄，也不要它们换行/滚动 —— 滚动会让各页可见标签不一致 */
.geo-subnav .gs-item{
  flex:none;display:inline-flex;align-items:center;height:56px;padding:0 7px;
  font-size:12.5px;color:rgba(255,255,255,.74);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.geo-subnav .gs-item:hover{color:#fff;background:rgba(255,255,255,.07)}
.geo-subnav .gs-item.on{color:#fff;font-weight:700;border-bottom-color:var(--aws-orange)}
/* 顶栏标题颜色权威兜底：两类骨架（.topbar / .lp-topbar）都强制白字，
   不依赖各页/loop.css 是否声明 color（此前 .lp-topbar h1 无 color，
   被全局 h1 规则染成近黑色，在深蓝顶栏上几乎不可见） */
body .main .topbar h1,
body .main .topbar h2,
body .lp-main .lp-topbar h1,
body .lp-main .lp-topbar h2{color:#fff}
/* 内容区统一铺满可用宽度（2026-10-08 取消各页原先的窄版式收窄，右侧不再留白） */
body .main .content{padding:26px 30px 60px;max-width:none;margin-left:0;margin-right:0}
body .lp-main .lp-content{padding:22px 26px 56px;max-width:none}

/* 2026-10-11：两类骨架（.main 系 / .lp-main 系）的顶栏与内容水平内边距统一，
   否则页面间切换时标题与内容左边界会有 4px 的横向跳动
   （原 .topbar 左右 28px vs .lp-topbar 24px；.content 30px vs .lp-content 26px） */
body .main .topbar,
body .lp-main .lp-topbar{padding-left:28px;padding-right:28px}
body .main .content,
body .lp-main .lp-content{padding-left:28px;padding-right:28px}

/* 通用页头（供新页面直接使用，对齐 sem.ibj.cn 的 .page-head） */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.page-head h1{font-size:26px;font-weight:700;color:var(--aws-navy);letter-spacing:-.5px;margin:0 0 4px}
.page-head p{color:var(--aws-text-secondary);font-size:14px;margin:0}
.page-head-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 4. 卡片 / 面板 ---------- */
body .main .card,
body .content .card,
body .main .panel,
body .main .banner,
body .lp-main .lp-card,
body .lp-main .lp-tree-item,
body .lp-main .lp-modal{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
}
body .main .card,
body .lp-main .lp-card{transition:box-shadow .15s ease}
body .main .card:hover,
body .lp-main .lp-card:hover{box-shadow:var(--sh-hover)}
body .lp-main .lp-card{border-color:var(--aws-border-light)}
body .lp-main .lp-modal{box-shadow:var(--sh-pop)}

body .main .card-h,
body .lp-main .lp-card-h{padding:14px 18px}
body .main .card-h h2,
body .lp-main .lp-card-h h2,
body .lp-main .lp-card-h h3{color:var(--aws-navy)}

body .main .card-link:hover,
body .main .card-link:hover .card-name{color:var(--aws-blue-hover)}

/* ---------- 5. KPI / 指标卡（只统一圆角与数字排版，保留各页左侧色条） ---------- */
body .main .kpi,
body .content .metric,
body .main .metric,
body .lp-main .lp-kpi{
  border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transition:box-shadow .15s ease,transform .15s ease;
}
body .main .kpi:hover,
body .content .metric:hover,
body .main .metric:hover{box-shadow:var(--sh-hover);transform:translateY(-1px)}
body .main .kpi .v,
body .content .metric .v,
body .main .metric .v,
body .lp-main .lp-kpi .v{
  font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
body .main .kpi .k,
body .main .kpi .d,
body .content .metric .l,
body .main .metric .l,
body .lp-main .lp-kpi .n{color:var(--aws-text-secondary)}
/* 闭环 KPI 数字回归深色（原先跟随蓝色主色，收敛为 AWS 深蓝） */
body .lp-main .lp-kpi .v{font-size:26px;color:var(--aws-navy)}

/* ---------- 6. 表格：仅补行反馈，不覆盖各页表头配色 ---------- */
body .main table tbody tr:not(.is-main):hover td,
body .content table tbody tr:not(.is-main):hover td,
body .lp-main table tbody tr:hover td{background:#FBFCFD}
body .main table tbody tr.selected td,
body .lp-main table tbody tr.selected td{background:var(--aws-orange-light)}
body .main table td.num,
body .content table td.num,
body .lp-main table td.num{font-variant-numeric:tabular-nums}
body .lp-main .lp-table th{background:#FAFAFA;color:var(--aws-text-secondary)}

/* ---------- 7. 按钮 ---------- */
body .main .btn,
body .content .btn,
body .lp-main .lp-btn{
  border-radius:var(--r-sm);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease,opacity .15s ease;
}
body .main .btn:not(:disabled):hover,
body .content .btn:not(:disabled):hover,
body .lp-main .lp-btn:not([disabled]):hover{box-shadow:var(--sh-hover)}
body .main .btn:not(:disabled):active,
body .lp-main .lp-btn:not([disabled]):active{transform:translateY(1px)}
body .main .btn-danger:hover{background:var(--aws-red-light);border-color:var(--aws-red)}

/* 闭环按钮：主色收敛为 AWS 橙 + 深色文字（与全站按钮一致） */
.lp-btn.primary{background:var(--aws-orange);border-color:var(--aws-orange);color:var(--aws-navy);font-weight:700}
.lp-btn.primary:hover{background:var(--aws-orange-hover);border-color:var(--aws-orange-hover);color:var(--aws-navy)}
.lp-btn.ok{background:var(--aws-green);border-color:var(--aws-green);color:#fff}
.lp-btn.danger{color:var(--aws-red);border-color:#F2C2C2;background:var(--aws-red-light)}
/* 正文（白底）里的 ghost 按钮：.lp-btn.ghost 原为深色顶栏设计（白字 + 透明底），
   出现在白底卡片/工具条里会「白字白底」变成一块空白 → 正文范围内还原为描边按钮 */
body .lp-content .lp-btn.ghost,
body .lp-card .lp-btn.ghost,
body .content .lp-btn.ghost{
  background:#fff;border-color:var(--lp-bd,#D5DBDB);color:var(--lp-txt,#16191F)
}
body .lp-content .lp-btn.ghost:not([disabled]):hover,
body .lp-card .lp-btn.ghost:not([disabled]):hover,
body .content .lp-btn.ghost:not(:disabled):hover{
  background:#F7F9FB;border-color:var(--aws-text-secondary,#545B64);color:var(--lp-txt,#16191F)
}

/* ---------- 8. 表单控件与焦点 ---------- */
body .main .form-input,
body .main .form-select,
body .main .form-textarea,
body .content .form-input,
body .content .form-select,
body .lp-main .lp-input,
body .lp-main .lp-select,
body .lp-main .lp-textarea{
  border-radius:var(--r-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
body .main .form-input:focus,
body .main .form-select:focus,
body .main .form-textarea:focus,
body .content .form-input:focus,
body .content .form-select:focus{border-color:var(--aws-orange);box-shadow:0 0 0 2px rgba(255,153,0,.22)}
body .lp-main .lp-input:focus,
body .lp-main .lp-select:focus,
body .lp-main .lp-textarea:focus{border-color:var(--aws-orange);box-shadow:0 0 0 2px rgba(255,153,0,.22)}
body .main input[type="checkbox"],
body .main input[type="radio"],
body .lp-main input[type="checkbox"],
body .lp-main input[type="radio"]{accent-color:var(--aws-orange)}

/* ---------- 9. 标签 / 徽标 ---------- */
body .main .tag,
body .lp-main .lp-tag,
body .lp-main .lp-badge,
body .main .tag-big{border-radius:var(--r-sm)}
body .main .tag.warn,
body .lp-main .lp-badge.warn{background:#FFF4E0;color:var(--aws-orange-hover)}
body .main .tag.success{background:var(--aws-green-light);color:var(--aws-green)}
body .main .tag.error{background:var(--aws-red-light);color:var(--aws-red)}

/* ---------- 10. 提示反馈（统一到顶部居中） ---------- */
body .toast,
body .lp-toast{
  position:fixed;top:18px;left:50%;right:auto;bottom:auto;
  transform:translateX(-50%);
  border-radius:var(--r-lg);font-weight:700;
  padding:10px 18px;box-shadow:0 4px 14px rgba(0,0,0,.25);
  animation:gx-toast-in .18s ease-out;
}
@keyframes gx-toast-in{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%)}}
body .lp-toast.ok{background:var(--aws-green)}
body .lp-toast.err{background:var(--aws-red)}
body .main .empty-tip,
body .main .loading-tip,
body .main .empty,
body .content .empty,
body .lp-main .lp-empty{color:var(--aws-text-tertiary)}

/* ---------- 11. 闭环层观感收敛 ---------- */
body .lp-main{background:var(--aws-bg)}
body .lp-main .lp-topbar{background:var(--aws-navy);box-shadow:0 1px 2px rgba(16,24,40,.14)}
body .lp-main .lp-sep{background:var(--aws-border-light)}
body .lp-main .lp-mask{background:rgba(22,25,31,.55)}
body .lp-main .lp-editor{border-radius:var(--r-sm)}
body .lp-main .lp-tag{background:var(--aws-orange-light);color:#B25E09}
body .lp-main .lp-badge{background:var(--aws-border-light);color:var(--aws-text-secondary)}
body .lp-main .lp-tree-item .idx{background:var(--aws-orange-light);color:#B25E09}
body .lp-main .lp-list-item.active{background:var(--aws-orange-light);border-left-color:var(--aws-orange)}
body .lp-main .lp-steps span.cur{background:var(--aws-orange-light);color:#B25E09}
body .lp-main .lp-steps span.done{background:var(--aws-green-light);color:#0F7A52}

/* ---------- 12. 回到顶部 / 移动端汉堡（固定悬浮控件） ---------- */
.gx-top{
  position:fixed;right:22px;bottom:22px;z-index:1500;
  width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--aws-navy);color:#fff;border:0;cursor:pointer;
  font-size:16px;line-height:1;box-shadow:var(--sh-hover);
  opacity:0;pointer-events:none;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,background .15s ease;
}
.gx-top.show{opacity:.94;pointer-events:auto;transform:none}
.gx-top:hover{background:var(--aws-navy-hover)}

/* 移动端汉堡按钮（≤992px 显示，点开侧栏抽屉） */
.gx-burger{
  display:none;position:fixed;top:11px;left:12px;z-index:1300;
  width:36px;height:34px;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--aws-navy);color:#fff;
  border:1px solid rgba(255,255,255,.18);cursor:pointer;font-size:16px;line-height:1;
  box-shadow:var(--sh-hover);
}
/* 抽屉遮罩 */
.gx-scrim{
  display:none;position:fixed;inset:0;z-index:1100;
  background:rgba(22,25,31,.5);opacity:0;transition:opacity .2s ease;
}
body.gx-nav-open .gx-scrim{display:block;opacity:1}
body.gx-nav-open{overflow:hidden}

/* ---------- 13. 响应式收敛 ---------- */
@media (max-width:1280px){
  body .main .content{padding:22px 20px 56px}
  body .lp-main .lp-content{padding:22px 20px 56px}   /* 与 .main 系一致，避免横向跳动 */
  body .main .card-h{padding:13px 16px}
}
@media (max-width:900px){
  .nav-item{margin:2px 8px}
  body .main .content{padding:16px 12px 48px}
  body .lp-main .lp-content{padding:16px 12px 48px}   /* 与 .main 系一致 */
  body .main .kpi .v,
  body .content .metric .v,
  body .main .metric .v{font-size:24px}
}

/* ---------- 14. 移动端抽屉导航（≤992px：侧栏离屏，汉堡唤出） ---------- */
@media (max-width:992px){
  .gx-burger{display:flex}
  .sidebar{
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:1200;box-shadow:none;
  }
  body.gx-nav-open .sidebar{transform:none;box-shadow:var(--sh-pop)}
  body .main,body .lp-main{margin-left:0}
  body .main .topbar{padding-left:56px}
  body .lp-main .lp-topbar{padding-left:56px}
  /* 各页内联的固定悬浮元素（筛选吸顶等）不受影响；表格容器允许横向滚动 */
  body .main .content,body .lp-main .lp-content{overflow-x:hidden}
  table{max-width:100%}
}

/* ---------- 15. （已移除）深色模式 ----------
   2026-10-11：按要求下线深色模式（含顶栏切换按钮与 index.php 的防闪烁脚本），
   全站保持浅色；令牌体系（--aws-* / --r-* / --sh-*）继续保留。 */