/* ============================================================
   客户 360° 档案抽屉。
   类名一律 skp- 前缀，并且所有规则都挂在 .skp-root 之下——本文件随
   base.html 注入到全部 31 个页面，绝不能影响任何页面的既有元素。
   ============================================================ */

.skp-mask {
    position: fixed;
    inset: 0;
    background: rgba(1, 24, 44, .5);
    backdrop-filter: blur(2px);
    z-index: 10002;
    opacity: 0;
    transition: opacity .16s ease;
}
.skp-mask.skp-in { opacity: 1; }

.skp-root {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 780px;
    max-width: 100vw;
    background: #f4f7fb;
    z-index: 10003;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 60px rgba(1, 24, 44, .3);
    transform: translateX(100%);
    transition: transform .2s cubic-bezier(.22, .8, .3, 1);
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    color: #24303c;
}
.skp-root.skp-in { transform: none; }

/* ---- 顶部 ---- */
.skp-head {
    background: #013e6e;
    color: #fff;
    padding: 16px 22px 14px;
    flex: 0 0 auto;
}
.skp-head-top { display: flex; align-items: center; gap: 10px; }
.skp-name { font-size: 19px; font-weight: 900; letter-spacing: .5px; }
.skp-stage {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    background: #fabf13;
    color: #013e6e;
    border-radius: 11px;
    padding: 2px 10px;
}
.skp-x {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .85);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.skp-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.skp-sub {
    margin-top: 7px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .68);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.skp-sub b { color: #fff; font-weight: 700; }

/* ---- 金额概览 ---- */
.skp-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .16);
    margin-top: 14px;
    border-radius: 8px;
    overflow: hidden;
}
.skp-tile { background: #0a4a80; padding: 9px 12px; }
.skp-tile .k {
    font-size: 10.5px;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .5px;
    font-weight: 700;
}
.skp-tile .v { font-size: 16px; font-weight: 900; margin-top: 3px; }
.skp-tile.skp-debt .v { color: #ffb3ba; }

/* ---- 分段导航 ---- */
.skp-tabs {
    display: flex;
    gap: 2px;
    padding: 0 14px;
    background: #fff;
    border-bottom: 1px solid #e3eaf2;
    flex: 0 0 auto;
    overflow-x: auto;
}
.skp-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 800;
    color: #6b7885;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.skp-tab.skp-on { color: #013e6e; border-bottom-color: #fabf13; }
.skp-tab .n {
    font-size: 11px;
    background: #eaf0f7;
    color: #46586b;
    border-radius: 9px;
    padding: 1px 6px;
    margin-left: 5px;
    font-weight: 800;
}

/* ---- 内容区 ---- */
.skp-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 40px; }
.skp-pane { display: none; }
.skp-pane.skp-on { display: block; }

.skp-card {
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}
.skp-card > h4 {
    margin: 0;
    padding: 11px 15px;
    font-size: 12.5px;
    font-weight: 900;
    color: #013e6e;
    letter-spacing: .8px;
    border-bottom: 1px solid #eef2f7;
    background: #fafcfe;
}

.skp-kv { display: grid; grid-template-columns: 104px 1fr; }
.skp-kv > div { padding: 8px 15px; font-size: 12.5px; border-bottom: 1px solid #f3f6fa; }
.skp-kv > div:nth-child(odd) { color: #8794a3; font-weight: 700; background: #fcfdfe; }
.skp-kv > div:nth-child(even) { color: #24303c; font-weight: 600; word-break: break-all; }
.skp-kv > div:nth-last-child(1),
.skp-kv > div:nth-last-child(2) { border-bottom: 0; }

.skp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.skp-table th {
    background: #f6f9fc;
    color: #013e6e;
    text-align: left;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    white-space: nowrap;
    border-bottom: 1px solid #e6ecf3;
}
.skp-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f6fa;
    color: #2b3846;
    white-space: nowrap;
}
.skp-table tr:last-child td { border-bottom: 0; }
.skp-scroll { overflow-x: auto; }

.skp-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eaf0f7;
    color: #46586b;
}
.skp-badge.ok { background: #d9f0e2; color: #17663c; }
.skp-badge.wait { background: #fdf0d5; color: #8a6d1f; }
.skp-badge.bad { background: #fdeaec; color: #b60014; }

/* ---- 时间线 ---- */
.skp-tl { position: relative; padding-left: 22px; }
.skp-tl::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #dde5ee;
}
.skp-ev { position: relative; padding: 0 0 15px 0; }
.skp-ev::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8fa3b8;
    box-shadow: 0 0 0 3px #f4f7fb;
}
.skp-ev.k-lead::before { background: #0a5a9e; }
.skp-ev.k-assign::before { background: #7b61a8; }
.skp-ev.k-follow::before { background: #b7791f; }
.skp-ev.k-channel::before { background: #0f8f8f; }
.skp-ev.k-sub::before { background: #013e6e; }
.skp-ev.k-approve::before { background: #217346; }
.skp-ev.k-contract::before { background: #1f6fb2; }
.skp-ev.k-deal::before { background: #fabf13; }
.skp-ev.k-pay::before { background: #217346; }
.skp-ev.k-reject::before { background: #b60014; }
.skp-ev .t { font-size: 11px; color: #93a0ae; font-weight: 700; letter-spacing: .3px; }
.skp-ev .l { font-size: 13px; font-weight: 800; color: #1d2a37; margin-top: 1px; }
.skp-ev .d { font-size: 12px; color: #5d6c7b; margin-top: 2px; line-height: 1.6; word-break: break-all; }

.skp-empty { padding: 34px 10px; text-align: center; color: #8794a3; font-size: 13px; }
.skp-loading { padding: 60px 10px; text-align: center; color: #8794a3; font-size: 13px; }

/* 列表页里用来打开档案的客户名 */
.sk-profile-link {
    color: #0a5a9e;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed rgba(10, 90, 158, .45);
}
.sk-profile-link:hover { color: #013e6e; border-bottom-style: solid; }

@media (max-width: 860px) {
    .skp-root { width: 100vw; }
    .skp-tiles { grid-template-columns: repeat(2, 1fr); }
    .skp-kv { grid-template-columns: 88px 1fr; }
}

@media print {
    .skp-mask, .skp-root { display: none !important; }
}