/* ============ 必火OA 品牌主色：铜橙（覆盖 Element Plus 主色全梯度）============ */
:root {
  --el-color-primary: #DE6E1E;
  --el-color-primary-light-3: #E89A62;
  --el-color-primary-light-5: #EEB78F;
  --el-color-primary-light-7: #F5D4BC;
  --el-color-primary-light-8: #F8E2D2;
  --el-color-primary-light-9: #FCF0E9;
  --el-color-primary-dark-2: #B15818;
  --bihuo-ink: #23272E;   /* 深岩灰：品牌深色（顶栏/品牌区） */
  --bihuo-ember: #E8772A; /* 火焰高光铜橙 */

  /* ── 设计 token：间距 / 圆角 / 大号数字。复用型组件类(metric-card/m-card/ovw-stat 等)统一引用，
     以后调全局卡片间距/圆角改这里一处即可（取值=现状，引入不改观感）。注：散落在各页 inline style
     里的间距/圆角暂未 token 化（量大、改动风险高），后续再逐步收敛。 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --radius-md: 8px;   /* 卡片标准圆角 */
  --radius-lg: 12px;
  --fz-metric: 24px;  /* 看板大号金额数字 */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;   /* web-view 顶到边不露白底/不误触下拉刷新 */
}

body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--el-text-color-primary);
  -webkit-tap-highlight-color: transparent;   /* 去掉点按灰块 */
  -webkit-text-size-adjust: 100%;             /* 禁系统字号自适应重排 */
  text-size-adjust: 100%;
}

#app {
  height: 100%;
}

/* ---------- 登录 ---------- */
.login-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--el-bg-color-page);
}

.login-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--el-text-color-secondary);
}
.login-foot a {
  color: var(--el-text-color-secondary);
  text-decoration: none;
}
.login-foot a:hover {
  color: var(--el-color-primary);
}

.login-card {
  width: 360px;
}

.login-logo {
  display: block;
  width: 66px;
  height: 66px;
  border-radius: 15px;
  object-fit: cover;
  margin: 6px auto 12px;
}
.login-title {
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 2px;
}
.login-sub {
  text-align: center;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  letter-spacing: 2px;
  margin: 0 0 22px;
}

/* ---------- 整体布局 ---------- */
.layout {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--el-border-color-light);
}

.brand {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--bihuo-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F2EBE2;
}
.brand .brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  flex: none;
}
.brand .em {
  color: var(--bihuo-ember);
}

.sidebar .el-menu {
  flex: 1;
  border-right: none;
}

/* 导航角标：行内小红数字（待办/待审批计数）。取代 el-badge——
   el-badge 的 <sup> vertical-align:bottom 会贴到 56px 行底、看着「斜下方」；
   行内 inline-flex 居中才正好待在文字正后方。桌面侧栏与手机抽屉共用。 */
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 8px;
  border-radius: 9px;
  background: var(--el-color-danger);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  flex: none;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-regular);
}

.content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: #fff;
}

/* ---------- 看板指标卡 ---------- */
.cards-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* 驾驶舱分组小标题（综合 / 工资 / 报销） */
.ovw-group-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin: 2px 0 8px;
  border-left: 3px solid var(--el-color-primary);
  padding-left: 8px;
}

.metric-card {
  background: var(--el-fill-color-light);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.metric-card .label {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.metric-card .value {
  font-size: var(--fz-metric);
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.metric-card .value.danger { color: var(--el-color-danger); }
/* 语义色数字卡（财务总览/业务收入用：收入绿、支出橙、增值税灰、正数蓝、负数走 .danger）。
   收口原先散在各页 inline 的 #67c23a/#e6a23c/#909399/#409eff，统一到这里，口径一处可改。 */
.metric-card .value.c-income  { color: var(--el-color-success); }
.metric-card .value.c-expense { color: var(--el-color-warning); }
.metric-card .value.c-vat     { color: var(--el-color-info); }
.metric-card .value.c-pos     { color: #409eff; }   /* 正数(利润/现金为正)蓝，非主题色、刻意 */

.metric-card .unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--el-text-color-secondary);
}

/* ---------- 通用 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar .spacer {
  flex: 1;
}

.mt16 {
  margin-top: 16px;
}

.mb16 {
  margin-bottom: 16px;
}

.pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.money {
  font-variant-numeric: tabular-nums;
}

.danger-text {
  color: var(--el-color-danger);
}

.muted {
  color: var(--el-text-color-secondary);
}

.submit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.topbar-left .topbar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hamburger {
  padding: 4px;
}

.user-trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  color: var(--el-text-color-regular);
}

/* ---------- 手机卡片列表（表格在窄屏的替代渲染） ---------- */
.m-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-card {
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  background: #fff;
}

.m-card .m-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.m-card .m-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 14px;
}

.m-card .m-k {
  color: var(--el-text-color-secondary);
  flex: none;
}

.m-card .m-v {
  text-align: right;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

/* 卡片内的表单控件铺满值区域（避免固定宽度 select/input 溢出/被裁切） */
.m-card .m-v .el-select,
.m-card .m-v .el-input,
.m-card .m-v .el-date-editor.el-input,
.m-card .m-v .el-date-editor,
.m-card .m-v .el-input-number {
  width: 100% !important;
}

.m-card .m-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-empty {
  text-align: center;
  color: var(--el-text-color-secondary);
  padding: 24px 0;
}

/* ---------- 手机端响应式（≤768px） ---------- */
@media (max-width: 768px) {
  .content {
    padding: var(--sp-3);
  }

  .topbar {
    padding: 0 12px;
  }

  .cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  .metric-card {
    padding: var(--sp-3);
  }

  .metric-card .value {
    font-size: 20px;
  }

  .login-card {
    width: 92vw;
    max-width: 360px;
  }

  /* 弹窗/确认框近全屏，避免比屏还宽 */
  .el-dialog {
    width: 92vw !important;
    max-width: 92vw;
  }

  .el-message-box {
    width: 90vw !important;
    max-width: 90vw;
  }

  /* 工具栏按钮在窄屏更易点 */
  .toolbar .el-button {
    margin-left: 0 !important;
  }

  /* 抽屉内菜单铺满 */
  .el-drawer__body {
    padding: 0;
  }
}

/* 手机：表单堆叠 + 控件铺满（提交录入等用 .m-form 标记） */
.m-form .el-form-item {
  display: block;
  margin-right: 0;
  margin-bottom: 12px;
}

.m-form .el-form-item__content {
  display: block;
}

.m-form .el-select,
.m-form .el-input,
.m-form .el-date-editor.el-input,
.m-form .el-date-editor,
.m-form .el-input-number {
  width: 100% !important;
}


/* ===== 微信小程序 web-view 手机优化（安全区 / 触控热区 / 防聚焦缩放） ===== */
.home-btn { padding: 4px; color: var(--el-text-color-regular); }
.home-btn:hover { color: var(--el-color-primary); }
@media (max-width: 768px) {
  /* 顶栏左右安全区（刘海/圆角避让）+ 汉堡/房子/用户三图标 44px 触控热区 */
  .topbar { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
  .topbar .hamburger, .topbar .home-btn, .topbar .user-trigger { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .topbar-user { gap: 2px; }
  /* 内容区底部安全区 + 惯性滚动 + 滚动不外冒 */
  .content { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* 防 iOS 输入聚焦整页放大：输入统一 ≥16px */
  .el-input__inner, .el-textarea__inner { font-size: 16px; }
  /* 底部动作/内容 落到 iPhone home indicator 之上，不被盖住/不误触上滑 */
  .hd-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .drawer-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .login-wrap { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .el-drawer .brand { padding-top: env(safe-area-inset-top); }
  /* 全屏详情头部避让状态栏 + 关闭✕ 热区放大 */
  .hd-dialog.is-fullscreen .el-dialog__header { padding-top: calc(14px + env(safe-area-inset-top)); }
  .hd-dialog.is-fullscreen .hd-x { min-width: 40px; height: 40px; font-size: 18px; }
  /* 看板卡片：手机显式单列 + 按下反馈（web-view 无 hover） */
  .bgrid { grid-template-columns: 1fr; }
  .bcard:active { background: #fafbfc; }
}

/* —— 备案信息（工信部 ICP + 公安网安）：登录页/无权访问页/主界面底部 —— */
.beian { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 16px; margin-top:6px; font-size:12px; line-height:1.8; }
.beian a { color:var(--el-text-color-secondary); text-decoration:none; display:inline-flex; align-items:center; }
.beian a:hover { color:var(--el-color-primary); }
.beian-badge { width:14px; height:14px; margin-right:4px; vertical-align:-2px; }
/* 主界面：跟在内容后面、与内容拉开距离并居中弱化 */
.content > .beian { margin:26px 0 2px; padding-top:14px; border-top:1px solid var(--el-border-color-lighter); color:var(--el-text-color-secondary); }
@media (max-width: 768px) {
  .beian { gap:2px 12px; font-size:11.5px; }
  .content > .beian { margin-top:20px; padding-bottom:calc(4px + env(safe-area-inset-bottom)); }
}


/* ===== 便签（本系统门面）=====
   气质对标 Things / Linear：单列清单、大量留白、**只有状态用颜色**，
   账号与人名一律中性灰。老板明确要求"清晰直观 > 功能堆砌"，
   所以这里不做彩色标签墙，颜色只承担一个职责——告诉你哪件事在烧。 */

.nt-wrap { max-width: 860px; }
.nt-wrap.wide { max-width: none; }

/* —— 顶部：一句话摘要 + 新建 —— */
.nt-head { display:flex; align-items:flex-end; gap:12px; margin:0 0 18px; flex-wrap:wrap; }
.nt-head h2 { margin:0; font-size:22px; font-weight:600; letter-spacing:.2px; }
.nt-head .nt-sub { color:var(--el-text-color-secondary); font-size:13px; padding-bottom:3px; }
.nt-head .nt-spacer { flex:1; }

/* —— 分段标题（今天 / 接下来 / 逾期）—— */
.nt-day { display:flex; align-items:center; gap:8px; margin:26px 0 4px; font-size:13px;
          color:var(--el-text-color-secondary); font-weight:500; }
.nt-day:first-child { margin-top:0; }
.nt-day .nt-day-n { color:var(--el-text-color-placeholder); font-weight:400; }
.nt-day.is-overdue { color:var(--el-color-danger); }

/* —— 一行便签 —— */
.nt-row { display:flex; gap:11px; padding:10px 10px 10px 8px; margin:0 -10px 0 -8px;
          border-bottom:1px solid var(--el-border-color-lighter); border-radius:8px;
          cursor:pointer; transition:background .12s; }
.nt-row:hover { background:var(--el-fill-color-light); }
.nt-row:last-child { border-bottom:none; }

/* 圆形勾选：点它 = 直接推进这张便签当前该做的那一步（接收/完成/验收） */
.nt-ck { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--el-border-color);
         flex:0 0 auto; margin-top:2px; display:flex; align-items:center; justify-content:center;
         color:transparent; font-size:11px; transition:all .14s; background:transparent; }
.nt-ck:hover { border-color:var(--el-color-primary); color:var(--el-color-primary); }
.nt-ck.is-done { background:var(--el-color-success); border-color:var(--el-color-success); color:#fff; }
.nt-ck.is-idle { cursor:default; }
.nt-ck.is-idle:hover { border-color:var(--el-border-color); color:transparent; }

.nt-body { flex:1; min-width:0; }
.nt-title { font-size:14.5px; line-height:1.5; margin:0; color:var(--el-text-color-primary);
            word-break:break-word; }
.nt-row.is-closed .nt-title { color:var(--el-text-color-placeholder); text-decoration:line-through; }
.nt-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px;
           font-size:12px; color:var(--el-text-color-placeholder); line-height:1.6; }
.nt-meta .nt-person { color:var(--el-text-color-secondary); }
.nt-tag { color:var(--el-text-color-placeholder); }
.nt-date { flex:0 0 auto; font-size:12.5px; color:var(--el-text-color-placeholder);
           white-space:nowrap; padding-top:2px; }
.nt-date.is-overdue { color:var(--el-color-danger); }
.nt-date.is-today { color:var(--el-color-primary); }

/* 状态徽标：克制到只有四种会上色 */
.nt-pill { font-size:11.5px; padding:1px 7px; border-radius:6px; line-height:1.7;
           background:var(--el-fill-color); color:var(--el-text-color-secondary); }
.nt-pill.p-danger  { background:var(--el-color-danger-light-9);  color:var(--el-color-danger); }
.nt-pill.p-warn    { background:var(--el-color-warning-light-9); color:var(--el-color-warning); }
.nt-pill.p-info    { background:var(--el-color-primary-light-9); color:var(--el-color-primary); }
.nt-pill.p-success { background:var(--el-color-success-light-9); color:var(--el-color-success); }

/* —— 空态：不留白板，给一句话告诉他现在该干嘛 —— */
.nt-empty { padding:44px 20px; text-align:center; color:var(--el-text-color-placeholder); }
.nt-empty .nt-empty-ico { font-size:30px; opacity:.35; margin-bottom:10px; }
.nt-empty .nt-empty-t { font-size:14px; color:var(--el-text-color-secondary); }
.nt-empty .nt-empty-s { font-size:12.5px; margin-top:5px; }

/* —— 方案B：双向对账（左 等我做 / 右 我派出去的）—— */
.nt-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.nt-col-h { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
            color:var(--el-text-color-secondary); padding-bottom:9px;
            border-bottom:1px solid var(--el-border-color-lighter); margin-bottom:4px; }
.nt-col-h .nt-col-n { margin-left:auto; color:var(--el-text-color-placeholder); font-weight:400; }
.nt-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 24px; }
.nt-stat { background:var(--el-fill-color-light); border-radius:var(--radius-md); padding:13px 15px; }
.nt-stat .nt-stat-l { font-size:12.5px; color:var(--el-text-color-secondary); }
.nt-stat .nt-stat-v { font-size:24px; font-weight:500; line-height:1.3; margin-top:2px; }
.nt-stat .nt-stat-v.v-danger { color:var(--el-color-danger); }
.nt-stat .nt-stat-v.v-info { color:var(--el-color-primary); }
.nt-stat.is-zero .nt-stat-v { color:var(--el-text-color-placeholder); }

/* —— 详情弹窗（居中 el-dialog，不用右侧抽屉：老板明确说抽屉"太丑"）—— */
.nt-dlg-title { font-size:16px; line-height:1.5; font-weight:500; word-break:break-word; }
.nt-dlg-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;
               font-size:12.5px; color:var(--el-text-color-secondary); }
.nt-dlg-sec { margin-top:18px; }
.nt-dlg-sec-t { font-size:12px; color:var(--el-text-color-placeholder); margin-bottom:7px; }
.nt-dlg-body { font-size:13.5px; line-height:1.75; white-space:pre-wrap; word-break:break-word;
               color:var(--el-text-color-regular); }
.nt-note-hint { font-size:12.5px; color:var(--el-text-color-placeholder); line-height:1.7; }

/* 时间线：接力转交/退回/延期的全程留痕 */
.nt-tl { position:relative; padding-left:16px; }
.nt-tl::before { content:''; position:absolute; left:4px; top:6px; bottom:6px; width:1px;
                 background:var(--el-border-color-lighter); }
.nt-tl-i { position:relative; padding:5px 0; font-size:12.5px; line-height:1.7; }
.nt-tl-i::before { content:''; position:absolute; left:-15px; top:12px; width:7px; height:7px;
                   border-radius:50%; background:var(--el-border-color); }
.nt-tl-i.is-now::before { background:var(--el-color-primary); }
.nt-tl-who { color:var(--el-text-color-primary); }
.nt-tl-when { color:var(--el-text-color-placeholder); margin-left:6px; font-size:11.5px; }
.nt-tl-d { color:var(--el-text-color-secondary); }

/* —— 快捷日期（今天/明天/本周内）：让"什么时候要"三个字不成为发便签的门槛 —— */
.nt-quick { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.nt-quick .el-button { padding:5px 11px; }

@media (max-width: 768px) {
  .nt-cols { grid-template-columns:1fr; gap:26px; }
  .nt-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .nt-head h2 { font-size:19px; }
  .nt-row { padding:11px 8px; }
  .nt-title { font-size:15px; }
  /* 手机端行高/热区放大，拇指点得中 */
  .nt-ck { width:19px; height:19px; }
}

/* 手机端悬浮新建按钮：发便签的门槛必须低到"随手就发"，藏进菜单里就没人用了 */
.nt-fab { position:fixed; right:18px; z-index:900; width:52px; height:52px;
          bottom:calc(20px + env(safe-area-inset-bottom)); box-shadow:0 4px 14px rgba(0,0,0,.18); }