/* ===== AmarokOS Platform 设计 Tokens（所有模块统一共享） =====
 * 修改时同步更新所有模块，模块 styles.css 请勿重复声明 :root
 */
:root {
  --bg: #ffffff;
  --canvas: #ffffff;
  --panel: #ffffff;
  --panel-soft: #ffffff;
  --text: #151b2d;
  --muted: #6b7280;
  --line: #e2e5ec;
  --line-strong: #d7dbe4;
  --head: #fafbff;
  --accent: #D5000D;
  --accent-strong: #b8000b;
  --accent-soft: #fce8ea;
  /* —— 主题强调色：统一使用 LOGO 红色，不再使用紫色 —— */
  --purple: var(--accent);         /* 历史兼容：所有紫色调用点统一映射为 LOGO 红色（#D5000D） */
  --purple-strong: var(--accent-strong);
  --purple-soft: var(--accent-soft);
  --ok: #12b76a;
  --warn: #b45309;
  --bad: #b42318;
  --shadow: 0 10px 24px rgba(17, 24, 39, .08);
  --shadow-soft: 0 4px 14px rgba(17, 24, 39, .06);
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 44px;
  /* —— Focus Ring（键盘焦点环，A11y 无障碍回填）—— */
  --focus-ring: 2px solid rgba(213, 0, 13, .45);
  /* —— Radius 4 级圆角 token（统一散落硬编码）—— */
  --radius-xs: 6px;   /* 小按钮、输入框、表格 cell：紧凑控件 */
  --radius-sm: 10px;  /* 卡片、一般面板：标准控件 */
  --radius-md: 12px;  /* KPI、模块卡片：中等面板 */
  --radius-lg: 20px;  /* 登录卡、picker、顶栏：大圆角容器（用户明确要求顶栏 20px） */

  /* —— Typography 8 级排版 token（统一散落硬编码字号）—— */
  --fs-xs: 11px;    /* 微标签、badge 脚注 */
  --fs-sm: 12px;   /* 次要文字、caption、footer */
  --fs-base: 13px; /* 正文导航、nav 项 */
  --fs-md: 14px;   /* 按钮文字、表头、panel-head */
  --fs-lg: 16px;   /* 子标题、picker 标题、KPI 标签 */
  --fs-xl: 18px;   /* 顶栏标题、空态主标题 */
  --fs-2xl: 22px;  /* 登录卡标题、KPI 图标 */
  --fs-3xl: 24px;  /* KPI 数字、section 标题 */
  /* 30px（card strong 数字）和 32px（empty-icon）出现极少，保留原始值不单独建 token */

  /* —— Spacing 8 级间距 token（收敛散落 margin/padding）—— */
  --sp-1: 4px;   /* 紧凑间距：badge、icon 内边距 */
  --sp-2: 8px;   /* 基础间距：按钮 padding、gap */
  --sp-3: 12px;  /* 标准间距：table cell、panel padding */
  --sp-4: 16px;  /* 中等间距：panel-head、flow gap */
  --sp-5: 20px;  /* 大间距：sidebar padding、topbar margin */
  --sp-6: 24px;  /* 超大间距：login-card padding */
  --sp-7: 32px;  /* section 间距 */
  --sp-8: 40px;  /* 空态垂直留白 */
  /* 6/10/14/15/18px 等半步值因位置敏感不强制收敛，保留原始 px */

  /* —— 平台级补充颜色 token（收入 shell.css 中高频硬编码）—— */
  --sidebar-bg: #FEFDFB;      /* 侧边栏暖灰背景 */
  --sidebar-border: #e8eaef;  /* 侧边栏右分割线 */
  --icon-gray: #858b96;      /* 图标按钮灰、收起箭头灰 */
  --nav-muted: #6f7682;      /* 导航次级文字灰 */
  --hover-bg: #f3f4f7;       /* nav-item / brand hover 背景 */
  --hover-bg-alt: #f5f6f8;   /* sidebar-account hover 背景 */
  --input-focus-bg: #fbfaff; /* 单元格内 input 聚焦底色 */
  --disabled-bg: #f8fafc;    /* 禁用控件底色 */
  --disabled-text: #667085;   /* 禁用控件文字色 */
  --dark-bg: #1f242b;        /* 登录卡近黑背景 */
  --purple: var(--accent);         /* 历史兼容：紫色强调色统一映射为 LOGO 红色（#D5000D） */
  --purple-2: var(--accent-strong);/* 历史兼容：渐变终点紫色 → LOGO 深红色（#b8000b），与 accent 组成红色渐变 */
  --ok-bg: #ecfdf3;          /* badge.ok 背景 */
  --warn-bg: #fff7ed;        /* badge.warn 背景 */
  --bad-bg: #fef3f2;         /* badge.bad 背景 */
  --ok-text: #0f8038;        /* ok 文字色 */
  --bad-text: #c21f23;       /* err 文字色 */
  --scrollbar-thumb: #d5d7db;    /* 滚动条拇指 */
  --scrollbar-thumb-hover: #b9bcc2; /* 滚动条拇指 hover */
}

* { box-sizing: border-box; }

/* ===== 全局 Focus Ring 回填：A11y 无障碍键盘焦点可见 =====
 * 历史问题：shell.css 里 outline:none 让键盘 Tab 的焦点完全看不见，键盘用户完全迷失。
 * 策略：对所有交互元素，:focus-visible（键盘聚焦）时显示统一 --focus-ring；
 *       鼠标点击的 :focus 不显示（避免视觉噪音）。
 *       原生 browser outline 保留走，不硬 none；需单独 outline-color:transparent 的场景交由具体规则。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* input/select/textarea 原本默认 outline:none 用的是 focus 态边框反馈；
 * 但键盘用户必须能看见焦点，所以用 :focus-visible 覆盖额外一层 ring。
 * 它们的 outline-color 统一透明，避免 mouse focus 时出现默认黑边。 */
input, select, textarea {
  outline-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: var(--fs-md);
  letter-spacing: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.locked { overflow: hidden; }

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--text); }

p { margin: 0; }

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  padding: 1px 6px;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}

.muted { color: var(--muted); }

.hidden { display: none !important; }

/* 通用按钮基础样式（Shell 与模块共享） */
button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--panel);
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
button:hover { border-color: var(--line-strong); background: var(--panel-soft); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.danger {
  background: #fff;
  border-color: #f2c2bf;
  color: var(--bad);
}
button.danger:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
button.full { width: 100%; padding: 9px 14px; }
button.secondary {
  background: var(--head);
  border-color: var(--line);
  color: var(--text);
}
button.secondary:hover { border-color: var(--line-strong); background: #ffffff; }
button.ghost, button.secondary.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
button.ghost:hover, button.secondary.ghost:hover { color: var(--text); background: var(--head); border-color: var(--line); }

.row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ===== 平台入口（apps/web/index.html）：模块选择首页 ===== */
/* 兼容两种容器：旧的 .platform-shell（预留）与新的 Shell 主内容区 .main-content 下 .view 内的模块卡片 */
.platform-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  color: var(--text);
}
.platform-shell header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 36px;
}
.platform-shell header .brand-logo {
  width: 220px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
.platform-shell header .eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent);
  margin: 0 0 6px;
  text-transform: uppercase;
}
.platform-shell header p {
  color: var(--muted);
  font-size: var(--fs-md);
}
.platform-shell .module-grid,
.main-content .view .module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.platform-shell .module-card,
.main-content .view .module-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 170px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.platform-shell .module-card:hover,
.main-content .view .module-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}
.platform-shell .module-card.active,
.main-content .view .module-card.active {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
}
.platform-shell .module-card > span,
.main-content .view .module-card > span {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.platform-shell .module-card.planned > span,
.main-content .view .module-card.planned > span {
  background: var(--head);
  color: var(--muted);
  border: 1px solid var(--line);
}
.platform-shell .module-card.active > span,
.main-content .view .module-card.active > span {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-soft);
}
.platform-shell .module-card h2,
.main-content .view .module-card h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin: 4px 0 0;
}
.platform-shell .module-card p,
.main-content .view .module-card p {
  color: var(--muted);
  font-size: var(--fs-base);
  flex: 1;
}
.platform-shell .module-card a,
.main-content .view .module-card a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 9px 12px 9px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: background .15s ease;
}
.platform-shell .module-card a:hover,
.main-content .view .module-card a:hover { background: var(--accent-strong); }
.platform-shell .module-card a b,
.main-content .view .module-card a b { font-weight: 700; font-size: 15px; margin-left: 6px; }
.platform-shell footer,
.main-content .view > footer {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: 8px 0;
}

/* ===== Step 3：Toast 通知组件（平台级，所有模块通过 Orbit.shell.toast(msg, type, timeout) 调用）=====
 * 背景：之前操作成功/失败基本靠 alert() 弹窗，会阻塞交互、体验差；
 *       或完全不反馈，用户点了按钮不知道有没有生效。
 * 设计：
 *   - 固定在视口顶部居中（不会被任何弹层/侧栏/主内容挡住），z-index 200
 *   - 默认 info 型：白底 + 灰边，柔和不抢焦点
 *   - ok 型：绿色成功系 + ✓ 前缀
 *   - err 型：红色错误系 + ✕ 前缀
 *   - 带入场动画（从上方滑入）+ 退场淡出（JS 到时移除 DOM）
 *   - 最大宽度 480px，不会撑满小屏；文字自动换行
 * 使用示例：
 *   Orbit.shell.toast('已保存 8 条绩效记录', 'ok');
 *   Orbit.shell.toast('密码错误，请重试', 'err');
 *   Orbit.shell.toast('正在上传 CSV...', 'info', 1500);
 */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 200;
  max-width: 480px;
  min-width: 180px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(17, 24, 39, .14), 0 2px 6px rgba(17, 24, 39, .06);
  font-size: var(--fs-md);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  animation: toastIn .22s cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* 多个 Toast 堆叠：通过 JS 设置 inline style margin-top 避免重叠；这里只给基础 .toast-leave 退场动画 */
.toast.toast-leave {
  animation: toastOut .2s ease forwards;
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
/* —— 状态变种：ok / err / info —— */
.toast.toast-ok {
  border-color: rgba(18, 183, 106, .45);
  background: #f3fcf7;
  color: var(--ok-text);
}
.toast.toast-ok::before {
  content: "✓  ";
  font-weight: 700;
  color: var(--ok);
}
.toast.toast-err {
  border-color: rgba(180, 35, 24, .4);
  background: #fff4f3;
  color: var(--bad-text);
}
.toast.toast-err::before {
  content: "✕  ";
  font-weight: 700;
  color: var(--bad);
}
.toast.toast-info::before {
  content: "ⓘ  ";
  font-weight: 600;
  color: var(--muted);
}

/* ===== 仓储库存：ERP 快照与版本化标准查询 ===== */
.inventory-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  border: 1px solid #f0d69a;
  border-radius: var(--radius-sm);
  background: #fffbeb;
  color: #7c4a03;
  font-size: var(--fs-base);
}
.inventory-notice strong { white-space: nowrap; }

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: var(--sp-4);
}
.inventory-form,
.inventory-query-form {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) 18px 18px;
}
.inventory-form label,
.inventory-query-form label {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: var(--fs-base);
}
.inventory-form label > span,
.inventory-query-form label > span { font-weight: 600; }
.inventory-form small { color: var(--muted); }
.inventory-form input,
.inventory-query-form input,
.inventory-query-form select { width: 100%; }
.inventory-form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}
.inventory-api-base {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.inventory-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.inventory-status-grid > div {
  min-width: 0;
  padding: 12px 18px;
  background: #fff;
}
.inventory-status-grid dt {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.inventory-status-grid dd {
  margin: 3px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.inventory-summary-block { padding: 14px 18px 18px; }
.inventory-summary-block h4 { margin-bottom: 10px; font-size: var(--fs-md); }
.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2);
}
.inventory-summary-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--head);
}
.inventory-summary-grid strong {
  display: block;
  overflow-wrap: anywhere;
}
.inventory-summary-grid span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.inventory-empty {
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
}
.inventory-error { color: var(--bad); }

.inventory-query-panel .panel-head > div { display: grid; gap: 2px; }
.inventory-query-form { border-bottom: 1px solid var(--line); }
.inventory-query-parameters {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.inventory-query-result { min-height: 108px; }
.inventory-result-table { max-height: 52vh; }
.inventory-result-table td { max-width: 320px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .inventory-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .inventory-notice { align-items: flex-start; flex-direction: column; gap: var(--sp-1); }
  .inventory-status-grid,
  .inventory-query-parameters { grid-template-columns: 1fr; }
  .inventory-form-actions { align-items: stretch; flex-direction: column; }
  .inventory-form-actions button { width: 100%; }
}