/* 小英家政订单系统 — 整体 UI 优化主题 v20260903c
 * 目标：颜色更清爽（家政/信任感 teal）、布局留白更足、顶部横菜单改为左侧固定导航。
 * 本文件只覆盖变量与结构样式，不修改 React 编译产物。
 */

:root {
  /* 主色：从原来的暖橙棕改为家政行业更信任、清爽的 teal-600 */
  --primary: 173 80% 32%;
  --primary-foreground: 0 0% 100%;
  --ring: 173 80% 32%;

  --accent: 174 60% 94%;
  --accent-foreground: 173 80% 22%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --background: 210 20% 98%;
  --foreground: 215 25% 18%;

  --card: 0 0% 100%;
  --card-foreground: 215 25% 18%;

  --popover: 0 0% 100%;
  --popover-foreground: 215 25% 18%;

  --secondary: 210 20% 94%;
  --secondary-foreground: 215 25% 25%;

  --muted: 210 18% 93%;
  --muted-foreground: 215 12% 45%;

  --border: 210 16% 88%;
  --input: 210 16% 88%;

  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 215 25% 18%;
  --sidebar-primary: 173 80% 32%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 174 60% 95%;
  --sidebar-accent-foreground: 173 80% 22%;
  --sidebar-border: 210 16% 90%;
  --sidebar-ring: 173 80% 32%;
}

/* 侧边栏宽度常量 + 禁止横向滚动：防止 Radix Select 下拉面板撑出视口导致画面右跳 */
html {
  --oe-sidebar-width: 220px;
  overflow-x: hidden;
}

/* ========== 左侧固定导航 ========== */
body {
  margin-left: var(--oe-sidebar-width) !important;
}

/* 隐藏原顶部菜单行（保留第一行 header 放 logo/用户信息） */
header nav.flex.flex-wrap.items-center.gap-1\.5.border-t.py-2,
header > div > div > nav,
header nav.flex {
  display: none !important;
}

/* header 整体抬高、视觉更干净 */
header {
  left: var(--oe-sidebar-width) !important;
  right: 0 !important;
  width: auto !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card) / 0.95) !important;
  backdrop-filter: blur(8px) !important;
}

header > div.mx-auto {
  max-width: none !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

header .flex.h-14 {
  height: 56px !important;
}

/* 隐藏顶部 header 里的 logo+标题（侧边栏已有品牌），只保留右侧用户操作 */
header .flex.h-14 > button:first-of-type,
header .flex.h-14 > a:first-of-type {
  display: none !important;
}

/* 主内容区跟随左侧边距 */
main.mx-auto.max-w-screen-2xl {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  min-height: calc(100vh - 56px);
  padding: 1.25rem !important;
}

/* 防止 grid 子项被过宽内容（如 Radix Select 下拉）撑大，避免窄屏下画面被撑出 */
.grid > * {
  min-width: 0 !important;
}

/* 自定义左侧导航 */
#oe-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--oe-sidebar-width);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

#oe-sidebar .oe-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  color: hsl(var(--foreground));
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  user-select: none;
}

#oe-sidebar .oe-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

#oe-sidebar .oe-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#oe-sidebar .oe-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  color: hsl(var(--sidebar-foreground));
  font-size: 0.925rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

#oe-sidebar .oe-nav-item:hover {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
}

#oe-sidebar .oe-nav-item[aria-current="page"],
#oe-sidebar .oe-nav-item.active {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-primary));
  box-shadow: inset 3px 0 0 0 hsl(var(--sidebar-primary));
  font-weight: 600;
}

#oe-sidebar .oe-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

#oe-sidebar .oe-footer {
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--sidebar-border));
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-align: center;
}

/* ========== 颜色/布局细节补刀 ========== */

/* 顶部标题区更紧凑 */
h1, h2, h3 {
  color: hsl(var(--foreground));
}

/* 按钮圆角更现代 */
button, [role="button"], input, select, textarea {
  border-radius: 0.5rem !important;
}

/* 表格/卡片阴影更轻 */
[data-oe-list],
table, .rounded-lg, .rounded-md, .rounded-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* 待派单胶囊等状态标签保留可读性，仅微调圆角 */
.bg-primary\/10 {
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
}

/* ==========================================================================
   v20260903f：登录页判断改为「路由 + 登录表单」双条件（body.oe-login-page
   由 ui-theme.js 按路由维护；:has 实时求值感知登录表单挂载/卸载）。
   旧方案仅用 body:has(input[type="password"]) 结构探测——「客服管理」页
   含密码输入框（新增账号卡片）同样命中，导致侧边栏/顶栏整页隐藏、无法返回。
   双条件的必要性：已登录时访问 /login，React 会渲染订单管理页但 URL 仍是
   /login，此时页面没有密码输入框，:has 不命中 → 侧边栏正常显示。
   ========================================================================== */
body.oe-login-page:has(input[type="password"]),
body.oe-login-page:has(div#root > div > form) {
  margin-left: 0 !important;
}

body.oe-login-page:has(input[type="password"]) #oe-sidebar,
body.oe-login-page:has(div#root > div > form) #oe-sidebar,
body.oe-login-page:has(input[type="password"]) header,
body.oe-login-page:has(div#root > div > form) header {
  display: none !important;
}

/* ==========================================================================
   v20260903d：修复下拉/弹层打开时整页内容突然变窄
   根因：radix Select/Dialog 打开时 react-remove-scroll 给 body 加 data-scroll-locked，
   并按「window.innerWidth − body.clientWidth」误算滚动条补偿宽度——本应用 body
   因侧边栏偏移比窗口窄 220px，结果被注入 padding-left:220px，内容区整体挤窄
   （详情页右侧「订单金额与操作/派单模版」列从 329px 缩到 256px）。
   本应用滚动条为 overlay 式（宽度 0），无需补偿，归零即可。
   ========================================================================== */
/* 用 html 前缀提权：react-remove-scroll 运行时在 head 末尾注入同选择器的
   overflow:hidden !important，文档序在后会盖掉同权重的覆盖规则 */
html body[data-scroll-locked] {
  padding-left: 0 !important;
}

/* ==========================================================================
   v20260903e：修复滚动锁定期顶栏/吸顶头部消失
   根因：radix Select 打开期间 react-remove-scroll 给 body 注入
   overflow:hidden（配合 data-scroll-locked）——overflow:hidden 使 body 变成
   滚动容器，所有 sticky 元素（原生顶栏 header.sticky、详情页吸顶头部）改为
   相对 body 对齐，而页面实际滚动发生在 html 上 → 顶栏/吸顶头随内容滚出视野。
   用 overflow:clip 替代：同样裁剪溢出内容（保留滚动锁视觉效果），
   但 clip 不产生滚动容器，sticky 继续相对视口生效。
   ========================================================================== */
html body[data-scroll-locked] {
  overflow: clip !important;
}

/* ==========================================================================
   v20260903e：详情页头部吸顶（配合 orders-enhance v9.8 的 .oe-sticky-sub）
   详情页「返回列表+客户名+单号+状态徽标+编辑原始信息」行为普通文档流元素，
   下滚点「订单状态/归属客服」下拉时头部滚出视野。吸附在原生顶栏（sticky z-40，
   高 56+1 边框=57px）正下方，负 margin 外扩盖住 main 的 px 内边距，避免内容从
   头部两侧露出来。z-30：低于顶栏 z-40、高于页面内容；radix 下拉 z-50 不受影响。
   ========================================================================== */
.oe-sticky-sub {
  position: sticky;
  top: 57px;
  z-index: 30;
  background-color: hsl(var(--background));
  padding: 10px 16px;
  margin: -10px -16px 6px;
  border-bottom: 1px solid hsl(var(--border));
}
@media (min-width: 640px) {
  .oe-sticky-sub {
    padding: 10px 24px;
    margin: -10px -24px 6px;
  }
}