/* ==========================================================================
   榕膳记 · 全站换肤层  assets/ui-v2.css
   --------------------------------------------------------------------------
   为什么单独一个文件而不是改 ui.css：
     1. ui.css 是"规范"（字号阶梯、间距、组件骨架），不该跟着配色一起动；
     2. 这个文件只做两件事 —— 换色值、收细节。删掉它就能整站回滚到旧配色。
     3. 必须在每页 <head> 的最后加载（所有内联 <style> 之后），才盖得住各页
        自己写的 :root。

   配色来源：品牌图 avatar-wechat.png 取样
     纸 #f8eedf / 陶土红 #a9482a / 暖褐墨 #3b2a1f

   ⚠️ 这里不改任何 DOM、不改布局结构，只动颜色、圆角、阴影、字重。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 全站规范变量（ui.css 的那一套）
   -------------------------------------------------------------------------- */
:root{
  /* 品牌 */
  --rsh-brand:        #a9482a;
  --rsh-brand-ink:    #8f3a20;
  --rsh-brand-soft:   #f8e3d4;
  --rsh-brand-line:   #eed3bb;

  /* 墨色 —— 全部改成暖褐，不用冷黑。冷黑配暖米会显脏。 */
  --rsh-ink:          #3b2a1f;
  --rsh-ink-2:        #6f5747;
  --rsh-ink-3:        #8d7460;
  --rsh-ink-4:        #bda68f;

  /* 底色 */
  --rsh-bg:           #f8eedf;
  --rsh-card:         #fffcf5;
  --rsh-line:         #e8d5ba;
  --rsh-line-soft:    #f1e2cd;

  /* 状态色：绿和橙也往暖里调，不然在米底上发蓝发灰 */
  --rsh-ok:           #4a7a4e;
  --rsh-ok-soft:      #e8f0e5;
  --rsh-warn:         #a86a1c;
  --rsh-warn-soft:    #fbf0dd;
  --rsh-bad:          #b03a2e;
  --rsh-bad-soft:     #f9e6e2;

  /* 深底上的字 */
  --rsh-on-dark:      #fffcf5;
  --rsh-on-dark-2:    #e8d5ba;

  /* 圆角收小：16px 的卡片角在纸上太"软件"了，10px 更接近印刷品 */
  --rsh-r1: 4px;
  --rsh-r2: 6px;
  --rsh-r3: 10px;

  /* 阴影收淡收短：暖米底上的重投影会发灰 */
  --rsh-sh1: 0 1px 2px rgba(59,42,31,.05);
  --rsh-sh2: 0 2px 8px rgba(59,42,31,.07);
  --rsh-sh3: 0 10px 28px rgba(59,42,31,.12);
}

/* --------------------------------------------------------------------------
   2. 各页面自己写的私有变量（每页 <style> 里的 :root）
      这些名字不在 ui.css 体系里，是历史遗留，必须一起盖掉，
      否则同一个页面会出现"一半新色一半旧色"。
   -------------------------------------------------------------------------- */
:root{
  --brand:        #a9482a;
  --brand-2:      #bd5a37;
  --brand-3:      #d18f6c;
  --brand-soft:   #f8e3d4;
  --brand-deep:   #8f3a20;

  --bg:           #f8eedf;
  --bg-2:         #f2e4cf;
  --card:         #fffcf5;
  --line:         #e8d5ba;
  --line-2:       #f1e2cd;

  --ink:          #3b2a1f;
  --muted:        #6f5747;
  --faint:        #8d7460;
  --sub:          #8d7460;

  --r:            10px;
  --r-lg:         14px;

  --shadow-sm:    0 1px 2px rgba(59,42,31,.05), 0 3px 10px rgba(59,42,31,.05);
  --shadow:       0 2px 6px rgba(59,42,31,.05), 0 12px 30px rgba(59,42,31,.07);
}

/* --------------------------------------------------------------------------
   3. 侧栏选中态
      原来是"整块品牌浅底"，在暖米纸上会糊成一片。
      改成：白卡片 + 极淡投影 + 左侧 2px 陶土红短标 —— 位置更清楚，也更收敛。
   -------------------------------------------------------------------------- */
/* 用 .pg-side 前缀提特异性：产品库页的内联样式比单个类更"重"，
   直接写 .pg-side-item.on 盖不住（实测选中项还是旧的粉红底）。 */
.pg-side .pg-side-item.on,
.pg-side-item.on{
  background: #fffcf5;
  color: var(--rsh-ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(59,42,31,.06), 0 4px 12px -4px rgba(59,42,31,.11);
}
.pg-side-item{position:relative}
.pg-side-item.on::before{
  content:"";
  position:absolute; left:0; top:9px; bottom:9px; width:2px;
  border-radius:0 2px 2px 0;
  background: var(--rsh-brand);
}
.pg-side .pg-side-item.on i,
.pg-side-item.on i{color: var(--rsh-brand)}

/* --------------------------------------------------------------------------
   4. 按钮：胶囊 → 方框
      圆角胶囊在这个体系里显得软。4px 方角 + 只加深边框，更有"系统"的硬气。
   -------------------------------------------------------------------------- */
.rsh-btn{
  border-radius: var(--rsh-r1);
  letter-spacing: .02em;
  transition: background .22s cubic-bezier(.32,.72,0,1),
              border-color .22s cubic-bezier(.32,.72,0,1),
              color .22s cubic-bezier(.32,.72,0,1);
}

/* --------------------------------------------------------------------------
   5. 表格：行间线用最淡的一档，hover 整行提亮
      不改列宽、不改 padding（那会挤动现有布局），只改线和底色。
   -------------------------------------------------------------------------- */
.rsh-tbl tbody tr{ transition: background .18s cubic-bezier(.32,.72,0,1) }
.rsh-tbl tbody tr:hover{ background: rgba(255,252,245,.75) }
.rsh-tbl tbody td{ border-bottom-color: var(--rsh-line-soft) }

/* 所有数字等宽对齐 —— 价格、成本、毛利竖着看要能对齐 */
.rsh-num,.rsh-tbl td,.rsh-stat b{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   6. 顶栏：底部细线 + 半透明，滚动时内容从底下透过去
   -------------------------------------------------------------------------- */
.topbar{
  border-bottom: 1px solid var(--rsh-line);
}

/* --------------------------------------------------------------------------
   7. 输入框 / 下拉：纸面上用暖色边，聚焦时用陶土红
   -------------------------------------------------------------------------- */
input,select,textarea{
  border-radius: var(--rsh-r1);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline: 2px solid rgba(169,72,42,.35);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   8. 手机端：侧栏在现有实现里是隐藏的，这里只把正文最小字号托住
      （低于 12px 的辅助字在暖米底上比白底更难读）
   -------------------------------------------------------------------------- */
@media (max-width:899px){
  .rsh-cap,.rsh-dim{ color: var(--rsh-ink-3) }
}
/* ==========================================================================
   榕膳记 · 桌面端增强层（2026-10-22）
   --------------------------------------------------------------------------
   为什么单独一段：
     现有页面全是"手机优先、桌面只是放大"，表现为——
       · 数据页 main 卡死 1000px（1440 屏两侧各空 220）
       · 配送页卡片 760px 且左对齐，右边和下面全空
       · KPI 只有 2 列，12 个数字竖着排成 6 行
     桌面端的正确做法是：用满横向空间、多栏并排、一屏看更多。

   参考对象（业界后台的通行做法）：
     · Linear / Vercel：内容区 1320~1440、行高 44~48、正文 14~15
     · Stripe Dashboard：KPI 一行 6 个、图表高 280+
     · 共同点：靠 1px 分线而不是卡片阴影分层；数字全部等宽对齐

   只在 ≥1200px 生效，手机和平板完全不受影响。
   ========================================================================== */

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------------
     1. 内容区放开
     ------------------------------------------------------------------------ */

  /* 数据页：main 从 1000 放宽到 1320，左右内边距加大（不然贴边） */
  main {
    max-width: 1320px;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* 配送页：那张 760px 的卡片取消限制，交给下面的两栏栅格 */
  #view-schedule > .ov-card,
  #view-schedule .ov-card {
    max-width: none;
  }

  /* ------------------------------------------------------------------------
     2. KPI：2 列 → 6 列
        12 个数字两行排满，横向吃满 1320。
     ------------------------------------------------------------------------ */
  /* 实测数据页是 15 个数字（不是 12），6 列会剩 3 格空 → 5 列 × 3 行正好排满 */
  .kpis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }
  .kpi {
    padding: 14px 16px;
  }
  /* 数字放大一档：桌面上是要"扫一眼读数"，不是"逐行读" */
  .kpi b {
    font-size: 24px;
    letter-spacing: -.01em;
  }
  .kpi b.sm { font-size: 21px }
  .kpi > span { font-size: 11px; letter-spacing: .04em }

  /* ------------------------------------------------------------------------
     3. 图表：拉高，让曲线有呼吸感
     ------------------------------------------------------------------------ */
  .trend {
    height: 300px;
  }

  /* ------------------------------------------------------------------------
     4. 区块：桌面用更舒展的内边距
     ------------------------------------------------------------------------ */
  .block {
    padding: 22px 24px;
  }
  .block__head {
    margin-bottom: 18px;
  }
  .block__head h2 {
    font-size: 16px;
    letter-spacing: .02em;
  }

  /* 底部的「菜品排行 / 客户排行」两栏，桌面给足间距 */
  .two-col {
    gap: 20px;
  }

  /* ------------------------------------------------------------------------
     5. 表格页：桌面看更多行、更紧凑但不挤
     ------------------------------------------------------------------------ */
  .rsh-tbl tbody td {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .rsh-tbl thead th {
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--rsh-ink-4);
  }

  /* ------------------------------------------------------------------------
     6. 侧栏：桌面常驻时给它一个更稳的宽度（各页不统一，这里对齐到 240）
     ------------------------------------------------------------------------ */
  .pg-side {
    width: 240px;
  }
  .sidebar {
    width: 240px;
    flex: 0 0 240px;
  }

  /* ------------------------------------------------------------------------
     7. 配送页两栏：左排期列表 + 右日历
        DOM 里已有 #view-schedule 和 .ov-card，这里把 ov-card 内部改成两栏栅格。
        如果内部只有一个子元素，就退化成单栏（不影响功能）。
     ------------------------------------------------------------------------ */
  #view-schedule .ov-card {
    display: grid;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  /* 日历/图表那一块撑满右栏 */
  #view-schedule .ov-card > *:last-child {
    min-width: 0;
  }

  /* ------------------------------------------------------------------------
     8. 正文基准：桌面 15px（手机上仍是 14，别动）
        暖米底上 14px 在 27 寸屏会显得偏小。
     ------------------------------------------------------------------------ */
  body {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   9. 配送页：没订单时别让内容贴顶、下面空三分之二
      这一页本身有 repeat(auto-fill,minmax(336px,1fr)) 的卡片网格，
      有单时会铺满；没单时只剩一张概览 + 空状态，所以在桌面把整块垂直居中。
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  #view-schedule {
    align-content: center;
    min-height: calc(100vh - 132px);
  }
  #view-schedule > .ov-card {
    max-width: none;
  }
  /* 概览卡里的 14 天柱子拉高一点，别挤成一条 */
  #view-schedule > .ov-card > * {
    min-width: 0;
  }
}

/* ==========================================================================
   第二轮修复（12:40）—— 依据 12 个视口的实测报告
   ========================================================================== */

@media (min-width: 1200px) {
  /* 🔴 上一轮我把 KPI 标签压到 11px，实测数据页 19 处小字全是它。
     11px 在暖米底上读着费劲，回到 12px。 */
  .kpi > span {
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--rsh-ink-3);
  }

  /* 订单页的筛选/日期区被拉成 1320 满宽，输入框太长反而不顺手，收到 760 */
  .filters,
  .summary {
    max-width: 760px;
  }
}

/* ---- 手机端：小字托底 ----
   首页有 11 处 <12px（页眉字距、六件事说明、页脚）。
   12px 是这套体系的下限，不能再小。 */
@media (max-width: 899px) {
  .sublead,
  .cell-sub,
  .foot,
  .sign {
    font-size: 12px;
  }
}