/* ==========================================================
   KefuSystem · 工单中心演示
   复用 demo.css 的纸面/黑墨/橙色体系与外壳组件
   ========================================================== */

/* ---------------- 后台外壳 ---------------- */
.app{
  position:relative;
  background:var(--mock-bg);
  border:1px solid var(--mock-line);
  box-shadow:0 30px 70px -52px rgba(20,17,15,.55);
  overflow:hidden;
  min-width:0;
}
.app-top{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding:.7rem clamp(.8rem,1.6vw,1.1rem);
  border-bottom:1px solid var(--mock-line);
  background:#FBF7EE;
}
.app-brand{
  display:flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.app-brand small{font-weight:400;font-size:.625rem;color:var(--ink-faint);letter-spacing:.06em}
.app-mark{
  width:14px;height:14px;background:var(--ink);display:block;
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%);
}
.app-env{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.6875rem;color:var(--ink-faint);white-space:nowrap;
}
.app-env i{
  width:6px;height:6px;border-radius:50%;background:#5E9B6C;display:block;
  box-shadow:0 0 0 3px rgba(94,155,108,.16);
}
.app-user{
  margin-left:auto;display:flex;align-items:center;gap:.45rem;
  font-size:.75rem;color:var(--ink-soft);white-space:nowrap;
}
.app-avatar{
  width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  color:var(--accent-deep);
  display:grid;place-items:center;font-size:.625rem;
}

.app-body{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:600px}

/* ---------------- 左栏 ---------------- */
.app-rail{
  border-right:1px solid var(--mock-line);
  padding:1rem .8rem;background:#FCF9F2;
  display:flex;flex-direction:column;gap:.15rem;
  font-size:.75rem;color:var(--ink-faint);
}
.rail-item{
  padding:.4rem .55rem;text-align:left;
  background:transparent;border:0;
  font-family:var(--sans);font-size:.75rem;letter-spacing:inherit;color:inherit;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.rail-item:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.rail-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.rail-item.is-on{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-deep);font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent);
}
.rail-note{
  margin-top:auto;font-size:.625rem;line-height:1.55;
  color:color-mix(in srgb,var(--ink) 34%,transparent);
}

/* ---------------- 主区 ---------------- */
.app-main{display:flex;flex-direction:column;min-width:0;padding:clamp(.9rem,2vw,1.3rem)}

/* ---------------- 模块视图 ---------------- */
.view{display:none;min-width:0}
.view.is-on{display:flex;flex-direction:column;flex:1}

.view-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.65rem;border-bottom:1px solid var(--mock-line);
}
.view-head h2{font-family:var(--serif);font-weight:400;font-size:1.0625rem;letter-spacing:-.01em}
.view-head p{font-size:.6875rem;color:var(--ink-faint)}
.view-head + .kpi-row{margin-top:.85rem}
.unit{font-family:var(--sans);font-size:.75rem;font-weight:400;margin-left:.1rem;color:var(--ink-faint)}

.dash-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(.6rem,1.4vw,.85rem);margin-top:.9rem;
}
.panel{border:1px solid var(--mock-line);background:#FCF9F2;padding:.7rem .8rem;min-width:0}
.panel.is-wide{grid-column:1/-1}
.panel h3{font-size:.6875rem;font-weight:500;letter-spacing:.1em;color:var(--accent-deep)}
.panel .dtable{margin-top:.55rem}

.bars{margin-top:.6rem;display:grid;gap:.45rem}
.bars li{
  display:grid;grid-template-columns:62px minmax(0,1fr) 34px;gap:.5rem;align-items:center;
  font-size:.6875rem;color:var(--ink-soft);
}
.bars .bar{height:6px;background:color-mix(in srgb,var(--ink) 8%,transparent);display:block;position:relative}
.bars .bar i{position:absolute;top:0;bottom:0;left:0;display:block;background:var(--ink)}
.bars .bar[data-s="待处理"] i{background:var(--accent)}
.bars .bar[data-s="已解决"] i{background:#5E9B6C}
.bars b{font-weight:400;color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}

.week{margin-top:.7rem;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;height:92px}
.week li{
  display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  position:relative;text-align:center;font-size:.5625rem;color:var(--ink-faint);
}
.week li::after{
  content:"";position:absolute;left:0;right:0;bottom:1.2rem;
  height:1px;background:var(--mock-line);
}
.week i{display:block;width:100%;max-width:52px;margin:0 auto;background:color-mix(in srgb,var(--ink) 16%,transparent);min-height:2px}
.week li.is-today i{background:var(--accent)}
.week li.is-today span{color:var(--accent-deep)}
.week span{margin-top:.3rem}

/* 轻量表格 */
.dtable{display:flex;flex-direction:column;margin-top:.85rem}
.drows{display:flex;flex-direction:column}
.dhead,.drow{display:grid;gap:.6rem;align-items:center;padding:.5rem .45rem;font-size:.75rem}
.dhead{border-bottom:1px solid var(--mock-line);font-size:.625rem;letter-spacing:.1em;color:var(--ink-faint)}
.drow{border-bottom:1px solid color-mix(in srgb,var(--mock-line) 70%,transparent);color:var(--ink-soft)}
.drow b{color:var(--ink);font-weight:600;font-size:.75rem;line-height:1.5}
.d-id{font-size:.6875rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

.g-q{grid-template-columns:104px minmax(0,1fr) 48px 60px}
.g-k{grid-template-columns:minmax(0,1fr) 132px 76px}
.g-p{grid-template-columns:minmax(88px,1fr) 44px 44px 54px 44px}
.g-r{grid-template-columns:minmax(0,1fr) 48px 48px 64px}
.g-o{grid-template-columns:96px minmax(0,1fr) 62px}

.kpi-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,1.4vw,.8rem);
}
.kpi-row li{
  border:1px solid var(--mock-line);background:#FCF9F2;
  padding:.6rem .75rem;display:flex;flex-direction:column;gap:.1rem;
}
.kpi-row span{font-size:.6875rem;letter-spacing:.08em;color:var(--ink-faint)}
.kpi-row b{font-family:var(--serif);font-size:1.5rem;font-weight:400;line-height:1.2}
.kpi-row li:first-child b{color:var(--accent-deep)}

/* 工具栏 */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
  margin-top:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--mock-line);
}
.search{flex:1 1 220px;min-width:0}
.search input{
  width:100%;padding:.42rem .6rem;
  border:1px solid var(--mock-line);background:#fff;
  font-family:var(--sans);font-size:.75rem;color:var(--ink);
}
.search input::placeholder{color:color-mix(in srgb,var(--ink) 38%,transparent)}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{
  font-size:.6875rem;letter-spacing:.03em;
  padding:.24rem .55rem;border:1px solid var(--mock-line);
  color:var(--ink-soft);background:transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.chip:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip-pri.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.list-count{margin-top:.7rem;font-size:.6875rem;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------------- 工单列表 ---------------- */
.list{margin-top:.35rem}
.trow-head,.trow{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 76px 58px 82px 84px 74px;
  gap:.6rem;align-items:center;
}
.trow-head{
  padding:.45rem .5rem;border-bottom:1px solid var(--mock-line);
  font-size:.625rem;letter-spacing:.1em;color:var(--ink-faint);
}
.tlist{display:flex;flex-direction:column}
.tlist li{border-bottom:1px solid color-mix(in srgb,var(--mock-line) 70%,transparent)}
.trow{
  width:100%;text-align:left;padding:.62rem .5rem;
  font-size:.75rem;color:var(--ink-soft);
  transition:background .18s var(--ease);
}
.trow:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.trow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.trow .tid{font-size:.6875rem;letter-spacing:.02em;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.trow .tmain{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.trow .ttitle{
  color:var(--ink);font-size:.8125rem;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trow .tcustomer{font-size:.6875rem;color:var(--ink-faint)}
.trow .co{font-size:.6875rem;color:var(--ink-faint)}

.pill{
  display:inline-block;font-size:.6875rem;letter-spacing:.02em;
  padding:.1rem .42rem;border:1px solid var(--mock-line);white-space:nowrap;
}
.pill-pri[data-p="高"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.pill-pri[data-p="中"]{color:var(--ink-soft)}
.pill-pri[data-p="低"]{color:var(--ink-faint)}
.pill-status[data-s="待处理"]{color:var(--accent-deep);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pill-status[data-s="处理中"]{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 32%,transparent);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.pill-status[data-s="待审核"]{color:#8A5A00;border-color:#E0C48A;background:#FBF3E2}
.pill-status[data-s="已解决"]{color:#2F6B41;border-color:#BFD8C5;background:#EEF6F0}

.sla{font-size:.6875rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.sla.is-warn{color:var(--accent-deep)}
.sla.is-danger{color:#A11B1B;font-weight:600}

.tlist-empty{padding:2.2rem .5rem;text-align:center;font-size:.8125rem;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:.8rem}

.app-foot{
  margin-top:auto;padding-top:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  border-top:1px solid var(--mock-line);
  font-size:.625rem;letter-spacing:.04em;color:var(--ink-faint);
}
.link-btn-ink{
  font-size:.6875rem;letter-spacing:.06em;color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 40%,transparent);
  padding-bottom:.1rem;flex:none;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.link-btn-ink:hover{color:var(--accent-deep);border-color:var(--accent)}

/* ---------------- 详情抽屉 ---------------- */
.drawer-scrim{
  position:absolute;top:0;right:0;bottom:0;left:172px;z-index:2;
  background:rgba(43,36,30,.16);
  opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease);
}
.drawer-scrim.is-on{opacity:1;pointer-events:auto}

.drawer{
  position:absolute;top:0;right:0;bottom:0;
  width:min(430px,100%);
  display:flex;flex-direction:column;
  background:#FFFDF8;border-left:1px solid var(--mock-line);
  box-shadow:-30px 0 60px -46px rgba(20,17,15,.6);
  transform:translateX(100%);visibility:hidden;
  transition:transform .32s var(--ease),visibility .32s var(--ease);
  z-index:3;
}
.drawer.is-open{transform:none;visibility:visible}

.drawer-top{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.85rem .95rem;border-bottom:1px solid var(--mock-line);
  background:#FBF7EE;
}
.drawer-heading{min-width:0}
.drawer-id{margin:0;font-size:.6875rem;letter-spacing:.08em;color:var(--ink-faint)}
.drawer-title{
  margin:.3rem 0 0;font-family:var(--sans);
  font-size:.9375rem;font-weight:700;line-height:1.4;letter-spacing:-.005em;
}
.drawer-close{
  margin-left:auto;flex:none;
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--mock-line);background:transparent;
  font-size:1rem;line-height:1;color:var(--ink-soft);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.drawer-close:hover{border-color:var(--ink);color:var(--ink)}

.drawer-body{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:.95rem;display:flex;flex-direction:column;gap:1rem;
}
.drawer-flags{display:flex;flex-wrap:wrap;gap:.35rem}
.drawer-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:.45rem .8rem;
  padding-bottom:.9rem;border-bottom:1px dashed var(--mock-line);
}
.drawer-meta div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.drawer-meta dt{font-size:.625rem;letter-spacing:.08em;color:var(--ink-faint)}
.drawer-meta dd{margin:0;font-size:.75rem;color:var(--ink-soft)}
.drawer-meta .sla-meta{color:var(--accent-deep);font-weight:600}

.drawer-sec h3{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  color:var(--accent-deep);display:flex;align-items:center;gap:.45rem;
}
.src-tag{
  font-size:.5625rem;letter-spacing:.08em;color:var(--ink-faint);
  border:1px solid var(--mock-line);padding:.05rem .3rem;
}
.drawer-desc{margin-top:.45rem;font-size:.8125rem;line-height:1.75;color:var(--ink-soft)}

.ctx{margin-top:.5rem;display:grid;gap:.3rem}
.ctx li{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.4rem .5rem;background:#FCF9F2;border:1px solid var(--mock-line);
  font-size:.75rem;color:var(--ink-soft);
}
.ctx b{font-weight:600;color:var(--ink);font-size:.75rem;text-align:right}
.ctx span{font-size:.6875rem;letter-spacing:.04em;color:var(--ink-faint)}

.knlist{margin-top:.5rem;display:grid;gap:.3rem}
.knlist li{padding:.45rem .5rem;border:1px solid var(--mock-line);background:#fff}
.knlist b{display:block;font-size:.75rem;font-weight:600;line-height:1.45;color:var(--ink)}
.knlist span{display:block;margin-top:.15rem;font-size:.625rem;color:var(--ink-faint)}
.knlist .kn-empty{background:transparent;border-style:dashed;font-size:.75rem;color:var(--ink-faint)}

.quote{
  margin:0;padding:.6rem .7rem;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  font-size:.75rem;line-height:1.7;color:var(--ink-soft);
}

.timeline{margin-top:.5rem;display:grid;gap:.5rem}
.timeline li{
  position:relative;padding-left:.95rem;
  font-size:.75rem;color:var(--ink-soft);line-height:1.5;
}
.timeline li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:5px;height:5px;border-radius:50%;background:var(--ink);
}
.timeline li.is-new::before{background:var(--accent)}
.timeline time{
  display:block;font-size:.625rem;letter-spacing:.06em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.drawer-actions{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.75rem .95rem;border-top:1px solid var(--mock-line);
  background:#FBF7EE;
}
.drawer-actions .btn{flex:1}
.drawer-actions .btn:first-child{flex:1.4}
.drawer-done{flex:1;font-size:.6875rem;color:var(--ink-faint);line-height:1.5}

/* ---------------- 页脚说明 ---------------- */
.app-note{margin-top:.9rem;font-size:.6875rem;color:var(--ink-faint);line-height:1.6}
.notes-link{
  color:var(--accent-deep);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding-bottom:.05rem;
}
.notes-link:hover{color:var(--accent)}

/* ---------------- 响应式 ---------------- */
@media (max-width:1120px){
  .trow-head,.trow{grid-template-columns:96px minmax(0,1fr) 56px 76px 72px 72px}
  .col-channel{display:none}
  .trow .co-channel{display:none}
}
@media (max-width:900px){
  .app-body{grid-template-columns:minmax(0,1fr)}
  .app-rail{
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2rem;
    border-right:0;border-bottom:1px solid var(--mock-line);
    padding:.55rem .7rem;
  }
  .rail-item{white-space:nowrap;border:1px solid transparent;padding:.3rem .55rem}
  .rail-item.is-on{box-shadow:none;border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
  .rail-note{display:none}
  .drawer{position:fixed;width:100%;z-index:90;box-shadow:-20px 0 50px -30px rgba(20,17,15,.6)}
  .drawer-scrim{display:none}
  body.drawer-open{overflow:hidden}
}
@media (max-width:720px){
  .trow{grid-template-columns:82px minmax(0,1fr) 54px 68px;gap:.4rem;padding:.7rem .45rem}
  .trow-head{display:none}
  .trow .co-owner{display:none}
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .dhead,.drow{gap:.4rem;padding:.45rem .3rem;font-size:.6875rem}
  .drow b{font-size:.6875rem}
  .g-q{grid-template-columns:94px minmax(0,1fr) 40px 56px}
  .g-k{grid-template-columns:minmax(0,1fr) 96px 66px}
  .g-o{grid-template-columns:84px minmax(0,1fr) 58px}
}
@media (max-width:560px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .toolbar{gap:.5rem}
  .search{flex:1 1 100%}
  .toolbar .chips{width:100%}
  .app-main{padding:.75rem}
  .drawer-body{padding:.8rem}
  .drawer-actions .btn{flex:1 1 100%}
  .view-head{flex-wrap:wrap;gap:.3rem}
  .bars li{grid-template-columns:56px minmax(0,1fr) 30px}
  .g-q{grid-template-columns:86px minmax(0,1fr) 38px 52px}
  .dhead.g-k > :nth-child(2),.drow.g-k > :nth-child(2){display:none}
  .g-k{grid-template-columns:minmax(0,1fr) 74px}
  .app-top{gap:.5rem}
  .app-env{display:none}
  .dhead.g-p > :nth-child(5),.drow.g-p > :nth-child(5){display:none}
  .g-p{grid-template-columns:minmax(76px,1fr) 38px 38px 46px}
  .g-r{grid-template-columns:minmax(0,1fr) 40px 40px 56px}
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:none}
}