/* WoLogs - Splunk-style dark theme */

:root {
  --splunk-black: #000; --splunk-header: #171d21; --splunk-bar: #21282e;
  --splunk-panel: #2a3036; --splunk-border: #3a424a; --splunk-green: #65a637;
  --splunk-green-hover: #5a9431; --splunk-text: #e1e8ed; --splunk-muted: #8b969e;
  --splunk-link: #6ab04c; --splunk-row-hover: #2d3842; --splunk-row-alt: #232a30;
  --fields-w: 220px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--splunk-header); color: var(--splunk-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 13px; }

/* 顶部导航栏 */
.splunk-navbar {
  background: var(--splunk-black); height: 44px; display: flex; align-items: center;
  padding: 0 16px; border-bottom: 1px solid #111; position: sticky; top: 0; z-index: 200;
}
.splunk-logo { font-size: 1.15rem; font-weight: 800; color: #fff; margin-right: 28px; white-space: nowrap; }
.splunk-logo span { color: var(--splunk-green); }
.splunk-nav-tabs { display: flex; gap: 0; height: 44px; }
.splunk-nav-tabs .tab {
  padding: 0 18px; display: flex; align-items: center; color: var(--splunk-muted);
  cursor: pointer; border-bottom: 3px solid transparent; font-size: .85rem; transition: all .15s;
}
.splunk-nav-tabs .tab:hover { color: #fff; }
.splunk-nav-tabs .tab.active { color: #fff; border-bottom-color: var(--splunk-green); }
.splunk-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--splunk-muted); font-size: .85rem; }
.splunk-nav-right .user-badge { color: var(--splunk-text); }

/* 搜索栏区域 */
.search-bar-wrap {
  background: var(--splunk-bar); padding: 10px 16px; border-bottom: 1px solid var(--splunk-border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.search-input-wrap { flex: 1; min-width: 200px; position: relative; }
.search-input-wrap .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--splunk-muted); }
.search-input {
  width: 100%; background: #171d21; border: 1px solid var(--splunk-border); color: #fff;
  padding: 7px 12px 7px 32px; border-radius: 3px; font-size: .9rem; font-family: 'Consolas', monospace;
}
.search-input:focus { outline: none; border-color: var(--splunk-green); box-shadow: 0 0 0 2px rgba(101,166,55,.2); }
.time-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.time-range input[type=datetime-local] {
  background: #171d21; border: 1px solid var(--splunk-border); color: var(--splunk-text);
  padding: 6px 8px; border-radius: 3px; font-size: .8rem; width: 195px;
  color-scheme: dark;
}
.time-range input[type=datetime-local]:focus { outline: none; border-color: var(--splunk-green); }
.time-range .sep { color: var(--splunk-muted); }
.time-range label { font-size: .75rem; color: var(--splunk-muted); white-space: nowrap; }
.btn-search-green {
  background: var(--splunk-green); border: none; color: #fff; padding: 7px 20px;
  border-radius: 3px; font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.btn-search-green:hover { background: var(--splunk-green-hover); color: #fff; }
.btn-search-green:disabled { opacity: .6; }

/* Job 状态条 */
.job-status {
  background: var(--splunk-panel); padding: 6px 16px; border-bottom: 1px solid var(--splunk-border);
  display: flex; align-items: center; gap: 20px; font-size: .8rem; color: var(--splunk-muted);
}
.job-status .event-count { color: var(--splunk-green); font-weight: 700; font-size: .95rem; }
.job-status .job-label { color: var(--splunk-text); }

/* 主布局：左侧字段 + 右侧内容 */
.main-layout { display: flex; min-height: calc(100vh - 130px); }
.fields-panel {
  width: var(--fields-w); min-width: var(--fields-w); background: var(--splunk-bar);
  border-right: 1px solid var(--splunk-border); overflow-y: auto; padding: 0;
}
.fields-section { border-bottom: 1px solid var(--splunk-border); }
.fields-section-title {
  padding: 8px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .8px;
  color: var(--splunk-muted); background: rgba(0,0,0,.15); font-weight: 600;
}
.field-item {
  padding: 5px 12px; display: flex; justify-content: space-between; align-items: center;
  cursor: default; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.03);
}
.field-item:hover { background: rgba(255,255,255,.04); }
.field-item .fname { color: var(--splunk-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.field-item .fcount { color: var(--splunk-muted); font-size: .75rem; background: #171d21; padding: 1px 6px; border-radius: 10px; cursor: help; }
.fields-empty { padding: 16px 12px; color: var(--splunk-muted); font-size: .8rem; text-align: center; }

.content-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--splunk-header); }

/* 内容 Tab */
.content-tabs {
  display: flex; background: var(--splunk-bar); border-bottom: 1px solid var(--splunk-border); padding: 0 12px;
}
.content-tabs .ctab {
  padding: 8px 16px; color: var(--splunk-muted); cursor: pointer; font-size: .82rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.content-tabs .ctab:hover { color: #fff; }
.content-tabs .ctab.active { color: #fff; border-bottom-color: var(--splunk-green); }

.view-pane { display: none; flex: 1; overflow: auto; }
.view-pane.active { display: flex; flex-direction: column; }

/* 时间线 */
.timeline-wrap {
  background: var(--splunk-panel); border-bottom: 1px solid var(--splunk-border); padding: 4px 8px 0;
}
.timeline-chart { width: 100%; height: 80px; }

/* 事件列表 */
.events-header {
  display: grid; grid-template-columns: 170px 260px 1fr; padding: 6px 12px;
  background: #1a2025; border-bottom: 1px solid var(--splunk-border);
  font-size: .75rem; color: var(--splunk-muted); text-transform: uppercase; letter-spacing: .5px;
  position: sticky; top: 0; z-index: 10;
}
.events-body { flex: 1; overflow-y: auto; }
.event-row {
  display: grid; grid-template-columns: 170px 260px 1fr; padding: 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04); font-family: 'Consolas','Monaco','Courier New',monospace;
  font-size: 12.5px; line-height: 1.5; cursor: default;
}
.event-row:nth-child(even) { background: var(--splunk-row-alt); }
.event-row:hover { background: var(--splunk-row-hover); }
.event-time { color: #a0c4e8; white-space: nowrap; }
.event-source { color: #7ec8e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-msg { color: #d4d8dc; word-break: break-all; white-space: pre-wrap; }
.event-msg .lvl-error { color: #f87171; }
.event-msg .lvl-warn { color: #fbbf24; }
.event-msg .lvl-info { color: #86efac; }
mark.highlight { background: #fef08a; color: #1a1a1a; padding: 0 1px; border-radius: 1px; }

/* JSON View（json-formatter 深色主题） */
.event-row.json-event { display: block; padding: 10px 12px; }
.event-row.json-event .event-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.event-row.json-event .event-meta .event-time { flex-shrink: 0; }
.event-row.json-event .event-meta .event-source { flex-shrink: 0; }
.json-badge {
  background: #65a637; color: #fff; font-size: 10px; padding: 2px 7px;
  border-radius: 2px; font-weight: 700; letter-spacing: .5px;
}
.json-summary { color: var(--splunk-muted); font-size: 12px; font-family: 'Consolas', monospace; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.json-view-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.json-view-btn {
  font-size: 11px; color: var(--splunk-link); cursor: pointer; border: 1px solid var(--splunk-border);
  background: #171d21; padding: 2px 8px; border-radius: 2px;
}
.json-view-btn:hover, .json-view-btn.active { border-color: var(--splunk-green); color: #fff; }
.json-viewer-host {
  background: #171d21; border: 1px solid var(--splunk-border); border-radius: 3px;
  padding: 8px 10px; overflow-x: hidden; overflow-y: auto; max-height: 420px; font-family: 'Consolas', monospace; font-size: 12px;
}
.json-viewer-host .json-formatter-row { font-family: inherit; word-break: break-all; overflow-wrap: break-word; }
.json-viewer-host .json-formatter-key,
.json-viewer-host .json-formatter-key span { color: #a0c4e8 !important; cursor: pointer; }
.json-viewer-host .json-formatter-key:hover { text-decoration: underline; text-decoration-color: #65a637; }
.json-viewer-host .json-formatter-string,
.json-viewer-host .json-formatter-string span { color: #a5d6a7 !important; word-break: break-all; overflow-wrap: break-word; }
.json-viewer-host .json-formatter-number,
.json-viewer-host .json-formatter-number span { color: #ffd54f !important; }
.json-viewer-host .json-formatter-boolean,
.json-viewer-host .json-formatter-boolean span { color: #ce93d8 !important; }
.json-viewer-host .json-formatter-null,
.json-viewer-host .json-formatter-null span { color: #90a4ae !important; }
.json-viewer-host .json-formatter-toggler { color: #e0e0e0 !important; font-weight: bold; }
.json-viewer-host .json-formatter-type,
.json-viewer-host .json-formatter-type span,
.json-viewer-host .json-formatter-constructor-name,
.json-viewer-host .json-formatter-constructor-name span { color: #e0e0e0 !important; }
.json-viewer-host .json-formatter-toggled-line,
.json-viewer-host .json-formatter-toggled-line span { color: #cfd8dc !important; }
.json-viewer-host pre.json-fallback { margin: 0; color: #cfd8dc; white-space: pre-wrap; word-break: break-all; }

.empty-state { text-align: center; padding: 80px 20px; color: var(--splunk-muted); }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .5; }
.empty-state p { margin: 0; font-size: .9rem; }

/* 可视化面板 */
.viz-grid { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viz-card { background: var(--splunk-panel); border: 1px solid var(--splunk-border); border-radius: 3px; padding: 12px; }
.viz-card.full { grid-column: 1 / -1; }
.viz-card-title { font-size: .78rem; color: var(--splunk-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.chart-container { width: 100%; height: 280px; }
.chart-container.tall { height: 320px; }

/* 程序多选下拉框 */
.multi-select-wrap {
  position: relative; min-width: 160px; max-width: 240px;
}
.multi-select-trigger {
  background: #171d21; border: 1px solid var(--splunk-border); color: var(--splunk-text);
  padding: 7px 10px; border-radius: 3px; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.multi-select-trigger:hover { border-color: var(--splunk-green); }
.ms-arrow { font-size: .7rem; color: var(--splunk-muted); transition: transform .15s; }
.multi-select-wrap.open .ms-arrow { transform: rotate(180deg); }
.multi-select-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #1e252b; border: 1px solid var(--splunk-border); border-radius: 3px;
  z-index: 300; max-height: 260px; overflow-y: auto; margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.multi-select-wrap.open .multi-select-dropdown { display: block; }
.ms-check-all {
  display: block; padding: 8px 10px; border-bottom: 1px solid var(--splunk-border);
  cursor: pointer; color: var(--splunk-text); font-size: .82rem;
}
.ms-check-all:hover { background: var(--splunk-row-hover); }
.ms-check-all input { margin-right: 6px; accent-color: var(--splunk-green); }
#msOptions label {
  display: flex; align-items: center; padding: 7px 10px; cursor: pointer;
  color: var(--splunk-text); font-size: .82rem; gap: 6px;
}
#msOptions label:hover { background: var(--splunk-row-hover); }
#msOptions input { margin-right: 6px; accent-color: var(--splunk-green); }
#msOptions .dir-missing { color: #f87171; }
.btn-icon {
  background: transparent; border: 1px solid var(--splunk-border); color: var(--splunk-muted);
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
}
.btn-icon:hover { color: #fff; border-color: var(--splunk-green); }
.agg-toolbar {
  padding: 10px 12px; background: var(--splunk-bar); border-bottom: 1px solid var(--splunk-border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.agg-toolbar label { color: var(--splunk-muted); font-size: .8rem; margin: 0; }
.agg-select {
  background: #171d21; border: 1px solid var(--splunk-border); color: var(--splunk-text);
  padding: 5px 10px; border-radius: 3px; font-size: .82rem; min-width: 160px;
}
.field-item.clickable { cursor: pointer; }
.field-item.clickable:hover .fname { text-decoration: underline; }
.field-item.field-hoverable { cursor: help; }
.field-item.field-hoverable:hover { background: rgba(101,166,55,.12); }
.field-tooltip {
  position: fixed; display: none; z-index: 9999; pointer-events: none;
  background: #1a2025; border: 1px solid #3a424a; border-radius: 4px;
  padding: 10px 12px; max-width: 400px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.45); font-size: 12px;
}
.field-tooltip .ft-title {
  color: #65a637; font-weight: 600; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid #3a424a; font-size: .85rem;
}
.field-tooltip .ft-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.field-tooltip .ft-row:last-child { border-bottom: none; }
.field-tooltip .ft-val { color: #e1e8ed; flex: 1; word-break: break-all; }
.field-tooltip .ft-cnt { color: #65a637; font-weight: 600; white-space: nowrap; }

/* 配置弹窗 */
.modal-content { background: var(--splunk-panel); border: 1px solid var(--splunk-border); color: var(--splunk-text); }
.modal-header { border-bottom-color: var(--splunk-border); }
.modal-footer { border-top-color: var(--splunk-border); }
.modal .form-control, .modal .form-select {
  background: #171d21; border-color: var(--splunk-border); color: var(--splunk-text);
}
.modal .form-control:focus { background: #171d21; color: #fff; border-color: var(--splunk-green); box-shadow: none; }
.modal .form-label { color: var(--splunk-muted); font-size: .85rem; }
.prog-list-item {
  padding: 10px 12px; border: 1px solid var(--splunk-border); border-radius: 3px; margin-bottom: 8px;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.prog-list-item:hover, .prog-list-item.active { border-color: var(--splunk-green); background: rgba(101,166,55,.08); }
.prog-list-item .badge-dir { font-size: .7rem; color: var(--splunk-muted); }
.field-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.field-row input { flex: 1; font-size: .8rem; padding: 4px 8px; }
.field-row .btn-rm { color: #f87171; border: none; background: none; cursor: pointer; padding: 4px 8px; }
.dir-input-group { display: flex; gap: 6px; }
.dir-input-group input { flex: 1; }
.dir-breadcrumb { font-size: .8rem; color: var(--splunk-muted); margin-bottom: 8px; word-break: break-all; }
.dir-breadcrumb a { color: var(--splunk-link); text-decoration: none; cursor: pointer; }
.dir-breadcrumb a:hover { text-decoration: underline; }
.dir-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--splunk-border); border-radius: 3px; }
.dir-item {
  padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04); font-size: .85rem;
}
.dir-item:last-child { border-bottom: none; }
.dir-item:hover { background: rgba(101,166,55,.1); }
.dir-item i { color: #f0c040; }
.dir-item .dir-name { flex: 1; }
.dir-item .dir-path { font-size: .72rem; color: var(--splunk-muted); }

@media (max-width: 992px) {
  .main-layout { flex-direction: column; }
  .fields-panel { width: 100%; min-width: 0; max-height: 200px; }
  .viz-grid { grid-template-columns: 1fr; }
  .events-header, .event-row { grid-template-columns: 120px 1fr; }
  .event-source { display: none; }
}