/* ============================================
   站点警员查询（station-police-search）- 隔离样式
   - 全部类名/ID 以 sps- 前缀，避免与 index.css / index.js 冲突
   - 复用 index.css :root 主题变量（--primary/--accent/--border/...）保持明亮主题一致
   - 2026-09-11 重构：顶栏入口驱动，浮动面板 + 结果表格弹窗 + GIS 警员标记
   - 2026-09-12 重构：警员查找合并窗口（上=检索条件横向平铺，下=查询结果），右侧定位与终端侧栏互不干扰
   - 2026-09-12 二轮：图层开关（Gis呈现站点）上移头部、删目标站 chip、查询按钮改“查询”、
     窗口支持拖动（头部）与缩放（右下角手柄，窄屏全宽布局除外）
   ============================================ */

/* ---- 桌面收起侧栏（终端定位按钮触发，与警员查找无关） ---- */
#side-panel.sps-sidebar-collapsed {
    display: none !important;
}

/* 窄屏侧栏为 fixed+left 滑出形态，收起由 index.js 的 open class 控制，不受本类影响 */

/* ---- 警员查找合并窗口（挂 body：上=检索条件横向平铺，下=查询结果；右侧定位不与终端侧栏重叠） ---- */
.sps-find-panel {
    position: fixed;
    top: 68px;
    right: 24px;
    width: 880px;
    min-width: 560px;   /* 与 JS 缩放下限 PANEL_MIN_W 一致 */
    min-height: 240px;  /* 与 JS 缩放下限 PANEL_MIN_H 一致 */
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 96px);
    z-index: 2400;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font);
}

/* 头部为拖拽手柄（交互元素除外）；按钮/开关自身 cursor 覆盖 */
.sps-find-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    flex: none;
    cursor: move;
    user-select: none;
    touch-action: none;   /* 拖拽优先，头部不触发浏览器手势滚动 */
}

.sps-find-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sps-float-close {
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    flex: none;
}

.sps-float-close:hover {
    background: var(--bg-card);
    color: var(--primary);
}

.sps-find-body {
    padding: 12px 14px;
    flex: 1;
    min-height: 0;   /* 窗口缩放时高度压缩，body 内部滚动 */
    overflow-y: auto;
}

/* 右下角缩放手柄（拖动调整窗口大小；窄屏隐藏） */
.sps-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    z-index: 30;
    background: linear-gradient(135deg, transparent 0 50%, var(--border) 50% 100%);
    border-bottom-right-radius: var(--radius-sm);
}

.sps-resize-handle:hover {
    background: linear-gradient(135deg, transparent 0 50%, var(--primary-light) 50% 100%);
}

.sps-hidden {
    display: none !important;
}

/* ---- 窗口头部“隐藏”按钮（收起窗口，保留结果与警员标记） ---- */
.sps-rd-btn {
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
}

.sps-rd-btn:hover {
    background: var(--bg-card);
    color: var(--primary);
}

.sps-rd-btn.danger {
    color: #b91c1c;
    border-color: rgba(185, 28, 28, 0.4);
}

.sps-rd-btn.danger:hover {
    background: rgba(183, 28, 28, 0.06);
    color: #b71c1c;
}

.sps-rd-summary {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.sps-rd-tip {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

/* 结果表格：线路/站点/警员名称/警员编号/支队/联系方式/最后上报时间 */
.sps-rd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}

.sps-rd-table th {
    text-align: left;
    padding: 8px 10px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.sps-rd-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
}

.sps-rd-table tbody tr {
    cursor: default;
    transition: background 0.15s;
}

.sps-rd-table tbody tr:hover {
    background: var(--bg-card);
}

/* 归属站无坐标的行（双击无法定位，置灰提示） */
.sps-rd-table tbody tr.sps-no-pos td {
    color: var(--text-muted);
}

/* ---- 检索条件行（横向平铺：线路下拉 / 站点可搜索下拉 / 查询按钮） ---- */
.sps-cond-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.sps-cond-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 站点下拉占据剩余宽度 */
.sps-cond-station {
    flex: 1;
    min-width: 260px;
}

/* “最近N个”数字输入固定窄宽（2026-09-18 检索条件参数化） */
.sps-cond-quota {
    flex: 0 0 96px;
}

.sps-station-dd {
    position: relative;
}

/* 站点下拉选项列表（绝对定位在输入框下方，独立滚动；高度跟随窗口高度，JS syncDdHeight 动态覆盖，260px 为兜底） */
.sps-dd-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    padding: 4px;
}

/* 图层开关（Gis呈现站点）：位于窗口头部标题右侧，flex:none 防挤压 */
.sps-layer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    flex: none;
}

.sps-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.sps-select,
.sps-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-card);
    outline: none;
    transition: border-color 0.2s;
}

.sps-select:focus,
.sps-input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.sps-layer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.sps-layer-toggle input {
    cursor: pointer;
}

/* ---- 站点下拉选项（可搜索列表，挂 .sps-dd-list 内） ---- */
.sps-station-item {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sps-station-item:hover {
    background: var(--bg-card-hover);
}

.sps-station-item.active {
    background: rgba(183, 28, 28, 0.08);
    border-color: rgba(183, 28, 28, 0.55);
}

.sps-station-item.active .sps-station-name {
    color: #b71c1c;
}

.sps-station-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sps-station-line {
    font-size: 11px;
    color: var(--text-muted);
}

.sps-list-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 20px 0;
}

/* ---- 查询结果区（合并窗口下半部；横向滚动兜底窄屏七列表格溢出） ---- */
.sps-find-result {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    overflow-x: auto;
}

.sps-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary-light);
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
}

.sps-action-btn:hover {
    background: var(--primary-dark);
}

.sps-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sps-action-btn.secondary {
    background: var(--bg-white);
    color: var(--primary);
}

.sps-action-btn.secondary:hover {
    background: var(--bg-card);
}

.sps-result-head {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sps-result-summary {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.sps-warn {
    font-size: 11px;
    color: var(--warning);
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 范围分组（previous/selected/next） */
.sps-scope-group {
    margin-bottom: 10px;
}

.sps-scope-line {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sps-scope-stations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sps-role-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
}

.sps-role-tag.selected {
    background: #b71c1c;
    border-color: #b71c1c;
    color: #fff;
    font-weight: 600;
}

.sps-role-tag.previous,
.sps-role-tag.next {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--accent);
}

/* 警员卡片（按站点分组） */
.sps-officer-group {
    margin-bottom: 10px;
}

.sps-officer-station {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sps-officer-card {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sps-officer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.sps-officer-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.sps-officer-brigade {
    font-size: 11px;
    color: var(--text-muted);
}

.sps-officer-row {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sps-officer-phone {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.sps-seg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--warning);
    background: rgba(217, 119, 6, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 4px;
}

.sps-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px 0;
}

.sps-loading {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 16px 0;
}

/* ---- 地图站点标记（三层：底图/选中/查询范围） ---- */
.sps-map-dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.55);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.15s;
}

.sps-map-dot:hover {
    transform: scale(1.25);
}

/* 选中线路时该线站点的底图强调（深紫，与站点选中的深红区分） */
.sps-map-dot.on-line {
    width: 18px;
    height: 18px;
    background: #6a1b9a;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(106, 27, 154, 0.28), 0 1px 5px rgba(0, 0, 0, 0.25);
}

/* 选中站点（深红） */
.sps-map-dot.selected {
    width: 22px;
    height: 22px;
    background: #b71c1c;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(183, 28, 28, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sps-map-dot.scope {
    width: 18px;
    height: 18px;
    background: var(--accent-light);
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sps-map-dot.scope-selected {
    width: 24px;
    height: 24px;
    background: var(--accent);
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 警员标记（2026-09-11：琥珀色，与站点蓝/绿/选中深红区分，zIndex 介于范围与选中站之间） */
.sps-map-dot.officer {
    width: 16px;
    height: 16px;
    background: #f59e0b;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4), 0 1px 5px rgba(0, 0, 0, 0.25);
}

/* 终端定位未选中：隐藏全部 GIS 终端标记（index.js 的 .custom-marker，含 SSE/历史重建后的新标记）。
   仅隐藏可视层——SSE/列表/计数/日志照常运行，选中恢复后标记即时可见且位置最新。 */
body.sps-terminal-markers-hidden .custom-marker {
    display: none !important;
}

.sps-map-dot.officer .sps-map-label {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.5);
}

/* 双击表格行 → 警员标记高亮闪烁（约 3 秒脉冲：0.75s × 4 次） */
@keyframes sps-blink-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4), 0 1px 5px rgba(0, 0, 0, 0.25);
    }
    50% {
        transform: scale(1.7);
        box-shadow: 0 0 0 9px rgba(245, 158, 11, 0.6), 0 2px 12px rgba(0, 0, 0, 0.3);
    }
}

.sps-map-dot.sps-blink {
    animation: sps-blink-pulse 0.75s ease-in-out 4;
    z-index: 10;
}

.sps-map-label {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-white);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

/* ---- 右键上下文菜单 ---- */
.sps-ctx-menu {
    position: fixed;
    z-index: 3000;
    min-width: 168px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    font-family: var(--font);
}

.sps-ctx-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 6px 10px 4px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.sps-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.sps-ctx-item:hover {
    background: var(--bg-card);
    color: var(--primary);
}

/* ---- 换乘站线路选择弹层 ---- */
.sps-line-picker {
    position: fixed;
    z-index: 3000;
    min-width: 180px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    font-family: var(--font);
}

.sps-line-picker-item {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
}

.sps-line-picker-item:hover {
    background: var(--bg-card);
    color: var(--primary);
}

/* ---- 移动端适配（窄屏：合并窗口全宽、条件行换行，避开顶栏） ---- */
@media (max-width: 768px) {
    /* 侧栏收起类不阻断窄屏滑出形态（位置由 index.js open class 控制） */
    #side-panel.sps-sidebar-collapsed {
        display: flex !important;
    }

    .sps-find-panel {
        /* !important 覆盖拖拽/缩放产生的内联定位与尺寸：窄屏固定全宽布局，不拖不缩 */
        left: 12px !important;
        right: auto !important;
        top: 68px !important;
        width: calc(100vw - 24px) !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 190px) !important;
    }

    .sps-resize-handle {
        display: none;
    }

    .sps-cond-station {
        min-width: 100%;
    }

    .sps-dd-list {
        max-height: 180px !important;   /* !important 覆盖 syncDdHeight 的内联高度：窄屏固定 */
    }

    .sps-rd-table th,
    .sps-rd-table td {
        padding: 6px 8px;
        font-size: 11px;
    }
}

/* ---- 当前区域下钻：结果表区域链接 + 站点示意图浮层 + 区域高亮（2026-09-17 需求） ---- */
.sps-muted {
    color: var(--text-muted);
}

/* 结果表“当前区域”可下钻链接 */
.sps-area-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary);
    cursor: pointer;
}

.sps-area-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 示意图浮层遮罩（高于合并窗口 z-index:2400） */
.sps-area-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sps-area-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    max-width: min(1100px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sps-area-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.sps-area-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.sps-area-sub {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
}

.sps-area-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.sps-area-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* 示意图舞台：inline-block 使盒=图片盒，pin 百分比坐标相对图片定位 */
.sps-area-stage {
    position: relative;
    display: inline-block;
    align-self: center;
    margin: 16px;
}

.sps-area-img {
    display: block;
    max-width: min(1040px, 88vw);
    max-height: 72vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #f8fafc;
}

/* 区域高亮点：定位在 (imgX%, imgY%)，脉冲强调 */
.sps-area-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: sps-area-pulse 1.4s ease-out infinite;
    pointer-events: none;
}

.sps-area-pin-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

@keyframes sps-area-pulse {
    0% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); }
    70% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0), 0 2px 8px rgba(0, 0, 0, 0.3); }
    100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); }
}

@media (max-width: 768px) {
    .sps-area-modal {
        max-width: 96vw;
    }

    .sps-area-img {
        max-width: 88vw;
    }
}