/* ================= VIEW CONTAINERS & RESIZABLE PANES ================= */
.view-container {
  display: none;
  flex: 1;
  height: calc(100vh - 54px);
  overflow: hidden;
}
.view-container.active {
  display: flex;
}

#viewWorkspace {
  display: none;
  width: 100%;
  height: calc(100vh - 54px);
  flex-direction: row;
  overflow: hidden;
}
#viewWorkspace.active { display: flex; }

.pane-left {
  width: 330px;
  min-width: 240px;
  max-width: 560px;
  background: var(--md-surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.pane-center {
  flex: 1;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--md-bg);
  position: relative;
  overflow: hidden;
}
.pane-right {
  width: 390px;
  min-width: 260px;
  max-width: 680px;
  background: var(--md-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* Minimalist Material Split Resizers */
.resizer-v {
  width: 5px;
  cursor: col-resize;
  background: var(--md-outline-variant);
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  transition: background 0.15s var(--md-ease);
}
.resizer-v:hover, .resizer-v.dragging {
  background: var(--md-primary-strong);
}
.resizer-h {
  height: 5px;
  cursor: row-resize;
  background: var(--md-outline-variant);
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  transition: background 0.15s var(--md-ease);
}
.resizer-h:hover, .resizer-h.dragging {
  background: var(--md-primary-strong);
}