/* ============================================================
   门店业绩数据中心 · 主题令牌（唯一定义处）
   ------------------------------------------------------------
   两套主题：深色（默认）/ 浅色
   切换方式：document.documentElement.dataset.theme = "dark" | "light"
   ⚠️ 图表（ECharts）不认 CSS 变量，所有图表配色都从这里的 --chart-* 读取，
      并由 app.js 的 themeColors() 读取、applyTheme() 重建。
   ============================================================ */

/* ---------- 与主题无关的基础刻度 ---------- */
:root{
  /* 系统无衬线栈：苹方 → 鸿蒙 → 微软雅黑 → 思源黑体。
     大厂工作台一律用这套，不用衬线/楷体——楷体是书法的味道，不是办公软件的味道。 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
          "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
  /* 数字专用：等宽数字，表格里对齐才整齐 */
  --font-num: ui-monospace, "SF Mono", "Menlo", "Consolas", var(--font);
  --rf-1:4px;  /* 按钮、输入框 */
  --rf-2:6px;  /* 表格容器、小块 */
  --rf-3:8px;  /* 卡片 */
  --rf-4:10px; /* 弹窗 */
  --gap-1:8px; --gap-2:12px; --gap-3:18px; --gap-4:24px;

  /* ---------- 字号刻度（2026-11 重做：解决"字太小、看着累"） ----------
     语义 → 值，一一对应；不许页面自己写 13.5 / 14.5 这种半档。
     --fs-tag 的 12.5 是规格里唯一保留的半档（标签比说明文字略小、又比 12 好认）。 */
  --fs-xs:12px;      /* 侧栏一级分组名、极小元信息 */
  --fs-tag:12.5px;   /* 标签 .tag */
  --fs-sm:13px;      /* 说明 / 辅助文字（.hint、.kpi .k、时间线 t） */
  --fs-cell:14px;    /* 表格单元格、侧栏菜单项 */
  --fs-md:15px;      /* 正文 / 表单 / 按钮 */
  --fs-h2:16px;      /* 卡片标题 */
  --fs-lg:18px;      /* 页面标题（顶栏 h1）/ 弹窗标题 */
  --fs-xl:20px;
  --fs-2xl:30px;     /* 关键数字 .kpi .v */
  --fs-3xl:32px;

  /* 行高：正文 1.6，表格 1.5（表格行靠 line-height + 固定行高撑开，密但不挤） */
  --lh-tight:1.4; --lh-body:1.6; --lh-cell:1.5;

  /* ---------- 密度刻度（字大了控件必须同步长，否则字会顶到边） ---------- */
  --ctl-h:34px;      /* 输入框 / 按钮高度 */
  --row-h:48px;      /* 表格行高 */
  --th-h:42px;       /* 表头高度 */
  --cell-px:14px;    /* 表格单元格左右内边距 */
  --side-w:232px;    /* 左侧目录宽度 */
  --top-h:52px;      /* 顶栏高度 */
  --card-p:18px;     /* 卡片内边距 */
}

/* ============================================================
   深色主题（默认）—— 精修：底色不再近黑，降低刺眼与霓虹感
   ============================================================ */
:root,
html[data-theme="dark"]{
  color-scheme: dark;

  /* 底色与层次：三级（页底 / 卡片 / 卡内浮层） */
  --bg:#1E2632;
  --bg-image:
    radial-gradient(1200px 620px at 12% -8%, rgba(255,105,0,.10), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(91,143,249,.06), transparent 58%);
  --panel:#262F3D;          /* 卡片底 */
  --panel-solid:#262F3D;
  --panel-2:#2E3846;        /* 卡内浮层 */
  --line:rgba(255,255,255,.115);
  --line-soft:rgba(255,255,255,.065);

  /* 文字：正文不用纯白，减少大屏发光刺眼 */
  --ink:#E9EEF6;
  --ink-2:#C4CEDA;
  --muted:#96A2B2;
  --note:#8B98AA;           /* 备注/提示（浅色小字） */

  /* 品牌橙 */
  --orange:#FA6400;
  --orange-mid:#FF8A33;
  --orange-soft:#FFB066;    /* 深底上的橙色文字 */
  --orange-deep:#FF7A1A;
  --orange-solid:#FA6400;   /* 实心橙底（配 --on-orange） */
  --on-orange:#FFFFFF;
  --orange-tint:rgba(255,105,0,.14);

  /* 语义色 */
  --good:#3DD68C;
  --bad:#FF8075;
  --warn:#F6D35B;

  /* 深色下不需要光晕，全部关掉（原来层层叠叠的 shadow/glow 是最累眼的部分） */
  --glow-orange:none;
  --glow-good:none;
  --glow-ink:none;

  /* 表格 / 轨道 / 浮层 底 */
  --th-bg:rgba(255,255,255,.055);
  --th-fg:#D7DFEA;
  --row-alt:rgba(255,255,255,.022);
  --row-hover:rgba(255,138,51,.10);
  --track-bg:rgba(255,255,255,.10);
  --track-bg-soft:rgba(255,255,255,.055);
  --track-mark:rgba(255,255,255,.75);
  --chip-bg:rgba(255,255,255,.05);
  --card-tint:rgba(255,255,255,.035);
  --scrim:rgba(8,12,18,.62);
  --toast-bg:#333E4E;
  --toast-fg:#F1F5FA;
  --picker-filter:invert(.82);

  /* 阴影分级（深色下靠"提亮"而非投影做层次） */
  --sh-1:0 1px 2px rgba(0,0,0,.24);
  --sh-2:0 2px 10px rgba(0,0,0,.22);
  --sh-3:0 12px 30px rgba(0,0,0,.38);
  --sh-4:0 24px 64px rgba(0,0,0,.52);

  /* 标题渐变 */
  --hero-grad:linear-gradient(96deg,#FFF2BE 0%,#FFD24D 13%,#FF9A2E 30%,#FF6900 46%,#E23A1E 62%,#FF8A33 79%,#FF6900 100%);
  --hero-glow:none;
  --mhead-grad:linear-gradient(96deg,#FFF2BE 0%,#FFD24D 18%,#FF9A2E 45%,#FF6900 68%,#FF6900 100%);

  /* 类别标签（深底：亮字 + 弱底） */
  --tag-c-bg:rgba(255,105,0,.16);   --tag-c-fg:#FFB066; --tag-c-bd:rgba(255,138,51,.42);
  --tag-b-bg:rgba(54,207,201,.14);  --tag-b-fg:#5FE0DB; --tag-b-bd:rgba(54,207,201,.36);
  --tag-g-bg:rgba(91,143,249,.16);  --tag-g-fg:#8FB4FF; --tag-g-bd:rgba(91,143,249,.42);
  --tag-y-bg:rgba(246,189,22,.15);  --tag-y-fg:#F6D35B; --tag-y-bd:rgba(246,189,22,.40);
  --tag-t-bg:rgba(159,122,234,.18); --tag-t-fg:#C9AEFF; --tag-t-bd:rgba(159,122,234,.44);

  /* 环形进度轨道 */
  --ring-track:rgba(255,255,255,.11);

  /* ---------- 图表（ECharts 专用） ---------- */
  --chart-text:#E4EAF3;
  --chart-text-muted:#A9B6C7;
  --chart-axis:rgba(255,255,255,.18);
  --chart-tick:rgba(255,255,255,.42);
  --chart-split:rgba(255,255,255,.075);
  --chart-pie-border:#262F3D;          /* 与卡片底同色 = 干净留白 */
  --chart-label-line:rgba(255,255,255,.22);
  --chart-bar-label:#EDF1F7;
  --chart-warm-label:#FFD9B0;
  --chart-cool-label:#9FE8E4;
  /* 对比系列（如「上月同期」）：暖橙的对照色，取冷色家族 */
  --chart-ref:#3AAFA9;
  --chart-ref-soft:rgba(58,175,169,.30);
  --chart-area-top:rgba(255,105,0,.38);
  --chart-area-bottom:rgba(255,105,0,.02);
  --chart-tip-bg:rgba(16,22,34,.95);
  --chart-tip-bd:rgba(255,138,51,.42);
  --chart-tip-fg:#EAEFF7;
}

/* ============================================================
   浅色主题 —— 精修：不是"把深色刷白"，而是重新定的一套色
   （语义色/标签色/图表色全部换成浅底达标色，正文≥4.5:1）
   ============================================================ */
html[data-theme="light"]{
  color-scheme: light;

  /* 中性灰：工作台的底不该有颜色倾向，有颜色就显旧 */
  --bg:#F5F6F7;
  --bg-image:none;
  --panel:#FFFFFF;
  --panel-solid:#FFFFFF;
  --panel-2:#FAFBFC;
  --line:#E5E6EB;
  --line-soft:#F2F3F5;

  /* 文字四级：主/次/辅/弱，全部够对比度 */
  --ink:#1D2129;
  --ink-2:#4E5969;
  --muted:#86909C;
  --note:#A9AEB8;

  /* 品牌橙：只出现在主按钮、选中态、关键数字上，不做大面积底色 */
  --orange:#FA6400;
  --orange-mid:#FF8A3D;
  --orange-soft:#D9480F;    /* 白底上的橙字（4.6:1） */
  --orange-deep:#B93A08;
  --orange-solid:#F5731F;
  --on-orange:#FFFFFF;
  --orange-tint:#FFF3EA;

  --good:#00875A;
  --bad:#C9372C;
  --warn:#B26A00;

  --glow-orange:none; --glow-good:none; --glow-ink:none;

  --th-bg:#FAFBFC;
  --th-fg:#4E5969;
  --row-alt:#FFFFFF;
  --row-hover:#FAFBFC;
  --track-bg:#EEF0F2;
  --track-bg-soft:#F5F6F7;
  --track-mark:#C9CDD4;
  --chip-bg:#F2F3F5;
  --card-tint:#FAFBFC;
  --scrim:rgba(29,33,41,.45);
  --toast-bg:#1D2129;
  --toast-fg:#FFFFFF;
  --picker-filter:none;

  /* 阴影极薄：靠 1px 边框分层，不靠投影 */
  --sh-1:0 1px 2px rgba(29,33,41,.04);
  --sh-2:0 1px 2px rgba(29,33,41,.04);
  --sh-3:0 4px 16px rgba(29,33,41,.08);
  --sh-4:0 12px 32px rgba(29,33,41,.12);

  /* 老页面的标题渐变：一律压成深墨，大公司不做彩虹字 */
  --hero-grad:#1D2129;
  --hero-glow:none;
  --mhead-grad:#1D2129;

  --tag-c-bg:#FFF3EA; --tag-c-fg:#B4400B; --tag-c-bd:transparent;
  --tag-b-bg:#E8F7F0; --tag-b-fg:#00694A; --tag-b-bd:transparent;
  --tag-g-bg:#EAF2FF; --tag-g-fg:#1657C7; --tag-g-bd:transparent;
  --tag-y-bg:#FFF6E5; --tag-y-fg:#8A5A00; --tag-y-bd:transparent;
  --tag-t-bg:#F3EEFF; --tag-t-fg:#5B32C4; --tag-t-bd:transparent;

  --ring-track:#EEF0F2;

  /* ---------- 图表（浅底） ---------- */
  --chart-text:#2B3542;
  --chart-text-muted:#5C6675;
  --chart-axis:#D5DAE0;
  --chart-tick:#C3CAD3;
  --chart-split:#EDF0F3;
  --chart-pie-border:#FFFFFF;          /* 白卡 = 白描边，形成留白 */
  --chart-label-line:#C3CAD3;
  --chart-bar-label:#1B2430;
  --chart-warm-label:#A83D06;
  --chart-cool-label:#0F766E;
  --chart-ref:#0E8A82;
  --chart-ref-soft:rgba(14,138,130,.22);
  --chart-area-top:rgba(250,100,0,.20);
  --chart-area-bottom:rgba(250,100,0,.01);
  --chart-tip-bg:rgba(255,255,255,.99);
  --chart-tip-bd:#E2E6EB;
  --chart-tip-fg:#2B3542;
}

/* ---------- 无障碍：键盘焦点清晰可见 ---------- */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:var(--rf-1);
}
/* 尊重"减少动态效果"系统设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   图表文字字体：强制继承页面字体
   ------------------------------------------------------------
   2026-11-01 事故：ECharts 的 SVG 渲染会给每个 <text> 写死
   font-family:sans-serif。某些电脑上 sans-serif 被映射到
   不含中文字形的字体，导致整张图的中文全变方框（用户反复截图）。
   而同一页面的 HTML 文字用 --font（楷体栈）完全正常。
   这里用 !important 强行覆盖内联样式，让图表文字和正文用同一套字体。
   ============================================================ */
svg text,
.chart svg text,
[id^="chart"] svg text {
  font-family: var(--font) !important;
}

/* 一键呼出：全站手机号统一橙色可点，点一下直接唤起拨号；加小电话符号，提示"能拨" */
a.tel-link{color:#FA6400;text-decoration:none;font-weight:600;
  font-variant-numeric:tabular-nums;cursor:pointer;position:relative;padding-left:17px}
a.tel-link::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:13px;height:13px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6.6%2010.8c1.4%202.8%203.8%205.1%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201C10.6%2021%203%2013.4%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.8-.3%201l-2.1%202.2z'/%3E%3C/svg%3E")%20no-repeat%20center/13px;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6.6%2010.8c1.4%202.8%203.8%205.1%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201C10.6%2021%203%2013.4%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.8-.3%201l-2.1%202.2z'/%3E%3C/svg%3E")%20no-repeat%20center/13px}
a.tel-link:hover{text-decoration:underline}
a.tel-link:active{opacity:.6}
/* 内联图标版：::before 的 mask 在部分安卓 WebView 里会渲染成实心方块，
   手机端改用内联 SVG（mapp.js 的 telLink 生成），这里把它摆正、去掉旧占位。 */
a.tel-link.has-ico{padding-left:0;display:inline-flex;align-items:center;gap:3px;
  vertical-align:-1px;line-height:1.2}
a.tel-link.has-ico::before{content:none}
a.tel-link.has-ico svg{width:13px;height:13px;flex:0 0 13px;display:block}
a.tel-link.has-ico span{white-space:nowrap}