/* ========================================================
   CITRINE V2 • WAR INTEL
   ======================================================== */
.war-view-container { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; gap: 12px; height: calc(100vh - 128px); }
.war-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.war-scope { display: flex; align-items: center; gap: 6px; min-width: 0; }
.war-crumb { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--c-text-3); font: inherit; font-size: 13px; cursor: pointer; }
.war-crumb:last-child, .war-crumb.on { color: var(--c-text-strong); font-weight: 600; cursor: default; }
.war-crumb:not(:last-child):hover { border-color: #2e2e32; color: var(--c-text-strong); }
.war-crumb svg { width: 14px; height: 14px; color: var(--c-gold); }
.war-sep { width: 13px; height: 13px; color: var(--c-faint); }
.war-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.war-days { padding: 2px; gap: 2px; }
.war-days button { height: 28px; padding: 0 12px; font-size: 12px; }
.war-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.war-kinds .c-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.war-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.war-minsrc select { background: transparent; border: none; color: inherit; font: inherit; font-size: 12px; }

.war-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; }
.war-map-card { position: relative; min-height: 0; border-radius: var(--c-r-lg); overflow: hidden; border: 1px solid #29292c; background: #141416; }
#warMap { position: absolute; inset: 0; background: #141416; }
.war-meta { position: absolute; left: 12px; bottom: 10px; z-index: 700; max-width: calc(100% - 80px); padding: 5px 10px; border-radius: 8px;
  background: rgba(20, 20, 22, 0.88); border: 1px solid #2e2e32; font-size: 10.5px; color: var(--c-text-3); }
.war-pop { font-size: 12px; line-height: 1.45; }
.war-pop-kind { font-weight: 600; }
.war-pop-actors { color: #f4f4f5; }
.war-pop-meta { color: #a1a1aa; font-size: 11px; margin: 2px 0 4px; }
.war-pop a { color: var(--c-gold); }

.war-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.war-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.war-kpis > div { padding: 12px 14px; border-radius: var(--c-r); background: #1a1a1c; border: 1px solid #29292c; }
.war-kpis b { display: block; font-size: 20px; font-weight: 600; color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.war-kpis span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-text-3); }
.war-kpis em, .war-hot-val small { font-style: normal; font-size: 10.5px; margin-left: 4px; }
.war-kpis em.up, .war-hot-val small.up { color: #f87171; }
.war-kpis em.down, .war-hot-val small.down { color: #34d399; }
.war-sec { padding: 14px 16px; border-radius: var(--c-r-lg); background: #1a1a1c; border: 1px solid #29292c; }
.war-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--c-text-strong); }
.war-sec-title svg { width: 15px; height: 15px; color: var(--c-gold); }
.war-sec .c-empty { padding: 6px 0; font-size: 12.5px; }
.war-sec .c-hint { margin: 8px 0 0; font-size: 11px; }

.war-hot { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; margin: 0 -8px; box-sizing: content-box;
  background: none; border: none; border-radius: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.war-hot:hover, .war-hot.on { background: #232326; }
.war-hot .c-rank { flex: 0 0 16px; color: var(--c-faint); }
.war-hot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.war-hot-name { font-size: 12.5px; color: #e4e4e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-bar { height: 4px; border-radius: 99px; background: #2a2a2d; overflow: hidden; }
.war-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b45309, #ef4444); }
.war-hot-val { font-size: 12px; color: var(--c-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.war-chart { position: relative; height: 190px; }
.war-pair { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: #d4d4d8; border-bottom: 1px solid #26262a; }
.war-pair:last-of-type { border-bottom: none; }
.war-pair svg { width: 13px; height: 13px; color: var(--c-faint); flex: 0 0 auto; }
.war-pair span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-pair b { margin-left: auto; font-weight: 500; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.war-ev { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #26262a; }
.war-ev:last-child { border-bottom: none; }
.war-ev .war-dot { margin-top: 5px; }
.war-ev-body { min-width: 0; }
.war-ev-title { font-size: 12.5px; color: #e4e4e7; overflow-wrap: anywhere; }
.war-ev-meta { margin-top: 2px; font-size: 11px; color: var(--c-text-3); overflow-wrap: anywhere; }
.war-ev-meta a { color: var(--c-gold); }

@media (max-width: 1100px) {
  .war-grid { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 55vh) auto; overflow-y: auto; }
  .war-side { overflow: visible; }
}

/* ---- menu dock per jenis workspace (v2_dock_mode.js) ---- */
body:not(.mode-war) .war-only { display: none !important; }
body.mode-war #dockBtnOverview, body.mode-war #dockBtnPipeline,
body.mode-war #dockBtnSources, body.mode-war #dockBtnTrends { display: none !important; }
body.mode-war .war-only { order: -1; }

/* ---- halaman Timeline Serangan: tanpa peta, panel jadi lebar penuh ---- */
.war-mode-timeline .war-map-card { display: none; }
.war-mode-timeline .war-grid { grid-template-columns: minmax(0, 1fr); }
.war-mode-timeline .war-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.war-mode-timeline .war-kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
.war-mode-timeline .war-sec-tl, .war-mode-timeline .war-sec-ev { grid-column: 1 / -1; }
.war-mode-timeline .war-chart { height: 320px; }
.war-mode-timeline .war-sec-ev { columns: 2 380px; column-gap: 28px; }
.war-mode-timeline .war-sec-ev .war-sec-title { column-span: all; }
.war-mode-timeline .war-ev { break-inside: avoid; }
@media (max-width: 900px) {
  .war-mode-timeline .war-side { grid-template-columns: minmax(0, 1fr); }
  .war-mode-timeline .war-kpis { grid-template-columns: 1fr 1fr; }
}
/* urutan di halaman timeline: KPI, terpanas | pelaku, grafik, kejadian */
.war-mode-timeline .war-sec-tl { order: 3; }
.war-mode-timeline .war-sec-ev { order: 4; }