/* ---- 保持页面宽度稳定：即便没有滚动也预留滚动条沟槽 ---- */
html { 
  scrollbar-gutter: stable both-edges; }

/* 兜底：老浏览器不支持 scrollbar-gutter 时，强制预留竖向滚动条的空间 */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; }

/* ===== 全局：布局基础 ===== */


/* === 全站字体基线（中英一致） === */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter');
}

html, body, #root {
  /* 统一字体栈：西文 Inter；中文 Noto Sans SC / 系统中文 */
  font-family:
    Inter, "Inter var", "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 锁定“感知字号”，不同字体也保持相近视觉高度 */
  font-size-adjust: from-font;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;

  /* 全站字号基线与行高 */
  font-size: 14px;
  line-height: 1.45;

  /* 数字等宽，更稳 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "tnum";
}

/* 全站大标题/顶栏高度（与左侧 LOGO 对齐） */
:root { --topbar-h: 56px; }

.page-topbar {
  height: 80px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}

.site-title {
  font-size: clamp(28px, 2.2vw, 36px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

/* 二级标题（页面内小标题） */
.page-subtitle {
  font-size: 16px;
  font-weight: 700;
}

/* 卡片常用字号 */
.card-title { font-size: 12px; }
.card-value { font-size: 20px; font-weight: 800; }

/* Recharts 坐标轴刻度全站统一字号（避免回退字体改变字高） */
.recharts-xAxis .recharts-text tspan,
.recharts-yAxis .recharts-text tspan { font-size: 11px; }



*,
*::before,
*::after {
  box-sizing: border-box;
}

:root{
  /* 统一的头部高度（随视口自适应） */
  --header-h: clamp(60px, 9vh, 96px);

  /* Logo 占头部高度的比例（0.60~0.68 都比较好看） */
  --logo-scale: 0.62;

  /* 侧栏里 Logo 的目标高 = 头部高度 * 比例，再做上下限夹紧 */
  --sidebar-logo-h: clamp(40px, calc(var(--header-h) * var(--logo-scale)), 72px);

  /* 右栏过滤面板统一宽度（保持不变） */
  --filters-w: 280px;
}

/* 页面根：桌面端不滚动，小屏在媒体查询里允许滚动 */
html,
body,
#root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI,
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* 容器 */
.App {
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== 顶部 Header（粘顶） ===== */
.App-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  height: clamp(60px, 9vh, 96px);
  height: var(--header-h);
  flex: 0 0 clamp(60px, 9vh, 96px);
  flex: 0 0 var(--header-h);
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #eee;
  gap: 8px;
  flex-wrap: wrap;
}

.App-header h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 160px;
  font-size: clamp(16px, 2vw + 12px, 28px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-img {
  height: clamp(28px, 6vh, 48px);
  object-fit: contain;
  border-radius: 12px;
}

.language-switcher {
  flex: 0 0 auto;
}

.language-switcher button {
  margin-left: 8px;
  padding: 4px 8px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===== 主体：左侧导航 + 右侧内容容器 ===== */
.main {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* 左侧导航（固定宽度） */
.sidebar {
  width: 280px;
  padding: 20px;
  background: #fff;
  flex-shrink: 0;
  height: 100%;
  overflow: auto;
  border-right: 1px solid #eee;
}

.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  display: block;
  padding: 8px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

.sidebar a:hover {
  background: #f0f0f0;
}

.sidebar a.active {
  background: #e0e0e0;
}

/* 右侧内容外壳（各个页面） */
.content-wrapper {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* 🧱 === 通用：所有页面统一的双列布局 === */
.stores-layout,
.overview-layout,
.netsales-layout,
.cashflow-layout,
.mediaSpend-layout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

/* 主体列样式（保持滚动一致） */
.main-panel {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  height: 100%;
}

/* 右侧筛选栏（保持固定宽度） */
.filters-sidebar {
  flex: 0 0 280px;
  flex: 0 0 var(--filters-w);
  width: 280px;
  width: var(--filters-w);
  min-width: 280px;
  min-width: var(--filters-w);
  max-width: 280px;
  max-width: var(--filters-w);
  position: sticky;
  top: 0;                          /* ← 顶到页面顶部 */
  height: 100vh;                   /* ← 整列等高 */
  background: #fff;
  border-left: 1px solid #eee;     /* ← 第二条竖灰线 */
  border-radius: 0;                /* ← 不做卡片样式 */
  box-shadow: none;                /* ← 去掉阴影 */
  overflow-y: auto;
  padding: 12px;                   /* ← 右栏内部留白 */
  scrollbar-gutter: stable both-edges;
}


/* 右栏顶部：语言切换小区域 */
.filters-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 0 12px;
  border-bottom: 0; /* 保持干净，如需细分隔线可加 1px 灰线 */
}

.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-label  { color: #666; font-size: 14px; }
.lang-btn {
  padding: 4px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.lang-btn:hover { background: #f7f7f7; }


/* ================== 中列顶部条：站点名（与左列 logo 对齐） ================== */
.page-topbar{
  height: 80px;
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 4px;   /* 顶部条不需要太多留白 */
}

.site-title{
  margin:0;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw + 10px, 34px);
  letter-spacing: .2px;
}

/* 站点名下面一行：当前页的小标题（Overview / Media Spend / Cash Flow ...） */
.page-subtitle{
  margin: 4px 0 10px;
  font-size: 14px;
  color:#555;
  font-weight: 700;
}



/* 中列顶部条：站点名（与左列 logo 行同高） */
.page-topbar{
  height: 80px;
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 4px;
}

.site-title{
  margin:0;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw + 10px, 34px);
  letter-spacing:.2px;
}

/* 站点名下的小标题（当前页面名） */
.page-subtitle{
  margin: 6px 0 10px;
  font-size: 14px;
  color:#555;
  font-weight: 700;
}

/* 由于删除了全局 header，主容器直接占满高度 */
.main{
  flex: 1 1 auto;
  display:flex;
  height: 100%;
  overflow:hidden;
  min-width:0; min-height:0;
}


/* 如果右上角有图标（<img> 或 <svg>），给它加这个类以对齐高度 */
.language-switcher .lang-icon{
  height: calc(clamp(60px, 9vh, 96px) * 0.32);
  height: calc(var(--header-h) * 0.32);
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* 如果是按钮文字，也可以用这个保证与标题行对齐的高度 */
.language-switcher button{
  height: calc(clamp(60px, 9vh, 96px) * 0.52);
  height: calc(var(--header-h) * 0.52);
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
}


/* 让中列各页面的顶部标题行与左列 logo 行等高 */
.overview-layout .overview-header,
.netsales-layout .overview-header,
.cashflow-layout .overview-header,
.mediaSpend-layout .overview-header {
  min-height: 80px;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;  /* ✅ 垂直居中，和左侧 Logo 对齐 */
  padding-top: 0;
  padding-bottom: 0;
}

/* 标题本身去掉额外空白，避免撑高 */
.overview-header .page-title {
  margin: 0;
  line-height: 1;
}



/* ===== 小屏（≤1024px）：单列布局 ===== */
@media (max-width: 1024px) {
  html,
  body,
  #root {
    overflow: auto;
  }

  .App-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 16px;
    height: auto;
    min-height: clamp(60px, 9vh, 96px);
    min-height: var(--header-h);
  }

  .main {
    flex-direction: column;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar {
    width: 100%;
    height: auto;
    overflow: visible;
    border-bottom: 1px solid #eee;
  }

  .content-wrapper {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* 小屏时隐藏右侧筛选栏 */
  .filters-sidebar {
    display: none;
  }

   :root{
    --logo-scale: 0.58;  /* 小屏稍微小一点，避免顶到边 */
  }

  .main, .App, .content-wrapper {
    height: auto !important;
    min-height: 100vh;
  }
}


/* ===== 全局尺寸放大：站点名/顶栏高度 ===== */
:root{
  /* 顶部对齐用高度（左列 LOGO 与中列标题齐平） */
  --topbar-h: 72px; /* 原 56 → 72，更挺拔 */
  /* 站点标题字号（自适应区间），整体更醒目 */
  --site-title-fs: clamp(24px, 2.4vw + 14px, 40px);
}

/* 每个页面顶部那一行（你在各页用了 .page-topbar / .site-title） */
.page-topbar{
  height: 80px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.site-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 2.6vw + 14px, 44px);
  font-size: var(--site-title-fs);
  line-height: 1.1;
}


:root{
  --topbar-h: 80px;                               /* 与 Sidebar.css 一致 */
  --site-title-fs: clamp(28px, 2.6vw + 14px, 44px);  /* 大标题更醒目 */
}
.page-topbar{
  height: 80px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.site-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 2.6vw + 14px, 44px);
  font-size: var(--site-title-fs);
  line-height: 1.1;
}


/* 仅移动端显示的小组件占位 */
.only-mobile { display: none; }
@media (max-width: 1024px) {
  .only-mobile { display: block; margin-left: auto; }
}


/* 居中 Loading / Error 覆盖层 */
.loading-overlay{
  position: fixed; inset: 0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.6);
  z-index: 999;
}
.loading-card{
  min-width: 220px; padding: 16px 20px;
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex; gap:12px; align-items:center; justify-content:center;
}
.spinner{
  width:18px; height:18px; border:2px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%;
  animation:spin .9s linear infinite;
}
.loading-text{ font-size:14px; color:#374151; }
.btn{ margin-left:8px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; }
@keyframes spin { to { transform: rotate(360deg); } }



:root{
  /* 左侧 logo 行 与 中列站点名行的统一高度（放大一些） */
  --topbar-h: 68px;
  --sb-item-h: 44px;     /* 每个导航项高度，略放大，切换语言也不抖动 */
  --sb-radius: 12px;     /* 圆角半径 */
}

/* 顶部 logo 行（去掉那条灰线，整体更干净） */
.sidebar .sidebar-logo{
  height: 68px;
  height: var(--topbar-h);
  display:flex; align-items:center; gap: 12px;
  padding: 10px 12px 10px 10px;
  border-bottom: none;                 /* ← 去线 */
}

.sidebar .sidebar-logo img{
  height: clamp(40px, 5.2vh, 56px);    /* 放大一点，按屏幕自适应 */
  width:  auto;
  object-fit: contain;
  border-radius: 12px;
}

/* 组标题：更圆润、留白更大、无分割线 */
.sidebar-section { margin: 18px 0 12px; } /* Pages 与 Dashboards 之间靠 margin 拉开 */
.sidebar-section h4{
  margin: 0 0 10px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #a0a6b1;                      /* 较淡的灰 */
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* 列表项：圆润、浅灰交互、无蓝色 */
.sidebar a{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 44px;
  height: var(--sb-item-h);
  line-height: 44px;
  line-height: var(--sb-item-h);
  padding: 0 12px 0 10px;
  color: #1f2937;                      /* 深灰文字 */
  text-decoration: none;
  font-weight: 600;
  border-radius: 12px;
  border-radius: var(--sb-radius);
  transition: background .15s ease, transform .06s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 图标固定占位，不随文字变化 */
.sidebar .nav-icon{
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
}

/* 悬停/按下：柔和灰与轻微动效 */
.sidebar a:hover{  background: #f4f6f9; }
.sidebar a:active{ transform: translateY(1px); }

/* 选中：浅灰 pill，不用蓝色；更圆润一点 */
.sidebar a.active{
  background: #eef1f6;                 /* 柔和浅灰 */
  color: #111;
  box-shadow: inset 0 0 0 1px #e7ebf2; /* 轻描边，提升质感 */
}

/* 焦点（键盘导航） */
.sidebar a:focus-visible{
  outline: 2px solid #dbe3f0;
  outline-offset: 2px;
}


/* 让 Pages、Dashboards 两个分组之间留更大一段距离 */
.sidebar .sidebar-section {
  margin: 18px 0 0;                 /* 每个分组上方有空间 */
}
.sidebar .sidebar-section + .sidebar-section {
  margin-top: 28px;                 /* 分组与分组之间再拉开 */
}

/* 组标题保持靠左（轻微内缩），列表整体比标题再向右一点 */
.sidebar .sidebar-section h4 {
  margin: 0 0 10px 10px;            /* 标题轻微内缩 */
}

/* 列表项整体右缩进（相对标题多缩一些），并让“胶囊”不要顶到边 */
.sidebar .sidebar-section ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}
.sidebar .sidebar-section li { 
  margin: 4px 0; 
}

/* 关键：给 a 一个左右外边距，将整行“胶囊”往右推一点（和标题不对齐） */
.sidebar .sidebar-section li a{
  margin: 0 8px 0 16px;             /* ← 右移；你想再多右一点就把 16 改 20/24 */
}

/* 选中/悬停样式沿用之前的柔和灰，不改变 */
.sidebar a:hover  { background: #f4f6f9; }
.sidebar a.active { background: #eef1f6; color:#111; box-shadow: inset 0 0 0 1px #e7ebf2; }

/* 行高与布局“锁定”——语言切换时不挪位 */
.sidebar a {
  display: grid;
  grid-template-columns: 20px 1fr;   /* 图标列 + 文本列 */
  align-items: center;
  grid-column-gap: 10px;
  column-gap: 10px;
  min-height: 36px;                  /* 固定行高 */
  font-size: 14px;
}

/* === 修正：移动端 Sidebar 不要省略号，允许换行两行显示 === */
@media (max-width: 1024px) {
  /* Sidebar 容器允许收缩，避免把内容挤爆 */
  .sidebar { min-width: 0; }

  /* 文字容器：把 white-space 改成 normal；取消 ellipsis */
  .sidebar .menu-item .label,
  .sidebar .menu .item .label,
  .sidebar .item-label {
    white-space: normal;        /* 允许换行 */
    overflow: visible;          /* 不裁剪 */
    text-overflow: clip;        /* 不显示 … */
    word-break: break-word;     /* 超长单词可断行 */
    line-height: 1.2;
  }

  /* 可选：菜单列宽稍微放宽一点点，留出两行空间 */
  .sidebar { width: 220px; }    /* 你当前是 200/208 就保持接近这个数 */
  .sidebar .menu-item { min-height: 44px; }
}

/* === 修正：移动端 Sidebar 文字允许换行，不裁剪 === */
@media (max-width: 1024px) {
  .sidebar { min-width: 0; width: 220px; }

  /* 关键覆盖：让链接可换行、不过度裁剪，并把固定行高去掉 */
  .sidebar a {
    white-space: normal !important;   /* 允许换行 */
    overflow: visible !important;     /* 不裁剪 */
    text-overflow: clip !important;   /* 不显示省略号 */
    height: auto;                     /* 不固定高度 */
    min-height: 44px;                 /* 至少一行半的高度，能容纳两行 */
    line-height: 1.2;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* 纯文本链接（没有图标）不需要两列网格，给满宽度 */
  .sidebar .sidebar-section li > a:not(:has(.nav-icon)) {
    display: block;                   /* 不用 grid，两行更自然 */
  }

  /* 如果你的浏览器不支持 :has，下面这一条也能缓解（可选） */
  /* .sidebar .sidebar-section:nth-of-type(2) li > a { display:block; } */
}


/* ========== 页面布局 ========== */
.overview-layout {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  min-height: 0;
}

.main-panel {
  flex: 1 1 auto;
  min-width: 0;
}

/* 顶部栏（标题 + 移动端语言切换） */
.page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 8px;
}
.site-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.only-mobile { display: none; }

/* 第二行：小标题 + 时间/筛选按钮 */
.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-subtitle {
  font-size: 16px;
  font-weight: 700;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-button-mobile {
  display: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 统计卡片 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}
.card {
  background: #f6f7ff;
  border-radius: 12px;
  padding: 12px 16px;
}
.card-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}
.card-value {
  font-size: 22px;
  font-weight: 700;
}

/* 区块标题 */
.section-title {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 700;
}

/* 顶部柱状图容器 */
.chart-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.chart-wrap { height: 340px; height: var(--barH, 340px); }

/* 底部增长区（左右两卡） */
.growth-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  min-height: 0;
}
.growth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* GrowthCard 表头 & 切换按钮 */
.growth-card .card-tools {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.growth-card .card-tools h4 {
  margin: 0;
  font-size: 16px;   /* 与 GMV 匹配 */
  font-weight: 700;
}
.growth-card .btn-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}
.growth-card .btn-toggle:hover { background: #f7f7f7; }

/* ========== 表格样式（均分列宽版本） ========== */
.table-wrap {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 4px 0 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 避免内容挤压导致列变宽 */
}

.mini-table th,
.mini-table td {
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid #f2f2f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-table thead th {
  background: #fafafa;
  font-weight: 600;
  color: #555;
  text-align: left;    /* 表头左对齐 */
  line-height: 1.2;
}

/* 单元格对齐：第一列（时间/门店）左对齐，其余右对齐 */
.mini-table td { text-align: right; }
.mini-table th:first-child,
.mini-table td:first-child { text-align: left; }

/* 均分列宽：根据列数自动均分（4 列 / 5 列） */
.mini-table.cols-4 th, .mini-table.cols-4 td { width: 25%; }
.mini-table.cols-5 th, .mini-table.cols-5 td { width: 20%; }

.mini-table .ta-right {
  text-align: center !important;
}

/* 空状态 */
.empty {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa0a6;
  background: #fafafa;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
}

/* 分页器 */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pagination button {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.pagination button:hover:not(:disabled) { background: #f5f5f5; }
.pagination button:disabled {
  color: #bbb;
  cursor: not-allowed;
}

/* 右侧筛选栏外层（由页面其他文件控制显示/隐藏） */
.filters-sidebar { min-width: 280px; }

/* Loading / Error 遮罩（可选） */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.loading-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: sp 0.8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg);} }

/* 按钮通用（与切换键一致） */
.overview-layout .btn-toggle {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.overview-layout .btn-toggle:hover { background: #f7f7f7; }

/* 父级容器最小宽度修正，避免内容被挤爆 */
.overview-layout,
.main-panel,
.growth-section,
.growth-card { min-width: 0; }


/* ===== 顶部标题右侧图例样式（统一风格） ===== */
.overview-layout .chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.overview-layout .chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.overview-layout .chart-header .chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
}

.overview-layout .chart-header .divider {
  width: 1px;
  height: 14px;
  background-color: #ddd;
  margin: 0 4px;
}

.overview-layout .chart-header .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.overview-layout .chart-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.overview-layout .chart-header .dot.blue {
  background-color: #8cb4f0;
}

.mini-pager {
  display: flex;
  justify-content: flex-end; /* ✅ 靠右 */
  align-items: center;
  padding: 6px 8px 0;
  gap: 6px;
}

.pager-btn {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.pager-btn:hover:not(:disabled) {
  background: #f3f3f3;
}

.pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ========== 响应式 ========== */
@media (max-width: 1024px) {
  .overview-layout { display: block; }
  .filters-sidebar { display: none; }

  .only-mobile { display: block; }
  .filter-button-mobile { display: inline-flex; }

  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .growth-section { grid-template-columns: 1fr; }

  .chart-wrap { height: 300px; }
}

/* ========== 公用筛选面板（店铺 / 平台） ========== */

/* ✅ 在过滤面板层级“锁排版”：字体族/字号/行高固定，避免语言切换抖动 */
.filters-panel {
  /* 独立字体栈（中英都好看、度量接近） */
  font-family:
    Inter, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei",
    sans-serif !important;

  font-size: 13px !important;    /* 固定字号 */
  line-height: 1 !important;     /* 行高由容器高度控制 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;

  display: grid;
  grid-gap: 12px;
  gap: 12px;
  flex: 0 0 280px;
  position: sticky;
  top: 12px;
  max-height: calc(100% - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 12px;
}

/* 浏览器支持时，进一步校平不同字体的视觉大小 */
@supports (font-size-adjust: 1) {
  .filters-panel { font-size-adjust: 0.5; }
}

/* 分组盒子 */
.store-box { display: block; }

/* 分组标题（固定字号/不换行） */
.box-title {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

/* 搜索（如后续启用） */
.filter-search { margin: 6px 0 8px; }
.filter-search input {
  width: 100%;
  height: 32px;
  padding: 6px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.filter-search input::placeholder { color: #9aa1a9; }
.filter-search input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

/* ✅ 单条选项：用“固定高度 + 居中”而不是文字行高 */
.store-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 固定高度，语言切换不改 */
  height: 28px;
  padding: 0;            /* 不靠内边距撑高 */
  -webkit-user-select: none;
          user-select: none;
}

.store-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #111;
  cursor: pointer;
  flex: 0 0 14px;
}

.store-item label {
  cursor: pointer;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;    /* ✅ 强制单行，避免换行拉高 */
  font-size: 13px;        /* 固定字号 */
  line-height: 1;         /* 不依赖行高 */
  color: #111;
}

/* “全选”行 + 计数 */
.store-item.all {
  font-weight: 600;
  height: 30px;                  /* 比普通项略高一点 */
  border-bottom: 1px dashed #f0f0f0;
  margin-bottom: 6px;
}
.store-item .count {
  margin-left: auto;
  color: #888;
  font-size: 12px;
  line-height: 1;                /* 锁死 */
}

/* 下拉更多（按钮/菜单固定高度/字号） */
.more-wrap { position: relative; margin-top: 4px; }
.more-btn {
  width: 100%;
  height: 30px;                  /* 固定高 */
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;               /* 固定字 */
  line-height: 1;                /* 锁死行高 */
  cursor: pointer;
}
.more-btn:hover { background: #f7f7f7; }

.more-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  min-width: 220px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,24,39,.08);
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
}
.more-menu .store-item { height: 28px; }
.more-menu .menu-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.more-menu .btn-outline {
  flex: 0 0 auto;
  padding: 5px 10px;
}

/* 操作按钮（清空等）——固定高度/字号 */
.filter-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.btn-outline {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  height: 30px;                  /* 固定高 */
  font-size: 12px;               /* 固定字 */
  line-height: 30px;             /* 仅用于垂直居中按钮文本 */
  cursor: pointer;
}
.btn-outline:hover { background: #f7f7f7; }

/* 紧凑模式（窄侧栏时维持固定高度，不用行高） */
@media (max-width: 1200px) {
  .filter-search input { height: 30px; }
  .store-item { height: 26px; }
  .btn-outline { height: 28px; line-height: 28px; }
}

/* 遮罩 */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 1000;
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* 右侧抽屉面板 */
.drawer-panel {
  position: fixed;
  top: 0;
  right: -85%;
  width: 85%;
  max-width: 420px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 12px rgba(0,0,0,.15);
  border-radius: 12px 0 0 12px;
  padding: 14px;
  box-sizing: border-box;
  transition: right .25s;
  z-index: 1001;
  overflow: auto;
}
.drawer-panel.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
}
.drawer-title {
  font-size: 16px;
  font-weight: 600;
}
.drawer-close {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

/* 打开抽屉时锁定页面滚动 */
.no-scroll {
  overflow: hidden !important;
}

@charset "UTF-8";
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: normal;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 1.7rem / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.5rem;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__children-container {
  width: 13.8rem;
  margin: 0.4rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* 容器与分组：允许换行 */
.trp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* ✅ 窄屏会自动换行 */
  gap: 8px 10px;
}
.trp .date-picker-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* —— 核心：弹性“固定宽” —— 
   clamp(min, preferred, max) + flex-basis 让其自适应但不抖动 */
.trp-field {
  flex: 0 0 clamp(110px, 16vw, 180px);
  width: clamp(110px, 16vw, 180px);
  box-sizing: border-box;
}

.trp-select {
  height: 32px;
  padding: 4px 8px;
}

/* react-datepicker 的包裹元素 */
/* .trp-wrapper {} */

/* 真正的 input 占满包装宽度 */
.trp-input {
  width: 100% !important;
  height: 32px;
  padding: 4px 8px;
  box-sizing: border-box;
}

.trp-sep {
  display: inline-block;
  width: 18px;             /* 固定分隔符宽，避免位置抖动 */
  text-align: center;
  color: #666;
}

/* 小屏优化：两列 */
@media (max-width: 768px) {
  .trp-field {
    flex-basis: 48%;
    width: 48%;
  }
  .trp-sep { width: auto; }
}

/* 超小屏：一列铺满 */
@media (max-width: 480px) {
  .trp-field {
    flex-basis: 100%;
    width: 100%;
  }
  .trp .date-picker-group { gap: 6px; }
}

/* 让弹层不被图表/侧边栏遮住（可按需调大） */
.react-datepicker-popper {
  z-index: 60;
}

/* ========== NetSales 页面（以 .netsales-layout 命名空间） ========== */
.netsales-layout {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  min-height: 0;
}

/* 兜底：确保 main-panel 是块状布局 */
.netsales-layout .main-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  gap: 0;
}

/* 与左侧 LOGO 对齐的站点名行（使用全局 --topbar-h） */
.page-topbar {
  height: 56px;
  height: var(--topbar-h, 56px);
  display: flex; align-items: center;
  padding: 0 2px;
}
.site-title { margin: 0; font-weight: 800; font-size: 28px; }

/* ===== 头部（页内） ===== */
.netsales-layout .overview-header { display: flex; align-items: center; gap: 12px; }
.netsales-layout .page-subtitle { font-size: 15px; font-weight: 700; }
.netsales-layout .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 移动端“筛选”按钮 */
.netsales-layout .filter-button-mobile {
  display: none;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

/* ===== KPI ===== */
.netsales-layout .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.netsales-layout .card { background: #f7f7fb; border-radius: 14px; padding: 12px 16px; box-shadow: inset 0 0 0 1px #eef1ff; }
.netsales-layout .card.bg-purple { background: #f5f2ff; }
.netsales-layout .card.bg-blue   { background: #f1f7ff; }
.netsales-layout .card-title { font-size: 12px; color: #666; margin-bottom: 6px; }
.netsales-layout .card-value { font-size: 20px; font-weight: 800; }

/* ===== 柱状图 ===== */
.netsales-layout .chart-section {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 12px 16px;
}
.netsales-layout .chart-section > h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; }
.netsales-layout .chart-section .chart-wrap { height: 300px; height: var(--barH, 300px); width: 100%; }

/* ===== 增长图 ===== */
.netsales-layout .growth-section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; min-height: 0; margin-bottom: 12px; }
.netsales-layout .growth-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px; display: flex; flex-direction: column; min-height: 0;
}
.netsales-layout .card-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; justify-content: space-between; }
.netsales-layout .card-tools h4 { margin: 0; font-size: 16px; font-weight: 700; }
.netsales-layout .growth-body { min-height: 220px; min-height: var(--growthH, 220px); display: flex; }
.netsales-layout .line-wrap   { height: 220px; height: var(--growthH, 220px); width: 100%; }

/* TableCard 内部 */
.netsales-layout .btn-toggle { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.netsales-layout .btn-toggle:hover { background: #f7f7f7; }
.netsales-layout .table-wrap { width: 100%; height: 100%; overflow: auto; }
.netsales-layout .mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.netsales-layout .mini-table th, .netsales-layout .mini-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; }
.netsales-layout .mini-pager { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.netsales-layout .mini-pager .pager-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }

/* 允许坐标轴刻度外溢显示，避免裁剪 */
.netsales-layout .growth-card .line-wrap { overflow: visible; }
.netsales-layout .growth-card .recharts-responsive-container,
.netsales-layout .growth-card .recharts-wrapper { overflow: visible !important; }

/* ===== Details 表格 ===== */
.netsales-layout .table-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px;
}
.netsales-layout .table-card > h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.netsales-layout .table-scroll { overflow: auto; border-radius: 12px; }

.netsales-layout .details-table,
.netsales-layout .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; }

.netsales-layout .details-table thead th,
.netsales-layout .data-table thead th {
  font-weight: 600; color: #555; background: #f7f7fb; padding: 10px 12px; border-bottom: 1px solid #eef0f6;
  white-space: nowrap; text-align: left;
}

/* 表头支持换行（给需要的 th 加 .th-wrap） */
.netsales-layout .th-wrap { white-space: normal !important; line-height: 1.1; }

/* 分组表头居中 */
.netsales-layout .details-table thead th.group,
.netsales-layout .data-table thead th.group { text-align: center; font-weight: 700; }

/* 虚位占格行 */
.netsales-layout .details-table thead th.spacer,
.netsales-layout .data-table thead th.spacer { background: #fff; border-bottom: none; height: 0; padding: 0 12px; }

/* 首列吸顶 */
.netsales-layout .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }

.netsales-layout .details-table th,
.netsales-layout .details-table td,
.netsales-layout .data-table th,
.netsales-layout .data-table td {
  padding: 10px 12px; border-bottom: 1px solid #f1f1f4; white-space: nowrap;
}

/* 交替行色 + 白缝 */
.netsales-layout .details-table tbody tr:nth-child(odd) td,
.netsales-layout .data-table    tbody tr:nth-child(odd) td {
  background: #f2f6ff;
  border-bottom: 2px solid #fff;
}
.netsales-layout .details-table tbody tr:nth-child(even) td,
.netsales-layout .data-table    tbody tr:nth-child(even) td {
  background: #f8f5ff;
  border-bottom: 1px solid #fff;
}
.netsales-layout .details-table tbody tr:last-child td,
.netsales-layout .data-table    tbody tr:last-child td {
  border-bottom: 2px solid #e8e8e8;
}

/* 表角圆角 */
.netsales-layout .details-table thead th:first-child,
.netsales-layout .data-table thead th:first-child { border-top-left-radius: 12px; }
.netsales-layout .details-table thead th:last-child,
.netsales-layout .data-table thead th:last-child  { border-top-right-radius: 12px; }
.netsales-layout .details-table tbody tr:last-child td:first-child,
.netsales-layout .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.netsales-layout .details-table tbody tr:last-child td:last-child,
.netsales-layout .data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 12px; }

/* 百分比小字 */
.netsales-layout .cell-val { font-size: 14px; font-weight: 600; }
.netsales-layout .cell-sub { font-size: 11px; color: #777; line-height: 1.1; margin-top: 2px; }

.netsales-layout .ta-right { text-align: right; }
.netsales-layout .ta-center { text-align: center; }

/* 分页条 */
.netsales-layout .table-pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 4px 0; font-size: 13px; }
.netsales-layout .pager-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }
.netsales-layout .pager-btn:disabled { opacity: .5; cursor: not-allowed; }
.netsales-layout .pager-info { color: #666; }

/* Recharts 容器兜底裁剪 */
.netsales-layout .chart-wrap,
.netsales-layout .recharts-responsive-container,
.netsales-layout .recharts-wrapper { position: relative; overflow: hidden; }

/* No data */
.netsales-layout .no-data {
  width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center;
  color: #9aa0a6; background: #fafafa; border: 1px dashed #eee; border-radius: 12px; font-size: 14px;
}
.netsales-layout .no-data-row { height: 120px; color: #9aa0a6 !important; text-align: center; }

/* 默认高度 */
.netsales-layout .chart-section .chart-wrap { height: 300px; }
.netsales-layout .growth-card  .line-wrap   { height: 220px; }



/* ==== YoY / MoM Growth 小表格样式（整体居中） ==== */
.netsales-layout .mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 700px;           /* 防止列太窄导致数字挤压 */
  font-size: 12px;
  text-align: center;         /* ✅ 整表水平居中 */
}

.netsales-layout .mini-table th,
.netsales-layout .mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  text-align: center;         /* ✅ 所有列（含第一列）都水平居中 */
  vertical-align: middle;     /* ✅ 垂直居中 */
}


/* ===== 顶部标题右侧图例（模仿 Media Spend） ===== */
.netsales-layout .chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.netsales-layout .chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.netsales-layout .chart-header .chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
}

.netsales-layout .chart-header .divider {
  width: 1px;
  height: 14px;
  background-color: #ddd;
  margin: 0 4px;
}

.netsales-layout .chart-header .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.netsales-layout .chart-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.netsales-layout .chart-header .dot.blue {
  background-color: #8cb4f0;
}

.netsales-layout .chart-header .dot.gray {
  background-color: #b3b3b3;
}

.table-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
}

.table-header h3 {
  margin-bottom: 2px;
}

.table-note {
  font-size: 13px;
  color: #888;
  margin: 0 0 6px 2px;
  line-height: 1.4;
}


/* 响应式 */
@media (max-width: 1200px) { .netsales-layout .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
  .netsales-layout { display: block; }
  .netsales-layout .filters-sidebar { display: none; }
  .netsales-layout .main-panel { display: block; }
  .netsales-layout .filter-button-mobile { display: inline-flex; }
  .netsales-layout .stat-cards { grid-template-columns: 1fr 1fr; }
  .netsales-layout .growth-section { grid-template-columns: 1fr; }
  :root { --barH: 300px; --growthH: 220px; }
}
@media (max-width: 640px) { .netsales-layout .stat-cards { grid-template-columns: 1fr; } }

/* ========== Cashflow 页面（以 .cashflow-layout 命名空间） ========== */
.cashflow-layout {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  min-height: 0;
}

/* 兜底：确保 main-panel 是块状布局 */
.cashflow-layout .main-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  gap: 0;  
}

/* 与左侧 LOGO 对齐的站点名行（使用全局 --topbar-h） */
.page-topbar {
  height: 56px;
  height: var(--topbar-h, 56px);
  display: flex; align-items: center;
  padding: 0 2px;
}
.site-title { margin: 0; font-weight: 800; font-size: 28px; }

/* ===== 头部（页内） ===== */
.cashflow-layout .overview-header { display: flex; align-items: center; gap: 12px; }
.cashflow-layout .page-subtitle { font-size: 15px; font-weight: 700; }
.cashflow-layout .header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 移动端“筛选”按钮 */
.cashflow-layout .filter-button-mobile {
  display: none;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
}

/* ===== KPI ===== */
.cashflow-layout .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.cashflow-layout .card { background: #f7f7fb; border-radius: 14px; padding: 12px 16px; box-shadow: inset 0 0 0 1px #eef1ff; }
.cashflow-layout .card.bg-purple { background: #f5f2ff; }
.cashflow-layout .card.bg-blue   { background: #f1f7ff; }
.cashflow-layout .card-title { font-size: 12px; color: #666; margin-bottom: 6px; }
.cashflow-layout .card-value { font-size: 20px; font-weight: 800; }

/* ===== 柱状图 ===== */
.cashflow-layout .chart-section {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 12px 16px;
}
.cashflow-layout .chart-section > h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 700; }
.cashflow-layout .chart-section .chart-wrap { height: 300px; height: var(--barH, 300px); width: 100%; }

/* ===== 增长图 ===== */
.cashflow-layout .growth-section { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; min-height: 0; margin-bottom: 12px; }
.cashflow-layout .growth-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px; display: flex; flex-direction: column; min-height: 0;
}
.cashflow-layout .card-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; justify-content: space-between; }
.cashflow-layout .card-tools h4 { margin: 0; font-size: 16px; font-weight: 700; }
.cashflow-layout .growth-body { min-height: 220px; min-height: var(--growthH, 220px); display: flex; }
.cashflow-layout .line-wrap   { height: 220px; height: var(--growthH, 220px); width: 100%; }

/* TableCard 内部 */
.cashflow-layout .btn-toggle { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.cashflow-layout .btn-toggle:hover { background: #f7f7f7; }
.cashflow-layout .table-wrap { width: 100%; height: 100%; overflow: auto; }
.cashflow-layout .mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cashflow-layout .mini-table th, .cashflow-layout .mini-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; }
.cashflow-layout .mini-pager { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.cashflow-layout .mini-pager .pager-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }

/* 允许坐标轴刻度外溢显示，避免裁剪 */
.cashflow-layout .growth-card .line-wrap { overflow: visible; }
.cashflow-layout .growth-card .recharts-responsive-container,
.cashflow-layout .growth-card .recharts-wrapper { overflow: visible !important; }

/* ===== Details 表格 ===== */
.cashflow-layout .table-card {
  position: relative; overflow: hidden;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px;
}
.cashflow-layout .table-card > h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.cashflow-layout .table-scroll { overflow: auto; border-radius: 12px; }

.cashflow-layout .details-table,
.cashflow-layout .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; }

.cashflow-layout .details-table thead th,
.cashflow-layout .data-table thead th {
  font-weight: 600; color: #555; background: #f7f7fb; padding: 10px 12px; border-bottom: 1px solid #eef0f6;
  white-space: nowrap; text-align: left;
}

/* 表头支持换行（给需要的 th 加 .th-wrap） */
.cashflow-layout .th-wrap { white-space: normal !important; line-height: 1.1; }

/* 分组表头居中 */
.cashflow-layout .details-table thead th.group,
.cashflow-layout .data-table thead th.group { text-align: center; font-weight: 700; }

/* 虚位占格行 */
.cashflow-layout .details-table thead th.spacer,
.cashflow-layout .data-table thead th.spacer { background: #fff; border-bottom: none; height: 0; padding: 0 12px; }

/* 首列吸顶 */
.cashflow-layout .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }

.cashflow-layout .details-table th,
.cashflow-layout .details-table td,
.cashflow-layout .data-table th,
.cashflow-layout .data-table td {
  padding: 10px 12px; border-bottom: 1px solid #f1f1f4; white-space: nowrap;
}

/* 交替行色 + 白缝 */
.cashflow-layout .details-table tbody tr:nth-child(odd) td,
.cashflow-layout .data-table    tbody tr:nth-child(odd) td {
  background: #f2f6ff;
  border-bottom: 2px solid #fff;
}
.cashflow-layout .details-table tbody tr:nth-child(even) td,
.cashflow-layout .data-table    tbody tr:nth-child(even) td {
  background: #f8f5ff;
  border-bottom: 1px solid #fff;
}
.cashflow-layout .details-table tbody tr:last-child td,
.cashflow-layout .data-table    tbody tr:last-child td {
  border-bottom: 2px solid #e8e8e8;
}

/* 表角圆角 */
.cashflow-layout .details-table thead th:first-child,
.cashflow-layout .data-table thead th:first-child { border-top-left-radius: 12px; }
.cashflow-layout .details-table thead th:last-child,
.cashflow-layout .data-table thead th:last-child  { border-top-right-radius: 12px; }
.cashflow-layout .details-table tbody tr:last-child td:first-child,
.cashflow-layout .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.cashflow-layout .details-table tbody tr:last-child td:last-child,
.cashflow-layout .data-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 12px; }

/* 百分比小字 */
.cashflow-layout .cell-val { font-size: 14px; font-weight: 600; }
.cashflow-layout .cell-sub { font-size: 11px; color: #777; line-height: 1.1; margin-top: 2px; }

.cashflow-layout .ta-right { text-align: right; }
.cashflow-layout .ta-center { text-align: center; }

/* 分页条 */
.cashflow-layout .table-pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 4px 0; font-size: 13px; }
.cashflow-layout .pager-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; }
.cashflow-layout .pager-btn:disabled { opacity: .5; cursor: not-allowed; }
.cashflow-layout .pager-info { color: #666; }

/* Recharts 容器兜底裁剪 */
.cashflow-layout .chart-wrap,
.cashflow-layout .recharts-responsive-container,
.cashflow-layout .recharts-wrapper { position: relative; overflow: hidden; }

/* No data */
.cashflow-layout .no-data {
  width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center;
  color: #9aa0a6; background: #fafafa; border: 1px dashed #eee; border-radius: 12px; font-size: 14px;
}
.cashflow-layout .no-data-row { height: 120px; color: #9aa0a6 !important; text-align: center; }

/* 默认高度 */
.cashflow-layout .chart-section .chart-wrap { height: 300px; }
.cashflow-layout .growth-card  .line-wrap   { height: 220px; }



/* ==== YoY / MoM Growth 小表格样式（整体居中） ==== */
.cashflow-layout .mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 700px;           /* 防止列太窄导致数字挤压 */
  font-size: 12px;
  text-align: center;         /* ✅ 整表水平居中 */
}

.cashflow-layout .mini-table th,
.cashflow-layout .mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  text-align: center;         /* ✅ 所有列（含第一列）都水平居中 */
  vertical-align: middle;     /* ✅ 垂直居中 */
}

/* ==== 顶部标题右侧图例样式（与 Media Spend 保持一致） ==== */
.cashflow-layout .chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.cashflow-layout .chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.cashflow-layout .chart-header .chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
}

.cashflow-layout .chart-header .divider {
  width: 1px;
  height: 14px;
  background-color: #ddd;
  margin: 0 4px;
}

.cashflow-layout .chart-header .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cashflow-layout .chart-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.cashflow-layout .chart-header .dot.blue {
  background-color: #8cb4f0;
}

.cashflow-layout .chart-header .dot.gray {
  background-color: #b3b3b3;
}

.table-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 4px;
}

.table-header h3 {
  margin-bottom: 2px;
}

.table-note {
  font-size: 13px;
  color: #888;
  margin: 0 0 6px 2px;
  line-height: 1.4;
}

/* ==== CashFlow - Details 字体缩小 + 轻微列宽限制 ==== */

/* ① 字体缩小一号（从 14px → 12px） */
.cashflow-layout .details-table th,
.cashflow-layout .details-table td {
  font-size: 12px;
}

/* ② 限制最大列宽（轻微限制，不会太窄） */
.cashflow-layout .details-table th,
.cashflow-layout .details-table td {
  max-width: 150px;          /* ⭐ 建议：150px（安全＋观感好） */
  overflow: hidden;          /* 超出时裁剪 */
  text-overflow: ellipsis;   /* 超长加 ... */
  white-space: nowrap;       /* 保持不换行（你原本的设计） */
}

/* ③ 防止表格撑爆父容器（必要） */
.cashflow-layout .table-scroll {
  overflow-x: auto;          /* 超宽时横向滚动 */
}

/* ④ 表格宽度按照内容决定，但不会撑破 layout */
.cashflow-layout .details-table {
  width: max-content;
  max-width: 100%;
}



/* 响应式 */
@media (max-width: 1200px) { .cashflow-layout .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) {
  .cashflow-layout { display: block; }
  .cashflow-layout .filters-sidebar { display: none; }
  .cashflow-layout .main-panel { display: block; }
  .cashflow-layout .filter-button-mobile { display: inline-flex; }
  .cashflow-layout .stat-cards { grid-template-columns: 1fr 1fr; }
  .cashflow-layout .growth-section { grid-template-columns: 1fr; }
  :root { --barH: 300px; --growthH: 220px; }
}
@media (max-width: 640px) { .cashflow-layout .stat-cards { grid-template-columns: 1fr; } }

/* ========== MediaSpend 页面（全部以 .mediaSpend-layout 命名空间） ========== */

.mediaSpend-layout {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #fff;
  box-sizing: border-box;
  min-height: 0;
}

/* 主面板（加命名空间，避免影响其它页面） */
.mediaSpend-layout .main-panel { flex: 1 1 auto; min-width: 0; display: grid; grid-gap: 12px; gap: 12px; }

/* 头部 */
.mediaSpend-layout .overview-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mediaSpend-layout .page-title { font-size: 18px; font-weight: 700; margin: 0; }
.mediaSpend-layout .header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }

.mediaSpend-layout .filter-button-mobile {
  display: none; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* 统计卡片 */
.mediaSpend-layout .stat-cards { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); grid-gap: 16px; gap: 16px; align-items: stretch; }
.mediaSpend-layout .stat-cards > * { min-width: 0; }
.mediaSpend-layout .stat-cards .card {
  justify-self: stretch; width: 100%; min-width: 0; border-radius: 12px; padding: 14px 16px;
  display: grid; grid-template-rows: auto 1fr; grid-row-gap: 6px; row-gap: 6px; background-clip: padding-box; color: #111;
}
.mediaSpend-layout .stat-cards .card-title,
.mediaSpend-layout .stat-cards .card-value { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.mediaSpend-layout .stat-cards .card-title { font-size: 14px; color: #666; }
.mediaSpend-layout .stat-cards .card-value { font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); }

.mediaSpend-layout .bg-purple { background: #f2f0ff !important; }
.mediaSpend-layout .bg-blue   { background: #eaf4ff !important; }

/* 图表容器 */
.mediaSpend-layout .chart-section {
  position: relative; overflow: hidden;     /* 防溢出 */
  background: #fff; padding: 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; min-height: 0;
}
.mediaSpend-layout .chart-section h3 { margin: 0 0 8px 0; }
.mediaSpend-layout .chart-wrap { flex: 1 1 auto; min-height: 0; }
.mediaSpend-layout .chart-section .chart-wrap { height: 360px; height: var(--barH, 360px); }

/* 仅保留一张折线图时可用的容器（这里不需要额外样式，预留） */
.mediaSpend-layout .growth-card { background: #fff; padding: 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* No data（沿用各页统一样式名） */
.mediaSpend-layout .no-data {
  width: 100%; height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center;
  color: #9aa0a6; background: #fafafa; border: 1px dashed #eee; border-radius: 12px; font-size: 14px;
}

/* ==== 顶部标题右侧图例（像 Cash Flow / Store Net Sales 那样） ==== */
.mediaSpend-layout .chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.mediaSpend-layout .chart-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.mediaSpend-layout .chart-header .chart-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
}

.mediaSpend-layout .chart-header .divider {
  width: 1px;
  height: 14px;
  background-color: #ddd;
  margin: 0 4px;
}

.mediaSpend-layout .chart-header .legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mediaSpend-layout .chart-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.mediaSpend-layout .chart-header .dot.blue {
  background-color: #8cb4f0;
}

.mediaSpend-layout .chart-header .dot.gray {
  background-color: #b3b3b3;
}


/* 响应式 */
@media (max-width: 1024px) {
  .mediaSpend-layout { display: block; }
  .mediaSpend-layout .filters-sidebar { display: none; }
  .mediaSpend-layout .main-panel { display: block; }
  .mediaSpend-layout .filter-button-mobile { display: inline-flex; }
  .mediaSpend-layout .stat-cards { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .mediaSpend-layout .chart-section .chart-wrap { height: 300px; }
}
@media (max-width: 480px) {
  .mediaSpend-layout .stat-cards { grid-template-columns: 1fr; }
  .mediaSpend-layout .chart-section .chart-wrap { height: 260px; }
}

/* ========== 布局 ========== */
.stores-layout { display: flex; gap: 12px; padding: 10px; background: #fff; box-sizing: border-box; min-height: 0; }

/* 顶部 */
.overview-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title { font-size: 20px; font-weight: 700; margin: 0; }
.header-right { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 12px; }

/* 公用时间选择器的样式（保证不被挤压） */
.trp { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.trp .date-picker-group { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.trp .react-datepicker-wrapper { flex: 0 0 160px; } /* 需要更宽可改 180/200 */
.react-datepicker__input-container input { width: 100%; min-width: 0; }

.filter-button-mobile { display: none; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* 概览（饼图） */
.section-title { margin: 0; font-size: 16px; font-weight: 700; }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }

.city-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px; }
.city-card-header { font-weight: 700; margin-bottom: 8px; }

/* ⇒ 调整布局更干净：左侧为圆环，右侧为说明 */
.city-card-body { display: grid; grid-template-columns: 220px 1fr; align-items: center; grid-gap: 16px; gap: 16px; }
/* 圆环高度适中，视觉更紧凑 */
.donut-wrap { width: 100%; height: 160px; }

/* ⇒ Legend 改成 “品牌 | 占比 | 金额(缩写)” 的四列网格，并右对齐数值 */
/* .legend-list { list-style: none; padding: 0; margin: 0; } */
.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;   /* 固定最大高度 */
  overflow-y: auto;    /* 超出滚动 */
  scrollbar-width: thin;
}

.legend-list li {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #f1f2f5;
}
.legend-list li:last-child { border-bottom: none; }
.legend-list .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-list .name { color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.legend-list .pct { color: #6b7280; font-size: 12px; justify-self: end; min-width: 48px; }
.legend-list .vol { color: #6b7280; font-size: 12px; justify-self: end; min-width: 64px; }

/* 表格 */
.table-panel { display: flex; flex-direction: column; min-height: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 12px 16px 8px 16px; }
.store-table { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; }
.store-table thead th { text-align: left; font-weight: 700; font-size: 13px; color: #111; padding: 10px 8px; border-bottom: 1px solid #eee; }
.store-table tbody td { font-size: 13px; color: #111; padding: 10px 8px; border-bottom: 1px solid #f3f3f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-table tbody tr { height: 42px; }

/* ⇒ 补上 Platform 列宽，并微调各列比例 */
.store-table .col-name   { width: 26%; }
.store-table .col-plat   { width: 16%; }
.store-table .col-date   { width: 18%; }
.store-table .col-amt    { width: 22%; }
.store-table .col-status { width: 12%; }

.icon-diamond { display: inline-block; width: 8px; height: 8px; background: #7aa3ef; border-radius: 2px; margin-right: 8px; transform: rotate(45deg); vertical-align: middle; }
.sortable { cursor: pointer; position: relative; padding-right: 18px !important; }
.sort-ind { position: absolute; right: 6px; top: 50%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: .35; transform: translateY(-50%); }
.sort-ind.asc { border-bottom: 6px solid #111; } .sort-ind.desc { border-top: 6px solid #111; }

.status-pill { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 999px; font-size: 12px; text-align: center; }
.status-pill.open { background: #e8f8ee; color: #11a34a; }
.status-pill.close { background: #f4f4f4; color: #7a7a7a; }

/* 保持空行占位（文字透明即可） */
.empty-row td { color: transparent; }

/* 分页 */
.pager { margin-top: auto; padding-top: 8px; border-top: 1px solid #f2f2f2; display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager-info { margin-right: auto; color: #666; font-size: 12px; }
.pager-controls { display: flex; gap: 4px; }
.pager-btn { min-width: 34px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font-size: 12px; cursor: pointer; }
.pager-btn:hover { background: #f7f7f7; }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-btn.page-num.active { background: #111; color: #fff; border-color: #111; }


/* 表格外包一层产生横向滚动；也可直接加到 .table-panel，但包一层更稳 */
.h-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ===== 调整 All Store Status 标题间距 ===== */
.stores-layout .section-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px; /* ↑ 与饼图区拉开距离 */
  margin-bottom: 8px; /* ↓ 保持与表格间适中间距 */
}

.city-card-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;

  height: 260px;              /* ← ★ 新增：固定整体高度 */
  overflow: hidden;           /* 保证内容不撑开 */
}


/* 响应式 */
@media (max-width: 1200px) {
  .city-card-body { grid-template-columns: 180 1fr; height: 240px; }
  .donut-wrap { height: 150px; }
  .trp { flex-wrap: wrap; }
}
@media (max-width: 1024px) {
  .stores-layout { display: block; }
  .filters-sidebar { display: none; }
  .main-panel { display: block; }
  .filter-button-mobile { display: inline-flex; }
  .overview-grid { grid-template-columns: 1fr; }
  .city-card-body { grid-template-columns: 180px 1fr; }
  .donut-wrap { height: 140px; }
  .store-table thead th, .store-table tbody td { font-size: 12px; }
}



html, body, #root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f7f8fb;
}

.login-auth-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #f7f8fb;
  padding-top: 8vh;
}

.login-auth-card {
  width: 360px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  padding: 22px 20px;
  text-align: left;
}

.login-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.login-auth-brand img {
  height: 44px;
  width: auto;
  border-radius: 10px;
}
.brand-title {
  font-size: 18px;
  font-weight: 800;
}
.brand-sub {
  font-size: 12px;
  color: #8690a3;
}

.login-auth-form {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.login-auth-form label {
  font-size: 12px;
  color: #4b5563;
}
.login-auth-form input {
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
}
.login-auth-form input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.login-auth-error {
  color: #b91c1c;
  font-size: 12px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  padding: 6px 8px;
  border-radius: 8px;
}

.login-auth-form button {
  margin-top: 6px;
  height: 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: #111827;
  color: #fff;
  font-weight: 700;
}
.login-auth-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.login-footer {
  position: fixed;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

.login-footer a {
  color: #9ca3af;
  text-decoration: none;
}

.login-footer a:hover {
  color: #111827;
  text-decoration: underline;
}



@media (min-height: 900px) {
  .login-auth-wrap {
    padding-top: 12vh;
  }
}

.login-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
}

.login-footer a {
  color: #9ca3af;
  text-decoration: none;
}

.login-footer a:hover {
  color: #111827;
  text-decoration: underline;
}


/*# sourceMappingURL=main.860c3c3f.css.map*/