/* workspace-theme.css — Workspace Vue Shell layout guards.
   Dark theme in styles.css is now scoped to body:not(.workspace-vue-shell);
   product-pages.css dark variables are likewise scoped.
   Only layout, scrollbar, and structural rules remain here. */

/* ── Shell grid layout ─────────────────────────────────────────────── */
body.workspace-vue-shell .app-frame {
  display: grid !important;
  grid-template-columns: 236px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Sidebar rail ──────────────────────────────────────────────────── */
body.workspace-vue-shell .rail {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  height: 100vh !important;
  padding: 26px 17px 18px !important;
  transform: none !important;
}

body.workspace-vue-shell .rail-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: grid !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

body.workspace-vue-shell .rail-link {
  min-height: 44px;
  border-radius: 10px;
  animation: none !important;
}

/* Override styles.css .rail-link.active cyan-pulse animation.
   Vue scoped styles define the canonical active appearance. */
body.workspace-vue-shell .rail-link.active {
  animation: none !important;
  box-shadow: none !important;
}

body.workspace-vue-shell .rail-bottom {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  margin-top: auto !important;
  border-radius: 11px;
  backdrop-filter: none !important;
}

/* ── Main stage ────────────────────────────────────────────────────── */
body.workspace-vue-shell .stage {
  min-width: 0 !important;
}

/* ── Wordmark & masthead ───────────────────────────────────────────── */
body.workspace-vue-shell .wordmark {
  padding: 0 9px 24px !important;
}

body.workspace-vue-shell .masthead {
  text-align: left !important;
}

body.workspace-vue-shell .masthead h1 {
  font-family: "Noto Sans SC", sans-serif !important;
  text-shadow: none !important;
}

body.workspace-vue-shell .masthead h1:after {
  content: none !important;
}

/* ── Outline-button (structural only) ──────────────────────────────── */
body.workspace-vue-shell .outline-button {
  border-radius: 8px !important;
}

/* ── Hide shell pseudo-elements ────────────────────────────────────── */
body.workspace-vue-shell:before,
body.workspace-vue-shell:after {
  display: none !important;
  content: none !important;
}

body.workspace-vue-shell .app-frame:before,
body.workspace-vue-shell .app-frame:after {
  display: none !important;
  content: none !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
body.workspace-vue-shell * {
  scrollbar-color: #c8d0da var(--ws-color-scrollbar-track) !important;
}

body.workspace-vue-shell *::-webkit-scrollbar-track {
  background: var(--ws-color-scrollbar-track) !important;
}

body.workspace-vue-shell *::-webkit-scrollbar-thumb {
  background: var(--ws-color-scrollbar-thumb) !important;
  box-shadow: none !important;
}

body.workspace-vue-shell *::-webkit-scrollbar-thumb:hover {
  background: #a0aab8 !important;
  box-shadow: none !important;
}

/* ── Workspace-specific ────────────────────────────────────────────── */
body.workspace-vue-shell .page-canvas {
  background: transparent !important;
}

body.workspace-vue-shell .page-canvas:before {
  display: none !important;
}

body.workspace-vue-shell .workspace-page {
  background: transparent !important;
}

/* ── Mobile responsive layout ──────────────────────────────────────── */
@media (max-width: 860px) {
  body.workspace-vue-shell .app-frame {
    display: block !important;
  }

  body.workspace-vue-shell .rail {
    position: sticky !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 18px 10px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body.workspace-vue-shell .rail-nav {
    display: flex !important;
    overflow-x: auto !important;
    gap: 5px !important;
    padding: 2px 3px 3px !important;
  }

  body.workspace-vue-shell .rail-bottom {
    display: none !important;
  }

  body.workspace-vue-shell .rail-caption {
    display: none !important;
  }

  body.workspace-vue-shell .rail-link b {
    display: none !important;
  }
}