/* * Internal CRM — dark topbar, indigo accent, dense data tables. * Reference: ../ido-crm-mockups/scheduler-today.html * * Class names prefixed `internal-*` or section-specific (`sched-*`) so they * don't collide with partner styles. */ :root { --i-bg: #f5f6f8; --i-surface: #ffffff; --i-surface-alt: #fafafb; --i-surface-highlight: #eef2ff; --i-border: #e5e7eb; --i-border-soft: #f3f4f6; --i-text-primary: #111827; --i-text-body: #1f2937; --i-text-secondary: #374151; --i-text-muted: #6b7280; --i-text-faint: #9ca3af; --i-accent: #4f46e5; --i-accent-hover: #4338ca; --i-accent-soft: #eef2ff; --i-accent-border: #c7d2fe; --i-topbar-bg: #1f2937; --i-topbar-fg: #e5e7eb; --i-overdue-bg: #fef2f2; --i-overdue-fg: #991b1b; --i-overdue-dot: #dc2626; --i-today-bg: #fff7ed; --i-today-fg: #9a3412; --i-today-dot: #ea580c; --i-stuck-dot: #9333ea; --i-sched-dot: #0891b2; --i-warn-bg: #fef3c7; --i-warn-fg: #92400e; --i-success: #059669; --i-info-bg: #dbeafe; --i-info-fg: #1e40af; --i-comment-partner-bg: #ede9fe; --i-comment-partner-fg: #5b21b6; --i-comment-self-bg: #dbeafe; --i-comment-self-fg: #1e40af; --i-comment-sales-bg: #d1fae5; --i-comment-sales-fg: #065f46; --i-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .internal-body { font-family: var(--i-font); background: var(--i-bg); color: var(--i-text-body); font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased; } .internal-body a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--i-accent); outline-offset: 2px; border-radius: 4px; } /* ── Top bar ──────────────────────────────────────────────── */ .internal-topbar { background: var(--i-topbar-bg); color: var(--i-topbar-fg); padding: 10px 20px; display: flex; align-items: center; gap: 24px; font-size: 13px; } .internal-logo { font-weight: 600; color: #fff; letter-spacing: 0.3px; } .internal-nav { display: flex; gap: 18px; } .internal-nav a, .internal-nav .internal-nav-placeholder { color: inherit; opacity: 0.75; padding-bottom: 6px; border-bottom: 2px solid transparent; } .internal-nav a.active { opacity: 1; color: #fff; border-bottom-color: var(--i-accent); } .internal-nav .internal-nav-placeholder { cursor: not-allowed; } .internal-spacer { flex: 1; } .internal-user { opacity: 0.85; font-size: 12px; } .internal-signout-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: 12px; padding: 0; opacity: 0.85; text-decoration: underline; text-underline-offset: 2px; } .internal-signout-btn:hover { opacity: 1; } .internal-flash { max-width: 1180px; margin: 14px auto 0; padding: 10px 16px; font-size: 12px; border-radius: 6px; } .internal-flash-notice { background: var(--i-accent-soft); color: var(--i-accent-hover); } .internal-flash-alert { background: var(--i-overdue-bg); color: var(--i-overdue-fg); border: 1px solid #fecaca; } /* ════════════════════════════════════════════════════════════ Minimal Mono variant — applies when carries the `.internal-minimal` class (via `content_for(:body_class, …)`). Used by Page 2 (scheduler/today). Other internal pages keep their legacy dark-topbar aesthetic until migrated. ════════════════════════════════════════════════════════════ */ .internal-minimal { --im-bg: #f4f2ee; --im-card: #ffffff; --im-ink: #111111; --im-muted: #6b6b6b; --im-dim: #9a9a9a; --im-line: #dcd8d0; --im-line-soft: #e8e4dc; --im-focus: #0a0a0a; --im-red: #b43427; --im-red-soft: #f4e1de; --im-red-deep: #7d2219; --im-orange: #a65a13; --im-orange-soft: #f4ead5; --im-orange-row: #f6ecd9; --im-cyan: #2b7d8a; --im-cyan-soft: #dbeaee; --im-teal: #2f7a5f; --im-teal-soft: #dceadf; --im-slate: #4a4a4a; --im-slate-soft: #e4e1d9; --im-warn-fg: #8a5a00; --im-warn-bg: #f3ead5; --im-overdue-row: #f7e4df; --im-sans: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", "Hiragino Sans GB", system-ui, sans-serif; --im-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; background: var(--im-bg); color: var(--im-ink); font-family: var(--im-sans); font-size: 14px; line-height: 1.55; font-feature-settings: "cv11", "ss01"; } /* Light topbar override (scoped to minimal body) */ .internal-minimal .internal-topbar { background: var(--im-bg); color: var(--im-ink); border-bottom: 1px solid var(--im-line); padding: 18px 28px; font-family: var(--im-sans); } .internal-minimal .internal-logo { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: inherit; padding: 0; font-weight: 500; } .internal-minimal .internal-logo-mark { font-family: var(--im-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; background: var(--im-ink); color: var(--im-bg); padding: 4px 8px; border-radius: 1px; } .internal-minimal .internal-logo-sub { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--im-muted); } .internal-minimal .internal-logo-sub::before { content: "/ "; color: var(--im-dim); margin-right: 2px; } .internal-minimal .internal-nav a, .internal-minimal .internal-nav .internal-nav-placeholder { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-muted); opacity: 1; padding-bottom: 6px; border-bottom: 2px solid transparent; } .internal-minimal .internal-nav a.active { color: var(--im-ink); border-bottom-color: var(--im-ink); } .internal-minimal .internal-nav .internal-nav-placeholder { color: var(--im-dim); opacity: 0.7; } .internal-minimal .internal-user { font-family: var(--im-mono); font-size: 11px; color: var(--im-muted); letter-spacing: 0.4px; opacity: 1; } .internal-minimal .internal-signout-btn { color: var(--im-muted); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; text-decoration: underline; } .internal-minimal .internal-signout-btn:hover { color: var(--im-ink); } .internal-minimal .internal-flash-notice { background: var(--im-card); color: var(--im-ink); border: 1px solid var(--im-line); border-radius: 2px; } /* ── Page 2: scheduler/today ────────────────────────────────── All rules scoped under `.internal-minimal` so they don't bleed into kanban / sales / reports pages that still use the legacy internal aesthetic. Kanban in particular also uses `.sched-btn` — a plain fallback block further down keeps that working. */ .internal-minimal .sched-page { max-width: 1200px; margin: 0 auto; padding: 40px 32px 96px; } .internal-minimal .sched-head { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 40px; } .internal-minimal .sched-head-text { min-width: 0; } .internal-minimal .sched-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .sched-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .sched-meta-sep { margin: 0 8px; color: var(--im-dim); } .internal-minimal .sched-btn { height: 40px; padding: 0 18px; border-radius: 2px; border: 1px solid var(--im-ink); background: transparent; color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .internal-minimal .sched-btn:hover { background: var(--im-line-soft); } .internal-minimal .sched-btn-primary { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .sched-btn-primary:hover { background: #000; color: var(--im-bg); } .internal-minimal .sched-btn-icon { font-family: var(--im-sans); font-size: 14px; font-weight: 500; line-height: 1; } /* Stats strip */ .internal-minimal .sched-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--im-line); border-bottom: 1px solid var(--im-line); margin-bottom: 40px; } .internal-minimal .sched-stat-empty { color: var(--im-dim); font-weight: 400; } .internal-minimal .sched-stat { display: flex; flex-direction: column; gap: 10px; } .internal-minimal .sched-stat-label { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .sched-stat-value { font-size: 34px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; } .internal-minimal .sched-stat-suffix { font-size: 16px; font-weight: 500; color: var(--im-dim); letter-spacing: 0; } .internal-minimal .sched-stat-hint { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-dim); min-height: 1em; } .internal-minimal .sched-stat-overdue .sched-stat-value { color: var(--im-red); } .internal-minimal .sched-stat-today .sched-stat-value { color: var(--im-orange); } /* Section */ .internal-minimal .sched-section { margin-bottom: 36px; } .internal-minimal .sched-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--im-line); margin-bottom: 0; } .internal-minimal .sched-section-title { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 600; color: var(--im-ink); letter-spacing: -0.2px; } .internal-minimal .sched-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; transform: translateY(-1px); } .internal-minimal .sched-dot.red { background: var(--im-red); } .internal-minimal .sched-dot.orange { background: var(--im-orange); } .internal-minimal .sched-dot.cyan { background: var(--im-cyan); } .internal-minimal .sched-dot.teal { background: var(--im-teal); } .internal-minimal .sched-dot.slate { background: var(--im-slate); } .internal-minimal .sched-section-count { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--im-muted); } .internal-minimal .sched-section-empty { padding: 36px 0; text-align: center; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-dim); } .internal-minimal .sched-section-footer { padding: 14px 0; text-align: center; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--im-dim); text-transform: uppercase; } /* Row grid: identity | comments | time | actions */ .internal-minimal .sched-row { display: grid; grid-template-columns: 280px 1fr 200px 220px; gap: 24px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--im-line-soft); } .internal-minimal .sched-row:last-child { border-bottom: none; } .internal-minimal .sched-row-overdue { background: var(--im-overdue-row); padding: 20px 16px; margin: 0 -16px; } /* Identity */ .internal-minimal .sched-identity .sched-name { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--im-ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .internal-minimal .sched-days-badge { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.4px; color: var(--im-muted); background: var(--im-line-soft); border-radius: 1px; padding: 3px 7px; white-space: nowrap; } .internal-minimal .sched-days-badge.warn { color: var(--im-warn-fg); background: var(--im-warn-bg); } .internal-minimal .sched-days-badge.red { color: var(--im-red-deep); background: var(--im-red-soft); } .internal-minimal .sched-profile-facts { margin-top: 8px; font-size: 12px; color: var(--im-muted); line-height: 1.55; } .internal-minimal .sched-profile-facts .sep { color: var(--im-dim); margin: 0 6px; } .internal-minimal .sched-contact-info { margin-top: 6px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.2px; color: var(--im-muted); line-height: 1.55; } .internal-minimal .sched-contact-info .sep { color: var(--im-dim); margin: 0 6px; } /* Comments */ .internal-minimal .sched-comments { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--im-muted); line-height: 1.5; } .internal-minimal .sched-comment { display: block; } .internal-minimal .sched-comment-src { display: inline-block; font-family: var(--im-mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; margin-right: 8px; border-radius: 1px; vertical-align: 1px; } .internal-minimal .sched-comment-src.partner { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .sched-comment-src.self { background: var(--im-line); color: var(--im-ink); } .internal-minimal .sched-comment-src.sales { background: var(--im-teal-soft); color: var(--im-teal); } .internal-minimal .sched-comment-danger { color: var(--im-red); } .internal-minimal .sched-comment-meta { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-dim); } /* Next contact */ .internal-minimal .sched-next { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .internal-minimal .sched-time { font-family: var(--im-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--im-ink); } .internal-minimal .sched-time-overdue { color: var(--im-red); } .internal-minimal .sched-time-empty { color: var(--im-dim); font-weight: 500; } .internal-minimal .sched-tz { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-muted); } .internal-minimal .sched-tz-sep { margin: 0 5px; color: var(--im-dim); } /* Row actions — 6-button set (2 rows × 3) per 2026-04-24 rework */ .internal-minimal .sched-row-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .internal-minimal .sched-row-actions-line { display: flex; gap: 6px; justify-content: flex-end; } .internal-minimal .sched-action-muted { color: var(--im-muted); background: transparent; } .internal-minimal .sched-action-muted:not(:disabled):hover { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .sched-action { height: 30px; min-width: 48px; padding: 0 10px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; cursor: pointer; border-radius: 2px; } .internal-minimal .sched-action:not(:disabled):hover { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .sched-action-danger:not(:disabled):hover { background: var(--im-red); color: var(--im-bg); border-color: var(--im-red); } .internal-minimal .sched-action:disabled { opacity: 0.4; cursor: not-allowed; } .internal-minimal .sched-action:focus-visible { outline: 2px solid var(--im-focus); outline-offset: 2px; } /* ── Row action modal (Page 2) ── Scoped under .internal-minimal so the Minimal Mono aesthetic (JetBrains Mono labels, Inter body, off-white card, flat borders) is inherited without collisions with kanban/reports pages. */ .internal-minimal .ram-backdrop[hidden] { display: none; } .internal-minimal .ram-backdrop { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .internal-minimal .ram-card { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; width: 100%; max-width: 480px; padding: 28px 32px 24px; font-family: var(--im-sans); color: var(--im-ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); } .internal-minimal .ram-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .internal-minimal .ram-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; } .internal-minimal .ram-close { background: none; border: none; color: var(--im-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .internal-minimal .ram-close:hover { color: var(--im-ink); } .internal-minimal .ram-form { display: flex; flex-direction: column; gap: 16px; } .internal-minimal .ram-field { display: flex; flex-direction: column; gap: 6px; } .internal-minimal .ram-field[hidden] { display: none; } .internal-minimal .ram-label { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .ram-req { color: var(--im-red); margin-left: 2px; } .internal-minimal .ram-textarea, .internal-minimal .ram-input, .internal-minimal .ram-select { width: 100%; padding: 10px 12px; border: 1px solid var(--im-line); background: var(--im-bg); color: var(--im-ink); font-family: var(--im-sans); font-size: 14px; line-height: 1.5; border-radius: 2px; } .internal-minimal .ram-textarea { resize: vertical; min-height: 96px; } .internal-minimal .ram-input { height: 38px; } .internal-minimal .ram-select { height: 38px; } .internal-minimal .ram-textarea:focus, .internal-minimal .ram-input:focus, .internal-minimal .ram-select:focus { outline: 2px solid var(--im-focus); outline-offset: 1px; border-color: var(--im-ink); } .internal-minimal .ram-error { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.3px; color: var(--im-red); min-height: 14px; } .internal-minimal .ram-error:empty { display: none; } /* 跟进 delay chips + 备注 quick-insert chips live inside the shared modal. */ .internal-minimal .ram-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .internal-minimal .ram-action-group { display: flex; flex-direction: column; gap: 8px; } .internal-minimal .ram-action-group-label { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-muted); margin-top: 6px; } .internal-minimal .ram-action-group-label:first-child { margin-top: 0; } .internal-minimal .ram-action-chip { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; font-size: 12px; color: var(--im-ink); cursor: pointer; user-select: none; } .internal-minimal .ram-action-chip input { display: none; } .internal-minimal .ram-action-chip:has(input:checked) { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .ram-action-chip-ok:has(input:checked) { background: var(--im-teal); border-color: var(--im-teal); } .internal-minimal .ram-chip { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.3px; color: var(--im-ink); cursor: pointer; user-select: none; } .internal-minimal .ram-chip input { display: none; } .internal-minimal .ram-chip.active { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .ram-quick { padding: 5px 10px; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; font-family: inherit; font-size: 11px; color: var(--im-muted); cursor: pointer; } .internal-minimal .ram-quick:hover { color: var(--im-ink); border-color: var(--im-ink); } .internal-minimal .ram-followup-custom { margin-top: 8px; } .internal-minimal .ram-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding: 0; border: none; } .internal-minimal .ram-btn { height: 36px; padding: 0 18px; border-radius: 2px; border: 1px solid var(--im-ink); background: transparent; color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .internal-minimal .ram-btn-ghost { border-color: var(--im-line); color: var(--im-muted); } .internal-minimal .ram-btn-ghost:hover { background: var(--im-line-soft); color: var(--im-ink); } .internal-minimal .ram-btn-primary { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .ram-btn-primary:hover { background: #000; } /* Plain `.sched-btn` fallback for kanban (until that page migrates). */ .sched-btn { font-size: 13px; padding: 7px 14px; border-radius: 6px; border: 1px solid #d1d5db; background: var(--i-surface); color: var(--i-text-secondary); cursor: pointer; font-weight: 500; font-family: inherit; } .sched-btn:hover { background: var(--i-surface-alt); } .sched-btn-primary { background: var(--i-accent); color: #fff; border-color: var(--i-accent); } .sched-btn-primary:hover { background: var(--i-accent-hover); color: #fff; } /* ── Kanban page ──────────────────────────────────────────── */ .kan-page-head { padding: 18px 24px 12px; display: flex; justify-content: space-between; align-items: flex-end; background: var(--i-surface); border-bottom: 1px solid var(--i-border); position: sticky; top: 43px; z-index: 50; } .kan-page-head h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--i-text-primary); } .kan-page-head .sub { color: var(--i-text-muted); font-size: 12px; margin-top: 2px; } .kan-head-controls { display: flex; gap: 8px; align-items: center; } .kan-board-wrap { padding: 16px; min-width: fit-content; overflow-x: auto; } .kan-board { display: flex; gap: 12px; min-width: fit-content; } .kan-col { background: #eef0f3; border-radius: 8px; width: 260px; flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100vh - 160px); } /* Secondary columns (跟进/定金/成交·失单/鱼塘 on the scheduler kanban). Still fully draggable — visual only. Narrower + dimmer so the first three primary columns dominate the scan. */ .kan-col-secondary { width: 210px; background: #f2f3f5; opacity: 0.88; } .kan-col-secondary .kan-col-title { color: var(--i-text-muted); font-size: 11px; } .kan-col-secondary .kan-card { background: #fafbfc; } .kan-col-divider { flex-shrink: 0; width: 1px; margin: 8px 2px; background: #d4d7dc; } .kan-col-head { padding: 10px 12px; border-bottom: 1px solid #e0e3e8; display: flex; align-items: center; justify-content: space-between; } .kan-col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: var(--i-text-secondary); text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .kan-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .kan-dot.new { background: #6b7280; } .kan-dot.contacting { background: #2563eb; } .kan-dot.qualified { background: #7c3aed; } .kan-dot.appointment { background: #0891b2; } .kan-dot.followup { background: #a855f7; } .kan-dot.deposit { background: #f59e0b; } .kan-dot.won { background: #059669; } .kan-dot.lost { background: #b91c1c; } .kan-col-count { font-size: 11px; color: var(--i-text-muted); font-weight: 500; background: var(--i-surface); padding: 1px 7px; border-radius: 10px; border: 1px solid var(--i-border); font-variant-numeric: tabular-nums; } .kan-sla-warn { background: var(--i-overdue-bg); color: var(--i-overdue-fg); font-size: 11px; padding: 4px 12px; border-bottom: 1px solid #fecaca; font-weight: 500; } .kan-col-body { padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 80px; background-color: #eef0f3; background-image: linear-gradient(to bottom, #eef0f3 30%, rgba(238,240,243,0)), linear-gradient(to top, #eef0f3 30%, rgba(238,240,243,0)), radial-gradient(farthest-side at 50% 0, rgba(15,23,42,0.30), rgba(15,23,42,0)), radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,0.30), rgba(15,23,42,0)); background-repeat: no-repeat; background-position: 0 0, 0 100%, 0 0, 0 100%; background-size: 100% 20px, 100% 20px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } .kan-col-body.drag-over { background: #e0e7ff; border-radius: 0 0 8px 8px; } .kan-col-empty { padding: 20px 12px; text-align: center; color: var(--i-text-faint); font-size: 11px; font-style: italic; } .kan-col-footer { padding: 8px 12px; font-size: 11px; color: var(--i-text-faint); text-align: center; font-style: italic; border-top: 1px solid #e0e3e8; } /* ── Cards ────────────────────────────────────────────────── */ .kan-card { background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 6px; padding: 8px 10px; cursor: grab; transition: box-shadow 0.1s, transform 0.05s; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02); font-size: 12px; } .kan-card:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); border-color: var(--i-accent-border); } .kan-card:active { cursor: grabbing; } .kan-card.sortable-ghost { opacity: 0.3; } .kan-card.sortable-chosen { cursor: grabbing; } .kan-card.overdue { border-left: 3px solid var(--i-overdue-dot); padding-left: 7px; } .kan-card-line-1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .kan-name { font-weight: 600; font-size: 13px; color: var(--i-text-primary); } .kan-gender-age { color: var(--i-text-muted); font-size: 11px; } .kan-card-line-2 { display: flex; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; } .kan-chip { display: inline-flex; align-items: center; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 500; background: var(--i-surface-alt); color: #4b5563; white-space: nowrap; } .kan-chip.partner { background: #f5f3ff; color: #6d28d9; } .kan-chip.lang { background: #fef9c3; color: #713f12; } .kan-chip.source-self { background: #e0f2fe; color: #075985; } .kan-card-line-3 { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--i-text-muted); } .kan-age-in-stage { font-weight: 500; } .kan-age-in-stage.warn { color: #d97706; } .kan-age-in-stage.bad { color: var(--i-overdue-dot); } .kan-next-action { font-weight: 600; color: var(--i-text-primary); } .kan-next-action.overdue { color: var(--i-overdue-dot); } .kan-card-line-4 { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--i-border-soft); color: var(--i-text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Error flash shown when a drop is rejected */ .kan-flash { position: fixed; top: 80px; right: 20px; background: var(--i-overdue-bg); color: var(--i-overdue-fg); border: 1px solid #fecaca; padding: 10px 16px; border-radius: 6px; font-size: 13px; z-index: 200; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); animation: kan-flash-in 0.2s ease-out; } @keyframes kan-flash-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ── Sales Today page ─────────────────────────────────────── */ .sales-page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; } .sales-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; } .sales-head h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--i-text-primary); } .sales-head .sub { color: var(--i-text-muted); font-size: 13px; margin-top: 3px; } .sales-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; } .sales-stat { background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 8px; padding: 12px 14px; } .sales-stat-label { font-size: 11px; color: var(--i-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .sales-stat-value { font-size: 22px; font-weight: 600; color: var(--i-text-primary); margin-top: 2px; font-variant-numeric: tabular-nums; } .sales-stat-hint { font-size: 11px; color: var(--i-text-muted); margin-top: 2px; } .sales-stat.call .sales-stat-value { color: var(--i-sched-dot); } .sales-stat.revenue .sales-stat-value { color: var(--i-success); } /* Sections */ .sales-section { background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 8px; margin-bottom: 14px; overflow: hidden; } .sales-section-head { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--i-border-soft); background: var(--i-surface-alt); } .sales-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--i-text-primary); letter-spacing: 0.3px; } .sales-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .sales-dot.call { background: var(--i-sched-dot); } .sales-dot.deposit { background: #f59e0b; } .sales-dot.followup { background: #7c3aed; } .sales-section-count { color: var(--i-text-muted); font-weight: 500; font-size: 12px; } .sales-section-empty { padding: 18px 16px; color: var(--i-text-faint); font-size: 12px; text-align: center; font-style: italic; } /* Row — 5-column grid: avatar | identity | brief | time | outcome */ .sales-row { display: grid; grid-template-columns: 28px 220px 1fr 170px 220px; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--i-border-soft); align-items: flex-start; } .sales-row:first-child { border-top: none; } .sales-row:hover { background: var(--i-surface-alt); } .sales-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--i-border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--i-text-muted); flex-shrink: 0; } .sales-avatar.f { background: #fce7f3; color: #9d174d; } .sales-avatar.m { background: #dbeafe; color: #1e40af; } .sales-identity .sales-name { font-weight: 600; color: var(--i-text-primary); font-size: 13px; } .sales-identity .sales-meta { color: var(--i-text-muted); font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sales-identity .sales-facts { color: var(--i-text-secondary); font-size: 12px; margin-top: 4px; } .sales-identity .sales-facts .sep { color: var(--i-text-faint); margin: 0 4px; } .sales-chip { display: inline-flex; font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 500; background: var(--i-surface-alt); color: #4b5563; } .sales-chip.partner { background: #f5f3ff; color: #6d28d9; } .sales-chip.lang { background: #fef9c3; color: #713f12; } .sales-chip.budget { background: #ecfdf5; color: #065f46; } /* Scheduler's hand-off briefing */ .sales-brief { background: #f9fafb; border: 1px solid var(--i-border-soft); border-radius: 6px; padding: 8px 10px; font-size: 12px; } .sales-brief-title { font-size: 10px; font-weight: 600; color: var(--i-text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; } .sales-brief-body { color: var(--i-text-secondary); line-height: 1.5; } .sales-brief-body.sales-muted { color: var(--i-text-faint); font-style: italic; } .sales-brief-meta { color: var(--i-text-muted); font-size: 11px; margin-top: 4px; } .sales-brief-meta.sales-danger { color: var(--i-overdue-dot); } /* Time column */ .sales-time { font-size: 12px; } .sales-when { font-weight: 600; color: var(--i-text-primary); font-size: 13px; } .sales-when.soon { color: var(--i-overdue-dot); } .sales-zone { color: var(--i-text-muted); margin-top: 2px; } .sales-duration { color: var(--i-text-muted); font-size: 11px; margin-top: 2px; } /* Outcome buttons */ .sales-outcome { display: flex; flex-direction: column; gap: 4px; } .sales-outcome form { margin: 0; padding: 0; } .sales-outcome-btn { width: 100%; font-size: 12px; padding: 5px 10px; border-radius: 5px; border: 1px solid #d1d5db; background: var(--i-surface); color: var(--i-text-secondary); cursor: pointer; font-weight: 500; text-align: left; font-family: inherit; transition: background 0.1s; } .sales-outcome-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sales-outcome-btn.won { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; } .sales-outcome-btn.won:hover:not(:disabled) { background: #d1fae5; } .sales-outcome-btn.lost { border-color: #fecaca; background: #fef2f2; color: #991b1b; } .sales-outcome-btn.lost:hover:not(:disabled) { background: #fee2e2; } .sales-outcome-btn.followup { border-color: #ddd6fe; background: #f5f3ff; color: #5b21b6; } .sales-outcome-btn.followup:hover:not(:disabled) { background: #ede9fe; } .sales-outcome-btn.reschedule { border-color: #fde68a; background: #fffbeb; color: #92400e; } .sales-outcome-btn.reschedule:hover:not(:disabled) { background: #fef3c7; } /* ── Reports / CEO Dashboard ──────────────────────────────── */ .rpt-page { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; } .rpt-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .rpt-head h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--i-text-primary); } .rpt-head .sub { color: var(--i-text-muted); font-size: 13px; margin-top: 3px; } .rpt-range { display: inline-flex; background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 6px; padding: 2px; } .rpt-range a { padding: 6px 14px; font-size: 12px; color: var(--i-text-muted); border-radius: 4px; font-weight: 500; } .rpt-range a.active { background: var(--i-accent-soft); color: var(--i-accent-hover); } .rpt-range a:hover:not(.active) { background: var(--i-surface-alt); } /* KPI strip */ .rpt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; } .rpt-kpi { background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 8px; padding: 14px 16px; } .rpt-kpi.alert .rpt-kpi-value { color: var(--i-overdue-dot); } .rpt-kpi-label { font-size: 11px; color: var(--i-text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .rpt-kpi-value { font-size: 24px; font-weight: 600; color: var(--i-text-primary); margin-top: 2px; font-variant-numeric: tabular-nums; } .rpt-kpi .kpi-delta { font-size: 11px; margin-top: 3px; font-weight: 500; } .rpt-kpi .kpi-delta.up { color: var(--i-success); } .rpt-kpi .kpi-delta.down { color: var(--i-overdue-dot); } .rpt-kpi-suffix { font-size: 11px; color: var(--i-text-muted); margin-top: 2px; } /* Section */ .rpt-section { background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; } .rpt-section-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--i-border-soft); } .rpt-section-title { font-size: 14px; font-weight: 600; color: var(--i-text-primary); } .rpt-section-sub { font-size: 12px; color: var(--i-text-muted); margin-top: 2px; } /* Funnel */ .rpt-funnel { display: flex; padding: 28px 16px 20px; gap: 8px; align-items: flex-end; min-height: 200px; } .rpt-funnel-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; } .rpt-funnel-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 20px; color: #fff; font-weight: 600; text-align: center; padding: 8px 4px; font-size: 13px; font-variant-numeric: tabular-nums; } .rpt-funnel-step:nth-child(1) .rpt-funnel-bar { background: linear-gradient(180deg, #818cf8, #6366f1); } .rpt-funnel-step:nth-child(2) .rpt-funnel-bar { background: linear-gradient(180deg, #60a5fa, #2563eb); } .rpt-funnel-step:nth-child(3) .rpt-funnel-bar { background: linear-gradient(180deg, #a78bfa, #7c3aed); } .rpt-funnel-step:nth-child(4) .rpt-funnel-bar { background: linear-gradient(180deg, #22d3ee, #0891b2); } .rpt-funnel-step:nth-child(5) .rpt-funnel-bar { background: linear-gradient(180deg, #34d399, #059669); } .rpt-funnel-label { font-size: 11px; color: var(--i-text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 8px; font-weight: 600; } .rpt-funnel-conv { position: absolute; top: -22px; right: calc(-50% + 20px); background: var(--i-surface-alt); color: var(--i-text-muted); font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; z-index: 1; } .rpt-funnel-conv.low { color: var(--i-overdue-fg); background: var(--i-overdue-bg); } .rpt-funnel-insight { padding: 0 16px 14px; font-size: 12px; color: var(--i-text-muted); } .rpt-funnel-insight strong { color: var(--i-overdue-dot); } /* Tables */ .rpt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .rpt-tbl th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--i-text-muted); font-weight: 600; background: var(--i-surface-alt); border-bottom: 1px solid var(--i-border); } .rpt-tbl th.num { text-align: right; } .rpt-tbl td { padding: 10px 14px; border-top: 1px solid var(--i-border-soft); vertical-align: middle; } .rpt-tbl td.num { font-variant-numeric: tabular-nums; text-align: right; } .rpt-tbl-center th, .rpt-tbl-center td { text-align: center; } .rpt-tbl-center td.num, .rpt-tbl-center th.num { text-align: center; } .rpt-tbl-center .rpt-name { text-align: left; } .rpt-tbl tr:hover td { background: var(--i-surface-alt); } .rpt-tbl .rpt-name { font-weight: 600; color: var(--i-text-primary); } .rpt-tbl .red { color: var(--i-overdue-dot); } .rpt-tbl .orange { color: #ea580c; } .rpt-tbl .green { color: var(--i-success); } .rpt-tbl .muted { color: var(--i-text-muted); } .rpt-tbl .rpt-total-row { font-weight: 600; background: #f0fdf4; } .rpt-tbl .rpt-total-row:hover td { background: #dcfce7; } .rpt-chip { display: inline-flex; align-items: center; font-size: 10px; padding: 1px 7px; border-radius: 8px; font-weight: 500; background: var(--i-surface-alt); color: #4b5563; } .rpt-chip.new { background: var(--i-surface-alt); color: var(--i-text-secondary); } .rpt-chip.contacting { background: var(--i-info-bg); color: var(--i-info-fg); } .rpt-chip.qualified { background: #e0e7ff; color: #3730a3; } .rpt-chip.appointment { background: #cffafe; color: #155e75; } .rpt-chip.followup { background: #f5f3ff; color: var(--i-stuck-dot); } .rpt-chip.deposit { background: #fef3c7; color: #92400e; } .rpt-chip.won { background: #d1fae5; color: #065f46; } .rpt-chip.lost { background: var(--i-overdue-bg); color: var(--i-overdue-fg); } .rpt-empty { text-align: center; color: var(--i-text-faint); font-size: 12px; padding: 28px 16px; font-style: italic; } /* Lost-reason bar chart */ .rpt-bars { padding: 16px; } .rpt-bar-row { display: grid; grid-template-columns: 140px 1fr 70px; gap: 12px; align-items: center; padding: 6px 0; font-size: 12px; } .rpt-bar-label { color: var(--i-text-secondary); font-weight: 500; } .rpt-bar-track { height: 10px; background: var(--i-border-soft); border-radius: 5px; overflow: hidden; } .rpt-bar-fill { height: 100%; background: var(--i-accent); border-radius: 5px; } .rpt-bar-val { color: var(--i-text-muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } /* ── Sign-in page ─────────────────────────────────────────── */ .signin-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--i-bg); padding: 20px; } .signin-card { width: 380px; background: var(--i-surface); border: 1px solid var(--i-border); border-radius: 10px; padding: 40px 36px; } .signin-logo { font-size: 20px; font-weight: 600; margin: 0 0 28px; color: var(--i-text-primary); letter-spacing: 0.3px; text-align: center; } .signin-flash { background: var(--i-overdue-bg); color: var(--i-overdue-fg); padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; } .signin-form .signin-field { margin-bottom: 14px; } .signin-label { display: block; font-size: 12px; color: var(--i-text-muted); margin-bottom: 6px; font-weight: 500; } .signin-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--i-border); border-radius: 6px; font-size: 14px; color: var(--i-text-primary); background: var(--i-surface); font-family: inherit; } .signin-input:focus { outline: none; border-color: var(--i-accent); box-shadow: 0 0 0 2px var(--i-accent-soft); } .signin-btn { width: 100%; height: 40px; background: var(--i-accent); color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 6px; font-family: inherit; } .signin-btn:hover { background: var(--i-accent-hover); } .signin-forgot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--i-text-muted); } .signin-forgot a { color: var(--i-accent); } /* ════════════════════════════════════════════════════════════ Page 3 — Scheduler Kanban (Minimal Mono) All rules scoped under `.internal-minimal .kan-*` so the legacy `.kan-*` rules above still drive any un-migrated kanban surfaces (sales board will keep using them until Task 6 ports it). ════════════════════════════════════════════════════════════ */ .internal-minimal .kan-page { max-width: 1600px; margin: 0 auto; padding: 32px 28px 56px; } .internal-minimal .kan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 28px; } .internal-minimal .kan-head-text { min-width: 0; } .internal-minimal .kan-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .kan-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } /* ════════════════════════════════════════════════════════════ Page 4: Sales Kanban — Minimal Mono skin Scoped under .internal-minimal so it doesn't bleed into the legacy scheduler kanban (which still uses the indigo-accent chrome on a gray background). See DESIGN_DECISIONS.md §Page 4. ════════════════════════════════════════════════════════════ */ .internal-minimal .skb-page { padding: 32px 28px 80px; max-width: 100%; } .internal-minimal .skb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; } .internal-minimal .skb-head-text { min-width: 0; } .internal-minimal .skb-title { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.4px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .skb-meta { margin-top: 8px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .kan-meta-num { color: var(--im-ink); font-weight: 600; margin-right: 2px; } .internal-minimal .kan-meta-warn { color: var(--im-red); } .internal-minimal .kan-meta-sep { margin: 0 8px; color: var(--im-dim); } .internal-minimal .kan-head-controls { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } /* 我的/团队 toggle (future; disabled today) */ .internal-minimal .kan-scope { display: inline-flex; border: 1px solid var(--im-line); border-radius: 2px; background: var(--im-card); padding: 2px; } .internal-minimal .kan-scope-btn { background: transparent; border: none; height: 30px; padding: 0 12px; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-muted); cursor: pointer; border-radius: 1px; } .internal-minimal .kan-scope-btn.active { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .kan-scope-btn:disabled { opacity: 0.4; cursor: not-allowed; } .internal-minimal .kan-filter-btn { height: 34px; padding: 0 14px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-muted); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; cursor: not-allowed; border-radius: 2px; opacity: 0.6; } .internal-minimal .kan-btn { height: 40px; padding: 0 18px; border-radius: 2px; border: 1px solid var(--im-ink); background: transparent; color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .internal-minimal .kan-btn:hover { background: var(--im-line-soft); } .internal-minimal .kan-btn-primary { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .kan-btn-primary:hover { background: #000; color: var(--im-bg); } .internal-minimal .kan-btn-icon { font-family: var(--im-sans); font-size: 14px; font-weight: 500; line-height: 1; } /* Board */ .internal-minimal .kan-board-wrap { overflow-x: auto; padding: 0; background: transparent; } .internal-minimal .kan-board { display: flex; gap: 18px; min-width: fit-content; align-items: flex-start; } .internal-minimal .kan-col { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; width: 300px; flex-shrink: 0; display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .internal-minimal .kan-col-fish_pond { background: #fbf8f2; border-color: var(--im-line); } .internal-minimal .kan-col-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--im-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .internal-minimal .skb-meta-sep { margin: 0 8px; color: var(--im-dim); } .internal-minimal .skb-head-controls { display: flex; gap: 10px; align-items: center; } /* Stats strip — 6 tiles per §Page 4 */ .internal-minimal .skb-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--im-line); border-bottom: 1px solid var(--im-line); margin-bottom: 36px; } .internal-minimal .skb-stat { display: flex; flex-direction: column; gap: 8px; } .internal-minimal .skb-stat-label { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .skb-stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.4px; color: var(--im-ink); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; } .internal-minimal .skb-stat-suffix { font-size: 13px; font-weight: 500; color: var(--im-dim); letter-spacing: 0; } .internal-minimal .skb-stat-hint { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-dim); min-height: 1em; } .internal-minimal .skb-stat-alert .skb-stat-value { color: var(--im-orange); } .internal-minimal .skb-stat-success .skb-stat-value { color: var(--im-teal); } /* Board */ .internal-minimal .skb-board-wrap { overflow-x: auto; } .internal-minimal .skb-board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 16px; min-width: 1100px; } .internal-minimal .skb-col { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; display: flex; flex-direction: column; max-height: calc(100vh - 360px); min-height: 320px; } .internal-minimal .skb-col-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--im-line); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .internal-minimal .skb-col-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--im-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--im-ink); } .internal-minimal .kan-col-title-zh { color: var(--im-muted); font-family: var(--im-sans); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; } .internal-minimal .kan-col .kan-dot, .internal-minimal .skb-col-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .internal-minimal .kan-col .kan-dot.new { background: var(--im-slate); } .internal-minimal .kan-col .kan-dot.contacting { background: var(--im-cyan); } .internal-minimal .kan-col .kan-dot.appointment { background: var(--im-teal); } .internal-minimal .kan-col .kan-dot.fish_pond { background: var(--im-orange); } .internal-minimal .kan-col-count { font-family: var(--im-mono); font-size: 11px; font-weight: 500; color: var(--im-muted); font-variant-numeric: tabular-nums; } /* Pure-CSS scroll affordance (Lea Verou's "scroll-shadow" technique). Two stacked layers per edge: - "cover" gradient (background-attachment: local) — moves with the content, fading from the column color at the edge to transparent. Hides the shadow when content is scrolled to that edge. - "shadow" gradient (background-attachment: scroll) — pinned to the viewport edge of the scroll container. Visible whenever there is still content to scroll past, vanishing once the cover gradient slides over it. Net effect: a soft inset shadow appears at the top edge once the user has scrolled down at all, and at the bottom edge whenever there are more cards below the fold. No JavaScript needed. */ .internal-minimal .kan-col-body { padding: 12px; overflow-y: auto; /* Reserve gutter so the scrollbar doesn't reflow content when it appears, and force the scrollbar to be visible (overrides macOS auto-hide) so "this column scrolls" is obvious without hover. */ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.32) transparent; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 120px; background-color: var(--im-card); background-image: linear-gradient(to bottom, var(--im-card) 30%, rgba(255,255,255,0)), linear-gradient(to top, var(--im-card) 30%, rgba(255,255,255,0)), radial-gradient(farthest-side at 50% 0, rgba(15,23,42,0.35), rgba(15,23,42,0)), radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,0.35), rgba(15,23,42,0)); background-repeat: no-repeat; background-position: 0 0, 0 100%, 0 0, 0 100%; background-size: 100% 24px, 100% 24px, 100% 18px, 100% 18px; background-attachment: local, local, scroll, scroll; } .internal-minimal .kan-col-body.drag-over { background: var(--im-line-soft); } /* WebKit fallback for the same goal — Safari/Chrome respect these instead of `scrollbar-color`. */ .internal-minimal .kan-col-body::-webkit-scrollbar { width: 8px; } .internal-minimal .kan-col-body::-webkit-scrollbar-track { background: transparent; } .internal-minimal .kan-col-body::-webkit-scrollbar-thumb { background-color: rgba(15,23,42,0.28); border-radius: 4px; } .internal-minimal .kan-col-body::-webkit-scrollbar-thumb:hover { background-color: rgba(15,23,42,0.45); } .internal-minimal .kan-col-empty { padding: 30px 12px; text-align: center; color: var(--im-dim); font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; } .internal-minimal .kan-col-footer { padding: 10px 16px; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-dim); text-align: center; border-top: 1px solid var(--im-line-soft); } /* Cards */ .internal-minimal .kan-card { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; padding: 10px 12px; cursor: grab; font-size: 13px; transition: border-color 0.1s, box-shadow 0.1s; display: flex; flex-direction: column; gap: 6px; } .internal-minimal .kan-card:hover { background: #f8fafc; box-shadow: 0 2px 8px rgba(17, 17, 17, 0.08); } .internal-minimal .kan-card:active { cursor: grabbing; } .internal-minimal .kan-card.sortable-ghost { opacity: 0.3; } .internal-minimal .kan-card.sortable-chosen { cursor: grabbing; } .internal-minimal .kan-card.overdue { border-left: 3px solid var(--im-red); padding-left: 10px; } /* Kanban card focus indicator — no outline (clicked cards shouldn't ring), instead a subtle background tint so keyboard focus + click selection are visible without a heavy border around every interaction. */ .internal-minimal .kan-card:focus, .internal-minimal .kan-card:focus-visible, .internal-minimal .skb-card:focus, .internal-minimal .skb-card:focus-visible { outline: none; background: #f1f5f9; } .internal-minimal .skb-col-dot.appointment { background: var(--im-cyan); } .internal-minimal .skb-col-dot.followup { background: var(--im-orange); } .internal-minimal .skb-col-dot.deposit { background: var(--im-slate); } .internal-minimal .skb-col-dot.won { background: var(--im-teal); } .internal-minimal .skb-col-dot.lost { background: #b91c1c; } .internal-minimal .skb-col-dot.terminal { background: var(--im-teal); } .internal-minimal .skb-col-count { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.5px; color: var(--im-muted); background: var(--im-line-soft); padding: 2px 7px; border-radius: 1px; font-variant-numeric: tabular-nums; } .internal-minimal .skb-col-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 120px; } .internal-minimal .skb-col-empty { padding: 32px 8px; text-align: center; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-dim); } /* Cards */ .internal-minimal .skb-card { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; padding: 12px 12px 10px; font-size: 13px; color: var(--im-ink); display: flex; flex-direction: column; gap: 8px; } .internal-minimal .skb-card.won { border-left: 3px solid var(--im-teal); padding-left: 11px; } .internal-minimal .skb-card.lost { border-left: 3px solid var(--im-red); padding-left: 11px; } .internal-minimal .skb-card-line-1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .internal-minimal .kan-card .kan-name { font-weight: 600; font-size: 14px; color: var(--im-ink); letter-spacing: -0.1px; } .internal-minimal .skb-name { font-weight: 600; font-size: 14px; letter-spacing: -0.1px; color: var(--im-ink); } .internal-minimal .skb-gender-age { font-family: var(--im-mono); font-size: 11px; color: var(--im-muted); letter-spacing: 0.4px; white-space: nowrap; } .internal-minimal .kan-card .kan-card-line-2 { display: flex; gap: 4px; flex-wrap: wrap; } .internal-minimal .kan-card .kan-card-facts { font-family: var(--im-sans); font-size: 11px; line-height: 1.5; color: var(--im-muted); } .internal-minimal .kan-card .kan-card-contact { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.3px; color: var(--im-dim); word-break: break-all; } .internal-minimal .kan-card .kan-chip { } .internal-minimal .skb-chip-row { display: flex; gap: 6px; flex-wrap: wrap; } .internal-minimal .skb-chip { display: inline-flex; align-items: center; font-family: var(--im-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 6px; border-radius: 1px; background: var(--im-line-soft); color: var(--im-muted); white-space: nowrap; } .internal-minimal .kan-card .kan-chip.partner { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .kan-card .kan-chip.source-self { background: var(--im-slate-soft); color: var(--im-slate); } .internal-minimal .kan-card .kan-chip.lang { background: var(--im-cyan-soft); color: var(--im-cyan); } .internal-minimal .kan-card .kan-card-line-3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; } .internal-minimal .kan-card .kan-card-left { display: inline-flex; align-items: center; gap: 8px; } .internal-minimal .kan-card .kan-age-in-stage { font-family: var(--im-mono); font-size: 10px; color: var(--im-muted); letter-spacing: 0.3px; } .internal-minimal .kan-card .kan-age-in-stage.warn { color: var(--im-warn-fg); } .internal-minimal .kan-card .kan-age-in-stage.bad { color: var(--im-red); } .internal-minimal .kan-card .kan-sla-badge { font-family: var(--im-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; padding: 2px 6px; border-radius: 1px; } .internal-minimal .kan-card .kan-sla-badge.ok { background: var(--im-teal-soft); color: var(--im-teal); } .internal-minimal .kan-card .kan-sla-badge.bad { background: var(--im-red-soft); color: var(--im-red); } .internal-minimal .kan-card .kan-next-action { font-family: var(--im-mono); font-size: 11px; font-weight: 500; color: var(--im-ink); letter-spacing: 0.2px; } .internal-minimal .kan-card .kan-next-action.overdue { color: var(--im-red); } .internal-minimal .kan-card .kan-card-note { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--im-line-soft); font-size: 12px; color: var(--im-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; } /* Card menu — 2 rows × 3 buttons, mirroring the Page 2 action set. */ .internal-minimal .kan-card .kan-card-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--im-line-soft); display: flex; flex-direction: column; gap: 4px; } .internal-minimal .kan-card .kan-card-actions-line { display: flex; justify-content: flex-end; gap: 6px; } .internal-minimal .kan-card .kan-card-action.muted { background: transparent; } .internal-minimal .kan-card .kan-card-action { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; padding: 4px 10px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-muted); border-radius: 2px; cursor: pointer; } .internal-minimal .kan-card .kan-card-action:hover { color: var(--im-ink); border-color: var(--im-ink); } .internal-minimal .kan-card .kan-card-action.danger:hover { background: var(--im-red); color: var(--im-bg); border-color: var(--im-red); } /* Error / reject flash toast (drop rejection, server error) */ .internal-minimal .kan-flash { position: fixed; top: 24px; right: 24px; background: var(--im-red-soft); color: var(--im-red-deep); border: 1px solid var(--im-red); padding: 12px 16px; font-family: var(--im-mono); font-size: 12px; letter-spacing: 0.3px; z-index: 200; border-radius: 2px; max-width: 360px; box-shadow: 0 6px 20px rgba(180, 52, 39, 0.15); } /* Note modal — opens on every drop per spec. Scoped under `.internal-minimal` so these rules only apply on pages that opted into the Minimal Mono aesthetic. The modal is appended to `document.body`, which inherits the body class, so descendant selectors still match when the Stimulus controller injects the element. */ .internal-minimal .kan-modal-wrap { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; } .internal-minimal .kan-modal-wrap[hidden] { display: none; } .internal-minimal .kan-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.45); } .internal-minimal .kan-modal { position: relative; width: 440px; max-width: 92vw; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; padding: 24px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); font-family: var(--im-sans); color: var(--im-ink); } .internal-minimal .kan-modal-title { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 4px; } .internal-minimal .kan-modal-sub { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-muted); margin-bottom: 18px; } .internal-minimal .kan-modal-warning { padding: 10px 12px; margin-bottom: 14px; background: #fbf1de; color: #8a5a15; border: 1px solid #e4d4a8; border-radius: 3px; font-size: 12px; line-height: 1.5; } .internal-minimal .kan-modal-label { display: block; margin-bottom: 14px; } .internal-minimal .kan-modal-label > span { display: block; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-muted); margin-bottom: 6px; } .internal-minimal .kan-modal-label textarea, .internal-minimal .kan-modal-label input { width: 100%; padding: 10px 12px; border: 1px solid var(--im-line); border-radius: 2px; font-family: inherit; font-size: 13px; color: var(--im-ink); background: #fff; resize: vertical; } .internal-minimal .kan-modal-label textarea:focus, .internal-minimal .kan-modal-label input:focus { outline: 2px solid var(--im-focus); outline-offset: 1px; } .internal-minimal .kan-modal-err { font-family: var(--im-mono); font-size: 11px; color: var(--im-red); margin-bottom: 12px; } .internal-minimal .kan-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .internal-minimal .kan-modal-btn { height: 36px; padding: 0 16px; border: 1px solid var(--im-line); background: #fff; color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; cursor: pointer; border-radius: 2px; } .internal-minimal .kan-modal-btn:hover { background: var(--im-line-soft); } .internal-minimal .kan-modal-btn-primary { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .kan-modal-btn-primary:hover { background: #000; color: var(--im-bg); } .internal-minimal .kan-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; } font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; background: var(--im-line-soft); color: var(--im-slate); border-radius: 1px; } .internal-minimal .skb-chip.partner { background: var(--im-ink); color: var(--im-bg); } .internal-minimal .skb-chip.self { background: var(--im-teal); color: var(--im-card); } .internal-minimal .skb-chip.source { background: var(--im-cyan-soft); color: var(--im-cyan); } .internal-minimal .skb-chip.won { background: var(--im-teal-soft); color: var(--im-teal); } .internal-minimal .skb-chip.lost { background: var(--im-red-soft); color: var(--im-red); } .internal-minimal .skb-card-line-3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.2px; color: var(--im-muted); } .internal-minimal .skb-days { color: var(--im-muted); } .internal-minimal .skb-days.warn { color: var(--im-warn-fg); } .internal-minimal .skb-days.bad { color: var(--im-red); } .internal-minimal .skb-key-meta { font-weight: 600; color: var(--im-ink); } .internal-minimal .skb-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--im-line-soft); } .internal-minimal .skb-card-actions form { margin: 0; padding: 0; display: inline-flex; } .internal-minimal .skb-card-action { height: 26px; padding: 0 9px; border: 1px solid var(--im-line); background: transparent; color: var(--im-ink); font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; cursor: pointer; border-radius: 1px; } .internal-minimal .skb-card-action:not(:disabled):hover { background: var(--im-ink); color: var(--im-card); border-color: var(--im-ink); } .internal-minimal .skb-card-action.danger:not(:disabled):hover { background: var(--im-red); border-color: var(--im-red); } .internal-minimal .skb-card-action.success:not(:disabled):hover { background: var(--im-teal); border-color: var(--im-teal); } .internal-minimal .skb-card-action:disabled { opacity: 0.4; cursor: not-allowed; } /* ════════════════════════════════════════════════════════════ Reports (Manager Dashboard) — Minimal Mono scoped rules. All selectors are prefixed `.internal-minimal .rpt-*` so they do NOT touch the legacy `.rpt-*` block above. Matches the visual language of Page 2 (scheduler/today). ════════════════════════════════════════════════════════════ */ .internal-minimal .rpt-page { max-width: 1240px; margin: 0 auto; padding: 40px 32px 96px; } .internal-minimal .rpt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; } .internal-minimal .rpt-head-text { min-width: 0; } .internal-minimal .rpt-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .rpt-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .rpt-meta-sep { margin: 0 8px; color: var(--im-dim); } /* Range selector (top-right) */ .internal-minimal .rpt-range { display: inline-flex; gap: 20px; background: transparent; border: 0; padding: 0; } .internal-minimal .rpt-range a { font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); padding: 4px 0 6px; border-radius: 0; border-bottom: 2px solid transparent; font-weight: 500; background: transparent; } .internal-minimal .rpt-range a.active { color: var(--im-ink); background: transparent; border-bottom-color: var(--im-ink); } .internal-minimal .rpt-range a:hover:not(.active) { color: var(--im-ink); background: transparent; } /* ── Top KPI strip ─────────────────────────────────────────── */ .internal-minimal .rpt-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 28px 0; border-top: 1px solid var(--im-line); border-bottom: 1px solid var(--im-line); margin-bottom: 40px; } .internal-minimal .rpt-kpi { background: transparent; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .internal-minimal .rpt-kpi-label { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .rpt-kpi-value { font-size: 34px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1; font-variant-numeric: tabular-nums; margin: 0; } .internal-minimal .rpt-kpi .kpi-delta { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-dim); } .internal-minimal .rpt-kpi .kpi-delta.up { color: var(--im-teal); } .internal-minimal .rpt-kpi .kpi-delta.down { color: var(--im-red); } .internal-minimal .rpt-kpi-hint { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-dim); } /* ── Section wrappers ──────────────────────────────────────── */ .internal-minimal .rpt-section { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; margin-bottom: 32px; overflow: hidden; } .internal-minimal .rpt-section-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--im-line-soft); display: block; } .internal-minimal .rpt-section-title, .internal-minimal h2.rpt-section-title { font-size: 18px; font-weight: 600; color: var(--im-ink); letter-spacing: -0.2px; margin: 0; line-height: 1.25; } .internal-minimal .rpt-section-sub { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-muted); margin-top: 6px; } /* ── Funnel bar chart (grayscale) ──────────────────────────── */ .internal-minimal .rpt-funnel { display: flex; padding: 40px 24px 24px; gap: 24px; align-items: flex-end; min-height: 240px; } .internal-minimal .rpt-funnel-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; } .internal-minimal .rpt-funnel-value { font-size: 20px; font-weight: 600; color: var(--im-ink); margin-bottom: 8px; font-variant-numeric: tabular-nums; line-height: 1; } .internal-minimal .rpt-funnel-bar { width: 100%; border-radius: 1px; min-height: 14px; /* Grayscale gradient — first bar darkest, progressively lighter. Step 0 = near-black, step 4 = softer gray. Overriding :nth-child rules below carry the same specificity as the legacy rainbow rules (.class: nth-child .class = 0,3,0) — we scope with `.internal-minimal` for 0,4,0 so Minimal Mono cleanly wins source-order independence. */ background: rgba(17, 17, 17, 0.92); } .internal-minimal .rpt-funnel-step:nth-child(1) .rpt-funnel-bar { background: rgba(17, 17, 17, 0.92); } .internal-minimal .rpt-funnel-step:nth-child(2) .rpt-funnel-bar { background: rgba(17, 17, 17, 0.78); } .internal-minimal .rpt-funnel-step:nth-child(3) .rpt-funnel-bar { background: rgba(17, 17, 17, 0.62); } .internal-minimal .rpt-funnel-step:nth-child(4) .rpt-funnel-bar { background: rgba(17, 17, 17, 0.46); } .internal-minimal .rpt-funnel-step:nth-child(5) .rpt-funnel-bar { background: rgba(17, 17, 17, 0.30); } .internal-minimal .rpt-funnel-label { font-family: var(--im-mono); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); margin-top: 10px; } .internal-minimal .rpt-funnel-conv { position: absolute; top: -28px; right: calc(-50% + 12px); background: var(--im-card); border: 1px solid var(--im-line); color: var(--im-muted); font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 1px; font-weight: 500; z-index: 1; } .internal-minimal .rpt-funnel-conv.low { color: var(--im-red); border-color: var(--im-red-soft); background: var(--im-red-soft); } .internal-minimal .rpt-funnel-insight { padding: 0 24px 20px; font-size: 13px; color: var(--im-muted); line-height: 1.6; } .internal-minimal .rpt-funnel-insight strong { color: var(--im-ink); font-weight: 600; } /* ── Tables (shared table style for leaderboard + cohort) ─── */ .internal-minimal .rpt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .internal-minimal .rpt-tbl th { text-align: left; padding: 14px 24px; font-family: var(--im-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--im-muted); font-weight: 500; background: transparent; border-bottom: 1px solid var(--im-line); } .internal-minimal .rpt-tbl th.num { text-align: right; } .internal-minimal .rpt-tbl td { padding: 14px 24px; border-top: 1px solid var(--im-line-soft); vertical-align: middle; color: var(--im-ink); } .internal-minimal .rpt-tbl tr:first-child td { border-top: 0; } .internal-minimal .rpt-tbl td.num { font-variant-numeric: tabular-nums; text-align: right; } .internal-minimal .rpt-tbl .rpt-name { font-weight: 500; color: var(--im-ink); } .internal-minimal .rpt-tbl .muted { color: var(--im-dim); } .internal-minimal .rpt-tbl tr:hover td { background: var(--im-line-soft); } .internal-minimal .rpt-tbl .rpt-total-row { font-weight: 600; background: var(--im-line-soft); } .internal-minimal .rpt-tbl .rpt-total-row td { border-top-color: var(--im-line); } .internal-minimal .rpt-tbl .rpt-total-row:hover td { background: var(--im-line); } .internal-minimal .rpt-empty { text-align: center; color: var(--im-dim); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; padding: 28px 16px !important; } /* ── Cohort-table specifics ────────────────────────────────── */ .internal-minimal .rpt-cohort-count { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--im-ink); } .internal-minimal .rpt-cohort-pct { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-muted); margin-left: 6px; } .internal-minimal .rpt-cohort-caveat { padding: 16px 24px 20px; font-size: 12px; color: var(--im-muted); line-height: 1.6; border-top: 1px solid var(--im-line-soft); background: var(--im-bg); } .internal-minimal .rpt-cohort-caveat strong { color: var(--im-ink); font-weight: 600; } /* ── MCP callouts (below cohort) ───────────────────────────── */ .internal-minimal .rpt-mcp { display: grid; gap: 14px; } .internal-minimal .rpt-mcp-row { display: flex; gap: 24px; align-items: baseline; padding: 14px 18px; border: 1px dashed var(--im-line); background: transparent; border-radius: 2px; } .internal-minimal .rpt-mcp-label { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-ink); flex-shrink: 0; min-width: 220px; } .internal-minimal .rpt-mcp-body { font-size: 13px; color: var(--im-muted); line-height: 1.5; } /* ── Manager assignment queue (Minimal Mono) ─────────────── */ .internal-minimal .assign-page { max-width: 1200px; margin: 0 auto; padding: 40px 32px 96px; } .internal-minimal .assign-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; } .internal-minimal .assign-head-text { min-width: 0; } .internal-minimal .assign-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .assign-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .assign-meta-num { color: var(--im-ink); font-weight: 500; } .internal-minimal .assign-meta-sep { margin: 0 8px; color: var(--im-dim); } .internal-minimal .assign-flash { padding: 12px 16px; font-size: 13px; margin-bottom: 20px; border-radius: 2px; } .internal-minimal .assign-flash-ok { background: var(--im-teal-soft); color: var(--im-teal); border: 1px solid var(--im-teal); } .internal-minimal .assign-flash-err { background: var(--im-red-soft); color: var(--im-red-deep); border: 1px solid var(--im-red); } .internal-minimal .assign-empty { text-align: center; padding: 80px 24px; background: var(--im-card); border: 1px dashed var(--im-line); border-radius: 2px; } .internal-minimal .assign-empty-icon { font-size: 28px; color: var(--im-teal); margin-bottom: 12px; } .internal-minimal .assign-empty-title { font-size: 16px; font-weight: 600; color: var(--im-ink); margin-bottom: 4px; } .internal-minimal .assign-empty-sub { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--im-muted); } .internal-minimal .assign-list { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; } .internal-minimal .assign-row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--im-line-soft); border-left: 3px solid transparent; } .internal-minimal .assign-row:last-child { border-bottom: none; } .internal-minimal .assign-row-warn { border-left-color: var(--im-orange); } .internal-minimal .assign-row-overdue { border-left-color: var(--im-red); background: var(--im-overdue-row); } .internal-minimal .assign-identity { min-width: 0; } .internal-minimal .assign-name { font-size: 15px; font-weight: 600; color: var(--im-ink); margin-bottom: 4px; } .internal-minimal .assign-age, .internal-minimal .assign-gender { font-weight: 400; color: var(--im-muted); margin-left: 4px; } .internal-minimal .assign-facts { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-muted); margin-bottom: 4px; } .internal-minimal .assign-facts .sep { margin: 0 6px; color: var(--im-dim); } .internal-minimal .assign-contact { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-muted); } .internal-minimal .assign-contact .sep { margin: 0 6px; color: var(--im-dim); } .internal-minimal .assign-source { display: flex; flex-direction: column; gap: 8px; } .internal-minimal .assign-chip { display: inline-block; padding: 3px 8px; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; border-radius: 2px; width: fit-content; } .internal-minimal .assign-chip.partner { background: var(--im-cyan-soft); color: var(--im-cyan); border: 1px solid var(--im-cyan); } .internal-minimal .assign-chip.source-self { background: var(--im-slate-soft); color: var(--im-slate); border: 1px solid var(--im-line); } .internal-minimal .assign-submitted { display: flex; gap: 10px; align-items: center; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.3px; color: var(--im-muted); } .internal-minimal .assign-age-chip { padding: 2px 7px; font-size: 10px; letter-spacing: 0.4px; border-radius: 2px; } .internal-minimal .assign-age-ok { background: var(--im-teal-soft); color: var(--im-teal); } .internal-minimal .assign-age-warn { background: var(--im-orange-soft); color: var(--im-orange); } .internal-minimal .assign-age-overdue { background: var(--im-red-soft); color: var(--im-red-deep); } .internal-minimal .assign-form { display: flex; gap: 8px; align-items: center; } .internal-minimal .assign-select { height: 36px; padding: 0 12px; border: 1px solid var(--im-line); border-radius: 2px; font-size: 13px; font-family: var(--im-sans); color: var(--im-ink); background: var(--im-bg); min-width: 180px; } .internal-minimal .assign-select:focus { outline: 2px solid var(--im-focus); outline-offset: 1px; border-color: var(--im-ink); } .internal-minimal .assign-btn { height: 36px; padding: 0 16px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; cursor: pointer; border-radius: 2px; } .internal-minimal .assign-btn-primary { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .assign-btn-primary:hover { background: var(--im-focus); } /* Dual-dropdown reassign form — wider grid cell so scheduler + sales selects + 保存 fit on one row. Stacks under 900px. */ .internal-minimal .assign-row { grid-template-columns: 1.4fr 1fr minmax(420px, auto); } .internal-minimal .assign-form-dual { display: grid; grid-template-columns: auto auto auto; gap: 10px; align-items: end; } .internal-minimal .assign-form-field { display: flex; flex-direction: column; gap: 4px; } .internal-minimal .assign-form-label { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--im-muted); text-transform: uppercase; } .internal-minimal .assign-form-dual .assign-select { min-width: 140px; } .internal-minimal .assign-name-link { color: var(--im-ink); text-decoration: none; border-bottom: 1px solid transparent; } .internal-minimal .assign-name-link:hover { border-bottom-color: var(--im-ink); } .internal-minimal .assign-stage-chip { display: inline-block; margin-left: 8px; padding: 2px 7px; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-muted); background: var(--im-slate-soft); border: 1px solid var(--im-line); border-radius: 2px; vertical-align: middle; } /* Filter bar above the assignment list. */ .internal-minimal .assign-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .internal-minimal .assign-filter-input { height: 36px; padding: 0 12px; border: 1px solid var(--im-line); border-radius: 2px; font-size: 13px; font-family: var(--im-sans); background: var(--im-bg); color: var(--im-ink); min-width: 240px; } .internal-minimal .assign-filter-input:focus { outline: 2px solid var(--im-focus); outline-offset: 1px; border-color: var(--im-ink); } .internal-minimal .assign-filter-select { height: 36px; padding: 0 12px; border: 1px solid var(--im-line); border-radius: 2px; font-size: 13px; background: var(--im-bg); color: var(--im-ink); } .internal-minimal .assign-filter-clear { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--im-muted); text-decoration: none; border-bottom: 1px dashed var(--im-line); } .internal-minimal .assign-filter-clear:hover { color: var(--im-ink); } /* Pager — bottom of the list. */ .internal-minimal .assign-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 24px; padding: 16px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; color: var(--im-muted); } .internal-minimal .assign-pager-link { color: var(--im-ink); text-decoration: none; padding: 6px 12px; border: 1px solid var(--im-line); border-radius: 2px; } .internal-minimal .assign-pager-link:hover { background: var(--im-slate-soft); } /* ── Lead-assignment toasts (real-time) ───────────────────── */ .lead-notifications { position: fixed; top: 72px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none; } .lead-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #1f2937; color: #fff; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-size: 13px; animation: lead-toast-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1); } .lead-toast-exit { animation: lead-toast-out 240ms ease forwards; } @keyframes lead-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes lead-toast-out { to { opacity: 0; transform: translateY(-6px); } } .lead-toast-body { flex: 1; min-width: 0; } .lead-toast-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; } .lead-toast-subtitle { font-size: 12px; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-toast-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .lead-toast-btn { font-size: 12px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; background: transparent; color: #fff; cursor: pointer; text-decoration: none; } .lead-toast-btn:hover { background: rgba(255, 255, 255, 0.08); } .lead-toast-btn-primary { background: #4f46e5; border-color: #4f46e5; } .lead-toast-btn-primary:hover { background: #4338ca; } .lead-toast-dismiss { background: transparent; border: none; color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; } .lead-toast-dismiss:hover { color: #fff; } /* ── Disqualified leads (undo surface, Minimal Mono) ─────── */ .internal-minimal .disq-page { max-width: 1200px; margin: 0 auto; padding: 40px 32px 96px; } .internal-minimal .disq-head { margin-bottom: 36px; } .internal-minimal .disq-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .internal-minimal .disq-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .disq-meta-num { color: var(--im-ink); font-weight: 500; } .internal-minimal .disq-meta-sep { margin: 0 8px; color: var(--im-dim); } .internal-minimal .disq-flash { padding: 12px 16px; font-size: 13px; margin-bottom: 20px; border-radius: 2px; font-family: var(--im-sans); } .internal-minimal .disq-flash-ok { background: var(--im-teal-soft); color: var(--im-teal); border: 1px solid var(--im-teal); } .internal-minimal .disq-flash-err { background: var(--im-red-soft); color: var(--im-red-deep); border: 1px solid var(--im-red); } .internal-minimal .disq-empty { text-align: center; padding: 80px 24px; color: var(--im-muted); background: var(--im-card); border: 1px dashed var(--im-line); border-radius: 2px; font-family: var(--im-mono); font-size: 12px; letter-spacing: 0.6px; } .internal-minimal .disq-list { background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; } .internal-minimal .disq-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--im-line-soft); } .internal-minimal .disq-row:last-child { border-bottom: none; } .internal-minimal .disq-identity { min-width: 0; } .internal-minimal .disq-name { font-size: 15px; font-weight: 600; color: var(--im-ink); margin-bottom: 4px; } .internal-minimal .disq-age, .internal-minimal .disq-gender { font-weight: 400; color: var(--im-muted); margin-left: 4px; } .internal-minimal .disq-facts { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-muted); margin-bottom: 6px; } .internal-minimal .disq-facts .sep { margin: 0 6px; color: var(--im-dim); } .internal-minimal .disq-reason { display: flex; gap: 10px; align-items: center; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; } .internal-minimal .disq-reason-chip { padding: 3px 8px; background: var(--im-red-soft); color: var(--im-red-deep); border: 1px solid var(--im-red); border-radius: 2px; text-transform: uppercase; } .internal-minimal .disq-reason-note { font-family: var(--im-sans); font-size: 12px; letter-spacing: 0; color: var(--im-ink); max-width: 420px; } .internal-minimal .disq-actor { color: var(--im-muted); } .internal-minimal .disq-form { display: flex; gap: 8px; align-items: center; } .internal-minimal .disq-note-input { height: 36px; padding: 0 12px; border: 1px solid var(--im-line); border-radius: 2px; font-size: 13px; font-family: var(--im-sans); color: var(--im-ink); background: var(--im-bg); min-width: 240px; } .internal-minimal .disq-note-input:focus { outline: 2px solid var(--im-focus); outline-offset: 1px; border-color: var(--im-ink); } .internal-minimal .disq-btn { height: 36px; padding: 0 16px; border: 1px solid var(--im-line); background: var(--im-card); color: var(--im-ink); font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; cursor: pointer; border-radius: 2px; } .internal-minimal .disq-btn-primary { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .disq-btn-primary:hover { background: var(--im-focus); } /* ── Row-action overflow ("⋯" disclosure) ─────────────────── */ .row-action-overflow { position: relative; display: inline-block; } .row-action-overflow summary { list-style: none; cursor: pointer; font-weight: 600; letter-spacing: 1px; user-select: none; } .row-action-overflow summary::-webkit-details-marker { display: none; } .row-action-overflow-trigger { min-width: 28px; text-align: center; } .row-action-overflow[open] .row-action-overflow-trigger { background: #eef0f3; } .row-action-overflow-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; background: #fff; border: 1px solid #d4d7dc; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 4px; min-width: 120px; display: flex; flex-direction: column; gap: 2px; } .row-action-overflow-item { text-align: left; padding: 7px 10px; font-size: 13px; border: none; background: transparent; cursor: pointer; border-radius: 3px; white-space: nowrap; } .row-action-overflow-item:hover { background: #f3f4f6; } .row-action-overflow-item.danger { color: #9b2c2c; } .row-action-overflow-item.danger:hover { background: #fbeaea; } /* ── Kanban manager filter (disclosure panel) ────────────── */ .internal-minimal .kan-filter { position: relative; display: inline-block; } .internal-minimal .kan-filter summary { list-style: none; cursor: pointer; } .internal-minimal .kan-filter summary::-webkit-details-marker { display: none; } .internal-minimal .kan-filter-trigger { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; color: var(--im-ink); user-select: none; } .internal-minimal .kan-filter[open] .kan-filter-trigger { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .kan-filter-count { display: inline-block; min-width: 16px; padding: 0 5px; background: var(--im-red); color: var(--im-bg); border-radius: 1px; font-size: 10px; text-align: center; } .internal-minimal .kan-filter-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 320px; padding: 16px; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 14px; } .internal-minimal .kan-filter-field { display: flex; flex-direction: column; gap: 6px; } .internal-minimal .kan-filter-label { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--im-muted); } .internal-minimal .kan-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; } .internal-minimal .kan-filter-chip { padding: 5px 10px; border: 1px solid var(--im-line); border-radius: 2px; font-family: var(--im-mono); font-size: 11px; color: var(--im-ink); cursor: pointer; background: var(--im-card); } .internal-minimal .kan-filter-chip input { display: none; } .internal-minimal .kan-filter-chip.active { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); } .internal-minimal .kan-filter-select { height: 32px; padding: 0 8px; font-family: var(--im-sans); font-size: 12px; border: 1px solid var(--im-line); border-radius: 2px; background: var(--im-bg); color: var(--im-ink); } .internal-minimal .kan-filter-select + .kan-filter-select { margin-top: 6px; } .internal-minimal .kan-filter-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--im-line-soft); } .internal-minimal .kan-filter-reset { font-family: var(--im-mono); font-size: 11px; letter-spacing: 0.4px; color: var(--im-muted); text-decoration: underline; text-underline-offset: 2px; } .internal-minimal .kan-filter-reset:hover { color: var(--im-ink); } /* ── Hand-off animation ──────────────────────────────────────────── Plays when a scheduler clicks 约访 — overlay + slide-out lasts 900ms, then the form submits and the page reloads (lead is gone naturally). Reused on both today rows (.sched-row) and kanban cards (.skb-card). */ .handoff-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; border-radius: inherit; opacity: 0; transition: opacity 180ms ease; z-index: 10; pointer-events: none; } .handoff-overlay.visible { opacity: 1; } .handoff-departing { transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 700ms ease; transform: translateX(28px); opacity: 0.15; } @media (prefers-reduced-motion: reduce) { .handoff-departing { transition: opacity 280ms ease; transform: none; } } /* ── Lead detail page (/leads/:id) ────────────────────────────────── */ .lead-detail { max-width: 1100px; margin: 24px auto 64px; padding: 0 24px; color: #0f172a; } .ldet-head { padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; margin-bottom: 24px; } .ldet-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .ldet-title { font-size: 22px; font-weight: 700; margin: 0; display: flex; gap: 12px; align-items: center; } .ldet-stage { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 4px; background: #e2e8f0; color: #1e293b; text-transform: uppercase; } .ldet-stage-won { background: #dcfce7; color: #166534; } .ldet-stage-lost { background: #fee2e2; color: #991b1b; } .ldet-stage-disqualified { background: #fef3c7; color: #854d0e; } .ldet-stage-appointment { background: #dbeafe; color: #1e40af; } .ldet-meta-line { font-size: 13px; color: #475569; margin-top: 6px; } .ldet-link { font-size: 13px; color: #475569; text-decoration: none; } .ldet-link:hover { color: #0f172a; text-decoration: underline; } .ldet-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; } .ldet-side { display: flex; flex-direction: column; gap: 16px; } .ldet-card { border: 1px solid #e2e8f0; border-radius: 6px; padding: 14px 16px; background: #fff; } .ldet-card-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; margin: 0 0 10px; font-weight: 600; } .ldet-dl { display: grid; grid-template-columns: 80px 1fr; row-gap: 6px; column-gap: 12px; margin: 0; font-size: 13px; } .ldet-dl dt { color: #64748b; } .ldet-dl dd { margin: 0; color: #0f172a; } .ldet-warn { color: #b45309; font-weight: 600; } .ldet-dim { color: #94a3b8; } .ldet-chip.self { background: #fef3c7; color: #854d0e; padding: 2px 6px; border-radius: 4px; font-size: 11px; } .ldet-count { color: #94a3b8; font-weight: 400; font-size: 12px; } .ldet-empty { color: #94a3b8; font-size: 13px; padding: 12px 0; } .ldet-timeline { list-style: none; padding: 0; margin: 12px 0 0; border-left: 2px solid #e2e8f0; } .ldet-event { padding: 12px 0 12px 16px; margin-left: 6px; position: relative; } .ldet-event::before { content: ""; position: absolute; left: -7px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; border: 2px solid #fff; } .ldet-event-audit::before { background: #94a3b8; } .ldet-event-note::before { background: #3b82f6; } .ldet-event-contact::before { background: #10b981; } .ldet-event-appointment::before { background: #f59e0b; } .ldet-event-meta { font-size: 11px; color: #64748b; display: flex; gap: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .ldet-event-actor::before { content: "· "; } .ldet-event-title { font-weight: 600; font-size: 13px; margin-top: 2px; color: #0f172a; } .ldet-event-body { font-size: 13px; color: #334155; margin-top: 4px; white-space: pre-wrap; } /* Make lead names link to /leads/:id without disrupting layout colour. */ .sched-name-link, .skb-name-link { color: inherit; text-decoration: none; } .sched-name-link:hover, .skb-name-link:hover { text-decoration: underline; text-underline-offset: 2px; } /* ── Lead detail · deals + payments ───────────────────────────── */ .ldet-deal { padding: 8px 0; border-top: 1px dashed #e2e8f0; } .ldet-deal:first-of-type { border-top: 0; padding-top: 0; } .ldet-deal-head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; font-weight: 600; } .ldet-deal-no { color: #64748b; font-family: var(--im-mono, monospace); font-size: 11px; } .ldet-deal-date { color: #475569; } .ldet-deal-contract { color: #0f172a; margin-left: auto; } .ldet-payments { list-style: none; padding: 4px 0 0; margin: 0; font-size: 12px; } .ldet-payments li { display: flex; gap: 8px; color: #475569; padding: 2px 0; } .ldet-pay-date { font-family: var(--im-mono, monospace); color: #94a3b8; min-width: 64px; } .ldet-pay-amt { color: #0f172a; font-weight: 500; min-width: 64px; text-align: right; } .ldet-pay-note { color: #64748b; flex: 1; } .ldet-deal-totals { margin-top: 6px; font-size: 12px; color: #475569; } .ldet-ok { color: #166534; font-weight: 600; } /* Leaderboard scheduler-name link → filtered kanban */ .rpt-name-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .rpt-name-link:hover { color: var(--im-ink, #0f172a); border-bottom-color: var(--im-ink, #0f172a); } /* Team filter dropdown on /scheduler/today + /sales/today (CEO + manager) */ .sched-head-controls { display: flex; gap: 12px; align-items: center; } .sched-team-filter { display: inline-flex; } .sched-team-filter-select { font-family: var(--im-mono, monospace); font-size: 12px; padding: 6px 10px; background: #fff; border: 1px solid #d4d4d4; border-radius: 4px; color: #0f172a; cursor: pointer; min-width: 140px; } .sched-team-filter-select:hover { border-color: #94a3b8; } .sched-team-filter-select:focus { outline: 2px solid #2563eb; outline-offset: -1px; } /* ─── Admin (员工) page — CEO-only staff console ──────────── */ .adm-page { max-width: 1100px; margin: 0 auto; padding: 40px 32px 96px; } .adm-head { margin-bottom: 36px; } .adm-title { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -0.6px; color: var(--im-ink); line-height: 1.1; } .adm-meta { margin-top: 10px; font-family: var(--im-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--im-muted); } .adm-section { margin-bottom: 40px; background: var(--im-card); border: 1px solid var(--im-line); border-radius: 2px; padding: 24px 28px; } .adm-section-title { margin: 0 0 16px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--im-muted); } .adm-new-form { display: grid; grid-template-columns: 1.5fr 2fr 1.5fr auto; gap: 12px; align-items: end; } .adm-field { display: flex; flex-direction: column; gap: 4px; } .adm-label { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-muted); } .adm-input, .adm-select { padding: 8px 10px; border: 1px solid var(--im-line); border-radius: 2px; background: #fff; font-size: 13px; color: var(--im-ink); font-family: inherit; } .adm-input:focus, .adm-select:focus { outline: 2px solid var(--im-teal); outline-offset: -1px; } .adm-select-inline { min-width: 130px; } .adm-hint { margin: 12px 0 0; font-size: 11px; color: var(--im-muted); font-style: italic; } .adm-btn { padding: 8px 14px; border: 1px solid var(--im-ink); background: #fff; color: var(--im-ink); font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 2px; font-family: inherit; } .adm-btn:hover { background: var(--im-slate-soft); } .adm-btn-primary { background: var(--im-ink); color: #fff; } .adm-btn-primary:hover { background: #000; } .adm-btn-mini { padding: 4px 8px; font-size: 11px; } .adm-btn-warn { border-color: var(--im-red); color: var(--im-red-deep); } .adm-btn-warn:hover { background: var(--im-red-soft); } .adm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .adm-tbl th { text-align: left; padding: 10px 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--im-muted); border-bottom: 1px solid var(--im-line); } .adm-tbl td { padding: 12px; border-bottom: 1px solid var(--im-line-soft); vertical-align: middle; } .adm-tbl tr:last-child td { border-bottom: none; } .adm-row-inactive { opacity: 0.5; background: var(--im-bg); } .adm-name { font-weight: 500; color: var(--im-ink); } .adm-self-tag { font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.6px; color: var(--im-teal); margin-left: 6px; } .adm-email { font-family: var(--im-mono); font-size: 12px; color: var(--im-muted); } .adm-last-login { font-family: var(--im-mono); font-size: 11px; color: var(--im-muted); } .adm-inline-form { display: flex; gap: 6px; align-items: center; } .adm-text-muted { color: var(--im-muted); font-size: 11px; } /* Historical sales-rep hints — surface the imported 销售红娘 name on any lead where assigned_sales_id is null. Lewis (or whoever's running queue cleanup) uses the hint to decide who to assign next. */ .assign-historical-hint { display: inline-block; margin-left: 8px; padding: 1px 6px; font-family: var(--im-mono); font-size: 10px; letter-spacing: 0.4px; color: var(--im-muted); background: var(--im-bg); border: 1px solid var(--im-line-soft); border-radius: 2px; text-transform: none; } .ldet-historical-hint { margin-top: 4px; font-family: var(--im-mono); font-size: 11px; color: var(--im-muted); letter-spacing: 0.3px; }