/* ============================================================
 * 咖莱翼 · 应用外壳层（App Shell）— E店通双栏版（B-1）
 * ------------------------------------------------------------
 * 结构：深色顶栏（一级导航：品牌 / 用户）+ 浅色左子栏（页）+ 内容区
 * 职责边界：只管外壳；页面内部样式由 style.css / layout.css 负责，
 *          因此本文件对既有业务样式零影响，删掉 <link> 即可整体回退。
 *
 * 换肤：全部走 tokens.css 语义变量；顶栏为「恒定深色表面」
 *      （不随 light/dark 主题反转，白字对比度恒定 ≥ 4.5:1）。
 *
 * DOM 契约（index.html 必须提供，app.js / shell.js 依赖）：
 *   .app-shell
 *     ├ .app-gnav           （顶栏：品牌 + #gnavMenu + 用户区）
 *     └ .app-body
 *         ├ .app-subnav#appSidebar（.sb-nav > .sb-item[data-view] / .sb-spacer / .sb-collapse > #sbToggle）
 *         └ .app-main（.page-head / .page-body）
 *   #currentUserName #userAvatar #currentUserRole #versionDot
 *   #pageTitle #pageSub #platformTitle（在 .page-body 内）
 *   html.sb-collapsed → 折叠态唯一开关（shell.js 维护）
 *
 * 引入顺序：tokens → themes → style → layout → shell → mobile
 * ============================================================ */

/* —— 外壳专用令牌（追加，不影响既有业务样式）—— */
:root {
  --gnav-bg:           var(--bg-dark);
  --gnav-bg-hover:     var(--bg-dark-hover);
  --gnav-bd:           var(--bd-on-dark);
  --gnav-fg:           var(--fg-on-dark);
  --gnav-fg-dim:       var(--fg-on-dark-dim);

  --topbar-h:          48px;    /* 顶栏高度 */
  --sidebar-w-current:  var(--sidebar-w);
}

/* ============================================================
 * 一、外壳骨架（纵向：顶栏在上，主体在下）
 * ============================================================ */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
 * 二、顶栏（深色，一级导航：品牌 / 用户）
 * ============================================================ */
.app-gnav {
  flex: 0 0 var(--topbar-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--gnav-bg);
  color: var(--gnav-fg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.gnav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.gnav-logo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.gnav-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gnav-brand-name { font-size: 15px; font-weight: 700; color: var(--gnav-fg); white-space: nowrap; }
.gnav-brand-sub { font-size: 11px; color: var(--gnav-fg-dim); white-space: nowrap; }

/* 一级域菜单（咖莱翼为单产品，默认空，预留扩展） */
.gnav-menu {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}

.gnav-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.gnav-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--gnav-fg-dim);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.gnav-icon:hover { background: var(--gnav-bg-hover); color: var(--gnav-fg); }
.gnav-icon svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gnav-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--gnav-bd);
}
.gnav-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
}
.gnav-user-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gnav-user-name {
  font-size: 13px; font-weight: 600; color: var(--gnav-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gnav-user-role { font-size: 11px; color: var(--gnav-fg-dim); white-space: nowrap; }

/* ============================================================
 * 三、主体：左子栏（页）+ 内容区
 * ============================================================ */
.app-body {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  min-height: 0;
}

/* 左子栏：浅色，承载「页」 */
.app-subnav {
  flex: 0 0 var(--sidebar-w-current);
  width: var(--sidebar-w-current);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  transition: flex-basis .18s ease, width .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .app-subnav { transition: none; }
}

/* 折叠：唯一开关 <html class="sb-collapsed"> */
.sb-collapsed { --sidebar-w-current: var(--sidebar-w-collapsed); }

.sb-nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
}

/* 子栏导航项（浅色底、深色字，激活态走品牌色） */
.sb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  overflow: hidden;
}
.sb-item:hover { background: var(--gray-50); color: var(--text); }
.sb-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: var(--fw-semibold);
  border-color: var(--primary-light);
}

.sb-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-icon svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sb-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--warning);
  display: none;
}
.sb-dot.show { display: block; }

/* 左菜单 4 大分组标题（经营工作台 / 利润对账 / 应用插件 / 个人中心） */
.sb-group-title {
  margin: 12px 8px 3px;
  font-size: 11px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: .04em;
  color: var(--text-tertiary, #9aa5b1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-group-title:first-child { margin-top: 2px; }
.sb-collapsed .sb-group-title { display: none; }

.sb-spacer { flex: 1 1 auto; }

.sb-collapse {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.sb-toggle {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sb-toggle:hover { background: var(--gray-50); color: var(--text); }
.sb-toggle svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.sb-collapsed .sb-toggle svg { transform: rotate(180deg); }

/* 折叠态：文字让位图标（仅桌面竖排生效） */
@media (min-width: 769px) {
  .sb-collapsed .sb-nav { padding: var(--space-2); }
  .sb-collapsed .sb-item {
    justify-content: center;
    width: 40px;
    padding: 9px 0;
    position: relative;
  }
  .sb-collapsed .sb-label { display: none; }
  .sb-collapsed .sb-dot { position: absolute; top: 6px; right: 8px; }
  .sb-collapsed .sb-collapse { justify-content: center; padding: var(--space-2) 0 var(--space-1); }
}

/* ============================================================
 * 四、内容区
 * ============================================================ */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 页头：吸顶，但让位给上方顶栏 */
.page-head {
  position: sticky;
  top: var(--topbar-h);
  z-index: var(--z-sticky);
  flex: 0 0 var(--header-h);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.page-title-group { min-width: 0; }
.page-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-sub {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-tight);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 环境标签：默认隐藏，仅 demo/test 环境显示（body.demo-env 由后端注入） */
.env-tag {
  display: none;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-light);
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
body.demo-env .env-tag { display: inline-flex; }

/* 页头按钮：白底描边（外观设置 / 退出） */
.head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.head-btn:hover {
  background: var(--gray-50);
  color: var(--text);
  border-color: var(--border-dark);
}
.head-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.head-btn.icon-only { padding: 0; width: 36px; }

.page-body {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
}

/* 外置视图容器（view-profit / view-rgp / view-plugin 位于 .page-body 之外、
 * .app-main 之内）：.app-main 是 flex column，.container 的 margin:0 auto 会让
 * flex item 放弃 stretch、收缩为内容 fit-content 宽（插件内页塌陷成一小块居中的根因）。
 * 显式拉满宽度，margin auto 不再吞交叉轴。 */
.app-main > .container { width: 100%; }

/* ============================================================
 * 五、外壳 ↔ 内容 自适应联动
 * ------------------------------------------------------------
 * 媒体查询看视口，真正决定表格挤不挤的是内容区宽度。折叠侧栏后
 * 内容区变宽，js/shell.js 实测宽度写成 .page-body[data-cw]，
 * CSS 按档位下发列数：折叠 → 变宽 → 自动升档，无需改代码。
 * 用户在外观面板显式设过列数（<html data-cols-user>）时尊重用户选择。
 * ============================================================ */
html:not([data-cols-user]) .page-body[data-cw="lg"] { --cols-kpi: 3; --cols-card: 2; --cols-form: 2; }
html:not([data-cols-user]) .page-body[data-cw="md"] { --cols-kpi: 2; --cols-card: 2; --cols-form: 1; }
html:not([data-cols-user]) .page-body[data-cw="sm"] { --cols-kpi: 1; --cols-card: 1; --cols-form: 1; }

/* 宽表吃满折叠腾出的空间：横向滚动兜底，列不被压变形 */
.page-body .l-table-wrap,
.page-body .table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
 * 六、demo / test 环境横幅让位
 * ------------------------------------------------------------
 * .demo-banner 是 position:fixed 顶栏；顶栏、左子栏、页头都要下移，
 * 否则被横幅压住。高度走 --demo-banner-h。
 * ============================================================ */
body.demo-env .app-gnav { top: var(--demo-banner-h); }
body.demo-env .app-subnav {
  top: calc(var(--topbar-h) + var(--demo-banner-h));
  height: calc(100vh - var(--topbar-h) - var(--demo-banner-h));
}
body.demo-env .page-head { top: calc(var(--topbar-h) + var(--demo-banner-h)); }

/* ============================================================
 * 七、经营工作台（G3）· 区块样式
 * ============================================================ */
.btn-default {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  background: #fff;
  color: var(--text, #1f2937);
  cursor: pointer;
}
.btn-default:hover { border-color: var(--primary, #1d6df0); color: var(--primary, #1d6df0); }

/* 通用卡片 / 空态 / 提示（与 PluginPageHost 对齐） */
.pk-card {
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pk-card-title { font-size: 15px; font-weight: 700; color: var(--text, #1f2937); }
.pk-empty { color: var(--text-secondary, #6b7280); padding: 28px 0; text-align: center; font-size: 13px; }
.pk-hint { font-size: 12px; color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 6px; }

/* 工具栏（筛选 + 操作） */
.pk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.pk-toolbar label { font-size: 13px; color: var(--text-secondary, #6b7280); margin-right: 4px; }
.pk-toolbar input[type="text"],
.pk-toolbar input[type="month"],
.pk-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  color: var(--text, #1f2937);
}
.pk-toolbar .btn { margin-left: 2px; }
.db-toolbar-spacer { flex: 1 1 auto; }

/* KPI 子行（占比等） */
.pw-kpi-sub { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 4px; }

/* 插件提醒区 */
.db-reminder {
  background: linear-gradient(90deg, rgba(29,109,240,0.06), rgba(29,109,240,0.02));
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.db-reminder-head { font-size: 13px; font-weight: 600; color: var(--text, #1f2937); margin-bottom: 10px; }
.db-reminder-row { display: flex; flex-wrap: wrap; gap: 10px; }
.db-reminder-card {
  flex: 1 1 200px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
}
.db-reminder-name { font-size: 13px; font-weight: 600; color: var(--text, #1f2937); }
.db-reminder-desc {
  font-size: 12px; color: var(--text-secondary, #6b7280);
  margin: 4px 0 6px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.db-reminder-go { font-size: 12px; color: var(--brand, #2563eb); }

/* 区块标题 */
.db-section-title { font-size: 15px; font-weight: 700; color: var(--text, #1f2937); margin: 4px 0 12px; }

/* 操作反馈 */
.db-msg { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 10px; min-height: 16px; }

/* 手工录入弹窗 */
.db-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.db-modal {
  background: #fff; border-radius: 12px; padding: 20px 22px; width: 420px; max-width: 92vw;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.db-modal-title { font-size: 16px; font-weight: 700; color: var(--text, #1f2937); margin-bottom: 14px; }
.db-form { display: grid; gap: 12px; }
.db-form label { display: grid; grid-template-columns: 72px 1fr; align-items: center; font-size: 13px; color: var(--text-secondary, #6b7280); gap: 8px; }
.db-form input, .db-form select {
  padding: 7px 10px; border: 1px solid var(--border, #d0d5dd); border-radius: 6px;
  font-size: 13px; background: #fff; color: var(--text, #1f2937); width: 100%;
}
.db-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }