/* Reference: a solid theme-colored navigation rail, quiet canvas, clean cards. */
:root {
  --portal-navigation: color-mix(in srgb, var(--primary) 72%, #172932);
  --portal-accent: color-mix(in srgb, var(--primary) 35%, var(--text-primary));
  --hierarchy-canvas: color-mix(in srgb, var(--bg-dark) 35%, #e9ecef);
  --hierarchy-card: color-mix(in srgb, var(--bg-card) 20%, #ffffff);
  --hierarchy-heading: color-mix(in srgb, var(--primary) 4%, var(--hierarchy-card));
  --hierarchy-module: var(--hierarchy-card);
  --hierarchy-selected: color-mix(in srgb, var(--primary) 9%, var(--hierarchy-card));
  --hierarchy-ink: var(--portal-accent);
  --region-frame: color-mix(in srgb, var(--text-primary) 14%, var(--hierarchy-card));
  --hierarchy-border: var(--region-frame);
}
:root.dark-theme {
  --portal-navigation: color-mix(in srgb, var(--primary) 22%, var(--bg-sidebar, var(--bg-card)));
  --portal-accent: color-mix(in srgb, var(--primary) 65%, var(--text-primary));
  --hierarchy-canvas: var(--bg-dark);
  --hierarchy-card: var(--bg-card);
  --hierarchy-heading: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
  --hierarchy-module: var(--bg-card);
  --hierarchy-selected: color-mix(in srgb, var(--primary) 14%, var(--bg-card));
  --region-frame: color-mix(in srgb, var(--text-primary) 16%, var(--bg-card));
}

.lab-shell .lab-nav {
  background-color: var(--portal-navigation);
  border-color: var(--portal-navigation);
}
.lab-shell .lab-nav :is(.lab-brand,.lab-brand small,.lab-nav-caption,.lab-nav-item,.lab-nav-expand,.lab-subnav button,.lab-subnav a,.lab-nav-footer > small) {
  color: #edf4f7;
}
.lab-shell .lab-nav .lab-nav-item svg,
.lab-shell .lab-nav .lab-nav-group-heading .lab-nav-item > svg { color: inherit; }
.lab-shell .lab-nav .lab-nav-item.active,
.lab-shell .lab-nav .lab-nav-group-heading .lab-nav-item.active,
.lab-shell .lab-nav .lab-subnav .selected {
  background-color: #ffffff1f;
  color: #ffffff;
  outline-color: #ffffff40;
}
.lab-shell .lab-nav .lab-nav-item.active > svg { color: #ffffff; }
.lab-shell .lab-nav .lab-nav-item:hover,
.lab-shell .lab-nav .lab-subnav button:hover,
.lab-shell .lab-nav .lab-subnav a:hover,
.lab-shell .lab-nav .lab-nav-expand:hover {
  background-color: #ffffff14;
  color: #ffffff;
}
.lab-shell .lab-nav :is(.lab-subnav,.lab-nav-footer > small) { border-color: #ffffff33; }
.lab-shell .lab-nav :is(a,button):focus-visible,
.lab-shell .lab-nav .lab-nav-group-heading .lab-nav-item:focus-visible { outline-color: #ffffff; }

.lab-shell .lab-topbar,
.app .m-navbar,
.app .m-tabbar,
.app .van-tabs__nav { background-color: var(--hierarchy-card); }
:is(.lab-shell,.app) .wb .wb-ai { background-color: var(--hierarchy-card); }
:is(.lab-shell,.app) .wb .wb-module-card:hover,
:is(.lab-shell,.app) .wb.applications-page .wb-app-card:hover {
  background-color: var(--hierarchy-selected);
}
:is(.lab-shell,.app) .wb .wb-panel-heading h2,
:is(.lab-shell,.app) .wb .wb-section-heading h2 {
  color: var(--portal-accent);
}
.lab-shell .lab-content .el-table th.el-table__cell {
  background-color: var(--hierarchy-heading);
}
.lab-shell .lab-content :is(.project-card,.team-card,.report-card,.feature-card,.meeting-card,.gm-card):hover {
  background-color: var(--hierarchy-heading);
}