/* ── Custom element display + layout shell ──────────────────────────────────── */

tasks-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

task-running-section,
task-cron-jobs-section,
task-scheduled-section,
task-history-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

llm-providers-page,
models-hub-page {
  display: none; /* toggled by JS */
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

models-llm-section,
models-transcribe-section,
models-image-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

projects-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

project-list-section,
project-board-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

session-detail-page,
system-agents-page,
file-viewer-page,
tool-detail-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

users-page,
roles-page,
shared-folders-page,
connectors-page,
connector-detail-page,
plugins-page,
plugin-catalog-page,
plugin-detail-page,
plugin-page-host,
marketplace-page,
profile-page {
  display: none; /* toggled by JS */
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--toolbar-border, #e5e9f0);
}

/* Plugin-contributed page fragments mount inside the host with the `plugin-id`
   attribute set — make them fill the host column (the host is `flex:1`, but a
   bare custom element has no default sizing). Generic across all plugins. */
plugin-page-host > [plugin-id] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ── Workspace placeholder ──────────────────────────────────────────────────── */

.app-workspace {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-color, #94a3b8);
  font-size: 0.9rem;
}