/* 出单看板（2026-09-20；2026-09-30 老板：字和图太大看不清 → 整体缩小、卡片改成一行一款、加「要关注」）：
   简道云合同表 → 当天/7/30/90 天出单、产品榜、合同、工厂榜，全部按上面选的时间窗算 */
[hidden] { display: none !important; }
body { background: var(--canvas); font-size: 13px; }
.sl-app { max-width: 1280px; margin: 0 auto; padding: 18px 16px 50px; }
.sl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.sl-head h1 { margin: 0 0 3px; font-size: 18px; }
.sl-head p { margin: 0; color: var(--muted); font-size: 12px; max-width: 720px; }
.sl-head nav { display: flex; gap: 8px; flex-shrink: 0; }
.sl-head nav a { color: var(--ink-2); font-size: 12px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; }
[data-embedded="1"] .sl-head nav a[href="/"] { display: none; }
.sl-muted { color: var(--muted); font-size: 12px; }
.sl-spacer { flex: 1; }
.sl-stale { opacity: .6; transition: opacity .15s; }

/* 筛选一行：时间窗在最前，管下面全部 */
.sl-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 10px; position: sticky; top: 0; z-index: 5; background: var(--canvas); padding: 6px 0; }
.sl-controls input[type="date"] { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: #fff; font-size: 12px; }
.sl-tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 2px; margin-right: 4px; }
.sl-tabs button { border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; font: inherit; }
.sl-tabs button.active { background: var(--green); color: var(--text-on-accent); }
.soft { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--ink); cursor: pointer; }

/* 五个数：小一号 */
.sl-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.sl-stats article { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; }
.sl-stats span { font-size: 11px; color: var(--ink-2); }
.sl-stats strong { display: block; font-size: 19px; color: var(--green); margin: 1px 0; line-height: 1.2; }
.sl-stats small { color: var(--muted); font-size: 11px; }
.up { color: var(--green); } .down { color: var(--danger-fg); }
@media (max-width: 860px) { .sl-stats { grid-template-columns: repeat(3, 1fr); } }

/* 要关注：几句话，每句可点、带小问号 */
.sl-highlights { background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); border-radius: 10px; padding: 8px 12px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; }
.sl-highlights > b { color: var(--accent-soft-fg); font-size: 12px; margin-right: 2px; }
.sl-highlights .hl { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.sl-highlights .hl-text { border: 0; background: transparent; padding: 2px 0; font: inherit; font-size: 12px; color: var(--ink); cursor: pointer; text-align: left; }
.sl-highlights .hl-text:hover { text-decoration: underline; }
.sl-highlights .hl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--chart-seq-3); margin-right: 5px; flex: none; }
.sl-highlights .hl-drop::before, .sl-highlights .hl-price::before, .sl-highlights .hl-spike::before { background: var(--warning-fg); }
.sl-highlights .hl-big::before, .sl-highlights .hl-new_supplier::before { background: var(--chart-2); }

.sl-section { margin-bottom: 18px; }
.sl-section h2 { font-size: 14px; margin: 0; }
.sl-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); font: inherit; }
.sl-chips button.active { background: var(--green); color: var(--text-on-accent); border-color: var(--green); }

/* 紧凑卡：一行一款，小图 56px 在左；一屏能看几十款 */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.sl-card { position: relative; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; cursor: pointer; font: inherit; color: inherit; display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.sl-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.sl-card.flash { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-border); }
.sl-card .img { width: 56px; height: 56px; flex: none; border-radius: 7px; background: var(--canvas); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sl-card .img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sl-card .img i { font-style: normal; font-size: 10px; color: var(--muted); }
.sl-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-card .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sl-card .l1 b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sl-card .rank { flex: none; background: var(--canvas); color: var(--ink-2); border-radius: 5px; font-size: 10px; font-weight: 600; padding: 0 5px; line-height: 16px; }
.sl-card .l2 { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-card .l3 { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-card .l3 strong { color: var(--green); font-size: 14px; }
.sl-card .l4 { font-size: 11px; color: var(--accent-soft-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc em { font-style: normal; font-weight: 600; color: var(--ink); }
.sl-dlg-head p { margin: 6px 0 0; font-size: 13px; }

.sl-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 7px; }
#sl-rank > .sl-group-head:first-child { margin-top: 4px; }
.sl-group-head h3 { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sl-group-head h3 i { font-style: normal; font-size: 11px; font-weight: 600; width: 17px; height: 17px; border-radius: 50%; background: var(--green); color: var(--text-on-accent); display: inline-flex; align-items: center; justify-content: center; }
.sl-group-head span { color: var(--muted); font-size: 11px; }
.sl-more { display: block; margin: 8px auto 0; }

.tag { display: inline-block; border-radius: 5px; padding: 0 6px; font-size: 10px; line-height: 16px; background: var(--canvas); color: var(--ink-2); white-space: nowrap; flex: none; }
.tag.ok { background: var(--accent-soft-bg); color: var(--green); }
.tag.warn { background: var(--warning-bg); color: var(--warning-fg); }
.tag.info { background: var(--info-bg); color: var(--info-fg); }

.sl-columns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .sl-columns { grid-template-columns: 1fr; } }
.sl-list { display: grid; gap: 6px; }
.sl-contract { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.sl-contract.flash { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-border); }
.sl-contract header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.sl-contract header b { color: var(--ink); font-size: 13px; }
.sl-contract header strong { margin-left: auto; font-size: 13px; color: var(--green); }
.sl-items { display: grid; gap: 4px; margin-top: 6px; }
.sl-item { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.sl-item img, .sl-item .noimg { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; background: var(--canvas); flex-shrink: 0; }
.sl-item div { flex: 1; min-width: 0; }
.sl-item div b { display: block; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-item div span { color: var(--muted); }
.sl-item > span { flex-shrink: 0; color: var(--ink-2); }

.sl-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.sl-sup { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.sl-sup:last-child { border-bottom: 0; }
.sl-sup i { font-style: normal; color: var(--muted); font-size: 11px; }
.sl-sup small { display: block; color: var(--muted); font-size: 11px; }
.sl-sup b { font-size: 12px; }
.sl-bar { height: 4px; background: var(--accent-soft-bg); border-radius: 2px; margin-top: 3px; }
.sl-bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.list-hint { text-align: center; color: var(--muted); padding: 16px 0; font-size: 12px; }

.sl-dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, 94vw); max-height: 86vh; box-shadow: var(--shadow-3); }
.sl-dialog::backdrop { background: var(--overlay); }
.sl-dialog > div { padding: 18px 20px; overflow: auto; max-height: 86vh; box-sizing: border-box; }
.sl-dlg-head { display: flex; gap: 14px; align-items: flex-start; }
.sl-dlg-head img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: var(--canvas); flex-shrink: 0; }
/* 弹窗顶部（产品名 + 关闭）往下滚也一直在（2026-09-26 老板看工厂待办时提的，全站同一条）：
   弹窗内容有 18px 上内边距，sticky 的 top 要抵掉它。 */
.sl-dlg-bar { position: sticky; top: -18px; z-index: 2; display: flex; gap: 12px; align-items: flex-start;
  margin: -18px -20px 12px; padding: 14px 20px 10px; background: var(--surface); border-bottom: 1px solid var(--border-subtle); }
.sl-dlg-bar h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; }
.sl-dlg-bar .close { flex: none; }
.sl-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; margin: 12px 0 4px; border-bottom: 1px solid var(--line); }
.sl-spark span { flex: 1; background: var(--green); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }
.sl-spark span.zero { background: var(--line); }
.sl-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.sl-table th, .sl-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sl-table th { color: var(--muted); font-weight: 500; }
.sl-table td.num { text-align: right; white-space: nowrap; }

/* 2026-10-04 老板：可视化——数字卡（SquViz.kpis）、小标题图标、状态牌；卡片很紧凑，状态牌跟着缩小一号 */
#sl-stats .sqv-kpis { margin: 0 0 10px; }
.sl-section h2.sqv-h { margin: 0; font-size: 14px; }
.sl-section h2.sqv-h .sqv-ico { width: 24px; height: 24px; border-radius: 7px; }
.sl-card .sqv-pill { height: 18px; padding: 0 7px; font-size: 11px; flex: none; }
.sl-contract header .sqv-pill { flex: none; }

/* 配件看板（10-04）：整机 / 配件切换、维修件按整机一组一块（条形 = 每样配件补了几次）、合同里配件收成一句 */
.sl-view button { font-weight: 600; }
.sl-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.sl-partsline { display: block; margin: 4px 0 0 2px; }
#sl-parts .sqv-kpis { margin-top: 0; }
.sl-pcols { align-items: start; }
.sl-pgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.sl-pgroup-h { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; }
.sl-pgroup-h img, .sl-pgroup-h .noimg { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--canvas); flex: none; }
.sl-pgroup-h b { font-size: 13px; display: block; }
.sl-pgroup-h small { font-size: 11px; color: var(--muted); }
.sl-pgroup-h strong { color: var(--warning-fg); }
.sl-pchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.sl-card-mini { border: 1px solid var(--line); background: var(--canvas); border-radius: 999px; padding: 1px 9px; font: inherit; font-size: 11px; color: var(--ink-2); cursor: pointer; }
.sl-card-mini:hover { border-color: var(--accent); color: var(--accent); }
.sl-grid.sl-grid-1 { grid-template-columns: minmax(0, 1fr); }