/* ========================================================
   CITRINE V2 • PANEL KONFIGURASI SIMULASI (KETERPAPARAN ASET)
   Header + tombol Start, kartu penyerang/bertahan, parameter skenario.
   Memakai token UI kit (v2_ui.css) agar seragam dengan modul lain.
   ======================================================== */

.exp-config-panel {
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--c-r-lg);
  padding: 16px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0;
}

/* HEADER */
.exp-config-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.exp-config-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.exp-config-icon-box {
  width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
  background: var(--c-panel); border: 1px solid var(--c-line-2); border-radius: var(--c-r);
}
.exp-config-icon-box svg { width: 16px; height: 16px; color: var(--c-text-3); }
.exp-config-title { font-size: 14px; font-weight: 600; color: var(--c-text-strong); }
.exp-config-sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

.btn-simulate-strike-start {
  flex: 0 0 auto; height: 36px; min-width: 132px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-neg); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--c-r);
  color: #fff; cursor: pointer; transition: background 0.15s ease;
}
.btn-simulate-strike-start:hover { background: #dc2626; }
.btn-simulate-strike-start:disabled { opacity: 0.7; cursor: progress; }
.btn-sim-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }

/* GRID KARTU */
.exp-config-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; }
@media (max-width: 1180px) {
  .exp-config-grid { grid-template-columns: 1fr 1fr; }
  .exp-cfg-additional { grid-column: 1 / -1; flex-direction: row !important; }
  .exp-cfg-additional .exp-cfg-field { flex: 1; }
}
@media (max-width: 760px) {
  .exp-config-grid { grid-template-columns: 1fr; }
  .exp-cfg-additional { flex-direction: column !important; }
  .exp-config-header { flex-wrap: wrap; }
  .btn-simulate-strike-start { width: 100%; }
}

.exp-cfg-card {
  background: var(--c-panel); border: 1px solid var(--c-line-2); border-radius: var(--c-r);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.exp-cfg-card-title { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-text-3); }

/* SELECT NEGARA */
.exp-select-box {
  position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 30px 0 10px;
  background: var(--c-card); border: 1px solid var(--c-line-3); border-radius: 8px;
  transition: border-color 0.15s ease; min-width: 0;
}
.exp-select-box:hover, .exp-select-box:focus-within { border-color: var(--c-gold-line); }

@font-face {
  font-family: "Twemoji Country Flags"; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
  font-display: swap;
}
.exp-hud-flag-img {
  width: 22px; height: 16px; flex: 0 0 22px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.exp-custom-select {
  position: absolute; inset: 0; width: 100%; padding: 0 30px 0 42px;
  background: transparent; border: none; outline: none; color: var(--c-text);
  font-size: 13px; font-family: "Twemoji Country Flags", var(--font-sans, sans-serif), sans-serif;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.exp-custom-select option, .exp-custom-select optgroup { background: var(--c-card); color: var(--c-text); font-family: var(--font-sans, sans-serif); }
.exp-select-chevron {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--c-muted); pointer-events: none;
}

/* POSTUR NUKLIR */
.exp-nuclear-pill {
  display: flex; flex-direction: column; gap: 3px; min-height: 42px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--c-line-2); background: var(--c-card); font-size: 12px; line-height: 1.35;
}
.nuc-pill-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nuc-pill-type {
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid currentColor;
}
.nuc-pill-count { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.nuc-pill-delivery { color: var(--c-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-nuclear-pill.nuc-p5 .nuc-pill-type { color: var(--c-neg-text); }
.exp-nuclear-pill.nuc-p5 { border-color: rgba(239, 68, 68, 0.25); }
.exp-nuclear-pill.nuc-defacto .nuc-pill-type { color: var(--c-warn-text); }
.exp-nuclear-pill.nuc-defacto { border-color: rgba(245, 158, 11, 0.25); }
.exp-nuclear-pill.nuc-non .nuc-pill-type { color: var(--c-pos-text); }

/* PARAMETER SKENARIO: SEGMENTED CONTROL */
.exp-cfg-additional { justify-content: space-between; gap: 12px; }
.exp-cfg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-sublabel { font-size: 12px; color: var(--c-text-3); }
.exp-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px;
  background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: 8px;
}
.exp-weapon-mode-btn, .exp-route-mode-btn {
  height: 30px; min-width: 0; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--c-muted); font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.exp-weapon-mode-btn svg, .exp-route-mode-btn svg { width: 13px; height: 13px; flex: 0 0 13px; }
.exp-weapon-mode-btn:hover, .exp-route-mode-btn:hover { color: var(--c-text); background: var(--c-hover); }
.exp-weapon-mode-btn.active, .exp-route-mode-btn.active {
  background: var(--c-raised); border-color: var(--c-line-3); color: var(--c-text-strong);
}
.exp-weapon-mode-btn.active svg, .exp-route-mode-btn.active svg { color: var(--c-gold); }
.exp-weapon-mode-btn.active[data-mode="nuclear"] {
  background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.45); color: var(--c-neg-text);
}
.exp-weapon-mode-btn.active[data-mode="nuclear"] svg { color: var(--c-neg-text); }
/* mode Nuklir dinonaktifkan untuk penyerang tanpa senjata nuklir */
.exp-weapon-mode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.exp-weapon-mode-btn:disabled:hover { color: inherit; background: transparent; }