/* ==========================================================================
   咖莱翼 · 外卖利润管家 / 外卖定价引擎 — 前端 UI 基线（冻结版 v1）
   生成：2026-09-19 ｜ 来源：UI设计规划-20260919 + UI排版诊断-20260919
   --------------------------------------------------------------------------
   ★ 本文件是「前端 UI 基线」的唯一样板实现，冻结后供两子系统逐页改造引用。
   ★ 硬性约束（与 P0 plugin-profit.css 同源护栏）：
     ① 只【引用】宿主/子系统既有令牌（var(--primary, var(--brand, 兜底))），
        绝不【重定义】--primary / --brand / --ink / --gray-* / --blue-* 等既有名，
        避免与 profit-app 已占用的托管命名发生级联冲突；
     ② 插件专属令牌统一命名空间 --p-*，从根上避免变量碰撞；
     ③ 全部收进 @layer uib，确保宿主运行时 theme.js 注入不会压垮插件，
        同时插件样式绝不外溢污染宿主其它视图；
     ④ 圆角自带 --p-radius-*，不信任宿主仍混乱的 --radius-* 体系；
     ⑤ 业务分类色 g1-g4 与品牌解耦，保留插件识别度、不干扰品牌换肤；
     ⑥ 类前缀 .p-*（组件）/ .uib-*（布局壳），与子系统既有 .btn/.card/.data-table 零冲突。
   ★ 适用范围：外卖利润管家(profit-app) 与 外卖定价引擎(pricing-engine) 两子系统；
     当作为插件嵌入咖莱翼主系统时，复用本文件并外裹 .plugin-profit-analysis 作用域。
   ========================================================================== */

@layer uib {

  /* ===================== 1. 令牌层（仅 --p-* 命名空间） ===================== */
  :root {
    /* —— 品牌：单一来源，优先宿主 --primary，其次子系统 --brand，最后兜底 —— */
    --p-brand: var(--primary, var(--brand, #1D6DF0));
    --p-brand-2: var(--primary-dark, var(--brand-deep, #0C447C));
    --p-brand-grad: linear-gradient(135deg, var(--p-brand) 0%, var(--p-brand-2) 100%);
    --p-cover-grad: linear-gradient(135deg, #0f172a 0%, var(--p-brand) 55%, var(--p-brand-2) 100%);

    /* —— 中性面：引用子系统既有令牌，带兜底（绝不重写宿主值） —— */
    --p-bg: var(--bg, #f4f6fb);
    --p-ink: var(--ink, #1f2937);
    --p-ink-2: var(--text-2, var(--ink-2, #475467));
    --p-ink-3: var(--text-3, var(--ink-3, #8895a7));
    --p-line: var(--line, #e4e8f0);
    --p-line-2: var(--line-2, #eef2f7);
    --p-card: var(--card, #fff);
    --p-soft: var(--soft, #f7f9fc);
    --p-chip: var(--chip, #eef2ff);

    /* —— 业务分类色（插件本地，与品牌解耦：成本/定价/利润/门店） —— */
    --p-g1: #f97316;                 /* 成本 */
    --p-g2: var(--p-brand);          /* 定价/品牌 */
    --p-g3: #7c3aed;                 /* 利润 */
    --p-g4: #10b981;                 /* 门店 */

    /* —— 语义状态色（对齐宿主 green/orange/red/blue 习惯，命名全新不冲突） —— */
    --p-ok: #16a34a;  --p-warn: #f59e0b;  --p-danger: #dc2626;  --p-info: #2563eb;
    --p-chip-ok-bg:#e8f6ee; --p-chip-ok-fg:#0b7a44;
    --p-chip-warn-bg:#fef3e2; --p-chip-warn-fg:#b45309;
    --p-chip-danger-bg:#fdecec; --p-chip-danger-fg:#b91c1c;
    --p-chip-info-bg:#eef2ff; --p-chip-info-fg:#3730a3;
    --p-chip-mute-bg:#f1f4f9; --p-chip-mute-fg:#64748b;

    /* —— 圆角（插件自带，规避宿主 --radius-* 混乱） —— */
    --p-radius-sm: 8px;
    --p-radius-md: 12px;
    --p-radius-lg: 16px;
    --p-radius-pill: 999px;

    /* —— 间距（8pt 栅格，唯一值收敛） —— */
    --p-sp-1: 4px;  --p-sp-2: 8px;  --p-sp-3: 12px; --p-sp-4: 16px;
    --p-sp-5: 20px; --p-sp-6: 24px; --p-sp-8: 32px; --p-sp-12: 48px;

    /* —— 阴影 —— */
    --p-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
    --p-shadow-md: 0 4px 10px -2px rgba(16,24,40,.12);

    /* —— 字体与字号阶梯（收敛到 ≤6 档，根治 31 档乱象） —— */
    --p-font: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
    --p-fs-xs: 12px;   /* 辅助说明 / 表头 */
    --p-fs-sm: 13px;   /* 次要正文 */
    --p-fs-md: 14px;   /* 基准正文 */
    --p-fs-lg: 16px;   /* 小标题 */
    --p-fs-xl: 18px;   /* 区块标题 */
    --p-fs-2xl: 24px;  /* 页面标题 / KPI 数字 */
    --p-lh: 1.6;
  }

  /* ===================== 2. 布局壳（.uib-*） ===================== */
  .uib-shell { display: flex; min-height: 100vh; background: var(--p-bg); color: var(--p-ink); font: var(--p-fs-md)/var(--p-lh) var(--p-font); -webkit-font-smoothing: antialiased; }
  .uib-side { width: 224px; flex: none; background: var(--p-card); border-right: 1px solid var(--p-line); padding: var(--p-sp-4) var(--p-sp-3); display: flex; flex-direction: column; gap: var(--p-sp-1); }
  .uib-side__logo { display: flex; align-items: center; gap: var(--p-sp-2); padding: var(--p-sp-2) var(--p-sp-3) var(--p-sp-4); border-bottom: 1px solid var(--p-line-2); margin-bottom: var(--p-sp-2); }
  .uib-side__logo .mark { width: 32px; height: 32px; border-radius: var(--p-radius-sm); background: var(--p-brand-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
  .uib-side__logo b { font-size: var(--p-fs-lg); color: var(--p-ink); }
  .uib-nav { display: flex; flex-direction: column; gap: 2px; }
  .uib-nav a, .uib-nav button { display: flex; align-items: center; gap: var(--p-sp-2); padding: 9px var(--p-sp-3); border-radius: var(--p-radius-sm); color: var(--p-ink-2); font-size: var(--p-fs-sm); text-decoration: none; border: none; background: transparent; cursor: pointer; text-align: left; transition: background .15s, color .15s; white-space: nowrap; }
  .uib-nav a:hover, .uib-nav button:hover { background: var(--p-soft); color: var(--p-ink); }
  .uib-nav a.is-active, .uib-nav button.is-active { background: var(--p-chip); color: var(--p-brand); font-weight: 600; }

  .uib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .uib-top { height: 56px; flex: none; display: flex; align-items: center; gap: var(--p-sp-3); padding: 0 var(--p-sp-6); background: var(--p-card); border-bottom: 1px solid var(--p-line); }
  .uib-top__title { font-size: var(--p-fs-xl); font-weight: 700; color: var(--p-ink); margin: 0; }
  .uib-top__spacer { flex: 1; }
  .uib-content { flex: 1; padding: var(--p-sp-6); overflow: auto; }
  .uib-content__inner { max-width: 1200px; margin: 0 auto; }

  .uib-page-head { display: flex; align-items: flex-end; gap: var(--p-sp-4); margin-bottom: var(--p-sp-5); }
  .uib-page-head__title { font-size: var(--p-fs-2xl); font-weight: 700; color: var(--p-ink); margin: 0; line-height: 1.2; }
  .uib-page-head__desc { font-size: var(--p-fs-sm); color: var(--p-ink-3); margin: 4px 0 0; }
  .uib-page-head__actions { margin-left: auto; display: flex; gap: var(--p-sp-2); align-items: center; flex-wrap: wrap; }

  .uib-section { margin-top: var(--p-sp-6); }
  .uib-section__title { font-size: var(--p-fs-xl); font-weight: 600; color: var(--p-ink); margin: 0 0 var(--p-sp-3); display: flex; align-items: center; gap: var(--p-sp-2); }
  .uib-section__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--p-brand); display: inline-block; }
  .uib-grid { display: grid; gap: var(--p-sp-4); }
  .uib-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .uib-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .uib-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

  /* ===================== 3. 组件库（.p-*） ===================== */

  /* 卡片 */
  .p-card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius-md); box-shadow: var(--p-shadow); padding: var(--p-sp-4) var(--p-sp-5); }
  .p-card__title { margin: 0 0 var(--p-sp-3); font-size: var(--p-fs-lg); font-weight: 600; color: var(--p-ink); display: flex; align-items: center; gap: var(--p-sp-2); }
  .p-card__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--p-brand); display: inline-block; }
  .p-card__sub { margin: 0 0 var(--p-sp-4); font-size: var(--p-fs-sm); color: var(--p-ink-2); }

  /* 按钮（三档权重：实心=主 / 描边=次 / 文字=弱） */
  .p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--p-radius-sm); border: 1px solid transparent; font-size: var(--p-fs-md); font-weight: 500; line-height: 1.4; cursor: pointer; user-select: none; font-family: inherit; transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
  .p-btn:hover { transform: translateY(-1px); }
  .p-btn:active { transform: translateY(0); }
  .p-btn:focus-visible { outline: 2px solid var(--p-brand); outline-offset: 2px; }
  .p-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
  .p-btn--primary { background: var(--p-brand); color: #fff; }
  .p-btn--primary:hover { background: var(--p-brand-2); box-shadow: var(--p-shadow-md); }
  .p-btn--outline { background: #fff; border-color: var(--p-line); color: var(--p-ink-2); }
  .p-btn--outline:hover { border-color: var(--p-brand); color: var(--p-brand); }
  .p-btn--ghost { background: transparent; color: var(--p-ink-2); }
  .p-btn--ghost:hover { background: var(--p-soft); }
  .p-btn--danger { background: #fff; border-color: var(--p-chip-danger-fg); color: var(--p-chip-danger-fg); }
  .p-btn--danger:hover { background: var(--p-chip-danger-bg); }
  .p-btn--sm { padding: 5px 12px; font-size: var(--p-fs-sm); }
  .p-btn--block { width: 100%; }

  /* 徽标 / 状态标签 */
  .p-badge { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--p-radius-pill); font-size: var(--p-fs-xs); line-height: 1.7; border: 1px solid transparent; white-space: nowrap; }
  .p-badge--ok { background: var(--p-chip-ok-bg); color: var(--p-chip-ok-fg); border-color: #c9ecda; }
  .p-badge--warn { background: var(--p-chip-warn-bg); color: var(--p-chip-warn-fg); border-color: #fbe0b8; }
  .p-badge--danger { background: var(--p-chip-danger-bg); color: var(--p-chip-danger-fg); border-color: #f8d4d4; }
  .p-badge--info { background: var(--p-chip-info-bg); color: var(--p-chip-info-fg); border-color: #dbe3ff; }
  .p-badge--mute { background: var(--p-chip-mute-bg); color: var(--p-chip-mute-fg); border-color: var(--p-line); }

  /* 表格 */
  .p-table { width: 100%; border-collapse: collapse; font-size: var(--p-fs-sm); color: var(--p-ink); }
  .p-table th { background: var(--p-soft); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--p-line); font-weight: 600; color: var(--p-ink-2); font-size: var(--p-fs-xs); white-space: nowrap; }
  .p-table td { padding: 10px 12px; border-bottom: 1px solid var(--p-line-2); vertical-align: top; }
  .p-table tr:last-child td { border-bottom: none; }
  .p-table tbody tr:hover { background: var(--p-soft); }
  .p-table .num { font-family: ui-monospace, Consolas, Monaco, monospace; font-size: var(--p-fs-xs); white-space: nowrap; text-align: right; }

  /* 分段控件 / 页签 */
  .p-seg { display: inline-flex; background: var(--p-soft); border: 1px solid var(--p-line); border-radius: var(--p-radius-pill); padding: 3px; gap: 2px; }
  .p-seg__item { padding: 5px 14px; border-radius: var(--p-radius-pill); font-size: var(--p-fs-sm); cursor: pointer; color: var(--p-ink-2); border: none; background: transparent; transition: color .15s ease, background .15s ease; white-space: nowrap; }
  .p-seg__item:hover { color: var(--p-brand); }
  .p-seg__item.is-active { background: #fff; color: var(--p-brand); box-shadow: var(--p-shadow); font-weight: 600; }

  /* 文本输入 */
  .p-input { width: 100%; padding: 8px 12px; font-size: var(--p-fs-md); color: var(--p-ink); background: #fff; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
  .p-input:focus { outline: none; border-color: var(--p-brand); box-shadow: 0 0 0 3px rgba(29,109,240,.12); }
  .p-select { appearance: none; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238895a7' stroke-width='1.5'/></svg>") no-repeat right 10px center; padding-right: 28px; }
  textarea.p-input { resize: vertical; line-height: 1.5; }

  /* KPI / 统计卡 */
  .p-stat { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius-md); padding: var(--p-sp-4); box-shadow: var(--p-shadow); position: relative; overflow: hidden; }
  .p-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--p-g1); }
  .p-stat.g2::before { background: var(--p-g2); } .p-stat.g3::before { background: var(--p-g3); } .p-stat.g4::before { background: var(--p-g4); }
  .p-stat__label { font-size: var(--p-fs-sm); color: var(--p-ink-2); margin-bottom: 6px; }
  .p-stat__value { font-size: var(--p-fs-2xl); font-weight: 700; color: var(--p-ink); line-height: 1.1; }
  .p-stat__value small { font-size: var(--p-fs-md); font-weight: 600; color: var(--p-ink-3); margin-left: 3px; }

  /* 表单栅格（label 定宽 + value 左对齐，根治「左右分家」） */
  .uib-form { display: grid; grid-template-columns: 1fr; gap: var(--p-sp-4); }
  .uib-form.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .uib-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .uib-field > label { font-size: var(--p-fs-sm); color: var(--p-ink-2); font-weight: 500; }
  .uib-field .hint { font-size: var(--p-fs-xs); color: var(--p-ink-3); }
  .uib-kv { display: grid; grid-template-columns: 132px 1fr; gap: var(--p-sp-3); padding: 8px 0; border-bottom: 1px solid var(--p-line-2); font-size: var(--p-fs-sm); }
  .uib-kv:last-child { border-bottom: none; }
  .uib-kv dt { color: var(--p-ink-3); }
  .uib-kv dd { margin: 0; color: var(--p-ink); word-break: break-word; }

  /* 空态 */
  .uib-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-sp-3); padding: var(--p-sp-12) var(--p-sp-6); color: var(--p-ink-3); text-align: center; }
  .uib-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--p-soft); display: grid; place-items: center; font-size: 26px; }
  .uib-empty__title { font-size: var(--p-fs-lg); color: var(--p-ink-2); font-weight: 600; }
  .uib-empty__desc { font-size: var(--p-fs-sm); max-width: 360px; }

  /* 业务分类色工具类 */
  .p-g1 { color: var(--p-g1); } .p-g2 { color: var(--p-g2); } .p-g3 { color: var(--p-g3); } .p-g4 { color: var(--p-g4); }
  .p-bg-g1 { background: var(--p-g1); } .p-bg-g2 { background: var(--p-g2); } .p-bg-g3 { background: var(--p-g3); } .p-bg-g4 { background: var(--p-g4); }

  /* 封面 / 品牌头（仅插件独立装饰区可用，不进主品牌渐变，呼应规划取舍） */
  .p-cover { background: var(--p-cover-grad); color: #fff; border-radius: var(--p-radius-lg); padding: var(--p-sp-6); position: relative; overflow: hidden; }
  .p-cover::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }

  /* ===================== 4. 响应式断点（统一 4 档，根治 5~8 档乱象） ===================== */
  @media (max-width: 1280px) { .uib-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 1024px) { .uib-side { width: 64px; } .uib-side__logo b, .uib-nav a span, .uib-nav button span { display: none; } .uib-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px)  { .uib-shell { flex-direction: column; } .uib-side { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid var(--p-line); overflow-x: auto; } .uib-grid.cols-2, .uib-grid.cols-3, .uib-grid.cols-4 { grid-template-columns: 1fr; } .uib-content { padding: var(--p-sp-4); } .uib-form.cols-2 { grid-template-columns: 1fr; } }
  @media (max-width: 480px)  { .uib-page-head { flex-direction: column; align-items: flex-start; } .uib-page-head__actions { margin-left: 0; } }
}