/**
 * CityVistion CE theme unification (Phase P6).
 * Aligns CE colors and header with osm.cityvistion.com / www.cityvistion.com.
 */

:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --side: #1e293b;
  --tb: #1e293b;
  --tab: #1e293b;
  --tabA: #0f172a;
  --border: #334155;
  --borderL: #334155;
  --text: #c9d1d9;
  --muted: #8b949e;
  --dim: #6e7681;
  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --btn: #21262d;
  --btnH: #30363d;
  --btnB: #30363d;
  --ed: #0d1117;
  --edLine: #161b22;
  --console: #0d1117;
  --consoleT: #c9d1d9;
  --treeH: rgba(88, 166, 255, 0.12);
  --treeS: rgba(88, 166, 255, 0.22);
}

/* Remove the separate black menu bar: merge it visually into the header/toolbar */
.menubar {
  display: flex;
  align-items: center;
  height: 36px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  gap: 12px;
  flex-shrink: 0;
}
.menubar-item {
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
}
.menubar-item:hover {
  background: var(--btnH);
}
.mb-brand {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

/* Main toolbar consistent with header */
.maintb {
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
  gap: 2px;
  flex-shrink: 0;
}
.maintb .tg {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 4px;
  gap: 2px;
}
.maintb button {
  color: var(--text);
  border-radius: 4px;
}
.maintb button:hover {
  background: var(--btnH);
}
.maintb button.on {
  background: var(--treeS);
  border-color: var(--accent);
}

/* Secondary toolbar */
.itb {
  display: flex;
  align-items: center;
  height: 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 2px;
}
.itb button {
  background: var(--btn);
  border-color: var(--btnB);
  border-radius: 4px;
  color: var(--text);
}
.itb button:hover {
  background: var(--btnH);
  border-color: var(--accent);
}
.itb select {
  background: var(--bg);
  border-color: var(--btnB);
  color: var(--text);
  border-radius: 4px;
}

/* Panels */
.lp, .rp, .btm, .btm-l {
  background: var(--panel);
  border-color: var(--border);
}
.cp {
  background: var(--bg);
}
.vp-wrap {
  background: #050505;
}

/* Tabs */
.tbar, .vptb, .c-tabs, .phdr, .mhdr {
  background: var(--panel);
  border-color: var(--border);
}
.tbar-tab, .vptb .vtab, .ct {
  background: var(--tab);
  border-color: var(--borderL);
  color: var(--muted);
  border-radius: 4px 4px 0 0;
}
.tbar-tab.sel, .vptb .vtab.sel, .ct.on {
  background: var(--tabA);
  border-bottom-color: var(--tabA);
  color: var(--text);
}

/* Inputs */
.pr input, .ed-input, .hl {
  background: var(--bg);
  border-color: var(--borderL);
  color: var(--text);
}
.pr input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--treeS);
}

/* Console */
.c-out {
  background: var(--console);
  color: var(--consoleT);
}

/* Tree items */
.ti:hover {
  background: var(--treeH);
}
.ti.on {
  background: var(--treeS);
}

/* Viewport overlay buttons */
.vp-ov button {
  background: rgba(33, 38, 45, 0.95);
  border-color: var(--border);
  color: var(--muted);
  border-radius: 4px;
}
.vp-ov button:hover {
  background: var(--btnH);
  color: var(--text);
  border-color: var(--accent);
}
.vp-ov button.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Shared site header already styled by site-shared.css; make sure it sits flush */
.cv-header {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Ensure the engine selector added by integration matches theme */
#cv-engine-select {
  background: var(--bg);
  border-color: var(--borderL);
  color: var(--text);
  border-radius: 4px;
}