/* BasedMTA ImGui module — design tokens + base widgets
   Scope everything under .bmta so we can embed this module on any
   host page without bleed. Matches the v1.6 reference: muted dark
   blue chrome, vivid accent blue, subtle rounding + ImGui-style
   inner highlights on interactive controls.
*/

.bmta {
  width: 100%;
  height: 100%;
  /* palette — calibrated against the v1.6 screenshots */
  --bmta-bg:        #0f0f12;   /* window body (behind containers) */
  --bmta-bg-2:      #141417;   /* container surfaces (sidebar, content panes) */
  --bmta-bg-3:      #1a1a1f;   /* inputs */
  --bmta-bg-4:      #08080a;   /* deepest */
  --bmta-hover:     #1a1a1f;

  --bmta-titlebar-1: #1a385c;
  --bmta-titlebar-2: #1a385c;
  --bmta-titlebar-text: #d9e3f2;

  --bmta-border:        #1d1d22;
  --bmta-border-strong: #28282f;

  --bmta-text:        #c8d0dc;
  --bmta-text-dim:    #8a93a3;
  --bmta-text-faint:  #5d6675;
  --bmta-text-strong: #eaf0f9;

  /* accent — calibrated to spec */
  --bmta-accent:        #5b9eff;       /* text accent (subheaders, focus glow) */
  --bmta-accent-tab:    #3373cc;       /* active tab fill */
  --bmta-accent-2:      #3a73c4;       /* buttons / sliders / dropdowns top */
  --bmta-accent-3:      #31629f;       /* buttons / sliders / dropdowns base */
  --bmta-accent-4:      #244c7d;       /* buttons border */
  --bmta-accent-soft:   rgba(91, 158, 255, 0.14);
  --bmta-accent-glow:   rgba(91, 158, 255, 0.32);

  --bmta-ok:        #34c47b;
  --bmta-ok-2:      #2aa066;
  --bmta-warn:      #e8b259;
  --bmta-bad:       #d34a4a;
  --bmta-bad-2:     #a83838;
  --bmta-bad-soft:  #6b2a2a;

  /* type */
  --bmta-font: "JetBrains Mono", "DejaVu Sans Mono", "Consolas", "Menlo", monospace;
  --bmta-fs: 13px;
  --bmta-fs-sm: 12px;
  --bmta-fs-xs: 11px;
  --bmta-lh: 1.5;

  /* corners — ImGui-ish */
  --bmta-r: 3px;
  --bmta-r-sm: 2px;

  font-family: var(--bmta-font);
  font-size: var(--bmta-fs);
  line-height: var(--bmta-lh);
  color: var(--bmta-text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.bmta *,
.bmta *::before,
.bmta *::after { box-sizing: border-box; }

/* =========================================================
   Window chrome
   ========================================================= */
.bmta-window {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bmta-bg);
  border: 1px solid #050709;
  border-radius: var(--bmta-r);
  box-shadow:
    0 14px 44px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.025);
  overflow: hidden;
  font-smooth: never;
  -webkit-font-smoothing : none;
}

.bmta-titlebar {
  height: 26px;
  background: linear-gradient(180deg, var(--bmta-titlebar-1) 0%, var(--bmta-titlebar-2) 100%);
  color: var(--bmta-titlebar-text);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: var(--bmta-fs-sm);
  flex: 0 0 26px;
  cursor: default;
  border-bottom: 1px solid #0a0d13;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.bmta-titlebar-title { flex: 1; opacity: 0.92; }
.bmta-titlebar-close {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--bmta-titlebar-text);
  opacity: 0.75;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--bmta-r-sm);
}
.bmta-titlebar-close:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.bmta-statusline {
  height: 24px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bmta-fs-sm);
  color: var(--bmta-text);
  flex: 0 0 24px;
  white-space: nowrap;
}
.bmta-statusline .plus { color: var(--bmta-ok); }
.bmta-statusline .sep { color: var(--bmta-text-faint); }

/* tab bar */
.bmta-tabs {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 2px 6px 0 6px;
  height: 28px;
  flex: 0 0 28px;
  border-bottom: 1px solid var(--bmta-border);
}
.bmta-tab {
  padding: 4px 10px;
  font-size: var(--bmta-fs);
  color: var(--bmta-text);
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: var(--bmta-r-sm) var(--bmta-r-sm) 0 0;
  white-space: nowrap;
  transition: background 80ms linear, color 80ms linear;
}
.bmta-tab:hover {
  color: var(--bmta-text-strong);
  background: rgba(91,158,255,0.06);
}
.bmta-tab.active {
  background: var(--bmta-accent-tab);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  border-radius: var(--bmta-r) var(--bmta-r) 0 0;
}

/* body — every panel mounts here */
.bmta-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.bmta-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* sub-page chrome shared between aimbot/local/visuals */
.bmta-pageheader {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.bmta-pageheader .spacer { flex: 1; }

.bmta-twocol {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.bmta-twocol > * {
  background: var(--bmta-bg-2);
  border-radius: var(--bmta-r);
  padding: 5px;
}
.bmta-twocol > *:last-child {
  padding: 10px 12px;
}
.bmta-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bmta-sidebar-item {
  padding: 6px 12px;
  color: var(--bmta-text);
  cursor: pointer;
  position: relative;
  font-size: var(--bmta-fs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--bmta-r-sm);
}
.bmta-sidebar-item:hover { background: rgba(255,255,255,0.04); color: var(--bmta-text-strong); }
.bmta-sidebar-item.active {
  color: var(--bmta-accent);
  background: rgba(91,158,255,0.08);
}
.bmta-sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--bmta-accent);
  border-radius: 2px;
}
.bmta-sidebar-item .count {
  color: var(--bmta-text-faint);
  font-variant-numeric: tabular-nums;
}

.bmta-section {
  margin-bottom: 4px;
}
.bmta-subheader {
  color: #18181b;
  font-size: var(--bmta-fs);
  margin: 14px 0 8px;
  letter-spacing: 0.2px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(126,182,255,0.22);
}
.bmta-subheader:first-child { margin-top: 0; }

.bmta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 16px;
  margin-bottom: 6px;
  align-items: center;
}
.bmta-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.bmta-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.bmta-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.bmta-field-label {
  color: var(--bmta-text);
}

/* =========================================================
   Controls — ImGui smoothing: subtle gradients + inner highlights
   ========================================================= */
.bmta-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--bmta-text);
  user-select: none;
  white-space: nowrap;
}
.bmta-check-box {
  width: 15px;
  height: 15px;
  background: var(--bmta-bg-3);
  display: grid;
  place-items: center;
  flex: 0 0 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color 80ms linear, background 80ms linear;
}
.bmta-check-box svg { display: block; }
.bmta-check:hover .bmta-check-box {
  background: #11161f;
}
.bmta-check.checked .bmta-check-box {
  background: var(--bmta-bg-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.bmta-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--bmta-text);
  white-space: nowrap;
}
.bmta-radio-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bmta-bg-3);
  border: 1px solid var(--bmta-border-strong);
  display: grid;
  place-items: center;
  flex: 0 0 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color 80ms linear;
}
.bmta-radio:hover .bmta-radio-dot { border-color: var(--bmta-accent); }
.bmta-radio.checked .bmta-radio-dot {
  border-color: var(--bmta-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.bmta-radio.checked .bmta-radio-dot::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--bmta-accent);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--bmta-accent-glow);
}

/* Buttons: subtle vertical gradient + 1px top highlight = ImGui look */
.bmta-btn {
  background: linear-gradient(180deg, var(--bmta-accent-2) 0%, var(--bmta-accent-3) 100%);
  color: #fff;
  border: 1px solid var(--bmta-accent-4);
  padding: 3px 12px;
  font-family: inherit;
  font-size: var(--bmta-fs);
  cursor: pointer;
  height: 22px;
  line-height: 1;
  border-radius: var(--bmta-r);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 0 rgba(0,0,0,0.18);
  transition: filter 80ms linear, transform 60ms linear;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bmta-btn:hover { filter: brightness(1.12); }
.bmta-btn:active {
  filter: brightness(0.92);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  transform: translateY(0.5px);
}

.bmta-btn.ghost {
  background: linear-gradient(180deg, #1c2330 0%, #161c27 100%);
  border: 1px solid var(--bmta-border-strong);
  color: var(--bmta-text);
}
.bmta-btn.ghost:hover {
  border-color: var(--bmta-accent);
  color: var(--bmta-text-strong);
  filter: brightness(1.15);
}
.bmta-btn.green {
  background: linear-gradient(180deg, #36a26a 0%, #277b50 100%);
  border-color: #1f6541;
}
.bmta-btn.red {
  background: linear-gradient(180deg, #b54141 0%, #8c2a2a 100%);
  border-color: #6c1f1f;
}
.bmta-btn.wide { width: 100%; }
.bmta-btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }

.bmta-input {
  background: var(--bmta-bg-3);
  border: 1px solid var(--bmta-border-strong);
  border-radius: var(--bmta-r);
  color: var(--bmta-text);
  font-family: inherit;
  font-size: var(--bmta-fs);
  padding: 3px 8px;
  height: 22px;
  width: 100%;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);
  transition: border-color 80ms linear;
}
.bmta-input:focus { border-color: var(--bmta-accent); box-shadow: inset 0 1px 0 rgba(0,0,0,0.25), 0 0 0 1px rgba(91,158,255,0.25); }
.bmta-input::placeholder { color: var(--bmta-text-faint); }

.bmta-textarea {
  background: var(--bmta-bg-3);
  border: 1px solid var(--bmta-border-strong);
  border-radius: var(--bmta-r-sm);
  color: var(--bmta-text);
  font-family: inherit;
  font-size: var(--bmta-fs);
  padding: 6px 8px;
  width: 100%;
  outline: none;
  resize: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);
}
.bmta-textarea:focus { border-color: var(--bmta-accent); }

/* Dropdown */
.bmta-select {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--bmta-bg-3);
  border: 1px solid var(--bmta-border-strong);
  height: 22px;
  cursor: pointer;
  font-size: var(--bmta-fs);
  min-width: 100px;
  border-radius: var(--bmta-r);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
  overflow: hidden;
}
.bmta-select:hover { border-color: var(--bmta-accent); }
.bmta-select-value {
  padding: 0 8px;
  display: flex; align-items: center;
  flex: 1;
  color: var(--bmta-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmta-select-caret {
  width: 22px;
  background: linear-gradient(180deg, var(--bmta-accent-2) 0%, var(--bmta-accent-3) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 22px;
  font-size: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.bmta-select-menu {
  position: absolute;
  top: calc(100% + 2px); left: -1px; right: -1px;
  background: var(--bmta-bg-2);
  border: 1px solid var(--bmta-border-strong);
  border-radius: var(--bmta-r-sm);
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}
.bmta-select-option {
  padding: 5px 10px;
  cursor: pointer;
  color: var(--bmta-text);
}
.bmta-select-option:hover { background: var(--bmta-accent-soft); color: var(--bmta-text-strong); }
.bmta-select-option.selected { color: var(--bmta-accent); }

/* Slider — rounded rail and pill thumb */
.bmta-slider {
  position: relative;
  height: 22px;
  background: var(--bmta-bg-3);
  border: 1px solid var(--bmta-border-strong);
  border-radius: var(--bmta-r);
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);
  overflow: hidden;
}
.bmta-slider-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: transparent;
}
.bmta-slider-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  width: 9px;
  background: linear-gradient(180deg, var(--bmta-accent) 0%, var(--bmta-accent-3) 100%);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 4px rgba(91,158,255,0.4);
}
.bmta-slider-value {
  position: relative;
  width: 100%;
  text-align: center;
  color: var(--bmta-text-strong);
  font-size: var(--bmta-fs);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* color picker chip */
.bmta-colorchip {
  width: 18px; height: 18px;
  background: var(--bmta-accent);
  border: 1px solid var(--bmta-border-strong);
  border-radius: var(--bmta-r-sm);
  cursor: pointer;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

/* badges / pills */
.bmta-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--bmta-text-faint);
  vertical-align: middle;
}
.bmta-dot.ok    { background: var(--bmta-ok);     box-shadow: 0 0 4px rgba(52,196,123,0.55); }
.bmta-dot.warn  { background: var(--bmta-warn);   box-shadow: 0 0 4px rgba(232,178,89,0.5); }
.bmta-dot.bad   { background: var(--bmta-bad);    box-shadow: 0 0 4px rgba(211,74,74,0.5); }
.bmta-dot.info  { background: var(--bmta-accent); box-shadow: 0 0 4px rgba(91,158,255,0.5); }

.bmta-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--bmta-bg-3);
  color: var(--bmta-text-dim);
  font-size: var(--bmta-fs-xs);
  border: 1px solid var(--bmta-border);
  border-radius: var(--bmta-r);
}
.bmta-badge.tag-blue   { background: rgba(91,158,255,0.16);  color: var(--bmta-accent); border-color: currentColor; }
.bmta-badge.tag-amber  { background: rgba(232,178,89,0.16);  color: var(--bmta-warn);   border-color: currentColor; }
.bmta-badge.tag-green  { background: rgba(52,196,123,0.16);  color: var(--bmta-ok);     border-color: currentColor; }
.bmta-badge.tag-red    { background: rgba(211,74,74,0.16);   color: var(--bmta-bad);    border-color: currentColor; }
.bmta-badge.tag-purple { background: rgba(167,124,219,0.16); color: #c099f0;            border-color: currentColor; }

/* tables / lists */
.bmta-list-head {
  display: grid;
  padding: 5px 8px;
  background: var(--bmta-bg-3);
  color: var(--bmta-text-dim);
  font-size: var(--bmta-fs);
  border-bottom: 1px solid var(--bmta-border);
  border-top-left-radius: var(--bmta-r-sm);
  border-top-right-radius: var(--bmta-r-sm);
}
.bmta-list-row {
  display: grid;
  padding: 4px 8px;
  font-size: var(--bmta-fs);
  border-bottom: 1px solid rgba(255,255,255,0.025);
  align-items: center;
}
.bmta-list-row:hover { background: var(--bmta-hover); }
.bmta-list-index {
  color: var(--bmta-text-faint);
  font-variant-numeric: tabular-nums;
}

/* scrollbars */
.bmta ::-webkit-scrollbar { width: 8px; height: 8px; }
.bmta ::-webkit-scrollbar-track { background: transparent; }
.bmta ::-webkit-scrollbar-thumb { background: var(--bmta-border-strong); border-radius: 4px; }
.bmta ::-webkit-scrollbar-thumb:hover { background: var(--bmta-text-faint); }

/* tab subheader (used in Events/Scripts) */
.bmta-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bmta-border);
  margin-bottom: 10px;
}
.bmta-subtab {
  padding: 5px 14px;
  cursor: pointer;
  color: var(--bmta-text);
  font-size: var(--bmta-fs);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 80ms linear, border-color 80ms linear;
}
.bmta-subtab:hover { color: var(--bmta-text-strong); }
.bmta-subtab.active {
  color: var(--bmta-accent);
  border-bottom-color: var(--bmta-accent);
}

/* panel banner — like a subheader for major page sections */
.bmta-banner {
  color: #7eb6ff;
  font-size: var(--bmta-fs);
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(126,182,255,0.22);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.bmta-banner .banner-tag { color: var(--bmta-ok); text-transform: uppercase; }

/* placeholder muted areas */
.bmta-empty {
  color: var(--bmta-text-faint);
  font-size: var(--bmta-fs);
  padding: 22px 12px;
  text-align: center;
  line-height: 1.7;
}

/* code/keyword colors for the script preview & exec */
.bmta-code {
  font-family: var(--bmta-font);
  font-size: var(--bmta-fs);
  white-space: pre;
  line-height: 1.5;
}
.bmta-code .ln  { color: var(--bmta-text-faint); margin-right: 10px; user-select: none; }
.bmta-code .kw  { color: #c099f0; }
.bmta-code .fn  { color: #f0c987; }
.bmta-code .str { color: #6bbf8a; }
.bmta-code .num { color: #f08a8a; }
.bmta-code .com { color: #5d6675; font-style: italic; }
.bmta-code .var { color: #9ec3ec; }
.bmta-code .pn  { color: #c4cdd9; }

/* event row tinting */
.bmta-event-row {
  border-left: 2px solid #e27d30;
  padding: 5px 8px 5px 8px;
  margin-bottom: 1px;
  font-size: var(--bmta-fs);
  background: var(--bmta-bg-2);
}
.bmta-event-row .args { color: var(--bmta-text-dim); padding-left: 14px; }
.bmta-event-row .args .arg-str { color: #6bbf8a; }
.bmta-event-row .args .arg-num { color: #f08a8a; }
.bmta-event-row .args .arg-id  { color: #9ec3ec; }

/* tweaks UI float */
.bmta-host-tweaks {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
}

/* responsiveness: the embedded module respects its container size */
.bmta-shell-fixed {
  width: 960px;
  height: 640px;
  margin: 0 auto;
}