/* Performance Studio — layout offsets when embedding existing dashboards */

:root {
  --studio-sidebar-width: 248px;
  --studio-context-height: 32px;
}

#studio-sidebar-host {
  position: fixed;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  z-index: 300;
}

#studio-context-host {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: var(--studio-context-height);
  z-index: 150;
}

.ps-context-bar {
  height: var(--studio-context-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #E2E8EF;
  font-family: var(--font, 'Inter', -apple-system, sans-serif);
  font-size: 11px;
  color: #4A5568;
}

.ps-context-back {
  color: #1C3A4A;
  font-weight: 600;
  text-decoration: none;
}

.ps-context-back:hover { color: #6BAE8A; }

.ps-context-sep { color: #CBD5E1; }

.ps-context-crumb strong { color: #0F1F2E; font-weight: 600; }

.ps-context-mode {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 4px;
}

body.studio-dash {
  --dash-sidebar-width: 240px;
}

body.studio-dash .sidebar {
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 10;
}

body.studio-dash .main {
  margin-left: var(--dash-sidebar-width) !important;
  margin-top: 0 !important;
  height: 100vh !important;
}

/* When the Studio back-bar is present, keep the full dashboard below it */
body.studio-dash:has(#studio-context-host) .sidebar {
  top: var(--studio-context-height) !important;
  height: calc(100vh - var(--studio-context-height)) !important;
}

body.studio-dash:has(#studio-context-host) .main {
  margin-top: var(--studio-context-height) !important;
  height: calc(100vh - var(--studio-context-height)) !important;
}

body.studio-dash.dash-sidebar-200 { --dash-sidebar-width: 200px; }

body.studio-dash.dvm-dash {
  padding-left: 0;
  padding-top: var(--studio-context-height);
  box-sizing: border-box;
}

body.studio-dash.dvm-dash .topstrip {
  margin-left: 0;
}

@media (max-width: 768px) {
  body.studio-dash .sidebar { left: 0 !important; top: 0 !important; }
  body.studio-dash .main { margin-left: 0 !important; }
  body.studio-dash:has(#studio-context-host) .sidebar {
    top: var(--studio-context-height) !important;
    height: calc(100vh - var(--studio-context-height)) !important;
  }
  body.studio-dash:has(#studio-context-host) .main {
    margin-top: var(--studio-context-height) !important;
    height: calc(100vh - var(--studio-context-height)) !important;
  }
  body.studio-dash.dvm-dash { padding-left: 0; }
}