/* ===================== 赛事医疗急救调度系统 样式 ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #070b1c; color: #e6ecff; overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100vh; }

/* 顶部栏 */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: linear-gradient(90deg, #0b1437, #10204e);
  border-bottom: 1px solid rgba(120,160,255,0.18); flex-shrink: 0;
}
.brand { font-size: 17px; letter-spacing: .5px; }
.brand b { color: #4d8bff; }
.top-controls { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.seg { display: inline-flex; background: rgba(255,255,255,0.06); border-radius: 9px; overflow: hidden; border: 1px solid rgba(120,160,255,0.18); }
.seg button { background: transparent; border: none; color: #aebbff; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.seg button.on { background: linear-gradient(135deg, #2e7dff, #19c37d); color: #fff; font-weight: 600; }
.clock { font-variant-numeric: tabular-nums; color: #9fb4ff; font-size: 14px; min-width: 64px; text-align: right; }
.btn-ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(120,160,255,0.25); color: #cdd9ff; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-ghost:hover { background: rgba(120,160,255,0.15); }
.btn-mini { background: rgba(46,125,255,0.18); border: 1px solid rgba(46,125,255,0.5); color: #bcd4ff; padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: 12px; }
.btn-primary { background: linear-gradient(135deg, #2e7dff, #19c37d); border: none; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ok { background: linear-gradient(135deg, #19c37d, #2e7dff); border: none; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-ok:hover { filter: brightness(1.1); }
.block { display: block; width: 100%; }

/* 指挥中心布局 */
.cmd { flex: 1; display: grid; grid-template-columns: 300px 1fr 360px; gap: 12px; padding: 12px; overflow: hidden; }
.col { background: rgba(13,22,52,0.7); border: 1px solid rgba(120,160,255,0.14); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(120,160,255,0.12); }
.panel-head h3 { font-size: 14px; color: #cfe0ff; }
.hint { font-size: 12px; color: #7e91c9; }

/* 资源 */
.res-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; }
.chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(120,160,255,0.18); color: #aebbff; padding: 4px 10px; border-radius: 20px; cursor: pointer; font-size: 12px; }
.chip.on { background: rgba(46,125,255,0.25); color: #fff; border-color: #2e7dff; }
.res-list { overflow-y: auto; padding: 6px 10px 12px; flex: 1; }
.res-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; border: 1px solid rgba(120,160,255,0.1); margin-bottom: 7px; background: rgba(255,255,255,0.02); }
.res-ic { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.res-info { flex: 1; min-width: 0; }
.res-name { font-size: 13px; color: #e6ecff; }
.qual { font-size: 10px; background: #19c37d; color: #04150d; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.res-sub { font-size: 11px; color: #8093c4; margin-top: 2px; }
.res-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mini-sel { background: #0b1437; color: #cdd9ff; border: 1px solid rgba(120,160,255,0.25); border-radius: 6px; font-size: 11px; padding: 2px 4px; }
.x { background: transparent; border: none; color: #ff8585; cursor: pointer; font-size: 16px; line-height: 1; }

/* 地图 */
.col-map { padding: 0; }
.map-wrap { flex: 1; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 40%, #0e1a40, #070b1c); }
#map { width: 100%; height: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 14px; border-top: 1px solid rgba(120,160,255,0.12); font-size: 12px; color: #aebbff; }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lg i.dot-inc { background: #ff4d4f; }

/* 事件 / KPI */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 12px 4px; }
.kpi { background: rgba(255,255,255,0.04); border: 1px solid rgba(120,160,255,0.14); border-radius: 10px; padding: 8px; text-align: center; }
.kpi-n { font-size: 22px; font-weight: 700; color: #fff; }
.kpi-l { font-size: 11px; color: #93a6d6; margin-top: 2px; }
.kpi.warn .kpi-n { color: #ffb020; }
.kpi.ok .kpi-n { color: #19c37d; }
.inc-list { overflow-y: auto; padding: 6px 12px; flex: 1; }
.inc-card { border: 1px solid rgba(120,160,255,0.16); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; background: rgba(255,255,255,0.02); }
.inc-card.is-pending { border-left-color: #ff4d4f; }
.inc-card.is-dispatched { border-left-color: #ffb020; }
.inc-card.is-handling { border-left-color: #2e7dff; }
.inc-card.is-closed { border-left-color: #6b7280; opacity: .8; }
.inc-card.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%,100%{ box-shadow: 0 0 0 rgba(46,125,255,0); } 30%{ box-shadow: 0 0 0 3px rgba(46,125,255,0.55); } }
.inc-top { display: flex; align-items: center; gap: 8px; }
.inc-type { font-weight: 700; font-size: 14px; color: #fff; }
.sev { font-size: 11px; padding: 1px 7px; border-radius: 5px; margin-left: auto; }
.sev-1 { background: rgba(46,125,255,0.2); color: #9cc0ff; }
.sev-2 { background: rgba(255,176,32,0.2); color: #ffce7a; }
.sev-3 { background: rgba(255,77,79,0.22); color: #ff9a9a; }
.inc-meta { font-size: 11px; color: #8093c4; margin: 5px 0; }
.inc-assigned { font-size: 12px; color: #cdd9ff; margin-bottom: 7px; }
.tag { display: inline-block; background: rgba(46,125,255,0.18); border: 1px solid rgba(46,125,255,0.4); color: #bcd4ff; padding: 1px 7px; border-radius: 6px; margin: 2px 3px 0 0; font-size: 11px; }
.muted { color: #6b7aa8; }
.inc-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.manual-row { display: flex; gap: 6px; margin-top: 7px; }
.closed-note { color: #19c37d; font-size: 12px; align-self: center; }

/* 日志 */
.log-list { overflow-y: auto; padding: 6px 12px 12px; max-height: 150px; }
.log-item { font-size: 12px; color: #9fb0db; padding: 3px 0; border-bottom: 1px dashed rgba(120,160,255,0.08); }
.log-t { color: #6b7aa8; margin-right: 7px; font-variant-numeric: tabular-nums; }

/* 徽章 */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.st-idle { background: rgba(25,195,125,0.18); color: #5fe0a8; }
.st-patrol { background: rgba(46,125,255,0.18); color: #9cc0ff; }
.st-enroute { background: rgba(255,176,32,0.2); color: #ffce7a; }
.st-busy { background: rgba(255,77,79,0.2); color: #ff9a9a; }
.st-returning { background: rgba(120,160,255,0.2); color: #aebbff; }
.st-charging { background: rgba(150,150,200,0.18); color: #c2c8e8; }
.st-offline { background: rgba(107,114,128,0.25); color: #9aa3b8; }

.is-pending { }
.is-dispatched { }
.is-handling { }
.is-closed { }

.empty { color: #6b7aa8; font-size: 13px; padding: 16px; text-align: center; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(3,7,20,0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { width: 360px; background: #0e1740; border: 1px solid rgba(120,160,255,0.25); border-radius: 14px; overflow: hidden; }
.modal-h { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid rgba(120,160,255,0.14); font-weight: 600; }
.modal-b { padding: 16px; }
.modal-b label { display: block; font-size: 12px; color: #93a6d6; margin: 10px 0 4px; }
.f-sel, .f-in { width: 100%; background: #0b1437; color: #e6ecff; border: 1px solid rgba(120,160,255,0.3); border-radius: 8px; padding: 9px 10px; font-size: 13px; }
.f-coord { margin-top: 10px; color: #ffb020; font-size: 12px; }
.modal-f { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(120,160,255,0.14); }

/* 手机执勤端 */
.mobile { flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #0e1a40, #070b1c); padding: 16px; overflow: auto; }
.phone { width: 380px; max-width: 100%; height: 92vh; max-height: 760px; background: #0a1230; border: 8px solid #1b2752; border-radius: 32px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.phone-top { padding: 12px; text-align: center; font-weight: 700; background: linear-gradient(135deg, #2e7dff, #19c37d); color: #fff; }
.phone-id { padding: 8px 14px; font-size: 12px; color: #aebbff; border-bottom: 1px solid rgba(120,160,255,0.12); }
.phone-id select { background: #0b1437; color: #cdd9ff; border: 1px solid rgba(120,160,255,0.3); border-radius: 7px; padding: 4px 8px; margin-left: 6px; }
.phone-tabs { display: flex; border-bottom: 1px solid rgba(120,160,255,0.14); }
.phone-tabs button { flex: 1; background: transparent; border: none; color: #8093c4; padding: 11px; cursor: pointer; font-size: 13px; }
.phone-tabs button.on { color: #fff; border-bottom: 2px solid #2e7dff; font-weight: 600; }
.phone-body { flex: 1; overflow-y: auto; padding: 12px; }
.mb-h { font-size: 12px; color: #7e91c9; margin: 10px 2px 6px; }
.m-task { border: 1px solid rgba(120,160,255,0.16); border-radius: 10px; padding: 11px; margin-bottom: 9px; background: rgba(255,255,255,0.03); }
.m-task.mine { border-color: #2e7dff; background: rgba(46,125,255,0.08); }
.m-task-top { display: flex; align-items: center; gap: 8px; }
.m-task-sub { font-size: 11px; color: #8093c4; margin: 5px 0 7px; }
.rep-form label { display: block; font-size: 12px; color: #93a6d6; margin: 10px 0 4px; }
.me-card { text-align: center; padding: 16px; }
.me-ic { width: 60px; height: 60px; border-radius: 50%; background: rgba(46,125,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 10px; }
.me-name { font-size: 16px; font-weight: 700; }
.me-status { margin: 8px 0 14px; }
.me-lbl { text-align: left; }
.me-hint { font-size: 11px; color: #6b7aa8; margin-top: 14px; line-height: 1.5; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,160,255,0.3); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* 图例补充 */
.lg i.dot-km { background: #ffd166; }
.lg i.dot-me { background: #22d3ee; }

/* 资源联系电话 */
.res-phone { margin-top: 3px; }
.tel { color: #19c37d; text-decoration: none; font-size: 11px; }
.tel:hover { text-decoration: underline; }
.res-right .x { font-size: 14px; padding: 0 4px; }
.detail { margin-left: auto; }

/* 线路设计工具条 */
.route-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(120,160,255,0.12); background: rgba(8,14,36,0.6); }
.rb-info { font-size: 12px; color: #cfe0ff; margin-right: 4px; }
.rb-info b { color: #ffd166; }
.rb-lbl { font-size: 11px; color: #93a6d6; margin-left: 4px; }
.rb-unit { font-size: 11px; color: #8093c4; margin-right: 2px; }
.mini-in { width: 64px; background: #0b1437; color: #cdd9ff; border: 1px solid rgba(120,160,255,0.25); border-radius: 6px; font-size: 11px; padding: 3px 6px; }
.mini-in.grow { width: 110px; }

/* 通信录与消息平台 */
.modal.wide { width: 760px; max-width: 94vw; }
.comm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comm h4 { font-size: 13px; color: #cfe0ff; margin: 6px 0 8px; }
.comm-left { max-height: 64vh; overflow-y: auto; padding-right: 6px; }
.ct-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid rgba(120,160,255,0.12); border-radius: 10px; margin-bottom: 7px; background: rgba(255,255,255,0.02); }
.ct-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ct-info { flex: 1; min-width: 0; }
.ct-name { font-size: 13px; color: #e6ecff; }
.ct-sub { font-size: 11px; color: #8093c4; margin-top: 2px; }
.ct-act { display: flex; flex-direction: column; gap: 5px; }
.comm-right { display: flex; flex-direction: column; max-height: 64vh; overflow-y: auto; }
.comm-compose { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.comm-compose .f-ta { width: 100%; }
.f-ta { width: 100%; min-height: 56px; background: #0b1437; color: #e6ecff; border: 1px solid rgba(120,160,255,0.3); border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.msg-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.msg-row { border-radius: 9px; padding: 7px 10px; font-size: 12px; border: 1px solid rgba(120,160,255,0.12); }
.msg-row.mine { background: rgba(46,125,255,0.12); }
.msg-row.theirs { background: rgba(255,255,255,0.03); }
.msg-row.broadcast { border-color: rgba(255,176,32,0.4); }
.msg-row.unread { box-shadow: inset 3px 0 0 #ffb020; }
.msg-head { font-size: 11px; color: #93a6d6; margin-bottom: 3px; }
.msg-text { color: #dfe7ff; }
.call-list { display: flex; flex-direction: column; gap: 4px; }

/* GPS 标定 */
.calib-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 10px 0; }
.calib-grid label { font-size: 12px; color: #93a6d6; display: block; margin-bottom: 4px; }

/* 伤情跟踪详情 */
.dt-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.dt-left h4, .dt-right h4 { font-size: 13px; color: #cfe0ff; margin: 12px 0 8px; }
.dt-row { font-size: 13px; color: #dfe7ff; margin-bottom: 7px; }
.dt-actions { display: flex; gap: 8px; margin: 8px 0 4px; }
.vt { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.vt th, .vt td { border: 1px solid rgba(120,160,255,0.14); padding: 5px 7px; text-align: center; color: #cdd9ff; }
.vt th { background: rgba(46,125,255,0.12); color: #aebbff; }
.vt-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.vt-form .mini-in { width: 70px; }
.note-item { font-size: 12px; color: #cdd9ff; padding: 4px 0; border-bottom: 1px dashed rgba(120,160,255,0.08); }

/* 手机端跟踪 / 消息 */
.track-card { border: 1px solid rgba(120,160,255,0.18); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: rgba(255,255,255,0.03); }
.track-notes { margin-top: 8px; }
.conv { border: 1px solid rgba(120,160,255,0.16); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px; background: rgba(255,255,255,0.03); cursor: pointer; }
.conv:hover { border-color: #2e7dff; }
.conv-last { font-size: 12px; color: #93a6d6; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-phone { font-size: 13px; margin: 6px 0; }

@media (max-width: 1080px) {
  .cmd { grid-template-columns: 240px 1fr 300px; }
}
@media (max-width: 860px) {
  .comm, .dt-grid { grid-template-columns: 1fr; }
  .calib-grid { grid-template-columns: 1fr; }
}